@sienklogic/plan-build-run 2.23.0 → 2.26.0

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

@@ -0,0 +1,131 @@
+<%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
+<h1>Logs</h1>
+
+<% if (!logFiles || logFiles.length === 0) { %>
+<%- include('empty-state', { icon: 'L', title: 'No log files found', action: 'Log files appear in .planning/logs/ when PBR hooks run with local LLM routing enabled.' }) %>
+<% } else { %>
+
+<div class="logs-layout" style="display:flex;gap:var(--spacing-md);align-items:flex-start">
+
+  <%# File browser sidebar %>
+  <aside style="min-width:220px;max-width:260px;flex-shrink:0">
+    <article>
+      <header><strong>Log Files</strong></header>
+      <ul style="list-style:none;padding:0;margin:0">
+        <% logFiles.forEach(function(lf) { %>
+        <li style="padding:0.25rem 0;border-bottom:1px solid var(--card-border)">
+          <a href="/logs?file=<%= lf.name %>"
+             hx-get="/logs?file=<%= lf.name %>"
+             hx-target="#main-content"
+             hx-push-url="true"
+             <% if (selectedFile === lf.name) { %>aria-current="page"<% } %>>
+            <%= lf.name %>
+          </a>
+          <br>
+          <small><%= Math.round(lf.size / 1024) %> KB &middot; <%= lf.modified ? lf.modified.slice(0,10) : '' %></small>
+        </li>
+        <% }); %>
+      </ul>
+    </article>
+  </aside>
+
+  <%# Main log viewer %>
+  <div style="flex:1;min-width:0">
+    <% if (selectedFile) { %>
+
+    <%# Filter controls %>
+    <form hx-get="/logs"
+          hx-target="#main-content"
+          hx-push-url="true"
+          style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:var(--spacing-sm)">
+      <input type="hidden" name="file" value="<%= selectedFile %>">
+      <input type="text" name="type" placeholder="Type filter (e.g. tool_use)"
+             value="<%= typeof filters !== 'undefined' ? filters.type : '' %>"
+             style="width:200px">
+      <input type="search" name="q" placeholder="Search entries..."
+             value="<%= typeof filters !== 'undefined' ? filters.q : '' %>"
+             style="flex:1;min-width:160px">
+      <button type="submit">Filter</button>
+      <% if (typeof filters !== 'undefined' && (filters.type || filters.q)) { %>
+      <a href="/logs?file=<%= selectedFile %>"
+         hx-get="/logs?file=<%= selectedFile %>"
+         hx-target="#main-content"
+         hx-push-url="true"
+         role="button" class="secondary">Clear</a>
+      <% } %>
+    </form>
+
+    <%# Auto-scroll toggle + live indicator %>
+    <div style="display:flex;align-items:center;gap:1rem;margin-bottom:var(--spacing-sm)">
+      <label style="display:flex;align-items:center;gap:0.4rem;cursor:pointer">
+        <input type="checkbox" id="auto-scroll-toggle" checked style="margin:0">
+        <small>Auto-scroll</small>
+      </label>
+      <span id="live-indicator" class="status-badge" data-status="active" style="display:none">LIVE</span>
+    </div>
+
+    <%# Entry list: SSE target + initial content %>
+    <div id="log-entries-wrap"
+         hx-ext="sse"
+         sse-connect="/logs/stream?file=<%= selectedFile %>"
+         sse-swap="log-entry"
+         hx-swap="beforeend"
+         hx-target="#log-entries"
+         style="position:relative">
+      <%- include('log-entries-content') %>
+    </div>
+
+    <%# Pagination %>
+    <% if (logData && logData.total > logData.pageSize) { %>
+    <nav style="display:flex;gap:0.5rem;margin-top:var(--spacing-sm);align-items:center">
+      <% const totalPages = Math.ceil(logData.total / logData.pageSize); %>
+      <% if (logData.page > 1) { %>
+      <a href="/logs?file=<%= selectedFile %>&page=<%= logData.page - 1 %>&type=<%= (filters || {}).type || '' %>&q=<%= (filters || {}).q || '' %>"
+         hx-get="/logs?file=<%= selectedFile %>&page=<%= logData.page - 1 %>&type=<%= (filters || {}).type || '' %>&q=<%= (filters || {}).q || '' %>"
+         hx-target="#main-content"
+         hx-push-url="true"
+         role="button" class="secondary">&larr; Prev</a>
+      <% } %>
+      <small>Page <%= logData.page %> of <%= totalPages %> (<%= logData.total %> entries)</small>
+      <% if (logData.page < totalPages) { %>
+      <a href="/logs?file=<%= selectedFile %>&page=<%= logData.page + 1 %>&type=<%= (filters || {}).type || '' %>&q=<%= (filters || {}).q || '' %>"
+         hx-get="/logs?file=<%= selectedFile %>&page=<%= logData.page + 1 %>&type=<%= (filters || {}).type || '' %>&q=<%= (filters || {}).q || '' %>"
+         hx-target="#main-content"
+         hx-push-url="true"
+         role="button" class="secondary">Next &rarr;</a>
+      <% } %>
+    </nav>
+    <% } %>
+
+    <% } else { %>
+    <p>Select a log file to view entries.</p>
+    <% } %>
+  </div>
+</div>
+
+<script>
+(function () {
+  const wrap = document.getElementById('log-entries-wrap');
+  const toggle = document.getElementById('auto-scroll-toggle');
+  const indicator = document.getElementById('live-indicator');
+
+  if (!wrap || !toggle) return;
+
+  // Show live indicator when SSE connects
+  wrap.addEventListener('htmx:sseOpen', () => {
+    if (indicator) indicator.style.display = '';
+  });
+  wrap.addEventListener('htmx:sseClose', () => {
+    if (indicator) indicator.style.display = 'none';
+  });
+
+  // Auto-scroll: when a new log-entry SSE event adds content, scroll to bottom
+  wrap.addEventListener('htmx:afterSwap', () => {
+    if (toggle && toggle.checked) {
+      const list = document.getElementById('log-entries');
+      if (list) list.scrollTop = list.scrollHeight;
+    }
+  });
+})();
+</script>
+<% } %>

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

