55 lines
2.7 KiB
Markdown
55 lines
2.7 KiB
Markdown
# 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.
|