#56 - UI/Content Polish — Demo Must Be Flawless Before Launch - coopcloud_code/home

mik-tf commented

2026-04-01 17:40:05 +00:00

Member

Goal

Every page in the SPA demo must look polished and professional. No raw JSON, no placeholder text, no broken layouts, no missing data.

Known Bugs

Product detail: Specifications table shows raw JSON — attribute values display as {"attribute_type":"Number","display_order":3,...} instead of the actual value (e.g., "500 GB"). Keys show Storage_gb instead of "Storage"
Product detail: Related Products shows placeholder text "Similar products in this category will appear here" instead of actual related products
Attribute labels not human-readable — Cpu_cores, Memory_gb, Uptime_percentage should be "CPU Cores", "Memory", "Uptime"

Audit Checklist (all 44 SPA routes)

Public Pages

Home — hero section, featured products, categories
Marketplace — product grid, category filter, search
Product Detail — specs rendered correctly, related products populated
Docs — all topics render
About, Privacy, Terms, Contact, Changelog, Roadmap
Login, Register — forms work, vault creation

Authenticated Pages

Dashboard — user info, stats, quick actions
Wallet — balance, transactions, buy credits, transfer
Orders — order list, detail, confirmation, invoice
Cart — items, quantity update, checkout flow
Messaging — thread list, compose, thread detail
Profile — edit profile, avatar
Settings — preferences, notifications
SSH Keys — CRUD

Marketplace Sub-pages

Statistics
Compute Resources category
Mycelium Nodes category
Mycelium Gateways category
Agentic Apps category
Human Energy Services category

Dashboard Sub-pages

Nodes management
Services management
Apps management
Pools
Rental detail
Slice rental

Testing Required

Visual regression: screenshot all pages, compare with SSR reference
Content audit: no lorem ipsum, no placeholder text, no raw JSON
Responsive: mobile viewport check (375px, 768px, 1920px)
Adversarial: empty states (no products, no orders, no messages)
Error states: network errors, auth expiry, 404 pages

Acceptance Criteria

Every page must:

Render real data (not placeholder/raw JSON)
Have proper human-readable labels
Match the SSR reference visually
Handle empty states gracefully
Work on mobile viewports

— mik-tf

## Goal Every page in the SPA demo must look polished and professional. No raw JSON, no placeholder text, no broken layouts, no missing data. ## Known Bugs - [ ] **Product detail: Specifications table shows raw JSON** — attribute values display as `{"attribute_type":"Number","display_order":3,...}` instead of the actual value (e.g., "500 GB"). Keys show `Storage_gb` instead of "Storage" - [ ] **Product detail: Related Products** shows placeholder text "Similar products in this category will appear here" instead of actual related products - [ ] **Attribute labels not human-readable** — `Cpu_cores`, `Memory_gb`, `Uptime_percentage` should be "CPU Cores", "Memory", "Uptime" ## Audit Checklist (all 44 SPA routes) ### Public Pages - [ ] Home — hero section, featured products, categories - [ ] Marketplace — product grid, category filter, search - [ ] Product Detail — specs rendered correctly, related products populated - [ ] Docs — all topics render - [ ] About, Privacy, Terms, Contact, Changelog, Roadmap - [ ] Login, Register — forms work, vault creation ### Authenticated Pages - [ ] Dashboard — user info, stats, quick actions - [ ] Wallet — balance, transactions, buy credits, transfer - [ ] Orders — order list, detail, confirmation, invoice - [ ] Cart — items, quantity update, checkout flow - [ ] Messaging — thread list, compose, thread detail - [ ] Profile — edit profile, avatar - [ ] Settings — preferences, notifications - [ ] SSH Keys — CRUD ### Marketplace Sub-pages - [ ] Statistics - [ ] Compute Resources category - [ ] Mycelium Nodes category - [ ] Mycelium Gateways category - [ ] Agentic Apps category - [ ] Human Energy Services category ### Dashboard Sub-pages - [ ] Nodes management - [ ] Services management - [ ] Apps management - [ ] Pools - [ ] Rental detail - [ ] Slice rental ## Testing Required - [ ] Visual regression: screenshot all pages, compare with SSR reference - [ ] Content audit: no lorem ipsum, no placeholder text, no raw JSON - [ ] Responsive: mobile viewport check (375px, 768px, 1920px) - [ ] Adversarial: empty states (no products, no orders, no messages) - [ ] Error states: network errors, auth expiry, 404 pages ## Acceptance Criteria Every page must: 1. Render real data (not placeholder/raw JSON) 2. Have proper human-readable labels 3. Match the SSR reference visually 4. Handle empty states gracefully 5. Work on mobile viewports — mik-tf

mik-tf commented

2026-04-01 21:09:41 +00:00

Author

Member

Full 44-route UI audit completed with Hero Browser MCP. 22 pages screenshotted, 20/22 clean on first pass.

Two bugs found and fixed:

mycelium_code/home#58 (404 no navbar) — fixed
mycelium_code/home#59 (placeholder text) — fixed

Layer 5b content regression tests (53 tests) now guard against future regressions. All 318 tests pass.

Full 44-route UI audit completed with Hero Browser MCP. 22 pages screenshotted, 20/22 clean on first pass. Two bugs found and fixed: - https://forge.ourworld.tf/mycelium_code/home/issues/58 (404 no navbar) — fixed - https://forge.ourworld.tf/mycelium_code/home/issues/59 (placeholder text) — fixed Layer 5b content regression tests (53 tests) now guard against future regressions. All 318 tests pass.