@marimo-team/frontend 0.23.10-dev3 → 0.23.10-dev30

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -34,6 +34,26 @@ import { ErrorBoundary } from "../../boundary/ErrorBoundary";
 import { raf2 } from "../../navigation/focus-utils";
 import { ContextAwarePanel } from "../panels/context-aware-panel/context-aware-panel";
 import { PanelSectionProvider } from "../panels/panel-context";
+import { useTheme } from "@/theme/useTheme";
+import {
+  LazyAgentPanel,
+  LazyCachePanel,
+  LazyChatPanel,
+  LazyDependencyGraphPanel,
+  LazyDocumentationPanel,
+  LazyErrorsPanel,
+  LazyFileExplorerPanel,
+  LazyLogsPanel,
+  LazyOutlinePanel,
+  LazyPackagesPanel,
+  LazyScratchpadPanel,
+  LazySecretsPanel,
+  LazySessionPanel,
+  LazySnippetsPanel,
+  LazyTerminal,
+  LazyTracingPanel,
+  PANEL_PRELOADERS,
+} from "./lazy-panels";
 import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
 import {
   isPanelHidden,
@@ -50,33 +70,26 @@ import { useAiPanelTab } from "./useAiPanel";
 import { useDependencyPanelTab } from "./useDependencyPanelTab";
 import { handleDragging } from "./utils";
 
-const LazyTerminal = React.lazy(() => import("@/components/terminal/terminal"));
-const LazyChatPanel = React.lazy(() => import("@/components/chat/chat-panel"));
-const LazyAgentPanel = React.lazy(
-  () => import("@/components/chat/acp/agent-panel"),
-);
-const LazyDependencyGraphPanel = React.lazy(
-  () => import("@/components/editor/chrome/panels/dependency-graph-panel"),
-);
-const LazySessionPanel = React.lazy(() => import("../panels/session-panel"));
-const LazyDocumentationPanel = React.lazy(
-  () => import("../panels/documentation-panel"),
-);
-const LazyErrorsPanel = React.lazy(() => import("../panels/error-panel"));
-const LazyFileExplorerPanel = React.lazy(
-  () => import("../panels/file-explorer-panel"),
-);
-const LazyLogsPanel = React.lazy(() => import("../panels/logs-panel"));
-const LazyOutlinePanel = React.lazy(() => import("../panels/outline-panel"));
-const LazyPackagesPanel = React.lazy(() => import("../panels/packages-panel"));
-const LazyScratchpadPanel = React.lazy(
-  () => import("../panels/scratchpad-panel"),
-);
-const LazySecretsPanel = React.lazy(() => import("../panels/secrets-panel"));
-const LazySnippetsPanel = React.lazy(() => import("../panels/snippets-panel"));
-const LazyTracingPanel = React.lazy(() => import("../panels/tracing-panel"));
-const LazyCachePanel = React.lazy(() => import("../panels/cache-panel"));
-
+// Placeholder that matches the eventual xterm theme background so the
+// transition into the loaded terminal is seamless rather than a blank flash.
+const TerminalSkeleton: React.FC = () => {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  return (
+    <div
+      aria-label="Loading terminal"
+      role="status"
+      className="w-full h-full flex items-start p-3 font-mono text-xs select-none"
+      style={{
+        background: isDark ? "#0f172a" : "#ffffff",
+        color: isDark ? "#94a3b8" : "#64748b",
+      }}
+    >
+      <span className="opacity-70">Starting terminal</span>
+      <span className="ml-1 inline-block w-2 h-3.5 align-middle bg-current animate-pulse" />
+    </div>
+  );
+};
 export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const {
     isSidebarOpen,
@@ -96,6 +109,33 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const capabilities = useAtomValue(capabilitiesAtom);
   const aiEnabled = useAtomValue(aiEnabledAtom);
 
+  // On mount, idle-preload whichever panels the user had open at last unload,
+  // so the first interaction with the sidebar/dev panel doesn't hit a cold
+  // chunk fetch. Runs once.
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    const preloadOpenPanels = () => {
+      if (isSidebarOpen && selectedPanel) {
+        PANEL_PRELOADERS[selectedPanel]?.();
+      }
+      if (isDeveloperPanelOpen && selectedDeveloperPanelTab) {
+        PANEL_PRELOADERS[selectedDeveloperPanelTab]?.();
+      }
+    };
+
+    const canIdle =
+      typeof window !== "undefined" &&
+      typeof window.requestIdleCallback === "function";
+    if (canIdle) {
+      const handle = window.requestIdleCallback(preloadOpenPanels, {
+        timeout: 2000,
+      });
+      return () => window.cancelIdleCallback(handle);
+    }
+    const handle = setTimeout(preloadOpenPanels, 300);
+    return () => clearTimeout(handle);
+  }, []);
+
   // Convert current developer panel items to PanelDescriptors
   // Filter out hidden panels (e.g., terminal when capability is not available)
   const devPanelItems = useMemo(() => {
@@ -256,32 +296,34 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
 
   const renderAiPanel = () => {
     if (agentsEnabled && aiPanelTab === "agents") {
-      return <LazyAgentPanel />;
+      return <LazyAgentPanel.Component />;
     }
-    return <LazyChatPanel />;
+    return <LazyChatPanel.Component />;
   };
 
   const SIDEBAR_PANELS: Record<PanelType, React.ReactNode> = {
-    files: <LazyFileExplorerPanel />,
-    variables: <LazySessionPanel />,
-    dependencies: <LazyDependencyGraphPanel />,
-    packages: <LazyPackagesPanel />,
-    outline: <LazyOutlinePanel />,
-    documentation: <LazyDocumentationPanel />,
-    snippets: <LazySnippetsPanel />,
+    files: <LazyFileExplorerPanel.Component />,
+    variables: <LazySessionPanel.Component />,
+    dependencies: <LazyDependencyGraphPanel.Component />,
+    packages: <LazyPackagesPanel.Component />,
+    outline: <LazyOutlinePanel.Component />,
+    documentation: <LazyDocumentationPanel.Component />,
+    snippets: <LazySnippetsPanel.Component />,
     ai: renderAiPanel(),
-    errors: <LazyErrorsPanel />,
-    scratchpad: <LazyScratchpadPanel />,
-    tracing: <LazyTracingPanel />,
-    secrets: <LazySecretsPanel />,
-    logs: <LazyLogsPanel />,
+    errors: <LazyErrorsPanel.Component />,
+    scratchpad: <LazyScratchpadPanel.Component />,
+    tracing: <LazyTracingPanel.Component />,
+    secrets: <LazySecretsPanel.Component />,
+    logs: <LazyLogsPanel.Component />,
     terminal: (
-      <LazyTerminal
-        visible={isSidebarOpen && selectedPanel === "terminal"}
-        onClose={() => setIsSidebarOpen(false)}
-      />
+      <Suspense fallback={<TerminalSkeleton />}>
+        <LazyTerminal.Component
+          visible={isSidebarOpen && selectedPanel === "terminal"}
+          onClose={() => setIsSidebarOpen(false)}
+        />
+      </Suspense>
     ),
-    cache: <LazyCachePanel />,
+    cache: <LazyCachePanel.Component />,
   };
 
   const helpPaneBody = (
@@ -414,12 +456,14 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const DEVELOPER_PANELS: Record<PanelType, React.ReactNode> = {
     ...SIDEBAR_PANELS,
     terminal: (
-      <LazyTerminal
-        visible={
-          isDeveloperPanelOpen && selectedDeveloperPanelTab === "terminal"
-        }
-        onClose={() => setIsDeveloperPanelOpen(false)}
-      />
+      <Suspense fallback={<TerminalSkeleton />}>
+        <LazyTerminal.Component
+          visible={
+            isDeveloperPanelOpen && selectedDeveloperPanelTab === "terminal"
+          }
+          onClose={() => setIsDeveloperPanelOpen(false)}
+        />
+      </Suspense>
     ),
   };
 
@@ -474,6 +518,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
             className="flex flex-row gap-1"
             minItems={0}
             onAction={(panel) => openApplication(panel.type)}
+            onItemPreloadHint={(panel) => PANEL_PRELOADERS[panel.type]?.()}
             renderItem={(panel) => (
               <div
                 className={cn(

package/src/components/editor/chrome/wrapper/lazy-panels.ts

@@ -0,0 +1,91 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { reactLazyWithPreload } from "@/utils/lazy";
+import { Logger } from "@/utils/Logger";
+import type { PanelType } from "../types";
+
+// Preloading is best-effort: a chunk-load failure here should not surface as
+// an unhandled rejection (the panel will retry the import when actually
+// rendered, where Suspense/ErrorBoundary handle the failure).
+const safePreload = (lazy: { preload: () => Promise<unknown> }) => (): void => {
+  void lazy.preload().catch((error) => {
+    Logger.debug("Failed to preload panel chunk", error);
+  });
+};
+
+// Centralized lazy panels. Using reactLazyWithPreload (instead of React.lazy)
+// gives each panel a .preload() method so the chunk can be fetched on intent
+// (hovering the sidebar icon or developer-panel tab) before the user clicks.
+
+export const LazyTerminal = reactLazyWithPreload(
+  () => import("@/components/terminal/terminal"),
+);
+export const LazyChatPanel = reactLazyWithPreload(
+  () => import("@/components/chat/chat-panel"),
+);
+export const LazyAgentPanel = reactLazyWithPreload(
+  () => import("@/components/chat/acp/agent-panel"),
+);
+export const LazyDependencyGraphPanel = reactLazyWithPreload(
+  () => import("../panels/dependency-graph-panel"),
+);
+export const LazySessionPanel = reactLazyWithPreload(
+  () => import("../panels/session-panel"),
+);
+export const LazyDocumentationPanel = reactLazyWithPreload(
+  () => import("../panels/documentation-panel"),
+);
+export const LazyErrorsPanel = reactLazyWithPreload(
+  () => import("../panels/error-panel"),
+);
+export const LazyFileExplorerPanel = reactLazyWithPreload(
+  () => import("../panels/file-explorer-panel"),
+);
+export const LazyLogsPanel = reactLazyWithPreload(
+  () => import("../panels/logs-panel"),
+);
+export const LazyOutlinePanel = reactLazyWithPreload(
+  () => import("../panels/outline-panel"),
+);
+export const LazyPackagesPanel = reactLazyWithPreload(
+  () => import("../panels/packages-panel"),
+);
+export const LazyScratchpadPanel = reactLazyWithPreload(
+  () => import("../panels/scratchpad-panel"),
+);
+export const LazySecretsPanel = reactLazyWithPreload(
+  () => import("../panels/secrets-panel"),
+);
+export const LazySnippetsPanel = reactLazyWithPreload(
+  () => import("../panels/snippets-panel"),
+);
+export const LazyTracingPanel = reactLazyWithPreload(
+  () => import("../panels/tracing-panel"),
+);
+export const LazyCachePanel = reactLazyWithPreload(
+  () => import("../panels/cache-panel"),
+);
+
+// Preloader registry: hovering an icon/tab calls into this map to warm the
+// corresponding chunk. Two panel types (chat and agents) share the "ai" slot,
+// so we preload both.
+export const PANEL_PRELOADERS: Record<PanelType, () => void> = {
+  files: safePreload(LazyFileExplorerPanel),
+  variables: safePreload(LazySessionPanel),
+  dependencies: safePreload(LazyDependencyGraphPanel),
+  packages: safePreload(LazyPackagesPanel),
+  outline: safePreload(LazyOutlinePanel),
+  documentation: safePreload(LazyDocumentationPanel),
+  snippets: safePreload(LazySnippetsPanel),
+  ai: () => {
+    safePreload(LazyChatPanel)();
+    safePreload(LazyAgentPanel)();
+  },
+  errors: safePreload(LazyErrorsPanel),
+  scratchpad: safePreload(LazyScratchpadPanel),
+  tracing: safePreload(LazyTracingPanel),
+  secrets: safePreload(LazySecretsPanel),
+  logs: safePreload(LazyLogsPanel),
+  terminal: safePreload(LazyTerminal),
+  cache: safePreload(LazyCachePanel),
+};

package/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -22,6 +22,7 @@ import {
   PANELS,
   type PanelDescriptor,
 } from "../types";
+import { PANEL_PRELOADERS } from "./lazy-panels";
 
 export const Sidebar: React.FC = () => {
   const { selectedPanel, selectedDeveloperPanelTab, isSidebarOpen } =
@@ -141,6 +142,7 @@ export const Sidebar: React.FC = () => {
         className="flex flex-col gap-0"
         minItems={0}
         onAction={(panel) => toggleApplication(panel.type)}
+        onItemPreloadHint={(panel) => PANEL_PRELOADERS[panel.type]?.()}
         renderItem={(panel) => (
           <SidebarItem
             tooltip={panel.tooltip}

package/src/components/editor/documentation.css

@@ -51,6 +51,22 @@
     }
   }
 
+  a {
+    cursor: pointer;
+    text-decoration: inherit;
+
+    @apply text-link;
+  }
+
+  a:hover,
+  a:active {
+    text-decoration: underline;
+  }
+
+  a:visited {
+    @apply text-link-visited;
+  }
+
   code {
     @apply border px-1 rounded font-mono bg-[var(--slate-2)] text-sm mb-4 mt-2;
   }
@@ -137,3 +153,22 @@
     }
   }
 }
+
+/* Syntax highlighting for LSP hover code blocks (lezer classHighlighter tok-* classes) */
+.docs-documentation,
+.cm-tooltip .documentation {
+  .tok-keyword { color: light-dark(#708, #c678dd); font-weight: 500; }
+  .tok-string,
+  .tok-string2 { color: light-dark(#a11, #98c379); }
+  .tok-number { color: light-dark(#164, #d19a66); }
+  .tok-bool,
+  .tok-atom { color: light-dark(#219, #d19a66); }
+  .tok-comment { color: var(--cm-comment); }
+  .tok-className { color: light-dark(#00f, #61afef); }
+  .tok-typeName,
+  .tok-namespace { color: light-dark(#085, #56b6c2); }
+  .tok-operator { color: light-dark(#a2f, #56b6c2); }
+  .tok-propertyName { color: light-dark(#05a, #e5c07b); }
+  .tok-variableName { color: light-dark(#000, #abb2bf); }
+  .tok-punctuation { color: light-dark(#000, #abb2bf); }
+}

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

@@ -9,8 +9,6 @@ import {
   CopyMinusIcon,
   DownloadIcon,
   ExternalLinkIcon,
-  EyeIcon,
-  EyeOffIcon,
   FilePlus2Icon,
   FolderPlusIcon,
   ListTreeIcon,
@@ -43,6 +41,7 @@ import {
   MENU_ITEM_ICON_CLASS,
   RefreshIconButton,
   TreeChevron,
+  VisibilityToggleButton,
 } from "@/components/editor/file-tree/tree-actions";
 import { MarimoIcon, MarimoPlusIcon } from "@/components/icons/marimo-icons";
 import { Spinner } from "@/components/icons/spinner";
@@ -338,22 +337,13 @@ const Toolbar = ({
         data-testid="file-explorer-refresh-button"
         onClick={onRefresh}
       />
-      <Tooltip
-        content={showHiddenFiles ? "Hide hidden files" : "Show hidden files"}
-      >
-        <Button
-          data-testid="file-explorer-hidden-files-button"
-          onClick={onHidden}
-          variant="text"
-          size="xs"
-        >
-          {showHiddenFiles ? (
-            <EyeIcon size={16} className="text-primary" />
-          ) : (
-            <EyeOffIcon size={16} />
-          )}
-        </Button>
-      </Tooltip>
+      <VisibilityToggleButton
+        data-testid="file-explorer-hidden-files-button"
+        isVisible={showHiddenFiles}
+        onToggle={onHidden}
+        showTooltip="Show hidden files"
+        hideTooltip="Hide hidden files"
+      />
       <Tooltip content="Collapse all folders">
         <Button
           data-testid="file-explorer-collapse-button"

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

@@ -2,11 +2,13 @@
 
 import {
   ChevronRightIcon,
+  EyeIcon,
+  EyeOffIcon,
   MoreVerticalIcon,
   RefreshCwIcon,
 } from "lucide-react";
 import React, { useCallback, useState } from "react";
-import { Button } from "@/components/ui/button";
+import { Button, type ButtonProps } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
 
@@ -73,6 +75,49 @@ export const RefreshIconButton: React.FC<{
   return <Tooltip content={tooltip}>{button}</Tooltip>;
 };
 
+/**
+ * Toggle button that switches between an eye (visible) and crossed-out eye
+ * (hidden) icon. Used to show/hide optional items in toolbars, e.g. hidden
+ * files in the file explorer or empty schemas in the data sources panel.
+ */
+export const VisibilityToggleButton: React.FC<{
+  /** Whether the optional items are currently visible. */
+  isVisible: boolean;
+  onToggle: () => void;
+  showTooltip: string;
+  hideTooltip: string;
+  size?: ButtonProps["size"];
+  className?: string;
+  iconClassName?: string;
+  "data-testid"?: string;
+}> = ({
+  isVisible,
+  onToggle,
+  showTooltip,
+  hideTooltip,
+  size = "xs",
+  className,
+  iconClassName,
+  "data-testid": dataTestId,
+}) => {
+  const Icon = isVisible ? EyeIcon : EyeOffIcon;
+  return (
+    <Tooltip content={isVisible ? hideTooltip : showTooltip}>
+      <Button
+        data-testid={dataTestId}
+        variant="text"
+        size={size}
+        className={className}
+        onClick={onToggle}
+      >
+        <Icon
+          className={cn("h-4 w-4", isVisible && "text-primary", iconClassName)}
+        />
+      </Button>
+    </Tooltip>
+  );
+};
+
 /**
  * Three-dot menu trigger that fades in on row hover.
  * Must be inside a `group` container.

package/src/components/editor/renderers/slides-layout/__tests__/plugin.test.ts

@@ -248,6 +248,26 @@ const BACKWARDS_COMPAT_SNAPSHOTS: BackwardsCompatCase[] = [
       ],
     },
   },
+  {
+    // `showCode` was added to SlideConfig. The validator must know about it (so
+    // it isn't silently stripped), the deserializer must carry it through, and
+    // serialize → deserialize must round-trip both values.
+    label: "showCode round-trips through validate + (de)serialize",
+    input: {
+      cells: [
+        { type: "slide", showCode: true },
+        { type: "fragment", showCode: false },
+      ],
+    },
+    expected: {
+      deck: {},
+      cellIds: ["a", "b"],
+      cellEntries: [
+        ["a", { type: "slide", showCode: true }],
+        ["b", { type: "fragment", showCode: false }],
+      ],
+    },
+  },
 ];
 
 describe("SlidesLayoutPlugin backwards compatibility", () => {

package/src/components/editor/renderers/slides-layout/types.ts

@@ -9,6 +9,7 @@ export type SlideType = z.infer<typeof SlideTypeSchema>;
 const SlideConfigSchema = z.looseObject({
   type: SlideTypeSchema.optional(),
   speakerNotes: z.string().optional(),
+  showCode: z.boolean().optional(),
 });
 export type SlideConfig = z.infer<typeof SlideConfigSchema>;
 

package/src/components/slides/__tests__/minimap-actions.test.tsx

@@ -0,0 +1,166 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import type { CellId } from "@/core/cells/ids";
+import type { CellData, CellRuntimeState } from "@/core/cells/types";
+import { MultiColumn } from "@/utils/id-tree";
+import { SlidesMinimap } from "../minimap";
+
+const A = cellId("a");
+const B = cellId("b");
+
+// Spies shared with the hoisted module mocks below.
+const { createNewCell, deleteCell, moveCellToIndex } = vi.hoisted(() => ({
+  createNewCell: vi.fn(),
+  deleteCell: vi.fn(),
+  moveCellToIndex: vi.fn(),
+}));
+
+vi.mock("@/core/cells/cells", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/core/cells/cells")>();
+  return {
+    ...actual,
+    useCellActions: () => ({ moveCellToIndex, createNewCell }),
+    useCellIds: () => MultiColumn.from([[A, B]]),
+  };
+});
+
+vi.mock("@/components/editor/cell/useDeleteCell", () => ({
+  useDeleteCellCallback: () => deleteCell,
+}));
+
+beforeAll(() => {
+  // jsdom doesn't implement these; radix menus poke at them.
+  global.HTMLElement.prototype.scrollIntoView = () => {
+    /* noop */
+  };
+  if (!global.HTMLElement.prototype.hasPointerCapture) {
+    global.HTMLElement.prototype.hasPointerCapture = () => false;
+  }
+  if (!global.HTMLElement.prototype.releasePointerCapture) {
+    global.HTMLElement.prototype.releasePointerCapture = () => {
+      /* noop */
+    };
+  }
+  global.IntersectionObserver ??= class {
+    observe() {
+      /* noop */
+    }
+    unobserve() {
+      /* noop */
+    }
+    disconnect() {
+      /* noop */
+    }
+    takeRecords() {
+      return [];
+    }
+    root = null;
+    rootMargin = "";
+    thresholds = [];
+  } as unknown as typeof IntersectionObserver;
+});
+
+// The minimap only reads `id`/`code`/`status`/`output`, so a minimal stub is
+// enough; the cast is confined to this helper.
+function makeCell(id: CellId): CellRuntimeState & CellData {
+  return {
+    id,
+    code: `print("${id}")`,
+    output: null,
+    status: "idle",
+  } as unknown as CellRuntimeState & CellData;
+}
+
+function renderMinimap() {
+  const onSlideClick = vi.fn();
+  const utils = render(
+    <TooltipProvider>
+      <SlidesMinimap
+        cells={[makeCell(A), makeCell(B)]}
+        thumbnailWidth={200}
+        canReorder={false}
+        activeCellId={null}
+        onSlideClick={onSlideClick}
+      />
+    </TooltipProvider>,
+  );
+  return { ...utils, onSlideClick };
+}
+
+const EMPTY_CELL = { code: "", autoFocus: false } as const;
+
+describe("SlidesMinimap insert lines", () => {
+  it("inserts a blank cell above the first row and below any row", () => {
+    renderMinimap();
+    // First row exposes both an above and a below line; later rows only below.
+    // DOM order: [A-above, A-below, B-below].
+    const inserts = screen.getAllByTestId("minimap-insert-cell");
+    expect(inserts).toHaveLength(3);
+
+    fireEvent.click(inserts[0]);
+    expect(createNewCell).toHaveBeenLastCalledWith({
+      cellId: A,
+      before: true,
+      ...EMPTY_CELL,
+    });
+
+    fireEvent.click(inserts[1]);
+    expect(createNewCell).toHaveBeenLastCalledWith({
+      cellId: A,
+      before: false,
+      ...EMPTY_CELL,
+    });
+
+    fireEvent.click(inserts[2]);
+    expect(createNewCell).toHaveBeenLastCalledWith({
+      cellId: B,
+      before: false,
+      ...EMPTY_CELL,
+    });
+  });
+});
+
+describe("SlidesMinimap context menu", () => {
+  const openRowMenu = (container: HTMLElement, id: CellId) => {
+    const row = container.querySelector<HTMLElement>(`[data-cell-id="${id}"]`);
+    expect(row).not.toBeNull();
+    fireEvent.contextMenu(row!);
+  };
+
+  it('"Add cell" inserts a blank cell below the row', () => {
+    const { container } = renderMinimap();
+    openRowMenu(container, A);
+    fireEvent.click(screen.getByText("Add cell"));
+    expect(createNewCell).toHaveBeenCalledWith({
+      cellId: A,
+      before: false,
+      ...EMPTY_CELL,
+    });
+  });
+
+  it('"Delete cell" deletes the row\'s cell', () => {
+    const { container } = renderMinimap();
+    openRowMenu(container, B);
+    fireEvent.click(screen.getByText("Delete cell"));
+    expect(deleteCell).toHaveBeenCalledWith({ cellId: B });
+  });
+});
+
+describe("SlidesMinimap keyboard activation", () => {
+  it("activates the row on Enter but ignores Space (reserved by reveal.js)", () => {
+    const { container, onSlideClick } = renderMinimap();
+    const row = container.querySelector<HTMLElement>(`[data-cell-id="${A}"]`);
+    expect(row).not.toBeNull();
+
+    fireEvent.keyDown(row!, { key: "Enter" });
+    expect(onSlideClick).toHaveBeenCalledWith(0);
+
+    onSlideClick.mockClear();
+    fireEvent.keyDown(row!, { key: " " });
+    expect(onSlideClick).not.toHaveBeenCalled();
+  });
+});