anomalyco/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-22 10:15:31 -04:00
Code Issues 5.9k Packages Projects Releases 19 Wiki Activity

Implement TextInput component with useInput hook #8313

New Issue
Closed
opened 2026-02-16 18:09:40 -05:00 by yindo · 0 comments
yindo commented 2026-02-16 18:09:40 -05:00
Owner
Copy Link
Copy Source

Originally created by @randomm on GitHub (Feb 2, 2026).

Originally assigned to: @thdxr on GitHub.

Parent Epic

Part of #11762 (Ink-based TUI Rewrite)

Objective

Create text input handling using Ink's useInput hook, supporting line editing, history, and keyboard shortcuts.

Current Implementation

The existing input.ts (128 lines) provides LineEditor with:

  • Basic text editing (insert, delete, cursor movement)
  • Command history (up/down arrows)
  • Line submission (Enter)

Approach Options

Option A: Use ink-text-input

import TextInput from 'ink-text-input'

const InputLine = () => {
  const [value, setValue] = useState('')
  return <TextInput value={value} onChange={setValue} onSubmit={handleSubmit} />
}

Option B: Custom implementation with useInput

import { useInput } from 'ink'

const InputLine = () => {
  const [value, setValue] = useState('')
  const [cursor, setCursor] = useState(0)
  
  useInput((input, key) => {
    if (key.return) handleSubmit(value)
    else if (key.backspace) handleBackspace()
    else if (key.leftArrow) moveCursor(-1)
    else if (key.rightArrow) moveCursor(1)
    else if (key.upArrow) historyPrev()
    else if (key.downArrow) historyNext()
    else if (input) insertChar(input)
  })
  
  return <Text>{prompt}{value}</Text>
}

Recommendation: Start with ink-text-input, customize if needed.

Tasks

  • Create src/cli/ink/components/InputLine.tsx
  • Implement prompt display: agent-name ❯
  • Implement text input with cursor
  • Implement command history (up/down arrows)
  • Implement agent cycling (Shift+Tab)
  • Implement cancel (Escape during streaming)
  • Implement exit (Ctrl+C)
  • Handle multi-line input (if needed)

Keyboard Shortcuts

Key Action
Enter Submit input
Up/Down Command history
Left/Right Move cursor
Shift+Tab Cycle agents
Ctrl+C Exit
Escape Cancel current operation
Ctrl+T Toggle task list (if implemented)

Acceptance Criteria

  • Text input works with cursor display
  • History navigation works
  • Agent cycling works
  • All keyboard shortcuts functional
  • Prompt updates when agent changes

Estimated Effort

1.5 days

Risk

Low - ink-text-input handles most complexity

Dependencies

Originally created by @randomm on GitHub (Feb 2, 2026). Originally assigned to: @thdxr on GitHub. ## Parent Epic Part of #11762 (Ink-based TUI Rewrite) ## Objective Create text input handling using Ink's `useInput` hook, supporting line editing, history, and keyboard shortcuts. ## Current Implementation The existing `input.ts` (128 lines) provides LineEditor with: - Basic text editing (insert, delete, cursor movement) - Command history (up/down arrows) - Line submission (Enter) ## Approach Options ### Option A: Use ink-text-input ```tsx import TextInput from 'ink-text-input' const InputLine = () => { const [value, setValue] = useState('') return <TextInput value={value} onChange={setValue} onSubmit={handleSubmit} /> } ``` ### Option B: Custom implementation with useInput ```tsx import { useInput } from 'ink' const InputLine = () => { const [value, setValue] = useState('') const [cursor, setCursor] = useState(0) useInput((input, key) => { if (key.return) handleSubmit(value) else if (key.backspace) handleBackspace() else if (key.leftArrow) moveCursor(-1) else if (key.rightArrow) moveCursor(1) else if (key.upArrow) historyPrev() else if (key.downArrow) historyNext() else if (input) insertChar(input) }) return <Text>{prompt}{value}</Text> } ``` **Recommendation:** Start with ink-text-input, customize if needed. ## Tasks - [ ] Create `src/cli/ink/components/InputLine.tsx` - [ ] Implement prompt display: `agent-name ❯ ` - [ ] Implement text input with cursor - [ ] Implement command history (up/down arrows) - [ ] Implement agent cycling (Shift+Tab) - [ ] Implement cancel (Escape during streaming) - [ ] Implement exit (Ctrl+C) - [ ] Handle multi-line input (if needed) ## Keyboard Shortcuts | Key | Action | |-----|--------| | Enter | Submit input | | Up/Down | Command history | | Left/Right | Move cursor | | Shift+Tab | Cycle agents | | Ctrl+C | Exit | | Escape | Cancel current operation | | Ctrl+T | Toggle task list (if implemented) | ## Acceptance Criteria - [ ] Text input works with cursor display - [ ] History navigation works - [ ] Agent cycling works - [ ] All keyboard shortcuts functional - [ ] Prompt updates when agent changes ## Estimated Effort 1.5 days ## Risk Low - ink-text-input handles most complexity ## Dependencies - #11763 (Setup Ink dependencies) - #11764 (App component)
yindo added the opentui label 2026-02-16 18:09:40 -05:00
yindo closed this issue 2026-02-16 18:09:40 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
acp
bad
bug
discussion
docs
documentation
enhancement
extension
good first issue
growth
help-wanted
mcp
model-problem
needs:compliance
nix
opentui
perf
pull-request
Mirrored from GitHub Pull Request
 tui
web
windows
zen
No Label opentui
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#8313
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?