@marimo-team/frontend 0.20.5-dev3 → 0.20.5-dev33

package/src/components/storage/components.tsx

@@ -8,15 +8,9 @@ import CoreweaveIcon from "@marimo-team/llm-info/icons/coreweave.svg?inline";
 import CoreweaveDarkIcon from "@marimo-team/llm-info/icons/coreweave-dark.svg?inline";
 import {
   DatabaseZapIcon,
-  FileCodeIcon,
-  FileIcon,
-  FileSpreadsheetIcon,
-  FileTextIcon,
-  FileVideoIcon,
   GithubIcon,
   GlobeIcon,
   HardDriveIcon,
-  ImageIcon,
 } from "lucide-react";
 import GoogleCloudIcon from "@/components/databases/icons/google-cloud-storage.svg?inline";
 import GoogleDriveIcon from "@/components/databases/icons/google-drive.svg?inline";
@@ -24,38 +18,6 @@ import type { KnownStorageProtocol } from "@/core/storage/types";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
 
-export function renderFileIcon(name: string): React.ReactNode {
-  const ext = name.split(".").pop()?.toLowerCase();
-  switch (ext) {
-    case "png":
-    case "jpg":
-    case "jpeg":
-    case "gif":
-    case "svg":
-    case "webp":
-      return <ImageIcon className="h-3.5 w-3.5 text-purple-500" />;
-    case "csv":
-    case "parquet":
-    case "arrow":
-    case "xlsx":
-      return <FileSpreadsheetIcon className="h-3.5 w-3.5 text-green-500" />;
-    case "py":
-    case "js":
-    case "ts":
-    case "json":
-      return <FileCodeIcon className="h-3.5 w-3.5 text-blue-500" />;
-    case "mp4":
-    case "mpeg":
-      return <FileVideoIcon className="h-3.5 w-3.5 text-orange-500" />;
-    case "txt":
-    case "md":
-    case "log":
-      return <FileTextIcon className="h-3.5 w-3.5 text-muted-foreground" />;
-    default:
-      return <FileIcon className="h-3.5 w-3.5 text-muted-foreground" />;
-  }
-}
-
 type IconEntry =
   | { src: string; dark?: string }
   | React.ComponentType<{ className?: string }>;

package/src/components/storage/storage-file-viewer.tsx

@@ -5,6 +5,7 @@ import type React from "react";
 import { useCallback } from "react";
 import { useLocale } from "react-aria";
 import { FilePreviewHeader } from "@/components/editor/file-tree/file-header";
