web: admin revamp — operator's terminal + IA + bucketed metrics (Ehco1996#450)

* web: admin revamp — operator's terminal direction + IA shuffle + bucketed metrics

Visual: replace Inter with JetBrains Mono everywhere; sharper geometry
(rounded-md, 1px borders); rate-first home strip with ↓/↑ as the page's
anchor; full-width host throughput chart; lowercase page titles; hover-
only conn kill; logs zebra rows.

IA: flatten the 8-page / 2-group sidebar to 6 flat items. Home subsumes
the old standalone Node page (host charts embedded). Settings owns the
Updates flow as an embedded panel. /xray/users → /users, /xray/conns →
/conns. Legacy paths redirect.

Metrics store: query API now accepts a `step` (seconds) param. Node
metrics are bucket-averaged via GROUP BY (timestamp/step)*step; rule
metrics keep the last sample per (label,remote,bucket) so the SPA's
delta-on-consecutive-points trend math stays correct. Frontend picks a
step per window so 30d windows return ≤360 points.

New /api/v1/overview aggregate. XrayServer satisfies a new
glue.XrayStatus interface and is wired post-construction so web/
doesn't need to import pkg/xray. Saves the home page three RTs per
poll tick.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* web: fix y-axis truncation, enable metric_reader on darwin, simplify pass

Visual fix: chart y-axis was clipping "12 MB/s" to "2 MB/s" because the
default uPlot gutter is too narrow for 7-char byte labels. New
bytesShort() helper renders compact "12M/s" / "830K/s" form for axes;
keep verbose bytes() for tabular contexts.

Darwin metric_reader: node_darwin.go was a no-op since 2025-11-08 with a
stale "node_exporter has compatibility issues on macOS" comment. v1.10.2
ships working darwin collectors for cpu / meminfo / loadavg / filesystem
/ netdev — verified all the metrics ParseNodeMetrics expects are
emitted. Wire the same NewNodeCollector path as linux, with
--no-collector.thermal to silence "no CPU power status has been
recorded" log noise.

Simplify pass over the PR diff:
- Extract zapLevelToSlogLevel to internal/metrics/log_level.go (was
  duplicated verbatim across node_linux.go and node_darwin.go).
- QueryRuleMetric: deduplicate the column list and WHERE filters
  between bucketed and raw branches; share whereSQL/whereArgs.
- OverviewResp: drop redundant NetRateIn/NetRateOut — they duplicated
  host.network_in/out. SPA reads host() directly.
- Home page: memoize series() (was re-sorting + re-allocating every
  read across 3 charts); precompute topUsers scoring (was running
  recentBytes(u) O(n log n) times inside sort comparator); extract
  <ChartCard> + <ListHeader> components for the three near-identical
  card wrappers; delete section-divider comments and dead `void poll`.
- Settings + UpdatesPanel: lowercase CardHeader titles for consistency
  with the rest of the revamped pages.
- handler_api.go::Overview: hoist time.Now() to a local.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Ehco1996

internal/cli/config.go

