@marimo-team/islands 0.20.5-dev6 → 0.20.5-dev60

package/src/components/editor/chrome/types.ts

@@ -59,6 +59,8 @@ export interface PanelDescriptor {
   defaultSection: PanelSection;
   /** Capability required for this panel to be visible. If the capability is false, the panel is hidden. */
   requiredCapability?: keyof Capabilities;
+  /** Additional search keywords for the command palette */
+  additionalKeywords?: string[];
 }
 
 /**
@@ -73,6 +75,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Files",
     tooltip: "View files",
     defaultSection: "sidebar",
+    additionalKeywords: ["explorer", "browser", "directory"],
   },
   {
     type: "variables",
@@ -80,6 +83,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Variables",
     tooltip: "Explore variables and data sources",
     defaultSection: "sidebar",
+    additionalKeywords: ["state", "scope", "inspector"],
   },
   {
     type: "packages",
@@ -87,6 +91,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Packages",
     tooltip: "Manage packages",
     defaultSection: "sidebar",
+    additionalKeywords: ["dependencies", "pip", "install"],
   },
   {
     type: "ai",
@@ -94,6 +99,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "AI",
     tooltip: "Chat & Agents",
     defaultSection: "sidebar",
+    additionalKeywords: ["chat", "copilot", "assistant"],
   },
   {
     type: "outline",
@@ -101,6 +107,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Outline",
     tooltip: "View outline",
     defaultSection: "sidebar",
+    additionalKeywords: ["toc", "structure", "headings"],
   },
   {
     type: "documentation",
@@ -108,6 +115,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Docs",
     tooltip: "View live docs",
     defaultSection: "sidebar",
+    additionalKeywords: ["reference", "api"],
   },
   {
     type: "dependencies",
@@ -115,6 +123,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Dependencies",
     tooltip: "Explore dependencies",
     defaultSection: "sidebar",
+    additionalKeywords: ["graph", "imports"],
   },
   // Developer panel defaults
   {
@@ -123,6 +132,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Errors",
     tooltip: "View errors",
     defaultSection: "developer-panel",
+    additionalKeywords: ["exceptions", "problems", "diagnostics"],
   },
   {
     type: "scratchpad",
@@ -130,6 +140,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Scratchpad",
     tooltip: "Scratchpad",
     defaultSection: "developer-panel",
+    additionalKeywords: ["scratch", "draft", "playground"],
   },
   {
     type: "tracing",
@@ -137,6 +148,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Tracing",
     tooltip: "View tracing",
     defaultSection: "developer-panel",
+    additionalKeywords: ["profiling", "performance"],
   },
   {
     type: "secrets",
@@ -145,6 +157,7 @@ export const PANELS: PanelDescriptor[] = [
     tooltip: "Manage secrets",
     defaultSection: "developer-panel",
     hidden: isWasm(),
+    additionalKeywords: ["env", "environment", "keys", "credentials"],
   },
   {
     type: "logs",
@@ -152,6 +165,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Logs",
     tooltip: "View logs",
     defaultSection: "developer-panel",
+    additionalKeywords: ["console", "stdout"],
   },
   {
     type: "terminal",
@@ -161,6 +175,7 @@ export const PANELS: PanelDescriptor[] = [
     hidden: isWasm(),
     defaultSection: "developer-panel",
     requiredCapability: "terminal",
+    additionalKeywords: ["shell", "console", "bash", "command"],
   },
   {
     type: "snippets",
@@ -168,6 +183,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Snippets",
     tooltip: "Snippets",
     defaultSection: "developer-panel",
+    additionalKeywords: ["templates", "examples"],
   },
   {
     type: "cache",
@@ -176,6 +192,7 @@ export const PANELS: PanelDescriptor[] = [
     tooltip: "View cache",
     defaultSection: "developer-panel",
     hidden: !getFeatureFlag("cache_panel"),
+    additionalKeywords: ["memory", "memoize"],
   },
 ];
 

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}