@marimo-team/islands 0.25.3-dev30 → 0.25.3-dev301

package/src/core/codemirror/placeholder/__tests__/extensions.test.ts

@@ -81,16 +81,32 @@ describe("clickablePlaceholderExtension", () => {
 
     // Check text content
     expect(placeholder.textContent).toBe("Click here to continue");
+    expect(
+      [...placeholder.querySelectorAll('[aria-hidden="true"]')].map(
+        (node) => node.textContent,
+      ),
+    ).toEqual(["Click ", " to continue"]);
+    expect(
+      placeholder.querySelector("button")?.closest('[aria-hidden="true"]'),
+    ).toBeNull();
 
     // Find and check the clickable link
     const link = placeholder.querySelector(".cm-clickable-placeholder")!;
     expect(link).toBeTruthy();
     expect(link.textContent).toBe("here");
+    expect(link.tagName).toBe("BUTTON");
+    expect(link.closest('[aria-hidden="true"]')).toBeNull();
+    expect(link.getAttribute("type")).toBe("button");
 
     // Simulate click
     (link as HTMLElement).click();
     expect(onClick).toHaveBeenCalled();
 
+    view.dispatch({ changes: { from: 0, insert: "Hello" } });
+    expect(view.dom.querySelector(".cm-clickable-placeholder")).toBeNull();
+    view.dispatch({ changes: { from: 0, to: 5 } });
+    expect(view.dom.querySelector("button")?.textContent).toBe("here");
+
     // Check theme classes
     expect(link.classList.contains("cm-clickable-placeholder")).toBe(true);
 
@@ -129,4 +145,63 @@ describe("clickablePlaceholderExtension", () => {
 
     view.destroy();
   });
+
+  describe("caret coordinates", () => {
+    const original = Range.prototype.getClientRects;
+    let rects: Array<Pick<DOMRect, "left" | "right" | "top" | "bottom">>;
+
+    beforeEach(() => {
+      rects = [{ left: 10, right: 50, top: 2, bottom: 18 }];
+      Range.prototype.getClientRects = () => rects as unknown as DOMRectList;
+    });
+
+    afterEach(() => {
+      Range.prototype.getClientRects = original;
+    });
+
+    function renderWidget(beforeText: string) {
+      const view = new EditorView({
+        state: EditorState.create({
+          doc: "",
+          extensions: clickablePlaceholderExtension({
+            beforeText,
+            linkText: "here",
+            afterText: "",
+            onClick: vi.fn(),
+          }),
+        }),
+      });
+      const widget = view.state
+        .facet(EditorView.decorations)
+        .flatMap((deco) => (typeof deco === "function" ? [deco(view)] : [deco]))
+        .map((set) => set.iter().value?.spec.widget)
+        .find(Boolean);
+      const dom = widget.toDOM(view);
+      document.body.append(dom);
+      return { view, widget, dom };
+    }
+
+    it("collapses the caret to the start of the first line of text", () => {
+      const { view, widget, dom } = renderWidget("Type or ");
+      expect(widget.coordsAt(dom, 0, 1)).toEqual({
+        left: 10,
+        right: 10,
+        top: 2,
+        bottom: 18,
+      });
+      dom.style.direction = "rtl";
+      expect(widget.coordsAt(dom, 0, 1)).toMatchObject({ left: 50, right: 50 });
+      dom.remove();
+      view.destroy();
+    });
+
+    it("skips empty text and falls back when nothing is laid out", () => {
+      const { view, widget, dom } = renderWidget("");
+      expect(widget.coordsAt(dom, 0, 1)).toMatchObject({ left: 10 });
+      rects = [];
+      expect(widget.coordsAt(dom, 0, 1)).toBeNull();
+      dom.remove();
+      view.destroy();
+    });
+  });
 });

package/src/core/codemirror/placeholder/extensions.ts

