@evolve.labs/devflow 0.8.0

package/web/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,169 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useUIStore } from '@/lib/stores/uiStore';
+import { useFileStore } from '@/lib/stores/fileStore';
+import { useSettingsStore } from '@/lib/stores/settingsStore';
+
+export function useKeyboardShortcuts() {
+  const { openModal, activeModal, closeModal, toggleSidebar, toggleTerminal, togglePreview } = useUIStore();
+  const {
+    activeFile,
+    saveFile,
+    closeFile,
+    navigateBack,
+    navigateForward,
+    canGoBack,
+    canGoForward,
+    reopenClosedTab,
+  } = useFileStore();
+  const { openSettings, isSettingsOpen, closeSettings } = useSettingsStore();
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+      const modKey = isMac ? e.metaKey : e.ctrlKey;
+
+      // Don't trigger shortcuts when typing in inputs
+      const target = e.target as HTMLElement;
+      const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+
+      // Allow Escape to close modals/settings even in inputs
+      if (e.key === 'Escape') {
+        if (isSettingsOpen) {
+          e.preventDefault();
+          closeSettings();
+          return;
+        }
+        if (activeModal) {
+          e.preventDefault();
+          closeModal();
+          return;
+        }
+      }
+
+      // If in input and not using mod key, skip
+      if (isInput && !modKey) return;
+
+      // Cmd/Ctrl + P - Quick Open
+      if (modKey && e.key === 'p' && !e.shiftKey) {
+        e.preventDefault();
+        openModal('quickOpen');
+        return;
+      }
+
+      // Cmd/Ctrl + Shift + F - Global Search
+      if (modKey && e.shiftKey && e.key === 'f') {
+        e.preventDefault();
+        openModal('globalSearch');
+        return;
+      }
+
+      // Cmd/Ctrl + Shift + P - Command Palette
+      if (modKey && e.shiftKey && e.key === 'p') {
+        e.preventDefault();
+        openModal('commandPalette');
+        return;
+      }
+
+      // Cmd/Ctrl + B - Toggle Sidebar
+      if (modKey && e.key === 'b' && !e.shiftKey) {
+        e.preventDefault();
+        toggleSidebar();
+        return;
+      }
+
+      // Cmd/Ctrl + ` - Toggle Terminal
+      if (modKey && e.key === '`') {
+        e.preventDefault();
+        toggleTerminal();
+        return;
+      }
+
+      // Cmd/Ctrl + Shift + V - Toggle Preview
+      if (modKey && e.shiftKey && e.key === 'v') {
+        e.preventDefault();
+        togglePreview();
+        return;
+      }
+
+      // Cmd/Ctrl + S - Save File
+      if (modKey && e.key === 's' && !e.shiftKey) {
+        e.preventDefault();
+        if (activeFile) {
+          saveFile(activeFile);
+        }
+        return;
+      }
+
+      // Cmd/Ctrl + , - Open Settings
+      if (modKey && e.key === ',') {
+        e.preventDefault();
+        openSettings();
+        return;
+      }
+
+      // Cmd/Ctrl + Tab - Recent Files
+      if (modKey && e.key === 'Tab' && !e.shiftKey) {
+        e.preventDefault();
+        openModal('recentFiles');
+        return;
+      }
+
+      // Cmd/Ctrl + W - Close Tab
+      if (modKey && e.key === 'w' && !e.shiftKey) {
+        e.preventDefault();
+        if (activeFile) {
+          closeFile(activeFile);
+        }
+        return;
+      }
+
+      // Cmd/Ctrl + Shift + T - Reopen Closed Tab
+      if (modKey && e.shiftKey && e.key === 't') {
+        e.preventDefault();
+        reopenClosedTab();
+        return;
+      }
+
+      // Alt + Left - Navigate Back
+      if (e.altKey && e.key === 'ArrowLeft' && !modKey) {
+        e.preventDefault();
+        if (canGoBack()) {
+          navigateBack();
+        }
+        return;
+      }
+
+      // Alt + Right - Navigate Forward
+      if (e.altKey && e.key === 'ArrowRight' && !modKey) {
+        e.preventDefault();
+        if (canGoForward()) {
+          navigateForward();
+        }
+        return;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [
+    openModal,
+    activeModal,
+    closeModal,
+    toggleSidebar,
+    toggleTerminal,
+    togglePreview,
+    activeFile,
+    saveFile,
+    closeFile,
+    navigateBack,
+    navigateForward,
+    canGoBack,
+    canGoForward,
+    reopenClosedTab,
+    openSettings,
+    isSettingsOpen,
+    closeSettings,
+  ]);
+}

