# Phase 5D — portfolio media and evidence refresh

Implemented locally on 27 October 2026 in `personal-os/apps/main`. No commit, push, deployment, Vercel change, dependency installation, upstream source edit or production-data mutation was performed.

This extends the previous Phase 5 work: existing case-study routes, technical explanations, pinned source links, known failure disclosures, screenshot viewers and pagination are retained. Five real product recordings and 68 consistent new screenshots now complement that evidence. Fresh authenticated PixShare capture remains blocked; the genuine prior release upload capture remains explicitly historical.

## 1. Screenshot inventory

Every basename below has an original `-desktop.png` at **1440 × 1000** and `-mobile.png` at **390 × 844**, DPR 1, light mode, UTC, reduced motion. Originals are in `docs/phase5d/captures/<project>/`; public lossless versions are at `apps/main/public/evidence/phase5d/<project>/<basename>-<viewport>.webp`. Each screenshot is captured from a functioning application, without mocked API responses or authentication bypasses.

| Project | Fresh captured states | Screenshots |
| --- | --- | ---: |
| Vigil / Flow | `overview`, `reconciliation`, `settlement-inspection`, `exceptions`, `controls`, `workers` | 12 |
| FATS | `dashboard`, `applications`, `details`, `updated`, `interview-preparation`, `interviews`, `resumes`, `offers`, `pdf-tools` | 18 |
| abox Hospital | `overview`, `patients`, `appointments`, `queue`, `billing`, `billing-paid` | 12 |
| PixShare | `home`, `gallery`, `details`, `filtered`, `upload-prerequisite`, `management-prerequisite` | 12 |
| Marcus | `lesson`, `lesson-feedback`, `practice`, `play-start`, `play`, `review`, `evaluation` | 14 |

Flow runs the real synthetic ingestion, processor/bank interpretation and reconciliation provisioner against isolated PostgreSQL. Its UI remains read-only; no invented “run reconciliation” interaction appears. Matched/unmatched outcomes, accepted risk and independent UNKNOWN completeness remain distinct. FATS uses a fresh guest workspace and fictional job/interview, including a status change verified after reload. abox uses genuine cookie sessions, fictional patients and persisted billing. PixShare uses bundled original photographs and a real local API/PostgreSQL. Marcus captures its real public deployment, actual lesson feedback and a legal Stockfish reply; progress remains browser-local.

FATS’s prior Sidekick, scanner-refusal and full authenticated Offer Desk screenshots are labeled historical; fresh resume and offer screenshots show their genuine account prerequisites. Existing PDF editor/v2/prototype evidence remains secondary and retains its development labels and failure disclosures. abox’s prior consultation image is labeled separately. PixShare’s previous genuine Clerk upload screenshot retains its historical label and existing avatar mask. Historical media has not been reclassified as newly executed coverage.

`captures/*.json` record routes, dimensions, readiness outcomes and zero observed horizontal overflow for all 68 final application screenshots. `source-revisions.json` records discovered repository paths, revisions and existing build IDs. Cached API image IDs are in setup receipts. Pinned technical references deliberately remain pinned to their earlier reviewed revisions rather than implying that a full upstream re-verification occurred. An unrelated untracked Flow D2A report appeared during the task and was left untouched.

## 2. Original recordings and optimized videos

Original paths below are relative to `docs/phase5d/captures/`. Optimized paths are relative to `apps/main/public/evidence/phase5d/`.

| Project | Preserved original | Optimized recording | Duration | Original → optimized bytes |
| --- | --- | --- | ---: | ---: |
| Vigil / Flow | `flow/original/flow-desktop.webm` | `flow/demo.mp4` | 21.24 s | 1,885,919 → 542,451 |
| FATS | `fats/original/fats-desktop.webm` | `fats/demo.mp4` | 25.64 s | 2,150,340 → 808,790 |
| abox Hospital | `hospital/original/hospital-desktop.webm` | `hospital/demo.mp4` | 19.64 s | 1,593,597 → 478,313 |
| PixShare | `pixshare/original/pixshare-desktop.webm` | `pixshare/demo.mp4` | 23.36 s | 1,579,277 → 544,998 |
| Marcus | `marcus/original/marcus-desktop.webm` | `marcus/demo.mp4` | 23.72 s | 1,811,589 → 505,120 |

