@assistkick/create 1.0.0

package/templates/product-system/packages/frontend/src/constants/graph.ts

@@ -0,0 +1,191 @@
+/**
+ * Graph visualization constants — colors, labels, shapes.
+ */
+
+export const NODE_COLORS: Record<string, string> = {
+  feature: '#4dabf7',
+  component: '#69db7c',
+  data_entity: '#ffd43b',
+  decision: '#ff8787',
+  tech_choice: '#da77f2',
+  non_functional_requirement: '#ff922b',
+  design_token: '#20c997',
+  design_pattern: '#748ffc',
+  user_role: '#f783ac',
+  flow: '#66d9e8',
+  assumption: '#adb5bd',
+  open_question: '#ffe066',
+};
+
+export const EDGE_LABELS: Record<string, string> = {
+  contains: 'contains',
+  depends_on: 'depends on',
+  governed_by: 'governed by',
+  constrained_by: 'constrained by',
+  implemented_with: 'implemented with',
+  reads_writes: 'reads/writes',
+  exposes: 'exposes',
+  consumes: 'consumes',
+  performed_by: 'performed by',
+  escalates_to: 'escalates to',
+  relates_to: 'relates to',
+};
+
+export const EDGE_COLORS: Record<string, string> = {
+  contains: '#868e96',
+  depends_on: '#ff6b6b',
+  governed_by: '#748ffc',
+  constrained_by: '#ff922b',
+  implemented_with: '#da77f2',
+  reads_writes: '#ffd43b',
+  exposes: '#69db7c',
+  consumes: '#4dabf7',
+  performed_by: '#f783ac',
+  escalates_to: '#ff8787',
+  relates_to: '#adb5bd',
+};
+
+export const TYPE_LABELS: Record<string, string> = {
+  feature: 'FEAT',
+  component: 'COMP',
+  data_entity: 'DATA',
+  decision: 'DEC',
+  tech_choice: 'TECH',
+  non_functional_requirement: 'NFR',
+  design_token: 'DTOK',
+  design_pattern: 'DPAT',
+  user_role: 'ROLE',
+  flow: 'FLOW',
+  assumption: 'ASMP',
+  open_question: 'OQ',
+};
+
+export const LEGEND_LABELS: Record<string, string> = {
+  feature: 'Feature',
+  component: 'Component',
+  data_entity: 'Data Entity',
+  decision: 'Decision',
+  tech_choice: 'Tech Choice',
+  non_functional_requirement: 'Non-Functional Req',
+  design_token: 'Design Token',
+  design_pattern: 'Design Pattern',
+  user_role: 'User Role',
+  flow: 'Flow',
+  assumption: 'Assumption',
+  open_question: 'Open Question',
+};
+
+export const NODE_SHAPES: Record<string, string> = {
+  feature: 'circle',
+  component: 'rounded-rect',
+  data_entity: 'diamond',
+  decision: 'hexagon',
+  tech_choice: 'triangle-up',
+  non_functional_requirement: 'pentagon',
+  design_token: 'star',
+  design_pattern: 'square',
+  user_role: 'oval',
+  flow: 'arrow',
+  assumption: 'triangle-down',
+  open_question: 'octagon',
+};
+
+export const nodeShapePath = (shape: string, r: number): string => {
+  switch (shape) {
+    case 'circle':
+      return `M${-r},0 A${r},${r} 0 1,1 ${r},0 A${r},${r} 0 1,1 ${-r},0 Z`;
+    case 'rounded-rect': {
+      const cr = r * 0.3;
+      const s = r * 0.85;
+      return `M${-s + cr},${-s} L${s - cr},${-s} Q${s},${-s} ${s},${-s + cr} L${s},${s - cr} Q${s},${s} ${s - cr},${s} L${-s + cr},${s} Q${-s},${s} ${-s},${s - cr} L${-s},${-s + cr} Q${-s},${-s} ${-s + cr},${-s} Z`;
+    }
+    case 'diamond': {
+      const s = r * 1.1;
+      return `M0,${-s} L${s},0 L0,${s} L${-s},0 Z`;
+    }
+    case 'hexagon': {
+      const pts: string[] = [];
+      for (let i = 0; i < 6; i++) {
+        const angle = (Math.PI / 3) * i - Math.PI / 2;
+        pts.push(`${r * Math.cos(angle)},${r * Math.sin(angle)}`);
+      }
+      return `M${pts.join(' L')} Z`;
+    }
+    case 'triangle-up': {
+      const s = r * 1.15;
+      return `M0,${-s} L${s},${s * 0.7} L${-s},${s * 0.7} Z`;
+    }
+    case 'triangle-down': {
+      const s = r * 1.15;
+      return `M0,${s} L${s},${-s * 0.7} L${-s},${-s * 0.7} Z`;
+    }
+    case 'pentagon': {
+      const pts: string[] = [];
+      for (let i = 0; i < 5; i++) {
+        const angle = (2 * Math.PI / 5) * i - Math.PI / 2;
+        pts.push(`${r * Math.cos(angle)},${r * Math.sin(angle)}`);
+      }
+      return `M${pts.join(' L')} Z`;
+    }
+    case 'star': {
+      const pts: string[] = [];
+      for (let i = 0; i < 10; i++) {
+        const angle = (Math.PI / 5) * i - Math.PI / 2;
+        const rad = i % 2 === 0 ? r : r * 0.5;
+        pts.push(`${rad * Math.cos(angle)},${rad * Math.sin(angle)}`);
+      }
+      return `M${pts.join(' L')} Z`;
+    }
+    case 'square': {
+      const s = r * 0.85;
+      return `M${-s},${-s} L${s},${-s} L${s},${s} L${-s},${s} Z`;
+    }
+    case 'oval': {
+      const rx = r;
+      const ry = r * 0.7;
+      return `M${-rx},0 A${rx},${ry} 0 1,1 ${rx},0 A${rx},${ry} 0 1,1 ${-rx},0 Z`;
+    }
+    case 'arrow': {
+      const s = r * 0.9;
+      return `M${-s},${-s * 0.5} L${s * 0.3},${-s * 0.5} L${s * 0.3},${-s} L${s},0 L${s * 0.3},${s} L${s * 0.3},${s * 0.5} L${-s},${s * 0.5} Z`;
+    }
+    case 'octagon': {
+      const pts: string[] = [];
+      for (let i = 0; i < 8; i++) {
+        const angle = (Math.PI / 4) * i - Math.PI / 8;
+        pts.push(`${r * Math.cos(angle)},${r * Math.sin(angle)}`);
+      }
+      return `M${pts.join(' L')} Z`;
+    }
+    default:
+      return `M${-r},0 A${r},${r} 0 1,1 ${r},0 A${r},${r} 0 1,1 ${-r},0 Z`;
+  }
+};
+
+export const ALL_NODE_TYPES = [
+  'feature', 'component', 'data_entity', 'decision', 'tech_choice',
+  'non_functional_requirement', 'design_token', 'design_pattern',
+  'user_role', 'flow', 'assumption', 'open_question',
+];
+
+export const COLUMNS = [
+  { id: 'todo', label: 'Todo' },
+  { id: 'in_progress', label: 'In Progress' },
+  { id: 'in_review', label: 'In Review' },
+  { id: 'qa', label: 'QA' },
+  { id: 'done', label: 'Done' },
+];
+
+export const PIPELINE_STATUS_LABELS: Record<string, string> = {
+  creating_worktree: 'Setting up...',
+  debugging: 'Debugging',
+  developing: 'Developing',
+  reviewing: 'Reviewing',
+  fixing_review: 'Fixing review',
+  fixing_merge: 'Fixing merge',
+  merging: 'Merging',
+  completed: 'Completed',
+  failed: 'Failed',
+  blocked: 'Blocked',
+  interrupted: 'Interrupted',
+};

