ADORSYS-GIS / ADORSYS-GIS/converse-frontends

[Epic]: Console UI/UX revamp — two-column shell, cards, sans-first type, honest surfaces

Aberta
#368 1 comentário 0 reações 1 responsável Reivindicada por @stephane-segning Ver no GitHub
epic
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

Abrir o 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

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.