@sienklogic/plan-build-run 2.12.0 → 2.12.1

package/dashboard/src/components/ui/NextUpBlock.jsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function NextUpBlock({ command, phaseLink, phaseName }) {
+  const { tokens: t } = useTheme();
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    if (command) {
+      navigator.clipboard.writeText(command).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      });
+    }
+  };
+
+  return (
+    <div
+      style={{
+        background: t.surfaceAlt,
+        borderRadius: 8,
+        padding: '12px 16px',
+      }}
+    >
+      <div
+        style={{
+          fontFamily: FONTS.mono,
+          fontSize: 10,
+          color: t.textMuted,
+          textTransform: 'uppercase',
+          letterSpacing: 1.5,
+          marginBottom: 8,
+        }}
+      >
+        Next Up
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+        }}
+      >
+        <code
+          style={{
+            flex: 1,
+            fontFamily: FONTS.mono,
+            fontSize: 13,
+            color: t.accent,
+            background: `${t.accent}12`,
+            padding: '6px 10px',
+            borderRadius: 4,
+            border: `1px solid ${t.accent}33`,
+          }}
+        >
+          {command}
+        </code>
+        <button
+          onClick={handleCopy}
+          style={{
+            background: 'transparent',
+            border: `1px solid ${t.border}`,
+            borderRadius: 4,
+            padding: '5px 10px',
+            fontFamily: FONTS.mono,
+            fontSize: 11,
+            color: copied ? t.success : t.textMuted,
+            cursor: 'pointer',
+          }}
+        >
+          {copied ? 'Copied' : 'Copy'}
+        </button>
+      </div>
+
+      {phaseLink && phaseName && (
+        <div
+          style={{
+            marginTop: 8,
+            fontFamily: FONTS.mono,
+            fontSize: 11,
+            color: t.textMuted,
+            cursor: 'pointer',
+          }}
+        >
+          View {phaseName} &gt;
+        </div>
+      )}
+    </div>
+  );
+}

package/dashboard/src/components/ui/NumberInput.jsx

@@ -0,0 +1,44 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function NumberInput({ value, onChange, label, min, max, step, theme }) {
+  const ctx = useTheme();
+  const t = theme || (ctx && ctx.tokens);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+      {label && (
+        <span
+          style={{
+            fontSize: 10,
+            color: t.textMuted,
+            fontFamily: FONTS.mono,
+            textTransform: 'uppercase',
+            letterSpacing: 1,
+          }}
+        >
+          {label}
+        </span>
+      )}
+      <input
+        type="number"
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        onChange={(e) => onChange(Number(e.target.value))}
+        style={{
+          background: t.surfaceAlt,
+          border: `1px solid ${t.border}`,
+          borderRadius: 6,
+          color: t.text,
+          fontFamily: FONTS.mono,
+          fontSize: 12,
+          padding: '5px 8px',
+          outline: 'none',
+          width: 100,
+        }}
+      />
+    </div>
+  );
+}

package/dashboard/src/components/ui/PBRBanner.jsx

@@ -0,0 +1,47 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+import useFetch from '../../hooks/useFetch.js';
+
+function deriveStage(str) {
+  if (!str) return null;
+  const s = str.toLowerCase();
+  if (s.includes('build')) return 'Build';
+  if (s.includes('plan')) return 'Plan';
+  if (s.includes('review')) return 'Review';
+  if (s.includes('roadmap')) return 'Roadmap';
+  if (s.includes('research')) return 'Research';
+  if (s.includes('requirement')) return 'Requirements';
+  if (s.includes('question')) return 'Questioning';
+  return 'Build';
+}
+
+export default function PBRBanner() {
+  const { tokens: t } = useTheme();
+  const { data } = useFetch('/api/status');
+
+  if (!data) return null;
+
+  const stoppedAt = data.stopped_at || data.status || '';
+  const stage = deriveStage(stoppedAt);
+
+  if (!stage) return null;
+
+  return (
+    <div
+      style={{
+        background: t.surface,
+        borderBottom: `1px solid ${t.border}`,
+        padding: '6px 16px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 6,
+        fontFamily: FONTS.mono,
+        fontSize: 12,
+      }}
+    >
+      <span style={{ color: t.accent, fontWeight: 700 }}>PBR</span>
+      <span style={{ color: t.textDim }}>&gt;</span>
+      <span style={{ color: t.text, fontWeight: 700 }}>{stage}</span>
+    </div>
+  );
+}

