thevoidforge 21.0.0 → 21.0.1

package/dist/wizard/ui/war-room-prophecy.js

@@ -0,0 +1,217 @@
+/**
+ * Prophecy Visualizer — interactive SVG dependency graph for campaign missions.
+ *
+ * Reads campaign data from /api/war-room/campaign and renders a node/edge graph.
+ * Nodes = missions. Edges = dependency order. Color = status.
+ * Clickable nodes show mission details.
+ */
+(function () {
+  'use strict';
+
+  // ── Constants ─────────────────────────────────
+
+  var NODE_RADIUS = 24;
+  var NODE_SPACING_X = 120;
+  var NODE_SPACING_Y = 80;
+  var PADDING = 40;
+
+  var STATUS_COLORS = {
+    COMPLETE: '#34d399',
+    ACTIVE: '#fbbf24',
+    BLOCKED: '#ef4444',
+    PENDING: '#555',
+    STRUCTURAL: '#6366f1'
+  };
+
+  var STATUS_LABELS = {
+    COMPLETE: 'Complete',
+    ACTIVE: 'In Progress',
+    BLOCKED: 'Blocked',
+    PENDING: 'Pending',
+    STRUCTURAL: 'Structural'
+  };
+
+  // ── SVG helpers ───────────────────────────────
+
+  function svgEl(tag, attrs) {
+    var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
+    if (attrs) {
+      for (var key in attrs) {
+        if (Object.prototype.hasOwnProperty.call(attrs, key)) {
+          el.setAttribute(key, attrs[key]);
+        }
+      }
+    }
+    return el;
+  }
+
+  function escapeText(str) {
+    var div = document.createElement('div');
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
+  }
+
+  // ── Layout ────────────────────────────────────
+
+  function layoutNodes(missions) {
+    // Simple left-to-right grid layout
+    var cols = Math.ceil(Math.sqrt(missions.length));
+    return missions.map(function (m, i) {
+      var col = i % cols;
+      var row = Math.floor(i / cols);
+      return {
+        mission: m,
+        x: PADDING + col * NODE_SPACING_X + NODE_RADIUS,
+        y: PADDING + row * NODE_SPACING_Y + NODE_RADIUS
+      };
+    });
+  }
+
+  // ── Rendering ─────────────────────────────────
+
+  function renderGraph(container, campaignData) {
+    container.innerHTML = '';
+
+    if (!campaignData || !campaignData.missions || campaignData.missions.length === 0) {
+      container.innerHTML = '<div style="padding:20px;color:var(--text-dim);font-size:13px;">No campaign data — run /campaign to see the prophecy graph.</div>';
+      return;
+    }
+
+    var nodes = layoutNodes(campaignData.missions);
+    var cols = Math.ceil(Math.sqrt(campaignData.missions.length));
+    var rows = Math.ceil(campaignData.missions.length / cols);
+    var svgWidth = PADDING * 2 + cols * NODE_SPACING_X;
+    var svgHeight = PADDING * 2 + rows * NODE_SPACING_Y;
+
+    var svg = svgEl('svg', {
+      viewBox: '0 0 ' + svgWidth + ' ' + svgHeight,
+      width: '100%',
+      height: Math.min(svgHeight, 400) + 'px',
+      role: 'group',
+      'aria-label': 'Campaign mission dependency graph'
+    });
+
+    // Draw edges (sequential dependency: mission N → mission N+1)
+    for (var i = 0; i < nodes.length - 1; i++) {
+      var from = nodes[i];
+      var to = nodes[i + 1];
+      var line = svgEl('line', {
+        x1: from.x,
+        y1: from.y,
+        x2: to.x,
+        y2: to.y,
+        stroke: '#444',
+        'stroke-width': '2',
+        'stroke-dasharray': '4,4'
+      });
+      svg.appendChild(line);
+    }
+
+    // Draw nodes
+    nodes.forEach(function (node) {
+      var m = node.mission;
+      var color = STATUS_COLORS[m.status] || STATUS_COLORS.PENDING;
+      var label = STATUS_LABELS[m.status] || m.status;
+
+      // Node group
+      var g = svgEl('g', {
+        'data-mission': m.number,
+        style: 'cursor:pointer',
+        role: 'button',
+        tabindex: '0',
+        'aria-label': 'Mission ' + m.number + ': ' + escapeText(m.name) + ' — ' + label
+      });
+
+      // Circle
+      var circle = svgEl('circle', {
+        cx: node.x,
+        cy: node.y,
+        r: NODE_RADIUS,
+        fill: color,
+        opacity: '0.2',
+        stroke: color,
+        'stroke-width': '2'
+      });
+      g.appendChild(circle);
+
+      // Mission number
+      var text = svgEl('text', {
+        x: node.x,
+        y: node.y + 1,
+        'text-anchor': 'middle',
+        'dominant-baseline': 'central',
+        fill: color,
+        'font-size': '14',
+        'font-weight': '700'
+      });
+      text.textContent = m.number;
+      g.appendChild(text);
+
+      // Mission name label (below node)
+      var nameText = svgEl('text', {
+        x: node.x,
+        y: node.y + NODE_RADIUS + 14,
+        'text-anchor': 'middle',
+        fill: '#999',
+        'font-size': '9'
+      });
+      // Truncate long names
+      var displayName = m.name.length > 18 ? m.name.substring(0, 16) + '…' : m.name;
+      nameText.textContent = displayName;
+      g.appendChild(nameText);
+
+      // Status dot
+      var statusDot = svgEl('circle', {
+        cx: node.x + NODE_RADIUS - 4,
+        cy: node.y - NODE_RADIUS + 4,
+        r: '4',
+        fill: color
+      });
+      g.appendChild(statusDot);
+
+      // Focus indicator — highlight circle on keyboard focus
+      g.addEventListener('focus', function () { circle.setAttribute('stroke-width', '4'); });
+      g.addEventListener('blur', function () { circle.setAttribute('stroke-width', '2'); });
+
+      // Click handler — show details in the detail panel
+      g.addEventListener('click', function () { showDetail(m); });
+      g.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); showDetail(m); }
+      });
+
+      svg.appendChild(g);
+    });
+
+    container.appendChild(svg);
+
+    // Legend
+    var legend = document.createElement('div');
+    legend.style.cssText = 'display:flex;gap:12px;margin-top:8px;font-size:10px;color:var(--text-dim);flex-wrap:wrap;';
+    Object.keys(STATUS_COLORS).forEach(function (status) {
+      var item = document.createElement('span');
+      item.innerHTML = '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' +
+        STATUS_COLORS[status] + ';margin-right:4px;vertical-align:middle;"></span>' +
+        (STATUS_LABELS[status] || status);
+      legend.appendChild(item);
+    });
+    container.appendChild(legend);
+  }
+
+  // ── Detail panel ──────────────────────────────
+
+  function showDetail(mission) {
+    var panel = document.getElementById('prophecy-detail');
+    if (!panel) return;
+    var color = STATUS_COLORS[mission.status] || STATUS_COLORS.PENDING;
+    var label = STATUS_LABELS[mission.status] || escapeText(mission.status);
+    panel.innerHTML =
+      '<div style="font-weight:700;color:' + color + ';">Mission ' + escapeText(String(mission.number)) + '</div>' +
+      '<div style="margin:4px 0;font-size:13px;">' + escapeText(mission.name) + '</div>' +
+      '<div style="font-size:11px;color:var(--text-dim);">Status: ' + label + '</div>';
+  }
+
+  // ── Init ──────────────────────────────────────
+
+  // Expose render function for the main war-room.js to call
+  window.renderProphecyGraph = renderGraph;
+})();

