fix(gui): expand heatmap to full-year GitHub-style contribution grid

The activity heatmap was only ~5 columns wide with 30d data selected.
Now always renders 365 days (52+ weeks) with month labels on top and
day-of-week labels (Mon/Wed/Fri) on the left, matching GitHub's
contribution graph layout. Cells auto-size to fill the panel width.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: lidge-jun

gui/src/pages/Usage.tsx

@@ -89,37 +89,54 @@ interface HeatmapCell {
   dayOfWeek: number;
 }
 
-function buildHeatmap(days: UsageDay[]): { weeks: HeatmapCell[][]; buckets: number[] } {
+function buildHeatmap(days: UsageDay[]): { weeks: HeatmapCell[][]; months: { label: string; col: number }[]; buckets: number[] } {
   const buckets = quantileBuckets(days.map(d => d.requests));
-  const cells: HeatmapCell[] = days.map(d => {
-    const dt = new Date(`${d.date}T00:00:00`);
-    return {
-      date: d.date,
-      requests: d.requests,
-      totalTokens: d.totalTokens,
-      level: bucketLevel(d.requests, buckets),
-      dayOfWeek: dt.getDay(),
-    };
-  });
-  if (cells.length === 0) return { weeks: [], buckets };
+  const dayMap = new Map(days.map(d => [d.date, d]));
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const start = new Date(today);
+  start.setDate(start.getDate() - 364);
+  // Align to Sunday
+  start.setDate(start.getDate() - start.getDay());
+
   const weeks: HeatmapCell[][] = [];
-  let week: HeatmapCell[] = new Array(cells[0].dayOfWeek).fill(null).map(() => ({
-    date: "", requests: 0, totalTokens: 0, level: 0, dayOfWeek: 0,
-  }));
-  for (const cell of cells) {
-    week.push(cell);
-    if (cell.dayOfWeek === 6) {
+  const months: { label: string; col: number }[] = [];
+  const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  let lastMonthCol = -4;
+  let prevMonthIdx = -1;
+  let week: HeatmapCell[] = [];
+  const cursor = new Date(start);
+
+  while (cursor <= today) {
+    const iso = `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, "0")}-${String(cursor.getDate()).padStart(2, "0")}`;
+    const m = cursor.getMonth();
+    if (cursor.getDay() === 0 && m !== prevMonthIdx && weeks.length - lastMonthCol >= 4) {
+      months.push({ label: monthNames[m], col: weeks.length });
+      lastMonthCol = weeks.length;
+      prevMonthIdx = m;
+    }
+    const d = dayMap.get(iso);
+    week.push({
+      date: iso,
+      requests: d?.requests ?? 0,
+      totalTokens: d?.totalTokens ?? 0,
+      level: d ? bucketLevel(d.requests, buckets) : 0,
+      dayOfWeek: cursor.getDay(),
+    });
+    if (cursor.getDay() === 6) {
       weeks.push(week);
       week = [];
     }
+    cursor.setDate(cursor.getDate() + 1);
   }
   if (week.length > 0) {
     while (week.length < 7) {
       week.push({ date: "", requests: 0, totalTokens: 0, level: 0, dayOfWeek: week.length });
     }
     weeks.push(week);
   }
-  return { weeks, buckets };
+  return { weeks, months, buckets };
 }
 
 export default function Usage({ apiBase }: { apiBase: string }) {
@@ -194,17 +211,28 @@ export default function Usage({ apiBase }: { apiBase: string }) {
           <section className="panel" style={{ marginTop: 16 }}>
             <h3 className="panel-title">{t("usage.section.heatmap")}</h3>
             <div className="heatmap">
-              <div className="heatmap-grid" style={{ gridTemplateColumns: `repeat(${heatmap.weeks.length}, 12px)` }}>
-                {heatmap.weeks.map((week, wi) => (
-                  <div key={wi} className="heatmap-week">
-                    {week.map((cell, di) => (
-                      <div key={`${wi}-${di}`}
-                        className={`heatmap-cell heatmap-cell-${cell.level}`}
-                        title={cell.date ? `${cell.date}: ${cell.requests} req · ${formatTokens(cell.totalTokens)} tokens` : ""} />
-                    ))}
-                  </div>
+              <div className="heatmap-months" style={{ gridTemplateColumns: `28px repeat(${heatmap.weeks.length}, 1fr)` }}>
+                <span className="heatmap-day-spacer" />
+                {heatmap.months.map((m, i) => (
+                  <span key={i} className="heatmap-month" style={{ gridColumn: m.col + 2 }}>{m.label}</span>
                 ))}
               </div>
+              <div className="heatmap-body">
+                <div className="heatmap-days">
+                  <span /><span>Mon</span><span /><span>Wed</span><span /><span>Fri</span><span />
+                </div>
+                <div className="heatmap-grid" style={{ gridTemplateColumns: `repeat(${heatmap.weeks.length}, 1fr)` }}>
+                  {heatmap.weeks.map((week, wi) => (
+                    <div key={wi} className="heatmap-week">
+                      {week.map((cell, di) => (
+                        <div key={`${wi}-${di}`}
+                          className={`heatmap-cell heatmap-cell-${cell.level}`}
+                          title={cell.date ? `${cell.date}: ${cell.requests} req · ${formatTokens(cell.totalTokens)} tokens` : ""} />
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              </div>
               <div className="heatmap-legend muted">
                 <span>{t("usage.heatmap.less")}</span>
                 {[0, 1, 2, 3, 4].map(l => <span key={l} className={`heatmap-cell heatmap-cell-${l}`} />)}

gui/src/styles.css

@@ -370,16 +370,21 @@ select.input { appearance: none; }
 .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
 .panel-head .panel-title { margin: 0; }
 .panel-head .input { max-width: 220px; }
-.heatmap { display: flex; flex-direction: column; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
-.heatmap-grid { display: flex; gap: 2px; }
-.heatmap-week { display: grid; grid-template-rows: repeat(7, 12px); gap: 2px; }
-.heatmap-cell { width: 12px; height: 12px; border-radius: 2px; background: var(--border); }
+.heatmap { display: flex; flex-direction: column; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
+.heatmap-months { display: grid; font-size: 11px; color: var(--muted); margin-bottom: -2px; }
+.heatmap-day-spacer { grid-column: 1; }
+.heatmap-month { white-space: nowrap; }
+.heatmap-body { display: flex; gap: 3px; }
+.heatmap-days { display: grid; grid-template-rows: repeat(7, 1fr); font-size: 10px; color: var(--muted); width: 25px; flex-shrink: 0; align-items: center; }
+.heatmap-grid { display: grid; gap: 3px; flex: 1; min-width: 0; }
+.heatmap-week { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; }
+.heatmap-cell { aspect-ratio: 1; border-radius: 2px; background: var(--border); min-width: 0; }
 .heatmap-cell-0 { background: var(--border); }
 .heatmap-cell-1 { background: color-mix(in oklch, var(--green) 25%, var(--surface)); }
 .heatmap-cell-2 { background: color-mix(in oklch, var(--green) 50%, var(--surface)); }
 .heatmap-cell-3 { background: color-mix(in oklch, var(--green) 75%, var(--surface)); }
 .heatmap-cell-4 { background: var(--green); }
-.heatmap-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
-.heatmap-legend .heatmap-cell { width: 10px; height: 10px; }
+.heatmap-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; align-self: flex-end; }
+.heatmap-legend .heatmap-cell { width: 10px; height: 10px; aspect-ratio: auto; }
 .usage-bar { width: 100%; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; min-width: 60px; }
 .usage-bar-fill { height: 100%; background: var(--green); border-radius: 999px; }