@sienklogic/plan-build-run 2.0.2 → 2.1.1

package/dashboard/src/App.jsx

@@ -0,0 +1,147 @@
+import { useState, useEffect, lazy, Suspense } from 'react';
+import { useTheme } from './theme/ThemeProvider.jsx';
+import { FONTS, NAV } from './lib/constants.js';
+import { ErrorBoundary, PBRBanner, SkeletonCard } from './components/ui/index.js';
+import ConnectionBanner from './components/ui/ConnectionBanner.jsx';
+import Sidebar from './components/layout/Sidebar.jsx';
+import Header from './components/layout/Header.jsx';
+
+// Core pages (Phase 26)
+const Overview = lazy(() => import('./pages/Overview.jsx'));
+const LiveFeed = lazy(() => import('./pages/LiveFeed.jsx'));
+const RoadmapPage = lazy(() => import('./pages/RoadmapPage.jsx'));
+
+// Extended pages (Phase 27)
+const HooksPage = lazy(() => import('./pages/HooksPage.jsx'));
+const ConfigPage = lazy(() => import('./pages/ConfigPage.jsx'));
+const PhaseDetailView = lazy(() => import('./pages/PhaseDetailView.jsx'));
+const Telemetry = lazy(() => import('./pages/Telemetry.jsx'));
+const AgentsPage = lazy(() => import('./pages/AgentsPage.jsx'));
+const MemoryPage = lazy(() => import('./pages/MemoryPage.jsx'));
+const PlanningPage = lazy(() => import('./pages/PlanningPage.jsx'));
+
+import useFetch from './hooks/useFetch.js';
+import useWebSocket from './hooks/useWebSocket.js';
+
+export default function App() {
+  const { tokens } = useTheme();
+  const [nav, setNav] = useState('roadmap');
+  const [collapsed, setCollapsed] = useState(false);
+  const [activeProject, setActiveProject] = useState(null);
+  const [selectedPhase, setSelectedPhase] = useState(null);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const wsUrl = 'ws://' + window.location.hostname + ':' + (window.location.port || '3141') + '/ws';
+  const { status: wsStatus } = useWebSocket(wsUrl, {
+    onReconnect: () => setRefreshKey((k) => k + 1),
+  });
+
+  // Reset selectedPhase when nav changes
+  useEffect(() => {
+    setSelectedPhase(null);
+  }, [nav]);
+
+  const { data: projectsData, loading: projectsLoading } = useFetch('/api/projects');
+
+  const projects = projectsData || [];
+
+  // Auto-select first project if none selected
+  const effectiveActiveProject = activeProject || (projects.length > 0 ? projects[0].id : null);
+
+  const currentProject = projects.find((p) => p.id === effectiveActiveProject) || projects[0] || null;
+  const currentNavItem = NAV.find((n) => n.id === nav);
+  const pageTitle = currentNavItem ? currentNavItem.label : 'Overview';
+
+  const sidebarProjects = projectsLoading
+    ? [{ id: '_loading', name: 'Loading...', repo: '', branch: '', status: 'running', sessions: 0 }]
+    : projects;
+
+  const PAGES = {
+    overview: Overview,
+    live: LiveFeed,
+    roadmap: RoadmapPage,
+    // Phase 27 extended pages
+    telemetry: Telemetry,
+    planning: PlanningPage,
+    agents: AgentsPage,
+    memory: MemoryPage,
+    hooks: HooksPage,
+    config: ConfigPage,
+  };
+  const PageComponent = PAGES[nav];
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        height: '100vh',
+        background: tokens.bg,
+        color: tokens.text,
+        fontFamily: FONTS.sans,
+      }}
+    >
+      <ConnectionBanner status={wsStatus} />
+
+      {/* Sidebar */}
+      <Sidebar
+        nav={nav}
+        navItems={NAV}
+        onNav={setNav}
+        collapsed={collapsed}
+        onToggleCollapse={() => setCollapsed((c) => !c)}
+        activeProject={projectsLoading ? '_loading' : effectiveActiveProject}
+        projects={sidebarProjects}
+        onSwitchProject={setActiveProject}
+      />
+
+      {/* Main area */}
+      <div
+        role="main"
+        style={{
+          flex: 1,
+          marginLeft: collapsed ? 52 : 190,
+          transition: 'margin-left 0.2s',
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: '100vh',
+        }}
+      >
+        <Header title={pageTitle} activeProject={currentProject} />
+        <PBRBanner />
+
+        {/* Content */}
+        <div
+          style={{
+            flex: 1,
+            overflowY: 'auto',
+            padding: 20,
+          }}
+        >
+          <ErrorBoundary>
+            <Suspense fallback={<SkeletonCard />}>
+              {nav === 'roadmap' && selectedPhase ? (
+                <PhaseDetailView
+                  key={refreshKey}
+                  phase={selectedPhase}
+                  onBack={() => setSelectedPhase(null)}
+                />
+              ) : PageComponent ? (
+                <PageComponent
+                  key={refreshKey}
+                  project={currentProject}
+                  {...(nav === 'roadmap' ? { onSelectPhase: setSelectedPhase } : {})}
+                />
+              ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: 300, gap: 12 }}>
+                  <div style={{ fontSize: 40, opacity: 0.3 }}>{currentNavItem?.icon || '\u25C8'}</div>
+                  <div style={{ fontSize: 16, fontWeight: 600, color: tokens.text }}>{pageTitle}</div>
+                  <div style={{ fontSize: 12, color: tokens.textMuted, fontFamily: FONTS.mono }}>Coming soon</div>
+                </div>
+              )}
+            </Suspense>
+          </ErrorBoundary>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dashboard/src/components/charts/BudgetBars.jsx

