feat(station): add disk, load average, alert banner to system monitor

server.js: /api/health now includes disk usage (df -B1 /) and load_avg
(os.loadavg) + cpu_count. station.html: disk bar, load average chips
with warn/crit coloring vs cpu count, alert banner highlights issues.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

posimai-dev/server.js

@@ -7,6 +7,7 @@ const https = require('https');
 const fs = require('fs');
 const path = require('path');
 const os = require('os');
+const { execSync } = require('child_process');
 
 const app = express();
 const PORT = process.env.PORT || 3333;
@@ -63,13 +64,34 @@ app.get('/api/health', (req, res) => {
       return sum + (dTotal > 0 ? (1 - dIdle / dTotal) * 100 : 0);
     }, 0) / s1.length;
 
+    // Disk usage
+    let disk = null;
+    try {
+      const dfOut = execSync('df -B1 / 2>/dev/null', { timeout: 2000 }).toString();
+      const parts = dfOut.trim().split('\n')[1].split(/\s+/);
+      const totalB = parseInt(parts[1]);
+      const usedB  = parseInt(parts[2]);
+      disk = {
+        total_gb: Math.round(totalB / 1e9 * 10) / 10,
+        used_gb:  Math.round(usedB  / 1e9 * 10) / 10,
+        use_pct:  Math.round(usedB / totalB * 100),
+      };
+    } catch (_) {}
+
+    // Load average (1 / 5 / 15 min) and CPU count
+    const loadAvg   = os.loadavg();
+    const cpuCount  = os.cpus().length;
+
     res.json({
       ok: true,
       hostname: os.hostname(),
       uptime_s: Math.floor(os.uptime()),
       cpu_pct: Math.round(cpuPct),
+      cpu_count: cpuCount,
+      load_avg: loadAvg.map(l => Math.round(l * 100) / 100),
       mem_used_mb: Math.round((total - mem) / 1024 / 1024),
       mem_total_mb: Math.round(total / 1024 / 1024),
+      disk,
       active_sessions: wss.clients ? wss.clients.size : 0,
       node_version: process.version,
       platform: os.platform(),

posimai-dev/station.html

@@ -9,7 +9,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
-    <script src="https://unpkg.com/lucide@0.344.0/dist/umd/lucide.min.js" integrity="sha384-JSBb8BPlCp7GjHPXAy+RrDJ7T8YWLF5Gx8FvyYME4Jx0G7E5H7d2x9K4N6Q8P2" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/lucide@0.344.0/dist/umd/lucide.min.js"></script>
 
     <style>
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -73,28 +73,64 @@
             animation: aurora-drift-3 18s ease-in-out infinite alternate;
         }
         @keyframes aurora-drift-1 {
-            from { transform: translate(0, 0) scale(1); }
+            from { transform: translate(0,0) scale(1); }
-            to   { transform: translate(-80px, 60px) scale(1.1); }
+            to   { transform: translate(-80px,60px) scale(1.1); }
         }
         @keyframes aurora-drift-2 {
-            from { transform: translate(0, 0) scale(1); }
+            from { transform: translate(0,0) scale(1); }
-            to   { transform: translate(60px, -40px) scale(1.08); }
+            to   { transform: translate(60px,-40px) scale(1.08); }
         }
         @keyframes aurora-drift-3 {
-            from { transform: translate(0, 0) scale(1); }
+            from { transform: translate(0,0) scale(1); }
-            to   { transform: translate(-40px, 50px) scale(0.95); }
+            to   { transform: translate(-40px,50px) scale(0.95); }
         }
 
-        /* Layout */
+        /* ── Alert banner ──────────────────────────────────────── */
+        #alert-bar {
+            display: none;
+            position: relative;
+            z-index: 2;
+            align-items: center;
+            gap: 10px;
+            padding: 8px 16px;
+            border-radius: 10px;
+            font-size: 12px;
+            font-weight: 500;
+            margin-bottom: 12px;
+            animation: alert-appear 0.3s ease;
+        }
+        #alert-bar.visible { display: flex; }
+        #alert-bar.warn {
+            background: rgba(251,146,60,0.12);
+            border: 1px solid rgba(251,146,60,0.3);
+            color: var(--warn);
+        }
+        #alert-bar.crit {
+            background: rgba(248,113,113,0.12);
+            border: 1px solid rgba(248,113,113,0.35);
+            color: var(--crit);
+            animation: alert-appear 0.3s ease, alert-pulse 2s ease-in-out infinite;
+        }
+        @keyframes alert-appear {
+            from { opacity: 0; transform: translateY(-4px); }
+            to   { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes alert-pulse {
+            0%, 100% { border-color: rgba(248,113,113,0.35); }
+            50%       { border-color: rgba(248,113,113,0.7); }
+        }
+        #alert-bar svg { width: 14px; height: 14px; flex-shrink: 0; }
+        #alert-messages { flex: 1; }
+
+        /* ── Layout ────────────────────────────────────────────── */
         #app {
             position: relative;
             z-index: 1;
             height: 100vh;
             display: grid;
-            grid-template-rows: auto 1fr auto;
+            grid-template-rows: auto auto 1fr auto;
-            grid-template-columns: 1fr;
-            gap: 0;
             padding: 24px;
+            gap: 0;
         }
 
         /* Top row */
@@ -102,7 +138,7 @@
             display: grid;
             grid-template-columns: 1fr auto 1fr;
             align-items: center;
-            padding-bottom: 20px;
+            padding-bottom: 16px;
         }
 
         #hostname-area {
