@sienklogic/plan-build-run 2.19.0 → 2.19.2

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

@@ -0,0 +1,27 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function CodeBlock({ children, theme }) {
+  const ctx = useTheme();
+  const t = theme || (ctx && ctx.tokens);
+
+  return (
+    <pre
+      style={{
+        background: t.codeBlock,
+        borderRadius: 6,
+        padding: '10px 12px',
+        fontFamily: FONTS.mono,
+        fontSize: 11,
+        color: t.textMuted,
+        overflowX: 'auto',
+        margin: 0,
+        lineHeight: 1.5,
+        border: `1px solid ${t.border}`,
+        whiteSpace: 'pre-wrap',
+      }}
+    >
+      {children}
+    </pre>
+  );
+}

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

@@ -0,0 +1,20 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import Badge from './Badge.jsx';
+
+const LEVEL_COLORS = {
+  high: 'success',
+  medium: 'warning',
+  low: 'error',
+};
+
+export default function ConfidenceBadge({ level }) {
+  const { tokens: t } = useTheme();
+  const colorKey = LEVEL_COLORS[level] || 'textDim';
+  const label = level ? level.charAt(0).toUpperCase() + level.slice(1) : 'Unknown';
+
+  return (
+    <Badge color={t[colorKey]}>
+      {label}
+    </Badge>
+  );
+}

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

@@ -0,0 +1,161 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+/**
+ * Portal-based confirmation modal that replaces window.confirm.
+ * Uses theme tokens for all colors, matching the toast styling pattern.
+ */
+export default function ConfirmModal({
+  isOpen,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+}) {
+  const { tokens } = useTheme();
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') onCancel();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onCancel]);
+
+  if (!isOpen) return null;
+
+  return ReactDOM.createPortal(
+    <div
+      onClick={onCancel}
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 10000,
+        background: 'rgba(0, 0, 0, 0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          background: tokens.surface,
+          border: `1px solid ${tokens.border}`,
+          borderRadius: 8,
+          padding: '20px 24px',
+          maxWidth: 400,
+          width: '90%',
+          boxShadow: `0 8px 24px ${tokens.shadow}`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONTS.sans,
+            fontSize: 16,
+            fontWeight: 600,
+            color: tokens.text,
+            marginBottom: 8,
+          }}
+        >
+          {title}
+        </div>
+        <div
+          style={{
+            fontFamily: FONTS.sans,
+            fontSize: 14,
+            color: tokens.textMuted,
+            lineHeight: '20px',
+            marginBottom: 20,
+          }}
+        >
+          {message}
+        </div>
+        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+          <button
+            onClick={onCancel}
+            style={{
+              background: 'transparent',
+              border: `1px solid ${tokens.border}`,
+              borderRadius: 6,
+              padding: '6px 16px',
+              fontFamily: FONTS.mono,
+              fontSize: 12,
+              color: tokens.textMuted,
+              cursor: 'pointer',
+            }}
+          >
+            {cancelLabel}
+          </button>
+          <button
+            onClick={onConfirm}
+            style={{
+              background: tokens.error,
+              border: 'none',
+              borderRadius: 6,
+              padding: '6px 16px',
+              fontFamily: FONTS.mono,
+              fontSize: 12,
+              color: '#fff',
+              cursor: 'pointer',
+            }}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+/**
+ * Hook that provides a promise-based confirmation dialog.
+ * Usage:
+ *   const { confirm, ConfirmDialog } = useConfirm();
+ *   if (await confirm('Title', 'Message?')) { ... }
+ *   // Render <ConfirmDialog /> in the component tree
+ */
+export function useConfirm() {
+  const [modal, setModal] = useState({ isOpen: false, title: '', message: '' });
+  const resolveRef = useRef(null);
+
+  const confirm = useCallback((title, message) => {
+    return new Promise((resolve) => {
+      resolveRef.current = resolve;
+      setModal({ isOpen: true, title, message });
+    });
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    if (resolveRef.current) resolveRef.current(true);
+    resolveRef.current = null;
+    setModal({ isOpen: false, title: '', message: '' });
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    if (resolveRef.current) resolveRef.current(false);
+    resolveRef.current = null;
+    setModal({ isOpen: false, title: '', message: '' });
+  }, []);
+
+  const ConfirmDialog = useCallback(
+    () => (
+      <ConfirmModal
+        isOpen={modal.isOpen}
+        title={modal.title}
+        message={modal.message}
+        onConfirm={handleConfirm}
+        onCancel={handleCancel}
+      />
+    ),
+    [modal.isOpen, modal.title, modal.message, handleConfirm, handleCancel]
+  );
+
+  return { confirm, ConfirmDialog };
+}

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

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+
+const STYLES = {
+  reconnecting: { bg: '#b45309', text: '#fef3c7', label: 'Reconnecting to server...' },
+  disconnected: { bg: '#991b1b', text: '#fee2e2', label: 'Connection lost. Retrying...' },
+  connecting:   { bg: '#1e3a5f', text: '#e0f2fe', label: 'Connecting to server...' },
+};
+
+export default function ConnectionBanner({ status }) {
+  const [dotOpacity, setDotOpacity] = useState(1);
+
+  useEffect(() => {
+    if (status === 'connected') return;
+    const id = setInterval(() => {
+      setDotOpacity((o) => (o === 1 ? 0.3 : 1));
+    }, 600);
+    return () => clearInterval(id);
+  }, [status]);
+
+  if (status === 'connected') return null;
+
+  const style = STYLES[status];
+  if (!style) return null;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        zIndex: 9999,
+        background: style.bg,
+        color: style.text,
+        textAlign: 'center',
+        padding: '6px 0',
+        fontSize: 13,
+        fontWeight: 600,
+        letterSpacing: '0.02em',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+      }}
+    >
+      <span
+        style={{
+          display: 'inline-block',
+          width: 8,
+          height: 8,
+          borderRadius: '50%',
+          background: style.text,
+          opacity: dotOpacity,
+          transition: 'opacity 0.3s',
+        }}
+      />
+      {style.label}
+    </div>
+  );
+}

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

