@marimo-team/frontend 0.19.7-dev35 → 0.19.7-dev37

package/src/components/editor/chrome/wrapper/footer-items/lsp-status.tsx

@@ -0,0 +1,178 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { atom, useAtomValue, useSetAtom } from "jotai";
+import { AlertCircleIcon, CheckCircle2Icon } from "lucide-react";
+import type React from "react";
+import { Spinner } from "@/components/icons/spinner";
+import { Tooltip } from "@/components/ui/tooltip";
+import { toast } from "@/components/ui/use-toast";
+import { API } from "@/core/network/api";
+import { connectionAtom } from "@/core/network/connection";
+import type {
+  LspHealthResponse,
+  LspRestartRequest,
+  LspRestartResponse,
+} from "@/core/network/types";
+import { isAppConnected } from "@/core/websocket/connection-utils";
+import { useAsyncData } from "@/hooks/useAsyncData";
+import { useInterval } from "@/hooks/useInterval";
+
+const CHECK_LSP_HEALTH_INTERVAL_MS = 60_000;
+
+export const lspHealthAtom = atom<LspHealthResponse | null>(null);
+
+export const LspStatus: React.FC = () => {
+  const connection = useAtomValue(connectionAtom).state;
+  const setLspHealth = useSetAtom(lspHealthAtom);
+
+  const { isFetching, data, refetch } = useAsyncData(async () => {
+    if (!isAppConnected(connection)) {
+      return null;
+    }
+
+    try {
+      const health = await API.get<LspHealthResponse>("/lsp/health");
+      setLspHealth(health);
+      return health;
+    } catch {
+      return null;
+    }
+  }, [connection]);
+
+  useInterval(refetch, {
+    delayMs: isAppConnected(connection) ? CHECK_LSP_HEALTH_INTERVAL_MS : null,
+    whenVisible: true,
+  });
+
+  const handleRestart = async () => {
+    try {
+      const result = await API.post<LspRestartRequest, LspRestartResponse>(
+        "/lsp/restart",
+        {},
+      );
+
+      if (result.success) {
+        toast({
+          title: "LSP Servers Restarted",
+          description:
+            result.restarted.length > 0
+              ? `Restarted: ${result.restarted.join(", ")}`
+              : "No servers needed restart",
+        });
+      } else {
+        toast({
+          variant: "danger",
+          title: "LSP Restart Failed",
+          description: Object.entries(result.errors ?? {})
+            .map(([k, v]) => `${k}: ${v}`)
+            .join("\n"),
+        });
+      }
+
+      // Refresh health status
+      refetch();
+    } catch (error) {
+      toast({
+        variant: "danger",
+        title: "LSP Restart Failed",
+        description: error instanceof Error ? error.message : "Unknown error",
+      });
+    }
+  };
+
+  // Don't show if no LSP servers are configured
+  if (!data || data.servers.length === 0) {
+    return null;
+  }
+
+  const getStatusIcon = () => {
+    if (isFetching) {
+      return <Spinner size="small" />;
+    }
+
+    if (!data) {
+      return <AlertCircleIcon className="w-4 h-4" />;
+    }
+
+    switch (data.status) {
+      case "healthy":
+        return <CheckCircle2Icon className="w-4 h-4 text-(--green-9)" />;
+      case "degraded":
+        return <AlertCircleIcon className="w-4 h-4 text-(--yellow-11)" />;
+      case "unhealthy":
+        return <AlertCircleIcon className="w-4 h-4 text-(--yellow-11)" />;
+    }
+  };
+
+  const getServerStatusDisplay = (
+    status: "starting" | "running" | "stopped" | "crashed" | "unresponsive",
+    lastPingMs: number | null | undefined,
+  ) => {
+    switch (status) {
+      case "running":
+        return `✓ OK${lastPingMs == null ? "" : ` (${lastPingMs.toFixed(0)}ms)`}`;
+      case "starting":
+        return "⋯ Starting";
+      case "stopped":
+        return "✗ Stopped";
+      case "crashed":
+        return "✗ Crashed";
+      case "unresponsive":
+        return "✗ Not responding";
+    }
+  };
+
+  const getServerStatusColor = (
+    status: "starting" | "running" | "stopped" | "crashed" | "unresponsive",
+  ) => {
+    switch (status) {
+      case "running":
+        return "text-(--green-9)";
+      case "starting":
+        return "text-(--yellow-11)";
+      default:
+        return "text-(--red-9)";
+    }
+  };
+
+  const tooltipContent = (
+    <div className="text-sm">
+      <b>LSP Status</b>
+      <div className="mt-1 text-xs space-y-1">
+        {data?.servers.map((server) => (
+          <div key={server.serverId} className="flex justify-between gap-2">
+            <span>{server.serverId}</span>
+            <span className={getServerStatusColor(server.status)}>
+              {getServerStatusDisplay(server.status, server.lastPingMs)}
+            </span>
+          </div>
+        ))}
+      </div>
+      {data?.status === "healthy" ? null : (
+        <div className="mt-2 text-xs text-muted-foreground">
+          Click to restart failed servers
+        </div>
+      )}
+    </div>
+  );
+
+  const handleClick = () => {
+    if (data?.status !== "healthy") {
+      void handleRestart();
+    }
+  };
+
+  return (
+    <Tooltip content={tooltipContent} data-testid="footer-lsp-status">
+      <button
+        type="button"
+        onClick={handleClick}
+        className="p-1 hover:bg-accent rounded flex items-center gap-1.5 text-xs text-muted-foreground"
+        data-testid="lsp-status"
+      >
+        {getStatusIcon()}
+        <span>LSP</span>
+      </button>
+    </Tooltip>
+  );
+};

