@marimo-team/islands 0.25.3-dev28 → 0.25.3-dev284

package/src/components/editor/chrome/wrapper/pending-ai-changes-badge.tsx

@@ -0,0 +1,25 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import { stagedAICellsAtom } from "@/core/ai/staged-cells";
+import { cn } from "@/utils/cn";
+
+export function PendingAIChangesBadge({ className }: { className?: string }) {
+  const count = useAtomValue(stagedAICellsAtom).size;
+  if (count === 0) {
+    return null;
+  }
+  return (
+    <span
+      className={cn(
+        "inline-flex h-4 min-w-4 items-center justify-center rounded-full border border-border bg-muted px-1 text-[10px] leading-none tabular-nums text-foreground",
+        className,
+      )}
+    >
+      <span aria-hidden={true}>{count}</span>
+      <span className="sr-only">
+        {count} pending AI {count === 1 ? "change" : "changes"}
+      </span>
+    </span>
+  );
+}

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

@@ -7,10 +7,8 @@ import type { PropsWithChildren } from "react";
 import { useEffect, useMemo } from "react";
 import { ReorderableList } from "@/components/ui/reorderable-list";
 import { Tooltip } from "@/components/ui/tooltip";
-import {
-  cellErrorCount,
-  notebookQueuedOrRunningCountAtom,
-} from "@/core/cells/cells";
+import { cellErrorCount } from "@/core/cells/cells";
+import { notebookQueuedOrRunningCountAtom } from "@/core/executions";
 import { capabilitiesAtom } from "@/core/config/capabilities";
 import { aiEnabledAtom } from "@/core/config/config";
 import { cn } from "@/utils/cn";
@@ -22,6 +20,7 @@ import {
   PANELS,
   type PanelDescriptor,
 } from "../types";
