@wenathlan/devthink 2.0.15 → 2.0.19

package/fixtures/bun.ts

@@ -0,0 +1,7 @@
+/** One bun script that imports the library through the bun runtime: the same consent-first library loads with the node default adapters. */
+import { bundlestamp, parseproposal } from "@wenathlan/extension";
+
+const stamp = bundlestamp();
+console.log(`devthink ${stamp.version} in ${stamp.mode} mode under bun ${Bun.version}`);
+const proposal = parseproposal(JSON.stringify({ version: stamp.version, plan: { id: "plan1", state: "awaitingapproval", objective: "Read the release notes", steps: [{ id: "s1", kind: "observe", summary: "Observe the page." }] } }), "https://example.org");
+console.log(`the plan parses with ${proposal.plan.steps.length} step${proposal.plan.steps.length === 1 ? "" : "s"} under the same review the extension runs`);

package/fixtures/cjs.js

@@ -0,0 +1,6 @@
+/** One plain node script that requires the library in cjs mode: the stable getter object exposes the same named exports as the esm build. */
+const devthink = require("@wenathlan/extension");
+
+const stamp = devthink.bundlestamp();
+console.log(`devthink ${stamp.version} in ${stamp.mode} mode`);
+console.log(`policy exports ${Object.keys(require("@wenathlan/extension/policy")).length} functions`);

package/fixtures/deno.ts

@@ -0,0 +1,6 @@
+/** One deno script that imports the library through npm specifiers: the deno adapter reads its configuration and the same consent gates hold. */
+import { bundlestamp, platformtargets } from "@wenathlan/extension";
+
+const stamp = bundlestamp();
+console.log(`devthink ${stamp.version} in ${stamp.mode} mode under deno ${Deno.version.deno}`);
+console.log(`the platform matrix covers ${platformtargets().length} runtime targets`);

package/fixtures/example-org-pagestate.json

@@ -0,0 +1,22 @@
+{
+  "id": "example-org-pagestate",
+  "origin": "https://example.org",
+  "recordedat": 1800000000000,
+  "grants": ["observe", "readtext", "readforms", "inspect", "countelements"],
+  "observation": {
+    "schemaversion": 1,
+    "url": "https://example.org/releases",
+    "title": "Example releases",
+    "textpreview": "Release notes of the example project: the latest release ships the cli expansion.",
+    "textlength": 512,
+    "forms": [
+      { "label": "email", "type": "email", "name": "email" },
+      { "label": "message", "type": "textarea", "name": "message" }
+    ],
+    "interactive": [
+      { "selector": "main a", "role": "link", "label": "latest release" },
+      { "selector": "form button", "role": "button", "label": "send" }
+    ],
+    "capturedat": 1800000000000
+  }
+}

package/fixtures/importers/automa-workflow.json

@@ -0,0 +1,18 @@
+{
+  "name": "contact survey sweep",
+  "version": "1.0.0",
+  "blocks": {
+    "trigger": { "id": "trigger", "type": "trigger", "data": { "type": "manual" } },
+    "tab": { "id": "tab", "type": "newtab", "data": { "url": "https://example.org/contact", "active": true } },
+    "survey": {
+      "id": "survey",
+      "type": "forms",
+      "data": { "fields": [
+        { "name": "email", "value": "survey@example.org", "selector": "input[name=email]" },
+        { "name": "message", "value": "hello from the sweep", "selector": "textarea" }
+      ] }
+    },
+    "send": { "id": "send", "type": "click-element", "data": { "selector": "button.primary" } },
+    "hold": { "id": "hold", "type": "wait", "data": { "ms": 1500 } }
+  }
+}

package/fixtures/importers/selenium-side.json