package/src/components/editor/chrome/wrapper/footer.tsx

@@ -57,7 +57,7 @@ export const Footer: React.FC = () => {
   });
 
   return (
-    <footer className="h-10 py-1 gap-1 bg-background flex items-center text-muted-foreground text-md pl-2 pr-1 border-t border-border select-none no-print text-sm z-50 print:hidden hide-on-fullscreen overflow-x-auto overflow-y-hidden scrollbar-thin">
+    <footer className="h-10 py-1 gap-1 bg-background flex items-center text-muted-foreground text-md pl-2 pr-1 border-t border-border select-none print:hidden text-sm z-50 hide-on-fullscreen overflow-x-auto overflow-y-hidden scrollbar-thin">
       <FooterItem
         className="h-full"
         tooltip={

package/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -115,7 +115,7 @@ export const Sidebar: React.FC = () => {
   ]);
 
   return (
-    <div className="h-full pt-4 pb-1 px-1 flex flex-col items-start text-muted-foreground text-md select-none no-print text-sm z-50 dark:bg-background print:hidden hide-on-fullscreen">
+    <div className="h-full pt-4 pb-1 px-1 flex flex-col items-start text-muted-foreground text-md select-none text-sm z-50 dark:bg-background print:hidden hide-on-fullscreen">
       <ReorderableList<PanelDescriptor>
         value={sidebarItems}
         setValue={handleSetSidebarItems}

package/src/components/editor/controls/Controls.tsx

@@ -212,7 +212,7 @@ const StopControlButton = ({
 };
 
 const topRightControls =
-  "absolute top-3 right-5 m-0 flex items-center gap-2 min-h-[28px] no-print pointer-events-auto z-30 print:hidden";
+  "absolute top-3 right-5 m-0 flex items-center gap-2 min-h-[28px] print:hidden pointer-events-auto z-30";
 
 const bottomRightControls =
-  "absolute bottom-5 right-5 flex flex-col gap-2 items-center no-print pointer-events-auto z-30 print:hidden";
+  "absolute bottom-5 right-5 flex flex-col gap-2 items-center print:hidden pointer-events-auto z-30";

package/src/components/editor/controls/notebook-menu-dropdown.tsx

@@ -111,7 +111,7 @@ export const NotebookMenuDropdown: React.FC<Props> = ({
       <DropdownMenuTrigger asChild={true} disabled={disabled}>
         {button}
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="no-print w-[240px]">
+      <DropdownMenuContent align="end" className="print:hidden w-[240px]">
         {actions.map((action) => {
           if (action.hidden || action.redundant) {
             return null;

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

@@ -510,7 +510,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
     return (
       <DropdownMenuContent
         align="end"
-        className="no-print w-[220px]"
+        className="print:hidden w-[220px]"
         onClick={(e) => e.stopPropagation()}
         onCloseAutoFocus={(e) => e.preventDefault()}
       >

package/src/components/editor/header/status.tsx

@@ -34,7 +34,7 @@ export const StatusOverlay: React.FC<{
   );
 };
 
-const topLeftStatus = "no-print pointer-events-auto hover:cursor-pointer";
+const topLeftStatus = "print:hidden pointer-events-auto hover:cursor-pointer";
 
 const DisconnectedIcon = () => (
   <Tooltip content="App disconnected">

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

@@ -41,7 +41,11 @@ import { downloadAsHTML } from "@/core/static/download-html";
 import { isStaticNotebook } from "@/core/static/static-state";
 import { isWasm } from "@/core/wasm/utils";
 import { cn } from "@/utils/cn";
-import { downloadBlob, downloadHTMLAsImage } from "@/utils/download";
+import {
+  ADD_PRINTING_CLASS,
+  downloadBlob,
+  downloadHTMLAsImage,
+} from "@/utils/download";
 import { Filenames } from "@/utils/filenames";
 import { FloatingOutline } from "../../chrome/panels/outline/floating-outline";
 import { cellDomProps } from "../../common";
@@ -185,7 +189,12 @@ const ActionButtons: React.FC<{
     if (!app) {
       return;
     }
-    await downloadHTMLAsImage({ element: app, filename: document.title });
+    await downloadHTMLAsImage({
+      element: app,
+      filename: document.title,
+      // Add body.printing ONLY when converting the whole notebook to a screenshot
+      prepare: ADD_PRINTING_CLASS,
+    });
   };
 
   const handleDownloadAsHTML = async () => {
@@ -271,7 +280,7 @@ const ActionButtons: React.FC<{
     <div
       data-testid="notebook-actions-dropdown"
       className={cn(
-        "right-0 top-0 z-50 m-4 no-print flex gap-2 print:hidden",
+        "right-0 top-0 z-50 m-4 print:hidden flex gap-2",
         // If the notebook is static, we have a banner at the top, so
         // we can't use fixed positioning. Ideally this is sticky, but the
         // current dom structure makes that difficult.
@@ -284,7 +293,7 @@ const ActionButtons: React.FC<{
             <MoreHorizontalIcon className="w-4 h-4" />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="no-print w-[220px]">
+        <DropdownMenuContent align="end" className="print:hidden w-[220px]">
           {actions}
         </DropdownMenuContent>
       </DropdownMenu>

package/src/components/home/components.tsx

@@ -80,7 +80,7 @@ export const OpenTutorialDropDown: React.FC = () => {
           <CaretDownIcon className="w-3 h-3 ml-1" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent side="bottom" align="end" className="no-print">
+      <DropdownMenuContent side="bottom" align="end" className="print:hidden">
         {Objects.entries(TUTORIALS).map(
           ([tutorialId, [label, Icon, description]]) => (
             <DropdownMenuItem

package/src/components/static-html/static-banner.tsx

@@ -36,7 +36,7 @@ export const StaticBanner: React.FC = () => {
 
   return (
     <div
-      className="px-4 py-2 bg-(--sky-2) border-b border-(--sky-7) text-(--sky-11) flex justify-between items-center gap-4 no-print text-sm"
+      className="px-4 py-2 bg-(--sky-2) border-b border-(--sky-7) text-(--sky-11) flex justify-between items-center gap-4 print:hidden text-sm"
       data-testid="static-notebook-banner"
     >
       <span>

package/src/components/ui/dropdown-menu.tsx

@@ -83,7 +83,7 @@ const DropdownMenuContent = React.forwardRef<
         sideOffset={sideOffset}
         className={cn(
           menuContentCommon(),
-          "animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden",
           scrollable && "overflow-auto",
           className,
         )}

package/src/components/ui/table.tsx

@@ -7,7 +7,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="w-full overflow-auto scrollbar-thin flex-1">
+  <div className="w-full overflow-auto scrollbar-thin flex-1 print:overflow-hidden">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}

package/src/core/export/__tests__/hooks.test.ts

@@ -10,6 +10,7 @@ import { CellOutputId } from "@/core/cells/ids";
 import type { CellRuntimeState } from "@/core/cells/types";
 import { ProgressState } from "@/utils/progress";
 import {
+  captureTracker,
   updateCellOutputsWithScreenshots,
   useEnrichCellOutputs,
 } from "../hooks";
@@ -52,6 +53,7 @@ describe("useEnrichCellOutputs", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     store = createStore();
+    captureTracker.reset();
   });
 
   const wrapper = ({ children }: { children: ReactNode }) =>
@@ -103,7 +105,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     expect(output).toEqual({});
     expect(document.getElementById).not.toHaveBeenCalled();
@@ -135,7 +137,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     expect(document.getElementById).toHaveBeenCalledWith(
       CellOutputId.create(cellId),
@@ -152,50 +154,6 @@ describe("useEnrichCellOutputs", () => {
     });
   });
 
-  it("should pass snappy=true to toPng with includeStyleProperties", async () => {
-    const cellId = "cell-1" as CellId;
-    const mockElement = document.createElement("div");
-    const mockDataUrl = "data:image/png;base64,mockImageData";
-
-    // Mock document.getElementById
-    vi.spyOn(document, "getElementById").mockReturnValue(mockElement);
-    vi.mocked(toPng).mockResolvedValue(mockDataUrl);
-
-    setCellsRuntime(
-      createMockCellRuntimes({
-        [cellId]: {
-          output: {
-            channel: "output",
-            mimetype: "text/html",
-            data: "<div>Chart</div>",
-            timestamp: 0,
-          },
-        },
-      }),
-    );
-
-    const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
-
-    const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: true });
-
-    expect(document.getElementById).toHaveBeenCalledWith(
-      CellOutputId.create(cellId),
-    );
-    // When snappy=true, includeStyleProperties should be set
-    expect(toPng).toHaveBeenCalledWith(
-      mockElement,
-      expect.objectContaining({
-        filter: expect.any(Function),
-        onImageErrorHandler: expect.any(Function),
-        includeStyleProperties: expect.any(Array),
-      }),
-    );
-    expect(output).toEqual({
-      [cellId]: ["image/png", mockDataUrl],
-    });
-  });
-
   it("should skip cells where output has not changed", async () => {
     const cellId = "cell-1" as CellId;
     const mockElement = document.createElement("div");
@@ -224,7 +182,7 @@ describe("useEnrichCellOutputs", () => {
 
     // First call - should capture
     let takeScreenshots = result.current;
-    let output = await takeScreenshots({ progress, snappy: false });
+    let output = await takeScreenshots({ progress });
     expect(output).toEqual({ [cellId]: ["image/png", mockDataUrl] });
     expect(toPng).toHaveBeenCalledTimes(1);
 
@@ -233,7 +191,7 @@ describe("useEnrichCellOutputs", () => {
 
     // Second call with same output - should not capture again
     takeScreenshots = result.current;
-    output = await takeScreenshots({ progress, snappy: false });
+    output = await takeScreenshots({ progress });
     expect(output).toEqual({}); // Empty because output hasn't changed
     expect(toPng).toHaveBeenCalledTimes(1); // Still only 1 call
   });
@@ -262,7 +220,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     expect(output).toEqual({}); // Failed screenshot should be filtered out
     expect(Logger.error).toHaveBeenCalledWith(
@@ -271,6 +229,50 @@ describe("useEnrichCellOutputs", () => {
     );
   });
 
+  it("should retry failed screenshots on next call", async () => {
+    const cellId = "cell-1" as CellId;
+    const mockElement = document.createElement("div");
+    const error = new Error("Screenshot failed");
+    const mockDataUrl = "data:image/png;base64,retrySuccess";
+
+    vi.spyOn(document, "getElementById").mockReturnValue(mockElement);
+    // First call fails, second call succeeds
+    vi.mocked(toPng)
+      .mockRejectedValueOnce(error)
+      .mockResolvedValueOnce(mockDataUrl);
+
+    setCellsRuntime(
+      createMockCellRuntimes({
+        [cellId]: {
+          output: {
+            channel: "output",
+            mimetype: "text/html",
+            data: "<div>Chart</div>",
+            timestamp: 0,
+          },
+        },
+      }),
+    );
+
+    const { result, rerender } = renderHook(() => useEnrichCellOutputs(), {
+      wrapper,
+    });
+
+    // First call - screenshot fails
+    let takeScreenshots = result.current;
+    let output = await takeScreenshots({ progress });
+    expect(output).toEqual({});
+    expect(Logger.error).toHaveBeenCalled();
+
+    rerender();
+
+    // Second call - should retry since the first one failed
+    takeScreenshots = result.current;
+    output = await takeScreenshots({ progress });
+    expect(output).toEqual({ [cellId]: ["image/png", mockDataUrl] });
+    expect(toPng).toHaveBeenCalledTimes(2);
+  });
+
   it("should handle missing DOM elements", async () => {
     const cellId = "cell-1" as CellId;
 
@@ -292,7 +294,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     expect(output).toEqual({});
     expect(Logger.error).toHaveBeenCalledWith(
@@ -341,7 +343,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     expect(output).toEqual({
       [cell1]: ["image/png", mockDataUrl1],
@@ -387,7 +389,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     // Only the successful screenshot should be in the result
     expect(output).toEqual({
@@ -429,13 +431,13 @@ describe("useEnrichCellOutputs", () => {
 
     // First screenshot
     let takeScreenshots = result.current;
-    let output = await takeScreenshots({ progress, snappy: false });
+    let output = await takeScreenshots({ progress });
     expect(output).toEqual({ [cellId]: ["image/png", mockDataUrl1] });
 
     // Second call - same output, should not be captured
     rerender();
     takeScreenshots = result.current;
-    output = await takeScreenshots({ progress, snappy: false });
+    output = await takeScreenshots({ progress });
     expect(output).toEqual({});
 
     // Third call - output changed, should be captured
@@ -454,7 +456,7 @@ describe("useEnrichCellOutputs", () => {
 
     rerender();
     takeScreenshots = result.current;
-    output = await takeScreenshots({ progress, snappy: false });
+    output = await takeScreenshots({ progress });
     expect(output).toEqual({ [cellId]: ["image/png", mockDataUrl2] });
     expect(toPng).toHaveBeenCalledTimes(2);
   });
@@ -494,7 +496,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     // None of these should trigger screenshots
     expect(output).toEqual({});
@@ -519,7 +521,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     expect(output).toEqual({});
     expect(document.getElementById).not.toHaveBeenCalled();
@@ -551,7 +553,7 @@ describe("useEnrichCellOutputs", () => {
     const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
 
     const takeScreenshots = result.current;
-    const output = await takeScreenshots({ progress, snappy: false });
+    const output = await takeScreenshots({ progress });
 
     // Verify the exact return type structure
     expect(output).toHaveProperty(cellId);