@marimo-team/islands 0.22.1-dev9 → 0.22.2

package/src/components/editor/__tests__/data-attributes.test.tsx

@@ -33,108 +33,107 @@ beforeAll(() => {
 });
 
 describe("Cell data attributes", () => {
-  it.each([
-    "edit",
-    "read",
-    "present",
-  ])("should render cell with data-cell-id and data-cell-name in %s mode", (mode) => {
-    const { store, wrapper } = createTestWrapper();
-    const cid = cellId("test");
-    const cellName = "test_cell";
+  it.each(["edit", "read", "present"])(
+    "should render cell with data-cell-id and data-cell-name in %s mode",
+    (mode) => {
+      const { store, wrapper } = createTestWrapper();
+      const cid = cellId("test");
+      const cellName = "test_cell";
 
-    const userConfig: UserConfig = {
-      display: {
-        cell_output: "below",
-        code_editor_font_size: 14,
-        dataframes: "rich",
-        default_table_page_size: 10,
-        default_table_max_columns: 10,
-        default_width: "normal",
-        theme: "light",
-        reference_highlighting: false,
-      },
-      keymap: { preset: "default" },
-      completion: {
-        activate_on_typing: true,
-        signature_hint_on_typing: false,
-        copilot: false,
-      },
-      formatting: { line_length: 88 },
-      package_management: { manager: "pip" },
-      runtime: {
-        auto_instantiate: false,
-        default_sql_output: "native",
-        auto_reload: "off",
-        on_cell_change: "lazy",
-        watcher_on_save: "lazy",
-        reactive_tests: true,
-        output_max_bytes: 1_000_000,
-        std_stream_max_bytes: 1_000_000,
-        pythonpath: [],
-        dotenv: [".env"],
-      },
-      server: {
-        browser: "default",
-        follow_symlink: false,
-      },
-      save: { autosave: "off", autosave_delay: 1000, format_on_save: false },
-      ai: {},
-    } as UserConfig;
+      const userConfig: UserConfig = {
+        display: {
+          cell_output: "below",
+          code_editor_font_size: 14,
+          dataframes: "rich",
+          default_table_page_size: 10,
+          default_table_max_columns: 10,
+          default_width: "normal",
+          theme: "light",
+          reference_highlighting: false,
+        },
+        keymap: { preset: "default" },
+        completion: {
+          activate_on_typing: true,
+          signature_hint_on_typing: false,
+          copilot: false,
+        },
+        formatting: { line_length: 88 },
+        package_management: { manager: "pip" },
+        runtime: {
+          auto_instantiate: false,
+          default_sql_output: "native",
+          auto_reload: "off",
+          on_cell_change: "lazy",
+          watcher_on_save: "lazy",
+          reactive_tests: true,
+          output_max_bytes: 1_000_000,
+          std_stream_max_bytes: 1_000_000,
+          pythonpath: [],
+          dotenv: [".env"],
+        },
+        server: {
+          browser: "default",
+          follow_symlink: false,
+        },
+        save: { autosave: "off", autosave_delay: 1000, format_on_save: false },
+        ai: {},
+      } as UserConfig;
 
-    const notebook = MockNotebook.notebookState({
-      cellData: {
-        [cid]: {
-          code: "",
-          name: cellName,
-          edited: false,
-          serializedEditorState: null,
-          config: {
-            disabled: false,
-            hide_code: false,
-            column: null,
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cid]: {
+            code: "",
+            name: cellName,
+            edited: false,
+            serializedEditorState: null,
+            config: {
+              disabled: false,
+              hide_code: false,
+              column: null,
+            },
           },
         },
-      },
-    });
+      });
 
-    notebook.cellRuntime[cid] = createCellRuntimeState({
-      status: "idle",
-      output: null,
-      consoleOutputs: [],
-      interrupted: false,
-      errored: false,
-      stopped: false,
-      staleInputs: false,
-      runStartTimestamp: null,
-      lastRunStartTimestamp: null,
-      runElapsedTimeMs: null,
-      debuggerActive: false,
-      outline: null,
-    });
+      notebook.cellRuntime[cid] = createCellRuntimeState({
+        status: "idle",
+        output: null,
+        consoleOutputs: [],
+        interrupted: false,
+        errored: false,
+        stopped: false,
+        staleInputs: false,
+        runStartTimestamp: null,
+        lastRunStartTimestamp: null,
+        runElapsedTimeMs: null,
+        debuggerActive: false,
+        outline: null,
+      });
 
-    store.set(notebookAtom, notebook);
+      store.set(notebookAtom, notebook);
 
-    const { container } = render(
-      <TooltipProvider>
-        <Cell
-          cellId={cid}
-          mode={mode as AppMode}
-          canDelete={true}
-          userConfig={userConfig}
-          isCollapsed={false}
-          collapseCount={0}
-          canMoveX={false}
-          theme="light"
-          showPlaceholder={false}
-        />
-      </TooltipProvider>,
-      { wrapper },
-    );
+      const { container } = render(
+        <TooltipProvider>
+          <Cell
+            cellId={cid}
+            mode={mode as AppMode}
+            canDelete={true}
+            userConfig={userConfig}
+            isCollapsed={false}
+            collapseCount={0}
+            canMoveX={false}
+            theme="light"
+            showPlaceholder={false}
+          />
+        </TooltipProvider>,
+        { wrapper },
+      );
 
-    const cellElement = container.querySelector(`[data-cell-id="${cid}"]`);
-    expect(cellElement).toBeTruthy();
-    expect(cellElement?.getAttribute("data-cell-name")).toBe(cellName);
-  });
+      const cellElement = container.querySelector(`[data-cell-id="${cid}"]`);
+      expect(cellElement).toBeTruthy();
+      expect(cellElement?.getAttribute("data-cell-name")).toBe(cellName);
+    },
+  );
 });
 
 describe("Output data attributes", () => {

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

@@ -176,7 +176,7 @@ describe("DynamicFavicon", () => {
       const { rerender } = render(<DynamicFavicon isRunning={true} />);
       rerender(<DynamicFavicon isRunning={false} />);
 
-      // eslint-disable-next-line @typescript-eslint/unbound-method
+      // oxlint-disable-next-line typescript/unbound-method
       expect(Notification.requestPermission).toHaveBeenCalled();
     });
   });

