@sienklogic/plan-build-run 2.27.0 → 2.27.2

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

@@ -2,9 +2,11 @@
 <h1>Phases</h1>
 
 <% if (phases.length === 0) { %>
-<article>
-  <p>No phases found. Add a ROADMAP.md file to your .planning/ directory to see phases here.</p>
-</article>
+<div class="card mb-3">
+  <div class="card-body">
+    <p>No phases found. Add a ROADMAP.md file to your .planning/ directory to see phases here.</p>
+  </div>
+</div>
 <% } else { %>
 
 <%
@@ -20,20 +22,28 @@
 %>
 
 <!-- Summary -->
-<article>
-  <header><strong>Summary</strong></header>
-  <p>
-    <%= 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>
+<div class="card mb-3">
+  <div class="card-header"><strong>Summary</strong></div>
+  <div class="card-body">
+    <p>
+      <%= phases.filter(p => p.status === 'complete').length %> of <%= phases.length %> phases complete<%= milestoneGroups.length > 0 ? ' across ' + milestoneGroups.length + ' milestone' + (milestoneGroups.length !== 1 ? 's' : '') : '' %>.
+    </p>
+    <div class="progress" style="height:0.5rem">
+      <div class="progress-bar" role="progressbar"
+           style="width:<%= phases.filter(p => p.status === 'complete').length / phases.length * 100 %>%"
+           aria-valuenow="<%= phases.filter(p => p.status === 'complete').length %>"
+           aria-valuemin="0" aria-valuemax="<%= phases.length %>">
+      </div>
+    </div>
+  </div>
+</div>
 
 <% milestoneGroups.forEach(function(group) { %>
-<article>
-  <header>
+<div class="card mb-3">
+  <div class="card-header">
     <strong><%= group.name %></strong>
-    <small>(Phases <%= String(group.startPhase).padStart(2, '0') %>&ndash;<%= String(group.endPhase).padStart(2, '0') %>)</small>
-    &mdash;
+    <small class="ms-1">(Phases <%= String(group.startPhase).padStart(2, '0') %>&ndash;<%= String(group.endPhase).padStart(2, '0') %>)</small>
+    &nbsp;&mdash;&nbsp;
     <%
       const groupComplete = group.phases.filter(p => p.status === 'complete').length;
       const groupTotal = group.phases.length;
@@ -41,83 +51,87 @@
     <span class="status-badge" data-status="<%= groupComplete === groupTotal ? 'complete' : (groupComplete > 0 ? 'in-progress' : 'not-started') %>">
       <%= groupComplete %>/<%= groupTotal %>
     </span>
-  </header>
-  <% if (group.goal) { %>
-    <p><small><%= group.goal %></small></p>
-  <% } %>
-  <div class="table-wrap">
-  <table>
-    <thead>
-      <tr>
-        <th scope="col">Phase</th>
-        <th scope="col">Name</th>
-        <th scope="col">Plans</th>
-        <th scope="col">Status</th>
-      </tr>
-    </thead>
-    <tbody>
-      <% group.phases.forEach(function(phase) { %>
-      <tr>
-        <td><%= String(phase.id).padStart(2, '0') %></td>
-        <td>
-          <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>
-        <td><%= phase.planCount %></td>
-        <td>
-          <span class="status-badge" data-status="<%= phase.status %>">
-            <%= phase.status.replace('-', ' ') %>
-          </span>
-        </td>
-      </tr>
-      <% }); %>
-    </tbody>
-  </table>
   </div>
-</article>
+  <div class="card-body">
+    <% if (group.goal) { %>
+      <p><small><%= group.goal %></small></p>
+    <% } %>
+    <div class="table-responsive">
+    <table class="table table-vcenter table-hover">
+      <thead>
+        <tr>
+          <th scope="col">Phase</th>
+          <th scope="col">Name</th>
+          <th scope="col">Plans</th>
+          <th scope="col">Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% group.phases.forEach(function(phase) { %>
+        <tr>
+          <td><%= String(phase.id).padStart(2, '0') %></td>
+          <td>
+            <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>
+          <td><%= phase.planCount %></td>
+          <td>
+            <span class="status-badge" data-status="<%= phase.status %>">
+              <%= phase.status.replace('-', ' ') %>
+            </span>
+          </td>
+        </tr>
+        <% }); %>
+      </tbody>
+    </table>
+    </div>
+  </div>
+</div>
 <% }); %>
 
 <% if (ungrouped.length > 0) { %>
-<article>
-  <header><strong>Other Phases</strong></header>
-  <div class="table-wrap">
-  <table>
-    <thead>
-      <tr>
-        <th scope="col">Phase</th>
-        <th scope="col">Name</th>
-        <th scope="col">Plans</th>
-        <th scope="col">Status</th>
-      </tr>
-    </thead>
-    <tbody>
-      <% ungrouped.forEach(function(phase) { %>
-      <tr>
-        <td><%= String(phase.id).padStart(2, '0') %></td>
-        <td>
-          <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>
-        <td><%= phase.planCount %></td>
-        <td>
-          <span class="status-badge" data-status="<%= phase.status %>">
-            <%= phase.status.replace('-', ' ') %>
-          </span>
-        </td>
-      </tr>
-      <% }); %>
-    </tbody>
-  </table>
+<div class="card mb-3">
+  <div class="card-header"><strong>Other Phases</strong></div>
+  <div class="card-body">
+    <div class="table-responsive">
+    <table class="table table-vcenter table-hover">
+      <thead>
+        <tr>
+          <th scope="col">Phase</th>
+          <th scope="col">Name</th>
+          <th scope="col">Plans</th>
+          <th scope="col">Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% ungrouped.forEach(function(phase) { %>
+        <tr>
+          <td><%= String(phase.id).padStart(2, '0') %></td>
+          <td>
+            <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>
+          <td><%= phase.planCount %></td>
+          <td>
+            <span class="status-badge" data-status="<%= phase.status %>">
+              <%= phase.status.replace('-', ' ') %>
+            </span>
+          </td>
+        </tr>
+        <% }); %>
+      </tbody>
+    </table>
+    </div>
   </div>
-</article>
+</div>
 <% } %>
 
 <% } %>

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