@@ -118,8 +154,7 @@
             text-transform: uppercase;
         }
         #status-dot {
-            width: 8px;
+            width: 8px; height: 8px;
-            height: 8px;
             border-radius: 50%;
             background: var(--text3);
             flex-shrink: 0;
@@ -141,7 +176,6 @@
             font-size: clamp(52px, 6vw, 88px);
             font-weight: 300;
             letter-spacing: -0.03em;
-            color: var(--text);
             line-height: 1;
         }
         #date {
@@ -151,14 +185,13 @@
             letter-spacing: 0.06em;
         }
 
-        /* Last checked */
         #last-checked {
             text-align: right;
             font-size: 12px;
             color: var(--text3);
         }
 
-        /* Middle: metrics + services */
+        /* ── Middle ─────────────────────────────────────────────── */
         #middle {
             display: grid;
             grid-template-columns: 340px 1fr;
@@ -166,17 +199,18 @@
             min-height: 0;
         }
 
-        /* System metrics panel */
+        /* ── Panels ─────────────────────────────────────────────── */
-        #metrics-panel {
+        .panel {
             background: var(--surface);
             border: 1px solid var(--border);
             border-radius: 16px;
             padding: 20px;
             display: flex;
             flex-direction: column;
-            gap: 18px;
+            gap: 16px;
             overflow: hidden;
         }
+
         .panel-title {
             font-size: 11px;
             font-weight: 600;
@@ -186,11 +220,12 @@
             display: flex;
             align-items: center;
             gap: 6px;
+            flex-shrink: 0;
         }
         .panel-title svg { width: 14px; height: 14px; }
 
