testronaut 1.0.17 → 1.0.19

package/bin/cli.js

@@ -8,6 +8,12 @@ import { generateHtmlReport } from '../tools/generateHtmlReport.js';
 import inquirer from 'inquirer';
 import fetch from 'node-fetch';
 import crypto from 'crypto';
+import http from 'http';
+import { exec as execCmd } from 'child_process';
+import { promisify } from 'util';
+const exec = promisify(execCmd);
+import url from 'url';
+
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -30,6 +36,8 @@ Usage:
   npx testronaut <file>         Run a specific mission file (e.g., login.mission.js)
   npx testronaut login          Log in and store session token
   npx testronaut upload         Upload the most recent report JSON
+  npx testronaut serve        Serve & open the most recent HTML report (read-only)
+  npx testronaut view         Alias of 'serve'
 
 Options:
   --init                    Scaffold project folders and a welcome mission
@@ -39,6 +47,7 @@ Examples:
   npx testronaut
   npx testronaut login
   npx testronaut upload
+  npx testronaut serve
   npx testronaut --init
 `;
 
@@ -65,6 +74,14 @@ if (args.includes('upload')) {
   process.exit(0);
 }
 
+// Handle the serve/view command
+if (args.includes('serve') || args.includes('view')) {
+  await serveLatestReport();
+   // Keep process alive until user stops it
+  console.log('Press Ctrl+C to stop the server.');
+  await new Promise(() => {}); // ✅ never resolves; Ctrl+C will terminate
+}
+
 if (!fs.existsSync(missionsDir)) {
   console.error('❌ No `missions` directory found.');
   process.exit(1);
@@ -178,7 +195,7 @@ async function handleLogin() {
     const response = await fetch(`${apiBase}/api/user/cli`, {  // Replace with your actual URL
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json',
+        'Content-Type': 'application/x-www-form-urlencoded',
       },
       body: formData.toString(),
     });
@@ -371,3 +388,128 @@ async function uploadReport() {
     console.log('✅ All screenshots uploaded.');
   }
 }
+
+
+function guessMimeType(p) {
+  const ext = path.extname(p).toLowerCase();
+  if (ext === '.html' || ext === '.htm') return 'text/html; charset=utf-8';
+  if (ext === '.json') return 'application/json; charset=utf-8';
+  if (ext === '.js') return 'text/javascript; charset=utf-8';
+  if (ext === '.css') return 'text/css; charset=utf-8';
+  if (ext === '.png') return 'image/png';
+  if (ext === '.jpg' || ext === '.jpeg') return 'image/jpeg';
+  if (ext === '.webp') return 'image/webp';
+  if (ext === '.gif') return 'image/gif';
+  if (ext === '.svg') return 'image/svg+xml';
+  return 'application/octet-stream';
+}
+
+function safeJoin(root, relUrlPath) {
+  // Prevent path traversal and keep within root
+  const decoded = decodeURIComponent(relUrlPath);
+  const clean = decoded.replace(/^\/+/, ''); // strip leading slash
+  const resolved = path.resolve(root, clean);
+  if (!resolved.startsWith(path.resolve(root))) {
+    return null; // attempted escape
+  }
+  return resolved;
+}
+
+async function openInBrowser(targetUrl) {
+  const platform = process.platform;
+  const quoted = `"${targetUrl}"`;
+  if (platform === 'darwin') return exec(`open ${quoted}`);
+  if (platform === 'win32') return exec(`start "" ${quoted}`);
+  return exec(`xdg-open ${quoted}`).catch(() => {}); // best-effort on Linux
+}
+
+function findLatestReportPair(reportDir) {
+  if (!fs.existsSync(reportDir)) return null;
+  const files = fs.readdirSync(reportDir).filter(f => f.endsWith('.html'));
+  if (!files.length) return null;
+
+  // Expecting run_<timestamp>.html — sort by numeric timestamp descending
+  files.sort((a, b) => {
+    const ta = parseInt(a.split('_')[1]) || 0;
+    const tb = parseInt(b.split('_')[1]) || 0;
+    return tb - ta;
+  });
+
+  const latestHtml = files[0];
+  const latestBase = path.basename(latestHtml, '.html');
+  const jsonCandidate = `${latestBase}.json`;
+
+  return {
+    htmlFile: latestHtml,
+    jsonFile: fs.existsSync(path.join(reportDir, jsonCandidate)) ? jsonCandidate : null,
+  };
+}
+
+async function serveLatestReport() {
+  const reportDir = path.resolve(process.cwd(), 'missions/mission_reports');
+
+  const latest = findLatestReportPair(reportDir);
+  if (!latest) {
+    console.error('❌ No HTML reports found in missions/mission_reports.');
+    process.exit(1);
+  }
+
+  const server = http.createServer((req, res) => {
+    try {
+      // Default route -> redirect to latest report
+      const parsed = url.parse(req.url || '/');
+      let pathname = parsed.pathname || '/';
+
+      if (pathname === '/' || pathname === '') {
+        res.statusCode = 302;
+        res.setHeader('Location', `/${latest.htmlFile}`);
+        res.end();
+        return;
+      }
+
+      const targetPath = safeJoin(reportDir, pathname);
+      if (!targetPath) {
+        res.statusCode = 400;
+        res.end('Bad Request');
+        return;
+      }
+
+      // If the path is a directory, try index.html (not expected, but harmless)
+      let toServe = targetPath;
+      if (fs.existsSync(toServe) && fs.statSync(toServe).isDirectory()) {
+        toServe = path.join(toServe, 'index.html');
+      }
+
+      if (!fs.existsSync(toServe) || !fs.statSync(toServe).isFile()) {
+        res.statusCode = 404;
+        res.end('Not Found');
+        return;
+      }
+
+      res.statusCode = 200;
+      res.setHeader('Content-Type', guessMimeType(toServe));
+      fs.createReadStream(toServe).pipe(res);
+    } catch (err) {
+      res.statusCode = 500;
+      res.end('Internal Server Error');
+    }
+  });
+
+  // Listen on a random free port
+  await new Promise((resolve, reject) => {
+    server.once('error', reject);
+    server.listen(0, '127.0.0.1', resolve);
+  });
+
+  const address = server.address();
+  const port = typeof address === 'object' && address ? address.port : 0;
+  const baseUrl = `http://127.0.0.1:${port}`;
+  const reportUrl = `${baseUrl}/${latest.htmlFile}`;
+
+  console.log(`📄 Serving reports from: ${path.relative(process.cwd(), reportDir)}`);
+  console.log(`🔗 Opening latest: ${latest.htmlFile}`);
+  console.log(`🌐 ${reportUrl}`);
+
+  // Best-effort auto-open
+  await openInBrowser(reportUrl).catch(() => {});
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testronaut",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "main": "./runner/testronaut.js",
   "bin": {
     "testronaut": "./bin/cli.js"

package/tools/generateHtmlReport.js

@@ -1,11 +1,15 @@
+// generateHtmlReport.js
 import fs from 'fs';
 import path from 'path';
 
 export function generateHtmlReport(report, outputPath) {
   const { runId, startTime, endTime, missions = [], summary = {} } = report;
-  const durationSec = ((new Date(endTime) - new Date(startTime)) / 1000).toFixed(2);
+  const durationSec =
+    (startTime && endTime)
+      ? ((new Date(endTime) - new Date(startTime)) / 1000).toFixed(2)
+      : '—';
 
-  // tiny helpers
+  // helpers
   const esc = (s) => String(s ?? '')
     .replace(/&/g, '&amp;').replace(/</g, '&lt;')
     .replace(/>/g, '&gt;');
@@ -13,24 +17,25 @@ export function generateHtmlReport(report, outputPath) {
     status === 'passed' ? '✅ Passed' :
     status === 'failed' ? '❌ Failed' : (status || '—');
 
-  // const missionBlock = (m, idx) => {
-    // Render ONE submission (premission/mission/postmission)
-  const submissionBlock = (m, idx) => {
-    const mDurationSec = m.endTime && m.startTime
-      ? ((m.endTime - m.startTime) / 1000).toFixed(2)
-      : '—';
+  const submissionBlock = (m) => {
+    const mDurationSec =
+      m.endTime && m.startTime
+        ? ((m.endTime - m.startTime) / 1000).toFixed(2)
+        : (typeof m.durationSeconds === 'number' ? m.durationSeconds.toFixed(2) : '—');
 
     const steps = Array.isArray(m.steps) ? m.steps : [];
-    const stepItems = steps.map(step => {
+    const stepItems = steps.map((step, idx) => {
       const events = Array.isArray(step.events) ? step.events : [];
+      const ok = /✅|Passed|Mission Success/i.test(step.result || '');
       const imgTag = step.screenshotPath
-        ? `<img src="${esc(step.screenshotPath)}" alt="screenshot turn ${esc(step.turn)}">`
+        ? `<img src="${esc(step.screenshotPath)}" alt="screenshot turn ${esc(step.turn ?? idx)}">`
         : '';
+
       return `
-        <details class="step" ${/Mission Success|Passed/.test(step.result||'') ? '' : 'open'}>
+        <details class="step" ${ok ? '' : 'open'}>
           <summary>
-            <span class="turn">Turn ${esc((step.turn ?? 0) + 1)}</span>
-            <span class="step-result ${/✅/.test(step.result||'') ? 'ok' : 'bad'}">${esc(step.result || '')}</span>
+            <span class="turn">Turn ${esc((step.turn ?? idx) + 1)}</span>
+            <span class="step-result ${ok ? 'ok' : 'bad'}">${esc(step.result || '—')}</span>
             <span class="tokens">tokens: ${esc(step.tokensUsed ?? '—')} / total: ${esc(step.totalTokensUsed ?? '—')}</span>
           </summary>
           <pre class="events">${esc(events.join('\n')) || '(no events)'}</pre>
@@ -39,21 +44,18 @@ export function generateHtmlReport(report, outputPath) {
       `;
     }).join('');
 
-    // Build a clearer title: "<mission> — premission: login"
-    const type = (m.submissionType || '').toLowerCase();
-    const typeLabel =
-      type === 'premission'   ? 'premission' :
-      type === 'postmission'  ? 'postmission' :
-      'mission';
+    const type = String(m.submissionType || 'mission').toLowerCase();
+    const typeLabel = (type === 'premission' || type === 'postmission') ? type : 'mission';
     const prettyTitle = `${esc(m.missionName || 'Mission')} — ${typeLabel}${m.submissionName ? `: ${esc(m.submissionName)}` : ''}`;
-
+    const statusClass = m.status === 'failed' ? 'bad' : (m.status === 'passed' ? 'ok' : '');
 
     return `
       <details class="mission-submission">
         <summary>
           <span class="name">${prettyTitle}</span>
-          <span class="status ${m.status === 'passed' ? 'ok' : (m.status === 'failed' ? 'bad' : '')}">${badge(m.status)}</span>
+          <span class="status ${statusClass}">${badge(m.status)}</span>
           <span class="meta">steps: ${steps.length} • duration: ${mDurationSec}s</span>
+        </summary>
         <div class="steps">
           ${stepItems || '<div class="empty">No steps recorded.</div>'}
         </div>
@@ -61,17 +63,15 @@ export function generateHtmlReport(report, outputPath) {
     `;
   };
 
-  // Group submissions by missionName
+  // group submissions by mission
   const grouped = missions.reduce((acc, m) => {
     const key = m.missionName || '(unnamed mission)';
     (acc[key] ||= []).push(m);
     return acc;
   }, {});
 
-  // Compute overall status for a group (any failure => failed)
   const groupStatus = (subs) => subs.some(s => s.status === 'failed') ? 'failed' : 'passed';
 
-  // Render a mission group with its submissions collapsed inside
   const missionGroupBlock = (missionName, subs) => {
     const status = groupStatus(subs);
     const totalSteps = subs.reduce((n, s) => n + (Array.isArray(s.steps) ? s.steps.length : 0), 0);
@@ -79,15 +79,18 @@ export function generateHtmlReport(report, outputPath) {
     const lastEnd    = Math.max(...subs.map(s => s.endTime || 0).filter(Boolean));
     const groupDur   = (firstStart && lastEnd) ? ((lastEnd - firstStart) / 1000).toFixed(2) : '—';
 
-    // consistent order: pre → mission → post
+    // pre → mission → post
     const order = { premission: 0, mission: 1, postmission: 2 };
-    subs.sort((a, b) => (order[(a.submissionType||'mission')] ?? 1) - (order[(b.submissionType||'mission')] ?? 1));
+    subs.sort((a, b) =>
+      (order[(a.submissionType || 'mission')] ?? 1) -
+      (order[(b.submissionType || 'mission')] ?? 1)
+    );
 
     return `
       <details class="mission-group">
         <summary>
           <span class="name">${esc(missionName)}</span>
-          <span class="status ${status === 'passed' ? 'ok' : 'bad'}">${badge(status)}</span>
+          <span class="status ${status === 'failed' ? 'bad' : 'ok'}">${badge(status)}</span>
           <span class="meta">submissions: ${subs.length} • steps: ${totalSteps} • duration: ${groupDur}s</span>
         </summary>
         <div class="group-body">
@@ -97,92 +100,163 @@ export function generateHtmlReport(report, outputPath) {
     `;
   };
 
-  const html = `
-<!DOCTYPE html>
+  const groupsHtml = Object.entries(grouped).map(([name, subs]) => missionGroupBlock(name, subs)).join('');
+
+  // compute totals for chips if not provided
+  const totals = Object.keys(grouped).reduce((acc, name) => {
+    const st = groupStatus(grouped[name]);
+    acc.total += 1;
+    acc.passed += st === 'passed' ? 1 : 0;
+    acc.failed += st === 'failed' ? 1 : 0;
+    return acc;
+  }, { total: 0, passed: 0, failed: 0 });
+
+  const html = `<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8" />
   <title>Testronaut Report – ${esc(runId)}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
-    :root {
-      --ok: #16a34a;
-      --bad: #dc2626;
-      --muted: #6b7280;
-      --bg: #f8fafc;
-      --card: #ffffff;
-      --border: #e5e7eb;
-      --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+    /* ===== Brand + surface tokens (match splash/app) ===== */
+    :root{
+      --bg-top:#0b1022;
+      --bg-mid:#0f172a;
+      --bg-btm:#0b1022;
+
+      --hairline:rgba(255,255,255,.12);
+      --hairline-strong:rgba(255,255,255,.18);
+
+      --text:rgba(255,255,255,.92);
+      --text-muted:rgba(255,255,255,.65);
+
+      --ok:#22c55e;     /* green-500 */
+      --bad:#ef4444;    /* red-500 */
+
+      --chip-ok-bg:rgba(34,197,94,.14);
+      --chip-bad-bg:rgba(239,68,68,.16);
+      --chip-border:rgba(255,255,255,.22);
+      --chip-ok-border:rgba(34,197,94,.40);
+      --chip-bad-border:rgba(239,68,68,.45);
+    }
+
+    /* ===== Base ===== */
+    html,body{height:100%;}
+    body{
+      margin:0; padding:24px;
+      font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial;
+      background: linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 60%,var(--bg-btm) 100%);
+      color: var(--text);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    /* ===== Utilities ===== */
+    .gradient-text{
+      background: linear-gradient(90deg,#60a5fa,#a78bfa,#34d399);
+      -webkit-background-clip:text; background-clip:text; color:transparent;
+    }
+    .glass{
+      background: rgba(255,255,255,.05);
+      border: 1px solid var(--hairline);
+      border-radius:16px;
+      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+      box-shadow: 0 10px 30px rgba(59,130,246,.20);
+    }
+
+    /* ===== Header ===== */
+    .header{ max-width:960px; margin:0 auto 16px; padding:16px 18px; }
+    h1{ margin:0 0 6px; font-size:22px; font-weight:800; color:#fff; }
+    .run-meta{ color:var(--text-muted); display:grid; gap:4px; }
+
+    /* ===== Chips ===== */
+    .summary{ display:flex; flex-wrap:wrap; gap:12px; margin:16px auto 20px; max-width:960px; }
+    .pill{
+      border:1px solid var(--chip-border);
+      background: rgba(255,255,255,.06);
+      padding:6px 12px; border-radius:999px; font-size:12px; color:var(--text);
+      letter-spacing:.2px;
+    }
+    .pill.ok{ background: var(--chip-ok-bg); color: var(--ok); border-color: var(--chip-ok-border); font-weight:700; }
+    .pill.bad{ background: var(--chip-bad-bg); color: var(--bad); border-color: var(--chip-bad-border); font-weight:700; }
+
+    /* ===== Disclosure blocks ===== */
+    details{ background: rgba(255,255,255,.05); border:1px solid var(--hairline); border-radius:16px; margin:10px 0; overflow:hidden; }
+    summary{
+      cursor:pointer; padding:14px 16px; display:flex; align-items:center; gap:12px;
+      color:#fff; background: rgba(255,255,255,.04);
+    }
+    .mission-group > summary{ font-weight:800; font-size:15px; letter-spacing:.2px; }
+    .mission-group > summary:hover{ background: rgba(255,255,255,.08); }
+
+    .group-body{ padding:12px; display:grid; gap:10px; }
+
+    .mission-submission > summary{
+      font-weight:700; background: rgba(255,255,255,.06); border-top:1px solid var(--hairline);
     }
-    body { margin:0; padding:24px; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; background: var(--bg); color:#111827; }
-    h1 { margin: 0 0 6px 0; font-size: 20px; }
-    .run-meta { color: var(--muted); margin-bottom: 16px; }
-    .summary { display:flex; gap:12px; margin: 12px 0 20px; }
-    .pill { border:1px solid var(--border); background: var(--card); padding:6px 10px; border-radius:999px; font-size:12px; }
-    .pill.ok { border-color: #bbf7d0; background:#ecfdf5; color: var(--ok); }
-    .pill.bad { border-color: #fecaca; background:#fef2f2; color: var(--bad); }
-
-    details { background: var(--card); border:1px solid var(--border); border-radius:10px; margin:10px 0; }
-    summary { cursor:pointer; padding:12px 14px; display:flex; align-items:center; gap:12px; }
-    .mission-group > summary { font-weight:700; }
-    .mission-submission > summary { font-weight:600; }
-    /* Better contrast on summaries */
-    .mission-submission > summary { background:#f3f4f6; }
-    .mission-submission > summary:hover { background:#e5e7eb; }
-    .mission-group > summary:hover { background:#f9fafb; }
-    /* Focus ring */
-    summary:focus-visible { outline: 2px solid #94a3b8; outline-offset: 2px; border-radius: 8px; }
-    /* Disclosure caret */
-    summary::marker { color: var(--muted); }
-    .group-body { padding: 0 10px 10px; }
-    .name { flex:1; }
-    .status.ok { color: var(--ok); }
-    .status.bad { color: var(--bad); }
-    .meta { color: var(--muted); font-size:12px; }
-
-    .steps { padding: 0 14px 12px; }
-    .step summary { background: #f8fafc; border-bottom:1px solid var(--border); border-radius: 10px 10px 0 0; }
-    .turn { font-weight:600; }
-    .step-result.ok { color: var(--ok); }
-    .step-result.bad { color: var(--bad); }
-    .tokens { color: var(--muted); font-size:12px; margin-left:auto; }
-    .events { background:#0b1020; color:#e5e7eb; padding:12px; border-radius:8px; margin:12px 0 0; font: 12px/1.4 var(--mono); max-height: 280px; overflow:auto; }
-    img { display:block; max-width:100%; border:1px solid var(--border); border-radius:8px; margin-top:10px; }
-    .empty { color: var(--muted); padding: 12px; }
+    .mission-submission > summary:hover{ background: rgba(255,255,255,.08); }
+
+    .name{ flex:1; }
+    .status.ok{ color: var(--ok); font-weight:700; }
+    .status.bad{ color: var(--bad); font-weight:700; }
+    .meta{ color: var(--text-muted); font-size:12px; }
+
+    .steps{ padding: 0 12px 12px; }
+    .step summary{
+      background: rgba(255,255,255,.04);
+      border:1px solid var(--hairline);
+      border-radius:12px;
+    }
+    .step summary:hover{ background: rgba(255,255,255,.08); }
+
+    .turn{ font-weight:700; }
+    .step-result.ok{ color: var(--ok); font-weight:700; }
+    .step-result.bad{ color: var(--bad); font-weight:700; }
+    .tokens{ color: var(--text-muted); font-size:12px; margin-left:auto; font-variant-numeric: tabular-nums; }
+
+    .events{
+      background: rgba(2,6,23,.9); /* near #020617 */
+      color: rgba(255,255,255,.92);
+      padding:12px; border-radius:12px; margin:12px 0 0;
+      font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New";
+      max-height:320px; overflow:auto; white-space:pre-wrap;
+      border: 1px solid var(--hairline-strong);
+    }
+
+    img{
+      display:block; max-width:100%;
+      border:1px solid var(--hairline); border-radius:12px; margin-top:10px;
+      background: rgba(0,0,0,.2);
+    }
+
+    /* container width */
+    .container{ max-width:960px; margin:0 auto; }
+    .empty{ color: var(--text-muted); padding:12px; }
   </style>
 </head>
 <body>
-  <h1>🧑‍🚀 Testronaut Report</h1>
-  <div class="run-meta">
-    <div><strong>Run ID:</strong> ${esc(runId)}</div>
-    <div><strong>Start:</strong> ${esc(startTime)}</div>
-    <div><strong>End:</strong> ${esc(endTime)} • <strong>Duration:</strong> ${durationSec}s</div>
+  <div class="header glass">
+    <h1>🧑‍🚀 <span class="gradient-text">Testronaut Report</span></h1>
+    <div class="run-meta">
+      <div><strong>Run ID:</strong> ${esc(runId ?? '—')}</div>
+      <div><strong>Start:</strong> ${esc(startTime ?? '—')}</div>
+      <div><strong>End:</strong> ${esc(endTime ?? '—')} • <strong>Duration:</strong> ${durationSec}s</div>
+    </div>
   </div>
 
   <div class="summary">
-    ${(() => {
-      const groupNames = Object.keys(grouped);
-      const totals = groupNames.reduce((acc, name) => {
-        const st = groupStatus(grouped[name]);
-        acc.total += 1;
-        acc.passed += (st === 'passed') ? 1 : 0;
-        acc.failed += (st === 'failed') ? 1 : 0;
-        return acc;
-      }, { total: 0, passed: 0, failed: 0 });
-      return `
-        <div class="pill">Missions: ${esc(summary.totalMissions ?? totals.total)}</div>
-        <div class="pill ok">Passed: ${esc(summary.passed ?? totals.passed)}</div>
-        <div class="pill bad">Failed: ${esc(summary.failed ?? totals.failed)}</div>
-      `;
-    })()}
+    <div class="pill">Missions: ${esc(summary.totalMissions ?? totals.total)}</div>
+    <div class="pill ok">Passed: ${esc(summary.passed ?? totals.passed)}</div>
+    <div class="pill bad">Failed: ${esc(summary.failed ?? totals.failed)}</div>
   </div>
 
-  ${Object.entries(grouped).map(([name, subs]) => missionGroupBlock(name, subs)).join('')}
-
+  <div class="container">
+    ${groupsHtml || '<div class="glass empty">No missions recorded.</div>'}
+  </div>
 </body>
-</html>
-  `;
+</html>`;
 
-  const out = outputPath ?? path.resolve('missions/mission_reports', `${runId}.html`);
+  const out = outputPath ?? path.resolve('missions/mission_reports', `${runId || 'report'}.html`);
   fs.mkdirSync(path.dirname(out), { recursive: true });
   fs.writeFileSync(out, html);
   console.log(`📝 Report generated at: ${out}`);