ui: apply interface polish from design article review
- Add global font smoothing (antialiased) to body - Add tabular-nums to all numeric displays: MetricCard values, Costs page, AgentDetail token/cost grids and tables, IssueDetail cost summary, Companies page budget display - Replace markdown image hard border with subtle inset box-shadow overlay - Replace all animate-ping status dots with calmer animate-pulse across AgentDetail, IssueDetail, Agents, sidebar, kanban, issues list, and active agents panel Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -144,7 +144,7 @@ export function Costs() {
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-2xl font-bold">
|
||||
<p className="text-2xl font-bold tabular-nums">
|
||||
{formatCents(data.summary.spendCents)}{" "}
|
||||
<span className="text-base font-normal text-muted-foreground">
|
||||
{data.summary.budgetCents > 0
|
||||
@@ -192,7 +192,7 @@ export function Costs() {
|
||||
<StatusBadge status="terminated" />
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right shrink-0 ml-2">
|
||||
<div className="text-right shrink-0 ml-2 tabular-nums">
|
||||
<span className="font-medium block">{formatCents(row.costCents)}</span>
|
||||
<span className="text-xs text-muted-foreground block">
|
||||
in {formatTokens(row.inputTokens)} / out {formatTokens(row.outputTokens)} tok
|
||||
@@ -229,7 +229,7 @@ export function Costs() {
|
||||
<span className="truncate">
|
||||
{row.projectName ?? row.projectId ?? "Unattributed"}
|
||||
</span>
|
||||
<span className="font-medium">{formatCents(row.costCents)}</span>
|
||||
<span className="font-medium tabular-nums">{formatCents(row.costCents)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user