style: compact token usage text lines

src/components/provider-card.test.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react"
 import userEvent from "@testing-library/user-event"
 import { beforeEach, describe, expect, it, vi } from "vitest"
 import { openUrl } from "@tauri-apps/plugin-opener"
-import { ProviderCard, formatNumber } from "@/components/provider-card"
+import { ProviderCard, formatNumber, groupLinesByType } from "@/components/provider-card"
 import { REFRESH_COOLDOWN_MS } from "@/lib/settings"
 
 vi.mock("@tauri-apps/plugin-opener", () => ({
@@ -746,3 +746,49 @@ describe("ProviderCard", () => {
     expect(screen.queryByText("Extra")).not.toBeInTheDocument()
   })
 })
+
+describe("groupLinesByType", () => {
+  it("returns empty array for empty input", () => {
+    expect(groupLinesByType([])).toEqual([])
+  })
+
+  it("groups consecutive text lines together", () => {
+    const lines = [
+      { type: "text" as const, label: "Today", value: "$0.00" },
+      { type: "text" as const, label: "Yesterday", value: "$1.00" },
+      { type: "text" as const, label: "Last 30 Days", value: "$5.00" },
+    ]
+    const groups = groupLinesByType(lines)
+    expect(groups).toHaveLength(1)
+    expect(groups[0].kind).toBe("text")
+    expect(groups[0].lines).toHaveLength(3)
+  })
+
+  it("keeps non-text lines as separate 'other' entries", () => {
+    const lines = [
+      { type: "progress" as const, label: "Session", used: 50, limit: 100, format: { kind: "percent" as const } },
+      { type: "progress" as const, label: "Weekly", used: 30, limit: 100, format: { kind: "percent" as const } },
+    ]
+    const groups = groupLinesByType(lines)
+    expect(groups).toHaveLength(1)
+    expect(groups[0].kind).toBe("other")
+    expect(groups[0].lines).toHaveLength(2)
+  })
+
+  it("creates separate groups for alternating text and non-text lines", () => {
+    const lines = [
+      { type: "progress" as const, label: "Session", used: 50, limit: 100, format: { kind: "percent" as const } },
+      { type: "text" as const, label: "Today", value: "$0.00" },
+      { type: "text" as const, label: "Yesterday", value: "$1.00" },
+      { type: "badge" as const, label: "Status", text: "OK" },
+    ]
+    const groups = groupLinesByType(lines)
+    expect(groups).toHaveLength(3)
+    expect(groups[0].kind).toBe("other")
+    expect(groups[0].lines).toHaveLength(1)
+    expect(groups[1].kind).toBe("text")
+    expect(groups[1].lines).toHaveLength(2)
+    expect(groups[2].kind).toBe("other")
+    expect(groups[2].lines).toHaveLength(1)
+  })
+})

src/components/provider-card.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react"
+import { Fragment, useMemo } from "react"
 import { ExternalLink, Hourglass, RefreshCw } from "lucide-react"
 import { openUrl } from "@tauri-apps/plugin-opener"
 import { Badge } from "@/components/ui/badge"
@@ -47,6 +47,22 @@ const PACE_VISUALS: Record<PaceStatus, { dotClass: string }> = {
   behind: { dotClass: "bg-red-500" },
 }
 
+type LineGroup = { kind: "text"; lines: MetricLine[] } | { kind: "other"; lines: MetricLine[] }
+
+export function groupLinesByType(lines: MetricLine[]): LineGroup[] {
+  const groups: LineGroup[] = []
+  for (const line of lines) {
+    const kind = line.type === "text" ? "text" : "other"
+    const last = groups[groups.length - 1]
+    if (last && last.kind === kind) {
+      last.lines.push(line)
+    } else {
+      groups.push({ kind, lines: [line] })
+    }
+  }
+  return groups
+}
+
 function formatCount(value: number) {
   if (!Number.isFinite(value)) return "0"
   const maximumFractionDigits = Number.isInteger(value) ? 0 : 2
@@ -317,16 +333,35 @@ export function ProviderCard({
 
         {!loading && !error && (
           <div className="space-y-4">
-            {filteredLines.map((line, index) => (
-              <MetricLineRenderer
-                key={`${line.label}-${index}`}
-                line={line}
-                displayMode={displayMode}
-                resetTimerDisplayMode={resetTimerDisplayMode}
-                onResetTimerDisplayModeToggle={onResetTimerDisplayModeToggle}
-                now={now}
-              />
-            ))}
+            {groupLinesByType(filteredLines).map((group, gi) =>
+              group.kind === "text" ? (
+                <div key={gi} className="space-y-1">
+                  {group.lines.map((line, li) => (
+                    <MetricLineRenderer
+                      key={`${line.label}-${gi}-${li}`}
+                      line={line}
+                      displayMode={displayMode}
+                      resetTimerDisplayMode={resetTimerDisplayMode}
+                      onResetTimerDisplayModeToggle={onResetTimerDisplayModeToggle}
+                      now={now}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <Fragment key={gi}>
+                  {group.lines.map((line, li) => (
+                    <MetricLineRenderer
+                      key={`${line.label}-${gi}-${li}`}
+                      line={line}
+                      displayMode={displayMode}
+                      resetTimerDisplayMode={resetTimerDisplayMode}
+                      onResetTimerDisplayModeToggle={onResetTimerDisplayModeToggle}
+                      now={now}
+                    />
+                  ))}
+                </Fragment>
+              )
+            )}
           </div>
         )}
       </div>
@@ -351,18 +386,18 @@ function MetricLineRenderer({
   if (line.type === "text") {
     return (
       <div>
-        <div className="flex justify-between items-center h-[22px]">
-          <span className="text-sm text-muted-foreground flex-shrink-0">{line.label}</span>
+        <div className="flex justify-between items-center h-[18px]">
+          <span className="text-xs text-muted-foreground flex-shrink-0">{line.label}</span>
           <span
-            className="text-sm text-muted-foreground truncate min-w-0 max-w-[60%] text-right"
+            className="text-xs text-muted-foreground truncate min-w-0 max-w-[60%] text-right"
             style={line.color ? { color: line.color } : undefined}
             title={line.value}
           >
             {line.value}
           </span>
         </div>
         {line.subtitle && (
-          <div className="text-xs text-muted-foreground text-right -mt-0.5">{line.subtitle}</div>
+          <div className="text-[10px] text-muted-foreground text-right -mt-0.5">{line.subtitle}</div>
         )}
       </div>
     )