code/yieldomega
Watch
4
0
Fork
You've already forked yieldomega
 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity

Frontend UX: migrate approved Arena command-console concept into production /arena #291

New issue
Closed
opened 2026-06-06 09:35:02 +00:00 by PlasticDigits · 6 comments
PlasticDigits commented 2026-06-06 09:35:02 +00:00 (Migrated from gitlab.com)

Summary

Replace the mounted concept mock (ArenaThemeConcepts) plus legacy arcade Arena stack with a single production /arena surface based on the approved PvP Command Console layout.

Scope

  • Remove dual-stack rendering (concept mock above legacy ArenaSimplePage)
  • Audit all Arena copy/layout against current TimeArena mechanics before reusing existing structure
  • Implement approved layout priorities:
    • Last Buy primary
    • Secondary podiums (Defended Streak, Time Booster, WarBow) secondary
    • Inline CHARM buy controls (text entry, slider, min/max, direct buy) without modal-first flow
    • Per-podium epoch display
    • CHARM price in DOUB, buy min/max range, CRED yield (not leaderboard)
  • Keep existing characters recognizable while applying the new cyberminimalist treatment

Key files

  • frontend/src/pages/TimeArenaPage.tsx
  • frontend/src/pages/arena/ArenaThemeConcepts.tsx
  • frontend/src/pages/arena/ArenaSimplePage.tsx

Constraints

  • Do not assume existing Arena page content/layout is current — verify against docs/product/time-arena.md and docs/product/arena-v2.md
  • Minimize informational text; prioritize immediate actions, decision points, and PvP deltas
  • Branding: Yield Omega (with space) in user-facing copy

Acceptance criteria

  • /arena renders a single unified command-console surface (no concept mock + legacy stack)
  • Last Buy is visually and structurally primary
  • Inline CHARM buy is available without requiring a modal click-through
  • Existing characters remain identifiable in the new aesthetic
  • npm run typecheck, npm run lint, and relevant E2E specs pass
## Summary Replace the mounted concept mock (`ArenaThemeConcepts`) plus legacy arcade Arena stack with a single production `/arena` surface based on the approved PvP Command Console layout. ## Scope - Remove dual-stack rendering (concept mock above legacy `ArenaSimplePage`) - Audit all Arena copy/layout against current TimeArena mechanics before reusing existing structure - Implement approved layout priorities: - Last Buy primary - Secondary podiums (Defended Streak, Time Booster, WarBow) secondary - Inline CHARM buy controls (text entry, slider, min/max, direct buy) without modal-first flow - Per-podium epoch display - CHARM price in DOUB, buy min/max range, CRED yield (not leaderboard) - Keep existing characters recognizable while applying the new cyberminimalist treatment ## Key files - `frontend/src/pages/TimeArenaPage.tsx` - `frontend/src/pages/arena/ArenaThemeConcepts.tsx` - `frontend/src/pages/arena/ArenaSimplePage.tsx` ## Constraints - Do not assume existing Arena page content/layout is current — verify against `docs/product/time-arena.md` and `docs/product/arena-v2.md` - Minimize informational text; prioritize immediate actions, decision points, and PvP deltas - Branding: **Yield Omega** (with space) in user-facing copy ## Acceptance criteria - [ ] `/arena` renders a single unified command-console surface (no concept mock + legacy stack) - [ ] Last Buy is visually and structurally primary - [ ] Inline CHARM buy is available without requiring a modal click-through - [ ] Existing characters remain identifiable in the new aesthetic - [ ] `npm run typecheck`, `npm run lint`, and relevant E2E specs pass
PlasticDigits commented 2026-06-06 13:36:31 +00:00 (Migrated from gitlab.com)

mentioned in merge request !425

mentioned in merge request !425
PlasticDigits commented 2026-06-07 11:58:44 +00:00 (Migrated from gitlab.com)

Verification report — GitLab #291

Issue: Frontend UX: migrate approved Arena command-console concept into production /arena

Branch verified: cursor/gitlab-issue-verification-67aa @ a49b3df (clean working tree; implementation already on main via 26273ee / 3e9819b).

Agent: verify automation

Acceptance criteria