+import { renderFileIcon } from "@/components/editor/file-tree/file-icons";
 import {
   FileContentRenderer,
   isMediaMime,
@@ -18,7 +19,6 @@ import { formatBytes } from "@/utils/formatting";
 import { Logger } from "@/utils/Logger";
 import { CopyClipboardIcon } from "../icons/copy-icon";
 import { Button } from "../ui/button";
-import { renderFileIcon } from "./components";
 
 const MAX_MEDIA_PREVIEW_SIZE = 100 * 1024 * 1024; // 100 MB
 

package/src/components/storage/storage-inspector.tsx

@@ -2,16 +2,13 @@
 
 import { CommandList } from "cmdk";
 import {
-  ChevronRightIcon,
   CopyIcon,
   DownloadIcon,
   FolderIcon,
   HardDriveIcon,
   HelpCircleIcon,
   LoaderCircle,
-  MoreVerticalIcon,
   PlusIcon,
-  RefreshCwIcon,
   ViewIcon,
   XIcon,
 } from "lucide-react";
@@ -20,6 +17,16 @@ import { useLocale } from "react-aria";
 import { EngineVariable } from "@/components/databases/engine-variable";
 import { PanelEmptyState } from "@/components/editor/chrome/panels/empty-state";
 import { AddConnectionDialog } from "@/components/editor/connections/add-connection-dialog";
+import {
+  FILE_ICON_COLOR,
+  renderFileIcon,
+} from "@/components/editor/file-tree/file-icons";
+import {
+  MENU_ITEM_ICON_CLASS,
+  MoreActionsButton,
+  RefreshIconButton,
+  TreeChevron,
+} from "@/components/editor/file-tree/tree-actions";
 import { Command, CommandInput, CommandItem } from "@/components/ui/command";
 import {
   DropdownMenu,
@@ -49,7 +56,7 @@ import { formatBytes } from "@/utils/formatting";
 import { Logger } from "@/utils/Logger";
 import { ErrorState } from "../datasources/components";
 import { Button } from "../ui/button";
-import { ProtocolIcon, renderFileIcon } from "./components";
+import { ProtocolIcon } from "./components";
 import { StorageFileViewer } from "./storage-file-viewer";
 
 interface OpenFileInfo {
@@ -305,17 +312,14 @@ const StorageEntryRow: React.FC<{
         }}
       >
         {isDir ? (
-          <ChevronRightIcon
-            className={cn(
-              "h-3 w-3 shrink-0 transition-transform",
-              effectiveExpanded && "rotate-90",
-            )}
-          />
+          <TreeChevron isExpanded={effectiveExpanded} className="h-3 w-3" />
         ) : (
           <span className="w-3 shrink-0" />
         )}
         {isDir ? (
-          <FolderIcon className="h-3.5 w-3.5 text-amber-500 shrink-0" />
+          <FolderIcon
+            className={cn("h-3.5 w-3.5 shrink-0", FILE_ICON_COLOR.directory)}
+          />
         ) : (
           renderFileIcon(name)
         )}
@@ -337,14 +341,10 @@ const StorageEntryRow: React.FC<{
           )}
           <DropdownMenu>
             <DropdownMenuTrigger asChild={true}>
-              <Button
-                variant="text"
-                size="icon"
-                className="opacity-0 group-hover:opacity-100 transition-opacity hover:shadow-none hover:text-link text-muted-foreground"
+              <MoreActionsButton
+                iconClassName="h-3 w-3"
                 onClick={(e) => e.stopPropagation()}
-              >
-                <MoreVerticalIcon className="h-3 w-3" />
-              </Button>
+              />
             </DropdownMenuTrigger>
             <DropdownMenuContent
               align="end"
@@ -355,7 +355,7 @@ const StorageEntryRow: React.FC<{
                 <DropdownMenuItem
                   onSelect={() => onOpenFile({ entry, namespace })}
                 >
-                  <ViewIcon className="h-3.5 w-3.5 mr-2" />
+                  <ViewIcon className={MENU_ITEM_ICON_CLASS} />
                   View
                 </DropdownMenuItem>
               )}
@@ -366,12 +366,12 @@ const StorageEntryRow: React.FC<{
                   toast({ title: "Copied to clipboard" });
                 }}
               >
-                <CopyIcon className="h-3.5 w-3.5 mr-2" />
+                <CopyIcon className={MENU_ITEM_ICON_CLASS} />
                 Copy URL
               </DropdownMenuItem>
               {!isDir && (
                 <DropdownMenuItem onSelect={() => handleDownload()}>
-                  <DownloadIcon className="h-3.5 w-3.5 mr-2" />
+                  <DownloadIcon className={MENU_ITEM_ICON_CLASS} />
                   Download
                 </DropdownMenuItem>
               )}
@@ -402,7 +402,6 @@ const StorageNamespaceSection: React.FC<{
   onOpenFile: (info: OpenFileInfo) => void;
 }> = ({ namespace, locale, searchValue, onOpenFile }) => {
   const [isExpanded, setIsExpanded] = useState(true);
-  const [isSpinning, setIsSpinning] = useState(false);
   const { entriesByPath } = useStorage();
   const { clearNamespaceCache } = useStorageActions();
   const namespaceName = namespace.name ?? namespace.displayName;
@@ -417,10 +416,8 @@ const StorageNamespaceSection: React.FC<{
   const handleRefresh = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
-      setIsSpinning(true);
       clearNamespaceCache(namespaceName);
       refetch();
-      setTimeout(() => setIsSpinning(false), 500);
     },
     [namespaceName, clearNamespaceCache, refetch],
   );
