Activity heatmap fills chart area; per-tab empty hints (desktop + iOS)

arul28 · claude · arul28 · commit 4111cb2cb1dd · 2026-07-10T15:44:38.000-04:00
Heatmap cells now scale to the box: one tall row for &lt;=7 points, 7-row
calendar grid for longer ranges. Active tab with an all-zero series shows a
muted hint while keeping the legend, instead of a bare chart. iOS hasActivity
made github-aware to match desktop.

Co-Authored-By: Claude Fable 5 &lt;noreply@anthropic.com&gt;
diff --git a/apps/desktop/src/renderer/components/usage/ActivityModule.tsx b/apps/desktop/src/renderer/components/usage/ActivityModule.tsx
@@ -301,12 +301,12 @@ function ChartFrame({
 
 function ActivityHeatmap({
   points,
-  cellPx,
+  height,
   reduced,
   tooltip,
 }: {
   points: AdeUsageDailyPoint[];
-  cellPx: number;
+  height: number;
   reduced: boolean;
   tooltip: ReturnType<typeof useDayTooltip>;
 }) {
@@ -316,31 +316,52 @@ function ActivityHeatmap({
     return ordered.map((point) => ({ point, intensity: Math.max(0, Math.min(1, dayValue(point) / max)) }));
   }, [points]);
 
+  // Fill the chart box instead of leaving it mostly blank: a short range lays out
+  // as one tall row of large cells; longer ranges use a 7-row calendar-style grid
+  // (columns = weeks) whose cells stretch to fill the available width and height.
+  const rows = cells.length <= 7 ? 1 : 7;
+  const cols = Math.max(1, Math.ceil(cells.length / rows));
+
   return (
-    <div className="flex min-h-0 flex-1 flex-col justify-center">
-      <div
-        className="grid w-full justify-start gap-[3px]"
-        style={{ gridAutoFlow: "column", gridTemplateRows: `repeat(7, ${cellPx}px)`, gridAutoColumns: `${cellPx}px` }}
-        aria-label="Daily activity heatmap"
-      >
-        {cells.map(({ point, intensity }) => (
-          <span
-            key={point.date}
-            className="rounded-[2px]"
-            style={{
-              background:
-                intensity === 0
-                  ? "color-mix(in srgb, var(--color-fg) 7%, transparent)"
-                  : `color-mix(in srgb, ${HEATMAP_HUE} ${Math.round(24 + intensity * 68)}%, var(--color-card))`,
-              transition: reduced ? undefined : "background 120ms ease",
-              cursor: "default",
-            }}
-            onPointerEnter={(event) => tooltip.show(point, event.currentTarget)}
-            onPointerLeave={tooltip.hide}
-            onClick={(event) => tooltip.toggle(point, event.currentTarget)}
-          />
-        ))}
-      </div>
+    <div
+      className="grid min-h-0 w-full flex-1 gap-[3px]"
+      style={{
+        height,
+        gridAutoFlow: "column",
+        gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
+        gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+      }}
+      role="img"
+      aria-label="Daily activity heatmap"
+      data-heatmap-rows={rows}
+    >
+      {cells.map(({ point, intensity }) => (
+        <span
+          key={point.date}
+          className="rounded-[2px]"
+          style={{
+            background:
+              intensity === 0
+                ? "color-mix(in srgb, var(--color-fg) 7%, transparent)"
+                : `color-mix(in srgb, ${HEATMAP_HUE} ${Math.round(24 + intensity * 68)}%, var(--color-card))`,
+            transition: reduced ? undefined : "background 120ms ease",
+            cursor: "default",
+          }}
+          onPointerEnter={(event) => tooltip.show(point, event.currentTarget)}
+          onPointerLeave={tooltip.hide}
+          onClick={(event) => tooltip.toggle(point, event.currentTarget)}
+        />
+      ))}
+    </div>
+  );
+}
+
+/** Muted, centered hint for a tab whose own series is empty while the module
+ * has data on other tabs (so the global warm-empty state does not apply). */
+function TabEmptyHint({ message }: { message: string }) {
+  return (
+    <div className="flex min-h-0 flex-1 items-center justify-center text-center text-[11px] text-muted-fg">
+      {message}
     </div>
   );
 }
@@ -358,8 +379,12 @@ function TokenBars({
 }) {
   const max = Math.max(1, ...points.map((p) => p.totalTokens));
   const anyCache = points.some((p) => (p.cachedTokens ?? 0) > 0);
+  const anyTokens = points.some((p) => p.totalTokens > 0);
   return (
     <div className="flex min-h-0 flex-1 flex-col justify-end gap-2">
+      {!anyTokens ? (
+        <TabEmptyHint message="No token usage in this range." />
+      ) : (
       <ChartFrame height={height} ariaLabel="Token usage by day, split by input, output, and cache">
         {points.map((point) => {
           const total = Math.max(0, point.inputTokens + point.outputTokens + (point.cachedTokens ?? 0));
@@ -381,6 +406,7 @@ function TokenBars({
           );
         })}
       </ChartFrame>
+      )}
       <Legend
         items={[
           { color: TOKEN_COLORS.input, label: "Input" },
@@ -409,8 +435,12 @@ function CodeBars({
     ? Math.max(1, ...points.map((p) => (p.githubAdditions ?? 0) + (p.githubDeletions ?? 0)))
     : 1;
   const max = Math.max(localMax, githubMax);
+  const anyCode = points.some((p) => p.insertions + p.deletions > 0) || anyGithub;
   return (
     <div className="flex min-h-0 flex-1 flex-col justify-end gap-2">
+      {!anyCode ? (
+        <TabEmptyHint message="No code changes in this range." />
+      ) : (
       <ChartFrame height={height} ariaLabel="Code changes by day, additions and deletions">
         {points.map((point) => {
           const total = Math.max(0, point.insertions + point.deletions);
@@ -443,6 +473,7 @@ function CodeBars({
           );
         })}
       </ChartFrame>
+      )}
       <Legend
         items={[
           { color: CODE_COLORS.insertions, label: "Added" },
@@ -463,6 +494,9 @@ function ClientMix({ stats }: { stats: AdeUsageStats }) {
     if (client === "web") return <Globe size={12} />;
     return <Monitor size={12} />;
   };
+  if (clients.length === 0) {
+    return <TabEmptyHint message="No client activity in this range." />;
+  }
   return (
     <div className="flex min-h-0 flex-1 flex-col justify-center gap-3">
       <div className="flex h-3 overflow-hidden rounded-full" style={{ background: "color-mix(in srgb, var(--color-fg) 6%, transparent)" }}>
@@ -748,7 +782,6 @@ export function ActivityModule({
 
   const compactMode = variant === "compact";
   const chartHeight = compactMode ? 84 : 132;
-  const cellPx = compactMode ? 8 : 11;
   const maxBars = compactMode ? 40 : 64;
   const chartPoints = useChartPoints(stats?.daily ?? [], maxBars);
   const hasActivity = (stats?.daily ?? []).some(dayHasActivity);
@@ -770,7 +803,7 @@ export function ActivityModule({
   } else if (!hasActivity) {
     chart = <WarmEmpty height={chartHeight} />;
   } else if (tab === "activity") {
-    chart = <ActivityHeatmap points={stats.daily} cellPx={cellPx} reduced={reduced} tooltip={tooltip} />;
+    chart = <ActivityHeatmap points={stats.daily} height={chartHeight} reduced={reduced} tooltip={tooltip} />;
   } else if (tab === "tokens") {
     chart = <TokenBars points={chartPoints} height={chartHeight} reduced={reduced} tooltip={tooltip} />;
   } else if (tab === "code") {
diff --git a/apps/desktop/src/renderer/components/usage/usage.test.tsx b/apps/desktop/src/renderer/components/usage/usage.test.tsx
@@ -645,6 +645,50 @@ describe("usage components", () => {
       render(<ActivityModule stats={makeActivityStats()} variant="full" preset="7d" onPresetChange={vi.fn()} />);
       expect(screen.getByRole("button", { name: "30d" })).toBeTruthy();
     });
+
+    it("scales the heatmap to fill the box: one row for short ranges, seven for long", () => {
+      const short = makeActivityStats();
+      const { rerender, container } = render(<ActivityModule stats={short} preset="7d" onPresetChange={vi.fn()} />);
+      const grid1 = container.querySelector('[aria-label="Daily activity heatmap"]')!;
+      expect(grid1.getAttribute("data-heatmap-rows")).toBe("1");
+      expect(grid1.children.length).toBe(short.daily.length);
+
+      const long = makeActivityStats({
+        daily: Array.from({ length: 30 }, (_, i) => ({
+          date: `2026-06-${String(i + 1).padStart(2, "0")}`,
+          inputTokens: 100 * i, outputTokens: 50 * i, totalTokens: 150 * i, cachedTokens: 0,
+          commits: 0, prs: 0, insertions: 0, deletions: 0, filesChanged: 0, sessions: 1, interactions: 1,
+        })),
+      } as unknown as Partial<AdeUsageStats>);
+      rerender(<ActivityModule stats={long} preset="30d" onPresetChange={vi.fn()} />);
+      const grid2 = container.querySelector('[aria-label="Daily activity heatmap"]')!;
+      expect(grid2.getAttribute("data-heatmap-rows")).toBe("7");
+      expect(grid2.children.length).toBe(30);
+    });
+
+    it("shows a per-tab hint when the active tab is empty but the module has data", () => {
+      const stats = makeActivityStats({
+        daily: [
+          { date: "2026-07-08", inputTokens: 1000, outputTokens: 500, totalTokens: 1500, cachedTokens: 0, commits: 0, prs: 0, insertions: 0, deletions: 0, filesChanged: 0, sessions: 1, interactions: 2 },
+          { date: "2026-07-09", inputTokens: 1000, outputTokens: 500, totalTokens: 1500, cachedTokens: 0, commits: 0, prs: 0, insertions: 0, deletions: 0, filesChanged: 0, sessions: 1, interactions: 2 },
+        ],
+        clients: [],
+      } as unknown as Partial<AdeUsageStats>);
+      render(<ActivityModule stats={stats} preset="7d" onPresetChange={vi.fn()} />);
+
+      // Global warm-empty must NOT show — the module has token activity.
+      expect(screen.queryByText("Your activity will appear here after your first chat.")).toBeNull();
+
+      // Code tab: zeroed code series → hint, but the legend stays.
+      fireEvent.click(screen.getByRole("tab", { name: "Code" }));
+      expect(screen.getByText("No code changes in this range.")).toBeTruthy();
+      expect(screen.getByText("Added")).toBeTruthy();
+      expect(screen.getByText("Removed")).toBeTruthy();
+
+      // Clients tab: no client interactions → hint.
+      fireEvent.click(screen.getByRole("tab", { name: "Clients" }));
+      expect(screen.getByText("No client activity in this range.")).toBeTruthy();
+    });
   });
 
   describe("WorkActivityModule", () => {
diff --git a/apps/ios/ADE/Views/Work/WorkUsageActivityCarousel.swift b/apps/ios/ADE/Views/Work/WorkUsageActivityCarousel.swift
@@ -177,6 +177,8 @@ struct WorkUsageActivityCarousel: View {
     return daily.contains { point in
       (point.totalTokens ?? 0) > 0 || (point.sessions ?? 0) > 0
         || (point.insertions ?? 0) > 0 || (point.deletions ?? 0) > 0
+        || (point.githubCommits ?? 0) > 0 || (point.githubPrs ?? 0) > 0
+        || (point.githubAdditions ?? 0) > 0 || (point.githubDeletions ?? 0) > 0
         || (point.interactions ?? 0) > 0
     }
   }
@@ -443,25 +445,45 @@ private struct WorkUsageHeatmap: View {
   var body: some View {
     let buckets = workUsageBuckets(points, maxCount: 70)
     let maximum = max(1, buckets.map(\.activity).max() ?? 1)
-    LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 3), count: 14), spacing: 3) {
-      ForEach(buckets) { bucket in
-        RoundedRectangle(cornerRadius: 2, style: .continuous)
-          .fill(bucket.activity == 0
-            ? ADEColor.textMuted.opacity(0.10)
-            : WorkUsageColors.heatmap.opacity(0.25 + 0.72 * Double(bucket.activity) / Double(maximum)))
-          .frame(height: 11)
-          .overlay {
-            if selectedId == bucket.date {
-              RoundedRectangle(cornerRadius: 2, style: .continuous)
-                .stroke(ADEColor.textPrimary.opacity(0.6), lineWidth: 1)
+    // Fill the box: a short range is one tall row of large cells; longer ranges
+    // use a 7-row calendar grid (columns = weeks). Cells stretch to fill both
+    // dimensions instead of leaving the chart area mostly blank.
+    let rows = buckets.count <= 7 ? 1 : 7
+    let columns = stride(from: 0, to: buckets.count, by: rows).map { start in
+      Array(buckets[start..<min(start + rows, buckets.count)])
+    }
+    HStack(spacing: 3) {
+      ForEach(Array(columns.enumerated()), id: \.offset) { _, column in
+        VStack(spacing: 3) {
+          ForEach(column) { bucket in
+            cell(bucket, maximum: maximum)
+          }
+          if column.count < rows {
+            ForEach(0..<(rows - column.count), id: \.self) { _ in
+              Color.clear.frame(maxWidth: .infinity, maxHeight: .infinity)
             }
           }
-          .contentShape(Rectangle())
-          .onTapGesture { onSelect(detail(bucket)) }
-          .accessibilityLabel("\(workUsageFormatDay(bucket.date)), \(workUsageCompact(bucket.tokens)) tokens")
+        }
       }
     }
-    .frame(maxHeight: .infinity, alignment: .center)
+    .frame(maxWidth: .infinity, maxHeight: .infinity)
+  }
+
+  private func cell(_ bucket: WorkUsageVisualBucket, maximum: Int) -> some View {
+    RoundedRectangle(cornerRadius: 2, style: .continuous)
+      .fill(bucket.activity == 0
+        ? ADEColor.textMuted.opacity(0.10)
+        : WorkUsageColors.heatmap.opacity(0.25 + 0.72 * Double(bucket.activity) / Double(maximum)))
+      .frame(maxWidth: .infinity, maxHeight: .infinity)
+      .overlay {
+        if selectedId == bucket.date {
+          RoundedRectangle(cornerRadius: 2, style: .continuous)
+            .stroke(ADEColor.textPrimary.opacity(0.6), lineWidth: 1)
+        }
+      }
+      .contentShape(Rectangle())
+      .onTapGesture { onSelect(detail(bucket)) }
+      .accessibilityLabel("\(workUsageFormatDay(bucket.date)), \(workUsageCompact(bucket.tokens)) tokens")
   }
 
   private func detail(_ bucket: WorkUsageVisualBucket) -> WorkUsageBucketDetail {
@@ -493,14 +515,22 @@ private struct WorkUsageBars: View {
     let githubMax = anyGithub ? (buckets.map(\.githubCode).max() ?? 1) : 1
     let maximum = max(1, localMax, githubMax)
     let anyCache = mode == .tokens && buckets.contains { $0.cachedTokens > 0 }
+    let hasData = buckets.contains { (mode == .tokens ? $0.tokens : $0.code + $0.githubCode) > 0 }
 
     VStack(spacing: 6) {
-      GeometryReader { proxy in
-        HStack(alignment: .bottom, spacing: 2) {
-          ForEach(Array(buckets.enumerated()), id: \.element.id) { index, bucket in
-            bar(bucket: bucket, index: index, height: proxy.size.height, maximum: maximum, anyGithub: anyGithub)
+      if hasData {
+        GeometryReader { proxy in
+          HStack(alignment: .bottom, spacing: 2) {
+            ForEach(Array(buckets.enumerated()), id: \.element.id) { index, bucket in
+              bar(bucket: bucket, index: index, height: proxy.size.height, maximum: maximum, anyGithub: anyGithub)
+            }
           }
         }
+      } else {
+        Text(mode == .tokens ? "No token usage in this range." : "No code changes in this range.")
+          .font(.caption2)
+          .foregroundStyle(ADEColor.textMuted)
+          .frame(maxWidth: .infinity, maxHeight: .infinity)
       }
       legend(anyCache: anyCache, anyGithub: anyGithub)
     }
@@ -620,7 +650,7 @@ private struct WorkUsageClientMix: View {
     let visible = clients.filter { $0.interactions > 0 }.sorted { $0.interactions > $1.interactions }
     let total = max(1, visible.reduce(0) { $0 + $1.interactions })
     if visible.isEmpty {
-      WorkUsageWarmEmpty()
+      WorkUsageTabEmptyHint(message: "No client activity in this range.")
     } else {
       VStack(spacing: 10) {
         GeometryReader { proxy in
@@ -659,6 +689,20 @@ private struct WorkUsageClientMix: View {
   }
 }
 
+/// Muted, centered hint for a tab whose own series is empty while the module has
+/// data on other tabs (so the global warm-empty state does not apply).
+private struct WorkUsageTabEmptyHint: View {
+  let message: String
+  var body: some View {
+    Text(message)
+      .font(.caption2)
+      .foregroundStyle(ADEColor.textMuted)
+      .multilineTextAlignment(.center)
+      .frame(maxWidth: .infinity, maxHeight: .infinity)
+      .accessibilityLabel(message)
+  }
+}
+
 private struct WorkUsageWarmEmpty: View {
   private let fractions: [CGFloat] = [0.35, 0.55, 0.4, 0.7, 0.5, 0.62, 0.44, 0.58, 0.48, 0.66, 0.4, 0.54]
 