package/templates/product-system/packages/frontend/src/hooks/useAuth.tsx

@@ -0,0 +1,54 @@
+/**
+ * Auth hook — fetches current user info from /api/auth/me.
+ * Attempts token refresh on 401 before giving up.
+ * Returns user object with role, or null if not authenticated.
+ */
+
+import { useState, useEffect } from 'react';
+
+interface User {
+  id: string;
+  email: string;
+  role: string;
+}
+
+interface AuthState {
+  user: User | null;
+  loading: boolean;
+}
+
+export function useAuth(): AuthState {
+  const [state, setState] = useState<AuthState>({ user: null, loading: true });
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        let res = await fetch('/api/auth/me', { credentials: 'same-origin' });
+
+        if (res.status === 401) {
+          const refreshRes = await fetch('/api/auth/refresh', {
+            method: 'POST',
+            credentials: 'same-origin',
+          });
+          if (refreshRes.ok) {
+            res = await fetch('/api/auth/me', { credentials: 'same-origin' });
+          }
+        }
+
+        if (!res.ok) {
+          setState({ user: null, loading: false });
+          return;
+        }
+
+        const data = await res.json();
+        setState({ user: data?.user ?? null, loading: false });
+      } catch {
+        setState({ user: null, loading: false });
+      }
+    };
+
+    fetchUser();
+  }, []);
+
+  return state;
+}