@@ -0,0 +1,22 @@
+<%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
+<h1>
+  <%= title %>
+  <% if (promoted) { %>
+    &nbsp;<span class="status-badge" data-status="complete">promoted</span>
+  <% } %>
+</h1>
+
+<% if (date) { %>
+<p><small><%= date %></small></p>
+<% } %>
+
+<article>
+  <div class="markdown-body">
+    <%- html %>
+  </div>
+</article>
+
+<p><a href="/notes"
+      hx-get="/notes"
+      hx-target="#main-content"
+      hx-push-url="true">Back to Notes</a></p>

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

@@ -5,9 +5,15 @@
 <%- include('empty-state', { icon: 'N', title: 'No notes yet', action: 'Use /pbr:note to create project notes.' }) %>
 <% } else { %>
 <% notes.forEach(function(note) { %>
+<% const noteSlug = note.filename.replace(/^\d{4}-\d{2}-\d{2}-/, '').replace(/\.md$/, ''); %>
 <article>
   <header>
-    <strong><%= note.title %></strong>
+    <strong>
+      <a href="/notes/<%= noteSlug %>"
+         hx-get="/notes/<%= noteSlug %>"
+         hx-target="#main-content"
+         hx-push-url="true"><%= note.title %></a>
+    </strong>
     <% if (note.promoted) { %>
       &nbsp; <span class="status-badge" data-status="complete">promoted</span>
     <% } %>

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

@@ -1,49 +1,84 @@
 <%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
 <h1>Phase <%= phaseId %>: <%= phaseName %></h1>
 
-<p><a href="/phases" hx-get="/phases" hx-target="#main-content" hx-push-url="true">&larr; Back to Phases</a></p>
+<nav class="phase-nav" aria-label="Phase navigation">
+  <% if (typeof prevPhase !== 'undefined' && prevPhase) { %>
+    <a href="/phases/<%= String(prevPhase.id).padStart(2, '0') %>"
+       hx-get="/phases/<%= String(prevPhase.id).padStart(2, '0') %>"
+       hx-target="#main-content"
+       hx-push-url="true">
+      &larr; Phase <%= String(prevPhase.id).padStart(2, '0') %>: <%= prevPhase.name %>
+    </a>
+  <% } else { %>
+    <span></span>
+  <% } %>
+
+  <a href="/phases"
+     hx-get="/phases"
+     hx-target="#main-content"
+     hx-push-url="true">All Phases</a>
+
+  <% if (typeof nextPhase !== 'undefined' && nextPhase) { %>
+    <a href="/phases/<%= String(nextPhase.id).padStart(2, '0') %>"
+       hx-get="/phases/<%= String(nextPhase.id).padStart(2, '0') %>"
+       hx-target="#main-content"
+       hx-push-url="true">
+      Phase <%= String(nextPhase.id).padStart(2, '0') %>: <%= nextPhase.name %> &rarr;
+    </a>
+  <% } else { %>
+    <span></span>
+  <% } %>
+</nav>
 
 <% if (verification) { %>
-<!-- Verification Summary Card -->
-<article>
-  <header>
+<%
+  var vStatus = verification.result || verification.status || verification.verdict || 'unknown';
+  var verificationCssStatus = 'not-started';
+  if (vStatus === 'pass' || vStatus === 'passed') verificationCssStatus = 'complete';
+  else if (vStatus === 'fail' || vStatus === 'failed') verificationCssStatus = 'blocked';
+  else if (vStatus === 'partial') verificationCssStatus = 'in-progress';
+%>
+<div class="card">
+  <div class="card__header">
     <strong>Verification Status</strong>
-  </header>
-  <%
-    // Map verification status to CSS status-badge data-status values
-    var vStatus = verification.result || verification.status || verification.verdict || 'unknown';
-    var verificationCssStatus = 'not-started';
-    if (vStatus === 'pass' || vStatus === 'passed') verificationCssStatus = 'complete';
-    else if (vStatus === 'fail' || vStatus === 'failed') verificationCssStatus = 'blocked';
-    else if (vStatus === 'partial') verificationCssStatus = 'in-progress';
-  %>
-  <p>
-    <span class="status-badge" data-status="<%= verificationCssStatus %>">
-      <%= vStatus.toUpperCase() %>
+    <span style="float:right;">
+      <span class="status-badge" data-status="<%= verificationCssStatus %>"><%= vStatus.toUpperCase() %></span>
     </span>
+  </div>
+  <div class="card__body">
     <% if (verification.verified) { %>
-      &nbsp; Verified: <%= new Date(verification.verified).toLocaleString() %>
+      <p style="margin:0 0 var(--space-sm);">Verified: <%= new Date(verification.verified).toLocaleString() %></p>
     <% } %>
-  </p>
-  <% if (verification.score) { %>
-    <p>
-      Score: <%= verification.score.verified %>/<%= verification.score.total_must_haves %> must-haves verified
-    </p>
-    <% if (verification.score.failed > 0) { %>
-      <p><strong><%= verification.score.failed %> must-haves FAILED</strong></p>
+    <% if (verification.score) { %>
+      <p style="margin:0 0 var(--space-sm);">
+        Score: <%= verification.score.verified %>/<%= verification.score.total_must_haves %> must-haves verified
+        <% if (verification.score.failed > 0) { %>
+          &nbsp; <strong><%= verification.score.failed %> FAILED</strong>
+        <% } %>
+      </p>
     <% } %>
-  <% } %>
-  <% if (verification.gaps && verification.gaps.length > 0) { %>
-    <details>
-      <summary>Verification Gaps (<%= verification.gaps.length %>)</summary>
-      <ul>
-        <% verification.gaps.forEach(function(gap) { %>
-          <li><%= gap %></li>
-        <% }); %>
-      </ul>
-    </details>
-  <% } %>
-</article>
+    <% if (verification.mustHaves && verification.mustHaves.length > 0) { %>
+      <details>
+        <summary>Must-Haves (<%= verification.mustHaves.length %>)</summary>
+        <ul style="list-style:none;padding:0;margin:var(--space-sm) 0 0;">
+          <% verification.mustHaves.forEach(function(mh) { %>
+          <li style="display:flex;gap:var(--space-xs);align-items:flex-start;padding:var(--space-xs) 0;border-bottom:1px solid var(--color-border);">
+            <span class="status-badge status-badge--sm" data-status="<%= mh.passed ? 'complete' : 'blocked' %>">
+              <%= mh.passed ? 'PASS' : 'FAIL' %>
+            </span>
+            <span style="flex:1;font-size:0.875rem;"><%= mh.text %></span>
+          </li>
+          <% }); %>
+        </ul>
+      </details>
+    <% } else if (verification.gaps && verification.gaps.length > 0) { %>
+      <details>
+        <summary>Verification Gaps (<%= verification.gaps.length %>)</summary>
+        <ul><% verification.gaps.forEach(function(gap) { %><li><%= gap %></li><% }); %></ul>
+      </details>
+    <% } %>
+  </div>
+</div>
 <% } %>
 
 <% if (plans.length === 0) { %>
@@ -57,94 +92,92 @@
 
 <!-- Plan Cards -->
 <% plans.forEach(function(plan) { %>
-<article>
-  <header>
-    <strong>Plan <%= plan.planId %></strong>
-    <% if (plan.summary && plan.summary.status) { %>
-      &nbsp;
-      <span class="status-badge" data-status="<%= plan.summary.status %>">
-        <%= plan.summary.status.replace('-', ' ') %>
-      </span>
-    <% } %>
-  </header>
+<%
+  var planStatus = (plan.summary && plan.summary.status) ? plan.summary.status : 'planned';
+  var planCssStatus = planStatus === 'built' ? 'complete'
+    : planStatus === 'building' ? 'in-progress'
+    : planStatus === 'blocked' ? 'blocked'
+    : 'not-started';
+  var wave = (plan.summary && plan.summary.wave) ? plan.summary.wave : null;
+  var taskCount = plan.taskCount || 0;
+  var planTitle = plan.planTitle || ('Plan ' + plan.planId);
+%>
+<div class="card">
+  <div class="card__header">
+    <span><strong><%= planTitle %></strong></span>
+    <span style="display:inline-flex;gap:var(--space-xs);align-items:center;float:right;">
+      <% if (wave) { %>
+        <span class="status-badge status-badge--sm" data-status="not-started" title="Wave <%= wave %>">W<%= wave %></span>
+      <% } %>
+      <% if (taskCount > 0) { %>
+        <span class="status-badge status-badge--sm" data-status="not-started"><%= taskCount %> task<%= taskCount !== 1 ? 's' : '' %></span>
+      <% } %>
+      <span class="status-badge" data-status="<%= planCssStatus %>"><%= planStatus.replace(/-/g, ' ').toUpperCase() %></span>
+    </span>
+  </div>
+  <div class="card__body">
+    <p style="margin:0 0 var(--space-sm);">
+      <a href="/phases/<%= phaseId %>/<%= plan.planId %>/plan"
+         hx-get="/phases/<%= phaseId %>/<%= plan.planId %>/plan"
+         hx-target="#main-content" hx-push-url="true">View Plan</a>
+      <% if (plan.summary) { %>
+        &nbsp;|&nbsp;
+        <a href="/phases/<%= phaseId %>/<%= plan.planId %>/summary"
+           hx-get="/phases/<%= phaseId %>/<%= plan.planId %>/summary"
+           hx-target="#main-content" hx-push-url="true">View Summary</a>
+      <% } %>
+      <% if (verification) { %>
+        &nbsp;|&nbsp;
+        <a href="/phases/<%= phaseId %>/<%= plan.planId %>/verification"
+           hx-get="/phases/<%= phaseId %>/<%= plan.planId %>/verification"
+           hx-target="#main-content" hx-push-url="true">View Verification</a>
+      <% } %>
+    </p>
 
-  <p>
-    <a href="/phases/<%= phaseId %>/<%= plan.planId %>/plan">View Plan</a>
     <% 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) { %>
-
-    <% if (plan.summary.subsystem) { %>
-      <p><strong>Subsystem:</strong> <%= plan.summary.subsystem %></p>
+      <% if (plan.summary.subsystem) { %>
+        <p><strong>Subsystem:</strong> <%= plan.summary.subsystem %></p>
+      <% } %>
+      <% if (plan.summary.key_decisions && plan.summary.key_decisions.length > 0) { %>
+        <details>
+          <summary>Key Decisions (<%= plan.summary.key_decisions.length %>)</summary>
+          <ul><% plan.summary.key_decisions.forEach(function(d) { %><li><%= d %></li><% }); %></ul>
+        </details>
+      <% } %>
+      <% if (plan.summary.key_files && plan.summary.key_files.length > 0) { %>
+        <details>
+          <summary>Key Files (<%= plan.summary.key_files.length %>)</summary>
+          <ul><% plan.summary.key_files.forEach(function(f) { %><li><code><%= f %></code></li><% }); %></ul>
+        </details>
+      <% } %>
+      <% if (plan.summary.deferred && plan.summary.deferred.length > 0) { %>
+        <details>
+          <summary>Deferred Items (<%= plan.summary.deferred.length %>)</summary>
+          <ul><% plan.summary.deferred.forEach(function(item) { %><li><%= item %></li><% }); %></ul>
+        </details>
+      <% } %>
+      <% if (plan.summary.metrics) { %>
+        <p style="margin-top:var(--space-sm);">
+          <small>
+            <% if (plan.summary.metrics.duration_minutes != null) { %>Duration: <%= plan.summary.metrics.duration_minutes %> min<% } %>
+            <% if (plan.summary.metrics.commits != null) { %> | Commits: <%= plan.summary.metrics.commits %><% } %>
+            <% if (plan.summary.metrics.files_created != null || plan.summary.metrics.files_modified != null) { %>
+               | Files: <%= plan.summary.metrics.files_created || 0 %> created, <%= plan.summary.metrics.files_modified || 0 %> modified
+            <% } %>
+          </small>
+        </p>
+      <% } %>
+    <% } else { %>
+      <p><em>Plan file exists but has not been executed yet. No summary available.</em></p>
     <% } %>
-
-    <% if (plan.summary.key_decisions && plan.summary.key_decisions.length > 0) { %>
-      <details>
-        <summary>Key Decisions (<%= plan.summary.key_decisions.length %>)</summary>
-        <ul>
-          <% plan.summary.key_decisions.forEach(function(decision) { %>
-            <li><%= decision %></li>
-          <% }); %>
-        </ul>
-      </details>
-    <% } %>
-
-    <% if (plan.summary.key_files && plan.summary.key_files.length > 0) { %>
-      <details>
-        <summary>Key Files (<%= plan.summary.key_files.length %>)</summary>
-        <ul>
-          <% plan.summary.key_files.forEach(function(file) { %>
-            <li><code><%= file %></code></li>
-          <% }); %>
-        </ul>
-      </details>
-    <% } %>
-
-    <% if (plan.summary.deferred && plan.summary.deferred.length > 0) { %>
-      <details>
-        <summary>Deferred Items (<%= plan.summary.deferred.length %>)</summary>
-        <ul>
-          <% plan.summary.deferred.forEach(function(item) { %>
-            <li><%= item %></li>
-          <% }); %>
-        </ul>
-      </details>
-    <% } %>
-
-    <% if (plan.summary.metrics) { %>
-      <p>
-        <small>
-          <% if (plan.summary.metrics.duration_minutes != null) { %>
-            Duration: <%= plan.summary.metrics.duration_minutes %> min
-          <% } %>
-          <% if (plan.summary.metrics.commits != null) { %>
-            | Commits: <%= plan.summary.metrics.commits %>
-          <% } %>
-          <% if (plan.summary.metrics.files_created != null || plan.summary.metrics.files_modified != null) { %>
-            | Files: <%= plan.summary.metrics.files_created || 0 %> created, <%= plan.summary.metrics.files_modified || 0 %> modified
-          <% } %>
-        </small>
-      </p>
-    <% } %>
-
-  <% } else { %>
-    <!-- Plan exists but not executed yet -->
-    <p><em>Plan file exists but has not been executed yet. No summary available.</em></p>
-  <% } %>
-</article>
+  </div>
+</div>
 <% }); %>
 
 <% } %>
 
 <!-- Commit History Section -->
 <%
-  // Collect all commits across all plans, tagged with their planId
   var allCommits = [];
   plans.forEach(function(plan) {
     if (plan.commits && plan.commits.length > 0) {
@@ -153,41 +186,43 @@
       });
     }
   });
+
+  // Extract commit type from task string: "NN-NN-T1: feat(scope): msg" -> "feat"
+  function commitType(entry) {
+    var m = entry.commit.task && entry.commit.task.match(/\b(feat|fix|refactor|test|docs|chore|wip|perf)\b/i);
+    return m ? m[1].toLowerCase() : 'chore';
+  }
+
+  var typeStatusMap = {
+    feat: 'complete', fix: 'in-progress', refactor: 'not-started',
+    test: 'not-started', docs: 'not-started', chore: 'not-started',
+    wip: 'in-progress', perf: 'complete'
+  };
 %>
 
 <h2>Commit History (<%= allCommits.length %>)</h2>
 
 <% if (allCommits.length === 0) { %>
-<article>
-  <p><em>No commits yet for this phase.</em></p>
-</article>
+<div class="card"><div class="card__body"><p><em>No commits yet for this phase.</em></p></div></div>
 <% } else { %>
-<div class="table-wrap">
-<table>
-  <thead>
-    <tr>
-      <th>Commit</th>
-      <th>Task</th>
-      <th>Plan</th>
-      <th>Files</th>
-      <th>Status</th>
-    </tr>
-  </thead>
-  <tbody>
-    <% allCommits.forEach(function(entry) { %>
-    <tr>
-      <td><code><%= entry.commit.hash %></code></td>
-      <td><%= entry.commit.task %></td>
-      <td><%= entry.planId %></td>
-      <td><%= entry.commit.files %></td>
-      <td>
-        <span class="status-badge" data-status="<%= entry.commit.verify === 'passed' ? 'complete' : (entry.commit.verify === 'failed' ? 'blocked' : 'in-progress') %>">
-          <%= entry.commit.verify %>
-        </span>
-      </td>
-    </tr>
-    <% }); %>
-  </tbody>
-</table>
-</div>
+<ol class="commit-timeline">
+  <% allCommits.forEach(function(entry) { %>
+  <%
+    var ctype = commitType(entry);
+    var cStatus = typeStatusMap[ctype] || 'not-started';
+    var verifyStatus = entry.commit.verify === 'passed' ? 'complete'
+      : entry.commit.verify === 'failed' ? 'blocked' : 'in-progress';
+  %>
+  <li class="commit-timeline__item">
+    <span class="status-badge status-badge--sm" data-status="<%= cStatus %>" title="<%= ctype %>"><%= ctype %></span>
+    <code class="commit-timeline__hash"><%= entry.commit.hash %></code>
+    <span class="commit-timeline__task"><%= entry.commit.task %></span>
+    <span class="commit-timeline__meta">
+      plan <strong><%= entry.planId %></strong>
+      &middot; <%= entry.commit.files %> file<%= entry.commit.files !== 1 ? 's' : '' %>
+      &middot; <span class="status-badge status-badge--sm" data-status="<%= verifyStatus %>"><%= entry.commit.verify %></span>
+    </span>
+  </li>
+  <% }); %>
+</ol>
 <% } %>

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

@@ -0,0 +1,16 @@
+<% if (!phases || phases.length === 0) { %>
+  <p class="muted">No phases found.</p>
+<% } else { %>
+<ol class="phase-timeline">
+  <% phases.forEach(function(phase) { %>
+  <li class="phase-step" data-status="<%= phase.status %>"<% if (currentPhase && phase.id === currentPhase.id) { %> aria-current="step"<% } %>>
+    <span class="step-indicator"></span>
+    <a class="step-label"
+       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 <%= phase.id %></a>
+  </li>
+  <% }); %>
+</ol>
+<% } %>

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

@@ -0,0 +1,44 @@
+<%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
+<h1>Requirements</h1>
+
+<% if (totalCount === 0) { %>
+<%- include('empty-state', { icon: 'R', title: 'No requirements found', action: 'Add a REQUIREMENTS.md file to your .planning/ directory.' }) %>
+<% } else { %>
+<p class="requirements-summary">
+  <strong><%= coveredCount %> / <%= totalCount %></strong> requirements covered by plans.
+  <% if (uncoveredCount > 0) { %>
+  <span class="status-badge" data-status="warning"><%= uncoveredCount %> uncovered</span>
+  <% } else { %>
+  <span class="status-badge" data-status="verified">All covered</span>
+  <% } %>
+</p>
+
+<% sections.forEach(function(section) { %>
+<section class="requirements-section">
+  <h2><%= section.sectionTitle %></h2>
+  <% section.requirements.forEach(function(req) { %>
+  <article class="card requirements-card" data-covered="<%= req.covered %>">
+    <header class="card__header">
+      <code class="req-id"><%= req.id %></code>
+      <% if (req.covered) { %>
+      <span class="status-badge" data-status="verified">covered</span>
+      <% } else { %>
+      <span class="status-badge" data-status="warning">uncovered</span>
+      <% } %>
+    </header>
+    <div class="card__body">
+      <p><%= req.text %></p>
+      <% if (req.planRefs.length > 0) { %>
+      <p class="req-plan-refs">
+        <small>Plans: </small>
+        <% req.planRefs.forEach(function(planId) { %>
+        <code class="req-plan-ref"><%= planId %></code>
+        <% }); %>
+      </p>
+      <% } %>
+    </div>
+  </article>
+  <% }); %>
+</section>
+<% }); %>
+<% } %>

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

@@ -0,0 +1,49 @@
+<%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
+<h1>Research</h1>
+
+<h2>Research Documents</h2>
+<% if (researchDocs.length === 0) { %>
+<%- include('empty-state', { icon: 'R', title: 'No research documents', action: 'Run /pbr:explore or /pbr:scan to generate research.' }) %>
+<% } else { %>
+<% researchDocs.forEach(function(doc) { %>
+<article class="card">
+  <header class="card__header">
+    <strong>
+      <a href="/research/<%= doc.slug %>"
+         hx-get="/research/<%= doc.slug %>"
+         hx-target="#main-content"
+         hx-push-url="true"><%= doc.title %></a>
+    </strong>
+    <% if (doc.date) { %><small style="float:right"><%= doc.date %></small><% } %>
+  </header>
+  <div class="card__body">
+    <% if (doc.topic) { %><p><strong>Topic:</strong> <%= doc.topic %></p><% } %>
+    <% if (doc.confidence || doc.coverage) { %>
+    <p>
+      <% if (doc.confidence) { %><span class="status-badge" data-status="<%= doc.confidence %>"><%= doc.confidence %></span>&nbsp;<% } %>
+      <% if (doc.coverage) { %><small>Coverage: <%= doc.coverage %></small><% } %>
+    </p>
+    <% } %>
+  </div>
+</article>
+<% }); %>
+<% } %>
+
+<h2>Codebase Documents</h2>
+<% if (codebaseDocs.length === 0) { %>
+<%- include('empty-state', { icon: 'C', title: 'No codebase documents', action: 'Run /pbr:scan to generate codebase analysis.' }) %>
+<% } else { %>
+<% codebaseDocs.forEach(function(doc) { %>
+<article class="card">
+  <header class="card__header">
+    <strong>
+      <a href="/research/<%= doc.slug %>"
+         hx-get="/research/<%= doc.slug %>"
+         hx-target="#main-content"
+         hx-push-url="true"><%= doc.title %></a>
+    </strong>
+    <% if (doc.date) { %><small style="float:right"><%= doc.date %></small><% } %>
+  </header>
+</article>
+<% }); %>
+<% } %>