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

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());

package/src/core/islands/bridge.ts

@@ -356,6 +356,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   sendFileDetails = throwNotImplemented;
   openTutorial = throwNotImplemented;
   getExportAvailability = throwNotImplemented;
+  installExportRequirements = throwNotImplemented;
   exportAsHTML = throwNotImplemented;
   exportAsIPYNB = throwNotImplemented;
   exportAsMarkdown = throwNotImplemented;

package/src/core/mode.ts

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { atom, useAtomValue } from "jotai";
+import { KnownQueryParams } from "@/core/constants";
 import { isIslands } from "@/core/islands/utils";
 import { assertExists } from "@/utils/assertExists";
 import { invariant } from "@/utils/invariant";
@@ -98,5 +99,9 @@ export const kioskModeAtom = atom<boolean>(false);
  */
 export function useInstallAllowed(): boolean {
   const { mode } = useAtomValue(viewStateAtom);
-  return mode !== "read";
+  const kioskMode = useAtomValue(kioskModeAtom);
+  const kioskRequested =
+    new URLSearchParams(window.location.search).get(KnownQueryParams.kiosk) ===
+    "true";
+  return mode !== "read" && !kioskMode && !kioskRequested;
 }

package/src/core/network/__tests__/requests-lazy.test.ts

@@ -2,7 +2,9 @@
 
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { cellId, requestId, uiElementId } from "@/__tests__/branded";
+import { waitForKernelToBeInstantiated } from "../../kernel/state";
 import type { RuntimeManager } from "../../runtime/runtime";
+import { waitForConnectionOpen } from "../connection";
 import { createLazyRequests } from "../requests-lazy";
 import type {
   EditRequests,
@@ -55,6 +57,10 @@ describe("createLazyRequests", () => {
       sendInterrupt: vi.fn().mockResolvedValue({ interrupted: true }),
       sendPdb: vi.fn().mockResolvedValue({ pdb: true }),
       sendRunScratchpad: vi.fn().mockResolvedValue({ run: true }),
+      installExportRequirements: vi.fn().mockResolvedValue({
+        source: "server",
+        formats: [],
+      }),
     } as unknown as EditRequests & RunRequests;
   });
 
@@ -104,6 +110,40 @@ describe("createLazyRequests", () => {
     expect(mockDelegate.getExportAvailability).toHaveBeenCalledOnce();
   });
 
