@marimo-team/islands 0.25.3-dev5 → 0.25.3-dev6

package/src/components/editor/chrome/wrapper/footer-items/attachment-status.tsx

@@ -1,8 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
-import { BotIcon } from "lucide-react";
-import { useState } from "react";
+import {
+  BotIcon,
+  CheckIcon,
+  Loader2Icon,
+  UnplugIcon,
+  XIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
 import {
   Popover,
   PopoverContent,
@@ -13,43 +20,86 @@ import {
   agentAttachmentsAtom,
   attachmentLabel,
 } from "@/core/attachments/state";
-import { pairPreviewAtom } from "@/core/config/pair";
+import { agentToast } from "@/core/attachments/toast";
+import { pairConfigAtom } from "@/core/config/pair";
+import { stableSessionIdAtom } from "@/core/kernel/session";
+import { API } from "@/core/network/api";
 import { useTimeAgo } from "@/hooks/useFormatting";
-import { Objects } from "@/utils/objects";
 import { FooterItem } from "../footer-item";
 
 export function AttachmentStatus() {
-  const pairPreview = useAtomValue(pairPreviewAtom);
+  const hostEnabled = useAtomValue(pairConfigAtom)?.hostEnabled;
   const agents = useAtomValue(agentAttachmentsAtom);
-  if (!pairPreview) {
+  const [open, setOpen] = useState(false);
+  const previous = useRef(new Set<string>());
+  const automatic = useRef(false);
+  const pointerInside = useRef(false);
+  const timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const stopTimer = useCallback(() => clearTimeout(timeout.current), []);
+  const startTimer = useCallback(() => {
+    stopTimer();
+    timeout.current = setTimeout(() => setOpen(false), 3000);
+  }, [stopTimer]);
+  const preserveEditorFocus = (event: Event) => {
+    if (automatic.current) {
+      event.preventDefault();
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      pointerInside.current = false;
+    }
+    const current = new Set(
+      hostEnabled ? agents.map((agent) => agent.identity ?? agent.id) : [],
+    );
+    const connected = [...current].some((id) => !previous.current.has(id));
+    for (const id of current) {
+      previous.current.add(id);
+    }
+    if (current.size === 0) {
+      stopTimer();
+      setOpen(false);
+    } else if (connected) {
+      if (open && !automatic.current) {
+        return;
+      }
+      automatic.current = true;
+      setOpen(true);
+      if (!pointerInside.current) {
+        startTimer();
+      }
+    }
+  }, [agents, hostEnabled, open, startTimer, stopTimer]);
+
+  useEffect(() => stopTimer, [stopTimer]);
+
+  if (!hostEnabled || agents.length === 0) {
     return null;
   }
-  const groups = Objects.groupBy(
-    agents,
-    (attachment) =>
-      attachment.identity
-        ? `identity:${attachment.identity}`
-        : `attachment:${attachment.id}`,
-    (attachment) => attachment,
-  );
-  return Object.entries(groups).map(([identity, attachments]) => (
-    <AttachmentStatusItem key={identity} attachments={attachments} />
-  ));
-}
+  const identities = new Set(agents.map((agent) => agent.identity ?? agent.id));
+  const label =
+    identities.size === 1
+      ? `${attachmentLabel(agents[0])} connected`
+      : `${identities.size} agents connected`;
 
-function AttachmentStatusItem({ attachments }: { attachments: Attachment[] }) {
-  const [open, setOpen] = useState(false);
-  const timeAgo = useTimeAgo();
-  const label = attachmentLabel(attachments[0]);
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover
+      open={open}
+      onOpenChange={(nextOpen) => {
+        automatic.current = false;
+        stopTimer();
+        setOpen(nextOpen);
+      }}
+    >
       <PopoverTrigger asChild={true}>
         <FooterItem
           asChild={true}
-          tooltip={`${label}: connected`}
+          tooltip={label}
           selected={open}
           data-testid="footer-attachment-status"
-          aria-label={`${label}: Connected`}
+          aria-label={label}
         >
           <button type="button">
             <span className="flex items-center gap-1.5">
@@ -59,24 +109,129 @@ function AttachmentStatusItem({ attachments }: { attachments: Attachment[] }) {
           </button>
         </FooterItem>
       </PopoverTrigger>
-      <PopoverContent className="w-64 text-sm">
-        <h4 className="font-medium">{label}</h4>
-        <ul className="space-y-2">
-          {attachments.map((attachment) => (
-            <li key={attachment.id}>
-              <p
-                className="truncate text-xs text-muted-foreground"
-                title={attachment.id}
-              >
-                {attachment.id}
-              </p>
-              <p className="text-muted-foreground">
-                Connected {timeAgo(attachment.since)}
-              </p>
-            </li>
+      <PopoverContent
+        className="w-80 p-0 text-sm"
+        side="top"
+        align="start"
+        onOpenAutoFocus={preserveEditorFocus}
+        onCloseAutoFocus={preserveEditorFocus}
+        onPointerEnter={() => {
+          pointerInside.current = true;
+          stopTimer();
+        }}
+        onPointerLeave={() => {
+          pointerInside.current = false;
+          if (automatic.current) {
+            startTimer();
+          }
+        }}
+        onFocusCapture={() => {
+          automatic.current = false;
+          stopTimer();
+        }}
+      >
+        <h4 className="font-medium px-4 py-3 border-b">{label}</h4>
+        <div className="max-h-72 overflow-auto divide-y">
+          {agents.map((attachment) => (
+            <AttachmentStatusItem key={attachment.id} attachment={attachment} />
           ))}
-        </ul>
+        </div>
+        <p className="px-4 py-3 border-t text-xs text-muted-foreground">
+          Disconnect removes the notebook connection. The agent session keeps
+          running.
+        </p>
       </PopoverContent>
     </Popover>
   );
 }
+
+function AttachmentStatusItem({ attachment }: { attachment: Attachment }) {
+  const stableSessionId = useAtomValue(stableSessionIdAtom);
+  const [state, setState] = useState<"idle" | "confirming" | "disconnecting">(
+    "idle",
+  );
+  const confirming = state !== "idle";
+  const disconnecting = state === "disconnecting";
+  const disconnectButton = useRef<HTMLButtonElement>(null);
+  const timeAgo = useTimeAgo();
+  const label = attachmentLabel(attachment);
+  const disconnectLabel = disconnecting
+    ? `Disconnecting ${label}`
+    : confirming
+      ? `Confirm disconnect ${label}`
+      : `Disconnect ${label}`;
+
+  const disconnect = async () => {
+    if (disconnecting || !stableSessionId) {
+      return;
+    }
+    setState("disconnecting");
+    try {
+      await API.post(
+        `/pair/notebooks/${encodeURIComponent(stableSessionId)}/attachments/detach`,
+        { attachment_id: attachment.id },
+      );
+    } catch {
+      agentToast({ variant: "danger", title: `Could not disconnect ${label}` });
+    } finally {
+      setState("idle");
+    }
+  };
+
+  return (
+    <div className="flex items-start gap-3 px-4 py-3">
+      <div className="min-w-0 flex-1">
+        <h5 className="font-medium">{label}</h5>
+        <p className="text-xs text-muted-foreground mt-1">
+          Connected {timeAgo(attachment.since)}
+        </p>
+        <p
+          className="text-xs font-mono text-muted-foreground truncate mt-1"
+          title={attachment.id}
+        >
+          {attachment.id}
+        </p>
+      </div>
+      <div className="flex shrink-0 items-center gap-1">
+        {confirming && (
+          <span className="text-xs text-muted-foreground">
+            {disconnecting ? "Disconnecting…" : "Disconnect?"}
+          </span>
+        )}
+        <Button
+          ref={disconnectButton}
+          size="icon"
+          variant="outlineDestructive"
+          disabled={disconnecting || !stableSessionId}
+          onClick={confirming ? disconnect : () => setState("confirming")}
+          aria-label={disconnectLabel}
+          title={disconnectLabel}
+          aria-busy={disconnecting}
+        >
+          {disconnecting ? (
+            <Loader2Icon className="size-3.5 animate-spin" aria-hidden={true} />
+          ) : confirming ? (
+            <CheckIcon className="size-3.5" aria-hidden={true} />
+          ) : (
+            <UnplugIcon className="size-3.5" aria-hidden={true} />
+          )}
+        </Button>
+        {confirming && (
+          <Button
+            size="icon"
+            variant="outline"
+            disabled={disconnecting}
+            onClick={() => {
+              setState("idle");
+              disconnectButton.current?.focus();
+            }}
+            aria-label={`Cancel disconnect ${label}`}
+            title={`Cancel disconnect ${label}`}
+          >
+            <XIcon className="size-3.5" aria-hidden={true} />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/editor/errors/__tests__/send-error-report-button.test.tsx

@@ -13,16 +13,18 @@ import type React from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { MockNotebook } from "@/__mocks__/notebook";
 import { cellId } from "@/__tests__/branded";
-import { PAIR_PREVIEW } from "@/__tests__/fixtures/pair-preview";
+import { PAIR_CONFIG } from "@/__tests__/fixtures/pair-config";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { type Attachment, attachmentsAtom } from "@/core/attachments/state";
 import { exportedForTesting, notebookAtom } from "@/core/cells/cells";
-import type {
-  CellOutputHandoff,
-  ErrorHandoffOutput,
+import {
+  type CellOutputMessage,
+  type ErrorMessageOutput,
+  ERROR_MESSAGE_INSTRUCTIONS,
 } from "@/core/cells/error-report";
-import { pairPreviewAtom } from "@/core/config/pair";
+import { pairConfigAtom } from "@/core/config/pair";
+import { notebookStateFromSession } from "@/core/cells/session";
 import type { MarimoError, OutputMessage } from "@/core/kernel/messages";
 import {
   type StableSessionId,
@@ -57,11 +59,15 @@ const AGENT: Attachment = {
 const ROUTE = "/pair/notebooks/stable%2Ftest/messages";
 const MESSAGE = "df is not defined";
 const CODE = "df.head()";
-const REPORT: CellOutputHandoff<ErrorHandoffOutput> = {
+const REPORT: CellOutputMessage<ErrorMessageOutput> = {
   type: "cell-output",
   cell_id: CELL_ID,
   code: CODE,
-  output: { type: "error", message: MESSAGE },
+  output: {
+    type: "error",
+    instructions: ERROR_MESSAGE_INSTRUCTIONS,
+    message: MESSAGE,
+  },
 };
 const ERRORS: MarimoError[] = [
   {
@@ -86,7 +92,7 @@ function renderButton({
 } = {}) {
   const store = createStore();
   store.set(connectionAtom, { state: ConnectionState.OPEN });
-  store.set(pairPreviewAtom, preview ? PAIR_PREVIEW : undefined);
+  store.set(pairConfigAtom, { ...PAIR_CONFIG, hostEnabled: preview });
   store.set(attachmentsAtom, attachments);
   store.set(stableSessionIdAtom, stableId);
   const wrapper = ({ children }: { children: React.ReactNode }) => (
@@ -105,9 +111,15 @@ describe("SendErrorReportButton", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     vi.mocked(API.post).mockResolvedValue("");
+    vi.mocked(toast).mockReturnValue({
+      id: "notice",
+      dismiss: vi.fn(),
+      update: vi.fn(),
+      upsert: vi.fn(),
+    });
   });
 
-  it("hides outside the preview without building content", () => {
+  it("hides when host is disabled without building content", () => {
     const getContent = vi.fn(() => REPORT);
     expect(
       renderButton({
@@ -138,7 +150,10 @@ describe("SendErrorReportButton", () => {
     expect(getContent).not.toHaveBeenCalled();
     send();
     await waitFor(() =>
-      expect(toast).toHaveBeenCalledWith({ title: "Sent to Pi, Claude Code" }),
+      expect(toast).toHaveBeenCalledWith({
+        title: "Sent to Pi, Claude Code",
+        duration: 3000,
+      }),
     );
     expect(API.post).toHaveBeenCalledWith(ROUTE, REPORT);
     expect(getContent).toHaveBeenCalledOnce();
@@ -190,12 +205,20 @@ describe("SendErrorReportButton", () => {
     renderButton();
     send();
     await waitFor(() =>
-      expect(toast).toHaveBeenCalledWith({ variant: "danger", title }),
+      expect(toast).toHaveBeenCalledWith({
+        variant: "danger",
+        title,
+        description: error.message,
+        duration: 5000,
+      }),
     );
     expect(screen.getByRole("button")).toBeEnabled();
     send();
     await waitFor(() =>
-      expect(toast).toHaveBeenCalledWith({ title: "Sent to Pi" }),
+      expect(toast).toHaveBeenCalledWith({
+        title: "Sent to Pi",
+        duration: 3000,
+      }),
     );
     expect(API.post).toHaveBeenCalledTimes(2);
     expect(API.post).toHaveBeenLastCalledWith(ROUTE, REPORT);
@@ -222,6 +245,7 @@ describe("SendErrorReportButton", () => {
         ...REPORT,
         output: {
           type: "error",
+          instructions: ERROR_MESSAGE_INSTRUCTIONS,
           message: MESSAGE,
           traceback: "Traceback\nNameError: df is not defined",
         },
@@ -264,6 +288,7 @@ describe("SendErrorReportButton", () => {
         ...REPORT,
         output: {
           type: "error",
+          instructions: ERROR_MESSAGE_INSTRUCTIONS,
           message: "ValueError: bad <value>",
           traceback: "Traceback\nValueError: bad <value>",
         },
@@ -271,6 +296,90 @@ describe("SendErrorReportButton", () => {
     );
   });
 
+  it("sends plain code-mode traceback text without parsing it as HTML", async () => {
+    const traceback =
+      '  File "<cell>", line 1\nValueError: bad <value> & <other>';
+    renderButton({
+      content: (
+        <OutputRenderer
+          cellId={CELL_ID}
+          message={{
+            channel: "stderr",
+            mimetype: "application/vnd.marimo+traceback",
+            traceback_format: "text",
+            code: CODE,
+            data: traceback,
+          }}
+        />
+      ),
+    });
+    expect(screen.getByText(/ValueError: bad <value>/)).toHaveTextContent(
+      "<cell>",
+    );
+    send();
+    await waitFor(() =>
+      expect(API.post).toHaveBeenCalledWith(ROUTE, {
+        ...REPORT,
+        output: {
+          type: "error",
+          instructions: ERROR_MESSAGE_INSTRUCTIONS,
+          message: "ValueError: bad <value> & <other>",
+          traceback,
+        },
+      }),
+    );
+  });
+
+  it("sends the restored exception type and complete traceback", async () => {
+    const state = notebookStateFromSession(
+      {
+        version: "1",
+        metadata: { marimo_version: "1", script_metadata_hash: null },
+        cells: [
+          {
+            id: CELL_ID,
+            code_hash: null,
+            console: [],
+            outputs: [
+              {
+                type: "error",
+                ename: "ValueError",
+                evalue: "cached failure",
+                traceback: [
+                  "<pre>Traceback",
+                  "  failed()\n",
+                  "ValueError: cached failure</pre>",
+                ],
+                code: CODE,
+              },
+            ],
+          },
+        ],
+      },
+      null,
+    );
+    const message = state?.cellRuntime[CELL_ID].output;
+    expect(message).toBeDefined();
+    renderButton({
+      content: message && <OutputRenderer cellId={CELL_ID} message={message} />,
+    });
+    send();
+    await waitFor(() =>
+      expect(API.post).toHaveBeenCalledWith(ROUTE, {
+        ...REPORT,
+        output: {
+          type: "error",
+          instructions: ERROR_MESSAGE_INSTRUCTIONS,
+          message: "cached failure",
+          traceback: "Traceback\n  failed()\nValueError: cached failure",
+        },
+      }),
+    );
+    expect(message?.data).toEqual([
+      expect.objectContaining({ exception_type: "ValueError" }),
+    ]);
+  });
+
   it("sends updated content after the error changes", async () => {
     const { rerender } = renderButton();
     const updated = {
@@ -385,7 +494,11 @@ describe("SendErrorReportButton", () => {
         type: "cell-output",
         cell_id: CELL_ID,
         code: "x + 1",
-        output: { type: "error", message: "Ancestor failed" },
+        output: {
+          type: "error",
+          instructions: ERROR_MESSAGE_INSTRUCTIONS,
+          message: "Ancestor failed",
+        },
       }),
     );
   });
@@ -408,6 +521,7 @@ describe("SendErrorReportButton", () => {
         code: "slow()",
         output: {
           type: "error",
+          instructions: ERROR_MESSAGE_INSTRUCTIONS,
           message: "This cell was interrupted and needs to be re-run",
         },
       }),

package/src/components/editor/errors/send-error-report-button.tsx

@@ -4,27 +4,27 @@ import { useAtomValue } from "jotai";
 import { SendIcon } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { toast } from "@/components/ui/use-toast";
 import {
   agentAttachmentsAtom,
   attachmentLabel,
 } from "@/core/attachments/state";
-import { pairPreviewAtom } from "@/core/config/pair";
+import { agentToast } from "@/core/attachments/toast";
+import { pairConfigAtom } from "@/core/config/pair";
 import { stableSessionIdAtom } from "@/core/kernel/session";
 import { API } from "@/core/network/api";
-import { HTTPError } from "@/utils/errors";
+import { HTTPError, prettyError } from "@/utils/errors";
 
 export function SendErrorReportButton({
   getContent,
 }: {
   getContent: () => unknown;
 }) {
-  const pairPreview = useAtomValue(pairPreviewAtom);
+  const hostEnabled = useAtomValue(pairConfigAtom)?.hostEnabled;
   const agents = useAtomValue(agentAttachmentsAtom);
   const stableSessionId = useAtomValue(stableSessionIdAtom);
   const [sending, setSending] = useState(false);
 
-  if (!pairPreview) {
+  if (!hostEnabled) {
     return null;
   }
 
@@ -38,14 +38,17 @@ export function SendErrorReportButton({
         `/pair/notebooks/${encodeURIComponent(stableSessionId)}/messages`,
         getContent(),
       );
-      toast({ title: `Sent to ${agents.map(attachmentLabel).join(", ")}` });
+      agentToast({
+        title: `Sent to ${agents.map(attachmentLabel).join(", ")}`,
+      });
     } catch (error) {
-      toast({
+      agentToast({
         variant: "danger",
         title:
           error instanceof HTTPError && error.status === 409
             ? "No agent attached"
             : "Could not send error",
+        description: prettyError(error),
       });
     } finally {
       setSending(false);

package/src/components/editor/output/MarimoTracebackOutput.tsx

@@ -35,6 +35,7 @@ import { isWasm } from "@/core/wasm/utils";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { sanitizeHtml } from "@/plugins/core/sanitize-html";
 import { copyToClipboard } from "@/utils/copy";
+import { parseHtmlContent } from "@/utils/dom";
 import {
   containsMangledLocal,
   splitMangledLocals,
@@ -54,29 +55,38 @@ import type { OnRefactorWithAI } from "../Output";
 interface Props {
   cellId: CellId | undefined;
   traceback: string;
+  tracebackFormat?: "html" | "text";
   code?: string;
   onRefactorWithAI?: OnRefactorWithAI;
 }
 
-/**
- * List of errors due to violations of Marimo semantics.
- */
+/** Render a traceback and actions for its captured execution. */
 export const MarimoTracebackOutput = ({
   onRefactorWithAI,
   traceback,
+  tracebackFormat = "html",
   cellId,
   code,
 }: Props): JSX.Element => {
-  const htmlTraceback = renderHTML({
-    html: traceback,
-    additionalReplacements: [
-      replaceTracebackFilenames,
-      replaceTracebackPrefix,
-      replaceMangledLocal,
-    ],
-  });
+  const htmlTraceback =
+    tracebackFormat === "text" ? (
+      <pre>{traceback}</pre>
+    ) : (
+      renderHTML({
+        html: traceback,
+        additionalReplacements: [
+          replaceTracebackFilenames,
+          replaceTracebackPrefix,
+          replaceMangledLocal,
+        ],
+      })
+    );
 
-  const lastTracebackLine = lastLine(traceback);
+  const textTraceback =
+    tracebackFormat === "html"
+      ? parseHtmlContent(sanitizeHtml(traceback))
+      : traceback;
+  const lastTracebackLine = lastLine(textTraceback);
   const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
   const openAiAssistant = useOpenAiAssistant();
 
@@ -137,7 +147,9 @@ export const MarimoTracebackOutput = ({
       <div className="flex gap-2">
         {cellId && lastTracebackLine && (
           <SendErrorReportButton
-            getContent={() => buildErrorReport(cellId, { code, traceback })}
+            getContent={() =>
+              buildErrorReport(cellId, { code, traceback, tracebackFormat })
+            }
           />
         )}
         {showAIFix && (
@@ -195,11 +207,7 @@ export const MarimoTracebackOutput = ({
               </DropdownMenuItem>
               <DropdownMenuItem
                 onClick={() => {
-                  // Strip HTML from the traceback (sanitize first to prevent XSS)
-                  const div = document.createElement("div");
-                  div.innerHTML = sanitizeHtml(traceback);
-                  const textContent = div.textContent || "";
-                  copyToClipboard(textContent);
+                  copyToClipboard(textTraceback);
                 }}
               >
                 <CopyIcon className="h-4 w-4 mr-2" />
@@ -214,9 +222,7 @@ export const MarimoTracebackOutput = ({
 };
 
 function lastLine(text: string): string {
-  const el = document.createElement("div");
-  el.innerHTML = sanitizeHtml(text);
-  const lines = el.textContent?.split("\n").filter(Boolean);
+  const lines = text.split("\n").filter(Boolean);
   return lines?.at(-1) || "";
 }