@abide/abide 0.123.3 → 0.124.1

package/docs/abide.md

@@ -23,6 +23,7 @@ at its address with `.md` on the end, and the links below point at those files.
 
 - Overview — `reference.md`
 - `Reactive` — `reference/types/Reactive.md`
+- `isReactive` — `reference/isReactive.md`
 - `Keyed` — `reference/types/Keyed.md`
 - `reactive` — `reference/reactive.md`
 - `Transformer` — `reference/types/Transformer.md`
@@ -86,6 +87,7 @@ at its address with `.md` on the end, and the links below point at those files.
 - `ClaudeCodeConfig` — `reference/types/ClaudeCodeConfig.md`
 - `BridgeStatus` — `reference/types/BridgeStatus.md`
 - `cookies` — `reference/cookies.md`
+- `Cookies` — `reference/types/Cookies.md`
 - `request` — `reference/request.md`
 - `response` — `reference/response.md`
 - `route` — `reference/route.md`
@@ -215,71 +217,26 @@ In abide a value on the server is something a page reads, and reading it loads i
 
 These docs build one app, a CRM, in ten chapters. Each chapter adds what the CRM needs next, and ends with the CRM as an app you can download and run. Every card is a file from that app, with the tests and the bench the app runs on it.
 
-## 1. Start an app
+The handler a page calls is also an OpenAPI operation, an MCP tool and a CLI command: one handler, four surfaces, so a model reaches the CRM through the same code a person does. See [Open it to machines](/guide/open-it-to-machines.md).
 
-This chapter starts the CRM the rest of the docs build: a contacts page reading a handler, a star you can click, and a note on a contact. Four commands get it running.
-
-Read on: [Start an app](/guide/start-an-app.md)
-
-## 2. Edit a contact
-
-A contact's profile is held, edited and shown. This chapter is the whole of what a page needs for that: one value per thing held, values derived from them, and markup that follows both.
-
-Read on: [Edit a contact](/guide/edit-a-contact.md)
-
-## 3. Talk to the server
-
-Deals live on the server. This chapter reads them, writes them, and refuses a request that is wrong, all through handlers a page calls by name.
-
-Read on: [Talk to the server](/guide/talk-to-the-server.md)
-
-## 4. Keep it current
-
-A pipeline is read by several parts of the page and changes all day. This chapter loads it once, reloads it when it goes stale, and keeps the list current without refetching it.
-
-Read on: [Keep it current](/guide/keep-it-current.md)
-
-## 5. Make it live
-
-Activity on an account is something every open tab should see as it happens. This chapter makes a feed anything can write to and everyone reads, and streams answers as they arrive.
-
-Read on: [Make it live](/guide/make-it-live.md)
-
-## 6. Add pages
-
-The CRM outgrows one page. This chapter adds a page per company, the chrome they share, the links between them, and what a reader sees when one fails.
-
-Read on: [Add pages](/guide/add-pages.md)
-
-## 7. Decide who sees what
-
-Not everyone may see every field. This chapter signs a user in, decides what each caller may read and call, and bounds what a request and a page may do.
-
-Read on: [Who sees what](/guide/decide-who-sees-what.md)
-
-## 8. Run the CRM
-
-A CRM in production has to be configured, started, stopped and watched. This chapter does each, with the logs, traces and health checks an operator reads.
-
-Read on: [Run it](/guide/run-it.md)
+## The guide, chapter by chapter
 
-## 9. Open it to machines
-
-The handlers the CRM already has are its API. This chapter publishes them as OpenAPI and MCP, keeps one off a surface, puts an assistant on the site, and calls a handler from a terminal.
-
-Read on: [Open it to machines](/guide/open-it-to-machines.md)
-
-## 10. Test, measure and ship
-
-The CRM gets a reports page, and each report gets a test: what a click rewrote, what a change costs as the pipeline grows, and where a slow click spends its time. Then the CRM ships, as a server, a single binary or a desktop app, and keeps its pages readable offline.
-
-Read on: [Test, measure, ship](/guide/test-measure-and-ship.md)
+1. [Start an app](/guide/start-an-app.md) This chapter starts the CRM the rest of the docs build: a contacts page reading a handler, a star you can click, and a note on a contact. Four commands get it running.
+2. [Edit a contact](/guide/edit-a-contact.md) A contact's profile is held, edited and shown. This chapter is the whole of what a page needs for that: one value per thing held, values derived from them, and markup that follows both.
+3. [Talk to the server](/guide/talk-to-the-server.md) Deals live on the server. This chapter reads them, writes them, and refuses a request that is wrong, all through handlers a page calls by name.
+4. [Keep it current](/guide/keep-it-current.md) A pipeline is read by several parts of the page and changes all day. This chapter loads it once, reloads it when it goes stale, and keeps the list current without refetching it.
+5. [Make it live](/guide/make-it-live.md) Activity on an account is something every open tab should see as it happens. This chapter makes a channel anything can write to and everyone reads, and streams answers as they arrive.
+6. [Add pages](/guide/add-pages.md) The CRM outgrows one page. This chapter adds a page per company, the chrome they share, the links between them, and what a reader sees when one fails.
+7. [Who sees what](/guide/decide-who-sees-what.md) Not everyone may see every field. This chapter signs a user in, decides what each caller may read and call, and bounds what a request and a page may do.
+8. [Run it](/guide/run-it.md) A CRM in production has to be configured, started, stopped and watched. This chapter does each, with the logs, traces and health checks an operator reads.
+9. [Open it to machines](/guide/open-it-to-machines.md) The handlers the CRM already has are its API. This chapter publishes them as OpenAPI and MCP, keeps one off a surface, puts an assistant on the site, and calls a handler from a terminal.
+10. [Test, measure, ship](/guide/test-measure-and-ship.md) The CRM gets a reports page, and each report gets a test: what a click rewrote, what a change costs as the pipeline grows, and where a slow click spends its time. Then the CRM ships, as a server, a single binary or a desktop app, and keeps its pages readable offline.
 
 ## Reference
 
 A guide answers *how do I solve this*. Reference answers *what exactly does this take, and what does it hand back*: one page per name an app imports, read off the registry, and one per area for what is written in place.
 
-Read on: [Overview](/reference.md)
+Read on: [Reference](/reference.md)
 
 ---
 
@@ -298,9 +255,21 @@ bun install
 bun run dev
 ```
 
-The scaffold writes a root layout, a page, a handler file the page calls, and a test of each. `bun run dev` runs `abide dev`, which serves the app on `localhost:3000` and restarts it on every save, with the open tab reloading behind it.
+`bun run dev` runs `abide dev`, which serves the app on `localhost:3000` and restarts it on every save, with the open tab reloading behind it.
 
-Every chapter ends with the CRM it built, as an app you can download and run. Each card below is a file from that app, with the test the app runs on it.
+| The scaffold writes | What it is |
+| --- | --- |
+| `src/layout.abide` | the root layout, around every page |
+| `src/index.abide` | a page with a greeting and a click counter |
+| `src/getGreeting.handler.ts` | the handler the page reads its greeting from |
+| `src/getGreeting.test.ts` | a test that calls the handler |
+| `src/index.test.ts` | a test that mounts the page, clicks it, and counts the work the click did |
+| `src/lib/app.css` | the stylesheet the layout imports: Tailwind, built by the plugin `bunfig.toml` declares |
+| `CLAUDE.md` · `AGENTS.md` | notes for a coding agent, importing the `ABIDE.md` the installed package holds: where its docs, as one markdown file, and its registry and rulebook are |
+| `Dockerfile` · `.dockerignore` | an image holding the compiled server and nothing else of the app. See [Test, measure, ship](/guide/test-measure-and-ship.md) |
+| `package.json` | the scripts `dev`, `build`, `start`, `test`, `check`, `format`, `bench` and `routes` |
+
+The CRM replaces the starter's page with a contacts page, and keeps the rest. Every card on this page offers the CRM as this chapter leaves it, at `/examples/crm-01.tar.gz`.
 
 ## A file's path is the address it answers
 
@@ -323,6 +292,8 @@ Code that is not an address goes in a directory that never is, and a file's name
 | `**/lib/**` | components and modules | wherever they are imported |
 | `**/lib/**/<name>.server.<extension>` | the database, secrets, anything the browser never loads | the server alone; a page importing it is a compile error |
 | `**/<name>.test.ts` | tests, beside what they test | `bun test`, never served |
+| `**/<name>.bench.ts` | benches, beside what they time. See [Test, measure, ship](/guide/test-measure-and-ship.md) | `bun run bench`, never served |
+| `**/<NAME>.param.ts` | what a segment named `NAME` takes. See [Add pages](/guide/add-pages.md) | wherever an address is matched |
 | `**/<name>.d.ts` | types, beside what they type | nowhere; the checker reads them |
 | `**/public/**` | files answered as they are | nowhere; each is sent at its path |
 
@@ -363,11 +334,18 @@ export default GET(async () => {
 ```ts src/contacts/lib/ContactList.test.ts
 import { expect, test } from 'bun:test'
 
-import listContacts from '../listContacts.handler.ts'
+import { mount } from '@abide/harness/abide'
+
+import ContactList from './ContactList.abide'
+
+const names = () =>
+    [...document.querySelectorAll('strong')].map((name) => name.textContent)
 
-test('the handler the list reads answers with every contact', async () => {
-    const contacts = await listContacts()
-    expect(contacts.map((contact) => contact.name)).toEqual([
+test('the list is empty until the handler answers, then fills in', async () => {
+    using _list = await mount(ContactList({}))
+    expect(names()).toEqual([])
+    await Bun.sleep(500)
+    expect(names()).toEqual([
         'Ada Lovelace',
         'Grace Hopper',
         'Katherine Johnson',
@@ -375,9 +353,47 @@ test('the handler the list reads answers with every contact', async () => {
 })
 ```
 
+```ts src/contacts/lib/ContactList.bench.ts
+import { reactive } from '@abide/abide'
+import { batch, type Batched } from '@abide/harness/report'
+
+// The list as the card reads it, once the handler answered `count` contacts.
+function landed(count: number): () => void {
+    const answered: { id: string; name: string; company: string }[] = []
+    for (let at = 0; at < count; at += 1)
+        answered.push({
+            id: `c${at}`,
+            name: `Contact ${at}`,
+            company: `Company ${at}`,
+        })
+    const contacts = reactive(() => answered)
+    contacts()
+    return () => {
+        contacts()
+    }
+}
+
+// The most a read may take among 1,000 contacts, in milliseconds.
+export const CEILINGS = { priced: { 'among 1,000': 1 } }
+
+/** Reading the landed list among 100 contacts, and among 1,000. */
+export function priced(): Batched {
+    return batch({
+        case: 'read the contacts the handler answered',
+        emulated: null,
+        arms: {
+            'among 100': landed(100),
+            'among 1,000': landed(1000),
+        },
+    })
+}
+```
+
+The bench reads the list once the handler has answered, among 100 contacts and among 1,000. Its ratio is what a read costs as the list grows: a read hands back what the handler answered, and copies nothing.
+
 `listContacts.handler.ts` runs on the server. The list imports it like any module, and the browser is sent a call under the same name in its place, so there is no `fetch`, no route to register, and no second copy of the contact type.
 
-The test imports the same handler and calls it, in process. A handler only one page calls can live in that page's `<script server>` instead. See [Talk to the server](/guide/talk-to-the-server.md).
+The test mounts the list, and the handler runs in process. A handler only one file calls can live in that file's `<script server>` instead. See [Talk to the server](/guide/talk-to-the-server.md).
 
 ## The page is sent before the data lands
 
@@ -416,15 +432,34 @@ async function requestPage() {
 ```ts src/contacts/lib/PageTiming.test.ts
 import { expect, test } from 'bun:test'
 
+import { flushSync } from '@abide/abide'
 import { createApp } from '@abide/abide/server'
+import { mount } from '@abide/harness/abide'
+
+import PageTiming from './PageTiming.abide'
+
+// happy-dom's own hook: the card requests the page from where it is open.
+const openAt = (address: string) =>
+    (
+        window as unknown as { happyDOM: { setURL(url: string): void } }
+    ).happyDOM.setURL(address)
 
