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

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-C5WESBbZ.js"></script>
+    <script type="module" crossorigin src="./assets/index-Dqr3-dR1.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-BPPi7vOr.js">
     <link rel="modulepreload" crossorigin href="./assets/objects-CrbstYTV.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-C4rtOYze.js">
@@ -104,7 +104,7 @@
     <link rel="modulepreload" crossorigin href="./assets/constants-DifUxsbZ.js">
     <link rel="modulepreload" crossorigin href="./assets/session-D-SddyN0.js">
     <link rel="modulepreload" crossorigin href="./assets/Deferred-CP7vq682.js">
-    <link rel="modulepreload" crossorigin href="./assets/config-EoJoeZuK.js">
+    <link rel="modulepreload" crossorigin href="./assets/config-DFK5eCC3.js">
     <link rel="modulepreload" crossorigin href="./assets/uuid-e9lSomwA.js">
     <link rel="modulepreload" crossorigin href="./assets/DeferredRequestRegistry-6TRSC3VZ.js">
     <link rel="modulepreload" crossorigin href="./assets/requests-B9zEd_sW.js">
@@ -134,7 +134,7 @@
     <link rel="modulepreload" crossorigin href="./assets/now-CsYTPAhW.js">
     <link rel="modulepreload" crossorigin href="./assets/debounce-DhnxH9Rh.js">
     <link rel="modulepreload" crossorigin href="./assets/database-zap-n8PGHE18.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-DTFqEQb0.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-BvgwUKB9.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-PEowR7op.js">
     <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-D58nBaNf.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-dialog-D_kB5FIu.js">
@@ -147,40 +147,40 @@
     <link rel="modulepreload" crossorigin href="./assets/usePress-Bl6X9B5M.js">
     <link rel="modulepreload" crossorigin href="./assets/input-BN98e517.js">
     <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-Dxj31V4A.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-D26WjdN1.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-WDIIwzUn.js">
     <link rel="modulepreload" crossorigin href="./assets/config-DjP9S1hr.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-CHWQT4zh.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-C9ZBG6Lx.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-DWGvf_Bw.js">
     <link rel="modulepreload" crossorigin href="./assets/links-BeU4kHTI.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-BpZ_0Xuz.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-DjQN3XYP.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-HCSOwOwk.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-DlR5UiIE.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-Cn8LzPNx.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-X9kskQZ0.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-DZgUyqAK.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-ByxLiTvP.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-BoN8Qu7U.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-Le540Ng6.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-m2zUPztG.js">
     <link rel="modulepreload" crossorigin href="./assets/hat-glasses-xLTnAC_n.js">
     <link rel="modulepreload" crossorigin href="./assets/package-ROei-DG7.js">
     <link rel="modulepreload" crossorigin href="./assets/sparkles-DwqcWrJl.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-BVdFtnJz.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-Cb0evuEp.js">
     <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-B392qglD.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-DfXRjba3.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-DPUCy0Ep.js">
-    <link rel="modulepreload" crossorigin href="./assets/tree-actions-DUAdNn1i.js">
+    <link rel="modulepreload" crossorigin href="./assets/tree-actions-QMLf8Qhz.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-Cj3eM5bt.js">
-    <link rel="modulepreload" crossorigin href="./assets/html-to-image-BsXiWo0v.js">
-    <link rel="modulepreload" crossorigin href="./assets/focus-BTlyH5K_.js">
+    <link rel="modulepreload" crossorigin href="./assets/html-to-image-DKEUbBwc.js">
+    <link rel="modulepreload" crossorigin href="./assets/focus-BArgHYf8.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-BcvSvTUt.js">
     <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-DUvRReKp.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-D4wN6pqE.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-5FQGJX7Z-B4N_BMo6.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-BjuEVUOa.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-D7RLn6TA.js">
     <link rel="modulepreload" crossorigin href="./assets/command-D5LtSvbN.js">
     <link rel="modulepreload" crossorigin href="./assets/field-BPfggvql.js">
     <link rel="modulepreload" crossorigin href="./assets/popover-B96fOqfH.js">
     <link rel="modulepreload" crossorigin href="./assets/errors-D93OkQw8.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-_oAlkvj6.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-B8NwKEtr.js">
     <link rel="modulepreload" crossorigin href="./assets/table-xPvP31p3.js">
     <link rel="modulepreload" crossorigin href="./assets/useIframeCapabilities-DBacdN1t.js">
     <link rel="modulepreload" crossorigin href="./assets/error-banner-d0-XOKtd.js">
