pyre-cli 10.1.0 → 10.3.0

package/src/monitors/types.ts

@@ -43,6 +43,14 @@ export interface GpuData {
    utilization: number;
    temperature?: number;
    processes: number;
+   powerDraw?: number;
+ }
+
+ export interface DisplayInfo {
+   name: string;
+   resolution: string;
+   connectionType?: string;
+   isMain?: boolean;
  }
 
  export interface PowerData {

package/src/serveCmd.ts

@@ -2,9 +2,11 @@
  * pyre serve — Dedicated REST API Mode.
  *
  * Exposes all metrics as structured JSON REST endpoints with optional
- * API key authorization and CORS support.
+ * API key authorization and CORS support. Also serves a live Chart.js
+ * dashboard at the root path (/).
  *
  * Endpoints:
+ *   GET /              → Live Chart.js web dashboard (auto-refresh every 2s)
  *   GET /api/all
  *   GET /api/cpu
  *   GET /api/memory
@@ -20,6 +22,7 @@
 import http from 'node:http';
 import os from 'node:os';
 import chalk from 'chalk';
+import { getWebDashboardHtml } from './web/dashboard.js';
 import {
   collectAll,
   collectCpu,
@@ -77,6 +80,15 @@ export async function runServeCommand(opts: ServeOptions = {}): Promise<void> {
       let data: any;
 
       switch (pathname) {
+        case '/':
+        case '/dashboard':
+        case '/web': {
+          const apiBase = `http://${req.headers.host || `localhost:${port}`}/api/all`;
+          const html = getWebDashboardHtml(apiBase, apiKey);
+          res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+          res.end(html);
+          return;
+        }
         case '/api/all':
         case '/api/stats':
         case '/api':
@@ -128,6 +140,8 @@ export async function runServeCommand(opts: ServeOptions = {}): Promise<void> {
           res.end(JSON.stringify({
             error: 'Not found',
             availableEndpoints: [
+              '/',
+              '/dashboard',
               '/api/all',
               '/api/cpu',
               '/api/memory',
@@ -164,8 +178,9 @@ export async function runServeCommand(opts: ServeOptions = {}): Promise<void> {
 
   await new Promise<void>((resolve) => server.listen(port, '0.0.0.0', resolve));
 
-  console.log(chalk.bold('\n  🔥 pyre serve — REST API Server\n'));
+  console.log(chalk.bold('\n  🔥 pyre serve — REST API + Web Dashboard\n'));
   console.log(`  ${chalk.green('✔')} API base URL: ${chalk.cyan(`http://0.0.0.0:${port}/api/all`)}`);
+  console.log(`  ${chalk.green('✔')} Dashboard:    ${chalk.cyan(`http://0.0.0.0:${port}/`)}`);
   console.log(`  ${chalk.green('✔')} Health check: ${chalk.cyan(`http://0.0.0.0:${port}/api/health`)}`);
   if (apiKey) {
     console.log(`  ${chalk.yellow('🔒')} API Key protection: ${chalk.bold('ENABLED')} (Pass via header x-api-key or ?key=)`);

package/src/service.ts

@@ -36,6 +36,55 @@ export function uninstallService(): void {
   }
 }
 
+export interface ServiceStatus {
+  installed: boolean;
+  platform: string;
+  serviceLabel: string;
+  path: string;
+  logPath: string;
+}
+
+export function isServiceInstalled(): boolean {
+  const platform = process.platform;
+  if (platform === 'darwin') {
+    return fs.existsSync(PLIST_PATH);
+  } else if (platform === 'linux') {
+    return fs.existsSync(SYSTEMD_UNIT_PATH);
+  } else if (platform === 'win32') {
+    try {
+      execSync(`schtasks /query /tn "${TASK_NAME}"`, { stdio: 'pipe' });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  return false;
+}
+
+export function getServiceStatus(): ServiceStatus {
+  const platform = process.platform;
+  const installed = isServiceInstalled();
+  let serviceLabel = SERVICE_LABEL;
+  let servicePath = PLIST_PATH;
+  const logPath = path.join(os.homedir(), '.config', 'pyre', 'web.log');
+
+  if (platform === 'linux') {
+    serviceLabel = 'pyre-web.service';
+    servicePath = SYSTEMD_UNIT_PATH;
+  } else if (platform === 'win32') {
+    serviceLabel = TASK_NAME;
+    servicePath = 'Windows Task Scheduler (onlogon)';
+  }
+
+  return {
+    installed,
+    platform,
+    serviceLabel,
+    path: servicePath,
+    logPath,
+  };
+}
+
 // Backward-compatible exports for existing callers
 export const installLaunchdAgent = installService;
 export const uninstallLaunchdAgent = uninstallService;

package/src/state/config.ts

@@ -14,6 +14,20 @@ import os from 'node:os';
 import path from 'node:path';
 
 
+export interface PyreBookmark {
+  name: string;
+  activePanel: string;
+  sortMode: string;
+  processFilter: string;
+  treeView: boolean;
+  showGraphs: boolean;
+  graphMode: string;
+  trackedPid: number | null;
+  currentTheme: string;
+  panelLayout: string[];
+  detailed: boolean;
+}
+
 export interface PyreConfig {
   theme?: string;
   interval?: number;
@@ -56,6 +70,10 @@ export interface PyreConfig {
   /** Optional API key for external cloud providers */
   aiApiKey?: string;
   dockerModeConfirmed?: boolean;
+  /** Use Firebase Firestore as the sync backend instead of a local folder */
+  firebaseSyncEnabled?: boolean;
+  /** Unique host identifier used as the Firestore document ID (defaults to os.hostname()) */
+  firebaseHostId?: string;
   visiblePanels?: {
     cpu?: boolean;
     mem?: boolean;
@@ -73,6 +91,19 @@ export interface PyreConfig {
     tree?: boolean;
   };
   panelLayout?: string[];
+  /** Saved session bookmarks */
+  bookmarks?: PyreBookmark[];
+  /** Graph zoom level (1-5, higher = more history points visible) */
+  graphZoomLevel?: number;
+  /** Web UI preferences */
+  compact?: boolean;
+  alwaysOnTop?: boolean;
+  exposeLan?: boolean;
+  port?: number;
+  historyDuration?: number;
+  tableDensity?: string;
+  defaultFilter?: string;
+  defaultSort?: string;
 }
 
 export const DEFAULT_CONFIG: Required<PyreConfig> = {
@@ -109,6 +140,8 @@ export const DEFAULT_CONFIG: Required<PyreConfig> = {
   aiModel: 'expert-rules-v1',
   aiApiKey: '',
   dockerModeConfirmed: false,
+  firebaseSyncEnabled: false,
+  firebaseHostId: '',
   visiblePanels: {
     cpu: true,
     mem: true,
@@ -126,6 +159,16 @@ export const DEFAULT_CONFIG: Required<PyreConfig> = {
     tree: false,
   },
   panelLayout: ['mem', 'disk', 'net'],
+  bookmarks: [],
+  graphZoomLevel: 1,
+  compact: false,
+  alwaysOnTop: false,
+  exposeLan: false,
+  port: 3000,
+  historyDuration: 60,
+  tableDensity: 'standard',
+  defaultFilter: 'all',
+  defaultSort: 'cpu',
 };
 
 export function getConfigDir(): string {
@@ -220,3 +263,8 @@ export function getConfigPath(): string {
   return getConfigFile();
 }
 
+export function resetConfig(): Required<PyreConfig> {
+  writeConfig(DEFAULT_CONFIG);
+  return { ...DEFAULT_CONFIG };
+}
+

package/src/syncCmd.ts

@@ -3,19 +3,27 @@
  *
  * Synchronizes configuration profiles (~/.config/pyre/profiles/),
  * alert rules, thresholds, and anomaly history across multiple Macs
- * via iCloud Drive or any user-defined sync folder.
+ * via iCloud Drive / any user-defined sync folder, OR via Firebase Firestore.
  *
  * Commands:
  *   pyre sync status
  *   pyre sync push
- *   pyre sync pull
+ *   pyre sync pull [hostname]
+ *   pyre sync firebase <enable|disable|status>
  */
 import fs from 'node:fs';
 import path from 'node:path';
 import os from 'node:os';
 import crypto from 'node:crypto';
 import chalk from 'chalk';
-import { getConfigDir, getConfigFile, getProfilesDir, readConfig, writeConfig } from './state/config.js';
+import {
+  getConfigDir,
+  getConfigFile,
+  getProfilesDir,
+  readConfig,
+  writeConfig,
+  PyreConfig,
+} from './state/config.js';
 
 export interface SyncOptions {
   syncDir?: string;
@@ -58,7 +66,147 @@ function computeDirChecksum(dirPath: string): string {
   return hash.digest('hex').slice(0, 16);
 }
 
+// ─── Load profiles from disk ──────────────────────────────────────────────────
+
+function loadLocalProfiles(): Record<string, PyreConfig> {
+  const profilesDir = getProfilesDir();
+  const profiles: Record<string, PyreConfig> = {};
+  if (!fs.existsSync(profilesDir)) return profiles;
+  for (const f of fs.readdirSync(profilesDir).filter((f) => f.endsWith('.json'))) {
+    try {
+      const name = f.replace(/\.json$/, '');
+      profiles[name] = JSON.parse(fs.readFileSync(path.join(profilesDir, f), 'utf-8'));
+    } catch { /* skip corrupted profiles */ }
+  }
+  return profiles;
+}
+
+function saveLocalProfiles(profiles: Record<string, PyreConfig>): void {
+  const profilesDir = getProfilesDir();
+  if (!fs.existsSync(profilesDir)) fs.mkdirSync(profilesDir, { recursive: true });
+  for (const [name, cfg] of Object.entries(profiles)) {
+    fs.writeFileSync(path.join(profilesDir, `${name}.json`), JSON.stringify(cfg, null, 2) + '\n');
+  }
+}
+
+// ─── Firebase subcommand ──────────────────────────────────────────────────────
+
+async function runFirebaseSubcommand(action: string): Promise<void> {
+  const config = readConfig();
+
+  if (action === 'enable') {
+    writeConfig({ firebaseSyncEnabled: true });
+    console.log(chalk.green('  ✔ Firebase sync enabled.'));
+    console.log(chalk.dim('  Run "pyre sync push" to upload your config and profiles to Firestore.\n'));
+    return;
+  }
+
+  if (action === 'disable') {
+    writeConfig({ firebaseSyncEnabled: false });
+    console.log(chalk.yellow('  ✔ Firebase sync disabled. Falling back to local folder sync.\n'));
+    return;
+  }
+
+  if (action === 'status' || !action) {
+    console.log(chalk.bold(`  Firebase Sync: ${config.firebaseSyncEnabled ? chalk.green('ENABLED') : chalk.dim('DISABLED')}`));
+    if (!config.firebaseSyncEnabled) {
+      console.log(chalk.dim('  Run "pyre sync firebase enable" to activate.\n'));
+      return;
+    }
+    const { firebaseStatus } = await import('./firebaseSync.js');
+    const hosts = await firebaseStatus();
+    if (hosts.length === 0) {
+      console.log(chalk.dim('  No remote hosts found in Firestore. Run "pyre sync push" to upload.\n'));
+      return;
+    }
+    console.log();
+    for (const h of hosts) {
+      console.log(`  ${chalk.bold(h.sourceHost)} (${chalk.cyan(h.hostId)})`);
+      console.log(`    Last Updated:  ${chalk.green(h.lastUpdated)}`);
+      console.log(`    Profiles:      ${chalk.bold(String(h.profilesCount))}`);
+      console.log(`    Checksum:      ${chalk.dim(h.checksum)}\n`);
+    }
+    return;
+  }
+
+  console.log(chalk.yellow(`  Unknown firebase action: "${action}". Available: enable, disable, status\n`));
+}
+
+// ─── Main export ──────────────────────────────────────────────────────────────
+
 export async function runSyncCommand(subcommand: string = 'status', opts: SyncOptions = {}): Promise<void> {
+  const config = readConfig();
+
+  console.log(chalk.bold('\n  🔥 pyre sync — Configuration & Profile Cloud Sync\n'));
+
+  // ── Firebase subcommand ────────────────────────────────────────────────────
+  if (subcommand === 'firebase') {
+    const action = process.argv[process.argv.indexOf('firebase') + 1] || 'status';
+    await runFirebaseSubcommand(action);
+    return;
+  }
+
+  // ── Firebase backend ───────────────────────────────────────────────────────
+  if (config.firebaseSyncEnabled) {
+    console.log(`  Backend: ${chalk.cyan('Firebase Firestore')} (${chalk.dim('dearborn-internal-tool')})`);
+    const hostId = config.firebaseHostId || undefined;
+
+    if (subcommand === 'status') {
+      const { firebaseStatus } = await import('./firebaseSync.js');
+      const hosts = await firebaseStatus();
+      if (hosts.length === 0) {
+        console.log(chalk.dim('  No remote hosts found. Run "pyre sync push" to upload your config.\n'));
+        return;
+      }
+      console.log();
+      for (const h of hosts) {
+        console.log(`  ${chalk.bold(h.sourceHost)} (${chalk.cyan(h.hostId)})`);
+        console.log(`    Last Updated:  ${chalk.green(h.lastUpdated)}`);
+        console.log(`    Profiles:      ${chalk.bold(String(h.profilesCount))}`);
+        console.log(`    Checksum:      ${chalk.dim(h.checksum)}\n`);
+      }
+      return;
+    }
+
+    if (subcommand === 'push') {
+      const { firebasePush } = await import('./firebaseSync.js');
+      const profiles = loadLocalProfiles();
+      const result = await firebasePush(config, profiles, hostId);
+      const profileCount = Object.keys(profiles).length;
+      console.log(chalk.green(`  ✔ Successfully pushed config and ${profileCount} profile(s) to Firestore.`));
+      console.log(`  Host ID:   ${chalk.cyan(result.hostId)}`);
+      console.log(`  Checksum:  ${chalk.dim(result.checksum)}  |  Timestamp: ${chalk.dim(result.lastUpdated)}\n`);
+      return;
+    }
+
+    if (subcommand === 'pull') {
+      // Optional: pyre sync pull <hostname>
+      const targetHost = process.argv[process.argv.indexOf('pull') + 1];
+      const resolvedTarget = (targetHost && !targetHost.startsWith('-')) ? targetHost : undefined;
+
+      const { firebasePull } = await import('./firebaseSync.js');
+      const result = await firebasePull(resolvedTarget);
+
+      if (!result) {
+        const hint = resolvedTarget ? `host "${resolvedTarget}"` : 'any host';
+        console.error(chalk.red(`  ✖ No sync data found for ${hint} in Firestore. Run "pyre sync push" from another machine.\n`));
+        process.exit(1);
+      }
+
+      writeConfig(result.doc.config);
+      saveLocalProfiles(result.doc.profiles);
+
+      const pulledCount = result.doc.profilesCount;
+      console.log(chalk.green(`  ✔ Successfully pulled config and ${pulledCount} profile(s) from ${chalk.bold(result.doc.sourceHost)}.`));
+      console.log(chalk.dim(`  Applied to ${getConfigFile()}\n`));
+      return;
+    }
+
+    console.log(chalk.yellow(`  Unknown subcommand: "${subcommand}". Available: status, push, pull, firebase\n`));
+    return;
+  }
+
+  // ── Folder-based backend (original behaviour) ──────────────────────────────
   const syncDir = opts.syncDir || getDefaultSyncDir();
   const manifestPath = path.join(syncDir, 'sync-manifest.json');
   const remoteProfilesDir = path.join(syncDir, 'profiles');
@@ -67,22 +215,22 @@ export async function runSyncCommand(subcommand: string = 'status', opts: SyncOp
   const localProfilesDir = getProfilesDir();
   const localConfigFile = getConfigFile();
 
-  console.log(chalk.bold('\n  🔥 pyre sync — Configuration & Profile Cloud Sync\n'));
-  console.log(`  Sync Target Directory: ${chalk.cyan(syncDir)}`);
+  console.log(`  Backend:             ${chalk.cyan('Local Folder')}`);
+  console.log(`  Sync Target:         ${chalk.cyan(syncDir)}`);
 
   if (subcommand === 'status' || !subcommand) {
     const hasSyncDir = fs.existsSync(syncDir);
     const hasManifest = fs.existsSync(manifestPath);
 
-    console.log(`  Local Profiles:        ${chalk.bold(String(fs.existsSync(localProfilesDir) ? fs.readdirSync(localProfilesDir).filter(f => f.endsWith('.json')).length : 0))}`);
-    console.log(`  Sync Target Available: ${hasSyncDir ? chalk.green('YES') : chalk.yellow('NO (will be created on push)')}`);
+    console.log(`  Local Profiles:      ${chalk.bold(String(fs.existsSync(localProfilesDir) ? fs.readdirSync(localProfilesDir).filter(f => f.endsWith('.json')).length : 0))}`);
+    console.log(`  Sync Target Exists:  ${hasSyncDir ? chalk.green('YES') : chalk.yellow('NO (will be created on push)')}`);
 
     if (hasManifest) {
       try {
         const manifest: SyncManifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
-        console.log(`  Remote Last Updated:   ${chalk.green(manifest.lastUpdated)} (from ${chalk.bold(manifest.sourceHost)})`);
-        console.log(`  Remote Profiles Count: ${chalk.bold(String(manifest.profilesCount))}`);
-        console.log(`  Remote Checksum:       ${chalk.dim(manifest.checksum)}`);
+        console.log(`  Remote Last Updated: ${chalk.green(manifest.lastUpdated)} (from ${chalk.bold(manifest.sourceHost)})`);
+        console.log(`  Remote Profiles:     ${chalk.bold(String(manifest.profilesCount))}`);
+        console.log(`  Remote Checksum:     ${chalk.dim(manifest.checksum)}`);
       } catch {
         console.log(chalk.yellow('  Remote manifest corrupted.'));
       }
@@ -162,5 +310,5 @@ export async function runSyncCommand(subcommand: string = 'status', opts: SyncOp
     return;
   }
 
-  console.log(chalk.yellow(`  Unknown subcommand: "${subcommand}". Available: status, push, pull\n`));
+  console.log(chalk.yellow(`  Unknown subcommand: "${subcommand}". Available: status, push, pull, firebase\n`));
 }

package/src/web/dashboard.ts

@@ -0,0 +1,205 @@
+/**
+ * pyre web dashboard module.
+ *
+ * Provides a proper auto-refreshing web dashboard with
+ * live Chart.js graphs served over HTTP. Powers `pyre web`.
+ *
+ * The dashboard polls the pyre REST API every 2 seconds
+ * and renders live sparkline-style charts for:
+ *   - CPU usage %
+ *   - Memory usage %
+ *   - Temperature °C
+ *   - Network RX/TX rate
+ *   - Power draw (watts)
+ */
+
+export interface WebDashboardOptions {
+  port: number;
+  apiUrl: string;
+  apiKey?: string;
+}
+
+const DASHBOARD_HTML = (apiUrl: string, apiKey?: string): string => {
+  const authHeader = apiKey ? `"x-api-key": "${apiKey}",\n      ` : '';
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+<title>Pyre — Live Dashboard</title>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
+<style>
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#0a0a0f;--surface:#141418;--border:rgba(255,255,255,.08);
+  --text:#f5f5f7;--muted:#a1a1a6;--accent:#ff5500;
+  --cpu:#00d4ff;--mem:#ff9f0a;--gpu:#af52de;--thm:#ff453a;
+  --net:#34c759;--pwr:#ffcc02;--bat:#64d2ff;
+  --ok:#34c759;--warn:#ff9f0a;--crit:#ff453a;
+}
+html,body{height:100%;background:var(--bg);color:var(--text);
+  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
+  -webkit-font-smoothing:antialiased;overflow-x:hidden}
+header{position:sticky;top:0;z-index:10;height:48px;background:rgba(10,10,15,.9);
+  backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--border);
+  display:flex;align-items:center;padding:0 20px;gap:16px}
+.logo{font-weight:700;font-size:15px;color:var(--accent);letter-spacing:-.01em}
+.hostname{font-size:13px;color:var(--muted)}
+.status{margin-left:auto;display:flex;gap:12px;align-items:center}
+.badge{padding:3px 10px;border-radius:980px;font-size:11px;font-weight:600;font-family:ui-monospace,monospace}
+.badge-live{background:rgba(52,199,89,.15);color:var(--ok);border:1px solid rgba(52,199,89,.3)}
+.badge-err{background:rgba(255,69,58,.15);color:var(--crit);border:1px solid rgba(255,69,58,.3)}
+.refresh{font-size:11px;color:var(--muted);font-family:ui-monospace,monospace}
+main{padding:20px;display:grid;gap:16px;
+  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
+  max-width:1600px;margin:0 auto}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;
+  padding:16px 18px;display:flex;flex-direction:column;min-height:200px}
+.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
+.card-title{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:-.01em;text-transform:uppercase}
+.card-value{font-size:24px;font-weight:700;font-family:ui-monospace,monospace;letter-spacing:-.02em}
+.card-sub{font-size:11px;color:var(--muted);margin-top:2px;font-family:ui-monospace,monospace}
+.chart-wrap{flex:1;position:relative;min-height:80px;margin-top:8px}
+canvas{width:100%!important;height:100%!important}
+.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
+.stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
+.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:600;letter-spacing:-.01em}
+.stat-val{font-size:20px;font-weight:700;font-family:ui-monospace,monospace;margin-top:2px}
+.footer{text-align:center;padding:16px;font-size:11px;color:var(--muted)}
+@media(max-width:768px){main{grid-template-columns:1fr}.summary{grid-template-columns:repeat(2,1fr)}}
+</style>
+</head>
+<body>
+<header>
+  <div class="logo">🔥 Pyre</div>
+  <div class="hostname" id="hostname">loading…</div>
+  <div class="status">
+    <div class="refresh" id="refresh">refreshing 2s</div>
+    <div class="badge badge-live" id="liveBadge">● LIVE</div>
+  </div>
+</header>
+<main>
+  <div class="summary" id="summary"></div>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title" style="color:var(--cpu)">CPU Usage %</div>
+      <div class="card-value" id="cpuVal" style="color:var(--cpu)">--</div>
+    </div>
+    <div class="chart-wrap"><canvas id="cpuChart"></canvas></div>
+  </div>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title" style="color:var(--mem)">Memory Usage %</div>
+      <div class="card-value" id="memVal" style="color:var(--mem)">--</div>
+    </div>
+    <div class="chart-wrap"><canvas id="memChart"></canvas></div>
+  </div>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title" style="color:var(--thm)">Temperature °C</div>
+      <div class="card-value" id="tempVal" style="color:var(--thm)">--</div>
+    </div>
+    <div class="chart-wrap"><canvas id="tempChart"></canvas></div>
+  </div>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title" style="color:var(--net)">Network RX/TX MB/s</div>
+      <div class="card-value" id="netVal" style="color:var(--net)">--</div>
+    </div>
+    <div class="chart-wrap"><canvas id="netChart"></canvas></div>
+  </div>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title" style="color:var(--pwr)">Power Draw (W)</div>
+      <div class="card-value" id="pwrVal" style="color:var(--pwr)">--</div>
+    </div>
+    <div class="chart-wrap"><canvas id="pwrChart"></canvas></div>
+  </div>
+</main>
+<div class="footer">Pyre live dashboard · auto-refresh every 2s · <span id="lastUpdate">--</span></div>
+<script>
+const MAX_POINTS=60;
+const history={cpu:[],mem:[],temp:[],netRx:[],netTx:[],pwr:[],labels:[]};
+const chartOpts=(color,label,unit='')=>({
+  type:'line',data:{labels:history.labels,datasets:[{
+    label:label,data:[],borderColor:color,backgroundColor:color+'22',
+    borderWidth:2,pointRadius:0,tension:.4,fill:true
+  }]},
+  options:{responsive:true,maintainAspectRatio:false,animation:false,
+    scales:{x:{display:false},y:{beginAtZero:true,grid:{color:'rgba(255,255,255,.05)'},
+      ticks:{color:'#a1a1a6',font:{size:10},callback:v=>v+unit}}},
+    plugins:{legend:{display:false}},
+    interaction:{intersect:false,mode:'index'}}
+});
+const charts={
+  cpu:new Chart(document.getElementById('cpuChart'),chartOpts('#00d4ff','CPU %','%')),
+  mem:new Chart(document.getElementById('memChart'),chartOpts('#ff9f0a','Memory %','%')),
+  temp:new Chart(document.getElementById('tempChart'),chartOpts('#ff453a','Temp','°C')),
+  net:new Chart(document.getElementById('netChart'),chartOpts('#34c759','Net','MB/s')),
+  pwr:new Chart(document.getElementById('pwrChart'),chartOpts('#ffcc02','Power','W')),
+};
+function fmtTime(d){return d.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit',second:'2-digit'})}
+function fmtBytes(b){if(!b)return'0';if(b<1024)return b+'B';if(b<1048576)return(b/1024).toFixed(1)+'KB';return(b/1048576).toFixed(1)+'MB'}
+const AUTH_HEADERS = { ${authHeader} };
+async function fetchData(){
+  try{
+    const r=await fetch('${apiUrl}',{headers:AUTH_HEADERS});
+    if(!r.ok)throw new Error(r.status);
+    const d=await r.json();
+    document.getElementById('hostname').textContent=d.header?.hostname||'pyre';
+    document.getElementById('lastUpdate').textContent='updated '+fmtTime(new Date());
+    const cpu=d.cpu?.usage??0,mem=d.memory?.usagePercent??0;
+    const temp=d.cpu?.temperature??d.thermal?.temperatures?.cpu_die??null;
+    const rxRate=d.network?.rxRate??(d.network?.rxBytes?0:0);
+    const txRate=d.network?.txRate??(d.network?.txBytes?0:0);
+    const pwr=d.power?.combinedWatts??d.power?.cpuWatts??0;
+    const now=fmtTime(new Date());
+    history.labels.push(now);
+    history.cpu.push(cpu);history.mem.push(mem);
+    history.temp.push(temp);history.netRx.push(rxRate/1048576);history.netTx.push(txRate/1048576);
+    history.pwr.push(pwr);
+    if(history.labels.length>MAX_POINTS){
+      history.labels.shift();history.cpu.shift();history.mem.shift();
+      history.temp.shift();history.netRx.shift();history.netTx.shift();history.pwr.shift();
+    }
+    function updChart(chart,data,color){
+      chart.data.labels=history.labels;
+      chart.data.datasets[0].data=data;
+      chart.update('none');
+    }
+    updChart(charts.cpu,history.cpu,'#00d4ff');
+    updChart(charts.mem,history.mem,'#ff9f0a');
+    const tempData=history.temp.map(v=>v===null?null:v);
+    updChart(charts.temp,tempData,'#ff453a');
+    const netData=history.netRx.map((r,i)=>r+history.netTx[i]);
+    updChart(charts.net,netData,'#34c759');
+    updChart(charts.pwr,history.pwr,'#ffcc02');
+    document.getElementById('cpuVal').textContent=cpu.toFixed(1)+'%';
+    document.getElementById('memVal').textContent=mem.toFixed(1)+'%';
+    document.getElementById('tempVal').textContent=temp!==null?temp.toFixed(1)+'°C':'--';
+    document.getElementById('netVal').textContent=fmtBytes(rxRate+txRate)+'/s';
+    document.getElementById('pwrVal').textContent=pwr.toFixed(1)+'W';
+    const summary=document.getElementById('summary');
+    summary.innerHTML=
+      '<div class="stat"><div class="stat-label">CPU</div><div class="stat-val" style="color:var(--cpu)">'+cpu.toFixed(1)+'%</div></div>'+
+      '<div class="stat"><div class="stat-label">Memory</div><div class="stat-val" style="color:var(--mem)">'+mem.toFixed(1)+'%</div></div>'+
+      '<div class="stat"><div class="stat-label">Temp</div><div class="stat-val" style="color:var(--thm)">'+(temp!==null?temp.toFixed(1)+'°C':'--')+'</div></div>'+
+      '<div class="stat"><div class="stat-label">Network</div><div class="stat-val" style="color:var(--net)">'+fmtBytes(d.network?.rxBytes??0)+' ↓</div></div>'+
+      '<div class="stat"><div class="stat-label">Power</div><div class="stat-val" style="color:var(--pwr)">'+(pwr>0?pwr.toFixed(1)+'W':'--')+'</div></div>';
+    const badge=document.getElementById('liveBadge');
+    badge.className='badge badge-live';badge.textContent='● LIVE';
+  }catch(e){
+    const badge=document.getElementById('liveBadge');
+    badge.className='badge badge-err';badge.textContent='⚠ ERR';
+    console.error('pyre dashboard fetch error:',e);
+  }
+}
+fetchData();setInterval(fetchData,2000);
+</script>
+</body>
+</html>`;
+};
+
+export function getWebDashboardHtml(apiUrl = 'http://localhost:8080/api/all', apiKey?: string): string {
+  return DASHBOARD_HTML(apiUrl, apiKey);
+}