@marimo-team/islands 0.23.15-dev32 → 0.23.15-dev4

package/src/components/editor/__tests__/output-persistence.test.tsx

@@ -1,241 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-import { render } from "@testing-library/react";
-import { createStore, Provider } from "jotai";
-import { beforeAll, describe, expect, it } from "vitest";
-import { SetupMocks } from "@/__mocks__/common";
-import { MockNotebook } from "@/__mocks__/notebook";
-import { MockRequestClient } from "@/__mocks__/requests";
-import { cellId } from "@/__tests__/branded";
-import { TooltipProvider } from "@/components/ui/tooltip";
-import { notebookAtom } from "@/core/cells/cells";
-import type { CellRuntimeState } from "@/core/cells/types";
-import { createCellRuntimeState } from "@/core/cells/types";
-import { defaultUserConfig } from "@/core/config/config-schema";
-import type { AppMode } from "@/core/mode";
-import { requestClientAtom } from "@/core/network/requests";
-import { Cell } from "../notebook-cell";
-
-const cid = cellId("test");
-
-function createTestWrapper() {
-  const store = createStore();
-  store.set(requestClientAtom, MockRequestClient.create());
-  const wrapper = ({ children }: { children: React.ReactNode }) => (
-    <Provider store={store}>{children}</Provider>
-  );
-  return { wrapper, store };
-}
-
-function seedNotebook(
-  store: ReturnType<typeof createStore>,
-  runtimeOverrides: Partial<CellRuntimeState> = {},
-) {
-  const notebook = MockNotebook.notebookState({
-    cellData: {
-      [cid]: {
-        code: "1 + 1",
-        name: "test_cell",
-        edited: false,
-        serializedEditorState: null,
-        config: {
-          disabled: false,
-          hide_code: false,
-          column: null,
-        },
-      },
-    },
-  });
-  notebook.cellRuntime[cid] = createCellRuntimeState({
-    status: "idle",
-    output: {
-      channel: "output",
-      mimetype: "text/html",
-      data: "<span>persist me</span>",
-      timestamp: 0,
-    },
-    ...runtimeOverrides,
-  });
-  store.set(notebookAtom, notebook);
-}
-
-function renderCell(mode: AppMode) {
-  return (
-    <TooltipProvider>
-      <Cell
-        cellId={cid}
-        mode={mode}
-        canDelete={true}
-        userConfig={defaultUserConfig()}
-        isCollapsed={false}
-        collapseCount={0}
-        canMoveX={false}
-        theme="light"
-        showPlaceholder={false}
-      />
-    </TooltipProvider>
-  );
-}
-
-beforeAll(() => {
-  SetupMocks.resizeObserver();
-  global.HTMLDivElement.prototype.scrollIntoView = () => {
-    // do nothing
-  };
-});
-
-describe("output persistence across mode changes", () => {
-  it("preserves the output DOM node when toggling edit <-> present", () => {
-    const { store, wrapper } = createTestWrapper();
-    seedNotebook(store);
-
-    const { container, rerender } = render(renderCell("edit"), { wrapper });
-
-    const outputNode = container.querySelector<HTMLElement>(
-      '[data-cell-role="output"]',
-    );
-    expect(outputNode).toBeTruthy();
-    // A property survives only if the exact DOM node instance survives.
-    (outputNode as HTMLElement & { __sentinel?: string }).__sentinel = "alive";
-
-    rerender(renderCell("present"));
-    const presentNode = container.querySelector<HTMLElement>(
-      '[data-cell-role="output"]',
-    );
-    expect(presentNode).toBe(outputNode);
-    expect(presentNode?.isConnected).toBe(true);
-    expect(
-      (presentNode as HTMLElement & { __sentinel?: string }).__sentinel,
-    ).toBe("alive");
-
-    // Edit chrome is hidden but stays mounted while presenting
-    const tray = container.querySelector<HTMLElement>(
-      "[data-testid='cell-tray']",
-    );
-    expect(tray).toBeTruthy();
-    expect(tray?.hidden).toBe(true);
-    // Present styling is applied
-    expect(
-      container
-        .querySelector(`[data-cell-id="${cid}"]`)
-        ?.classList.contains("published"),
-    ).toBe(true);
-
-    rerender(renderCell("edit"));
-    expect(container.querySelector('[data-cell-role="output"]')).toBe(
-      outputNode,
-    );
-    expect(
-      container.querySelector<HTMLElement>("[data-testid='cell-tray']")?.hidden,
-    ).toBe(false);
-    expect(
-      container
-        .querySelector(`[data-cell-id="${cid}"]`)
-        ?.classList.contains("published"),
-    ).toBe(false);
-  });
-
-  it("hides all edit chrome while presenting", () => {
-    const { store, wrapper } = createTestWrapper();
-    seedNotebook(store);
-
-    const { container, rerender } = render(renderCell("edit"), { wrapper });
-
-    // Returns true when the element is not visible: either gone from the DOM or
-    // inside a `hidden` ancestor. Edit chrome may unmount while presenting (only
-    // the cell *output* is contractually kept mounted — see the DOM-node test
-    // above); either way it must not be visible.
-    const isHidden = (testId: string) => {
-      const el = container.querySelector(`[data-testid='${testId}']`);
-      return el === null || el.closest("[hidden]") !== null;
-    };
-
-    // Everything visible in edit mode
-    const editChrome = [
-      "cell-tray",
-      "drag-button",
-      "cell-actions-button",
-      "delete-button",
-      "create-cell-button",
-      "console-output-area",
-    ];
-    for (const testId of editChrome) {
-      expect({ testId, hidden: isHidden(testId) }).toEqual({
-        testId,
-        hidden: false,
-      });
-    }
-
-    rerender(renderCell("present"));
-    for (const testId of editChrome) {
-      expect({ testId, hidden: isHidden(testId) }).toEqual({
-        testId,
-        hidden: true,
-      });
-    }
-
-    rerender(renderCell("edit"));
-    for (const testId of editChrome) {
-      expect({ testId, hidden: isHidden(testId) }).toEqual({
-        testId,
-        hidden: false,
-      });
-    }
-  });
-
-  it("does not dim edited-but-not-run outputs as stale while presenting", () => {
-    const { store, wrapper } = createTestWrapper();
-    seedNotebook(store);
-    // Mark the cell as edited without re-running it
-    const notebook = store.get(notebookAtom);
-    notebook.cellData[cid] = { ...notebook.cellData[cid], edited: true };
-    store.set(notebookAtom, { ...notebook });
-
-    const { container, rerender } = render(renderCell("edit"), { wrapper });
-    expect(container.querySelector(".marimo-output-stale")).toBeTruthy();
-
-    // The read view never dims pending edits; present mode matches it
-    rerender(renderCell("present"));
-    expect(container.querySelector(".marimo-output-stale")).toBeFalsy();
-
-    rerender(renderCell("edit"));
-    expect(container.querySelector(".marimo-output-stale")).toBeTruthy();
-  });
-
-  it("hides errored cells while presenting without unmounting them", () => {
-    const { store, wrapper } = createTestWrapper();
-    seedNotebook(store, {
-      errored: true,
-      output: {
-        channel: "marimo-error",
-        mimetype: "application/vnd.marimo+error",
-        data: [{ type: "exception", exception_type: "ValueError", msg: "!" }],
-        timestamp: 0,
-      },
-    });
-
-    const { container, rerender } = render(renderCell("edit"), { wrapper });
-
-    const outputNode = container.querySelector<HTMLElement>(
-      '[data-cell-role="output"]',
-    );
-    expect(outputNode).toBeTruthy();
-
-    const getSortableWrapper = () =>
-      container.querySelector<HTMLElement>(`[data-cell-id="${cid}"]`)
-        ?.parentElement;
-    expect(getSortableWrapper()?.hidden).toBe(false);
-
-    rerender(renderCell("present"));
-    // Still mounted, but hidden
-    expect(container.querySelector('[data-cell-role="output"]')).toBe(
-      outputNode,
-    );
-    expect(getSortableWrapper()?.hidden).toBe(true);
-
-    rerender(renderCell("edit"));
-    expect(container.querySelector('[data-cell-role="output"]')).toBe(
-      outputNode,
-    );
-    expect(getSortableWrapper()?.hidden).toBe(false);
-  });
-});

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

