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

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

@@ -8,21 +8,24 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
-import { createStore, Provider, useAtomValue } from "jotai";
+import { atom, createStore, Provider, useAtomValue } from "jotai";
 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 type { Attachment } 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 { createNotebookClient } from "@/core/host/notebook-client";
 import type { MarimoError, OutputMessage } from "@/core/kernel/messages";
 import {
   type StableSessionId,
@@ -30,7 +33,8 @@ import {
 } from "@/core/kernel/session";
 import { API } from "@/core/network/api";
 import { connectionAtom } from "@/core/network/connection";
-import { WebSocketClosedReason, ConnectionState } from "@/core/websocket/types";
+import { notebookClientAtom } from "@/core/websocket/state";
+import { ConnectionState } from "@/core/websocket/types";
 import { Deferred } from "@/utils/Deferred";
 import { HTTPError } from "@/utils/errors";
 import { MarimoErrorOutput } from "../../output/MarimoErrorOutput";
@@ -46,6 +50,8 @@ vi.mock("@/components/editor/chrome/wrapper/useOpenAiAssistant", () => ({
 
 const CELL_ID = cellId("test-cell");
 const STABLE_ID = "stable/test" as StableSessionId;
+const attachmentsAtom = atom<Attachment[]>([]);
+
 const AGENT: Attachment = {
   id: "a1",
   kind: "agent",
@@ -57,11 +63,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 +96,12 @@ 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(notebookClientAtom, {
+    ...createNotebookClient(store).client,
+    connectionAtom: atom({ state: ConnectionState.OPEN }),
+    attachmentsAtom,
+  });
   store.set(attachmentsAtom, attachments);
   store.set(stableSessionIdAtom, stableId);
   const wrapper = ({ children }: { children: React.ReactNode }) => (
@@ -105,9 +120,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 +159,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();
@@ -162,26 +186,6 @@ describe("SendErrorReportButton", () => {
     expect(screen.getByRole("button")).toBeDisabled();
   });
 
-  it.each([
-    { state: ConnectionState.CONNECTING },
-    { state: ConnectionState.CLOSING },
-    { state: ConnectionState.NOT_STARTED },
-    {
-      state: ConnectionState.CLOSED,
-      code: WebSocketClosedReason.KERNEL_DISCONNECTED,
-      reason: "offline",
-    },
-  ])(
-    "does not send from a stale snapshot while the browser is %j",
-    (connection) => {
-      const { store } = renderButton();
-      act(() => store.set(connectionAtom, connection));
-      expect(screen.getByRole("button")).toBeDisabled();
-      send();
-      expect(API.post).not.toHaveBeenCalled();
-    },
-  );
-
   it.each([
     [new HTTPError(409, "Conflict"), "No agent attached"],
     [new HTTPError(500, "Server error"), "Could not send error"],
@@ -190,12 +194,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 +234,7 @@ describe("SendErrorReportButton", () => {
         ...REPORT,
         output: {
           type: "error",
+          instructions: ERROR_MESSAGE_INSTRUCTIONS,
           message: MESSAGE,
           traceback: "Traceback\nNameError: df is not defined",
         },
@@ -264,6 +277,7 @@ describe("SendErrorReportButton", () => {
         ...REPORT,
         output: {
           type: "error",
+          instructions: ERROR_MESSAGE_INSTRUCTIONS,
           message: "ValueError: bad <value>",
           traceback: "Traceback\nValueError: bad <value>",
         },
@@ -271,6 +285,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 +483,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 +510,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/file-tree/file-viewer.tsx

@@ -9,7 +9,7 @@ import {
   SaveIcon,
 } from "lucide-react";
 import type React from "react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { renderShortcut } from "@/components/shortcuts/renderShortcut";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
@@ -82,7 +82,9 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   // carry no draft to preserve.
   // We use a ref for internalValue so we don't call this effect on each keystroke
   const internalValueRef = useRef<string>(internalValue);
-  internalValueRef.current = internalValue;
+  useLayoutEffect(() => {
+    internalValueRef.current = internalValue;
+  }, [internalValue]);
   useEffect(() => {
     return () => {
       if (

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) || "";
 }
 
@@ -242,7 +248,7 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
             <Tooltip content={tooltipContent}>
               <button
                 type="button"
-                className="ml-1 p-1 rounded-sm hover:bg-muted transition-all inline"
+                className="ml-1 p-1 rounded-sm hover:bg-muted transition-colors inline"
               >
                 <BugPlayIcon
                   onClick={() => {

package/src/components/editor/output/console/ConsoleOutput.tsx

@@ -6,7 +6,7 @@ import {
   ChevronsUpDownIcon,
   WrapTextIcon,
 } from "lucide-react";
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useState } from "react";
 import { ToggleButton } from "react-aria-components";
 import { DebuggerControls } from "@/components/debugger/debugger-code";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
@@ -49,31 +49,21 @@ export const CONSOLE_CLEAR_DEBOUNCE_MS = 200;
  */
 function useDebouncedConsoleOutputs<T>(outputs: T[]): T[] {
   const [debouncedOutputs, setDebouncedOutputs] = useState(outputs);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // Non-empty outputs: apply immediately and cancel any pending clear
+  // Non-empty outputs: apply immediately. Effect cleanup cancels pending clears.
   if (outputs.length > 0 && debouncedOutputs !== outputs) {
-    if (timerRef.current !== null) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
     setDebouncedOutputs(outputs);
   }
 
   // Empty outputs: delay the clear so new outputs can arrive first
   useEffect(() => {
-    if (outputs.length === 0 && timerRef.current === null) {
-      timerRef.current = setTimeout(() => {
-        timerRef.current = null;
-        setDebouncedOutputs([]);
-      }, CONSOLE_CLEAR_DEBOUNCE_MS);
+    if (outputs.length > 0) {
+      return;
     }
-    return () => {
-      if (timerRef.current !== null) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
+    const timer = setTimeout(() => {
+      setDebouncedOutputs([]);
+    }, CONSOLE_CLEAR_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
   }, [outputs]);
 
   return debouncedOutputs;

package/src/components/pages/home-page.tsx

@@ -514,7 +514,7 @@ const MarimoFileComponent = ({ file }: { file: MarimoFile }) => {
 
   return (
     <a
-      className="py-1.5 px-4 hover:bg-(--blue-2) hover:text-primary transition-all duration-300 cursor-pointer group relative flex gap-4 items-center"
+      className="py-1.5 px-4 hover:bg-(--blue-2) hover:text-primary transition-colors duration-300 cursor-pointer group relative flex gap-4 items-center"
       key={file.path}
       href={href.toString()}
       target={tabTarget(file.initializationId || file.path)}
@@ -542,7 +542,7 @@ const MarimoFileComponent = ({ file }: { file: MarimoFile }) => {
           </div>
           <ExternalLinkIcon
             size={20}
-            className="group-hover:opacity-100 opacity-0 transition-all duration-300 text-primary"
+            className="group-hover:opacity-100 opacity-0 transition-opacity duration-300 text-primary"
           />
         </div>
         {!!file.lastModified && (
@@ -617,14 +617,14 @@ const CreateNewNotebook: React.FC = () => {
     <a
       className="relative rounded-lg p-6 group
       text-primary hover:bg-(--blue-2) shadow-md-solid shadow-accent border bg-(--blue-1)
-      transition-all duration-300 cursor-pointer
+      transition-colors duration-300 cursor-pointer
       "
       href={url}
       target="_blank"
       rel="noreferrer"
     >
       <h2 className="text-lg font-semibold">Create a new notebook</h2>
-      <div className="group-hover:opacity-100 opacity-0 absolute right-5 top-0 bottom-0 rounded-lg flex items-center justify-center transition-all duration-300">
+      <div className="group-hover:opacity-100 opacity-0 absolute right-5 top-0 bottom-0 rounded-lg flex items-center justify-center transition-opacity duration-300">
         <ExternalLinkIcon size={24} />
       </div>
     </a>

package/src/components/slides/slide-cell-view.tsx

@@ -117,7 +117,7 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
       />
       <LanguageToggles
         code={cell.code}
-        editorView={editorViewRef.current}
+        editorViewRef={editorViewRef}
         currentLanguageAdapter={languageAdapter}
         onAfterToggle={afterToggleLanguage}
         className="flex items-center gap-1"

package/src/components/tracing/tracing.tsx

@@ -145,11 +145,11 @@ const TraceBlock: React.FC<{
   isMostRecentRun: boolean;
   chartPosition: ChartPosition;
   theme: ResolvedTheme;
-}> = ({ run, isMostRecentRun, chartPosition, isExpanded, theme }) => {
+}> = ({ run, isMostRecentRun, chartPosition, isExpanded: expanded, theme }) => {
   const setExpandedRuns = useSetAtom(expandedRunsAtom);
   // We prefer the user's last click, but if they haven't clicked on this run,
   // we expand the most recent run by default, otherwise we collapse it.
-  isExpanded = isExpanded ?? isMostRecentRun;
+  const isExpanded = expanded ?? isMostRecentRun;
 
   const onToggleExpanded = () => {
     setExpandedRuns((prev) => {

package/src/core/attachments/__tests__/toast.test.tsx

@@ -0,0 +1,58 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+// @vitest-environment jsdom
+
+import { act, render, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Toaster } from "@/components/ui/toaster";
+import { clearToasts, toast, useToast } from "@/components/ui/use-toast";
+import { agentToast } from "../toast";
+
+describe("agent notifications", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    clearToasts();
+  });
+
+  afterEach(() => {
+    act(() => {
+      clearToasts();
+      vi.runOnlyPendingTimers();
+    });
+    vi.useRealTimers();
+  });
+
+  it.each([
+    { variant: undefined, duration: 3000 },
+    { variant: "danger" as const, duration: 5000 },
+  ])("expires while the window is blurred: %j", ({ variant, duration }) => {
+    const { result } = renderHook(useToast);
+    render(<Toaster />);
+    act(() => agentToast({ title: "Agent notice", variant }));
+    act(() => window.dispatchEvent(new Event("blur")));
+    act(() => vi.advanceTimersByTime(duration - 1));
+    expect(result.current.toasts[0].open).toBe(true);
+    act(() => vi.advanceTimersByTime(1));
+    expect(result.current.toasts[0].open).toBe(false);
+  });
+
+  it("preserves pause behavior for ordinary notifications", () => {
+    const { result } = renderHook(useToast);
+    render(<Toaster />);
+    act(() => toast({ title: "Ordinary notice", duration: 3000 }));
+    act(() => window.dispatchEvent(new Event("blur")));
+    act(() => vi.advanceTimersByTime(5000));
+    expect(result.current.toasts[0].open).toBe(true);
+  });
+
+  it("does not let an older timer dismiss a newer notification", () => {
+    const { result } = renderHook(useToast);
+    act(() => agentToast({ title: "First" }));
+    act(() => vi.advanceTimersByTime(1000));
+    act(() => agentToast({ title: "Second" }));
+    act(() => vi.advanceTimersByTime(2000));
+    expect(result.current.toasts[0].title).toBe("Second");
+    expect(result.current.toasts[0].open).toBe(true);
+    act(() => vi.advanceTimersByTime(1000));
+    expect(result.current.toasts[0].open).toBe(false);
+  });
+});

package/src/core/attachments/state.ts

@@ -1,17 +1,14 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { components } from "@marimo-team/marimo-api";
 import { atom } from "jotai";
-import { isConnectedAtom } from "@/core/network/connection";
+import type { Attachment } from "@marimo-team/client/protocol";
+import { notebookClientAtom } from "@/core/websocket/state";
 
-export type Attachment = components["schemas"]["Attachment"];
+export type { Attachment } from "@marimo-team/client/protocol";
 
-export const attachmentsAtom = atom<Attachment[]>([]);
 export const agentAttachmentsAtom = atom((get) => {
-  if (!get(isConnectedAtom)) {
-    return [];
-  }
-  return get(attachmentsAtom).filter(
+  const notebook = get(notebookClientAtom);
+  return (notebook ? get(notebook.attachmentsAtom) : []).filter(
     (attachment) => attachment.kind === "agent",
   );
 });

package/src/core/attachments/toast.ts

@@ -0,0 +1,15 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { toast } from "@/components/ui/use-toast";
+
+export function agentToast(
+  options: Pick<
+    Parameters<typeof toast>[0],
+    "title" | "variant" | "description"
+  >,
+) {
+  const duration = options.variant === "danger" ? 5000 : 3000;
+  const { dismiss } = toast({ ...options, duration });
+  // Agent notices must also expire while the user focuses the agent terminal.
+  window.setTimeout(dismiss, duration);
+}