ai-control-center 1.15.2

package/lib/web/public/js/feature.js

@@ -0,0 +1,79 @@
+/**
+ * New Feature / Bug Fix view.
+ */
+
+export function renderFeature(container) {
+  container.innerHTML = `
+    <div class="card">
+      <div class="card-title">Submit New Feature / Bug Fix</div>
+
+      <div class="form-group">
+        <label>Type</label>
+        <select id="feat-type">
+          <option value="feature">Feature</option>
+          <option value="bug">Bug Fix</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label>Description (min 10 characters)</label>
+        <textarea id="feat-desc" placeholder="e.g. Add MYOB bank transaction inbound sync support" rows="4"></textarea>
+      </div>
+
+      <div class="form-group">
+        <label>Pipeline Mode</label>
+        <select id="feat-mode">
+          <option value="auto">Auto — run full pipeline, notify when done</option>
+          <option value="manual">Manual — step through each stage</option>
+        </select>
+      </div>
+
+      <div class="btn-group">
+        <button class="btn btn-primary" id="feat-submit">Submit Feature</button>
+      </div>
+
+      <div id="feat-result" style="margin-top: 16px; font-family: var(--mono); font-size: 13px;"></div>
+    </div>
+  `;
+
+  document.getElementById('feat-submit').addEventListener('click', submitFeature);
+}
+
+async function submitFeature() {
+  const btn  = document.getElementById('feat-submit');
+  const desc = document.getElementById('feat-desc').value.trim();
+  const mode = document.getElementById('feat-mode').value;
+  const type = document.getElementById('feat-type').value;
+  const result = document.getElementById('feat-result');
+
+  if (desc.length < 10) {
+    result.innerHTML = '<span style="color: var(--red);">Description must be at least 10 characters.</span>';
+    return;
+  }
+
+  btn.disabled = true;
+  btn.innerHTML = '<span class="spinner"></span> Submitting...';
+  result.innerHTML = '<span style="color: var(--text-dim);">Creating feature inbox file...</span>';
+
+  try {
+    const res = await fetch('/api/feature', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ description: desc, mode, type }),
+    });
+    const data = await res.json();
+
+    if (data.success) {
+      result.innerHTML = `<span style="color: var(--green);">Feature created: ${data.featureId}</span>`;
+      window.showToast('Feature submitted!', 'success');
+      document.getElementById('feat-desc').value = '';
+    } else {
+      result.innerHTML = `<span style="color: var(--red);">${data.error}</span>`;
+    }
+  } catch (err) {
+    result.innerHTML = `<span style="color: var(--red);">Network error: ${err.message}</span>`;
+  }
+
+  btn.disabled = false;
+  btn.textContent = 'Submit Feature';
+}

package/lib/web/public/js/health.js