@@ -1,153 +0,0 @@
-/* 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

@@ -1,109 +0,0 @@
-/* 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/columns/__tests__/cell-column.test.tsx

@@ -1,105 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-import { render } from "@testing-library/react";
-import { createStore, Provider } from "jotai";
-import { describe, expect, it } from "vitest";
-import { TooltipProvider } from "@/components/ui/tooltip";
-import type { CellColumnId } from "@/utils/id-tree";
-import { Column } from "../cell-column";
-
-const columnId = "col-1" as CellColumnId;
-
-function renderColumn({
-  width,
-  presenting,
-}: {
-  width: "compact" | "columns";
-  presenting: boolean;
-}) {
-  const store = createStore();
-  return render(
-    <Provider store={store}>
-      <TooltipProvider>
-        <Column
-          columnId={columnId}
-          index={0}
-          width={width}
-          canDelete={false}
-          canMoveLeft={false}
-          canMoveRight={false}
-          presenting={presenting}
-        >
-          <div data-testid="column-children" />
-        </Column>
-      </TooltipProvider>
-    </Provider>,
-  );
-}
-
-describe("Column (single-column notebook)", () => {
-  it("spaces cells with the --notebook-cell-gap variable", () => {
-    const { getByTestId } = renderColumn({
-      width: "compact",
-      presenting: false,
-    });
-    const column = getByTestId("cell-column");
-    expect(column.classList.contains("gap-(--notebook-cell-gap)")).toBe(true);
-    expect(column.classList.contains("[--notebook-cell-gap:0px]")).toBe(false);
-  });
-
-  it("zeroes the cell gap while presenting", () => {
-    const { getByTestId } = renderColumn({
-      width: "compact",
-      presenting: true,
-    });
-    const column = getByTestId("cell-column");
-    expect(column.classList.contains("gap-(--notebook-cell-gap)")).toBe(true);
-    expect(column.classList.contains("[--notebook-cell-gap:0px]")).toBe(true);
-  });
-});
-
-describe("Column (multi-column notebook)", () => {
-  it("shows column chrome when not presenting", () => {
-    const { getByTestId, getAllByTestId } = renderColumn({
-      width: "columns",
-      presenting: false,
-    });
-
-    expect(getByTestId("column-header").hidden).toBe(false);
-    expect(getByTestId("column-frame").classList.contains("border")).toBe(true);
-    for (const handle of getAllByTestId("column-resize-handle")) {
-      expect(handle.hidden).toBe(false);
-    }
-  });
-
-  it("hides column chrome while presenting, without unmounting it", () => {
-    const { getByTestId, getAllByTestId } = renderColumn({
-      width: "columns",
-      presenting: true,
-    });
-
-    // Header (drag handle, move/delete/add buttons) is hidden but mounted
-    expect(getByTestId("column-header").hidden).toBe(true);
-    // No border around the column
-    expect(getByTestId("column-frame").classList.contains("border")).toBe(
-      false,
-    );
-    // Resize handles are hidden
-    const handles = getAllByTestId("column-resize-handle");
-    expect(handles.length).toBeGreaterThan(0);
-    for (const handle of handles) {
-      expect(handle.hidden).toBe(true);
-    }
-    // Cell gap is zeroed on the column root (cascades to descendants)
-    const columnRoot = getByTestId("column-frame").parentElement;
-    expect(columnRoot?.classList.contains("[--notebook-cell-gap:0px]")).toBe(
-      true,
-    );
-    // Editor geometry (saved widths, min-width, gutters) is replaced by the
-    // published content width
-    const inner = getByTestId("column-children").parentElement;
-    expect(inner?.classList.contains("min-w-[500px]")).toBe(false);
-    expect(inner?.classList.contains("w-(--content-width)")).toBe(true);
-    // Children stay mounted
-    expect(getByTestId("column-children")).toBeTruthy();
-  });
-});

package/src/components/editor/renderers/__tests__/cells-renderer.test.tsx

@@ -1,66 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-import { render } from "@testing-library/react";
-import { createStore, Provider } from "jotai";
-import { describe, expect, it } from "vitest";
-import { MockRequestClient } from "@/__mocks__/requests";
-import { parseAppConfig } from "@/core/config/config-schema";
-import { initialLayoutState, layoutStateAtom } from "@/core/layout/layout";
-import { type AppMode, kioskModeAtom } from "@/core/mode";
-import { requestClientAtom } from "@/core/network/requests";
-import { CellsRenderer } from "../cells-renderer";
-import type { LayoutType } from "../types";
-
-function renderWithStore(
-  mode: AppMode,
-  {
-    kiosk = false,
-    layout = "vertical",
-  }: { kiosk?: boolean; layout?: LayoutType } = {},
-) {
-  const store = createStore();
-  store.set(requestClientAtom, MockRequestClient.create());
-  store.set(kioskModeAtom, kiosk);
-  store.set(layoutStateAtom, {
-    ...initialLayoutState(),
-    selectedLayout: layout,
-  });
-
-  return render(
-    <Provider store={store}>
-      <CellsRenderer appConfig={parseAppConfig({})} mode={mode}>
-        <div data-testid="notebook-children" />
-      </CellsRenderer>
-    </Provider>,
-  );
-}
-
-describe("CellsRenderer", () => {
-  it("renders children in edit mode", () => {
-    const { queryByTestId } = renderWithStore("edit");
-    expect(queryByTestId("notebook-children")).toBeTruthy();
-  });
-
-  it("keeps children mounted in present mode with the vertical layout", () => {
-    // This preserves cell output DOM across the edit <-> present toggle;
-    // swapping to the layout renderer would remount every output.
-    const { queryByTestId } = renderWithStore("present");
-    expect(queryByTestId("notebook-children")).toBeTruthy();
-  });
-
-  it("uses the layout renderer in present mode with a non-vertical layout", () => {
-    // Only present+vertical keeps the editable tree mounted; grid/slides swap
-    // to their layout renderer (which remounts outputs) per the toggle logic.
-    const { queryByTestId } = renderWithStore("present", { layout: "grid" });
-    expect(queryByTestId("notebook-children")).toBeFalsy();
-  });
-
-  it("uses the layout renderer in read mode", () => {
-    const { queryByTestId } = renderWithStore("read");
-    expect(queryByTestId("notebook-children")).toBeFalsy();
-  });
-
-  it("uses the layout renderer in kiosk mode", () => {
-    const { queryByTestId } = renderWithStore("edit", { kiosk: true });
-    expect(queryByTestId("notebook-children")).toBeFalsy();
-  });
-});