Skip to content

Console v2 UX + visual redesign: human-readable card, brand palette, animated tx flow, persistent dashboard #7

Description

@temrjan

Real-usage feedback from driving the shipped console (v0.1) live. The approver works
(propose → PIN → approve → broadcast, verified end-to-end), but the UX is developer-facing.
This issue collects the v2 direction. The console is already ratatui, so colors, borders,
styled text and a frame-loop animation are incremental — not a rewrite.

1. The card shows raw data, not human data (quick wins)

  • amount_wei: 10000000000000000 is unreadable — show 0.01 ETH (keep raw wei under a "details" toggle).
  • to: is a bare 0x… — show a shortened/checksummed address, room for a label later.
  • Hide dev fields for a plain send: decoded_call: (none) and raw_data: 0x are noise; surface them only when they carry meaning (a contract call / decoded approval).

2. Skip the redundant select step for a single item

When the queue has exactly one pending item, auto-open its card instead of requiring the user to select it and press Enter. The Queue+Card two-pane layout is fine for many items; it's friction for the common case of one.

3. Visual redesign — branded, styled, minimal animation

Match the polish of TUIs like opencode / Hermes (clean frames, color, restrained motion). Use the website palette for brand consistency (from rustok-landing tokens):

Role Hex
Background #0B0712 / deep #08050F
Frame borders #2A1C4D (soft) · #7A45CC / #9D5CFF (accent)
Text / ink #EDE7FF
Success / approve #16E0C3 (teal)
High-risk / warning #FFB454 (amber)
Danger / reject #FF6B6B

Apply: purple frames, teal on the approve action / executed state, amber on HIGH RISK lines, red on reject. Keep it legible on any terminal (degrade gracefully to 16-color).

4. Animated transaction flow

For a pending tx, render it as two info blocks with a flowing arrow between them showing direction:

┌ From ─────────────┐        ┌ To ───────────────┐
│ your wallet       │  ⟩⟩⟩⟩   │ 0x7099…79C8       │
│ 0x489F…9Fbb       │ ▸▸▸▸▸▸  │ (recipient)       │
│ balance: 0.99 ETH │  0.01 ETH →                │
└───────────────────┘        └───────────────────┘

The marquee arrows animate on the existing frame loop (FRAME≈250ms) — minimal motion, clear intent. High-risk (unlimited approve) can pulse the amber.

5. Persistent dashboard, not a one-shot approver (bigger direction)

Today the console exits on decision (exit code = outcome, invariant #7). Users expect to stay in the app: see balance, recent activity, and the pending queue, and approve without the window disappearing. This is a real product direction and pairs with the daemon + compose arc (a long-lived wallet service the console attaches to and survives across sessions) — see distribution plan §1.6. Scope this as its own slice; it changes the run model, not just styling.

Already done / related

Scope note

Items 1–2 are small, self-contained wins. 3–4 are a styling slice. 5 is a product-direction slice (daemon-mode). None block the current listing; this is the console repo's own roadmap.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions