@sienklogic/plan-build-run 2.23.0 → 2.26.0

package/CHANGELOG.md

@@ -5,6 +5,72 @@ 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.26.0](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.25.0...plan-build-run-v2.26.0) (2026-02-24)
+
+
+### Features
+
+* **36-01:** add .status-badge--sm and .status-badge--lg variants; tokenize base badge sizing ([2ed3a85](https://github.com/SienkLogic/plan-build-run/commit/2ed3a85de91fa359705dc0eb1ab231531aa4bbfd))
+* **36-02:** create phase-timeline.ejs and activity-feed.ejs partials ([cfcad33](https://github.com/SienkLogic/plan-build-run/commit/cfcad33824ea291be101ad0cb3b288e53b6064ec))
+* **36-02:** GREEN - add getRecentActivity and deriveQuickActions to dashboard.service.js ([9d8f55f](https://github.com/SienkLogic/plan-build-run/commit/9d8f55f68c7825245248ac70bd07e09e91d7109b))
+* **36-02:** rework dashboard-content.ejs with status cards, timeline, activity feed, and quick actions ([7d8d735](https://github.com/SienkLogic/plan-build-run/commit/7d8d735f4d8e05c67a9f70190f402e3fc450ab0d))
+* **36-03:** add prev/next phase navigation to phase detail view ([91b8bd5](https://github.com/SienkLogic/plan-build-run/commit/91b8bd5323ffaf9128dc66adeb74a0a8ccfa0da5))
+* **36-04:** enrich getPhaseDetail with planTitle, taskCount, and mustHaves ([2ce86bb](https://github.com/SienkLogic/plan-build-run/commit/2ce86bb63cbbda0c6a6ede905936302a51e59e8b))
+* **36-04:** overhaul plan cards to use .card component with wave, task count, and status ([ea963b8](https://github.com/SienkLogic/plan-build-run/commit/ea963b89b40a7f3c6b61d3ef0f6e19fd6deeee39))
+* **36-04:** replace commit history table with visual .commit-timeline in phase-content.ejs ([a12d57e](https://github.com/SienkLogic/plan-build-run/commit/a12d57ef85852867bfcd33f171a3514a3151bd12))
+* **36-05:** add config page CSS to layout.css ([687ee05](https://github.com/SienkLogic/plan-build-run/commit/687ee05be2acd543144267f0192adb71539a370a))
+* **36-05:** add config shell page, hybrid form partial, and config CSS ([6827673](https://github.com/SienkLogic/plan-build-run/commit/68276734806efdbd3dd869f44e2283ae5b00ea18))
+* **36-05:** add config.service with readConfig, writeConfig, validateConfig (TDD) ([26cf43a](https://github.com/SienkLogic/plan-build-run/commit/26cf43a08962d312deea31a2af51d0714be35a48))
+* **36-05:** add GET /config and POST /api/config routes ([363348a](https://github.com/SienkLogic/plan-build-run/commit/363348adb75e83644d9accf0c401ef97d68be5da))
+* **36-06:** add GET /research and GET /research/:slug routes with HTMX support ([a3ef246](https://github.com/SienkLogic/plan-build-run/commit/a3ef24633f865356a1ec591c3cd5c339eba14b0d))
+* **36-06:** add research list and detail EJS templates with card layout and HTMX navigation ([4295545](https://github.com/SienkLogic/plan-build-run/commit/4295545d2feaa610034b728bdfd868f274e61d6f))
+* **36-06:** GREEN - implement research.service with listResearchDocs, listCodebaseDocs, getResearchDocBySlug ([c1d2c1f](https://github.com/SienkLogic/plan-build-run/commit/c1d2c1fdd1b663b71388631a1e76554f06c01494))
+* **36-07:** add GET /requirements route and EJS templates ([48d6d82](https://github.com/SienkLogic/plan-build-run/commit/48d6d8228250c17184abb5b7810d512b6a1b2f82))
+* **36-07:** GREEN - implement getRequirementsData service ([016e0bc](https://github.com/SienkLogic/plan-build-run/commit/016e0bc1b22cef9f153bff0e8d2a4b692b57648d))
+* **36-08:** add GET /logs route and GET /logs/stream SSE endpoint ([e5cdca5](https://github.com/SienkLogic/plan-build-run/commit/e5cdca5f9603de9973a41e1ef37b37630a527460))
+* **36-08:** create logs EJS templates with SSE live-tail and filter controls ([c164794](https://github.com/SienkLogic/plan-build-run/commit/c1647944c9f8ef37be4b30df30ce18c702dee827))
+* **36-08:** GREEN - implement log.service with listLogFiles, readLogPage, tailLogFile ([5827bd4](https://github.com/SienkLogic/plan-build-run/commit/5827bd4c9e0edce022784e14986b764b2970d229))
+* **quick-004:** add local LLM token counter to statusline ([f5f5d4c](https://github.com/SienkLogic/plan-build-run/commit/f5f5d4c907a7a96e9d835c6e5b342fab7be86aad))
+* **quick-004:** show session + lifetime LLM stats using stdin duration ([ef2512f](https://github.com/SienkLogic/plan-build-run/commit/ef2512fe1214eb9c0483253c67c8eb144643dcef))
+
+
+### Bug Fixes
+
+* **36-01:** replace hardcoded CSS values with design tokens and expand config.service.js ([68e9261](https://github.com/SienkLogic/plan-build-run/commit/68e9261456f5e3d9f23b58dbfc7b55ca85036b11))
+* **36-02:** add typeof guard for quickActions in dashboard template ([2d19f72](https://github.com/SienkLogic/plan-build-run/commit/2d19f72015945291ecb73cb8dbcfe01f6654fa5c))
+* **quick-004:** render LLM stats on second line with explicit Local LLM label ([16509b3](https://github.com/SienkLogic/plan-build-run/commit/16509b3f85805592580f80355e6258a0bee3e4b7))
+* **quick-006:** bump vitest to ^4.0.18 to match @vitest/coverage-v8 peer dep ([4f5b172](https://github.com/SienkLogic/plan-build-run/commit/4f5b172d4f83fed7b04ff972e7848ce5762edb71))
+* **quick-007:** correct todo test to match title fallback behavior (H1 heading recovery) ([50397bb](https://github.com/SienkLogic/plan-build-run/commit/50397bb16f17cfd253ab919bb83d52afa5aee9ad))
+
+
+### Documentation
+
+* **quick-005:** add Local LLM nav link and mention in feature highlights ([56784d8](https://github.com/SienkLogic/plan-build-run/commit/56784d800131df024aedc8d5ee6c8ddc81795e03))
+* **quick-005:** add Local LLM Offload section and update stats across README and Getting Started ([264c891](https://github.com/SienkLogic/plan-build-run/commit/264c891e9aebc696f9194efd45428788606fecb3))
+
+## [2.25.0](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.24.0...plan-build-run-v2.25.0) (2026-02-24)
+
+
+### Features
+
+* **36-01:** expand tokens.css with card, shadow, transition, table, and badge tokens ([75df300](https://github.com/SienkLogic/plan-build-run/commit/75df3000ecf3d44ed8c57f0528e719a9cc4b7c06))
+* **tools:** add 3 local LLM operations — classify-commit, triage-test-output, classify-file-intent ([f456048](https://github.com/SienkLogic/plan-build-run/commit/f4560480888b916826f7c7e5ca6a091001779ab6))
+
+## [2.24.0](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.23.0...plan-build-run-v2.24.0) (2026-02-24)
+
+
+### Features
+
+* **35-05:** add Audit Reports view with /audits and /audits/:filename routes ([33dfae7](https://github.com/SienkLogic/plan-build-run/commit/33dfae7fff02cbba93e250211e54b26d565f4f76))
+* **35-05:** GREEN - implement audit.service.js with listAuditReports and getAuditReport ([c79179a](https://github.com/SienkLogic/plan-build-run/commit/c79179a75a386096e74589f13fea4a56174b1870))
+* **quick-003:** add data-flow to plan-format reference, verification template, and integration report template ([e73a31e](https://github.com/SienkLogic/plan-build-run/commit/e73a31e0c1eb9535014de4b60924bd98ced2f8cb))
+* **quick-003:** add data-flow verification to planner, verifier, and integration-checker agents ([e37e192](https://github.com/SienkLogic/plan-build-run/commit/e37e19297e038c38aecd7d04e93c007928242f0f))
+
+
+### Bug Fixes
+
+* **quick-003:** pass data.session_id to LLM operations instead of undefined ([df4d168](https://github.com/SienkLogic/plan-build-run/commit/df4d1682b50935b53ddcc665b8dcdc394b8b277e))
+
 ## [2.23.0](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.22.2...plan-build-run-v2.23.0) (2026-02-24)
 
 

package/README.md

@@ -14,6 +14,7 @@
   <a href="#getting-started">Getting Started</a> &bull;
   <a href="#commands">Commands</a> &bull;
   <a href="#how-it-works">How It Works</a> &bull;
+  <a href="#local-llm-offload">Local LLM</a> &bull;
   <a href="https://github.com/SienkLogic/plan-build-run/wiki">Wiki</a> &bull;
   <a href=".github/CONTRIBUTING.md">Contributing</a>
 </p>
@@ -26,7 +27,7 @@
   <img src="https://img.shields.io/badge/Node.js-18%2B-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js 18+" />
   <a href="LICENSE"><img src="https://img.shields.io/github/license/SienkLogic/plan-build-run?style=for-the-badge" alt="License" /></a>
   <a href="https://www.npmjs.com/package/@sienklogic/plan-build-run"><img src="https://img.shields.io/npm/v/@sienklogic/plan-build-run?style=for-the-badge&logo=npm&logoColor=white" alt="npm" /></a>
-  <img src="https://img.shields.io/badge/Tests-1213_passing-brightgreen?style=for-the-badge" alt="1213 Tests" />
+  <img src="https://img.shields.io/badge/Tests-2153_passing-brightgreen?style=for-the-badge" alt="2153 Tests" />
 </p>
 
 ---
@@ -47,7 +48,7 @@ Plan-Build-Run takes a different approach: **structured context isolation**. Ins
   <img src="./assets/pbr-demo.gif" alt="Plan-Build-Run workflow: begin → plan → build → review" width="800" />
 </p>
 
-Goal-backward verification, lifecycle hooks, wave-based parallelism, kill-safe state, and more. See **[What Sets It Apart](https://github.com/SienkLogic/plan-build-run/wiki/What-Sets-It-Apart)** for the full comparison and differentiators.
+Goal-backward verification, lifecycle hooks, wave-based parallelism, kill-safe state, and **[local LLM offloading](#local-llm-offload)** to cut frontier token costs on routine tasks. See **[What Sets It Apart](https://github.com/SienkLogic/plan-build-run/wiki/What-Sets-It-Apart)** for the full comparison and differentiators.
 
 > **When to use Plan-Build-Run:** Multi-phase projects where quality matters. New features spanning 5+ files, large refactors, greenfield builds, anything that would take more than one Claude Code session to complete. Use `depth: quick` or `depth: standard` to control agent spawn count per phase.
 >
@@ -218,7 +219,7 @@ Set `depth: quick` in `/pbr:config` to reduce agent spawns across all workflows.
 | `/pbr:build <N>` | Build a phase: parallel execution in waves, atomic commits | 2-4 (quick: 1-2) |
 | `/pbr:review <N>` | Verify a phase: automated 3-layer checks + conversational UAT | 1 |
 
-See **[Commands](https://github.com/SienkLogic/plan-build-run/wiki/Commands)** for all 22 commands with flags, cost-by-depth tables, and detailed descriptions.
+See **[Commands](https://github.com/SienkLogic/plan-build-run/wiki/Commands)** for all 26 commands with flags, cost-by-depth tables, and detailed descriptions.
 
 ---
 
@@ -240,13 +241,60 @@ See **[Architecture](https://github.com/SienkLogic/plan-build-run/wiki/Architect
 
 ---
 
+## Local LLM Offload
+
+Plan-Build-Run can offload lightweight inference tasks to a local model running on your machine, saving frontier tokens and reducing API costs — without sacrificing quality on complex operations.
+
+**This is a novel capability.** Other AI coding frameworks use local LLMs as the primary model or not at all. PBR operates at the **sub-session level**: hook scripts that fire on every tool call use a local model for fast classification tasks (artifact type, commit scope, error category, file intent) while the frontier model handles planning, execution, and verification. You get the cost savings of local inference where it matters, with automatic fallback to Claude when confidence is low.
+
+### How it works
+
+```
+Hook fires (e.g., PostToolUse:Write)
+  │
+  ├─ Complexity scorer evaluates the prompt
+  │   └─ High complexity? → Route to frontier (Claude)
+  │   └─ Low complexity? ↓
+  │
+  ├─ Local LLM classifies (Ollama, ~50-200ms)
+  │   └─ Confidence below threshold? → Fallback to frontier
+  │   └─ Confidence OK? → Use local result ✓
+  │
+  └─ Metrics logged to .planning/logs/local-llm-metrics.jsonl
+```
+
+### Key features
+
+- **3 routing strategies**: `local_first` (default), `balanced`, `quality_first` — control the cost/quality tradeoff
+- **8 offloadable operations**: artifact classification, task validation, commit classification, error classification, file intent, test triage, source scoring, context summarization
+- **Shadow mode**: Run local and frontier in parallel, compare results, but always use frontier output — safe way to validate local accuracy before trusting it
+- **Adaptive threshold tuning**: Analyzes shadow logs to suggest confidence threshold adjustments per operation
+- **Circuit breaker**: Automatically disables local routing after consecutive failures — no cascading slowdowns
+- **Session metrics**: See tokens saved, cost reduction, and per-operation breakdowns via `/pbr:status` or the dashboard
+
+### Quick setup
+
+```bash
+# 1. Install Ollama (ollama.com/download)
+# 2. Pull the recommended model
+ollama pull qwen2.5-coder:7b
+
+# 3. Enable in your project config
+/pbr:config local_llm.enabled true
+```
+
+Requires a GPU with 6+ GB VRAM for best performance. CPU-only works but adds latency. See **[Configuration](https://github.com/SienkLogic/plan-build-run/wiki/Configuration#local_llm)** for full setup details, hardware requirements, and Windows-specific notes.
+
+---
+
 ## Deep Dive
 
 | Topic | Description |
 |-------|-------------|
-| **[Agents](https://github.com/SienkLogic/plan-build-run/wiki/Agents)** | 10 specialized agents with configurable model profiles and file-based communication |
-| **[Configuration](https://github.com/SienkLogic/plan-build-run/wiki/Configuration)** | 12 config keys, depth/model profiles, 16+ feature toggles |
-| **[Hooks](https://github.com/SienkLogic/plan-build-run/wiki/Hooks)** | 15 lifecycle hooks that enforce discipline at zero token cost |
+| **[Agents](https://github.com/SienkLogic/plan-build-run/wiki/Agents)** | 12 specialized agents with configurable model profiles and file-based communication |
+| **[Configuration](https://github.com/SienkLogic/plan-build-run/wiki/Configuration)** | 13 config keys, depth/model profiles, 16+ feature toggles, local LLM settings |
+| **[Hooks](https://github.com/SienkLogic/plan-build-run/wiki/Hooks)** | 38 hook scripts that enforce discipline at zero token cost |
+| **[Local LLM](https://github.com/SienkLogic/plan-build-run/wiki/Configuration#local_llm)** | Offload hook-level inference to Ollama for token savings with automatic fallback |
 | **[Project Structure](https://github.com/SienkLogic/plan-build-run/wiki/Project-Structure)** | The `.planning/` directory layout, key files, and file ownership |
 | **[Dashboard](https://github.com/SienkLogic/plan-build-run/wiki/Dashboard)** | Web UI with live updates for browsing project state |
 | **[Cursor IDE](https://github.com/SienkLogic/plan-build-run/wiki/Cursor-IDE)** | Cursor plugin installation and cross-IDE workflow |
@@ -264,7 +312,7 @@ git clone https://github.com/SienkLogic/plan-build-run.git
 cd plan-build-run
 npm install
 
-# Run tests (1213 tests, 44 suites)
+# Run tests (2153 tests, 73 suites)
 npm test
 
 # Lint
@@ -285,13 +333,14 @@ CI runs on Node 18/20/22 across Windows, macOS, and Linux. See [CONTRIBUTING.md]
 
 | Metric | Count |
 |--------|-------|
-| Skills (slash commands) | 22 |
-| Specialized agents | 10 |
-| Hook scripts | 28 |
+| Skills (slash commands) | 26 |
+| Specialized agents | 12 |
+| Hook scripts | 38 |
+| Local LLM operations | 8 |
 | Supported platforms | 3 (Claude Code, Cursor, Copilot CLI) |
-| Tests | 1213 |
-| Test suites | 44 |
-| Config toggles | 12 top-level keys |
+| Tests | 2153 |
+| Test suites | 73 |
+| Config keys | 13 top-level (62+ properties) |
 
 ---
 

package/dashboard/package.json

@@ -19,7 +19,6 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@rollup/rollup-win32-x64-msvc": "^4.57.1",
     "chokidar": "^5.0.0",
     "commander": "^12.1.0",
     "ejs": "^3.1.10",
@@ -30,9 +29,10 @@
     "sanitize-html": "^2.13.0"
   },
   "devDependencies": {
+    "@rollup/rollup-win32-x64-msvc": "^4.57.1",
     "@vitest/coverage-v8": "^4.0.18",
     "memfs": "^4.56.10",
     "supertest": "^7.2.2",
-    "vitest": "^3.1.0"
+    "vitest": "^4.0.18"
   }
 }

package/dashboard/public/css/layout.css

@@ -19,9 +19,9 @@ code, pre, kbd, samp {
   font-size: 0.875em;
 }
 
-h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: var(--space-sm); }
-h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; margin-top: var(--space-2xl); margin-bottom: var(--space-md); }
-h3 { font-size: 1.1rem; font-weight: 600; }
+h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: var(--space-sm); }
+h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin-top: var(--space-2xl); margin-bottom: var(--space-md); }
+h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.4; }
 
 p { line-height: 1.65; }
 
@@ -108,7 +108,7 @@ aside.sidebar nav a {
   font-size: 0.9rem;
   font-weight: 500;
   color: var(--color-text-dim);
-  transition: all 0.15s ease;
+  transition: all var(--transition-fast);
 }
 
 aside.sidebar nav a:hover {
@@ -210,26 +210,34 @@ aside.sidebar details ul {
   color: var(--color-text-dim);
 }
 
-/* --- Article Cards --- */
+/* --- Card Component --- */
+.card,
 article {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-raised);
+  border: 1px solid var(--card-border);
+  border-radius: var(--card-radius);
+  background: var(--card-bg);
+  box-shadow: var(--card-shadow);
   margin-bottom: var(--space-lg);
 }
 
+.card__header,
 article > header {
-  border-bottom: 1px solid var(--color-border);
-  padding: var(--space-md) var(--space-lg);
-  background: var(--color-surface-raised);
-  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  border-bottom: 1px solid var(--card-border);
+  padding: var(--card-header-padding);
+  background: var(--card-bg);
+  border-radius: var(--card-radius) var(--card-radius) 0 0;
 }
 
+.card__header strong,
 article > header strong {
   font-size: 0.95rem;
   font-weight: 600;
 }
 
+.card__body {
+  padding: var(--card-padding) var(--space-lg);
+}
+
 /* --- Tables --- */
 .table-wrap {
   overflow-x: auto;
@@ -251,11 +259,13 @@ th {
   letter-spacing: 0.04em;
   color: var(--color-text-dim);
   white-space: nowrap;
+  padding: var(--table-cell-padding);
 }
 
 td {
   vertical-align: top;
   line-height: 1.5;
+  padding: var(--table-cell-padding);
 }
 
 /* --- Progress Bar --- */
@@ -272,7 +282,7 @@ progress::-webkit-progress-bar {
 progress::-webkit-progress-value {
   background: var(--color-accent);
   border-radius: 999px;
-  transition: width 0.4s ease;
+  transition: width var(--transition-base);
 }
 
 progress::-moz-progress-bar {
@@ -331,7 +341,7 @@ details li {
 .markdown-body th,
 .markdown-body td {
   border: 1px solid var(--color-border);
-  padding: var(--space-xs) var(--space-sm);
+  padding: var(--table-cell-padding);
   text-align: left;
 }
 
@@ -340,7 +350,7 @@ details li {
 }
 
 .markdown-body pre {
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--overlay-bg);
   border-radius: var(--radius-sm);
   padding: var(--space-md);
   overflow-x: auto;
@@ -412,6 +422,26 @@ details li {
   font-weight: 500;
 }
 
+/* Phase Navigation */
+.phase-nav {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: var(--space-md);
+  margin-bottom: var(--space-lg);
+  font-size: 0.875rem;
+}
+
+.phase-nav > a:first-child,
+.phase-nav > span:first-child {
+  text-align: left;
+}
+
+.phase-nav > a:last-child,
+.phase-nav > span:last-child {
+  text-align: right;
+}
+
 /* --- Back Link --- */
 main > p:first-of-type > a[href="/"] {
   font-size: 0.875rem;
@@ -431,7 +461,7 @@ main > p:first-of-type > a[href="/"]:hover {
   border-radius: 50%;
   margin-left: var(--space-sm);
   vertical-align: middle;
-  transition: background-color 0.3s ease;
+  transition: background-color var(--transition-base);
 }
 
 #sse-status[data-connected="true"] {
@@ -522,7 +552,7 @@ main > p:first-of-type > a[href="/"]:hover {
 /* --- Bar Chart --- */
 .bar-chart-row { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
 .bar-chart-label { min-width: 160px; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.bar-chart-bar { height: 1.5rem; border-radius: var(--radius-sm); background: var(--pico-primary); color: var(--pico-primary-inverse, #fff); font-size: 0.75rem; display: flex; align-items: center; padding-left: var(--space-sm); min-width: 2rem; transition: width 0.3s ease; }
+.bar-chart-bar { height: 1.5rem; border-radius: var(--radius-sm); background: var(--pico-primary); color: var(--pico-primary-inverse, #fff); font-size: 0.75rem; display: flex; align-items: center; padding-left: var(--space-sm); min-width: 2rem; transition: width var(--transition-base); }
 
 /* --- Loading Bar --- */
 .loading-bar {
@@ -602,18 +632,18 @@ main > p:first-of-type > a[href="/"]:hover {
     height: calc(100vh - var(--size-header));
     z-index: 20;
     transform: translateX(-100%);
-    transition: transform 0.25s ease;
+    transition: var(--transition-transform);
     display: block;
     border-right: 1px solid var(--color-border);
     border-bottom: none;
     padding: var(--space-lg) 0;
     overflow-y: auto;
-    background: var(--pico-background-color, #1a1a2e);
+    background: var(--pico-background-color, var(--color-dark-surface));
   }
 
   .page-wrapper > aside.sidebar.open {
     transform: translateX(0);
-    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
+    box-shadow: 4px 0 24px var(--overlay-bg);
   }
 
   .sidebar-backdrop {
@@ -621,7 +651,7 @@ main > p:first-of-type > a[href="/"]:hover {
     position: fixed;
     inset: 0;
     top: var(--size-header);
-    background: rgba(0, 0, 0, 0.7);
+    background: var(--overlay-bg-heavy);
     z-index: 19;
   }
 
@@ -702,3 +732,80 @@ main > p:first-of-type > a[href="/"]:hover {
     text-align: center;
   }
 }
+
+/* --- Commit Timeline --- */
+.commit-timeline {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 var(--space-lg);
+  border-left: 2px solid var(--color-border);
+  padding-left: var(--space-md);
+}
+
+.commit-timeline__item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-xs) 0;
+  border-bottom: 1px solid var(--color-border);
+  position: relative;
+}
+
+.commit-timeline__item::before {
+  content: '';
+  position: absolute;
+  left: calc(-1 * var(--space-md) - 1px);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  border: 2px solid var(--color-surface);
+}
+
+.commit-timeline__hash {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+.commit-timeline__task {
+  flex: 1;
+  font-size: 0.875rem;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.commit-timeline__meta {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+/* Config page */
+.config-section { margin-bottom: var(--spacing-md); }
+.config-section summary { cursor: pointer; list-style: none; }
+.config-section summary::-webkit-details-marker { display: none; }
+.config-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-sm);
+}
+.config-row label { min-width: 160px; font-weight: 500; }
+.config-row input[type="text"],
+.config-row input[type="number"],
+.config-row select { flex: 1; }
+.config-fieldset { border: 1px solid var(--card-border); border-radius: var(--radius); padding: var(--spacing-md); margin-bottom: var(--spacing-md); }
+.config-toggle-row { display: flex; align-items: center; margin-bottom: var(--spacing-xs); }
+.config-toggle-row label { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; }
+.config-raw-json { width: 100%; font-family: var(--font-mono, monospace); font-size: 0.85rem; }
+.config-actions { display: flex; align-items: center; gap: var(--spacing-md); margin-top: var(--spacing-lg); }
+.config-hint { color: var(--muted); font-size: 0.85rem; margin-bottom: var(--spacing-sm); }
+.config-feedback--success { color: var(--color-success, green); font-weight: 500; }
+.config-feedback--error { color: var(--color-error, red); font-weight: 500; }

package/dashboard/public/css/status-colors.css

@@ -23,9 +23,9 @@
 .status-badge {
   display: inline-flex;
   align-items: center;
-  padding: 0.15rem 0.55rem;
+  padding: var(--badge-padding-base);
   border-radius: 999px;
-  font-size: 0.75rem;
+  font-size: var(--badge-font-size-base);
   font-weight: 600;
   letter-spacing: 0.02em;
   line-height: 1.5;
@@ -96,3 +96,15 @@
   color: #a5b4fc;
   border-color: rgba(129, 140, 248, 0.2);
 }
+
+/* Size variants */
+.status-badge--sm {
+  padding: var(--badge-padding-sm);
+  font-size: var(--badge-font-size-sm);
+}
+
+.status-badge--lg {
+  padding: var(--badge-padding-lg);
+  font-size: var(--badge-font-size-lg);
+  font-weight: 700;
+}

package/dashboard/public/css/tokens.css

@@ -26,11 +26,47 @@
   /* Radii */
   --radius-sm: 0.375rem;
   --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+
+  /* Transitions */
+  --transition-fast: 0.12s ease;
+  --transition-base: 0.2s ease;
+
+  /* Cards */
+  --card-bg: var(--color-surface-raised);
+  --card-border: var(--color-border);
+  --card-radius: var(--radius-md);
+  --card-shadow: var(--shadow-sm);
+  --card-padding: var(--space-md);
+  --card-header-padding: var(--space-sm) var(--space-lg);
+
+  /* Tables */
+  --table-cell-padding: var(--space-xs) var(--space-sm);
+  --table-cell-padding-y: var(--space-xs);
+  --table-cell-padding-x: var(--space-sm);
+
+  /* Badges */
+  --badge-padding-sm: 0.1rem 0.4rem;
+  --badge-padding-base: 0.15rem 0.55rem;
+  --badge-padding-lg: 0.25rem 0.75rem;
+  --badge-font-size-sm: 0.6875rem;
+  --badge-font-size-base: 0.75rem;
+  --badge-font-size-lg: 0.8125rem;
 
   /* Typography */
   --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
 
+  /* Overlays & Modals */
+  --overlay-bg: rgba(0, 0, 0, 0.3);
+  --overlay-bg-heavy: rgba(0, 0, 0, 0.7);
+  --color-dark-surface: #1a1a2e;
+  --transition-transform: transform 0.25s ease;
+
   /* Sizing */
   --size-sidebar: 220px;
   --size-header: 3.5rem;

package/dashboard/src/middleware/current-phase.js

@@ -12,7 +12,8 @@ export default async function currentPhaseMiddleware(req, res, next) {
       res.locals.currentPhase = {
         number: cp.id,
         name: cp.name,
-        status: cp.status
+        status: cp.status,
+        nextAction: state.nextAction || null,
       };
     } else {
       res.locals.currentPhase = null;

package/dashboard/src/repositories/planning.repository.js

@@ -3,20 +3,10 @@ import { join, resolve, relative, normalize } from 'node:path';
 import matter from 'gray-matter';
 import { marked } from 'marked';
 import sanitizeHtml from 'sanitize-html';
+import { stripBOM } from '../utils/strip-bom.js';
 
 marked.setOptions({ gfm: true, breaks: false });
 
-/**
- * Strip UTF-8 BOM (Byte Order Mark) if present.
- * Windows editors (Notepad, older VS Code) may prepend BOM to UTF-8 files.
- * gray-matter will fail to detect frontmatter delimiters if BOM is present.
- * @param {string} content - Raw file content
- * @returns {string} Content without BOM
- */
-function stripBOM(content) {
-  return content.replace(/^\uFEFF/, '');
-}
-
 /**
  * Validate that a resolved path stays within the base directory.
  * Prevents path traversal attacks (e.g., ../../etc/passwd).

package/dashboard/src/routes/events.routes.js

@@ -1,5 +1,7 @@
 import { Router } from 'express';
 import { addClient, removeClient } from '../services/sse.service.js';
+import { tailLogFile } from '../services/log.service.js';
+import { join } from 'node:path';
 
 const router = Router();
 
@@ -42,4 +44,51 @@ router.get('/stream', (req, res) => {
   });
 });
 
+/**
+ * GET /logs/stream?file=<filename>
+ * SSE endpoint that tails a .planning/logs/<filename> for new JSONL entries.
+ * Sends log-entry events to the connected client.
+ */
+router.get('/logs/stream', async (req, res) => {
+  const { file } = req.query;
+
+  // Validate filename to prevent path traversal
+  if (!file || !/^[\w.-]+\.jsonl$/.test(file)) {
+    res.status(400).end('Invalid log file parameter');
+    return;
+  }
+
+  const projectDir = req.app.locals.projectDir;
+  const filePath = join(projectDir, '.planning', 'logs', file);
+
+  res.writeHead(200, {
+    'Content-Type': 'text/event-stream',
+    'Cache-Control': 'no-cache',
+    'Connection': 'keep-alive',
+    'X-Accel-Buffering': 'no'
+  });
+  res.flushHeaders();
+  res.write(': connected\n\n');
+
+  const sendEntry = (entry) => {
+    try {
+      const id = Date.now();
+      res.write(`event: log-entry\ndata: ${JSON.stringify(entry)}\nid: ${id}\n\n`);
+    } catch {
+      // client disconnected
+    }
+  };
+
+  const cleanup = await tailLogFile(filePath, sendEntry);
+
+  const heartbeat = setInterval(() => {
+    res.write(': heartbeat\n\n');
+  }, 30000);
+
+  req.on('close', () => {
+    clearInterval(heartbeat);
+    cleanup();
+  });
+});
+
 export default router;