From 57dcdb51af77a2ca0c25acb2af19c50ae97c5ffd Mon Sep 17 00:00:00 2001 From: Dotta Date: Wed, 11 Mar 2026 08:20:24 -0500 Subject: [PATCH] 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 --- ui/src/components/ActiveAgentsPanel.tsx | 2 +- ui/src/components/CompanyRail.tsx | 2 +- ui/src/components/IssuesList.tsx | 2 +- ui/src/components/KanbanBoard.tsx | 2 +- ui/src/components/MetricCard.tsx | 2 +- ui/src/components/SidebarAgents.tsx | 2 +- ui/src/components/SidebarNavItem.tsx | 2 +- ui/src/index.css | 4 ++-- ui/src/pages/AgentDetail.tsx | 18 +++++++++--------- ui/src/pages/Agents.tsx | 2 +- ui/src/pages/Companies.tsx | 2 +- ui/src/pages/Costs.tsx | 6 +++--- ui/src/pages/DesignGuide.tsx | 2 +- ui/src/pages/IssueDetail.tsx | 4 ++-- 14 files changed, 26 insertions(+), 26 deletions(-) diff --git a/ui/src/components/ActiveAgentsPanel.tsx b/ui/src/components/ActiveAgentsPanel.tsx index 2c382a9e..d3dcd1d3 100644 --- a/ui/src/components/ActiveAgentsPanel.tsx +++ b/ui/src/components/ActiveAgentsPanel.tsx @@ -434,7 +434,7 @@ function AgentRunCard({
{isActive ? ( - + ) : ( diff --git a/ui/src/components/CompanyRail.tsx b/ui/src/components/CompanyRail.tsx index 62a8bf3e..4737d047 100644 --- a/ui/src/components/CompanyRail.tsx +++ b/ui/src/components/CompanyRail.tsx @@ -132,7 +132,7 @@ function SortableCompanyItem({ {hasLiveAgents && ( - + diff --git a/ui/src/components/IssuesList.tsx b/ui/src/components/IssuesList.tsx index 481ce933..da1c161d 100644 --- a/ui/src/components/IssuesList.tsx +++ b/ui/src/components/IssuesList.tsx @@ -628,7 +628,7 @@ export function IssuesList({ {liveIssueIds?.has(issue.id) && ( - + Live diff --git a/ui/src/components/KanbanBoard.tsx b/ui/src/components/KanbanBoard.tsx index 3e8feb65..96750558 100644 --- a/ui/src/components/KanbanBoard.tsx +++ b/ui/src/components/KanbanBoard.tsx @@ -154,7 +154,7 @@ function KanbanCard({ {isLive && ( - + )} diff --git a/ui/src/components/MetricCard.tsx b/ui/src/components/MetricCard.tsx index b954367d..38a2f9d1 100644 --- a/ui/src/components/MetricCard.tsx +++ b/ui/src/components/MetricCard.tsx @@ -18,7 +18,7 @@ export function MetricCard({ icon: Icon, value, label, description, to, onClick
-

+

{value}

diff --git a/ui/src/components/SidebarAgents.tsx b/ui/src/components/SidebarAgents.tsx index 9d36377f..b94ccfe4 100644 --- a/ui/src/components/SidebarAgents.tsx +++ b/ui/src/components/SidebarAgents.tsx @@ -127,7 +127,7 @@ export function SidebarAgents() { {runCount > 0 && ( - + diff --git a/ui/src/components/SidebarNavItem.tsx b/ui/src/components/SidebarNavItem.tsx index 6d3f4995..18ba03f1 100644 --- a/ui/src/components/SidebarNavItem.tsx +++ b/ui/src/components/SidebarNavItem.tsx @@ -53,7 +53,7 @@ export function SidebarNavItem({ {liveCount != null && liveCount > 0 && ( - + {liveCount} live diff --git a/ui/src/index.css b/ui/src/index.css index aab6536a..adcc1e9b 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -123,7 +123,7 @@ -webkit-tap-highlight-color: color-mix(in oklab, var(--foreground) 20%, transparent); } body { - @apply bg-background text-foreground; + @apply bg-background text-foreground antialiased; height: 100%; overflow: hidden; } @@ -528,8 +528,8 @@ } .paperclip-markdown img { - border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); + box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent); } .paperclip-markdown table { diff --git a/ui/src/pages/AgentDetail.tsx b/ui/src/pages/AgentDetail.tsx index b5571255..77923019 100644 --- a/ui/src/pages/AgentDetail.tsx +++ b/ui/src/pages/AgentDetail.tsx @@ -511,7 +511,7 @@ export function AgentDetail() { className="sm:hidden flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-blue-500/10 hover:bg-blue-500/20 transition-colors no-underline" > - + Live @@ -713,7 +713,7 @@ function LatestRunCard({ runs, agentId }: { runs: HeartbeatRun[]; agentId: strin

{isLive && ( - + )} @@ -857,7 +857,7 @@ function CostsSection({
{runtimeState && (
-
+
Input tokens {formatTokens(runtimeState.totalInputTokens)} @@ -896,9 +896,9 @@ function CostsSection({ {formatDate(run.createdAt)} {run.id.slice(0, 8)} - {formatTokens(Number(u.input_tokens ?? 0))} - {formatTokens(Number(u.output_tokens ?? 0))} - + {formatTokens(Number(u.input_tokens ?? 0))} + {formatTokens(Number(u.output_tokens ?? 0))} + {(u.cost_usd || u.total_cost_usd) ? `$${Number(u.cost_usd ?? u.total_cost_usd ?? 0).toFixed(4)}` : "-" @@ -1163,7 +1163,7 @@ function RunListItem({ run, isSelected, agentId }: { run: HeartbeatRun; isSelect )} {(metrics.totalTokens > 0 || metrics.cost > 0) && ( -
+
{metrics.totalTokens > 0 && {formatTokens(metrics.totalTokens)} tok} {metrics.cost > 0 && ${metrics.cost.toFixed(3)}}
@@ -1539,7 +1539,7 @@ function RunDetail({ run: initialRun, agentRouteId, adapterType }: { run: Heartb {/* Right column: metrics */} {hasMetrics && ( -
+
Input
{formatTokens(metrics.input)}
@@ -2138,7 +2138,7 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin {isLive && ( - + Live diff --git a/ui/src/pages/Agents.tsx b/ui/src/pages/Agents.tsx index 5c00444f..fbae126d 100644 --- a/ui/src/pages/Agents.tsx +++ b/ui/src/pages/Agents.tsx @@ -398,7 +398,7 @@ function LiveRunIndicator({ onClick={(e) => e.stopPropagation()} > - + diff --git a/ui/src/pages/Companies.tsx b/ui/src/pages/Companies.tsx index e00c25db..6844850d 100644 --- a/ui/src/pages/Companies.tsx +++ b/ui/src/pages/Companies.tsx @@ -244,7 +244,7 @@ export function Companies() { {issueCount} {issueCount === 1 ? "issue" : "issues"}
-
+
{formatCents(company.spentMonthlyCents)} diff --git a/ui/src/pages/Costs.tsx b/ui/src/pages/Costs.tsx index 12207f09..6b977928 100644 --- a/ui/src/pages/Costs.tsx +++ b/ui/src/pages/Costs.tsx @@ -144,7 +144,7 @@ export function Costs() {

)}
-

+

{formatCents(data.summary.spendCents)}{" "} {data.summary.budgetCents > 0 @@ -192,7 +192,7 @@ export function Costs() { )}

-
+
{formatCents(row.costCents)} in {formatTokens(row.inputTokens)} / out {formatTokens(row.outputTokens)} tok @@ -229,7 +229,7 @@ export function Costs() { {row.projectName ?? row.projectId ?? "Unattributed"} - {formatCents(row.costCents)} + {formatCents(row.costCents)}
))}
diff --git a/ui/src/pages/DesignGuide.tsx b/ui/src/pages/DesignGuide.tsx index b2ec4f5a..e7ee898d 100644 --- a/ui/src/pages/DesignGuide.tsx +++ b/ui/src/pages/DesignGuide.tsx @@ -1061,7 +1061,7 @@ export function DesignGuide() {
[12:00:17] INFO Reconnected successfully
- + Live diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx index d10a8114..bb152e17 100644 --- a/ui/src/pages/IssueDetail.tsx +++ b/ui/src/pages/IssueDetail.tsx @@ -565,7 +565,7 @@ export function IssueDetail() { {hasLiveRuns && ( - + Live @@ -901,7 +901,7 @@ export function IssueDetail() { {!issueCostSummary.hasCost && !issueCostSummary.hasTokens ? (
No cost data yet.
) : ( -
+
{issueCostSummary.hasCost && ( ${issueCostSummary.cost.toFixed(4)}