@sienklogic/plan-build-run 2.19.0 → 2.19.1

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

@@ -1,98 +0,0 @@
-/* ============================================
-   Status Colors & Badges
-   ============================================ */
-
-:root {
-  --status-complete: #34d399;
-  --status-in-progress: #fbbf24;
-  --status-blocked: #f87171;
-  --status-not-started: #6b7280;
-}
-
-/* Text color by status */
-[data-status="complete"] { color: var(--status-complete); }
-[data-status="in-progress"] { color: var(--status-in-progress); }
-[data-status="blocked"],
-[data-status="failed"] { color: var(--status-blocked); }
-[data-status="not-started"],
-[data-status="pending"] { color: var(--status-not-started); }
-[data-status="passed"] { color: var(--status-complete); }
-[data-status="partial"] { color: var(--status-in-progress); }
-
-/* Status badge */
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.15rem 0.55rem;
-  border-radius: 999px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  line-height: 1.5;
-  white-space: nowrap;
-  border: 1px solid transparent;
-}
-
-/* Dark-friendly badge colors — softer backgrounds with good contrast */
-.status-badge[data-status="complete"] {
-  background: rgba(52, 211, 153, 0.12);
-  color: #6ee7b7;
-  border-color: rgba(52, 211, 153, 0.2);
-}
-
-.status-badge[data-status="in-progress"] {
-  background: rgba(251, 191, 36, 0.12);
-  color: #fcd34d;
-  border-color: rgba(251, 191, 36, 0.2);
-}
-
-.status-badge[data-status="blocked"],
-.status-badge[data-status="failed"] {
-  background: rgba(248, 113, 113, 0.12);
-  color: #fca5a5;
-  border-color: rgba(248, 113, 113, 0.2);
-}
-
-.status-badge[data-status="not-started"],
-.status-badge[data-status="pending"] {
-  background: rgba(107, 114, 128, 0.12);
-  color: #9ca3af;
-  border-color: rgba(107, 114, 128, 0.2);
-}
-
-.status-badge[data-status="passed"] {
-  background: rgba(52, 211, 153, 0.12);
-  color: #6ee7b7;
-  border-color: rgba(52, 211, 153, 0.2);
-}
-
-.status-badge[data-status="partial"] {
-  background: rgba(251, 191, 36, 0.12);
-  color: #fcd34d;
-  border-color: rgba(251, 191, 36, 0.2);
-}
-
-/* Priority badge variants */
-.status-badge[data-priority="P0"] {
-  background: rgba(248, 113, 113, 0.12);
-  color: #fca5a5;
-  border-color: rgba(248, 113, 113, 0.2);
-}
-
-.status-badge[data-priority="P1"] {
-  background: rgba(251, 146, 60, 0.12);
-  color: #fdba74;
-  border-color: rgba(251, 146, 60, 0.2);
-}
-
-.status-badge[data-priority="P2"] {
-  background: rgba(251, 191, 36, 0.12);
-  color: #fcd34d;
-  border-color: rgba(251, 191, 36, 0.2);
-}
-
-.status-badge[data-priority="PX"] {
-  background: rgba(129, 140, 248, 0.12);
-  color: #a5b4fc;
-  border-color: rgba(129, 140, 248, 0.2);
-}

package/dashboard/public/css/tokens.css

@@ -1,59 +0,0 @@
-/* ============================================
-   Towline Dashboard — Design Tokens
-   Single source of truth for colors, spacing,
-   typography, and sizing across all CSS files.
-   ============================================ */
-
-/* --- Light Mode (Default) --- */
-:root {
-  /* Colors */
-  --color-surface: #ffffff;
-  --color-surface-raised: #f8f9fa;
-  --color-surface-hover: rgba(0, 0, 0, 0.04);
-  --color-border: rgba(0, 0, 0, 0.1);
-  --color-text-dim: rgba(0, 0, 0, 0.5);
-  --color-text: #1a1a2e;
-  --color-accent: var(--pico-primary);
-
-  /* Spacing */
-  --space-xs: 0.25rem;
-  --space-sm: 0.5rem;
-  --space-md: 1rem;
-  --space-lg: 1.5rem;
-  --space-xl: 2rem;
-  --space-2xl: 3rem;
-
-  /* Radii */
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-
-  /* Typography */
-  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
-
-  /* Sizing */
-  --size-sidebar: 220px;
-  --size-header: 3.5rem;
-}
-
-/* --- Dark Mode (explicit attribute) --- */
-[data-theme="dark"] {
-  --color-surface: #13131a;
-  --color-surface-raised: rgba(255, 255, 255, 0.03);
-  --color-surface-hover: rgba(255, 255, 255, 0.06);
-  --color-border: rgba(255, 255, 255, 0.08);
-  --color-text-dim: rgba(255, 255, 255, 0.5);
-  --color-text: #e8e8f0;
-}
-
-/* --- Dark Mode (system preference, unless light forced) --- */
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --color-surface: #13131a;
-    --color-surface-raised: rgba(255, 255, 255, 0.03);
-    --color-surface-hover: rgba(255, 255, 255, 0.06);
-    --color-border: rgba(255, 255, 255, 0.08);
-    --color-text-dim: rgba(255, 255, 255, 0.5);
-    --color-text: #e8e8f0;
-  }
-}

