feat: add consumer frontend web application structure
Adds complete monorepo structure for BMAD web application: - Frontend (Next.js 14): - Landing page with tracks overview - Agent chat interface with real-time messaging - Zustand state management - TanStack Query for data fetching - Tailwind CSS with shadcn/ui components - Backend (Express + Socket.io): - REST API for auth, projects, agents, workflows, artifacts - WebSocket for real-time agent communication - JWT authentication - BMAD adapter for loading agents and workflows - Shared packages: - @bmad/core: Types, agent/workflow loaders - @bmad/ui: Reusable UI components - Documentation: - Architecture document with system design - Complete README with setup instructions This enables end-users to interact with BMAD agents through a web interface instead of CLI.
This commit is contained in:
Claude
parent
c18904d674
commit
1ac7a69a46
|
|
@ -0,0 +1,22 @@
|
||||||
|
# BMAD Web Environment Variables
|
||||||
|
|
||||||
|
# API Configuration
|
||||||
|
PORT=4000
|
||||||
|
NODE_ENV=development
|
||||||
|
FRONTEND_URL=http://localhost:3000
|
||||||
|
|
||||||
|
# Authentication
|
||||||
|
JWT_SECRET=your-super-secret-jwt-key-change-in-production
|
||||||
|
|
||||||
|
# Database (for production)
|
||||||
|
DATABASE_URL=postgresql://user:password@localhost:5432/bmad_web
|
||||||
|
|
||||||
|
# Redis (for production)
|
||||||
|
REDIS_URL=redis://localhost:6379
|
||||||
|
|
||||||
|
# BMAD Core Path (optional, defaults to parent directory)
|
||||||
|
BMAD_ROOT=../
|
||||||
|
|
||||||
|
# OpenAI/Anthropic API Keys (for AI features)
|
||||||
|
OPENAI_API_KEY=your-openai-api-key
|
||||||
|
ANTHROPIC_API_KEY=your-anthropic-api-key
|
||||||
|
|
@ -0,0 +1,257 @@
|
||||||
|
# BMAD Web - Consumer Frontend Application
|
||||||
|
|
||||||
|
Uma aplicacao web completa para consumidores finais do BMAD-METHOD (Build More, Architect Dreams).
|
||||||
|
|
||||||
|
## Visao Geral
|
||||||
|
|
||||||
|
Este projeto transforma o BMAD-METHOD (atualmente uma CLI) em uma aplicacao web acessivel para usuarios finais, permitindo que qualquer pessoa utilize o framework de desenvolvimento agil impulsionado por IA.
|
||||||
|
|
||||||
|
## Estrutura do Projeto
|
||||||
|
|
||||||
|
```
|
||||||
|
bmad-web/
|
||||||
|
├── apps/
|
||||||
|
│ ├── web/ # Frontend Next.js
|
||||||
|
│ └── api/ # Backend Express + WebSocket
|
||||||
|
├── packages/
|
||||||
|
│ ├── bmad-core/ # Core BMAD como biblioteca
|
||||||
|
│ ├── ui/ # Componentes UI compartilhados
|
||||||
|
│ └── config/ # Configuracoes compartilhadas
|
||||||
|
└── docs/ # Documentacao
|
||||||
|
```
|
||||||
|
|
||||||
|
## Stack Tecnologico
|
||||||
|
|
||||||
|
### Frontend
|
||||||
|
- **Next.js 14** - Framework React com App Router
|
||||||
|
- **TypeScript** - Type safety
|
||||||
|
- **Tailwind CSS** - Estilos
|
||||||
|
- **shadcn/ui** - Componentes
|
||||||
|
- **Zustand** - Estado global
|
||||||
|
- **TanStack Query** - Data fetching
|
||||||
|
- **Socket.io Client** - Real-time
|
||||||
|
|
||||||
|
### Backend
|
||||||
|
- **Node.js 20+** - Runtime
|
||||||
|
- **Express** - HTTP Server
|
||||||
|
- **Socket.io** - WebSocket
|
||||||
|
- **Prisma** - ORM (para producao)
|
||||||
|
- **JWT** - Autenticacao
|
||||||
|
|
||||||
|
## Requisitos
|
||||||
|
|
||||||
|
- Node.js 20.0.0 ou superior
|
||||||
|
- npm 10.0.0 ou superior
|
||||||
|
|
||||||
|
## Instalacao
|
||||||
|
|
||||||
|
1. Clone o repositorio:
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/seu-usuario/BMAD-METHOD.git
|
||||||
|
cd BMAD-METHOD/bmad-web
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Instale as dependencias:
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Configure as variaveis de ambiente:
|
||||||
|
```bash
|
||||||
|
cp .env.example .env
|
||||||
|
cp apps/api/.env.example apps/api/.env
|
||||||
|
cp apps/web/.env.local.example apps/web/.env.local
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Inicie o desenvolvimento:
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Isso iniciara:
|
||||||
|
- Frontend: http://localhost:3000
|
||||||
|
- API: http://localhost:4000
|
||||||
|
|
||||||
|
## Funcionalidades
|
||||||
|
|
||||||
|
### Para Usuarios
|
||||||
|
|
||||||
|
- **Dashboard de Projeto** - Visao geral do seu projeto
|
||||||
|
- **Chat com Agentes IA** - Interacao em tempo real com 21+ agentes especializados
|
||||||
|
- **Workflows Guiados** - 50+ workflows para todas as fases de desenvolvimento
|
||||||
|
- **Editor de Artefatos** - Edicao e versionamento de documentos
|
||||||
|
- **Tracks Adaptativos** - Quick Flow (~5min), BMAD Method (~15min), Enterprise (~30min)
|
||||||
|
|
||||||
|
### Agentes Disponiveis
|
||||||
|
|
||||||
|
| Agente | Funcao |
|
||||||
|
|--------|--------|
|
||||||
|
| John (PM) | Product Manager - PRDs e requisitos |
|
||||||
|
| Alex (Architect) | Arquiteto - Design de sistemas |
|
||||||
|
| Dev | Desenvolvedor Senior - Implementacao |
|
||||||
|
| Barry | Quick-Flow Solo Dev - Desenvolvimento rapido |
|
||||||
|
| UX Designer | Design de experiencia do usuario |
|
||||||
|
| Tech Writer | Documentacao tecnica |
|
||||||
|
| TEA | Test Architecture Agent - Estrategia de testes |
|
||||||
|
| Scrum Master | Coordenacao de equipe |
|
||||||
|
| Analyst | Analise de dados e requisitos |
|
||||||
|
|
||||||
|
### Workflows Principais
|
||||||
|
|
||||||
|
**Analise**
|
||||||
|
- Project Discovery
|
||||||
|
- Requirement Elicitation
|
||||||
|
- Team Composition
|
||||||
|
|
||||||
|
**Planejamento**
|
||||||
|
- PRD Creation
|
||||||
|
- Workflow Initialization
|
||||||
|
|
||||||
|
**Solutioning**
|
||||||
|
- Architecture Design
|
||||||
|
- Epic/Story Creation
|
||||||
|
- Excalidraw Diagrams
|
||||||
|
|
||||||
|
**Implementacao**
|
||||||
|
- Sprint Planning
|
||||||
|
- Sprint Status
|
||||||
|
- Retrospectives
|
||||||
|
|
||||||
|
**Quick Flow**
|
||||||
|
- Quick-Spec (~5 min)
|
||||||
|
- Quick-Dev (~5 min)
|
||||||
|
|
||||||
|
## Scripts Disponiveis
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Desenvolvimento
|
||||||
|
npm run dev # Inicia frontend e backend
|
||||||
|
|
||||||
|
# Build
|
||||||
|
npm run build # Build de producao
|
||||||
|
|
||||||
|
# Lint
|
||||||
|
npm run lint # Verifica codigo
|
||||||
|
|
||||||
|
# Banco de dados (producao)
|
||||||
|
npm run db:generate # Gera cliente Prisma
|
||||||
|
npm run db:push # Sincroniza schema
|
||||||
|
npm run db:studio # Interface do banco
|
||||||
|
|
||||||
|
# Limpeza
|
||||||
|
npm run clean # Remove node_modules e builds
|
||||||
|
```
|
||||||
|
|
||||||
|
## Arquitetura
|
||||||
|
|
||||||
|
### Frontend (Next.js)
|
||||||
|
|
||||||
|
```
|
||||||
|
apps/web/src/
|
||||||
|
├── app/ # Rotas (App Router)
|
||||||
|
│ ├── (auth)/ # Login, Register
|
||||||
|
│ ├── (dashboard)/ # Area logada
|
||||||
|
│ ├── projects/ # Gestao de projetos
|
||||||
|
│ ├── agents/ # Interface de agentes
|
||||||
|
│ └── workflows/ # Visualizacao de workflows
|
||||||
|
├── components/ # Componentes React
|
||||||
|
├── hooks/ # Hooks customizados
|
||||||
|
├── stores/ # Estado (Zustand)
|
||||||
|
└── types/ # TypeScript types
|
||||||
|
```
|
||||||
|
|
||||||
|
### Backend (Express)
|
||||||
|
|
||||||
|
```
|
||||||
|
apps/api/src/
|
||||||
|
├── routes/ # Endpoints REST
|
||||||
|
├── services/ # Logica de negocio
|
||||||
|
├── middleware/ # Auth, errors
|
||||||
|
├── websocket/ # Handlers real-time
|
||||||
|
├── bmad/ # Integracao BMAD Core
|
||||||
|
└── database/ # Models (Prisma)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Packages
|
||||||
|
|
||||||
|
- **@bmad/core** - Tipos, loaders de agentes e workflows
|
||||||
|
- **@bmad/ui** - Componentes compartilhados (Button, Card, Input, etc.)
|
||||||
|
- **@bmad/config** - Configuracoes de TypeScript, ESLint
|
||||||
|
|
||||||
|
## API Endpoints
|
||||||
|
|
||||||
|
### Autenticacao
|
||||||
|
- `POST /api/auth/register` - Registro
|
||||||
|
- `POST /api/auth/login` - Login
|
||||||
|
- `POST /api/auth/logout` - Logout
|
||||||
|
- `GET /api/auth/me` - Usuario atual
|
||||||
|
|
||||||
|
### Projetos
|
||||||
|
- `GET /api/projects` - Listar projetos
|
||||||
|
- `POST /api/projects` - Criar projeto
|
||||||
|
- `GET /api/projects/:id` - Detalhes do projeto
|
||||||
|
- `PUT /api/projects/:id` - Atualizar projeto
|
||||||
|
- `DELETE /api/projects/:id` - Deletar projeto
|
||||||
|
|
||||||
|
### Agentes
|
||||||
|
- `GET /api/agents` - Listar agentes
|
||||||
|
- `GET /api/agents/:id` - Detalhes do agente
|
||||||
|
- `POST /api/agents/:id/chat` - Chat com agente
|
||||||
|
|
||||||
|
### Workflows
|
||||||
|
- `GET /api/workflows` - Listar workflows
|
||||||
|
- `POST /api/workflows/:id/start` - Iniciar workflow
|
||||||
|
- `GET /api/workflows/instance/:id/status` - Status
|
||||||
|
- `POST /api/workflows/instance/:id/step/complete` - Completar passo
|
||||||
|
|
||||||
|
### WebSocket Events
|
||||||
|
- `agent:message` - Mensagem do agente
|
||||||
|
- `agent:typing` - Indicador de digitacao
|
||||||
|
- `workflow:progress` - Progresso do workflow
|
||||||
|
- `artifact:updated` - Artefato atualizado
|
||||||
|
|
||||||
|
## Proximos Passos
|
||||||
|
|
||||||
|
### Fase 1 - MVP
|
||||||
|
- [x] Estrutura do monorepo
|
||||||
|
- [x] Frontend basico com Next.js
|
||||||
|
- [x] API com autenticacao
|
||||||
|
- [x] Chat com agentes
|
||||||
|
- [ ] Integracao com LLM (OpenAI/Anthropic)
|
||||||
|
- [ ] Persistencia em banco de dados
|
||||||
|
|
||||||
|
### Fase 2 - Features
|
||||||
|
- [ ] Todos os agentes integrados
|
||||||
|
- [ ] Workflow engine completo
|
||||||
|
- [ ] Editor de artefatos rico
|
||||||
|
- [ ] Versionamento de artefatos
|
||||||
|
|
||||||
|
### Fase 3 - Polish
|
||||||
|
- [ ] Onboarding wizard
|
||||||
|
- [ ] Templates de projeto
|
||||||
|
- [ ] Temas e personalizacao
|
||||||
|
- [ ] Mobile responsivo
|
||||||
|
|
||||||
|
### Fase 4 - Scale
|
||||||
|
- [ ] Colaboracao em tempo real
|
||||||
|
- [ ] Integracoes (GitHub, Jira)
|
||||||
|
- [ ] API publica
|
||||||
|
- [ ] Analytics
|
||||||
|
|
||||||
|
## Contribuindo
|
||||||
|
|
||||||
|
1. Fork o repositorio
|
||||||
|
2. Crie uma branch (`git checkout -b feature/nova-funcionalidade`)
|
||||||
|
3. Commit suas mudancas (`git commit -am 'Adiciona nova funcionalidade'`)
|
||||||
|
4. Push para a branch (`git push origin feature/nova-funcionalidade`)
|
||||||
|
5. Abra um Pull Request
|
||||||
|
|
||||||
|
## Licenca
|
||||||
|
|
||||||
|
MIT - Veja [LICENSE](../LICENSE) para detalhes.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**BMAD - Build More, Architect Dreams**
|
||||||
|
|
||||||
|
Framework de desenvolvimento agil impulsionado por IA com 21 agentes especializados e 50+ workflows guiados.
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
# BMAD API Environment Variables
|
||||||
|
|
||||||
|
PORT=4000
|
||||||
|
NODE_ENV=development
|
||||||
|
FRONTEND_URL=http://localhost:3000
|
||||||
|
|
||||||
|
# Authentication
|
||||||
|
JWT_SECRET=your-super-secret-jwt-key-change-in-production
|
||||||
|
|
||||||
|
# Database
|
||||||
|
DATABASE_URL=postgresql://user:password@localhost:5432/bmad_web
|
||||||
|
|
||||||
|
# Redis
|
||||||
|
REDIS_URL=redis://localhost:6379
|
||||||
|
|
||||||
|
# BMAD Core Path
|
||||||
|
BMAD_ROOT=../../..
|
||||||
|
|
||||||
|
# AI Provider Keys
|
||||||
|
OPENAI_API_KEY=
|
||||||
|
ANTHROPIC_API_KEY=
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
{
|
||||||
|
"name": "@bmad/api",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "tsx watch src/index.ts",
|
||||||
|
"build": "tsc && tsc-alias",
|
||||||
|
"start": "node dist/index.js",
|
||||||
|
"lint": "eslint src --ext .ts",
|
||||||
|
"clean": "rm -rf dist node_modules",
|
||||||
|
"db:generate": "prisma generate",
|
||||||
|
"db:push": "prisma db push",
|
||||||
|
"db:studio": "prisma studio"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@bmad/core": "workspace:*",
|
||||||
|
"@prisma/client": "^5.6.0",
|
||||||
|
"bcryptjs": "^2.4.3",
|
||||||
|
"cookie-parser": "^1.4.6",
|
||||||
|
"cors": "^2.8.5",
|
||||||
|
"dotenv": "^16.3.1",
|
||||||
|
"express": "^4.18.2",
|
||||||
|
"express-rate-limit": "^7.1.4",
|
||||||
|
"helmet": "^7.1.0",
|
||||||
|
"ioredis": "^5.3.2",
|
||||||
|
"jsonwebtoken": "^9.0.2",
|
||||||
|
"socket.io": "^4.7.2",
|
||||||
|
"uuid": "^9.0.1",
|
||||||
|
"yaml": "^2.3.4",
|
||||||
|
"zod": "^3.22.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/bcryptjs": "^2.4.6",
|
||||||
|
"@types/cookie-parser": "^1.4.6",
|
||||||
|
"@types/cors": "^2.8.16",
|
||||||
|
"@types/express": "^4.17.21",
|
||||||
|
"@types/jsonwebtoken": "^9.0.5",
|
||||||
|
"@types/node": "^20.10.0",
|
||||||
|
"@types/uuid": "^9.0.7",
|
||||||
|
"prisma": "^5.6.0",
|
||||||
|
"tsc-alias": "^1.8.8",
|
||||||
|
"tsx": "^4.6.0",
|
||||||
|
"typescript": "^5.3.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,401 @@
|
||||||
|
import { readFile, readdir } from 'fs/promises';
|
||||||
|
import { join, dirname } from 'path';
|
||||||
|
import { fileURLToPath } from 'url';
|
||||||
|
import { parse as parseYaml } from 'yaml';
|
||||||
|
|
||||||
|
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||||
|
|
||||||
|
// Path to BMAD core - adjust based on deployment
|
||||||
|
const BMAD_ROOT = process.env.BMAD_ROOT || join(__dirname, '../../../../..');
|
||||||
|
|
||||||
|
interface AgentDefinition {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
title: string;
|
||||||
|
icon?: string;
|
||||||
|
module: string;
|
||||||
|
persona: {
|
||||||
|
role: string;
|
||||||
|
identity?: string;
|
||||||
|
communicationStyle: string;
|
||||||
|
principles?: string[];
|
||||||
|
};
|
||||||
|
menu: AgentMenuItem[];
|
||||||
|
prompts: Record<string, string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AgentMenuItem {
|
||||||
|
trigger: string;
|
||||||
|
exec?: string;
|
||||||
|
description: string;
|
||||||
|
requiresContext?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface WorkflowDefinition {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
module: string;
|
||||||
|
phase: string;
|
||||||
|
steps: WorkflowStep[];
|
||||||
|
estimatedTime?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface WorkflowStep {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
instruction: string;
|
||||||
|
expectedOutput?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MessageContext {
|
||||||
|
conversationId?: string;
|
||||||
|
projectId?: string;
|
||||||
|
userId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MessageResponse {
|
||||||
|
content: string;
|
||||||
|
metadata?: {
|
||||||
|
suggestedActions?: { label: string; action: string; primary?: boolean }[];
|
||||||
|
artifacts?: string[];
|
||||||
|
workflowStep?: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export class BMADAdapter {
|
||||||
|
private agents: Map<string, AgentDefinition> = new Map();
|
||||||
|
private workflows: Map<string, WorkflowDefinition> = new Map();
|
||||||
|
private loaded: boolean = false;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
// Load on first use
|
||||||
|
this.loadAgents().catch(console.error);
|
||||||
|
this.loadWorkflows().catch(console.error);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async ensureLoaded(): Promise<void> {
|
||||||
|
if (!this.loaded) {
|
||||||
|
await Promise.all([this.loadAgents(), this.loadWorkflows()]);
|
||||||
|
this.loaded = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadAgents(): Promise<void> {
|
||||||
|
const modulesPath = join(BMAD_ROOT, 'src/modules');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const modules = await readdir(modulesPath);
|
||||||
|
|
||||||
|
for (const moduleName of modules) {
|
||||||
|
const agentsPath = join(modulesPath, moduleName, 'agents');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const agentFiles = await readdir(agentsPath);
|
||||||
|
|
||||||
|
for (const file of agentFiles) {
|
||||||
|
if (file.endsWith('.agent.yaml') || file.endsWith('.agent.md')) {
|
||||||
|
try {
|
||||||
|
const content = await readFile(join(agentsPath, file), 'utf-8');
|
||||||
|
const agent = this.parseAgentFile(content, moduleName, file);
|
||||||
|
if (agent) {
|
||||||
|
this.agents.set(agent.id, agent);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn(`Failed to parse agent file: ${file}`, e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// agents directory doesn't exist for this module
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('Failed to load agents from BMAD root:', e);
|
||||||
|
// Load sample agents for development
|
||||||
|
this.loadSampleAgents();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private parseAgentFile(content: string, moduleName: string, fileName: string): AgentDefinition | null {
|
||||||
|
try {
|
||||||
|
// Try YAML first
|
||||||
|
const data = parseYaml(content);
|
||||||
|
const agent = data.agent || data;
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: agent.metadata?.id || `${moduleName}/${fileName.replace('.agent.yaml', '').replace('.agent.md', '')}`,
|
||||||
|
name: agent.metadata?.name || 'Agent',
|
||||||
|
title: agent.metadata?.title || 'AI Agent',
|
||||||
|
icon: agent.metadata?.icon,
|
||||||
|
module: moduleName,
|
||||||
|
persona: {
|
||||||
|
role: agent.persona?.role || 'AI Assistant',
|
||||||
|
identity: agent.persona?.identity,
|
||||||
|
communicationStyle: agent.persona?.communication_style || 'professional',
|
||||||
|
principles: agent.persona?.principles,
|
||||||
|
},
|
||||||
|
menu: (agent.menu || []).map((item: any) => ({
|
||||||
|
trigger: item.trigger,
|
||||||
|
exec: item.exec,
|
||||||
|
description: item.description || item.trigger,
|
||||||
|
requiresContext: item.requires_context,
|
||||||
|
})),
|
||||||
|
prompts: agent.prompts || {},
|
||||||
|
};
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private loadSampleAgents(): void {
|
||||||
|
// Sample agents for development/demo
|
||||||
|
const sampleAgents: AgentDefinition[] = [
|
||||||
|
{
|
||||||
|
id: 'bmm/pm',
|
||||||
|
name: 'John',
|
||||||
|
title: 'Product Manager',
|
||||||
|
icon: 'J',
|
||||||
|
module: 'bmm',
|
||||||
|
persona: {
|
||||||
|
role: 'Product Manager especializado em criacao colaborativa de PRDs e gestao de requisitos',
|
||||||
|
communicationStyle: 'Pergunta "POR QUE?" incessantemente para extrair os requisitos reais',
|
||||||
|
},
|
||||||
|
menu: [
|
||||||
|
{ trigger: 'PR', description: '[PR] Criar Product Requirements Document' },
|
||||||
|
{ trigger: 'analyze', description: '[AN] Analisar requisitos do projeto' },
|
||||||
|
{ trigger: 'stakeholders', description: '[ST] Mapear stakeholders' },
|
||||||
|
],
|
||||||
|
prompts: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'bmm/architect',
|
||||||
|
name: 'Alex',
|
||||||
|
title: 'Software Architect',
|
||||||
|
icon: 'A',
|
||||||
|
module: 'bmm',
|
||||||
|
persona: {
|
||||||
|
role: 'Arquiteto de Software com foco em design de sistemas escalaveis',
|
||||||
|
communicationStyle: 'Tecnico mas acessivel, usa diagramas e exemplos',
|
||||||
|
},
|
||||||
|
menu: [
|
||||||
|
{ trigger: 'arch', description: '[AR] Criar documento de arquitetura' },
|
||||||
|
{ trigger: 'review', description: '[RV] Revisar decisoes arquiteturais' },
|
||||||
|
{ trigger: 'diagram', description: '[DG] Gerar diagramas de sistema' },
|
||||||
|
],
|
||||||
|
prompts: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'bmm/developer',
|
||||||
|
name: 'Dev',
|
||||||
|
title: 'Senior Developer',
|
||||||
|
icon: 'D',
|
||||||
|
module: 'bmm',
|
||||||
|
persona: {
|
||||||
|
role: 'Desenvolvedor Senior especializado em implementacao de alta qualidade',
|
||||||
|
communicationStyle: 'Pratico e direto, foca em codigo limpo e testavel',
|
||||||
|
},
|
||||||
|
menu: [
|
||||||
|
{ trigger: 'impl', description: '[IM] Implementar feature' },
|
||||||
|
{ trigger: 'test', description: '[TE] Criar testes' },
|
||||||
|
{ trigger: 'refactor', description: '[RF] Refatorar codigo' },
|
||||||
|
],
|
||||||
|
prompts: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'bmm/barry',
|
||||||
|
name: 'Barry',
|
||||||
|
title: 'Quick-Flow Solo Dev',
|
||||||
|
icon: 'B',
|
||||||
|
module: 'bmm',
|
||||||
|
persona: {
|
||||||
|
role: 'Desenvolvedor agil para fluxos rapidos de implementacao',
|
||||||
|
communicationStyle: 'Eficiente e focado, ideal para tarefas menores',
|
||||||
|
},
|
||||||
|
menu: [
|
||||||
|
{ trigger: 'quick-spec', description: '[QS] Quick Spec - Especificacao rapida' },
|
||||||
|
{ trigger: 'quick-dev', description: '[QD] Quick Dev - Desenvolvimento rapido' },
|
||||||
|
{ trigger: 'fix', description: '[FX] Corrigir bug rapidamente' },
|
||||||
|
],
|
||||||
|
prompts: {},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const agent of sampleAgents) {
|
||||||
|
this.agents.set(agent.id, agent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadWorkflows(): Promise<void> {
|
||||||
|
// Load sample workflows for now
|
||||||
|
const sampleWorkflows: WorkflowDefinition[] = [
|
||||||
|
{
|
||||||
|
id: 'bmm/quick-spec',
|
||||||
|
name: 'Quick Spec',
|
||||||
|
description: 'Especificacao tecnica rapida para pequenas mudancas',
|
||||||
|
module: 'bmm',
|
||||||
|
phase: 'planning',
|
||||||
|
estimatedTime: '~5 min',
|
||||||
|
steps: [
|
||||||
|
{
|
||||||
|
id: 'step1',
|
||||||
|
name: 'Analisar Delta',
|
||||||
|
description: 'Investigacao superficial da mudanca',
|
||||||
|
instruction: 'Analise o que precisa mudar entre o estado atual e o desejado.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'step2',
|
||||||
|
name: 'Investigacao Profunda',
|
||||||
|
description: 'Analise detalhada do codigo e consequencias',
|
||||||
|
instruction: 'Examine o codigo existente e identifique impactos da mudanca.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'step3',
|
||||||
|
name: 'Gerar Especificacao',
|
||||||
|
description: 'Produzir tech-spec',
|
||||||
|
instruction: 'Crie a especificacao tecnica detalhada.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'step4',
|
||||||
|
name: 'Revisar e Refinar',
|
||||||
|
description: 'Validacao e refinamento',
|
||||||
|
instruction: 'Revise a especificacao e faca ajustes finais.',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'bmm/prd',
|
||||||
|
name: 'Product Requirements Document',
|
||||||
|
description: 'Criacao completa de PRD para novos produtos/features',
|
||||||
|
module: 'bmm',
|
||||||
|
phase: 'planning',
|
||||||
|
estimatedTime: '~15 min',
|
||||||
|
steps: [
|
||||||
|
{
|
||||||
|
id: 'step1',
|
||||||
|
name: 'Descoberta',
|
||||||
|
description: 'Entender o problema e contexto',
|
||||||
|
instruction: 'Pergunte sobre o problema que estamos resolvendo, quem sao os usuarios e qual o impacto esperado.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'step2',
|
||||||
|
name: 'Requisitos',
|
||||||
|
description: 'Definir requisitos funcionais e nao-funcionais',
|
||||||
|
instruction: 'Liste todos os requisitos do produto, separando funcionais de nao-funcionais.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'step3',
|
||||||
|
name: 'User Stories',
|
||||||
|
description: 'Criar historias de usuario',
|
||||||
|
instruction: 'Transforme requisitos em user stories no formato "Como [persona], quero [acao], para [beneficio]".',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'step4',
|
||||||
|
name: 'Criterios de Aceite',
|
||||||
|
description: 'Definir criterios de aceitacao',
|
||||||
|
instruction: 'Para cada user story, defina criterios claros de aceitacao.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'step5',
|
||||||
|
name: 'Revisao Final',
|
||||||
|
description: 'Revisar e aprovar PRD',
|
||||||
|
instruction: 'Revise o documento completo, verifique consistencia e obtenha aprovacao.',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const workflow of sampleWorkflows) {
|
||||||
|
this.workflows.set(workflow.id, workflow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async getAllAgents(): Promise<AgentDefinition[]> {
|
||||||
|
await this.ensureLoaded();
|
||||||
|
return Array.from(this.agents.values());
|
||||||
|
}
|
||||||
|
|
||||||
|
async getAgent(id: string): Promise<AgentDefinition | undefined> {
|
||||||
|
await this.ensureLoaded();
|
||||||
|
return this.agents.get(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
async getAgentsByModule(moduleId: string): Promise<AgentDefinition[]> {
|
||||||
|
await this.ensureLoaded();
|
||||||
|
return Array.from(this.agents.values()).filter(a => a.module === moduleId);
|
||||||
|
}
|
||||||
|
|
||||||
|
async getAgentActions(agentId: string): Promise<AgentMenuItem[]> {
|
||||||
|
await this.ensureLoaded();
|
||||||
|
const agent = this.agents.get(agentId);
|
||||||
|
return agent?.menu || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
async getAllWorkflows(): Promise<WorkflowDefinition[]> {
|
||||||
|
await this.ensureLoaded();
|
||||||
|
return Array.from(this.workflows.values());
|
||||||
|
}
|
||||||
|
|
||||||
|
async getWorkflow(id: string): Promise<WorkflowDefinition | undefined> {
|
||||||
|
await this.ensureLoaded();
|
||||||
|
return this.workflows.get(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
async processMessage(
|
||||||
|
agentId: string,
|
||||||
|
message: string,
|
||||||
|
context: MessageContext
|
||||||
|
): Promise<MessageResponse> {
|
||||||
|
await this.ensureLoaded();
|
||||||
|
|
||||||
|
const agent = this.agents.get(agentId);
|
||||||
|
if (!agent) {
|
||||||
|
return {
|
||||||
|
content: 'Desculpe, nao consegui encontrar o agente solicitado.',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if message matches any menu trigger
|
||||||
|
const matchedAction = agent.menu.find(item =>
|
||||||
|
message.toLowerCase().includes(item.trigger.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
// Simulate AI response based on agent persona
|
||||||
|
const response = this.generateAgentResponse(agent, message, matchedAction);
|
||||||
|
|
||||||
|
return response;
|
||||||
|
}
|
||||||
|
|
||||||
|
private generateAgentResponse(
|
||||||
|
agent: AgentDefinition,
|
||||||
|
userMessage: string,
|
||||||
|
matchedAction?: AgentMenuItem
|
||||||
|
): MessageResponse {
|
||||||
|
// This is a placeholder - in production, this would call an LLM
|
||||||
|
// with the agent's persona and prompts
|
||||||
|
|
||||||
|
if (matchedAction) {
|
||||||
|
return {
|
||||||
|
content: `Otimo! Vou iniciar o workflow **${matchedAction.description}** para voce.\n\nComo ${agent.title}, vou guia-lo atraves deste processo. Vamos comecar?\n\n**Proximo passo:** Me conte mais sobre o que voce quer construir.`,
|
||||||
|
metadata: {
|
||||||
|
suggestedActions: [
|
||||||
|
{ label: 'Sim, vamos comecar!', action: 'start_workflow', primary: true },
|
||||||
|
{ label: 'Tenho duvidas', action: 'ask_questions' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
content: `Ola! Sou ${agent.name}, ${agent.persona.role}.\n\nVoce disse: "${userMessage}"\n\nComo posso ajudar? Aqui estao algumas coisas que posso fazer:\n\n${agent.menu.map(item => `- **${item.trigger}**: ${item.description}`).join('\n')}\n\nBasta digitar um dos comandos acima ou me contar mais sobre seu projeto!`,
|
||||||
|
metadata: {
|
||||||
|
suggestedActions: agent.menu.slice(0, 3).map((item, index) => ({
|
||||||
|
label: item.description.replace(/^\[[\w-]+\]\s*/, ''),
|
||||||
|
action: item.trigger,
|
||||||
|
primary: index === 0,
|
||||||
|
})),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
import 'dotenv/config';
|
||||||
|
import express from 'express';
|
||||||
|
import { createServer } from 'http';
|
||||||
|
import { Server } from 'socket.io';
|
||||||
|
import cors from 'cors';
|
||||||
|
import helmet from 'helmet';
|
||||||
|
import cookieParser from 'cookie-parser';
|
||||||
|
import rateLimit from 'express-rate-limit';
|
||||||
|
|
||||||
|
import { authRouter } from './routes/auth.js';
|
||||||
|
import { projectsRouter } from './routes/projects.js';
|
||||||
|
import { agentsRouter } from './routes/agents.js';
|
||||||
|
import { workflowsRouter } from './routes/workflows.js';
|
||||||
|
import { artifactsRouter } from './routes/artifacts.js';
|
||||||
|
import { setupWebSocket } from './websocket/index.js';
|
||||||
|
import { errorHandler } from './middleware/error-handler.js';
|
||||||
|
import { authenticate } from './middleware/auth.js';
|
||||||
|
|
||||||
|
const app = express();
|
||||||
|
const httpServer = createServer(app);
|
||||||
|
|
||||||
|
// Socket.io setup
|
||||||
|
const io = new Server(httpServer, {
|
||||||
|
cors: {
|
||||||
|
origin: process.env.FRONTEND_URL || 'http://localhost:3000',
|
||||||
|
credentials: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Middleware
|
||||||
|
app.use(helmet());
|
||||||
|
app.use(cors({
|
||||||
|
origin: process.env.FRONTEND_URL || 'http://localhost:3000',
|
||||||
|
credentials: true,
|
||||||
|
}));
|
||||||
|
app.use(express.json());
|
||||||
|
app.use(cookieParser());
|
||||||
|
|
||||||
|
// Rate limiting
|
||||||
|
const limiter = rateLimit({
|
||||||
|
windowMs: 15 * 60 * 1000, // 15 minutes
|
||||||
|
max: 100, // limit each IP to 100 requests per windowMs
|
||||||
|
message: 'Too many requests, please try again later.',
|
||||||
|
});
|
||||||
|
app.use('/api', limiter);
|
||||||
|
|
||||||
|
// Health check
|
||||||
|
app.get('/health', (req, res) => {
|
||||||
|
res.json({ status: 'ok', timestamp: new Date().toISOString() });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Public routes
|
||||||
|
app.use('/api/auth', authRouter);
|
||||||
|
|
||||||
|
// Protected routes
|
||||||
|
app.use('/api/projects', authenticate, projectsRouter);
|
||||||
|
app.use('/api/agents', authenticate, agentsRouter);
|
||||||
|
app.use('/api/workflows', authenticate, workflowsRouter);
|
||||||
|
app.use('/api/artifacts', authenticate, artifactsRouter);
|
||||||
|
|
||||||
|
// WebSocket setup
|
||||||
|
setupWebSocket(io);
|
||||||
|
|
||||||
|
// Error handler
|
||||||
|
app.use(errorHandler);
|
||||||
|
|
||||||
|
// Start server
|
||||||
|
const PORT = process.env.PORT || 4000;
|
||||||
|
httpServer.listen(PORT, () => {
|
||||||
|
console.log(`BMAD API Server running on port ${PORT}`);
|
||||||
|
console.log(`WebSocket server ready`);
|
||||||
|
});
|
||||||
|
|
||||||
|
export { app, io };
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
import { Request, Response, NextFunction } from 'express';
|
||||||
|
import jwt from 'jsonwebtoken';
|
||||||
|
|
||||||
|
const JWT_SECRET = process.env.JWT_SECRET || 'bmad-secret-key-change-in-production';
|
||||||
|
|
||||||
|
// Extend Express Request type
|
||||||
|
declare global {
|
||||||
|
namespace Express {
|
||||||
|
interface Request {
|
||||||
|
user?: {
|
||||||
|
id: string;
|
||||||
|
email?: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function authenticate(req: Request, res: Response, next: NextFunction) {
|
||||||
|
const token = req.cookies.token || req.headers.authorization?.replace('Bearer ', '');
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
return res.status(401).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'UNAUTHORIZED', message: 'Token de autenticacao necessario' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const decoded = jwt.verify(token, JWT_SECRET) as { userId: string };
|
||||||
|
req.user = { id: decoded.userId };
|
||||||
|
next();
|
||||||
|
} catch {
|
||||||
|
return res.status(401).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'INVALID_TOKEN', message: 'Token invalido ou expirado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function optionalAuth(req: Request, res: Response, next: NextFunction) {
|
||||||
|
const token = req.cookies.token || req.headers.authorization?.replace('Bearer ', '');
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
try {
|
||||||
|
const decoded = jwt.verify(token, JWT_SECRET) as { userId: string };
|
||||||
|
req.user = { id: decoded.userId };
|
||||||
|
} catch {
|
||||||
|
// Token is invalid, but we continue without user
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
import { Request, Response, NextFunction } from 'express';
|
||||||
|
|
||||||
|
export interface AppError extends Error {
|
||||||
|
statusCode?: number;
|
||||||
|
code?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function errorHandler(
|
||||||
|
err: AppError,
|
||||||
|
req: Request,
|
||||||
|
res: Response,
|
||||||
|
_next: NextFunction
|
||||||
|
) {
|
||||||
|
console.error('Error:', err);
|
||||||
|
|
||||||
|
const statusCode = err.statusCode || 500;
|
||||||
|
const code = err.code || 'INTERNAL_ERROR';
|
||||||
|
const message = err.message || 'Ocorreu um erro interno';
|
||||||
|
|
||||||
|
res.status(statusCode).json({
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
code,
|
||||||
|
message,
|
||||||
|
...(process.env.NODE_ENV === 'development' && { stack: err.stack }),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function notFoundHandler(req: Request, res: Response) {
|
||||||
|
res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
code: 'NOT_FOUND',
|
||||||
|
message: `Rota ${req.method} ${req.path} nao encontrada`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createError(
|
||||||
|
message: string,
|
||||||
|
statusCode: number = 500,
|
||||||
|
code: string = 'ERROR'
|
||||||
|
): AppError {
|
||||||
|
const error = new Error(message) as AppError;
|
||||||
|
error.statusCode = statusCode;
|
||||||
|
error.code = code;
|
||||||
|
return error;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
import { Router } from 'express';
|
||||||
|
import { BMADAdapter } from '../bmad/adapter.js';
|
||||||
|
|
||||||
|
const router = Router();
|
||||||
|
const bmadAdapter = new BMADAdapter();
|
||||||
|
|
||||||
|
// Get all available agents
|
||||||
|
router.get('/', async (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const agents = await bmadAdapter.getAllAgents();
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: agents.map(agent => ({
|
||||||
|
id: agent.id,
|
||||||
|
name: agent.name,
|
||||||
|
title: agent.title,
|
||||||
|
icon: agent.icon,
|
||||||
|
module: agent.module,
|
||||||
|
persona: {
|
||||||
|
role: agent.persona.role,
|
||||||
|
communicationStyle: agent.persona.communicationStyle,
|
||||||
|
},
|
||||||
|
menuCount: agent.menu.length,
|
||||||
|
})),
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get agent by ID
|
||||||
|
router.get('/:id', async (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const agent = await bmadAdapter.getAgent(req.params.id);
|
||||||
|
|
||||||
|
if (!agent) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'AGENT_NOT_FOUND', message: 'Agente nao encontrado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: agent,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get agent actions (menu)
|
||||||
|
router.get('/:id/actions', async (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const actions = await bmadAdapter.getAgentActions(req.params.id);
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: actions,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Start chat with agent
|
||||||
|
router.post('/:id/chat', async (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const { message, conversationId, projectId } = req.body;
|
||||||
|
const agentId = req.params.id;
|
||||||
|
|
||||||
|
if (!message) {
|
||||||
|
return res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'MISSING_MESSAGE', message: 'Mensagem e obrigatoria' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await bmadAdapter.processMessage(agentId, message, {
|
||||||
|
conversationId,
|
||||||
|
projectId,
|
||||||
|
userId: req.user?.id,
|
||||||
|
});
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: response,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get agents by module
|
||||||
|
router.get('/module/:moduleId', async (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const agents = await bmadAdapter.getAgentsByModule(req.params.moduleId);
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: agents,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export { router as agentsRouter };
|
||||||
|
|
@ -0,0 +1,197 @@
|
||||||
|
import { Router } from 'express';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { v4 as uuid } from 'uuid';
|
||||||
|
|
||||||
|
const router = Router();
|
||||||
|
|
||||||
|
// In-memory artifact store (replace with database in production)
|
||||||
|
const artifacts: Map<string, {
|
||||||
|
id: string;
|
||||||
|
projectId: string;
|
||||||
|
type: string;
|
||||||
|
name: string;
|
||||||
|
content: string;
|
||||||
|
version: number;
|
||||||
|
history: { version: number; content: string; updatedAt: Date }[];
|
||||||
|
createdAt: Date;
|
||||||
|
updatedAt: Date;
|
||||||
|
}> = new Map();
|
||||||
|
|
||||||
|
// Validation schemas
|
||||||
|
const createArtifactSchema = z.object({
|
||||||
|
projectId: z.string().uuid(),
|
||||||
|
type: z.enum(['prd', 'architecture', 'epic', 'story', 'spec', 'diagram', 'tech-spec', 'test-plan']),
|
||||||
|
name: z.string().min(1),
|
||||||
|
content: z.string(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const updateArtifactSchema = z.object({
|
||||||
|
name: z.string().min(1).optional(),
|
||||||
|
content: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get artifact by ID
|
||||||
|
router.get('/:id', (req, res) => {
|
||||||
|
const artifact = artifacts.get(req.params.id);
|
||||||
|
|
||||||
|
if (!artifact) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'ARTIFACT_NOT_FOUND', message: 'Artefato nao encontrado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: artifact,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create artifact
|
||||||
|
router.post('/', (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const data = createArtifactSchema.parse(req.body);
|
||||||
|
|
||||||
|
const artifact = {
|
||||||
|
id: uuid(),
|
||||||
|
...data,
|
||||||
|
version: 1,
|
||||||
|
history: [],
|
||||||
|
createdAt: new Date(),
|
||||||
|
updatedAt: new Date(),
|
||||||
|
};
|
||||||
|
|
||||||
|
artifacts.set(artifact.id, artifact);
|
||||||
|
|
||||||
|
res.status(201).json({
|
||||||
|
success: true,
|
||||||
|
data: artifact,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof z.ZodError) {
|
||||||
|
return res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'VALIDATION_ERROR', message: error.errors[0].message },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update artifact
|
||||||
|
router.put('/:id', (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const artifact = artifacts.get(req.params.id);
|
||||||
|
|
||||||
|
if (!artifact) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'ARTIFACT_NOT_FOUND', message: 'Artefato nao encontrado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = updateArtifactSchema.parse(req.body);
|
||||||
|
|
||||||
|
// Save current version to history
|
||||||
|
artifact.history.push({
|
||||||
|
version: artifact.version,
|
||||||
|
content: artifact.content,
|
||||||
|
updatedAt: artifact.updatedAt,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update artifact
|
||||||
|
const updatedArtifact = {
|
||||||
|
...artifact,
|
||||||
|
...data,
|
||||||
|
version: artifact.version + 1,
|
||||||
|
updatedAt: new Date(),
|
||||||
|
};
|
||||||
|
|
||||||
|
artifacts.set(artifact.id, updatedArtifact);
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: updatedArtifact,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof z.ZodError) {
|
||||||
|
return res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'VALIDATION_ERROR', message: error.errors[0].message },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get artifact versions
|
||||||
|
router.get('/:id/versions', (req, res) => {
|
||||||
|
const artifact = artifacts.get(req.params.id);
|
||||||
|
|
||||||
|
if (!artifact) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'ARTIFACT_NOT_FOUND', message: 'Artefato nao encontrado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const versions = [
|
||||||
|
...artifact.history,
|
||||||
|
{
|
||||||
|
version: artifact.version,
|
||||||
|
content: artifact.content,
|
||||||
|
updatedAt: artifact.updatedAt,
|
||||||
|
},
|
||||||
|
].sort((a, b) => b.version - a.version);
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: versions,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Export artifact
|
||||||
|
router.post('/:id/export', (req, res) => {
|
||||||
|
const artifact = artifacts.get(req.params.id);
|
||||||
|
|
||||||
|
if (!artifact) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'ARTIFACT_NOT_FOUND', message: 'Artefato nao encontrado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const { format = 'md' } = req.body;
|
||||||
|
|
||||||
|
// TODO: Implement different export formats (pdf, docx, etc.)
|
||||||
|
if (format === 'md') {
|
||||||
|
res.setHeader('Content-Type', 'text/markdown');
|
||||||
|
res.setHeader('Content-Disposition', `attachment; filename="${artifact.name}.md"`);
|
||||||
|
res.send(artifact.content);
|
||||||
|
} else {
|
||||||
|
res.json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'UNSUPPORTED_FORMAT', message: `Formato ${format} nao suportado ainda` },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Delete artifact
|
||||||
|
router.delete('/:id', (req, res) => {
|
||||||
|
const artifact = artifacts.get(req.params.id);
|
||||||
|
|
||||||
|
if (!artifact) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'ARTIFACT_NOT_FOUND', message: 'Artefato nao encontrado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
artifacts.delete(req.params.id);
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
export { router as artifactsRouter };
|
||||||
|
|
@ -0,0 +1,196 @@
|
||||||
|
import { Router } from 'express';
|
||||||
|
import bcrypt from 'bcryptjs';
|
||||||
|
import jwt from 'jsonwebtoken';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { v4 as uuid } from 'uuid';
|
||||||
|
|
||||||
|
const router = Router();
|
||||||
|
|
||||||
|
// In-memory user store (replace with database in production)
|
||||||
|
const users: Map<string, {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
name: string;
|
||||||
|
passwordHash: string;
|
||||||
|
createdAt: Date;
|
||||||
|
}> = new Map();
|
||||||
|
|
||||||
|
const JWT_SECRET = process.env.JWT_SECRET || 'bmad-secret-key-change-in-production';
|
||||||
|
const JWT_EXPIRES_IN = '7d';
|
||||||
|
|
||||||
|
// Validation schemas
|
||||||
|
const registerSchema = z.object({
|
||||||
|
email: z.string().email('Email invalido'),
|
||||||
|
password: z.string().min(8, 'Senha deve ter no minimo 8 caracteres'),
|
||||||
|
name: z.string().min(2, 'Nome deve ter no minimo 2 caracteres'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const loginSchema = z.object({
|
||||||
|
email: z.string().email('Email invalido'),
|
||||||
|
password: z.string().min(1, 'Senha e obrigatoria'),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Register
|
||||||
|
router.post('/register', async (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const { email, password, name } = registerSchema.parse(req.body);
|
||||||
|
|
||||||
|
// Check if user exists
|
||||||
|
const existingUser = Array.from(users.values()).find(u => u.email === email);
|
||||||
|
if (existingUser) {
|
||||||
|
return res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'EMAIL_EXISTS', message: 'Este email ja esta em uso' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hash password
|
||||||
|
const passwordHash = await bcrypt.hash(password, 12);
|
||||||
|
|
||||||
|
// Create user
|
||||||
|
const user = {
|
||||||
|
id: uuid(),
|
||||||
|
email,
|
||||||
|
name,
|
||||||
|
passwordHash,
|
||||||
|
createdAt: new Date(),
|
||||||
|
};
|
||||||
|
users.set(user.id, user);
|
||||||
|
|
||||||
|
// Generate token
|
||||||
|
const token = jwt.sign({ userId: user.id }, JWT_SECRET, { expiresIn: JWT_EXPIRES_IN });
|
||||||
|
|
||||||
|
// Set cookie
|
||||||
|
res.cookie('token', token, {
|
||||||
|
httpOnly: true,
|
||||||
|
secure: process.env.NODE_ENV === 'production',
|
||||||
|
sameSite: 'lax',
|
||||||
|
maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days
|
||||||
|
});
|
||||||
|
|
||||||
|
res.status(201).json({
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
user: {
|
||||||
|
id: user.id,
|
||||||
|
email: user.email,
|
||||||
|
name: user.name,
|
||||||
|
createdAt: user.createdAt,
|
||||||
|
},
|
||||||
|
token,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof z.ZodError) {
|
||||||
|
return res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'VALIDATION_ERROR', message: error.errors[0].message },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Login
|
||||||
|
router.post('/login', async (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const { email, password } = loginSchema.parse(req.body);
|
||||||
|
|
||||||
|
// Find user
|
||||||
|
const user = Array.from(users.values()).find(u => u.email === email);
|
||||||
|
if (!user) {
|
||||||
|
return res.status(401).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'INVALID_CREDENTIALS', message: 'Email ou senha incorretos' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verify password
|
||||||
|
const isValid = await bcrypt.compare(password, user.passwordHash);
|
||||||
|
if (!isValid) {
|
||||||
|
return res.status(401).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'INVALID_CREDENTIALS', message: 'Email ou senha incorretos' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate token
|
||||||
|
const token = jwt.sign({ userId: user.id }, JWT_SECRET, { expiresIn: JWT_EXPIRES_IN });
|
||||||
|
|
||||||
|
// Set cookie
|
||||||
|
res.cookie('token', token, {
|
||||||
|
httpOnly: true,
|
||||||
|
secure: process.env.NODE_ENV === 'production',
|
||||||
|
sameSite: 'lax',
|
||||||
|
maxAge: 7 * 24 * 60 * 60 * 1000,
|
||||||
|
});
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
user: {
|
||||||
|
id: user.id,
|
||||||
|
email: user.email,
|
||||||
|
name: user.name,
|
||||||
|
createdAt: user.createdAt,
|
||||||
|
},
|
||||||
|
token,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof z.ZodError) {
|
||||||
|
return res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'VALIDATION_ERROR', message: error.errors[0].message },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Logout
|
||||||
|
router.post('/logout', (req, res) => {
|
||||||
|
res.clearCookie('token');
|
||||||
|
res.json({ success: true });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get current user
|
||||||
|
router.get('/me', (req, res) => {
|
||||||
|
const token = req.cookies.token || req.headers.authorization?.replace('Bearer ', '');
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
return res.status(401).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'UNAUTHORIZED', message: 'Nao autenticado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const decoded = jwt.verify(token, JWT_SECRET) as { userId: string };
|
||||||
|
const user = users.get(decoded.userId);
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return res.status(401).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'USER_NOT_FOUND', message: 'Usuario nao encontrado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
id: user.id,
|
||||||
|
email: user.email,
|
||||||
|
name: user.name,
|
||||||
|
createdAt: user.createdAt,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
return res.status(401).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'INVALID_TOKEN', message: 'Token invalido' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export { router as authRouter };
|
||||||
|
|
@ -0,0 +1,215 @@
|
||||||
|
import { Router } from 'express';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { v4 as uuid } from 'uuid';
|
||||||
|
|
||||||
|
const router = Router();
|
||||||
|
|
||||||
|
// In-memory project store (replace with database in production)
|
||||||
|
const projects: Map<string, {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description?: string;
|
||||||
|
complexityLevel: number;
|
||||||
|
selectedModules: string[];
|
||||||
|
status: string;
|
||||||
|
userId: string;
|
||||||
|
createdAt: Date;
|
||||||
|
updatedAt: Date;
|
||||||
|
}> = new Map();
|
||||||
|
|
||||||
|
// Validation schemas
|
||||||
|
const createProjectSchema = z.object({
|
||||||
|
name: z.string().min(2, 'Nome deve ter no minimo 2 caracteres'),
|
||||||
|
description: z.string().optional(),
|
||||||
|
complexityLevel: z.number().min(0).max(4).default(2),
|
||||||
|
selectedModules: z.array(z.string()).default(['bmm']),
|
||||||
|
});
|
||||||
|
|
||||||
|
const updateProjectSchema = createProjectSchema.partial();
|
||||||
|
|
||||||
|
// Get all projects for user
|
||||||
|
router.get('/', (req, res) => {
|
||||||
|
const userProjects = Array.from(projects.values())
|
||||||
|
.filter(p => p.userId === req.user?.id)
|
||||||
|
.sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime());
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: userProjects,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get project by ID
|
||||||
|
router.get('/:id', (req, res) => {
|
||||||
|
const project = projects.get(req.params.id);
|
||||||
|
|
||||||
|
if (!project) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'PROJECT_NOT_FOUND', message: 'Projeto nao encontrado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (project.userId !== req.user?.id) {
|
||||||
|
return res.status(403).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'FORBIDDEN', message: 'Acesso negado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: project,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create project
|
||||||
|
router.post('/', (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const data = createProjectSchema.parse(req.body);
|
||||||
|
|
||||||
|
const project = {
|
||||||
|
id: uuid(),
|
||||||
|
...data,
|
||||||
|
status: 'draft',
|
||||||
|
userId: req.user!.id,
|
||||||
|
createdAt: new Date(),
|
||||||
|
updatedAt: new Date(),
|
||||||
|
};
|
||||||
|
|
||||||
|
projects.set(project.id, project);
|
||||||
|
|
||||||
|
res.status(201).json({
|
||||||
|
success: true,
|
||||||
|
data: project,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof z.ZodError) {
|
||||||
|
return res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'VALIDATION_ERROR', message: error.errors[0].message },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update project
|
||||||
|
router.put('/:id', (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const project = projects.get(req.params.id);
|
||||||
|
|
||||||
|
if (!project) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'PROJECT_NOT_FOUND', message: 'Projeto nao encontrado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (project.userId !== req.user?.id) {
|
||||||
|
return res.status(403).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'FORBIDDEN', message: 'Acesso negado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = updateProjectSchema.parse(req.body);
|
||||||
|
const updatedProject = {
|
||||||
|
...project,
|
||||||
|
...data,
|
||||||
|
updatedAt: new Date(),
|
||||||
|
};
|
||||||
|
|
||||||
|
projects.set(project.id, updatedProject);
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: updatedProject,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof z.ZodError) {
|
||||||
|
return res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'VALIDATION_ERROR', message: error.errors[0].message },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Delete project
|
||||||
|
router.delete('/:id', (req, res) => {
|
||||||
|
const project = projects.get(req.params.id);
|
||||||
|
|
||||||
|
if (!project) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'PROJECT_NOT_FOUND', message: 'Projeto nao encontrado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (project.userId !== req.user?.id) {
|
||||||
|
return res.status(403).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'FORBIDDEN', message: 'Acesso negado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
projects.delete(req.params.id);
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get project artifacts
|
||||||
|
router.get('/:id/artifacts', (req, res) => {
|
||||||
|
const project = projects.get(req.params.id);
|
||||||
|
|
||||||
|
if (!project) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'PROJECT_NOT_FOUND', message: 'Projeto nao encontrado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (project.userId !== req.user?.id) {
|
||||||
|
return res.status(403).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'FORBIDDEN', message: 'Acesso negado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Implement artifact retrieval
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: [],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get project workflows
|
||||||
|
router.get('/:id/workflows', (req, res) => {
|
||||||
|
const project = projects.get(req.params.id);
|
||||||
|
|
||||||
|
if (!project) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'PROJECT_NOT_FOUND', message: 'Projeto nao encontrado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (project.userId !== req.user?.id) {
|
||||||
|
return res.status(403).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'FORBIDDEN', message: 'Acesso negado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Implement workflow retrieval
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: [],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
export { router as projectsRouter };
|
||||||
|
|
@ -0,0 +1,216 @@
|
||||||
|
import { Router } from 'express';
|
||||||
|
import { BMADAdapter } from '../bmad/adapter.js';
|
||||||
|
|
||||||
|
const router = Router();
|
||||||
|
const bmadAdapter = new BMADAdapter();
|
||||||
|
|
||||||
|
// In-memory workflow instances (replace with database in production)
|
||||||
|
const workflowInstances: Map<string, {
|
||||||
|
id: string;
|
||||||
|
projectId: string;
|
||||||
|
workflowId: string;
|
||||||
|
currentStep: number;
|
||||||
|
totalSteps: number;
|
||||||
|
status: string;
|
||||||
|
stepOutputs: Record<string, unknown>;
|
||||||
|
startedAt: Date;
|
||||||
|
completedAt?: Date;
|
||||||
|
}> = new Map();
|
||||||
|
|
||||||
|
// Get all available workflows
|
||||||
|
router.get('/', async (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const workflows = await bmadAdapter.getAllWorkflows();
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: workflows,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get workflow by ID
|
||||||
|
router.get('/:id', async (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const workflow = await bmadAdapter.getWorkflow(req.params.id);
|
||||||
|
|
||||||
|
if (!workflow) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'WORKFLOW_NOT_FOUND', message: 'Workflow nao encontrado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: workflow,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Start a workflow
|
||||||
|
router.post('/:id/start', async (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const { projectId } = req.body;
|
||||||
|
const workflowId = req.params.id;
|
||||||
|
|
||||||
|
if (!projectId) {
|
||||||
|
return res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'MISSING_PROJECT', message: 'Projeto e obrigatorio' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const workflow = await bmadAdapter.getWorkflow(workflowId);
|
||||||
|
if (!workflow) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'WORKFLOW_NOT_FOUND', message: 'Workflow nao encontrado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const instance = {
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
projectId,
|
||||||
|
workflowId,
|
||||||
|
currentStep: 1,
|
||||||
|
totalSteps: workflow.steps.length,
|
||||||
|
status: 'active',
|
||||||
|
stepOutputs: {},
|
||||||
|
startedAt: new Date(),
|
||||||
|
};
|
||||||
|
|
||||||
|
workflowInstances.set(instance.id, instance);
|
||||||
|
|
||||||
|
res.status(201).json({
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
...instance,
|
||||||
|
currentStepDetails: workflow.steps[0],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get workflow instance status
|
||||||
|
router.get('/instance/:instanceId/status', (req, res) => {
|
||||||
|
const instance = workflowInstances.get(req.params.instanceId);
|
||||||
|
|
||||||
|
if (!instance) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'INSTANCE_NOT_FOUND', message: 'Instancia nao encontrada' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: instance,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Complete current step and advance
|
||||||
|
router.post('/instance/:instanceId/step/complete', async (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const { output } = req.body;
|
||||||
|
const instance = workflowInstances.get(req.params.instanceId);
|
||||||
|
|
||||||
|
if (!instance) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'INSTANCE_NOT_FOUND', message: 'Instancia nao encontrada' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (instance.status !== 'active') {
|
||||||
|
return res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'WORKFLOW_NOT_ACTIVE', message: 'Workflow nao esta ativo' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save step output
|
||||||
|
instance.stepOutputs[`step_${instance.currentStep}`] = output;
|
||||||
|
|
||||||
|
// Advance to next step
|
||||||
|
if (instance.currentStep >= instance.totalSteps) {
|
||||||
|
instance.status = 'completed';
|
||||||
|
instance.completedAt = new Date();
|
||||||
|
} else {
|
||||||
|
instance.currentStep += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
workflowInstances.set(instance.id, instance);
|
||||||
|
|
||||||
|
const workflow = await bmadAdapter.getWorkflow(instance.workflowId);
|
||||||
|
const nextStep = instance.status === 'completed'
|
||||||
|
? null
|
||||||
|
: workflow?.steps[instance.currentStep - 1];
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
...instance,
|
||||||
|
currentStepDetails: nextStep,
|
||||||
|
completed: instance.status === 'completed',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Pause workflow
|
||||||
|
router.post('/instance/:instanceId/pause', (req, res) => {
|
||||||
|
const instance = workflowInstances.get(req.params.instanceId);
|
||||||
|
|
||||||
|
if (!instance) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'INSTANCE_NOT_FOUND', message: 'Instancia nao encontrada' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
instance.status = 'paused';
|
||||||
|
workflowInstances.set(instance.id, instance);
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: instance,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Resume workflow
|
||||||
|
router.post('/instance/:instanceId/resume', (req, res) => {
|
||||||
|
const instance = workflowInstances.get(req.params.instanceId);
|
||||||
|
|
||||||
|
if (!instance) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'INSTANCE_NOT_FOUND', message: 'Instancia nao encontrada' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (instance.status !== 'paused') {
|
||||||
|
return res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
error: { code: 'WORKFLOW_NOT_PAUSED', message: 'Workflow nao esta pausado' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
instance.status = 'active';
|
||||||
|
workflowInstances.set(instance.id, instance);
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: instance,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
export { router as workflowsRouter };
|
||||||
|
|
@ -0,0 +1,146 @@
|
||||||
|
import { Server, Socket } from 'socket.io';
|
||||||
|
import jwt from 'jsonwebtoken';
|
||||||
|
import { BMADAdapter } from '../bmad/adapter.js';
|
||||||
|
|
||||||
|
const JWT_SECRET = process.env.JWT_SECRET || 'bmad-secret-key-change-in-production';
|
||||||
|
const bmadAdapter = new BMADAdapter();
|
||||||
|
|
||||||
|
interface AuthenticatedSocket extends Socket {
|
||||||
|
userId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setupWebSocket(io: Server) {
|
||||||
|
// Authentication middleware
|
||||||
|
io.use((socket: AuthenticatedSocket, next) => {
|
||||||
|
const token = socket.handshake.auth.token || socket.handshake.headers.authorization?.replace('Bearer ', '');
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
return next(new Error('Authentication required'));
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const decoded = jwt.verify(token, JWT_SECRET) as { userId: string };
|
||||||
|
socket.userId = decoded.userId;
|
||||||
|
next();
|
||||||
|
} catch {
|
||||||
|
next(new Error('Invalid token'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
io.on('connection', (socket: AuthenticatedSocket) => {
|
||||||
|
console.log(`Client connected: ${socket.id} (User: ${socket.userId})`);
|
||||||
|
|
||||||
|
// Join user-specific room
|
||||||
|
if (socket.userId) {
|
||||||
|
socket.join(`user:${socket.userId}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Join project room
|
||||||
|
socket.on('project:join', (projectId: string) => {
|
||||||
|
socket.join(`project:${projectId}`);
|
||||||
|
console.log(`Socket ${socket.id} joined project:${projectId}`);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Leave project room
|
||||||
|
socket.on('project:leave', (projectId: string) => {
|
||||||
|
socket.leave(`project:${projectId}`);
|
||||||
|
console.log(`Socket ${socket.id} left project:${projectId}`);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle chat message to agent
|
||||||
|
socket.on('agent:message', async (data: {
|
||||||
|
agentId: string;
|
||||||
|
message: string;
|
||||||
|
conversationId?: string;
|
||||||
|
projectId?: string;
|
||||||
|
}) => {
|
||||||
|
const { agentId, message, conversationId, projectId } = data;
|
||||||
|
|
||||||
|
// Emit typing indicator
|
||||||
|
socket.emit('agent:typing', { agentId, isTyping: true });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await bmadAdapter.processMessage(agentId, message, {
|
||||||
|
conversationId,
|
||||||
|
projectId,
|
||||||
|
userId: socket.userId,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Emit response
|
||||||
|
socket.emit('agent:message', {
|
||||||
|
agentId,
|
||||||
|
message: response.content,
|
||||||
|
metadata: response.metadata,
|
||||||
|
timestamp: new Date().toISOString(),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Check for artifacts created
|
||||||
|
if (response.metadata?.artifacts) {
|
||||||
|
for (const artifactId of response.metadata.artifacts) {
|
||||||
|
socket.emit('artifact:created', { artifactId, projectId });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
socket.emit('error', {
|
||||||
|
code: 'AGENT_ERROR',
|
||||||
|
message: 'Erro ao processar mensagem do agente',
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
socket.emit('agent:typing', { agentId, isTyping: false });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle workflow advancement
|
||||||
|
socket.on('workflow:advance', async (data: {
|
||||||
|
instanceId: string;
|
||||||
|
stepOutput?: unknown;
|
||||||
|
}) => {
|
||||||
|
const { instanceId, stepOutput } = data;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// TODO: Implement actual workflow advancement
|
||||||
|
socket.emit('workflow:progress', {
|
||||||
|
instanceId,
|
||||||
|
currentStep: 2, // Example
|
||||||
|
completed: false,
|
||||||
|
timestamp: new Date().toISOString(),
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
socket.emit('error', {
|
||||||
|
code: 'WORKFLOW_ERROR',
|
||||||
|
message: 'Erro ao avancar workflow',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle artifact updates
|
||||||
|
socket.on('artifact:update', async (data: {
|
||||||
|
artifactId: string;
|
||||||
|
content: string;
|
||||||
|
projectId?: string;
|
||||||
|
}) => {
|
||||||
|
const { artifactId, content, projectId } = data;
|
||||||
|
|
||||||
|
// Broadcast update to other clients in the project
|
||||||
|
if (projectId) {
|
||||||
|
socket.to(`project:${projectId}`).emit('artifact:updated', {
|
||||||
|
artifactId,
|
||||||
|
updatedBy: socket.userId,
|
||||||
|
timestamp: new Date().toISOString(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle disconnect
|
||||||
|
socket.on('disconnect', (reason) => {
|
||||||
|
console.log(`Client disconnected: ${socket.id} (Reason: ${reason})`);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle errors
|
||||||
|
socket.on('error', (error) => {
|
||||||
|
console.error(`Socket error for ${socket.id}:`, error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('WebSocket handlers configured');
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"strict": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"outDir": "./dist",
|
||||||
|
"rootDir": "./src",
|
||||||
|
"declaration": true,
|
||||||
|
"noEmit": false,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"],
|
||||||
|
"@bmad/core": ["../../packages/bmad-core/src"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src/**/*"],
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
# BMAD Web Frontend Environment Variables
|
||||||
|
|
||||||
|
# API URL
|
||||||
|
NEXT_PUBLIC_API_URL=http://localhost:4000
|
||||||
|
|
||||||
|
# WebSocket URL
|
||||||
|
NEXT_PUBLIC_WS_URL=ws://localhost:4000
|
||||||
|
|
||||||
|
# App Configuration
|
||||||
|
NEXT_PUBLIC_APP_NAME=BMAD
|
||||||
|
NEXT_PUBLIC_APP_URL=http://localhost:3000
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {
|
||||||
|
reactStrictMode: true,
|
||||||
|
transpilePackages: ['@bmad/core', '@bmad/ui'],
|
||||||
|
experimental: {
|
||||||
|
serverComponentsExternalPackages: ['@bmad/core'],
|
||||||
|
},
|
||||||
|
images: {
|
||||||
|
domains: ['avatars.githubusercontent.com'],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = nextConfig;
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
{
|
||||||
|
"name": "@bmad/web",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev --port 3000",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint",
|
||||||
|
"clean": "rm -rf .next node_modules"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@bmad/core": "workspace:*",
|
||||||
|
"@bmad/ui": "workspace:*",
|
||||||
|
"@hookform/resolvers": "^3.3.2",
|
||||||
|
"@radix-ui/react-avatar": "^1.0.4",
|
||||||
|
"@radix-ui/react-dialog": "^1.0.5",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
||||||
|
"@radix-ui/react-icons": "^1.3.0",
|
||||||
|
"@radix-ui/react-label": "^2.0.2",
|
||||||
|
"@radix-ui/react-popover": "^1.0.7",
|
||||||
|
"@radix-ui/react-progress": "^1.0.3",
|
||||||
|
"@radix-ui/react-scroll-area": "^1.0.5",
|
||||||
|
"@radix-ui/react-select": "^2.0.0",
|
||||||
|
"@radix-ui/react-separator": "^1.0.3",
|
||||||
|
"@radix-ui/react-slot": "^1.0.2",
|
||||||
|
"@radix-ui/react-tabs": "^1.0.4",
|
||||||
|
"@radix-ui/react-tooltip": "^1.0.7",
|
||||||
|
"@tanstack/react-query": "^5.8.0",
|
||||||
|
"class-variance-authority": "^0.7.0",
|
||||||
|
"clsx": "^2.0.0",
|
||||||
|
"framer-motion": "^10.16.5",
|
||||||
|
"lucide-react": "^0.294.0",
|
||||||
|
"next": "14.0.3",
|
||||||
|
"next-themes": "^0.2.1",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-hook-form": "^7.48.2",
|
||||||
|
"react-markdown": "^9.0.1",
|
||||||
|
"remark-gfm": "^4.0.0",
|
||||||
|
"socket.io-client": "^4.7.2",
|
||||||
|
"tailwind-merge": "^2.1.0",
|
||||||
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
"zod": "^3.22.4",
|
||||||
|
"zustand": "^4.4.7"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^20.10.0",
|
||||||
|
"@types/react": "^18.2.38",
|
||||||
|
"@types/react-dom": "^18.2.17",
|
||||||
|
"autoprefixer": "^10.4.16",
|
||||||
|
"eslint": "^8.54.0",
|
||||||
|
"eslint-config-next": "14.0.3",
|
||||||
|
"postcss": "^8.4.31",
|
||||||
|
"tailwindcss": "^3.3.5",
|
||||||
|
"typescript": "^5.3.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 222.2 84% 4.9%;
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 222.2 84% 4.9%;
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 222.2 84% 4.9%;
|
||||||
|
--primary: 221.2 83.2% 53.3%;
|
||||||
|
--primary-foreground: 210 40% 98%;
|
||||||
|
--secondary: 210 40% 96.1%;
|
||||||
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||||
|
--muted: 210 40% 96.1%;
|
||||||
|
--muted-foreground: 215.4 16.3% 46.9%;
|
||||||
|
--accent: 210 40% 96.1%;
|
||||||
|
--accent-foreground: 222.2 47.4% 11.2%;
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
--border: 214.3 31.8% 91.4%;
|
||||||
|
--input: 214.3 31.8% 91.4%;
|
||||||
|
--ring: 221.2 83.2% 53.3%;
|
||||||
|
--radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: 222.2 84% 4.9%;
|
||||||
|
--foreground: 210 40% 98%;
|
||||||
|
--card: 222.2 84% 4.9%;
|
||||||
|
--card-foreground: 210 40% 98%;
|
||||||
|
--popover: 222.2 84% 4.9%;
|
||||||
|
--popover-foreground: 210 40% 98%;
|
||||||
|
--primary: 217.2 91.2% 59.8%;
|
||||||
|
--primary-foreground: 222.2 47.4% 11.2%;
|
||||||
|
--secondary: 217.2 32.6% 17.5%;
|
||||||
|
--secondary-foreground: 210 40% 98%;
|
||||||
|
--muted: 217.2 32.6% 17.5%;
|
||||||
|
--muted-foreground: 215 20.2% 65.1%;
|
||||||
|
--accent: 217.2 32.6% 17.5%;
|
||||||
|
--accent-foreground: 210 40% 98%;
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
--border: 217.2 32.6% 17.5%;
|
||||||
|
--input: 217.2 32.6% 17.5%;
|
||||||
|
--ring: 224.3 76.3% 48%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
@apply bg-muted/50;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
@apply bg-muted-foreground/30 rounded-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
@apply bg-muted-foreground/50;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Chat message animations */
|
||||||
|
.message-enter {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-enter-active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
transition: opacity 300ms, transform 300ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typing indicator */
|
||||||
|
.typing-dot {
|
||||||
|
animation: typing-bounce 1.4s infinite ease-in-out both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-dot:nth-child(1) {
|
||||||
|
animation-delay: -0.32s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-dot:nth-child(2) {
|
||||||
|
animation-delay: -0.16s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes typing-bounce {
|
||||||
|
0%, 80%, 100% {
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Gradient backgrounds */
|
||||||
|
.bg-gradient-bmad {
|
||||||
|
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gradient-bmad-subtle {
|
||||||
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(236, 72, 153, 0.1) 100%);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import type { Metadata } from 'next';
|
||||||
|
import { Inter } from 'next/font/google';
|
||||||
|
import './globals.css';
|
||||||
|
import { Providers } from './providers';
|
||||||
|
|
||||||
|
const inter = Inter({ subsets: ['latin'] });
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'BMAD - Build More, Architect Dreams',
|
||||||
|
description:
|
||||||
|
'AI-driven agile development framework with 21 specialized agents and 50+ guided workflows',
|
||||||
|
keywords: [
|
||||||
|
'BMAD',
|
||||||
|
'AI',
|
||||||
|
'agile',
|
||||||
|
'development',
|
||||||
|
'agents',
|
||||||
|
'workflows',
|
||||||
|
'product management',
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="pt-BR" suppressHydrationWarning>
|
||||||
|
<body className={inter.className}>
|
||||||
|
<Providers>{children}</Providers>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,212 @@
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { ArrowRight, Bot, Workflow, FileText, Zap } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-b from-background to-muted">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||||
|
<div className="container flex h-16 items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="h-8 w-8 rounded-lg bg-gradient-bmad" />
|
||||||
|
<span className="text-xl font-bold">BMAD</span>
|
||||||
|
</div>
|
||||||
|
<nav className="flex items-center gap-4">
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="text-sm font-medium text-muted-foreground hover:text-foreground"
|
||||||
|
>
|
||||||
|
Entrar
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/register"
|
||||||
|
className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90"
|
||||||
|
>
|
||||||
|
Comece Gratis
|
||||||
|
</Link>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="container py-24 text-center">
|
||||||
|
<div className="mx-auto max-w-3xl space-y-6">
|
||||||
|
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
|
||||||
|
Build More,{' '}
|
||||||
|
<span className="bg-gradient-bmad bg-clip-text text-transparent">
|
||||||
|
Architect Dreams
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-muted-foreground">
|
||||||
|
Framework de desenvolvimento agil impulsionado por IA com 21 agentes
|
||||||
|
especializados e mais de 50 workflows guiados para transformar suas
|
||||||
|
ideias em software de qualidade.
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center justify-center gap-4">
|
||||||
|
<Link
|
||||||
|
href="/register"
|
||||||
|
className="inline-flex items-center justify-center gap-2 rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground shadow-lg hover:bg-primary/90"
|
||||||
|
>
|
||||||
|
Iniciar Projeto
|
||||||
|
<ArrowRight className="h-4 w-4" />
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/demo"
|
||||||
|
className="inline-flex items-center justify-center gap-2 rounded-md border border-input bg-background px-6 py-3 text-sm font-medium shadow-sm hover:bg-accent"
|
||||||
|
>
|
||||||
|
Ver Demo
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Features Grid */}
|
||||||
|
<section className="container py-16">
|
||||||
|
<div className="mx-auto max-w-5xl">
|
||||||
|
<h2 className="mb-12 text-center text-3xl font-bold">
|
||||||
|
Tudo que voce precisa para desenvolver com excelencia
|
||||||
|
</h2>
|
||||||
|
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
|
||||||
|
<FeatureCard
|
||||||
|
icon={<Bot className="h-10 w-10" />}
|
||||||
|
title="21+ Agentes IA"
|
||||||
|
description="PM, Arquiteto, Dev, UX Designer, Tech Writer e muito mais"
|
||||||
|
/>
|
||||||
|
<FeatureCard
|
||||||
|
icon={<Workflow className="h-10 w-10" />}
|
||||||
|
title="50+ Workflows"
|
||||||
|
description="Da analise a implementacao, guias passo-a-passo"
|
||||||
|
/>
|
||||||
|
<FeatureCard
|
||||||
|
icon={<FileText className="h-10 w-10" />}
|
||||||
|
title="Artefatos Automaticos"
|
||||||
|
description="PRD, arquitetura, epics, stories gerados automaticamente"
|
||||||
|
/>
|
||||||
|
<FeatureCard
|
||||||
|
icon={<Zap className="h-10 w-10" />}
|
||||||
|
title="Quick Flow"
|
||||||
|
description="De ideia a especificacao em menos de 5 minutos"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Tracks Section */}
|
||||||
|
<section className="container py-16">
|
||||||
|
<div className="mx-auto max-w-5xl">
|
||||||
|
<h2 className="mb-12 text-center text-3xl font-bold">
|
||||||
|
Escolha seu ritmo de desenvolvimento
|
||||||
|
</h2>
|
||||||
|
<div className="grid gap-6 md:grid-cols-3">
|
||||||
|
<TrackCard
|
||||||
|
title="Quick Flow"
|
||||||
|
time="~5 min"
|
||||||
|
description="Para bug fixes, pequenas features e ajustes rapidos"
|
||||||
|
color="green"
|
||||||
|
/>
|
||||||
|
<TrackCard
|
||||||
|
title="BMAD Method"
|
||||||
|
time="~15 min"
|
||||||
|
description="Para produtos e plataformas com escopo moderado"
|
||||||
|
color="blue"
|
||||||
|
featured
|
||||||
|
/>
|
||||||
|
<TrackCard
|
||||||
|
title="Enterprise"
|
||||||
|
time="~30 min"
|
||||||
|
description="Para sistemas complexos com requisitos de compliance"
|
||||||
|
color="purple"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="container py-24">
|
||||||
|
<div className="mx-auto max-w-2xl rounded-2xl bg-gradient-bmad p-8 text-center text-white">
|
||||||
|
<h2 className="mb-4 text-3xl font-bold">
|
||||||
|
Pronto para transformar suas ideias?
|
||||||
|
</h2>
|
||||||
|
<p className="mb-6 text-white/80">
|
||||||
|
Junte-se a milhares de desenvolvedores que ja usam o BMAD para criar
|
||||||
|
software de qualidade.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/register"
|
||||||
|
className="inline-flex items-center justify-center gap-2 rounded-md bg-white px-6 py-3 text-sm font-medium text-primary shadow-lg hover:bg-white/90"
|
||||||
|
>
|
||||||
|
Comece Agora - E Gratis
|
||||||
|
<ArrowRight className="h-4 w-4" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="border-t py-12">
|
||||||
|
<div className="container text-center text-sm text-muted-foreground">
|
||||||
|
<p>BMAD - Build More, Architect Dreams</p>
|
||||||
|
<p className="mt-2">
|
||||||
|
Framework de desenvolvimento agil impulsionado por IA
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FeatureCard({
|
||||||
|
icon,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
}: {
|
||||||
|
icon: React.ReactNode;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="rounded-xl border bg-card p-6 text-center shadow-sm">
|
||||||
|
<div className="mb-4 inline-flex items-center justify-center text-primary">
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
<h3 className="mb-2 font-semibold">{title}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">{description}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TrackCard({
|
||||||
|
title,
|
||||||
|
time,
|
||||||
|
description,
|
||||||
|
color,
|
||||||
|
featured,
|
||||||
|
}: {
|
||||||
|
title: string;
|
||||||
|
time: string;
|
||||||
|
description: string;
|
||||||
|
color: 'green' | 'blue' | 'purple';
|
||||||
|
featured?: boolean;
|
||||||
|
}) {
|
||||||
|
const colorClasses = {
|
||||||
|
green: 'border-green-500 bg-green-500/10',
|
||||||
|
blue: 'border-blue-500 bg-blue-500/10',
|
||||||
|
purple: 'border-purple-500 bg-purple-500/10',
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`rounded-xl border-2 p-6 ${colorClasses[color]} ${featured ? 'ring-2 ring-primary ring-offset-2' : ''}`}
|
||||||
|
>
|
||||||
|
<div className="mb-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||||
|
{time} para primeira story
|
||||||
|
</div>
|
||||||
|
<h3 className="mb-2 text-xl font-bold">{title}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">{description}</p>
|
||||||
|
{featured && (
|
||||||
|
<div className="mt-4 inline-block rounded-full bg-primary px-3 py-1 text-xs font-medium text-primary-foreground">
|
||||||
|
Mais Popular
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
|
import { ThemeProvider } from 'next-themes';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
export function Providers({ children }: { children: React.ReactNode }) {
|
||||||
|
const [queryClient] = useState(
|
||||||
|
() =>
|
||||||
|
new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
staleTime: 60 * 1000, // 1 minute
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<ThemeProvider
|
||||||
|
attribute="class"
|
||||||
|
defaultTheme="system"
|
||||||
|
enableSystem
|
||||||
|
disableTransitionOnChange
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ThemeProvider>
|
||||||
|
</QueryClientProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,221 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useRef, useEffect } from 'react';
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
|
import { Send, Paperclip, MoreVertical } from 'lucide-react';
|
||||||
|
import { useAppStore } from '@/stores/app-store';
|
||||||
|
import type { Message, Agent } from '@/types';
|
||||||
|
import { ChatMessage } from './chat-message';
|
||||||
|
import { TypingIndicator } from './typing-indicator';
|
||||||
|
import { QuickActions } from './quick-actions';
|
||||||
|
|
||||||
|
interface AgentChatProps {
|
||||||
|
agent: Agent;
|
||||||
|
projectId: string;
|
||||||
|
onArtifactCreated?: (artifactId: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AgentChat({ agent, projectId, onArtifactCreated }: AgentChatProps) {
|
||||||
|
const [input, setInput] = useState('');
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||||
|
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
|
||||||
|
const { currentConversation, addMessage, agentTyping, setAgentTyping } = useAppStore();
|
||||||
|
|
||||||
|
const messages = currentConversation?.messages || [];
|
||||||
|
|
||||||
|
// Auto-scroll to bottom when new messages arrive
|
||||||
|
useEffect(() => {
|
||||||
|
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||||
|
}, [messages, agentTyping]);
|
||||||
|
|
||||||
|
// Auto-resize textarea
|
||||||
|
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||||
|
setInput(e.target.value);
|
||||||
|
e.target.style.height = 'auto';
|
||||||
|
e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!input.trim() || isLoading) return;
|
||||||
|
|
||||||
|
const userMessage: Message = {
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
role: 'user',
|
||||||
|
content: input.trim(),
|
||||||
|
timestamp: new Date(),
|
||||||
|
};
|
||||||
|
|
||||||
|
addMessage(userMessage);
|
||||||
|
setInput('');
|
||||||
|
setIsLoading(true);
|
||||||
|
setAgentTyping(true);
|
||||||
|
|
||||||
|
// Reset textarea height
|
||||||
|
if (inputRef.current) {
|
||||||
|
inputRef.current.style.height = 'auto';
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// TODO: Replace with actual API call
|
||||||
|
const response = await simulateAgentResponse(agent, input);
|
||||||
|
|
||||||
|
const agentMessage: Message = {
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
role: 'agent',
|
||||||
|
content: response.content,
|
||||||
|
metadata: response.metadata,
|
||||||
|
timestamp: new Date(),
|
||||||
|
};
|
||||||
|
|
||||||
|
addMessage(agentMessage);
|
||||||
|
|
||||||
|
// Check if an artifact was created
|
||||||
|
if (response.metadata?.artifacts?.length) {
|
||||||
|
onArtifactCreated?.(response.metadata.artifacts[0]);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error sending message:', error);
|
||||||
|
addMessage({
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
role: 'system',
|
||||||
|
content: 'Desculpe, ocorreu um erro ao processar sua mensagem. Por favor, tente novamente.',
|
||||||
|
timestamp: new Date(),
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
setAgentTyping(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleQuickAction = (action: string) => {
|
||||||
|
setInput(action);
|
||||||
|
inputRef.current?.focus();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||||
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleSubmit(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-full flex-col">
|
||||||
|
{/* Chat Header */}
|
||||||
|
<div className="flex items-center justify-between border-b px-4 py-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-lg text-primary-foreground">
|
||||||
|
{agent.icon || agent.name[0]}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="font-semibold">{agent.name}</h2>
|
||||||
|
<p className="text-sm text-muted-foreground">{agent.title}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button className="rounded-lg p-2 hover:bg-muted">
|
||||||
|
<MoreVertical className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Messages Area */}
|
||||||
|
<div className="flex-1 overflow-y-auto p-4">
|
||||||
|
{messages.length === 0 ? (
|
||||||
|
<div className="flex h-full flex-col items-center justify-center text-center">
|
||||||
|
<div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-3xl">
|
||||||
|
{agent.icon || agent.name[0]}
|
||||||
|
</div>
|
||||||
|
<h3 className="mb-2 text-lg font-semibold">
|
||||||
|
Ola! Eu sou {agent.name}
|
||||||
|
</h3>
|
||||||
|
<p className="mb-6 max-w-md text-muted-foreground">
|
||||||
|
{agent.persona.role}
|
||||||
|
</p>
|
||||||
|
<QuickActions actions={agent.menu} onSelect={handleQuickAction} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<AnimatePresence initial={false}>
|
||||||
|
{messages.map((message) => (
|
||||||
|
<motion.div
|
||||||
|
key={message.id}
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -10 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
>
|
||||||
|
<ChatMessage
|
||||||
|
message={message}
|
||||||
|
agentName={agent.name}
|
||||||
|
agentIcon={agent.icon}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</AnimatePresence>
|
||||||
|
|
||||||
|
{agentTyping && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
>
|
||||||
|
<TypingIndicator agentName={agent.name} />
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div ref={messagesEndRef} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input Area */}
|
||||||
|
<div className="border-t p-4">
|
||||||
|
<form onSubmit={handleSubmit} className="flex items-end gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex h-10 w-10 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||||
|
>
|
||||||
|
<Paperclip className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
<div className="flex-1">
|
||||||
|
<textarea
|
||||||
|
ref={inputRef}
|
||||||
|
value={input}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
placeholder={`Mensagem para ${agent.name}...`}
|
||||||
|
className="max-h-[200px] min-h-[40px] w-full resize-none rounded-lg border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||||
|
rows={1}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={!input.trim() || isLoading}
|
||||||
|
className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<Send className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simulate agent response (replace with actual API call)
|
||||||
|
async function simulateAgentResponse(
|
||||||
|
agent: Agent,
|
||||||
|
userMessage: string
|
||||||
|
): Promise<{ content: string; metadata?: Message['metadata'] }> {
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||||
|
|
||||||
|
return {
|
||||||
|
content: `Obrigado pela sua mensagem! Como ${agent.title}, estou aqui para ajudar. Voce mencionou: "${userMessage}". O que gostaria de fazer a seguir?\n\n**Sugestoes:**\n- Iniciar um novo workflow\n- Revisar artefatos existentes\n- Continuar de onde paramos`,
|
||||||
|
metadata: {
|
||||||
|
suggestedActions: [
|
||||||
|
{ label: 'Iniciar Workflow', action: 'start_workflow', primary: true },
|
||||||
|
{ label: 'Ver Artefatos', action: 'view_artifacts' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import ReactMarkdown from 'react-markdown';
|
||||||
|
import remarkGfm from 'remark-gfm';
|
||||||
|
import type { Message } from '@/types';
|
||||||
|
|
||||||
|
interface ChatMessageProps {
|
||||||
|
message: Message;
|
||||||
|
agentName: string;
|
||||||
|
agentIcon?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ChatMessage({ message, agentName, agentIcon }: ChatMessageProps) {
|
||||||
|
const isUser = message.role === 'user';
|
||||||
|
const isSystem = message.role === 'system';
|
||||||
|
|
||||||
|
if (isSystem) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="max-w-md rounded-lg bg-muted px-4 py-2 text-center text-sm text-muted-foreground">
|
||||||
|
{message.content}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`flex gap-3 ${isUser ? 'flex-row-reverse' : ''}`}>
|
||||||
|
{/* Avatar */}
|
||||||
|
<div
|
||||||
|
className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm ${
|
||||||
|
isUser
|
||||||
|
? 'bg-secondary text-secondary-foreground'
|
||||||
|
: 'bg-primary text-primary-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{isUser ? 'Eu' : agentIcon || agentName[0]}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message Content */}
|
||||||
|
<div
|
||||||
|
className={`max-w-[70%] rounded-2xl px-4 py-2 ${
|
||||||
|
isUser
|
||||||
|
? 'bg-primary text-primary-foreground'
|
||||||
|
: 'bg-muted text-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="prose prose-sm dark:prose-invert max-w-none">
|
||||||
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||||||
|
{message.content}
|
||||||
|
</ReactMarkdown>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Suggested Actions */}
|
||||||
|
{message.metadata?.suggestedActions && (
|
||||||
|
<div className="mt-3 flex flex-wrap gap-2 border-t border-border/50 pt-3">
|
||||||
|
{message.metadata.suggestedActions.map((action, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
|
||||||
|
action.primary
|
||||||
|
? 'bg-primary text-primary-foreground hover:bg-primary/90'
|
||||||
|
: 'bg-background text-foreground hover:bg-accent'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{action.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Artifacts */}
|
||||||
|
{message.metadata?.artifacts && message.metadata.artifacts.length > 0 && (
|
||||||
|
<div className="mt-3 border-t border-border/50 pt-3">
|
||||||
|
<p className="mb-2 text-xs font-medium text-muted-foreground">
|
||||||
|
Artefatos criados:
|
||||||
|
</p>
|
||||||
|
{message.metadata.artifacts.map((artifactId) => (
|
||||||
|
<button
|
||||||
|
key={artifactId}
|
||||||
|
className="flex w-full items-center gap-2 rounded-lg bg-background p-2 text-left text-sm hover:bg-accent"
|
||||||
|
>
|
||||||
|
<div className="h-8 w-8 rounded bg-primary/10" />
|
||||||
|
<span className="truncate">{artifactId}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Timestamp */}
|
||||||
|
<div
|
||||||
|
className={`mt-1 text-xs ${
|
||||||
|
isUser ? 'text-primary-foreground/70' : 'text-muted-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{formatTime(message.timestamp)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTime(date: Date): string {
|
||||||
|
return new Intl.DateTimeFormat('pt-BR', {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
}).format(new Date(date));
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import type { AgentMenuItem } from '@/types';
|
||||||
|
|
||||||
|
interface QuickActionsProps {
|
||||||
|
actions: AgentMenuItem[];
|
||||||
|
onSelect: (action: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function QuickActions({ actions, onSelect }: QuickActionsProps) {
|
||||||
|
// Show max 6 actions
|
||||||
|
const displayActions = actions.slice(0, 6);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid max-w-lg grid-cols-2 gap-2">
|
||||||
|
{displayActions.map((action, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
onClick={() => onSelect(action.trigger)}
|
||||||
|
className="rounded-lg border bg-card p-3 text-left transition-colors hover:bg-accent"
|
||||||
|
>
|
||||||
|
<p className="text-sm font-medium">{extractLabel(action.description)}</p>
|
||||||
|
<p className="mt-1 text-xs text-muted-foreground">
|
||||||
|
Digite: {action.trigger}
|
||||||
|
</p>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function extractLabel(description: string): string {
|
||||||
|
// Remove [XX] prefix from description
|
||||||
|
return description.replace(/^\[[\w-]+\]\s*/, '');
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
interface TypingIndicatorProps {
|
||||||
|
agentName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TypingIndicator({ agentName }: TypingIndicatorProps) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-sm text-primary-foreground">
|
||||||
|
{agentName[0]}
|
||||||
|
</div>
|
||||||
|
<div className="rounded-2xl bg-muted px-4 py-3">
|
||||||
|
<div className="flex gap-1">
|
||||||
|
<span className="typing-dot h-2 w-2 rounded-full bg-muted-foreground" />
|
||||||
|
<span className="typing-dot h-2 w-2 rounded-full bg-muted-foreground" />
|
||||||
|
<span className="typing-dot h-2 w-2 rounded-full bg-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,146 @@
|
||||||
|
import { create } from 'zustand';
|
||||||
|
import { persist } from 'zustand/middleware';
|
||||||
|
import type { Project, Agent, Conversation, Message, WorkflowInstance, User } from '@/types';
|
||||||
|
|
||||||
|
interface AppState {
|
||||||
|
// User
|
||||||
|
user: User | null;
|
||||||
|
setUser: (user: User | null) => void;
|
||||||
|
|
||||||
|
// Current Project
|
||||||
|
currentProject: Project | null;
|
||||||
|
setCurrentProject: (project: Project | null) => void;
|
||||||
|
|
||||||
|
// Projects List
|
||||||
|
projects: Project[];
|
||||||
|
setProjects: (projects: Project[]) => void;
|
||||||
|
addProject: (project: Project) => void;
|
||||||
|
updateProject: (id: string, updates: Partial<Project>) => void;
|
||||||
|
removeProject: (id: string) => void;
|
||||||
|
|
||||||
|
// Current Agent
|
||||||
|
currentAgent: Agent | null;
|
||||||
|
setCurrentAgent: (agent: Agent | null) => void;
|
||||||
|
|
||||||
|
// Available Agents
|
||||||
|
agents: Agent[];
|
||||||
|
setAgents: (agents: Agent[]) => void;
|
||||||
|
|
||||||
|
// Current Conversation
|
||||||
|
currentConversation: Conversation | null;
|
||||||
|
setCurrentConversation: (conversation: Conversation | null) => void;
|
||||||
|
addMessage: (message: Message) => void;
|
||||||
|
|
||||||
|
// Active Workflow
|
||||||
|
activeWorkflow: WorkflowInstance | null;
|
||||||
|
setActiveWorkflow: (workflow: WorkflowInstance | null) => void;
|
||||||
|
updateWorkflowStep: (step: number) => void;
|
||||||
|
|
||||||
|
// UI State
|
||||||
|
sidebarOpen: boolean;
|
||||||
|
toggleSidebar: () => void;
|
||||||
|
setSidebarOpen: (open: boolean) => void;
|
||||||
|
|
||||||
|
// Agent Typing State
|
||||||
|
agentTyping: boolean;
|
||||||
|
setAgentTyping: (typing: boolean) => void;
|
||||||
|
|
||||||
|
// Reset
|
||||||
|
reset: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialState = {
|
||||||
|
user: null,
|
||||||
|
currentProject: null,
|
||||||
|
projects: [],
|
||||||
|
currentAgent: null,
|
||||||
|
agents: [],
|
||||||
|
currentConversation: null,
|
||||||
|
activeWorkflow: null,
|
||||||
|
sidebarOpen: true,
|
||||||
|
agentTyping: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useAppStore = create<AppState>()(
|
||||||
|
persist(
|
||||||
|
(set, get) => ({
|
||||||
|
...initialState,
|
||||||
|
|
||||||
|
// User
|
||||||
|
setUser: (user) => set({ user }),
|
||||||
|
|
||||||
|
// Current Project
|
||||||
|
setCurrentProject: (project) => set({ currentProject: project }),
|
||||||
|
|
||||||
|
// Projects
|
||||||
|
setProjects: (projects) => set({ projects }),
|
||||||
|
addProject: (project) =>
|
||||||
|
set((state) => ({ projects: [...state.projects, project] })),
|
||||||
|
updateProject: (id, updates) =>
|
||||||
|
set((state) => ({
|
||||||
|
projects: state.projects.map((p) =>
|
||||||
|
p.id === id ? { ...p, ...updates } : p
|
||||||
|
),
|
||||||
|
currentProject:
|
||||||
|
state.currentProject?.id === id
|
||||||
|
? { ...state.currentProject, ...updates }
|
||||||
|
: state.currentProject,
|
||||||
|
})),
|
||||||
|
removeProject: (id) =>
|
||||||
|
set((state) => ({
|
||||||
|
projects: state.projects.filter((p) => p.id !== id),
|
||||||
|
currentProject:
|
||||||
|
state.currentProject?.id === id ? null : state.currentProject,
|
||||||
|
})),
|
||||||
|
|
||||||
|
// Agent
|
||||||
|
setCurrentAgent: (agent) => set({ currentAgent: agent }),
|
||||||
|
setAgents: (agents) => set({ agents }),
|
||||||
|
|
||||||
|
// Conversation
|
||||||
|
setCurrentConversation: (conversation) =>
|
||||||
|
set({ currentConversation: conversation }),
|
||||||
|
addMessage: (message) =>
|
||||||
|
set((state) => {
|
||||||
|
if (!state.currentConversation) return state;
|
||||||
|
return {
|
||||||
|
currentConversation: {
|
||||||
|
...state.currentConversation,
|
||||||
|
messages: [...state.currentConversation.messages, message],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Workflow
|
||||||
|
setActiveWorkflow: (workflow) => set({ activeWorkflow: workflow }),
|
||||||
|
updateWorkflowStep: (step) =>
|
||||||
|
set((state) => {
|
||||||
|
if (!state.activeWorkflow) return state;
|
||||||
|
return {
|
||||||
|
activeWorkflow: {
|
||||||
|
...state.activeWorkflow,
|
||||||
|
currentStep: step,
|
||||||
|
status: step >= state.activeWorkflow.totalSteps ? 'completed' : 'active',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
|
||||||
|
// UI
|
||||||
|
toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
|
||||||
|
setSidebarOpen: (open) => set({ sidebarOpen: open }),
|
||||||
|
|
||||||
|
// Agent Typing
|
||||||
|
setAgentTyping: (typing) => set({ agentTyping: typing }),
|
||||||
|
|
||||||
|
// Reset
|
||||||
|
reset: () => set(initialState),
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
name: 'bmad-app-storage',
|
||||||
|
partialize: (state) => ({
|
||||||
|
user: state.user,
|
||||||
|
sidebarOpen: state.sidebarOpen,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,204 @@
|
||||||
|
// User Types
|
||||||
|
export interface User {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
name: string;
|
||||||
|
avatar?: string;
|
||||||
|
preferences: UserPreferences;
|
||||||
|
createdAt: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserPreferences {
|
||||||
|
theme: 'light' | 'dark' | 'system';
|
||||||
|
language: string;
|
||||||
|
communicationStyle: 'technical' | 'simple' | 'balanced';
|
||||||
|
skillLevel: 'beginner' | 'intermediate' | 'advanced' | 'expert';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Project Types
|
||||||
|
export interface Project {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description?: string;
|
||||||
|
complexityLevel: ComplexityLevel;
|
||||||
|
selectedModules: string[];
|
||||||
|
activeWorkflow?: string;
|
||||||
|
artifacts: Artifact[];
|
||||||
|
status: ProjectStatus;
|
||||||
|
createdAt: Date;
|
||||||
|
updatedAt: Date;
|
||||||
|
userId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ComplexityLevel = 0 | 1 | 2 | 3 | 4;
|
||||||
|
|
||||||
|
export type ProjectStatus =
|
||||||
|
| 'draft'
|
||||||
|
| 'analysis'
|
||||||
|
| 'planning'
|
||||||
|
| 'solutioning'
|
||||||
|
| 'implementation'
|
||||||
|
| 'completed';
|
||||||
|
|
||||||
|
// Agent Types
|
||||||
|
export interface Agent {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
title: string;
|
||||||
|
icon: string;
|
||||||
|
module: string;
|
||||||
|
persona: AgentPersona;
|
||||||
|
menu: AgentMenuItem[];
|
||||||
|
prompts: Record<string, string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AgentPersona {
|
||||||
|
role: string;
|
||||||
|
identity?: string;
|
||||||
|
communicationStyle: string;
|
||||||
|
principles?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AgentMenuItem {
|
||||||
|
trigger: string;
|
||||||
|
exec?: string;
|
||||||
|
description: string;
|
||||||
|
requiresContext?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Conversation Types
|
||||||
|
export interface Conversation {
|
||||||
|
id: string;
|
||||||
|
projectId: string;
|
||||||
|
agentId: string;
|
||||||
|
messages: Message[];
|
||||||
|
context: Record<string, unknown>;
|
||||||
|
createdAt: Date;
|
||||||
|
updatedAt: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Message {
|
||||||
|
id: string;
|
||||||
|
role: 'user' | 'agent' | 'system';
|
||||||
|
content: string;
|
||||||
|
metadata?: MessageMetadata;
|
||||||
|
timestamp: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MessageMetadata {
|
||||||
|
workflowStep?: string;
|
||||||
|
action?: string;
|
||||||
|
artifacts?: string[];
|
||||||
|
suggestedActions?: SuggestedAction[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SuggestedAction {
|
||||||
|
label: string;
|
||||||
|
action: string;
|
||||||
|
primary?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Workflow Types
|
||||||
|
export interface Workflow {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
module: string;
|
||||||
|
phase: WorkflowPhase;
|
||||||
|
steps: WorkflowStep[];
|
||||||
|
estimatedTime?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type WorkflowPhase =
|
||||||
|
| 'analysis'
|
||||||
|
| 'planning'
|
||||||
|
| 'solutioning'
|
||||||
|
| 'implementation';
|
||||||
|
|
||||||
|
export interface WorkflowStep {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
instruction: string;
|
||||||
|
expectedOutput?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WorkflowInstance {
|
||||||
|
id: string;
|
||||||
|
projectId: string;
|
||||||
|
workflowId: string;
|
||||||
|
currentStep: number;
|
||||||
|
totalSteps: number;
|
||||||
|
status: WorkflowInstanceStatus;
|
||||||
|
stepOutputs: Record<string, unknown>;
|
||||||
|
startedAt: Date;
|
||||||
|
completedAt?: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type WorkflowInstanceStatus =
|
||||||
|
| 'active'
|
||||||
|
| 'paused'
|
||||||
|
| 'completed'
|
||||||
|
| 'failed';
|
||||||
|
|
||||||
|
// Artifact Types
|
||||||
|
export interface Artifact {
|
||||||
|
id: string;
|
||||||
|
projectId: string;
|
||||||
|
type: ArtifactType;
|
||||||
|
name: string;
|
||||||
|
content: string;
|
||||||
|
version: number;
|
||||||
|
createdAt: Date;
|
||||||
|
updatedAt: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ArtifactType =
|
||||||
|
| 'prd'
|
||||||
|
| 'architecture'
|
||||||
|
| 'epic'
|
||||||
|
| 'story'
|
||||||
|
| 'spec'
|
||||||
|
| 'diagram'
|
||||||
|
| 'tech-spec'
|
||||||
|
| 'test-plan';
|
||||||
|
|
||||||
|
// Module Types
|
||||||
|
export interface Module {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
agents: string[];
|
||||||
|
workflows: string[];
|
||||||
|
icon?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// API Response Types
|
||||||
|
export interface ApiResponse<T> {
|
||||||
|
success: boolean;
|
||||||
|
data?: T;
|
||||||
|
error?: ApiError;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ApiError {
|
||||||
|
code: string;
|
||||||
|
message: string;
|
||||||
|
details?: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
export interface PaginatedResponse<T> {
|
||||||
|
items: T[];
|
||||||
|
total: number;
|
||||||
|
page: number;
|
||||||
|
pageSize: number;
|
||||||
|
hasMore: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// WebSocket Event Types
|
||||||
|
export type WebSocketEvent =
|
||||||
|
| { type: 'agent:message'; payload: { agentId: string; message: string; metadata?: MessageMetadata } }
|
||||||
|
| { type: 'agent:typing'; payload: { agentId: string; isTyping: boolean } }
|
||||||
|
| { type: 'workflow:progress'; payload: { instanceId: string; currentStep: number; completed: boolean } }
|
||||||
|
| { type: 'artifact:updated'; payload: { artifactId: string; version: number } }
|
||||||
|
| { type: 'error'; payload: { code: string; message: string } };
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
import type { Config } from 'tailwindcss';
|
||||||
|
|
||||||
|
const config: Config = {
|
||||||
|
darkMode: ['class'],
|
||||||
|
content: [
|
||||||
|
'./src/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
'../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
container: {
|
||||||
|
center: true,
|
||||||
|
padding: '2rem',
|
||||||
|
screens: {
|
||||||
|
'2xl': '1400px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
border: 'hsl(var(--border))',
|
||||||
|
input: 'hsl(var(--input))',
|
||||||
|
ring: 'hsl(var(--ring))',
|
||||||
|
background: 'hsl(var(--background))',
|
||||||
|
foreground: 'hsl(var(--foreground))',
|
||||||
|
primary: {
|
||||||
|
DEFAULT: 'hsl(var(--primary))',
|
||||||
|
foreground: 'hsl(var(--primary-foreground))',
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
DEFAULT: 'hsl(var(--secondary))',
|
||||||
|
foreground: 'hsl(var(--secondary-foreground))',
|
||||||
|
},
|
||||||
|
destructive: {
|
||||||
|
DEFAULT: 'hsl(var(--destructive))',
|
||||||
|
foreground: 'hsl(var(--destructive-foreground))',
|
||||||
|
},
|
||||||
|
muted: {
|
||||||
|
DEFAULT: 'hsl(var(--muted))',
|
||||||
|
foreground: 'hsl(var(--muted-foreground))',
|
||||||
|
},
|
||||||
|
accent: {
|
||||||
|
DEFAULT: 'hsl(var(--accent))',
|
||||||
|
foreground: 'hsl(var(--accent-foreground))',
|
||||||
|
},
|
||||||
|
popover: {
|
||||||
|
DEFAULT: 'hsl(var(--popover))',
|
||||||
|
foreground: 'hsl(var(--popover-foreground))',
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
DEFAULT: 'hsl(var(--card))',
|
||||||
|
foreground: 'hsl(var(--card-foreground))',
|
||||||
|
},
|
||||||
|
// BMAD Brand Colors
|
||||||
|
bmad: {
|
||||||
|
blue: '#3B82F6',
|
||||||
|
purple: '#8B5CF6',
|
||||||
|
green: '#10B981',
|
||||||
|
orange: '#F59E0B',
|
||||||
|
pink: '#EC4899',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
lg: 'var(--radius)',
|
||||||
|
md: 'calc(var(--radius) - 2px)',
|
||||||
|
sm: 'calc(var(--radius) - 4px)',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
'accordion-down': {
|
||||||
|
from: { height: '0' },
|
||||||
|
to: { height: 'var(--radix-accordion-content-height)' },
|
||||||
|
},
|
||||||
|
'accordion-up': {
|
||||||
|
from: { height: 'var(--radix-accordion-content-height)' },
|
||||||
|
to: { height: '0' },
|
||||||
|
},
|
||||||
|
'fade-in': {
|
||||||
|
from: { opacity: '0' },
|
||||||
|
to: { opacity: '1' },
|
||||||
|
},
|
||||||
|
'slide-in-from-bottom': {
|
||||||
|
from: { transform: 'translateY(10px)', opacity: '0' },
|
||||||
|
to: { transform: 'translateY(0)', opacity: '1' },
|
||||||
|
},
|
||||||
|
pulse: {
|
||||||
|
'0%, 100%': { opacity: '1' },
|
||||||
|
'50%': { opacity: '0.5' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||||
|
'accordion-up': 'accordion-up 0.2s ease-out',
|
||||||
|
'fade-in': 'fade-in 0.3s ease-out',
|
||||||
|
'slide-in': 'slide-in-from-bottom 0.3s ease-out',
|
||||||
|
pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [require('tailwindcss-animate')],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"],
|
||||||
|
"@bmad/core": ["../../packages/bmad-core/src"],
|
||||||
|
"@bmad/ui": ["../../packages/ui/src"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
{
|
||||||
|
"name": "bmad-web",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"description": "BMAD-METHOD Web Application - Consumer Frontend",
|
||||||
|
"workspaces": [
|
||||||
|
"apps/*",
|
||||||
|
"packages/*"
|
||||||
|
],
|
||||||
|
"scripts": {
|
||||||
|
"dev": "turbo run dev",
|
||||||
|
"build": "turbo run build",
|
||||||
|
"lint": "turbo run lint",
|
||||||
|
"test": "turbo run test",
|
||||||
|
"clean": "turbo run clean && rm -rf node_modules",
|
||||||
|
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
|
||||||
|
"db:generate": "turbo run db:generate --filter=@bmad/api",
|
||||||
|
"db:push": "turbo run db:push --filter=@bmad/api",
|
||||||
|
"db:studio": "turbo run db:studio --filter=@bmad/api"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^20.10.0",
|
||||||
|
"prettier": "^3.1.0",
|
||||||
|
"turbo": "^2.0.0",
|
||||||
|
"typescript": "^5.3.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20.0.0"
|
||||||
|
},
|
||||||
|
"packageManager": "npm@10.0.0"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"name": "@bmad/core",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"main": "./src/index.ts",
|
||||||
|
"types": "./src/index.ts",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"import": "./src/index.ts",
|
||||||
|
"types": "./src/index.ts"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "tsc",
|
||||||
|
"lint": "eslint src --ext .ts",
|
||||||
|
"clean": "rm -rf dist node_modules"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"yaml": "^2.3.4",
|
||||||
|
"glob": "^10.3.10"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^20.10.0",
|
||||||
|
"typescript": "^5.3.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
/**
|
||||||
|
* BMAD Core Package
|
||||||
|
*
|
||||||
|
* This package provides the core functionality for BMAD Method:
|
||||||
|
* - Agent definitions and parsing
|
||||||
|
* - Workflow definitions and execution
|
||||||
|
* - Module system
|
||||||
|
* - Shared types
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Export types
|
||||||
|
export * from './types/index.js';
|
||||||
|
|
||||||
|
// Export utilities
|
||||||
|
export * from './utils/yaml-parser.js';
|
||||||
|
export * from './utils/agent-loader.js';
|
||||||
|
export * from './utils/workflow-loader.js';
|
||||||
|
|
||||||
|
// Export constants
|
||||||
|
export const BMAD_VERSION = '6.0.0';
|
||||||
|
|
||||||
|
export const COMPLEXITY_LEVELS = {
|
||||||
|
0: { name: 'Bug Fix', description: 'Simple bug fixes' },
|
||||||
|
1: { name: 'Small Feature', description: 'Small features and enhancements' },
|
||||||
|
2: { name: 'Standard Product', description: 'Standard products and platforms' },
|
||||||
|
3: { name: 'Complex Platform', description: 'Complex platforms with multiple integrations' },
|
||||||
|
4: { name: 'Enterprise System', description: 'Enterprise systems with compliance requirements' },
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const MODULES = {
|
||||||
|
bmm: {
|
||||||
|
id: 'bmm',
|
||||||
|
name: 'BMAD Method Module',
|
||||||
|
description: 'Core agile development framework',
|
||||||
|
},
|
||||||
|
cis: {
|
||||||
|
id: 'cis',
|
||||||
|
name: 'Creative Intelligence Suite',
|
||||||
|
description: 'Innovation and brainstorming tools',
|
||||||
|
},
|
||||||
|
bmb: {
|
||||||
|
id: 'bmb',
|
||||||
|
name: 'BMAD Builder',
|
||||||
|
description: 'Custom agent and module creation',
|
||||||
|
},
|
||||||
|
bmgd: {
|
||||||
|
id: 'bmgd',
|
||||||
|
name: 'BMAD Game Dev',
|
||||||
|
description: 'Game development specialization',
|
||||||
|
},
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const WORKFLOW_PHASES = [
|
||||||
|
'analysis',
|
||||||
|
'planning',
|
||||||
|
'solutioning',
|
||||||
|
'implementation',
|
||||||
|
] as const;
|
||||||
|
|
@ -0,0 +1,277 @@
|
||||||
|
/**
|
||||||
|
* BMAD Core Types
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Agent Types
|
||||||
|
export interface AgentMetadata {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
title: string;
|
||||||
|
icon?: string;
|
||||||
|
module: string;
|
||||||
|
version?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AgentPersona {
|
||||||
|
role: string;
|
||||||
|
identity?: string;
|
||||||
|
communicationStyle: string;
|
||||||
|
principles?: string[];
|
||||||
|
expertise?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AgentMenuItem {
|
||||||
|
trigger: string;
|
||||||
|
exec?: string;
|
||||||
|
description: string;
|
||||||
|
requiresContext?: string[];
|
||||||
|
fuzzyMatch?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AgentDefinition {
|
||||||
|
metadata: AgentMetadata;
|
||||||
|
persona: AgentPersona;
|
||||||
|
menu: AgentMenuItem[];
|
||||||
|
prompts: Record<string, string>;
|
||||||
|
sidecars?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Workflow Types
|
||||||
|
export interface WorkflowMetadata {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
module: string;
|
||||||
|
phase: WorkflowPhase;
|
||||||
|
estimatedTime?: string;
|
||||||
|
complexity?: number[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export type WorkflowPhase =
|
||||||
|
| 'analysis'
|
||||||
|
| 'planning'
|
||||||
|
| 'solutioning'
|
||||||
|
| 'implementation';
|
||||||
|
|
||||||
|
export interface WorkflowStep {
|
||||||
|
id: string;
|
||||||
|
number: number;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
instruction: string;
|
||||||
|
expectedOutput?: string;
|
||||||
|
validation?: WorkflowStepValidation;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WorkflowStepValidation {
|
||||||
|
required?: string[];
|
||||||
|
format?: string;
|
||||||
|
minLength?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WorkflowDefinition {
|
||||||
|
metadata: WorkflowMetadata;
|
||||||
|
steps: WorkflowStep[];
|
||||||
|
outputs?: WorkflowOutput[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WorkflowOutput {
|
||||||
|
name: string;
|
||||||
|
type: ArtifactType;
|
||||||
|
template?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Module Types
|
||||||
|
export interface ModuleDefinition {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
version?: string;
|
||||||
|
agents: string[];
|
||||||
|
workflows: string[];
|
||||||
|
dependencies?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Artifact Types
|
||||||
|
export type ArtifactType =
|
||||||
|
| 'prd'
|
||||||
|
| 'architecture'
|
||||||
|
| 'epic'
|
||||||
|
| 'story'
|
||||||
|
| 'spec'
|
||||||
|
| 'diagram'
|
||||||
|
| 'tech-spec'
|
||||||
|
| 'test-plan'
|
||||||
|
| 'retrospective'
|
||||||
|
| 'custom';
|
||||||
|
|
||||||
|
export interface Artifact {
|
||||||
|
id: string;
|
||||||
|
projectId: string;
|
||||||
|
type: ArtifactType;
|
||||||
|
name: string;
|
||||||
|
content: string;
|
||||||
|
version: number;
|
||||||
|
metadata?: Record<string, unknown>;
|
||||||
|
createdAt: Date;
|
||||||
|
updatedAt: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Project Types
|
||||||
|
export type ComplexityLevel = 0 | 1 | 2 | 3 | 4;
|
||||||
|
|
||||||
|
export type ProjectStatus =
|
||||||
|
| 'draft'
|
||||||
|
| 'analysis'
|
||||||
|
| 'planning'
|
||||||
|
| 'solutioning'
|
||||||
|
| 'implementation'
|
||||||
|
| 'completed'
|
||||||
|
| 'archived';
|
||||||
|
|
||||||
|
export interface Project {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description?: string;
|
||||||
|
complexityLevel: ComplexityLevel;
|
||||||
|
selectedModules: string[];
|
||||||
|
status: ProjectStatus;
|
||||||
|
config?: ProjectConfig;
|
||||||
|
createdAt: Date;
|
||||||
|
updatedAt: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProjectConfig {
|
||||||
|
communicationLanguage?: string;
|
||||||
|
outputFolder?: string;
|
||||||
|
userSkillLevel?: 'beginner' | 'intermediate' | 'advanced' | 'expert';
|
||||||
|
customSettings?: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Conversation Types
|
||||||
|
export interface Message {
|
||||||
|
id: string;
|
||||||
|
role: 'user' | 'agent' | 'system';
|
||||||
|
content: string;
|
||||||
|
agentId?: string;
|
||||||
|
metadata?: MessageMetadata;
|
||||||
|
timestamp: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MessageMetadata {
|
||||||
|
workflowStep?: string;
|
||||||
|
action?: string;
|
||||||
|
artifacts?: string[];
|
||||||
|
suggestedActions?: SuggestedAction[];
|
||||||
|
context?: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SuggestedAction {
|
||||||
|
label: string;
|
||||||
|
action: string;
|
||||||
|
primary?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Conversation {
|
||||||
|
id: string;
|
||||||
|
projectId: string;
|
||||||
|
agentId: string;
|
||||||
|
messages: Message[];
|
||||||
|
context: ConversationContext;
|
||||||
|
createdAt: Date;
|
||||||
|
updatedAt: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ConversationContext {
|
||||||
|
workflowId?: string;
|
||||||
|
workflowStep?: number;
|
||||||
|
artifacts?: string[];
|
||||||
|
variables?: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Workflow Instance Types
|
||||||
|
export type WorkflowInstanceStatus =
|
||||||
|
| 'pending'
|
||||||
|
| 'active'
|
||||||
|
| 'paused'
|
||||||
|
| 'completed'
|
||||||
|
| 'failed'
|
||||||
|
| 'cancelled';
|
||||||
|
|
||||||
|
export interface WorkflowInstance {
|
||||||
|
id: string;
|
||||||
|
projectId: string;
|
||||||
|
workflowId: string;
|
||||||
|
currentStep: number;
|
||||||
|
totalSteps: number;
|
||||||
|
status: WorkflowInstanceStatus;
|
||||||
|
stepOutputs: Record<string, unknown>;
|
||||||
|
conversationId?: string;
|
||||||
|
startedAt: Date;
|
||||||
|
completedAt?: Date;
|
||||||
|
error?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// User Types
|
||||||
|
export interface User {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
name: string;
|
||||||
|
avatar?: string;
|
||||||
|
preferences: UserPreferences;
|
||||||
|
createdAt: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserPreferences {
|
||||||
|
theme: 'light' | 'dark' | 'system';
|
||||||
|
language: string;
|
||||||
|
communicationStyle: 'technical' | 'simple' | 'balanced';
|
||||||
|
skillLevel: 'beginner' | 'intermediate' | 'advanced' | 'expert';
|
||||||
|
notifications?: NotificationPreferences;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NotificationPreferences {
|
||||||
|
email: boolean;
|
||||||
|
push: boolean;
|
||||||
|
workflowUpdates: boolean;
|
||||||
|
agentMessages: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// API Types
|
||||||
|
export interface ApiResponse<T> {
|
||||||
|
success: boolean;
|
||||||
|
data?: T;
|
||||||
|
error?: ApiError;
|
||||||
|
meta?: ApiMeta;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ApiError {
|
||||||
|
code: string;
|
||||||
|
message: string;
|
||||||
|
details?: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ApiMeta {
|
||||||
|
page?: number;
|
||||||
|
pageSize?: number;
|
||||||
|
total?: number;
|
||||||
|
hasMore?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event Types
|
||||||
|
export type WebSocketEventType =
|
||||||
|
| 'agent:message'
|
||||||
|
| 'agent:typing'
|
||||||
|
| 'workflow:progress'
|
||||||
|
| 'workflow:completed'
|
||||||
|
| 'artifact:created'
|
||||||
|
| 'artifact:updated'
|
||||||
|
| 'project:updated'
|
||||||
|
| 'error';
|
||||||
|
|
||||||
|
export interface WebSocketEvent<T = unknown> {
|
||||||
|
type: WebSocketEventType;
|
||||||
|
payload: T;
|
||||||
|
timestamp: string;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,158 @@
|
||||||
|
import { readFile, readdir } from 'fs/promises';
|
||||||
|
import { join } from 'path';
|
||||||
|
import { parseYaml, extractFrontmatter } from './yaml-parser.js';
|
||||||
|
import type { AgentDefinition, AgentMetadata, AgentPersona, AgentMenuItem } from '../types/index.js';
|
||||||
|
|
||||||
|
interface RawAgentData {
|
||||||
|
agent?: {
|
||||||
|
metadata?: Partial<AgentMetadata>;
|
||||||
|
persona?: Partial<AgentPersona> & { communication_style?: string };
|
||||||
|
menu?: Array<{
|
||||||
|
trigger: string;
|
||||||
|
exec?: string;
|
||||||
|
description?: string;
|
||||||
|
requires_context?: string[];
|
||||||
|
}>;
|
||||||
|
prompts?: Record<string, string>;
|
||||||
|
};
|
||||||
|
metadata?: Partial<AgentMetadata>;
|
||||||
|
persona?: Partial<AgentPersona> & { communication_style?: string };
|
||||||
|
menu?: Array<{
|
||||||
|
trigger: string;
|
||||||
|
exec?: string;
|
||||||
|
description?: string;
|
||||||
|
requires_context?: string[];
|
||||||
|
}>;
|
||||||
|
prompts?: Record<string, string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load agent definition from file
|
||||||
|
*/
|
||||||
|
export async function loadAgent(
|
||||||
|
filePath: string,
|
||||||
|
moduleName: string
|
||||||
|
): Promise<AgentDefinition | null> {
|
||||||
|
try {
|
||||||
|
const content = await readFile(filePath, 'utf-8');
|
||||||
|
return parseAgentContent(content, moduleName, filePath);
|
||||||
|
} catch (error) {
|
||||||
|
console.warn(`Failed to load agent from ${filePath}:`, error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse agent content (YAML or Markdown with frontmatter)
|
||||||
|
*/
|
||||||
|
export function parseAgentContent(
|
||||||
|
content: string,
|
||||||
|
moduleName: string,
|
||||||
|
filePath: string
|
||||||
|
): AgentDefinition | null {
|
||||||
|
try {
|
||||||
|
let data: RawAgentData;
|
||||||
|
|
||||||
|
// Check if it's markdown with frontmatter
|
||||||
|
if (content.startsWith('---')) {
|
||||||
|
const { frontmatter } = extractFrontmatter<RawAgentData>(content);
|
||||||
|
if (!frontmatter) return null;
|
||||||
|
data = frontmatter;
|
||||||
|
} else {
|
||||||
|
data = parseYaml<RawAgentData>(content);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extract agent data (could be nested under 'agent' key)
|
||||||
|
const agentData = data.agent || data;
|
||||||
|
|
||||||
|
// Build agent ID from file path
|
||||||
|
const fileName = filePath.split('/').pop() || '';
|
||||||
|
const agentId = agentData.metadata?.id ||
|
||||||
|
`${moduleName}/${fileName.replace('.agent.yaml', '').replace('.agent.md', '')}`;
|
||||||
|
|
||||||
|
const definition: AgentDefinition = {
|
||||||
|
metadata: {
|
||||||
|
id: agentId,
|
||||||
|
name: agentData.metadata?.name || 'Agent',
|
||||||
|
title: agentData.metadata?.title || 'AI Agent',
|
||||||
|
icon: agentData.metadata?.icon,
|
||||||
|
module: moduleName,
|
||||||
|
version: agentData.metadata?.version,
|
||||||
|
},
|
||||||
|
persona: {
|
||||||
|
role: agentData.persona?.role || 'AI Assistant',
|
||||||
|
identity: agentData.persona?.identity,
|
||||||
|
communicationStyle:
|
||||||
|
agentData.persona?.communicationStyle ||
|
||||||
|
agentData.persona?.communication_style ||
|
||||||
|
'professional',
|
||||||
|
principles: agentData.persona?.principles,
|
||||||
|
expertise: agentData.persona?.expertise,
|
||||||
|
},
|
||||||
|
menu: (agentData.menu || []).map((item): AgentMenuItem => ({
|
||||||
|
trigger: item.trigger,
|
||||||
|
exec: item.exec,
|
||||||
|
description: item.description || item.trigger,
|
||||||
|
requiresContext: item.requires_context,
|
||||||
|
})),
|
||||||
|
prompts: agentData.prompts || {},
|
||||||
|
};
|
||||||
|
|
||||||
|
return definition;
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('Failed to parse agent content:', error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load all agents from a module directory
|
||||||
|
*/
|
||||||
|
export async function loadAgentsFromModule(
|
||||||
|
modulePath: string,
|
||||||
|
moduleName: string
|
||||||
|
): Promise<AgentDefinition[]> {
|
||||||
|
const agents: AgentDefinition[] = [];
|
||||||
|
const agentsPath = join(modulePath, 'agents');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const files = await readdir(agentsPath);
|
||||||
|
|
||||||
|
for (const file of files) {
|
||||||
|
if (file.endsWith('.agent.yaml') || file.endsWith('.agent.md')) {
|
||||||
|
const agent = await loadAgent(join(agentsPath, file), moduleName);
|
||||||
|
if (agent) {
|
||||||
|
agents.push(agent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// agents directory doesn't exist
|
||||||
|
}
|
||||||
|
|
||||||
|
return agents;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load all agents from BMAD root
|
||||||
|
*/
|
||||||
|
export async function loadAllAgents(bmadRoot: string): Promise<AgentDefinition[]> {
|
||||||
|
const agents: AgentDefinition[] = [];
|
||||||
|
const modulesPath = join(bmadRoot, 'src/modules');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const modules = await readdir(modulesPath);
|
||||||
|
|
||||||
|
for (const moduleName of modules) {
|
||||||
|
const moduleAgents = await loadAgentsFromModule(
|
||||||
|
join(modulesPath, moduleName),
|
||||||
|
moduleName
|
||||||
|
);
|
||||||
|
agents.push(...moduleAgents);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('Failed to load agents:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
return agents;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,216 @@
|
||||||
|
import { readFile, readdir, stat } from 'fs/promises';
|
||||||
|
import { join } from 'path';
|
||||||
|
import { parseYaml, extractFrontmatter } from './yaml-parser.js';
|
||||||
|
import type { WorkflowDefinition, WorkflowMetadata, WorkflowStep, WorkflowPhase } from '../types/index.js';
|
||||||
|
|
||||||
|
interface RawWorkflowData {
|
||||||
|
name?: string;
|
||||||
|
description?: string;
|
||||||
|
phase?: string;
|
||||||
|
estimatedTime?: string;
|
||||||
|
complexity?: number[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load workflow definition from directory
|
||||||
|
*/
|
||||||
|
export async function loadWorkflow(
|
||||||
|
workflowPath: string,
|
||||||
|
moduleName: string
|
||||||
|
): Promise<WorkflowDefinition | null> {
|
||||||
|
try {
|
||||||
|
// Try to load workflow.yaml or workflow.md
|
||||||
|
let workflowConfig: RawWorkflowData | null = null;
|
||||||
|
const workflowYamlPath = join(workflowPath, 'workflow.yaml');
|
||||||
|
const workflowMdPath = join(workflowPath, 'workflow.md');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const yamlContent = await readFile(workflowYamlPath, 'utf-8');
|
||||||
|
workflowConfig = parseYaml<RawWorkflowData>(yamlContent);
|
||||||
|
} catch {
|
||||||
|
try {
|
||||||
|
const mdContent = await readFile(workflowMdPath, 'utf-8');
|
||||||
|
const { frontmatter } = extractFrontmatter<RawWorkflowData>(mdContent);
|
||||||
|
workflowConfig = frontmatter;
|
||||||
|
} catch {
|
||||||
|
// No workflow config found
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load steps
|
||||||
|
const steps = await loadWorkflowSteps(workflowPath);
|
||||||
|
|
||||||
|
if (steps.length === 0 && !workflowConfig) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build workflow ID from path
|
||||||
|
const workflowName = workflowPath.split('/').pop() || 'workflow';
|
||||||
|
const workflowId = `${moduleName}/${workflowName}`;
|
||||||
|
|
||||||
|
const definition: WorkflowDefinition = {
|
||||||
|
metadata: {
|
||||||
|
id: workflowId,
|
||||||
|
name: workflowConfig?.name || workflowName,
|
||||||
|
description: workflowConfig?.description || '',
|
||||||
|
module: moduleName,
|
||||||
|
phase: (workflowConfig?.phase || 'planning') as WorkflowPhase,
|
||||||
|
estimatedTime: workflowConfig?.estimatedTime,
|
||||||
|
complexity: workflowConfig?.complexity,
|
||||||
|
},
|
||||||
|
steps,
|
||||||
|
};
|
||||||
|
|
||||||
|
return definition;
|
||||||
|
} catch (error) {
|
||||||
|
console.warn(`Failed to load workflow from ${workflowPath}:`, error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load workflow steps from directory
|
||||||
|
*/
|
||||||
|
async function loadWorkflowSteps(workflowPath: string): Promise<WorkflowStep[]> {
|
||||||
|
const steps: WorkflowStep[] = [];
|
||||||
|
|
||||||
|
try {
|
||||||
|
const files = await readdir(workflowPath);
|
||||||
|
|
||||||
|
// Find step files (step-1.md, step-2.md, etc.)
|
||||||
|
const stepFiles = files
|
||||||
|
.filter(f => /^step-\d+\.md$/.test(f))
|
||||||
|
.sort((a, b) => {
|
||||||
|
const numA = parseInt(a.match(/\d+/)?.[0] || '0');
|
||||||
|
const numB = parseInt(b.match(/\d+/)?.[0] || '0');
|
||||||
|
return numA - numB;
|
||||||
|
});
|
||||||
|
|
||||||
|
for (let i = 0; i < stepFiles.length; i++) {
|
||||||
|
const stepFile = stepFiles[i];
|
||||||
|
const stepPath = join(workflowPath, stepFile);
|
||||||
|
const content = await readFile(stepPath, 'utf-8');
|
||||||
|
|
||||||
|
const step = parseStepContent(content, i + 1, stepFile);
|
||||||
|
if (step) {
|
||||||
|
steps.push(step);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// No step files found
|
||||||
|
}
|
||||||
|
|
||||||
|
return steps;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse step content from markdown
|
||||||
|
*/
|
||||||
|
function parseStepContent(
|
||||||
|
content: string,
|
||||||
|
stepNumber: number,
|
||||||
|
fileName: string
|
||||||
|
): WorkflowStep | null {
|
||||||
|
try {
|
||||||
|
const { frontmatter, content: markdownContent } = extractFrontmatter<{
|
||||||
|
name?: string;
|
||||||
|
description?: string;
|
||||||
|
expectedOutput?: string;
|
||||||
|
validation?: {
|
||||||
|
required?: string[];
|
||||||
|
format?: string;
|
||||||
|
minLength?: number;
|
||||||
|
};
|
||||||
|
}>(content);
|
||||||
|
|
||||||
|
// Extract title from first heading if no frontmatter name
|
||||||
|
let name = frontmatter?.name;
|
||||||
|
if (!name) {
|
||||||
|
const titleMatch = markdownContent.match(/^#\s+(.+)$/m);
|
||||||
|
name = titleMatch?.[1] || `Step ${stepNumber}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: fileName.replace('.md', ''),
|
||||||
|
number: stepNumber,
|
||||||
|
name,
|
||||||
|
description: frontmatter?.description || '',
|
||||||
|
instruction: markdownContent.trim(),
|
||||||
|
expectedOutput: frontmatter?.expectedOutput,
|
||||||
|
validation: frontmatter?.validation,
|
||||||
|
};
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load all workflows from a module directory
|
||||||
|
*/
|
||||||
|
export async function loadWorkflowsFromModule(
|
||||||
|
modulePath: string,
|
||||||
|
moduleName: string
|
||||||
|
): Promise<WorkflowDefinition[]> {
|
||||||
|
const workflows: WorkflowDefinition[] = [];
|
||||||
|
const workflowsPath = join(modulePath, 'workflows');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const items = await readdir(workflowsPath);
|
||||||
|
|
||||||
|
for (const item of items) {
|
||||||
|
const itemPath = join(workflowsPath, item);
|
||||||
|
const itemStat = await stat(itemPath);
|
||||||
|
|
||||||
|
if (itemStat.isDirectory()) {
|
||||||
|
// Check subdirectories for workflows
|
||||||
|
const subItems = await readdir(itemPath);
|
||||||
|
|
||||||
|
for (const subItem of subItems) {
|
||||||
|
const subItemPath = join(itemPath, subItem);
|
||||||
|
const subItemStat = await stat(subItemPath);
|
||||||
|
|
||||||
|
if (subItemStat.isDirectory()) {
|
||||||
|
const workflow = await loadWorkflow(subItemPath, moduleName);
|
||||||
|
if (workflow) {
|
||||||
|
workflows.push(workflow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Also check if current directory is a workflow
|
||||||
|
const workflow = await loadWorkflow(itemPath, moduleName);
|
||||||
|
if (workflow) {
|
||||||
|
workflows.push(workflow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// workflows directory doesn't exist
|
||||||
|
}
|
||||||
|
|
||||||
|
return workflows;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load all workflows from BMAD root
|
||||||
|
*/
|
||||||
|
export async function loadAllWorkflows(bmadRoot: string): Promise<WorkflowDefinition[]> {
|
||||||
|
const workflows: WorkflowDefinition[] = [];
|
||||||
|
const modulesPath = join(bmadRoot, 'src/modules');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const modules = await readdir(modulesPath);
|
||||||
|
|
||||||
|
for (const moduleName of modules) {
|
||||||
|
const moduleWorkflows = await loadWorkflowsFromModule(
|
||||||
|
join(modulesPath, moduleName),
|
||||||
|
moduleName
|
||||||
|
);
|
||||||
|
workflows.push(...moduleWorkflows);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('Failed to load workflows:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
return workflows;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
import { parse, stringify } from 'yaml';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse YAML content to JavaScript object
|
||||||
|
*/
|
||||||
|
export function parseYaml<T = unknown>(content: string): T {
|
||||||
|
return parse(content) as T;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Stringify JavaScript object to YAML
|
||||||
|
*/
|
||||||
|
export function toYaml(data: unknown): string {
|
||||||
|
return stringify(data, {
|
||||||
|
indent: 2,
|
||||||
|
lineWidth: 120,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Extract frontmatter from markdown content
|
||||||
|
*/
|
||||||
|
export function extractFrontmatter<T = Record<string, unknown>>(
|
||||||
|
content: string
|
||||||
|
): { frontmatter: T | null; content: string } {
|
||||||
|
const frontmatterRegex = /^---\n([\s\S]*?)\n---\n/;
|
||||||
|
const match = content.match(frontmatterRegex);
|
||||||
|
|
||||||
|
if (match) {
|
||||||
|
try {
|
||||||
|
const frontmatter = parseYaml<T>(match[1]);
|
||||||
|
const contentWithoutFrontmatter = content.slice(match[0].length);
|
||||||
|
return { frontmatter, content: contentWithoutFrontmatter };
|
||||||
|
} catch {
|
||||||
|
return { frontmatter: null, content };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { frontmatter: null, content };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add frontmatter to markdown content
|
||||||
|
*/
|
||||||
|
export function addFrontmatter(
|
||||||
|
content: string,
|
||||||
|
frontmatter: Record<string, unknown>
|
||||||
|
): string {
|
||||||
|
const yamlFrontmatter = toYaml(frontmatter);
|
||||||
|
return `---\n${yamlFrontmatter}---\n\n${content}`;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./dist",
|
||||||
|
"rootDir": "./src",
|
||||||
|
"declaration": true,
|
||||||
|
"declarationMap": true,
|
||||||
|
"noEmit": false
|
||||||
|
},
|
||||||
|
"include": ["src/**/*"],
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
{
|
||||||
|
"name": "@bmad/ui",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"main": "./src/index.ts",
|
||||||
|
"types": "./src/index.ts",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"import": "./src/index.ts",
|
||||||
|
"types": "./src/index.ts"
|
||||||
|
},
|
||||||
|
"./components/*": {
|
||||||
|
"import": "./src/components/*.tsx",
|
||||||
|
"types": "./src/components/*.tsx"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "tsc",
|
||||||
|
"lint": "eslint src --ext .ts,.tsx",
|
||||||
|
"clean": "rm -rf dist node_modules"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/react-slot": "^1.0.2",
|
||||||
|
"class-variance-authority": "^0.7.0",
|
||||||
|
"clsx": "^2.0.0",
|
||||||
|
"lucide-react": "^0.294.0",
|
||||||
|
"tailwind-merge": "^2.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.38",
|
||||||
|
"@types/react-dom": "^18.2.17",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"typescript": "^5.3.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { cn } from '../utils.js';
|
||||||
|
|
||||||
|
const Avatar = React.forwardRef<
|
||||||
|
HTMLSpanElement,
|
||||||
|
React.HTMLAttributes<HTMLSpanElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<span
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
Avatar.displayName = 'Avatar';
|
||||||
|
|
||||||
|
const AvatarImage = React.forwardRef<
|
||||||
|
HTMLImageElement,
|
||||||
|
React.ImgHTMLAttributes<HTMLImageElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<img
|
||||||
|
ref={ref}
|
||||||
|
className={cn('aspect-square h-full w-full', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AvatarImage.displayName = 'AvatarImage';
|
||||||
|
|
||||||
|
const AvatarFallback = React.forwardRef<
|
||||||
|
HTMLSpanElement,
|
||||||
|
React.HTMLAttributes<HTMLSpanElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<span
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'flex h-full w-full items-center justify-center rounded-full bg-muted',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AvatarFallback.displayName = 'AvatarFallback';
|
||||||
|
|
||||||
|
export { Avatar, AvatarImage, AvatarFallback };
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
import { cn } from '../utils.js';
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
|
||||||
|
secondary:
|
||||||
|
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||||
|
destructive:
|
||||||
|
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
|
||||||
|
outline: 'text-foreground',
|
||||||
|
success:
|
||||||
|
'border-transparent bg-green-500 text-white hover:bg-green-500/80',
|
||||||
|
warning:
|
||||||
|
'border-transparent bg-yellow-500 text-white hover:bg-yellow-500/80',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export interface BadgeProps
|
||||||
|
extends React.HTMLAttributes<HTMLDivElement>,
|
||||||
|
VariantProps<typeof badgeVariants> {}
|
||||||
|
|
||||||
|
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||||
|
return (
|
||||||
|
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants };
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Slot } from '@radix-ui/react-slot';
|
||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
import { cn } from '../utils.js';
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
||||||
|
destructive:
|
||||||
|
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||||
|
outline:
|
||||||
|
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
|
||||||
|
secondary:
|
||||||
|
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||||
|
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||||
|
link: 'text-primary underline-offset-4 hover:underline',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: 'h-10 px-4 py-2',
|
||||||
|
sm: 'h-9 rounded-md px-3',
|
||||||
|
lg: 'h-11 rounded-md px-8',
|
||||||
|
icon: 'h-10 w-10',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
size: 'default',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export interface ButtonProps
|
||||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
VariantProps<typeof buttonVariants> {
|
||||||
|
asChild?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? Slot : 'button';
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
Button.displayName = 'Button';
|
||||||
|
|
||||||
|
export { Button, buttonVariants };
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { cn } from '../utils.js';
|
||||||
|
|
||||||
|
const Card = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'rounded-lg border bg-card text-card-foreground shadow-sm',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
Card.displayName = 'Card';
|
||||||
|
|
||||||
|
const CardHeader = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn('flex flex-col space-y-1.5 p-6', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
CardHeader.displayName = 'CardHeader';
|
||||||
|
|
||||||
|
const CardTitle = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLHeadingElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<h3
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'text-2xl font-semibold leading-none tracking-tight',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
CardTitle.displayName = 'CardTitle';
|
||||||
|
|
||||||
|
const CardDescription = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLParagraphElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<p
|
||||||
|
ref={ref}
|
||||||
|
className={cn('text-sm text-muted-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
CardDescription.displayName = 'CardDescription';
|
||||||
|
|
||||||
|
const CardContent = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
|
||||||
|
));
|
||||||
|
CardContent.displayName = 'CardContent';
|
||||||
|
|
||||||
|
const CardFooter = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn('flex items-center p-6 pt-0', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
CardFooter.displayName = 'CardFooter';
|
||||||
|
|
||||||
|
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { cn } from '../utils.js';
|
||||||
|
|
||||||
|
export interface InputProps
|
||||||
|
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||||
|
({ className, type, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
className={cn(
|
||||||
|
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
Input.displayName = 'Input';
|
||||||
|
|
||||||
|
export { Input };
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
import { cn } from '../utils.js';
|
||||||
|
|
||||||
|
const labelVariants = cva(
|
||||||
|
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
|
||||||
|
);
|
||||||
|
|
||||||
|
export interface LabelProps
|
||||||
|
extends React.LabelHTMLAttributes<HTMLLabelElement>,
|
||||||
|
VariantProps<typeof labelVariants> {}
|
||||||
|
|
||||||
|
const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
|
||||||
|
({ className, ...props }, ref) => (
|
||||||
|
<label ref={ref} className={cn(labelVariants(), className)} {...props} />
|
||||||
|
)
|
||||||
|
);
|
||||||
|
Label.displayName = 'Label';
|
||||||
|
|
||||||
|
export { Label };
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { cn } from '../utils.js';
|
||||||
|
|
||||||
|
interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
|
value?: number;
|
||||||
|
max?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
|
||||||
|
({ className, value = 0, max = 100, ...props }, ref) => {
|
||||||
|
const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="h-full w-full flex-1 bg-primary transition-all"
|
||||||
|
style={{ transform: `translateX(-${100 - percentage}%)` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
Progress.displayName = 'Progress';
|
||||||
|
|
||||||
|
export { Progress };
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { cn } from '../utils.js';
|
||||||
|
|
||||||
|
function Skeleton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn('animate-pulse rounded-md bg-muted', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Skeleton };
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
import { cn } from '../utils.js';
|
||||||
|
import { Loader2 } from 'lucide-react';
|
||||||
|
|
||||||
|
interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
|
size?: 'sm' | 'md' | 'lg';
|
||||||
|
}
|
||||||
|
|
||||||
|
const sizeClasses = {
|
||||||
|
sm: 'h-4 w-4',
|
||||||
|
md: 'h-6 w-6',
|
||||||
|
lg: 'h-8 w-8',
|
||||||
|
};
|
||||||
|
|
||||||
|
function Spinner({ className, size = 'md', ...props }: SpinnerProps) {
|
||||||
|
return (
|
||||||
|
<div className={cn('flex items-center justify-center', className)} {...props}>
|
||||||
|
<Loader2 className={cn('animate-spin', sizeClasses[size])} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Spinner };
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { cn } from '../utils.js';
|
||||||
|
|
||||||
|
export interface TextareaProps
|
||||||
|
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
|
||||||
|
|
||||||
|
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||||
|
({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<textarea
|
||||||
|
className={cn(
|
||||||
|
'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
Textarea.displayName = 'Textarea';
|
||||||
|
|
||||||
|
export { Textarea };
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
/**
|
||||||
|
* BMAD UI Package
|
||||||
|
*
|
||||||
|
* Shared UI components for BMAD applications
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Export utilities
|
||||||
|
export { cn } from './utils.js';
|
||||||
|
|
||||||
|
// Export components
|
||||||
|
export { Button, buttonVariants } from './components/button.js';
|
||||||
|
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './components/card.js';
|
||||||
|
export { Input } from './components/input.js';
|
||||||
|
export { Label } from './components/label.js';
|
||||||
|
export { Textarea } from './components/textarea.js';
|
||||||
|
export { Badge, badgeVariants } from './components/badge.js';
|
||||||
|
export { Avatar, AvatarImage, AvatarFallback } from './components/avatar.js';
|
||||||
|
export { Progress } from './components/progress.js';
|
||||||
|
export { Skeleton } from './components/skeleton.js';
|
||||||
|
export { Spinner } from './components/spinner.js';
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { type ClassValue, clsx } from 'clsx';
|
||||||
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Merge Tailwind CSS classes with clsx
|
||||||
|
*/
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./dist",
|
||||||
|
"rootDir": "./src",
|
||||||
|
"declaration": true,
|
||||||
|
"declarationMap": true,
|
||||||
|
"noEmit": false,
|
||||||
|
"jsx": "react-jsx"
|
||||||
|
},
|
||||||
|
"include": ["src/**/*"],
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"strict": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"declaration": true,
|
||||||
|
"declarationMap": true,
|
||||||
|
"noEmit": true
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://turbo.build/schema.json",
|
||||||
|
"globalDependencies": ["**/.env.*local"],
|
||||||
|
"tasks": {
|
||||||
|
"build": {
|
||||||
|
"dependsOn": ["^build"],
|
||||||
|
"outputs": [".next/**", "!.next/cache/**", "dist/**"]
|
||||||
|
},
|
||||||
|
"dev": {
|
||||||
|
"cache": false,
|
||||||
|
"persistent": true
|
||||||
|
},
|
||||||
|
"lint": {
|
||||||
|
"dependsOn": ["^build"]
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"dependsOn": ["^build"]
|
||||||
|
},
|
||||||
|
"clean": {
|
||||||
|
"cache": false
|
||||||
|
},
|
||||||
|
"db:generate": {
|
||||||
|
"cache": false
|
||||||
|
},
|
||||||
|
"db:push": {
|
||||||
|
"cache": false
|
||||||
|
},
|
||||||
|
"db:studio": {
|
||||||
|
"cache": false,
|
||||||
|
"persistent": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,600 @@
|
||||||
|
# BMAD-METHOD: Arquitetura para Aplicação Frontend Consumer
|
||||||
|
|
||||||
|
## Visão Geral
|
||||||
|
|
||||||
|
Este documento descreve a arquitetura para transformar o BMAD-METHOD (atualmente uma CLI) em uma aplicação web completa para consumidores finais.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Arquitetura Proposta
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────────────────┐
|
||||||
|
│ FRONTEND (React/Next.js) │
|
||||||
|
├─────────────────────────────────────────────────────────────────────┤
|
||||||
|
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
||||||
|
│ │ Dashboard │ │ Agent Chat │ │ Workflow │ │
|
||||||
|
│ │ Project │ │ Interface │ │ Viewer │ │
|
||||||
|
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
||||||
|
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
||||||
|
│ │ Artifact │ │ Team │ │ Settings & │ │
|
||||||
|
│ │ Editor │ │ Management │ │ Profile │ │
|
||||||
|
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
||||||
|
└─────────────────────────────────────────────────────────────────────┘
|
||||||
|
│
|
||||||
|
│ REST API + WebSocket
|
||||||
|
▼
|
||||||
|
┌─────────────────────────────────────────────────────────────────────┐
|
||||||
|
│ BACKEND (Node.js/Express) │
|
||||||
|
├─────────────────────────────────────────────────────────────────────┤
|
||||||
|
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
||||||
|
│ │ API REST │ │ WebSocket │ │ Auth │ │
|
||||||
|
│ │ Gateway │ │ Server │ │ Service │ │
|
||||||
|
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
||||||
|
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
||||||
|
│ │ Agent │ │ Workflow │ │ Project │ │
|
||||||
|
│ │ Manager │ │ Engine │ │ Service │ │
|
||||||
|
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
||||||
|
└─────────────────────────────────────────────────────────────────────┘
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
┌─────────────────────────────────────────────────────────────────────┐
|
||||||
|
│ BMAD-METHOD CORE │
|
||||||
|
├─────────────────────────────────────────────────────────────────────┤
|
||||||
|
│ Agents (21+) │ Workflows (50+) │ Modules │ Templates │
|
||||||
|
└─────────────────────────────────────────────────────────────────────┘
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
┌─────────────────────────────────────────────────────────────────────┐
|
||||||
|
│ DATA LAYER │
|
||||||
|
├─────────────────────────────────────────────────────────────────────┤
|
||||||
|
│ PostgreSQL (Projects, Users) │ Redis (Sessions, Cache) │
|
||||||
|
│ S3/MinIO (Artifacts, Files) │ MongoDB (Conversations, Logs) │
|
||||||
|
└─────────────────────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Estrutura de Diretórios Proposta
|
||||||
|
|
||||||
|
```
|
||||||
|
bmad-web/
|
||||||
|
├── apps/
|
||||||
|
│ ├── web/ # Frontend Next.js
|
||||||
|
│ │ ├── src/
|
||||||
|
│ │ │ ├── app/ # App Router (Next.js 14+)
|
||||||
|
│ │ │ │ ├── (auth)/ # Rotas de autenticação
|
||||||
|
│ │ │ │ ├── (dashboard)/ # Dashboard principal
|
||||||
|
│ │ │ │ ├── projects/ # Gestão de projetos
|
||||||
|
│ │ │ │ ├── agents/ # Interface dos agentes
|
||||||
|
│ │ │ │ └── workflows/ # Visualização de workflows
|
||||||
|
│ │ │ ├── components/
|
||||||
|
│ │ │ │ ├── ui/ # Componentes base (shadcn/ui)
|
||||||
|
│ │ │ │ ├── agents/ # Componentes de agentes
|
||||||
|
│ │ │ │ ├── chat/ # Interface de chat
|
||||||
|
│ │ │ │ ├── workflow/ # Visualizadores de workflow
|
||||||
|
│ │ │ │ └── editor/ # Editor de artefatos
|
||||||
|
│ │ │ ├── hooks/ # React hooks customizados
|
||||||
|
│ │ │ ├── lib/ # Utilitários e helpers
|
||||||
|
│ │ │ ├── stores/ # Estado global (Zustand)
|
||||||
|
│ │ │ └── types/ # TypeScript types
|
||||||
|
│ │ └── package.json
|
||||||
|
│ │
|
||||||
|
│ └── api/ # Backend API
|
||||||
|
│ ├── src/
|
||||||
|
│ │ ├── routes/ # Express routes
|
||||||
|
│ │ ├── services/ # Business logic
|
||||||
|
│ │ ├── middleware/ # Auth, logging, etc.
|
||||||
|
│ │ ├── websocket/ # WebSocket handlers
|
||||||
|
│ │ ├── bmad/ # BMAD Core integration
|
||||||
|
│ │ └── database/ # Database models
|
||||||
|
│ └── package.json
|
||||||
|
│
|
||||||
|
├── packages/
|
||||||
|
│ ├── bmad-core/ # Core BMAD refatorado como lib
|
||||||
|
│ │ ├── agents/ # Agent definitions
|
||||||
|
│ │ ├── workflows/ # Workflow engine
|
||||||
|
│ │ ├── modules/ # Module system
|
||||||
|
│ │ └── types/ # Shared types
|
||||||
|
│ │
|
||||||
|
│ ├── ui/ # Componentes compartilhados
|
||||||
|
│ └── config/ # Configurações compartilhadas
|
||||||
|
│
|
||||||
|
├── docker/ # Docker configs
|
||||||
|
├── turbo.json # Turborepo config
|
||||||
|
└── package.json # Root package
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Stack Tecnológico Recomendado
|
||||||
|
|
||||||
|
### Frontend
|
||||||
|
| Tecnologia | Propósito | Justificativa |
|
||||||
|
|------------|-----------|---------------|
|
||||||
|
| **Next.js 14** | Framework React | SSR, App Router, excelente DX |
|
||||||
|
| **TypeScript** | Linguagem | Type safety, melhor manutenção |
|
||||||
|
| **Tailwind CSS** | Estilos | Rápido, consistente, customizável |
|
||||||
|
| **shadcn/ui** | Componentes | Acessível, bonito, não-bloated |
|
||||||
|
| **Zustand** | Estado global | Simples, performático |
|
||||||
|
| **TanStack Query** | Data fetching | Cache, refetch, mutations |
|
||||||
|
| **Socket.io Client** | Real-time | Comunicação com agentes |
|
||||||
|
| **Monaco Editor** | Code editor | Para edição de artefatos |
|
||||||
|
| **Framer Motion** | Animações | UX fluida nas transições |
|
||||||
|
|
||||||
|
### Backend
|
||||||
|
| Tecnologia | Propósito | Justificativa |
|
||||||
|
|------------|-----------|---------------|
|
||||||
|
| **Node.js 20+** | Runtime | Já usado pelo BMAD |
|
||||||
|
| **Express/Fastify** | HTTP Server | Maduro, flexível |
|
||||||
|
| **Socket.io** | WebSocket | Real-time bi-direcional |
|
||||||
|
| **Prisma** | ORM | Type-safe, migrations |
|
||||||
|
| **Redis** | Cache/Sessions | Performance |
|
||||||
|
| **PostgreSQL** | Database | Dados estruturados |
|
||||||
|
| **MongoDB** | Document store | Conversas, logs |
|
||||||
|
| **Bull/BullMQ** | Job Queue | Workflows assíncronos |
|
||||||
|
|
||||||
|
### Infraestrutura
|
||||||
|
| Tecnologia | Propósito |
|
||||||
|
|------------|-----------|
|
||||||
|
| **Docker** | Containerização |
|
||||||
|
| **Turborepo** | Monorepo management |
|
||||||
|
| **Vercel/Railway** | Deploy frontend |
|
||||||
|
| **Fly.io/Render** | Deploy backend |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Funcionalidades Principais
|
||||||
|
|
||||||
|
### 4.1 Dashboard do Projeto
|
||||||
|
- Visão geral do projeto atual
|
||||||
|
- Status dos workflows ativos
|
||||||
|
- Métricas de progresso
|
||||||
|
- Artefatos gerados
|
||||||
|
- Atividade recente
|
||||||
|
|
||||||
|
### 4.2 Interface de Chat com Agentes
|
||||||
|
- Chat em tempo real com agentes BMAD
|
||||||
|
- Seleção de agente por contexto
|
||||||
|
- Histórico de conversas
|
||||||
|
- Sugestões de ações
|
||||||
|
- Execução de comandos via chat
|
||||||
|
|
||||||
|
### 4.3 Visualizador de Workflows
|
||||||
|
- Visualização gráfica do workflow atual
|
||||||
|
- Progresso step-by-step
|
||||||
|
- Navegação entre passos
|
||||||
|
- Outputs de cada passo
|
||||||
|
- Possibilidade de retroceder/avançar
|
||||||
|
|
||||||
|
### 4.4 Editor de Artefatos
|
||||||
|
- Editor markdown/código rico
|
||||||
|
- Preview em tempo real
|
||||||
|
- Versionamento de artefatos
|
||||||
|
- Exportação (PDF, MD, DOCX)
|
||||||
|
- Templates pré-definidos
|
||||||
|
|
||||||
|
### 4.5 Gestão de Projetos
|
||||||
|
- Criar novos projetos
|
||||||
|
- Configurar parâmetros BMAD
|
||||||
|
- Selecionar módulos e agentes
|
||||||
|
- Definir nível de complexidade
|
||||||
|
- Gestão de equipe/colaboradores
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Fluxo de Usuário Principal
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────────────────┐
|
||||||
|
│ JORNADA DO USUÁRIO │
|
||||||
|
└─────────────────────────────────────────────────────────────────────┘
|
||||||
|
|
||||||
|
1. ONBOARDING
|
||||||
|
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
|
||||||
|
│ Signup │───▶│ Setup │───▶│ Create │───▶│ Choose │
|
||||||
|
│ │ │ Profile│ │ Project│ │ Track │
|
||||||
|
└────────┘ └────────┘ └────────┘ └────────┘
|
||||||
|
│
|
||||||
|
┌──────────┼──────────┐
|
||||||
|
▼ ▼ ▼
|
||||||
|
┌──────────┐ ┌──────────┐ ┌──────────┐
|
||||||
|
│ Quick │ │ BMAD │ │Enterprise│
|
||||||
|
│ Flow │ │ Method │ │ │
|
||||||
|
└──────────┘ └──────────┘ └──────────┘
|
||||||
|
|
||||||
|
2. WORKFLOW EXECUTION
|
||||||
|
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
|
||||||
|
│ Select │───▶│ Chat │───▶│Complete│───▶│ Save │
|
||||||
|
│ Agent │ │ Work │ │ Step │ │Artifact│
|
||||||
|
└────────┘ └────────┘ └────────┘ └────────┘
|
||||||
|
│ ▲ │
|
||||||
|
│ └────────────────────────────┘
|
||||||
|
│ (repeat)
|
||||||
|
▼
|
||||||
|
┌────────────────────────────────────────────────────┐
|
||||||
|
│ WORKFLOW COMPLETION │
|
||||||
|
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||||||
|
│ │ Review │ │ Export │ │ Next │ │
|
||||||
|
│ │ Outputs │ │ Artifacts│ │ Phase │ │
|
||||||
|
│ └──────────┘ └──────────┘ └──────────┘ │
|
||||||
|
└────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. API Design
|
||||||
|
|
||||||
|
### 6.1 Endpoints Principais
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Autenticação
|
||||||
|
POST /api/auth/register
|
||||||
|
POST /api/auth/login
|
||||||
|
POST /api/auth/logout
|
||||||
|
GET /api/auth/me
|
||||||
|
|
||||||
|
// Projetos
|
||||||
|
GET /api/projects
|
||||||
|
POST /api/projects
|
||||||
|
GET /api/projects/:id
|
||||||
|
PUT /api/projects/:id
|
||||||
|
DELETE /api/projects/:id
|
||||||
|
GET /api/projects/:id/artifacts
|
||||||
|
GET /api/projects/:id/workflows
|
||||||
|
|
||||||
|
// Agentes
|
||||||
|
GET /api/agents # Lista todos os agentes disponíveis
|
||||||
|
GET /api/agents/:id # Detalhes de um agente
|
||||||
|
POST /api/agents/:id/chat # Iniciar conversa com agente
|
||||||
|
|
||||||
|
// Workflows
|
||||||
|
GET /api/workflows # Lista workflows disponíveis
|
||||||
|
GET /api/workflows/:id # Detalhes de workflow
|
||||||
|
POST /api/workflows/:id/start # Iniciar workflow
|
||||||
|
GET /api/workflows/:id/status # Status atual
|
||||||
|
POST /api/workflows/:id/step/next # Avançar para próximo passo
|
||||||
|
POST /api/workflows/:id/step/complete # Completar passo atual
|
||||||
|
|
||||||
|
// Artefatos
|
||||||
|
GET /api/artifacts/:id
|
||||||
|
PUT /api/artifacts/:id
|
||||||
|
POST /api/artifacts/:id/export
|
||||||
|
GET /api/artifacts/:id/versions
|
||||||
|
|
||||||
|
// WebSocket Events
|
||||||
|
ws://api/socket
|
||||||
|
- agent:message # Mensagem do agente
|
||||||
|
- agent:typing # Agente está digitando
|
||||||
|
- workflow:progress # Progresso do workflow
|
||||||
|
- artifact:updated # Artefato atualizado
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.2 Schema de Dados
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// User
|
||||||
|
interface User {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
name: string;
|
||||||
|
avatar?: string;
|
||||||
|
preferences: UserPreferences;
|
||||||
|
createdAt: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Project
|
||||||
|
interface Project {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description?: string;
|
||||||
|
complexityLevel: 0 | 1 | 2 | 3 | 4;
|
||||||
|
selectedModules: string[];
|
||||||
|
activeWorkflow?: string;
|
||||||
|
artifacts: Artifact[];
|
||||||
|
createdAt: Date;
|
||||||
|
updatedAt: Date;
|
||||||
|
userId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Conversation
|
||||||
|
interface Conversation {
|
||||||
|
id: string;
|
||||||
|
projectId: string;
|
||||||
|
agentId: string;
|
||||||
|
messages: Message[];
|
||||||
|
context: Record<string, any>;
|
||||||
|
createdAt: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Message
|
||||||
|
interface Message {
|
||||||
|
id: string;
|
||||||
|
role: 'user' | 'agent' | 'system';
|
||||||
|
content: string;
|
||||||
|
metadata?: {
|
||||||
|
workflowStep?: string;
|
||||||
|
action?: string;
|
||||||
|
artifacts?: string[];
|
||||||
|
};
|
||||||
|
timestamp: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Workflow Instance
|
||||||
|
interface WorkflowInstance {
|
||||||
|
id: string;
|
||||||
|
projectId: string;
|
||||||
|
workflowId: string;
|
||||||
|
currentStep: number;
|
||||||
|
totalSteps: number;
|
||||||
|
status: 'active' | 'paused' | 'completed' | 'failed';
|
||||||
|
stepOutputs: Record<string, any>;
|
||||||
|
startedAt: Date;
|
||||||
|
completedAt?: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Artifact
|
||||||
|
interface Artifact {
|
||||||
|
id: string;
|
||||||
|
projectId: string;
|
||||||
|
type: 'prd' | 'architecture' | 'epic' | 'story' | 'spec' | 'diagram';
|
||||||
|
name: string;
|
||||||
|
content: string;
|
||||||
|
version: number;
|
||||||
|
createdAt: Date;
|
||||||
|
updatedAt: Date;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. Componentes de Interface Chave
|
||||||
|
|
||||||
|
### 7.1 Agent Chat Interface
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// components/chat/AgentChat.tsx
|
||||||
|
interface AgentChatProps {
|
||||||
|
projectId: string;
|
||||||
|
agentId: string;
|
||||||
|
onArtifactCreated?: (artifact: Artifact) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Features:
|
||||||
|
// - Avatar e nome do agente
|
||||||
|
// - Input de mensagem com markdown support
|
||||||
|
// - Botões de ação rápida (baseados no menu do agente)
|
||||||
|
// - Exibição de outputs estruturados
|
||||||
|
// - Indicador de "typing"
|
||||||
|
// - Scroll automático para última mensagem
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7.2 Workflow Stepper
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// components/workflow/WorkflowStepper.tsx
|
||||||
|
interface WorkflowStepperProps {
|
||||||
|
workflowInstance: WorkflowInstance;
|
||||||
|
onStepComplete: (stepId: string, output: any) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Features:
|
||||||
|
// - Visualização vertical/horizontal dos passos
|
||||||
|
// - Indicador de passo atual
|
||||||
|
// - Preview do conteúdo de cada passo
|
||||||
|
// - Botões de navegação
|
||||||
|
// - Exibição de outputs anteriores
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7.3 Artifact Editor
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// components/editor/ArtifactEditor.tsx
|
||||||
|
interface ArtifactEditorProps {
|
||||||
|
artifact: Artifact;
|
||||||
|
onSave: (content: string) => void;
|
||||||
|
readonly?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Features:
|
||||||
|
// - Monaco editor para código/markdown
|
||||||
|
// - Preview lado a lado
|
||||||
|
// - Autosave
|
||||||
|
// - Toolbar com formatação
|
||||||
|
// - Export button
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. Integração com BMAD Core
|
||||||
|
|
||||||
|
### 8.1 Adapter Pattern
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// packages/bmad-core/src/adapter.ts
|
||||||
|
|
||||||
|
import { AgentDefinition, WorkflowDefinition } from './types';
|
||||||
|
|
||||||
|
export class BMADAdapter {
|
||||||
|
private agents: Map<string, AgentDefinition>;
|
||||||
|
private workflows: Map<string, WorkflowDefinition>;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.loadAgents();
|
||||||
|
this.loadWorkflows();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Carrega definições de agentes dos arquivos YAML
|
||||||
|
async loadAgents(): Promise<void> {
|
||||||
|
// Parse YAML files from src/modules/*/agents/
|
||||||
|
}
|
||||||
|
|
||||||
|
// Carrega definições de workflows
|
||||||
|
async loadWorkflows(): Promise<void> {
|
||||||
|
// Parse workflow directories from src/modules/*/workflows/
|
||||||
|
}
|
||||||
|
|
||||||
|
// Obtém menu de ações disponíveis para um agente
|
||||||
|
getAgentActions(agentId: string): AgentAction[] {
|
||||||
|
const agent = this.agents.get(agentId);
|
||||||
|
return agent?.menu || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Processa mensagem do usuário com contexto do agente
|
||||||
|
async processMessage(
|
||||||
|
agentId: string,
|
||||||
|
message: string,
|
||||||
|
context: ConversationContext
|
||||||
|
): Promise<AgentResponse> {
|
||||||
|
// Usa persona, prompts e menu do agente
|
||||||
|
// para gerar resposta contextualizada
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inicia um workflow
|
||||||
|
async startWorkflow(
|
||||||
|
workflowId: string,
|
||||||
|
projectContext: ProjectContext
|
||||||
|
): Promise<WorkflowInstance> {
|
||||||
|
// Carrega steps do workflow
|
||||||
|
// Inicializa estado
|
||||||
|
}
|
||||||
|
|
||||||
|
// Avança para próximo step
|
||||||
|
async advanceWorkflow(
|
||||||
|
instanceId: string,
|
||||||
|
stepOutput: any
|
||||||
|
): Promise<WorkflowStep | null> {
|
||||||
|
// Valida output do step atual
|
||||||
|
// Carrega próximo step
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 8.2 Real-time Communication
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// apps/api/src/websocket/handlers.ts
|
||||||
|
|
||||||
|
import { Server } from 'socket.io';
|
||||||
|
import { BMADAdapter } from '@bmad/core';
|
||||||
|
|
||||||
|
export function setupWebSocketHandlers(io: Server, bmad: BMADAdapter) {
|
||||||
|
io.on('connection', (socket) => {
|
||||||
|
console.log('Client connected:', socket.id);
|
||||||
|
|
||||||
|
// Usuário envia mensagem para agente
|
||||||
|
socket.on('agent:message', async (data) => {
|
||||||
|
const { agentId, message, conversationId } = data;
|
||||||
|
|
||||||
|
// Indica que agente está "pensando"
|
||||||
|
socket.emit('agent:typing', { agentId, isTyping: true });
|
||||||
|
|
||||||
|
// Processa mensagem
|
||||||
|
const response = await bmad.processMessage(
|
||||||
|
agentId,
|
||||||
|
message,
|
||||||
|
await getConversationContext(conversationId)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Envia resposta
|
||||||
|
socket.emit('agent:message', {
|
||||||
|
agentId,
|
||||||
|
message: response.content,
|
||||||
|
metadata: response.metadata,
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.emit('agent:typing', { agentId, isTyping: false });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Workflow events
|
||||||
|
socket.on('workflow:advance', async (data) => {
|
||||||
|
const { instanceId, stepOutput } = data;
|
||||||
|
|
||||||
|
const nextStep = await bmad.advanceWorkflow(instanceId, stepOutput);
|
||||||
|
|
||||||
|
socket.emit('workflow:progress', {
|
||||||
|
instanceId,
|
||||||
|
currentStep: nextStep?.stepNumber,
|
||||||
|
completed: nextStep === null,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. Considerações de UX para Consumidor Final
|
||||||
|
|
||||||
|
### 9.1 Simplificação da Complexidade
|
||||||
|
- **Wizard de Onboarding**: Guia passo-a-passo para criar primeiro projeto
|
||||||
|
- **Templates Pré-configurados**: "Start a SaaS", "Build a Mobile App", etc.
|
||||||
|
- **Auto-seleção de Agentes**: Sistema sugere agentes baseado no contexto
|
||||||
|
- **Progress Gamification**: Badges, progress bars, celebrações
|
||||||
|
|
||||||
|
### 9.2 Linguagem Acessível
|
||||||
|
- Substituir jargões técnicos por termos simples
|
||||||
|
- Tooltips explicativos em toda interface
|
||||||
|
- Modo "Explain Like I'm 5" opcional
|
||||||
|
- Suporte multi-idioma (pt-BR prioritário)
|
||||||
|
|
||||||
|
### 9.3 Fluxo Guiado
|
||||||
|
- Nunca deixar usuário "perdido"
|
||||||
|
- Sempre ter próxima ação sugerida
|
||||||
|
- Chat de ajuda sempre disponível
|
||||||
|
- Tutorials interativos integrados
|
||||||
|
|
||||||
|
### 9.4 Responsividade
|
||||||
|
- Mobile-first design
|
||||||
|
- PWA para acesso offline
|
||||||
|
- Push notifications para progresso
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. Roadmap de Implementação
|
||||||
|
|
||||||
|
### Fase 1: Foundation (MVP)
|
||||||
|
- [ ] Setup monorepo com Turborepo
|
||||||
|
- [ ] Refatorar BMAD core como package importável
|
||||||
|
- [ ] Backend básico com autenticação
|
||||||
|
- [ ] Frontend com dashboard e chat básico
|
||||||
|
- [ ] 1 workflow completo funcionando (Quick-Spec)
|
||||||
|
|
||||||
|
### Fase 2: Core Features
|
||||||
|
- [ ] Todos os agentes BMM integrados
|
||||||
|
- [ ] Workflow engine completo
|
||||||
|
- [ ] Editor de artefatos
|
||||||
|
- [ ] Sistema de projetos
|
||||||
|
- [ ] Export de artefatos
|
||||||
|
|
||||||
|
### Fase 3: Polish
|
||||||
|
- [ ] UX refinada com animações
|
||||||
|
- [ ] Onboarding wizard
|
||||||
|
- [ ] Templates de projeto
|
||||||
|
- [ ] Temas e personalização
|
||||||
|
- [ ] Mobile responsivo
|
||||||
|
|
||||||
|
### Fase 4: Scale
|
||||||
|
- [ ] Colaboração em tempo real
|
||||||
|
- [ ] Integrações (GitHub, Jira, etc.)
|
||||||
|
- [ ] API pública
|
||||||
|
- [ ] Módulos custom via interface
|
||||||
|
- [ ] Analytics e métricas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 11. Considerações Finais
|
||||||
|
|
||||||
|
Transformar o BMAD-METHOD em uma aplicação web consumer-facing é um projeto significativo, mas muito viável. O core do BMAD já está bem estruturado com:
|
||||||
|
|
||||||
|
- Definições de agentes em YAML (fácil de parsear)
|
||||||
|
- Workflows modulares (fácil de expor como steps)
|
||||||
|
- Sistema de módulos (extensibilidade built-in)
|
||||||
|
|
||||||
|
As principais adaptações necessárias são:
|
||||||
|
1. **Camada de persistência** para projetos e conversas
|
||||||
|
2. **API HTTP/WebSocket** para expor funcionalidades
|
||||||
|
3. **Interface visual** para interagir com agentes
|
||||||
|
4. **Simplificação de UX** para usuários não-técnicos
|
||||||
|
|
||||||
|
O investimento vale a pena porque democratiza acesso a metodologias de desenvolvimento estruturadas, permitindo que pessoas sem background técnico profundo consigam planejar e executar projetos de software de forma guiada.
|
||||||
Loading…
Reference in New Issue