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:

1. Clone the repository

   git clone https://github.com/dkmaker/review-extension
   cd aifeedback-extension
   

2. Install dependencies

   pnpm install
   

3. Compile the extension

   pnpm run compile
   

4. 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

1. Select code in any file you want to get AI assistance with
2. Right-click and choose "Add AI Feedback"
3. 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
4. Save - Your feedback appears in the sidebar tree view

2. Generate AI Prompts

1. Open Prompt Generator in the sidebar
2. Select output format: Markdown (default), JSON, or XML
3. Choose output destination: Clipboard, file, or new document
4. 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:

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

1. Interactive Builder: Use the WebView prompt generator for guided creation
2. Quick Generation: Generate from current selection with Ctrl+Alt+C
3. Bulk Processing: Create comprehensive prompts from all workspace feedback
4. 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

Example 2: Performance Optimization

// 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

• User Guide - Detailed usage instructions and workflows
• Configuration Reference - All settings and options
• Integration Commands - Keyboard shortcuts and VSCode integration
• Template Engine - Prompt generation system details
• Extension Configuration - Language support and file type handling

🏗️ 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.