@marimo-team/islands 0.25.3-dev20 → 0.25.3-dev201

package/src/components/editor/output/__tests__/traceback.test.tsx

@@ -1,11 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Provider } from "jotai";
 import { beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { Tracebacks } from "@/__mocks__/tracebacks";
 import { cellId } from "@/__tests__/branded";
+import { toggleBreakpoint } from "@/core/codemirror/cells/debugger-state";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { initialModeAtom } from "@/core/mode";
 import { requestClientAtom } from "@/core/network/requests";
@@ -19,7 +20,32 @@ import {
 
 const cid = cellId("1");
 
+vi.mock("@/core/config/feature-flag", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/core/config/feature-flag")>()),
+  getFeatureFlag: (flag: string) => flag === "debugger",
+}));
+vi.mock("@/core/codemirror/cells/debugger-state", async (importOriginal) => ({
+  ...(await importOriginal<
+    typeof import("@/core/codemirror/cells/debugger-state")
+  >()),
+  toggleBreakpoint: vi.fn(),
+}));
+
 describe("traceback component", () => {
+  test("activates the breakpoint from the named button itself", () => {
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cid} />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const buttons = screen.getAllByRole("button", {
+      name: "Toggle breakpoint",
+    });
+    fireEvent.click(buttons[0]);
+    expect(toggleBreakpoint).toHaveBeenCalledOnce();
+  });
   beforeEach(() => {
     vi.resetAllMocks();
     store.set(initialModeAtom, "edit");

package/src/components/editor/output/ansi-reduce.ts

@@ -358,6 +358,7 @@ export class AnsiReducer {
 
 export type StringOutputMessage = Omit<OutputMessage, "data"> & {
   data: string;
+  id?: number;
 };
 
 /**
@@ -369,6 +370,7 @@ export class StatefulOutputMessage implements OutputMessage {
   public readonly channel: OutputMessage["channel"];
   public readonly timestamp: OutputMessage["timestamp"];
   public readonly code: OutputMessage["code"];
+  public readonly id: StringOutputMessage["id"];
   private ansiReducer = new AnsiReducer();
   private _data: string;
 
@@ -379,39 +381,50 @@ export class StatefulOutputMessage implements OutputMessage {
   public static create(message: StringOutputMessage): StatefulOutputMessage {
     const ansiReducer = new AnsiReducer();
     ansiReducer.append(message.data);
-    return new StatefulOutputMessage(
-      message.mimetype,
-      message.channel,
-      message.timestamp,
+    return new StatefulOutputMessage({
+      mimetype: message.mimetype,
+      channel: message.channel,
+      timestamp: message.timestamp,
       ansiReducer,
-      message.code,
-    );
+      code: message.code,
+      id: message.id,
+    });
   }
 
-  private constructor(
-    mimetype: OutputMessage["mimetype"],
-    channel: OutputMessage["channel"],
-    timestamp: OutputMessage["timestamp"],
-    ansiReducer: AnsiReducer,
-    code: OutputMessage["code"],
-  ) {
+  private constructor({
+    mimetype,
+    channel,
+    timestamp,
+    ansiReducer,
+    code,
+    id,
+  }: {
+    mimetype: OutputMessage["mimetype"];
+    channel: OutputMessage["channel"];
+    timestamp: OutputMessage["timestamp"];
+    ansiReducer: AnsiReducer;
+    code: OutputMessage["code"];
+    id: StringOutputMessage["id"];
+  }) {
     this.mimetype = mimetype;
     this.channel = channel;
     this.timestamp = timestamp;
     this.code = code;
+    this.id = id;
     this.ansiReducer = ansiReducer;
     this._data = this.ansiReducer.render();
   }
 
   public appendData(chunk: string): StatefulOutputMessage {
     this.ansiReducer.append(chunk);
-    return new StatefulOutputMessage(
-      this.mimetype,
-      this.channel,
-      this.timestamp,
-      this.ansiReducer,
-      this.code,
-    );
+    return new StatefulOutputMessage({
+      mimetype: this.mimetype,
+      channel: this.channel,
+      timestamp: this.timestamp,
+      ansiReducer: this.ansiReducer,
+      code: this.code,
+      id: this.id,
+    });
   }
 
   public toJSON(): StringOutputMessage {

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";
@@ -16,8 +16,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
 import { isInternalCellName } from "@/core/cells/names";
 import { useExpandedConsoleOutput } from "@/core/cells/outputs";
-import type { WithResponse } from "@/core/cells/types";
-import type { OutputMessage } from "@/core/kernel/messages";
+import type { ConsoleOutputMessage } from "@/core/cells/types";
 import {
   type UseInputHistoryReturn,
   useInputHistory,
@@ -49,31 +48,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;
@@ -83,7 +72,7 @@ interface Props {
   cellId: CellId;
   cellName: string;
   className?: string;
-  consoleOutputs: WithResponse<OutputMessage>[];
+  consoleOutputs: ConsoleOutputMessage[];
   stale: boolean;
   interrupted: boolean;
   debuggerActive: boolean;
@@ -251,19 +240,24 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
             return null;
           }
 
+          const originalIdx = consoleOutputs.length - idx - 1;
+          // Outputs render in reverse, so the reversed index shifts on every
+          // new line. The assigned id survives collapse and truncation. The
+          // original position is the fallback for outputs without one.
+          const key = output.id ?? `position-${originalIdx}`;
+
           if (output.channel === "stdin") {
             invariant(
               typeof output.data === "string",
               "Expected data to be a string",
             );
 
-            const originalIdx = consoleOutputs.length - idx - 1;
             const isPassword = output.mimetype === "text/password";
 
             if (output.response == null && lastStdInputIdx === idx) {
               return (
                 <StdInput
-                  key={idx}
+                  key={key}
                   output={output.data}
                   isPdb={isPdb}
                   isPassword={isPassword}
@@ -278,7 +272,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
 
             return (
               <StdInputWithResponse
-                key={idx}
+                key={key}
                 output={output.data}
                 response={output.response}
                 isPassword={isPassword}
@@ -288,7 +282,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
           }
 
           return (
-            <React.Fragment key={idx}>
+            <React.Fragment key={key}>
               <OutputRenderer
                 cellId={cellId}
                 onRefactorWithAI={onRefactorWithAI}

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

@@ -2,17 +2,29 @@
 
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createStore, Provider } from "jotai";
 import { SetupMocks } from "@/__mocks__/common";
+import { mockDocumentModel } from "@/__mocks__/document";
 import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { WithResponse } from "@/core/cells/types";
+import { DocumentProvider } from "@/core/notebook/document";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { CONSOLE_CLEAR_DEBOUNCE_MS, ConsoleOutput } from "../ConsoleOutput";
 
 SetupMocks.resizeObserver();
 
+const store = createStore();
+const { model } = mockDocumentModel(store, null);
+
 const renderWithProvider = (ui: React.ReactElement) => {
-  return render(<TooltipProvider>{ui}</TooltipProvider>);
+  return render(
+    <Provider store={store}>
+      <DocumentProvider model={model}>
+        <TooltipProvider>{ui}</TooltipProvider>
+      </DocumentProvider>
+    </Provider>,
+  );
 };
 
 describe("ConsoleOutput integration", () => {
@@ -104,13 +116,17 @@ describe("ConsoleOutput pdb history", () => {
     ];
 
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={outputs2}
-          onSubmitDebugger={onSubmitDebugger}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={outputs2}
+              onSubmitDebugger={onSubmitDebugger}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // New StdInput mounted — press ArrowUp to recall previous command
@@ -138,13 +154,17 @@ describe("ConsoleOutput pdb history", () => {
     fireEvent.keyDown(nameInput, { key: "Enter" });
 
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={[stdinPrompt("Name: ", "marimo"), passwordPrompt]}
-          onSubmitDebugger={onSubmitDebugger}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={[stdinPrompt("Name: ", "marimo"), passwordPrompt]}
+              onSubmitDebugger={onSubmitDebugger}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
     const input = screen.getByTestId("console-input");
     expect(input).toHaveAttribute("type", "password");
@@ -161,16 +181,20 @@ describe("ConsoleOutput pdb history", () => {
     expect(input).toHaveValue("");
 
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={[
-            stdinPrompt("Name: ", "marimo"),
-            { ...passwordPrompt, response: "" },
-            stdinPrompt("Name: "),
-          ]}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={[
+                stdinPrompt("Name: ", "marimo"),
+                { ...passwordPrompt, response: "" },
+                stdinPrompt("Name: "),
+              ]}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
     const nextInput = screen.getByTestId("console-input");
     fireEvent.keyDown(nextInput, { key: "ArrowUp" });
@@ -239,13 +263,17 @@ describe("ConsoleOutput pdb history", () => {
       stdinPrompt("(Pdb) "),
     ];
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={outputs2}
-          onSubmitDebugger={onSubmitDebugger}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={outputs2}
+              onSubmitDebugger={onSubmitDebugger}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // Submit an empty value; this should NOT enter the history stack.
@@ -258,13 +286,17 @@ describe("ConsoleOutput pdb history", () => {
       stdinPrompt("(Pdb) "),
     ];
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={outputs3}
-          onSubmitDebugger={onSubmitDebugger}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={outputs3}
+              onSubmitDebugger={onSubmitDebugger}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // ArrowUp should jump back to "step", skipping the empty submission.
@@ -299,13 +331,17 @@ describe("ConsoleOutput pdb history", () => {
     ];
 
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={outputs2}
-          onSubmitDebugger={onSubmitDebugger}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={outputs2}
+              onSubmitDebugger={onSubmitDebugger}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // Submit "print(x)"
@@ -321,13 +357,17 @@ describe("ConsoleOutput pdb history", () => {
     ];
 
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={outputs3}
-          onSubmitDebugger={onSubmitDebugger}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={outputs3}
+              onSubmitDebugger={onSubmitDebugger}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // ArrowUp should show most recent command first
@@ -370,13 +410,17 @@ describe("ConsoleOutput pdb history", () => {
     // Same outputs, but the cell isn't interrupted -- this is a real
     // bare-Enter submission, so we should render the (empty) placeholder.
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={interruptedOutputs}
-          interrupted={false}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={interruptedOutputs}
+              interrupted={false}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     expect(screen.getByLabelText("stdin response")).toBeInTheDocument();
@@ -426,9 +470,13 @@ describe("ConsoleOutput debounced clearing", () => {
 
     // Clear outputs (simulates cell re-run)
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput {...defaultProps} consoleOutputs={[]} />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput {...defaultProps} consoleOutputs={[]} />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // Old output should still be visible during debounce period
@@ -437,9 +485,13 @@ describe("ConsoleOutput debounced clearing", () => {
     // New outputs arrive before debounce fires
     const outputs2 = [createOutput("new output")];
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput {...defaultProps} consoleOutputs={outputs2} />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput {...defaultProps} consoleOutputs={outputs2} />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // New output should be shown immediately
@@ -458,9 +510,13 @@ describe("ConsoleOutput debounced clearing", () => {
 
     // Clear outputs
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput {...defaultProps} consoleOutputs={[]} />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput {...defaultProps} consoleOutputs={[]} />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // Still visible during debounce

package/src/components/editor/package-alert.tsx

@@ -55,6 +55,7 @@ import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import { ExternalLink } from "../ui/links";
@@ -158,6 +159,7 @@ export const PackageAlert: React.FC = () => {
               <SourceBadge source={packageAlert.source} />
             </span>
             <Button
+              aria-label="Dismiss missing packages alert"
               variant="text"
               data-testid="remove-banner-button"
               size="icon"
@@ -171,12 +173,12 @@ export const PackageAlert: React.FC = () => {
               <p>The following packages were not found:</p>
               <table className="list-disc ml-2 mt-1">
                 <tbody>
-                  {packageAlert.packages.map((pkg, index) => {
+                  {packageAlert.packages.map((pkg) => {
                     const parsed = parsePackageSpecifier(pkg);
                     const currentExtras = selectedExtras[pkg] || parsed.extras;
 
                     return (
-                      <tr className="font-mono text-sm" key={index}>
+                      <tr className="font-mono text-sm" key={pkg}>
                         <td className="pr-2 py-1 align-middle">
                           <BoxIcon size="1rem" />
                         </td>
@@ -270,6 +272,7 @@ export const PackageAlert: React.FC = () => {
               <SourceBadge source={packageAlert.source} />
             </span>
             <Button
+              aria-label={`Dismiss ${title}`}
               variant="text"
               data-testid="remove-banner-button"
               size="icon"
@@ -294,7 +297,7 @@ export const PackageAlert: React.FC = () => {
               </>
             )}
             <ul className="list-disc ml-2 mt-1">
-              {Object.entries(packageAlert.packages).map(([pkg, st], index) => (
+              {Object.entries(packageAlert.packages).map(([pkg, st]) => (
                 <li
                   className={cn(
                     "flex items-center gap-1 font-mono text-sm",
@@ -305,7 +308,7 @@ export const PackageAlert: React.FC = () => {
                       status === "failed" &&
                       "text-muted-foreground",
                   )}
-                  key={index}
+                  key={pkg}
                 >
                   <ProgressIcon status={st} />
                   {pkg}
@@ -590,14 +593,18 @@ const ExtrasSelector: React.FC<ExtrasSelectorProps> = ({
                 <div className="p-2 bg-popover border-b border-border">
                   <div className="flex flex-wrap gap-1 p-1 min-h-[24px]">
                     {selectedExtras.map((extra) => (
-                      <span
+                      <DropdownMenuItem
                         key={extra}
+                        aria-label={`Remove ${extra}`}
                         className="inline-flex items-center gap-1 px-1 py-0.5 text-sm font-mono border border-muted-foreground/30 hover:border-muted-foreground/60 rounded-sm cursor-pointer group transition-colors"
-                        onClick={() => handleExtraToggle(extra, false)}
+                        onSelect={(e) => {
+                          e.preventDefault();
+                          handleExtraToggle(extra, false);
+                        }}
                       >
                         {extra}
                         <XIcon className="w-3 h-3 opacity-60 group-hover:opacity-100" />
-                      </span>
+                      </DropdownMenuItem>
                     ))}
                   </div>
                 </div>