viepilot 1.14.0 → 2.1.0

package/skills/vp-resume/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: vp-resume
-description: "Resume work từ previous session với full context restoration"
+description: "Resume work from previous session with full context restoration"
 version: 0.1.1
 ---
 
@@ -10,7 +10,7 @@ version: 0.1.1
 - Treat all user text after the skill mention as `{{VP_ARGS}}`
 
 ## B. User Prompting
-Prompt user conversationally với options.
+Prompt user conversationally with options.
 
 ## C. Tool Usage
 Use Cursor tools: `Shell`, `ReadFile`, `Glob`, `rg`, `ApplyPatch`, `WebSearch`, `WebFetch`, `Subagent`
@@ -25,12 +25,12 @@ Use Cursor tools: `Shell`, `ReadFile`, `Glob`, `rg`, `ApplyPatch`, `WebSearch`,
 <implementation_routing_guard>
 ## Implementation routing guard (ENH-021)
 
-- **Khôi phục context** — không implement shipping mặc định; tiếp tục **`/vp-auto`** khi có task plan. Xem `workflows/request.md`.
+- **Restore context** — does not implement default shipping; continue with **`/vp-auto`** when a task plan exists. See `workflows/request.md`.
 </implementation_routing_guard>
 
 
 <objective>
-Restore complete project context và resume work seamlessly.
+Restore complete project context and resume work seamlessly.
 
 **Reads:**
 - `.viepilot/HANDOFF.json`

package/skills/vp-rollback/SKILL.md

@@ -25,14 +25,14 @@ Use Cursor tools: `Shell`, `ReadFile`, `Glob`, `rg`, `ApplyPatch`, `WebSearch`,
 <implementation_routing_guard>
 ## Implementation routing guard (ENH-021)
 
-- **Checkpoint / revert** — không thay **`/vp-auto`** cho work mới; sau rollback dùng **`/vp-evolve`** / **`/vp-auto`** theo quy trình. Xem `workflows/request.md`.
+- **Checkpoint / revert** — does not replace **`/vp-auto`** for new work; after rollback use **`/vp-evolve`** / **`/vp-auto`** per workflow. See `workflows/request.md`.
 </implementation_routing_guard>
 
 
 <objective>
-Rollback đến bất kỳ checkpoint nào một cách an toàn, với backup và state preservation.
+Rollback to any checkpoint safely, with backup and state preservation.
 
-**Checkpoints:** Git tags với prefix `vp-`
+**Checkpoints:** Git tags with prefix `vp-`
 - `vp-p{N}-t{M}` - Start of task M in phase N
 - `vp-p{N}-t{M}-done` - Task M complete
 - `vp-p{N}-complete` - Phase N complete

package/skills/vp-status/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: vp-status
-description: "Hiển thị progress dashboard và actionable insights"
+description: "Display progress dashboard and actionable insights"
 version: 0.1.1
 ---
 
@@ -22,12 +22,12 @@ Use Cursor tools: `Shell`, `ReadFile`, `Glob`, `rg`, `ApplyPatch`, `WebSearch`,
 <implementation_routing_guard>
 ## Implementation routing guard (ENH-021)
 
-- **Read-only / dashboard** — không implement shipping; **`/vp-evolve`** → **`/vp-auto`**. Xem `workflows/request.md`.
+- **Read-only / dashboard** — does not implement shipping; **`/vp-evolve`** → **`/vp-auto`**. See `workflows/request.md`.
 </implementation_routing_guard>
 
 
 <objective>
-Hiển thị visual progress dashboard với actionable insights.
+Display a visual progress dashboard with actionable insights.
 
 **Reads:**
 - `.viepilot/TRACKER.md`
@@ -35,7 +35,7 @@ Hiển thị visual progress dashboard với actionable insights.
 - `.viepilot/phases/*/PHASE-STATE.md`
 - `CHANGELOG.md`
 
-**Output:** Dashboard display với next action suggestions.
+**Output:** Dashboard display with next action suggestions.
 </objective>
 
 <process>

package/skills/vp-task/SKILL.md

@@ -22,12 +22,12 @@ Use Cursor tools: `Shell`, `ReadFile`, `Glob`, `rg`, `ApplyPatch`, `WebSearch`,
 <implementation_routing_guard>
 ## Implementation routing guard (ENH-021)
 
-- Skill này **chỉ** quản lý **state/tag/task** trong `.viepilot/` — **không** thay **`/vp-auto`** để implement shipping code. Implement: **`/vp-auto`** hoặc user **explicit** override. Chuỗi plan: **`/vp-evolve`** trước. Xem `workflows/request.md`.
+- This skill **only** manages **state/tag/task** in `.viepilot/` — does **not** replace **`/vp-auto`** for implementing shipping code. To implement: use **`/vp-auto`** or user **explicit** override. Plan chain: **`/vp-evolve`** first. See `workflows/request.md`.
 </implementation_routing_guard>
 
 
 <objective>
