@marimo-team/islands 0.23.14-dev6 → 0.23.14-dev61

package/src/core/codemirror/__tests__/setup.test.ts

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { EditorState, type Extension } from "@codemirror/state";
-import { keymap } from "@codemirror/view";
+import { EditorView, keymap } from "@codemirror/view";
 import { describe, expect, test, vi } from "vitest";
 import { cellId } from "@/__tests__/branded";
 import { OverridingHotkeyProvider } from "@/core/hotkeys/hotkeys";
@@ -163,6 +163,38 @@ test("auto_close_pairs: false removes closeBrackets keymaps", () => {
   expect(hasBracketPairHandler(withoutAutoClose)).toBe(false);
 });
 
+test("go to definition falls through to lower-priority LSP keymap", () => {
+  const lspGoToDefinition = vi.fn(() => true);
+  const goToDefinitionKey = getOpts().hotkeys.getHotkey(
+    "cell.goToDefinition",
+  ).key;
+
+  const view = new EditorView({
+    state: EditorState.create({
+      doc: "parser.add_argument('--foo')",
+      selection: { anchor: "parser.".length },
+      extensions: [
+        ...setup(),
+        keymap.of([{ key: goToDefinitionKey, run: lspGoToDefinition }]),
+      ],
+    }),
+    parent: document.body,
+  });
+
+  try {
+    const event = new KeyboardEvent("keydown", {
+      key: goToDefinitionKey,
+      bubbles: true,
+      cancelable: true,
+    });
+    view.contentDOM.dispatchEvent(event);
+
+    expect(lspGoToDefinition).toHaveBeenCalledOnce();
+  } finally {
+    view.destroy();
+  }
+});
+
 test("placeholder adds another extension", () => {
   const opts = getOpts();
   const withAI = new PythonLanguageAdapter()

package/src/core/codemirror/ai/resources.ts

@@ -11,6 +11,7 @@ import {
   resourceDecorations,
   resourceInputFilter,
   resourcesField,
+  resourceSync,
   resourceTheme,
 } from "@marimo-team/codemirror-mcp";
 import {
@@ -38,25 +39,28 @@ const NONE_RESOURCE_FORMAT_COMPLETION = {
   },
 };
 
+function getRegistryResources(store: JotaiStore): Resource[] {
+  const registry = getAIContextRegistry(store);
+  const resources = registry.getAllItems();
+  if (resources.length === 0) {
+    return NONE_RESOURCE;
+  }
+  return resources;
+}
+
 export function resourceExtension(opts: {
   language: Language;
   store: JotaiStore;
   onAddFiles?: (files: File[]) => void;
 }): Extension[] {
   const { language, store, onAddFiles } = opts;
+  const getResources = () => getRegistryResources(store);
 
   return [
     language.data.of({
       // Resource completion for static resources (variables, tables, etc.)
       autocomplete: resourceCompletion(
-        async (): Promise<Resource[]> => {
-          const registry = getAIContextRegistry(store);
-          const resources = registry.getAllItems();
-          if (resources.length === 0) {
-            return NONE_RESOURCE;
-          }
-          return resources;
-        },
+        async (): Promise<Resource[]> => getResources(),
         (resource) => {
           if (resource.type === NONE_RESOURCE_TYPE) {
             return NONE_RESOURCE_FORMAT_COMPLETION;
@@ -92,9 +96,10 @@ export function resourceExtension(opts: {
       : []),
     resourceDecorations,
     resourceInputFilter,
+    // Resolve @-mention chips for programmatic prefills.
+    resourceSync(getResources, { logger: Logger }),
     resourcesField.init(() => {
-      const registry = getAIContextRegistry(store);
-      const resources = registry.getAllItems();
+      const resources = getRegistryResources(store);
       return new Map(resources.map((resource) => [resource.uri, resource]));
     }),
     resourceTheme,

package/src/core/codemirror/cells/__tests__/debugger-decorations.test.ts

@@ -0,0 +1,185 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { python } from "@codemirror/lang-python";
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import type { CellId } from "@/core/cells/ids";
+import { createMockObservable } from "@/core/state/__mocks__/mocks";
+import type { Observable } from "@/core/state/observable";
+import {
+  breakpointGutter,
+  debuggerLineHighlighter,
+} from "../debugger-decorations";
+
+vi.mock("../debugger-state", () => ({
+  toggleBreakpoint: vi.fn(),
+}));
+
+import { toggleBreakpoint } from "../debugger-state";
+
+const CODE = `def my_function():
+    x = 1
+    y = 2
+    return x + y
+
+result = my_function()`;
+
+function createLineHighlighterEditor(
+  lineObservable: Observable<number | null>,
+) {
+  const state = EditorState.create({
+    doc: CODE,
+    extensions: [python(), debuggerLineHighlighter(lineObservable)],
+  });
+  return new EditorView({ state, parent: document.body });
+}
+
+function createBreakpointGutterEditor(
+  cid: CellId,
+  breakpointsObservable: Observable<ReadonlySet<number>>,
+) {
+  const state = EditorState.create({
+    doc: CODE,
+    extensions: [python(), breakpointGutter(cid, breakpointsObservable)],
+  });
+  return new EditorView({ state, parent: document.body });
+}
+
+/** Flush the microtask queue and apply the resulting state changes to `view`. */
+async function flush(view: EditorView): Promise<void> {
+  await Promise.resolve();
+  view.dispatch({});
+}
+
+/**
+ * Count rendered breakpoint markers, excluding the always-present hidden
+ * spacer element (`initialSpacer`) that isn't an actual breakpoint.
+ */
+function visibleMarkerCount(view: EditorView): number {
+  const gutterElement = view.dom.querySelector(".cm-breakpoint-gutter");
+  if (!gutterElement) {
+    return 0;
+  }
+  return gutterElement.querySelectorAll(
+    '.cm-gutterElement:not([style*="visibility: hidden"]) .cm-breakpoint-marker',
+  ).length;
+}
+
+describe("debugger-decorations", () => {
+  let view: EditorView | null = null;
+
+  afterEach(() => {
+    if (view) {
+      view.destroy();
+      view = null;
+    }
+    document.body.innerHTML = "";
+    vi.clearAllMocks();
+  });
+
+  describe("debuggerLineHighlighter", () => {
+    it("renders no highlight when the observable starts null", () => {
+      const lineObservable = createMockObservable<number | null>(null);
+      view = createLineHighlighterEditor(lineObservable);
+
+      expect(view.dom.querySelector(".cm-debugger-current-line")).toBeNull();
+    });
+
+    it("highlights the line reported by the observable", () => {
+      const lineObservable = createMockObservable<number | null>(null);
+      view = createLineHighlighterEditor(lineObservable);
+
+      lineObservable.set(2);
+      view.dispatch({});
+
+      expect(
+        view.dom.querySelector(".cm-debugger-current-line"),
+      ).not.toBeNull();
+    });
+
+    it("clears the highlight when the line is set back to null", () => {
+      const lineObservable = createMockObservable<number | null>(2);
+      view = createLineHighlighterEditor(lineObservable);
+      view.dispatch({});
+      expect(
+        view.dom.querySelector(".cm-debugger-current-line"),
+      ).not.toBeNull();
+
+      lineObservable.set(null);
+      view.dispatch({});
+
+      expect(view.dom.querySelector(".cm-debugger-current-line")).toBeNull();
+    });
+
+    it("does not throw for an out-of-range line", () => {
+      const lineObservable = createMockObservable<number | null>(null);
+      view = createLineHighlighterEditor(lineObservable);
+
+      expect(() => {
+        lineObservable.set(9999);
+        view?.dispatch({});
+      }).not.toThrow();
+      expect(view.dom.querySelector(".cm-debugger-current-line")).toBeNull();
+    });
+  });
+
+  describe("breakpointGutter", () => {
+    it("renders no markers when there are no breakpoints", () => {
+      const cid = cellId("cell1");
+      const breakpointsObservable = createMockObservable<ReadonlySet<number>>(
+        new Set(),
+      );
+      view = createBreakpointGutterEditor(cid, breakpointsObservable);
+
+      expect(visibleMarkerCount(view)).toBe(0);
+    });
+
+    it("syncs pre-existing breakpoints on mount", async () => {
+      const cid = cellId("cell1");
+      const breakpointsObservable = createMockObservable<ReadonlySet<number>>(
+        new Set([2]),
+      );
+      view = createBreakpointGutterEditor(cid, breakpointsObservable);
+      await flush(view); // initial sync is deferred to a microtask
+
+      expect(visibleMarkerCount(view)).toBe(1);
+    });
+
+    it("adds a marker when the observable reports a new breakpoint", () => {
+      const cid = cellId("cell1");
+      const breakpointsObservable = createMockObservable<ReadonlySet<number>>(
+        new Set(),
+      );
+      view = createBreakpointGutterEditor(cid, breakpointsObservable);
+
+      breakpointsObservable.set(new Set([1, 3]));
+      view.dispatch({});
+
+      expect(visibleMarkerCount(view)).toBe(2);
+    });
+
+    it("toggles a breakpoint when an existing marker is clicked", async () => {
+      const cid = cellId("cell1");
+      // A single breakpoint on line 1 renders exactly one non-spacer
+      // gutter element, so the click lands unambiguously on that line.
+      const breakpointsObservable = createMockObservable<ReadonlySet<number>>(
+        new Set([1]),
+      );
+      view = createBreakpointGutterEditor(cid, breakpointsObservable);
+      await flush(view);
+
+      const gutterElement = view.dom.querySelector(".cm-breakpoint-gutter");
+      const lineElement = gutterElement?.querySelector(
+        '.cm-gutterElement:not([style*="visibility: hidden"])',
+      );
+      expect(lineElement).not.toBeNull();
+      lineElement?.dispatchEvent(
+        new MouseEvent("mousedown", { bubbles: true }),
+      );
+
+      expect(toggleBreakpoint).toHaveBeenCalledWith(cid, 1);
+    });
+  });
+});

package/src/core/codemirror/cells/__tests__/debugger-state.test.ts

@@ -0,0 +1,224 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { cellId } from "@/__tests__/branded";
+import { store } from "@/core/state/jotai";
+import {
+  activeLineAtom,
+  breakpointsAtom,
+  clearCellBreakpoints,
+  createActiveLineInfoAtom,
+  createCellBreakpointsAtom,
+  createDebuggerLineAtom,
+  resyncBreakpoints,
+  setActiveLine,
+  toggleBreakpoint,
+} from "../debugger-state";
+
+const mockRequestClient = MockRequestClient.create();
+vi.mock("@/core/network/requests", () => ({
+  getRequestClient: () => mockRequestClient,
+}));
+
+const cell1 = cellId("cell1");
+const cell2 = cellId("cell2");
+
+describe("debugger-state", () => {
+  beforeEach(() => {
+    store.set(breakpointsAtom, new Map());
+    store.set(activeLineAtom, null);
+    vi.clearAllMocks();
+  });
+
+  describe("toggleBreakpoint", () => {
+    it("adds a breakpoint and syncs the full set to the kernel", () => {
+      toggleBreakpoint(cell1, 3);
+
+      expect(store.get(breakpointsAtom).get(cell1)).toEqual(new Set([3]));
+      expect(mockRequestClient.sendSetBreakpoints).toHaveBeenCalledWith({
+        breakpoints: { [cell1]: [3] },
+      });
+    });
+
+    it("removes a breakpoint on second toggle and drops the cell once empty", () => {
+      toggleBreakpoint(cell1, 3);
+      toggleBreakpoint(cell1, 3);
+
+      expect(store.get(breakpointsAtom).has(cell1)).toBe(false);
+      expect(mockRequestClient.sendSetBreakpoints).toHaveBeenLastCalledWith({
+        breakpoints: {},
+      });
+    });
+
+    it("sends lines sorted ascending for a cell with multiple breakpoints", () => {
+      toggleBreakpoint(cell1, 5);
+      toggleBreakpoint(cell1, 2);
+
+      expect(mockRequestClient.sendSetBreakpoints).toHaveBeenLastCalledWith({
+        breakpoints: { [cell1]: [2, 5] },
+      });
+    });
+
+    it("keeps breakpoints for other cells independent", () => {
+      toggleBreakpoint(cell1, 1);
+      toggleBreakpoint(cell2, 2);
+
+      expect(store.get(breakpointsAtom).get(cell1)).toEqual(new Set([1]));
+      expect(store.get(breakpointsAtom).get(cell2)).toEqual(new Set([2]));
+    });
+  });
+
+  describe("clearCellBreakpoints", () => {
+    it("removes all breakpoints for a cell and syncs", () => {
+      toggleBreakpoint(cell1, 1);
+      toggleBreakpoint(cell1, 2);
+      vi.clearAllMocks();
+
+      clearCellBreakpoints(cell1);
+
+      expect(store.get(breakpointsAtom).has(cell1)).toBe(false);
+      expect(mockRequestClient.sendSetBreakpoints).toHaveBeenCalledWith({
+        breakpoints: {},
+      });
+    });
+
+    it("is a no-op when the cell has no breakpoints", () => {
+      clearCellBreakpoints(cell1);
+
+      expect(mockRequestClient.sendSetBreakpoints).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("resyncBreakpoints", () => {
+    it("re-sends the current breakpoint set", () => {
+      toggleBreakpoint(cell1, 4);
+      vi.clearAllMocks();
+
+      resyncBreakpoints();
+
+      expect(mockRequestClient.sendSetBreakpoints).toHaveBeenCalledWith({
+        breakpoints: { [cell1]: [4] },
+      });
+    });
+
+    it("does not send when there are no breakpoints", () => {
+      resyncBreakpoints();
+
+      expect(mockRequestClient.sendSetBreakpoints).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("createCellBreakpointsAtom", () => {
+    it("returns the empty set for a cell with no breakpoints", () => {
+      const atom = createCellBreakpointsAtom(cell1);
+      expect(store.get(atom)).toEqual(new Set());
+    });
+
+    it("reflects breakpoints for its own cell only", () => {
+      toggleBreakpoint(cell1, 7);
+      const cell1Atom = createCellBreakpointsAtom(cell1);
+      const cell2Atom = createCellBreakpointsAtom(cell2);
+
+      expect(store.get(cell1Atom)).toEqual(new Set([7]));
+      expect(store.get(cell2Atom)).toEqual(new Set());
+    });
+  });
+
+  describe("createDebuggerLineAtom", () => {
+    it("returns null when no line is set", () => {
+      const atom = createDebuggerLineAtom(cell1);
+      expect(store.get(atom)).toBeNull();
+    });
+
+    it("returns the line only for the matching cell", () => {
+      store.set(activeLineAtom, { cellId: cell1, line: 10, startedAtMs: 0 });
+
+      expect(store.get(createDebuggerLineAtom(cell1))).toBe(10);
+      expect(store.get(createDebuggerLineAtom(cell2))).toBeNull();
+    });
+  });
+
+  describe("setActiveLine", () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it("stamps startedAtMs when the line is first set", () => {
+      vi.setSystemTime(1000);
+      setActiveLine({ cellId: cell1, line: 3 });
+
+      expect(store.get(activeLineAtom)).toEqual({
+        cellId: cell1,
+        line: 3,
+        startedAtMs: 1000,
+      });
+    });
+
+    it("preserves startedAtMs when the same line is set again", () => {
+      vi.setSystemTime(1000);
+      setActiveLine({ cellId: cell1, line: 3 });
+      vi.setSystemTime(2000);
+      setActiveLine({ cellId: cell1, line: 3 });
+
+      expect(store.get(activeLineAtom)).toEqual({
+        cellId: cell1,
+        line: 3,
+        startedAtMs: 1000,
+      });
+    });
+
+    it("resets startedAtMs when the line changes", () => {
+      vi.setSystemTime(1000);
+      setActiveLine({ cellId: cell1, line: 3 });
+      vi.setSystemTime(2000);
+      setActiveLine({ cellId: cell1, line: 4 });
+
+      expect(store.get(activeLineAtom)).toEqual({
+        cellId: cell1,
+        line: 4,
+        startedAtMs: 2000,
+      });
+    });
+
+    it("resets startedAtMs when the cell changes", () => {
+      vi.setSystemTime(1000);
+      setActiveLine({ cellId: cell1, line: 3 });
+      vi.setSystemTime(2000);
+      setActiveLine({ cellId: cell2, line: 3 });
+
+      expect(store.get(activeLineAtom)).toEqual({
+        cellId: cell2,
+        line: 3,
+        startedAtMs: 2000,
+      });
+    });
+
+    it("clears the active line on null", () => {
+      setActiveLine({ cellId: cell1, line: 3 });
+      setActiveLine(null);
+
+      expect(store.get(activeLineAtom)).toBeNull();
+    });
+  });
+
+  describe("createActiveLineInfoAtom", () => {
+    it("returns null when no line is set", () => {
+      expect(store.get(createActiveLineInfoAtom(cell1))).toBeNull();
+    });
+
+    it("returns line info only for the matching cell", () => {
+      store.set(activeLineAtom, { cellId: cell1, line: 10, startedAtMs: 42 });
+
+      expect(store.get(createActiveLineInfoAtom(cell1))).toEqual({
+        line: 10,
+        startedAtMs: 42,
+      });
+      expect(store.get(createActiveLineInfoAtom(cell2))).toBeNull();
+    });
+  });
+});

package/src/core/codemirror/cells/__tests__/line-timing-decorations.test.ts

@@ -0,0 +1,126 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { python } from "@codemirror/lang-python";
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createMockObservable } from "@/core/state/__mocks__/mocks";
+import type { Observable } from "@/core/state/observable";
+import {
+  type ActiveLineInfo,
+  activeLineTimer,
+} from "../line-timing-decorations";
+
+type MockObservable = Observable<ActiveLineInfo | null> & {
+  set: (value: ActiveLineInfo | null) => void;
+};
+
+function createEditor(
+  content: string,
+  infoObservable: Observable<ActiveLineInfo | null>,
+) {
+  const state = EditorState.create({
+    doc: content,
+    extensions: [python(), activeLineTimer(infoObservable)],
+  });
+
+  return new EditorView({
+    state,
+    parent: document.body,
+  });
+}
+
+const CODE = `a = 1
+b = 2
+c = 3`;
+
+describe("line-timing-decorations", () => {
+  let view: EditorView | null = null;
+  let observable: MockObservable;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(10_000);
+    observable = createMockObservable<ActiveLineInfo | null>(null);
+  });
+
+  afterEach(() => {
+    if (view) {
+      view.destroy();
+      view = null;
+    }
+    document.body.innerHTML = "";
+    vi.useRealTimers();
+  });
+
+  it("highlights the active line and no other", () => {
+    view = createEditor(CODE, observable);
+
+    expect(view.dom.querySelector(".cm-timing-current-line")).toBeNull();
+
+    observable.set({ line: 2, startedAtMs: Date.now() });
+
+    const highlighted = view.dom.querySelectorAll(".cm-timing-current-line");
+    expect(highlighted).toHaveLength(1);
+    expect(highlighted[0].textContent).toContain("b = 2");
+  });
+
+  it("keeps the timer empty before the threshold and formats after", () => {
+    view = createEditor(CODE, observable);
+    observable.set({ line: 1, startedAtMs: Date.now() });
+
+    const timer = view.dom.querySelector(".cm-line-timer");
+    expect(timer).not.toBeNull();
+    expect(timer?.textContent).toBe("");
+
+    // Still below the 500ms threshold.
+    vi.advanceTimersByTime(250);
+    expect(timer?.textContent).toBe("");
+
+    // Past the threshold: shows the elapsed time and keeps ticking.
+    vi.advanceTimersByTime(500);
+    expect(timer?.textContent).toBe("750ms");
+
+    vi.advanceTimersByTime(1000);
+    expect(timer?.textContent).toBe("1.75s");
+  });
+
+  it("reuses the widget DOM node when startedAtMs is unchanged", () => {
+    view = createEditor(CODE, observable);
+    observable.set({ line: 1, startedAtMs: Date.now() });
+
+    const before = view.dom.querySelector(".cm-line-timer");
+    expect(before).not.toBeNull();
+
+    // A fresh info object for the same line and start time (e.g. a duplicate
+    // notification) must not recreate the widget.
+    observable.set({ line: 1, startedAtMs: 10_000 });
+
+    expect(view.dom.querySelector(".cm-line-timer")).toBe(before);
+  });
+
+  it("clears the timer interval when the widget is destroyed", () => {
+    const setIntervalSpy = vi.spyOn(window, "setInterval");
+    const clearIntervalSpy = vi.spyOn(window, "clearInterval");
+    view = createEditor(CODE, observable);
+    observable.set({ line: 1, startedAtMs: Date.now() });
+
+    expect(view.dom.querySelector(".cm-line-timer")).not.toBeNull();
+    expect(setIntervalSpy).toHaveBeenCalledTimes(1);
+    const intervalId = setIntervalSpy.mock.results[0].value;
+
+    observable.set(null);
+
+    expect(view.dom.querySelector(".cm-line-timer")).toBeNull();
+    expect(clearIntervalSpy).toHaveBeenCalledWith(intervalId);
+  });
+
+  it("renders nothing for an out-of-range line", () => {
+    view = createEditor(CODE, observable);
+
+    observable.set({ line: 100, startedAtMs: Date.now() });
+
+    expect(view.dom.querySelector(".cm-timing-current-line")).toBeNull();
+    expect(view.dom.querySelector(".cm-line-timer")).toBeNull();
+  });
+});