@sienklogic/plan-build-run 2.24.0 → 2.26.0

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

@@ -0,0 +1,196 @@
+<div class="config-page">
+  <div class="page-header">
+    <h1>Config</h1>
+    <p class="subtitle">Manage <code>.planning/config.json</code></p>
+  </div>
+
+  <% if (!config || !config.version) { %>
+    <div class="card">
+      <div class="card__body">
+        <p>No <code>.planning/config.json</code> found for this project.</p>
+      </div>
+    </div>
+  <% } else { %>
+
+  <form
+    hx-post="/api/config"
+    hx-target="#config-feedback"
+    hx-swap="innerHTML"
+    id="config-form"
+  >
+    <%# ── Common Settings ─────────────────────────────────────────── %>
+    <details class="card config-section" open>
+      <summary class="card__header"><h2>Common Settings</h2></summary>
+      <div class="card__body">
+
+        <%# Mode & Depth %>
+        <div class="config-row">
+          <label for="cfg-mode">Mode</label>
+          <select id="cfg-mode" name="mode">
+            <% ['normal', 'strict', 'relaxed'].forEach(opt => { %>
+              <option value="<%= opt %>" <%= config.mode === opt ? 'selected' : '' %>><%= opt %></option>
+            <% }); %>
+          </select>
+        </div>
+
+        <div class="config-row">
+          <label for="cfg-depth">Depth</label>
+          <select id="cfg-depth" name="depth">
+            <% ['minimal', 'standard', 'comprehensive'].forEach(opt => { %>
+              <option value="<%= opt %>" <%= config.depth === opt ? 'selected' : '' %>><%= opt %></option>
+            <% }); %>
+          </select>
+        </div>
+
+        <div class="config-row">
+          <label for="cfg-context-strategy">Context Strategy</label>
+          <select id="cfg-context-strategy" name="context_strategy">
+            <% ['conservative', 'balanced', 'aggressive'].forEach(opt => { %>
+              <option value="<%= opt %>" <%= config.context_strategy === opt ? 'selected' : '' %>><%= opt %></option>
+            <% }); %>
+          </select>
+        </div>
+
+        <%# Features toggles %>
+        <% if (config.features && typeof config.features === 'object') { %>
+        <fieldset class="config-fieldset">
+          <legend>Features</legend>
+          <% for (const [key, val] of Object.entries(config.features)) { %>
+          <div class="config-toggle-row">
+            <label>
+              <input
+                type="checkbox"
+                role="switch"
+                name="features.<%= key %>"
+                value="on"
+                <%= val ? 'checked' : '' %>
+              />
+              <%= key %>
+            </label>
+          </div>
+          <% } %>
+        </fieldset>
+        <% } %>
+
+        <%# Gates toggles %>
+        <% if (config.gates && typeof config.gates === 'object') { %>
+        <fieldset class="config-fieldset">
+          <legend>Gates</legend>
+          <% for (const [key, val] of Object.entries(config.gates)) { %>
+          <div class="config-toggle-row">
+            <label>
+              <input
+                type="checkbox"
+                role="switch"
+                name="gates.<%= key %>"
+                value="on"
+                <%= val ? 'checked' : '' %>
+              />
+              <%= key %>
+            </label>
+          </div>
+          <% } %>
+        </fieldset>
+        <% } %>
+
+        <%# Safety toggles %>
+        <% if (config.safety && typeof config.safety === 'object') { %>
+        <fieldset class="config-fieldset">
+          <legend>Safety</legend>
+          <% for (const [key, val] of Object.entries(config.safety)) { %>
+          <div class="config-toggle-row">
+            <label>
+              <input
+                type="checkbox"
+                role="switch"
+                name="safety.<%= key %>"
+                value="on"
+                <%= val ? 'checked' : '' %>
+              />
+              <%= key %>
+            </label>
+          </div>
+          <% } %>
+        </fieldset>
+        <% } %>
+
+        <%# Model selections %>
+        <% if (config.models && typeof config.models === 'object') { %>
+        <fieldset class="config-fieldset">
+          <legend>Models</legend>
+          <% for (const [key, val] of Object.entries(config.models)) { %>
+          <div class="config-row">
+            <label for="cfg-model-<%= key %>"><%= key %></label>
+            <input
+              id="cfg-model-<%= key %>"
+              type="text"
+              name="models.<%= key %>"
+              value="<%= val %>"
+            />
+          </div>
+          <% } %>
+        </fieldset>
+        <% } %>
+
+        <%# Parallelization number inputs %>
+        <% if (config.parallelization && typeof config.parallelization === 'object') { %>
+        <fieldset class="config-fieldset">
+          <legend>Parallelization</legend>
+          <% for (const [key, val] of Object.entries(config.parallelization)) { %>
+          <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 { %>
+            <input id="cfg-par-<%= key %>" type="text" name="parallelization.<%= key %>" value="<%= val %>" />
+            <% } %>
+          </div>
+          <% } %>
+        </fieldset>
+        <% } %>
+
+        <%# Planning number/text inputs %>
+        <% if (config.planning && typeof config.planning === 'object') { %>
+        <fieldset class="config-fieldset">
+          <legend>Planning</legend>
+          <% for (const [key, val] of Object.entries(config.planning)) { %>
+          <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 { %>
+            <input id="cfg-plan-<%= key %>" type="text" name="planning.<%= key %>" value="<%= val %>" />
+            <% } %>
+          </div>
+          <% } %>
+        </fieldset>
+        <% } %>
+
+      </div><%# end card__body %>
+    </details>
+
+    <%# ── Advanced (raw JSON) ─────────────────────────────────────── %>
+    <details class="card config-section">
+      <summary class="card__header"><h2>Advanced (Raw JSON)</h2></summary>
+      <div class="card__body">
+        <p class="config-hint">Edit the full config as JSON. On save, this value overrides the form above.</p>
+        <textarea
+          id="cfg-raw-json"
+          name="rawJson"
+          class="config-raw-json"
+          rows="24"
+          spellcheck="false"
+        ><%= JSON.stringify(config, null, 2) %></textarea>
+        <p class="config-hint">Tip: clear this field to save using the form controls above.</p>
+      </div>
+    </details>
+
+    <div class="config-actions">
+      <button type="submit">Save Config</button>
+      <span id="config-feedback"></span>
+    </div>
+
+  </form>
+
+  <% } %>
+</div>

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