package/web/hooks/useListNavigation.ts

@@ -0,0 +1,237 @@
+'use client';
+
+import { useState, useCallback, useEffect, KeyboardEvent } from 'react';
+
+/**
+ * Custom hook for keyboard navigation in lists.
+ * Implements accessible list navigation per WAI-ARIA guidelines.
+ *
+ * Features:
+ * - Arrow up/down navigation
+ * - Home/End jump to first/last
+ * - Enter to select
+ * - Escape to cancel
+ * - Type-ahead search (optional)
+ *
+ * @param options - Configuration options
+ * @returns Navigation state and handlers
+ */
+interface UseListNavigationOptions<T> {
+  /** Array of items to navigate */
+  items: T[];
+  /** Called when an item is selected (Enter key) */
+  onSelect?: (item: T, index: number) => void;
+  /** Called when Escape is pressed */
+  onEscape?: () => void;
+  /** Navigation orientation: 'vertical' (default) or 'horizontal' */
+  orientation?: 'vertical' | 'horizontal';
+  /** Whether navigation wraps around (default: true) */
+  loop?: boolean;
+  /** Initial selected index (default: 0) */
+  initialIndex?: number;
+  /** Enable type-ahead search (default: false) */
+  typeAhead?: boolean;
+  /** Function to get searchable text from item for type-ahead */
+  getItemText?: (item: T) => string;
+}
+
+interface UseListNavigationReturn {
+  /** Current selected index */
+  selectedIndex: number;
+  /** Set selected index programmatically */
+  setSelectedIndex: (index: number) => void;
+  /** Handle keyboard events - attach to container */
+  handleKeyDown: (event: KeyboardEvent) => void;
+  /** Check if index is selected */
+  isSelected: (index: number) => boolean;
+  /** Move to next item */
+  moveNext: () => void;
+  /** Move to previous item */
+  movePrevious: () => void;
+  /** Move to first item */
+  moveFirst: () => void;
+  /** Move to last item */
+  moveLast: () => void;
+  /** Select current item */
+  selectCurrent: () => void;
+  /** Reset to initial state */
+  reset: () => void;
+}
+
+export function useListNavigation<T>({
+  items,
+  onSelect,
+  onEscape,
+  orientation = 'vertical',
+  loop = true,
+  initialIndex = 0,
+  typeAhead = false,
+  getItemText,
+}: UseListNavigationOptions<T>): UseListNavigationReturn {
+  const [selectedIndex, setSelectedIndex] = useState(
+    Math.min(initialIndex, Math.max(0, items.length - 1))
+  );
+  const [searchString, setSearchString] = useState('');
+  const [searchTimeout, setSearchTimeout] = useState<NodeJS.Timeout | null>(null);
+
+  // Reset index when items change
+  useEffect(() => {
+    if (items.length === 0) {
+      setSelectedIndex(-1);
+    } else if (selectedIndex >= items.length) {
+      setSelectedIndex(items.length - 1);
+    }
+  }, [items.length, selectedIndex]);
+
+  const moveNext = useCallback(() => {
+    setSelectedIndex((current) => {
+      if (items.length === 0) return -1;
+      if (current >= items.length - 1) {
+        return loop ? 0 : current;
+      }
+      return current + 1;
+    });
+  }, [items.length, loop]);
+
+  const movePrevious = useCallback(() => {
+    setSelectedIndex((current) => {
+      if (items.length === 0) return -1;
+      if (current <= 0) {
+        return loop ? items.length - 1 : 0;
+      }
+      return current - 1;
+    });
+  }, [items.length, loop]);
+
+  const moveFirst = useCallback(() => {
+    if (items.length > 0) {
+      setSelectedIndex(0);
+    }
+  }, [items.length]);
+
+  const moveLast = useCallback(() => {
+    if (items.length > 0) {
+      setSelectedIndex(items.length - 1);
+    }
+  }, [items.length]);
+
+  const selectCurrent = useCallback(() => {
+    if (selectedIndex >= 0 && selectedIndex < items.length && onSelect) {
+      onSelect(items[selectedIndex], selectedIndex);
+    }
+  }, [selectedIndex, items, onSelect]);
+
+  const reset = useCallback(() => {
+    setSelectedIndex(Math.min(initialIndex, Math.max(0, items.length - 1)));
+    setSearchString('');
+    if (searchTimeout) {
+      clearTimeout(searchTimeout);
+      setSearchTimeout(null);
+    }
+  }, [initialIndex, items.length, searchTimeout]);
+
+  // Type-ahead search
+  const handleTypeAhead = useCallback(
+    (char: string) => {
+      if (!typeAhead || !getItemText) return false;
+
+      const newSearchString = searchString + char.toLowerCase();
+      setSearchString(newSearchString);
+
+      // Clear previous timeout
+      if (searchTimeout) {
+        clearTimeout(searchTimeout);
+      }
+
+      // Set new timeout to reset search
+      setSearchTimeout(
+        setTimeout(() => {
+          setSearchString('');
+        }, 500)
+      );
+
+      // Find matching item
+      const matchIndex = items.findIndex((item) =>
+        getItemText(item).toLowerCase().startsWith(newSearchString)
+      );
+
+      if (matchIndex !== -1) {
+        setSelectedIndex(matchIndex);
+        return true;
+      }
+
+      return false;
+    },
+    [typeAhead, getItemText, searchString, searchTimeout, items]
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const prevKey = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+      const nextKey = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+
+      switch (event.key) {
+        case prevKey:
+          event.preventDefault();
+          movePrevious();
+          break;
+
+        case nextKey:
+          event.preventDefault();
+          moveNext();
+          break;
+
+        case 'Home':
+          event.preventDefault();
+          moveFirst();
+          break;
+
+        case 'End':
+          event.preventDefault();
+          moveLast();
+          break;
+
+        case 'Enter':
+        case ' ':
+          event.preventDefault();
+          selectCurrent();
+          break;
+
+        case 'Escape':
+          event.preventDefault();
+          if (onEscape) {
+            onEscape();
+          }
+          break;
+
+        default:
+          // Type-ahead for printable characters
+          if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            if (handleTypeAhead(event.key)) {
+              event.preventDefault();
+            }
+          }
+          break;
+      }
+    },
+    [orientation, movePrevious, moveNext, moveFirst, moveLast, selectCurrent, onEscape, handleTypeAhead]
+  );
+
+  const isSelected = useCallback(
+    (index: number) => index === selectedIndex,
+    [selectedIndex]
+  );
+
+  return {
+    selectedIndex,
+    setSelectedIndex,
+    handleKeyDown,
+    isSelected,
+    moveNext,
+    movePrevious,
+    moveFirst,
+    moveLast,
+    selectCurrent,
+    reset,
+  };
+}

