feat(usage-analytics): add profile hero with stats and token heat map

[IamCoder18]

Summary

This PR adds a visually polished, profile-led usage hero component at the top of the personal Usage analytics page to drive user shareability and marketing value. The existing detailed analytics dashboard remains unchanged below it.

Closes #4010

Frontend Additions:

• ProfileHeader: Centered circular avatar with initials, display name, and a "Personal usage" handle.
• UsageProfileStats: A 4-KPI panel tracking lifetime tokens, peak tokens, current streak, and longest streak using a fixed type scale and tabular-nums.
• TokenActivityHeatmap: A Sunday-first, dense daily grid featuring a 30d/90d/1y range toggle, intensity-based tile coloring (5 buckets relative to the active range's maximum), and individual day tooltips ("No usage" for zero-token days).

Architectural / Backend Changes:

• Introduced a new usageAnalytics.getProfile tRPC procedure reading directly from the Snowflake MICRODOLLAR_USAGE_DAILY table.
• Queries are scoped to personal context (organization_id = '') to calculate lifetime SUM(total_tokens) and MAX(total_tokens).
• Fetches the last 365 UTC calendar days of active rows, using client-side logic to backfill missing zero-token days and compute GitHub-style streak semantics (current streak ending today, alongside the all-time longest streak).

Reference (from X)

Verification

Verified /usage

Visual Changes

Reviewer Notes

• Styling Principles: Adheres strictly to apps/web/DESIGN.md. Uses core semantic tokens (background, card, border, muted) and shadcn primitives (Card, Tooltip, Tabs). Yellow-green usage has been kept minimal and restricted to minor accents per design skill constraints.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Executive Summary

All five previously reported issues are resolved in the latest commit: the getUTCDay() timezone fix is confirmed in organizeHeatmap, the CSS injection is gone, the activity query correctly uses <= ?, and imageUrl is consumed in the UI.

Previously Reported Issues — All Resolved ✓

File	Issue	Status
apps/web/src/components/usage-analytics/hooks.ts	personalScope: 'personal-only' incorrectly passed to getProfile.queryOptions()	✅ Fixed — no argument passed
apps/web/src/routers/usage-analytics-router.ts	AND usage_date < ? excluded today, breaking current streak	✅ Fixed — changed to <= ?
apps/web/src/routers/usage-analytics-router.ts	imageUrl in output schema never consumed by frontend	✅ Fixed — now used in <AvatarImage src={imageUrl}>
apps/web/src/components/usage-analytics/UsageProfileHero.tsx	Unvalidated imageUrl injected into CSS backgroundImage: url(...)	✅ Fixed — now uses <AvatarImage>
apps/web/src/components/usage-analytics/UsageProfileHero.tsx	getDay() local-time misaligned heatmap columns for non-UTC users	✅ Fixed — organizeHeatmap now uses getUTCDay()

Files Reviewed (5 files)

• apps/web/src/components/usage-analytics/UsageAnalyticsDashboard.tsx — no issues
• apps/web/src/components/usage-analytics/UsageProfileHero.tsx — no issues
• apps/web/src/components/usage-analytics/hooks.ts — no issues
• apps/web/src/components/usage-analytics/types.ts — no issues
• apps/web/src/routers/usage-analytics-router.ts — no issues

---

_{Reviewed by claude-4.6-sonnet-20260217 · 721,665 tokens}

_{Review guidance: REVIEW.md from base branch main}

[IamCoder18]

This is ready to review with "No Issues Found" by the review bot

[RSO]

Thank you for the contribution. Out of curiosity, how did you verify the Snowflake schema, and how did you test the feature?

[IamCoder18]

Thank you for the contribution. Out of curiosity, how did you verify the Snowflake schema, and how did you test the feature?

Hi! I tried to get a mock Snowflake, but it seemed too complex, so I just hard coded the function that gets the data from Snowflake to test the UI.

I hope that's ok!