package/dashboard/public/js/htmx-title.js

@@ -1,5 +0,0 @@
-// Update document.title from HX-Title response header on HTMX navigation
-document.addEventListener('htmx:afterSettle', function(event) {
-  var title = event.detail.xhr && event.detail.xhr.getResponseHeader('HX-Title');
-  if (title) document.title = title;
-});

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

@@ -1,34 +0,0 @@
-// Mobile sidebar toggle with backdrop overlay
-document.addEventListener('DOMContentLoaded', function() {
-  var toggle = document.querySelector('.sidebar-toggle');
-  var sidebar = document.querySelector('.sidebar');
-  if (!toggle || !sidebar) return;
-
-  // Create backdrop element
-  var backdrop = document.createElement('div');
-  backdrop.className = 'sidebar-backdrop';
-  document.body.appendChild(backdrop);
-
-  function closeSidebar() {
-    sidebar.classList.remove('open');
-    backdrop.classList.remove('open');
-  }
-
-  function toggleSidebar() {
-    sidebar.classList.toggle('open');
-    backdrop.classList.toggle('open');
-  }
-
-  toggle.addEventListener('click', toggleSidebar);
-  backdrop.addEventListener('click', closeSidebar);
-
-  // Close sidebar when a nav link is clicked (mobile)
-  var navLinks = sidebar.querySelectorAll('a');
-  navLinks.forEach(function(link) {
-    link.addEventListener('click', function() {
-      if (window.innerWidth <= 768) {
-        closeSidebar();
-      }
-    });
-  });
-});

package/dashboard/public/js/sse-client.js

@@ -1,100 +0,0 @@
-/**
- * Custom SSE client with exponential backoff reconnection and state recovery.
- */
-(function () {
-  'use strict';
-
-  class SSEClient {
-    constructor(url) {
-      this.baseUrl = url;
-      this.lastEventId = null;
-      this.backoff = 1000;
-      this.maxBackoff = 30000;
-      this.reconnectTimer = null;
-      this.es = null;
-      this.connect();
-    }
-
-    connect() {
-      if (this.es) {
-        this.es.close();
-      }
-
-      let url = this.baseUrl;
-      if (this.lastEventId) {
-        const sep = url.includes('?') ? '&' : '?';
-        url += sep + 'lastEventId=' + encodeURIComponent(this.lastEventId);
-      }
-
-      this.es = new EventSource(url);
-
-      this.es.onopen = () => {
-        this.backoff = 1000;
-        this.updateStatus(true);
-      };
-
-      this.es.onerror = () => {
-        this.es.close();
-        this.updateStatus(false);
-        this.scheduleReconnect();
-      };
-
-      this.es.addEventListener('file-change', (e) => {
-        if (e.lastEventId) {
-          this.lastEventId = e.lastEventId;
-        }
-        this.refreshContent();
-      });
-
-      this.es.addEventListener('state-recovery', (e) => {
-        if (e.lastEventId) {
-          this.lastEventId = e.lastEventId;
-        }
-        this.refreshContent();
-      });
-    }
-
-    scheduleReconnect() {
-      if (this.reconnectTimer) {
-        clearTimeout(this.reconnectTimer);
-      }
-      const jitter = this.backoff * (0.5 + Math.random() * 0.5);
-      this.reconnectTimer = setTimeout(() => {
-        this.connect();
-      }, jitter);
-      this.backoff = Math.min(this.backoff * 2, this.maxBackoff);
-    }
-
-    updateStatus(connected) {
-      const dot = document.getElementById('sse-status');
-      if (dot) {
-        dot.setAttribute('data-connected', String(connected));
-        dot.setAttribute('title', connected ? 'Live updates: connected' : 'Live updates: disconnected');
-      }
-    }
-
-    refreshContent() {
-      const currentPath = window.location.pathname;
-      fetch(currentPath, {
-        headers: { 'HX-Request': 'true' }
-      })
-        .then((res) => {
-          if (res.ok) return res.text();
-          throw new Error('Fetch failed: ' + res.status);
-        })
-        .then((html) => {
-          const target = document.getElementById('main-content');
-          if (target) {
-            target.innerHTML = html;
-          }
-        })
-        .catch((err) => {
-          console.error('SSE content refresh failed:', err.message);
-        });
-    }
-  }
-
-  document.addEventListener('DOMContentLoaded', () => {
-    new SSEClient('/api/events/stream');
-  });
-})();

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

