4bnode 4.2.0 → 4.2.1

package/skeleton/.4bnode/assets/js/pages/DashboardPage.js

@@ -1,435 +1,272 @@
-import React from "react";
-import { LuZap, LuRocket } from "react-icons/lu";
-import { html, Icons } from "../lib.js";
+import React, { useState, useRef, useEffect } from "react";
+import {
+  LuActivity, LuTimer, LuCpu, LuGauge, LuCheck, LuArrowRight, LuPlus, LuExternalLink, LuBookOpen,
+} from "react-icons/lu";
+import { html, Icons, formatBytes, formatDuration, timeAgo } from "../lib.js";
 import { useApp } from "../context.js";
 
+function statusClass(code) {
+  if (code >= 500) return "err";
+  if (code >= 400) return "warn";
+  return "ok";
+}
+
+// Requests per minute over the last 30 minutes. Single series → no legend;
+// the card title names it. Hover a column for the exact numbers.
+function TrafficChart({ series }) {
+  const [hover, setHover] = useState(null);
+  const [W, setW] = useState(600);
+  const boxRef = useRef(null);
+  useEffect(() => {
+    const el = boxRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setW(Math.max(200, el.clientWidth)));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const H = 168, padL = 28, padB = 20, padT = 6;
+  const max = Math.max(4, ...series.map((s) => s.count));
+  const niceMax = Math.ceil(max / 4) * 4;
+  const plotW = W - padL, plotH = H - padB - padT;
+  const slot = plotW / series.length;
+  const barW = Math.max(2, slot - 2); // 2px surface gap between bars
+  const y = (v) => padT + plotH - (v / niceMax) * plotH;
+  const ticks = [0, niceMax / 2, niceMax];
+  const fmtTime = (t) => new Date(t).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+
+  return html`<div className="ov-chart" ref=${boxRef} onMouseLeave=${() => setHover(null)}>
+    <svg viewBox=${`0 0 ${W} ${H}`} role="img"
+      aria-label=${`Requests per minute, last 30 minutes. Peak ${max}.`}>
+      ${ticks.map((t) => html`<g key=${t}>
+        <line className="grid" x1=${padL} x2=${W} y1=${y(t)} y2=${y(t)} />
+        <text className="axis" x=${padL - 6} y=${y(t) + 3.5} textAnchor="end">${t}</text>
+      </g>`)}
+      ${series.map((s, i) => {
+        const h = s.count ? Math.max(2, plotH - (y(s.count) - padT)) : 0;
+        const x = padL + i * slot + 1;
+        const r = Math.min(4, barW / 2, h);
+        // Rounded data-end, square baseline.
+        const d = h
+          ? `M${x},${padT + plotH} V${padT + plotH - h + r} Q${x},${padT + plotH - h} ${x + r},${padT + plotH - h} H${x + barW - r} Q${x + barW},${padT + plotH - h} ${x + barW},${padT + plotH - h + r} V${padT + plotH} Z`
+          : "";
+        return html`<g key=${s.t}>
+          ${h > 0 && html`<path d=${d} className=${`bar${hover !== null && hover !== i ? " dim" : ""}`} />`}
+          <rect x=${padL + i * slot} y=${padT} width=${slot} height=${plotH} fill="transparent"
+            onMouseEnter=${() => setHover(i)} />
+        </g>`;
+      })}
+      <text className="axis" x=${padL} y=${H - 4}>${fmtTime(series[0].t)}</text>
+      <text className="axis" x=${W} y=${H - 4} textAnchor="end">now</text>
+    </svg>
+    ${hover !== null && html`<div className="ov-tip"
+      style=${{ left: `${((padL + (hover + 0.5) * slot) / W) * 100}%`, top: `${(y(series[hover].count) / H) * 100}%` }}>
+      <div className="muted">${fmtTime(series[hover].t)}</div>
+      <div><b>${series[hover].count}</b> requests</div>
+      ${series[hover].errors > 0 && html`<div><b>${series[hover].errors}</b> <span className="muted">4xx/5xx</span></div>`}
+    </div>`}
+  </div>`;
+}
+
+function Kpi({ icon, label, value, unit, sub }) {
+  return html`<div className="ov-kpi">
+    <div className="ov-kpi-label"><${icon} size=${13} /> ${label}</div>
+    <div className="ov-kpi-value">${value}${unit && html`<small>${unit}</small>`}</div>
+    <div className="ov-kpi-sub">${sub}</div>
+  </div>`;
+}
+
 export function DashboardPage() {
-  const { data, setPage, status } = useApp();
-  const modelCount = data.models?.length || 0;
-  const routeCount = data.routes?.length || 0;
-  const dbOk = data.mongoConfigured;
-  const totalFields =
-    data.models?.reduce((sum, m) => sum + (m.fields?.length || 0), 0) ||
-    0;
-  const featuresActive = [
-    status?.socketConfigured,
-    status?.websocketConfigured,
-    status?.serialportConfigured,
-  ].filter(Boolean);
+  const { data, setPage, status, health } = useApp();
+  const models = data.models || [];
+  const routes = data.routes || [];
+  const dbOk = data.mongoConfigured || !!status.sqlProvider;
+  const m = health?.metrics;
+  const sec = status.security || {};
 
   const steps = [
-    {
-      label: "Database",
-      done: dbOk,
-      page: "database",
-      icon: Icons.database,
-    },
-    {
-      label: "Schemas",
-      done: modelCount > 0,
-      page: "schemas",
-      icon: Icons.schema,
-    },
-    {
-      label: "Routes",
-      done: routeCount > 0,
-      page: "routes",
-      icon: Icons.route,
-    },
+    { label: "Connect a database", done: dbOk, page: "database" },
+    { label: "Define a schema", done: models.length > 0, page: "schemas" },
+    { label: "Create an API route", done: routes.length > 0, page: "routes" },
+    { label: "Generate API docs", done: !!status.docsConfigured, page: "docs" },
+    { label: "Harden security", done: !!(sec.helmet && sec.rateLimit && sec.errorHandler), page: "security" },
+  ];
+  const doneCount = steps.filter((s) => s.done).length;
+  const nextStep = steps.find((s) => !s.done);
+
+  const features = [
+    { label: "Socket.IO", on: status.socketConfigured, page: "realtime" },
+    { label: "WebSocket", on: status.websocketConfigured, page: "realtime" },
+    { label: "SerialPort", on: status.serialportConfigured, page: "serialport" },
+    { label: "Email", on: status.mailConfigured, page: "mail" },
+    { label: "API Docs", on: status.docsConfigured, page: "docs" },
+    { label: "Helmet", on: sec.helmet, page: "security" },
+    { label: "Rate limiting", on: sec.rateLimit, page: "security" },
+    { label: "Validation", on: sec.validation, page: "security" },
   ];
-  const firstIncomplete = steps.findIndex((s) => !s.done);
-  const allDone = steps.every((s) => s.done);
 
-  const nextAction = !dbOk
-    ? {
-        label: "Connect Database",
-        page: "database",
-        desc: "Set up your database connection to get started",
-      }
-    : modelCount === 0
-      ? {
-          label: "Create First Schema",
-          page: "schemas",
-          desc: "Define your data models to structure your application",
-        }
-      : routeCount === 0
-        ? {
-            label: "Create First Route",
-            page: "routes",
-            desc: "Add API endpoints to expose your data",
-          }
-        : null;
+  const errorRate = m && m.total ? ((m.errors / m.total) * 100).toFixed(1) : null;
+  const heapPct = health ? Math.round((health.memory.heapUsed / health.memory.heapTotal) * 100) : 0;
 
   return html`<div>
-    <div className="pipeline">
-      ${steps.map(
-        (step, i) =>
-          html`<${React.Fragment} key=${i}>
-            ${i > 0 &&
-            html`<div
-              className=${`pipeline-connector ${steps[i - 1].done ? "done" : ""}`}
-            />`}
-            <div
-              className="pipeline-step"
-              onClick=${() => setPage(step.page)}
-              style=${{ cursor: "pointer" }}
-            >
-              <div
-                className=${`pipeline-dot ${step.done ? "done" : i === firstIncomplete ? "current" : ""}`}
-              >
-                ${step.done ? "\u2713" : i + 1}
-              </div>
-              <div
-                className=${`pipeline-label ${step.done ? "done" : i === firstIncomplete ? "current" : ""}`}
-              >
-                ${step.label}
-              </div>
-            </div>
-          <//>`,
-      )}
+    <div className="page-head">
+      <div>
+        <h1>${status.appName || "Your project"}</h1>
+        <div className="page-meta">
+          <span>Express API</span>
+          ${health && html`<span>Node ${health.node}</span>`}
+          ${health && html`<span>Port ${health.port}</span>`}
+          ${health && html`<span>Up ${formatDuration(health.uptime)}</span>`}
+          ${health && html`<span>${health.env}</span>`}
+        </div>
+      </div>
+      <div className="page-actions">
+        ${status.docsConfigured && html`<a className="btn btn-secondary" href="/docs" target="_blank" rel="noopener">
+          <${LuBookOpen} size=${14} /> Docs
+        </a>`}
+        <a className="btn btn-secondary" href="/" target="_blank" rel="noopener"><${LuExternalLink} size=${14} /> Open app</a>
+        <button className="btn btn-primary" onClick=${() => setPage("routes")}><${LuPlus} size=${14} /> New route</button>
+      </div>
     </div>
 
