Add advanced container stats tab with timeframes and I/O charts.

Expand server history samples with network/block rates and longer
retention, and rebuild the details Stats tab with live KPIs, 1m–30m
windows, auto-scale, pause, CSV export, and CPU/memory/net/disk charts.

index.html

@@ -1337,33 +1337,119 @@
           
           <!-- Stats Pane -->
           <div class="tab-pane fade" id="stats-pane" role="tabpanel">
-            <div id="container-stats-content" class="detail-tab-body">
-              <div class="row g-2">
-                <div class="col-md-6">
-                  <div class="stat-card">
-                    <div class="stat-card-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-success);">
-                      <i class="fas fa-microchip"></i>
-                    </div>
-                    <div class="stat-card-content">
-                      <div class="stat-card-value" id="detail-cpu">0%</div>
-                      <div class="stat-card-label">CPU Usage</div>
-                    </div>
+            <div id="container-stats-content" class="detail-tab-body detail-stats-shell">
+              <div class="detail-stats-toolbar">
+                <div class="detail-stats-toolbar-left">
+                  <span class="detail-stats-live" id="detail-stats-live" title="Live stream status">
+                    <i class="fas fa-circle"></i> Live
+                  </span>
+                  <div class="detail-stats-timeframe" role="group" aria-label="Chart timeframe">
+                    <button type="button" class="detail-stats-tf active" data-tf="60">1m</button>
+                    <button type="button" class="detail-stats-tf" data-tf="300">5m</button>
+                    <button type="button" class="detail-stats-tf" data-tf="900">15m</button>
+                    <button type="button" class="detail-stats-tf" data-tf="1800">30m</button>
+                    <button type="button" class="detail-stats-tf" data-tf="0">All</button>
                   </div>
                 </div>
-                <div class="col-md-6">
-                  <div class="stat-card">
-                    <div class="stat-card-icon" style="background: rgba(59, 130, 246, 0.2); color: var(--accent-info);">
-                      <i class="fas fa-memory"></i>
-                    </div>
-                    <div class="stat-card-content">
-                      <div class="stat-card-value" id="detail-memory">0 MB</div>
-                      <div class="stat-card-label">Memory Usage</div>
-                    </div>
-                  </div>
+                <div class="detail-stats-toolbar-right">
+                  <label class="detail-stats-check" title="Auto-scale Y axes to data">
+                    <input type="checkbox" id="detail-stats-autoscale" checked>
+                    <span>Auto-scale</span>
+                  </label>
+                  <button type="button" class="btn btn-sm btn-outline-secondary" id="detail-stats-pause-btn" title="Pause chart updates">
+                    <i class="fas fa-pause"></i> Pause
+                  </button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary" id="detail-stats-export-btn" title="Export CSV for current timeframe">
+                    <i class="fas fa-download"></i> CSV
+                  </button>
+                  <button type="button" class="btn btn-sm btn-outline-primary" id="detail-stats-refresh-btn" title="Reload history from server">
+                    <i class="fas fa-sync-alt"></i>
+                  </button>
                 </div>
               </div>
-              <div id="stats-charts-container" class="mt-3">
-                <p class="text-muted small mb-0">Stats charts will be displayed here</p>
+
+              <div class="detail-stats-kpis">
+                <div class="detail-stats-kpi detail-stats-kpi--cpu">
+                  <div class="detail-stats-kpi-top">
+                    <i class="fas fa-microchip"></i>
+                    <span>CPU</span>
+                  </div>
+                  <div class="detail-stats-kpi-value" id="detail-cpu">0%</div>
+                  <div class="detail-stats-kpi-sub" id="detail-cpu-sub">avg — · peak —</div>
+                  <div class="detail-stats-bar"><i id="detail-cpu-bar" style="width:0%"></i></div>
+                </div>
+                <div class="detail-stats-kpi detail-stats-kpi--mem">
+                  <div class="detail-stats-kpi-top">
+                    <i class="fas fa-memory"></i>
+                    <span>Memory</span>
+                  </div>
+                  <div class="detail-stats-kpi-value" id="detail-memory">0 MB</div>
+                  <div class="detail-stats-kpi-sub" id="detail-memory-sub">of — · —%</div>
+                  <div class="detail-stats-bar"><i id="detail-memory-bar" style="width:0%"></i></div>
+                </div>
+                <div class="detail-stats-kpi detail-stats-kpi--net">
+                  <div class="detail-stats-kpi-top">
+                    <i class="fas fa-network-wired"></i>
+                    <span>Network</span>
+                  </div>
+                  <div class="detail-stats-kpi-value" id="detail-net">↓0 · ↑0</div>
+                  <div class="detail-stats-kpi-sub" id="detail-net-sub">B/s in window</div>
+                </div>
+                <div class="detail-stats-kpi detail-stats-kpi--disk">
+                  <div class="detail-stats-kpi-top">
+                    <i class="fas fa-hdd"></i>
+                    <span>Block I/O</span>
+                  </div>
+                  <div class="detail-stats-kpi-value" id="detail-disk">R0 · W0</div>
+                  <div class="detail-stats-kpi-sub" id="detail-disk-sub">B/s in window</div>
+                </div>
+              </div>
+
+              <div class="detail-stats-summary" id="detail-stats-summary">
+                <div class="detail-stats-sum-item"><span>Samples</span><strong id="detail-stats-samples">0</strong></div>
+                <div class="detail-stats-sum-item"><span>Window</span><strong id="detail-stats-window">—</strong></div>
+                <div class="detail-stats-sum-item"><span>CPU p95</span><strong id="detail-stats-cpu-p95">—</strong></div>
+                <div class="detail-stats-sum-item"><span>Mem peak</span><strong id="detail-stats-mem-peak">—</strong></div>
+                <div class="detail-stats-sum-item"><span>Updated</span><strong id="detail-stats-updated">—</strong></div>
+              </div>
+
+              <div id="stats-charts-container" class="detail-stats-charts">
+                <div class="detail-stats-chart-card">
+                  <div class="detail-stats-chart-head">
+                    <h6><i class="fas fa-chart-area"></i> CPU usage</h6>
+                    <span class="detail-stats-chart-unit">%</span>
+                  </div>
+                  <div class="detail-stats-chart-wrap">
+                    <canvas id="cpu-chart-canvas"></canvas>
+                  </div>
+                </div>
+                <div class="detail-stats-chart-card">
+                  <div class="detail-stats-chart-head">
+                    <h6><i class="fas fa-chart-area"></i> Memory</h6>
+                    <span class="detail-stats-chart-unit">MB</span>
+                  </div>
+                  <div class="detail-stats-chart-wrap">
+                    <canvas id="memory-chart-canvas"></canvas>
+                  </div>
+                </div>
+                <div class="detail-stats-chart-card">
+                  <div class="detail-stats-chart-head">
+                    <h6><i class="fas fa-exchange-alt"></i> Network throughput</h6>
+                    <span class="detail-stats-chart-unit">B/s</span>
+                  </div>
+                  <div class="detail-stats-chart-wrap">
+                    <canvas id="net-chart-canvas"></canvas>
+                  </div>
+                </div>
+                <div class="detail-stats-chart-card">
+                  <div class="detail-stats-chart-head">
+                    <h6><i class="fas fa-database"></i> Block I/O</h6>
+                    <span class="detail-stats-chart-unit">B/s</span>
+                  </div>
+                  <div class="detail-stats-chart-wrap">
+                    <canvas id="disk-chart-canvas"></canvas>
+                  </div>
+                </div>
               </div>
             </div>
           </div>