-Manual control over tasks khi cần fine-grained management.
+Manual control over tasks when fine-grained management is needed.
 
 **Commands:**
 - `list` - List tasks in current phase

package/skills/vp-ui-components/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: vp-ui-components
-description: "Quản lý workflow sưu tầm và tái sử dụng UI components"
+description: "Manage workflow for collecting and reusing UI components"
 version: 0.1.1
 ---
 
@@ -10,7 +10,7 @@ version: 0.1.1
 - Treat all user text after the skill mention as `{{VP_ARGS}}`
 
 ## B. User Prompting
-Prompt user conversationally với numbered list options.
+Prompt user conversationally with numbered list options.
 
 ## C. Tool Usage
 Use Cursor tools: `Shell`, `ReadFile`, `Glob`, `rg`, `ApplyPatch`, `WebSearch`, `WebFetch`, `Subagent`
@@ -25,23 +25,23 @@ Use Cursor tools: `Shell`, `ReadFile`, `Glob`, `rg`, `ApplyPatch`, `WebSearch`,
 <implementation_routing_guard>
 ## Implementation routing guard (ENH-021)
 
-- **Curation** `ui-components/` + metadata — không implement toàn bộ feature app / framework shipping mặc định; thay đổi lớn **`/vp-evolve`** → **`/vp-auto`**. Xem `workflows/request.md`.
+- **Curation** `ui-components/` + metadata — does not implement full app feature / default framework shipping; large changes go through **`/vp-evolve`** → **`/vp-auto`**. See `workflows/request.md`.
 </implementation_routing_guard>
 
 
 <objective>
-Thu thập, phân loại, và lưu trữ UI components để tái sử dụng:
+Collect, classify, and store UI components for reuse:
 - Global library: `~/.viepilot/ui-components/`
 - Project library: `.viepilot/ui-components/`
 
-Nguồn có thể đến từ prompt/link/snippet (đặc biệt 21st.dev), sau đó chuẩn hóa thành artifacts có metadata.
+Sources can come from prompt/link/snippet (especially 21st.dev), then normalized into artifacts with metadata.
 
 **Creates/Updates:**
 - `~/.viepilot/ui-components/{category}/{component-id}/...`
 - `.viepilot/ui-components/{category}/{component-id}/...`
-- `INDEX.md` cho global + local store
+- `INDEX.md` for global + local store
 
-**After:** Component có thể dùng lại cho `/vp-brainstorm --ui` và `/vp-crystallize`.
+**After:** Component is reusable for `/vp-brainstorm --ui` and `/vp-crystallize`.
 </objective>
 
 <execution_context>
@@ -50,11 +50,11 @@ Nguồn có thể đến từ prompt/link/snippet (đặc biệt 21st.dev), sau
 
 <context>
 Optional flags:
-- `--add` : Add/capture component mới
-- `--list` : Liệt kê component theo category
-- `--sync` : Đồng bộ global ↔ local index
-- `--from-21st` : Ưu tiên flow ingest từ 21st.dev references
-- `--approve` : Mark component status thành approved
+- `--add` : Add/capture new component
+- `--list` : List components by category
+- `--sync` : Sync global ↔ local index
+- `--from-21st` : Prioritize ingest flow from 21st.dev references
+- `--approve` : Mark component status as approved
 </context>
 
 <process>

package/skills/vp-update/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: vp-update
-description: "Nâng cấp package viepilot qua npm (dry-run, --yes, --global) qua vp-tools"
+description: "Upgrade viepilot package via npm (dry-run, --yes, --global) via vp-tools"
 version: 0.1.1
 ---
 
@@ -22,18 +22,18 @@ Use Cursor tools: `Shell`, `ReadFile`, `Glob`, `rg`, `ApplyPatch`, `WebSearch`,
 <implementation_routing_guard>
 ## Implementation routing guard (ENH-021)
 
-- **Nâng cấp ViePilot package** (npm) — không implement feature product trong repo đang làm việc mặc định; feature code qua **`/vp-auto`**. Xem `workflows/request.md`.
+- **Upgrade ViePilot package** (npm) — does not implement product features in the working repo by default; feature code goes through **`/vp-auto`**. See `workflows/request.md`.
 </implementation_routing_guard>
 
 
 <objective>