-        /* Metric bars */
+        /* ── Metric bars ─────────────────────────────────────────── */
-        .metric-item { display: flex; flex-direction: column; gap: 6px; }
+        .metric-item { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
         .metric-header-row {
             display: flex;
             justify-content: space-between;
@@ -199,12 +234,11 @@
         .metric-label { font-size: 12px; color: var(--text2); }
         .metric-val {
             font-family: 'JetBrains Mono', monospace;
-            font-size: 13px;
+            font-size: 12px;
             font-weight: 500;
-            color: var(--text);
         }
         .bar-track {
-            height: 6px;
+            height: 5px;
             border-radius: 3px;
             background: rgba(255,255,255,0.06);
             overflow: hidden;
@@ -218,27 +252,49 @@
         .bar-fill.warn { background: var(--warn); }
         .bar-fill.crit { background: var(--crit); }
 
-        /* Stat grid */
+        /* ── Load average row ────────────────────────────────────── */
+        .load-row {
+            display: flex;
+            gap: 8px;
+            flex-shrink: 0;
+        }
+        .load-chip {
+            flex: 1;
+            background: var(--surface2);
+            border-radius: 8px;
+            padding: 8px;
+            text-align: center;
+        }
+        .load-chip-label { font-size: 10px; color: var(--text3); margin-bottom: 3px; }
+        .load-chip-val {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 15px;
+            font-weight: 500;
+        }
+        .load-chip-val.warn { color: var(--warn); }
+        .load-chip-val.crit { color: var(--crit); }
+
+        /* ── Stat grid ───────────────────────────────────────────── */
         .stat-grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
-            gap: 10px;
+            gap: 8px;
+            flex-shrink: 0;
         }
         .stat-card {
             background: var(--surface2);
             border-radius: 10px;
-            padding: 12px;
+            padding: 10px 12px;
         }
-        .stat-label { font-size: 11px; color: var(--text3); margin-bottom: 4px; }
+        .stat-label { font-size: 10px; color: var(--text3); margin-bottom: 3px; }
         .stat-val {
             font-family: 'JetBrains Mono', monospace;
-            font-size: 18px;
+            font-size: 16px;
             font-weight: 500;
-            color: var(--text);
             letter-spacing: -0.02em;
         }
 
-        /* Open link */
+        /* ── Open button ─────────────────────────────────────────── */
         .open-btn {
             display: flex;
             align-items: center;
@@ -254,22 +310,12 @@
             font-weight: 500;
             transition: background 0.2s, border-color 0.2s;
             margin-top: auto;
+            flex-shrink: 0;
         }
         .open-btn:hover { background: rgba(34,211,238,0.14); border-color: rgba(34,211,238,0.35); }
         .open-btn svg { width: 14px; height: 14px; }
 
-        /* Services panel */
+        /* ── Service grid ────────────────────────────────────────── */
-        #services-panel {
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: 16px;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            gap: 14px;
-            overflow: hidden;
-        }
-
         .service-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
@@ -285,18 +331,13 @@
             display: flex;
             flex-direction: column;
             gap: 8px;
-            cursor: default;
         }
         .service-card-top {
             display: flex;
             align-items: center;
             justify-content: space-between;
         }
-        .service-name {
+        .service-name { font-size: 13px; font-weight: 500; }
-            font-size: 13px;
-            font-weight: 500;
-            color: var(--text);
-        }
         .service-badge {
             font-size: 10px;
             font-weight: 600;
@@ -304,42 +345,29 @@
             padding: 2px 7px;
             border-radius: 20px;
         }
-        .service-badge.ok   { background: rgba(74,222,128,0.15); color: var(--ok); }
+        .service-badge.ok       { background: rgba(74,222,128,0.15);  color: var(--ok); }
-        .service-badge.warn { background: rgba(251,146,60,0.15);  color: var(--warn); }
+        .service-badge.warn     { background: rgba(251,146,60,0.15);   color: var(--warn); }
-        .service-badge.crit { background: rgba(248,113,113,0.15); color: var(--crit); }
+        .service-badge.crit     { background: rgba(248,113,113,0.15);  color: var(--crit); }
-        .service-badge.off  { background: rgba(100,116,139,0.15); color: var(--text3); }
+        .service-badge.off      { background: rgba(100,116,139,0.15);  color: var(--text3); }
-        .service-badge.checking { background: rgba(34,211,238,0.10); color: var(--accent); }
+        .service-badge.checking { background: rgba(34,211,238,0.10);   color: var(--accent); }
-        .service-desc {
+        .service-desc  { font-size: 11px; color: var(--text3); line-height: 1.4; }
-            font-size: 11px;
-            color: var(--text3);
-            line-height: 1.4;
-        }
         .service-latency {
             font-family: 'JetBrains Mono', monospace;
             font-size: 11px;
             color: var(--text3);
         }
 
-        /* Bottom bar */
+        /* ── Bottom bar ──────────────────────────────────────────── */
         #bottom {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding-top: 16px;
+            padding-top: 14px;
             border-top: 1px solid var(--border);
         }
-        .bottom-brand {
+        .bottom-brand { font-size: 12px; color: var(--text3); font-weight: 500; letter-spacing: 0.04em; }
-            font-size: 12px;
-            color: var(--text3);
-            font-weight: 500;
-            letter-spacing: 0.04em;
-        }
         .bottom-brand span { color: var(--accent); }
