@marimo-team/islands 0.25.3-dev10 → 0.25.3-dev101

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;
     }
   });
 

package/src/components/editor/errors/__tests__/send-error-report-button.test.tsx

@@ -8,7 +8,7 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
-import { createStore, Provider, useAtomValue } from "jotai";
+import { atom, createStore, Provider, useAtomValue } from "jotai";
 import type React from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { MockNotebook } from "@/__mocks__/notebook";
@@ -16,7 +16,7 @@ import { cellId } from "@/__tests__/branded";
 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 { exportedForTesting, notebookAtom } from "@/core/cells/cells";
 import {
   type CellOutputMessage,
@@ -25,6 +25,7 @@ import {
 } from "@/core/cells/error-report";
 import { pairConfigAtom } from "@/core/config/pair";
 import { notebookStateFromSession } from "@/core/cells/session";
+import { createNotebookClient } from "@/core/host/notebook-client";
 import type { MarimoError, OutputMessage } from "@/core/kernel/messages";
 import {
   type StableSessionId,
@@ -32,7 +33,8 @@ import {
 } 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 { HTTPError } from "@/utils/errors";
 import { MarimoErrorOutput } from "../../output/MarimoErrorOutput";
@@ -48,6 +50,8 @@ vi.mock("@/components/editor/chrome/wrapper/useOpenAiAssistant", () => ({
 
 const CELL_ID = cellId("test-cell");
 const STABLE_ID = "stable/test" as StableSessionId;
+const attachmentsAtom = atom<Attachment[]>([]);
+
 const AGENT: Attachment = {
   id: "a1",
   kind: "agent",
@@ -93,6 +97,11 @@ function renderButton({
   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, stableId);
   const wrapper = ({ children }: { children: React.ReactNode }) => (
@@ -177,26 +186,6 @@ describe("SendErrorReportButton", () => {
     expect(screen.getByRole("button")).toBeDisabled();
   });
 
-  it.each([
-    { state: ConnectionState.CONNECTING },
-    { state: ConnectionState.CLOSING },
-    { state: ConnectionState.NOT_STARTED },
-    {
-      state: ConnectionState.CLOSED,
-      code: WebSocketClosedReason.KERNEL_DISCONNECTED,
-      reason: "offline",
-    },
-  ])(
-    "does not send from a stale snapshot while the browser is %j",
-    (connection) => {
-      const { store } = renderButton();
-      act(() => store.set(connectionAtom, connection));
-      expect(screen.getByRole("button")).toBeDisabled();
-      send();
-      expect(API.post).not.toHaveBeenCalled();
-    },
-  );
-
   it.each([
     [new HTTPError(409, "Conflict"), "No agent attached"],
     [new HTTPError(500, "Server error"), "Could not send error"],

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

@@ -137,5 +137,11 @@ describe("FileExplorer upload destination", () => {
       }),
     ).toBeVisible();
     expect(screen.queryByText(".hidden")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("file-explorer-hidden-files-button"));
+    expect(await screen.findByText(".hidden")).toBeVisible();
+    expect(
+      screen.getByRole("button", { name: "Upload files to workspace" }),
+    ).toBeVisible();
   });
 });

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

@@ -0,0 +1,91 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { EditRequests } from "@/core/network/types";
+import { Deferred } from "@/utils/Deferred";
+import { RequestingTree } from "../requesting-tree";
+import { useFileSearch } from "../use-file-search";
+
+const sendSearchFiles = vi.hoisted(() =>
+  vi.fn<EditRequests["sendSearchFiles"]>(),
+);
+vi.mock("@/core/network/requests", () => ({
+  useRequestClient: () => ({ sendSearchFiles }),
+}));
+
+describe("useFileSearch", () => {
+  let tree: RequestingTree;
+
+  beforeEach(async () => {
+    sendSearchFiles.mockReset();
+    tree = new RequestingTree({
+      getRoots: vi.fn().mockResolvedValue({
+        roots: [{ path: "/root", name: "workspace", isPrimary: true }],
+      }),
+      listFiles: vi.fn().mockResolvedValue({ files: [], root: "/root" }),
+      createFileOrFolder: vi.fn(),
+      deleteFileOrFolder: vi.fn(),
+      copyFileOrFolder: vi.fn(),
+      renameFileOrFolder: vi.fn(),
+    });
+    await tree.initialize(() => undefined);
+  });
+
+  it("derives loading for a refetch and a changed hidden-file filter", async () => {
+    sendSearchFiles.mockResolvedValue({
+      files: [],
+      query: "file",
+      totalFound: 0,
+    });
+    const { result, rerender } = renderHook(
+      ({ showHiddenFiles }) =>
+        useFileSearch({ query: "file", tree, showHiddenFiles }),
+      { initialProps: { showHiddenFiles: false } },
+    );
+    await waitFor(() => expect(result.current.state.status).toBe("success"));
+
+    const pending = new Deferred<
+      Awaited<ReturnType<EditRequests["sendSearchFiles"]>>
+    >();
+    sendSearchFiles.mockReturnValue(pending.promise);
+    act(() => result.current.refetch());
+    expect(result.current.state.status).toBe("loading");
+    await act(async () =>
+      pending.resolve({ files: [], query: "file", totalFound: 0 }),
+    );
+    expect(result.current.state.status).toBe("success");
+
+    sendSearchFiles.mockReturnValue(new Promise(() => undefined));
+    rerender({ showHiddenFiles: true });
+    expect(result.current.state.status).toBe("loading");
+    await waitFor(() =>
+      expect(sendSearchFiles).toHaveBeenLastCalledWith(
+        expect.objectContaining({ includeHidden: true }),
+      ),
+    );
+  });
+
+  it("keeps superseded scans serial and ignores their results", async () => {
+    const first = new Deferred<
+      Awaited<ReturnType<EditRequests["sendSearchFiles"]>>
+    >();
+    sendSearchFiles
+      .mockReturnValueOnce(first.promise)
+      .mockResolvedValue({ files: [], query: "file", totalFound: 0 });
+    const { result } = renderHook(() =>
+      useFileSearch({ query: "file", tree, showHiddenFiles: false }),
+    );
+    await waitFor(() => expect(sendSearchFiles).toHaveBeenCalledOnce());
+
+    act(() => result.current.refetch());
+    expect(sendSearchFiles).toHaveBeenCalledOnce();
+    expect(result.current.state.status).toBe("loading");
+    await act(async () =>
+      first.resolve({ files: [], query: "file", totalFound: 0 }),
+    );
+
+    expect(sendSearchFiles).toHaveBeenCalledTimes(2);
+    expect(result.current.state.status).toBe("success");
+  });
+});

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

@@ -201,11 +201,16 @@ export const FileExplorer: React.FC<{
     () => filterHiddenTree(data, showHiddenFiles),
     [data, showHiddenFiles],
   );
-  React.useEffect(() => {
-    if (selectedFolder && !treeContainsId(visibleData, selectedFolder.id)) {
-      setSelectedFolder(null);
-    }
-  }, [selectedFolder, visibleData]);
+  const selectedFolderId = selectedFolder?.id;
+  const selectedFolderVisible = React.useMemo(
+    () =>
+      selectedFolderId === undefined ||
+      treeContainsId(visibleData, selectedFolderId),
+    [visibleData, selectedFolderId],
+  );
+  if (!selectedFolderVisible) {
+    setSelectedFolder(null);
+  }
   const contextValue = React.useMemo<FileExplorerContextValue>(
     () => ({
       tree,

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

@@ -9,7 +9,7 @@ import {
   SaveIcon,
 } from "lucide-react";
 import type React from "react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { renderShortcut } from "@/components/shortcuts/renderShortcut";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
@@ -82,7 +82,9 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   // carry no draft to preserve.
   // We use a ref for internalValue so we don't call this effect on each keystroke
   const internalValueRef = useRef<string>(internalValue);
-  internalValueRef.current = internalValue;
+  useLayoutEffect(() => {
+    internalValueRef.current = internalValue;
+  }, [internalValue]);
   useEffect(() => {
     return () => {
       if (

package/src/components/editor/file-tree/use-file-search.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRequestClient } from "@/core/network/requests";
 import { useDebounce } from "@/hooks/useDebounce";
 import {
@@ -34,20 +34,29 @@ export function useFileSearch({
 }): { state: FileSearchState; refetch: () => void } {
   const { sendSearchFiles } = useRequestClient();
   const debouncedQuery = useDebounce(query, 300);
-  const pending = useRef<Promise<void>>(Promise.resolve());
+  // Nullable so the ref is not built on every render
+  const pending = useRef<Promise<void> | null>(null);
   const [revision, setRevision] = useState(0);
   const refetch = useCallback(() => setRevision((value) => value + 1), []);
-  const [result, setResult] = useState<FileSearchState>({ status: "idle" });
+  const requestIdentity = useMemo(
+    () => ({ query, tree, showHiddenFiles, revision, sendSearchFiles }),
+    [query, tree, showHiddenFiles, revision, sendSearchFiles],
+  );
+  const [result, setResult] = useState<{
+    requestIdentity: typeof requestIdentity;
+    state: FileSearchState;
+  }>();
 
   useEffect(() => {
+    // Read inputs through requestIdentity so it alone drives new requests
+    const { query, tree, showHiddenFiles, sendSearchFiles } = requestIdentity;
     let cancelled = false;
     if (!query || query !== debouncedQuery) {
       return;
     }
-    setResult({ status: "loading", query });
     // Let the in-flight server scan finish before starting another. Superseded
     // queued queries and remaining roots are skipped, keeping scan work bounded.
-    const request = pending.current.then(async () => {
+    const request = (pending.current ?? Promise.resolve()).then(async () => {
       const filesByPath = new Map<string, FileTreeNode>();
       let rootLimitReached = false;
       let failedRootCount = 0;
@@ -88,9 +97,12 @@ export function useFileSearch({
       if (!cancelled) {
         if (roots.length > 0 && failedRootCount === roots.length) {
           setResult({
-            status: "error",
-            query,
-            error: new Error("Could not search any root"),
+            requestIdentity,
+            state: {
+              status: "error",
+              query,
+              error: new Error("Could not search any root"),
+            },
           });
           return;
         }
@@ -110,33 +122,35 @@ export function useFileSearch({
             rank(left) - rank(right) || left.name.localeCompare(right.name),
         );
         setResult({
-          status: "success",
-          isPartial: failedRootCount > 0,
-          query,
-          files: sortedFiles.slice(0, RESULT_LIMIT),
-          hasMore: rootLimitReached || sortedFiles.length > RESULT_LIMIT,
+          requestIdentity,
+          state: {
+            status: "success",
+            isPartial: failedRootCount > 0,
+            query,
+            files: sortedFiles.slice(0, RESULT_LIMIT),
+            hasMore: rootLimitReached || sortedFiles.length > RESULT_LIMIT,
+          },
         });
       }
     });
     pending.current = request.catch((error: unknown) => {
       if (!cancelled) {
-        setResult({ status: "error", query, error });
+        setResult({
+          requestIdentity,
+          state: { status: "error", query, error },
+        });
       }
     });
     return () => {
       cancelled = true;
     };
-  }, [query, debouncedQuery, tree, showHiddenFiles, revision, sendSearchFiles]);
+  }, [debouncedQuery, requestIdentity]);
 
   if (!query) {
     return { state: { status: "idle" }, refetch };
   }
-  if (
-    query !== debouncedQuery ||
-    result.status === "idle" ||
-    result.query !== query
-  ) {
+  if (query !== debouncedQuery || result?.requestIdentity !== requestIdentity) {
     return { state: { status: "loading", query }, refetch };
   }
-  return { state: result, refetch };
+  return { state: result.state, refetch };
 }

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

@@ -41,6 +41,7 @@ export const NotebookBanner: React.FC<Props> = ({ width }) => {
               {banner.title}
             </span>
             <Button
+              aria-label={`Dismiss ${banner.title}`}
               data-testid="remove-banner-button"
               variant="text"
               size="icon"

package/src/components/editor/output/MarimoTracebackOutput.tsx

@@ -248,7 +248,7 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
             <Tooltip content={tooltipContent}>
               <button
                 type="button"
-                className="ml-1 p-1 rounded-sm hover:bg-muted transition-all inline"
+                className="ml-1 p-1 rounded-sm hover:bg-muted transition-colors inline"
               >
                 <BugPlayIcon
                   onClick={() => {
@@ -274,7 +274,7 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
     return (
       <div
         className="inline-block cursor-pointer text-destructive hover:underline"
-        onClick={(_) => {
+        onClick={() => {
           getRequestClient().openFile({
             path: info.filePath,
             lineNumber: info.lineNumber,

package/src/components/editor/output/ansi-reduce.ts

@@ -358,6 +358,7 @@ export class AnsiReducer {
 
 export type StringOutputMessage = Omit<OutputMessage, "data"> & {
   data: string;
+  id?: number;
 };
 
 /**
@@ -369,6 +370,7 @@ export class StatefulOutputMessage implements OutputMessage {
   public readonly channel: OutputMessage["channel"];
   public readonly timestamp: OutputMessage["timestamp"];
   public readonly code: OutputMessage["code"];
+  public readonly id: StringOutputMessage["id"];
   private ansiReducer = new AnsiReducer();
   private _data: string;
 
@@ -385,6 +387,7 @@ export class StatefulOutputMessage implements OutputMessage {
       message.timestamp,
       ansiReducer,
       message.code,
+      message.id,
     );
   }
 
@@ -394,11 +397,13 @@ export class StatefulOutputMessage implements OutputMessage {
     timestamp: OutputMessage["timestamp"],
     ansiReducer: AnsiReducer,
     code: OutputMessage["code"],
+    id: StringOutputMessage["id"],
   ) {
     this.mimetype = mimetype;
     this.channel = channel;
     this.timestamp = timestamp;
     this.code = code;
+    this.id = id;
     this.ansiReducer = ansiReducer;
     this._data = this.ansiReducer.render();
   }
@@ -411,6 +416,7 @@ export class StatefulOutputMessage implements OutputMessage {
       this.timestamp,
       this.ansiReducer,
       this.code,
+      this.id,
     );
   }
 

package/src/components/editor/output/console/ConsoleOutput.tsx

@@ -6,7 +6,7 @@ import {
   ChevronsUpDownIcon,
   WrapTextIcon,
 } from "lucide-react";
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useState } from "react";
 import { ToggleButton } from "react-aria-components";
 import { DebuggerControls } from "@/components/debugger/debugger-code";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
@@ -16,8 +16,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
 import { isInternalCellName } from "@/core/cells/names";
 import { useExpandedConsoleOutput } from "@/core/cells/outputs";
-import type { WithResponse } from "@/core/cells/types";
-import type { OutputMessage } from "@/core/kernel/messages";
+import type { ConsoleOutputMessage } from "@/core/cells/types";
 import {
   type UseInputHistoryReturn,
   useInputHistory,
@@ -49,31 +48,21 @@ export const CONSOLE_CLEAR_DEBOUNCE_MS = 200;
  */
 function useDebouncedConsoleOutputs<T>(outputs: T[]): T[] {
   const [debouncedOutputs, setDebouncedOutputs] = useState(outputs);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // Non-empty outputs: apply immediately and cancel any pending clear
+  // Non-empty outputs: apply immediately. Effect cleanup cancels pending clears.
   if (outputs.length > 0 && debouncedOutputs !== outputs) {
-    if (timerRef.current !== null) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
     setDebouncedOutputs(outputs);
   }
 
   // Empty outputs: delay the clear so new outputs can arrive first
   useEffect(() => {
-    if (outputs.length === 0 && timerRef.current === null) {
-      timerRef.current = setTimeout(() => {
-        timerRef.current = null;
-        setDebouncedOutputs([]);
-      }, CONSOLE_CLEAR_DEBOUNCE_MS);
+    if (outputs.length > 0) {
+      return;
     }
-    return () => {
-      if (timerRef.current !== null) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
+    const timer = setTimeout(() => {
+      setDebouncedOutputs([]);
+    }, CONSOLE_CLEAR_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
   }, [outputs]);
 
   return debouncedOutputs;
@@ -83,7 +72,7 @@ interface Props {
   cellId: CellId;
   cellName: string;
   className?: string;
-  consoleOutputs: WithResponse<OutputMessage>[];
+  consoleOutputs: ConsoleOutputMessage[];
   stale: boolean;
   interrupted: boolean;
   debuggerActive: boolean;
@@ -251,19 +240,24 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
             return null;
           }
 
+          const originalIdx = consoleOutputs.length - idx - 1;
+          // Outputs render in reverse, so the reversed index shifts on every
+          // new line. The assigned id survives collapse and truncation. The
+          // original position is the fallback for outputs without one.
+          const key = output.id ?? `position-${originalIdx}`;
+
           if (output.channel === "stdin") {
             invariant(
               typeof output.data === "string",
               "Expected data to be a string",
             );
 
-            const originalIdx = consoleOutputs.length - idx - 1;
             const isPassword = output.mimetype === "text/password";
 
             if (output.response == null && lastStdInputIdx === idx) {
               return (
                 <StdInput
-                  key={idx}
+                  key={key}
                   output={output.data}
                   isPdb={isPdb}
                   isPassword={isPassword}
@@ -278,7 +272,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
 
             return (
               <StdInputWithResponse
-                key={idx}
+                key={key}
                 output={output.data}
                 response={output.response}
                 isPassword={isPassword}
@@ -288,7 +282,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
           }
 
           return (
-            <React.Fragment key={idx}>
+            <React.Fragment key={key}>
               <OutputRenderer
                 cellId={cellId}
                 onRefactorWithAI={onRefactorWithAI}