@@ -1,46 +0,0 @@
-/* theme-toggle.js — Toggle light/dark theme via data-theme attribute + localStorage */
-(function () {
-  'use strict';
-
-  var STORAGE_KEY = 'pbr-theme';
-
-  function getEffectiveTheme() {
-    var explicit = document.documentElement.dataset.theme;
-    if (explicit === 'light' || explicit === 'dark') return explicit;
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-  }
-
-  function updateIcon(btn, theme) {
-    // Show sun when dark (click to go light), moon when light (click to go dark)
-    btn.textContent = theme === 'dark' ? '\u2600\uFE0F' : '\uD83C\uDF19';
-    btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
-  }
-
-  document.addEventListener('DOMContentLoaded', function () {
-    var btn = document.getElementById('theme-toggle');
-    if (!btn) return;
-
-    // Apply stored theme (also done in layout-top inline script for flash prevention)
-    var stored = localStorage.getItem(STORAGE_KEY);
-    if (stored) {
-      document.documentElement.dataset.theme = stored;
-    }
-
-    updateIcon(btn, getEffectiveTheme());
-
-    btn.addEventListener('click', function () {
-      var current = getEffectiveTheme();
-      var next = current === 'dark' ? 'light' : 'dark';
-      document.documentElement.dataset.theme = next;
-      localStorage.setItem(STORAGE_KEY, next);
-      updateIcon(btn, next);
-    });
-
-    // Update icon if system preference changes and no explicit preference is stored
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
-      if (!localStorage.getItem(STORAGE_KEY)) {
-        updateIcon(btn, getEffectiveTheme());
-      }
-    });
-  });
-})();

package/dashboard/src/app.js

