@marimo-team/islands 0.25.3-dev26 → 0.25.3-dev262

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

@@ -0,0 +1,92 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { atom, createStore, Provider } from "jotai";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { createDocumentModel } from "@/core/notebook/document";
+import { document } from "@/core/notebook/document/__tests__/fixtures";
+import {
+  type FakeEdit,
+  fakeBackend,
+} from "@/core/notebook/replica/__tests__/fixtures";
+import { activeDocumentModelAtom } from "@/core/session/active-notebook";
+import { DocumentSyncStatus } from "../footer-items/document-sync-status";
+
+const lifetimes: AbortController[] = [];
+
+afterEach(() => {
+  act(() => lifetimes.splice(0).forEach((controller) => controller.abort()));
+});
+
+const conflict = {
+  ok: false as const,
+  status: 409,
+  problem: {
+    type: "tag:marimo.io,2026:host/conflict",
+    title: "Conflict",
+    status: 409,
+    detail: "cell c1 has changed since it was read.",
+  },
+};
+
+function setup(edit: FakeEdit) {
+  const store = createStore();
+  const model = createDocumentModel({
+    store,
+    documentAtom: atom(document()),
+    backendAtom: atom(fakeBackend({ edit })),
+  });
+  const controller = new AbortController();
+  lifetimes.push(controller);
+  model.start({ signal: controller.signal });
+  store.set(activeDocumentModelAtom, model);
+  render(
+    <Provider store={store}>
+      <TooltipProvider>
+        <DocumentSyncStatus />
+      </TooltipProvider>
+    </Provider>,
+  );
+  return { store, model };
+}
+
+describe("DocumentSyncStatus", () => {
+  it("renders nothing while edits reach the server", () => {
+    setup(vi.fn<FakeEdit>());
+    expect(screen.queryByTestId("footer-document-sync")).toBeNull();
+  });
+
+  it("shows a rejected edit and resubmits it on click", async () => {
+    const accepted = document().revision;
+    const edit = vi
+      .fn<FakeEdit>()
+      .mockResolvedValueOnce(conflict)
+      .mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        data: {
+          document: { ...accepted, version: 2, etag: "document-2" },
+          cells: {},
+        },
+      });
+    const { store, model } = setup(edit);
+
+    await act(async () => {
+      store.set(model.editAtom, (tx) => tx.setCode("c1", "x = 2"));
+      await model.flush().catch(() => undefined);
+    });
+    const item = screen.getByTestId("footer-document-sync");
+    expect(item).toHaveAttribute(
+      "aria-label",
+      "Edits are not reaching the server",
+    );
+
+    await act(async () => {
+      fireEvent.click(item);
+      await Promise.resolve();
+    });
+    expect(edit).toHaveBeenCalledTimes(2);
+    expect(screen.queryByTestId("footer-document-sync")).toBeNull();
+  });
+});

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

@@ -1,11 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { act, render, screen, within } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { describe, expect, it, vi } from "vitest";
+import type { ChatStatus } from "ai";
+import { useChatGeneration } from "@/components/chat/use-chat-generation";
 import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { stagedAICellsAtom, visibleForTesting } from "@/core/ai/staged-cells";
