JSVim - AI-Powered Vim-Style Terminal Editor 🚀

A modern, feature-rich terminal-based text editor inspired by Vim, enhanced with AI-powered code completion and generation capabilities using the Groq API.

✨ Features

🎯 Core Editor Features

Vim-inspired Interface - Familiar modal editing (Normal, Insert, Command modes)
Syntax Highlighting - Support for JavaScript, TypeScript, Python, C++, HTML, CSS, JSON, and more
Multiple Color Themes - Dracula, Neon, Ocean, and Sunset themes
Line Numbers - Absolute and relative line numbering
Live Cursor - Blinking cursor with smooth navigation
File Operations - Save, load, and manage files efficiently

🤖 AI-Powered Features

Intelligent Code Completion - Context-aware suggestions using Groq API
Natural Language Code Generation - Generate code from plain English descriptions
Code Extension - Extend existing code with new functionality
Feature Implementation - Implement specific features on command
Beautiful Animations - Visual feedback during AI operations
Clean Output - Advanced sanitization removes HTML, ANSI, and markdown artifacts

🎨 Visual Features

Real-time Syntax Highlighting - Enhanced highlighting with multiple language support
Animated Welcome Screen - Stylish startup animations
Status Line - Shows current mode, file info, cursor position, and AI status
Smooth Animations - Code generation progress with emojis and live previews
Responsive UI - Adapts to terminal size changes

🚀 Quick Start

Prerequisites

Node.js v16 or higher
Terminal with 256-color support
Groq API key (for AI features)

Installation

Clone the repository:

git clone <repository-url>
cd cli-opensource-agent

Install dependencies:
```
npm install
```

Set up AI features (optional but recommended):

cp .env.example .env
# Edit .env and add your Groq API key

Start editing:

npm start
# or
node bin/jsvim.js [filename]

⌨️ Keyboard Shortcuts

🔄 Mode Switching

Key	Action	Description
`i`	Enter Insert Mode	Start typing/editing text
`Esc`	Enter Normal Mode	Navigate and execute commands
`:`	Enter Command Mode	Execute editor commands

🧭 Navigation (Normal Mode)

Key	Action	Description
`h` / `←`	Move Left	Move cursor one character left
`j` / `↓`	Move Down	Move cursor one line down
`k` / `↑`	Move Up	Move cursor one line up
`l` / `→`	Move Right	Move cursor one character right

✏️ Editing (Insert Mode)

Key	Action	Description
`Tab`	AI Completion	Trigger AI code completion
`Enter`	New Line	Insert a new line
`Backspace`	Delete Character	Delete character before cursor
`←` `→` `↑` `↓`	Navigate	Move cursor while in insert mode

🎨 Themes & Settings

Shortcut	Action	Description
`Ctrl+T`	Cycle Theme	Switch between color themes
`Ctrl+C`	Quit	Exit the editor (with confirmation)

💻 Command Mode Reference

📁 File Operations

Command	Description	Example
`:w`	Save current file	`:w`
`:q`	Quit editor	`:q`
`:wq`	Save and quit	`:wq`
`:q!`	Force quit without saving	`:q!`

⚙️ Settings Commands

Command	Description	Example
`:set number`	Enable line numbers	`:set number`
`:set nonumber`	Disable line numbers	`:set nonumber`
`:set relativenumber`	Enable relative line numbers	`:set rnu`
`:set norelativenumber`	Disable relative line numbers	`:set nornu`
`:set syntax`	Enable syntax highlighting	`:set syntax`
`:set nosyntax`	Disable syntax highlighting	`:set nosyntax`
`:set`	Show current settings	`:set`

🎨 Theme Commands

Command	Description	Available Themes
`:themes`	List all themes	Shows all available themes
`:colorscheme <theme>`	Change theme	`dracula`, `neon`, `ocean`, `sunset`
`:cs <theme>`	Change theme (short)	`:cs neon`

🤖 AI Commands