-Chạy **`vp-tools update`** để lên kế hoạch và (khi được xác nhận) thực thi `npm` nâng cấp `viepilot`.
+Run **`vp-tools update`** to plan and (when confirmed) execute the `npm` upgrade of `viepilot`.
 
-**Ràng buộc an toàn:**
-- **Non-interactive** (CI, agent không TTY): bắt buộc **`--dry-run`** hoặc **`--yes`**; nếu không sẽ exit lỗi.
-- Luôn ưu tiên **`--dry-run`** trước khi apply, trừ khi user đã yêu cầu rõ apply.
+**Safety constraints:**
+- **Non-interactive** (CI, agent without TTY): **`--dry-run`** or **`--yes`** is required; otherwise exits with an error.
+- Always prefer **`--dry-run`** before applying, unless the user has explicitly requested to apply.
 
-**Phân biệt target:** trong repo **không phải** ViePilot nhưng có `node_modules/viepilot`, lệnh có thể cập nhật **local dependency**. Muốn chỉ nâng **global**, thêm **`--global`**.
+**Target distinction:** in a repo that is **not** ViePilot but has `node_modules/viepilot`, the command may update the **local dependency**. To upgrade only the **global** install, add **`--global`**.
 </objective>
 
 <execution_context>
@@ -42,31 +42,31 @@ Chạy **`vp-tools update`** để lên kế hoạch và (khi được xác nh
 
 <process>
 
-### Step 1: Dry run (mặc định khi tự động)
+### Step 1: Dry run (default when automated)
 ```bash
 vp-tools update --dry-run
 ```
-Đọc output: planned npm command, phiên bản hiện tại vs latest, cảnh báo ambiguous/global.
+Read output: planned npm command, current version vs latest, ambiguous/global warnings.
 
-### Step 2: Apply (sau khi user đồng ý hoặc đã yêu cầu rõ)
+### Step 2: Apply (after user confirms or explicitly requests it)
 ```bash
 vp-tools update --yes
 ```
-Hoặc ép global:
+Or force global:
 ```bash
 vp-tools update --global --dry-run
 vp-tools update --global --yes
 ```
 
 ### Step 3: Interactive
-Nếu terminal tương tác và **không** có `--yes`, CLI có thể hỏi xác nhận trước khi chạy npm.
+If the terminal is interactive and **no** `--yes` flag is present, the CLI may prompt for confirmation before running npm.
 
-### Step 4: Rollback gợi ý
-Output dry-run/update thường gợi ý `npm install -g viepilot@<previous>` — giữ phiên bản cũ từ `vp-tools info` nếu cần hoàn tác.
+### Step 4: Suggested rollback
+Dry-run/update output typically suggests `npm install -g viepilot@<previous>` — keep the previous version from `vp-tools info` in case a rollback is needed.
 </process>
 
 <success_criteria>
-- [ ] Không chạy apply trong non-interactive mà thiếu `--yes`
-- [ ] Nêu rõ target (local vs global) khi user đang ở project lạ
-- [ ] Ghi nhận khi đã `already up to date` (no-op thành công)
+- [ ] Do not run apply in non-interactive mode without `--yes`
+- [ ] Clearly state target (local vs global) when user is in an external project
+- [ ] Acknowledge when `already up to date` (successful no-op)
 </success_criteria>

package/templates/architect/apis.html

@@ -6,7 +6,7 @@
   <title>APIs — {project}</title>
   <link rel="stylesheet" href="style.css" />
 </head>
-<body>
+<body data-arch-slug="apis">
   <nav class="nav-sidebar">
     <div class="logo">
       <span>ViePilot Architect Mode</span>
@@ -52,7 +52,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr>
+          <tr data-arch-id="A1">
             <td><span class="badge method-get">GET</span></td>
             <td>/api/resource</td>
             <td>Yes</td>
@@ -61,7 +61,7 @@
             <td>200, 401, 500</td>
             <td>{Notes}</td>
           </tr>
-          <tr>
+          <tr data-arch-id="A2">
             <td><span class="badge method-post">POST</span></td>
             <td>/api/resource</td>
             <td>Yes</td>
@@ -70,7 +70,7 @@
             <td>201, 400, 401</td>
             <td>{Notes}</td>
           </tr>
-          <tr>
+          <tr data-arch-id="A3">
             <td><span class="badge method-put">PUT</span></td>
             <td>/api/resource/:id</td>
             <td>Yes</td>
@@ -79,7 +79,7 @@
             <td>200, 400, 404</td>
             <td>{Notes}</td>
           </tr>
-          <tr>
+          <tr data-arch-id="A4">
             <td><span class="badge method-delete">DELETE</span></td>
             <td>/api/resource/:id</td>
             <td>Yes</td>
@@ -88,7 +88,7 @@
             <td>200, 404</td>
             <td>{Notes}</td>
           </tr>
-          <tr>
+          <tr data-arch-id="A5">
             <td><span class="badge method-patch">PATCH</span></td>
             <td>/api/resource/:id</td>
             <td>Yes</td>
@@ -113,7 +113,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr>
+          <tr data-arch-id="A6">
             <td>API Style</td>
             <td>
               <span class="badge method-get">REST</span>
@@ -124,19 +124,19 @@
             <td>{Rationale}</td>
             <td>{Notes}</td>
           </tr>
-          <tr>
+          <tr data-arch-id="A7">
             <td>Authentication</td>
             <td>{JWT / Session / OAuth2 / API Key}</td>
             <td>{Rationale}</td>
             <td>{Notes}</td>
           </tr>
-          <tr>
+          <tr data-arch-id="A8">
             <td>Versioning</td>
             <td>{URL path / Header / None}</td>
             <td>{Rationale}</td>
             <td>{Notes}</td>
           </tr>
-          <tr>
+          <tr data-arch-id="A9">
             <td>Rate limiting</td>
             <td>{Strategy}</td>
             <td>{Rationale}</td>
@@ -154,5 +154,6 @@
       document.getElementById('theme-toggle').textContent = isLight ? '🌙 Dark' : '☀️ Light';
     }
   </script>
