@marimo-team/islands 0.24.3-dev4 → 0.24.3-dev41

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

@@ -42,7 +42,9 @@ export const BackendConnectionStatus: React.FC = () => {
   const { isFetching, error, data, refetch } = useAsyncData(async () => {
     // If the connection is not connected, return
     if (!isAppConnected(connection)) {
-      setConnectionStatus("disconnected");
+      setConnectionStatus(
+        isAppConnecting(connection) ? "connecting" : "disconnected",
+      );
       return;
     }
 

package/src/components/editor/code/__tests__/readonly-diff.test.tsx

@@ -0,0 +1,65 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ReadonlyDiff } from "../readonly-diff";
+
+const mocks = vi.hoisted(() => ({
+  mergeView: vi.fn(),
+  useTheme: vi.fn(),
+}));
+
+vi.mock("@codemirror/merge", () => ({
+  unifiedMergeView: mocks.mergeView,
+}));
+
+vi.mock("@uiw/react-codemirror", () => ({
+  default: ({ theme, value }: { theme: string; value: string }) => (
+    <div data-testid="code-mirror" data-theme={theme} data-value={value} />
+  ),
+}));
+
+vi.mock("@/theme/useTheme", () => ({
+  useTheme: mocks.useTheme,
+}));
+
+describe("ReadonlyDiff", () => {
+  beforeEach(() => {
+    mocks.mergeView.mockReset();
+    mocks.mergeView.mockReturnValue([]);
+    mocks.useTheme.mockReturnValue({ theme: "light" });
+  });
+
+  it("updates modified code without rebuilding the diff extensions", () => {
+    const { rerender } = render(
+      <ReadonlyDiff original="before" modified="first revision" />,
+    );
+
+    expect(screen.getByTestId("code-mirror")).toHaveAttribute(
+      "data-value",
+      "first revision",
+    );
+    expect(mocks.mergeView).toHaveBeenCalledTimes(1);
+
+    rerender(<ReadonlyDiff original="before" modified="second revision" />);
+
+    expect(screen.getByTestId("code-mirror")).toHaveAttribute(
+      "data-value",
+      "second revision",
+    );
+    expect(mocks.mergeView).toHaveBeenCalledTimes(1);
+  });
+
+  it("rebuilds diff extensions when the original code changes", () => {
+    const { rerender } = render(
+      <ReadonlyDiff original="before" modified="after" />,
+    );
+
+    rerender(<ReadonlyDiff original="earlier" modified="after" />);
+
+    expect(mocks.mergeView).toHaveBeenCalledTimes(2);
+    expect(mocks.mergeView).toHaveBeenLastCalledWith(
+      expect.objectContaining({ original: "earlier" }),
+    );
+  });
+});

package/src/components/editor/code/readonly-diff.tsx

@@ -21,7 +21,7 @@ export const ReadonlyDiff = memo(
           },
         }),
       ];
-    }, [props.original, props.modified, theme]);
+    }, [props.original]);
 
     return (
       <CodeMirror

package/src/components/editor/dynamic-favicon.tsx

@@ -22,6 +22,19 @@ async function getFaviconUrl(key: FaviconKey): Promise<string> {
   return FAVICON_PATHS[key];
 }
 
+function getOrCreateFavicon(): HTMLLinkElement {
+  const existingFavicon =
+    document.querySelector<HTMLLinkElement>("link[rel~='icon']");
+  if (existingFavicon) {
+    return existingFavicon;
+  }
+
+  const favicon = document.createElement("link");
+  favicon.rel = "icon";
+  document.head.append(favicon);
+  return favicon;
+}
+
 interface Props {
   isRunning: boolean;
 }
@@ -64,16 +77,9 @@ export const DynamicFavicon = (props: Props) => {
   const { isRunning } = props;
   const errors = useCellErrors();
 
-  let favicon: HTMLLinkElement | null =
-    document.querySelector("link[rel~='icon']");
-
-  if (!favicon) {
-    favicon = document.createElement("link");
-    favicon.rel = "icon";
-    document.getElementsByTagName("head")[0].append(favicon);
-  }
-
   useEffect(() => {
+    const favicon = getOrCreateFavicon();
+
     // No change on startup (autorun enabled or not)
     // Treat the default marimo favicon as "idle"
     if (!isRunning && favicon.href.includes("favicon")) {
@@ -105,7 +111,7 @@ export const DynamicFavicon = (props: Props) => {
     };
 
     updateFavicon();
-  }, [isRunning, errors, favicon]);
+  }, [isRunning, errors]);
 
   // Send user notification when run has completed
   const prevRunning = usePrevious(isRunning) ?? isRunning;
@@ -118,6 +124,7 @@ export const DynamicFavicon = (props: Props) => {
   // When notebook comes back in focus, reset favicon
   useEventListener(window, "focus", async (_) => {
     if (!isRunning) {
+      const favicon = getOrCreateFavicon();
       favicon.href = await getFaviconUrl("idle");
     }
   });

package/src/components/editor/file-tree/__tests__/tree-actions.test.tsx

@@ -0,0 +1,54 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import type React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { RefreshIconButton } from "../tree-actions";
+
+vi.mock("@/components/ui/tooltip", () => ({
+  Tooltip: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+describe("RefreshIconButton", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("spins for at least 500ms after a refresh completes", async () => {
+    const onClick = vi.fn().mockResolvedValue(undefined);
+    const { container } = render(<RefreshIconButton onClick={onClick} />);
+
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(container.querySelector("svg")).toHaveClass("animate-[spin_0.5s]");
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(500);
+    });
+
+    expect(container.querySelector("svg")).not.toHaveClass(
+      "animate-[spin_0.5s]",
+    );
+  });
+
+  it("uses the latest refresh callback after a rerender", async () => {
+    const initialOnClick = vi.fn().mockResolvedValue(undefined);
+    const updatedOnClick = vi.fn().mockResolvedValue(undefined);
+    const { rerender } = render(<RefreshIconButton onClick={initialOnClick} />);
+
+    rerender(<RefreshIconButton onClick={updatedOnClick} />);
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(initialOnClick).not.toHaveBeenCalled();
+    expect(updatedOnClick).toHaveBeenCalledOnce();
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(500);
+    });
+  });
+});

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

