@sienklogic/plan-build-run 2.27.2 → 2.28.0

package/dashboard/public/css/tokens.css

@@ -1,42 +1,56 @@
 /* ============================================
-   Towline Dashboard — Design Tokens
-   Single source of truth for colors, spacing,
-   typography, and sizing across all CSS files.
+   PBR Dashboard — Design Tokens
+   Semantic CSS variables backed by Open Props.
+   Open Props must be loaded before this file.
    ============================================ */
 
 /* --- 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(--tblr-primary, #0054a6);
-
-  /* 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;
-  --radius-lg: 0.75rem;
+  /* Surface colors */
+  --color-surface: var(--gray-0);
+  --color-surface-raised: var(--gray-1);
+  --color-surface-hover: var(--gray-2);
+  --color-border: var(--gray-3);
+
+  /* Text colors */
+  --color-text: var(--gray-9);
+  --color-text-dim: var(--gray-6);
+  --color-text-muted: var(--gray-5);
+
+  /* Accent */
+  --color-accent: var(--blue-6);
+  --color-accent-hover: var(--blue-7);
+
+  /* Spacing — mapped from Open Props size scale */
+  --space-xs: var(--size-1);
+  --space-sm: var(--size-2);
+  --space-md: var(--size-4);
+  --space-lg: var(--size-6);
+  --space-xl: var(--size-8);
+  --space-2xl: var(--size-10);
+
+  /* Border radii */
+  --radius-sm: var(--radius-2);
+  --radius-md: var(--radius-3);
+  --radius-lg: var(--radius-4);
 
   /* 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);
+  --shadow-sm: var(--shadow-2);
+  --shadow-md: var(--shadow-4);
+
+  /* Typography */
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+
+  /* Layout dimensions */
+  --size-sidebar: 220px;
+  --size-header: 3.5rem;
 
   /* Transitions */
-  --transition-fast: 0.12s ease;
-  --transition-base: 0.2s ease;
+  --transition-fast: var(--ease-3) 0.12s;
+  --transition-base: var(--ease-3) 0.2s;
 
-  /* Cards */
+  /* Component tokens — derived from semantic tokens above */
   --card-bg: var(--color-surface-raised);
   --card-border: var(--color-border);
   --card-radius: var(--radius-md);
@@ -44,52 +58,44 @@
   --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;
+/* --- Dark Mode (explicit [data-theme="dark"] attribute) --- */
+[data-theme="dark"] {
+  --color-surface: var(--gray-9);
+  --color-surface-raised: var(--gray-8);
+  --color-surface-hover: var(--gray-7);
+  --color-border: var(--gray-7);
 
-  /* Sizing */
-  --size-sidebar: 220px;
-  --size-header: 3.5rem;
-}
+  --color-text: var(--gray-0);
+  --color-text-dim: var(--gray-4);
+  --color-text-muted: var(--gray-5);
 
