infernoflow 0.13.0 → 0.16.0

package/dist/lib/commands/dashboard.mjs

@@ -0,0 +1,399 @@
+/**
+ * infernoflow dashboard
+ *
+ * Launches a local web server on http://localhost:7337 showing:
+ *   - Contract health status
+ *   - Capability list with add/remove/change history
+ *   - Drift timeline (last N sessions)
+ *   - Agent activity log
+ *   - Auto-refresh via SSE (server-sent events)
+ *
+ * Usage:
+ *   infernoflow dashboard              # open on port 7337
+ *   infernoflow dashboard --port 8080  # custom port
+ *   infernoflow dashboard --no-open    # don't auto-open browser
+ */
+
+import * as fs      from "node:fs";
+import * as path    from "node:path";
+import * as http    from "node:http";
+import * as os      from "node:os";
+import { execSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { header, ok, info, warn, bold, cyan, gray } from "../ui/output.mjs";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// ── data loaders ──────────────────────────────────────────────────────────────
+
+function loadContract(infernoDir) {
+  const contractPath = path.join(infernoDir, "contract.json");
+  if (!fs.existsSync(contractPath)) return null;
+  try { return JSON.parse(fs.readFileSync(contractPath, "utf8")); } catch { return null; }
+}
+
+function loadCapabilities(infernoDir) {
+  for (const name of ["capabilities.json", "contract.json"]) {
+    const p = path.join(infernoDir, name);
+    if (!fs.existsSync(p)) continue;
+    try {
+      const obj = JSON.parse(fs.readFileSync(p, "utf8"));
+      const raw = obj.capabilities || [];
+      return raw.map(c => typeof c === "string" ? { id: c, title: c } : c);
+    } catch {}
+  }
+  return [];
+}
+
+function loadProfile(infernoDir) {
+  const p = path.join(infernoDir, "developer-profile.json");
+  if (!fs.existsSync(p)) return null;
+  try { return JSON.parse(fs.readFileSync(p, "utf8")); } catch { return null; }
+}
+
+function loadAgents(infernoDir) {
+  const agentsDir = path.join(infernoDir, "agents");
+  if (!fs.existsSync(agentsDir)) return [];
+  return fs.readdirSync(agentsDir)
+    .filter(f => f.endsWith(".json"))
+    .map(f => { try { return JSON.parse(fs.readFileSync(path.join(agentsDir, f), "utf8")); } catch { return null; } })
+    .filter(Boolean);
+}
+
+function loadHookLog(infernoDir) {
+  const logPath = path.join(infernoDir, "HOOK.log");
+  if (!fs.existsSync(logPath)) return null;
+  try { return JSON.parse(fs.readFileSync(logPath, "utf8")); } catch { return null; }
+}
+
+function runCheck(infernoDir) {
+  try {
+    const out = execSync("npx infernoflow check --json", {
+      cwd: path.dirname(infernoDir),
+      encoding: "utf8",
+      timeout: 15_000,
+      stdio: ["ignore", "pipe", "pipe"],
+    });
+    return JSON.parse(out);
+  } catch (err) {
+    try { return JSON.parse(err.stdout || "{}"); } catch { return { status: "error", error: "check failed" }; }
+  }
+}
+
+function gatherData(infernoDir) {
+  const caps     = loadCapabilities(infernoDir);
+  const contract = loadContract(infernoDir);
+  const profile  = loadProfile(infernoDir);
+  const agents   = loadAgents(infernoDir);
+  const hookLog  = loadHookLog(infernoDir);
+  const check    = runCheck(infernoDir);
+  const sessions = profile?.recentSessions?.slice(-10) || [];
+  const candidates = [
+    ...(profile?.agentCandidates || []),
+    ...(profile?.skillCandidates || []),
+  ];
+
+  return { caps, contract, agents, hookLog, check, sessions, candidates, infernoDir };
+}
+
+// ── HTML builder ──────────────────────────────────────────────────────────────
+
+function buildHtml(data, projectName) {
+  const { caps, agents, check, sessions, candidates } = data;
+
+  const statusColor = check?.status === "ok"      ? "#22c55e"
+                    : check?.status === "warning"  ? "#f59e0b"
+                    : check?.status === "error"    ? "#ef4444"
+                    : "#6b7280";
+
+  const statusLabel = check?.status || "unknown";
+  const capCount    = caps.length;
+  const agentCount  = agents.length;
+  const issueCount  = (check?.issues || []).length;
+
+  // Capability rows
+  const capRows = caps.map(c => {
+    const statusBadge = c.status ? `<span class="badge">${c.status}</span>` : "";
+    return `<tr>
+      <td><code>${esc(c.id)}</code></td>
+      <td>${esc(c.title || "")}${statusBadge}</td>
+      <td>${esc(c.since || "")}</td>
+    </tr>`;
+  }).join("\n");
+
+  // Agent rows
+  const agentRows = agents.map(a => {
+    const steps = (a.steps || []).map(s => typeof s === "string" ? s : s.command).join(" → ");
+    const conf  = a.confidence ? `${Math.round(a.confidence * 100)}%` : "—";
+    return `<tr>
+      <td><strong>${esc(a.name)}</strong></td>
+      <td>${esc(a.description || steps)}</td>
+      <td><code>${esc(steps)}</code></td>
+      <td>${conf}</td>
+    </tr>`;
+  }).join("\n");
+
+  // Issues
+  const issueItems = (check?.issues || []).map(i =>
+    `<li class="issue">${esc(typeof i === "string" ? i : i.message || JSON.stringify(i))}</li>`
+  ).join("\n");
+
+  // Session timeline
+  const sessionItems = sessions.slice().reverse().map(s => {
+    const cmds = (s.commands || []).join(", ");
+    const date = s.startedAt ? new Date(s.startedAt).toLocaleString() : "unknown";
+    return `<div class="session-item">
+      <span class="session-date">${esc(date)}</span>
+      <span class="session-cmds">${esc(cmds || "no commands recorded")}</span>
+    </div>`;
+  }).join("\n");
+
+  // Candidate suggestions
+  const candidateItems = candidates.map(c =>
+    `<li class="candidate">${esc(c.name || c.id || "unnamed")}: ${esc(c.description || "")}</li>`
+  ).join("\n");
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>infernoflow — ${esc(projectName)}</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  :root {
+    --bg: #0f1117; --surface: #1a1d27; --border: #2d3148;
+    --text: #e2e8f0; --muted: #64748b; --accent: #f97316;
+    --green: #22c55e; --yellow: #f59e0b; --red: #ef4444; --blue: #3b82f6;
+  }
+  body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; font-size: 14px; line-height: 1.5; }
+  header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 24px; display: flex; align-items: center; gap: 12px; }
+  header h1 { font-size: 18px; font-weight: 700; }
+  header .flame { font-size: 22px; }
+  header .project { color: var(--muted); font-size: 13px; }
+  header .live { margin-left: auto; font-size: 11px; color: var(--green); display: flex; align-items: center; gap: 4px; }
+  header .live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
+  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+  main { max-width: 1100px; margin: 0 auto; padding: 24px; display: grid; gap: 20px; }
+  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
+  .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
+  .card .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; }
+  .card .value { font-size: 28px; font-weight: 700; }
+  .card .sub   { font-size: 12px; color: var(--muted); margin-top: 4px; }
+  .status-ok      { color: var(--green); }
+  .status-warning { color: var(--yellow); }
+  .status-error   { color: var(--red); }
+  section { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
+  section h2 { font-size: 13px; font-weight: 600; padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
+  table { width: 100%; border-collapse: collapse; }
+  th, td { padding: 10px 18px; text-align: left; border-bottom: 1px solid var(--border); }
+  th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: rgba(255,255,255,0.02); }
+  tr:last-child td { border-bottom: none; }
+  tr:hover td { background: rgba(255,255,255,0.03); }
+  code { font-family: monospace; font-size: 12px; background: rgba(255,255,255,0.07); padding: 1px 5px; border-radius: 4px; }
+  .badge { font-size: 10px; background: rgba(249,115,22,0.15); color: var(--accent); padding: 1px 6px; border-radius: 9px; margin-left: 6px; }
+  .issues-list, .candidates-list { list-style: none; padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }
+  .issue { color: var(--red); font-size: 13px; }
+  .candidate { color: var(--yellow); font-size: 13px; }
+  .empty { padding: 24px 18px; color: var(--muted); text-align: center; font-size: 13px; }
+  .session-item { display: flex; gap: 16px; align-items: baseline; padding: 9px 18px; border-bottom: 1px solid var(--border); }
+  .session-item:last-child { border-bottom: none; }
+  .session-date { font-size: 11px; color: var(--muted); white-space: nowrap; min-width: 140px; }
+  .session-cmds { font-size: 12px; color: var(--text); }
+  footer { text-align: center; color: var(--muted); font-size: 11px; padding: 24px; }
+</style>
+</head>
+<body>
+<header>
+  <span class="flame">🔥</span>
+  <div>
+    <h1>infernoflow</h1>
+    <div class="project">${esc(projectName)}</div>
+  </div>
+  <div class="live">Live</div>
+</header>
+<main>
+
+  <!-- Stat cards -->
+  <div class="cards">
+    <div class="card">
+      <div class="label">Contract status</div>
+      <div class="value status-${statusLabel}" style="color:${statusColor}">${statusLabel.toUpperCase()}</div>
+      <div class="sub">${issueCount > 0 ? issueCount + " issue" + (issueCount !== 1 ? "s" : "") : "All checks passed"}</div>
+    </div>
+    <div class="card">
+      <div class="label">Capabilities</div>
+      <div class="value">${capCount}</div>
+      <div class="sub">tracked in contract</div>
+    </div>
+    <div class="card">
+      <div class="label">Agents</div>
+      <div class="value">${agentCount}</div>
+      <div class="sub">synthesized workflows</div>
+    </div>
+    <div class="card">
+      <div class="label">Sessions</div>
+      <div class="value">${sessions.length}</div>
+      <div class="sub">recent sessions logged</div>
+    </div>
+  </div>
+
+  ${issueCount > 0 ? `
+  <!-- Issues -->
+  <section>
+    <h2>⚠ Issues</h2>
+    <ul class="issues-list">${issueItems}</ul>
+  </section>` : ""}
+
+  <!-- Capabilities -->
+  <section>
+    <h2>Capabilities (${capCount})</h2>
+    ${capCount > 0 ? `
+    <table>
+      <thead><tr><th>ID</th><th>Title</th><th>Since</th></tr></thead>
+      <tbody>${capRows}</tbody>
+    </table>` : `<div class="empty">No capabilities found in inferno/capabilities.json</div>`}
+  </section>
+
+  <!-- Agents -->
+  <section>
+    <h2>Synthesized Agents (${agentCount})</h2>
+    ${agentCount > 0 ? `
+    <table>
+      <thead><tr><th>Name</th><th>Description</th><th>Steps</th><th>Confidence</th></tr></thead>
+      <tbody>${agentRows}</tbody>
+    </table>` : `<div class="empty">No agents yet — run <code>infernoflow synthesize</code> to generate them</div>`}
+  </section>
+
+  ${candidates.length > 0 ? `
+  <!-- Candidates -->
+  <section>
+    <h2>Workflow Candidates (${candidates.length})</h2>
+    <ul class="candidates-list">${candidateItems}</ul>
+  </section>` : ""}
+
+  <!-- Session timeline -->
+  <section>
+    <h2>Recent Sessions</h2>
+    ${sessions.length > 0 ? `<div>${sessionItems}</div>`
+      : `<div class="empty">No session data yet — sessions are logged automatically as you use infernoflow</div>`}
+  </section>
+
+</main>
+<footer>infernoflow dashboard · auto-refreshes every 10s · <a href="/" style="color:var(--muted)">refresh now</a></footer>
+<script>
+  // SSE live reload
+  const es = new EventSource('/events');
+  es.onmessage = () => window.location.reload();
+  es.onerror   = () => {};
+</script>
+</body>
+</html>`;
+}
+
+function esc(str) {
+  return String(str || "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+// ── HTTP server ───────────────────────────────────────────────────────────────
+
+function startServer(infernoDir, port) {
+  const cwd         = path.dirname(infernoDir);
+  const projectName = path.basename(cwd);
+  const sseClients  = new Set();
+
+  // Watch inferno/ for changes → notify SSE clients
+  let watchTimer = null;
+  try {
+    fs.watch(infernoDir, { recursive: true }, () => {
+      clearTimeout(watchTimer);
+      watchTimer = setTimeout(() => {
+        for (const res of sseClients) {
+          try { res.write("data: reload\n\n"); } catch {}
+        }
+      }, 500);
+    });
+  } catch {}
+
+  const server = http.createServer((req, res) => {
+    // SSE endpoint
+    if (req.url === "/events") {
+      res.writeHead(200, {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        "Connection": "keep-alive",
+      });
+      sseClients.add(res);
+      req.on("close", () => sseClients.delete(res));
+      return;
+    }
+
+    // JSON API
+    if (req.url === "/api/data") {
+      const data = gatherData(infernoDir);
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify(data, null, 2));
+      return;
+    }
+
+    // Dashboard HTML
+    try {
+      const data = gatherData(infernoDir);
+      const html = buildHtml(data, projectName);
+      res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+      res.end(html);
+    } catch (err) {
+      res.writeHead(500, { "Content-Type": "text/plain" });
+      res.end(`Error: ${err.message}`);
+    }
+  });
+
+  server.listen(port, "127.0.0.1", () => {});
+  return server;
+}
+
+function openBrowser(url) {
+  const platform = os.platform();
+  try {
+    if (platform === "darwin") execSync(`open "${url}"`, { stdio: "ignore" });
+    else if (platform === "win32") execSync(`start "" "${url}"`, { stdio: "ignore", shell: true });
+    else execSync(`xdg-open "${url}"`, { stdio: "ignore" });
+  } catch {}
+}
+
+// ── main ──────────────────────────────────────────────────────────────────────
+
+export async function dashboardCommand(rawArgs) {
+  const args    = rawArgs.slice(1);
+  const noOpen  = args.includes("--no-open");
+  const portIdx = args.indexOf("--port");
+  const port    = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : 7337;
+
+  const cwd        = process.cwd();
+  const infernoDir = path.join(cwd, "inferno");
+
+  header("infernoflow dashboard");
+
+  if (!fs.existsSync(infernoDir)) {
+    warn("inferno/ not found — run: infernoflow init");
+    process.exit(1);
+  }
+
+  const url = `http://localhost:${port}`;
+
+  startServer(infernoDir, port);
+
+  ok(`Dashboard running → ${cyan(url)}`);
+  info("Auto-refreshes when inferno/ files change");
+  info("Press Ctrl+C to stop");
+  console.log();
+
+  if (!noOpen) openBrowser(url);
+
+  // Keep alive
+  await new Promise(() => {});
+}