@sienklogic/plan-build-run 2.31.0 → 2.32.0

package/CHANGELOG.md

@@ -5,6 +5,20 @@ 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.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

@@ -9,6 +9,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';
@@ -72,6 +73,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);

package/dashboard/src/routes/settings.routes.tsx

@@ -0,0 +1,231 @@
+import { Hono } from 'hono';
+import { streamSSE } from 'hono/streaming';
+import { join } from 'node:path';
+import { Layout } from '../components/Layout';
+import { SettingsPage } from '../components/settings/SettingsPage';
+import { LogViewer } from '../components/settings/LogViewer';
+import { LogEntriesFragment } from '../components/settings/LogEntryList';
+import { readConfig, writeConfig, mergeDefaults } from '../services/config.service.js';
+import { listLogFiles, readLogPage, tailLogFile } from '../services/log.service.js';
+
+type Env = { Variables: { projectDir: string } };
+const router = new Hono<Env>();
+
+// GET /settings — full page
+router.get('/settings', async (c) => {
+  const projectDir = c.get('projectDir');
+  const raw = await readConfig(projectDir).catch(() => null);
+  const config = mergeDefaults(raw || {});
+  const isHtmx = c.req.header('HX-Request');
+  const content = <SettingsPage config={config} activeTab="config" />;
+  if (isHtmx) return c.html(content);
+  return c.html(<Layout title="Settings" currentView="settings">{content}</Layout>);
+});
+
+// GET /api/settings/config — return current config as JSON
+router.get('/api/settings/config', async (c) => {
+  const projectDir = c.get('projectDir');
+  const raw = await readConfig(projectDir).catch(() => null);
+  const config = mergeDefaults(raw || {});
+  return c.json(config);
+});
+
+// POST /api/settings/config — save config (form-encoded or raw JSON textarea)
+router.post('/api/settings/config', async (c) => {
+  const projectDir = c.get('projectDir');
+  try {
+    const contentType = c.req.header('content-type') || '';
+    let newConfig: object;
+
+    if (contentType.includes('application/json')) {
+      // Raw JSON mode via JSON body
+      newConfig = await c.req.json();
+    } else {
+      // Form mode or raw textarea: check for rawJson field
+      const formData = await c.req.parseBody();
+
+      if (typeof formData['rawJson'] === 'string') {
+        // Raw JSON textarea submitted as form field
+        newConfig = JSON.parse(formData['rawJson']);
+      } else {
+        // Standard form mode: reconstruct nested object from flat dotted keys
+        const current = await readConfig(projectDir).catch(() => null);
+        newConfig = mergeDefaults(current || {});
+
+        // Apply form fields — dotted keys map to nested paths
+        for (const [key, value] of Object.entries(formData)) {
+          setNestedValue(newConfig as Record<string, unknown>, key, value);
+        }
+
+        // Checkboxes: unchecked fields are absent from form data; set them to false
+        const boolPaths = getBoolPaths(newConfig);
+        for (const path of boolPaths) {
+          if (!(path in formData)) {
+            setNestedValue(newConfig as Record<string, unknown>, path, false);
+          }
+        }
+
+        // Coerce number fields
+        coerceNumbers(newConfig as Record<string, unknown>);
+      }
+    }
+
+    await writeConfig(projectDir, newConfig);
+    return c.html('<span class="feedback--success">Saved successfully.</span>');
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : String(err);
+    return c.html(`<span class="feedback--error">Save failed: ${msg}</span>`, 400);
+  }
+});
+
+// GET /settings/logs — log viewer page
+router.get('/settings/logs', async (c) => {
+  const projectDir = c.get('projectDir');
+  const { file, page, typeFilter, q } = c.req.query();
+  const files = await listLogFiles(projectDir).catch(() => []);
+  const selectedFile = file || (files[0]?.name ?? '');
+  const isLatest = files.length > 0 && selectedFile === files[0].name;
+
+  let entries: object[] = [];
+  let total = 0;
+  let pageNum = parseInt(page || '1', 10);
+  const pageSize = 50;
+
+  if (selectedFile) {
+    const filePath = join(projectDir, '.planning', 'logs', selectedFile);
+    const result = await readLogPage(filePath, {
+      page: pageNum,
+      pageSize,
+      typeFilter: typeFilter || '',
+      q: q || '',
+    }).catch(() => ({ entries: [], total: 0, page: pageNum, pageSize }));
+    entries = result.entries;
+    total = result.total;
+    pageNum = result.page;
+  }
+
+  const isHtmx = c.req.header('HX-Request');
+  const content = (
+    <LogViewer
+      files={files}
+      selectedFile={selectedFile}
+      entries={entries}
+      total={total}
+      page={pageNum}
+      pageSize={pageSize}
+      typeFilter={typeFilter || ''}
+      q={q || ''}
+      isLatest={isLatest}
+    />
+  );
+  if (isHtmx) return c.html(content);
+  return c.html(<Layout title="Log Viewer" currentView="settings">{content}</Layout>);
+});
+
+// GET /api/settings/logs/entries — HTMX partial: paginated entries
+router.get('/api/settings/logs/entries', async (c) => {
+  const projectDir = c.get('projectDir');
+  const { file, page, typeFilter, q } = c.req.query();
+  if (!file) return c.html('<p class="log-empty">No file specified.</p>');
+
+  const filePath = join(projectDir, '.planning', 'logs', file);
+  const pageNum = parseInt(page || '1', 10);
+  const result = await readLogPage(filePath, {
+    page: pageNum,
+    pageSize: 50,
+    typeFilter: typeFilter || '',
+    q: q || '',
+  }).catch(() => ({ entries: [], total: 0, page: pageNum, pageSize: 50 }));
+
+  return c.html(
+    <LogEntriesFragment
+      entries={result.entries}
+      total={result.total}
+      page={result.page}
+      pageSize={result.pageSize}
+      file={file}
+      typeFilter={typeFilter || ''}
+      q={q || ''}
+    />
+  );
+});
+
+// GET /api/settings/logs/tail — SSE: stream new log entries
+router.get('/api/settings/logs/tail', async (c) => {
+  const projectDir = c.get('projectDir');
+  const { file } = c.req.query();
+  if (!file) return c.json({ error: 'file param required' }, 400);
+
+  const filePath = join(projectDir, '.planning', 'logs', file);
+  return streamSSE(c, async (stream) => {
+    const stop = await tailLogFile(filePath, (entry) => {
+      stream.writeSSE({
+        event: 'log-entry',
+        data: JSON.stringify(entry),
+      }).catch(() => {});
+    });
+
+    await new Promise<void>((resolve) => {
+      stream.onAbort(() => {
+        stop();
+        resolve();
+      });
+    });
+  });
+});
+
+export { router as settingsRouter };
+
+/** Set a value at a dotted path on an object, creating intermediate objects as needed. */
+function setNestedValue(obj: Record<string, unknown>, path: string, value: unknown) {
+  const parts = path.split('.');
+  let cur: Record<string, unknown> = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    if (typeof cur[parts[i]] !== 'object' || cur[parts[i]] === null) {
+      cur[parts[i]] = {};
+    }
+    cur = cur[parts[i]] as Record<string, unknown>;
+  }
+  cur[parts[parts.length - 1]] = value === 'on' ? true : value;
+}
+
+/** Collect all dotted paths to boolean fields in the config object. */
+function getBoolPaths(obj: unknown, prefix = ''): string[] {
+  const paths: string[] = [];
+  if (typeof obj !== 'object' || obj === null) return paths;
+  for (const [k, v] of Object.entries(obj as Record<string, unknown>)) {
+    const fullKey = prefix ? `${prefix}.${k}` : k;
+    if (typeof v === 'boolean') paths.push(fullKey);
+    else if (typeof v === 'object' && v !== null) paths.push(...getBoolPaths(v, fullKey));
+  }
+  return paths;
+}
+
+/** Coerce known number fields from string to number after form parse. */
+function coerceNumbers(config: Record<string, unknown>) {
+  const numberPaths = [
+    'parallelization.max_concurrent_agents',
+    'parallelization.min_plans_for_parallel',
+    'planning.max_tasks_per_plan',
+    'local_llm.timeout_ms',
+    'local_llm.max_retries',
+    'local_llm.metrics.frontier_token_rate',
+    'local_llm.advanced.confidence_threshold',
+    'local_llm.advanced.max_input_tokens',
+    'local_llm.advanced.num_ctx',
+    'local_llm.advanced.disable_after_failures',
+  ];
+  for (const path of numberPaths) {
+    const parts = path.split('.');
+    let cur: Record<string, unknown> = config;
+    for (let i = 0; i < parts.length - 1; i++) {
+      if (typeof cur[parts[i]] !== 'object') break;
+      cur = cur[parts[i]] as Record<string, unknown>;
+    }
+    const last = parts[parts.length - 1];
+    if (typeof cur[last] === 'string') {
+      const n = Number(cur[last]);
+      if (!isNaN(n)) cur[last] = n;
+    }
+  }
+}

package/dashboard/src/services/config.service.d.ts

@@ -0,0 +1,9 @@
+export function getConfigDefaults(): Record<string, unknown>;
+
+export function mergeDefaults(incoming: Record<string, unknown>): Record<string, unknown>;
+
+export function readConfig(projectDir: string): Promise<Record<string, unknown> | null>;
+
+export function validateConfig(config: Record<string, unknown>): void;
+
+export function writeConfig(projectDir: string, config: object): Promise<void>;

package/dashboard/src/services/log.service.d.ts

@@ -0,0 +1,13 @@
+export function listLogFiles(
+  projectDir: string
+): Promise<Array<{ name: string; size: number; modified: string }>>;
+
+export function readLogPage(
+  filePath: string,
+  opts?: { page?: number; pageSize?: number; typeFilter?: string; q?: string }
+): Promise<{ entries: object[]; total: number; page: number; pageSize: number }>;
+
+export function tailLogFile(
+  filePath: string,
+  onLine: (entry: object) => void
+): Promise<() => void>;

package/package.json

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

package/plugins/copilot-pbr/plugin.json

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

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

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

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

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