Add process view

index.html

@@ -53,6 +53,9 @@
         <button type="button" class="nav-link" data-view="logs">
           <span class="nav-ico">☰</span><span class="nav-label">Logs</span>
         </button>
+        <button type="button" class="nav-link" data-view="processes">
+          <span class="nav-ico">⧉</span><span class="nav-label">Processes</span>
+        </button>
         <div class="nav-group-label">Fleet</div>
         <button type="button" class="nav-link" data-view="fleet">
           <span class="nav-ico">◎</span><span class="nav-label">Fleet</span>
@@ -336,6 +339,98 @@
         </div>
       </section>
 
+      <!-- Processes -->
+      <section id="processes-view" class="view hidden">
+        <header class="page-header proc-header">
+          <div>
+            <p class="dash-kicker">Host</p>
+            <h1 class="dash-title">Processes</h1>
+            <p class="page-subtitle">Live /proc · rates · tree · detail · <kbd>/</kbd> search · <kbd>F</kbd> follow · <kbd>T</kbd> tree</p>
+          </div>
+          <div class="page-actions proc-header-actions">
+            <button type="button" id="proc-follow" class="btn btn-ghost active" aria-pressed="true" title="Auto-refresh">Follow</button>
+            <button type="button" id="proc-refresh" class="btn btn-ghost" title="Refresh now">Refresh</button>
+            <button type="button" id="proc-tree" class="btn btn-ghost" aria-pressed="false" title="Parent/child tree">Tree</button>
+            <button type="button" id="proc-export" class="btn btn-ghost" title="Export CSV">CSV</button>
+            <button type="button" id="proc-charts" class="btn btn-primary" title="Open top process charts">Charts</button>
+          </div>
+        </header>
+        <div id="proc-kpis" class="proc-kpis" aria-label="Process summary"></div>
+        <div class="proc-toolbar">
+          <input id="proc-q" type="search" placeholder="Filter pid, name, user, cmdline, cgroup…" autocomplete="off" spellcheck="false" />
+          <div id="proc-filters" class="proc-filters" role="group" aria-label="Process filters">
+            <button type="button" class="metrics-tf active" data-proc-filter="all">All</button>
+            <button type="button" class="metrics-tf" data-proc-filter="running">Running</button>
+            <button type="button" class="metrics-tf" data-proc-filter="highcpu">Hot CPU</button>
+            <button type="button" class="metrics-tf" data-proc-filter="highmem">Hot mem</button>
+            <button type="button" class="metrics-tf" data-proc-filter="hasio">I/O</button>
+            <button type="button" class="metrics-tf" data-proc-filter="zombie">Zombie</button>
+            <button type="button" class="metrics-tf" data-proc-filter="user">User</button>
+            <button type="button" class="metrics-tf" data-proc-filter="kernel">Kernel</button>
+          </div>
+          <label class="metrics-group-label muted">
+            Sort
+            <select id="proc-sort" aria-label="Sort processes">
+              <option value="cpu:desc">CPU ↓</option>
+              <option value="cpu:asc">CPU ↑</option>
+              <option value="rss:desc">RSS ↓</option>
+              <option value="rss:asc">RSS ↑</option>
+              <option value="io:desc">I/O ↓</option>
+              <option value="threads:desc">Threads ↓</option>
+              <option value="pid:asc">PID ↑</option>
+              <option value="name:asc">Name A–Z</option>
+              <option value="age:desc">Age ↓</option>
+            </select>
+          </label>
+          <label class="metrics-group-label muted">
+            Refresh
+            <select id="proc-refresh-ms" aria-label="Refresh interval">
+              <option value="1s">1s</option>
+              <option value="2s" selected>2s</option>
+              <option value="5s">5s</option>
+              <option value="off">Manual</option>
+            </select>
+          </label>
+        </div>
+        <p id="proc-status" class="muted proc-status" role="status"></p>
+        <div class="proc-shell">
+          <div class="proc-main">
+            <div class="proc-table-wrap" id="proc-table-wrap">
+              <table class="proc-table" id="proc-table">
+                <thead>
+                  <tr>
+                    <th data-sort="pid">PID</th>
+                    <th>User</th>
+                    <th data-sort="name">Process</th>
+                    <th data-sort="state">State</th>
+                    <th data-sort="cpu">CPU</th>
+                    <th data-sort="rss">RSS</th>
+                    <th data-sort="io">I/O KiB/s</th>
+                    <th data-sort="threads">Thr</th>
+                    <th data-sort="age">Age</th>
+                  </tr>
+                </thead>
+                <tbody id="proc-tbody"></tbody>
+              </table>
+              <div id="proc-empty" class="proc-empty hidden" role="status"></div>
+            </div>
+          </div>
+          <aside class="proc-side" aria-label="Process insights">
+            <section class="proc-side-card">
+              <h3>Top CPU</h3>
+              <div id="proc-top-cpu" class="proc-top-list"></div>
+            </section>
+            <section class="proc-side-card">
+              <h3>Top memory</h3>
+              <div id="proc-top-mem" class="proc-top-list"></div>
+            </section>
+            <section class="proc-side-card proc-detail-card" id="proc-detail">
+              <p class="muted proc-detail-empty">Select a process to inspect</p>
+            </section>
+          </aside>
+        </div>
+      </section>
+
       <!-- Fleet -->
       <section id="fleet-view" class="view hidden">
         <header class="page-header">