feat(phase-b): metrics history ring buffer + sparkline charts

Add a 24h per-node metrics ring buffer to the aggregator (1440 samples
at 1-min resolution via background poller), expose via
GET /api/v2/node/:name/metrics-history, and wire up hot-tier usage and
cache hit-rate sparklines in NodeCard using Recharts AreaChart/LineChart.

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

claw-store/src/serve_v2.rs

@@ -13,12 +13,13 @@
 //! Design doc: `docs/dashboard-v2.md`.
 
 use axum::{
-    extract::{Path, State},
+    extract::{Path, Query, State},
     http::StatusCode,
     routing::{get, post},
     Json, Router,
 };
 use serde::{Deserialize, Serialize};
+use std::collections::{HashMap, VecDeque};
 use std::net::SocketAddr;
 use std::sync::Arc;
 use std::time::Duration;
@@ -33,6 +34,57 @@ use crate::cluster::transport::{NodeIdentity, QuicClient};
 use crate::config::{Config, PeerEntry, TokenEntry};
 use crate::sessions::{LeasedTag, Session, SessionStore};
 
+// ── metrics history ring buffer ──────────────────────────────────
+
+const HISTORY_MAX_SAMPLES: usize = 1440; // 24h at 1-min resolution
+
+/// One time-series sample snapshotted from a peer's DashboardStatus RPC.
+#[derive(Debug, Clone, Serialize)]
+pub struct MetricSample {
+    pub unix_ts: u64,
+    pub hot_used_bytes: u64,
+    pub hot_max_bytes: u64,
+    pub cache_hit_rate: f64,
+    pub cache_hits: u64,
+    pub cache_misses: u64,
+    pub has_chunk_hits: u64,
+    pub has_chunk_misses: u64,
+    pub fs_used_bytes: u64,
+    pub fs_total_bytes: u64,
+    pub fs_available_bytes: u64,
+}
+
+pub struct MetricsHistory {
+    samples: HashMap<String, VecDeque<MetricSample>>,
+}
+
+impl MetricsHistory {
+    fn new() -> Self {
+        Self { samples: HashMap::new() }
+    }
+
+    fn push(&mut self, node: &str, sample: MetricSample) {
+        let deque = self.samples.entry(node.to_string()).or_default();
+        deque.push_back(sample);
+        while deque.len() > HISTORY_MAX_SAMPLES {
+            deque.pop_front();
+        }
+    }
+
+    fn get_last(&self, node: &str, limit: usize) -> Vec<MetricSample> {
+        let limit = limit.min(HISTORY_MAX_SAMPLES);
+        self.samples
+            .get(node)
+            .map(|d| {
+                let skip = d.len().saturating_sub(limit);
+                d.iter().skip(skip).cloned().collect()
+            })
+            .unwrap_or_default()
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────
+
 /// Aggregator runtime: one QuicClient, one peer list, one identity.
 ///
 /// The client is reused across every RPC (quinn holds one UDP
@@ -68,6 +120,9 @@ pub struct V2State {
     /// leases and are reaped by a background sweeper when their
     /// `expires_at_unix` passes without a `renew` or `commit`.
     pub sessions: SessionStore,
+    /// Ring buffer of per-node metric samples (Phase B). 1440 entries
+    /// = 24h at 1-min resolution. Written by `metrics_poller`.
+    pub history: Arc<tokio::sync::Mutex<MetricsHistory>>,
 }
 
 impl V2State {
@@ -103,6 +158,7 @@ impl V2State {
                 .map(|a| a.tokens.clone())
                 .unwrap_or_default(),
             sessions,
+            history: Arc::new(tokio::sync::Mutex::new(MetricsHistory::new())),
         })
     }
 
@@ -514,6 +570,7 @@ impl V2State {
             api_token: self.api_token.clone(),
             token_entries: self.token_entries.clone(),
             sessions: self.sessions.clone(),
+            history: self.history.clone(),
         }
     }
 }
