ADORSYS-GIS / ADORSYS-GIS/converse-frontends
[Epic]: Console UI/UX revamp — two-column shell, cards, sans-first type, honest surfaces
- Ngôn ngữ chính
- TypeScript
- Star
- 0
- Fork
- 0
- Merge trung bình
- 1 giờ 49 phút
- Pull request đã merge (30 ngày)
- 253
Mô tả
## Executive Summary
We want to revamp the entire Lightbridge console UI/UX because the shipped surface reads as engineer-assembled rather than designed: the landing screen shows no spend figure, the refill review asks operators to approve money with no decision inputs, controls hide in rails, several controls are inert, and mono-everything 10px typography strains hierarchy. This epic exists to make the console read and behave like a best-in-class developer console (reference lock: Anthropic Console, fal.ai, Cartesia, Attio) while keeping the daisyUI + Base UI + semantic-token stack.
## Strategic Intent
Move the console to a two-column shell (grouped sidebar + content column), card-based zones, sans-first typography with mono reserved for data, inline screen controls with visible scope, one dashboard parameterised by role, and honest surfaces (nothing fabricated or permanently null). Owner directive of 2026-08-30.
## Problem Statement
A prior full UX audit (2026-08-30) ranked the top 10 defects, including: Overview never answers what am I spending; refill review has no decision inputs (consumed/ceiling hardcoded null, UUID columns); Manage renders one missing value three ways; inert tabs and phantom pagers; scope invisible on every screen; export dead on the screen that needs it; settings is an unbounded read-only dump; two near-identical dashboards where the operator one is richer.
## Scope / Phases
| # | Phase | Deliverable |
|---|---|---|
| 1 | Foundation | sans-first type roles, 8/4px radii, Card / EmptyState / Pagination / DetailSheet / PageHeader |
| 2 | Shell | grouped sidebar in, header band out, controls inline, scope subtitles |
| 3 | Right rail out | detail side-sheets, report dialog, @rail/@scope deleted |
| 4 | One dashboard | money-first stat row, operator blocks role-gated, export wired |
| 5 | Projects + API keys | /manage→/projects, sortable card tables, spend MTD wired, real pagers |
| 6 | Admin + Settings | honest review queue + decision sheet; /settings/account + /settings/projects |
| 7 | Polish | stories re-synced, light theme sweep, a11y/motion audit |
| 8 | Docs & ratchets | ADR 0012, spec + skill rewrite, ratchet re-pin, backend gap issues |
## Success Criteria
- Every phase merged green (tsc, vitest, full web build) and deployed; live console verified after phases 2, 4, 6, 8.
- No fabricated or permanently-null figure rendered anywhere.
- Ratchets green at honestly measured values; class-budget BUDGET map stays empty.
## AI Usage Declaration
Planned by AI (Claude Opus agents: UX audit + architecture plan) under human direction; implementation by AI sub-agents with human-owned verification gates. The human owner is accountable for intent and consequences.
Source of truth: https://adorsys-gis.github.io/ai-governance/ and the audit/plan recorded in ADR 0012 (phase 8).
Hướng dẫn đóng góp
Đánh giá
Issue này chưa được đánh giá.