@evolve.labs/devflow 0.8.0

package/web/lib/stores/specsStore.ts

@@ -0,0 +1,297 @@
+import { create } from 'zustand';
+import type { Spec, Requirement, DesignDecision, Task, SpecPhase } from '@/lib/types';
+
+// Progress info for a spec
+export interface SpecProgress {
+  total: number;
+  completed: number;
+  inProgress: number;
+  percentage: number;
+  status: 'not_started' | 'in_progress' | 'completed';
+}
+
+interface SpecsState {
+  // State
+  specs: Spec[];
+  requirements: Requirement[];
+  decisions: DesignDecision[];
+  tasks: Task[];
+  isLoading: boolean;
+  error: string | null;
+  selectedSpecId: string | null;
+  activePhase: SpecPhase;
+  filterProject: string | null; // null = show all
+
+  // Actions
+  loadSpecs: (projectPaths: string[]) => Promise<void>;
+  createSpec: (projectPath: string, data: CreateSpecData) => Promise<string | null>;
+  setSelectedSpec: (id: string | null) => void;
+  setActivePhase: (phase: SpecPhase) => void;
+  setFilterProject: (projectPath: string | null) => void;
+  updateTaskStatus: (taskId: string, status: Task['status']) => Promise<void>;
+  getSpecsByPhase: (phase: SpecPhase) => Spec[];
+  getRequirementsBySpec: (specId: string) => Requirement[];
+  getTasksBySpec: (specId: string) => Task[];
+  getDecisionsBySpec: (specId: string) => DesignDecision[];
+  getSpecProgress: (specId: string) => SpecProgress;
+  getFilteredRequirements: () => Requirement[];
+  getFilteredDecisions: () => DesignDecision[];
+  getFilteredTasks: () => Task[];
+}
+
+interface CreateSpecData {
+  type: 'story' | 'adr' | 'spec';
+  title: string;
+  description?: string;
+  priority?: string;
+  phase?: SpecPhase;
+}
+
+function basename(p: string): string {
+  return p.split('/').pop() || p;
+}
+
+export const useSpecsStore = create<SpecsState>((set, get) => ({
+  specs: [],
+  requirements: [],
+  decisions: [],
+  tasks: [],
+  isLoading: false,
+  error: null,
+  selectedSpecId: null,
+  activePhase: 'requirements',
+  filterProject: null,
+
+  loadSpecs: async (projectPaths: string[]) => {
+    if (projectPaths.length === 0) return;
+
+    set({ isLoading: true, error: null });
+
+    try {
+      // Fetch specs from all projects in parallel
+      const results = await Promise.all(
+        projectPaths.map(async (projectPath) => {
+          const response = await fetch(
+            `/api/specs?projectPath=${encodeURIComponent(projectPath)}`
+          );
+
+          if (!response.ok) {
+            console.error(`Failed to load specs from ${basename(projectPath)}`);
+            return null;
+          }
+
+          const data = await response.json();
+          const projectName = basename(projectPath);
+
+          // Tag each item with sourceProject
+          return {
+            specs: (data.specs || []).map((s: Spec) => ({ ...s, sourceProject: projectPath })),
+            requirements: (data.requirements || []).map((r: Requirement) => ({ ...r, sourceProject: projectPath })),
+            decisions: (data.decisions || []).map((d: DesignDecision) => ({ ...d, sourceProject: projectPath })),
+            tasks: (data.tasks || []).map((t: Task) => ({ ...t, sourceProject: projectPath })),
+          };
+        })
+      );
+
+      // Merge results from all projects
+      const allSpecs: Spec[] = [];
+      const allRequirements: Requirement[] = [];
+      const allDecisions: DesignDecision[] = [];
+      const allTasks: Task[] = [];
+
+      for (const result of results) {
+        if (!result) continue;
+        allSpecs.push(...result.specs);
+        allRequirements.push(...result.requirements);
+        allDecisions.push(...result.decisions);
+        allTasks.push(...result.tasks);
+      }
+
+      // Deduplicate by composite key (sourceProject + id)
+      const dedup = <T extends { id: string; sourceProject?: string }>(items: T[]) =>
+        [...new Map(items.map(i => [`${i.sourceProject || ''}:${i.id}`, i])).values()];
+
+      set({
+        specs: dedup(allSpecs),
+        requirements: dedup(allRequirements),
+        decisions: dedup(allDecisions),
+        tasks: dedup(allTasks),
+        isLoading: false,
+      });
+    } catch (error) {
+      console.error('Error loading specs:', error);
+      set({
+        error: error instanceof Error ? error.message : 'Failed to load specs',
+        isLoading: false,
+      });
+    }
+  },
+
+  createSpec: async (projectPath: string, data: CreateSpecData) => {
+    try {
+      const response = await fetch('/api/specs', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          projectPath,
+          ...data,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to create spec');
+      }
+
+      const result = await response.json();
+
+      // Reload specs from all projects that were previously loaded
+      const currentPaths = [...new Set(get().specs.map(s => s.sourceProject).filter(Boolean))] as string[];
+      if (!currentPaths.includes(projectPath)) {
+        currentPaths.push(projectPath);
+      }
+      await get().loadSpecs(currentPaths);
+
+      return result.id;
+    } catch (error) {
+      console.error('Error creating spec:', error);
+      set({
+        error: error instanceof Error ? error.message : 'Failed to create spec',
+      });
+      return null;
+    }
+  },
+
+  setSelectedSpec: (id: string | null) => {
+    set({ selectedSpecId: id });
+  },
+
+  setActivePhase: (phase: SpecPhase) => {
+    set({ activePhase: phase });
+  },
+
+  setFilterProject: (projectPath: string | null) => {
+    set({ filterProject: projectPath });
+  },
+
+  updateTaskStatus: async (taskId: string, status: Task['status']) => {
+    const { tasks } = get();
+    const task = tasks.find((t) => t.id === taskId);
+
+    if (!task) return;
+
+    // Update local state immediately for responsive UI
+    set((state) => ({
+      tasks: state.tasks.map((t) =>
+        t.id === taskId
+          ? {
+              ...t,
+              status,
+              completedAt: status === 'completed' ? new Date() : undefined,
+            }
+          : t
+      ),
+    }));
+
+    // Persist to file if we have filePath
+    if (task.filePath) {
+      try {
+        const response = await fetch('/api/specs', {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            filePath: task.filePath,
+            taskTitle: task.title,
+            completed: status === 'completed',
+          }),
+        });
+
+        if (!response.ok) {
+          console.error('Failed to persist task status');
+          // Revert on failure
+          set((state) => ({
+            tasks: state.tasks.map((t) =>
+              t.id === taskId
+                ? {
+                    ...t,
+                    status: task.status,
+                    completedAt: task.completedAt,
+                  }
+                : t
+            ),
+          }));
+        }
+      } catch (error) {
+        console.error('Error persisting task status:', error);
+      }
+    }
+  },
+
+  getSpecsByPhase: (phase: SpecPhase) => {
+    const { specs, filterProject } = get();
+    return specs.filter((spec) =>
+      spec.phase === phase && (!filterProject || spec.sourceProject === filterProject)
+    );
+  },
+
+  getRequirementsBySpec: (specId: string) => {
+    const { requirements } = get();
+    return requirements.filter((req) => req.specId === specId);
+  },
+
+  getTasksBySpec: (specId: string) => {
+    const { tasks } = get();
+    return tasks.filter((task) => task.specId === specId);
+  },
+
+  getDecisionsBySpec: (specId: string) => {
+    const { decisions } = get();
+    return decisions.filter((dec) => dec.specId === specId);
+  },
+
+  getSpecProgress: (specId: string) => {
+    const { tasks } = get();
+    const specTasks = tasks.filter((task) => task.specId === specId);
+
+    if (specTasks.length === 0) {
+      return {
+        total: 0,
+        completed: 0,
+        inProgress: 0,
+        percentage: 0,
+        status: 'not_started' as const,
+      };
+    }
+
+    const completed = specTasks.filter((t) => t.status === 'completed').length;
+    const inProgress = specTasks.filter((t) => t.status === 'in_progress').length;
+    const total = specTasks.length;
+    const percentage = Math.round((completed / total) * 100);
+
+    let status: 'not_started' | 'in_progress' | 'completed' = 'not_started';
+    if (completed === total) {
+      status = 'completed';
+    } else if (completed > 0 || inProgress > 0) {
+      status = 'in_progress';
+    }
+
+    return { total, completed, inProgress, percentage, status };
+  },
+
+  getFilteredRequirements: () => {
+    const { requirements, filterProject } = get();
+    if (!filterProject) return requirements;
+    return requirements.filter(r => r.sourceProject === filterProject);
+  },
+
+  getFilteredDecisions: () => {
+    const { decisions, filterProject } = get();
+    if (!filterProject) return decisions;
+    return decisions.filter(d => d.sourceProject === filterProject);
+  },
+
+  getFilteredTasks: () => {
+    const { tasks, filterProject } = get();
+    if (!filterProject) return tasks;
+    return tasks.filter(t => t.sourceProject === filterProject);
+  },
+}));

