Add process view

ui/processes.js

@@ -0,0 +1,663 @@
+/**
+ * Processes tab — live /proc table with sparklines, filters, and detail drawer.
+ */
+
+const REFRESH = { '1s': 1000, '2s': 2000, '5s': 5000, off: 0 }
+const HISTORY_LEN = 60
+
+/**
+ * @param {{
+ *   els: {
+ *     root: HTMLElement|null,
+ *     status: HTMLElement|null,
+ *     kpis: HTMLElement|null,
+ *     q: HTMLInputElement|null,
+ *     filter: HTMLElement|null,
+ *     sort: HTMLSelectElement|null,
+ *     refresh: HTMLSelectElement|null,
+ *     followBtn: HTMLElement|null,
+ *     refreshBtn: HTMLElement|null,
+ *     treeBtn: HTMLElement|null,
+ *     exportBtn: HTMLElement|null,
+ *     chartsBtn: HTMLElement|null,
+ *     table: HTMLElement|null,
+ *     tbody: HTMLElement|null,
+ *     empty: HTMLElement|null,
+ *     detail: HTMLElement|null,
+ *     sparkCpu: HTMLCanvasElement|null,
+ *     sparkMem: HTMLCanvasElement|null,
+ *     topCpu: HTMLElement|null,
+ *     topMem: HTMLElement|null,
+ *   },
+ *   listProcesses: (args: object) => Promise<object>,
+ *   isConnected?: () => boolean,
+ *   onOpenCharts?: (chartId?: string) => void,
+ * }} opts
+ */
+export function createProcessesView(opts) {
+  const state = {
+    sort: 'cpu',
+    order: 'desc',
+    filter: 'all',
+    q: '',
+    refreshKey: '2s',
+    follow: true,
+    tree: false,
+    loading: false,
+    gen: 0,
+    /** @type {object|null} */
+    last: null,
+    /** @type {number|null} */
+    selectedPid: null,
+    /** @type {ReturnType<typeof setInterval>|null} */
+    timer: null,
+    /** @type {Map<number, { cpu: number[], mem: number[] }>} */
+    history: new Map(),
+    /** @type {Map<number, object>} */
+    byPid: new Map(),
+  }
+
+  function escapeHtml(s) {
+    return String(s ?? '')
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+  }
+
+  function connected() {
+    return opts.isConnected?.() !== false
+  }
+
+  function formatAge(sec) {
+    const s = Math.max(0, Number(sec) || 0)
+    if (s < 60) return `${Math.round(s)}s`
+    if (s < 3600) return `${Math.floor(s / 60)}m`
+    if (s < 86400) return `${(s / 3600).toFixed(1)}h`
+    return `${(s / 86400).toFixed(1)}d`
+  }
+
+  function formatMem(mib) {
+    const n = Number(mib) || 0
+    if (n >= 1024) return `${(n / 1024).toFixed(2)} GiB`
+    if (n >= 10) return `${n.toFixed(0)} MiB`
+    return `${n.toFixed(1)} MiB`
+  }
+
+  function barWidth(pct, max = 100) {
+    const p = Math.max(0, Math.min(100, ((Number(pct) || 0) / max) * 100))
+    return `${p.toFixed(1)}%`
+  }
+
+  function stateClass(label) {
+    switch (label) {
+      case 'running':
+        return 'is-run'
+      case 'zombie':
+        return 'is-zombie'
+      case 'stopped':
+        return 'is-stop'
+      case 'disk-sleep':
+        return 'is-disk'
+      default:
+        return 'is-sleep'
+    }
+  }
+
+  function pushHistory(row) {
+    let h = state.history.get(row.pid)
+    if (!h) {
+      h = { cpu: [], mem: [] }
+      state.history.set(row.pid, h)
+    }
+    h.cpu.push(Number(row.cpu) || 0)
+    h.mem.push(Number(row.mem) || 0)
+    if (h.cpu.length > HISTORY_LEN) h.cpu.shift()
+    if (h.mem.length > HISTORY_LEN) h.mem.shift()
+  }
+
+  function pruneHistory(alive) {
+    for (const pid of [...state.history.keys()]) {
+      if (!alive.has(pid)) state.history.delete(pid)
+    }
+  }
+
+  function paintSpark(canvas, values, color) {
+    if (!canvas) return
+    const dpr = Math.min(2, window.devicePixelRatio || 1)
+    const w = canvas.clientWidth || 160
+    const h = canvas.clientHeight || 40
+    if (canvas.width !== Math.floor(w * dpr) || canvas.height !== Math.floor(h * dpr)) {
+      canvas.width = Math.floor(w * dpr)
+      canvas.height = Math.floor(h * dpr)
+    }
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx.clearRect(0, 0, w, h)
+    const data = values?.length ? values : [0]
+    const max = Math.max(1, ...data)
+    ctx.strokeStyle = color
+    ctx.lineWidth = 1.5
+    ctx.beginPath()
+    data.forEach((v, i) => {
+      const x = data.length === 1 ? w / 2 : (i / (data.length - 1)) * (w - 2) + 1
+      const y = h - 2 - (v / max) * (h - 6)
+      if (i === 0) ctx.moveTo(x, y)
+      else ctx.lineTo(x, y)
+    })
+    ctx.stroke()
+    ctx.lineTo(w - 1, h - 1)
+    ctx.lineTo(1, h - 1)
+    ctx.closePath()
+    ctx.fillStyle = color.replace(')', ', 0.12)').replace('rgb', 'rgba').replace('#', '')
+    // simple fill under curve
+    const grad = ctx.createLinearGradient(0, 0, 0, h)
+    grad.addColorStop(0, color.length === 7 ? color + '33' : 'rgba(52,211,153,0.2)')
+    grad.addColorStop(1, 'transparent')
+    ctx.fillStyle = grad
+    ctx.beginPath()
+    data.forEach((v, i) => {
+      const x = data.length === 1 ? w / 2 : (i / (data.length - 1)) * (w - 2) + 1
+      const y = h - 2 - (v / max) * (h - 6)
+      if (i === 0) ctx.moveTo(x, y)
+      else ctx.lineTo(x, y)
+    })
+    ctx.lineTo(w - 1, h - 1)
+    ctx.lineTo(1, h - 1)
+    ctx.closePath()
+    ctx.fill()
+  }
+
+  function renderKpis(summary) {
+    const el = opts.els.kpis
+    if (!el || !summary) return
+    const cards = [
+      { label: 'Processes', value: summary.total, sub: `${summary.running || 0} run` },
+      {
+        label: 'CPU',
+        value: `${Number(summary.totalCpuPct || 0).toFixed(1)}%`,
+        sub: `${summary.ncpu || 1} cores`,
+      },
+      { label: 'RSS', value: formatMem(summary.totalRssMiB), sub: 'resident' },
+      { label: 'Threads', value: summary.totalThreads, sub: 'live sum' },
+      {
+        label: 'Load 1m',
+        value: summary.load1 != null ? Number(summary.load1).toFixed(2) : '—',
+        sub: 'system',
+      },
+      {
+        label: 'Zombies',
+        value: summary.zombie || 0,
+        sub: summary.zombie ? 'reap me' : 'clean',
+        warn: summary.zombie > 0,
+      },
+    ]
+    el.innerHTML = cards
+      .map(
+        (c) => `
+      <div class="proc-kpi${c.warn ? ' is-warn' : ''}">
+        <span class="proc-kpi-label">${escapeHtml(c.label)}</span>
+        <strong class="proc-kpi-value">${escapeHtml(String(c.value))}</strong>
+        <span class="proc-kpi-sub muted">${escapeHtml(c.sub)}</span>
+      </div>`
+      )
+      .join('')
+  }
+
+  function renderTops(res) {
+    const mk = (el, rows, key) => {
+      if (!el) return
+      if (!rows?.length) {
+        el.innerHTML = '<p class="muted">No data yet</p>'
+        return
+      }
+      el.innerHTML = rows
+        .map((r, i) => {
+          const v = key === 'cpu' ? `${Number(r.cpu).toFixed(1)}%` : formatMem(r.mem)
+          return `<button type="button" class="proc-top-row" data-pid="${r.pid}">
+            <span class="proc-top-rank">${i + 1}</span>
+            <span class="proc-top-name" title="${escapeHtml(r.name)}">${escapeHtml(r.name)}</span>
+            <span class="proc-top-val">${escapeHtml(v)}</span>
+          </button>`
+        })
+        .join('')
+      el.querySelectorAll('[data-pid]').forEach((btn) => {
+        btn.addEventListener('click', () => {
+          selectPid(Number(btn.getAttribute('data-pid')))
+        })
+      })
+    }
+    mk(opts.els.topCpu, res.topCpu, 'cpu')
+    mk(opts.els.topMem, res.topMem, 'mem')
+  }
+
+  function buildTreeRows(rows) {
+    /** @type {Map<number, object[]>} */
+    const children = new Map()
+    const byPid = new Map(rows.map((r) => [r.pid, r]))
+    for (const r of rows) {
+      const parent = byPid.has(r.ppid) ? r.ppid : 0
+      if (!children.has(parent)) children.set(parent, [])
+      children.get(parent).push(r)
+    }
+    for (const list of children.values()) {
+      list.sort((a, b) => (b.cpu || 0) - (a.cpu || 0))
+    }
+    /** @type {Array<object & { depth: number }>} */
+    const out = []
+    const walk = (pid, depth) => {
+      for (const r of children.get(pid) || []) {
+        out.push({ ...r, depth })
+        walk(r.pid, depth + 1)
+      }
+    }
+    walk(0, 0)
+    // Orphans whose parent wasn't in the filtered set
+    const seen = new Set(out.map((r) => r.pid))
+    for (const r of rows) {
+      if (!seen.has(r.pid)) out.push({ ...r, depth: 0 })
+    }
+    return out
+  }
+
+  function renderTable(res) {
+    const tbody = opts.els.tbody
+    const empty = opts.els.empty
+    if (!tbody) return
+    let rows = res.processes || []
+    if (state.tree) rows = buildTreeRows(rows)
+
+    if (!rows.length) {
+      tbody.innerHTML = ''
+      if (empty) {
+        empty.classList.remove('hidden')
+        empty.textContent = connected()
+          ? res.supported === false
+            ? res.error || 'Process listing requires a Linux agent with /proc'
+            : 'No processes match this filter'
+          : 'Connect an agent to monitor processes'
+      }
+      return
+    }
+    empty?.classList.add('hidden')
+
+    const ncpu = res.summary?.ncpu || 1
+    tbody.innerHTML = rows
+      .map((r) => {
+        const depth = r.depth || 0
+        const sel = state.selectedPid === r.pid ? ' is-selected' : ''
+        const indent = depth ? ` style="padding-left:${12 + depth * 14}px"` : ''
+        return `<tr class="proc-row${sel}" data-pid="${r.pid}" tabindex="0">
+          <td class="proc-pid">${r.pid}</td>
+          <td class="proc-user" title="${escapeHtml(r.user || '')}">${escapeHtml(r.user || '—')}</td>
+          <td class="proc-name"${indent}>
+            <span class="proc-comm">${escapeHtml(r.name)}</span>
+            <span class="proc-cmd muted" title="${escapeHtml(r.cmdline || '')}">${escapeHtml(
+              (r.cmdline || '').slice(0, 72)
+            )}</span>
+          </td>
+          <td class="proc-state"><span class="proc-pill ${stateClass(r.stateLabel)}">${escapeHtml(
+            r.stateLabel || r.state || '?'
+          )}</span></td>
+          <td class="proc-num proc-cpu" title="user ${r.cpuUser}% · sys ${r.cpuSystem}%">
+            <span class="proc-bar-track"><i style="width:${barWidth(r.cpu, 100 * ncpu)}"></i></span>
+            ${Number(r.cpu).toFixed(1)}%
+          </td>
+          <td class="proc-num">
+            <span class="proc-bar-track proc-bar-mem"><i style="width:${barWidth(
+              Math.min(100, (Number(r.mem) / Math.max(1, res.summary?.totalRssMiB || 1)) * 100)
+            )}"></i></span>
+            ${escapeHtml(formatMem(r.mem))}
+          </td>
+          <td class="proc-num">${Number(r.io).toFixed(1)}</td>
+          <td class="proc-num">${r.threads}</td>
+          <td class="proc-num muted">${formatAge(r.ageSec)}</td>
+        </tr>`
+      })
+      .join('')
+
+    tbody.querySelectorAll('.proc-row').forEach((tr) => {
+      const pid = Number(tr.getAttribute('data-pid'))
+      tr.addEventListener('click', () => selectPid(pid))
+      tr.addEventListener('keydown', (ev) => {
+        if (ev.key === 'Enter' || ev.key === ' ') {
+          ev.preventDefault()
+          selectPid(pid)
+        }
+      })
+    })
+  }
+
+  async function selectPid(pid) {
+    state.selectedPid = pid
+    opts.els.tbody?.querySelectorAll('.proc-row').forEach((tr) => {
+      tr.classList.toggle('is-selected', Number(tr.getAttribute('data-pid')) === pid)
+    })
+    await renderDetail(pid)
+  }
+
+  async function renderDetail(pid) {
+    const panel = opts.els.detail
+    if (!panel) return
+    if (!pid) {
+      panel.innerHTML = '<p class="muted proc-detail-empty">Select a process to inspect</p>'
+      return
+    }
+    panel.classList.add('is-loading')
+    let row = state.byPid.get(pid)
+    try {
+      const res = await opts.listProcesses({
+        pid,
+        limit: 1,
+        sort: state.sort,
+        order: state.order,
+      })
+      if (res.processes?.[0]) {
+        row = res.processes[0]
+        state.byPid.set(pid, row)
+        pushHistory(row)
+      }
+    } catch {
+      // keep cached row
+    }
+    panel.classList.remove('is-loading')
+    if (!row) {
+      panel.innerHTML = `<p class="muted">PID ${pid} gone</p>`
+      return
+    }
+    const hist = state.history.get(pid) || { cpu: [], mem: [] }
+    panel.innerHTML = `
+      <header class="proc-detail-head">
+        <div>
+          <p class="proc-detail-kicker muted">PID ${row.pid} · ppid ${row.ppid}</p>
+          <h3>${escapeHtml(row.name)}</h3>
+          <p class="proc-detail-user muted">${escapeHtml(row.user || '—')} · nice ${row.nice} · cpu${
+            row.processor ?? '—'
+          }</p>
+        </div>
+        <button type="button" class="btn btn-ghost proc-detail-close" title="Close">✕</button>
+      </header>
+      <p class="proc-detail-cmd" title="${escapeHtml(row.cmdline || '')}">${escapeHtml(
+        row.cmdline || '—'
+      )}</p>
+      <div class="proc-detail-sparks">
+        <div>
+          <span class="muted">CPU</span>
+          <canvas class="proc-spark" data-spark="cpu" height="48"></canvas>
+        </div>
+        <div>
+          <span class="muted">RSS</span>
+          <canvas class="proc-spark" data-spark="mem" height="48"></canvas>
+        </div>
+      </div>
+      <dl class="proc-detail-grid">
+        <div><dt>State</dt><dd>${escapeHtml(row.stateLabel || row.state)}</dd></div>
+        <div><dt>CPU</dt><dd>${Number(row.cpu).toFixed(2)}% <span class="muted">(u ${Number(
+          row.cpuUser
+        ).toFixed(1)} / s ${Number(row.cpuSystem).toFixed(1)})</span></dd></div>
+        <div><dt>RSS</dt><dd>${escapeHtml(formatMem(row.mem))}</dd></div>
+        <div><dt>VSZ</dt><dd>${escapeHtml(formatMem(row.vsz))}</dd></div>
+        <div><dt>Swap</dt><dd>${escapeHtml(formatMem(row.swap))}</dd></div>
+        <div><dt>Threads</dt><dd>${row.threads}</dd></div>
+        <div><dt>I/O</dt><dd>${Number(row.ioRead).toFixed(1)} / ${Number(row.ioWrite).toFixed(
+          1
+        )} KiB/s</dd></div>
+        <div><dt>FDs</dt><dd>${row.fds != null ? row.fds : '—'}</dd></div>
+        <div><dt>Age</dt><dd>${formatAge(row.ageSec)}</dd></div>
+        <div><dt>Cgroup</dt><dd title="${escapeHtml(row.cgroup || '')}">${escapeHtml(
+          row.cgroup || '—'
+        )}</dd></div>
+        <div><dt>Exe</dt><dd title="${escapeHtml(row.exe || '')}">${escapeHtml(
+          row.exe || '—'
+        )}</dd></div>
+        <div><dt>Cwd</dt><dd title="${escapeHtml(row.cwd || '')}">${escapeHtml(
+          row.cwd || '—'
+        )}</dd></div>
+        <div><dt>Wchan</dt><dd>${escapeHtml(row.wchan || '—')}</dd></div>
+        <div><dt>Ctxt</dt><dd>${row.voluntaryCtxt ?? '—'} vol / ${
+          row.nonvoluntaryCtxt ?? '—'
+        } nonvol</dd></div>
+      </dl>
+    `
+    const cpuCanvas = panel.querySelector('[data-spark="cpu"]')
+    const memCanvas = panel.querySelector('[data-spark="mem"]')
+    paintSpark(/** @type {HTMLCanvasElement} */ (cpuCanvas), hist.cpu, '#34d399')
+    paintSpark(/** @type {HTMLCanvasElement} */ (memCanvas), hist.mem, '#38bdf8')
+    panel.querySelector('.proc-detail-close')?.addEventListener('click', () => {
+      state.selectedPid = null
+      opts.els.tbody?.querySelectorAll('.proc-row').forEach((tr) => tr.classList.remove('is-selected'))
+      renderDetail(null)
+    })
+  }
+
+  function setStatus(text, isError = false) {
+    const el = opts.els.status
+    if (!el) return
+    el.textContent = text
+    el.classList.toggle('is-error', isError)
+  }
+
+  async function refresh() {
+    if (!connected()) {
+      setStatus('Offline — connect an agent', true)
+      renderTable({ processes: [], supported: false })
+      renderKpis(null)
+      return
+    }
+    const gen = ++state.gen
+    state.loading = true
+    opts.els.root?.classList.add('is-loading')
+    try {
+      const res = await opts.listProcesses({
+        q: state.q,
+        sort: state.sort,
+        order: state.order,
+        filter: state.filter,
+        limit: state.tree ? 800 : 400,
+      })
+      if (gen !== state.gen) return
+      state.last = res
+      state.byPid = new Map((res.processes || []).map((r) => [r.pid, r]))
+      const alive = new Set(state.byPid.keys())
+      for (const r of res.processes || []) pushHistory(r)
+      pruneHistory(alive)
+      renderKpis(res.summary)
+      renderTops(res)
+      renderTable(res)
+      if (state.selectedPid) {
+        if (state.byPid.has(state.selectedPid)) await renderDetail(state.selectedPid)
+        else {
+          state.selectedPid = null
+          await renderDetail(null)
+        }
+      }
+      const age = res.ts ? `${Math.max(0, Math.round((Date.now() - res.ts) / 1000))}s` : '—'
+      setStatus(
+        res.supported === false
+          ? res.error || 'Unsupported platform'
+          : `${res.totalMatched ?? res.processes?.length ?? 0} shown · ${
+              res.summary?.total ?? 0
+            } total · sample ${age} ago${res.chartsEnabled ? '' : ' · enable PEARDATA_PROCESSES for Charts history'}`
+      )
+    } catch (err) {
+      if (gen !== state.gen) return
+      setStatus(err?.message || 'Failed to load processes', true)
+    } finally {
+      if (gen === state.gen) {
+        state.loading = false
+        opts.els.root?.classList.remove('is-loading')
+      }
+    }
+  }
+
+  function syncFollowTimer() {
+    if (state.timer) {
+      clearInterval(state.timer)
+      state.timer = null
+    }
+    const ms = state.follow ? REFRESH[state.refreshKey] || 0 : 0
+    if (ms > 0) {
+      state.timer = setInterval(() => refresh(), ms)
+    }
+    opts.els.followBtn?.classList.toggle('active', state.follow)
+    opts.els.followBtn?.setAttribute('aria-pressed', state.follow ? 'true' : 'false')
+  }
+
+  function exportCsv() {
+    const rows = state.last?.processes || []
+    if (!rows.length) return
+    const cols = [
+      'pid',
+      'ppid',
+      'user',
+      'name',
+      'stateLabel',
+      'cpu',
+      'mem',
+      'io',
+      'threads',
+      'ageSec',
+      'cmdline',
+    ]
+    const lines = [cols.join(',')]
+    for (const r of rows) {
+      lines.push(
+        cols
+          .map((c) => {
+            const v = r[c] ?? ''
+            const s = String(v).replace(/"/g, '""')
+            return `"${s}"`
+          })
+          .join(',')
+      )
+    }
+    const blob = new Blob([lines.join('\n')], { type: 'text/csv' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `peardata-processes-${Date.now()}.csv`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  function bind() {
+    const root = opts.els.root
+    if (!root || root.dataset.bound) return
+    root.dataset.bound = '1'
+
+    opts.els.q?.addEventListener('input', () => {
+      state.q = opts.els.q?.value || ''
+      refresh()
+    })
+    opts.els.q?.addEventListener('keydown', (ev) => {
+      if (ev.key === 'Escape') {
+        if (opts.els.q) opts.els.q.value = ''
+        state.q = ''
+        refresh()
+      }
+    })
+
+    opts.els.filter?.querySelectorAll('[data-proc-filter]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        state.filter = btn.getAttribute('data-proc-filter') || 'all'
+        opts.els.filter?.querySelectorAll('[data-proc-filter]').forEach((b) => {
+          b.classList.toggle('active', b === btn)
+        })
+        refresh()
+      })
+    })
+
+    opts.els.sort?.addEventListener('change', () => {
+      const v = opts.els.sort?.value || 'cpu:desc'
+      const [sort, order] = v.split(':')
+      state.sort = sort || 'cpu'
+      state.order = order === 'asc' ? 'asc' : 'desc'
+      refresh()
+    })
+
+    opts.els.refresh?.addEventListener('change', () => {
+      state.refreshKey = opts.els.refresh?.value || '2s'
+      syncFollowTimer()
+    })
+
+    opts.els.followBtn?.addEventListener('click', () => {
+      state.follow = !state.follow
+      syncFollowTimer()
+    })
+    opts.els.refreshBtn?.addEventListener('click', () => refresh())
+    opts.els.treeBtn?.addEventListener('click', () => {
+      state.tree = !state.tree
+      opts.els.treeBtn?.classList.toggle('active', state.tree)
+      opts.els.treeBtn?.setAttribute('aria-pressed', state.tree ? 'true' : 'false')
+      if (state.last) renderTable(state.last)
+      else refresh()
+    })
+    opts.els.exportBtn?.addEventListener('click', () => exportCsv())
+    opts.els.chartsBtn?.addEventListener('click', () => {
+      opts.onOpenCharts?.('processes.top_cpu')
+    })
+
+    opts.els.table?.querySelectorAll('th[data-sort]').forEach((th) => {
+      th.addEventListener('click', () => {
+        const sort = th.getAttribute('data-sort') || 'cpu'
+        if (state.sort === sort) {
+          state.order = state.order === 'desc' ? 'asc' : 'desc'
+        } else {
+          state.sort = sort
+          state.order = sort === 'name' || sort === 'pid' ? 'asc' : 'desc'
+        }
+        if (opts.els.sort) {
+          opts.els.sort.value = `${state.sort}:${state.order}`
+        }
+        refresh()
+      })
+    })
+
+    window.addEventListener('keydown', (ev) => {
+      if (!root || root.classList.contains('hidden')) return
+      const tag = (ev.target && /** @type {HTMLElement} */ (ev.target).tagName) || ''
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
+      if (ev.key === '/') {
+        ev.preventDefault()
+        opts.els.q?.focus()
+      } else if (ev.key === 'r' || ev.key === 'R') {
+        refresh()
+      } else if (ev.key === 'f' || ev.key === 'F') {
+        state.follow = !state.follow
+        syncFollowTimer()
+      } else if (ev.key === 't' || ev.key === 'T') {
+        state.tree = !state.tree
+        opts.els.treeBtn?.classList.toggle('active', state.tree)
+        if (state.last) renderTable(state.last)
+      } else if (ev.key === 'Escape' && state.selectedPid) {
+        state.selectedPid = null
+        renderDetail(null)
+        opts.els.tbody?.querySelectorAll('.proc-row').forEach((tr) => tr.classList.remove('is-selected'))
+      }
+    })
+  }
+
+  function enter() {
+    bind()
+    if (opts.els.sort) opts.els.sort.value = `${state.sort}:${state.order}`
+    if (opts.els.refresh) opts.els.refresh.value = state.refreshKey
+    syncFollowTimer()
+    refresh()
+    if (!state.selectedPid) renderDetail(null)
+  }
+
+  function leave() {
+    if (state.timer) {
+      clearInterval(state.timer)
+      state.timer = null
+    }
+  }
+
+  return {
+    enter,
+    leave,
+    refresh,
+    getState: () => state,
+  }
+}

ui/styles.css

@@ -3162,3 +3162,485 @@ html[data-theme='light'] .chart-focus-canvas-wrap {
     transition: none !important;
   }
 }