+    <script src="architect-actions.js"></script>
 </body>
 </html>

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

@@ -6,7 +6,7 @@
   <title>Architecture — {project}</title>
   <link rel="stylesheet" href="style.css" />
 </head>
-<body>
+<body data-arch-slug="architecture">
   <nav class="nav-sidebar">
     <div class="logo">
       <span>ViePilot Architect Mode</span>
@@ -37,7 +37,7 @@
       <button id="theme-toggle" onclick="toggleTheme()">☀️ Light</button>
     </div>
 
-    <div class="card">
+    <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">
@@ -55,7 +55,7 @@ C4Context
       </div>
     </div>
 
-    <div class="card">
+    <div class="card" data-arch-id="ARCH-DIAG2" data-arch-title="System Diagram">
       <h2>System Diagram</h2>
       <div class="mermaid-wrap">
         <div class="mermaid">
@@ -89,13 +89,13 @@ graph TD
           </tr>
         </thead>
         <tbody>
-          <tr>
+          <tr data-arch-id="C1">
             <td>{Component 1}</td>
             <td>{Responsibility}</td>
             <td>{Technology}</td>
             <td>{Notes}</td>
           </tr>
-          <tr>
+          <tr data-arch-id="C2">
             <td>{Component 2}</td>
             <td>{Responsibility}</td>
             <td>{Technology}</td>
@@ -124,7 +124,7 @@ graph TD
           </tr>
         </thead>
         <tbody>
-          <tr>
+          <tr data-arch-id="C3">
             <td>{External System 1}</td>
             <td>{SaaS / Internal / 3rd party}</td>
             <td>{What it does}</td>
@@ -132,7 +132,7 @@ graph TD
             <td>{Team / Vendor}</td>
             <td>{Notes}</td>
           </tr>
-          <tr>
+          <tr data-arch-id="C4">
             <td>{External System 2}</td>
             <td>{SaaS / Internal / 3rd party}</td>
             <td>{What it does}</td>
@@ -155,5 +155,6 @@ graph TD
       mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark' });
     }
   </script>
+    <script src="architect-actions.js"></script>
 </body>
 </html>

package/templates/architect/data-flow.html

@@ -6,7 +6,7 @@
   <title>Data Flow — {project}</title>
   <link rel="stylesheet" href="style.css" />
 </head>
-<body>
+<body data-arch-slug="data-flow">
   <nav class="nav-sidebar">
     <div class="logo">
       <span>ViePilot Architect Mode</span>
@@ -37,7 +37,7 @@
       <button id="theme-toggle" onclick="toggleTheme()">☀️ Light</button>
     </div>
 
-    <div class="card">
+    <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">
@@ -58,7 +58,7 @@ sequenceDiagram
       </div>
     </div>
 
-    <div class="card">
+    <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">
@@ -83,7 +83,7 @@ flowchart LR
           </tr>
         </thead>
         <tbody>
-          <tr>
+          <tr data-arch-id="DF1">
             <td>{Flow name}</td>
             <td>{Trigger}</td>
             <td>{Steps}</td>
@@ -104,5 +104,6 @@ flowchart LR
       mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark' });
     }
   </script>
+    <script src="architect-actions.js"></script>
 </body>
 </html>