package/web/lib/stores/uiStore.ts

@@ -0,0 +1,175 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { ModelId, AutopilotConfig } from '@/lib/types';
+
+type Theme = 'light' | 'dark' | 'system';
+type SidebarPanel = 'specs' | 'git' | 'dashboard';
+type RightPanel = 'chat' | 'tasks';
+type ModalType = 'quickOpen' | 'globalSearch' | 'commandPalette' | 'recentFiles' | null;
+
+interface UIState {
+  // State
+  theme: Theme;
+  sidebarVisible: boolean;
+  sidebarWidth: number;
+  chatPanelVisible: boolean;
+  chatPanelWidth: number;
+  activePanel: SidebarPanel;
+  activeRightPanel: RightPanel;
+  terminalVisible: boolean;
+  terminalHeight: number;
+  terminalMaximized: boolean;
+  previewVisible: boolean;
+  specsPanelVisible: boolean;
+  specsPanelWidth: number;
+
+  // Modal State
+  activeModal: ModalType;
+
+  // Model & Autopilot
+  selectedModel: ModelId;
+  autopilot: AutopilotConfig;
+
+  // Actions
+  setTheme: (theme: Theme) => void;
+  toggleSidebar: () => void;
+  setSidebarWidth: (width: number) => void;
+  toggleChatPanel: () => void;
+  setChatPanelWidth: (width: number) => void;
+  setActivePanel: (panel: SidebarPanel) => void;
+  setActiveRightPanel: (panel: RightPanel) => void;
+  toggleTerminal: () => void;
+  setTerminalHeight: (height: number) => void;
+  toggleTerminalMaximized: () => void;
+  togglePreview: () => void;
+  toggleSpecsPanel: () => void;
+  setSpecsPanelWidth: (width: number) => void;
+  setSelectedModel: (model: ModelId) => void;
+  setAutopilot: (config: Partial<AutopilotConfig>) => void;
+  toggleAutopilot: () => void;
+  openModal: (modal: ModalType) => void;
+  closeModal: () => void;
+}
+
+export const useUIStore = create<UIState>()(
+  persist(
+    (set) => ({
+      theme: 'dark',
+      sidebarVisible: true,
+      sidebarWidth: 280,
+      chatPanelVisible: true,
+      chatPanelWidth: 420,
+      activePanel: 'specs',
+      activeRightPanel: 'chat',
+      terminalVisible: false,
+      terminalHeight: 200,
+      terminalMaximized: false,
+      previewVisible: false,
+      specsPanelVisible: true,
+      specsPanelWidth: 300,
+
+      // Modal state
+      activeModal: null,
+
+      // Default model and autopilot config
+      selectedModel: 'claude-sonnet-4',
+      autopilot: {
+        enabled: false,
+        maxIterations: 10,
+        pauseOnError: true,
+        requireApproval: 'files',
+      },
+
+      setTheme: (theme) => {
+        set({ theme });
+        if (typeof document !== 'undefined') {
+          document.documentElement.classList.remove('light', 'dark');
+          if (theme === 'system') {
+            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
+              .matches
+              ? 'dark'
+              : 'light';
+            document.documentElement.classList.add(systemTheme);
+          } else {
+            document.documentElement.classList.add(theme);
+          }
+        }
+      },
+
+      toggleSidebar: () => {
+        set((state) => ({ sidebarVisible: !state.sidebarVisible }));
+      },
+
+      setSidebarWidth: (width) => {
+        set({ sidebarWidth: Math.max(200, Math.min(500, width)) });
+      },
+
+      toggleChatPanel: () => {
+        set((state) => ({ chatPanelVisible: !state.chatPanelVisible }));
+      },
+
+      setChatPanelWidth: (width) => {
+        set({ chatPanelWidth: Math.max(320, Math.min(600, width)) });
+      },
+
+      setActivePanel: (panel) => {
+        set({ activePanel: panel });
+      },
+
+      setActiveRightPanel: (panel) => {
+        set({ activeRightPanel: panel });
+      },
+
+      toggleTerminal: () => {
+        set((state) => ({ terminalVisible: !state.terminalVisible }));
+      },
+
+      setTerminalHeight: (height) => {
+        set({ terminalHeight: Math.max(150, Math.min(600, height)) });
+      },
+
+      toggleTerminalMaximized: () => {
+        set((state) => ({ terminalMaximized: !state.terminalMaximized }));
+      },
+
+      togglePreview: () => {
+        set((state) => ({ previewVisible: !state.previewVisible }));
+      },
+
+      toggleSpecsPanel: () => {
+        set((state) => ({ specsPanelVisible: !state.specsPanelVisible }));
+      },
+
+      setSpecsPanelWidth: (width) => {
+        set({ specsPanelWidth: Math.max(250, Math.min(450, width)) });
+      },
+
+      setSelectedModel: (model) => {
+        set({ selectedModel: model });
+      },
+
+      setAutopilot: (config) => {
+        set((state) => ({
+          autopilot: { ...state.autopilot, ...config }
+        }));
+      },
+
+      toggleAutopilot: () => {
+        set((state) => ({
+          autopilot: { ...state.autopilot, enabled: !state.autopilot.enabled }
+        }));
+      },
+
+      openModal: (modal) => {
+        set({ activeModal: modal });
+      },
+
+      closeModal: () => {
+        set({ activeModal: null });
+      },
+    }),
+    {
+      name: 'devflow-ui-store',
+    }
+  )
+);

