@assistkick/create 1.0.0

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

@@ -0,0 +1,470 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { apiClient } from '../api/client';
+import { COLUMNS, PIPELINE_STATUS_LABELS } from '../constants/graph';
+import { useToast } from '../hooks/useToast';
+
+
+interface KanbanViewProps {
+  graphData: any;
+  projectId?: string | null;
+  onCardClick: (node: { id: string; name: string }) => void;
+  onIssuesClick: (featureId: string, featureName: string, column: string, notes: any[], reviews: any[]) => void;
+}
+
+interface CardData {
+  id: string;
+  name: string;
+  completeness: number;
+  kind: string;
+  rejectionCount: number;
+  notes: any[];
+  reviews: any[];
+  column: string;
+  devBlocked: boolean;
+  movedAt: string | null;
+}
+
+const ALL_COLUMNS = COLUMNS.map(c => c.id);
+
+export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }: KanbanViewProps) {
+  const [kanbanData, setKanbanData] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [draggedCard, setDraggedCard] = useState<string | null>(null);
+  const [dragOverColumn, setDragOverColumn] = useState<string | null>(null);
+  const [pipelineStatuses, setPipelineStatuses] = useState<Record<string, any>>({});
+  const [playAllRunning, setPlayAllRunning] = useState(false);
+  const [playAllCurrentFeature, setPlayAllCurrentFeature] = useState<string | null>(null);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+  const { showToast } = useToast();
+
+  const pollersRef = useRef<Map<string, ReturnType<typeof setInterval>>>(new Map());
+  const playAllAbortedRef = useRef(false);
+  const kanbanDataRef = useRef(kanbanData);
+  kanbanDataRef.current = kanbanData;
+
+  const fetchKanban = useCallback(async () => {
+    try {
+      const data = await apiClient.fetchKanban(projectId ?? undefined);
+      setKanbanData(data);
+      setError(null);
+      return data;
+    } catch {
+      setError('Failed to load kanban data.');
+      return null;
+    }
+  }, [projectId]);
+
+  useEffect(() => {
+    fetchKanban();
+    return () => {
+      // Cleanup all pollers
+      for (const intervalId of pollersRef.current.values()) {
+        clearInterval(intervalId);
+      }
+      pollersRef.current.clear();
+    };
+  }, [fetchKanban]);
+
+  const getCardsForColumn = useCallback((columnId: string): CardData[] => {
+    if (!kanbanData || !graphData) return [];
+    const featureNodes = new Map<string, any>();
+    graphData.nodes
+      .filter((n: any) => n.type === 'feature')
+      .forEach((n: any) => featureNodes.set(n.id, n));
+
+    const cards: CardData[] = Object.entries(kanbanData)
+      .filter(([id, entry]: [string, any]) => entry.column === columnId && featureNodes.has(id))
+      .map(([id, entry]: [string, any]) => ({
+        id,
+        name: featureNodes.get(id).name,
+        completeness: featureNodes.get(id).completeness,
+        kind: featureNodes.get(id).kind || 'new',
+        rejectionCount: entry.rejection_count || 0,
+        notes: entry.notes || [],
+        reviews: entry.reviews || [],
+        column: entry.column,
+        devBlocked: entry.dev_blocked || false,
+        movedAt: entry.moved_at || null,
+      }));
+
+    if (columnId === 'todo') {
+      cards.sort((a, b) => (b.completeness || 0) - (a.completeness || 0));
+    } else if (columnId === 'done') {
+      cards.sort((a, b) => (b.movedAt || '').localeCompare(a.movedAt || ''));
+    } else {
+      cards.sort((a, b) => (a.movedAt || '').localeCompare(b.movedAt || ''));
+    }
+
+    return cards;
+  }, [kanbanData, graphData]);
+
+  const getPipelineBadgeText = (status: string, rejectionCount: number) => {
+    const label = (PIPELINE_STATUS_LABELS as any)[status] || status;
+    if (rejectionCount >= 1) return `Retry ${rejectionCount + 1}`;
+    return label;
+  };
+
+  const startPipelinePolling = useCallback((featureId: string) => {
+    if (pollersRef.current.has(featureId)) return;
+    const intervalId = setInterval(async () => {
+      try {
+        const status = await apiClient.getPipelineStatus(featureId);
+        setPipelineStatuses(prev => ({ ...prev, [featureId]: status }));
+        if (['idle', 'completed', 'blocked', 'failed', 'interrupted'].includes(status.status)) {
+          clearInterval(pollersRef.current.get(featureId)!);
+          pollersRef.current.delete(featureId);
+          await fetchKanban();
+        }
+      } catch {
+        clearInterval(pollersRef.current.get(featureId)!);
+        pollersRef.current.delete(featureId);
+      }
+    }, 5000);
+    pollersRef.current.set(featureId, intervalId);
+  }, [fetchKanban]);
+
+  // Fetch initial pipeline statuses for all cards
+  useEffect(() => {
+    if (!kanbanData || !graphData) return;
+    const featureIds = Object.keys(kanbanData);
+    featureIds.forEach(async (id) => {
+      try {
+        const status = await apiClient.getPipelineStatus(id);
+        if (status.status !== 'idle') {
+          setPipelineStatuses(prev => ({ ...prev, [id]: status }));
+          if (!['completed', 'failed', 'blocked', 'interrupted'].includes(status.status)) {
+            startPipelinePolling(id);
+          }
+        }
+      } catch { /* ignore */ }
+    });
+  }, [kanbanData, graphData, startPipelinePolling]);
+
+  const checkDependencies = useCallback((featureId: string) => {
+    if (!graphData || !kanbanData) return { blocked: false, blockedBy: [] as string[] };
+    const deps = graphData.edges
+      .filter((e: any) => e.from === featureId && e.relation === 'depends_on')
+      .map((e: any) => e.to)
+      .filter((depId: string) => graphData.nodes.some((n: any) => n.id === depId && n.type === 'feature'));
+    const blockedBy = deps.filter((depId: string) => {
+      const entry = kanbanData[depId];
+      return !entry || entry.column !== 'done';
+    });
+    return { blocked: blockedBy.length > 0, blockedBy };
+  }, [graphData, kanbanData]);
+
+  // Drag handlers
+  const handleDragStart = (e: React.DragEvent, featureId: string) => {
+    setDraggedCard(featureId);
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/plain', featureId);
+    (e.target as HTMLElement).classList.add('dragging');
+  };
+
+  const handleDragEnd = (e: React.DragEvent) => {
+    (e.target as HTMLElement).classList.remove('dragging');
+    setDraggedCard(null);
+    setDragOverColumn(null);
+  };
+
+  const handleDragOver = (e: React.DragEvent, columnId: string) => {
+    if (!draggedCard) return;
+    const sourceColumn = kanbanData?.[draggedCard]?.column;
+    if (columnId !== sourceColumn) {
+      e.preventDefault();
+      setDragOverColumn(columnId);
+    }
+  };
+
+  const handleDragLeave = () => {
+    setDragOverColumn(null);
+  };
+
+  const handleDrop = async (e: React.DragEvent, targetColumn: string) => {
+    e.preventDefault();
+    setDragOverColumn(null);
+    const featureId = e.dataTransfer.getData('text/plain');
+    if (!featureId || !targetColumn) return;
+    try {
+      await apiClient.moveCard(featureId, targetColumn);
+      await fetchKanban();
+    } catch (err) {
+      console.error('Failed to move card:', err);
+    }
+  };
+
+  const handleStartPipeline = async (featureId: string) => {
+    try {
+      await apiClient.startPipeline(featureId);
+      startPipelinePolling(featureId);
+      await fetchKanban();
+    } catch (err: any) {
+      console.error('Failed to start pipeline:', err);
+      showToast(err?.message || 'Failed to start pipeline');
+    }
+  };
+
+  const handleUnblock = async (featureId: string) => {
+    try {
+      await apiClient.unblockCard(featureId);
+      await fetchKanban();
+    } catch (err) {
+      console.error('Failed to unblock card:', err);
+    }
+  };
+
+  const handleCopy = async (card: CardData) => {
+    const text = `${card.id} ${card.name}`;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedId(card.id);
+      setTimeout(() => setCopiedId(null), 1500);
+    } catch { /* ignore */ }
+  };
+
+  // Play All
+  const startPlayAll = async () => {
+    if (playAllRunning) return;
+    setPlayAllRunning(true);
+    playAllAbortedRef.current = false;
+    setPlayAllCurrentFeature(null);
+
+    try {
+      await playAllLoop();
+    } finally {
+      setPlayAllRunning(false);
+      setPlayAllCurrentFeature(null);
+    }
+  };
+
+  const stopPlayAll = () => {
+    playAllAbortedRef.current = true;
+  };
+
+  const playAllLoop = async () => {
+    while (!playAllAbortedRef.current) {
+      let freshKanban: any;
+      let freshGraph: any;
+      try {
+        freshKanban = await apiClient.fetchKanban(projectId ?? undefined);
+        freshGraph = await apiClient.fetchGraph(projectId ?? undefined);
+        setKanbanData(freshKanban);
+      } catch { break; }
+
+      const featureNodes = new Map<string, any>();
+      freshGraph.nodes
+        .filter((n: any) => n.type === 'feature')
+        .forEach((n: any) => featureNodes.set(n.id, n));
+
+      const todoCards = Object.entries(freshKanban)
+        .filter(([id, entry]: [string, any]) => entry.column === 'todo' && featureNodes.has(id) && !entry.dev_blocked)
+        .map(([id, entry]: [string, any]) => ({
+          id,
+          completeness: featureNodes.get(id).completeness || 0,
+        }))
+        .sort((a, b) => b.completeness - a.completeness);
+
+      if (todoCards.length === 0) break;
+
+      let processed = false;
+      for (const card of todoCards) {
+        if (playAllAbortedRef.current) return;
+
+        // Check deps
+        const deps = freshGraph.edges
+          .filter((e: any) => e.from === card.id && e.relation === 'depends_on')
+          .map((e: any) => e.to)
+          .filter((depId: string) => freshGraph.nodes.some((n: any) => n.id === depId && n.type === 'feature'));
+        const blocked = deps.some((depId: string) => !freshKanban[depId] || freshKanban[depId].column !== 'done');
+        if (blocked) continue;
+
+        setPlayAllCurrentFeature(card.id);
+
+        try {
+          await apiClient.startPipeline(card.id);
+        } catch (err: any) {
+          console.error(`Play All: failed to start pipeline for ${card.id}:`, err);
+          showToast(err?.message || `Failed to start pipeline for ${card.id}`);
+          break;
+        }
+
+        // Wait for pipeline completion
+        await new Promise<void>((resolve) => {
+          const poll = async () => {
+            if (playAllAbortedRef.current) { resolve(); return; }
+            try {
+              const status = await apiClient.getPipelineStatus(card.id);
+              setPipelineStatuses(prev => ({ ...prev, [card.id]: status }));
+              if (['idle', 'completed', 'blocked', 'failed', 'interrupted'].includes(status.status)) {
+                resolve();
+                return;
+              }
+            } catch { resolve(); return; }
+            setTimeout(poll, 5000);
+          };
+          poll();
+        });
+
+        if (playAllAbortedRef.current) return;
+        processed = true;
+        break;
+      }
+
+      if (!processed) break;
+    }
+  };
+
+  if (error) return <div className="error-msg">{error}</div>;
+  if (!kanbanData) return <div className="kanban-loading">Loading...</div>;
+
+  return (
+    <div className="kanban-board">
+      {COLUMNS.map(col => {
+        const cards = getCardsForColumn(col.id);
+        const sourceColumn = draggedCard ? kanbanData?.[draggedCard]?.column : null;
+        const isDropTarget = draggedCard && col.id !== sourceColumn;
+        const isDragOver = dragOverColumn === col.id;
+
+        return (
+          <div key={col.id} className="kanban-column" data-column={col.id}>
+            <div className="kanban-column-header">
+              <div className="kanban-column-header-left">
+                <span className="kanban-column-title">{col.label}</span>
+                <span className="kanban-column-count">{cards.length}</span>
+              </div>
+              {col.id === 'todo' && (
+                playAllRunning ? (
+                  <button className="kanban-play-all-btn stop" title="Stop processing" onClick={stopPlayAll}>
+                    {'\u25A0'}
+                  </button>
+                ) : (
+                  <button className="kanban-play-all-btn" title="Start automated development for all TODO features" onClick={startPlayAll}>
+                    {'\u25B6\u25B6'}
+                  </button>
+                )
+              )}
+            </div>
+            <div
+              className={`kanban-column-body${isDropTarget ? ' drop-target' : ''}${isDragOver ? ' drag-over' : ''}`}
+              data-column={col.id}
+              onDragOver={(e) => handleDragOver(e, col.id)}
+              onDragLeave={handleDragLeave}
+              onDrop={(e) => handleDrop(e, col.id)}
+            >
+              {cards.map(card => {
+                const pct = Math.round((card.completeness || 0) * 100);
+                const pStatus = pipelineStatuses[card.id];
+                const isActive = pStatus && !['idle', 'completed', 'blocked', 'failed', 'interrupted'].includes(pStatus.status);
+                const isTerminal = pStatus && ['completed', 'failed', 'blocked', 'interrupted'].includes(pStatus.status);
+
+                return (
+                  <div
+                    key={card.id}
+                    className={`kanban-card${card.rejectionCount >= 3 ? ' problematic' : ''}${card.devBlocked ? ' dev-blocked' : ''}${playAllCurrentFeature === card.id ? ' play-all-active' : ''}`}
+                    data-feature-id={card.id}
+                    draggable
+                    onDragStart={(e) => handleDragStart(e, card.id)}
+                    onDragEnd={handleDragEnd}
+                    onClick={(e) => {
+                      if ((e.target as HTMLElement).closest('button, textarea, .kanban-note-form')) return;
+                      onCardClick({ id: card.id, name: card.name });
+                    }}
+                    style={{ cursor: 'pointer' }}
+                  >
+                    <div className="kanban-card-header">
+                      <span className="kanban-card-id">
+                        {card.id}
+                        {card.kind && card.kind !== 'new' && (
+                          <> <span className={`kanban-card-kind kind-${card.kind}`}>{card.kind}</span></>
+                        )}
+                      </span>
+                      <button
+                        className={`kanban-copy-btn${copiedId === card.id ? ' copied' : ''}`}
+                        title="Copy feature ID and name"
+                        onClick={(e) => { e.stopPropagation(); handleCopy(card); }}
+                      >
+                        {copiedId === card.id ? '\u2713' : '\uD83D\uDCCB'}
+                      </button>
+                      <span className="kanban-card-header-right">
+                        {card.rejectionCount > 0 && (
+                          <span className={`kanban-card-rejections${card.rejectionCount >= 3 ? ' high' : ''}`}>
+                            {card.rejectionCount}x rejected
+                          </span>
+                        )}
+                        {card.column === 'todo' && !card.devBlocked && (
+                          <button
+                            className="kanban-play-btn"
+                            title="Start automated development pipeline"
+                            onClick={(e) => { e.stopPropagation(); handleStartPipeline(card.id); }}
+                          >
+                            {'\u25B6'}
+                          </button>
+                        )}
+                        {card.devBlocked && (
+                          <span className="kanban-blocked-badge">Blocked</span>
+                        )}
+                      </span>
+                    </div>
+
+                    <div className="kanban-card-name">{card.name}</div>
+
+                    <div className="kanban-card-completeness-row">
+                      <span className="kanban-card-completeness-prefix">Spec</span>
+                      <div className="kanban-card-completeness">
+                        <div className="kanban-card-completeness-fill" style={{ width: `${pct}%` }} />
+                      </div>
+                      <span className="kanban-card-completeness-label">{pct}%</span>
+                    </div>
+
+                    {pStatus && pStatus.status !== 'idle' && (
+                      <div className={`kanban-pipeline-status${isActive ? ' pipeline-active' : ''}${isTerminal ? ` pipeline-${pStatus.status}` : ''}`}>
+                        {getPipelineBadgeText(pStatus.status, card.rejectionCount)}
+                      </div>
+                    )}
+
+                    {pStatus?.toolCalls?.total > 0 && (
+                      <div className="kanban-tool-calls" style={{ display: 'flex' }}>
+                        {[
+                          { label: 'Write', count: pStatus.toolCalls.write },
+                          { label: 'Edit', count: pStatus.toolCalls.edit },
+                          { label: 'Read', count: pStatus.toolCalls.read },
+                          { label: 'Bash', count: pStatus.toolCalls.bash },
+                        ].filter(i => i.count > 0).map(i => (
+                          <span key={i.label} className="kanban-tool-badge">{i.label}: {i.count}</span>
+                        ))}
+                      </div>
+                    )}
+
+                    {card.devBlocked && (
+                      <button
+                        className="kanban-unblock-btn"
+                        onClick={(e) => { e.stopPropagation(); handleUnblock(card.id); }}
+                      >
+                        Unblock
+                      </button>
+                    )}
+
+                    <button
+                      className={`kanban-issues-btn${card.notes.length > 0 ? ' has-issues' : ''}`}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onIssuesClick(card.id, card.name, card.column, card.notes, card.reviews);
+                      }}
+                    >
+                      {card.notes.length > 0
+                        ? `${card.notes.length} issue${card.notes.length !== 1 ? 's' : ''} reported`
+                        : card.column === 'qa'
+                          ? '+ Report Issue'
+                          : 'No issues'}
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+
+    </div>
+  );
+}

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

@@ -0,0 +1,116 @@
+/**
+ * Login Page — email/password form for unauthenticated users.
+ * Calls POST /api/auth/login, redirects to main app on success.
+ * Minimal developer tool aesthetic, dark/light theme support.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Link } from 'react-router-dom';
+import { useTheme } from '../hooks/useTheme';
+import { validateLoginForm, parseLoginResponse } from '../utils/login_validation';
+
+interface LoginPageProps {
+  onLoginSuccess: () => void;
+}
+
+export function LoginPage({ onLoginSuccess }: LoginPageProps) {
+  const { theme, toggleTheme } = useTheme();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    const validationError = validateLoginForm(email, password);
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const resp = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ email: email.trim(), password }),
+      });
+
+      const result = await parseLoginResponse(resp);
+      if ('error' in result) {
+        setError(result.error);
+        return;
+      }
+
+      onLoginSuccess();
+    } catch {
+      setError('Unable to connect to server');
+    } finally {
+      setSubmitting(false);
+    }
+  }, [email, password, onLoginSuccess]);
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <div className="login-header">
+          <span className="login-title">login</span>
+          <button
+            className="login-theme-toggle"
+            onClick={toggleTheme}
+            title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
+          >
+            {theme === 'dark' ? '☀' : '☾'}
+          </button>
+        </div>
+
+        <form className="login-form" onSubmit={handleSubmit}>
+          <label className="login-label" htmlFor="login-email">email</label>
+          <input
+            id="login-email"
+            className="login-input"
+            type="email"
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            placeholder="user@example.com"
+            autoComplete="email"
+            autoFocus
+            disabled={submitting}
+          />
+
+          <label className="login-label" htmlFor="login-password">password</label>
+          <input
+            id="login-password"
+            className="login-input"
+            type="password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            placeholder="••••••••"
+            autoComplete="current-password"
+            disabled={submitting}
+          />
+
+          {error && <div className="login-error">{error}</div>}
+
+          <button
+            className="login-submit"
+            type="submit"
+            disabled={submitting}
+          >
+            {submitting ? 'signing in...' : 'sign in'}
+          </button>
+        </form>
+
+        <p className="login-register-link">
+          <Link to="/forgot-password">Forgot password?</Link>
+        </p>
+        <p className="login-register-link">
+          No account yet? <Link to="/register">Register</Link>
+        </p>
+      </div>
+    </div>
+  );
+}