@marimo-team/islands 0.23.15-dev20 → 0.23.15-dev24

package/dist/{code-visibility-DNwczZr1.js → code-visibility-CXaWvbIw.js}

@@ -36291,7 +36291,7 @@ ${d}`,
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.15-dev20");
+  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.15-dev24");
   showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime = require_compiler_runtime();

package/dist/main.js

@@ -26,7 +26,7 @@ import { $ as reducer, $t as isUninstantiated, A as ChevronDownIcon, An as Item$
 import { __tla as __tla_1 } from "./chunk-5FQGJX7Z-BbqSm5gU.js";
 import { o as useSize, s as Root$1, u as createLucideIcon } from "./dist--2Bqjvs0.js";
 import { A as SquareFunction, C as DEFAULT_COLOR_SCHEME, D as SCALE_TYPE_DESCRIPTIONS, E as EMPTY_VALUE$1, O as TIME_UNIT_DESCRIPTIONS, S as DEFAULT_AGGREGATION, T as DEFAULT_TIME_UNIT, _ as AGGREGATION_TYPE_DESCRIPTIONS, a as AGGREGATION_FNS$1, b as COLOR_SCHEMES, c as COLOR_BY_FIELDS, d as NONE_VALUE, f as SELECTABLE_DATA_TYPES, g as TIME_UNITS, h as STRING_AGGREGATION_FNS, i as convertDataTypeToSelectable, j as ChartColumn, k as escapeFieldName, l as COMBINED_TIME_UNITS, m as SORT_TYPES, n as createSpecWithoutData, o as BIN_AGGREGATION, p as SINGLE_TIME_UNITS, r as isFieldSet, s as CHART_TYPES, t as augmentSpecWithData, u as ChartType, v as AGGREGATION_TYPE_ICON, w as DEFAULT_MAX_BINS_FACET, x as COUNT_FIELD, y as CHART_TYPE_ICON } from "./spec-Cz-Bj1JI.js";
-import { $ as ContextAwarePanelItem, $t as EmotionCacheProvider, A as prettifyRowColumnCount, At as loadTableData, B as useSelectList, Bt as dateToLocalISOTime, C as Filenames, Ct as ColumnChartContext, D as EmptyState, Dt as usePrevious$1, E as ColumnPreviewContainer, Et as useIntersectionObserver, F as ContextMenuContent, Ft as getMimeValues, G as ComboboxItem, Gt as ChartErrorState, H as DatePicker, Ht as TabsContent, I as ContextMenuItem, It as isNullishFilter, J as CommandInput, Jt as LazyVegaEmbed, K as Command, Kt as ChartInfoState, L as ContextMenuSeparator, Lt as Maps, M as getColumnCountForDisplay, Mt as SELECT_COLUMN_ID, N as getUserColumnVisibilityCounts, Nt as TOO_MANY_ROWS, O as ErrorState, Ot as getPageIndexForRow, P as ContextMenu, Pt as toFieldTypes, Q as smartMatch, Qt as HtmlOutput, R as ContextMenuTrigger, Rt as dateToLocalISODate, S as Progress, St as renderCellValue, T as ColumnName, Tt as DelayMount, U as DateRangePicker, Ut as TabsList, V as CompactChipRow, Vt as Tabs, W as Combobox, Wt as TabsTrigger, X as CommandList, Xt as RenderTextWithLinks, Y as CommandItem, Yt as useOverflowDetection, Z as CommandSeparator, Zt as Kbd, _ as InstallPackageButton, _n as ArrowDownWideNarrow, _t as TableHeader, an as GripHorizontal, at as SlotNames, b as downloadByURL, bt as generateColumns, d as RadioGroup, dn as Code, dt as Fill, en as hasFunctionProperty, et as PANEL_TYPES, f as RadioGroupItem, fn as ChevronsUpDown, ft as Provider$1, g as DataTable, gn as ChevronLeft, gt as TableHead, h as OutputRenderer, hn as ChevronsDownUp, ht as TableCell, in as TextWrap, it as isCellAwareAtom, j as prettifyRowCount, jt as INDEX_COLUMN_NAME, k as LoadingState, kt as loadTableAndRawData, l as Slide, ln as Ellipsis, m as OutputArea, mn as ChevronsLeft, mt as TableBody, n as marimoVersionAtom, nn as $fae977aafc393c5c$export$588937bcd60ade55, nt as contextAwarePanelOwner, on as Funnel, ot as slotsController, p as JsonOutput, pn as ChevronsRight, pt as Table, q as CommandEmpty, qt as ChartLoadingState, r as showCodeInRunModeAtom, rn as $fae977aafc393c5c$export$6b862160d295c8e, rt as contextAwarePanelType, s as SLIDE_TYPE_OPTIONS_BY_VALUE, sn as EyeOff, st as Toggle, t as useNotebookCodeAvailable, tn as isRecord, tt as contextAwarePanelOpen, u as Switch, un as Download, v as ADD_PRINTING_CLASS, vt as TableRow, w as downloadSizeLimitAtom, wt as ColumnChartSpecModel, x as downloadHTMLAsImage, xt as inferFieldTypes, y as downloadBlob, yt as NAMELESS_COLUMN_PREFIX, z as useInternalStateWithSync, zt as dateToLocalISODateTime, __tla as __tla_2 } from "./code-visibility-DNwczZr1.js";
+import { $ as ContextAwarePanelItem, $t as EmotionCacheProvider, A as prettifyRowColumnCount, At as loadTableData, B as useSelectList, Bt as dateToLocalISOTime, C as Filenames, Ct as ColumnChartContext, D as EmptyState, Dt as usePrevious$1, E as ColumnPreviewContainer, Et as useIntersectionObserver, F as ContextMenuContent, Ft as getMimeValues, G as ComboboxItem, Gt as ChartErrorState, H as DatePicker, Ht as TabsContent, I as ContextMenuItem, It as isNullishFilter, J as CommandInput, Jt as LazyVegaEmbed, K as Command, Kt as ChartInfoState, L as ContextMenuSeparator, Lt as Maps, M as getColumnCountForDisplay, Mt as SELECT_COLUMN_ID, N as getUserColumnVisibilityCounts, Nt as TOO_MANY_ROWS, O as ErrorState, Ot as getPageIndexForRow, P as ContextMenu, Pt as toFieldTypes, Q as smartMatch, Qt as HtmlOutput, R as ContextMenuTrigger, Rt as dateToLocalISODate, S as Progress, St as renderCellValue, T as ColumnName, Tt as DelayMount, U as DateRangePicker, Ut as TabsList, V as CompactChipRow, Vt as Tabs, W as Combobox, Wt as TabsTrigger, X as CommandList, Xt as RenderTextWithLinks, Y as CommandItem, Yt as useOverflowDetection, Z as CommandSeparator, Zt as Kbd, _ as InstallPackageButton, _n as ArrowDownWideNarrow, _t as TableHeader, an as GripHorizontal, at as SlotNames, b as downloadByURL, bt as generateColumns, d as RadioGroup, dn as Code, dt as Fill, en as hasFunctionProperty, et as PANEL_TYPES, f as RadioGroupItem, fn as ChevronsUpDown, ft as Provider$1, g as DataTable, gn as ChevronLeft, gt as TableHead, h as OutputRenderer, hn as ChevronsDownUp, ht as TableCell, in as TextWrap, it as isCellAwareAtom, j as prettifyRowCount, jt as INDEX_COLUMN_NAME, k as LoadingState, kt as loadTableAndRawData, l as Slide, ln as Ellipsis, m as OutputArea, mn as ChevronsLeft, mt as TableBody, n as marimoVersionAtom, nn as $fae977aafc393c5c$export$588937bcd60ade55, nt as contextAwarePanelOwner, on as Funnel, ot as slotsController, p as JsonOutput, pn as ChevronsRight, pt as Table, q as CommandEmpty, qt as ChartLoadingState, r as showCodeInRunModeAtom, rn as $fae977aafc393c5c$export$6b862160d295c8e, rt as contextAwarePanelType, s as SLIDE_TYPE_OPTIONS_BY_VALUE, sn as EyeOff, st as Toggle, t as useNotebookCodeAvailable, tn as isRecord, tt as contextAwarePanelOpen, u as Switch, un as Download, v as ADD_PRINTING_CLASS, vt as TableRow, w as downloadSizeLimitAtom, wt as ColumnChartSpecModel, x as downloadHTMLAsImage, xt as inferFieldTypes, y as downloadBlob, yt as NAMELESS_COLUMN_PREFIX, z as useInternalStateWithSync, zt as dateToLocalISODateTime, __tla as __tla_2 } from "./code-visibility-CXaWvbIw.js";
 import { c as Calendar, i as createReducerAndAtoms, n as useOnUnmount, o as ToggleLeft, t as useOnMount } from "./useLifecycle-DegSo0lV.js";
 import { t as Check } from "./check-C9OoNtR4.js";
 import { A as Icon, C as logNever, D as $18f2051aff69b9bf$export$a54013f0d02a8f82, E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, F as createCollection, I as X, M as clamp$2, N as usePrevious$2, P as useDirection, R as ChevronDown, S as assertNever, a as SelectGroup, c as SelectSeparator, d as NativeSelect, i as SelectContent, j as Trigger$1, l as SelectTrigger, n as capitalize, o as SelectItem, r as Select, s as SelectLabel, t as Strings, u as SelectValue, w as $a916eb452884faea$export$b7a616150fdb9f44 } from "./strings-Dq_j3Rxw.js";
@@ -38024,7 +38024,7 @@ ${c}
   function _temp2$2(e) {
     e.target === e.currentTarget && e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), e.currentTarget.click());
   }
-  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-Cb5uzhCh.js"));
+  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-D_Go0-2D.js"));
   const SlidesLayoutRenderer = ({ layout: e, setLayout: r, cells: c, mode: l }) => {
     var _a5;
     let u = useAtomValue(kioskModeAtom), d = l === "read" || u, f = useAtomValue(numColumnsAtom) > 1, [p, m] = (0, import_react.useState)(null), { slideCells: h, skippedIds: g, noOutputIds: _, slideTypes: v, startCellIndex: y } = (0, import_react.useMemo)(() => computeSlideCellsInfo(c, e), [

package/dist/{reveal-component-Cb5uzhCh.js → reveal-component-D_Go0-2D.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { lt as kioskModeAtom, pt as outputIsStale } from "./html-to-image-JXL8cvmt.js";
 import "./chunk-5FQGJX7Z-BbqSm5gU.js";
 import { u as createLucideIcon } from "./dist--2Bqjvs0.js";
-import { a as DEFAULT_DECK_VERTICAL_ALIGN, c as SlideSidebar, cn as Expand, ct as Panel, dn as Code, i as DEFAULT_DECK_TRANSITION, l as Slide, lt as PanelGroup, o as DEFAULT_SLIDE_TYPE, sn as EyeOff, t as useNotebookCodeAvailable, ut as PanelResizeHandle } from "./code-visibility-DNwczZr1.js";
+import { a as DEFAULT_DECK_VERTICAL_ALIGN, c as SlideSidebar, cn as Expand, ct as Panel, dn as Code, i as DEFAULT_DECK_TRANSITION, l as Slide, lt as PanelGroup, o as DEFAULT_SLIDE_TYPE, sn as EyeOff, t as useNotebookCodeAvailable, ut as PanelResizeHandle } from "./code-visibility-CXaWvbIw.js";
 import { X as useDebouncedCallback } from "./input-DtsN7xm-.js";
 import "./toDate-CWNNlFEX.js";
 import "./react-dom-BTJzcVJ9.js";

package/package.json

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

package/src/components/editor/actions/__tests__/pair-with-agent-commands.test.ts

@@ -0,0 +1,153 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  type ConnectionInfo,
+  getMarimoCommand,
+  getRawPrompt,
+  getTerminalCommand,
+  maskToken,
+  shellQuote,
+} from "../pair-with-agent-commands";
+
+const CONNECTION: ConnectionInfo = {
+  url: "http://localhost:8000",
+  sessionId: "s_ab12cd",
+};
+
+describe("shellQuote", () => {
+  it("quotes an empty string", () => {
+    expect(shellQuote("")).toBe("''");
+  });
+
+  it("leaves shell-safe values untouched", () => {
+    expect(shellQuote("http://localhost:8000")).toBe("http://localhost:8000");
+    expect(shellQuote("s_ab12cd")).toBe("s_ab12cd");
+  });
+
+  it("quotes values with shell metacharacters", () => {
+    expect(shellQuote("http://host:8000?a=1&b=2")).toBe(
+      "'http://host:8000?a=1&b=2'",
+    );
+    expect(shellQuote("has space")).toBe("'has space'");
+    expect(shellQuote("$(rm -rf /)")).toBe("'$(rm -rf /)'");
+  });
+
+  it("escapes embedded single quotes without breaking out", () => {
+    // Closes the quote, emits a literal ' via "'", then reopens: '"'"'
+    expect(shellQuote("a'b")).toBe(`'a'"'"'b'`);
+  });
+});
+
+describe("getMarimoCommand", () => {
+  afterEach(() => {
+    vi.unstubAllEnvs();
+  });
+
+  it("uses the local checkout in dev", () => {
+    vi.stubEnv("DEV", true);
+    expect(getMarimoCommand()).toBe("uv run marimo");
+  });
+
+  it("uses uvx outside of dev", () => {
+    vi.stubEnv("DEV", false);
+    expect(getMarimoCommand()).toBe("uvx marimo@latest");
+  });
+});
+
+describe("getTerminalCommand", () => {
+  it("includes the url and session for each agent", () => {
+    expect(getTerminalCommand("claude", CONNECTION, false)).toBe(
+      `claude "$(uv run marimo pair prompt --url http://localhost:8000 --session s_ab12cd --claude)"`,
+    );
+    expect(getTerminalCommand("codex", CONNECTION, false)).toBe(
+      `codex "$(uv run marimo pair prompt --url http://localhost:8000 --session s_ab12cd --codex)"`,
+    );
+    expect(getTerminalCommand("opencode", CONNECTION, false)).toBe(
+      `opencode --prompt "$(uv run marimo pair prompt --url http://localhost:8000 --session s_ab12cd --opencode)"`,
+    );
+  });
+
+  it("always targets the given session, not a random one", () => {
+    const command = getTerminalCommand("claude", CONNECTION, false);
+    expect(command).toContain("--session s_ab12cd");
+  });
+
+  it("shell-escapes a url containing metacharacters", () => {
+    const command = getTerminalCommand(
+      "claude",
+      { url: "http://host:8000?file=a&b", sessionId: "s_ab12cd" },
+      false,
+    );
+    expect(command).toContain("--url 'http://host:8000?file=a&b'");
+  });
+
+  it("adds --with-token before the agent flag when requested", () => {
+    const command = getTerminalCommand("claude", CONNECTION, true);
+    expect(command).toContain("--with-token --claude");
+  });
+
+  it("omits --with-token when not requested", () => {
+    expect(getTerminalCommand("claude", CONNECTION, false)).not.toContain(
+      "--with-token",
+    );
+  });
+});
+
+describe("getRawPrompt", () => {
+  it("references the session-scoped execute-code command", () => {
+    const prompt = getRawPrompt(CONNECTION, null);
+    expect(prompt).toContain(
+      "execute-code.sh --url http://localhost:8000 --session s_ab12cd",
+    );
+    expect(prompt).toContain(
+      "Connect to the notebook at: http://localhost:8000 (session s_ab12cd)",
+    );
+  });
+
+  it("omits the token hint when there is no token", () => {
+    const prompt = getRawPrompt(CONNECTION, null);
+    expect(prompt).not.toContain("--token");
+    expect(prompt).not.toContain("auth token");
+  });
+
+  it("includes a session-scoped token hint when a token is present", () => {
+    const prompt = getRawPrompt(CONNECTION, "secret-token");
+    expect(prompt).toContain(
+      "execute-code.sh --url http://localhost:8000 --session s_ab12cd --token secret-token",
+    );
+  });
+
+  it("shell-escapes a token containing a single quote", () => {
+    const prompt = getRawPrompt(CONNECTION, "tok'en");
+    expect(prompt).toContain(`--token 'tok'"'"'en'`);
+  });
+
+  it("matches the CLI prompt shape", () => {
+    const prompt = getRawPrompt(CONNECTION, null);
+    expect(prompt).toMatchInlineSnapshot(`
+      "Use the /marimo-pair skill to pair-program on a running marimo notebook.
+
+      Connect to the notebook at: http://localhost:8000 (session s_ab12cd)
+
+      Use \`execute-code.sh --url http://localhost:8000 --session s_ab12cd\` from the marimo-pair skill to execute code in the notebook.
+
+      Once you are connected, send a fun toast (mo.status.toast(...)) to the user inside marimo letting them know you're ready to pair."
+    `);
+  });
+});
+
+describe("maskToken", () => {
+  it("masks short tokens entirely", () => {
+    expect(maskToken("ab")).toBe("****");
+    expect(maskToken("abcd")).toBe("****");
+  });
+
+  it("reveals only the last four characters", () => {
+    expect(maskToken("abcdefgh")).toBe("****efgh");
+  });
+
+  it("caps the number of mask characters at eight", () => {
+    expect(maskToken("0123456789abcdef")).toBe("********cdef");
+  });
+});