package/src/components/editor/actions/name-cell-input.tsx

@@ -14,8 +14,10 @@ import { useOnMount } from "@/hooks/useLifecycle";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 
-interface Props
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+interface Props extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "onChange"
+> {
   value: string;
   onChange: (newName: string) => void;
   placeholder?: string;

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

@@ -0,0 +1,179 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { copyToClipboard } from "@/utils/copy";
+import { Events } from "@/utils/events";
+import { Tooltip } from "@/components/ui/tooltip";
+import { assertNever } from "@/utils/assertNever";
+import { asRemoteURL, useRuntimeManager } from "@/core/runtime/config";
+
+type AgentTab = "claude" | "codex" | "opencode";
+
+function getMarimoCommand(): string {
+  return import.meta.env.DEV ? "uv run marimo" : "uvx marimo@latest";
+}
+
+function getPromptCommand(
+  agent: AgentTab,
+  url: string,
+  withToken: boolean,
+): string {
+  const tokenFlag = withToken ? " --with-token" : "";
+  const base = `${getMarimoCommand()} pair prompt --url '${url}'${tokenFlag}`;
+  switch (agent) {
+    case "claude":
+      return `claude "$(${base} --claude)"`;
+    case "codex":
+      return `codex "$(${base} --codex)"`;
+    case "opencode":
+      return `opencode "$(${base} --opencode)"`;
+    default:
+      assertNever(agent);
+  }
+}
+
+function maskToken(token: string): string {
+  if (token.length <= 4) {
+    return "****";
+  }
+  return `${"*".repeat(Math.min(token.length - 4, 8))}${token.slice(-4)}`;
+}
+
+const SKILL_INSTALL = "npx skills add marimo-team/marimo-pair";
+
+function useAuthToken(): string | null {
+  const [token, setToken] = useState<string | null>(null);
+  useEffect(() => {
+    fetch(asRemoteURL("/auth/token").href, { credentials: "include" })
+      .then((res) =>
+        res.ok ? (res.json() as Promise<{ token: string | null }>) : null,
+      )
+      .then((data) => setToken(data?.token ?? null))
+      .catch(() => setToken(null));
+  }, []);
+  return token;
+}
+
+export const PairWithAgentModal: React.FC<{
+  onClose: () => void;
+}> = ({ onClose }) => {
+  const [activeTab, setActiveTab] = useState<AgentTab>("claude");
+  const runtimeManager = useRuntimeManager();
+  const authToken = useAuthToken();
+  const hasToken = Boolean(authToken);
+  const remoteUrl = runtimeManager.httpURL.toString();
+  const promptCommand = getPromptCommand(activeTab, remoteUrl, hasToken);
+
+  return (
+    <DialogContent className="sm:max-w-lg">
+      <DialogHeader>
+        <DialogTitle>Pair with an agent</DialogTitle>
+        <DialogDescription>
+          Use an AI coding agent to pair-program on this notebook.{" "}
+          <a
+            href="https://links.marimo.app/marimo-pair"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline"
+          >
+            Learn more
+          </a>
+          .
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="flex flex-col gap-4 py-2">
+        <div className="flex flex-col gap-2">
+          <span className="text-sm font-medium">1. Install the skill</span>
+          <CommandBlock command={SKILL_INSTALL} />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <span className="text-sm font-medium">2. Run in your terminal</span>
+          <Tabs
+            value={activeTab}
+            onValueChange={(v) => setActiveTab(v as AgentTab)}
+          >
+            <TabsList className="w-full">
+              <TabsTrigger value="claude" className="flex-1">
+                Claude
+              </TabsTrigger>
+              <TabsTrigger value="codex" className="flex-1">
+                Codex
+              </TabsTrigger>
+              <TabsTrigger value="opencode" className="flex-1">
+                OpenCode
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="claude" className="mt-3">
+              <CommandBlock command={promptCommand} />
+            </TabsContent>
+            <TabsContent value="codex" className="mt-3">
+              <CommandBlock command={promptCommand} />
+            </TabsContent>
+            <TabsContent value="opencode" className="mt-3">
+              <CommandBlock command={promptCommand} />
+            </TabsContent>
+          </Tabs>
+        </div>
+
+        {hasToken && authToken && (
+          <div className="flex flex-col gap-2">
+            <span className="text-sm font-medium">
+              3. Paste when prompted for token
+            </span>
+            <CommandBlock command={authToken} display={maskToken(authToken)} />
+          </div>
+        )}
+      </div>
+
+      <DialogFooter>
+        <Button variant="secondary" onClick={onClose}>
+          Close
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  );
+};
+
+const CommandBlock: React.FC<{ command: string; display?: string }> = ({
+  command,
+  display,
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const copy = Events.stopPropagation(async (e) => {
+    e.preventDefault();
+    await copyToClipboard(command);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  });
+
+  return (
+    <div className="flex items-center gap-2 rounded-md bg-muted px-3 py-2 font-mono text-xs">
+      <code className="flex-1 select-all break-words">
+        {display ?? command}
+      </code>
+      <Tooltip content="Copied!" open={copied}>
+        <Button onClick={copy} size="xs" variant="ghost">
+          {copied ? (
+            <CheckIcon size={14} strokeWidth={1.5} />
+          ) : (
+            <CopyIcon size={14} strokeWidth={1.5} />
+          )}
+        </Button>
+      </Tooltip>
+    </div>
+  );
+};

package/src/components/editor/actions/useCellActionButton.tsx

@@ -65,8 +65,10 @@ import { useSplitCellCallback } from "../cell/useSplitCell";
 import { NameCellInput } from "./name-cell-input";
 import type { ActionButton } from "./types";
 
-export interface CellActionButtonProps
-  extends Pick<CellData, "name" | "config"> {
+export interface CellActionButtonProps extends Pick<
+  CellData,
+  "name" | "config"
+> {
   cellId: CellId;
   status: RuntimeState;
   hasOutput: boolean;

package/src/components/editor/actions/useNotebookActions.tsx

@@ -36,6 +36,7 @@ import {
   PresentationIcon,
   SettingsIcon,
   Share2Icon,
+  SparklesIcon,
   Undo2Icon,
   XCircleIcon,
   YoutubeIcon,
@@ -45,6 +46,7 @@ import { settingDialogAtom } from "@/components/app-config/state";
 import { MarkdownIcon } from "@/components/editor/cell/code/icons";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { renderShortcut } from "@/components/shortcuts/renderShortcut";
+import { PairWithAgentModal } from "@/components/editor/actions/pair-with-agent-modal";
 import { ShareStaticNotebookModal } from "@/components/static-html/share-modal";
 import { toast } from "@/components/ui/use-toast";
 import {
@@ -343,6 +345,14 @@ export function useNotebookActions() {
       ],
     },
 
+    {
+      icon: <SparklesIcon size={14} strokeWidth={1.5} />,
+      label: "Pair with an agent",
+      handle: async () => {
+        openModal(<PairWithAgentModal onClose={closeModal} />);
+      },
+    },
+
     {
       icon: <Share2Icon size={14} strokeWidth={1.5} />,
       label: "Share",

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

@@ -122,7 +122,7 @@ export const AddCellWithAI: React.FC<{
     transport: new StreamingChunkTransport(
       {
         api: runtimeManager.getAiURL("completion").toString(),
-        headers: runtimeManager.headers(),
+        headers: () => runtimeManager.headers(),
         prepareSendMessagesRequest: async (options) => {
           const completionBody = await buildCompletionRequestBody(
             options.messages,
@@ -136,6 +136,7 @@ export const AddCellWithAI: React.FC<{
           };
 
           return {
+            api: runtimeManager.getAiURL("completion").toString(),
             body: body,
           };
         },

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

@@ -156,7 +156,7 @@ export const AiCompletionEditor: React.FC<Props> = ({
       // Use complete to pass the prompt directly, else input might be empty
       complete(initialPrompt);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [triggerImmediately]);
 
   // Focus the input

package/src/components/editor/app-container.tsx

@@ -31,7 +31,7 @@ export const AppContainer: React.FC<PropsWithChildren<Props>> = ({
       <StatusOverlay connection={connection} isRunning={isRunning} />
       <PyodideLoader>
         <WrappedWithSidebar>
-          {/** biome-ignore lint/correctness/useUniqueElementIds: ID is used by other components to grab the DOM element */}
+          {/** oxlint-ignore-next-line -- ID is used by other components to grab the DOM element */}
           <div
             id="App"
             data-config-width={width}

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

@@ -16,11 +16,10 @@ import "./cell-status.css";
 import { formatDistanceToNow } from "date-fns";
 import { Time } from "@/utils/time";
 
-export interface CellStatusComponentProps
-  extends Pick<
-    CellRuntimeState,
-    "status" | "runStartTimestamp" | "interrupted" | "lastRunStartTimestamp"
-  > {
+export interface CellStatusComponentProps extends Pick<
+  CellRuntimeState,
+  "status" | "runStartTimestamp" | "interrupted" | "lastRunStartTimestamp"
+> {
   editing: boolean;
   edited: boolean;
   disabled: boolean;

package/src/components/editor/cell/cell-context-menu.tsx

@@ -34,8 +34,10 @@ import {
   useCellActionButtons,
 } from "../actions/useCellActionButton";
 
-interface Props
-  extends Pick<CellActionButtonProps, "cellId" | "getEditorView"> {
+interface Props extends Pick<
+  CellActionButtonProps,
+  "cellId" | "getEditorView"
+> {
   children: React.ReactNode;
 }
 

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

@@ -47,7 +47,8 @@ import { useSplitCellCallback } from "../useSplitCell";
 import { LanguageToggles } from "./language-toggle";
 
 export interface CellEditorProps
-  extends Pick<CellRuntimeState, "status">,
+  extends
+    Pick<CellRuntimeState, "status">,
     Pick<CellData, "id" | "code" | "serializedEditorState" | "config"> {
   runCell: () => void;
   theme: Theme;
@@ -185,7 +186,7 @@ const CellEditorInternal = ({
         deleteCell: handleDelete,
         saveNotebook: saveOrNameNotebook,
         createManyBelow: (cells) => {
-          for (const code of [...cells].reverse()) {
+          for (const code of cells.toReversed()) {
             cellActions.createNewCell({
               code,
               before: false,

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

@@ -27,7 +27,8 @@ const toolbarItemVariants = cva(
 );
 
 interface ToolbarItemProps
-  extends VariantProps<typeof toolbarItemVariants>,
+  extends
+    VariantProps<typeof toolbarItemVariants>,
     React.HTMLAttributes<HTMLButtonElement> {
   tooltip: React.ReactNode;
   disabled?: boolean;

package/src/components/editor/chrome/components/contribute-snippet-button.tsx

@@ -1,6 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { Slot } from "@radix-ui/react-slot";
+import { Slot as SlotPrimitive } from "radix-ui";
+
+const Slot = SlotPrimitive.Slot;
+
 import React, { type PropsWithChildren } from "react";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { Button } from "@/components/ui/button";

package/src/components/editor/chrome/components/feedback-button.tsx

@@ -1,6 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { Slot } from "@radix-ui/react-slot";
+import { Slot as SlotPrimitive } from "radix-ui";
+
+const Slot = SlotPrimitive.Slot;
+
 import React, { type PropsWithChildren } from "react";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import {

package/src/components/editor/chrome/panels/context-aware-panel/context-aware-panel.tsx

@@ -101,7 +101,7 @@ export const ContextAwarePanel: React.FC = () => {
   const renderBody = () => {
     return (
       <div className="pb-7 mb-4 h-full overflow-auto">
-        <div className="p-3 border-b flex justify-between items-center">
+        <div className="px-3 py-2 border-b flex justify-between items-center">
           {renderModeToggle()}
           <Slot name={SlotNames.CONTEXT_AWARE_PANEL_HEADER} />
           <Button

package/src/components/editor/chrome/panels/empty-state.tsx

@@ -18,6 +18,7 @@ export const PanelEmptyState = ({
     <div className="mx-6 my-6 flex flex-col gap-2">
       <div className="flex flex-row gap-2 items-center">
         {icon &&
+          // oxlint-disable-next-line react/no-clone-element
           React.cloneElement(icon, {
             className: "text-accent-foreground flex-shrink-0",
           })}

package/src/components/editor/chrome/panels/file-explorer-panel.tsx

@@ -7,7 +7,6 @@ import React, { useCallback, useMemo } from "react";
 import useResizeObserver from "use-resize-observer";
 import { StorageInspector } from "@/components/storage/storage-inspector";
 import { Accordion } from "@/components/ui/accordion";
-import { getFeatureFlag } from "@/core/config/feature-flag";
 import { storageNamespacesAtom } from "@/core/storage/state";
 import { cn } from "@/utils/cn";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
@@ -103,15 +102,6 @@ const FileExplorerPanel: React.FC = () => {
     bothOpen ? availableContent - storageMaxHeight : availableContent,
   );
 
-  const storageInspectorEnabled = getFeatureFlag("storage_inspector");
-  if (!storageInspectorEnabled) {
-    return (
-      <div ref={panelRef} className="h-full overflow-auto">
-        <FileExplorerComponent height={panelHeight} />
-      </div>
-    );
-  }
-
   return (
     <div ref={panelRef} className="h-full overflow-auto">
       <Accordion

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

@@ -125,7 +125,7 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
 
   const handleInsertSnippet = () => {
     // Add below last focused cell in reverse order
-    for (const section of [...snippet.sections].reverse()) {
+    for (const section of snippet.sections.toReversed()) {
       if (section.code) {
         createNewCell({
           code: section.code,

package/src/components/editor/chrome/panels/write-secret-modal.tsx

@@ -25,7 +25,7 @@ import type { ListSecretKeysResponse } from "@/core/network/types";
 
 // dotenv providers should be at the top
 export function sortProviders(providers: ListSecretKeysResponse["keys"]) {
-  return providers.sort((a, b) => {
+  return providers.toSorted((a, b) => {
     if (a.provider === "env") {
       return 1;
     }

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

@@ -14,7 +14,10 @@ import {
 import { Footer } from "./footer";
 import { Sidebar } from "./sidebar";
 import "./app-chrome.css";
-import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Tooltip } from "radix-ui";
+
+const TooltipProvider = Tooltip.Provider;
+
 import { useAtom, useAtomValue } from "jotai";
 import { XIcon } from "lucide-react";
 import useEvent from "react-use-event-hook";