@marimo-team/islands 0.25.2 → 0.25.3-dev100

package/src/components/debugger/debugger-code.tsx

@@ -162,6 +162,7 @@ export const DebuggerControls: React.FC<{
     <div className="flex">
       <Tooltip content="Next line">
         <Button
+          aria-label="Next line"
           variant="text"
           size="icon"
           data-testid="debugger-next-button"
@@ -173,6 +174,7 @@ export const DebuggerControls: React.FC<{
       </Tooltip>
       <Tooltip content="Continue execution">
         <Button
+          aria-label="Continue execution"
           variant="text"
           size="icon"
           data-testid="debugger-continue-button"
@@ -187,6 +189,7 @@ export const DebuggerControls: React.FC<{
       </Tooltip>
       <Tooltip content="Print stack trace">
         <Button
+          aria-label="Print stack trace"
           variant="text"
           size="icon"
           data-testid="debugger-stack-button"
@@ -198,6 +201,7 @@ export const DebuggerControls: React.FC<{
       </Tooltip>
       <Tooltip content="Help">
         <Button
+          aria-label="Debugger help"
           variant="text"
           size="icon"
           data-testid="debugger-help-button"
@@ -210,6 +214,7 @@ export const DebuggerControls: React.FC<{
       {onClear && (
         <Tooltip content="Quit and clear">
           <Button
+            aria-label="Quit and clear debugger"
             variant="text"
             size="icon"
             data-testid="debugger-clear-button"

package/src/components/dependency-graph/panels.tsx

@@ -216,11 +216,12 @@ export const GraphSelectionPanel: React.FC<{
               </Button>
             </Tooltip>
             <ConnectionCellActionsDropdown cellId={selection.id}>
-              <Button variant="ghost" size="icon">
+              <Button aria-label="Cell actions" variant="ghost" size="icon">
                 <MoreVerticalIcon className="w-4 h-4" />
               </Button>
             </ConnectionCellActionsDropdown>
             <Button
+              aria-label="Close cell details"
               variant="text"
               size="icon"
               onClick={() => {

package/src/components/editor/Output.tsx

@@ -66,7 +66,10 @@ export type OnRefactorWithAI = (opts: {
  * Renders an output based on an OutputMessage.
  */
 export const OutputRenderer: React.FC<{
-  message: Pick<OutputMessage, "channel" | "data" | "mimetype">;
+  message: Pick<
+    OutputMessage,
+    "channel" | "data" | "mimetype" | "code" | "traceback_format"
+  >;
   cellId?: CellId;
   onRefactorWithAI?: OnRefactorWithAI;
   wrapText?: boolean;
@@ -172,7 +175,9 @@ export const OutputRenderer: React.FC<{
 
     case "application/vnd.marimo+error":
       invariant(Array.isArray(data), "Expected array data");
-      return <MarimoErrorOutput cellId={cellId} errors={data} />;
+      return (
+        <MarimoErrorOutput cellId={cellId} errors={data} code={message.code} />
+      );
 
     case "application/vnd.marimo+traceback":
       invariant(
@@ -183,6 +188,8 @@ export const OutputRenderer: React.FC<{
         <MarimoTracebackOutput
           onRefactorWithAI={onRefactorWithAI}
           traceback={data}
+          tracebackFormat={message.traceback_format}
+          code={message.code}
           cellId={cellId}
         />
       );

package/src/components/editor/SortableCell.tsx

@@ -71,7 +71,6 @@ export const SortableCell = React.forwardRef(
     return (
       <SortableCellInternal
         ref={ref}
-        cellId={cellId}
         canMoveX={canMoveX}
         {...props}
         attributes={attributes}
@@ -86,7 +85,7 @@ export const SortableCell = React.forwardRef(
 );
 SortableCell.displayName = "SortableCell";
 
-interface SortableCellInternalProps extends Props {
+interface SortableCellInternalProps extends Omit<Props, "cellId"> {
   children: React.ReactNode;
   attributes: DraggableAttributes;
   listeners: SyntheticListenerMap | undefined;
@@ -99,7 +98,6 @@ interface SortableCellInternalProps extends Props {
 const SortableCellInternal = React.forwardRef(
   (
     {
-      cellId,
       canMoveX,
       children,
       attributes,

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

@@ -1,17 +1,41 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render, waitFor } from "@testing-library/react";
+import {
+  act,
+  render as renderComponent,
+  waitFor,
+} from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { useCellErrors } from "@/core/cells/cells";
+import { Provider, createStore } from "jotai";
+import type { ReactNode } from "react";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { cellId } from "@/__tests__/branded";
+import { notebookAtom } from "@/core/cells/cells";
 import { DynamicFavicon } from "../dynamic-favicon";
 
-// Mock useCellErrors hook
-vi.mock("@/core/cells/cells", () => ({
-  useCellErrors: vi.fn(),
-}));
-
 describe("DynamicFavicon", () => {
   let favicon: HTMLLinkElement;
+  let store: ReturnType<typeof createStore>;
+  const id = cellId("cell");
+
+  function render(ui: ReactNode) {
+    return renderComponent(ui, {
+      wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+    });
+  }
+
+  function setErrors() {
+    store.set(
+      notebookAtom,
+      MockNotebook.notebookStateWithErrors([
+        {
+          cellId: id,
+          cellName: "cell",
+          errorData: [MockNotebook.errors.syntax("Invalid syntax")],
+        },
+      ]),
+    );
+  }
 
   beforeEach(() => {
     document
@@ -27,15 +51,20 @@ describe("DynamicFavicon", () => {
     // Mock document.hasFocus
     vi.spyOn(document, "hasFocus").mockReturnValue(true);
 
-    // Mock useCellErrors to return no errors by default
-    (useCellErrors as ReturnType<typeof vi.fn>).mockReturnValue([]);
+    store = createStore();
+    store.set(
+      notebookAtom,
+      MockNotebook.notebookState({
+        cellData: { [id]: { code: "x = 1" } },
+      }),
+    );
   });
 
   afterEach(() => {
     document
       .querySelectorAll("link[rel~='icon']")
       .forEach((element) => element.remove());
-    vi.clearAllMocks();
+    vi.restoreAllMocks();
     vi.useRealTimers();
   });
 
@@ -67,9 +96,7 @@ describe("DynamicFavicon", () => {
   });
 
   it("should show error favicon when run completes with errors", async () => {
-    (useCellErrors as ReturnType<typeof vi.fn>).mockReturnValue([
-      { error: "mock error" },
-    ]);
+    setErrors();
 
     const { rerender } = render(<DynamicFavicon isRunning={true} />);
 
@@ -147,6 +174,72 @@ describe("DynamicFavicon", () => {
     });
   });
 
+  it("does not look up or rewrite the favicon when code changes", async () => {
+    const { rerender } = render(<DynamicFavicon isRunning={true} />);
+    await waitFor(() => expect(favicon.href).toContain("circle-play.ico"));
+    rerender(<DynamicFavicon isRunning={false} />);
+    await waitFor(() => expect(favicon.href).toContain("circle-check.ico"));
+    const lookup = vi.spyOn(document, "querySelector");
+    const write = vi.spyOn(favicon, "href", "set");
+
+    await act(async () => {
+      store.set(notebookAtom, (state) => ({
+        ...state,
+        cellData: {
+          ...state.cellData,
+          [id]: { ...state.cellData[id], code: "x = 2" },
+        },
+      }));
+    });
+
+    expect(
+      lookup.mock.calls.filter(
+        ([selector]) => selector === "link[rel~='icon']",
+      ),
+    ).toEqual([]);
+    expect(write).not.toHaveBeenCalled();
+    lookup.mockRestore();
+    write.mockRestore();
+  });
+
+  it("updates the favicon when the error count changes", async () => {
+    const { rerender } = render(<DynamicFavicon isRunning={true} />);
+    await waitFor(() => expect(favicon.href).toContain("circle-play.ico"));
+    rerender(<DynamicFavicon isRunning={false} />);
+    await waitFor(() => expect(favicon.href).toContain("circle-check.ico"));
+
+    act(() => setErrors());
+    await waitFor(() => expect(favicon.href).toContain("circle-x.ico"));
+
+    act(() =>
+      store.set(
+        notebookAtom,
+        MockNotebook.notebookState({ cellData: { [id]: {} } }),
+      ),
+    );
+    await waitFor(() => expect(favicon.href).toContain("circle-check.ico"));
+  });
+
+  it("keeps the completion icon until its own reset timer expires", async () => {
+    vi.useFakeTimers();
+    const { rerender } = render(<DynamicFavicon isRunning={true} />);
+    await act(() => vi.advanceTimersByTimeAsync(1000));
+    rerender(<DynamicFavicon isRunning={false} />);
+    await act(() => vi.advanceTimersByTimeAsync(2000));
+    expect(favicon.href).toContain("circle-check.ico");
+    await act(() => vi.advanceTimersByTimeAsync(1000));
+    expect(favicon.href).toContain("favicon.ico");
+  });
+
+  it("cancels the reset timer when unmounted", async () => {
+    vi.useFakeTimers();
+    const { unmount } = render(<DynamicFavicon isRunning={true} />);
+    await act(() => vi.advanceTimersByTimeAsync(0));
+    expect(vi.getTimerCount()).toBe(1);
+    unmount();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
   describe("notifications", () => {
     beforeEach(() => {
       vi.spyOn(document, "visibilityState", "get").mockReturnValue("hidden");
@@ -156,7 +249,7 @@ describe("DynamicFavicon", () => {
       global.Notification.permission = "granted";
     });
 
-    it("should send success notification when run completes without errors", () => {
+    it("should send success notification when run completes without errors", async () => {
       // @ts-expect-error ok in tests
       global.Notification = vi
         .fn()
@@ -172,12 +265,11 @@ describe("DynamicFavicon", () => {
 
       const { rerender } = render(<DynamicFavicon isRunning={true} />);
       rerender(<DynamicFavicon isRunning={false} />);
+      await waitFor(() => expect(Notification).toHaveBeenCalledOnce());
     });
 
-    it("should send error notification when run completes with errors", () => {
-      (useCellErrors as ReturnType<typeof vi.fn>).mockReturnValue([
-        { error: "mock error" },
-      ]);
+    it("should send error notification when run completes with errors", async () => {
+      setErrors();
 
       // @ts-expect-error ok in tests
       global.Notification = vi
@@ -194,6 +286,7 @@ describe("DynamicFavicon", () => {
 
       const { rerender } = render(<DynamicFavicon isRunning={true} />);
       rerender(<DynamicFavicon isRunning={false} />);
+      await waitFor(() => expect(Notification).toHaveBeenCalledOnce());
     });
 
     it("should not send notification when document is visible", () => {