refactor: uplift metrics

[jog1t]

Description

This pull request implements a dual-chart system for metrics visualization with brush-based zooming functionality. The changes introduce an overview chart showing 7 days of data with a brush selector, and a detail chart that displays the selected time range with higher resolution data.

Key changes include:

• Added chart synchronization context with default 24-hour brush range and 7-day maximum range
• Implemented separate hooks for overview and detail metrics data fetching
• Enhanced timestamp parsing to normalize date formats for consistent browser compatibility
• Added brush range clamping to prevent excessive data requests
• Removed time range selector in favor of interactive brush-based navigation
• Improved chart layout with proper spacing and legend positioning
• Added placeholder data support to prevent chart flickering during updates

Type of change

• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

The changes have been tested by:

• Verifying brush selection updates the detail chart with appropriate resolution
• Testing brush range clamping with selections exceeding the 7-day maximum
• Confirming timestamp normalization works across different date formats
• Validating smooth transitions between overview and detail data loading states

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[railway-app]

🚅 Deployed to the rivet-pr-4499 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
kitchen-sink	❌ Build Failed (View Logs)	Web	Apr 15, 2026 at 2:40 pm
frontend-cloud	😴 Sleeping (View Logs)	Web	Apr 15, 2026 at 11:19 am
website	😴 Sleeping (View Logs)	Web	Apr 13, 2026 at 5:16 pm
frontend-inspector	😴 Sleeping (View Logs)	Web	Mar 25, 2026 at 10:10 am
ladle	❌ Build Failed (View Logs)	Web	Mar 24, 2026 at 8:14 pm
mcp-hub	✅ Success (View Logs)	Web	Mar 24, 2026 at 8:13 pm

[jog1t]

• refactor: uplift metrics #4499 : 2 dependent PRs (#4503 , #4504 ) 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

PR Review: refactor: uplift metrics

The dual-chart overview+detail approach is solid architecture, and the brush-based zoom is a meaningful UX improvement over the dropdown. The timestamp normalization and zero-fill bucket alignment fixes address real bugs. A few issues worth addressing before merging:

---

Bug: Overview window becomes stale over time

metrics-page.tsx and namespace-metrics-page.tsx

Both pages compute startAt/endAt with an empty dependency array:

const { startAt, endAt } = useMemo(() => {
    const now = new Date();
    return { startAt: new Date(now.getTime() - OVERVIEW_RANGE_MS).toISOString(), endAt: now.toISOString() };
}, []); // never updates

refetchInterval: 30000 will keep re-fetching the same fixed window forever. After 30 minutes the chart is missing 30 minutes of recent data; after an hour it's missing an hour. The previous code recalculated on [timeRange] which isn't perfect, but the empty array is a regression. The window should advance with time — either recalculate it on each fetch (e.g. via a queryFn that derives the window at call time), or drive it from a stable periodic signal.

---

Missing keepPreviousData in namespace overview query

namespace-metrics-page.tsx

The useQuery call added refetchInterval but not placeholderData: keepPreviousData, while the equivalent hook in hooks.ts (used by metrics-page.tsx) does include it. The namespace page will still flicker on refetch.

---

initialBrushPositionRef mutation captures a stale scale

visx-brush-chart.tsx

if (initialBrushPositionRef.current === undefined && minDate < maxDate) {
    initialBrushPositionRef.current = {
        start: { x: xScale(brushDomain[0]) },
        end: { x: xScale(brushDomain[1]) },
    };
}

xScale is built from allValues and innerHeight, both of which depend on the series data. When this ref is first set (possibly on a placeholder/empty render), xScale maps over a different domain than it will once real data loads. The brush position will be set from a stale scale, which may place the handles outside their intended positions. Consider initializing only after the data-driven xScale is stable (e.g., guard on a non-empty allValues), or accept the useMemo reset cost and document why it's acceptable.

---

Removed "No data available" state

Both charts now silently render a flat zero-line when there is genuinely no data. The removed hasData guard existed for a reason — a user with no metrics traffic sees an empty chart with no explanation. Consider restoring it, or replacing it with a subtle empty-state annotation on the chart itself.

---

OVERVIEW_RANGE_MS and MAX_BRUSH_RANGE_MS represent the same value

hooks.ts exports OVERVIEW_RANGE_MS = 7 * 24 * 60 * 60 * 1000, and chart-sync-context.tsx exports MAX_BRUSH_RANGE_MS = 7 * 24 * 60 * 60 * 1000. They're used in different modules but mean the same thing. When someone changes one they'll likely miss the other. Consolidate into a single constant.

---

Nits

• Long lines in hooks.ts: Lines 90 and 95 exceed readable width. Break them across lines.
• parseRawDataPoints / parseApiSeriesZeroFilled in namespace-metrics-chart.tsx duplicate the buildSeries pattern from metrics-chart.tsx. They could live in a shared utility (e.g., series-utils.ts) to avoid future drift.
• Bottom margin change from 20 to 26 in visx-brush-chart.tsx has no comment. A brief note (e.g., "extra space for longer-format tick labels") would help reviewers understand it's intentional.
• VALID_RESOLUTIONS in hooks.ts has no comment explaining the unit (seconds). Adding // seconds on that line would clarify intent.

[jog1t]

Merge activity

• Mar 26, 2:44 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Mar 26, 2:45 AM UTC: Graphite couldn't merge this PR because it had merge conflicts.
• Apr 15, 3:02 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 15, 3:03 PM UTC: @jog1t merged this pull request with Graphite.

[github-actions]

Preview packages published to npm

Install with:

npm install rivetkit@pr-4499

All packages published as 0.0.0-pr.4499.21b0bf5 with tag pr-4499.

Engine binary is shipped via @rivetkit/engine-cli on linux-x64-musl, linux-arm64-musl, darwin-x64, and darwin-arm64. Windows users should use the release installer or set RIVET_ENGINE_BINARY.

Docker images:

docker pull rivetdev/engine:slim-21b0bf5
docker pull rivetdev/engine:full-21b0bf5

Individual packages

npm install rivetkit@pr-4499
npm install @rivetkit/react@pr-4499
npm install @rivetkit/rivetkit-native@pr-4499
npm install @rivetkit/sqlite-wasm@pr-4499
npm install @rivetkit/workflow-engine@pr-4499