@sienklogic/plan-build-run 2.19.0 → 2.19.2

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

@@ -0,0 +1,251 @@
+import { useState } from 'react';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+import { Card, Badge, CodeBlock, useConfirm } from '../../components/ui/index.js';
+import { apiPost, apiPut, apiDelete } from '../../lib/api.js';
+import useToast from '../../hooks/useToast.jsx';
+
+export default function NotesTab({ notes = [], onRefresh }) {
+  const { tokens: t } = useTheme();
+  const { addToast } = useToast();
+  const { confirm, ConfirmDialog } = useConfirm();
+  const [expandedId, setExpandedId] = useState(null);
+  const [editingId, setEditingId] = useState(null);
+  const [creating, setCreating] = useState(false);
+  const [editTitle, setEditTitle] = useState('');
+  const [editContent, setEditContent] = useState('');
+  const [editTags, setEditTags] = useState('');
+
+  const startEdit = (note) => {
+    setEditingId(note.id);
+    setEditTitle(note.title);
+    setEditContent(note.content);
+    setEditTags((note.tags || []).join(', '));
+  };
+
+  const cancelEdit = () => {
+    setEditingId(null);
+    setEditTitle('');
+    setEditContent('');
+    setEditTags('');
+  };
+
+  const startCreate = () => {
+    setCreating(true);
+    setEditTitle('');
+    setEditContent('');
+    setEditTags('');
+  };
+
+  const handleSaveNew = async () => {
+    if (!editTitle.trim()) {
+      addToast('error', 'Title is required');
+      return;
+    }
+    try {
+      await apiPost('/api/planning/notes', {
+        title: editTitle.trim(),
+        content: editContent,
+        tags: editTags.split(',').map((t) => t.trim()).filter(Boolean),
+      });
+      addToast('success', 'Note created');
+      setCreating(false);
+      setEditTitle('');
+      setEditContent('');
+      setEditTags('');
+      if (onRefresh) onRefresh();
+    } catch (err) {
+      addToast('error', 'Failed to create note: ' + err.message);
+    }
+  };
+
+  const handleSaveEdit = async (noteId) => {
+    if (!editTitle.trim()) {
+      addToast('error', 'Title is required');
+      return;
+    }
+    try {
+      await apiPut(`/api/planning/notes/${noteId}`, {
+        title: editTitle.trim(),
+        content: editContent,
+        tags: editTags.split(',').map((t) => t.trim()).filter(Boolean),
+      });
+      addToast('success', 'Note updated');
+      cancelEdit();
+      if (onRefresh) onRefresh();
+    } catch (err) {
+      addToast('error', 'Failed to update note: ' + err.message);
+    }
+  };
+
+  const handleDelete = async (noteId) => {
+    if (!(await confirm('Delete Note', 'Are you sure you want to delete this note?'))) return;
+    try {
+      await apiDelete(`/api/planning/notes/${noteId}`);
+      addToast('success', 'Note deleted');
+      if (expandedId === noteId) setExpandedId(null);
+      if (onRefresh) onRefresh();
+    } catch (err) {
+      addToast('error', 'Failed to delete note: ' + err.message);
+    }
+  };
+
+  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: t.surfaceAlt,
+    border: `1px solid ${t.border}`,
+    borderRadius: 6,
+    padding: '6px 10px',
+    fontFamily: FONTS.sans,
+    fontSize: 12,
+    color: t.text,
+    boxSizing: 'border-box',
+  };
+
+  const renderForm = (onSave, onCancel) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
+      <input
+        style={inputStyle}
+        placeholder="Title"
+        value={editTitle}
+        onChange={(e) => setEditTitle(e.target.value)}
+      />
+      <textarea
+        style={{ ...inputStyle, resize: 'vertical' }}
+        rows={6}
+        placeholder="Content"
+        value={editContent}
+        onChange={(e) => setEditContent(e.target.value)}
+      />
+      <input
+        style={inputStyle}
+        placeholder="Tags (comma-separated)"
+        value={editTags}
+        onChange={(e) => setEditTags(e.target.value)}
+      />
+      <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+        <button style={btnStyle('transparent', t.textMuted)} onClick={onCancel}>
+          Cancel
+        </button>
+        <button style={btnStyle(t.accent, t.bg)} onClick={onSave}>
+          Save
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <button style={btnStyle(t.accent, t.bg)} onClick={startCreate}>
+          New Note
+        </button>
+      </div>
+
+      {creating && (
+        <Card>
+          <div style={{ fontSize: 13, fontWeight: 600, fontFamily: FONTS.sans, color: t.text }}>
+            Create Note
+          </div>
+          {renderForm(handleSaveNew, () => setCreating(false))}
+        </Card>
+      )}
+
+      {notes.map((note) => {
+        const isExpanded = expandedId === note.id;
+        const isEditing = editingId === note.id;
+
+        return (
+          <Card
+            key={note.id}
+            onClick={() => {
+              if (!isEditing) setExpandedId(isExpanded ? null : note.id);
+            }}
+            style={{ cursor: isEditing ? 'default' : 'pointer' }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'flex-start',
+                gap: 10,
+              }}
+            >
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div
+                  style={{
+                    fontFamily: FONTS.sans,
+                    fontSize: 14,
+                    fontWeight: 600,
+                    color: t.text,
+                  }}
+                >
+                  {note.title}
+                </div>
+                <div
+                  style={{
+                    fontFamily: FONTS.mono,
+                    fontSize: 10,
+                    color: t.textMuted,
+                    marginTop: 4,
+                  }}
+                >
+                  {note.created}
+                </div>
+              </div>
+              <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                {(note.tags || []).map((tag) => (
+                  <Badge key={tag}>{tag}</Badge>
+                ))}
+              </div>
+            </div>
+
+            {isExpanded && !isEditing && (
+              <div style={{ marginTop: 12 }}>
+                <CodeBlock>{note.content}</CodeBlock>
+                <div style={{ display: 'flex', gap: 8, marginTop: 10, justifyContent: 'flex-end' }}>
+                  <button
+                    style={btnStyle(t.accent, t.bg)}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      startEdit(note);
+                    }}
+                  >
+                    Edit
+                  </button>
+                  <button
+                    style={btnStyle(t.error, '#fff')}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDelete(note.id);
+                    }}
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {isEditing && (
+              <div onClick={(e) => e.stopPropagation()}>
+                {renderForm(() => handleSaveEdit(note.id), cancelEdit)}
+              </div>
+            )}
+          </Card>
+        );
+      })}
+      <ConfirmDialog />
+    </div>
+  );
+}

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

