Design QA — Portfolio Command Center

Comparison target

Source visual truth: mockup/reference/idea-map-portfolio-command-center.png
Rendered implementation: output/playwright/portfolio-command-center-desktop-final.png
Route and state: authenticated active fixture member, Portfolio workspace, two-project privacy-safe folder fixture loaded, Bright Path selected.
Viewport: 1487 × 1058 CSS px at deviceScaleFactor: 1.
Source pixels: 1487 × 1058.
Implementation pixels: 1487 × 1058.
Density normalization: none required; source and implementation are both 1:1 at the same pixel size and crop.

Full-view side-by-side comparison: output/playwright/portfolio-command-center-comparison-half.png (1488 × 529; source left, implementation right, both reduced to 50%).
Focused header/navigation comparison: output/playwright/portfolio-command-center-comparison-top.png (1784 × 150; source left, implementation right).
Focused workspace/table/inspector comparison: output/playwright/portfolio-command-center-comparison-workspace.png (1488 × 404; source left, implementation right).
Mobile overview: output/playwright/portfolio-command-center-mobile-final.png at 390 × 844 CSS/image px and density 1.
Mobile inspector: output/playwright/portfolio-command-center-mobile-inspector-final.png at 390 × 844 CSS/image px and density 1.
Profile separation: output/playwright/profile-panel-desktop.png at 1487 × 1058 CSS/image px and density 1.

No actionable P0, P1, or P2 findings remain.
[P3] The source target demonstrates density with 257 illustrative projects, while the privacy-safe browser fixture contains two real folder proposals.
- Location: center project table and sidebar counts.
- Evidence: the source fills the first 25-row page; the implementation shows the complete two-item fixture and retains the same three-column proportions, fixed controls, pagination, search, filters, sorting, and inspector hierarchy.
- Impact: the implementation capture has more empty central space, so this screenshot cannot prove the visual rhythm of a 200-project corpus by itself.
- Follow-up: scan the founder corpus and visually inspect a full 25-row page before treating large-corpus comfort as human-accepted.
[P3, intentional constraint] The source target contains a portrait-style avatar, while the implementation uses the existing verified-account icon.
- Location: header profile control.
- Evidence: the source shows a small portrait; the product has no avatar field or avatar privacy/retention contract.
- Impact: minor image-fidelity difference only; identity and logged-in state remain clearer than before.
- Follow-up: add avatars only after an explicit account-data and privacy decision.

Fonts and typography: Space Grotesk and IBM Plex Mono preserve the source's display/utility split. Heading weight, compact labels, status pills, line-height, truncation, and hierarchy are consistent at desktop and mobile sizes.
Spacing and layout rhythm: the source's sidebar/table/inspector composition is reproduced with matching region proportions, dividers, dense rows, fixed inspector actions, and compact header. Mobile collapses into a sequential workspace without horizontal clipping.
Colors and visual tokens: the existing near-black, lime, cyan, violet, muted gray, and fine-line tokens map directly to the source. Ready/private/incomplete states remain semantic and readable.
Image quality and asset fidelity: this option has no hero photography or illustrative raster assets. The brand mark and UI symbols use the installed Lucide icon family; no placeholder imagery, emoji, custom CSS drawing, or hand-drawn SVG remains in the rendered workspace. The Lucide-derived favicon removes the earlier missing-asset request.
Copy and content: labels explicitly distinguish public proposal fields from private local folder evidence. Profil, Portfolio, Projekte & Organisationen, local-only notices, and approval copy are coherent without relying on surrounding conversation.
Accessibility and interaction: controls are semantic, keyboard reachable, visibly focusable, and keep private-folder approval per project. Automated accessibility checks report no serious or critical violations.

[P1] Initial mobile capture overflowed horizontally (scrollWidth: 781 at a 390 px viewport), hiding part of the workspace.
- Fix: constrained the workspace root and grid tracks with width: 100%, min-width: 0, and a single minmax(0, 1fr) root column in src/styles.css.
- Post-fix evidence: both mobile screenshots; measured scrollWidth: 390, clientWidth: 390, and workspace width 390.
[P2] The first table-row implementation mixed cell and button semantics, making the selected project affordance ambiguous to accessibility tooling.
- Fix: retained table cells and nested a real project-selection button inside the project cell.
- Post-fix evidence: final desktop/mobile screenshots and the green desktop/mobile folder-review E2E flow.
[P2] The legacy mobile brand mark rendered as a crosshair-like CSS drawing and drifted from the source's circular mark.
- Fix: replaced the drawn mark with Lucide CircleDot, kept one icon family across breakpoints, and added the matching Lucide-derived favicon.
- Post-fix evidence: focused header comparison and final mobile overview.

Manually exercised in the headed browser: open profile, accept account policies, activate account, close profile, open Portfolio, scan the folder fixture, select a proposal, inspect public/private evidence, and resize between desktop and mobile.
Automated in both desktop and mobile projects: account return/activation/deletion/suspension, folder scan, proposal approval, private proposal guard, manifest export, trust navigation, keyboard focus containment, accessibility scan, and horizontal-overflow guard.
Fresh browser console after the favicon fix: zero application errors. MapLibre emitted WebGL readback performance warnings while the public globe was mounted; no warning originated from the Portfolio workflow.
Final automated evidence: npm run check passed with 23 files / 129 tests and a production build; npm run test:e2e passed 42 tests with 2 intentional project-specific skips.

The source and fixture do not represent the same corpus density. The remaining acceptance gate is a real scan of the founder folder at 200+ projects, not another layout rewrite.

Keep profile identity separate from portfolio and trust workspaces.
Preserve browser-local folder names, paths, and README evidence.
Require per-project review before local approval; no bulk publication.
Support search, saved status views, sorting, selection, pagination, and inspector editing.
Verify desktop and mobile layouts visually and prevent horizontal overflow.
Run static, unit, build, accessibility, and full E2E checks.
Human-review a full 25-row page from the real founder corpus.

Re-evaluate row density and long-name truncation with the real 200+ project corpus.
Keep avatar support out until its public/private fields and retention policy are explicitly approved.

final result: passed