@sienklogic/plan-build-run 2.11.0 → 2.12.1

package/dashboard/src/pages/PhaseDetailView.jsx

@@ -0,0 +1,216 @@
+import { useState, useEffect } from 'react';
+import { useTheme } from '../theme/ThemeProvider.jsx';
+import { FONTS } from '../lib/constants.js';
+import { Card, Badge, ErrorBoundary, QualityGateBadge, CheckpointBox } from '../components/ui/index.js';
+import TabBar from '../components/ui/TabBar.jsx';
+import { SkeletonCard } from '../components/ui/LoadingSkeleton.jsx';
+import useFetch from '../hooks/useFetch.js';
+import useWebSocket from '../hooks/useWebSocket.js';
+
+const TABS = ['plans', 'summaries', 'verifications', 'context'];
+
+function statusColor(status, tokens) {
+  const s = (status || '').toLowerCase();
+  if (s === 'complete' || s === 'done' || s === 'passed') return tokens.success;
+  if (s === 'partial' || s === 'in-progress') return tokens.plan;
+  if (s === 'failed' || s === 'checkpoint') return tokens.error;
+  return tokens.textDim;
+}
+
+function PlanCard({ item, tokens }) {
+  return (
+    <Card style={{ padding: '12px 16px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <span style={{ fontFamily: FONTS.mono, fontSize: 13, fontWeight: 600, color: tokens.text, flex: 1 }}>
+            {item.file}
+          </span>
+          {item.plan && (
+            <Badge color={tokens.accent}>Plan {item.plan}</Badge>
+          )}
+          {item.status && (
+            <Badge color={statusColor(item.status, tokens)}>{item.status}</Badge>
+          )}
+        </div>
+        {item.type && (
+          <span style={{ fontFamily: FONTS.mono, fontSize: 11, color: tokens.textDim }}>
+            Type: {item.type}
+          </span>
+        )}
+        {item.tasks_total != null && (
+          <span style={{ fontFamily: FONTS.mono, fontSize: 11, color: tokens.textMuted }}>
+            Tasks: {item.tasks_total}
+          </span>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+function SummaryCard({ item, tokens }) {
+  return (
+    <Card style={{ padding: '12px 16px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <span style={{ fontFamily: FONTS.mono, fontSize: 13, fontWeight: 600, color: tokens.text, flex: 1 }}>
+            {item.file}
+          </span>
+          {item.status && (
+            <Badge color={statusColor(item.status, tokens)}>{item.status}</Badge>
+          )}
+        </div>
+        {(item.tasks_completed != null || item.tasks_total != null) && (
+          <span style={{ fontFamily: FONTS.mono, fontSize: 11, color: tokens.textMuted }}>
+            Completed: {item.tasks_completed ?? '?'}/{item.tasks_total ?? '?'}
+          </span>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+function VerificationCard({ item, tokens }) {
+  return (
+    <Card style={{ padding: '12px 16px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <span style={{ fontFamily: FONTS.mono, fontSize: 13, fontWeight: 600, color: tokens.text, flex: 1 }}>
+            {item.file}
+          </span>
+          {item.status && (
+            <Badge color={statusColor(item.status, tokens)}>{item.status}</Badge>
+          )}
+          {item.status && <QualityGateBadge passed={item.status === 'passed' || item.status === 'complete'} />}
+        </div>
+        {(item.must_haves_passed != null || item.must_haves_total != null) && (
+          <span style={{ fontFamily: FONTS.mono, fontSize: 11, color: tokens.textMuted }}>
+            Must-haves: {item.must_haves_passed ?? '?'}/{item.must_haves_total ?? '?'}
+          </span>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+function ContextCard({ item, tokens }) {
+  return (
+    <Card style={{ padding: '12px 16px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <span style={{ fontFamily: FONTS.mono, fontSize: 13, fontWeight: 600, color: tokens.text }}>
+          {item.file}
+        </span>
+        {item.body && (
+          <span style={{ fontFamily: FONTS.sans, fontSize: 12, color: tokens.textMuted, lineHeight: 1.4, whiteSpace: 'pre-wrap' }}>
+            {item.body.slice(0, 200)}
+          </span>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+const TAB_RENDERERS = {
+  plans: PlanCard,
+  summaries: SummaryCard,
+  verifications: VerificationCard,
+  context: ContextCard,
+};
+
+function PhaseDetailContent({ phaseSlug, phaseName, onBack }) {
+  const { tokens } = useTheme();
+  const [activeTab, setActiveTab] = useState('plans');
+  const { data, loading, error, refetch } = useFetch(`/api/roadmap/phases/${phaseSlug}`);
+  const wsUrl = 'ws://' + window.location.hostname + ':' + (window.location.port || '3141') + '/ws';
+  const { events: wsEvents } = useWebSocket(wsUrl);
+
+  useEffect(() => {
+    if (wsEvents.length > 0) refetch();
+  }, [wsEvents.length, refetch]);
+
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <SkeletonCard height={40} />
+        <SkeletonCard height={30} />
+        {[1, 2, 3].map((i) => (
+          <SkeletonCard key={i} height={70} />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <span
+            onClick={onBack}
+            style={{ cursor: 'pointer', fontFamily: FONTS.mono, fontSize: 14, color: tokens.accent }}
+          >
+            &larr; Back
+          </span>
+          <span style={{ fontFamily: FONTS.sans, fontSize: 16, fontWeight: 700, color: tokens.text }}>
+            {phaseName || phaseSlug}
+          </span>
+        </div>
+        <Card style={{ border: `1px solid ${tokens.error}`, color: tokens.error }}>
+          <div style={{ fontFamily: FONTS.mono, fontSize: 12 }}>Error loading phase: {error.message}</div>
+        </Card>
+      </div>
+    );
+  }
+
+  const items = (data && data[activeTab]) || [];
+  const Renderer = TAB_RENDERERS[activeTab];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      {/* Header with back navigation */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <span
+          onClick={onBack}
+          style={{ cursor: 'pointer', fontFamily: FONTS.mono, fontSize: 14, color: tokens.accent }}
+        >
+          &larr; Back
+        </span>
+        <span style={{ fontFamily: FONTS.sans, fontSize: 16, fontWeight: 700, color: tokens.text }}>
+          {phaseName || phaseSlug}
+        </span>
+      </div>
+
+      {/* Tab bar */}
+      <TabBar tabs={TABS} active={activeTab} onChange={setActiveTab} />
+
+      {/* Phase verification checkpoint summary */}
+      {activeTab === 'verifications' && items.length > 0 && (
+        <CheckpointBox
+          title="Phase Verification"
+          status={items.every(i => i.status === 'passed' || i.status === 'complete') ? 'passed' : items.some(i => i.status === 'failed') ? 'failed' : 'pending'}
+          items={items.map(i => ({ label: i.file, checked: i.status === 'passed' || i.status === 'complete' }))}
+          readOnly={true}
+        />
+      )}
+
+      {/* Tab content */}
+      {items.length === 0 ? (
+        <Card>
+          <div style={{ fontFamily: FONTS.sans, fontSize: 13, color: tokens.textMuted, textAlign: 'center', padding: 20 }}>
+            No {activeTab} found
+          </div>
+        </Card>
+      ) : (
+        items.map((item, idx) => (
+          <Renderer key={item.file || idx} item={item} tokens={tokens} />
+        ))
+      )}
+    </div>
+  );
+}
+
+export default function PhaseDetailView({ phaseSlug, phaseName, onBack }) {
+  return (
+    <ErrorBoundary>
+      <PhaseDetailContent phaseSlug={phaseSlug} phaseName={phaseName} onBack={onBack} />
+    </ErrorBoundary>
+  );
+}

package/dashboard/src/pages/PlanningPage.jsx

@@ -0,0 +1,181 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useTheme } from '../theme/ThemeProvider.jsx';
+import { FONTS } from '../lib/constants.js';
+import { SectionTitle, ErrorBoundary, ErrorBox } from '../components/ui/index.js';
+import { SkeletonCard } from '../components/ui/LoadingSkeleton.jsx';
+import useFetch from '../hooks/useFetch.js';
+import useWebSocket from '../hooks/useWebSocket.js';
+import useDocumentTitle from '../hooks/useDocumentTitle.js';
+import useToast from '../hooks/useToast.jsx';
+import { apiPost } from '../lib/api.js';
+import MilestonesTab from './planning/MilestonesTab.jsx';
+import PhasesTab from './planning/PhasesTab.jsx';
+import TodosTab from './planning/TodosTab.jsx';
+import QuickTab from './planning/QuickTab.jsx';
+import NotesTab from './planning/NotesTab.jsx';
+import ResearchTab from './planning/ResearchTab.jsx';
+import DecisionsTab from './planning/DecisionsTab.jsx';
+import FilesTab from './planning/FilesTab.jsx';
+
+const TABS = [
+  { key: 'milestones', label: 'milestones' },
+  { key: 'phases', label: 'phases' },
+  { key: 'todos', label: 'todos' },
+  { key: 'notes', label: 'notes' },
+  { key: 'quick', label: 'quick' },
+  { key: 'research', label: 'research' },
+  { key: 'decisions', label: 'decisions' },
+  { key: 'files', label: 'files' },
+];
+
+function PlanningPageContent() {
+  const { tokens: t } = useTheme();
+  const { addToast } = useToast();
+  const [activeTab, setActiveTab] = useState('milestones');
+
+  const phases = useFetch('/api/planning/phases');
+  const milestones = useFetch('/api/planning/milestones');
+  const todos = useFetch('/api/planning/todos');
+  const notes = useFetch('/api/planning/notes');
+  const quick = useFetch('/api/planning/quick');
+  const research = useFetch('/api/planning/research');
+  const decisions = useFetch('/api/planning/decisions');
+
+  const wsUrl = 'ws://' + window.location.hostname + ':' + (window.location.port || '3141') + '/ws';
+  const ws = useWebSocket(wsUrl);
+  useDocumentTitle({ wsEvents: ws.events });
+
+  const refetchAll = useCallback(() => {
+    phases.refetch();
+    milestones.refetch();
+    todos.refetch();
+    notes.refetch();
+    quick.refetch();
+    research.refetch();
+    decisions.refetch();
+  }, [phases.refetch, milestones.refetch, todos.refetch, notes.refetch, quick.refetch, research.refetch, decisions.refetch]);
+
+  useEffect(() => {
+    if (ws.events.length > 0) {
+      refetchAll();
+    }
+  }, [ws.events.length, refetchAll]);
+
+  useEffect(() => {
+    if (phases.error && addToast) addToast('error', phases.error.message);
+  }, [phases.error, addToast]);
+
+  const isLoading = phases.loading;
+
+  if (isLoading) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <SkeletonCard height={40} />
+        <SkeletonCard height={300} />
+      </div>
+    );
+  }
+
+  const handleCreateDecision = async (phase, text) => {
+    try {
+      await apiPost('/api/planning/decisions', { phase, text });
+      decisions.refetch();
+      addToast('success', 'Decision recorded');
+    } catch (err) {
+      addToast('error', 'Failed to create decision: ' + err.message);
+    }
+  };
+
+  const renderTab = () => {
+    switch (activeTab) {
+      case 'milestones':
+        return (
+          <MilestonesTab
+            milestones={Array.isArray(milestones.data) ? milestones.data : []}
+            phases={Array.isArray(phases.data) ? phases.data : []}
+            todos={Array.isArray(todos.data) ? todos.data : []}
+          />
+        );
+      case 'phases':
+        return (
+          <PhasesTab
+            phases={Array.isArray(phases.data) ? phases.data : []}
+            todos={Array.isArray(todos.data) ? todos.data : []}
+          />
+        );
+      case 'todos':
+        return (
+          <TodosTab
+            todos={Array.isArray(todos.data) ? todos.data : []}
+            onRefresh={todos.refetch}
+          />
+        );
+      case 'notes':
+        return (
+          <NotesTab
+            notes={Array.isArray(notes.data) ? notes.data : []}
+            onRefresh={notes.refetch}
+          />
+        );
+      case 'quick':
+        return <QuickTab quick={Array.isArray(quick.data) ? quick.data : []} />;
+      case 'research':
+        return <ResearchTab research={Array.isArray(research.data) ? research.data : []} />;
+      case 'decisions':
+        return (
+          <DecisionsTab
+            decisions={Array.isArray(decisions.data) ? decisions.data : []}
+            onCreateDecision={handleCreateDecision}
+          />
+        );
+      case 'files':
+        return <FilesTab onRefresh={refetchAll} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <SectionTitle>Planning</SectionTitle>
+
+      {/* Tab bar */}
+      <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', borderBottom: `1px solid ${t.border}`, paddingBottom: 8 }}>
+        {TABS.map((tab) => (
+          <button
+            key={tab.key}
+            onClick={() => setActiveTab(tab.key)}
+            style={{
+              padding: '6px 14px',
+              borderRadius: '6px 6px 0 0',
+              borderTop: activeTab === tab.key ? `1px solid ${t.accent}` : `1px solid transparent`,
+              borderLeft: activeTab === tab.key ? `1px solid ${t.accent}` : `1px solid transparent`,
+              borderRight: activeTab === tab.key ? `1px solid ${t.accent}` : `1px solid transparent`,
+              borderBottom: 'none',
+              background: activeTab === tab.key ? `${t.accent}18` : 'transparent',
+              color: activeTab === tab.key ? t.accent : t.textMuted,
+              fontFamily: FONTS.mono,
+              fontSize: 11,
+              fontWeight: 600,
+              cursor: 'pointer',
+              textTransform: 'lowercase',
+            }}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Active tab content */}
+      {renderTab()}
+    </div>
+  );
+}
+
+export default function PlanningPage() {
+  return (
+    <ErrorBoundary>
+      <PlanningPageContent />
+    </ErrorBoundary>
+  );
+}

package/dashboard/src/pages/ProgressPage.jsx

@@ -0,0 +1,249 @@
+import { useState, useEffect } from 'react';
+import useFetch from '../hooks/useFetch.js';
+import { useTheme } from '../theme/ThemeProvider.jsx';
+import { FONTS } from '../lib/constants.js';
+
+const STATUS_COLORS = {
+  completed: '#22c55e',
+  'in-progress': '#3b82f6',
+  planned: '#6b7280',
+  unknown: '#9ca3af',
+};
+
+function PhaseNode({ phase, x, y, width, height }) {
+  const color = STATUS_COLORS[phase.status] || STATUS_COLORS.unknown;
+  return (
+    <g>
+      <rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        rx={6}
+        fill={color}
+        opacity={0.15}
+        stroke={color}
+        strokeWidth={1.5}
+      />
+      <text
+        x={x + width / 2}
+        y={y + height / 2 - 6}
+        textAnchor="middle"
+        fontSize={11}
+        fontFamily={FONTS.mono}
+        fill={color}
+      >
+        {`Phase ${phase.id}`}
+      </text>
+      <text
+        x={x + width / 2}
+        y={y + height / 2 + 10}
+        textAnchor="middle"
+        fontSize={10}
+        fontFamily={FONTS.sans}
+        fill={color}
+        opacity={0.85}
+      >
+        {phase.name.length > 18 ? phase.name.slice(0, 16) + '…' : phase.name}
+      </text>
+    </g>
+  );
+}
+
+function DependencyGraph({ phases, dependencies }) {
+  const { tokens } = useTheme();
+  const nodeWidth = 130;
+  const nodeHeight = 52;
+  const colGap = 170;
+  const rowGap = 80;
+  const cols = Math.min(4, phases.length);
+  const svgWidth = cols * colGap + 40;
+  const rows = Math.ceil(phases.length / cols);
+  const svgHeight = rows * rowGap + 40;
+
+  // Build position map
+  const posMap = {};
+  phases.forEach((phase, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    posMap[phase.id] = {
+      x: col * colGap + 20,
+      y: row * rowGap + 20,
+    };
+  });
+
+  return (
+    <svg width={svgWidth} height={svgHeight} style={{ overflow: 'visible' }}>
+      {/* Draw dependency edges */}
+      {dependencies.map((edge, i) => {
+        const from = posMap[edge.from];
+        const to = posMap[edge.to];
+        if (!from || !to) return null;
+        const x1 = from.x + nodeWidth / 2;
+        const y1 = from.y + nodeHeight;
+        const x2 = to.x + nodeWidth / 2;
+        const y2 = to.y;
+        return (
+          <line
+            key={i}
+            x1={x1}
+            y1={y1}
+            x2={x2}
+            y2={y2}
+            stroke={tokens.border || '#4b5563'}
+            strokeWidth={1.5}
+            strokeDasharray="4,3"
+            opacity={0.6}
+          />
+        );
+      })}
+      {/* Draw phase nodes */}
+      {phases.map(phase => {
+        const pos = posMap[phase.id];
+        if (!pos) return null;
+        return (
+          <PhaseNode
+            key={phase.id}
+            phase={phase}
+            x={pos.x}
+            y={pos.y}
+            width={nodeWidth}
+            height={nodeHeight}
+          />
+        );
+      })}
+    </svg>
+  );
+}
+
+function AgentActivityList({ agents }) {
+  const { tokens } = useTheme();
+  if (!agents || agents.length === 0) {
+    return <p style={{ color: tokens.textMuted, fontSize: 12 }}>No recent agent sessions.</p>;
+  }
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+      {agents.slice(0, 15).map((session, i) => (
+        <div
+          key={i}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 10,
+            padding: '6px 10px',
+            background: tokens.surface || 'rgba(255,255,255,0.04)',
+            borderRadius: 6,
+            fontSize: 12,
+            fontFamily: FONTS.mono,
+          }}
+        >
+          <span
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: '50%',
+              background: session.status === 'success' ? '#22c55e' : session.status === 'failed' ? '#ef4444' : '#f59e0b',
+              flexShrink: 0,
+            }}
+          />
+          <span style={{ flex: 1, color: tokens.text }}>{session.agent}</span>
+          {session.duration != null && (
+            <span style={{ color: tokens.textMuted }}>{session.duration}s</span>
+          )}
+          <span
+            style={{
+              color: session.status === 'success' ? '#22c55e' : session.status === 'failed' ? '#ef4444' : '#f59e0b',
+            }}
+          >
+            {session.status}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function ProgressPage() {
+  const { tokens } = useTheme();
+  const { data, loading, error } = useFetch('/api/progress');
+
+  if (loading) {
+    return (
+      <div style={{ padding: 24, color: tokens.textMuted, fontSize: 13 }}>
+        Loading progress data…
+      </div>
+    );
+  }
+
+  if (error || !data) {
+    return (
+      <div style={{ padding: 24, color: '#ef4444', fontSize: 13 }}>
+        Failed to load progress data: {error?.message || 'Unknown error'}
+      </div>
+    );
+  }
+
+  if (data.enabled === false) {
+    return (
+      <div style={{ padding: 24, color: tokens.textMuted, fontSize: 13 }}>
+        Progress visualization is disabled. Enable <code>features.progress_visualization</code> in config.
+      </div>
+    );
+  }
+
+  const { phases = [], dependencies = [], agentActivity = [], summary = {} } = data;
+
+  return (
+    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 24 }}>
+      {/* Summary stats */}
+      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+        {[
+          { label: 'Total Phases', value: summary.total ?? phases.length },
+          { label: 'Completed', value: summary.completed ?? 0 },
+          { label: 'In Progress', value: summary.inProgress ?? 0 },
+          { label: '% Complete', value: `${summary.percentComplete ?? 0}%` },
+        ].map(stat => (
+          <div
+            key={stat.label}
+            style={{
+              padding: '12px 20px',
+              background: tokens.surface || 'rgba(255,255,255,0.04)',
+              borderRadius: 8,
+              border: `1px solid ${tokens.border || '#2d3748'}`,
+              minWidth: 120,
+            }}
+          >
+            <div style={{ fontSize: 11, color: tokens.textMuted, marginBottom: 4, fontFamily: FONTS.mono }}>
+              {stat.label}
+            </div>
+            <div style={{ fontSize: 22, fontWeight: 700, color: tokens.text }}>
+              {stat.value}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Phase dependency graph */}
+      <div>
+        <h3 style={{ fontSize: 14, fontWeight: 600, color: tokens.text, marginBottom: 12 }}>
+          Phase Dependency Graph
+        </h3>
+        {phases.length > 0 ? (
+          <div style={{ overflowX: 'auto', padding: 8 }}>
+            <DependencyGraph phases={phases} dependencies={dependencies} />
+          </div>
+        ) : (
+          <p style={{ color: tokens.textMuted, fontSize: 12 }}>No phases found in ROADMAP.md.</p>
+        )}
+      </div>
+
+      {/* Agent activity */}
+      <div>
+        <h3 style={{ fontSize: 14, fontWeight: 600, color: tokens.text, marginBottom: 12 }}>
+          Recent Agent Activity
+        </h3>
+        <AgentActivityList agents={agentActivity} />
+      </div>
+    </div>
+  );
+}