-    ${nextAction &&
-    html`<div
-      className="card mb-6"
-      style=${{
-        borderColor: "var(--accent)",
-        borderWidth: "1px",
-        borderStyle: "solid",
-        background:
-          "linear-gradient(135deg, rgba(124,58,237,0.06), rgba(124,58,237,0.02))",
-      }}
-    >
-      <div className="flex items-center gap-4">
-        <div
-          style=${{
-            width: "44px",
-            height: "44px",
-            borderRadius: "12px",
-            background: "var(--accent-glow)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            flexShrink: 0,
-          }}
-        >
-          <${LuZap} size=${20} color="var(--accent-light)" />
+    <div className="ov-kpis">
+      <${Kpi} icon=${LuActivity} label="Requests / min"
+        value=${m?.enabled ? m.rpm : "—"}
+        sub=${m?.enabled ? `${m.total.toLocaleString()} since start` : "Metrics not wired"} />
+      <${Kpi} icon=${LuTimer} label="Latency p95"
+        value=${m?.p95 != null ? m.p95 : "—"} unit=${m?.p95 != null ? "ms" : ""}
+        sub=${m?.p50 != null ? `p50 ${m.p50} ms` : "No traffic yet"} />
+      <${Kpi} icon=${LuGauge} label="Error rate"
+        value=${errorRate != null ? errorRate : "—"} unit=${errorRate != null ? "%" : ""}
+        sub=${m?.enabled ? `${m.errors} server errors (5xx)` : "—"} />
+      <${Kpi} icon=${LuCpu} label="Memory"
+        value=${health ? formatBytes(health.memory.rss) : "—"}
+        sub=${health ? `Heap ${formatBytes(health.memory.heapUsed)} · ${heapPct}%` : "Server unreachable"} />
+    </div>
+
+    <div className="ov-row">
+      <div className="ov-card">
+        <div className="ov-card-head">
+          <span className="ov-card-title">Requests per minute</span>
+          <span className="ov-num">Last 30 min</span>
         </div>
-        <div style=${{ flex: 1 }}>
-          <div
-            style=${{
-              fontWeight: 600,
-              fontSize: "14px",
-              marginBottom: "2px",
-            }}
-          >
-            Next Step: ${nextAction.label}
-          </div>
-          <div className="text-sm text-muted">${nextAction.desc}</div>
+        <div className="ov-card-body">
+          ${!health
+            ? html`<div className="ov-empty">Waiting for the server…</div>`
+            : !m.enabled
+              ? html`<div className="ov-empty">
+                  Live traffic needs the metrics middleware. In <code>index.js</code>, after importing the dashboard, add:<br />
+                  <code>if (devApi.requestMetrics) app.use(devApi.requestMetrics);</code>
+                </div>`
+              : html`<${TrafficChart} series=${m.series} />`}
         </div>
-        <button
-          className="btn btn-primary"
-          onClick=${() => setPage(nextAction.page)}
-        >
-          ${nextAction.label}
-        </button>
       </div>
-    </div>`}
-    ${allDone &&
-    html`<div
-      className="card mb-6"
-      style=${{
-        borderColor: "rgba(34,197,94,0.3)",
-        background:
-          "linear-gradient(135deg, rgba(34,197,94,0.06), rgba(34,197,94,0.02))",
-      }}
-    >
-      <div className="flex items-center gap-4">
-        <div
-          style=${{
-            width: "44px",
-            height: "44px",
-            borderRadius: "12px",
-            background: "var(--success-glow)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            flexShrink: 0,
-            fontSize: "20px",
-          }}
-        >
-          \u2713
+
+      <div className="ov-card">
+        <div className="ov-card-head">
+          <span className="ov-card-title">Setup</span>
+          <span className="ov-num">${doneCount} of ${steps.length}</span>
         </div>
-        <div style=${{ flex: 1 }}>
-          <div
-            style=${{
-              fontWeight: 600,
-              fontSize: "14px",
-              marginBottom: "2px",
-              color: "var(--success)",
-            }}
-          >
-            Project Ready
-          </div>
-          <div className="text-sm text-muted">
-            Database, schemas, and routes are configured. Add features or
-            refine your API.
-          </div>
+        <div style=${{ padding: "12px 16px 4px" }}>
+          <div className="ov-progress"><span style=${{ width: `${(doneCount / steps.length) * 100}%` }} /></div>
+        </div>
+        <div className="ov-list">
+          ${steps.map((s) => html`<div key=${s.label} className="ov-list-row clickable" onClick=${() => setPage(s.page)}>
+            <span className=${`ov-check${s.done ? " done" : ""}`}>${s.done && html`<${LuCheck} size=${10} strokeWidth=${3} />`}</span>
+            <span style=${{ flex: 1, color: s.done ? "var(--text-muted)" : "var(--text)", textDecoration: s.done ? "line-through" : "none" }}>${s.label}</span>
+            ${s === nextStep && html`<span className="badge badge-info">Next</span>`}
+            <${LuArrowRight} size=${13} color="var(--text-muted)" />
+          </div>`)}
         </div>
       </div>
-    </div>`}
+    </div>
 
