OpenCode Enhanced UI
An enhanced VS Code extension that brings OpenCode sessions into your editor with powerful organization, visual customization, and workflow tools. Based on opencode-vscode-ui by @a710128
Built for productive AI-assisted development: browse sessions with a workspace-aware sidebar, customize your panel themes, track subagents and todos, organize with tags and search, and keep everything visible while you code—whether you work locally or over Remote SSH.
Stay in the editor, keep context intact, and manage OpenCode where the code already lives.
✨ What's Enhanced
This enhanced version extends the original OpenCode UI with:
- 🎨 Panel Theme System - Three visual presets (classic, codex, claude) × 7 color schemes, auto light/dark
- 🤖 Subagents Companion View - Track subagent sessions in a dedicated sidebar panel
- 🏷️ Session Tagging & Search - Custom tags, tag filtering, and workspace-scoped text search
- 📋 Enhanced Todo & Diff Views - Grouped task sections and per-session modified files tracking
- ⚡ Slash Commands -
/theme and /session for quick in-panel switching
- 🎯 Context Menu Actions - Right-click selections, files, or explorer items to start a session
- 🔗 Session Sharing - Share and unshare sessions with team members
- 🌐 Network & Environment - HTTP proxy, custom opencode binary path, cross-platform shell support
- ✨ Transcript Polish - Collapsible shell output, tool activity summaries, image previews, copy actions, and more
Why use it 🚀
- Browse sessions by workspace folder from the Activity Bar
- Search and filter sessions within each workspace using tags or text search
- Customize your visual experience with three panel theme presets
- Track subagents in real-time with the dedicated subagents companion view
- Monitor tasks and file changes with enhanced todo and diff views
- Open every conversation in its own VS Code tab with persistent state
- Quick context actions from editor selections and file explorer
- Use it in local folders and Remote SSH workspaces seamlessly
- Catch missing
opencode setup early with built-in environment checks
Visual tour 👀
The sidebar gives you a workspace-first view of your OpenCode sessions. Create, reopen, refresh, open the matching web UI, tag, filter, and search conversations without leaving VS Code.
Search sessions within one workspace at a time, or filter by tags to organize your active work.
Panel theme system
Choose from three visual presets and optional accent color schemes to match your workflow preference. All themes and color schemes automatically adapt to VS Code's light or dark mode.
| Classic Theme |
Codex Theme |
Claude Theme |
 |
 |
 |
| Standard OpenCode styling |
Tool-like preset with stronger framing |
Softer preset with gentler surfaces |
Use /theme in a session panel to switch both presets and color schemes. The footer Context entrypoint is available across themes, so you can inspect session usage and raw message data without leaving the current tab.
Dedicated conversation tabs
Each session opens in its own tab, making it easier to keep multiple threads organized while you continue editing code in the same window.
Subagents companion view
Track subagent sessions spawned by the focused session in a dedicated sidebar panel. Monitor their status and navigate between parent and child sessions effortlessly.
Enhanced todo and modified files views
Companion views help you triage focused-session tasks with grouped sections and filters, and inspect which files changed during the conversation.
| Enhanced Todo View |
Modified Files Tracking |
 |
 |
