@marimo-team/frontend 0.25.3-dev5 → 0.25.3-dev55

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/icons/__tests__/large-spinner.test.tsx

@@ -0,0 +1,39 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, render, screen } from "@testing-library/react";
+import { Profiler } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { LargeSpinner } from "../large-spinner";
+
+describe("LargeSpinner", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("fades the old title without a second commit before the timer fires", () => {
+    const onRender = vi.fn();
+    const spinner = (title: string) => (
+      <Profiler id="spinner" onRender={onRender}>
+        <LargeSpinner title={title} />
+      </Profiler>
+    );
+    const { rerender } = render(spinner("Starting"));
+    onRender.mockClear();
+
+    rerender(spinner("Loading"));
+    expect(onRender).toHaveBeenCalledOnce();
+    expect(screen.getByText("Starting")).toHaveClass("opacity-0");
+
+    act(() => vi.advanceTimersByTime(300));
+    expect(screen.getByText("Loading")).toHaveClass("opacity-100");
+  });
+
+  it("restores visibility if the title changes back during the fade", () => {
+    const { rerender } = render(<LargeSpinner title="Starting" />);
+    rerender(<LargeSpinner title="Loading" />);
+    rerender(<LargeSpinner title="Starting" />);
+
+    expect(screen.getByText("Starting")).toHaveClass("opacity-100");
+    act(() => vi.advanceTimersByTime(300));
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument();
+  });
+});

package/src/components/icons/large-spinner.tsx

@@ -1,23 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { Loader2Icon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useDebounce } from "@/hooks/useDebounce";
 import { cn } from "@/utils/cn";
 
 export const LargeSpinner = ({ title }: { title?: string }) => {
-  const [currentTitle, setCurrentTitle] = useState(title);
-  const [isVisible, setIsVisible] = useState(true);
-
-  useEffect(() => {
-    if (title !== currentTitle) {
-      setIsVisible(false);
-      const timer = setTimeout(() => {
-        setCurrentTitle(title);
-        setIsVisible(true);
-      }, 300); // Wait for fade out animation to complete
-      return () => clearTimeout(timer);
-    }
-  }, [title, currentTitle]);
+  const currentTitle = useDebounce(title, 300);
+  const isVisible = title === currentTitle;
 
   return (
     <div className="flex flex-col h-full flex-1 items-center justify-center p-4">

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);
+}

package/src/core/cells/__tests__/error-report.test.ts

@@ -4,11 +4,51 @@
 import { describe, expect, it } from "vitest";
 import { cellId } from "@/__tests__/branded";
 import type { MarimoError } from "@/core/kernel/messages";
