webui: add windowed totals + lifetime KPIs to home dashboard

The home page previously only surfaced instantaneous rates, so there
was no way to answer "how much has this node moved in the last N
hours". Add two new KPI strips driven by the existing time-window
selector:

- windowed: total in/out (trapezoidal integration of the rate series
  already fetched for the throughput chart) + peak in/out
- lifetime: in/out from XraySnapshot + last config reload (relative)

Also add a lifetime-total column to the top-users list (already
available on XrayUser as upload_total + download_total).

Backend: OverviewResp gains last_reload_at (sourced from a new
Config.LastLoadTime accessor over the existing lastLoadTime field).
Boot time is intentionally not duplicated here — settings page
already shows it.

Note on accuracy: windowed totals are computed from bucketed average
rates, so they slightly under-count short bursts; peaks at long
windows (30d → 4h step) are bucket-averaged peaks, not instantaneous.
Good enough for v1; a monotonic cum_in/cum_out column on node_metrics
would make this exact.

Author: Ehco1996

internal/config/config.go

@@ -52,6 +52,13 @@ func (c *Config) NeedSyncFromServer() bool {
 	return strings.Contains(c.PATH, "http")
 }
 
+// LastLoadTime returns the wall-clock timestamp of the most recent
+// successful (or attempted — see LoadConfig) reload. Zero before the
+// first call.
+func (c *Config) LastLoadTime() time.Time {
+	return c.lastLoadTime
+}
+
 func (c *Config) LoadConfig(force bool) error {
 	if c.ReloadInterval > 0 && time.Since(c.lastLoadTime).Seconds() < float64(c.ReloadInterval) && !force {
 		c.l.Warnf("Skip Load Config, last load time: %s", c.lastLoadTime)

internal/web/handler_api.go

@@ -127,13 +127,19 @@ type OverviewResp struct {
 	Xray  *glue.XraySnapshot `json:"xray,omitempty"`
 	Host  *ms.NodeMetrics    `json:"host,omitempty"`
 	Rules int                `json:"rules"`
+	// LastReloadAt is the wall-clock timestamp of the most recent config
+	// reload attempt (file or HTTP). The freshness signal for routing
+	// rules / xray inbounds — distinct from boot time, which is
+	// surfaced on the settings page.
+	LastReloadAt time.Time `json:"last_reload_at,omitempty"`
 }
 
 func (s *Server) Overview(c echo.Context) error {
 	out := OverviewResp{}
 
 	if s.cfg != nil {
 		out.Rules = len(s.cfg.RelayConfigs)
+		out.LastReloadAt = s.cfg.LastLoadTime()
 	}
 
 	if p := s.xrayStatus.Load(); p != nil && *p != nil {

internal/web/webui/src/api/types.ts

@@ -47,6 +47,9 @@ export interface OverviewResp {
   xray?: XraySnapshot;
   host?: NodeMetric;
   rules: number;
+  // RFC3339; zero-value omitted by the server. Time of last config
+  // reload attempt (file or remote HTTP).
+  last_reload_at?: string;
 }
 
 export interface QueryNodeMetricsResp {

internal/web/webui/src/pages/Home.tsx

@@ -75,6 +75,36 @@ export default function Home() {
 
   const xray = () => overview()?.xray;
   const host = () => overview()?.host;
+  const lastReload = () => {
+    const v = overview()?.last_reload_at;
+    return v && !v.startsWith("0001-01-01") ? v : undefined;
+  };
+
+  // Trapezoidal integration of rate samples → bytes over the window.
+  // Each sample is bytes/sec averaged over its bucket; multiply by the
+  // gap to the next sample. The first and last samples each contribute
+  // half a gap so the total tracks the chart area.
+  const windowedTotals = createMemo(() => {
+    const s = series();
+    if (s.length < 2) return { in: 0, out: 0, peakIn: 0, peakOut: 0 };
+    let totIn = 0;
+    let totOut = 0;
+    let peakIn = 0;
+    let peakOut = 0;
+    for (let i = 0; i < s.length; i++) {
+      const cur = s[i];
+      if (cur.network_in > peakIn) peakIn = cur.network_in;
+      if (cur.network_out > peakOut) peakOut = cur.network_out;
+      if (i < s.length - 1) {
+        const dt = s[i + 1].timestamp - cur.timestamp;
+        if (dt > 0 && dt < 24 * 3600) {
+          totIn += ((cur.network_in + s[i + 1].network_in) / 2) * dt;
+          totOut += ((cur.network_out + s[i + 1].network_out) / 2) * dt;
+        }
+      }
+    }
+    return { in: totIn, out: totOut, peakIn, peakOut };
+  });
 
   const topUsers = createMemo<ScoredUser[]>(() => {
     const list = (users() ?? []).map<ScoredUser>((u) => ({
@@ -125,6 +155,15 @@ export default function Home() {
         mem={host()?.memory_usage}
       />
 
+      <WindowedAnchor
+        totals={windowedTotals()}
+        haveSeries={series().length > 1}
+        windowSec={windowSec()}
+        lifetimeIn={xray()?.upload_total ?? 0}
+        lifetimeOut={xray()?.download_total ?? 0}
+        lastReload={lastReload()}
+      />
+
       <ChartCard
         class="mt-3"
         title="throughput"
@@ -159,7 +198,11 @@ export default function Home() {
 
       <div class="mt-3 grid grid-cols-1 gap-3 lg:grid-cols-2">
         <Card padded={false}>
-          <ListHeader title="top users" subtitle="by recent throughput · last 5m" linkTo="/users" />
+          <ListHeader
+            title="top users"
+            subtitle="recent · last 5m  ·  lifetime total"
+            linkTo="/users"
+          />
           <Show
             when={topUsers().length}
             fallback={<EmptyState icon={<UsersIcon size={24} />} title="No users registered" />}
@@ -181,6 +224,15 @@ export default function Home() {
                     <span class="w-20 shrink-0 text-right font-mono text-[11px] tabular-nums text-zinc-500">
                       {recent > 0 ? bytes(recent) : "—"}
                     </span>
+                    <span
+                      class="hidden w-20 shrink-0 text-right font-mono text-[11px] tabular-nums text-zinc-400 sm:inline-block dark:text-zinc-500"
+                      title="lifetime total since process start"
+                    >
+                      {(() => {
+                        const total = user.upload_total + user.download_total;
+                        return total > 0 ? bytes(total) : "—";
+                      })()}
+                    </span>
                     <span class="w-10 shrink-0 text-right font-mono text-[11px] tabular-nums text-zinc-500">
                       {user.tcp_conn_count}c
                     </span>
@@ -324,6 +376,53 @@ function ThroughputAnchor(props: {
   );
 }
 
+function windowLabel(sec: number): string {
+  if (sec < 3600) return `${Math.round(sec / 60)}m`;
+  if (sec < 86400) return `${Math.round(sec / 3600)}h`;
+  return `${Math.round(sec / 86400)}d`;
+}
+
+function WindowedAnchor(props: {
+  totals: { in: number; out: number; peakIn: number; peakOut: number };
+  haveSeries: boolean;
+  windowSec: number;
+  lifetimeIn: number;
+  lifetimeOut: number;
+  lastReload?: string;
+}) {
+  const win = () => windowLabel(props.windowSec);
+  const dash = (s: string) => (props.haveSeries ? s : "—");
+  return (
+    <div class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
+      <Card padded={false}>
+        <div class="px-5 pt-3 pb-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-zinc-500">
+          windowed · last {win()}
+        </div>
+        <div class="grid grid-cols-2 divide-x divide-zinc-200 sm:grid-cols-4 dark:divide-zinc-800">
+          <Stat label="total in" value={dash(bytes(props.totals.in))} />
+          <Stat label="total out" value={dash(bytes(props.totals.out))} />
+          <Stat label="peak in" value={dash(`${bytes(props.totals.peakIn)}/s`)} />
+          <Stat label="peak out" value={dash(`${bytes(props.totals.peakOut)}/s`)} />
+        </div>
+      </Card>
+      <Card padded={false}>
+        <div class="px-5 pt-3 pb-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-zinc-500">
+          lifetime · since boot
+        </div>
+        <div class="grid grid-cols-3 divide-x divide-zinc-200 dark:divide-zinc-800">
+          <Stat label="in" value={bytes(props.lifetimeIn)} />
+          <Stat label="out" value={bytes(props.lifetimeOut)} />
+          <Stat
+            label="config"
+            value={props.lastReload ? relTime(props.lastReload) : "—"}
+            hint="reload"
+          />
+        </div>
+      </Card>
+    </div>
+  );
+}
+
 function Stat(props: { label: string; value: string | number; hint?: string }) {
   return (
     <div class="px-4 py-4 sm:py-3.5">