@sienklogic/plan-build-run 2.29.0 → 2.30.0

package/CHANGELOG.md

@@ -5,6 +5,24 @@ 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.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)
+
+
+### Features
+
+* **40-01:** add Explorer view shell with phases tab and Alpine.js tabs ([f6d4fb3](https://github.com/SienkLogic/plan-build-run/commit/f6d4fb391cbd6eebe13ee6c381556404f4ad1faf))
+* **40-02:** add MilestonesTab component and milestone.service type declarations ([420572b](https://github.com/SienkLogic/plan-build-run/commit/420572bb0009b52e0e761baf66097980758b981e))
+* **40-02:** add TodosTab component with TodoListFragment and TodoCreateForm ([0cca669](https://github.com/SienkLogic/plan-build-run/commit/0cca669f39079a69fe5376d7460135a0fd496f07))
+* **40-02:** wire todos and milestones routes into explorer.routes.tsx ([83e2963](https://github.com/SienkLogic/plan-build-run/commit/83e2963fc1d7bbc061df23c3f5c80c326bd2f16e))
+* **40-03:** add NotesTab, AuditsTab, and QuickTab components ([e3edd64](https://github.com/SienkLogic/plan-build-run/commit/e3edd647a9db251527f50ed2264540acbc1974ff))
+* **40-03:** add ResearchTab and RequirementsTab components with requirements CSS ([3102ff7](https://github.com/SienkLogic/plan-build-run/commit/3102ff735a0be217f013fa01199c1823cf2cfae5))
+* **40-03:** wire research, requirements, notes, audits, quick routes; add service .d.ts files ([a45fcd9](https://github.com/SienkLogic/plan-build-run/commit/a45fcd906d06fc0da866ed6492c116bc9e80ab76))
+
+
+### Bug Fixes
+
+* **40-02:** use JSX-compatible hx-on attribute syntax in TodoCreateForm ([70e6822](https://github.com/SienkLogic/plan-build-run/commit/70e6822c5ec72ef25ee290ba7453065637f3c828))
+
 ## [2.29.0](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.28.0...plan-build-run-v2.29.0) (2026-02-24)
 
 

package/dashboard/public/css/explorer.css

@@ -0,0 +1,458 @@
+/* ============================================
+   Explorer — Tab shell + Phase drill-down
+   Depends on: tokens.css, status-colors.css
+   ============================================ */
+
+/* x-cloak: hide elements controlled by Alpine.js before it initialises */
+[x-cloak] { display: none !important; }
+
+/* ---- Explorer shell ---- */
+
+.explorer {
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-lg);
+  max-width: 1200px;
+}
+
+/* ---- Tab bar ---- */
+
+.explorer__tabs {
+  display: flex;
+  flex-direction: row;
+  gap: 0;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: var(--space-lg);
+}
+
+.explorer__tab-btn {
+  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;
+  white-space: nowrap;
+}
+
+.explorer__tab-btn:hover {
+  color: var(--color-text);
+}
+
+.explorer__tab-btn[aria-selected="true"] {
+  color: var(--color-accent);
+  border-bottom-color: var(--color-accent);
+}
+
+/* ---- Tab panels ---- */
+
+.explorer__tab-content {
+  min-height: 400px;
+}
+
+.explorer__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-xl);
+  color: var(--color-text-dim);
+}
+
+/* ---- Explorer list (phases, todos, etc.) ---- */
+
+.explorer-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+/* ---- Expandable item ---- */
+
+.explorer-item {
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.explorer-item__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  cursor: pointer;
+  user-select: none;
+}
+
+.explorer-item__header:hover {
+  background: var(--color-surface-hover);
+}
+
+.explorer-item__toggle {
+  font-size: 0.7rem;
+  color: var(--color-text-dim);
+  transition: transform 0.2s;
+  display: inline-block;
+}
+
+.explorer-item__toggle--open {
+  transform: rotate(90deg);
+}
+
+.explorer-item__title {
+  font-weight: 500;
+  font-size: 0.95rem;
+  flex: 1;
+}
+
+.explorer-item__meta {
+  font-size: 0.8rem;
+  color: var(--color-text-dim);
+}
+
+.explorer-item__body {
+  border-top: 1px solid var(--color-border);
+  padding: var(--space-md);
+}
+
+/* ---- Plan list within phase detail ---- */
+
+.explorer-item__plans {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.explorer-plan-item {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.explorer-plan-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.9rem;
+  user-select: none;
+}
+
+.explorer-plan-link:hover {
+  background: var(--color-surface-hover);
+}
+
+/* ---- Document viewer ---- */
+
+.explorer-doc-viewer {
+  margin-top: var(--space-md);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-md);
+}
+
+.explorer-doc-viewer__tabs {
+  display: flex;
+  gap: var(--space-xs);
+  margin-bottom: var(--space-md);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.explorer-doc-viewer__tab {
+  padding: var(--space-xs) var(--space-sm);
+  font-size: 0.8rem;
+}
+
+/* ---- Rendered document content ---- */
+
+.explorer-doc-content {
+  font-size: 0.9rem;
+  line-height: 1.6;
+}
+
+.explorer-doc-content h1,
+.explorer-doc-content h2,
+.explorer-doc-content h3,
+.explorer-doc-content h4 {
+  margin-top: var(--space-md);
+  margin-bottom: var(--space-xs);
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.explorer-doc-content h1 { font-size: 1.25rem; }
+.explorer-doc-content h2 { font-size: 1.1rem; }
+.explorer-doc-content h3 { font-size: 1rem; }
+
+.explorer-doc-content p {
+  margin-bottom: var(--space-sm);
+}
+
+.explorer-doc-content ul,
+.explorer-doc-content ol {
+  padding-left: var(--space-md);
+  margin-bottom: var(--space-sm);
+}
+
+.explorer-doc-content li {
+  margin-bottom: var(--space-xs);
+}
+
+.explorer-doc-content code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  background: var(--color-surface-raised);
+  padding: 0.1em 0.3em;
+  border-radius: var(--radius-sm);
+}
+
+.explorer-doc-content pre {
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-md);
+  overflow-x: auto;
+  margin-bottom: var(--space-sm);
+}
+
+.explorer-doc-content pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.85rem;
+  line-height: var(--line-height-mono);
+}
+
+.explorer-doc-content table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  margin-bottom: var(--space-sm);
+}
+
+.explorer-doc-content th,
+.explorer-doc-content td {
+  padding: var(--space-xs) var(--space-sm);
+  border: 1px solid var(--color-border);
+  text-align: left;
+}
+
+.explorer-doc-content th {
+  background: var(--color-surface-raised);
+  font-weight: 600;
+}
+
+/* ---- Status badges ---- */
+
+.explorer-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.explorer-badge--complete {
+  background: rgba(52, 211, 153, 0.12);
+  color: #6ee7b7;
+  border: 1px solid rgba(52, 211, 153, 0.2);
+}
+
+.explorer-badge--building,
+.explorer-badge--in-progress {
+  background: rgba(251, 191, 36, 0.12);
+  color: #fcd34d;
+  border: 1px solid rgba(251, 191, 36, 0.2);
+}
+
+.explorer-badge--pending,
+.explorer-badge--not-started {
+  background: rgba(107, 114, 128, 0.12);
+  color: #9ca3af;
+  border: 1px solid rgba(107, 114, 128, 0.2);
+}
+
+.explorer-badge--covered {
+  background: rgba(52, 211, 153, 0.12);
+  color: #6ee7b7;
+  border: 1px solid rgba(52, 211, 153, 0.2);
+}
+
+.explorer-badge--uncovered {
+  background: rgba(248, 113, 113, 0.12);
+  color: #fca5a5;
+  border: 1px solid rgba(248, 113, 113, 0.2);
+}
+
+/* ---- Todos + Milestones tab toolbar ---- */
+
+.explorer-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-md);
+  flex-wrap: wrap;
+}
+
+.explorer-search {
+  flex: 1;
+  min-width: 200px;
+  padding: var(--space-xs) var(--space-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 0.9rem;
+}
+
+.explorer-create-form {
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-md);
+  margin-bottom: var(--space-md);
+}
+
+.explorer-section-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--color-text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: var(--space-md) 0 var(--space-sm);
+}
+
+/* ---- Button system ---- */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.15s;
+}
+
+.btn--primary {
+  background: var(--color-accent);
+  color: white;
+  border-color: var(--color-accent);
+}
+
+.btn--ghost {
+  background: none;
+  color: var(--color-text-dim);
+  border-color: var(--color-border);
+}
+
+.btn--sm {
+  padding: 2px var(--space-xs);
+  font-size: 0.8rem;
+}
+
+.btn--danger {
+  background: var(--color-error-bg);
+  color: var(--color-error);
+  border-color: var(--color-error);
+}
+
+/* ---- Priority badge modifiers ---- */
+
+.explorer-badge--high {
+  background: var(--color-error-bg);
+  color: var(--color-error);
+}
+
+.explorer-badge--medium {
+  background: var(--color-warning-bg);
+  color: var(--color-warning);
+}
+
+.explorer-badge--low {
+  background: var(--color-surface-raised);
+  color: var(--color-text-dim);
+}
+
+/* ---- Create form ---- */
+
+.explorer-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.explorer-form__row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.explorer-form__label {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--color-text-dim);
+}
+
+.explorer-form__actions {
+  display: flex;
+  gap: var(--space-sm);
+  padding-top: var(--space-sm);
+}
+
+/* ---- Milestone detail ---- */
+
+.explorer-milestone-detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+/* ---- Requirements traceability table ---- */
+
+.explorer-req-section {
+  margin-bottom: var(--space-lg);
+}
+
+.explorer-req-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.explorer-req-table th {
+  text-align: left;
+  padding: var(--space-xs) var(--space-sm);
+  border-bottom: 2px solid var(--color-border);
+  font-weight: 600;
+  color: var(--color-text-dim);
+  font-size: 0.8rem;
+  text-transform: uppercase;
+}
+
+.explorer-req-table td {
+  padding: var(--space-xs) var(--space-sm);
+  border-bottom: 1px solid var(--color-border);
+  vertical-align: top;
+}
+
+.explorer-req-table tr:hover td {
+  background: var(--color-surface-hover);
+}
+
+.explorer-req-id {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  white-space: nowrap;
+  color: var(--color-text-dim);
+}

package/dashboard/src/components/Layout.tsx

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

package/dashboard/src/components/explorer/ExplorerPage.tsx

@@ -0,0 +1,57 @@
+const TABS = [
+  { id: 'phases',       label: 'Phases',        api: '/api/explorer/phases' },
+  { id: 'todos',        label: 'Todos',          api: '/api/explorer/todos' },
+  { id: 'milestones',   label: 'Milestones',     api: '/api/explorer/milestones' },
+  { id: 'research',     label: 'Research',       api: '/api/explorer/research' },
+  { id: 'requirements', label: 'Requirements',   api: '/api/explorer/requirements' },
+  { id: 'notes',        label: 'Notes',          api: '/api/explorer/notes' },
+  { id: 'audits',       label: 'Audits',         api: '/api/explorer/audits' },
+  { id: 'quick',        label: 'Quick Tasks',    api: '/api/explorer/quick' },
+];
+
+export function ExplorerPage() {
+  return (
+    <div
+      class="explorer"
+      x-data={`{
+        activeTab: 'phases',
+        loaded: {},
+        switchTab(id) {
+          this.activeTab = id;
+        }
+      }`}
+    >
+      <div class="explorer__tabs" role="tablist" aria-label="Explorer tabs">
+        {TABS.map(tab => (
+          <button
+            key={tab.id}
+            role="tab"
+            class="explorer__tab-btn"
+            x-bind:aria-selected={`activeTab === '${tab.id}'`}
+            x-on:click={`switchTab('${tab.id}')`}
+            id={`tab-${tab.id}`}
+            aria-controls={`panel-${tab.id}`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {TABS.map(tab => (
+        <div
+          key={tab.id}
+          id={`panel-${tab.id}`}
+          role="tabpanel"
+          aria-labelledby={`tab-${tab.id}`}
+          class="explorer__tab-content"
+          x-show={`activeTab === '${tab.id}'`}
+          hx-get={tab.api}
+          hx-trigger="intersect once"
+          hx-swap="innerHTML"
+        >
+          <div class="explorer__loading">Loading...</div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/dashboard/src/components/explorer/tabs/AuditsTab.tsx

@@ -0,0 +1,29 @@
+export function auditDetailHtml(report: any): string {
+  if (!report) return '<p class="explorer__loading">Report not found.</p>';
+  return `<div class="explorer-doc-content">${report.html}</div>`;
+}
+
+export function AuditsTab({ reports }: { reports: any[] }) {
+  return (
+    <div class="explorer-list">
+      {reports.length === 0 && <p class="explorer__loading">No audit reports.</p>}
+      {reports.map(report => (
+        <div class="explorer-item" x-data="{ open: false }" key={report.filename}>
+          <div class="explorer-item__header" x-on:click="open = !open">
+            <span class="explorer-item__toggle"
+              x-bind:class="open ? 'explorer-item__toggle--open' : ''">▶</span>
+            <span class="explorer-item__title">{report.title || report.filename}</span>
+            <span class="explorer-item__meta">{report.date}</span>
+          </div>
+          <div class="explorer-item__body" x-show="open" x-cloak>
+            <div hx-get={`/api/explorer/audits/${encodeURIComponent(report.filename)}`}
+              hx-trigger="load"
+              hx-swap="innerHTML">
+              <span class="explorer__loading">Loading...</span>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/dashboard/src/components/explorer/tabs/MilestonesTab.tsx

@@ -0,0 +1,84 @@
+interface Milestone {
+  version: string;
+  name?: string;
+  date?: string;
+  duration?: string;
+}
+
+interface MilestoneDetail {
+  version: string;
+  sections: Array<{ type: string; html: string }>;
+}
+
+interface MilestonesTabProps {
+  active: Milestone[];
+  archived: Milestone[];
+}
+
+interface MilestoneItemProps {
+  milestone: Milestone;
+}
+
+export function MilestonesTab({ active, archived }: MilestonesTabProps) {
+  return (
+    <div>
+      {/* Active milestones section */}
+      <h3 class="explorer-section-title">Active</h3>
+      {active.length === 0 && <p class="explorer__loading">No active milestones.</p>}
+      <div class="explorer-list">
+        {active.map((ms) => (
+          <div class="explorer-item" key={ms.version}>
+            <div class="explorer-item__header">
+              <span class="explorer-item__title">v{ms.version}</span>
+              <span class="explorer-badge explorer-badge--building">active</span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Archived milestones section */}
+      <h3 class="explorer-section-title" style="margin-top: var(--space-lg)">
+        Archived
+      </h3>
+      {archived.length === 0 && <p class="explorer__loading">No archived milestones.</p>}
+      <div class="explorer-list">
+        {archived.map((ms) => (
+          <MilestoneItem key={ms.version} milestone={ms} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function MilestoneItem({ milestone }: MilestoneItemProps) {
+  return (
+    <div class="explorer-item" x-data="{ open: false }">
+      <div class="explorer-item__header" x-on:click="open = !open">
+        <span
+          class="explorer-item__toggle"
+          x-bind:class="open ? 'explorer-item__toggle--open' : ''"
+        >
+          ▶
+        </span>
+        <span class="explorer-item__title">v{milestone.version}</span>
+        <span class="explorer-badge explorer-badge--complete">archived</span>
+      </div>
+      <div class="explorer-item__body" x-show="open" x-cloak>
+        <div
+          hx-get={`/api/explorer/milestones/${milestone.version}`}
+          hx-trigger="load"
+          hx-swap="innerHTML"
+        >
+          <span class="explorer__loading">Loading...</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function milestoneDetailHtml(detail: MilestoneDetail | null): string {
+  if (!detail) return '<p class="explorer__loading">Not found.</p>';
+  return detail.sections
+    .map((s) => `<div class="explorer-doc-content">${s.html}</div>`)
+    .join('');
+}

package/dashboard/src/components/explorer/tabs/NotesTab.tsx

@@ -0,0 +1,32 @@
+export function noteDetailHtml(note: any): string {
+  if (!note) return '<p class="explorer__loading">Note not found.</p>';
+  return `<div class="explorer-doc-content">${note.html}</div>`;
+}
+
+export function NotesTab({ notes }: { notes: any[] }) {
+  return (
+    <div class="explorer-list">
+      {notes.length === 0 && <p class="explorer__loading">No notes.</p>}
+      {notes.map(note => (
+        <div class="explorer-item" x-data="{ open: false }" key={note.filename}>
+          <div class="explorer-item__header" x-on:click="open = !open">
+            <span class="explorer-item__toggle"
+              x-bind:class="open ? 'explorer-item__toggle--open' : ''">▶</span>
+            <span class="explorer-item__title">{note.title || note.filename}</span>
+            <span class="explorer-item__meta">{note.date}</span>
+            {note.promoted && (
+              <span class="explorer-badge explorer-badge--complete">promoted</span>
+            )}
+          </div>
+          <div class="explorer-item__body" x-show="open" x-cloak>
+            <div hx-get={`/api/explorer/notes/${encodeURIComponent(note.filename.replace(/\.md$/, ''))}`}
+              hx-trigger="load"
+              hx-swap="innerHTML">
+              <span class="explorer__loading">Loading...</span>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}