-test('the contacts page is complete before the contacts land', async () => {
+const tile = (at: number) =>
+    Number.parseInt(document.querySelectorAll('strong')[at]?.textContent ?? '')
+
+test('the contacts page is complete before the contacts answer', async () => {
     await using app = await createApp()
-    const answer = await app.fetch(new Request('http://crm.invalid/contacts'))
-    const page = await answer.text()
-    // The whole document, closed, with a hole where the list goes.
-    expect(page).toEndWith('</html>')
-    expect(page).not.toContain('Ada Lovelace')
+    using server = Bun.serve({
+        port: 0,
+        fetch: (request) => app.fetch(request),
+    })
+    openAt(server.url.href)
+    using _timing = await mount(PageTiming({}))
+    document.querySelector('button')?.click()
+    await Bun.sleep(600)
+    flushSync()
+    expect(tile(0)).toBeLessThan(tile(1))
+    openAt('http://localhost/')
 })
 ```
 
@@ -436,7 +471,7 @@ A page's `<script>` runs on the server to render it, then again in the browser.
 
 ## A value is read and written by name
 
-**`starred` — read by name, written by name** — Star a contact. The button reads the value, and the click writes it.
+**`starred` — read by name, written by name** — Grace Hopper is the contact you call most. Star her, then take the star off.
 
 ```abide src/contacts/lib/StarButton.abide
 <script>
@@ -471,7 +506,7 @@ test('the click writes starred and the button follows', async () => {
 })
 ```
 
-Naming `starred` in the markup reads it and follows it from then on. Assigning to it writes it and wakes everything that read it. There is no store to declare and no re-render to ask for. A `.ts` file has no markup around it, so it writes the same value as `starred()` and `starred.set(true)`.
+Naming `starred` in the markup reads it and follows it from then on. Assigning to it writes it and wakes everything that read it, with no re-render to ask for. [Edit a contact](/guide/edit-a-contact.md) has every spelling of it.
 
 ## Every value is a `Reactive`
 
@@ -534,6 +569,8 @@ A value the page owns, a value derived from it, a value loaded from a handler, a
 
 Swapping a local value for a loaded one changes how it is declared and nothing that reads it.
 
+A `Reactive` can also be awaited, so code that takes a promise for a load asks `isReactive` first. A `Reactive` is a value, even while it loads.
+
 ## The `abide` command
 
 | Command | What it does for the CRM |
@@ -560,7 +597,7 @@ Swapping a local value for a loaded one changes how it is declared and nothing t
 
 A contact's profile is held, edited and shown. This chapter is the whole of what a page needs for that: one value per thing held, values derived from them, and markup that follows both.
 
-The profile lives in `src/profile`, at `/profile`. Each card is one of its components, with the test the app runs on it.
+The profile lives in `src/profile`, at `/profile`.
 
 ## A field and its value are one copy
 
@@ -603,8 +640,47 @@ test('typing writes the value, and the value fills the field', async () => {
 })
 ```
 
+```ts src/profile/lib/ContactFields.bench.ts
+import { reactive } from '@abide/abide'
+import { batch, type Batched } from '@abide/harness/report'
+
+// The field as the card keeps it, holding `length` characters.
+function typing(length: number): () => void {
+    const typed = 'a'.repeat(length - 1)
+    // Two values a keystroke apart, differing in the last character.
+    const keystrokes = [`${typed}b`, `${typed}c`]
+    const email = reactive(keystrokes[0] as string)
+    email()
+    let at = 0
+    return () => {
+        at ^= 1
+        email.set(keystrokes[at] as string)
+        email()
+    }
+}
+
+// The most a keystroke may take in 1,000 characters, in milliseconds.
+export const CEILINGS = { priced: { 'of 1,000 characters': 1 } }
+
+/** A keystroke into a field of 100 characters, and of 1,000. */
+export function priced(): Batched {
+    return batch({
+        case: 'type into the field, read what a save would send',
+        emulated: null,
+        arms: {
+            'of 100 characters': typing(100),
+            'of 1,000 characters': typing(1000),
+        },
+    })
+}
+```
+
+The bench types into the field once it holds 100 characters, and once it holds 1,000. Its ratio is what a keystroke costs as the value grows: a keystroke writes the value once, and copies nothing.
+
 `bind:value` sets the field from the value, and writes the value back on `input` or `change`. There is no form model beside it and no handler per field. A `<textarea>` and a `<select>` take the same binding.
 
+A value that starts as a number binds as one, and so does an `<input type="number">` or a `type="range"`. Text that reads as a number writes the number, blank text writes `undefined`, and any other text writes nothing.
+
 | You write | What it binds |
 | --- | --- |
 | `bind:checked` | a checkbox, to a boolean |
@@ -614,9 +690,9 @@ test('typing writes the value, and the value fills the field', async () => {
 | `bind:value={{get, set}}` | a field to a pair you write, where the value is computed |
 | `bind:prop={state}` | a component's prop, so the child's write reaches your value |
 
-## A reactive value is read and written by its name
+## Where a reactive value's name is written decides what it reaches
 
-`reactive` holds a value. Inside a `.abide` file its name is the value: `email` in an expression reads it, and `email = 'a@b.co'` writes it. The sugar sits over two explicit members, `s` and `s.set`, and a `.ts` file writes those out.
+`reactive` holds a value, and inside a `.abide` file its name reads and writes it. The sugar sits over two explicit members, `s` and `s.set`, and a `.ts` file writes those out.
 
 | You write | You get |
 | --- | --- |
@@ -624,7 +700,7 @@ test('typing writes the value, and the value fills the field', async () => {
 | `const x: Reactive<…> = foo` / a `Reactive<…>`-typed parameter, return or `bind:` operand | the `Reactive` itself |
 | `const [a, b] = foo` / `...foo` | one read, taken apart |
 | `foo = bar` | a write |
-| `foo.bar` | the value's `bar` |
+| `foo.bar` | the value's `bar`, or the `Reactive`'s own `bar` where it declares one the value does not |
 | `foo.bar(…)` | the value's method where it has one, and otherwise a member of the `Reactive` such as `busy` |
 | `foo()` / `foo.set(v)` | the explicit read and write |
 | `await foo` | the value, once it has settled |
@@ -735,11 +811,11 @@ test('a phone edit reruns the count, not the initials', async () => {
 
 Give `reactive` a body, `reactive(() => …)`, and what the body read on its last run is what reruns it. You list no dependencies. The test counts the work: a phone edit walks to the count and never reaches the initials, because the initials never read the phone.
 
-A body with a parameter, `reactive((args) => …)`, is a `Keyed`: a factory holding one value per set of arguments. It is how a handler is called per contact, in [Talk to the server](/guide/talk-to-the-server.md).
+A body with a parameter, `reactive((args) => …)`, is a `Keyed`: a factory holding one value per set of arguments. See [Keep it current](/guide/keep-it-current.md), where the pipeline keeps one per stage.
 
 ## A write through a path copies down the path
 
-**`contact.address.city = v` — a write two levels down** — A contact's city, inside its address. Type a new city.
+**`bind:value={contact.address.city}` — a write two levels down** — A contact's city, inside its address. Type a new city.
 
 ```abide src/profile/lib/AddressField.abide
 <script>
@@ -781,13 +857,13 @@ test('a write to the city reaches the record it sits in', async () => {
 })
 ```
 
-`foo.bar = v` copies `contact`, copies its `address`, sets `city`, and writes the new record back. The copy is what wakes the readers: a record changed in place is the object it already was, and nothing downstream has a reason to read it again.
+The binding writes through the path, the way `contact.address.city = city` would: it copies `contact`, copies its `address`, sets `city`, and writes the new record back. The copy wakes the readers. A record changed in place is the object it already was, and nothing downstream has a reason to read it again.
 
-`foo.push(v)` is the same write reached through an array's mutator, once the compiler lifts it (31.9). Until then, write the new array: `tags = [...tags, tag]`.
+`foo.bar = v` is that write wherever you spell it, and so is `foo.push(v)`: where the value is an array, `tags.push(tag)` runs on a copy and writes the copy back. The array's type decides it, so a class's own `push` stays the class's call.
 
-## A hole in the markup follows what it reads
+## An expression in the markup follows what it reads
 
-A hole is `{}` around an expression, and it updates the one thing it names and nothing around it.
+Put `{}` around an expression and it updates the one thing it lands on, and nothing around it.
 
 | You write | Where it lands |
 | --- | --- |
@@ -924,7 +1000,7 @@ const { name } = props<{ name: string }>()
 </script>
 
 <span class="rounded-full border border-rule bg-raised px-2 py-1 font-semibold">
-    {    name
+    {name
         .split(' ')
         .map((word) => word.charAt(0))
         .join('')}
@@ -958,6 +1034,8 @@ test('the avatar follows its name prop, and is not rebuilt', async () => {
 
 A component is a `.abide` file, and `<Name/>` invokes it. `props` hands back each prop as a live read of what the caller passed, so the avatar follows the field and nothing is rebuilt: the test counts no node made or moved.
 
+A prop the child only reads holds the caller's `Reactive` wherever a name would: handed on to a `bind:` or a `Reactive`-typed parameter, it passes the `Reactive` itself. Its probes answer for everything the caller's expression read, so `busy(rows)` in a table component is busy while the list its page passed loads. [Talk to the server](/guide/talk-to-the-server.md) introduces the probes.
+
 | Name | What it does for the CRM |
 | --- | --- |
 | `<Tag>…</Tag>` | passes the markup between the tags as `children` |
@@ -1101,7 +1179,7 @@ A `<script>` block runs each time the component is used, top to bottom, so each
 
 ## Next
 
-- [Talk to the server](/guide/talk-to-the-server.md) — load a contact from a handler, and save it back
+- [Talk to the server](/guide/talk-to-the-server.md) — read deals from the server, change them, refuse a bad request, and say why
 
 ---
 
@@ -1113,7 +1191,7 @@ A `<script>` block runs each time the component is used, top to bottom, so each
 
 Deals live on the server. This chapter reads them, writes them, and refuses a request that is wrong, all through handlers a page calls by name.
 
-Every server call in this chapter is a handler: a function wrapped in `GET`, `POST`, `PATCH` or one of their siblings. A page imports it and calls it like any function. There is no route table, no `fetch` and no client to keep in step with the server.
+Every server call in this chapter is a handler: a function wrapped in `GET`, `POST`, `PATCH` or one of their siblings. A page imports it and calls it like any function. There is no route to register, no `fetch` and no client to keep in step with the server.
 
 ## A handler file answers at its own path
 
@@ -1180,22 +1258,154 @@ export default GET(
 ```ts src/deals/lib/DealDetail.test.ts
 import { expect, test } from 'bun:test'
 
-import getDeal from '../getDeal.handler.ts'
+import { flushSync } from '@abide/abide'
+import { mount } from '@abide/harness/abide'
 
-test('the handler answers the deal its args name', async () => {
-    const deal = await getDeal({ id: 'd2' })
-    expect(deal.name).toBe('Compiler pilot')
+import DealDetail from './DealDetail.abide'
+
+const shown = () => document.querySelector('strong')?.textContent
+
+test('picking a deal loads the one its args name', async () => {
+    using _detail = await mount(DealDetail({}))
+    await Bun.sleep(400)
+    expect(shown()).toBe('Engine renewal')
+    for (const tab of document.querySelectorAll('button'))
+        if (tab.textContent === 'd2') tab.click()
+    flushSync()
+    await Bun.sleep(400)
+    expect(shown()).toBe('Compiler pilot')
 })
 ```
 
+```ts src/deals/lib/DealDetail.bench.ts
+import { reactive } from '@abide/abide'
+import { batch, type Batched } from '@abide/harness/report'
+
+// The detail as the card reads it, the handler's answers among `count` deals.
+function picking(count: number): () => void {
+    const answered: Record<string, { name: string; company: string }> = {}
+    for (let at = 0; at < count; at += 1)
+        answered[`d${at}`] = { name: `Deal ${at}`, company: `Company ${at}` }
+    const id = reactive('d0')
+    const deal = reactive(() => answered[id()])
+    deal()
+    // Back and forth between two deals, as the card's tabs pick.
+    let picked = 'd0'
+    return () => {
+        picked = picked === 'd0' ? 'd1' : 'd0'
+        id.set(picked)
+        deal()
+    }
+}
+
+// The most a pick may take among 1,000 deals, in milliseconds.
+export const CEILINGS = { priced: { 'among 1,000': 1 } }
+
+/** Picking a deal among 100, and among 1,000. */
+export function priced(): Batched {
+    return batch({
+        case: 'pick a deal, read the one the handler answered',
+        emulated: null,
+        arms: {
+            'among 100': picking(100),
+            'among 1,000': picking(1000),
+        },
+    })
+}
+```
+
+The bench picks a deal once the handler has answered it, among 100 deals and among 1,000. Its ratio is what a pick costs as the pipeline grows: the page holds the one deal its arguments name, and never the rest.
+
 The annotation `{ id: string }` is the handler's `Args`, and what it returns is its `Value`. `GET` builds the runtime schema from that annotation, so a request whose arguments do not match it is refused with 422 before the handler runs.
 
 In the browser the import is an `Rpc`: a call under the same name, with the same types, sent over http. The call hands back a reactive value rather than a promise, so the page reads `deal.name` by name and the probes are on the result.
 
-Reading `deal` starts the load. The page renders with a hole where each field goes, and the holes fill when the deal lands. A read outside the markup, in a click handler, throws `NotLanded` until then.
+Reading `deal` starts the load. The page renders with a hole where each field goes, and the holes fill when the deal lands.
 
 The `description` is the sentence every surface shows for the handler: OpenAPI, MCP and the CLI. `refuse(404)` answers a deal that does not exist.
 
+## A refresh keeps the figures on screen
+
+**`busy()` and `ready()` — a first load and a refresh, told apart** — The pipeline's total. Wait for it, then press Refresh: the old figure stays until the new one lands.
+
+```abide src/deals/lib/Pipeline.abide
+<script>
+import { reactive, refresh } from '@abide/abide'
+
+import listDeals from '../listDeals.handler.ts'
+
+const deals = reactive(() => listDeals())
+
+const total = reactive(() => {
+    let sum = 0
+    for (const deal of deals) if (deal.stage !== 'won') sum += deal.amount
+    return sum
+})
+</script>
+
+<div class="row">
+    <button onclick={() => refresh(deals)}>Refresh</button>
+    <span class="status">
+        {!deals.ready() ? 'loading…' : deals.busy() ? 'refreshing…' : ''}
+    </span>
+</div>
+
+<ul class="tiles">
+    <li><span>in the pipeline</span>
+        <strong>${total.toLocaleString('en-US')}</strong></li>
+</ul>
+```
+
+```ts src/deals/listDeals.handler.ts
+import { GET } from '@abide/abide/server'
+
+import { DEALS } from './lib/DEALS.server.ts'
+
+export default GET(
+    async () => {
+        // A slow database, so the wait is on screen.
+        await Bun.sleep(400)
+        return DEALS.map((deal) => ({ ...deal }))
+    },
+    { description: 'Every deal.' },
+)
+```
+
+```ts src/deals/lib/Pipeline.test.ts
+import { expect, test } from 'bun:test'
+
+import { flushSync } from '@abide/abide'
+import { mount } from '@abide/harness/abide'
+
+import Pipeline from './Pipeline.abide'
+
+const status = () => document.querySelector('.status')?.textContent?.trim()
+const total = () => document.querySelector('strong')?.textContent
+
+test('a refresh is busy and still ready; a first load is not', async () => {
+    using _pipeline = await mount(Pipeline({}))
+    expect(status()).toBe('loading…')
+    await Bun.sleep(500)
+    expect([status(), total()]).toEqual(['', '$16,800'])
+    document.querySelector('button')?.click()
+    flushSync()
+    // Busy and still ready: the figure on screen stays until the new one lands.
+    expect([status(), total()]).toEqual(['refreshing…', '$16,800'])
+})
+```
+
+A first load is `busy()` with nothing `ready()`. A refresh is `busy()` and still `ready()`, so the tile keeps the figure it has while the new one loads. One loading flag cannot tell the two apart, and blanks the page on every refresh. `refresh(deals)` loads the value again, and [Keep it current](/guide/keep-it-current.md) is the chapter on reloading.
+
+| Probe | Answers |
+| --- | --- |
+| `s.busy` | whether work is in flight for the value |
+| `s.ready` | whether there is a value to show |
+| `s.error` | the standing failure, handed back rather than thrown |
+| `busy` | whether anything in a selection is in flight: an app-wide progress bar |
+| `ready` | whether everything in a selection has a value |
+
+A probe never throws and never starts a load, so it is safe to read before anything has landed. A read of the value itself outside the markup, in a click handler, throws `NotLanded` until it lands. The value is also a promise, for a handler or a test: `await deals` waits for it, and `s.then`, `s.catch` and `s.finally` reach the same settling.
+
 ## A handler only one file calls stays in that file
 
 **`const getNotes = GET(fn)` — a handler its own file calls** — The notes on a deal, which only this card shows. The handler sits in the card's own server block.
@@ -1242,7 +1452,7 @@ test('the private handler answers below /__abide/handlers', async () => {
 })
 ```
 
-A `<script server>` runs on the server alone. It declares `getNotes` as a `const`, and the same file's script and markup call it by name. A `.abide` exports nothing, so no other file can reach it.
+A `<script server>` runs on the server alone. It declares `getNotes` as a `const`, and the same file's script and markup call it by name. A `.abide` exports nothing, so no other file can import it.
 
 It still answers over http, below `/__abide/handlers` at its file's path and then its name. That address is listed on no surface, and the test calls it to show it is there. When a second file needs the handler, move it into a handler file: `const getNotes =` becomes `export default`.
 
@@ -1255,7 +1465,7 @@ It still answers over http, below `/__abide/handlers` at its file's path and the
 | `PUT(fn)` | a deal replaced whole | in the body |
 | `DELETE(fn)` | a deal removed | in the URL, flat |
 
-`POST` / `PUT` / `PATCH` / `DELETE` each take what `GET` takes and are called the way it is. The page never names the method; the declaration carries it. A `GET` must not write, because a link on another site can reach it with your user's cookie attached.
+`POST` / `PUT` / `PATCH` / `DELETE` each take what `GET` takes and are called the way it is. The page never names the method; the handler carries it. A `GET` must not write, because a link on another site can reach it with your user's cookie attached.
 
 ## A new deal is checked before it is written
 
@@ -1271,12 +1481,12 @@ type NewDeal = { name: string; company: string; amount: number }
 
 let name = reactive('Ledger audit')
 let company = reactive('')
-let amount = reactive('0')
+let amount = reactive(0)
 let issues = reactive<Issues<NewDeal>>({})
 
 async function add() {
     try {
-        await createDeal({ name, company, amount: Number(amount) })
+        await createDeal({ name, company, amount })
         issues = {}
     } catch (error) {
         if (!createDeal.isError(error, 'ValidationError')) throw error
@@ -1321,6 +1531,8 @@ const NEW_DEAL = jsonSchema<NewDeal>({
 
 export default POST(
     ({ name, company, amount }: NewDeal) => {
+        // Every caller shares one list: past ten, the newest replaces the last.
+        if (DEALS.length >= 10) DEALS.pop()
         const deal = {
             id: `d${DEALS.length + 1}`,
             name,
@@ -1338,30 +1550,26 @@ export default POST(
 ```ts src/deals/lib/NewDeal.test.ts
 import { expect, test } from 'bun:test'
 
-import { createApp } from '@abide/abide/server'
+import { flushSync } from '@abide/abide'
+import { mount } from '@abide/harness/abide'
+
+import NewDeal from './NewDeal.abide'
 
 test('a deal that does not fit is refused, field by field', async () => {
-    await using app = await createApp()
-    const answer = await app.fetch(
-        new Request('http://crm.invalid/deals/createDeal', {
-            method: 'POST',
-            headers: { 'content-type': 'application/json' },
-            body: JSON.stringify({
-                name: 'Ledger audit',
-                company: '',
-                amount: 0,
-            }),
-        }),
+    using _form = await mount(NewDeal({}))
+    document.querySelector('button')?.click()
+    await Bun.sleep(50)
+    flushSync()
+    const fields = [...document.querySelectorAll('li span')].map(
+        (field) => field.textContent,
     )
-    expect(answer.status).toBe(422)
-    const { data } = await answer.json()
-    expect(Object.keys(data).sort()).toEqual(['amount', 'company'])
+    expect(fields.sort()).toEqual(['amount', 'company'])
 })
 ```
 
 `args` gates the arguments before the handler runs. A request that fails it is refused with 422 and a `ValidationError`, whose data is `Issues<T>`: the messages, keyed by the field's path. The card lists each field with its first message, and `issues.company` is the company's.
 
-Two presses of Add inside one flight send one request and write one deal, and both get its answer.
+`amount` starts as a number, so its field binds as one and the handler is handed a number.
 
 | Name | What it does for the CRM |
 | --- | --- |
@@ -1456,16 +1664,26 @@ export default PATCH(
 ```ts src/deals/lib/DealStage.test.ts
 import { expect, test } from 'bun:test'
 
-import moveDeal from '../moveDeal.handler.ts'
+import { flushSync } from '@abide/abide'
+import { mount } from '@abide/harness/abide'
 
-test('a closed deal is refused by name, with its stage as data', async () => {
-    try {
-        await moveDeal({ id: 'd3', stage: 'lead' })
-        throw new Error('expected a refusal')
-    } catch (error) {
-        if (!moveDeal.isError(error, 'DealClosed')) throw error
-        expect(error.data).toEqual({ stage: 'won' })
-    }
+import DealStage from './DealStage.abide'
+
+function press(label: string) {
+    for (const button of document.querySelectorAll('button'))
+        if (button.textContent === label) button.click()
+    flushSync()
+}
+
+test('a closed deal is refused by name, and the page says why', async () => {
+    using _stage = await mount(DealStage({}))
+    press('d3')
+    await Bun.sleep(400)
+    press('lead')
+    await Bun.sleep(50)
+    expect(document.querySelector('.status')?.textContent).toBe(
+        'Already won: A closed deal does not move.',
+    )
 })
 ```
 
@@ -1473,13 +1691,15 @@ test('a closed deal is refused by name, with its stage as data', async () => {
 
 Every refusal is a `Failed<Name, Data>`, in process and over the wire alike. The ones a handler can return are its `Failures`, so `rpc.isError` narrows by name and types `error.data` from the schema. `s.isError` is the same check on any reactive value, for a refusal the page made itself.
 
-`refuse(status)` is for where the status is the whole answer. It has no name a caller can narrow to.
+`refuse(status)` is for where the status is the whole answer. Every one is named `HttpError`, so `moveDeal.isError(error, 'HttpError')` narrows to it, and the status is the only thing a caller can tell apart.
+
+A move that lands writes the server's answer over `deal`, a derived value, so the page shows the new stage without loading the deal again. The write stands until the body reruns, when `id` changes.
 
 | abide's own refusal | Status | When |
 | --- | --- | --- |
 | `notFound` | 404 | nothing answers the address, with the path and method as data |
 | `validationError` | 422 | a schema or an `args` gate refused, with the issues as data |
-| `aborted` | 499 | every caller waiting on a load passed a `signal`, and every one aborted |
+| `aborted` | 499 | every caller waiting on a load passed a `signal` and every one aborted, or the client left |
 
 ## A handler can answer with a file
 
@@ -1515,11 +1735,19 @@ export default GET(
 ```ts src/deals/lib/ExportDeals.test.ts
 import { expect, test } from 'bun:test'
 
-import exportDeals from '../exportDeals.handler.ts'
+import { createApp } from '@abide/abide/server'
+import { mount } from '@abide/harness/abide'
 
-test('the export answers a CSV file', async () => {
-    const file = await exportDeals()
-    expect(file.type).toBe('text/csv')
+import ExportDeals from './ExportDeals.abide'
+
+test('the link downloads a CSV file', async () => {
+    await using app = await createApp()
+    using _link = await mount(ExportDeals({}))
+    const href = document.querySelector('a')?.getAttribute('href') ?? ''
+    const answer = await app.fetch(
+        new Request(new URL(href, 'http://crm.invalid')),
+    )
+    expect(answer.headers.get('content-type')).toStartWith('text/csv')
 })
 ```
 
@@ -1550,93 +1778,21 @@ Every answer carries headers you did not write:
 
 ## `abide routes` prints every address
 
-```
-abide routes
-GET    /deals                       deals/index.abide
-POST   /deals/createDeal            deals/createDeal.handler.ts
-GET    /deals/exportDeals           deals/exportDeals.handler.ts
-GET    /deals/getDeal               deals/getDeal.handler.ts
-GET    /deals/listDeals             deals/listDeals.handler.ts
-PATCH  /deals/moveDeal              deals/moveDeal.handler.ts
-```
-
-`abide routes [--json]` prints each address, its method and the file answering it, with every private handler marked `(private)`. With `--json` it prints the same as one document.
-
-## A refresh keeps the figures on screen
-
-**`busy()` and `ready()` — a first load and a refresh, told apart** — The pipeline's total. Wait for it, add a deal, then press Refresh: the old figure stays until the new one lands.
-
-```abide src/deals/lib/Pipeline.abide
-<script>
-import { reactive, refresh } from '@abide/abide'
-
-import listDeals from '../listDeals.handler.ts'
-
-const deals = reactive(() => listDeals())
-
-const total = reactive(() => {
-    let sum = 0
-    for (const deal of deals) if (deal.stage !== 'won') sum += deal.amount
-    return sum
-})
-</script>
+`abide routes [--json]` prints each address, its method and the file answering it, with every private handler marked `(private)`. With `--json` it prints the same as one document. In the CRM as this chapter leaves it, `bun run routes` prints:
 
-<div class="row">
-    <button onclick={() => refresh(deals)}>Refresh</button>
-    <span class="status">
-        {!deals.ready() ? 'loading…' : deals.busy() ? 'refreshing…' : ''}
-    </span>
-</div>
-
-<ul class="tiles">
-    <li><span>in the pipeline</span>
-        <strong>${total.toLocaleString('en-US')}</strong></li>
-</ul>
-```
-
-```ts src/deals/listDeals.handler.ts
-import { GET } from '@abide/abide/server'
-
-import { DEALS } from './lib/DEALS.server.ts'
-
-export default GET(
-    async () => {
-        // A slow database, so the wait is on screen.
-        await Bun.sleep(400)
-        return DEALS.map((deal) => ({ ...deal }))
-    },
-    { description: 'Every deal.' },
-)
-```
-
-```ts src/deals/lib/Pipeline.test.ts
-import { expect, test } from 'bun:test'
-
-import { reactive, refresh } from '@abide/abide'
-
-import listDeals from '../listDeals.handler.ts'
-
-test('a refresh is busy and still ready; a first load is not', async () => {
-    const deals = reactive(() => listDeals())
-    expect([deals.busy(), deals.ready()]).toEqual([true, false])
-    await deals
-    refresh(deals)
-    // The figures already on screen stay there.
-    expect([deals.busy(), deals.ready()]).toEqual([true, true])
-})
-```
-
-A first load is `busy()` with nothing `ready()`. A refresh is `busy()` and still `ready()`, so the tile keeps the figure it has while the new one loads. One loading flag cannot tell the two apart, and blanks the page on every refresh.
-
-| Probe | Answers |
-| --- | --- |
-| `s.busy` | whether work is in flight for the value |
-| `s.ready` | whether there is a value to show |
-| `s.error` | the standing failure, handed back rather than thrown |
-| `busy` | whether anything in a selection is in flight: an app-wide progress bar |
-| `ready` | whether everything in a selection has a value |
-
-A probe never throws and never starts a load, so it is safe to read before anything has landed. The value is also a promise, for a handler or a test: `await deals` waits for it, and `s.then`, `s.catch` and `s.finally` reach the same settling.
+| Method | Address | File below `src` |
+| --- | --- | --- |
+| `GET` | `/` | `index.abide` |
+| `GET` | `/__abide/handlers/deals/lib/DealNotes/getNotes` | `deals/lib/DealNotes.abide` `(private)` |
+| `GET` | `/contacts` | `contacts/index.abide` |
+| `GET` | `/contacts/listContacts` | `contacts/listContacts.handler.ts` |
+| `GET` | `/deals` | `deals/index.abide` |
+| `POST` | `/deals/createDeal` | `deals/createDeal.handler.ts` |
+| `GET` | `/deals/exportDeals` | `deals/exportDeals.handler.ts` |
+| `GET` | `/deals/getDeal` | `deals/getDeal.handler.ts` |
+| `GET` | `/deals/listDeals` | `deals/listDeals.handler.ts` |
+| `PATCH` | `/deals/moveDeal` | `deals/moveDeal.handler.ts` |
+| `GET` | `/profile` | `profile/index.abide` |
 
 ## Next
 
@@ -1656,10 +1812,11 @@ The pipeline lives at `src/pipeline`: deals in four stages, a forecast, a search
 
 ## A call with the same arguments is one load
 
-**`getStage({ stage })` — one entry per set of arguments** — Two panels, each with its own stage picker. Put one on won, and then the other.
+**`getStage({ stage })` — one entry per set of arguments** — Three panels, each with its own stage picker. Put one on won, and then the others.
 
 ```abide src/pipeline/lib/StageTiles.abide
 <script>
+import StageAverage from './StageAverage.abide'
 import StageCount from './StageCount.abide'
 import StageValue from './StageValue.abide'
 </script>
@@ -1667,6 +1824,7 @@ import StageValue from './StageValue.abide'
 <div class="row">
     <StageCount />
     <StageValue />
+    <StageAverage />
 </div>
 ```
 
@@ -1718,6 +1876,34 @@ const totals = reactive(() => getStage({ stage }))
 </ul>
 ```
 
+```abide src/pipeline/lib/StageAverage.abide
+<script>
+import { reactive } from '@abide/abide'
+
+import getStage from '../getStage.handler.ts'
+import { dollars } from './dollars.ts'
+import { STAGES } from './STAGES.ts'
+
+let stage = reactive('lead')
+const totals = reactive(() => getStage({ stage }))
+const average = reactive(() =>
+    totals.ready() && totals.count > 0
+        ? dollars(Math.round(totals.value / totals.count))
+        : '—',
+)
+</script>
+
+<ul class="fields stacked">
+    <li><span>stage</span>
+        <select bind:value={stage}>
+            {#for one of STAGES}
+                <option value={one}>{one}</option>
+            {/for}
+        </select></li>
+    <li><span>average</span><strong>{average}</strong></li>
+</ul>
+```
+
 ```ts src/pipeline/getStage.handler.ts
 import { GET } from '@abide/abide/server'
 
@@ -1759,20 +1945,67 @@ function pick(index: number, stage: string): void {
     select.dispatchEvent(new Event('change', { bubbles: true }))
 }
 
-test('two readers of one stage are one load', async () => {
+test('three readers of one stage are one load', async () => {
     // Nothing held from an earlier test, so the first read loads.
     getStage.invalidate()
     const before = LOADS.won ?? 0
     using _tiles = await mount(StageTiles({}))
     pick(0, 'won')
     pick(1, 'won')
+    pick(2, 'won')
     await Bun.sleep(600)
-    // Both panels on `won`: one load between them.
+    // All three panels on `won`: one load between them.
     expect((LOADS.won ?? 0) - before).toBe(1)
 })
 ```
 
-The two panels never speak to each other, and nothing is lifted into a parent. When both ask for the same stage they get the same entry, so the second panel paints at once, with no request. On two stages they are two entries, and each pays for its own.
+```ts src/pipeline/lib/StageTiles.bench.ts
+import { reactive } from '@abide/abide'
+import { batch, type Batched } from '@abide/harness/report'
+
+import { STAGES } from './STAGES.ts'
+
+// The three panels as the card reads them, entries summed over `count` deals.
+function panels(count: number): () => void {
+    const entries = new Map<string, { count: number; value: number }>()
+    for (const stage of STAGES) entries.set(stage, { count: 0, value: 0 })
+    for (let at = 0; at < count; at += 1) {
+        const entry = entries.get(STAGES[at % STAGES.length] as string)
+        if (entry) {
+            entry.count += 1
+            entry.value += 1000
+        }
+    }
+    const stages = [reactive('lead'), reactive('lead'), reactive('lead')]
+    const readers = stages.map((stage) => reactive(() => entries.get(stage())))
+    for (const reader of readers) reader()
+    let at = 0
+    return () => {
+        at = (at + 1) % STAGES.length
+        for (const stage of stages) stage.set(STAGES[at] as string)
+        for (const reader of readers) reader()
+    }
+}
+
+// The most a pick may take among 1,000 deals, in milliseconds.
+export const CEILINGS = { priced: { 'among 1,000': 1 } }
+
+/** Three panels onto the next stage, among 100 deals and among 1,000. */
+export function priced(): Batched {
+    return batch({
+        case: 'put three panels on one stage, read each entry',
+        emulated: null,
+        arms: {
+            'among 100': panels(100),
+            'among 1,000': panels(1000),
+        },
+    })
+}
+```
+
+The bench puts all three panels on one stage once each entry has been answered, among 100 deals and among 1,000. Its ratio is what a pick costs as the pipeline grows: the panels read the entry the server summed, and never the deals.
+
+The three panels never speak to each other, and nothing is lifted into a parent. When they ask for the same stage they get the same entry, so the later panels paint at once, with no request. On two stages they are two entries, and each pays for its own.
 
 A body with a parameter is a keyed value: one entry per set of arguments, held. That is true of a handler like `getStage`, and of `reactive((args) => …)` written in a page. The arguments are its `Args`, and the key is their JSON with the properties sorted, so argument order never splits an entry.
 
@@ -1884,7 +2117,7 @@ test('reload now keeps the figure up; mark stale loads nothing', async () => {
 
 `refresh()` loads now and keeps the forecast on screen while it does: the value is `busy()` and still `ready()`, and it swaps when the new one lands. `invalidate()` loads nothing. It marks what is held as wrong, and the next read fetches.
 
-Press Mark stale and then Reload now, and the forecast blanks between the two. The reload has nothing trusted to serve, so it is a first load again. Reach for one or the other, not both.
+Reach for one or the other, not both. A reload over a value marked stale has nothing trusted to serve, so the figure blanks until it lands.
 
 | Name | What it does for the pipeline |
 | --- | --- |
@@ -2081,7 +2314,8 @@ Every keystroke is a new `q`, and so a new key. `debounce: 300` holds the search
 | `debounce` | changes once the changes stop for that many ms |
 | `throttle` | changes at once, then at most once per window: a live deal count that updates every second, not every message |
 | `identity` | what counts as the same value: a new value equal to the held one by it wakes nobody. The default is the reference |
-| `structural` | `{ identity: structural }` compares by content, so a forecast that reloads to the same record does not repaint |
+| `structural` | `{ identity: structural }` compares by content, so a stage whose `{ count, value }` reloads unchanged does not repaint |
+| `transform` | `{ transform: (names) => names.toSorted() }` reshapes the results once, as they land, rather than in every reader. The function is a `Transformer` |
 
 ## `patch` changes one row of a list in place
 
@@ -2170,11 +2404,7 @@ test('an update rewrites one amount and builds nothing', async () => {
 
 The `by deal.id` on the loop keeps each row tied to its deal, so the row the update names is the only one that changes.
 
-Change the held value without `patch` and nothing on the page moves, because no reader was told. The change shows up on the next patch, attached to the wrong update.
-
-| Name | What it does for the pipeline |
-| --- | --- |
-| `transform` | `{ transform: (rows) => new Map(rows.map((deal) => [deal.id, deal])) }` reshapes the list once, as it lands, so an update by id is a lookup rather than a scan. The function is a `Transformer` |
+`patch` changes the array it holds and copies nothing. A path write in a `.abide` file, `deals[0].amount = 27_500`, also wakes the readers, but copies the path it writes down first. In a `.ts` file, or where the held value is not plain data, `patch` is the write that wakes them.
 
 ## Two components far apart share one value
 
@@ -2260,7 +2490,7 @@ test('picking a deal in the list shows it in the detail panel', async () => {
 
 `DealPicker` creates `selectedDeal`. Every row and the detail panel ask for the same key, find that one on the way up, and never run their own build. No prop runs between them.
 
-Use the value `reactive.share` returns, and no other name. A value lives in the component that created it and below, so two pickers on one page each get their own. Where a value is one thing for the whole app, export it from a module instead.
+A value lives in the component that created it and below, so two pickers on one page each get their own. Where a value is one thing for the whole app, export it from a module instead.
 
 `Shared` is an interface you widen with declaration merging to type each key. It is optional: without it, the type comes from the build function.
 
@@ -2354,7 +2584,7 @@ The draft is read in the effect, not inside the timer: a read there happens afte
 | `s.peek` | reads what is held without subscribing |
 | `flushSync` | runs every effect a write woke before it returns, for a handler that measures or scrolls the page the write left |
 
-Where a read subscribes depends on where it runs:
+The effect is the one place in this card where a read subscribes. Its `Disposer` does not, and nor does any function abide calls without rebuilding it:
 
 | A read in | Subscribes |
 | --- | --- |
@@ -2362,125 +2592,114 @@ Where a read subscribes depends on where it runs:
 | `watch` effect, over sources | to the sources alone |
 | `Transformer`, `Disposer`, middleware, lifecycle hooks | to nothing: none of them is rebuilt |
 
-## A `store` keeps a preference between visits
+## A `store` keeps a value between visits
 
-**`{ store }` — where a value lives between visits** — The pipeline as a board or a list. Pick list, then reload the page.
+**`{ store }` — where a value lives between visits** — The quarter's target, which the whole team works to. Set a new one, then reload the page.
 
-```abide src/pipeline/lib/PipelineView.abide
+```abide src/pipeline/lib/TeamTarget.abide
 <script>
 import { reactive } from '@abide/abide'
 
-import { preferenceStore } from './preferenceStore.ts'
-import { STAGES } from './STAGES.ts'
-import StageTile from './StageTile.abide'
-
-const VIEWS = ['board', 'list']
+import { dollars } from './dollars.ts'
+import { targetStore } from './targetStore.ts'
 
 // One option, and the reads and writes below are untouched.
-let view = reactive('board', { store: preferenceStore('view') })
+let target = reactive(500_000, { store: targetStore })
 </script>
 
-<div class="tabs">
-    {#for one of VIEWS}
-        <button aria-selected={view === one} onclick={() => (view = one)}>
-            {one}</button>
-    {/for}
-</div>
+<label>the team's target this quarter
+    <input type="number" step="50000" bind:value={target}>
+</label>
 
-<ul class={view === 'board' ? 'tiles' : 'fields'}>
-    {#for stage of STAGES}
-        <StageTile stage={stage} />
-    {/for}
+<ul class="tiles">
+    <li><span>target</span><strong>{dollars(target)}</strong></li>
 </ul>
 ```
 
-```ts src/pipeline/lib/preferenceStore.ts
+```ts src/pipeline/lib/targetStore.ts
 import type { Store } from '@abide/abide'
 
-import getPreference from '../getPreference.handler.ts'
-import setPreference from '../setPreference.handler.ts'
-
-/** Where a preference lives between visits: both halves, or neither. */
-export function preferenceStore(name: string): Store<string> {
-    return {
-        // Never saved answers `null`, which is the miss.
-        get: async () => (await getPreference({ name })) ?? undefined,
-        set: async (value) => {
-            await setPreference({ name, value })
-            // The next read asks the server, not this tab's copy.
-            getPreference.invalidate({ name })
-        },
-    }
+import getTarget from '../getTarget.handler.ts'
+import setTarget from '../setTarget.handler.ts'
+
+/** The team's target, kept on the server, so every visitor reads one. */
+export const targetStore: Store<number> = {
+    // Never set answers `null`, which is the miss.
+    get: async () => (await getTarget()) ?? undefined,
+    set: async (target) => {
+        await setTarget({ target })
+        // The next read asks the server, not this tab's copy.
+        getTarget.invalidate()
+    },
 }
 ```
 
-```ts src/pipeline/getPreference.handler.ts
+```ts src/pipeline/getTarget.handler.ts
 import { GET } from '@abide/abide/server'
 
-import { PREFERENCES } from './lib/PREFERENCES.server.ts'
+import { TEAM } from './lib/TEAM.server.ts'
 
-/** A saved preference, or `null` where none was saved. */
+/** The team's target, or `null` where nobody has set one. */
 export default GET(
-    async ({ name }: { name: string }) => {
+    async () => {
         // A slow database, so the wait is on screen.
         await Bun.sleep(300)
-        return PREFERENCES[name] ?? null
+        return TEAM.target ?? null
     },
-    { description: 'Reads a saved view preference.' },
+    { description: "Reads the team's target for the quarter." },
 )
 ```
 
-```ts src/pipeline/setPreference.handler.ts
+```ts src/pipeline/setTarget.handler.ts
 import { POST } from '@abide/abide/server'
 
-import { PREFERENCES } from './lib/PREFERENCES.server.ts'
+import { TEAM } from './lib/TEAM.server.ts'
 
-/** Saves a preference. */
+/** Sets the target the whole team sees. */
 export default POST(
-    ({ name, value }: { name: string; value: string }) => {
-        PREFERENCES[name] = value
+    ({ target }: { target: number }) => {
+        TEAM.target = target
     },
-    { description: 'Saves a view preference.' },
+    { description: "Sets the team's target for the quarter." },
 )
 ```
 
-```ts src/pipeline/lib/PipelineView.test.ts
+```ts src/pipeline/lib/TeamTarget.test.ts
 import { expect, test } from 'bun:test'
 
 import { flushSync } from '@abide/abide'
 import { mount } from '@abide/harness/abide'
 
-import PipelineView from './PipelineView.abide'
-import { PREFERENCES } from './PREFERENCES.server.ts'
+import { TEAM } from './TEAM.server.ts'
+import TeamTarget from './TeamTarget.abide'
 
-function chosen(): string | undefined {
-    const tab = document.querySelector('[aria-selected="true"]')
-    return tab?.textContent?.trim()
-}
+const shown = () => document.querySelector('strong')?.textContent
 
-test('the view picked is the view the next visit opens on', async () => {
+test('a target set once is what every later visit opens on', async () => {
     {
-        using _first = await mount(PipelineView({}))
+        using _first = await mount(TeamTarget({}))
         await Bun.sleep(500)
-        expect(chosen()).toBe('board')
-        for (const tab of document.querySelectorAll('button'))
-            if (tab.textContent?.trim() === 'list') tab.click()
+        expect(shown()).toBe('$500,000')
+        const input = document.querySelector('input')
+        if (!input) throw new Error('no target field')
+        input.value = '750000'
+        input.dispatchEvent(new Event('input', { bubbles: true }))
         flushSync()
         await Bun.sleep(100)
-        expect(PREFERENCES.view).toBe('list')
+        expect(TEAM.target).toBe(750_000)
     }
-    // A fresh component, as a reload builds one.
-    using _next = await mount(PipelineView({}))
+    // A fresh component, as another visitor's page builds one.
+    using _next = await mount(TeamTarget({}))
     await Bun.sleep(500)
-    expect(chosen()).toBe('list')
+    expect(shown()).toBe('$750,000')
 })
 ```
 
-A `Store` is a `get` and a `set`. The value reads the store when it is built and falls back to `'board'` on a miss, and every change is written back. The reads and writes in the markup do not change.
+A `Store` is a `get` and a `set`. The value reads the store when it is built and falls back to `500_000` on a miss, and every change is written back. The reads and writes in the markup do not change.
 
-Where the stored value can change from outside the app, such as a file another program edits, the store adds `watch`. It is handed a function to call when that happens, and returns the function that stops watching. The value reads `get` again, and the body does not run.
+This store goes through two handlers, so the target is one value on the server: the next visit opens on it, and so does everyone else's, painted right the first time. After a write, `set` invalidates the read it made, so the next read asks the server rather than this tab's copy. A setting one visitor alone sees, such as a theme, belongs in a cookie instead.
 
-This store goes through two handlers, so the server and the browser read the same preference and the first paint is already right. A store over `localStorage` works too, but only in a browser, so the server paints the fallback first. After a write, `set` invalidates the read it made, so the next read asks the server rather than this tab's copy.
+Where the stored value can change from outside the app, such as a file another program edits, the store adds `watch`. It is handed a function to call when that happens, and returns the function that stops watching. The value reads `get` again, and the body does not run.
 
 ## Next
 
@@ -2494,7 +2713,7 @@ This store goes through two handlers, so the server and the browser read the sam
 
 *An activity feed every open tab sees as it happens.*
 
-Activity on an account is something every open tab should see as it happens. This chapter makes a feed anything can write to and everyone reads, and streams answers as they arrive.
+Activity on an account is something every open tab should see as it happens. This chapter makes a channel anything can write to and everyone reads, and streams answers as they arrive.
 
 A channel is a `reactive` holding an array. Anything that can reach it appends with `patch`, and anything that can reach it reads. Put one behind a `GET` and every open tab follows it. A handler that yields sends each value as it is produced, from the same address that answers with the whole.
 
@@ -2576,11 +2795,56 @@ test('a reader the logger never names follows what it logs', async () => {
 })
 ```
 
+```ts src/activity/lib/QuickLog.bench.ts
+import { reactive } from '@abide/abide'
+import { batch, type Batched } from '@abide/harness/report'
+
+import type { Activity } from './activity.ts'
+
+// The channel as the card logs to it: `count` entries, the oldest let go.
+function logging(count: number): () => void {
+    const opening: Activity[] = []
+    for (let at = 0; at < count; at += 1)
+        opening.push({ id: at, contact: `Contact ${at}`, kind: 'Email' })
+    const activity = reactive(opening)
+    const last = reactive(() => activity().at(-1))
+    last()
+    return () => {
+        activity.patch((entries) => {
+            entries.push({
+                id: (entries.at(-1)?.id ?? 0) + 1,
+                contact: 'Grace Hopper',
+                kind: 'Call',
+            })
+            entries.shift()
+        })
+        last()
+    }
+}
+
+// The most a log may take in a channel of 1,000 entries, in milliseconds.
+export const CEILINGS = { priced: { 'of 1,000 entries': 1 } }
+
+/** Logging a call to a channel of 100 entries, and of 1,000. */
+export function priced(): Batched {
+    return batch({
+        case: 'log a call, read the last touch',
+        emulated: null,
+        arms: {
+            'of 100 entries': logging(100),
+            'of 1,000 entries': logging(1000),
+        },
+    })
+}
+```
+
+The bench logs a call to a channel of 100 entries, and of 1,000, letting the oldest go each time. Its ratio is what a log costs as the channel grows: the patch changes the entries in place, and the channel is never copied.
+
 `activity.ts` holds the channel and the one function that writes it. The bar imports the function, the readout imports the channel, and neither imports the other. No prop is threaded between them and no provider wraps them.
 
 The readout derives `last` as `activity.at(-1)`, and follows the channel the way any derived value follows what it read. Opened with an array, the channel has landed: it is `ready()` at once and never `busy()` where it is written.
 
-## A feed keeps its last few entries
+## A channel keeps its last few entries
 
 **`patch` with a trim — the last three entries** — The same channel listed in full, already three entries long. Log a meeting and watch the top of the list.
 
@@ -2653,7 +2917,7 @@ The trim is one line in the patch that appends: `if (entries.length > 3)
 
 A value keeps no past of its own. Where you want what came before, make the value the array and append where you write, as here. An undo stack is the same: an array the app pushes into.
 
-## A feed on the server reaches every open tab
+## A channel on the server reaches every open tab
 
 **`GET` + `POST` — one account's feed, every tab** — The activity feed on Hopper & Co. Open this page in a second tab, log a call in either, and both lists grow.
 
@@ -2731,6 +2995,22 @@ export default POST(
 import { expect, test } from 'bun:test'
 
 import { createApp } from '@abide/abide/server'
+import { mount } from '@abide/harness/abide'
+
+import AccountFeed from './AccountFeed.abide'
+
+const kinds = () =>
+    [...document.querySelectorAll('strong')].map((each) => each.textContent)
+
+test('the patch the button sends is what lists the call', async () => {
+    using _feed = await mount(AccountFeed({}))
+    await Bun.sleep(100)
+    const before = kinds().length
+    document.querySelector('button')?.click()
+    await Bun.sleep(200)
+    expect(kinds()).toHaveLength(before + 1)
+    expect(kinds().at(-1)).toBe('Call')
+})
 
 // Each request is a caller of its own, as each open tab is.
 test('what one caller logs, another caller reads', async () => {
@@ -2752,17 +3032,17 @@ test('what one caller logs, another caller reads', async () => {
 
 | You write | What it is |
 | --- | --- |
-| `reactive(fn, { global: true })` | the feeds, one per account, shared by every caller |
+| `reactive(fn, { global: true })` | the channels, one per account, shared by every caller |
 | `GET(feeds)` | its address: a tab reading it follows it |
-| `POST(…)` | the way in: a handler that patches a feed |
+| `POST(…)` | the way in: a handler that patches a channel |
 
-`global: true` puts the feeds in one cache for the whole process. Leave it out and a value on the server belongs to one request, so every caller gets a feed of their own and nobody sees anybody's calls. The body takes `account`, so there is one feed per account, and `ttl` lets one nobody has written to for an hour go.
+`global: true` puts the channels in one cache for the whole process. Leave it out and a value on the server belongs to one request, so every caller gets a channel of their own and nobody sees anybody's calls. The body takes `account`, so there is one channel per account, and `ttl` lets one nobody has written to for an hour go. `by: 'id'` tells one entry from another, and every tab's copy carries it, so `{#for entry of entries}` keys its rows by id with no key of its own.
 
-A tab reading `feed` is subscribed to it, over one web socket that every followed `GET` on the page shares. The button does not paint its own entry. It calls `logToFeed`, the handler patches the feed, and what the patch wrote goes to every tab following it, this one included. Each write travels as a `PatchOp`, so a new entry is one `add` rather than the whole feed.
+A tab reading `feed` is subscribed to it, over one web socket that every followed `GET` on the page shares. The button does not paint its own entry. It calls `logToFeed`, the handler patches the channel, and what the patch wrote goes to every tab following it, this one included. Each write travels as a `PatchOp`, so a new entry is one `add` rather than the whole channel.
 
 The server writes each entry: its id, its kind and its time. A caller can only pick a kind the server knows, so nobody forges an entry, and who may log at all is the `POST`'s own middleware. The call hands back the same `Reactive` the handler had, its `Produced` type included, so `entries.length` and `{#for entry of entries}` read it like any array.
 
-The feed lives in memory. A restart starts it empty, and each instance of the app holds its own. Activity anyone must scroll back past that belongs in your database, behind an ordinary handler.
+The channel lives in memory. A restart starts it empty, and each instance of the app holds its own. Activity anyone must scroll back past that belongs in your database, behind an ordinary handler.
 
 ## A handler that yields sends each entry as it is read
 
@@ -2770,7 +3050,7 @@ The feed lives in memory. A restart starts it empty, and each instance of the ap
 
 ```abide src/activity/lib/ActivityHistory.abide
 <script>
-import { reactive, refresh } from '@abide/abide'
+import { reactive } from '@abide/abide'
 
 import olderActivity from '../olderActivity.handler.ts'
 
@@ -2783,10 +3063,7 @@ const entries = reactive(() => olderActivity())
     {/for}
 </ul>
 
-<div class="row">
-    <button onclick={() => refresh(entries)}>Read again</button>
-    {#if entries.busy()}<span class="status">reading the archive…</span>{/if}
-</div>
+{#if entries.busy()}<p class="status">reading the archive…</p>{/if}
 ```
 
 ```ts src/activity/olderActivity.handler.ts
@@ -2814,9 +3091,27 @@ export default GET(
 ```ts src/activity/lib/ActivityHistory.test.ts
 import { expect, test } from 'bun:test'
 
+import { mount } from '@abide/harness/abide'
+
 import olderActivity from '../olderActivity.handler.ts'
+import ActivityHistory from './ActivityHistory.abide'
+
+const listed = () => document.querySelectorAll('li').length
+
+test('the list shows each entry as it is read', async () => {
+    using _history = await mount(ActivityHistory({}))
+    const reading = () => document.body.textContent?.includes('reading')
+    while (listed() === 0) await Bun.sleep(20)
+    // One entry in, and the archive still being read.
+    expect(listed()).toBeLessThan(3)
+    expect(reading()).toBe(true)
+    // The rest arrive on their own; the test times out where they never do.
+    while (listed() < 3) await Bun.sleep(20)
+})
 
 test('the first entry is in hand while the rest are still read', async () => {
+    // Read afresh rather than the run the test above left settled.
+    olderActivity.invalidate()
     const entries = olderActivity()
     const stillReading: boolean[] = []
     for await (const _entry of entries) stillReading.push(entries.busy())
@@ -2840,7 +3135,7 @@ A page rendered on the server is not held for an unfinished stream. What the str
 
 ## An export is written as its rows are read
 
-**`bytes(values)` — a CSV written as the cursor reaches each row** — An account's activity as a CSV download. Each line goes into the file as its row is read.
+**`bytes(values)` — a CSV written as the cursor reaches each row** — A rep takes an account's activity into a spreadsheet. The preview above the link is the file it downloads.
 
 ```abide src/activity/lib/CsvExport.abide
 <script>
@@ -2889,6 +3184,22 @@ export default GET(() => bytes(csvOf()), {
 import { expect, test } from 'bun:test'
 
 import { createApp } from '@abide/abide/server'
+import { mount } from '@abide/harness/abide'
+
+import CsvExport from './CsvExport.abide'
+
+test('the preview is the file the link downloads', async () => {
+    // An app in this process, which the component's call is answered by.
+    await using _app = await createApp()
+    using _export = await mount(CsvExport({}))
+    await Bun.sleep(900)
+    expect(document.querySelector('pre')?.textContent).toStartWith(
+        'date,kind,note\n2026-09-02,Call,',
+    )
+    expect(document.querySelector('a')?.getAttribute('href')).toEndWith(
+        '/activity/exportCsv',
+    )
+})
 
 test('the export is a file, written a row at a time', async () => {
     await using app = await createApp()
@@ -2897,6 +3208,7 @@ test('the export is a file, written a row at a time', async () => {
     )
     const reader = (answer.body as ReadableStream<Uint8Array>).getReader()
     const first = await reader.read()
+    // The header goes out alone, before the first row is read.
     expect(new TextDecoder().decode(first.value)).toBe('date,kind,note\n')
     await reader.cancel()
 })
@@ -2915,7 +3227,7 @@ A stream whose first chunk is binary is sent as bytes without the helper. `bytes
 
 ## A wallboard is sent events whatever it asks for
 
-**`sse(values)` — events, whoever asks** — A wallboard by the sales floor reads today's deal moves. It sends no Accept header, and what comes back is events anyway.
+**`sse(values)` — events, whoever asks** — A wallboard by the sales floor reads today's deal moves with the plain request its script has always sent.
 
 ```abide src/activity/lib/Wallboard.abide
 <script>
@@ -2956,14 +3268,19 @@ export default GET(() => sse(MOVES), {
 import { expect, test } from 'bun:test'
 
 import { createApp } from '@abide/abide/server'
+import { mount } from '@abide/harness/abide'
+
+import Wallboard from './Wallboard.abide'
 
 test('a caller asking for nothing in particular is sent events', async () => {
-    await using app = await createApp()
-    const answer = await app.fetch(
-        new Request('http://crm.invalid/activity/ticker'),
+    // An app in this process, which the component's call is answered by.
+    await using _app = await createApp()
+    using _board = await mount(Wallboard({}))
+    await Bun.sleep(300)
+    expect(document.querySelector('strong')?.textContent).toStartWith(
+        'text/event-stream',
     )
-    expect(answer.headers.get('content-type')).toStartWith('text/event-stream')
-    expect(await answer.text()).toContain(
+    expect(document.querySelector('pre')?.textContent).toContain(
         'data: {"account":"Hopper & Co","stage":"Won"}\n',
     )
 })
@@ -2971,7 +3288,7 @@ test('a caller asking for nothing in particular is sent events', async () => {
 
 A wallboard script, like `curl`, asks for nothing in particular, and an async generator answers that caller with JSON Lines. `sse` fixes the answer as events, `data: ` and a JSON value per event, so the board reads it with the event-stream parser it already has. An `EventSource` asks for events by name, and gets them from any streaming handler without the helper.
 
-## Watch a feed from the terminal
+## Watch a channel from the terminal
 
 ```
 abide watch activity/feed account=hopper-co --url http://localhost:3000
@@ -3029,6 +3346,24 @@ An `**/index.abide` answers its directory's own address, and any other `**/<name
 | `[[name]]` | one segment or none | text, absent when nothing matched |
 | `[...name]` | every remaining segment | a list, empty when nothing matched |
 
+## A link names a route, and `url` fills it in
+
+The list links each company with `url('/companies/[id=SLUG]', { id: company.id })`. You write the pattern a page is filed under, matcher and all, rather than the address, and `url` fills in the segments. Leaving out a required one is a compile error, and a pattern no page is filed under is refused by `abide check`. A query goes last: `url('/companies', {}, { city: 'London' })`.
+
+| Name | What it does for the CRM |
+| --- | --- |
+| `Routes` | every pattern the CRM files a page under, and every public file's address, declared by `abide check` |
+| `RouteLiteral` | one of those patterns: what `url` takes |
+| `Query` | the query argument, a record or a `URLSearchParams` |
+| `ParamsOf<P>` | the params object pattern `P` takes |
+| `HasParams<P>` | whether `P` requires one |
+| `HasSegments<P>` | whether `P` has any bracketed segment |
+| `RequiredNames<P>` | its `[name]` segments |
+| `OptionalNames<P>` | its `[[name]]` segments |
+| `RestNames<P>` | its `[...name]` segments |
+
+You never write the last six. They are how `url`'s signature is read off the pattern, and a compile error naming `RequiredNames` is naming the segment you left out.
+
 ## `[id=SLUG].abide` answers for every company
 
 **`[id=SLUG].abide` — one file for every company** — Two companies, one page file. Pick one: the address changes, and the page loads the company the address names.
@@ -3075,7 +3410,9 @@ const company = reactive(() => getCompany({ id: route.params.id }))
 <CompanyTabs />
 
 <style>
-::view-transition-group(*) { animation-duration: 0.5s; }
+::view-transition-group(*) {
+    animation-duration: 0.5s;
+}
 </style>
 ```
 
@@ -3097,7 +3434,7 @@ test('one file answers for every company, reading its id', async () => {
 })
 ```
 
-`route.params.id` is the segment the address matched. It is a reactive value like any other, so moving from one company to the next reloads the company rather than rebuilding the page.
+`route.params.id` is the segment the address matched, read like any reactive value, so the company the page loads is the one its address names.
 
 | Name | What it does for the CRM |
 | --- | --- |
@@ -3156,7 +3493,9 @@ const company = reactive(() => getCompany({ id: route.params.id }))
 <CompanyTabs />
 
 <style>
-::view-transition-group(*) { animation-duration: 0.5s; }
+::view-transition-group(*) {
+    animation-duration: 0.5s;
+}
 </style>
 ```
 
@@ -3247,30 +3586,34 @@ test('the list and a company render inside one layout', async () => {
 })
 ```
 
+```ts e2e/Layout.test.ts
+import { expect, test } from '@playwright/test'
+
+test('a company opens inside the layout, and the note stays', async ({
+    page,
+}) => {
+    // Relative, so it reaches /companies below whatever base the run serves.
+    await page.goto('companies', { waitUntil: 'networkidle' })
+    const note = page.getByPlaceholder('Note for the call')
+    await note.fill('Grace wants a quote')
+    await page.getByRole('link', { name: 'Hopper & Co', exact: true }).click()
+    await expect(page).toHaveURL('companies/hopper-and-co')
+    await expect(page.getByRole('heading', { name: 'Hopper & Co' })).toHaveText(
+        'Hopper & Co',
+    )
+    await expect(note).toHaveValue('Grace wants a quote')
+    await page.getByRole('link', { name: 'All companies', exact: true }).click()
+    await expect(page).toHaveURL('companies')
+    await expect(note).toHaveValue('Grace wants a quote')
+})
+```
+
 A `**/layout.abide` wraps every page at its directory and below, and `<slot/>` is where the page renders. A navigation between two of its pages swaps what is in the slot and leaves the layout alone, so its inputs, its scroll and anything it was loading stay as they were. Layouts nest: the root layout wraps this one.
 
 A layout's `<script server>` files hooks for the same pages. The companies layout files its `onError` hook there.
 
 A package can ship pages too. `import '…' with { type: 'routes' }` in a file of your app serves every page and handler in the named directory below that file's directory, and moving the line moves them.
 
-## A link names a route, and `url` fills it in
-
-The list links each company with `url('/companies/[id=SLUG]', { id: company.id })`. You write the pattern a page is filed under, matcher and all, rather than the address, and `url` fills in the segments. Leaving out a required one is a compile error, and a pattern no page is filed under is refused by `abide check`. A query goes last: `url('/companies', {}, { city: 'London' })`.
-
-| Name | What it does for the CRM |
-| --- | --- |
-| `Routes` | every pattern the CRM files a page under, declared by `abide check` |
-| `RouteLiteral` | one of those patterns: what `url` takes |
-| `Query` | the query argument, a record or a `URLSearchParams` |
-| `ParamsOf<P>` | the params object pattern `P` takes |
-| `HasParams<P>` | whether `P` requires one |
-| `HasSegments<P>` | whether `P` has any bracketed segment |
-| `RequiredNames<P>` | its `[name]` segments |
-| `OptionalNames<P>` | its `[[name]]` segments |
-| `RestNames<P>` | its `[...name]` segments |
-
-You never write the last six. They are how `url`'s signature is read off the pattern, and a compile error naming `RequiredNames` is naming the segment you left out.
-
 ## `navigate` moves the address from code
 
 **`navigate` — a new address, the same page** — A company page keeps its open tab in the address, so a link can open it. Type a draft, then switch tabs: the address moves, and the draft stays.
@@ -3316,13 +3659,30 @@ test('the open tab is read from the address', async () => {
 })
 ```
 
-An address the page already shown matches moves `route.url` and keeps the page mounted. Another page's address mounts that page in place, without reloading the document. `replace: true` writes over the history entry, so Back leaves the company rather than stepping through every tab.
+```ts e2e/CompanyTabs.test.ts
+import { expect, test } from '@playwright/test'
+
+test('a tab moves the address, and the draft stays', async ({ page }) => {
+    // Relative, so it reaches /companies below whatever base the run serves.
+    await page.goto('companies/hopper-and-co', { waitUntil: 'networkidle' })
+    const draft = page.getByPlaceholder('Follow up on Friday')
+    await draft.fill('Ask Grace about the renewal')
+    await page.getByRole('button', { name: 'notes', exact: true }).click()
+    await expect(page).toHaveURL('companies/hopper-and-co?tab=notes')
+    await expect(
+        page.getByRole('button', { name: 'notes', exact: true }),
+    ).toHaveAttribute('aria-selected', 'true')
+    await expect(draft).toHaveValue('Ask Grace about the renewal')
+})
+```
+
+An address that matches the page already shown moves `route.url` and keeps the page mounted. Another page's address mounts that page in place, without reloading the document. `replace: true` writes over the history entry, so Back leaves the company rather than stepping through every tab.
 
 A plain `<a href>` click does the same. Reach for `navigate` when code decides where to go. `route.navigating` is true while a navigation is in flight, which is what a progress bar reads.
 
 ## A view transition carries the company across pages
 
-**`view-transition-name` — a company name that moves to where it lands** — The list row and the company page give the company's name the same view-transition-name. Open a company: the name travels from its row to the heading.
+**`view-transition-name` — a company name that moves to where it lands** — A rep opens a company from the list, and the name they clicked becomes the heading they land on. Open one and watch it travel.
 
 ```abide src/companies/lib/TransitionFrame.abide
 <script>
@@ -3352,7 +3712,9 @@ const companies = reactive(() => listCompanies())
 </ul>
 
 <style>
-::view-transition-group(*) { animation-duration: 0.5s; }
+::view-transition-group(*) {
+    animation-duration: 0.5s;
+}
 </style>
 ```
 
@@ -3377,7 +3739,9 @@ const company = reactive(() => getCompany({ id: route.params.id }))
 <CompanyTabs />
 
 <style>
-::view-transition-group(*) { animation-duration: 0.5s; }
+::view-transition-group(*) {
+    animation-duration: 0.5s;
+}
 </style>
 ```
 
@@ -3399,58 +3763,20 @@ test("the list row and the company's heading share one name", async () => {
 
 Elements on two pages that share a `view-transition-name` are animated from one place to the other. A `<style>` rule naming a view transition turns them on. The build reads it, so an app with none never looks for one at run time. A navigation waits for the DOM to be written, not for the animation. A browser without view transitions navigates as it otherwise would.
 
-## `<head>` in a page replaces its layout's
+## A page's `<head>` wins over its layout's, key by key
 
-**`<head>` in a page and its layout — the deepest title wins** — The companies layout titles every page, and a company page titles itself. Open the list, then a company: the tab takes the company's name.
+**`<head>` in a page and its layout — the deepest title wins** — The companies layout titles every page, and a company page titles itself. Open each in a tab of its own: the company's tab takes its name.
 
 ```abide src/companies/lib/TabTitle.abide
 <script>
-import { reactive, url } from '@abide/abide'
-
-const PAGES = [
-    { label: 'All companies', address: url('/companies') },
-    {
-        label: 'Hopper & Co',
-        address: url('/companies/[id=SLUG]', { id: 'hopper-and-co' }),
-    },
-]
-
-let open = reactive(PAGES[0]?.address ?? '')
-let title = reactive('—')
-
-const ALL = { subtree: true, childList: true, characterData: true }
-
-// Follows the framed page's tab title as it loads and as it fills in.
-function followTitle(element: Element) {
-    const frame = element as HTMLIFrameElement
-    const read = () => (title = frame.contentDocument?.title || '—')
-    const watcher = new MutationObserver(read)
-    const watch = () => {
-        read()
-        const head = frame.contentDocument?.head
-        if (head) watcher.observe(head, ALL)
-    }
-    frame.addEventListener('load', watch)
-    return () => {
-        frame.removeEventListener('load', watch)
-        watcher.disconnect()
-    }
-}
+import { url } from '@abide/abide'
 </script>
 
-<div class="tabs">
-    {#for page of PAGES}
-        <button aria-selected={open === page.address}
-            onclick={() => (open = page.address)}>{page.label}</button>
-    {/for}
+<div class="row">
+    <a href={url('/companies')} target="_blank">All companies</a>
+    <a href={url('/companies/[id=SLUG]', { id: 'hopper-and-co' })}
+        target="_blank">Hopper & Co</a>
 </div>
-
-<ul class="fields">
-    <li><span>tab title</span><strong>{title}</strong></li>
-</ul>
-
-<iframe src={open} bind:element={followTitle} title="A page and its title"
-    class="h-48 w-full rounded-md border border-rule"></iframe>
 ```
 
 ```abide src/companies/layout.abide
@@ -3499,7 +3825,9 @@ const company = reactive(() => getCompany({ id: route.params.id }))
 <CompanyTabs />
 
 <style>
-::view-transition-group(*) { animation-duration: 0.5s; }
+::view-transition-group(*) {
+    animation-duration: 0.5s;
+}
 </style>
 ```
 
@@ -3524,7 +3852,7 @@ test("a page's title replaces its layout's", async () => {
 })
 ```
 
-A `<head>` sits at the top level of a file, never inside a block. A `<title>`, a `<meta>` by its name and a `<link>` by its `rel` and `href` each have a key, and the deepest contribution for a key wins. One with no key is appended. Leaving a page puts its layout's title back.
+A `<head>` sits at the top level of a file, never inside a block. A `<title>` and a `<base>` by their tag, a `<meta>` by its `name` or `property`, and a `<link>` by its `rel` and `href` each have a key, and the deepest contribution for a key wins. One with no key is appended. Leaving a page puts its layout's title back.
 
 ## The page goes out before the company lands
 
@@ -3567,7 +3895,9 @@ const company = reactive(() => getCompany({ id: route.params.id }))
 <CompanyTabs />
 
 <style>
-::view-transition-group(*) { animation-duration: 0.5s; }
+::view-transition-group(*) {
+    animation-duration: 0.5s;
+}
 </style>
 ```
 
@@ -3686,6 +4016,8 @@ An `**/error.abide` is found the way a layout is: the nearest one above the page
 
 The refusal has to come in the page's first turn to set the status. That is why `getCompany` refuses before it waits. An error page that fails itself hands off to the next one up.
 
+A request for a page that is neither a navigation nor a `fetch`, such as an `<img>` pointed at `/companies/initech`, gets a 404 with no body, and the page is never set up for it.
+
 ## `onError` reports what the caller is not told
 
 **`onError(fn)` — the tracker hears what the caller is not told** — The export worker has stopped answering. Run the export: the button gets a bare 500, and the hook in the companies layout gets the reason.
@@ -3783,6 +4115,8 @@ test('the caller gets a bare 500, and onError gets the reason', async () => {
 
 `onError` runs on an unexpected error in any request below the file that called it. Send the error to a tracker there. The caller gets a 500 with nothing about the cause, so a stack trace never reaches a browser.
 
+The button's `catch` gets whatever was thrown. `isFailed` says whether that is a refusal, which carries a `status` and a `message`, before the button reads either.
+
 ## `render` builds a document from a component
 
 **`render(component)` — an account sheet from the component itself** — A rep sends a customer a one-page account sheet. The handler renders the sheet component into a document of its own, and the frame shows it.
@@ -3827,7 +4161,7 @@ const { company } = props<{
     <body style="margin: 0; padding: 1.25rem; background: #fff; color: #1d2a28;
     font: 14px/1.5 system-ui, sans-serif">
         <h1 style="margin: 0 0 0.5rem; font-size: 1.25rem">{company.name}</h1>
-<table>
+        <table>
             <tr><th align="left">Contact</th><td>{company.contact}</td></tr>
             <tr><th align="left">Pipeline</th><td>{company.pipeline}</td></tr>
         </table>
@@ -3867,7 +4201,7 @@ APP_URL=https://example.com/crm abide start
 
 Set `APP_URL` and every page, handler and asset answers below its path. Nothing is rebuilt: `url`, a handler's address and every asset reference are resolved when they are read, never baked into the build. An address you write out by hand is not, which is one more reason to build them with `url`.
 
-Everything abide serves for itself, from handler calls to the health check, is below `/__abide/**`, so a proxy in front of the CRM forwards one path family.
+A handler file answers at its own route, as `/companies/getCompany` does, so it moves below the path with the pages. What abide serves for itself is below `/__abide/**`: the client bundle, the health report, the OpenAPI document, the MCP endpoint, and a private handler.
 
 ## Next
 
@@ -4109,7 +4443,7 @@ test('the server paints the density the cookie holds', async () => {
 })
 ```
 
-`cookies()` is the request's cookies on the server and the document's in the browser, as a `CookieMap`. Reading a cookie by name follows it, so the list changes on the click. The server render reads the same cookie off the request, so a reload paints compact rather than flashing comfortable first.
+`cookies()` is the request's cookies on the server and the document's in the browser, as a `Cookies`: a jar shaped like Bun's `CookieMap`, with `get`, `set` and `delete`. Reading a cookie by name follows it, so the list changes on the click. The server render reads the same cookie off the request, so a reload paints compact rather than flashing comfortable first.
 
 `cookies()` reads and writes any cookie the request carries: a density, a theme, or another system's session cookie your server checks. The principal cookie is `HttpOnly`, so in the browser `cookies()` never sees the seal.
 
@@ -4282,23 +4616,133 @@ test('sales and a signed-out caller are refused 403', async () => {
 })
 ```
 
-A rung is a `Middleware`: it is handed `next` and the call's context, and either returns `next()` or answers in the handler's place. Returning `refuse(403, …)` refuses, and neither the handler nor any rung after it runs. A throw escapes every rung rather than unwinding through them.
+A rung is a `Middleware`: it is handed `next` and the call's context, and either returns `next()` or answers in the handler's place. Returning `refuse(403, …)` refuses, and neither the handler nor any rung after it runs. A rung outside it is handed the answer from `next()`, the `403` response the caller gets, and never the refusal itself. A throw escapes every rung rather than unwinding through them.
 
 The rung sits on the handler, so it runs on every call: from a browser, from another handler, and from a page rendering on the server. It reads arguments through `ctx.args()`, which parses the body on its first call. So a rung that never asks refuses a signed-out caller before their body is parsed or checked.
 
-To guard a whole section, call `middleware(…)` in its `layout.abide`, such as `src/account/admin/layout.abide`. That rung runs over every page and handler below it, and it has the request and nothing else. The same `adminsOnly` fits there, and its refusal is painted by the section's `error.abide` over a page and answered as Problem Details over a handler:
+## A layout's rung guards a whole section
+
+**`middleware(rung)` in a layout — one refusal, answered in each lane** — Everything under the admin section is for admins, and its handler names no rung of its own. Open the section as Theo, then as Maya.
+
+```abide src/account/lib/AdminSection.abide
+<script>
+import { reactive, url } from '@abide/abide'
+
+import getTeam from '../admin/getTeam.handler.ts'
+import SignInAs from './SignInAs.abide'
+
+let page = reactive('—')
+let handler = reactive('—')
+
+const answered = (answer: Response) =>
+    `${answer.status} ${answer.headers.get('content-type')?.split(';')[0]}`
+
+async function open() {
+    page = answered(await fetch(url('/account/admin')))
+    handler = answered(await getTeam.raw())
+}
+</script>
+
+<SignInAs />
+
+<div class="row">
+    <button onclick={open}>Open the admin section</button>
+</div>
+
+<ul class="fields stacked">
+    <li><span>page</span><strong>{page}</strong></li>
+    <li><span>getTeam</span><strong>{handler}</strong></li>
+</ul>
+```
 
-```abide abide
+```abide src/account/admin/layout.abide
 <script server>
 import { middleware } from '@abide/abide/server'
-import { adminsOnly } from '#src/account/lib/adminsOnly.ts'
 
+import { adminsOnly } from '../lib/adminsOnly.ts'
+
+// Over every page and handler under src/account/admin.
 middleware(adminsOnly)
 </script>
 
-<slot/>
+<slot />
+```
+
+```ts src/account/admin/getTeam.handler.ts
+import { GET } from '@abide/abide/server'
+
+import { TEAM } from '../lib/TEAM.server.ts'
+
+// No middleware of its own: the section's layout guards it.
+export default GET(async () => TEAM.map(({ name, role }) => ({ name, role })), {
+    description: 'Every team member and their role, for an admin.',
+})
+```
+
+```abide src/account/admin/error.abide
+<script>
+import { type Failed, props } from '@abide/abide'
+
+const { failure } = props<{ failure: Failed<string, unknown> }>()
+</script>
+
+<h2 class="text-heading font-semibold">Not for you</h2>
+<p>{failure.message}</p>
+```
+
+```ts src/account/lib/AdminSection.test.ts
+import { expect, test } from 'bun:test'
+
+import { createApp } from '@abide/abide/server'
+
+const signedInAs = async (
+    app: { fetch: (request: Request) => Promise<Response> },
+    email: string,
+) => {
+    const answer = await app.fetch(
+        new Request('http://crm.invalid/account/signIn', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ email }),
+        }),
+    )
+    return answer.headers.getSetCookie()[0]?.split(';')[0] ?? ''
+}
+
+test('a page is refused as a page, a handler as Problem Details', async () => {
+    await using app = await createApp()
+    const cookie = await signedInAs(app, 'theo@crm.example')
+    const ask = (path: string) =>
+        app.fetch(
+            new Request(`http://crm.invalid${path}`, { headers: { cookie } }),
+        )
+
+    const page = await ask('/account/admin')
+    expect(page.status).toBe(403)
+    expect(await page.text()).toContain('Not for you')
+
+    const handler = await ask('/account/admin/getTeam')
+    expect(handler.status).toBe(403)
+    expect(handler.headers.get('content-type')).toStartWith(
+        'application/problem+json',
+    )
+})
+
+test('an admin is let through to both', async () => {
+    await using app = await createApp()
+    const cookie = await signedInAs(app, 'maya@crm.example')
+    const ask = (path: string) =>
+        app.fetch(
+            new Request(`http://crm.invalid${path}`, { headers: { cookie } }),
+        )
+
+    expect((await ask('/account/admin')).status).toBe(200)
+    expect(await (await ask('/account/admin/getTeam')).json()).toHaveLength(2)
+})
 ```
 
+The same `adminsOnly` fits a layout, and there it runs over every page and handler below it. Its refusal is answered in the lane the request was in: the section's `error.abide` paints it over a page, and a handler answers it as Problem Details. A layout's rung has the request and nothing else, so it cannot read a handler's arguments.
+
 Filed in the root `src/layout.abide`, a rung runs before routing, over every request the app answers. `abide routes` lists each rung beside the route it is filed at.
 
 ## `crossOrigin` opens one handler to a partner
@@ -4485,7 +4929,6 @@ Without one, nothing is cut short: the server never closes a connection under a
 | `ABIDE_MAX_REQUEST_BODY_SIZE` | none | the `maxBodySize` of a handler that names none |
 | `ABIDE_MAX_SOCKET_MESSAGE_SIZE` | 1 MiB | one message a browser sends over the socket |
 | `ABIDE_MAX_SOCKET_SUBSCRIPTIONS` | 1024 | the values one connection may follow at once |
-| `ABIDE_STOP_TIMEOUT` | 5000 ms | how long a stop waits on requests still being answered |
 
 None of these is a rate limit. A caller sending many small, fast requests passes every ceiling, and a rung keyed on `principal.caller` is where a rate limit goes.
 
@@ -4693,8 +5136,12 @@ function addWidget() {
 <script server>
 import { csp, middleware } from '@abide/abide/server'
 
-// Every page: the build's own scripts and styles load, and nothing else.
-middleware(csp())
+// The build's own scripts load, and only this site may frame a page.
+middleware(csp({ 'frame-ancestors': ["'self'"] }))
+</script>
+
+<script>
+import '#src/lib/app.css'
 </script>
 
 <html lang="en">
@@ -4702,7 +5149,10 @@ middleware(csp())
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
     </head>
-<body>
+    <body
+        class="flex flex-col gap-flow bg-paper p-5 font-sans text-prose/6
+        text-ink antialiased"
+    >
         <slot />
     </body>
 </html>
@@ -4724,16 +5174,17 @@ test("a page admits the app's own scripts, and no other origin's", async () => {
 
 `csp()` is a rung, filed in the root layout so it covers every page. Its policy admits the build's own scripts and styles, and the inline script the render writes by a hash taken at build time. The widget's origin is not the app's, so the browser refuses it before a request is made. The docs app serves this page under the same baseline.
 
-Name a directive to replace it, such as `csp({ 'img-src': ["'self'", 'https://cdn.example'] })` for avatars on a CDN. The rest stay the baseline's.
+Name a directive to replace it, and the rest stay the baseline's. The companies pages frame the CRM's own pages, so the layout lets this site, and no other, frame them:
 
-An inline script of your own reads `csp.nonce()`, the nonce this response carries, in the root layout:
+```abide src/layout.abide — excerpt
+middleware(csp({ 'frame-ancestors': ["'self'"] }))
+```
 
-```abide abide
-<script>
-import { csp } from '@abide/abide'
-</script>
+An inline script of your own reads `csp.nonce()`, the nonce this response carries. The account page starts an analytics queue that way:
 
+```abide src/account/index.abide — excerpt
 <head>
+    <title>Account — CRM</title>
     <script nonce={csp.nonce()}>window.dataLayer = []</script>
 </head>
 ```
@@ -4748,7 +5199,7 @@ Without `csp()`, a page is still served `content-security-policy: frame-ancestor
 
 <!-- guide/run-it.md -->
 
-# Run it
+# Run the CRM
 
 *Configure the app, run code at start and stop, and see what it is doing.*
 
@@ -4827,14 +5278,16 @@ The last layer to name a setting wins:
 | `APP_DATA_DIR` | the platform's per-user data directory, for a local database file |
 | `PORT` | the port `abide start` listens on |
 
-A setting that has to be right gets a schema. `config`'s `schema` is checked last, over the whole document, so it can relate two settings. Keep it loose, or every setting it does not name is dropped:
+A setting that has to be right gets a schema. `config`'s `schema` is checked last, over the whole document, so it can relate two settings, and what it accepts is merged back over the document. The operations page caps the retries:
 
-```ts server
-onConfig(() => ({ RETRIES: 3 }), {
-    schema: z.looseObject({
-        RETRIES: z.number().int().min(0).max(10),
-        STRIPE_KEY: z.string().min(1),
-    }),
+```abide src/ops/index.abide — excerpt
+onConfig(null, {
+    schema: (document) => {
+        const { RETRIES } = document as { RETRIES: number }
+        if (!Number.isInteger(RETRIES) || RETRIES < 0 || RETRIES > 10)
+            throw new Error('RETRIES is a whole number from 0 to 10.')
+        return { RETRIES }
+    },
 })
 ```
 
@@ -4895,7 +5348,7 @@ test('the pool is connected before the first request is answered', async () => {
 
 `onStart` hands you the next step. Work before `await start()` finishes before the app answers anything; work after it knows the app is up. A hook that throws stops the server from coming up, which is the right answer to a failed migration.
 
-`onStop` is the mirror: `await stop()` first, then close what you opened, so the pool outlives the last request that could use it. It runs on `SIGTERM`, `Ctrl-C` or a crash, and a second signal ends the process at once.
+`onStop` is the mirror: `await stop()` first, then close what you opened, so the pool outlives the last request that could use it. It runs on `SIGTERM`, `Ctrl-C` or a crash, and a second signal ends the process at once. A request still being answered after `ABIDE_STOP_TIMEOUT` milliseconds, 5000 unless you set it, has its connection closed, and the stop goes on without it.
 
 A hook is called in a page, a layout or a handler file, and returns a function that removes it. The ones for the whole app go in `src/layout.abide`, the root layout, whose server block the scaffold already starts with an `onStart`.
 
@@ -4955,14 +5408,6 @@ test('DEBUG writes the billing line and not the poll', async () => {
 
 `log.named('billing')` returns a `Logger` under the app's name: it writes as `crm-08:billing` in the downloaded app, and as `dogfood:billing` on this page. `DEBUG` takes the comma and wildcard list you already know: `DEBUG=crm-08:billing,abide:*`. It is read from the environment on the server, and the browser gets it from the document.
 
-```ts shared
-log('sending')
-log.debug('cache table', { entries: cache.size })
-log.info('invoice paid', { id: '4310' })
-log.warning('retrying', { attempt: 2 })
-log.error('mailer refused', { error })
-```
-
 `log`, `log.warning` and `log.error` always write. `log.info` and `log.debug` write when `DEBUG` names their namespace, and `log.enabled()` asks first where building the line is the expensive part.
 
 | Name | What it is for the CRM |
@@ -4991,7 +5436,7 @@ abide logs under `abide:`, so `DEBUG=abide:*` turns on the framework and nothing
 
 ## One trace id covers everything one request did
 
-**`trace()` — one id for everything one request did** — Syncing a contact logs in the handler and again in the billing module it calls. Sync, and both lines carry the request's trace; sync again for a new one.
+**`trace()` — the id on every line a request writes** — Syncing a contact logs in the handler, and the billing module it calls times its work and logs again. Sync, and every line carries the request's trace; sync again for a new one.
 
 ```abide src/ops/lib/Sync.abide
 <script>
@@ -5041,11 +5486,13 @@ export default POST(
 
 ```ts src/ops/lib/billing.ts
 import { log } from '@abide/abide'
+import { trace } from '@abide/abide/server'
 
 /** The billing service: handed a contact id, and nothing else. */
 export const billing = {
     async notify(contact: string): Promise<void> {
-        await Bun.sleep(150)
+        // A line with its duration, and `billing` in the server-timing header.
+        await trace.span('billing', () => Bun.sleep(150), { timing: true })
         log(`billing told about contact ${contact}`)
     },
 }
@@ -5069,8 +5516,11 @@ test('both modules log under the one trace of the request', async () => {
     const { trace, lines } = await answer.json()
     expect(lines).toEqual([
         'contact c2 loaded',
+        expect.stringMatching(/^billing [\d.]+ms$/),
         'billing told about contact c2',
     ])
+    // The span joins the answer's server-timing under its name.
+    expect(answer.headers.get('server-timing')).toContain('billing')
     // A second request is a second trace.
     const again = await (await app.fetch(sync())).json()
     expect(again.trace).not.toBe(trace)
@@ -5087,14 +5537,13 @@ Nothing starts a trace and nothing passes it down. The billing module was handed
 | `traceresponse` | the response header naming the trace that answered |
 | `server-timing` | the response header with the handler's own time, read by the browser's network panel |
 
-```ts server
-const rows = await trace.span('search', () => search(query), {
-    timing: true,
-})
-const answer = await fetch(billingUrl, { headers: trace.headers() })
+The billing module's span is the line with a duration in it:
+
+```ts src/ops/lib/billing.ts — excerpt
+await trace.span('billing', () => Bun.sleep(150), { timing: true })
 ```
 
-With `timing`, a span joins `server-timing` under its name, so the name has to be a plain token.
+With `timing`, a span joins `server-timing` under its name, so the name has to be a plain token. A call to another service carries the trace on with `fetch(url, { headers: trace.headers() })`.
 
 ## A load balancer reads the health check
 
@@ -5199,14 +5648,12 @@ test('the banner shows while the browser is offline, and goes', async () => {
 
 Read `online` by name. There is no listener to attach and none to remove. In the browser it follows `navigator.onLine`; on the server it is `true`, since a caller being served has reached the app.
 
-`false` is certain and `true` is a guess: a dead server reads as online. Use it to explain a failed load, not to decide whether to try one. To catch up when the connection returns, refresh what is on screen from the root layout:
-
-```abide abide
-<script>
-import { online, refresh, watch } from '@abide/abide'
+`false` is certain and `true` is a guess: a dead server reads as online. Use it to explain a failed load, not to decide whether to try one. To catch up when the connection returns, refresh what is on screen. The operations page does:
 
-watch(() => { if (online) refresh() })
-</script>
+```abide src/ops/index.abide — excerpt
+watch(() => {
+    if (online) refresh()
+})
 ```
 
 ## A call logged offline is sent when the network is back
@@ -5750,7 +6197,7 @@ test('the model calls the CRM search, through the app', async () => {
 | `Toolbox` | What a provider is handed: `list` of the tools, and `call` to run one as the asker. |
 | `ToolAnswer` | What `call` answers: its `content`, the same pieces as a turn — the tool's text, or the image a handler drew, which the model is shown as a picture — and whether it failed. |
 | `ToolDefinition` | One tool in `list`: its name, description and input schema. |
-| `abide:assistant` | The log namespace that writes one `debug` line per conversation once it ends: the stop reason, the transcript's length, the tool calls, the tokens and the time. |
+| `abide:assistant` | The log namespace that writes one `debug` line per conversation once it ends: the stop reason, the transcript's length, the tool calls, the tokens and the time. A conversation that ended without `done` is `unfinished`, then why: `aborted` when the request was, `failed` with the provider's message when it threw, or `stopped` when the page stopped reading. |
 
 ## `claudeApi` sends the request body you wrote
 
@@ -6055,6 +6502,8 @@ test('unpaired: refused, with a command and a link', async () => {
 bunx @abide/bridge <site> <code> -- --tools WebSearch,WebFetch
 ```
 
+`bunx @abide/bridge` runs `abide-bridge <site> <code>`. `--claude <path>` names the Claude Code to run where `claude` is not on the `PATH`, and each `--env NAME=VALUE` sets a variable for it, such as a proxy or an API key of the visitor's own.
+
 Pass the same `tools` to `claudeCode.bridge` or `claudeCode.bridgeCommand` and the command it mints carries that grant, so a visitor who runs it as shown gives the tools. One minted without them grants none.
 
 The visitor pairs once per visit by running a command, which dials out to the site. Asking with nothing paired is refused 409.
@@ -6065,7 +6514,9 @@ On a Mac the visitor can pair with a click instead. Each status carries a `link`
 bunx @abide/bridge install
 ```
 
-That builds a small app under their own Application Support folder, nowhere in Applications, and registers it for the scheme. Opening a link asks them every time, naming the site, the tools and the bridge release it asks for, and then runs that release, as the command would. A link only proves the site minted its code, never that this visitor asked for it, so no answer is kept for a site. `bunx @abide/bridge uninstall` takes it away.
+That builds a small app under their own Application Support folder, nowhere in Applications, and registers it for the scheme. `abide-bridge install` takes the same `--claude`, `--env` and options after `--` as the command, and keeps them: every link it opens runs Claude Code with them, and no link can set either. Opening a link asks them every time, naming the site, the tools and the bridge release it asks for, and the options and variable names install kept, and then runs that release, as the command would. A link only proves the site minted its code, never that this visitor asked for it, so no answer is kept for a site. `abide-bridge uninstall` takes away everything install wrote.
+
+A bridge that loses the site says so once, and not again until the site takes a report. A turn whose report the site did not take is ended, and reported failed.
 
 The tools the conversation calls run as the visitor, on the sign-in their ask carried, so a tool reads `principal` as any handler does. The pairing belongs to that sign-in too. If someone else signs in at the same browser, their asks are refused 409 and the status offers them a command of their own, so nobody's turn runs on another member's Claude Code.
 
@@ -6179,7 +6630,7 @@ test('the summary answers in process as it does on the wire', async () => {
 | `App.fetch` | one request, through the whole app, in this process |
 | `App.run` | runs a function inside one request's scope, so two reads of one key load once, signed in as the `principal` claims you give it |
 | `App.listen` | binds the socket, for a test that needs a real `WebSocket` |
-| `App.stop` | drains what is in flight, then runs `onStop` |
+| `App.stop` | stops the app: every `onStop`, wrapped around draining what is in flight |
 | `App[Symbol.asyncDispose]` | `stop`, under the name `await using` calls |
 
 Hold the app with `await using` and it stops when the test ends, a failed one included. An app nobody stops leaves open whatever `onStart` opened, and the suite hangs with no report at all.
@@ -6270,13 +6721,11 @@ test('a range switch rewrites two numbers and builds nothing', async () => {
 
 A DOM member the harness does not count throws while a case is open, rather than reading as zero. `patchSet()` lists every member it does count.
 
-The DOM under `bun test` comes from one line in `bunfig.toml`, which the scaffold writes:
+The DOM under `bun test` comes from the `preload` line in `bunfig.toml`, which the scaffold writes:
 
-```toml bunfig.toml
-# A DOM to mount into and measure, and `.abide` files as components.
+```toml bunfig.toml — excerpt
 [test]
-# Bun's tests are under src; e2e holds the browser's, which playwright runs.
-root = "src"
+…
 preload = ["@abide/harness/abide/preload"]
 ```
 
@@ -6779,14 +7228,21 @@ test('every deal adds the same bytes at any length', async () => {
 
 The last three read the engine's heap, and throw where a DOM is preloaded, because the DOM's own objects would be counted with yours. Run them through `inAFreshProcess`.
 
-## Test and bench results on a page
+## Report the CRM's test results one file at a time
+
+```ts scripts/testRows.ts — excerpt
+await testRows(
+    [{ section: 'tests', root: 'src', runner: 'bun' }],
+    Bun.fileURLToPath(new URL('..', import.meta.url)),
+)
+```
 
 ```
 bun scripts/testRows.ts --list
 bun scripts/testRows.ts --scope all --filter reports
 ```
 
-`testRows` runs each test file of a `TestSuite` in a process of its own, and prints one `TestRow` per line as each file finishes, with a `TestCase` per test. The cards in this chapter read their results from those rows.
+`testRows` runs each test file of a `TestSuite` in a process of its own, and prints one `TestRow` per line as each file finishes, with a `TestCase` per test. A dashboard reads the rows as they land, rather than waiting on the whole run. The cards in this chapter read their results from those rows.
 
 | Name | What it does for the CRM |
 | --- | --- |
@@ -6801,13 +7257,21 @@ A file whose runner wrote no report is `broken`, which is different from a red r
 ## Check, build and start the CRM
 
 ```
-abide check && abide build && bun test
+abide check && abide format --check && abide build && bun test
 abide start --port 8080
 ```
 
 `abide check [dir…]` type-checks the `.abide` files as well as the TypeScript, and reports on the line you wrote. `abide lsp` is the same check in your editor. Run it first in CI, because it is the cheapest failure to report.
 
-`abide format [--check] [dir…]` formats every `.abide` the way `bun fmt` formats everything else: its scripts, styles and expressions under the `[fmt]` options in `bunfig.toml`, and its markup indented by its nesting. `--check` writes nothing and fails where a file would change, and `abide lsp` formats on save the same way.
+`abide format [--check] [dir…]` formats every `.abide` the way `bun fmt` formats everything else: its scripts, styles and expressions under the `[fmt]` options in `bunfig.toml`, and its markup indented by its nesting. `--check` writes nothing and fails where a file would change, and `abide lsp` formats on save the same way. The scaffold's options:
+
+```toml bunfig.toml — excerpt
+[fmt]
+tabWidth = 4
+semi = false
+singleQuote = true
+sortImports = true
+```
 
 `abide build` writes content-hashed chunks and a manifest naming them. `abide start [--port <n>]` serves what was built, and builds first where nothing was. Configuration is checked as it starts, so a misconfigured deployment fails to come up.
 
@@ -6830,6 +7294,30 @@ abide compile --platforms linux-x64,darwin-arm64
 
 `abide compile [--target] [--out] [--platforms]` writes one executable with the built client, the server and the runtime inside it. `--target` picks one platform, `--platforms` builds several in one run, and `--out` names the file. The executable is `abide` for this one app: `./crm-10 start` serves it, and `config()` still reads the environment.
 
+```dockerfile Dockerfile
+FROM oven/bun:1.4.4 AS build
+WORKDIR /app
+COPY package.json bun.lock bunfig.toml ./
+RUN bun install --frozen-lockfile
+COPY . .
+RUN bun x abide compile --out /app/server
+
+FROM gcr.io/distroless/cc-debian12
+COPY --from=build /app/server /server
+ENV NODE_ENV=production
+EXPOSE 3000
+CMD ["/server", "start"]
+```
+
+The scaffold writes this `Dockerfile`, and the CRM carries it. Only the executable reaches the second stage, so the image holds no Bun, no source and no `node_modules`.
+
+```
+docker build -t crm .
+docker run -p 3000:3000 -e ABIDE_PRINCIPAL_SECRET crm
+```
+
+`.dockerignore` keeps `.env` out of the build, so the deployment sets the principal secret and every other setting itself.
+
 ## Ship the CRM as a desktop app
 
 ```
@@ -6866,7 +7354,7 @@ onMenu(() => [
 watch(() => printReport.on(() => print()))
 ```
 
-The reports page adds a Reports menu while it is showing. `onMenu` is read the way markup is, so the menus follow the page's state. Each entry is a `MenuItem`: `'separator'`, an item with an `href`, one with a `MenuRole` the platform performs, or a `MenuEntry` made by `menuItem`. `MenuEntry.on` files what runs when it is picked, and hands back what stops it, which is what `watch` takes. In a browser nothing picks an item, and the page runs unchanged.
+The reports page adds a Reports menu while it is showing. `onMenu` is read the way markup is, so the menus follow the page's values. Each entry is a `MenuItem`: `'separator'`, an item with an `href`, one with a `MenuRole` the platform performs, or a `MenuEntry` made by `menuItem`. `MenuEntry.on` files what runs when it is picked, and hands back what stops it, which is what `watch` takes. In a browser nothing picks an item, and the page runs unchanged.
 
 ## Keep the CRM readable offline
 
@@ -6910,6 +7398,7 @@ Arrive here knowing which name you want. Each page is read off the registry: the
 | Page | Imported from |
 | --- | --- |
 | [`Reactive`](/reference/types/Reactive.md) | `@abide/abide` |
+| [`isReactive`](/reference/isReactive.md) | `@abide/abide` |
 | [`Keyed`](/reference/types/Keyed.md) | `@abide/abide` |
 | [`reactive`](/reference/reactive.md) | `@abide/abide` |
 | [`Transformer`](/reference/types/Transformer.md) | `@abide/abide` |
@@ -6993,6 +7482,7 @@ Arrive here knowing which name you want. Each page is read off the registry: the
 | Page | Imported from |
 | --- | --- |
 | [`cookies`](/reference/cookies.md) | `@abide/abide` |
+| [`Cookies`](/reference/types/Cookies.md) | `@abide/abide` |
 | [`request`](/reference/request.md) | `@abide/abide/server` |
 | [`response`](/reference/response.md) | `@abide/abide/server` |
 | [`route`](/reference/route.md) | `@abide/abide` |
@@ -7219,6 +7709,24 @@ Arrive here knowing which name you want. Each page is read off the registry: the
 
 ---
 
+<!-- reference/isReactive.md -->
+
+# `isReactive`
+
+`import { isReactive } from '@abide/abide'`
+
+## The value
+
+| Name | Signature | Meaning | Rules |
+| --- | --- | --- | --- |
+| `isReactive` | `(value: unknown) => value is Reactive<unknown>` | Whether a value is a `Reactive`. | [1.6](/rulebook#1.6) |
+
+## Taught in
+
+- [Start an app](/guide/start-an-app.md)
+
+---
+
 <!-- reference/types/Keyed.md -->
 
 # `Keyed`
@@ -7735,7 +8243,7 @@ Reactive primitives: what is written in place rather than imported.
 
 | Name | Signature | Meaning | Rules |
 | --- | --- | --- | --- |
-| `Rpc` | `<Value, Args, Failures, Produced = Value>(args?: Args, options?: { signal?: AbortSignal; offline?: (args: Args) => Value }) => Reactive<Value, Value, Failures \| Failed<'HttpError', undefined>, Produced>` | A handler reached over http, or in process on a server. | [16.3](/rulebook#16.3), [16.4](/rulebook#16.4), [16.8](/rulebook#16.8), [16.11](/rulebook#16.11), [16.25](/rulebook#16.25), [16.26](/rulebook#16.26), [16.27](/rulebook#16.27), [16.28](/rulebook#16.28), [16.29](/rulebook#16.29), [16.33](/rulebook#16.33), [16.43](/rulebook#16.43), [16.48](/rulebook#16.48), [16.49](/rulebook#16.49), [16.62](/rulebook#16.62), [41.5](/rulebook#41.5), [41.7](/rulebook#41.7), [41.12](/rulebook#41.12), [41.21](/rulebook#41.21), [41.22](/rulebook#41.22), [41.25](/rulebook#41.25), [41.26](/rulebook#41.26), [41.27](/rulebook#41.27), [16.79](/rulebook#16.79), [16.80](/rulebook#16.80), [16.85](/rulebook#16.85) |
+| `Rpc` | `<Value, Args, Failures = never, Produced = Value>(args?: Args, options?: { signal?: AbortSignal; offline?: (args: Args) => Value }) => Reactive<Value, Value, Failures \| Failed<'HttpError', undefined> \| Annotated<Args>, Produced>` | A handler reached over http, or in process on a server. | [16.3](/rulebook#16.3), [16.4](/rulebook#16.4), [16.8](/rulebook#16.8), [16.11](/rulebook#16.11), [16.25](/rulebook#16.25), [16.26](/rulebook#16.26), [16.27](/rulebook#16.27), [16.28](/rulebook#16.28), [16.29](/rulebook#16.29), [16.33](/rulebook#16.33), [16.43](/rulebook#16.43), [16.48](/rulebook#16.48), [16.49](/rulebook#16.49), [16.62](/rulebook#16.62), [41.5](/rulebook#41.5), [41.7](/rulebook#41.7), [41.12](/rulebook#41.12), [41.21](/rulebook#41.21), [41.22](/rulebook#41.22), [41.25](/rulebook#41.25), [41.26](/rulebook#41.26), [41.27](/rulebook#41.27), [16.79](/rulebook#16.79), [16.80](/rulebook#16.80), [16.85](/rulebook#16.85) |
 | `offline` | `(args: Args) => Value` | What a call settles to where a browser could not get its answer. | [16.81](/rulebook#16.81), [16.82](/rulebook#16.82), [16.83](/rulebook#16.83), [16.84](/rulebook#16.84) |
 | `Value` | `unknown` | What the addressed `Reactive` holds. | [16.3](/rulebook#16.3), [16.30](/rulebook#16.30) |
 | `Produced` | `unknown` | What it yields, per the unit rule. | [1.2](/rulebook#1.2), [16.3](/rulebook#16.3) |
@@ -7745,7 +8253,7 @@ Reactive primitives: what is written in place rather than imported.
 | `rpc.synced` | `(pattern?: Partial<Args>) => boolean` | `synced` narrowed to the handler's matching entries. | [13.12](/rulebook#13.12), [13.18](/rulebook#13.18), [13.19](/rulebook#13.19) |
 | `rpc.invalidate` | `(pattern?: Partial<Args>) => void` | `invalidate` narrowed to the handler's matching entries. | [7.2](/rulebook#7.2), [7.3](/rulebook#7.3), [13.4](/rulebook#13.4), [13.12](/rulebook#13.12), [13.19](/rulebook#13.19) |
 | `rpc.refresh` | `(pattern?: Partial<Args>) => void` | `refresh` narrowed to the handler's matching entries. | [7.4](/rulebook#7.4), [7.5](/rulebook#7.5), [13.4](/rulebook#13.4), [13.12](/rulebook#13.12), [13.19](/rulebook#13.19) |
-| `rpc.isError` | `<Name extends Failures['name']>(error: unknown, name: Name) => error is Extract<Failures, { name: Name }>` | Whether a caught failure is the one named. | [16.8](/rulebook#16.8) |
+| `rpc.isError` | `<Name extends string>(error: unknown, name: Name) => error is Extract<Failures \| Failed<'HttpError', undefined> \| Annotated<Args>, { name: Name }>` | Whether a caught failure is the one named. | [16.8](/rulebook#16.8) |
 | `rpc.raw` | `(args: Args, init?: RequestInit) => Promise<Response>` | The same call handed back as the raw response. | [16.11](/rulebook#16.11), [16.42](/rulebook#16.42) |
 | `rpc.method` | `string` | The HTTP method. | [16.2](/rulebook#16.2) |
 | `rpc.url` | `(args?: Args) => string` | The address, resolved against the mount. | [16.9](/rulebook#16.9), [16.10](/rulebook#16.10), [30.28](/rulebook#30.28) |
@@ -7794,9 +8302,15 @@ Reactive primitives: what is written in place rather than imported.
 
 | Name | Signature | Meaning | Rules |
 | --- | --- | --- | --- |
-| `GET` | `<Value, Args, Failures, RungFailures, Produced = Value>(handler: Reactive<Value, Value, Failures, Produced> \| Keyed<Value, Args, Value, Failures, Produced>, options?: RpcOptions<Args, RungFailures>) => Rpc<Value, Args, Failures \| RungFailures, Produced>` | Declares a read any surface may call. | [16.1](/rulebook#16.1), [16.2](/rulebook#16.2), [16.5](/rulebook#16.5), [16.6](/rulebook#16.6), [16.30](/rulebook#16.30), [16.31](/rulebook#16.31), [16.32](/rulebook#16.32), [16.68](/rulebook#16.68), [16.76](/rulebook#16.76), [16.34](/rulebook#16.34), [16.35](/rulebook#16.35), [16.36](/rulebook#16.36), [16.37](/rulebook#16.37), [16.39](/rulebook#16.39), [16.44](/rulebook#16.44), [16.45](/rulebook#16.45), [16.46](/rulebook#16.46), [16.47](/rulebook#16.47), [16.75](/rulebook#16.75), [16.50](/rulebook#16.50), [16.51](/rulebook#16.51), [16.52](/rulebook#16.52), [16.64](/rulebook#16.64), [18.1](/rulebook#18.1), [18.3](/rulebook#18.3), [18.6](/rulebook#18.6), [18.8](/rulebook#18.8), [18.10](/rulebook#18.10), [18.12](/rulebook#18.12), [18.21](/rulebook#18.21), [18.24](/rulebook#18.24), [18.27](/rulebook#18.27) |
-| `GET` | `<Value, Args, Failures, RungFailures, Produced = Value>(handler: (args?: Args) => Value, options?: RpcOptions<Args, RungFailures> & ReactiveOptions<Value, Value, Failures, Args>) => Rpc<Value, Args, Failures \| RungFailures, Produced>` | The plain-function overload, whose `ReactiveOptions` (`ttl`, `global`, `debounce` and the rest) build the value it becomes beside its address. | [16.1](/rulebook#16.1), [16.6](/rulebook#16.6), [16.7](/rulebook#16.7) |
-| `GET` | `<Value, Failures, RungFailures>(handler: Value \| PromiseLike<Value>, options?: RpcOptions<undefined, RungFailures> & ReactiveOptions<Value, Value, Failures>) => Rpc<Value, undefined, Failures \| RungFailures>` | The value overload, for what the handler owns outright, whose `ReactiveOptions` build the value it becomes. | [16.1](/rulebook#16.1), [16.6](/rulebook#16.6), [16.7](/rulebook#16.7) |
+| `GET` | `<Stored, Accepted, Failures, Produced>(handler: Reactive<Stored, Accepted, Failures, Produced>, options?: RpcOptions<undefined>) => Rpc<Stored, undefined, Failures, Produced>` | Declares a read any surface may call. | [16.1](/rulebook#16.1), [16.2](/rulebook#16.2), [16.5](/rulebook#16.5), [16.6](/rulebook#16.6), [16.30](/rulebook#16.30), [16.31](/rulebook#16.31), [16.32](/rulebook#16.32), [16.68](/rulebook#16.68), [16.76](/rulebook#16.76), [16.34](/rulebook#16.34), [16.35](/rulebook#16.35), [16.36](/rulebook#16.36), [16.37](/rulebook#16.37), [16.39](/rulebook#16.39), [16.44](/rulebook#16.44), [16.45](/rulebook#16.45), [16.46](/rulebook#16.46), [16.47](/rulebook#16.47), [16.75](/rulebook#16.75), [16.50](/rulebook#16.50), [16.51](/rulebook#16.51), [16.52](/rulebook#16.52), [16.64](/rulebook#16.64), [18.1](/rulebook#18.1), [18.3](/rulebook#18.3), [18.6](/rulebook#18.6), [18.8](/rulebook#18.8), [18.10](/rulebook#18.10), [18.12](/rulebook#18.12), [18.21](/rulebook#18.21), [18.24](/rulebook#18.24), [18.27](/rulebook#18.27) |
+| `GET` | `<Stored, Args, Accepted, Failures, Produced>(handler: Keyed<Stored, Args, Accepted, Failures, Produced>, options?: RpcOptions<Args>) => Rpc<Stored, Args, Failures, Produced>` | The keyed overload, for a `Keyed` given an address. | [11.2](/rulebook#11.2), [16.1](/rulebook#16.1), [16.3](/rulebook#16.3), [16.6](/rulebook#16.6) |
+| `GET` | `<Chunk, Shaped = Chunk[], Gate = Schema<Chunk[]>>(handler: () => AsyncGenerator<Chunk> \| Promise<AsyncGenerator<Chunk>>, options?: Shaping<Chunk[], Shaped, never, Gate> & RpcOptions<undefined>) => Rpc<Kept<Shaped>, undefined, Refusals<Shaped, Gate, Chunk[]>, Chunk>` | The streaming overload, whose options build the value it becomes beside its address. | [16.1](/rulebook#16.1), [16.6](/rulebook#16.6), [16.7](/rulebook#16.7), [16.44](/rulebook#16.44), [16.45](/rulebook#16.45), [16.46](/rulebook#16.46), [16.47](/rulebook#16.47) |
+| `GET` | `<Chunk, Args, Shaped = Chunk[], Gate = Schema<Chunk[]>, ArgsGate = Schema<Args>>(handler: (args: Args) => AsyncGenerator<Chunk> \| Promise<AsyncGenerator<Chunk>>, options?: Shaping<Chunk[], Shaped, Args, Gate, ArgsGate> & RpcOptions<Args>) => Rpc<Kept<Shaped>, Args, Refusals<Shaped, Gate, Chunk[], ArgsGate, Args>, Chunk>` | The keyed streaming overload. | [11.2](/rulebook#11.2), [16.1](/rulebook#16.1), [16.6](/rulebook#16.6), [16.7](/rulebook#16.7) |
+| `GET` | `<Chunk, Args, Shaped = Chunk[], Gate = Schema<Chunk[]>, ArgsGate = Schema<Args \| undefined>>(handler: (args?: Args) => AsyncGenerator<Chunk> \| Promise<AsyncGenerator<Chunk>>, options?: Shaping<Chunk[], Shaped, Args \| undefined, Gate, ArgsGate> & RpcOptions<Args \| undefined>) => Rpc<Kept<Shaped>, Args \| undefined, Refusals<Shaped, Gate, Chunk[], ArgsGate, Args \| undefined>, Chunk>` | The keyed streaming overload for a body whose parameter is optional. | [11.2](/rulebook#11.2) |
+| `GET` | `<Computed, Shaped = Awaited<Computed>, Gate = Schema<Awaited<Computed>>>(handler: () => Computed, options?: Shaping<Awaited<Computed>, Shaped, never, Gate> & RpcOptions<undefined>) => Rpc<Kept<Shaped>, undefined, AdoptedFailures<Computed> \| Refusals<Shaped, Gate, Awaited<Computed>>, AdoptedProduced<Computed, Kept<Shaped>>>` | The plain-function overload, whose options (`ttl`, `global`, `debounce` and the rest) build the value it becomes beside its address. | [16.1](/rulebook#16.1), [16.6](/rulebook#16.6), [16.7](/rulebook#16.7) |
+| `GET` | `<Computed, Args, Shaped = Awaited<Computed>, Gate = Schema<Awaited<Computed>>, ArgsGate = Schema<Args>>(handler: (args: Args) => Computed, options?: Shaping<Awaited<Computed>, Shaped, Args, Gate, ArgsGate> & RpcOptions<Args>) => Rpc<Kept<Shaped>, Args, AdoptedFailures<Computed> \| Refusals<Shaped, Gate, Awaited<Computed>, ArgsGate, Args>, AdoptedProduced<Computed, Kept<Shaped>>>` | The keyed plain-function overload. | [11.2](/rulebook#11.2), [16.1](/rulebook#16.1), [16.6](/rulebook#16.6), [16.7](/rulebook#16.7) |
+| `GET` | `<Computed, Args, Shaped = Awaited<Computed>, Gate = Schema<Awaited<Computed>>, ArgsGate = Schema<Args \| undefined>>(handler: (args?: Args) => Computed, options?: Shaping<Awaited<Computed>, Shaped, Args \| undefined, Gate, ArgsGate> & RpcOptions<Args \| undefined>) => Rpc<Kept<Shaped>, Args \| undefined, AdoptedFailures<Computed> \| Refusals<Shaped, Gate, Awaited<Computed>, ArgsGate, Args \| undefined>, AdoptedProduced<Computed, Kept<Shaped>>>` | The keyed plain-function overload for a body whose parameter is optional. | [11.2](/rulebook#11.2) |
+| `GET` | `<Accepted, Shaped = Accepted, Gate = Schema<Accepted>>(handler: Accepted \| PromiseLike<Accepted>, options?: Shaping<Accepted, Shaped, never, Gate> & RpcOptions<undefined>) => Rpc<Kept<Shaped>, undefined, Refusals<Shaped, Gate, Accepted>>` | The value overload, for what the handler owns outright, whose options build the value it becomes. | [16.1](/rulebook#16.1), [16.6](/rulebook#16.6), [16.7](/rulebook#16.7) |
 
 ## Taught in
 
@@ -8418,8 +8932,8 @@ Generated surfaces: what is written in place rather than imported.
 
 | Name | Signature | Meaning | Rules |
 | --- | --- | --- | --- |
-| `claudeCode` | `(config?: ClaudeCodeConfig) => Provider` | The visitor's own Claude Code, reached through the bridge paired with their browser, as a provider. | [44.5](/rulebook#44.5), [44.13](/rulebook#44.13), [44.17](/rulebook#44.17), [44.18](/rulebook#44.18), [44.19](/rulebook#44.19), [44.24](/rulebook#44.24), [44.25](/rulebook#44.25), [44.27](/rulebook#44.27), [44.30](/rulebook#44.30), [44.33](/rulebook#44.33), [44.45](/rulebook#44.45), [44.46](/rulebook#44.46) |
-| `claudeCode.bridgeCommand` | `(options?: { tools?: string[] }) => { command: string; link: string; expires: number }` | The command and the link that pair a bridge with this browser, granting the built-in tools it is given. | [44.14](/rulebook#44.14), [44.32](/rulebook#44.32), [44.33](/rulebook#44.33), [44.40](/rulebook#44.40), [44.41](/rulebook#44.41), [44.42](/rulebook#44.42), [44.43](/rulebook#44.43), [44.44](/rulebook#44.44) |
+| `claudeCode` | `(config?: ClaudeCodeConfig) => Provider` | The visitor's own Claude Code, reached through the bridge paired with their browser, as a provider. | [44.5](/rulebook#44.5), [44.13](/rulebook#44.13), [44.17](/rulebook#44.17), [44.18](/rulebook#44.18), [44.19](/rulebook#44.19), [44.33](/rulebook#44.33) |
+| `claudeCode.bridgeCommand` | `(options?: { tools?: string[] }) => { command: string; link: string; expires: number }` | The command and the link that pair a bridge with this browser, granting the built-in tools it is given. | [44.14](/rulebook#44.14), [44.32](/rulebook#44.32), [44.33](/rulebook#44.33), [44.40](/rulebook#44.40) |
 | `claudeCode.bridge` | `(options?: { tools?: string[] }) => AsyncGenerator<BridgeStatus>` | This browser's pairing, as it changes. | [44.20](/rulebook#44.20), [44.22](/rulebook#44.22), [44.32](/rulebook#44.32), [44.33](/rulebook#44.33), [44.34](/rulebook#44.34), [44.40](/rulebook#44.40) |
 | `/__abide/bridge` | `GET`, `POST` | Where a bridge pairs, and is relayed its turns. | [36.7](/rulebook#36.7), [44.14](/rulebook#44.14), [44.15](/rulebook#44.15), [44.19](/rulebook#44.19), [44.23](/rulebook#44.23), [44.26](/rulebook#44.26), [16.57](/rulebook#16.57), [16.78](/rulebook#16.78) |
 
@@ -8475,7 +8989,25 @@ Generated surfaces: what is written in place rather than imported.
 
 | Name | Signature | Meaning | Rules |
 | --- | --- | --- | --- |
-| `cookies` | `() => CookieMap` | The cookies of the request being served, live and mutable. | [22.2](/rulebook#22.2), [22.3](/rulebook#22.3), [22.4](/rulebook#22.4), [22.5](/rulebook#22.5), [22.6](/rulebook#22.6), [22.7](/rulebook#22.7), [22.8](/rulebook#22.8), [22.10](/rulebook#22.10) |
+| `cookies` | `() => Cookies` | The cookies of the request being served, live and mutable. | [22.2](/rulebook#22.2), [22.3](/rulebook#22.3), [22.4](/rulebook#22.4), [22.5](/rulebook#22.5), [22.6](/rulebook#22.6), [22.7](/rulebook#22.7), [22.8](/rulebook#22.8), [22.10](/rulebook#22.10) |
+
+## Taught in
+
+- [Who sees what](/guide/decide-who-sees-what.md)
+
+---
+
+<!-- reference/types/Cookies.md -->
+
+# `Cookies`
+
+`import type { Cookies } from '@abide/abide'`
+
+## `cookies`
+
+| Name | Signature | Meaning | Rules |
+| --- | --- | --- | --- |
+| `Cookies` | `class Cookies implements Iterable<[string, string]> { get(name: string): string \| null; has(name: string): boolean; set(name: string, value: string, options?: CookieInit): void; set(options: CookieInit): void; delete(name: string, options?: Omit<CookieStoreDeleteOptions, 'name'>): void; delete(options: CookieStoreDeleteOptions): void; size: number; toJSON(): Record<string, string>; toSetCookieHeaders(): string[] }` | A cookie jar shaped like Bun's `CookieMap`. | [22.4](/rulebook#22.4), [22.5](/rulebook#22.5), [22.6](/rulebook#22.6) |
 
 ## Taught in
 
@@ -8977,7 +9509,7 @@ Generated surfaces: what is written in place rather than imported.
 
 | Name | Signature | Meaning | Rules |
 | --- | --- | --- | --- |
-| `csp` | `(sources?: Record<string, string[]>) => (next: (ctx?: { request: Request }) => Promise<Response>, ctx: { request: Request }) => Promise<Response>` | The rung that sets `content-security-policy`. | [29.1](/rulebook#29.1), [29.2](/rulebook#29.2), [29.5](/rulebook#29.5), [29.6](/rulebook#29.6), [29.7](/rulebook#29.7), [29.8](/rulebook#29.8) |
+| `csp` | `(sources?: Record<string, string[]>) => (next: (ctx?: { request: Request }) => Promise<Response>, ctx: { request: Request }) => Response \| Promise<Response>` | The rung that sets `content-security-policy`. | [29.1](/rulebook#29.1), [29.2](/rulebook#29.2), [29.5](/rulebook#29.5), [29.6](/rulebook#29.6), [29.7](/rulebook#29.7), [29.8](/rulebook#29.8) |
 | `csp.nonce` | `() => string` | This response's nonce, for the app's own inline script. | [29.3](/rulebook#29.3), [29.4](/rulebook#29.4), [29.9](/rulebook#29.9), [29.11](/rulebook#29.11) |
 
 ## Taught in
@@ -9221,7 +9753,7 @@ Generated surfaces: what is written in place rather than imported.
 | `foo.push(v)` | the same | [31.8](/rulebook#31.8), [31.9](/rulebook#31.9) |
 | `const [a, b] = foo` / `...foo` | one read of the value | [31.12](/rulebook#31.12) |
 | `foo.bar` | the value's `bar`, or the `Reactive`'s own `bar` where it declares one the value does not | [31.5](/rulebook#31.5) |
-| `foo.bar(…)` | the `Reactive` API where `bar` is a member | [31.6](/rulebook#31.6) |
+| `foo.bar(…)` | a call of the value's `bar`, or of the `Reactive`'s own `bar` where it declares one the value does not | [31.6](/rulebook#31.6) |
 | `foo()` / `foo.set(v)` | the explicit forms | [31.7](/rulebook#31.7), [31.11](/rulebook#31.11) |
 
 ## Expressions
@@ -9979,7 +10511,7 @@ The measurement harness: what is written in place rather than imported.
 
 | Name | Meaning | Rules |
 | --- | --- | --- |
-| `preload = ["@abide/harness/abide/preload"]` | The `[test]` preload that registers a DOM a test mounts into and measures, then abide's own. | [38.109](/rulebook#38.109), [38.119](/rulebook#38.119) |
+| `preload = ["@abide/harness/abide/preload"]` | The `[test]` preload that registers a DOM a test mounts into and measures, then abide's own. | [38.109](/rulebook#38.109), [38.119](/rulebook#38.119), [38.133](/rulebook#38.133) |
 
 ## Taught in
 
@@ -10736,7 +11268,7 @@ CLI: what is written in place rather than imported.
 
 | Command | Meaning | Rules |
 | --- | --- | --- |
-| `abide scaffold <name>` | Writes a starter project. | [38.1](/rulebook#38.1), [38.42](/rulebook#38.42), [38.103](/rulebook#38.103), [38.104](/rulebook#38.104), [38.106](/rulebook#38.106), [38.112](/rulebook#38.112), [38.122](/rulebook#38.122), [38.124](/rulebook#38.124), [38.131](/rulebook#38.131) |
+| `abide scaffold <name>` | Writes a starter project. | [38.1](/rulebook#38.1), [38.42](/rulebook#38.42), [38.103](/rulebook#38.103), [38.104](/rulebook#38.104), [38.106](/rulebook#38.106), [38.112](/rulebook#38.112), [38.122](/rulebook#38.122), [38.124](/rulebook#38.124), [38.131](/rulebook#38.131), [38.132](/rulebook#38.132) |
 | `abide run <file> [args…]` | Runs a script under the abide runtime. | [38.2](/rulebook#38.2), [38.57](/rulebook#38.57) |
 | `abide check [dir…]` | The type-checker over a `.abide` tree. | [38.3](/rulebook#38.3), [38.31](/rulebook#38.31), [38.32](/rulebook#38.32), [38.33](/rulebook#38.33), [38.40](/rulebook#38.40), [38.105](/rulebook#38.105), [38.123](/rulebook#38.123) |
 | `abide format [--check] [dir…]` | The formatter over a `.abide` tree. | [38.25](/rulebook#38.25), [38.125](/rulebook#38.125), [38.126](/rulebook#38.126), [38.127](/rulebook#38.127), [38.128](/rulebook#38.128), [38.129](/rulebook#38.129) |
@@ -10755,6 +11287,14 @@ CLI: what is written in place rather than imported.
 | `--help` · `-h` · `abide help` | Usage, generated from the command list. | [38.12](/rulebook#38.12), [38.113](/rulebook#38.113), [38.114](/rulebook#38.114) |
 | `--version` · `-v` | The version of abide, or of the app a compiled executable holds. | [38.115](/rulebook#38.115) |
 
+## `abide-bridge` — the bridge
+
+| Command | Meaning | Rules |
+| --- | --- | --- |
+| `abide-bridge <site> <code> [--claude <path>] [--env NAME=VALUE]… [-- <options>]` | This machine's Claude Code, paired with the browser a site minted the code for. | [44.15](/rulebook#44.15), [44.16](/rulebook#44.16), [44.24](/rulebook#44.24), [44.25](/rulebook#44.25), [44.27](/rulebook#44.27), [44.30](/rulebook#44.30), [44.44](/rulebook#44.44), [44.45](/rulebook#44.45), [44.46](/rulebook#44.46), [44.47](/rulebook#44.47) |
+| `abide-bridge install [--claude <path>] [--env NAME=VALUE]… [-- <options>]` | The app that opens a site's `abide-bridge` links on this machine, registered. | [44.41](/rulebook#44.41), [44.42](/rulebook#44.42), [44.43](/rulebook#44.43), [44.44](/rulebook#44.44) |
+| `abide-bridge uninstall` | `abide-bridge install`, undone. | [44.43](/rulebook#44.43) |
+
 ## Taught in
 
 - [Start an app](/guide/start-an-app.md)