@marimo-team/frontend 0.25.3-dev10 → 0.25.3-dev100

package/src/components/editor/actions/pair-with-agent-modal.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { CheckIcon, CopyIcon } from "lucide-react";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useAtomValue } from "jotai";
 import { Button } from "@/components/ui/button";
 import {
@@ -53,21 +53,20 @@ export const PairWithAgentModal: React.FC<{
   const config = useAtomValue(pairConfigAtom);
   const hostEnabled = config?.hostEnabled ?? false;
   const stableSessionId = useAtomValue(stableSessionIdAtom);
+  const lookupIdentity = useMemo(
+    () => ({ hostEnabled, stableSessionId }),
+    [hostEnabled, stableSessionId],
+  );
   const [lookup, setLookup] = useState<
     {
-      sessionId: string;
-    } & (
-      | { status: "ready"; notebookId: string | null }
-      | { status: "loading" | "error" }
-    )
+      identity: typeof lookupIdentity;
+    } & ({ status: "ready"; notebookId: string | null } | { status: "error" })
   >();
   useEffect(() => {
-    if (!hostEnabled || !stableSessionId) {
-      setLookup(undefined);
+    const { hostEnabled, stableSessionId: sessionId } = lookupIdentity;
+    if (!hostEnabled || !sessionId) {
       return;
     }
-    const sessionId = stableSessionId;
-    setLookup({ sessionId, status: "loading" });
     let cancelled = false;
     API.get<Record<string, { session_id: string; notebook_id: string | null }>>(
       "/sessions",
@@ -79,22 +78,26 @@ export const PairWithAgentModal: React.FC<{
           );
           setLookup(
             session
-              ? { sessionId, status: "ready", notebookId: session.notebook_id }
-              : { sessionId, status: "error" },
+              ? {
+                  identity: lookupIdentity,
+                  status: "ready",
+                  notebookId: session.notebook_id,
+                }
+              : { identity: lookupIdentity, status: "error" },
           );
         }
       })
       .catch(() => {
         if (!cancelled) {
-          setLookup({ sessionId, status: "error" });
+          setLookup({ identity: lookupIdentity, status: "error" });
         }
       });
     return () => {
       cancelled = true;
     };
-  }, [hostEnabled, stableSessionId]);
+  }, [lookupIdentity]);
   const currentLookup =
-    lookup?.sessionId === stableSessionId ? lookup : undefined;
+    lookup?.identity === lookupIdentity ? lookup : undefined;
   const verified = !hostEnabled || currentLookup?.status === "ready";
   const notebookId =
     hostEnabled && currentLookup?.status === "ready"

package/src/components/editor/ai/add-cell-with-ai.tsx

