@sienklogic/plan-build-run 2.33.1 → 2.34.0

package/CHANGELOG.md

@@ -5,6 +5,21 @@ 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.34.0](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.33.1...plan-build-run-v2.34.0) (2026-02-25)
+
+
+### Features
+
+* **quick-011:** add mobile responsive sidebar with hamburger toggle ([2958c60](https://github.com/SienkLogic/plan-build-run/commit/2958c605a2d9c876d297872d8b823e560679e3da))
+* **quick-011:** fix status badge data-status attrs and mermaid dark mode ([8359c8c](https://github.com/SienkLogic/plan-build-run/commit/8359c8c001e676d8f776ad274b52b4b251cefe5a))
+
+
+### Bug Fixes
+
+* **quick-009:** fix dashboard UX across milestones, timeline, logs, todos, and layout ([3529d9e](https://github.com/SienkLogic/plan-build-run/commit/3529d9ebad8bac7f58b0780107a36eadbd5f66e7))
+* **quick-010:** use lockedFileUpdate for atomic writes, fix shell injection, add writeActiveSkill ([1cefb13](https://github.com/SienkLogic/plan-build-run/commit/1cefb132ff1aa1ab07be252695dec43f1397f689))
+* **quick-011:** move hamburger button outside sidebar for correct fixed positioning ([65054c3](https://github.com/SienkLogic/plan-build-run/commit/65054c337c8adc812669976ae5c14d3c150c452f))
+
 ## [2.33.1](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.33.0...plan-build-run-v2.33.1) (2026-02-25)
 
 

package/dashboard/public/css/explorer.css

@@ -418,6 +418,54 @@
   gap: var(--space-md);
 }
 
+/* ---- Todo cards ---- */
+
+.todo-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  border-left-width: 4px;
+  padding: var(--space-sm) var(--space-md);
+  overflow: hidden;
+}
+
+.todo-card--high {
+  border-left-color: var(--color-error, #ef4444);
+}
+
+.todo-card--medium {
+  border-left-color: var(--color-warning, #f59e0b);
+}
+
+.todo-card--low {
+  border-left-color: var(--color-border);
+}
+
+.todo-card__main {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.todo-card__main .explorer-item__title {
+  flex: 1;
+}
+
+.todo-card__meta {
+  display: flex;
+  gap: var(--space-md);
+  font-size: 0.8rem;
+  color: var(--color-text-dim);
+  padding-left: calc(var(--space-sm) + 60px);
+}
+
+.todo-card__meta:empty {
+  display: none;
+}
+
 /* ---- Requirements traceability table ---- */
 
 .explorer-req-section {

package/dashboard/public/css/layout.css

@@ -103,13 +103,39 @@ ul, ol {
   z-index: 10;
 }
 
+.sidebar__toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: var(--space-sm);
+  left: var(--space-sm);
+  z-index: 20;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-raised);
+  color: var(--color-text);
+  font-size: 1.25rem;
+  cursor: pointer;
+}
+
+body.sidebar-visible .main-content::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.4);
+  z-index: 5;
+}
+
 .main-content {
   margin-left: var(--size-sidebar);
   flex: 1;
   padding: var(--space-lg) var(--space-xl);
   min-height: 100vh;
   background: var(--color-surface);
-  max-width: 100%;
+  max-width: 1400px;
 }
 
 /* --- Sidebar Brand --- */
@@ -843,6 +869,23 @@ details li {
     min-width: 100px;
     font-size: 0.75rem;
   }
+
+  .sidebar {
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+  }
+
+  .sidebar--open {
+    transform: translateX(0);
+  }
+
+  .sidebar__toggle {
+    display: flex;
+  }
+
+  .main-content {
+    margin-left: 0;
+  }
 }
 
 @media (max-width: 480px) {

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/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

@@ -50,11 +50,27 @@ 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>
@@ -88,6 +104,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 +115,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/TodosTab.tsx

@@ -74,16 +74,15 @@ export function TodoListFragment({ todos }: TodoListFragmentProps) {
       {todos.length === 0 && <li class="explorer__loading">No pending todos.</li>}
       {todos.map((todo) => (
         <li
-          class="explorer-item"
+          class={`todo-card todo-card--${todo.priority}`}
           key={todo.id}
           x-show={`!search || '${todo.title.toLowerCase()}'.includes(search.toLowerCase())`}
         >
-          <div class="explorer-item__header">
+          <div class="todo-card__main">
             <span class={`explorer-badge explorer-badge--${todo.priority}`}>{todo.priority}</span>
             <span class="explorer-item__title">{todo.title}</span>
-            {todo.phase && <span class="explorer-item__meta">Phase {todo.phase}</span>}
             <button
-              class="btn btn--danger btn--sm"
+              class="btn btn--ghost btn--sm"
               hx-post={`/api/explorer/todos/${todo.id}/complete`}
               hx-target="closest li"
               hx-swap="outerHTML"
@@ -92,6 +91,10 @@ export function TodoListFragment({ todos }: TodoListFragmentProps) {
               Done
             </button>
           </div>
+          <div class="todo-card__meta">
+            {todo.phase && <span>Phase {todo.phase}</span>}
+            {todo.created && <span>{new Date(todo.created).toLocaleDateString()}</span>}
+          </div>
         </li>
       ))}
     </ul>

package/dashboard/src/components/partials/CurrentPhaseCard.tsx

@@ -25,7 +25,7 @@ export const CurrentPhaseCard: FC<CurrentPhaseCardProps> = ({
       <h2 class="card__title">
         Phase {currentPhase.id}: {currentPhase.name}
       </h2>
-      <span class={`badge status-badge status-badge--${currentPhase.status}`}>
+      <span class={`badge status-badge status-badge--${currentPhase.status}`} data-status={currentPhase.status}>
         {currentPhase.status}
       </span>
       <p class="card__meta">Plans: {currentPhase.planStatus}</p>

package/dashboard/src/components/partials/StatusHeader.tsx

@@ -26,7 +26,7 @@ export const StatusHeader: FC<StatusHeaderProps> = ({
       <span class="status-header__phase">
         Phase {currentPhase.id}: {currentPhase.name}
       </span>
-      <span class={`badge status-badge status-badge--${currentPhase.status}`}>
+      <span class={`badge status-badge status-badge--${currentPhase.status}`} data-status={currentPhase.status}>
         {currentPhase.status}
       </span>
       <div class="milestone-bar">

package/dashboard/src/components/settings/LogEntryList.tsx

@@ -14,7 +14,7 @@ function sanitizeType(t: unknown): string {
 }
 
 function getTimestamp(entry: Record<string, unknown>): string {
-  const raw = entry['timestamp'] ?? entry['ts'] ?? entry['time'];
+  const raw = entry['timestamp'] ?? entry['ts'] ?? entry['time'] ?? entry['start'] ?? entry['end'];
   if (!raw) return '—';
   try {
     return new Date(raw as string).toLocaleString();
@@ -23,15 +23,53 @@ function getTimestamp(entry: Record<string, unknown>): string {
   }
 }
 
+function getType(entry: Record<string, unknown>): string {
+  if (typeof entry['type'] === 'string' && entry['type']) return entry['type'];
+  if (typeof entry['event'] === 'string' && entry['event']) return entry['event'];
+  if (typeof entry['hook'] === 'string' && entry['hook']) return 'hook';
+  if (typeof entry['action'] === 'string' && entry['action']) return entry['action'];
+  return '';
+}
+
 function getSummary(entry: Record<string, unknown>): string {
-  const { type: _type, timestamp: _ts, ts: _ts2, time: _time, ...rest } = entry;
-  const str = JSON.stringify(rest);
-  return str.length > 120 ? str.slice(0, 117) + '...' : str;
+  // Session log entry: has start/end/duration_minutes
+  if (entry['duration_minutes'] != null || (entry['start'] && entry['end'])) {
+    const parts: string[] = [];
+    if (entry['duration_minutes'] != null) parts.push(`Duration: ${entry['duration_minutes']}m`);
+    if (entry['reason']) parts.push(`Reason: ${entry['reason']}`);
+    if (entry['agents'] != null) parts.push(`Agents: ${entry['agents']}`);
+    if (parts.length > 0) return parts.join(', ');
+  }
+
+  // Hook log entry: has hook/script fields
+  if (entry['hook'] || entry['script']) {
+    const parts: string[] = [];
+    if (entry['hook']) parts.push(`Hook: ${entry['hook']}`);
+    if (entry['script']) parts.push(`Script: ${entry['script']}`);
+    if (entry['result']) parts.push(`Result: ${entry['result']}`);
+    if (parts.length > 0) return parts.join(', ');
+  }
+
+  // Event/action entry
+  if (entry['event'] || entry['action']) {
+    const parts: string[] = [];
+    if (entry['event']) parts.push(`Event: ${entry['event']}`);
+    if (entry['action']) parts.push(`Action: ${entry['action']}`);
+    if (parts.length > 0) return parts.join(', ');
+  }
+
+  // Fallback: first 3 meaningful key-value pairs
+  const skip = new Set(['type', 'timestamp', 'ts', 'time', 'start', 'end']);
+  const pairs = Object.entries(entry)
+    .filter(([k, v]) => !skip.has(k) && v != null && typeof v !== 'object')
+    .slice(0, 3)
+    .map(([k, v]) => `${k}: ${v}`);
+  return pairs.length > 0 ? pairs.join(', ') : '—';
 }
 
 export function LogEntryRow({ entry }: { entry: object }) {
   const e = entry as Record<string, unknown>;
-  const type = typeof e['type'] === 'string' ? e['type'] : '';
+  const type = getType(e);
   const badge = sanitizeType(type);
   const timestamp = getTimestamp(e);
   const summary = getSummary(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sienklogic/plan-build-run",
-  "version": "2.33.1",
+  "version": "2.34.0",
   "description": "Plan it, Build it, Run it — structured development workflow for Claude Code",
   "keywords": [
     "claude-code",

package/plugins/copilot-pbr/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "pbr",
   "displayName": "Plan-Build-Run",
-  "version": "2.33.1",
+  "version": "2.34.0",
   "description": "Plan-Build-Run — Structured development workflow for GitHub Copilot CLI. Solves context rot through disciplined agent delegation, structured planning, atomic execution, and goal-backward verification.",
   "author": {
     "name": "SienkLogic",

package/plugins/cursor-pbr/.cursor-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "pbr",
   "displayName": "Plan-Build-Run",
-  "version": "2.33.1",
+  "version": "2.34.0",
   "description": "Plan-Build-Run — Structured development workflow for Cursor. Solves context rot through disciplined subagent delegation, structured planning, atomic execution, and goal-backward verification.",
   "author": {
     "name": "SienkLogic",

package/plugins/pbr/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "pbr",
-  "version": "2.33.1",
+  "version": "2.34.0",
   "description": "Plan-Build-Run — Structured development workflow for Claude Code. Solves context rot through disciplined subagent delegation, structured planning, atomic execution, and goal-backward verification.",
   "author": {
     "name": "SienkLogic",

package/plugins/pbr/scripts/check-plan-format.js

@@ -24,7 +24,7 @@ const fs = require('fs');
 const path = require('path');
 const { logHook } = require('./hook-logger');
 const { logEvent } = require('./event-logger');
-const { atomicWrite } = require('./pbr-tools');
+const { lockedFileUpdate } = require('./pbr-tools');
 const { resolveConfig } = require('./local-llm/health');
 const { classifyArtifact } = require('./local-llm/operations/classify-artifact');
 
@@ -464,7 +464,7 @@ function syncStateBody(content, filePath) {
   if (!needsFix) return null;
 
   try {
-    atomicWrite(filePath, updated);
+    lockedFileUpdate(filePath, () => updated);
     logHook('check-plan-format', 'PostToolUse', 'body-sync', {
       fromPhase: bodyPhaseMatch[1], toPhase: fmPhase
     });

package/plugins/pbr/scripts/check-state-sync.js

@@ -26,7 +26,7 @@ const fs = require('fs');
 const path = require('path');
 const { logHook } = require('./hook-logger');
 const { logEvent } = require('./event-logger');
-const { atomicWrite } = require('./pbr-tools');
+const { lockedFileUpdate } = require('./pbr-tools');
 
 /**
  * Extract phase number from a phase directory name.
@@ -370,7 +370,7 @@ function checkStateSync(data) {
         } else {
           const updatedRoadmap = updateProgressTable(roadmapContent, phaseNum, plansComplete, newStatus, completedDate);
           if (updatedRoadmap !== roadmapContent) {
-            atomicWrite(roadmapPath, updatedRoadmap);
+            lockedFileUpdate(roadmapPath, () => updatedRoadmap);
             messages.push(`ROADMAP.md: Phase ${phaseNum} → ${plansComplete} plans, ${newStatus}`);
           }
         }
@@ -410,7 +410,7 @@ function checkStateSync(data) {
 
         const updatedState = updateStatePosition(stateContent, stateUpdates);
         if (updatedState !== stateContent) {
-          atomicWrite(statePath, updatedState);
+          lockedFileUpdate(statePath, () => updatedState);
           messages.push(`STATE.md: ${artifacts.completeSummaries}/${artifacts.plans} plans, ${overallPct}%`);
         }
       } catch (e) {
@@ -455,7 +455,7 @@ function checkStateSync(data) {
         } else {
           const updatedRoadmap = updateProgressTable(roadmapContent, phaseNum, plansComplete, roadmapStatus, completedDate);
           if (updatedRoadmap !== roadmapContent) {
-            atomicWrite(roadmapPath, updatedRoadmap);
+            lockedFileUpdate(roadmapPath, () => updatedRoadmap);
             messages.push(`ROADMAP.md: Phase ${phaseNum} → ${roadmapStatus}`);
           }
         }
@@ -493,7 +493,7 @@ function checkStateSync(data) {
 
         const updatedState = updateStatePosition(stateContent, stateUpdates);
         if (updatedState !== stateContent) {
-          atomicWrite(statePath, updatedState);
+          lockedFileUpdate(statePath, () => updatedState);
           messages.push(`STATE.md: ${stateStatus}, ${overallPct}%`);
         }
       } catch (e) {
@@ -543,7 +543,7 @@ function checkStateSync(data) {
             const plansComplete = `${artifacts.completeSummaries}/${artifacts.plans}`;
             const updatedRoadmap = updateProgressTable(roadmapContent, phaseNum, plansComplete, 'Planning', null);
             if (updatedRoadmap !== roadmapContent) {
-              atomicWrite(roadmapPath, updatedRoadmap);
+              lockedFileUpdate(roadmapPath, () => updatedRoadmap);
               messages.push(`ROADMAP.md: Phase ${phaseNum} → Planning`);
             }
           }

package/plugins/pbr/scripts/context-budget-check.js

@@ -21,7 +21,7 @@ const fs = require('fs');
 const path = require('path');
 const { logHook } = require('./hook-logger');
 const { logEvent } = require('./event-logger');
-const { atomicWrite, configLoad, tailLines } = require('./pbr-tools');
+const { configLoad, tailLines, lockedFileUpdate } = require('./pbr-tools');
 
 function main() {
   const cwd = process.cwd();
@@ -87,7 +87,7 @@ function main() {
       content = content.trimEnd() + `\n\n${continuityHeader}\n${continuityContent}\n`;
     }
 
-    atomicWrite(stateFile, content);
+    lockedFileUpdate(stateFile, () => content);
 
     // Output additionalContext for post-compaction recovery
     const recoveryContext = buildRecoveryContext(activeOp, roadmapSummary, currentPlan, configHighlights, recentErrors, recentAgents);

package/plugins/pbr/scripts/pbr-tools.js

@@ -1491,5 +1491,80 @@ function atomicWrite(filePath, content) {
   }
 }
 
+/**
+ * Write .active-skill with OS-level mutual exclusion.
+ * Uses a .active-skill.lock file with exclusive create (O_EXCL) to prevent
+ * two sessions from racing on the same file.
+ *
+ * @param {string} planningDir - Path to .planning/ directory
+ * @param {string} skillName - Skill name to write
+ * @returns {{success: boolean, warning?: string}} Result
+ */
+function writeActiveSkill(planningDir, skillName) {
+  const skillFile = path.join(planningDir, '.active-skill');
+  const lockFile = skillFile + '.lock';
+  const staleThresholdMs = 60 * 60 * 1000; // 60 minutes
+
+  let lockFd = null;
+  try {
+    // Try exclusive create of lock file
+    lockFd = fs.openSync(lockFile, 'wx');
+    fs.writeSync(lockFd, `${process.pid}`);
+    fs.closeSync(lockFd);
+    lockFd = null;
+
+    // Check for existing .active-skill from another session
+    let warning = null;
+    if (fs.existsSync(skillFile)) {
+      try {
+        const stats = fs.statSync(skillFile);
+        const ageMs = Date.now() - stats.mtimeMs;
+        if (ageMs < staleThresholdMs) {
+          const existing = fs.readFileSync(skillFile, 'utf8').trim();
+          warning = `.active-skill already set to "${existing}" (${Math.round(ageMs / 60000)}min ago). Overwriting — possible concurrent session.`;
+        }
+      } catch (_e) {
+        // File disappeared between exists and stat — fine
+      }
+    }
+
+    // Write the skill name
+    fs.writeFileSync(skillFile, skillName, 'utf8');
+
+    // Release lock
+    try { fs.unlinkSync(lockFile); } catch (_e) { /* best effort */ }
+
+    return { success: true, warning };
+  } catch (e) {
+    // Close fd if still open
+    try { if (lockFd !== null) fs.closeSync(lockFd); } catch (_e) { /* ignore */ }
+
+    if (e.code === 'EEXIST') {
+      // Lock held by another process — check staleness
+      try {
+        const lockStats = fs.statSync(lockFile);
+        const lockAgeMs = Date.now() - lockStats.mtimeMs;
+        if (lockAgeMs > staleThresholdMs) {
+          // Stale lock — force remove and retry once
+          fs.unlinkSync(lockFile);
+          return writeActiveSkill(planningDir, skillName);
+        }
+      } catch (_statErr) {
+        // Lock disappeared — retry once
+        return writeActiveSkill(planningDir, skillName);
+      }
+      return { success: false, warning: `.active-skill.lock held by another process. Another PBR session may be active.` };
+    }
+
+    // Other error — write without lock as fallback
+    try {
+      fs.writeFileSync(skillFile, skillName, 'utf8');
+      return { success: true, warning: `Lock failed (${e.code}), wrote without lock` };
+    } catch (writeErr) {
+      return { success: false, warning: `Failed to write .active-skill: ${writeErr.message}` };
+    }
+  }
+}
+
 if (require.main === module || process.argv[1] === __filename) { main().catch(err => { process.stderr.write(err.message + '\n'); process.exit(1); }); }
-module.exports = { parseStateMd, parseRoadmapMd, parseYamlFrontmatter, parseMustHaves, countMustHaves, stateLoad, stateCheckProgress, configLoad, configClearCache, configValidate, lockedFileUpdate, planIndex, determinePhaseStatus, findFiles, atomicWrite, tailLines, frontmatter, mustHavesCollect, phaseInfo, stateUpdate, roadmapUpdateStatus, roadmapUpdatePlans, updateLegacyStateField, updateFrontmatterField, updateTableRow, findRoadmapRow, resolveDepthProfile, DEPTH_PROFILE_DEFAULTS, historyAppend, historyLoad, VALID_STATUS_TRANSITIONS, validateStatusTransition };
+module.exports = { parseStateMd, parseRoadmapMd, parseYamlFrontmatter, parseMustHaves, countMustHaves, stateLoad, stateCheckProgress, configLoad, configClearCache, configValidate, lockedFileUpdate, planIndex, determinePhaseStatus, findFiles, atomicWrite, tailLines, frontmatter, mustHavesCollect, phaseInfo, stateUpdate, roadmapUpdateStatus, roadmapUpdatePlans, updateLegacyStateField, updateFrontmatterField, updateTableRow, findRoadmapRow, resolveDepthProfile, DEPTH_PROFILE_DEFAULTS, historyAppend, historyLoad, VALID_STATUS_TRANSITIONS, validateStatusTransition, writeActiveSkill };

package/plugins/pbr/scripts/post-write-quality.js

@@ -20,7 +20,7 @@
 
 const fs = require('fs');
 const path = require('path');
-const { execSync } = require('child_process');
+const { execFileSync } = require('child_process');
 const { logHook } = require('./hook-logger');
 
 const JS_TS_EXTENSIONS = new Set(['.js', '.jsx', '.ts', '.tsx', '.mjs', '.cjs']);
@@ -132,7 +132,7 @@ function runPrettier(filePath, cwd) {
   if (!bin) return null;
 
   try {
-    execSync(`"${bin}" --write "${filePath}"`, {
+    execFileSync(bin, ['--write', filePath], {
       cwd,
       timeout: 15000,
       stdio: 'pipe',
@@ -154,7 +154,7 @@ function runTypeCheck(filePath, cwd) {
   if (!fs.existsSync(path.join(cwd, 'tsconfig.json'))) return null;
 
   try {
-    execSync(`"${bin}" --noEmit`, {
+    execFileSync(bin, ['--noEmit'], {
       cwd,
       timeout: 30000,
       stdio: 'pipe',