copy(web): hero comma-split display; §01 Setup subsections; §03 absorbs MCP; §04 signup retitle

- Hero display 'Point at the view, pass the agent a map.' sets one clause
  per line, broken at the comma (Hero.tsx splits on it); standfirst
  rewritten; OG card regenerated
- §01 retitled Setup; the Xcode/SwiftUI asides gain titled h3 subsections
  with clearer, README-grounded steps; mount snippet indents install();
  README link hugs its label (.stack > .link justify-self)
- §02 Click/Frame/Anchor rewritten outcome-first
- §03 'Hand it to your agent' absorbs 'Ask over MCP' as an h3 subsection
  (id=mcp keeps the old anchor); McpBridge.tsx and .section--mcp removed;
  Signup renumbered §04
- §04 retitled 'Want more? Sign up for more free tips and tools.' with the
  list scope as the lead; privacy line removed
- web/scripts/hero-check.mjs probes the two-line setting; Appendix A copy
  deck in docs/epic-landing-page.md synced to shipped strings

124/124 tests, build, responsive-check at 320-1280 all pass.

Author: angusbezzina

.beads/interactions.jsonl

@@ -34,3 +34,12 @@
 {"id":"int-c66f1419329a991eb86760fed37ef61c","kind":"field_change","created_at":"2026-08-21T02:46:20.05137Z","actor":"Angus Bezzina","issue_id":"annotkit-0i4.10","extra":{"field":"status","new_value":"closed","old_value":"open","reason":"Closed"}}
 {"id":"int-6f4b0709bef645bef1fa00d3f3dc82d5","kind":"field_change","created_at":"2026-08-21T02:46:27.044421Z","actor":"Angus Bezzina","issue_id":"annotkit-0i4.5","extra":{"field":"status","new_value":"closed","old_value":"open","reason":"Measured, not a defect. The backdrop is viewport-anchored, so its frames sit behind running text on every section at every width, by design and at 10-12% accent on a 1px stroke; there is no §01-scoped fix and the finding's coordinates came from an artificial 4000px-tall viewport. See notes."}}
 {"id":"int-ab2eaeffeb29c6c884d50256e60012f4","kind":"field_change","created_at":"2026-08-21T02:46:39.863426Z","actor":"Angus Bezzina","issue_id":"annotkit-0i4","extra":{"field":"status","new_value":"closed","old_value":"open","reason":"All ten children resolved: nine implemented in web/, one (0i4.5, backdrop) closed as measured-not-a-defect. Gates green: npm run build, npm test (124), npm run responsive (320-1280 PASS). Not committed — conservative profile."}}
