ai-control-center 1.15.2

package/lib/utils/ux-analyzer.js

@@ -0,0 +1,101 @@
+/**
+ * UX Analyzer — Analyzes QA history and usage patterns to identify
+ * improvement opportunities for the Suggestion Agent.
+ */
+
+import { existsSync, readdirSync, readFileSync } from 'fs';
+import { resolve } from 'path';
+import { getWorkflowDir } from './pipeline.js';
+
+export function analyzeQAHistory() {
+  const qaDir = resolve(getWorkflowDir(), 'qa-reports');
+  if (!existsSync(qaDir)) return null;
+
+  const reports = readdirSync(qaDir)
+    .filter(f => f.startsWith('QA-') && f.endsWith('.json'))
+    .sort()
+    .reverse()
+    .slice(0, 10)
+    .map(f => {
+      try { return JSON.parse(readFileSync(resolve(qaDir, f), 'utf8')); }
+      catch { return null; }
+    })
+    .filter(Boolean);
+
+  if (reports.length === 0) return null;
+
+  // Recurring failures
+  const failCount = {};
+  for (const report of reports) {
+    for (const fail of (report.failed || [])) {
+      try {
+        const key = new URL(fail.url).pathname;
+        failCount[key] = (failCount[key] || 0) + 1;
+      } catch { /* invalid URL */ }
+    }
+  }
+
+  // Recurring warnings
+  const warnCount = {};
+  for (const report of reports) {
+    for (const warn of (report.warnings || [])) {
+      for (const w of (warn.warnings || [])) {
+        warnCount[w] = (warnCount[w] || 0) + 1;
+      }
+    }
+  }
+
+  // Routes tested
+  const allRoutes = new Set();
+  for (const report of reports) {
+    for (const p of (report.passed || [])) {
+      try { allRoutes.add(new URL(p.url).pathname); } catch { /* skip */ }
+    }
+    for (const f of (report.failed || [])) {
+      try { allRoutes.add(new URL(f.url).pathname); } catch { /* skip */ }
+    }
+  }
+
+  // Average pass rate
+  const avgPassRate = Math.round(
+    reports.reduce((sum, r) => sum + (r.summary?.passRate || 0), 0) / reports.length
+  );
+
+  return {
+    avgPassRate,
+    recurringFailures: Object.entries(failCount)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 5)
+      .map(([path, count]) => ({ path, count })),
+    recurringWarnings: Object.entries(warnCount)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 5)
+      .map(([warning, count]) => ({ warning, count })),
+    testedRoutes: [...allRoutes],
+    totalReports: reports.length,
+  };
+}
+
+export function analyzeActivityLogs() {
+  try {
+    const logDir = resolve(getWorkflowDir(), 'logs');
+    if (!existsSync(logDir)) return null;
+
+    const logs = readdirSync(logDir)
+      .filter(f => f.endsWith('.log'))
+      .sort()
+      .reverse()
+      .slice(0, 5)
+      .map(f => readFileSync(resolve(logDir, f), 'utf8'))
+      .join('\n');
+
+    const errorLines = logs.split('\n').filter(l => l.includes('[ERROR]') || l.includes('[WARN]'));
+
+    return {
+      totalErrorLines: errorLines.length,
+      sampleErrors: errorLines.slice(0, 10),
+    };
+  } catch {
+    return null;
+  }
+}

package/lib/utils/webhook-emitter.js

@@ -0,0 +1,83 @@
+import { createHmac } from 'crypto';
+import { getConfig } from '../config.js';
+import { bus } from '../shared/event-bus.js';
+
+export function signPayload(payload, secret) {
+  const body = typeof payload === 'string' ? payload : JSON.stringify(payload);
+  return createHmac('sha256', secret).update(body).digest('hex');
+}
+
+export async function emitWebhook(url, event, payload, secret) {
+  try {
+    const body = JSON.stringify(payload);
+    const headers = {
+      'Content-Type': 'application/json',
+      'X-AICC-Event': event
+    };
+    if (secret) {
+      headers['X-AICC-Signature'] = signPayload(body, secret);
+    }
+    const res = await fetch(url, { method: 'POST', headers, body });
+    return { success: res.ok, statusCode: res.status, error: null };
+  } catch (err) {
+    return { success: false, statusCode: null, error: err.message };
+  }
+}
+
+export async function emitWithRetry(url, event, payload, secret, maxRetries = 3) {
+  let result;
+  for (let attempt = 0; attempt <= maxRetries; attempt++) {
+    result = await emitWebhook(url, event, payload, secret);
+    if (result.success) return result;
+    if (attempt < maxRetries) {
+      const delay = Math.pow(4, attempt) * 1000; // 1s, 4s, 16s
+      await new Promise(r => setTimeout(r, delay));
+    }
+  }
+  return result;
+}
+
+export function getWebhookConfig() {
+  try {
+    const config = getConfig();
+    const hooks = config.webhooks || [];
+    return hooks.map(h => ({
+      ...h,
+      secret: h.secret ? '****' : undefined
+    }));
+  } catch {
+    return [];
+  }
+}
+
+export async function testWebhook(url, secret) {
+  return emitWebhook(url, 'ping', {
+    type: 'ping',
+    timestamp: new Date().toISOString(),
+    message: 'AICC webhook test'
+  }, secret);
+}
+
+export function initWebhooks() {
+  let hooks;
+  try {
+    const config = getConfig();
+    hooks = config.webhooks || [];
+  } catch {
+    return;
+  }
+  if (!hooks.length) return;
+
+  bus.on('pipeline-event', async (data) => {
+    for (const hook of hooks) {
+      const events = hook.events || [];
+      if (events.includes(data.type)) {
+        try {
+          await emitWithRetry(hook.url, data.type, data, hook.secret);
+        } catch {
+          // Webhook failures must never crash the app
+        }
+      }
+    }
+  });
+}