@@ -0,0 +1,20 @@
+{
+  "id": "side-example",
+  "version": "2.0",
+  "name": "example contact survey",
+  "url": "https://example.org",
+  "tests": [
+    {
+      "id": "survey",
+      "name": "survey",
+      "commands": [
+        { "id": "open", "command": "open", "target": "/contact", "value": "" },
+        { "id": "email", "command": "type", "target": "css=input[name=email]", "value": "survey@example.org" },
+        { "id": "keys", "command": "sendKeys", "target": "css=input[name=email]", "value": " hello" },
+        { "id": "pick", "command": "select", "target": "id=topic", "value": "general" },
+        { "id": "send", "command": "click", "target": "css=button.primary", "value": "" },
+        { "id": "hold", "command": "pause", "target": "2000", "value": "" }
+      ]
+    }
+  ]
+}

package/fixtures/importers/tabular-plan.csv

@@ -0,0 +1,7 @@
+# goal: Survey the releases page of the example project
+# origin: https://example.org
+step,target,value
+observe,,
+readtext,main,
+countelements,main section,
+type,input[name=filter],"release notes, digest"

package/fixtures/importers/uivision-macro.json

@@ -0,0 +1,10 @@
+{
+  "Name": "example releases read",
+  "CreationDate": "2024-05-01",
+  "Commands": [
+    { "Command": "open", "Target": "https://example.org/releases", "Value": "" },
+    { "Command": "click", "Target": "css=nav a.releases", "Value": "" },
+    { "Command": "type", "Target": "css=input[name=filter]", "Value": "release notes" },
+    { "Command": "verifyText", "Target": "css=main h1", "Value": "Releases" }
+  ]
+}

package/fixtures/importers/v1-plan.json

@@ -0,0 +1,13 @@
+{
+  "version": "1",
+  "goal": "Survey the contact form of the example project",
+  "origin": "https://example.org",
+  "grants": ["observe", "readforms", "inspect", "type", "delay"],
+  "steps": [
+    { "id": "observe", "action": "observe", "label": "Observe the contact page" },
+    { "id": "read", "action": "readforms", "label": "Read the contact form controls" },
+    { "id": "inspect", "action": "inspect", "label": "Inspect the form fields", "selector": "form input" },
+    { "id": "answer", "action": "type", "label": "Type the survey answer", "selector": "input[name=answer]", "value": "yes" },
+    { "id": "pause", "action": "delay", "label": "Wait for the quiet form", "milliseconds": 3000 }
+  ]
+}

package/fixtures/mcp-client.mjs

@@ -0,0 +1,14 @@
+/** One minimal mcp client script that lists the devthink tools over stdio: run `node dist/fixtures/mcp-client.mjs` with the serve command of the extension cli in your path. */
+import { spawn } from "node:child_process";
+
+const child = spawn("node", ["dist/cli.js", "serve", "--stdio"], { stdio: ["pipe", "pipe", "inherit"] });
+const send = (id, method, params) => child.stdin.write(`${JSON.stringify({ jsonrpc: "2.0", id, method, params })}\n`);
+child.stdout.on("data", chunk => {
+  for (const line of String(chunk).trim().split("\n")) {
+    if (line === "") continue;
+    const frame = JSON.parse(line);
+    if (frame.id === 1) { console.log(`server: ${frame.result.serverInfo.name} ${frame.result.serverInfo.version}`); send(2, "tools/list", {}); }
+    if (frame.id === 2) { console.log(`${frame.result.tools.length} tools:`); for (const tool of frame.result.tools) console.log(`  ${tool.name} (${tool.metadata?.riskclass ?? "read"})`); child.kill(); }
+  }
+});
+send(1, "initialize", { protocolVersion: "2025-06-18", capabilities: {}, clientInfo: { name: "example client", version: "1" } });

package/fixtures/pages/checkout.html