These are continuous Playwright recordings. FFmpeg removes only the initial 0.4-second navigation, strips audio, and encodes H.264/MP4 at 24 fps, CRF 28, with fast-start metadata. No scenes are invented, composited, accelerated or reordered. abox’s 19.64-second recording is approximately the 20-second target. All failed/replaced recordings remain under `docs/phase5d/attempts/`, outside public assets; they are not presented as final evidence. Generated byte-identical Playwright/saveAs duplicates were removed while keeping the named originals.

Every public `poster.webp` comes from a real frame of its recording, resized to 960px and encoded at WebP quality 85. FATS uses the 4-second frame; other posters use 1.5 seconds. Posters total **164,172 bytes**. Public assets have SHA-256/byte receipts in `public-asset-manifest.json`; the source-to-optimized mapping is `captures/media-manifest.json`.

## 3. Capture infrastructure and reproduction

Reusable code is in `apps/main/scripts/media/`:

- `capture.mjs`: existing installed Playwright, consistent viewports, fresh contexts, optional video, fonts/image readiness, `aria-busy` and local-state restoration checks, deterministic names, sanitized failure receipts and HTTP diagnostics. Existing output directories are refused. Three-second reading beats occur only after readiness; they do not replace ready-state assertions.
- `flow.mjs`: original synthetic simulator inputs/seeds 71200 and 71201; migrated disposable PostgreSQL; original provisioner and existing production frontend.
- `fats.mjs`: unchanged production build; actual guest forms/local storage; status reload assertion, fictional interview and explicit account prerequisites; AI remains off.
- `hospital.mjs`: existing standalone frontend and cached abox Phase 3A API; disposable migrated PostgreSQL 17, generated credentials kept out of artifacts, real cookie login and payment reload assertion. Its compiled loopback API address forwards to the actual isolated API, without response mocks.
- `pixshare.mjs`: current standalone frontend, cached release API and disposable PostgreSQL 18; original bundled seed/photos; genuine filtering, details and authentication prerequisites.
- `public.mjs`: source-confirmed Marcus routes and real engine interaction; public PixShare gallery verification. Every non-read production HTTP method is blocked.
- `optimize.mjs`: lossless full-resolution screenshots, authentic poster frames, preserved originals and MP4 optimization using already installed Sharp/FFmpeg.
- `prepare-pixshare-auth.mjs` and `pixshare-auth.mjs`: optional unchanged temporary HEAD build and genuine dedicated Clerk-development capture attempt. They validate test keys/account naming and never fake sessions or create users. The external development session remains unavailable in this run; these files do not establish successful authenticated coverage.

Source paths were discovered as sibling repositories (`flow`, `ats`, `hospitalProject`, `PixShare`, `marcus`). Override `SOURCE_ROOT` if their parent directory differs. Required production builds, installed browser tooling, system Chromium, Docker access, cached images and FFmpeg must already exist. No install or image pull is performed. Docker networks/databases are newly created, loopback-bound where published, and cleaned up by the owning adapter. Production data is never seeded.

Run from the repository root, with a **new** output directory for every run:

```sh
export CAPTURE_OUTPUT=/tmp/portfolio-media-new-run
export CAPTURE_VIDEO=1
node apps/main/scripts/media/fats.mjs
node apps/main/scripts/media/hospital.mjs
node apps/main/scripts/media/pixshare.mjs
node apps/main/scripts/media/public.mjs marcus
TSX_TSCONFIG_PATH=/mnt/storage/projects/flow/tsconfig.base.json \
  node --import /mnt/storage/projects/flow/node_modules/tsx/dist/loader.mjs \
  apps/main/scripts/media/flow.mjs
node apps/main/scripts/media/optimize.mjs
```

Unset `CAPTURE_VIDEO` for screenshots only (the optimizer requires videos). Change the two Flow loader paths when using another `SOURCE_ROOT`. Production URL probes need a different output directory; `public.mjs pixshare` returns a nonzero result unless real gallery cards load. Authentication requires the existing development configuration and dedicated `+clerk_test` accounts; no credentials belong in command text or the report. The optional auth build uses a fresh `PIXSHARE_CAPTURE_BUILD` directory under `/tmp`, reuses installed packages and never edits the upstream checkout.

## 4. Deployment URL verification and card links