-    <div
-      className="stats-grid"
-      style=${{ gridTemplateColumns: "repeat(4, 1fr)" }}
-    >
-      <div
-        className="stat-card"
-        onClick=${() => setPage("database")}
-        style=${{ cursor: "pointer" }}
-      >
-        <div
-          className="flex items-center gap-2"
-          style=${{ marginBottom: "10px" }}
-        >
-          <span className="stat-label" style=${{ margin: 0 }}
-            >Database</span
-          >
-          <span
-            className=${`stat-badge ${dbOk ? "success" : "warning"}`}
-            style=${{ marginLeft: "auto" }}
-            >${dbOk ? "Connected" : "Pending"}</span
-          >
+    <div className="ov-row even">
+      <div className="ov-card">
+        <div className="ov-card-head">
+          <span className="ov-card-title">Recent requests</span>
+          ${m?.enabled && html`<span className="ov-num"><span className="status-dot on" style=${{ display: "inline-block", marginRight: 6 }} />Live</span>`}
         </div>
-        <span
-          className="stat-value"
-          style=${{ fontSize: "18px", fontWeight: 600 }}
-          >${dbOk ? data.dbType || "MongoDB" : "\u2014"}</span
-        >
-      </div>
-      <div
-        className="stat-card"
-        onClick=${() => setPage("schemas")}
-        style=${{ cursor: "pointer" }}
-      >
-        <span className="stat-label">Models</span>
-        <div className="flex items-center gap-2">
-          <span className="stat-value">${modelCount}</span>
-          <span
-            className="text-sm text-muted"
-            style=${{ marginTop: "6px" }}
-            >${totalFields} field${totalFields !== 1 ? "s" : ""}</span
-          >
+        <div className="ov-list">
+          ${!m?.recent?.length
+            ? html`<div className="ov-empty">No API traffic yet. Send one from the <a href="#/api-tester" style=${{ color: "var(--accent-light)" }}>API Tester</a>.</div>`
+            : m.recent.slice(0, 8).map((r, i) => html`<div key=${r.ts + "-" + i} className="ov-list-row">
+                <span className="ov-method"><span className=${`route-method ${r.method.toLowerCase()}`}>${r.method}</span></span>
+                <span className="ov-path" title=${r.path}>${r.path}</span>
+                <span className=${`ov-status ${statusClass(r.status)}`}>${r.status}</span>
+                <span className="ov-num" style=${{ width: 54, textAlign: "right" }}>${r.ms} ms</span>
+                <span className="ov-num" style=${{ width: 60, textAlign: "right" }}>${timeAgo(r.ts)}</span>
+              </div>`)}
         </div>
       </div>