@@ -0,0 +1,42 @@
+import {
+  BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer,
+} from 'recharts';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+import ChartTooltip from '../ui/ChartTooltip.jsx';
+
+export default function BudgetBars({ data, height = 220 }) {
+  const { tokens: t } = useTheme();
+
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <BarChart
+        data={data}
+        layout="vertical"
+        margin={{ top: 4, right: 12, bottom: 0, left: 0 }}
+      >
+        <XAxis
+          type="number"
+          tick={{ fill: t.textMuted, fontSize: 10, fontFamily: FONTS.mono }}
+          axisLine={{ stroke: t.border }}
+          tickLine={false}
+        />
+        <YAxis
+          type="category"
+          dataKey="name"
+          tick={{ fill: t.textMuted, fontSize: 10, fontFamily: FONTS.mono }}
+          axisLine={false}
+          tickLine={false}
+          width={80}
+        />
+        <Tooltip content={<ChartTooltip />} />
+        <Bar
+          dataKey="value"
+          fill={t.accent}
+          radius={[0, 4, 4, 0]}
+          name="Budget"
+        />
+      </BarChart>
+    </ResponsiveContainer>
+  );
+}

package/dashboard/src/components/charts/ContextRadar.jsx

@@ -0,0 +1,34 @@
+import {
+  RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis,
+  ResponsiveContainer,
+} from 'recharts';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function ContextRadar({ data, height = 220 }) {
+  const { tokens: t } = useTheme();
+
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <RadarChart data={data} cx="50%" cy="50%" outerRadius="75%">
+        <PolarGrid stroke={t.border} />
+        <PolarAngleAxis
+          dataKey="name"
+          tick={{ fill: t.textMuted, fontSize: 10, fontFamily: FONTS.mono }}
+        />
+        <PolarRadiusAxis
+          tick={{ fill: t.textDim, fontSize: 9, fontFamily: FONTS.mono }}
+          axisLine={false}
+        />
+        <Radar
+          dataKey="value"
+          stroke={t.accent}
+          fill={t.accent}
+          fillOpacity={0.2}
+          strokeWidth={2}
+          name="Context"
+        />
+      </RadarChart>
+    </ResponsiveContainer>
+  );
+}

package/dashboard/src/components/charts/PhaseDonut.jsx