@@ -1,37 +1,49 @@
 <%- include('breadcrumbs', { breadcrumbs: typeof breadcrumbs !== 'undefined' ? breadcrumbs : [] }) %>
 <h1><%= projectName %></h1>
 
-<!-- Hero Stat Row -->
-<div class="hero-stats">
-  <!-- Current Phase -->
-  <article>
+<!-- Status Cards -->
+<div class="status-cards">
+  <!-- Current Phase Card -->
+  <article class="status-card">
     <header><strong>Current Phase</strong></header>
     <% if (currentPhase.id > 0) { %>
-      <p class="stat-value">
+      <p>
         <a href="/phases/<%= String(currentPhase.id).padStart(2, '0') %>"
            hx-get="/phases/<%= String(currentPhase.id).padStart(2, '0') %>"
            hx-target="#main-content"
            hx-push-url="true">
-          <span class="status-badge" data-status="in-progress">Phase <%= currentPhase.id %></span>
+          <span class="status-badge" data-status="<%= currentPhase.status %>">Phase <%= currentPhase.id %></span>
           <%= currentPhase.name %>
         </a>
       </p>
     <% } else { %>
-      <p class="stat-value">No active phase</p>
+      <p>No active phase</p>
     <% } %>
+    <footer><small><%= currentPhase.planStatus %></small></footer>
   </article>
 
-  <!-- Progress -->
-  <article>
-    <header><strong>Progress</strong></header>
-    <p class="stat-value"><%= progress %>%</p>
-    <progress value="<%= progress %>" max="100"></progress>
+  <!-- Milestone Progress Card -->
+  <article class="status-card">
+    <header><strong>Milestone Progress</strong></header>
+    <p>
+      <progress value="<%= progress %>" max="100"></progress>
+      <span><%= progress %>%</span>
+    </p>
+    <footer>
+      <small>
+        <% if (phases && phases.length > 0) { %>
+          <%= phases.filter(function(p) { return p.status === 'complete'; }).length %> of <%= phases.length %> phases complete
+        <% } else { %>
+          &mdash;
+        <% } %>
+      </small>
+    </footer>
   </article>
 
-  <!-- Pending Todos -->
-  <article>
+  <!-- Pending Todos Card -->
+  <article class="status-card">
     <header><strong>Pending Todos</strong></header>
-    <p class="stat-value">
+    <p>
       <a href="/todos"
          hx-get="/todos"
          hx-target="#main-content"
@@ -39,46 +51,59 @@
         <%= typeof pendingTodoCount !== 'undefined' ? pendingTodoCount : 0 %>
       </a>
     </p>
+    <footer><small>P0/P1 items need attention</small></footer>
   </article>
 