package/dashboard/src/components/ui/PipelineView.jsx

@@ -0,0 +1,130 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+const DEFAULT_STAGES = [
+  { id: 'questioning', label: 'Question', status: 'pending' },
+  { id: 'research', label: 'Research', status: 'pending' },
+  { id: 'requirements', label: 'Requirements', status: 'pending' },
+  { id: 'roadmap', label: 'Roadmap', status: 'pending' },
+  { id: 'plan', label: 'Plan', status: 'pending' },
+  { id: 'build', label: 'Build', status: 'pending' },
+  { id: 'review', label: 'Review', status: 'pending' },
+];
+
+const SYMBOLS = {
+  done: '\u2713',      // checkmark
+  active: '\u25C6',    // filled diamond
+  pending: '\u25CB',   // empty circle
+};
+
+function stageSymbol(status) {
+  return SYMBOLS[status] || SYMBOLS.pending;
+}
+
+export default function PipelineView({ stages, currentStage }) {
+  const { tokens: t } = useTheme();
+  const stageList = stages && stages.length > 0 ? stages : DEFAULT_STAGES;
+
+  // If currentStage is provided, override statuses based on position
+  const resolved = currentStage
+    ? stageList.map((s, i) => {
+        const currentIdx = stageList.findIndex((st) => st.id === currentStage);
+        if (currentIdx < 0) return s;
+        if (i < currentIdx) return { ...s, status: 'done' };
+        if (i === currentIdx) return { ...s, status: 'active' };
+        return { ...s, status: 'pending' };
+      })
+    : stageList;
+
+  function stageColor(status) {
+    if (status === 'done') return t.success;
+    if (status === 'active') return t.accent;
+    return t.textDim;
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: 0,
+      }}
+    >
+      {resolved.map((stage, i) => {
+        const color = stageColor(stage.status);
+        const isActive = stage.status === 'active';
+        const lineDone = i < resolved.length - 1 && resolved[i].status === 'done';
+
+        return (
+          <div
+            key={stage.id}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            {/* Stage node */}
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                minWidth: 56,
+              }}
+            >
+              <div
+                style={{
+                  width: 28,
+                  height: 28,
+                  borderRadius: '50%',
+                  border: `2px solid ${color}`,
+                  background: isActive ? `${color}22` : 'transparent',
+                  boxShadow: isActive ? `0 0 10px ${color}44` : 'none',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: 13,
+                  fontWeight: 700,
+                  color: color,
+                  fontFamily: FONTS.sans,
+                  transition: 'all 0.3s',
+                }}
+              >
+                {stageSymbol(stage.status)}
+              </div>
+              <span
+                style={{
+                  marginTop: 4,
+                  fontFamily: FONTS.mono,
+                  fontSize: 9,
+                  color: isActive ? t.accent : t.textMuted,
+                  fontWeight: isActive ? 700 : 400,
+                  textTransform: 'uppercase',
+                  letterSpacing: 0.5,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {stage.label}
+              </span>
+            </div>
+
+            {/* Connecting line */}
+            {i < resolved.length - 1 && (
+              <div
+                style={{
+                  width: 24,
+                  height: 2,
+                  background: lineDone ? t.success : t.textDim,
+                  borderStyle: lineDone ? 'solid' : 'dashed',
+                  opacity: lineDone ? 1 : 0.4,
+                  marginBottom: 16,
+                }}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/dashboard/src/components/ui/ProgressBar.jsx

@@ -0,0 +1,28 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+
+export default function ProgressBar({ pct, color, theme, height }) {
+  const ctx = useTheme();
+  const t = theme || ctx.tokens;
+  const h = height || 6;
+
+  return (
+    <div
+      style={{
+        height: h,
+        background: t.surfaceAlt,
+        borderRadius: h / 2,
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          height: '100%',
+          width: `${Math.min(pct, 100)}%`,
+          background: color || t.accent,
+          borderRadius: h / 2,
+          transition: 'width 0.4s',
+        }}
+      />
+    </div>
+  );
+}

package/dashboard/src/components/ui/ProgressDisplay.jsx

@@ -0,0 +1,47 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+import ProgressBar from './ProgressBar.jsx';
+
+export default function ProgressDisplay({ label, value, total, sub, color }) {
+  const { tokens: t } = useTheme();
+  const pct = total > 0 ? Math.round((value / total) * 100) : 0;
+  const barColor = color || t.accent;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6,
+        padding: '12px 16px',
+        background: t.surface,
+        border: `1px solid ${t.border}`,
+        borderRadius: 10,
+      }}
+    >
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
+        <span
+          style={{
+            fontFamily: FONTS.mono,
+            fontSize: 10,
+            color: t.textMuted,
+            textTransform: 'uppercase',
+            letterSpacing: 1,
+            fontWeight: 600,
+          }}
+        >
+          {label}
+        </span>
+        <span style={{ fontFamily: FONTS.mono, fontSize: 12, color: t.text, fontWeight: 700 }}>
+          {value.toLocaleString()} / {total.toLocaleString()} ({pct}%)
+        </span>
+      </div>
+      <ProgressBar pct={pct} color={barColor} />
+      {sub && (
+        <span style={{ fontFamily: FONTS.mono, fontSize: 10, color: t.textDim }}>
+          {sub}
+        </span>
+      )}
+    </div>
+  );
+}

package/dashboard/src/components/ui/QualityGateBadge.jsx

@@ -0,0 +1,15 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import Badge from './Badge.jsx';
+
+export default function QualityGateBadge({ passed }) {
+  const { tokens: t } = useTheme();
+  const color = passed ? t.success : t.error;
+  const symbol = passed ? '\u2713' : '\u2717';
+  const label = passed ? 'Passed' : 'Failed';
+
+  return (
+    <Badge color={color}>
+      {symbol} {label}
+    </Badge>
+  );
+}

package/dashboard/src/components/ui/SectionTitle.jsx

@@ -0,0 +1,35 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function SectionTitle({ children, sub, theme }) {
+  const ctx = useTheme();
+  const t = theme || ctx.tokens;
+
+  return (
+    <div style={{ marginBottom: 12 }}>
+      <h3
+        style={{
+          fontSize: 13,
+          fontWeight: 600,
+          color: t.text,
+          fontFamily: FONTS.sans,
+          margin: 0,
+        }}
+      >
+        {children}
+      </h3>
+      {sub && (
+        <div
+          style={{
+            fontSize: 10,
+            color: t.textMuted,
+            fontFamily: FONTS.mono,
+            marginTop: 2,
+          }}
+        >
+          {sub}
+        </div>
+      )}
+    </div>
+  );
+}

package/dashboard/src/components/ui/SelectInput.jsx

@@ -0,0 +1,45 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function SelectInput({ value, options, onChange, label, theme }) {
+  const ctx = useTheme();
+  const t = theme || (ctx && ctx.tokens);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+      {label && (
+        <span
+          style={{
+            fontSize: 10,
+            color: t.textMuted,
+            fontFamily: FONTS.mono,
+            textTransform: 'uppercase',
+            letterSpacing: 1,
+          }}
+        >
+          {label}
+        </span>
+      )}
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        style={{
+          background: t.surfaceAlt,
+          border: `1px solid ${t.border}`,
+          borderRadius: 6,
+          color: t.text,
+          fontFamily: FONTS.mono,
+          fontSize: 12,
+          padding: '5px 8px',
+          outline: 'none',
+        }}
+      >
+        {options.map((o) => (
+          <option key={o} value={o}>
+            {o}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

package/dashboard/src/components/ui/StatusDot.jsx

@@ -0,0 +1,51 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+const STATUS_COLORS = {
+  success: 'success',
+  done: 'success',
+  failed: 'error',
+  error: 'error',
+  running: 'warning',
+  'in-progress': 'warning',
+  todo: 'textDim',
+  reviewed: 'info',
+  integrated: 'success',
+  warn: 'warning',
+  info: 'info',
+};
+
+export default function StatusDot({ status, theme }) {
+  const ctx = useTheme();
+  const t = theme || ctx.tokens;
+  const colorKey = STATUS_COLORS[status] || 'textDim';
+  const c = t[colorKey];
+  const isRunning = status === 'running';
+
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+      <span
+        style={{
+          width: 7,
+          height: 7,
+          borderRadius: '50%',
+          background: c,
+          boxShadow: isRunning ? `0 0 8px ${c}` : 'none',
+          animation: isRunning ? 'pulse 2s infinite' : 'none',
+        }}
+      />
+      <span
+        style={{
+          fontFamily: FONTS.mono,
+          fontSize: 10,
+          color: c,
+          textTransform: 'uppercase',
+          letterSpacing: 0.7,
+          fontWeight: 600,
+        }}
+      >
+        {status}
+      </span>
+    </span>
+  );
+}

package/dashboard/src/components/ui/StatusSymbol.jsx

@@ -0,0 +1,49 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+const SYMBOL_MAP = {
+  done: { char: '\u2713', colorKey: 'success' },       // checkmark
+  active: { char: '\u25C6', colorKey: 'accent' },      // filled diamond
+  pending: { char: '\u25CB', colorKey: 'textDim' },    // empty circle
+  failed: { char: '\u2717', colorKey: 'error' },       // cross
+  blocked: { char: '\u2717', colorKey: 'error' },      // cross
+  milestone: { char: '\u2605', colorKey: 'warning' },  // star
+};
+
+const DEFAULT_SYMBOL = { char: '\u25CB', colorKey: 'textDim' };
+
+export default function StatusSymbol({ status, size, showLabel }) {
+  const { tokens: t } = useTheme();
+  const sz = size || 16;
+  const { char, colorKey } = SYMBOL_MAP[status] || DEFAULT_SYMBOL;
+  const color = t[colorKey];
+
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+      <span
+        style={{
+          fontSize: sz,
+          lineHeight: 1,
+          color: color,
+          fontWeight: 700,
+        }}
+      >
+        {char}
+      </span>
+      {showLabel && (
+        <span
+          style={{
+            fontFamily: FONTS.mono,
+            fontSize: Math.max(sz * 0.65, 9),
+            color: color,
+            textTransform: 'uppercase',
+            letterSpacing: 0.7,
+            fontWeight: 600,
+          }}
+        >
+          {status}
+        </span>
+      )}
+    </span>
+  );
+}

package/dashboard/src/components/ui/TabBar.jsx

@@ -0,0 +1,41 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function TabBar({ tabs, active, onChange, theme }) {
+  const ctx = useTheme();
+  const t = theme || (ctx && ctx.tokens);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: 2,
+        background: t.surfaceAlt,
+        borderRadius: 8,
+        padding: 3,
+        flexWrap: 'wrap',
+      }}
+    >
+      {tabs.map((tab) => (
+        <button
+          key={tab}
+          onClick={() => onChange(tab)}
+          style={{
+            padding: '5px 11px',
+            borderRadius: 6,
+            border: 'none',
+            cursor: 'pointer',
+            background: active === tab ? t.surface : 'transparent',
+            color: active === tab ? t.accent : t.textMuted,
+            fontFamily: FONTS.mono,
+            fontSize: 11,
+            fontWeight: active === tab ? 600 : 400,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {tab}
+        </button>
+      ))}
+    </div>
+  );
+}

package/dashboard/src/components/ui/TextInput.jsx

@@ -0,0 +1,42 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function TextInput({ value, onChange, label, placeholder, theme }) {
+  const ctx = useTheme();
+  const t = theme || (ctx && ctx.tokens);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+      {label && (
+        <span
+          style={{
+            fontSize: 10,
+            color: t.textMuted,
+            fontFamily: FONTS.mono,
+            textTransform: 'uppercase',
+            letterSpacing: 1,
+          }}
+        >
+          {label}
+        </span>
+      )}
+      <input
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+        style={{
+          background: t.surfaceAlt,
+          border: `1px solid ${t.border}`,
+          borderRadius: 6,
+          color: t.text,
+          fontFamily: FONTS.mono,
+          fontSize: 12,
+          padding: '5px 8px',
+          outline: 'none',
+          minWidth: 140,
+        }}
+      />
+    </div>
+  );
+}