@marimo-team/frontend 0.25.1-dev90 → 0.25.2-dev0

package/src/components/editor/output/console/__tests__/ConsoleOutput.test.tsx

@@ -120,6 +120,65 @@ describe("ConsoleOutput pdb history", () => {
     expect(newInput).toHaveValue("next");
   });
 
+  it("submits passwords without making them available to input history", () => {
+    const passwordPrompt: WithResponse<OutputMessage> = {
+      ...stdinPrompt("Password: "),
+      mimetype: "text/password",
+    };
+    const onSubmitDebugger = vi.fn();
+    const { rerender } = renderWithProvider(
+      <ConsoleOutput
+        {...defaultProps}
+        consoleOutputs={[stdinPrompt("Name: ")]}
+        onSubmitDebugger={onSubmitDebugger}
+      />,
+    );
+    const nameInput = screen.getByTestId("console-input");
+    fireEvent.change(nameInput, { target: { value: "marimo" } });
+    fireEvent.keyDown(nameInput, { key: "Enter" });
+
+    rerender(
+      <TooltipProvider>
+        <ConsoleOutput
+          {...defaultProps}
+          consoleOutputs={[stdinPrompt("Name: ", "marimo"), passwordPrompt]}
+          onSubmitDebugger={onSubmitDebugger}
+        />
+      </TooltipProvider>,
+    );
+    const input = screen.getByTestId("console-input");
+    expect(input).toHaveAttribute("type", "password");
+    fireEvent.change(input, { target: { value: "getpass-regression-secret" } });
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    expect(input).toHaveValue("getpass-regression-secret");
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+    expect(input).toHaveValue("getpass-regression-secret");
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(onSubmitDebugger).toHaveBeenLastCalledWith(
+      "getpass-regression-secret",
+      1,
+    );
+    expect(input).toHaveValue("");
+
+    rerender(
+      <TooltipProvider>
+        <ConsoleOutput
+          {...defaultProps}
+          consoleOutputs={[
+            stdinPrompt("Name: ", "marimo"),
+            { ...passwordPrompt, response: "" },
+            stdinPrompt("Name: "),
+          ]}
+        />
+      </TooltipProvider>,
+    );
+    const nextInput = screen.getByTestId("console-input");
+    fireEvent.keyDown(nextInput, { key: "ArrowUp" });
+    expect(nextInput).toHaveValue("marimo");
+    fireEvent.keyDown(nextInput, { key: "ArrowDown" });
+    expect(nextInput).toHaveValue("");
+  });
+
   it("should submit an empty string when Enter is pressed with no input", () => {
     // Many CLIs prompt "Press Enter to continue" and expect "" back.
     const onSubmitDebugger = vi.fn();

package/src/components/editor/output/console/text-rendering.tsx

@@ -256,6 +256,7 @@ export const pipInstallReplacer: Replacer = (domNode: DOMNode) => {
     );
   }
 
+  // oxlint-disable-next-line react/jsx-no-useless-fragment -- html-react-parser replacers must return a React element.
   return <>{segments}</>;
 };
 
@@ -283,6 +284,7 @@ export const urlReplacer: Replacer = (domNode: DOMNode) => {
     return undefined;
   }
 
+  // oxlint-disable-next-line react/jsx-no-useless-fragment -- html-react-parser replacers must return a React element.
   return <>{result}</>;
 };
 
@@ -331,5 +333,5 @@ export const RenderTextWithLinks = ({ text }: { text: string }) => {
     );
   }, [text]);
 
-  return <>{content}</>;
+  return content;
 };

