@sienklogic/plan-build-run 2.31.0 → 2.32.1

package/CHANGELOG.md

@@ -5,6 +5,27 @@ 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.32.1](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.32.0...plan-build-run-v2.32.1) (2026-02-24)
+
+
+### Bug Fixes
+
+* **43-02:** use tsx runtime with absolute static path for cross-cwd dashboard launch ([b19d7d5](https://github.com/SienkLogic/plan-build-run/commit/b19d7d5267632eed82760257df7f50592a71f139))
+
+## [2.32.0](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.31.0...plan-build-run-v2.32.0) (2026-02-24)
+
+
+### Features
+
+* **42-01:** create settings routes, CSS, wire into app, and add config.service.d.ts ([3c4f953](https://github.com/SienkLogic/plan-build-run/commit/3c4f9531de93acc4e47b4ab6a94f962972c3f6ab))
+* **42-02:** add log viewer routes (page, entries, SSE tail) and CSS ([cbcb47c](https://github.com/SienkLogic/plan-build-run/commit/cbcb47ce31b2e06481e329bfd01597bcc644a4a8))
+* **42-02:** add LogFileList, LogEntryList, and LogViewer components ([3101c12](https://github.com/SienkLogic/plan-build-run/commit/3101c129dbf5e6535b720188be2a49a583008303))
+
+
+### Bug Fixes
+
+* **42-02:** move beforeunload cleanup to addEventListener for JSX compatibility ([e582a51](https://github.com/SienkLogic/plan-build-run/commit/e582a51ef628e7596bb42e352dbf8df861d67e07))
+
 ## [2.31.0](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.30.0...plan-build-run-v2.31.0) (2026-02-24)
 
 

package/dashboard/public/css/settings.css

@@ -0,0 +1,314 @@
+/* Settings page styles */
+
+/* Tab bar */
+.settings-tabs {
+  display: flex;
+  gap: var(--size-2);
+  border-bottom: 2px solid var(--surface-3, #e2e8f0);
+  margin-bottom: var(--size-5);
+  padding-bottom: 0;
+}
+
+/* Mode toggle (Form / Raw JSON) */
+.config-mode-toggle {
+  display: flex;
+  gap: var(--size-2);
+  margin-bottom: var(--size-4);
+}
+
+/* Tab buttons — shared by settings-tabs and config-mode-toggle */
+.tab-btn {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: var(--size-2) var(--size-4);
+  font-size: var(--font-size-1);
+  font-weight: 500;
+  color: var(--text-2, #64748b);
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  margin-bottom: -2px;
+}
+
+.tab-btn:hover {
+  color: var(--text-1, #1e293b);
+}
+
+.tab-btn.active {
+  color: var(--link, #2563eb);
+  border-bottom-color: var(--link, #2563eb);
+}
+
+/* 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);
+}
+
+.config-section--nested {
+  margin-top: var(--size-4);
+  background: var(--surface-2, #f1f5f9);
+}
+
+/* Section heading */
+.config-section__title {
+  font-size: var(--font-size-1);
+  font-weight: 600;
+  color: var(--text-1, #1e293b);
+  margin: 0 0 var(--size-3) 0;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Individual field row */
+.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);
+  cursor: pointer;
+}
+
+.config-field--check {
+  flex-direction: row;
+}
+
+.config-field__label {
+  min-width: 12rem;
+  color: var(--text-2, #64748b);
+  font-size: var(--font-size-0);
+}
+
+.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);
+}
+
+.config-field input[readonly] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.config-field input[type='checkbox'] {
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--link, #2563eb);
+  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);
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+/* Config actions row */
+.config-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: var(--size-3);
+}
+
+/* Inline feedback */
+.config-feedback {
+  min-height: 1.5rem;
+  margin-top: var(--size-2);
+  font-size: var(--font-size-0);
+}
+
+.feedback--success {
+  color: var(--green-7, #15803d);
+  font-weight: 500;
+}
+
+.feedback--error {
+  color: var(--red-7, #b91c1c);
+  font-weight: 500;
+}
+
+/* Empty state */
+.config-empty {
+  font-size: var(--font-size-0);
+  color: var(--text-2, #64748b);
+  font-style: italic;
+  margin: 0;
+}
+
+/* Primary button (consistent with other pages) */
+.btn--primary {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--size-2);
+  padding: var(--size-2) var(--size-5);
+  background: var(--link, #2563eb);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-2);
+  font-size: var(--font-size-1);
+  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);
+}
+
+/* ── Log Viewer ─────────────────────────────────────── */
+.log-viewer-layout {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  gap: var(--size-4);
+  height: calc(100vh - var(--size-12));
+}
+
+.log-file-sidebar {
+  border-right: 1px solid var(--surface-3);
+  padding-right: var(--size-3);
+  overflow-y: auto;
+}
+
+.log-file-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.log-file-item {
+  display: block;
+  padding: var(--size-2) var(--size-3);
+  border-radius: var(--radius-2);
+  text-decoration: none;
+  color: var(--text-2);
+  font-size: var(--font-size-0);
+  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-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-main { overflow-y: auto; padding-right: var(--size-2); }
+
+.log-filters {
+  display: flex;
+  gap: var(--size-3);
+  align-items: center;
+  margin-bottom: var(--size-3);
+  padding: var(--size-2) var(--size-3);
+  background: var(--surface-2);
+  border-radius: var(--radius-2);
+}
+
+.log-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-0);
+}
+
+.log-table th,
+.log-table td {
+  text-align: left;
+  padding: var(--size-1) var(--size-2);
+  border-bottom: 1px solid var(--surface-3);
+}
+
+.log-table th { color: var(--text-2); font-weight: 500; }
+
+.log-badge {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: var(--radius-round);
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  background: var(--surface-3);
+  color: var(--text-2);
+}
+
+.log-badge--error { background: var(--red-2); color: var(--red-9); }
+.log-badge--warn  { background: var(--yellow-2); color: var(--yellow-9); }
+.log-badge--info  { background: var(--blue-2); color: var(--blue-9); }
+.log-badge--hook  { background: var(--violet-2); color: var(--violet-9); }
+.log-badge--task  { background: var(--green-2); color: var(--green-9); }
+.log-badge--agent { background: var(--cyan-2); color: var(--cyan-9); }
+
+.log-pagination {
+  display: flex;
+  gap: var(--size-2);
+  align-items: center;
+  padding: var(--size-2) 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);
+}
+
+.tail-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--surface-3);
+}
+
+.tail-dot--active {
+  background: var(--green-6);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  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); }

package/dashboard/src/components/Layout.tsx

@@ -37,6 +37,7 @@ export function Layout({ title, children, currentView }: LayoutProps) {
         <link rel="stylesheet" href="/css/command-center.css" />
         <link rel="stylesheet" href="/css/explorer.css" />
         <link rel="stylesheet" href="/css/timeline.css" />
+        <link rel="stylesheet" href="/css/settings.css" />
 
         {/* Prevent flash of wrong theme */}
         {html`<script>

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

@@ -0,0 +1,108 @@
+interface LogEntryListProps {
+  entries: object[];
+  total: number;
+  page: number;
+  pageSize: number;
+  file: string;
+  typeFilter: string;
+  q: string;
+}
+
+function sanitizeType(t: unknown): string {
+  if (typeof t !== 'string' || !t) return 'unknown';
+  return t.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase();
+}
+
+function getTimestamp(entry: Record<string, unknown>): string {
+  const raw = entry['timestamp'] ?? entry['ts'] ?? entry['time'];
+  if (!raw) return '—';
+  try {
+    return new Date(raw as string).toLocaleString();
+  } catch {
+    return String(raw);
+  }
+}
+
+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;
+}
+
+export function LogEntryRow({ entry }: { entry: object }) {
+  const e = entry as Record<string, unknown>;
+  const type = typeof e['type'] === 'string' ? e['type'] : '';
+  const badge = sanitizeType(type);
+  const timestamp = getTimestamp(e);
+  const summary = getSummary(e);
+
+  return (
+    <tr>
+      <td>
+        <span class={`log-badge log-badge--${badge}`}>{type || '—'}</span>
+      </td>
+      <td>{timestamp}</td>
+      <td>{summary}</td>
+    </tr>
+  );
+}
+
+export function LogEntryList({ entries, total, page, pageSize, file, typeFilter, q }: LogEntryListProps) {
+  const start = (page - 1) * pageSize + 1;
+  const end = Math.min(page * pageSize, total);
+  const encodedFile = encodeURIComponent(file);
+  const encodedQ = encodeURIComponent(q);
+  const encodedType = encodeURIComponent(typeFilter);
+
+  const baseQuery = `file=${encodedFile}&typeFilter=${encodedType}&q=${encodedQ}`;
+
+  return (
+    <div id="log-entries">
+      <p class="log-summary">
+        {total === 0
+          ? 'No entries found.'
+          : `Showing ${start}–${end} of ${total} entries`}
+      </p>
+
+      {entries.length > 0 && (
+        <table class="log-table">
+          <thead>
+            <tr>
+              <th>Type</th>
+              <th>Timestamp</th>
+              <th>Message / Data</th>
+            </tr>
+          </thead>
+          <tbody>
+            {entries.map((entry, i) => (
+              <LogEntryRow key={i} entry={entry} />
+            ))}
+          </tbody>
+        </table>
+      )}
+
+      <div class="log-pagination">
+        <button
+          hx-get={`/api/settings/logs/entries?${baseQuery}&page=${page - 1}`}
+          hx-target="#log-entries"
+          hx-swap="outerHTML"
+          disabled={page <= 1}
+        >
+          Prev
+        </button>
+        <span>{page}</span>
+        <button
+          hx-get={`/api/settings/logs/entries?${baseQuery}&page=${page + 1}`}
+          hx-target="#log-entries"
+          hx-swap="outerHTML"
+          disabled={end >= total}
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// Alias used by route for HTMX partial responses
+export const LogEntriesFragment = LogEntryList;

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

@@ -0,0 +1,36 @@
+interface LogFileListProps {
+  files: Array<{ name: string; size: number; modified: string }>;
+  selectedFile?: string;
+}
+
+function formatBytes(n: number): string {
+  if (n >= 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${n} B`;
+}
+
+export function LogFileList({ files, selectedFile }: LogFileListProps) {
+  if (files.length === 0) {
+    return <p class="log-empty">No log files found in .planning/logs/</p>;
+  }
+
+  return (
+    <ul class="log-file-list">
+      {files.map((file) => {
+        const isSelected = file.name === selectedFile;
+        const date = new Date(file.modified).toLocaleDateString();
+        return (
+          <li key={file.name}>
+            <a
+              href={`/settings/logs?file=${encodeURIComponent(file.name)}`}
+              class={`log-file-item${isSelected ? ' log-file-item--active' : ''}`}
+            >
+              <span class="log-file-name">{file.name}</span>
+              <span class="log-file-size">{formatBytes(file.size)}</span>
+              <span class="log-file-date">{date}</span>
+            </a>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

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

@@ -0,0 +1,129 @@
+import { html } from 'hono/html';
+import { LogFileList } from './LogFileList';
+import { LogEntryList } from './LogEntryList';
+
+interface LogViewerProps {
+  files: Array<{ name: string; size: number; modified: string }>;
+  selectedFile?: string;
+  entries?: object[];
+  total?: number;
+  page?: number;
+  pageSize?: number;
+  typeFilter?: string;
+  q?: string;
+  isLatest?: boolean;
+}
+
+export function LogViewer({
+  files,
+  selectedFile,
+  entries = [],
+  total = 0,
+  page = 1,
+  pageSize = 50,
+  typeFilter = '',
+  q = '',
+  isLatest = false,
+}: LogViewerProps) {
+  return (
+    <div class="log-viewer-layout">
+      <aside class="log-file-sidebar">
+        <h2 class="config-section__title">Log Files</h2>
+        <LogFileList files={files} selectedFile={selectedFile} />
+      </aside>
+
+      <section class="log-main">
+        {!selectedFile ? (
+          <p class="log-prompt">Select a log file to view entries.</p>
+        ) : (
+          <>
+            <form
+              class="log-filters"
+              hx-get="/api/settings/logs/entries"
+              hx-target="#log-entries"
+              hx-swap="outerHTML"
+              hx-trigger="change, input delay:300ms from:[name=q]"
+            >
+              <input type="hidden" name="file" value={selectedFile} />
+              <input type="hidden" name="page" value="1" />
+
+              <select name="typeFilter">
+                <option value="" selected={typeFilter === ''}>All types</option>
+                <option value="hook" selected={typeFilter === 'hook'}>hook</option>
+                <option value="task" selected={typeFilter === 'task'}>task</option>
+                <option value="agent" selected={typeFilter === 'agent'}>agent</option>
+                <option value="error" selected={typeFilter === 'error'}>error</option>
+                <option value="info" selected={typeFilter === 'info'}>info</option>
+                <option value="warn" selected={typeFilter === 'warn'}>warn</option>
+                <option value="debug" selected={typeFilter === 'debug'}>debug</option>
+              </select>
+
+              <input
+                type="text"
+                name="q"
+                placeholder="Search entries..."
+                value={q || ''}
+              />
+            </form>
+
+            <div id="log-entries-container">
+              <LogEntryList
+                entries={entries}
+                total={total}
+                page={page}
+                pageSize={pageSize}
+                file={selectedFile}
+                typeFilter={typeFilter}
+                q={q}
+              />
+            </div>
+
+            {isLatest && (
+              <>
+                <div
+                  class="log-tail-indicator"
+                  x-data={`logTail({ file: '${selectedFile}' })`}
+                  x-init="start()"
+                >
+                  <span class="tail-dot" x-bind:class="{ 'tail-dot--active': connected }"></span>
+                  <span x-text="connected ? 'Live' : 'Connecting...'"></span>
+                  <span class="tail-count" x-text="newCount + ' new entries'"></span>
+                </div>
+                <div id="log-tail-entries" class="log-tail-entries"></div>
+              </>
+            )}
+          </>
+        )}
+      </section>
+
+      {html`<script>
+function logTail({ file }) {
+  return {
+    connected: false,
+    newCount: 0,
+    es: null,
+    start() {
+      this.es = new EventSource('/api/settings/logs/tail?file=' + encodeURIComponent(file));
+      this.es.addEventListener('log-entry', (e) => {
+        this.newCount++;
+        const container = document.getElementById('log-tail-entries');
+        if (!container) return;
+        const row = document.createElement('div');
+        row.className = 'log-tail-row';
+        try {
+          const entry = JSON.parse(e.data);
+          row.textContent = JSON.stringify(entry);
+        } catch { row.textContent = e.data; }
+        container.prepend(row);
+      });
+      this.es.onopen = () => { this.connected = true; };
+      this.es.onerror = () => { this.connected = false; };
+      window.addEventListener('beforeunload', () => this.stop());
+    },
+    stop() { if (this.es) this.es.close(); }
+  };
+}
+</script>`}
+    </div>
+  );
+}

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

@@ -1,7 +1,7 @@
 import { ConfigEditor } from './ConfigEditor';
 
 interface SettingsPageProps {
-  config: object;
+  config: Record<string, unknown>;
   activeTab?: 'config' | 'logs';
 }
 

package/dashboard/src/index.tsx

@@ -1,6 +1,8 @@
 import { serve } from '@hono/node-server';
 import { serveStatic } from '@hono/node-server/serve-static';
 import { Hono } from 'hono';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
 import { compress } from 'hono/compress';
 import { logger } from 'hono/logger';
 import { secureHeaders } from 'hono/secure-headers';
@@ -9,6 +11,7 @@ import { indexRouter } from './routes/index.routes';
 import { commandCenterRouter } from './routes/command-center.routes';
 import { explorerRouter } from './routes/explorer.routes';
 import { timelineRouter } from './routes/timeline.routes';
+import { settingsRouter } from './routes/settings.routes';
 import { sseHandler } from './sse-handler';
 import { startWatcher } from './watcher-setup';
 import { currentPhaseMiddleware } from './middleware/current-phase';
@@ -32,6 +35,10 @@ type Env = {
   };
 };
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const publicDir = join(__dirname, '..', 'public');
+
 function createApp(config: ServerConfig) {
   const app = new Hono<Env>();
 
@@ -61,8 +68,8 @@ function createApp(config: ServerConfig) {
     c.header('Vary', 'Accept');
   });
 
-  // Static file serving from public/
-  app.use('*', serveStatic({ root: './public' }));
+  // Static file serving from public/ (absolute path for cross-cwd compatibility)
+  app.use('*', serveStatic({ root: publicDir }));
 
   // Current phase middleware — populates c.var.currentPhase for all routes
   app.use('*', currentPhaseMiddleware);
@@ -72,6 +79,7 @@ function createApp(config: ServerConfig) {
   app.route('/api/command-center', commandCenterRouter);
   app.route('/', explorerRouter);
   app.route('/', timelineRouter);
+  app.route('/', settingsRouter);
 
   // SSE endpoint — real streamSSE handler with multi-client broadcast
   app.get('/api/events/stream', sseHandler);