-/* --- Dark Mode (explicit attribute) --- */
-[data-bs-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;
+  --color-accent: var(--blue-4);
+  --color-accent-hover: var(--blue-3);
 }
 
 /* --- Dark Mode (system preference, unless light forced) --- */
 @media (prefers-color-scheme: dark) {
-  :root:not([data-bs-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;
+  :root:not([data-theme="light"]) {
+    --color-surface: var(--gray-9);
+    --color-surface-raised: var(--gray-8);
+    --color-surface-hover: var(--gray-7);
+    --color-border: var(--gray-7);
+
+    --color-text: var(--gray-0);
+    --color-text-dim: var(--gray-4);
+    --color-text-muted: var(--gray-5);
+
+    --color-accent: var(--blue-4);
+    --color-accent-hover: var(--blue-3);
   }
 }

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

@@ -1,100 +1,70 @@
 /**
- * Custom SSE client with exponential backoff reconnection and state recovery.
+ * SSE client with exponential backoff reconnection.
+ * Listens for file-change events and triggers HTMX refresh.
  */
 (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();
-      }
+  var SSE_URL = '/api/events/stream';
+  var backoff = 1000;
+  var maxBackoff = 30000;
+  var reconnectTimer = null;
+  var es = null;
 
-      let url = this.baseUrl;
-      if (this.lastEventId) {
-        const sep = url.includes('?') ? '&' : '?';
-        url += sep + 'lastEventId=' + encodeURIComponent(this.lastEventId);
-      }
+  function updateStatus(connected) {
+    var dot = document.getElementById('sse-status');
+    if (dot) {
+      dot.setAttribute('data-connected', String(connected));
+      dot.setAttribute('title', connected ? 'Live updates: connected' : 'Live updates: disconnected');
+      dot.setAttribute('aria-label', connected ? 'Live updates: connected' : 'Live updates: disconnected');
+    }
+  }
 
-      this.es = new EventSource(url);
+  function scheduleReconnect() {
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+    }
+    // Add jitter to avoid thundering herd
+    var jitter = backoff * (0.5 + Math.random() * 0.5);
+    reconnectTimer = setTimeout(connect, jitter);
+    backoff = Math.min(backoff * 2, maxBackoff);
+  }
 
-      this.es.onopen = () => {
-        this.backoff = 1000;
-        this.updateStatus(true);
-      };
+  function connect() {
+    if (es) {
+      es.close();
+      es = null;
+    }
 
-      this.es.onerror = () => {
-        this.es.close();
-        this.updateStatus(false);
-        this.scheduleReconnect();
-      };
+    es = new EventSource(SSE_URL);
 
-      this.es.addEventListener('file-change', (e) => {
-        if (e.lastEventId) {
-          this.lastEventId = e.lastEventId;
-        }
-        this.refreshContent();
-      });
+    es.onopen = function () {
+      backoff = 1000; // Reset backoff on successful connection
+      updateStatus(true);
+    };
 
-      this.es.addEventListener('state-recovery', (e) => {
-        if (e.lastEventId) {
-          this.lastEventId = e.lastEventId;
-        }
-        this.refreshContent();
-      });
-    }
+    es.onerror = function () {
+      es.close();
+      es = null;
+      updateStatus(false);
+      scheduleReconnect();
+    };
 
-    scheduleReconnect() {
-      if (this.reconnectTimer) {
-        clearTimeout(this.reconnectTimer);
+    es.addEventListener('file-change', function (event) {
+      var data = null;
+      try {
+        data = JSON.parse(event.data);
+      } catch (_e) {
+        data = { raw: event.data };
       }
-      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');
+      // Notify HTMX listeners via custom event
+      if (typeof htmx !== 'undefined') {
+        htmx.trigger(document.body, 'sse:file-change', data);
       }
-    }
-
-    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');
+  document.addEventListener('DOMContentLoaded', function () {
+    connect();
   });
 })();

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

@@ -1,18 +1,24 @@
-/* theme-toggle.js — Toggle light/dark theme via data-bs-theme attribute + localStorage */
 (function () {
   'use strict';
 
   var STORAGE_KEY = 'pbr-theme';
+  var root = document.documentElement;
+
+  // Apply saved or system preference immediately to prevent flash
+  var saved = localStorage.getItem(STORAGE_KEY);
+  if (saved) {
+    root.setAttribute('data-theme', saved);
+  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    root.setAttribute('data-theme', 'dark');
+  }
 
   function getEffectiveTheme() {
-    var explicit = document.documentElement.dataset.bsTheme;
-    if (explicit === 'light' || explicit === 'dark') return explicit;
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    return root.getAttribute('data-theme') || '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';
+    // Sun when dark (click to go light), moon when light (click to go dark)
+    btn.querySelector('.theme-btn__icon').textContent = theme === 'dark' ? '\u2600\uFE0F' : '\uD83C\uDF19';
     btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
   }
 
@@ -20,25 +26,24 @@
     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.bsTheme = stored;
-    }
-
+    // Sync icon with current theme
     updateIcon(btn, getEffectiveTheme());
 
     btn.addEventListener('click', function () {
       var current = getEffectiveTheme();
       var next = current === 'dark' ? 'light' : 'dark';
-      document.documentElement.dataset.bsTheme = next;
+      root.setAttribute('data-theme', next);
       localStorage.setItem(STORAGE_KEY, next);
       updateIcon(btn, next);
     });
 
-    // Update icon if system preference changes and no explicit preference is stored
+    // Update icon if system preference changes and no explicit choice is stored
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
       if (!localStorage.getItem(STORAGE_KEY)) {
+        root.removeAttribute('data-theme');
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          root.setAttribute('data-theme', 'dark');
+        }
         updateIcon(btn, getEffectiveTheme());
       }
     });