@@ -1289,6 +1346,64 @@ async fn reap_expired(state: Arc<V2State>, sess: Session) {
 ///
 /// Also spawns the background TTL sweeper (Phase 9 S1). The task is
 /// detached — its lifetime is the process lifetime.
+// ── metrics poller (Phase B) ─────────────────────────────────────
+
+/// Background task: poll every peer every 60s, append a `MetricSample`
+/// to the ring buffer. Runs indefinitely — dropped only on daemon exit.
+async fn metrics_poller(state: Arc<V2State>) {
+    let mut interval = tokio::time::interval(Duration::from_secs(60));
+    interval.set_missed_tick_behavior(tokio::time::MissedTickBehavior::Skip);
+    loop {
+        interval.tick().await;
+        for peer in &state.peers {
+            let peer_name = peer.name.clone();
+            match state.fetch_node(peer).await {
+                Ok(r) => {
+                    let now = std::time::SystemTime::now()
+                        .duration_since(std::time::UNIX_EPOCH)
+                        .unwrap_or_default()
+                        .as_secs();
+                    let sample = MetricSample {
+                        unix_ts: now,
+                        hot_used_bytes: r.hot.as_ref().map(|h| h.used_bytes).unwrap_or(0),
+                        hot_max_bytes: r.hot.as_ref().map(|h| h.max_bytes).unwrap_or(0),
+                        cache_hit_rate: r.cache.as_ref().map(|c| c.hit_rate).unwrap_or(0.0),
+                        cache_hits: r.cache.as_ref().map(|c| c.hits).unwrap_or(0),
+                        cache_misses: r.cache.as_ref().map(|c| c.misses).unwrap_or(0),
+                        has_chunk_hits: r.cache.as_ref().map(|c| c.has_chunk_hits).unwrap_or(0),
+                        has_chunk_misses: r.cache.as_ref().map(|c| c.has_chunk_misses).unwrap_or(0),
+                        fs_used_bytes: r.filesystem.as_ref().map(|f| f.used_bytes).unwrap_or(0),
+                        fs_total_bytes: r.filesystem.as_ref().map(|f| f.total_bytes).unwrap_or(0),
+                        fs_available_bytes: r.filesystem.as_ref().map(|f| f.available_bytes).unwrap_or(0),
+                    };
+                    let mut hist = state.history.lock().await;
+                    hist.push(&peer_name, sample);
+                }
+                Err(e) => {
+                    tracing::debug!(peer = %peer_name, error = %e, "metrics poll skipped");
+                }
+            }
+        }
+    }
+}
+
+#[derive(Deserialize)]
+struct MetricsHistoryQuery {
+    limit: Option<usize>,
+}
+
+async fn handle_metrics_history(
+    Path(name): Path<String>,
+    Query(q): Query<MetricsHistoryQuery>,
+    State(s): State<Arc<V2State>>,
+) -> Json<Vec<MetricSample>> {
+    let limit = q.limit.unwrap_or(60).min(1440);
+    let hist = s.history.lock().await;
+    Json(hist.get_last(&name, limit))
+}
+
+// ─────────────────────────────────────────────────────────────────
+
 pub fn build(state: Arc<V2State>) -> Router {
     // Spawn the sweeper. 15s tick is a reasonable balance: quick
     // enough that a mid-wizard-close cleanup feels prompt, slow
@@ -1305,9 +1420,12 @@ pub fn build(state: Arc<V2State>) -> Router {
             },
         );
     }
+    // Spawn the metrics ring-buffer poller (Phase B).
+    tokio::spawn(metrics_poller(state.clone()));
     Router::new()
         .route("/api/v2/fleet", get(handle_fleet))
         .route("/api/v2/node/:name/status", get(handle_node_status))
+        .route("/api/v2/node/:name/metrics-history", get(handle_metrics_history))
         .route("/api/v2/storage/blobs", get(handle_blobs))
         .route("/api/v2/storage/tags", get(handle_tags))
         .route("/api/v2/storage/refs", get(handle_refs))

dashboard-v2/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "react": "^19.2.6",
         "react-dom": "^19.2.6",
