ADORSYS-GIS / ADORSYS-GIS/converse-frontends

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

Đang mở
#368 1 bình luận 0 reaction 1 người được giao Được @stephane-segning nhận Xem trên GitHub
epic
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

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.