makecc 0.2.17 → 0.2.19

package/dist/server/services/workflowAIService.js

@@ -1,4 +1,5 @@
 import Anthropic from '@anthropic-ai/sdk';
+import { skillGeneratorService } from './skillGeneratorService';
 // 사용 가능한 공식 스킬 목록
 const AVAILABLE_SKILLS = [
     { id: 'image-gen-nanobanana', name: 'Image Generator', description: 'Google Gemini 기반 AI 이미지 생성' },
@@ -29,22 +30,23 @@ ${AVAILABLE_TOOLS.join(', ')}
 반드시 아래 형식의 유효한 JSON으로 응답하세요. 다른 텍스트 없이 JSON만 반환하세요.
 
 {
-  "workflowName": "워크플로우 이름 (한글 가능)",
-  "description": "워크플로우 설명",
+  "workflowName": "Workflow Name in English",
+  "description": "워크플로우 설명 (한글 가능)",
   "nodes": [
     {
       "type": "input",
-      "label": "입력 노드 이름",
-      "description": "입력 설명",
+      "label": "input-name-in-english",
+      "description": "입력 설명 (한글 가능)",
       "config": {
         "inputType": "text",
-        "placeholder": "입력 안내"
+        "placeholder": "입력 안내",
+        "defaultValue": "워크플로우에 적합한 예시 입력값"
       }
     },
     {
       "type": "agent",
-      "label": "에이전트 이름",
-      "description": "에이전트 역할 설명",
+      "label": "agent-name-in-english",
+      "description": "에이전트 역할 설명 (한글 가능)",
       "config": {
         "role": "researcher|writer|analyst|coder|custom",
         "tools": ["Read", "Write"],
@@ -54,8 +56,8 @@ ${AVAILABLE_TOOLS.join(', ')}
     },
     {
       "type": "skill",
-      "label": "스킬 이름",
-      "description": "스킬 설명",
+      "label": "skill-name-in-english",
+      "description": "스킬 설명 (한글 가능)",
       "config": {
         "skillType": "official",
         "skillId": "image-gen-nanobanana"
@@ -63,18 +65,18 @@ ${AVAILABLE_TOOLS.join(', ')}
     },
     {
       "type": "skill",
-      "label": "커스텀 스킬 이름",
-      "description": "커스텀 스킬 설명",
+      "label": "custom-skill-name",
+      "description": "커스텀 스킬 설명 (한글 가능)",
       "config": {
         "skillType": "custom",
         "skillId": "my-custom-skill",
-        "skillContent": "---\\nname: my-custom-skill\\ndescription: 커스텀 스킬 설명\\n---\\n\\n# 스킬 내용\\n\\n구체적인 지시사항..."
+        "skillContent": "---\\nname: my-custom-skill\\ndescription: Custom skill description\\n---\\n\\n# Skill Instructions\\n\\nSpecific instructions..."
       }
     },
     {
       "type": "output",
-      "label": "출력 이름",
-      "description": "출력 설명",
+      "label": "output-name-in-english",
+      "description": "출력 설명 (한글 가능)",
       "config": {
         "outputType": "auto|markdown|document|image"
       }
@@ -94,30 +96,33 @@ ${AVAILABLE_TOOLS.join(', ')}
 5. edges의 from/to는 nodes 배열의 인덱스 (0부터 시작)
 6. 순차적으로 연결되지 않아도 됨 (병렬 처리, 합류 가능)
 7. systemPrompt는 구체적이고 실행 가능한 지시사항으로 작성
+8. **중요: label은 반드시 영어로, kebab-case 형식으로 작성 (예: blog-writer, data-analyzer)**
+9. workflowName도 영어로 작성
+10. **필수: input 노드의 config에 반드시 defaultValue 포함 - 워크플로우 목적에 맞는 구체적인 예시 값을 한글로 제공**
 
 ## 예시
 
 ### 예시 1: "이미지 3개 만들어줘"
 {
-  "workflowName": "이미지 생성",
+  "workflowName": "Image Generation",
   "description": "3개의 이미지를 생성하는 워크플로우",
   "nodes": [
-    { "type": "input", "label": "이미지 설명", "description": "생성할 이미지에 대한 설명", "config": { "inputType": "text", "placeholder": "이미지 프롬프트 입력" } },
-    { "type": "skill", "label": "이미지 생성기", "description": "AI로 이미지 생성", "config": { "skillType": "official", "skillId": "image-gen-nanobanana" } },
-    { "type": "output", "label": "생성된 이미지", "description": "생성된 이미지 결과", "config": { "outputType": "image" } }
+    { "type": "input", "label": "image-prompt", "description": "생성할 이미지에 대한 설명", "config": { "inputType": "text", "placeholder": "이미지 프롬프트 입력", "defaultValue": "미래적인 도시 야경, 네온 사인이 빛나는 사이버펑크 스타일" } },
+    { "type": "skill", "label": "image-generator", "description": "AI로 이미지 생성", "config": { "skillType": "official", "skillId": "image-gen-nanobanana" } },
+    { "type": "output", "label": "generated-images", "description": "생성된 이미지 결과", "config": { "outputType": "image" } }
   ],
   "edges": [{ "from": 0, "to": 1 }, { "from": 1, "to": 2 }]
 }
 
 ### 예시 2: "데이터 분석해서 보고서 만들어줘"
 {
-  "workflowName": "데이터 분석 보고서",
+  "workflowName": "Data Analysis Report",
   "description": "데이터를 분석하고 보고서를 작성하는 워크플로우",
   "nodes": [
-    { "type": "input", "label": "데이터 파일", "description": "분석할 데이터 파일", "config": { "inputType": "file" } },
-    { "type": "agent", "label": "데이터 분석가", "description": "데이터를 분석하고 인사이트 도출", "config": { "role": "analyst", "tools": ["Read", "Grep", "Glob"], "model": "sonnet", "systemPrompt": "주어진 데이터를 분석하여 핵심 인사이트를 도출하세요. 통계적 요약, 트렌드, 이상치를 파악하세요." } },
-    { "type": "agent", "label": "보고서 작성자", "description": "분석 결과로 보고서 작성", "config": { "role": "writer", "tools": ["Read", "Write"], "model": "opus", "systemPrompt": "분석 결과를 바탕으로 경영진을 위한 간결하고 명확한 보고서를 작성하세요." } },
-    { "type": "output", "label": "분석 보고서", "description": "최종 분석 보고서", "config": { "outputType": "document" } }
+    { "type": "input", "label": "data-file", "description": "분석할 데이터 파일", "config": { "inputType": "file", "defaultValue": "2024년 1~3분기 매출 데이터: 1월 1200만, 2월 1350만, 3월 1100만, 4월 1500만, 5월 1650만, 6월 1400만, 7월 1800만, 8월 1750만, 9월 1900만" } },
+    { "type": "agent", "label": "data-analyzer", "description": "데이터를 분석하고 인사이트 도출", "config": { "role": "analyst", "tools": ["Read", "Grep", "Glob"], "model": "sonnet", "systemPrompt": "주어진 데이터를 분석하여 핵심 인사이트를 도출하세요. 통계적 요약, 트렌드, 이상치를 파악하세요." } },
+    { "type": "agent", "label": "report-writer", "description": "분석 결과로 보고서 작성", "config": { "role": "writer", "tools": ["Read", "Write"], "model": "opus", "systemPrompt": "분석 결과를 바탕으로 경영진을 위한 간결하고 명확한 보고서를 작성하세요." } },
+    { "type": "output", "label": "analysis-report", "description": "최종 분석 보고서", "config": { "outputType": "document" } }
   ],
   "edges": [{ "from": 0, "to": 1 }, { "from": 1, "to": 2 }, { "from": 2, "to": 3 }]
 }
@@ -211,5 +216,146 @@ export class WorkflowAIService {
             edge.to < result.nodes.length);
         return result;
     }
+    /**
+     * 워크플로우 생성 + 재귀적 노드 확장
+     * 각 custom 스킬과 에이전트에 대해 상세 내용 생성
+     */
+    async generateWithExpansion(prompt, settings, onProgress) {
+        // 1. 워크플로우 구조 생성
+        onProgress?.({ step: 'workflow', message: '워크플로우 구조를 생성하고 있습니다...' });
+        const result = await this.generate(prompt, settings);
+        // 2. 확장이 필요한 노드 식별
+        const customSkills = result.nodes.filter((n) => n.type === 'skill' && n.config.skillType === 'custom');
+        const agents = result.nodes.filter((n) => n.type === 'agent');
+        const totalExpansions = customSkills.length + agents.length;
+        let current = 0;
+        // 3. 각 custom 스킬 확장
+        for (const skill of customSkills) {
+            current++;
+            onProgress?.({
+                step: 'skill',
+                message: `스킬 "${skill.label}" 상세 생성 중...`,
+                current,
+                total: totalExpansions,
+            });
+            try {
+                // skillGeneratorService를 사용하여 완전한 스킬 생성
+                const skillPrompt = this.buildSkillPrompt(skill, result);
+                const skillResult = await skillGeneratorService.generate(skillPrompt, settings);
+                if (skillResult.success && skillResult.skill) {
+                    // 생성된 스킬 정보로 노드 업데이트
+                    skill.config.skillId = skillResult.skill.skillId;
+                    skill.config.skillContent = undefined; // 파일로 저장되었으므로 제거
+                    // savedPath는 로그로만 출력 (타입에 없음)
+                    console.log(`Skill saved to: ${skillResult.savedPath}`);
+                }
+            }
+            catch (error) {
+                console.error(`Failed to expand skill ${skill.label}:`, error);
+                // 실패해도 계속 진행
+            }
+        }
+        // 4. 각 에이전트 확장 (상세 systemPrompt 생성)
+        for (const agent of agents) {
+            current++;
+            onProgress?.({
+                step: 'agent',
+                message: `에이전트 "${agent.label}" 상세 생성 중...`,
+                current,
+                total: totalExpansions,
+            });
+            try {
+                const expandedPrompt = await this.expandAgentPrompt(agent, result, settings);
+                agent.config.systemPrompt = expandedPrompt;
+            }
+            catch (error) {
+                console.error(`Failed to expand agent ${agent.label}:`, error);
+                // 실패해도 계속 진행
+            }
+        }
+        onProgress?.({ step: 'completed', message: '워크플로우 생성 완료!' });
+        return result;
+    }
+    /**
+     * 스킬 생성을 위한 상세 프롬프트 빌드
+     */
+    buildSkillPrompt(skill, workflow) {
+        // 워크플로우에서 이 스킬의 연결 관계 파악
+        const skillIndex = workflow.nodes.indexOf(skill);
+        const upstreamNodes = workflow.edges
+            .filter((e) => e.to === skillIndex)
+            .map((e) => workflow.nodes[e.from]);
+        const downstreamNodes = workflow.edges
+            .filter((e) => e.from === skillIndex)
+            .map((e) => workflow.nodes[e.to]);
+        const contextParts = [
+            `스킬 이름: ${skill.label}`,
+            `설명: ${skill.description}`,
+            `워크플로우: ${workflow.workflowName}`,
+        ];
+        if (upstreamNodes.length > 0) {
+            contextParts.push(`이전 단계: ${upstreamNodes.map((n) => `${n.label} (${n.type})`).join(', ')}`);
+        }
+        if (downstreamNodes.length > 0) {
+            contextParts.push(`다음 단계: ${downstreamNodes.map((n) => `${n.label} (${n.type})`).join(', ')}`);
+        }
+        if (skill.config.skillContent) {
+            contextParts.push(`기본 내용:\n${skill.config.skillContent}`);
+        }
+        return `다음 스킬을 생성해주세요:\n\n${contextParts.join('\n')}`;
+    }
+    /**
+     * 에이전트의 systemPrompt를 상세하게 확장
+     */
+    async expandAgentPrompt(agent, workflow, settings) {
+        const client = this.getClient(settings);
+        // 워크플로우에서 이 에이전트의 연결 관계 파악
+        const agentIndex = workflow.nodes.indexOf(agent);
+        const upstreamNodes = workflow.edges
+            .filter((e) => e.to === agentIndex)
+            .map((e) => workflow.nodes[e.from]);
+        const downstreamNodes = workflow.edges
+            .filter((e) => e.from === agentIndex)
+            .map((e) => workflow.nodes[e.to]);
+        const systemPrompt = `You are an expert at writing detailed system prompts for AI agents.
+Given an agent's context, generate a comprehensive system prompt that:
+1. Clearly defines the agent's role and responsibilities
+2. Specifies input/output expectations
+3. Provides step-by-step instructions
+4. Includes best practices and constraints
+5. Is written in Korean for user-facing parts
+
+Respond with ONLY the system prompt text, no explanations or formatting.`;
+        const userPrompt = `워크플로우: ${workflow.workflowName}
+워크플로우 설명: ${workflow.description}
+
+에이전트 정보:
+- 이름: ${agent.label}
+- 설명: ${agent.description}
+- 역할: ${agent.config.role || 'custom'}
+- 도구: ${(agent.config.tools || []).join(', ')}
+- 모델: ${agent.config.model || 'sonnet'}
+
+${upstreamNodes.length > 0 ? `이전 단계에서 받는 입력:\n${upstreamNodes.map((n) => `- ${n.label}: ${n.description}`).join('\n')}` : ''}
+
+${downstreamNodes.length > 0 ? `다음 단계로 전달할 출력:\n${downstreamNodes.map((n) => `- ${n.label}: ${n.description}`).join('\n')}` : ''}
+
+${agent.config.systemPrompt ? `기존 프롬프트 (확장 필요):\n${agent.config.systemPrompt}` : ''}
+
+이 에이전트를 위한 상세하고 실행 가능한 system prompt를 작성해주세요.`;
+        const response = await client.messages.create({
+            model: 'claude-sonnet-4-20250514',
+            max_tokens: 2048,
+            system: systemPrompt,
+            messages: [{ role: 'user', content: userPrompt }],
+        });
+        let result = '';
+        for (const block of response.content) {
+            if (block.type === 'text') {
+                result += block.text;
+            }
+        }
+        return result.trim() || agent.config.systemPrompt || agent.description;
+    }
 }
 export const workflowAIService = new WorkflowAIService();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makecc",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "type": "module",
   "description": "Visual workflow builder for Claude Code agents and skills",
   "keywords": [
@@ -55,6 +55,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.13.0",
     "remark-gfm": "^4.0.1",
     "sharp": "^0.34.5",
     "socket.io": "^4.8.3",

package/server/index.ts

@@ -27,6 +27,7 @@ import { configLoaderService } from './services/configLoaderService';
 import { workflowExecutionService } from './services/workflowExecutionService';
 import { executeInTerminal, getClaudeCommand } from './services/terminalService';
 import { claudeMdService } from './services/claudeMdService';
+import { projectService } from './services/projectService';
 import type { WorkflowExecutionRequest, NodeExecutionUpdate } from './types';
 import type { ClaudeConfigExport, SaveOptions } from './services/fileService';
 
@@ -70,6 +71,72 @@ app.get('/api/project-path', (req, res) => {
   res.json({ path: fileService.getProjectPath() });
 });
 
+// ============================================
+// Project Management API
+// ============================================
+
+// List all projects
+app.get('/api/projects', async (req, res) => {
+  try {
+    const projects = await projectService.listProjects();
+    const gallery = projectService.getGalleryItems();
+    res.json({ projects, gallery });
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    console.error('List projects error:', errorMessage);
+    res.status(500).json({ message: errorMessage });
+  }
+});
+
+// Create a new project
+app.post('/api/projects', async (req, res) => {
+  try {
+    const { name, description } = req.body as { name: string; description: string };
+
+    if (!name || typeof name !== 'string') {
+      return res.status(400).json({ message: 'Project name is required' });
+    }
+
+    const project = await projectService.createProject(name, description || '');
+    res.json(project);
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    console.error('Create project error:', errorMessage);
+    res.status(500).json({ message: errorMessage });
+  }
+});
+
+// Get a specific project
+app.get('/api/projects/:id', async (req, res) => {
+  try {
+    const project = await projectService.getProject(req.params.id);
+    if (!project) {
+      return res.status(404).json({ message: 'Project not found' });
+    }
+    res.json(project);
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    res.status(500).json({ message: errorMessage });
+  }
+});
+
+// Delete a project
+app.delete('/api/projects/:id', async (req, res) => {
+  try {
+    await projectService.deleteProject(req.params.id);
+    res.json({ success: true });
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    console.error('Delete project error:', errorMessage);
+    res.status(500).json({ message: errorMessage });
+  }
+});
+
+// Get makecc home directory
+app.get('/api/makecc-home', (req, res) => {
+  res.json({ path: projectService.getMakeccHome() });
+});
+
 // Save workflow as Claude Code configuration
 app.post('/api/save/workflow', async (req, res) => {
   try {
@@ -242,8 +309,7 @@ app.get('/api/load/claude-config', async (req, res) => {
   try {
     const config = await configLoaderService.loadAll();
     console.log(
-      `Loaded config: ${config.skills.length} skills, ${config.agents.length} agents, ` +
-      `${config.commands.length} commands, ${config.hooks.length} hooks`
+      `Loaded config: ${config.skills.length} skills, ${config.agents.length} agents, ${config.hooks.length} hooks`
     );
     res.json(config);
   } catch (error) {
@@ -256,7 +322,7 @@ app.get('/api/load/claude-config', async (req, res) => {
 // Generate workflow using AI
 app.post('/api/generate/workflow', async (req, res) => {
   try {
-    const { prompt } = req.body as { prompt: string };
+    const { prompt, expand = true } = req.body as { prompt: string; expand?: boolean };
 
     if (!prompt || typeof prompt !== 'string') {
       return res.status(400).json({ message: 'Prompt is required' });
@@ -267,13 +333,21 @@ app.post('/api/generate/workflow', async (req, res) => {
     const apiKey = req.headers['x-api-key'] as string;
     const proxyUrl = req.headers['x-proxy-url'] as string;
 
-    console.log('Generating workflow for prompt:', prompt, 'mode:', apiMode);
+    console.log('Generating workflow for prompt:', prompt, 'mode:', apiMode, 'expand:', expand);
 
-    const result = await workflowAIService.generate(prompt, {
+    const settings = {
       apiMode: apiMode as 'proxy' | 'direct',
       apiKey,
       proxyUrl,
-    });
+    };
+
+    // expand=true (기본값)이면 재귀적으로 스킬/에이전트 상세 생성
+    const result = expand
+      ? await workflowAIService.generateWithExpansion(prompt, settings, (event) => {
+          console.log(`[Workflow] ${event.step}: ${event.message}`);
+        })
+      : await workflowAIService.generate(prompt, settings);
+
     console.log('Workflow generated:', result.workflowName);
 
     res.json(result);
@@ -641,8 +715,16 @@ async function startServer() {
     // 초기화 실패해도 서버는 시작
   }
 
+  // 샘플 프로젝트 생성 (~/makecc에 없는 경우)
+  try {
+    await projectService.createSampleProjects();
+  } catch (error) {
+    console.error('Sample projects creation warning:', error);
+  }
+
   httpServer.listen(PORT, () => {
     console.log(`Server running on http://localhost:${PORT}`);
+    console.log(`makecc home: ${projectService.getMakeccHome()}`);
   });
 }
 

package/server/services/configLoaderService.ts

@@ -21,15 +21,6 @@ interface LoadedSubagent {
   systemPrompt: string;
 }
 
-interface LoadedCommand {
-  id: string;
-  type: 'command';
-  label: string;
-  description: string;
-  commandName: string;
-  commandContent: string;
-}
-
 interface LoadedHook {
   id: string;
   type: 'hook';
@@ -40,12 +31,11 @@ interface LoadedHook {
   hookCommand: string;
 }
 
-export type LoadedNode = LoadedSkill | LoadedSubagent | LoadedCommand | LoadedHook;
+export type LoadedNode = LoadedSkill | LoadedSubagent | LoadedHook;
 
 export interface ClaudeConfig {
   skills: LoadedSkill[];
   agents: LoadedSubagent[];
-  commands: LoadedCommand[];
   hooks: LoadedHook[];
 }
 
@@ -60,14 +50,13 @@ export class ConfigLoaderService {
    * .claude/ 디렉토리에서 모든 설정 로드
    */
   async loadAll(): Promise<ClaudeConfig> {
-    const [skills, agents, commands, hooks] = await Promise.all([
+    const [skills, agents, hooks] = await Promise.all([
       this.loadSkills(),
-      this.loadSubagents(),
-      this.loadCommands(),
+      this.loadAgents(),
       this.loadHooks(),
     ]);
 
-    return { skills, agents, commands, hooks };
+    return { skills, agents, hooks };
   }
 
   /**
@@ -108,9 +97,9 @@ export class ConfigLoaderService {
   }
 
   /**
-   * .claude/agents/ 에서 서브에이전트 로드
+   * .claude/agents/ 에서 에이전트 로드
    */
-  async loadSubagents(): Promise<LoadedSubagent[]> {
+  async loadAgents(): Promise<LoadedSubagent[]> {
     const agentsDir = path.join(this.projectRoot, '.claude', 'agents');
     const agents: LoadedSubagent[] = [];
 
@@ -147,44 +136,6 @@ export class ConfigLoaderService {
     return agents;
   }
 
-  /**
-   * .claude/commands/ 에서 커맨드 로드
-   */
-  async loadCommands(): Promise<LoadedCommand[]> {
-    const commandsDir = path.join(this.projectRoot, '.claude', 'commands');
-    const commands: LoadedCommand[] = [];
-
-    try {
-      const entries = await fs.readdir(commandsDir, { withFileTypes: true });
-
-      for (const entry of entries) {
-        if (entry.isFile() && entry.name.endsWith('.md')) {
-          const cmdPath = path.join(commandsDir, entry.name);
-          try {
-            const content = await fs.readFile(cmdPath, 'utf-8');
-            const parsed = this.parseFrontmatter(content);
-            const cmdName = entry.name.replace('.md', '');
-
-            commands.push({
-              id: `command-${cmdName}`,
-              type: 'command',
-              label: parsed.frontmatter.name || cmdName,
-              description: parsed.frontmatter.description || '',
-              commandName: cmdName,
-              commandContent: content,
-            });
-          } catch {
-            // 읽을 수 없으면 스킵
-          }
-        }
-      }
-    } catch {
-      // commands 디렉토리가 없으면 빈 배열 반환
-    }
-
-    return commands;
-  }
-
   /**
    * .claude/settings.json 에서 훅 로드
    */