+        "recharts": "^3.10.0",
         "wouter": "^3.7.1"
       },
       "devDependencies": {
@@ -176,6 +177,31 @@
         "url": "https://github.com/sponsors/Boshen"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+      "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.5.tgz",
@@ -269,9 +295,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -289,9 +312,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -309,9 +329,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -329,9 +346,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -349,9 +363,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -369,9 +380,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -458,6 +466,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
@@ -469,11 +487,65 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
+    },
     "node_modules/@types/react": {
       "version": "19.2.17",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
       "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -489,6 +561,11 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.3.tgz",
@@ -722,6 +799,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -749,9 +834,124 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -793,6 +993,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.49.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.49.0.tgz",
+      "integrity": "sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g=="
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -803,6 +1008,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw=="
+    },
     "node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -921,6 +1131,23 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/immer": {
+      "version": "11.1.15",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.15.tgz",
+      "integrity": "sha512-VrNANlmnWQnh5COXIIOQXM9oOJw7naGKlBT74ZOOR6lpVXc3gFEu9FJLDFcpCJ2j+NWr8TIwtWD//T6ZX6TKiQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1136,9 +1363,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -1160,9 +1384,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -1184,9 +1405,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -1208,9 +1426,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -1639,6 +1854,34 @@
         "react": "^19.2.7"
       }
     },
+    "node_modules/react-is": {
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.8.tgz",
+      "integrity": "sha512-s5un28nYxKJw5gvUHyW5PCC28CvBqLu9r3cWgzHT4Vo/5fqqkFcdRYsGcKf50WMPpjjFZS5d76fn3YCo2njKwQ==",
+      "peer": true
+    },
+    "node_modules/react-redux": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -1662,6 +1905,45 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.10.0.tgz",
+      "integrity": "sha512-wulMvfncpIlmu2uFtRU/mE5/+NiVtASXkw2KdwJTdHs3WsASX0WxZlX+rpKgyn5BDbIhkPtCpUKkB9XNK5KE0w==",
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^11.1.8",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.2.0",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/regexparam": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-3.0.0.tgz",
@@ -1671,6 +1953,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+      "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw=="
+    },
     "node_modules/resolve": {
       "version": "1.22.12",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
@@ -1875,6 +2162,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -2012,6 +2304,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/vite": {
       "version": "8.1.4",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.4.tgz",

dashboard-v2/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
+    "recharts": "^3.10.0",
     "wouter": "^3.7.1"
   },
   "devDependencies": {

dashboard-v2/src/components/NodeCard.tsx

@@ -1,6 +1,7 @@
 import { Link } from 'wouter';
 import { NodeStatusV2, fmtBytes, fmtUptime } from '../lib/api';
 import { StorageBar } from './StorageBar';
+import { NodeHistorySparklines } from './NodeHistorySparklines';
 
 interface Props {
   node: NodeStatusV2;
@@ -122,6 +123,12 @@ export function NodeCard({ node }: Props) {
                 ))}
               </div>
             )}
+
+            {/* Sparklines (Phase B) — fetches its own 1h history */}
+            <NodeHistorySparklines
+              nodeName={node.node_name}
+              hotMaxBytes={node.hot?.max_bytes ?? 0}
+            />
           </>
         )}
       </a>

