feat(metrics): persist the history-chart range in the URL

Clicking a range now writes ?range=<key> (replaceState — no history spam) and the
chart restores it on init, so reloading the SAME page keeps the chosen range. Opening
the page fresh (no param) still defaults to 24h.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

resources/js/app.js

@@ -261,13 +261,27 @@ document.addEventListener('alpine:init', () => {
         W: 1000,
         H: 260,
 
+        ranges: ['1h', '24h', '7d', '30d'],
+
         init() {
+            // Restore the range from the URL (?range=) so a reload of the SAME page keeps the choice;
+            // opening the page fresh (no param) falls back to the 24h default.
+            const r = new URL(window.location.href).searchParams.get('range');
+            if (this.ranges.includes(r)) this.range = r;
             this.reload();
             this._timer = setInterval(() => this.reload(true), 60000); // keep it fresh
         },
         destroy() { clearInterval(this._timer); },
 
-        setRange(r) { if (r !== this.range) { this.range = r; this.reload(); } },
+        setRange(r) {
+            if (r === this.range || ! this.ranges.includes(r)) return;
+            this.range = r;
+            // Reflect the choice in the URL (replace, not push — no history spam) so it survives a reload.
+            const url = new URL(window.location.href);
+            url.searchParams.set('range', r);
+            window.history.replaceState(window.history.state, '', url);
+            this.reload();
+        },
 
         reload(silent = false) {
             if (! silent) this.loading = true;