Redesign Usage breakdown + recent runs with column headers

Replace the ambiguous "runs · cost" dot layout in the By mode/provider/
task-type cards with proper aligned columns (name, runs, cost) under
column headers, plus a cost bar per row. Cap and truncate long provider/
model labels (with tooltips) so they no longer overflow. Add header row
and a width-capped, truncating route column to the recent runs table.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: EfeAcar6431

packages/app/src/pages/Usage.tsx

@@ -30,22 +30,31 @@ export function UsagePage(): React.ReactElement {
       </Section>
 
       <div className="grid gap-6 md:grid-cols-3">
-        <BreakdownTable title="By mode" rows={data.byMode} />
-        <BreakdownTable title="By provider" rows={data.byProvider} />
-        <BreakdownTable title="By task type" rows={data.byTaskType} />
+        <BreakdownTable title="By mode" nameLabel="Mode" rows={data.byMode} />
+        <BreakdownTable title="By provider" nameLabel="Provider · model" rows={data.byProvider} />
+        <BreakdownTable title="By task type" nameLabel="Task type" rows={data.byTaskType} />
       </div>
 
       <Section title="Recent runs">
-        <div className="card divide-y divide-border p-0">
-          {data.recentRuns.slice(0, 25).map((r) => (
-            <div key={r.id} className="flex items-center gap-3 px-3 py-2 text-sm">
-              <span className="w-16 shrink-0 text-xs text-muted">{r.mode}</span>
-              <span className="min-w-0 flex-1 truncate">{r.prompt}</span>
-              <span className="shrink-0 text-xs text-muted">{r.route}</span>
-              <span className="w-16 shrink-0 text-right text-xs">{money(r.costUsd)}</span>
-              <span className="w-16 shrink-0 text-right text-xs text-muted">{timeAgo(r.createdAt)}</span>
-            </div>
-          ))}
+        <div className="card p-0 text-sm">
+          <div className="flex items-center gap-3 border-b border-border px-3 py-2 text-[11px] font-medium uppercase tracking-wide text-muted">
+            <span className="w-16 shrink-0">Mode</span>
+            <span className="min-w-0 flex-1">Prompt</span>
+            <span className="hidden w-48 shrink-0 lg:block">Route</span>
+            <span className="w-16 shrink-0 text-right">Cost</span>
+            <span className="w-16 shrink-0 text-right">When</span>
+          </div>
+          <div className="divide-y divide-border">
+            {data.recentRuns.slice(0, 25).map((r) => (
+              <div key={r.id} className="flex items-center gap-3 px-3 py-2">
+                <span className="w-16 shrink-0 truncate text-xs text-muted">{r.mode}</span>
+                <span className="min-w-0 flex-1 truncate" title={r.prompt}>{r.prompt}</span>
+                <span className="hidden w-48 shrink-0 truncate text-xs text-muted lg:block" title={r.route}>{r.route}</span>
+                <span className="w-16 shrink-0 text-right text-xs tabular-nums">{money(r.costUsd)}</span>
+                <span className="w-16 shrink-0 text-right text-xs text-muted">{timeAgo(r.createdAt)}</span>
+              </div>
+            ))}
+          </div>
         </div>
       </Section>
     </div>
@@ -61,19 +70,31 @@ function Metric({ label, value }: { label: string; value: string }): React.React
   );
 }
 
-function BreakdownTable({ title, rows }: { title: string; rows: Breakdown[] }): React.ReactElement {
+function BreakdownTable({ title, nameLabel, rows }: { title: string; nameLabel: string; rows: Breakdown[] }): React.ReactElement {
+  const maxCost = Math.max(1e-9, ...rows.map((r) => r.costUsd));
   return (
     <Section title={title}>
-      <div className="card space-y-1">
-        {rows.length === 0 && <div className="text-sm text-muted">—</div>}
-        {rows.map((r) => (
-          <div key={r.key} className="flex items-center justify-between text-sm">
-            <span className="truncate text-muted">{r.label}</span>
-            <span>
-              {r.runs} · {money(r.costUsd)}
-            </span>
-          </div>
-        ))}
+      <div className="card p-0 text-sm">
+        <div className="flex items-center gap-3 border-b border-border px-3 py-2 text-[11px] font-medium uppercase tracking-wide text-muted">
+          <span className="min-w-0 flex-1 truncate">{nameLabel}</span>
+          <span className="w-10 shrink-0 text-right">Runs</span>
+          <span className="w-16 shrink-0 text-right">Cost</span>
+        </div>
+        {rows.length === 0 && <div className="px-3 py-3 text-muted">No data yet.</div>}
+        <div className="divide-y divide-border/60">
+          {rows.map((r) => (
+            <div key={r.key} className="px-3 py-2">
+              <div className="flex items-center gap-3">
+                <span className="min-w-0 flex-1 truncate" title={r.label}>{r.label}</span>
+                <span className="w-10 shrink-0 text-right tabular-nums text-muted">{r.runs}</span>
+                <span className="w-16 shrink-0 text-right tabular-nums">{money(r.costUsd)}</span>
+              </div>
+              <div className="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-panel2">
+                <div className="h-full rounded-full bg-accent/70" style={{ width: `${(r.costUsd / maxCost) * 100}%` }} />
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
     </Section>
   );