+{"id":"int-084d41fc23909ac950e1c16d1da7e283","kind":"field_change","created_at":"2026-08-24T20:05:08.0965Z","actor":"Angus Bezzina","issue_id":"annotkit-dvl.2","extra":{"field":"status","new_value":"open","old_value":"in_progress"}}
+{"id":"int-d3b5dcb4bf335e317ed7f73a3532fbaa","kind":"field_change","created_at":"2026-08-24T20:13:56.94297Z","actor":"Angus Bezzina","issue_id":"annotkit-dvl.2","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Display 'Point at the view, pass the agent a map.' splits at the comma (Hero.tsx); standfirst rewritten with the four brief beats; one honest-copy fix vs brief ('nearest control' was wrong for the frame gesture — now 'locates what you pointed at in code'); OG template + og.png regenerated; hero-check.mjs verifies 2 lines, comma break, no overflow at 1280; responsive-check passes at 320/375/414/768/1280."}}
+{"id":"int-3e963a3bcb51c763f2a089f8d0db0e13","kind":"field_change","created_at":"2026-08-24T20:13:57.213153Z","actor":"Angus Bezzina","issue_id":"annotkit-dvl.5","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"§01 retitled 'Setup' with brief lead; xcode/note asides are now titled h3 subsections (Xcode/SwiftUI) via shared .section__subsec/.section__subhead classes; working-directory warning preserved per README §3; hero CTA now 'Set it up'; tests pass."}}
+{"id":"int-cbb8f2b9a273c26c4b8076f9f2e46bf8","kind":"field_change","created_at":"2026-08-24T20:13:57.521025Z","actor":"Angus Bezzina","issue_id":"annotkit-dvl.3","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"New lead 'Attach notes directly to the elements you want to tweak.'; Click/Frame/Anchor bodies recast active-voice with colon construction; claims traceable to README 120/149-154; markup tests pass."}}
+{"id":"int-f582a4691039882ac03f77ff71807af3","kind":"field_change","created_at":"2026-08-24T20:13:57.806034Z","actor":"Angus Bezzina","issue_id":"annotkit-dvl.1","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"§03 retitled 'Hand it to your agent' with new lead naming the three routes; MCP bridge folded in as h3 subsection (id=mcp preserves the old anchor); mcpBridge copy block and McpBridge.tsx deleted; signup renumbered §04; .section--mcp CSS removed; App.tsx, highlight test, TermList/Signup comments updated; all 124 tests + build pass."}}
+{"id":"int-f191409db097d0817ba39549a2fd36bd","kind":"field_change","created_at":"2026-08-24T20:13:58.075054Z","actor":"Angus Bezzina","issue_id":"annotkit-dvl.4","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"vitest 124/124; production build clean; responsive-check PASS at all five widths; hero-check PASS (2 lines, comma break, no overflow); Appendix A + section list + file tree in docs/epic-landing-page.md synced to shipped copy; honest-copy audit clean — no metrics, filler, or em dashes in copy strings."}}
+{"id":"int-3f6de21d1b8ada2ed206443e45e56ed7","kind":"field_change","created_at":"2026-08-24T20:13:58.693065Z","actor":"Angus Bezzina","issue_id":"annotkit-dvl","extra":{"field":"status","new_value":"closed","old_value":"open","reason":"All five children closed; gates green."}}
+{"id":"int-35c0bb4f4e051d956020fc636c4dbfe2","kind":"field_change","created_at":"2026-08-24T20:23:06.275957Z","actor":"Angus Bezzina","issue_id":"annotkit-6r4","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"All six feedback items fixed and verified visually at 1280: (1) .stack > .link { justify-self: start } stops the grid stretch that made the §01 link's accent rule span the column; label now 'Setup guide'. (2) Annotation.install() indented inside #if DEBUG. (3) Xcode body rewritten as steps grounded in README (Add Package Dependencies…, paste URL, Up to Next Major from 0.8.0, add library, leave AnnotKitMCP unchecked). (4) SwiftUI body split into mount fact + notes-path fact with the scheme path spelled out (Edit Scheme ▸ Run ▸ Options ▸ Working Directory). (5) §02 Click/Frame/Anchor rewritten outcome-first in plain language. (6) Privacy line now ends 'Unsubscribe at any time.' Appendix A synced; 124/124 tests, build, responsive-check at five widths all pass."}}
+{"id":"int-2ed0d7c69581f002560be1723554b3ff","kind":"field_change","created_at":"2026-08-24T20:30:37.553143Z","actor":"Angus Bezzina","issue_id":"annotkit-l9n","extra":{"field":"status","new_value":"closed","old_value":"open","reason":"Landed and verified: copy.ts title/lead replaced verbatim per maintainer; privacy string + .signup__privacy rule + its <p> removed; Appendix A synced; 124/124 tests, build, responsive-check PASS; §04 verified visually at 1280."}}

docs/epic-landing-page.md

@@ -100,8 +100,8 @@ locked in L4, derived only from facts in `README.md`, `DECISIONS.md`, and
 1. **Masthead nav** — wordmark, dateline row (`macOS 15 · iOS 17 · Swift 6 ·
    MIT`), links: GitHub ↗, Updates (in-page anchor).
 2. **Hero** — oversized serif statement + standfirst + typographic CTAs
-   ("Read the README ↗" primary; "Get release notes ↓" secondary anchor).
-   Typography only — no mockup in the fold.
+   ("Set it up ↓" primary anchor; "Read the README ↗" secondary), the muted
+   annotate loop beside the copy in a bare `<figure>`.
 3. **§01 Install** — the two snippets from the README verbatim
    (`Annotation.install()` under `#if DEBUG`; `.installAnnotation()` for
    SwiftUI).
@@ -111,19 +111,20 @@ locked in L4, derived only from facts in `README.md`, `DECISIONS.md`, and
    AnnotKitDemo (click → composer → note) in a bare `<figure>` — the first
    visual on the page, sitting just under the hero fold — with a still figure
    (pin + composer detail) supporting the copy.
-5. **§03 Hand it to the agent** — `ANNOTKIT_NOTES.md` sample excerpt
+5. **§03 Hand it to your agent** — `ANNOTKIT_NOTES.md` sample excerpt
    (backed by a still capture of the written notes file), the sink story
-   (file / clipboard / JSON), the `process-agentation-notes` skill mention.
-6. **§04 Ask over MCP** — optional bridge: `swift run annotkit-mcp`, the two
-   tools (`annotation_get_pending`, `annotation_resolve`).
-7. **§05 Get updates** — the signup form (email only), one honest line about
-   cadence, privacy microcopy.
-8. **Footer** — wordmark + tagline + links (GitHub, Issues, License) + a
+   (file / clipboard / JSON), and the optional MCP bridge as a subsection:
+   `swift run annotkit-mcp`, the two tools (`annotation_get_pending`,
+   `annotation_resolve`). (The bridge was top-level §04 until the
+   2026-08-24 copy pass, epic annotkit-dvl.)
+6. **§04 Get updates** — the signup form (email only), one line naming the
+   list's scope.
+7. **Footer** — wordmark + tagline + links (GitHub, Issues, License) + a
    colophon line (typefaces, license, clean-room note re: the
    `ANNOTKIT_NOTES.md` format).
 
-Every section gets a numbered left-margin label (Specimen macrostructure
-signature): `§01 … §05`.
+Every section gets a numbered label above its heading (Specimen
+macrostructure signature): `§01 … §04`.
 
 ## 6. Design direction (Hallmark)
 
@@ -246,7 +247,7 @@ web/
       base.css            # reset, elements, utilities
     sections/
       Masthead.tsx  Hero.tsx  Install.tsx  Annotate.tsx
-      AgentNotes.tsx  McpBridge.tsx  Signup.tsx  Footer.tsx
+      AgentNotes.tsx  Signup.tsx  Footer.tsx
     components/
       CodeBlock.tsx       # mono block + copy button (8 states)
       SubscribeForm.tsx   # the state machine from §7
@@ -490,59 +491,67 @@ once the maintainer actions below are done.
 
 ---
 
-## Appendix A — Copy deck (draft, locked in L4)
+## Appendix A — Copy deck (revised 2026-08-24, epic annotkit-dvl)
 
 Voice: editorial — specific, verbs over adjectives, slightly literary. Every
 claim traceable to `README.md` / `DECISIONS.md` / `Package.swift`.
-
-**Masthead dateline:** `Native annotation for AI coding agents · macOS 15 ·
-iOS 17 · Swift 6 · MIT`
-
-**Hero display (pick one in L2):**
-- *"Point at the view. Hand the agent the map."*
-- *"Annotate the app. The agent finds the code."*
-
-**Hero standfirst:** "AnnotKit mounts a floating toolbar in your dev build.
-Click a control — or draw a frame around a whole card — type a note, and it
-writes an agent-readable annotation: a stable selector, an element path, a
-screenshot, and your words. Your coding agent stops guessing."
-
-**CTAs:** `Read the README ↗` (github.com/gpu-cli/annotkit) ·
-`Get release notes ↓`
-
-**§01 Install — lead:** "Add the package. Mount the toolbar. Two lines,
-dev builds only."
-
-**§02 Annotate — lead:** "A click means *this exact spot*: AnnotKit descends
-to the deepest actionable control. A drawn frame means *this whole thing*:
-the largest element the frame surrounds wins. One rule, both platforms — the
-selector anchors itself to the nearest `accessibilityIdentifier`, so it
-round-trips back to code."
-
-**§03 Hand it to the agent — lead:** "Notes land in `ANNOTKIT_NOTES.md` —
-the format the `process-agentation-notes` skill consumes — or on the
-clipboard, or as JSON."
-
-**§04 Ask over MCP — lead:** "Run the optional bridge and let the agent ask
-what's pending: `annotation_get_pending`, `annotation_resolve`."
-
-**§05 Get updates:**
-- Heading: *"One email when it's worth reading."*
-- Body: "Releases, design notes, and the 1.0 call. No digest, no drip
-  campaign — AnnotKit is 0.x and honest about it."
+`web/src/copy.ts` is the source of truth; this deck mirrors what shipped.
+
+**Masthead dateline:** `A Swift package: native annotation for AI coding
+agents · macOS 15 · iOS 17 · Swift 6 · MIT`
+
+**Hero display:** *"Point at the view, pass the agent a map."* — one
+sentence, two clauses, set one clause per line with the break at the comma
+(Hero.tsx splits on it).
+
+**Hero standfirst:** "AnnotKit mounts a floating toolbar in your macOS or
+iOS dev build. Click an element, or draw a frame around a region, and type
+a note. The note carries a selector that locates what you pointed at in
+code. Your agent stops guessing what to change and where."
+
+**CTAs:** `Set it up ↓` (#install) · `Read the README ↗`
+(github.com/gpu-cli/annotkit)
+
+**§01 Setup — lead:** "Add the package, then mount the toolbar in your dev
+build's window." Titled subsections beside the two plates: **Xcode** ("In
+Xcode, choose File ▸ Add Package Dependencies… and paste the same URL. Pick
+Up to Next Major from `0.8.0`, add the AnnotKit library to your app target,
+and leave `AnnotKitMCP` unchecked…") and **SwiftUI** (`.installAnnotation()`
+on the root view, plus the working-directory warning: notes land in
+`ANNOTKIT_NOTES.md`, usually not the repo when Xcode launches the app — set
+the working directory in the scheme or pass `install()` a sink with an
+explicit path).
+
+**§02 Annotate — lead:** "Attach notes directly to the elements you want to
+tweak." Three rules, outcome first: **Click** (the note binds to the control
+itself, even when the pointer lands on a label inside it), **Frame** (the
+note binds to the largest element the box contains; the drawn rectangle is
+stored on the note), **Anchor** (a target with no identifier anchors to the
+nearest `accessibilityIdentifier` above it).
+
+**§03 Hand it to your agent — lead:** "Copy a note to the clipboard, write
+the set to `ANNOTKIT_NOTES.md`, or let the agent ask over MCP. However the
+notes travel, each one carries the selector that located it." The MCP
+bridge is a subsection of §03 (h3, `id="mcp"`), no longer §04: "Ask over
+MCP — run the optional bridge and let the agent ask what's pending."
+
+**§04 Get updates:**
+- Heading: *"Want more? Sign up for more free tips and tools."*
+- Body: "One list for everything GPU CLI ships, AnnotKit included."
+- No separate privacy line under the form (removed 2026-08-24; the body
+  carries the list scope).
 - Submit label: `Get release notes`
 - Loading: `Subscribing…`
 - Success (new): `You're on the list.`
 - Success (duplicate): `You're already on the list.`
-- Error (invalid): `That address doesn't parse — check for typos.`
-- Error (rate-limited): `Slow down — try again shortly.`
+- Error (invalid): `That address doesn't parse. Check for typos.`
+- Error (rate-limited): `Slow down. Try again shortly.`
 - Error (upstream): `Something broke on our side. Try again in a minute.`
-- Privacy line: `Your address goes to Resend and nowhere else. Every email
-  carries an unsubscribe link.`
 
-**Footer colophon:** "MIT licensed. Reimplements the `ANNOTKIT_NOTES.md`
-format clean-room; contains no Agentation source. Set in Fraunces,
-Newsreader & IBM Plex Mono."
+**Footer tagline:** "Point at a view, leave a note your agent can act on. /
+Pre-1.0. The API may still shift."
+
+**Footer colophon:** "Set in Fraunces, Newsreader & IBM Plex Mono."
 
 ## Appendix B — Resend setup runbook (maintainer)
 

web/public/og.png

@@ -0,0 +1,105 @@
+/**
+ * One-off probe for the 2026-08-24 hero copy pass (annotkit-dvl.2): the
+ * display is one sentence broken at its comma, one clause per line from the
+ * span breakpoint (60rem) up. Verifies at desktop width that
+ *
+ *   · the display renders as exactly two lines,
+ *   · line 1 ends with the comma and line 2 starts the second clause,
+ *   · neither no-wrap span overflows the page or its own box.
+ *
+ * Serves ./dist itself (run `npm run build` first). Exits non-zero on
+ * failure. Delete when the next copy pass needs different facts.
+ */
+
+import { createServer } from "node:http";
+import { createReadStream, existsSync, statSync } from "node:fs";
+import { extname, join, resolve } from "node:path";
+import { connect, launch, openPage, sleep } from "./lib/chrome.mjs";
+
+const MIME = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript",
+  ".css": "text/css",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".woff2": "font/woff2",
+  ".json": "application/json",
+  ".webm": "video/webm",
+  ".avif": "video/avif",
+  ".webp": "image/webp",
+};
+
+const root = resolve("dist");
+if (!existsSync(root)) {
+  console.error("hero-check: dist/ is missing — run `npm run build` first.");
+  process.exit(1);
+}
+const server = createServer((request, response) => {
+  const path = decodeURIComponent(new URL(request.url, "http://x").pathname);
+  let file = join(root, path);
+  if (!file.startsWith(root)) return response.writeHead(403).end();
+  if (!existsSync(file) || statSync(file).isDirectory()) file = join(root, "index.html");
+  response.writeHead(200, { "Content-Type": MIME[extname(file)] ?? "application/octet-stream" });
+  createReadStream(file).pipe(response);
+});
+await new Promise((done) => server.listen(0, "127.0.0.1", done));
+const url = `http://127.0.0.1:${server.address().port}/`;
+
+const PROBE = `(() => {
+  const display = document.querySelector(".hero__display");
+  const spans = [...display.querySelectorAll(".hero__sentence")];
+  const lineRects = (node) => {
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    return [...range.getClientRects()];
+  };
+  const tops = [...new Set(lineRects(display).map((r) => Math.round(r.top)))];
+  return JSON.stringify({
+    lines: tops.length,
+    clauses: spans.map((s) => s.textContent),
+    spanLines: spans.map((s) => lineRects(s).length),
+    displayWidth: Math.round(display.getBoundingClientRect().width),
+    spanOverflow: spans.map((s) => Math.round(s.scrollWidth - s.clientWidth)),
+  });
+})()`;
+
+const { child, endpoint } = await launch();
+const cdp = connect(endpoint);
+await cdp.ready;
+const sessionId = await openPage(cdp);
+
+await cdp.send(
+  "Emulation.setDeviceMetricsOverride",
+  { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false },
+  sessionId,
+);
+await cdp.send("Page.navigate", { url }, sessionId);
+await sleep(1200);
+
+const { result } = await cdp.send(
+  "Runtime.evaluate",
+  { expression: PROBE, returnByValue: true },
+  sessionId,
+);
+const report = JSON.parse(result.value);
+
+cdp.close();
+child.kill();
+server.close();
+
+console.log("\nhero-check · 1280px\n");
+console.log(`  lines in display : ${report.lines}`);
+console.log(`  clauses          : ${report.clauses.join(" ⏎ ")}`);
+console.log(`  lines per clause : ${report.spanLines.join(", ")}`);
+console.log(`  display width    : ${report.displayWidth}px`);
+console.log(`  span overflow    : ${report.spanOverflow.join(", ")}px\n`);
+
+const failures = [];
+if (report.lines !== 2) failures.push(`display sets on ${report.lines} lines, expected 2`);
+if (!report.clauses[0]?.endsWith(",")) failures.push("line 1 does not end at the comma");
+if (report.spanLines.some((n) => n !== 1)) failures.push("a no-wrap clause wrapped inside itself");
+if (report.spanOverflow.some((n) => n > 0)) failures.push("a clause overflows its span box");
+
+for (const failure of failures) console.log(`  FAIL ${failure}`);
+console.log(failures.length === 0 ? "  PASS\n" : "");
+process.exit(failures.length > 0 ? 1 : 0);

web/scripts/hero-check.mjs

@@ -80,7 +80,7 @@
   <body>
     <div class="og">
       <p class="og__dateline">macOS 15 · iOS 17 · Swift 6 · MIT</p>
-      <h1 class="og__display">Point at the view. Hand the agent the map.</h1>
+      <h1 class="og__display">Point at the view, pass the agent a map.</h1>
       <div class="og__foot">
         <p class="og__wordmark">AnnotKit</p>
         <p class="og__rule">annotkit.gpu-cli.sh</p>

web/scripts/og-template.html

@@ -5,7 +5,6 @@ import { Hero } from "./sections/Hero";
 import { Install } from "./sections/Install";
 import { Annotate } from "./sections/Annotate";
 import { AgentNotes } from "./sections/AgentNotes";
-import { McpBridge } from "./sections/McpBridge";
 import { Signup } from "./sections/Signup";
 import { Footer } from "./sections/Footer";
 import { Backdrop } from "./components/Backdrop";
@@ -48,7 +47,6 @@ export function App() {
           <Install />
           <Annotate />
           <AgentNotes />
-          <McpBridge />
           <Signup />
         </main>
         <Footer />