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.