bmad-viewer 0.1.7 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bmad-viewer",
-	"version": "0.1.7",
+	"version": "0.2.0",
 	"description": "Visual dashboard for BMAD (Boring Maintainable Agile Development) projects. Wiki browser + sprint status viewer with live reload.",
 	"type": "module",
 	"bin": {
@@ -43,6 +43,8 @@
 	},
 	"keywords": [
 		"bmad",
+		"bmad-method",
+		"bmad-viewer",
 		"agile",
 		"dashboard",
 		"cli",
@@ -51,8 +53,10 @@
 		"sprint",
 		"kanban",
 		"markdown",
-		"project-management"
+		"project-management",
+		"claude-code",
+		"ai-development"
 	],
-	"author": "",
+	"author": "Camilo Valderrama",
 	"license": "MIT"
 }

package/public/client.js

@@ -5,6 +5,7 @@
 	var contentMap = window.__BMAD_CONTENT__ || {};
 	var wikiWelcomeHtml = '';
 	var wikiBreadcrumbHtml = '';
+	var pendingHighlight = null;
 
 	/* ── Hash Router ── */
 	function parseHash() {
@@ -82,6 +83,11 @@
 			});
 			breadcrumb.innerHTML = crumbs.join(' <span class="breadcrumb__sep">&rsaquo;</span> ');
 		}
+
+		if (pendingHighlight) {
+			highlightAndScroll(contentBody, pendingHighlight);
+			pendingHighlight = null;
+		}
 	}
 
 	function loadProjectContent(id) {
@@ -106,6 +112,62 @@
 				' <span class="breadcrumb__sep">&rsaquo;</span> ' +
 				'<span class="breadcrumb__current">' + escapeText(item.name) + '</span>';
 		}
+
+		if (pendingHighlight) {
+			highlightAndScroll(contentBody, pendingHighlight);
+			pendingHighlight = null;
+		}
+	}
+
+	function highlightAndScroll(container, query) {
+		var walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null, false);
+		var q = query.toLowerCase();
+		var firstMark = null;
+
+		var nodesToProcess = [];
+		while (walker.nextNode()) {
+			var node = walker.currentNode;
+			if (node.nodeValue && node.nodeValue.toLowerCase().includes(q)) {
+				nodesToProcess.push(node);
+			}
+		}
+
+		for (var i = 0; i < nodesToProcess.length; i++) {
+			var textNode = nodesToProcess[i];
+			var text = textNode.nodeValue;
+			var idx = text.toLowerCase().indexOf(q);
+			if (idx === -1) continue;
+
+			var before = text.substring(0, idx);
+			var match = text.substring(idx, idx + query.length);
+			var after = text.substring(idx + query.length);
+
+			var mark = document.createElement('mark');
+			mark.className = 'search-highlight';
+			mark.textContent = match;
+
+			var parent = textNode.parentNode;
+			if (before) parent.insertBefore(document.createTextNode(before), textNode);
+			parent.insertBefore(mark, textNode);
+			if (after) parent.insertBefore(document.createTextNode(after), textNode);
+			parent.removeChild(textNode);
+
+			if (!firstMark) firstMark = mark;
+		}
+
+		if (firstMark) {
+			setTimeout(function () {
+				firstMark.scrollIntoView({ behavior: 'smooth', block: 'center' });
+			}, 50);
+
+			// Clear highlights after 4 seconds
+			setTimeout(function () {
+				container.querySelectorAll('mark.search-highlight').forEach(function (el) {
+					var txt = document.createTextNode(el.textContent);
+					el.parentNode.replaceChild(txt, el);
+				});
+			}, 4000);
+		}
 	}
 
 	function showWikiWelcome() {
@@ -190,6 +252,18 @@
 		if (modal) modal.hidden = true;
 	}
 
