voidforge-build 23.9.1

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

@@ -0,0 +1,217 @@
+/**
+ * Prophecy Visualizer — interactive SVG dependency graph for campaign missions.
+ *
+ * Standalone page now redirects to project dashboard; campaign data loaded via project API.
+ * 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 danger-room.js to call
+  window.renderProphecyGraph = renderGraph;
+})();

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

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Danger Room — VoidForge (Redirecting)</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; align-items: center; justify-content: center; background: var(--bg); color: var(--text); }
+    .redirect-box { text-align: center; max-width: 420px; padding: 32px; }
+    .redirect-box h1 { font-size: 18px; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
+    .redirect-box p { font-size: 14px; color: var(--text-dim); margin-bottom: 16px; }
+    .redirect-box a { color: var(--accent); text-decoration: underline; font-size: 13px; }
+  </style>
+</head>
+<body>
+  <noscript><div class="noscript-msg">VoidForge requires JavaScript to run.</div></noscript>
+  <div class="redirect-box" role="status">
+    <h1>Danger Room</h1>
+    <p id="redirect-message">Redirecting to project dashboard...</p>
+    <p>This standalone page has been replaced by the project dashboard.<br>
+    If you are not redirected, go to the <a href="/lobby.html">lobby</a>.</p>
+  </div>
+  <script src="danger-room.js"></script>
+</body>
+</html>

package/dist/wizard/ui/danger-room.js

@@ -0,0 +1,29 @@
+/**
+ * danger-room.js — Redirect stub (ADR-046)
+ *
+ * The standalone Danger Room page is deprecated (v22.2 M3).
+ * Legacy /api/danger-room/* endpoints have been removed.
+ * This script redirects users to the project dashboard (project.html#danger-room)
+ * or to the lobby if no project ID is available.
+ */
+(function () {
+  'use strict';
+
+  var params = new URLSearchParams(location.search);
+  var projectId = params.get('project');
+
+  var msgEl = document.getElementById('redirect-message');
+  if (msgEl) {
+    msgEl.textContent = projectId
+      ? 'Redirecting to project dashboard...'
+      : 'Redirecting to lobby...';
+  }
+
+  setTimeout(function () {
+    if (projectId) {
+      location.href = '/project.html?id=' + encodeURIComponent(projectId) + '#danger-room';
+    } else {
+      location.href = '/lobby.html';
+    }
+  }, 1000);
+})();