package/templates/product-system/packages/frontend/src/hooks/useGraph.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect, useCallback } from 'react';
+import { apiClient } from '../api/client';
+
+export function useGraph(projectId?: string | null) {
+  const [graphData, setGraphData] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const fetchGraph = useCallback(async () => {
+    try {
+      setLoading(true);
+      const data = await apiClient.fetchGraph(projectId ?? undefined);
+      setGraphData(data);
+      setError(null);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId]);
+
+  useEffect(() => {
+    fetchGraph();
+  }, [fetchGraph]);
+
+  return { graphData, error, loading, refetch: fetchGraph };
+}

package/templates/product-system/packages/frontend/src/hooks/useKanban.ts

@@ -0,0 +1,21 @@
+import { useState, useCallback } from 'react';
+import { apiClient } from '../api/client';
+
+export function useKanban() {
+  const [kanbanData, setKanbanData] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+
+  const fetchKanban = useCallback(async () => {
+    try {
+      setLoading(true);
+      const data = await apiClient.fetchKanban();
+      setKanbanData(data);
+    } catch (err) {
+      console.error('Failed to load kanban:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return { kanbanData, loading, fetchKanban };
+}

package/templates/product-system/packages/frontend/src/hooks/useProjects.ts

@@ -0,0 +1,86 @@
+import { useState, useEffect, useCallback } from 'react';
+import { apiClient } from '../api/client';
+
+const STORAGE_KEY = 'selectedProjectId';
+
+export interface Project {
+  id: string;
+  name: string;
+  isDefault: number;
+  archivedAt: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export function useProjects() {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
+    () => localStorage.getItem(STORAGE_KEY),
+  );
+  const [loading, setLoading] = useState(true);
+
+  const fetchProjects = useCallback(async () => {
+    try {
+      const data = await apiClient.fetchProjects();
+      setProjects(data.projects);
+      return data.projects as Project[];
+    } catch {
+      setProjects([]);
+      return [] as Project[];
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchProjects().then((fetched) => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored && fetched.some((p: Project) => p.id === stored)) {
+        setSelectedProjectId(stored);
+      } else if (fetched.length > 0) {
+        const defaultProject = fetched.find((p: Project) => p.isDefault === 1);
+        const fallback = defaultProject ? defaultProject.id : fetched[0].id;
+        setSelectedProjectId(fallback);
+        localStorage.setItem(STORAGE_KEY, fallback);
+      }
+    });
+  }, [fetchProjects]);
+
+  const selectProject = useCallback((id: string) => {
+    setSelectedProjectId(id);
+    localStorage.setItem(STORAGE_KEY, id);
+  }, []);
+
+  const createProject = useCallback(async (name: string) => {
+    const data = await apiClient.createProject(name);
+    await fetchProjects();
+    selectProject(data.project.id);
+    return data.project;
+  }, [fetchProjects, selectProject]);
+
+  const renameProject = useCallback(async (id: string, name: string) => {
+    await apiClient.renameProject(id, name);
+    await fetchProjects();
+  }, [fetchProjects]);
+
+  const archiveProject = useCallback(async (id: string) => {
+    await apiClient.archiveProject(id);
+    const updated = await fetchProjects();
+    if (selectedProjectId === id && updated.length > 0) {
+      const defaultProject = updated.find((p: Project) => p.isDefault === 1);
+      const fallback = defaultProject ? defaultProject.id : updated[0].id;
+      selectProject(fallback);
+    }
+  }, [fetchProjects, selectProject, selectedProjectId]);
+
+  return {
+    projects,
+    selectedProjectId,
+    loading,
+    selectProject,
+    createProject,
+    renameProject,
+    archiveProject,
+    refetchProjects: fetchProjects,
+  };
+}

package/templates/product-system/packages/frontend/src/hooks/useTheme.ts

@@ -0,0 +1,26 @@
+import { useState, useCallback, useEffect } from 'react';
+
+const STORAGE_KEY = 'graph-ui-theme';
+
+export function useTheme() {
+  const [theme, setThemeState] = useState<'dark' | 'light'>(() => {
+    try {
+      return (localStorage.getItem(STORAGE_KEY) as 'dark' | 'light') || 'dark';
+    } catch {
+      return 'dark';
+    }
+  });
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    try {
+      localStorage.setItem(STORAGE_KEY, theme);
+    } catch { /* storage unavailable */ }
+  }, [theme]);
+
+  const toggle = useCallback(() => {
+    setThemeState(t => t === 'dark' ? 'light' : 'dark');
+  }, []);
+
+  return { theme, toggleTheme: toggle };
+}

package/templates/product-system/packages/frontend/src/hooks/useToast.tsx

@@ -0,0 +1,62 @@
+import React, { createContext, useContext, useState, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+type ToastType = 'error' | 'info' | 'success';
+
+interface Toast {
+  id: number;
+  message: string;
+  type: ToastType;
+}
+
+interface ToastContextValue {
+  showToast: (message: string, type?: ToastType) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+let nextId = 0;
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const timersRef = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map());
+
+  const dismiss = useCallback((id: number) => {
+    const timer = timersRef.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timersRef.current.delete(id);
+    }
+    setToasts(prev => prev.filter(t => t.id !== id));
+  }, []);
+
+  const showToast = useCallback((message: string, type: ToastType = 'error') => {
+    const id = nextId++;
+    setToasts(prev => [...prev, { id, message, type }]);
+    const timer = setTimeout(() => dismiss(id), 6000);
+    timersRef.current.set(id, timer);
+  }, [dismiss]);
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      {createPortal(
+        <div className="toast-container">
+          {toasts.map(toast => (
+            <div key={toast.id} className={`kanban-toast kanban-toast-${toast.type}`}>
+              {toast.message}
+              <button className="kanban-toast-close" onClick={() => dismiss(toast.id)}>&times;</button>
+            </div>
+          ))}
+        </div>,
+        document.body
+      )}
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast must be used within a ToastProvider');
+  return ctx;
+}

package/templates/product-system/packages/frontend/src/hooks/use_projects_logic.test.ts

@@ -0,0 +1,61 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+const STORAGE_KEY = 'selectedProjectId';
+
+/**
+ * Tests for the project selection logic (data transformations only, not React hooks).
+ * Validates localStorage persistence and fallback behavior.
+ */
+
+function resolveSelectedProject(
+  stored: string | null,
+  projects: { id: string; isDefault: number }[],
+): string | null {
+  if (stored && projects.some(p => p.id === stored)) {
+    return stored;
+  }
+  if (projects.length > 0) {
+    const defaultProject = projects.find(p => p.isDefault === 1);
+    return defaultProject ? defaultProject.id : projects[0].id;
+  }
+  return null;
+}
+
+describe('Project selection logic', () => {
+  it('restores stored project when it exists in the list', () => {
+    const result = resolveSelectedProject('proj_002', [
+      { id: 'proj_001', isDefault: 1 },
+      { id: 'proj_002', isDefault: 0 },
+    ]);
+    assert.equal(result, 'proj_002');
+  });
+
+  it('falls back to default project when stored id is missing', () => {
+    const result = resolveSelectedProject('proj_999', [
+      { id: 'proj_001', isDefault: 1 },
+      { id: 'proj_002', isDefault: 0 },
+    ]);
+    assert.equal(result, 'proj_001');
+  });
+
+  it('falls back to first project when no default and stored is missing', () => {
+    const result = resolveSelectedProject(null, [
+      { id: 'proj_001', isDefault: 0 },
+      { id: 'proj_002', isDefault: 0 },
+    ]);
+    assert.equal(result, 'proj_001');
+  });
+
+  it('returns null when no projects exist', () => {
+    const result = resolveSelectedProject('proj_001', []);
+    assert.equal(result, null);
+  });
+
+  it('falls back to default when stored project was archived', () => {
+    const result = resolveSelectedProject('proj_archived', [
+      { id: 'proj_001', isDefault: 1 },
+    ]);
+    assert.equal(result, 'proj_001');
+  });
+});

package/templates/product-system/packages/frontend/src/main.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { App } from './App';
+import './styles/index.css';
+
+const root = createRoot(document.getElementById('root')!);
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);