@sienklogic/plan-build-run 2.15.0 → 2.16.0

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

@@ -139,6 +139,79 @@ function extractMilestones(roadmapContent) {
  * @param {string} projectDir - Absolute path to the project root
  * @returns {Promise<{phases: Array, milestones: Array}>}
  */
+/**
+ * Generate a Mermaid flowchart string from ROADMAP.md phase dependencies.
+ *
+ * @param {string} projectDir - Absolute path to the project root
+ * @returns {Promise<string>} Mermaid flowchart definition
+ */
+export async function generateDependencyMermaid(projectDir) {
+  const { phases, milestones } = await getRoadmapData(projectDir);
+
+  if (phases.length === 0) {
+    return 'graph TD\n  empty["No phases found"]';
+  }
+
+  // Read raw ROADMAP.md for dependencies
+  let dependencyMap = new Map();
+  try {
+    const roadmapPath = join(projectDir, '.planning', 'ROADMAP.md');
+    const rawContent = stripBOM(await readFile(roadmapPath, 'utf-8')).replace(/\r\n/g, '\n');
+    dependencyMap = extractAllDependencies(rawContent);
+  } catch (_err) {
+    // No ROADMAP.md — proceed with no deps
+  }
+
+  // Detect current phase (first non-complete phase, or last phase)
+  const currentPhase = phases.find(p => p.status !== 'Complete') || phases[phases.length - 1];
+
+  const lines = ['graph TD'];
+
+  // Group phases by milestone
+  const phaseById = new Map(phases.map(p => [p.id, p]));
+
+  if (milestones.length > 0) {
+    for (const ms of milestones) {
+      const msPhases = phases.filter(p => p.id >= ms.startPhase && p.id <= ms.endPhase);
+      if (msPhases.length === 0) continue;
+      const safeName = ms.name.replace(/"/g, '#quot;');
+      lines.push(`  subgraph ${safeName}`);
+      for (const p of msPhases) {
+        const label = `Phase ${p.id}: ${p.name}`.replace(/"/g, '#quot;');
+        lines.push(`    P${p.id}["${label}"]`);
+      }
+      lines.push('  end');
+    }
+  } else {
+    for (const p of phases) {
+      const label = `Phase ${p.id}: ${p.name}`.replace(/"/g, '#quot;');
+      lines.push(`  P${p.id}["${label}"]`);
+    }
+  }
+
+  // Add dependency edges
+  for (const [phaseId, deps] of dependencyMap) {
+    if (!phaseById.has(phaseId)) continue;
+    for (const depId of deps) {
+      if (phaseById.has(depId)) {
+        lines.push(`  P${depId} --> P${phaseId}`);
+      }
+    }
+  }
+
+  // Style current phase
+  if (currentPhase) {
+    lines.push(`  style P${currentPhase.id} fill:#4caf50,color:#fff`);
+  }
+
+  // Click handlers
+  for (const p of phases) {
+    lines.push(`  click P${p.id} "/phases/${p.id}"`);
+  }
+
+  return lines.join('\n');
+}
+
 export async function getRoadmapData(projectDir) {
   const { phases: basePhases } = await parseRoadmapFile(projectDir);
 

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

@@ -75,7 +75,7 @@ function sortTodosByPriority(todos) {
  * @param {string} projectDir - Absolute path to the project root
  * @returns {Promise<Array<{id: string, title: string, priority: string, phase: string, status: string, created: string, filename: string}>>}
  */
-export async function listPendingTodos(projectDir) {
+export async function listPendingTodos(projectDir, filters = {}) {
   const pendingDir = join(projectDir, '.planning', 'todos', 'pending');
 
   let entries;
@@ -124,7 +124,16 @@ export async function listPendingTodos(projectDir) {
     });
   }
 
-  return sortTodosByPriority(todos);
+  sortTodosByPriority(todos);
+
+  // Apply filters
+  const { priority, status, q } = filters;
+  return todos.filter(todo => {
+    if (priority && todo.priority !== priority) return false;
+    if (status && todo.status !== status) return false;
+    if (q && !todo.title.toLowerCase().includes(q.toLowerCase())) return false;
+    return true;
+  });
 }
 
 /**

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

@@ -22,7 +22,7 @@ export function createWatcher(watchPath, onChange) {
     persistent: true,
     ignoreInitial: true,
     awaitWriteFinish: {
-      stabilityThreshold: 2000,
+      stabilityThreshold: 500,
       pollInterval: 100
     }
   });

package/dashboard/src/utils/cache.js

@@ -0,0 +1,55 @@
+/**
+ * Simple TTL (Time-To-Live) cache backed by a Map.
+ *
+ * Each entry stores { value, expiry } where expiry is a Unix-ms timestamp.
+ */
+export class TTLCache {
+  /**
+   * @param {number} [defaultTTL=60000] - Default time-to-live in milliseconds
+   */
+  constructor(defaultTTL = 60_000) {
+    this._store = new Map();
+    this._defaultTTL = defaultTTL;
+  }
+
+  /**
+   * Retrieve a cached value. Returns undefined if missing or expired.
+   * @param {string} key
+   * @returns {*}
+   */
+  get(key) {
+    const entry = this._store.get(key);
+    if (!entry) return undefined;
+    if (Date.now() > entry.expiry) {
+      this._store.delete(key);
+      return undefined;
+    }
+    return entry.value;
+  }
+
+  /**
+   * Store a value with an optional per-key TTL.
+   * @param {string} key
+   * @param {*} value
+   * @param {number} [ttlMs] - Override default TTL for this entry
+   */
+  set(key, value, ttlMs) {
+    const ttl = ttlMs ?? this._defaultTTL;
+    this._store.set(key, { value, expiry: Date.now() + ttl });
+  }
+
+  /**
+   * Remove a single key from the cache.
+   * @param {string} key
+   */
+  invalidate(key) {
+    this._store.delete(key);
+  }
+
+  /**
+   * Clear the entire cache.
+   */
+  invalidateAll() {
+    this._store.clear();
+  }
+}

package/dashboard/src/views/analytics.ejs

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

package/dashboard/src/views/dependencies.ejs

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

package/dashboard/src/views/error.ejs

@@ -1,13 +1,20 @@
 <%- include('partials/layout-top', { title: typeof title !== 'undefined' ? title : 'Error', activePage: '' }) %>
 
-<h1>Error <%= status %></h1>
-<p><%= message %></p>
-<% if (typeof stack !== 'undefined' && stack) { %>
-<details>
-  <summary>Stack Trace (Development Only)</summary>
-  <pre><code><%= stack %></code></pre>
-</details>
-<% } %>
-<p><a href="/">Return to Dashboard</a></p>
+<div class="error-card">
+  <div class="error-card__icon">&#x26A0;</div>
+  <h2>Error <%= status %></h2>
+  <div class="error-card__message">
+    <p><%= message %></p>
+  </div>
+  <% if (typeof stack !== 'undefined' && stack) { %>
+  <details>
+    <summary>Stack Trace (Development Only)</summary>
+    <pre><code><%= stack %></code></pre>
+  </details>
+  <% } %>
+  <div class="error-card__action">
+    <a href="javascript:history.back()">Go back</a> | <a href="/">Return to Dashboard</a>
+  </div>
+</div>
 
 <%- include('partials/layout-bottom') %>

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

@@ -0,0 +1,71 @@
+<%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
+
+<h1>Project Analytics</h1>
+
+<% if (typeof analytics !== 'undefined' && analytics.warning) { %>
+<article aria-label="warning" class="pico-background-yellow-100">
+  <strong>Warning:</strong> <%= analytics.warning %>
+</article>
+<% } %>
+
+<% if (typeof analytics !== 'undefined' && analytics.summary) { %>
+<div class="grid">
+  <article>
+    <header>Total Commits</header>
+    <strong style="font-size: 2rem;"><%= analytics.summary.totalCommits %></strong>
+  </article>
+  <article>
+    <header>Total Phases</header>
+    <strong style="font-size: 2rem;"><%= analytics.summary.totalPhases %></strong>
+  </article>
+  <article>
+    <header>Avg Duration</header>
+    <strong style="font-size: 2rem;"><%= analytics.summary.avgDuration %></strong>
+  </article>
+  <article>
+    <header>Lines Changed</header>
+    <strong style="font-size: 2rem;"><%= analytics.summary.totalLinesChanged.toLocaleString() %></strong>
+  </article>
+</div>
+<% } %>
+
+<% if (typeof analytics !== 'undefined' && analytics.phases && analytics.phases.length > 0) { %>
+<article>
+  <header>Per-Phase Metrics</header>
+  <div class="overflow-auto">
+    <table>
+      <thead>
+        <tr>
+          <th>Phase</th>
+          <th>Commits</th>
+          <th>Duration</th>
+          <th>Plans</th>
+          <th>Lines Changed</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% analytics.phases.sort((a, b) => a.phaseId.localeCompare(b.phaseId)).forEach(phase => { %>
+        <tr>
+          <td>
+            <a href="/phases/<%= phase.phaseId %>"
+               hx-get="/phases/<%= phase.phaseId %>"
+               hx-target="#main-content"
+               hx-push-url="true">
+              <%= phase.phaseId %> - <%= phase.phaseName %>
+            </a>
+          </td>
+          <td><%= phase.commitCount %></td>
+          <td><%= phase.duration || 'N/A' %></td>
+          <td><%= phase.planCount %></td>
+          <td><%= phase.linesChanged.toLocaleString() %></td>
+        </tr>
+        <% }) %>
+      </tbody>
+    </table>
+  </div>
+</article>
+<% } else if (typeof analytics === 'undefined' || !analytics.summary) { %>
+<%- include('empty-state', { icon: '📊', title: 'No analytics data available', action: '' }) %>
+<% } else { %>
+<p>No phase data available.</p>
+<% } %>

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

@@ -0,0 +1,14 @@
+<% if (typeof breadcrumbs !== 'undefined' && breadcrumbs.length > 0) { %>
+<nav aria-label="Breadcrumb">
+  <ol class="breadcrumbs">
+    <li><a href="/" hx-get="/" hx-target="#main-content" hx-push-url="true">&#8962;</a></li>
+    <% breadcrumbs.forEach(function(item, index) { %>
+      <% if (index < breadcrumbs.length - 1) { %>
+        <li><a href="<%= item.url %>" hx-get="<%= item.url %>" hx-target="#main-content" hx-push-url="true"><%= item.label %></a></li>
+      <% } else { %>
+        <li aria-current="page"><%= item.label %></li>
+      <% } %>
+    <% }); %>
+  </ol>
+</nav>
+<% } %>

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

@@ -1,3 +1,4 @@
+<%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
 <h1><%= projectName %></h1>
 
 <!-- Project Overview Card -->

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

@@ -0,0 +1,16 @@
+<%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
+
+<h1>Phase Dependencies</h1>
+
+<% if (typeof mermaidCode !== 'undefined' && mermaidCode && mermaidCode.trim()) { %>
+<article>
+  <pre class="mermaid"><%= mermaidCode %></pre>
+</article>
+<% } else { %>
+<%- include('empty-state', { icon: '🔗', title: 'No dependency data available', action: '' }) %>
+<% } %>
+
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({ startOnLoad: true, theme: 'default', securityLevel: 'loose' });
+</script>

package/dashboard/src/views/partials/empty-state.ejs

@@ -0,0 +1,7 @@
+<article class="empty-state">
+  <p style="font-size: 2.5rem; margin-bottom: 0;"><%= typeof icon !== 'undefined' ? icon : '' %></p>
+  <h3><%= typeof title !== 'undefined' ? title : 'No data available' %></h3>
+  <% if (typeof action !== 'undefined' && action) { %>
+  <%- action %>
+  <% } %>
+</article>

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

@@ -2,8 +2,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title><%= typeof title !== 'undefined' ? title : 'Plan-Build-Run' %> - Plan-Build-Run</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='80'>P</text></svg>">
   <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.0.6/css/pico.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.min.css" media="print" onload="this.media='all'">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-600-normal.min.css" media="print" onload="this.media='all'">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-700-normal.min.css" media="print" onload="this.media='all'">
@@ -14,6 +15,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-700-normal.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-normal.min.css">
   </noscript>
+  <link rel="stylesheet" href="/css/tokens.css">
   <link rel="stylesheet" href="/css/layout.css">
   <link rel="stylesheet" href="/css/status-colors.css">
   <script
@@ -24,4 +26,5 @@
   <script src="https://cdn.jsdelivr.net/npm/htmx-ext-sse@2.2.2/sse.js"></script>
   <script src="/js/htmx-title.js"></script>
   <script src="/js/sidebar-toggle.js"></script>
+  <script src="/js/theme-toggle.js"></script>
 </head>

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

@@ -1,9 +1,18 @@
+<style>
+  .theme-toggle { background: none; border: none; cursor: pointer; font-size: 1.2rem; padding: var(--space-xs); }
+</style>
 <header>
   <nav>
     <ul>
       <li><strong>PBR Dashboard</strong></li>
     </ul>
     <ul>
+      <li>
+        <span id="sse-status" data-connected="false" aria-label="SSE connection status"></span>
+      </li>
+      <li>
+        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">🌙</button>
+      </li>
       <li>
         <button class="sidebar-toggle" aria-label="Toggle navigation">&#9776;</button>
       </li>

package/dashboard/src/views/partials/layout-bottom.ejs

@@ -1,15 +1,6 @@
     </main>
     <%- include('footer') %>
   </div>
-  <div hx-ext="sse"
-       sse-connect="/api/events/stream"
-       sse-close="close">
-    <div hx-trigger="sse:file-change"
-         hx-get="<%= typeof currentPath !== 'undefined' ? currentPath : '/' %>"
-         hx-target="#main-content"
-         hx-swap="innerHTML"
-         style="display:none;">
-    </div>
-  </div>
+  <script src="/js/sse-client.js"></script>
 </body>
 </html>

package/dashboard/src/views/partials/layout-top.ejs

@@ -1,7 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
+<script>(function(){var t=localStorage.getItem('pbr-theme');if(t)document.documentElement.dataset.theme=t})()</script>
 <%- include('head', { title: typeof title !== 'undefined' ? title : 'PBR Dashboard' }) %>
 <body>
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+  <div class="loading-bar"></div>
+  <script>
+    document.body.addEventListener('htmx:beforeRequest', function() { document.body.classList.add('htmx-request'); });
+    document.body.addEventListener('htmx:afterRequest', function() { document.body.classList.remove('htmx-request'); });
+  </script>
   <div class="page-wrapper">
     <%- include('header') %>
     <%- include('sidebar', { activePage: typeof activePage !== 'undefined' ? activePage : '' }) %>

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

@@ -1,3 +1,4 @@
+<%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
 <h1>Milestone v<%= version %></h1>
 
 <p>

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

@@ -1,3 +1,4 @@
+<%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
 <h1>Milestones</h1>
 
 <% if (active.length > 0) { %>
@@ -17,28 +18,63 @@
 
 <% if (archived.length > 0) { %>
 <h2>Archived</h2>
-<% archived.forEach(function(m) { %>
 <article>
-  <header>
-    <strong>
-      <a href="/milestones/<%= m.version %>"
-         hx-get="/milestones/<%= m.version %>"
-         hx-target="#main-content"
-         hx-push-url="true">
-        v<%= m.version %> &mdash; <%= m.name %>
-      </a>
-    </strong>
-  </header>
-  <p>
-    <% if (m.date) { %><small>Completed: <%= m.date %></small><% } %>
-    <% if (m.duration) { %><small> &bull; Duration: <%= m.duration %></small><% } %>
-    <br>
-    <small><%= m.files.length %> archived file<%= m.files.length !== 1 ? 's' : '' %></small>
-  </p>
+  <div class="table-wrap">
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Version</th>
+        <th scope="col">Name</th>
+        <th scope="col">Date</th>
+        <th scope="col">Duration</th>
+        <th scope="col">Phases</th>
+        <th scope="col">Commits</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% archived.forEach(function(m) { %>
+      <tr>
+        <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><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><%= m.date || '—' %></span>
+                <span><%= m.duration || '—' %></span>
+                <span><%= m.stats && m.stats.phaseCount ? m.stats.phaseCount : '—' %></span>
+                <span><%= m.stats && m.stats.commitCount ? m.stats.commitCount : '—' %></span>
+              </span>
+            </summary>
+            <div style="padding:0.5rem 1rem 1rem">
+              <% if (m.stats && m.stats.statsHtml) { %>
+              <div><%= m.stats.statsHtml %></div>
+              <% } %>
+              <% if (m.stats && m.stats.deliverables && m.stats.deliverables.length > 0) { %>
+              <h4>Deliverables</h4>
+              <ul>
+                <% m.stats.deliverables.forEach(function(d) { %>
+                <li><a href="/milestones/<%= m.version %>"
+                       hx-get="/milestones/<%= m.version %>"
+                       hx-target="#main-content"
+                       hx-push-url="true"><%= d %></a></li>
+                <% }); %>
+              </ul>
+              <% } %>
+            </div>
+          </details>
+        </td>
+      </tr>
+      <% }); %>
+    </tbody>
+  </table>
+  </div>
 </article>
-<% }); %>
 <% } %>
 
 <% if (active.length === 0 && archived.length === 0) { %>
-<p>No milestones found. Use <code>/pbr:milestone new</code> to create one.</p>
+<%- include('empty-state', { icon: '🚩', title: 'No milestones yet', action: '' }) %>
 <% } %>

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

@@ -1,3 +1,4 @@
+<%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
 <h1>Phase <%= phaseId %>: <%= phaseName %></h1>
 
 <p><a href="/">&larr; Back to Dashboard</a></p>

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

@@ -1,7 +1,7 @@
 <%
   var docLabel = docType === 'plan' ? 'Plan' : 'Summary';
 %>
-
+<%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
 <h1><%= docLabel %> <%= planId %></h1>
 
 <p><a href="/phases/<%= phaseId %>">&larr; Back to Phase <%= phaseId %>: <%= phaseName %></a></p>

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

@@ -1,3 +1,4 @@
+<%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
 <h1>Phases</h1>
 
 <% if (phases.length === 0) { %>

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

@@ -1,3 +1,4 @@
+<%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
 <h1>Project Roadmap</h1>
 
 <% if (phases.length === 0) { %>