dashboard-v2/src/components/NodeHistorySparklines.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useState } from 'react';
+import {
+  AreaChart,
+  Area,
+  LineChart,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
+  ReferenceLine,
+} from 'recharts';
+import { api, MetricSample, fmtBytes } from '../lib/api';
+
+interface Props {
+  nodeName: string;
+  hotMaxBytes: number;
+}
+
+// Compact tooltip for sparklines — shows a single value line.
+function SparkTooltip({
+  active,
+  payload,
+  label: _label,
+  formatter,
+}: {
+  active?: boolean;
+  payload?: { value: number }[];
+  label?: unknown;
+  formatter: (v: number) => string;
+}) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="rounded bg-slate-800 border border-slate-700 px-2 py-1 text-xs text-slate-200 shadow-lg">
+      {formatter(payload[0].value)}
+    </div>
+  );
+}
+
+export function NodeHistorySparklines({ nodeName, hotMaxBytes }: Props) {
+  const [samples, setSamples] = useState<MetricSample[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    api
+      .metricsHistory(nodeName, 60)
+      .then((data) => {
+        if (!cancelled) setSamples(data);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [nodeName]);
+
+  if (samples.length < 2) return null;
+
+  // Recharts data arrays
+  const hotData = samples.map((s) => ({ t: s.unix_ts, v: s.hot_used_bytes }));
+  const hitData = samples.map((s) => ({
+    t: s.unix_ts,
+    v: Math.round(s.cache_hit_rate * 100),
+  }));
+
+  // Hot-tier ceiling reference line (90% of max = gc threshold)
+  const gcLine = hotMaxBytes > 0 ? hotMaxBytes * 0.9 : null;
+
+  return (
+    <div className="space-y-3">
+      {/* Hot-tier usage sparkline */}
+      {hotMaxBytes > 0 && (
+        <div>
+          <div className="flex justify-between text-xs text-slate-500 mb-0.5">
+            <span>hot tier — 1h history</span>
+            <span>{fmtBytes(hotData[hotData.length - 1].v)}</span>
+          </div>
+          <ResponsiveContainer width="100%" height={40}>
+            <AreaChart data={hotData} margin={{ top: 2, right: 0, bottom: 2, left: 0 }}>
+              <defs>
+                <linearGradient id={`hg-${nodeName}`} x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.4} />
+                  <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              {gcLine && (
+                <ReferenceLine
+                  y={gcLine}
+                  stroke="#ef4444"
+                  strokeDasharray="3 3"
+                  strokeWidth={1}
+                />
+              )}
+              <Area
+                type="monotone"
+                dataKey="v"
+                stroke="#3b82f6"
+                strokeWidth={1.5}
+                fill={`url(#hg-${nodeName})`}
+                dot={false}
+                isAnimationActive={false}
+              />
+              <Tooltip
+                content={
+                  <SparkTooltip formatter={(v) => fmtBytes(v)} />
+                }
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      )}
+
+      {/* Cache hit-rate sparkline */}
+      <div>
+        <div className="flex justify-between text-xs text-slate-500 mb-0.5">
+          <span>cache hit rate — 1h history</span>
+          <span>{hitData[hitData.length - 1].v}%</span>
+        </div>
+        <ResponsiveContainer width="100%" height={40}>
+          <LineChart data={hitData} margin={{ top: 2, right: 0, bottom: 2, left: 0 }}>
+            <Line
+              type="monotone"
+              dataKey="v"
+              stroke="#10b981"
+              strokeWidth={1.5}
+              dot={false}
+              isAnimationActive={false}
+            />
+            <Tooltip
+              content={
+                <SparkTooltip formatter={(v) => `${v}%`} />
+              }
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}

dashboard-v2/src/lib/api.ts

@@ -142,10 +142,27 @@ export interface ProjectRow {
   tier: 'active' | 'recent' | 'idle' | string;
 }
 
+/** One 1-minute snapshot from the server-side metrics ring buffer. */
+export interface MetricSample {
+  unix_ts: number;
+  hot_used_bytes: number;
+  hot_max_bytes: number;
+  cache_hit_rate: number;
+  cache_hits: number;
+  cache_misses: number;
+  has_chunk_hits: number;
+  has_chunk_misses: number;
+  fs_used_bytes: number;
+  fs_total_bytes: number;
+  fs_available_bytes: number;
+}
+
 export const api = {
   fleet: () => get<FleetSnapshot>('/v2/fleet'),
   projects: () => get<ProjectRow[]>('/v2/projects'),
   nodeStatus: (name: string) => get<NodeStatusV2>(`/v2/node/${name}/status`),
+  metricsHistory: (name: string, limit = 60) =>
+    get<MetricSample[]>(`/v2/node/${name}/metrics-history?limit=${limit}`),
   blobs: (limit = 200, offset = 0) =>
     get<BlobSummary[]>(`/v2/storage/blobs?limit=${limit}&offset=${offset}`),
   tags: (prefix = '') =>