From 4fdfbe58fd447ae377acaf52d663ed445530a576 Mon Sep 17 00:00:00 2001
From: Phelipe Lorran <112786693+httpsphl@users.noreply.github.com>
Date: Tue, 29 Sep 2026 15:46:39 -0300
Subject: [PATCH 1/2] feat(screens): drafts carry the bot's cursor script

Each draft served at /view gets a small script first, after the doctype
so the page keeps its layout mode. Once the page is read it finds where
the content ends (the newest text, or the newest element), scrolls so
that spot stays in view, and posts the point, the part around it and the
view size it measured in to the app. A frame from another origin may read
the page before it knows its size, so the script waits for the resize.
The file on disk is served untouched.

Spec 22.3, 22.5, 22.6 and T3; tested with the real Claude Code.
---
 crates/botloftd/src/screens/cursor.js | 86 +++++++++++++++++++++++++++
 crates/botloftd/src/screens/cursor.rs | 66 ++++++++++++++++++++
 crates/botloftd/src/screens/mod.rs    |  1 +
 crates/botloftd/src/screens/view.rs   |  7 ++-
 crates/botloftd/tests/screens.rs      | 15 ++++-
 docs/spec.md                          |  9 ++-
 6 files changed, 177 insertions(+), 7 deletions(-)
 create mode 100644 crates/botloftd/src/screens/cursor.js
 create mode 100644 crates/botloftd/src/screens/cursor.rs

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 |

From dc151efcd2bd218d6c09033b2a02aa4d00653978 Mon Sep 17 00:00:00 2001
From: Phelipe Lorran <112786693+httpsphl@users.noreply.github.com>
Date: Tue, 29 Sep 2026 15:46:39 -0300
Subject: [PATCH 2/2] feat(app): the bot's cursor follows each part of a screen
 as it is written

While a bot writes a screen, its cursor (the arrow in its color with its
name, shared with the browser as BotCursor) glides to the end of what is
written, and a frame in its color marks the part being built, on the
artboard and on the screen in focus. Only the frame on show counts, so
the cursor matches what is seen; measures are scaled by the view the
script saw. With nothing visible yet the cursor waits at the top; near
the right or bottom edge its name moves aside. The preview's drafts use
the daemon's own script, and it writes at a pace closer to a model's.
---
 app/src/dev/seedScreens.ts                |   2 +-
 app/src/features/bots/BotCursor.tsx       |  63 ++++++++++
 app/src/features/browser/LiveView.tsx     |  39 ++----
 app/src/features/browser/browser.test.tsx |   2 +-
 app/src/features/screens/LiveFrame.tsx    |  67 +++++++++-
 app/src/features/screens/ScreenFocus.tsx  |   1 +
 app/src/features/screens/ScreensPanel.tsx |   8 +-
 app/src/features/screens/cursor.test.tsx  | 142 ++++++++++++++++++++++
 app/src/features/screens/cursorMark.ts    |  52 ++++++++
 app/src/lib/fakeScreens.ts                |  23 +++-
 app/src/motion.css                        |   6 +-
 app/vite.config.ts                        |  11 ++
 12 files changed, 373 insertions(+), 43 deletions(-)
 create mode 100644 app/src/features/bots/BotCursor.tsx
 create mode 100644 app/src/features/screens/cursor.test.tsx
 create mode 100644 app/src/features/screens/cursorMark.ts

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.