Queue-North-Website/docs/qa/ClaudeQAPlan.md

160 lines
7.4 KiB
Markdown
Raw Permalink Normal View History

docs: adopt project template, retire the markdown backlog This repository is the one the template's README describes: 205 issues, zero milestones, and severity labels spelled "P0 Critical" / "P1 High" / "P2 Medium", which privacyllc.dev reports as NOT ADOPTED rather than as 87% complete. Six markdown records described the same work and none pointed at the tracker. Two of them said the project was in "Phase 5" while the code was at 0.9.3. Migrated, then deleted in this commit: FUTURE.md -> docs/history/BATCH_LEDGER.md (Archived). Its open items were all already filed as issues, so nothing needed migrating into the tracker HISTORY.md -> docs/history/DEVELOPMENT_LOG.md, verbatim, 0 lines lost DEVELOPMENT_LOG.md -> the same file, as a second labelled block. Not interleaved: the changelog has three duplicated version headings, so one date order would have implied more than the record supports PROJECT.md -> docs/planning/PROJECT_PLAN.md STRUCTURE.md -> the agent pipeline into README.md; its versioning rules retired BUILD_SUMMARY.md -> BATCH_LEDGER.md. Its embedded SQL schema deliberately NOT carried: it predated the UNIQUE constraint on leads.email, and server/index.js owns the schema SCRIPTS.md -> docs/TOOLS.md, corrected for the SSR + prerender build Moved with history (git detects all four as renames): OVERHAUL_PLAN.md, review.md, project-requirements.md, docs/zoho-setup.md Kept because this project earned them: the five-agent pipeline, the design system in OVERHAUL_PLAN.md (Status: Current, with a front-note saying which half is history), the positioning argument in REDESIGN_REVIEW.md, and REQUIREMENTS.md whole, including its change policy. Deleted from the template because they do not apply, each said out loud in DOC_TRUST_MAP.md: QA pass I (no money moves), the authorisation checklist group and the session-token row (no accounts, no sessions), and one PRECAUTIONARY paragraph in SECURITY.md about holding credentials on behalf of users — there are none, and PROJECT_PLAN.md records accounts as out of scope. Pass H was kept and rewritten: its authorisation half does not apply, its what-a-stranger-can- reach half is the most exposed surface here. Also removed: main.js, the old static site's hash router, referenced by nothing and preserved in .drop/; and test-results/.last-run.json, a May Playwright artifact reading {"status":"failed"} for a suite that does not exist. The repository was made private on Forgejo before this commit. That is what let the internal history be committed rather than exempted — null/fruit-fall is already private and reports normally. Two defects found on the way in and fixed here: zoho-setup.md told admins to edit `server/zoho/`, a directory that has never existed in any commit (the mapping is in server/index.js), and README.md's route list still advertised /8x8, removed at 0.6.6, while omitting /privacy-policy. Branding: icon.webp and logo.webp converted from this project's own marks in assets/. banner.webp is absent and is filed as an issue rather than faked. Verified: verify.sh 3/3, doc-claims 71 claimed paths all present, backup and a first-ever restore of the live leads database (2 tables, 3 rows, under 1s). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-18 01:19:02 -05:00
# Claude QA Plan — Queue North Website
```
Status: Current
Owner: _null
Last reviewed: 2026-08-18
Governs: what a QA round consists of
Review trigger: Any new user-facing surface, or a defect class that got through
```
> The playbook. What a round *is*, so two rounds are comparable and a gap is
> visible rather than assumed covered.
## Before a round
- Build from a clean checkout at a known SHA, and record that SHA.
- Run from a detached worktree if other work is in flight, so uncommitted
changes cannot contaminate what is under test.
- Note the environment: device, OS version, browser, screen size — whatever the
product's behaviour actually depends on.
## The passes
Each pass gets a letter, so `ClaudeQACoverage.md` can report per pass and a
skipped one is visible.
| Pass | What it covers |
| --- | --- |
| A | First run: install or load, cold start, permissions, empty states |
| B | The core flow, end to end, as a real user would do it |
| C | The core flow with things going wrong: no network, denied permission, invalid input |
| D | Persistence: quit and return, background and resume, restart |
| E | The end of the loop — the state that is hardest to reach on purpose |
| F | Accessibility: keyboard only, screen reader labels, contrast, text scaling |
| G | Performance under the load this product will actually see |
| H | Abuse, and what a stranger can reach — **rewritten for this project, see below** |
<Add, remove and rename to fit. A pass that never applies is noise; a pass that
is always skipped is a lie.>
### Why H is separate from B, here
The template's pass H is about authorization: authenticated is not owning, and
owning is not permitted. **None of that applies to this project** — there is no
login, no session, no role and no per-user row. Every one of those checks would
be a box ticked against nothing.
What does apply is the other half, and it is the most exposed thing here: two
unauthenticated `POST` endpoints that write to a database, on a public origin,
behind nothing but a rate limiter and a reCAPTCHA score. Pass B submits those
forms as a real visitor would. Pass H is somebody who is not being polite:
- both endpoints called directly, off the form, with hand-made payloads
- the rate limiter driven past `RATE_LIMIT_PER_MINUTE`, and the 429 body read
- the honeypot field and the reCAPTCHA path bypassed deliberately
- the 1 MB body limit and the 30 s request timeout tripped on purpose
- a duplicate email driven into the 409, to confirm the Zoho forward still fires
- **`dist/` inspected** — `VITE_RECAPTCHA_SITE_KEY` is inlined into the bundle at
build time, which is correct for a *site* key and catastrophic for a secret
one. `scripts/secrets.sh --built dist/` is the mechanical half of this
`scripts/preflight.sh` covers headers and TLS and nothing else. Its `--auth`
checks stay off: there is no login to rate-limit and no account to enumerate.
**Pass I — money flowing backwards — is deleted from this plan rather than
carried as skipped.** No money moves through this site: no checkout, no
subscription, no refund path. A pass that never applies is noise, and one that is
always skipped is a lie.
fix(ui): header CTA clipped at iPad portrait, and reCAPTCHA cut off at 320px Two real defects, found by rendering the site rather than reading it. Neither was among the twenty issues filed for Batches 10 and 11. #214 (P1) — at exactly 768px, iPad portrait, the header's "Request Consultation" CTA measured x 676-778 against a 768px viewport: 10px sliced off, with no scrollbar to reveal it because html/body carry overflow-x:hidden. At that width the burger menu is already hidden, so the primary conversion action was simply unreachable. The nav's five gap-6 gaps were the slack; gap-4 at md (gap-6 from lg) frees 40px, keeping the CTA on screen at md rather than deferring it to lg and leaving 768-1023px with no CTA at all. #215 (P2) — Google's reCAPTCHA checkbox iframe is a fixed 304px that cannot be resized. At 320px it measured x 41-345, so 25px of branding and the privacy and terms links were clipped. Scaled to 0.85 below 360px with the wrapper height reduced to match, since transform does not affect layout and the form would otherwise gain dead space. Also adds scripts/qa-browser.mjs, which found them. It measures horizontal scroll, broken images, elements past the right edge, CLS and LCP across pages and viewports. Written because seven of the ten issues in Batches 10 and 11 misstated their own evidence, and two of those would have made the site worse if actioned. Two false positives in the tool itself, both fixed before trusting it: - Lazy images below the fold read as broken. It now scrolls the page AND chases each un-loaded image individually, and reports observed HTTP failures apart from never-rendered images. - `--paths / --viewports 320` swallowed "320" as a path. Argument collection now stops at the next flag. Verified against a local production build: 5 paths x 5 viewports, zero findings. Before the fix the same run reported the CTA overflow at 768 on four pages and the reCAPTCHA overflow at 320 on /contact. Not yet live — this needs a release and a deploy. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-18 04:05:37 -05:00
## Measure it before you file it
Batches 10 and 11 were twenty UI and accessibility issues written from reading
source. **Seven of ten misstated their own evidence** — two contrast figures
were wrong, one proposed a colour measuring 1.96:1 against the background it
would sit on, one asked for a change that would have spread a Level A failure,
one described a clipping ancestor that does not exist, one an overlap that is a
12px gap, one an attribute that is not in the file.
None of that was carelessness about *whether* something was wrong. It was
confidence about *how much*, without measuring.
So, before filing a UI defect and before acting on one:
```bash
node scripts/qa-browser.mjs # production, every page in its sitemap, four widths
fix(ui): header CTA clipped at iPad portrait, and reCAPTCHA cut off at 320px Two real defects, found by rendering the site rather than reading it. Neither was among the twenty issues filed for Batches 10 and 11. #214 (P1) — at exactly 768px, iPad portrait, the header's "Request Consultation" CTA measured x 676-778 against a 768px viewport: 10px sliced off, with no scrollbar to reveal it because html/body carry overflow-x:hidden. At that width the burger menu is already hidden, so the primary conversion action was simply unreachable. The nav's five gap-6 gaps were the slack; gap-4 at md (gap-6 from lg) frees 40px, keeping the CTA on screen at md rather than deferring it to lg and leaving 768-1023px with no CTA at all. #215 (P2) — Google's reCAPTCHA checkbox iframe is a fixed 304px that cannot be resized. At 320px it measured x 41-345, so 25px of branding and the privacy and terms links were clipped. Scaled to 0.85 below 360px with the wrapper height reduced to match, since transform does not affect layout and the form would otherwise gain dead space. Also adds scripts/qa-browser.mjs, which found them. It measures horizontal scroll, broken images, elements past the right edge, CLS and LCP across pages and viewports. Written because seven of the ten issues in Batches 10 and 11 misstated their own evidence, and two of those would have made the site worse if actioned. Two false positives in the tool itself, both fixed before trusting it: - Lazy images below the fold read as broken. It now scrolls the page AND chases each un-loaded image individually, and reports observed HTTP failures apart from never-rendered images. - `--paths / --viewports 320` swallowed "320" as a path. Argument collection now stops at the next flag. Verified against a local production build: 5 paths x 5 viewports, zero findings. Before the fix the same run reported the CTA overflow at 768 on four pages and the reCAPTCHA overflow at 320 on /contact. Not yet live — this needs a release and a deploy. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-18 04:05:37 -05:00
node scripts/qa-browser.mjs --url http://localhost:3099 --viewports 320,768
fix(ui): header, Cisco logo and tap targets, found by rendering on devices Every page on ten emulated phones and tablets: 190 loads, 21 blocking and 530 high findings, on pages that had passed Batch 11 and Batch 16. #214 was fixed in v0.9.5 and released still broken. The check was a desktop window sized to 768, which has a scrollbar, so the layout viewport was ~753px and the md breakpoint the fix was about never engaged. At a true 768 the brand, six nav links and the CTA want 787px against 736px of container, so no amount of gap tightening closes it. The desktop row now starts at lg, and 768 to 1023 gets the Sheet menu, which is the better tablet experience regardless: 44px rows instead of 17px ones, and submenus that do not depend on hover. The CTA takes shrink-0 and whitespace-nowrap, so the next row that does not fit overflows visibly instead of being squeezed past the edge while the total still measures as fitting. The Cisco mark fills 66% of its 700x700 canvas, so both tiles scaled it up inside overflow-hidden and cut 13px off the trademark on / and 24px on /about. Cropping the viewBox to the artwork renders it at 62x46 on /, the same size as the 8x8 logo beside it, unscaled and unclipped. 491 standalone links were 17 to 26px tall. .tap-target grows the hit box and takes it back out of the layout, and every list using it moves to space-y-4: at space-y-2 neighbouring boxes overlap and measure 33px while not being there. Footer links also take block, so the row is the target. A 39x36 word is judged as a compact target wanting 44px; a 200x36 row wants 32. scripts/device-sweep.mjs and scripts/lib/css-audit.js are the instrument. They stay out of verify.sh: playwright is global here and the sweep needs a running server, and a guard that cannot run on a clean clone is one that gets skipped. After the fixes: zero blocking, zero high across all ten devices. Each defect was then re-introduced and reported again (clipped x1, media_overflow x1, past_viewport x19, touch_target x342). closes #238 closes #239 closes #240 closes #241 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-10 07:09:32 -05:00
node scripts/device-sweep.mjs # every page, ten emulated phones and tablets
fix(ui): header CTA clipped at iPad portrait, and reCAPTCHA cut off at 320px Two real defects, found by rendering the site rather than reading it. Neither was among the twenty issues filed for Batches 10 and 11. #214 (P1) — at exactly 768px, iPad portrait, the header's "Request Consultation" CTA measured x 676-778 against a 768px viewport: 10px sliced off, with no scrollbar to reveal it because html/body carry overflow-x:hidden. At that width the burger menu is already hidden, so the primary conversion action was simply unreachable. The nav's five gap-6 gaps were the slack; gap-4 at md (gap-6 from lg) frees 40px, keeping the CTA on screen at md rather than deferring it to lg and leaving 768-1023px with no CTA at all. #215 (P2) — Google's reCAPTCHA checkbox iframe is a fixed 304px that cannot be resized. At 320px it measured x 41-345, so 25px of branding and the privacy and terms links were clipped. Scaled to 0.85 below 360px with the wrapper height reduced to match, since transform does not affect layout and the form would otherwise gain dead space. Also adds scripts/qa-browser.mjs, which found them. It measures horizontal scroll, broken images, elements past the right edge, CLS and LCP across pages and viewports. Written because seven of the ten issues in Batches 10 and 11 misstated their own evidence, and two of those would have made the site worse if actioned. Two false positives in the tool itself, both fixed before trusting it: - Lazy images below the fold read as broken. It now scrolls the page AND chases each un-loaded image individually, and reports observed HTTP failures apart from never-rendered images. - `--paths / --viewports 320` swallowed "320" as a path. Argument collection now stops at the next flag. Verified against a local production build: 5 paths x 5 viewports, zero findings. Before the fix the same run reported the CTA overflow at 768 on four pages and the reCAPTCHA overflow at 320 on /contact. Not yet live — this needs a release and a deploy. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-18 04:05:37 -05:00
```
Contrast is arithmetic — composite the colour over its background and compute
the ratio, do not judge it by eye. Overlap is two rectangles. "Does it clip" is
a computed style you can read off the ancestors. A filed defect's numbers are a
claim to check, not a measurement.
fix(ui): header, Cisco logo and tap targets, found by rendering on devices Every page on ten emulated phones and tablets: 190 loads, 21 blocking and 530 high findings, on pages that had passed Batch 11 and Batch 16. #214 was fixed in v0.9.5 and released still broken. The check was a desktop window sized to 768, which has a scrollbar, so the layout viewport was ~753px and the md breakpoint the fix was about never engaged. At a true 768 the brand, six nav links and the CTA want 787px against 736px of container, so no amount of gap tightening closes it. The desktop row now starts at lg, and 768 to 1023 gets the Sheet menu, which is the better tablet experience regardless: 44px rows instead of 17px ones, and submenus that do not depend on hover. The CTA takes shrink-0 and whitespace-nowrap, so the next row that does not fit overflows visibly instead of being squeezed past the edge while the total still measures as fitting. The Cisco mark fills 66% of its 700x700 canvas, so both tiles scaled it up inside overflow-hidden and cut 13px off the trademark on / and 24px on /about. Cropping the viewBox to the artwork renders it at 62x46 on /, the same size as the 8x8 logo beside it, unscaled and unclipped. 491 standalone links were 17 to 26px tall. .tap-target grows the hit box and takes it back out of the layout, and every list using it moves to space-y-4: at space-y-2 neighbouring boxes overlap and measure 33px while not being there. Footer links also take block, so the row is the target. A 39x36 word is judged as a compact target wanting 44px; a 200x36 row wants 32. scripts/device-sweep.mjs and scripts/lib/css-audit.js are the instrument. They stay out of verify.sh: playwright is global here and the sweep needs a running server, and a guard that cannot run on a clean clone is one that gets skipped. After the fixes: zero blocking, zero high across all ten devices. Each defect was then re-introduced and reported again (clipped x1, media_overflow x1, past_viewport x19, touch_target x342). closes #238 closes #239 closes #240 closes #241 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-10 07:09:32 -05:00
### A resized desktop window is not a device (added 2026-09-10)
Two defect classes reached production through a QA round that looked thorough,
and both were invisible to the instrument being used.
**A window sized to 768 is not 768.** It has a scrollbar, so the layout viewport
is about 753, so the `md` breakpoint never engages and the desktop layout the
check is about is never on screen. That is how #214, the header CTA clipped at
iPad portrait, was fixed, checked at "768", released, and was still 25px past
fix(ui): header, Cisco logo and tap targets, found by rendering on devices Every page on ten emulated phones and tablets: 190 loads, 21 blocking and 530 high findings, on pages that had passed Batch 11 and Batch 16. #214 was fixed in v0.9.5 and released still broken. The check was a desktop window sized to 768, which has a scrollbar, so the layout viewport was ~753px and the md breakpoint the fix was about never engaged. At a true 768 the brand, six nav links and the CTA want 787px against 736px of container, so no amount of gap tightening closes it. The desktop row now starts at lg, and 768 to 1023 gets the Sheet menu, which is the better tablet experience regardless: 44px rows instead of 17px ones, and submenus that do not depend on hover. The CTA takes shrink-0 and whitespace-nowrap, so the next row that does not fit overflows visibly instead of being squeezed past the edge while the total still measures as fitting. The Cisco mark fills 66% of its 700x700 canvas, so both tiles scaled it up inside overflow-hidden and cut 13px off the trademark on / and 24px on /about. Cropping the viewBox to the artwork renders it at 62x46 on /, the same size as the 8x8 logo beside it, unscaled and unclipped. 491 standalone links were 17 to 26px tall. .tap-target grows the hit box and takes it back out of the layout, and every list using it moves to space-y-4: at space-y-2 neighbouring boxes overlap and measure 33px while not being there. Footer links also take block, so the row is the target. A 39x36 word is judged as a compact target wanting 44px; a 200x36 row wants 32. scripts/device-sweep.mjs and scripts/lib/css-audit.js are the instrument. They stay out of verify.sh: playwright is global here and the sweep needs a running server, and a guard that cannot run on a clean clone is one that gets skipped. After the fixes: zero blocking, zero high across all ten devices. Each defect was then re-introduced and reported again (clipped x1, media_overflow x1, past_viewport x19, touch_target x342). closes #238 closes #239 closes #240 closes #241 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-10 07:09:32 -05:00
the right edge on every page. A device profile has no scrollbar inset. Check a
breakpoint on a device, or on an emulated one; never on a window you dragged.
**`document.scrollWidth` is not evidence of fitting.** This site's `body`
carries `overflow-x: hidden`, so content sliced off the right edge leaves
`scrollWidth === innerWidth` and no scrollbar to hint at it. Compare a box
against its nearest **clipping** ancestor, which is what
`scripts/lib/css-audit.js` does. The first sweep found 21 blocking and 530 high
findings on pages that had passed every earlier round.
Touch targets are the other class that got through, for a related reason: a
17px-tall footer link is fine to click and fiddly to tap, and nothing in a
desktop pass distinguishes them. The rule that came out of it is in
`design/OVERHAUL_PLAN.md` under Tap targets.
docs: adopt project template, retire the markdown backlog This repository is the one the template's README describes: 205 issues, zero milestones, and severity labels spelled "P0 Critical" / "P1 High" / "P2 Medium", which privacyllc.dev reports as NOT ADOPTED rather than as 87% complete. Six markdown records described the same work and none pointed at the tracker. Two of them said the project was in "Phase 5" while the code was at 0.9.3. Migrated, then deleted in this commit: FUTURE.md -> docs/history/BATCH_LEDGER.md (Archived). Its open items were all already filed as issues, so nothing needed migrating into the tracker HISTORY.md -> docs/history/DEVELOPMENT_LOG.md, verbatim, 0 lines lost DEVELOPMENT_LOG.md -> the same file, as a second labelled block. Not interleaved: the changelog has three duplicated version headings, so one date order would have implied more than the record supports PROJECT.md -> docs/planning/PROJECT_PLAN.md STRUCTURE.md -> the agent pipeline into README.md; its versioning rules retired BUILD_SUMMARY.md -> BATCH_LEDGER.md. Its embedded SQL schema deliberately NOT carried: it predated the UNIQUE constraint on leads.email, and server/index.js owns the schema SCRIPTS.md -> docs/TOOLS.md, corrected for the SSR + prerender build Moved with history (git detects all four as renames): OVERHAUL_PLAN.md, review.md, project-requirements.md, docs/zoho-setup.md Kept because this project earned them: the five-agent pipeline, the design system in OVERHAUL_PLAN.md (Status: Current, with a front-note saying which half is history), the positioning argument in REDESIGN_REVIEW.md, and REQUIREMENTS.md whole, including its change policy. Deleted from the template because they do not apply, each said out loud in DOC_TRUST_MAP.md: QA pass I (no money moves), the authorisation checklist group and the session-token row (no accounts, no sessions), and one PRECAUTIONARY paragraph in SECURITY.md about holding credentials on behalf of users — there are none, and PROJECT_PLAN.md records accounts as out of scope. Pass H was kept and rewritten: its authorisation half does not apply, its what-a-stranger-can- reach half is the most exposed surface here. Also removed: main.js, the old static site's hash router, referenced by nothing and preserved in .drop/; and test-results/.last-run.json, a May Playwright artifact reading {"status":"failed"} for a suite that does not exist. The repository was made private on Forgejo before this commit. That is what let the internal history be committed rather than exempted — null/fruit-fall is already private and reports normally. Two defects found on the way in and fixed here: zoho-setup.md told admins to edit `server/zoho/`, a directory that has never existed in any commit (the mapping is in server/index.js), and README.md's route list still advertised /8x8, removed at 0.6.6, while omitting /privacy-policy. Branding: icon.webp and logo.webp converted from this project's own marks in assets/. banner.webp is absent and is filed as an issue rather than faked. Verified: verify.sh 3/3, doc-claims 71 claimed paths all present, backup and a first-ever restore of the live leads database (2 tables, 3 rows, under 1s). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-18 01:19:02 -05:00
## What counts as a finding
A finding needs: what was done, what happened, what should have happened, and
the build SHA. Without the SHA it cannot be re-tested, and a finding that cannot
be re-tested cannot be closed.
## Severity
Findings are filed as issues, labelled:
- **P0** — ships broken, or loses data
- **P1** — materially wrong, but shippable
- **P2** — cosmetic or low impact
- **release-blocker** — a release built today would be wrong rather than merely
incomplete
Exactly these label names: the Command Center queries them by name, and a
repository that spells them differently has its defects reported as *not
adopted* rather than counted wrongly. This one did, until 2026-08-18 — the labels
read `P0 Critical`, `P1 High` and `P2 Medium`, and 205 issues reported as *not
adopted* rather than as 87% complete.
**Do not use `P3`.** It exists on 21 closed issues from before the convention and
is frozen. It is not one of the four names anything queries, so a defect filed
`P3` today is counted by nothing.
Severity is what it costs, not how annoying it is to fix.
## After a round
File each finding as a labelled issue. Update `ClaudeReport.md`'s run-state
block and its overall sentence, and `ClaudeQACoverage.md` with what each pass
actually reached. A pass that could
not be run is recorded as blocked, with what blocks it — never quietly left out,
which reads identically to "passed".
Then **push, and reconcile**. The verdict on the project screen at
privacyllc.dev is read out of `ClaudeReport.md` in the pushed repository, so a
round whose report is committed but not pushed — or pushed but not reconciled —
leaves a stakeholder reading the previous round's judgment with no indication
that a newer one exists. The rest of the cycle is in `docs/WORK_CYCLE.md`.