Top: each CPU's own wattage on a two-socket machine, its threads folded under it

Per-package RAPL watts in the sample, the process table and as cpu.package.N.power
sensors. The socket rows collapse with an arrow; the fold is remembered per browser.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/Top.tsx

@@ -294,6 +294,13 @@ export default function Top() {
   // the process table, and the CPU model, come from the same place the Processes page reads,
   // on the sample's beat (above)
   const [pickedIf, setPickedIf] = useState<string | null>(null) // which NIC the net box draws
+  // which sockets' threads are folded away on a two-socket machine; remembered in this browser
+  const [folded, setFolded] = useState<number[]>(() => { try { return JSON.parse(localStorage.getItem('top.folded-cpus') ?? '[]') } catch { return [] } })
+  const fold = (pk: number) => setFolded((f) => {
+    const n = f.includes(pk) ? f.filter((x) => x !== pk) : [...f, pk]
+    try { localStorage.setItem('top.folded-cpus', JSON.stringify(n)) } catch { /* private window */ }
+    return n
+  })
   // Which pool each drive belongs to, asked once: a drive in a ZFS pool has no filesystem of
   // its own, and "nothing is on it" would be a lie about eight drives holding a NAS.
   const [pools, setPools] = useState<Record<string, string>>({})
@@ -421,10 +428,11 @@ export default function Top() {
             {(sockets.length > 1 ? sockets : [undefined]).map((pk) => (
               <Fragment key={pk ?? 'all'}>
                 {pk !== undefined && (() => {
-                  const u = sockUse(pk), t = sockTemp(pk)
+                  const u = sockUse(pk), t = sockTemp(pk), w = pt?.cpu_power_pkgs_w?.[pk], open = !folded.includes(pk)
                   return (
-                    <div className="t-core t-sock">
-                      <span className="t-core-n">CPU{pk + 1}</span>
+                    <div className="t-core t-sock" role="button" aria-expanded={open} title={open ? 'hide its threads' : 'show its threads'} onClick={() => fold(pk)}>
+                      <span className="t-core-n"><span className="t-fold">{open ? '▾' : '▸'}</span>CPU{pk + 1}</span>
+                      <span className="t-core-w" title="this CPU's own power reading: its cores, cache and memory controller">{w ? `${w < 10 ? w.toFixed(1) : Math.round(w)} W` : ''}</span>
                       <Meter pct={u} grad="cpu" />
                       <span className="t-core-p">{Math.round(u)}%</span>
                       {anyTemp && <><span className="t-core-t">{t !== undefined && <Meter pct={Math.min(100, t)} grad="temp" />}</span><span className="t-core-c">{t !== undefined ? `${Math.round(t)}°C` : ''}</span></>}
@@ -432,7 +440,7 @@ export default function Top() {
                   )
                 })()}
                 {cores.map((v, i) => {
-                  if (pk !== undefined && pkgs?.[i] !== pk) return null
+                  if (pk !== undefined && (pkgs?.[i] !== pk || folded.includes(pk))) return null
                   const t = coreTemp(i)
                   return (
                     <div className="t-core" key={i}>

web/src/api.ts

@@ -90,7 +90,7 @@ export interface GPU {
   mhz?: number; req_mhz?: number; max_mhz?: number; mem_used?: number; mem_total?: number
   clients: GPUClient[]; clients_ok: boolean; stalled?: boolean
 }
-export interface ProcTable { t: number; cpu: number; cores: number[]; cpu_hist: number[]; cpu_model?: string; cpu_mhz?: number; cpu_max_mhz?: number; cpu_power_w?: number; cpu_temp?: number; core_ids?: number[]; core_pkgs?: number[]; load: [number, number, number]; mem: MemInfo; swap: MemInfo; net: NetIf[]; gpus?: GPU[]; uptime: number; procs: Proc[]; total: number; running: number }
+export interface ProcTable { t: number; cpu: number; cores: number[]; cpu_hist: number[]; cpu_model?: string; cpu_mhz?: number; cpu_max_mhz?: number; cpu_power_w?: number; cpu_power_pkgs_w?: number[]; cpu_temp?: number; core_ids?: number[]; core_pkgs?: number[]; load: [number, number, number]; mem: MemInfo; swap: MemInfo; net: NetIf[]; gpus?: GPU[]; uptime: number; procs: Proc[]; total: number; running: number }
 export interface Sample {
   t: number; interval_ms: number; cpu: number; cores: number[]; load: [number, number, number]
   mem: { total: number; used: number; avail: number }; swap: { total: number; used: number; avail: number }

web/src/styles.css

@@ -794,8 +794,11 @@ pre.diff .add { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%,
 .t-cores-head b { color: var(--fg); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
 .t-core { display: flex; align-items: center; gap: 6px; }
 .t-core-n { width: 30px; } .t-core-p { width: 34px; text-align: right; }
-.t-cores.multi .t-core-n { width: 38px; } /* "CPU2" — a two-socket board has a row per socket above its threads */
-.t-sock { color: var(--fg); margin-top: 2px; }
+/* a two-socket board: a row per socket — arrow, name, watts — with its threads indented under it */
+.t-cores.multi .t-core-n { width: 50px; } .t-cores.multi .t-core:not(.t-sock) .t-core-n { padding-left: 14px; box-sizing: border-box; }
+.t-sock { color: var(--fg); margin-top: 2px; cursor: pointer; user-select: none; }
+.t-fold { display: inline-block; width: 12px; color: var(--muted); }
+.t-core-w { width: 40px; flex-shrink: 0; text-align: right; color: var(--muted); }
 .t-core-g { flex: 1; color: var(--ok); letter-spacing: 0; overflow: hidden; white-space: nowrap; }
 .t-core .tm { flex: 1; } .t-core-t { flex: 0 0 62px; display: flex; } .t-core-c { width: 42px; text-align: right; color: var(--t-blue); }
 .t-load { display: flex; margin-top: 2px; }