@@ -0,0 +1,66 @@
+import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function PhaseDonut({ data, height = 220 }) {
+  const { tokens: t } = useTheme();
+
+  const fills = [t.plan, t.build, t.run];
+
+  return (
+    <div>
+      <ResponsiveContainer width="100%" height={height}>
+        <PieChart>
+          <Pie
+            data={data}
+            dataKey="value"
+            nameKey="name"
+            cx="50%"
+            cy="50%"
+            innerRadius="55%"
+            outerRadius="80%"
+            paddingAngle={2}
+            stroke="none"
+          >
+            {(data || []).map((_entry, i) => (
+              <Cell key={i} fill={fills[i % fills.length]} />
+            ))}
+          </Pie>
+        </PieChart>
+      </ResponsiveContainer>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          gap: 16,
+          marginTop: 4,
+        }}
+      >
+        {(data || []).map((entry, i) => (
+          <div
+            key={i}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              fontFamily: FONTS.mono,
+              fontSize: 11,
+              color: t.textMuted,
+            }}
+          >
+            <span
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: '50%',
+                background: fills[i % fills.length],
+                display: 'inline-block',
+              }}
+            />
+            {entry.name}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/dashboard/src/components/charts/SuccessTrend.jsx

@@ -0,0 +1,45 @@
+import {
+  LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer,
+} from 'recharts';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+import ChartTooltip from '../ui/ChartTooltip.jsx';
+
+function pctFormatter(v) {
+  return `${v}%`;
+}
+
+export default function SuccessTrend({ data, height = 220 }) {
+  const { tokens: t } = useTheme();
+
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <LineChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: 0 }}>
+        <XAxis
+          dataKey="name"
+          tick={{ fill: t.textMuted, fontSize: 10, fontFamily: FONTS.mono }}
+          axisLine={{ stroke: t.border }}
+          tickLine={false}
+        />
+        <YAxis
+          domain={[60, 100]}
+          tickFormatter={pctFormatter}
+          tick={{ fill: t.textMuted, fontSize: 10, fontFamily: FONTS.mono }}
+          axisLine={false}
+          tickLine={false}
+          width={42}
+        />
+        <Tooltip content={<ChartTooltip />} />
+        <Line
+          type="monotone"
+          dataKey="rate"
+          stroke={t.success}
+          strokeWidth={2}
+          dot={{ r: 3, fill: t.success }}
+          activeDot={{ r: 5 }}
+          name="Success"
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}

package/dashboard/src/components/charts/TokenChart.jsx

@@ -0,0 +1,55 @@
+import {
+  AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer,
+} from 'recharts';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+import ChartTooltip from '../ui/ChartTooltip.jsx';
+
+export default function TokenChart({ data, height = 220 }) {
+  const { tokens: t } = useTheme();
+
+  const gradientId = 'tokenInputGrad';
+
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <AreaChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: 0 }}>
+        <defs>
+          <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor={t.accent} stopOpacity={0.3} />
+            <stop offset="100%" stopColor={t.accent} stopOpacity={0.02} />
+          </linearGradient>
+        </defs>
+        <XAxis
+          dataKey="name"
+          tick={{ fill: t.textMuted, fontSize: 10, fontFamily: FONTS.mono }}
+          axisLine={{ stroke: t.border }}
+          tickLine={false}
+        />
+        <YAxis
+          tick={{ fill: t.textMuted, fontSize: 10, fontFamily: FONTS.mono }}
+          axisLine={false}
+          tickLine={false}
+          width={48}
+        />
+        <Tooltip content={<ChartTooltip />} />
+        <Area
+          type="monotone"
+          dataKey="input"
+          stroke={t.accent}
+          fill={`url(#${gradientId})`}
+          strokeWidth={2}
+          name="Input"
+        />
+        <Area
+          type="monotone"
+          dataKey="output"
+          stroke={t.info}
+          fill="none"
+          strokeWidth={2}
+          strokeDasharray="6 3"
+          name="Output"
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}

package/dashboard/src/components/charts/index.js

@@ -0,0 +1,5 @@
+export { default as TokenChart } from './TokenChart.jsx';
+export { default as PhaseDonut } from './PhaseDonut.jsx';
+export { default as SuccessTrend } from './SuccessTrend.jsx';
+export { default as ContextRadar } from './ContextRadar.jsx';
+export { default as BudgetBars } from './BudgetBars.jsx';

package/dashboard/src/components/config/CfgSection.jsx