-
+        .bottom-links { display: flex; gap: 8px; }
-        .bottom-links {
-            display: flex;
-            gap: 8px;
-        }
         .bottom-link {
             display: flex;
             align-items: center;
@@ -355,11 +383,7 @@
         }
         .bottom-link:hover { color: var(--accent); border-color: rgba(34,211,238,0.3); }
         .bottom-link svg { width: 12px; height: 12px; }
-
+        #refresh-countdown { font-size: 12px; color: var(--text3); }
-        #refresh-countdown {
-            font-size: 12px;
-            color: var(--text3);
-        }
     </style>
 </head>
 <body>
@@ -371,35 +395,37 @@
 </div>
 
 <div id="app">
-    <!-- Top row -->
+
+    <!-- Top -->
     <div id="top">
         <div id="hostname-area">
             <div id="status-dot" class="off"></div>
             <span id="hostname">—</span>
         </div>
-
         <div id="clock-area">
             <div id="clock">00:00:00</div>
             <div id="date">—</div>
         </div>
-
         <div id="last-checked">—</div>
     </div>
 
+    <!-- Alert banner -->
+    <div id="alert-bar">
+        <i data-lucide="alert-triangle"></i>
+        <span id="alert-messages"></span>
+    </div>
+
     <!-- Middle -->
     <div id="middle">
 
         <!-- System metrics -->
-        <div id="metrics-panel">
+        <div class="panel" id="metrics-panel">
-            <div class="panel-title">
+            <div class="panel-title"><i data-lucide="cpu"></i>Ubuntu PC</div>
-                <i data-lucide="cpu"></i>
-                Ubuntu PC
-            </div>
 
             <div class="metric-item">
                 <div class="metric-header-row">
                     <span class="metric-label">CPU</span>
-                    <span class="metric-val" id="cpu-val">— %</span>
+                    <span class="metric-val" id="cpu-val">—</span>
                 </div>
                 <div class="bar-track"><div class="bar-fill" id="cpu-bar" style="width:0%"></div></div>
             </div>
@@ -407,11 +433,37 @@
             <div class="metric-item">
                 <div class="metric-header-row">
                     <span class="metric-label">Memory</span>
-                    <span class="metric-val" id="mem-val">— MB</span>
+                    <span class="metric-val" id="mem-val">—</span>
                 </div>
                 <div class="bar-track"><div class="bar-fill" id="mem-bar" style="width:0%"></div></div>
             </div>
 
+            <div class="metric-item">
+                <div class="metric-header-row">
+                    <span class="metric-label">Disk (/)</span>
+                    <span class="metric-val" id="disk-val">—</span>
+                </div>
+                <div class="bar-track"><div class="bar-fill" id="disk-bar" style="width:0%"></div></div>
+            </div>
+
+            <div>
+                <div class="metric-label" style="margin-bottom:8px">Load Average <span id="cpu-count-label" style="color:var(--text3);font-size:10px"></span></div>
+                <div class="load-row">
+                    <div class="load-chip">
+                        <div class="load-chip-label">1 min</div>
+                        <div class="load-chip-val" id="load-1">—</div>
+                    </div>
+                    <div class="load-chip">
+                        <div class="load-chip-label">5 min</div>
+                        <div class="load-chip-val" id="load-5">—</div>
+                    </div>
+                    <div class="load-chip">
+                        <div class="load-chip-label">15 min</div>
+                        <div class="load-chip-val" id="load-15">—</div>
+                    </div>
+                </div>
+            </div>
+
             <div class="stat-grid">
                 <div class="stat-card">
                     <div class="stat-label">Uptime</div>
@@ -438,19 +490,16 @@
         </div>
 
         <!-- Services -->
-        <div id="services-panel">
+        <div class="panel">
-            <div class="panel-title">
+            <div class="panel-title"><i data-lucide="radio"></i>Services</div>
-                <i data-lucide="radio"></i>
-                Services
-            </div>
             <div class="service-grid" id="service-grid"></div>
         </div>
+
     </div>
 
-    <!-- Bottom bar -->
+    <!-- Bottom -->
     <div id="bottom">
         <div class="bottom-brand">posimai<span>-station</span></div>
-
         <div class="bottom-links">
             <a class="bottom-link" href="/" target="_blank" rel="noopener">
                 <i data-lucide="terminal"></i> dev
