@matware/e2e-runner 1.2.1 → 1.3.0

package/src/watch.js

@@ -0,0 +1,384 @@
+/**
+ * Watch Engine — 24/7 test scheduler with interval, git-polling, and webhook triggers.
+ *
+ * Communicates with the dashboard via HTTP (POST /api/run, GET /api/status)
+ * to reuse the existing 409 guard and run persistence.
+ */
+
+import http from 'http';
+import https from 'https';
+import { execFileSync } from 'child_process';
+import { startDashboard } from './dashboard.js';
+import { log, colors as C } from './logger.js';
+
+/**
+ * Parse human-readable interval string to milliseconds.
+ * Supports: '15m', '1h', '30s', '2h30m', or raw ms number.
+ */
+export function parseInterval(value) {
+  if (value == null) return null;
+  if (typeof value === 'number') return value;
+  const str = String(value).trim();
+  if (/^\d+$/.test(str)) return parseInt(str, 10);
+
+  let total = 0;
+  const regex = /(\d+)\s*(h|m|s)/gi;
+  let match;
+  while ((match = regex.exec(str)) !== null) {
+    const n = parseInt(match[1], 10);
+    switch (match[2].toLowerCase()) {
+      case 'h': total += n * 3600000; break;
+      case 'm': total += n * 60000; break;
+      case 's': total += n * 1000; break;
+    }
+  }
+  if (total === 0) throw new Error(`Invalid interval: "${value}". Use format like 15m, 1h, 30s`);
+  return total;
+}
+
+/** Get the current git commit hash for a directory and optional branch. */
+function getGitCommitHash(cwd, branch) {
+  const ref = branch || 'HEAD';
+  try {
+    return execFileSync('git', ['rev-parse', ref], { cwd, encoding: 'utf-8', timeout: 10000 }).trim();
+  } catch {
+    return null;
+  }
+}
+
+/** Format milliseconds as a human-readable string. */
+function formatMs(ms) {
+  if (ms >= 3600000) return `${(ms / 3600000).toFixed(1)}h`;
+  if (ms >= 60000) return `${(ms / 60000).toFixed(0)}m`;
+  return `${(ms / 1000).toFixed(0)}s`;
+}
+
+/** HTTP POST JSON to a URL using built-in http/https. Returns a promise. */
+function httpPostJson(url, body) {
+  return new Promise((resolve, reject) => {
+    const parsed = new URL(url);
+    const mod = parsed.protocol === 'https:' ? https : http;
+    const data = JSON.stringify(body);
+    const req = mod.request({
+      hostname: parsed.hostname,
+      port: parsed.port || (parsed.protocol === 'https:' ? 443 : 80),
+      path: parsed.pathname + parsed.search,
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(data) },
+      timeout: 15000,
+    }, (res) => {
+      let buf = '';
+      res.on('data', (chunk) => { buf += chunk; });
+      res.on('end', () => resolve({ status: res.statusCode, body: buf }));
+    });
+    req.on('error', reject);
+    req.on('timeout', () => { req.destroy(); reject(new Error('Request timeout')); });
+    req.end(data);
+  });
+}
+
+/** HTTP GET JSON from a localhost URL. */
+function httpGetJson(url) {
+  return new Promise((resolve, reject) => {
+    const parsed = new URL(url);
+    const mod = parsed.protocol === 'https:' ? https : http;
+    const req = mod.request({
+      hostname: parsed.hostname,
+      port: parsed.port,
+      path: parsed.pathname + parsed.search,
+      method: 'GET',
+      timeout: 10000,
+    }, (res) => {
+      let buf = '';
+      res.on('data', (chunk) => { buf += chunk; });
+      res.on('end', () => {
+        try { resolve(JSON.parse(buf)); } catch { resolve(null); }
+      });
+    });
+    req.on('error', reject);
+    req.on('timeout', () => { req.destroy(); reject(new Error('Request timeout')); });
+    req.end();
+  });
+}
+
+/** Send a webhook notification. */
+async function sendWebhook(url, payload) {
+  try {
+    const resp = await httpPostJson(url, payload);
+    if (resp.status >= 400) {
+      log('⚠️', `${C.yellow}Webhook returned ${resp.status}${C.reset}`);
+    }
+  } catch (err) {
+    log('⚠️', `${C.yellow}Webhook failed: ${err.message}${C.reset}`);
+  }
+}
+
+/** Trigger a run via the dashboard API and wait for completion. */
+async function triggerRun(state, port) {
+  if (state.running) return null;
+  state.running = true;
+
+  const baseUrl = `http://127.0.0.1:${port}`;
+  try {
+    const body = state.projectId ? { projectId: state.projectId } : {};
+    const resp = await httpPostJson(`${baseUrl}/api/run`, body);
+
+    if (resp.status === 409) {
+      log('⏭️', `${C.dim}${state.name}: skipped (run already in progress)${C.reset}`);
+      state.running = false;
+      return null;
+    }
+
+    if (resp.status !== 200) {
+      log('⚠️', `${C.yellow}${state.name}: run trigger failed (HTTP ${resp.status})${C.reset}`);
+      state.running = false;
+      return null;
+    }
+
+    // Poll until complete
+    const result = await waitForRunComplete(baseUrl, state.config.testTimeout * 10 || 600000);
+    state.running = false;
+    return result;
+  } catch (err) {
+    log('⚠️', `${C.yellow}${state.name}: run error — ${err.message}${C.reset}`);
+    state.running = false;
+    return null;
+  }
+}
+
+/** Poll GET /api/status until dashboard.running is false. */
+async function waitForRunComplete(baseUrl, timeoutMs) {
+  const start = Date.now();
+  while (Date.now() - start < timeoutMs) {
+    await new Promise(r => setTimeout(r, 2000));
+    try {
+      const status = await httpGetJson(`${baseUrl}/api/status`);
+      if (status && !status.dashboard?.running) {
+        // Fetch latest report
+        try {
+          return await httpGetJson(`${baseUrl}/api/report/latest`);
+        } catch { return null; }
+      }
+    } catch { /* dashboard may be briefly unavailable */ }
+  }
+  log('⚠️', `${C.yellow}Run timed out after ${formatMs(timeoutMs)}${C.reset}`);
+  return null;
+}
+
+/** Evaluate a run result and send webhook if needed. */
+async function evaluateResult(state, report, config) {
+  if (!report?.summary) return;
+
+  const prevResult = state.lastResult;
+  const failed = report.summary.failed > 0;
+  state.lastResult = failed ? 'fail' : 'pass';
+
+  const wasRecovery = prevResult === 'fail' && !failed;
+  const statusIcon = failed ? '❌' : wasRecovery ? '🟢' : '✅';
+  const statusText = failed
+    ? `${C.red}${report.summary.failed}/${report.summary.total} failed${C.reset}`
+    : wasRecovery
+      ? `${C.green}RECOVERED — all ${report.summary.total} passed${C.reset}`
+      : `${C.green}all ${report.summary.total} passed${C.reset}`;
+
+  log(statusIcon, `${C.bold}${state.name}${C.reset}: ${statusText}`);
+
+  // Determine if webhook should fire
+  const webhookUrl = state.config.watchWebhookUrl || config.watchWebhookUrl;
+  if (!webhookUrl) return;
+
+  const events = (state.config.watchWebhookEvents || config.watchWebhookEvents || 'failure').toLowerCase();
+  const shouldSend =
+    events === 'always' ||
+    (events === 'failure' && failed) ||
+    (events === 'recovery' && wasRecovery) ||
+    (events.includes('failure') && failed) ||
+    (events.includes('recovery') && wasRecovery);
+
+  if (!shouldSend) return;
+
+  const passRate = report.summary.total > 0
+    ? ((report.summary.passed / report.summary.total) * 100).toFixed(1) + '%'
+    : '0%';
+
+  const event = wasRecovery ? 'test:recovery' : failed ? 'test:failure' : 'test:pass';
+  const emoji = wasRecovery ? '🟢' : failed ? '❌' : '✅';
+  const text = wasRecovery
+    ? `${emoji} ${state.name}: Recovered — all ${report.summary.total} tests passing`
+    : failed
+      ? `${emoji} ${state.name}: ${report.summary.failed}/${report.summary.total} tests failed`
+      : `${emoji} ${state.name}: All ${report.summary.total} tests passed`;
+
+  await sendWebhook(webhookUrl, {
+    event,
+    project: state.name,
+    timestamp: new Date().toISOString(),
+    summary: {
+      total: report.summary.total,
+      passed: report.summary.passed,
+      failed: report.summary.failed,
+      passRate,
+    },
+    wasRecovery,
+    dashboardUrl: `http://localhost:${state.dashboardPort}`,
+    text,
+  });
+}
+
+/** Poll git for new commits and trigger a run on change. */
+async function pollGit(state, port, config) {
+  const hash = getGitCommitHash(state.cwd, state.config.watchGitBranch || config.watchGitBranch);
+  if (!hash) return;
+
+  if (state.lastCommit && hash !== state.lastCommit) {
+    log('🔄', `${C.cyan}${state.name}${C.reset}: new commit ${C.dim}${hash.slice(0, 8)}${C.reset}`);
+    const report = await triggerRun(state, port);
+    if (report) await evaluateResult(state, report, config);
+  }
+  state.lastCommit = hash;
+}
+
+/** Start a watch job for a single project. Returns cleanup function. */
+function startJob(projectDef, config, dashPort) {
+  const state = {
+    cwd: projectDef.cwd || config._cwd,
+    name: projectDef.name || config.projectName || 'default',
+    config: { ...config, ...projectDef },
+    running: false,
+    lastResult: null,
+    lastCommit: null,
+    nextRunAt: null,
+    dashboardPort: dashPort,
+    projectId: projectDef.projectId || null,
+  };
+
+  const timers = [];
+
+  // Interval-based trigger
+  const interval = projectDef.watchInterval || config.watchInterval;
+  if (interval) {
+    const ms = parseInterval(interval);
+    log('⏱️', `${C.bold}${state.name}${C.reset}: scheduled every ${C.cyan}${formatMs(ms)}${C.reset}`);
+
+    const runAndSchedule = async () => {
+      state.nextRunAt = new Date(Date.now() + ms).toISOString();
+      const report = await triggerRun(state, dashPort);
+      if (report) await evaluateResult(state, report, config);
+    };
+
+    // Run on start if configured
+    const runOnStart = projectDef.watchRunOnStart !== undefined ? projectDef.watchRunOnStart : config.watchRunOnStart;
+    if (runOnStart) {
+      state.nextRunAt = new Date().toISOString();
+      setTimeout(() => runAndSchedule(), 1000);
+    } else {
+      state.nextRunAt = new Date(Date.now() + ms).toISOString();
+    }
+
+    timers.push(setInterval(runAndSchedule, ms));
+  }
+
+  // Git polling trigger
+  const gitPoll = projectDef.watchGitPoll !== undefined ? projectDef.watchGitPoll : config.watchGitPoll;
+  if (gitPoll) {
+    const gitMs = parseInterval(projectDef.watchGitInterval || config.watchGitInterval || '30s');
+    log('🔍', `${C.bold}${state.name}${C.reset}: git polling every ${C.cyan}${formatMs(gitMs)}${C.reset}`);
+
+    // Seed initial commit hash
+    state.lastCommit = getGitCommitHash(state.cwd, projectDef.watchGitBranch || config.watchGitBranch);
+
+    timers.push(setInterval(() => pollGit(state, dashPort, config), gitMs));
+  }
+
+  return {
+    state,
+    stop() {
+      timers.forEach(t => clearInterval(t));
+    },
+  };
+}
+
+/**
+ * Start the watch engine.
+ *
+ * @param {object} config - Loaded config object
+ * @returns {Promise<{ stop: Function }>}
+ */
+export async function startWatch(config) {
+  // Start dashboard
+  const dashHandle = await startDashboard(config);
+  const port = dashHandle.port;
+
+  // Register /api/watch/status endpoint on the existing server
+  const jobs = [];
+
+  const originalListeners = dashHandle.server.listeners('request');
+  dashHandle.server.removeAllListeners('request');
+  dashHandle.server.on('request', (req, res) => {
+    if (req.url === '/api/watch/status' && req.method === 'GET') {
+      const data = jobs.map(j => ({
+        name: j.state.name,
+        cwd: j.state.cwd,
+        running: j.state.running,
+        lastResult: j.state.lastResult,
+        nextRunAt: j.state.nextRunAt,
+        lastCommit: j.state.lastCommit,
+        triggers: {
+          interval: j.state.config.watchInterval || config.watchInterval || null,
+          gitPoll: j.state.config.watchGitPoll || config.watchGitPoll || false,
+        },
+      }));
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify(data));
+      return;
+    }
+    // Fall through to original dashboard handler
+    for (const listener of originalListeners) {
+      listener.call(dashHandle.server, req, res);
+    }
+  });
+
+  // Build project list
+  const projects = [];
+  if (config.watchProjects && Array.isArray(config.watchProjects)) {
+    for (const p of config.watchProjects) {
+      projects.push(p);
+    }
+  } else {
+    // Single-project mode
+    projects.push({
+      cwd: config._cwd,
+      name: config.projectName,
+    });
+  }
+
+  // Validate: must have at least one trigger
+  const hasInterval = config.watchInterval;
+  const hasGit = config.watchGitPoll;
+  const anyProjectHasTrigger = projects.some(p => p.watchInterval || p.watchGitPoll);
+
+  if (!hasInterval && !hasGit && !anyProjectHasTrigger) {
+    log('⚠️', `${C.yellow}No triggers configured. Use --interval or --git to schedule runs.${C.reset}`);
+    log('', `${C.dim}Dashboard is running at http://0.0.0.0:${port} — you can trigger runs manually.${C.reset}`);
+  }
+
+  // Start jobs
+  for (const p of projects) {
+    const job = startJob(p, config, port);
+    jobs.push(job);
+  }
+
+  console.log('');
+  log('👁️', `${C.bold}Watch mode active${C.reset} — ${C.dim}${jobs.length} project${jobs.length !== 1 ? 's' : ''}${C.reset}`);
+  if (config.watchWebhookUrl) {
+    log('🔔', `Webhook: ${C.dim}${config.watchWebhookUrl}${C.reset} (${config.watchWebhookEvents})`);
+  }
+  console.log('');
+
+  const stop = () => {
+    jobs.forEach(j => j.stop());
+    dashHandle.close();
+  };
+
+  return { stop, jobs, dashHandle };
+}

