@sienklogic/plan-build-run 2.33.1 → 2.37.0

package/dashboard/public/css/settings.css

@@ -3,17 +3,17 @@
 /* Tab bar */
 .settings-tabs {
   display: flex;
-  gap: var(--size-2);
-  border-bottom: 2px solid var(--surface-3, #e2e8f0);
-  margin-bottom: var(--size-5);
+  gap: var(--space-sm);
+  border-bottom: 2px solid var(--color-border);
+  margin-bottom: var(--space-md);
   padding-bottom: 0;
 }
 
 /* Mode toggle (Form / Raw JSON) */
 .config-mode-toggle {
   display: flex;
-  gap: var(--size-2);
-  margin-bottom: var(--size-4);
+  gap: var(--space-sm);
+  margin-bottom: var(--space-md);
 }
 
 /* Tab buttons — shared by settings-tabs and config-mode-toggle */
@@ -21,44 +21,44 @@
   background: none;
   border: none;
   border-bottom: 2px solid transparent;
-  padding: var(--size-2) var(--size-4);
-  font-size: var(--font-size-1);
+  padding: var(--space-sm) var(--space-md);
+  font-size: 0.875rem;
   font-weight: 500;
-  color: var(--text-2, #64748b);
+  color: var(--color-text-dim);
   cursor: pointer;
   transition: color 0.15s ease, border-color 0.15s ease;
   margin-bottom: -2px;
 }
 
 .tab-btn:hover {
-  color: var(--text-1, #1e293b);
+  color: var(--color-text);
 }
 
 .tab-btn.active {
-  color: var(--link, #2563eb);
-  border-bottom-color: var(--link, #2563eb);
+  color: var(--color-accent);
+  border-bottom-color: var(--color-accent);
 }
 
 /* Config section card */
 .config-section {
-  border: 1px solid var(--surface-3, #e2e8f0);
-  border-radius: var(--radius-2);
-  padding: var(--size-4);
-  margin-bottom: var(--size-4);
-  background: var(--surface-1, #f8fafc);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: var(--space-md);
+  margin-bottom: var(--space-md);
+  background: var(--color-surface);
 }
 
 .config-section--nested {
-  margin-top: var(--size-4);
-  background: var(--surface-2, #f1f5f9);
+  margin-top: var(--space-md);
+  background: var(--color-surface-raised);
 }
 
 /* Section heading */
 .config-section__title {
-  font-size: var(--font-size-1);
+  font-size: 0.875rem;
   font-weight: 600;
-  color: var(--text-1, #1e293b);
-  margin: 0 0 var(--size-3) 0;
+  color: var(--color-text);
+  margin: 0 0 var(--space-sm) 0;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -67,10 +67,10 @@
 .config-field {
   display: flex;
   align-items: center;
-  gap: var(--size-3);
-  padding: var(--size-1) 0;
-  font-size: var(--font-size-1);
-  color: var(--text-1, #1e293b);
+  gap: var(--space-sm);
+  padding: var(--space-xs) 0;
+  font-size: 0.875rem;
+  color: var(--color-text);
   cursor: pointer;
 }
 
@@ -80,20 +80,20 @@
 
 .config-field__label {
   min-width: 12rem;
-  color: var(--text-2, #64748b);
-  font-size: var(--font-size-0);
+  color: var(--color-text-dim);
+  font-size: 0.8125rem;
 }
 
 .config-field input[type='text'],
 .config-field input[type='number'],
 .config-field select {
   flex: 1;
-  padding: var(--size-1) var(--size-2);
-  border: 1px solid var(--surface-3, #e2e8f0);
-  border-radius: var(--radius-1);
-  font-size: var(--font-size-0);
-  background: var(--surface-1, #fff);
-  color: var(--text-1, #1e293b);
+  padding: var(--space-xs) var(--space-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
+  background: var(--color-surface);
+  color: var(--color-text);
 }
 
 .config-field input[readonly] {
@@ -104,20 +104,20 @@
 .config-field input[type='checkbox'] {
   width: 1rem;
   height: 1rem;
-  accent-color: var(--link, #2563eb);
+  accent-color: var(--color-accent);
   cursor: pointer;
 }
 
 /* Raw JSON textarea */
 .config-raw-json {
   width: 100%;
-  font-family: var(--font-mono, 'JetBrains Mono', monospace);
-  font-size: var(--font-size-0);
-  padding: var(--size-3);
-  border: 1px solid var(--surface-3, #e2e8f0);
-  border-radius: var(--radius-2);
-  background: var(--surface-1, #f8fafc);
-  color: var(--text-1, #1e293b);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  padding: var(--space-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text);
   resize: vertical;
   box-sizing: border-box;
 }
@@ -126,30 +126,30 @@
 .config-actions {
   display: flex;
   justify-content: flex-end;
-  margin-bottom: var(--size-3);
+  margin-bottom: var(--space-sm);
 }
 
 /* Inline feedback */
 .config-feedback {
   min-height: 1.5rem;
-  margin-top: var(--size-2);
-  font-size: var(--font-size-0);
+  margin-top: var(--space-sm);
+  font-size: 0.8125rem;
 }
 
 .feedback--success {
-  color: var(--green-7, #15803d);
+  color: var(--status-complete);
   font-weight: 500;
 }
 
 .feedback--error {
-  color: var(--red-7, #b91c1c);
+  color: var(--status-blocked);
   font-weight: 500;
 }
 
 /* Empty state */
 .config-empty {
-  font-size: var(--font-size-0);
-  color: var(--text-2, #64748b);
+  font-size: 0.8125rem;
+  color: var(--color-text-dim);
   font-style: italic;
   margin: 0;
 }
@@ -158,52 +158,33 @@
 .btn--primary {
   display: inline-flex;
   align-items: center;
-  gap: var(--size-2);
-  padding: var(--size-2) var(--size-5);
-  background: var(--link, #2563eb);
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  background: var(--color-accent);
   color: #fff;
   border: none;
-  border-radius: var(--radius-2);
-  font-size: var(--font-size-1);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
   transition: background 0.15s ease;
 }
 
 .btn--primary:hover {
-  background: var(--blue-7, #1d4ed8);
-}
-
-/* Dark theme overrides */
-[data-theme='dark'] .config-section {
-  background: var(--surface-2, #1e2535);
-  border-color: var(--surface-3, #2d3748);
-}
-
-[data-theme='dark'] .config-section--nested {
-  background: var(--surface-1, #161e2d);
-}
-
-[data-theme='dark'] .config-raw-json,
-[data-theme='dark'] .config-field input[type='text'],
-[data-theme='dark'] .config-field input[type='number'],
-[data-theme='dark'] .config-field select {
-  background: var(--surface-2, #1e2535);
-  border-color: var(--surface-3, #2d3748);
-  color: var(--text-1, #e2e8f0);
+  background: var(--color-accent-hover);
 }
 
 /* ── Log Viewer ─────────────────────────────────────── */
 .log-viewer-layout {
   display: grid;
   grid-template-columns: 220px 1fr;
-  gap: var(--size-4);
-  height: calc(100vh - var(--size-12));
+  gap: var(--space-md);
+  height: calc(100vh - var(--space-2xl));
 }
 
 .log-file-sidebar {
-  border-right: 1px solid var(--surface-3);
-  padding-right: var(--size-3);
+  border-right: 1px solid var(--color-border);
+  padding-right: var(--space-sm);
   overflow-y: auto;
 }
 
@@ -215,57 +196,74 @@
 
 .log-file-item {
   display: block;
-  padding: var(--size-2) var(--size-3);
-  border-radius: var(--radius-2);
+  padding: var(--space-sm);
+  border-radius: var(--radius-sm);
   text-decoration: none;
-  color: var(--text-2);
-  font-size: var(--font-size-0);
+  color: var(--color-text-dim);
+  font-size: 0.8125rem;
   margin-block: 2px;
 }
 
-.log-file-item:hover { background: var(--surface-2); }
-.log-file-item--active { background: var(--surface-3); color: var(--text-1); font-weight: 500; }
+.log-file-item:hover { background: var(--color-surface-raised); }
+.log-file-item--active { background: var(--color-border); color: var(--color-text); font-weight: 500; }
 
 .log-file-name { display: block; font-family: var(--font-mono); font-size: 0.75rem; }
-.log-file-size { color: var(--text-2); }
-.log-file-date { color: var(--text-2); }
+.log-file-size { color: var(--color-text-dim); }
+.log-file-date { color: var(--color-text-dim); }
 
-.log-main { overflow-y: auto; padding-right: var(--size-2); }
+.log-main { overflow-y: auto; padding-right: var(--space-sm); }
 
 .log-filters {
   display: flex;
-  gap: var(--size-3);
+  gap: var(--space-sm);
   align-items: center;
-  margin-bottom: var(--size-3);
-  padding: var(--size-2) var(--size-3);
-  background: var(--surface-2);
-  border-radius: var(--radius-2);
+  margin-bottom: var(--space-sm);
+  padding: var(--space-sm);
+  background: var(--color-surface-raised);
+  border-radius: var(--radius-sm);
 }
 
 .log-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: var(--font-size-0);
+  font-size: 0.8125rem;
 }
 
 .log-table th,
 .log-table td {
   text-align: left;
-  padding: var(--size-1) var(--size-2);
-  border-bottom: 1px solid var(--surface-3);
+  padding: var(--space-xs) var(--space-sm);
+  border-bottom: 1px solid var(--color-border);
 }
 
-.log-table th { color: var(--text-2); font-weight: 500; }
+.log-table th { color: var(--color-text-dim); font-weight: 500; }
+
+.log-table th:first-child,
+.log-table td:first-child {
+  width: 80px;
+}
+
+.log-table th:nth-child(2),
+.log-table td:nth-child(2) {
+  width: 170px;
+  white-space: nowrap;
+}
+
+.log-table td:nth-child(3) {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  word-break: break-all;
+}
 
 .log-badge {
   display: inline-block;
   padding: 1px 6px;
-  border-radius: var(--radius-round);
+  border-radius: 999px;
   font-size: 0.7rem;
   font-weight: 600;
   text-transform: uppercase;
-  background: var(--surface-3);
-  color: var(--text-2);
+  background: var(--color-border);
+  color: var(--color-text-dim);
 }
 
 .log-badge--error { background: var(--red-2); color: var(--red-9); }
@@ -277,29 +275,29 @@
 
 .log-pagination {
   display: flex;
-  gap: var(--size-2);
+  gap: var(--space-sm);
   align-items: center;
-  padding: var(--size-2) 0;
+  padding: var(--space-sm) 0;
 }
 
 .log-tail-indicator {
   display: flex;
   align-items: center;
-  gap: var(--size-2);
-  font-size: var(--font-size-0);
-  color: var(--text-2);
-  margin-bottom: var(--size-2);
+  gap: var(--space-sm);
+  font-size: 0.8125rem;
+  color: var(--color-text-dim);
+  margin-bottom: var(--space-sm);
 }
 
 .tail-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--surface-3);
+  background: var(--color-border);
 }
 
 .tail-dot--active {
-  background: var(--green-6);
+  background: var(--status-complete);
   animation: pulse 1.5s ease-in-out infinite;
 }
 
@@ -308,7 +306,7 @@
   50% { opacity: 0.4; }
 }
 
-.log-tail-entries { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); }
-.log-tail-row { padding: 2px 0; border-bottom: 1px solid var(--surface-2); }
-.log-empty, .log-prompt { color: var(--text-2); padding: var(--size-4); }
-.log-summary { color: var(--text-2); font-size: var(--font-size-0); margin-bottom: var(--size-2); }
+.log-tail-entries { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-dim); }
+.log-tail-row { padding: 2px 0; border-bottom: 1px solid var(--color-surface-raised); }
+.log-empty, .log-prompt { color: var(--color-text-dim); padding: var(--space-md); }
+.log-summary { color: var(--color-text-dim); font-size: 0.8125rem; margin-bottom: var(--space-sm); }

package/dashboard/public/css/timeline.css

@@ -46,7 +46,7 @@
 
 .timeline__event {
   display: grid;
-  grid-template-columns: 1rem 10rem 9rem 1fr auto;
+  grid-template-columns: 1rem auto 5rem 1fr auto;
   align-items: start;
   gap: var(--space-sm);
   padding: var(--space-sm) 0;
@@ -91,6 +91,7 @@
 
 .timeline__event-title {
   font-size: 0.9rem;
+  overflow-wrap: anywhere;
 }
 
 .timeline__event-author {

package/dashboard/public/css/tokens.css

@@ -69,6 +69,19 @@
   --badge-font-size-sm: 0.6875rem;
   --badge-font-size-base: 0.75rem;
   --badge-font-size-lg: 0.8125rem;
+
+  /* Stat card tokens */
+  --stat-card-padding: var(--space-md) var(--space-lg);
+  --stat-card-value-size: 2rem;
+  --stat-card-label-size: 0.6875rem;
+  --stat-card-sub-size: 0.8125rem;
+  --sidebar-icon-size: 16px;
+
+  /* Section label tokens */
+  --section-label-size: 0.6875rem;
+  --section-label-weight: 600;
+  --section-label-spacing: 0.08em;
+  --section-label-color: var(--color-text-muted);
 }
 
 /* --- Dark Mode (explicit [data-theme="dark"] attribute) --- */

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

@@ -1,12 +1,26 @@
-// 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.getElementById('sidebar-toggle');
-  var sidebarMenu = document.getElementById('sidebar-menu');
-  if (!toggle || !sidebarMenu) return;
+  var sidebar = document.querySelector('.sidebar');
+  if (!toggle || !sidebar) return;
+
   toggle.addEventListener('click', function() {
-    sidebarMenu.classList.toggle('show');
+    sidebar.classList.toggle('sidebar--open');
+    document.body.classList.toggle('sidebar-visible');
+  });
+
+  // Close sidebar when a nav link is clicked (mobile)
+  sidebar.querySelectorAll('.sidebar__nav-link').forEach(function(link) {
+    link.addEventListener('click', function() {
+      sidebar.classList.remove('sidebar--open');
+      document.body.classList.remove('sidebar-visible');
+    });
+  });
+
+  // Close sidebar when clicking the backdrop
+  document.addEventListener('click', function(e) {
+    if (!sidebar.classList.contains('sidebar--open')) return;
+    if (sidebar.contains(e.target) || toggle.contains(e.target)) return;
+    sidebar.classList.remove('sidebar--open');
+    document.body.classList.remove('sidebar-visible');
   });
 });

package/dashboard/src/components/Layout.tsx

@@ -7,10 +7,30 @@ interface LayoutProps {
 }
 
 const navItems = [
-  { href: '/', label: 'Command Center', view: 'home' },
-  { href: '/explorer', label: 'Explorer', view: 'explorer' },
-  { href: '/timeline', label: 'Timeline', view: 'timeline' },
-  { href: '/settings', label: 'Settings', view: 'settings' },
+  {
+    href: '/',
+    label: 'Command Center',
+    view: 'home',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>',
+  },
+  {
+    href: '/explorer',
+    label: 'Explorer',
+    view: 'explorer',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>',
+  },
+  {
+    href: '/timeline',
+    label: 'Timeline',
+    view: 'timeline',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>',
+  },
+  {
+    href: '/settings',
+    label: 'Settings',
+    view: 'settings',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>',
+  },
 ];
 
 export function Layout({ title, children, currentView }: LayoutProps) {
@@ -50,15 +70,36 @@ export function Layout({ title, children, currentView }: LayoutProps) {
           })();
         </script>`}
         <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js" defer></script>
-        {html`<script>document.addEventListener('DOMContentLoaded', function() { mermaid.initialize({ startOnLoad: false, theme: 'neutral' }); });</script>`}
+        {html`<script>
+          document.addEventListener('DOMContentLoaded', function() {
+            function initMermaid() {
+              var isDark = document.documentElement.getAttribute('data-theme') === 'dark' ||
+                (!document.documentElement.getAttribute('data-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+              mermaid.initialize({ startOnLoad: false, theme: isDark ? 'dark' : 'neutral' });
+            }
+            initMermaid();
+            new MutationObserver(function(mutations) {
+              mutations.forEach(function(m) { if (m.attributeName === 'data-theme') initMermaid(); });
+            }).observe(document.documentElement, { attributes: true });
+          });
+        </script>`}
       </head>
       <body>
         <a href="#main-content" class="skip-link">Skip to content</a>
 
+        <button id="sidebar-toggle" class="sidebar__toggle" type="button" aria-label="Toggle navigation">
+          <span aria-hidden="true">☰</span>
+        </button>
+
         <nav class="sidebar" aria-label="Main navigation">
           <div class="sidebar__brand">
-            <span class="sidebar__brand-name">PBR</span>
-            <span class="sidebar__brand-subtitle">Dashboard</span>
+            <span class="sidebar__brand-icon" aria-hidden="true">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+            </span>
+            <div class="sidebar__brand-text">
+              <span class="sidebar__brand-name">PBR</span>
+              <span class="sidebar__brand-subtitle">Dashboard</span>
+            </div>
           </div>
 
           <ul class="sidebar__nav" role="list">
@@ -72,6 +113,7 @@ export function Layout({ title, children, currentView }: LayoutProps) {
                     class={`sidebar__nav-link${isActive ? ' sidebar__nav-link--active' : ''}`}
                     aria-current={isActive ? 'page' : undefined}
                   >
+                    <span class="sidebar__nav-icon" aria-hidden="true" dangerouslySetInnerHTML={{ __html: item.icon }} />
                     {item.label}
                   </a>
                 </li>
@@ -88,6 +130,7 @@ export function Layout({ title, children, currentView }: LayoutProps) {
         </nav>
 
         <main id="main-content" class="main-content">
+          <div class="loading-bar" aria-hidden="true"></div>
           {children}
         </main>
 
@@ -98,6 +141,7 @@ export function Layout({ title, children, currentView }: LayoutProps) {
         {/* Local scripts */}
         <script src="/js/theme-toggle.js"></script>
         <script src="/js/sse-client.js" defer></script>
+        <script src="/js/sidebar-toggle.js" defer></script>
       </body>
     </html>
   );

package/dashboard/src/components/explorer/tabs/MilestonesTab.tsx

@@ -1,6 +1,10 @@
 interface Milestone {
   version: string;
   name?: string;
+  goal?: string;
+  startPhase?: string | number;
+  endPhase?: string | number;
+  completed?: boolean;
   date?: string;
   duration?: string;
 }
@@ -27,9 +31,21 @@ export function MilestonesTab({ active, archived }: MilestonesTabProps) {
       {active.length === 0 && <p class="explorer__loading">No active milestones.</p>}
       <div class="explorer-list">
         {active.map((ms) => (
-          <div class="explorer-item" key={ms.version}>
+          <div class="explorer-item" key={ms.name || ms.version}>
             <div class="explorer-item__header">
-              <span class="explorer-item__title">v{ms.version}</span>
+              <span class="explorer-item__title">
+                {ms.name || `v${ms.version}`}
+              </span>
+              {ms.startPhase != null && ms.endPhase != null && (
+                <span class="explorer-item__meta">
+                  Phase {ms.startPhase}–{ms.endPhase}
+                </span>
+              )}
+              {ms.goal && (
+                <span class="explorer-item__meta" style="flex:1; text-align:right; white-space:normal;">
+                  {ms.goal}
+                </span>
+              )}
               <span class="explorer-badge explorer-badge--building">active</span>
             </div>
           </div>

package/dashboard/src/components/explorer/tabs/PhasesTab.tsx

@@ -3,6 +3,9 @@ interface Phase {
   name: string;
   status: string;
   planCount?: number;
+  plansComplete?: number;
+  plansTotal?: number;
+  lastActivity?: string | null;
 }
 
 interface Plan {
@@ -74,8 +77,15 @@ function PhaseItem({ phase }: { phase: Phase }) {
         </span>
         <span class={statusBadgeClass(phase.status)}>{phase.status}</span>
         <span class="explorer-item__meta">
-          {phase.planCount != null ? `${phase.planCount} plan${phase.planCount !== 1 ? 's' : ''}` : ''}
+          {(phase.plansComplete != null && phase.plansTotal != null)
+            ? (phase.plansComplete === 0 && phase.plansTotal === 0
+              ? '—'
+              : `${phase.plansComplete}/${phase.plansTotal} plans`)
+            : (phase.planCount != null
+              ? `${phase.planCount} plan${phase.planCount !== 1 ? 's' : ''}`
+              : '')}
         </span>
+        <span class="explorer-item__meta">{phase.lastActivity || '—'}</span>
       </div>
 
       {/* Body is only shown when open. The inner div fires hx-get on load (once the body is visible). */}