viepilot 1.9.11 → 2.1.0

package/templates/architect/architect-actions.js

@@ -0,0 +1,217 @@
+/**
+ * ViePilot Architect Item Actions (ENH-033)
+ *
+ * Injects per-item Approve / Edit prompt-copy buttons into every element
+ * marked with [data-arch-id] in the Architect HTML workspace.
+ *
+ * ISOLATION RULE: Each action is scoped exclusively to the identified item
+ * on the identified page. Approving one item does NOT imply approval of any
+ * related item on any other page. Cross-page updates require separate prompts.
+ *
+ * Prompt formats:
+ *   APPROVE: [ARCH:{slug}:{id}] APPROVE — "{title}" on {slug} page. No changes needed.
+ *   EDIT:    [ARCH:{slug}:{id}] EDIT — "{title}" on {slug} page. Current: "{excerpt}". What should I change?
+ */
+
+(function () {
+  'use strict';
+
+  // ── Prompt templates ──────────────────────────────────────────────────────
+
+  function approvePrompt(slug, id, title) {
+    return '[ARCH:' + slug + ':' + id + '] APPROVE — "' + title + '" on ' + slug + ' page. No changes needed.';
+  }
+
+  function editPrompt(slug, id, title, excerpt) {
+    var body = excerpt ? ' Current: "' + excerpt + '".' : '';
+    return '[ARCH:' + slug + ':' + id + '] EDIT — "' + title + '" on ' + slug + ' page.' + body + ' What should I change?';
+  }
+
+  // ── Clipboard helper ─────────────────────────────────────────────────────
+
+  function copyText(text, btn) {
+    var original = btn.textContent;
+    function onDone() {
+      btn.textContent = 'Copied!';
+      btn.classList.add('copied');
+      setTimeout(function () {
+        btn.textContent = original;
+        btn.classList.remove('copied');
+      }, 1500);
+    }
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(onDone).catch(function () {
+        legacyCopy(text);
+        onDone();
+      });
+    } else {
+      legacyCopy(text);
+      onDone();
+    }
+  }
+
+  function legacyCopy(text) {
+    var ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0;pointer-events:none;';
+    document.body.appendChild(ta);
+    ta.focus();
+    ta.select();
+    try { document.execCommand('copy'); } catch (e) { /* silent */ }
+    document.body.removeChild(ta);
+  }
+
+  // ── Text extraction ───────────────────────────────────────────────────────
+
+  function getTitle(el) {
+    if (el.dataset.archTitle) return el.dataset.archTitle.trim().slice(0, 80);
+    // Table row: first <td>
+    if (el.tagName === 'TR') {
+      var td = el.querySelector('td');
+      if (td) return td.textContent.trim().slice(0, 80);
+    }
+    // Card/div: heading
+    var h = el.querySelector('h2,h3,h4,h5');
+    if (h) return h.textContent.trim().slice(0, 80);
+    return el.textContent.trim().slice(0, 80);
+  }
+
+  function getExcerpt(el) {
+    if (el.dataset.archExcerpt) return el.dataset.archExcerpt.trim().slice(0, 100);
+    // Table row: second <td>
+    if (el.tagName === 'TR') {
+      var tds = el.querySelectorAll('td');
+      if (tds.length >= 2) return tds[1].textContent.trim().slice(0, 100);
+    }
+    // Card/div: first <p>
+    var p = el.querySelector('p');
+    if (p) return p.textContent.trim().slice(0, 100);
+    return '';
+  }
+
+  // ── Build actions DOM ─────────────────────────────────────────────────────
+
+  function makeActionsEl(slug, id, title, excerpt) {
+    var wrap = document.createElement('div');
+    wrap.className = 'arch-item-actions';
+
+    var badge = document.createElement('span');
+    badge.className = 'arch-id-badge';
+    badge.textContent = id;
+    badge.title = 'Item ID: [ARCH:' + slug + ':' + id + ']';
+
+    var btnApprove = document.createElement('button');
+    btnApprove.className = 'arch-btn arch-btn-approve';
+    btnApprove.textContent = '✅ Approve';
+    btnApprove.title = 'Copy APPROVE prompt — scoped to this item only';
+    btnApprove.type = 'button';
+    btnApprove.addEventListener('click', function (e) {
+      e.stopPropagation();
+      copyText(approvePrompt(slug, id, title), btnApprove);
+    });
+
+    var btnEdit = document.createElement('button');
+    btnEdit.className = 'arch-btn arch-btn-edit';
+    btnEdit.textContent = '✏️ Edit';
+    btnEdit.title = 'Copy EDIT prompt — scoped to this item only';
+    btnEdit.type = 'button';
+    btnEdit.addEventListener('click', function (e) {
+      e.stopPropagation();
+      copyText(editPrompt(slug, id, title, excerpt), btnEdit);
+    });
+
+    wrap.appendChild(badge);
+    wrap.appendChild(btnApprove);
+    wrap.appendChild(btnEdit);
+    return wrap;
+  }
+
+  // ── Inject into page ──────────────────────────────────────────────────────
+
+  function inject() {
+    var slug = (document.body.dataset.archSlug || 'unknown').trim();
+    var items = document.querySelectorAll('[data-arch-id]');
+
+    items.forEach(function (el) {
+      var id = el.dataset.archId;
+      if (!id) return;
+      var title = getTitle(el);
+      var excerpt = getExcerpt(el);
+      var actionsEl = makeActionsEl(slug, id, title, excerpt);
+
+      if (el.tagName === 'TR') {
+        // Ensure thead gets an empty actions header column (once per table)
+        var table = el.closest('table');
+        if (table) {
+          var theadRow = table.querySelector('thead tr');
+          if (theadRow && !theadRow.querySelector('.arch-actions-th')) {
+            var th = document.createElement('th');
+            th.className = 'arch-actions-th';
+            theadRow.appendChild(th);
+          }
+        }
+        var td = document.createElement('td');
+        td.className = 'arch-actions-cell';
+        td.appendChild(actionsEl);
+        el.appendChild(td);
+      } else {
+        // Card / div: insert after first child (heading area)
+        var first = el.firstElementChild;
+        if (first && first.nextSibling) {
+          el.insertBefore(actionsEl, first.nextSibling);
+        } else if (first) {
+          el.appendChild(actionsEl);
+        } else {
+          el.prepend(actionsEl);
+        }
+      }
+    });
+  }
+
+  // ── Stale / gap badge injection (ENH-034) ────────────────────────────────
+  // Items with data-arch-stale="true" get an amber "⚠ gap" badge.
+  // Stale means: brainstorm detected a gap here; HTML not yet synced.
+
+  function injectStaleBadges() {
+    document.querySelectorAll('[data-arch-stale="true"]').forEach(function (el) {
+      var reason = el.getAttribute('data-arch-stale-note') || 'gap detected in brainstorm';
+      var badge = document.createElement('span');
+      badge.className = 'arch-gap-badge';
+      badge.textContent = '⚠ gap';
+      badge.title = reason;
+
+      if (el.tagName === 'TR') {
+        var firstTd = el.querySelector('td');
+        if (firstTd && !firstTd.querySelector('.arch-gap-badge')) {
+          firstTd.appendChild(badge);
+        }
+      } else {
+        var h = el.querySelector('h2,h3,h4');
+        if (h && !h.querySelector('.arch-gap-badge')) {
+          h.appendChild(badge);
+        }
+      }
+    });
+  }
+
+  function markStale(id, reason) {
+    var el = document.querySelector('[data-arch-id="' + id + '"]');
+    if (!el) return;
+    el.setAttribute('data-arch-stale', 'true');
+    if (reason) el.setAttribute('data-arch-stale-note', reason);
+    injectStaleBadges();
+  }
+
+  // Expose for browser console use during architect review sessions
+  window.vpMarkStale = markStale;
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () {
+      inject();
+      injectStaleBadges();
+    });
+  } else {
+    inject();
+    injectStaleBadges();
+  }
+})();