Command	Description	Example
`:ai`	Show AI status	`:ai`
`:toggleAI`	Toggle AI on/off	`:toggleAI`
`:aimodel <model>`	Change AI model	`:aimodel llama3-70b-8192`

🧠 AI Code Generation

Command	Description	Example
`:generate <instruction>`	Generate new code	`:generate create a function to calculate fibonacci numbers`
`:gen <instruction>`	Generate code (short)	`:gen add a REST API endpoint for user login`
`:extend <instruction>`	Extend existing code	`:extend add error handling to this function`
`:implement <instruction>`	Implement feature	`:implement user authentication with JWT tokens`

📖 Help Commands

Command	Description
`:help`	Show detailed help
`:h`	Show help (short)

🤖 AI Features Deep Dive

Code Completion

Trigger: Press Tab in insert mode
Context-Aware: Analyzes surrounding code for intelligent suggestions
Multiple Languages: Works with JavaScript, Python, C++, and more
Clean Output: Automatically sanitizes AI responses

Natural Language Code Generation

Transform plain English into working code:

:generate create a function that sorts an array of objects by a specific property
:extend add input validation and error handling
:implement a caching mechanism for expensive operations

AI Models Available

llama3-8b-8192 (default)
llama3-70b-8192
llama-3.1-8b-instant
llama-3.1-70b-versatile
gemma-7b-it
gemma2-9b-it

🎨 Available Themes

Dracula (Default)

Dark purple background
Vibrant syntax colors
Easy on the eyes

Neon

Electric cyan and magenta
High contrast
Futuristic feel

Ocean

Blue and teal tones
Calming colors
Professional look

Sunset

Warm oranges and reds
Cozy atmosphere
Creative inspiration

📦 Dependencies

Core Dependencies

Package	Version	Purpose
`blessed`	^0.1.81	Terminal UI framework
`chalk`	^4.1.2	Terminal text styling
`highlight.js`	^11.11.1	Syntax highlighting engine
`node-fetch`	^2.7.0	HTTP requests for AI API
`dotenv`	^16.4.5	Environment variable management

Visual Enhancement

Package	Version	Purpose
`chalk-animation`	^2.0.3	Animated text effects
`figlet`	^1.8.1	ASCII art text
`gradient-string`	^3.0.0	Gradient text effects
`nanospinner`	^1.2.2	Loading spinners
`ora`	^8.2.0	Terminal spinners

Utilities

Package	Version	Purpose
`fs-extra`	^11.1.1	Enhanced file system operations
`yargs`	^17.7.2	Command line argument parsing
`cardinal`	^2.1.1	JavaScript syntax highlighting

🔧 Configuration

Environment Variables

Create a .env file in the project root:

# Groq API Configuration
GROQ_API_KEY=your_groq_api_key_here

# AI Settings (optional)
AI_MODEL=llama3-8b-8192
AI_ENABLED=true

Getting a Groq API Key

Visit Groq Console
Sign up for a free account
Generate an API key
Add it to your .env file

🎯 Usage Examples

Basic Editing Session

# Start with a new file
npm start newfile.js

# Or open existing file
npm start existing-file.py

AI-Powered Development Workflow

Start Editor: npm start app.js
Enable AI: Ensure API key is configured
Code with AI: Use Tab for completions
Generate Code: :gen create a REST API server
Extend Code: :extend add authentication middleware
Save & Exit: :wq

Theme Customization

:themes              # List all themes
:cs neon            # Switch to neon theme
:set relativenumber # Enable relative line numbers

🚀 Advanced Features

Syntax Highlighting Support

JavaScript/TypeScript - Full ES6+ support
Python - Python 3.x syntax
C/C++ - Modern C++ standards
HTML/CSS - Web development
JSON - Configuration files
Markdown - Documentation
SQL - Database queries
Shell Scripts - Bash/PowerShell

AI Completion Intelligence

