variet_llm/.planning/phases/05-vscode-extension-packaging/05-PLAN.md

phase, name, wave, depends_on, files_modified, autonomous, requirements

phase	name	wave	depends_on	files_modified	autonomous	requirements
05	VS Code Extension Packaging	1	04	openclaude/vscode-extension/openclaude-vscode/package.json .vscode/settings.json	false	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 설정을 구성하여 통합 개발 환경을 완성한다.

<read_first>

• openclaude/vscode-extension/openclaude-vscode/package.json (빌드 스크립트, 의존성 확인)
• openclaude/vscode-extension/openclaude-vscode/src/extension.js (진입점 확인)
• openclaude/vscode-extension/openclaude-vscode/README.md (Extension 설명) </read_first>

1. Extension 디렉토리로 이동: ```powershell cd openclaude/vscode-extension/openclaude-vscode ```

2. lint 검증 (문법 오류 사전 검출):

   npm run lint
   

3. 테스트 실행:

   npm test
   

4. .vsix 패키징 (package.json의 scripts.package 사용):

   npx @vscode/vsce package --no-dependencies
   

   • --no-dependencies: node_modules 없이 순수 JS 파일만 패키징 (package.json의 files 필드 기반)
   • 결과물: openclaude-vscode-0.1.1.vsix

5. 생성된 .vsix 파일 확인:

   Get-ChildItem *.vsix
   

<acceptance_criteria>

• npm run lint 종료 코드 0
• npm test 종료 코드 0
• openclaude-vscode-0.1.1.vsix 파일이 openclaude/vscode-extension/openclaude-vscode/ 디렉토리에 존재
• .vsix 파일 크기 > 0 bytes </acceptance_criteria>

<read_first>

• openclaude/vscode-extension/openclaude-vscode/package.json (commands, views, configuration 확인) </read_first>

1. 기존 OpenClaude Extension이 설치되어 있다면 제거: ```powershell code --uninstall-extension devnull-bootloader.openclaude-vscode 2>$null ```

2. .vsix 파일로 Extension 설치:

   code --install-extension openclaude/vscode-extension/openclaude-vscode/openclaude-vscode-0.1.1.vsix
   

3. 설치 확인:

   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

<acceptance_criteria>

• 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" 커맨드 검색 가능 </acceptance_criteria>

<read_first>

• 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 런처 참고) </read_first>

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에 설정:

   {
     "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"

<acceptance_criteria>

• .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 키가 존재 </acceptance_criteria>

<read_first>

• openclaude/.env (연결 파라미터 확인)
• engine/variet_engine.py (Variet Engine 상태 확인) </read_first>

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

<acceptance_criteria>

• "OpenClaude: Launch in Terminal" 실행 시 터미널이 열리고 CLI가 시작됨
• 터미널 탭 이름이 "Variet OpenClaude"
• CLI에서 프롬프트 입력 시 Variet Engine(192.168.10.4:8000)으로부터 LLM 응답 수신
• Control Center Webview에서 현재 프로바이더 상태(OpenAI shim enabled)가 표시됨 </acceptance_criteria>

## 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)