package/templates/architect/architecture.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Architecture — {project}</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body data-arch-slug="architecture">
+  <nav class="nav-sidebar">
+    <div class="logo">
+      <span>ViePilot Architect Mode</span>
+      <strong>{project}</strong>
+    </div>
+    <ul>
+      <li><a href="index.html">🏠 Hub</a></li>
+      <li><a href="architecture.html" class="active">🏗️ Architecture</a></li>
+      <li><a href="sequence-diagram.html">🎬 Sequence</a></li>
+      <li><a href="data-flow.html">🔄 Data Flow</a></li>
+      <li><a href="decisions.html">📋 Decisions (ADR)</a></li>
+      <li><a href="tech-stack.html">🛠️ Tech Stack</a></li>
+      <li><a href="tech-notes.html">📝 Tech Notes</a></li>
+      <li><a href="feature-map.html">🗺️ Feature Map</a></li>
+      <li><a href="erd.html">🗄️ ERD</a></li>
+      <li><a href="user-use-cases.html">👤 Use Cases</a></li>
+      <li><a href="deployment.html">🚀 Deployment</a></li>
+      <li><a href="apis.html">🔌 APIs</a></li>
+    </ul>
+  </nav>
+
+  <main class="main-content">
+    <div class="page-header">
+      <div>
+        <h1>🏗️ System Architecture</h1>
+        <p>Component boundaries and system structure</p>
+      </div>
+      <button id="theme-toggle" onclick="toggleTheme()">☀️ Light</button>
+    </div>
+
+    <div class="card" data-arch-id="ARCH-DIAG1" data-arch-title="C4 Context Diagram">
+      <h2>C4 Context Diagram</h2>
+      <div class="mermaid-wrap">
+        <div class="mermaid">
+C4Context
+    title System Context for {project}
+    Person(user, "User", "A user of the system")
+    System(sys, "{project}", "The main system")
+    System_Ext(ext1, "{External System 1}", "{Description}")
+    System_Ext(ext2, "{External System 2}", "{Description}")
+
+    Rel(user, sys, "Uses")
+    Rel(sys, ext1, "Calls")
+    Rel(sys, ext2, "Integrates with")
+        </div>
+      </div>
+    </div>
+
+    <div class="card" data-arch-id="ARCH-DIAG2" data-arch-title="System Diagram">
+      <h2>System Diagram</h2>
+      <div class="mermaid-wrap">
+        <div class="mermaid">
+graph TD
+    Client["🖥️ Client (Browser/Mobile)"]
+    API["⚙️ API Gateway"]
+    Service1["📦 {Service 1}"]
+    Service2["📦 {Service 2}"]
+    DB["🗄️ Database"]
+    Cache["⚡ Cache"]
+
+    Client --> API
+    API --> Service1
+    API --> Service2
+    Service1 --> DB
+    Service1 --> Cache
+    Service2 --> DB
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <h2>Components</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>Component</th>
+            <th>Responsibility</th>
+            <th>Technology</th>
+            <th>Notes</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-arch-id="C1">
+            <td>{Component 1}</td>
+            <td>{Responsibility}</td>
+            <td>{Technology}</td>
+            <td>{Notes}</td>
+          </tr>
+          <tr data-arch-id="C2">
+            <td>{Component 2}</td>
+            <td>{Responsibility}</td>
+            <td>{Technology}</td>
+            <td>{Notes}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="card">
+      <h2>Service Boundaries</h2>
+      <p style="color:var(--text-muted);font-size:13px;">{Describe service boundaries, communication protocols, data ownership}</p>
+    </div>
+
+    <div class="card">
+      <h2>External Systems</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>System</th>
+            <th>Type</th>
+            <th>Description</th>
+            <th>Integration method</th>
+            <th>Owned by</th>
+            <th>Notes</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-arch-id="C3">
+            <td>{External System 1}</td>
+            <td>{SaaS / Internal / 3rd party}</td>
+            <td>{What it does}</td>
+            <td>{REST / Webhook / SDK}</td>
+            <td>{Team / Vendor}</td>
+            <td>{Notes}</td>
+          </tr>
+          <tr data-arch-id="C4">
+            <td>{External System 2}</td>
+            <td>{SaaS / Internal / 3rd party}</td>
+            <td>{What it does}</td>
+            <td>{REST / Webhook / SDK}</td>
+            <td>{Team / Vendor}</td>
+            <td>{Notes}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <script>
+    mermaid.initialize({ startOnLoad: true, theme: 'dark' });
+    function toggleTheme() {
+      const html = document.documentElement;
+      const isLight = html.classList.toggle('light');
+      document.getElementById('theme-toggle').textContent = isLight ? '🌙 Dark' : '☀️ Light';
+      mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark' });
+    }
+  </script>
+    <script src="architect-actions.js"></script>
+</body>
+</html>