@@ -1,91 +0,0 @@
-import express from 'express';
-import helmet from 'helmet';
-import { join } from 'path';
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-import indexRouter from './routes/index.routes.js';
-import pagesRouter from './routes/pages.routes.js';
-import eventsRouter from './routes/events.routes.js';
-import notFoundHandler from './middleware/notFoundHandler.js';
-import errorHandler from './middleware/errorHandler.js';
-import currentPhaseMiddleware from './middleware/current-phase.js';
-import { readFileSync } from 'node:fs';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-export function createApp(config) {
-  const app = express();
-
-  // Security headers via Helmet
-  // CSP allows CDN scripts (HTMX, Pico.css, htmx-ext-sse) and inline styles
-  app.use(helmet({
-    contentSecurityPolicy: {
-      directives: {
-        defaultSrc: ["'self'"],
-        scriptSrc: ["'self'", "https://cdn.jsdelivr.net"],
-        styleSrc: ["'self'", "'unsafe-inline'", "https://cdn.jsdelivr.net"],
-        imgSrc: ["'self'", "data:"],
-        connectSrc: ["'self'"],
-        fontSrc: ["'self'", "https://cdn.jsdelivr.net"]
-      }
-    }
-  }));
-  app.disable('x-powered-by');
-
-  // Store config for access in routes/services
-  app.locals.projectDir = config.projectDir;
-
-  // Read dashboard version from package.json for footer display
-  try {
-    const pkg = JSON.parse(readFileSync(join(__dirname, '..', 'package.json'), 'utf-8'));
-    app.locals.dashboardVersion = pkg.version || '0.0.0';
-  } catch (_e) {
-    app.locals.dashboardVersion = '0.0.0';
-  }
-
-  // View engine setup -- all paths use path.join (cross-platform)
-  app.set('views', join(__dirname, 'views'));
-  app.set('view engine', 'ejs');
-
-  // Built-in middleware
-  app.use(express.json());
-  app.use(express.urlencoded({ extended: false }));
-
-  // Handle common browser auto-requests cleanly (no stack traces in logs)
-  app.get('/favicon.ico', (req, res) => res.status(204).end());
-  app.get('/sw.js', (req, res) => res.status(404).end());
-
-  // Static files
-  app.use(express.static(join(__dirname, '..', 'public')));
-
-  // Auto-set HX-Title on HTMX partial responses so document.title stays current
-  app.use((req, res, next) => {
-    if (req.get('HX-Request') === 'true') {
-      const originalRender = res.render.bind(res);
-      res.render = function(view, options, callback) {
-        if (options && options.title && !res.getHeader('HX-Title')) {
-          res.setHeader('HX-Title', `${options.title} - Plan-Build-Run`);
-        }
-        return originalRender(view, options, callback);
-      };
-    }
-    next();
-  });
-
-  // Current phase middleware (populates res.locals.currentPhase for templates)
-  app.use(currentPhaseMiddleware);
-
-  // Routes
-  app.use('/', indexRouter);
-  app.use('/', pagesRouter);
-  app.use('/api/events', eventsRouter);
-
-  // 404 catch-all (after routes, before error handler)
-  app.use(notFoundHandler);
-
-  // Error handler MUST be registered last
-  app.use(errorHandler);
-
-  return app;
-}

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

@@ -1,24 +0,0 @@
-import { parseStateFile } from '../services/dashboard.service.js';
-
-/**
- * Middleware that reads STATE.md and sets res.locals.currentPhase
- * for use in sidebar and other templates.
- */
-export default async function currentPhaseMiddleware(req, res, next) {
-  try {
-    const state = await parseStateFile(req.app.locals.projectDir);
-    const cp = state.currentPhase;
-    if (cp && cp.id > 0) {
-      res.locals.currentPhase = {
-        number: cp.id,
-        name: cp.name,
-        status: cp.status
-      };
-    } else {
-      res.locals.currentPhase = null;
-    }
-  } catch (_err) {
-    res.locals.currentPhase = null;
-  }
-  next();
-}

package/dashboard/src/middleware/errorHandler.js

@@ -1,52 +0,0 @@
-/**
- * Express error-handling middleware.
- * MUST have exactly 4 parameters for Express to recognize it as an error handler.
- */
-
-// eslint-disable-next-line no-unused-vars
-export default function errorHandler(err, req, res, next) {
-  // If headers already sent, delegate to Express default handler
-  if (res.headersSent) {
-    return next(err);
-  }
-
-  const isDev = process.env.NODE_ENV !== 'production';
-  const status = err.status || err.statusCode || 500;
-
-  // Logging -- skip stack traces for 404s (they're expected, not bugs)
-  if (status === 404) {
-    console.warn(`404: ${req.originalUrl}`);
-  } else {
-    console.error('Unhandled error:', err.message);
-    if (isDev) {
-      console.error(err.stack);
-    }
-  }
-
-  // Detect HTMX requests
-  const isHtmx = req.get('HX-Request') === 'true';
-
-  // Set Vary header for proper caching
-  res.setHeader('Vary', 'HX-Request');
-
-  // Build template data
-  const templateData = {
-    title: `Error ${status}`,
-    status,
-    message: err.message || 'Internal Server Error',
-    stack: isDev ? err.stack : null,
-    activePage: ''
-  };
-
-  // Render response
-  if (isHtmx) {
-    let html = `<h1>Error ${status}</h1><p>${templateData.message}</p>`;
-    if (templateData.stack) {
-      html += `<pre><code>${templateData.stack}</code></pre>`;
-    }
-    html += '<p><a href="/">Return to Dashboard</a></p>';
-    return res.status(status).send(html);
-  }
-
-  res.status(status).render('error', templateData);
-}

package/dashboard/src/middleware/notFoundHandler.js