@@ -1,6 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { Extension } from "@codemirror/state";
-import { EditorView, keymap, placeholder } from "@codemirror/view";
+import {
+  Decoration,
+  EditorView,
+  keymap,
+  placeholder,
+  WidgetType,
+} from "@codemirror/view";
 import { isEditorReadonly } from "../readonly/extension";
 
 /**
@@ -60,37 +66,92 @@ export function clickablePlaceholderExtension(opts: {
 }): Extension[] {
   const { beforeText, linkText, afterText, onClick } = opts;
 
-  // Create a placeholder
-  // Needs to be a function to keep event listeners
-  // See https://github.com/codemirror/dev/issues/1457
-  const createPlaceholder = (ev: EditorView) => {
-    const placeholderText = document.createElement("span");
-    placeholderText.append(document.createTextNode(beforeText));
-    const link = document.createElement("span");
-    link.textContent = linkText;
-    link.classList.add("cm-clickable-placeholder");
-    link.onclick = (evt) => {
-      evt.stopPropagation();
-      onClick(ev);
-    };
-    placeholderText.append(link);
-    placeholderText.append(document.createTextNode(afterText));
-    return placeholderText;
-  };
+  class ActionPlaceholder extends WidgetType {
+    public toDOM(ev: EditorView) {
+      const wrapper = document.createElement("span");
+      wrapper.className = "cm-placeholder";
+      wrapper.contentEditable = "false";
+      const before = document.createElement("span");
+      before.textContent = beforeText;
+      before.setAttribute("aria-hidden", "true");
+      wrapper.append(before);
+      const button = document.createElement("button");
+      button.type = "button";
+      button.textContent = linkText;
+      button.className = "cm-clickable-placeholder";
+      button.onclick = (event) => {
+        event.stopPropagation();
+        onClick(ev);
+      };
+      const after = document.createElement("span");
+      after.textContent = afterText;
+      after.setAttribute("aria-hidden", "true");
+      wrapper.append(button, after);
+      return wrapper;
+    }
+
+    public override coordsAt(dom: HTMLElement) {
+      // A wrapped placeholder must not make the caret span every line.
+      const walker = document.createTreeWalker(dom, NodeFilter.SHOW_TEXT);
+      let text = walker.nextNode();
+      while (text && !text.textContent) {
+        text = walker.nextNode();
+      }
+      if (!text) {
+        return null;
+      }
+      const range = document.createRange();
+      range.selectNodeContents(text);
+      const rect = range.getClientRects()[0];
+      if (!rect) {
+        return null;
+      }
+      const left =
+        window.getComputedStyle(dom).direction === "rtl"
+          ? rect.right
+          : rect.left;
+      return { left, right: left, top: rect.top, bottom: rect.bottom };
+    }
+
+    public override ignoreEvent(event: Event) {
+      return (
+        event.target instanceof Element &&
+        event.target.closest(".cm-clickable-placeholder") !== null
+      );
+    }
+  }
 
   return [
-    placeholder(createPlaceholder),
+    EditorView.decorations.compute(["doc"], (state) =>
+      state.doc.length === 0
+        ? Decoration.set([
+            Decoration.widget({
+              widget: new ActionPlaceholder(),
+              side: 1,
+            }).range(0),
+          ])
+        : Decoration.none,
+    ),
     EditorView.theme({
       ".cm-placeholder": {
         color: "var(--slate-8)",
       },
       ".cm-clickable-placeholder": {
         cursor: "pointer !important",
+        font: "inherit",
+        background: "transparent",
+        border: "none",
+        padding: "0",
         pointerEvents: "auto",
         color: "var(--slate-9)",
         textDecoration: "underline",
         textUnderlineOffset: "0.2em",
       },
+      ".cm-clickable-placeholder:focus-visible": {
+        outline: "1px solid var(--muted-foreground)",
+        outlineOffset: "2px",
+        borderRadius: "2px",
+      },
       ".cm-clickable-placeholder:hover": {
         color: "var(--sky-11)",
       },

package/src/core/codemirror/readonly/__tests__/extension.test.ts

@@ -4,7 +4,7 @@ import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { createStore } from "jotai";
 import { describe, expect, it } from "vitest";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import { connectionAtom } from "../../../network/connection";
 import { dynamicReadonly, isEditorReadonly } from "../extension";
 

package/src/core/codemirror/readonly/extension.ts

@@ -5,9 +5,9 @@ import type { createStore } from "jotai";
 import {
   isAppConnected,
   isAppConnecting,
-} from "@/core/websocket/connection-utils";
+} from "@/core/session/connection-utils";
 import { connectionAtom } from "../../network/connection";
-import { ConnectionState } from "../../websocket/types";
+import { ConnectionState } from "../../session/types";
 
 /**
  * State effect for updating readonly status based on connection

package/src/core/codemirror/utils.ts

@@ -122,6 +122,7 @@ export function hasNewLines(tr: Transaction | ViewUpdate): boolean {
 
   let hasNewLines = false;
   // Iterate through all changes in the transaction
+  // oxlint-disable-next-line marimo/prefer-object-params -- CodeMirror supplies positional change ranges and inserted text.
   tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
     // Check if the inserted text contains line breaks
     if (inserted.toString().includes("\n")) {

package/src/core/config/__tests__/app-config.test.ts

@@ -0,0 +1,64 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { atom, createStore } from "jotai";
+import { describe, expect, it } from "vitest";
+import { partial } from "@/__mocks__/partial";
+import type { Document, NotebookReplica } from "@/core/notebook/replica";
+import { activeNotebookReplicaAtom } from "@/core/session/active-notebook";
+import { appConfigAtom, pageAppConfigAtom } from "../config";
+
+function document(app_config: Record<string, unknown>, version = 1): Document {
+  return {
+    revision: {
+      notebook_id: "nb",
+      order: [],
+      app_config,
+      etag: `etag-${version}`,
+      saved_etag: null,
+      order_etag: "order",
+      app_config_etag: "config",
+      version,
+    },
+    cells: new Map(),
+  };
+}
+
+function connect(store: ReturnType<typeof createStore>, current: Document) {
+  store.set(
+    activeNotebookReplicaAtom,
+    partial<NotebookReplica>({ documentAtom: atom(current) }, "replica"),
+  );
+}
+
+describe("appConfigAtom", () => {
+  it("reads the page's config until the host document arrives", () => {
+    const store = createStore();
+    expect(store.get(appConfigAtom).width).toBe("compact");
+    store.set(pageAppConfigAtom, { width: "full" });
+    expect(store.get(appConfigAtom).width).toBe("full");
+    connect(store, document({ width: "compact" }));
+    expect(store.get(appConfigAtom).width).toBe("compact");
+  });
+
+  it("fills what the host document leaves out with Python's defaults", () => {
+    const store = createStore();
+    store.set(pageAppConfigAtom, { width: "full" });
+    // The document carries only the options that differ from the defaults.
+    connect(store, document({}));
+    expect(store.get(appConfigAtom)).toEqual({
+      width: "compact",
+      auto_download: [],
+      sql_output: "auto",
+    });
+  });
+
+  it("keeps the same object while the record is unchanged", () => {
+    const store = createStore();
+    connect(store, document({ width: "full" }, 1));
+    const first = store.get(appConfigAtom);
+    connect(store, document({ width: "full" }, 2));
+    expect(store.get(appConfigAtom)).toBe(first);
+    connect(store, document({ width: "medium" }, 3));
+    expect(store.get(appConfigAtom).width).toBe("medium");
+  });
+});

package/src/core/config/__tests__/config-schema.test.ts

@@ -16,13 +16,18 @@ import {
   UserConfigSchema,
 } from "../config-schema";
 
+test("legacy Manual config resolves to Read only", () => {
+  const config = UserConfigSchema.parse({ ai: { mode: "manual" } });
+  expect(config).toEqual(UserConfigSchema.parse({ ai: { mode: "ask" } }));
+});
+
 test("default AppConfig", () => {
   const defaultConfig = AppConfigSchema.parse({});
   expect(defaultConfig).toMatchInlineSnapshot(`
     {
       "auto_download": [],
       "sql_output": "auto",
-      "width": "medium",
+      "width": "compact",
     }
   `);
 });
@@ -51,7 +56,7 @@ test("default UserConfig - empty", () => {
         "custom_providers": {},
         "enabled": true,
         "inline_tooltip": false,
-        "mode": "manual",
+        "mode": "ask",
         "models": {
           "custom_models": [],
           "displayed_models": [],
@@ -79,6 +84,7 @@ test("default UserConfig - empty", () => {
       "experimental": {},
       "file_browser": {},
       "formatting": {
+        "infer_types": "off",
         "line_length": 79,
       },
       "keymap": {
@@ -127,7 +133,7 @@ test("default UserConfig - one level", () => {
         "custom_providers": {},
         "enabled": true,
         "inline_tooltip": false,
-        "mode": "manual",
+        "mode": "ask",
         "models": {
           "custom_models": [],
           "displayed_models": [],
@@ -155,6 +161,7 @@ test("default UserConfig - one level", () => {
       "experimental": {},
       "file_browser": {},
       "formatting": {
+        "infer_types": "off",
         "line_length": 79,
       },
       "keymap": {
@@ -273,7 +280,7 @@ test("resolvedMarimoConfigAtom overrides correctly and does not mutate the origi
       autosave_delay: 1000,
       format_on_save: false,
     },
-    formatting: { line_length: 79 },
+    formatting: { line_length: 79, infer_types: "off" },
   };
 
   const overrides = {
@@ -299,7 +306,7 @@ test("resolvedMarimoConfigAtom overrides correctly and does not mutate the origi
       autosave_delay: 1000,
       format_on_save: false,
     },
-    formatting: { line_length: 79 },
+    formatting: { line_length: 79, infer_types: "off" },
     display: { theme: "dark" },
   });
 
@@ -314,7 +321,7 @@ test("resolvedMarimoConfigAtom overrides correctly and does not mutate the origi
       autosave_delay: 1000,
       format_on_save: false,
     },
-    formatting: { line_length: 79 },
+    formatting: { line_length: 79, infer_types: "off" },
   });
 });
 
@@ -361,3 +368,46 @@ test("mergeConfig replaces arrays instead of merging by index", () => {
     },
   });
 });
+
+test.each([{}, { "run-cell": "Alt-Enter" }])(
+  "mergeConfig replaces shortcut dictionaries with %j",
+  (overrides) => {
+    const original = {
+      keymap: {
+        preset: "vim",
+        overrides: { "run-all": "Ctrl-Enter" },
+      },
+    };
+    expect(mergeConfig(original, { keymap: { overrides } })).toEqual({
+      keymap: { preset: "vim", overrides },
+    });
+    expect(original.keymap.overrides).toEqual({ "run-all": "Ctrl-Enter" });
+  },
+);
+
+test.each(["ai.custom_providers", "signing.trusted_signers"])(
+  "mergeConfig replaces records at %s while preserving retained record fields",
+  (path) => {
+    const [section, name] = path.split(".");
+    const original = {
+      [section]: {
+        [name]: {
+          retained: { name: "before", api_key: "secret" },
+          removed: { name: "removed" },
+        },
+      },
+    };
+    expect(
+      mergeConfig(original, {
+        [section]: { [name]: { retained: { name: "after" } } },
+      }),
+    ).toEqual({
+      [section]: {
+        [name]: { retained: { name: "after", api_key: "secret" } },
+      },
+    });
+    expect(mergeConfig(original, { [section]: { [name]: {} } })).toEqual({
+      [section]: { [name]: {} },
+    });
+  },
+);

package/src/core/config/config-schema.ts

@@ -44,6 +44,8 @@ export const DEFAULT_AI_MODEL = "openai/gpt-4o";
  */
 const AUTO_DOWNLOAD_FORMATS = ["html", "markdown", "ipynb"] as const;
 