package/templates/architect/data-flow.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Data Flow — {project}</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body data-arch-slug="data-flow">
+  <nav class="nav-sidebar">
+    <div class="logo">
+      <span>ViePilot Architect Mode</span>
+      <strong>{project}</strong>
+    </div>
+    <ul>
+      <li><a href="index.html">🏠 Hub</a></li>
+      <li><a href="architecture.html">🏗️ Architecture</a></li>
+      <li><a href="sequence-diagram.html">🎬 Sequence</a></li>
+      <li><a href="data-flow.html" class="active">🔄 Data Flow</a></li>
+      <li><a href="decisions.html">📋 Decisions (ADR)</a></li>
+      <li><a href="tech-stack.html">🛠️ Tech Stack</a></li>
+      <li><a href="tech-notes.html">📝 Tech Notes</a></li>
+      <li><a href="feature-map.html">🗺️ Feature Map</a></li>
+      <li><a href="erd.html">🗄️ ERD</a></li>
+      <li><a href="user-use-cases.html">👤 Use Cases</a></li>
+      <li><a href="deployment.html">🚀 Deployment</a></li>
+      <li><a href="apis.html">🔌 APIs</a></li>
+    </ul>
+  </nav>
+
+  <main class="main-content">
+    <div class="page-header">
+      <div>
+        <h1>🔄 Data Flow</h1>
+        <p>Request/event flows and sequence diagrams</p>
+      </div>
+      <button id="theme-toggle" onclick="toggleTheme()">☀️ Light</button>
+    </div>
+
+    <div class="card" data-arch-id="DF-DIAG1" data-arch-title="Primary Request Flow">
+      <h2>Primary Request Flow</h2>
+      <div class="mermaid-wrap">
+        <div class="mermaid">
+sequenceDiagram
+    participant C as Client
+    participant A as API Gateway
+    participant S as {Service}
+    participant D as Database
+
+    C->>A: Request {action}
+    A->>A: Auth / Rate limit
+    A->>S: Forward request
+    S->>D: Query/write
+    D-->>S: Result
+    S-->>A: Response
+    A-->>C: Final response
+        </div>
+      </div>
+    </div>
+
+    <div class="card" data-arch-id="DF-DIAG2" data-arch-title="Event Flow (Async)">
+      <h2>Event Flow (Async)</h2>
+      <div class="mermaid-wrap">
+        <div class="mermaid">
+flowchart LR
+    Producer["{Producer}"] -->|event| Queue["{Queue/Topic}"]
+    Queue --> Consumer1["{Consumer 1}"]
+    Queue --> Consumer2["{Consumer 2}"]
+    Consumer1 --> Store["{Data Store}"]
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <h2>Flow Notes</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>Flow</th>
+            <th>Trigger</th>
+            <th>Steps</th>
+            <th>SLA / Notes</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-arch-id="DF1">
+            <td>{Flow name}</td>
+            <td>{Trigger}</td>
+            <td>{Steps}</td>
+            <td>{SLA}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <script>
+    mermaid.initialize({ startOnLoad: true, theme: 'dark' });
+    function toggleTheme() {
+      const html = document.documentElement;
+      const isLight = html.classList.toggle('light');
+      document.getElementById('theme-toggle').textContent = isLight ? '🌙 Dark' : '☀️ Light';
+      mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark' });
+    }
+  </script>
+    <script src="architect-actions.js"></script>
+</body>
+</html>

