From 793d482366c1a88ba5fafe214f7edcabc650e32b Mon Sep 17 00:00:00 2001
From: kevin9327 <5299031+kevin9327@users.noreply.github.com>
Date: Sun, 20 Sep 2026 23:57:14 +0900
Subject: [PATCH 1/5] fix(extension): fill contenteditable descendants

DOM.describeNode only reports the target's own attributes. A paragraph
inside [contenteditable] has none, so fill rejected it before the live
isContentEditable check. Agents snapshot the inner block of rich
editors and then cannot type into it.
---
 .../src/tools/__tests__/fill.test.ts          | 13 +++++++++
 .../src/tools/__tests__/interaction.test.ts   |  2 +-
 apps/extension/src/tools/interaction.ts       | 29 +++++++++++++++++--
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/apps/extension/src/tools/__tests__/fill.test.ts b/apps/extension/src/tools/__tests__/fill.test.ts
index 19f955030..4cb9c5917 100644
--- a/apps/extension/src/tools/__tests__/fill.test.ts
+++ b/apps/extension/src/tools/__tests__/fill.test.ts
@@ -396,6 +396,19 @@ describe("fill result verification", () => {
     expect(await h.fill(requested)).toMatchObject({ value_length: normalized.length });
   });
 
+  it("fills a contenteditable descendant that has no contenteditable attribute", async () => {
+    const h = await setup('<p tabindex="0"></p>');
+    let innerText = "";
+    Object.defineProperty(h.element, "isContentEditable", { get: () => true });
+    Object.defineProperty(h.element, "innerText", { get: () => innerText });
+    h.insert.mockImplementation(async () => {
+      h.element.textContent = "hello";
+      innerText = "hello";
+    });
+    expect(await h.fill("hello")).toMatchObject({ value_length: 5 });
+    expect(h.insert).toHaveBeenCalledOnce();
+  });
+
   it("does not count an editable padding break as an extra typed character", async () => {
     const h = await setup('<div contenteditable="true" tabindex="0"></div>');
     // These two layout/editability properties are missing in Happy DOM.
diff --git a/apps/extension/src/tools/__tests__/interaction.test.ts b/apps/extension/src/tools/__tests__/interaction.test.ts
index 5d04d2023..351339754 100644
--- a/apps/extension/src/tools/__tests__/interaction.test.ts
+++ b/apps/extension/src/tools/__tests__/interaction.test.ts
@@ -1322,7 +1322,7 @@ describe("handleFill", () => {
     ctx.refStore.set("e1", 100, { tabId: 4 });
     const fake = makeFakeCdp({
       "DOM.describeNode": () => ({
-        node: { backendNodeId: 100, nodeName: "DIV", attributes: [] },
+        node: { backendNodeId: 100, nodeName: "BUTTON", attributes: [] },
       }),
     });
     const res = await handleFill(
diff --git a/apps/extension/src/tools/interaction.ts b/apps/extension/src/tools/interaction.ts
index 0a1af3298..3e663a148 100644
--- a/apps/extension/src/tools/interaction.ts
+++ b/apps/extension/src/tools/interaction.ts
@@ -900,9 +900,34 @@ interface DescribedNode {
   attributes?: string[];
 }
 
+const NEVER_FILLABLE_TAGS = new Set([
+  "BUTTON",
+  "SELECT",
+  "OPTION",
+  "OPTGROUP",
+  "SCRIPT",
+  "STYLE",
+  "LINK",
+  "META",
+  "IMG",
+  "VIDEO",
+  "AUDIO",
+  "CANVAS",
+  "IFRAME",
+  "OBJECT",
+  "EMBED",
+  "SVG",
+  "BR",
+  "HR",
+]);
+
 /**
  * Decide whether a node can receive `tool.fill`: native `<input>` /
- * `<textarea>`, or any element flagged `contenteditable="true"`.
+ * `<textarea>`, an element with its own contenteditable attribute, or
+ * a descendant that may inherit contenteditable. `DOM.describeNode`
+ * only reports this node's attributes, so a `<p>` inside
+ * `[contenteditable]` must not be rejected here; the live
+ * `isContentEditable` check is the source of truth.
  * Exported via `__testing__` for unit coverage.
  */
 function isFillable(node: DescribedNode): boolean {
@@ -915,7 +940,7 @@ function isFillable(node: DescribedNode): boolean {
       return value === "" || value === "true" || value === "plaintext-only";
     }
   }
-  return false;
+  return !NEVER_FILLABLE_TAGS.has(tag);
 }
 
 type SelectMutationResult =

From 3569319fedb4dd64047203e662d89dd9a7f33a68 Mon Sep 17 00:00:00 2001
From: kevin9327 <5299031+kevin9327@users.noreply.github.com>
Date: Mon, 28 Sep 2026 19:26:09 +0900
Subject: [PATCH 2/5] fix(extension): fill an editor paragraph through its
 editing host

A descendant of a contenteditable host is now checked for live
editability before anything is focused, so a non-editable target is
rejected without blurring the focused element. Its editing host takes
focus, which a paragraph without tabindex cannot, and the selection is
confined to the target: its contents are selected to be replaced, or the
caret is put at their end to append, after background focus handling.
Clearing no longer empties the target before typing, which let the typed
text land in the next paragraph.

Real-browser tests cover replacement, append, an empty value, background
tabs and sibling paragraphs, and run in the browser input CI job.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .github/workflows/ci.yml                      |   6 +
 .../src/tools/__tests__/fill.browser.test.ts  | 181 ++++++++++++++++++
 .../src/tools/__tests__/fill.test.ts          |  42 ++--
 .../src/tools/__tests__/interaction.test.ts   |  17 +-
 apps/extension/src/tools/interaction.ts       | 145 +++++++++++---
 5 files changed, 347 insertions(+), 44 deletions(-)
 create mode 100644 apps/extension/src/tools/__tests__/fill.browser.test.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e8499b5bc..163f47dfa 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -242,6 +242,12 @@ jobs:
           BSK_CLICK_CHROME: google-chrome
         run: pnpm exec vitest run src/tools/__tests__/emulation-lifecycle.browser.test.ts
 
+      - name: Run fill browser regression
+        working-directory: apps/extension
+        env:
+          BSK_CLICK_CHROME: google-chrome
+        run: pnpm exec vitest run src/tools/__tests__/fill.browser.test.ts
+
   node-scripts:
     name: Node script tests
     runs-on: ubuntu-latest
diff --git a/apps/extension/src/tools/__tests__/fill.browser.test.ts b/apps/extension/src/tools/__tests__/fill.browser.test.ts
new file mode 100644
index 000000000..f7d34fac1
--- /dev/null
+++ b/apps/extension/src/tools/__tests__/fill.browser.test.ts
@@ -0,0 +1,181 @@
+// @vitest-environment node
+// Opt in with BSK_CLICK_CHROME=/path/to/chrome; each test owns its browser/profile.
+import { describe, expect, it } from "vitest";
+import { SessionManager } from "@/session-manager/manager";
+import { handleFill } from "../interaction";
+import type { CdpRunner } from "../shared";
+
+type Send = <T = Record<string, unknown>>(
+  method: string,
+  params?: object,
+  sessionId?: string,
+) => Promise<T>;
+
+async function withFillBrowser(
+  { background, markup }: { background: boolean; markup: string },
+  run: (h: {
+    evaluate: (expression: string) => Promise<unknown>;
+    ref: (expression: string) => Promise<void>;
+    fill: (value: string, clearBefore?: boolean) => ReturnType<typeof handleFill>;
+  }) => Promise<void>,
+) {
+  // Reuse the existing isolated Chrome launcher; no new browser dependency.
+  const { withChrome } = await import(
+    new URL(
+      "../../../../../evals/browser/cases/regression/snapshot-coordinates/chrome.mjs",
+      import.meta.url,
+    ).href
+  );
+  await withChrome(
+    { executable: process.env.BSK_CLICK_CHROME, deviceScale: 1, zoom: 1 },
+    async (send: Send) => {
+      // A background target stays behind the launcher's first page.
+      const { targetId } = await send<{ targetId: string }>("Target.createTarget", {
+        url: "about:blank",
+        background,
+      });
+      const { sessionId } = await send<{ sessionId: string }>("Target.attachToTarget", {
+        targetId,
+        flatten: true,
+      });
+      if (!background) await send("Page.bringToFront", {}, sessionId);
+      const evaluate = async (expression: string) => {
+        const reply = await send<{ result: { value: unknown }; exceptionDetails?: unknown }>(
+          "Runtime.evaluate",
+          { expression, returnByValue: true },
+          sessionId,
+        );
+        expect(reply.exceptionDetails).toBeUndefined();
+        return reply.result.value;
+      };
+      await evaluate(`document.body.innerHTML = ${JSON.stringify(markup)}`);
+      expect(await evaluate("document.hasFocus()")).toBe(!background);
+      const manager = new SessionManager({
+        agentWindow: {
+          create: async () => ({ windowId: 100, initialTabIds: [] }),
+          remove: async () => {},
+          ensureActiveTab: async () => 4,
+        },
+      });
+      const ctx = await manager.start("aa11");
+      const cdp: CdpRunner = {
+        send: async (_tabId, method, params) => (await send(method, params, sessionId)) as never,
+      };
+      const deps = {
+        cdp,
+        tabsApi: {
+          get: async (id: number) =>
+            ({ id, windowId: 100, active: !background }) as chrome.tabs.Tab,
+          query: async () => [{ id: 4, windowId: 100, active: !background } as chrome.tabs.Tab],
+        },
+      };
+      await run({
+        evaluate,
+        ref: async (expression) => {
+          const { result } = await send<{ result: { objectId: string } }>(
+            "Runtime.evaluate",
+            { expression },
+            sessionId,
+          );
+          const { node } = await send<{ node: { backendNodeId: number } }>(
+            "DOM.describeNode",
+            { objectId: result.objectId },
+            sessionId,
+          );
+          await send("Runtime.releaseObject", { objectId: result.objectId }, sessionId);
+          ctx.refStore.set("e1", node.backendNodeId, { tabId: 4 });
+        },
+        fill: (value, clearBefore) =>
+          handleFill(
+            manager,
+            { session_id: "aa11", ref: "e1", value, clear_before: clearBefore },
+            deps,
+          ),
+      });
+    },
+  );
+}
+
+const editor = (target: string) =>
+  `<div id="host" contenteditable="true"><p id="before">first</p>${target}<p id="after">keep</p></div>`;
+const paragraphs = `[...document.querySelectorAll('#host > p')].map((p) => p.textContent)`;
+
+describe.skipIf(!process.env.BSK_CLICK_CHROME)("real browser fill of editor paragraphs", () => {
+  describe.each([
+    ["foreground", false],
+    ["background", true],
+  ])("in a %s tab", (_mode, background) => {
+    describe.each([
+      ["a paragraph", '<p id="target">old</p>'],
+      ["a focusable paragraph", '<p id="target" tabindex="0">old</p>'],
+      ["a span in a paragraph", '<p>a <span id="target">old</span> b</p>'],
+    ])("targeting %s", (_name, target) => {
+      it("replaces only the target's text", async () => {
+        await withFillBrowser({ background, markup: editor(target) }, async (h) => {
+          await h.ref("document.querySelector('#target')");
+          expect(await h.fill("hello")).toMatchObject({ value_length: 5 });
+          expect(await h.evaluate("document.querySelector('#target').textContent")).toBe("hello");
+          expect(await h.evaluate(paragraphs)).toEqual(
+            target.startsWith("<p>") ? ["first", "a hello b", "keep"] : ["first", "hello", "keep"],
+          );
+        });
+      });
+
+      it("appends to the target's text", async () => {
+        await withFillBrowser({ background, markup: editor(target) }, async (h) => {
+          await h.ref("document.querySelector('#target')");
+          expect(await h.fill("hello", false)).toMatchObject({ value_length: 8 });
+          expect(await h.evaluate("document.querySelector('#target').textContent")).toBe(
+            "oldhello",
+          );
+          expect(await h.evaluate(paragraphs)).toEqual(
+            target.startsWith("<p>")
+              ? ["first", "a oldhello b", "keep"]
+              : ["first", "oldhello", "keep"],
+          );
+        });
+      });
+    });
+
+    it("clears the target when the value is empty", async () => {
+      await withFillBrowser({ background, markup: editor('<p id="target">old</p>') }, async (h) => {
+        await h.ref("document.querySelector('#target')");
+        expect(await h.fill("")).toMatchObject({ value_length: 0 });
+        expect(await h.evaluate(paragraphs)).toEqual(["first", "", "keep"]);
+      });
+    });
+
+    it("still replaces the whole editing host when it is the target", async () => {
+      await withFillBrowser({ background, markup: editor('<p id="target">old</p>') }, async (h) => {
+        await h.ref("document.querySelector('#host')");
+        expect(await h.fill("hello")).toMatchObject({ value_length: 5 });
+        expect(await h.evaluate("document.querySelector('#host').innerText")).toBe("hello");
+      });
+    });
+
+    it("rejects a focusable element outside any editor without moving focus", async () => {
+      await withFillBrowser(
+        {
+          background,
+          markup: '<input id="field"><div id="target" tabindex="0">text</div>',
+        },
+        async (h) => {
+          await h.evaluate(`(() => {
+            const field = document.querySelector('#field');
+            window.blurs = 0;
+            field.addEventListener('blur', () => window.blurs++);
+            field.focus();
+          })()`);
+          await h.ref("document.querySelector('#target')");
+          expect(await h.fill("hello")).toMatchObject({
+            code: "invalid_params",
+            data: { reason: "target_not_fillable" },
+          });
+          expect(await h.evaluate("document.activeElement.id")).toBe("field");
+          expect(await h.evaluate("window.blurs")).toBe(0);
+          expect(await h.evaluate("document.querySelector('#target').textContent")).toBe("text");
+        },
+      );
+    });
+  });
+});
diff --git a/apps/extension/src/tools/__tests__/fill.test.ts b/apps/extension/src/tools/__tests__/fill.test.ts
index 4cb9c5917..3cef1074f 100644
--- a/apps/extension/src/tools/__tests__/fill.test.ts
+++ b/apps/extension/src/tools/__tests__/fill.test.ts
@@ -4,8 +4,10 @@ import type { CdpRunner } from "@/tools/shared";
 import { handleFill } from "../interaction";
 
 interface ScriptParams {
+  objectId?: string;
   functionDeclaration: string;
-  arguments?: Array<{ value: unknown }>;
+  arguments?: Array<{ value?: unknown; objectId?: string }>;
+  returnByValue?: boolean;
 }
 
 async function setup(markup = '<input value="old">') {
@@ -20,17 +22,23 @@ async function setup(markup = '<input value="old">') {
   });
   const ctx = await manager.start("aa11");
   ctx.refStore.set("e1", 12, { tabId: 4 });
+  // Remote object handles, as Runtime.callFunctionOn hands them out.
+  const objects = new Map<string, Element>([["fill-target", element]]);
   const script = vi.fn(async (params: ScriptParams): Promise<unknown> => {
     try {
       const fn = new Function(`return (${params.functionDeclaration})`)();
-      return {
-        result: {
-          value: await fn.apply(
-            element,
-            (params.arguments ?? []).map((arg) => arg.value),
-          ),
-        },
-      };
+      const value = await fn.apply(
+        objects.get(params.objectId ?? "fill-target"),
+        (params.arguments ?? []).map((arg) =>
+          arg.objectId === undefined ? arg.value : objects.get(arg.objectId),
+        ),
+      );
+      if (params.returnByValue === false && value instanceof Element) {
+        const objectId = `object-${objects.size}`;
+        objects.set(objectId, value);
+        return { result: { objectId } };
+      }
+      return { result: { value } };
     } catch {
       return { exceptionDetails: { text: "test page script failed" } };
     }
@@ -67,9 +75,11 @@ async function setup(markup = '<input value="old">') {
         };
       case "DOM.scrollIntoViewIfNeeded":
         return {};
-      case "DOM.focus":
-        element.focus();
+      case "DOM.focus": {
+        const objectId = (params as { objectId?: string }).objectId;
+        ((objectId ? objects.get(objectId) : element) as HTMLElement).focus();
         return {};
+      }
       case "DOM.resolveNode":
         return { object: { objectId: "fill-target" } };
       case "Runtime.callFunctionOn":
@@ -409,6 +419,16 @@ describe("fill result verification", () => {
     expect(h.insert).toHaveBeenCalledOnce();
   });
 
+  it("rejects an element that is not editable before focusing it", async () => {
+    const h = await setup('<div tabindex="0">text</div>');
+    expect(await h.fill("hello")).toMatchObject({
+      code: "invalid_params",
+      data: { reason: "target_not_fillable" },
+    });
+    expect(h.send.mock.calls.map(([, method]) => method)).not.toContain("DOM.focus");
+    expect(h.insert).not.toHaveBeenCalled();
+  });
+
   it("does not count an editable padding break as an extra typed character", async () => {
     const h = await setup('<div contenteditable="true" tabindex="0"></div>');
     // These two layout/editability properties are missing in Happy DOM.
diff --git a/apps/extension/src/tools/__tests__/interaction.test.ts b/apps/extension/src/tools/__tests__/interaction.test.ts
index 351339754..64d266744 100644
--- a/apps/extension/src/tools/__tests__/interaction.test.ts
+++ b/apps/extension/src/tools/__tests__/interaction.test.ts
@@ -1292,12 +1292,11 @@ function successfulFillScript(params: unknown) {
   const args = script.arguments ?? [];
   return {
     result: {
-      value:
-        args.length === 2
-          ? { before: "", expected: args[0].value }
-          : script.functionDeclaration.startsWith("function(expected)")
-            ? { connected: true, matches: true, valueLength: String(args[0].value).length }
-            : "ready",
+      value: script.functionDeclaration.startsWith("function(value, clearBefore")
+        ? { before: "", expected: args[0].value }
+        : script.functionDeclaration.startsWith("function(expected)")
+          ? { connected: true, matches: true, valueLength: String(args[0].value).length }
+          : "ready",
     },
   };
 }
@@ -1380,8 +1379,10 @@ describe("handleFill", () => {
       "DOM.focus": () => ({}),
       "DOM.resolveNode": () => ({ object: { objectId: "obj-2" } }),
       "Runtime.callFunctionOn": (p) => {
-        const args = (p as { arguments?: Array<{ value: unknown }> }).arguments ?? [];
-        if (args.length === 2) expect(args[1].value).toBe(false);
+        const script = p as { arguments?: Array<{ value: unknown }>; functionDeclaration: string };
+        if (script.functionDeclaration.startsWith("function(value, clearBefore")) {
+          expect(script.arguments?.[1].value).toBe(false);
+        }
         return successfulFillScript(p);
       },
       "Input.dispatchKeyEvent": () => ({}),
diff --git a/apps/extension/src/tools/interaction.ts b/apps/extension/src/tools/interaction.ts
index 3e663a148..123e9e4f9 100644
--- a/apps/extension/src/tools/interaction.ts
+++ b/apps/extension/src/tools/interaction.ts
@@ -922,25 +922,25 @@ const NEVER_FILLABLE_TAGS = new Set([
 ]);
 
 /**
- * Decide whether a node can receive `tool.fill`: native `<input>` /
- * `<textarea>`, an element with its own contenteditable attribute, or
- * a descendant that may inherit contenteditable. `DOM.describeNode`
- * only reports this node's attributes, so a `<p>` inside
- * `[contenteditable]` must not be rejected here; the live
- * `isContentEditable` check is the source of truth.
+ * Decide how a node can receive `tool.fill`. Native `<input>` /
+ * `<textarea>` and an element with its own contenteditable attribute
+ * are filled as themselves. Any other element may be a descendant of an
+ * editing host: `DOM.describeNode` only reports this node's attributes,
+ * so a `<p>` inside `[contenteditable]` is not rejected here, and the
+ * live `isContentEditable` check decides before anything is focused.
  * Exported via `__testing__` for unit coverage.
  */
-function isFillable(node: DescribedNode): boolean {
+function fillTargetKind(node: DescribedNode): "self" | "descendant" | null {
   const tag = (node.nodeName ?? "").toUpperCase();
-  if (tag === "INPUT" || tag === "TEXTAREA") return true;
+  if (tag === "INPUT" || tag === "TEXTAREA") return "self";
   const attrs = node.attributes ?? [];
   for (let i = 0; i + 1 < attrs.length; i += 2) {
     if (attrs[i].toLowerCase() === "contenteditable") {
       const value = attrs[i + 1].toLowerCase();
-      return value === "" || value === "true" || value === "plaintext-only";
+      return value === "" || value === "true" || value === "plaintext-only" ? "self" : null;
     }
   }
-  return !NEVER_FILLABLE_TAGS.has(tag);
+  return NEVER_FILLABLE_TAGS.has(tag) ? null : "descendant";
 }
 
 type SelectMutationResult =
@@ -997,6 +997,15 @@ const FILL_EDITABLE_FUNCTION = `function() {
   return this.isConnected && supported && !this.readOnly && !this.matches(':disabled');
 }`;
 
+// The editing host of an editable target: the outermost editable element
+// around it, which takes focus for it. null when the target is not editable.
+const FILL_EDITING_HOST_FUNCTION = `function() {
+  if (!(${FILL_EDITABLE_FUNCTION}).call(this)) return null;
+  let host = this;
+  while (host.parentElement && host.parentElement.isContentEditable) host = host.parentElement;
+  return host;
+}`;
+
 // Chrome renders a trailing editable newline with an empty <div><br></div>.
 // innerText includes the padding break; it is not an extra typed character.
 const FILL_VALUE_FUNCTION = `function() {
@@ -1030,6 +1039,7 @@ export async function handleFill(
   const node = await resolveBackendNode(deps.cdp, ctx, target, params, "fill");
   if (isRpcError(node)) return node;
   const nodeCdp = cdpRunnerForTarget(deps.cdp, node.cdpTarget);
+  let kind: "self" | "descendant" | null = null;
 
   try {
     deps.cdp.trackSessionTab?.(ctx.sessionId, target.tabId);
@@ -1040,7 +1050,8 @@ export async function handleFill(
         backendNodeId: node.backendNodeId,
       },
     );
-    if (!described.node || !isFillable(described.node)) {
+    kind = described.node ? fillTargetKind(described.node) : null;
+    if (!kind) {
       return rpcError(
         "invalid_params",
         "target_not_fillable",
@@ -1070,13 +1081,46 @@ export async function handleFill(
   if (isRpcError(objectIdOrErr)) return objectIdOrErr;
   const objectId = objectIdOrErr;
   const clearBefore = params.clear_before ?? true;
+  // A descendant of an editing host is filled through that host: the host
+  // takes focus, and the selection is confined to the target, so neither
+  // clearing nor typing reaches the rest of the host's content.
+  let hostObjectId: string | undefined;
 
   try {
     if (throwIfAborted(deps.signal)) {
       return { code: "cancelled", message: "fill aborted" };
     }
+    if (kind === "descendant") {
+      // Check the live target before focusing anything, so a target that is
+      // not editable is rejected without blurring the focused element.
+      const host = await nodeCdp.send<{
+        result?: { objectId?: string };
+        exceptionDetails?: unknown;
+      }>(target.tabId, "Runtime.callFunctionOn", {
+        objectId,
+        functionDeclaration: FILL_EDITING_HOST_FUNCTION,
+        returnByValue: false,
+      });
+      hostObjectId = host.result?.objectId;
+      if (throwIfAborted(deps.signal)) {
+        return { code: "cancelled", message: "fill aborted" };
+      }
+      if (host.exceptionDetails) {
+        return fillError("fill_failed", "fill editing host script failed");
+      }
+      if (!hostObjectId) {
+        return fillError(
+          "target_not_fillable",
+          "fill target is not editable or its input type is unsupported",
+        );
+      }
+    }
+    const focusTarget = hostObjectId
+      ? { objectId: hostObjectId }
+      : { backendNodeId: node.backendNodeId };
+    const hostArgument = hostObjectId ? { objectId: hostObjectId } : { value: null };
     try {
-      await nodeCdp.send(target.tabId, "DOM.focus", { backendNodeId: node.backendNodeId });
+      await nodeCdp.send(target.tabId, "DOM.focus", focusTarget);
     } catch (error) {
       // Chrome rejects DOM.focus for disabled controls, including inherited
       // fieldset state. Classify the live target before treating this as a
@@ -1107,13 +1151,13 @@ export async function handleFill(
       "Runtime.callFunctionOn",
       {
         objectId,
-        functionDeclaration: `function(value, clearBefore) {
+        functionDeclaration: `function(value, clearBefore, host) {
           const tag = this.tagName.toLowerCase();
           const native = tag === 'input' || tag === 'textarea';
           if (!(${FILL_EDITABLE_FUNCTION}).call(this)) return { reason: 'target_not_fillable', error: 'fill target is not editable or its input type is unsupported' };
-          if (this.getRootNode().activeElement !== this) return { reason: 'fill_focus_lost', error: 'fill target does not have focus' };
-          const before = clearBefore ? '' : (${FILL_VALUE_FUNCTION}).call(this);
-          let expected = before + value;
+          if (this.getRootNode().activeElement !== (host || this)) return { reason: 'fill_focus_lost', error: 'fill target does not have focus' };
+          const current = (${FILL_VALUE_FUNCTION}).call(this);
+          let expected = (clearBefore ? '' : current) + value;
           if (native) {
             // Use the browser's own value sanitization (e.g. textarea
             // line endings) without changing the live control.
@@ -1135,7 +1179,9 @@ export async function handleFill(
           } else {
             expected = expected.replace(/\\r\\n?/g, '\\n');
           }
-          if (clearBefore) {
+          // Inside an editing host the typed text replaces the selected
+          // contents of the target instead, unless nothing is typed.
+          if (clearBefore && (!host || value === '')) {
             if (native) {
               const proto = tag === 'textarea' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
               Object.getOwnPropertyDescriptor(proto, 'value').set.call(this, '');
@@ -1143,10 +1189,11 @@ export async function handleFill(
               this.textContent = '';
             }
             this.dispatchEvent(new Event('input', { bubbles: true }));
+            return { before: '', expected };
           }
-          return { before, expected };
+          return { before: current, expected };
         }`,
-        arguments: [{ value: params.value }, { value: clearBefore }],
+        arguments: [{ value: params.value }, { value: clearBefore }, hostArgument],
         returnByValue: true,
       },
     );
@@ -1166,19 +1213,26 @@ export async function handleFill(
     // A separate call runs after the clearing event's microtasks drain.
     // DOM focus works in background tabs. Use document.hasFocus() only to
     // detect deferred focus events, never to reject background input.
-    const checkReady = async (): Promise<FillReadiness | RpcError> => {
+    // `confined` also requires the selection to lie inside the target.
+    const checkReady = async (confined = false): Promise<FillReadiness | RpcError> => {
       const reply = await nodeCdp.send<FillScriptReply<FillReadiness>>(
         target.tabId,
         "Runtime.callFunctionOn",
         {
           objectId,
-          functionDeclaration: `function(before) {
+          functionDeclaration: `function(before, host, confined) {
             if (!(${FILL_EDITABLE_FUNCTION}).call(this) ||
                 (${FILL_VALUE_FUNCTION}).call(this) !== before) return 'fill_target_changed';
-            if (this.getRootNode().activeElement !== this) return 'fill_focus_lost';
+            const root = this.getRootNode();
+            if (root.activeElement !== (host || this)) return 'fill_focus_lost';
+            if (confined) {
+              const selection = root.getSelection ? root.getSelection() : this.ownerDocument.getSelection();
+              const range = selection && selection.rangeCount ? selection.getRangeAt(0) : null;
+              if (!range || !this.contains(range.startContainer) || !this.contains(range.endContainer)) return 'fill_focus_lost';
+            }
             return this.ownerDocument.hasFocus() ? 'ready' : 'background';
           }`,
-          arguments: [{ value: preparation.before }],
+          arguments: [{ value: preparation.before }, hostArgument, { value: confined }],
           returnByValue: true,
         },
       );
@@ -1204,7 +1258,7 @@ export async function handleFill(
     // Restore focus once only if clearing left this same target editable
     // and unchanged. Recheck after focus handlers have run.
     if (clearBefore && ready === "fill_focus_lost") {
-      await nodeCdp.send(target.tabId, "DOM.focus", { backendNodeId: node.backendNodeId });
+      await nodeCdp.send(target.tabId, "DOM.focus", focusTarget);
       if (throwIfAborted(deps.signal)) {
         return { code: "cancelled", message: "fill aborted" };
       }
@@ -1244,6 +1298,42 @@ export async function handleFill(
         return fillError(ready, "fill target changed or lost focus while positioning the caret");
       }
     }
+    if (hostObjectId && params.value !== "") {
+      // Select the target's contents to replace them, or put the caret at
+      // their end to append, after any focus handling above has run.
+      const selected = await nodeCdp.send<FillScriptReply<unknown>>(
+        target.tabId,
+        "Runtime.callFunctionOn",
+        {
+          objectId,
+          functionDeclaration: `function(clearBefore) {
+            const root = this.getRootNode();
+            const selection = root.getSelection ? root.getSelection() : this.ownerDocument.getSelection();
+            const range = this.ownerDocument.createRange();
+            range.selectNodeContents(this);
+            if (!clearBefore) range.collapse(false);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }`,
+          arguments: [{ value: clearBefore }],
+          returnByValue: true,
+        },
+      );
+      if (throwIfAborted(deps.signal)) {
+        return { code: "cancelled", message: "fill aborted" };
+      }
+      if (selected.exceptionDetails) {
+        return fillError("fill_failed", "fill selection script failed");
+      }
+      ready = await checkReady(true);
+      if (throwIfAborted(deps.signal)) {
+        return { code: "cancelled", message: "fill aborted" };
+      }
+      if (typeof ready !== "string") return ready;
+      if (ready !== "ready" && ready !== "background") {
+        return fillError(ready, "fill target changed or lost focus while selecting its contents");
+      }
+    }
     // CDP `Input.insertText` handles IME / multi-byte input out of the
     // box, much more reliably than per-key `dispatchKeyEvent`.
     if (params.value !== "") {
@@ -1317,6 +1407,11 @@ export async function handleFill(
     return fillError("fill_failed", err instanceof Error ? err.message : String(err));
   } finally {
     await nodeCdp.send(target.tabId, "Runtime.releaseObject", { objectId }).catch(() => undefined);
+    if (hostObjectId) {
+      await nodeCdp
+        .send(target.tabId, "Runtime.releaseObject", { objectId: hostObjectId })
+        .catch(() => undefined);
+    }
   }
 }
 
@@ -1750,5 +1845,5 @@ export async function handleSelect(
 export const __testing__ = {
   DEFAULT_TIMEOUT_MS,
   resolveBackendNode,
-  isFillable,
+  fillTargetKind,
 };

From e2fc4f762a1b168802bda89f9d4e9b582971f75a Mon Sep 17 00:00:00 2001
From: kevin9327 <5299031+kevin9327@users.noreply.github.com>
Date: Sun, 4 Oct 2026 19:12:06 +0900
Subject: [PATCH 3/5] fix(extension): keep an editor paragraph fill inside the
 target

Two cases from review could still change content outside the target:

- An empty target. Chrome moves a caret in an empty element out to a
  neighbouring text node before inserting, so filling an empty <p> (or
  one just cleared with fill("")) typed into a sibling. The target now
  gets a zero-width placeholder to type over, replacing Chrome's own
  empty-line <br> when that is all it holds, and a placeholder left by
  a fill that stops early is removed. An element holding only that <br>
  reads as empty rather than a newline.
- A value with line breaks. Typing a newline in an editing host splits
  the target into new paragraphs, which then fails verification after
  the page has changed. A descendant target now rejects such a value
  with fill_value_invalid before anything is focused or changed; the
  editing host itself still takes multiline values.

Adds real-browser regressions for empty targets (paragraph, paragraph
with <br>, span; replace and append), clear-then-refill, and multiline
rejection in foreground and background tabs.
---
 .../src/tools/__tests__/fill.browser.test.ts  | 56 +++++++++++++++
 apps/extension/src/tools/interaction.ts       | 69 +++++++++++++++++--
 2 files changed, 119 insertions(+), 6 deletions(-)

diff --git a/apps/extension/src/tools/__tests__/fill.browser.test.ts b/apps/extension/src/tools/__tests__/fill.browser.test.ts
index f7d34fac1..461f8a5a5 100644
--- a/apps/extension/src/tools/__tests__/fill.browser.test.ts
+++ b/apps/extension/src/tools/__tests__/fill.browser.test.ts
@@ -145,6 +145,62 @@ describe.skipIf(!process.env.BSK_CLICK_CHROME)("real browser fill of editor para
       });
     });
 
+    describe.each([
+      ["an empty paragraph", '<p id="target"></p>'],
+      ["an empty paragraph holding a break", '<p id="target"><br></p>'],
+      ["an empty span in a paragraph", '<p>a <span id="target"></span> b</p>'],
+    ])("targeting %s", (_name, target) => {
+      it.each([
+        ["replace", true],
+        ["append", false],
+      ])("types into the target, not a sibling (%s)", async (_how, clearBefore) => {
+        await withFillBrowser({ background, markup: editor(target) }, async (h) => {
+          await h.ref("document.querySelector('#target')");
+          expect(await h.fill("hello", clearBefore)).toMatchObject({ value_length: 5 });
+          expect(await h.evaluate("document.querySelector('#target').textContent")).toBe("hello");
+          expect(await h.evaluate("document.querySelector('#before').textContent")).toBe("first");
+          expect(await h.evaluate("document.querySelector('#after').textContent")).toBe("keep");
+          expect(await h.evaluate("document.querySelector('#host').textContent")).not.toContain(
+            "\u200B",
+          );
+        });
+      });
+    });
+
+    it("refills a paragraph it has just cleared", async () => {
+      await withFillBrowser({ background, markup: editor('<p id="target">old</p>') }, async (h) => {
+        await h.ref("document.querySelector('#target')");
+        expect(await h.fill("")).toMatchObject({ value_length: 0 });
+        expect(await h.fill("hello")).toMatchObject({ value_length: 5 });
+        expect(await h.evaluate(paragraphs)).toEqual(["first", "hello", "keep"]);
+        expect(await h.evaluate("document.querySelectorAll('#target').length")).toBe(1);
+      });
+    });
+
+    it.each([
+      ["a multiline replacement", "one\ntwo", true],
+      ["a multiline append", "one\ntwo", false],
+      ["a trailing newline", "hello\n", true],
+      ["a carriage return", "one\r\ntwo", true],
+    ])("rejects %s before changing the editor", async (_name, value, clearBefore) => {
+      await withFillBrowser({ background, markup: editor('<p id="target">old</p>') }, async (h) => {
+        const html = await h.evaluate("document.querySelector('#host').innerHTML");
+        await h.ref("document.querySelector('#target')");
+        expect(await h.fill(value, clearBefore)).toMatchObject({
+          code: "invalid_params",
+          data: { reason: "fill_value_invalid" },
+        });
+        expect(await h.evaluate("document.querySelector('#host').innerHTML")).toBe(html);
+      });
+    });
+
+    it("still fills a multiline value into the whole editing host", async () => {
+      await withFillBrowser({ background, markup: editor('<p id="target">old</p>') }, async (h) => {
+        await h.ref("document.querySelector('#host')");
+        expect(await h.fill("one\ntwo")).toMatchObject({ value_length: 7 });
+      });
+    });
+
     it("still replaces the whole editing host when it is the target", async () => {
       await withFillBrowser({ background, markup: editor('<p id="target">old</p>') }, async (h) => {
         await h.ref("document.querySelector('#host')");
diff --git a/apps/extension/src/tools/interaction.ts b/apps/extension/src/tools/interaction.ts
index 123e9e4f9..03dc8fb7e 100644
--- a/apps/extension/src/tools/interaction.ts
+++ b/apps/extension/src/tools/interaction.ts
@@ -1006,10 +1006,16 @@ const FILL_EDITING_HOST_FUNCTION = `function() {
   return host;
 }`;
 
+// Typed over in an empty editor element: a zero-width space.
+const FILL_PLACEHOLDER = "\u200B";
+
 // Chrome renders a trailing editable newline with an empty <div><br></div>.
 // innerText includes the padding break; it is not an extra typed character.
+// An editable element holding nothing but one <br> is Chrome's empty line
+// placeholder; its value is empty, not a newline.
 const FILL_VALUE_FUNCTION = `function() {
   if (!this.isContentEditable) return this.value;
+  if (this.textContent === '' && this.childNodes.length === 1 && this.firstChild.nodeName === 'BR') return '';
   const value = this.innerText;
   const tail = this.lastChild;
   const padding = tail && tail.nodeName === 'DIV' && tail.childNodes.length === 1 && tail.firstChild.nodeName === 'BR';
@@ -1085,6 +1091,8 @@ export async function handleFill(
   // takes focus, and the selection is confined to the target, so neither
   // clearing nor typing reaches the rest of the host's content.
   let hostObjectId: string | undefined;
+  // Whether an empty target was given a placeholder character to type over.
+  let placeholderUsed = false;
 
   try {
     if (throwIfAborted(deps.signal)) {
@@ -1114,6 +1122,16 @@ export async function handleFill(
           "fill target is not editable or its input type is unsupported",
         );
       }
+      // Typing a line break inside an editing host makes the editor split
+      // the target into new elements (paragraphs, list items), so the text
+      // cannot stay in, or be verified against, this one element. Reject it
+      // before anything is focused or changed.
+      if (/[\r\n]/.test(params.value)) {
+        return fillError(
+          "fill_value_invalid",
+          "a value with line breaks cannot be filled into one element inside an editor; fill the editing host, or each line's element separately",
+        );
+      }
     }
     const focusTarget = hostObjectId
       ? { objectId: hostObjectId }
@@ -1214,7 +1232,10 @@ export async function handleFill(
     // DOM focus works in background tabs. Use document.hasFocus() only to
     // detect deferred focus events, never to reject background input.
     // `confined` also requires the selection to lie inside the target.
-    const checkReady = async (confined = false): Promise<FillReadiness | RpcError> => {
+    const checkReady = async (
+      confined = false,
+      before = preparation.before,
+    ): Promise<FillReadiness | RpcError> => {
       const reply = await nodeCdp.send<FillScriptReply<FillReadiness>>(
         target.tabId,
         "Runtime.callFunctionOn",
@@ -1232,7 +1253,7 @@ export async function handleFill(
             }
             return this.ownerDocument.hasFocus() ? 'ready' : 'background';
           }`,
-          arguments: [{ value: preparation.before }, hostArgument, { value: confined }],
+          arguments: [{ value: before }, hostArgument, { value: confined }],
           returnByValue: true,
         },
       );
@@ -1301,7 +1322,10 @@ export async function handleFill(
     if (hostObjectId && params.value !== "") {
       // Select the target's contents to replace them, or put the caret at
       // their end to append, after any focus handling above has run.
-      const selected = await nodeCdp.send<FillScriptReply<unknown>>(
+      // An empty target gets a placeholder character to type over: Chrome
+      // moves a caret in an empty element out to a neighbouring text node
+      // before inserting, so the text would land in a sibling.
+      const selected = await nodeCdp.send<FillScriptReply<{ placeholder: boolean; value: string }>>(
         target.tabId,
         "Runtime.callFunctionOn",
         {
@@ -1310,10 +1334,22 @@ export async function handleFill(
             const root = this.getRootNode();
             const selection = root.getSelection ? root.getSelection() : this.ownerDocument.getSelection();
             const range = this.ownerDocument.createRange();
-            range.selectNodeContents(this);
-            if (!clearBefore) range.collapse(false);
+            let placeholder = false;
+            if (this.textContent === '') {
+              // Chrome's own empty-line <br> is replaced, as typing would.
+              if (this.childNodes.length === 1 && this.firstChild.nodeName === 'BR') this.firstChild.remove();
+              const mark = this.ownerDocument.createTextNode('${FILL_PLACEHOLDER}');
+              this.insertBefore(mark, this.firstChild);
+              range.setStart(mark, 0);
+              range.setEnd(mark, mark.length);
+              placeholder = true;
+            } else {
+              range.selectNodeContents(this);
+              if (!clearBefore) range.collapse(false);
+            }
             selection.removeAllRanges();
             selection.addRange(range);
+            return { placeholder, value: (${FILL_VALUE_FUNCTION}).call(this) };
           }`,
           arguments: [{ value: clearBefore }],
           returnByValue: true,
@@ -1325,7 +1361,13 @@ export async function handleFill(
       if (selected.exceptionDetails) {
         return fillError("fill_failed", "fill selection script failed");
       }
-      ready = await checkReady(true);
+      placeholderUsed = selected.result?.value?.placeholder === true;
+      const placed = selected.result?.value?.value;
+      if (typeof placed !== "string") {
+        return fillError("fill_failed", "fill selection returned an unexpected result");
+      }
+      // The placeholder is part of the target's value until it is typed over.
+      ready = await checkReady(true, placed);
       if (throwIfAborted(deps.signal)) {
         return { code: "cancelled", message: "fill aborted" };
       }
@@ -1406,6 +1448,21 @@ export async function handleFill(
   } catch (err) {
     return fillError("fill_failed", err instanceof Error ? err.message : String(err));
   } finally {
+    if (placeholderUsed) {
+      // Remove a placeholder left behind when the fill stopped before
+      // typing over it; after a successful fill there is none.
+      await nodeCdp
+        .send(target.tabId, "Runtime.callFunctionOn", {
+          objectId,
+          functionDeclaration: `function() {
+            for (const child of [...this.childNodes]) {
+              if (child.nodeType === Node.TEXT_NODE && child.data === '${FILL_PLACEHOLDER}') child.remove();
+            }
+          }`,
+          returnByValue: true,
+        })
+        .catch(() => undefined);
+    }
     await nodeCdp.send(target.tabId, "Runtime.releaseObject", { objectId }).catch(() => undefined);
     if (hostObjectId) {
       await nodeCdp

From 36f2a7a8d88f47d5a6c8f12185c2cafa18ce9482 Mon Sep 17 00:00:00 2001
From: drakezhang <drakezhang@tencent.com>
Date: Tue, 6 Oct 2026 19:13:55 +0800
Subject: [PATCH 4/5] fix(extension): restrict fill to editable controls and
 editor roots

Reject editor descendants before scrolling, focusing, or changing content.
Remove temporary placeholders and verify root focus and caret placement.

Add shared browser evals for replacement, append, clearing, rejection,
cancellation, and editor discovery.
---
 .github/workflows/ci.yml                      |   2 +-
 .../src/tools/__tests__/fill.browser.test.ts  | 649 +++++++++++++-----
 .../src/tools/__tests__/fill.test.ts          |  64 +-
 .../src/tools/__tests__/interaction.test.ts   |   5 +-
 apps/extension/src/tools/interaction.ts       | 390 ++++-------
 .../skill/references/interaction-details.md   |  14 +
 crates/bsk-cli/src/cli/mod.rs                 |   2 +-
 crates/bsk-cli/src/cli/render_error.rs        |   2 +-
 evals/browser/README.md                       |  11 +
 evals/browser/README.zh-CN.md                 |  10 +
 .../regression/fill-editor-roots/README.md    |  45 ++
 .../fill-editor-roots.case.json               | 164 +++++
 .../fill-editor-roots.fixture.mjs             | 162 +++++
 evals/browser/lib/bsk-runner.mjs              |  43 +-
 evals/browser/lib/case-loader.mjs             |  19 +-
 evals/browser/schemas/case.schema.json        |  18 +-
 evals/browser/tests/eval.test.mjs             |  10 +-
 evals/browser/tests/fill-workflow.test.mjs    | 110 +++
 packages/dsh-plugin-browserskill/src/tools.ts |   2 +-
 packages/vom/src/__tests__/render.test.ts     |  20 +
 packages/vom/src/render.ts                    |   4 +-
 21 files changed, 1240 insertions(+), 506 deletions(-)
 create mode 100644 evals/browser/cases/regression/fill-editor-roots/README.md
 create mode 100644 evals/browser/cases/regression/fill-editor-roots/fill-editor-roots.case.json
 create mode 100644 evals/browser/cases/regression/fill-editor-roots/fill-editor-roots.fixture.mjs
 create mode 100644 evals/browser/tests/fill-workflow.test.mjs

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 163f47dfa..fcef84789 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -245,7 +245,7 @@ jobs:
       - name: Run fill browser regression
         working-directory: apps/extension
         env:
-          BSK_CLICK_CHROME: google-chrome
+          BSK_FILL_CHROME: google-chrome
         run: pnpm exec vitest run src/tools/__tests__/fill.browser.test.ts
 
   node-scripts:
diff --git a/apps/extension/src/tools/__tests__/fill.browser.test.ts b/apps/extension/src/tools/__tests__/fill.browser.test.ts
index 461f8a5a5..10e98eb73 100644
--- a/apps/extension/src/tools/__tests__/fill.browser.test.ts
+++ b/apps/extension/src/tools/__tests__/fill.browser.test.ts
@@ -1,8 +1,10 @@
 // @vitest-environment node
-// Opt in with BSK_CLICK_CHROME=/path/to/chrome; each test owns its browser/profile.
-import { describe, expect, it } from "vitest";
+// Opt in with BSK_FILL_CHROME=/path/to/chrome; the suite owns its browser/profile and each test gets a fresh tab.
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import type { CdpFrame } from "@/browser-driver/frame-graph";
 import { SessionManager } from "@/session-manager/manager";
 import { handleFill } from "../interaction";
+import { handleObserve } from "../observation";
 import type { CdpRunner } from "../shared";
 
 type Send = <T = Record<string, unknown>>(
@@ -11,227 +13,496 @@ type Send = <T = Record<string, unknown>>(
   sessionId?: string,
 ) => Promise<T>;
 
+let browserSend: Send;
+let closeBrowser: (() => void) | undefined;
+let browserRun: Promise<void> | undefined;
+
+if (process.env.BSK_FILL_CHROME) {
+  beforeAll(async () => {
+    const { withChrome } = await import(
+      new URL(
+        "../../../../../evals/browser/cases/regression/snapshot-coordinates/chrome.mjs",
+        import.meta.url,
+      ).href
+    );
+    const ready = Promise.withResolvers<Send>();
+    const closed = Promise.withResolvers<void>();
+    closeBrowser = () => closed.resolve();
+    browserRun = withChrome(
+      { executable: process.env.BSK_FILL_CHROME, deviceScale: 1, zoom: 1 },
+      async (send: Send) => {
+        ready.resolve(send);
+        await closed.promise;
+      },
+    );
+    browserRun!.catch(ready.reject);
+    browserSend = await ready.promise;
+  }, 30_000);
+  afterAll(async () => {
+    closeBrowser?.();
+    await browserRun;
+  }, 30_000);
+}
+
 async function withFillBrowser(
   { background, markup }: { background: boolean; markup: string },
   run: (h: {
     evaluate: (expression: string) => Promise<unknown>;
     ref: (expression: string) => Promise<void>;
-    fill: (value: string, clearBefore?: boolean) => ReturnType<typeof handleFill>;
+    fill: (
+      value: string,
+      clearBefore?: boolean,
+      signal?: AbortSignal,
+      selector?: string,
+      ref?: string,
+    ) => ReturnType<typeof handleFill>;
+    afterCommand: (hook: (method: string, params?: object) => void | Promise<void>) => void;
+    calls: string[];
+    observe: () => ReturnType<typeof handleObserve>;
   }) => Promise<void>,
 ) {
-  // Reuse the existing isolated Chrome launcher; no new browser dependency.
-  const { withChrome } = await import(
-    new URL(
-      "../../../../../evals/browser/cases/regression/snapshot-coordinates/chrome.mjs",
-      import.meta.url,
-    ).href
-  );
-  await withChrome(
-    { executable: process.env.BSK_CLICK_CHROME, deviceScale: 1, zoom: 1 },
-    async (send: Send) => {
-      // A background target stays behind the launcher's first page.
-      const { targetId } = await send<{ targetId: string }>("Target.createTarget", {
-        url: "about:blank",
-        background,
-      });
-      const { sessionId } = await send<{ sessionId: string }>("Target.attachToTarget", {
-        targetId,
-        flatten: true,
-      });
-      if (!background) await send("Page.bringToFront", {}, sessionId);
-      const evaluate = async (expression: string) => {
-        const reply = await send<{ result: { value: unknown }; exceptionDetails?: unknown }>(
+  const send = browserSend;
+  // Closing each target restores the launcher's blank foreground page.
+  const { targetId } = await send<{ targetId: string }>("Target.createTarget", {
+    url: "about:blank",
+    background,
+  });
+  try {
+    const { sessionId } = await send<{ sessionId: string }>("Target.attachToTarget", {
+      targetId,
+      flatten: true,
+    });
+    if (!background) await send("Page.bringToFront", {}, sessionId);
+    const evaluate = async (expression: string) => {
+      const reply = await send<{ result: { value: unknown }; exceptionDetails?: unknown }>(
+        "Runtime.evaluate",
+        { expression, returnByValue: true },
+        sessionId,
+      );
+      expect(reply.exceptionDetails).toBeUndefined();
+      return reply.result.value;
+    };
+    await evaluate(`document.body.innerHTML = ${JSON.stringify(markup)}`);
+    expect(await evaluate("document.hasFocus()")).toBe(!background);
+    const manager = new SessionManager({
+      agentWindow: {
+        create: async () => ({ windowId: 100, initialTabIds: [] }),
+        remove: async () => {},
+        ensureActiveTab: async () => 4,
+      },
+    });
+    const ctx = await manager.start("aa11");
+    const calls: string[] = [];
+    let afterCommand: ((method: string, params?: object) => void | Promise<void>) | undefined;
+    const cdp: CdpRunner = {
+      send: async (_tabId, method, params) => {
+        calls.push(method);
+        const result = await send(method, params, sessionId);
+        await afterCommand?.(method, params);
+        return result as never;
+      },
+    };
+    cdp.sendToTarget = (_target, method, params) => cdp.send(4, method, params);
+    cdp.getAttachmentId = () => sessionId;
+    cdp.getFrameGraph = async () => {
+      type FrameTree = { frame: { id: string }; childFrames?: FrameTree[] };
+      const { frameTree } = await send<{ frameTree: FrameTree }>(
+        "Page.getFrameTree",
+        {},
+        sessionId,
+      );
+      const frames: CdpFrame[] = [];
+      const visit = async (tree: FrameTree, parentFrameId?: string) => {
+        const owner = parentFrameId
+          ? await send<{ backendNodeId: number }>(
+              "DOM.getFrameOwner",
+              { frameId: tree.frame.id },
+              sessionId,
+            )
+          : undefined;
+        frames.push({
+          frameId: tree.frame.id,
+          parentFrameId,
+          target: { tabId: 4 },
+          ownerBackendNodeId: owner?.backendNodeId,
+        });
+        for (const child of tree.childFrames ?? []) await visit(child, tree.frame.id);
+      };
+      await visit(frameTree);
+      return { rootFrameId: frameTree.frame.id, frames };
+    };
+    const deps = {
+      cdp,
+      tabsApi: {
+        get: async (id: number) => ({ id, windowId: 100, active: !background }) as chrome.tabs.Tab,
+        query: async () => [{ id: 4, windowId: 100, active: !background } as chrome.tabs.Tab],
+      },
+    };
+    await run({
+      evaluate,
+      calls,
+      observe: () =>
+        handleObserve(manager, { session_id: "aa11" }, { ...deps, conditionalSurfaceProbe: false }),
+      afterCommand: (hook) => {
+        afterCommand = hook;
+      },
+      ref: async (expression) => {
+        const { result } = await send<{ result: { objectId: string } }>(
           "Runtime.evaluate",
-          { expression, returnByValue: true },
+          { expression },
           sessionId,
         );
-        expect(reply.exceptionDetails).toBeUndefined();
-        return reply.result.value;
-      };
-      await evaluate(`document.body.innerHTML = ${JSON.stringify(markup)}`);
-      expect(await evaluate("document.hasFocus()")).toBe(!background);
-      const manager = new SessionManager({
-        agentWindow: {
-          create: async () => ({ windowId: 100, initialTabIds: [] }),
-          remove: async () => {},
-          ensureActiveTab: async () => 4,
-        },
-      });
-      const ctx = await manager.start("aa11");
-      const cdp: CdpRunner = {
-        send: async (_tabId, method, params) => (await send(method, params, sessionId)) as never,
-      };
-      const deps = {
-        cdp,
-        tabsApi: {
-          get: async (id: number) =>
-            ({ id, windowId: 100, active: !background }) as chrome.tabs.Tab,
-          query: async () => [{ id: 4, windowId: 100, active: !background } as chrome.tabs.Tab],
-        },
-      };
-      await run({
-        evaluate,
-        ref: async (expression) => {
-          const { result } = await send<{ result: { objectId: string } }>(
-            "Runtime.evaluate",
-            { expression },
-            sessionId,
-          );
-          const { node } = await send<{ node: { backendNodeId: number } }>(
-            "DOM.describeNode",
-            { objectId: result.objectId },
-            sessionId,
-          );
-          await send("Runtime.releaseObject", { objectId: result.objectId }, sessionId);
-          ctx.refStore.set("e1", node.backendNodeId, { tabId: 4 });
-        },
-        fill: (value, clearBefore) =>
-          handleFill(
-            manager,
-            { session_id: "aa11", ref: "e1", value, clear_before: clearBefore },
-            deps,
-          ),
-      });
-    },
-  );
+        const { node } = await send<{ node: { backendNodeId: number } }>(
+          "DOM.describeNode",
+          { objectId: result.objectId },
+          sessionId,
+        );
+        await send("Runtime.releaseObject", { objectId: result.objectId }, sessionId);
+        ctx.refStore.set("e1", node.backendNodeId, { tabId: 4 });
+      },
+      fill: (value, clearBefore, signal, selector, ref = "e1") =>
+        handleFill(
+          manager,
+          {
+            session_id: "aa11",
+            ...(selector ? { selector } : { ref }),
+            value,
+            clear_before: clearBefore,
+          },
+          { ...deps, signal },
+        ),
+    });
+  } finally {
+    await send("Target.closeTarget", { targetId });
+  }
 }
 
-const editor = (target: string) =>
-  `<div id="host" contenteditable="true"><p id="before">first</p>${target}<p id="after">keep</p></div>`;
-const paragraphs = `[...document.querySelectorAll('#host > p')].map((p) => p.textContent)`;
+const { acceptedTargets, rejectedTargets, editorMarkup } = await import(
+  new URL(
+    "../../../../../evals/browser/cases/regression/fill-editor-roots/fill-editor-roots.fixture.mjs",
+    import.meta.url,
+  ).href
+);
+
+type AcceptedTarget = { name: string; markup: string; steps: [string, boolean, string, string?][] };
+type RejectedTarget = { name: string; markup: string };
+const guard = '<input id="guard" value="untouched"><p id="outside">outside text</p>';
+const outsideTarget = `(() => {
+  const body = document.body.cloneNode(true);
+  body.querySelector('#target').replaceWith(document.createComment('fill target'));
+  return body.innerHTML;
+})()`;
+
+const unchangedState = `JSON.stringify({
+  html: document.body.innerHTML,
+  focus: document.activeElement.id,
+  selection: [document.querySelector('#guard').selectionStart, document.querySelector('#guard').selectionEnd],
+  scroll: [scrollX, scrollY], events: window.fillEvents
+})`;
 
-describe.skipIf(!process.env.BSK_CLICK_CHROME)("real browser fill of editor paragraphs", () => {
+describe.skipIf(!process.env.BSK_FILL_CHROME)("native controls and editing hosts", () => {
   describe.each([
     ["foreground", false],
     ["background", true],
-  ])("in a %s tab", (_mode, background) => {
-    describe.each([
-      ["a paragraph", '<p id="target">old</p>'],
-      ["a focusable paragraph", '<p id="target" tabindex="0">old</p>'],
-      ["a span in a paragraph", '<p>a <span id="target">old</span> b</p>'],
-    ])("targeting %s", (_name, target) => {
-      it("replaces only the target's text", async () => {
-        await withFillBrowser({ background, markup: editor(target) }, async (h) => {
-          await h.ref("document.querySelector('#target')");
-          expect(await h.fill("hello")).toMatchObject({ value_length: 5 });
-          expect(await h.evaluate("document.querySelector('#target').textContent")).toBe("hello");
-          expect(await h.evaluate(paragraphs)).toEqual(
-            target.startsWith("<p>") ? ["first", "a hello b", "keep"] : ["first", "hello", "keep"],
+  ] as const)("%s", (_name, background) => {
+    it.each(acceptedTargets as AcceptedTarget[])("fills $name", async ({ markup, steps }) => {
+      await withFillBrowser({ background, markup: guard + markup }, async (h) => {
+        await h.ref("document.querySelector('#target')");
+        const outsideBefore = await h.evaluate(outsideTarget);
+        for (const [value, clearBefore, expected, domText] of steps) {
+          const result = await h.fill(value, clearBefore);
+          expect(
+            result,
+            JSON.stringify({
+              value,
+              state: await h.evaluate(
+                "({ html: document.querySelector('#target').innerHTML, text: document.querySelector('#target').innerText, content: document.querySelector('#target').textContent })",
+              ),
+            }),
+          ).toMatchObject({ value_length: expected.length });
+          expect(await h.evaluate(outsideTarget)).toBe(outsideBefore);
+          // innerText exposes line breaks introduced by browser editing, while
+          // textContent preserves invisible characters that cleanup must not erase.
+          const actual = await h.evaluate(`(() => {
+            const t = document.querySelector('#target');
+            if (t.matches('input,textarea')) return t.value;
+            const selection = document.getSelection();
+            selection.selectAllChildren(t);
+            const selected = selection.toString();
+            selection.removeAllRanges();
+            return { text: t.innerText, content: t.textContent, selected };
+          })()`);
+          if (typeof actual === "string") expect(actual).toBe(expected);
+          else {
+            const { content, selected } = actual as { content: string; selected: string };
+            if (domText !== undefined) expect(content).toBe(domText);
+            else expect(selected).toBe(expected);
+            if (expected === "\u200b") expect(content).toBe(expected);
+          }
+          expect(await h.evaluate("document.querySelector('#guard').value")).toBe("untouched");
+          expect(await h.evaluate("document.querySelector('#outside').textContent")).toBe(
+            "outside text",
           );
-        });
+        }
       });
+    }, 30_000);
 
-      it("appends to the target's text", async () => {
-        await withFillBrowser({ background, markup: editor(target) }, async (h) => {
+    it.each(rejectedTargets as RejectedTarget[])("rejects $name without side effects", async ({
+      markup,
+    }) => {
+      await withFillBrowser(
+        { background, markup: guard + '<div style="height:1800px"></div>' + markup },
+        async (h) => {
           await h.ref("document.querySelector('#target')");
-          expect(await h.fill("hello", false)).toMatchObject({ value_length: 8 });
-          expect(await h.evaluate("document.querySelector('#target').textContent")).toBe(
-            "oldhello",
-          );
-          expect(await h.evaluate(paragraphs)).toEqual(
-            target.startsWith("<p>")
-              ? ["first", "a oldhello b", "keep"]
-              : ["first", "oldhello", "keep"],
-          );
-        });
-      });
-    });
-
-    it("clears the target when the value is empty", async () => {
-      await withFillBrowser({ background, markup: editor('<p id="target">old</p>') }, async (h) => {
-        await h.ref("document.querySelector('#target')");
-        expect(await h.fill("")).toMatchObject({ value_length: 0 });
-        expect(await h.evaluate(paragraphs)).toEqual(["first", "", "keep"]);
-      });
-    });
+          await h.evaluate(`document.querySelector('#guard').focus(); document.querySelector('#guard').setSelectionRange(1, 3);
+          window.fillEvents = []; for (const type of ['focus', 'blur', 'input', 'change']) document.addEventListener(type, e => window.fillEvents.push([type, e.target.id]), true);`);
+          const before = await h.evaluate(unchangedState);
+          for (const [value, clearBefore] of [
+            ["hello", true],
+            ["", true],
+            ["hello", false],
+          ] as const) {
+            expect(await h.fill(value, clearBefore)).toMatchObject({
+              code: "invalid_params",
+              data: { reason: "target_not_fillable" },
+            });
+            expect(await h.evaluate(unchangedState)).toBe(before);
+          }
+          expect(h.calls).not.toContain("DOM.focus");
+          expect(h.calls).not.toContain("DOM.scrollIntoViewIfNeeded");
+          expect(h.calls).not.toContain("Input.insertText");
+        },
+      );
+    }, 30_000);
 
-    describe.each([
-      ["an empty paragraph", '<p id="target"></p>'],
-      ["an empty paragraph holding a break", '<p id="target"><br></p>'],
-      ["an empty span in a paragraph", '<p>a <span id="target"></span> b</p>'],
-    ])("targeting %s", (_name, target) => {
-      it.each([
-        ["replace", true],
-        ["append", false],
-      ])("types into the target, not a sibling (%s)", async (_how, clearBefore) => {
-        await withFillBrowser({ background, markup: editor(target) }, async (h) => {
+    it.each([
+      ['<input id="target" type="number" value="12">', "invalid"],
+      ['<input id="target" maxlength="3" value="old">', "longer"],
+    ])(
+      "rejects invalid values before focus: %s",
+      async (markup, value) => {
+        await withFillBrowser({ background, markup: guard + markup }, async (h) => {
           await h.ref("document.querySelector('#target')");
-          expect(await h.fill("hello", clearBefore)).toMatchObject({ value_length: 5 });
-          expect(await h.evaluate("document.querySelector('#target').textContent")).toBe("hello");
-          expect(await h.evaluate("document.querySelector('#before').textContent")).toBe("first");
-          expect(await h.evaluate("document.querySelector('#after').textContent")).toBe("keep");
-          expect(await h.evaluate("document.querySelector('#host').textContent")).not.toContain(
-            "\u200B",
-          );
+          await h.evaluate("document.querySelector('#guard').focus(); window.fillEvents = []");
+          const before = await h.evaluate(unchangedState);
+          expect(await h.fill(value)).toMatchObject({
+            code: "invalid_params",
+            data: { reason: "fill_value_invalid" },
+          });
+          expect(await h.evaluate(unchangedState)).toBe(before);
+          expect(h.calls).not.toContain("DOM.focus");
         });
-      });
-    });
+      },
+      30_000,
+    );
 
-    it("refills a paragraph it has just cleared", async () => {
-      await withFillBrowser({ background, markup: editor('<p id="target">old</p>') }, async (h) => {
-        await h.ref("document.querySelector('#target')");
-        expect(await h.fill("")).toMatchObject({ value_length: 0 });
-        expect(await h.fill("hello")).toMatchObject({ value_length: 5 });
-        expect(await h.evaluate(paragraphs)).toEqual(["first", "hello", "keep"]);
-        expect(await h.evaluate("document.querySelectorAll('#target').length")).toBe(1);
-      });
-    });
-
-    it.each([
-      ["a multiline replacement", "one\ntwo", true],
-      ["a multiline append", "one\ntwo", false],
-      ["a trailing newline", "hello\n", true],
-      ["a carriage return", "one\r\ntwo", true],
-    ])("rejects %s before changing the editor", async (_name, value, clearBefore) => {
-      await withFillBrowser({ background, markup: editor('<p id="target">old</p>') }, async (h) => {
-        const html = await h.evaluate("document.querySelector('#host').innerHTML");
-        await h.ref("document.querySelector('#target')");
-        expect(await h.fill(value, clearBefore)).toMatchObject({
-          code: "invalid_params",
-          data: { reason: "fill_value_invalid" },
+    it("uses the same contract for selectors", async () => {
+      await withFillBrowser({ background, markup: editorMarkup }, async (h) => {
+        expect(await h.fill("hello", true, undefined, "#paragraph")).toMatchObject({
+          data: { reason: "target_not_fillable" },
+        });
+        expect(await h.fill("hello", true, undefined, "#editor")).toMatchObject({
+          value_length: 5,
         });
-        expect(await h.evaluate("document.querySelector('#host').innerHTML")).toBe(html);
+        expect(await h.evaluate("document.querySelector('#editor').textContent")).toBe("hello");
       });
-    });
+    }, 30_000);
+  });
+});
 
-    it("still fills a multiline value into the whole editing host", async () => {
-      await withFillBrowser({ background, markup: editor('<p id="target">old</p>') }, async (h) => {
-        await h.ref("document.querySelector('#host')");
-        expect(await h.fill("one\ntwo")).toMatchObject({ value_length: 7 });
-      });
-    });
+describe.skipIf(!process.env.BSK_FILL_CHROME)("fill lifecycle and discoverability", () => {
+  it.each([
+    "",
+    "true",
+    "plaintext-only",
+  ])("fills the editor ref from observation: %s", async (attribute) => {
+    await withFillBrowser(
+      {
+        background: false,
+        markup: editorMarkup.replace(
+          "contenteditable aria-label",
+          `contenteditable="${attribute}" aria-label`,
+        ),
+      },
+      async (h) => {
+        const observation = await h.observe();
+        expect(observation).not.toHaveProperty("code");
+        if (!("text" in observation)) throw new Error("observation failed");
+        const ref = observation.text.match(/(@e\d+) textbox "Message editor"/)?.[1];
+        expect(ref, observation.text).toBeDefined();
+        expect(await h.fill("from observation", true, undefined, undefined, ref)).toMatchObject({
+          value_length: 16,
+        });
+        expect(await h.evaluate("document.querySelector('#editor').textContent")).toBe(
+          "from observation",
+        );
+      },
+    );
+  }, 30_000);
 
-    it("still replaces the whole editing host when it is the target", async () => {
-      await withFillBrowser({ background, markup: editor('<p id="target">old</p>') }, async (h) => {
-        await h.ref("document.querySelector('#host')");
+  it.each(["iframe", "shadow"])("fills roots and rejects descendants in %s", async (kind) => {
+    await withFillBrowser(
+      { background: false, markup: guard + '<div id="container"></div>' },
+      async (h) => {
+        const markup =
+          '<div id="editor" contenteditable="true">old<p id="paragraph">keep</p></div>';
+        const root =
+          kind === "iframe"
+            ? "document.querySelector('iframe').contentDocument"
+            : "document.querySelector('#container').shadowRoot";
+        await h.evaluate(
+          kind === "iframe"
+            ? `(() => { const f = document.createElement('iframe'); document.body.append(f); f.contentDocument.body.innerHTML = ${JSON.stringify(markup)}; })()`
+            : `document.querySelector('#container').attachShadow({mode:'open'}).innerHTML = ${JSON.stringify(markup)}`,
+        );
+        await h.ref(`${root}.querySelector('#paragraph')`);
+        const before = await h.evaluate(`${root}.querySelector('#editor').innerHTML`);
+        expect(await h.fill("wrong")).toMatchObject({ data: { reason: "target_not_fillable" } });
+        expect(await h.evaluate(`${root}.querySelector('#editor').innerHTML`)).toBe(before);
+        await h.ref(`${root}.querySelector('#editor')`);
         expect(await h.fill("hello")).toMatchObject({ value_length: 5 });
-        expect(await h.evaluate("document.querySelector('#host').innerText")).toBe("hello");
-      });
-    });
+        expect(await h.fill("!", false)).toMatchObject({ value_length: 6 });
+        expect(await h.evaluate(`${root}.querySelector('#editor').textContent`)).toBe("hello!");
+      },
+    );
+  }, 30_000);
 
-    it("rejects a focusable element outside any editor without moving focus", async () => {
+  it.each([
+    ["DOM.resolveNode", "old"],
+    ["DOM.scrollIntoViewIfNeeded", "old"],
+    ["DOM.focus", "old"],
+    ["cleared", ""],
+    ["Input.insertText", "hello"],
+    ["notified", "hello"],
+    ["verified", "hello"],
+  ])(
+    "cancels after %s without leaving temporary content",
+    async (phase, expected) => {
       await withFillBrowser(
-        {
-          background,
-          markup: '<input id="field"><div id="target" tabindex="0">text</div>',
-        },
+        { background: false, markup: guard + '<div id="target" contenteditable="true">old</div>' },
         async (h) => {
-          await h.evaluate(`(() => {
-            const field = document.querySelector('#field');
-            window.blurs = 0;
-            field.addEventListener('blur', () => window.blurs++);
-            field.focus();
-          })()`);
           await h.ref("document.querySelector('#target')");
-          expect(await h.fill("hello")).toMatchObject({
-            code: "invalid_params",
-            data: { reason: "target_not_fillable" },
+          const controller = new AbortController();
+          h.afterCommand((method, params) => {
+            const declaration =
+              (params as { functionDeclaration?: string })?.functionDeclaration ?? "";
+            const matched =
+              method === phase ||
+              (phase === "cleared" && declaration.includes("this.textContent = ''")) ||
+              (phase === "notified" && declaration.includes("new Event('change'")) ||
+              (phase === "verified" && declaration.startsWith("function(expected)"));
+            if (matched) controller.abort();
+          });
+          expect(await h.fill("hello", true, controller.signal)).toMatchObject({
+            code: "cancelled",
           });
-          expect(await h.evaluate("document.activeElement.id")).toBe("field");
-          expect(await h.evaluate("window.blurs")).toBe(0);
-          expect(await h.evaluate("document.querySelector('#target').textContent")).toBe("text");
+          expect(await h.evaluate("document.querySelector('#target').textContent")).toBe(expected);
+          expect(await h.evaluate("document.querySelector('#guard').value")).toBe("untouched");
+          expect(h.calls.filter((method) => method === "Runtime.releaseObject")).toHaveLength(1);
+          if (expected !== "hello") expect(h.calls).not.toContain("Input.insertText");
         },
       );
-    });
-  });
+    },
+    30_000,
+  );
+
+  it.each([
+    "focus",
+    "input",
+    "change",
+  ])("does not report success when a %s handler replaces the editor", async (event) => {
+    await withFillBrowser(
+      { background: false, markup: guard + '<div id="target" contenteditable="true">old</div>' },
+      async (h) => {
+        await h.ref("document.querySelector('#target')");
+        await h.evaluate(`document.querySelector('#target').addEventListener(${JSON.stringify(event)}, event => {
+        const replacement = event.target.cloneNode(true); replacement.textContent = 'replacement'; event.target.replaceWith(replacement);
+      }, {once:true})`);
+        expect(await h.fill("hello")).toHaveProperty("code");
+        expect(await h.evaluate("document.querySelector('#target').textContent")).toBe(
+          "replacement",
+        );
+        expect(await h.evaluate("document.querySelector('#guard').value")).toBe("untouched");
+        if (event !== "change") expect(h.calls).not.toContain("Input.insertText");
+      },
+    );
+  }, 30_000);
+
+  it("rechecks a root that becomes a descendant during focus", async () => {
+    await withFillBrowser(
+      {
+        background: false,
+        markup: guard + '<div id="wrapper"><div id="target" contenteditable="true">old</div></div>',
+      },
+      async (h) => {
+        await h.ref("document.querySelector('#target')");
+        await h.evaluate(
+          "document.querySelector('#target').addEventListener('focus', () => document.querySelector('#wrapper').contentEditable = 'true', {once:true})",
+        );
+        expect(await h.fill("hello")).toMatchObject({ data: { reason: "target_not_fillable" } });
+        expect(await h.evaluate("document.querySelector('#target').textContent")).toBe("old");
+        expect(h.calls).not.toContain("Input.insertText");
+      },
+    );
+  }, 30_000);
+});
+
+describe.skipIf(!process.env.BSK_FILL_CHROME)("fill focus changes", () => {
+  it.each([
+    false,
+    true,
+  ])("stops when focus changes after root caret placement (background=%s)", async (background) => {
+    await withFillBrowser(
+      { background, markup: guard + '<div id="target" contenteditable="true">old</div>' },
+      async (h) => {
+        await h.ref("document.querySelector('#target')");
+        h.afterCommand(async (method, params) => {
+          const script = params as {
+            functionDeclaration?: string;
+            arguments?: { value: unknown }[];
+          };
+          if (
+            method === "Runtime.callFunctionOn" &&
+            script.functionDeclaration?.startsWith("function(before, placeCaret") &&
+            script.arguments?.[1].value === true
+          ) {
+            await h.evaluate("document.querySelector('#guard').focus()");
+          }
+        });
+        expect(await h.fill("hello", false)).toMatchObject({ data: { reason: "fill_focus_lost" } });
+        expect(await h.evaluate("document.querySelector('#guard').value")).toBe("untouched");
+        expect(await h.evaluate("document.querySelector('#target').textContent")).toBe("old");
+        expect(h.calls).not.toContain("Input.insertText");
+      },
+    );
+  }, 30_000);
+});
+
+describe.skipIf(!process.env.BSK_FILL_CHROME)("fill caret validation", () => {
+  it("stops if page code moves the caret within the same editor", async () => {
+    await withFillBrowser(
+      { background: false, markup: guard + '<div id="target" contenteditable="true">old</div>' },
+      async (h) => {
+        await h.ref("document.querySelector('#target')");
+        h.afterCommand(async (method, params) => {
+          const script = params as {
+            functionDeclaration?: string;
+            arguments?: { value: unknown }[];
+          };
+          if (
+            method === "Runtime.callFunctionOn" &&
+            script.functionDeclaration?.startsWith("function(before, placeCaret") &&
+            script.arguments?.[1].value === true
+          ) {
+            await h.evaluate(
+              "document.getSelection().collapse(document.querySelector('#target'), 0)",
+            );
+          }
+        });
+        expect(await h.fill("hello", false)).toMatchObject({ data: { reason: "fill_focus_lost" } });
+        expect(await h.evaluate("document.querySelector('#target').textContent")).toBe("old");
+        expect(h.calls).not.toContain("Input.insertText");
+      },
+    );
+  }, 30_000);
 });
diff --git a/apps/extension/src/tools/__tests__/fill.test.ts b/apps/extension/src/tools/__tests__/fill.test.ts
index 3cef1074f..112cfe5fa 100644
--- a/apps/extension/src/tools/__tests__/fill.test.ts
+++ b/apps/extension/src/tools/__tests__/fill.test.ts
@@ -4,10 +4,8 @@ import type { CdpRunner } from "@/tools/shared";
 import { handleFill } from "../interaction";
 
 interface ScriptParams {
-  objectId?: string;
   functionDeclaration: string;
-  arguments?: Array<{ value?: unknown; objectId?: string }>;
-  returnByValue?: boolean;
+  arguments?: Array<{ value: unknown }>;
 }
 
 async function setup(markup = '<input value="old">') {
@@ -22,23 +20,17 @@ async function setup(markup = '<input value="old">') {
   });
   const ctx = await manager.start("aa11");
   ctx.refStore.set("e1", 12, { tabId: 4 });
-  // Remote object handles, as Runtime.callFunctionOn hands them out.
-  const objects = new Map<string, Element>([["fill-target", element]]);
   const script = vi.fn(async (params: ScriptParams): Promise<unknown> => {
     try {
       const fn = new Function(`return (${params.functionDeclaration})`)();
-      const value = await fn.apply(
-        objects.get(params.objectId ?? "fill-target"),
-        (params.arguments ?? []).map((arg) =>
-          arg.objectId === undefined ? arg.value : objects.get(arg.objectId),
-        ),
-      );
-      if (params.returnByValue === false && value instanceof Element) {
-        const objectId = `object-${objects.size}`;
-        objects.set(objectId, value);
-        return { result: { objectId } };
-      }
-      return { result: { value } };
+      return {
+        result: {
+          value: await fn.apply(
+            element,
+            (params.arguments ?? []).map((arg) => arg.value),
+          ),
+        },
+      };
     } catch {
       return { exceptionDetails: { text: "test page script failed" } };
     }
@@ -75,11 +67,9 @@ async function setup(markup = '<input value="old">') {
         };
       case "DOM.scrollIntoViewIfNeeded":
         return {};
-      case "DOM.focus": {
-        const objectId = (params as { objectId?: string }).objectId;
-        ((objectId ? objects.get(objectId) : element) as HTMLElement).focus();
+      case "DOM.focus":
+        element.focus();
         return {};
-      }
       case "DOM.resolveNode":
         return { object: { objectId: "fill-target" } };
       case "Runtime.callFunctionOn":
@@ -331,11 +321,11 @@ describe("fill result verification", () => {
     const result = await h.fill();
     expect(result).toMatchObject({ code: "cdp_failed", data: { reason: "fill_failed" } });
     expect(JSON.stringify(result)).not.toContain("page secret");
-    if (phase <= 3) expect(h.insert).not.toHaveBeenCalled();
+    if (phase <= 4) expect(h.insert).not.toHaveBeenCalled();
     expect(h.release).toHaveBeenCalledOnce();
   });
 
-  it.each([1, 2, 3, 5])("rejects missing results at phase %s", async (phase) => {
+  it.each([1, 2, 3, 4, 6])("rejects missing results at phase %s", async (phase) => {
     const h = await setup();
     vi.spyOn(document, "hasFocus").mockReturnValue(false);
     const run = h.script.getMockImplementation()!;
@@ -344,7 +334,7 @@ describe("fill result verification", () => {
       ++count === phase ? { result: { type: "undefined" } } : run(params),
     );
     expect(await h.fill()).toMatchObject({ code: "cdp_failed" });
-    if (phase <= 3) expect(h.insert).not.toHaveBeenCalled();
+    if (phase <= 4) expect(h.insert).not.toHaveBeenCalled();
   });
 
   it.each(["input", "change"])("checks state after nested microtasks from %s", async (event) => {
@@ -404,29 +394,7 @@ describe("fill result verification", () => {
       h.element.value = normalized;
     });
     expect(await h.fill(requested)).toMatchObject({ value_length: normalized.length });
-  });
-
-  it("fills a contenteditable descendant that has no contenteditable attribute", async () => {
-    const h = await setup('<p tabindex="0"></p>');
-    let innerText = "";
-    Object.defineProperty(h.element, "isContentEditable", { get: () => true });
-    Object.defineProperty(h.element, "innerText", { get: () => innerText });
-    h.insert.mockImplementation(async () => {
-      h.element.textContent = "hello";
-      innerText = "hello";
-    });
-    expect(await h.fill("hello")).toMatchObject({ value_length: 5 });
-    expect(h.insert).toHaveBeenCalledOnce();
-  });
-
-  it("rejects an element that is not editable before focusing it", async () => {
-    const h = await setup('<div tabindex="0">text</div>');
-    expect(await h.fill("hello")).toMatchObject({
-      code: "invalid_params",
-      data: { reason: "target_not_fillable" },
-    });
-    expect(h.send.mock.calls.map(([, method]) => method)).not.toContain("DOM.focus");
-    expect(h.insert).not.toHaveBeenCalled();
+    expect(h.insert).toHaveBeenCalledWith(requested.replace(/\r\n?/g, "\n"));
   });
 
   it("does not count an editable padding break as an extra typed character", async () => {
@@ -571,7 +539,7 @@ describe("fill result verification", () => {
     const controller = new AbortController();
     h.insert.mockImplementation(async () => controller.abort());
     expect(await h.fill("hello", true, controller.signal)).toMatchObject({ code: "cancelled" });
-    expect(h.script).toHaveBeenCalledTimes(2);
+    expect(h.script).toHaveBeenCalledTimes(3);
     expect(h.release).toHaveBeenCalledOnce();
   });
 
diff --git a/apps/extension/src/tools/__tests__/interaction.test.ts b/apps/extension/src/tools/__tests__/interaction.test.ts
index 64d266744..986a99d4e 100644
--- a/apps/extension/src/tools/__tests__/interaction.test.ts
+++ b/apps/extension/src/tools/__tests__/interaction.test.ts
@@ -1364,7 +1364,7 @@ describe("handleFill", () => {
     expect(insert?.params).toEqual({ text: "hello" });
     // Foreground replacement needs no extra caret-positioning round trip.
     const callFns = fake.sent.filter((c) => c.method === "Runtime.callFunctionOn");
-    expect(callFns).toHaveLength(4);
+    expect(callFns).toHaveLength(5);
   });
 
   it("passes clear_before=false to preparation and verifies the result", async () => {
@@ -1468,6 +1468,9 @@ describe("handleFill", () => {
         return {};
       },
       "DOM.focus": () => ({}),
+      "DOM.resolveNode": () => ({ object: { objectId: "fill-target" } }),
+      "Runtime.callFunctionOn": successfulFillScript,
+      "Runtime.releaseObject": () => ({}),
     });
 
     const res = await handleFill(
diff --git a/apps/extension/src/tools/interaction.ts b/apps/extension/src/tools/interaction.ts
index 03dc8fb7e..70e842016 100644
--- a/apps/extension/src/tools/interaction.ts
+++ b/apps/extension/src/tools/interaction.ts
@@ -900,47 +900,22 @@ interface DescribedNode {
   attributes?: string[];
 }
 
-const NEVER_FILLABLE_TAGS = new Set([
-  "BUTTON",
-  "SELECT",
-  "OPTION",
-  "OPTGROUP",
-  "SCRIPT",
-  "STYLE",
-  "LINK",
-  "META",
-  "IMG",
-  "VIDEO",
-  "AUDIO",
-  "CANVAS",
-  "IFRAME",
-  "OBJECT",
-  "EMBED",
-  "SVG",
-  "BR",
-  "HR",
-]);
-
 /**
- * Decide how a node can receive `tool.fill`. Native `<input>` /
- * `<textarea>` and an element with its own contenteditable attribute
- * are filled as themselves. Any other element may be a descendant of an
- * editing host: `DOM.describeNode` only reports this node's attributes,
- * so a `<p>` inside `[contenteditable]` is not rejected here, and the
- * live `isContentEditable` check decides before anything is focused.
+ * Cheap candidate filter for `tool.fill`. The live preflight also checks
+ * control state and requires a contenteditable target to be an editing host.
  * Exported via `__testing__` for unit coverage.
  */
-function fillTargetKind(node: DescribedNode): "self" | "descendant" | null {
+function isFillable(node: DescribedNode): boolean {
   const tag = (node.nodeName ?? "").toUpperCase();
-  if (tag === "INPUT" || tag === "TEXTAREA") return "self";
+  if (tag === "INPUT" || tag === "TEXTAREA") return true;
   const attrs = node.attributes ?? [];
   for (let i = 0; i + 1 < attrs.length; i += 2) {
     if (attrs[i].toLowerCase() === "contenteditable") {
       const value = attrs[i + 1].toLowerCase();
-      return value === "" || value === "true" || value === "plaintext-only" ? "self" : null;
+      return value === "" || value === "true" || value === "plaintext-only";
     }
   }
-  return NEVER_FILLABLE_TAGS.has(tag) ? null : "descendant";
+  return false;
 }
 
 type SelectMutationResult =
@@ -993,33 +968,68 @@ const FILL_EDITABLE_FUNCTION = `function() {
   const tag = this.tagName.toLowerCase();
   const supported = tag === 'input'
     ? ['text', 'search', 'tel', 'url', 'email', 'password', 'number'].includes(this.type)
-    : tag === 'textarea' || this.isContentEditable;
+    : tag === 'textarea' || (this.isContentEditable && !this.parentElement?.isContentEditable);
   return this.isConnected && supported && !this.readOnly && !this.matches(':disabled');
 }`;
 
-// The editing host of an editable target: the outermost editable element
-// around it, which takes focus for it. null when the target is not editable.
-const FILL_EDITING_HOST_FUNCTION = `function() {
-  if (!(${FILL_EDITABLE_FUNCTION}).call(this)) return null;
-  let host = this;
-  while (host.parentElement && host.parentElement.isContentEditable) host = host.parentElement;
-  return host;
+// Read plain text without counting Chrome's empty-line <br> as a character.
+// insertText uses direct DIV line wrappers in rich editors and text nodes in
+// plaintext editors. Preserve literal whitespace instead of losing it through
+// innerText's CSS collapsing. Other rich structures retain their rendered text.
+const FILL_VALUE_FUNCTION = `function() {
+  if (this.matches('input,textarea')) return this.value;
+  const rendered = this.innerText;
+  const collapses = ['normal', 'nowrap'].includes(getComputedStyle(this).whiteSpace);
+  const children = [...this.childNodes];
+  const lineWrappers = this.children.length > 0 && children.every((child, index) =>
+    (index === 0 && child.nodeType === Node.TEXT_NODE) ||
+    (child.nodeName === 'DIV' && getComputedStyle(child).display === 'block' &&
+      [...child.children].every(el => el.nodeName === 'BR')));
+  let value;
+  if (lineWrappers) {
+    value = children.map(child => child.nodeType === Node.TEXT_NODE ? child.data :
+      child.childNodes.length === 1 && child.firstChild.nodeName === 'BR' ? '' : child.innerText).join('\\n');
+  } else if (this.children.length === 0 && rendered !== '') {
+    value = collapses ? this.textContent.replace(/^[ \\t\\r\\n]+|[ \\t\\r\\n]+$/g, '') : this.textContent;
+  } else {
+    value = rendered === '\\n' && this.textContent === '' ? '' : rendered;
+  }
+  // Chrome substitutes NBSP at line edges in whitespace-collapsing editors.
+  // Only normalize the read value; never rewrite the user's DOM characters.
+  return collapses ? value.replace(/\\u00a0/g, ' ') : value;
 }`;
 
-// Typed over in an empty editor element: a zero-width space.
-const FILL_PLACEHOLDER = "\u200B";
-
-// Chrome renders a trailing editable newline with an empty <div><br></div>.
-// innerText includes the padding break; it is not an extra typed character.
-// An editable element holding nothing but one <br> is Chrome's empty line
-// placeholder; its value is empty, not a newline.
-const FILL_VALUE_FUNCTION = `function() {
-  if (!this.isContentEditable) return this.value;
-  if (this.textContent === '' && this.childNodes.length === 1 && this.firstChild.nodeName === 'BR') return '';
-  const value = this.innerText;
-  const tail = this.lastChild;
-  const padding = tail && tail.nodeName === 'DIV' && tail.childNodes.length === 1 && tail.firstChild.nodeName === 'BR';
-  return padding && value.endsWith('\\n\\n') ? value.slice(0, -1) : value;
+// Read-only validation shared by preflight and the final check before clearing.
+// Recompute after focus handlers: the target or its constraints may have changed.
+const FILL_PREPARATION_FUNCTION = `function(value, clearBefore) {
+  const tag = this.tagName.toLowerCase();
+  const native = tag === 'input' || tag === 'textarea';
+  if (!(${FILL_EDITABLE_FUNCTION}).call(this)) return { reason: 'target_not_fillable', error: 'fill requires an enabled text input, textarea, or contenteditable editing host; target the editor root rather than an internal paragraph or span' };
+  const before = clearBefore ? '' : (${FILL_VALUE_FUNCTION}).call(this);
+  let expected = before + value;
+  if (native) {
+    // Use the browser's own value sanitization (e.g. textarea
+    // line endings) without changing the live control.
+    const normalizer = this.ownerDocument.createElement(tag);
+    if (tag === 'input') {
+      normalizer.type = this.type;
+      normalizer.multiple = this.multiple;
+    }
+    // insertText treats line breaks in a single-line input as spaces.
+    if (tag === 'input') expected = expected.replace(/\\r\\n|\\r|\\n/g, ' ');
+    normalizer.value = expected;
+    if (expected !== '' && normalizer.value === '' && this.type === 'number') {
+      return { reason: 'fill_value_invalid', error: 'fill value is not valid for a number input' };
+    }
+    expected = normalizer.value;
+    if (this.type !== 'number' && this.maxLength >= 0 && expected.length > this.maxLength) {
+      return { reason: 'fill_value_invalid', error: 'fill value exceeds the target maxlength' };
+    }
+  } else {
+    expected = expected.replace(/\\r\\n?/g, '\\n');
+    if (['normal', 'nowrap'].includes(getComputedStyle(this).whiteSpace)) expected = expected.replace(/\\u00a0/g, ' ');
+  }
+  return { before, expected };
 }`;
 
 export async function handleFill(
@@ -1045,7 +1055,7 @@ export async function handleFill(
   const node = await resolveBackendNode(deps.cdp, ctx, target, params, "fill");
   if (isRpcError(node)) return node;
   const nodeCdp = cdpRunnerForTarget(deps.cdp, node.cdpTarget);
-  let kind: "self" | "descendant" | null = null;
+  let native = false;
 
   try {
     deps.cdp.trackSessionTab?.(ctx.sessionId, target.tabId);
@@ -1056,25 +1066,14 @@ export async function handleFill(
         backendNodeId: node.backendNodeId,
       },
     );
-    kind = described.node ? fillTargetKind(described.node) : null;
-    if (!kind) {
+    native = ["INPUT", "TEXTAREA"].includes(described.node?.nodeName?.toUpperCase() ?? "");
+    if (!described.node || !isFillable(described.node)) {
       return rpcError(
         "invalid_params",
         "target_not_fillable",
-        `element ${described.node?.nodeName ?? "?"} not fillable (need input/textarea/contenteditable)`,
+        `element ${described.node?.nodeName ?? "?"} not fillable; choose a text input, textarea, or the contenteditable editor root`,
       );
     }
-    const scrollErr = await scrollElementAndFramesIntoView(
-      deps.cdp,
-      target.tabId,
-      node.cdpTarget,
-      node.backendNodeId,
-      node.frameId,
-    );
-    if (scrollErr) return scrollErr;
-    if (throwIfAborted(deps.signal)) {
-      return { code: "cancelled", message: "fill aborted" };
-    }
   } catch (err) {
     return fillError("fill_failed", err instanceof Error ? err.message : String(err));
   }
@@ -1087,58 +1086,43 @@ export async function handleFill(
   if (isRpcError(objectIdOrErr)) return objectIdOrErr;
   const objectId = objectIdOrErr;
   const clearBefore = params.clear_before ?? true;
-  // A descendant of an editing host is filled through that host: the host
-  // takes focus, and the selection is confined to the target, so neither
-  // clearing nor typing reaches the rest of the host's content.
-  let hostObjectId: string | undefined;
-  // Whether an empty target was given a placeholder character to type over.
-  let placeholderUsed = false;
 
   try {
     if (throwIfAborted(deps.signal)) {
       return { code: "cancelled", message: "fill aborted" };
     }
-    if (kind === "descendant") {
-      // Check the live target before focusing anything, so a target that is
-      // not editable is rejected without blurring the focused element.
-      const host = await nodeCdp.send<{
-        result?: { objectId?: string };
-        exceptionDetails?: unknown;
-      }>(target.tabId, "Runtime.callFunctionOn", {
+    const preflight = await nodeCdp.send<FillScriptReply<FillPreparation>>(
+      target.tabId,
+      "Runtime.callFunctionOn",
+      {
         objectId,
-        functionDeclaration: FILL_EDITING_HOST_FUNCTION,
-        returnByValue: false,
-      });
-      hostObjectId = host.result?.objectId;
-      if (throwIfAborted(deps.signal)) {
-        return { code: "cancelled", message: "fill aborted" };
-      }
-      if (host.exceptionDetails) {
-        return fillError("fill_failed", "fill editing host script failed");
-      }
-      if (!hostObjectId) {
-        return fillError(
-          "target_not_fillable",
-          "fill target is not editable or its input type is unsupported",
-        );
-      }
-      // Typing a line break inside an editing host makes the editor split
-      // the target into new elements (paragraphs, list items), so the text
-      // cannot stay in, or be verified against, this one element. Reject it
-      // before anything is focused or changed.
-      if (/[\r\n]/.test(params.value)) {
-        return fillError(
-          "fill_value_invalid",
-          "a value with line breaks cannot be filled into one element inside an editor; fill the editing host, or each line's element separately",
-        );
-      }
+        functionDeclaration: FILL_PREPARATION_FUNCTION,
+        arguments: [{ value: params.value }, { value: clearBefore }],
+        returnByValue: true,
+      },
+    );
+    if (throwIfAborted(deps.signal)) return { code: "cancelled", message: "fill aborted" };
+    if (preflight.exceptionDetails || !preflight.result?.value) {
+      return fillError("fill_failed", "fill preflight script failed");
+    }
+    const plan = preflight.result.value;
+    if ("error" in plan) return fillError(plan.reason, plan.error);
+    if (typeof plan.before !== "string" || typeof plan.expected !== "string") {
+      return fillError("fill_failed", "fill preflight returned an unexpected result");
+    }
+    const scrollErr = await scrollElementAndFramesIntoView(
+      deps.cdp,
+      target.tabId,
+      node.cdpTarget,
+      node.backendNodeId,
+      node.frameId,
+    );
+    if (scrollErr) return scrollErr;
+    if (throwIfAborted(deps.signal)) {
+      return { code: "cancelled", message: "fill aborted" };
     }
-    const focusTarget = hostObjectId
-      ? { objectId: hostObjectId }
-      : { backendNodeId: node.backendNodeId };
-    const hostArgument = hostObjectId ? { objectId: hostObjectId } : { value: null };
     try {
-      await nodeCdp.send(target.tabId, "DOM.focus", focusTarget);
+      await nodeCdp.send(target.tabId, "DOM.focus", { backendNodeId: node.backendNodeId });
     } catch (error) {
       // Chrome rejects DOM.focus for disabled controls, including inherited
       // fieldset state. Classify the live target before treating this as a
@@ -1169,49 +1153,23 @@ export async function handleFill(
       "Runtime.callFunctionOn",
       {
         objectId,
-        functionDeclaration: `function(value, clearBefore, host) {
+        functionDeclaration: `function(value, clearBefore) {
+          const preparation = (${FILL_PREPARATION_FUNCTION}).call(this, value, clearBefore);
+          if ('error' in preparation) return preparation;
+          if (this.getRootNode().activeElement !== this) return { reason: 'fill_focus_lost', error: 'fill target does not have focus' };
           const tag = this.tagName.toLowerCase();
-          const native = tag === 'input' || tag === 'textarea';
-          if (!(${FILL_EDITABLE_FUNCTION}).call(this)) return { reason: 'target_not_fillable', error: 'fill target is not editable or its input type is unsupported' };
-          if (this.getRootNode().activeElement !== (host || this)) return { reason: 'fill_focus_lost', error: 'fill target does not have focus' };
-          const current = (${FILL_VALUE_FUNCTION}).call(this);
-          let expected = (clearBefore ? '' : current) + value;
-          if (native) {
-            // Use the browser's own value sanitization (e.g. textarea
-            // line endings) without changing the live control.
-            const normalizer = this.ownerDocument.createElement(tag);
-            if (tag === 'input') {
-              normalizer.type = this.type;
-              normalizer.multiple = this.multiple;
-            }
-            // insertText treats line breaks in a single-line input as spaces.
-            if (tag === 'input') expected = expected.replace(/\\r\\n|\\r|\\n/g, ' ');
-            normalizer.value = expected;
-            if (expected !== '' && normalizer.value === '' && this.type === 'number') {
-              return { reason: 'fill_value_invalid', error: 'fill value is not valid for a number input' };
-            }
-            expected = normalizer.value;
-            if (this.type !== 'number' && this.maxLength >= 0 && expected.length > this.maxLength) {
-              return { reason: 'fill_value_invalid', error: 'fill value exceeds the target maxlength' };
-            }
-          } else {
-            expected = expected.replace(/\\r\\n?/g, '\\n');
-          }
-          // Inside an editing host the typed text replaces the selected
-          // contents of the target instead, unless nothing is typed.
-          if (clearBefore && (!host || value === '')) {
-            if (native) {
+          if (clearBefore) {
+            if (tag === 'input' || tag === 'textarea') {
               const proto = tag === 'textarea' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
               Object.getOwnPropertyDescriptor(proto, 'value').set.call(this, '');
             } else {
               this.textContent = '';
             }
             this.dispatchEvent(new Event('input', { bubbles: true }));
-            return { before: '', expected };
           }
-          return { before: current, expected };
+          return preparation;
         }`,
-        arguments: [{ value: params.value }, { value: clearBefore }, hostArgument],
+        arguments: [{ value: params.value }, { value: clearBefore }],
         returnByValue: true,
       },
     );
@@ -1231,29 +1189,35 @@ export async function handleFill(
     // A separate call runs after the clearing event's microtasks drain.
     // DOM focus works in background tabs. Use document.hasFocus() only to
     // detect deferred focus events, never to reject background input.
-    // `confined` also requires the selection to lie inside the target.
     const checkReady = async (
-      confined = false,
-      before = preparation.before,
+      placeCaret = false,
+      verifyCaret = false,
     ): Promise<FillReadiness | RpcError> => {
       const reply = await nodeCdp.send<FillScriptReply<FillReadiness>>(
         target.tabId,
         "Runtime.callFunctionOn",
         {
           objectId,
-          functionDeclaration: `function(before, host, confined) {
+          functionDeclaration: `function(before, placeCaret, verifyCaret) {
             if (!(${FILL_EDITABLE_FUNCTION}).call(this) ||
                 (${FILL_VALUE_FUNCTION}).call(this) !== before) return 'fill_target_changed';
-            const root = this.getRootNode();
-            if (root.activeElement !== (host || this)) return 'fill_focus_lost';
-            if (confined) {
-              const selection = root.getSelection ? root.getSelection() : this.ownerDocument.getSelection();
-              const range = selection && selection.rangeCount ? selection.getRangeAt(0) : null;
-              if (!range || !this.contains(range.startContainer) || !this.contains(range.endContainer)) return 'fill_focus_lost';
+            if (this.getRootNode().activeElement !== this) return 'fill_focus_lost';
+            if (verifyCaret) {
+              const selection = this.ownerDocument.getSelection();
+              if (!selection || !selection.isCollapsed || selection.anchorNode !== this ||
+                  selection.anchorOffset !== this.childNodes.length) return 'fill_focus_lost';
+            }
+            if (placeCaret) {
+              const selection = this.ownerDocument.getSelection();
+              const range = this.ownerDocument.createRange();
+              range.selectNodeContents(this);
+              range.collapse(false);
+              selection.removeAllRanges();
+              selection.addRange(range);
             }
             return this.ownerDocument.hasFocus() ? 'ready' : 'background';
           }`,
-          arguments: [{ value: before }, hostArgument, { value: confined }],
+          arguments: [{ value: preparation.before }, { value: placeCaret }, { value: verifyCaret }],
           returnByValue: true,
         },
       );
@@ -1279,7 +1243,7 @@ export async function handleFill(
     // Restore focus once only if clearing left this same target editable
     // and unchanged. Recheck after focus handlers have run.
     if (clearBefore && ready === "fill_focus_lost") {
-      await nodeCdp.send(target.tabId, "DOM.focus", focusTarget);
+      await nodeCdp.send(target.tabId, "DOM.focus", { backendNodeId: node.backendNodeId });
       if (throwIfAborted(deps.signal)) {
         return { code: "cancelled", message: "fill aborted" };
       }
@@ -1293,15 +1257,14 @@ export async function handleFill(
       return fillError(ready, "fill target changed or lost focus before typing");
     }
     if (params.value !== "" && (!clearBefore || ready === "background")) {
-      // Native editing commands also support number/email inputs, whose
-      // selection APIs cannot set a caret, and multiline contenteditables.
-      // Also do this for background replacement: CDP input focuses the
-      // renderer, delivering deferred focus events before it inserts text.
-      // Use a command-only event so this does not invoke an End shortcut.
+      // Native commands position number/email carets without selection APIs.
+      // For editors, only flush deferred background focus here: the document
+      // end command can escape a nested editing host. Place its range below.
+      // Neither event carries an End key that could invoke a page shortcut.
       try {
         await deps.cdp.send(target.tabId, "Input.dispatchKeyEvent", {
           type: "rawKeyDown",
-          commands: ["moveToEndOfDocument"],
+          commands: native ? ["moveToEndOfDocument"] : [],
         });
       } finally {
         await deps.cdp.send(target.tabId, "Input.dispatchKeyEvent", { type: "keyUp" });
@@ -1309,77 +1272,30 @@ export async function handleFill(
       if (throwIfAborted(deps.signal)) {
         return { code: "cancelled", message: "fill aborted" };
       }
-      // Focus and key handlers can change the target or move focus too.
-      ready = await checkReady();
-      if (throwIfAborted(deps.signal)) {
-        return { code: "cancelled", message: "fill aborted" };
-      }
-      if (typeof ready !== "string") return ready;
-      if (ready !== "ready" && ready !== "background") {
-        return fillError(ready, "fill target changed or lost focus while positioning the caret");
-      }
     }
-    if (hostObjectId && params.value !== "") {
-      // Select the target's contents to replace them, or put the caret at
-      // their end to append, after any focus handling above has run.
-      // An empty target gets a placeholder character to type over: Chrome
-      // moves a caret in an empty element out to a neighbouring text node
-      // before inserting, so the text would land in a sibling.
-      const selected = await nodeCdp.send<FillScriptReply<{ placeholder: boolean; value: string }>>(
-        target.tabId,
-        "Runtime.callFunctionOn",
-        {
-          objectId,
-          functionDeclaration: `function(clearBefore) {
-            const root = this.getRootNode();
-            const selection = root.getSelection ? root.getSelection() : this.ownerDocument.getSelection();
-            const range = this.ownerDocument.createRange();
-            let placeholder = false;
-            if (this.textContent === '') {
-              // Chrome's own empty-line <br> is replaced, as typing would.
-              if (this.childNodes.length === 1 && this.firstChild.nodeName === 'BR') this.firstChild.remove();
-              const mark = this.ownerDocument.createTextNode('${FILL_PLACEHOLDER}');
-              this.insertBefore(mark, this.firstChild);
-              range.setStart(mark, 0);
-              range.setEnd(mark, mark.length);
-              placeholder = true;
-            } else {
-              range.selectNodeContents(this);
-              if (!clearBefore) range.collapse(false);
-            }
-            selection.removeAllRanges();
-            selection.addRange(range);
-            return { placeholder, value: (${FILL_VALUE_FUNCTION}).call(this) };
-          }`,
-          arguments: [{ value: clearBefore }],
-          returnByValue: true,
-        },
-      );
-      if (throwIfAborted(deps.signal)) {
-        return { code: "cancelled", message: "fill aborted" };
-      }
-      if (selected.exceptionDetails) {
-        return fillError("fill_failed", "fill selection script failed");
-      }
-      placeholderUsed = selected.result?.value?.placeholder === true;
-      const placed = selected.result?.value?.value;
-      if (typeof placed !== "string") {
-        return fillError("fill_failed", "fill selection returned an unexpected result");
-      }
-      // The placeholder is part of the target's value until it is typed over.
-      ready = await checkReady(true, placed);
-      if (throwIfAborted(deps.signal)) {
-        return { code: "cancelled", message: "fill aborted" };
+    if (params.value !== "" && (!native || !clearBefore || ready === "background")) {
+      // Recheck after deferred focus handlers, then place the caret only in
+      // this editing host. Empty hosts need no temporary DOM characters.
+      ready = await checkReady(!native);
+      if (throwIfAborted(deps.signal)) return { code: "cancelled", message: "fill aborted" };
+      if (!native && (ready === "ready" || ready === "background")) {
+        // Selection changes can run page handlers after the placement script.
+        ready = await checkReady(false, true);
       }
+      if (throwIfAborted(deps.signal)) return { code: "cancelled", message: "fill aborted" };
       if (typeof ready !== "string") return ready;
       if (ready !== "ready" && ready !== "background") {
-        return fillError(ready, "fill target changed or lost focus while selecting its contents");
+        return fillError(ready, "fill target changed or lost focus while positioning the caret");
       }
     }
     // CDP `Input.insertText` handles IME / multi-byte input out of the
     // box, much more reliably than per-key `dispatchKeyEvent`.
     if (params.value !== "") {
-      await deps.cdp.send(target.tabId, "Input.insertText", { text: params.value });
+      // Normalize the actual input as well as the expected value: older Chrome
+      // versions retain CR in editors or turn CRLF into two textarea breaks.
+      await deps.cdp.send(target.tabId, "Input.insertText", {
+        text: params.value.replace(/\r\n?/g, "\n"),
+      });
     }
     if (throwIfAborted(deps.signal)) {
       return { code: "cancelled", message: "fill aborted" };
@@ -1448,27 +1364,7 @@ export async function handleFill(
   } catch (err) {
     return fillError("fill_failed", err instanceof Error ? err.message : String(err));
   } finally {
-    if (placeholderUsed) {
-      // Remove a placeholder left behind when the fill stopped before
-      // typing over it; after a successful fill there is none.
-      await nodeCdp
-        .send(target.tabId, "Runtime.callFunctionOn", {
-          objectId,
-          functionDeclaration: `function() {
-            for (const child of [...this.childNodes]) {
-              if (child.nodeType === Node.TEXT_NODE && child.data === '${FILL_PLACEHOLDER}') child.remove();
-            }
-          }`,
-          returnByValue: true,
-        })
-        .catch(() => undefined);
-    }
     await nodeCdp.send(target.tabId, "Runtime.releaseObject", { objectId }).catch(() => undefined);
-    if (hostObjectId) {
-      await nodeCdp
-        .send(target.tabId, "Runtime.releaseObject", { objectId: hostObjectId })
-        .catch(() => undefined);
-    }
   }
 }
 
@@ -1902,5 +1798,5 @@ export async function handleSelect(
 export const __testing__ = {
   DEFAULT_TIMEOUT_MS,
   resolveBackendNode,
-  fillTargetKind,
+  isFillable,
 };
diff --git a/crates/bsk-cli/skill/references/interaction-details.md b/crates/bsk-cli/skill/references/interaction-details.md
index 273c76e44..772085e37 100644
--- a/crates/bsk-cli/skill/references/interaction-details.md
+++ b/crates/bsk-cli/skill/references/interaction-details.md
@@ -12,6 +12,20 @@
   scroll distance. An optional target is scrolled into view first; without one,
   input lands at the viewport centre. Observe to check the page's response.
 
+### Filling text
+
+`fill` supports enabled, editable text inputs, textareas, and contenteditable
+editor roots. Target the whole editing host, not an internal paragraph or span,
+even if that child has `tabindex` or repeats `contenteditable`. Unsupported
+targets are rejected without focusing or changing them; the tool never promotes
+a child target to its parent editor.
+
+By default, fill replaces all text in the target. `--no-clear` appends at its end.
+An empty value clears the target unless `--no-clear` is set. Use the editor root's
+ref from a fresh observation. After a mid-operation failure or cancellation,
+observe before retrying: earlier input events or edits may already have occurred.
+Rich-text framework state and undo behavior require application-specific checks.
+
 ### Large observations
 
 There is no default token cap. With `observe --max-tokens <n>`, follow a returned
diff --git a/crates/bsk-cli/src/cli/mod.rs b/crates/bsk-cli/src/cli/mod.rs
index 32afe05da..71277cc01 100644
--- a/crates/bsk-cli/src/cli/mod.rs
+++ b/crates/bsk-cli/src/cli/mod.rs
@@ -197,7 +197,7 @@ pub enum Command {
     /// Remove focus from a snapshot ref or CSS selector.
     Blur(BlurArgs),
 
-    /// Fill an input / textarea / contenteditable.
+    /// Fill a text input, textarea, or contenteditable editor root.
     Fill(FillArgs),
 
     /// Dispatch a keyboard key combo.
diff --git a/crates/bsk-cli/src/cli/render_error.rs b/crates/bsk-cli/src/cli/render_error.rs
index 1063ff584..9b7dd816f 100644
--- a/crates/bsk-cli/src/cli/render_error.rs
+++ b/crates/bsk-cli/src/cli/render_error.rs
@@ -370,7 +370,7 @@ pub fn info_for_error(code: ErrorCode, data: Option<&serde_json::Value>) -> Rend
         (ErrorCode::InvalidParams, reason::TARGET_NOT_FILLABLE) => RenderInfo {
             summary: "target element is not fillable",
             hint: Some(
-                "observe the page and choose an enabled, editable text input, textarea, or contenteditable; use the appropriate interaction for other control types",
+                "observe the page and choose an enabled, editable text input, textarea, or contenteditable editor root; internal paragraphs and spans are not fill targets",
             ),
             exit_code: base.exit_code,
         },
diff --git a/evals/browser/README.md b/evals/browser/README.md
index f571b4e62..8291851c7 100644
--- a/evals/browser/README.md
+++ b/evals/browser/README.md
@@ -257,3 +257,14 @@ the case and expected baseline in the same reviewed change.
 The direct smoke lane covers 25 of 28 operations. `tabs.borrow`, `tabs.return`, and
 `assist.request-help` stay manual because they require a real user tab or human interaction and
 would make the default suite destructive or non-deterministic.
+
+### Fill regression workflow options
+
+A `fill` step accepts any string value, including `""` for clearing. Set
+`"noClear": true` to append through `--no-clear`. To check a rejected fill, use
+`"expectError": { "code": "invalid_params", "reason": "target_not_fillable" }`.
+Both fields must match a structured CLI error; timeouts, malformed output, and
+unexpected success fail the workflow. These options are limited to fill steps.
+
+See the [editor-root regression](cases/regression/fill-editor-roots/README.md)
+for the shared fixtures, browser assertions, and CLI smoke command.
diff --git a/evals/browser/README.zh-CN.md b/evals/browser/README.zh-CN.md
index 9c9636e25..bf1e5ab09 100644
--- a/evals/browser/README.zh-CN.md
+++ b/evals/browser/README.zh-CN.md
@@ -195,3 +195,13 @@ failure/error，结束后 `bsk session list --json` 必须为 `[]`。不能为
 
 直连 smoke 自动覆盖 28 项中的 25 项。`tabs.borrow`、`tabs.return`、`assist.request-help` 需要
 真实用户标签页或真人交互，因此保留在 manual lane，避免默认测试具有破坏性或不确定性。
+
+### Fill 回归用例选项
+
+`fill` 步骤允许空字符串 `""`，用于验证清空；`"noClear": true` 对应
+`--no-clear` 追加。验证拒绝行为时可设置
+`"expectError": { "code": "invalid_params", "reason": "target_not_fillable" }`。
+错误码和原因必须同时匹配；超时、非法输出或意外成功仍然失败。这些选项仅用于 fill。
+
+[编辑器根节点回归](cases/regression/fill-editor-roots/README.md)说明了共享页面、
+真实浏览器断言和 CLI smoke 的运行方式。
diff --git a/evals/browser/cases/regression/fill-editor-roots/README.md b/evals/browser/cases/regression/fill-editor-roots/README.md
new file mode 100644
index 000000000..9a43cf644
--- /dev/null
+++ b/evals/browser/cases/regression/fill-editor-roots/README.md
@@ -0,0 +1,45 @@
+# Fill target boundary regression (#301)
+
+Source: https://github.com/Tencent/BrowserSkill/pull/301
+
+Fill accepts supported editable native inputs, textareas, and contenteditable
+editing hosts. A descendant is not a fill target, including a focusable child or
+one that repeats the contenteditable attribute. Rejection must precede scrolling,
+focus, selection changes, input events, and content changes. Targets are never
+promoted to an ancestor: default fill replaces the entire requested target.
+
+The shared fixture matrix covers replacement, append, empty requests, native
+constraints, empty editor layouts, whitespace, multiline text, Unicode, nested
+editing boundaries, and foreground/background tabs. The real-browser suite also
+covers observation refs, selectors, same-process frames, open shadow roots,
+cancellation, focus changes, and page handlers that replace the editor. Successful
+writes are checked against the final DOM and unrelated content. Browser-selected
+text provides an independent multiline oracle; tests do not use the production
+text reader to calculate expected results.
+
+Run the regression with Node 22+ and a local Chrome executable:
+
+```sh
+BSK_FILL_CHROME=/path/to/chrome pnpm --filter @browser-skill/extension exec vitest run \
+  src/tools/__tests__/fill.browser.test.ts
+```
+
+The suite owns an isolated headless browser and profile, gives each case a fresh
+tab, and closes all targets and the browser on completion. It is skipped unless
+BSK_FILL_CHROME is set; CI runs it explicitly. No browser download is required.
+
+Validate the corpus and run the CLI smoke against a connected test extension:
+
+```sh
+pnpm eval:browser:check
+BSK_AUTO_UPDATE=off pnpm eval:browser smoke --case fill-editor-roots --bsk ./target/debug/bsk
+```
+
+Smoke validates the user flow and intermediate values. The real-browser suite is
+required for the stronger no-side-effect and cancellation assertions. Arbitrary
+rich-text framework models, undo behavior, and rollback of page event handlers
+are not guaranteed. After a mid-operation failure, observe before retrying.
+
+Chrome can represent line breaks with DIV/BR wrappers and use non-breaking spaces
+at line edges. Verification treats these browser representations as plain text;
+it never inserts or removes temporary text markers in the editor.
diff --git a/evals/browser/cases/regression/fill-editor-roots/fill-editor-roots.case.json b/evals/browser/cases/regression/fill-editor-roots/fill-editor-roots.case.json
new file mode 100644
index 000000000..70e44647a
--- /dev/null
+++ b/evals/browser/cases/regression/fill-editor-roots/fill-editor-roots.case.json
@@ -0,0 +1,164 @@
+{
+  "$schema": "../../../schemas/case.schema.json",
+  "schemaVersion": 1,
+  "id": "fill-editor-roots",
+  "title": "Fill native fields and editor roots; reject descendants",
+  "suite": "regression",
+  "tags": ["fill", "contenteditable", "regression"],
+  "source": {
+    "pr": "https://github.com/Tencent/BrowserSkill/pull/301"
+  },
+  "fixture": {
+    "startPath": "/fill-editor-roots"
+  },
+  "prompts": {
+    "en": "Open {url}. Attempt to fill #paragraph with \"wrong\" and confirm target_not_fillable. Fill Notes with \"notes\". Replace Message editor with \"hello\", append \" world\", then clear it with an empty value. Fill it with \"done\". Click Check values after the rejected attempt and after each editor operation; confirm FILL-ROOTS-OK. Leave Unrelated field and outside text unchanged. Close the session.",
+    "zh-CN": "打开 {url}。尝试把 #paragraph 填成 wrong，确认被 target_not_fillable 拒绝。将 Notes 填为 notes。把 Message editor 替换成 hello，追加 world（前面带一个空格），再用空字符串清空，最后填为 done。每次被拒绝或编辑器操作后都点击 Check values，确认 FILL-ROOTS-OK。不要改变 Unrelated field 或 outside text，最后关闭会话。"
+  },
+  "coverage": ["session.start", "session.stop", "page.navigate", "interact.fill", "interact.click"],
+  "assertions": {
+    "site": [
+      {
+        "label": "final fields and unrelated content match",
+        "type": "fill.checked",
+        "where": {
+          "data.notes": "notes",
+          "data.editor": "done",
+          "data.guard": "untouched",
+          "data.outside": "outside text"
+        },
+        "minCount": 1
+      },
+      {
+        "label": "rejected descendant preserved editor",
+        "type": "fill.checked",
+        "where": {
+          "data.notes": "old notes",
+          "data.editor": "old paragraph\n\nsecond paragraph",
+          "data.guard": "untouched",
+          "data.outside": "outside text"
+        },
+        "minCount": 1
+      },
+      {
+        "label": "replacement",
+        "type": "fill.checked",
+        "where": {
+          "data.notes": "notes",
+          "data.editor": "hello",
+          "data.guard": "untouched",
+          "data.outside": "outside text"
+        },
+        "minCount": 1
+      },
+      {
+        "label": "append",
+        "type": "fill.checked",
+        "where": {
+          "data.notes": "notes",
+          "data.editor": "hello world",
+          "data.guard": "untouched",
+          "data.outside": "outside text"
+        },
+        "minCount": 1
+      },
+      {
+        "label": "clear",
+        "type": "fill.checked",
+        "where": {
+          "data.notes": "notes",
+          "data.editor": "",
+          "data.guard": "untouched",
+          "data.outside": "outside text"
+        },
+        "minCount": 1
+      }
+    ],
+    "response": [
+      {
+        "label": "confirmed fixture result",
+        "includes": "FILL-ROOTS-OK"
+      }
+    ],
+    "adapter": [
+      {
+        "label": "descendant rejected with the expected error",
+        "key": "descendantRejected"
+      },
+      {
+        "label": "browser session was closed",
+        "key": "sessionStopped"
+      }
+    ]
+  },
+  "smoke": {
+    "steps": [
+      {
+        "action": "navigate"
+      },
+      {
+        "action": "fill",
+        "selector": "#paragraph",
+        "value": "wrong",
+        "expectError": {
+          "code": "invalid_params",
+          "reason": "target_not_fillable"
+        },
+        "evidence": "descendantRejected"
+      },
+      {
+        "action": "click",
+        "selector": "#check"
+      },
+      {
+        "action": "fill",
+        "selector": "#notes",
+        "value": "notes"
+      },
+      {
+        "action": "fill",
+        "selector": "#editor",
+        "value": "hello"
+      },
+      {
+        "action": "click",
+        "selector": "#check"
+      },
+      {
+        "action": "fill",
+        "selector": "#editor",
+        "value": " world",
+        "noClear": true
+      },
+      {
+        "action": "click",
+        "selector": "#check"
+      },
+      {
+        "action": "fill",
+        "selector": "#editor",
+        "value": ""
+      },
+      {
+        "action": "click",
+        "selector": "#check"
+      },
+      {
+        "action": "fill",
+        "selector": "#editor",
+        "value": "done"
+      },
+      {
+        "action": "click",
+        "selector": "#check"
+      },
+      {
+        "action": "wait-site-event",
+        "type": "fill.checked"
+      },
+      {
+        "action": "observe"
+      }
+    ]
+  }
+}
diff --git a/evals/browser/cases/regression/fill-editor-roots/fill-editor-roots.fixture.mjs b/evals/browser/cases/regression/fill-editor-roots/fill-editor-roots.fixture.mjs
new file mode 100644
index 000000000..34ae0862d
--- /dev/null
+++ b/evals/browser/cases/regression/fill-editor-roots/fill-editor-roots.fixture.mjs
@@ -0,0 +1,162 @@
+import { page } from "../../../lib/fixtures.mjs";
+
+// The browser regression and the CLI corpus use the same editor structure.
+export const editorMarkup = `<input id="guard" aria-label="Unrelated field" value="untouched">
+<textarea id="notes" aria-label="Notes">old notes</textarea>
+<div id="editor" contenteditable aria-label="Message editor" style="white-space: pre-wrap"><p id="paragraph">old paragraph</p><p>second paragraph</p></div>
+<div id="outside">outside text</div>`;
+
+export const acceptedTargets = [
+  {
+    name: "line breaks and whitespace",
+    markup: '<div id="target" contenteditable="true" style="white-space: pre-wrap"></div>',
+    steps: [
+      ["\n", true, "\n"],
+      ["\n\n", true, "\n\n"],
+      ["a\r\nb", true, "a\nb"],
+      [" ", true, " "],
+    ],
+  },
+  {
+    name: "normal whitespace style",
+    markup: '<div id="target" contenteditable="true"></div>',
+    steps: [
+      [" a  b ", true, " a  b ", "\u00a0a  b\u00a0"],
+      ["!", false, " a  b !", "\u00a0a  b !"],
+    ],
+  },
+  {
+    name: "append to existing paragraphs",
+    markup: '<div id="target" contenteditable="true"><p>first</p><p>second</p></div>',
+    steps: [["!", false, "first\n\nsecond!"]],
+  },
+  ...["text", "search", "tel", "url", "password"].map((type) => ({
+    name: `${type} input`,
+    markup: `<input id="target" type="${type}" value="old">`,
+    steps: [
+      ["你好🙂", true, "你好🙂"],
+      ["!", false, "你好🙂!"],
+      ["", false, "你好🙂!"],
+      ["", true, ""],
+    ],
+  })),
+  {
+    name: "email input",
+    markup: '<input id="target" type="email" value="a@b.com">',
+    steps: [
+      ["x@y.com", true, "x@y.com"],
+      [".cn", false, "x@y.com.cn"],
+    ],
+  },
+  {
+    name: "number input",
+    markup: '<input id="target" type="number" value="12">',
+    steps: [
+      ["34", true, "34"],
+      ["5", false, "345"],
+      ["", true, ""],
+    ],
+  },
+  {
+    name: "textarea",
+    markup: '<textarea id="target">old</textarea>',
+    steps: [
+      ["a\r\nb", true, "a\nb"],
+      ["\n你好🙂", false, "a\nb\n你好🙂"],
+      ["", true, ""],
+    ],
+  },
+  ...["", "true", "plaintext-only"].map((attribute) => ({
+    name: `editable=${JSON.stringify(attribute)}`,
+    markup: `<div id="target" contenteditable="${attribute}" style="white-space: pre-wrap"><p>old</p><p>second</p></div>`,
+    steps: [
+      ["你好🙂", true, "你好🙂"],
+      ["\nnext\n", false, "你好🙂\nnext\n"],
+      ["", false, "你好🙂\nnext\n"],
+      ["", true, ""],
+      ["again", false, "again"],
+    ],
+  })),
+  ...["", "<br>", " ", "\n", "<p><br></p>"].map((initial) => ({
+    name: `empty root ${JSON.stringify(initial)}`,
+    markup: `<div id="target" contenteditable="true">${initial}</div>`,
+    steps: [
+      ["hello", false, "hello"],
+      ["", true, ""],
+      ["\u200b", false, "\u200b"],
+    ],
+  })),
+  {
+    name: "preserved whitespace",
+    markup: '<div id="target" contenteditable="true" style="white-space: pre-wrap"> </div>',
+    steps: [
+      ["hello", false, " hello"],
+      [" \n ", true, " \n "],
+    ],
+  },
+  {
+    name: "native input inside editor",
+    markup: '<div contenteditable="true"><input id="target" value="old"></div>',
+    steps: [
+      ["hello", true, "hello"],
+      ["!", false, "hello!"],
+    ],
+  },
+  {
+    name: "independent root inside noneditable island",
+    markup:
+      '<div contenteditable="true">before<div contenteditable="false"><div id="target" contenteditable="true">old</div></div>after</div>',
+    steps: [
+      ["hello", true, "hello"],
+      ["!", false, "hello!"],
+    ],
+  },
+];
+
+export const rejectedTargets = [
+  ...[
+    '<p id="target">old</p>',
+    '<p id="target"></p>',
+    '<p id="target"> </p>',
+    '<p id="target"><br></p>',
+    '<p id="target" tabindex="0">old</p>',
+    '<p>a <span id="target">old</span> b</p>',
+    '<p id="target" contenteditable="true" tabindex="0">old</p>',
+    '<p id="target" contenteditable="plaintext-only" tabindex="0">old</p>',
+    '<p id="target" contenteditable="false" tabindex="0">old</p>',
+  ].map((target) => ({
+    name: target,
+    markup: `<div contenteditable="true"><p>before</p>${target}<p>keep</p></div>`,
+  })),
+  { name: "noneditable textbox", markup: '<div id="target" role="textbox" tabindex="0">old</div>' },
+  { name: "readonly input", markup: '<input id="target" readonly value="old">' },
+  {
+    name: "disabled fieldset",
+    markup: '<fieldset disabled><input id="target" value="old"></fieldset>',
+  },
+  ...["checkbox", "radio", "range", "date", "file"].map((type) => ({
+    name: `${type} input`,
+    markup: `<input id="target" type="${type}">`,
+  })),
+];
+
+export default {
+  id: "fill-editor-roots",
+  routes: ["/fill-editor-roots"],
+  render() {
+    return page({
+      title: "Fill editor roots",
+      body: `<section class="card"><h1>Fill editor roots</h1>${editorMarkup}<button id="check">Check values</button><p id="result"></p></section>`,
+      script: `document.querySelector('#check').addEventListener('click', () => {
+        const data = {
+          notes: document.querySelector('#notes').value,
+          editor: document.querySelector('#editor').innerText,
+          guard: document.querySelector('#guard').value,
+          outside: document.querySelector('#outside').textContent,
+        };
+        browserEval.send('fill.checked', data);
+        document.querySelector('#result').textContent = 'FILL-ROOTS-OK';
+      });`,
+    });
+  },
+};
diff --git a/evals/browser/lib/bsk-runner.mjs b/evals/browser/lib/bsk-runner.mjs
index 25a40b5c1..4a780f8b8 100644
--- a/evals/browser/lib/bsk-runner.mjs
+++ b/evals/browser/lib/bsk-runner.mjs
@@ -74,6 +74,7 @@ export async function runBskSmokeTask({
   runId,
   seed = task.seed,
   timeoutMs = 60_000,
+  executeProcess = runProcess,
 }) {
   const steps = [];
   const evidence = {};
@@ -87,14 +88,32 @@ export async function runBskSmokeTask({
   let executionError;
   await mkdir(outputDirectory, { recursive: true });
 
-  async function bsk(args, { timeout = timeoutMs } = {}) {
-    const execution = await runProcess(bskCommand, [...args, "--json"], { timeoutMs: timeout });
+  async function bsk(args, { timeout = timeoutMs, expectError } = {}) {
+    const execution = await executeProcess(bskCommand, [...args, "--json"], { timeoutMs: timeout });
     steps.push(execution);
+    if (expectError && !execution.timedOut && !execution.error && execution.exitCode > 0) {
+      let failure;
+      try {
+        failure = JSON.parse(execution.stderr.trim() || execution.stdout.trim());
+      } catch {
+        throw new Error(
+          `bsk did not return the expected JSON error: ${renderStepError(execution)}`,
+        );
+      }
+      if (failure.code !== expectError.code || failure.data?.reason !== expectError.reason) {
+        throw new Error(
+          `expected ${expectError.code}/${expectError.reason}, received ${failure.code}/${failure.data?.reason}`,
+        );
+      }
+      return failure;
+    }
     if (execution.exitCode !== 0 || execution.timedOut || execution.error) {
       throw new Error(
         `bsk ${args.join(" ")} failed: ${execution.error ?? renderStepError(execution)}`,
       );
     }
+    if (expectError)
+      throw new Error(`expected ${expectError.code}/${expectError.reason}, but bsk succeeded`);
     return parseJsonOutput(execution);
   }
 
@@ -169,14 +188,18 @@ export async function runBskSmokeTask({
         ]);
         break;
       case "fill":
-        result = await bsk([
-          "fill",
-          ...targetArgs(step, variables),
-          "--value",
-          String(resolveValue(step.value, variables)),
-          ...session,
-          ...tabArgs(step, variables),
-        ]);
+        result = await bsk(
+          [
+            "fill",
+            ...targetArgs(step, variables),
+            "--value",
+            String(resolveValue(step.value, variables)),
+            ...(step.noClear ? ["--no-clear"] : []),
+            ...session,
+            ...tabArgs(step, variables),
+          ],
+          { expectError: step.expectError },
+        );
         break;
       case "select":
         result = await bsk([
diff --git a/evals/browser/lib/case-loader.mjs b/evals/browser/lib/case-loader.mjs
index d3b98dd5b..522741f09 100644
--- a/evals/browser/lib/case-loader.mjs
+++ b/evals/browser/lib/case-loader.mjs
@@ -69,7 +69,24 @@ function validateWorkflowStep(errors, step, path) {
   if (["click", "hover", "fill", "select"].includes(step.action) && !step.selector && !step.ref) {
     errors.push(`${path} requires selector or ref`);
   }
-  if (step.action === "fill") checkString(errors, step.value, `${path}.value`);
+  if (step.action === "fill") {
+    if (typeof step.value !== "string") errors.push(`${path}.value must be a string`);
+    if (step.noClear !== undefined && typeof step.noClear !== "boolean") {
+      errors.push(`${path}.noClear must be a boolean`);
+    }
+  } else if (step.noClear !== undefined || step.expectError !== undefined) {
+    errors.push(`${path}.noClear and expectError are only supported for fill`);
+  }
+  if (step.expectError !== undefined) {
+    if (!isObject(step.expectError)) errors.push(`${path}.expectError must be an object`);
+    else {
+      if (Object.keys(step.expectError).some((key) => !["code", "reason"].includes(key))) {
+        errors.push(`${path}.expectError only supports code and reason`);
+      }
+      checkString(errors, step.expectError.code, `${path}.expectError.code`);
+      checkString(errors, step.expectError.reason, `${path}.expectError.reason`);
+    }
+  }
   if (step.action === "select") {
     if (!Array.isArray(step.values) || step.values.length === 0) {
       errors.push(`${path}.values must be a non-empty array`);
diff --git a/evals/browser/schemas/case.schema.json b/evals/browser/schemas/case.schema.json
index d27c87750..6dfa5a61f 100644
--- a/evals/browser/schemas/case.schema.json
+++ b/evals/browser/schemas/case.schema.json
@@ -62,7 +62,23 @@
           "items": {
             "type": "object",
             "required": ["action"],
-            "properties": { "action": { "type": "string" } },
+            "properties": {
+              "action": { "type": "string" },
+              "noClear": {
+                "type": "boolean",
+                "description": "Fill only: append instead of replacing."
+              },
+              "expectError": {
+                "type": "object",
+                "description": "Fill only: require this structured CLI error.",
+                "required": ["code", "reason"],
+                "properties": {
+                  "code": { "type": "string", "minLength": 1 },
+                  "reason": { "type": "string", "minLength": 1 }
+                },
+                "additionalProperties": false
+              }
+            },
             "additionalProperties": true
           }
         }
diff --git a/evals/browser/tests/eval.test.mjs b/evals/browser/tests/eval.test.mjs
index bb8c4d728..6f75054c9 100644
--- a/evals/browser/tests/eval.test.mjs
+++ b/evals/browser/tests/eval.test.mjs
@@ -41,6 +41,7 @@ test("case manifests are discovered, ordered, and grouped into suites", () => {
       "diagnostics",
       "mobile-emulation",
       "generated-form",
+      "fill-editor-roots",
       "oopif-scrollbars",
       "snapshot-coordinates",
     ],
@@ -48,16 +49,16 @@ test("case manifests are discovered, ordered, and grouped into suites", () => {
   assert.deepEqual(repositorySummary(cases, fixtureRegistry).suites, {
     core: 6,
     matrix: 1,
-    regression: 2,
+    regression: 3,
   });
 });
 
 test("repository validation links every case to a fixture and valid workflow evidence", () => {
   assert.deepEqual(validateRepositoryCases(cases, fixtureRegistry), []);
   const summary = repositorySummary(cases, fixtureRegistry);
-  assert.equal(summary.cases, 9);
-  assert.equal(summary.fixtureModules, 10);
-  assert.equal(summary.fixtureRoutes, 18);
+  assert.equal(summary.cases, 10);
+  assert.equal(summary.fixtureModules, 11);
+  assert.equal(summary.fixtureRoutes, 19);
 });
 
 test("manifest validation rejects unknown operations and incomplete workflow steps", () => {
@@ -240,6 +241,7 @@ test("coverage inventory contains all 28 operations and three manual lanes", ()
   assert.deepEqual(coverage.find(({ operation }) => operation === "interact.fill").smokeCases, [
     "form-controls",
     "generated-form",
+    "fill-editor-roots",
   ]);
 });
 
diff --git a/evals/browser/tests/fill-workflow.test.mjs b/evals/browser/tests/fill-workflow.test.mjs
new file mode 100644
index 000000000..bcc11ad51
--- /dev/null
+++ b/evals/browser/tests/fill-workflow.test.mjs
@@ -0,0 +1,110 @@
+import assert from "node:assert/strict";
+import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import { runBskSmokeTask } from "../lib/bsk-runner.mjs";
+import { validateCaseManifest } from "../lib/case-loader.mjs";
+
+const manifest = JSON.parse(
+  await readFile(
+    new URL("../cases/regression/fill-editor-roots/fill-editor-roots.case.json", import.meta.url),
+    "utf8",
+  ),
+);
+
+test("fill manifests permit empty/whitespace values and validate rejection options", () => {
+  for (const value of ["", " ", "\n"]) {
+    const copy = structuredClone(manifest);
+    copy.smoke.steps = [{ action: "fill", selector: "#editor", value, noClear: true }];
+    assert.deepEqual(validateCaseManifest(copy), []);
+  }
+  for (const step of [
+    { action: "fill", selector: "#editor", value: 1 },
+    { action: "fill", selector: "#editor", value: "", noClear: "true" },
+    { action: "fill", selector: "#editor", value: "", expectError: { code: "invalid_params" } },
+    {
+      action: "click",
+      selector: "#editor",
+      expectError: { code: "invalid_params", reason: "target_not_fillable" },
+    },
+  ]) {
+    const copy = structuredClone(manifest);
+    copy.smoke.steps = [step];
+    assert.notDeepEqual(validateCaseManifest(copy), []);
+  }
+});
+
+for (const mode of [
+  "expected",
+  "wrong-code",
+  "wrong-reason",
+  "success",
+  "timeout",
+  "spawn-error",
+  "malformed",
+]) {
+  test(`fill rejection workflow: ${mode}`, async () => {
+    const outputDirectory = await mkdtemp(join(tmpdir(), "fill-workflow-"));
+    const calls = [];
+    try {
+      const report = await runBskSmokeTask({
+        bskCommand: "bsk",
+        outputDirectory,
+        server: { reset() {}, snapshot: () => ({ events: [] }) },
+        serverInfo: { baseUrl: "http://localhost:4173" },
+        runId: "fill-test",
+        task: {
+          id: "fill-test",
+          suite: "regression",
+          tags: [],
+          startPath: "/fill-editor-roots",
+          siteAssertions: [],
+          responseAssertions: [],
+          adapterAssertions: [],
+          smokeSteps: [
+            {
+              action: "fill",
+              selector: "#editor",
+              value: "",
+              noClear: true,
+              expectError: { code: "invalid_params", reason: "target_not_fillable" },
+              evidence: "rejected",
+            },
+          ],
+        },
+        executeProcess: async (_command, args) => {
+          calls.push(args);
+          let response = {};
+          if (args[0] === "session" && args[1] === "start") response = { session_id: "test" };
+          if (args[0] === "session" && args[1] === "stop") response = { stopped: ["test"] };
+          if (args[0] !== "fill")
+            return { exitCode: 0, stdout: JSON.stringify(response), stderr: "" };
+          assert.equal(args[args.indexOf("--value") + 1], "");
+          assert.ok(args.includes("--no-clear"));
+          return {
+            exitCode: mode === "success" ? 0 : 1,
+            stdout: "{}",
+            timedOut: mode === "timeout",
+            error: mode === "spawn-error" ? "spawn failed" : undefined,
+            stderr:
+              mode === "malformed"
+                ? "not JSON"
+                : JSON.stringify({
+                    code: mode === "wrong-code" ? "cdp_failed" : "invalid_params",
+                    data: {
+                      reason: mode === "wrong-reason" ? "fill_failed" : "target_not_fillable",
+                    },
+                  }),
+          };
+        },
+      });
+      assert.equal(report.executionError === undefined, mode === "expected");
+      assert.equal(report.evidence.rejected === true, mode === "expected");
+      assert.equal(report.evidence.sessionStopped, true);
+      assert.ok(calls.some((args) => args[0] === "session" && args[1] === "stop"));
+    } finally {
+      await rm(outputDirectory, { recursive: true, force: true });
+    }
+  });
+}
diff --git a/packages/dsh-plugin-browserskill/src/tools.ts b/packages/dsh-plugin-browserskill/src/tools.ts
index 5f9835ebb..dd0801f2b 100644
--- a/packages/dsh-plugin-browserskill/src/tools.ts
+++ b/packages/dsh-plugin-browserskill/src/tools.ts
@@ -692,7 +692,7 @@ function defineBrowserOperations(deps: ToolDeps, register: DefinitionRegistrar):
     defineTool({
       name: "interact.fill",
       description:
-        "Fill an input / textarea / contenteditable element, clearing it first by default. " +
+        "Fill an editable text input, textarea, or contenteditable editor root, clearing it first by default. Internal paragraphs and spans are not supported. " +
         "Target is a snapshot ref (@e3) or a CSS selector.",
       parameters: {
         target: {
diff --git a/packages/vom/src/__tests__/render.test.ts b/packages/vom/src/__tests__/render.test.ts
index bf7ff797e..ab1461a7e 100644
--- a/packages/vom/src/__tests__/render.test.ts
+++ b/packages/vom/src/__tests__/render.test.ts
@@ -29,6 +29,26 @@ function coreRefs(refs: ReturnType<typeof renderVom>["refs"]) {
 }
 
 describe("renderVom single-layer page", () => {
+  it.each([
+    "",
+    "true",
+    "plaintext-only",
+  ])("exposes a contenteditable=%s root as a textbox ref", (contenteditable) => {
+    const out = renderVom(
+      scene([
+        node({
+          id: 1,
+          backendNodeId: 42,
+          tag: "div",
+          name: "Message editor",
+          attrs: { contenteditable },
+          rect: { x: 0, y: 0, w: 200, h: 80 },
+        }),
+      ]),
+    );
+    expect(out.text).toContain('@e1 textbox "Message editor"');
+    expect(coreRefs(out.refs)).toEqual([{ ref: "e1", backendNodeId: 42 }]);
+  });
   it.each([
     { checked: true, marker: " [checked]" },
     { checked: false, marker: " [unchecked]" },
diff --git a/packages/vom/src/render.ts b/packages/vom/src/render.ts
index 6aa16a58f..ec9fa946f 100644
--- a/packages/vom/src/render.ts
+++ b/packages/vom/src/render.ts
@@ -223,7 +223,9 @@ function isFocusable(node: VomNode): boolean {
 
 function isContentEditable(node: VomNode): boolean {
   const contentEditable = node.attrs?.contenteditable?.toLowerCase();
-  return contentEditable === "true" || contentEditable === "plaintext-only";
+  return (
+    contentEditable === "" || contentEditable === "true" || contentEditable === "plaintext-only"
+  );
 }
 
 const ICON_REFERENCE_MARKERS = new Set(["glyph", "icon", "icons", "symbol"]);

From 977d88fbb285d9b87bb09e6d94d4e8b3920d83e3 Mon Sep 17 00:00:00 2001
From: drakezhang <drakezhang@tencent.com>
Date: Tue, 6 Oct 2026 20:44:52 +0800
Subject: [PATCH 5/5] refactor(extension): read editor text through one line
 model

Text nodes, <br>, and direct <div> lines, the layouts Chrome creates
while typing, are now read with the same rules: a <br> that only holds a
line open is not a character, collapsible whitespace at line edges is
ignored, and an empty line without a <br> has no height. This replaces
three layout-specific branches and fixes appending to an editor that
ends with <br>, which wrote the text and then failed verification.

Share the white-space collapsing check with fill preparation, and add
regressions for a trailing <br> and source-formatted line wrappers.
---
 apps/extension/src/tools/interaction.ts       | 54 ++++++++++++-------
 .../fill-editor-roots.fixture.mjs             | 13 +++++
 2 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/apps/extension/src/tools/interaction.ts b/apps/extension/src/tools/interaction.ts
index 70e842016..a1889d982 100644
--- a/apps/extension/src/tools/interaction.ts
+++ b/apps/extension/src/tools/interaction.ts
@@ -972,30 +972,46 @@ const FILL_EDITABLE_FUNCTION = `function() {
   return this.isConnected && supported && !this.readOnly && !this.matches(':disabled');
 }`;
 
-// Read plain text without counting Chrome's empty-line <br> as a character.
-// insertText uses direct DIV line wrappers in rich editors and text nodes in
-// plaintext editors. Preserve literal whitespace instead of losing it through
-// innerText's CSS collapsing. Other rich structures retain their rendered text.
+// In these modes Chrome types NBSP for spaces at line edges, and whitespace at
+// line edges is source formatting rather than text.
+const FILL_COLLAPSES_WHITESPACE = `['normal', 'nowrap'].includes(getComputedStyle(this).whiteSpace)`;
+
+// Typing produces text nodes, <br>, and direct <div> lines. Read that layout
+// literally: innerText collapses whitespace and counts the <br> that only holds
+// a line open. Other rich structures keep their rendered text. Normalize NBSP
+// only in the read value; never rewrite the user's DOM characters.
 const FILL_VALUE_FUNCTION = `function() {
   if (this.matches('input,textarea')) return this.value;
-  const rendered = this.innerText;
-  const collapses = ['normal', 'nowrap'].includes(getComputedStyle(this).whiteSpace);
-  const children = [...this.childNodes];
-  const lineWrappers = this.children.length > 0 && children.every((child, index) =>
-    (index === 0 && child.nodeType === Node.TEXT_NODE) ||
-    (child.nodeName === 'DIV' && getComputedStyle(child).display === 'block' &&
-      [...child.children].every(el => el.nodeName === 'BR')));
+  const collapses = ${FILL_COLLAPSES_WHITESPACE};
+  const isInline = node => node.nodeType === Node.TEXT_NODE || node.nodeName === 'BR';
+  const isLine = node => node.nodeName === 'DIV' && getComputedStyle(node).display === 'block' &&
+    [...node.childNodes].every(isInline);
+  const nodes = [...this.childNodes];
   let value;
-  if (lineWrappers) {
-    value = children.map(child => child.nodeType === Node.TEXT_NODE ? child.data :
-      child.childNodes.length === 1 && child.firstChild.nodeName === 'BR' ? '' : child.innerText).join('\\n');
-  } else if (this.children.length === 0 && rendered !== '') {
-    value = collapses ? this.textContent.replace(/^[ \\t\\r\\n]+|[ \\t\\r\\n]+$/g, '') : this.textContent;
+  if (nodes.every(node => isInline(node) || isLine(node))) {
+    const lines = [];
+    let open;
+    for (const node of nodes) {
+      if (isLine(node)) {
+        lines.push([...node.childNodes]);
+        open = undefined;
+      } else {
+        if (!open) lines.push(open = []);
+        open.push(node);
+      }
+    }
+    value = lines.flatMap(line => {
+      let text = line.map((node, index) => node.nodeName !== 'BR' ? node.data :
+        index < line.length - 1 ? '\\n' : '').join('');
+      if (collapses) text = text.replace(/^[ \\t\\r\\n]+|[ \\t\\r\\n]+$/g, '');
+      // Without a <br>, an empty line has no height.
+      return text === '' && !line.some(node => node.nodeName === 'BR') ? [] : [text];
+    }).join('\\n');
   } else {
+    // An editor holding only an empty line, such as <p><br></p>, is empty.
+    const rendered = this.innerText;
     value = rendered === '\\n' && this.textContent === '' ? '' : rendered;
   }
-  // Chrome substitutes NBSP at line edges in whitespace-collapsing editors.
-  // Only normalize the read value; never rewrite the user's DOM characters.
   return collapses ? value.replace(/\\u00a0/g, ' ') : value;
 }`;
 
@@ -1027,7 +1043,7 @@ const FILL_PREPARATION_FUNCTION = `function(value, clearBefore) {
     }
   } else {
     expected = expected.replace(/\\r\\n?/g, '\\n');
-    if (['normal', 'nowrap'].includes(getComputedStyle(this).whiteSpace)) expected = expected.replace(/\\u00a0/g, ' ');
+    if (${FILL_COLLAPSES_WHITESPACE}) expected = expected.replace(/\\u00a0/g, ' ');
   }
   return { before, expected };
 }`;
diff --git a/evals/browser/cases/regression/fill-editor-roots/fill-editor-roots.fixture.mjs b/evals/browser/cases/regression/fill-editor-roots/fill-editor-roots.fixture.mjs
index 34ae0862d..73eff1932 100644
--- a/evals/browser/cases/regression/fill-editor-roots/fill-editor-roots.fixture.mjs
+++ b/evals/browser/cases/regression/fill-editor-roots/fill-editor-roots.fixture.mjs
@@ -25,6 +25,19 @@ export const acceptedTargets = [
       ["!", false, " a  b !", "\u00a0a  b !"],
     ],
   },
+  {
+    name: "trailing line break",
+    markup: '<div id="target" contenteditable="true">hello<br></div>',
+    steps: [
+      ["!", false, "hello!", "hello!"],
+      ["\n", false, "hello!\n"],
+    ],
+  },
+  {
+    name: "formatted line wrappers",
+    markup: '<div id="target" contenteditable="true">\n  <div>a</div>\n  <div>b</div>\n</div>',
+    steps: [["!", false, "a\nb!"]],
+  },
   {
     name: "append to existing paragraphs",
     markup: '<div id="target" contenteditable="true"><p>first</p><p>second</p></div>',