@@ -201,35 +201,35 @@
     <link rel="modulepreload" crossorigin href="./assets/plus-r1QITpsJ.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-2-BLxp8uxj.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-CLaR27oP.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-DnrBQBRT.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-C5g_bqiZ.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-eb23KpAk.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-ypIvDL4C.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-NeCHOv2Z.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-BLap3eAk.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-DMqGohE5.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-BwSNDWAP.js">
-    <link rel="modulepreload" crossorigin href="./assets/radio-group-5KDs5aO1.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-Vqr5D17R.js">
-    <link rel="modulepreload" crossorigin href="./assets/switch-CDT2KH2g.js">
+    <link rel="modulepreload" crossorigin href="./assets/radio-group-CSwRGU0A.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-UPrDtFZF.js">
+    <link rel="modulepreload" crossorigin href="./assets/switch-ulnbZFaI.js">
     <link rel="modulepreload" crossorigin href="./assets/objectWithoutPropertiesLoose-DfWeGRFv.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-RBKN8Dn2.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-BV8otm7e.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-BCOkadQf.js">
     <link rel="modulepreload" crossorigin href="./assets/file-headphone-BjKz3ZV1.js">
     <link rel="modulepreload" crossorigin href="./assets/file-BjlLTeSV.js">
     <link rel="modulepreload" crossorigin href="./assets/image-Dvcyi0uu.js">
-    <link rel="modulepreload" crossorigin href="./assets/file-icons-V3puz20c.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-icons-D39zbjsS.js">
     <link rel="modulepreload" crossorigin href="./assets/events-CPoJAfgx.js">
     <link rel="modulepreload" crossorigin href="./assets/share-c5Zh8BM8.js">
-    <link rel="modulepreload" crossorigin href="./assets/blob-BKW9TqBu.js">
+    <link rel="modulepreload" crossorigin href="./assets/blob-XD7AvCQ1.js">
     <link rel="modulepreload" crossorigin href="./assets/get-DuxuLRGI.js">
     <link rel="modulepreload" crossorigin href="./assets/_baseSet-DehVzRp6.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-Ci7n55A9.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-C7arWhwL.js">
     <link rel="modulepreload" crossorigin href="./assets/label-BOFHwHn7.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-Bb1JVuzT.js">
+    <link rel="modulepreload" crossorigin href="./assets/form-BvzcNsxB.js">
     <link rel="modulepreload" crossorigin href="./assets/textarea-Bn1AMfsk.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-ccw-neWzNbg7.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-CRSnWxLR.js">
+    <link rel="modulepreload" crossorigin href="./assets/form-BN1AKD58.js">
     <link rel="modulepreload" crossorigin href="./assets/renderShortcut-C6HKXhBl.js">
-    <link rel="modulepreload" crossorigin href="./assets/useBoolean-CgN_4RAl.js">
+    <link rel="modulepreload" crossorigin href="./assets/useBoolean-C_UV6tQ7.js">
     <link rel="modulepreload" crossorigin href="./assets/markdown-export-D-ZHIs71.js">
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-CbFVGT0j.js">
     <link rel="modulepreload" crossorigin href="./assets/types-D0D7HkQV.js">
@@ -249,7 +249,7 @@
     <link rel="stylesheet" crossorigin href="./assets/cells-BE1kpmPF.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DdDKmWlR.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-BQtz7-np.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-WoaGtlKd.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-n_AVX7aW.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.24.1-dev2",
+  "version": "0.24.1-dev20",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/__mocks__/requests.ts

@@ -100,6 +100,10 @@ export const MockRequestClient = {
           },
         ],
       }),