-      <div
-        className="stat-card"
-        onClick=${() => setPage("routes")}
-        style=${{ cursor: "pointer" }}
-      >
-        <span className="stat-label">Routes</span>
-        <span className="stat-value">${routeCount}</span>
-      </div>
-      <div className="stat-card">
-        <span className="stat-label">Features</span>
-        <span className="stat-value">${featuresActive.length}</span>
-        <div
-          className="flex gap-1"
-          style=${{ flexWrap: "wrap", marginTop: "4px" }}
-        >
-          ${status?.socketConfigured &&
-          html`<span className="stat-badge info">Socket.io</span>`}
-          ${status?.websocketConfigured &&
-          html`<span className="stat-badge info">WebSocket</span>`}
-          ${status?.serialportConfigured &&
-          html`<span className="stat-badge info">Serial</span>`}
-          ${featuresActive.length === 0 &&
-          html`<span className="stat-badge info">None yet</span>`}
+
+      <div className="ov-card">
+        <div className="ov-card-head">
+          <span className="ov-card-title">Project</span>
+          <button className="btn btn-ghost btn-sm" onClick=${() => setPage("schemas")} disabled=${!data.mongoConfigured}>Schemas</button>
+        </div>
+        <div className="ov-list">
+          <div className="ov-list-row clickable" onClick=${() => setPage("database")}>
+            <span className="sidebar-icon">${Icons.database}</span>
+            <span style=${{ flex: 1 }}>Database</span>
+            <span className=${`badge ${dbOk ? "badge-success" : "badge-muted"}`}>
+              ${dbOk ? (status.sqlProvider || data.dbType || "Connected") : "Not connected"}
+            </span>
+          </div>
+          <div className="ov-list-row clickable" onClick=${() => data.mongoConfigured && setPage("schemas")}>
+            <span className="sidebar-icon">${Icons.schema}</span>
+            <span style=${{ flex: 1 }}>Models</span>
+            <span className="ov-num">${models.length} · ${models.reduce((n, x) => n + (x.fields?.length || 0), 0)} fields</span>
+          </div>
+          <div className="ov-list-row clickable" onClick=${() => setPage("routes")}>
+            <span className="sidebar-icon">${Icons.route}</span>
+            <span style=${{ flex: 1 }}>Route files</span>
+            <span className="ov-num">${routes.length}</span>
+          </div>
+          <div style=${{ padding: "12px 16px", display: "flex", flexWrap: "wrap", gap: 6, borderTop: "1px solid var(--border)" }}>
+            ${features.map((f) => html`<button key=${f.label} onClick=${() => setPage(f.page)}
+              className=${`badge ${f.on ? "badge-success" : "badge-muted"}`} style=${{ border: "none", cursor: "pointer" }}>
+              ${f.on ? "●" : "○"} ${f.label}
+            </button>`)}
+          </div>
         </div>
       </div>
     </div>
 