-import { buildErrorReport } from "../error-report";
+import { buildErrorReport, ERROR_MESSAGE_INSTRUCTIONS } from "../error-report";
 
 const CELL_ID = cellId("failed-cell");
 
 describe("buildErrorReport", () => {
+  it("preserves plain traceback text without treating angle brackets as HTML", () => {
+    const traceback =
+      '  File "<cell>", line 1\nValueError: expected <value> & got <other>';
+    expect(
+      buildErrorReport(CELL_ID, { traceback, tracebackFormat: "text" }).output,
+    ).toEqual({
+      type: "error",
+      instructions: ERROR_MESSAGE_INSTRUCTIONS,
+      message: "ValueError: expected <value> & got <other>",
+      traceback,
+    });
+  });
+  it("owns the instruction to repair the live notebook", () => {
+    const report = buildErrorReport(CELL_ID, {
+      errors: [{ type: "syntax", msg: "invalid code" }],
+    });
+    expect(report.output.instructions).toEqual("Fix this notebook error.");
+  });
+
+  it("keeps repair intent visible before oversized evidence", () => {
+    const report = buildErrorReport(CELL_ID, {
+      code: "# long code\n".repeat(10_000),
+      errors: [
+        {
+          type: "exception",
+          exception_type: "ValueError",
+          msg: "long error ".repeat(10_000),
+          raising_cell: null,
+          traceback: `<pre>Traceback\n${"long frame\n".repeat(10_000)}</pre>`,
+        },
+      ],
+    });
+    const serialized = JSON.stringify(report);
+
+    expect(serialized.length).toBeGreaterThan(8192);
+    expect(serialized.slice(0, 256)).toContain(
+      '"instructions":"Fix this notebook error."',
+    );
+  });
+
   it("retains every message and complete traceback without display limits", () => {
     const traceback = `Traceback\n${"long frame\n".repeat(10_000)}ValueError: bad <value>`;
     const errors: MarimoError[] = [
@@ -27,6 +67,7 @@ describe("buildErrorReport", () => {
       code: "failed()",
       output: {
         type: "error",
+        instructions: ERROR_MESSAGE_INSTRUCTIONS,
         message: "bad <value>\nanother error",
         traceback,
       },
@@ -49,7 +90,11 @@ describe("buildErrorReport", () => {
     ).toEqual({
       type: "cell-output",
       cell_id: CELL_ID,
-      output: { type: "error", message: "legacy error" },
+      output: {
+        type: "error",
+        instructions: ERROR_MESSAGE_INSTRUCTIONS,
+        message: "legacy error",
+      },
     });
   });
 
@@ -63,7 +108,11 @@ describe("buildErrorReport", () => {
       type: "cell-output",
       cell_id: CELL_ID,
       code: "",
-      output: { type: "error", message: "invalid code" },
+      output: {
+        type: "error",
+        instructions: ERROR_MESSAGE_INSTRUCTIONS,
+        message: "invalid code",
+      },
     });
   });
 
@@ -80,6 +129,7 @@ describe("buildErrorReport", () => {
       cell_id: CELL_ID,
       output: {
         type: "error",
+        instructions: ERROR_MESSAGE_INSTRUCTIONS,
         message: "first\nsecond",
         traceback:
           "Traceback\nValueError: first\n\nTraceback\nValueError: second",

package/src/core/cells/__tests__/notebook-outline.test.ts

@@ -0,0 +1,113 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { createStore } from "jotai";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { cellId } from "@/__tests__/branded";
+import {
+  createNotebookActions,
+  notebookAtom,
+  notebookOutline,
+  notebookReducer,
+} from "../cells";
+import { exportedForTesting } from "../document-changes";
+import type { Outline } from "../outline";
+
+const first = cellId("first");
+const second = cellId("second");
+const firstOutline: Outline = {
+  items: [{ name: "First", level: 1, by: { id: "first" } }],
+};
+const secondOutline: Outline = {
+  items: [{ name: "Second", level: 2, by: { id: "second" } }],
+};
+
+function setup() {
+  const store = createStore();
+  store.set(
+    notebookAtom,
+    MockNotebook.notebookState({
+      cellData: { [first]: { code: "x = 1" }, [second]: {} },
+      cellRuntime: {
+        [first]: { outline: firstOutline },
+        [second]: { outline: secondOutline },
+      },
+    }),
+  );
+  const actions = createNotebookActions((action) =>
+    store.set(notebookAtom, (state) => notebookReducer(state, action)),
+  );
+  return { store, actions };
+}
+
+afterEach(() => {
+  exportedForTesting.cancelPendingChanges();
+});
+
+describe("notebookOutline", () => {
+  it("does not notify outline subscribers when cell code changes", () => {
+    const { store, actions } = setup();
+    const initial = store.get(notebookOutline);
+    const listener = vi.fn();
+    const unsubscribe = store.sub(notebookOutline, listener);
+
+    actions.updateCellCode({
+      cellId: first,
+      code: "x = 2",
+      formattingChange: false,
+    });
+
+    expect(store.get(notebookOutline)).toBe(initial);
+    expect(listener).not.toHaveBeenCalled();
+    unsubscribe();
+  });
+
+  it("updates headings when runtime outlines change or are removed", () => {
+    const { store } = setup();
+    const updated: Outline = {
+      items: [{ name: "Updated", level: 1, by: { id: "updated" } }],
+    };
+
+    for (const outline of [updated, null]) {
+      store.set(notebookAtom, (state) => ({
+        ...state,
+        cellRuntime: {
+          ...state.cellRuntime,
+          [first]: { ...state.cellRuntime[first], outline },
+        },
+      }));
+      expect(store.get(notebookOutline)).toEqual({
+        items: [...(outline?.items ?? []), ...secondOutline.items],
+      });
+    }
+  });
+
+  it("keeps headings in cell order after moving and deleting cells", () => {
+    const { store, actions } = setup();
+    actions.moveCell({ cellId: second, before: true });
+    expect(store.get(notebookOutline)).toEqual({
+      items: [...secondOutline.items, ...firstOutline.items],
+    });
+
+    actions.deleteCell({ cellId: second });
+    expect(store.get(notebookOutline)).toEqual(firstOutline);
+  });
+
+  it("notifies subscribers when output is replaced with the same headings", () => {
+    const { store } = setup();
+    const listener = vi.fn();
+    const unsubscribe = store.sub(notebookOutline, listener);
+
+    store.set(notebookAtom, (state) => ({
+      ...state,
+      cellRuntime: {
+        ...state.cellRuntime,
+        [first]: { ...state.cellRuntime[first], outline: { ...firstOutline } },
+      },
+    }));
+
+    // Consumers must reconnect to replacement heading elements in the DOM.
+    expect(listener).toHaveBeenCalledOnce();
+    unsubscribe();
+  });
+});

package/src/core/cells/__tests__/session.test.ts

@@ -174,8 +174,11 @@ describe("notebookStateFromSession", () => {
         channel: "marimo-error",
         data: [
           {
-            type: "unknown",
+            type: "exception",
+            exception_type: "ValueError",
             msg: "Something went wrong",
+            raising_cell: null,
+            traceback: "Traceback line 1",
           },
         ],
         mimetype: "application/vnd.marimo+error",
@@ -201,8 +204,9 @@ describe("notebookStateFromSession", () => {
             {
               type: "stream",
               name: "stderr",
-              text: "<pre>ValueError: cached failure</pre>",
+              text: "ValueError: cached <failure>",
               mimetype: "application/vnd.marimo+traceback",
+              traceback_format: "text",
               code,
             },
           ],
@@ -212,9 +216,20 @@ describe("notebookStateFromSession", () => {
       invariant(state, "state is null");
       expect(state.cellRuntime[CELL_1].output).toMatchObject({
         code,
-        data: [{ type: "unknown", msg: "cached failure" }],
+        data: [
+          {
+            type: "exception",
+            exception_type: "ValueError",
+            msg: "cached failure",
+            traceback: "Traceback\nValueError: cached failure",
+          },
+        ],
       });
       expect(state.cellRuntime[CELL_1].consoleOutputs[0].code).toBe(code);
+      expect(state.cellRuntime[CELL_1].consoleOutputs[0]).toMatchObject({
+        traceback_format: "text",
+        data: "ValueError: cached <failure>",
+      });
     });
 
     it("handles data output in session cell", () => {

package/src/core/cells/cells.ts

@@ -1761,7 +1761,8 @@ export const cellErrorsAtom = atom((get) => {
 });
 
 export const notebookOutline = atom((get) => {
-  const { cellIds, cellRuntime } = get(notebookAtom);
+  const cellIds = get(cellIdsAtom);
+  const cellRuntime = get(cellsRuntimeAtom);
   const outlines = cellIds.inOrderIds.map(
     (cellId) => cellRuntime[cellId].outline,
   );