docs: 15e attempt 4 ported the rules where they cannot win

The 880px and 1050px media queries are in the built sheet and inert: Astro's scoped `.tree-node[data-astro-cid-...]` outranks a rule ported verbatim as `.tree-node`. Attempt 4 got everything else right and passed the acceptance test in this brief, which was mine to get wrong. Replaces that test with computed-style-diff.mjs, and records the finding it produced: main is already at 52 differences, because importing a global responsive.css into an Astro page never fully worked either. Tagged rejected/15e-attempt-4. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
test: diff computed styles, because a ported rule can be inert
2026-09-06 03:29:28 +00:00 · 2026-09-06 03:29:01 +00:00
2 changed files with 234 additions and 0 deletions
@@ -0,0 +1,171 @@
+#!/usr/bin/env node
+// Compare the *computed* styles of a legacy page against its Astro
+// replacement, at several viewport widths.
+//
+//   node .agents/scripts/computed-style-diff.mjs full-guide
+//   node .agents/scripts/computed-style-diff.mjs full-guide --widths 560,880,1050
+//
+// Why this exists: a ported media query can sit in the built stylesheet,
+// match the viewport, and still do nothing. Astro scopes a component's rules
+// as `.tree-node[data-astro-cid-lsutp3lb]` (specificity 0,2,0); a rule ported
+// verbatim as `.tree-node` (0,1,0) loses to it and never applies. Task 15e
+// attempt 4 shipped exactly that: `@media (max-width: 1050px) .tree-node
+// { width: 145px }` was present in dist and the node stayed 180px wide.
+//
+// Checking that the breakpoint *appears* in the built CSS cannot catch this.
+// Only asking the browser what it actually computed can.
+import { spawn } from 'node:child_process';
+import { cpSync, mkdtempSync, readFileSync, rmSync } from 'node:fs';
+import { createServer } from 'node:net';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { chromium } from 'playwright';
+
+const route = process.argv[2];
+if (!route) {
+  console.error('usage: computed-style-diff.mjs <route> [--widths a,b,c]');
+  process.exit(2);
+}
+
+const widthsArg = process.argv.indexOf('--widths');
+const widths =
+  widthsArg === -1
+    ? [520, 560, 600, 620, 720, 800, 880, 1050, 1100, 1600]
+    : process.argv[widthsArg + 1].split(',').map(Number);
+
+// The selectors worth checking are the ones the responsive layer moves at a
+// breakpoint, so read them out of the legacy stylesheet's @media blocks only.
+// Taking every class in the file buries the signal under generic ones like
+// `.active`, whose state the islands own anyway.
+const responsive = readFileSync(new URL('../../responsive.css', import.meta.url), 'utf8');
+const mediaBlocks = [];
+for (const match of responsive.matchAll(/@media[^{]*\{/g)) {
+  let depth = 0;
+  for (let i = match.index; i < responsive.length; i += 1) {
+    if (responsive[i] === '{') depth += 1;
+    else if (responsive[i] === '}') {
+      depth -= 1;
+      if (depth === 0) {
+        mediaBlocks.push(responsive.slice(match.index + match[0].length, i));
+        break;
+      }
+    }
+  }
+}
+const selectors = [...new Set(mediaBlocks.join('\n').match(/\.[a-z][a-z0-9-]*/g) || [])].sort();
+
+// Properties a responsive rule actually moves. Comparing every property would
+// drown the signal in font stacks and inherited colour.
+const PROPERTIES = [
+  'display',
+  'grid-template-columns',
+  'grid-template-rows',
+  'flex-direction',
+  'width',
+  'height',
+  'max-width',
+  'padding',
+  'margin',
+  'gap',
+  'font-size',
+  'position',
+  'inset',
+  'overflow',
+];
+
+const legacyPath = route === 'index' ? 'index.html' : `${route}/index.html`;
+const astroPath = route === 'index' ? '' : `${route}/`;
+
+const staging = mkdtempSync(join(tmpdir(), 'af-csd-'));
+cpSync('dist', join(staging, 'ai-for-dummies'), { recursive: true });
+
+const freePort = () =>
+  new Promise((resolve, reject) => {
+    const probe = createServer();
+    probe.on('error', reject);
+    probe.listen(0, '127.0.0.1', () => {
+      const { port } = probe.address();
+      probe.close(() => resolve(port));
+    });
+  });
+
+const legacyPort = await freePort();
+const astroPort = await freePort();
+const serve = (dir, port) =>
+  spawn('python3', ['-m', 'http.server', String(port), '-d', dir], { stdio: 'ignore' });
+const servers = [serve('.', legacyPort), serve(staging, astroPort)];
+const stop = () => {
+  servers.forEach((s) => s.kill());
+  rmSync(staging, { recursive: true, force: true });
+};
+
+// Every element matching each selector, so a rule that applies to the first
+// node and not the rest cannot pass.
+const collect = ([selectors, properties]) => {
+  const out = {};
+  for (const selector of selectors) {
+    const nodes = [...document.querySelectorAll(selector)];
+    out[selector] = nodes.map((node) => {
+      const style = getComputedStyle(node);
+      return properties
+        .map((property) => `${property}:${style.getPropertyValue(property)}`)
+        .join(';');
+    });
+  }
+  return out;
+};
+
+let failures = 0;
+try {
+  const browser = await chromium.launch();
+  const read = async (url, width) => {
+    const page = await browser.newPage({ viewport: { width, height: 900 } });
+    const response = await page.goto(url, { waitUntil: 'load' });
+    if (!response || !response.ok()) {
+      throw new Error(`${url} returned ${response ? response.status() : 'no response'}`);
+    }
+    await page.waitForTimeout(1500);
+    const styles = await page.evaluate(collect, [selectors, PROPERTIES]);
+    await page.close();
+    return styles;
+  };
+
+  for (const width of widths) {
+    const legacy = await read(`http://localhost:${legacyPort}/${legacyPath}`, width);
+    const astro = await read(`http://localhost:${astroPort}/ai-for-dummies/${astroPath}`, width);
+
+    for (const selector of selectors) {
+      const before = legacy[selector];
+      const after = astro[selector];
+      if (before.length === 0 && after.length === 0) continue;
+      if (before.length !== after.length) {
+        console.log(
+          `${width}px  ${selector}  legacy ${before.length} nodes, astro ${after.length}`,
+        );
+        failures += 1;
+        continue;
+      }
+      let reported = 0;
+      before.forEach((expected, index) => {
+        if (expected === after[index]) return;
+        failures += 1;
+        // Three examples is enough to identify a rule that did not apply.
+        reported += 1;
+        if (reported > 3) return;
+        const differing = expected
+          .split(';')
+          .filter((pair, i) => pair !== after[index].split(';')[i]);
+        const got = after[index].split(';').filter((pair, i) => pair !== expected.split(';')[i]);
+        console.log(`${width}px  ${selector}[${index}]`);
+        console.log(`   legacy ${differing.join(' ')}`);
+        console.log(`   astro  ${got.join(' ')}`);
+      });
+    }
+  }
+
+  await browser.close();
+  console.log(failures === 0 ? 'computed styles match' : `${failures} computed-style differences`);
+  process.exitCode = failures === 0 ? 0 : 1;
+} finally {
+  stop();
+}
@@ -196,3 +196,66 @@ diff <(grep -oh '(max\|min)-width:[0-9]*px' responsive.css | sort -u) \

 Anything only the legacy page needs may be missing from the built sheet — say
 which, and why, in the final report.
+
+## Attempt 4 rejected: the ported rules are in the sheet and do nothing
+
+Tagged `rejected/15e-attempt-4` (`b6b6200`). This attempt fixed everything
+attempt 3 got wrong — the 880px and 1050px media queries are ported, the tokens
+are named for their roles rather than their hex values, `--white-31` is
+untouched, `responsive.css` is unchanged and still linked by
+`full-guide/index.html`, no `.astro` file imports it, the route-meter is
+`transform: scaleY()`, the four off-scale breakpoints carry honest token-gap
+markers, no screenshots were committed, and the gate passes with 84 assertions.
+The acceptance test in this brief passes on it.
+
+**It is still wrong, and the acceptance test was the problem.**
+
+Astro scopes a component's styles. `WorktreeMap.astro`'s rules compile to
+`.tree-node[data-astro-cid-lsutp3lb] { width: 180px }`, specificity 0,2,0. A
+rule ported verbatim out of `responsive.css` arrives as
+`@media (max-width: 1050px) { .tree-node { width: 145px } }`, specificity 0,1,0.
+The breakpoint is in the built sheet, the media query matches, the selector
+matches — and the declaration loses. At 1050px the node stays 180px wide.
+Measured:
+
+```
+node .agents/scripts/computed-style-diff.mjs full-guide --widths 880,1050
+```
+
+56 differences on attempt 4. Diffing breakpoints between `responsive.css` and
+`dist/_astro/*.css` cannot see any of it, which is my error, not the agent's: I
+wrote that test.
+
+**Port rules into the component that owns the selector**, so they compile with
+the same scope as the base rule they are overriding. A rule that has no owning
+component belongs in a global sheet, but then the base rule it overrides has to
+be global too.
+
+### The baseline is not zero, and that is the real finding
+
+The same command reports **52 differences on `main`**, before this task changes
+anything. `full-guide.astro` currently imports `responsive.css`, and that import
+has never fully worked, for the identical reason: a global stylesheet cannot
+override scoped component styles. The responsive layer has been partly inert in
+the Astro build for as long as it has been imported, on `.tree-node`, `.branch`,
+`.worker-card`, `.tree-stage`, `.tree-lab`, `.hero`, `.fleet`, `.chapter-links`
+and more.
+
+So this task is not "keep parity". Parity is already broken, and porting the
+rules properly is what fixes it.
+
+### Acceptance, restated again
+
+```
+node .agents/scripts/computed-style-diff.mjs full-guide
+```
+
+- Must report **fewer than 52** differences at 880px and 1050px — that is the
+  `main` baseline, and anything above it is a regression.
+- Drive it to **zero** where you can. Every difference you leave must be listed
+  in your final report with the reason it is not fixable inside this task's
+  scope.
+- Keep everything attempt 4 got right; the list above is not a set of problems,
+  it is the standard to match.
+- The breakpoint diff against the built CSS stays as a _necessary_ check. It is
+  no longer a _sufficient_ one.