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

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.