package/lib/web/public/css/styles.css

@@ -0,0 +1,417 @@
+/* AI Control Center Dashboard — dark terminal-inspired theme */
+
+:root {
+  --bg:         #0d1117;
+  --bg-surface: #161b22;
+  --bg-card:    #1c2128;
+  --bg-hover:   #21262d;
+  --border:     #30363d;
+  --text:       #e6edf3;
+  --text-dim:   #7d8590;
+  --text-muted: #484f58;
+  --accent:     #58a6ff;
+  --green:      #3fb950;
+  --yellow:     #d29922;
+  --red:        #f85149;
+  --magenta:    #bc8cff;
+  --cyan:       #79c0ff;
+  --blue:       #58a6ff;
+  --mono:       'SF Mono', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', Menlo, monospace;
+  --sans:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  --radius:     6px;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: var(--sans);
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ─── Header ─────────────────────────────────────────────────────────────── */
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 24px;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.header-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.diamond { color: var(--accent); font-size: 18px; }
+.brand { font-weight: 700; font-size: 16px; }
+.subtitle { color: var(--text-dim); font-size: 13px; }
+
+.header-status {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-family: var(--mono);
+  font-size: 12px;
+}
+
+.badge {
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.badge-idle       { background: var(--bg-hover); color: var(--text-dim); }
+.badge-progress   { background: #1a3a2a; color: var(--green); }
+.badge-review     { background: #2a2520; color: var(--yellow); }
+.badge-approved   { background: #1a3a2a; color: var(--green); }
+.badge-rejected   { background: #3a1a1a; color: var(--red); }
+.badge-deployed   { background: #1a2a3a; color: var(--cyan); }
+
+.ws-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+.ws-connected    { background: var(--green); }
+.ws-disconnected { background: var(--red); }
+
+.dim { color: var(--text-dim); }
+
+/* ─── Nav ────────────────────────────────────────────────────────────────── */
+
+nav {
+  display: flex;
+  gap: 0;
+  padding: 0 24px;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.nav-link {
+  padding: 10px 16px;
+  color: var(--text-dim);
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.nav-link:hover { color: var(--text); }
+.nav-link.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+/* ─── Main ───────────────────────────────────────────────────────────────── */
+
+main {
+  flex: 1;
+  padding: 24px;
+  max-width: 960px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* ─── Cards ──────────────────────────────────────────────────────────────── */
+
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+  margin-bottom: 16px;
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--text);
+}
+
+/* ─── Pipeline Progress ──────────────────────────────────────────────────── */
+
+.pipeline-stages {
+  display: flex;
+  gap: 4px;
+  margin: 16px 0;
+}
+
+.stage-step {
+  flex: 1;
+  text-align: center;
+  padding: 8px 4px;
+  font-size: 11px;
+  font-family: var(--mono);
+  border-radius: 4px;
+  background: var(--bg-hover);
+  color: var(--text-muted);
+  transition: background 0.2s, color 0.2s;
+}
+
+.stage-step.active {
+  background: var(--accent);
+  color: #fff;
+}
+
+.stage-step.completed {
+  background: #1a3a2a;
+  color: var(--green);
+}
+
+/* ─── Forms ──────────────────────────────────────────────────────────────── */
+
+.form-group {
+  margin-bottom: 16px;
+}
+
+label {
+  display: block;
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+
+input[type="text"], textarea, select {
+  width: 100%;
+  padding: 10px 12px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 13px;
+}
+
+input:focus, textarea:focus, select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+textarea { resize: vertical; min-height: 80px; }
+
+/* ─── Buttons ────────────────────────────────────────────────────────────── */
+
+.btn {
+  padding: 8px 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-hover);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn:hover { background: var(--border); }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.btn-primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+.btn-primary:hover { background: #4090e0; }
+
+.btn-success {
+  background: #238636;
+  border-color: #238636;
+  color: #fff;
+}
+.btn-success:hover { background: #2ea043; }
+
+.btn-danger {
+  background: #da3633;
+  border-color: #da3633;
+  color: #fff;
+}
+.btn-danger:hover { background: #f85149; }
+
+.btn-group { display: flex; gap: 8px; margin-top: 12px; }
+
+/* ─── Log Viewer ─────────────────────────────────────────────────────────── */
+
+.log-viewer {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px;
+  max-height: 500px;
+  overflow-y: auto;
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.log-line { padding: 1px 0; }
+.log-gemini   { color: var(--cyan); }
+.log-claude   { color: var(--magenta); }
+.log-copilot  { color: var(--blue); }
+.log-pipeline { color: var(--yellow); }
+.log-error    { color: var(--red); }
+.log-success  { color: var(--green); }
+
+/* ─── Filter Tabs ────────────────────────────────────────────────────────── */
+
+.filter-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.filter-tab {
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--bg-hover);
+  color: var(--text-dim);
+  border: none;
+}
+
+.filter-tab.active { background: var(--accent); color: #fff; }
+.filter-tab:hover  { background: var(--border); color: var(--text); }
+
+/* ─── Health Check ───────────────────────────────────────────────────────── */
+
+.health-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 0;
+  font-family: var(--mono);
+  font-size: 13px;
+}
+
+.health-icon { width: 20px; text-align: center; }
+.health-ok   { color: var(--green); }
+.health-fail { color: var(--red); }
+.health-warn { color: var(--yellow); }
+.health-label { width: 140px; font-weight: 600; }
+.health-detail { color: var(--text-dim); }
+
+/* ─── Verdict Panel ──────────────────────────────────────────────────────── */
+
+.verdict-panel {
+  border-left: 3px solid var(--border);
+  padding: 16px 20px;
+  margin: 12px 0;
+}
+
+.verdict-approved { border-left-color: var(--green); }
+.verdict-rejected { border-left-color: var(--red); }
+
+.verdict-title {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+
+.verdict-section {
+  margin: 8px 0;
+}
+
+.verdict-section h4 {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-bottom: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.verdict-list {
+  list-style: none;
+  padding: 0;
+}
+
+.verdict-list li {
+  padding: 3px 0;
+  font-size: 13px;
+  font-family: var(--mono);
+}
+
+.verdict-list li::before { content: '  '; }
+
+/* ─── Toast Notifications ─────────────────────────────────────────────────── */
+
+.toast-container {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.toast {
+  padding: 12px 16px;
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  font-size: 13px;
+  animation: slideIn 0.2s ease-out;
+  max-width: 320px;
+}
+
+.toast-success { border-left: 3px solid var(--green); }
+.toast-error   { border-left: 3px solid var(--red); }
+.toast-info    { border-left: 3px solid var(--accent); }
+
+@keyframes slideIn {
+  from { transform: translateX(100%); opacity: 0; }
+  to   { transform: translateX(0); opacity: 1; }
+}
+
+/* ─── Spinner ────────────────────────────────────────────────────────────── */
+
+.spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ─── Footer ─────────────────────────────────────────────────────────────── */
+
+footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 24px;
+  background: var(--bg-surface);
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+}
+
+/* ─── Responsive ─────────────────────────────────────────────────────────── */
+
+@media (max-width: 640px) {
+  header { flex-direction: column; gap: 8px; }
+  nav { overflow-x: auto; }
+  .pipeline-stages { flex-wrap: wrap; }
+  main { padding: 16px; }
+}

package/lib/web/public/dark-mode.js

@@ -0,0 +1,44 @@
+// Dark mode toggle for AICC dashboard
+(function() {
+  const STORAGE_KEY = 'aicc-dark-mode';
+  
+  function isDarkMode() {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored !== null) return stored === 'true';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  function applyTheme(dark) {
+    document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
+    document.body.classList.toggle('dark-mode', dark);
+    document.body.classList.toggle('light-mode', !dark);
+    localStorage.setItem(STORAGE_KEY, dark);
+    
+    // Update toggle button if exists
+    const btn = document.getElementById('dark-mode-toggle');
+    if (btn) btn.textContent = dark ? '☀️ Light' : '🌙 Dark';
+  }
+
+  function toggle() {
+    applyTheme(!isDarkMode());
+  }
+
+  function createToggleButton() {
+    const btn = document.createElement('button');
+    btn.id = 'dark-mode-toggle';
+    btn.onclick = toggle;
+    btn.style.cssText = 'position:fixed;bottom:1rem;right:1rem;padding:0.5rem 1rem;background:#334155;border:1px solid #475569;border-radius:8px;color:#e2e8f0;cursor:pointer;font-size:0.8rem;z-index:1000;';
+    document.body.appendChild(btn);
+  }
+
+  // Auto-apply on load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => { applyTheme(isDarkMode()); createToggleButton(); });
+  } else {
+    applyTheme(isDarkMode());
+    createToggleButton();
+  }
+
+  // Export for module usage
+  window.darkMode = { toggle, isDarkMode, applyTheme };
+})();