+      installExportRequirements: vi.fn().mockResolvedValue({
+        source: "server",
+        formats: [],
+      }),
       exportAsHTML: vi.fn().mockResolvedValue({
         contents: "",
         filename: "notebook.html",

package/src/components/app-config/optional-features.test.ts

@@ -0,0 +1,78 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { isPackageRequirementInstalled } from "./optional-features";
+
+describe("isPackageRequirementInstalled", () => {
+  const installedPackages = [
+    { name: "mcp", version: "2.0.0" },
+    { name: "polars", version: "1.8.2" },
+  ];
+
+  it("requires the package to be installed", () => {
+    expect(
+      isPackageRequirementInstalled({ name: "missing" }, installedPackages),
+    ).toBe(false);
+  });
+
+  it("accepts an installed package without a minimum version", () => {
+    expect(
+      isPackageRequirementInstalled({ name: "polars" }, installedPackages),
+    ).toBe(true);
+  });
+
+  it("rejects an installed package below the minimum version", () => {
+    expect(
+      isPackageRequirementInstalled(
+        { name: "mcp", minVersion: "2.1.0" },
+        installedPackages,
+      ),
+    ).toBe(false);
+  });
+
+  it.each(["2.0.0rc1", "2.0.0.dev1", "2.0.0-beta1"])(
+    "rejects the prerelease version %s",
+    (version) => {
+      expect(
+        isPackageRequirementInstalled({ name: "mcp", minVersion: "2.0.0" }, [
+          { name: "mcp", version },
+        ]),
+      ).toBe(false);
+    },
+  );
+
+  it.each(["2.1.0rc1", "3.0.0rc1"])(
+    "accepts the later prerelease version %s",
+    (version) => {
+      expect(
+        isPackageRequirementInstalled({ name: "mcp", minVersion: "2.0.0" }, [
+          { name: "mcp", version },
+        ]),
+      ).toBe(true);
+    },
+  );
+
+  it("accepts an installed package at or above the minimum version", () => {
+    expect(
+      isPackageRequirementInstalled(
+        { name: "mcp", minVersion: "2.0.0" },
+        installedPackages,
+      ),
+    ).toBe(true);
+    expect(
+      isPackageRequirementInstalled(
+        { name: "mcp", minVersion: "1.9.0" },
+        installedPackages,
+      ),
+    ).toBe(true);
+  });
+
+  it("normalizes extras in the requirement name", () => {
+    expect(
+      isPackageRequirementInstalled(
+        { name: "polars[pyarrow]" },
+        installedPackages,
+      ),
+    ).toBe(true);
+  });
+});

package/src/components/app-config/optional-features.tsx

@@ -20,6 +20,7 @@ import { isWasm } from "@/core/wasm/utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
+import { semverSort } from "@/utils/versions";
 import { SettingSubtitle } from "./common";
 
 interface Package {
@@ -27,6 +28,35 @@ interface Package {
   minVersion?: string;
 }
 
+interface InstalledPackage {
+  name: string;
+  version: string;
+}
+
+const PEP_440_PRERELEASE =
+  /^((?:\d+!)?\d+(?:\.\d+)*)(?:[-_.]?(?:a|b|c|rc|alpha|beta|pre|preview|dev)\d*)/i;
+
+export function isPackageRequirementInstalled(
+  requirement: Package,
+  installedPackages: InstalledPackage[],
+): boolean {
+  const packageName = requirement.name.split("[")[0];
+  const installedPackage = installedPackages.find(
+    (pkg) => pkg.name === packageName,
+  );
+  if (!installedPackage) {
+    return false;
+  }
+  if (!requirement.minVersion) {
+    return true;
+  }
+  const prerelease = installedPackage.version.match(PEP_440_PRERELEASE);
+  if (prerelease) {
+    return semverSort(prerelease[1], requirement.minVersion) > 0;
+  }
+  return semverSort(installedPackage.version, requirement.minVersion) >= 0;
+}
+
 interface OptionalFeature {
   id: string;
   /**
@@ -77,8 +107,8 @@ const OPTIONAL_DEPENDENCIES: OptionalFeature[] = [
   },
   {
     id: "mcp",
-    packagesRequired: [{ name: "mcp", minVersion: "1" }],
-    additionalPackageInstalls: [{ name: "pydantic", minVersion: "2" }],
+    packagesRequired: [{ name: "mcp", minVersion: "2.0.0" }],
+    additionalPackageInstalls: [],
     description: "Connect to MCP servers",
   },
   {
@@ -123,9 +153,6 @@ export const OptionalFeatures: React.FC = () => {
   }
 
   const installedPackages = data?.packages || [];
-  const installedPackageNames = new Set(
-    installedPackages.map((pkg) => pkg.name),
-  );
 
   return (
     <div className="flex-1 flex flex-col overflow-hidden gap-2">
@@ -149,7 +176,7 @@ export const OptionalFeatures: React.FC = () => {
         <TableBody>
           {OPTIONAL_DEPENDENCIES.map((dep) => {
             const isInstalled = dep.packagesRequired.every((pkg) =>
-              installedPackageNames.has(pkg.name.split("[")[0]),
+              isPackageRequirementInstalled(pkg, installedPackages),
             );
             const packageSpec = dep.packagesRequired
               .map((pkg) => pkg.name)

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", () => {