+
+/* ─── Processes tab ─── */
+#processes-view:not(.hidden) {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  gap: 10px;
+}
+
+.proc-header {
+  flex-shrink: 0;
+}
+
+.proc-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.proc-kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.proc-kpi {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 50%),
+    var(--bg-secondary);
+  min-width: 0;
+}
+
+.proc-kpi.is-warn {
+  border-color: rgba(251, 191, 36, 0.45);
+}
+
+.proc-kpi-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-faint);
+}
+
+.proc-kpi-value {
+  font-size: 18px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.proc-kpi-sub {
+  font-size: 11px;
+  font-family: var(--font-mono);
+}
+
+.proc-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.proc-toolbar #proc-q {
+  flex: 1 1 220px;
+  min-width: 160px;
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  font: inherit;
+  font-size: 13px;
+  padding: 7px 12px;
+}
+
+.proc-toolbar #proc-q:focus {
+  outline: none;
+  border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
+}
+
+.proc-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.proc-status {
+  margin: 0;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  flex-shrink: 0;
+}
+
+.proc-status.is-error {
+  color: var(--accent-danger);
+}
+
+.proc-shell {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
+  gap: 12px;
+}
+
+.proc-main {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: 14px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  overflow: hidden;
+}
+
+.proc-table-wrap {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+}
+
+.proc-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.proc-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
+  backdrop-filter: blur(8px);
+}
+
+.proc-table th {
+  text-align: left;
+  padding: 8px 10px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-faint);
+  border-bottom: 1px solid var(--border-color);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.proc-table th[data-sort] {
+  cursor: pointer;
+}
+
+.proc-table th[data-sort]:hover {
+  color: var(--accent-primary);
+}
+
+.proc-table td {
+  padding: 7px 10px;
+  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
+  vertical-align: middle;
+  font-variant-numeric: tabular-nums;
+}
+
+.proc-row {
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+
+.proc-row:hover {
+  background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
+}
+
+.proc-row.is-selected {
+  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
+}
+
+.proc-pid {
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  width: 4.5rem;
+}
+
+.proc-user {
+  max-width: 5.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+}
+
+.proc-name {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  max-width: 28vw;
+}
+
+.proc-comm {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.proc-cmd {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.proc-num {
+  font-family: var(--font-mono);
+  white-space: nowrap;
+}
+
+.proc-cpu {
+  min-width: 7rem;
+}
+
+.proc-bar-track {
+  display: inline-block;
+  width: 42px;
+  height: 5px;
+  margin-right: 6px;
+  border-radius: 99px;
+  background: rgba(255, 255, 255, 0.06);
+  vertical-align: middle;
+  overflow: hidden;
+}
+
+.proc-bar-track i {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--accent-primary);
+}
+
+.proc-bar-mem i {
+  background: var(--accent-info);
+}
+
+.proc-pill {
+  display: inline-block;
+  padding: 1px 7px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  text-transform: lowercase;
+}
+
+.proc-pill.is-run {
+  color: #34d399;
+  background: rgba(52, 211, 153, 0.14);
+}
+.proc-pill.is-sleep {
+  color: var(--text-muted);
+  background: rgba(154, 168, 188, 0.12);
+}
+.proc-pill.is-zombie {
+  color: #fbbf24;
+  background: rgba(251, 191, 36, 0.16);
+}
+.proc-pill.is-stop {
+  color: #fb7185;
+  background: rgba(251, 113, 133, 0.14);
+}
+.proc-pill.is-disk {
+  color: #38bdf8;
+  background: rgba(56, 189, 248, 0.14);
+}
+
+.proc-empty {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.proc-side {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow: auto;
+}
+
+.proc-side-card {
+  border-radius: 14px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  padding: 12px 14px;
+}
+
+.proc-side-card h3 {
+  margin: 0 0 8px;
+  font-size: 12px;
+  font-weight: 650;
+  letter-spacing: 0.02em;
+  color: var(--text-secondary);
+}
+
+.proc-top-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.proc-top-row {
+  display: grid;
+  grid-template-columns: 1.2rem 1fr auto;
+  gap: 8px;
+  align-items: center;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  padding: 5px 6px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.proc-top-row:hover {
+  background: var(--bg-hover);
+}
+
+.proc-top-rank {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-faint);
+}
+
+.proc-top-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.proc-top-val {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--accent-secondary);
+}
+
+.proc-detail-card {
+  flex: 1 1 auto;
+  min-height: 220px;
+}
+
+.proc-detail-empty {
+  margin: 24px 0;
+  text-align: center;
+}
+
+.proc-detail-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.proc-detail-kicker {
+  margin: 0;
+  font-size: 11px;
+  font-family: var(--font-mono);
+}
+
+.proc-detail-head h3 {
+  margin: 2px 0;
+  font-size: 18px;
+  color: var(--text-primary);
+}
+
+.proc-detail-user {
+  margin: 0;
+  font-size: 11px;
+}
+
+.proc-detail-cmd {
+  margin: 10px 0;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.18);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.4;
+  max-height: 4.2em;
+  overflow: auto;
+  word-break: break-all;
+  color: var(--text-secondary);
+}
+
+html[data-theme='light'] .proc-detail-cmd {
+  background: rgba(15, 23, 42, 0.04);
+}
+
+.proc-detail-sparks {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.proc-detail-sparks .muted {
+  display: block;
+  font-size: 10px;
+  margin-bottom: 4px;
+}
+
+.proc-spark {
+  width: 100%;
+  height: 48px;
+  display: block;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.16);
+}
+
+.proc-detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px 12px;
+  margin: 0;
+}
+
+.proc-detail-grid div {
+  min-width: 0;
+}
+
+.proc-detail-grid dt {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-faint);
+  margin: 0 0 2px;
+}
+
+.proc-detail-grid dd {
+  margin: 0;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#processes-view.is-loading .proc-table tbody {
+  opacity: 0.72;
+}
+
+@media (max-width: 1100px) {
+  .proc-shell {
+    grid-template-columns: 1fr;
+  }
+  .proc-side {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+  .proc-detail-card {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 720px) {
+  .proc-side {
+    grid-template-columns: 1fr;
+  }
+  .proc-name {
+    max-width: 40vw;
+  }
+}