@@ -0,0 +1,65 @@
+/**
+ * Health check view — shows AI tool + org availability.
+ */
+
+export function renderHealth(container) {
+  container.innerHTML = `
+    <div class="card">
+      <div class="card-title">System Health Check</div>
+      <div id="health-content">
+        <div style="color: var(--text-dim);"><span class="spinner"></span> Checking...</div>
+      </div>
+    </div>
+  `;
+
+  loadHealth();
+}
+
+async function loadHealth() {
+  const el = document.getElementById('health-content');
+
+  try {
+    const data = await fetch('/api/health').then(r => r.json());
+
+    const row = (icon, label, detail) =>
+      `<div class="health-row">
+        <span class="health-icon ${icon ? 'health-ok' : 'health-fail'}">${icon ? '&#10003;' : '&#10007;'}</span>
+        <span class="health-label">${label}</span>
+        <span class="health-detail">${detail}</span>
+      </div>`;
+
+    let html = '';
+
+    // AI Tools
+    html += '<div style="color: var(--text-dim); font-size: 11px; margin: 8px 0 4px;">AI Tools</div>';
+    html += row(data.gemini?.available,  'gemini',  data.gemini?.path  || 'not found');
+    html += row(data.claude?.available,  'claude',  data.claude?.path  || 'not found');
+    html += row(data.copilot?.available, 'copilot', data.copilot?.path || 'not found');
+    html += row(data.gh?.available,      'gh',      data.gh?.path      || 'not found');
+
+    // Platform CLI
+    html += '<div style="color: var(--text-dim); font-size: 11px; margin: 12px 0 4px;">Platform CLI</div>';
+    html += row(data.sf?.available, 'sf', data.sf?.path || 'not found');
+
+    // Workflow
+    html += '<div style="color: var(--text-dim); font-size: 11px; margin: 12px 0 4px;">Workflow</div>';
+    const wf = data.workflow || {};
+    html += row(wf.aiWorkflow, '.ai-workflow/', wf.aiWorkflow ? 'exists' : 'missing');
+    html += row(wf.skills,     '.claude/skills/', wf.skills ? 'exists' : 'missing');
+    html += row(wf.agents,     '.claude/agents/', wf.agents ? 'exists' : 'missing');
+
+    // Pipeline
+    const p = data.pipeline || {};
+    html += '<div style="color: var(--text-dim); font-size: 11px; margin: 12px 0 4px;">Pipeline</div>';
+    html += `<div class="health-row">
+      <span class="health-icon" style="color: var(--cyan);">&#9670;</span>
+      <span class="health-label">stage</span>
+      <span class="health-detail">${p.stage || 'idle'} &middot; ${p.current_feature || 'none'}</span>
+    </div>`;
+
+    el.innerHTML = html;
+
+  } catch (err) {
+    el.innerHTML = `<span style="color: var(--red);">Health check failed: ${err.message}</span>`;
+  }
+}

package/lib/web/public/js/logs.js

@@ -0,0 +1,93 @@
+/**
+ * Logs view — session log viewer with agent filter.
+ */
+
+let currentFilter = 'all';
+
+export function renderLogs(container) {
+  container.innerHTML = `
+    <div class="card">
+      <div class="card-title">Session Logs</div>
+
+      <div class="filter-tabs" id="log-filters">
+        <button class="filter-tab active" data-filter="all">All</button>
+        <button class="filter-tab" data-filter="GEMINI" style="color: var(--cyan);">Gemini</button>
+        <button class="filter-tab" data-filter="CLAUDE" style="color: var(--magenta);">Claude</button>
+        <button class="filter-tab" data-filter="COPILOT" style="color: var(--blue);">Copilot</button>
+        <button class="filter-tab" data-filter="PIPELINE" style="color: var(--yellow);">Pipeline</button>
+      </div>
+
+      <div id="log-content" class="log-viewer">Loading...</div>
+
+      <div style="margin-top: 8px; display: flex; justify-content: space-between; align-items: center;">
+        <span id="log-count" class="dim" style="font-size: 11px;"></span>
+        <button class="btn" id="log-refresh" style="font-size: 12px;">Refresh</button>
+      </div>
+    </div>
+  `;
+
+  // Filter tab handlers
+  document.getElementById('log-filters').addEventListener('click', (e) => {
+    if (!e.target.dataset.filter) return;
+    currentFilter = e.target.dataset.filter;
+    document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
+    e.target.classList.add('active');
+    loadLogs();
+  });
+
+  document.getElementById('log-refresh').addEventListener('click', loadLogs);
+
+  // Listen for live log events
+  window.addEventListener('xconn', onLogUpdate);
+
+  loadLogs();
+}
+
+async function loadLogs() {
+  const contentEl = document.getElementById('log-content');
+  const countEl = document.getElementById('log-count');
+
+  try {
+    const data = await fetch('/api/logs?lines=200').then(r => r.json());
+    const lines = data.content.split('\n').filter(l => l.trim());
+
+    const filtered = currentFilter === 'all'
+      ? lines
+      : lines.filter(l => l.includes(`[${currentFilter}`));
+
+    contentEl.innerHTML = filtered.map(colorLine).join('\n');
+    countEl.textContent = `${filtered.length} line(s)${data.total ? ` of ${data.total} total` : ''}`;
+
+    // Auto-scroll to bottom
+    contentEl.scrollTop = contentEl.scrollHeight;
+  } catch (err) {
+    contentEl.textContent = 'Failed to load logs.';
+  }
+}
+
+function colorLine(line) {
+  let cls = '';
+  if (line.includes('[GEMINI'))   cls = 'log-gemini';
+  else if (line.includes('[CLAUDE'))  cls = 'log-claude';
+  else if (line.includes('[COPILOT')) cls = 'log-copilot';
+  else if (line.includes('[PIPELINE')) cls = 'log-pipeline';
+  else if (line.includes('[ERROR'))   cls = 'log-error';
+  else if (line.includes('[SUCCESS')) cls = 'log-success';
+
+  const escaped = line.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  return `<span class="log-line ${cls}">${escaped}</span>`;
+}
+
+function onLogUpdate(e) {
+  if (e.detail.type !== 'log') return;
+  const { agent, message } = e.detail.data;
+
+  if (currentFilter !== 'all' && !agent.includes(currentFilter)) return;
+
+  const contentEl = document.getElementById('log-content');
+  if (!contentEl) return;
+
+  const line = `[${new Date().toLocaleTimeString()}] [${agent}] ${message}`;
+  contentEl.innerHTML += '\n' + colorLine(line);
+  contentEl.scrollTop = contentEl.scrollHeight;
+}