package/src/components/editor/package-alert.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useAtomValue } from "jotai";
 import {
   BoxIcon,
   CheckIcon,
@@ -34,6 +35,7 @@ import {
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import type { PackageOperationStatus } from "@/core/kernel/messages";
 import { useRequestClient } from "@/core/network/requests";
+import { sandboxAtom } from "@/core/packages/sandbox-state";
 import { RESTART_REQUIRED_DESCRIPTION } from "@/core/packages/toast-components";
 import { isWasm } from "@/core/wasm/utils";
 import { usePackageMetadata } from "@/hooks/usePackageMetadata";
@@ -104,6 +106,7 @@ export const PackageAlert: React.FC = () => {
   const { packageAlert } = useAlerts();
   const { clearPackageAlert } = useAlertActions();
   const [userConfig] = useResolvedMarimoConfig();
+  const sandbox = useAtomValue(sandboxAtom);
   const [desiredPackageVersions, setDesiredPackageVersions] = useState<
     Record<string, string>
   >({});
@@ -132,8 +135,14 @@ export const PackageAlert: React.FC = () => {
     return null;
   }
 
+  const sandboxPackageManager =
+    packageAlert.source === "server" ? null : sandbox?.backend;
+  const packageManager =
+    sandboxPackageManager ?? userConfig.package_management.manager;
   const doesSupportVersioning =
-    userConfig.package_management.manager !== "pixi";
+    packageAlert.source === "server" ||
+    sandbox !== null ||
+    packageManager !== "pixi";
 
   if (isMissingPackageAlert(packageAlert)) {
     return (
@@ -207,7 +216,7 @@ export const PackageAlert: React.FC = () => {
               {packageAlert.isolated ? (
                 <>
                   <InstallPackagesButton
-                    manager={userConfig.package_management.manager}
+                    manager={packageManager}
                     packages={packageAlert.packages.map((pkg) => {
                       const parsed = parsePackageSpecifier(pkg);
                       const currentExtras =
@@ -219,10 +228,12 @@ export const PackageAlert: React.FC = () => {
                     source={packageAlert.source}
                   />
 
-                  {!isWasm() && (
+                  {!isWasm() && packageAlert.source !== "server" && (
                     <>
                       <span className="px-2 text-sm">with</span>{" "}
-                      <PackageManagerForm />
+                      <PackageManagerForm
+                        fixedManager={sandboxPackageManager ?? undefined}
+                      />
                     </>
                   )}
                 </>
@@ -449,7 +460,9 @@ const InstallPackagesButton = ({
   );
 };
 
-const PackageManagerForm: React.FC = () => {
+const PackageManagerForm: React.FC<{
+  fixedManager?: PackageManagerName;
+}> = ({ fixedManager }) => {
   const [config, setConfig] = useResolvedMarimoConfig();
   const { saveUserConfig } = useRequestClient();
 
@@ -490,8 +503,8 @@ const PackageManagerForm: React.FC = () => {
                   <NativeSelect
                     data-testid="install-package-manager-select"
                     onChange={(e) => field.onChange(e.target.value)}
-                    value={field.value}
-                    disabled={field.disabled}
+                    value={fixedManager ?? field.value}
+                    disabled={fixedManager !== undefined || field.disabled}
                     className="inline-flex mr-2"
                   >
                     {PackageManagerNames.map((option) => (

package/src/components/home/components.tsx

@@ -170,6 +170,7 @@ export const ResourceLinks: React.FC = () => {
             key={resource.title}
             href={resource.url}
             target="_blank"
+            rel="noreferrer"
             aria-label={`${resource.title}: ${resource.description}`}
             className="flex items-start gap-3 py-3 px-3 rounded-lg border hover:bg-accent/20 transition-colors shadow-xs"
           >

package/src/components/markdown/markdown-renderer.css

@@ -39,6 +39,6 @@
 
   ul,
   ol {
-    padding-left: 10px;
+    padding-left: 24px;
   }
 }

package/src/components/pages/run-page.tsx

@@ -50,6 +50,7 @@ const Watermark = () => {
       <a
         href={Constants.githubPage}
         target="_blank"
+        rel="noreferrer"
         className="text-sm text-(--grass-11) font-bold tracking-wide transition-colors bg-(--grass-4) hover:bg-(--grass-5) border-t border-l border-(--grass-8) px-3 py-1 rounded-tl-md flex items-center gap-2"
       >
         <span>made with marimo</span>

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

@@ -46,21 +46,21 @@ beforeAll(() => {
     };
   }
   global.IntersectionObserver ??= class {
-    observe() {
+    public observe() {
       /* noop */
     }
-    unobserve() {
+    public unobserve() {
       /* noop */
     }
-    disconnect() {
+    public disconnect() {
       /* noop */
     }
-    takeRecords() {
+    public takeRecords() {
       return [];
     }
-    root = null;
-    rootMargin = "";
-    thresholds = [];
+    public root = null;
+    public rootMargin = "";
+    public thresholds = [];
   } as unknown as typeof IntersectionObserver;
 });
 

package/src/components/slides/__tests__/minimap.test.ts

@@ -42,28 +42,28 @@ describe("useVisibleCellIds", () => {
     mutationObserveSpy = vi.fn();
 
     global.IntersectionObserver = class MockIntersectionObserver {
-      constructor(
+      public constructor(
         callback: IntersectionObserverCallback,
         _options?: IntersectionObserverInit,
       ) {
         intersectionCallback = callback;
       }
-      observe = observeSpy;
-      unobserve = vi.fn();
-      disconnect = intersectionDisconnectSpy;
-      root = null;
-      rootMargin = "";
-      thresholds = [0];
-      takeRecords = vi.fn(() => []);
+      public observe = observeSpy;
+      public unobserve = vi.fn();
+      public disconnect = intersectionDisconnectSpy;
+      public root = null;
+      public rootMargin = "";
+      public thresholds = [0];
+      public takeRecords = vi.fn(() => []);
     } as unknown as typeof IntersectionObserver;
 
     global.MutationObserver = class MockMutationObserver {
-      constructor(callback: MutationCallback) {
+      public constructor(callback: MutationCallback) {
         mutationCallback = callback;
       }
-      observe = mutationObserveSpy;
-      disconnect = mutationDisconnectSpy;
-      takeRecords = vi.fn(() => []);
+      public observe = mutationObserveSpy;
+      public disconnect = mutationDisconnectSpy;
+      public takeRecords = vi.fn(() => []);
     } as unknown as typeof MutationObserver;
   });
 

package/src/components/slides/__tests__/slide-scroll-hint.test.tsx

@@ -76,12 +76,12 @@ describe("SlideScrollContainer", () => {
     vi.stubGlobal(
       "ResizeObserver",
       class MockResizeObserver {
-        callback: ResizeObserverCallback;
-        observe = vi.fn();
-        unobserve = vi.fn();
-        disconnect = vi.fn();
+        public callback: ResizeObserverCallback;
+        public observe = vi.fn();
+        public unobserve = vi.fn();
+        public disconnect = vi.fn();
 
-        constructor(callback: ResizeObserverCallback) {
+        public constructor(callback: ResizeObserverCallback) {
           this.callback = callback;
           resizeObservers.push(this);
         }
@@ -90,9 +90,9 @@ describe("SlideScrollContainer", () => {
     vi.stubGlobal(
       "MutationObserver",
       class MockMutationObserver {
-        observe = vi.fn();
-        disconnect = vi.fn();
-        takeRecords = vi.fn(() => []);
+        public observe = vi.fn();
+        public disconnect = vi.fn();
+        public takeRecords = vi.fn(() => []);
       },
     );
   });

package/src/components/static-html/__tests__/share-modal.test.tsx

@@ -0,0 +1,154 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Dialog } from "@/components/ui/dialog";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ShareStaticNotebookModal } from "../share-modal";
+import { stageForPublish } from "../stage-for-publish";
+
+const exportAsHTML = vi.fn();
+
+vi.mock("@/core/network/requests", () => ({
+  useRequestClient: () => ({ exportAsHTML }),
+}));
+vi.mock("@/core/export/layout", () => ({
+  getExportLayout: vi.fn().mockResolvedValue(undefined),
+}));
+vi.mock("@/core/static/virtual-file-tracker", () => ({
+  VirtualFileTracker: { INSTANCE: { filenames: () => [] } },
+}));
+vi.mock("../stage-for-publish", () => ({
+  stageForPublish: vi.fn(),
+}));
+
+const stageForPublishMock = vi.mocked(stageForPublish);
+const CLAIM_URL = "https://claim.example/abc";
+
+function wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <TooltipProvider>
+      <Dialog open={true}>{children}</Dialog>
+    </TooltipProvider>
+  );
+}
+
+describe("ShareStaticNotebookModal", () => {
+  const onClose = vi.fn();
+  const windowOpen = vi.fn<typeof window.open>();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.stubGlobal("open", windowOpen);
+    exportAsHTML.mockResolvedValue({
+      contents: "<html></html>",
+      filename: "nb.html",
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  function renderModal() {
+    return render(<ShareStaticNotebookModal onClose={onClose} />, {
+      wrapper,
+    });
+  }
+
+  it("exports with CDN assets, opens the claim page, and keeps the link in the dialog", async () => {
+    stageForPublishMock.mockResolvedValue(CLAIM_URL);
+    renderModal();
+
+    fireEvent.click(screen.getByTestId("share-static-notebook-button"));
+
+    const link = await screen.findByTestId("open-claim-page-link");
+    expect(link).toHaveAttribute("href", CLAIM_URL);
+    expect(link).toHaveAttribute("rel", "noopener noreferrer");
+    expect(link).toHaveAttribute("target", "_blank");
+
+    expect(windowOpen).toHaveBeenCalledWith(
+      CLAIM_URL,
+      "_blank",
+      "noopener,noreferrer",
+    );
+    expect(exportAsHTML).toHaveBeenCalledWith(
+      expect.objectContaining({
+        includeCode: true,
+        download: false,
+        assetUrl: expect.stringContaining("cdn.jsdelivr.net"),
+      }),
+    );
+    expect(stageForPublishMock).toHaveBeenCalledWith(
+      "nb.html",
+      "<html></html>",
+    );
+    // The dialog stays open so the link survives a blocked popup.
+    expect(onClose).not.toHaveBeenCalled();
+    expect(
+      screen.queryByTestId("share-static-notebook-button"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("closes from the staged view via Done", async () => {
+    stageForPublishMock.mockResolvedValue(CLAIM_URL);
+    renderModal();
+
+    fireEvent.click(screen.getByTestId("share-static-notebook-button"));
+    fireEvent.click(
+      await screen.findByTestId("done-share-static-notebook-button"),
+    );
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows the failure in the dialog and allows retrying", async () => {
+    stageForPublishMock
+      .mockRejectedValueOnce(new Error("Too many uploads, try again later"))
+      .mockResolvedValueOnce(CLAIM_URL);
+    renderModal();
+
+    fireEvent.click(screen.getByTestId("share-static-notebook-button"));
+
+    const error = await screen.findByTestId("share-static-notebook-error");
+    expect(error).toHaveTextContent(
+      "Publish failed: Too many uploads, try again later",
+    );
+    expect(windowOpen).not.toHaveBeenCalled();
+    expect(onClose).not.toHaveBeenCalled();
+
+    const retry = screen.getByTestId("share-static-notebook-button");
+    expect(retry).toHaveTextContent("Try again");
+    expect(retry).toBeEnabled();
+    fireEvent.click(retry);
+
+    expect(await screen.findByTestId("open-claim-page-link")).toHaveAttribute(
+      "href",
+      CLAIM_URL,
+    );
+  });
+
+  it("disables both buttons while staging", async () => {
+    let resolveStage: (url: string) => void = () => undefined;
+    stageForPublishMock.mockImplementation(
+      () =>
+        new Promise<string>((resolve) => {
+          resolveStage = resolve;
+        }),
+    );
+    renderModal();
+
+    fireEvent.click(screen.getByTestId("share-static-notebook-button"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("share-static-notebook-button")).toBeDisabled();
+    });
+    expect(
+      screen.getByTestId("cancel-share-static-notebook-button"),
+    ).toBeDisabled();
+
+    resolveStage(CLAIM_URL);
+    await screen.findByTestId("open-claim-page-link");
+  });
+});

package/src/components/static-html/__tests__/stage-for-publish.test.ts

@@ -0,0 +1,111 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MAX_PUBLISH_BYTES, stageForPublish } from "../stage-for-publish";
+
+// Opaque to the client; the shapes here are deliberately not molab's.
+const PENDING = {
+  pendingId: "id-1",
+  presignedUrl: "https://upload.example/put?token=abc",
+  claimUrl: "https://claim.example/abc",
+  expiresAt: "2026-01-01T00:00:00Z",
+};
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+describe("stageForPublish", () => {
+  const fetchMock = vi.fn<typeof fetch>();
+
+  beforeEach(() => {
+    vi.stubGlobal("fetch", fetchMock);
+  });
+
+  afterEach(() => {
+    fetchMock.mockReset();
+    vi.unstubAllGlobals();
+  });
+
+  it("reserves a pending upload, PUTs the export, and returns the claim URL", async () => {
+    fetchMock
+      .mockResolvedValueOnce(jsonResponse(PENDING))
+      .mockResolvedValueOnce(new Response(null, { status: 200 }));
+
+    const claimUrl = await stageForPublish("nb.html", "<html>hi</html>");
+
+    expect(claimUrl).toBe(PENDING.claimUrl);
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+
+    const [stageUrl, stageInit] = fetchMock.mock.calls[0];
+    expect(String(stageUrl)).toMatch(/\/api\/artifacts\/pending$/);
+    expect(stageInit?.method).toBe("POST");
+    expect(JSON.parse(String(stageInit?.body))).toEqual({
+      fileName: "nb.html",
+      fileSize: new Blob(["<html>hi</html>"]).size,
+    });
+
+    const [putUrl, putInit] = fetchMock.mock.calls[1];
+    expect(putUrl).toBe(PENDING.presignedUrl);
+    expect(putInit?.method).toBe("PUT");
+    expect(putInit?.body).toBeInstanceOf(Blob);
+  });
+
+  it("surfaces the server's error message when staging is rejected", async () => {
+    fetchMock.mockResolvedValueOnce(
+      jsonResponse({ error: "Only .html or .htm files are supported" }, 400),
+    );
+
+    await expect(stageForPublish("nb.txt", "x")).rejects.toThrow(
+      "Only .html or .htm files are supported",
+    );
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("explains a 429 when the body carries no message", async () => {
+    fetchMock.mockResolvedValueOnce(new Response("", { status: 429 }));
+
+    await expect(stageForPublish("nb.html", "x")).rejects.toThrow(
+      "Too many uploads, try again later",
+    );
+  });
+
+  it("falls back to a generic message for other bodiless failures", async () => {
+    fetchMock.mockResolvedValueOnce(new Response("", { status: 500 }));
+
+    await expect(stageForPublish("nb.html", "x")).rejects.toThrow(
+      "Failed to prepare the upload",
+    );
+  });
+
+  it("fails when the presigned PUT is rejected", async () => {
+    fetchMock
+      .mockResolvedValueOnce(jsonResponse(PENDING))
+      .mockResolvedValueOnce(new Response(null, { status: 403 }));
+
+    await expect(stageForPublish("nb.html", "x")).rejects.toThrow(
+      "Failed to upload the notebook export",
+    );
+  });
+
+  it("rejects exports over the size limit before touching the network", async () => {
+    // Stub Blob so the test doesn't allocate 100 MB.
+    const RealBlob = globalThis.Blob;
+    vi.stubGlobal(
+      "Blob",
+      class extends RealBlob {
+        override get size() {
+          return MAX_PUBLISH_BYTES + 1;
+        }
+      },
+    );
+
+    await expect(stageForPublish("nb.html", "x")).rejects.toThrow(
+      "File is too large. Maximum size is 100 MB.",
+    );
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+});