feat(dashboard): responsive heatmap, 30d/60d/120d/360d ranges, CI fixes, and 221 tests

Author: k1yt

src/core/webview/__tests__/usageStatsMessageHandler.spec.ts

@@ -20,7 +20,7 @@ vi.mock("../../../utils/export", () => ({
 	saveLastExportPath: vi.fn(),
 }))
 
-vi.mock("../task-persistence/taskMessages", () => ({
+vi.mock("../../task-persistence/taskMessages", () => ({
 	readTaskMessages: vi.fn().mockResolvedValue([]),
 }))
 
@@ -30,7 +30,6 @@ vi.mock("../../../services/stats/costRecalculation", () => ({
 
 import * as vscode from "vscode"
 import { resolveDefaultSaveUri, saveLastExportPath } from "../../../utils/export"
-import { readTaskMessages } from "../task-persistence/taskMessages"
 import { getEffectiveCost } from "../../../services/stats/costRecalculation"
 import {
 	handleGetUsageStats,

webview-ui/src/components/stats/UsageHeatmap.tsx

@@ -64,11 +64,24 @@ function formatDisplayDate(dateKey: string): string {
 	}
 }
 
+// ── Range configuration ─────────────────────────────────────────────────────
+
+type HeatmapRange = "30d" | "60d" | "120d" | "360d"
+
+const RANGE_DAYS: Record<HeatmapRange, number> = {
+	"30d": 30,
+	"60d": 60,
+	"120d": 120,
+	"360d": 360,
+}
+
+const RANGE_OPTIONS: HeatmapRange[] = ["30d", "60d", "120d", "360d"]
+
 // ── UsageHeatmap ────────────────────────────────────────────────────────────
 
 const UsageHeatmap = memo(({ buckets }: UsageHeatmapProps) => {
 	const { t } = useAppTranslation()
-	const [range, setRange] = useState<"30d" | "90d">("30d")
+	const [range, setRange] = useState<HeatmapRange>("30d")
 
 	// Extract daily activity from buckets that have a "day" key
 	const dailyMap = useMemo(() => {
@@ -96,7 +109,7 @@ const UsageHeatmap = memo(({ buckets }: UsageHeatmapProps) => {
 
 	// Generate the date range for display
 	const days = useMemo(() => {
-		const count = range === "30d" ? 30 : 90
+		const count = RANGE_DAYS[range]
 		const today = new Date()
 		today.setHours(0, 0, 0, 0)
 		const result: DailyActivity[] = []
@@ -128,9 +141,8 @@ const UsageHeatmap = memo(({ buckets }: UsageHeatmapProps) => {
 
 	const hasData = maxTokens > 0
 
-	// Grid columns: 7 for 30d (compact), 7 for 90d but smaller cells
-	const cellSize = range === "30d" ? "w-4 h-4" : "w-2.5 h-2.5"
-	const gap = range === "30d" ? "gap-1" : "gap-0.5"
+	// Gap between cells: tighter for longer ranges
+	const gap = range === "30d" ? "gap-0.5" : "gap-px"
 
 	return (
 		<div className="flex flex-col gap-2" data-testid="usage-heatmap">
@@ -139,20 +151,16 @@ const UsageHeatmap = memo(({ buckets }: UsageHeatmapProps) => {
 					{t("stats:heatmap.title")}
 				</h4>
 				<div className="flex gap-1">
-					<Button
-						variant={range === "30d" ? "primary" : "ghost"}
-						size="sm"
-						onClick={() => setRange("30d")}
-						data-testid="heatmap-range-30d">
-						{t("stats:heatmap.30d")}
-					</Button>
-					<Button
-						variant={range === "90d" ? "primary" : "ghost"}
-						size="sm"
-						onClick={() => setRange("90d")}
-						data-testid="heatmap-range-90d">
-						{t("stats:heatmap.90d")}
-					</Button>
+					{RANGE_OPTIONS.map((option) => (
+						<Button
+							key={option}
+							variant={range === option ? "primary" : "ghost"}
+							size="sm"
+							onClick={() => setRange(option)}
+							data-testid={`heatmap-range-${option}`}>
+							{t(`stats:heatmap.${option}`)}
+						</Button>
+					))}
 				</div>
 			</div>
 
@@ -164,7 +172,9 @@ const UsageHeatmap = memo(({ buckets }: UsageHeatmapProps) => {
 				<>
 					<div
 						className={`grid grid-flow-col grid-rows-7 ${gap} overflow-x-auto`}
-						style={{ gridTemplateColumns: `repeat(${Math.ceil(days.length / 7)}, minmax(0, 1fr))` }}
+						style={{
+							gridTemplateColumns: `repeat(${Math.ceil(days.length / 7)}, minmax(14px, 1fr))`,
+						}}
 						role="img"
 						aria-label={t("stats:heatmap.title")}>
 						{days.map((day) => {
@@ -178,7 +188,7 @@ const UsageHeatmap = memo(({ buckets }: UsageHeatmapProps) => {
 											: `${formatDisplayDate(day.date)}: ${t("stats:heatmap.noData")}`
 									}>
 									<div
-										className={`${cellSize} rounded-sm transition-colors`}
+										className="rounded-sm transition-colors min-w-[14px] min-h-[14px]"
 										style={{
 											backgroundColor: HEATMAP_COLORS[level],
 											border: "1px solid rgba(255, 255, 255, 0.3)",

webview-ui/src/components/stats/__tests__/UsageHeatmap.spec.tsx

@@ -100,16 +100,22 @@ describe("UsageHeatmap", () => {
 		expect(grid).toBeTruthy()
 	})
 
-	it("renders 30d and 90d range toggle buttons", () => {
+	it("renders 30d, 60d, 120d, and 360d range toggle buttons", () => {
 		const { container } = render(<UsageHeatmap buckets={[]} />)
 
 		const btn30d = container.querySelector('[data-testid="heatmap-range-30d"]')
-		const btn90d = container.querySelector('[data-testid="heatmap-range-90d"]')
+		const btn60d = container.querySelector('[data-testid="heatmap-range-60d"]')
+		const btn120d = container.querySelector('[data-testid="heatmap-range-120d"]')
+		const btn360d = container.querySelector('[data-testid="heatmap-range-360d"]')
 
 		expect(btn30d).toBeTruthy()
-		expect(btn90d).toBeTruthy()
+		expect(btn60d).toBeTruthy()
+		expect(btn120d).toBeTruthy()
+		expect(btn360d).toBeTruthy()
 		expect(btn30d?.textContent).toContain("stats:heatmap.30d")
-		expect(btn90d?.textContent).toContain("stats:heatmap.90d")
+		expect(btn60d?.textContent).toContain("stats:heatmap.60d")
+		expect(btn120d?.textContent).toContain("stats:heatmap.120d")
+		expect(btn360d?.textContent).toContain("stats:heatmap.360d")
 	})
 
 	it("defaults to 30d range", () => {
@@ -125,32 +131,32 @@ describe("UsageHeatmap", () => {
 		expect(cells.length).toBe(30)
 	})
 
-	it("switches to 90d range when 90d button is clicked", () => {
+	it("switches to 60d range when 60d button is clicked", () => {
 		const buckets = [
 			makeBucket({ key: { day: daysAgoKey(0) }, totalTokens: 1000, events: 1 }),
 		]
 
 		const { container } = render(<UsageHeatmap buckets={buckets} />)
 
-		const btn90d = container.querySelector('[data-testid="heatmap-range-90d"]') as HTMLButtonElement
-		fireEvent.click(btn90d)
+		const btn60d = container.querySelector('[data-testid="heatmap-range-60d"]') as HTMLButtonElement
+		fireEvent.click(btn60d)
 
-		// In 90d mode, 90 date cells are generated
+		// In 60d mode, 60 date cells are generated
 		const cells = container.querySelectorAll('[role="img"] [aria-label]')
-		expect(cells.length).toBe(90)
+		expect(cells.length).toBe(60)
 	})
 
-	it("switches back to 30d range when 30d button is clicked after 90d", () => {
+	it("switches back to 30d range when 30d button is clicked after 60d", () => {
 		const buckets = [
 			makeBucket({ key: { day: daysAgoKey(0) }, totalTokens: 1000, events: 1 }),
 		]
 
 		const { container } = render(<UsageHeatmap buckets={buckets} />)
 
-		// Switch to 90d
-		const btn90d = container.querySelector('[data-testid="heatmap-range-90d"]') as HTMLButtonElement
-		fireEvent.click(btn90d)
-		expect(container.querySelectorAll('[role="img"] [aria-label]').length).toBe(90)
+		// Switch to 60d
+		const btn60d = container.querySelector('[data-testid="heatmap-range-60d"]') as HTMLButtonElement
+		fireEvent.click(btn60d)
+		expect(container.querySelectorAll('[role="img"] [aria-label]').length).toBe(60)
 
 		// Switch back to 30d
 		const btn30d = container.querySelector('[data-testid="heatmap-range-30d"]') as HTMLButtonElement
@@ -242,25 +248,24 @@ describe("UsageHeatmap", () => {
 		expect(grid).toBeFalsy()
 	})
 
-	it("uses smaller cell size in 90d mode", () => {
+	it("uses tighter gap in 360d mode", () => {
 		const buckets = [
 			makeBucket({ key: { day: daysAgoKey(0) }, totalTokens: 1000, events: 1 }),
 		]
 
 		const { container } = render(<UsageHeatmap buckets={buckets} />)
 
-		// Cell size in 30d mode
-		const btn90d = container.querySelector('[data-testid="heatmap-range-90d"]') as HTMLButtonElement
-		fireEvent.click(btn90d)
+		// Switch to 360d mode
+		const btn360d = container.querySelector('[data-testid="heatmap-range-360d"]') as HTMLButtonElement
+		fireEvent.click(btn360d)
 
-		// In 90d mode, smaller cell class is applied
+		// In 360d mode, gap-px class is applied
 		const grid = container.querySelector('[role="img"]')
 		expect(grid).toBeTruthy()
-		// In 90d mode, gap-0.5 class is applied
-		expect(grid?.className).toContain("gap-0.5")
+		expect(grid?.className).toContain("gap-px")
 	})
 
-	it("uses larger cell size in 30d mode", () => {
+	it("uses gap-0.5 in 30d mode", () => {
 		const buckets = [
 			makeBucket({ key: { day: daysAgoKey(0) }, totalTokens: 1000, events: 1 }),
 		]
@@ -270,13 +275,13 @@ describe("UsageHeatmap", () => {
 		// Default 30d mode
 		const grid = container.querySelector('[role="img"]')
 		expect(grid).toBeTruthy()
-		// In 30d mode, gap-1 class is applied
-		expect(grid?.className).toContain("gap-1")
+		// In 30d mode, gap-0.5 class is applied
+		expect(grid?.className).toContain("gap-0.5")
 	})
 
 	it("computes intensity levels based on max token value", () => {
 		const buckets = [
-			makeBucket({ key: { day: daysAgoKey(0) }, totalTokens: 4000, events: 4 }), // 100% → level 4
+			makeBucket({ key: { day: daysAgoKey(0) }, totalTokens: 4000, events: 4 }), // 100% → level 5
 			makeBucket({ key: { day: daysAgoKey(1) }, totalTokens: 1000, events: 1 }), // 25% → level 1
 		]
 
@@ -286,9 +291,9 @@ describe("UsageHeatmap", () => {
 		const heatmap = container.querySelector('[data-testid="usage-heatmap"]')
 		expect(heatmap?.textContent).not.toContain("stats:heatmap.noData")
 
-		// Legend should be rendered (4 level colors)
+		// Legend should be rendered (6 level colors: 0-5)
 		const legendCells = container.querySelectorAll(".w-3.h-3.rounded-sm")
-		expect(legendCells.length).toBe(4)
+		expect(legendCells.length).toBe(6)
 	})
 
 	it("handles buckets with day key but zero events", () => {
@@ -319,21 +324,21 @@ describe("UsageHeatmap", () => {
 		expect(style).toContain("repeat(5")
 	})
 
-	it("renders grid with correct column count for 90d mode", () => {
+	it("renders grid with correct column count for 60d mode", () => {
 		const buckets = [
 			makeBucket({ key: { day: daysAgoKey(0) }, totalTokens: 1000, events: 1 }),
 		]
 
 		const { container } = render(<UsageHeatmap buckets={buckets} />)
 
-		const btn90d = container.querySelector('[data-testid="heatmap-range-90d"]') as HTMLButtonElement
-		fireEvent.click(btn90d)
+		const btn60d = container.querySelector('[data-testid="heatmap-range-60d"]') as HTMLButtonElement
+		fireEvent.click(btn60d)
 
 		const grid = container.querySelector('[role="img"]')
 		expect(grid).toBeTruthy()
-		// 90d mode: 90 cells / 7 rows = 13 columns (ceil(90/7) = 13)
+		// 60d mode: 60 cells / 7 rows = 9 columns (ceil(60/7) = 9)
 		const style = grid?.getAttribute("style") ?? ""
 		expect(style.toLowerCase()).toContain("grid-template-columns")
-		expect(style).toContain("repeat(13")
+		expect(style).toContain("repeat(9")
 	})
 })

webview-ui/src/i18n/locales/ca/stats.json

@@ -40,8 +40,10 @@
   },
   "heatmap": {
     "title": "Daily Activity",
-    "90d": "90 Days",
     "30d": "30 Days",
+    "60d": "60 Days",
+    "120d": "120 Days",
+    "360d": "360 Days",
     "less": "Less",
     "more": "More",
     "noData": "No data"