<!-- greptile_comment -->

<h3>Greptile Summary</h3>

This PR introduces client-side caching for the Spectrum chart's data by fetching data for **all available routers** in a single API request and filtering locally by `currentRouter` when rendering. Previously, switching routers triggered a new API call; now it just re-renders from the cached `buckets` array. Additionally, the `activeMetrics` synchronization logic in IPChart and ProtocolChart is extracted into a dedicated `$effect`, decoupling metric changes (render-only) from filter changes (fetch + render).

- **SpectrumStatsChart**: `FilterInputs.router` (single string) replaced with `FilterInputs.routers` (string array). `renderChart()` now filters cached `buckets` by `currentRouter` state. A new `availableRouters` prop drives the multi-router fetch, while `props.router` selects which router to display.
- **IPChart / ProtocolChart**: Metric sync logic moved to a standalone `$effect` using `lastIncomingMetricsKey` for deduplication, replacing the inline `arraysEqual` helper that was embedded in the filter effect.

<h3>Confidence Score: 4/5</h3>

- This PR is safe to merge — the caching refactor is well-structured and the metrics effect extraction is a clean separation of concerns.
- The changes follow existing patterns consistently across all three files. The spectrum caching logic correctly sends all routers to the API and filters client-side. The only minor concern is that the radio button `checked` state still references `props.router` rather than `currentRouter`, which could momentarily show no selection if the prop hasn't synced yet, but the parent already handles initial selection.
- Pay close attention to `netflow-webapp/src/lib/components/charts/SpectrumStatsChart.svelte` — it has the most complex logic changes with the multi-router caching and router resolution.

<h3>Important Files Changed</h3>




| Filename | Overview |
|----------|----------|
| netflow-webapp/src/lib/components/charts/SpectrumStatsChart.svelte | Core change: fetches spectrum data for all available routers and filters client-side by `currentRouter`; `FilterInputs` changed from single `router` to `routers[]`. Minor concern around radio button `checked` state still using `props.router` rather than `currentRouter`. |
| netflow-webapp/src/lib/components/charts/IPChart.svelte | Extracted `activeMetrics` sync into its own `$effect` with `lastIncomingMetricsKey` dedup; removed inline `arraysEqual` helper. Clean refactor with no behavioral changes. |
| netflow-webapp/src/lib/components/charts/ProtocolChart.svelte | Same `activeMetrics` extraction as IPChart — moved to dedicated `$effect` with key-based deduplication. No issues found. |

</details>



<h3>Sequence Diagram</h3>

```mermaid
sequenceDiagram
    participant Parent as +page.svelte
    participant Spectrum as SpectrumStatsChart
    participant API as /api/netflow/spectrum-stats

    Note over Parent: User enables routers
    Parent->>Spectrum: availableRouters=[R1,R2], router=R1

    Spectrum->>Spectrum: $effect: compute availableRouters, nextRouter=R1
    Spectrum->>API: GET ?routers=R1,R2&...
    API-->>Spectrum: buckets (all routers)
    Spectrum->>Spectrum: renderChart() filters buckets by currentRouter=R1

    Note over Parent: User clicks radio → R2
    Parent->>Spectrum: router=R2 (availableRouters unchanged)
    Spectrum->>Spectrum: $effect: nextRouter=R2, currentRouter←R2
    Spectrum->>Spectrum: renderChart() filters cached buckets by R2
    Note over Spectrum: No API call needed (cache hit)
```

<sub>Last reviewed commit: 7ff4a3c</sub>

<!-- greptile_other_comments_section -->

<!-- /greptile_comment -->