@marimo-team/islands 0.25.3-dev222 → 0.25.3-dev223

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

@@ -102,11 +102,14 @@ describe("PairWithAgentModal", () => {
       expect(
         panel.textContent?.includes("Agent connections require OpenCode 2.x"),
       ).toBe(tab === "OpenCode");
-      expect(panel).toHaveTextContent(
-        tab === "Other Agents"
-          ? "1. Copy this prompt"
-          : "1. Run in your terminal",
-      );
+      expect(
+        within(panel).getByText(
+          tab === "Other Agents"
+            ? "Copy this prompt into your agent"
+            : "Run in your terminal",
+          { exact: true },
+        ),
+      ).toBeInTheDocument();
       fireEvent.click(
         within(panel).getByRole("button", {
           name: tab === "Other Agents" ? "Copy prompt" : "Copy command",
@@ -364,6 +367,7 @@ describe("PairWithAgentModal", () => {
     });
 
     const panel = screen.getByRole("tabpanel");
+    expect(panel).toHaveTextContent("1. Run in your terminal");
     expect(panel).toHaveTextContent("2. Paste when prompted for a token");
     expect(panel).not.toHaveTextContent("secret-token");
     fireEvent.click(

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

@@ -60,18 +60,18 @@ describe("PairWithAgent", () => {
     ).toBeVisible();
     expect(
       screen.getByRole("button", {
-        name: "Pair your agent",
+        name: "Set up pairing",
       }),
     ).toBeVisible();
   });
 
-  it("opens the pairing dialog from the banner description", () => {
+  it("opens the pairing dialog from the banner button", () => {
     stubTokenFetch();
     render(<PairWithAgentBanner />, { wrapper });
 
     fireEvent.click(
       screen.getByRole("button", {
-        name: "Pair your agent",
+        name: "Set up pairing",
       }),
     );
 

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

@@ -118,7 +118,7 @@ export const PairWithAgentModal: React.FC<{
       <DialogHeader>
         <DialogTitle>Pair an agent</DialogTitle>
         <DialogDescription>
-          Use an AI coding agent to pair-program on this notebook.{" "}
+          Use an AI coding agent to pair program on this notebook.{" "}
           <a
             href="https://links.marimo.app/marimo-pair"
             target="_blank"
@@ -159,7 +159,7 @@ export const PairWithAgentModal: React.FC<{
               className="mt-4 flex flex-col gap-4"
             >
               <Step
-                index={1}
+                index={hasToken ? 1 : undefined}
                 title="Run in your terminal"
                 hint={
                   hostEnabled && tab === "opencode"
@@ -191,7 +191,6 @@ export const PairWithAgentModal: React.FC<{
 
           <TabsContent value="prompt" className="mt-4 flex flex-col gap-4">
             <Step
-              index={1}
               title="Copy this prompt into your agent"
               hint={
                 hasToken
@@ -224,7 +223,7 @@ export const PairWithAgentModal: React.FC<{
 };
 
 const Step: React.FC<{
-  index: number;
+  index?: number;
   title: string;
   hint?: string;
   children: React.ReactNode;
@@ -232,7 +231,8 @@ const Step: React.FC<{
   <div className="flex flex-col gap-2">
     <div className="flex items-baseline gap-2">
       <span className="text-sm font-medium">
-        {index}. {title}
+        {index !== undefined && `${index}. `}
+        {title}
       </span>
       {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
     </div>

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

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { BotIcon } from "lucide-react";
+import { ArrowUpRightIcon, BotIcon } from "lucide-react";
 import React from "react";
 import { AiProviderIcon } from "@/components/ai/ai-provider-icon";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
@@ -72,7 +72,7 @@ export const PairWithAgentBanner: React.FC<{
   return (
     <div
       className={cn(
-        "rounded-lg border border-(--blue-6) bg-(--blue-2)/50 p-3",
+        "rounded-lg border border-border bg-muted/30 p-3",
         className,
       )}
     >
@@ -103,18 +103,21 @@ export const PairWithAgentBanner: React.FC<{
         </fieldset>
       </div>
       <div className="mt-1 text-xs leading-relaxed">
-        <p className="inline">
+        <p>
           Pair your coding agent with this notebook to edit and run cells,
           inspect variables, and more, straight from your agent's CLI or user
           interface.
         </p>
-        <button
+        <Button
           type="button"
+          variant="outline"
+          size="xs"
           onClick={openPairWithAgentModal}
-          className="text-link hover:underline ml-1"
+          className="mt-3 gap-1"
         >
-          Pair your agent
-        </button>
+          Set up pairing
+          <ArrowUpRightIcon className="size-3.5" aria-hidden={true} />
+        </Button>
       </div>
     </div>
   );