@sienklogic/plan-build-run 2.12.0 → 2.12.1

package/dashboard/src/pages/planning/TodosTab.jsx

@@ -0,0 +1,297 @@
+import { useState } from 'react';
+import { Card, Badge, StatusDot, KeyValue, CodeBlock, useConfirm } from '../../components/ui';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+import { apiPost, apiPut, apiDelete } from '../../lib/api.js';
+import useToast from '../../hooks/useToast.jsx';
+
+export default function TodosTab({ todos = [], onRefresh }) {
+  const { tokens } = useTheme();
+  const { addToast } = useToast();
+  const { confirm, ConfirmDialog } = useConfirm();
+  const [expandedId, setExpandedId] = useState(null);
+  const [creating, setCreating] = useState(false);
+  const [newTitle, setNewTitle] = useState('');
+  const [newPriority, setNewPriority] = useState('medium');
+  const [newPhase, setNewPhase] = useState('');
+  const [newNotes, setNewNotes] = useState('');
+
+  const priorityColors = {
+    high: tokens.error,
+    medium: tokens.warning,
+    low: tokens.success,
+  };
+
+  const statusColors = {
+    done: tokens.success,
+    'in-progress': tokens.warning,
+    todo: tokens.textDim,
+    pending: tokens.textDim,
+  };
+
+  const statusIcon = (status) => {
+    if (status === 'done') return '\u2713';
+    if (status === 'in-progress') return '\u25D1';
+    return '\u25CB';
+  };
+
+  const btnStyle = (bg, color) => ({
+    background: bg,
+    border: 'none',
+    borderRadius: 6,
+    padding: '4px 12px',
+    fontFamily: FONTS.mono,
+    fontSize: 11,
+    color,
+    cursor: 'pointer',
+  });
+
+  const inputStyle = {
+    width: '100%',
+    background: tokens.surfaceAlt,
+    border: `1px solid ${tokens.border}`,
+    borderRadius: 6,
+    padding: '6px 10px',
+    fontFamily: FONTS.sans,
+    fontSize: 12,
+    color: tokens.text,
+    boxSizing: 'border-box',
+  };
+
+  const handleCreate = async () => {
+    if (!newTitle.trim()) {
+      addToast('error', 'Title is required');
+      return;
+    }
+    try {
+      await apiPost('/api/planning/todos', {
+        title: newTitle.trim(),
+        priority: newPriority,
+        phase: newPhase.trim(),
+        notes: newNotes,
+      });
+      addToast('success', 'Todo added');
+      setCreating(false);
+      setNewTitle('');
+      setNewPriority('medium');
+      setNewPhase('');
+      setNewNotes('');
+      if (onRefresh) onRefresh();
+    } catch (err) {
+      addToast('error', 'Failed to add todo: ' + err.message);
+    }
+  };
+
+  const handleToggle = async (e, todo) => {
+    e.stopPropagation();
+    try {
+      await apiPut(`/api/planning/todos/${todo.id}/toggle`, {
+        currentStatus: todo.status,
+      });
+      addToast('success', todo.status === 'done' ? 'Marked as pending' : 'Marked as done');
+      if (onRefresh) onRefresh();
+    } catch (err) {
+      addToast('error', 'Failed to toggle status: ' + err.message);
+    }
+  };
+
+  const handleDelete = async (e, todo) => {
+    e.stopPropagation();
+    if (!(await confirm('Delete Todo', 'Are you sure you want to delete this todo?'))) return;
+    try {
+      await apiDelete(`/api/planning/todos/${todo.id}`, { status: todo.status });
+      addToast('success', 'Todo deleted');
+      if (expandedId === todo.id) setExpandedId(null);
+      if (onRefresh) onRefresh();
+    } catch (err) {
+      addToast('error', 'Failed to delete todo: ' + err.message);
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <button style={btnStyle(tokens.accent, tokens.bg)} onClick={() => setCreating(true)}>
+          Add Todo
+        </button>
+      </div>
+
+      {creating && (
+        <Card style={{ padding: 12 }}>
+          <div style={{ fontSize: 13, fontWeight: 600, fontFamily: FONTS.sans, color: tokens.text, marginBottom: 8 }}>
+            New Todo
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <input
+              style={inputStyle}
+              placeholder="Title"
+              value={newTitle}
+              onChange={(e) => setNewTitle(e.target.value)}
+            />
+            <div style={{ display: 'flex', gap: 8 }}>
+              <select
+                style={{ ...inputStyle, width: 'auto', flex: 1 }}
+                value={newPriority}
+                onChange={(e) => setNewPriority(e.target.value)}
+              >
+                <option value="high">High</option>
+                <option value="medium">Medium</option>
+                <option value="low">Low</option>
+              </select>
+              <input
+                style={{ ...inputStyle, flex: 2 }}
+                placeholder="Phase"
+                value={newPhase}
+                onChange={(e) => setNewPhase(e.target.value)}
+              />
+            </div>
+            <textarea
+              style={{ ...inputStyle, resize: 'vertical' }}
+              rows={3}
+              placeholder="Notes"
+              value={newNotes}
+              onChange={(e) => setNewNotes(e.target.value)}
+            />
+            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+              <button
+                style={btnStyle('transparent', tokens.textMuted)}
+                onClick={() => setCreating(false)}
+              >
+                Cancel
+              </button>
+              <button style={btnStyle(tokens.accent, tokens.bg)} onClick={handleCreate}>
+                Save
+              </button>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {todos.map((todo) => {
+        const isExpanded = expandedId === todo.id;
+        return (
+          <Card
+            key={todo.id}
+            onClick={() => setExpandedId(isExpanded ? null : todo.id)}
+            style={{
+              padding: 10,
+              borderLeft: `3px solid ${priorityColors[todo.priority]}`,
+              borderRadius: '4px 10px 10px 4px',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <span
+                onClick={(e) => handleToggle(e, todo)}
+                style={{
+                  width: 18,
+                  height: 18,
+                  borderRadius: '50%',
+                  background: `${statusColors[todo.status]}18`,
+                  color: statusColors[todo.status],
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: 10,
+                  fontWeight: 700,
+                  flexShrink: 0,
+                  cursor: 'pointer',
+                }}
+                title="Toggle status"
+              >
+                {statusIcon(todo.status)}
+              </span>
+              <span
+                style={{
+                  flex: 1,
+                  fontSize: 12,
+                  fontFamily: FONTS.sans,
+                  color: todo.status === 'done' ? tokens.textMuted : tokens.text,
+                  textDecoration: todo.status === 'done' ? 'line-through' : 'none',
+                }}
+              >
+                {todo.title}
+              </span>
+              <Badge color={priorityColors[todo.priority]}>{todo.priority}</Badge>
+              <Badge color={tokens.textMuted}>{todo.phase}</Badge>
+              <button
+                onClick={(e) => handleDelete(e, todo)}
+                style={{
+                  background: 'transparent',
+                  border: 'none',
+                  color: tokens.textMuted,
+                  cursor: 'pointer',
+                  fontSize: 14,
+                  padding: '0 4px',
+                  lineHeight: 1,
+                }}
+                title="Delete todo"
+              >
+                x
+              </button>
+              <StatusDot status={todo.status} />
+            </div>
+
+            {isExpanded && (
+              <div
+                style={{
+                  marginTop: 8,
+                  paddingTop: 8,
+                  borderTop: `1px solid ${tokens.border}`,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 6,
+                }}
+              >
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
+                  <KeyValue label="Assignee" value={todo.assignee || 'Unassigned'} color={tokens.accent} />
+                  <KeyValue label="Phase" value={todo.phase} />
+                </div>
+
+                {todo.notes && (
+                  <div>
+                    <div
+                      style={{
+                        fontSize: 9,
+                        fontFamily: FONTS.mono,
+                        color: tokens.textMuted,
+                        textTransform: 'uppercase',
+                        letterSpacing: 0.5,
+                        marginBottom: 4,
+                      }}
+                    >
+                      Notes
+                    </div>
+                    <CodeBlock>{todo.notes}</CodeBlock>
+                  </div>
+                )}
+
+                {todo.relatedAgents && todo.relatedAgents.length > 0 && (
+                  <div>
+                    <div
+                      style={{
+                        fontSize: 9,
+                        fontFamily: FONTS.mono,
+                        color: tokens.textMuted,
+                        textTransform: 'uppercase',
+                        letterSpacing: 0.5,
+                        marginBottom: 4,
+                      }}
+                    >
+                      Related Agents
+                    </div>
+                    <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                      {todo.relatedAgents.map((agent) => (
+                        <Badge key={agent} color={tokens.info}>{agent}</Badge>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </Card>
+        );
+      })}
+      <ConfirmDialog />
+    </div>
+  );
+}

package/dashboard/src/theme/ThemeProvider.jsx

@@ -0,0 +1,38 @@
+import { createContext, useContext, useState, useCallback } from 'react';
+import { dark, light } from './tokens.js';
+
+const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+  const [themeName, setThemeName] = useState(() => {
+    try {
+      return localStorage.getItem('pbr-dashboard-theme') || 'dark';
+    } catch {
+      return 'dark';
+    }
+  });
+
+  const tokens = themeName === 'dark' ? dark : light;
+
+  const toggleTheme = useCallback(() => {
+    setThemeName((prev) => {
+      const next = prev === 'dark' ? 'light' : 'dark';
+      try {
+        localStorage.setItem('pbr-dashboard-theme', next);
+      } catch {
+        // localStorage unavailable
+      }
+      return next;
+    });
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ themeName, tokens, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}

package/dashboard/src/theme/tokens.js

@@ -0,0 +1,17 @@
+export const dark = {
+  bg: '#0a0e17', surface: '#111827', surfaceAlt: '#161f33',
+  border: '#1e293b', text: '#e2e8f0', textMuted: '#94a3b8',
+  textDim: '#475569', accent: '#06b6d4', accentGlow: 'rgba(6,182,212,0.12)',
+  success: '#10b981', warning: '#f59e0b', error: '#ef4444',
+  info: '#3b82f6', plan: '#818cf8', build: '#06b6d4',
+  run: '#10b981', codeBlock: '#0d1117', shadow: 'rgba(0,0,0,0.5)',
+};
+
+export const light = {
+  bg: '#f1f5f9', surface: '#ffffff', surfaceAlt: '#f8fafc',
+  border: '#e2e8f0', text: '#0f172a', textMuted: '#64748b',
+  textDim: '#94a3b8', accent: '#0891b2', accentGlow: 'rgba(8,145,178,0.08)',
+  success: '#059669', warning: '#d97706', error: '#dc2626',
+  info: '#2563eb', plan: '#6366f1', build: '#0891b2',
+  run: '#059669', codeBlock: '#f1f5f9', shadow: 'rgba(0,0,0,0.08)',
+};

package/dashboard/tests/components/ConfirmModal.test.jsx

@@ -0,0 +1,179 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
+import { ThemeProvider } from '../../src/theme/ThemeProvider.jsx';
+import ConfirmModal, { useConfirm } from '../../src/components/ui/ConfirmModal.jsx';
+
+function renderWithTheme(ui) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('ConfirmModal', () => {
+  it('renders nothing when isOpen is false', () => {
+    const { container } = renderWithTheme(
+      <ConfirmModal
+        isOpen={false}
+        title="Test"
+        message="Are you sure?"
+        onConfirm={vi.fn()}
+        onCancel={vi.fn()}
+      />
+    );
+    expect(screen.queryByText('Test')).not.toBeInTheDocument();
+  });
+
+  it('renders title and message when isOpen is true', () => {
+    renderWithTheme(
+      <ConfirmModal
+        isOpen={true}
+        title="Delete item"
+        message="This cannot be undone."
+        onConfirm={vi.fn()}
+        onCancel={vi.fn()}
+      />
+    );
+    expect(screen.getByText('Delete item')).toBeInTheDocument();
+    expect(screen.getByText('This cannot be undone.')).toBeInTheDocument();
+  });
+
+  it('calls onConfirm when confirm button is clicked', () => {
+    const onConfirm = vi.fn();
+    renderWithTheme(
+      <ConfirmModal
+        isOpen={true}
+        title="Action Required"
+        message="Proceed?"
+        onConfirm={onConfirm}
+        onCancel={vi.fn()}
+        confirmLabel="Yes"
+      />
+    );
+    fireEvent.click(screen.getByText('Yes'));
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onCancel when cancel button is clicked', () => {
+    const onCancel = vi.fn();
+    renderWithTheme(
+      <ConfirmModal
+        isOpen={true}
+        title="Action Required"
+        message="Proceed?"
+        onConfirm={vi.fn()}
+        onCancel={onCancel}
+      />
+    );
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onCancel when overlay is clicked', () => {
+    const onCancel = vi.fn();
+    renderWithTheme(
+      <ConfirmModal
+        isOpen={true}
+        title="Overlay Test"
+        message="Click outside"
+        onConfirm={vi.fn()}
+        onCancel={onCancel}
+      />
+    );
+    // The overlay is the outermost portal div with position:fixed
+    const overlay = screen.getByText('Overlay Test').closest('div[style*="position: fixed"]');
+    fireEvent.click(overlay);
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onCancel when Escape key is pressed', () => {
+    const onCancel = vi.fn();
+    renderWithTheme(
+      <ConfirmModal
+        isOpen={true}
+        title="Escape Test"
+        message="Press escape"
+        onConfirm={vi.fn()}
+        onCancel={onCancel}
+      />
+    );
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('uses custom button labels', () => {
+    renderWithTheme(
+      <ConfirmModal
+        isOpen={true}
+        title="Custom Labels"
+        message="Check labels"
+        onConfirm={vi.fn()}
+        onCancel={vi.fn()}
+        confirmLabel="Yes, delete"
+        cancelLabel="No, keep"
+      />
+    );
+    expect(screen.getByText('Yes, delete')).toBeInTheDocument();
+    expect(screen.getByText('No, keep')).toBeInTheDocument();
+  });
+});
+
+describe('useConfirm', () => {
+  function wrapper({ children }) {
+    return <ThemeProvider>{children}</ThemeProvider>;
+  }
+
+  it('returns confirm function and ConfirmDialog component', () => {
+    const { result } = renderHook(() => useConfirm(), { wrapper });
+    expect(typeof result.current.confirm).toBe('function');
+    expect(typeof result.current.ConfirmDialog).toBe('function');
+  });
+
+  it('confirm() opens the dialog and resolves true on confirm', async () => {
+    const { result } = renderHook(() => useConfirm(), { wrapper });
+
+    let confirmResult;
+    act(() => {
+      confirmResult = result.current.confirm('Delete?', 'Are you sure?');
+    });
+
+    // Dialog should now be open — render the ConfirmDialog
+    const { unmount } = render(
+      <ThemeProvider>
+        <result.current.ConfirmDialog />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText('Delete?')).toBeInTheDocument();
+
+    // Click confirm
+    act(() => {
+      fireEvent.click(screen.getByText('Confirm'));
+    });
+
+    const resolved = await confirmResult;
+    expect(resolved).toBe(true);
+    unmount();
+  });
+
+  it('confirm() resolves false on cancel', async () => {
+    const { result } = renderHook(() => useConfirm(), { wrapper });
+
+    let confirmResult;
+    act(() => {
+      confirmResult = result.current.confirm('Cancel?', 'Will you cancel?');
+    });
+
+    const { unmount } = render(
+      <ThemeProvider>
+        <result.current.ConfirmDialog />
+      </ThemeProvider>
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByText('Cancel'));
+    });
+
+    const resolved = await confirmResult;
+    expect(resolved).toBe(false);
+    unmount();
+  });
+});

package/dashboard/tests/components/ConnectionBanner.test.jsx

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import ConnectionBanner from '../../src/components/ui/ConnectionBanner.jsx';
+
+describe('ConnectionBanner', () => {
+  it('renders nothing when status is connected', () => {
+    const { container } = render(<ConnectionBanner status="connected" />);
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('shows "Connecting to server..." when status is connecting', () => {
+    render(<ConnectionBanner status="connecting" />);
+    expect(screen.getByText('Connecting to server...')).toBeInTheDocument();
+  });
+
+  it('shows "Reconnecting to server..." when status is reconnecting', () => {
+    render(<ConnectionBanner status="reconnecting" />);
+    expect(screen.getByText('Reconnecting to server...')).toBeInTheDocument();
+  });
+
+  it('shows "Connection lost. Retrying..." when status is disconnected', () => {
+    render(<ConnectionBanner status="disconnected" />);
+    expect(screen.getByText('Connection lost. Retrying...')).toBeInTheDocument();
+  });
+
+  it('renders nothing for unknown status', () => {
+    const { container } = render(<ConnectionBanner status="unknown" />);
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders the animated dot indicator', () => {
+    const { container } = render(<ConnectionBanner status="connecting" />);
+    // The dot is a span with borderRadius 50% inside the banner
+    const dot = container.querySelector('span[style*="border-radius"]');
+    expect(dot).toBeTruthy();
+  });
+});

package/dashboard/tests/components/ErrorBoundary.test.jsx

@@ -0,0 +1,59 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../src/theme/ThemeProvider.jsx';
+import ErrorBoundary from '../../src/components/ui/ErrorBoundary.jsx';
+
+function renderWithTheme(ui) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+function BombComponent({ shouldThrow }) {
+  if (shouldThrow) throw new Error('Test explosion');
+  return <div>Safe content</div>;
+}
+
+describe('ErrorBoundary', () => {
+  // Suppress React's error boundary console.error noise in tests
+  const originalError = console.error;
+  beforeEach(() => {
+    console.error = vi.fn();
+  });
+  afterEach(() => {
+    console.error = originalError;
+  });
+
+  it('renders children when no error occurs', () => {
+    renderWithTheme(
+      <ErrorBoundary>
+        <div>Hello world</div>
+      </ErrorBoundary>
+    );
+    expect(screen.getByText('Hello world')).toBeInTheDocument();
+  });
+
+  it('shows error message when a child throws', () => {
+    renderWithTheme(
+      <ErrorBoundary>
+        <BombComponent shouldThrow={true} />
+      </ErrorBoundary>
+    );
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+    expect(screen.getByText('Test explosion')).toBeInTheDocument();
+  });
+
+  it('resets error state when Try Again is clicked', () => {
+    const { rerender } = renderWithTheme(
+      <ErrorBoundary>
+        <BombComponent shouldThrow={true} />
+      </ErrorBoundary>
+    );
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+
+    // Click Try Again — boundary resets, but child will throw again
+    fireEvent.click(screen.getByText('Try Again'));
+
+    // After reset, the boundary re-renders children. BombComponent will throw again
+    // since shouldThrow is still true, so we should see the error again.
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+  });
+});

package/dashboard/tests/components/LoadingSkeleton.test.jsx

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { ThemeProvider } from '../../src/theme/ThemeProvider.jsx';
+import LoadingSkeleton, { SkeletonCard } from '../../src/components/ui/LoadingSkeleton.jsx';
+
+function renderWithTheme(ui) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('LoadingSkeleton', () => {
+  it('renders default 3 skeleton lines', () => {
+    const { container } = renderWithTheme(<LoadingSkeleton />);
+    // LoadingSkeleton root is the first child of ThemeProvider wrapper
+    const skeletonRoot = container.firstChild;
+    expect(skeletonRoot.children.length).toBe(3);
+  });
+
+  it('renders custom number of skeleton lines', () => {
+    const { container } = renderWithTheme(<LoadingSkeleton lines={5} />);
+    const skeletonRoot = container.firstChild;
+    expect(skeletonRoot.children.length).toBe(5);
+  });
+
+  it('applies custom height to skeleton lines', () => {
+    const { container } = renderWithTheme(<LoadingSkeleton lines={2} height={24} />);
+    const skeletonRoot = container.firstChild;
+    const firstLine = skeletonRoot.children[0];
+    expect(firstLine.style.height).toBe('24px');
+  });
+});
+
+describe('SkeletonCard', () => {
+  it('renders a title bar and body lines', () => {
+    const { container } = renderWithTheme(<SkeletonCard />);
+    const card = container.firstChild;
+    // Card should have at least 2 children: title line div + LoadingSkeleton wrapper
+    expect(card.children.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('applies custom height when provided', () => {
+    const { container } = renderWithTheme(<SkeletonCard height={120} />);
+    const card = container.firstChild;
+    expect(card.style.height).toBe('120px');
+    expect(card.style.overflow).toBe('hidden');
+  });
+});