opencode-gui AGENTS.md

AGENTS.md

Commands

• Build: pnpm build (builds extension + webview)
• Watch: pnpm watch (dev mode with hot reload)
• Test: pnpm test (runs vitest)
• Single test: pnpm test -- path/to/file.test.ts
• E2E Tests: pnpm test:e2e (runs playwright e2e tests with AI generation)
• Package: pnpm package (creates .vsix)
• UI Kit: pnpm uikit (opens component playground)

Architecture

VSCode extension with SolidJS webview. Two build targets:

• Extension (src/extension.ts, OpenCodeService.ts, OpenCodeViewProvider.ts) - VSCode extension host
• Webview (src/webview/) - SolidJS chat UI communicating via @opencode-ai/sdk

Code Style

• TypeScript with strict mode, no any types
• SolidJS for webview components (signals, createMemo, Show/For)
• Functional components with hooks in src/webview/hooks/
• CSS files colocated with components (App.css, uikit.css)
• Use VSCode API types from @types/vscode
• Prefer explicit imports, avoid barrel files
• Error handling: use VSCode's window.showErrorMessage and LogOutputChannel

SolidJS Store Pitfall: createMemo + store proxy

NEVER wrap a store property lookup in createMemo if downstream consumers need to react to in-place mutations (e.g. produce, push, splice).

createMemo compares values with ===. A store proxy reference stays the same after in-place mutations, so the memo silently swallows the update. Use a plain function instead:

// ❌ BAD — createMemo returns same proxy ref, suppresses downstream updates
const messages = createMemo(() => store.message[sessionId()] ?? []);

// ✅ GOOD — plain function, consumers track the store proxy directly
const messages = () => store.message[sessionId()] ?? [];

createMemo is fine for derived computations that produce new values (e.g. .map(), new Map(...), arithmetic).

Publishing

Use the pnpm run publish script to publish the extension to the VSCode and OVSX marketplaces.

Logging into gcloud