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:
Dotta
2026-03-11 08:20:24 -05:00
parent a503d2c12c
commit 57dcdb51af
14 changed files with 26 additions and 26 deletions

View File

@@ -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>