@marimo-team/islands 0.25.1-dev25 → 0.25.1-dev27

package/package.json

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

package/src/components/app-config/ai-config.tsx

@@ -59,6 +59,7 @@ import {
   listModelsForAiSettings,
 } from "../ai/ai-utils";
 import { getTagColour } from "../ai/display-helpers";
+import { PairWithAgentBanner } from "../editor/actions/pair-with-agent";
 import {
   Accordion,
   AccordionContent,
@@ -2005,6 +2006,7 @@ export const AiConfig: React.FC<AiConfigProps> = ({
       {aiEnabled !== false && (
         <>
           <TabsContent value="ai-providers">
+            <PairWithAgentBanner className="mb-4" />
             <AiProvidersConfig
               form={form}
               config={config}

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

@@ -64,6 +64,10 @@ import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
 import { AIModelDropdown } from "../ai/ai-model-dropdown";
 import { useOpenSettingsToTab } from "../app-config/state";
+import {
+  PairWithAgentBanner,
+  PairWithAgentButton,
+} from "../editor/actions/pair-with-agent";
 import { PairWithAgentModal } from "../editor/actions/pair-with-agent-modal";
 import { PromptInput } from "../editor/ai/add-cell-with-ai";
 import {
@@ -163,6 +167,9 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
         </Button>
       </Tooltip>
       <div className="flex items-center gap-2">
+        <Tooltip content="Connect your agent">
+          <PairWithAgentButton className="mr-1" label="Connect" />
+        </Tooltip>
         <MCPStatusIndicator />
         <Tooltip content="AI Settings">
           <Button
@@ -493,7 +500,7 @@ const PairWithAgentCallout: React.FC<{
       onClick={onPairWithAgent}
     >
       <SparklesIcon className="h-3.5 w-3.5 shrink-0" />
-      <span>Work on this notebook with your own agent</span>
+      <span>Connect your own agent to this notebook</span>
       <ArrowRightIcon className="h-3 w-3 shrink-0" />
     </Button>
   );
@@ -509,13 +516,17 @@ const ChatPanel = () => {
         title="Chat with AI"
         description="No AI provider configured or Chat model not selected"
         action={
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => handleClick("ai", "ai-providers")}
-          >
-            Edit AI settings
-          </Button>
+          <div className="flex flex-col gap-3">
+            <Button
+              variant="outline"
+              size="sm"
+              className="self-start"
+              onClick={() => handleClick("ai", "ai-providers")}
+            >
+              Edit AI settings
+            </Button>
+            <PairWithAgentBanner />
+          </div>
         }
         icon={<BotMessageSquareIcon />}
       />

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/package-alert.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useAtomValue } from "jotai";
 import {
   BoxIcon,
   CheckIcon,
@@ -34,6 +35,7 @@ import {
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import type { PackageOperationStatus } from "@/core/kernel/messages";
 import { useRequestClient } from "@/core/network/requests";
+import { sandboxAtom } from "@/core/packages/sandbox-state";
 import { RESTART_REQUIRED_DESCRIPTION } from "@/core/packages/toast-components";
 import { isWasm } from "@/core/wasm/utils";
 import { usePackageMetadata } from "@/hooks/usePackageMetadata";
@@ -104,6 +106,7 @@ export const PackageAlert: React.FC = () => {
   const { packageAlert } = useAlerts();
   const { clearPackageAlert } = useAlertActions();
   const [userConfig] = useResolvedMarimoConfig();
+  const sandbox = useAtomValue(sandboxAtom);
   const [desiredPackageVersions, setDesiredPackageVersions] = useState<
     Record<string, string>
   >({});
@@ -132,8 +135,14 @@ export const PackageAlert: React.FC = () => {
     return null;
   }
 
+  const sandboxPackageManager =
+    packageAlert.source === "server" ? null : sandbox?.backend;
+  const packageManager =
+    sandboxPackageManager ?? userConfig.package_management.manager;
   const doesSupportVersioning =
-    userConfig.package_management.manager !== "pixi";
+    packageAlert.source === "server" ||
+    sandbox !== null ||
+    packageManager !== "pixi";
 
   if (isMissingPackageAlert(packageAlert)) {
     return (
@@ -207,7 +216,7 @@ export const PackageAlert: React.FC = () => {
               {packageAlert.isolated ? (
                 <>
                   <InstallPackagesButton
-                    manager={userConfig.package_management.manager}
+                    manager={packageManager}
                     packages={packageAlert.packages.map((pkg) => {
                       const parsed = parsePackageSpecifier(pkg);
                       const currentExtras =
@@ -219,10 +228,12 @@ export const PackageAlert: React.FC = () => {
                     source={packageAlert.source}
                   />
 
-                  {!isWasm() && (
+                  {!isWasm() && packageAlert.source !== "server" && (
                     <>
                       <span className="px-2 text-sm">with</span>{" "}
-                      <PackageManagerForm />
+                      <PackageManagerForm
+                        fixedManager={sandboxPackageManager ?? undefined}
+                      />
                     </>
                   )}
                 </>
@@ -449,7 +460,9 @@ const InstallPackagesButton = ({
   );
 };
 
-const PackageManagerForm: React.FC = () => {
+const PackageManagerForm: React.FC<{
+  fixedManager?: PackageManagerName;
+}> = ({ fixedManager }) => {
   const [config, setConfig] = useResolvedMarimoConfig();
   const { saveUserConfig } = useRequestClient();
 
@@ -490,8 +503,8 @@ const PackageManagerForm: React.FC = () => {
                   <NativeSelect
                     data-testid="install-package-manager-select"
                     onChange={(e) => field.onChange(e.target.value)}
-                    value={field.value}
-                    disabled={field.disabled}
+                    value={fixedManager ?? field.value}
+                    disabled={fixedManager !== undefined || field.disabled}
                     className="inline-flex mr-2"
                   >
                     {PackageManagerNames.map((option) => (