package/src/components/editor/actions/pair-with-agent-commands.ts

@@ -0,0 +1,109 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { assertNever } from "@/utils/assertNever";
+
+export type AgentTab = "claude" | "codex" | "opencode" | "prompt";
+
+export const TERMINAL_TABS = ["claude", "codex", "opencode"] as const;
+
+export const AGENT_TABS = ["claude", "codex", "opencode", "prompt"] as const;
+
+export const AGENT_LABELS: Record<AgentTab, string> = {
+  claude: "Claude",
+  codex: "Codex",
+  opencode: "OpenCode",
+  prompt: "Prompt",
+};
+
+export const SKILL_INSTALL = "npx skills add marimo-team/marimo-pair";
+
+/** How to invoke marimo: from the local checkout in dev, else via uvx. */
+export function getMarimoCommand(): string {
+  return import.meta.env.DEV ? "uv run marimo" : "uvx marimo@latest";
+}
+
+/**
+ * POSIX-quote a value for safe embedding in a shell command. These commands are
+ * meant to be copied into a terminal, so a url/token containing shell
+ * metacharacters (`'`, `&`, `$(...)`, ...) must not break out of its argument.
+ *
+ * Mirrors Python's `shlex.quote` (used on the CLI side in
+ * `marimo/_cli/pair/commands.py`) so both sides produce identical commands:
+ * values that are already shell-safe are left as-is for readability, and
+ * anything else is single-quoted with embedded quotes escaped as `'"'"'`.
+ */
+export function shellQuote(value: string): string {
+  if (value === "") {
+    return "''";
+  }
+  // Same "safe" character set as CPython's shlex.quote (ASCII \w plus a few).
+  if (/^[\w@%+=:,./-]+$/.test(value)) {
+    return value;
+  }
+  return `'${value.replaceAll("'", `'"'"'`)}'`;
+}
+
+/** Identifies the specific running notebook to pair on. */
+export interface ConnectionInfo {
+  url: string;
+  /**
+   * The current session id, so agents connect to *this* notebook rather than
+   * guessing when multiple sessions are open on the same server.
+   */
+  sessionId: string;
+}
+
+/**
+ * The shell command that wraps an agent CLI, delegating prompt generation to
+ * `marimo pair prompt` so the terminal and CLI stay in sync.
+ */
+export function getTerminalCommand(
+  agent: Exclude<AgentTab, "prompt">,
+  { url, sessionId }: ConnectionInfo,
+  withToken: boolean,
+): string {
+  const tokenFlag = withToken ? " --with-token" : "";
+  const base = `${getMarimoCommand()} pair prompt --url ${shellQuote(url)} --session ${shellQuote(sessionId)}${tokenFlag}`;
+  switch (agent) {
+    case "claude":
+      return `claude "$(${base} --claude)"`;
+    case "codex":
+      return `codex "$(${base} --codex)"`;
+    case "opencode":
+      return `opencode --prompt "$(${base} --opencode)"`;
+    default:
+      assertNever(agent);
+  }
+}
+
+/**
+ * The raw prompt for the "Prompt" tab. Mirrors the output of
+ * `marimo pair prompt` (see `marimo/_cli/pair/commands.py`) so pasting it into
+ * an agent behaves the same as the terminal commands.
+ */
+export function getRawPrompt(
+  { url, sessionId }: ConnectionInfo,
+  token: string | null,
+): string {
+  const executeCmd = `execute-code.sh --url ${shellQuote(url)} --session ${shellQuote(sessionId)}`;
+  const tokenHint = token
+    ? `\n\nUse this auth token when calling \`execute-code.sh\`: \`${executeCmd} --token ${shellQuote(token)}\`.`
+    : "";
+  return [
+    "Use the /marimo-pair skill to pair-program on a running marimo notebook.",
+    "",
+    `Connect to the notebook at: ${url} (session ${sessionId})`,
+    "",
+    `Use \`${executeCmd}\` from the marimo-pair skill to execute code in the notebook.${tokenHint}`,
+    "",
+    "Once you are connected, send a fun toast (mo.status.toast(...)) to the user inside marimo letting them know you're ready to pair.",
+  ].join("\n");
+}
+
+/** Mask all but the last 4 chars of a token for display. */
+export function maskToken(token: string): string {
+  if (token.length <= 4) {
+    return "****";
+  }
+  return `${"*".repeat(Math.min(token.length - 4, 8))}${token.slice(-4)}`;
+}

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

