feat(app): add dedicated VS Code-style code panel by Ratel-tech · Pull Request #39819 · anomalyco/opencode · GitHub
Skip to content

feat(app): add dedicated VS Code-style code panel - #39819

Closed
Ratel-tech wants to merge 4 commits into
anomalyco:devfrom
Ratel-tech:code-panel
Closed

Ratel-tech wants to merge 4 commits into
anomalyco:devfrom
Ratel-tech:code-panel

Conversation

@Ratel-tech

Copy link
Copy Markdown

Summary

Adds a dedicated right-side code panel (VS Code-style) that opens project files as tabs with syntax highlighting, available on every screen.

Note: this PR is stacked on #39808 (file explorer sidebar) and #39811 (explorer context menu). Once those merge, this diff shrinks to only the code panel changes below.

Changes

  • CodeProvider (new global context): keeps open file tabs and cached content across screens and app restarts (persisted). Loads file content through the server file API (\ile.read), so it works outside a session route.
  • CodePanel (new): right-side panel with a VS Code-style tab bar (open/close tabs, middle-click close), content rendered with the shared \File\ viewer (syntax highlighting, images, audio, SVG), resizable width, starts open.
  • Integration: clicking a file in the project explorer opens it in the code panel (and in the session side panel when a session is active).
  • State: \layout.codePanel\ (opened/width) persisted alongside the other layout settings.

Testing

  • \�un typecheck\ in \packages/app\ and \packages/desktop\ (only pre-existing \custom-elements.d.ts\ error).
  • File tree unit tests passing.
  • Tested interactively in the desktop app.

Add a persistent left sidebar showing the current project file tree on all screens (new and legacy layouts), with searchable file listing and adjustable width. Add a BUILD/PLAN segmented control below the chat that switches the active agent mode.
Add right-click rename/delete actions to the project file explorer via a controlled dropdown menu and confirm dialogs, with F2 shortcut for rename. Rename/delete run on the real filesystem through new desktop IPC channels. Clicking a file in the explorer now opens it as a tab in the existing session side panel when a session is active.
Add a VS Code-style right-side panel that opens project files as tabs with syntax highlighting. A global CodeProvider keeps open tabs and cached content across screens and app restarts (persisted), loading file content through the server file API. Clicking a file in the project explorer opens it in this panel. The panel is resizable and starts open.
@github-actions

Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot added the needs:compliance This means the issue will auto-close after 2 hours. label Jul 31, 2026
The CodeProvider returned the tabs array directly instead of an accessor, so the panel called tabs() as a function and crashed with 'Cannot read properties of undefined (reading length)'.
@github-actions

Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot removed the needs:compliance This means the issue will auto-close after 2 hours. label Jul 31, 2026
@github-actions github-actions Bot closed this Jul 31, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant