makecc 0.2.7 → 0.2.10

package/dist/server/services/skillGeneratorService.js

@@ -1,6 +1,8 @@
 import Anthropic from '@anthropic-ai/sdk';
 import * as fs from 'fs/promises';
 import * as path from 'path';
+import { existsSync } from 'fs';
+import { spawn } from 'child_process';
 const SYSTEM_PROMPT = `You are a Claude Code skill generator. You MUST respond with ONLY a valid JSON object. No markdown, no code blocks, no explanations - just pure JSON.
 
 Your response must follow this exact JSON schema:
@@ -79,12 +81,33 @@ export class SkillGeneratorService {
         }
         return new Anthropic({ apiKey: envApiKey });
     }
-    async generate(prompt, settings) {
+    async generate(prompt, settings, onProgress) {
+        const progress = onProgress || (() => { });
+        progress({
+            step: 'started',
+            message: '✨ 스킬 생성을 시작합니다',
+            detail: `요청: "${prompt.slice(0, 50)}${prompt.length > 50 ? '...' : ''}"`,
+        });
         const client = this.getClient(settings);
+        progress({
+            step: 'analyzing',
+            message: '🔍 요청을 분석하고 있어요',
+            detail: '어떤 스킬이 필요한지 파악 중...',
+        });
         const userPrompt = `Create a skill for: "${prompt}"
 
 Generate complete, working code. Respond with JSON only.`;
         try {
+            progress({
+                step: 'designing',
+                message: '📝 스킬 구조를 설계하고 있어요',
+                detail: 'AI가 최적의 스킬 구조를 결정 중...',
+            });
+            progress({
+                step: 'generating',
+                message: '⚙️ 코드를 생성하고 있어요',
+                detail: 'Python 스크립트와 설정 파일 작성 중...',
+            });
             const response = await client.messages.create({
                 model: 'claude-sonnet-4-20250514',
                 max_tokens: 8192,
@@ -101,6 +124,10 @@ Generate complete, working code. Respond with JSON only.`;
                 }
             }
             if (!responseText) {
+                progress({
+                    step: 'error',
+                    message: '❌ AI 응답을 받지 못했습니다',
+                });
                 return { success: false, error: 'AI 응답을 받지 못했습니다.' };
             }
             // Prefill로 '{'를 보냈으니 응답 앞에 '{'를 붙임
@@ -111,11 +138,47 @@ Generate complete, working code. Respond with JSON only.`;
             }
             catch {
                 console.error('Failed to parse skill response:', fullJson.slice(0, 500));
+                progress({
+                    step: 'error',
+                    message: '❌ AI 응답을 파싱할 수 없습니다',
+                    detail: '다시 시도해주세요',
+                });
                 return { success: false, error: 'AI 응답을 파싱할 수 없습니다. 다시 시도해주세요.' };
             }
+            progress({
+                step: 'saving',
+                message: '💾 파일을 저장하고 있어요',
+                detail: `${skill.files.length}개 파일 저장 중...`,
+            });
             // 파일 저장
             const skillPath = path.join(this.projectRoot, '.claude', 'skills', skill.skillId);
             await this.saveSkillFiles(skillPath, skill.files);
+            // requirements.txt가 있으면 의존성 설치
+            const requirementsPath = path.join(skillPath, 'requirements.txt');
+            if (existsSync(requirementsPath)) {
+                progress({
+                    step: 'installing',
+                    message: '📦 패키지를 설치하고 있어요',
+                    detail: 'pip install 실행 중...',
+                });
+                try {
+                    await this.installDependencies(requirementsPath, progress);
+                }
+                catch (installError) {
+                    // 설치 실패해도 스킬 생성은 성공으로 처리
+                    console.error('Dependency installation failed:', installError);
+                    progress({
+                        step: 'installing',
+                        message: '⚠️ 일부 패키지 설치에 실패했어요',
+                        detail: '나중에 수동으로 설치해주세요',
+                    });
+                }
+            }
+            progress({
+                step: 'completed',
+                message: '✅ 스킬이 생성되었습니다!',
+                detail: `${skill.skillName} → ${skillPath}`,
+            });
             return {
                 success: true,
                 skill,
@@ -125,6 +188,11 @@ Generate complete, working code. Respond with JSON only.`;
         catch (error) {
             const errorMessage = error instanceof Error ? error.message : 'Unknown error';
             console.error('Skill generation error:', errorMessage);
+            progress({
+                step: 'error',
+                message: '❌ 스킬 생성에 실패했습니다',
+                detail: errorMessage,
+            });
             return { success: false, error: errorMessage };
         }
     }
@@ -141,5 +209,95 @@ Generate complete, working code. Respond with JSON only.`;
             console.log(`Saved: ${filePath}`);
         }
     }
+    async installDependencies(requirementsPath, progress) {
+        return new Promise((resolve, reject) => {
+            const homeDir = process.env.HOME || process.env.USERPROFILE || '';
+            const venvPythonPath = path.join(homeDir, '.claude', 'venv', 'bin', 'python');
+            let command;
+            let args;
+            // uv를 우선 사용 (10-100x 빠름)
+            // uv pip install --python <venv-python> -r requirements.txt
+            const useUv = this.checkCommandExists('uv');
+            if (useUv && existsSync(venvPythonPath)) {
+                command = 'uv';
+                args = ['pip', 'install', '--python', venvPythonPath, '-r', requirementsPath];
+                progress({
+                    step: 'installing',
+                    message: '⚡ uv로 패키지 설치 중 (고속)',
+                    detail: 'uv pip install 실행 중...',
+                });
+            }
+            else if (existsSync(path.join(homeDir, '.claude', 'venv', 'bin', 'pip'))) {
+                // fallback: 전역 venv pip 사용
+                command = path.join(homeDir, '.claude', 'venv', 'bin', 'pip');
+                args = ['install', '-r', requirementsPath];
+                progress({
+                    step: 'installing',
+                    message: '📦 pip으로 패키지 설치 중',
+                    detail: 'pip install 실행 중...',
+                });
+            }
+            else {
+                // fallback: 시스템 pip 사용
+                command = 'pip3';
+                args = ['install', '-r', requirementsPath];
+                progress({
+                    step: 'installing',
+                    message: '📦 pip으로 패키지 설치 중',
+                    detail: 'pip install 실행 중...',
+                });
+            }
+            console.log(`Installing dependencies: ${command} ${args.join(' ')}`);
+            const proc = spawn(command, args, {
+                stdio: ['ignore', 'pipe', 'pipe'],
+            });
+            let output = '';
+            let errorOutput = '';
+            proc.stdout?.on('data', (data) => {
+                output += data.toString();
+                const lines = data.toString().trim().split('\n');
+                for (const line of lines) {
+                    if (line.includes('Successfully installed') || line.includes('Requirement already satisfied') || line.includes('Installed')) {
+                        progress({
+                            step: 'installing',
+                            message: '📦 패키지 설치 중',
+                            detail: line.slice(0, 60) + (line.length > 60 ? '...' : ''),
+                        });
+                    }
+                }
+            });
+            proc.stderr?.on('data', (data) => {
+                errorOutput += data.toString();
+            });
+            proc.on('close', (code) => {
+                if (code === 0) {
+                    progress({
+                        step: 'installing',
+                        message: '✅ 패키지 설치 완료',
+                        detail: '모든 의존성이 설치되었습니다',
+                    });
+                    resolve();
+                }
+                else {
+                    console.error('Package install failed:', errorOutput);
+                    reject(new Error(`Package install failed with code ${code}`));
+                }
+            });
+            proc.on('error', (err) => {
+                console.error('Failed to start package installer:', err);
+                reject(err);
+            });
+        });
+    }
+    checkCommandExists(cmd) {
+        try {
+            const { execSync } = require('child_process');
+            execSync(`which ${cmd}`, { stdio: 'ignore' });
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
 }
 export const skillGeneratorService = new SkillGeneratorService();

package/package.json

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

package/server/index.ts

@@ -5,12 +5,13 @@ import { Server } from 'socket.io';
 import cors from 'cors';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
-import { existsSync } from 'fs';
+import { existsSync, promises as fs } from 'fs';
 import { ClaudeService } from './services/claudeService';
 import { fileService } from './services/fileService';
 import { workflowAIService } from './services/workflowAIService';
-import { skillGeneratorService } from './services/skillGeneratorService';
+import { skillGeneratorService, type SkillProgressEvent } from './services/skillGeneratorService';
 import { nodeSyncService } from './services/nodeSyncService';
+import { configLoaderService } from './services/configLoaderService';
 import { workflowExecutionService } from './services/workflowExecutionService';
 import { executeInTerminal, getClaudeCommand } from './services/terminalService';
 import type { WorkflowExecutionRequest, NodeExecutionUpdate } from './types';
@@ -223,6 +224,22 @@ app.post('/api/generate/skill', async (req, res) => {
   }
 });
 
+// Load existing Claude config from .claude/ directory
+app.get('/api/load/claude-config', async (req, res) => {
+  try {
+    const config = await configLoaderService.loadAll();
+    console.log(
+      `Loaded config: ${config.skills.length} skills, ${config.subagents.length} agents, ` +
+      `${config.commands.length} commands, ${config.hooks.length} hooks`
+    );
+    res.json(config);
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    console.error('Load config error:', errorMessage);
+    res.status(500).json({ message: errorMessage });
+  }
+});
+
 // Generate workflow using AI
 app.post('/api/generate/workflow', async (req, res) => {
   try {
@@ -254,6 +271,124 @@ app.post('/api/generate/workflow', async (req, res) => {
   }
 });
 
+// Test skill execution
+app.post('/api/skill/test', async (req, res) => {
+  const { spawn } = await import('child_process');
+
+  try {
+    const { skillPath, args } = req.body as { skillPath: string; args?: string[] };
+
+    if (!skillPath) {
+      return res.status(400).json({ message: 'Skill path is required' });
+    }
+
+    // 보안: 프로젝트 경로 내의 파일만 접근 허용
+    const projectRoot = fileService.getProjectPath();
+    if (!skillPath.startsWith(projectRoot)) {
+      return res.status(403).json({ message: 'Access denied' });
+    }
+
+    const mainPyPath = join(skillPath, 'scripts', 'main.py');
+    if (!existsSync(mainPyPath)) {
+      return res.status(404).json({ message: 'main.py not found' });
+    }
+
+    // 전역 venv의 python 사용
+    const homeDir = process.env.HOME || process.env.USERPROFILE || '';
+    const pythonPath = join(homeDir, '.claude', 'venv', 'bin', 'python');
+    const command = existsSync(pythonPath) ? pythonPath : 'python3';
+
+    console.log(`Testing skill: ${command} ${mainPyPath}`);
+
+    return new Promise<void>((resolve) => {
+      const proc = spawn(command, [mainPyPath, ...(args || [])], {
+        cwd: skillPath,
+        stdio: ['ignore', 'pipe', 'pipe'],
+        timeout: 30000, // 30초 타임아웃
+      });
+
+      let stdout = '';
+      let stderr = '';
+
+      proc.stdout?.on('data', (data) => {
+        stdout += data.toString();
+      });
+
+      proc.stderr?.on('data', (data) => {
+        stderr += data.toString();
+      });
+
+      proc.on('close', (code) => {
+        res.json({
+          success: code === 0,
+          exitCode: code,
+          stdout: stdout.trim(),
+          stderr: stderr.trim(),
+        });
+        resolve();
+      });
+
+      proc.on('error', (err) => {
+        res.status(500).json({
+          success: false,
+          error: err.message,
+        });
+        resolve();
+      });
+    });
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    console.error('Skill test error:', errorMessage);
+    res.status(500).json({ message: errorMessage });
+  }
+});
+
+// Read skill files for preview
+app.get('/api/skill/files', async (req, res) => {
+  try {
+    const skillPath = req.query.path as string;
+
+    if (!skillPath) {
+      return res.status(400).json({ message: 'Skill path is required' });
+    }
+
+    // 보안: 프로젝트 경로 내의 파일만 접근 허용
+    const projectRoot = fileService.getProjectPath();
+    if (!skillPath.startsWith(projectRoot)) {
+      return res.status(403).json({ message: 'Access denied' });
+    }
+
+    const files: Array<{ name: string; content: string; language: string }> = [];
+
+    // SKILL.md 읽기
+    const skillMdPath = join(skillPath, 'SKILL.md');
+    if (existsSync(skillMdPath)) {
+      const content = await fs.readFile(skillMdPath, 'utf-8');
+      files.push({ name: 'SKILL.md', content, language: 'markdown' });
+    }
+
+    // scripts/main.py 읽기
+    const mainPyPath = join(skillPath, 'scripts', 'main.py');
+    if (existsSync(mainPyPath)) {
+      const content = await fs.readFile(mainPyPath, 'utf-8');
+      files.push({ name: 'scripts/main.py', content, language: 'python' });
+    }
+
+    // requirements.txt 읽기
+    const requirementsPath = join(skillPath, 'requirements.txt');
+    if (existsSync(requirementsPath)) {
+      const content = await fs.readFile(requirementsPath, 'utf-8');
+      files.push({ name: 'requirements.txt', content, language: 'text' });
+    }
+
+    res.json({ files });
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    console.error('Read skill files error:', errorMessage);
+    res.status(500).json({ message: errorMessage });
+  }
+});
+
 // Socket.io connection handling
 io.on('connection', (socket) => {
   console.log('Client connected:', socket.id);
@@ -391,6 +526,45 @@ io.on('connection', (socket) => {
     socket.emit('workflow:cancelled');
   });
 
+  // Generate skill with real-time progress
+  socket.on('generate:skill', async (data: {
+    prompt: string;
+    apiMode?: 'proxy' | 'direct';
+    apiKey?: string;
+    proxyUrl?: string;
+  }) => {
+    console.log('Generating skill via Socket.IO:', data.prompt);
+
+    try {
+      const result = await skillGeneratorService.generate(
+        data.prompt,
+        {
+          apiMode: data.apiMode || 'proxy',
+          apiKey: data.apiKey,
+          proxyUrl: data.proxyUrl,
+        },
+        // Progress callback
+        (event: SkillProgressEvent) => {
+          socket.emit('skill:progress', event);
+        }
+      );
+
+      if (result.success) {
+        socket.emit('skill:completed', {
+          skill: result.skill,
+          savedPath: result.savedPath,
+        });
+      } else {
+        socket.emit('skill:error', {
+          error: result.error,
+        });
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      socket.emit('skill:error', { error: errorMessage });
+    }
+  });
+
   socket.on('disconnect', () => {
     console.log('Client disconnected:', socket.id);
   });

package/server/services/configLoaderService.ts

@@ -0,0 +1,260 @@
+import * as fs from 'fs/promises';
+import * as path from 'path';
+
+interface LoadedSkill {
+  id: string;
+  type: 'skill';
+  label: string;
+  description: string;
+  skillId: string;
+  skillPath: string;
+}
+
+interface LoadedSubagent {
+  id: string;
+  type: 'subagent';
+  label: string;
+  description: string;
+  tools: string[];
+  model?: string;
+  skills: string[];
+  systemPrompt: string;
+}
+
+interface LoadedCommand {
+  id: string;
+  type: 'command';
+  label: string;
+  description: string;
+  commandName: string;
+  commandContent: string;
+}
+
+interface LoadedHook {
+  id: string;
+  type: 'hook';
+  label: string;
+  description: string;
+  hookEvent: string;
+  hookMatcher: string;
+  hookCommand: string;
+}
+
+export type LoadedNode = LoadedSkill | LoadedSubagent | LoadedCommand | LoadedHook;
+
+export interface ClaudeConfig {
+  skills: LoadedSkill[];
+  subagents: LoadedSubagent[];
+  commands: LoadedCommand[];
+  hooks: LoadedHook[];
+}
+
+export class ConfigLoaderService {
+  private projectRoot: string;
+
+  constructor(projectRoot?: string) {
+    this.projectRoot = projectRoot || process.env.MAKECC_PROJECT_PATH || process.cwd();
+  }
+
+  /**
+   * .claude/ 디렉토리에서 모든 설정 로드
+   */
+  async loadAll(): Promise<ClaudeConfig> {
+    const [skills, subagents, commands, hooks] = await Promise.all([
+      this.loadSkills(),
+      this.loadSubagents(),
+      this.loadCommands(),
+      this.loadHooks(),
+    ]);
+
+    return { skills, subagents, commands, hooks };
+  }
+
+  /**
+   * .claude/skills/ 에서 스킬 로드
+   */
+  async loadSkills(): Promise<LoadedSkill[]> {
+    const skillsDir = path.join(this.projectRoot, '.claude', 'skills');
+    const skills: LoadedSkill[] = [];
+
+    try {
+      const entries = await fs.readdir(skillsDir, { withFileTypes: true });
+
+      for (const entry of entries) {
+        if (entry.isDirectory()) {
+          const skillMdPath = path.join(skillsDir, entry.name, 'SKILL.md');
+          try {
+            const content = await fs.readFile(skillMdPath, 'utf-8');
+            const parsed = this.parseFrontmatter(content);
+
+            skills.push({
+              id: `skill-${entry.name}`,
+              type: 'skill',
+              label: parsed.frontmatter.name || entry.name,
+              description: parsed.frontmatter.description || '',
+              skillId: entry.name,
+              skillPath: path.join(skillsDir, entry.name),
+            });
+          } catch {
+            // SKILL.md가 없거나 읽을 수 없으면 스킵
+          }
+        }
+      }
+    } catch {
+      // skills 디렉토리가 없으면 빈 배열 반환
+    }
+
+    return skills;
+  }
+
+  /**
+   * .claude/agents/ 에서 서브에이전트 로드
+   */
+  async loadSubagents(): Promise<LoadedSubagent[]> {
+    const agentsDir = path.join(this.projectRoot, '.claude', 'agents');
+    const subagents: LoadedSubagent[] = [];
+
+    try {
+      const entries = await fs.readdir(agentsDir, { withFileTypes: true });
+
+      for (const entry of entries) {
+        if (entry.isFile() && entry.name.endsWith('.md')) {
+          const agentPath = path.join(agentsDir, entry.name);
+          try {
+            const content = await fs.readFile(agentPath, 'utf-8');
+            const parsed = this.parseFrontmatter(content);
+            const agentName = entry.name.replace('.md', '');
+
+            subagents.push({
+              id: `subagent-${agentName}`,
+              type: 'subagent',
+              label: parsed.frontmatter.name || agentName,
+              description: parsed.frontmatter.description || '',
+              tools: this.parseList(parsed.frontmatter.tools),
+              model: parsed.frontmatter.model,
+              skills: this.parseList(parsed.frontmatter.skills),
+              systemPrompt: parsed.body,
+            });
+          } catch {
+            // 읽을 수 없으면 스킵
+          }
+        }
+      }
+    } catch {
+      // agents 디렉토리가 없으면 빈 배열 반환
+    }
+
+    return subagents;
+  }
+
+  /**
+   * .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 에서 훅 로드
+   */
+  async loadHooks(): Promise<LoadedHook[]> {
+    const settingsPath = path.join(this.projectRoot, '.claude', 'settings.json');
+    const hooks: LoadedHook[] = [];
+
+    try {
+      const content = await fs.readFile(settingsPath, 'utf-8');
+      const settings = JSON.parse(content);
+
+      if (settings.hooks) {
+        for (const [event, eventHooks] of Object.entries(settings.hooks)) {
+          if (Array.isArray(eventHooks)) {
+            for (let i = 0; i < eventHooks.length; i++) {
+              const hookConfig = eventHooks[i] as {
+                matcher?: string;
+                hooks?: Array<{ type: string; command: string }>;
+              };
+
+              const command = hookConfig.hooks?.[0]?.command || '';
+
+              hooks.push({
+                id: `hook-${event}-${i}`,
+                type: 'hook',
+                label: `${event} Hook`,
+                description: `Matcher: ${hookConfig.matcher || '*'}`,
+                hookEvent: event,
+                hookMatcher: hookConfig.matcher || '*',
+                hookCommand: command,
+              });
+            }
+          }
+        }
+      }
+    } catch {
+      // settings.json이 없거나 파싱 에러면 빈 배열 반환
+    }
+
+    return hooks;
+  }
+
+  // ===== Private Methods =====
+
+  private parseFrontmatter(content: string): { frontmatter: Record<string, string>; body: string } {
+    const frontmatter: Record<string, string> = {};
+    let body = content;
+
+    const match = content.match(/^---\n([\s\S]*?)\n---\n?([\s\S]*)$/);
+    if (match) {
+      const fmContent = match[1];
+      body = match[2].trim();
+
+      for (const line of fmContent.split('\n')) {
+        const colonIndex = line.indexOf(':');
+        if (colonIndex > 0) {
+          const key = line.slice(0, colonIndex).trim();
+          const value = line.slice(colonIndex + 1).trim();
+          frontmatter[key] = value;
+        }
+      }
+    }
+
+    return { frontmatter, body };
+  }
+
+  private parseList(value: string | undefined): string[] {
+    if (!value) return [];
+    return value.split(',').map(s => s.trim()).filter(Boolean);
+  }
+}
+
+export const configLoaderService = new ConfigLoaderService();