package/templates/build-dashboard.js

@@ -1,7 +1,8 @@
 #!/usr/bin/env node
 /**
- * Build script — concatenates dashboard/template.html + dashboard/styles.css + dashboard/app.js
- * into a single dashboard.html file.
+ * Build script — reads modular styles/ and js/ directories,
+ * concatenates them in explicit order, wraps JS in an IIFE,
+ * and injects into template.html to produce dashboard.html.
  *
  * Usage: node templates/build-dashboard.js
  */
@@ -12,17 +13,57 @@ import { fileURLToPath } from 'url';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const dashDir = path.join(__dirname, 'dashboard');
+const stylesDir = path.join(dashDir, 'styles');
+const jsDir = path.join(dashDir, 'js');
+
+// Explicit file order — dependencies must come first
+const CSS_ORDER = [
+  'base.css',
+  'components.css',
+  'view-watch.css',
+  'view-tests.css',
+  'view-runs.css',
+  'view-live.css',
+];
+
+const JS_ORDER = [
+  'utils.js',
+  'state.js',
+  'toast.js',
+  'api.js',
+  'websocket.js',
+  'view-watch.js',
+  'view-tests.js',
+  'view-runs.js',
+  'view-live.js',
+  'keyboard.js',
+  'init.js',
+];
+
+function readOrdered(dir, files) {
+  return files.map(f => {
+    const fp = path.join(dir, f);
+    if (!fs.existsSync(fp)) {
+      console.error(`Missing: ${fp}`);
+      process.exit(1);
+    }
+    return `/* ── ${f} ── */\n` + fs.readFileSync(fp, 'utf-8');
+  }).join('\n\n');
+}
 
 const template = fs.readFileSync(path.join(dashDir, 'template.html'), 'utf-8');
