@sienklogic/plan-build-run 2.17.1 → 2.18.0

package/CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to Plan-Build-Run will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.18.0](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.17.1...plan-build-run-v2.18.0) (2026-02-22)
+
+
+### Features
+
+* **16-01:** redesign dashboard home, fix analytics duration, add bar charts, mermaid dark mode ([9ea3936](https://github.com/SienkLogic/plan-build-run/commit/9ea3936bb5c35305b57250c83e596c4704bc8868))
+* **17-01:** add notes page, verification viewer, milestone progress bars, dynamic footer version ([71625ff](https://github.com/SienkLogic/plan-build-run/commit/71625ff769638be8d75840b48f455a1fe5664b88))
+
+
+### Bug Fixes
+
+* **18-01:** HTMX navigation consistency, SSE tooltip, error page fix, remove deprecated layout ([0f40f3c](https://github.com/SienkLogic/plan-build-run/commit/0f40f3c9de389f7eb33f8eb83c78a0880f485e4e))
+
 ## [2.17.1](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.17.0...plan-build-run-v2.17.1) (2026-02-22)
 
 

package/dashboard/public/css/layout.css

@@ -500,6 +500,15 @@ main > p:first-of-type > a[href="/"]:hover {
   font-size: 0.875rem;
 }
 
+/* --- Stat Values --- */
+.stat-value { font-size: 2rem; font-weight: 700; line-height: 1.2; }
+.stat-unit { font-size: 0.875rem; color: var(--color-dim); margin-left: 0.25rem; }
+
+/* --- Bar Chart --- */
+.bar-chart-row { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
+.bar-chart-label { min-width: 160px; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bar-chart-bar { height: 1.5rem; border-radius: var(--radius-sm); background: var(--pico-primary); color: var(--pico-primary-inverse, #fff); font-size: 0.75rem; display: flex; align-items: center; padding-left: var(--space-sm); min-width: 2rem; transition: width 0.3s ease; }
+
 /* --- Loading Bar --- */
 .loading-bar {
   position: fixed;

package/dashboard/public/js/sse-client.js

@@ -69,6 +69,7 @@
       const dot = document.getElementById('sse-status');
       if (dot) {
         dot.setAttribute('data-connected', String(connected));
+        dot.setAttribute('title', connected ? 'Live updates: connected' : 'Live updates: disconnected');
       }
     }
 

package/dashboard/src/app.js

@@ -9,6 +9,7 @@ import eventsRouter from './routes/events.routes.js';
 import notFoundHandler from './middleware/notFoundHandler.js';
 import errorHandler from './middleware/errorHandler.js';
 import currentPhaseMiddleware from './middleware/current-phase.js';
+import { readFileSync } from 'node:fs';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -35,6 +36,14 @@ export function createApp(config) {
   // Store config for access in routes/services
   app.locals.projectDir = config.projectDir;
 
+  // Read dashboard version from package.json for footer display
+  try {
+    const pkg = JSON.parse(readFileSync(join(__dirname, '..', 'package.json'), 'utf-8'));
+    app.locals.dashboardVersion = pkg.version || '0.0.0';
+  } catch (_e) {
+    app.locals.dashboardVersion = '0.0.0';
+  }
+
   // View engine setup -- all paths use path.join (cross-platform)
   app.set('views', join(__dirname, 'views'));
   app.set('view engine', 'ejs');

package/dashboard/src/routes/index.routes.js

@@ -1,20 +1,23 @@
 import { Router } from 'express';
 import { getHomepage } from '../services/project.service.js';
 import { getDashboardData } from '../services/dashboard.service.js';
+import { listPendingTodos } from '../services/todo.service.js';
 
 const router = Router();
 
 router.get('/', async (req, res) => {
   const projectDir = req.app.locals.projectDir;
 
-  const [homepageData, dashboardData] = await Promise.all([
+  const [homepageData, dashboardData, pendingTodos] = await Promise.all([
     getHomepage(projectDir),
-    getDashboardData(projectDir)
+    getDashboardData(projectDir),
+    listPendingTodos(projectDir).catch(() => [])
   ]);
 
   const templateData = {
     ...homepageData,
     ...dashboardData,
+    pendingTodoCount: pendingTodos.length,
     activePage: 'dashboard',
     currentPath: '/',
     breadcrumbs: []

package/dashboard/src/routes/pages.routes.js

@@ -5,6 +5,7 @@ import { parseStateFile, derivePhaseStatuses } from '../services/dashboard.servi
 import { listPendingTodos, getTodoDetail, createTodo, completeTodo } from '../services/todo.service.js';
 import { getAllMilestones, getMilestoneDetail } from '../services/milestone.service.js';
 import { getProjectAnalytics } from '../services/analytics.service.js';
+import { listNotes } from '../services/notes.service.js';
 
 const router = Router();
 
@@ -81,8 +82,8 @@ router.get('/phases/:phaseId/:planId/:docType', async (req, res) => {
   }
 
   // Validate docType
-  if (docType !== 'plan' && docType !== 'summary') {
-    const err = new Error('Document type must be "plan" or "summary"');
+  if (docType !== 'plan' && docType !== 'summary' && docType !== 'verification') {
+    const err = new Error('Document type must be "plan", "summary", or "verification"');
     err.status = 404;
     throw err;
   }
@@ -91,12 +92,13 @@ router.get('/phases/:phaseId/:planId/:docType', async (req, res) => {
   const doc = await getPhaseDocument(projectDir, phaseId, planId, docType);
 
   if (!doc) {
-    const err = new Error(`${docType === 'plan' ? 'Plan' : 'Summary'} ${planId} not found for phase ${phaseId}`);
+    const labels = { plan: 'Plan', summary: 'Summary', verification: 'Verification' };
+    const err = new Error(`${labels[docType] || docType} ${planId} not found for phase ${phaseId}`);
     err.status = 404;
     throw err;
   }
 
-  const docLabel = docType === 'plan' ? 'Plan' : 'Summary';
+  const docLabel = docType === 'plan' ? 'Plan' : docType === 'verification' ? 'Verification' : 'Summary';
   const templateData = {
     title: `${docLabel} ${planId} — Phase ${phaseId}: ${doc.phaseName}`,
     activePage: 'phases',
@@ -271,13 +273,20 @@ router.post('/todos/:id/done', async (req, res) => {
 
 router.get('/milestones', async (req, res) => {
   const projectDir = req.app.locals.projectDir;
-  const milestoneData = await getAllMilestones(projectDir);
+  const [milestoneData, roadmapData, stateData] = await Promise.all([
+    getAllMilestones(projectDir),
+    getRoadmapData(projectDir),
+    parseStateFile(projectDir)
+  ]);
+
+  const phases = derivePhaseStatuses(roadmapData.phases, stateData.currentPhase);
 
   const templateData = {
     title: 'Milestones',
     activePage: 'milestones',
     currentPath: '/milestones',
     breadcrumbs: [{ label: 'Milestones' }],
+    phases,
     ...milestoneData
   };
 
@@ -368,6 +377,27 @@ router.get('/analytics', async (req, res) => {
   }
 });
 
+router.get('/notes', async (req, res) => {
+  const projectDir = req.app.locals.projectDir;
+  const notes = await listNotes(projectDir);
+
+  const templateData = {
+    title: 'Notes',
+    activePage: 'notes',
+    currentPath: '/notes',
+    breadcrumbs: [{ label: 'Notes' }],
+    notes
+  };
+
+  res.setHeader('Vary', 'HX-Request');
+
+  if (req.get('HX-Request') === 'true') {
+    res.render('partials/notes-content', templateData);
+  } else {
+    res.render('notes', templateData);
+  }
+});
+
 router.get('/roadmap', async (req, res) => {
   const projectDir = req.app.locals.projectDir;
   const [roadmapData, stateData] = await Promise.all([

package/dashboard/src/services/analytics.service.js

@@ -71,9 +71,9 @@ export async function getProjectAnalytics(projectDir) {
     const scopePattern = new RegExp(`\\(${phaseNum}-`);
     const commitCount = allLogLines.filter(line => scopePattern.test(line)).length;
 
-    // Phase duration from git dates
+    // Phase duration from git dates (match commits by scope pattern in message)
     const dateOutput = await git(projectDir, [
-      'log', '--format=%aI', '--', `.planning/phases/${dir.name}/`
+      'log', '--all', `--format=%aI`, `--grep=(${phaseNum}-`
     ]);
     const dates = dateOutput.trim().split('\n').filter(Boolean).map(d => new Date(d));
     let duration = null;
@@ -82,8 +82,6 @@ export async function getProjectAnalytics(projectDir) {
       const latest = new Date(Math.max(...dates));
       const days = Math.round((latest - earliest) / (1000 * 60 * 60 * 24));
       duration = `${days}d`;
-    } else if (dates.length === 1) {
-      duration = '0d';
     }
 
     // Plan count

package/dashboard/src/services/notes.service.js

@@ -0,0 +1,50 @@
+import { readdir } from 'node:fs/promises';
+import { join } from 'node:path';
+import { readMarkdownFile } from '../repositories/planning.repository.js';
+
+/**
+ * List all notes from .planning/notes/*.md, sorted by date descending.
+ *
+ * @param {string} projectDir - Absolute path to the project root
+ * @returns {Promise<Array<{filename: string, title: string, date: string|null, promoted: boolean, html: string}>>}
+ */
+export async function listNotes(projectDir) {
+  const notesDir = join(projectDir, '.planning', 'notes');
+
+  let entries;
+  try {
+    entries = await readdir(notesDir);
+  } catch (err) {
+    if (err.code === 'ENOENT') return [];
+    throw err;
+  }
+
+  const mdFiles = entries.filter(f => f.endsWith('.md')).sort().reverse();
+
+  const results = await Promise.allSettled(
+    mdFiles.map(f => readMarkdownFile(join(notesDir, f)))
+  );
+
+  const notes = [];
+  for (let i = 0; i < mdFiles.length; i++) {
+    const result = results[i];
+    if (result.status !== 'fulfilled') continue;
+
+    const { frontmatter, html } = result.value;
+    const filename = mdFiles[i];
+
+    // Derive title from filename: strip date prefix and extension, title-case
+    const slug = filename.replace(/^\d{4}-\d{2}-\d{2}-/, '').replace(/\.md$/, '');
+    const title = slug.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+
+    notes.push({
+      filename,
+      title,
+      date: frontmatter.date || null,
+      promoted: !!frontmatter.promoted,
+      html
+    });
+  }
+
+  return notes;
+}

package/dashboard/src/services/phase.service.js

@@ -202,9 +202,14 @@ export async function getPhaseDocument(projectDir, phaseId, planId, docType) {
 
   // Try plan ID-prefixed filename first, then fall back to plain PLAN.md
   // Supports both "01-01-PLAN.md" and "PLAN.md" naming conventions
-  const fileNames = docType === 'plan'
-    ? [`${planId}-PLAN.md`, 'PLAN.md']
-    : [`SUMMARY-${planId}.md`];
+  let fileNames;
+  if (docType === 'plan') {
+    fileNames = [`${planId}-PLAN.md`, 'PLAN.md'];
+  } else if (docType === 'verification') {
+    fileNames = ['VERIFICATION.md'];
+  } else {
+    fileNames = [`SUMMARY-${planId}.md`];
+  }
 
   for (const fileName of fileNames) {
     const filePath = validatePath(phaseFullPath, fileName);

package/dashboard/src/views/error.ejs

@@ -13,7 +13,7 @@
   </details>
   <% } %>
   <div class="error-card__action">
-    <a href="javascript:history.back()">Go back</a> | <a href="/">Return to Dashboard</a>
+    <button onclick="history.back()" class="outline">Go back</button> | <a href="/">Return to Dashboard</a>
   </div>
 </div>
 

package/dashboard/src/views/notes.ejs

@@ -0,0 +1,5 @@
+<%- include('partials/layout-top', { title: 'Notes', activePage: 'notes' }) %>
+
+<%- include('partials/notes-content') %>
+
+<%- include('partials/layout-bottom') %>

package/dashboard/src/views/partials/analytics-content.ejs

@@ -12,19 +12,23 @@
 <div class="grid">
   <article>
     <header>Total Commits</header>
-    <strong style="font-size: 2rem;"><%= analytics.summary.totalCommits %></strong>
+    <strong class="stat-value"><%= analytics.summary.totalCommits %></strong>
+    <span class="stat-unit">commits</span>
   </article>
   <article>
     <header>Total Phases</header>
-    <strong style="font-size: 2rem;"><%= analytics.summary.totalPhases %></strong>
+    <strong class="stat-value"><%= analytics.summary.totalPhases %></strong>
+    <span class="stat-unit">phases</span>
   </article>
   <article>
     <header>Avg Duration</header>
-    <strong style="font-size: 2rem;"><%= analytics.summary.avgDuration %></strong>
+    <strong class="stat-value"><%= analytics.summary.avgDuration %></strong>
+    <span class="stat-unit">days</span>
   </article>
   <article>
     <header>Lines Changed</header>
-    <strong style="font-size: 2rem;"><%= analytics.summary.totalLinesChanged.toLocaleString() %></strong>
+    <strong class="stat-value"><%= analytics.summary.totalLinesChanged.toLocaleString() %></strong>
+    <span class="stat-unit">lines</span>
   </article>
 </div>
 <% } %>
@@ -64,6 +68,21 @@
     </table>
   </div>
 </article>
+
+<% const maxCommits = Math.max(...analytics.phases.map(p => p.commitCount), 1); %>
+<article>
+  <header>Commits by Phase</header>
+  <div style="padding: var(--space-md) var(--space-lg);">
+    <% analytics.phases.sort((a, b) => a.phaseId.localeCompare(b.phaseId)).forEach(phase => { %>
+    <div class="bar-chart-row">
+      <span class="bar-chart-label"><%= phase.phaseId %> - <%= phase.phaseName %></span>
+      <div class="bar-chart-bar" style="width: <%= (phase.commitCount / maxCommits * 100) %>%">
+        <%= phase.commitCount %>
+      </div>
+    </div>
+    <% }) %>
+  </div>
+</article>
 <% } else if (typeof analytics === 'undefined' || !analytics.summary) { %>
 <%- include('empty-state', { icon: '📊', title: 'No analytics data available', action: '' }) %>
 <% } else { %>

package/dashboard/src/views/partials/dashboard-content.ejs

@@ -1,73 +1,79 @@
 <%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
 <h1><%= projectName %></h1>
 
-<!-- Project Overview Card -->
-<article>
-  <header>
-    <strong>Current Phase</strong>
-  </header>
-  <% if (currentPhase.id > 0) { %>
-    <p>
-      <span class="status-badge" data-status="in-progress">Phase <%= currentPhase.id %></span>
-      <%= currentPhase.name %>
-    </p>
-    <p><small><%= currentPhase.planStatus %></small></p>
-  <% } else { %>
-    <p>No active phase. Project has not started yet.</p>
-  <% } %>
+<!-- Hero Stat Row -->
+<div class="grid">
+  <!-- Current Phase -->
+  <article>
+    <header><strong>Current Phase</strong></header>
+    <% if (currentPhase.id > 0) { %>
+      <p class="stat-value">
+        <a href="/phases/<%= String(currentPhase.id).padStart(2, '0') %>"
+           hx-get="/phases/<%= String(currentPhase.id).padStart(2, '0') %>"
+           hx-target="#main-content"
+           hx-push-url="true">
+          <span class="status-badge" data-status="in-progress">Phase <%= currentPhase.id %></span>
+          <%= currentPhase.name %>
+        </a>
+      </p>
+    <% } else { %>
+      <p class="stat-value">No active phase</p>
+    <% } %>
+  </article>
 
-  <% if (lastActivity.date) { %>
-    <p><small>Last activity: <%= lastActivity.date %> &mdash; <%= lastActivity.description %></small></p>
-  <% } %>
-</article>
+  <!-- Progress -->
+  <article>
+    <header><strong>Progress</strong></header>
+    <p class="stat-value"><%= progress %>%</p>
+    <progress value="<%= progress %>" max="100"></progress>
+  </article>
 
-<!-- Overall Progress -->
-<article>
-  <header>
-    <strong>Overall Progress</strong>
-  </header>
-  <progress value="<%= progress %>" max="100"></progress>
-  <p><%= progress %>% complete (<%= phases.filter(p => p.status === 'complete').length %> of <%= phases.length %> phases)</p>
-</article>
+  <!-- Pending Todos -->
+  <article>
+    <header><strong>Pending Todos</strong></header>
+    <p class="stat-value">
+      <a href="/todos"
+         hx-get="/todos"
+         hx-target="#main-content"
+         hx-push-url="true">
+        <%= typeof pendingTodoCount !== 'undefined' ? pendingTodoCount : 0 %>
+      </a>
+    </p>
+  </article>
 
-<!-- Phase List -->
-<article>
-  <header>
-    <strong>All Phases</strong>
-  </header>
-  <% if (phases.length > 0) { %>
-    <div class="table-wrap">
-    <table>
-      <thead>
-        <tr>
-          <th scope="col">Phase</th>
-          <th scope="col">Name</th>
-          <th scope="col">Description</th>
-          <th scope="col">Status</th>
-        </tr>
-      </thead>
-      <tbody>
-        <% phases.forEach(function(phase) { %>
-        <tr>
-          <td><%= String(phase.id).padStart(2, '0') %></td>
-          <td><a href="/phases/<%= String(phase.id).padStart(2, '0') %>"><%= phase.name %></a></td>
-          <td><%= phase.description %></td>
-          <td>
-            <span class="status-badge" data-status="<%= phase.status %>">
-              <%= phase.status.replace('-', ' ') %>
-            </span>
-          </td>
-        </tr>
-        <% }); %>
-      </tbody>
-    </table>
-    </div>
-  <% } else { %>
-    <p>No phases found. Add a ROADMAP.md file to your .planning/ directory to see phases here.</p>
-  <% } %>
-</article>
+  <!-- Last Activity -->
+  <article>
+    <header><strong>Last Activity</strong></header>
+    <% if (lastActivity.date) { %>
+      <p class="stat-value"><%= lastActivity.date %></p>
+      <p><small><%= lastActivity.description %></small></p>
+    <% } else { %>
+      <p class="stat-value">None</p>
+    <% } %>
+  </article>
+</div>
+
+<!-- Quick Actions -->
+<div>
+  <% var phaseId = String(currentPhase.id).padStart(2, '0'); %>
+  <a role="button" class="outline"
+     href="/phases/<%= phaseId %>"
+     hx-get="/phases/<%= phaseId %>"
+     hx-target="#main-content"
+     hx-push-url="true">Current Phase</a>
+  <a role="button" class="outline"
+     href="/roadmap"
+     hx-get="/roadmap"
+     hx-target="#main-content"
+     hx-push-url="true">Roadmap</a>
+  <a role="button" class="outline"
+     href="/todos/new"
+     hx-get="/todos/new"
+     hx-target="#main-content"
+     hx-push-url="true">Create Todo</a>
+</div>
 
-<!-- README Content (if available) -->
+<!-- Project Notes (if available) -->
 <% if (content && content !== '<p>No project README found.</p>') { %>
 <article>
   <header>

package/dashboard/src/views/partials/dependencies-content.ejs

@@ -12,5 +12,37 @@
 
 <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
 <script>
-  mermaid.initialize({ startOnLoad: true, theme: 'default', securityLevel: 'loose' });
+  (function() {
+    function detectDark() {
+      var explicit = document.documentElement.dataset.theme;
+      if (explicit) return explicit === 'dark';
+      return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    var mermaidTheme = detectDark() ? 'dark' : 'default';
+
+    // Store original source before mermaid processes it
+    document.querySelectorAll('.mermaid').forEach(function(el) {
+      el.dataset.source = el.textContent;
+    });
+
+    mermaid.initialize({ startOnLoad: true, theme: mermaidTheme, securityLevel: 'loose' });
+
+    // Watch for theme changes and re-render
+    var observer = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+        if (mutation.attributeName === 'data-theme') {
+          var newTheme = detectDark() ? 'dark' : 'default';
+          mermaid.initialize({ startOnLoad: false, theme: newTheme, securityLevel: 'loose' });
+          document.querySelectorAll('.mermaid').forEach(function(el) {
+            if (el.dataset.source) {
+              el.removeAttribute('data-processed');
+              el.innerHTML = el.dataset.source;
+            }
+          });
+          mermaid.run();
+        }
+      });
+    });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+  })();
 </script>

package/dashboard/src/views/partials/footer.ejs

@@ -1,3 +1,3 @@
 <footer>
-  <small>PBR Dashboard v0.1.0</small>
+  <small>PBR Dashboard v<%= typeof dashboardVersion !== 'undefined' ? dashboardVersion : '0.1.0' %></small>
 </footer>

package/dashboard/src/views/partials/header.ejs

@@ -8,7 +8,7 @@
     </ul>
     <ul>
       <li>
-        <span id="sse-status" data-connected="false" aria-label="SSE connection status"></span>
+        <span id="sse-status" data-connected="false" aria-label="SSE connection status" title="Live updates: disconnected"></span>
       </li>
       <li>
         <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">🌙</button>

package/dashboard/src/views/partials/milestones-content.ejs

@@ -3,7 +3,11 @@
 
 <% if (active.length > 0) { %>
 <h2>Active</h2>
-<% active.forEach(function(m) { %>
+<% active.forEach(function(m) {
+  var msPhases = (typeof phases !== 'undefined' && phases) ? phases.filter(function(p) { return p.id >= m.startPhase && p.id <= m.endPhase; }) : [];
+  var totalPhases = msPhases.length;
+  var completedPhases = msPhases.filter(function(p) { return p.status === 'complete'; }).length;
+%>
 <article>
   <header>
     <strong><%= m.name %></strong>
@@ -12,6 +16,10 @@
   <p>
     Phases <%= m.startPhase %> &ndash; <%= m.endPhase %>
   </p>
+  <% if (totalPhases > 0) { %>
+  <progress value="<%= completedPhases %>" max="<%= totalPhases %>"></progress>
+  <p><small><%= completedPhases %> of <%= totalPhases %> phases complete</small></p>
+  <% } %>
 </article>
 <% }); %>
 <% } %>

package/dashboard/src/views/partials/notes-content.ejs

@@ -0,0 +1,23 @@
+<%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
+<h1>Notes</h1>
+
+<% if (notes.length === 0) { %>
+<%- include('empty-state', { icon: 'N', title: 'No notes yet', action: 'Use /pbr:note to create project notes.' }) %>
+<% } else { %>
+<% notes.forEach(function(note) { %>
+<article>
+  <header>
+    <strong><%= note.title %></strong>
+    <% if (note.promoted) { %>
+      &nbsp; <span class="status-badge" data-status="complete">promoted</span>
+    <% } %>
+    <% if (note.date) { %>
+      <small style="float:right"><%= note.date %></small>
+    <% } %>
+  </header>
+  <div class="markdown-body">
+    <%- note.html %>
+  </div>
+</article>
+<% }); %>
+<% } %>

package/dashboard/src/views/partials/phase-content.ejs

@@ -1,7 +1,7 @@
 <%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
 <h1>Phase <%= phaseId %>: <%= phaseName %></h1>
 
-<p><a href="/">&larr; Back to Dashboard</a></p>
+<p><a href="/phases" hx-get="/phases" hx-target="#main-content" hx-push-url="true">&larr; Back to Phases</a></p>
 
 <% if (verification) { %>
 <!-- Verification Summary Card -->
@@ -73,6 +73,9 @@
     <% if (plan.summary) { %>
       &nbsp;|&nbsp; <a href="/phases/<%= phaseId %>/<%= plan.planId %>/summary">View Summary</a>
     <% } %>
+    <% if (verification) { %>
+      &nbsp;|&nbsp; <a href="/phases/<%= phaseId %>/<%= plan.planId %>/verification">View Verification</a>
+    <% } %>
   </p>
 
   <% if (plan.summary) { %>

package/dashboard/src/views/partials/phase-doc-content.ejs

@@ -1,5 +1,5 @@
 <%
-  var docLabel = docType === 'plan' ? 'Plan' : 'Summary';
+  var docLabel = docType === 'plan' ? 'Plan' : docType === 'verification' ? 'Verification' : 'Summary';
 %>
 <%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
 <h1><%= docLabel %> <%= planId %></h1>

package/dashboard/src/views/partials/phases-content.ejs

@@ -61,7 +61,10 @@
       <tr>
         <td><%= String(phase.id).padStart(2, '0') %></td>
         <td>
-          <a href="/phases/<%= String(phase.id).padStart(2, '0') %>">
+          <a href="/phases/<%= String(phase.id).padStart(2, '0') %>"
+             hx-get="/phases/<%= String(phase.id).padStart(2, '0') %>"
+             hx-target="#main-content"
+             hx-push-url="true">
             <%= phase.name %>
           </a>
         </td>
@@ -97,7 +100,10 @@
       <tr>
         <td><%= String(phase.id).padStart(2, '0') %></td>
         <td>
-          <a href="/phases/<%= String(phase.id).padStart(2, '0') %>">
+          <a href="/phases/<%= String(phase.id).padStart(2, '0') %>"
+             hx-get="/phases/<%= String(phase.id).padStart(2, '0') %>"
+             hx-target="#main-content"
+             hx-push-url="true">
             <%= phase.name %>
           </a>
         </td>

package/dashboard/src/views/partials/roadmap-content.ejs

@@ -67,7 +67,10 @@
       <tr>
         <td><%= String(phase.id).padStart(2, '0') %></td>
         <td>
-          <a href="/phases/<%= String(phase.id).padStart(2, '0') %>">
+          <a href="/phases/<%= String(phase.id).padStart(2, '0') %>"
+             hx-get="/phases/<%= String(phase.id).padStart(2, '0') %>"
+             hx-target="#main-content"
+             hx-push-url="true">
             <%= phase.name %>
           </a>
         </td>
@@ -80,7 +83,10 @@
         <td>
           <% if (phase.dependencies && phase.dependencies.length > 0) { %>
             <% phase.dependencies.forEach(function(dep, idx) { %>
-              <a href="/phases/<%= String(dep).padStart(2, '0') %>"><%= String(dep).padStart(2, '0') %></a><% if (idx < phase.dependencies.length - 1) { %>, <% } %>
+              <a href="/phases/<%= String(dep).padStart(2, '0') %>"
+                 hx-get="/phases/<%= String(dep).padStart(2, '0') %>"
+                 hx-target="#main-content"
+                 hx-push-url="true"><%= String(dep).padStart(2, '0') %></a><% if (idx < phase.dependencies.length - 1) { %>, <% } %>
             <% }); %>
           <% } else { %>
             <small>None</small>
@@ -113,7 +119,10 @@
       <tr>
         <td><%= String(phase.id).padStart(2, '0') %></td>
         <td>
-          <a href="/phases/<%= String(phase.id).padStart(2, '0') %>">
+          <a href="/phases/<%= String(phase.id).padStart(2, '0') %>"
+             hx-get="/phases/<%= String(phase.id).padStart(2, '0') %>"
+             hx-target="#main-content"
+             hx-push-url="true">
             <%= phase.name %>
           </a>
         </td>
@@ -126,7 +135,10 @@
         <td>
           <% if (phase.dependencies && phase.dependencies.length > 0) { %>
             <% phase.dependencies.forEach(function(dep, idx) { %>
-              <a href="/phases/<%= String(dep).padStart(2, '0') %>"><%= String(dep).padStart(2, '0') %></a><% if (idx < phase.dependencies.length - 1) { %>, <% } %>
+              <a href="/phases/<%= String(dep).padStart(2, '0') %>"
+                 hx-get="/phases/<%= String(dep).padStart(2, '0') %>"
+                 hx-target="#main-content"
+                 hx-push-url="true"><%= String(dep).padStart(2, '0') %></a><% if (idx < phase.dependencies.length - 1) { %>, <% } %>
             <% }); %>
           <% } else { %>
             <small>None</small>

package/dashboard/src/views/partials/sidebar.ejs

@@ -71,6 +71,14 @@
             Todos
           </a>
         </li>
+        <li>
+          <a href="/notes"
+             hx-get="/notes"
+             hx-target="#main-content"
+             hx-push-url="true"<%= typeof activePage !== 'undefined' && activePage === 'notes' ? ' aria-current="page"' : '' %>>
+            Notes
+          </a>
+        </li>
       </ul>
     </details>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sienklogic/plan-build-run",
-  "version": "2.17.1",
+  "version": "2.18.0",
   "description": "Plan it, Build it, Run it — structured development workflow for Claude Code",
   "keywords": [
     "claude-code",

package/plugins/copilot-pbr/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "pbr",
   "displayName": "Plan-Build-Run",
-  "version": "2.17.1",
+  "version": "2.18.0",
   "description": "Plan-Build-Run — Structured development workflow for GitHub Copilot CLI. Solves context rot through disciplined agent delegation, structured planning, atomic execution, and goal-backward verification.",
   "author": {
     "name": "SienkLogic",

package/plugins/cursor-pbr/.cursor-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "pbr",
   "displayName": "Plan-Build-Run",
-  "version": "2.17.1",
+  "version": "2.18.0",
   "description": "Plan-Build-Run — Structured development workflow for Cursor. Solves context rot through disciplined subagent delegation, structured planning, atomic execution, and goal-backward verification.",
   "author": {
     "name": "SienkLogic",

package/plugins/pbr/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "pbr",
-  "version": "2.17.1",
+  "version": "2.18.0",
   "description": "Plan-Build-Run — Structured development workflow for Claude Code. Solves context rot through disciplined subagent delegation, structured planning, atomic execution, and goal-backward verification.",
   "author": {
     "name": "SienkLogic",

package/dashboard/src/views/layout.ejs

@@ -1 +0,0 @@
-<%# This file is deprecated. See partials/layout-top.ejs and partials/layout-bottom.ejs %>