| URL | Executed observation | Portfolio behavior |
| --- | --- | --- |
| https://marcus.edtosoy.com | HTTPS 200; real lesson feedback, actual Stockfish worker reply, resignation and decision review passed on desktop/mobile. | Screenshot and visible **Live App** link open this URL in a new tab. Separate **View Case Study** and **Code** links remain. |
| https://pixshare.edtosoy.com | HTTPS 200 and real frontend shell, but home/Explore render “Unable to reach PixShare” and no real gallery cards. A later API health request returned 200; a subsequent browser recheck still failed. | No misleading Live App badge. Screenshot opens its internal study; the study links to the public frontend with the gallery failure disclosed. |
| Vigil / Flow, FATS, abox | Local captures only; no verified public deployment used. | Screenshot links remain internal; no URL was invented. |

Receipts/screenshots: `deployment-check/`, `deployment-recheck/`, `captures/marcus.json`, and `captures/pixshare-public/`. Availability is a dated observation, not an uptime claim. The generic web fetch tool could not fetch either site; read-only HTTPS requests and actual browser journeys provide the verification.

## 5. Measured media sizes and loading behavior

| Scope | Original bytes | Optimized bytes | Change |
| --- | ---: | ---: | ---: |
| 68 new screenshots | 7,456,357 | 3,828,616 | 48.65% smaller, lossless |
| Five recordings | 9,020,722 | 2,879,672 | 68.08% smaller |
| Entire pre-existing public evidence directory | 6,044,678 | Retained | Compatibility and historical evidence preserved |
| New public screenshots, recordings and posters | — | 6,872,460 | Added locally; total public evidence becomes 12,917,138 bytes |

The overall static inventory increases because this adds 68 captures, five videos and five posters while retaining prior evidence. The reductions above compare the same fresh capture inputs to their optimized outputs; they are not a claim that the whole site shrank. Unused generated card renditions were removed. Cards now use responsive Next Image `srcset`/`sizes` and lazy loading; inspection images retain full-resolution lossless data for legible zoom. Bulk walkthrough preloads were removed. Below-the-fold and secondary images load lazily. Videos use native controls, `playsInline`, `preload="none"`, authentic posters, stable dimensions, no autoplay and no forced loop. Explicit keyboard playback remains available with reduced motion. The always-visible recording transcript and native screenshot transcripts work without JavaScript.