@@ -0,0 +1,106 @@
+import { Component } from 'react';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+
+/**
+ * Inner class component that implements the React error boundary lifecycle.
+ * Receives theme tokens via props from the functional wrapper.
+ */
+class ErrorBoundaryInner extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null, resetKey: 0 };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  render() {
+    const { tokens } = this.props;
+
+    if (this.state.hasError) {
+      return (
+        <div
+          style={{
+            background: tokens
+              ? `${tokens.error}1a`
+              : 'rgba(239,68,68,0.1)',
+            border: `1px solid ${tokens ? tokens.error : '#ef4444'}`,
+            borderRadius: 8,
+            padding: 24,
+            margin: '16px 0',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 10,
+              marginBottom: 12,
+            }}
+          >
+            <span style={{ fontSize: 22 }}>{'\u26A0'}</span>
+            <span
+              style={{
+                fontSize: 16,
+                fontWeight: 600,
+                color: tokens ? tokens.text : '#e2e8f0',
+              }}
+            >
+              Something went wrong
+            </span>
+          </div>
+
+          <pre
+            style={{
+              fontFamily: 'monospace',
+              fontSize: 13,
+              color: tokens ? tokens.textMuted : '#94a3b8',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+              margin: '0 0 16px 0',
+              padding: 12,
+              background: tokens ? tokens.surface : '#111827',
+              borderRadius: 4,
+            }}
+          >
+            {this.state.error?.message || 'Unknown error'}
+          </pre>
+
+          <button
+            onClick={() => {
+              if (this.props.onRetry) this.props.onRetry();
+              this.setState((prev) => ({ hasError: false, error: null, resetKey: prev.resetKey + 1 }));
+            }}
+            style={{
+              padding: '8px 16px',
+              background: tokens ? tokens.accent : '#06b6d4',
+              color: '#fff',
+              border: 'none',
+              borderRadius: 4,
+              cursor: 'pointer',
+              fontSize: 14,
+              fontWeight: 500,
+            }}
+          >
+            Try Again
+          </button>
+        </div>
+      );
+    }
+
+    return <div key={this.state.resetKey}>{this.props.children}</div>;
+  }
+}
+
+/**
+ * Functional wrapper that provides theme tokens to the class-based error boundary.
+ */
+export default function ErrorBoundary({ children, onRetry }) {
+  const { tokens } = useTheme();
+  return (
+    <ErrorBoundaryInner tokens={tokens} onRetry={onRetry}>
+      {children}
+    </ErrorBoundaryInner>
+  );
+}

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

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function ErrorBox({ title = 'Error', message, details, onRetry }) {
+  const { tokens: t } = useTheme();
+  const [showDetails, setShowDetails] = useState(false);
+
+  return (
+    <div
+      style={{
+        background: `${t.error}1a`,
+        border: `1px solid ${t.error}`,
+        borderRadius: 8,
+        padding: 16,
+      }}
+    >
+      {/* Title row */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          marginBottom: 8,
+          fontFamily: FONTS.sans,
+          fontSize: 14,
+          fontWeight: 700,
+          color: t.text,
+        }}
+      >
+        <span style={{ color: t.error, fontSize: 16 }}>{'\u2717'}</span>
+        <span>{title}</span>
+      </div>
+
+      {/* Message */}
+      <div
+        style={{
+          fontFamily: FONTS.mono,
+          fontSize: 12,
+          color: t.text,
+          lineHeight: 1.5,
+        }}
+      >
+        {message}
+      </div>
+
+      {/* Details toggle */}
+      {details && (
+        <div style={{ marginTop: 10 }}>
+          <button
+            onClick={() => setShowDetails((v) => !v)}
+            style={{
+              background: 'transparent',
+              border: 'none',
+              padding: 0,
+              fontFamily: FONTS.mono,
+              fontSize: 11,
+              color: t.textMuted,
+              cursor: 'pointer',
+              textDecoration: 'underline',
+            }}
+          >
+            {showDetails ? 'Hide details' : 'Show details'}
+          </button>
+          {showDetails && (
+            <pre
+              style={{
+                marginTop: 8,
+                padding: 10,
+                background: t.codeBlock,
+                borderRadius: 4,
+                fontFamily: FONTS.mono,
+                fontSize: 11,
+                color: t.text,
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-word',
+                overflowX: 'auto',
+              }}
+            >
+              {details}
+            </pre>
+          )}
+        </div>
+      )}
+
+      {/* Retry button */}
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          style={{
+            marginTop: 12,
+            background: 'transparent',
+            border: `1px solid ${t.error}`,
+            borderRadius: 4,
+            padding: '5px 14px',
+            fontFamily: FONTS.mono,
+            fontSize: 11,
+            color: t.error,
+            cursor: 'pointer',
+          }}
+        >
+          Retry
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function KeyValue({ label, value, theme, color }) {
+  const ctx = useTheme();
+  const t = theme || ctx.tokens;
+
+  return (
+    <div>
+      <div
+        style={{
+          fontSize: 10,
+          color: t.textMuted,
+          fontFamily: FONTS.mono,
+          textTransform: 'uppercase',
+          marginBottom: 2,
+        }}
+      >
+        {label}
+      </div>
+      <div
+        style={{
+          fontSize: 13,
+          fontWeight: 600,
+          color: color || t.text,
+          fontFamily: FONTS.sans,
+        }}
+      >
+        {value}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+
+const SKELETON_KEYFRAMES_ID = 'pbr-skeleton-pulse';
+
+function ensureKeyframes() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(SKELETON_KEYFRAMES_ID)) return;
+
+  const style = document.createElement('style');
+  style.id = SKELETON_KEYFRAMES_ID;
+  style.textContent = `
+    @keyframes pbr-skeleton-pulse {
+      0%, 100% { opacity: 0.4; }
+      50% { opacity: 1; }
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+const WIDTH_PATTERN = ['100%', '80%', '60%'];
+
+/**
+ * Animated loading placeholder with configurable line count and height.
+ *
+ * @param {{ lines?: number, height?: number, style?: object }} props
+ */
+export default function LoadingSkeleton({ lines = 3, height = 16, style }) {
+  const { tokens } = useTheme();
+  ensureKeyframes();
+
+  return (
+    <div style={style}>
+      {Array.from({ length: lines }, (_, i) => (
+        <div
+          key={i}
+          style={{
+            background: tokens.border,
+            height,
+            borderRadius: 4,
+            width: WIDTH_PATTERN[i % WIDTH_PATTERN.length],
+            marginBottom: i < lines - 1 ? 8 : 0,
+            animation: 'pbr-skeleton-pulse 1.5s ease-in-out infinite',
+            animationDelay: `${i * 0.15}s`,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Card-shaped skeleton with a title bar and body lines.
+ */
+export function SkeletonCard({ height, style }) {
+  const { tokens } = useTheme();
+  ensureKeyframes();
+
+  return (
+    <div
+      style={{
+        background: tokens.surface,
+        border: `1px solid ${tokens.border}`,
+        borderRadius: 8,
+        padding: 20,
+        ...(height != null ? { height, overflow: 'hidden' } : {}),
+        ...style,
+      }}
+    >
+      {/* Title line */}
+      <div
+        style={{
+          background: tokens.border,
+          height: 20,
+          width: '50%',
+          borderRadius: 4,
+          marginBottom: 16,
+          animation: 'pbr-skeleton-pulse 1.5s ease-in-out infinite',
+        }}
+      />
+      {/* Body lines */}
+      <LoadingSkeleton lines={3} height={14} />
+    </div>
+  );
+}

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

@@ -0,0 +1,58 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+import Card from './Card.jsx';
+
+export default function MetricCard({ label, value, sub, color, theme }) {
+  const ctx = useTheme();
+  const t = theme || ctx.tokens;
+
+  return (
+    <Card theme={t} style={{ position: 'relative', overflow: 'hidden' }}>
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: 2,
+          background: `linear-gradient(90deg, ${color || t.accent}, transparent)`,
+        }}
+      />
+      <div
+        style={{
+          fontSize: 10,
+          color: t.textMuted,
+          fontFamily: FONTS.mono,
+          textTransform: 'uppercase',
+          letterSpacing: 1.5,
+          marginBottom: 5,
+        }}
+      >
+        {label}
+      </div>
+      <div
+        style={{
+          fontSize: 24,
+          fontWeight: 700,
+          color: t.text,
+          fontFamily: FONTS.sans,
+          lineHeight: 1,
+        }}
+      >
+        {value}
+      </div>
+      {sub && (
+        <div
+          style={{
+            fontSize: 10,
+            color: t.textMuted,
+            marginTop: 4,
+            fontFamily: FONTS.mono,
+          }}
+        >
+          {sub}
+        </div>
+      )}
+    </Card>
+  );
+}