@sienklogic/plan-build-run 2.19.0 → 2.19.2

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>
+  );
+}

package/dashboard/src/pages/ResearchPage.jsx

@@ -0,0 +1,129 @@
+import { useEffect } from 'react';
+import { useTheme } from '../theme/ThemeProvider.jsx';
+import { FONTS } from '../lib/constants.js';
+import { Card, MetricCard, SectionTitle, Badge, 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';
+
+const STATUS_COLORS = {
+  collected: '#3b82f6',
+  synthesized: '#8b5cf6',
+  analyzed: '#10b981',
+};
+
+function ResearchPageContent() {
+  const { tokens: t } = useTheme();
+  const { addToast } = useToast();
+
+  const { data, loading, error, refetch } = useFetch('/api/planning/research');
+
+  const wsUrl = 'ws://' + window.location.hostname + ':' + (window.location.port || '3141') + '/ws';
+  const ws = useWebSocket(wsUrl);
+  useDocumentTitle({ wsEvents: ws.events });
+
+  useEffect(() => {
+    if (ws.events.length > 0) {
+      refetch();
+    }
+  }, [ws.events.length, refetch]);
+
+  useEffect(() => {
+    if (error && addToast) addToast('error', error.message);
+  }, [error, addToast]);
+
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 12 }}>
+          {[1, 2, 3].map((i) => (
+            <SkeletonCard key={i} height={90} />
+          ))}
+        </div>
+        <SkeletonCard height={300} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <ErrorBox
+        title="Error loading research"
+        message={error.message}
+        onRetry={refetch}
+      />
+    );
+  }
+
+  const entries = Array.isArray(data) ? data : [];
+  const collected = entries.filter((e) => e.status === 'collected').length;
+  const synthesized = entries.filter((e) => e.status === 'synthesized').length;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <SectionTitle>Research</SectionTitle>
+
+      {/* Metric cards */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 12 }}>
+        <MetricCard label="Documents" value={String(entries.length)} sub="total research" color={t.accent} />
+        <MetricCard label="Collected" value={String(collected)} sub="gathered" color={STATUS_COLORS.collected} />
+        <MetricCard label="Synthesized" value={String(synthesized)} sub="processed" color={STATUS_COLORS.synthesized} />
+      </div>
+
+      {/* Research entries */}
+      {entries.length === 0 ? (
+        <Card>
+          <div style={{ padding: 32, textAlign: 'center', color: t.textMuted, fontFamily: FONTS.mono, fontSize: 12 }}>
+            <div style={{ fontSize: 32, opacity: 0.3, marginBottom: 12 }}>&#x25C8;</div>
+            <div style={{ fontWeight: 600, marginBottom: 6 }}>No research documents</div>
+            <div style={{ fontSize: 11 }}>Research documents appear when .planning/research/ contains files.</div>
+          </div>
+        </Card>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {entries.map((entry, i) => (
+            <Card key={entry.id || i}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
+                <div style={{ fontFamily: FONTS.mono, fontSize: 13, fontWeight: 600, color: t.accent }}>
+                  {entry.title}
+                </div>
+                <div style={{ display: 'flex', gap: 6, flexShrink: 0, marginLeft: 12 }}>
+                  <Badge color={STATUS_COLORS[entry.status] || t.textMuted}>{entry.status}</Badge>
+                  {entry.source && <Badge color={t.build}>{entry.source}</Badge>}
+                </div>
+              </div>
+              {entry.date && (
+                <div style={{ fontFamily: FONTS.mono, fontSize: 11, color: t.textMuted, marginBottom: 6 }}>
+                  {entry.date}
+                </div>
+              )}
+              {entry.summary && (
+                <div style={{
+                  fontFamily: FONTS.sans,
+                  fontSize: 12,
+                  color: t.textMuted,
+                  lineHeight: 1.5,
+                  whiteSpace: 'pre-wrap',
+                  overflow: 'hidden',
+                  maxHeight: 80,
+                }}>
+                  {entry.summary.length > 300 ? entry.summary.slice(0, 300) + '...' : entry.summary}
+                </div>
+              )}
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function ResearchPage() {
+  return (
+    <ErrorBoundary>
+      <ResearchPageContent />
+    </ErrorBoundary>
+  );
+}