@@ -2,39 +2,41 @@
 <h1>Quick Tasks</h1>
 
 <% if (typeof tasks !== 'undefined' && tasks.length > 0) { %>
-<article>
-  <div class="table-wrap">
-  <table>
-    <thead>
-      <tr>
-        <th scope="col">ID</th>
-        <th scope="col">Title</th>
-        <th scope="col">Status</th>
-      </tr>
-    </thead>
-    <tbody>
-      <% tasks.forEach(function(task) { %>
-      <tr>
-        <td><%= task.id %></td>
-        <td>
-          <a href="/quick/<%= task.id %>"
-             hx-get="/quick/<%= task.id %>"
-             hx-target="#main-content"
-             hx-push-url="true">
-            <%= task.title %>
-          </a>
-        </td>
-        <td>
-          <span class="status-badge" data-status="<%= task.status %>">
-            <%= task.status %>
-          </span>
-        </td>
-      </tr>
-      <% }); %>
-    </tbody>
-  </table>
+<div class="card">
+  <div class="card-body p-0">
+    <div class="table-responsive">
+    <table class="table table-vcenter card-table">
+      <thead>
+        <tr>
+          <th scope="col">ID</th>
+          <th scope="col">Title</th>
+          <th scope="col">Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% tasks.forEach(function(task) { %>
+        <tr>
+          <td><%= task.id %></td>
+          <td>
+            <a href="/quick/<%= task.id %>"
+               hx-get="/quick/<%= task.id %>"
+               hx-target="#main-content"
+               hx-push-url="true">
+              <%= task.title %>
+            </a>
+          </td>
+          <td>
+            <span class="status-badge" data-status="<%= task.status %>">
+              <%= task.status %>
+            </span>
+          </td>
+        </tr>
+        <% }); %>
+      </tbody>
+    </table>
+    </div>
   </div>
-</article>
+</div>
 <% } else { %>
 <%- include('empty-state', { icon: '⚡', title: 'No quick tasks found', action: '' }) %>
 <% } %>

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

@@ -1,29 +1,30 @@
 <%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
 <h1><%= title %></h1>
 
-<p><a href="/quick">&larr; Back to Quick Tasks</a></p>
+<p><a href="/quick" class="btn btn-outline-secondary">&larr; Back to Quick Tasks</a></p>
 
-<article>
-  <header>
+<div class="card mb-3">
+  <div class="card-header">
     <strong>Quick Task <%= id %></strong>
     &nbsp;
     <span class="status-badge" data-status="<%= status %>">
       <%= status %>
     </span>
-  </header>
+  </div>
+  <div class="card-body">
+    <% if (planHtml) { %>
+    <section>
+      <h2>Plan</h2>
+      <%- planHtml %>
+    </section>
+    <% } %>
 