-    ${(modelCount > 0 || routeCount > 0) &&
-    html`<div className="grid-2">
-      ${modelCount > 0 &&
-      html`<div className="card">
-        <div className="flex items-center justify-between mb-3">
-          <div
-            className="card-title"
-            style=${{ margin: 0, fontSize: "13px" }}
-          >
-            Models
-          </div>
-          <button
-            className="btn btn-ghost btn-sm"
-            onClick=${() => setPage("schemas")}
-            style=${{ fontSize: "11px" }}
-          >
-            View All
-          </button>
+    <div className="ov-row even">
+      <div className="ov-card">
+        <div className="ov-card-head">
+          <span className="ov-card-title">Recent errors</span>
+          <button className="btn btn-ghost btn-sm" onClick=${() => setPage("logs")}>View logs</button>
         </div>
-        ${data.models.slice(0, 5).map(
-          (m) =>
-            html`<div
-              key=${m.name}
-              className="flex items-center gap-3"
-              style=${{
-                padding: "8px 0",
-                borderBottom: "1px solid rgba(255,255,255,0.04)",
-              }}
-            >
-              <div
-                style=${{
-                  width: "28px",
-                  height: "28px",
-                  borderRadius: "6px",
-                  background: "var(--accent-glow)",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  flexShrink: 0,
-                }}
-              >
-                <span
-                  style=${{
-                    fontSize: "11px",
-                    fontWeight: 700,
-                    color: "var(--accent-light)",
-                  }}
-                  >${m.name.charAt(0).toUpperCase()}</span
-                >
-              </div>
-              <div style=${{ flex: 1, minWidth: 0 }}>
-                <div style=${{ fontWeight: 500, fontSize: "13px" }}>
-                  ${m.name}
-                </div>
-                <div
-                  className="text-sm text-muted"
-                  style=${{ fontSize: "11px" }}
-                >
-                  ${m.fields?.length || 0} fields
-                </div>
-              </div>
-              <div className="flex gap-1">
-                ${(m.fields || []).filter((f) => f.required).length > 0 &&
-                html`<span
-                  style=${{
-                    fontSize: "9px",
-                    padding: "2px 6px",
-                    borderRadius: "4px",
-                    background: "var(--success-glow)",
-                    color: "var(--success)",
-                    fontWeight: 600,
-                  }}
-                  >${(m.fields || []).filter((f) => f.required).length}
-                  REQ</span
-                >`}
-                ${(m.fields || []).filter((f) => f.unique).length > 0 &&
-                html`<span
-                  style=${{
-                    fontSize: "9px",
-                    padding: "2px 6px",
-                    borderRadius: "4px",
-                    background: "var(--warning-glow)",
-                    color: "var(--warning)",
-                    fontWeight: 600,
-                  }}
-                  >${(m.fields || []).filter((f) => f.unique).length}
-                  UNQ</span
-                >`}
-              </div>
-            </div>`,
-        )}
-        ${modelCount > 5 &&
-        html`<div
-          className="text-sm text-muted"
-          style=${{ padding: "8px 0", textAlign: "center" }}
-        >
-          +${modelCount - 5} more
-        </div>`}
-      </div>`}
-      ${routeCount > 0 &&
-      html`<div className="card">
-        <div className="flex items-center justify-between mb-3">
-          <div
-            className="card-title"
-            style=${{ margin: 0, fontSize: "13px" }}
-          >
-            Routes
-          </div>
-          <button
-            className="btn btn-ghost btn-sm"
-            onClick=${() => setPage("routes")}
-            style=${{ fontSize: "11px" }}
-          >
-            View All
-          </button>
+        <div className="ov-list">
+          ${!health?.recentErrors?.length
+            ? html`<div className="ov-empty">No errors logged. Nice.</div>`
+            : health.recentErrors.map((e) => html`<div key=${e.id} className="ov-err" title=${e.message}>
+                <span>${timeAgo(new Date(e.timestamp).getTime())}</span>${e.message.split("\n")[0]}
+              </div>`)}
         </div>
-        ${data.routes.slice(0, 5).map((r) => {
-          const rName = r.replace(".js", "");
-          return html`<div
-            key=${r}
-            className="flex items-center gap-3"
-            style=${{
-              padding: "8px 0",
-              borderBottom: "1px solid rgba(255,255,255,0.04)",
-            }}
-          >
-            <div
-              style=${{
-                width: "28px",
-                height: "28px",
-                borderRadius: "6px",
-                background: "rgba(59,130,246,0.1)",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                flexShrink: 0,
-              }}
-            >
-              <span
-                style=${{
-                  fontSize: "11px",
-                  fontWeight: 700,
-                  color: "#60a5fa",
-                }}
-                >${rName.charAt(0).toUpperCase()}</span
-              >
-            </div>
-            <div style=${{ flex: 1, minWidth: 0 }}>
-              <div style=${{ fontWeight: 500, fontSize: "13px" }}>
-                ${rName}
+      </div>
+
+      <div className="ov-card">
+        <div className="ov-card-head">
+          <span className="ov-card-title">Process</span>
+          ${health && html`<span className="ov-num">pid ${health.pid}</span>`}
+        </div>
+        ${health
+          ? html`<div>
+              <div className="ov-meter">
+                <div className="ov-meter-top"><span>Heap</span><span>${formatBytes(health.memory.heapUsed)} / ${formatBytes(health.memory.heapTotal)}</span></div>
+                <div className="ov-progress"><span style=${{ width: `${heapPct}%` }} /></div>
               </div>
-              <div
-                className="text-sm text-muted"
-                style=${{
-                  fontSize: "11px",
-                  fontFamily: "'SF Mono', monospace",
-                }}
-              >
-                src/routes/${r}
+              <div className="ov-meter">
+                <div className="ov-meter-top"><span>CPU load (1m)</span><span>${health.load.toFixed(2)} / ${health.cpus} cores</span></div>
+                <div className="ov-progress"><span style=${{ width: `${Math.min(100, (health.load / health.cpus) * 100)}%` }} /></div>
               </div>
-            </div>
-          </div>`;
-        })}
-        ${routeCount > 5 &&
-        html`<div
-          className="text-sm text-muted"
-          style=${{ padding: "8px 0", textAlign: "center" }}
-        >
-          +${routeCount - 5} more
-        </div>`}
-      </div>`}
-    </div>`}
-    ${modelCount === 0 &&
-    routeCount === 0 &&
-    !nextAction &&
-    html`<div className="card">
-      <div className="empty-state">
-        <div className="empty-icon"><${LuRocket} size=${36} /></div>
-        <h3>Ready to Build</h3>
-        <p>Start by creating schemas and routes for your API</p>
+              <div className="ov-list-row"><span style=${{ flex: 1, color: "var(--text-muted)" }}>Platform</span><span>${health.platform}</span></div>
+              <div className="ov-list-row"><span style=${{ flex: 1, color: "var(--text-muted)" }}>Started</span><span>${new Date(health.startedAt).toLocaleString()}</span></div>
+            </div>`
+          : html`<div className="ov-empty">Server unreachable — it may be restarting.</div>`}
       </div>
-    </div>`}
+    </div>
   </div>`;
 }