@sienklogic/plan-build-run 2.30.0 → 2.31.0

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

@@ -0,0 +1,44 @@
+import { ConfigEditor } from './ConfigEditor';
+
+interface SettingsPageProps {
+  config: object;
+  activeTab?: 'config' | 'logs';
+}
+
+export function SettingsPage({ config, activeTab }: SettingsPageProps) {
+  const initialTab = activeTab || 'config';
+  return (
+    <div class="settings" x-data={`{ tab: '${initialTab}' }`}>
+      <h1 class="page-title">Settings</h1>
+
+      <div class="settings-tabs" role="tablist">
+        <button
+          role="tab"
+          class="tab-btn"
+          x-on:click="tab = 'config'"
+          x-bind:class="{ active: tab === 'config' }"
+          x-bind:aria-selected="tab === 'config'"
+        >
+          Config
+        </button>
+        <button
+          role="tab"
+          class="tab-btn"
+          x-on:click="tab = 'logs'"
+          x-bind:class="{ active: tab === 'logs' }"
+          x-bind:aria-selected="tab === 'logs'"
+        >
+          Logs
+        </button>
+      </div>
+
+      <div x-show="tab === 'config'">
+        <ConfigEditor config={config} />
+      </div>
+
+      <div x-show="tab === 'logs'" x-cloak>
+        <p>Log Viewer — <a href="/settings/logs">Open Log Viewer</a></p>
+      </div>
+    </div>
+  );
+}

package/dashboard/src/components/timeline/AnalyticsPanel.tsx

