diff --git a/AGENTS.md b/AGENTS.md
index d65a9ba1..ae3ce59b 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -17,6 +17,12 @@ Two things shape the coverage/safety bar here more than any specific rule:
 
 Together: coverage and signal are expensive to lose and cheap to keep. When a change trades either away, say so explicitly and justify the delta.
 
+## Before you start
+
+- Check [`plans/`](plans/) — significant changes need a plan before code (see [Plans](#plans)).
+- `verified-behaviors.json` in a package is a contract; don't break it without a plan.
+- `bun run verify` passes before every commit.
+
 ## Project Structure
 
 Monorepo with Bun workspaces.
@@ -156,9 +162,15 @@ long-lived publish token.
 
 ## Plans
 
-Significant changes should have a plan file in `plans/` before implementation
-begins. Plans document the context, approach, and verification steps. Review
-existing plans in that directory for format examples.
+Significant changes need a plan in [`plans/`](plans/) before code. Plans
+document context, approach, files touched, and verification. Match the shape
+of existing plans.
+
+**Write one for:** new pages/routes, new build or CI steps, new cross-package
+concepts, refactors across 5+ files.
+
+**Skip for:** bug fixes, single-file edits, doc tweaks, dep bumps, comment
+cleanup, new tests in existing specs.
 
 ## Agent-First Documentation
 
diff --git a/builds/knockout/helpers/browser-setup.js b/builds/knockout/helpers/browser-setup.js
new file mode 100644
index 00000000..e102a48b
--- /dev/null
+++ b/builds/knockout/helpers/browser-setup.js
@@ -0,0 +1,117 @@
+// Setup for running TKO specs in a real browser under Mocha.
+// Counterpart to vitest-setup.js. Loaded as the first import of
+// the test bundle (tko.io/scripts/bundle-tests.mjs).
+//
+// Assumes `mocha.setup('bdd')` already ran (so `before` / `after`
+// / `beforeEach` / `afterEach` are global) and `globalThis.ko`
+// was set by the bundled IIFE in /tests/source/setup.js, which
+// this module is imported from.
+
+import * as chai from 'chai'
+import sinon from 'sinon'
+// Register punctuation filters on shared `@tko/utils` options so
+// specs that construct Parsers directly (`new Parser().parse('x | tail')`)
+// can resolve them. The builder registers the same filters at page
+// startup but on a module-local options reference — not this one.
+import { filters as punctuationFilters } from '@tko/filter.punches'
+import { options as sharedOptions } from '@tko/utils'
+
+globalThis.chai = chai
+globalThis.expect = chai.expect
+globalThis.sinon = sinon
+globalThis.isHappyDom = () => false
+
+sharedOptions.filters = Object.assign(sharedOptions.filters || {}, punctuationFilters)
+
+// mocha-test-helpers wires root beforeEach/afterEach hooks, so it
+// must be imported after `mocha.setup('bdd')` ran.
+import './mocha-test-helpers.js'
+
+// Disable the 25ms JSX cleanup timer so it can't race test teardown.
+before(() => {
+  if (globalThis.ko?.options) {
+    globalThis.ko.options.jsxCleanBatchSize = 0
+  }
+})
+
+// Iframe focus-event polyfill.
+//
+// Chromium refuses to grant programmatic `iframe.contentWindow.focus()`
+// true system focus from a parent that already holds focus — the
+// iframe never passes `document.hasFocus() === true`, so `focusin`
+// / `focusout` are suppressed when specs call `element.focus()`
+// inside. The `hasfocus` binding observes those events (not
+// `document.activeElement`), so without this patch those specs
+// fail under both Playwright and a real Chrome tab.
+//
+// Wrap `focus`/`blur` to dispatch the missing events synchronously
+// after the native call. If the browser DOES regain system focus
+// and fires them too, observers see duplicates — harmless for
+// these specs (state-checking, not call-count).
+//
+// Scope-guarded to iframes (`window.parent !== window`) so the
+// parent page is never patched.
+//
+// Refs: https://github.com/jsdom/jsdom/pull/2996 (same shape as
+// this wrap), https://html.spec.whatwg.org/multipage/interaction.html#focusing-elements.
+if (window.parent !== window && !HTMLElement.prototype.__tkoFocusPatched) {
+  const HE = HTMLElement.prototype
+  HE.__tkoFocusPatched = true
+  const origFocus = HE.focus
+  const origBlur = HE.blur
+  HE.focus = function (...args) {
+    const wasActive = this.ownerDocument.activeElement
+    origFocus.apply(this, args)
+    if (this.ownerDocument.activeElement === this && wasActive !== this) {
+      this.dispatchEvent(new FocusEvent('focus', { bubbles: false, relatedTarget: wasActive }))
+      this.dispatchEvent(new FocusEvent('focusin', { bubbles: true, relatedTarget: wasActive }))
+    }
+  }
+  HE.blur = function (...args) {
+    const wasActive = this.ownerDocument.activeElement
+    origBlur.apply(this, args)
+    if (wasActive === this && this.ownerDocument.activeElement !== this) {
+      this.dispatchEvent(new FocusEvent('blur', { bubbles: false, relatedTarget: this.ownerDocument.activeElement }))
+      this.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: this.ownerDocument.activeElement }))
+    }
+  }
+}
+
+// Unscoped sinon fakes (`sinon.spy(obj,'m')`, `sinon.useFakeTimers()`)
+// leak across specs if not restored, producing bogus call-count
+// diffs or "Can't install fake timers twice". `sinon.restore()` is
+// a no-op for sandbox-scoped fakes. Vitest isolates per-file so
+// doesn't need this hook.
+afterEach(() => {
+  if (globalThis.sinon?.restore) globalThis.sinon.restore()
+})
+
+// Vitest-style context-arg shim.
+//
+// Specs written `function (ctx) { if (isHappyDom()) return ctx.skip(…) }`
+// look like Mocha done-callback specs (`fn.length === 1`) and time
+// out after ~10s because they never call done. Wrap `it` to detect
+// the ctx shape (uses `.skip(...)` and never calls `done(`) and
+// invoke with a synthetic `{ skip }` while hiding arity from Mocha.
+{
+  const wrap = orig =>
+    function (name, fn) {
+      if (typeof fn === 'function' && fn.length === 1) {
+        const src = fn.toString()
+        const ctxStyle = /\.skip\s*\(/.test(src) && !/\bdone\s*\(/.test(src)
+        if (ctxStyle) {
+          const wrapped = function () {
+            return fn.call(this, { skip: reason => this.skip(reason) })
+          }
+          Object.defineProperty(wrapped, 'length', { value: 0 })
+          return orig.call(this, name, wrapped)
+        }
+      }
+      return orig.apply(this, arguments)
+    }
+  const origIt = globalThis.it
+  const wrappedIt = wrap(origIt)
+  wrappedIt.only = wrap(origIt.only)
+  wrappedIt.skip = origIt.skip
+  globalThis.it = wrappedIt
+}
diff --git a/packages/binding.component/spec/componentBindingBehaviors.ts b/packages/binding.component/spec/componentBindingBehaviors.ts
index 266e4d8b..a3b83f4e 100644
--- a/packages/binding.component/spec/componentBindingBehaviors.ts
+++ b/packages/binding.component/spec/componentBindingBehaviors.ts
@@ -1273,7 +1273,12 @@ describe('Components: Component binding', function () {
 
       if (isHappyDom()) return ctx.skip('happy-dom: innerText whitespace rendering differs from real browsers')
       applyBindings(outerViewModel, testNode)
-      expect((testNode.children[0] as HTMLInputElement).innerText.trim()).to.deep.equal(`beep / beep`)
+      // `.trim()` alone strips only leading/trailing; real browsers
+      // preserve internal newlines + indentation from the template
+      // source between slotted nodes. Collapse to single spaces.
+      expect((testNode.children[0] as HTMLInputElement).innerText.replace(/\s+/g, ' ').trim()).to.deep.equal(
+        `beep / beep`
+      )
     })
 
     it('inserts into nested elements', function () {
@@ -1410,7 +1415,7 @@ describe('Components: Component binding', function () {
 
       if (isHappyDom()) return ctx.skip('happy-dom: innerText whitespace rendering differs from real browsers')
       applyBindings(outerViewModel, testNode)
-      expect((testNode.children[0] as HTMLElement).innerText.trim()).to.deep.equal(`A. B. C.`)
+      expect((testNode.children[0] as HTMLElement).innerText.replace(/\s+/g, ' ').trim()).to.deep.equal(`A. B. C.`)
       const em = testNode.children[0].children[0].children[0]
       expect(em.tagName).to.deep.equal('EM')
     })
@@ -1432,7 +1437,7 @@ describe('Components: Component binding', function () {
 
       if (isHappyDom()) return ctx.skip('happy-dom: innerText whitespace rendering differs from real browsers')
       applyBindings(outerViewModel, testNode)
-      expect((testNode.children[0] as HTMLElement).innerText.trim()).to.deep.equal(`B. C. E.`)
+      expect((testNode.children[0] as HTMLElement).innerText.replace(/\s+/g, ' ').trim()).to.deep.equal(`B. C. E.`)
       const em = testNode.children[0].children[0].children[0]
       expect(em.tagName).to.deep.equal('EM')
     })
diff --git a/packages/binding.foreach/spec/eachBehavior.ts b/packages/binding.foreach/spec/eachBehavior.ts
index 77e2e04e..d56a729f 100644
--- a/packages/binding.foreach/spec/eachBehavior.ts
+++ b/packages/binding.foreach/spec/eachBehavior.ts
@@ -1010,6 +1010,9 @@ describe('observable array changes', function () {
 
 describe('focus', function () {
   let $target
+  // foreach schedules processQueue via requestAnimationFrame when setSync(false).
+  // Waiting one frame is enough to flush the DOM re-order + focus-preservation pass.
+  const nextFrame = () => new Promise(resolve => requestAnimationFrame(() => resolve(null)))
   beforeEach(function () {
     $target = $("<div data-bind='foreach: $data'>" + '<input />' + '</div>').appendTo(document.body)
     ForEachBinding.setSync(false)
@@ -1023,7 +1026,7 @@ describe('focus', function () {
     const list = ['a', 'b', 'c']
     $target.find(':input').focus()
     applyBindings(list, $target[0])
-    await new Promise(resolve => setTimeout(resolve, 1000))
+    await nextFrame()
     assert.strictEqual(document.activeElement, document.body)
   })
 
@@ -1036,7 +1039,7 @@ describe('focus', function () {
 
     list.remove('a')
     list.push('a')
-    await new Promise(resolve => setTimeout(resolve, 1000))
+    await nextFrame()
     assert.strictEqual(document.activeElement, document.body)
   })
 
@@ -1050,7 +1053,7 @@ describe('focus', function () {
 
     list.remove(o0)
     list.push(o0)
-    await new Promise(resolve => setTimeout(resolve, 1000))
+    await nextFrame()
     assert.strictEqual(document.activeElement, $target.find(':input')[2], 'o')
   })
 
@@ -1067,7 +1070,7 @@ describe('focus', function () {
     list.push(o0)
     list.push('y')
 
-    await new Promise(resolve => setTimeout(resolve, 1000))
+    await nextFrame()
     assert.strictEqual(document.activeElement, $target.find(':input')[3], 'o')
   })
 
@@ -1083,7 +1086,7 @@ describe('focus', function () {
     list.push(o0) // focused
     list.push(o0)
 
-    await new Promise(resolve => setTimeout(resolve, 1000))
+    await nextFrame()
     assert.strictEqual(document.activeElement, $target.find(':input')[2], 'o')
   })
 })
diff --git a/packages/binding.if/spec/elseBehaviors.ts b/packages/binding.if/spec/elseBehaviors.ts
index 95da1889..dd00a6ed 100644
--- a/packages/binding.if/spec/elseBehaviors.ts
+++ b/packages/binding.if/spec/elseBehaviors.ts
@@ -32,13 +32,19 @@ describe('else inside an if binding', function () {
   })
 
   describe('as <!-- else -->', function () {
+    // innerText preserves whitespace from the HTML source in real
+    // browsers (happy-dom normalizes it, which is why that path
+    // skips). The source here intentionally includes a space
+    // around `<!-- else -->` so the comment parses as a binding,
+    // so the selected branch keeps a trailing/leading space in its
+    // text node. Trim assertions instead of stripping the source.
     it('is ignored when the condition is true', function (ctx: any) {
       if (isHappyDom()) return ctx.skip('happy-dom: innerText whitespace rendering differs from real browsers')
       testNode.innerHTML = "<i data-bind='if: x'>" + 'abc <!-- else --> def' + '</i>'
       expect(testNode.childNodes[0].childNodes.length).to.equal(3)
       applyBindings({ x: true }, testNode)
       expect(testNode.childNodes[0].childNodes.length).to.equal(1)
-      expect(testNode.innerText).to.equal('abc')
+      expect(testNode.innerText.trim()).to.equal('abc')
     })
 
     it('shows the else-block when the condition is false', function (ctx: any) {
@@ -47,7 +53,7 @@ describe('else inside an if binding', function () {
       expect(testNode.childNodes[0].childNodes.length).to.equal(3)
       applyBindings({ x: false }, testNode)
       expect(testNode.childNodes[0].childNodes.length).to.equal(1)
-      expect(testNode.innerText).to.equal('def')
+      expect(testNode.innerText.trim()).to.equal('def')
     })
 
     it('toggles between if/else on condition change', function (ctx: any) {
@@ -57,9 +63,9 @@ describe('else inside an if binding', function () {
       expect(testNode.childNodes[0].childNodes.length).to.equal(3)
       applyBindings({ x: x }, testNode)
       expect(testNode.childNodes[0].childNodes.length).to.equal(1)
-      expect(testNode.innerText).to.equal('def')
+      expect(testNode.innerText.trim()).to.equal('def')
       x(true)
-      expect(testNode.innerText).to.equal('abc')
+      expect(testNode.innerText.trim()).to.equal('abc')
     })
   })
 })
diff --git a/packages/builder/spec/builderBehaviors.ts b/packages/builder/spec/builderBehaviors.ts
index 5cd237be..8d6fc675 100644
--- a/packages/builder/spec/builderBehaviors.ts
+++ b/packages/builder/spec/builderBehaviors.ts
@@ -1,10 +1,23 @@
 import { VirtualProvider } from '@tko/provider.virtual'
 import { bindings as ifBindings } from '@tko/binding.if'
+import { options } from '@tko/utils'
 
 import { Builder } from '../dist'
 
 describe('Builder', () => {
-  it('creates a ko instance', () => {
+  it('creates a ko instance', function () {
+    // `new Builder({...})` mutates the shared `@tko/utils` options
+    // (filters + bindingProviderInstance). Under Vitest's per-file
+    // module isolation the mutation is invisible to later specs;
+    // under the browser /tests runner every spec shares module
+    // state, so an unrestored mutation here wipes `options.filters`
+    // (which at this point holds the punctuation filters from
+    // `@tko/filter.punches`) and breaks ~14 downstream filter-
+    // lookup tests.
+    // @ts-ignore — global helper from mocha-test-helpers.js
+    restoreAfter(options, 'filters')
+    // @ts-ignore — global helper from mocha-test-helpers.js
+    restoreAfter(options, 'bindingProviderInstance')
     // We're just testing that the builder constructs, here.
     const builder = new Builder({ filters: {}, provider: new VirtualProvider(), bindings: [ifBindings], options: {} })
   })
diff --git a/packages/utils.parser/spec/identifierBehaviors.ts b/packages/utils.parser/spec/identifierBehaviors.ts
index 8f66fd17..e76ab77c 100644
--- a/packages/utils.parser/spec/identifierBehaviors.ts
+++ b/packages/utils.parser/spec/identifierBehaviors.ts
@@ -173,6 +173,16 @@ describe('Identifier', function () {
     })
 
     it('sets `this` of a top-level item to $data', function () {
+      // `restoreAfter` is a global cleanup-stack helper from
+      // builds/knockout/helpers/mocha-test-helpers.js. Vitest runs
+      // each spec file in isolated module state so this mutation is
+      // invisible to later specs; in the browser /tests runner all
+      // specs share one module graph, so without this restore the
+      // mutated `bindingGlobals` leaks into every subsequent spec
+      // that resolves `$parent` / `$customProp` / … against the
+      // global lookup, breaking 31 unrelated tests.
+      // @ts-ignore — global helper from mocha-test-helpers.js
+      restoreAfter(options, 'bindingGlobals')
       options.bindingGlobals = Object.create({ Ramanujan: '1729' })
       const div = document.createElement('div'),
         context = {
diff --git a/plans/browser-test-runner.md b/plans/browser-test-runner.md
new file mode 100644
index 00000000..492c5e2a
--- /dev/null
+++ b/plans/browser-test-runner.md
@@ -0,0 +1,123 @@
+# Plan: Live browser test runner at /tests
+
+## Context
+
+TKO specs run under Vitest + happy-dom in CI (`bun run test`). That
+covers DOM semantics reachable from a JS implementation of the
+DOM, but misses anything that depends on a real browser: system
+focus routing, layout, rendering, intersection, CSSOM, and per-
+engine DOM quirks across Chromium / WebKit / Firefox.
+
+A live browser runner at `/tests` on `tko.io` closes that gap by
+running the same Mocha specs inside real iframes. It serves two
+audiences:
+
+1. **Contributors** — open `/tests` in any browser, get real-
+   browser pass/fail without installing anything. Double as a
+   reproducible bug harness.
+2. **Agents** — Playwright or similar hits `/tests`, parses the
+   stats chips, and knows whether a change holds up under real
+   layout/focus/rendering. Complements verified-behaviors.json
+   as an additional correctness signal.
+
+Test environments are additive: Vitest+happy-dom stays, browser
+runner expands coverage. Neither replaces the other.
+
+## Approach
+
+Astro page at `tko.io/src/pages/tests.astro` drives two modes via
+`?suite=`:
+
+- **source** (default) — run specs from the checkout, bundled
+  per-spec into ESM chunks. One iframe per spec.
+- **build** — load a published `@tko/build.*` bundle from
+  jsDelivr, run all specs in one iframe against that CDN
+  artifact. Proves the shipped build is green.
+
+Each spec executes inside a `tests-frame.html` iframe harness
+and posts pass/fail/pending/end events to the parent page. The
+parent aggregates into a TKO-driven view model (suite tree,
+stats chips, progress bar).
+
+## Architecture
+
+```
+┌───────────────────────────────────────────────────────────┐
+│ /tests page (TKO view model)                              │
+│  ┌─────────────────────────────────────────────────────┐  │
+│  │ suite tree (per-spec file, running/pass/fail state) │  │
+│  └─────────────────────────────────────────────────────┘  │
+│                                                           │
+│  Phase 1: parallel (pool=4) hidden iframes                │
+│  ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐    1×1 offscreen         │
+│  │spec │ │spec │ │spec │ │spec │    no focus needed       │
+│  └─────┘ └─────┘ └─────┘ └─────┘                          │
+│                                                           │
+│  Phase 2: serial iframe in bottom-right workarea          │
+│  ┌─────────────────┐    real layout box                   │
+│  │ focus-spec here │    sole system focus                 │
+│  └─────────────────┘    hasfocus/.focus/activeElement     │
+│                                                           │
+│  postMessage(pass/fail/pending/end) → parent              │
+└───────────────────────────────────────────────────────────┘
+```
+
+### Why two phases
+
+Chromium grants system focus to one iframe at a time and denies
+it to off-screen / zero-area iframes. Specs that assert on
+`hasfocus`, `.focus()`, `document.activeElement`, or `focusin` /
+`focusout` can't run in parallel in hidden iframes — they need a
+real visible layout box and sole focus. A `needsFocus` flag
+(grep-based in the bundler) routes those specs serially through
+a visible workarea.
+
+### Bundling
+
+`tko.io/scripts/bundle-tests.mjs` (esbuild) produces:
+
+- `public/tests/build-bundle.js` — all `builds/**/spec/*` specs
+  that only depend on `ko.*` globals, bundled into one script
+  for build mode. Specs with relative imports are excluded.
+- `public/tests/source/setup.js` — classic-script IIFE that
+  exposes `globalThis.ko`, chai/sinon, punctuation filters,
+  mocha-test-helpers, and the focus/sinon polyfills.
+- `public/tests/source/<slug>.js` — one ESM module per spec
+  for source mode.
+- `public/tests/source/manifest.json` — per-spec metadata
+  (slug, suite name, needsFocus) the parent uses to schedule.
+
+`prebuild` runs the bundler so the dev server and production
+build both serve fresh output.
+
+## Files
+
+| File | Role |
+|------|------|
+| `tko.io/src/pages/tests.astro` | `/tests` page — TKO VM, suite tree, schedulers |
+| `tko.io/public/tests-frame.html` | Per-spec iframe harness |
+| `tko.io/scripts/bundle-tests.mjs` | Discover specs, emit bundles + manifest |
+| `builds/knockout/helpers/browser-setup.js` | Globals, focus polyfill, sinon restore, ctx-arg shim |
+| `tko.io/package.json` | `prebuild` invokes the bundler |
+| `tko.io/.gitignore` | Ignores generated `public/tests/` |
+
+## Verification
+
+1. `cd tko.io && bun run dev`
+2. Visit `http://localhost:4321/tests` — source mode should
+   reach 2708/0/42 in ~5-6s.
+3. Switch to `/tests?suite=build&pkg=knockout&ver=latest` —
+   build-mode suite runs against the published CDN bundle.
+4. `?grep=<pattern>` — filter specs by file/slug (both modes).
+5. CI: `bun run verify` still green under Vitest+happy-dom; the
+   browser runner is an additive signal, not a replacement.
+
+## What's not there yet
+
+| Gap | What's needed |
+|-----|---------------|
+| **CI smoke** | Playwright job hitting `/tests` on every PR |
+| **Firefox / WebKit coverage** | Playwright per-engine; today only Chromium is exercised interactively |
+| **Flaky focus detection** | Track focus-phase retries; flag specs that pass only after retry |
+| **Build-mode spec coverage** | 60+ specs currently excluded because they have relative imports — rewrite to use `ko.*` globals so build mode covers them |
+| **Differential result** | Surface specs that pass under happy-dom but fail in a real browser (and vice versa) as a report |
diff --git a/tko.io/.gitignore b/tko.io/.gitignore
index 6cd54b46..78247e6d 100644
--- a/tko.io/.gitignore
+++ b/tko.io/.gitignore
@@ -4,3 +4,4 @@ _site/
 dist/
 package-lock.json
 public/lib/
+public/tests/
diff --git a/tko.io/package.json b/tko.io/package.json
index b7c1ea47..897a22ee 100644
--- a/tko.io/package.json
+++ b/tko.io/package.json
@@ -5,7 +5,7 @@
   "description": "TKO documentation site",
   "scripts": {
     "postinstall": "patch-package",
-    "prebuild": "node ./scripts/generate-verified-behaviors.mjs && mkdir -p public/lib && cd ../builds/knockout && bun run build && cp dist/browser.min.js ../../tko.io/public/lib/ko.js && cd ../reference && bun run build && cp dist/browser.min.js ../../tko.io/public/lib/tko.js",
+    "prebuild": "node ./scripts/generate-verified-behaviors.mjs && mkdir -p public/lib && cd ../builds/knockout && bun run build && cp dist/browser.min.js ../../tko.io/public/lib/ko.js && cd ../reference && bun run build && cp dist/browser.min.js ../../tko.io/public/lib/tko.js && cd ../../tko.io && node ./scripts/bundle-tests.mjs",
     "predev": "bun run prebuild",
     "dev": "ASTRO_TELEMETRY_DISABLED=1 astro dev",
     "build": "ASTRO_TELEMETRY_DISABLED=1 astro build --force",
diff --git a/tko.io/public/tests-frame.html b/tko.io/public/tests-frame.html
new file mode 100644
index 00000000..f40bba08
--- /dev/null
+++ b/tko.io/public/tests-frame.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>TKO Spec Frame</title>
+    <style>
+      html, body { margin: 0; padding: 0; background: #0f1115; color: #e8e8e8; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
+      #mocha { padding: 0.5rem 0.75rem; }
+      #err { padding: 0.5rem 0.75rem; color: #ff8080; white-space: pre-wrap; }
+    </style>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mocha@10/mocha.css" />
+  </head>
+  <body>
+    <!--
+      Per-spec iframe harness. The parent /tests page spawns one of
+      these per spec file in source/manifest.json and reads results
+      via postMessage.
+
+      Each iframe has its own `window`, so:
+        - Module graph is fresh (no class-identity collision across
+          specs).
+        - `globalThis.ko`, `options.filters`, DOM, timers, sinon
+          stubs, testNode — all isolated per spec.
+        - No spec can leak state into another.
+
+      URL contract: `tests-frame.html?spec=<slug>` where <slug> is
+      the key of a spec module under /tests/source/. This iframe
+      first loads `/tests/source/setup.js` via a classic <script>
+      tag (inlined ko build + browser-setup globals); the inline
+      module script then dynamic-imports `/tests/source/<slug>.js`,
+      which contains only the spec under test.
+
+      File lives at `public/tests-frame.html` (not
+      `public/tests/frame.html`) to avoid colliding with Astro's
+      `/tests/` page route — a nested public/tests/*.html 404s in
+      dev because the page route claims the whole prefix.
+    -->
+    <div id="mocha"></div>
+    <div id="err"></div>
+
+    <!-- Pre-module bootstrap: `/tests/source/setup.js` is a
+         bundled IIFE that loads the knockout build from source
+         AND runs `browser-setup.js` (chai / sinon / filter
+         punctuation / mocha-test-helpers globals / jsxClean
+         hook). Must load BEFORE the spec module so
+         `globalThis.ko`, `prepareTestNode`, `restoreAfter`, etc.
+         exist when the spec's top-level code evaluates.
+
+         Earlier iterations tried to embed setup as ESM imports
+         in the spec wrapper; esbuild's code-splitter hoisted
+         the spec's chunk above the ko/setup chunks and
+         `beforeEach(prepareTestNode)` at spec-top threw
+         `ReferenceError`. Moving setup into a classic <script>
+         tag sidesteps the issue: the IIFE runs synchronously
+         before the module loader even starts. -->
+    <!-- Load Mocha FIRST so `before` / `beforeEach` / `describe`
+         globals exist when setup.js evaluates (browser-setup.js
+         calls `before(() => …)` at module-top). -->
+    <script src="https://cdn.jsdelivr.net/npm/mocha@10/mocha.js"></script>
+    <script>
+      mocha.setup({ ui: 'bdd', reporter: 'html', timeout: 10000, cleanReferencesAfterRun: false })
+    </script>
+    <script src="/tests/source/setup.js"></script>
+    <script type="module">
+      const qs = new URLSearchParams(location.search)
+      const slug = qs.get('spec')
+      if (!slug) {
+        document.getElementById('err').textContent = 'missing ?spec= query param'
+      } else {
+        try {
+          await import(`/tests/source/${slug}.js`)
+          const runner = mocha.run()
+          runner.on('pass', t => parent.postMessage({ type: 'pass', slug, title: t.fullTitle(), duration: t.duration }, '*'))
+          runner.on('fail', (t, err) => parent.postMessage({
+            type: 'fail', slug, title: t.fullTitle(), duration: t.duration,
+            err: (err?.message || String(err)),
+            stack: err?.stack
+          }, '*'))
+          runner.on('pending', t => parent.postMessage({ type: 'pending', slug, title: t.fullTitle() }, '*'))
+          runner.on('end', () => parent.postMessage({ type: 'end', slug, stats: runner.stats }, '*'))
+          parent.postMessage({ type: 'start', slug, total: runner.total }, '*')
+        } catch (err) {
+          document.getElementById('err').textContent = 'import failed: ' + (err?.message || err)
+          parent.postMessage({ type: 'import-error', slug, err: err?.message || String(err) }, '*')
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/tko.io/scripts/bundle-tests.mjs b/tko.io/scripts/bundle-tests.mjs
new file mode 100644
index 00000000..2c7386ee
--- /dev/null
+++ b/tko.io/scripts/bundle-tests.mjs
@@ -0,0 +1,310 @@
+// Bundles TKO specs for the in-browser `/tests` runner.
+//
+// Two outputs:
+//
+//   public/tests/build-bundle.js    Version-portable IIFE of
+//                                   `builds/{knockout,reference}/spec/`.
+//                                   Runs as a single Mocha run against
+//                                   whichever `@tko/build.*` the page
+//                                   loaded via <script> (dev: /lib/ko.js,
+//                                   build mode: jsdelivr).
+//
+//   public/tests/source/*.js        One ESM chunk per `packages/*/spec/*`
+//                                   file, plus shared-dep chunks that
+//                                   esbuild extracts via `splitting: true`.
+//                                   The main /tests page loads each
+//                                   chunk in a fresh iframe so each spec
+//                                   file runs against an isolated module
+//                                   graph — fixes the state-leak pile-up
+//                                   that killed the single-bundle dev-mode
+//                                   approach.
+//
+// Also emits `public/tests/source/manifest.json` listing the slug/file
+// mapping so the main page can enumerate iframes.
+
+import { promises as fs } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { glob } from 'node:fs/promises'
+import * as esbuild from 'esbuild'
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url))
+const siteRoot = path.resolve(scriptDir, '..')
+const repoRoot = path.resolve(siteRoot, '..')
+const outputDir = path.join(siteRoot, 'public', 'tests')
+const sourceOutputDir = path.join(outputDir, 'source')
+
+// Exclude non-spec siblings that end up under `spec/` directories.
+const EXCLUDE = /[\\/](__screenshots__|fixtures|helpers)[\\/]/
+
+// `../dist` → `../src` rewrite plugin. Specs pervasively import
+// from the package's built bundle; redirecting to source keeps a
+// single module graph.
+const distToSrcPlugin = {
+  name: 'dist-to-src',
+  setup(build) {
+    build.onResolve({ filter: /(^|\/)\.\.\/dist(\/[^/]+)?$/ }, args => {
+      if (!args.importer.includes(`${path.sep}packages${path.sep}`)) return
+      const match = args.path.match(/\.\.\/dist(?:\/([^/]+))?$/)
+      const subpath = match?.[1]
+      const src = subpath
+        ? path.resolve(path.dirname(args.importer), '../src', subpath + '.ts')
+        : path.resolve(path.dirname(args.importer), '../src/index.ts')
+      return { path: src }
+    })
+  }
+}
+
+async function collectSpecs(patterns) {
+  const specs = []
+  for (const pattern of patterns) {
+    for await (const match of glob(pattern, { cwd: repoRoot })) {
+      if (EXCLUDE.test(match)) continue
+      specs.push(path.join(repoRoot, match))
+    }
+  }
+  specs.sort()
+  return specs
+}
+
+function specSlug(absPath) {
+  // Slug = repo-relative path with separators → `__` and
+  // extension stripped. Covers packages/* and builds/* uniformly.
+  return path
+    .relative(repoRoot, absPath)
+    .replace(/[\\/]/g, '__')
+    .replace(/\.(ts|js)$/, '')
+}
+
+async function writeSpecWrappers(specs) {
+  const wrapperDir = path.join(sourceOutputDir, '_wrappers')
+  await fs.mkdir(wrapperDir, { recursive: true })
+  const entryPoints = {}
+  const manifest = []
+
+  // Chromium denies `contentWindow.focus()` system focus to iframes
+  // without real layout + viewport intersection, and only one frame
+  // can hold focus at a time. Specs that observe focus events
+  // (`hasfocus` binding, `document.activeElement` assertions) must
+  // run serially inside the visible #workarea; the rest run in
+  // parallel, invisibly, with no focus gymnastics. Detect at
+  // bundle time by grepping the spec source.
+  const FOCUS_PATTERNS = /hasfocus|hasFocus|\.focus\(|\.blur\(|focusin|focusout|activeElement/
+  const needsFocusCache = new Map()
+  const needsFocus = async (p) => {
+    if (needsFocusCache.has(p)) return needsFocusCache.get(p)
+    const src = await fs.readFile(p, 'utf8')
+    const n = FOCUS_PATTERNS.test(src)
+    needsFocusCache.set(p, n)
+    return n
+  }
+
+  for (const spec of specs) {
+    const slug = specSlug(spec)
+    const wrapperPath = path.join(wrapperDir, `${slug}.ts`)
+    const specRel = path.relative(wrapperDir, spec).replace(/\\/g, '/')
+    const focusNeeded = await needsFocus(spec)
+    // Bare spec import. ko + browser-setup are bundled separately
+    // into `source/setup.js` (IIFE) and loaded via a <script> tag
+    // in tests-frame.html BEFORE this module evaluates. Earlier
+    // iterations embedded the setup as ESM imports here;
+    // esbuild's code-splitter reordered the resulting chunks and
+    // the spec's top-level `beforeEach(prepareTestNode)` ran
+    // before browser-setup's module installed `prepareTestNode`
+    // — `ReferenceError` cascade.
+    const contents = [
+      '// AUTO-GENERATED by tko.io/scripts/bundle-tests.mjs',
+      '// Globals (ko, chai, sinon, prepareTestNode, …) are',
+      '// installed by tests-frame.html via the classic',
+      '// <script src="/tests/source/setup.js"> tag before this',
+      '// module evaluates.',
+      `import '${specRel}'`,
+      ''
+    ].join('\n')
+    // Skip the write if contents are unchanged — updating mtime on
+     // every rebuild invalidates downstream watchers for no reason.
+    let existing = null
+    try { existing = await fs.readFile(wrapperPath, 'utf8') } catch {}
+    if (existing !== contents) await fs.writeFile(wrapperPath, contents, 'utf8')
+    entryPoints[slug] = wrapperPath
+    const rel = path.relative(repoRoot, spec).replace(/\\/g, '/')
+    manifest.push({
+      slug,
+      file: rel,
+      suite: rel.split('/').slice(0, 2).join('/'),
+      needsFocus: focusNeeded
+    })
+  }
+
+  return { entryPoints, manifest }
+}
+
+async function buildSetupBundle({ tsconfig, alias, buildVersion }) {
+  // Single IIFE carrying ko + browser-setup. Loaded via <script>
+  // in tests-frame.html before any spec module, so spec bundles
+  // can assume `globalThis.ko`, `chai`, `expect`, `sinon`,
+  // `prepareTestNode`, `restoreAfter`, etc. are all ready when
+  // they evaluate — regardless of how esbuild's code-splitter
+  // reorders the per-spec ESM chunks.
+  const setupEntry = [
+    "import ko from '../../../../builds/knockout/src/index.ts'",
+    "if (typeof globalThis !== 'undefined') globalThis.ko = ko",
+    "import '../../../../builds/knockout/helpers/browser-setup.js'",
+    ''
+  ].join('\n')
+  await esbuild.build({
+    stdin: {
+      contents: setupEntry,
+      resolveDir: sourceOutputDir,
+      loader: 'ts',
+      sourcefile: '_setup.ts'
+    },
+    bundle: true,
+    format: 'iife',
+    platform: 'browser',
+    target: 'es2022',
+    outfile: path.join(sourceOutputDir, 'setup.js'),
+    tsconfig,
+    alias,
+    plugins: [distToSrcPlugin],
+    define: { BUILD_VERSION: JSON.stringify(buildVersion) },
+    external: ['mocha'],
+    logLevel: 'warning'
+  })
+  console.log(`[setup]  bundled ko + browser-setup → ${path.relative(repoRoot, path.join(sourceOutputDir, 'setup.js'))}`)
+}
+
+async function buildBuildBundle({ buildVersion, tsconfig, alias }) {
+  const scope = [
+    'builds/knockout/spec/**/*.js',
+    'builds/knockout/spec/**/*.ts',
+    'builds/reference/spec/**/*.js',
+    'builds/reference/spec/**/*.ts'
+  ]
+  const allSpecs = await collectSpecs(scope)
+  if (allSpecs.length === 0) throw new Error('build-bundle scope matched no specs')
+
+  // Build mode's promise is "run specs against the CDN-loaded
+  // `@tko/build.*` version". Any spec that imports a relative
+  // local module (e.g. `../dist/browser.min`, `./helpers/…`)
+  // drags checkout code into the bundle and undermines that
+  // promise. Skip those in build mode — they belong to source
+  // mode only. Pure `ko.*`-global specs go through cleanly.
+  // Matches every relative-import form we've seen in specs:
+  //   import x from './a'         import './a'
+  //   export * from '../a'        import('./a')
+  //   require('../a')
+  const RELATIVE_IMPORT = /(?:\bfrom\s+['"]\.\.?\/|(?:^|\s|;)import\s*\(?\s*['"]\.\.?\/|\brequire\s*\(\s*['"]\.\.?\/)/m
+  const specs = []
+  for (const spec of allSpecs) {
+    const src = await fs.readFile(spec, 'utf8')
+    if (RELATIVE_IMPORT.test(src)) continue
+    specs.push(spec)
+  }
+
+  const lines = [
+    '// AUTO-GENERATED by tko.io/scripts/bundle-tests.mjs — in-memory only.',
+    '',
+    "import '../../../builds/knockout/helpers/browser-setup.js'",
+    ''
+  ]
+  for (const spec of specs) {
+    lines.push(`import '${path.relative(outputDir, spec).replace(/\\/g, '/')}'`)
+  }
+
+  await esbuild.build({
+    stdin: {
+      contents: lines.join('\n'),
+      resolveDir: outputDir,
+      loader: 'ts',
+      sourcefile: '_entry-build.ts'
+    },
+    bundle: true,
+    format: 'iife',
+    platform: 'browser',
+    target: 'es2022',
+    outfile: path.join(outputDir, 'build-bundle.js'),
+    tsconfig,
+    alias,
+    plugins: [distToSrcPlugin],
+    define: { BUILD_VERSION: JSON.stringify(buildVersion) },
+    external: ['mocha'],
+    globalName: 'tkoBuildTests',
+    logLevel: 'warning'
+  })
+
+  console.log(`[build]  bundled ${specs.length} spec file(s) → ${path.relative(repoRoot, path.join(outputDir, 'build-bundle.js'))}`)
+}
+
+async function buildSourceBundles({ buildVersion, tsconfig, alias }) {
+  // Include BOTH `packages/*/spec/**/*.ts` (source-imports) and
+  // `builds/{knockout,reference}/spec/**/*.{js,ts}` (ko-globals
+  // only) so the iframe runner covers the full ~2700-test
+  // corpus. Each spec file still runs in its own iframe for
+  // isolation; the per-wrapper inline-ko setup provides
+  // `globalThis.ko` whether the spec references it via global
+  // or via `@tko/*` imports.
+  const scope = [
+    'packages/*/spec/**/*.ts',
+    'builds/knockout/spec/**/*.js',
+    'builds/knockout/spec/**/*.ts',
+    'builds/reference/spec/**/*.js',
+    'builds/reference/spec/**/*.ts'
+  ]
+  const specs = await collectSpecs(scope)
+  if (specs.length === 0) throw new Error('source-bundle scope matched no specs')
+
+  await fs.mkdir(sourceOutputDir, { recursive: true })
+  const { entryPoints, manifest } = await writeSpecWrappers(specs)
+
+  await esbuild.build({
+    entryPoints,
+    bundle: true,
+    format: 'esm',
+    splitting: true,
+    platform: 'browser',
+    target: 'es2022',
+    outdir: sourceOutputDir,
+    tsconfig,
+    alias,
+    plugins: [distToSrcPlugin],
+    define: { BUILD_VERSION: JSON.stringify(buildVersion) },
+    external: ['mocha'],
+    logLevel: 'warning'
+  })
+
+  await fs.writeFile(
+    path.join(sourceOutputDir, 'manifest.json'),
+    JSON.stringify({ specs: manifest }, null, 2),
+    'utf8'
+  )
+
+  console.log(`[source] bundled ${specs.length} spec file(s) → ${path.relative(repoRoot, sourceOutputDir)}/*.js`)
+}
+
+async function main() {
+  await fs.mkdir(outputDir, { recursive: true })
+  const tsconfig = path.join(repoRoot, 'tsconfig.json')
+  const rootPkg = JSON.parse(await fs.readFile(path.join(repoRoot, 'package.json'), 'utf8'))
+  const buildVersion = rootPkg.version ?? '0.0.0-test'
+
+  const packageDirs = await fs.readdir(path.join(repoRoot, 'packages'), { withFileTypes: true })
+  const alias = {}
+  for (const entry of packageDirs) {
+    if (entry.isDirectory()) {
+      alias[`@tko/${entry.name}`] = path.join(repoRoot, 'packages', entry.name, 'src', 'index.ts')
+    }
+  }
+
+  await fs.mkdir(sourceOutputDir, { recursive: true })
+  await Promise.all([
+    buildBuildBundle({ buildVersion, tsconfig, alias }),
+    buildSetupBundle({ tsconfig, alias, buildVersion }),
+    buildSourceBundles({ buildVersion, tsconfig, alias })
+  ])
+}
+
+main().catch(err => {
+  console.error(err)
+  process.exit(1)
+})
diff --git a/tko.io/src/components/Header.astro b/tko.io/src/components/Header.astro
index 34d858fd..f608ee27 100644
--- a/tko.io/src/components/Header.astro
+++ b/tko.io/src/components/Header.astro
@@ -25,6 +25,7 @@ const version = pkg.version;
 	</div>
 	<div class="sl-hidden md:sl-flex print:hidden right-group">
 		<a class="playground-link" href="/playground/esm">Playground</a>
+		<a class="playground-link" href="/tests">Tests</a>
 		<a class="llms-link" href="/llms.txt">llms.txt</a>
 		<div class="sl-flex social-icons">
 			<SocialIcons />
diff --git a/tko.io/src/pages/tests.astro b/tko.io/src/pages/tests.astro
new file mode 100644
index 00000000..04afbc62
--- /dev/null
+++ b/tko.io/src/pages/tests.astro
@@ -0,0 +1,658 @@
+---
+// TKO Browser Test Runner — written in TKO itself.
+//
+// Two modes:
+//
+//   Build mode (default)
+//     Load a published `@tko/build.*` from jsdelivr and run
+//     `tests/build-bundle.js`. Single Mocha run against the
+//     built artifact. Version-portable.
+//
+//   Source mode (URL opt-in: `?suite=source`)
+//     Spawn one iframe per spec file in `tests/source/manifest.json`.
+//     Each iframe has its own window + module graph — fresh ko,
+//     fresh options, fresh DOM — so state never leaks between
+//     specs. Mocha events stream into the parent via postMessage;
+//     the parent aggregates into a TKO view model and data-binds
+//     the reactive report.
+//
+// URL params:
+//   ?suite=build|source       default: source
+//   ?pkg=knockout|reference   build mode only; default: knockout
+//   ?ver=<version>|latest     build mode only; default: latest
+//   ?grep=<pattern>           source mode: filter spec files (regex on file/slug)
+//                             build mode: passthrough to Mocha.grep
+//   ?pool=<N>                 source mode: iframe pool size (default 4)
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>TKO · Browser Tests</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lobster&display=swap" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mocha@10/mocha.css" />
+    <style>
+      :root {
+        --bg: #0b0d11;
+        --panel: #12151c;
+        --panel-hi: #1a1f2a;
+        --border: #222834;
+        --fg: #e8e8e8;
+        --muted: #8a93a1;
+        --accent: #0f62fe;
+        --accent-hover: #3b82f6;
+        --ok: #57d38a;
+        --warn: #ffb04d;
+        --err: #ff6b6b;
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        background: var(--bg);
+        color: var(--fg);
+        font: 13px/1.5 'Inter', system-ui, sans-serif;
+        /* Small bottom-right padding; the work-area floats in the
+           bottom-right corner and self-removes when tests finish. */
+        padding-bottom: 1rem;
+      }
+      header {
+        padding: 0.8rem 1rem;
+        background: var(--panel);
+        border-bottom: 1px solid var(--border);
+        display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; align-items: center;
+      }
+      header h1 { margin: 0; font-size: 0.98rem; letter-spacing: 0.01em; font-weight: 600; display: inline-flex; align-items: baseline; gap: 0.5rem; }
+      header h1 a { color: var(--fg); text-decoration: none; }
+      header h1 a .brand { color: #dce8ff; font-family: 'Lobster', cursive; font-weight: 400; font-size: 1.85rem; letter-spacing: 0.01em; }
+      header h1 a:hover .brand { color: #fff; }
+      header .tag { color: var(--muted); font-size: 0.82rem; }
+      .chip {
+        display: inline-flex; align-items: center; gap: 0.35rem;
+        padding: 0.2rem 0.55rem;
+        background: var(--panel-hi);
+        border: 1px solid var(--border);
+        border-radius: 999px;
+        font-variant-numeric: tabular-nums;
+        font-size: 0.82rem;
+      }
+      .chip.ok   { color: var(--ok);   border-color: rgba(87,211,138,0.3); }
+      .chip.err  { color: var(--err);  border-color: rgba(255,107,107,0.35); }
+      .chip.warn { color: var(--warn); border-color: rgba(255,176,77,0.3); }
+      .chip.muted { color: var(--muted); }
+      header form { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; }
+      header select, header input[type=text], header button {
+        background: var(--panel-hi);
+        color: var(--fg);
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        padding: 0.25rem 0.55rem;
+        font: inherit;
+      }
+      header label { display: inline-flex; gap: 0.3rem; align-items: center; color: var(--muted); font-size: 0.85rem; }
+      header button { cursor: pointer; background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
+      header button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+      main { padding: 1rem; display: grid; gap: 1rem; }
+      .progress {
+        height: 3px;
+        background: var(--panel-hi);
+        border-radius: 999px;
+        overflow: hidden;
+      }
+      .progress > i {
+        display: block; height: 100%;
+        background: linear-gradient(90deg, var(--accent), var(--ok));
+        transition: width 120ms;
+      }
+      .suite {
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        overflow: hidden;
+        background: var(--panel);
+      }
+      .suite-head {
+        display: flex; justify-content: space-between; align-items: center;
+        padding: 0.45rem 0.75rem;
+        cursor: pointer;
+        user-select: none;
+        /* Button reset for accessibility. */
+        width: 100%;
+        background: transparent;
+        color: inherit;
+        border: 0;
+        text-align: left;
+        font: inherit;
+      }
+      .suite-head:hover { background: var(--panel-hi); }
+      .suite-head .name { font-weight: 600; letter-spacing: 0.01em; }
+      .suite[data-state=fail] .suite-head .name { color: var(--err); }
+      .suite[data-state=pending] .suite-head .name { color: var(--warn); }
+      .suite[data-state=running] .suite-head .name { color: var(--accent); }
+      .suite-head .meta { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.8rem; }
+      .suite-body { border-top: 1px solid var(--border); padding: 0.35rem 0.75rem; display: none; }
+      .suite[data-open=true] .suite-body { display: block; }
+      .suite[data-state=fail] .suite-body { display: block; }
+      .test {
+        display: grid; grid-template-columns: 1rem 1fr auto;
+        gap: 0.5rem; align-items: start;
+        padding: 0.2rem 0;
+        font-size: 0.85rem;
+      }
+      .test .icon { display: inline-block; width: 1rem; text-align: center; }
+      .test[data-kind=pass] .icon { color: var(--ok); }
+      .test[data-kind=fail] .icon { color: var(--err); }
+      .test[data-kind=pending] .icon { color: var(--warn); }
+      .test[data-kind=pending] .title { color: var(--muted); }
+      .test .dur { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.78rem; }
+      .test .err {
+        grid-column: 2 / span 2;
+        margin-top: 0.2rem;
+        padding: 0.4rem 0.55rem;
+        background: rgba(255,107,107,0.08);
+        border-left: 2px solid var(--err);
+        color: var(--err);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 0.78rem;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+      .filter { width: 14rem; }
+      /* Iframe sizing happens inline in runOne() — visible
+         focus-requiring iframes fill the work-area; hidden
+         parallel iframes are tiny + transparent inside
+         `hiddenHost`. No shared `.iframe-hidden` class. */
+      #mocha { padding: 0 0.5rem; }
+      footer { padding: 0.8rem 1rem; color: var(--muted); font-size: 0.78rem; border-top: 1px solid var(--border); }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+    <header>
+      <h1><a href="/"><span class="brand">TKO</span> · live browser tests</a></h1>
+      <span class="tag" data-bind="text: tagline"></span>
+      <span class="chip ok"    data-bind="text: '✓ ' + stats.pass()"></span>
+      <span class="chip err"   data-bind="text: '✖ ' + stats.fail()"></span>
+      <span class="chip warn"  data-bind="text: '○ ' + stats.pending()"></span>
+      <span class="chip muted" data-bind="text: stats.done() + ' / ' + stats.total()"></span>
+      <span class="chip muted" data-bind="text: elapsedLabel"></span>
+      <form data-bind="submit: onSubmit, visible: suite() === 'build'">
+        <label>Build
+          <select data-bind="value: pkg">
+            <option value="knockout">build.knockout</option>
+            <option value="reference">build.reference</option>
+          </select>
+        </label>
+        <label>Version
+          <select data-bind="options: versions, optionsText: 'label', optionsValue: 'value', value: ver" style="min-width: 7rem"></select>
+        </label>
+        <input type="text" class="filter" data-bind="textInput: grep" placeholder="grep regex" />
+        <button type="submit">Run</button>
+      </form>
+    </header>
+
+    <div class="progress"><i data-bind="style: { width: progressPct() + '%' }"></i></div>
+
+    <main>
+      <!-- Suite tree: source mode. -->
+      <div data-bind="foreach: suites, visible: suite() === 'source'">
+        <div class="suite" data-bind="attr: { 'data-state': state, 'data-open': open }">
+          <button type="button" class="suite-head" data-bind="click: toggle, attr: { 'aria-expanded': open }">
+            <span class="name" data-bind="text: file"></span>
+            <span class="meta" data-bind="text: pass() + ' / ' + total()"></span>
+          </button>
+          <div class="suite-body" data-bind="foreach: tests">
+            <div class="test" data-bind="attr: { 'data-kind': kind }">
+              <span class="icon" data-bind="text: icon"></span>
+              <span class="title" data-bind="text: title"></span>
+              <span class="dur" data-bind="text: dur"></span>
+              <!-- ko if: err -->
+                <div class="err" data-bind="text: err"></div>
+              <!-- /ko -->
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </main>
+
+    <footer data-bind="text: footer">config pending…</footer>
+    </div><!-- /#app -->
+
+    <!-- Mocha's HTML reporter target lives OUTSIDE the TKO-bound
+         #app wrapper. Otherwise page-level applyBindings scans the
+         dynamic content Mocha + specs inject and erroneously tries
+         to resolve <test-component> custom elements (registered
+         by specs against the CDN ko) against the page's own tko. -->
+    <div id="mocha" style="padding: 0 1rem"></div>
+
+    <!-- Work area: active spec iframes mount here. Kept visible
+         (not hidden) because Chromium denies
+         `iframe.contentWindow.focus()` system focus to off-screen
+         / zero-area iframes, which breaks the 34 hasfocus tests
+         (focusin / focusout events never fire without system
+         focus). The work-area iframe gets a real layout box, real
+         viewport intersection, and real focus routing. Visible-
+         running also doubles as a dark-factory signal: a visitor
+         watches specs flash by in the sandbox rather than
+         wondering if anything is happening. -->
+    <section id="workarea-section" style="
+      position:fixed;
+      right:1rem; bottom:1rem;
+      width:320px; height:200px;
+      border:1px solid var(--border);
+      border-radius:8px;
+      box-shadow:0 8px 24px rgba(0,0,0,0.35);
+      z-index:5;
+      overflow:hidden;
+      opacity:0.6;
+      transition:opacity 140ms ease;
+    "
+    onmouseenter="this.style.opacity=1"
+    onmouseleave="this.style.opacity=0.6"
+    >
+      <div id="workarea" style="
+        position:absolute;
+        inset:0;
+        background:#fff;
+        overflow:hidden;
+      "></div>
+      <div style="
+        position:absolute;
+        inset:0;
+        padding:0.55rem 0.7rem 1.3rem;
+        color:#0b0d11;
+        font-size:0.7rem;
+        line-height:1.35;
+        pointer-events:none;
+        text-shadow:0 0 6px rgba(255,255,255,0.85), 0 0 2px rgba(255,255,255,0.85);
+        mix-blend-mode:multiply;
+      ">
+        Focus-requiring specs (<code>hasfocus</code>, <code>.focus()</code>,
+        <code>document.activeElement</code>) run serially here &mdash;
+        Chromium only grants system focus to one iframe at a time and
+        denies it to off-screen / zero-area iframes. This panel will
+        disappear when tests complete.
+      </div>
+      <div id="workarea-label" style="
+        position:absolute;
+        right:0.4rem; bottom:0.3rem;
+        padding:0.1rem 0.4rem;
+        color:#0b0d11;
+        font-size:0.68rem;
+        font-variant-numeric:tabular-nums;
+        pointer-events:none;
+        text-shadow:0 0 6px rgba(255,255,255,0.9);
+      ">idle</div>
+    </section>
+
+    <!-- Error collector before any other script runs. -->
+    <script is:inline>
+      window.__tkoErrors = []
+      window.addEventListener('error', e =>
+        window.__tkoErrors.push({ msg: e.message, src: e.filename, line: e.lineno, stack: e.error?.stack }))
+      window.addEventListener('unhandledrejection', e =>
+        window.__tkoErrors.push({ msg: 'unhandled rejection: ' + (e.reason?.message || e.reason), stack: e.reason?.stack }))
+    </script>
+
+    <!-- Load the knockout-compat TKO build for the page UI. We
+         intentionally use the KO (not reference) build here: the
+         reference build auto-discovers custom elements anywhere in
+         the document, which would trip over the `<test-component>`
+         / other custom tags Mocha + specs inject into #mocha at
+         test time. KO build has no such auto-scan. -->
+    <script is:inline src="/lib/ko.js"></script>
+
+    <script is:inline>
+    (function () {
+      // Page UI uses the locally-loaded ko build. Specs (in their
+      // iframes, or via jsdelivr CDN in build mode) load their own
+      // separate copy — state is isolated by either iframe scope
+      // (source mode) or explicit global shadowing (build mode).
+      const ko = globalThis.ko
+
+      // Per-test row view model.
+      function TestRow({ kind, title, dur, err }) {
+        this.kind = kind
+        this.title = title
+        this.dur = typeof dur === 'number' ? dur + 'ms' : ''
+        this.err = err || ''
+        this.icon = kind === 'pass' ? '✓' : kind === 'fail' ? '✖' : '○'
+      }
+
+      // Per-spec suite view model. `file` is the relative path (manifest key).
+      function Suite(file) {
+        const self = this
+        self.file = file
+        self.tests = ko.observableArray([])
+        self.pass = ko.observable(0)
+        self.fail = ko.observable(0)
+        self.pending = ko.observable(0)
+        self.running = ko.observable(false)
+        self.total = ko.pureComputed(() => self.pass() + self.fail() + self.pending())
+        self.state = ko.pureComputed(() => {
+          if (self.fail() > 0) return 'fail'
+          if (self.running()) return 'running'
+          if (self.pending() > 0) return 'pending'
+          return 'ok'
+        })
+        self.open = ko.observable(false)
+        self.toggle = () => self.open(!self.open())
+      }
+
+      // Page view model.
+      function Page() {
+        const self = this
+        const qs = new URLSearchParams(location.search)
+        // Default to source mode — iframe-per-spec, the isolated
+        // runner. Use `?suite=build&pkg=knockout` to test a
+        // published `@tko/build.*` version via jsdelivr instead.
+        // Validate URL inputs — `pkg` + `ver` feed the jsdelivr
+        // <script> URL in build mode, so a crafted query string
+        // could otherwise load arbitrary third-party code. Fall
+        // back to safe defaults on anything unexpected.
+        const rawSuite = qs.get('suite')
+        const rawPkg = qs.get('pkg')
+        const rawVer = qs.get('ver')
+        const safeSuite = rawSuite === 'build' || rawSuite === 'source' ? rawSuite : 'source'
+        const safePkg = rawPkg === 'knockout' || rawPkg === 'reference' ? rawPkg : 'knockout'
+        // Allow `latest`, or a semver-shaped string
+        // (digits, dots, hyphens, letters for pre-release tags).
+        const safeVer = rawVer && /^[\w.-]{1,40}$/.test(rawVer) ? rawVer : 'latest'
+        self.suite   = ko.observable(safeSuite)
+        self.pkg     = ko.observable(safePkg)
+        self.ver     = ko.observable(safeVer)
+        self.grep    = ko.observable(qs.get('grep') || '')
+        // Pool for the parallel (non-focus) phase. Focus-needing
+        // specs — flagged at bundle time via `manifest.specs[].needsFocus`
+        // — always run serially in the visible #workarea so each
+        // has sole system focus; Chromium only grants
+        // `contentWindow.focus()` system focus to one frame at a
+        // time. Everything else runs in parallel, invisibly.
+        const reqPool = parseInt(qs.get('pool') || '4', 10)
+        self.pool    = Number.isFinite(reqPool) ? Math.min(16, Math.max(1, reqPool)) : 4
+
+        self.versions = ko.observableArray([{ label: 'loading…', value: 'latest' }])
+        self.suites   = ko.observableArray([])
+
+        self.stats = {
+          pass:    ko.observable(0),
+          fail:    ko.observable(0),
+          pending: ko.observable(0),
+          total:   ko.observable(0),
+          start:   ko.observable(0),
+          end:     ko.observable(0)
+        }
+        self.stats.done = ko.pureComputed(() =>
+          self.stats.pass() + self.stats.fail() + self.stats.pending()
+        )
+        self.tick = ko.observable(Date.now())
+        const tickTimer = setInterval(() => {
+          if (self.stats.end()) {
+            clearInterval(tickTimer)
+            return
+          }
+          self.tick(Date.now())
+        }, 250)
+        self.elapsedLabel = ko.pureComputed(() => {
+          const s = self.stats.start()
+          if (!s) return '—'
+          const e = self.stats.end() || self.tick()
+          return `${((e - s) / 1000).toFixed(1)}s`
+        })
+        self.progressPct = ko.pureComputed(() => {
+          const t = self.stats.total()
+          const d = self.stats.done()
+          return t > 0 ? Math.min(100, (d / t) * 100).toFixed(1) : 0
+        })
+        self.tagline = ko.pureComputed(() =>
+          self.suite() === 'source'
+            ? `source specs · pool ${self.pool}`
+            : `build ${self.pkg()} @ ${self.ver()}`
+        )
+        self.footer = ko.pureComputed(() =>
+          self.suite() === 'source'
+            ? 'source mode · one iframe per spec file (isolated module graph)'
+            : `@tko/build.${self.pkg()}@${self.ver()} via jsdelivr`
+        )
+
+        self.onSubmit = () => {
+          const next = new URLSearchParams()
+          // Page default is source. Anything else (including the
+          // Run form's own build mode) must set `suite` explicitly
+          // — else reload drops to source and kills the build-mode
+          // config the user just submitted.
+          if (self.suite() !== 'source') next.set('suite', self.suite())
+          if (self.pkg() !== 'knockout') next.set('pkg', self.pkg())
+          if (self.ver() !== 'latest') next.set('ver', self.ver())
+          const g = self.grep().trim()
+          if (g) next.set('grep', g)
+          location.search = next.toString() ? '?' + next.toString() : ''
+          return false
+        }
+
+        // Per-file suite helpers for source mode.
+        const suiteIndex = new Map()
+        self.ensureSuite = file => {
+          let s = suiteIndex.get(file)
+          if (s) return s
+          s = new Suite(file)
+          suiteIndex.set(file, s)
+          self.suites.push(s)
+          return s
+        }
+        self.recordTest = (file, kind, title, dur, err, stack) => {
+          const s = self.ensureSuite(file)
+          s[kind](s[kind]() + 1)
+          const row = new TestRow({ kind, title, dur, err: err ? (err + (stack ? '\n' + stack : '')).slice(0, 2000) : '' })
+          s.tests.push(row)
+          self.stats[kind](self.stats[kind]() + 1)
+        }
+      }
+
+      const page = new Page()
+      ko.applyBindings(page, document.getElementById('app'))
+      window.__tkoPage = page
+
+      // Show/hide the out-of-tree mocha host based on mode.
+      // (The #workarea always exists; iframes mount into it.)
+      document.getElementById('mocha').hidden = page.suite() !== 'build'
+
+      // ----- Mode-specific kickoff -----
+      if (page.suite() === 'source') {
+        runSourceMode(page)
+      } else {
+        runBuildMode(page)
+      }
+
+      // ---- Build mode ----
+      function loadScript(src) {
+        return new Promise((resolve, reject) => {
+          const s = document.createElement('script')
+          s.src = src
+          s.onload = () => resolve()
+          s.onerror = () => reject(new Error(`failed to load ${src}`))
+          document.head.appendChild(s)
+        })
+      }
+      async function populateVersions(page) {
+        try {
+          const res = await fetch(`https://registry.npmjs.org/@tko/build.${page.pkg()}`)
+          const data = await res.json()
+          const versions = Object.keys(data.versions || {}).reverse()
+          const latest = data['dist-tags']?.latest
+          page.versions(versions.map(v => ({ value: v, label: v + (v === latest ? ' (latest)' : '') })))
+          if (page.ver() === 'latest' && latest) page.ver(latest)
+        } catch (e) {
+          page.versions([{ label: 'npm fetch failed: ' + e.message, value: 'latest' }])
+        }
+      }
+      async function runBuildMode(page) {
+        await populateVersions(page)
+
+        // Mocha browser reporter for build mode — single run.
+        await loadScript('https://cdn.jsdelivr.net/npm/mocha@10/mocha.js')
+        window.mocha.setup({ ui: 'bdd', reporter: 'html', timeout: 10000, cleanReferencesAfterRun: false })
+        const buildGrep = page.grep().trim()
+        if (buildGrep) {
+          try {
+            window.mocha.grep(new RegExp(buildGrep, 'i'))
+          } catch {
+            const needle = buildGrep.toLowerCase()
+            window.mocha.grep(t => (t.fullTitle?.() || t.title || '').toLowerCase().includes(needle))
+          }
+        }
+
+        const koUrl = `https://cdn.jsdelivr.net/npm/@tko/build.${page.pkg()}@${page.ver()}/dist/browser.min.js`
+        await loadScript(koUrl)
+        await loadScript('/tests/build-bundle.js')
+
+        page.stats.start(Date.now())
+        const runner = window.mocha.run()
+        runner.on('pass',    () => page.stats.pass(page.stats.pass()+1))
+        runner.on('fail',    () => page.stats.fail(page.stats.fail()+1))
+        runner.on('pending', () => page.stats.pending(page.stats.pending()+1))
+        runner.on('end',     () => { page.stats.end(Date.now()) })
+        page.stats.total(runner.total)
+      }
+
+      // ---- Source mode ----
+      async function runSourceMode(page) {
+        const res = await fetch('/tests/source/manifest.json')
+        const manifest = await res.json()
+        let specs = manifest.specs
+        const grep = page.grep().trim()
+        if (grep) {
+          // Invalid regex patterns (e.g. bare `(`) throw from the
+          // RegExp constructor and abort source mode. Fall back to
+          // literal substring matching instead.
+          let rx
+          try { rx = new RegExp(grep, 'i') } catch {}
+          specs = rx
+            ? specs.filter(s => rx.test(s.file) || rx.test(s.slug))
+            : specs.filter(s => s.file.toLowerCase().includes(grep.toLowerCase())
+                              || s.slug.toLowerCase().includes(grep.toLowerCase()))
+        }
+        specs.sort((a, b) => a.file.localeCompare(b.file))
+        for (const s of specs) page.ensureSuite(s.file)
+
+        page.stats.start(Date.now())
+
+        // Track live iframe contentWindows so the message handler
+        // can ignore spoofed frames. Same-origin + known-source =
+        // accept; anything else (cross-origin post, unknown window)
+        // is dropped.
+        const liveFrames = new Set()
+        window.addEventListener('message', e => {
+          if (e.origin !== location.origin) return
+          if (!liveFrames.has(e.source)) return
+          const m = e.data
+          if (!m || !m.slug) return
+          const spec = specs.find(s => s.slug === m.slug)
+          const key = spec?.file || m.slug
+          const suite = page.ensureSuite(key)
+          if (m.type === 'start') {
+            page.stats.total(page.stats.total() + m.total)
+            suite.running(true)
+          } else if (m.type === 'pass') {
+            page.recordTest(key, 'pass', m.title, m.duration)
+          } else if (m.type === 'fail') {
+            page.recordTest(key, 'fail', m.title, m.duration, m.err, m.stack)
+          } else if (m.type === 'pending') {
+            page.recordTest(key, 'pending', m.title)
+          } else if (m.type === 'end') {
+            suite.running(false)
+          } else if (m.type === 'import-error') {
+            page.stats.total(Math.max(page.stats.total(), page.stats.done() + 1))
+            page.recordTest(key, 'fail', '(iframe import error)', 0, m.err)
+          }
+        })
+
+        // Split by needsFocus: hidden specs run in parallel,
+        // focus-requiring specs run serially in the #workarea so
+        // each has sole system focus (Chromium grants focus to
+        // one iframe at a time).
+        const hiddenQueue = specs.filter(s => !s.needsFocus)
+        const focusQueue  = specs.filter(s => s.needsFocus)
+
+        const workarea = document.getElementById('workarea')
+        const workareaLabel = document.getElementById('workarea-label')
+
+        // Hidden host for non-focus specs; attached to body with
+        // tiny offscreen layout so Chromium doesn't waste work
+        // rendering them.
+        const hiddenHost = document.createElement('div')
+        hiddenHost.style.cssText = 'position:fixed;top:0;left:0;width:0;height:0;overflow:hidden;pointer-events:none'
+        document.body.appendChild(hiddenHost)
+
+        function runOne(spec, { host, label, grantFocus }) {
+          return new Promise(resolve => {
+            const iframe = document.createElement('iframe')
+            iframe.style.cssText = grantFocus
+              ? 'width:100%;height:100%;border:0;display:block'
+              : 'width:1px;height:1px;border:0;opacity:0'
+            iframe.src = `/tests-frame.html?spec=${encodeURIComponent(spec.slug)}`
+            if (label) label.textContent = spec.file
+            iframe.addEventListener('load', () => {
+              if (iframe.contentWindow) liveFrames.add(iframe.contentWindow)
+              if (grantFocus) {
+                try {
+                  iframe.focus()
+                  iframe.contentWindow?.focus()
+                } catch {}
+              }
+            })
+            let done = false
+            let safetyTimer
+            const finish = () => {
+              if (done) return
+              done = true
+              clearTimeout(safetyTimer)
+              window.removeEventListener('message', onMsg)
+              if (iframe.contentWindow) liveFrames.delete(iframe.contentWindow)
+              iframe.remove()
+              resolve()
+            }
+            const onMsg = e => {
+              if (e.origin !== location.origin) return
+              if (e.source !== iframe.contentWindow) return
+              const m = e.data
+              if (m?.slug !== spec.slug) return
+              if (m.type === 'end' || m.type === 'import-error') finish()
+            }
+            window.addEventListener('message', onMsg)
+            host.appendChild(iframe)
+            safetyTimer = setTimeout(() => {
+              const key = spec.file || spec.slug
+              page.stats.total(Math.max(page.stats.total(), page.stats.done() + 1))
+              page.recordTest(key, 'fail', '(iframe timeout)', 30000,
+                `No end/import-error event after 30000ms (spec: ${key})`)
+              page.ensureSuite(key).running(false)
+              finish()
+            }, 30000)
+          })
+        }
+
+        // Phase 1: parallel hidden specs.
+        async function hiddenWorker() {
+          while (hiddenQueue.length) {
+            const spec = hiddenQueue.shift()
+            if (!spec) return
+            await runOne(spec, { host: hiddenHost, label: null, grantFocus: false })
+          }
+        }
+        await Promise.all(Array.from({ length: page.pool }, hiddenWorker))
+
+        // Phase 2: serial focus specs in the visible workarea.
+        for (const spec of focusQueue) {
+          await runOne(spec, { host: workarea, label: workareaLabel, grantFocus: true })
+        }
+        workareaLabel.textContent = 'done'
+        document.getElementById('workarea-section')?.remove()
+        hiddenHost.remove()
+
+        page.stats.end(Date.now())
+      }
+    })();
+    </script>
+  </body>
+</html>