makecc 0.1.0

package/dist/server/services/workflowExecutionService.js

@@ -0,0 +1,342 @@
+import Anthropic from '@anthropic-ai/sdk';
+import { writeFile, mkdir } from 'fs/promises';
+import { join } from 'path';
+import { existsSync } from 'fs';
+import { skillExecutionService } from './skillExecutionService';
+/**
+ * Anthropic API를 사용한 워크플로우 실행 서비스
+ */
+export class WorkflowExecutionService {
+    client;
+    results = new Map();
+    outputDir = '';
+    constructor() {
+        this.client = new Anthropic({
+            apiKey: process.env.ANTHROPIC_API_KEY,
+        });
+    }
+    /**
+     * 워크플로우 전체 실행
+     */
+    async execute(context, onProgress, onLog) {
+        this.results.clear();
+        this.outputDir = context.outputDir;
+        // 출력 디렉토리 생성
+        if (!existsSync(this.outputDir)) {
+            await mkdir(this.outputDir, { recursive: true });
+        }
+        const executionOrder = this.topologicalSort(context.nodes, context.edges);
+        onLog?.('info', `워크플로우 "${context.workflowName}" 실행 시작 (${executionOrder.length}개 노드)`);
+        for (const node of executionOrder) {
+            try {
+                onProgress?.({ nodeId: node.id, status: 'running', progress: 0 });
+                onLog?.('info', `노드 "${node.data.label}" 실행 중...`);
+                const result = await this.executeNode(node, context, onProgress, onLog);
+                this.results.set(node.id, result);
+                if (result.success) {
+                    onProgress?.({ nodeId: node.id, status: 'completed', progress: 100, result: result.result });
+                    onLog?.('info', `노드 "${node.data.label}" 완료`);
+                }
+                else {
+                    onProgress?.({ nodeId: node.id, status: 'error', error: result.error });
+                    onLog?.('error', `노드 "${node.data.label}" 실패: ${result.error}`);
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+                this.results.set(node.id, { nodeId: node.id, success: false, error: errorMessage });
+                onProgress?.({ nodeId: node.id, status: 'error', error: errorMessage });
+                onLog?.('error', `노드 "${node.data.label}" 실행 오류: ${errorMessage}`);
+            }
+        }
+        return this.results;
+    }
+    /**
+     * 개별 노드 실행
+     */
+    async executeNode(node, context, onProgress, onLog) {
+        // 이전 노드 결과 수집
+        const previousResults = this.collectPreviousResults(node, context.edges);
+        switch (node.type) {
+            case 'input':
+                return this.executeInputNode(node, context.inputs);
+            case 'subagent':
+                return this.executeSubagentNode(node, previousResults, onProgress, onLog);
+            case 'skill':
+                return this.executeSkillNode(node, previousResults, onProgress, onLog);
+            case 'mcp':
+                return this.executeMcpNode(node, previousResults, onProgress, onLog);
+            case 'output':
+                return this.executeOutputNode(node, previousResults, onLog);
+            default:
+                return { nodeId: node.id, success: false, error: `Unknown node type: ${node.type}` };
+        }
+    }
+    /**
+     * Input 노드 실행 - 사용자 입력값 반환
+     */
+    async executeInputNode(node, inputs) {
+        const data = node.data;
+        const value = inputs?.[node.id] || data.value || '';
+        return {
+            nodeId: node.id,
+            success: true,
+            result: value,
+        };
+    }
+    /**
+     * Subagent 노드 실행 - Claude API로 작업 수행
+     */
+    async executeSubagentNode(node, previousResults, onProgress, onLog) {
+        const data = node.data;
+        onProgress?.({ nodeId: node.id, status: 'running', progress: 20 });
+        // 역할별 시스템 프롬프트
+        const rolePrompts = {
+            researcher: `당신은 전문 리서처입니다. 주어진 주제에 대해 깊이 있는 조사를 수행하고, 핵심 정보를 정리하여 제공합니다.`,
+            writer: `당신은 전문 작가입니다. 명확하고 매력적인 콘텐츠를 작성합니다. 사용자의 요구에 맞는 톤과 스타일로 글을 작성합니다.`,
+            analyst: `당신은 데이터 분석가입니다. 정보를 분석하고 패턴을 파악하여 인사이트를 도출합니다.`,
+            coder: `당신은 전문 개발자입니다. 깔끔하고 효율적인 코드를 작성하며, 모범 사례를 따릅니다.`,
+            designer: `당신은 디자인 전문가입니다. 상세페이지, 배너, UI 등을 위한 디자인 가이드와 컨셉을 제안합니다.`,
+            custom: `당신은 AI 어시스턴트입니다. 주어진 작업을 최선을 다해 수행합니다.`,
+        };
+        const systemPrompt = data.systemPrompt || rolePrompts[data.role] || rolePrompts.custom;
+        const userMessage = `## 작업 설명
+${data.description || '주어진 작업을 수행해주세요.'}
+
+## 이전 단계 결과
+${previousResults || '(없음)'}
+
+위 내용을 바탕으로 작업을 수행하고 결과를 제공해주세요.`;
+        onLog?.('debug', `Subagent "${data.label}" (${data.role}) 호출 중...`);
+        try {
+            onProgress?.({ nodeId: node.id, status: 'running', progress: 40 });
+            const modelId = this.getModelId(data.model);
+            const response = await this.client.messages.create({
+                model: modelId,
+                max_tokens: 4096,
+                system: systemPrompt,
+                messages: [
+                    { role: 'user', content: userMessage }
+                ],
+            });
+            onProgress?.({ nodeId: node.id, status: 'running', progress: 80 });
+            // 응답 텍스트 추출
+            const resultText = response.content
+                .filter((block) => block.type === 'text')
+                .map((block) => block.text)
+                .join('\n');
+            onProgress?.({ nodeId: node.id, status: 'running', progress: 100 });
+            return {
+                nodeId: node.id,
+                success: true,
+                result: resultText,
+            };
+        }
+        catch (error) {
+            const errorMsg = error instanceof Error ? error.message : 'Claude API 호출 실패';
+            onLog?.('error', `Subagent 오류: ${errorMsg}`);
+            return {
+                nodeId: node.id,
+                success: false,
+                error: errorMsg,
+            };
+        }
+    }
+    /**
+     * Skill 노드 실행 - skillExecutionService 사용
+     */
+    async executeSkillNode(node, previousResults, onProgress, onLog) {
+        const data = node.data;
+        const skillId = data.skillId || 'generic';
+        onProgress?.({ nodeId: node.id, status: 'running', progress: 10 });
+        try {
+            // skillExecutionService를 사용하여 실제 파일 생성
+            const result = await skillExecutionService.execute(skillId, previousResults, this.outputDir, onLog);
+            onProgress?.({ nodeId: node.id, status: 'running', progress: 100 });
+            return {
+                nodeId: node.id,
+                success: result.success,
+                result: result.result,
+                files: result.files,
+                error: result.error,
+            };
+        }
+        catch (error) {
+            const errorMsg = error instanceof Error ? error.message : '스킬 실행 실패';
+            onLog?.('error', errorMsg);
+            return {
+                nodeId: node.id,
+                success: false,
+                error: errorMsg,
+            };
+        }
+    }
+    /**
+     * MCP 노드 실행 - 외부 도구/서비스 연결
+     */
+    async executeMcpNode(node, previousResults, onProgress, onLog) {
+        const data = node.data;
+        onProgress?.({ nodeId: node.id, status: 'running', progress: 10 });
+        onLog?.('info', `MCP 서버 "${data.serverName}" 연결 중...`);
+        // MCP 서버 타입별 처리
+        const mcpPrompt = `당신은 MCP (Model Context Protocol) 서버와 상호작용하는 전문가입니다.
+
+## MCP 서버 정보
+- 서버 이름: ${data.serverName}
+- 서버 타입: ${data.serverType}
+- 설정: ${JSON.stringify(data.serverConfig, null, 2)}
+
+## 이전 단계 결과
+${previousResults}
+
+## 작업
+위 MCP 서버를 사용하여 이전 단계의 결과를 처리하세요.
+
+다음 MCP 서버 유형에 따라 적절한 작업을 수행하세요:
+- PostgreSQL/데이터베이스: 데이터 조회 또는 저장
+- Notion/Google Drive: 문서 생성 또는 업데이트
+- Slack/Discord: 메시지 전송 시뮬레이션
+- GitHub/Jira: 이슈 또는 PR 관련 작업 시뮬레이션
+
+작업 결과를 상세히 설명해주세요.`;
+        try {
+            onProgress?.({ nodeId: node.id, status: 'running', progress: 50 });
+            const response = await this.client.messages.create({
+                model: 'claude-sonnet-4-20250514',
+                max_tokens: 4096,
+                messages: [{ role: 'user', content: mcpPrompt }],
+            });
+            const result = response.content
+                .filter((block) => block.type === 'text')
+                .map((block) => block.text)
+                .join('\n');
+            onProgress?.({ nodeId: node.id, status: 'running', progress: 100 });
+            return {
+                nodeId: node.id,
+                success: true,
+                result,
+            };
+        }
+        catch (error) {
+            return {
+                nodeId: node.id,
+                success: false,
+                error: error instanceof Error ? error.message : 'MCP 노드 실행 실패',
+            };
+        }
+    }
+    /**
+     * Output 노드 실행 - 결과 수집 및 파일 저장
+     */
+    async executeOutputNode(node, previousResults, onLog) {
+        const data = node.data;
+        onLog?.('info', '최종 결과 수집 및 저장 중...');
+        // 모든 이전 결과와 파일 수집
+        const allFiles = [];
+        for (const [, result] of this.results) {
+            if (result.files) {
+                allFiles.push(...result.files);
+            }
+        }
+        // 결과 요약 파일 생성
+        const summaryPath = join(this.outputDir, 'result-summary.md');
+        const summaryContent = `# 워크플로우 실행 결과
+
+## 생성된 컨텐츠
+
+${previousResults}
+
+## 생성된 파일 목록
+${allFiles.map((f) => `- **${f.name}**: \`${f.path}\``).join('\n') || '없음'}
+
+---
+생성 시간: ${new Date().toLocaleString('ko-KR')}
+`;
+        try {
+            await writeFile(summaryPath, summaryContent, 'utf-8');
+            return {
+                nodeId: node.id,
+                success: true,
+                result: summaryContent,
+                files: [
+                    { path: summaryPath, type: 'markdown', name: '결과 요약' },
+                    ...allFiles,
+                ],
+            };
+        }
+        catch (error) {
+            return {
+                nodeId: node.id,
+                success: true,
+                result: previousResults,
+                files: allFiles,
+            };
+        }
+    }
+    /**
+     * 모델 ID 변환
+     */
+    getModelId(model) {
+        switch (model) {
+            case 'opus':
+                return 'claude-opus-4-20250514';
+            case 'haiku':
+                return 'claude-3-5-haiku-20241022';
+            default:
+                return 'claude-sonnet-4-20250514';
+        }
+    }
+    /**
+     * 이전 노드 결과 수집
+     */
+    collectPreviousResults(node, edges) {
+        const incomingEdges = edges.filter((e) => e.target === node.id);
+        const previousResults = [];
+        for (const edge of incomingEdges) {
+            const result = this.results.get(edge.source);
+            if (result?.result) {
+                previousResults.push(result.result);
+            }
+        }
+        return previousResults.join('\n\n---\n\n');
+    }
+    /**
+     * 위상 정렬 (실행 순서 결정)
+     */
+    topologicalSort(nodes, edges) {
+        const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+        const inDegree = new Map();
+        const adjList = new Map();
+        nodes.forEach((node) => {
+            inDegree.set(node.id, 0);
+            adjList.set(node.id, []);
+        });
+        edges.forEach((edge) => {
+            adjList.get(edge.source)?.push(edge.target);
+            inDegree.set(edge.target, (inDegree.get(edge.target) || 0) + 1);
+        });
+        const queue = [];
+        inDegree.forEach((degree, nodeId) => {
+            if (degree === 0) {
+                queue.push(nodeId);
+            }
+        });
+        const result = [];
+        while (queue.length > 0) {
+            const nodeId = queue.shift();
+            const node = nodeMap.get(nodeId);
+            if (node) {
+                result.push(node);
+            }
+            adjList.get(nodeId)?.forEach((neighborId) => {
+                const newDegree = (inDegree.get(neighborId) || 0) - 1;
+                inDegree.set(neighborId, newDegree);
+                if (newDegree === 0) {
+                    queue.push(neighborId);
+                }
+            });
+        }
+        return result;
+    }
+}
+export const workflowExecutionService = new WorkflowExecutionService();

package/dist/server/types.js

@@ -0,0 +1 @@
+export {};

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "makecc",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Visual workflow builder for Claude Code agents and skills",
+  "keywords": [
+    "claude",
+    "claude-code",
+    "workflow",
+    "agent",
+    "ai",
+    "automation"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "bin": {
+    "makecc": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "server"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "dev:server": "tsx watch server/index.ts",
+    "dev:all": "concurrently \"npm run dev\" \"npm run dev:server\"",
+    "build": "tsc -b && vite build --outDir dist/client",
+    "start": "tsx server/index.ts",
+    "start:server": "tsx server/index.ts",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@anthropic-ai/claude-code": "^2.1.19",
+    "@anthropic-ai/sdk": "^0.71.2",
+    "@google/generative-ai": "^0.24.1",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@xyflow/react": "^12.10.0",
+    "clsx": "^2.1.1",
+    "concurrently": "^9.2.1",
+    "cors": "^2.8.6",
+    "dotenv": "^17.2.3",
+    "exceljs": "^4.4.0",
+    "express": "^5.2.1",
+    "lucide-react": "^0.563.0",
+    "nanoid": "^5.1.6",
+    "pptxgenjs": "^4.0.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "sharp": "^0.34.5",
+    "socket.io": "^4.8.3",
+    "socket.io-client": "^4.8.3",
+    "tsx": "^4.21.0",
+    "zustand": "^5.0.10"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

package/server/index.ts

@@ -0,0 +1,253 @@
+import 'dotenv/config';
+import express from 'express';
+import { createServer } from 'http';
+import { Server } from 'socket.io';
+import cors from 'cors';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { existsSync } from 'fs';
+import { ClaudeService } from './services/claudeService';
+import { fileService } from './services/fileService';
+import { workflowAIService } from './services/workflowAIService';
+import { workflowExecutionService } from './services/workflowExecutionService';
+import { executeInTerminal, getClaudeCommand } from './services/terminalService';
+import type { WorkflowExecutionRequest, NodeExecutionUpdate } from './types';
+import type { ClaudeConfigExport, SaveOptions } from './services/fileService';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const app = express();
+const httpServer = createServer(app);
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+const io = new Server(httpServer, {
+  cors: {
+    origin: isProduction
+      ? undefined
+      : ['http://localhost:5173', 'http://localhost:5174', 'http://localhost:5175'],
+    methods: ['GET', 'POST'],
+  },
+});
+
+app.use(cors());
+app.use(express.json());
+
+// Serve static files in production
+if (isProduction) {
+  const clientDistPath = join(__dirname, '..', 'dist', 'client');
+  if (existsSync(clientDistPath)) {
+    app.use(express.static(clientDistPath));
+  }
+}
+
+const claudeService = new ClaudeService();
+
+// REST API endpoints
+app.get('/api/health', (req, res) => {
+  res.json({ status: 'ok', timestamp: new Date().toISOString() });
+});
+
+// Get project path
+app.get('/api/project-path', (req, res) => {
+  res.json({ path: fileService.getProjectPath() });
+});
+
+// Save workflow as Claude Code configuration
+app.post('/api/save/workflow', async (req, res) => {
+  try {
+    const { config, options } = req.body as {
+      config: ClaudeConfigExport;
+      options: SaveOptions;
+    };
+
+    if (!config || !options) {
+      return res.status(400).json({ message: 'Missing config or options' });
+    }
+
+    const result = await fileService.saveWorkflow(config, options);
+    res.json(result);
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    console.error('Save workflow error:', errorMessage);
+    res.status(500).json({ message: errorMessage });
+  }
+});
+
+// Generate workflow using AI
+app.post('/api/generate/workflow', async (req, res) => {
+  try {
+    const { prompt } = req.body as { prompt: string };
+
+    if (!prompt || typeof prompt !== 'string') {
+      return res.status(400).json({ message: 'Prompt is required' });
+    }
+
+    console.log('Generating workflow for prompt:', prompt);
+    const result = await workflowAIService.generate(prompt);
+    console.log('Workflow generated:', result.workflowName);
+
+    res.json(result);
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    console.error('Generate workflow error:', errorMessage);
+    res.status(500).json({ message: errorMessage });
+  }
+});
+
+// Socket.io connection handling
+io.on('connection', (socket) => {
+  console.log('Client connected:', socket.id);
+
+  // Execute workflow - Actually executes the workflow using Claude Code SDK
+  socket.on('execute:workflow', async (data: WorkflowExecutionRequest) => {
+    console.log('Executing workflow:', data.workflowId);
+
+    try {
+      // Emit start event
+      socket.emit('workflow:started', { workflowId: data.workflowId });
+
+      socket.emit('console:log', {
+        type: 'info',
+        message: `워크플로우 "${data.workflowName}" 실행 시작...`,
+        timestamp: new Date().toISOString(),
+      });
+
+      // 출력 디렉토리 설정
+      const outputDir = join(fileService.getProjectPath(), 'output', data.workflowId);
+
+      // 실제 워크플로우 실행
+      const results = await workflowExecutionService.execute(
+        {
+          workflowId: data.workflowId,
+          workflowName: data.workflowName,
+          nodes: data.nodes,
+          edges: data.edges,
+          inputs: data.inputs,
+          outputDir,
+        },
+        // Progress callback
+        (update: NodeExecutionUpdate) => {
+          socket.emit('node:update', update);
+        },
+        // Log callback
+        (type, message) => {
+          socket.emit('console:log', {
+            type,
+            message,
+            timestamp: new Date().toISOString(),
+          });
+        }
+      );
+
+      // 결과 수집
+      const allResults: Array<{
+        nodeId: string;
+        label: string;
+        success: boolean;
+        result?: string;
+        files?: Array<{ path: string; type: string; name: string }>;
+        error?: string;
+      }> = [];
+
+      for (const [nodeId, result] of results) {
+        const node = data.nodes.find((n) => n.id === nodeId);
+        allResults.push({
+          nodeId,
+          label: node?.data.label || nodeId,
+          success: result.success,
+          result: result.result,
+          files: result.files,
+          error: result.error,
+        });
+      }
+
+      // 최종 결과 전송
+      socket.emit('workflow:completed', {
+        workflowId: data.workflowId,
+        results: allResults,
+        outputDir,
+      });
+
+      socket.emit('console:log', {
+        type: 'info',
+        message: `워크플로우 실행 완료! 결과가 ${outputDir}에 저장되었습니다.`,
+        timestamp: new Date().toISOString(),
+      });
+
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      socket.emit('console:log', {
+        type: 'error',
+        message: `실행 오류: ${errorMessage}`,
+        timestamp: new Date().toISOString(),
+      });
+      socket.emit('workflow:error', { workflowId: data.workflowId, error: errorMessage });
+    }
+  });
+
+  // Execute workflow in Terminal (alternative mode)
+  socket.on('execute:workflow:terminal', async (data: WorkflowExecutionRequest) => {
+    console.log('Executing workflow in Terminal:', data.workflowId);
+
+    try {
+      socket.emit('workflow:started', { workflowId: data.workflowId });
+
+      socket.emit('console:log', {
+        type: 'info',
+        message: 'Opening Terminal with Claude Code...',
+        timestamp: new Date().toISOString(),
+      });
+
+      const result = await executeInTerminal({
+        workflowName: data.workflowName,
+        nodes: data.nodes,
+        edges: data.edges,
+        inputs: data.inputs,
+        workingDirectory: fileService.getProjectPath(),
+      });
+
+      if (result.success) {
+        socket.emit('console:log', {
+          type: 'info',
+          message: result.message,
+          timestamp: new Date().toISOString(),
+        });
+        socket.emit('workflow:completed', { workflowId: data.workflowId });
+      } else {
+        socket.emit('workflow:error', {
+          workflowId: data.workflowId,
+          error: result.message
+        });
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      socket.emit('workflow:error', { workflowId: data.workflowId, error: errorMessage });
+    }
+  });
+
+  // Cancel workflow execution
+  socket.on('execute:cancel', () => {
+    claudeService.cancelExecution();
+    socket.emit('workflow:cancelled');
+  });
+
+  socket.on('disconnect', () => {
+    console.log('Client disconnected:', socket.id);
+  });
+});
+
+// SPA fallback - serve index.html for all non-API routes in production
+if (isProduction) {
+  const clientDistPath = join(__dirname, '..', 'dist', 'client');
+  app.get('/{*path}', (req, res) => {
+    res.sendFile(join(clientDistPath, 'index.html'));
+  });
+}
+
+const PORT = process.env.PORT || 3001;
+
+httpServer.listen(PORT, () => {
+  console.log(`Server running on http://localhost:${PORT}`);
+});