@@ -127,6 +127,7 @@ func MustStartComponents(mainCtx context.Context, cfg *config.Config) {
 		}
 		if webS != nil {
 			xrayS.RegisterRoutes(webS.APIGroup())
+			webS.SetXrayStatus(xrayS)
 		}
 		if err := xrayS.Start(mainCtx); err != nil {
 			cliLogger.Fatalf("Start XrayServer meet err=%v", err)

internal/cmgr/ms/handler.go

@@ -2,6 +2,7 @@ package ms
 
 import (
 	"context"
+	"database/sql"
 
 	"github.com/Ehco1996/ehco/pkg/metric_reader"
 )
@@ -20,6 +21,10 @@ type QueryNodeMetricsReq struct {
 	StartTimestamp int64
 	EndTimestamp   int64
 	Num            int64
+	// Step buckets samples into N-second windows when > 1, averaging
+	// every gauge field per bucket. Lets the SPA pull 7d/30d windows
+	// without dragging back hundreds of thousands of raw points.
+	Step int64
 }
 
 type QueryNodeMetricsResp struct {
@@ -47,6 +52,11 @@ type QueryRuleMetricsReq struct {
 	StartTimestamp int64
 	EndTimestamp   int64
 	Num            int64
+	// Step keeps the last sample per (label, remote) within each
+	// N-second bucket. Counter-style fields (transmit bytes) keep
+	// monotonic semantics so the SPA's delta-on-consecutive-points
+	// trend math still works after bucketing.
+	Step int64
 }
 
 type QueryRuleMetricsResp struct {
@@ -94,13 +104,33 @@ func (ms *MetricsStore) AddRuleMetric(ctx context.Context, rm *metric_reader.Rul
 }
 
 func (ms *MetricsStore) QueryNodeMetric(ctx context.Context, req *QueryNodeMetricsReq) (*QueryNodeMetricsResp, error) {
-	rows, err := ms.db.QueryContext(ctx, `
-	SELECT timestamp, cpu_usage, memory_usage, disk_usage, network_in, network_out
-	FROM node_metrics
-	WHERE timestamp >= ? AND timestamp <= ?
-	ORDER BY timestamp DESC
-	LIMIT ?
-`, req.StartTimestamp, req.EndTimestamp, req.Num)
+	var (
+		rows *sql.Rows
+		err  error
+	)
+	if req.Step > 1 {
+		// Floor each timestamp to a step-second bucket and average every
+		// gauge field. Cheaper than rolling a separate downsample table
+		// for the windows we care about (≤30d).
+		rows, err = ms.db.QueryContext(ctx, `
+		SELECT (timestamp/?)*? AS bucket_ts,
+		       AVG(cpu_usage), AVG(memory_usage), AVG(disk_usage),
+		       AVG(network_in), AVG(network_out)
+		FROM node_metrics
+		WHERE timestamp >= ? AND timestamp <= ?
+		GROUP BY bucket_ts
+		ORDER BY bucket_ts DESC
+		LIMIT ?
+	`, req.Step, req.Step, req.StartTimestamp, req.EndTimestamp, req.Num)
+	} else {
+		rows, err = ms.db.QueryContext(ctx, `
+		SELECT timestamp, cpu_usage, memory_usage, disk_usage, network_in, network_out
+		FROM node_metrics
+		WHERE timestamp >= ? AND timestamp <= ?
+		ORDER BY timestamp DESC
+		LIMIT ?
+	`, req.StartTimestamp, req.EndTimestamp, req.Num)
+	}
 	if err != nil {
 		return nil, err
 	}
@@ -119,29 +149,37 @@ func (ms *MetricsStore) QueryNodeMetric(ctx context.Context, req *QueryNodeMetri
 }
 
 func (ms *MetricsStore) QueryRuleMetric(ctx context.Context, req *QueryRuleMetricsReq) (*QueryRuleMetricsResp, error) {
-	query := `
-        SELECT timestamp, label, remote, ping_latency,
-               tcp_connection_count, tcp_handshake_duration, tcp_network_transmit_bytes,
-               udp_connection_count, udp_handshake_duration, udp_network_transmit_bytes
-        FROM rule_metrics
-        WHERE timestamp >= ? AND timestamp <= ?
-    `
-	args := []interface{}{req.StartTimestamp, req.EndTimestamp}
-
+	// Bucketed mode keeps the last sample per (label, remote) inside each
+	// step-second window. The bytes columns are monotonic counters, so
+	// last-of-bucket preserves the deltas the SPA computes — averaging
+	// would smear the curve.
+	const cols = `timestamp, label, remote, ping_latency,
+        tcp_connection_count, tcp_handshake_duration, tcp_network_transmit_bytes,
+        udp_connection_count, udp_handshake_duration, udp_network_transmit_bytes`
+
+	whereSQL := "WHERE timestamp >= ? AND timestamp <= ?"
+	whereArgs := []interface{}{req.StartTimestamp, req.EndTimestamp}
 	if req.RuleLabel != "" {
-		query += " AND label = ?"
-		args = append(args, req.RuleLabel)
+		whereSQL += " AND label = ?"
+		whereArgs = append(whereArgs, req.RuleLabel)
 	}
 	if req.Remote != "" {
-		query += " AND remote = ?"
-		args = append(args, req.Remote)
+		whereSQL += " AND remote = ?"
+		whereArgs = append(whereArgs, req.Remote)
 	}
 
-	query += `
-        ORDER BY timestamp DESC
-        LIMIT ?
-    `
-	args = append(args, req.Num)
+	var query string
+	var args []interface{}
+	if req.Step > 1 {
+		query = "SELECT " + cols + " FROM rule_metrics WHERE rowid IN (" +
+			"SELECT MAX(rowid) FROM rule_metrics " + whereSQL +
+			" GROUP BY (timestamp/?), label, remote) ORDER BY timestamp DESC LIMIT ?"
+		args = append(append([]interface{}{}, whereArgs...), req.Step, req.Num)
+	} else {
+		query = "SELECT " + cols + " FROM rule_metrics " + whereSQL +
+			" ORDER BY timestamp DESC LIMIT ?"
+		args = append(whereArgs, req.Num)
+	}
 
 	rows, err := ms.db.Query(query, args...)
 	if err != nil {

internal/glue/interface.go

@@ -12,3 +12,21 @@ type HealthChecker interface {
 	// get relay by ID and check the connection health
 	HealthCheck(ctx context.Context, RelayID string) (int64, error)
 }
+
+// XrayStatus is the slice of XrayServer the web admin needs for its
+// aggregate /overview endpoint. Defined here so web/ doesn't need to
+// import pkg/xray.
+type XrayStatus interface {
+	// Snapshot returns instantaneous counters scraped from the user
+	// pool and conn tracker. Cheap — no DB hits.
+	Snapshot() XraySnapshot
+}
+
+type XraySnapshot struct {
+	Conns         int   `json:"conns"`
+	Users         int   `json:"users"`
+	EnabledUsers  int   `json:"enabled_users"`
+	RunningUsers  int   `json:"running_users"`
+	UploadTotal   int64 `json:"upload_total"`
+	DownloadTotal int64 `json:"download_total"`
+}

internal/metrics/log_level.go

@@ -0,0 +1,21 @@
+package metrics
+
+import (
+	"log/slog"
+	"strings"
+)
+
+func zapLevelToSlogLevel(zapLevel string) slog.Level {
+	switch strings.ToLower(zapLevel) {
+	case "debug":
+		return slog.LevelDebug
+	case "info":
+		return slog.LevelInfo
+	case "warn", "warning":
+		return slog.LevelWarn
+	case "error":
+		return slog.LevelError
+	default:
+		return slog.LevelInfo
+	}
+}

internal/metrics/node_darwin.go

@@ -3,12 +3,34 @@
 package metrics
 
 import (
+	"fmt"
+	"log/slog"
+	"os"
+
 	"github.com/Ehco1996/ehco/internal/config"
+	"github.com/alecthomas/kingpin/v2"
+	"github.com/prometheus/client_golang/prometheus"
+	"github.com/prometheus/node_exporter/collector"
 )
 
-// RegisterNodeExporterMetrics is a no-op on Darwin/macOS
-// node_exporter has compatibility issues on macOS, so we disable it
+// `thermal` collector logs an ERROR per scrape on most Macs with
+// "no CPU power status has been recorded". Disable it via kingpin so
+// logs stay quiet. Kept separate from node_linux.go because Linux
+// doesn't have the collector and shouldn't carry the flag noise.
 func RegisterNodeExporterMetrics(cfg *config.Config) error {
-	// node_exporter is not supported on macOS, skip registration
+	logger := slog.New(slog.NewTextHandler(os.Stdout, &slog.HandlerOptions{
+		Level: zapLevelToSlogLevel(cfg.LogLeveL),
+	}))
+
+	if _, err := kingpin.CommandLine.Parse([]string{
+		"--no-collector.thermal",
+	}); err != nil {
+		return err
+	}
+	nc, err := collector.NewNodeCollector(logger)
+	if err != nil {
+		return fmt.Errorf("couldn't create collector: %w", err)
+	}
+	prometheus.MustRegister(nc)
 	return nil
 }

internal/metrics/node_linux.go

@@ -6,30 +6,13 @@ import (
 	"fmt"
 	"log/slog"
 	"os"
-	"strings"
 
 	"github.com/Ehco1996/ehco/internal/config"
 	"github.com/alecthomas/kingpin/v2"
 	"github.com/prometheus/client_golang/prometheus"
 	"github.com/prometheus/node_exporter/collector"
 )
 
-// zapLevelToSlogLevel converts zap log level string to slog.Level
-func zapLevelToSlogLevel(zapLevel string) slog.Level {
-	switch strings.ToLower(zapLevel) {
-	case "debug":
-		return slog.LevelDebug
-	case "info":
-		return slog.LevelInfo
-	case "warn", "warning":
-		return slog.LevelWarn
-	case "error":
-		return slog.LevelError
-	default:
-		return slog.LevelInfo
-	}
-}
-
 func RegisterNodeExporterMetrics(cfg *config.Config) error {
 	slogLevel := zapLevelToSlogLevel(cfg.LogLeveL)
 	logger := slog.New(slog.NewTextHandler(os.Stdout, &slog.HandlerOptions{

internal/web/handler_api.go

@@ -8,6 +8,7 @@ import (
 	"time"
 
 	"github.com/Ehco1996/ehco/internal/cmgr/ms"
+	"github.com/Ehco1996/ehco/internal/glue"
 	"github.com/labstack/echo/v4"
 )
 
@@ -20,6 +21,7 @@ type queryParams struct {
 	startTS int64
 	endTS   int64
 	latest  bool
+	step    int64
 }
 
 func parseQueryParams(c echo.Context) (*queryParams, error) {
@@ -41,6 +43,10 @@ func parseQueryParams(c echo.Context) (*queryParams, error) {
 		params.latest = latest
 	}
 
+	if step, err := strconv.ParseInt(c.QueryParam("step"), 10, 64); err == nil && step > 0 {
+		params.step = step
+	}
+
 	if params.startTS >= params.endTS {
 		return nil, fmt.Errorf(errInvalidParam, "time range")
 	}
@@ -60,7 +66,7 @@ func (s *Server) GetNodeMetrics(c echo.Context) error {
 	if err != nil {
 		return echo.NewHTTPError(http.StatusBadRequest, err.Error())
 	}
-	req := &ms.QueryNodeMetricsReq{StartTimestamp: params.startTS, EndTimestamp: params.endTS, Num: -1}
+	req := &ms.QueryNodeMetricsReq{StartTimestamp: params.startTS, EndTimestamp: params.endTS, Num: -1, Step: params.step}
 	if params.latest {
 		req.Num = 1
 	}
@@ -80,6 +86,7 @@ func (s *Server) GetRuleMetrics(c echo.Context) error {
 		StartTimestamp: params.startTS,
 		EndTimestamp:   params.endTS,
 		Num:            -1,
+		Step:           params.step,
 		RuleLabel:      c.QueryParam("label"),
 		Remote:         c.QueryParam("remote"),
 	}
@@ -134,6 +141,44 @@ func (s *Server) HandleReload(c echo.Context) error {
 	return nil
 }
 
+// OverviewResp bundles everything the SPA's home page polls — saves
+// the front-end the 3 parallel fetches it would otherwise need on
+// every refresh tick. Fields stay nil/zero when their subsystem is
+// disabled (xray-less deployments, no host sampler yet).
+type OverviewResp struct {
+	Xray  *glue.XraySnapshot `json:"xray,omitempty"`
+	Host  *ms.NodeMetrics    `json:"host,omitempty"`
+	Rules int                `json:"rules"`
+}
+
+func (s *Server) Overview(c echo.Context) error {
+	out := OverviewResp{}
+
+	if s.cfg != nil {
+		out.Rules = len(s.cfg.RelayConfigs)
+	}
+
+	if p := s.xrayStatus.Load(); p != nil && *p != nil {
+		snap := (*p).Snapshot()
+		out.Xray = &snap
+	}
+
+	if s.connMgr != nil {
+		now := time.Now()
+		req := &ms.QueryNodeMetricsReq{
+			StartTimestamp: now.Add(-5 * time.Minute).Unix(),
+			EndTimestamp:   now.Unix(),
+			Num:            1,
+		}
+		if resp, err := s.connMgr.QueryNodeMetrics(c.Request().Context(), req); err == nil && len(resp.Data) > 0 {
+			h := resp.Data[0]
+			out.Host = &h
+		}
+	}
+
+	return c.JSON(http.StatusOK, out)
+}
+
 func (s *Server) HandleHealthCheck(c echo.Context) error {
 	relayLabel := c.QueryParam("relay_label")
 	if relayLabel == "" {

internal/web/server.go

@@ -34,6 +34,20 @@ type Server struct {
 
 	connMgr   cmgr.Cmgr
 	updateJob atomic.Pointer[JobStatus]
+
+	// xrayStatus is wired post-construction by cli boot once the
+	// XrayServer exists. Always read via Load() — may be nil when
+	// xray sync is disabled. Atomic pointer keeps it lock-free.
+	xrayStatus atomic.Pointer[glue.XrayStatus]
+}
+
+// SetXrayStatus is called by cli boot once the XrayServer is
+// constructed. The /overview handler picks it up via Load().
+func (s *Server) SetXrayStatus(p glue.XrayStatus) {
+	if p == nil {
+		return
+	}
+	s.xrayStatus.Store(&p)
 }
 
 func NewServer(
@@ -112,6 +126,7 @@ func setupRoutes(s *Server) {
 	api.GET("/health_check/", s.HandleHealthCheck)
 	api.GET("/node_metrics/", s.GetNodeMetrics)
 	api.GET("/rule_metrics/", s.GetRuleMetrics)
+	api.GET("/overview", s.Overview)
 	api.GET("/version", s.Version)
 	api.GET("/update/check", s.UpdateCheck)
 	api.POST("/update/apply", s.UpdateApply)