Context Analysis - Understands function scope and variables
Language Detection - Adapts to current file type
Error Prevention - Suggests syntactically correct code
Best Practices - Follows coding conventions

Animation System

Welcome Screen - Animated startup with file info
Code Generation - Live progress with emojis
Success/Error States - Visual feedback
Smooth Transitions - Polished user experience

🔍 Troubleshooting

Common Issues

AI Features Not Working

Ensure GROQ_API_KEY is set in .env
Check internet connection
Verify API key is valid
Try :toggleAI to restart AI service

Syntax Highlighting Issues

File extension must be recognized
Use :set syntax to enable highlighting
Restart editor if colors don't appear

Performance Issues

Large files may be slower
Disable AI completion for better performance
Use :set nosyntax for very large files

Getting Help

Use :help in the editor for quick reference
Check the console for error messages
Ensure all dependencies are installed

📈 Performance Tips

For Large Files

Disable relative line numbers: :set nornu
Turn off syntax highlighting: :set nosyntax
Disable AI features if not needed

For Better AI Performance

Keep context concise and relevant
Use specific, clear instructions for code generation
Let AI complete before requesting new suggestions

🤝 Contributing

We welcome contributions! Please feel free to:

Report bugs
Suggest new features
Submit pull requests
Improve documentation

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

🙏 Acknowledgments

Vim - For the inspiration and editing paradigm
Groq - For providing the AI API
Blessed - For the excellent terminal UI framework
Highlight.js - For syntax highlighting capabilities

Happy Coding with JSVim! 🚀✨

Made with ❤️ for developers who love terminal-based tools and AI-assisted coding.

AI Autocompletion Setup

To enable AI-powered code autocompletion:

Get a free API key from Groq Console
Copy the .env.example file to .env:
```
cp .env.example .env
```
Edit .env and add your Groq API key:
```
GROQ_API_KEY=your_actual_api_key_here
```

Usage

# Open a file (creates it if doesn't exist)
jsvim filename.txt

# Open untitled buffer
jsvim

Key Bindings

Normal Mode

i - Enter Insert mode
: - Enter Command mode
j / Down Arrow - Move cursor down
k / Up Arrow - Move cursor up
h / Left Arrow - Move cursor left
l / Right Arrow - Move cursor right
Ctrl+t - Cycle through available themes
Ctrl+c - Quit

Insert Mode

Esc - Return to Normal mode
Tab - AI code autocompletion (when API key is configured)
- If AI preview is visible (grayed out text), Tab accepts the suggestion
- If no preview, Tab triggers new AI completion request
Arrow keys - Navigate through text
Enter - Insert new line
Backspace - Delete character before cursor
AI Preview: Suggestions appear as grayed-out text after typing. Press Tab to accept or continue typing to dismiss.

Command Mode

:w - Write (save) file
:q - Quit (won't quit if there are unsaved changes)
:wq - Write and quit
:q! - Force quit without saving
:set relativenumber / :set nornu - Enable/disable relative line numbers
:set number / :set nonu - Enable/disable line numbers
:set syntax / :set nosyntax - Enable/disable syntax highlighting
:help or :h - Show help information
:set - Show current settings
:cs <theme> or :colorscheme <theme> - Change color scheme (dracula, nord, tokyo-night, one-dark, solarized)
:themes - List all available themes
:toggleAI - Toggle AI autocompletion on/off
:ai - Show AI service status and configuration
:aimodel <model> - Change AI model (llama3-8b-8192, llama3-70b-8192, etc.)

Using Command Mode and Changing Themes

Entering Command Mode

Make sure you're in Normal mode (press Esc if you're not sure)
Press the colon key (:) to enter Command mode
Type your command (you should see it displayed in the status bar at the bottom)
Press Enter to execute the command
Press Esc at any time to cancel and return to Normal mode

Changing Editor Theme

You can change the theme using either:

Command Mode: Enter command mode with : and type cs <theme-name> or colorscheme <theme-name> and press Enter. Example: :cs dracula
Keyboard Shortcut: Press Ctrl+t in normal mode to quickly cycle through all available themes.

