@assistkick/create 1.0.0

package/templates/product-system/packages/frontend/src/components/ProjectSelector.tsx

@@ -0,0 +1,187 @@
+import React, { useState, useRef, useEffect } from 'react';
+import type { Project } from '../hooks/useProjects';
+
+interface ProjectSelectorProps {
+  projects: Project[];
+  selectedProjectId: string | null;
+  onSelect: (id: string) => void;
+  onCreate: (name: string) => Promise<any>;
+  onRename: (id: string, name: string) => Promise<void>;
+  onArchive: (id: string) => Promise<void>;
+}
+
+export function ProjectSelector({
+  projects, selectedProjectId, onSelect, onCreate, onRename, onArchive,
+}: ProjectSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const createInputRef = useRef<HTMLInputElement>(null);
+  const renameInputRef = useRef<HTMLInputElement>(null);
+
+  const selectedProject = projects.find(p => p.id === selectedProjectId);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setCreating(false);
+        setRenamingId(null);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  // Focus create input when shown
+  useEffect(() => {
+    if (creating) createInputRef.current?.focus();
+  }, [creating]);
+
+  // Focus rename input when shown
+  useEffect(() => {
+    if (renamingId) renameInputRef.current?.focus();
+  }, [renamingId]);
+
+  const handleCreate = async () => {
+    const trimmed = newName.trim();
+    if (!trimmed) return;
+    try {
+      await onCreate(trimmed);
+      setNewName('');
+      setCreating(false);
+      setOpen(false);
+    } catch {
+      // Error is handled by the caller
+    }
+  };
+
+  const handleRename = async () => {
+    const trimmed = renameValue.trim();
+    if (!trimmed || !renamingId) return;
+    try {
+      await onRename(renamingId, trimmed);
+      setRenamingId(null);
+      setRenameValue('');
+    } catch {
+      // Error is handled by the caller
+    }
+  };
+
+  const handleArchive = async (id: string) => {
+    try {
+      await onArchive(id);
+    } catch {
+      // Error is handled by the caller
+    }
+  };
+
+  return (
+    <div className="project-selector" ref={dropdownRef}>
+      <button
+        className="project-selector-trigger"
+        onClick={() => setOpen(v => !v)}
+        title="Select project"
+      >
+        <span className="project-selector-label">
+          {selectedProject?.name || 'No project'}
+        </span>
+        <span className="project-selector-chevron">{open ? '\u25B4' : '\u25BE'}</span>
+      </button>
+
+      {open && (
+        <div className="project-selector-dropdown">
+          <div className="project-selector-list">
+            {projects.map(project => (
+              <div
+                key={project.id}
+                className={`project-selector-item${project.id === selectedProjectId ? ' active' : ''}`}
+              >
+                {renamingId === project.id ? (
+                  <input
+                    ref={renameInputRef}
+                    className="project-selector-input"
+                    value={renameValue}
+                    onChange={e => setRenameValue(e.target.value)}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') handleRename();
+                      if (e.key === 'Escape') { setRenamingId(null); setRenameValue(''); }
+                    }}
+                    onBlur={handleRename}
+                  />
+                ) : (
+                  <>
+                    <button
+                      className="project-selector-item-name"
+                      onClick={() => { onSelect(project.id); setOpen(false); }}
+                    >
+                      {project.name}
+                    </button>
+                    <div className="project-selector-item-actions">
+                      <button
+                        className="project-selector-action-btn"
+                        title="Rename"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setRenamingId(project.id);
+                          setRenameValue(project.name);
+                        }}
+                      >
+                        &#9998;
+                      </button>
+                      {!project.isDefault && (
+                        <button
+                          className="project-selector-action-btn project-selector-archive-btn"
+                          title="Archive"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleArchive(project.id);
+                          }}
+                        >
+                          &#10005;
+                        </button>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            ))}
+          </div>
+
+          <div className="project-selector-footer">
+            {creating ? (
+              <div className="project-selector-create-form">
+                <input
+                  ref={createInputRef}
+                  className="project-selector-input"
+                  placeholder="Project name..."
+                  value={newName}
+                  onChange={e => setNewName(e.target.value)}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter') handleCreate();
+                    if (e.key === 'Escape') { setCreating(false); setNewName(''); }
+                  }}
+                />
+                <button className="project-selector-create-confirm" onClick={handleCreate}>
+                  +
+                </button>
+              </div>
+            ) : (
+              <button
+                className="project-selector-new-btn"
+                onClick={() => setCreating(true)}
+              >
+                + New Project
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/product-system/packages/frontend/src/components/QaIssueSheet.tsx

@@ -0,0 +1,192 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { apiClient } from '../api/client';
+
+interface QaIssueSheetProps {
+  isOpen: boolean;
+  featureId: string | null;
+  featureName: string;
+  column: string;
+  notes: any[];
+  reviews: any[];
+  onClose: () => void;
+  onNotesChanged: () => void;
+}
+
+export function QaIssueSheet({
+  isOpen, featureId, featureName, column, notes: initialNotes, reviews: initialReviews,
+  onClose, onNotesChanged,
+}: QaIssueSheetProps) {
+  const sheetRef = useRef<HTMLDivElement>(null);
+  const [notes, setNotes] = useState<any[]>(initialNotes);
+  const [reviews, setReviews] = useState<any[]>(initialReviews);
+  const [newNoteText, setNewNoteText] = useState('');
+  const [editingNoteId, setEditingNoteId] = useState<string | null>(null);
+  const [editText, setEditText] = useState('');
+
+  const isEditable = column === 'qa';
+
+  // Sync when props change
+  useEffect(() => {
+    setNotes(initialNotes);
+    setReviews(initialReviews);
+    setEditingNoteId(null);
+    setNewNoteText('');
+  }, [featureId, initialNotes, initialReviews]);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClick = (e: MouseEvent) => {
+      if (sheetRef.current && !sheetRef.current.contains(e.target as Node)) {
+        if ((e.target as HTMLElement).closest('.kanban-issues-btn')) return;
+        onClose();
+      }
+    };
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, [isOpen, onClose]);
+
+  const refreshNotes = useCallback(async () => {
+    if (!featureId) return;
+    try {
+      const kanbanData = await apiClient.fetchKanban();
+      const entry = kanbanData[featureId];
+      if (entry) {
+        setNotes(entry.notes || []);
+        setReviews(entry.reviews || []);
+      }
+      onNotesChanged();
+    } catch (err) {
+      console.error('Failed to refresh notes:', err);
+    }
+  }, [featureId, onNotesChanged]);
+
+  const handleAddNote = async () => {
+    const text = newNoteText.trim();
+    if (!text || !featureId) return;
+    try {
+      await apiClient.createNote(featureId, text);
+      setNewNoteText('');
+      await refreshNotes();
+    } catch (err) {
+      console.error('Failed to create note:', err);
+    }
+  };
+
+  const handleUpdateNote = async (noteId: string) => {
+    const text = editText.trim();
+    if (!text || !featureId) return;
+    try {
+      await apiClient.updateNote(featureId, noteId, text);
+      setEditingNoteId(null);
+      await refreshNotes();
+    } catch (err) {
+      console.error('Failed to update note:', err);
+    }
+  };
+
+  const handleDeleteNote = async (noteId: string) => {
+    if (!featureId) return;
+    try {
+      await apiClient.deleteNote(featureId, noteId);
+      await refreshNotes();
+    } catch (err) {
+      console.error('Failed to delete note:', err);
+    }
+  };
+
+  const formatDate = (isoString: string) => {
+    if (!isoString) return '';
+    try {
+      return new Date(isoString).toLocaleDateString('en-US', {
+        month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
+      });
+    } catch { return ''; }
+  };
+
+  return (
+    <div className={`qa-issue-sheet${isOpen ? ' open' : ''}`} ref={sheetRef}>
+      <div className="qa-sheet-header">
+        <span className="qa-sheet-title">{featureId} — {featureName}</span>
+        <button className="qa-sheet-close" onClick={onClose}>&times;</button>
+      </div>
+      <div className="qa-sheet-body">
+        <div className="qa-sheet-subtitle">
+          {isEditable ? 'Report and manage QA issues' : 'Issues (read-only)'}
+        </div>
+
+        {reviews.length > 0 && (
+          <div className="qa-sheet-review-history">
+            <div className="qa-sheet-section-title">Review History</div>
+            {reviews.map((review: any, i: number) => (
+              <div key={i} className="qa-sheet-review-item">
+                <div className="qa-sheet-review-header">
+                  <span className="qa-sheet-review-cycle">Cycle {review.cycle}</span>
+                  <span className={`qa-sheet-review-badge ${review.status}`}>
+                    {review.status === 'approved' ? 'Approved' : 'Rejected'}
+                  </span>
+                  <span className="qa-sheet-review-time">{formatDate(review.timestamp)}</span>
+                </div>
+                {review.reason && <div className="qa-sheet-review-reason">{review.reason}</div>}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {notes.length === 0 ? (
+          <div className="qa-sheet-empty">No issues reported yet.</div>
+        ) : (
+          <div className="qa-sheet-notes-list">
+            {notes.map((note: any) => (
+              <div key={note.id} className="qa-sheet-note">
+                {editingNoteId === note.id ? (
+                  <div className="qa-sheet-edit-form">
+                    <textarea
+                      className="qa-sheet-textarea"
+                      value={editText}
+                      onChange={e => setEditText(e.target.value)}
+                      rows={4}
+                      autoFocus
+                    />
+                    <div className="qa-sheet-form-btns">
+                      <button className="qa-sheet-add-btn" onClick={() => handleUpdateNote(note.id)}>Save</button>
+                      <button className="qa-sheet-cancel-btn" onClick={() => setEditingNoteId(null)}>Cancel</button>
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    <div className="qa-sheet-note-text">{note.text}</div>
+                    <div className="qa-sheet-note-meta">
+                      <span className="qa-sheet-note-date">{formatDate(note.created_at || note.timestamp)}</span>
+                      {isEditable && (
+                        <span className="qa-sheet-note-actions">
+                          <button className="qa-sheet-action-btn" onClick={() => { setEditingNoteId(note.id); setEditText(note.text); }}>Edit</button>
+                          <button className="qa-sheet-action-btn delete" onClick={() => handleDeleteNote(note.id)}>Delete</button>
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {isEditable && (
+          <div className="qa-sheet-add-form">
+            <textarea
+              className="qa-sheet-textarea"
+              placeholder="Describe the issue..."
+              rows={4}
+              value={newNoteText}
+              onChange={e => setNewNoteText(e.target.value)}
+            />
+            <div className="qa-sheet-form-btns">
+              <button className="qa-sheet-add-btn" onClick={handleAddNote}>Add Issue</button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/product-system/packages/frontend/src/components/SidePanel.tsx

@@ -0,0 +1,231 @@
+import React, { useState, useCallback } from 'react';
+import { marked } from 'marked';
+import { apiClient } from '../api/client';
+import { getTaskIcon, getTaskCssClass, shouldShowTaskList } from '../utils/task_status';
+
+interface WorkSummary {
+  cycle: number;
+  filesCreated: string[];
+  filesUpdated: string[];
+  filesDeleted: string[];
+  approach: string;
+  decisions: string[];
+  timestamp: string;
+}
+
+interface SidePanelProps {
+  graphData: any;
+  onEdgeClick: (neighborId: string) => void;
+}
+
+export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [node, setNode] = useState<any>(null);
+  const [content, setContent] = useState('');
+  const [workSummaries, setWorkSummaries] = useState<WorkSummary[]>([]);
+  const [expandedSummaries, setExpandedSummaries] = useState(false);
+  const [tasks, setTasks] = useState<{ total: number; completed: number; items: any[] } | null>(null);
+  const [expandedTasks, setExpandedTasks] = useState(false);
+
+  const open = useCallback(async (n: any) => {
+    setNode(n);
+    setWorkSummaries([]);
+    setExpandedSummaries(false);
+    setTasks(null);
+    setExpandedTasks(false);
+    try {
+      const detail = await apiClient.fetchNode(n.id);
+      setContent(detail.content);
+      setIsOpen(true);
+
+      // Fetch pipeline status for feature nodes to get work summaries
+      if (n.type === 'feature' || n.id?.startsWith('feat_')) {
+        try {
+          const pStatus = await apiClient.getPipelineStatus(n.id);
+          if (pStatus?.workSummaries?.length > 0) {
+            setWorkSummaries(pStatus.workSummaries);
+          }
+          if (pStatus?.tasks) {
+            setTasks(pStatus.tasks);
+          }
+        } catch {
+          // Pipeline status may not exist for all features
+        }
+      }
+    } catch (err) {
+      console.error('Failed to fetch node:', err);
+    }
+  }, []);
+
+  const close = useCallback(() => setIsOpen(false), []);
+
+  const renderMarkdown = (md: string) => {
+    const stripped = md.replace(/^---[\s\S]*?---\n*/m, '');
+    try {
+      return marked.parse(stripped) as string;
+    } catch {
+      return stripped;
+    }
+  };
+
+  const findEdges = (nodeId: string) => {
+    if (!graphData) return [];
+    const edges: any[] = [];
+    graphData.edges.forEach((e: any) => {
+      if (e.from === nodeId) edges.push({ neighborId: e.to, relation: e.relation, direction: 'outgoing' });
+      else if (e.to === nodeId) edges.push({ neighborId: e.from, relation: e.relation, direction: 'incoming' });
+    });
+    return edges;
+  };
+
+  // Expose open/close via ref-like approach on the component instance
+  // We'll use a callback pattern instead
+  (SidePanel as any).__open = open;
+  (SidePanel as any).__close = close;
+
+  if (!node) return (
+    <div className={`side-panel${isOpen ? ' open' : ''}`} id="side-panel">
+      <div className="panel-header">
+        <span className="panel-title" />
+        <button className="panel-close" onClick={close}>&times;</button>
+      </div>
+      <div className="panel-body" />
+    </div>
+  );
+
+  const statusLabel = (node.status || 'draft').replace(/_/g, ' ');
+  const completeness = Math.round((node.completeness || 0) * 100);
+  const typeLabel = node.type ? node.type.replace(/_/g, ' ') : '';
+  const edges = findEdges(node.id);
+
+  return (
+    <div className={`side-panel${isOpen ? ' open' : ''}`} id="side-panel">
+      <div className="panel-header">
+        <span className="panel-title">{node.name} ({node.id})</span>
+        <button className="panel-close" onClick={close}>&times;</button>
+      </div>
+      <div className="panel-body">
+        <div className="panel-status-section">
+          <span className="panel-type-badge">{typeLabel}</span>
+          <span className={`panel-status-badge panel-status-${node.status || 'draft'}`}>{statusLabel}</span>
+          <span className="panel-completeness">{completeness}% complete</span>
+        </div>
+        {shouldShowTaskList(tasks) && (
+          <div className="panel-task-list">
+            <button
+              className="panel-task-list-toggle"
+              onClick={() => setExpandedTasks(prev => !prev)}
+            >
+              <span className={`panel-task-list-chevron${expandedTasks ? ' expanded' : ''}`}>{'\u25B6'}</span>
+              Tasks ({tasks!.completed}/{tasks!.total})
+            </button>
+            {expandedTasks && tasks!.items?.length > 0 && (
+              <div className="panel-task-list-items">
+                {tasks!.items.map((task: any, idx: number) => (
+                  <div key={idx} className={getTaskCssClass(task.status)}>
+                    <span className="kanban-task-icon">
+                      {getTaskIcon(task.status)}
+                    </span>
+                    <span className="kanban-task-name">{task.name}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+        <div dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }} />
+        {workSummaries.length > 0 && (
+          <div className="panel-work-summary">
+            <button
+              className="panel-work-summary-toggle"
+              onClick={() => setExpandedSummaries(prev => !prev)}
+            >
+              {expandedSummaries ? '\u25BC' : '\u25B6'} Work Summary ({workSummaries.length} cycle{workSummaries.length !== 1 ? 's' : ''})
+            </button>
+            {expandedSummaries && (
+              <div className="panel-work-summary-details">
+                {workSummaries.map((ws, idx) => (
+                  <div key={idx} className="panel-work-summary-cycle">
+                    <div className="panel-work-summary-cycle-header">Cycle {ws.cycle}</div>
+                    {ws.filesCreated?.length > 0 && (
+                      <div className="panel-work-summary-files panel-work-summary-files-created">
+                        <span className="panel-work-summary-label">Created:</span>
+                        <ul>
+                          {ws.filesCreated.map((f, fi) => (
+                            <li key={fi}>{f}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+                    {ws.filesUpdated?.length > 0 && (
+                      <div className="panel-work-summary-files panel-work-summary-files-updated">
+                        <span className="panel-work-summary-label">Updated:</span>
+                        <ul>
+                          {ws.filesUpdated.map((f, fi) => (
+                            <li key={fi}>{f}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+                    {ws.filesDeleted?.length > 0 && (
+                      <div className="panel-work-summary-files panel-work-summary-files-deleted">
+                        <span className="panel-work-summary-label">Deleted:</span>
+                        <ul>
+                          {ws.filesDeleted.map((f, fi) => (
+                            <li key={fi}>{f}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+                    {ws.approach && (
+                      <div className="panel-work-summary-approach">
+                        <span className="panel-work-summary-label">Approach:</span>
+                        <p>{ws.approach}</p>
+                      </div>
+                    )}
+                    {ws.decisions?.length > 0 && (
+                      <div className="panel-work-summary-decisions">
+                        <span className="panel-work-summary-label">Decisions:</span>
+                        <ul>
+                          {ws.decisions.map((d, di) => (
+                            <li key={di}>{d}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+        {edges.length > 0 && (
+          <div className="panel-edges-section">
+            <h3>Relationships</h3>
+            <ul className="panel-edge-list">
+              {edges.map((edge, i) => {
+                const neighborNode = graphData?.nodes.find((n: any) => n.id === edge.neighborId);
+                const name = neighborNode ? neighborNode.name : edge.neighborId;
+                const direction = edge.direction === 'outgoing' ? '\u2192' : '\u2190';
+                return (
+                  <li key={i} className="panel-edge-item">
+                    <span className="panel-edge-direction">{direction}</span>
+                    <span className="panel-edge-relation">{edge.relation.replace(/_/g, ' ')}</span>
+                    <a className="panel-edge-link" href="#" onClick={(e) => { e.preventDefault(); onEdgeClick(edge.neighborId); }}>
+                      {name}
+                    </a>
+                    <span className="panel-edge-id">{edge.neighborId}</span>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Export the static methods for imperative use
+export const openSidePanel = (node: any) => (SidePanel as any).__open?.(node);
+export const closeSidePanel = () => (SidePanel as any).__close?.();