@sienklogic/plan-build-run 2.26.1 → 2.26.2

package/CHANGELOG.md

@@ -5,6 +5,13 @@ 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.26.2](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.26.1...plan-build-run-v2.26.2) (2026-02-24)
+
+
+### Bug Fixes
+
+* **36-08:** improve dashboard UX across 12 pages with 16 visual fixes ([3e0d715](https://github.com/SienkLogic/plan-build-run/commit/3e0d715bb93c7fa18d93960e7ca322c14a1c9deb))
+
 ## [2.26.1](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.26.0...plan-build-run-v2.26.1) (2026-02-24)
 
 

package/dashboard/public/css/layout.css

@@ -164,6 +164,30 @@ aside.sidebar nav a[aria-current="page"] {
   margin-top: 2px;
 }
 
+/* --- Sidebar: Next Action --- */
+.sidebar-next-action {
+  padding: var(--space-sm) var(--space-lg);
+  border-bottom: 1px solid var(--color-border);
+  overflow: hidden;
+}
+
+.sidebar-next-action small {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 0.6875rem;
+  color: var(--color-text-dim);
+  display: block;
+}
+
+.sidebar-next-action__cmd {
+  display: block;
+  font-size: 0.75rem;
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* --- Sidebar: Section Details --- */
 aside.sidebar details {
   border: none;
@@ -171,22 +195,29 @@ aside.sidebar details {
   padding: 0;
 }
 
+aside.sidebar details + details {
+  margin-top: var(--space-xs);
+}
+
 aside.sidebar details summary {
   text-transform: uppercase;
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   font-weight: 600;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.06em;
   color: var(--color-text-dim);
-  padding: var(--space-sm) var(--space-lg);
+  padding: var(--space-xs) var(--space-lg);
   cursor: pointer;
+  border-left: 3px solid transparent;
 }
 
 aside.sidebar details[open] summary {
   color: var(--color-accent);
+  border-left-color: var(--color-accent);
 }
 
 aside.sidebar details ul {
   margin: 0;
+  padding-bottom: var(--space-xs);
 }
 
 /* --- Main Content --- */
@@ -422,6 +453,82 @@ details li {
   font-weight: 500;
 }
 
+/* --- Phase Timeline (homepage) --- */
+.phase-timeline {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.phase-step {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-xs) 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.phase-step:last-child {
+  border-bottom: none;
+}
+
+.step-label {
+  text-decoration: none;
+  display: flex;
+  gap: var(--space-sm);
+  align-items: baseline;
+  flex: 1;
+  min-width: 0;
+}
+
+.step-label strong {
+  font-size: 0.85rem;
+  white-space: nowrap;
+}
+
+.step-name {
+  font-size: 0.85rem;
+  color: var(--color-text-dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* --- Activity Feed (homepage) --- */
+.activity-feed {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.activity-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-md);
+  padding: var(--space-xs) 0;
+  border-bottom: 1px solid var(--color-border);
+  font-size: 0.85rem;
+}
+
+.activity-item:last-child {
+  border-bottom: none;
+}
+
+.activity-path {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1;
+}
+
+.activity-time {
+  white-space: nowrap;
+  color: var(--color-text-dim);
+  font-size: 0.8rem;
+}
+
 /* Phase Navigation */
 .phase-nav {
   display: grid;

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

@@ -111,6 +111,34 @@ function extractMilestones(roadmapContent) {
     });
   }
 
+  // Parse milestones that use ### Phase NN: format instead of **Phases:** N - M
+  // Format: "## Milestone: Name\n\nDescription\n\n### Phase NN: ..."
+  const sectionRegex = /## Milestone:\s*([^\n]+?)(?:\s*\{[^}]*\})?\s*\n([\s\S]*?)(?=\n## |\n---|\n$)/g;
+  for (const match of roadmapContent.matchAll(sectionRegex)) {
+    const rawName = match[1].trim();
+    // Skip already-seen (explicit or completed formats)
+    if (seenNames.has(rawName)) continue;
+    // Skip collapsed "-- COMPLETED" entries (already handled above)
+    if (/--\s*COMPLETED/i.test(rawName)) continue;
+    const body = match[2];
+    // Find ### Phase NN: lines within this milestone section
+    const phaseLines = [...body.matchAll(/### Phase\s+(\d+):/g)];
+    if (phaseLines.length > 0) {
+      const phaseIds = phaseLines.map(m => parseInt(m[1], 10));
+      const startPhase = Math.min(...phaseIds);
+      const endPhase = Math.max(...phaseIds);
+      // Extract goal from first paragraph (before first ### heading)
+      const goalText = body.split(/### /)[0].trim();
+      seenNames.add(rawName);
+      explicit.push({
+        name: rawName,
+        goal: goalText || '',
+        startPhase,
+        endPhase
+      });
+    }
+  }
+
   // Sort explicit milestones by start phase
   explicit.sort((a, b) => a.startPhase - b.startPhase);
 

package/dashboard/src/views/partials/activity-feed.ejs

@@ -3,9 +3,16 @@
 <% } else { %>
 <ul class="activity-feed">
   <% recentActivity.forEach(function(item) { %>
+  <%
+    // Format path: strip .planning/ prefix for brevity
+    var displayPath = item.path.replace(/^\.planning\//, '');
+    // Format timestamp: show just date+time, no timezone
+    var ts = item.timestamp || '';
+    var dateOnly = ts.replace(/\s+[-+]\d{4}$/, '').replace(/:\d{2}$/, '');
+  %>
   <li class="activity-item">
-    <span class="activity-path"><%= item.path %></span>
-    <time class="activity-time" datetime="<%= item.timestamp %>"><%= item.timestamp %></time>
+    <span class="activity-path"><%= displayPath %></span>
+    <time class="activity-time" datetime="<%= ts %>"><%= dateOnly %></time>
   </li>
   <% }); %>
 </ul>

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

@@ -92,7 +92,7 @@
 <% if (typeof llmMetrics !== 'undefined' && llmMetrics) { %>
 <article>
   <header>Local LLM Offload</header>
-  <div class="grid">
+  <div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(140px,1fr))">
     <article>
       <header>Total Calls</header>
       <strong class="stat-value"><%= llmMetrics.summary.total_calls %></strong>
@@ -104,17 +104,17 @@
       <span class="stat-unit">frontier tokens</span>
     </article>
     <article>
-      <header>Est. Cost Saved</header>
+      <header>Cost Saved</header>
       <strong class="stat-value">$<%= llmMetrics.summary.cost_saved_usd.toFixed(4) %></strong>
       <span class="stat-unit">at $3/M tokens</span>
     </article>
     <article>
-      <header>Fallback Rate</header>
+      <header>Fallbacks</header>
       <strong class="stat-value"><%= llmMetrics.summary.fallback_rate_pct %>%</strong>
       <span class="stat-unit"><%= llmMetrics.summary.fallback_count %> fallbacks</span>
     </article>
     <article>
-      <header>Avg Latency</header>
+      <header>Latency</header>
       <strong class="stat-value"><%= llmMetrics.summary.avg_latency_ms %></strong>
       <span class="stat-unit">ms/call</span>
     </article>

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

@@ -132,37 +132,57 @@
         </fieldset>
         <% } %>
 
-        <%# Parallelization number inputs %>
+        <%# Parallelization inputs (toggles for booleans, number for numbers) %>
         <% if (config.parallelization && typeof config.parallelization === 'object') { %>
         <fieldset class="config-fieldset">
           <legend>Parallelization</legend>
           <% for (const [key, val] of Object.entries(config.parallelization)) { %>
+          <% if (typeof val === 'boolean') { %>
+          <div class="config-toggle-row">
+            <label>
+              <input type="checkbox" role="switch" name="parallelization.<%= key %>" value="on" <%= val ? 'checked' : '' %> />
+              <%= key %>
+            </label>
+          </div>
+          <% } else if (typeof val === 'number') { %>
           <div class="config-row">
             <label for="cfg-par-<%= key %>"><%= key %></label>
-            <% if (typeof val === 'number') { %>
             <input id="cfg-par-<%= key %>" type="number" name="parallelization.<%= key %>" value="<%= val %>" min="1" />
-            <% } else { %>
+          </div>
+          <% } else { %>
+          <div class="config-row">
+            <label for="cfg-par-<%= key %>"><%= key %></label>
             <input id="cfg-par-<%= key %>" type="text" name="parallelization.<%= key %>" value="<%= val %>" />
-            <% } %>
           </div>
           <% } %>
+          <% } %>
         </fieldset>
         <% } %>
 
-        <%# Planning number/text inputs %>
+        <%# Planning inputs (toggles for booleans, number for numbers) %>
         <% if (config.planning && typeof config.planning === 'object') { %>
         <fieldset class="config-fieldset">
           <legend>Planning</legend>
           <% for (const [key, val] of Object.entries(config.planning)) { %>
+          <% if (typeof val === 'boolean') { %>
+          <div class="config-toggle-row">
+            <label>
+              <input type="checkbox" role="switch" name="planning.<%= key %>" value="on" <%= val ? 'checked' : '' %> />
+              <%= key %>
+            </label>
+          </div>
+          <% } else if (typeof val === 'number') { %>
           <div class="config-row">
             <label for="cfg-plan-<%= key %>"><%= key %></label>
-            <% if (typeof val === 'number') { %>
             <input id="cfg-plan-<%= key %>" type="number" name="planning.<%= key %>" value="<%= val %>" />
-            <% } else { %>
+          </div>
+          <% } else { %>
+          <div class="config-row">
+            <label for="cfg-plan-<%= key %>"><%= key %></label>
             <input id="cfg-plan-<%= key %>" type="text" name="planning.<%= key %>" value="<%= val %>" />
-            <% } %>
           </div>
           <% } %>
+          <% } %>
         </fieldset>
         <% } %>
 

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

@@ -1,5 +1,11 @@
 <%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
-<h1><%= projectName %></h1>
+<%
+  // Show just the phase name as h1, not the full focus description
+  var dashboardTitle = (typeof currentPhase !== 'undefined' && currentPhase && currentPhase.name)
+    ? currentPhase.name
+    : (typeof projectName !== 'undefined' ? projectName.split(/\s*[—–-]\s*/)[0] : 'Dashboard');
+%>
+<h1><%= dashboardTitle %></h1>
 
 <!-- Status Cards -->
 <div class="status-cards">

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

@@ -98,7 +98,10 @@
     <% } %>
 
     <% } else { %>
-    <p>Select a log file to view entries.</p>
+    <div style="text-align:center;padding:var(--space-xl) var(--space-md);color:var(--color-text-dim)">
+      <p style="font-size:1.5rem;margin-bottom:var(--space-sm)">&#8592;</p>
+      <p>Select a log file from the list to view entries.</p>
+    </div>
     <% } %>
   </div>
 </div>

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

@@ -1,9 +1,26 @@
 <%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
 <h1>Milestones</h1>
 
-<% if (active.length > 0) { %>
+<%
+  // Filter out milestones that the parser already flagged as completed (collapsed in ROADMAP.md)
+  var nonCollapsed = active.filter(function(m) { return !m.completed; });
+
+  // From non-collapsed, separate truly active from ones whose phases are all complete
+  var trulyActive = nonCollapsed.filter(function(m) {
+    var msPhases = (typeof phases !== 'undefined' && phases) ? phases.filter(function(p) { return p.id >= m.startPhase && p.id <= m.endPhase; }) : [];
+    var completedPhases = msPhases.filter(function(p) { return p.status === 'complete'; }).length;
+    return msPhases.length === 0 || completedPhases < msPhases.length;
+  });
+  var completedNotArchived = nonCollapsed.filter(function(m) {
+    var msPhases = (typeof phases !== 'undefined' && phases) ? phases.filter(function(p) { return p.id >= m.startPhase && p.id <= m.endPhase; }) : [];
+    var completedPhases = msPhases.filter(function(p) { return p.status === 'complete'; }).length;
+    return msPhases.length > 0 && completedPhases >= msPhases.length;
+  });
+%>
+
+<% if (trulyActive.length > 0) { %>
 <h2>Active</h2>
-<% active.forEach(function(m) {
+<% trulyActive.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;
@@ -24,6 +41,19 @@
 <% }); %>
 <% } %>
 
+<% if (completedNotArchived.length > 0) { %>
+<h2>Completed (Pending Archive)</h2>
+<% completedNotArchived.forEach(function(m) { %>
+<article>
+  <header>
+    <strong><%= m.name %></strong>
+    <span class="status-badge status-badge--sm" data-status="complete" style="float:right">completed</span>
+  </header>
+  <p>Phases <%= m.startPhase %> &ndash; <%= m.endPhase %></p>
+</article>
+<% }); %>
+<% } %>
+
 <% if (archived.length > 0) { %>
 <h2>Archived</h2>
 <article>
@@ -45,12 +75,12 @@
         <td colspan="6" style="padding:0">
           <details>
             <summary style="padding:0.5rem 1rem;cursor:pointer">
-              <span class="grid" style="display:inline-grid;grid-template-columns:repeat(6,1fr);width:100%;text-align:left">
+              <span class="grid" style="display:inline-grid;grid-template-columns:60px 2fr 1fr 1fr 60px 60px;width:100%;text-align:left;gap:var(--space-sm)">
                 <span><a href="/milestones/<%= m.version %>"
                          hx-get="/milestones/<%= m.version %>"
                          hx-target="#main-content"
                          hx-push-url="true">v<%= m.version %></a></span>
-                <span><%= m.name %></span>
+                <span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis"><%= m.name %></span>
                 <span><%= m.date || '—' %></span>
                 <span><%= m.duration || '—' %></span>
                 <span><%= m.stats && m.stats.phaseCount ? m.stats.phaseCount : '—' %></span>

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

@@ -6,24 +6,23 @@
 <% } else { %>
 <% notes.forEach(function(note) { %>
 <% const noteSlug = note.filename.replace(/^\d{4}-\d{2}-\d{2}-/, '').replace(/\.md$/, ''); %>
-<article>
-  <header>
+<article class="card">
+  <header class="card__header">
     <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>
-    <% } %>
-    <% if (note.date) { %>
-      <small style="float:right"><%= note.date %></small>
-    <% } %>
+    <span style="display:flex;gap:var(--space-sm);align-items:center;margin-left:auto">
+      <% if (note.promoted) { %>
+        <span class="status-badge status-badge--sm" data-status="complete">promoted</span>
+      <% } %>
+      <% if (note.date) { %>
+        <small style="color:var(--color-text-dim)"><%= typeof note.date === 'object' ? note.date.toISOString().slice(0, 10) : String(note.date).slice(0, 10) %></small>
+      <% } %>
+    </span>
   </header>
-  <div class="markdown-body">
-    <%- note.html %>
-  </div>
 </article>
 <% }); %>
 <% } %>

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

@@ -9,7 +9,11 @@
        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>
+       hx-push-url="true">
+      <strong>Phase <%= phase.id %></strong>
+      <span class="step-name"><%= phase.name %></span>
+    </a>
+    <span class="status-badge status-badge--sm" data-status="<%= phase.status %>"><%= phase.status %></span>
   </li>
   <% }); %>
 </ol>

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

@@ -23,8 +23,7 @@
 <article>
   <header><strong>Summary</strong></header>
   <p>
-    <%= phases.filter(p => p.status === 'complete').length %> of <%= phases.length %> phases complete
-    across <%= milestoneGroups.length %> milestone<%= milestoneGroups.length !== 1 ? 's' : '' %>.
+    <%= phases.filter(p => p.status === 'complete').length %> of <%= phases.length %> phases complete<%= milestoneGroups.length > 0 ? ' across ' + milestoneGroups.length + ' milestone' + (milestoneGroups.length !== 1 ? 's' : '') : '' %>.
   </p>
   <progress value="<%= phases.filter(p => p.status === 'complete').length %>" max="<%= phases.length %>"></progress>
 </article>

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

@@ -24,6 +24,9 @@
       <% if (doc.coverage) { %><small>Coverage: <%= doc.coverage %></small><% } %>
     </p>
     <% } %>
+    <% if (!doc.topic && !doc.confidence && !doc.coverage) { %>
+    <p class="muted"><small>Click to view full document</small></p>
+    <% } %>
   </div>
 </article>
 <% }); %>
@@ -44,6 +47,10 @@
     </strong>
     <% if (doc.date) { %><small style="float:right"><%= doc.date %></small><% } %>
   </header>
+  <div class="card__body">
+    <% if (doc.focus) { %><p><strong>Focus:</strong> <%= doc.focus %></p><% } %>
+    <% if (!doc.focus) { %><p class="muted"><small>Click to view full document</small></p><% } %>
+  </div>
 </article>
 <% }); %>
 <% } %>

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

@@ -15,8 +15,8 @@
 
   <% if (typeof currentPhase !== 'undefined' && currentPhase && currentPhase.nextAction) { %>
   <div class="sidebar-next-action">
-    <small>Suggested next:</small>
-    <code><%= currentPhase.nextAction %></code>
+    <small>Suggested next</small>
+    <code class="sidebar-next-action__cmd"><%= currentPhase.nextAction %></code>
   </div>
   <% } %>
 

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

@@ -89,13 +89,13 @@
             <%= todo.priority %>
           </span>
         </td>
-        <td><%= todo.phase %></td>
+        <td><%= todo.phase || '—' %></td>
         <td>
           <span class="status-badge" data-status="<%= todo.status %>">
             <%= todo.status %>
           </span>
         </td>
-        <td><%= todo.created %></td>
+        <td><%= todo.created ? new Date(todo.created).toISOString().slice(0, 10) : '—' %></td>
       </tr>
       <% }); %>
     </tbody>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sienklogic/plan-build-run",
-  "version": "2.26.1",
+  "version": "2.26.2",
   "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.26.1",
+  "version": "2.26.2",
   "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.26.1",
+  "version": "2.26.2",
   "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.26.1",
+  "version": "2.26.2",
   "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",