@marimo-team/islands 0.23.2-dev7 → 0.23.2-dev70

package/src/components/datasources/__tests__/missing-package-prompt.test.tsx

@@ -0,0 +1,103 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, screen } from "@testing-library/react";
+import { Provider } from "jotai";
+import React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { viewStateAtom } from "@/core/mode";
+import { requestClientAtom } from "@/core/network/requests";
+import { store } from "@/core/state/jotai";
+import { MissingPackagePrompt } from "../missing-package-prompt";
+
+const mockOpenApplication = vi.fn();
+vi.mock("@/components/editor/chrome/state", () => ({
+  useChromeActions: () => ({
+    openApplication: mockOpenApplication,
+  }),
+}));
+
+vi.mock("@/components/editor/chrome/panels/packages-state", () => ({
+  packagesToInstallAtom: {},
+}));
+
+const mockRequestAnimationFrame = vi.fn((callback) => {
+  callback();
+  return 1;
+});
+vi.stubGlobal("requestAnimationFrame", mockRequestAnimationFrame);
+
+const mockInput = {
+  focus: vi.fn(),
+  value: "",
+  dispatchEvent: vi.fn(),
+};
+vi.spyOn(document, "getElementById").mockReturnValue(
+  mockInput as unknown as HTMLInputElement,
+);
+
+function createTestWrapper() {
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+  return { wrapper };
+}
+
+describe("MissingPackagePrompt", () => {
+  const { wrapper } = createTestWrapper();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    store.set(requestClientAtom, MockRequestClient.create());
+    store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+  });
+
+  it("should render backend description and install button in edit mode", () => {
+    render(
+      <MissingPackagePrompt
+        packages={["polars"]}
+        featureName="Parquet export"
+        description="Parquet export requires a DataFrame library."
+      />,
+      { wrapper },
+    );
+    expect(
+      screen.getByText("Parquet export requires a DataFrame library."),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Install polars")).toBeInTheDocument();
+  });
+
+  it("should fall back to generic copy when description is absent", () => {
+    render(
+      <MissingPackagePrompt
+        packages={["polars"]}
+        featureName="Parquet export"
+      />,
+      { wrapper },
+    );
+    expect(
+      screen.getByText("Parquet export requires polars"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Install polars")).toBeInTheDocument();
+  });
+
+  it("should render generic line in read mode and not leak packages or description", () => {
+    store.set(viewStateAtom, { mode: "read", cellAnchor: null });
+    render(
+      <MissingPackagePrompt
+        packages={["polars"]}
+        featureName="Parquet export"
+        description="Install polars to enable Parquet."
+      />,
+      { wrapper },
+    );
+    expect(
+      screen.getByText("Parquet export isn't available in this notebook"),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("Install polars to enable Parquet."),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText("Install polars")).not.toBeInTheDocument();
+    expect(screen.queryByText(/polars/)).not.toBeInTheDocument();
+  });
+});

package/src/components/datasources/missing-package-prompt.tsx

@@ -0,0 +1,49 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useInstallAllowed } from "@/core/mode";
+import { cn } from "@/utils/cn";
+import { InstallPackageButton } from "./install-package-button";
+
+interface MissingPackagePromptProps {
+  packages: string[];
+  featureName: string;
+  description?: string | null; // server message, suppressing this in read-only mode
+  onInstall?: () => void;
+  className?: string;
+}
+
+/**
+ * display missing-package requirement with mode-aware copy. In edit mode,
+ * shows the backend explanation (if any) plus an install button for missing-packages.
+ * read mode, shows a generic "isn't available"
+ */
+export const MissingPackagePrompt: React.FC<MissingPackagePromptProps> = ({
+  packages,
+  featureName,
+  description,
+  onInstall,
+  className,
+}) => {
+  const installAllowed = useInstallAllowed();
+
+  if (!installAllowed) {
+    return (
+      <span className={cn("text-xs", className)}>
+        {featureName} isn't available in this notebook
+      </span>
+    );
+  }
+
+  return (
+    <div className={cn("text-xs flex flex-col items-end gap-2", className)}>
+      <span className="self-start">
+        {description || `${featureName} requires ${packages.join(", ")}`}
+      </span>
+      <InstallPackageButton
+        packages={packages}
+        onInstall={onInstall}
+        className="ml-0"
+      />
+    </div>
+  );
+};

package/src/components/editor/actions/useNotebookActions.tsx

@@ -381,6 +381,18 @@ export function useNotebookActions() {
             });
           },
         },
+        {
+          icon: <MarimoPlusIcon size={14} strokeWidth={1.5} />,
+          label: "Create molab notebook",
+          handle: async () => {
+            const code = await readCode();
+            const url = createShareableLink({
+              code: code.contents,
+              baseUrl: `${Constants.molab}/new`,
+            });
+            window.open(url, "_blank");
+          },
+        },
       ],
     },
 

package/src/components/editor/cell/code/cell-editor.tsx

@@ -270,6 +270,7 @@ const CellEditorInternal = ({
     userConfig.language_servers,
     userConfig.display,
     userConfig.diagnostics,
+    userConfig.ai?.inline_tooltip,
     aiEnabled,
     theme,
     showPlaceholder,

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

@@ -8,6 +8,7 @@ import { RequestingTree } from "../requesting-tree";
 const sendListFiles = vi.fn();
 const sendCreateFileOrFolder = vi.fn();
 const sendDeleteFileOrFolder = vi.fn();
+const sendCopyFileOrFolder = vi.fn();
 const sendRenameFileOrFolder = vi.fn();
 
 vi.mock("@/components/ui/use-toast", () => MockModules.toast());
@@ -21,6 +22,7 @@ describe("RequestingTree", () => {
       listFiles: sendListFiles,
       createFileOrFolder: sendCreateFileOrFolder,
       deleteFileOrFolder: sendDeleteFileOrFolder,
+      copyFileOrFolder: sendCopyFileOrFolder,
       renameFileOrFolder: sendRenameFileOrFolder,
     });
     sendListFiles.mockResolvedValue({
@@ -169,6 +171,17 @@ describe("RequestingTree", () => {
     `);
   });
 
+  test("copy should duplicate a file", async () => {
+    sendCopyFileOrFolder.mockResolvedValue({ success: true });
+
+    await requestingTree.copy("1.1", "file1_copy");
+    expect(sendCopyFileOrFolder).toHaveBeenCalledWith({
+      path: "/root/file1",
+      newPath: "/root/file1_copy",
+    });
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+
   test("createFile should create a new file", async () => {
     sendCreateFileOrFolder.mockResolvedValue({ success: true });
 
@@ -236,6 +249,7 @@ describe("RequestingTree", () => {
         listFiles: sendListFiles,
         createFileOrFolder: sendCreateFileOrFolder,
         deleteFileOrFolder: sendDeleteFileOrFolder,
+        copyFileOrFolder: sendCopyFileOrFolder,
         renameFileOrFolder: sendRenameFileOrFolder,
       });
       sendListFiles.mockRejectedValue(new Error("Network error"));
@@ -263,6 +277,23 @@ describe("RequestingTree", () => {
       });
     });
 
+    test("copy should handle API failure", async () => {
+      sendCopyFileOrFolder.mockResolvedValue({
+        success: false,
+        message: "Error duplicating",
+      });
+
+      await requestingTree.copy("1.1", "file1_copy");
+      expect(sendCopyFileOrFolder).toHaveBeenCalledWith({
+        path: "/root/file1",
+        newPath: "/root/file1_copy",
+      });
+      expect(toast).toHaveBeenCalledWith({
+        title: "Failed",
+        description: "Error duplicating",
+      });
+    });
+
     test("move should handle missing parent node gracefully", async () => {
       await requestingTree.move(["1.x"], "2");
       expect(sendRenameFileOrFolder).not.toHaveBeenCalled();
@@ -284,6 +315,7 @@ describe("RequestingTree", () => {
         listFiles: sendListFiles,
         createFileOrFolder: sendCreateFileOrFolder,
         deleteFileOrFolder: sendDeleteFileOrFolder,
+        copyFileOrFolder: sendCopyFileOrFolder,
         renameFileOrFolder: sendRenameFileOrFolder,
       });
 
@@ -305,6 +337,7 @@ describe("RequestingTree", () => {
         listFiles: sendListFiles,
         createFileOrFolder: sendCreateFileOrFolder,
         deleteFileOrFolder: sendDeleteFileOrFolder,
+        copyFileOrFolder: sendCopyFileOrFolder,
         renameFileOrFolder: sendRenameFileOrFolder,
       });
 

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

@@ -381,6 +381,7 @@ const Show = ({
       {node.data.name}
       {node.data.isMarimoFile && !isWasm() && (
         <span
+          data-testid="file-explorer-open-marimo-button"
           className="shrink-0 ml-2 text-sm hidden group-hover:inline hover:underline"
           onClick={onOpenMarimoFile}
         >
@@ -419,8 +420,7 @@ const Edit = ({ node }: { node: NodeApi<FileInfo> }) => {
 };
 
 const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
-  const { openFile, sendCreateFileOrFolder, sendFileDetails } =
-    useRequestClient();
+  const { openFile, sendFileDetails } = useRequestClient();
   const disableFileDownloads = useAtomValue(disableFileDownloadsAtom);
 
   const fileType: FileIconType = node.data.isDirectory
@@ -502,37 +502,14 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
   });
 
   const handleDuplicate = useEvent(async () => {
-    if (!tree || node.data.isDirectory) {
+    if (!tree) {
       return;
     }
 
     const [name, extension] = fileSplit(node.data.name);
     const duplicateName = `${name}_copy${extension}`;
 
-    try {
-      // First get the file contents
-      const details = await sendFileDetails({ path: node.data.path });
-
-      // Get the parent directory path
-      const parentPath = node.parent?.data.path || "";
-
-      // Create the duplicate file by creating a new file with the same contents
-      await sendCreateFileOrFolder({
-        path: parentPath,
-        type: "file",
-        name: duplicateName,
-        contents: details.contents ? btoa(details.contents) : undefined,
-      });
-
-      // Refresh the parent folder to show the new file
-      await tree.refreshAll([parentPath]);
-    } catch {
-      toast({
-        title: "Failed to duplicate file",
-        description: "Unable to create a duplicate of the file",
-        variant: "danger",
-      });
-    }
+    await tree.copy(node.id, duplicateName);
   });
 
   const renderActions = () => {
@@ -581,12 +558,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
           <Edit3Icon className={ic} />
           Rename
         </DropdownMenuItem>
-        {!node.data.isDirectory && (
-          <DropdownMenuItem onSelect={handleDuplicate}>
-            <CopyIcon className={ic} />
-            Duplicate
-          </DropdownMenuItem>
-        )}
+        <DropdownMenuItem onSelect={handleDuplicate}>
+          <CopyIcon className={ic} />
+          Duplicate
+        </DropdownMenuItem>
         <DropdownMenuItem
           onSelect={async () => {
             await copyToClipboard(node.data.path);

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

@@ -17,6 +17,7 @@ export class RequestingTree {
     listFiles: EditRequests["sendListFiles"];
     createFileOrFolder: EditRequests["sendCreateFileOrFolder"];
     deleteFileOrFolder: EditRequests["sendDeleteFileOrFolder"];
+    copyFileOrFolder: EditRequests["sendCopyFileOrFolder"];
     renameFileOrFolder: EditRequests["sendRenameFileOrFolder"];
   };
 
@@ -24,6 +25,7 @@ export class RequestingTree {
     listFiles: EditRequests["sendListFiles"];
     createFileOrFolder: EditRequests["sendCreateFileOrFolder"];
     deleteFileOrFolder: EditRequests["sendDeleteFileOrFolder"];
+    copyFileOrFolder: EditRequests["sendCopyFileOrFolder"];
     renameFileOrFolder: EditRequests["sendRenameFileOrFolder"];
   }) {
     this.callbacks = callbacks;
@@ -74,9 +76,44 @@ export class RequestingTree {
     return true;
   }
 
+  async copy(id: string, newName: string): Promise<void> {
+    const node = this.delegate.find(id);
+    if (!node) {
+      toast({
+        title: "Failed",
+        description: `Node with id ${id} not found in the tree`,
+      });
+      return;
+    }
+    const currentPath = node.data.path as FilePath;
+    const parentPath = this.path.dirname(currentPath);
+    const newPath = this.path.join(parentPath, newName);
+    const newFile = await this.callbacks
+      .copyFileOrFolder({
+        path: currentPath,
+        newPath: newPath,
+      })
+      .then(this.handleResponse);
+    if (!newFile?.info) {
+      return;
+    }
+    this.delegate.create({
+      parentId: node.parent?.id ?? null,
+      index: 0,
+      data: newFile.info,
+    });
+    this.onChange(this.delegate.data);
+    // Refresh the parent folder
+    await this.refreshAll([parentPath]);
+  }
+
   async rename(id: string, name: string): Promise<void> {
     const node = this.delegate.find(id);
     if (!node) {
+      toast({
+        title: "Failed",
+        description: `Node with id ${id} not found in the tree`,
+      });
       return;
     }
     const currentPath = node.data.path as FilePath;
@@ -172,6 +209,10 @@ export class RequestingTree {
   async delete(id: string): Promise<void> {
     const node = this.delegate.find(id);
     if (!node) {
+      toast({
+        title: "Failed",
+        description: `Node with id ${id} not found in the tree`,
+      });
       return;
     }
 

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

@@ -15,6 +15,7 @@ export const treeAtom = atom<RequestingTree>((get) => {
     listFiles: client.sendListFiles,
     createFileOrFolder: client.sendCreateFileOrFolder,
     deleteFileOrFolder: client.sendDeleteFileOrFolder,
+    copyFileOrFolder: client.sendCopyFileOrFolder,
     renameFileOrFolder: client.sendRenameFileOrFolder,
   });
 });

package/src/components/editor/renderers/slides-layout/slides-layout.tsx

@@ -1,18 +1,18 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useAtomValue } from "jotai";
 import { numColumnsAtom } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import type { ICellRendererProps } from "../types";
 import type { SlidesLayout } from "./types";
 import { SlidesMinimap } from "@/components/slides/minimap";
-import { Slide } from "@/components/slides/slide";
 import useEvent from "react-use-event-hook";
+import type { RevealApi } from "reveal.js";
 
 type Props = ICellRendererProps<SlidesLayout>;
 
 const LazySlidesComponent = React.lazy(
-  () => import("../../../slides/slides-component"),
+  () => import("../../../slides/reveal-component"),
 );
 
 export const SlidesLayoutRenderer: React.FC<Props> = ({
@@ -26,6 +26,7 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   const numColumns = useAtomValue(numColumnsAtom);
   const isMultiColumn = numColumns > 1;
   const [activeCellId, setActiveCellId] = useState<CellId | null>(null);
+  const deckRef = useRef<RevealApi | null>(null);
 
   const cellsWithOutput = cells.filter(
     (cell) => cell.output != null && cell.output.data !== "",
@@ -45,24 +46,15 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
 
   const slides = (
     <LazySlidesComponent
-      forceKeyboardNavigation={true}
-      className="flex-1 self-center"
+      cellsWithOutput={cellsWithOutput}
       activeIndex={resolvedIndex}
-      onActiveIndexChange={handleSlideChange}
-    >
-      {cellsWithOutput.map((cell) => (
-        <Slide
-          key={cell.id}
-          cellId={cell.id}
-          status={cell.status}
-          output={cell.output}
-        />
-      ))}
-    </LazySlidesComponent>
+      onSlideChange={handleSlideChange}
+      deckRef={deckRef}
+    />
   );
 
   if (isReading) {
-    return <div className="p-4 flex flex-col flex-1 max-h-[95%]">{slides}</div>;
+    return <div className="p-4 flex flex-1 max-h-[95%]">{slides}</div>;
   }
 
   return (

package/src/components/home/components.tsx

@@ -32,6 +32,7 @@ import { useRequestClient } from "@/core/network/requests";
 import type { TutorialId } from "@/core/network/types";
 import { openNotebook } from "@/utils/links";
 import { Objects } from "@/utils/objects";
+import { MarimoPlusIcon } from "../icons/marimo-icons";
 
 const TUTORIALS: Record<
   TutorialId,
@@ -132,6 +133,12 @@ const RESOURCES = [
     icon: MessagesSquareIcon,
     url: Constants.discordLink,
   },
+  {
+    title: "molab",
+    description: "Run marimo notebooks in the cloud",
+    icon: MarimoPlusIcon,
+    url: Constants.molab,
+  },
   {
     title: "YouTube",
     description: "Watch tutorials and demos",

package/src/components/slides/reveal-component.tsx

@@ -0,0 +1,109 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useEffect } from "react";
+import { ExpandIcon } from "lucide-react";
+import { Deck, Slide } from "@revealjs/react";
+import { Slide as CellOutputSlide } from "@/components/slides/slide";
+import { Button } from "@/components/ui/button";
+import { Tooltip } from "@/components/ui/tooltip";
+import type { CellData, CellRuntimeState } from "@/core/cells/types";
+import type { RevealApi } from "reveal.js";
+import { Events } from "@/utils/events";
+import { Logger } from "@/utils/Logger";
+
+import "./slides.css";
+import "./reveal-slides.css";
+
+const RevealSlidesComponent = ({
+  cellsWithOutput,
+  activeIndex,
+  onSlideChange,
+  deckRef,
+}: {
+  cellsWithOutput: (CellRuntimeState & CellData)[];
+  activeIndex?: number;
+  onSlideChange?: (index: number) => void;
+  deckRef: React.RefObject<RevealApi | null>;
+}) => {
+  useEffect(() => {
+    const deck = deckRef.current;
+    if (deck == null || activeIndex == null) {
+      return;
+    }
+    const { h } = deck.getIndices();
+    if (h !== activeIndex) {
+      deck.slide(activeIndex);
+    }
+  }, [activeIndex, deckRef]);
+
+  return (
+    <div className="group relative h-full w-full flex-1">
+      <Deck
+        deckRef={deckRef}
+        className="relative w-full h-full border rounded bg-background mo-slides-theme prose-slides"
+        style={{ height: "100%" }}
+        config={{
+          embedded: true, // Avoid styles leaking out
+          overview: false,
+          width: "100%",
+          height: "100%", // Both style and config height are needed to ensure the deck is full height
+          center: false, // We are handling this manually
+          minScale: 1,
+          maxScale: 1,
+          // Only enable keyboard controls when not focused on an input
+          keyboardCondition: (event: KeyboardEvent) => {
+            return !Events.fromInput(event);
+          },
+        }}
+        onSlideChange={() => {
+          const deck = deckRef.current;
+          if (deck) {
+            onSlideChange?.(deck.getIndices().h);
+            // Trigger resize so vega-embed re-measures container width
+            if (
+              deck.getCurrentSlide()?.querySelector(".vega-embed, marimo-vega")
+            ) {
+              requestAnimationFrame(() => {
+                window.dispatchEvent(new Event("resize"));
+              });
+            }
+          }
+        }}
+      >
+        {cellsWithOutput.map((cell) => (
+          <Slide key={cell.id}>
+            <div className="h-full w-full overflow-auto flex">
+              <div className="mo-slide-content" style={{ margin: "auto 0" }}>
+                <CellOutputSlide
+                  cellId={cell.id}
+                  status={cell.status}
+                  output={cell.output}
+                />
+              </div>
+            </div>
+          </Slide>
+        ))}
+      </Deck>
+      <Tooltip content="Fullscreen (F)">
+        <Button
+          data-testid="marimo-plugin-slides-fullscreen"
+          variant="ghost"
+          size="icon"
+          className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-70 text-muted-foreground transition-opacity h-7 w-7"
+          onClick={() => {
+            deckRef.current
+              ?.getViewportElement()
+              ?.requestFullscreen()
+              .catch((error) => {
+                Logger.error("Failed to request fullscreen", error);
+              });
+          }}
+        >
+          <ExpandIcon className="h-4 w-4" />
+        </Button>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default RevealSlidesComponent;

package/src/components/slides/reveal-slides.css

@@ -0,0 +1,42 @@
+@import "reveal.js/reveal.css";
+
+/* Neutralize reveal-viewport styles so the slides inherit marimo's defaults */
+.reveal-viewport {
+  background-color: transparent;
+  color: inherit;
+  line-height: inherit;
+  overflow: visible;
+  height: auto;
+}
+.reveal-viewport:fullscreen {
+  background-color: var(--background);
+}
+.reveal-viewport:fullscreen .mo-slide-content {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+.reveal-viewport::backdrop {
+  background-color: var(--background);
+}
+
+/* Ensure .reveal inherits marimo's font/color instead of setting its own */
+.mo-slides-theme.reveal {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+/* Use marimo's primary color for controls and progress */
+.mo-slides-theme.reveal .controls {
+  color: var(--primary);
+}
+.mo-slides-theme.reveal .progress {
+  color: var(--primary);
+}
+
+.reveal .slides {
+  text-align: unset;
+}
+
+.reveal .slides > section {
+  height: 100%;
+}