package/web/lib/autopilotConstants.ts

@@ -0,0 +1,213 @@
+import { promises as fs } from 'fs';
+import path from 'node:path';
+
+/**
+ * Shared autopilot constants and utilities.
+ * Used by both /api/autopilot/execute and /api/autopilot/terminal-execute routes.
+ */
+
+export const VALID_AGENTS = [
+  'strategist', 'architect', 'system-designer', 'builder', 'guardian', 'chronicler',
+] as const;
+
+export type AgentName = typeof VALID_AGENTS[number];
+
+export function isValidAgent(agent: string): agent is AgentName {
+  return VALID_AGENTS.includes(agent as AgentName);
+}
+
+export const AGENT_SKILLS: Record<AgentName, string> = {
+  strategist: '/agents:strategist',
+  architect: '/agents:architect',
+  'system-designer': '/agents:system-designer',
+  builder: '/agents:builder',
+  guardian: '/agents:guardian',
+  chronicler: '/agents:chronicler',
+};
+
+export const AGENT_PROMPTS: Record<AgentName, string> = {
+  strategist: `Analise a spec e refine os requisitos:
+{spec_content}
+
+1. Identificar requisitos implícitos
+2. Listar acceptance criteria
+3. Dependências e riscos
+4. Estimar complexidade`,
+
+  architect: `Defina a arquitetura com base na spec:
+{spec_content}
+
+Contexto anterior: {previous_output}
+
+1. Arquitetura da solução
+2. Padrões e tecnologias
+3. Componentes necessários
+4. Decisões importantes`,
+
+  'system-designer': `Projete o system design com base na spec:
+{spec_content}
+
+Contexto anterior: {previous_output}
+
+1. Back-of-the-envelope estimation
+2. High-level design
+3. Data model e storage
+4. Scalability e reliability`,
+
+  builder: `Implemente a solução conforme spec e design:
+{spec_content}
+
+Contexto anterior: {previous_output}
+
+1. Criar/modificar arquivos necessários
+2. Implementar lógica principal
+3. Tratamento de erros`,
+
+  guardian: `Revise o código implementado:
+{spec_content}
+
+Implementação: {previous_output}
+
+1. Segurança
+2. Performance
+3. Edge cases
+4. Melhorias necessárias`,
+
+  chronicler: `Documente as mudanças realizadas:
+{spec_content}
+
+Implementação: {previous_output}
+
+1. Resumir o que foi implementado
+2. Arquivos criados/modificados
+3. Atualizar tasks na spec`,
+};
+
+export const AGENT_TIMEOUTS: Record<AgentName, number> = {
+  strategist: 300,
+  architect: 600,
+  'system-designer': 600,
+  builder: 1200,
+  guardian: 600,
+  chronicler: 300,
+};
+
+// Agents that produce actionable output for task tracking
+export const TASK_TRACKING_AGENTS: AgentName[] = ['builder', 'guardian', 'chronicler'];
+
+/**
+ * Load the full agent definition from .claude/commands/agents/{agent}.md
+ * Returns the file content or null if not found.
+ */
+export async function loadAgentDefinition(projectPath: string, agent: AgentName): Promise<string | null> {
+  const filePath = path.join(projectPath, '.claude', 'commands', 'agents', `${agent}.md`);
+  try {
+    return await fs.readFile(filePath, 'utf-8');
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Build the full prompt for a given agent phase.
+ * If agentDefinition is provided (from loadAgentDefinition), uses it as context.
+ * Otherwise falls back to the slash command text (won't work with --print mode).
+ */
+export function buildPrompt(
+  agent: AgentName,
+  specContent: string,
+  previousOutputs: string[],
+  agentDefinition?: string | null,
+): string {
+  const prompt = AGENT_PROMPTS[agent]
+    .replace('{spec_content}', specContent)
+    .replace('{previous_output}', previousOutputs.join('\n---\n') || 'N/A');
+
+  // Use full agent definition if available, otherwise fallback to skill command
+  const agentContext = agentDefinition || AGENT_SKILLS[agent];
+
+  return `${agentContext}\n\n---\n\n${prompt}`;
+}
+
+/**
+ * Extract unchecked task titles from a markdown spec file.
+ * Matches lines like: - [ ] Task title
+ */
+export function extractUncheckedTasks(content: string): string[] {
+  const tasks: string[] = [];
+  const regex = /^\s*[-*]\s*\[ \]\s*(?:\[[^\]]+\]\s*)?(.+)$/gm;
+  let match;
+  while ((match = regex.exec(content)) !== null) {
+    tasks.push(match[1].trim());
+  }
+  return tasks;
+}
+
+/**
+ * Check if the agent output mentions a task as completed.
+ * Uses case-insensitive substring matching with completion context.
+ */
+export function isTaskMentionedAsCompleted(taskTitle: string, output: string): boolean {
+  const lower = output.toLowerCase();
+  const taskLower = taskTitle.toLowerCase();
+
+  if (!lower.includes(taskLower)) return false;
+
+  // For short task titles (< 10 chars), require a completion keyword nearby
+  if (taskLower.length < 10) {
+    const completionKeywords = [
+      'completed', 'done', 'implemented', 'finished', 'created',
+      'added', 'fixed', 'resolved', 'built', 'configured',
+      '✅', '✓', '[x]', 'complete',
+    ];
+    const idx = lower.indexOf(taskLower);
+    const context = lower.slice(Math.max(0, idx - 200), idx + taskLower.length + 200);
+    return completionKeywords.some(kw => context.includes(kw));
+  }
+
+  return true;
+}
+
+/**
+ * After a phase completes, auto-detect completed tasks and update the spec file.
+ */
+export async function autoUpdateSpecTasks(
+  specFilePath: string,
+  agentOutput: string
+): Promise<string[]> {
+  const completedTasks: string[] = [];
+
+  try {
+    const content = await fs.readFile(specFilePath, 'utf-8');
+    const uncheckedTasks = extractUncheckedTasks(content);
+
+    if (uncheckedTasks.length === 0) return [];
+
+    let updatedContent = content;
+    for (const taskTitle of uncheckedTasks) {
+      if (isTaskMentionedAsCompleted(taskTitle, agentOutput)) {
+        const escapedTitle = taskTitle.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const taskRegex = new RegExp(
+          `^(\\s*[-*]\\s*)\\[ \\](\\s*(?:\\[[^\\]]+\\]\\s*)?)${escapedTitle}`,
+          'gm'
+        );
+        updatedContent = updatedContent.replace(taskRegex, (match, prefix, middle) => {
+          completedTasks.push(taskTitle);
+          return `${prefix}[x]${middle}${taskTitle}`;
+        });
+      }
+    }
+
+    if (completedTasks.length > 0) {
+      await fs.writeFile(specFilePath, updatedContent, 'utf-8');
+    }
+  } catch (error) {
+    console.error('Error auto-updating spec tasks:', error);
+  }
+
+  return completedTasks;
+}
+
+/** Completion marker used to detect when an autopilot phase finishes in the terminal. */
+export const PHASE_DONE_MARKER = '___DEVFLOW_PHASE_DONE_';
+export const PHASE_DONE_REGEX = /___DEVFLOW_PHASE_DONE_(\d+)___/;

package/web/lib/constants/agents.ts

@@ -0,0 +1,67 @@
+import type { Agent } from '@/lib/types';
+
+// Agent definitions
+export const AGENTS: Agent[] = [
+  {
+    id: 'strategist',
+    name: '@strategist',
+    displayName: 'Strategist',
+    icon: '📊',
+    color: '#3B82F6',
+    description: 'Product Manager & Analista - Transforma problemas em planos',
+    shortDescription: 'Planejamento & Produto',
+  },
+  {
+    id: 'architect',
+    name: '@architect',
+    displayName: 'Architect',
+    icon: '🏗️',
+    color: '#8B5CF6',
+    description: 'Solutions Architect - Design técnico e decisões',
+    shortDescription: 'Design & Arquitetura',
+  },
+  {
+    id: 'system-designer',
+    name: '@system-designer',
+    displayName: 'System Designer',
+    icon: '⚙️',
+    color: '#06B6D4',
+    description: 'System Design Specialist - Infraestrutura em escala',
+    shortDescription: 'System Design & Escala',
+  },
+  {
+    id: 'builder',
+    name: '@builder',
+    displayName: 'Builder',
+    icon: '🔨',
+    color: '#F59E0B',
+    description: 'Senior Developer - Implementação de código',
+    shortDescription: 'Implementação',
+  },
+  {
+    id: 'guardian',
+    name: '@guardian',
+    displayName: 'Guardian',
+    icon: '🛡️',
+    color: '#10B981',
+    description: 'QA Engineer - Qualidade e segurança',
+    shortDescription: 'Qualidade & Testes',
+  },
+  {
+    id: 'chronicler',
+    name: '@chronicler',
+    displayName: 'Chronicler',
+    icon: '📝',
+    color: '#EC4899',
+    description: 'Technical Writer - Documentação',
+    shortDescription: 'Documentação',
+  },
+];
+
+export const getAgentById = (id: string): Agent | undefined => {
+  return AGENTS.find(agent => agent.id === id);
+};
+
+export const getAgentByName = (name: string): Agent | undefined => {
+  return AGENTS.find(agent => agent.name === name);
+};