package/lib/web/public/js/review.js

@@ -0,0 +1,123 @@
+/**
+ * Review view — verdict display + approve/reject.
+ */
+
+export function renderReview(container) {
+  container.innerHTML = `
+    <div class="card">
+      <div class="card-title">Latest Review</div>
+      <div id="review-content" style="font-family: var(--mono); font-size: 13px;">Loading...</div>
+    </div>
+
+    <div class="card" id="review-actions-card" style="display: none;">
+      <div class="card-title">Actions</div>
+      <div class="btn-group">
+        <button class="btn btn-success" id="review-approve">Approve</button>
+        <button class="btn btn-danger" id="review-reject">Reject</button>
+      </div>
+      <div id="reject-reason-wrap" style="display: none; margin-top: 12px;">
+        <div class="form-group">
+          <label>Rejection Reason</label>
+          <textarea id="reject-reason" placeholder="Describe what needs to be fixed..." rows="3"></textarea>
+        </div>
+        <button class="btn btn-danger" id="reject-confirm">Confirm Reject</button>
+      </div>
+      <div id="action-result" style="margin-top: 12px; font-family: var(--mono); font-size: 13px;"></div>
+    </div>
+
+    <div class="card">
+      <div class="card-title">Review File Content</div>
+      <div id="review-file" class="log-viewer" style="max-height: 600px;">Loading...</div>
+    </div>
+  `;
+
+  loadReview();
+
+  document.getElementById('review-approve').addEventListener('click', approveFeature);
+  document.getElementById('review-reject').addEventListener('click', () => {
+    document.getElementById('reject-reason-wrap').style.display = 'block';
+  });
+  document.getElementById('reject-confirm').addEventListener('click', rejectFeature);
+}
+
+async function loadReview() {
+  const contentEl = document.getElementById('review-content');
+  const fileEl = document.getElementById('review-file');
+  const actionsCard = document.getElementById('review-actions-card');
+
+  try {
+    const review = await fetch('/api/review/latest').then(r => r.json());
+
+    if (!review.found) {
+      contentEl.textContent = 'No reviews available yet.';
+      fileEl.textContent = 'Run a code review first.';
+      return;
+    }
+
+    // Verdict panel
+    const isApproved = review.verdict === 'APPROVED';
+    const verdictClass = isApproved ? 'verdict-approved' : 'verdict-rejected';
+    const color = isApproved ? 'var(--green)' : 'var(--red)';
+
+    contentEl.innerHTML = `
+      <div class="verdict-panel ${verdictClass}">
+        <div class="verdict-title" style="color: ${color};">${review.verdict}</div>
+        <div style="color: var(--text-dim); font-size: 12px;">${review.name}</div>
+      </div>
+    `;
+
+    // Show actions if review is complete
+    const status = await fetch('/api/status').then(r => r.json());
+    if (status.stage === 'review_complete') {
+      actionsCard.style.display = 'block';
+    }
+
+    // Full review content
+    fileEl.textContent = review.content;
+
+  } catch (err) {
+    contentEl.textContent = 'Failed to load review.';
+    fileEl.textContent = err.message;
+  }
+}
+
+async function approveFeature() {
+  const resultEl = document.getElementById('action-result');
+  resultEl.innerHTML = '<span class="spinner"></span> Approving...';
+
+  try {
+    const res = await fetch('/api/approve', { method: 'POST' });
+    const data = await res.json();
+    if (data.success) {
+      resultEl.innerHTML = '<span style="color: var(--green);">Feature approved!</span>';
+      window.showToast('Feature approved!', 'success');
+    } else {
+      resultEl.innerHTML = `<span style="color: var(--red);">${data.error}</span>`;
+    }
+  } catch (err) {
+    resultEl.innerHTML = `<span style="color: var(--red);">${err.message}</span>`;
+  }
+}
+
+async function rejectFeature() {
+  const reason = document.getElementById('reject-reason').value.trim() || 'Rejected via web dashboard';
+  const resultEl = document.getElementById('action-result');
+  resultEl.innerHTML = '<span class="spinner"></span> Rejecting...';
+
+  try {
+    const res = await fetch('/api/reject', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ reason }),
+    });
+    const data = await res.json();
+    if (data.success) {
+      resultEl.innerHTML = '<span style="color: var(--yellow);">Feature rejected. Dispatching fixes to Copilot.</span>';
+      window.showToast('Feature rejected', 'error');
+    } else {
+      resultEl.innerHTML = `<span style="color: var(--red);">${data.error}</span>`;
+    }
+  } catch (err) {
+    resultEl.innerHTML = `<span style="color: var(--red);">${err.message}</span>`;
+  }
+}

