test(總覽網頁): 釘住模板結構與兩份正本的規則

模板的檢查重點是「樣式與內容分離」與「全景段落能整段消失」，兩者壞掉時規劃版會
留下空標題或行內樣式散落各處，肉眼不容易發現。

順帶把 work-package 測試的 phase2 切法收斂到第三段之前——原本切到檔尾，第三段
新增的編號清單會混進段落順序的斷言裡。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

test/helpers/prompt-doc.js

@@ -19,9 +19,14 @@ export function readReference(name) {
   return readFileSync(join(repoRoot, 'references', `${name}.md`), 'utf8');
 }
 
-/** 讀一份輸出模板 */
+/** 讀一份輸出模板（markdown） */
 export function readTemplate(name) {
-  return readFileSync(join(repoRoot, 'templates', `${name}.md`), 'utf8');
+  return readTemplateFile(`${name}.md`);
+}
+
+/** 讀 templates/ 底下任一個檔案，含副檔名 */
+export function readTemplateFile(filename) {
+  return readFileSync(join(repoRoot, 'templates', filename), 'utf8');
 }
 
 /**

test/overview-artifact.test.js

@@ -0,0 +1,115 @@
+/**
+ * 圖解版總覽網頁：模板本身，以及兩份正本裡產生它、把網址寫回議題的規則。
+ */
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { readPrompt, readTemplateFile } from './helpers/prompt-doc.js';
+
+const template = readTemplateFile('overview-artifact.html');
+const planPrompt = readPrompt('sdlc-plan');
+const analyzePrompt = readPrompt('sdlc-analyze');
+
+/** 模板要填的欄位 */
+const PLACEHOLDERS = ['標題', '來源議題', '總覽', '目標', '流程圖', '工作包全景', '頁尾'];
+
+// ── 模板 ───────────────────────────────────────────────────────────
+
+test('模板以 {{變數}} 佔位，欄位齊全', () => {
+  const found = new Set([...template.matchAll(/\{\{([^}]+)\}\}/g)].map((m) => m[1]));
+  for (const name of PLACEHOLDERS) {
+    assert.ok(found.has(name), `模板缺少佔位 {{${name}}}`);
+  }
+});
+
+test('樣式與內容分離：樣式集中在 style 區塊，內文不帶 style 屬性', () => {
+  const styleBlocks = template.match(/<style>[\s\S]*?<\/style>/g) ?? [];
+  assert.equal(styleBlocks.length, 1, '樣式應集中在單一 style 區塊');
+
+  const body = template.slice(template.indexOf('<body>'));
+  assert.equal(/\sstyle="/.test(body), false, '內文不該出現行內樣式');
+});
+
+test('是一份可以直接開的完整 HTML', () => {
+  assert.match(template, /^<!DOCTYPE html>/);
+  assert.match(template, /<html lang="zh-Hant">/);
+  assert.match(template, /<meta charset="utf-8">/);
+  assert.match(template, /<meta name="viewport"/, '要能在投影與手機上都看得清楚');
+});
+
+test('深色模式不靠手動切換也能用', () => {
+  assert.match(template, /prefers-color-scheme: dark/);
+});
+
+test('mermaid 圖有被實際渲染，不是把原始碼丟給讀者看', () => {
+  assert.match(template, /mermaid/);
+  assert.match(template, /class="mermaid"/);
+});
+
+test('工作包全景是整段佔位，規劃階段才填得了空字串', () => {
+  // 規劃階段沒有工作包，整段要能消失，所以佔位不可以被包在寫死的 section 裡
+  const line = template.split('\n').find((l) => l.includes('{{工作包全景}}'));
+  assert.equal(line.trim(), '{{工作包全景}}');
+});
+
+// ── sdlc-plan 的步驟 ───────────────────────────────────────────────
+
+test('規劃正本交代了產生總覽與寫回網址', () => {
+  assert.match(planPrompt, /templates\/overview-artifact\.html/);
+  assert.match(planPrompt, /--overview-url/);
+  assert.match(planPrompt, /issue-update/);
+});
+
+test('規劃正本說明流程圖填進模板時不帶圍欄', () => {
+  assert.match(planPrompt, /不\*\*含\*\*圍欄|\*\*不含\*\*圍欄/);
+});
+
+test('規劃階段沒有工作包，正本要說清楚全景填空字串', () => {
+  assert.match(planPrompt, /\{\{工作包全景\}\}/);
+  assert.match(planPrompt, /填空字串/);
+});
+
+test('正本說明這份網頁是給非技術的人看的', () => {
+  assert.match(planPrompt, /非技術/);
+});
+
+// ── sdlc-analyze 的步驟 ────────────────────────────────────────────
+
+test('分析正本的全景圖用 graph TD，並畫出相依與時程', () => {
+  const step = analyzePrompt.slice(analyzePrompt.indexOf('### 11.'));
+  assert.match(step, /graph TD/);
+  assert.match(step, /相依/);
+  assert.match(step, /截止日/);
+});
+
+test('分析正本沿用同一份模板，不另立一份', () => {
+  assert.match(analyzePrompt, /同一份 `templates\/overview-artifact\.html`/);
+});
+
+test('全景圖一樣有節點上限，超過時的做法有交代', () => {
+  const step = analyzePrompt.slice(analyzePrompt.indexOf('### 11.'));
+  assert.match(step, /12/);
+  assert.match(step, /最長路徑/);
+});
+
+test('分析正本說明重跑會就地更新，不會留下兩個連結', () => {
+  const step = analyzePrompt.slice(analyzePrompt.indexOf('### 11.'));
+  assert.match(step, /就地更新/);
+  assert.match(step, /只掛一個總覽網址/);
+});
+
+// ── 兩份共通 ───────────────────────────────────────────────────────
+
+test('兩份正本都指名同一支腳本寫回網址', () => {
+  for (const [name, prompt] of [['sdlc-plan', planPrompt], ['sdlc-analyze', analyzePrompt]]) {
+    assert.match(prompt, /--overview-url/, `${name} 沒有指名寫回網址的方式`);
+  }
+});
+
+test('規劃正本說明連結會自動附上私有提醒', () => {
+  assert.match(planPrompt, /私有/);
+  assert.match(planPrompt, /組織外/);
+});
+
+test('規劃正本強調議題原本的白話總覽不被取代', () => {
+  assert.match(planPrompt, /網頁是補充，不是取代/);
+});

test/work-package-assets.test.js

@@ -17,7 +17,7 @@ import {
 const template = readTemplate('work-package-issue');
 const prompt = readPrompt('sdlc-analyze');
 /** 第二段的內容，避免把第一段的字樣誤認成這一段的規則 */
-const phase2 = prompt.slice(prompt.indexOf('## 第二段'));
+const phase2 = prompt.slice(prompt.indexOf('## 第二段'), prompt.indexOf('## 第三段'));
 
 /** 工作包議題的九個段落，順序即議題裡的順序 */
 const SECTIONS = [