# Project-Wide Audit And Expert Optimization Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:executing-plans` for the audit phase. After that phase is fully verified, use two explicitly assigned expert subagents for the optimization phase. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Finish MuMu-native responsive, visual, interaction, and functional review for every active page from G10 onward, repair every confirmed issue through a five-option decision process, then run a two-expert project enrichment phase and implement the agreed improvements. **Architecture:** `styles/adaptive-frame-profiles.scss` remains the only owner of nine-slice frame values, while `tests/responsive-layout-allowlist.json` remains the only owner of justified fixed-size exceptions. Each page is audited from fresh MuMu screenshots, repaired test-first only when evidence proves a defect, and reverified before the next page. After the baseline is complete, two independent experts inspect the whole product from visual/interaction and functional/code perspectives; the primary agent reconciles their proposals into small verified batches. **Tech Stack:** uni-app, Vue 3, SCSS, PowerShell contracts, Node.js CDP navigation assistance, HBuilderX Android runtime, MuMu Android, ADB. ## Global Constraints - G01 through G09 are already manually accepted and remain frozen unless a later global change produces a demonstrated regression. - The continuous audit boundary begins at G10 and includes every later active route in `pages.json`. - Do not stop after a single page. Continue through the plan unless genuinely blocked by missing authority, external state, or a business decision that cannot be inferred safely. - For every confirmed defect, generate five viable solutions, compare contract fit, regression risk, affected scope, maintainability, and MuMu evidence, then implement the strongest option without asking the user to choose. - If a trade-off remains genuinely ambiguous or three implementation hypotheses fail, dispatch an independent reviewer to argue the opposing technical position until a testable decision is reached. - Content containers derive height from content. Only viewport-constrained overlays may use `max-height`, with internal scrolling when required. - Do not hide layout failures by reducing font sizes or arbitrarily shrinking controls. - Variable-height decorated surfaces use the shared nine-slice profiles. Pages and components must not define `border-image-slice` directly. - Fixed-proportion icons, avatars, seals, thumbnails, and approved decorations may retain fixed dimensions only through `tests/responsive-layout-allowlist.json`. - Do not use `background-size: 100% 100%` or an equivalent full-image stretch for variable content surfaces. - Do not use a browser as visual acceptance evidence. Browser/CDP automation may only assist navigation or logic checks; accepted visual evidence must come from MuMu screenshots captured in the current run. - Keep MuMu at its current user-selected `900x1600 / 320dpi` configuration unless the user explicitly requests another size. - Do not start or close MuMu. - Ignore the system watermark shown by MuMu screenshots. - Guidance copy must use generic examples such as `某某某堂侄`; existing fixture/mock records are outside that copy cleanup rule. - Do not modify API contracts, state enums, routes, or fixture data merely to solve layout problems. - Do not run `git add`, `git commit`, `git push`, `git restore`, `git checkout`, or other Git mutation commands. - Do not create compatibility fallbacks when a responsive contract changes. Update the owner, runtime, validators, tests, and documentation together. ## Page Inventory The continuous audit covers these routes in order: ```text pages/genealogy/g10-application-review pages/genealogy/g11-genealogy-settings pages/genealogy/g12-generation-poems pages/tree/t01-tree-overview pages/tree/t03-member-profile pages/tree/t04-add-relative pages/tree/t05-edit-member pages/tree/t06-edit-relationship pages/tree/t07-member-directory pages/tree/t08-member-states pages/family/f01-family-feed pages/family/f02-publish-feed pages/family/f03-feed-detail pages/family/f04-article-list pages/family/f05-article-detail pages/family/f06-article-editor pages/family/f07-album-list pages/family/f08-album-detail pages/family/f09-media-upload pages/family/f10-video-list pages/records/r01-people-list pages/records/r02-person-detail pages/records/r03-gift-list pages/records/r04-gift-editor pages/records/r05-ritual-list pages/records/r06-ritual-detail pages/records/r07-ritual-editor pages/records/r08-growth-journal pages/records/r09-life-events pages/records/r10-memo-list pages/records/r11-merit-records pages/notification/n01-message-center pages/notification/n02-message-detail pages/profile/m01-profile-home pages/profile/m02-edit-profile pages/profile/m03-security-settings pages/profile/m04-change-password pages/profile/m05-change-phone pages/profile/m06-help-center pages/profile/m07-feedback pages/profile/m08-promotion pages/profile/m09-vip-orders pages/profile/m10-about-settings ``` ## Standard Per-Page Audit Loop Every page task below uses this exact loop: - [x] Read the whole Vue page and its focused contracts before interaction. - [x] Enumerate default, loading, empty, error, permission, validation, success, dialog, and long-content states; mark only genuinely unsupported states as not applicable. - [x] Navigate through the running Android WebView without using browser-rendered screenshots. - [x] Capture each stable state with ADB, save it under `tmp/project-audit//`, and inspect the saved PNG before accepting it. - [x] Reject transition, blank, loading-incomplete, wrong-route, or cropped screenshots and capture them again. - [x] Check content-driven height, wrapping, horizontal overflow, frame distortion, touch reachability, safe areas, modal scrolling, hierarchy, feedback placement, and state clarity. - [x] If no defect is visible, run the page's focused contracts and advance. - [x] If a defect is visible, document five solutions and select the one with the best project-wide contract fit and smallest justified surface area. - [x] Add or tighten a focused failing contract and run it to observe the expected failure. - [x] Implement the minimum source change, with no adjacent cleanup. - [x] Run focused contracts, the global responsive contract, and compile audit. - [x] Allow HBuilderX hot reload to update MuMu, then recapture every affected state and inspect each PNG. - [x] Leave the page in its default review state and continue immediately to the next route. --- ### Task 1: Complete G10-G12 Genealogy Review **Files:** - Verify/Modify: `pages/genealogy/g10-application-review.vue` - Verify/Modify: `pages/genealogy/g11-genealogy-settings.vue` - Verify/Modify: `pages/genealogy/g12-generation-poems.vue` - Test: `tests/g10-*.ps1` - Test: `tests/g11-*.ps1` - Test: `tests/g12-*.ps1` **Interfaces:** - Consumes: shared genealogy background, `PageHeader`, `AppDialog`, `AppButton`, `AppLoading`, adaptive genealogy frame profiles. - Produces: verified settings, review, and generation-poem flows with current-run MuMu evidence. - [x] Apply the Standard Per-Page Audit Loop to G10, including list, help, approve, reject, reject validation, result, empty, error, no-permission, and loading states. All stable MuMu states passed visual inspection and all focused G10 contracts passed without a source change. - [x] Apply the loop to G11. The content-height regression was reproduced, protected by `tests/g11-document-flow-contract.ps1`, fixed by removing the panel `min-height`, and reverified in MuMu. - [x] Apply the loop to G12, including list, empty, edit, validation, success, error, no-permission, loading, and long poem content. A forced panel `min-height` was reproduced, protected by `tests/g12-document-flow-contract.ps1`, removed, and reverified through the 48-character long-list bottom in MuMu. - [x] Run all G10-G12 focused contracts plus the four project baseline commands. The applicable PowerShell contracts and all four baselines pass; the legacy browser runtime smoke was intentionally excluded from visual acceptance and cannot connect without its separate localhost browser harness. ### Task 2: Complete T-Series Review **Files:** - Verify/Modify: `pages/tree/t01-tree-overview.vue` - Verify/Modify: `pages/tree/t03-member-profile.vue` - Verify/Modify: `pages/tree/t04-add-relative.vue` - Verify/Modify: `pages/tree/t05-edit-member.vue` - Verify/Modify: `pages/tree/t06-edit-relationship.vue` - Verify/Modify: `pages/tree/t07-member-directory.vue` - Verify/Modify: `pages/tree/t08-member-states.vue` - Verify/Modify: `components/tree/TreeMemberForm.vue` - Test: matching `tests/t*.ps1` and runtime navigation contracts. - [x] Apply the Standard Per-Page Audit Loop to T01. Fixed the clipped horizontal-pan cue by layering it over the visible grid viewport, and isolated tree-only scroll/metrics bindings so all non-tree state cards fit the viewport; all stable states plus horizontal panning passed MuMu review. - [x] Apply the Standard Per-Page Audit Loop to T03. Audited editable, privacy, forbidden, missing/unknown error, and loading states; removed the forced member-panel `min-height`, updated its document-flow contract to the shared adaptive owners, and reverified in MuMu. - [x] Apply the Standard Per-Page Audit Loop to T04. Audited relative/first-member forms, validation, long summary growth, discard dialog, success, and error; removed the forced panel `min-height`, added the business-contract guard, and reverified in MuMu. - [x] Apply the Standard Per-Page Audit Loop to T05. Audited form, validation, long biography, discard dialog, success, error, and no-permission; removed the forced panel `min-height`, added a focused contract guard, and reverified in MuMu. - [x] Apply the Standard Per-Page Audit Loop to T06. Audited form, validation, success, conflict, conflict-rules dialog, and error; removed the forced panel `min-height`, added a focused contract guard, and reverified in MuMu. - [x] Apply the Standard Per-Page Audit Loop to T07. Audited full/filtered lists, search-driven empty, explicit empty, error recovery, and loading; no page-source defect was found. Updated the stale asset contract to assert the shared adaptive owners; all focused contracts pass. - [x] Apply the Standard Per-Page Audit Loop to T08. Audited privacy, deceased, forbidden, and invalid-member error states with matching member/state contracts; all content, guidance, and actions fit without clipping, so no source change was required. - [x] Cover tree overflow, selected member, long relationship copy, form validation, directory search, empty/error states, and permission states where supported. - [x] Run focused T-series contracts, global responsive contract, and compile audit. All T-series PowerShell contracts and the four project baselines pass. ### Task 3: Complete F-Series Review **Files:** - Verify/Modify: `pages/family/f01-family-feed.vue` through `pages/family/f10-video-list.vue` - Test: matching `tests/f*.ps1` and runtime flow contracts. - [x] Apply the Standard Per-Page Audit Loop to F01. List, shortcuts, empty, error/retry, loading, tabbar spacing, and content scroll all pass MuMu review without a source change. - [x] Apply the Standard Per-Page Audit Loop to F02. Audited form, empty validation toast, 276-character growth, success, and error; removed the forced panel `min-height`, added textarea `auto-height`, modernized the adaptive ownership contract, and reverified in MuMu. - [x] Apply the Standard Per-Page Audit Loop to F03. Ready, expired, error, loading, article/comment flow, empty validation, submission failure, successful insertion, and long auto-height comment content all pass MuMu review without a source change. - [x] Apply the Standard Per-Page Audit Loop to F04. Audited ready, empty, error, loading, search-empty/reset, 50-item growth, and route actions. The long-list audit exposed a shared fixed-header host stacking defect also visible in F03; added a global direct-host stacking contract, verified the fixed header at the list bottom, and regression-checked F03 plus the accepted G10 dialog overlay. - [x] Apply the Standard Per-Page Audit Loop to F05. Ready article, fixed-header scroll boundary, favorite/unfavorite feedback, edit routing, expired/unknown return flow, privacy, error recovery, and loading all pass MuMu review without a page-source change. - [x] Apply the Standard Per-Page Audit Loop to F06. Audited create/edit, validation, loading, draft, saving, failure retention/retry, success, return routing, and long content. MuMu reproduced a 524px body clipped into a 150px textarea; selected content-driven `auto-height`, migrated stale tests to adaptive profile ownership, and reverified equal client/scroll height plus natural page growth. - [x] Apply the Standard Per-Page Audit Loop to F07. Ready/30-item growth, fixed-header bottom, empty, error, loading, album navigation, create dialog, empty validation, long name, successful insertion, and toast all pass MuMu review without a source change. - [x] Apply the Standard Per-Page Audit Loop to F08. Normal photo wall/top-bottom scroll, five fixed-ratio media tiles, full-screen preview at the final photo, Android back-to-close behavior, empty/expired states, return routing, and upload navigation all pass MuMu review without a source change. - [x] Apply the Standard Per-Page Audit Loop to F09. Audited initial, permission, selected, nine-photo maximum, add/remove/active-photo editing, required validation, long batch/photo notes, uploading lock/progress, failure retry, success return, and fixed-header gesture scroll. Added `auto-height` to both description fields and a shared PageHeader compositor layer after MuMu reproduced native-media scroll paint loss; reverified F08 media scrolling and the accepted G10 dialog overlay. - [x] Apply the Standard Per-Page Audit Loop to F10. Audited loading, success/empty return flow, fixed-header layout, and status-card rendering. Replaced the stretched `scaleToFill` decorative image with the shared adaptive family-panel profile, tightened its contract, and reverified the resulting nine-slice frame in MuMu. - [x] Cover feed cards, publish validation, detail comments, article lists/details/editor, album lists/details, media upload, video lists, empty/loading/error/success states, and long content. - [x] Run focused F-series contracts, global responsive contract, and compile audit. All 13 focused F-series contracts and the four project baselines pass; two stale F01 tests were migrated from forbidden stretch-image assertions to the shared adaptive-profile owner. ### Task 4: Complete R-Series Review **Files:** - Verify/Modify: `pages/records/r01-people-list.vue` through `pages/records/r11-merit-records.vue` - Test: matching `tests/r*.ps1` and module-series contracts. - [x] Apply the Standard Per-Page Audit Loop to R01. Audited ready, search-empty/reset, empty, error/retry, person routing, and long copy in MuMu. Replaced fixed card height plus percentage padding with content-driven height and profile-owned safe padding; replaced the Android-incompatible `location.hash` state reader with the UniApp `onLoad` route contract. - [x] Apply the Standard Per-Page Audit Loop to R02. Detail, edit, create validation, 450-character auto-height biography, privacy, loading, error/retry, expired, and related-route controls pass MuMu review without a page-source change. - [x] Apply the Standard Per-Page Audit Loop to R03. Ready/50-item growth, fixed-header bottom, empty, error/retry, loading, and create/edit routing pass MuMu review without a source change. - [x] Apply the Standard Per-Page Audit Loop to R04. Create validation, save success, forced failure/retry, view/edit, delete confirmation/cancel, and return flow pass MuMu review without a source change. - [x] Apply the Standard Per-Page Audit Loop to R05. Ready/50-item growth, fixed-header bottom, empty, error/retry, loading, create, and detail routing pass MuMu review without a source change. - [x] Apply the Standard Per-Page Audit Loop to R06. Detail, long description and participant roles, privacy, error/retry, loading/expired contracts, list return, and edit routing pass MuMu review without a source change. - [x] Apply the Standard Per-Page Audit Loop to R07. Edit/create, required validation, long auto-height description, save success, forced-failure/retry contract, and delete flow pass MuMu review without a source change. - [x] Apply the Standard Per-Page Audit Loop to R08. Ready timeline, empty/error/retry/loading contracts, required dialog validation, 1,520-character auto-height story, internal dialog scroll to actions, save insertion, and toast pass MuMu review without a source change. - [x] Apply the Standard Per-Page Audit Loop to R09. Ready timeline, empty/create flow, required validation, successful insertion, toast, long-content and shared-dialog behavior pass MuMu review without a source change. - [x] Apply the Standard Per-Page Audit Loop to R10. Ready, complete/reopen toggle, toast, long-card growth, create validation/save, empty/error/retry/loading contracts pass MuMu review without a source change. - [x] Apply the Standard Per-Page Audit Loop to R11. Summary/list, long contribution growth, create validation/save, live total update, toast, empty/error/retry/loading contracts pass MuMu review without a source change. - [x] Cover lists, details, editors, validation, long biographies, timeline content, empty/loading/error/success states, and feedback overlays. - [x] Run focused R-series contracts, global responsive contract, and compile audit. All four focused R contracts and the four project baselines pass; the stale R02 stretch-image test was migrated to shared adaptive-profile ownership. ### Task 5: Complete N And M Series Review **Files:** - Verify/Modify: `pages/notification/n01-message-center.vue` - Verify/Modify: `pages/notification/n02-message-detail.vue` - Verify/Modify: `pages/profile/m01-profile-home.vue` through `pages/profile/m10-about-settings.vue` - Test: matching `tests/n*.ps1`, `tests/m*.ps1`, and module-series contracts. - [x] Apply the Standard Per-Page Audit Loop to N01. Ready/unread, mark-all-read, toast, long-card growth, empty/error/retry/loading contracts, and detail/review routing pass MuMu review without a page-source change. - [x] Apply the Standard Per-Page Audit Loop to N02. Unread/read, mark-read toast, long-body growth, approved-target variant, expired/return flow, and responsive state layout pass MuMu review without a page-source change. - [x] Apply the Standard Per-Page Audit Loop to M01 through M10 in route order. Reviewed profile ready/error and service navigation; edit/password/phone validation and long inputs; security routes; FAQ expansion/search; feedback validation and long content; promotion copy/poster dialog; VIP empty/ready orders and service dialog; and about agreements plus logout cancel/confirm/disabled states in MuMu. - [x] Cover unread/read, detail, profile summary, edit and security forms, password/phone validation, help, feedback, promotion, orders, about/settings, loading/error/success, and long content. - [x] Run focused N/M contracts. All eight N/M PowerShell contracts pass; the stale M01 stretch-image assertions were migrated to the shared adaptive-profile owner. Project-wide baselines continue in Task 6. ### Task 6: Project-Wide Baseline Closure **Files:** - Verify: `tests/responsive-layout-coverage.json` - Verify: `tests/responsive-layout-allowlist.json` - Verify: `styles/adaptive-frame-profiles.scss` - Verify: all `components/**/*.vue`, `pages/**/*.vue`, and `App.vue`. - [x] Run `powershell -ExecutionPolicy Bypass -File tests/adaptive-frame-profiles-contract.ps1` and require PASS. - [x] Run `powershell -ExecutionPolicy Bypass -File tests/project-responsive-layout-contract.ps1` and require PASS. - [x] Run `powershell -ExecutionPolicy Bypass -File tests/ag-responsive-surfaces-contract.ps1` and require PASS. - [x] Run `powershell -ExecutionPolicy Bypass -File tests/compile-audit.ps1` and require PASS. - [x] Verify the Vue file set exactly matches `tests/responsive-layout-coverage.json`, with zero missing and zero stale entries: 66 actual and 66 covered. - [x] Verify zero Vue matches for `100% 100% no-repeat`. - [x] Verify zero direct `border-image-slice` declarations in Vue pages/components. - [x] Confirm MuMu remains online and retains the user-selected resolution and density: `emulator-5554`, physical 900×1600 at 320 dpi. The accepted G10 checkpoint was rechecked after the final contract migration and remains visually correct. ### Task 7: Two-Expert Whole-Product Optimization Review **Files:** - Create: `docs/superpowers/specs/2026-07-21-whole-product-enrichment-design.md` - Create: `docs/superpowers/plans/2026-07-21-whole-product-enrichment-implementation.md` - Verify: all accepted MuMu screenshot folders from Task 1 through Task 6. **Interfaces:** - Expert A produces: visual-system and interaction recommendations ranked by user impact, consistency, accessibility, and implementation risk. - Expert B produces: functional-flow and frontend-code recommendations ranked by correctness, maintainability, performance, and regression risk. - Primary agent produces: one reconciled design and implementation plan with no duplicate contract ownership. - [x] Dispatch Expert A with the complete project constraints, accepted MuMu evidence, shared components, style profiles, and route inventory. Require concrete file-level recommendations and forbid browser visual evidence. - [x] Dispatch Expert B independently with the same evidence and constraints. Require concrete flow, state, accessibility, and code-quality recommendations. - [x] Send each expert the other's proposal and require a written challenge covering conflicts, missing risks, and unnecessary scope. - [x] Reconcile both reviews. For every disputed improvement, generate five solutions and select one using user impact, global consistency, regression risk, maintenance cost, and MuMu verifiability. - [x] Write the reconciled design spec and implementation plan. Do not alter accepted business contracts without an explicit migration requirement. ### Task 8: Implement And Verify Expert Optimizations **Files:** - Modify: only the files named by the reconciled Task 7 plan. - Test: focused contracts created before each production change. - Evidence: `tmp/project-optimization//` MuMu screenshots. - [x] Divide accepted improvements into small batches that each have one owner and one independently testable outcome. - [x] For each batch, write the focused failing contract and observe the expected failure. - [x] Implement the minimum shared or page-level change chosen by the reconciled plan. - [x] Run focused and project-wide contracts. - [x] Capture and inspect MuMu screenshots for every affected route and state. - [x] Recheck previously accepted pages whenever a shared component or shared profile changes. - [x] Finish only when all accepted optimization batches and the project-wide baseline pass with current-run evidence. ## Self-Review - The plan covers every route from G10 onward and explicitly freezes G01-G09 except for demonstrated shared regressions. - The single owners for nine-slice profiles, responsive exceptions, and coverage remain unchanged. - The five-option decision process, autonomous execution, MuMu-only visual evidence, no-Git constraint, current emulator configuration, and two-expert enrichment phase are explicit. - There are no compatibility fallback steps and no authorization to modify business contracts speculatively.