@@ -7,7 +7,7 @@ import {
   MoreVerticalIcon,
   RefreshCwIcon,
 } from "lucide-react";
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
@@ -41,19 +41,16 @@ export const RefreshIconButton: React.FC<{
 }> = ({ onClick, tooltip = "Refresh", className, iconClassName }) => {
   const [isSpinning, setIsSpinning] = useState(false);
 
-  const handleClick = useCallback(
-    async (e: React.MouseEvent) => {
-      setIsSpinning(true);
-      // Artificially spin for 500ms to show the user that the button is working.
-      const minDelay = new Promise<void>((r) => setTimeout(r, 500));
-      try {
-        await Promise.all([onClick(e), minDelay]);
-      } finally {
-        setIsSpinning(false);
-      }
-    },
-    [onClick],
-  );
+  const handleClick = async (e: React.MouseEvent) => {
+    setIsSpinning(true);
+    // Artificially spin for 500ms to show the user that the button is working.
+    const minDelay = new Promise<void>((r) => setTimeout(r, 500));
+    try {
+      await Promise.all([onClick(e), minDelay]);
+    } finally {
+      setIsSpinning(false);
+    }
+  };
 
   const button = (
     <Button

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

@@ -66,24 +66,12 @@ describe("StatusOverlay disconnect indicator", () => {
     expect((button as HTMLButtonElement).disabled).toBe(true);
   });
 
-  it.each([
-    [
-      WebSocketClosedReason.KERNEL_STARTUP_ERROR,
-      "Failed to start kernel sandbox",
-    ],
-  ])(
-    "renders a disabled button for non-recoverable close reason %s",
-    (code, reason) => {
-      const onReconnect = vi.fn();
-      const { getByTestId } = renderOverlay(
-        { state: WebSocketState.CLOSED, code, reason },
-        onReconnect,
-      );
-
-      const button = getByTestId("disconnected-indicator") as HTMLButtonElement;
-      expect(button.disabled).toBe(true);
-      fireEvent.click(button);
-      expect(onReconnect).not.toHaveBeenCalled();
-    },
-  );
+  it("leaves editor startup failures to the inline notice", () => {
+    const { queryByTestId } = renderOverlay({
+      state: WebSocketState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+      reason: "Failed to start kernel sandbox",
+    });
+    expect(queryByTestId("disconnected-indicator")).not.toBeInTheDocument();
+  });
 });

package/src/components/editor/header/filename-input.tsx

@@ -53,6 +53,8 @@ export const FilenameInput = ({
   const skipReset = useRef<boolean>(false);
 
   useEffect(() => {
+    // TODO: Reset the editable draft without synchronizing state in an effect.
+    // oxlint-disable-next-line react/no-deriving-state-in-effects -- Reset the editable draft when the external filename changes.
     setSearchValue(initialValue);
   }, [initialValue]);
 

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

@@ -20,10 +20,12 @@ export const StatusOverlay: React.FC<{
   onReconnect?: () => void;
 }> = ({ connection, isRunning, onReconnect }) => {
   const { mode } = useAtomValue(viewStateAtom);
-  const isClosed = connection.state === WebSocketState.CLOSED;
+  const isClosed =
+    connection.state === WebSocketState.CLOSED &&
+    (mode === "read" ||
+      connection.code !== WebSocketClosedReason.KERNEL_STARTUP_ERROR);
   const isOpen = connection.state === WebSocketState.OPEN;
-  // Only KERNEL_DISCONNECTED is recoverable by a retry. KERNEL_STARTUP_ERROR
-  // would deterministically fail the same way.
+  // Editor startup failures have their own recovery UI.
   const canReconnect =
     isClosed && connection.code === WebSocketClosedReason.KERNEL_DISCONNECTED;
 

package/src/components/editor/notebook-cell.tsx

@@ -451,7 +451,8 @@ const EditableCellComponent = ({
       cellRuntime.staleInputs) &&
     !cellRuntime.interrupted;
 
-  // Callback to get the editor view.
+  // This getter is called during render, so useEvent cannot be used here.
+  // oxlint-disable-next-line react/preserve-manual-memoization
   const getEditorView = useCallback(() => editorView.current, [editorView]);
 
   // Use the extracted hooks
@@ -1096,7 +1097,8 @@ const SetupCellComponent = ({
       cellRuntime.staleInputs) &&
     !cellRuntime.interrupted;
 
-  // Callback to get the editor view.
+  // This getter is called during render, so useEvent cannot be used here.
+  // oxlint-disable-next-line react/preserve-manual-memoization
   const getEditorView = useCallback(() => editorView.current, [editorView]);
 
   const { isCellCodeShown, showHiddenCode } = useCellHiddenLogic({