feat(ui): UTA pages redesign + cross-cutting design polish#173
Merged
luokerenx4 merged 1 commit intomasterfrom May 9, 2026
Merged
feat(ui): UTA pages redesign + cross-cutting design polish#173luokerenx4 merged 1 commit intomasterfrom
luokerenx4 merged 1 commit intomasterfrom
Conversation
…chart, grouped positions, snapshot timeline Both pages were sitting on richer data than they used: - api.trading.equity() — USD totals + per-UTA breakdown (no polling) - api.trading.equityCurve() — time-bucketed NAV with per-UTA points - snapshots() already polled at 60s on detail page Trading list: - Hero banner: total NLV (USD) + 24h delta + cash + unrealized - UTA cards: live NLV, today PnL with arrow, cash, 24h sparkline - 30s polling on aggregates (equity + equityCurve) UTA detail: - Hero with 28-36px NLV + today PnL arrow + 4 secondary metrics - Reused EquityCurve in single-account mode for the NAV chart - Positions grouped by asset class (Equity / Crypto / Option / etc.) with per-group subtotals; secType→class via new asset-class helper, unrecognised types fall to Other rather than guessing - Avg→Mark column collapses two old columns into a directional read - Snapshots-as-timeline with sticky date dividers + delta vs previous; click expands existing SnapshotDetail inline - Bumped snapshot fetch from 20 → 50 entries New primitives: - ui/src/components/Sparkline.tsx — recharts AreaChart, no axes, color auto-derived from trend - ui/src/components/Metric.tsx — label/value/delta with sm/md/lg sizes, consolidates per-page inline copies - ui/src/lib/format.ts — fmt/fmtPnl/fmtNum/fmtPctSigned/currencySymbol consolidated; re-exports market/format helpers - ui/src/lib/asset-class.ts — secTypeToClass + ordering for grouping No backend changes; every visual feeds an existing endpoint. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
luokerenx4
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two-session uplift of the OpenAlice frontend:
asset-class-grouped positions, git-log-style snapshot timeline.
the shell, unified PnL color tokens, live-pulse indicator on
auto-refreshing pages, Portfolio page polished to the same bar.
No backend changes; every visual feeds existing endpoints.
Per-session contributions
2026-05-09 — Cross-cutting design polish
.text-display/.text-title/.text-body/
.text-caption/.text-microdefined inindex.cssso futurecode stops inventing
text-[Npx]values<LiveIndicator>+<PageHeader live={...}>— pulsing green dotTrading / UTA detail / Portfolio. New
live-pulsekeyframe (2.4s,ambient).
shades scattered as
text-green-400/text-emerald-*/text-red-400/bg-red-500etc. with the canonicaltext-green/text-red/bg-redtokens across 14 files(PushApprovalPanel, market panels, ContextMenu, ChatMessage,
ChatChannelList(Container), DevPage, MarketSidebar,
NotificationsInboxPage). Categorical asset-class chips now share
the green token instead of a mismatched emerald.
Removed inline
INDICATOR_STYLE(#58a6ffhex) — active indicatoruses
bg-accenttoken. In-page custom SVGs deferred to later passes.<Metric>+ todayPnL delta arrow; per-account
<Sparkline>in a 2-column card grid;inlined format helpers replaced with imports from
lib/format91d14702026-05-09 — UTA pages redesign
ui/src/components/Sparkline.tsx,ui/src/components/Metric.tsx,ui/src/lib/format.ts,ui/src/lib/asset-class.ts(consolidates per-page inline copies)unrealized) above redesigned UTA cards (live NLV, today PnL with
arrow, cash, 24h sparkline). 30s polling shared across all cards.
metrics row, EquityCurve reused in single-account mode, positions
grouped by asset class with per-group subtotals, snapshots-as-timeline
with sticky date dividers + delta-vs-previous, click-to-expand
SnapshotDetail in place. Snapshot fetch bumped 20 → 50.
Otherrather than guessing — surfaces broker quirks loudlyb0b79baFull commit log
Test plan
npx tsc --noEmitclean (root + ui)pnpm test— 1520 / 1520 passingvite buildcleanof green/red signs and deltas; "AI portfolio intuition gap" memory
note flags exactly this pattern):
active indicator left-bar shows on selected section
market panels / chat scroll-buttons (single shade of green,
single shade of red)
/ Portfolio; "updated Xs ago" ticks every 5s
per healthy UTA, today-PnL delta sign-colored
🤖 Generated with Claude Code