@marimo-team/frontend 0.24.1-dev2 → 0.24.1-dev21

package/src/components/editor/actions/export-dialog/__tests__/export-dialog.test.tsx

@@ -13,12 +13,16 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { Dialog } from "@/components/ui/dialog";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { viewStateAtom } from "@/core/mode";
+import { kioskModeAtom, viewStateAtom } from "@/core/mode";
 import { requestClientAtom } from "@/core/network/requests";
+import { createErrorToastingRequests } from "@/core/network/requests-toasting";
+import type { ExportAvailabilityResponse } from "@/core/network/types";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
 import { isWasm } from "@/core/wasm/utils";
 import * as copyModule from "@/utils/copy";
+import { Deferred } from "@/utils/Deferred";
+import { HTTPError } from "@/utils/errors";
 import { ExportDialog } from "../export-dialog";
 import {
   DEFAULT_EXPORT_OPTIONS,
@@ -27,14 +31,22 @@ import {
   lastExportFormatAtom,
 } from "../state";
 
-const { exportNotebookMock } = vi.hoisted(() => ({
+const { exportNotebookMock, toastMock } = vi.hoisted(() => ({
   exportNotebookMock: vi.fn().mockResolvedValue(undefined),
+  toastMock: vi.fn(() => ({
+    dismiss: vi.fn(),
+    update: vi.fn(),
+  })),
 }));
 
 vi.mock("@/utils/copy", () => ({
   copyToClipboard: vi.fn().mockResolvedValue(undefined),
 }));
 
+vi.mock("@/components/ui/use-toast", () => ({
+  toast: toastMock,
+}));
+
 vi.mock("@/core/wasm/utils", async (importOriginal) => {
   const actual = await importOriginal<typeof import("@/core/wasm/utils")>();
   return { ...actual, isWasm: vi.fn(() => false) };
@@ -67,6 +79,32 @@ async function waitForExportEnabled() {
   );
 }
 
+type FormatAvailability = ExportAvailabilityResponse["formats"][number];
+
+function formatAvailability(
+  format: FormatAvailability["format"],
+  overrides: Partial<Omit<FormatAvailability, "format">> = {},
+): FormatAvailability {
+  return {
+    format,
+    dependenciesAvailable: true,
+    missingPackages: [],
+    missingSetup: [],
+    ...overrides,
+  };
+}
+
+function serverAvailability(
+  ...formats: FormatAvailability[]
+): ExportAvailabilityResponse {
+  return { source: "server", formats };
+}
+
+const PLAYWRIGHT_SETUP = {
+  name: "playwright-chromium",
+  command: "uv run playwright install chromium",
+} as const;
+
 describe("ExportDialog", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -74,8 +112,10 @@ describe("ExportDialog", () => {
     store.set(requestClientAtom, MockRequestClient.create());
     store.set(filenameAtom, "/project/notebook.py");
     store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+    store.set(kioskModeAtom, false);
     store.set(exportOptionsAtom, DEFAULT_EXPORT_OPTIONS);
     store.set(lastExportFormatAtom, "html");
+    window.history.replaceState(null, "", "/");
     vi.mocked(isWasm).mockReturnValue(false);
     vi.stubGlobal("matchMedia", () => ({
       matches: false,
@@ -248,54 +288,80 @@ describe("ExportDialog", () => {
     expect(tablist).toHaveAttribute("aria-orientation", "vertical");
   });
 
-  it("keeps unavailable formats visible and names missing packages", async () => {
+  it("installs missing packages and applies refreshed availability", async () => {
+    const install = new Deferred<ExportAvailabilityResponse>();
+    const installExportRequirements = vi.fn(() => install.promise);
+    const getExportAvailability = vi.fn().mockResolvedValue(
+      serverAvailability(
+        formatAvailability("ipynb", {
+          dependenciesAvailable: false,
+          missingPackages: ["nbformat"],
+        }),
+        formatAvailability("pdf", {
+          dependenciesAvailable: false,
+          missingPackages: ["nbconvert[webpdf]", "nbformat"],
+        }),
+      ),
+    );
     store.set(
       requestClientAtom,
       MockRequestClient.create({
-        getExportAvailability: vi.fn().mockResolvedValue({
-          source: "server",
-          formats: [
-            {
-              format: "pdf",
-              dependenciesAvailable: false,
-              missingPackages: ["nbconvert[webpdf]"],
-              missingSetup: [],
-            },
-          ],
-        }),
+        getExportAvailability,
+        installExportRequirements,
       }),
     );
 
     renderDialog("pdf");
 
-    expect(await screen.findByText("nbconvert[webpdf]")).toBeVisible();
-    expect(
-      screen.getByText(/where marimo is running to use this export/),
-    ).toBeVisible();
+    const packages = await screen.findByText("nbconvert[webpdf], nbformat");
+    expect(packages.parentElement).toHaveTextContent(
+      "PDF export requires nbconvert[webpdf], nbformat.",
+    );
     expect(screen.getByTestId("export-submit")).toBeDisabled();
     expect(screen.getByTestId("export-format-pdf")).toBeVisible();
+
+    const installButton = screen.getByRole("button", { name: "Install" });
+    const pdfTab = screen.getByTestId("export-format-pdf");
+    const htmlTab = screen.getByTestId("export-format-html");
+
+    fireEvent.click(installButton);
+
+    await waitFor(() =>
+      expect(installExportRequirements).toHaveBeenCalledWith({ format: "pdf" }),
+    );
+    expect(installButton).toHaveAttribute("aria-busy", "true");
+    expect(htmlTab).toBeDisabled();
+
+    fireEvent.click(installButton);
+    fireEvent.click(htmlTab);
+    expect(installExportRequirements).toHaveBeenCalledOnce();
+    expect(pdfTab).toHaveAttribute("data-state", "active");
+
+    install.resolve(
+      serverAvailability(
+        formatAvailability("ipynb"),
+        formatAvailability("pdf"),
+      ),
+    );
+    await waitForExportEnabled();
+    expect(getExportAvailability).toHaveBeenCalledOnce();
+
+    fireEvent.click(screen.getByTestId("export-format-ipynb"));
+    expect(screen.getByTestId("export-submit")).toBeEnabled();
   });
 
   it("explains missing Playwright Chromium setup", async () => {
     store.set(
       requestClientAtom,
       MockRequestClient.create({
-        getExportAvailability: vi.fn().mockResolvedValue({
-          source: "server",
-          formats: [
-            {
-              format: "pdf",
+        getExportAvailability: vi.fn().mockResolvedValue(
+          serverAvailability(
+            formatAvailability("pdf", {
               dependenciesAvailable: false,
-              missingPackages: [],
-              missingSetup: [
-                {
-                  name: "playwright-chromium",
-                  command: "uv run playwright install chromium",
-                },
-              ],
-            },
-          ],
-        }),
+              missingSetup: [PLAYWRIGHT_SETUP],
+            }),
+          ),
+        ),
       }),
     );
 
@@ -305,9 +371,115 @@ describe("ExportDialog", () => {
       await screen.findByText("PDF export requires Playwright Chromium."),
     ).toBeVisible();
     expect(
-      screen.getByText("uv run playwright install chromium"),
+      screen.queryByText("uv run playwright install chromium"),
+    ).not.toBeInTheDocument();
+    expect(screen.getByTestId("export-submit")).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Install" })).toBeVisible();
+  });
+
+  it.each([
+    ["read mode", "read", false, false],
+    ["connected kiosk mode", "edit", true, false],
+    ["pre-connection kiosk mode", "edit", false, true],
+  ] as const)(
+    "shows the setup command when installation is not allowed in %s",
+    async (_label, mode, kioskMode, kioskRequested) => {
+      store.set(viewStateAtom, { mode, cellAnchor: null });
+      store.set(kioskModeAtom, kioskMode);
+      if (kioskRequested) {
+        window.history.replaceState(null, "", "/?kiosk=true");
+      }
+      store.set(
+        requestClientAtom,
+        MockRequestClient.create({
+          getExportAvailability: vi.fn().mockResolvedValue(
+            serverAvailability(
+              formatAvailability("pdf", {
+                dependenciesAvailable: false,
+                missingSetup: [PLAYWRIGHT_SETUP],
+              }),
+            ),
+          ),
+        }),
+      );
+
+      renderDialog("pdf");
+
+      expect(
+        await screen.findByText("PDF export requires Playwright Chromium."),
+      ).toBeVisible();
+      expect(
+        screen.getByText("uv run playwright install chromium"),
+      ).toBeVisible();
+      expect(
+        screen.queryByRole("button", { name: "Install" }),
+      ).not.toBeInTheDocument();
+    },
+  );
+
+  it("allows requirement installation when kiosk is false", async () => {
+    window.history.replaceState(null, "", "/?kiosk=false");
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({
+        getExportAvailability: vi.fn().mockResolvedValue(
+          serverAvailability(
+            formatAvailability("pdf", {
+              dependenciesAvailable: false,
+              missingSetup: [PLAYWRIGHT_SETUP],
+            }),
+          ),
+        ),
+      }),
+    );
+
+    renderDialog("pdf");
+
+    expect(
+      await screen.findByRole("button", { name: "Install" }),
     ).toBeVisible();
+  });
+
+  it("restores the install action when installation fails", async () => {
+    const error = new HTTPError(500, "Server Error", {
+      detail: "Playwright Chromium installation failed. Check the server logs.",
+    });
+    const installExportRequirements = vi.fn().mockRejectedValue(error);
+    const getExportAvailability = vi.fn().mockResolvedValue(
+      serverAvailability(
+        formatAvailability("pdf", {
+          dependenciesAvailable: false,
+          missingPackages: ["nbconvert[webpdf]"],
+        }),
+      ),
+    );
+    store.set(
+      requestClientAtom,
+      createErrorToastingRequests(
+        MockRequestClient.create({
+          getExportAvailability,
+          installExportRequirements,
+        }),
+      ),
+    );
+
+    renderDialog("pdf");
+
+    const install = await screen.findByRole("button", { name: "Install" });
+    fireEvent.click(install);
+
+    await waitFor(() =>
+      expect(toastMock).toHaveBeenCalledWith({
+        title: "Failed to install export requirements",
+        description:
+          "Playwright Chromium installation failed. Check the server logs.",
+        variant: "danger",
+      }),
+    );
+    expect(install).toBeEnabled();
+    expect(install).toHaveAttribute("aria-busy", "false");
     expect(screen.getByTestId("export-submit")).toBeDisabled();
+    expect(getExportAvailability).toHaveBeenCalledOnce();
   });
 
   it("announces requirement checks as status updates", () => {

package/src/components/editor/actions/export-dialog/export-dialog.tsx

@@ -28,13 +28,17 @@ export const ExportDialog: React.FC<{
   const {
     dialogRef,
     isExporting,
+    isInstalling,
+    canInstall,
     formats,
     options,
     selected,
     selectFormat,
     updateOptions,
+    installRequirements,
     submit,
   } = useExportDialog({ initialFormat, onClose });
+  const isBusy = isExporting || isInstalling;
   const desktopLayout = useMediaQuery(DESKTOP_LAYOUT_QUERY);
   const {
     format,
@@ -86,7 +90,7 @@ export const ExportDialog: React.FC<{
               <TabsTrigger
                 key={candidate}
                 value={candidate}
-                disabled={isExporting}
+                disabled={isBusy}
                 className="min-w-0 justify-start gap-2 px-2.5 py-2 text-xs data-[state=active]:shadow-xs sm:w-full sm:text-sm"
                 data-testid={`export-format-${candidate}`}
               >
@@ -119,13 +123,15 @@ export const ExportDialog: React.FC<{
               format={format}
               formatLabel={definition.label}
               status={status}
+              onInstall={canInstall ? installRequirements : undefined}
+              isInstalling={isInstalling}
             />
 
             {usesBrowserPrint ? null : (
               <FormatOptions
                 options={options}
                 updateOptions={updateOptions}
-                disabled={isExporting}
+                disabled={isBusy}
               />
             )}
           </TabsContent>
@@ -173,7 +179,7 @@ export const ExportDialog: React.FC<{
           ) : null}
           <Button
             type="button"
-            disabled={!status.available || isExporting}
+            disabled={!status.available || isBusy}
             aria-busy={isExporting}
             onClick={submit}
             className={cn(

package/src/components/editor/actions/export-dialog/format-notice.tsx

@@ -1,9 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { AlertCircleIcon } from "lucide-react";
+import { AlertCircleIcon, DownloadCloudIcon } from "lucide-react";
 import type { PropsWithChildren } from "react";
 import { Spinner } from "@/components/icons/spinner";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 import { assertNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
 import type {
@@ -56,10 +57,14 @@ export function FormatNotice({
   format,
   formatLabel,
   status,
+  onInstall,
+  isInstalling = false,
 }: {
   format: ExportFormat;
   formatLabel: string;
   status: ExportFormatStatus;
+  onInstall?: () => void;
+  isInstalling?: boolean;
 }) {
   if (status.availabilityCheckFailed) {
     return (
@@ -80,20 +85,47 @@ export function FormatNotice({
         format={format}
         formatLabel={formatLabel}
         reason={status.reason}
+        onInstall={onInstall}
+        isInstalling={isInstalling}
       />
     </div>
   );
 }
 
-function Notice({ children }: PropsWithChildren) {
+function Notice({
+  children,
+  onInstall,
+  isInstalling = false,
+}: PropsWithChildren<{
+  onInstall?: () => void;
+  isInstalling?: boolean;
+}>) {
   return (
     <Alert
       variant="warning"
-      className="flex items-start gap-2.5 p-3 text-(--yellow-12) has-[svg]:pl-3 sm:items-center [&>svg]:static [&>svg+div]:translate-y-0"
+      className="flex items-center gap-2.5 px-3 py-2 text-(--yellow-12) has-[svg]:pl-3 [&>svg]:static [&>svg+div]:translate-y-0"
     >
-      <AlertCircleIcon className="mt-0.5 size-4 shrink-0 sm:mt-0" />
-      <AlertDescription className="min-w-0 flex-1 text-sm leading-5">
-        {children}
+      <AlertCircleIcon className="size-4 shrink-0" />
+      <AlertDescription className="flex min-w-0 flex-1 items-center gap-3 text-sm leading-5">
+        <span className="min-w-0 flex-1">{children}</span>
+        {onInstall ? (
+          <Button
+            type="button"
+            variant="outline"
+            size="xs"
+            className="shrink-0 border-input bg-background text-foreground hover:border-input hover:bg-muted hover:text-foreground"
+            disabled={isInstalling}
+            aria-busy={isInstalling}
+            onClick={onInstall}
+          >
+            {isInstalling ? (
+              <Spinner size="small" className="mr-1.5 size-3.5" />
+            ) : (
+              <DownloadCloudIcon className="mr-1.5 size-3.5" />
+            )}
+            Install
+          </Button>
+        ) : null}
       </AlertDescription>
     </Alert>
   );
@@ -103,10 +135,14 @@ function ReasonNotice({
   format,
   formatLabel,
   reason,
+  onInstall,
+  isInstalling,
 }: {
   format: ExportFormat;
   formatLabel: string;
   reason: ExportBlockReason;
+  onInstall?: () => void;
+  isInstalling: boolean;
 }) {
   switch (reason.type) {
     case "checking-requirements":
@@ -126,30 +162,39 @@ function ReasonNotice({
       return <Notice>Name and save this notebook before exporting.</Notice>;
     case "missing-packages":
       return (
-        <Notice>
-          Install{" "}
+        <Notice onInstall={onInstall} isInstalling={isInstalling}>
+          {formatLabel} export requires{" "}
           <code className="break-words font-mono">
             {reason.packages.join(", ")}
-          </code>{" "}
-          where marimo is running to use this export.
+          </code>
+          .
         </Notice>
       );
     case "missing-setup":
       return (
-        <Notice>
-          <span className="block min-w-0">
-            {reason.requirements.map((requirement) => {
-              const details = SETUP_REQUIREMENTS[requirement.name];
-              return (
-                <span className="block" key={requirement.name}>
-                  {details.description}
-                  <code className="mt-1 block break-all font-mono">
-                    {requirement.command}
-                  </code>
-                </span>
-              );
-            })}
-          </span>
+        <Notice onInstall={onInstall} isInstalling={isInstalling}>
+          {onInstall ? (
+            reason.requirements
+              .map(
+                (requirement) =>
+                  SETUP_REQUIREMENTS[requirement.name].description,
+              )
+              .join(" ")
+          ) : (
+            <span className="block min-w-0">
+              {reason.requirements.map((requirement) => {
+                const details = SETUP_REQUIREMENTS[requirement.name];
+                return (
+                  <span className="block" key={requirement.name}>
+                    {details.description}
+                    <code className="mt-1 block break-all font-mono">
+                      {requirement.command}
+                    </code>
+                  </span>
+                );
+              })}
+            </span>
+          )}
         </Notice>
       );
     case "wasm-runtime":

package/src/components/editor/actions/export-dialog/use-export-dialog.ts

@@ -7,7 +7,7 @@ import {
   updateCellOutputsWithScreenshots,
   useEnrichCellOutputs,
 } from "@/core/export/hooks";
-import { runDuringPresentMode } from "@/core/mode";
+import { runDuringPresentMode, useInstallAllowed } from "@/core/mode";
 import { useRequestClient } from "@/core/network/requests";
 import type { ExportAvailabilityResponse } from "@/core/network/types";
 import { useFilename } from "@/core/saving/filename";
@@ -116,6 +116,8 @@ function useExportDialogState(initialFormat?: ExportFormat) {
   );
   const runtime = isWasm() ? "wasm" : "server";
   const requests = useRequestClient();
+  const installAllowed = useInstallAllowed();
+  const [isInstalling, setIsInstalling] = useState(false);
 
   const availabilityRequest =
     useAsyncData<ExportAvailabilityResponse | null>(async () => {
@@ -135,6 +137,10 @@ function useExportDialogState(initialFormat?: ExportFormat) {
       availability,
     });
   const status = statusFor(format);
+  const canInstall =
+    installAllowed &&
+    (status.reason?.type === "missing-packages" ||
+      status.reason?.type === "missing-setup");
   const formats = EXPORT_FORMATS.map((candidate) => ({
     format: candidate,
     status: statusFor(candidate),
@@ -184,6 +190,22 @@ function useExportDialogState(initialFormat?: ExportFormat) {
     });
   };
 
+  const installRequirements = async () => {
+    if (!canInstall || isInstalling || format === "png") {
+      return;
+    }
+
+    setIsInstalling(true);
+    try {
+      const availability = await requests.installExportRequirements({ format });
+      availabilityRequest.setData(availability);
+    } catch {
+      // Request failures are surfaced by the shared toast layer.
+    } finally {
+      setIsInstalling(false);
+    }
+  };
+
   return {
     formats,
     options,
@@ -205,6 +227,9 @@ function useExportDialogState(initialFormat?: ExportFormat) {
     },
     selectFormat,
     updateOptions,
+    canInstall,
+    isInstalling,
+    installRequirements,
   };
 }
 
@@ -364,7 +389,7 @@ export function useExportDialog({
     ...state,
     ...action,
     selectFormat: (value: string) => {
-      if (!action.isExporting) {
+      if (!action.isExporting && !state.isInstalling) {
         selectFormat(value);
       }
     },

package/src/components/ui/toaster.tsx

@@ -1,9 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import { useRef } from "react";
+import { createPortal } from "react-dom";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { useToast } from "@/components/ui/use-toast";
+import { StyleNamespace } from "@/theme/namespace";
 import { cn } from "@/utils/cn";
+import { withFullScreenAsRoot } from "./fullscreen";
 import {
   Toast,
   ToastClose,
@@ -28,11 +31,21 @@ export const Toaster = () => {
           {...props}
         />
       ))}
-      <ToastViewport />
+      <ToastViewportPortal />
     </ToastProvider>
   );
 };
 
+const ToastViewportPortal = withFullScreenAsRoot(
+  ({ container }: { container?: Element | DocumentFragment | null }) =>
+    createPortal(
+      <StyleNamespace>
+        <ToastViewport />
+      </StyleNamespace>,
+      container ?? document.body,
+    ),
+);
+
 type ToastItemProps = Omit<
   ComponentPropsWithoutRef<typeof Toast>,
   "title" | "children"

package/src/core/codemirror/code-lens/__tests__/popover.test.ts

@@ -56,6 +56,19 @@ describe("CachePopover getCacheInfo throttling", () => {
     return () => act(() => dispose());
   }
 
+  it("renders content synchronously for CodeMirror's initial measurement", async () => {
+    const dom = document.createElement("div");
+
+    // Keep the mount outside `act()`. It would flush an asynchronous render
+    // and make this assertion pass without `flushSync`.
+    const dispose = mountLensPopover(dom, CACHE_SPEC);
+
+    expect(dom.textContent).toContain("my_cache");
+    await act(async () => {
+      dispose();
+    });
+  });
+
   it("does not refetch on every hover, only after the throttle interval elapses", () => {
     const disposeFirst = mount();
     expect(getCacheInfoMock).toHaveBeenCalledTimes(1);

package/src/core/codemirror/code-lens/popover.tsx

@@ -4,6 +4,7 @@ import { Provider, useAtomValue } from "jotai";
 import { DatabaseZapIcon } from "lucide-react";
 import type React from "react";
 import { useEffect } from "react";
+import { flushSync } from "react-dom";
 import { createRoot } from "react-dom/client";
 import { useLocale } from "react-aria";
 import { ProtocolIcon } from "@/components/storage/components";
@@ -39,11 +40,16 @@ export function mountLensPopover(
   spec: CodeLensSpec,
 ): () => void {
   const root = createRoot(dom);
-  root.render(
-    <Provider store={store}>
-      <LensPopover spec={spec} />
-    </Provider>,
-  );
+  // CodeMirror measures and positions the tooltip as soon as this function
+  // returns. Render now so it measures the popover content, not an empty
+  // container that later grows over the hovered icon.
+  flushSync(() => {
+    root.render(
+      <Provider store={store}>
+        <LensPopover spec={spec} />
+      </Provider>,
+    );
+  });
   // Defer so tearing the tooltip down from inside a React event (e.g. the
   // icon's click handler) doesn't unmount mid-render
   return () => queueMicrotask(() => root.unmount());