@@ -441,12 +438,7 @@ const StorageNamespaceSection: React.FC<{
         onSelect={() => setIsExpanded(!isExpanded)}
         className="flex flex-row font-semibold h-7 text-xs gap-1.5 bg-(--slate-2) text-muted-foreground rounded-none"
       >
-        <ChevronRightIcon
-          className={cn(
-            "h-3 w-3 shrink-0 transition-transform",
-            isExpanded && "rotate-90",
-          )}
-        />
+        <TreeChevron isExpanded={isExpanded} className="h-3 w-3" />
         <ProtocolIcon protocol={namespace.protocol} />
         <span>{namespace.displayName}</span>
         {namespace.name && (
@@ -454,21 +446,12 @@ const StorageNamespaceSection: React.FC<{
             (<EngineVariable variableName={namespace.name as VariableName} />)
           </span>
         )}
-        <Tooltip content="Refresh storage connection">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="hover:bg-transparent hover:shadow-none"
-            onClick={handleRefresh}
-          >
-            <RefreshCwIcon
-              className={cn(
-                "h-3 w-3 text-muted-foreground hover:text-foreground",
-                isSpinning && "animate-[spin_0.5s]",
-              )}
-            />
-          </Button>
-        </Tooltip>
+        <RefreshIconButton
+          onClick={handleRefresh}
+          tooltip="Refresh storage connection"
+          className="p-0"
+          iconClassName="h-3 w-3"
+        />
         <span className="text-[10px] text-muted-foreground font-normal tabular-nums ml-auto">
           {namespace.rootPath || "(root)"}
         </span>

package/src/components/ui/command.tsx

@@ -7,6 +7,7 @@ import { Search } from "lucide-react";
 import * as React from "react";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { cn } from "@/utils/cn";
+import { smartMatchFilter } from "@/utils/smartMatch";
 import { Strings } from "@/utils/strings";
 import {
   MENU_ITEM_DISABLED,
@@ -21,6 +22,7 @@ const Command = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive
     ref={ref}
+    filter={smartMatchFilter}
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
       className,

package/src/components/ui/links.tsx

@@ -8,6 +8,7 @@ export const ExternalLink = ({
     | `https://console.anthropic.com/${string}`
     | `https://aistudio.google.com/${string}`
     | `https://github.com/${string}`
+    | `https://docs.github.com/${string}`
     | `https://openrouter.ai/${string}`
     | `https://docs.marimo.io/${string}`
     | `https://docs.python.org/${string}`

package/src/core/ai/tools/__tests__/run-cells-tool.test.ts

@@ -411,6 +411,85 @@ describe("RunStaleCellsTool", () => {
     });
   });
 
+  describe("output truncation", () => {
+    it("should summarize text/html output instead of dumping raw content", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: "fig.show()", edited: true },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      vi.mocked(runCells).mockImplementation(async () => {
+        const updatedNotebook = store.get(notebookAtom);
+        updatedNotebook.cellRuntime[cellId1] = {
+          ...updatedNotebook.cellRuntime[cellId1],
+          status: "idle",
+        };
+        store.set(notebookAtom, updatedNotebook);
+      });
+
+      const largeHtml = `<div>${"x".repeat(2_000_000)}</div>`;
+      vi.mocked(getCellContextData).mockReturnValue({
+        cellOutput: {
+          outputType: "text",
+          processedContent: null,
+          imageUrl: null,
+          output: { mimetype: "text/html", data: largeHtml },
+        },
+        consoleOutputs: null,
+        cellName: "cell1",
+      } as never);
+
+      const result = await tool.handler({}, toolContext as never);
+
+      expect(result.status).toBe("success");
+      const output = result.cellsToOutput?.[cellId1]?.cellOutput ?? "";
+      expect(output).toContain("HTML Output:");
+      expect(output).toContain("text/html");
+      expect(output.length).toBeLessThan(200);
+      expect(output).not.toContain(largeHtml);
+    });
+
+    it("should truncate large text output to MAX_TEXT_OUTPUT_CHARS", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: "print(big_string)", edited: true },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      vi.mocked(runCells).mockImplementation(async () => {
+        const updatedNotebook = store.get(notebookAtom);
+        updatedNotebook.cellRuntime[cellId1] = {
+          ...updatedNotebook.cellRuntime[cellId1],
+          status: "idle",
+        };
+        store.set(notebookAtom, updatedNotebook);
+      });
+
+      const largeText = "a".repeat(10_000);
+      vi.mocked(getCellContextData).mockReturnValue({
+        cellOutput: {
+          outputType: "text",
+          processedContent: largeText,
+          imageUrl: null,
+          output: { mimetype: "text/plain", data: largeText },
+        },
+        consoleOutputs: null,
+        cellName: "cell1",
+      } as never);
+
+      const result = await tool.handler({}, toolContext as never);
+
+      const output = result.cellsToOutput?.[cellId1]?.cellOutput ?? "";
+      expect(output).toContain("[TRUNCATED:");
+      expect(output).toContain("Full output visible in the notebook UI.");
+      // Output should be capped (2000 chars content + "Output:\n" prefix + truncation message)
+      expect(output.length).toBeLessThan(2200);
+    });
+  });
+
   describe("cell execution completion", () => {
     it("should complete immediately if cells are already idle", async () => {
       const notebook = MockNotebook.notebookState({

package/src/core/ai/tools/run-cells-tool.ts

@@ -24,6 +24,11 @@ import type { CopilotMode } from "./registry";
 const POST_EXECUTION_DELAY = 200;
 const WAIT_FOR_CELLS_TIMEOUT = 30_000;
 
+// Output size limits to prevent exceeding LLM token limits.
+const MAX_TEXT_OUTPUT_CHARS = 2000;
+const MAX_ERROR_OUTPUT_CHARS = 3000;
+const MAX_TOOL_OUTPUT_CHARS = 40_000;
+
 interface CellOutput {
   consoleOutput?: string;
   cellOutput?: string;
@@ -118,42 +123,60 @@ export class RunStaleCellsTool
     const cellsToOutput = new Map<CellId, CellOutput | null>();
     let resultMessage = "";
     let outputHasErrors = false;
+    let totalOutputChars = 0;
 
     for (const cellId of staleCells) {
       const cellContextData = getCellContextData(cellId, updatedNotebook, {
         includeConsoleOutput: true,
       });
 
-      let cellOutputString: string | undefined;
-      let consoleOutputString: string | undefined;
-
       const cellOutput = cellContextData.cellOutput;
       const consoleOutputs = cellContextData.consoleOutputs;
       const hasConsoleOutput = consoleOutputs && consoleOutputs.length > 0;
 
+      // Track errors regardless of budget
+      if (cellOutput && this.outputHasErrors(cellOutput)) {
+        outputHasErrors = true;
+      }
+      if (
+        hasConsoleOutput &&
+        consoleOutputs.some((output) => this.outputHasErrors(output))
+      ) {
+        outputHasErrors = true;
+      }
+
       if (!cellOutput && !hasConsoleOutput) {
-        // Set null to show no output
         cellsToOutput.set(cellId, null);
         continue;
       }
 
+      // If total budget exceeded, summarize remaining cells
+      if (totalOutputChars >= MAX_TOOL_OUTPUT_CHARS) {
+        cellsToOutput.set(cellId, {
+          cellOutput: "Cell executed (output omitted due to context limits).",
+        });
+        continue;
+      }
+
+      let cellOutputString: string | undefined;
+      let consoleOutputString: string | undefined;
+
       if (cellOutput) {
         cellOutputString = this.formatOutputString(cellOutput);
-        if (this.outputHasErrors(cellOutput)) {
-          outputHasErrors = true;
-        }
+        totalOutputChars += cellOutputString.length;
       }
 
       if (hasConsoleOutput) {
         consoleOutputString = consoleOutputs
           .map((output) => this.formatOutputString(output))
           .join("\n");
+        consoleOutputString = this.truncateString(
+          consoleOutputString,
+          MAX_TEXT_OUTPUT_CHARS,
+        );
+        totalOutputChars += consoleOutputString.length;
         resultMessage +=
           "Console output represents the stdout or stderr of the cell (eg. print statements).";
-
-        if (consoleOutputs.some((output) => this.outputHasErrors(output))) {
-          outputHasErrors = true;
-        }
       }
 
       cellsToOutput.set(cellId, {
@@ -199,13 +222,29 @@ export class RunStaleCellsTool
     let outputString = "";
     const { outputType, processedContent, imageUrl, output } = cellOutput;
     if (outputType === "text") {
-      outputString += "Output:\n";
-      if (processedContent) {
-        outputString += processedContent;
-      } else if (typeof output.data === "string") {
-        outputString += output.data;
+      if (output.mimetype === "text/html") {
+        // text/html (e.g. plotly figures, rich dataframes) can be millions of
+        // chars and is not interpretable by LLMs — summarize instead
+        const dataLength =
+          typeof output.data === "string"
+            ? output.data.length
+            : JSON.stringify(output.data).length;
+        outputString += `HTML Output: text/html content (${dataLength.toLocaleString()} chars). Full output visible in notebook UI.`;
       } else {
-        outputString += JSON.stringify(output.data);
+        const isError = this.outputHasErrors(cellOutput);
+        const maxChars = isError
+          ? MAX_ERROR_OUTPUT_CHARS
+          : MAX_TEXT_OUTPUT_CHARS;
+        outputString += "Output:\n";
+        let content: string;
+        if (processedContent) {
+          content = processedContent;
+        } else if (typeof output.data === "string") {
+          content = output.data;
+        } else {
+          content = JSON.stringify(output.data);
+        }
+        outputString += this.truncateString(content, maxChars);
       }
     } else if (outputType === "media") {
       outputString += `Media Output: Contains ${output.mimetype} content`;
@@ -216,6 +255,13 @@ export class RunStaleCellsTool
     return outputString;
   }
 
+  private truncateString(str: string, maxLength: number): string {
+    if (str.length <= maxLength) {
+      return str;
+    }
+    return `${str.slice(0, maxLength)}\n\n[TRUNCATED: ${str.length.toLocaleString()} → ${maxLength.toLocaleString()} chars. Full output visible in the notebook UI.]`;
+  }
+
   /**
    * Wait for cells to finish executing (status becomes "idle")
    * Returns true if all cells finished executing, false if the timeout was reached

package/src/core/hotkeys/__tests__/hotkeys.test.ts

@@ -1,6 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
-import { type Hotkey, type HotkeyAction, HotkeyProvider } from "../hotkeys";
+import {
+  type Hotkey,
+  type HotkeyAction,
+  HotkeyProvider,
+  normalizeKeyString,
+  OverridingHotkeyProvider,
+} from "../hotkeys";
 
 /**
  * Just a helper.
@@ -72,3 +78,60 @@ describe("HotkeyProvider platform separation", () => {
     expect(linux.getHotkey("cell.format").key).toBe("Ctrl-Shift-L");
   });
 });
+
+describe("normalizeKeyString", () => {
+  it("should capitalize multi-character base key names", () => {
+    expect(normalizeKeyString("Shift-enter")).toBe("Shift-Enter");
+    expect(normalizeKeyString("Cmd-enter")).toBe("Cmd-Enter");
+    expect(normalizeKeyString("Ctrl-backspace")).toBe("Ctrl-Backspace");
+    expect(normalizeKeyString("Alt-tab")).toBe("Alt-Tab");
+    expect(normalizeKeyString("Cmd-Shift-arrowUp")).toBe("Cmd-Shift-ArrowUp");
+  });
+
+  it("should leave already-correct key names unchanged", () => {
+    expect(normalizeKeyString("Shift-Enter")).toBe("Shift-Enter");
+    expect(normalizeKeyString("Cmd-Enter")).toBe("Cmd-Enter");
+    expect(normalizeKeyString("Mod-Shift-Enter")).toBe("Mod-Shift-Enter");
+  });
+
+  it("should leave single-character keys unchanged", () => {
+    expect(normalizeKeyString("Cmd-a")).toBe("Cmd-a");
+    expect(normalizeKeyString("Ctrl-Shift-z")).toBe("Ctrl-Shift-z");
+    expect(normalizeKeyString("a")).toBe("a");
+  });
+
+  it("should handle keys without modifiers", () => {
+    expect(normalizeKeyString("enter")).toBe("Enter");
+    expect(normalizeKeyString("Escape")).toBe("Escape");
+    expect(normalizeKeyString("F12")).toBe("F12");
+  });
+});
+
+describe("OverridingHotkeyProvider", () => {
+  it("should normalize lowercase key overrides", () => {
+    const provider = new OverridingHotkeyProvider(
+      {
+        "cell.run": "Shift-enter",
+        "cell.runAndNewBelow": "Cmd-enter",
+      },
+      { platform: "mac" },
+    );
+
+    expect(provider.getHotkey("cell.run").key).toBe("Shift-Enter");
+    expect(provider.getHotkey("cell.runAndNewBelow").key).toBe("Cmd-Enter");
+  });
+
+  it("should return defaults when no override is set", () => {
+    const provider = new OverridingHotkeyProvider({}, { platform: "mac" });
+    expect(provider.getHotkey("cell.run").key).toBe("Cmd-Enter");
+    expect(provider.getHotkey("cell.runAndNewBelow").key).toBe("Shift-Enter");
+  });
+
+  it("should pass through correctly-cased overrides unchanged", () => {
+    const provider = new OverridingHotkeyProvider(
+      { "cell.run": "Shift-Enter" },
+      { platform: "mac" },
+    );
+    expect(provider.getHotkey("cell.run").key).toBe("Shift-Enter");
+  });
+});

package/src/core/hotkeys/hotkeys.ts

@@ -27,11 +27,13 @@ export interface Hotkey {
    * @default true
    */
   editable?: boolean;
+  additionalKeywords?: string[];
 }
 
 interface ResolvedHotkey {
   name: string;
   key: string;
+  additionalKeywords?: string[];
 }
 
 type ModKey = "Cmd" | "Ctrl";
@@ -110,6 +112,7 @@ const DEFAULT_HOT_KEY = {
     name: "Run",
     group: "Running Cells",
     key: "Mod-Enter",
+    additionalKeywords: ["execute", "submit"],
   },
   "cell.runAndNewBelow": {
     name: "Run and new below",
@@ -132,6 +135,7 @@ const DEFAULT_HOT_KEY = {
     name: "Format cell",
     group: "Editing",
     key: "Mod-b",
+    additionalKeywords: ["lint"],
   },
   "cell.viewAsMarkdown": {
     name: "View as Markdown",
@@ -201,6 +205,7 @@ const DEFAULT_HOT_KEY = {
     name: "Delete cell",
     group: "Editing",
     key: "Shift-Backspace",
+    additionalKeywords: ["remove"],
   },
   "cell.hideCode": {
     name: "Hide cell code",
@@ -320,6 +325,7 @@ const DEFAULT_HOT_KEY = {
     name: "Save file",
     group: "Other",
     key: "Mod-s",
+    additionalKeywords: ["write", "persist"],
   },
   "global.commandPalette": {
     name: "Show command palette",
@@ -485,23 +491,26 @@ export class HotkeyProvider implements IHotkeyProvider {
   }
 
   getHotkey(action: HotkeyAction): ResolvedHotkey {
-    const { name, key } = this.hotkeys[action];
+    const { name, key, additionalKeywords } = this.hotkeys[action];
     if (typeof key === "string") {
       return {
         name,
         key: key.replace("Mod", this.mod),
+        additionalKeywords,
       };
     }
     if (key === NOT_SET) {
       return {
         name,
         key: "",
+        additionalKeywords,
       };
     }
     const platformKey = key[this.platform] || key.main;
     return {
       name,
       key: platformKey.replace("Mod", this.mod),
+      additionalKeywords,
     };
   }
 
@@ -535,10 +544,27 @@ export class OverridingHotkeyProvider extends HotkeyProvider {
 
   override getHotkey(action: HotkeyAction): ResolvedHotkey {
     const base = super.getHotkey(action);
-    const key = this.overrides[action] || base.key;
+    const override = this.overrides[action];
     return {
       name: base.name,
-      key,
+      key: override ? normalizeKeyString(override) : base.key,
+      additionalKeywords: base.additionalKeywords,
     };
   }
 }
+
+const MODIFIER_RE = /^(cmd|ctrl|alt|shift|meta|mod)$/i;
+
+/**
+ * Capitalize multi-character base key names so they match the
+ * casing that KeyboardEvent.key (and therefore CodeMirror) uses.
+ * e.g. "Shift-enter" → "Shift-Enter", "Cmd-backspace" → "Cmd-Backspace"
+ */
+export function normalizeKeyString(key: string): string {
+  const parts = key.split("-");
+  const last = parts[parts.length - 1];
+  if (last.length > 1 && !MODIFIER_RE.test(last)) {
+    parts[parts.length - 1] = last.charAt(0).toUpperCase() + last.slice(1);
+  }
+  return parts.join("-");
+}

package/src/core/islands/bridge.ts

@@ -181,6 +181,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   sendFileDetails = throwNotImplemented;
   openTutorial = throwNotImplemented;
   exportAsHTML = throwNotImplemented;
+  exportAsIPYNB = throwNotImplemented;
   exportAsMarkdown = throwNotImplemented;
   exportAsPDF = throwNotImplemented;
   autoExportAsHTML = throwNotImplemented;