OpenQode/implementation_plan_nextgen.md

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 diff package for the diff view. Navigation Change: Tab key 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 FileTree inside Sidebar when focused.
• State: Track sidebarFocus boolean.

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 ].

4. Integration Logic

• File: bin/opencode-ink.mjs
• Change:
  • Intercept /write command or "CREATE:" blocks.
  • Instead of writing immediately, store in pendingDiff.
  • Render DiffView overlay.
  • Wait for user Apply signal.

Verification Plan

Manual Verification

1. Navigation:

   • Run TUI. Press Tab to focus Sidebar.
   • Use Arrow keys. Ensure cursor moves.
   • Expand bin/. See files.

2. Context Selection:

   • Navigate to package.json. Press Space.
   • Verify visually (Green checkmark).
   • Send message "What is in the selected file?". Verify AI sees it.

3. Diff Review:

   • Ask AI "Refactor the file header".
   • AI outputs code.
   • Expected: Diff View appears showing changes.
   • Select Apply.
   • Verify file is written.