opencode-gui

# OpenCodeGUI An unofficial VS Code sidebar chat interface for [OpenCode](https://github.com/anomalyco/opencode). ## Table of Contents - [English](#english) <a id="english"></a> ## English ### OpenCodeGUI Use all OpenCode features from a familiar sidebar chat UI. > **This is an unofficial, community-developed extension. It is not affiliated with or endorsed by the OpenCode project.** > [!CAUTION] > **Disclaimer:** > This project is experimental and developed primarily through AI-assisted coding. It is provided "as-is" without warranty of any kind. It may contain unexpected behavior, unconventional implementations, or undiscovered defects. Use at your own risk. The authors assume no liability for any damages arising from the use of this software. ### Demo  ### Documents | File | Description | |------|-------------| | [CONTRIBUTING.md](CONTRIBUTING.md) | Contributing guide | | [CHANGELOG.md](CHANGELOG.md) | Release history | | [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md) | Third-party licenses | | [LICENSE](LICENSE) | MIT License | ### Features - Chat UI (send/receive messages, streaming display) - Markdown rendering - Tool calls collapsible display - Permission approval UI (Allow / Once / Deny) - Session management (create, switch, fork, delete) - Message editing & checkpoint restore - Model selection - Agent selector for primary agent selection - File context attachment - File changes diff view - Session diff review via [difit](https://github.com/yoshiko-pg/difit) (opens in browser) - Shell command execution - Reasoning / thinking display - Todo display - Undo / Redo - Session sharing - Agent mention (`@` mention) - Child session navigation (subtask) - Settings panel - Keyboard navigation for inline popups (Tab / Arrow keys) - Subtask display - Auto-scroll during streaming - File type icons - File path links (clickable file chips with extension-based icons) - Syntax highlighting and copy button for code blocks - Quick-add button with active editor file - Input history navigation (ArrowUp / ArrowDown) - Sound notification on assistant response completion - Question interaction UI for agent-initiated questions - i18n support (English, Japanese, Simplified Chinese, Korean, Traditional Chinese, Spanish, Brazilian Portuguese, Russian) ### Requirements - [OpenCode](https://github.com/anomalyco/opencode) installed - LLM provider authentication configured in OpenCode #### Optional - [difit](https://github.com/yoshiko-pg/difit) — enables the session diff review feature. Install with `npm install -g difit`. ### Installation Search for **OpenCodeGUI** in the VS Code Extensions view (`Ctrl+Shift+X` / `Cmd+Shift+X`) and click **Install**. ### Development #### Prerequisites - Node.js v22+ - [pnpm](https://pnpm.io/) v10+ #### Setup ```sh pnpm install pnpm run build ``` #### Build ```sh # Full build (all packages) pnpm run build # Extension only (from packages/platforms/vscode) pnpm --filter opencodegui run build:ext # Webview only (from packages/platforms/vscode) pnpm --filter opencodegui run build:webview ``` #### Watch Mode Open two terminals and run each: ```sh # Terminal 1: Extension watch pnpm --filter opencodegui run watch:ext # Terminal 2: Webview watch pnpm --filter opencodegui run watch:webview ``` #### Lint & Format ```sh pnpm run check ``` #### Debug 1. Run `pnpm run build` 2. Press `F5` in VS Code to launch the Extension Development Host 3. Click the OpenCode icon in the sidebar to open the chat panel #### Test ```sh pnpm test ``` ### Project Structure This project is a pnpm monorepo with the following packages: ``` packages/ core/ # @opencodegui/core — Domain types, interfaces & protocol src/ domain.ts # Domain types (messages, sessions, tools, permissions) agent.interface.ts # IAgent interface platform.interface.ts # IPlatformServices interface protocol.ts # Webview ↔ Extension messaging protocol agents/ opencode/ # @opencodegui/agent-opencode — OpenCode SDK adapter src/ opencode-agent.ts # IAgent implementation for OpenCode mappers.ts # SDK ↔ domain type mappers platforms/ vscode/ # opencodegui — VS Code extension src/ extension.ts # Extension entry point chat-view-provider.ts # Webview panel & messaging vscode-platform-services.ts # IPlatformServices implementation webview/ # Webview (Browser, React) App.tsx # State management & SSE event handling components/ # React components (Atoms / Molecules / Organisms) hooks/ # Custom React hooks contexts/ # React Context providers locales/ # i18n locale files utils/ # Utility functions __tests__/ # Tests (unit, scenario) ``` ### Contributing Contributions to this project are welcome. For details, please refer to [CONTRIBUTING.md](CONTRIBUTING.md). ### License [MIT](LICENSE)