@sienklogic/plan-build-run 2.0.2 → 2.1.1

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

@@ -0,0 +1,160 @@
+import { useState, useEffect, useRef } from 'react';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+import { StatusDot } from '../ui/index.js';
+
+export default function ProjectSwitcher({ collapsed, activeProject, projects, onSwitch }) {
+  const { tokens: t } = useTheme();
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  const current = projects.find((p) => p.id === activeProject) || projects[0];
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  if (collapsed) {
+    return (
+      <div style={{ padding: '8px 0', display: 'flex', justifyContent: 'center' }}>
+        <button
+          onClick={() => setOpen(!open)}
+          style={{
+            width: 32,
+            height: 32,
+            borderRadius: 8,
+            background: t.surfaceAlt,
+            border: `1px solid ${t.border}`,
+            color: t.textMuted,
+            cursor: 'pointer',
+            fontSize: 14,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {'\u25C6'}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={ref} style={{ position: 'relative', padding: '8px 12px' }}>
+      <button
+        onClick={() => setOpen(!open)}
+        style={{
+          width: '100%',
+          background: t.surfaceAlt,
+          border: `1px solid ${t.border}`,
+          borderRadius: 8,
+          padding: 8,
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          textAlign: 'left',
+        }}
+      >
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontSize: 12,
+              fontWeight: 600,
+              color: t.text,
+              fontFamily: FONTS.sans,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {current.name}
+          </div>
+          <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: t.textDim }}>
+            {current.branch}
+          </div>
+        </div>
+        <StatusDot status={current.status} />
+        <span style={{ color: t.textDim, fontSize: 10 }}>{open ? '\u25B2' : '\u25BC'}</span>
+      </button>
+
+      {open && (
+        <div
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: 12,
+            right: 12,
+            background: t.surface,
+            border: `1px solid ${t.border}`,
+            borderRadius: 8,
+            boxShadow: `0 8px 24px ${t.shadow}`,
+            zIndex: 50,
+            maxHeight: 260,
+            overflowY: 'auto',
+            marginTop: 4,
+          }}
+        >
+          {projects.map((proj) => (
+            <div
+              key={proj.id}
+              onClick={() => {
+                onSwitch(proj.id);
+                setOpen(false);
+              }}
+              style={{
+                padding: 8,
+                cursor: 'pointer',
+                background: 'transparent',
+                borderLeft: proj.id === activeProject ? `3px solid ${t.accent}` : '3px solid transparent',
+                transition: 'background 0.15s',
+              }}
+              onMouseEnter={(e) => { e.currentTarget.style.background = t.surfaceAlt; }}
+              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
+            >
+              <div
+                style={{
+                  fontSize: 12,
+                  fontWeight: 600,
+                  color: t.text,
+                  fontFamily: FONTS.sans,
+                  marginBottom: 2,
+                }}
+              >
+                {proj.name}
+              </div>
+              <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: t.textDim, marginBottom: 4 }}>
+                {proj.repo}
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span
+                  style={{
+                    fontFamily: FONTS.mono,
+                    fontSize: 10,
+                    color: t.accent,
+                    background: `${t.accent}18`,
+                    padding: '1px 5px',
+                    borderRadius: 4,
+                  }}
+                >
+                  {proj.branch}
+                </span>
+                <span style={{ fontFamily: FONTS.mono, fontSize: 10, color: t.textMuted }}>
+                  {proj.sessions} sessions
+                </span>
+                <StatusDot status={proj.status} />
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,161 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+import ProjectSwitcher from './ProjectSwitcher.jsx';
+
+const VERSION = '2.15.0';
+
+export default function Sidebar({
+  nav,
+  navItems,
+  onNav,
+  collapsed,
+  onToggleCollapse,
+  activeProject,
+  projects,
+  onSwitchProject,
+}) {
+  const { tokens: t } = useTheme();
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        width: collapsed ? 52 : 190,
+        height: '100vh',
+        background: t.surface,
+        borderRight: `1px solid ${t.border}`,
+        display: 'flex',
+        flexDirection: 'column',
+        transition: 'width 0.2s',
+        zIndex: 20,
+        overflow: 'hidden',
+      }}
+    >
+      {/* Logo */}
+      <button
+        onClick={onToggleCollapse}
+        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        style={{
+          padding: collapsed ? '14px 12px' : '14px 16px',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10,
+          userSelect: 'none',
+          background: 'none',
+          border: 'none',
+          width: '100%',
+          textAlign: 'left',
+        }}
+      >
+        <div
+          style={{
+            width: 28,
+            height: 28,
+            borderRadius: 7,
+            background: `linear-gradient(135deg, ${t.plan}, ${t.build}, ${t.run})`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            color: '#fff',
+            fontSize: 11,
+            fontWeight: 800,
+            fontFamily: FONTS.mono,
+          }}
+        >
+          P
+        </div>
+        {!collapsed && (
+          <div>
+            <div style={{ fontSize: 14, fontWeight: 700, color: t.text, fontFamily: FONTS.sans }}>
+              PBR
+            </div>
+            <div style={{ fontSize: 9, color: t.textDim, fontFamily: FONTS.mono }}>
+              v{VERSION}
+            </div>
+          </div>
+        )}
+      </button>
+
+      {/* Project Switcher */}
+      <ProjectSwitcher
+        collapsed={collapsed}
+        activeProject={activeProject}
+        projects={projects}
+        onSwitch={onSwitchProject}
+      />
+
+      {/* Nav Items */}
+      <nav
+        aria-label="Main navigation"
+        style={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+          overflowY: 'auto',
+          padding: 8,
+        }}
+      >
+        {navItems.map((item) => {
+          const active = nav === item.id;
+          return (
+            <button
+              key={item.id}
+              onClick={() => onNav(item.id)}
+              aria-current={active ? 'page' : undefined}
+              aria-label={collapsed ? item.label : undefined}
+              style={{
+                padding: collapsed ? '8px 0' : '8px 12px',
+                borderRadius: 8,
+                cursor: 'pointer',
+                background: active ? t.surfaceAlt : 'transparent',
+                color: active ? t.accent : t.textMuted,
+                fontWeight: active ? 600 : 400,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 10,
+                justifyContent: collapsed ? 'center' : 'flex-start',
+                transition: 'background 0.15s, color 0.15s',
+                border: 'none',
+                width: '100%',
+                textAlign: 'left',
+                font: 'inherit',
+              }}
+              onMouseEnter={(e) => {
+                if (!active) e.currentTarget.style.background = t.surfaceAlt;
+              }}
+              onMouseLeave={(e) => {
+                if (!active) e.currentTarget.style.background = 'transparent';
+              }}
+            >
+              <span style={{ fontSize: 16, width: 16, textAlign: 'center', flexShrink: 0 }}>
+                {item.icon}
+              </span>
+              {!collapsed && (
+                <span style={{ fontFamily: FONTS.sans, fontSize: 12 }}>{item.label}</span>
+              )}
+            </button>
+          );
+        })}
+      </nav>
+
+      {/* Footer */}
+      {!collapsed && (
+        <div
+          style={{
+            padding: 12,
+            borderTop: `1px solid ${t.border}`,
+          }}
+        >
+          <div style={{ fontFamily: FONTS.mono, fontSize: 9, color: t.textDim }}>
+            {projects.find((p) => p.id === activeProject)?.repo || 'No project'}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,138 @@
+import { useState, useEffect } from 'react';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+function elapsedSince(startedAt) {
+  if (!startedAt) return '';
+  const ms = Date.now() - new Date(startedAt).getTime();
+  const sec = Math.floor(ms / 1000);
+  if (sec < 60) return `${sec}s`;
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ${sec % 60}s`;
+  const hr = Math.floor(min / 60);
+  return `${hr}h ${min % 60}m`;
+}
+
+export default function AutoModeBanner({ autoMode }) {
+  const { tokens: t } = useTheme();
+  const [elapsed, setElapsed] = useState('');
+
+  useEffect(() => {
+    if (!autoMode || !autoMode.active || !autoMode.startedAt) return;
+    setElapsed(elapsedSince(autoMode.startedAt)); // eslint-disable-line react-hooks/set-state-in-effect -- initial value before interval subscription
+    const interval = setInterval(() => {
+      setElapsed(elapsedSince(autoMode.startedAt));
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [autoMode]);
+
+  if (!autoMode || !autoMode.active) return null;
+
+  const completed = autoMode.completedStages || [];
+
+  return (
+    <div
+      style={{
+        background: `${t.accent}18`,
+        border: `1px solid ${t.accent}44`,
+        borderRadius: 10,
+        padding: '10px 16px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 16,
+        flexWrap: 'wrap',
+      }}
+    >
+      {/* Auto mode label with pulse */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span
+          style={{
+            width: 8,
+            height: 8,
+            borderRadius: '50%',
+            background: t.accent,
+            boxShadow: `0 0 8px ${t.accent}`,
+            animation: 'pulse 2s infinite',
+          }}
+        />
+        <span
+          style={{
+            fontFamily: FONTS.mono,
+            fontSize: 11,
+            fontWeight: 700,
+            color: t.accent,
+            textTransform: 'uppercase',
+            letterSpacing: 1,
+          }}
+        >
+          Auto Mode
+        </span>
+      </div>
+
+      {/* Current stage */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+        <span style={{ fontFamily: FONTS.sans, fontSize: 13, color: t.textMuted }}>
+          Stage:
+        </span>
+        <span
+          style={{
+            fontFamily: FONTS.sans,
+            fontSize: 13,
+            fontWeight: 700,
+            color: t.text,
+          }}
+        >
+          {autoMode.currentStage}
+        </span>
+      </div>
+
+      {/* Completed mini pipeline */}
+      {completed.length > 0 && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+          {completed.map((s) => (
+            <span
+              key={s}
+              style={{
+                fontFamily: FONTS.mono,
+                fontSize: 9,
+                color: t.success,
+                background: `${t.success}18`,
+                padding: '1px 5px',
+                borderRadius: 3,
+                textTransform: 'uppercase',
+              }}
+            >
+              {s}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Next stage preview */}
+      {autoMode.nextStage && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+          <span style={{ fontFamily: FONTS.mono, fontSize: 10, color: t.textDim }}>
+            next:
+          </span>
+          <span style={{ fontFamily: FONTS.mono, fontSize: 10, color: t.textMuted }}>
+            {autoMode.nextStage}
+          </span>
+        </div>
+      )}
+
+      {/* Elapsed time */}
+      {elapsed && (
+        <span
+          style={{
+            fontFamily: FONTS.mono,
+            fontSize: 10,
+            color: t.textMuted,
+            marginLeft: 'auto',
+          }}
+        >
+          {elapsed}
+        </span>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function BackButton({ onClick, theme }) {
+  const ctx = useTheme();
+  const t = theme || ctx.tokens;
+
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        alignSelf: 'flex-start',
+        background: 'transparent',
+        border: `1px solid ${t.border}`,
+        borderRadius: 6,
+        padding: '3px 10px',
+        color: t.textMuted,
+        fontFamily: FONTS.mono,
+        fontSize: 10,
+        cursor: 'pointer',
+        marginBottom: 8,
+      }}
+    >
+      &larr; Back
+    </button>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function Badge({ children, color, theme }) {
+  const ctx = useTheme();
+  const t = theme || ctx.tokens;
+  const c = color || t.accent;
+
+  return (
+    <span
+      style={{
+        display: 'inline-block',
+        padding: '2px 7px',
+        borderRadius: 4,
+        background: `${c}18`,
+        color: c,
+        fontFamily: FONTS.mono,
+        fontSize: 10,
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+      }}
+    >
+      {children}
+    </span>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+
+export default function Card({ children, style, theme, onClick }) {
+  const ctx = useTheme();
+  const t = theme || ctx.tokens;
+
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        background: t.surface,
+        border: `1px solid ${t.border}`,
+        borderRadius: 10,
+        padding: 16,
+        transition: 'all 0.2s',
+        ...(onClick ? { cursor: 'pointer' } : {}),
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function ChartTooltip({ active, payload, label, theme }) {
+  const ctx = useTheme();
+  const t = theme || (ctx && ctx.tokens);
+
+  if (!active || !payload) return null;
+
+  return (
+    <div
+      style={{
+        background: t.surface,
+        border: `1px solid ${t.border}`,
+        borderRadius: 8,
+        padding: '8px 12px',
+        boxShadow: `0 8px 24px ${t.shadow}`,
+      }}
+    >
+      <div
+        style={{
+          fontFamily: FONTS.mono,
+          fontSize: 10,
+          color: t.textMuted,
+          marginBottom: 3,
+        }}
+      >
+        {label}
+      </div>
+      {payload.map((entry, i) => (
+        <div
+          key={i}
+          style={{
+            fontFamily: FONTS.mono,
+            fontSize: 11,
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 6,
+            color: entry.color || t.text,
+          }}
+        >
+          <span>{entry.name}:</span>
+          <span style={{ fontWeight: 600 }}>{entry.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,110 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+const STATUS_SYMBOLS = {
+  pending: '\u25C7',
+  passed: '\u2713',
+  failed: '\u2717',
+};
+
+export default function CheckpointBox({ title, status = 'pending', items = [], actions = [], readOnly = false }) {
+  const { tokens: t } = useTheme();
+
+  const borderColor = status === 'passed' ? t.success
+    : status === 'failed' ? t.error
+    : t.accent;
+
+  const statusSymbol = STATUS_SYMBOLS[status] || STATUS_SYMBOLS.pending;
+  const statusColor = status === 'passed' ? t.success
+    : status === 'failed' ? t.error
+    : t.accent;
+
+  return (
+    <div
+      style={{
+        border: `3px double ${borderColor}`,
+        borderRadius: 8,
+        padding: 16,
+        background: t.surface,
+      }}
+    >
+      {/* Title row */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          marginBottom: items.length > 0 ? 12 : 0,
+          fontFamily: FONTS.sans,
+          fontSize: 14,
+          fontWeight: 700,
+          color: t.text,
+        }}
+      >
+        <span style={{ color: statusColor, fontSize: 16 }}>{statusSymbol}</span>
+        <span>{title}</span>
+        <span
+          style={{
+            marginLeft: 'auto',
+            fontFamily: FONTS.mono,
+            fontSize: 10,
+            color: statusColor,
+            textTransform: 'uppercase',
+            letterSpacing: 1,
+          }}
+        >
+          {status}
+        </span>
+      </div>
+
+      {/* Checklist items */}
+      {items.length > 0 && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+          {items.map((item, i) => (
+            <div
+              key={i}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                fontFamily: FONTS.mono,
+                fontSize: 12,
+                color: item.checked ? t.text : t.textMuted,
+              }}
+            >
+              <span style={{ color: item.checked ? t.success : t.textDim }}>
+                {item.checked ? '\u2713' : '\u25CB'}
+              </span>
+              <span>{item.label}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Action buttons (interactive mode only) */}
+      {!readOnly && actions && actions.length > 0 && (
+        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
+          {actions.map((action, i) => (
+            <button
+              key={i}
+              onClick={action.onClick}
+              style={{
+                background: t.accent,
+                color: t.bg,
+                border: 'none',
+                borderRadius: 4,
+                padding: '6px 14px',
+                fontFamily: FONTS.mono,
+                fontSize: 11,
+                fontWeight: 600,
+                cursor: 'pointer',
+              }}
+            >
+              {action.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}