@sienklogic/plan-build-run 2.27.0 → 2.27.2

package/CHANGELOG.md

@@ -5,6 +5,20 @@ 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.27.2](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.27.1...plan-build-run-v2.27.2) (2026-02-24)
+
+
+### Bug Fixes
+
+* **37-05:** fix breadcrumb icon, milestone spacing, summary lookup, and config mode dropdown ([fd6d929](https://github.com/SienkLogic/plan-build-run/commit/fd6d92947c708e0aaba4b3d0a18897228e1957ec))
+
+## [2.27.1](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.27.0...plan-build-run-v2.27.1) (2026-02-24)
+
+
+### Bug Fixes
+
+* **tools:** prevent lifetime LLM metrics from plateauing at 200 entries ([2cbdaa4](https://github.com/SienkLogic/plan-build-run/commit/2cbdaa4b4402110cc4bb0f6505d034f2162aa782))
+
 ## [2.27.0](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.26.2...plan-build-run-v2.27.0) (2026-02-24)
 
 

package/dashboard/public/css/layout.css

@@ -27,103 +27,6 @@ p { line-height: 1.65; }
 
 small { font-size: 0.8125rem; color: var(--color-text-dim); }
 
-/* --- Page Grid Layout --- */
-.page-wrapper {
-  display: grid;
-  gap: 0;
-  grid-template-columns: var(--size-sidebar) 1fr;
-  grid-template-rows: var(--size-header) 1fr auto;
-  grid-template-areas:
-    "header  header"
-    "sidebar content"
-    "footer  footer";
-  min-height: 100vh;
-}
-
-/* --- Header --- */
-.page-wrapper > header {
-  grid-area: header;
-  display: flex;
-  align-items: center;
-  padding: 0 var(--space-xl);
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-surface-raised);
-  backdrop-filter: blur(8px);
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-.page-wrapper > header nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-.page-wrapper > header nav strong {
-  font-size: 1rem;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  white-space: nowrap;
-}
-
-.page-wrapper > header nav ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/* --- Sidebar --- */
-.page-wrapper > aside.sidebar {
-  grid-area: sidebar;
-  padding: var(--space-lg) 0;
-  border-right: 1px solid var(--color-border);
-  background: var(--color-surface-raised);
-  position: sticky;
-  top: var(--size-header);
-  height: calc(100vh - var(--size-header));
-  overflow-y: auto;
-}
-
-aside.sidebar nav ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-aside.sidebar nav li {
-  margin: 0;
-  padding: 0;
-}
-
-aside.sidebar nav a {
-  display: flex;
-  align-items: center;
-  padding: 0.6rem var(--space-lg);
-  text-decoration: none;
-  border-left: 3px solid transparent;
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: var(--color-text-dim);
-  transition: all var(--transition-fast);
-}
-
-aside.sidebar nav a:hover {
-  color: var(--pico-color);
-  background: var(--color-surface-hover);
-  border-left-color: var(--color-border);
-}
-
-aside.sidebar nav a[aria-current="page"] {
-  font-weight: 600;
-  color: var(--color-accent);
-  border-left-color: var(--color-accent);
-  background: var(--color-surface-hover);
-}
-
 /* --- Sidebar: Current Phase Card --- */
 .sidebar-current-phase {
   padding: var(--space-md) var(--space-lg);
@@ -188,59 +91,6 @@ aside.sidebar nav a[aria-current="page"] {
   white-space: nowrap;
 }
 
-/* --- Sidebar: Section Details --- */
-aside.sidebar details {
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-aside.sidebar details + details {
-  margin-top: var(--space-xs);
-}
-
-aside.sidebar details summary {
-  text-transform: uppercase;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  color: var(--color-text-dim);
-  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 --- */
-.page-wrapper > main {
-  grid-area: content;
-  padding: var(--space-xl) var(--space-2xl);
-  overflow-y: auto;
-  max-width: calc(var(--content-max-width) + var(--space-2xl) * 2);
-}
-
-/* --- Footer --- */
-.page-wrapper > footer {
-  grid-area: footer;
-  padding: var(--space-md) var(--space-xl);
-  border-top: 1px solid var(--color-border);
-  text-align: center;
-}
-
-.page-wrapper > footer small {
-  font-size: 0.75rem;
-  color: var(--color-text-dim);
-}
-
 /* --- Card Component --- */
 .card,
 article {
@@ -423,36 +273,6 @@ details li {
   margin: var(--space-lg) 0;
 }
 
-/* --- Breadcrumbs --- */
-.breadcrumbs {
-  display: flex;
-  list-style: none;
-  padding: 0;
-  margin: 0 0 var(--space-md) 0;
-  font-size: 0.85rem;
-  gap: var(--space-xs);
-}
-
-.breadcrumbs li + li::before {
-  content: ">";
-  margin-right: var(--space-xs);
-  color: var(--color-text-dim);
-}
-
-.breadcrumbs a {
-  color: var(--color-accent);
-  text-decoration: none;
-}
-
-.breadcrumbs a:hover {
-  text-decoration: underline;
-}
-
-.breadcrumbs [aria-current="page"] {
-  color: var(--color-text-dim);
-  font-weight: 500;
-}
-
 /* --- Phase Timeline (homepage) --- */
 .phase-timeline {
   list-style: none;
@@ -586,8 +406,8 @@ main > p:first-of-type > a[href="/"]:hover {
   top: 0;
   z-index: 1000;
   padding: var(--space-sm) var(--space-md);
-  background: var(--pico-primary);
-  color: var(--pico-primary-inverse);
+  background: var(--tblr-primary);
+  color: var(--tblr-primary-fg, #fff);
   text-decoration: none;
   font-weight: 600;
 }
@@ -600,24 +420,13 @@ main > p:first-of-type > a[href="/"]:hover {
 
 /* --- Focus Visible --- */
 :focus-visible {
-  outline: 2px solid var(--pico-primary);
+  outline: 2px solid var(--tblr-primary);
   outline-offset: 2px;
 }
 
-/* --- Empty State --- */
-.empty-state {
-  text-align: center;
-  padding: var(--space-2xl) var(--space-lg);
-}
-
-.empty-state h3 {
-  color: var(--color-text-dim);
-  font-weight: 500;
-}
-
 /* --- Error Card --- */
 .error-card {
-  border-left: 4px solid var(--pico-del-color);
+  border-left: 4px solid var(--tblr-danger);
   padding: var(--space-lg);
   margin: var(--space-lg) 0;
   background: var(--color-surface-raised);
@@ -659,7 +468,7 @@ main > p:first-of-type > a[href="/"]:hover {
 /* --- 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 var(--transition-base); }
+.bar-chart-bar { height: 1.5rem; border-radius: var(--radius-sm); background: var(--tblr-primary); color: var(--tblr-primary-fg, #fff); font-size: 0.75rem; display: flex; align-items: center; padding-left: var(--space-sm); min-width: 2rem; transition: width var(--transition-base); }
 
 /* --- Loading Bar --- */
 .loading-bar {
@@ -674,7 +483,7 @@ main > p:first-of-type > a[href="/"]:hover {
 
 .htmx-request .loading-bar {
   display: block;
-  background: var(--pico-primary);
+  background: var(--tblr-primary);
   animation: loading-shimmer 1.2s ease-in-out infinite;
 }
 
@@ -683,93 +492,12 @@ main > p:first-of-type > a[href="/"]:hover {
   100% { transform: translateX(100%); }
 }
 
-/* --- Sidebar Backdrop (hidden by default, shown on mobile) --- */
-.sidebar-backdrop {
-  display: none;
-}
-
-/* --- Mobile hamburger toggle --- */
-.sidebar-toggle {
-  display: none;
-  background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  color: var(--pico-color);
-  font-size: 1.25rem;
-  padding: 0.25rem 0.5rem;
-  cursor: pointer;
-  line-height: 1;
-}
-
 /* ============================================
    Responsive Breakpoints
    ============================================ */
 
-/* Tablet: narrower sidebar */
-@media (max-width: 1024px) {
-  :root {
-    --size-sidebar: 180px;
-  }
-
-  .page-wrapper > main {
-    padding: var(--space-lg) var(--space-xl);
-  }
-}
-
-/* Mobile: sidebar overlays content */
+/* Mobile: compact typography */
 @media (max-width: 768px) {
-  .page-wrapper {
-    grid-template-columns: 1fr;
-    grid-template-rows: var(--size-header) 1fr auto;
-    grid-template-areas:
-      "header"
-      "content"
-      "footer";
-  }
-
-  .sidebar-toggle {
-    display: block;
-  }
-
-  .page-wrapper > aside.sidebar {
-    position: fixed;
-    top: var(--size-header);
-    left: 0;
-    width: 260px;
-    height: calc(100vh - var(--size-header));
-    z-index: 20;
-    transform: translateX(-100%);
-    transition: var(--transition-transform);
-    display: block;
-    border-right: 1px solid var(--color-border);
-    border-bottom: none;
-    padding: var(--space-lg) 0;
-    overflow-y: auto;
-    background: var(--pico-background-color, var(--color-dark-surface));
-  }
-
-  .page-wrapper > aside.sidebar.open {
-    transform: translateX(0);
-    box-shadow: 4px 0 24px var(--overlay-bg);
-  }
-
-  .sidebar-backdrop {
-    display: none;
-    position: fixed;
-    inset: 0;
-    top: var(--size-header);
-    background: var(--overlay-bg-heavy);
-    z-index: 19;
-  }
-
-  .sidebar-backdrop.open {
-    display: block;
-  }
-
-  .page-wrapper > main {
-    padding: var(--space-lg) var(--space-md);
-  }
-
   h1 { font-size: 1.4rem; }
   h2 { font-size: 1.15rem; }
 
@@ -810,10 +538,6 @@ main > p:first-of-type > a[href="/"]:hover {
     font-size: 14px;
   }
 
-  .page-wrapper > main {
-    padding: var(--space-md);
-  }
-
   article > header {
     padding: var(--space-sm) var(--space-md);
   }

package/dashboard/public/css/status-colors.css

@@ -97,6 +97,13 @@
   border-color: rgba(129, 140, 248, 0.2);
 }
 
+/* Tabler .badge compatibility shim */
+.badge.status-badge {
+  font-size: var(--badge-font-size-base);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
 /* Size variants */
 .status-badge--sm {
   padding: var(--badge-padding-sm);

package/dashboard/public/css/tokens.css

@@ -13,7 +13,7 @@
   --color-border: rgba(0, 0, 0, 0.1);
   --color-text-dim: rgba(0, 0, 0, 0.5);
   --color-text: #1a1a2e;
-  --color-accent: var(--pico-primary);
+  --color-accent: var(--tblr-primary, #0054a6);
 
   /* Spacing */
   --space-xs: 0.25rem;
@@ -73,7 +73,7 @@
 }
 
 /* --- Dark Mode (explicit attribute) --- */
-[data-theme="dark"] {
+[data-bs-theme="dark"] {
   --color-surface: #13131a;
   --color-surface-raised: rgba(255, 255, 255, 0.03);
   --color-surface-hover: rgba(255, 255, 255, 0.06);
@@ -84,7 +84,7 @@
 
 /* --- Dark Mode (system preference, unless light forced) --- */
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
+  :root:not([data-bs-theme="light"]) {
     --color-surface: #13131a;
     --color-surface-raised: rgba(255, 255, 255, 0.03);
     --color-surface-hover: rgba(255, 255, 255, 0.06);

package/dashboard/public/js/sidebar-toggle.js

@@ -1,34 +1,12 @@
-// Mobile sidebar toggle with backdrop overlay
+// sidebar-toggle.js — Tabler vertical navbar toggle shim
+// Tabler's Bootstrap JS handles collapse via data-bs-toggle="collapse".
+// This file remains for the header button (#sidebar-toggle) which triggers
+// the .navbar-vertical collapse on mobile.
 document.addEventListener('DOMContentLoaded', function() {
-  var toggle = document.querySelector('.sidebar-toggle');
-  var sidebar = document.querySelector('.sidebar');
-  if (!toggle || !sidebar) return;
-
-  // Create backdrop element
-  var backdrop = document.createElement('div');
-  backdrop.className = 'sidebar-backdrop';
-  document.body.appendChild(backdrop);
-
-  function closeSidebar() {
-    sidebar.classList.remove('open');
-    backdrop.classList.remove('open');
-  }
-
-  function toggleSidebar() {
-    sidebar.classList.toggle('open');
-    backdrop.classList.toggle('open');
-  }
-
-  toggle.addEventListener('click', toggleSidebar);
-  backdrop.addEventListener('click', closeSidebar);
-
-  // Close sidebar when a nav link is clicked (mobile)
-  var navLinks = sidebar.querySelectorAll('a');
-  navLinks.forEach(function(link) {
-    link.addEventListener('click', function() {
-      if (window.innerWidth <= 768) {
-        closeSidebar();
-      }
-    });
+  var toggle = document.getElementById('sidebar-toggle');
+  var sidebarMenu = document.getElementById('sidebar-menu');
+  if (!toggle || !sidebarMenu) return;
+  toggle.addEventListener('click', function() {
+    sidebarMenu.classList.toggle('show');
   });
 });

package/dashboard/public/js/theme-toggle.js

@@ -1,11 +1,11 @@
-/* theme-toggle.js — Toggle light/dark theme via data-theme attribute + localStorage */
+/* theme-toggle.js — Toggle light/dark theme via data-bs-theme attribute + localStorage */
 (function () {
   'use strict';
 
   var STORAGE_KEY = 'pbr-theme';
 
   function getEffectiveTheme() {
-    var explicit = document.documentElement.dataset.theme;
+    var explicit = document.documentElement.dataset.bsTheme;
     if (explicit === 'light' || explicit === 'dark') return explicit;
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
@@ -23,7 +23,7 @@
     // Apply stored theme (also done in layout-top inline script for flash prevention)
     var stored = localStorage.getItem(STORAGE_KEY);
     if (stored) {
-      document.documentElement.dataset.theme = stored;
+      document.documentElement.dataset.bsTheme = stored;
     }
 
     updateIcon(btn, getEffectiveTheme());
@@ -31,7 +31,7 @@
     btn.addEventListener('click', function () {
       var current = getEffectiveTheme();
       var next = current === 'dark' ? 'light' : 'dark';
-      document.documentElement.dataset.theme = next;
+      document.documentElement.dataset.bsTheme = next;
       localStorage.setItem(STORAGE_KEY, next);
       updateIcon(btn, next);
     });

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

@@ -159,7 +159,9 @@ export async function getPhaseDetail(projectDir, phaseId) {
     const oldMatch = planFile.match(/^(\d{2}-\d{2})-PLAN\.md$/);
     const newMatch = planFile.match(/^PLAN-(\d{2})\.md$/);
     const planId = oldMatch ? oldMatch[1] : newMatch ? `${phaseId.padStart(2, '0')}-${newMatch[1]}` : `${phaseId.padStart(2, '0')}-${String(index + 1).padStart(2, '0')}`;
-    return { planId, planFile, summaryPath: join(phaseFullPath, `SUMMARY-${planId}.md`) };
+    // Summary files use just the sequence number for PLAN-NN.md format (SUMMARY-NN.md)
+    const summaryName = newMatch ? `SUMMARY-${newMatch[1]}.md` : `SUMMARY-${planId}.md`;
+    return { planId, planFile, summaryPath: join(phaseFullPath, summaryName) };
   });
 
   const summaryResults = await Promise.allSettled(
@@ -257,7 +259,9 @@ export async function getPhaseDocument(projectDir, phaseId, planId, docType) {
   } else if (docType === 'verification') {
     fileNames = ['VERIFICATION.md'];
   } else {
-    fileNames = [`SUMMARY-${planId}.md`];
+    // Try both formats: SUMMARY-NN.md (sequence only) and SUMMARY-{planId}.md (full ID)
+    const seqMatch = planId.match(/^\d{2}-(\d{2})$/);
+    fileNames = seqMatch ? [`SUMMARY-${seqMatch[1]}.md`, `SUMMARY-${planId}.md`] : [`SUMMARY-${planId}.md`];
   }
 
   for (const fileName of fileNames) {

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

@@ -1,19 +1,27 @@
 <% if (!recentActivity || recentActivity.length === 0) { %>
-  <p class="muted">No recent activity.</p>
+  <%- include('empty-state', { title: 'No recent activity' }) %>
 <% } else { %>
-<ul class="activity-feed">
+<div class="list-group list-group-flush">
   <% recentActivity.forEach(function(item) { %>
   <%
     // Format path: strip .planning/ prefix for brevity
-    var displayPath = item.path.replace(/^\.planning\//, '');
+    var displayPath = (item.path || item.description || String(item)).replace(/^\.planning\//, '');
     // Format timestamp: show just date+time, no timezone
-    var ts = item.timestamp || '';
+    var ts = item.timestamp || item.time || item.date || '';
     var dateOnly = ts.replace(/\s+[-+]\d{4}$/, '').replace(/:\d{2}$/, '');
   %>
-  <li class="activity-item">
-    <span class="activity-path"><%= displayPath %></span>
-    <time class="activity-time" datetime="<%= ts %>"><%= dateOnly %></time>
-  </li>
+  <div class="list-group-item">
+    <div class="row align-items-center">
+      <div class="col text-truncate">
+        <span class="text-truncate small"><%= displayPath %></span>
+      </div>
+      <% if (dateOnly) { %>
+      <div class="col-auto">
+        <time class="text-muted small" datetime="<%= ts %>"><%= dateOnly %></time>
+      </div>
+      <% } %>
+    </div>
+  </div>
   <% }); %>
-</ul>
+</div>
 <% } %>