+export const TYPE_INFERENCE_MODES = ["off", "jedi"] as const;
+
 export type CopilotMode = NonNullable<schemas["AiConfig"]["mode"]>;
 export const COPILOT_MODES: CopilotMode[] = [
   "manual",
@@ -112,6 +114,7 @@ export const UserConfigSchema = z
           .nonnegative()
           .prefault(79)
           .transform((n) => Math.min(n, 1000)),
+        infer_types: z.enum(TYPE_INFERENCE_MODES).prefault("off"),
       })
       .prefault({}),
     keymap: z
@@ -128,6 +131,7 @@ export const UserConfigSchema = z
         auto_reload: z.enum(["off", "lazy", "autorun"]).prefault("off"),
         reactive_tests: z.boolean().prefault(true),
         watcher_on_save: z.enum(["lazy", "autorun"]).prefault("lazy"),
+        sql_default_limit: z.number().int().nullable().optional(),
         default_sql_output: z.enum(VALID_SQL_OUTPUT_FORMATS).prefault("auto"),
         default_auto_download: z
           .array(z.enum(AUTO_DOWNLOAD_FORMATS))
@@ -167,7 +171,10 @@ export const UserConfigSchema = z
         enabled: z.boolean().prefault(true),
         rules: z.string().prefault(""),
         max_tokens: z.number().int().positive().nullable().optional(),