+  it("installs export requirements without waiting for the kernel", async () => {
+    const lazyRequests = createLazyRequests(
+      mockDelegate,
+      mockGetRuntimeManager,
+    );
+
+    await lazyRequests.installExportRequirements({ format: "pdf" });
+
+    expect(mockInit).toHaveBeenCalledOnce();
+    expect(waitForConnectionOpen).toHaveBeenCalledOnce();
+    expect(waitForKernelToBeInstantiated).not.toHaveBeenCalled();
+    expect(mockDelegate.installExportRequirements).toHaveBeenCalledWith({
+      format: "pdf",
+    });
+  });
+
+  it("sends instantiate without waiting for the kernel", async () => {
+    const lazyRequests = createLazyRequests(
+      mockDelegate,
+      mockGetRuntimeManager,
+    );
+    const request = {
+      objectIds: [uiElementId("obj1")],
+      values: [],
+    };
+
+    await lazyRequests.sendInstantiate(request);
+
+    expect(mockInit).toHaveBeenCalledOnce();
+    expect(waitForConnectionOpen).toHaveBeenCalledOnce();
+    expect(waitForKernelToBeInstantiated).not.toHaveBeenCalled();
+    expect(mockDelegate.sendInstantiate).toHaveBeenCalledWith(request);
+  });
+
   it("should call init once before first request", async () => {
     const lazyRequests = createLazyRequests(
       mockDelegate,

package/src/core/network/__tests__/requests-network.test.ts

@@ -143,6 +143,19 @@ describe("createNetworkRequests", () => {
       expect(mockClient.GET).toHaveBeenCalledWith("/api/export/availability");
     });
 
+    it("installExportRequirements should POST the export format", async () => {
+      const requests = createNetworkRequests();
+      await requests.installExportRequirements({ format: "pdf" });
+
+      expect(mockClient.POST).toHaveBeenCalledWith(
+        "/api/export/requirements/install",
+        expect.objectContaining({
+          body: { format: "pdf" },
+          params: expect.anything(),
+        }),
+      );
+    });
+
     it("discoverDataSources should POST to the discovery endpoint", async () => {
       const requests = createNetworkRequests();
       const request = { requestId: "discovery-request" } as any;

package/src/core/network/requests-lazy.ts

@@ -26,6 +26,10 @@ type AllRequests = EditRequests & RunRequests;
 //   executing. Use for user-initiated actions that should "just work" and
 //   kick off the kernel if needed (e.g., clicking Run).
 //
+// - startConnectionWithoutKernel: Initializes the runtime and waits for an open
+//   connection. Use for session-scoped server requests that do not need an
+//   instantiated kernel.
+//
 // - waitForConnectionOpen: Waits for an existing connection but won't start one.
 //   Use for operations that depend on a running kernel but shouldn't be the
 //   trigger to start it (e.g., saving, interrupting).
@@ -38,6 +42,7 @@ type Action =
   | "throwError"
   | "dropRequest"
   | "startConnection"
+  | "startConnectionWithoutKernel"
   | "waitForConnectionOpen"
   | "serverOnly";
 
@@ -45,7 +50,7 @@ const ACTIONS: Record<keyof AllRequests, Action> = {
   // These will start a connection if not already connected and then wait until the connection is open
   sendComponentValues: "startConnection",
   sendModelValue: "startConnection",
-  sendInstantiate: "startConnection",
+  sendInstantiate: "startConnectionWithoutKernel",
   sendRun: "startConnection",
   sendDeleteCell: "startConnection",
   sendRunScratchpad: "startConnection",
@@ -107,6 +112,9 @@ const ACTIONS: Record<keyof AllRequests, Action> = {
   getEnvironmentInfo: "serverOnly",
   getExportAvailability: "serverOnly",
 
+  // Session-scoped server operations
+  installExportRequirements: "startConnectionWithoutKernel",
+
   // Home operations throw errors
   getRecentFiles: "startConnection",
   getWorkspaceFiles: "startConnection",
@@ -186,13 +194,12 @@ export function createLazyRequests(
           await waitForKernelToBeInstantiated();
           return request(...args);
 
+        case "startConnectionWithoutKernel":
         case "startConnection":
           // Start connection and wait for it to be open
           await initOnce(runtimeManager);
           await waitForConnectionOpen();
-          if (key !== "sendInstantiate") {
-            // We don't need to wait for kernel to be instantiated if we are sending an instantiate request
-            // otherwise we will wait forever
+          if (action === "startConnection") {
             await waitForKernelToBeInstantiated();
           }
           return request(...args);

package/src/core/network/requests-network.ts

@@ -417,6 +417,14 @@ export function createNetworkRequests(): EditRequests & RunRequests {
     getExportAvailability: () => {
       return getClient().GET("/api/export/availability").then(handleResponse);
     },
+    installExportRequirements: (request) => {
+      return getClient()
+        .POST("/api/export/requirements/install", {
+          body: request,
+          params: getParams(),
+        })
+        .then(handleResponse);
+    },
     exportAsHTML: async (request) => {
       if (
         process.env.NODE_ENV === "development" ||

package/src/core/network/requests-static.ts

@@ -84,6 +84,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
     getRunningNotebooks: throwNotInEditMode,
     shutdownSession: throwNotInEditMode,
     getExportAvailability: throwNotInEditMode,
+    installExportRequirements: throwNotInEditMode,
     exportAsHTML: throwNotInEditMode,
     exportAsIPYNB: throwNotInEditMode,
     exportAsMarkdown: throwNotInEditMode,

package/src/core/network/requests-toasting.tsx

@@ -65,6 +65,7 @@ export function createErrorToastingRequests(
     getRunningNotebooks: "Failed to get running notebooks",
     shutdownSession: "Failed to shutdown session",
     getExportAvailability: "", // No toast
+    installExportRequirements: "Failed to install export requirements",
     exportAsHTML: "Failed to export HTML",
     exportAsIPYNB: "Failed to export ipynb",
     exportAsMarkdown: "Failed to export Markdown",

package/src/core/network/types.ts

@@ -29,6 +29,8 @@ export type ExportAsIPYNBRequest = schemas["ExportAsIPYNBRequest"];
 export type ExportAsScriptRequest = schemas["ExportAsScriptRequest"];
 export type ExportAsPDFRequest = schemas["ExportAsPDFRequest"];
 export type ExportAvailabilityResponse = schemas["ExportAvailabilityResponse"];
+export type InstallExportRequirementsRequest =
+  schemas["InstallExportRequirementsRequest"];
 export type UpdateCellOutputsRequest = schemas["UpdateCellOutputsRequest"];
 
 export interface ExportedFile<T extends BlobPart = BlobPart> {
@@ -223,6 +225,9 @@ export interface EditRequests {
   ) => Promise<RunningNotebooksResponse>;
   // Export requests
   getExportAvailability: () => Promise<ExportAvailabilityResponse>;
+  installExportRequirements: (
+    request: InstallExportRequirementsRequest,
+  ) => Promise<ExportAvailabilityResponse>;
   exportAsHTML: (request: ExportAsHTMLRequest) => Promise<ExportedFile<string>>;
   exportAsIPYNB: (
     request: ExportAsIPYNBRequest,

package/src/core/wasm/bridge.ts

@@ -675,6 +675,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
   getRunningNotebooks = throwNotImplemented;
   shutdownSession = throwNotImplemented;
   getExportAvailability = throwNotImplemented;
+  installExportRequirements = throwNotImplemented;
   exportAsIPYNB = throwNotImplemented;
   exportAsPDF = throwNotImplemented;
   autoExportAsHTML = throwNotImplemented;