@marimo-team/frontend 0.25.1-dev3 → 0.25.1-dev31

package/src/components/dependency-graph/elements.ts

@@ -225,7 +225,7 @@ export class VerticalElementsBuilder implements ElementsBuilder {
     };
   }
 
-  createElements(
+  public createElements(
     cellIds: CellId[],
     cellAtoms: Atom<CellData>[],
     variables: Variables,
@@ -311,7 +311,7 @@ export class TreeElementsBuilder implements ElementsBuilder {
     };
   }
 
-  createElements(
+  public createElements(
     cellIds: CellId[],
     cellAtoms: Atom<CellData>[],
     variables: Variables,

package/src/components/editor/__tests__/package-alert.test.tsx

@@ -0,0 +1,140 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { alertAtom } from "@/core/alerts/state";
+import {
+  defaultUserConfig,
+  type PackageManagerName,
+} from "@/core/config/config-schema";
+import { userConfigAtom } from "@/core/config/config";
+import { requestClientAtom } from "@/core/network/requests";
+import { sandboxAtom } from "@/core/packages/sandbox-state";
+import { PackageAlert } from "../package-alert";
+
+vi.mock("@/hooks/usePackageMetadata", () => ({
+  usePackageMetadata: () => ({
+    data: { versions: ["1.2.3"], extras: [] },
+    error: null,
+    isPending: false,
+  }),
+}));
+
+function mountPackageAlert({
+  configuredManager,
+  sandboxBackend,
+  source = "kernel",
+}: {
+  configuredManager: PackageManagerName;
+  sandboxBackend: "uv" | "pixi" | null;
+  source?: "kernel" | "server";
+}) {
+  const store = createStore();
+  const client = MockRequestClient.create();
+  const config = defaultUserConfig();
+  store.set(userConfigAtom, {
+    ...config,
+    package_management: { manager: configuredManager },
+  });
+  store.set(requestClientAtom, client);
+  store.set(
+    sandboxAtom,
+    sandboxBackend
+      ? {
+          backend: sandboxBackend,
+          manifest: "",
+          filename: "notebook.py",
+        }
+      : null,
+  );
+  store.set(alertAtom, {
+    ...store.get(alertAtom),
+    packageAlert: {
+      id: "missing-package",
+      kind: "missing",
+      packages: ["polars"],
+      isolated: true,
+      source,
+    },
+  });
+  render(
+    <Provider store={store}>
+      <TooltipProvider>
+        <PackageAlert />
+      </TooltipProvider>
+    </Provider>,
+  );
+  return client;
+}
+
+it.each(["uv", "pixi"] as const)(
+  "shows the fixed %s manager for a sandbox",
+  (sandboxBackend) => {
+    const client = mountPackageAlert({
+      configuredManager: sandboxBackend === "uv" ? "pixi" : "uv",
+      sandboxBackend,
+    });
+
+    const managerSelect = screen.getByTestId("install-package-manager-select");
+    expect(managerSelect).toHaveValue(sandboxBackend);
+    expect(managerSelect).toBeDisabled();
+
+    fireEvent.click(screen.getByTestId("install-packages-button"));
+    expect(client.sendInstallMissingPackages).toHaveBeenCalledWith(
+      expect.objectContaining({ manager: sandboxBackend }),
+    );
+  },
+);
+
+it("keeps the configured package manager selectable outside a sandbox", () => {
+  mountPackageAlert({ configuredManager: "uv", sandboxBackend: null });
+
+  const managerSelect = screen.getByTestId("install-package-manager-select");
+  expect(managerSelect).toHaveValue("uv");
+  expect(managerSelect).not.toBeDisabled();
+});
+
+it("installs a selected version in a Pixi sandbox", () => {
+  const client = mountPackageAlert({
+    configuredManager: "uv",
+    sandboxBackend: "pixi",
+  });
+
+  fireEvent.change(screen.getByDisplayValue("latest"), {
+    target: { value: "1.2.3" },
+  });
+  fireEvent.click(screen.getByTestId("install-packages-button"));
+  expect(client.sendInstallMissingPackages).toHaveBeenCalledExactlyOnceWith({
+    manager: "pixi",
+    versions: { polars: "1.2.3" },
+    source: "kernel",
+  });
+});
+
+it("does not offer version selection for Pixi outside a sandbox", () => {
+  mountPackageAlert({ configuredManager: "pixi", sandboxBackend: null });
+
+  expect(screen.queryByDisplayValue("latest")).not.toBeInTheDocument();
+});
+
+it("uses the configured package manager for a server installation", () => {
+  const client = mountPackageAlert({
+    configuredManager: "uv",
+    sandboxBackend: "pixi",
+    source: "server",
+  });
+
+  expect(
+    screen.queryByTestId("install-package-manager-select"),
+  ).not.toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("install-packages-button"));
+  expect(client.sendInstallMissingPackages).toHaveBeenCalledExactlyOnceWith({
+    manager: "uv",
+    versions: { polars: "" },
+    source: "server",
+  });
+});

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

@@ -0,0 +1,107 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Provider } from "jotai";
+import type React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ModalProvider } from "@/components/modal/ImperativeModal";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { store } from "@/core/state/jotai";
+import { PairWithAgentBanner, PairWithAgentButton } from "../pair-with-agent";
+
+const mocks = vi.hoisted(() => ({
+  isWasm: vi.fn(() => false),
+}));
+
+vi.mock("@/core/wasm/utils", () => ({
+  isWasm: mocks.isWasm,
+}));
+
+function wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Provider store={store}>
+      <TooltipProvider>
+        <ModalProvider>{children}</ModalProvider>
+      </TooltipProvider>
+    </Provider>
+  );
+}
+
+function stubTokenFetch() {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn().mockResolvedValue(new Response(JSON.stringify({ token: null }))),
+  );
+}
+
+describe("PairWithAgent", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    mocks.isWasm.mockReset();
+    mocks.isWasm.mockReturnValue(false);
+  });
+
+  it("shows local agent options", () => {
+    render(<PairWithAgentBanner />, { wrapper });
+
+    expect(
+      screen.getByRole("group", { name: "Supported agents" }),
+    ).toBeVisible();
+    expect(screen.getByRole("figure", { name: "Claude Code" })).toBeVisible();
+    expect(screen.getByRole("figure", { name: "Codex" })).toBeVisible();
+    expect(screen.getByRole("figure", { name: "Cursor" })).toBeVisible();
+    expect(screen.getByRole("figure", { name: "Gemini CLI" })).toBeVisible();
+    expect(screen.getByRole("figure", { name: "OpenCode" })).toBeVisible();
+    expect(
+      screen.getByRole("figure", { name: "GitHub Copilot" }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("figure", { name: "Any local agent" }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("button", {
+        name: "Learn more.",
+      }),
+    ).toBeVisible();
+  });
+
+  it("opens the pairing dialog from the banner description", () => {
+    stubTokenFetch();
+    render(<PairWithAgentBanner />, { wrapper });
+
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "Learn more.",
+      }),
+    );
+
+    expect(
+      screen.getByRole("dialog", { name: "Pair with an agent" }),
+    ).toBeVisible();
+  });
+
+  it("opens the pairing dialog and preserves a passed click handler", () => {
+    const onClick = vi.fn();
+    stubTokenFetch();
+    render(<PairWithAgentButton onClick={onClick} />, { wrapper });
+
+    fireEvent.click(screen.getByRole("button", { name: "Connect your agent" }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(
+      screen.getByRole("dialog", { name: "Pair with an agent" }),
+    ).toBeVisible();
+  });
+
+  it("hides pairing controls in WASM", () => {
+    mocks.isWasm.mockReturnValue(true);
+
+    const { container, rerender } = render(<PairWithAgentButton />, {
+      wrapper,
+    });
+    expect(container).toBeEmptyDOMElement();
+
+    rerender(<PairWithAgentBanner />);
+    expect(container).toBeEmptyDOMElement();
+  });
+});

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

