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 👀

Sessions sidebar with search and tags

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.

Session view in secondary sidebar

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

Workflow Tools

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 workspace
OpenCode: Quick New Session - Quickly start a session from the current editor
OpenCode: Open Session - Open an existing session
OpenCode: Rename Session - Rename the selected session
OpenCode: Archive Session - Archive a session to clean up your sidebar
OpenCode: Share Session - Generate a shareable link for the session
OpenCode: Unshare Session - Revoke sharing for a session

Organization

OpenCode: Search Sessions - Search sessions within a workspace
OpenCode: Clear Session Search - Clear the active search filter
OpenCode: Manage Session Tags - Add or remove tags from a session
OpenCode: Filter Sessions By Tag - Filter sessions by tag in a workspace
OpenCode: Clear Session Tag Filter - Clear the active tag filter

Context Actions

OpenCode: Ask About Selection - Open OpenCode with the current selection
OpenCode: Ask About Current File - Open OpenCode with the current file
OpenCode: Ask About Selected Files - Open OpenCode with selected Explorer files

Workspace & Environment

OpenCode: Refresh - Refresh all workspace sessions
OpenCode: Refresh Workspace Sessions - Refresh sessions for a specific workspace
OpenCode: Open Workspace In Browser - Open the matching workspace server in your browser
OpenCode: Restart Workspace Server - Restart the opencode serve process
OpenCode: Check Environment - Verify opencode installation and setup
OpenCode: Open Output - Open the OpenCode output channel
OpenCode: 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.

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
.vscode		.vscode
docs		docs
images		images
scripts		scripts
src		src
test/e2e		test/e2e
.gitignore		.gitignore
.vscodeignore		.vscodeignore
AGENTS.md		AGENTS.md
CHANGELOG.md		CHANGELOG.md
CLAUDE.md		CLAUDE.md
LICENSE		LICENSE
README.md		README.md
bun.lock		bun.lock
bunfig.toml		bunfig.toml
esbuild.js		esbuild.js
eslint.config.mjs		eslint.config.mjs
package.json		package.json
tsconfig.json		tsconfig.json
wdio.conf.ts		wdio.conf.ts

Navigation Menu

Repository files navigation

OpenCode Enhanced UI

✨ What's Enhanced

Why use it 🚀