-        mode: z.enum(COPILOT_MODES).prefault("manual"),
+        mode: z
+          .enum(COPILOT_MODES)
+          .transform((mode) => (mode === "manual" ? "ask" : mode))
+          .prefault("ask"),
         inline_tooltip: z.boolean().prefault(false),
         allow_provider_config: z.boolean().prefault(true),
         open_ai: AiConfigSchema.optional(),
@@ -198,13 +205,15 @@ export const UserConfigSchema = z
     experimental: z
       .looseObject({
         markdown: z.boolean().optional(),
-        rtc: z.boolean().optional(),
         // Add new experimental features here
       })
       // Pass through so that we don't remove any extra keys that the user has added.
       .prefault(() => ({})),
     server: z
       .looseObject({
+        skip_update_check: z.boolean().optional(),
+        session_cookie_secure: z.boolean().optional(),
+        session_secret: z.string().optional(),
         disable_file_downloads: z.boolean().optional(),
         transport: z.enum(["websocket", "sse"]).optional(),
       })
@@ -272,11 +281,15 @@ export const SqlOutputSchema = z
   .enum(VALID_SQL_OUTPUT_FORMATS)
   .prefault("auto");
 
+/**
+ * The notebook's app config. The defaults are Python's `_AppConfig` defaults,
+ * since the host document carries only what differs from them.
+ */
 export const AppConfigSchema = z
   .object({
     width: z
       .enum(VALID_APP_WIDTHS)
-      .prefault("medium")
+      .prefault("compact")
       .transform((width) => {
         if (width === "normal") {
           return "compact";
@@ -290,7 +303,7 @@ export const AppConfigSchema = z
     sql_output: SqlOutputSchema,
   })
   .prefault(() => ({
-    width: "medium" as const,
+    width: "compact" as const,
     auto_download: [],
     sql_output: "auto" as const,
   }));

package/src/core/config/config.ts

@@ -1,8 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+import { dequal } from "dequal";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
-import { mergeWith } from "lodash-es";
+import { selectAtom } from "jotai/vanilla/utils";
+import { cloneDeep, get, has, isPlainObject, mergeWith, set } from "lodash-es";
 import { OverridingHotkeyProvider } from "../hotkeys/hotkeys";
 import { type Platform, resolvePlatform } from "../hotkeys/shortcuts";
+import { confirmedDocumentAtom } from "../session/active-notebook";
 import { store } from "../state/jotai";
 import {
   type AppConfig,
@@ -12,16 +15,47 @@ import {
 } from "./config-schema";
 
 /**
- * Deep-merge config objects, replacing arrays instead of merging them by
- * index. Lodash `merge` keeps leftover tail items. Python `deep_merge` replaces arrays.
+ * Combine configuration sources in priority order, with later sources winning.
+ * Arrays and shortcut maps replace earlier values so removed entries stay removed.
+ * Provider and signer maps replace their keys, while retained records inherit
+ * unspecified fields (for example, a provider's API key).
+ * These rules match backend resolution so the editor and kernel use the same settings.
  */
+// TODO(MO-8400): Resolve configuration on the backend and send resolved values
+// with provenance, instead of duplicating source merging in the frontend.
 export function mergeConfig<T extends object>(...sources: object[]): T {
-  return mergeWith({}, ...sources, (_obj: unknown, src: unknown) => {
-    if (Array.isArray(src)) {
-      return [...src];
+  const result = {};
+  for (const source of sources) {
+    const replacements = [
+      "keymap.overrides",
+      "ai.custom_providers",
+      "signing.trusted_signers",
+    ]
+      .filter((path) => has(source, path))
+      .map((path) => {
+        const previous = get(result, path);
+        const incoming = get(source, path);
+        const value =
+          path !== "keymap.overrides" && isPlainObject(incoming)
+            ? Object.fromEntries(
+                Object.entries(incoming).map(([key, value]) => [
+                  key,
+                  isPlainObject(previous?.[key]) && isPlainObject(value)
+                    ? { ...previous[key], ...(value as object) }
+                    : value,
+                ]),
+              )
+            : incoming;
+        return { path, value };
+      });
+    mergeWith(result, source, (_obj: unknown, src: unknown) => {
+      return Array.isArray(src) ? [...src] : undefined;
+    });
+    for (const { path, value } of replacements) {
+      set(result, path, cloneDeep(value));
     }
-    return undefined;
-  }) as T;
+  }
+  return result as T;
 }
 
 /**
@@ -134,19 +168,30 @@ export function isAiFeatureEnabled(config: UserConfig) {
 }
 
 /**
- * Atom for storing the app config.
+ * The app config the page was served with, as the server wrote it.
+ *
+ * The host document carries the current one; this holds its place until
+ * that document arrives. It goes once every page carries its document.
  */
-export const appConfigAtom = atom<AppConfig>(parseAppConfig({}));
-
-/**
- * Returns the app config.
- */
-export function useAppConfig() {
-  return useAtom(appConfigAtom);
-}
-
-export function useSetAppConfig() {
-  return useSetAtom(appConfigAtom);
+export const pageAppConfigAtom = atom<unknown>({});
+
+/** The app config record in force, stable while its contents are. */
+const appConfigRecordAtom = selectAtom(
+  atom(
+    (get) =>
+      get(confirmedDocumentAtom)?.revision.app_config ?? get(pageAppConfigAtom),
+  ),
+  (record) => record,
+  dequal,
+);
+
+/** The notebook's app config, as the host document carries it. */
+export const appConfigAtom = atom((get) =>
+  parseAppConfig(get(appConfigRecordAtom)),
+);
+
+export function useAppConfig(): AppConfig {
+  return useAtomValue(appConfigAtom);
 }
 
 export function getAppConfig() {

package/src/core/config/feature-flag.tsx

@@ -8,7 +8,6 @@ import { getResolvedMarimoConfig } from "./config";
 export interface ExperimentalFeatures {
   markdown: boolean; // Used in playground (community cloud)
   wasm_layouts: boolean; // Used in playground (community cloud)
-  rtc_v2: boolean;
   cache_panel: boolean;
   external_agents: boolean;
   debugger: boolean; // Live frame-watching debugger (gutter breakpoints + pdb)
@@ -19,7 +18,6 @@ export interface ExperimentalFeatures {
 const defaultValues: ExperimentalFeatures = {
   markdown: true,
   wasm_layouts: false,
-  rtc_v2: false,
   cache_panel: import.meta.env.DEV,
   external_agents: import.meta.env.DEV,
   debugger: false,