Available themes:

dracula
nord
tokyo-night
one-dark
solarized

AI-Powered Code Autocompletion

JSVim now includes intelligent code autocompletion powered by Groq's large language models.

Features

Context-aware suggestions: Analyzes up to 50 lines or 800 characters before the cursor for optimal performance
Intelligent preview mode: Shows suggestions as faded gray ghost text inline before accepting
Multi-language support: Works with any programming language
Smart caching: Caches recent completions for faster responses
Multiple models: Support for LLaMA3 and other Groq models
Graceful error handling: Handles rate limits, timeouts, and network issues
Debounced requests: 300ms delay prevents excessive API calls while maintaining responsiveness
Enhanced cursor feedback:
- Insert mode: Blinking vertical bar (|) cursor
- Normal mode: Steady block (█) cursor
- Visual synchronization between cursor and buffer content
Auto-scroll: Cursor remains visible when scrolling through files

Usage

Setup: Configure your Groq API key in the .env file
Ghost Text Autocompletion: In Insert mode, AI suggestions appear automatically as clearly visible dim gray text after a 300ms typing pause
Accept Suggestions: Press Tab to accept grayed-out AI suggestions
Continue Typing: Keep typing to dismiss current suggestion and trigger new ones
Manual Trigger: Press Tab when no preview is visible to request new suggestions
Toggle: Use :toggleAI to enable/disable the feature
Status: Use :ai to check configuration and status
Models: Use :aimodel <model-name> to switch between models

Supported Models

llama3-8b-8192 (default) - Fast and efficient for code completion
llama3-70b-8192 - Most capable but slower
llama-3.1-8b-instant - Latest Llama 3.1 model, very fast
llama-3.1-70b-versatile - Latest large model, most capable
gemma-7b-it - Good balance of speed and quality
gemma2-9b-it - Improved Gemma model

Status Messages

[AI] Suggestion ready (Tab to accept, type to dismiss) - Preview suggestion available
[AI] Suggestion applied - Completion successfully inserted
[AI] Fetching suggestion... - Request in progress
[AI] Failed to fetch completion - Generic error
[AI] Request timeout - API timeout (try again)
[AI] Rate limit exceeded - Too many requests
[AI] Check API key configuration - Authentication issue

Recent Improvements

