bmad-viewer 0.3.4 → 0.3.6

package/.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "bmad-viewer",
+      "runtimeExecutable": "node",
+      "runtimeArgs": ["bin/cli.js", "--path", "C:/code/claude-ideas/notify", "--no-open"],
+      "port": 4000
+    }
+  ]
+}

package/.claude/settings.local.json

@@ -0,0 +1,12 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__Claude_Preview__preview_start",
+      "Read(//c/code/claude-ideas/notify/**)",
+      "Bash(npm install:*)",
+      "Bash(grep -cP '^#{3,4} Story \\\\d+\\\\.\\\\d+' C:/code/claude-ideas/notify/_bmad-output/planning-artifacts/epics-and-stories.md)",
+      "Bash(node -e \":*)",
+      "Bash(timeout 5 node src/server/http-server.js --path C:/code/claude-ideas/notify)"
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bmad-viewer",
-	"version": "0.3.4",
+	"version": "0.3.6",
 	"description": "Visual dashboard for BMAD (Boring Maintainable Agile Development) projects. Wiki browser + sprint status viewer with live reload.",
 	"type": "module",
 	"bin": {
@@ -27,7 +27,7 @@
 		"url": "https://github.com/CamiloValderramaGonzalez/bmad-viewer/issues"
 	},
 	"dependencies": {
-		"bmad-viewer": "^0.3.2",
+		"bmad-viewer": "^0.3.4",
 		"chokidar": "^4.0.1",
 		"fuse.js": "^7.0.0",
 		"js-yaml": "^4.1.0",

package/public/client.js

@@ -500,19 +500,39 @@
 
 	/* ── Path Config Panel ── */
 	function initPathConfig() {
+		var panel = document.getElementById('path-config-panel');
+		if (!panel) return;
+
+		// Toggle collapsed/expanded
+		var toggle = document.getElementById('path-config-toggle');
+		if (toggle) {
+			toggle.addEventListener('click', function () {
+				panel.classList.toggle('path-config-panel--collapsed');
+			});
+		}
+
+		// Load current overrides into inputs
+		fetch('/api/get-paths').then(function (r) { return r.json(); }).then(function (data) {
+			if (data.customOutputPath) { var el = document.getElementById('custom-output-path'); if (el) el.value = data.customOutputPath; }
+			if (data.customEpicsPath) { var el = document.getElementById('custom-epics-path'); if (el) el.value = data.customEpicsPath; }
+			if (data.customSprintStatusPath) { var el = document.getElementById('custom-sprint-status-path'); if (el) el.value = data.customSprintStatusPath; }
+		}).catch(function () {});
+
 		var btn = document.getElementById('apply-paths-btn');
 		if (!btn) return;
 
 		btn.addEventListener('click', function () {
 			var epicsInput = document.getElementById('custom-epics-path');
 			var outputInput = document.getElementById('custom-output-path');
+			var sprintInput = document.getElementById('custom-sprint-status-path');
 			var status = document.getElementById('path-config-status');
 			var payload = {};
 
 			if (outputInput && outputInput.value.trim()) payload.outputPath = outputInput.value.trim();
 			if (epicsInput && epicsInput.value.trim()) payload.epicsPath = epicsInput.value.trim();
+			if (sprintInput && sprintInput.value.trim()) payload.sprintStatusPath = sprintInput.value.trim();
 
-			if (!payload.outputPath && !payload.epicsPath) {
+			if (!payload.outputPath && !payload.epicsPath && !payload.sprintStatusPath) {
 				if (status) { status.textContent = 'Enter at least one path'; status.className = 'path-config-panel__status path-config-panel__status--err'; }
 				return;
 			}

package/public/styles.css

@@ -150,13 +150,17 @@ mark.search-highlight{background:rgba(245,158,11,.4);color:var(--text);border-ra
 .warning-banner{background:rgba(245,158,11,.1);border-bottom:1px solid var(--warning);padding:8px var(--gap)}
 .warning-banner__item{font-size:.85rem;color:var(--text)}
 /* Path config panel */
-.path-config-panel{background:var(--accent-soft);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin-bottom:20px}
-.path-config-panel__header h3{font-size:1rem;margin-bottom:4px}
-.path-config-panel__header p{font-size:.85rem;color:var(--text-muted);margin-bottom:16px}
-.path-config-panel__fields{display:flex;flex-direction:column;gap:12px}
+.path-config-panel{background:var(--accent-soft);border:1px solid var(--border);border-radius:var(--radius);padding:16px 24px;margin-bottom:20px}
+.path-config-panel__toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
+.path-config-panel__toggle h3{font-size:.95rem;margin:0}
+.path-config-panel__arrow{font-size:.75rem;color:var(--text-muted);transition:transform .2s}
+.path-config-panel--collapsed .path-config-panel__fields{display:none}
+.path-config-panel--collapsed .path-config-panel__arrow{transform:rotate(0deg)}
+.path-config-panel:not(.path-config-panel--collapsed) .path-config-panel__arrow{transform:rotate(90deg)}
+.path-config-panel__fields{display:flex;flex-direction:column;gap:12px;margin-top:12px}
 .path-config-panel__label{display:flex;flex-direction:column;gap:4px}
 .path-config-panel__label>span:first-child{font-size:.85rem;font-weight:600}
-.path-config-panel__input{font-family:var(--font-mono);font-size:.85rem;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);width:100%}
+.path-config-panel__input{font-family:var(--font-mono);font-size:.85rem;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);width:100%;box-sizing:border-box}
 .path-config-panel__input:focus{outline:none;border-color:var(--primary)}
 .path-config-panel__hint{font-size:.75rem;color:var(--text-muted)}
 .path-config-panel__btn{align-self:flex-start;padding:8px 20px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;font-size:.85rem;font-weight:600;transition:background .15s}
@@ -165,6 +169,10 @@ mark.search-highlight{background:rgba(245,158,11,.4);color:var(--text);border-ra
 .path-config-panel__status{font-size:.85rem;color:var(--text-muted);align-self:center}
 .path-config-panel__status--ok{color:var(--success)}
 .path-config-panel__status--err{color:var(--warning)}
+/* Bug & pending cards in kanban */
+.kanban-card--bug{border-left:3px solid #e74c3c}
+.kanban-card--global{border-left:3px solid var(--warning)}
+.kanban-card__detail{color:var(--text-muted);font-size:.8rem;margin-bottom:4px}
 /* Responsive */
 @media(max-width:768px){.app-layout{grid-template-columns:1fr}.app-layout__sidebar{max-height:none;position:static;border-right:none;border-bottom:1px solid var(--border)}.kanban{grid-template-columns:1fr}.stats-box{grid-template-columns:repeat(2,1fr)}}
 @media(max-width:440px){.header-bar__shortcut{display:none}.stats-box{grid-template-columns:1fr}.lens-tabs__tab{padding:8px 12px;font-size:.85rem}}

package/src/components/kanban-card.js

@@ -6,12 +6,17 @@ import { Badge } from './badge.js';
  * @param {{id: string, title: string, status: string, epic: string}} props
  * @returns {string} HTML string
  */
-export function KanbanCard({ id, title, status, epic }) {
-	return `<a href="#project/story/${escapeHtml(id)}" class="kanban-card kanban-card--${escapeHtml(status)}" data-id="${escapeHtml(id)}">
+export function KanbanCard({ id, title, status, epic, cardType, detail }) {
+	const typeClass = cardType === 'bug' ? ' kanban-card--bug' : cardType === 'global' ? ' kanban-card--global' : '';
+	const tag = cardType ? 'div' : 'a';
+	const href = cardType ? '' : ` href="#project/story/${escapeHtml(id)}"`;
+	const label = cardType === 'bug' ? escapeHtml(epic) : `Epic ${escapeHtml(epic)}`;
+	return `<${tag}${href} class="kanban-card kanban-card--${escapeHtml(status)}${typeClass}" data-id="${escapeHtml(id)}">
 	<h4 class="kanban-card__title">${escapeHtml(title)}</h4>
+	${detail ? `<div class="kanban-card__detail">${escapeHtml(detail)}</div>` : ''}
 	<div class="kanban-card__meta">
-		${Badge({ status: epic, text: `Epic ${escapeHtml(epic)}` })}
+		${Badge({ status: epic, text: label })}
 		${Badge({ status })}
 	</div>
-</a>`;
+</${tag}>`;
 }

package/src/data/data-model.js

@@ -8,7 +8,7 @@ import { ErrorAggregator } from '../utils/error-aggregator.js';
  * Build the complete in-memory data model from a BMAD project.
  *
  * @param {string} bmadDir - Project root containing _bmad/
- * @param {{customEpicsPath?: string, customOutputPath?: string}} [options] - Optional overrides
+ * @param {{customEpicsPath?: string, customOutputPath?: string, customSprintStatusPath?: string}} [options] - Optional overrides
  * @returns {{wiki: object, project: object, config: object, aggregator: ErrorAggregator}}
  */
 export function buildDataModel(bmadDir, options) {
@@ -17,7 +17,7 @@ export function buildDataModel(bmadDir, options) {
 	const outputPath = options?.customOutputPath || join(bmadDir, '_bmad-output');
 
 	const wiki = buildWikiData(bmadPath, aggregator);
-	const project = buildProjectData(outputPath, aggregator, options?.customEpicsPath);
+	const project = buildProjectData(outputPath, aggregator, options);
 	const config = loadConfig(bmadPath, aggregator);
 
 	return { wiki, project, config, aggregator };
@@ -281,15 +281,18 @@ function readMarkdownSafe(filePath, aggregator) {
  * Build project data from _bmad-output directory.
  * @param {string} outputPath
  * @param {ErrorAggregator} aggregator
- * @param {string} [customEpicsPath] - Optional override path to epics file
+ * @param {{customEpicsPath?: string, customSprintStatusPath?: string}} [options]
  */
-function buildProjectData(outputPath, aggregator, customEpicsPath) {
+function buildProjectData(outputPath, aggregator, options) {
+	const customEpicsPath = options?.customEpicsPath;
 	const project = {
 		sprintStatus: null,
 		stories: { total: 0, pending: 0, inProgress: 0, done: 0 },
 		storyList: [],
 		epics: [],
 		artifacts: [],
+		bugs: [],
+		pendingItems: [],
 	};
 
 	if (!existsSync(outputPath)) {
@@ -297,23 +300,33 @@ function buildProjectData(outputPath, aggregator, customEpicsPath) {
 		return project;
 	}
 
-	// Parse sprint-status.yaml
+	// Parse sprint-status (yaml or md)
 	const sprintStatusPaths = [
 		join(outputPath, 'implementation-artifacts', 'sprint-status.yaml'),
+		join(outputPath, 'implementation-artifacts', 'sprint-status.md'),
 		join(outputPath, 'sprint-status.yaml'),
+		join(outputPath, 'sprint-status.md'),
+		join(outputPath, 'planning-artifacts', 'sprint-status.yaml'),
+		join(outputPath, 'planning-artifacts', 'sprint-status.md'),
 	];
+	if (options?.customSprintStatusPath) {
+		sprintStatusPaths.unshift(options.customSprintStatusPath);
+	}
 
 	for (const statusPath of sprintStatusPaths) {
 		if (existsSync(statusPath)) {
-			const result = parseYaml(statusPath);
-			aggregator.addResult(statusPath, result);
+			let raw = '';
+			try { raw = readFileSync(statusPath, 'utf8'); } catch { /* ignore */ }
 
-			// Read raw YAML to extract epic names from comments
-			let rawYaml = '';
-			try { rawYaml = readFileSync(statusPath, 'utf8'); } catch { /* ignore */ }
-			const epicNames = parseEpicNamesFromComments(rawYaml);
+			// Try YAML format first (only report errors for .yaml files)
+			const result = parseYaml(statusPath);
+			const ext = extname(statusPath).toLowerCase();
+			if (ext === '.yaml' || ext === '.yml') {
+				aggregator.addResult(statusPath, result);
+			}
 
 			if (result.data?.development_status) {
+				const epicNames = parseEpicNamesFromComments(raw);
 				project.sprintStatus = result.data;
 				const status = result.data.development_status;
 				const epicMap = {};
@@ -352,8 +365,13 @@ function buildProjectData(outputPath, aggregator, customEpicsPath) {
 				}
 
 				project.epics = Object.values(epicMap).sort((a, b) => Number(a.num) - Number(b.num));
+				break;
+			}
+
+			// Fallback: try markdown table format (### Epic N: Name + | N.M | desc | status |)
+			if (raw && parseSprintStatusMarkdown(raw, project)) {
+				break;
 			}
-			break;
 		}
 	}
 
@@ -364,6 +382,10 @@ function buildProjectData(outputPath, aggregator, customEpicsPath) {
 		for (const file of files) {
 			const ext = extname(file).toLowerCase();
 			const name = basename(file, ext);
+
+			// Skip sprint-status files (already parsed above)
+			if (name === 'sprint-status') continue;
+
 			const content = ext === '.html'
 				? readHtmlSafe(file)
 				: readMarkdownSafe(file, aggregator);
@@ -381,15 +403,49 @@ function buildProjectData(outputPath, aggregator, customEpicsPath) {
 				const storyContents = parseStoriesFromEpics(content.raw, aggregator);
 				project.storyContents = storyContents;
 
-				// Build epics from markdown when no sprint-status.yaml was found
 				if (project.epics.length === 0) {
+					// No sprint-status found — build epics entirely from markdown
 					project.epics = parseEpicsFromMarkdown(content.raw, storyContents);
-					// Build story stats from epics.md stories
 					for (const epic of project.epics) {
 						project.stories.total += epic.stories.length;
-						project.stories.pending += epic.stories.length; // all backlog by default
+						project.stories.pending += epic.stories.length;
 						project.storyList.push(...epic.stories);
 					}
+				} else {
+					// Merge: add stories from epics.md that are missing in sprint-status
+					const mdEpics = parseEpicsFromMarkdown(content.raw, storyContents);
+					const existingIds = new Set(project.storyList.map(s => `${s.epic}-${s.id.split('-')[1]}`));
+					for (const mdEpic of mdEpics) {
+						let sprintEpic = project.epics.find(e => e.num === mdEpic.num);
+						if (!sprintEpic) {
+							// Entire epic missing from sprint-status — add with all stories as backlog
+							sprintEpic = { ...mdEpic, stories: [], status: 'backlog' };
+							for (const story of mdEpic.stories) {
+								story.status = 'backlog';
+								sprintEpic.stories.push(story);
+								project.storyList.push(story);
+								project.stories.total++;
+								project.stories.pending++;
+							}
+							project.epics.push(sprintEpic);
+							project.epics.sort((a, b) => Number(a.num) - Number(b.num));
+						} else {
+							if (!sprintEpic.name || sprintEpic.name === `Epic ${sprintEpic.num}`) {
+								sprintEpic.name = mdEpic.name;
+							}
+							// Add only stories missing from sprint-status
+							for (const story of mdEpic.stories) {
+								const storyKey = `${mdEpic.num}-${story.id.split('-')[1]}`;
+								if (!existingIds.has(storyKey)) {
+									story.status = 'backlog';
+									sprintEpic.stories.push(story);
+									project.storyList.push(story);
+									project.stories.total++;
+									project.stories.pending++;
+								}
+							}
+						}
+					}
 				}
 			}
 		}
@@ -618,6 +674,113 @@ function parseEpicsFromMarkdown(raw, storyContents) {
 	return Object.values(epicMap).sort((a, b) => Number(a.num) - Number(b.num));
 }
 
+/**
+ * Parse sprint-status from markdown table format.
+ * Expects ### Epic N: Name headers followed by tables with | N.M | description | status |
+ * @returns {boolean} true if data was found
+ */
+function parseSprintStatusMarkdown(raw, project) {
+	const epicHeaderRegex = /^#{2,3}\s*Epic\s+(\d+):\s*(.+)$/gm;
+	const storyRowRegex = /^\|\s*(\d+)\.(\d+)\s*\|\s*(.+?)\s*\|\s*(.+?)\s*\|$/gm;
+
+	// First pass: find all epic headers
+	const epicMap = {};
+	let match;
+	while ((match = epicHeaderRegex.exec(raw)) !== null) {
+		const epicNum = match[1];
+		epicMap[epicNum] = {
+			id: `epic-${epicNum}`,
+			num: epicNum,
+			name: match[2].trim(),
+			status: 'in-progress',
+			stories: [],
+		};
+	}
+
+	if (Object.keys(epicMap).length === 0) return false;
+
+	// Second pass: find all story rows
+	while ((match = storyRowRegex.exec(raw)) !== null) {
+		const epicNum = match[1];
+		const storyNum = match[2];
+		const title = match[3].trim();
+		const rawStatus = match[4].trim();
+
+		// Normalize status from emoji/text to our standard values
+		const status = normalizeMarkdownStatus(rawStatus);
+
+		project.stories.total++;
+		if (status === 'backlog' || status === 'ready-for-dev') project.stories.pending++;
+		else if (status === 'in-progress') project.stories.inProgress++;
+		else if (status === 'done' || status === 'review') project.stories.done++;
+
+		const story = {
+			id: `${epicNum}-${storyNum}-${title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/-+$/, '')}`,
+			title,
+			status,
+			epic: epicNum,
+		};
+		project.storyList.push(story);
+
+		if (!epicMap[epicNum]) {
+			epicMap[epicNum] = { id: `epic-${epicNum}`, num: epicNum, name: `Epic ${epicNum}`, status: 'in-progress', stories: [] };
+		}
+		epicMap[epicNum].stories.push(story);
+	}
+
+	// Determine epic status from stories
+	for (const epic of Object.values(epicMap)) {
+		if (epic.stories.length === 0) continue;
+		const allDone = epic.stories.every(s => s.status === 'done' || s.status === 'review');
+		const anyInProgress = epic.stories.some(s => s.status === 'in-progress');
+		if (allDone) epic.status = 'done';
+		else if (anyInProgress) epic.status = 'in-progress';
+	}
+
+	project.epics = Object.values(epicMap).sort((a, b) => Number(a.num) - Number(b.num));
+
+	// Parse bugs table: | BUG-XXX | desc | epic | status |
+	const bugRowRegex = /^\|\s*(BUG-\d+)\s*\|\s*(.+?)\s*\|\s*(.+?)\s*\|\s*(.+?)\s*\|$/gm;
+	while ((match = bugRowRegex.exec(raw)) !== null) {
+		project.bugs.push({
+			id: match[1],
+			description: match[2].trim(),
+			epic: match[3].trim(),
+			status: normalizeMarkdownStatus(match[4].trim()),
+		});
+	}
+
+	// Parse pendientes globales: - [ ] text or - [✅] text or - [x] text
+	const pendingRegex = /^-\s*\[([^\]]*)\]\s*\*{0,2}(.+?)(?:\*{0,2}\s*[-–—]\s*(.+))?$/gm;
+	while ((match = pendingRegex.exec(raw)) !== null) {
+		const check = match[1].trim();
+		const done = check === '✅' || check.toLowerCase() === 'x';
+		project.pendingItems.push({
+			title: match[2].replace(/\*{1,2}/g, '').trim(),
+			detail: match[3]?.trim() || '',
+			done,
+		});
+	}
+
+	return project.stories.total > 0;
+}
+
+/**
+ * Normalize markdown status text/emojis to standard status values.
+ */
+function normalizeMarkdownStatus(raw) {
+	const lower = raw.toLowerCase();
+	// Strip parenthetical notes for primary status detection
+	const primary = lower.replace(/\(.*?\)/g, '').trim();
+	if (primary.includes('done') || primary.includes('completado') || raw.includes('✅')) return 'done';
+	if (primary.includes('in-progress') || primary.includes('in progress') || primary.includes('en progreso') || raw.includes('🔄')) return 'in-progress';
+	if (primary.includes('review') || primary.includes('revisión') || primary.includes('revision')) return 'review';
+	if (primary.includes('parcial')) return 'in-progress';
+	if (primary.includes('pendiente') || primary.includes('pending') || primary.includes('backlog')) return 'backlog';
+	if (raw.includes('⏳')) return 'in-progress';
+	return 'backlog';
+}
+
 /**
  * Parse epic names from YAML comments like "# Epic 1: Fundación del Proyecto"
  */

package/src/server/http-server.js

@@ -22,7 +22,7 @@ export async function startServer({ port, bmadDir, open }) {
 	const actualPort = await findAvailablePort(port);
 
 	// Custom path overrides (can be set via API)
-	const overrides = { customEpicsPath: null, customOutputPath: null };
+	const overrides = { customEpicsPath: null, customOutputPath: null, customSprintStatusPath: null };
 
 	// Build initial data model
 	let dataModel = buildDataModel(bmadDir, overrides);
@@ -45,6 +45,7 @@ export async function startServer({ port, bmadDir, open }) {
 					const data = JSON.parse(body);
 					if (data.epicsPath !== undefined) overrides.customEpicsPath = data.epicsPath || null;
 					if (data.outputPath !== undefined) overrides.customOutputPath = data.outputPath || null;
+					if (data.sprintStatusPath !== undefined) overrides.customSprintStatusPath = data.sprintStatusPath || null;
 					dataModel = buildDataModel(bmadDir, overrides);
 					res.writeHead(200, { 'Content-Type': 'application/json' });
 					res.end(JSON.stringify({ ok: true, epics: dataModel.project.epics.length, stories: dataModel.project.stories.total }));

package/src/server/renderer.js

@@ -44,32 +44,67 @@ export function renderDashboard(dataModel) {
 	const inProgress = storyList.filter((s) => s.status === 'in-progress');
 	const done = storyList.filter((s) => s.status === 'done' || s.status === 'review');
 
-	const noEpicsNotice = project.epics.length === 0
-		? `<div class="path-config-panel" id="path-config-panel">
-	<div class="path-config-panel__header">
-		<h3>No epics found</h3>
-		<p>Could not auto-detect epics in your project. You can specify custom paths below.</p>
+	const noData = project.epics.length === 0 && project.stories.total === 0;
+	const configPanel = `<div class="path-config-panel${noData ? '' : ' path-config-panel--collapsed'}" id="path-config-panel">
+	<div class="path-config-panel__toggle" id="path-config-toggle">
+		<h3>${noData ? 'No project data found' : 'Custom paths'}</h3>
+		<span class="path-config-panel__arrow" id="path-config-arrow">${noData ? '' : '&#9654;'}</span>
 	</div>
-	<div class="path-config-panel__fields">
+	${noData ? '<p class="path-config-panel__hint" style="margin-bottom:12px">Could not auto-detect epics or sprint status. Specify custom paths below.</p>' : ''}
+	<div class="path-config-panel__fields" id="path-config-fields">
 		<label class="path-config-panel__label">
 			<span>Output folder</span>
-			<input type="text" id="custom-output-path" class="path-config-panel__input" placeholder="e.g. C:\\project\\_bmad-output" />
+			<input type="text" id="custom-output-path" class="path-config-panel__input" placeholder="e.g. /project/_bmad-output" />
 			<span class="path-config-panel__hint">Folder containing planning-artifacts, implementation-artifacts, etc.</span>
 		</label>
 		<label class="path-config-panel__label">
 			<span>Epics file</span>
-			<input type="text" id="custom-epics-path" class="path-config-panel__input" placeholder="e.g. C:\\project\\docs\\epics.md" />
+			<input type="text" id="custom-epics-path" class="path-config-panel__input" placeholder="e.g. /project/docs/epics.md" />
 			<span class="path-config-panel__hint">Markdown file with epic/story definitions (## Epic N: / ### Story N.M:)</span>
 		</label>
+		<label class="path-config-panel__label">
+			<span>Sprint status file</span>
+			<input type="text" id="custom-sprint-status-path" class="path-config-panel__input" placeholder="e.g. /project/sprint-status.yaml" />
+			<span class="path-config-panel__hint">YAML file (.yaml or .md) with development_status section</span>
+		</label>
 		<button class="path-config-panel__btn" id="apply-paths-btn">Apply</button>
 		<span class="path-config-panel__status" id="path-config-status"></span>
 	</div>
-</div>`
-		: '';
+</div>`;
+
+	// Mix bugs and pendientes into kanban columns as cards
+	const pendingGlobal = (project.pendingItems || []).filter(i => !i.done).map(i => ({
+		id: `global-${i.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`,
+		title: i.title,
+		status: 'backlog',
+		epic: 'Global',
+		detail: i.detail,
+		cardType: 'global',
+	}));
+	const doneGlobal = (project.pendingItems || []).filter(i => i.done).map(i => ({
+		id: `global-${i.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`,
+		title: i.title,
+		status: 'done',
+		epic: 'Global',
+		cardType: 'global',
+	}));
+	const bugCards = (project.bugs || []).map(b => ({
+		id: b.id.toLowerCase(),
+		title: b.description,
+		status: b.status,
+		epic: b.id,
+		cardType: 'bug',
+	}));
+	const doneBugs = bugCards.filter(b => b.status === 'done');
+	const activeBugs = bugCards.filter(b => b.status !== 'done');
+
+	const allPending = [...pending, ...pendingGlobal, ...activeBugs.filter(b => b.status === 'backlog')];
+	const allInProgress = [...inProgress, ...activeBugs.filter(b => b.status === 'in-progress')];
+	const allDone = [...done, ...doneBugs, ...doneGlobal];
 
 	const projectContent = `<div id="project-view" hidden>
 	<div id="project-dashboard">
-		${noEpicsNotice}
+		${configPanel}
 		${StatsBox({
 			total: project.stories.total,
 			pending: project.stories.pending,
@@ -78,9 +113,9 @@ export function renderDashboard(dataModel) {
 		})}
 		${ProgressBar({ completed: project.stories.done, total: project.stories.total })}
 		<div class="kanban">
-			${KanbanColumn({ title: 'Pending', stories: pending })}
-			${KanbanColumn({ title: 'In Progress', stories: inProgress })}
-			${KanbanColumn({ title: 'Done', stories: done })}
+			${KanbanColumn({ title: 'Pending', stories: allPending })}
+			${KanbanColumn({ title: 'In Progress', stories: allInProgress })}
+			${KanbanColumn({ title: 'Done', stories: allDone })}
 		</div>
 	</div>
 	<main class="content-area" id="project-content-area" hidden>