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

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

<objective>
OpenClaude VS Code Extension을 .vsix로 패키징하고, Machine B의 VS Code에 설치한 후, Variet Engine(192.168.10.4:8000)에 연결되는 launchCommand와 useOpenAIShim 설정을 구성하여 통합 개발 환경을 완성한다.
</objective>

<tasks>

<task id="1" title="Build .vsix package with vsce">

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

<action>
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
   ```
</action>

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

</task>

<task id="2" title="Install extension in VS Code on Machine B">

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

<action>
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
</action>

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

</task>

<task id="3" title="Configure launchCommand and useOpenAIShim for Variet Engine">

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

<action>
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"
</action>

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

</task>

<task id="4" title="Verify end-to-end: Launch from Extension → Variet Engine response">

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

<action>
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
</action>

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

</task>

</tasks>

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