@@ -106,9 +106,9 @@ export const AddCellWithAI: React.FC<{
   const runtimeManager = useRuntimeManager();
 
   const inputRef = useRef<ReactCodeMirrorRef>(null);
-  const submissionController = useRef(
-    new StagedCellSubmissionController(),
-  ).current;
+  const [submissionController] = useState(
+    () => new StagedCellSubmissionController(),
+  );
 
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { files, addFiles, removeFile } = useFileState();

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -408,6 +408,7 @@ export const AiCompletionEditor: React.FC<Props> = ({
               </div>
             </Tooltip>
             <Button
+              aria-label="Discard AI completion"
               data-testid="decline-completion-button"
               variant="text"
               size="icon"

package/src/components/editor/alerts/startup-logs-alert.tsx

@@ -51,6 +51,7 @@ export const StartupLogsAlert: React.FC = () => {
             {isRunning ? "Initializing..." : "Initialized"}
           </span>
           <Button
+            aria-label="Dismiss startup logs"
             variant="text"
             data-testid="remove-startup-logs-button"
             size="icon"

package/src/components/editor/cell/CreateCellButton.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { DatabaseIcon, DiamondPlusIcon, PlusIcon } from "lucide-react";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Button } from "@/components/editor/inputs/Inputs";
 import { MinimalHotkeys } from "@/components/shortcuts/renderShortcut";
 import {
@@ -36,7 +36,8 @@ export const CreateCellButton = ({
   const { createNewCell, addSetupCellIfDoesntExist } = useCellActions();
   const shortcut = `${oneClickShortcut}-Click`;
   const [open, setOpen] = useState(false);
-  const [justOpened, setJustOpened] = useState(false);
+  // Time the dropdown last opened, to ignore the click that opened it
+  const openedAt = useRef(0);
 
   const baseTooltipContent =
     getConnectionTooltip(connectionState) || tooltipContent;
@@ -83,9 +84,7 @@ export const CreateCellButton = ({
 
   const openDropdown = () => {
     setOpen(true);
-    setJustOpened(true);
-    // Allow interactions after a brief delay to prevent the dropdown items immediately being clicked
-    setTimeout(() => setJustOpened(false), 200);
+    openedAt.current = Date.now();
   };
 
   // We use onPointerDownCapture (not onPointerDown) to intercept events in
@@ -121,15 +120,14 @@ export const CreateCellButton = ({
   const handleOpenChange = (isOpen: boolean) => {
     setOpen(isOpen);
     if (isOpen) {
-      setJustOpened(true);
-      // Allow interactions after a brief delay
-      setTimeout(() => setJustOpened(false), 200);
+      openedAt.current = Date.now();
     }
   };
 
   const handleFirstItemClick = (e: React.MouseEvent) => {
-    // Hack to prevent the first item from being clicked when the dropdown is opened
-    if (justOpened) {
+    // Hack to prevent the first item from being clicked when the dropdown is
+    // opened: allow interactions only after a brief delay
+    if (Date.now() - openedAt.current < 200) {
       e.preventDefault();
       e.stopPropagation();
       return;

package/src/components/editor/cell/DeleteButton.tsx

@@ -37,6 +37,7 @@ export const DeleteButton = (props: {
   return (
     <Tooltip content={tooltipMsg} usePortal={false}>
       <Button
+        aria-label="Delete cell"
         variant="ghost"
         size="icon"
         onClick={onClick}

package/src/components/editor/cell/__tests__/useShouldShowInterrupt.test.ts

@@ -0,0 +1,39 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useShouldShowInterrupt } from "../useShouldShowInterrupt";
+
+describe("useShouldShowInterrupt", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("waits for each run and hides immediately when it stops", () => {
+    const { result, rerender } = renderHook(useShouldShowInterrupt, {
+      initialProps: false,
+    });
+    expect(result.current).toBe(false);
+    rerender(true);
+    expect(result.current).toBe(false);
+    act(() => vi.advanceTimersByTime(200));
+    expect(result.current).toBe(true);
+    rerender(false);
+    expect(result.current).toBe(false);
+    rerender(true);
+    expect(result.current).toBe(false);
+    act(() => vi.advanceTimersByTime(199));
+    expect(result.current).toBe(false);
+    act(() => vi.advanceTimersByTime(1));
+    expect(result.current).toBe(true);
+  });
+
+  it("cancels the delay for a short run", () => {
+    const { result, rerender } = renderHook(useShouldShowInterrupt, {
+      initialProps: true,
+    });
+    act(() => vi.advanceTimersByTime(100));
+    rerender(false);
+    act(() => vi.advanceTimersByTime(200));
+    expect(result.current).toBe(false);
+  });
+});

package/src/components/editor/cell/code/__tests__/language-toggle.test.tsx

@@ -0,0 +1,54 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { switchLanguage } from "@/core/codemirror/language/extension";
+import { LanguageToggle } from "../language-toggle";
+
+vi.mock("@/core/codemirror/language/extension", () => ({
+  switchLanguage: vi.fn(),
+}));
+
+describe("LanguageToggle", () => {
+  afterEach(() => {
+    vi.mocked(switchLanguage).mockClear();
+  });
+
+  it("uses the editor mounted after the button rendered", () => {
+    const editorViewRef = createRef<EditorView>();
+    const onAfterToggle = vi.fn();
+    render(
+      <TooltipProvider>
+        <LanguageToggle
+          editorViewRef={editorViewRef}
+          currentLanguageAdapter="python"
+          canSwitchToLanguage={true}
+          toType="markdown"
+          displayName="Markdown"
+          icon="Markdown"
+          onAfterToggle={onAfterToggle}
+        />
+      </TooltipProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Markdown" }));
+    expect(switchLanguage).not.toHaveBeenCalled();
+    expect(onAfterToggle).not.toHaveBeenCalled();
+
+    const view = new EditorView({ state: EditorState.create() });
+    editorViewRef.current = view;
+    try {
+      fireEvent.click(screen.getByRole("button", { name: "Markdown" }));
+      expect(switchLanguage).toHaveBeenCalledWith(view, {
+        language: "markdown",
+      });
+      expect(onAfterToggle).toHaveBeenCalledOnce();
+    } finally {
+      view.destroy();
+    }
+  });
+});

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

@@ -572,7 +572,7 @@ const CellEditorInternal = ({
           <div className="absolute top-1 right-5">
             <LanguageToggles
               code={code}
-              editorView={editorViewRef.current}
+              editorViewRef={editorViewRef}
               currentLanguageAdapter={languageAdapter}
               onAfterToggle={afterToggleMarkdown}
             />

package/src/components/editor/cell/code/language-toggle.tsx

@@ -13,7 +13,7 @@ import { Functions } from "@/utils/functions";
 import { MarkdownIcon, PythonIcon } from "./icons";
 
 interface LanguageTogglesProps {
-  editorView: EditorView | null;
+  editorViewRef: React.RefObject<EditorView | null>;
   code: string;
   currentLanguageAdapter: LanguageAdapter["type"] | undefined;
   onAfterToggle: () => void;
@@ -25,7 +25,7 @@ interface LanguageTogglesProps {
 }
 
 export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
-  editorView,
+  editorViewRef,
   code,
   currentLanguageAdapter,
   onAfterToggle,
@@ -43,7 +43,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
   return (
     <div className={className}>
       <LanguageToggle
-        editorView={editorView}
+        editorViewRef={editorViewRef}
         currentLanguageAdapter={currentLanguageAdapter}
         canSwitchToLanguage={canUseSQL && currentLanguageAdapter === "python"}
         icon={
@@ -58,7 +58,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
         onAfterToggle={onAfterToggle}
       />
       <LanguageToggle
-        editorView={editorView}
+        editorViewRef={editorViewRef}
         currentLanguageAdapter={currentLanguageAdapter}
         canSwitchToLanguage={
           canUseMarkdown && currentLanguageAdapter === "python"
@@ -75,7 +75,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
         onAfterToggle={onAfterToggle}
       />
       <LanguageToggle
-        editorView={editorView}
+        editorViewRef={editorViewRef}
         currentLanguageAdapter={currentLanguageAdapter}
         canSwitchToLanguage={true}
         icon={
@@ -95,7 +95,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
 
 interface Props {
   className?: string;
-  editorView: EditorView | null;
+  editorViewRef: React.RefObject<EditorView | null>;
   canSwitchToLanguage: boolean;
   currentLanguageAdapter: LanguageAdapter["type"] | undefined;
   toType: LanguageAdapter["type"];
@@ -105,7 +105,7 @@ interface Props {
 }
 
 export const LanguageToggle: React.FC<Props> = ({
-  editorView,
+  editorViewRef,
   currentLanguageAdapter,
   canSwitchToLanguage,
   icon,
@@ -114,6 +114,7 @@ export const LanguageToggle: React.FC<Props> = ({
   onAfterToggle,
 }) => {
   const handleClick = () => {
+    const editorView = editorViewRef.current;
     if (!editorView) {
       return;
     }

package/src/components/editor/cell/useShouldShowInterrupt.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { useEffect, useState } from "react";
+import { useDelayElapsed } from "@/hooks/useDelayElapsed";
 
 const DELAY_MS = 200;
 
@@ -10,17 +10,7 @@ const DELAY_MS = 200;
 export function useShouldShowInterrupt(running: boolean) {
   // Start a timer when the run starts.
   // After 200ms, show the interrupt button to avoid flickering.
-  const [hasRunLongEnough, setHasRunLongEnough] = useState(false);
-  useEffect(() => {
-    if (!running) {
-      return;
-    }
-    setHasRunLongEnough(false);
-    const timeout = setTimeout(() => {
-      setHasRunLongEnough(true);
-    }, DELAY_MS);
-    return () => clearTimeout(timeout);
-  }, [running]);
+  const hasRunLongEnough = useDelayElapsed(running ? DELAY_MS : 0);
 
   return running && hasRunLongEnough;
 }

package/src/components/editor/chrome/panels/__tests__/packages-panel.test.tsx

@@ -18,7 +18,10 @@ import type {
   DependencyTreeNode,
   DependencyTreeResponse,
 } from "@/core/network/types";
-import { withPackageInvalidation } from "@/core/packages/package-data";
+import {
+  invalidatePackageData,
+  withPackageInvalidation,
+} from "@/core/packages/package-data";
 import { useInstallPackages } from "@/core/packages/useInstallPackage";
 import { sandboxAtom, sandboxSyncAtom } from "@/core/packages/sandbox-state";
 import { store } from "@/core/state/jotai";
@@ -143,6 +146,32 @@ describe("PackagesPanel", () => {
     expect(screen.queryByText("cycle")).not.toBeInTheDocument();
   });
 
+  it("collapses expanded nodes when the dependency tree is refreshed", async () => {
+    const { client } = renderPanel(
+      { kind: "sandbox", backend: "pixi" },
+      populatedTree,
+    );
+    fireEvent.click(await screen.findByRole("treeitem", { name: /polars/ }));
+    expect(screen.getByText("already in tree")).toBeInTheDocument();
+
+    vi.mocked(client.getDependencyTree).mockResolvedValue({
+      tree: structuredClone(populatedTree),
+      context: { kind: "sandbox", backend: "pixi" },
+    });
+    act(() => invalidatePackageData());
+
+    await waitFor(() =>
+      expect(client.getDependencyTree).toHaveBeenCalledTimes(2),
+    );
+    await waitFor(() =>
+      expect(screen.queryByText("already in tree")).not.toBeInTheDocument(),
+    );
+    expect(screen.getByRole("treeitem", { name: /polars/ })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+  });
+
   it("keeps the configured package manager changeable outside a sandbox", async () => {
     const { getPackageList } = renderPanel({
       kind: "package-manager",

package/src/components/editor/chrome/panels/cache-panel.tsx

@@ -104,6 +104,7 @@ const CachePanel = () => {
         {/* Header with Refresh Button */}
         <div className="flex items-center justify-end">
           <Button
+            aria-label="Refresh cache"
             variant="ghost"
             size="icon"
             className="h-6 w-6"

package/src/components/editor/chrome/panels/packages-panel.tsx

@@ -31,6 +31,7 @@ import { usePackageAction } from "@/core/packages/usePackageAction";
 import { usePackageDependencies } from "@/core/packages/usePackageDependencies";
 import { useInstallPackages } from "@/core/packages/useInstallPackage";
 import { isWasm } from "@/core/wasm/utils";
+import { useStateForKey } from "@/hooks/useStateForKey";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -440,15 +441,11 @@ const DependencyTree: React.FC<{
   error?: Error | null;
   sandboxBackend: "uv" | "pixi" | null;
 }> = ({ tree, error, sandboxBackend }) => {
-  const [expandedNodes, setExpandedNodes] = React.useState<Set<string>>(
-    new Set(),
+  const [expandedNodes, setExpandedNodes] = useStateForKey(
+    tree,
+    () => new Set<string>(),
   );
 
-  // Reset tree to collapsed state when tree data changes (including refetches)
-  React.useEffect(() => {
-    setExpandedNodes(new Set());
-  }, [tree]);
-
   if (error) {
     return <ErrorBanner error={error} />;
   }

package/src/components/editor/chrome/wrapper/__tests__/attachment-status.test.tsx

@@ -8,27 +8,31 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
-import { createStore, Provider } from "jotai";
+import { atom, createStore, Provider } from "jotai";
 import { userEvent } from "storybook/test";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { PAIR_CONFIG } from "@/__tests__/fixtures/pair-config";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
-import { type Attachment, attachmentsAtom } from "@/core/attachments/state";
+import type { Attachment } from "@/core/attachments/state";
 import { pairConfigAtom } from "@/core/config/pair";
+import { createNotebookClient } from "@/core/host/notebook-client";
 import {
   type StableSessionId,
   stableSessionIdAtom,
 } from "@/core/kernel/session";
 import { API } from "@/core/network/api";
 import { connectionAtom } from "@/core/network/connection";
-import { WebSocketClosedReason, ConnectionState } from "@/core/websocket/types";
+import { notebookClientAtom } from "@/core/websocket/state";
+import { ConnectionState } from "@/core/websocket/types";
 import { Deferred } from "@/utils/Deferred";
 import { AttachmentStatus } from "../footer-items/attachment-status";
 
 vi.mock("@/components/ui/use-toast", () => ({ toast: vi.fn() }));
 vi.mock("@/core/network/api", () => ({ API: { post: vi.fn() } }));
 
+const attachmentsAtom = atom<Attachment[]>([]);
+
 const AGENT: Attachment = {
   id: "a1",
   kind: "agent",
@@ -41,6 +45,11 @@ function renderStatus(attachments: Attachment[] = [AGENT], preview = true) {
   const store = createStore();
   store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(pairConfigAtom, { ...PAIR_CONFIG, hostEnabled: preview });
+  store.set(notebookClientAtom, {
+    ...createNotebookClient(store).client,
+    connectionAtom: atom({ state: ConnectionState.OPEN }),
+    attachmentsAtom,
+  });
   store.set(attachmentsAtom, attachments);
   store.set(stableSessionIdAtom, "stable/test" as StableSessionId);
   return {
@@ -342,21 +351,6 @@ describe("AttachmentStatus", () => {
     ).toBeDisabled();
   });
 
-  it.each([
-    { state: ConnectionState.CONNECTING },
-    { state: ConnectionState.CLOSING },
-    { state: ConnectionState.NOT_STARTED },
-    {
-      state: ConnectionState.CLOSED,
-      code: WebSocketClosedReason.KERNEL_DISCONNECTED,
-      reason: "offline",
-    },
-  ])("hides connected claims while the browser is %j", (connection) => {
-    const { store, container } = renderStatus();
-    act(() => store.set(connectionAtom, connection));
-    expect(container).toBeEmptyDOMElement();
-  });
-
   it("removes detached agents when the list is replaced", () => {
     const { store, container } = renderStatus([
       AGENT,

package/src/components/editor/chrome/wrapper/__tests__/pending-ai-cells.test.tsx

@@ -1,11 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { act, render, screen, within } from "@testing-library/react";
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { describe, expect, it, vi } from "vitest";
 import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { stagedAICellsAtom, visibleForTesting } from "@/core/ai/staged-cells";
+import { scrollAndHighlightCell } from "../../../links/cell-link";
 import { PendingAICells } from "../pending-ai-cells";
 
 vi.mock("@/components/editor/cell/useDeleteCell", () => ({
@@ -29,6 +30,62 @@ vi.mock("@/components/editor/links/cell-link", () => ({
 }));
 
 describe("PendingAICells", () => {
+  it("navigates between pending cells through named controls", () => {
+    const store = createStore();
+    const first = cellId("first-pending-cell");
+    const second = cellId("second-pending-cell");
+    const third = cellId("third-pending-cell");
+    store.set(
+      stagedAICellsAtom,
+      new Map([
+        [first, { type: "add_cell" }],
+        [second, { type: "add_cell" }],
+        [third, { type: "add_cell" }],
+      ]),
+    );
+
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <PendingAICells />
+        </TooltipProvider>
+      </Provider>,
+    );
+
+    const next = screen.getByRole("button", { name: "Next pending AI cell" });
+    const previous = screen.getByRole("button", {
+      name: "Previous pending AI cell",
+    });
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(first, "focus");
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(second, "focus");
+    expect(screen.getByText("2 / 3")).toBeInTheDocument();
+
+    fireEvent.click(previous);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(first, "focus");
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(second, "focus");
+    expect(screen.getByText("2 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(third, "focus");
+    expect(screen.getByText("3 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(first, "focus");
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
+
+    fireEvent.click(previous);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(third, "focus");
+    expect(screen.getByText("3 / 3")).toBeInTheDocument();
+  });
+
   it("disables bulk actions while cells are still generating", () => {
     const store = createStore();
     const generationId = Symbol("staged-cell-generation");

package/src/components/editor/chrome/wrapper/footer-items/runtime-settings.tsx

@@ -26,13 +26,7 @@ import { isWasm } from "@/core/wasm/utils";
 import { cn } from "@/utils/cn";
 import { FooterItem } from "../footer-item";
 
-interface RuntimeSettingsProps {
-  className?: string;
-}
-
-export const RuntimeSettings: React.FC<RuntimeSettingsProps> = ({
-  className,
-}) => {
+export const RuntimeSettings: React.FC = () => {
   const { saveUserConfig } = useRequestClient();
   const [config, setUserConfig] = useResolvedMarimoConfig();
 

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

@@ -79,7 +79,12 @@ export const PendingAICells: React.FC = () => {
       <SparklesIcon className="h-4 w-4 text-primary" />
 
       <div className="flex items-center">
-        <Button variant="ghost" size="icon" onClick={() => clickNext("up")}>
+        <Button
+          aria-label="Previous pending AI cell"
+          variant="ghost"
+          size="icon"
+          onClick={() => clickNext("down")}
+        >
           <ChevronUp className="h-3.5 w-3.5" />
         </Button>
         <span className="text-xs font-mono min-w-14 text-center">
@@ -87,7 +92,12 @@ export const PendingAICells: React.FC = () => {
             ? `${listStagedCells.length} pending`
             : `${currentIndex + 1} / ${listStagedCells.length}`}
         </span>
-        <Button variant="ghost" size="icon" onClick={() => clickNext("down")}>
+        <Button
+          aria-label="Next pending AI cell"
+          variant="ghost"
+          size="icon"
+          onClick={() => clickNext("up")}
+        >
           <ChevronDown className="h-3.5 w-3.5" />
         </Button>
       </div>

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/connections/components.tsx

@@ -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}
   >