feat(webapp): Free usage charts as progress toward the cap

[macko911]

Problem

On the Free usage drill-in, the charts didn't frame usage against the cap: a daily bar chart under a monthly cap makes the limit effectively invisible, and level metrics (connections, sync records) had no cap reference to read against.

Solution

• Draw the metric's cap as a dashed reference line, with the Y-axis pinned to round ticks ending at the cap plus ~10% headroom.
• Render counter metrics (proxy, functions, webhooks) as a cumulative month-to-date curve, with a daily/cumulative toggle; no cap line on the daily view.
• Draw connections/records from the point-in-time daily series (the endpoint option lands in feat(webapp): show Free-plan usage against plan limits #6789) so the plotted value is the one the cap limits, and hide the cap line when a series is filtered or isolated (a slice can't be read against the whole-metric cap).
• Make the local ClickHouse seed realistic for this view (--mirror-db-counts): mirror the DB connection/record counts the gauge reads, scale counters to a fraction of the caps, and plateau them at the monthly cap.

Fixes NAN-6280

Stacked on #6789 (Free caps table, NAN-6237).

Testing

• Verified locally on a Free account: the cap line and cumulative/daily toggle on counter metrics, connections/records whose chart end matches the caps gauge, and the cap line hiding when filtering/isolating a slice.
• npm run ts-build and npm run lint clean.

Screen.Recording.2026-07-17.at.16.15.04.mov

[linear-code]

NAN-6280

[github-actions]

Preview Deploy

Status	URL	Deploy Logs	Last Updated
✅ Ready	Preview URL	Deploy Logs	17 Jul 2026, 15:50 UTC

[cubic-dev-ai]

2 issues found across 15 files

Confidence score: 4/5

• In scripts/seed-clickhouse.ts, buffering an entire account before flushing raises peak memory and could cause seed-clickhouse to OOM on larger multi-env/multi-day seeds, which would make seeding unreliable in CI or local setup—switch back to per-environment/chunked flushing or validate memory headroom on representative data before merging.
• In packages/webapp/src/utils/usage.ts, the JSDoc still documents the warning threshold as 80% while NEAR_LIMIT_RATIO now triggers near at 70%, which can mislead future changes and debugging—update both doc blocks to match the current behavior.

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/webapp/src/utils/usage.ts">

<violation number="1" location="packages/webapp/src/utils/usage.ts:47">
P3: Stale JSDoc still says the warning band starts at 80%. The `NEAR_LIMIT_RATIO` was lowered to 0.7 so `near` state now triggers at ≥70%. Update both docs to match.</violation>
</file>

<file name="scripts/seed-clickhouse.ts">

<violation number="1" location="scripts/seed-clickhouse.ts:628">
P2: Buffering the whole account before flushing increases peak memory use substantially compared with the previous per-environment flush path. For the seeded multi-env, multi-day dataset this can make `seed-clickhouse` much heavier or fail on larger `--days` runs.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>