� Fixed Character Rendering Issues:
- Resolved problems with HTML tags, ANSI color codes, and special Unicode characters appearing in AI suggestions
- Implemented comprehensive suggestion sanitization to ensure plain text only
- Fixed ghost text visibility conflicts with syntax highlighting
�🔄 Enhanced Cursor Management: Fixed cursor placement issues and improved synchronization between cursor position and buffer content
👁️ Mode-Specific Cursor Styling:
- Insert mode: Blinking vertical bar cursor (|) for clear input indication
- Normal mode: Steady block cursor (█) for navigation feedback
- Command mode: Hidden cursor during command entry
🤖 Intelligent AI Autocompletion:
- Fixed Ghost Text Visibility: AI suggestions now appear as clearly visible dim gray text
- Improved Rendering Pipeline: Ghost text is inserted before syntax highlighting to prevent conflicts
- Debounced Requests: 300ms delay prevents excessive API calls while maintaining responsiveness
- Smart Context: Improved context analysis for more relevant suggestions
- Enhanced Cleanup: Better suggestion formatting with comprehensive sanitization
- Automatic Triggers: Suggestions appear naturally as you type with proper dismissal on ESC/cursor movement
⚡ Performance Optimizations:
- Faster AI response times with reduced timeouts (8s vs 15s)
- Optimized context window (800 chars vs 1000 chars)
- Improved caching and suggestion relevance
🎯 Better UX:
- Immediate preview clearing when typing continues
- More intuitive Tab acceptance behavior
- Enhanced status messages and visual feedback
- Seamless typing flow without interference
Enhanced Character Display: Fixed issues with special characters like quotes (") and other symbols to ensure they display correctly
Improved File Saving: Added more reliable file saving functionality, ensuring directories exist before saving
Theme Cycling Shortcut: Added Ctrl+t shortcut to quickly cycle through available themes

Syntax Highlighting

JSVim supports comprehensive syntax highlighting for 30+ programming languages, including:

JavaScript/TypeScript/JSX/TSX
Python
C/C++
Java
HTML/CSS/SCSS/LESS
Ruby
Go
Rust
PHP
Shell scripts (Bash, Zsh)
Markdown
JSON/YAML/TOML
SQL
and many more!

Language Detection

JSVim automatically detects languages based on:

File extension (.js, .py, .cpp, etc.)
File content (shebang lines, language-specific patterns)
Filenames (like Dockerfile, .bashrc)

Color Themes

Available color themes:

dracula - Dark theme with vibrant colors (default)
nord - Cool blue-based color scheme
tokyo-night - Dark theme inspired by Tokyo at night
one-dark - Atom-inspired dark theme
solarized - Classic solarized dark theme

Change the theme with:

:cs theme-name

:colorscheme theme-name

Performance Optimizations

For large files, JSVim uses optimized highlighting to maintain editor responsiveness.

Dependencies

blessed - Terminal UI library
chalk - Terminal string styling
chalk-animation - Terminal animation effects
dotenv - Environment variable loading
gradient-string - Beautiful color gradients in terminal
figlet - ASCII art text generation
nanospinner - Terminal spinners
node-fetch - HTTP client for API requests
yargs - Command-line argument parsing
fs-extra - Extended filesystem methods
highlight.js - Syntax highlighting for multiple languages
cardinal - Additional syntax highlighting capabilities

License

MIT

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Future Enhancements

Multiple AI completion suggestions (like GitHub Copilot)
AI-powered code refactoring and optimization suggestions
Integration with more LLM providers (OpenAI, Anthropic, etc.)
Search and replace functionality
Visual selection mode
Undo/redo functionality
Split view editing
Plugin system

jsvim-ai

JSVim - AI-Powered Vim-Style Terminal Editor 🚀

✨ Features

🎯 Core Editor Features

🤖 AI-Powered Features

🎨 Visual Features

🚀 Quick Start

Prerequisites

Installation

⌨️ Keyboard Shortcuts

🔄 Mode Switching

🧭 Navigation (Normal Mode)

✏️ Editing (Insert Mode)

🎨 Themes & Settings

💻 Command Mode Reference

📁 File Operations

⚙️ Settings Commands

🎨 Theme Commands

🤖 AI Commands

🧠 AI Code Generation

📖 Help Commands

🤖 AI Features Deep Dive

Code Completion

Natural Language Code Generation

AI Models Available

🎨 Available Themes

Dracula (Default)

Neon

Ocean

Sunset

📦 Dependencies

Core Dependencies

Visual Enhancement

Utilities

🔧 Configuration

Environment Variables

Getting a Groq API Key

🎯 Usage Examples

Basic Editing Session

AI-Powered Development Workflow

Theme Customization

🚀 Advanced Features

Syntax Highlighting Support

AI Completion Intelligence

Animation System

🔍 Troubleshooting

Common Issues

AI Features Not Working

Syntax Highlighting Issues

Performance Issues

Getting Help

📈 Performance Tips

For Large Files

For Better AI Performance

🤝 Contributing

📄 License

🙏 Acknowledgments

AI Autocompletion Setup

Usage

Key Bindings

Normal Mode

Insert Mode

Command Mode

Using Command Mode and Changing Themes

Entering Command Mode

Changing Editor Theme

AI-Powered Code Autocompletion

Features

Usage

Supported Models

Status Messages

Recent Improvements

Syntax Highlighting

Language Detection

Color Themes

Performance Optimizations

Dependencies

License

Contributing

Future Enhancements

Weekly Downloads