docs(05): create VS Code Extension Packaging plan
This commit is contained in:
Variet-Worker
217
.planning/phases/05-vscode-extension-packaging/05-PLAN.md
Normal file
217
.planning/phases/05-vscode-extension-packaging/05-PLAN.md
Normal file
@@ -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
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user