@@ -1,9 +0,0 @@
-/**
- * 404 catch-all handler for routes that don't match any defined route.
- * Must be registered AFTER all route handlers but BEFORE the error handler.
- */
-export default function notFoundHandler(req, res, next) {
-  const err = new Error(`Page not found: ${req.originalUrl}`);
-  err.status = 404;
-  next(err);
-}

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

@@ -1,130 +0,0 @@
-import { readFile, readdir } from 'node:fs/promises';
-import { join, resolve, relative, normalize } from 'node:path';
-import matter from 'gray-matter';
-import { marked } from 'marked';
-
-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).
- *
- * @param {string} basePath - Absolute base directory path
- * @param {string} userPath - User-provided path (may be relative)
- * @returns {string} Validated absolute path
- * @throws {Error} With status 403 if path escapes base directory
- */
-export function validatePath(basePath, userPath) {
-  const resolvedBase = normalize(resolve(basePath));
-  const resolvedUser = normalize(resolve(basePath, userPath));
-
-  // Compute the relative path from base to target
-  const rel = relative(resolvedBase, resolvedUser);
-
-  // If relative path starts with '..' it escaped the base directory.
-  // If rel resolves to an absolute path, it was an absolute path injection.
-  if (rel.startsWith('..') || resolve(rel) === rel) {
-    const err = new Error('Path traversal attempt detected');
-    err.status = 403;
-    err.code = 'PATH_TRAVERSAL';
-    throw err;
-  }
-
-  return resolvedUser;
-}
-
-/**
- * Read and parse a single markdown file with YAML frontmatter.
- *
- * @param {string} filePath - Absolute path to the markdown file
- * @returns {Promise<{frontmatter: object, html: string, rawContent: string}>}
- * @throws {Error} ENOENT if file does not exist, parse error if YAML is malformed
- */
-export async function readMarkdownFile(filePath) {
-  const fileContent = await readFile(filePath, 'utf-8');
-  const cleanContent = stripBOM(fileContent);
-
-  let data, content;
-  try {
-    ({ data, content } = matter(cleanContent, {
-      engines: {
-        javascript: false
-      }
-    }));
-  } catch (error) {
-    // gray-matter throws YAMLException for malformed frontmatter.
-    // Wrap it in a user-friendly error with status 400.
-    if (error.name === 'YAMLException' || (error.constructor && error.constructor.name === 'YAMLException')) {
-      const wrapped = new Error(`Invalid YAML frontmatter in ${filePath}: ${error.message}`);
-      wrapped.status = 400;
-      wrapped.cause = error;
-      throw wrapped;
-    }
-    throw error;
-  }
-
-  const html = marked.parse(content);
-
-  return {
-    frontmatter: data,
-    html,
-    rawContent: content
-  };
-}
-
-/**
- * Read and parse multiple markdown files in parallel (fail-fast).
- * If any file fails, the entire operation rejects immediately.
- *
- * @param {string[]} filePaths - Array of absolute file paths
- * @returns {Promise<Array<{frontmatter: object, html: string, rawContent: string}>>}
- */
-export async function readMarkdownFiles(filePaths) {
-  return Promise.all(
-    filePaths.map(filePath => readMarkdownFile(filePath))
-  );
-}
-
-/**
- * Read and parse multiple markdown files with partial failure tolerance.
- * All reads complete even if some fail. Returns settled results.
- *
- * @param {string[]} filePaths - Array of absolute file paths
- * @returns {Promise<Array<{status: 'fulfilled', value: object} | {status: 'rejected', reason: Error}>>}
- */
-export async function readMarkdownFilesSettled(filePaths) {
-  return Promise.allSettled(
-    filePaths.map(filePath => readMarkdownFile(filePath))
-  );
-}
-
-/**
- * List all markdown files under the .planning/ directory recursively.
- * Uses native fs.readdir with recursive option (Node.js 18.17+).
- *
- * @param {string} projectDir - Absolute path to the project root
- * @returns {Promise<string[]>} Array of absolute file paths to .md files
- * @throws {Error} ENOENT if .planning/ directory does not exist
- */
-export async function listPlanningFiles(projectDir) {
-  const planningDir = join(projectDir, '.planning');
-  const entries = await readdir(planningDir, {
-    recursive: true,
-    withFileTypes: true
-  });
-
-  return entries
-    .filter(entry => entry.isFile() && entry.name.endsWith('.md'))
-    .map(entry => join(entry.parentPath || entry.path, entry.name));
-}