package/templates/architect/decisions.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Architecture Decisions — {project}</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body data-arch-slug="decisions">
+  <nav class="nav-sidebar">
+    <div class="logo">
+      <span>ViePilot Architect Mode</span>
+      <strong>{project}</strong>
+    </div>
+    <ul>
+      <li><a href="index.html">🏠 Hub</a></li>
+      <li><a href="architecture.html">🏗️ Architecture</a></li>
+      <li><a href="sequence-diagram.html">🎬 Sequence</a></li>
+      <li><a href="data-flow.html">🔄 Data Flow</a></li>
+      <li><a href="decisions.html" class="active">📋 Decisions (ADR)</a></li>
+      <li><a href="tech-stack.html">🛠️ Tech Stack</a></li>
+      <li><a href="tech-notes.html">📝 Tech Notes</a></li>
+      <li><a href="feature-map.html">🗺️ Feature Map</a></li>
+      <li><a href="erd.html">🗄️ ERD</a></li>
+      <li><a href="user-use-cases.html">👤 Use Cases</a></li>
+      <li><a href="deployment.html">🚀 Deployment</a></li>
+      <li><a href="apis.html">🔌 APIs</a></li>
+    </ul>
+  </nav>
+
+  <main class="main-content">
+    <div class="page-header">
+      <div>
+        <h1>📋 Architecture Decisions (ADR)</h1>
+        <p>Decision log — context, options considered, chosen path, rationale</p>
+      </div>
+      <button id="theme-toggle" onclick="toggleTheme()">☀️ Light</button>
+    </div>
+
+    <div class="card">
+      <h2>Decision Log</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Date</th>
+            <th>Decision</th>
+            <th>Options Considered</th>
+            <th>Chosen</th>
+            <th>Rationale</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-updated="true" class="updated" data-arch-id="D1">
+            <td>D001</td>
+            <td>{date}</td>
+            <td>{Topic, e.g. "Database choice"}</td>
+            <td>{option A, option B, option C}</td>
+            <td><strong>{Chosen option}</strong></td>
+            <td>{Rationale}</td>
+            <td><span class="badge badge-decided">Decided</span></td>
+          </tr>
+          <tr data-arch-id="D2">
+            <td>D002</td>
+            <td>{date}</td>
+            <td>{Topic}</td>
+            <td>{options}</td>
+            <td><strong>{Chosen}</strong></td>
+            <td>{Rationale}</td>
+            <td><span class="badge badge-open">Open</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="card">
+      <h2>Legend</h2>
+      <p style="font-size:13px;color:var(--text-muted);">
+        <span class="badge badge-decided">Decided</span> — decision finalized &nbsp;
+        <span class="badge badge-open">Open</span> — needs resolution &nbsp;
+        <span class="badge badge-deferred">Deferred</span> — intentionally postponed
+      </p>
+    </div>
+  </main>
+
+  <script>
+    function toggleTheme() {
+      const html = document.documentElement;
+      const isLight = html.classList.toggle('light');
+      document.getElementById('theme-toggle').textContent = isLight ? '🌙 Dark' : '☀️ Light';
+    }
+  </script>
+    <script src="architect-actions.js"></script>
+</body>
+</html>