-  <!-- Last Activity -->
-  <article>
+  <!-- Last Activity Card -->
+  <article class="status-card">
     <header><strong>Last Activity</strong></header>
     <% if (lastActivity.date) { %>
-      <p class="stat-value"><%= lastActivity.date %></p>
-      <p><small><%= lastActivity.description %></small></p>
+      <p><%= lastActivity.date %></p>
+      <footer><small><%= lastActivity.description %></small></footer>
     <% } else { %>
-      <p class="stat-value">None</p>
+      <p>&mdash;</p>
     <% } %>
   </article>
 </div>
 
+<!-- Phase Timeline -->
+<section class="section-timeline">
+  <h2>Phase Timeline</h2>
+  <%- include('phase-timeline', { phases: phases, currentPhase: currentPhase }) %>
+</section>
+
+<!-- Activity Feed -->
+<section class="section-activity">
+  <h2>Recent Activity</h2>
+  <%- include('activity-feed', { recentActivity: typeof recentActivity !== 'undefined' ? recentActivity : [] }) %>
+</section>
+
 <!-- Quick Actions -->
 <div class="quick-actions">
-  <% var phaseId = String(currentPhase.id).padStart(2, '0'); %>
-  <a role="button" class="outline"
-     href="/phases/<%= phaseId %>"
-     hx-get="/phases/<%= phaseId %>"
-     hx-target="#main-content"
-     hx-push-url="true">Current Phase</a>
-  <a role="button" class="outline"
-     href="/roadmap"
-     hx-get="/roadmap"
-     hx-target="#main-content"
-     hx-push-url="true">Roadmap</a>
-  <a role="button" class="outline"
-     href="/todos/new"
-     hx-get="/todos/new"
-     hx-target="#main-content"
-     hx-push-url="true">Create Todo</a>
+  <% if (typeof quickActions !== 'undefined' && quickActions && quickActions.length > 0) { %>
+    <% quickActions.forEach(function(action) { %>
+      <a role="button" class="<%= action.primary ? '' : 'outline' %>"
+         href="<%= action.href %>"
+         hx-get="<%= action.href %>"
+         hx-target="#main-content"
+         hx-push-url="true"><%= action.label %></a>
+    <% }); %>
+  <% } else { %>
+    <% var phaseId = String(currentPhase.id).padStart(2, '0'); %>
+    <a role="button" class="outline"
+       href="/phases/<%= phaseId %>"
+       hx-get="/phases/<%= phaseId %>"
+       hx-target="#main-content"
+       hx-push-url="true">Current Phase</a>
+    <a role="button" class="outline"
+       href="/roadmap"
+       hx-get="/roadmap"
+       hx-target="#main-content"
+       hx-push-url="true">Roadmap</a>
+    <a role="button" class="outline"
+       href="/todos/new"
+       hx-get="/todos/new"
+       hx-target="#main-content"
+       hx-push-url="true">Create Todo</a>
+  <% } %>
 </div>
-
-<!-- Project Notes (if available) -->
-<% if (content && content !== '<p>No project README found.</p>') { %>
-<article>
-  <header>
-    <strong>Project Notes</strong>
-  </header>
-  <%- content %>
-</article>
-<% } %>

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

@@ -0,0 +1,17 @@
+<div id="log-entries"
+     style="max-height:60vh;overflow-y:auto;font-family:var(--font-mono,monospace);font-size:0.78rem;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);padding:0.5rem">
+  <% if (typeof logData !== 'undefined' && logData && logData.entries.length > 0) { %>
+    <% logData.entries.forEach(function(entry) { %>
+    <div class="log-entry" style="padding:0.2rem 0;border-bottom:1px solid var(--card-border);word-break:break-all">
+      <span style="color:var(--muted-fg,#888)"><%= entry.timestamp ? String(entry.timestamp).slice(0,19).replace('T',' ') : '' %></span>
+      <% if (entry.type) { %><span class="status-badge status-badge--sm" data-status="<%= entry.type %>"><%= entry.type %></span><% } %>
+      <% if (entry.tool) { %><strong><%= entry.tool %></strong><% } %>
+      <% if (entry.message) { %><span><%= String(entry.message).slice(0,200) %></span><% } %>
+    </div>
+    <% }); %>
+  <% } else if (typeof logData !== 'undefined' && logData) { %>
+    <p style="padding:0.5rem;margin:0;color:var(--muted-fg,#888)">No entries match the current filter.</p>
+  <% } else { %>
+    <p style="padding:0.5rem;margin:0;color:var(--muted-fg,#888)">Waiting for live entries...</p>
+  <% } %>
+</div>

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>
     <% } %>