@flame0510/project-aether 1.7.0 → 1.9.0

package/app/globals.css

@@ -636,8 +636,59 @@ html, body { height: 100%; height: 100dvh; background: var(--bg); color: var(--t
 .ui-pill.ui-tone--info { border-color: rgba(99,102,241,0.28); color: #818cf8; background: rgba(99,102,241,0.12); }
 .ui-tone--info { border-color: rgba(99,102,241,0.28); }
 
+/* Meter: a 0-100 % fill whose colour carries the level; the level is also written out. */
+.ui-meter { display: flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 15px; }
+.ui-meter__track { flex: 1; height: 6px; background: var(--bg3); border-radius: 0; overflow: hidden; }
+.ui-meter__fill { height: 100%; transition: width 0.3s; }
+.ui-meter__fill--ok { background: var(--violet); }
+.ui-meter__fill--warning { background: var(--yellow); }
+.ui-meter__fill--critical { background: var(--red); }
+.ui-meter__level { font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; }
+.ui-meter__level--warning { color: var(--yellow); }
+.ui-meter__level--critical { color: var(--red); }
+
+/* TimeSeriesChart: one series, 2px line, 10% peak wash, hairline grid, text in text tokens. */
+.ui-chart { transition: opacity 0.2s; }
+.ui-chart__plot { position: relative; width: 100%; outline: none; }
+.ui-chart__plot:focus-visible { outline: 1px solid var(--violet-dim); outline-offset: -1px; }
+.ui-chart__grid { stroke: var(--border); stroke-width: 1; }
+.ui-chart__tick { fill: var(--text-dim); font-size: 10px; font-family: var(--font-mono-stack); font-variant-numeric: tabular-nums; }
+.ui-chart__line { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.ui-chart__wash { fill: var(--violet); fill-opacity: 0.1; stroke: none; }
+.ui-chart__dot { fill: var(--violet); }
+.ui-chart__marker { fill: var(--violet); stroke: var(--bg2); stroke-width: 2; }
+.ui-chart__end-label { fill: var(--text); font-size: 11px; font-family: var(--font-mono-stack); }
+.ui-chart__crosshair { stroke: var(--text-dim); stroke-width: 1; }
+.ui-chart__tooltip { position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; background: var(--bg); border: 1px solid var(--border); padding: 6px 8px; font-size: 11px; white-space: nowrap; }
+.ui-chart__table { margin-top: 6px; font-size: 11px; }
+.ui-chart__table summary { cursor: pointer; color: var(--text-dim); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
+.ui-chart__table table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
+.ui-chart__table caption { text-align: left; color: var(--text-dim); padding-bottom: 4px; }
+.ui-chart__table th, .ui-chart__table td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--border); font-weight: 400; }
+.ui-chart__table th { color: var(--text-dim); }
+
+/* Container terminal: full screen, a bar on top, xterm.js below (it owns its own scrolling). */
+.terminal-page { position: fixed; inset: 0; height: 100dvh; z-index: 9999; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
+.terminal-page__bar { flex-shrink: 0; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
+.terminal-page__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.terminal-page__container { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.terminal-page__actions { display: flex; gap: 8px; }
+.terminal-page__notice { flex-shrink: 0; padding: 8px 16px; font-size: 12px; color: var(--yellow); border-bottom: 1px solid var(--border); }
+.terminal-page__screen { flex: 1; min-height: 0; padding: 8px 0 0 12px; overflow: hidden; }
+.terminal-page__screen .xterm { height: 100%; }
+
+/* System page: three cards, then one chart per metric; one column below lg (992px). */
+.system-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+.system-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+@media (max-width: 991px) {
+  .system-cards, .system-charts { grid-template-columns: minmax(0, 1fr); }
+}
+
 .cockpit { overflow: auto; height: 100%; padding: 20px; }
 .cockpit__metrics { display: grid; grid-template-columns: minmax(260px, 1.2fr) repeat(3, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
+.cockpit__machine-item { white-space: nowrap; color: var(--text); }
+.cockpit__machine-item--warning { color: var(--yellow); }
+.cockpit__machine-item--critical { color: var(--red); }
 .cockpit__health-row { margin-top: 12px; display: flex; align-items: baseline; gap: 12px; }
 .cockpit__health { font-size: 34px; text-transform: uppercase; font-weight: 800; }
 .cockpit__health--ok { color: var(--green); }

package/app/lineage/loading.tsx

@@ -1,10 +1,5 @@
-import { Skeleton, CardRowSkeleton } from '../components/Skeleton';
+import { ListPageSkeleton } from '../components/Skeleton';
 
-const PageSkeleton = () => (
-  <div style={{ padding: '24px 20px', maxWidth: 1080, margin: '0 auto' }}>
-    <Skeleton width={120} height={20} accent style={{ marginBottom: 20 }} />
-    <CardRowSkeleton count={5} height={48} />
-  </div>
-);
-
-export default PageSkeleton;
+export default function LineageLoading() {
+  return <ListPageSkeleton />;
+}

package/app/memory/loading.tsx

@@ -1,10 +1,5 @@
-import { Skeleton, CardRowSkeleton } from '../components/Skeleton';
+import { ListPageSkeleton } from '../components/Skeleton';
 
-const PageSkeleton = () => (
-  <div style={{ padding: '24px 20px', maxWidth: 1080, margin: '0 auto' }}>
-    <Skeleton width={120} height={20} accent style={{ marginBottom: 20 }} />
-    <CardRowSkeleton count={5} height={48} />
-  </div>
-);
-
-export default PageSkeleton;
+export default function MemoryLoading() {
+  return <ListPageSkeleton />;
+}

package/app/plugins/loading.tsx

@@ -1,10 +1,5 @@
-import { Skeleton, CardRowSkeleton } from '../components/Skeleton';
+import { ListPageSkeleton } from '../components/Skeleton';
 
-const PageSkeleton = () => (
-  <div style={{ padding: '24px 20px', maxWidth: 1080, margin: '0 auto' }}>
-    <Skeleton width={120} height={20} accent style={{ marginBottom: 20 }} />
-    <CardRowSkeleton count={5} height={48} />
-  </div>
-);
-
-export default PageSkeleton;
+export default function PluginsLoading() {
+  return <ListPageSkeleton />;
+}

package/app/skills/loading.tsx

@@ -1,10 +1,5 @@
-import { Skeleton, CardRowSkeleton } from '../components/Skeleton';
+import { ListPageSkeleton } from '../components/Skeleton';
 
-const PageSkeleton = () => (
-  <div style={{ padding: '24px 20px', maxWidth: 1080, margin: '0 auto' }}>
-    <Skeleton width={120} height={20} accent style={{ marginBottom: 20 }} />
-    <CardRowSkeleton count={5} height={48} />
-  </div>
-);
-
-export default PageSkeleton;
+export default function SkillsLoading() {
+  return <ListPageSkeleton />;
+}

package/app/system/PageClient.tsx

@@ -0,0 +1,263 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { apiFetch } from '@/lib/apiFetch';
+import { useRev4aTimezone } from '@/lib/hooks/useRev4aTimezone';
+import { Meter, meterLevel, Page, PageHeader, Pill, Surface, Tabs, TimeSeriesChart } from '../components/ui';
+import { SystemCardsSkeleton, SystemChartsSkeleton, SystemDescription } from './SystemSkeleton';
+
+type Range = '1h' | '24h' | '7d' | '30d';
+const RANGES: { id: Range; label: string; span: number }[] = [
+  { id: '1h', label: '1h', span: 3600 },
+  { id: '24h', label: '24h', span: 86_400 },
+  { id: '7d', label: '7d', span: 7 * 86_400 },
+  { id: '30d', label: '30d', span: 30 * 86_400 },
+];
+const POLL_MS = 30_000;
+
+/** Thresholds (%) for the meters: warning, critical. */
+const CPU_RAM_LEVELS = [85, 95] as const;
+const DISK_LEVELS = [80, 90] as const;
+
+interface Disk {
+  mount: string;
+  roles: string[];
+  used_mb: number;
+  avail_mb: number;
+  total_mb: number;
+  percent: number;
+}
+
+interface MetricsPayload {
+  latest: {
+    ts: number;
+    age_s: number;
+    cpu: number | null;
+    ram_used_mb: number | null;
+    ram_total_mb: number | null;
+    swap_used_mb: number | null;
+    swap_total_mb: number | null;
+    load_avg_1m: number | null;
+    load_avg_5m: number | null;
+    load_avg_15m: number | null;
+    disks: Disk[];
+  } | null;
+  host: { hostname: string; platform: string; cores: number; uptime_s: number };
+  interval_s: number;
+  range: Range;
+  bucket_s: number;
+  history: { ts: number; cpu_avg: number | null; cpu_max: number | null; ram_avg: number | null; ram_max: number | null }[];
+  disk_history: { mount: string; points: { ts: number; percent: number | null }[] }[];
+}
+
+const ROLE_LABEL: Record<string, string> = { root: 'system', docker: 'Docker data', data: 'Rev4a data' };
+
+function formatMb(mb: number | null | undefined): string {
+  if (mb === null || mb === undefined) return '—';
+  if (mb >= 1024 * 1024) return `${(mb / 1024 / 1024).toFixed(2)} TB`;
+  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`;
+  return `${mb} MB`;
+}
+
+function formatUptime(s: number): string {
+  const d = Math.floor(s / 86_400);
+  const h = Math.floor((s % 86_400) / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  return d > 0 ? `${d} d ${h} h` : h > 0 ? `${h} h ${m} min` : `${m} min`;
+}
+
+function percentOf(used: number | null, total: number | null): number | null {
+  return used !== null && total ? Math.round((used / total) * 1000) / 10 : null;
+}
+
+function timeFormatter(range: Range, timeZone: string): (ts: number) => string {
+  const opts: Intl.DateTimeFormatOptions =
+    range === '1h' || range === '24h'
+      ? { hour: '2-digit', minute: '2-digit', hour12: false }
+      : { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', hour12: false };
+  const fmt = new Intl.DateTimeFormat('en-GB', { ...opts, timeZone });
+  return (ts) => fmt.format(new Date(ts * 1000));
+}
+
+export default function SystemPageClient() {
+  const [range, setRange] = useState<Range>('1h');
+  const [data, setData] = useState<MetricsPayload | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const abortRef = useRef<AbortController | null>(null);
+
+  const load = useCallback(async (r: Range) => {
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setLoading(true);
+    try {
+      const res = await apiFetch(`/api/metrics?range=${r}`, { signal: controller.signal });
+      const body = await res.json();
+      if (!res.ok) throw new Error(body?.error || `Error ${res.status}`);
+      setData(body as MetricsPayload);
+      setError('');
+    } catch (e: any) {
+      if (e?.name === 'AbortError') return;
+      setError(e?.message || 'Could not load the metrics');
+    } finally {
+      if (abortRef.current === controller) setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load(range);
+    const timer = setInterval(() => load(range), POLL_MS);
+    return () => {
+      clearInterval(timer);
+      abortRef.current?.abort();
+    };
+  }, [range, load]);
+
+  const latest = data?.latest ?? null;
+  const host = data?.host;
+  const span = RANGES.find((r) => r.id === range)!.span;
+  const to = Math.floor(Date.now() / 1000);
+  const from = to - span;
+  const timeZone = useRev4aTimezone();
+  const formatTime = timeFormatter(range, timeZone);
+  const stale = latest !== null && data !== null && latest.age_s > data.interval_s * 3;
+  const chartStale = loading && data !== null && data.range !== range;
+  // Before the first answer: placeholders shaped like the content (an error shows instead).
+  const firstLoad = data === null && !error;
+
+  const cpu = latest?.cpu ?? null;
+  const ramPct = latest ? percentOf(latest.ram_used_mb, latest.ram_total_mb) : null;
+
+  return (
+    <Page>
+      <PageHeader
+        eyebrow="Host"
+        title="System"
+        description={<SystemDescription host={host ? `${host.hostname} · ${host.cores} cores · up ${formatUptime(host.uptime_s)}` : null} />}
+      />
+
+      {error && <Surface tone="danger"><span style={{ color: 'var(--red)', fontSize: 12 }}>{error}</span></Surface>}
+
+      {data && !latest && (
+        <Surface tone="warning">
+          <div className="ui-kicker">No samples yet</div>
+          <p className="ui-muted" style={{ fontSize: 12, marginTop: 8 }}>
+            The Rev4a daemon records one every {data.interval_s} s. If this stays empty, check that `rev4a serve` is running.
+          </p>
+        </Surface>
+      )}
+
+      {stale && latest && (
+        <Surface tone="warning">
+          <div className="ui-kicker">Not collecting</div>
+          <p className="ui-muted" style={{ fontSize: 12, marginTop: 8 }}>
+            The latest sample is {formatUptime(latest.age_s)} old: the values below are not current. Check that the Rev4a daemon is running.
+          </p>
+        </Surface>
+      )}
+
+      {firstLoad ? <SystemCardsSkeleton /> : (
+      <div className="system-cards">
+        <Surface as="article">
+          <div className="ui-kicker">CPU</div>
+          <div className="ui-metric-value">{cpu !== null ? `${Math.round(cpu)}%` : '—'}</div>
+          {cpu !== null && <Meter percent={cpu} level={meterLevel(cpu, ...CPU_RAM_LEVELS)} label="CPU in use" />}
+          <div className="ui-key-values" style={{ marginTop: 12 }}>
+            <div className="ui-key-value"><span className="ui-muted">Cores</span><span>{host?.cores ?? '—'}</span></div>
+            <div className="ui-key-value">
+              <span className="ui-muted">Load 1 / 5 / 15 min</span>
+              <span>{latest ? `${latest.load_avg_1m ?? '—'} / ${latest.load_avg_5m ?? '—'} / ${latest.load_avg_15m ?? '—'}` : '—'}</span>
+            </div>
+          </div>
+        </Surface>
+
+        <Surface as="article">
+          <div className="ui-kicker">Memory</div>
+          <div className="ui-metric-value">{ramPct !== null ? `${Math.round(ramPct)}%` : '—'}</div>
+          {ramPct !== null && <Meter percent={ramPct} level={meterLevel(ramPct, ...CPU_RAM_LEVELS)} label="Memory in use" />}
+          <div className="ui-key-values" style={{ marginTop: 12 }}>
+            <div className="ui-key-value">
+              <span className="ui-muted">Used / total</span>
+              <span>{latest ? `${formatMb(latest.ram_used_mb)} / ${formatMb(latest.ram_total_mb)}` : '—'}</span>
+            </div>
+            <div className="ui-key-value">
+              <span className="ui-muted">Available</span>
+              <span>{latest && latest.ram_total_mb !== null && latest.ram_used_mb !== null ? formatMb(latest.ram_total_mb - latest.ram_used_mb) : '—'}</span>
+            </div>
+            <div className="ui-key-value">
+              <span className="ui-muted">Swap used / total</span>
+              <span>{latest && latest.swap_total_mb ? `${formatMb(latest.swap_used_mb)} / ${formatMb(latest.swap_total_mb)}` : 'none'}</span>
+            </div>
+          </div>
+        </Surface>
+
+        <Surface as="article">
+          <div className="ui-kicker">Storage</div>
+          {!latest?.disks.length && <div className="ui-metric-value">—</div>}
+          {latest?.disks.map((d) => (
+            <div key={d.mount} style={{ marginTop: 14 }}>
+              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8, flexWrap: 'wrap' }}>
+                <span style={{ fontSize: 13 }}>{d.mount}</span>
+                <span style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                  {d.roles.map((r) => <Pill key={r}>{ROLE_LABEL[r] ?? r}</Pill>)}
+                </span>
+              </div>
+              <Meter percent={d.percent} level={meterLevel(d.percent, ...DISK_LEVELS)} label={`Storage in use on ${d.mount}`} />
+              <div className="ui-key-value" style={{ marginTop: 6 }}>
+                <span className="ui-muted">{d.percent}% · {formatMb(d.used_mb)} of {formatMb(d.total_mb)}</span>
+                <span>{formatMb(d.avail_mb)} free</span>
+              </div>
+            </div>
+          ))}
+        </Surface>
+      </div>
+      )}
+
+      <Tabs items={RANGES.map((r) => ({ label: r.label, active: range === r.id, onClick: () => setRange(r.id) }))} />
+
+      {firstLoad ? <SystemChartsSkeleton /> : (
+      <div className="system-charts">
+        <Surface as="section">
+          <div className="ui-kicker">CPU · average and peak</div>
+          <TimeSeriesChart
+            label="CPU in use"
+            points={(data?.history ?? []).map((p) => ({ ts: p.ts, value: p.cpu_avg, peak: p.cpu_max }))}
+            from={from}
+            to={to}
+            bucket={data?.bucket_s ?? 30}
+            stale={chartStale}
+            formatTime={formatTime}
+          />
+        </Surface>
+        <Surface as="section">
+          <div className="ui-kicker">Memory · average and peak</div>
+          <TimeSeriesChart
+            label="Memory in use"
+            points={(data?.history ?? []).map((p) => ({ ts: p.ts, value: p.ram_avg, peak: p.ram_max }))}
+            from={from}
+            to={to}
+            bucket={data?.bucket_s ?? 30}
+            stale={chartStale}
+            formatTime={formatTime}
+          />
+        </Surface>
+        {(data?.disk_history ?? []).map((d) => (
+          <Surface as="section" key={d.mount}>
+            <div className="ui-kicker">Storage · {d.mount}</div>
+            <TimeSeriesChart
+              label={`Storage in use on ${d.mount}`}
+              points={d.points.map((p) => ({ ts: p.ts, value: p.percent }))}
+              from={from}
+              to={to}
+              bucket={data?.bucket_s ?? 30}
+              stale={chartStale}
+              formatTime={formatTime}
+            />
+          </Surface>
+        ))}
+      </div>
+      )}
+    </Page>
+  );
+}

package/app/system/SystemSkeleton.tsx

@@ -0,0 +1,115 @@
+import { Skeleton } from '../components/Skeleton';
+import { Surface } from '../components/ui';
+
+/**
+ * Placeholders for the System page, used by `loading.tsx` while the route loads and by the
+ * page before its first answer. Each shimmer sits inside the same class as the text it
+ * stands in for (`ui-kicker`, `ui-metric-value`, `ui-key-value`, `ui-meter`), so the line
+ * boxes — and the card, grid and page heights — are the real ones and nothing jumps when
+ * the data lands. Measured against the loaded page, desktop and mobile.
+ */
+
+/**
+ * The header description: a fixed sentence, then the host facts on one line of their own —
+ * cut with an ellipsis rather than wrapped, so a long hostname cannot change the height.
+ */
+export function SystemDescription({ host }: { host: string | null }) {
+  return (
+    <>
+      CPU, memory and storage of the machine Rev4a runs on.
+      {/* width 0 + min-width 100%: the line takes the header's width without adding its own
+          (unwrapped) width to the header's minimum — else a long hostname widens the page. */}
+      <span style={{ display: 'block', width: 0, minWidth: '100%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+        {host ?? <Skeleton as="span" inline width={260} height={12} />}
+      </span>
+    </>
+  );
+}
+
+function KeyValueRow({ label, value }: { label: number; value: number }) {
+  return (
+    <div className="ui-key-value">
+      <span><Skeleton as="span" inline width={label} height={11} /></span>
+      <span><Skeleton as="span" inline width={value} height={11} /></span>
+    </div>
+  );
+}
+
+function MeterRow() {
+  return (
+    <div className="ui-meter">
+      <Skeleton height={6} style={{ flex: 1 }} />
+    </div>
+  );
+}
+
+function FigureCard({ title, rows }: { title: number; rows: [number, number][] }) {
+  return (
+    <Surface as="article">
+      <div className="ui-kicker"><Skeleton as="span" inline width={title} height={10} /></div>
+      <div className="ui-metric-value"><Skeleton as="span" inline width={72} height={26} accent /></div>
+      <MeterRow />
+      <div className="ui-key-values" style={{ marginTop: 12 }}>
+        {rows.map(([l, v], i) => <KeyValueRow key={i} label={l} value={v} />)}
+      </div>
+    </Surface>
+  );
+}
+
+export function SystemCardsSkeleton() {
+  return (
+    <div className="system-cards" aria-busy="true" aria-label="Loading machine metrics">
+      <FigureCard title={28} rows={[[40, 20], [120, 110]]} />
+      <FigureCard title={52} rows={[[80, 110], [64, 48], [110, 90]]} />
+      <Surface as="article">
+        <div className="ui-kicker"><Skeleton as="span" inline width={56} height={10} /></div>
+        <div style={{ marginTop: 14 }}>
+          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8, flexWrap: 'wrap' }}>
+            <span style={{ fontSize: 13 }}><Skeleton as="span" inline width={24} height={12} /></span>
+            <span style={{ display: 'flex', gap: 4 }}>
+              <span className="ui-pill"><Skeleton as="span" inline width={40} height={9} /></span>
+              <span className="ui-pill"><Skeleton as="span" inline width={56} height={9} /></span>
+            </span>
+          </div>
+          <MeterRow />
+          <div style={{ marginTop: 6 }}>
+            <KeyValueRow label={150} value={80} />
+          </div>
+        </div>
+      </Surface>
+    </div>
+  );
+}
+
+/** The chart grid: CPU, memory and one disk, each at the real plot height (160 px). */
+export function SystemChartsSkeleton({ count = 3 }: { count?: number }) {
+  return (
+    <div className="system-charts" aria-hidden="true">
+      {Array.from({ length: count }).map((_, i) => (
+        <Surface as="section" key={i}>
+          <div className="ui-kicker"><Skeleton as="span" inline width={150} height={10} /></div>
+          <Skeleton height={160} />
+          <div className="ui-chart__table">
+            <div style={{ fontSize: 10 }}><Skeleton as="span" inline width={48} height={9} /></div>
+          </div>
+        </Surface>
+      ))}
+    </div>
+  );
+}
+
+/** The range switch (1h · 24h · 7d · 30d) for the route's loading state, where the real tabs cannot render. */
+export function SystemRangeSkeleton() {
+  return (
+    <div
+      aria-hidden="true"
+      style={{ display: 'flex', borderBottom: '1px solid var(--border)', marginBottom: 20, height: 44, alignItems: 'center' }}
+    >
+      {[18, 24, 18, 24].map((w, i) => (
+        <div key={i} style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
+          <Skeleton width={w} height={11} />
+        </div>
+      ))}
+    </div>
+  );
+}

package/app/system/loading.tsx

@@ -0,0 +1,13 @@
+import { Page, PageHeader } from '../components/ui';
+import { SystemCardsSkeleton, SystemChartsSkeleton, SystemDescription, SystemRangeSkeleton } from './SystemSkeleton';
+
+export default function SystemLoading() {
+  return (
+    <Page>
+      <PageHeader eyebrow="Host" title="System" description={<SystemDescription host={null} />} />
+      <SystemCardsSkeleton />
+      <SystemRangeSkeleton />
+      <SystemChartsSkeleton />
+    </Page>
+  );
+}

package/app/system/page.tsx

@@ -0,0 +1,5 @@
+import SystemPageClient from './PageClient';
+
+export default function SystemPage() {
+  return <SystemPageClient />;
+}

package/app/tools/loading.tsx

@@ -1,10 +1,5 @@
-import { Skeleton, CardRowSkeleton } from '../components/Skeleton';
+import { ListPageSkeleton } from '../components/Skeleton';
 
-const PageSkeleton = () => (
-  <div style={{ padding: '24px 20px', maxWidth: 1080, margin: '0 auto' }}>
-    <Skeleton width={120} height={20} accent style={{ marginBottom: 20 }} />
-    <CardRowSkeleton count={5} height={48} />
-  </div>
-);
-
-export default PageSkeleton;
+export default function ToolsLoading() {
+  return <ListPageSkeleton />;
+}

package/bin/rev4a.js

@@ -513,14 +513,18 @@ function serve(port) {
 
   const children = [];
   const wsPort = process.env.TERMINAL_WS_PORT || '3741';
+  // Shared by server.js (which forwards the terminal WebSocket after checking the session)
+  // and the terminal server (which refuses anything without it). New at every start.
+  const terminalSecret = require('crypto').randomBytes(32).toString('hex');
 
   log('SERVE', `Starting Rev4a on port ${port}…`);
 
-  // Next.js
-  const next = spawn('npx', ['next', 'start', '-p', String(port)], {
+  // Next.js, through server.js: the same pages and API, plus the terminal WebSocket on
+  // this port (so the terminal needs no reverse proxy in front).
+  const next = spawn(process.execPath, ['server.js'], {
     cwd: ROOT,
     stdio: 'inherit',
-    env: childEnv,
+    env: { ...childEnv, TERMINAL_WS_PORT: wsPort, REV4A_TERMINAL_SECRET: terminalSecret },
   });
   children.push(next);
   log('SERVE', `Next.js PID ${next.pid}`);
@@ -538,7 +542,7 @@ function serve(port) {
   const ws = spawn(process.execPath, ['terminal-ws-server.js'], {
     cwd: ROOT,
     stdio: 'inherit',
-    env: { ...childEnv, TERMINAL_WS_PORT: wsPort },
+    env: { ...childEnv, TERMINAL_WS_PORT: wsPort, REV4A_TERMINAL_SECRET: terminalSecret },
   });
   children.push(ws);
   log('SERVE', `Terminal WS PID ${ws.pid}`);