[REQ-002] Render 30-day heatmap and weekly stats label in UI

[markoub]

User story

As a user, I want to see a compact 30-day heatmap and a "X / 7 this week" summary for each habit, so that I can spot patterns like always skipping weekends at a glance.

Acceptance criteria

• Each habit card in src/main.ts renders a 30-cell CSS-grid heatmap showing the last 30 days (today = rightmost cell).
• Each cell is visually distinct for "completed" vs "not completed" days (e.g. filled vs empty colour). No extra libraries — plain CSS classes are fine.
• A "X / 7 this week" text label appears below (or beside) the heatmap, where X comes from calling last7Count(habit, today) from src/habits.ts.
• The heatmap uses completionsInRange(habit, fromDay, toDay) (or per-day lookups using the same pure helpers) — no inline date arithmetic duplicated in src/main.ts.
• Heatmap cells are accessible: each cell has a title attribute with the ISO date it represents.
• The layout does not break on narrow screens (mobile-width ≥ 320 px): cells wrap or shrink gracefully.
• npm test and npm run build both pass with no new type errors.

Definition of done

npm test and npm run build pass; UI additions are confined to src/main.ts and src/style.css; no business logic added outside src/habits.ts.

Source: REQ-002 (vault/02 - Requirements/REQ-002 - Insight heatmap and weekly stats.md)

[markoub]

Implementation is complete. PR #11 opened: #11

---

Generated by Claude Code

[markoub]

Implementation complete. PR #11 is open and ready for review: #11

Changes: 30-cell heatmap + "X / 7 this week" label added to each habit card. shiftDay exported from habits.ts to keep date arithmetic pure. 31 tests pass, build is clean.

---

Generated by Claude Code