-const styles = fs.readFileSync(path.join(dashDir, 'styles.css'), 'utf-8');
-const script = fs.readFileSync(path.join(dashDir, 'app.js'), 'utf-8');
+const styles = readOrdered(stylesDir, CSS_ORDER);
+const scripts = readOrdered(jsDir, JS_ORDER);
+const wrappedScript = `(function(){\n'use strict';\n${scripts}\n})();`;
 
 const output = template
   .replace('/* __STYLES__ */', () => styles)
-  .replace('/* __SCRIPT__ */', () => script);
+  .replace('/* __SCRIPT__ */', () => wrappedScript);
 
 const outPath = path.join(__dirname, 'dashboard.html');
 fs.writeFileSync(outPath, output);
 
 const lines = output.split('\n').length;
-console.log(`Built ${outPath} (${lines} lines)`);
+const cssCount = CSS_ORDER.length;
+const jsCount = JS_ORDER.length;
+console.log(`Built ${outPath} (${lines} lines from ${cssCount} CSS + ${jsCount} JS files)`);

package/templates/dashboard/js/api.js

@@ -0,0 +1,60 @@
+/* ── API & Pool ── */
+function api(p){return fetch(p).then(function(r){return r.json()})}
+function triggerRun(suite,projectId){
+  if(anyLiveRunning())return;
+  var body={};
+  if(suite)body.suite=suite;
+  if(projectId)body.projectId=projectId;
+  else if(S.project)body.projectId=S.project;
+  fetch('/api/run',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
+}
+
+function renderPool(d){
+  if(!d)return;
+  var poolList=$('#poolList');
+  if(d.pools&&d.pools.length>1){
+    var anyAvail=d.availableCount>0;
+    $('#poolDot').className='pool-dot '+(anyAvail?'on':'off');
+    $('#poolLabel').textContent=anyAvail?d.availableCount+'/'+d.totalPools+' ready':'all busy';
+    $('#poolSessions').textContent=(d.totalRunning||0)+'/'+(d.totalMaxConcurrent||0);
+    poolList.textContent='';poolList.style.display='';
+    d.pools.forEach(function(p){
+      var label=(p.url||'').replace('ws://','').replace('wss://','');
+      var ok=!p.error&&p.available;
+      var dot=el('span',{className:'pool-dot '+(ok?'on':'off')});
+      var name=el('strong',{},label);
+      var status=el('span',{},p.error?'offline':p.available?'ready':'busy');
+      var sess=el('span',{className:'pool-sessions'},(p.running||0)+'/'+(p.maxConcurrent||0));
+      poolList.appendChild(el('div',{className:'pool-item'},[dot,name,status,sess]));
+    });
+  }else if(d.pools&&d.pools.length===1){
+    var p=d.pools[0];
+    $('#poolDot').className='pool-dot '+(p.error||!p.available?'off':'on');
+    $('#poolLabel').textContent=p.error?'offline':p.available?'ready':'busy';
+    $('#poolSessions').textContent=(p.running||0)+'/'+(p.maxConcurrent||0);
+    poolList.style.display='none';
+  }else{
+    $('#poolDot').className='pool-dot '+(d.error||!d.available?'off':'on');
+    $('#poolLabel').textContent=d.error?'offline':d.available?'ready':'busy';
+    $('#poolSessions').textContent=(d.running||0)+'/'+(d.maxConcurrent||0);
+    poolList.style.display='none';
+  }
+}
+function refreshStatus(){api('/api/status').then(function(d){renderPool(d.pool)}).catch(function(){})}
+
+/* ── Projects ── */
+function refreshProjects(){
+  api('/api/db/projects').then(function(projects){
+    var sel=$('#projectSelect'),prev=sel.value;
+    while(sel.options.length>1)sel.remove(1);
+    if(Array.isArray(projects))projects.forEach(function(p){
+      var o=document.createElement('option');o.value=p.id;o.textContent=p.name;sel.appendChild(o);
+    });
+    sel.value=prev||'';
+  }).catch(function(){});
+}
+$('#projectSelect').addEventListener('change',function(){
+  S.project=this.value?parseInt(this.value,10):null;
+  S.selectedRun=null;
+  refreshRuns();refreshSuites();refreshScreenshots();refreshLearnings();refreshWatch();
+});

package/templates/dashboard/js/init.js

@@ -0,0 +1,13 @@
+/* ══════════════════════════════════════════════════════════════════
+   Init — startup sequence
+   ══════════════════════════════════════════════════════════════════ */
+initTabs();
+connectWS();
+refreshStatus();
+refreshProjects();
+refreshSuites();
+refreshRuns();
+refreshScreenshots();
+refreshLearnings();
+refreshVariables();
+startWatchPolling();

package/templates/dashboard/js/keyboard.js

@@ -0,0 +1,46 @@
+/* ══════════════════════════════════════════════════════════════════
+   Keyboard Shortcuts (Updated: 1=Watch, 2=Tests, 3=Runs, 4=Live)
+   ══════════════════════════════════════════════════════════════════ */
+document.addEventListener('keydown',function(e){
+  var tag=document.activeElement.tagName;
+  if(tag==='INPUT'||tag==='SELECT'||tag==='TEXTAREA')return;
+  if(e.key==='Escape'){
+    if($('#kbModal').classList.contains('open')){$('#kbModal').classList.remove('open');return}
+    if($('#modal').classList.contains('open')){$('#modal').classList.remove('open');return}
+    if($('#suiteModalOverlay').classList.contains('open')){$('#suiteModalOverlay').classList.remove('open');return}
+    if(S.selectedRun!==null){
+      var expanded=document.querySelector('#runsBody tr.expanded');
+      if(expanded){
+        var next=expanded.nextElementSibling;
+        if(next&&next.classList.contains('run-detail-row')){var w=next.querySelector('.rd-wrap');if(w)w.classList.remove('open');expanded.classList.remove('expanded');setTimeout(function(){if(next.parentNode)next.parentNode.removeChild(next)},350)}
+        S.selectedRun=null;
+      }
+      return;
+    }
+    return;
+  }
+  if(e.key==='?'){$('#kbModal').classList.toggle('open');return}
+  var viewMap={'1':'watch','2':'tests','3':'runs','4':'live'};
+  if(viewMap[e.key]){showView(viewMap[e.key]);return}
+  if(e.key==='r'){
+    if(S.view==='watch')refreshWatch();
+    else if(S.view==='tests'){refreshSuites();refreshVariables()}
+    else if(S.view==='runs'){refreshRuns();refreshScreenshots();refreshLearnings()}
+    else if(S.view==='live')renderLive();
+    return;
+  }
+  if(S.view==='runs'&&(e.key==='j'||e.key==='k')){
+    var visible=_allRunRows.filter(function(item){return item.tr.style.display!=='none'});
+    if(!visible.length)return;
+    if(e.key==='j')S.highlightedRunIdx=Math.min(S.highlightedRunIdx+1,visible.length-1);
+    if(e.key==='k')S.highlightedRunIdx=Math.max(S.highlightedRunIdx-1,0);
+    visible.forEach(function(item,i){if(i===S.highlightedRunIdx){item.tr.classList.add('selected');item.tr.scrollIntoView({block:'nearest'})}else item.tr.classList.remove('selected')});
+    return;
+  }
+  if(S.view==='runs'&&e.key==='Enter'){
+    var visible2=_allRunRows.filter(function(item){return item.tr.style.display!=='none'});
+    if(S.highlightedRunIdx>=0&&S.highlightedRunIdx<visible2.length){visible2[S.highlightedRunIdx].tr.click()}
+    return;
+  }
+});
+$('#kbModal').addEventListener('click',function(e){if(e.target===$('#kbModal'))$('#kbModal').classList.remove('open')});

package/templates/dashboard/js/state.js

@@ -0,0 +1,40 @@
+/* ── Global State ── */
+var S={
+  ws:null,project:null,view:'watch',selectedRun:null,
+  liveRuns:{},liveCollapsed:new Set(),liveSSOpen:new Set(),
+  runFilter:{status:'all',search:''},
+  lastLearningsData:null,
+  highlightedRunIdx:-1
+};
+
+/* ── Navigation ── */
+$$('.nav-item').forEach(function(n){
+  n.addEventListener('click',function(){
+    showView(n.dataset.view);
+  });
+});
+function showView(v){
+  S.view=v;
+  $$('.nav-item').forEach(function(n){n.classList.toggle('active',n.dataset.view===v)});
+  $$('.view').forEach(function(x){x.classList.remove('active')});
+  var viewEl=$('#view-'+v);
+  if(viewEl)viewEl.classList.add('active');
+  if(v==='watch'&&typeof startWatchPolling==='function')startWatchPolling();
+  else if(typeof stopWatchPolling==='function')stopWatchPolling();
+}
+
+/* ── Inner Tabs ── */
+function initTabs(){
+  $$('.tab-bar').forEach(function(bar){
+    var container=bar.parentElement;
+    bar.querySelectorAll('.tab-btn').forEach(function(btn){
+      btn.addEventListener('click',function(){
+        bar.querySelectorAll('.tab-btn').forEach(function(b){b.classList.remove('active')});
+        btn.classList.add('active');
+        container.querySelectorAll('.tab-pane').forEach(function(p){p.classList.remove('active')});
+        var pane=container.querySelector('#'+btn.dataset.tab);
+        if(pane)pane.classList.add('active');
+      });
+    });
+  });
+}

package/templates/dashboard/js/toast.js

@@ -0,0 +1,41 @@
+/* ── Toast Notifications ── */
+function showToast(message,type,timeout){
+  type=type||'info';
+  timeout=timeout||5000;
+  var container=$('#toastContainer');
+  var icons={success:'\u2714',error:'\u2718',info:'\u2139'};
+  var t=el('div',{className:'toast '+type},[
+    el('span',null,icons[type]||''),
+    el('span',null,message)
+  ]);
+  container.appendChild(t);
+  setTimeout(function(){
+    t.classList.add('fade-out');
+    setTimeout(function(){if(t.parentNode)t.parentNode.removeChild(t)},300);
+  },timeout);
+}
+
+function showEnrichedToast(message,type){
+  var container=$('#toastContainer');
+  var icons={success:'\u2714',error:'\u2718',info:'\u2139'};
+  var t=el('div',{className:'toast clickable '+type,onclick:function(){showView('runs');var lb=$('#runsTabLearnings');if(lb)lb.click()}},[
+    el('span',null,icons[type]||''),
+    el('span',null,message)
+  ]);
+  container.appendChild(t);
+  setTimeout(function(){
+    t.classList.add('fade-out');
+    setTimeout(function(){if(t.parentNode)t.parentNode.removeChild(t)},300);
+  },7000);
+}
+
+/* ── Download helper ── */
+function downloadFile(filename,content,mimeType){
+  var blob=new Blob([content],{type:mimeType||'text/plain'});
+  var url=URL.createObjectURL(blob);
+  var a=document.createElement('a');
+  a.href=url;a.download=filename;
+  document.body.appendChild(a);a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}