@@ -0,0 +1,93 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+import { Card, SectionTitle, Toggle, SelectInput, NumberInput, TextInput } from '../ui';
+
+export default function CfgSection({ title, sub, section, fields, config, onChange, errors = {} }) {
+  const { tokens } = useTheme();
+
+  const renderField = (field) => {
+    const raw = section === '_root' ? config[field.key] : config[section]?.[field.key];
+    const value = raw !== undefined ? raw : (field.type === 'toggle' ? false : field.type === 'number' ? 0 : '');
+    const errorKey = `${section}.${field.key}`;
+    const error = errors[errorKey];
+
+    let input = null;
+    switch (field.type) {
+      case 'toggle':
+        input = (
+          <Toggle
+            checked={value}
+            onChange={(v) => onChange(section, field.key, v)}
+            label={field.label}
+          />
+        );
+        break;
+      case 'select':
+        input = (
+          <SelectInput
+            value={value}
+            options={field.options}
+            onChange={(v) => onChange(section, field.key, v)}
+            label={field.label}
+          />
+        );
+        break;
+      case 'number':
+        input = (
+          <NumberInput
+            value={value}
+            onChange={(v) => onChange(section, field.key, v)}
+            label={field.label}
+            min={field.min}
+            max={field.max}
+            step={field.step}
+          />
+        );
+        break;
+      case 'text':
+        input = (
+          <TextInput
+            value={value}
+            onChange={(v) => onChange(section, field.key, v)}
+            label={field.label}
+            placeholder={field.placeholder}
+          />
+        );
+        break;
+      default:
+        break;
+    }
+
+    return (
+      <div key={field.key} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {input}
+        {error && (
+          <span style={{
+            fontFamily: FONTS.mono,
+            fontSize: 10,
+            color: tokens.error,
+            paddingLeft: 4,
+          }}>
+            {error}
+          </span>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Card>
+      <SectionTitle title={title} sub={sub} />
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))',
+          gap: 14,
+          fontFamily: FONTS.sans,
+        }}
+      >
+        {fields.map(renderField)}
+      </div>
+    </Card>
+  );
+}

package/dashboard/src/components/layout/Header.jsx

@@ -0,0 +1,89 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function Header({ title, activeProject }) {
+  const { themeName, tokens: t, toggleTheme } = useTheme();
+
+  return (
+    <div
+      style={{
+        position: 'sticky',
+        top: 0,
+        zIndex: 10,
+        background: t.surface,
+        borderBottom: `1px solid ${t.border}`,
+        padding: '12px 20px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      {/* Left: page title */}
+      <div
+        style={{
+          fontFamily: FONTS.sans,
+          fontSize: 15,
+          fontWeight: 700,
+          color: t.text,
+        }}
+      >
+        {title}
+      </div>
+
+      {/* Right: project badge, theme toggle, status indicator */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+        {/* Project badge */}
+        {activeProject && (
+          <span
+            style={{
+              fontFamily: FONTS.mono,
+              fontSize: 10,
+              background: t.surfaceAlt,
+              border: `1px solid ${t.border}`,
+              borderRadius: 6,
+              padding: '3px 8px',
+              color: t.accent,
+            }}
+          >
+            {activeProject.name}
+          </span>
+        )}
+
+        {/* Theme toggle */}
+        <button
+          onClick={toggleTheme}
+          style={{
+            width: 28,
+            height: 28,
+            borderRadius: '50%',
+            background: t.surfaceAlt,
+            border: `1px solid ${t.border}`,
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: 14,
+            color: t.text,
+            padding: 0,
+          }}
+          aria-label={`Switch to ${themeName === 'dark' ? 'light' : 'dark'} theme`}
+          title={`Switch to ${themeName === 'dark' ? 'light' : 'dark'} theme`}
+        >
+          {themeName === 'dark' ? '\u2600' : '\uD83C\uDF19'}
+        </button>
+
+        {/* Status indicator */}
+        <div
+          style={{
+            width: 8,
+            height: 8,
+            borderRadius: '50%',
+            background: t.success,
+            boxShadow: `0 0 8px ${t.success}`,
+            animation: 'pulse 2s infinite',
+          }}
+        />
+      </div>
+    </div>
+  );
+}