@@ -0,0 +1,119 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { BotIcon } from "lucide-react";
+import React from "react";
+import { AiProviderIcon } from "@/components/ai/ai-provider-icon";
+import { useImperativeModal } from "@/components/modal/ImperativeModal";
+import { Button, type ButtonProps } from "@/components/ui/button";
+import { isWasm } from "@/core/wasm/utils";
+import { cn } from "@/utils/cn";
+import { PairWithAgentModal } from "./pair-with-agent-modal";
+
+const FEATURED_AGENTS = [
+  { id: "claude", label: "Claude Code" },
+  { id: "codex", label: "Codex" },
+  { id: "cursor", label: "Cursor" },
+  { id: "gemini", label: "Gemini CLI" },
+  { id: "opencode", label: "OpenCode" },
+  { id: "github", label: "GitHub Copilot" },
+  { id: "openai-compatible", label: "Any local agent" },
+] as const satisfies ReadonlyArray<{
+  id: React.ComponentProps<typeof AiProviderIcon>["provider"];
+  label: string;
+}>;
+
+export const usePairWithAgentModal = () => {
+  const { openModal, closeModal } = useImperativeModal();
+
+  return React.useCallback(
+    () => openModal(<PairWithAgentModal onClose={closeModal} />),
+    [openModal, closeModal],
+  );
+};
+
+export const PairWithAgentButton: React.FC<
+  ButtonProps & { label?: string }
+> = ({ className, label = "Connect your agent", onClick, ...props }) => {
+  const openPairWithAgentModal = usePairWithAgentModal();
+
+  if (isWasm()) {
+    return null;
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="link"
+      size="xs"
+      className={cn("h-auto gap-1 px-0", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          openPairWithAgentModal();
+        }
+      }}
+      {...props}
+    >
+      {label}
+    </Button>
+  );
+};
+
+export const PairWithAgentBanner: React.FC<{
+  label?: string;
+  className?: string;
+}> = ({ label = "Connect your agent", className }) => {
+  const openPairWithAgentModal = usePairWithAgentModal();
+
+  if (isWasm()) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-(--blue-6) bg-(--blue-2)/50 p-3",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2 text-sm font-semibold">
+        {label}
+        <fieldset
+          className="m-0 flex min-w-0 -space-x-1.5 border-0 p-0 mb-0.5"
+          aria-label="Supported agents"
+        >
+          {FEATURED_AGENTS.map(({ id, label }) => (
+            <figure
+              key={id}
+              title={label}
+              aria-label={label}
+              className="flex size-6 items-center justify-center rounded-full border bg-background shadow-xs"
+            >
+              {id === "openai-compatible" ? (
+                <BotIcon className="size-3.5" aria-hidden={true} />
+              ) : (
+                <AiProviderIcon
+                  provider={id}
+                  className="size-3.5"
+                  aria-hidden={true}
+                />
+              )}
+            </figure>
+          ))}
+        </fieldset>
+      </div>
+      <div className="mt-1 text-xs leading-relaxed">
+        <p className="inline">
+          Use your AI coding agent to pair-program on this notebook.
+        </p>
+        <button
+          type="button"
+          onClick={openPairWithAgentModal}
+          className="text-link hover:underline ml-1"
+        >
+          Learn more.
+        </button>
+      </div>
+    </div>
+  );
+};

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

