OpenQode/Documentation/implementation_plan_wiring.md

User Request: Wire Power Features & Clean UI

The goal is to finalize the implementation of "Power Features" and "Clean UI" by wiring existing components into the main TUI (bin/opencode-ink.mjs) and creating the missing Fuzzy Finder.

User Review Required

Note

This plan modifies the core opencode-ink.mjs file. It introduces a new FuzzyFinder component and updates the Sidebar and Chat rendering.

Proposed Changes

1. New Component: Fuzzy File Finder

File: bin/ui/components/FuzzyFinder.mjs [NEW]

• Create a fuzzy file finder overlay.
• Uses glob or recursive scan to get file list.
• Filters list based on user input.
• Displays results with ink-select-input.

2. Sidebar Integration: Todo List

File: bin/opencode-ink.mjs

• Import CleanTodoList from ./ui/components/CleanTodoList.mjs.
• Import scanTodos from ../lib/todo-scanner.mjs.
• Add state: const [todos, setTodos] = useState([]).
• Add effect: Run scanTodos on startup and file changes.
• Pass todos prop to PremiumSidebar.

File: bin/ui/components/PremiumSidebar.mjs

• Accept todos prop.
• Render CleanTodoList in a new section (or replace Shortcuts if crowded, or collapsible).

3. Chat UI Clean-up: ChatBubble

File: bin/opencode-ink.mjs

• Import ChatBubble from ./ui/components/ChatBubble.mjs.
• Update ViewportMessage (internal component) or ScrollableChat to render ChatBubble instead of raw Box/Text.
• logic to route system messages through ChatBubble with role="system".

4. Theme Switcher

File: bin/opencode-ink.mjs

• Convert theme constant to state: const [activeTheme, setActiveTheme] = useState(THEMES.dracula).
• Add /theme command to showCommandPalette or command processor to allow switching.
• Ensure activeTheme is passed to components that need it (or they import it - might need refactoring if they import static theme).
  • Note: tui-theme.mjs exports a static theme. We might need to implement a Context or pass theme props. For now, we will use a simple state and pass it where possible, or update the global if ink allows (unlikely pure global).
  • Strategy: We will pass theme as prop to PremiumSidebar, ChatBubble, etc.

Verification Plan

Automated Tests

• None currently available for TUI visual regression.

Manual Verification

1. Fuzzy Finder: Press Ctrl+P (or typed command /find). Type server. Verify server.js is found.
2. Todo List: Check Sidebar for "Tasks" section. Verify it shows TODOs from project files.
3. Chat UI: Send a message "hello". Verify user message is right-aligned/styled. Response is left-aligned with clean gutter.
4. Themes: Type /theme monokai. Verify Sidebar colors change.