feat(dashboard): make the Token activity views selectable

[fzn0728]

What

On the personal dashboard, Daily / Weekly / Cumulative above the Token activity graph were three inert <span>s carrying title="Prototype — daily view only". Clicking them did nothing. They are now real toggle buttons, and each view is drawn with the encoding that fits the question it answers.

	Daily	Weekly	Cumulative
Chart	day heatmap (unchanged)	one bar per calendar week	running-total area chart
Legend	Less ▪▪▪▪▪ More	Peak week 56.8M · 13.5M weekly average	728.5M total over the last 371 days
Caption	"Each square is one day…"	"Each bar is one week, Sunday to Saturday…"	"Running total over the window — the steeper the climb…"

Why not shade the existing grid for all three

That was the first attempt, and it was wrong twice over:

• Weekly on a 7-row grid means colouring seven identical squares per week. The row axis is day-of-week, so a weekly view rendered on it implies a distinction that no longer exists — and quartile shading crushes 53 real magnitudes into 4 bins. A bar chart shows the week-over-week trend the view is there for.
• Cumulative is monotonic, so a heatmap of it always ends dark regardless of the data. The slope — the only thing a cumulative view gets read for — is exactly what binning destroys.

Details

• All three charts are laid out on the same 14px-per-week pitch and come out at an identical weeks × 14 − 3 px wide, so the existing month row underneath labels every view. Verified: hovering the cumulative curve at Mar 07 puts the guide line directly over the Mar label.
• Cumulative has a dashed hover guide and a dot that snap to the nearest week end; the tooltip reports the running total, the share of the window, and that week's contribution — 91,422,319 tokens by Sat Mar 07 · 13% of the window · +11.6M that week.
• The swatch legend now only appears for Daily, where it means something; the other two get a scale line in its place.
• The buttons are a labelled role="group" with aria-pressed, keyboard-operable, with a focus ring. The selection persists in localStorage (wrapped in try/catch for private mode).
• [hidden] rules are restored by hand for the new chart hosts, following the existing comment at the top of the stylesheet.

No new dependencies; everything is vanilla JS and inline SVG, consistent with the rest of the page.

Testing

• npm run check clean, npm test 193/193 passing.
• Manually verified all three views in light and dark mode: correct widths and month alignment, tooltips, legend/caption swapping, SVG hit-testing, persistence across reload, no console errors.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
token-widget	Ready	Preview	Aug 28, 2026 11:23pm