@sienklogic/plan-build-run 2.28.0 → 2.29.0

package/CHANGELOG.md

@@ -5,6 +5,13 @@ 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.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)
+
+
+### Features
+
+* **39-01:** add Command Center view with live-updating dashboard components ([7520c7f](https://github.com/SienkLogic/plan-build-run/commit/7520c7fd592beae5739cfd96aa73fd354047896d))
+
 ## [2.28.0](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.27.2...plan-build-run-v2.28.0) (2026-02-24)
 
 

package/dashboard/public/css/command-center.css

@@ -0,0 +1,382 @@
+/* ============================================
+   PBR Dashboard — Command Center View
+   Styles for progress ring, phase timeline,
+   attention panel, activity stream.
+   All values use tokens from tokens.css.
+   ============================================ */
+
+/* --- Command Center Layout --- */
+.command-center {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+  padding: var(--space-lg);
+  max-width: 1200px;
+}
+
+.command-center__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-md);
+}
+
+@media (max-width: 768px) {
+  .command-center__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* --- Status Header --- */
+.status-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+}
+
+.status-header__project {
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--color-text);
+}
+
+.status-header__phase {
+  font-size: 1rem;
+  color: var(--color-text-dim);
+}
+
+/* --- Milestone Progress Bar --- */
+.milestone-bar {
+  width: 100%;
+  margin-top: var(--space-sm);
+}
+
+.milestone-bar__track {
+  height: 8px;
+  border-radius: var(--radius-sm);
+  background: var(--color-border);
+  overflow: hidden;
+}
+
+.milestone-bar__fill {
+  height: 100%;
+  border-radius: var(--radius-sm);
+  background: var(--color-accent);
+  transition: width var(--transition-base);
+}
+
+.milestone-bar__label {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  margin-top: var(--space-xs);
+}
+
+/* --- Progress Ring --- */
+.progress-ring-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-sm);
+}
+
+.progress-ring__svg {
+  transform: rotate(-90deg);
+}
+
+.progress-ring__bg {
+  stroke: var(--color-border);
+  fill: none;
+}
+
+.progress-ring__fg {
+  stroke: var(--color-accent);
+  fill: none;
+  stroke-linecap: round;
+  transition: stroke-dashoffset var(--transition-base);
+}
+
+.progress-ring__text {
+  transform: rotate(90deg);
+  font-size: 1.25rem;
+  font-weight: 700;
+  fill: var(--color-text);
+  text-anchor: middle;
+  dominant-baseline: middle;
+}
+
+/* --- Current Phase Card --- */
+.current-phase-card {
+  grid-column: 1 / -1;
+}
+
+.card {
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: var(--card-radius);
+  box-shadow: var(--card-shadow);
+  padding: var(--card-padding);
+}
+
+.card__header {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
+  padding-bottom: var(--space-sm);
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: var(--space-md);
+}
+
+.card__title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0 0 var(--space-sm) 0;
+}
+
+.card__meta {
+  font-size: 0.85rem;
+  color: var(--color-text-dim);
+  margin: var(--space-xs) 0;
+}
+
+/* --- Next Action --- */
+.next-action {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-top: var(--space-md);
+  padding: var(--space-sm) var(--space-md);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+}
+
+.next-action__label {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.next-action__cmd {
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+  color: var(--color-accent);
+  flex: 1;
+}
+
+/* --- Attention Panel --- */
+.attention-panel__header {
+  color: var(--orange-7, #c2510f);
+}
+
+.attention-panel__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.attention-panel__list li {
+  font-size: 0.9rem;
+  padding: var(--space-xs) 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.attention-panel__list li:last-child {
+  border-bottom: none;
+}
+
+.attention-panel__clear {
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+/* --- Phase Timeline --- */
+.phase-timeline {
+  grid-column: 1 / -1;
+}
+
+.phase-timeline__label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
+  margin-bottom: var(--space-sm);
+}
+
+.phase-timeline__strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.phase-block {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.phase-block:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.phase-block--complete {
+  background: var(--green-6, #2da44e);
+  color: #fff;
+}
+
+.phase-block--in-progress {
+  background: var(--blue-6, #0969da);
+  color: #fff;
+}
+
+.phase-block--not-started {
+  background: var(--color-border);
+  color: var(--color-text-dim);
+}
+
+.phase-block--current {
+  outline: 3px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+/* --- Activity Stream --- */
+.activity-stream__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.activity-item {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-sm);
+  padding: var(--space-xs) 0;
+  border-bottom: 1px solid var(--color-border);
+  font-size: 0.85rem;
+}
+
+.activity-item:last-child {
+  border-bottom: none;
+}
+
+.activity-item__icon {
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+
+.activity-item__path {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--color-text-dim);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.activity-item__time {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+
+.activity-stream__empty {
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+/* --- Quick Actions --- */
+.quick-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.quick-actions__label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
+}
+
+.quick-actions__buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+}
+
+/* --- Buttons --- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-xs) var(--space-md);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
+}
+
+.btn--primary {
+  background: var(--color-accent);
+  color: #fff;
+  border-color: var(--color-accent);
+}
+
+.btn--primary:hover {
+  background: var(--color-accent-hover);
+  border-color: var(--color-accent-hover);
+  color: #fff;
+  text-decoration: none;
+}
+
+.btn--secondary {
+  background: transparent;
+  color: var(--color-text);
+  border-color: var(--color-border);
+}
+
+.btn--secondary:hover {
+  background: var(--color-surface-hover);
+  text-decoration: none;
+}
+
+.btn--ghost {
+  background: transparent;
+  color: var(--color-text-dim);
+  border-color: transparent;
+}
+
+.btn--ghost:hover {
+  background: var(--color-surface-hover);
+}
+
+.btn--sm {
+  padding: 2px var(--space-sm);
+  font-size: 0.75rem;
+}

package/dashboard/public/css/layout.css

@@ -11,10 +11,19 @@
 
 html {
   font-family: var(--font-sans);
-  font-size: 15px;
-  letter-spacing: -0.01em;
+  font-size: var(--font-size-base, 14px);
+  line-height: var(--line-height-base, 1.5);
+  letter-spacing: -0.011em;
   background: var(--color-surface);
   color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code, pre, kbd, samp {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  line-height: var(--line-height-mono, 1.6);
 }
 
 body {

package/dashboard/public/css/tokens.css

@@ -38,9 +38,12 @@
   --shadow-sm: var(--shadow-2);
   --shadow-md: var(--shadow-4);
 
-  /* Typography */
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
+  /* Typography — Inter + JetBrains Mono (loaded via Google Fonts CDN) */
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', 'Courier New', monospace;
+  --font-size-base: 14px;
+  --line-height-base: 1.5;
+  --line-height-mono: 1.6;
 
   /* Layout dimensions */
   --size-sidebar: 220px;

package/dashboard/src/components/Layout.tsx

@@ -21,6 +21,11 @@ export function Layout({ title, children, currentView }: LayoutProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>{title} — PBR Dashboard</title>
 
+        {/* Google Fonts: Inter + JetBrains Mono */}
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet" />
+
         {/* Open Props */}
         <link rel="stylesheet" href="https://unpkg.com/open-props" />
         <link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css" />
@@ -29,6 +34,7 @@ export function Layout({ title, children, currentView }: LayoutProps) {
         <link rel="stylesheet" href="/css/tokens.css" />
         <link rel="stylesheet" href="/css/layout.css" />
         <link rel="stylesheet" href="/css/status-colors.css" />
+        <link rel="stylesheet" href="/css/command-center.css" />
 
         {/* Prevent flash of wrong theme */}
         {html`<script>

package/dashboard/src/components/partials/ActivityStream.tsx

@@ -0,0 +1,58 @@
+import type { FC } from 'hono/jsx';
+import { html } from 'hono/html';
+
+interface ActivityItem {
+  path: string;
+  timestamp: string;
+  type: string;
+}
+
+interface ActivityStreamProps {
+  activity: ActivityItem[];
+}
+
+export const ActivityStream: FC<ActivityStreamProps> = ({ activity }) => {
+  return (
+    <div class="card activity-stream" id="activity-stream">
+      <div class="card__header">Recent Activity</div>
+      {activity.length === 0 ? (
+        <p class="activity-stream__empty">No recent .planning/ commits found.</p>
+      ) : (
+        <>
+          <ul class="activity-stream__list">
+            {activity.map((item, i) => (
+              <li class="activity-item" key={i}>
+                <span class="activity-item__icon" aria-hidden="true">◈</span>
+                <span class="activity-item__path">{item.path}</span>
+                <time
+                  class="activity-item__time"
+                  datetime={item.timestamp}
+                  data-timestamp={item.timestamp}
+                >
+                  …
+                </time>
+              </li>
+            ))}
+          </ul>
+          {html`<script>
+            (function() {
+              function relativeTime(ts) {
+                var diff = Date.now() - new Date(ts).getTime();
+                var minutes = Math.floor(diff / 60000);
+                if (minutes < 60) return minutes + 'm ago';
+                var hours = Math.floor(minutes / 60);
+                if (hours < 24) return hours + 'h ago';
+                var days = Math.floor(hours / 24);
+                return days + 'd ago';
+              }
+              var els = document.querySelectorAll('.activity-item__time[data-timestamp]');
+              for (var i = 0; i < els.length; i++) {
+                els[i].textContent = relativeTime(els[i].dataset.timestamp);
+              }
+            })();
+          </script>`}
+        </>
+      )}
+    </div>
+  );
+};

package/dashboard/src/components/partials/AttentionPanel.tsx

@@ -0,0 +1,48 @@
+import type { FC } from 'hono/jsx';
+
+interface AttentionPanelProps {
+  todos: Array<{ priority: string }>;
+  phases: Array<{ id: number; name?: string; status: string }>;
+  currentPhaseId: number;
+}
+
+export const AttentionPanel: FC<AttentionPanelProps> = ({
+  todos,
+  phases,
+  currentPhaseId,
+}) => {
+  const highPriorityCount = todos.filter(
+    (t) => t.priority === 'P0' || t.priority === 'P1'
+  ).length;
+
+  const stalledPhases = phases.filter(
+    (p) => p.id < currentPhaseId && p.status !== 'complete'
+  );
+
+  const hasItems = highPriorityCount > 0 || stalledPhases.length > 0;
+
+  return (
+    <div class="card attention-panel" id="attention-panel">
+      <div class="card__header attention-panel__header">Needs Attention</div>
+      {hasItems ? (
+        <ul class="attention-panel__list">
+          {highPriorityCount > 0 && (
+            <li>
+              <a href="/todos?priority=P0,P1">
+                {highPriorityCount} high-priority todo
+                {highPriorityCount !== 1 ? 's' : ''} pending
+              </a>
+            </li>
+          )}
+          {stalledPhases.map((p) => (
+            <li key={p.id}>
+              Phase {p.id} ({p.name || `Phase ${p.id}`}) is incomplete — expected to be done by now
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p class="attention-panel__clear">All clear — nothing needs attention.</p>
+      )}
+    </div>
+  );
+};

package/dashboard/src/components/partials/CurrentPhaseCard.tsx

@@ -0,0 +1,50 @@
+import type { FC } from 'hono/jsx';
+
+interface CurrentPhaseCardProps {
+  currentPhase: {
+    id: number;
+    name: string;
+    status: string;
+    planStatus: string;
+  };
+  lastActivity: {
+    date: string;
+    description: string;
+  };
+  nextAction: string | null;
+}
+
+export const CurrentPhaseCard: FC<CurrentPhaseCardProps> = ({
+  currentPhase,
+  lastActivity,
+  nextAction,
+}) => {
+  return (
+    <div class="card current-phase-card">
+      <div class="card__header">Current Phase</div>
+      <h2 class="card__title">
+        Phase {currentPhase.id}: {currentPhase.name}
+      </h2>
+      <span class={`badge status-badge status-badge--${currentPhase.status}`}>
+        {currentPhase.status}
+      </span>
+      <p class="card__meta">Plans: {currentPhase.planStatus}</p>
+      <p class="card__meta">
+        Last activity: {lastActivity.date || 'N/A'} — {lastActivity.description}
+      </p>
+      {nextAction && (
+        <div class="next-action">
+          <span class="next-action__label">Next</span>
+          <code class="next-action__cmd">{nextAction}</code>
+          <button
+            class="btn btn--ghost btn--sm"
+            type="button"
+            onclick={`navigator.clipboard.writeText('${nextAction}')`}
+          >
+            Copy
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};

package/dashboard/src/components/partials/PhaseTimeline.tsx

@@ -0,0 +1,38 @@
+import type { FC } from 'hono/jsx';
+
+interface PhaseTimelineProps {
+  phases: Array<{ id: number; name: string; status: string }>;
+  currentPhaseId: number;
+}
+
+export const PhaseTimeline: FC<PhaseTimelineProps> = ({ phases, currentPhaseId }) => {
+  return (
+    <div class="phase-timeline" id="phase-timeline">
+      <p class="phase-timeline__label">Phase Timeline</p>
+      <div class="phase-timeline__strip">
+        {phases.map((phase) => {
+          const isCurrent = phase.id === currentPhaseId;
+          const cls = [
+            'phase-block',
+            `phase-block--${phase.status}`,
+            isCurrent ? 'phase-block--current' : '',
+          ]
+            .filter(Boolean)
+            .join(' ');
+
+          return (
+            <a
+              key={phase.id}
+              href={`/explorer?phase=${phase.id}`}
+              class={cls}
+              title={`Phase ${phase.id}: ${phase.name}`}
+              aria-label={`Phase ${phase.id}: ${phase.name} (${phase.status})`}
+            >
+              {phase.id}
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/dashboard/src/components/partials/ProgressRing.tsx

@@ -0,0 +1,51 @@
+import type { FC } from 'hono/jsx';
+
+interface ProgressRingProps {
+  percent: number;
+  size?: number;
+}
+
+export const ProgressRing: FC<ProgressRingProps> = ({ percent, size = 120 }) => {
+  const r = (size / 2) - 8;
+  const circumference = 2 * Math.PI * r;
+  const offset = circumference * (1 - percent / 100);
+  const center = size / 2;
+
+  return (
+    <div class="progress-ring-wrapper" aria-label={`${percent}% complete`}>
+      <svg
+        class="progress-ring__svg"
+        viewBox={`0 0 ${size} ${size}`}
+        width={size}
+        height={size}
+        role="img"
+        aria-hidden="true"
+      >
+        <circle
+          class="progress-ring__bg"
+          cx={center}
+          cy={center}
+          r={r}
+          stroke-width="8"
+        />
+        <circle
+          class="progress-ring__fg"
+          cx={center}
+          cy={center}
+          r={r}
+          stroke-width="8"
+          stroke-dasharray={`${circumference}`}
+          stroke-dashoffset={`${offset}`}
+        />
+        <text
+          class="progress-ring__text"
+          x={center}
+          y={center}
+          transform={`rotate(90, ${center}, ${center})`}
+        >
+          {percent}%
+        </text>
+      </svg>
+    </div>
+  );
+};

package/dashboard/src/components/partials/QuickActions.tsx

@@ -0,0 +1,30 @@
+import type { FC } from 'hono/jsx';
+
+interface QuickAction {
+  label: string;
+  href: string;
+  primary: boolean;
+}
+
+interface QuickActionsProps {
+  actions: QuickAction[];
+}
+
+export const QuickActions: FC<QuickActionsProps> = ({ actions }) => {
+  return (
+    <div class="quick-actions" id="quick-actions">
+      <p class="quick-actions__label">Quick Actions</p>
+      <div class="quick-actions__buttons">
+        {actions.map((action, i) => (
+          <a
+            key={i}
+            href={action.href}
+            class={`btn${action.primary ? ' btn--primary' : ' btn--secondary'}`}
+          >
+            {action.label}
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+};

package/dashboard/src/components/partials/StatusHeader.tsx

@@ -0,0 +1,45 @@
+import type { FC } from 'hono/jsx';
+
+interface StatusHeaderProps {
+  projectName: string;
+  currentPhase: {
+    id: number;
+    total: number;
+    name: string;
+    status: string;
+  };
+  completedCount: number;
+  totalCount: number;
+  progress: number;
+}
+
+export const StatusHeader: FC<StatusHeaderProps> = ({
+  projectName,
+  currentPhase,
+  completedCount,
+  totalCount,
+  progress,
+}) => {
+  return (
+    <div class="status-header">
+      <span class="status-header__project">{projectName}</span>
+      <span class="status-header__phase">
+        Phase {currentPhase.id}: {currentPhase.name}
+      </span>
+      <span class={`badge status-badge status-badge--${currentPhase.status}`}>
+        {currentPhase.status}
+      </span>
+      <div class="milestone-bar">
+        <div class="milestone-bar__track">
+          <div
+            class="milestone-bar__fill"
+            style={`width:${progress}%`}
+          />
+        </div>
+        <span class="milestone-bar__label">
+          {completedCount} of {totalCount} phases — {progress}%
+        </span>
+      </div>
+    </div>
+  );
+};

package/dashboard/src/index.tsx

@@ -6,6 +6,7 @@ import { logger } from 'hono/logger';
 import { secureHeaders } from 'hono/secure-headers';
 import { Layout } from './components/Layout';
 import { indexRouter } from './routes/index.routes';
+import { commandCenterRouter } from './routes/command-center.routes';
 import { sseHandler } from './sse-handler';
 import { startWatcher } from './watcher-setup';
 import { currentPhaseMiddleware } from './middleware/current-phase';
@@ -66,6 +67,7 @@ function createApp(config: ServerConfig) {
 
   // Routes
   app.route('/', indexRouter);
+  app.route('/api/command-center', commandCenterRouter);
 
   // SSE endpoint — real streamSSE handler with multi-client broadcast
   app.get('/api/events/stream', sseHandler);

package/dashboard/src/middleware/current-phase.ts

@@ -1,6 +1,4 @@
 import type { MiddlewareHandler } from 'hono';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore — dashboard.service.js is plain ESM with no type declarations
 import { parseStateFile } from '../services/dashboard.service.js';
 
 export const currentPhaseMiddleware: MiddlewareHandler = async (c, next) => {

package/dashboard/src/routes/command-center.routes.tsx

@@ -0,0 +1,69 @@
+import { Hono } from 'hono';
+import { getDashboardData } from '../services/dashboard.service.js';
+import { listPendingTodos } from '../services/todo.service.js';
+import { StatusHeader } from '../components/partials/StatusHeader';
+import { ProgressRing } from '../components/partials/ProgressRing';
+import { CurrentPhaseCard } from '../components/partials/CurrentPhaseCard';
+import { AttentionPanel } from '../components/partials/AttentionPanel';
+import { PhaseTimeline } from '../components/partials/PhaseTimeline';
+import { ActivityStream } from '../components/partials/ActivityStream';
+import { QuickActions } from '../components/partials/QuickActions';
+
+type Env = {
+  Variables: {
+    projectDir: string;
+  };
+};
+
+const router = new Hono<Env>();
+
+async function fetchAllData(projectDir: string) {
+  const [data, todos] = await Promise.all([
+    getDashboardData(projectDir),
+    listPendingTodos(projectDir).catch(() => [])
+  ]);
+  const completed = (data.phases as any[]).filter((p: any) => p.status === 'complete').length;
+  return { data, todos, completed };
+}
+
+router.get('/status', async (c) => {
+  const projectDir = c.get('projectDir');
+  const { data, completed } = await fetchAllData(projectDir);
+  return c.html(
+    <div id="cc-status">
+      <StatusHeader
+        projectName={data.projectName}
+        currentPhase={data.currentPhase}
+        completedCount={completed}
+        totalCount={(data.phases as any[]).length}
+        progress={data.progress}
+      />
+      <ProgressRing percent={data.progress} />
+    </div>
+  );
+});
+
+router.get('/activity', async (c) => {
+  const projectDir = c.get('projectDir');
+  const data = await getDashboardData(projectDir);
+  return c.html(<ActivityStream activity={data.recentActivity} />);
+});
+
+router.get('/attention', async (c) => {
+  const projectDir = c.get('projectDir');
+  const { data, todos } = await fetchAllData(projectDir);
+  return c.html(
+    <AttentionPanel
+      todos={todos}
+      phases={data.phases as any[]}
+      currentPhaseId={data.currentPhase.id}
+    />
+  );
+});
+
+// Unused components imported but available for future routes
+void CurrentPhaseCard;
+void PhaseTimeline;
+void QuickActions;
+
+export { router as commandCenterRouter };

package/dashboard/src/routes/index.routes.tsx

@@ -1,5 +1,14 @@
 import { Hono } from 'hono';
 import { Layout } from '../components/Layout';
+import { getDashboardData } from '../services/dashboard.service.js';
+import { listPendingTodos } from '../services/todo.service.js';
+import { StatusHeader } from '../components/partials/StatusHeader';
+import { ProgressRing } from '../components/partials/ProgressRing';
+import { CurrentPhaseCard } from '../components/partials/CurrentPhaseCard';
+import { AttentionPanel } from '../components/partials/AttentionPanel';
+import { PhaseTimeline } from '../components/partials/PhaseTimeline';
+import { ActivityStream } from '../components/partials/ActivityStream';
+import { QuickActions } from '../components/partials/QuickActions';
 
 type Env = {
   Variables: {
@@ -13,22 +22,83 @@ router.get('/favicon.ico', (c) => {
   return c.body(null, 204);
 });
 
-router.get('/', (c) => {
+router.get('/', async (c) => {
+  const projectDir = c.get('projectDir');
   const isHtmx = c.req.header('HX-Request');
 
+  const [data, todos] = await Promise.all([
+    getDashboardData(projectDir),
+    listPendingTodos(projectDir).catch(() => [])
+  ]);
+  const completed = (data.phases as any[]).filter((p: any) => p.status === 'complete').length;
+
+  const content = (
+    <main id="main-content" class="command-center">
+      <div
+        id="cc-status"
+        hx-get="/api/command-center/status"
+        hx-trigger="sse:file-change"
+        hx-swap="innerHTML"
+        hx-ext="sse"
+      >
+        <StatusHeader
+          projectName={data.projectName}
+          currentPhase={data.currentPhase}
+          completedCount={completed}
+          totalCount={(data.phases as any[]).length}
+          progress={data.progress}
+        />
+        <ProgressRing percent={data.progress} />
+      </div>
+
+      <div class="command-center__grid">
+        <CurrentPhaseCard
+          currentPhase={data.currentPhase}
+          lastActivity={data.lastActivity}
+          nextAction={(data as any).nextAction ?? null}
+        />
+
+        <div
+          id="attention-panel-wrapper"
+          hx-get="/api/command-center/attention"
+          hx-trigger="sse:file-change"
+          hx-swap="outerHTML"
+          hx-ext="sse"
+        >
+          <AttentionPanel
+            todos={todos}
+            phases={data.phases as any[]}
+            currentPhaseId={data.currentPhase.id}
+          />
+        </div>
+
+        <QuickActions actions={data.quickActions} />
+
+        <PhaseTimeline
+          phases={data.phases as any[]}
+          currentPhaseId={data.currentPhase.id}
+        />
+
+        <div
+          id="activity-stream-wrapper"
+          hx-get="/api/command-center/activity"
+          hx-trigger="sse:file-change"
+          hx-swap="outerHTML"
+          hx-ext="sse"
+        >
+          <ActivityStream activity={data.recentActivity} />
+        </div>
+      </div>
+    </main>
+  );
+
   if (isHtmx) {
-    return c.html(
-      <main id="main-content">
-        <h1>Command Center</h1>
-        <p>Project overview loads here.</p>
-      </main>
-    );
+    return c.html(content);
   }
 
   return c.html(
     <Layout title="Command Center" currentView="home">
-      <h1>Command Center</h1>
-      <p>Project overview loads here.</p>
+      {content}
     </Layout>
   );
 });

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

@@ -0,0 +1,39 @@
+export interface DashboardPhase {
+  id: number;
+  name: string;
+  description: string;
+  status: string;
+}
+
+export interface DashboardCurrentPhase {
+  id: number;
+  total: number;
+  name: string;
+  planStatus: string;
+  status: string;
+}
+
+export interface DashboardData {
+  projectName: string;
+  currentPhase: DashboardCurrentPhase;
+  lastActivity: { date: string; description: string };
+  progress: number;
+  phases: DashboardPhase[];
+  recentActivity: Array<{ path: string; timestamp: string; type: string }>;
+  quickActions: Array<{ label: string; href: string; primary: boolean }>;
+  nextAction?: string | null;
+}
+
+export function getDashboardData(projectDir: string): Promise<DashboardData>;
+export function parseStateFile(projectDir: string): Promise<{
+  projectName: string;
+  currentPhase: DashboardCurrentPhase;
+  lastActivity: { date: string; description: string };
+  progress: number;
+  nextAction: string | null;
+}>;
+export function parseRoadmapFile(projectDir: string): Promise<unknown>;
+export function derivePhaseStatuses(phases: DashboardPhase[], currentPhase: DashboardCurrentPhase): DashboardPhase[];
+export function getRecentActivity(projectDir: string): Promise<Array<{ path: string; timestamp: string; type: string }>>;
+export function deriveQuickActions(currentPhase: DashboardCurrentPhase): Array<{ label: string; href: string; primary: boolean }>;
+export function _clearActivityCache(): void;

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

@@ -0,0 +1,21 @@
+export interface TodoItem {
+  id: string;
+  title: string;
+  priority: string;
+  phase: string;
+  status: string;
+  created: string;
+  filename: string;
+}
+
+export interface TodoFilters {
+  priority?: string;
+  status?: string;
+  q?: string;
+}
+
+export function listPendingTodos(projectDir: string, filters?: TodoFilters): Promise<TodoItem[]>;
+export function getTodoDetail(projectDir: string, todoId: string): Promise<TodoItem & { html: string }>;
+export function createTodo(projectDir: string, todoData: { title: string; priority: string; description: string; phase?: string }): Promise<string>;
+export function listDoneTodos(projectDir: string): Promise<Array<{ id: string; filename: string; title: string; priority: string; phase: string; completedAt: string | null }>>;
+export function completeTodo(projectDir: string, todoId: string): Promise<void>;

package/package.json

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