@@ -462,82 +511,43 @@
                 <i data-lucide="layout-dashboard"></i> dashboard
             </a>
         </div>
-
         <div id="refresh-countdown">次の更新まで <span id="countdown">30</span>s</div>
     </div>
+
 </div>
 
 <script>
 'use strict';
 
-const HEALTH_URL = '/api/health';
+const HEALTH_URL  = '/api/health';
 const REFRESH_SEC = 30;
 
-// Services to monitor
 const SERVICES = [
-    {
+    { id: 'posimai-dev', name: 'posimai-dev',  desc: 'ブラウザターミナル + Claude Code', url: HEALTH_URL,                       isHealth: true  },
-        id: 'posimai-dev',
+    { id: 'posimai-api', name: 'Posimai API',  desc: 'Node.js / Express — VPS 本番',    url: 'https://api.soar-enrich.com',    isHealth: false },
-        name: 'posimai-dev',
+    { id: 'gitea',       name: 'Gitea',        desc: 'ローカル Git バックアップ',         url: 'http://100.76.7.3:3000',         isHealth: false },
-        desc: 'ブラウザターミナル + Claude Code',
+    { id: 'syncthing',   name: 'Syncthing',    desc: 'ファイル同期 GUI',                 url: 'http://100.77.11.43:8384',       isHealth: false },
-        url: HEALTH_URL,
+    { id: 'vercel',      name: 'Vercel',       desc: 'PWA ホスティング (27 本)',          url: 'https://vercel.com',             isHealth: false },
-        isHealth: true,
+    { id: 'github',      name: 'GitHub',       desc: 'ソースコード管理',                 url: 'https://github.com/posimai',     isHealth: false },
-    },
-    {
-        id: 'posimai-api',
-        name: 'Posimai API',
-        desc: 'Node.js / Express — VPS 本番',
-        url: 'https://api.soar-enrich.com',
-        isHealth: false,
-    },
-    {
-        id: 'gitea',
-        name: 'Gitea',
-        desc: 'ローカル Git バックアップ',
-        url: 'http://100.76.7.3:3000',
-        isHealth: false,
-    },
-    {
-        id: 'syncthing',
-        name: 'Syncthing',
-        desc: 'ファイル同期 GUI',
-        url: 'http://100.77.11.43:8384',
-        isHealth: false,
-    },
-    {
-        id: 'vercel',
-        name: 'Vercel',
-        desc: 'PWA ホスティング (27 本)',
-        url: 'https://vercel.com',
-        isHealth: false,
-    },
-    {
-        id: 'github',
-        name: 'GitHub',
-        desc: 'ソースコード管理',
-        url: 'https://github.com/posimai',
-        isHealth: false,
-    },
 ];
 
