chore: keep SDD evidence untracked
This commit is contained in:
@@ -1,309 +0,0 @@
|
||||
# Task 6 report — approved media integration and presentation
|
||||
|
||||
Status: **DONE**
|
||||
|
||||
Task 6 attaches the exact seven Task 5-approved project/social assets, restores full manifest/content/file reference closure, keeps Footy Tracker text-only because broadcast display rights remain unconfirmed, and fixes two high-impact presentation defects found during real-media inspection.
|
||||
|
||||
## Published reference closure
|
||||
|
||||
The public projection now references exactly the seven newly approved IDs:
|
||||
|
||||
1. `medication-mobile-logs`
|
||||
2. `medication-mobile-data-settings`
|
||||
3. `medication-mobile-notification-settings`
|
||||
4. `opinion-polarization-chart`
|
||||
5. `opinion-final-distribution-chart`
|
||||
6. `currency-converter-interface`
|
||||
7. `social-preview-nightdrive`
|
||||
|
||||
Together with the unchanged eight soundtrack references, public content contains 15 unique references and the public manifest contains the same 15 IDs. `npm run verify:approved-assets` now exits successfully, closing the documented Task 5/Task 6 seven-ID reference boundary.
|
||||
|
||||
- The medication tracker uses the reviewed three-image `portrait-strip` in activity/history, data/synchronization, reminder/notification order.
|
||||
- Opinion Dynamics uses the two reviewed charts in `chart-pair` order. Only the source-supported polarization values (`0 → 0.765`, `14 → 0.932`) are tabulated. No values were inferred from final-distribution pixel positions.
|
||||
- Currency Converter uses the single reviewed interface image.
|
||||
- `social-preview-nightdrive` is the public metadata preview reference.
|
||||
- Footy Tracker retains an empty `assetIds` array and omits `media`/`mediaLayout`. The checklist records the broadcast frame as deliberately omitted because display rights are unconfirmed.
|
||||
|
||||
## TDD evidence
|
||||
|
||||
### Approved content references
|
||||
|
||||
RED:
|
||||
|
||||
```text
|
||||
npm run test:unit -- tests/integration/public-content.test.ts
|
||||
# 1 file failed; 3/3 tests failed
|
||||
# New assertion received medication assetIds: [] instead of the reviewed portrait-strip IDs.
|
||||
# Existing production validation also reported the expected Task 5 boundary:
|
||||
# Unreferenced manifest asset: currency-converter-interface
|
||||
```
|
||||
|
||||
GREEN after attaching the exact reviewed presentations:
|
||||
|
||||
```text
|
||||
npm run test:unit -- tests/integration/public-content.test.ts tests/unit/ProjectMedia.test.ts
|
||||
# 2 files passed; 15/15 tests passed
|
||||
```
|
||||
|
||||
The concrete gallery regression renders the real approved public records and verifies six project stills, intrinsic dimensions, lazy loading, asynchronous decoding, contextual medication descriptions, two visible chart descriptions, and exactly one exact-value table.
|
||||
|
||||
### Cross-task compatibility rulings
|
||||
|
||||
Attaching `socialPreviewAssetId` correctly activated the existing Open Graph image implementation, exposing three stale Task 7-era test assumptions during the first `build:preview` run:
|
||||
|
||||
```text
|
||||
tests/unit/metadata.test.ts expected metadata.openGraph.image to be undefined
|
||||
tests/integration/prerender.test.ts expected zero og:image elements
|
||||
tests/unit/entry-client.test.ts changed assetIds without changing exact media closure
|
||||
```
|
||||
|
||||
The controller extended Task 6 ownership narrowly to those tests. Their assertions now derive the approved preview URL from the manifest, and the entry-client negative fixture mutates the matching presentation and declaration together so it still reaches the intended unmanifested-reference boundary. No Task 7 Twitter, structured-location, metadata production, or artifact-verifier work was pulled forward.
|
||||
|
||||
Task 3's synthetic responsive fixtures also replaced the medication references while retaining the newly referenced approved medication records, creating expected unreferenced-manifest failures. The controller extended ownership narrowly to the two fixture files. They now remove exactly the three superseded medication manifest records before adding synthetic stress records; no unrelated approved record is removed and `validateProductionInputs` remains strict. The mixed-aspect chart assertion is scoped to its synthetic Footy fixture so the new real Opinion pair does not make the locator ambiguous.
|
||||
|
||||
### Real chart and print defects
|
||||
|
||||
Real-media review found that the chart description and value table were both placed in grid row 3 with automatic columns. RED browser evidence at 1440px measured:
|
||||
|
||||
```text
|
||||
description grid column/row: auto / 3
|
||||
table grid column/row: auto / 3
|
||||
description width ratio: 0.510
|
||||
table width ratio: 0.344
|
||||
Opinion article size: 609 × 6010 CSS px
|
||||
```
|
||||
|
||||
The same RED pass found print project figures retaining the screen surface `rgba(15, 28, 43, 0.86)` while print text became dark, making captions and evidence text unreadable.
|
||||
|
||||
The minimal fixes assign the chart description to column 1 / row 3 and the table to column 1 / row 4, and use a white, dark-text project-media surface only in print. GREEN evidence:
|
||||
|
||||
```text
|
||||
npx playwright test tests/browser/media-policy.spec.ts \
|
||||
--project=desktop-chromium --workers=1 --grep "desktop chart|print project"
|
||||
# 2/2 passed
|
||||
|
||||
description/table width ratio: 0.855 each (the full padded content column)
|
||||
Opinion article size: 609 × 2271 CSS px
|
||||
print media background: rgb(255, 255, 255)
|
||||
minimum tested text contrast: at least 4.5:1
|
||||
```
|
||||
|
||||
## Browser policy and failure behavior
|
||||
|
||||
- Six approved project stills render from manifest URLs with exact intrinsic dimensions, `loading="lazy"`, and `decoding="async"`.
|
||||
- No public project video or video source is attached or requested in normal, Static, reduced-motion, or F8 failure modes.
|
||||
- The private medication tracker has no public link.
|
||||
- Aborted project-image requests leave all six image elements, meaningful alt text, medication captions/long descriptions, both chart conclusions, exact values, project titles, and surrounding text in the document.
|
||||
- F8 remains scoped to `video, video source`; approved still figures remain valid during the video-failure scenario.
|
||||
- Visual regression now derives its expected six project stills from public content. No visual baseline was updated because the suite records/asserts live composition rather than accepting changed golden pixels.
|
||||
|
||||
## Visual inspection
|
||||
|
||||
A temporary inspection harness built the real final projection and passed 6/6 cases. It checked six loaded images, no document-level horizontal overflow, figures contained by their articles, text-only Footy, all captions, and failed-image text equivalents, then captured article-level evidence.
|
||||
|
||||
Reviewed states:
|
||||
|
||||
- 1440×900 desktop Static
|
||||
- 320×844 narrow mobile Static
|
||||
- 720 CSS-pixel viewport as the 200%-zoom-equivalent reflow inspection for a 1440px desktop
|
||||
- 390×844 reduced motion
|
||||
- 1440×900 print media
|
||||
- 1440×900 failed-image fallback
|
||||
|
||||
Representative retained artifacts:
|
||||
|
||||
```text
|
||||
/tmp/portfolio-task-6-visual/desktop-static-medication.png
|
||||
/tmp/portfolio-task-6-visual/desktop-static-opinion.png
|
||||
/tmp/portfolio-task-6-visual/desktop-static-currency.png
|
||||
/tmp/portfolio-task-6-visual/mobile-static-medication.png
|
||||
/tmp/portfolio-task-6-visual/mobile-static-opinion.png
|
||||
/tmp/portfolio-task-6-visual/zoom-200-equivalent-medication.png
|
||||
/tmp/portfolio-task-6-visual/zoom-200-equivalent-opinion.png
|
||||
/tmp/portfolio-task-6-visual/mobile-reduced-motion-medication.png
|
||||
/tmp/portfolio-task-6-visual/mobile-reduced-motion-opinion.png
|
||||
/tmp/portfolio-task-6-visual/desktop-print-medication.png
|
||||
/tmp/portfolio-task-6-visual/desktop-print-opinion.png
|
||||
/tmp/portfolio-task-6-visual/failed-image-medication.png
|
||||
/tmp/portfolio-task-6-visual/failed-image-opinion.png
|
||||
```
|
||||
|
||||
Findings after repair:
|
||||
|
||||
- Medication portraits remain uncropped and readable, retain their reviewed order, collapse to a simple single-column sequence on narrow/zoom-equivalent layouts, and fit print pages without overlap.
|
||||
- Opinion charts preserve their full plot pixels, aligned desktop pair, sequential narrow layout, visible variables/trend/conclusion text, and readable exact table. The pathological desktop height and character-width table wrapping are gone.
|
||||
- Currency remains contained at desktop and mobile; its caption and long description explain the workflow rather than colors.
|
||||
- Static and reduced-motion presentations retain identical project evidence and introduce no video behavior.
|
||||
- Print captions, descriptions, and exact tables are dark-on-white and readable; screenshots remain visible and contained.
|
||||
- Failed images reserve their frames and expose contextual alt text while adjacent captions, descriptions, exact values, and project evidence remain readable.
|
||||
- No further high-impact crop, hierarchy, caption, contrast, or overflow defect remained after the two scoped CSS repairs.
|
||||
|
||||
## Privacy and approval integrity
|
||||
|
||||
- No approved media bytes or manifest hashes changed in Task 6.
|
||||
- The medication tracker remains generic, private, URL-free, and described only through fictional/demo media states.
|
||||
- The final-distribution chart contains no inferred exact values.
|
||||
- Footy third-party footage remains unpublished.
|
||||
- The public checklist contains exact approved IDs and the Footy omission decision, with no private source paths.
|
||||
- No private tracker URL, repository path, product name, source mapping, denylist content, source screenshot path, or approval-register path was added to the public projection or tests.
|
||||
|
||||
## Final verification
|
||||
|
||||
```text
|
||||
npm run verify:approved-assets
|
||||
# passed
|
||||
|
||||
npm run test:unit -- tests/integration/public-content.test.ts \
|
||||
tests/unit/ProjectMedia.test.ts tests/unit/content-schemas.test.ts \
|
||||
tests/integration/materialize-empty-asset-set.test.mjs \
|
||||
tests/unit/entry-client.test.ts tests/unit/metadata.test.ts \
|
||||
tests/integration/prerender.test.ts
|
||||
# 7 files passed; 69/69 tests passed
|
||||
|
||||
npm run typecheck
|
||||
# passed
|
||||
|
||||
git diff --check
|
||||
# passed
|
||||
|
||||
npm run build:preview
|
||||
# verify:approved-assets passed
|
||||
# typecheck passed
|
||||
# 49 files passed; 652/652 unit/integration tests passed
|
||||
# client and SSR builds passed
|
||||
# preview prerender and artifact verification passed
|
||||
# transfer budgets passed with no violations
|
||||
|
||||
npx playwright test tests/browser/media-policy.spec.ts \
|
||||
tests/browser/media-failure.spec.ts tests/browser/responsive-layout.spec.ts \
|
||||
tests/browser/accessibility-reflow.spec.ts tests/browser/visual-regression.spec.ts \
|
||||
--project=desktop-chromium --project=mobile-chromium --workers=2
|
||||
# 64 passed; 22 intentionally project/mode-skipped; 0 failed
|
||||
```
|
||||
|
||||
The Playwright commands required normal out-of-sandbox browser-launch approval in this environment; the in-scope commands were rerun through that approved path.
|
||||
|
||||
## Commit scope
|
||||
|
||||
Commit message: `content: integrate approved project evidence`
|
||||
|
||||
The commit contains only the 14 approved implementation/test/checklist files plus this report:
|
||||
|
||||
```text
|
||||
content/public/portfolio-content.json
|
||||
docs/content-approval-checklist.md
|
||||
src/styles/components.css
|
||||
src/styles/print.css
|
||||
tests/browser/accessibility-reflow.spec.ts
|
||||
tests/browser/media-failure.spec.ts
|
||||
tests/browser/media-policy.spec.ts
|
||||
tests/browser/responsive-layout.spec.ts
|
||||
tests/browser/visual-regression.spec.ts
|
||||
tests/integration/prerender.test.ts
|
||||
tests/integration/public-content.test.ts
|
||||
tests/unit/ProjectMedia.test.ts
|
||||
tests/unit/entry-client.test.ts
|
||||
tests/unit/metadata.test.ts
|
||||
.superpowers/sdd/2026-09-04-portfolio-content-seo-media-implementation/task-6-report.md
|
||||
```
|
||||
|
||||
No generated build output, private artifact, temporary inspection harness, screenshot, or unrelated file is staged.
|
||||
|
||||
## Review round 1 — constrained chart prose and print image surfaces
|
||||
|
||||
Status: **DONE**
|
||||
|
||||
Review round 1 identified two remaining rendered-layout problems without changing the approved media, content, reference closure, or Task 7 boundary:
|
||||
|
||||
1. The chart-pair description list inherited the general two-column `dt`/`dd` layout even though each desktop chart card is narrow.
|
||||
2. Print made the figure surface white but allowed the desktop chart image's absolute positioning, forced `!important` dimensions, and dark screen background to remain active.
|
||||
|
||||
### RED evidence
|
||||
|
||||
The strengthened browser regression inspects the actual Opinion chart figures at a 1440px viewport. Before the scoped CSS fixes it reported:
|
||||
|
||||
```text
|
||||
minimum chart-description dd width: 81.671875px (required >= 160px)
|
||||
maximum chart-description height: 768.703125px (required < 600px)
|
||||
print chart-image background: not white
|
||||
maximum rendered/intrinsic aspect error: 2.315647 (required <= 0.02)
|
||||
```
|
||||
|
||||
The width and height assertions exercise the inner definition values rather than only the outer full-width `<dl>`. The print assertion loads both chart assets before enabling print emulation, then compares each rendered box with the intrinsic dimensions declared by the approved manifest-backed image element. This prevents an unloaded lazy image from collapsing to its border box and producing a false aspect result.
|
||||
|
||||
### Minimal implementation
|
||||
|
||||
- Only a chart description inside a desktop `chart-pair` switches to one definition-list column. General and single-media description layouts remain unchanged; the existing narrow-layout rule remains unchanged.
|
||||
- Only print chart-pair figures leave the screen grid treatment. Their image/video element becomes statically positioned, removes the screen `!important` inline/block sizes with equally explicit print overrides, retains intrinsic aspect under the print maximums, and uses a white image surface.
|
||||
- Screen image/caption alignment, chart order, exact value table, mobile stacking, and portrait print containment are unchanged.
|
||||
|
||||
### GREEN metrics and visual evidence
|
||||
|
||||
The focused GREEN run passed both regressions. A separate temporary real-media capture harness (removed after use) recorded:
|
||||
|
||||
```text
|
||||
desktop Opinion article: 608 × 1947.484375 CSS px
|
||||
minimum chart-description dd width: 177.671875px
|
||||
maximum chart-description height: 371.953125px
|
||||
|
||||
print polarization chart: 586 × 457 CSS px
|
||||
print polarization aspect error: 0.0009667
|
||||
print final-distribution chart: 573 × 457 CSS px
|
||||
print final-distribution aspect error: 0.0008891
|
||||
print chart-image backgrounds: rgb(255, 255, 255)
|
||||
|
||||
print medication portraits: 453.125 × 804 CSS px each
|
||||
print medication object-fit: contain
|
||||
```
|
||||
|
||||
Inspected repaired artifacts:
|
||||
|
||||
```text
|
||||
/tmp/portfolio-task-6-visual/review-1-after-desktop-opinion.png
|
||||
/tmp/portfolio-task-6-visual/review-1-after-print-opinion.png
|
||||
/tmp/portfolio-task-6-visual/review-1-after-print-medication.png
|
||||
```
|
||||
|
||||
The desktop Opinion descriptions now read in normal phrase-width lines without mid-word character-column wrapping. The print charts are centered at useful size on white surfaces with no dark letterboxes. Medication's three portrait images remain uncropped, contained, ordered, and readable in print. No further crop, hierarchy, caption, contrast, or overflow defect was found in these reviewed states, and no visual baseline changed.
|
||||
|
||||
### Review-round verification
|
||||
|
||||
```text
|
||||
npx playwright test tests/browser/media-policy.spec.ts \
|
||||
--project=desktop-chromium --workers=1 --grep "desktop chart|print project"
|
||||
# 2/2 passed
|
||||
|
||||
npm run verify:approved-assets
|
||||
# passed; exact 15-ID closure retained
|
||||
|
||||
npm run test:unit -- tests/integration/public-content.test.ts \
|
||||
tests/unit/ProjectMedia.test.ts tests/unit/content-schemas.test.ts \
|
||||
tests/integration/materialize-empty-asset-set.test.mjs \
|
||||
tests/unit/entry-client.test.ts tests/unit/metadata.test.ts \
|
||||
tests/integration/prerender.test.ts
|
||||
# 7 files passed; 69/69 tests passed
|
||||
|
||||
npm run typecheck
|
||||
# passed
|
||||
|
||||
npm run build:preview
|
||||
# verify:approved-assets passed
|
||||
# typecheck passed
|
||||
# 49 files passed; 652/652 unit/integration tests passed
|
||||
# client/SSR builds, prerender, artifact verification, and transfer budgets passed
|
||||
|
||||
npx playwright test tests/browser/media-policy.spec.ts \
|
||||
tests/browser/media-failure.spec.ts tests/browser/responsive-layout.spec.ts \
|
||||
tests/browser/accessibility-reflow.spec.ts tests/browser/visual-regression.spec.ts \
|
||||
--project=desktop-chromium --project=mobile-chromium --workers=2
|
||||
# 64 passed; 22 intentional project/mode skips; 0 failed
|
||||
```
|
||||
|
||||
The Chromium commands used the normal approved out-of-sandbox launch path. Review round 1's separate commit contains only:
|
||||
|
||||
```text
|
||||
src/styles/components.css
|
||||
src/styles/print.css
|
||||
tests/browser/media-policy.spec.ts
|
||||
.superpowers/sdd/2026-09-04-portfolio-content-seo-media-implementation/task-6-report.md
|
||||
```
|
||||
Reference in New Issue
Block a user