opencode icon indicating copy to clipboard operation
opencode copied to clipboard

feat(tui): add Project Files viewer/editor with vi mode support

Open ryanwyler opened this issue 1 week ago • 2 comments

Summary

Adds a file browser and viewer/editor panel to the TUI for viewing and editing project files directly within OpenCode.

Activate vi prompt in command menu: Use vi basic prompt editor / Use standard prompt editor Activate vi editor in command menu: Use vi basic project file editor / Use standard project file editor

Depends on: #7016 (vi basic mode extension)

Features

  • Project Files Browser - File tree in sidebar showing project files with expand/collapse
  • File Viewer Panel - View files with syntax highlighting, resizable panel with drag divider
  • File Editor - Edit files directly in the TUI with save (ctrl+s) and cancel (ctrl+c)
  • Vi Mode Integration - Optional vi basic mode for editing (toggle with ctrl+/)
    • Status bar showing INSERT/NORMAL state and command buffer
    • Search: / forward, ? backward, n/N next/prev match
    • Search bar UI displays when typing search pattern
  • Focus Management - Proper keyboard focus between editor and prompt
    • Click to refocus editor panel
    • Keys only captured when editor textarea is focused

Configuration

  • editor_mode KV setting: "standard" or "vi" (default: standard)
  • Toggle via ctrl+/ in edit mode or command menu

Files Changed

File Changes
routes/session/project-files.tsx File tree component
routes/session/content-panel.tsx Panel wrapper with resize divider
routes/session/file-viewer.tsx View/edit with vi mode integration
routes/session/sidebar.tsx ProjectFiles integration
routes/session/index.tsx ContentPanel + editor mode toggle

ryanwyler avatar Jan 06 '26 02:01 ryanwyler