package/dist/wizard/ui/deploy.html

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VoidForge — Deploy Wizard</title>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#wizard-body" class="skip-nav">Skip to main content</a>
+  <noscript><div class="noscript-msg">VoidForge requires JavaScript to run.</div></noscript>
+  <div class="wizard" id="wizard">
+    <header class="wizard-header">
+      <div class="logo">Haku — VoidForge Deploy</div>
+      <div class="progress" id="progress">
+        <div class="progress-bar" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Deploy progress"></div>
+      </div>
+      <div class="step-label" id="step-label">Step 1 of 4</div>
+    </header>
+
+    <main class="wizard-body" id="wizard-body">
+
+      <!-- Step 1: Unlock + Select Project -->
+      <section class="step" id="step-1" data-step="1" aria-labelledby="step-1-heading">
+        <h1 id="step-1-heading">Select Project</h1>
+        <p class="subtitle">Point Haku at a built VoidForge project to provision and deploy.</p>
+
+        <div class="card" id="vault-card">
+          <h2>Unlock Vault</h2>
+          <p>Haku needs your credentials to provision and deploy.</p>
+
+          <div class="field">
+            <label for="vault-password">Vault Password</label>
+            <div class="input-row">
+              <input type="password" id="vault-password" placeholder="Enter your vault password" autocomplete="off">
+              <button class="btn btn-secondary" id="toggle-vault-visibility" type="button" aria-label="Toggle password visibility">Show</button>
+            </div>
+          </div>
+
+          <div class="status-row" id="vault-status" role="status" aria-live="polite"></div>
+          <button class="btn btn-primary" id="unlock-vault" type="button">Unlock Vault</button>
+        </div>
+
+        <div class="card hidden" id="project-card">
+          <h2>Project Directory</h2>
+          <p>Point Haku at a VoidForge project that has been built with <code>/build</code>.</p>
+
+          <div class="field">
+            <label for="project-dir">Project Path</label>
+            <input type="text" id="project-dir" placeholder="/Users/you/Projects/my-app">
+          </div>
+
+          <div class="status-row" id="project-status" role="status" aria-live="polite"></div>
+          <button class="btn btn-primary" id="scan-project" type="button">Scan Project</button>
+        </div>
+      </section>
+
+      <!-- Step 2: Confirm Provisioning -->
+      <section class="step hidden" id="step-2" data-step="2" aria-labelledby="step-2-heading">
+        <h1 id="step-2-heading">Review & Configure</h1>
+        <p class="subtitle" id="provision-subtitle">Confirm your project details before provisioning.</p>
+
+        <div class="card" id="project-summary">
+          <table class="review-table">
+            <tbody>
+              <tr><td class="review-label">Project</td><td id="summary-name"></td></tr>
+              <tr><td class="review-label">Framework</td><td id="summary-framework"></td></tr>
+              <tr><td class="review-label">Database</td><td id="summary-database"></td></tr>
+              <tr>
+                <td class="review-label">Deploy Target</td>
+                <td>
+                  <select id="summary-deploy-select">
+                    <option value="docker">Docker (local)</option>
+                    <option value="vps">AWS VPS (EC2)</option>
+                    <option value="vercel">Vercel</option>
+                    <option value="railway">Railway</option>
+                    <option value="cloudflare">Cloudflare Pages</option>
+                    <option value="static">Static (S3)</option>
+                  </select>
+                </td>
+              </tr>
+              <tr>
+                <td class="review-label">Hostname</td>
+                <td>
+                  <input type="text" id="summary-hostname" placeholder="myapp.com (optional — Cloudflare DNS)">
+                </td>
+              </tr>
+              <tr class="hidden" id="register-domain-row">
+                <td class="review-label">Register Domain</td>
+                <td>
+                  <label class="checkbox-label">
+                    <input type="checkbox" id="summary-register-domain" aria-describedby="register-domain-desc">
+                    <span>Buy this domain via Cloudflare Registrar (~$10-15/year, non-refundable)</span>
+                  </label>
+                  <span id="register-domain-desc" class="sr-only">Purchasing a domain is a non-refundable annual charge billed through Cloudflare Registrar.</span>
+                </td>
+              </tr>
+              <tr class="hidden" id="instance-type-row">
+                <td class="review-label">Instance Type</td>
+                <td>
+                  <select id="summary-instance-type">
+                    <option value="t3.micro">t3.micro — 2 vCPU, 1 GiB (~$8/mo)</option>
+                    <option value="t3.small">t3.small — 2 vCPU, 2 GiB (~$15/mo)</option>
+                    <option value="t3.medium">t3.medium — 2 vCPU, 4 GiB (~$30/mo)</option>
+                    <option value="t3.large">t3.large — 2 vCPU, 8 GiB (~$60/mo)</option>
+                  </select>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="card" id="provision-confirm">
+          <p id="provision-confirm-desc"></p>
+          <div class="btn-row">
+            <button class="btn btn-primary" id="start-provision" type="button">Start Provisioning</button>
+            <button class="btn btn-secondary" id="back-to-project" type="button">Change Project</button>
+          </div>
+        </div>
+      </section>
+
+      <!-- Step 3: Provisioning Log -->
+      <section class="step hidden" id="step-3" data-step="3" aria-labelledby="step-3-heading">
+        <h1 id="step-3-heading">Provisioning</h1>
+        <p class="subtitle" id="provision-log-subtitle">Creating resources...</p>
+
+        <div class="card">
+          <div class="provision-log" id="provision-log" role="log" aria-label="Provisioning progress">
+            <div class="provision-empty" id="provision-empty">Opening portal...</div>
+          </div>
+          <div class="sr-only" id="provision-sr-status" role="status" aria-live="polite"></div>
+        </div>
+
+        <div class="btn-row hidden" id="provision-done-actions">
+          <button class="btn btn-primary" id="provision-next" type="button">Continue</button>
+        </div>
+
+        <div class="btn-row hidden" id="provision-error-actions">
+          <button class="btn btn-primary" id="provision-cleanup" type="button">Clean Up Resources</button>
+          <button class="btn btn-secondary btn-danger-ghost" id="provision-continue" type="button">Continue Without Infrastructure</button>
+        </div>
+      </section>
+
+      <!-- Step 4: Done -->
+      <section class="step hidden" id="step-4" data-step="4" aria-labelledby="step-4-heading">
+        <h1 id="step-4-heading" tabindex="-1">Deploy Complete</h1>
+        <p class="subtitle">Your infrastructure is provisioned and ready to ship.</p>
+
+        <div class="card success-card">
+          <div class="success-icon" aria-hidden="true">&#10003;</div>
+          <div id="done-details"></div>
+        </div>
+
+        <div class="card hidden" id="infra-details-card">
+          <h2>Infrastructure</h2>
+          <div id="infra-details"></div>
+        </div>
+
+        <div class="card">
+          <h2>Deploy Your App</h2>
+          <ol class="next-steps" id="next-steps-list">
+          </ol>
+
+          <div class="btn-row">
+            <button class="btn btn-primary" id="copy-deploy-cmd" type="button">Copy Deploy Command</button>
+          </div>
+        </div>
+      </section>
+
+    </main>
+
+    <footer class="wizard-footer">
+      <button class="btn btn-secondary" id="btn-back" type="button" disabled>Back</button>
+      <button class="btn btn-primary" id="btn-next" type="button">Next</button>
+    </footer>
+  </div>
+
+  <script src="deploy.js"></script>
+</body>
+</html>