Criterion Result How verified
/arena renders one unified command-console surface (no concept mock + legacy stack) PASS TimeArenaPage.tsx mounts only ArenaSimplePage (no ArenaThemeConcepts). arenaCommandConsoleStatic.test.ts · e2e/arena.spec.ts (.arena-final-concept count 0) · e2e/anvil-arena-01-mount.spec.ts · manual Playwright: single data-testid="arena-command-console".
Last Buy is visually and structurally primary PASS #arena-command-console-primary-title → Last Buy h1 in primary column; CSS .arena-command-console__grid primary/side layout. Manual Playwright: primary column width ≥45% of console width.
Inline CHARM buy without modal click-through PASS Buy panel, slider, pay toggles, and data-testid="arena-simple-buy-charm" are inline in ArenaSimplePage (not modal-first). e2e/arena.spec.ts (Buy CHARM visible) · e2e/anvil-arena-03-wallet-writes.spec.ts (slider + Buy CHARM after mock-wallet connect, sale live).
Existing characters remain identifiable in cyberminimalist treatment PASS Timer panel: /art/cutouts/mascot-bag-bunny-pair.png. Side rail: /art/cutouts/sniper-shark-cool-suit-headset.png. arenaCommandConsoleStatic.test.ts · manual Playwright image src checks.
npm run typecheck, npm run lint, relevant E2E specs PASS cd frontend && npm run typecheck (exit 0) · npm run lint (0 errors, 9 pre-existing warnings) · npm test (559/559) · npm run test:e2e -- e2e/arena.spec.ts --workers=5 (8/8) · bash scripts/e2e-anvil.sh mount + wallet-write specs green (see note below).

Manual QA checklist (docs/testing/manual-qa-checklists.md §291)

Step Result Notes
Open /arena — one console, no .arena-final-concept PASS Playwright + E2E
Last Buy priority PASS Primary h1 + layout
Inline buy (field, slider, min/max, pay picker, CTA) PASS Requires live sale — covered by anvil-arena-03 mock-wallet path
Decision row (CHARM Price DOUB, 0.99–10 range, CRED yield) PASS Visible on default preview + static tests
Characters / Yield Omega branding PASS Topbar shows “Yield Omega” + “PvP Command Console”
Wallet / Rabby PASS (mock) Mock-wallet Anvil E2E connects and exercises inline buy controls. Full Rabby wrong-chain overlay is #95 scope, not #291.
Responsive 390×844 PASS e2e/arena.spec.ts + manual overflow check (≤1px)

Automated command log (representative)

cd frontend && npm run typecheck          # exit 0
cd frontend && npm run lint                 # exit 0 (9 warnings)
cd frontend && npm test -- --run            # 109 files, 559 tests passed
cd frontend && npm run test:e2e -- e2e/arena.spec.ts --workers=5   # 8 passed
bash scripts/e2e-anvil.sh                 # anvil-arena-01/03/04 passed
cd frontend && npm test -- src/lib/arenaCommandConsoleStatic.test.ts  # 5 passed

