AI Feedback Extension for VSCode
A comprehensive VSCode extension for managing code feedback and generating AI-optimized prompts. Features sophisticated feedback management with tree views, WebView panels, visual decorations, and intelligent prompt generation for enhanced AI-assisted development workflows.
🚀 Features
Comprehensive Feedback Management
- Structured Feedback Items: Create feedback with types, priorities, status tracking, and relationships
- Tree View Navigation: Hierarchical organization with grouping by file, type, priority, or status
- WebView Sidebar Panels: Interactive management interface with search, filtering, and bulk operations
- Visual Editor Decorations: 6 configurable decoration styles with type-based color coding
- Status Bar Integration: Real-time workspace statistics with progress tracking
Intelligent AI Prompt Generation
- Multiple Output Formats: Generate prompts in Markdown, JSON, or XML formats
- Flexible Output Options: Copy to clipboard, save to file, or open in new document
- Intelligent Type Detection: Automatically categorize feedback intent (refactor, debug, optimize, etc.)
- Template-Based Generation: Specialized prompts with context-aware formatting
- Interactive Selection: Choose specific feedback items for targeted AI assistance
Advanced Integration
- Comment Detection: Automatically discover and adopt TODO/FIXME comments
- Hover Providers: Rich inline information with action buttons
- Code Actions: Lightbulb integration for quick feedback operations
- Configuration Sync: Real-time synchronization between UI and VSCode settings
- Theme Integration: Fully adapts to VSCode color themes and UI conventions
🛠️ Installation
Development Setup (Current Status)
This extension is currently in active development. To use it:
Clone the repository
git clone https://github.com/dkmaker/review-extension
cd aifeedback-extension
Install dependencies
pnpm install
Compile the extension
pnpm run compile
Launch in development mode
- Open the project in VSCode
- Press
F5
to launch Extension Development Host
- Test the extension in the new VSCode window
VS Code Marketplace
Extension will be available on the marketplace after development completion
📖 Quick Start
1. Create Your First Feedback Item
- Select code in any file you want to get AI assistance with
- Right-click and choose "Add AI Feedback"
- Fill in the feedback form:
- User Request: Describe what you want done with the code
- Type: Will be auto-detected (refactor, debug, optimize, etc.)
- Priority: Choose high, medium, or low
- Save - Your feedback appears in the sidebar tree view
2. Generate AI Prompts
- Open Prompt Generator in the sidebar
- Select output format: Markdown (default), JSON, or XML
- Choose output destination: Clipboard, file, or new document
- Generate: Create comprehensive AI prompts from your feedback items
3. Organize and Manage
- Tree View: Browse feedback by file, type, priority, or status
- Visual Decorations: See feedback locations highlighted in your editor
- Status Tracking: Mark items as in-progress or completed
- Bulk Operations: Manage multiple feedback items at once
🎯 Core Workflows
Feedback Types and Auto-Detection
The extension automatically detects your intent and categorizes feedback:
Type |
Icon |
Auto-detected from keywords |
Use Case |
🔧 Refactor |
refactor, clean, restructure |
Code cleanup and reorganization |
|
🐛 Debug |
bug, fix, error, issue |
Bug fixes and error resolution |
|
⚡ Optimize |
optimize, performance, speed |
Performance improvements |
|
📈 Expand |
add, feature, implement |
New feature development |
|
🔍 Research |
understand, analyze, research |
Code investigation |
|
🧪 Testing |
test, coverage, spec |
Test implementation |
|
📝 Documentation |
document, comment, explain |
Documentation creation |
|
👁️ Review |
review, check, audit |
Code review tasks |
|
💡 General |
general, misc, other |
Fallback category |
|
Visual Decoration Styles
Configure how feedback appears in your editor:
- Minimal (default): Gutter icon + subtle background
- Gutter: Icons only in editor gutter
- Background: Background highlighting only
- Border: Colored borders around feedback areas
- All: Complete decoration package
- None: No visual decorations
Prompt Generation Workflow
- Interactive Builder: Use the WebView prompt generator for guided creation
- Quick Generation: Generate from current selection with
Ctrl+Alt+C
- Bulk Processing: Create comprehensive prompts from all workspace feedback
- Format Selection: Choose output format based on your AI tool requirements
⚙️ Configuration
The extension provides extensive configuration options organized into categories:
Quick Configuration Example
{
"aiFeedback.prompt.outputFormat": "markdown",
"aiFeedback.prompt.outputAction": "clipboard",
"aiFeedback.ui.decorationStyle": "minimal",
"aiFeedback.detection.autoScanOnOpen": true
}
📖 Complete Configuration Guide →
Key Configuration Areas:
- General Settings: Notifications and basic behavior
- Prompt Generation: Output formats, intelligent types, length limits
- Content Options: File context, project names, line numbers, git info
- UI Preferences: Decorations, animations, sidebar width
- Comment Detection: TODO/FIXME scanning and adoption
🔧 Commands and Integration
Keyboard Shortcuts (Default)
Ctrl+Alt+C
(Cmd+Alt+C
on Mac): Add AI Feedback
Ctrl+Alt+F
(Cmd+Alt+F
on Mac): Open Feedback Panel
Ctrl+Shift+C
: Copy Code Reference
Command Palette
Access all 20+ commands via Ctrl+Shift+P
:
AI Feedback: Add AI Feedback
AI Feedback: Generate Prompt (Interactive)
AI Feedback: Import TODO/FIXME Comments
AI Feedback: Change Tree Grouping
- ... and many more
📖 Complete Integration Guide →
📝 Usage Examples
Example 1: Refactoring Request
// Select this function and add feedback
function calculateTotal(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}
Feedback: "Add input validation and error handling"
Auto-detected Type: 🔧 Refactor
// Large data processing - needs optimization
const results = data.map(item => {
return processComplexOperation(item);
});
Feedback: "Optimize for large datasets with parallel processing"
Auto-detected Type: ⚡ Optimize
Generated Prompt Example (Markdown)
# AI Feedback Request
**Workspace:** my-project
**Files:** 2
**Total Feedback Items:** 3
## File: src/utils.ts
### 🔧 Refactor Request (High Priority)
**Location:** Lines 15-18
**Context:**
```typescript
function calculateTotal(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}
User Request: Add input validation and error handling
File: src/processor.js
⚡ Optimize Request (Medium Priority)
Location: Lines 45-50
Context:
const results = data.map(item => {
return processComplexOperation(item);
});
User Request: Optimize for large datasets with parallel processing
Please address all feedback items above, providing complete solutions with explanations.
## 🎛️ UI Components
### Sidebar Integration
- **Activity Bar**: Custom container with extension logo
- **Tree View**: Hierarchical feedback organization with grouping modes
- **WebView Panels**: Interactive management and prompt generation interfaces
### Editor Integration
- **Visual Decorations**: Color-coded feedback highlighting
- **Hover Providers**: Rich inline information with action buttons
- **Code Actions**: Lightbulb suggestions for feedback operations
- **Context Menus**: Right-click integration for quick access
### Status Bar
- **Real-time Statistics**: Active feedback count and progress
- **Priority Alerts**: Visual indicators for high-priority items
- **Quick Access**: Click to open main feedback panel
## 🚧 Development Status
**Current Phase**: Active Development
### ✅ Completed Features
- Complete feedback management system with types, priorities, and status
- Tree view navigation with multiple grouping modes
- WebView sidebar panels with interactive UI
- Visual decoration system with 6 configurable styles
- Intelligent prompt generation with multiple output formats
- Comment detection and adoption system
- Comprehensive configuration with grouped settings
- Full VSCode integration (commands, menus, keybindings)
### 🔄 In Progress
- Documentation finalization and alignment
- Performance optimization for large workspaces
- Additional prompt templates and AI service integrations
### 📋 Planned Features
- Export/import functionality for feedback data
- Team collaboration features
- Integration with external AI services
- Advanced analytics and reporting
## 🛠️ Development Commands
```bash
# Development workflow
pnpm run compile # TypeScript compilation
pnpm run watch # Development mode with auto-compilation
pnpm run lint # Biome linting
pnpm run format # Code formatting
# Testing
pnpm run test # Run test suite
Development Mode: Press F5
in VSCode to launch Extension Development Host
📖 Documentation
🏗️ Architecture
Service-Oriented Design
- Services Layer: Core business logic (FeedbackManager, PromptGenerator, CommentDetection)
- UI Layer: WebView providers, tree view, decorations, hover, status bar
- Commands Layer: Centralized command handling with 20+ operations
- Models Layer: Data entities and workspace storage management
Key Integration Points
- TreeDataProvider: Hierarchical feedback navigation
- WebviewViewProvider: Custom sidebar panels
- CodeActionProvider: Lightbulb quick fixes
- HoverProvider: Rich inline feedback display
- Event System: Reactive UI updates across all components
📖 Complete Architecture Guide →
🤝 Contributing
The extension is currently in active development. Contribution guidelines will be available once the core architecture is stabilized.
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License allows you to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software. The software is provided "as is", without warranty of any kind.
AI Feedback Extension - Streamline your AI-assisted development workflow with comprehensive feedback management and intelligent prompt generation.