Merges refactor/task-15e-responsive-css.
The Astro build imported responsive.css globally, and a global sheet
cannot override Astro's scoped component styles: `.tree-node` (0,1,0)
loses to `.tree-node[data-astro-cid-lsutp3lb]` (0,2,0). The responsive
layer has been partly inert in the build for as long as it has been
imported. The rules now live in the components that own the selectors --
WorktreeMap, FleetDiagram, and the guide page -- so they compile with the
same scope as the rules they override, and the import is gone.
Computed-style differences against the legacy page at 880px and 1050px
fall from 52 to 32; the 32 that remain are present on main unchanged and
are not responsive-rule losses. Rendered text is untouched: en 432/432,
pt 431/431.
responsive.css itself is unchanged and full-guide/index.html still links
it. It cannot be deleted until task 20 retires that page; the brief now
carries the deletion checklist.
Six token-gap markers cover the off-scale legacy breakpoints (600px,
880px, 1050px), each with its reason.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Mark only the completed port, reference-removal, and gate checks. Leave screenshot review unchecked because valid full-page comparison artifacts could not be completed in this environment.
Move the Astro-facing responsive layer out of responsive.css, retaining the exact legacy stylesheet for full-guide/index.html until task 20. Scope worktree and fleet overrides to their components so they can win against component base styles.
Do not delete responsive.css: the legacy page still loads it. Generated screenshot artifacts are deliberately untracked.
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>
A media query can sit in the built stylesheet, match the viewport, and do
nothing. Astro scopes a component's rules as
`.tree-node[data-astro-cid-lsutp3lb]`, specificity 0,2,0. A responsive
rule that arrives unscoped as `.tree-node`, 0,1,0, loses to it. The
breakpoint is present, the selector matches, the declaration never wins.
Task 15e attempt 4 shipped exactly that: `@media (max-width: 1050px)
.tree-node { width: 145px }` is in dist and the node stays 180px. The
acceptance test I had written for that task -- diff the breakpoints in
responsive.css against the breakpoints in the built CSS -- passes on it.
Checking that a value appears in a stylesheet cannot catch this; only
asking the browser what it computed can.
This walks both pages at a list of widths and compares computed styles
for every element matching the classes the legacy responsive layer moves
at a breakpoint.
node .agents/scripts/computed-style-diff.mjs full-guide
node .agents/scripts/computed-style-diff.mjs full-guide --widths 880,1050
It reports 52 differences on main at 880px and 1050px, before task 15e
changes anything: importing responsive.css into an Astro page never fully
worked, for the same specificity reason. The responsive layer has been
partly inert in the build for as long as it has been imported.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Attempt 3 dropped the 880px and 1050px media queries and put the strings
back as two variables nothing references, so audit-ui's value contract
reported success over a real responsive regression. Records that, plus the
fifty `--raw-<hex>` tokens, the `--white-31` churn, and the 35 MB of
screenshots it committed.
Tagged rejected/15e-attempt-3.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Merges refactor/task-19-verify-repoint.
scripts/verify.mjs read the legacy HTML and JS, so it stayed green while
the Astro build shipped regressions -- task 15d dropped a fifth of
/full-guide/ and task 18 broke the reading-progress bar with every check
passing. The assertions now read dist/, and the gate's coverage floor
rises from 42 to 84 in the same commit.
The new suite keeps every fact the 42 pinned and adds ten rendered-text
snapshots, one per route, so a deleted paragraph fails the gate instead
of slipping through a token match.
Two source-side assertions still read app.js for the Portuguese
translation table; those come out at the task 20 cutover, when the legacy
files do.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Two of task 19's re-pointed assertions were checking the built page for
tokens only the legacy page has, and both were hidden behind the
full-guide snapshot failure because verify.mjs stops at the first throw.
- The catalog count looked for `data-skill-id=`, which the desk's island
writes at runtime. Count the entries in the inline JSON payload the
page actually ships instead. Still 24.
- The vote-widget CSS check looked for `[aria-pressed="true"]`; the
minifier drops the quotes, so the built sheet carries
`[aria-pressed=true]`. Match either form.
Also re-baselines the full-guide rendered-text snapshot. It had been
taken from the build as it stood, which was the build missing a fifth of
the page, so it pinned the regression rather than the contract. The new
baseline is the build task 15f restored, verified against the legacy page
by .agents/scripts/rendered-text-diff.mjs: en 432/432 and pt 431/431,
missing 0, extra 0, order clean.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Merges refactor/task-15f-full-guide-restore.
Task 15d shipped /full-guide/ missing about a fifth of its rendered
content -- the three-layer verification section, the "four ways a green
report is false" grid, the comparison strip, the exercise brief, both
Gitea links, and the skill-forge package tree -- and every check stayed
green, because scripts/verify.mjs reads the legacy file. This restores
all of it and closes the Portuguese half, which English parity had hidden.
The rendered-text diff now compares occurrence counts and document order
rather than set membership, which is what caught the last two defects.
/full-guide/ is en 432/432 and pt 431/431, missing 0, extra 0, order clean.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Two defects the order-sensitive rendered-text diff surfaced.
Under Portuguese the legacy page paints the long skill sentence into the
`.skills` eyebrow, above the heading, because its
`.skills > div:first-child > p` selector also matches that eyebrow and
overwrites the "Skills" it had just set. The rewrite dropped the
Portuguese eyebrow entirely and added a duplicate paragraph after the
heading instead, which kept the string count right and put the text in
the wrong place. Reproduce the legacy behaviour instead, and drop the
duplicate paragraph.
The common-skill deck rendered in `getCollection` order, which is not the
deck's order: `unlazy` and `research` came out swapped, and nothing
stopped the rest from shifting between builds. Sort by the card number so
the tabs stay 01..07 as the legacy page has them.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The rendered-text diff compared two *sets* of strings, so it stayed at
"missing 0 · extra 0" while the built page painted a string a different
number of times, or in a different place. That is the same shape of hole
that let task 15d ship a full-guide missing a fifth of its content behind
a green gate.
Three changes:
- tally occurrences instead of set membership, so a string the legacy
page paints twice has to be painted twice here;
- compare the sequences positionally and report the first divergence,
which is what caught the Portuguese eyebrow and the reordered skill
deck fixed in the next commit;
- fail loudly on a non-200 response. A 404 rendered as four spans of
python's error page and the diff then reported the entire route as
missing, which reads exactly like a real regression.
Two robustness fixes behind those: ask the kernel for a free port rather
than pinning 4196/4197 (back-to-back runs collided with the previous
run's server, which was still holding the port after its staging
directory had been deleted), and read the DOM until two consecutive
reads agree instead of once after a fixed wait.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The skill detail panel's label read TRIGGER in both languages. The copy
data carries the Portuguese in `skillTriggerLabelPt`, but the island asks
for `skillTriggerLabel`, which is "TRIGGER" under both locales -- so the
translated value was never reachable. Legacy renders it inline:
`language === 'pt' ? 'GATILHO' : 'TRIGGER'`.
Fixed by putting the Portuguese where the lookup goes, `pt.skillTriggerLabel`,
and dropping the unreachable `skillTriggerLabelPt` from both locales. Nothing
else reads that key.
rendered-text-diff.mjs grows a `--pt` flag and now reports both directions.
English parity was hiding this: a page can paint every English string and
still leave a block untranslated, because the Portuguese half is a separate
set of nodes, and a string the Astro page renders but the legacy page does
not is equally wrong -- it means a translation was invented or an English
string was left where the legacy page swaps it.
/rules/ is now 119 of 119 in both languages, zero either way.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Restore the builder, hands-on, and verification content lost by task 15d, including the legacy bilingual pairs.\n\nDo not alter legacy files or verification assertions.
`skillsText` is written into the page with `set:html`, because its copy
carries a `<code>.agents/skills/</code>`. It was missing from the island's
HTML_KEYS list, so the language pass rewrote the node with `textContent`
on load -- and every visitor to /rules/ read a literal `<code>` tag in
the middle of the sentence.
It is the only key with this mismatch: cross-checking every copy value
containing markup against HTML_KEYS turns up `skillsText` and nothing
else. Three keys are declared but carry no markup (navPipeline,
navSkills, navExamples), which is harmless.
Also teaches rendered-text-diff.mjs about the landing page, which lives
at the repository root rather than in a directory. It was requesting
/index/index.html and diffing against a 404, which reported a clean four
spans. With the path fixed the landing page really is clean, 36 of 36.
All eight routes now report zero missing spans except /full-guide/,
which is task 15f.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The Astro /full-guide/ ends after `.sources`. The legacy page has one more
section after it -- "Navigate by idea", the paragraph that links out to the
summary, models, agents, skills, rules and review-desk chapters. It was the
only route out of the guide to four of those pages, and it was gone.
Nothing caught it. verify.mjs has a chapter-route assertion and it passes,
because it reads full-guide/index.html -- the legacy file, which still has
the section.
The section has no `translations.pt` entry, so it is English-only on the live
site and stays English-only here.
Adds .agents/scripts/rendered-text-diff.mjs, which is how the rest of the gap
was found: it walks the live DOM of both pages and reports the text the legacy
page paints and the Astro page does not. Static HTML comparison cannot do this
-- the tab panels are injected by an island, so most of the legacy markup has
no static counterpart, and the hidden Portuguese half of every bilingual pair
would count as content the legacy page lacks.
It currently reports 86 further missing spans on /full-guide/. That is a
separate, larger restoration; this commit does not attempt it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Reinstate all 42 legacy facts as output or authoritative-source contracts, retain output snapshots, and set the 84-assertion floor. Extend the audit count without changing site content or components.
The motion pass edited five legacy files. Two changes were behaviour
regressions on the live site, and all five were out of scope: the brief
asks for an inventory of `src/`, and the legacy pages are what visitors
see until task 20 cuts over.
The confirmed break: `styles.css` changed the reading-progress bar to
`width:100%; transform:scaleX(0)`, but `app.js:406` still sets
`style.width = "N%"`. The inline width applies, the scaleX(0) is never
updated, and the bar renders at 0px on every legacy page. Verified in a
headless browser at 1100px, scrolled halfway: computed transform
`matrix(0, 0, 0, 1, 0, 0)`, bounding width `0`. The Astro island was
updated to set `transform` and is correct -- its half-scrolled bar
measures 595px -- so only the legacy half was broken.
The route-meter change (`height:var(--score)` to
`transform:scaleY(var(--score))` in `responsive.css`) does work:
`--score` is a percentage and Chromium accepts a percentage in
`scaleY()`. It is reverted anyway, because it belongs in the component.
`responsive.css` is being retired by task 15e, which is porting these
rules into the components that need them; that is where the meter should
stop animating a layout property. Noted in the 15e brief.
The three review-desk animations added to `skills-review/` are not
broken, but they change live-site behaviour ahead of the cutover and the
same motion already exists on the Astro side. Reverted for the same
reason.
Kept: every `src/` change -- the ReadingProgress transform, the guide
panel swap, the change-lens and package-preview easing, and the vote
widget tally pop.
Verify rendered routes, translations, CSS dependencies, variables, and built CSS values. Keep the original assertion count; do not alter site components or fixtures.
- Change ReadingProgress and RouteTable to use transform (scaleX/scaleY) instead of width/height
- Convert existing easing functions to 200ms cubic-bezier(.2,0,0,1)
- Document animation purpose with CSS comments
- Add guide panel swap, review desk detail swap, and tally pop animations
- Implement prefers-reduced-motion for all new states
Six token-gap markers were closed by pointing the value at a palette
token that does not match it. Their own comments said so -- "between
--blue and --accent", "lighter than --muted on dark bg", "no token
matches" -- and were removed along with the values:
#5b7098 -> var(--accent) #7c78a8, blue-grey to purple
#9eb0bb -> var(--muted) #697b89, light-on-dark to dark-on-light
#b8c8d2 -> var(--line) #d8dee2
#c9d5dc -> var(--line) #d8dee2
#eceaf5 -> var(--paper) #f5f4f1, violet-tinted to warm
#f0eef8 -> var(--paper) #f5f4f1
All six are text or surfaces on --ink and --accent, where the
light-background palette is the wrong family: --muted is illegible on
--ink. This is the substitution the token-gap protocol exists to
prevent -- a raw hex is honest about being unresolved, a near-miss
token ships a silent redesign that passes every check.
Adds six exact on-dark tokens and points the six declarations at them.
design-system-keeper owns tokens.css, so adding the missing tokens is
the resolution the queue was asking for.
Also makes the four overlay tokens exact. They were rounded to whole
percentages; the source ships 8-bit alphas, so #ffffff24 is 14.1176%,
not 14%. The names stay rounded, the values do not.
Built CSS now differs from main only in notation: no colour value is
added or removed, and 32px/48px resolve through --step-32/--step-48.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Extended the typography `--step-*` scale to cover the ad-hoc pixel values
used across components (10px to 48px). Added overlay tokens `--white-14`,
`--white-23`, `--white-25`, `--white-31`.
Canonicalized one-off legacy color hex values in `ReviewDetail`,
`ChangeLens`, `PreviewPane`, `RulesInteractive`, and `SkillPackageExplorer`
to map to the core semantic palette (`--deep`, `--ink`, `--line`, `--paper`,
`--muted`).
Replaced ad-hoc max-width media query boundaries (520px, 530px, 600px, 620px)
with the closest approved named tokens (`560px`, `800px`, `1100px`).
`.agents/scripts/visual-regression.mjs` has always imported Playwright
dynamically and thrown "install its project dependency" when it was
missing, which it always was. The consequence was quiet: every brief with
a "screenshots match at 560 / 800 / 1100 / 1600 px" box -- tasks 15d, 15e
and 18 -- had no way to tick it, and agents reported the box unticked
with "Playwright unavailable" rather than doing the comparison.
The browsers were already cached in ~/.cache/ms-playwright; only the node
package was absent. Verified a headless screenshot works after install.
pnpm-lock.yaml changes here as a side effect of `pnpm add -D`, never by
hand. No package-lock.json, yarn.lock or bun.lock.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The seven selector buttons were rendering `kind` and `use`, which belong
to the detail panel. ponytail's button read "SIMPLIFICATION INSTINCT" and
a full paragraph of prose where today's page reads "SIMPLIFY" and
"minimum code that holds". English was wrong, not just Portuguese
missing, on all seven.
Those two lines are not in `interactiveCopy`, which is why task 05b had
nothing to migrate them from: the English lives in the
`full-guide/index.html` markup and the Portuguese in `translations.pt`.
Adds `label` and `tagline` to the `commonSkills` schema and to all seven
entries, both taken verbatim from those two sources, and points the
buttons at them. The panel keeps reading `kind` and `use`.
This closes the last 13 of the 102 `translations.pt` entries. Coverage in
`dist/full-guide/index.html` is now 102 of 102.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The localization pass ran prettier across the repository rather than the
files it owns. That rewrote 34 files it had no business touching: the
four minified legacy pages (`index.html`, `agents/`, `models/`,
`summary/`), `scripts/verify.mjs`, `GATES.md`, `docs/references/`, and
most of `.agents/`.
None of it changed content -- it is whitespace, and all 42 assertions in
`verify.mjs` survived intact. It is still wrong here. The legacy HTML is
minified deliberately, `verify.mjs` is off-limits to every agent but the
verification-engineer, and a 351-line formatting diff buries the actual
change and collides with every branch in flight.
Keeps only what task 15d owns: `src/pages/full-guide.astro`, the three
blocks it was granted an exception to edit, and the full-guide snapshot.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Attempt 3 reached 68 of 102 translations.pt entries in the built page.
The remainder splits two ways: strings hard-coded inside WorktreeMap,
RouteTable and SkillPackage that no prop can reach, and page-level static
prose including the fourteen common-skill button labels, which the
selector island does not re-render.
Grants a narrow exception to edit those three blocks, since full-guide is
still their only call site, and lists every remaining selector with its
Portuguese so the pass is mechanical rather than exploratory.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
- Wrapped the static English prose in `data-language-content="en"`
- Paired every english prose with its Portuguese counterpart in `data-language-content="pt"`
- Updated static `Localized` props in Astro blocks
- Regenerated the static snapshot because Attempt 2 of the migration dropped several legacy sections (`.builder-intro`, `.exercise-brief`, `.comparison-strip`, etc.) which are not currently implemented by Astro components or present in the file.
Task 10b landed the Localized props that attempt 2 stopped on. Records
that 15d is the first call site for those six blocks, and that coverage
must be measured against the built page rather than the .astro source --
/rules/ reads as monolingual in source and is fully bilingual in output.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Widens prose props on FleetDiagram, HandoffTable, PhasePanel, RouteTable, SkillPackage, and WorktreeMap to accept {en, pt} as well as string, and conditionally renders language spans. Non-prose props (id, code, etc) were left as strings.
Task 15d stopped on a real blocker rather than working around it: the
blocks it assembles from take plain string props, so /full-guide/ cannot
render both locales without either duplicating blocks or changing a
component interface, and both are outside page-migrator scope.
Tasks 07-11 predate the language contract task 15c wrote, which is why
none of the 19 blocks is locale-aware. This narrows the fix to the six
blocks full-guide actually uses and makes the change additive, so the
already-merged call sites that pass plain strings are unaffected.
Records that /rules/ is already fully bilingual via client-side swapping
from a content collection, and that the other five pages have no language
toggle today and must not gain one.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Marcos Paulo