2.1 KiB
2.1 KiB
Next-Gen TUI Implementation Plan
Goal
Transform the TUI into a "Tactile" IDE by adding interactive file exploration (Context Matrix) and safe code application (Rich Diff Review).
User Review Required
Important
New Dependencies: We need to add
diffpackage for the diff view. Navigation Change:Tabkey will now toggle focus between Chat Input and Sidebar. This changes existing behavior (previously Tab toggled Sidebar visibility in narrow mode).
Proposed Changes
1. New Component: FileTree.mjs
- Location:
bin/ui/components/FileTree.mjs - Functionality:
- Recursive directory walker.
- State:
expandedFolders(Set),selectedFiles(Set). - UI:
▼ folder/[x] file.js
- Interaction:
Up/Down: Navigate.Right/Enter: Expand folder.Left: Collapse folder.Space: Toggle selection (Add/Remove from Context).
2. Updated Sidebar
- File:
bin/opencode-ink.mjs - Change: Render
FileTreeinside Sidebar when focused. - State: Track
sidebarFocusboolean.
3. New Component: DiffView.mjs
- Location:
bin/ui/components/DiffView.mjs - Functionality:
- Input:
originalContent,newContent. - Output: Visual diff (Green lines for additions, Red for deletions).
- Interactive Footer:
[ Apply ] [ Reject ].
- Input:
4. Integration Logic
- File:
bin/opencode-ink.mjs - Change:
- Intercept
/writecommand or "CREATE:" blocks. - Instead of writing immediately, store in
pendingDiff. - Render
DiffViewoverlay. - Wait for user
Applysignal.
- Intercept
Verification Plan
Manual Verification
-
Navigation:
- Run TUI. Press
Tabto focus Sidebar. - Use Arrow keys. Ensure cursor moves.
- Expand
bin/. See files.
- Run TUI. Press
-
Context Selection:
- Navigate to
package.json. PressSpace. - Verify visually (Green checkmark).
- Send message "What is in the selected file?". Verify AI sees it.
- Navigate to
-
Diff Review:
- Ask AI "Refactor the file header".
- AI outputs code.
- Expected: Diff View appears showing changes.
- Select
Apply. - Verify file is written.