@@ -0,0 +1,99 @@
+interface AnalyticsProps {
+  analytics: any;
+  llmMetrics: any | null;
+}
+
+export function AnalyticsPanelFragment({ analytics, llmMetrics }: AnalyticsProps) {
+  const summary = analytics?.summary ?? {};
+  const phases: any[] = analytics?.phases ?? [];
+
+  return (
+    <div class="analytics-panel">
+      {/* Git & Phase stats */}
+      <section class="analytics-panel__section">
+        <h2>Git &amp; Phase Stats</h2>
+        <div class="analytics-panel__stats">
+          <div class="analytics-panel__stat">
+            <span class="analytics-panel__stat-value">{summary.totalCommits ?? 0}</span>
+            <span class="analytics-panel__stat-label">Total Commits</span>
+          </div>
+          <div class="analytics-panel__stat">
+            <span class="analytics-panel__stat-value">{summary.totalLinesChanged ?? 0}</span>
+            <span class="analytics-panel__stat-label">Lines Changed</span>
+          </div>
+          <div class="analytics-panel__stat">
+            <span class="analytics-panel__stat-value">{summary.avgDuration ?? 'N/A'}</span>
+            <span class="analytics-panel__stat-label">Avg Phase Duration</span>
+          </div>
+          <div class="analytics-panel__stat">
+            <span class="analytics-panel__stat-value">{summary.totalPhases ?? 0}</span>
+            <span class="analytics-panel__stat-label">Phases</span>
+          </div>
+        </div>
+        {phases.length > 0 ? (
+          <table class="analytics-panel__table">
+            <thead>
+              <tr>
+                <th>Phase</th>
+                <th>Name</th>
+                <th>Commits</th>
+                <th>Lines Changed</th>
+                <th>Duration</th>
+                <th>Plans</th>
+              </tr>
+            </thead>
+            <tbody>
+              {phases.map((p: any) => (
+                <tr key={p.phaseId}>
+                  <td>{p.phaseId}</td>
+                  <td>{p.phaseName}</td>
+                  <td>{p.commitCount}</td>
+                  <td>{p.linesChanged}</td>
+                  <td>{p.duration ?? '—'}</td>
+                  <td>{p.planCount}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : (
+          <p class="analytics-panel__empty">No phase data available.</p>
+        )}
+      </section>
+
+      {/* LLM Offload stats */}
+      <section class="analytics-panel__section">
+        <h2>LLM Offload Metrics</h2>
+        {llmMetrics === null ? (
+          <p class="analytics-panel__empty">No LLM metrics data — run local model integrations to populate.</p>
+        ) : (
+          <div class="analytics-panel__stats">
+            <div class="analytics-panel__stat">
+              <span class="analytics-panel__stat-value">{llmMetrics.summary.total_calls}</span>
+              <span class="analytics-panel__stat-label">Total Calls</span>
+            </div>
+            <div class="analytics-panel__stat">
+              <span class="analytics-panel__stat-value">{llmMetrics.summary.fallback_rate_pct}%</span>
+              <span class="analytics-panel__stat-label">Fallback Rate</span>
+            </div>
+            <div class="analytics-panel__stat">
+              <span class="analytics-panel__stat-value">{llmMetrics.summary.tokens_saved}</span>
+              <span class="analytics-panel__stat-label">Tokens Saved</span>
+            </div>
+            <div class="analytics-panel__stat">
+              <span class="analytics-panel__stat-value">${llmMetrics.summary.cost_saved_usd}</span>
+              <span class="analytics-panel__stat-label">Cost Saved</span>
+            </div>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+export function AnalyticsPanel() {
+  return (
+    <div id="analytics-panel" hx-get="/api/timeline/analytics" hx-trigger="intersect once" hx-swap="innerHTML">
+      <div class="analytics-panel__loading">Loading analytics...</div>
+    </div>
+  );
+}

package/dashboard/src/components/timeline/DependencyGraph.tsx

@@ -0,0 +1,23 @@
+export function DependencyGraphFragment({ mermaidDef }: { mermaidDef: string }) {
+  return (
+    <div class="dep-graph">
+      <div
+        class="dep-graph__container"
+        id="dep-graph-render"
+        x-data="{ rendered: false }"
+        x-init={`$nextTick(() => { mermaid.render('dep-graph-svg', $el.dataset.def).then(r => { $el.innerHTML = r.svg; rendered = true; }) })`}
+        data-def={mermaidDef}
+      >
+        <div class="dep-graph__loading" x-show="!rendered">Rendering graph...</div>
+      </div>
+    </div>
+  );
+}
+
+export function DependencyGraph() {
+  return (
+    <div id="dep-graph-panel" hx-get="/api/timeline/dependency-graph" hx-trigger="intersect once" hx-swap="innerHTML">
+      <div class="dep-graph__loading">Loading dependency graph...</div>
+    </div>
+  );
+}

package/dashboard/src/components/timeline/TimelinePage.tsx

@@ -0,0 +1,124 @@
+import { AnalyticsPanel } from './AnalyticsPanel';
+import { DependencyGraph } from './DependencyGraph';
+
+export function TimelinePage() {
+  return (
+    <div class="timeline" x-data="{ activeSection: 'events' }">
+      <h1 class="page-title">Timeline</h1>
+      <div class="timeline__section-tabs" role="tablist">
+        <button
+          role="tab"
+          x-bind:aria-selected="activeSection === 'events'"
+          x-on:click="activeSection = 'events'"
+          class="timeline__section-tab"
+        >
+          Event Stream
+        </button>
+        <button
+          role="tab"
+          x-bind:aria-selected="activeSection === 'analytics'"
+          x-on:click="activeSection = 'analytics'"
+          class="timeline__section-tab"
+        >
+          Analytics
+        </button>
+        <button
+          role="tab"
+          x-bind:aria-selected="activeSection === 'graph'"
+          x-on:click="activeSection = 'graph'"
+          class="timeline__section-tab"
+        >
+          Dependency Graph
+        </button>
+      </div>
+
+      <div x-show="activeSection === 'events'">
+        <div class="timeline__filters">
+          <label>
+            <input type="checkbox" name="types" value="commit" />
+            Commits
+          </label>
+          <label>
+            <input type="checkbox" name="types" value="phase-transition" />
+            Phase Transitions
+          </label>
+          <label>
+            <input type="checkbox" name="types" value="todo-completion" />
+            Todo Completions
+          </label>
+
+          <select name="phase">
+            <option value="">All phases</option>
+          </select>
+
+          <input type="date" name="dateFrom" aria-label="From date" />
+          <input type="date" name="dateTo" aria-label="To date" />
+
+          <button
+            type="button"
+            hx-get="/api/timeline/events"
+            hx-include="closest .timeline__filters"
+            hx-target="#timeline-stream"
+            hx-swap="innerHTML"
+            hx-indicator="#timeline-loading"
+          >
+            Apply Filters
+          </button>
+        </div>
+
+        <div id="timeline-loading" class="timeline__loading htmx-indicator">Refreshing...</div>
+
+        <div
+          id="timeline-stream"
+          class="timeline__stream"
+          hx-get="/api/timeline/events"
+          hx-trigger="load"
+          hx-swap="innerHTML"
+        >
+          <div class="timeline__loading">Loading events...</div>
+        </div>
+      </div>
+
+      <div x-show="activeSection === 'analytics'">
+        <AnalyticsPanel />
+      </div>
+
+      <div x-show="activeSection === 'graph'">
+        <DependencyGraph />
+      </div>
+    </div>
+  );
+}
+
+function formatDate(date: Date): string {
+  const y = date.getUTCFullYear();
+  const mo = String(date.getUTCMonth() + 1).padStart(2, '0');
+  const d = String(date.getUTCDate()).padStart(2, '0');
+  const h = String(date.getUTCHours()).padStart(2, '0');
+  const mi = String(date.getUTCMinutes()).padStart(2, '0');
+  return `${y}-${mo}-${d} ${h}:${mi}`;
+}
+
+export function EventStreamFragment({ events }: { events: any[] }) {
+  if (events.length === 0) {
+    return <p class="timeline__empty">No events match the current filters.</p>;
+  }
+
+  return (
+    <ol class="timeline__list">
+      {events.map((event) => (
+        <li key={event.id} class={`timeline__event timeline__event--${event.type}`}>
+          <span class="timeline__event-dot" aria-hidden="true"></span>
+          <time class="timeline__event-time" datetime={event.date.toISOString()}>
+            {formatDate(event.date)}
+          </time>
+          <span class="timeline__event-type">{event.type}</span>
+          <span class="timeline__event-title">{event.title}</span>
+          {event.author && (
+            <span class="timeline__event-author">{event.author}</span>
+          )}
+        </li>
+      ))}
+    </ol>
+  );
+}

package/dashboard/src/index.tsx

@@ -8,6 +8,7 @@ import { Layout } from './components/Layout';
 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 { sseHandler } from './sse-handler';
 import { startWatcher } from './watcher-setup';
 import { currentPhaseMiddleware } from './middleware/current-phase';
@@ -70,6 +71,7 @@ function createApp(config: ServerConfig) {
   app.route('/', indexRouter);
   app.route('/api/command-center', commandCenterRouter);
   app.route('/', explorerRouter);
+  app.route('/', timelineRouter);
 
   // SSE endpoint — real streamSSE handler with multi-client broadcast
   app.get('/api/events/stream', sseHandler);

package/dashboard/src/routes/timeline.routes.tsx

@@ -0,0 +1,50 @@
+import { Hono } from 'hono';
+import { Layout } from '../components/Layout';
+import { TimelinePage, EventStreamFragment } from '../components/timeline/TimelinePage';
+import { AnalyticsPanelFragment } from '../components/timeline/AnalyticsPanel';
+import { DependencyGraphFragment } from '../components/timeline/DependencyGraph';
+import { getTimelineEvents } from '../services/timeline.service.js';
+import { getProjectAnalytics } from '../services/analytics.service.js';
+import { getLlmMetrics } from '../services/local-llm-metrics.service.js';
+import { generateDependencyMermaid } from '../services/roadmap.service.js';
+
+type Env = { Variables: { projectDir: string } };
+
+const router = new Hono<Env>();
+
+router.get('/timeline', async (c) => {
+  const isHtmx = c.req.header('HX-Request');
+  const content = <TimelinePage />;
+  if (isHtmx) return c.html(content);
+  return c.html(<Layout title="Timeline" currentView="timeline">{content}</Layout>);
+});
+
+router.get('/api/timeline/events', async (c) => {
+  const projectDir = c.get('projectDir');
+  const { types, phase, dateFrom, dateTo } = c.req.query();
+  const filters = {
+    types: types ? (Array.isArray(types) ? types : [types]) : [],
+    phase: phase || '',
+    dateFrom: dateFrom || '',
+    dateTo: dateTo || ''
+  };
+  const events = await getTimelineEvents(projectDir, filters).catch(() => []);
+  return c.html(<EventStreamFragment events={events} />);
+});
+
+router.get('/api/timeline/analytics', async (c) => {
+  const projectDir = c.get('projectDir');
+  const [analytics, llmMetrics] = await Promise.all([
+    getProjectAnalytics(projectDir).catch(() => ({ phases: [], summary: {} })),
+    getLlmMetrics(projectDir).catch(() => null)
+  ]);
+  return c.html(<AnalyticsPanelFragment analytics={analytics} llmMetrics={llmMetrics} />);
+});
+
+router.get('/api/timeline/dependency-graph', async (c) => {
+  const projectDir = c.get('projectDir');
+  const mermaidDef = await generateDependencyMermaid(projectDir).catch(() => 'graph TD\n  err["Could not load graph"]');
+  return c.html(<DependencyGraphFragment mermaidDef={mermaidDef} />);
+});
+
+export { router as timelineRouter };

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

@@ -0,0 +1,24 @@
+export interface PhaseAnalytics {
+  phaseId: string;
+  phaseName: string;
+  commitCount: number;
+  duration: string | null;
+  planCount: number;
+  linesChanged: number;
+}
+
+export interface AnalyticsSummary {
+  totalCommits: number;
+  totalPhases: number;
+  avgDuration: string;
+  totalLinesChanged: number;
+}
+
+export interface ProjectAnalytics {
+  phases: PhaseAnalytics[];
+  summary: AnalyticsSummary;
+  warning?: string;
+}
+
+export declare const cache: any;
+export declare function getProjectAnalytics(projectDir: string): Promise<ProjectAnalytics>;

package/dashboard/src/services/local-llm-metrics.service.d.ts

@@ -0,0 +1,26 @@
+export interface LlmMetricsSummary {
+  total_calls: number;
+  fallback_count: number;
+  fallback_rate_pct: number;
+  avg_latency_ms: number;
+  tokens_saved: number;
+  cost_saved_usd: number;
+}
+
+export interface LlmOperationMetrics {
+  operation: string;
+  calls: number;
+  fallbacks: number;
+  tokens_saved: number;
+}
+
+export interface LlmMetrics {
+  summary: LlmMetricsSummary;
+  byOperation: LlmOperationMetrics[];
+  baseline: {
+    hook_invocations: number;
+    estimated_frontier_tokens_without_local: number;
+  };
+}
+
+export declare function getLlmMetrics(projectDir: string): Promise<LlmMetrics | null>;

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

@@ -0,0 +1,20 @@
+import { TTLCache } from '../utils/cache.js';
+
+export interface TimelineEvent {
+  type: 'commit' | 'phase-transition' | 'todo-completion';
+  id: string;
+  date: Date;
+  title: string;
+  author?: string;
+}
+
+export interface TimelineFilters {
+  types?: string[];
+  phase?: string;
+  dateFrom?: string;
+  dateTo?: string;
+}
+
+export const cache: TTLCache;
+
+export function getTimelineEvents(projectDir: string, filters?: TimelineFilters): Promise<TimelineEvent[]>;

package/dashboard/src/services/timeline.service.js

@@ -0,0 +1,174 @@
+import { execFile as execFileCb } from 'node:child_process';
+import { promisify } from 'node:util';
+import { readFile, readdir } from 'node:fs/promises';
+import { join } from 'node:path';
+import { TTLCache } from '../utils/cache.js';
+
+const execFile = promisify(execFileCb);
+
+export const cache = new TTLCache(30_000); // 30s TTL
+
+/**
+ * Run a git command in the given directory, returning stdout.
+ * Returns empty string on failure.
+ */
+async function git(projectDir, args) {
+  try {
+    const { stdout } = await execFile('git', args, {
+      cwd: projectDir,
+      maxBuffer: 10 * 1024 * 1024
+    });
+    return stdout;
+  } catch {
+    return '';
+  }
+}
+
+/**
+ * Aggregate timeline events from git commits, todo completions, and STATE.md
+ * phase transitions into a unified chronological array.
+ *
+ * @param {string} projectDir - Absolute path to the project root
+ * @param {{ types?: string[], phase?: string, dateFrom?: string, dateTo?: string }} filters
+ * @returns {Promise<Array>}
+ */
+export async function getTimelineEvents(projectDir, filters = {}) {
+  const cacheKey = `timeline:${projectDir}:${JSON.stringify(filters)}`;
+  const cached = cache.get(cacheKey);
+  if (cached) return cached;
+
+  const dateFrom = filters.dateFrom ? new Date(filters.dateFrom) : null;
+  const dateTo = filters.dateTo ? new Date(filters.dateTo + 'T23:59:59Z') : null;
+
+  // --- Git commits ---
+  let commitEvents = [];
+  const logOutput = await git(projectDir, [
+    'log', '--all', '--format=%H|%aI|%s|%an'
+  ]);
+  if (logOutput.trim()) {
+    for (const line of logOutput.trim().split('\n')) {
+      const parts = line.split('|');
+      if (parts.length < 4) continue;
+      const [id, isoDate, subject, ...authorParts] = parts;
+      const author = authorParts.join('|');
+      const date = new Date(isoDate);
+      if (isNaN(date.getTime())) continue;
+
+      // Phase filter: keep only commits whose subject matches scope pattern for that phase
+      if (filters.phase) {
+        const phaseNum = String(filters.phase).padStart(2, '0');
+        const scopeRe = new RegExp(`\\(${phaseNum}-`);
+        if (!scopeRe.test(subject)) continue;
+      }
+
+      if (dateFrom && date < dateFrom) continue;
+      if (dateTo && date > dateTo) continue;
+
+      commitEvents.push({ type: 'commit', id, date, title: subject, author });
+    }
+  }
+
+  // --- Todo completions ---
+  let todoEvents = [];
+  try {
+    const doneDir = join(projectDir, '.planning', 'todos', 'done');
+    const entries = await readdir(doneDir, { withFileTypes: true });
+    for (const entry of entries) {
+      if (!entry.isFile() || !entry.name.endsWith('.md')) continue;
+      try {
+        const raw = await readFile(join(doneDir, entry.name), 'utf-8');
+        // Parse frontmatter manually
+        const lines = raw.split(/\r?\n/);
+        if (lines[0] !== '---') continue;
+        const endIdx = lines.indexOf('---', 1);
+        if (endIdx === -1) continue;
+        const fmLines = lines.slice(1, endIdx);
+        let title = '';
+        let completedAt = '';
+        for (const fmLine of fmLines) {
+          const titleMatch = fmLine.match(/^title:\s*['"]?(.+?)['"]?\s*$/);
+          if (titleMatch) title = titleMatch[1];
+          const completedMatch = fmLine.match(/^completed_at:\s*['"]?(.+?)['"]?\s*$/);
+          if (completedMatch) completedAt = completedMatch[1];
+        }
+        if (!completedAt) continue;
+        const date = new Date(completedAt);
+        if (isNaN(date.getTime())) continue;
+
+        if (dateFrom && date < dateFrom) continue;
+        if (dateTo && date > dateTo) continue;
+
+        todoEvents.push({
+          type: 'todo-completion',
+          id: entry.name,
+          date,
+          title: title || entry.name.replace(/^\d{3}-/, '').replace(/\.md$/, '').replace(/-/g, ' ')
+        });
+      } catch {
+        // skip unreadable files
+      }
+    }
+  } catch (err) {
+    if (err.code !== 'ENOENT') {
+      // Non-ENOENT errors: skip silently for robustness
+    }
+  }
+
+  // --- Phase transitions from STATE.md ---
+  let phaseEvents = [];
+  try {
+    const statePath = join(projectDir, '.planning', 'STATE.md');
+    const raw = await readFile(statePath, 'utf-8');
+    const lines = raw.split(/\r?\n/);
+
+    // Best-effort: extract current phase and last updated
+    let currentPhase = '';
+    let currentStatus = '';
+    let lastUpdated = '';
+
+    for (const line of lines) {
+      const phaseMatch = line.match(/\*\*Current phase:\*\*\s*(.+)/);
+      if (phaseMatch) currentPhase = phaseMatch[1].trim();
+
+      const statusMatch = line.match(/\*\*Status:\*\*\s*(.+)/);
+      if (statusMatch) currentStatus = statusMatch[1].trim();
+
+      const updatedMatch = line.match(/\*\*Last updated:\*\*\s*(.+)/);
+      if (updatedMatch) lastUpdated = updatedMatch[1].trim();
+    }
+
+    if (lastUpdated) {
+      const date = new Date(lastUpdated);
+      if (!isNaN(date.getTime())) {
+        const title = currentPhase
+          ? `Phase ${currentPhase} — ${currentStatus || 'active'}`
+          : `Status: ${currentStatus || 'active'}`;
+
+        if ((!dateFrom || date >= dateFrom) && (!dateTo || date <= dateTo)) {
+          phaseEvents.push({
+            type: 'phase-transition',
+            id: 'state-current',
+            date,
+            title
+          });
+        }
+      }
+    }
+  } catch (err) {
+    if (err.code !== 'ENOENT') {
+      // Non-ENOENT: skip silently
+    }
+  }
+
+  // Merge and sort descending (newest first)
+  let events = [...commitEvents, ...todoEvents, ...phaseEvents];
+  events.sort((a, b) => b.date - a.date);
+
+  // Apply types filter
+  if (filters.types && filters.types.length > 0) {
+    events = events.filter(e => filters.types.includes(e.type));
+  }
+
+  cache.set(cacheKey, events);
+  return events;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sienklogic/plan-build-run",
-  "version": "2.30.0",
+  "version": "2.31.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.30.0",
+  "version": "2.31.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.30.0",
+  "version": "2.31.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.30.0",
+  "version": "2.31.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",

package/plugins/pbr/scripts/config-schema.json

@@ -254,6 +254,18 @@
       },
       "additionalProperties": false
     },
+    "workflow": {
+      "type": "object",
+      "properties": {
+        "enforce_pbr_skills": {
+          "type": "string",
+          "enum": ["advisory", "block", "off"],
+          "default": "advisory",
+          "description": "Enforcement level for PBR workflow compliance"
+        }
+      },
+      "additionalProperties": false
+    },
     "local_llm": {
       "type": "object",
       "properties": {