Review changes batch 6 of 6

docs/superpowers/plans/2026-07-19-r01-people-directory-baseline.md

@@ -0,0 +1,116 @@
+# R01 People Directory Baseline Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. This project explicitly forbids subagents, worktrees, staging, and commits.
+
+**Goal:** Replace R01's generic application-style list with a dedicated transparent people-directory page that supports local search, empty, and error review states.
+
+**Architecture:** Keep R01 isolated in `pages/records/r01-people-list.vue` so the shared `ModulePage.vue` and every other R page remain unchanged. Reuse existing project components and controls, add one R01-owned raster card skin, and guard the new ownership and interaction contracts with focused tests.
+
+**Tech Stack:** uni-app, Vue 3 `<script setup>`, SCSS, built-in image generation and alpha post-processing, PowerShell contracts, Chrome DevTools Protocol runtime capture.
+
+## Global Constraints
+
+- Modify only R01 and its directly related test, asset, spec, plan, QA note, and screenshots.
+- Do not modify `ModulePage.vue`, other R pages, public components, API code, or routes.
+- Do not use `application-status-card.png` or CSS/SVG drawings in R01.
+- Keep every touch target at least 44 CSS px.
+- Do not use subagents, worktrees, git add, commit, push, reset, or checkout.
+- Reuse the existing Chrome project tab on port 9222.
+- H5 evidence does not prove Android/HBuilderX behavior.
+
+---
+
+### Task 1: Lock the R01 ownership and visual contract
+
+**Files:**
+- Create: `tests/r01-module-baseline-contract.ps1`
+- Test: `tests/r01-module-baseline-contract.ps1`
+
+**Interfaces:**
+- Consumes: UTF-8 source of `pages/records/r01-people-list.vue`.
+- Produces: assertions for R01 ownership, card asset, search, state classes, custom feedback, and 44px targets.
+
+- [ ] **Step 1: Write a failing contract**
+
+Assert that R01 contains `r01-person-name-card.png`, `people-search`, `people-state--empty`, `people-state--error`, `AppButton`, `AppToast`, and a `min-height:44px` search action; reject `ModulePage` and `application-status-card.png`.
+
+- [ ] **Step 2: Verify RED**
+
+Run `powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/r01-module-baseline-contract.ps1`.
+
+Expected: FAIL because the current page only renders `ModulePage`.
+
+### Task 2: Create the R01 transparent name-card asset
+
+**Files:**
+- Create: `static/assets/modules/records/transparent/r01-person-name-card.png`
+
+**Interfaces:**
+- Consumes: R module background palette and the accepted line-only F01 card restraint as visual context.
+- Produces: one wide transparent PNG with restrained antique-gold name-card linework and no paper fill, text, status marks, or white background.
+
+- [ ] **Step 1: Generate the raster candidate**
+
+Use built-in image generation for a wide 3.4:1 traditional Chinese archival name-card line frame on flat green chroma outside and inside the frame.
+
+- [ ] **Step 2: Convert chroma and paper pixels to alpha**
+
+Use the real Python launcher and Pillow to preserve only antique-gold linework, crop transparent bounds, save the final asset, and inspect the original-resolution PNG.
+
+### Task 3: Implement the isolated R01 page
+
+**Files:**
+- Modify: `pages/records/r01-people-list.vue`
+- Test: `tests/r01-module-baseline-contract.ps1`
+
+**Interfaces:**
+- Consumes: `PageHeader`, `ModulePageBackground`, `AppButton`, `AppToast`, and the R01 asset.
+- Produces: local ready/empty/error/search-no-result rendering and local search over three people.
+
+- [ ] **Step 1: Replace `ModulePage` with R01-owned markup**
+
+Render the records background, page header, existing search-frame asset, filtered cards, state panel, action button, and custom Toast. Do not render a numbered intro block below the header.
+
+- [ ] **Step 2: Add local state and interactions**
+
+Read `state=empty|error` from the current hash/query; filter by name, role, or generation; clear search to restore all records; card clicks navigate to R02; new-person action opens `AppToast`; error action restores ready.
+
+- [ ] **Step 3: Add scoped responsive styles**
+
+Use transparent overlays, equal card sizes, clear hierarchy, no white wrapper backgrounds, no horizontal overflow, and minimum 44px controls.
+
+- [ ] **Step 4: Verify GREEN**
+
+Run the focused contract and require `R01-MODULE-BASELINE-CONTRACT PASS`.
+
+### Task 4: Regression and visual verification
+
+**Files:**
+- Verify: `pages/records/r01-people-list.vue`
+- Create evidence under: `docs/design/screens/runtime/2026-07-19/r01-baseline-redesign/`
+
+**Interfaces:**
+- Consumes: H5 service on 5173 and the unique existing Chrome project tab on 9222.
+- Produces: test output, responsive evidence, and one user-visible state at a time.
+
+- [ ] **Step 1: Run related contracts and runtime smoke**
+
+Run the focused contract, R-series visual contract, root runtime smoke, responsive runtime smoke, and `git diff --check`.
+
+- [ ] **Step 2: Capture and compare normal list**
+
+Capture 412×915 and compare against `r01-baseline-audit/01-list-412x915.png`; fix P0/P1/P2 issues before showing it.
+
+- [ ] **Step 3: Self-audit responsive sizes**
+
+Capture 320×568, 360×640, 360×800, and 412×915; confirm no overflow or clipping and restore 412×915.
+
+- [ ] **Step 4: Present states sequentially**
+
+Present normal list, search no result, empty, failure, and new-person Toast one at a time. Do not mark R01 `[x]` until the user explicitly passes the page.
+
+## Self-Review
+
+- Spec coverage: ownership, asset, white-background removal, search, states, interactions, responsive targets, and evidence limits are covered.
+- Placeholder scan: no unresolved design or implementation decision remains.
+- Interface consistency: R01 owns its local data and state; shared components and other R pages remain unchanged.