@@ -0,0 +1,192 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Gallery fixture checkout</title>
+<meta name="description" content="The checkout fixture page of the devthink example gallery: a login form, a checkout wizard, a registration form, dependent dropdowns, a delivery calendar and inline validation errors.">
+<!--
+  The checkout fixture page of the example gallery (local origin https://checkout.test).
+  Self contained static html with inline styles and inline script: no remote resource loads,
+  no payment call, no storage. The page exists so the form recipes have one reviewable local
+  target that mirrors a checkout flow with its validation behavior.
+-->
+<style>
+  :root { color-scheme: light; font-family: system-ui, sans-serif; }
+  body { margin: 0 auto; max-width: 640px; padding: 16px; color: #17202e; }
+  header h1 { font-size: 22px; margin: 4px 0; }
+  header p { color: #56637a; margin: 4px 0 18px; }
+  form { display: grid; gap: 8px; border: 1px solid #d5dce8; border-radius: 10px; padding: 14px; margin: 14px 0 22px; }
+  form h2 { font-size: 16px; margin: 0 0 6px; }
+  label { font-size: 13px; color: #56637a; }
+  input, select { padding: 7px 9px; border: 1px solid #c6cedd; border-radius: 6px; font-size: 14px; }
+  button { padding: 8px 14px; border: 1px solid #17202e; background: #17202e; color: #fff; border-radius: 6px; cursor: pointer; justify-self: start; }
+  ol.steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 10px; font-size: 13px; }
+  ol.steps li { padding: 4px 10px; border: 1px solid #c6cedd; border-radius: 999px; color: #56637a; }
+  ol.steps li[aria-current="true"] { background: #17202e; color: #fff; border-color: #17202e; }
+  fieldset { border: 1px solid #d5dce8; border-radius: 8px; margin: 6px 0; }
+  .form-error { display: none; margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid #ff7b8e; background: #fff2f4; color: #8a2233; font-size: 13px; }
+  .form-error[data-visible="true"] { display: block; }
+  footer p { color: #56637a; font-size: 12px; }
+</style>
+</head>
+<body>
+<header>
+  <h1>Fixture checkout</h1>
+  <p>The local gallery fixture of the devthink form recipes: a login form, a checkout wizard, a registration form, dependent dropdowns and a delivery calendar.</p>
+</header>
+<main>
+  <form class="login-form" aria-label="Account login">
+    <h2>Account login</h2>
+    <label for="loginemail">Email</label>
+    <input id="loginemail" name="email" type="email" autocomplete="username">
+    <label for="loginpassword">Password</label>
+    <input id="loginpassword" name="password" type="password" autocomplete="current-password">
+    <button type="button" id="loginsubmit">Log in</button>
+    <p class="form-error" id="loginerror" role="alert">The email field needs a valid address before the login continues.</p>
+  </form>
+  <form class="checkout-form" aria-label="Checkout wizard">
+    <h2>Checkout</h2>
+    <ol class="steps" id="checkoutsteps">
+      <li aria-current="true">Address</li>
+      <li>Shipping</li>
+      <li>Review</li>
+    </ol>
+    <fieldset>
+      <legend>Address</legend>
+      <label for="checkoutname">Full name</label>
+      <input id="checkoutname" name="name">
+      <label for="checkoutaddress">Street address</label>
+      <input id="checkoutaddress" name="address">
+      <label for="checkoutcity">City</label>
+      <input id="checkoutcity" name="city">
+    </fieldset>
+    <fieldset id="shippingfields" hidden>
+      <legend>Shipping</legend>
+      <label for="shipping">Shipping method</label>
+      <select id="shipping" name="shipping"><option value="standard">Standard</option><option value="express">Express</option></select>
+    </fieldset>
+    <fieldset id="reviewfields" hidden>
+      <legend>Review</legend>
+      <label for="cardnumber">Card number</label>
+      <input id="cardnumber" name="cardnumber" inputmode="numeric" placeholder="0000 0000 0000 0000">
+    </fieldset>
+    <button type="button" id="checkoutsubmit">Place the order</button>
+    <p class="form-error" id="checkouterror" role="alert">The card number field stays empty; the review step refuses the order.</p>
+  </form>
+  <form class="registration-form" aria-label="Account registration">
+    <h2>Registration</h2>
+    <label for="fullname">Full name</label>
+    <input id="fullname" name="fullname">
+    <label for="regemail">Email</label>
+    <input id="regemail" name="email" type="email">
+    <label for="phone">Phone</label>
+    <input id="phone" name="phone" type="tel">
+    <button type="button" id="registersubmit">Create the account</button>
+    <p class="form-error" id="registererror" role="alert">The registration needs a name before the account is created.</p>
+  </form>
+  <form class="wizard-form" aria-label="Delivery wizard">
+    <h2>Delivery wizard</h2>
+    <ol class="steps" id="wizardsteps">
+      <li aria-current="true">Address</li>
+      <li>Delivery</li>
+      <li>Confirm</li>
+    </ol>
+    <label for="wizardname">Name</label>
+    <input id="wizardname" name="name">
+    <label for="wizardstreet">Street</label>
+    <input id="wizardstreet" name="street">
+    <label for="wizardcity">City</label>
+    <input id="wizardcity" name="city">
+    <button type="button" id="wizardsubmit">Confirm the delivery</button>
+    <p class="form-error" id="wizarderror" role="alert">The delivery wizard needs every address field before it confirms.</p>
+  </form>
+  <form class="dropdown-form" aria-label="Region and city">
+    <h2>Region and city</h2>
+    <label for="region">Region</label>
+    <select id="region" name="region">
+      <option value="">Choose a region</option>
+      <option value="north">North</option>
+      <option value="south">South</option>
+    </select>
+    <label for="city">City</label>
+    <select id="city" name="city" disabled>
+      <option value="">Choose a city</option>
+    </select>
+    <button type="button" id="dropdownsubmit">Save the region</button>
+  </form>
+  <form class="calendar-form" aria-label="Delivery date">
+    <h2>Delivery date</h2>
+    <label for="delivery">Delivery date</label>
+    <input id="delivery" name="delivery" type="date">
+    <button type="button" id="calendarsubmit">Choose the date</button>
+  </form>
+</main>
+<footer>
+  <p>Fixture page of the devthink example gallery — local origin https://checkout.test, no remote resource, no payment call, no storage.</p>
+</footer>
+<script>
+/* The inline behavior of the fixture page: the dependent dropdown fills its city options from
+   the chosen region, the wizard and checkout step lists advance their step markers, and every
+   submit button reveals the inline validation error the validation recipes read. */
+(function () {
+  "use strict";
+  var cities = { north: ["harbor", "fjord"], south: ["cove", "atlas"] };
+  var region = document.getElementById("region");
+  var city = document.getElementById("city");
+  function showerror(id) {
+    var node = document.getElementById(id);
+    if (node) node.setAttribute("data-visible", "true");
+  }
+  var errors = [
+    ["loginsubmit", "loginerror"],
+    ["checkoutsubmit", "checkouterror"],
+    ["registersubmit", "registererror"],
+    ["wizardsubmit", "wizarderror"],
+    ["dropdownsubmit", null],
+    ["calendarsubmit", null]
+  ];
+  for (var index = 0; index < errors.length; index += 1) {
+    var button = document.getElementById(errors[index][0]);
+    var errorid = errors[index][1];
+    if (button) button.addEventListener("click", function (errorvalue) {
+      return function () { if (errorvalue !== null) showerror(errorvalue); };
+    }(errorid));
+  }
+  if (region && city) region.addEventListener("change", function () {
+    var chosen = region.value;
+    while (city.options.length > 1) city.remove(1);
+    var list = cities[chosen] || [];
+    for (var option = 0; option < list.length; option += 1) {
+      var item = document.createElement("option");
+      item.value = list[option];
+      item.textContent = list[option];
+      city.append(item);
+    }
+    city.disabled = chosen === "";
+  });
+  function advance(listid) {
+    var list = document.getElementById(listid);
+    if (!list) return;
+    var steps = list.children;
+    for (var step = 0; step < steps.length; step += 1) {
+      if (steps[step].getAttribute("aria-current") === "true") {
+        steps[step].removeAttribute("aria-current");
+        if (steps[step + 1]) steps[step + 1].setAttribute("aria-current", "true");
+        return;
+      }
+    }
+  }
+  var shippingfields = document.getElementById("shippingfields");
+  var reviewfields = document.getElementById("reviewfields");
+  var checkoutsubmit = document.getElementById("checkoutsubmit");
+  if (checkoutsubmit) checkoutsubmit.addEventListener("click", function () {
+    if (shippingfields && shippingfields.hidden) { shippingfields.hidden = false; advance("checkoutsteps"); return; }
+    if (reviewfields && reviewfields.hidden) { reviewfields.hidden = false; advance("checkoutsteps"); }
+  });
+  var wizardsubmit = document.getElementById("wizardsubmit");
+  if (wizardsubmit) wizardsubmit.addEventListener("click", function () { advance("wizardsteps"); });
+})();
+</script>
+</body>
+</html>

package/fixtures/pages/dashboard.html

@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Gallery fixture dashboard</title>
+<meta name="description" content="The dashboard fixture page of the devthink example gallery: a price ticker on a timer, toasts, console noise, an availability badge, deep links and network quiet.">
+<!--
+  The dashboard fixture page of the example gallery (local origin https://dashboard.test).
+  Self contained static html with inline styles and inline script: the timers tick locally,
+  the console noise writes to the devtools console only, the network quiet is a local activity
+  counter that decays over time — no remote resource, no fetch, no storage, no cookie.
+-->
+<style>
+  :root { color-scheme: dark; font-family: system-ui, sans-serif; }
+  body { margin: 0 auto; max-width: 720px; padding: 16px; background: #090d16; color: #eff6ff; }
+  header h1 { font-size: 22px; margin: 4px 0; }
+  header p { color: #9aa8bd; margin: 4px 0 18px; }
+  .price-ticker { display: flex; gap: 14px; flex-wrap: wrap; border: 1px solid #26334b; border-radius: 10px; padding: 12px; margin: 12px 0 18px; font-variant-numeric: tabular-nums; }
+  .price-ticker span { font-size: 15px; }
+  .price-ticker span[data-direction="up"] { color: #9ae6b4; }
+  .price-ticker span[data-direction="down"] { color: #ff7b8e; }
+  .availability { display: inline-block; border-radius: 999px; border: 1px solid #56cc9b; color: #56cc9b; font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 3px 10px; text-transform: uppercase; }
+  .toasts { display: grid; gap: 8px; margin: 12px 0 18px; }
+  .toast { border: 1px solid #26334b; border-radius: 8px; background: #11192a; padding: 8px 12px; font-size: 13px; color: #9aa8bd; }
+  nav.deeplinks { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 22px; }
+  nav.deeplinks a { color: #74e8c1; font-size: 14px; }
+  .meter { border: 1px solid #26334b; border-radius: 8px; padding: 10px; font-size: 13px; color: #9aa8bd; margin: 12px 0 22px; }
+  footer p { color: #9aa8bd; font-size: 12px; }
+</style>
+</head>
+<body>
+<header>
+  <h1>Fixture dashboard</h1>
+  <p>The local gallery fixture of the devthink monitoring and testing recipes: a live price ticker, timers, toasts, console noise, an availability badge, deep links and network quiet.</p>
+</header>
+<main>
+  <section aria-label="Price ticker">
+    <h2>Price ticker</h2>
+    <p><span class="availability" id="availabilitybadge">All systems available</span></p>
+    <div class="price-ticker" id="ticker" aria-live="off">
+      <span data-symbol="LUMEN" data-direction="up">$89.00</span>
+      <span data-symbol="HARBOR" data-direction="down">$45.00</span>
+      <span data-symbol="NORTH" data-direction="up">$120.00</span>
+    </div>
+  </section>
+  <section aria-label="Activity">
+    <h2>Activity</h2>
+    <div class="toasts" id="toasts">
+      <div class="toast" role="status">The nightly digest finished at 03:00.</div>
+      <div class="toast" role="status">The inventory sync queued 6 rows.</div>
+    </div>
+    <div class="meter" id="networkmeter" role="status" aria-live="polite">Network activity: 3 pending events.</div>
+  </section>
+  <nav class="deeplinks" aria-label="Dashboard deep links">
+    <a href="#ticker">Open the ticker</a>
+    <a href="#toasts">Open the toasts</a>
+    <a href="#networkmeter">Open the network meter</a>
+  </nav>
+</main>
+<footer>
+  <p>Fixture page of the devthink example gallery — local origin https://dashboard.test, no remote resource, no fetch, no storage, no cookie.</p>
+</footer>
+<script>
+/* The inline behavior of the fixture page: the ticker timer nudges one price per tick, the
+   toast timer appends one line per tick, the console noise writes one log line and one error
+   line on load, and the network meter decays its local activity counter toward quiet. */
+(function () {
+  "use strict";
+  var ticker = document.getElementById("ticker");
+  var toasts = document.getElementById("toasts");
+  var meter = document.getElementById("networkmeter");
+  var symbols = ticker ? ticker.querySelectorAll("span") : [];
+  var prices = [];
+  for (var index = 0; index < symbols.length; index += 1) {
+    prices.push(Number.parseFloat(symbols[index].textContent.replace("$", "")) || 0);
+  }
+  var tick = 0;
+  var timer = window.setInterval(function () {
+    tick += 1;
+    if (symbols.length > 0) {
+      var slot = tick % symbols.length;
+      var next = prices[slot] + (tick % 2 === 0 ? 0.5 : -0.5);
+      prices[slot] = next;
+      symbols[slot].setAttribute("data-direction", next >= 0 ? "up" : "down");
+      symbols[slot].textContent = "$" + next.toFixed(2);
+    }
+    if (toasts) {
+      var toast = document.createElement("div");
+      toast.className = "toast";
+      toast.setAttribute("role", "status");
+      toast.textContent = "Tick " + tick + ": the local fixture timer fired.";
+      toasts.append(toast);
+      if (toasts.children.length > 6) toasts.firstElementChild.remove();
+    }
+  }, 1200);
+  if (meter) {
+    var pending = 3;
+    var quiet = window.setInterval(function () {
+      pending = Math.max(0, pending - 1);
+      meter.textContent = "Network activity: " + pending + " pending event" + (pending === 1 ? "" : "s") + (pending === 0 ? " — quiet." : ".");
+    }, 900);
+    window.addEventListener("beforeunload", function () { window.clearInterval(timer); window.clearInterval(quiet); });
+  }
+  console.log("The fixture dashboard booted with 3 pending network events.");
+  console.error("The fixture dashboard records one deliberate console error for the console recipes.");
+})();
+</script>
+</body>
+</html>

package/fixtures/pages/feed.html

@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Gallery fixture feed</title>
+<meta name="description" content="The feed fixture page of the devthink example gallery: an infinite scroll feed with a sentinel, delayed card loads, search results and a nested comment tree.">
+<!--
+  The feed fixture page of the example gallery (local origin https://feed.test).
+  Self contained static html with inline styles and inline script: the infinite scroll appends
+  local cards at the sentinel, the delayed loads reveal their cards on timers, and the search
+  results and the comment tree are static markup — no remote resource, no fetch, no storage.
+-->
+<style>
+  :root { color-scheme: light; font-family: system-ui, sans-serif; }
+  body { margin: 0 auto; max-width: 640px; padding: 16px; color: #17202e; }
+  header h1 { font-size: 22px; margin: 4px 0; }
+  header p { color: #56637a; margin: 4px 0 18px; }
+  .feed { display: grid; gap: 10px; margin: 12px 0 18px; }
+  .feed article { border: 1px solid #d5dce8; border-radius: 10px; padding: 12px; }
+  .feed article h3 { font-size: 15px; margin: 0 0 4px; }
+  .feed article p { margin: 2px 0; color: #56637a; font-size: 13px; }
+  .feed article[hidden] { display: none; }
+  .sentinel { height: 2px; background: #c6cedd; border-radius: 999px; margin: 18px 0 26px; }
+  .searchresults { border: 1px solid #d5dce8; border-radius: 10px; padding: 12px; margin: 12px 0 22px; }
+  .searchresults h2 { font-size: 16px; margin: 0 0 8px; }
+  .searchresults a { color: #0c6b5a; font-size: 14px; display: block; margin: 4px 0; }
+  .searchresults p { color: #56637a; font-size: 13px; margin: 2px 0; }
+  .comment-tree { margin: 10px 0 22px; padding-left: 0; list-style: none; font-size: 14px; }
+  .comment-tree ul { list-style: none; padding-left: 18px; }
+  .comment-tree li { border-left: 2px solid #d5dce8; padding: 4px 0 4px 10px; margin: 4px 0; }
+  footer p { color: #56637a; font-size: 12px; }
+</style>
+</head>
+<body>
+<header>
+  <h1>Fixture feed</h1>
+  <p>The local gallery fixture of the devthink scraping and monitoring recipes: an infinite feed, delayed loads, search results and a nested comment tree.</p>
+</header>
+<main>
+  <section aria-label="Infinite feed">
+    <h2>Feed</h2>
+    <div class="feed" id="feed">
+      <article><h3>Feed card 1</h3><p>The first fixture feed card loads with the page.</p></article>
+      <article><h3>Feed card 2</h3><p>The second fixture feed card loads with the page.</p></article>
+      <article data-delayed="true" hidden><h3>Feed card 3</h3><p>The third fixture feed card loads on its delay timer.</p></article>
+      <article data-delayed="true" hidden><h3>Feed card 4</h3><p>The fourth fixture feed card loads on its delay timer.</p></article>
+    </div>
+    <div class="sentinel" id="sentinel" aria-hidden="true"></div>
+  </section>
+  <section class="searchresults" aria-label="Search results">
+    <h2>Search results</h2>
+    <a href="#feed">Lumen desk lamp — fixture result</a>
+    <p>The result excerpts stay local: no query leaves the page.</p>
+    <a href="#commenttree">Harbor shelf — fixture result</a>
+    <p>Every result anchor resolves inside the same fixture document.</p>
+  </section>
+  <section aria-label="Comments">
+    <h2 id="commenttree">Comments</h2>
+    <ul class="comment-tree">
+      <li>Top comment one
+        <ul>
+          <li>Reply one
+            <ul><li>Deep reply</li></ul>
+          </li>
+          <li>Reply two</li>
+        </ul>
+      </li>
+      <li>Top comment two
+        <ul><li>Reply three</li></ul>
+      </li>
+    </ul>
+  </section>
+</main>
+<footer>
+  <p>Fixture page of the devthink example gallery — local origin https://feed.test, no remote resource, no fetch, no storage, no cookie.</p>
+</footer>
+<script>
+/* The inline behavior of the fixture page: the delay timers reveal the delayed cards, and the
+   intersection of the sentinel with the viewport appends one new feed card per arrival, capped
+   at the reviewed card count so the page never grows unbounded. */
+(function () {
+  "use strict";
+  var feed = document.getElementById("feed");
+  var sentinel = document.getElementById("sentinel");
+  var delayed = document.querySelectorAll("[data-delayed='true']");
+  for (var index = 0; index < delayed.length; index += 1) {
+    (function (card, delay) {
+      window.setTimeout(function () { card.hidden = false; }, delay);
+    }(delayed[index], 600 + index * 500));
+  }
+  var appended = 0;
+  var cap = 6;
+  if (sentinel && "IntersectionObserver" in window) {
+    var observer = new IntersectionObserver(function (entries) {
+      for (var entry = 0; entry < entries.length; entry += 1) {
+        if (!entries[entry].isIntersecting || appended >= cap) continue;
+        appended += 1;
+        var card = document.createElement("article");
+        var heading = document.createElement("h3");
+        heading.textContent = "Appended feed card " + appended;
+        var line = document.createElement("p");
+        line.textContent = "The infinite scroll fixture appended this card locally.";
+        card.append(heading, line);
+        feed.append(card);
+      }
+    }, { rootMargin: "64px" });
+    observer.observe(sentinel);
+  }
+})();
+</script>
+</body>
+</html>