-  <% if (planHtml) { %>
-  <section>
-    <h2>Plan</h2>
-    <%- planHtml %>
-  </section>
-  <% } %>
-
-  <% if (summaryHtml) { %>
-  <hr>
-  <section>
-    <h2>Summary</h2>
-    <%- summaryHtml %>
-  </section>
-  <% } %>
-</article>
+    <% if (summaryHtml) { %>
+    <hr>
+    <section>
+      <h2>Summary</h2>
+      <%- summaryHtml %>
+    </section>
+    <% } %>
+  </div>
+</div>

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

@@ -17,19 +17,19 @@
 <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">
+  <div class="card mb-2 requirements-card" data-covered="<%= req.covered %>">
+    <div 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">
+    </div>
+    <div class="card-body">
       <p><%= req.text %></p>
       <% if (req.planRefs.length > 0) { %>
-      <p class="req-plan-refs">
+      <p class="req-plan-refs mb-0">
         <small>Plans: </small>
         <% req.planRefs.forEach(function(planId) { %>
         <code class="req-plan-ref"><%= planId %></code>
@@ -37,7 +37,7 @@
       </p>
       <% } %>
     </div>
-  </article>
+  </div>
   <% }); %>
 </section>
 <% }); %>

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

@@ -6,17 +6,17 @@
 <%- 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">
+<div class="card mb-2">
+  <div 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.date) { %><small class="ms-auto text-muted"><%= doc.date %></small><% } %>
+  </div>
+  <div class="card-body">
     <% if (doc.topic) { %><p><strong>Topic:</strong> <%= doc.topic %></p><% } %>
     <% if (doc.confidence || doc.coverage) { %>
     <p>
@@ -25,10 +25,10 @@
     </p>
     <% } %>
     <% if (!doc.topic && !doc.confidence && !doc.coverage) { %>
-    <p class="muted"><small>Click to view full document</small></p>
+    <p class="text-muted mb-0"><small>Click to view full document</small></p>
     <% } %>
   </div>
-</article>
+</div>
 <% }); %>
 <% } %>
 
@@ -37,20 +37,20 @@
 <%- 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">
+<div class="card mb-2">
+  <div 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.date) { %><small class="ms-auto text-muted"><%= doc.date %></small><% } %>
+  </div>
+  <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><% } %>
+    <% if (!doc.focus) { %><p class="text-muted mb-0"><small>Click to view full document</small></p><% } %>
   </div>
-</article>
+</div>
 <% }); %>
 <% } %>

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

@@ -2,22 +2,24 @@
 <h1><%= title %></h1>
 
 <% if (topic || date || confidence || coverage || sources_checked) { %>
-<aside class="research-meta">
-  <% if (topic) { %><p><strong>Topic:</strong> <%= topic %></p><% } %>
-  <% if (date) { %><p><strong>Date:</strong> <%= date %></p><% } %>
-  <% if (confidence) { %><p><strong>Confidence:</strong> <span class="status-badge" data-status="<%= confidence %>"><%= confidence %></span></p><% } %>
-  <% if (coverage) { %><p><strong>Coverage:</strong> <%= coverage %></p><% } %>
-  <% if (sources_checked) { %><p><strong>Sources checked:</strong> <%= sources_checked %></p><% } %>
-</aside>
+<div class="card mb-3">
+  <div class="card-body">
+    <% if (topic) { %><p><strong>Topic:</strong> <%= topic %></p><% } %>
+    <% if (date) { %><p><strong>Date:</strong> <%= date %></p><% } %>
+    <% if (confidence) { %><p><strong>Confidence:</strong> <span class="status-badge" data-status="<%= confidence %>"><%= confidence %></span></p><% } %>
+    <% if (coverage) { %><p><strong>Coverage:</strong> <%= coverage %></p><% } %>
+    <% if (sources_checked) { %><p class="mb-0"><strong>Sources checked:</strong> <%= sources_checked %></p><% } %>
+  </div>
+</div>
 <% } %>
 
-<article class="card">
-  <div class="card__body markdown-body">
+<div class="card mb-3">
+  <div class="card-body markdown-body">
     <%- html %>
   </div>
-</article>
+</div>
 
-<p><a href="/research"
+<p><a href="/research" class="btn btn-outline-secondary"
       hx-get="/research"
       hx-target="#main-content"
       hx-push-url="true">&larr; Back to Research</a></p>