@sienklogic/plan-build-run 2.29.0 → 2.31.0

package/CHANGELOG.md

@@ -5,6 +5,38 @@ 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)
+
+
+### 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);
+}