package/lib/web/public/js/ws-client.js

@@ -0,0 +1,82 @@
+/**
+ * WebSocket client with auto-reconnect.
+ * Dispatches custom events on window for view modules to listen to.
+ */
+
+let ws = null;
+let reconnectTimer = null;
+const RECONNECT_DELAY = 2000;
+
+function connect() {
+  const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+  ws = new WebSocket(`${protocol}://${location.host}/ws`);
+
+  ws.onopen = () => {
+    updateIndicator(true);
+    if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+  };
+
+  ws.onclose = () => {
+    updateIndicator(false);
+    reconnectTimer = setTimeout(connect, RECONNECT_DELAY);
+  };
+
+  ws.onerror = () => ws.close();
+
+  ws.onmessage = (e) => {
+    try {
+      const msg = JSON.parse(e.data);
+      window.dispatchEvent(new CustomEvent('xconn', { detail: msg }));
+
+      // Update header badge on status changes
+      if (msg.type === 'status' && msg.data?.status) {
+        updateHeaderStatus(msg.data.status);
+      }
+      if (msg.type === 'clients') {
+        const el = document.getElementById('footer-clients');
+        if (el) el.textContent = `${msg.data.count} client(s)`;
+      }
+    } catch { /* ignore non-JSON */ }
+  };
+}
+
+function updateIndicator(connected) {
+  const dot = document.getElementById('ws-indicator');
+  if (!dot) return;
+  dot.className = connected ? 'ws-dot ws-connected' : 'ws-dot ws-disconnected';
+  dot.title = connected ? 'Connected' : 'Disconnected';
+}
+
+function updateHeaderStatus(status) {
+  const stageEl = document.getElementById('header-stage');
+  const featEl  = document.getElementById('header-feature');
+  if (stageEl) {
+    const stage = status.stage || 'idle';
+    stageEl.textContent = stage;
+    stageEl.className = 'badge ' + getStageBadgeClass(stage);
+  }
+  if (featEl) {
+    featEl.textContent = status.current_feature || '';
+  }
+}
+
+function getStageBadgeClass(stage) {
+  if (stage === 'idle') return 'badge-idle';
+  if (stage === 'approved') return 'badge-approved';
+  if (stage === 'rejected') return 'badge-rejected';
+  if (stage === 'deployed') return 'badge-deployed';
+  if (stage === 'review_complete') return 'badge-review';
+  return 'badge-progress';
+}
+
+// Export for other modules
+window.xconnWs = { connect };
+
+// Auto-connect on load
+connect();
+
+// Fetch initial status for header
+fetch('/api/status')
+  .then(r => r.json())
+  .then(updateHeaderStatus)
+  .catch(() => {});