+	// Cache stripped text for content search
+	var textCache = {};
+	function getPlainText(item) {
+		if (!item._cacheKey) item._cacheKey = item.name + '|' + item.type;
+		if (textCache[item._cacheKey] !== undefined) return textCache[item._cacheKey];
+		var tmp = document.createElement('div');
+		tmp.innerHTML = item.html || '';
+		var text = (tmp.textContent || tmp.innerText || '').toLowerCase();
+		textCache[item._cacheKey] = text;
+		return text;
+	}
+
 	function handleSearch(query) {
 		var results = document.getElementById('search-results');
 		if (!results) return;
@@ -202,20 +276,21 @@
 		var q = query.toLowerCase();
 		var matches = [];
 
-		// Search through content map
+		// Search through content map — name, type, module, group, and body content
 		for (var id in contentMap) {
 			var item = contentMap[id];
 			var nameMatch = (item.name || '').toLowerCase().includes(q);
 			var typeMatch = (item.type || '').toLowerCase().includes(q);
 			var moduleMatch = (item.module || '').toLowerCase().includes(q);
 			var groupMatch = (item.group || '').toLowerCase().includes(q);
+			var contentMatch = !nameMatch && !typeMatch && !moduleMatch && !groupMatch && getPlainText(item).includes(q);
 
-			if (nameMatch || typeMatch || moduleMatch || groupMatch) {
-				matches.push({ id: id, item: item, score: nameMatch ? 1 : 0 });
+			if (nameMatch || typeMatch || moduleMatch || groupMatch || contentMatch) {
+				matches.push({ id: id, item: item, score: nameMatch ? 2 : (contentMatch ? 0 : 1), contentMatch: contentMatch });
 			}
 		}
 
-		// Sort by name match first
+		// Sort: name matches first, then metadata, then content
 		matches.sort(function (a, b) { return b.score - a.score; });
 
 		if (matches.length === 0) {
@@ -233,15 +308,45 @@
 			grouped[type].push(m);
 		});
 
+		var categoryLabels = {
+			'planning': 'Planning', 'research': 'Research', 'analysis': 'Analysis',
+			'test-arch': 'Test Architecture', 'cis': 'CIS Sessions',
+			'bmb-creation': 'BMB Creations', 'diagram': 'Diagrams',
+			'story': 'Stories', 'agent': 'Agents', 'workflow': 'Workflows',
+			'other': 'Other'
+		};
+
 		var html = '';
 		for (var type in grouped) {
-			html += '<div class="search-modal__group-label">' + escapeText(type.charAt(0).toUpperCase() + type.slice(1)) + 's</div>';
+			var groupLabel = categoryLabels[type] || (type.charAt(0).toUpperCase() + type.slice(1) + 's');
+			html += '<div class="search-modal__group-label">' + escapeText(groupLabel) + '</div>';
 			grouped[type].forEach(function (m) {
 				var view = m.id.startsWith('artifact/') || m.id.startsWith('story/') ? 'project' : 'wiki';
+				var subtitle = m.item.module
+					? (m.item.module + (m.item.group ? ' > ' + m.item.group : ''))
+					: (categoryLabels[m.item.type] || m.item.type || '');
+				var snippet = '';
+				if (m.contentMatch) {
+					var text = getPlainText(m.item);
+					var idx = text.indexOf(q);
+					if (idx !== -1) {
+						var start = Math.max(0, idx - 30);
+						var end = Math.min(text.length, idx + q.length + 50);
+						var raw = text.substring(start, end).replace(/\s+/g, ' ');
+						snippet = '<span class="search-modal__result-snippet">' +
+							(start > 0 ? '...' : '') +
+							escapeText(raw.substring(0, idx - start)) +
+							'<mark>' + escapeText(raw.substring(idx - start, idx - start + q.length)) + '</mark>' +
+							escapeText(raw.substring(idx - start + q.length)) +
+							(end < text.length ? '...' : '') +
+							'</span>';
+					}
+				}
 				html +=
-					'<a class="search-modal__result" href="#' + view + '/' + m.id + '">' +
+					'<a class="search-modal__result" href="#' + view + '/' + m.id + '"' + (m.contentMatch ? ' data-content-match="1"' : '') + '>' +
 					'<span class="search-modal__result-title">' + escapeText(m.item.name) + '</span>' +
-					'<span class="search-modal__result-type">' + escapeText((m.item.module || '') + (m.item.group ? ' > ' + m.item.group : '')) + '</span>' +
+					'<span class="search-modal__result-type">' + escapeText(subtitle) + '</span>' +
+					snippet +
 					'</a>';
 			});
 		}
@@ -367,7 +472,13 @@
 		if (searchResults) {
 			searchResults.addEventListener('click', function (e) {
 				var result = e.target.closest('.search-modal__result');
-				if (result) closeSearch();
+				if (result) {
+					if (result.dataset.contentMatch) {
+						var input = document.getElementById('search-input');
+						pendingHighlight = input ? input.value : null;
+					}
+					closeSearch();
+				}
 			});
 		}
 

package/public/styles.css

@@ -136,10 +136,14 @@ body{font-family:var(--font-family);background:var(--bg);color:var(--text);line-
 .search-modal__input{width:100%;padding:16px 20px;border:none;border-bottom:1px solid var(--border);background:transparent;font-size:1.1rem;color:var(--text);outline:none;font-family:var(--font-family)}
 .search-modal__results{max-height:300px;overflow-y:auto}
 .search-modal__group-label{padding:8px 20px 4px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
-.search-modal__result{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;cursor:pointer;text-decoration:none;color:var(--text)}
+.search-modal__result{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;padding:10px 20px;cursor:pointer;text-decoration:none;color:var(--text);gap:2px 8px}
 .search-modal__result:hover{background:var(--accent-soft)}
 .search-modal__result-title{font-weight:500}
 .search-modal__result-type{font-size:.75rem;color:var(--text-muted)}
+.search-modal__result-snippet{width:100%;font-size:.75rem;color:var(--text-muted);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.search-modal__result-snippet mark{background:rgba(245,158,11,.3);color:var(--text);border-radius:2px;padding:0 1px}
+mark.search-highlight{background:rgba(245,158,11,.4);color:var(--text);border-radius:3px;padding:1px 2px;animation:highlight-fade 4s ease-out forwards}
+@keyframes highlight-fade{0%,70%{background:rgba(245,158,11,.4)}100%{background:transparent}}
 .search-modal__no-results{padding:20px;text-align:center;color:var(--text-muted);font-size:.9rem}
 .search-modal__footer{display:flex;gap:16px;padding:10px 20px;border-top:1px solid var(--border);font-size:.75rem;color:var(--text-muted)}
 /* Warning Banner */

package/src/components/sidebar-nav.js

@@ -1,14 +1,25 @@
 import { escapeHtml } from '../utils/html-escape.js';
 
+const CATEGORY_ORDER = [
+	{ key: 'planning', label: 'Planning', icon: '📋' },
+	{ key: 'research', label: 'Research', icon: '🔎' },
+	{ key: 'analysis', label: 'Analysis', icon: '💡' },
+	{ key: 'test-arch', label: 'Test Architecture', icon: '🔧' },
+	{ key: 'cis', label: 'CIS Sessions', icon: '✨' },
+	{ key: 'bmb-creation', label: 'BMB Creations', icon: '🔨' },
+	{ key: 'diagram', label: 'Diagrams', icon: '📊' },
+	{ key: 'other', label: 'Other', icon: '📄' },
+];
+
 /**
  * Render sidebar navigation tree.
  * Wiki lens: Modules > Groups > Items
- * Project lens: Epics with stories + Artifacts section
+ * Project lens: Epics with stories + Artifact categories
  *
- * @param {{modules: Array, artifacts: Array, epics: Array}} props
+ * @param {{modules: Array, artifacts: Array, epics: Array, artifactGroups: object}} props
  * @returns {string} HTML string
  */
-export function SidebarNav({ modules, artifacts, epics }) {
+export function SidebarNav({ modules, artifacts, epics, artifactGroups }) {
 	// Wiki sidebar content
 	const modulesList = (modules || [])
 		.map(
@@ -46,7 +57,7 @@ export function SidebarNav({ modules, artifacts, epics }) {
 		)
 		.join('\n');
 
-	// Project sidebar: Sprint Dashboard link + Epics with stories + Artifacts
+	// Project sidebar: Sprint Dashboard link + Epics with stories + Categorized Artifacts
 	const epicsList = (epics || [])
 		.map(
 			(epic) => `
@@ -74,16 +85,36 @@ export function SidebarNav({ modules, artifacts, epics }) {
 		)
 		.join('\n');
 
-	const artifactsList = (artifacts || [])
-		.map(
-			(art) => `
-		<li class="sidebar-nav__item">
-			<a href="#project/${escapeHtml(art.id)}" class="sidebar-nav__link sidebar-nav__link--artifact" data-id="${escapeHtml(art.id)}">
-				<span class="sidebar-nav__type-icon">${getArtifactIcon(art.name)}</span>
-				${escapeHtml(art.name || 'Untitled')}
-			</a>
-		</li>`,
-		)
+	// Build categorized artifact sections
+	const groups = artifactGroups || {};
+	const categorySections = CATEGORY_ORDER
+		.filter((cat) => groups[cat.key] && groups[cat.key].length > 0)
+		.map((cat) => {
+			const items = groups[cat.key];
+			const itemsHtml = items
+				.map(
+					(art) => `
+				<li class="sidebar-nav__item">
+					<a href="#project/${escapeHtml(art.id)}" class="sidebar-nav__link sidebar-nav__link--artifact" data-id="${escapeHtml(art.id)}">
+						<span class="sidebar-nav__type-icon">${getArtifactIcon(art.name, cat.key)}</span>
+						${escapeHtml(art.name || 'Untitled')}
+					</a>
+				</li>`,
+				)
+				.join('\n');
+
+			return `
+		<li class="sidebar-nav__module">
+			<button class="sidebar-nav__toggle" aria-expanded="false">
+				<span class="sidebar-nav__arrow">&#9656;</span>
+				<span class="sidebar-nav__type-icon">${cat.icon}</span>
+				${escapeHtml(cat.label)} <span class="sidebar-nav__count">${items.length}</span>
+			</button>
+			<ul class="sidebar-nav__items" hidden>
+				${itemsHtml}
+			</ul>
+		</li>`;
+		})
 		.join('\n');
 
 	return `<nav class="sidebar-nav" aria-label="BMAD Navigation">
@@ -99,8 +130,8 @@ export function SidebarNav({ modules, artifacts, epics }) {
 		</a>
 		${epicsList ? `<h2 class="sidebar-nav__heading">Epics</h2>
 		<ul class="sidebar-nav__list">${epicsList}</ul>` : ''}
-		${artifactsList ? `<h2 class="sidebar-nav__heading">Artifacts</h2>
-		<ul class="sidebar-nav__list">${artifactsList}</ul>` : ''}
+		${categorySections ? `<h2 class="sidebar-nav__heading">Artifacts</h2>
+		<ul class="sidebar-nav__list">${categorySections}</ul>` : ''}
 	</div>
 </nav>`;
 }
@@ -118,6 +149,12 @@ function getTypeIcon(type) {
 		case 'story': return '&#128203;';
 		case 'data': return '&#128202;';
 		case 'testarch': return '&#128295;';
+		case 'research': return '&#128270;';
+		case 'analysis': return '&#128161;';
+		case 'test-arch': return '&#128295;';
+		case 'cis': return '&#10024;';
+		case 'bmb-creation': return '&#128296;';
+		case 'diagram': return '&#128202;';
 		default: return '&#128196;';
 	}
 }
@@ -134,9 +171,19 @@ function getEpicStatusIcon(status) {
 }
 
 /**
- * Get icon for artifact by name.
+ * Get icon for artifact by name and category.
  */
-function getArtifactIcon(name) {
+function getArtifactIcon(name, category) {
+	if (category) {
+		switch (category) {
+			case 'research': return '&#128270;';
+			case 'analysis': return '&#128161;';
+			case 'test-arch': return '&#128295;';
+			case 'cis': return '&#10024;';
+			case 'bmb-creation': return '&#128296;';
+			case 'diagram': return '&#128202;';
+		}
+	}
 	const lower = (name || '').toLowerCase();
 	if (lower.includes('prd')) return '&#128220;';
 	if (lower.includes('architecture')) return '&#127959;';

package/src/data/data-model.js

@@ -1,5 +1,5 @@
 import { readdirSync, existsSync, statSync, readFileSync } from 'node:fs';
-import { join, extname, basename } from 'node:path';
+import { join, extname, basename, relative } from 'node:path';
 import { parseYaml } from '../parsers/parse-yaml.js';
 import { parseMarkdownContent } from '../parsers/parse-markdown.js';
 import { ErrorAggregator } from '../utils/error-aggregator.js';
@@ -257,22 +257,27 @@ function buildProjectData(outputPath, aggregator) {
 		}
 	}
 
-	// Scan planning artifacts
+	// Scan planning artifacts (recursive to catch research/ subdir, and include .html files)
 	const planningDir = join(outputPath, 'planning-artifacts');
 	if (existsSync(planningDir)) {
-		const files = scanDirectMarkdownFiles(planningDir);
+		const files = scanFilesRecursive(planningDir, ['.md', '.html']);
 		for (const file of files) {
-			const name = basename(file, '.md');
-			const content = readMarkdownSafe(file, aggregator);
+			const ext = extname(file).toLowerCase();
+			const name = basename(file, ext);
+			const content = ext === '.html'
+				? readHtmlSafe(file)
+				: readMarkdownSafe(file, aggregator);
+			const type = categorizeArtifact(file, outputPath);
 			project.artifacts.push({
 				id: `artifact/${name}`,
 				name: formatName(name),
 				path: file,
+				type,
 				...content,
 			});
 
 			// Parse stories from epics.md
-			if (name === 'epics' && content.raw) {
+			if (name === 'epics' && ext === '.md' && content.raw) {
 				const storyContents = parseStoriesFromEpics(content.raw, aggregator);
 				project.storyContents = storyContents;
 			}
@@ -282,7 +287,6 @@ function buildProjectData(outputPath, aggregator) {
 	// Scan implementation artifact story files (direct .md files in impl dir + stories/ subdir)
 	const implDir = join(outputPath, 'implementation-artifacts');
 	if (existsSync(implDir)) {
-		// Scan direct .md files in implementation-artifacts (story files live here)
 		const implFiles = scanDirectMarkdownFiles(implDir);
 		for (const file of implFiles) {
 			const name = basename(file, '.md');
@@ -296,7 +300,6 @@ function buildProjectData(outputPath, aggregator) {
 			});
 		}
 
-		// Also check stories/ subdirectory if it exists
 		const storyDir = join(implDir, 'stories');
 		if (existsSync(storyDir)) {
 			const files = scanDirectMarkdownFiles(storyDir);
@@ -314,6 +317,84 @@ function buildProjectData(outputPath, aggregator) {
 		}
 	}
 
+	// Scan analysis/ directory
+	const analysisDir = join(outputPath, 'analysis');
+	if (existsSync(analysisDir)) {
+		const files = scanDirectFiles(analysisDir, ['.md']);
+		for (const file of files) {
+			const name = basename(file, '.md');
+			const content = readMarkdownSafe(file, aggregator);
+			project.artifacts.push({
+				id: `artifact/${name}`,
+				name: formatName(name),
+				path: file,
+				type: 'analysis',
+				...content,
+			});
+		}
+	}
+
+	// Scan excalidraw-diagrams/ directory
+	const excalidrawDir = join(outputPath, 'excalidraw-diagrams');
+	if (existsSync(excalidrawDir)) {
+		const files = scanDirectFiles(excalidrawDir, ['.excalidraw']);
+		for (const file of files) {
+			const name = basename(file, '.excalidraw');
+			const content = readExcalidrawSafe(file);
+			project.artifacts.push({
+				id: `artifact/${name}`,
+				name: formatName(name),
+				path: file,
+				type: 'diagram',
+				...content,
+			});
+		}
+	}
+
+	// Scan bmb-creations/ directory (recursive, .md + .yaml)
+	const bmbDir = join(outputPath, 'bmb-creations');
+	if (existsSync(bmbDir)) {
+		const files = scanFilesRecursive(bmbDir, ['.md', '.yaml']);
+		for (const file of files) {
+			const ext = extname(file).toLowerCase();
+			const name = basename(file, ext);
+			const content = ext === '.yaml'
+				? readYamlSafe(file)
+				: readMarkdownSafe(file, aggregator);
+			project.artifacts.push({
+				id: `artifact/${name}`,
+				name: formatName(name),
+				path: file,
+				type: 'bmb-creation',
+				...content,
+			});
+		}
+	}
+
+	// Scan root-level files in _bmad-output/ (CIS sessions, test-arch outputs, etc.)
+	const rootFiles = scanDirectFiles(outputPath, ['.md']);
+	for (const file of rootFiles) {
+		const name = basename(file, '.md');
+		const content = readMarkdownSafe(file, aggregator);
+		const type = categorizeArtifact(file, outputPath);
+		project.artifacts.push({
+			id: `artifact/${name}`,
+			name: formatName(name),
+			path: file,
+			type,
+			...content,
+		});
+	}
+
+	// Build artifactGroups by category (excluding stories which are shown under epics)
+	project.artifactGroups = {};
+	for (const art of project.artifacts) {
+		if (art.type === 'story') continue;
+		const cat = art.type || 'other';
+		if (!project.artifactGroups[cat]) project.artifactGroups[cat] = [];
+		project.artifactGroups[cat].push(art);
+	}
+
 	return project;
 }
 
@@ -448,6 +529,152 @@ function scanDirectMarkdownFiles(dir) {
 	return files.sort();
 }
 
+/**
+ * Scan a directory for direct files matching given extensions (non-recursive).
+ */
+function scanDirectFiles(dir, extensions) {
+	const files = [];
+	try {
+		const entries = readdirSync(dir, { withFileTypes: true });
+		for (const entry of entries) {
+			if (entry.isFile() && extensions.includes(extname(entry.name).toLowerCase())) {
+				files.push(join(dir, entry.name));
+			}
+		}
+	} catch {
+		// Ignore
+	}
+	return files.sort();
+}
+
+/**
+ * Recursively scan a directory for files matching given extensions.
+ */
+function scanFilesRecursive(dir, extensions) {
+	const files = [];
+	try {
+		const entries = readdirSync(dir, { withFileTypes: true });
+		for (const entry of entries) {
+			const fullPath = join(dir, entry.name);
+			if (entry.isDirectory()) {
+				files.push(...scanFilesRecursive(fullPath, extensions));
+			} else if (entry.isFile() && extensions.includes(extname(entry.name).toLowerCase())) {
+				files.push(fullPath);
+			}
+		}
+	} catch {
+		// Ignore
+	}
+	return files.sort();
+}
+
+/**
+ * Read an Excalidraw file and produce an HTML viewer using the Excalidraw React component via CDN.
+ */
+function readExcalidrawSafe(filePath) {
+	try {
+		const raw = readFileSync(filePath, 'utf8');
+		const sceneData = JSON.parse(raw);
+
+		// Escape the JSON for safe embedding in HTML
+		const escapedJson = JSON.stringify(sceneData)
+			.replace(/&/g, '&')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;');
+
+		const html = `<div class="excalidraw-viewer" style="width:100%;height:70vh;border:1px solid var(--border-color,#ddd);border-radius:8px;overflow:hidden;">
+<iframe style="width:100%;height:100%;border:none;" srcdoc="<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8'>
+<style>
+  * { margin:0; padding:0; box-sizing:border-box; }
+  html, body, #root { width:100%; height:100%; }
+  .excalidraw .App-menu_top .buttonList { display:none; }
+</style>
+</head>
+<body>
+<div id='root'></div>
+<script src='https://unpkg.com/react@18/umd/react.production.min.js'><\/script>
+<script src='https://unpkg.com/react-dom@18/umd/react-dom.production.min.js'><\/script>
+<script src='https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.production.min.js'><\/script>
+<script>
+  var scene = JSON.parse(decodeURIComponent(&quot;${encodeURIComponent(JSON.stringify(sceneData))}&quot;));
+  var App = function() {
+    return React.createElement(ExcalidrawLib.Excalidraw, {
+      initialData: { elements: scene.elements || [], appState: { viewBackgroundColor: scene.appState?.viewBackgroundColor || '#ffffff', theme: 'light' }, files: scene.files || {} },
+      viewModeEnabled: true,
+      zenModeEnabled: true,
+      gridModeEnabled: false,
+      UIOptions: { canvasActions: { changeViewBackgroundColor: false, clearCanvas: false, export: false, loadScene: false, saveToActiveFile: false, toggleTheme: false, saveAsImage: false } }
+    });
+  };
+  ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
+<\/script>
+</body>
+</html>"></iframe></div>`;
+
+		return { html, frontmatter: null, raw };
+	} catch {
+		return { html: '<p>Error loading Excalidraw file</p>', frontmatter: null, raw: '' };
+	}
+}
+
+/**
+ * Read an HTML file and embed it in an isolated iframe.
+ */
+function readHtmlSafe(filePath) {
+	try {
+		const raw = readFileSync(filePath, 'utf8');
+		// Escape for srcdoc attribute
+		const escaped = raw
+			.replace(/&/g, '&amp;')
+			.replace(/"/g, '&quot;');
+		const html = `<div class="html-artifact-viewer" style="width:100%;height:80vh;border:1px solid var(--border-color,#ddd);border-radius:8px;overflow:hidden;">
+<iframe style="width:100%;height:100%;border:none;" srcdoc="${escaped}"></iframe></div>`;
+		return { html, frontmatter: null, raw };
+	} catch {
+		return { html: '<p>Error loading HTML file</p>', frontmatter: null, raw: '' };
+	}
+}
+
+/**
+ * Read a YAML file and render it as formatted code block.
+ */
+function readYamlSafe(filePath) {
+	try {
+		const raw = readFileSync(filePath, 'utf8');
+		const escaped = raw.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+		const html = `<pre><code class="language-yaml">${escaped}</code></pre>`;
+		return { html, frontmatter: null, raw };
+	} catch {
+		return { html: '<p>Error loading YAML file</p>', frontmatter: null, raw: '' };
+	}
+}
+
+/**
+ * Categorize an artifact based on its path relative to _bmad-output.
+ */
+function categorizeArtifact(filePath, outputPath) {
+	const rel = relative(outputPath, filePath).replace(/\\/g, '/');
+
+	if (rel.startsWith('planning-artifacts/research/')) return 'research';
+	if (rel.startsWith('planning-artifacts/')) return 'planning';
+	if (rel.startsWith('implementation-artifacts/')) return 'story';
+	if (rel.startsWith('analysis/')) return 'analysis';
+	if (rel.startsWith('excalidraw-diagrams/')) return 'diagram';
+	if (rel.startsWith('bmb-creations/')) return 'bmb-creation';
+
+	// Root-level files — categorize by filename prefix
+	const name = basename(filePath).toLowerCase();
+	if (/^(test-design|test-review|atdd-|automation-|traceability-|gate-decision-|nfr-)/.test(name)) return 'test-arch';
+	if (/^(design-thinking-|innovation-strategy-|problem-solution-|story-)/.test(name)) return 'cis';
+	if (/^brainstorming-/.test(name)) return 'analysis';
+
+	return 'other';
+}
+
 /**
  * Format a kebab-case name to Title Case.
  */

package/src/server/renderer.js

@@ -18,6 +18,7 @@ export function renderDashboard(dataModel) {
 		modules: wiki.modules,
 		artifacts: project.artifacts,
 		epics: project.epics,
+		artifactGroups: project.artifactGroups,
 	});
 
 	// Build content data JSON for client-side rendering