@sienklogic/plan-build-run 2.30.0 → 2.31.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.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)
+
+
+### Features
+
+* **41-01:** create timeline routes, wire into app, link timeline CSS in Layout ([ffc71c6](https://github.com/SienkLogic/plan-build-run/commit/ffc71c6ff32f72cf09894585e96cfd47d9ebad93))
+* **41-01:** create timeline.service.js with event aggregation and filtering ([f585c2b](https://github.com/SienkLogic/plan-build-run/commit/f585c2b28a35ca028a0dfd6fb98fc3f717b0e42d))
+* **41-01:** create TimelinePage component, EventStreamFragment, and timeline CSS ([105b3d3](https://github.com/SienkLogic/plan-build-run/commit/105b3d3e1fc3ea1f0f71c80301056e7a5ec0b125))
+* **41-02:** add analytics and dependency-graph routes; refactor TimelinePage with section tabs ([4998f40](https://github.com/SienkLogic/plan-build-run/commit/4998f4093097953ca1e1e880413be60e07da08b4))
+* **41-02:** add analytics/graph CSS sections and Mermaid CDN to Layout ([95d8853](https://github.com/SienkLogic/plan-build-run/commit/95d88536e406894021e454bb874d9dcc17abd179))
+* **41-02:** add AnalyticsPanel and DependencyGraph components ([5bb080b](https://github.com/SienkLogic/plan-build-run/commit/5bb080bb363a3e2b56f5e2f2054c15e80dc6be23))
+* **42-01:** create SettingsPage shell and ConfigEditor component (form + raw JSON modes) ([98caf06](https://github.com/SienkLogic/plan-build-run/commit/98caf0651314b4185b9c0e851d1607889956cb7f))
+* **quick-008:** inject PBR workflow directive into SessionStart and PreCompact hooks ([c07574e](https://github.com/SienkLogic/plan-build-run/commit/c07574e32365c18e8c9239b8e4398330ba441182))
+
 ## [2.30.0](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.29.0...plan-build-run-v2.30.0) (2026-02-24)
 
 

package/dashboard/public/css/timeline.css

@@ -0,0 +1,240 @@
+/**
+ * timeline.css — Timeline page styles
+ * Depends on tokens.css for design tokens (--space-*, --color-*, --radius-*, --font-mono)
+ */
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-lg);
+  max-width: 1200px;
+}
+
+.timeline__filters {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  align-items: center;
+  padding: var(--space-md);
+  background: var(--color-surface);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-lg);
+  border: 1px solid var(--color-border);
+}
+
+.timeline__filters label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+.timeline__stream {
+  position: relative;
+}
+
+.timeline__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.timeline__event {
+  display: grid;
+  grid-template-columns: 1rem 10rem 9rem 1fr auto;
+  align-items: start;
+  gap: var(--space-sm);
+  padding: var(--space-sm) 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.timeline__event-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: var(--color-accent);
+  margin-top: 0.35rem;
+}
+
+.timeline__event--commit .timeline__event-dot {
+  background: var(--color-info, #3b82f6);
+}
+
+.timeline__event--todo-completion .timeline__event-dot {
+  background: var(--color-success, #22c55e);
+}
+
+.timeline__event--phase-transition .timeline__event-dot {
+  background: var(--color-warning, #f59e0b);
+}
+
+.timeline__event-time {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--color-text-dim);
+}
+
+.timeline__event-type {
+  font-size: 0.75rem;
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-dim);
+  white-space: nowrap;
+}
+
+.timeline__event-title {
+  font-size: 0.9rem;
+}
+
+.timeline__event-author {
+  font-size: 0.8rem;
+  color: var(--color-text-dim);
+}
+
+.timeline__loading {
+  color: var(--color-text-dim);
+  padding: var(--space-md);
+}
+
+.timeline__empty {
+  color: var(--color-text-dim);
+  padding: var(--space-lg);
+  text-align: center;
+}
+
+.htmx-indicator {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.htmx-request .htmx-indicator,
+.htmx-request.htmx-indicator {
+  opacity: 1;
+}
+
+/* ---- Section tabs ---- */
+.timeline__section-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: var(--space-lg);
+}
+
+.timeline__section-tab {
+  padding: var(--space-sm) var(--space-md);
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  cursor: pointer;
+  color: var(--color-text-dim);
+  font-size: 0.9rem;
+  font-family: var(--font-sans);
+  transition: all 0.15s;
+}
+
+.timeline__section-tab:hover { color: var(--color-text); }
+
+.timeline__section-tab[aria-selected="true"] {
+  color: var(--color-accent);
+  border-bottom-color: var(--color-accent);
+}
+
+/* ---- Analytics panel ---- */
+.analytics-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.analytics-panel__section {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-md);
+}
+
+.analytics-panel__section h2 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0 0 var(--space-md);
+}
+
+.analytics-panel__stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  margin-bottom: var(--space-md);
+}
+
+.analytics-panel__stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  min-width: 8rem;
+}
+
+.analytics-panel__stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  color: var(--color-accent);
+}
+
+.analytics-panel__stat-label {
+  font-size: 0.8rem;
+  color: var(--color-text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.analytics-panel__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.analytics-panel__table th,
+.analytics-panel__table td {
+  text-align: left;
+  padding: var(--space-xs) var(--space-sm);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.analytics-panel__table th {
+  color: var(--color-text-dim);
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.analytics-panel__empty,
+.analytics-panel__loading {
+  color: var(--color-text-dim);
+  padding: var(--space-md);
+}
+
+/* ---- Dependency graph ---- */
+.dep-graph {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-md);
+  overflow-x: auto;
+}
+
+.dep-graph__container {
+  min-height: 12rem;
+}
+
+.dep-graph__loading {
+  color: var(--color-text-dim);
+  padding: var(--space-md);
+}

package/dashboard/src/components/Layout.tsx

@@ -36,6 +36,7 @@ export function Layout({ title, children, currentView }: LayoutProps) {
         <link rel="stylesheet" href="/css/status-colors.css" />
         <link rel="stylesheet" href="/css/command-center.css" />
         <link rel="stylesheet" href="/css/explorer.css" />
+        <link rel="stylesheet" href="/css/timeline.css" />
 
         {/* Prevent flash of wrong theme */}
         {html`<script>
@@ -47,6 +48,8 @@ export function Layout({ title, children, currentView }: LayoutProps) {
             }
           })();
         </script>`}
+        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js" defer></script>
+        {html`<script>document.addEventListener('DOMContentLoaded', function() { mermaid.initialize({ startOnLoad: false, theme: 'neutral' }); });</script>`}
       </head>
       <body>
         <a href="#main-content" class="skip-link">Skip to content</a>

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

@@ -0,0 +1,399 @@
+interface ConfigEditorProps {
+  config: Record<string, unknown>;
+}
+
+function BoolField({ name, label, checked }: { name: string; label: string; checked: boolean }) {
+  return (
+    <label class="config-field config-field--check">
+      <input type="checkbox" name={name} checked={checked || false} />
+      {label}
+    </label>
+  );
+}
+
+function SelectField({
+  name,
+  label,
+  value,
+  options,
+}: {
+  name: string;
+  label: string;
+  value: string;
+  options: string[];
+}) {
+  return (
+    <label class="config-field">
+      <span class="config-field__label">{label}</span>
+      <select name={name}>
+        {options.map((o) => (
+          <option value={o} selected={o === value}>
+            {o}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+function TextField({
+  name,
+  label,
+  value,
+  type,
+  readonly,
+}: {
+  name: string;
+  label: string;
+  value: string | number;
+  type?: string;
+  readonly?: boolean;
+}) {
+  return (
+    <label class="config-field">
+      <span class="config-field__label">{label}</span>
+      <input
+        type={type || 'text'}
+        name={name}
+        value={String(value ?? '')}
+        readonly={readonly}
+      />
+    </label>
+  );
+}
+
+function SectionTitle({ title }: { title: string }) {
+  return <h3 class="config-section__title">{title}</h3>;
+}
+
+export function ConfigEditor({ config }: ConfigEditorProps) {
+  const features = (config.features as Record<string, boolean>) || {};
+  const gates = (config.gates as Record<string, boolean>) || {};
+  const models = (config.models as Record<string, string>) || {};
+  const para = (config.parallelization as Record<string, unknown>) || {};
+  const planning = (config.planning as Record<string, unknown>) || {};
+  const git = (config.git as Record<string, string>) || {};
+  const safety = (config.safety as Record<string, boolean>) || {};
+  const localLlm = (config.local_llm as Record<string, unknown>) || {};
+  const llmFeatures = (localLlm.features as Record<string, boolean>) || {};
+  const llmMetrics = (localLlm.metrics as Record<string, unknown>) || {};
+  const llmAdvanced = (localLlm.advanced as Record<string, unknown>) || {};
+
+  const rawJson = JSON.stringify(config, null, 2);
+
+  return (
+    <div class="config-editor" x-data="{ mode: 'form' }">
+      {/* Mode toggle */}
+      <div class="config-mode-toggle" role="group" aria-label="Editor mode">
+        <button
+          type="button"
+          class="tab-btn"
+          x-on:click="mode = 'form'"
+          x-bind:class="{ active: mode === 'form' }"
+        >
+          Form
+        </button>
+        <button
+          type="button"
+          class="tab-btn"
+          x-on:click="mode = 'raw'"
+          x-bind:class="{ active: mode === 'raw' }"
+        >
+          Raw JSON
+        </button>
+      </div>
+
+      {/* Form mode */}
+      <div x-show="mode === 'form'">
+        <form
+          hx-post="/api/settings/config"
+          hx-target="#config-feedback"
+          hx-swap="innerHTML"
+          hx-encoding="application/x-www-form-urlencoded"
+        >
+          {/* General section */}
+          <div class="config-section">
+            <SectionTitle title="General" />
+            <SelectField
+              name="mode"
+              label="Mode"
+              value={String(config.mode ?? 'normal')}
+              options={['normal', 'autonomous', 'cautious']}
+            />
+            <SelectField
+              name="depth"
+              label="Depth"
+              value={String(config.depth ?? 'standard')}
+              options={['standard', 'comprehensive', 'light']}
+            />
+            <SelectField
+              name="context_strategy"
+              label="Context Strategy"
+              value={String(config.context_strategy ?? 'aggressive')}
+              options={['aggressive', 'balanced', 'conservative']}
+            />
+            <TextField
+              name="version"
+              label="Version"
+              value={String(config.version ?? '')}
+              readonly={true}
+            />
+          </div>
+
+          {/* Features section */}
+          <div class="config-section">
+            <SectionTitle title="Features" />
+            {Object.entries(features).map(([key, val]) => (
+              <BoolField name={`features.${key}`} label={key.replace(/_/g, ' ')} checked={val} />
+            ))}
+          </div>
+
+          {/* Gates section */}
+          <div class="config-section">
+            <SectionTitle title="Gates" />
+            {Object.entries(gates).map(([key, val]) => (
+              <BoolField name={`gates.${key}`} label={key.replace(/_/g, ' ')} checked={val} />
+            ))}
+          </div>
+
+          {/* Models section */}
+          <div class="config-section">
+            <SectionTitle title="Models" />
+            {Object.entries(models).map(([key, val]) => (
+              <SelectField
+                name={`models.${key}`}
+                label={key}
+                value={val}
+                options={['haiku', 'sonnet', 'opus', 'inherit']}
+              />
+            ))}
+          </div>
+
+          {/* Parallelization section */}
+          <div class="config-section">
+            <SectionTitle title="Parallelization" />
+            <BoolField name="parallelization.enabled" label="Enabled" checked={!!para.enabled} />
+            <BoolField name="parallelization.plan_level" label="Plan Level" checked={!!para.plan_level} />
+            <BoolField name="parallelization.task_level" label="Task Level" checked={!!para.task_level} />
+            <BoolField name="parallelization.use_teams" label="Use Teams" checked={!!para.use_teams} />
+            <TextField
+              name="parallelization.max_concurrent_agents"
+              label="Max Concurrent Agents"
+              value={Number(para.max_concurrent_agents ?? 3)}
+              type="number"
+            />
+            <TextField
+              name="parallelization.min_plans_for_parallel"
+              label="Min Plans for Parallel"
+              value={Number(para.min_plans_for_parallel ?? 2)}
+              type="number"
+            />
+          </div>
+
+          {/* Planning section */}
+          <div class="config-section">
+            <SectionTitle title="Planning" />
+            <BoolField
+              name="planning.commit_docs"
+              label="Commit Docs"
+              checked={!!planning.commit_docs}
+            />
+            <TextField
+              name="planning.max_tasks_per_plan"
+              label="Max Tasks per Plan"
+              value={Number(planning.max_tasks_per_plan ?? 8)}
+              type="number"
+            />
+            <BoolField
+              name="planning.search_gitignored"
+              label="Search Gitignored"
+              checked={!!planning.search_gitignored}
+            />
+          </div>
+
+          {/* Git section */}
+          <div class="config-section">
+            <SectionTitle title="Git" />
+            <SelectField
+              name="git.mode"
+              label="Mode"
+              value={git.mode ?? 'enabled'}
+              options={['enabled', 'disabled']}
+            />
+            <SelectField
+              name="git.branching"
+              label="Branching"
+              value={git.branching ?? 'none'}
+              options={['none', 'phase', 'milestone']}
+            />
+            <TextField
+              name="git.commit_format"
+              label="Commit Format"
+              value={git.commit_format ?? ''}
+            />
+            <TextField
+              name="git.phase_branch_template"
+              label="Phase Branch Template"
+              value={git.phase_branch_template ?? ''}
+            />
+            <TextField
+              name="git.milestone_branch_template"
+              label="Milestone Branch Template"
+              value={git.milestone_branch_template ?? ''}
+            />
+          </div>
+
+          {/* Safety section */}
+          <div class="config-section">
+            <SectionTitle title="Safety" />
+            <BoolField
+              name="safety.always_confirm_destructive"
+              label="Always Confirm Destructive"
+              checked={!!safety.always_confirm_destructive}
+            />
+            <BoolField
+              name="safety.always_confirm_external_services"
+              label="Always Confirm External Services"
+              checked={!!safety.always_confirm_external_services}
+            />
+          </div>
+
+          {/* Local LLM section */}
+          <div class="config-section">
+            <SectionTitle title="Local LLM" />
+            <BoolField name="local_llm.enabled" label="Enabled" checked={!!localLlm.enabled} />
+            <TextField name="local_llm.provider" label="Provider" value={String(localLlm.provider ?? '')} />
+            <TextField name="local_llm.endpoint" label="Endpoint" value={String(localLlm.endpoint ?? '')} />
+            <TextField name="local_llm.model" label="Model" value={String(localLlm.model ?? '')} />
+            <TextField
+              name="local_llm.timeout_ms"
+              label="Timeout (ms)"
+              value={Number(localLlm.timeout_ms ?? 30000)}
+              type="number"
+            />
+            <TextField
+              name="local_llm.max_retries"
+              label="Max Retries"
+              value={Number(localLlm.max_retries ?? 3)}
+              type="number"
+            />
+            <SelectField
+              name="local_llm.fallback"
+              label="Fallback"
+              value={String(localLlm.fallback ?? 'frontier')}
+              options={['frontier', 'skip', 'error']}
+            />
+            <SelectField
+              name="local_llm.routing_strategy"
+              label="Routing Strategy"
+              value={String(localLlm.routing_strategy ?? 'local_first')}
+              options={['local_first', 'frontier_first', 'always_local', 'always_frontier']}
+            />
+
+            {/* LLM Features sub-section */}
+            <div class="config-section config-section--nested">
+              <SectionTitle title="LLM Features" />
+              {Object.entries(llmFeatures).map(([key, val]) => (
+                <BoolField
+                  name={`local_llm.features.${key}`}
+                  label={key.replace(/_/g, ' ')}
+                  checked={val}
+                />
+              ))}
+              {Object.keys(llmFeatures).length === 0 && (
+                <p class="config-empty">No local LLM features configured.</p>
+              )}
+            </div>
+
+            {/* LLM Metrics sub-section */}
+            <div class="config-section config-section--nested">
+              <SectionTitle title="LLM Metrics" />
+              <BoolField
+                name="local_llm.metrics.enabled"
+                label="Enabled"
+                checked={!!llmMetrics.enabled}
+              />
+              <BoolField
+                name="local_llm.metrics.show_session_summary"
+                label="Show Session Summary"
+                checked={!!llmMetrics.show_session_summary}
+              />
+              <TextField
+                name="local_llm.metrics.log_file"
+                label="Log File"
+                value={String(llmMetrics.log_file ?? '')}
+              />
+              <TextField
+                name="local_llm.metrics.frontier_token_rate"
+                label="Frontier Token Rate"
+                value={Number(llmMetrics.frontier_token_rate ?? 0)}
+                type="number"
+              />
+            </div>
+
+            {/* LLM Advanced sub-section */}
+            <div class="config-section config-section--nested">
+              <SectionTitle title="LLM Advanced" />
+              <TextField
+                name="local_llm.advanced.confidence_threshold"
+                label="Confidence Threshold"
+                value={Number(llmAdvanced.confidence_threshold ?? 0)}
+                type="number"
+              />
+              <TextField
+                name="local_llm.advanced.max_input_tokens"
+                label="Max Input Tokens"
+                value={Number(llmAdvanced.max_input_tokens ?? 0)}
+                type="number"
+              />
+              <TextField
+                name="local_llm.advanced.num_ctx"
+                label="Num Ctx"
+                value={Number(llmAdvanced.num_ctx ?? 0)}
+                type="number"
+              />
+              <TextField
+                name="local_llm.advanced.disable_after_failures"
+                label="Disable After Failures"
+                value={Number(llmAdvanced.disable_after_failures ?? 0)}
+                type="number"
+              />
+              <TextField
+                name="local_llm.advanced.keep_alive"
+                label="Keep Alive"
+                value={String(llmAdvanced.keep_alive ?? '')}
+              />
+              <BoolField
+                name="local_llm.advanced.shadow_mode"
+                label="Shadow Mode"
+                checked={!!llmAdvanced.shadow_mode}
+              />
+            </div>
+          </div>
+
+          <div class="config-actions">
+            <button type="submit" class="btn btn--primary">Save Config</button>
+          </div>
+        </form>
+        <div id="config-feedback" class="config-feedback" aria-live="polite"></div>
+      </div>
+
+      {/* Raw JSON mode */}
+      <div x-show="mode === 'raw'" x-cloak>
+        <form
+          hx-post="/api/settings/config"
+          hx-target="#config-feedback-raw"
+          hx-swap="innerHTML"
+        >
+          <textarea name="rawJson" rows={30} class="config-raw-json">
+            {rawJson}
+          </textarea>
+          <div class="config-actions">
+            <button type="submit" class="btn btn--primary">Save JSON</button>
+          </div>
+        </form>
+        <div id="config-feedback-raw" class="config-feedback" aria-live="polite"></div>
+      </div>
+    </div>
+  );
+}