Skip to content

feat: replace input panel with ink-text-input component#592

Merged
avoidwork merged 4 commits into
mainfrom
feat/replace-input-panel-ink-text-input
Jul 21, 2026
Merged

feat: replace input panel with ink-text-input component#592
avoidwork merged 4 commits into
mainfrom
feat/replace-input-panel-ink-text-input

Conversation

@avoidwork

@avoidwork avoidwork commented Jul 21, 2026

Copy link
Copy Markdown
Owner

What

Replace the current custom InputPanel component with ink-text-input to gain built-in keyboard handling, cursor navigation, focus management, and multi-line support without manual implementation.

Changes

  • src/tui/inputPanel.js — Replaced Blink component with ink-text-input wrapper. New API: value, onChange, onSubmit, onFocus, onBlur, focus props
  • src/tui/app.js — Updated InputPanel usage to use new API. Input state now managed by ink-text-input component via onChange callback
  • tests/unit/tui.test.js — Replaced Blink tests with InputPanel tests
  • package.json — Added ink-text-input@^6.0.0 dependency

Why

The current InputPanel is purely presentational — all input handling lives in App's single useInput hook (~75 lines). This approach works but requires manual implementation of every keyboard feature.

Three specific gaps:

  • Better UX — cursor movement, word deletion (Ctrl+W), line clearing (Ctrl+U), text selection are not implemented
  • Less code in App — input logic is scattered across the App component and should be encapsulated
  • Multi-line input — the current approach would need more work; ink-text-input handles this natively

OpenSpec

Change: replace-input-panel-ink-text-input

  • Proposal: openspec/changes/replace-input-panel-ink-text-input/proposal.md
  • Design: openspec/changes/replace-input-panel-ink-text-input/design.md
  • Tasks: openspec/changes/replace-input-panel-ink-text-input/tasks.md
  • Specs: specs/input-cursor/spec.md, specs/tui-interface/spec.md

Testing

  • Unit tests pass (1043 tests)
  • Lint passes (oxlint + oxfmt)
  • Coverage maintained
  • Application starts without crashing

Fixes #591

- Replace Blink component with ink-text-input wrapper in inputPanel.js
- Update App component to use new InputPanel API (value, onChange, onSubmit, onFocus, onBlur)
- Remove cursorChar and cursorColor props (handled by ink-text-input)
- Update tests to test InputPanel instead of Blink
- Add ink-text-input dependency to package.json
@avoidwork

Copy link
Copy Markdown
Owner Author

Audit Results: Issue #591 → PR #592

Goal Fulfillment

  • Replace InputPanel with ink-text-input — Done. Blink component removed, replaced with ink-text-input wrapper
  • Add ink-text-input dependency — Done. Added ink-text-input@^6.0.0 to package.json
  • Move input handling from App's useInput hook — Done. Input state now managed by component via onChange callback
  • Wire callbacks back to App — Done. onSubmithandleSubmit, onChangesetInputText, onFocus/onBlursetInputFocused
  • Preserve history navigation — Done. Up/down arrow handling kept in App's useInput hook
  • Preserve onboarding input flow — Done. Separate useInput path for onboarding unchanged
  • Preserve streaming state awareness — Done. No changes to streaming/interrupt handling

Spec Compliance

  • input-cursor spec: Modified — cursor rendering now delegated to ink-text-input. All scenarios still valid.
  • tui-interface spec: Modified — keyboard navigation updated to reflect ink-text-input's built-in handling. Tab key handling for focus toggle preserved in App.

Task Completion

All 14 tasks in tasks.md completed:

  • Setup: dependency added and installed
  • Component replacement: Blink removed, ink-text-input wrapper created with proper API
  • App updates: InputPanel usage updated, useInput hook simplified
  • Tests: Blink tests replaced with InputPanel tests
  • Verification: All 1043 tests pass, lint passes, app starts cleanly

Quality Check

  • No obvious issues found
  • Code follows existing patterns (React.createElement, JSDoc comments)
  • No hardcoded secrets or credentials
  • No breaking changes to public APIs (InputPanel props changed but this is internal)
  • Tests updated to match new component API

Deviations from Plan

  • None. Implementation matches the proposal and design documents exactly.

- Archive OpenSpec change to openspec/changes/archive/2026-07-21-replace-input-panel-ink-text-input/
- Update input-cursor spec with MODIFIED requirements
- Update tui-interface spec with MODIFIED requirements
- docs/TUI_FLOWS.md: Update Input Panel flow diagram to show ink-text-input
- docs/OVERVIEW.md: Change inputPanel.js description to reference ink-text-input
- src/tui/components.js: Remove Blink export (component no longer exists)
@avoidwork
avoidwork merged commit ca05dd9 into main Jul 21, 2026
2 checks passed
@avoidwork
avoidwork deleted the feat/replace-input-panel-ink-text-input branch July 21, 2026 01:24
@avoidwork avoidwork mentioned this pull request Jul 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: replace input panel with ink-text-input component

1 participant