Visual overhaul: layout, colour palette, KPI strip and SVG charts

[gkanitz]

Parent

#1

What to build

A complete visual overhaul of the HTML report, replacing the current plain prose + definition-list layout with a professional, modern design including three SVG charts and opinionated interpretation copy.

Report structure

Page 1 — KPI summary strip
Six headline figures rendered as labelled stat cards, readable in under 10 seconds:

• Active days
• PRs merged
• Reviews given
• Deep review % (reviews with ≥3 inline comments ÷ total reviews given)
• Review comments written
• Median time-to-merge

Subsequent sections — one per metric group, each with:

1. An SVG chart (see below)
2. A short data summary
3. Opinionated interpretation copy framed as "what this pattern typically signals to an evaluator" — not neutral description, but explicit framing of what the numbers mean for seniority/role signals

Charts (all inline SVG, generated in Go at render time — no JS, no CDN, works offline)

Chart 1 — Stacked timeline (headline chart)
X-axis: time buckets auto-scaled to tenure length (weekly <6 months, monthly 6 months–2 years, quarterly >2 years). Y-axis: contribution count. Three stacks per bucket:

• PRs merged
• Shallow reviews (0–2 inline comments)
• Deep reviews (≥3 inline comments)

Chart 2 — Contribution heatmap
GitHub-style grid: columns = weeks, rows = days of week, cell shading = active (any contribution) vs inactive. Shows consistency and cadence at a glance.

Chart 3 — Review reciprocity dual-line chart
Two lines over the same time buckets as Chart 1: review comments written vs. review comments received. Shows whether the subject gives as much detailed feedback as they receive, and how that ratio evolved.

Colour palette and layout

Use a professional yet modern palette — suggested anchor: dark navy (#0F172A) for text/axes, a teal/cyan accent (#0EA5E9) for primary data, amber (#F59E0B) for secondary data, slate grey (#64748B) for muted elements. Charts should feel like a design tool output, not a spreadsheet. Typography: system font stack, generous whitespace, clear section hierarchy.

Acceptance criteria

• KPI strip renders all six figures with labels and is the first thing visible in the report
• Chart 1 (stacked timeline) renders correctly for the org-wide FundedTradingPlus dataset (39 repos, 3 stacks, auto-scaled time axis)
• Chart 2 (heatmap) renders a full year of week columns with correct day-of-week rows and active/inactive shading
• Chart 3 (dual-line) renders both comment series on the same time axis with a legend
• Each section includes opinionated interpretation copy
• Report is a single self-contained HTML file (no external dependencies, works offline)
• Golden file tests updated to reflect new layout
• Existing privacy assertions (no individual repo names) still pass

Parallel-work contract

• Owns: all renderer templates, SVG generation code, HTML/CSS layout, golden files
• Must not touch: provider adapters, ActivitySet struct, CLI flags, report schema structs
• Reads (but does not modify): the new CommentCount field on Review added by Data model: per-review comment counts and all-time window default #27

Blocked by

• Data model: per-review comment counts and all-time window default #27 (needs per-review comment counts for deep-review % and Chart 1 stacking)