@@ -14,67 +14,20 @@ 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";
 import { API } from "@/core/network/api";
-
-type AgentTab = "claude" | "codex" | "opencode" | "prompt";
-
-const TERMINAL_TABS = ["claude", "codex", "opencode"] as const;
-
-function getMarimoCommand(): string {
-  return import.meta.env.DEV ? "uv run marimo" : "uvx marimo@latest";
-}
-
-function getTerminalCommand(
-  agent: Exclude<AgentTab, "prompt">,
-  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 --prompt "$(${base} --opencode)"`;
-    default:
-      assertNever(agent);
-  }
-}
-
-function getRawPrompt(url: string, token: string | null): string {
-  const tokenHint = token
-    ? `\n\nUse this auth token when calling \`execute-code.sh\`: \`execute-code.sh --url '${url}' --token '${token}'\`.`
-    : "";
-  return [
-    "Use the /marimo-pair skill to pair-program on a running marimo notebook.",
-    "",
-    `Connect to the notebook at: ${url}`,
-    "",
-    `Use \`execute-code.sh --url ${url}\` from the marimo-pair skill to execute code in the notebook.${tokenHint}`,
-    "",
-    "Once you are connected, send a fun toast (mo.status.toast(...)) to the user inside marimo letting them know you're ready to pair.",
-  ].join("\n");
-}
-
-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";
-
-const AGENT_LABELS: Record<AgentTab, string> = {
-  claude: "Claude",
-  codex: "Codex",
-  opencode: "OpenCode",
-  prompt: "Prompt",
-};
+import { getSessionId } from "@/core/kernel/session";
+import {
+  AGENT_LABELS,
+  AGENT_TABS,
+  type AgentTab,
+  type ConnectionInfo,
+  getRawPrompt,
+  getTerminalCommand,
+  maskToken,
+  SKILL_INSTALL,
+  TERMINAL_TABS,
+} from "./pair-with-agent-commands";
 
 function useAuthToken(): string | null {
   const [token, setToken] = useState<string | null>(null);
@@ -98,7 +51,10 @@ export const PairWithAgentModal: React.FC<{
   const runtimeManager = useRuntimeManager();
   const authToken = useAuthToken();
   const hasToken = Boolean(authToken);
-  const remoteUrl = runtimeManager.httpURL.toString();
+  const connection: ConnectionInfo = {
+    url: runtimeManager.httpURL.toString(),
+    sessionId: getSessionId(),
+  };
 
   return (
     <DialogContent className="sm:max-w-2xl">
@@ -125,7 +81,7 @@ export const PairWithAgentModal: React.FC<{
           onValueChange={(v) => setActiveTab(v as AgentTab)}
         >
           <TabsList className="w-full">
-            {(["claude", "codex", "opencode", "prompt"] as const).map((tab) => (
+            {AGENT_TABS.map((tab) => (
               <TabsTrigger key={tab} value={tab} className="flex-1">
                 {AGENT_LABELS[tab]}
               </TabsTrigger>
@@ -147,7 +103,7 @@ export const PairWithAgentModal: React.FC<{
               </Step>
               <Step index={2} title="Run in your terminal">
                 <CommandBlock
-                  command={getTerminalCommand(tab, remoteUrl, hasToken)}
+                  command={getTerminalCommand(tab, connection, hasToken)}
                 />
               </Step>
               {hasToken && authToken && (
@@ -179,9 +135,9 @@ export const PairWithAgentModal: React.FC<{
               }
             >
               <CommandBlock
-                command={getRawPrompt(remoteUrl, authToken)}
+                command={getRawPrompt(connection, authToken)}
                 display={getRawPrompt(
-                  remoteUrl,
+                  connection,
                   authToken ? maskToken(authToken) : null,
                 )}
                 multiline={true}