OpenSpec VSCode Extension — a VS Code extension providing a visual dashboard for OpenSpec workflows. Two main layers:
- Extension Host (Node.js): CLI integration, file watching, caching, commands. Built with esbuild →
dist/extension.js. - Webview (React 19 + Tailwind + Radix UI): Dashboard, change detail, task list. Built with Vite →
dist/webview/.
| Task | Command |
|---|---|
| Install deps | pnpm install |
| Full build | pnpm run build (esbuild + vite) |
| Watch (extension only) | pnpm run watch |
| Dev webview (standalone) | pnpm run dev:webview |
| Unit tests | pnpm test |
| Tests (watch) | pnpm run test:watch |
| Lint | npx eslint src/ |
| Format | npx prettier --write . |
| Debug in VS Code | Press F5 (uses .vscode/launch.json "Run Extension") |
- No lockfile committed:
pnpm-lock.yamlis not in the repo;pnpm installresolves fresh each time. - esbuild build script warning: pnpm may warn about "Ignored build scripts: esbuild" — this is cosmetic and does not affect functionality; the esbuild binary resolves correctly via its platform-specific optional dependency.
- ESLint pre-existing issues: ESLint config lacks Node.js/browser global declarations, so
no-undeferrors onprocess,console,setTimeout,window,documentetc. are pre-existing in the source code. "type": "module"not set: Node warns aboutMODULE_TYPELESS_PACKAGE_JSONforeslint.config.jsandpostcss.config.jssince they use ESM syntax. This is cosmetic.- Extension activation: Requires
openspec/config.yamlin the workspace root. This file exists in the repo. - OpenSpec CLI is required for runtime: Install with
npm install -g @fission-ai/openspec@latest(see https://openspec.dev). The extension shells out toopenspecand will not activate without it —DataManager.initialize()throws if CLI is unavailable. Unit tests (pnpm test) pass without the CLI because they mockchild_process. - VS Code is required to run the extension: It runs inside the Extension Development Host. Use
code --extensionDevelopmentPath=/workspace /workspace --no-sandboxto launch headlessly, or press F5 from within VS Code. - ESLint scope: Always run
npx eslint src/(notnpx eslint .) to avoid lintingdist/build output andesbuild.js. - i18n: All user-facing strings use
t('key')fromsrc/i18n/. Locale files:src/i18n/locales/en.json(English, default) andzh-cn.json(Chinese). Extension detects locale fromvscode.env.language; webview fromdocument.documentElement.lang. - Adapter priority: VS Code Copilot Chat > Cursor agent CLI > Clipboard. The Copilot adapter uses
workbench.action.chat.openwithqueryparam to pre-fill Chat input directly. Installgithub.copilot-chatextension for it to appear in the executor dropdown. - Workflow commands: All workflow buttons (Apply, Verify, Continue, FF, etc.) send simple
/opsx:<action> <change-name>commands — no verbose prompts. OpenSpec skills handle context loading internally.