feat(app): add token activity heatmap to home sidebar

[devinoldenburg]

Issue for this PR

Closes #

Type of change

• New feature

What does this PR do?

Adds a compact token activity heatmap directly above the Projects section in the home sidebar. The heatmap visualizes daily token usage over 280 days (40 weeks) as a GitHub-style contribution grid with 7 rows. Each cell's color intensity reflects that day's token volume (4 levels), using theme accent colors so it works across light/dark/high-contrast themes.

Key behaviors:

• Hovering any cell shows the exact token amount (compact: 1.4K, 12.3M) and the date, also accessible via keyboard (Tab to cells)
• Screen reader summary announces totals, peak, and streaks
• In dev mode with no real sessions: synthetic sample data fills the graph for visual testing
• Falls back to session counts when token data is absent, with an explicit metric field so tooltips/labels remain accurate
• No card wrapper – renders inline in the sidebar column

Files:

• packages/app/src/pages/home/activity.ts – new helper: day bucketing, token aggregation, streak calculation, formatting
• packages/app/src/pages/home/activity.test.ts – new tests
• packages/app/src/pages/home.tsx – wires HomeActivityGraph into HomeProjectColumn
• packages/app/src/i18n/en.ts / de.ts – i18n strings

How did you verify your code works?

• bun test --preload ./happydom.ts ./src/pages/home/activity.test.ts — 3/3 pass
• bun run typecheck — all 28 packages pass
• bun run lint — 0 errors
• bun run build — successful
• Visual check on http://localhost:4444 with and without real sessions

Screenshots / recordings

Checklist

• I have tested my changes locally
• I have not included unrelated changes in this PR

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds a “Token activity” heatmap to the Home page by aggregating session records into a 280-day window and rendering a contribution-style grid with summary/streak metrics.

Changes:

• Introduces buildHomeActivity utilities (token totals, streaks, month labels) plus sample data generation in dev.
• Updates Home page to fetch more sessions and render the new activity heatmap component.
• Adds EN/DE i18n strings and unit tests for activity aggregation.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
packages/app/src/pages/home/activity.ts	Implements activity aggregation, formatting, and dev sampling for the heatmap.
packages/app/src/pages/home/activity.test.ts	Adds tests for windowing, updated-time bucketing, and streak calculations.
packages/app/src/pages/home.tsx	Fetches more sessions and renders the activity heatmap on the Home screen.
packages/app/src/i18n/en.ts	Adds English strings for the activity section and summary.
packages/app/src/i18n/de.ts	Adds German strings for the activity section and summary.

Comments suppressed due to low confidence (1)

packages/app/src/pages/home.tsx:1

• Home now loads up to 360 sessions per project directory, concurrently, on a single query. This is a significant increase from 64 and can amplify startup latency/memory/network usage for users with many projects. Consider reducing concurrency (queue/throttle), fetching only what the activity window needs (or a dedicated aggregated endpoint), and/or limiting the data processed for the heatmap to the same cap actually fetched.

import type { Session } from "@opencode-ai/sdk/v2/client"

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

Thanks for updating your PR! It now meets our contributing guidelines. 👍