ADORSYS-GIS / ADORSYS-GIS/converse-frontends
[Epic]: Console UI/UX revamp — two-column shell, cards, sans-first type, honest surfaces
- Linguagem predominante
- TypeScript
- Estrelas
- 0
- Forks
- 0
- Merge médio
- 1h 49min
- PRs com merge (30d)
- 253
Descrição
## 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).
Guia de contribuição
Direção de pesquisa
Start with ADR 0012 and the phase table, then inspect the console entry points named in scope, including /manage, /projects, /settings/account, and /settings/projects. Use the success criteria as the completion check: each phase should merge green with tsc, vitest, and the full web build, with no fabricated or permanently-null figures and empty class-budget BUDGET maps.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- typescript
- Domínio
- design, frontend
- Tipo de issue
- Funcionalidade
- Dificuldade
- 5/5
- Tempo estimado
- Mais de uma semana
- Status de atividade
- Ativa
- Clareza
- Razoavelmente clara
- Facilidade para iniciantes
- 15/100