@evolve.labs/devflow 0.8.0

package/lib/utils.js

@@ -0,0 +1,157 @@
+const { execSync } = require('node:child_process');
+const fs = require('node:fs');
+const path = require('node:path');
+const readline = require('node:readline');
+
+// ANSI color helpers (no chalk dependency)
+const c = {
+  red:    (s) => `\x1b[0;31m${s}\x1b[0m`,
+  green:  (s) => `\x1b[0;32m${s}\x1b[0m`,
+  yellow: (s) => `\x1b[1;33m${s}\x1b[0m`,
+  blue:   (s) => `\x1b[0;34m${s}\x1b[0m`,
+};
+
+function printHeader(version) {
+  const line = c.blue('\u2501'.repeat(55));
+  console.log(line);
+  console.log(c.blue(`  DevFlow CLI v${version}`));
+  console.log(line);
+  console.log();
+}
+
+function success(msg) { console.log(`${c.green('\u2713')} ${msg}`); }
+function error(msg)   { console.log(`${c.red('\u2717')} ${msg}`); }
+function warn(msg)    { console.log(`${c.yellow('\u26A0')} ${msg}`); }
+function info(msg)    { console.log(`${c.blue('\u2139')} ${msg}`); }
+
+function printSuccess(version) {
+  const line = c.green('\u2501'.repeat(55));
+  console.log();
+  console.log(line);
+  console.log(c.green(`  \u2713 DevFlow v${version} installed successfully!`));
+  console.log(line);
+  console.log();
+}
+
+function printUpdateSuccess(version) {
+  const line = c.green('\u2501'.repeat(55));
+  console.log();
+  console.log(line);
+  console.log(c.green(`  \u2713 DevFlow updated to v${version}!`));
+  console.log(line);
+  console.log();
+}
+
+// Interactive y/N confirmation
+function confirm(question) {
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+    });
+    rl.question(`${question} (y/N) `, (answer) => {
+      rl.close();
+      resolve(answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes');
+    });
+  });
+}
+
+// Check if a CLI command exists
+function commandExists(cmd) {
+  try {
+    execSync(`command -v ${cmd}`, { stdio: 'ignore' });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// Check required/recommended dependencies
+function checkDependencies() {
+  const platform = process.platform === 'darwin' ? 'macOS'
+    : process.platform === 'win32' ? 'Windows'
+    : 'Linux';
+  info(`System: ${platform}`);
+  console.log();
+
+  if (commandExists('claude')) {
+    success('Claude Code: installed');
+  } else {
+    warn('Claude Code: not found');
+    console.log('  Install: npm install -g @anthropic-ai/claude-code');
+  }
+
+  if (commandExists('git')) {
+    success('Git: installed');
+  } else {
+    warn('Git: not found (recommended)');
+  }
+
+  console.log();
+}
+
+// Copy directory recursively using Node 18+ fs.cp
+async function copyDir(src, dest) {
+  await fs.promises.mkdir(path.dirname(dest), { recursive: true });
+  await fs.promises.cp(src, dest, { recursive: true, force: true });
+}
+
+// Copy single file, creating parent dirs as needed
+async function copyFile(src, dest) {
+  await fs.promises.mkdir(path.dirname(dest), { recursive: true });
+  await fs.promises.copyFile(src, dest);
+}
+
+// Create multiple directories
+async function ensureDirs(root, dirs) {
+  for (const dir of dirs) {
+    await fs.promises.mkdir(path.join(root, dir), { recursive: true });
+  }
+}
+
+// Create .gitkeep in directories that should be tracked but are empty
+async function createGitkeep(root, dirs) {
+  for (const dir of dirs) {
+    const gitkeepPath = path.join(root, dir, '.gitkeep');
+    try {
+      await fs.promises.access(gitkeepPath);
+    } catch {
+      await fs.promises.writeFile(gitkeepPath, '');
+    }
+  }
+}
+
+// Check if a path exists
+async function pathExists(p) {
+  try {
+    await fs.promises.access(p);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// Resolve target path relative to cwd
+function resolveTarget(targetArg) {
+  return path.resolve(process.cwd(), targetArg);
+}
+
+module.exports = {
+  c,
+  printHeader,
+  success,
+  error,
+  warn,
+  info,
+  printSuccess,
+  printUpdateSuccess,
+  confirm,
+  commandExists,
+  checkDependencies,
+  copyDir,
+  copyFile,
+  ensureDirs,
+  createGitkeep,
+  pathExists,
+  resolveTarget,
+};

package/lib/web.js

@@ -0,0 +1,119 @@
+const { execSync, spawn } = require('node:child_process');
+const path = require('node:path');
+const fs = require('node:fs');
+const { PACKAGE_ROOT } = require('./constants');
+
+/**
+ * devflow web - Start the DevFlow Web Dashboard
+ */
+async function webCommand(options) {
+  const port = options.port || '3000';
+  const webDir = path.join(PACKAGE_ROOT, 'web');
+
+  // 1. Verify web/ directory exists
+  if (!fs.existsSync(webDir)) {
+    console.error('Error: Web IDE files not found.');
+    console.error('Re-install devflow with: npm install -g devflow-agents');
+    process.exit(1);
+  }
+
+  // 2. Check if package.json exists
+  const pkgPath = path.join(webDir, 'package.json');
+  if (!fs.existsSync(pkgPath)) {
+    console.error('Error: web/package.json not found.');
+    process.exit(1);
+  }
+
+  // 3. Install dependencies if needed
+  const nodeModules = path.join(webDir, 'node_modules');
+  if (!fs.existsSync(nodeModules)) {
+    console.log('Installing web dependencies...');
+    try {
+      execSync('npm install --production', {
+        cwd: webDir,
+        stdio: 'inherit',
+        timeout: 120_000,
+      });
+    } catch {
+      console.error('Failed to install dependencies.');
+      process.exit(1);
+    }
+  }
+
+  // 4. Determine the project path to open
+  const projectPath = options.project || process.cwd();
+  const resolvedProject = path.resolve(projectPath);
+
+  if (!fs.existsSync(resolvedProject)) {
+    console.error(`Project path not found: ${resolvedProject}`);
+    process.exit(1);
+  }
+
+  // 5. Start the web server
+  const isDev = options.dev || false;
+  const cmd = isDev ? 'dev' : 'start';
+
+  // Build first if not dev mode and .next doesn't exist
+  if (!isDev) {
+    const nextDir = path.join(webDir, '.next');
+    if (!fs.existsSync(nextDir)) {
+      console.log('Building web dashboard...');
+      try {
+        execSync('npx next build', {
+          cwd: webDir,
+          stdio: 'inherit',
+          timeout: 300_000,
+        });
+      } catch {
+        console.error('Build failed. Try running with --dev flag for development mode.');
+        process.exit(1);
+      }
+    }
+  }
+
+  console.log(`\nStarting DevFlow Web Dashboard on port ${port}...`);
+  console.log(`Project: ${resolvedProject}\n`);
+
+  // Set environment variables
+  const env = {
+    ...process.env,
+    PORT: port,
+    DEVFLOW_PROJECT_PATH: resolvedProject,
+  };
+
+  // Start the server
+  const child = spawn('npx', ['next', cmd, '-p', port], {
+    cwd: webDir,
+    env,
+    stdio: 'inherit',
+  });
+
+  // Open browser after a short delay (unless --no-open)
+  if (options.open !== false) {
+    setTimeout(() => {
+      const url = `http://localhost:${port}`;
+      try {
+        const openCmd = process.platform === 'darwin' ? 'open'
+          : process.platform === 'win32' ? 'start'
+          : 'xdg-open';
+        execSync(`${openCmd} ${url}`, { stdio: 'ignore' });
+      } catch {
+        console.log(`Open your browser at: ${url}`);
+      }
+    }, 3000);
+  }
+
+  // Handle process signals
+  const cleanup = () => {
+    child.kill();
+    process.exit(0);
+  };
+  process.on('SIGINT', cleanup);
+  process.on('SIGTERM', cleanup);
+
+  child.on('exit', (code) => {
+    process.exit(code || 0);
+  });
+}
+
+module.exports = { webCommand };

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@evolve.labs/devflow",
+  "version": "0.8.0",
+  "description": "Multi-agent system for software development with Claude Code. 6 specialized agents (Strategist, Architect, System Designer, Builder, Guardian, Chronicler) as slash commands.",
+  "keywords": [
+    "claude-code",
+    "ai-agents",
+    "multi-agent",
+    "devflow",
+    "claude",
+    "anthropic",
+    "software-development"
+  ],
+  "author": "Evolve Labs",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/evolve-labs-cloud/devflow.git"
+  },
+  "homepage": "https://github.com/evolve-labs-cloud/devflow",
+  "bin": {
+    "devflow": "bin/devflow.js"
+  },
+  "type": "commonjs",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "files": [
+    "bin/",
+    "lib/",
+    ".claude/commands/",
+    ".claude_project",
+    ".devflow/agents/",
+    ".devflow/project.yaml",
+    ".gitignore-template",
+    "docs/decisions/000-template.md",
+    "web/app/",
+    "web/components/",
+    "web/hooks/",
+    "web/lib/",
+    "web/package.json",
+    "web/next.config.js",
+    "web/tsconfig.json",
+    "web/tailwind.config.ts",
+    "web/postcss.config.js",
+    "web/README.md",
+    "web/CHANGELOG.md",
+    "LICENSE",
+    "README.md"
+  ],
+  "dependencies": {
+    "commander": "^12.0.0"
+  },
+  "scripts": {
+    "prepublishOnly": "cp .gitignore .gitignore-template"
+  }
+}

package/web/CHANGELOG.md

@@ -0,0 +1,192 @@
+# Changelog
+
+All notable changes to DevFlow IDE will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.7.0] - 2026-02-11
+
+### Added
+
+- **System Designer Agent** - 6th agent for system design & infrastructure at scale
+  - System Design Documents (SDDs) with back-of-the-envelope calculations
+  - RFCs, capacity planning, trade-off analysis
+  - SLA/SLO/SLI definitions and reliability patterns
+  - Quick action button in terminal panel
+- **SystemDesignerIcon** - Custom SVG icon (gear/infrastructure)
+- **npm Package** - `devflow-agents` available on npm
+  - `npx devflow-agents init` for quick installation
+  - `devflow update` for updates
+  - Optional `--web` flag to include Web IDE
+
+### Changed
+
+- Updated all agent panels to include system-designer (Autopilot, Terminal, Config Modal)
+- AgentId type now includes 'system-designer'
+- DEFAULT_PHASES includes System Design phase between Design and Implementation
+- Agent regex in specsParser includes system-designer
+- Version bumped from 0.6.0 to 0.7.0
+
+---
+
+## [0.5.0] - 2025-12-29
+
+### Major Change: Terminal as Primary Interface
+
+O Chat customizado foi **removido** e substituído pelo **Terminal integrado** como interface principal para interação com Claude CLI.
+
+**Motivação:**
+- Performance nativa do Claude CLI (sem overhead de parsing)
+- Todas as features funcionam: session resume, tools, MCP servers
+- Output em tempo real sem processamento adicional
+- Menos código para manter
+
+### Added
+
+- **Terminal Quick Actions** - Barra de ações rápidas no terminal
+  - Comandos rápidos: Claude, New Feature, Security Check, Create ADR
+  - Botões de agentes: Strategist, Architect, Builder, Guardian, Chronicler
+  - Injeção de comandos direto no terminal PTY
+- **Terminal Resize Handle** - Arraste para ajustar altura do terminal
+  - Limites: 150px (mín) a 600px (máx)
+  - Altura persiste no localStorage
+  - Feedback visual durante arraste
+- **Toast Notifications** - Feedback em ações do terminal
+  - "Terminal ready" ao conectar (apenas uma vez)
+  - "Terminal disconnected" ao perder conexão
+  - Toast no reset de settings
+- **AGENTS Constant** - Centralizado em `lib/constants/agents.ts`
+  - Helper functions: `getAgentById()`, `getAgentByName()`
+- **Agent Task Updates** - Instruções nos agentes para atualizar tasks
+  - Builder agora marca checkboxes `[x]` ao completar tasks
+  - Guardian atualiza status de review nas stories
+  - Status muda para "completed" quando todas tasks concluídas
+
+### Changed
+
+- **Terminal Interface** - Agora é a forma principal de interagir com Claude
+  - Performance nativa do Claude CLI
+  - Session resume funciona automaticamente
+  - Todas as tools e MCP servers disponíveis
+- **Resize Debouncing** - Terminal resize com debounce de 150ms
+  - Evita chamadas excessivas de fit() e API
+  - Elimina "tremidas" durante resize
+- **Toast Behavior** - Toast de conexão só aparece uma vez por sessão
+  - Corrigido closure issue no handler de erro
+
+### Removed
+
+- **Chat Panel** - Completamente removido
+  - `components/chat/ChatPanel.tsx`
+  - `components/chat/ChatMessage.tsx`
+  - `components/chat/AgentSelector.tsx`
+  - `components/chat/ChatSettings.tsx`
+  - `lib/stores/chatStore.ts`
+  - `app/api/chat/route.ts`
+- **Chat Commands** - Removidos do CommandPalette
+  - Agent selection, clear chat, toggle chat
+- **Chat Status** - Removido indicador de streaming do StatusBar
+
+### Refactored
+
+- `StatusBar.tsx` - Removido import e uso de chatStore
+- `CommandPalette.tsx` - Removidos comandos de chat/agentes
+- `SettingsPanel.tsx` - Import de AGENTS de constants
+- `SpecsPanel.tsx` - Removida integração com chat
+- `page.tsx` (IDE) - Removido painel de chat lateral
+
+---
+
+## [0.4.0] - 2025-12-26
+
+### Added
+
+- **US-019: Melhorias de UX - Navegação Avançada**
+  - Breadcrumbs mostrando caminho do arquivo ativo
+  - Botões Back/Forward para histórico de navegação (Alt+Left/Right)
+  - Tab history com navegação entre arquivos abertos
+  - Recent Files modal (Ctrl+Tab) com últimos 20 arquivos
+  - Pinned tabs para fixar arquivos importantes
+  - Tab context menu (Close, Close Others, Close to Right, Pin/Unpin)
+- **US-019: Melhorias de UX - Acessibilidade**
+  - Focus trap em todos os modais
+  - Keyboard navigation no FileExplorer (Up/Down/Left/Right/Enter)
+  - Keyboard navigation no SpecsPanel (Up/Down/Enter)
+  - ARIA labels em todos os elementos interativos
+  - Skip links para navegação rápida
+  - Tree navigation hook seguindo WAI-ARIA TreeView pattern
+- **Progress por Spec** - Barra de progresso visual nos cards
+  - Mostra X/Y tasks completas com porcentagem
+  - Status dinâmico: not_started → in_progress → completed
+  - Cores adaptativas baseadas no progresso
+- **Settings Panel** - Modal de configurações (Cmd+,)
+  - Editor: font size, tab size, word wrap, minimap, line numbers
+  - Terminal: font size
+  - AI: default model, default agent, permission mode
+  - General: auto-save toggle and delay
+  - Keyboard shortcuts reference
+- **Image Analysis in Chat** - Suporte a análise de imagens
+  - Paste (Cmd+V), drag & drop, file picker
+  - Imagens enviadas ao Claude para análise
+
+### Changed
+
+- Monaco Editor usa settings do settingsStore
+- Terminal usa fontSize do settingsStore
+- EditorTabs redesenhado com controles de navegação
+- FileExplorer com navegação por teclado completa
+
+### New Files
+
+- `components/editor/Breadcrumbs.tsx`
+- `components/editor/TabContextMenu.tsx`
+- `components/modals/RecentFiles.tsx`
+- `components/ui/SkipLinks.tsx`
+- `hooks/useFocusTrap.ts`
+- `hooks/useListNavigation.ts`
+- `hooks/useTreeNavigation.ts`
+
+---
+
+## [0.2.0] - 2025-12-22
+
+### Added
+
+- Dashboard Panel with metrics and health check
+- Mermaid diagrams in Markdown preview
+- File Explorer context menu
+- Quick Open (Cmd+P), Global Search (Cmd+Shift+F)
+- Command Palette (Cmd+Shift+P)
+- Modern dark theme with purple accents
+- Toast notifications system (sonner)
+- Skeleton loaders for loading states
+
+### Changed
+
+- Unified data source for Kanban and SpecsPanel
+- Health API now checks parent directory for .devflow
+- Faster health check
+
+### Removed
+
+- Knowledge Graph visualization
+- Kanban Board view (replaced by SpecsPanel)
+
+---
+
+## [0.1.0] - 2025-12-19
+
+### Added
+
+- Initial release
+- Monaco Editor with syntax highlighting
+- File Explorer with tree view
+- Terminal with xterm.js + PTY
+- Git Panel with status, commit, push/pull
+- Specs/Tasks panel with workflow phases
+- Resizable panels
+
+---
+
+*Maintained by @chronicler*

package/web/README.md

@@ -0,0 +1,156 @@
+# DevFlow IDE Web
+
+Interface web para o DevFlow - Spec-driven development powered by AI agents.
+
+**v0.7.0** - System Designer agent + npm package
+
+## Features
+
+### Core
+
+- **Terminal Integrado** - Interface principal para Claude CLI
+  - Performance nativa (sem overhead de parsing)
+  - Todas as features do Claude: session resume, tools, MCP servers
+  - Quick Actions: botões para agentes e comandos frequentes
+  - Altura ajustável via drag
+- **Monaco Editor** - Editor de código profissional
+  - Syntax highlighting para 50+ linguagens
+  - IntelliSense, Find & Replace, Multi-cursor
+  - Configurações persistentes
+- **File Explorer** - Navegação completa
+  - Keyboard navigation (WAI-ARIA TreeView)
+  - Context menu para operações
+  - Busca de arquivos
+
+### Painéis
+
+- **Specs Panel** - Visualize requirements, design e tasks
+  - Progress bars por spec
+  - Navegação por teclado
+- **Dashboard** - Métricas e health check do projeto
+- **Git Panel** - Status, commit, push/pull, branches
+- **Settings** - Configurações do editor, terminal e AI
+
+### Produtividade
+
+- **Quick Open** (Cmd+P) - Busca rápida de arquivos
+- **Global Search** (Cmd+Shift+F) - Busca em todo o projeto
+- **Command Palette** (Cmd+Shift+P) - Todos os comandos
+- **Recent Files** (Ctrl+Tab) - Arquivos recentes
+- **Tab History** (Alt+Left/Right) - Navegação back/forward
+
+## Requisitos
+
+- Node.js 18+
+- Claude Code CLI instalado e autenticado (`claude login`)
+- Um projeto DevFlow existente
+
+## Instalação
+
+```bash
+# Instalar dependências
+npm install
+
+# Iniciar em modo desenvolvimento
+npm run dev
+```
+
+Acesse http://localhost:3000
+
+## Uso
+
+1. Na página inicial, insira o caminho do seu projeto DevFlow
+2. O projeto será carregado com o file explorer à esquerda
+3. Clique em arquivos para editar no Monaco Editor
+4. Use o **Terminal** (Ctrl+`) para interagir com Claude CLI
+5. Use os **Quick Actions** do terminal para chamar agentes
+
+### Agentes DevFlow
+
+Execute via terminal ou Quick Actions:
+
+| Agente | Comando | Função |
+|--------|---------|--------|
+| Strategist | `claude /agents:strategist` | Planejamento e Produto |
+| Architect | `claude /agents:architect` | Design e Arquitetura |
+| System Designer | `claude /agents:system-designer` | System Design e Escala |
+| Builder | `claude /agents:builder` | Implementação |
+| Guardian | `claude /agents:guardian` | Qualidade e Testes |
+| Chronicler | `claude /agents:chronicler` | Documentação |
+
+## Stack
+
+- **Framework**: Next.js 15 (App Router)
+- **Editor**: Monaco Editor
+- **Terminal**: xterm.js + node-pty (PTY real)
+- **State**: Zustand with persist
+- **Styling**: Tailwind CSS
+- **Icons**: Lucide React
+- **Notifications**: Sonner
+
+## Estrutura
+
+```
+web/
+├── app/                    # Next.js App Router
+│   ├── api/               # API Routes
+│   │   ├── terminal/     # Terminal PTY (SSE)
+│   │   ├── files/        # File operations
+│   │   ├── git/          # Git operations
+│   │   ├── specs/        # Specs loading
+│   │   └── health/       # System health
+│   ├── ide/              # IDE workspace
+│   └── page.tsx          # Home page
+├── components/            # React components
+│   ├── terminal/         # Terminal + Quick Actions
+│   ├── editor/           # Monaco, Tabs, Breadcrumbs
+│   ├── explorer/         # File tree
+│   ├── specs/            # Specs panel
+│   ├── git/              # Git panel
+│   ├── dashboard/        # Dashboard
+│   ├── settings/         # Settings modal
+│   ├── modals/           # QuickOpen, Search, etc.
+│   └── layout/           # Sidebar, StatusBar
+├── hooks/                 # Custom hooks
+│   ├── useFocusTrap.ts
+│   ├── useKeyboardShortcuts.ts
+│   └── useTreeNavigation.ts
+├── lib/
+│   ├── stores/           # Zustand stores
+│   ├── constants/        # AGENTS, etc.
+│   ├── types/            # TypeScript types
+│   └── utils.ts          # Utilities
+└── README.md
+```
+
+## Scripts
+
+```bash
+npm run dev      # Desenvolvimento
+npm run build    # Build para produção
+npm run start    # Iniciar produção
+npm run lint     # Lint
+```
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| Cmd+S | Salvar arquivo |
+| Cmd+P | Quick Open |
+| Cmd+Shift+F | Global Search |
+| Cmd+Shift+P | Command Palette |
+| Cmd+, | Settings |
+| Cmd+B | Toggle sidebar |
+| Ctrl+` | Toggle terminal |
+| Ctrl+Tab | Recent Files |
+| Alt+Left/Right | Navegar histórico |
+| Cmd+W | Fechar tab |
+
+## Changelog
+
+Veja [CHANGELOG.md](./CHANGELOG.md) para histórico completo de mudanças.
+
+---
+
+**Powered by Evolve Labs** | DevFlow v0.7.0