The image approach follows the [official Next Image reference](https://nextjs.org/docs/app/api-reference/components/image); browser checks run against the repository’s installed Next.js 16.1.7. Current official docs are 16.4.x, so runtime behavior and installed declarations remain the authority for this older installed version.

## 6. Failed, blocked and corrected scenarios

- **Fresh authenticated PixShare upload/management: BLOCKED.** Dedicated development keys/accounts exist. An unchanged temporary production frontend with test authentication compiled successfully (Next.js 16.4.1); a genuine Clerk setup/session could not be established. The bounded attempt emits only a sanitized blocker. No fake sign-in, synthetic API response, new user, profile edit or production upload was substituted. The new public-product recording shows real local browsing and prerequisites; the prior release upload evidence remains historical.
- **FATS private document/offer operations: SKIPPED in the fresh guest recording.** Resume library and Offer Desk explicitly require account mode; scanner-dependent intake and disabled AI remain disclosed. Prior verified account captures are retained with historical labels. This recording proves guest tracking/interview persistence, not a fresh complete PostgreSQL account or scanner run.
- Early Marcus `/practice` navigation returned 404; source confirmed `/learn`. The corrected capture passed. Early FATS form submission lacked the required meeting URL and waited on stale navigation; both were corrected and final actual preparation notes are captured.
- Early streamed Flow frames and restored Marcus pages were still loading. Visual inspection caught this; explicit busy/restoration waits produced the final ready captures. Earlier originals remain under `attempts/` and are excluded from publication.
- The first abox payment assertion used exact text that omitted its status dot; the actual payment succeeded. A corrected status locator and reload established persisted payment.
- A cached older PixShare frontend differed visually and used different accessible filter names. The final capture uses the current standalone frontend, real API responses and source-confirmed filter labels. Cached API versions remain explicitly disclosed.
- Source full suites are not rerun. Earlier FATS frozen-hash/parser-capacity/development-overlay failures, hospital wrapper/clinical-compliance limitations, PixShare fixture-only performance scope and Marcus educator/pilot/licensing gaps remain in the case studies.

## 7. Executed verification

Commands use `NX_DAEMON=false NX_ISOLATE_PLUGINS=false NX_NO_CLOUD=true`. Browser preview: `http://127.0.0.1:3126`.

| Status | Check | Result |
| --- | --- | --- |
| PASS | `pnpm nx run-many -t lint typecheck -p @org/main --parallel=2` | ESLint and standalone TypeScript executed successfully. |
| PASS | `pnpm nx run @org/main:build --outputStyle=stream` | Production build compiles all five study routes. Next warns about TypeScript project-reference support; standalone typecheck passes. |
| FAIL — baseline reproduced | `pnpm nx test @org/main --runInBand` | 32 pass, one fails because the existing `.older-projects` disclosure is absent. The same 32/1 result ran on unchanged HEAD in `/tmp/phase5d-baseline`. New live-link assertions execute successfully before that preserved assertion. No assertion was disabled. |
| FAIL — unchanged pagination assumption | `pnpm nx run @org/main:verify-phase5` | Legacy script expects a `role=status` page counter absent from the unchanged `Pagination.tsx`. Image checks were adapted to current responsive assets/lazy loading without dropping assertions. Legacy completion is not claimed. |
| PASS | `pnpm nx run @org/main:verify-phase5d` | 20 study/width/theme scenarios, 24 axe scans, 20 pixel/dimming comparisons; native keyboard video play/pause, posters, blocked-video fallback, no eager MP4 requests, full-resolution zoom/reset and every main walkthrough step. Five no-JavaScript transcripts also passed; final project-grid captures use document clipping to preserve the fixed header position. |
| PASS | Application capture scripts | Five desktop and five mobile workflows; 68 final screenshots; no captured page errors/HTTP error responses; no horizontal overflow observed. |
| PASS | Pagination and protected features | Four first-page projects in order and two desktop columns; Marcus alone on page 2; native deep links/back/forward/invalid query behavior. Resume SHA-256, Credly link, journey expand/collapse and contact/email elements checked. |
| FAIL / PASS, scoped | Remote deployment checks | PixShare gallery fails despite frontend/API-health responses; Marcus real lesson and engine pass. |
| SKIPPED | Fresh account/scanner/provider suites | Fresh PixShare session unavailable; FATS recording uses guest mode. No live AI provider request. |
| NOT RUN | Physical devices, full upstream suites, screen-reader audit, cloud deployment verification | Chromium viewports and automated axe checks do not establish those outcomes. |

The successful structured browser receipt is `verification/media-results.json`. Automated accessibility has no reported violations in the passing suite, but retains incomplete contrast checks for manual review (112 nodes across the final complete 24-scan run). This is not an accessibility conformance certification. The original full Phase 5 suite’s failures remain visible rather than being silently converted to green.

Final asset/preservation checks, exact logs and final receipt counts are recorded alongside this report. No-JavaScript fallback, native playback and transcripts are independent of the interactive screenshot viewer. Existing résumé, certification, journey and contact source files remain unchanged.

## 8. Before/after comparisons

Open [the five-project comparison](phase5d/comparison.html) locally. It places each previous authentic featured screenshot beside its fresh capture with filenames and dimensions. Previous assets remain at their original public paths; no historical image was fabricated or relabeled. Prior portfolio-layout screenshots under `docs/phase5/` represent that earlier phase, not a newly captured immediate pre-edit baseline. Final index and video/viewer screenshots are in `phase5d/verification/`.

## 9. Employer-perspective assessment

A reviewer can now watch a concise real workflow for every project and read the same story without playback. FATS visibly leads with saved jobs, tracking and interview preparation. abox shows real persistence and billing. Vigil demonstrates financial distinctions without claiming UI mutations that do not exist. PixShare shows the actual photo product while exposing its availability/authentication limits. Marcus links to a working lesson and real engine without presenting learning improvement as measured.

The strongest engineering signals are genuine persistence, explicit domain boundaries, inspectable source, reproducible capture scripts and honest failure disclosure. Remaining weaknesses are fresh authenticated PixShare coverage, current account/scanner demonstrations for FATS, degraded public PixShare gallery, stale legacy portfolio assertions, and the already disclosed lack of external user/educator validation. Local demonstrations do not establish adoption, production reliability, compliance or business/learning outcomes.