@@ -297,11 +297,12 @@ export function useNotebookActions({
 
     {
       icon: <SparklesIcon size={14} strokeWidth={1.5} />,
-      label: "Pair with an agent",
+      label: "Connect your agent",
       hidden: isWasm(),
       handle: async () => {
         openModal(<PairWithAgentModal onClose={closeModal} />);
       },
+      additionalKeywords: ["connect"],
     },
 
     {

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

@@ -29,6 +29,7 @@ import useEvent from "react-use-event-hook";
 import { DefaultChatTransport } from "ai";
 import { z } from "zod";
 import { AIModelDropdown } from "@/components/ai/ai-model-dropdown";
+import { PairWithAgentButton } from "@/components/editor/actions/pair-with-agent";
 import {
   AddContextButton,
   AttachFileButton,
@@ -301,6 +302,7 @@ export const AddCellWithAI: React.FC<{
           showAddCustomModelDocs={true}
         />
         {languageDropdown}
+        <PairWithAgentButton />
       </div>
       <div className="flex flex-row items-center">
         {files.length > 0 && (

package/src/components/editor/ai/staged-cell-submission.ts

@@ -14,13 +14,13 @@ interface SubmissionAttempt {
 export class StagedCellSubmissionController {
   private activeAttempt: SubmissionAttempt | null = null;
 
-  cancel() {
+  public cancel() {
     if (this.activeAttempt) {
       this.activeAttempt.cancelled = true;
     }
   }
 
-  async run<T>({ prepare, submit, onError }: SubmissionCallbacks<T>) {
+  public async run<T>({ prepare, submit, onError }: SubmissionCallbacks<T>) {
     if (this.activeAttempt !== null) {
       return;
     }

package/src/components/editor/ai/transport/chat-transport.tsx

@@ -15,7 +15,7 @@ export class StreamingChunkTransport<
 > extends DefaultChatTransport<UI_MESSAGE> {
   private onChunkReceived: (chunk: UIMessageChunk) => void;
 
-  constructor(
+  public constructor(
     options: HttpChatTransportInitOptions<UI_MESSAGE>,
     onChunkReceived: (chunk: UIMessageChunk) => void,
   ) {

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

@@ -40,7 +40,12 @@ const ContributeSnippetModal: React.FC<{
         <DialogDescription>
           Have a useful snippet you want to share with the community? Make a
           pull request{" "}
-          <a href={Constants.githubPage} target="_blank" className="underline">
+          <a
+            href={Constants.githubPage}
+            target="_blank"
+            rel="noreferrer"
+            className="underline"
+          >
             on GitHub
           </a>
           .