package/dashboard/src/components/Layout.tsx

@@ -0,0 +1,93 @@
+import { html } from 'hono/html';
+
+interface LayoutProps {
+  title: string;
+  children: any;
+  currentView?: string;
+}
+
+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' },
+];
+
+export function Layout({ title, children, currentView }: LayoutProps) {
+  return (
+    <html lang="en" data-theme="light">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title} — PBR Dashboard</title>
+
+        {/* Open Props */}
+        <link rel="stylesheet" href="https://unpkg.com/open-props" />
+        <link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css" />
+
+        {/* Local design system */}
+        <link rel="stylesheet" href="/css/tokens.css" />
+        <link rel="stylesheet" href="/css/layout.css" />
+        <link rel="stylesheet" href="/css/status-colors.css" />
+
+        {/* Prevent flash of wrong theme */}
+        {html`<script>
+          (function() {
+            var saved = localStorage.getItem('pbr-theme');
+            if (saved) { document.documentElement.setAttribute('data-theme', saved); }
+            else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+              document.documentElement.setAttribute('data-theme', 'dark');
+            }
+          })();
+        </script>`}
+      </head>
+      <body>
+        <a href="#main-content" class="skip-link">Skip to content</a>
+
+        <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>
+          </div>
+
+          <ul class="sidebar__nav" role="list">
+            {navItems.map((item) => {
+              const isActive = currentView === item.view ||
+                (!currentView && item.view === 'home');
+              return (
+                <li key={item.href}>
+                  <a
+                    href={item.href}
+                    class={`sidebar__nav-link${isActive ? ' sidebar__nav-link--active' : ''}`}
+                    aria-current={isActive ? 'page' : undefined}
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+
+          <div class="sidebar__footer">
+            <button id="theme-toggle" class="theme-btn" type="button" aria-label="Toggle dark/light theme">
+              <span class="theme-btn__icon" aria-hidden="true">◐</span>
+            </button>
+            <span id="sse-status" data-connected="false" title="Live updates: disconnected" aria-label="Live update status"></span>
+          </div>
+        </nav>
+
+        <main id="main-content" class="main-content">
+          {children}
+        </main>
+
+        {/* HTMX */}
+        <script src="https://unpkg.com/htmx.org@2" defer></script>
+        {/* Alpine.js */}
+        <script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>
+        {/* Local scripts */}
+        <script src="/js/theme-toggle.js"></script>
+        <script src="/js/sse-client.js" defer></script>
+      </body>
+    </html>
+  );
+}

package/dashboard/src/global.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="typed-htmx" />
+import 'hono/jsx';
+
+declare module 'hono/jsx' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [key: string]: HtmxAttributes & Record<string, unknown>;
+    }
+  }
+}

package/dashboard/src/index.tsx

