Skip to content

Commit 3c4a443

Browse files
koki-developclaude
andcommitted
docs: Update CLAUDE.md to reflect InputField refactoring
- Remove ink-text-input from technology stack - Document comprehensive keybindings for custom InputField - Add note about Ink's backspace/delete key quirk - Update message styling details with new cat prefix "⏺" - Clarify multi-line support for both user and cat messages 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 0cfa2f4 commit 3c4a443

File tree

1 file changed

+12
-6
lines changed

1 file changed

+12
-6
lines changed

CLAUDE.md

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ This is a terminal-based chat UI CLI tool that simulates a conversation with a c
2121
- **Chat Application** (`src/App.tsx`): Main state management component for messages and loading state
2222
- **UI Components** (`src/components/`): Modular React components for terminal UI
2323
- `ChatHistory.tsx`: Message list rendering using Ink's Static component
24-
- `MessageItem.tsx`: Individual message display component with multi-line indent support
25-
- `InputField.tsx`: Text input with prompt styling and border
24+
- `MessageItem.tsx`: Individual message display component with multi-line indent support, user messages prefixed with "> ", cat messages with "⏺"
25+
- `InputField.tsx`: Custom text input with advanced terminal-style keybindings using `useInput` hook
2626
- `Spinner.tsx`: Loading indicator during cat responses
2727
- `types.ts`: Shared TypeScript interfaces
2828
- **Business Logic** (`src/lib/`): Core functionality and utilities
@@ -33,20 +33,26 @@ This is a terminal-based chat UI CLI tool that simulates a conversation with a c
3333
### Technology Stack
3434
- **Runtime**: Bun (primary development runtime)
3535
- **CLI Framework**: Commander.js for argument parsing
36-
- **Terminal UI**: Ink (React for CLIs) with community components:
37-
- `ink-text-input` for user input
36+
- **Terminal UI**: Ink (React for CLIs) with built-in hooks
3837
- `ink-spinner` for loading states
3938
- **Build Tool**: Custom Bun build script that creates executable CLI binary
4039
- **Linting/Formatting**: Biome (replaces ESLint + Prettier)
4140
- **Package Manager**: Bun with lockfile management
4241

42+
### InputField Keybindings
43+
The custom InputField component supports comprehensive terminal-style keybindings:
44+
- **Cursor Movement**: Arrow keys, Ctrl+b/f (left/right), Ctrl+n/p (up/down), Ctrl+a/e (home/end)
45+
- **Text Editing**: Backspace/Delete (delete before cursor), Ctrl+d (delete at cursor), Ctrl+w (delete word), Ctrl+u (delete to line start), Ctrl+k (delete to line end), Ctrl+l (clear input)
46+
- **Multi-line Support**: Full cursor navigation and editing across multiple lines
47+
- **Ink Quirk**: Both `key.backspace` and `key.delete` events represent the physical backspace key
48+
4349
### Chat UI Design Patterns
4450
- **Message Persistence**: Uses Ink's `<Static>` component to render chat history that doesn't re-render
4551
- **Loading States**: Displays cyan spinner with "Thinking..." during cat response delay
4652
- **Input Management**: Disables cursor and prevents duplicate submissions during loading
4753
- **Cat Behavior**: Cat class provides async responses with "ニャー" after 500ms delay
48-
- **Message Styling**: User messages prefixed with "> " in gray, cat messages in cyan with left padding
49-
- **Multi-line Support**: User messages use indent utility for proper 2+ line formatting
54+
- **Message Styling**: User messages prefixed with "> " in gray, cat messages prefixed with "⏺ " in cyan
55+
- **Multi-line Support**: Both user and cat messages use indent utility for proper 2+ line formatting
5056

5157
### Build Process
5258
The build process creates a standalone executable CLI tool:

0 commit comments

Comments
 (0)