diff --git a/app/src/dev/seedScreens.ts b/app/src/dev/seedScreens.ts
index f9b297d6..a3e4f127 100644
--- a/app/src/dev/seedScreens.ts
+++ b/app/src/dev/seedScreens.ts
@@ -61,7 +61,7 @@ export function seedScreens(fake: FakeBotloft, crewId: CrewId): void {
       }
       return;
     }
-    written = Math.min(LANDING.length, written + 70);
+    written = Math.min(LANDING.length, written + 24);
     const done = written === LANDING.length;
     if (done) {
       fake.screens.add(designer.id, "index.html", LANDING, { folder: "site" });
diff --git a/app/src/features/bots/BotCursor.tsx b/app/src/features/bots/BotCursor.tsx
new file mode 100644
index 00000000..3f64649e
--- /dev/null
+++ b/app/src/features/bots/BotCursor.tsx
@@ -0,0 +1,63 @@
+// A bot's cursor: an arrow in its color with its name, gliding to where it
+// works. The browser shows it where the bot clicks (spec 21.8), the design
+// area where the bot is writing a screen (spec 22.5).
+
+import type { Bot } from "../../lib/protocol.gen";
+
+/** Dark text on light colors, light text on dark ones. */
+export function inkOn(color: string): string {
+  const hex = color.replace("#", "");
+  const [r, g, b] = [0, 2, 4].map((at) => Number.parseInt(hex.slice(at, at + 2), 16) / 255);
+  const luminance = 0.2126 * (r ?? 0) + 0.7152 * (g ?? 0) + 0.0722 * (b ?? 0);
+  return luminance > 0.55 ? "#141414" : "#ffffff";
+}
+
+export function BotCursor({
+  bot,
+  left,
+  top,
+  typing = false,
+  flip = false,
+  lift = false,
+}: {
+  bot: Pick<Bot, "name" | "color">;
+  /** Where the tip points, as CSS lengths inside the positioned parent. */
+  left: string;
+  top: string;
+  /** Dots after the name: the bot is writing. */
+  typing?: boolean;
+  /** The name goes left of the arrow, near the right edge. */
+  flip?: boolean;
+  /** The name goes above the arrow, near the bottom edge. */
+  lift?: boolean;
+}) {
+  return (
+    <span
+      aria-hidden
+      className={`bot-cursor ${flip ? "flex-row-reverse" : ""}`}
+      style={{ left, top, ...(flip && { translate: "calc(-100% + 18px) -3px" }) }}
+    >
+      <svg width="22" height="22" viewBox="0 0 24 24" className="shrink-0 drop-shadow-sm">
+        <title>{bot.name}</title>
+        <path
+          d="M4 2.5 19.5 12l-7 1.6-3.4 6.9Z"
+          fill={bot.color}
+          stroke="#ffffff"
+          strokeWidth="1.6"
+          strokeLinejoin="round"
+        />
+      </svg>
+      <span
+        className={`${flip ? "mr-1" : "ml-3.5"} -mt-1 inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2 py-0.5 font-semibold text-[11px] shadow-sm`}
+        style={{
+          background: bot.color,
+          color: inkOn(bot.color),
+          ...(lift && { marginTop: "-20px" }),
+        }}
+      >
+        {bot.name}
+        {typing && <span className="bot-typing">•••</span>}
+      </span>
+    </span>
+  );
+}
diff --git a/app/src/features/browser/LiveView.tsx b/app/src/features/browser/LiveView.tsx
index c4d1bdb0..8c7b16a0 100644
--- a/app/src/features/browser/LiveView.tsx
+++ b/app/src/features/browser/LiveView.tsx
@@ -5,17 +5,10 @@
 import { type ReactNode, useEffect, useState } from "react";
 import { useT } from "../../i18n";
 import type { Bot, BrowserAction, BrowserFrame } from "../../lib/protocol.gen";
+import { BotCursor } from "../bots/BotCursor";
 
 const PAGE = { width: 1280, height: 800 };
 
-/** Dark text on light colors, light text on dark ones. */
-function inkOn(color: string): string {
-  const hex = color.replace("#", "");
-  const [r, g, b] = [0, 2, 4].map((at) => Number.parseInt(hex.slice(at, at + 2), 16) / 255);
-  const luminance = 0.2126 * (r ?? 0) + 0.7152 * (g ?? 0) + 0.0722 * (b ?? 0);
-  return luminance > 0.55 ? "#141414" : "#ffffff";
-}
-
 /** Where on the screen, in percent, an action happened. */
 function spot(action: BrowserAction | null, frame: BrowserFrame | null) {
   if (!action || action.x === null || action.y === null) {
@@ -83,7 +76,6 @@ export function LiveView({
   }, [action?.at, action?.kind]);
   const width = frame?.width ?? PAGE.width;
   const height = frame?.height ?? PAGE.height;
-  const ink = inkOn(bot.color);
   const acting = !dim && !held;
 
   return (
@@ -113,29 +105,12 @@ export function LiveView({
         />
       )}
       {acting && cursor && (
-        <span
-          aria-hidden
-          className="browser-cursor"
-          style={{ left: `${cursor.x}%`, top: `${cursor.y}%` }}
-        >
-          <svg width="22" height="22" viewBox="0 0 24 24" className="drop-shadow-sm">
-            <title>{bot.name}</title>
-            <path
-              d="M4 2.5 19.5 12l-7 1.6-3.4 6.9Z"
-              fill={bot.color}
-              stroke="#ffffff"
-              strokeWidth="1.6"
-              strokeLinejoin="round"
-            />
-          </svg>
-          <span
-            className="ml-3.5 -mt-1 inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2 py-0.5 font-semibold text-[11px] shadow-sm"
-            style={{ background: bot.color, color: ink }}
-          >
-            {bot.name}
-            {action?.kind === "type" && <span className="browser-typing">•••</span>}
-          </span>
-        </span>
+        <BotCursor
+          bot={bot}
+          left={`${cursor.x}%`}
+          top={`${cursor.y}%`}
+          typing={action?.kind === "type"}
+        />
       )}
       {children}
     </figure>
diff --git a/app/src/features/browser/browser.test.tsx b/app/src/features/browser/browser.test.tsx
index 1188e626..86abd473 100644
--- a/app/src/features/browser/browser.test.tsx
+++ b/app/src/features/browser/browser.test.tsx
@@ -54,7 +54,7 @@ describe("browser panel", () => {
     const screenshot = within(panel()).getByRole("figure", { name: "What Scout sees" });
     const image = screenshot.querySelector("img");
     expect(image?.getAttribute("src")).toBe("data:image/jpeg;base64,AAAA");
-    const cursor = screenshot.querySelector(".browser-cursor") as HTMLElement;
+    const cursor = screenshot.querySelector(".bot-cursor") as HTMLElement;
     expect(cursor.style.left).toBe("50%");
     expect(cursor.style.top).toBe("50%");
     expect(within(panel()).getByText("Live")).toBeDefined();
diff --git a/app/src/features/screens/LiveFrame.tsx b/app/src/features/screens/LiveFrame.tsx
index 3fa8c6a9..8a8bed04 100644
--- a/app/src/features/screens/LiveFrame.tsx
+++ b/app/src/features/screens/LiveFrame.tsx
@@ -1,9 +1,13 @@
 // A screen drawn at its device's real size and scaled to fit (spec 22.5).
 // Each new version loads in a hidden frame and takes the front once it is
-// ready, so a screen being written grows without flickering.
+// ready, so a screen being written grows without flickering. While the bot
+// writes it, its cursor follows the end of the page and a frame marks the
+// part being built (spec 22.3).
 
-import { useEffect, useReducer } from "react";
-import type { ScreenDevice } from "../../lib/protocol.gen";
+import { useEffect, useReducer, useRef, useState } from "react";
+import type { Bot, ScreenDevice } from "../../lib/protocol.gen";
+import { BotCursor } from "../bots/BotCursor";
+import { type Mark, readMark } from "./cursorMark";
 
 export const DEVICES: Record<ScreenDevice, { width: number; height: number }> = {
   desktop: { width: 1280, height: 800 },
@@ -11,6 +15,9 @@ export const DEVICES: Record<ScreenDevice, { width: number; height: number }> =
   mobile: { width: 390, height: 844 },
 };
 
+/** Where the cursor waits while nothing on the page shows yet. */
+const PARKED = { x: 40, y: 40 };
+
 /** The screen runs its own scripts, away from the app (spec 22.6). */
 const SANDBOX = "allow-scripts allow-forms allow-popups allow-modals";
 
@@ -53,6 +60,7 @@ export function LiveFrame({
   scale,
   title,
   interactive = false,
+  writer = null,
 }: {
   url: string;
   device: ScreenDevice;
@@ -60,6 +68,8 @@ export function LiveFrame({
   title: string;
   /** Takes clicks and scrolling; otherwise the frame is only a picture. */
   interactive?: boolean;
+  /** The bot writing it now, whose cursor shows. */
+  writer?: Pick<Bot, "name" | "color"> | null;
 }) {
   const [state, change] = useReducer(frames, {
     urls: [url, null],
@@ -69,6 +79,30 @@ export function LiveFrame({
   });
   useEffect(() => change({ kind: "show", url }), [url]);
   const size = DEVICES[device];
+  const windows = useRef<(Window | null)[]>([null, null]);
+  // Each frame's own mark: the one behind speaks before it is on show, and
+  // its layout is the next version's, so only the front one's shows.
+  const [marks, setMarks] = useState<[Mark | null, Mark | null]>([null, null]);
+  const writing = writer !== null;
+  useEffect(() => {
+    if (!writing) {
+      setMarks([null, null]);
+      return;
+    }
+    const listen = (event: MessageEvent) => {
+      const frame = event.source === null ? -1 : windows.current.indexOf(event.source as Window);
+      const read = frame === 0 || frame === 1 ? readMark(event.data, size) : undefined;
+      if (read) {
+        setMarks((current) => (frame === 0 ? [read, current[1]] : [current[0], read]));
+      }
+    };
+    window.addEventListener("message", listen);
+    return () => window.removeEventListener("message", listen);
+  }, [writing, size]);
+  const mark = marks[state.front];
+  const box = writing ? mark?.box : null;
+  // Nothing to see yet (the styles come first): the cursor waits at the top.
+  const point = writing && mark ? (mark.point ?? PARKED) : null;
 
   return (
     <div
@@ -84,6 +118,9 @@ export function LiveFrame({
         return (
           <iframe
             key={frame}
+            ref={(node) => {
+              windows.current[frame] = node?.contentWindow ?? null;
+            }}
             src={src}
             title={title}
             sandbox={SANDBOX}
@@ -102,6 +139,30 @@ export function LiveFrame({
           />
         );
       })}
+      {box && writer && (
+        <span
+          aria-hidden
+          className="pointer-events-none absolute rounded-[4px] border-2 transition-[left,top,width,height] duration-500 ease-out"
+          style={{
+            left: box.x * scale - 3,
+            top: box.y * scale - 3,
+            width: box.width * scale + 6,
+            height: box.height * scale + 6,
+            borderColor: writer.color,
+            boxShadow: `0 0 0 4px ${writer.color}26`,
+          }}
+        />
+      )}
+      {point && writer && (
+        <BotCursor
+          bot={writer}
+          left={`${point.x * scale}px`}
+          top={`${point.y * scale}px`}
+          typing
+          flip={point.x > size.width * 0.7}
+          lift={point.y > size.height * 0.88}
+        />
+      )}
     </div>
   );
 }
diff --git a/app/src/features/screens/ScreenFocus.tsx b/app/src/features/screens/ScreenFocus.tsx
index 38702eb4..f6cc165c 100644
--- a/app/src/features/screens/ScreenFocus.tsx
+++ b/app/src/features/screens/ScreenFocus.tsx
@@ -92,6 +92,7 @@ export function ScreenFocus({
             scale={scale}
             title={screen.name}
             interactive
+            writer={screen.writing ? bot : null}
           />
         </div>
       </div>
diff --git a/app/src/features/screens/ScreensPanel.tsx b/app/src/features/screens/ScreensPanel.tsx
index d4930f37..ea06219e 100644
--- a/app/src/features/screens/ScreensPanel.tsx
+++ b/app/src/features/screens/ScreensPanel.tsx
@@ -233,7 +233,13 @@ function Artboard({
             : undefined
         }
       >
-        <LiveFrame url={screen.url} device={device} scale={scale} title={screen.name} />
+        <LiveFrame
+          url={screen.url}
+          device={device}
+          scale={scale}
+          title={screen.name}
+          writer={screen.writing ? bot : null}
+        />
         <button
           type="button"
           aria-label={t.open(screen.name)}
diff --git a/app/src/features/screens/cursor.test.tsx b/app/src/features/screens/cursor.test.tsx
new file mode 100644
index 00000000..807649a7
--- /dev/null
+++ b/app/src/features/screens/cursor.test.tsx
@@ -0,0 +1,142 @@
+import { act, cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import { readMark } from "./cursorMark";
+import { LiveFrame } from "./LiveFrame";
+
+afterEach(cleanup);
+
+const PAGE = { width: 1280, height: 800 };
+const VIEW = PAGE;
+const scout = { name: "Scout", color: "#ff6a3d" };
+
+function draw(writer: typeof scout | null = scout) {
+  const view = render(
+    <LiveFrame
+      url="data:text/html,<h1>Bak"
+      device="desktop"
+      scale={0.5}
+      title="home.html"
+      writer={writer}
+    />,
+  );
+  const frame = view.container.querySelector("iframe") as HTMLIFrameElement;
+  return { view, frame };
+}
+
+function say(data: unknown, source: Window | null) {
+  act(() => {
+    window.dispatchEvent(new MessageEvent("message", { data, source }));
+  });
+}
+
+describe("the bot's cursor on a screen", () => {
+  test("follows what the draft's script says, scaled to the artboard", () => {
+    const { view, frame } = draw();
+    expect(view.container.querySelector(".bot-cursor")).toBeNull();
+    say(
+      {
+        botloft: "cursor",
+        view: VIEW,
+        point: { x: 200, y: 120 },
+        box: { x: 64, y: 100, width: 400, height: 40 },
+      },
+      frame.contentWindow,
+    );
+    const cursor = view.container.querySelector(".bot-cursor") as HTMLElement;
+    expect(cursor.style.left).toBe("100px");
+    expect(cursor.style.top).toBe("60px");
+    expect(cursor.textContent).toContain("Scout");
+    const box = cursor.previousElementSibling as HTMLElement;
+    expect(box.style.left).toBe(`${64 * 0.5 - 3}px`);
+    expect(box.style.width).toBe(`${400 * 0.5 + 6}px`);
+
+    // Nothing on the page yet: it waits at the top.
+    say({ botloft: "cursor", view: VIEW, point: null, box: null }, frame.contentWindow);
+    expect((view.container.querySelector(".bot-cursor") as HTMLElement).style.left).toBe("20px");
+  });
+
+  test("the next version's mark shows once that version is on show", () => {
+    const { view } = draw();
+    const next = (url: string) => (
+      <LiveFrame url={url} device="desktop" scale={0.5} title="home.html" writer={scout} />
+    );
+    view.rerender(next("data:text/html,<h1>Bakery"));
+    const [, back] = view.container.querySelectorAll("iframe");
+    say(
+      { botloft: "cursor", view: VIEW, point: { x: 400, y: 200 }, box: null },
+      (back as HTMLIFrameElement).contentWindow,
+    );
+    expect(view.container.querySelector(".bot-cursor")).toBeNull();
+
+    act(() => {
+      back?.dispatchEvent(new Event("load"));
+    });
+    const cursor = view.container.querySelector(".bot-cursor") as HTMLElement;
+    expect(cursor.style.left).toBe("200px");
+  });
+
+  test("hears only its own frames, and only while the bot writes", () => {
+    const { view, frame } = draw();
+    say({ botloft: "cursor", view: VIEW, point: { x: 10, y: 10 }, box: null }, window);
+    expect(view.container.querySelector(".bot-cursor")).toBeNull();
+
+    view.rerender(
+      <LiveFrame
+        url="data:text/html,<h1>Bakery"
+        device="desktop"
+        scale={0.5}
+        title="home.html"
+        writer={null}
+      />,
+    );
+    say({ botloft: "cursor", view: VIEW, point: { x: 10, y: 10 }, box: null }, frame.contentWindow);
+    expect(view.container.querySelector(".bot-cursor")).toBeNull();
+  });
+});
+
+describe("reading a mark", () => {
+  test("keeps it inside the page and drops what is not one", () => {
+    expect(readMark("hi", PAGE)).toBeUndefined();
+    expect(readMark({ botloft: "other" }, PAGE)).toBeUndefined();
+    // Without the size it measured in, it cannot be placed.
+    expect(readMark({ botloft: "cursor", point: { x: 1, y: 1 }, box: null }, PAGE)).toBeUndefined();
+    // Measured in a view zoomed wider than the page: scaled back.
+    expect(
+      readMark(
+        {
+          botloft: "cursor",
+          view: { width: 1600, height: 1000 },
+          point: { x: 800, y: 500 },
+          box: null,
+        },
+        PAGE,
+      )?.point,
+    ).toEqual({ x: 640, y: 400 });
+    expect(
+      readMark({ botloft: "cursor", view: VIEW, point: { x: -5, y: 9000 }, box: null }, PAGE)
+        ?.point,
+    ).toEqual({ x: 0, y: 800 });
+    expect(
+      readMark(
+        {
+          botloft: "cursor",
+          view: VIEW,
+          point: null,
+          box: { x: 1200, y: 10, width: 500, height: 20 },
+        },
+        PAGE,
+      )?.box,
+    ).toEqual({ x: 1200, y: 10, width: 80, height: 20 });
+    expect(
+      readMark(
+        {
+          botloft: "cursor",
+          view: VIEW,
+          point: { x: "1", y: 2 },
+          box: { x: 2000, y: 0, width: 5, height: 5 },
+        },
+        PAGE,
+      ),
+    ).toEqual({ point: null, box: null });
+  });
+});
diff --git a/app/src/features/screens/cursorMark.ts b/app/src/features/screens/cursorMark.ts
new file mode 100644
index 00000000..c3771faa
--- /dev/null
+++ b/app/src/features/screens/cursorMark.ts
@@ -0,0 +1,52 @@
+// Where the bot is writing on a screen (spec 22.3): what the script in each
+// draft tells the app. The page is the bot's, so only numbers are read, and
+// they are kept inside the page.
+
+export interface Mark {
+  /** The end of what is written, in the page's pixels. */
+  point: { x: number; y: number } | null;
+  /** The part of the page around it. */
+  box: { x: number; y: number; width: number; height: number } | null;
+}
+
+const finite = (value: unknown): value is number =>
+  typeof value === "number" && Number.isFinite(value);
+const clamp = (value: number, max: number) => Math.min(max, Math.max(0, value));
+
+/**
+ * The mark in a message, in the pixels of `page`; `undefined` when the
+ * message is not one. The script measures in the view it sees, which is
+ * wider than the page where an outer zoom scales the frame (the preview's).
+ */
+export function readMark(data: unknown, page: { width: number; height: number }): Mark | undefined {
+  if (typeof data !== "object" || data === null) {
+    return undefined;
+  }
+  const { botloft, view, point, box } = data as {
+    botloft?: unknown;
+    view?: { width?: unknown; height?: unknown } | null;
+    point?: { x?: unknown; y?: unknown } | null;
+    box?: { x?: unknown; y?: unknown; width?: unknown; height?: unknown } | null;
+  };
+  if (botloft !== "cursor" || !view || !finite(view.width) || view.width < 1) {
+    return undefined;
+  }
+  const factor = page.width / view.width;
+  let found: Mark["box"] = null;
+  if (box && finite(box.x) && finite(box.y) && finite(box.width) && finite(box.height)) {
+    const left = clamp(box.x * factor, page.width);
+    const top = clamp(box.y * factor, page.height);
+    const right = clamp((box.x + box.width) * factor, page.width);
+    const bottom = clamp((box.y + box.height) * factor, page.height);
+    if (right - left >= 1 && bottom - top >= 1) {
+      found = { x: left, y: top, width: right - left, height: bottom - top };
+    }
+  }
+  return {
+    point:
+      point && finite(point.x) && finite(point.y)
+        ? { x: clamp(point.x * factor, page.width), y: clamp(point.y * factor, page.height) }
+        : null,
+    box: found,
+  };
+}
diff --git a/app/src/lib/fakeScreens.ts b/app/src/lib/fakeScreens.ts
index afc0b4d6..5f489819 100644
--- a/app/src/lib/fakeScreens.ts
+++ b/app/src/lib/fakeScreens.ts
@@ -1,11 +1,30 @@
 // The fake daemon's design area (spec 22): a bot's HTML screens and the
 // drafts it streams while writing one. Addresses are `data:` URLs, so the
-// preview renders them without a daemon.
+// preview renders them without a daemon. Drafts carry the daemon's own
+// cursor script, as `/view` serves them (spec 22.3).
 
+import cursorScript from "../../../crates/botloftd/src/screens/cursor.js?raw";
 import type { FakeBotloft, Handlers } from "./fake";
 import type { BotId, Screen, ScreenDevice } from "./protocol.gen";
 
 const pageUrl = (html: string) => `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;
+const DOCTYPE = "<!doctype";
+
+/** The draft with the cursor script first, after the doctype, as the daemon does. */
+export function withCursor(html: string): string {
+  const script = `<script data-botloft-cursor>${cursorScript}</script>`;
+  const rest = html.replace(/^[\uFEFF\s]+/, "");
+  const start = html.length - rest.length;
+  if (rest.slice(0, DOCTYPE.length).toLowerCase() === DOCTYPE) {
+    const close = rest.indexOf(">");
+    const at = start + close + 1;
+    return close < 0 ? html : `${html.slice(0, at)}${script}${html.slice(at)}`;
+  }
+  if (rest.length > 0 && rest.length < DOCTYPE.length && DOCTYPE.startsWith(rest.toLowerCase())) {
+    return html;
+  }
+  return `${script}${html}`;
+}
 
 export class FakeScreens {
   private readonly screens = new Map<BotId, Screen[]>();
@@ -42,7 +61,7 @@ export class FakeScreens {
     this.revs.set(path, rev);
     this.fake.emit({
       name: "screen.draft",
-      params: { botId, path, url: pageUrl(html), rev, bytes: html.length, done },
+      params: { botId, path, url: pageUrl(withCursor(html)), rev, bytes: html.length, done },
     });
   }
 
diff --git a/app/src/motion.css b/app/src/motion.css
index 9d1c944b..4a37a20b 100644
--- a/app/src/motion.css
+++ b/app/src/motion.css
@@ -191,7 +191,7 @@
 /* The bot's browser, live (features/browser): its cursor glides to each
    point it acts on, a ring spreads where it clicks once the cursor gets
    there, and a dot pulses while the page is live. */
-.browser-cursor {
+.bot-cursor {
   position: absolute;
   display: flex;
   align-items: flex-start;
@@ -202,7 +202,7 @@
     top 520ms var(--ease-out);
 }
 
-.browser-cursor > span {
+.bot-cursor > span {
   margin-top: 14px;
 }
 
@@ -217,7 +217,7 @@
   animation: ripple 700ms var(--ease-out) 420ms both;
 }
 
-.browser-typing {
+.bot-typing {
   letter-spacing: 1px;
   animation: caret 0.9s steps(2, jump-none) infinite;
 }
diff --git a/app/vite.config.ts b/app/vite.config.ts
index ad92734e..3da1f5c3 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -1,6 +1,8 @@
 import process from "node:process";
+import { fileURLToPath } from "node:url";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
+import { searchForWorkspaceRoot } from "vite";
 import { defineConfig } from "vitest/config";
 
 // Set by `tauri dev` when targeting a remote device; unused on desktop.
@@ -17,6 +19,15 @@ export default defineConfig({
     host: host || false,
     hmr: host ? { protocol: "ws", host, port: 1421 } : undefined,
     watch: { ignored: ["**/src-tauri/**"] },
+    // The fake daemon's drafts use the daemon's own cursor script, so its
+    // folder is the one served from outside the app (a `?raw` import is
+    // checked with its query, which a single file path never matches).
+    fs: {
+      allow: [
+        searchForWorkspaceRoot(process.cwd()),
+        fileURLToPath(new URL("../crates/botloftd/src/screens", import.meta.url)),
+      ],
+    },
   },
   build: {
     // WebView2 on Windows is evergreen Chromium.
diff --git a/crates/botloftd/src/screens/cursor.js b/crates/botloftd/src/screens/cursor.js
new file mode 100644
index 00000000..c099f64b
--- /dev/null
+++ b/crates/botloftd/src/screens/cursor.js
@@ -0,0 +1,86 @@
+// The bot's cursor on a screen it is writing (spec 22.3). The daemon puts
+// this first in every draft it serves. Once the page is read, it finds where
+// the content ends right now (the end of the newest text, or the newest
+// element), keeps that spot in view and tells the app where it is and which
+// part of the page holds it, in the page's pixels, with the size of the view
+// they are measured in. It changes nothing else.
+(() => {
+  const SKIP = new Set(["SCRIPT", "STYLE", "TEMPLATE", "NOSCRIPT", "BR", "WBR"]);
+  const shown = (rect) => rect !== undefined && (rect.width > 0 || rect.height > 0);
+
+  const end = () => {
+    const body = document.body;
+    if (!body) {
+      return null;
+    }
+    const walk = document.createTreeWalker(body, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
+    const nodes = [];
+    for (let node = walk.nextNode(); node; node = walk.nextNode()) {
+      nodes.push(node);
+    }
+    for (let at = nodes.length - 1; at >= 0; at -= 1) {
+      const node = nodes[at];
+      const element = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+      if (!element || element.closest("script, style, template, noscript") || SKIP.has(element.tagName)) {
+        continue;
+      }
+      if (node.nodeType === Node.TEXT_NODE) {
+        if (!node.data.trim()) {
+          continue;
+        }
+        const range = document.createRange();
+        range.selectNodeContents(node);
+        const lines = range.getClientRects();
+        const last = lines[lines.length - 1];
+        if (shown(last)) {
+          return { element, x: last.right, y: last.top + last.height / 2 };
+        }
+      } else {
+        const box = element.getBoundingClientRect();
+        if (shown(box)) {
+          return { element, x: box.left + box.width / 2, y: box.top + box.height / 2 };
+        }
+      }
+    }
+    return null;
+  };
+
+  // The part of the page around the spot: the nearest element that is not
+  // inline text, short of the whole page.
+  const part = (element) => {
+    let current = element;
+    while (current.parentElement && getComputedStyle(current).display === "inline") {
+      current = current.parentElement;
+    }
+    return current === document.body || current === document.documentElement ? null : current;
+  };
+
+  const follow = () => {
+    // A frame from another origin runs in its own process and learns its
+    // size a moment after the page is read: measure once it has one.
+    if (innerWidth === 0 || innerHeight === 0) {
+      addEventListener("resize", follow, { once: true });
+      return;
+    }
+    let spot = end();
+    if (spot && (spot.y > innerHeight * 0.85 || spot.y < 0)) {
+      scrollTo({ top: scrollY + spot.y - innerHeight * 0.6, behavior: "instant" });
+      spot = end();
+    }
+    const around = spot && part(spot.element);
+    const box = around?.getBoundingClientRect();
+    parent.postMessage(
+      {
+        botloft: "cursor",
+        view: { width: innerWidth, height: innerHeight },
+        point: spot ? { x: spot.x, y: spot.y } : null,
+        box: box ? { x: box.left, y: box.top, width: box.width, height: box.height } : null,
+      },
+      "*",
+    );
+  };
+
+  addEventListener("DOMContentLoaded", follow);
+  // Images and fonts move things once they arrive.
+  addEventListener("load", follow);
+})();
diff --git a/crates/botloftd/src/screens/cursor.rs b/crates/botloftd/src/screens/cursor.rs
new file mode 100644
index 00000000..5105a835
--- /dev/null
+++ b/crates/botloftd/src/screens/cursor.rs
@@ -0,0 +1,66 @@
+//! The bot's cursor on a screen it writes (spec 22.3): each draft served
+//! carries a small script that tells the app where the page ends now.
+
+const SCRIPT: &str = include_str!("cursor.js");
+const DOCTYPE: &str = "<!doctype";
+
+/// `html` with the cursor script first: right after the doctype, which has
+/// to stay first for the page to keep its layout mode, or at the very top.
+/// A doctype still being written gets no script this time.
+pub(super) fn with_cursor(html: &str) -> String {
+    let script = format!("<script data-botloft-cursor>{SCRIPT}</script>");
+    let rest = html.trim_start_matches(['\u{feff}', ' ', '\t', '\r', '\n']);
+    let start = html.len() - rest.len();
+    let head = rest.get(..DOCTYPE.len());
+    if head.is_some_and(|head| head.eq_ignore_ascii_case(DOCTYPE)) {
+        return match rest.find('>') {
+            Some(close) => {
+                let at = start + close + 1;
+                format!("{}{script}{}", &html[..at], &html[at..])
+            }
+            None => html.to_owned(),
+        };
+    }
+    let begun = rest.len() < DOCTYPE.len()
+        && !rest.is_empty()
+        && DOCTYPE.starts_with(&rest.to_ascii_lowercase());
+    if begun {
+        return html.to_owned();
+    }
+    format!("{script}{html}")
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    const TAG: &str = "<script data-botloft-cursor>";
+
+    #[test]
+    fn the_script_goes_after_the_doctype_or_first() {
+        let page = with_cursor("<!DOCTYPE html>\n<h1>Bak");
+        assert!(page.starts_with("<!DOCTYPE html><script data-botloft-cursor>"));
+        assert!(page.ends_with("</script>\n<h1>Bak"));
+
+        let bare = with_cursor("<h1>Bak");
+        assert!(bare.starts_with(TAG));
+        assert!(bare.ends_with("</script><h1>Bak"));
+
+        let marked = with_cursor("\u{feff}  <!doctype html><p>é</p>");
+        assert!(marked.starts_with("\u{feff}  <!doctype html><script"));
+    }
+
+    #[test]
+    fn a_doctype_being_written_waits() {
+        assert_eq!(with_cursor("<!doc"), "<!doc");
+        assert_eq!(with_cursor("<!DOCTYPE htm"), "<!DOCTYPE htm");
+        assert_eq!(with_cursor("<"), "<");
+        assert!(with_cursor("<p>").starts_with(TAG));
+        assert!(with_cursor("").starts_with(TAG));
+    }
+
+    #[test]
+    fn the_script_never_closes_early() {
+        assert!(!SCRIPT.contains("</script"));
+    }
+}
diff --git a/crates/botloftd/src/screens/mod.rs b/crates/botloftd/src/screens/mod.rs
index eabf150e..cc9804e0 100644
--- a/crates/botloftd/src/screens/mod.rs
+++ b/crates/botloftd/src/screens/mod.rs
@@ -2,6 +2,7 @@
 //! and the drafts of the HTML files bots are writing right now, read from
 //! the tool input Claude Code streams while the model writes it.
 
+mod cursor;
 mod partial;
 mod place;
 mod view;
diff --git a/crates/botloftd/src/screens/view.rs b/crates/botloftd/src/screens/view.rs
index d02d37b1..320b4b57 100644
--- a/crates/botloftd/src/screens/view.rs
+++ b/crates/botloftd/src/screens/view.rs
@@ -10,6 +10,7 @@ use axum::response::{IntoResponse, Response};
 use tracing::debug;
 
 use super::Place;
+use super::cursor::with_cursor;
 use super::place::{Root, roots};
 use crate::service::files::media_type;
 use crate::state::Daemon;
@@ -61,8 +62,8 @@ pub async fn handle(
     response
 }
 
-/// The bytes and type at a `/view` address: the draft being written, or
-/// the file, if it is inside the folder.
+/// The bytes and type at a `/view` address: the draft being written, with
+/// the bot's cursor, or the file, if it is inside the folder.
 async fn find(
     daemon: &Daemon,
     key: &str,
@@ -73,7 +74,7 @@ async fn find(
     let place = Place::from_request(root, rel)?;
     let media = media_type(&place.rel);
     if let Some(draft) = daemon.screens.draft(&bot, &place) {
-        return Some((draft.into_bytes(), media));
+        return Some((with_cursor(&draft).into_bytes(), media));
     }
     let (work, workspace) = roots(daemon, &bot)?;
     let folder = match place.root {
diff --git a/crates/botloftd/tests/screens.rs b/crates/botloftd/tests/screens.rs
index 32632dd8..48e277de 100644
--- a/crates/botloftd/tests/screens.rs
+++ b/crates/botloftd/tests/screens.rs
@@ -13,6 +13,9 @@ use serde_json::{Value, json};
 use tokio::io::{AsyncReadExt, AsyncWriteExt};
 use tokio::net::TcpStream;
 
+/// How a draft served with the bot's cursor starts (spec 22.3).
+const CURSOR: &str = "<script data-botloft-cursor>";
+
 struct Page {
     status: u16,
     head: String,
@@ -103,7 +106,9 @@ async fn a_screen_is_built_live_and_then_read_from_disk() {
 
     let page = get(t.addr, &url, None).await;
     assert_eq!(page.status, 200);
-    assert_eq!(page.body, "<h1>Bak");
+    // The bot's cursor comes first, then what the bot wrote so far.
+    assert!(page.body.starts_with(CURSOR), "{}", page.body);
+    assert!(page.body.ends_with("</script><h1>Bak"), "{}", page.body);
     assert!(
         page.head
             .contains("content-security-policy: sandbox allow-scripts")
@@ -118,7 +123,12 @@ async fn a_screen_is_built_live_and_then_read_from_disk() {
     let last = draft(&mut app).await;
     assert!(last["rev"].as_u64() > first["rev"].as_u64());
     let page = get(t.addr, last["url"].as_str().expect("url"), None).await;
-    assert_eq!(page.body, "<h1>Bakery</h1>\n<p>Fresh \"bread\"</p>");
+    assert!(
+        page.body
+            .ends_with("</script><h1>Bakery</h1>\n<p>Fresh \"bread\"</p>"),
+        "{}",
+        page.body
+    );
 
     // Not on disk yet: listed from the draft, being written.
     let screens = app
@@ -151,6 +161,7 @@ async fn a_screen_is_built_live_and_then_read_from_disk() {
         "{}",
         page.body
     );
+    assert!(!page.body.contains(CURSOR), "the file is served as it is");
 
     let screens = app
         .call("screens.list", json!({ "botId": bot["id"] }))
diff --git a/docs/spec.md b/docs/spec.md
index 85b65544..6516f9c4 100644
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -782,6 +782,7 @@ Conferência na documentação oficial (code.claude.com/docs) em 2026-09-28. "Co
 | Tools do navegador com o Claude Code real | 21 | **Testado com 2.1.284** (daemon e app de dev, Haiku, modo Manual): o bot carregou `browser_open`, `browser_click`, `browser_look` e `browser_screenshot` pelo `ToolSearch`; o pedido de example.com apareceu no chat e, permitido, ele abriu a página e clicou no link, que levou ao iana.org; o `browser_screenshot` lá pediu o iana.org, e o segundo screenshot não pediu de novo. O painel mostrou a página e o cursor ao vivo. Pausar o bot fechou o navegador (os processos do Edge sumiram). O log de `debug` só teve nomes de tools, métodos e ids | feito |
 | Rascunho de tela a partir do `Write` | 22.3 | **Visto com 2.1.284**: com `--include-partial-messages`, o `Write` chega em `stream_event` (`content_block_start` com `tool_use` e `name: "Write"`, depois `input_json_delta`; 379 pedaços para um arquivo de 3 KB). **Testado com 2.1.284** (daemon e app de dev, Haiku, modo Manual): pedida uma landing page, a área de design abriu sozinha e a página se montou versão a versão (umas 70 de 8 KB) antes do OK para gravar; permitido, a tela passou a vir do disco. Numa segunda página, negar o `Write` tirou a tela da área de design. O log de `debug` só teve status e ids. O painel do navegador do app de desktop do Claude bloqueia `iframe` para 127.0.0.1 (`ERR_BLOCKED_BY_CLIENT`), então a prévia foi vista num Edge sem janela | feito |
 | Dono no controle com o Claude Code real | 21.10 | **Testado com 2.1.284** (daemon e app de dev, Haiku, modo Manual): pedido para abrir uma página de login local e chamar o dono, o bot carregou `browser_ask_owner` pelo `ToolSearch` sozinho, com a tarefa na língua do dono. Pelo cartão, o painel abriu já nas mãos do dono; clique, digitação, troca de campo e Enter chegaram ao Edge, e a página de login entrou na conta. Devolvido, a tool respondeu com a página nova e o bot listou os pedidos. A senha digitada não apareceu no log, no banco nem na conversa do Claude Code (o bot leu só o que a página mostrava). Numa página comprida, a roda do mouse sobre a tela ao vivo rolou a página do bot e não o painel | feito |
+| Cursor do bot nas telas | 22.3 | **Testado com 2.1.284** (daemon e app de dev, Haiku, modo Manual), com o app num Edge sem janela: pedidas quatro páginas (floricultura, cafeteria, livraria, academia), o cursor seguiu o título, cada cartão, cada item de plano e cada linha de tabela enquanto o bot escrevia, e a prancheta rolou junto. Visto aqui: num `iframe` de outra origem, o script às vezes lê a página com `innerHeight` 0 e só depois recebe o tamanho (por isso a espera do `resize`); a versão escondida fala antes de ir para a frente (por isso vale a marca do quadro à mostra). O conteúdo das páginas não foi para o log | feito |
 | Telas no WebView2 do app | 22.5 | Não visto: a CSP do Tauri com `frame-src http://127.0.0.1:*` e as telas carregando no `iframe` | manual (PR): `pnpm tauri dev`, pedir uma página HTML a um bot e ver a área de design |
 
 Itens do runtime anterior (ConPTY, hooks em exec form, `crossSessionInbound`, linha de auth do inbox, diálogo de confiança, `ESC[6n` do ConPTY, consultas do terminal no replay) foram verificados no M2–M4 e deixaram de se aplicar com a ADR 0001; o histórico está no git e na ADR.
@@ -1096,7 +1097,7 @@ O dono pode usar o navegador do bot com as próprias mãos: clicar, arrastar, ro
 
 ## 22. Telas
 
-Status: **T1 e T2 implementados** (22.8). É o N4 da seção 21.
+Status: **T1, T2 e T3 implementados** (22.8). É o N4 da seção 21.
 
 ### 22.1 O que é
 
@@ -1111,7 +1112,7 @@ Uma área de design ao lado do chat: cada página HTML que o bot faz aparece com
 
 - `GET /view/<chave>/<raiz>/<caminho>`, no mesmo servidor do daemon (só 127.0.0.1). A `<chave>` tem 128 bits aleatórios, é uma por bot, fica só na memória e muda a cada início do daemon; só o app a recebe, em `screens.list`. `<raiz>` é `w` (pasta de trabalho da crew) ou `b` (pasta do bot). O caminho é resolvido de verdade e precisa ficar dentro da raiz: `..`, links para fora e entradas ocultas dão 404, sem dizer por quê. CSS, imagens, fontes e scripts ao lado do HTML carregam pelo mesmo caminho, como num site.
 - Toda resposta leva `Content-Security-Policy: sandbox allow-scripts allow-forms allow-popups allow-modals`: a página roda numa origem opaca, sem acesso ao daemon nem aos cookies e ao armazenamento de 127.0.0.1, também se aberta direto. E ainda `Cache-Control: no-store`, `X-Content-Type-Options: nosniff`, `Referrer-Policy: no-referrer` e, para um pedido com `Origin: null` (a própria tela buscando um arquivo dela), `Access-Control-Allow-Origin: null`. O tipo sai da extensão (8.4). Acima de 20 MiB, 404.
-- Enquanto um arquivo tem rascunho, o endereço dele serve o rascunho.
+- Enquanto um arquivo tem rascunho, o endereço dele serve o rascunho, com o script do cursor do bot (22.3). O arquivo do disco é servido como está.
 - A CSP do app ganha `frame-src http://127.0.0.1:*`: as telas abrem num `iframe` do endereço delas, com os próprios scripts e as bibliotecas que carregam da internet, o que não funcionaria num `srcdoc`, que herda a CSP do app.
 - O log registra só o status, em `debug`.
 
@@ -1121,6 +1122,7 @@ Uma área de design ao lado do chat: cada página HTML que o bot faz aparece com
 - Do JSON parcial, o daemon tira `file_path` (quando a string dele fecha) e o começo de `content` que já chegou, com os escapes completos desfeitos. Só vira rascunho um `.html` ou `.htm` numa das duas raízes.
 - Notificação `screen.draft {botId, path, url, rev, done}`: `url` já aponta para aquela versão (`?rev=<n>`), no máximo uma a cada 250 ms e uma quando a escrita fecha. O rascunho fica até o resultado daquele `tool_use` chegar (gravado, negado ou com erro), e então sai uma última com `done: true`, e o endereço volta a servir o disco. Um arquivo que o dono negou some da área de design. O fim do turno (`result`) também fecha os rascunhos que sobraram.
 - Rascunho não vai para o banco, para o disco nem para o log.
+- **Cursor do bot:** cada rascunho servido leva primeiro um script pequeno do daemon (`<script data-botloft-cursor>`), logo depois do `<!doctype>`, que precisa continuar primeiro para a página manter o modo de layout; sem doctype, no começo. Um doctype ainda sendo escrito fica sem script naquela versão. Quando a página termina de ler (`DOMContentLoaded`) e de novo no `load`, o script acha onde o conteúdo acaba agora: o fim do texto mais novo, ou o centro do elemento mais novo com tamanho, fora `script`, `style`, `template` e `noscript`. Se esse ponto está abaixo de 85% da altura da tela, rola a página para ele ficar a 60%. Um `iframe` de outra origem roda em outro processo e pode ler a página antes de saber o próprio tamanho (`innerHeight` 0, visto no Edge 154); então o script espera o `resize` antes de medir. Por fim manda ao app, por `postMessage`, `{botloft: "cursor", view, point, box}`: `view` é o tamanho da tela em que mediu, e `point` e `box` vêm nos pixels dela: o ponto e a caixa da parte em volta (o elemento mais próximo que não é texto em linha, menos a página inteira). Sem nada visível ainda (o bot escrevendo o CSS), `point` e `box` vão `null`. O script não muda mais nada na página.
 
 ### 22.4 Protocolo
 
@@ -1140,12 +1142,14 @@ Uma área de design ao lado do chat: cada página HTML que o bot faz aparece com
 - Até 12 telas no quadro; "Mostrar mais" traz as outras.
 - Sem telas: o mascote e "<bot> ainda não fez nenhuma tela", com a explicação de que cada página HTML que ele escrever aparece ali e se monta enquanto ele escreve.
 - No chat, a linha de um `Write` ou `Edit` de `.html` que não falhou ganha "Ver em telas", que abre o painel nessa tela.
+- **Cursor:** na prancheta e na tela em foco, enquanto o bot escreve, o cursor dele (a seta na cor do bot, com o nome e os três pontos de quem escreve, o mesmo do navegador) desliza até o ponto que o rascunho diz (22.3), e uma moldura na cor do bot marca a parte que está nascendo. Sem ponto ainda, o cursor espera no canto de cima. O app converte as medidas pela largura de `view` (numa prévia com zoom de CSS, o `iframe` vê mais pixels que o aparelho). Cada versão nova carrega por trás e fala antes de ir para a frente: vale a marca do `iframe` que está à mostra, para o cursor e a moldura baterem com o que se vê. Perto da borda direita, o nome passa para a esquerda da seta. O cursor e a moldura ficam em cima da tela, no tamanho do app, não da prancheta, e somem quando a escrita termina.
 - Textos nos três idiomas (15.6).
 
 ### 22.6 Segurança
 
 - A tela roda HTML e JavaScript escritos pelo bot. A CSP de sandbox (22.2) a isola do app e do daemon; o `iframe` no app também usa `sandbox="allow-scripts allow-forms allow-popups allow-modals"`, sem `allow-same-origin`. Um script da tela pode acessar a internet, como a própria página abriria num navegador.
 - A chave só dá leitura, só dos arquivos das duas raízes, e some quando o daemon reinicia.
+- O script do cursor (22.3) roda dentro da mesma sandbox, com a página do bot, e só manda números. O app aceita a mensagem só de um dos seus próprios `iframe`s, lê só números finitos e os prende ao tamanho da página; a página não tem como mover o cursor para fora da prancheta nem mandar outra coisa ao app.
 
 ### 22.7 Fora desta etapa
 
@@ -1160,3 +1164,4 @@ Uma área de design ao lado do chat: cada página HTML que o bot faz aparece com
 |---|---|---|
 | **T1** Telas no daemon | rascunho a partir do stream, JSON parcial, `/view` com sandbox, `screens.list`, `screen.draft`, regras do bot, testes com `FakeRuntime` | um `Write` de `.html` transmitido pelo `FakeRuntime` aparece como rascunho em `/view` e vira o arquivo depois do resultado |
 | **T2** Área de design | painel de telas, quadro com zoom, tela em foco, aparelhos, escrita ao vivo, "Ver em telas" no chat, textos nos três idiomas | ver pelo app um bot real escrever uma tela e ela se montar enquanto ele escreve |
+| **T3** Cursor do bot | script do cursor nos rascunhos, cursor e moldura na prancheta e na tela em foco, a prévia com o mesmo script | ver pelo app um bot real escrever uma tela com o cursor dele seguindo cada parte que nasce |