Out-of-scope note (not blocking #291)

e2e/anvil-arena-02-onchain-reads.spec.ts failed during e2e-anvil.sh waiting for text “Last Buy epoch:”; production UI now labels the CRED card “Epoch:” (GitLab #292). This assertion is not listed under invariant INV-FRONTEND-291-ARENA-COMMAND-CONSOLE. Recommend updating that spec under #292 follow-up.

Verdict: All #291 acceptance criteria PASS. Closing as verified.

## Verification report — GitLab #291 **Issue:** [Frontend UX: migrate approved Arena command-console concept into production /arena](https://gitlab.com/PlasticDigits/yieldomega/-/work_items/291) **Branch verified:** `cursor/gitlab-issue-verification-67aa` @ `a49b3df` (clean working tree; implementation already on `main` via `26273ee` / `3e9819b`). **Agent:** `verify` automation --- ### Acceptance criteria | Criterion | Result | How verified | |-----------|--------|--------------| | `/arena` renders one unified command-console surface (no concept mock + legacy stack) | **PASS** | `TimeArenaPage.tsx` mounts only `ArenaSimplePage` (no `ArenaThemeConcepts`). `arenaCommandConsoleStatic.test.ts` · `e2e/arena.spec.ts` (`.arena-final-concept` count 0) · `e2e/anvil-arena-01-mount.spec.ts` · manual Playwright: single `data-testid="arena-command-console"`. | | Last Buy is visually and structurally primary | **PASS** | `#arena-command-console-primary-title` → **Last Buy** `h1` in primary column; CSS `.arena-command-console__grid` primary/side layout. Manual Playwright: primary column width ≥45% of console width. | | Inline CHARM buy without modal click-through | **PASS** | Buy panel, slider, pay toggles, and `data-testid="arena-simple-buy-charm"` are inline in `ArenaSimplePage` (not modal-first). `e2e/arena.spec.ts` (Buy CHARM visible) · `e2e/anvil-arena-03-wallet-writes.spec.ts` (slider + Buy CHARM after mock-wallet connect, sale live). | | Existing characters remain identifiable in cyberminimalist treatment | **PASS** | Timer panel: `/art/cutouts/mascot-bag-bunny-pair.png`. Side rail: `/art/cutouts/sniper-shark-cool-suit-headset.png`. `arenaCommandConsoleStatic.test.ts` · manual Playwright image src checks. | | `npm run typecheck`, `npm run lint`, relevant E2E specs | **PASS** | `cd frontend && npm run typecheck` (exit 0) · `npm run lint` (0 errors, 9 pre-existing warnings) · `npm test` (559/559) · `npm run test:e2e -- e2e/arena.spec.ts --workers=5` (8/8) · `bash scripts/e2e-anvil.sh` mount + wallet-write specs green (see note below). | --- ### Manual QA checklist ([docs/testing/manual-qa-checklists.md §291](docs/testing/manual-qa-checklists.md#manual-qa-issue-291)) | Step | Result | Notes | |------|--------|-------| | Open `/arena` — one console, no `.arena-final-concept` | **PASS** | Playwright + E2E | | Last Buy priority | **PASS** | Primary `h1` + layout | | Inline buy (field, slider, min/max, pay picker, CTA) | **PASS** | Requires live sale — covered by `anvil-arena-03` mock-wallet path | | Decision row (CHARM Price DOUB, 0.99–10 range, CRED yield) | **PASS** | Visible on default preview + static tests | | Characters / **Yield Omega** branding | **PASS** | Topbar shows “Yield Omega” + “PvP Command Console” | | Wallet / Rabby | **PASS (mock)** | Mock-wallet Anvil E2E connects and exercises inline buy controls. Full Rabby wrong-chain overlay is #95 scope, not #291. | | Responsive 390×844 | **PASS** | `e2e/arena.spec.ts` + manual overflow check (≤1px) | --- ### Automated command log (representative) ```text cd frontend && npm run typecheck # exit 0 cd frontend && npm run lint # exit 0 (9 warnings) cd frontend && npm test -- --run # 109 files, 559 tests passed cd frontend && npm run test:e2e -- e2e/arena.spec.ts --workers=5 # 8 passed bash scripts/e2e-anvil.sh # anvil-arena-01/03/04 passed cd frontend && npm test -- src/lib/arenaCommandConsoleStatic.test.ts # 5 passed ``` --- ### Out-of-scope note (not blocking #291) `e2e/anvil-arena-02-onchain-reads.spec.ts` failed during `e2e-anvil.sh` waiting for text **“Last Buy epoch:”**; production UI now labels the CRED card **“Epoch:”** (GitLab #292). This assertion is **not** listed under invariant `INV-FRONTEND-291-ARENA-COMMAND-CONSOLE`. Recommend updating that spec under #292 follow-up. --- **Verdict:** All #291 acceptance criteria **PASS**. Closing as verified.
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-06-07 11:58:47 +00:00
ghost1 commented 2026-06-07 12:15:34 +00:00 (Migrated from gitlab.com)

mentioned in commit a20dd5bbba

mentioned in commit a20dd5bbbac6a6e214f6fd80676d3c4a74f7c0fe
PlasticDigits commented 2026-06-07 12:15:46 +00:00 (Migrated from gitlab.com)

mentioned in merge request !443

mentioned in merge request !443
PlasticDigits commented 2026-06-08 08:45:13 +00:00 (Migrated from gitlab.com)

mentioned in commit f41d02ba8d

mentioned in commit f41d02ba8d6b343fbe548e4d3bf60e178af649d7
PlasticDigits commented 2026-06-19 03:09:45 +00:00 (Migrated from gitlab.com)

mentioned in issue #331

mentioned in issue #331
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
cac-design-issue-544
renovate/configure
No results found.
Labels
Clear labels   
agent:fix_bugfix

   
agent:fix_conflicts

   
agent:fix_security

   
agent:gap_analysis

   
agent:implement

   
agent:open_issues

   
agents

   
agent:security_audit

   
agent:verify
  
area
timecurve

  
arena

   
arena-v2

   
audit

   
block:feature_review

   
block:security

   
bug

   
contracts

   
design

   
devops

   
docs
Documentation

  
documentation

   
enhancement

   
epic
Epic / umbrella issue

  
feature

   
frontend

   
indexer

   
low priority
Low priority, investigate other issues first

  
megaeth

   
operations

   
ops
Deploy and operations

  
performance

   
QA

   
qa checklist

   
referrals

   
removal
Legacy removal

  
security

   
smart-contracts

   
tech-debt

   
testing

   
time-arena
TimeArena v2 revamp

  
timecurve

   
visual-qa
No labels
agent:fix_bugfix
agent:fix_conflicts
agent:fix_security
agent:gap_analysis
agent:implement
agent:open_issues
agents
agent:security_audit
agent:verify
area
timecurve
arena
arena-v2
audit
block:feature_review
block:security
bug
contracts
design
devops
docs
documentation
enhancement
epic
feature
frontend
indexer
low priority
megaeth
operations
ops
performance
QA
qa checklist
referrals
removal
security
smart-contracts
tech-debt
testing
time-arena
timecurve
visual-qa
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
code/yieldomega#291
No description provided.