-// ── Clock ─────────────────────────────────────────────────────────
+// ── Clock ──────────────────────────────────────────────────────────
 function updateClock() {
     const now = new Date();
-    const hh = String(now.getHours()).padStart(2, '0');
+    const pad = n => String(n).padStart(2, '0');
-    const mm = String(now.getMinutes()).padStart(2, '0');
+    document.getElementById('clock').textContent =
-    const ss = String(now.getSeconds()).padStart(2, '0');
+        `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
-    document.getElementById('clock').textContent = `${hh}:${mm}:${ss}`;
 
-    const days = ['日', '月', '火', '水', '木', '金', '土'];
+    const days = ['日','月','火','水','木','金','土'];
     const y = now.getFullYear();
-    const mo = String(now.getMonth() + 1).padStart(2, '0');
+    const mo = pad(now.getMonth() + 1);
-    const d = String(now.getDate()).padStart(2, '0');
+    const d  = pad(now.getDate());
-    const dow = days[now.getDay()];
+    document.getElementById('date').textContent = `${y}.${mo}.${d} (${days[now.getDay()]})`;
-    document.getElementById('date').textContent = `${y}.${mo}.${d} (${dow})`;
 }
 setInterval(updateClock, 1000);
 updateClock();
 
-// ── Uptime formatter ──────────────────────────────────────────────
+// ── Uptime ────────────────────────────────────────────────────────
 function formatUptime(s) {
     const d = Math.floor(s / 86400);
     const h = Math.floor((s % 86400) / 3600);
@@ -547,42 +557,98 @@ function formatUptime(s) {
     return `${m}m`;
 }
 
-// ── System metrics ────────────────────────────────────────────────
+// ── Alert banner ──────────────────────────────────────────────────
+function setAlerts(alerts) {
+    const bar  = document.getElementById('alert-bar');
+    const msgs = document.getElementById('alert-messages');
+    if (alerts.length === 0) {
+        bar.className = '';
+        bar.classList.remove('visible');
+        return;
+    }
+    const hasCrit = alerts.some(a => a.level === 'crit');
+    bar.className = hasCrit ? 'crit visible' : 'warn visible';
+    msgs.textContent = alerts.map(a => a.msg).join('  /  ');
+    if (window.lucide) lucide.createIcons({ nodes: [bar] });
+}
+
+// ── Health fetch ──────────────────────────────────────────────────
 async function fetchHealth() {
     try {
         const res = await fetch(HEALTH_URL);
-        if (!res.ok) throw new Error('not ok');
+        if (!res.ok) throw new Error();
         const data = await res.json();
 
-        const cpuPct = data.cpu_pct || 0;
+        const cpuPct  = data.cpu_pct  || 0;
-        const memPct = data.mem_total_mb
+        const memPct  = data.mem_total_mb
             ? Math.round((data.mem_used_mb / data.mem_total_mb) * 100) : 0;
+        const diskPct = data.disk?.use_pct ?? null;
+        const cpuCount = data.cpu_count || 1;
+        const loadAvg  = data.load_avg  || [0, 0, 0];
 
+        // CPU
         document.getElementById('cpu-val').textContent = `${cpuPct}%`;
         const cpuBar = document.getElementById('cpu-bar');
         cpuBar.style.width = `${cpuPct}%`;
         cpuBar.className = 'bar-fill' + (cpuPct > 80 ? ' crit' : cpuPct > 60 ? ' warn' : '');
 
+        // Memory
         document.getElementById('mem-val').textContent =
             `${data.mem_used_mb} / ${data.mem_total_mb} MB (${memPct}%)`;
         const memBar = document.getElementById('mem-bar');
         memBar.style.width = `${memPct}%`;
         memBar.className = 'bar-fill' + (memPct > 85 ? ' crit' : memPct > 65 ? ' warn' : '');
 
-        document.getElementById('uptime-val').textContent = formatUptime(data.uptime_s || 0);
+        // Disk
+        if (diskPct !== null) {
+            document.getElementById('disk-val').textContent =
+                `${data.disk.used_gb} / ${data.disk.total_gb} GB (${diskPct}%)`;
+            const diskBar = document.getElementById('disk-bar');
+            diskBar.style.width = `${diskPct}%`;
+            diskBar.className = 'bar-fill' + (diskPct > 90 ? ' crit' : diskPct > 75 ? ' warn' : '');
+        }
+
+        // Load average — warn if > cpu count, crit if > cpu count * 1.5
+        document.getElementById('cpu-count-label').textContent = `(コア数: ${cpuCount})`;
+        ['load-1','load-5','load-15'].forEach((id, i) => {
+            const el  = document.getElementById(id);
+            const val = loadAvg[i] || 0;
+            el.textContent = val.toFixed(2);
+            el.className = 'load-chip-val'
+                + (val > cpuCount * 1.5 ? ' crit' : val > cpuCount ? ' warn' : '');
+        });
+
+        // Stats
+        document.getElementById('uptime-val').textContent   = formatUptime(data.uptime_s || 0);
         document.getElementById('sessions-val').textContent = String(data.active_sessions || 0);
-        document.getElementById('node-val').textContent = (data.node_version || '—').replace('v', '');
+        document.getElementById('node-val').textContent     = (data.node_version || '—').replace('v','');
         document.getElementById('platform-val').textContent = data.platform || '—';
-        document.getElementById('hostname').textContent = data.hostname || 'ubuntu-pc';
+        document.getElementById('hostname').textContent     = data.hostname  || 'ubuntu-pc';
+
+        // Alerts
+        const alerts = [];
+        if (cpuPct > 80)   alerts.push({ level:'crit', msg:`CPU ${cpuPct}% — 高負荷` });
+        else if (cpuPct > 60) alerts.push({ level:'warn', msg:`CPU ${cpuPct}%` });
+        if (memPct > 85)   alerts.push({ level:'crit', msg:`メモリ ${memPct}% — OOM に注意` });
+        else if (memPct > 65) alerts.push({ level:'warn', msg:`メモリ ${memPct}%` });
+        if (diskPct > 90)  alerts.push({ level:'crit', msg:`ディスク ${diskPct}% — 残りわずか` });
+        else if (diskPct > 75) alerts.push({ level:'warn', msg:`ディスク ${diskPct}%` });
+        if (loadAvg[0] > cpuCount * 1.5)
+            alerts.push({ level:'crit', msg:`Load ${loadAvg[0].toFixed(2)} — コア数超過` });
+        else if (loadAvg[0] > cpuCount)
+            alerts.push({ level:'warn', msg:`Load ${loadAvg[0].toFixed(2)}` });
+        setAlerts(alerts);
 
         // Status dot
-        const dot = document.getElementById('status-dot');
+        const hasCrit = alerts.some(a => a.level === 'crit');
-        dot.className = cpuPct > 80 || memPct > 85 ? 'crit'
+        const hasWarn = alerts.some(a => a.level === 'warn');
-                      : cpuPct > 60 || memPct > 65 ? 'warn' : 'ok';
+        document.getElementById('status-dot').className =
+            hasCrit ? 'crit' : hasWarn ? 'warn' : 'ok';
 
         return true;
     } catch (e) {
         document.getElementById('status-dot').className = 'off';
+        setAlerts([{ level:'crit', msg:'Ubuntu PC に接続できません' }]);
         return false;
     }
 }
@@ -607,30 +673,20 @@ function buildServiceCards() {
 }
 
 async function checkService(svc) {
-    const badge  = document.getElementById(`badge-${svc.id}`);
+    const badge = document.getElementById(`badge-${svc.id}`);
-    const latEl  = document.getElementById(`lat-${svc.id}`);
+    const latEl = document.getElementById(`lat-${svc.id}`);
     if (!badge) return;
-
-    if (svc.isHealth) {
-        // Already done via fetchHealth — mark as ok
-        badge.className = 'service-badge ok';
-        badge.textContent = 'OK';
-        latEl.textContent = '';
-        return;
-    }
-
     const t0 = Date.now();
     try {
-        const ctrl = new AbortController();
+        const ctrl  = new AbortController();
         const timer = setTimeout(() => ctrl.abort(), 7000);
-        const res = await fetch(svc.url, { method: 'HEAD', mode: 'no-cors', signal: ctrl.signal });
+        await fetch(svc.url, { method: 'HEAD', mode: 'no-cors', signal: ctrl.signal });
         clearTimeout(timer);
-        const ms = Date.now() - t0;
+        badge.className  = 'service-badge ok';
-        badge.className = 'service-badge ok';
         badge.textContent = 'OK';
-        latEl.textContent = `${ms}ms`;
+        latEl.textContent = `${Date.now() - t0}ms`;
     } catch (e) {
-        badge.className = 'service-badge crit';
+        badge.className  = 'service-badge crit';
         badge.textContent = 'DOWN';
         latEl.textContent = '';
     }
@@ -641,11 +697,11 @@ async function checkAllServices(devOk) {
         if (svc.isHealth) {
             const badge = document.getElementById(`badge-${svc.id}`);
             if (badge) {
-                badge.className = devOk ? 'service-badge ok' : 'service-badge crit';
+                badge.className  = devOk ? 'service-badge ok' : 'service-badge crit';
                 badge.textContent = devOk ? 'OK' : 'DOWN';
             }
         } else {
-            checkService(svc); // fire-and-forget (parallel)
+            checkService(svc);
         }
     }
 }
@@ -670,11 +726,9 @@ function startCountdown() {
 
 async function runRefresh() {
     const devOk = await fetchHealth();
-    await checkAllServices(devOk);
+    checkAllServices(devOk);
-
+    const now = new Date().toLocaleTimeString('ja-JP', { hour:'2-digit', minute:'2-digit', second:'2-digit' });
-    const now = new Date().toLocaleTimeString('ja-JP', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
     document.getElementById('last-checked').textContent = `最終更新: ${now}`;
-
     startCountdown();
 }