Compact skill invocations
Skill usage is rendered as clean, compact markers that don't clutter your transcript while still providing full visibility into what skills are being used.
Open the dedicated session view in VS Code's secondary sidebar for a focused conversation experience alongside your primary sidebar.
Key Features 🎯
Organization & Discovery
- One OpenCode runtime per workspace folder
- Session browser with create, open, refresh, open-web, rename, and archive actions
- Workspace-scoped session search from the sidebar
- Local session tagging with tag-based filtering
- A dedicated panel for each workspace-session pair
Visual Customization
- Three panel theme presets (classic, codex, claude) × seven color schemes
- Automatic light/dark mode adaptation
- Configurable diff rendering, thinking block visibility, and compact skill display
- Collapsible shell output and animated panel sections
- Subagents companion view for tracking child sessions
- Enhanced todo view with grouped sections and modified files tracking
- Session context side panel with usage breakdown and raw message inspection
- Slash commands (
/theme, /session) for in-panel quick actions
- Context menu actions, assistant reply copy, image previews
- Session sharing and collaboration support
Developer Experience
- Built-in environment checks with clear setup feedback
- HTTP proxy and custom opencode binary path support
- Cross-platform shell execution (Windows, macOS, Linux)
- Status bar integration and persistent panel state
Remote SSH ready 🌐
OpenCode Enhanced UI runs on the correct extension host, so Remote SSH sessions stay aligned with the active workspace.
- Runs against the remote machine when you use Remote SSH
- Preserves workspace identity across local and remote folders
- Keeps file opening and panel restore behavior aligned with the active workspace
- All enhanced features work seamlessly over SSH
Requirements
- VS Code
1.94.0 or newer
opencode installed on the active extension host and available on PATH
- If
opencode lives outside PATH, set the opencode-ui.opencodePath setting to its absolute path. Editor restart required.
If you use Remote SSH, install opencode on the remote host so the extension can launch opencode serve there.
Quick start ⚡
- Open a project folder in VS Code.
- Confirm
opencode is available in that environment.
- Open the OpenCode view from the Activity Bar.
- Run
OpenCode: Check Environment if you want to verify setup first.
- Create a new session or reopen one from the sidebar.
- Right-click an editor selection or current file to open OpenCode with prefilled context.
- Right-click selected files in the Explorer to seed a new session with multiple file refs.
- Use the always-visible OpenCode status bar entry to reopen the active session or start a quick session from the current editor.
- Customize your experience in settings: choose a panel theme, configure diff rendering, and adjust visibility options.
Commands
Session Management
OpenCode: New Session - Create a new session in the current workspaceOpenCode: Quick New Session - Quickly start a session from the current editorOpenCode: Open Session - Open an existing sessionOpenCode: Rename Session - Rename the selected sessionOpenCode: Archive Session - Archive a session to clean up your sidebarOpenCode: Share Session - Generate a shareable link for the sessionOpenCode: Unshare Session - Revoke sharing for a session
Organization
OpenCode: Search Sessions - Search sessions within a workspaceOpenCode: Clear Session Search - Clear the active search filterOpenCode: Manage Session Tags - Add or remove tags from a sessionOpenCode: Filter Sessions By Tag - Filter sessions by tag in a workspaceOpenCode: Clear Session Tag Filter - Clear the active tag filter
Context Actions
OpenCode: Ask About Selection - Open OpenCode with the current selectionOpenCode: Ask About Current File - Open OpenCode with the current fileOpenCode: Ask About Selected Files - Open OpenCode with selected Explorer files
Workspace & Environment
OpenCode: Refresh - Refresh all workspace sessionsOpenCode: Refresh Workspace Sessions - Refresh sessions for a specific workspaceOpenCode: Open Workspace In Browser - Open the matching workspace server in your browserOpenCode: Restart Workspace Server - Restart the opencode serve processOpenCode: Check Environment - Verify opencode installation and setupOpenCode: Open Output - Open the OpenCode output channelOpenCode: Open Settings - Open OpenCode settings
Configuration
Access settings via OpenCode: Open Settings or search for "OpenCode" in VS Code settings.
Visual Settings
- Panel Theme (
opencode-ui.panelTheme) - Choose from classic, codex, or claude presets
- Panel Color Scheme (
opencode-ui.panelColorScheme) - Choose from default, nocturne, orchid, verdant, solar, graphite, or ember palettes
- Show Thinking (
opencode-ui.showThinking) - Toggle visibility of thinking blocks
- Show Internals (
opencode-ui.showInternals) - Toggle visibility of internal transcript blocks
- Diff Mode (
opencode-ui.diffMode) - Choose unified or split diff rendering
- Compact Skill Invocations (
opencode-ui.compactSkillInvocations) - Render skills as compact markers
Network Settings
- HTTP Proxy (
opencode-ui.httpProxy) - Configure HTTP proxy for opencode serve (requires restart)
- OpenCode Path (
opencode-ui.opencodePath) - Absolute path to the opencode executable when it lives outside PATH (requires restart)
Tips & Tricks 💡
- Use tags to organize sessions - Right-click any session and choose "Manage Session Tags" to add custom tags, then filter by tag to focus on specific work
- Try different panel themes - Switch between classic, codex, and claude presets, then tune the palette with default, nocturne, orchid, verdant, solar, graphite, or ember
- Open the Context panel when you need details - Use the footer
Context entrypoint to inspect session usage, provider/model details, and raw message payloads without leaving the current tab
- Monitor subagents - Keep the Subagents view open to track child sessions spawned during complex tasks
- Quick context actions - Select code and right-click to instantly ask OpenCode about it
- Search within workspaces - Use the search icon on workspace rows to quickly find sessions without affecting other workspaces
- Open the web UI when you need it - Use the globe icon on a workspace row to jump straight to that workspace's opencode web interface
- Use the status bar - Click the OpenCode status bar item for quick access to the active session
Notes
- Sessions are organized per workspace folder
- Remote SSH requires
opencode on the remote host
- Environment issues can be checked with
OpenCode: Check Environment
- Panel themes adapt to VS Code's light/dark mode automatically
- Session tags are stored locally and workspace-specific
Feedback 💬
Have an idea or hit a bug? Open an issue at https://github.com/LanTingxin/opencode-enhanced-ui/issues.