@@ -0,0 +1,218 @@
+import { useState } from 'react';
+import { Card, Badge, ProgressBar, BackButton, KeyValue, StatusDot, StatusSymbol, SectionTitle } from '../../components/ui';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+import { apiPut } from '../../lib/api.js';
+import useToast from '../../hooks/useToast.jsx';
+
+export default function PhasesTab({ phases = [], todos = [] }) {
+  const { tokens } = useTheme();
+  const { addToast } = useToast();
+  const [selectedPhase, setSelectedPhase] = useState(null);
+  const [taskOverrides, setTaskOverrides] = useState({});
+
+  const statusColors = {
+    done: tokens.success,
+    'in-progress': tokens.warning,
+    todo: tokens.textDim,
+  };
+
+  const priorityColors = {
+    high: tokens.error,
+    medium: tokens.warning,
+    low: tokens.success,
+  };
+
+  const getTaskStatus = (task, index) => {
+    const overrideKey = `${selectedPhase?.id}-${index}`;
+    if (taskOverrides[overrideKey] !== undefined) {
+      return taskOverrides[overrideKey];
+    }
+    return task.status;
+  };
+
+  const statusIcon = (status) => {
+    if (status === 'done') return '\u2713';
+    if (status === 'in-progress') return '\u25D1';
+    return '\u25CB';
+  };
+
+  const toggleTask = async (e, task, index) => {
+    e.stopPropagation();
+    const currentStatus = getTaskStatus(task, index);
+    const isDone = currentStatus === 'done';
+    const newStatus = isDone ? 'todo' : 'done';
+    const overrideKey = `${selectedPhase.id}-${index}`;
+
+    // Optimistic update
+    setTaskOverrides((prev) => ({ ...prev, [overrideKey]: newStatus }));
+
+    try {
+      await apiPut(`/api/planning/phases/${selectedPhase.slug || selectedPhase.id}/tasks/${index}`, {
+        completed: !isDone,
+      });
+      addToast('success', isDone ? 'Task unmarked' : 'Task completed');
+    } catch (err) {
+      // Revert optimistic update
+      setTaskOverrides((prev) => {
+        const next = { ...prev };
+        delete next[overrideKey];
+        return next;
+      });
+      addToast('error', 'Failed to update task: ' + err.message);
+    }
+  };
+
+  if (selectedPhase) {
+    // Recalculate completed count with overrides
+    const taskStatuses = selectedPhase.taskList.map((task, i) => getTaskStatus(task, i));
+    const completedCount = taskStatuses.filter((s) => s === 'done').length;
+    const totalTasks = selectedPhase.tasks || selectedPhase.taskList.length;
+    const pct = Math.round((completedCount / totalTasks) * 100);
+    const relatedTodos = todos.filter((t) => t.phase === selectedPhase.id);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <BackButton onClick={() => setSelectedPhase(null)} />
+        <Card style={{ borderTop: `3px solid ${statusColors[selectedPhase.status]}` }}>
+          <div style={{ fontSize: 16, fontWeight: 700, fontFamily: FONTS.sans, color: tokens.text }}>
+            {selectedPhase.title}
+          </div>
+          <div style={{ fontSize: 11, color: tokens.textMuted, fontFamily: FONTS.sans, marginBottom: 10 }}>
+            {selectedPhase.description}
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 10 }}>
+            <KeyValue label="Milestone" value={selectedPhase.milestone} color={tokens.accent} />
+            <KeyValue label="Tasks" value={`${completedCount}/${totalTasks}`} />
+            <KeyValue label="Progress" value={`${pct}%`} color={tokens.accent} />
+            <KeyValue label="Status" value={selectedPhase.status} />
+          </div>
+          <ProgressBar pct={pct} color={statusColors[selectedPhase.status]} height={8} />
+        </Card>
+
+        <SectionTitle>Task List</SectionTitle>
+        {selectedPhase.taskList.map((task, index) => {
+          const taskStatus = getTaskStatus(task, index);
+          const isDone = taskStatus === 'done';
+
+          return (
+            <div
+              key={task.id}
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                padding: '6px 12px',
+                background: tokens.surfaceAlt,
+                borderRadius: 6,
+              }}
+            >
+              <span
+                onClick={(e) => toggleTask(e, task, index)}
+                role="checkbox"
+                aria-checked={isDone}
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === ' ' || e.key === 'Enter') toggleTask(e, task, index);
+                }}
+                style={{
+                  width: 18,
+                  height: 18,
+                  borderRadius: '50%',
+                  background: `${statusColors[taskStatus]}18`,
+                  color: statusColors[taskStatus],
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: 10,
+                  fontWeight: 700,
+                  flexShrink: 0,
+                  cursor: 'pointer',
+                  border: isDone ? 'none' : `1.5px solid ${statusColors[taskStatus]}`,
+                }}
+                title={isDone ? 'Mark as incomplete' : 'Mark as complete'}
+              >
+                {statusIcon(taskStatus)}
+              </span>
+              <span
+                style={{
+                  flex: 1,
+                  fontSize: 12,
+                  fontFamily: FONTS.sans,
+                  color: isDone ? tokens.textMuted : tokens.text,
+                  textDecoration: isDone ? 'line-through' : 'none',
+                }}
+              >
+                {task.title}
+              </span>
+              <StatusDot status={taskStatus} />
+            </div>
+          );
+        })}
+
+        {relatedTodos.length > 0 && (
+          <>
+            <SectionTitle>Related Todos</SectionTitle>
+            {relatedTodos.map((todo) => (
+              <Card
+                key={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 style={{ flex: 1, fontSize: 12, fontFamily: FONTS.sans, color: tokens.text }}>
+                    {todo.title}
+                  </span>
+                  <Badge color={priorityColors[todo.priority]}>{todo.priority}</Badge>
+                  <StatusDot status={todo.status} />
+                </div>
+                {todo.notes && (
+                  <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: tokens.textMuted, marginTop: 4 }}>
+                    {todo.notes}
+                  </div>
+                )}
+                {todo.relatedAgents && todo.relatedAgents.length > 0 && (
+                  <div style={{ display: 'flex', gap: 4, marginTop: 6 }}>
+                    {todo.relatedAgents.map((agent) => (
+                      <Badge key={agent} color={tokens.info}>{agent}</Badge>
+                    ))}
+                  </div>
+                )}
+              </Card>
+            ))}
+          </>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {phases.map((phase) => {
+        const pct = phase.tasks > 0 ? Math.round((phase.completed / phase.tasks) * 100) : 0;
+        return (
+          <Card key={phase.id} onClick={() => setSelectedPhase(phase)} style={{ padding: 12 }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 5 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <Badge color={statusColors[phase.status]}>{phase.id}</Badge>
+                <StatusSymbol status={phase.status === 'done' ? 'done' : phase.status === 'in-progress' ? 'active' : 'pending'} size={14} />
+                <span style={{ fontSize: 12, fontWeight: 600, fontFamily: FONTS.sans, color: tokens.text }}>
+                  {phase.title}
+                </span>
+                <Badge color={tokens.textMuted}>{phase.milestone}</Badge>
+              </div>
+              <span style={{ fontFamily: FONTS.mono, fontSize: 12, fontWeight: 600, color: tokens.accent }}>
+                {pct}%
+              </span>
+            </div>
+            <ProgressBar pct={pct} color={statusColors[phase.status]} />
+          </Card>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+import { Card } from '../../components/ui/index.js';
+
+export default function QuickTab({ quick = [] }) {
+  const { tokens: t } = useTheme();
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {quick.map((item) => (
+        <Card key={item.id}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <span
+              style={{
+                fontSize: 16,
+                flexShrink: 0,
+                width: 22,
+                textAlign: 'center',
+              }}
+            >
+              {item.done ? '\u2705' : '\u23F3'}
+            </span>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div
+                style={{
+                  fontFamily: FONTS.sans,
+                  fontSize: 13,
+                  color: item.done ? t.textMuted : t.text,
+                  textDecoration: item.done ? 'line-through' : 'none',
+                }}
+              >
+                {item.content}
+              </div>
+              <div
+                style={{
+                  fontFamily: FONTS.mono,
+                  fontSize: 10,
+                  color: t.textMuted,
+                  marginTop: 4,
+                }}
+              >
+                {item.created}
+              </div>
+            </div>
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import { Card, Badge, ConfidenceBadge, QualityGateBadge } from '../../components/ui';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+
+export default function ResearchTab({ research = [] }) {
+  const { tokens } = useTheme();
+  const [expandedId, setExpandedId] = useState(null);
+
+  const statusBadgeColor = (status) => {
+    if (status === 'integrated' || status === 'applied') return tokens.success;
+    if (status === 'reviewed') return tokens.info;
+    if (status === 'planned') return tokens.warning;
+    return tokens.textDim;
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {research.map((item) => {
+        const isExpanded = expandedId === item.id;
+        return (
+          <Card
+            key={item.id}
+            onClick={() => setExpandedId(isExpanded ? null : item.id)}
+            style={{ padding: 12 }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <span style={{ fontSize: 14 }}>{'\uD83D\uDCC4'}</span>
+              <span style={{ flex: 1, fontSize: 12, fontWeight: 600, fontFamily: FONTS.sans, color: tokens.text }}>
+                {item.title}
+              </span>
+              <Badge color={statusBadgeColor(item.status)}>{item.status}</Badge>
+              {item.confidence && <ConfidenceBadge level={item.confidence} />}
+              {item.qualityGate !== undefined && <QualityGateBadge passed={item.qualityGate} />}
+            </div>
+            <div
+              style={{
+                fontFamily: FONTS.mono,
+                fontSize: 10,
+                color: tokens.textMuted,
+                marginTop: 4,
+              }}
+            >
+              {item.source} &middot; {item.date} &middot; {item.relevance} relevance
+            </div>
+
+            {isExpanded && (
+              <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 6 }}>
+                <div
+                  style={{
+                    background: tokens.codeBlock,
+                    padding: '8px 12px',
+                    borderRadius: 6,
+                    fontSize: 11,
+                    color: tokens.textMuted,
+                    fontFamily: FONTS.sans,
+                    lineHeight: 1.5,
+                  }}
+                >
+                  {item.summary}
+                </div>
+
+                {item.keyTakeaways && item.keyTakeaways.length > 0 && (
+                  <div>
+                    <div
+                      style={{
+                        fontSize: 9,
+                        fontFamily: FONTS.mono,
+                        color: tokens.textMuted,
+                        textTransform: 'uppercase',
+                        letterSpacing: 0.5,
+                        marginBottom: 4,
+                      }}
+                    >
+                      Key Takeaways
+                    </div>
+                    {item.keyTakeaways.map((takeaway, i) => (
+                      <div
+                        key={i}
+                        style={{
+                          display: 'flex',
+                          alignItems: 'flex-start',
+                          gap: 6,
+                          padding: '3px 0',
+                          fontSize: 11,
+                          fontFamily: FONTS.sans,
+                          color: tokens.text,
+                        }}
+                      >
+                        <span style={{ color: tokens.accent, fontWeight: 700, flexShrink: 0 }}>{'\u2192'}</span>
+                        <span>{takeaway}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </Card>
+        );
+      })}
+    </div>
+  );
+}