anomalyco/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-21 17:56:33 -04:00
Code Issues 5.9k Packages Projects Releases 19 Wiki Activity

[PR #10299] feat: Add file explorer and Monaco editor panel #13395

New Issue
Closed
opened 2026-02-16 18:18:15 -05:00 by yindo · 0 comments
yindo commented 2026-02-16 18:18:15 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/anomalyco/opencode/pull/10299

State: closed
Merged: No

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
**Original Pull Request:** https://github.com/anomalyco/opencode/pull/10299 **State:** closed **Merged:** No --- ## 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 <img width="1846" height="1079" alt="image" src="https://github.com/user-attachments/assets/718e2a36-0388-4916-b4e9-b61953977ac6" /> <img width="1845" height="1078" alt="image" src="https://github.com/user-attachments/assets/ed2de17b-b093-49b0-924a-8a5a2d1664e2" /> <img width="1848" height="1079" alt="image" src="https://github.com/user-attachments/assets/445f41bd-2766-4a00-ac12-1d75a9c7c7ac" />
yindo added the pull-request label 2026-02-16 18:18:15 -05:00
yindo closed this issue 2026-02-16 18:18:15 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
acp
bad
bug
discussion
docs
documentation
enhancement
extension
good first issue
growth
help-wanted
mcp
model-problem
needs:compliance
nix
opentui
perf
pull-request
Mirrored from GitHub Pull Request
 tui
web
windows
zen
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#13395
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?