diff --git a/.planning/phases/05-vscode-extension-packaging/05-PLAN.md b/.planning/phases/05-vscode-extension-packaging/05-PLAN.md new file mode 100644 index 0000000..eed076e --- /dev/null +++ b/.planning/phases/05-vscode-extension-packaging/05-PLAN.md @@ -0,0 +1,217 @@ +--- +phase: 05 +name: VS Code Extension Packaging +wave: 1 +depends_on: [04] +files_modified: + - openclaude/vscode-extension/openclaude-vscode/package.json + - .vscode/settings.json +autonomous: false +requirements: [BUILD-02, BUILD-03] +--- + +# Phase 05: VS Code Extension Packaging — PLAN + + +OpenClaude VS Code Extension을 .vsix로 패키징하고, Machine B의 VS Code에 설치한 후, Variet Engine(192.168.10.4:8000)에 연결되는 launchCommand와 useOpenAIShim 설정을 구성하여 통합 개발 환경을 완성한다. + + + + + + + +- openclaude/vscode-extension/openclaude-vscode/package.json (빌드 스크립트, 의존성 확인) +- openclaude/vscode-extension/openclaude-vscode/src/extension.js (진입점 확인) +- openclaude/vscode-extension/openclaude-vscode/README.md (Extension 설명) + + + +1. Extension 디렉토리로 이동: + ```powershell + cd openclaude/vscode-extension/openclaude-vscode + ``` + +2. lint 검증 (문법 오류 사전 검출): + ```powershell + npm run lint + ``` + +3. 테스트 실행: + ```powershell + npm test + ``` + +4. .vsix 패키징 (package.json의 scripts.package 사용): + ```powershell + npx @vscode/vsce package --no-dependencies + ``` + - `--no-dependencies`: node_modules 없이 순수 JS 파일만 패키징 (package.json의 `files` 필드 기반) + - 결과물: `openclaude-vscode-0.1.1.vsix` + +5. 생성된 .vsix 파일 확인: + ```powershell + Get-ChildItem *.vsix + ``` + + + +- `npm run lint` 종료 코드 0 +- `npm test` 종료 코드 0 +- `openclaude-vscode-0.1.1.vsix` 파일이 `openclaude/vscode-extension/openclaude-vscode/` 디렉토리에 존재 +- .vsix 파일 크기 > 0 bytes + + + + + + + +- openclaude/vscode-extension/openclaude-vscode/package.json (commands, views, configuration 확인) + + + +1. 기존 OpenClaude Extension이 설치되어 있다면 제거: + ```powershell + code --uninstall-extension devnull-bootloader.openclaude-vscode 2>$null + ``` + +2. .vsix 파일로 Extension 설치: + ```powershell + code --install-extension openclaude/vscode-extension/openclaude-vscode/openclaude-vscode-0.1.1.vsix + ``` + +3. 설치 확인: + ```powershell + code --list-extensions | Select-String "openclaude" + ``` + +4. VS Code 재시작 (Extension 활성화를 위해) + - Ctrl+Shift+P → "Developer: Reload Window" + - 또는 VS Code 완전 종료 후 재실행 + +5. Activity Bar에 OpenClaude 아이콘 표시 확인 +6. Ctrl+Shift+P → "OpenClaude" 검색 시 다음 커맨드 표시 확인: + - OpenClaude: Launch in Terminal + - OpenClaude: Launch in Workspace Root + - OpenClaude: Open Control Center + - OpenClaude: Open Repository + - OpenClaude: Open Setup Guide + - OpenClaude: Open Workspace Profile + + + +- `code --list-extensions` 출력에 `devnull-bootloader.openclaude-vscode` 포함 +- VS Code Activity Bar에 OpenClaude 아이콘 표시 +- Ctrl+Shift+P에서 "OpenClaude: Launch in Terminal" 커맨드 검색 가능 +- Ctrl+Shift+P에서 "OpenClaude: Open Control Center" 커맨드 검색 가능 + + + + + + + +- openclaude/vscode-extension/openclaude-vscode/package.json (configuration 섹션: launchCommand, terminalName, useOpenAIShim) +- openclaude/vscode-extension/openclaude-vscode/src/extension.js (launchOpenClaude 함수 — 환경변수 주입 로직) +- openclaude/.env (현재 연결 설정) +- scripts/start_openclaude.ps1 (기존 CLI 런처 참고) + + + +1. VS Code User Settings 또는 Workspace Settings에 OpenClaude Extension 설정 추가: + ```json + { + "openclaude.launchCommand": "node C:/Users/Variet-Worker/Desktop/variet-llm/openclaude/dist/cli.mjs", + "openclaude.terminalName": "Variet OpenClaude", + "openclaude.useOpenAIShim": true + } + ``` + + **설정 설명:** + - `launchCommand`: OpenClaude CLI의 절대 경로. npx/global 설치 없이 로컬 빌드 직접 실행. + - `terminalName`: 터미널 탭 이름을 "Variet OpenClaude"로 표시. + - `useOpenAIShim`: true → Extension이 터미널 환경변수에 `CLAUDE_CODE_USE_OPENAI=1`을 자동 주입. + +2. 추가로 필요한 환경변수는 VS Code의 `terminal.integrated.env.windows`에 설정: + ```json + { + "terminal.integrated.env.windows": { + "OPENAI_BASE_URL": "http://192.168.10.4:8000/v1", + "OPENAI_API_KEY": "variet-local", + "OPENAI_MODEL": "gemma-4-26b" + } + } + ``` + +3. 설정 적용 후 VS Code Reload: + - Ctrl+Shift+P → "Developer: Reload Window" + + + +- `.vscode/settings.json` 또는 User Settings에 `openclaude.launchCommand`가 `node C:/Users/Variet-Worker/Desktop/variet-llm/openclaude/dist/cli.mjs` 값으로 설정됨 +- `openclaude.useOpenAIShim`이 `true`로 설정됨 +- `terminal.integrated.env.windows`에 `OPENAI_BASE_URL`, `OPENAI_API_KEY`, `OPENAI_MODEL` 키가 존재 + + + + + + + +- openclaude/.env (연결 파라미터 확인) +- engine/variet_engine.py (Variet Engine 상태 확인) + + + +1. Variet Engine이 Machine A에서 실행 중인지 확인: + ```powershell + Invoke-RestMethod -Uri "http://192.168.10.4:8000/engine/health" + ``` + - 응답: `{"state": "ready", ...}` 확인 + +2. VS Code에서 Ctrl+Shift+P → "OpenClaude: Launch in Terminal" 실행 + +3. 다음을 순서대로 확인: + a. 터미널 탭 이름이 "Variet OpenClaude"인지 + b. 터미널에 OpenClaude CLI 프롬프트가 표시되는지 + c. 간단한 프롬프트 입력 후 Variet Engine으로부터 응답이 오는지: + ``` + --print "Hello, what model are you?" + ``` + +4. Control Center Webview 확인: + - Activity Bar의 OpenClaude 아이콘 클릭 + - Control Center에서 프로바이더 상태 표시 확인 + - useOpenAIShim: enabled + - Provider source: launch setting 또는 environment + + + +- "OpenClaude: Launch in Terminal" 실행 시 터미널이 열리고 CLI가 시작됨 +- 터미널 탭 이름이 "Variet OpenClaude" +- CLI에서 프롬프트 입력 시 Variet Engine(192.168.10.4:8000)으로부터 LLM 응답 수신 +- Control Center Webview에서 현재 프로바이더 상태(OpenAI shim enabled)가 표시됨 + + + + + + + +## Must-Haves (Phase Goal 역방향 검증) + +Phase 05의 목표: "OpenClaude VS Code Extension을 빌드하고 Machine B에 설치하여 CLI를 래핑한 통합 개발 환경을 완성한다." + +1. ✅ `.vsix` 파일 빌드 성공 (Task 1) +2. ✅ Machine B VS Code에 Extension 설치 + Activity Bar 아이콘 (Task 2) +3. ✅ "Launch in Terminal" 커맨드로 Variet Engine 연결 CLI 실행 (Task 3 + 4) +4. ✅ Control Center Webview에서 프로바이더 상태 표시 (Task 4) + +## Requirement Coverage + +| REQ-ID | Task | Description | +|--------|------|-------------| +| BUILD-02 | 1, 2 | Extension .vsix 패키징 및 설치 | +| BUILD-03 | 3, 4 | Extension 설정 구성 (launchCommand, useOpenAIShim) | +