package/dist/wizard/ui/war-room.html

@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>War Room — VoidForge</title>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg">
+  <link rel="stylesheet" href="styles.css">
+  <style>
+    body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
+
+    /* War Room Layout */
+    .war-room { display: grid; grid-template-columns: 1fr 280px; grid-template-rows: auto 1fr auto; height: 100vh; }
+    .war-room-header { grid-column: 1 / -1; padding: 12px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
+    .war-room-title { font-size: 16px; font-weight: 700; color: var(--accent); }
+    .war-room-version { font-size: 12px; color: var(--text-dim); }
+    .war-room-nav { display: flex; gap: 8px; }
+    .war-room-nav a { color: var(--text-dim); text-decoration: none; font-size: 13px; padding: 4px 10px; border-radius: 4px; }
+    .war-room-nav a:hover { background: var(--bg-card); color: var(--text); }
+
+    /* Main Panel Area */
+    .main-panels { padding: 16px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
+
+    /* Sidebar */
+    .sidebar { border-left: 1px solid var(--border); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
+
+    /* Panel Card */
+    .panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
+    .panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 8px; }
+    .panel-full { grid-column: 1 / -1; }
+
+    /* Campaign Timeline */
+    .timeline { display: flex; gap: 4px; flex-wrap: wrap; }
+    .timeline-item { width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
+    .timeline-complete { background: #065f46; color: #34d399; }
+    .timeline-active { background: #713f12; color: #fbbf24; animation: pulse 2s infinite; }
+    .timeline-pending { background: var(--bg); color: var(--text-dim); border: 1px solid var(--border); }
+    .timeline-blocked { background: #7f1d1d; color: #fca5a5; }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
+
+    /* Phase Pipeline */
+    .pipeline { display: flex; flex-direction: column; gap: 3px; }
+    .pipeline-phase { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
+    .pipeline-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+    .pipeline-dot.complete { background: #34d399; }
+    .pipeline-dot.active { background: #fbbf24; animation: pulse 2s infinite; }
+    .pipeline-dot.pending { background: var(--border); }
+    .pipeline-dot.skipped { background: var(--text-dim); opacity: 0.5; }
+    .pipeline-label { color: var(--text-dim); }
+
+    /* Finding Scoreboard */
+    .scoreboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
+    .score-item { text-align: center; padding: 8px 4px; border-radius: 4px; }
+    .score-critical { background: #7f1d1d; }
+    .score-high { background: #713f12; }
+    .score-medium { background: #1e3a5f; }
+    .score-low { background: #1a2e1a; }
+    .score-count { font-size: 20px; font-weight: 700; }
+    .score-label { font-size: 9px; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; }
+
+    /* Context Gauge */
+    .gauge { position: relative; width: 80px; height: 80px; margin: 0 auto; }
+    .gauge svg { width: 80px; height: 80px; transform: rotate(-90deg); }
+    .gauge-track { fill: none; stroke: var(--border); stroke-width: 6; }
+    .gauge-fill { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.5s, stroke 0.5s; }
+    .gauge-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
+
+    /* Agent Activity Ticker */
+    .ticker { grid-column: 1 / -1; border-top: 1px solid var(--border); padding: 6px 20px; font-size: 11px; color: var(--text-dim); overflow: hidden; white-space: nowrap; }
+    .ticker-item { display: inline; margin-right: 24px; }
+    .ticker-agent { color: var(--accent); font-weight: 600; }
+
+    /* Deploy Status */
+    .deploy-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
+    .deploy-dot { width: 8px; height: 8px; border-radius: 50%; }
+    .deploy-dot.live { background: #34d399; }
+    .deploy-dot.down { background: #ef4444; }
+    .deploy-dot.unknown { background: var(--border); }
+
+    /* Version Badge */
+    .version-badge { font-size: 13px; font-weight: 600; color: var(--accent); }
+    .branch-status { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
+
+    /* Focus management */
+    a:focus-visible, .panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
+
+    /* Responsive — stack on narrow viewports */
+    @media (max-width: 700px) {
+      .war-room { grid-template-columns: 1fr; }
+      .sidebar { border-left: none; border-top: 1px solid var(--border); }
+      .main-panels { grid-template-columns: 1fr; }
+    }
+
+    /* Reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      .timeline-active, .pipeline-dot.active { animation: none; }
+    }
+  </style>
+</head>
+<body>
+  <a href="#war-room-grid" class="skip-nav">Skip to main content</a>
+  <noscript><div class="noscript-msg">VoidForge requires JavaScript to run.</div></noscript>
+  <div class="war-room">
+    <!-- Header -->
+    <header class="war-room-header">
+      <div>
+        <div class="war-room-title">War Room</div>
+        <div class="war-room-version" id="version-display">VoidForge v—</div>
+      </div>
+      <nav class="war-room-nav" aria-label="War Room navigation">
+        <a href="lobby.html">Lobby</a>
+        <a href="war-room.html" aria-current="page" style="background:var(--bg-card);color:var(--text);">War Room</a>
+      </nav>
+    </header>
+
+    <!-- Main Panels -->
+    <main class="main-panels" id="war-room-grid">
+      <!-- Campaign Timeline -->
+      <div class="panel panel-full" role="region" aria-label="Campaign Timeline">
+        <h2 class="panel-title" id="title-timeline">Campaign Timeline</h2>
+        <div class="timeline" id="campaign-timeline" aria-labelledby="title-timeline">
+          <div class="timeline-item timeline-pending">—</div>
+        </div>
+      </div>
+
+      <!-- Phase Pipeline -->
+      <div class="panel" role="region" aria-label="Phase Pipeline">
+        <h2 class="panel-title" id="title-pipeline">Phase Pipeline</h2>
+        <div class="pipeline" id="phase-pipeline">
+          <div class="pipeline-phase"><span class="pipeline-dot pending"></span><span class="pipeline-label">No active build</span></div>
+        </div>
+      </div>
+
+      <!-- Finding Scoreboard -->
+      <div class="panel" role="region" aria-label="Finding Scoreboard">
+        <h2 class="panel-title" id="title-findings">Findings</h2>
+        <div class="scoreboard" id="finding-scoreboard" aria-labelledby="title-findings" role="group">
+          <div class="score-item score-critical"><div class="score-count" id="score-critical">0</div><div class="score-label">Critical</div></div>
+          <div class="score-item score-high"><div class="score-count" id="score-high">0</div><div class="score-label">High</div></div>
+          <div class="score-item score-medium"><div class="score-count" id="score-medium">0</div><div class="score-label">Medium</div></div>
+          <div class="score-item score-low"><div class="score-count" id="score-low">0</div><div class="score-label">Low</div></div>
+        </div>
+      </div>
+
+      <!-- Experiment Dashboard -->
+      <div class="panel" role="region" aria-label="Experiments">
+        <h2 class="panel-title" id="title-experiments">Experiments</h2>
+        <div id="experiment-dashboard" aria-labelledby="title-experiments" style="font-size:13px;color:var(--text-dim);">No experiments</div>
+      </div>
+
+      <!-- PRD Coverage -->
+      <div class="panel panel-full" role="region" aria-label="PRD Coverage">
+        <h2 class="panel-title" id="title-prd">PRD Coverage</h2>
+        <div id="prd-coverage" style="font-size:13px;color:var(--text-dim);">No campaign active</div>
+      </div>
+
+      <!-- Prophecy Graph -->
+      <div class="panel panel-full" role="region" aria-label="Prophecy Graph">
+        <h2 class="panel-title" id="title-prophecy">Prophecy Graph</h2>
+        <div id="prophecy-graph" style="min-height:100px;"></div>
+        <div id="prophecy-detail" style="font-size:12px;margin-top:6px;min-height:40px;color:var(--text-dim);"></div>
+      </div>
+    </main>
+
+    <!-- Sidebar -->
+    <aside class="sidebar">
+      <!-- Context Gauge -->
+      <div class="panel">
+        <h2 class="panel-title">Context Usage</h2>
+        <div class="gauge" id="context-gauge" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Context usage">
+          <svg viewBox="0 0 36 36" role="img" aria-hidden="true">
+            <circle class="gauge-track" cx="18" cy="18" r="14" />
+            <circle class="gauge-fill" cx="18" cy="18" r="14"
+              stroke-dasharray="88" stroke-dashoffset="88"
+              id="gauge-fill" stroke="#34d399" />
+          </svg>
+          <div class="gauge-text" id="gauge-text" aria-live="polite">—%</div>
+        </div>
+      </div>
+
+      <!-- Version & Branch -->
+      <div class="panel">
+        <h2 class="panel-title">Version</h2>
+        <div class="version-badge" id="version-badge">—</div>
+        <div class="branch-status" id="branch-status">—</div>
+      </div>
+
+      <!-- Deploy Status -->
+      <div class="panel">
+        <h2 class="panel-title">Deploy</h2>
+        <div class="deploy-badge" id="deploy-status">
+          <span class="deploy-dot unknown"></span>
+          <span>No deploy data</span>
+        </div>
+      </div>
+
+      <!-- Test Suite -->
+      <div class="panel">
+        <h2 class="panel-title">Tests</h2>
+        <div id="test-status" style="font-size:13px;color:var(--text-dim);">No test data</div>
+      </div>
+
+      <!-- Cost -->
+      <div class="panel">
+        <h2 class="panel-title">Cost</h2>
+        <div id="cost-display" style="font-size:13px;color:var(--text-dim);">No cost data</div>
+      </div>
+    </aside>
+
+    <!-- Agent Activity Ticker -->
+    <footer class="ticker" id="agent-ticker" aria-live="polite" aria-label="Agent activity feed">
+      <span class="ticker-item"><span class="ticker-agent">Sisko</span> standing by...</span>
+    </footer>
+  </div>
+
+  <script src="war-room-prophecy.js"></script>
+  <script src="war-room.js"></script>
+</body>
+</html>