npm - makecc - Versions diffs - 0.2.12 → 0.2.14 - Mend

makecc 0.2.12 → 0.2.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/client/assets/index-CXXgu628.css +1 -0
package/dist/client/assets/index-PJfSWqWr.js +150 -0
package/dist/client/index.html +3 -3
package/dist/server/index.js +30 -0
package/dist/server/services/claudeCliService.js +210 -0
package/dist/server/services/workflowExecutionService.js +79 -97
package/package.json +1 -1
package/server/index.ts +39 -0
package/server/services/claudeCliService.ts +258 -0
package/server/services/workflowExecutionService.ts +77 -110
package/dist/client/assets/index-oO8rpFoq.js +0 -150
package/dist/client/assets/index-v9IFpWkA.css +0 -1

package/dist/client/index.html CHANGED Viewed

@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>vite-temp</title>
-    <script type="module" crossorigin src="/assets/index-oO8rpFoq.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-v9IFpWkA.css">
+    <title>makecc</title>
+    <script type="module" crossorigin src="/assets/index-PJfSWqWr.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CXXgu628.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/server/index.js CHANGED Viewed

@@ -314,6 +314,36 @@ app.post('/api/skill/test', async (req, res) => {
         res.status(500).json({ message: errorMessage });
     }
 });
+// Save workflow output to local project
+app.post('/api/save/workflow-output', async (req, res) => {
+    try {
+        const { workflowName, files } = req.body;
+        if (!workflowName || !files || files.length === 0) {
+            return res.status(400).json({ message: 'Workflow name and files are required' });
+        }
+        // output/워크플로우명/ 폴더 생성
+        const sanitizedName = workflowName.replace(/[/\\?%*:|"<>]/g, '_').replace(/\s+/g, '_');
+        const outputDir = join(fileService.getProjectPath(), 'output', sanitizedName);
+        await fs.mkdir(outputDir, { recursive: true });
+        const savedFiles = [];
+        for (const file of files) {
+            const filePath = join(outputDir, file.name);
+            await fs.writeFile(filePath, file.content, 'utf-8');
+            savedFiles.push({ name: file.name, path: filePath });
+            console.log(`Saved workflow output: ${filePath}`);
+        }
+        res.json({
+            success: true,
+            outputDir,
+            files: savedFiles,
+        });
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+        console.error('Save workflow output error:', errorMessage);
+        res.status(500).json({ message: errorMessage });
+    }
+});
 // Read skill files for preview
 app.get('/api/skill/files', async (req, res) => {
     try {

package/dist/server/services/claudeCliService.js ADDED Viewed

@@ -0,0 +1,210 @@
+import { spawn } from 'child_process';
+import { join, basename } from 'path';
+import { existsSync } from 'fs';
+import { mkdir, copyFile, readdir, stat } from 'fs/promises';
+/**
+ * claude -c 명령어를 백그라운드로 실행하고 결과를 캡처합니다.
+ */
+export async function executeClaudeCli(options) {
+    const { prompt, workingDirectory, outputDirectory, timeoutMs = 300000 } = options; // 기본 5분 타임아웃
+    // 출력 디렉토리 생성
+    if (!existsSync(outputDirectory)) {
+        await mkdir(outputDirectory, { recursive: true });
+    }
+    // 실행 전 working directory 파일 목록 스냅샷
+    const beforeFiles = await getDirectorySnapshot(workingDirectory);
+    return new Promise((resolve) => {
+        // claude -c --print 옵션으로 결과만 출력 (인터랙티브 모드 없이)
+        const proc = spawn('claude', ['-c', '--print', prompt], {
+            cwd: workingDirectory,
+            stdio: ['ignore', 'pipe', 'pipe'],
+            env: {
+                ...process.env,
+                // TERM 설정으로 색상 코드 방지
+                TERM: 'dumb',
+                NO_COLOR: '1',
+            },
+        });
+        let stdout = '';
+        let stderr = '';
+        let timedOut = false;
+        // 타임아웃 설정
+        const timer = setTimeout(() => {
+            timedOut = true;
+            proc.kill('SIGTERM');
+        }, timeoutMs);
+        proc.stdout?.on('data', (data) => {
+            stdout += data.toString();
+        });
+        proc.stderr?.on('data', (data) => {
+            stderr += data.toString();
+        });
+        proc.on('close', async (code) => {
+            clearTimeout(timer);
+            // 실행 후 새로 생성된 파일 찾기
+            const afterFiles = await getDirectorySnapshot(workingDirectory);
+            const newFiles = findNewFiles(beforeFiles, afterFiles);
+            // 새 파일들을 output 디렉토리로 복사
+            const generatedFiles = [];
+            for (const filePath of newFiles) {
+                const fileName = basename(filePath);
+                const destPath = join(outputDirectory, fileName);
+                const fileType = getFileType(fileName);
+                try {
+                    await copyFile(filePath, destPath);
+                    generatedFiles.push({ name: fileName, path: destPath, type: fileType });
+                    console.log(`Copied generated file: ${filePath} -> ${destPath}`);
+                }
+                catch (err) {
+                    console.error(`Failed to copy file ${filePath}:`, err);
+                }
+            }
+            // stdout 결과도 파일로 저장 (결과가 있으면)
+            if (stdout.trim()) {
+                const { writeFile } = await import('fs/promises');
+                const resultPath = join(outputDirectory, 'claude-output.md');
+                await writeFile(resultPath, stdout, 'utf-8');
+                generatedFiles.push({ name: 'claude-output.md', path: resultPath, type: 'markdown' });
+            }
+            resolve({
+                success: code === 0 && !timedOut,
+                stdout: timedOut ? stdout + '\n[Execution timed out]' : stdout,
+                stderr,
+                exitCode: code,
+                generatedFiles,
+            });
+        });
+        proc.on('error', (err) => {
+            clearTimeout(timer);
+            resolve({
+                success: false,
+                stdout: '',
+                stderr: err.message,
+                exitCode: null,
+                generatedFiles: [],
+            });
+        });
+    });
+}
+/**
+ * 디렉토리의 파일 스냅샷 (재귀적으로 1단계까지만)
+ */
+async function getDirectorySnapshot(dir) {
+    const snapshot = new Map();
+    if (!existsSync(dir)) {
+        return snapshot;
+    }
+    try {
+        const entries = await readdir(dir, { withFileTypes: true });
+        for (const entry of entries) {
+            // 숨김 파일 및 특정 폴더 제외
+            if (entry.name.startsWith('.') || entry.name === 'node_modules' || entry.name === '__pycache__') {
+                continue;
+            }
+            const fullPath = join(dir, entry.name);
+            if (entry.isFile()) {
+                const stats = await stat(fullPath);
+                snapshot.set(fullPath, stats.mtimeMs);
+            }
+        }
+    }
+    catch (err) {
+        console.error('Error reading directory:', err);
+    }
+    return snapshot;
+}
+/**
+ * 파일 확장자로 타입 결정
+ */
+function getFileType(fileName) {
+    const ext = fileName.split('.').pop()?.toLowerCase() || '';
+    const typeMap = {
+        md: 'markdown',
+        txt: 'text',
+        json: 'json',
+        js: 'javascript',
+        ts: 'typescript',
+        py: 'python',
+        html: 'html',
+        css: 'css',
+        png: 'image',
+        jpg: 'image',
+        jpeg: 'image',
+        gif: 'image',
+        svg: 'image',
+        pdf: 'pdf',
+        xlsx: 'excel',
+        xls: 'excel',
+        pptx: 'powerpoint',
+        ppt: 'powerpoint',
+        docx: 'word',
+        doc: 'word',
+    };
+    return typeMap[ext] || 'file';
+}
+/**
+ * 새로 생성되거나 수정된 파일 찾기
+ */
+function findNewFiles(before, after) {
+    const newFiles = [];
+    for (const [path, mtime] of after) {
+        const beforeMtime = before.get(path);
+        // 새 파일이거나 수정된 파일
+        if (beforeMtime === undefined || mtime > beforeMtime) {
+            newFiles.push(path);
+        }
+    }
+    return newFiles;
+}
+/**
+ * 노드별 프롬프트 생성
+ */
+export function buildNodePrompt(nodeType, nodeData, previousResults) {
+    const lines = [];
+    if (nodeType === 'subagent') {
+        const role = nodeData.role || 'assistant';
+        const description = nodeData.description || '';
+        const systemPrompt = nodeData.systemPrompt || '';
+        lines.push(`You are a ${role}.`);
+        if (systemPrompt) {
+            lines.push(systemPrompt);
+        }
+        lines.push('');
+        lines.push('## Task');
+        lines.push(description || 'Complete the following task based on the input.');
+        lines.push('');
+        if (previousResults) {
+            lines.push('## Input from previous steps');
+            lines.push(previousResults);
+            lines.push('');
+        }
+        lines.push('Please complete this task and provide the result.');
+    }
+    else if (nodeType === 'skill') {
+        const skillId = nodeData.skillId || '';
+        const description = nodeData.description || '';
+        if (skillId) {
+            lines.push(`Execute the skill: /${skillId}`);
+        }
+        lines.push('');
+        lines.push('## Task');
+        lines.push(description || 'Execute this skill with the provided input.');
+        lines.push('');
+        if (previousResults) {
+            lines.push('## Input');
+            lines.push(previousResults);
+            lines.push('');
+        }
+    }
+    else {
+        // Generic
+        lines.push('## Task');
+        lines.push(nodeData.description || 'Process the following input.');
+        lines.push('');
+        if (previousResults) {
+            lines.push('## Input');
+            lines.push(previousResults);
+        }
+    }
+    return lines.join('\n');
+}

package/dist/server/services/workflowExecutionService.js CHANGED Viewed

@@ -1,19 +1,16 @@
-import Anthropic from '@anthropic-ai/sdk';
 import { writeFile, mkdir } from 'fs/promises';
 import { join } from 'path';
 import { existsSync } from 'fs';
-import { skillExecutionService } from './skillExecutionService';
+import { executeClaudeCli, buildNodePrompt } from './claudeCliService';
 /**
- * Anthropic API를 사용한 워크플로우 실행 서비스
+ * Claude CLI를 사용한 워크플로우 실행 서비스
  */
 export class WorkflowExecutionService {
-    client;
     results = new Map();
     outputDir = '';
+    projectRoot = '';
     constructor() {
-        this.client = new Anthropic({
-            apiKey: process.env.ANTHROPIC_API_KEY,
-        });
+        this.projectRoot = process.env.MAKECC_PROJECT_PATH || process.cwd();
     }
     /**
      * 워크플로우 전체 실행
@@ -85,55 +82,41 @@ export class WorkflowExecutionService {
         };
     }
     /**
-     * Subagent 노드 실행 - Claude API로 작업 수행
+     * Subagent 노드 실행 - Claude CLI로 작업 수행
      */
     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}) 호출 중...`);
+        onLog?.('info', `claude -c 실행 중: ${data.label} (${data.role})`);
+        // 프롬프트 생성
+        const prompt = buildNodePrompt('subagent', data, previousResults);
         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 }
-                ],
+            const result = await executeClaudeCli({
+                prompt,
+                workingDirectory: this.projectRoot,
+                outputDirectory: this.outputDir,
+                timeoutMs: 300000, // 5분
             });
-            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,
-            };
+            if (result.success) {
+                return {
+                    nodeId: node.id,
+                    success: true,
+                    result: result.stdout,
+                    files: result.generatedFiles,
+                };
+            }
+            else {
+                return {
+                    nodeId: node.id,
+                    success: false,
+                    error: result.stderr || 'Claude CLI 실행 실패',
+                };
+            }
         }
         catch (error) {
-            const errorMsg = error instanceof Error ? error.message : 'Claude API 호출 실패';
+            const errorMsg = error instanceof Error ? error.message : 'Claude CLI 호출 실패';
             onLog?.('error', `Subagent 오류: ${errorMsg}`);
             return {
                 nodeId: node.id,
@@ -143,23 +126,38 @@ ${previousResults || '(없음)'}
         }
     }
     /**
-     * Skill 노드 실행 - skillExecutionService 사용
+     * Skill 노드 실행 - Claude CLI로 스킬 실행
      */
     async executeSkillNode(node, previousResults, onProgress, onLog) {
         const data = node.data;
         const skillId = data.skillId || 'generic';
         onProgress?.({ nodeId: node.id, status: 'running', progress: 10 });
+        onLog?.('info', `claude -c 실행 중: /${skillId}`);
+        // 프롬프트 생성 - 스킬 호출 형태
+        const prompt = buildNodePrompt('skill', data, previousResults);
         try {
-            // skillExecutionService를 사용하여 실제 파일 생성
-            const result = await skillExecutionService.execute(skillId, previousResults, this.outputDir, onLog);
+            const result = await executeClaudeCli({
+                prompt,
+                workingDirectory: this.projectRoot,
+                outputDirectory: this.outputDir,
+                timeoutMs: 300000,
+            });
             onProgress?.({ nodeId: node.id, status: 'running', progress: 100 });
-            return {
-                nodeId: node.id,
-                success: result.success,
-                result: result.result,
-                files: result.files,
-                error: result.error,
-            };
+            if (result.success) {
+                return {
+                    nodeId: node.id,
+                    success: true,
+                    result: result.stdout,
+                    files: result.generatedFiles,
+                };
+            }
+            else {
+                return {
+                    nodeId: node.id,
+                    success: false,
+                    error: result.stderr || '스킬 실행 실패',
+                };
+            }
         }
         catch (error) {
             const errorMsg = error instanceof Error ? error.message : '스킬 실행 실패';
@@ -172,50 +170,47 @@ ${previousResults || '(없음)'}
         }
     }
     /**
-     * MCP 노드 실행 - 외부 도구/서비스 연결
+     * MCP 노드 실행 - Claude CLI로 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) 서버와 상호작용하는 전문가입니다.
+        onLog?.('info', `claude -c 실행 중: MCP 서버 "${data.serverName}"`);
+        const prompt = `MCP 서버를 사용하여 작업을 수행해주세요.
 ## MCP 서버 정보
 - 서버 이름: ${data.serverName}
 - 서버 타입: ${data.serverType}
-- 설정: ${JSON.stringify(data.serverConfig, null, 2)}
 ## 이전 단계 결과
-${previousResults}
+${previousResults || '(없음)'}
 ## 작업
-위 MCP 서버를 사용하여 이전 단계의 결과를 처리하세요.
-다음 MCP 서버 유형에 따라 적절한 작업을 수행하세요:
-- PostgreSQL/데이터베이스: 데이터 조회 또는 저장
-- Notion/Google Drive: 문서 생성 또는 업데이트
-- Slack/Discord: 메시지 전송 시뮬레이션
-- GitHub/Jira: 이슈 또는 PR 관련 작업 시뮬레이션
-작업 결과를 상세히 설명해주세요.`;
+위 MCP 서버를 사용하여 이전 단계의 결과를 처리하세요.`;
         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 = await executeClaudeCli({
+                prompt,
+                workingDirectory: this.projectRoot,
+                outputDirectory: this.outputDir,
+                timeoutMs: 300000,
             });
-            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,
-            };
+            if (result.success) {
+                return {
+                    nodeId: node.id,
+                    success: true,
+                    result: result.stdout,
+                    files: result.generatedFiles,
+                };
+            }
+            else {
+                return {
+                    nodeId: node.id,
+                    success: false,
+                    error: result.stderr || 'MCP 노드 실행 실패',
+                };
+            }
         }
         catch (error) {
             return {
@@ -273,19 +268,6 @@ ${allFiles.map((f) => `- **${f.name}**: \`${f.path}\``).join('\n') || '없음'}
             };
         }
     }
-    /**
-     * 모델 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';
-        }
-    }
     /**
      * 이전 노드 결과 수집
      */

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "makecc",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "type": "module",
   "description": "Visual workflow builder for Claude Code agents and skills",
   "keywords": [

package/server/index.ts CHANGED Viewed

@@ -355,6 +355,45 @@ app.post('/api/skill/test', async (req, res) => {
   }
 });
+// Save workflow output to local project
+app.post('/api/save/workflow-output', async (req, res) => {
+  try {
+    const { workflowName, files } = req.body as {
+      workflowName: string;
+      files: Array<{ name: string; content: string }>;
+    };
+    if (!workflowName || !files || files.length === 0) {
+      return res.status(400).json({ message: 'Workflow name and files are required' });
+    }
+    // output/워크플로우명/ 폴더 생성
+    const sanitizedName = workflowName.replace(/[/\\?%*:|"<>]/g, '_').replace(/\s+/g, '_');
+    const outputDir = join(fileService.getProjectPath(), 'output', sanitizedName);
+    await fs.mkdir(outputDir, { recursive: true });
+    const savedFiles: Array<{ name: string; path: string }> = [];
+    for (const file of files) {
+      const filePath = join(outputDir, file.name);
+      await fs.writeFile(filePath, file.content, 'utf-8');
+      savedFiles.push({ name: file.name, path: filePath });
+      console.log(`Saved workflow output: ${filePath}`);
+    }
+    res.json({
+      success: true,
+      outputDir,
+      files: savedFiles,
+    });
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    console.error('Save workflow output error:', errorMessage);
+    res.status(500).json({ message: errorMessage });
+  }
+});
 // Read skill files for preview
 app.get('/api/skill/files', async (req, res) => {
   try {