Processes tab: btop-style cpu/mem/net boxes with labels, gradient bars, block graph, CPU model/GHz/temp, memory breakdown, per-interface rates, and a refresh interval control

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

web/src/Procs.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { api, Proc, ProcTable } from './api'
-import { fmtBytes } from './Dashboard'
+import { fmtBytes, fmtRate } from './Dashboard'
 import { Btn, Loading, toast } from './ui'
 
 type Col = 'cpu' | 'rss' | 'pid' | 'name' | 'user' | 'started' | 'cpu_time'
@@ -10,14 +10,32 @@ const fmtDur = (s: number) => (s >= 3600 ? `${Math.floor(s / 3600)}h${String(Mat
 const fmtStart = (ms: number) => { const d = new Date(ms), now = new Date(); return d.toDateString() === now.toDateString() ? d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : d.toLocaleDateString(undefined, { month: 'short', day: '2-digit' }) }
 const STATE: Record<string, string> = { R: 'running', S: 'sleeping', D: 'disk wait', Z: 'zombie', T: 'stopped', t: 'traced', I: 'idle' }
 
-function Bar({ frac, label, cls }: { frac: number; label: string; cls?: string }) {
+const INTERVALS = [500, 1000, 2000, 5000] as const
+const BLOCKS = '▁▂▃▄▅▆▇█'
+
+// btop-style gradient bar: the track carries the green→yellow→red gradient and a cover
+// from the right hides the unfilled part, so colour depends on position not on level.
+function GBar({ frac }: { frac: number }) {
+  return <div className="gbar"><div className="gcover" style={{ width: `${100 - Math.min(100, Math.max(0, frac * 100))}%` }} /></div>
+}
+function Row({ label, frac, value }: { label: string; frac: number; value: string }) {
+  return <div className="brow"><span className="bl">{label}</span><GBar frac={frac} /><span className="bv">{value}</span></div>
+}
+// Block-character graph, coloured per column by its value, like btop's cpu graph.
+function Graph({ values, max = 100 }: { values: number[]; max?: number }) {
+  const cols = 60
+  const v = values.slice(-cols)
+  const pad = cols - v.length
   return (
-    <div className="pbar" title={label}>
-      <div className="meter"><div className={'fill ' + (cls ?? (frac >= 0.9 ? 'bad' : frac >= 0.7 ? 'warn' : ''))} style={{ width: `${Math.min(100, frac * 100)}%` }} /></div>
-      <span className="num">{label}</span>
+    <div className="graph" aria-hidden="true">
+      {pad > 0 && <span className="gpad">{'\u2581'.repeat(pad)}</span>}
+      {v.map((x, i) => { const f = Math.min(1, Math.max(0, x / max)); return <span key={i} className={f >= 0.8 ? 'g3' : f >= 0.5 ? 'g2' : 'g1'}>{BLOCKS[Math.min(7, Math.round(f * 7))]}</span> })}
     </div>
   )
 }
+function Box({ title, right, children, className = '' }: { title: string; right?: string; children: React.ReactNode; className?: string }) {
+  return <section className={'box ' + className}><span className="box-title">{title}</span>{right && <span className="box-right">{right}</span>}{children}</section>
+}
 
 export default function Procs() {
   const [t, setT] = useState<ProcTable | null>(null)
@@ -28,18 +46,20 @@ export default function Procs() {
   const [mine, setMine] = useState(false)
   const [sel, setSel] = useState<number | null>(null)
   const [paused, setPaused] = useState(false)
+  const [interval, setIntervalMs] = useState<number>(() => Number(localStorage.getItem('hamlab.procs.interval')) || 2000)
 
   const load = useCallback(async () => {
     try { setT(await api.procs()); setErr('') } catch (e) { setErr(e instanceof Error ? e.message : 'failed') }
   }, [])
   useEffect(() => {
     load()
-    const id = setInterval(() => { if (!paused && document.visibilityState === 'visible') load() }, 2000)
-    return () => clearInterval(id)
-  }, [load, paused])
+    const id = window.setInterval(() => { if (!paused && document.visibilityState === 'visible') load() }, interval)
+    localStorage.setItem('hamlab.procs.interval', String(interval))
+    return () => window.clearInterval(id)
+  }, [load, paused, interval])
 
   const head = (c: Col, label: string, cls = '') => (
-    <button className={'th ' + cls + (sort === c ? ' on' : '')} onClick={() => { if (sort === c) setAsc(!asc); else { setSort(c); setAsc(c === 'name' || c === 'user' || c === 'pid') } }}>
+    <button className={'th ' + cls + (sort === c ? ' on' : '')} title={{ cpu: 'share of one core, right now', rss: 'resident memory (RSS)', cpu_time: 'total CPU time used since it started', started: 'when the process started', pid: 'process id', name: 'program name', user: 'owner' }[c]} onClick={() => { if (sort === c) setAsc(!asc); else { setSort(c); setAsc(c === 'name' || c === 'user' || c === 'pid') } }}>
       {label}{sort === c ? (asc ? ' ▲' : ' ▼') : ''}
     </button>
   )
@@ -65,25 +85,58 @@ export default function Procs() {
   return (
     <div className="procs-page">
       <div className="procs-top">
-        <div className="cores">
-          {t.cores.map((c, i) => <Bar key={i} frac={c / 100} label={`${i}: ${pct(c)}`} />)}
-        </div>
-        <div className="memrow">
-          <Bar frac={memFrac} label={`mem ${fmtBytes(t.mem.used)} / ${fmtBytes(t.mem.total)}`} />
-          {t.swap.total > 0 && <Bar frac={swapFrac} label={`swap ${fmtBytes(t.swap.used)} / ${fmtBytes(t.swap.total)}`} />}
-          <span className="num muted">load {t.load.map((l) => l.toFixed(2)).join(' ')} · up {fmtUptime(t.uptime)} · {t.total} tasks · cpu {pct(t.cpu)}</span>
-        </div>
-        <div className="procs-tools">
-          <input placeholder="filter name, command, user, pid" value={q} onChange={(e) => setQ(e.target.value)} />
-          <button className={'chip' + (mine ? ' on' : '')} onClick={() => setMine(!mine)}>hide root</button>
-          <button className={'chip' + (paused ? ' on' : '')} onClick={() => setPaused(!paused)}>{paused ? 'paused' : 'live'}</button>
-          <span className="muted">{rows.length}</span>
-        </div>
+        <Box title="cpu" right={`${t.cpu_model ?? ''}${t.cpu_mhz ? ` · ${(t.cpu_mhz / 1000).toFixed(2)} GHz` : ''}${t.cpu_temp ? ` · ${t.cpu_temp.toFixed(0)}°C` : ''}`}>
+          <div className="cpu-total">
+            <Graph values={t.cpu_hist} />
+            <div className="cpu-total-v"><span className="bl">CPU</span><span className="bv big">{pct(t.cpu)}</span><span className="muted small">total, all cores</span></div>
+          </div>
+          <div className="cores">
+            {t.cores.map((c, i) => <Row key={i} label={`C${i}`} frac={c / 100} value={pct(c)} />)}
+          </div>
+          <div className="box-foot muted">
+            <span>load avg <b>{t.load[0].toFixed(2)}</b> {t.load[1].toFixed(2)} {t.load[2].toFixed(2)} <small>(1 · 5 · 15 min, {t.cores.length} cores)</small></span>
+            <span>up <b>{fmtUptime(t.uptime)}</b></span>
+            <span><b>{t.total}</b> tasks, <b>{t.running}</b> running</span>
+          </div>
+        </Box>
+        <Box title="mem" right={`${fmtBytes(t.mem.total)} total`}>
+          <Row label="Used" frac={memFrac} value={`${fmtBytes(t.mem.used)} · ${pct(memFrac * 100)}`} />
+          <Row label="Available" frac={t.mem.total ? t.mem.avail / t.mem.total : 0} value={fmtBytes(t.mem.avail)} />
+          <Row label="Cached" frac={t.mem.total ? (t.mem.cached ?? 0) / t.mem.total : 0} value={fmtBytes(t.mem.cached ?? 0)} />
+          <Row label="Free" frac={t.mem.total ? (t.mem.free ?? 0) / t.mem.total : 0} value={fmtBytes(t.mem.free ?? 0)} />
+          {t.swap.total > 0 ? (
+            <><div className="box-sub">swap · {fmtBytes(t.swap.total)} total</div>
+              <Row label="Used" frac={swapFrac} value={`${fmtBytes(t.swap.used)} · ${pct(swapFrac * 100)}`} />
+              <Row label="Free" frac={t.swap.total ? t.swap.avail / t.swap.total : 0} value={fmtBytes(t.swap.avail)} /></>
+          ) : <div className="box-sub muted">no swap</div>}
+          <div className="box-foot muted small">Used = total − available. Cached is file cache the kernel gives back under pressure, so "available" is the honest headroom.</div>
+        </Box>
+        <Box title="net" className="netbox">
+          {t.net.filter((n) => n.up).map((n) => (
+            <div className="netrow" key={n.iface}>
+              <span className="bl mono">{n.iface}</span>
+              <span className="bv"><span className="dn">▼ {fmtRate(n.rx_bps)}</span> <span className="upc">▲ {fmtRate(n.tx_bps)}</span></span>
+              <span className="muted small">{fmtBytes(n.rx_total)} in · {fmtBytes(n.tx_total)} out</span>
+            </div>
+          ))}
+          {t.net.filter((n) => n.up).length === 0 && <div className="muted">no interfaces up</div>}
+        </Box>
+      </div>
+      <div className="procs-tools">
+        <input placeholder="filter name, command, user, pid" value={q} onChange={(e) => setQ(e.target.value)} />
+        <button className={'chip' + (mine ? ' on' : '')} onClick={() => setMine(!mine)}>hide root</button>
+        <button className={'chip' + (paused ? ' on' : '')} onClick={() => setPaused(!paused)}>{paused ? 'paused' : 'live'}</button>
+        <label className="muted small">refresh
+          <select className="btn" value={interval} onChange={(e) => setIntervalMs(Number(e.target.value))}>
+            {INTERVALS.map((ms) => <option key={ms} value={ms}>{ms >= 1000 ? `${ms / 1000} s` : `${ms} ms`}</option>)}
+          </select>
+        </label>
+        <span className="muted small">{rows.length} shown</span>
       </div>
 
       <div className="ptable">
         <div className="prow phead">
-          {head('pid', 'PID', 'num')}{head('user', 'User')}{head('name', 'Name')}{head('cpu', 'CPU%', 'num')}{head('rss', 'MEM', 'num')}{head('cpu_time', 'Time', 'num')}{head('started', 'Started', 'num')}
+          {head('pid', 'PID', 'num')}{head('user', 'User')}{head('name', 'Program')}{head('cpu', 'CPU %', 'num')}{head('rss', 'Memory', 'num')}{head('cpu_time', 'CPU time', 'num')}{head('started', 'Started', 'num')}
         </div>
         {rows.map((p) => (
           <div key={p.pid} className={'prow' + (p.pid === sel ? ' active' : '') + (p.state === 'Z' ? ' zombie' : p.state === 'R' ? ' running' : '')} onClick={() => setSel(p.pid === sel ? null : p.pid)} title={p.cmd || p.name}>