package/web/lib/types/index.ts

@@ -0,0 +1,177 @@
+// File types
+export interface FileNode {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  extension?: string;
+  children?: FileNode[];
+  size?: number;
+  modifiedAt?: string;
+}
+
+export interface OpenFile {
+  path: string;
+  name: string;
+  content: string;
+  originalContent: string;
+  isDirty: boolean;
+  language: string;
+}
+
+// Chat types
+export interface ChatImage {
+  id: string;
+  data: string; // base64 data
+  mimeType: string;
+  name?: string;
+}
+
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  images?: ChatImage[];
+  agent?: string;
+  timestamp: Date;
+  isStreaming?: boolean;
+}
+
+export interface ChatSession {
+  id: string;
+  name: string;
+  createdAt: Date;
+  messageCount: number;
+}
+
+// Agent types
+export interface Agent {
+  id: string;
+  name: string;
+  displayName: string;
+  icon: string;
+  color: string;
+  description: string;
+  shortDescription: string;
+}
+
+// Project types
+export interface ProjectInfo {
+  path: string;
+  name: string;
+  isValid: boolean;
+  hasDevflow: boolean;
+  hasClaudeProject: boolean;
+  stats: ProjectStats;
+}
+
+export interface ProjectStats {
+  specs: number;
+  stories: number;
+  adrs: number;
+  agents: number;
+}
+
+// Health types
+export interface HealthStatus {
+  claudeCli: {
+    installed: boolean;
+    authenticated: boolean;
+    version?: string;
+    error?: string;
+  };
+  project: {
+    valid: boolean;
+    hasDevflow: boolean;
+    hasClaudeProject: boolean;
+  };
+  system: {
+    platform: string;
+    nodeVersion: string;
+  };
+}
+
+// API Response types
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+}
+
+// Spec types (Kiro-style workflow)
+export type SpecPhase = 'requirements' | 'design' | 'tasks';
+
+export interface Spec {
+  id: string;
+  name: string;
+  description: string;
+  phase: SpecPhase;
+  status: 'draft' | 'approved' | 'implemented';
+  createdAt: Date;
+  updatedAt: Date;
+  filePath?: string;
+  sourceProject?: string;
+}
+
+export interface Requirement {
+  id: string;
+  specId: string;
+  title: string;
+  description: string;
+  type: 'functional' | 'non-functional' | 'constraint';
+  priority: 'must' | 'should' | 'could' | 'wont';
+  acceptanceCriteria: string[];
+  status: 'draft' | 'approved' | 'implemented';
+  filePath?: string;
+  sourceProject?: string;
+}
+
+export interface DesignDecision {
+  id: string;
+  specId: string;
+  title: string;
+  context: string;
+  decision: string;
+  consequences: string[];
+  alternatives?: string[];
+  status: 'proposed' | 'accepted' | 'deprecated';
+  filePath?: string;
+  sourceProject?: string;
+}
+
+// Task types
+export type TaskStatus = 'pending' | 'in_progress' | 'completed' | 'blocked';
+export type TaskPriority = 'low' | 'medium' | 'high' | 'critical';
+
+export interface Task {
+  id: string;
+  specId?: string;
+  filePath?: string;
+  title: string;
+  description: string;
+  status: TaskStatus;
+  priority: TaskPriority;
+  dependencies: string[];
+  assignedAgent?: string;
+  estimatedTokens?: number;
+  createdAt: Date;
+  completedAt?: Date;
+  sourceProject?: string;
+}
+
+// Model types
+export type ModelId = 'claude-sonnet-4' | 'claude-opus-4' | 'auto';
+
+export interface ModelConfig {
+  id: ModelId;
+  name: string;
+  description: string;
+  icon: string;
+}
+
+// Autopilot types
+export interface AutopilotConfig {
+  enabled: boolean;
+  maxIterations: number;
+  pauseOnError: boolean;
+  requireApproval: 'none' | 'files' | 'all';
+}