Repository navigation
Closed as not planned
Labels
opentuiThis relates to changes in v1.0, now that opencode uses opentuiThis relates to changes in v1.0, now that opencode uses opentui
Description
Parent Epic
Part of #11762 (Ink-based TUI Rewrite)
Objective
Create selection menu component for agent selection, model selection, and other choices.
Current Implementation
The existing select.ts (122 lines) provides:
- Arrow key navigation
- Enter to select
- Escape to cancel
- Scrolling for long lists
Component Design
import { Box, Text, useInput } from 'ink'
interface SelectMenuProps<T> {
items: Array<{ label: string; value: T }>
onSelect: (value: T) => void
onCancel?: () => void
title?: string
}
const SelectMenu = <T,>({ items, onSelect, onCancel, title }: SelectMenuProps<T>) => {
const [selected, setSelected] = useState(0)
useInput((input, key) => {
if (key.upArrow) setSelected(s => Math.max(0, s - 1))
if (key.downArrow) setSelected(s => Math.min(items.length - 1, s + 1))
if (key.return) onSelect(items[selected].value)
if (key.escape && onCancel) onCancel()
})
return (
<Box flexDirection="column">
{title && <Text bold>{title}</Text>}
{items.map((item, i) => (
<Text key={i} color={i === selected ? 'cyan' : undefined}>
{i === selected ? '❯ ' : ' '}{item.label}
</Text>
))}
</Box>
)
}Tasks
- Create
src/cli/ink/components/SelectMenu.tsx - Implement arrow key navigation
- Implement selection highlight
- Implement Enter to confirm
- Implement Escape to cancel
- Handle long lists (scrolling/pagination)
- Support search/filter (optional)
Use Cases
- Agent selection (
/agentcommand) - Model selection (
/modelcommand) - Session selection (
/sessionscommand) - Confirmation dialogs
Acceptance Criteria
- Navigation works with arrow keys
- Selection highlight visible
- Enter confirms selection
- Escape cancels
- Works with varying list lengths
Estimated Effort
0.5 days
Risk
Low - straightforward component
Dependencies
- Setup Ink dependencies and verify Bun compatibility #11763 (Setup Ink dependencies)
- Implement core App component and state management #11764 (App component)
Metadata
Metadata
Assignees
Labels
opentuiThis relates to changes in v1.0, now that opencode uses opentuiThis relates to changes in v1.0, now that opencode uses opentui
Activity
feat(opencode): add Phase 2 Ink components (anomalyco#11765, anomalyc…
feat(opencode): add Phase 2 Ink components (anomalyco#11765, anomalyc…
feat(opencode): add Ink-based TUI components for oclite