@@ -0,0 +1,132 @@
+import { serve } from '@hono/node-server';
+import { serveStatic } from '@hono/node-server/serve-static';
+import { Hono } from 'hono';
+import { compress } from 'hono/compress';
+import { logger } from 'hono/logger';
+import { secureHeaders } from 'hono/secure-headers';
+import { Layout } from './components/Layout';
+import { indexRouter } from './routes/index.routes';
+import { sseHandler } from './sse-handler';
+import { startWatcher } from './watcher-setup';
+import { currentPhaseMiddleware } from './middleware/current-phase';
+
+interface ServerConfig {
+  projectDir: string;
+  port: number;
+}
+
+interface CurrentPhase {
+  number: number;
+  name: string;
+  status: string;
+  nextAction: string | null;
+}
+
+type Env = {
+  Variables: {
+    projectDir: string;
+    currentPhase: CurrentPhase | null;
+  };
+};
+
+function createApp(config: ServerConfig) {
+  const app = new Hono<Env>();
+
+  // Inject projectDir into context for all routes
+  app.use('*', async (c, next) => {
+    c.set('projectDir', config.projectDir);
+    await next();
+  });
+
+  // Security headers (replaces helmet)
+  app.use('*', secureHeaders());
+
+  // Compression — skip SSE endpoint to avoid buffering
+  app.use('*', async (c, next) => {
+    if (c.req.path.startsWith('/api/events')) {
+      return next();
+    }
+    return compress()(c, next);
+  });
+
+  // Request logging
+  app.use('*', logger());
+
+  // Vary: Accept header on all responses
+  app.use('*', async (c, next) => {
+    await next();
+    c.header('Vary', 'Accept');
+  });
+
+  // Static file serving from public/
+  app.use('*', serveStatic({ root: './public' }));
+
+  // Current phase middleware — populates c.var.currentPhase for all routes
+  app.use('*', currentPhaseMiddleware);
+
+  // Routes
+  app.route('/', indexRouter);
+
+  // SSE endpoint — real streamSSE handler with multi-client broadcast
+  app.get('/api/events/stream', sseHandler);
+
+  // 404 handler
+  app.notFound((c) => {
+    return c.html(
+      <Layout title="Not Found">
+        <h1>404 — Not Found</h1>
+        <p>The page you requested does not exist.</p>
+        <p><a href="/">Return to Command Center</a></p>
+      </Layout>,
+      404
+    );
+  });
+
+  // Error handler
+  app.onError((err, c) => {
+    console.error('Server error:', err);
+    return c.html(
+      <Layout title="Server Error">
+        <h1>500 — Server Error</h1>
+        <p>Something went wrong. Check the server logs for details.</p>
+        <p><a href="/">Return to Command Center</a></p>
+      </Layout>,
+      500
+    );
+  });
+
+  return app;
+}
+
+export function startServer(config: ServerConfig): void {
+  const app = createApp(config);
+
+  const server = serve({
+    fetch: app.fetch,
+    port: config.port,
+  });
+
+  // Start file watcher — broadcasts SSE events on .planning/ changes
+  // Import caches lazily to avoid circular deps
+  const watcher = startWatcher(config.projectDir, () => {
+    // Cache invalidation callback — services with TTL caches expose them
+    // These will be wired as services are consumed by routes
+  });
+
+  console.log(`PBR Dashboard running at http://localhost:${config.port}`);
+  console.log(`Project directory: ${config.projectDir}`);
+
+  // Graceful shutdown
+  process.on('SIGINT', () => {
+    console.log('\nShutting down dashboard...');
+    watcher.close();
+    server.close(() => process.exit(0));
+  });
+
+  process.on('SIGTERM', () => {
+    watcher.close();
+    server.close(() => process.exit(0));
+  });
+}
+
+export { createApp };

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

@@ -0,0 +1,25 @@
+import type { MiddlewareHandler } from 'hono';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore — dashboard.service.js is plain ESM with no type declarations
+import { parseStateFile } from '../services/dashboard.service.js';
+
+export const currentPhaseMiddleware: MiddlewareHandler = async (c, next) => {
+  try {
+    const projectDir = c.get('projectDir') as string;
+    const state = await parseStateFile(projectDir);
+    const cp = state.currentPhase;
+    if (cp && cp.id > 0) {
+      c.set('currentPhase', {
+        number: cp.id,
+        name: cp.name,
+        status: cp.status,
+        nextAction: state.nextAction || null,
+      });
+    } else {
+      c.set('currentPhase', null);
+    }
+  } catch {
+    c.set('currentPhase', null);
+  }
+  await next();
+};

package/dashboard/src/routes/index.routes.tsx

@@ -0,0 +1,36 @@
+import { Hono } from 'hono';
+import { Layout } from '../components/Layout';
+
+type Env = {
+  Variables: {
+    projectDir: string;
+  };
+};
+
+const router = new Hono<Env>();
+
+router.get('/favicon.ico', (c) => {
+  return c.body(null, 204);
+});
+
+router.get('/', (c) => {
+  const isHtmx = c.req.header('HX-Request');
+
+  if (isHtmx) {
+    return c.html(
+      <main id="main-content">
+        <h1>Command Center</h1>
+        <p>Project overview loads here.</p>
+      </main>
+    );
+  }
+
+  return c.html(
+    <Layout title="Command Center" currentView="home">
+      <h1>Command Center</h1>
+      <p>Project overview loads here.</p>
+    </Layout>
+  );
+});
+
+export { router as indexRouter };