Skip to content

feat: Add file explorer and Monaco editor panel - #10299

Closed
cristian1991 wants to merge 1 commit into
anomalyco:devfrom
cristian1991:feature/file-explorer-editor
Closed

feat: Add file explorer and Monaco editor panel#10299
cristian1991 wants to merge 1 commit into
anomalyco:devfrom
cristian1991:feature/file-explorer-editor

Conversation

@cristian1991

@cristian1991 cristian1991 commented Jan 23, 2026 •
edited
Loading

Copy link
Copy Markdown

Summary

This PR adds an integrated file explorer and Monaco code editor to the OpenCode desktop application, allowing users to browse project files and edit them directly within the app.

Features

  • File Explorer - Tree view of project files with expand/collapse folders
  • Context Menu - Right-click for New File, New Folder, Copy, Cut, Paste, Rename, Delete
  • Monaco Editor - Full syntax highlighting for 25+ languages
  • Multi-tab Support - Open multiple files with tab management
  • Theme Integration - Editor syncs with OpenCode themes (including live preview on hover)
  • Keyboard Shortcuts - Ctrl+S / Cmd+S to save
  • Native File Watching - Detects external file changes using tauri-plugin-fs (no polling)
  • Smart Reload Behavior:
    • Active tab: Always prompts user when file changes on disk
    • Background tabs: Auto-reload by default (configurable)
  • Layout Toggle - Button in session header to show/hide editor panel

Changes

New Files

  • packages/app/src/components/explorer-panel.tsx - File tree with context menu
  • packages/app/src/components/editor-panel.tsx - Monaco editor with tabs
  • packages/app/src/context/editor.tsx - Editor state context (tabs, dirty state, external changes)

Backend (Tauri/Rust)

  • Added commands: read_directory, read_file, write_file, rename_path, delete_path, copy_path, create_file, create_directory
  • Added tauri-plugin-fs with watch feature for native file watching

Platform Integration

  • Added watchFile to platform context for file change detection
  • All file operations properly integrated with platform abstraction

UI/Layout

  • Editor panel in main content area
  • Inline review panel when editor is visible
  • New layout icons for toggle button
  • Web fallback (explorer/editor hidden, review panel on right)

Settings

  • Added "File Editor" section with "Auto-reload background files" toggle
  • Default: ON (background tabs auto-reload when files change - ideal for AI editing)
  • When OFF: User is prompted when switching to a tab with external changes

i18n

  • Added translations for new settings

Testing

  1. Open a project in OpenCode desktop
  2. Click the layout toggle button in the session header
  3. Browse files in the left explorer panel
  4. Double-click a file to open it in the editor
  5. Right-click for context menu (New File, Rename, Delete, etc.)
  6. Edit and save with Ctrl+S
  7. Edit a file externally while it's open - should see "File changed on disk" prompt
  8. Edit a background file externally - should auto-reload (or prompt based on setting)
  9. Change themes - editor background should update
image image image

@github-actions

github-actions Bot commented Jan 23, 2026

Copy link
Copy Markdown
Contributor

Thanks for your contribution!

This PR doesn't have a linked issue. All PRs must reference an existing issue.

Please:

  1. Open an issue describing the bug/feature (if one doesn't exist)
  2. Add Fixes #<number> or Closes #<number> to this PR description

See CONTRIBUTING.md for details.

@github-actions

github-actions Bot commented Jan 23, 2026

Copy link
Copy Markdown
Contributor

The following comment was made by an LLM, it may be inaccurate:

No duplicate PRs found

@cristian1991
cristian1991 force-pushed the feature/file-explorer-editor branch from 97ebb8f to aab6351 Compare January 23, 2026 22:58
@cristian1991

cristian1991 commented Jan 24, 2026

Copy link
Copy Markdown
Author

COMPLETE - GOING TO BED - PLEASE MERGE

@cristian1991
cristian1991 force-pushed the feature/file-explorer-editor branch 4 times, most recently from 820dfae to a823682 Compare January 24, 2026 18:42
@cristian1991
feat: add file explorer and Monaco editor panel
c3929fd 
- File explorer tree with expand/collapse, context menu
- Monaco editor with tabs, syntax highlighting for 25+ languages
- Theme integration with live preview
- Native file watching with smart reload behavior
- Auto-reload background files setting
- Keyboard shortcuts (Ctrl+S to save)
@cristian1991
cristian1991 force-pushed the feature/file-explorer-editor branch from a823682 to c3929fd Compare January 24, 2026 18:49
@R44VC0RP

R44VC0RP commented Jan 24, 2026

Copy link
Copy Markdown
Contributor

Hey @cristian1991 thank you for your contribution!

Unfortunately we already have this planned internally and need to close this PR. Appreciate the contribution though, check out help-wanted issues if you'd like to help in other areas!

@R44VC0RP R44VC0RP closed this Jan 24, 2026
@cristian1991 cristian1991 mentioned this pull request Jan 24, 2026
Closed
@AIchanKimi AIchanKimi mentioned this pull request Apr 3, 2026
Closed
@qiangxue1206

qiangxue1206 commented May 26, 2026

Copy link
Copy Markdown

Hey @cristian1991 thank you for your contribution!

Unfortunately we already have this planned internally and need to close this PR. Appreciate the contribution though, check out help-wanted issues if you'd like to help in other areas!

@R44VC0RP Hello, is there a timeline for the internal plan of the code editor feature?

@illusive-c

illusive-c commented Sep 9, 2026

Copy link
Copy Markdown

Any news on the internal file editor?

@opencode-agent opencode-agent Bot mentioned this pull request Oct 21, 2026
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@adamdotdevin adamdotdevin Awaiting requested review from adamdotdevin

Assignees

No one assigned

Labels

needs:issue

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@cristian1991 @R44VC0RP @qiangxue1206 @illusive-c