+import { PendingAIChangesBadge } from "./pending-ai-changes-badge";
 import { PANEL_PRELOADERS } from "./lazy-panels";
 
 export const Sidebar: React.FC = () => {
@@ -150,6 +149,11 @@ export const Sidebar: React.FC = () => {
           >
             {panel.type === "errors" ? (
               <ErrorPanelIcon Icon={panel.Icon} />
+            ) : panel.type === "ai" ? (
+              <span className="relative">
+                {renderIcon(panel)}
+                <PendingAIChangesBadge className="absolute -top-2 -right-2" />
+              </span>
             ) : (
               renderIcon(panel)
             )}

package/src/components/editor/chrome/wrapper/storage.ts

@@ -15,7 +15,7 @@ let storedValue: string | null = null;
  */
 export function createStorage(location: "left" | "bottom"): PanelGroupStorage {
   return {
-    getItem(name) {
+    getItem(_name) {
       if (!storedValue) {
         return storedValue ?? null;
       }

package/src/components/editor/chrome/wrapper/useAskAiAboutCell.ts

@@ -0,0 +1,36 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useSetAtom, useStore } from "jotai";
+import useEvent from "react-use-event-hook";
+import { useAIConfigActions } from "@/core/ai/config";
+import { CellContextProvider } from "@/core/ai/context/providers/cell";
+import { pendingAiPromptAtom } from "@/core/ai/state";
+import type { CellId } from "@/core/cells/ids";
+import { aiAtom } from "@/core/config/config";
+import { Logger } from "@/utils/Logger";
+import { useChromeActions } from "../state";
+import { aiPanelTabAtom } from "./useAiPanel";
+
+export function useAskAiAboutCell() {
+  const store = useStore();
+  const { openApplication } = useChromeActions();
+  const setAiPanelTab = useSetAtom(aiPanelTabAtom);
+  const { saveModeChange } = useAIConfigActions();
+  const setPendingPrompt = useSetAtom(pendingAiPromptAtom);
+
+  return useEvent(async (cellId: CellId) => {
+    const mode = store.get(aiAtom)?.mode;
+    if (mode !== "agent" && mode !== "code_mode") {
+      await saveModeChange("agent").catch(() =>
+        Logger.error("Failed to save mode change"),
+      );
+    }
+    setPendingPrompt({
+      prompt: `@${new CellContextProvider(store).asURI(cellId)} `,
+      submit: false,
+      append: true,
+    });
+    setAiPanelTab("chat");
+    openApplication("ai");
+  });
+}

package/src/components/editor/columns/__tests__/cell-column.test.tsx

@@ -3,7 +3,7 @@ import { render } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { describe, expect, it } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import type { CellColumnId } from "@/utils/id-tree";
+import type { CellColumnId } from "@/core/cells/layout";
 import { Column } from "../cell-column";
 
 const columnId = "col-1" as CellColumnId;

package/src/components/editor/columns/cell-column.tsx

@@ -4,7 +4,7 @@ import React, { memo, useRef } from "react";
 import type { AppConfig } from "@/core/config/config-schema";
 import { useResizeHandle } from "@/hooks/useResizeHandle";
 import { cn } from "@/utils/cn";
-import type { CellColumnId } from "@/utils/id-tree";
+import type { CellColumnId } from "@/core/cells/layout";
 import { SortableColumn } from "./sortable-column";
 import { storageFn } from "./storage";
 

package/src/components/editor/columns/sortable-column.tsx

@@ -19,9 +19,9 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Tooltip } from "@/components/ui/tooltip";
-import { useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { cn } from "@/utils/cn";
-import type { CellColumnId } from "@/utils/id-tree";
+import type { CellColumnId } from "@/core/cells/layout";
 import { mergeRefs } from "../../../utils/mergeRefs";
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {

package/src/components/editor/connections/components.tsx

@@ -18,7 +18,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
-import { useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { autoInstantiateAtom } from "@/core/config/config";
 import type { DetectedDataSource } from "@/core/datasets/data-source-discovery";
@@ -48,7 +48,7 @@ export const SelectorButton: React.FC<{
 }> = ({ name, color, icon, onSelect }) => (
   <button
     type="button"
-    className="py-3 flex flex-col items-center justify-center gap-1 transition-all hover:scale-105 hover:brightness-110 rounded shadow-sm-solid hover:shadow-md-solid"
+    className="py-3 flex flex-col items-center justify-center gap-1 transition-[scale,filter,box-shadow] hover:scale-105 hover:brightness-110 rounded shadow-sm-solid hover:shadow-md-solid"
     style={{ backgroundColor: color }}
     onClick={onSelect}
   >
@@ -112,7 +112,7 @@ export const ConnectionFormFooter = <L extends string>({
  * Returns a callback that inserts code into a new cell after the last focused cell.
  */
 export function useInsertCode() {
-  const { createNewCell } = useCellActions();
+  const { createCell } = useCellActions();
   const lastFocusedCellId = useLastFocusedCellId();
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
 
@@ -121,17 +121,12 @@ export function useInsertCode() {
     if (/\bmo\./.test(code)) {
       maybeAddMarimoImport({
         autoInstantiate,
-        createNewCell,
+        createCell,
         fromCellId: lastFocusedCellId,
       });
     }
 
-    createNewCell({
-      code,
-      before: false,
-      cellId: lastFocusedCellId ?? "__end__",
-      skipIfCodeExists: true,
-    });
+    createCell({ after: lastFocusedCellId, code, skipIfCodeExists: true });
   };
 }
 

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

@@ -20,16 +20,16 @@ import { SaveComponent } from "@/core/saving/save-component";
 import {
   getConnectionTooltip,
   isAppInteractionDisabled,
-} from "@/core/websocket/connection-utils";
-import { ConnectionState } from "@/core/websocket/types";
+} from "@/core/session/connection-utils";
+import { ConnectionState } from "@/core/session/types";
 import { cn } from "@/utils/cn";
 import { Functions } from "@/utils/functions";
 import {
   canUndoDeletesAtom,
   needsRunAtom,
   undoLabelAtom,
-  useCellActions,
 } from "../../../core/cells/cells";
+import { useCellActions } from "../../../core/cells/actions";
 import { ConfigButton } from "../../app-config/app-config-button";
 import { renderShortcut } from "../../shortcuts/renderShortcut";
 import { Tooltip } from "../../ui/tooltip";
@@ -111,7 +111,7 @@ export const Controls = ({
         className={cn(bottomRightControls)}
       >
         <HideInKioskMode>
-          <SaveComponent kioskMode={false} />
+          <SaveComponent />
         </HideInKioskMode>
 
         <Tooltip content={renderShortcut("global.hideCode")}>

package/src/components/editor/controls/__tests__/command-palette.test.tsx

@@ -0,0 +1,53 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it, vi } from "vitest";
+import { useNotebookActions } from "../../actions/useNotebookActions";
+import CommandPalette from "../command-palette";
+
+vi.mock("../../actions/useNotebookActions", () => ({
+  useNotebookActions: vi.fn(),
+}));
+vi.mock("../../actions/useCellActionButton", () => ({
+  useCellActionButtons: () => [],
+}));
+vi.mock("../../actions/useConfigActions", () => ({
+  useConfigActions: () => [],
+}));
+
+it("builds current actions only while open and keeps the opening shortcut active", async () => {
+  HTMLElement.prototype.scrollIntoView = vi.fn();
+  const firstAction = vi.fn();
+  const nextAction = vi.fn();
+  vi.mocked(useNotebookActions).mockReturnValue([
+    { label: "First action", handle: firstAction },
+  ]);
+  render(
+    <Provider store={createStore()}>
+      <CommandPalette />
+    </Provider>,
+  );
+  expect(useNotebookActions).not.toHaveBeenCalled();
+
+  fireEvent.keyDown(document, { key: "k", ctrlKey: true });
+  await screen.findByPlaceholderText("Type to search...");
+  fireEvent.click(screen.getByText("First action"));
+  await waitFor(() => expect(firstAction).toHaveBeenCalledOnce());
+  await waitFor(() =>
+    expect(screen.queryByPlaceholderText("Type to search...")).toBeNull(),
+  );
+
+  vi.mocked(useNotebookActions)
+    .mockClear()
+    .mockReturnValue([{ label: "Updated action", handle: nextAction }]);
+  fireEvent.keyDown(document, { key: "x" });
+  expect(useNotebookActions).not.toHaveBeenCalled();
+
+  fireEvent.keyDown(document, { key: "k", ctrlKey: true });
+  await screen.findByPlaceholderText("Type to search...");
+  expect(screen.queryByText("First action")).toBeNull();
+  fireEvent.click(screen.getByText("Updated action"));
+  await waitFor(() => expect(nextAction).toHaveBeenCalledOnce());
+  expect(firstAction).toHaveBeenCalledOnce();
+});

package/src/components/editor/controls/__tests__/keyboard-shortcuts.test.tsx

@@ -0,0 +1,61 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { userConfigAtom } from "@/core/config/config";
+import { defaultUserConfig } from "@/core/config/config-schema";
+import { getDefaultHotkey } from "@/core/hotkeys/hotkeys";
+import {
+  KeyboardShortcuts,
+  keyboardShortcutsAtom,
+} from "../keyboard-shortcuts";
+
+const saveUserConfig = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+vi.mock("@/core/network/requests", () => ({
+  useRequestClient: () => ({ saveUserConfig }),
+}));
+
+describe("shortcut recorder keyboard navigation", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("allows Tab navigation and Reset without saving a shortcut", async () => {
+    const store = createStore();
+    const config = defaultUserConfig();
+    store.set(userConfigAtom, {
+      ...config,
+      keymap: { ...config.keymap, overrides: { "cell.run": "Ctrl-9" } },
+    });
+    store.set(keyboardShortcutsAtom, true);
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <KeyboardShortcuts />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const edit = screen.getByRole("button", {
+      name: `Edit shortcut: ${getDefaultHotkey("cell.run").name}`,
+    });
+    act(() => edit.focus());
+    fireEvent.click(edit, { detail: 0 });
+    const recorder = screen.getByPlaceholderText(
+      getDefaultHotkey("cell.run").name,
+    );
+    expect(recorder).toHaveFocus();
+    expect(fireEvent.keyDown(recorder, { key: "Tab" })).toBe(true);
+    expect(fireEvent.keyDown(recorder, { key: "Tab", shiftKey: true })).toBe(
+      true,
+    );
+    expect(recorder).toBeInTheDocument();
+    expect(saveUserConfig).not.toHaveBeenCalled();
+    const reset = screen.getByRole("button", { name: /^Reset to default:/ });
+    act(() => reset.focus());
+    expect(reset).toHaveFocus();
+    await act(async () => fireEvent.click(reset, { detail: 0 }));
+    expect(saveUserConfig).toHaveBeenCalledExactlyOnceWith({
+      config: { keymap: { ...config.keymap, overrides: {} } },
+    });
+  });
+});

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

@@ -11,6 +11,7 @@ import { Provider } from "jotai";
 import type React from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { requestId } from "@/__tests__/branded";
+import { mockDocumentModel } from "@/__mocks__/document";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { ModalProvider } from "@/components/modal/ImperativeModal";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -19,6 +20,7 @@ import {
   invalidateDataSourceDiscovery,
 } from "@/core/datasets/data-source-discovery";
 import { DiscoverDataSources } from "@/core/datasets/request-registry";
+import { DocumentProvider } from "@/core/notebook/document";
 import { layoutStateAtom } from "@/core/layout/state";
 import { kioskModeAtom, viewStateAtom } from "@/core/mode";
 import { connectionAtom } from "@/core/network/connection";
@@ -26,7 +28,7 @@ import { requestClientAtom } from "@/core/network/requests";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
 import { isWasm } from "@/core/wasm/utils";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import {
   DEFAULT_EXPORT_OPTIONS,
   exportOptionsAtom,
@@ -73,12 +75,16 @@ global.HTMLElement.prototype.scrollIntoView = () => {
   // jsdom does not implement scrollIntoView; cmdk calls it on selection.
 };
 
+const { model } = mockDocumentModel(store, null);
+
 function wrapper({ children }: { children: React.ReactNode }) {
   return (
     <Provider store={store}>
-      <TooltipProvider>
-        <ModalProvider>{children}</ModalProvider>
-      </TooltipProvider>
+      <DocumentProvider model={model}>
+        <TooltipProvider>
+          <ModalProvider>{children}</ModalProvider>
+        </TooltipProvider>
+      </DocumentProvider>
     </Provider>
   );
 }

package/src/components/editor/controls/command-palette.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
   CommandDialog,
   CommandEmpty,
@@ -32,6 +32,25 @@ import { commandPaletteAtom } from "./state";
 
 const CommandPalette = () => {
   const [open, setOpen] = useAtom(commandPaletteAtom);
+  const hotkeys = useAtomValue(hotkeysAtom);
+
+  useEventListener(document, "keydown", (e) => {
+    if (parseShortcut(hotkeys.getHotkey("global.commandPalette").key)(e)) {
+      e.preventDefault();
+      setOpen((open) => !open);
+    }
+  });
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandPaletteContent />
+    </CommandDialog>
+  );
+};
+
+// The dialog mounts these subscriptions only while its content is present.
+const CommandPaletteContent = () => {
+  const setOpen = useSetAtom(commandPaletteAtom);
   const registeredActions = useRegisteredActions();
   const lastFocusedCell = useAtomValue(lastFocusedCellAtom);
   const hotkeys = useAtomValue(hotkeysAtom);
@@ -55,13 +74,6 @@ const CommandPalette = () => {
   const { recentCommands, addRecentCommand } = useRecentCommands();
   const recentCommandsSet = new Set(recentCommands);
 
-  useEventListener(document, "keydown", (e) => {
-    if (parseShortcut(hotkeys.getHotkey("global.commandPalette").key)(e)) {
-      e.preventDefault();
-      setOpen((open) => !open);
-    }
-  });
-
   const renderShortcutCommandItem = (
     shortcut: HotkeyAction,
     props: {
@@ -142,7 +154,7 @@ const CommandPalette = () => {
   };
 
   return (
-    <CommandDialog open={open} onOpenChange={setOpen}>
+    <>
       <CommandInput placeholder="Type to search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
@@ -211,7 +223,7 @@ const CommandPalette = () => {
           })}
         </CommandGroup>
       </CommandList>
-    </CommandDialog>
+    </>
   );
 };
 

package/src/components/editor/controls/keyboard-shortcuts.tsx

@@ -134,6 +134,9 @@ export const KeyboardShortcuts: React.FC = () => {
             defaultValue={newShortcut.join("+")}
             placeholder={hotkey.name}
             onKeyDown={(e) => {
+              if (e.key === "Tab" && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                return;
+              }
               e.preventDefault();
               const next: string[] = [];
 
@@ -189,6 +192,7 @@ export const KeyboardShortcuts: React.FC = () => {
             autoFocus={true}
             endAdornment={
               <Button
+                aria-label="Cancel shortcut recording"
                 variant="text"
                 size="xs"
                 className="mb-0"
@@ -206,13 +210,14 @@ export const KeyboardShortcuts: React.FC = () => {
               Press a key combination
             </span>
             {defaultHotkey.key !== hotkey.key && (
-              <span
+              <button
+                type="button"
                 className="text-xs cursor-pointer text-primary"
                 onClick={handleResetShortcut}
               >
                 Reset to default:{" "}
                 <span className="font-mono">{defaultHotkey.key}</span>
-              </span>
+              </button>
             )}
           </div>
         </div>
@@ -228,13 +233,17 @@ export const KeyboardShortcuts: React.FC = () => {
         className="grid grid-cols-[auto_2fr_3fr] gap-2 items-center"
       >
         {hotkeys.isEditable(action) ? (
-          <EditIcon
-            className="cursor-pointer opacity-60 hover:opacity-100 text-muted-foreground w-3 h-3"
+          <button
+            type="button"
+            aria-label={`Edit shortcut: ${hotkey.name}`}
+            className="cursor-pointer opacity-60 hover:opacity-100 text-muted-foreground w-3 h-3 focus-visible:outline focus-visible:outline-ring"
             onClick={() => {
               setNewShortcut([]);
               setEditingShortcut(action);
             }}
-          />
+          >
+            <EditIcon className="w-3 h-3" />
+          </button>
         ) : (
           <div className="w-3 h-3" />
         )}

package/src/components/editor/documentation.css

@@ -157,18 +157,41 @@
 /* Syntax highlighting for LSP hover code blocks (lezer classHighlighter tok-* classes) */
 .docs-documentation,
 .cm-tooltip .documentation {
-  .tok-keyword { color: light-dark(#708, #c678dd); font-weight: 500; }
+  .tok-keyword {
+    color: light-dark(#708, #c678dd);
+    font-weight: 500;
+  }
   .tok-string,
-  .tok-string2 { color: light-dark(#a11, #98c379); }
-  .tok-number { color: light-dark(#164, #d19a66); }
+  .tok-string2 {
+    color: light-dark(#a11, #98c379);
+  }
+  .tok-number {
+    color: light-dark(#164, #d19a66);
+  }
   .tok-bool,
-  .tok-atom { color: light-dark(#219, #d19a66); }
-  .tok-comment { color: var(--cm-comment); }
-  .tok-className { color: light-dark(#00f, #61afef); }
+  .tok-atom {
+    color: light-dark(#219, #d19a66);
+  }
+  .tok-comment {
+    color: var(--cm-comment);
+  }
+  .tok-className {
+    color: light-dark(#00f, #61afef);
+  }
   .tok-typeName,
-  .tok-namespace { color: light-dark(#085, #56b6c2); }
-  .tok-operator { color: light-dark(#a2f, #56b6c2); }
-  .tok-propertyName { color: light-dark(#05a, #e5c07b); }
-  .tok-variableName { color: light-dark(#000, #abb2bf); }
-  .tok-punctuation { color: light-dark(#000, #abb2bf); }
+  .tok-namespace {
+    color: light-dark(#085, #56b6c2);
+  }
+  .tok-operator {
+    color: light-dark(#a2f, #56b6c2);
+  }
+  .tok-propertyName {
+    color: light-dark(#05a, #e5c07b);
+  }
+  .tok-variableName {
+    color: light-dark(#000, #abb2bf);
+  }
+  .tok-punctuation {
+    color: light-dark(#000, #abb2bf);
+  }
 }

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

@@ -1,8 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { usePrevious } from "@dnd-kit/utilities";
+import { useAtomValue } from "jotai";
 import { useEffect } from "react";
-import { useCellErrors } from "@/core/cells/cells";
+import { cellErrorCount } from "@/core/cells/cells";
 import { useEventListener } from "@/hooks/useEventListener";
 import successFaviconUrl from "../../assets/circle-check.ico";
 import runningFaviconUrl from "../../assets/circle-play.ico";
@@ -15,13 +16,6 @@ const FAVICON_PATHS = {
   error: errorFaviconUrl,
 } as const;
 
-// Cache favicon object URLs lazily
-type FaviconKey = keyof typeof FAVICON_PATHS;
-
-async function getFaviconUrl(key: FaviconKey): Promise<string> {
-  return FAVICON_PATHS[key];
-}
-
 function getOrCreateFavicon(): HTMLLinkElement {
   const existingFavicon =
     document.querySelector<HTMLLinkElement>("link[rel~='icon']");
@@ -44,16 +38,16 @@ function maybeSendNotification(numErrors: number) {
     return;
   }
 
-  const sendNotification = async () => {
+  const sendNotification = () => {
     if (numErrors === 0) {
       new Notification("Execution completed", {
         body: "Your notebook run completed successfully.",
-        icon: await getFaviconUrl("success"),
+        icon: FAVICON_PATHS.success,
       });
     } else {
       new Notification("Execution failed", {
         body: `Your notebook run encountered ${numErrors} error(s).`,
-        icon: await getFaviconUrl("error"),
+        icon: FAVICON_PATHS.error,
       });
     }
   };
@@ -75,7 +69,7 @@ function maybeSendNotification(numErrors: number) {
 
 export const DynamicFavicon = (props: Props) => {
   const { isRunning } = props;
-  const errors = useCellErrors();
+  const numErrors = useAtomValue(cellErrorCount);
 
   useEffect(() => {
     const favicon = getOrCreateFavicon();
@@ -86,46 +80,33 @@ export const DynamicFavicon = (props: Props) => {
       return;
     }
 
-    const updateFavicon = async () => {
-      let key: FaviconKey;
-      // When notebook is running, display running favicon
-      if (isRunning) {
-        key = "running";
-      } else {
-        // When run is complete, display success or error favicon
-        key = errors.length === 0 ? "success" : "error";
-      }
-      favicon.href = await getFaviconUrl(key);
+    const key = isRunning ? "running" : numErrors === 0 ? "success" : "error";
+    favicon.href = FAVICON_PATHS[key];
 
-      // If notebook is in focus, reset favicon after 3 seconds
-      // If not in focus, the focus event listener handles it
-      if (!document.hasFocus()) {
-        return;
-      }
-
-      const timeoutId = setTimeout(async () => {
-        favicon.href = await getFaviconUrl("idle");
-      }, 3000);
-
-      return () => clearTimeout(timeoutId);
-    };
+    if (!document.hasFocus()) {
+      // The focus listener resets the favicon when the user returns.
+      return;
+    }
 
-    updateFavicon();
-  }, [isRunning, errors]);
+    const timeoutId = setTimeout(() => {
+      favicon.href = FAVICON_PATHS.idle;
+    }, 3000);
+    return () => clearTimeout(timeoutId);
+  }, [isRunning, numErrors]);
 
   // Send user notification when run has completed
   const prevRunning = usePrevious(isRunning) ?? isRunning;
   useEffect(() => {
     if (prevRunning && !isRunning) {
-      maybeSendNotification(errors.length);
+      maybeSendNotification(numErrors);
     }
-  }, [errors, prevRunning, isRunning]);
+  }, [numErrors, prevRunning, isRunning]);
 
   // When notebook comes back in focus, reset favicon
-  useEventListener(window, "focus", async (_) => {
+  useEventListener(window, "focus", () => {
     if (!isRunning) {
       const favicon = getOrCreateFavicon();
-      favicon.href = await getFaviconUrl("idle");
+      favicon.href = FAVICON_PATHS.idle;
     }
   });