+import { stagedAICellsAtom } from "@/core/ai/staged-cells";
+import { scrollAndHighlightCell } from "../../../links/cell-link";
+import { StagedAICellFooter } from "../../../cell/StagedAICell";
 import { PendingAICells } from "../pending-ai-cells";
 
 vi.mock("@/components/editor/cell/useDeleteCell", () => ({
@@ -14,14 +18,17 @@ vi.mock("@/components/editor/cell/useDeleteCell", () => ({
 
 vi.mock("@/core/cells/cells", () => ({
   getCellEditorView: vi.fn(),
+}));
+vi.mock("@/core/cells/actions", () => ({
   useCellActions: () => ({
-    createNewCell: vi.fn(),
-    updateCellCode: vi.fn(),
+    createCell: vi.fn(),
+    setCellCode: vi.fn(),
   }),
 }));
 
 vi.mock("@/components/editor/cell/useRunCells", () => ({
   useRunCells: () => vi.fn(),
+  useRunCell: () => vi.fn(),
 }));
 
 vi.mock("@/components/editor/links/cell-link", () => ({
@@ -29,49 +36,109 @@ vi.mock("@/components/editor/links/cell-link", () => ({
 }));
 
 describe("PendingAICells", () => {
-  it("disables bulk actions while cells are still generating", () => {
+  it("navigates between pending cells through named controls", () => {
     const store = createStore();
-    const generationId = Symbol("staged-cell-generation");
+    const first = cellId("first-pending-cell");
+    const second = cellId("second-pending-cell");
+    const third = cellId("third-pending-cell");
     store.set(
       stagedAICellsAtom,
-      new Map([[cellId("generated-cell"), { type: "add_cell" }]]),
+      new Map([
+        [first, { type: "add_cell" }],
+        [second, { type: "add_cell" }],
+        [third, { type: "add_cell" }],
+      ]),
     );
-    store.set(visibleForTesting.stagedGenerationAtom, {
-      id: generationId,
-      status: "in_progress",
-      cellIds: [cellId("generated-cell")],
-    });
 
-    const view = (
+    render(
       <Provider store={store}>
         <TooltipProvider>
           <PendingAICells />
         </TooltipProvider>
-      </Provider>
+      </Provider>,
     );
-    const { rerender } = render(view);
-
-    const acceptButton = screen.getByRole("button", { name: "Keep all" });
-    const acceptButtons = within(
-      acceptButton.parentElement as HTMLElement,
-    ).getAllByRole("button");
-    expect(acceptButtons).toHaveLength(2);
-    for (const button of acceptButtons) {
-      expect(button).toBeDisabled();
-    }
-    expect(screen.getByRole("button", { name: "Discard all" })).toBeDisabled();
 
-    act(() => {
-      store.set(visibleForTesting.stagedGenerationAtom, {
-        id: generationId,
-        status: "complete",
-      });
+    const next = screen.getByRole("button", { name: "Next pending AI cell" });
+    const previous = screen.getByRole("button", {
+      name: "Previous pending AI cell",
     });
-    rerender(view);
 
-    for (const button of acceptButtons) {
-      expect(button).toBeEnabled();
-    }
-    expect(screen.getByRole("button", { name: "Discard all" })).toBeEnabled();
+    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();
   });
 });
+
+function ChatGeneration({ status }: { status: ChatStatus }) {
+  useChatGeneration(status);
+  return null;
+}
+
+it("locks staged edits during generation and unlocks after completion, stop, error, or unmount", () => {
+  const store = createStore();
+  const pendingCell = cellId("pending-cell");
+  store.set(stagedAICellsAtom, new Map([[pendingCell, { type: "add_cell" }]]));
+  const ui = (status?: ChatStatus) => (
+    <Provider store={store}>
+      <TooltipProvider>
+        {status && <ChatGeneration status={status} />}
+        <PendingAICells />
+        <StagedAICellFooter cellId={pendingCell} />
+      </TooltipProvider>
+    </Provider>
+  );
+  const { rerender } = render(ui("ready"));
+  const keep = screen.getByRole("button", { name: "Keep all" });
+  const discard = screen.getByRole("button", { name: "Discard all" });
+  const keepCell = screen.getByRole("button", { name: "Keep cell" });
+  const discardCell = screen.getByRole("button", { name: "Discard cell" });
+  const keepAndRun = keep.parentElement!.querySelectorAll("button")[1];
+  for (const status of [
+    "submitted",
+    "streaming",
+    "ready",
+    "submitted",
+    "ready",
+    "submitted",
+    "error",
+    "streaming",
+    undefined,
+  ] as const) {
+    rerender(ui(status));
+    const isGenerating = status === "submitted" || status === "streaming";
+    for (const button of [keep, discard, keepAndRun, keepCell, discardCell]) {
+      expect(button.hasAttribute("disabled")).toBe(isGenerating);
+      if (isGenerating) {
+        fireEvent.click(button);
+      }
+    }
+    expect(store.get(stagedAICellsAtom).has(pendingCell)).toBe(true);
+  }
+
+  fireEvent.click(keep);
+  expect(store.get(stagedAICellsAtom).size).toBe(0);
+});

package/src/components/editor/chrome/wrapper/__tests__/useAskAiAboutCell.test.tsx

@@ -0,0 +1,58 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import type { PropsWithChildren } from "react";
+import { beforeEach, expect, it, vi } from "vitest";
+import { pendingAiPromptAtom } from "@/core/ai/state";
+import { CellId } from "@/core/cells/ids";
+import { aiPanelTabAtom } from "../useAiPanel";
+import { useAskAiAboutCell } from "../useAskAiAboutCell";
+
+const { aiAtom, openApplication, saveModeChange } = await vi.hoisted(
+  async () => {
+    const { atom } = await import("jotai");
+    return {
+      aiAtom: atom<{ mode?: "ask" | "agent" | "code_mode" }>({}),
+      openApplication: vi.fn(),
+      saveModeChange: vi.fn().mockResolvedValue(undefined),
+    };
+  },
+);
+vi.mock("@/core/config/config", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  aiAtom,
+}));
+vi.mock("@/core/ai/config", () => ({
+  useAIConfigActions: () => ({ saveModeChange }),
+}));
+vi.mock("../../state", () => ({
+  useChromeActions: () => ({ openApplication }),
+}));
+
+beforeEach(() => vi.clearAllMocks());
+it.each([undefined, "ask", "agent", "code_mode"] as const)(
+  "opens chat from %s mode without submitting or replacing the draft",
+  async (mode) => {
+    const store = createStore();
+    store.set(aiAtom, { mode });
+    store.set(aiPanelTabAtom, "agents");
+    const cellId = CellId.create();
+    const { result } = renderHook(useAskAiAboutCell, {
+      wrapper: ({ children }: PropsWithChildren) => (
+        <Provider store={store}>{children}</Provider>
+      ),
+    });
+    await act(() => result.current(cellId));
+    expect(openApplication).toHaveBeenCalledWith("ai");
+    expect(store.get(aiPanelTabAtom)).toBe("chat");
+    expect(saveModeChange.mock.calls).toEqual(
+      mode === "agent" || mode === "code_mode" ? [] : [["agent"]],
+    );
+    expect(store.get(pendingAiPromptAtom)).toEqual({
+      prompt: `@cell://${cellId} `,
+      submit: false,
+      append: true,
+    });
+  },
+);

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -4,6 +4,7 @@ import React, {
   Suspense,
   useEffect,
   useMemo,
+  useState,
 } from "react";
 import {
   type ImperativePanelHandle,
@@ -33,6 +34,7 @@ import { cn } from "@/utils/cn";
 import { ErrorBoundary } from "../../boundary/ErrorBoundary";
 import { raf2 } from "../../navigation/focus-utils";
 import { ContextAwarePanel } from "../panels/context-aware-panel/context-aware-panel";
+import { PanelHeaderActionsContext } from "../panels/panel-header";
 import { PanelSectionProvider } from "../panels/panel-context";
 import { RuntimeStatusToggle } from "../panels/runtime-status-toggle";
 import { useTheme } from "@/theme/useTheme";
@@ -327,99 +329,114 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     cache: <LazyCachePanel.Component />,
   };
 
+  const [headerActionsTarget, setHeaderActionsTarget] =
+    useState<HTMLDivElement | null>(null);
+
   const helpPaneBody = (
     <ErrorBoundary>
       <PanelSectionProvider value="sidebar">
-        <div className="flex flex-col h-full flex-1 overflow-hidden mr-[-4px]">
-          <div className="p-3 border-b flex justify-between items-center">
-            {selectedPanel === "dependencies" ? (
-              <div className="flex items-center justify-between flex-1">
-                <span className="text-sm text-(--slate-11) uppercase tracking-wide font-semibold">
-                  Dependencies
-                </span>
+        <PanelHeaderActionsContext.Provider
+          value={
+            selectedPanel === "ai" && (!agentsEnabled || aiPanelTab === "chat")
+              ? headerActionsTarget
+              : null
+          }
+        >
+          <div className="@container flex flex-col h-full flex-1 overflow-hidden mr-[-4px]">
+            <div className="p-3 border-b flex shrink-0 flex-wrap justify-between items-center gap-y-1">
+              {selectedPanel === "dependencies" ? (
+                <div className="flex items-center justify-between flex-1">
+                  <span className="text-sm text-(--slate-11) uppercase tracking-wide font-semibold">
+                    Dependencies
+                  </span>
+                  <Tabs
+                    value={dependencyPanelTab}
+                    onValueChange={(value) => {
+                      if (value === "minimap" || value === "graph") {
+                        setDependencyPanelTab(value);
+                      }
+                    }}
+                  >
+                    <TabsList>
+                      <TabsTrigger
+                        value="minimap"
+                        className="py-0.5 text-xs uppercase tracking-wide font-bold"
+                      >
+                        Minimap
+                      </TabsTrigger>
+                      <TabsTrigger
+                        value="graph"
+                        className="py-0.5 text-xs uppercase tracking-wide font-bold"
+                      >
+                        Graph
+                      </TabsTrigger>
+                    </TabsList>
+                  </Tabs>
+                </div>
+              ) : selectedPanel === "ai" && agentsEnabled ? (
                 <Tabs
-                  value={dependencyPanelTab}
+                  value={aiPanelTab}
                   onValueChange={(value) => {
-                    if (value === "minimap" || value === "graph") {
-                      setDependencyPanelTab(value);
+                    if (value === "chat" || value === "agents") {
+                      setAiPanelTab(value);
                     }
                   }}
                 >
                   <TabsList>
                     <TabsTrigger
-                      value="minimap"
+                      value="chat"
                       className="py-0.5 text-xs uppercase tracking-wide font-bold"
                     >
-                      Minimap
+                      Chat
                     </TabsTrigger>
                     <TabsTrigger
-                      value="graph"
+                      value="agents"
                       className="py-0.5 text-xs uppercase tracking-wide font-bold"
                     >
-                      Graph
+                      Agents
                     </TabsTrigger>
                   </TabsList>
                 </Tabs>
-              </div>
-            ) : selectedPanel === "ai" && agentsEnabled ? (
-              <Tabs
-                value={aiPanelTab}
-                onValueChange={(value) => {
-                  if (value === "chat" || value === "agents") {
-                    setAiPanelTab(value);
-                  }
-                }}
+              ) : (
+                <span className="text-sm text-(--slate-11) uppercase tracking-wide font-semibold flex-1">
+                  {selectedPanel === "ai" ? "Chat" : selectedPanel}
+                </span>
+              )}
+              <div
+                ref={setHeaderActionsTarget}
+                className="sidebar-panel-actions ml-auto min-w-0"
+              />
+              {selectedPanel === "packages" && (
+                <RuntimeStatusToggle section="sidebar" />
+              )}
+              <Button
+                data-testid="close-helper-pane"
+                className="m-0"
+                size="xs"
+                variant="text"
+                onClick={() => setIsSidebarOpen(false)}
               >
-                <TabsList>
-                  <TabsTrigger
-                    value="chat"
-                    className="py-0.5 text-xs uppercase tracking-wide font-bold"
-                  >
-                    Chat
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="agents"
-                    className="py-0.5 text-xs uppercase tracking-wide font-bold"
+                <XIcon className="w-4 h-4" />
+              </Button>
+            </div>
+            <Suspense>
+              <TooltipProvider>
+                {Object.entries(SIDEBAR_PANELS).map(([key, Panel]) => (
+                  <LazyActivity
+                    key={key}
+                    mode={
+                      isSidebarOpen && selectedPanel === key
+                        ? "visible"
+                        : "hidden"
+                    }
                   >
-                    Agents
-                  </TabsTrigger>
-                </TabsList>
-              </Tabs>
-            ) : (
-              <span className="text-sm text-(--slate-11) uppercase tracking-wide font-semibold flex-1">
-                {selectedPanel}
-              </span>
-            )}
-            {selectedPanel === "packages" && (
-              <RuntimeStatusToggle section="sidebar" />
-            )}
-            <Button
-              data-testid="close-helper-pane"
-              className="m-0"
-              size="xs"
-              variant="text"
-              onClick={() => setIsSidebarOpen(false)}
-            >
-              <XIcon className="w-4 h-4" />
-            </Button>
+                    {Panel}
+                  </LazyActivity>
+                ))}
+              </TooltipProvider>
+            </Suspense>
           </div>
-          <Suspense>
-            <TooltipProvider>
-              {Object.entries(SIDEBAR_PANELS).map(([key, Panel]) => (
-                <LazyActivity
-                  key={key}
-                  mode={
-                    isSidebarOpen && selectedPanel === key
-                      ? "visible"
-                      : "hidden"
-                  }
-                >
-                  {Panel}
-                </LazyActivity>
-              ))}
-            </TooltipProvider>
-          </Suspense>
-        </div>
+        </PanelHeaderActionsContext.Provider>
       </PanelSectionProvider>
     </ErrorBoundary>
   );
@@ -562,7 +579,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
         {/* Panel content */}
         <Suspense fallback={<div />}>
           <PanelSectionProvider value="developer-panel">
-            <div className="flex-1 overflow-hidden">
+            <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
               {Object.entries(DEVELOPER_PANELS).map(([key, Panel]) => (
                 <LazyActivity
                   key={key}

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

@@ -17,10 +17,10 @@ import {
 } from "@/components/ui/popover";
 import {
   type Attachment,
-  agentAttachmentsAtom,
   attachmentLabel,
-} from "@/core/attachments/state";
-import { agentToast } from "@/core/attachments/toast";
+  useNotebookAttachments,
+} from "@/core/notebook";
+import { agentToast } from "@/components/editor/agent-toast";
 import { pairConfigAtom } from "@/core/config/pair";
 import { stableSessionIdAtom } from "@/core/kernel/session";
 import { API } from "@/core/network/api";
@@ -29,7 +29,7 @@ import { FooterItem } from "../footer-item";
 
 export function AttachmentStatus() {
   const hostEnabled = useAtomValue(pairConfigAtom)?.hostEnabled;
-  const agents = useAtomValue(agentAttachmentsAtom);
+  const agents = useNotebookAttachments("agent");
   const [open, setOpen] = useState(false);
   const previous = useRef(new Set<string>());
   const automatic = useRef(false);

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

@@ -14,7 +14,7 @@ import {
   isAppConnected,
   isAppConnecting,
   isAppNotStarted,
-} from "@/core/websocket/connection-utils";
+} from "@/core/session/connection-utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
 import { Strings } from "@/utils/strings";

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

@@ -0,0 +1,54 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { atom, useAtomValue } from "jotai";
+import { AlertCircleIcon } from "lucide-react";
+import type React from "react";
+import { activeDocumentModelAtom } from "@/core/session/active-notebook";
+import { FooterItem } from "../footer-item";
+
+/** The active notebook's document sync status, or null without a model. */
+const syncStatusAtom = atom((get) => {
+  const model = get(activeDocumentModelAtom);
+  return model === null ? null : get(model.syncStatusAtom);
+});
+
+/**
+ * Shown when this client's edits stop reaching the server.
+ *
+ * Typing keeps working locally and Run still uses the editor's code, but
+ * other clients stop seeing the edits and Save fails until they are
+ * through. A rejected edit is retried on click.
+ */
+export const DocumentSyncStatus: React.FC = () => {
+  const model = useAtomValue(activeDocumentModelAtom);
+  const status = useAtomValue(syncStatusAtom);
+  if (model === null || status === null || status.status !== "error") {
+    return null;
+  }
+  const retry = status.retryable
+    ? () => {
+        // The status shows the outcome, so a failed retry needs no handling.
+        model.retry().catch(() => undefined);
+      }
+    : undefined;
+  const detail = status.problem?.detail ?? status.error.message;
+  return (
+    <FooterItem
+      tooltip={
+        <div className="w-[260px] space-y-1">
+          <div>Edits are not reaching the server.</div>
+          <div className="text-muted-foreground">{detail}</div>
+          <div>
+            {retry ? "Click to retry." : "Reload the page to continue."}
+          </div>
+        </div>
+      }
+      selected={false}
+      onClick={retry}
+      aria-label="Edits are not reaching the server"
+      data-testid="footer-document-sync"
+    >
+      <AlertCircleIcon className="w-4 h-4 text-destructive" />
+    </FooterItem>
+  );
+};

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

@@ -14,7 +14,7 @@ import type {
   LspRestartResponse,
 } from "@/core/network/types";
 import { isWasm } from "@/core/wasm/utils";
-import { isAppConnected } from "@/core/websocket/connection-utils";
+import { isAppConnected } from "@/core/session/connection-utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
 

package/src/components/editor/chrome/wrapper/footer-items/machine-stats.tsx

@@ -10,7 +10,7 @@ import { connectionAtom } from "@/core/network/connection";
 import { useRequestClient } from "@/core/network/requests";
 import type { UsageResponse } from "@/core/network/types";
 import { isWasm } from "@/core/wasm/utils";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
 import { cn } from "@/utils/cn";

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