@marimo-team/islands 0.22.1-dev37 → 0.22.1-dev39

package/dist/useLifecycle-4fA1pHoh.js

@@ -0,0 +1,177 @@
+import { s as __toESM } from "./chunk-BNovOVIE.js";
+import { t as require_react } from "./react-Bs6Z0kvn.js";
+import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
+import { l as createLucideIcon } from "./dist-D_UjpfOY.js";
+import { g as Logger, r as cva, y as cn } from "./button-DNlNlZY_.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
+import { _ as useSetAtom, y as atom } from "./useTheme-MWfxn4oz.js";
+var Calendar = createLucideIcon("calendar", [
+  ["path", {
+    d: "M8 2v4",
+    key: "1cmpym"
+  }],
+  ["path", {
+    d: "M16 2v4",
+    key: "4m81vk"
+  }],
+  ["rect", {
+    width: "18",
+    height: "18",
+    x: "3",
+    y: "4",
+    rx: "2",
+    key: "1hopcy"
+  }],
+  ["path", {
+    d: "M3 10h18",
+    key: "8toen8"
+  }]
+]), Hash = createLucideIcon("hash", [
+  ["line", {
+    x1: "4",
+    x2: "20",
+    y1: "9",
+    y2: "9",
+    key: "4lhtct"
+  }],
+  ["line", {
+    x1: "4",
+    x2: "20",
+    y1: "15",
+    y2: "15",
+    key: "vyu0kd"
+  }],
+  ["line", {
+    x1: "10",
+    x2: "8",
+    y1: "3",
+    y2: "21",
+    key: "1ggp8o"
+  }],
+  ["line", {
+    x1: "16",
+    x2: "14",
+    y1: "3",
+    y2: "21",
+    key: "weycgp"
+  }]
+]), ToggleLeft = createLucideIcon("toggle-left", [["circle", {
+  cx: "9",
+  cy: "12",
+  r: "3",
+  key: "u3jwor"
+}], ["rect", {
+  width: "20",
+  height: "14",
+  x: "2",
+  y: "5",
+  rx: "7",
+  key: "g7kal2"
+}]]), Type = createLucideIcon("type", [
+  ["path", {
+    d: "M12 4v16",
+    key: "1654pz"
+  }],
+  ["path", {
+    d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2",
+    key: "e0r10z"
+  }],
+  ["path", {
+    d: "M9 20h6",
+    key: "s66wpe"
+  }]
+]), import_compiler_runtime$2 = require_compiler_runtime();
+function createReducer(e, m) {
+  return {
+    reducer: (h, g) => (h || (h = e()), g.type in m ? m[g.type](h, g.payload) : (Logger.error(`Action type ${g.type} is not defined in reducers.`), h)),
+    createActions: (e2) => {
+      let h = {};
+      for (let g in m) h[g] = (m2) => {
+        e2({
+          type: g,
+          payload: m2
+        });
+      };
+      return h;
+    }
+  };
+}
+function createReducerAndAtoms(e, m, h) {
+  let g = [...h ?? []], v = (e2) => {
+    g.push(e2);
+  }, { reducer: y, createActions: b } = createReducer(e, m), x = (e2, m2) => {
+    try {
+      let h2 = y(e2, m2);
+      for (let v2 of g) try {
+        v2(e2, h2, m2);
+      } catch (e3) {
+        Logger.error(`Error in middleware for action ${m2.type}:`, e3);
+      }
+      return h2;
+    } catch (h2) {
+      return Logger.error(`Error in reducer for action ${m2.type}:`, h2), e2;
+    }
+  }, S = atom(e()), C = /* @__PURE__ */ new WeakMap();
+  function w(e2) {
+    let m2 = (0, import_compiler_runtime$2.c)(4), h2 = e2 === void 0 ? {} : e2, g2 = useSetAtom(S);
+    if (h2.skipMiddleware === true) {
+      let e3;
+      return m2[0] === g2 ? e3 = m2[1] : (e3 = b((e4) => {
+        g2((m3) => y(m3, e4));
+      }), m2[0] = g2, m2[1] = e3), e3;
+    }
+    C.has(g2) || C.set(g2, b((e3) => {
+      g2((m3) => x(m3, e3));
+    }));
+    let _;
+    return m2[2] === g2 ? _ = m2[3] : (_ = C.get(g2), m2[2] = g2, m2[3] = _), _;
+  }
+  return {
+    reducer: x,
+    addMiddleware: v,
+    createActions: b,
+    valueAtom: S,
+    useActions: w
+  };
+}
+var import_compiler_runtime$1 = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), badgeVariants = cva("inline-flex items-center border rounded-full px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+  variants: { variant: {
+    default: "bg-primary hover:bg-primary/60 border-transparent text-primary-foreground",
+    defaultOutline: "bg-(--blue-2) border-(--blue-8) text-(--blue-11)",
+    secondary: "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
+    destructive: "bg-(--red-2) border-(--red-6) text-(--red-9) hover:bg-(--red-3)",
+    success: "bg-(--grass-2) border-(--grass-5) text-(--grass-9) hover:bg-(--grass-3)",
+    outline: "text-foreground"
+  } },
+  defaultVariants: { variant: "default" }
+}), Badge = (e) => {
+  let m = (0, import_compiler_runtime$1.c)(10), h, g, _;
+  m[0] === e ? (h = m[1], g = m[2], _ = m[3]) : ({ className: h, variant: _, ...g } = e, m[0] = e, m[1] = h, m[2] = g, m[3] = _);
+  let v;
+  m[4] !== h || m[5] !== _ ? (v = cn(badgeVariants({ variant: _ }), h), m[4] = h, m[5] = _, m[6] = v) : v = m[6];
+  let b;
+  return m[7] !== g || m[8] !== v ? (b = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    className: v,
+    ...g
+  }), m[7] = g, m[8] = v, m[9] = b) : b = m[9], b;
+}, import_compiler_runtime = require_compiler_runtime();
+function useOnMount(e) {
+  let m = (0, import_compiler_runtime.c)(1), h;
+  m[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (h = [], m[0] = h) : h = m[0], (0, import_react.useEffect)(e, h);
+}
+function useOnUnmount(e) {
+  let m = (0, import_compiler_runtime.c)(3), h;
+  m[0] === e ? h = m[1] : (h = () => e(), m[0] = e, m[1] = h);
+  let g;
+  m[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = [], m[2] = g) : g = m[2], (0, import_react.useEffect)(h, g);
+}
+export {
+  Type as a,
+  Calendar as c,
+  createReducerAndAtoms as i,
+  useOnUnmount as n,
+  ToggleLeft as o,
+  Badge as r,
+  Hash as s,
+  useOnMount as t
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.22.1-dev37",
+  "version": "0.22.1-dev39",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/__mocks__/common.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/** biome-ignore-all lint/suspicious/noConsole: for debugging */
+/* oxlint-disable no-console -- for debugging */
 import { type Mock, vi } from "vitest";
 import { invariant } from "@/utils/invariant";
 
@@ -137,12 +137,12 @@ export const SetupMocks = {
           store[key] = value;
         }),
         removeItem: vi.fn((key: string) => {
-          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+          // oxlint-disable-next-line typescript/no-dynamic-delete
           delete store[key];
         }),
         clear: vi.fn(() => {
           for (const key of Object.keys(store)) {
-            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+            // oxlint-disable-next-line typescript/no-dynamic-delete
             delete store[key];
           }
         }),
@@ -179,7 +179,7 @@ export const SetupMocks = {
   },
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 export function asMock<T extends (...args: any[]) => unknown>(fn: T): Mock<T> {
   invariant(
     "mock" in fn,

package/src/components/chat/acp/agent-panel.tsx

@@ -763,7 +763,7 @@ const AgentPanel: React.FC = () => {
       // We don't want to disconnect so users can switch between different
       // panels without losing their session
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [wsUrl]);
 
   const handleNewSession = useEvent(async () => {
@@ -889,7 +889,7 @@ const AgentPanel: React.FC = () => {
     };
 
     createOrResumeSession();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [isConnected, agent, tabLastActiveSessionId, activeSessionId]);
 
   // Handler for prompt submission

package/src/components/data-table/__tests__/columns.test.tsx

@@ -230,7 +230,7 @@ describe("generateColumns", () => {
     });
 
     // "age" is a number column — should auto right-align
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[1].cell as any)({
       column: {
         columnDef: columns[1],
@@ -241,7 +241,7 @@ describe("generateColumns", () => {
     expect(cell?.props.className).toContain("text-right");
 
     // "name" is a string column — should remain left-aligned
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const nameCell = (columns[0].cell as any)({
       column: {
         columnDef: columns[0],
@@ -261,7 +261,7 @@ describe("generateColumns", () => {
     });
 
     // "age" is numeric but explicitly set to left
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[1].cell as any)({
       column: {
         columnDef: columns[1],
@@ -301,7 +301,7 @@ describe("generateColumns", () => {
     });
 
     // Assuming getCellStyleClass is a function that returns a class name
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[0].cell as any)({
       column: {
         columnDef: columns[0],
@@ -333,7 +333,7 @@ describe("generateColumns", () => {
     // Right-justified: parent wrapper should have items-end, sort/filter icons should flip to the left
     const { container: rightContainer } = render(
       <TooltipProvider>
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        {/* oxlint-disable-next-line typescript/no-explicit-any */}
         {(columns[0].header as any)({ column: mockColumn(columns[0]) })}
       </TooltipProvider>,
     );
@@ -347,7 +347,7 @@ describe("generateColumns", () => {
     // Center-justified: parent wrapper should have items-center, no flex-row-reverse
     const { container: centerContainer } = render(
       <TooltipProvider>
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        {/* oxlint-disable-next-line typescript/no-explicit-any */}
         {(columns[1].header as any)({ column: mockColumn(columns[1]) })}
       </TooltipProvider>,
     );
@@ -572,7 +572,7 @@ describe("LocaleNumber", () => {
         <LocaleNumber value={1_234_567.89} />
       </I18nProvider>,
     );
-    // eslint-disable-next-line no-irregular-whitespace
+    // oxlint-disable-next-line no-irregular-whitespace
     expect(container.textContent).toMatchInlineSnapshot(`"1 234 567,89"`);
   });
 

package/src/components/data-table/cell-hover-template/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 
 export interface CellHoverTemplateTableState {
   cellHoverTemplate: string | null;

package/src/components/data-table/cell-hover-text/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 
 import type { RowData } from "@tanstack/react-table";
 

package/src/components/data-table/cell-selection/__tests__/feature.test.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { Cell, Column, Row, Table } from "@tanstack/react-table";
 import { describe, expect, it, vi } from "vitest";

package/src/components/data-table/cell-selection/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 import type { OnChangeFn, RowData, Updater } from "@tanstack/react-table";
 
 export interface CellSelectionItem {

package/src/components/data-table/cell-styling/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 import type { RowData } from "@tanstack/react-table";
 
 export type CellStyleState = Record<

package/src/components/data-table/charts/chart-spec/altair-generator.ts

@@ -78,7 +78,7 @@ export function generateAltairChart(
 
     if (encodings?.tooltip) {
       const tooltip = encodings.tooltip;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      // oxlint-disable-next-line typescript/no-explicit-any
       const makeTooltip = (t: Record<string, any>) => {
         const kwargs = makeKwargs(t);
         return new FunctionCall("alt.Tooltip", kwargs);
@@ -149,7 +149,7 @@ ${variableName}
   `.trim();
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 function makeKwargs<T extends Record<string, any>>(obj: T) {
   const result: Record<string, PythonCode> = {};
 

package/src/components/data-table/column-formatting/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 
 import type { OnChangeFn, RowData } from "@tanstack/react-table";
 import type { DataType } from "@/core/kernel/messages";
@@ -38,7 +38,7 @@ export interface ColumnFormattingInstance {
   setColumnFormatting: (value?: FormatOption) => void;
   getColumnFormatting?: () => FormatOption | undefined;
   getCanFormat?: () => boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   applyColumnFormatting: (value: any) => any;
 }
 

package/src/components/data-table/column-summary/legacy-chart-spec.ts

@@ -282,7 +282,7 @@ export function getDataSpecAndSourceName<T>(data: string | T[]): {
       const base64 = extractBase64FromDataURL(data);
       const decoded = window.atob(base64);
 
-      // eslint-disable-next-line unicorn/prefer-ternary
+      // oxlint-disable-next-line unicorn/prefer-ternary
       if (decoded.startsWith(ARROW_MAGIC_NUMBER)) {
         dataSpec = {
           values: base64ToUint8Array(base64),

package/src/components/data-table/column-wrapping/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 import type { OnChangeFn, RowData } from "@tanstack/react-table";
 
 export type ColumnWrappingState = Record<string, "nowrap" | "wrap" | undefined>;

package/src/components/data-table/copy-column/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 import type { RowData } from "@tanstack/react-table";
 
 export interface CopyColumnOptions {

package/src/components/data-table/focus-row/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 
 import type { OnChangeFn, RowData } from "@tanstack/react-table";
 

package/src/components/data-table/loading-table.tsx

@@ -43,7 +43,7 @@ export const LoadingTable = ({
           <TableBody>
             {Array.from({ length: pageSize }).map((_, i) => (
               <TableRow key={i}>
-                {Array.from({ length: NUM_COLUMNS }).map((_, j) => (
+                {Array.from({ length: NUM_COLUMNS }).map((__, j) => (
                   <TableCell key={j}>
                     <div className="h-4 bg-(--slate-5) animate-pulse rounded-md w-[90%]" />
                   </TableCell>

package/src/components/data-table/range-focus/__tests__/atoms.test.ts

@@ -10,7 +10,7 @@ vi.mock("@/utils/copy", () => ({
 }));
 
 vi.mock("../utils", async (importOriginal) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   const original = (await importOriginal()) as any;
   return {
     ...original,
@@ -28,7 +28,7 @@ import {
 } from "../atoms";
 import { getCellsBetween, getCellValues } from "../utils";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 type T = any;
 
 // Create mock table and cells

package/src/components/data-table/range-focus/atoms.ts

@@ -32,9 +32,9 @@ function initialState(): CellSelectionState {
   };
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 type AnyTable = Table<any>;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 type AnyCell = Cell<any, unknown>;
 
 const {

package/src/components/dependency-graph/dependency-graph-tree.tsx

@@ -51,7 +51,7 @@ export const DependencyGraphTree: React.FC<PropsWithChildren<Props>> = ({
   layoutDirection,
   settings,
 }) => {
-  // eslint-disable-next-line react/hook-use-state
+  // oxlint-disable-next-line react/hook-use-state
   const [initial] = useState(() => {
     let elements = elementsBuilder.createElements(
       cellIds,

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/pair-with-agent-modal.tsx

@@ -0,0 +1,142 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import React, { 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 { runtimeConfigAtom } from "@/core/runtime/config";
+import { copyToClipboard } from "@/utils/copy";
+import { Events } from "@/utils/events";
+import { Tooltip } from "@/components/ui/tooltip";
+import type { RuntimeConfig } from "@/core/runtime/types";
+
+type AgentTab = "claude" | "codex" | "opencode";
+
+function buildRemoteUrl(config: RuntimeConfig) {
+  const url = new URL(config.url);
+  if (config.authToken) {
+    url.searchParams.set("auth", config.authToken);
+  }
+  return url.toString();
+}
+
+function getPromptCommand(agent: AgentTab, remoteUrl: string): string {
+  const command = import.meta.env.DEV ? "uv run marimo" : "uvx marimo@latest";
+  const base = `${command} pair prompt --url '${remoteUrl}'`;
+  switch (agent) {
+    case "claude":
+      return `claude "$(${base} --claude)"`;
+    case "codex":
+      return `codex "$(${base} --codex)"`;
+    case "opencode":
+      return `opencode "$(${base} --opencode)"`;
+  }
+}
+
+const SKILL_INSTALL = "npx skills add marimo-team/marimo-pair";
+
+export const PairWithAgentModal: React.FC<{
+  onClose: () => void;
+}> = ({ onClose }) => {
+  const [activeTab, setActiveTab] = useState<AgentTab>("claude");
+  const runtimeConfig = useAtomValue(runtimeConfigAtom);
+  const remoteUrl = buildRemoteUrl(runtimeConfig);
+  const promptCommand = getPromptCommand(activeTab, remoteUrl);
+
+  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>
+      </div>
+
+      <DialogFooter>
+        <Button variant="secondary" onClick={onClose}>
+          Close
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  );
+};
+
+const CommandBlock: React.FC<{ command: string }> = ({ command }) => {
+  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">{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/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/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}