Skip to content

MODULE_BREAKDOWN.md

Latest commit

 

History

History
550 lines (456 loc) · 13.4 KB

MODULE_BREAKDOWN.md

File metadata and controls

550 lines (456 loc) · 13.4 KB

Module Development Breakdown

Overview

This document provides a detailed breakdown of each module in the IDE project, including specific implementation details, dependencies, and deliverables.

Module 1: Project Loader & File Explorer

Objective

Create a component that opens a folder and recursively scans all files, building a tree view structure for display in the File Explorer sidebar.

Dependencies

  • React + TypeScript
  • Node.js fs module
  • Electron APIs (for folder selection)

Components to Create

1. File System Service (src/services/fileSystem.ts)

// Core functionality needed:
- scanDirectory(path: string): Promise<FileNode>
- getFileStats(path: string): Promise<FileStats>
- watchDirectory(path: string): Promise<FileWatcher>
- searchFiles(path: string, query: string): Promise<string[]>

2. File Explorer Components

src/components/FileExplorer/
├── FileExplorer.tsx      // Main container
├── FileTree.tsx          // Tree rendering logic
├── FileNode.tsx          // Individual file/folder node
└── FileIcon.tsx          // File type icons

3. Type Definitions (src/types/file.ts)

interface FileNode {
  id: string;
  name: string;
  path: string;
  type: 'file' | 'directory';
  children?: FileNode[];
  extension?: string;
  size?: number;
  modified?: Date;
  isHidden?: boolean;
}

Implementation Steps

  1. Setup Basic React App Structure

    • Initialize React with TypeScript
    • Configure Electron
    • Create basic layout

  2. File System Service

    • Implement recursive directory scanning
    • Add file metadata extraction
    • Handle error cases (permissions, missing files)

  3. File Explorer UI

    • Create tree view component
    • Add expand/collapse functionality
    • Implement file selection
    • Add file type icons

  4. Integration

    • Connect UI to file system service
    • Add folder selection dialog
    • Handle file clicking (prepare for Module 2)

Deliverables

  • Working File Explorer sidebar
  • File system service with scanning capabilities
  • File selection handling
  • Basic layout structure

Module 2: Code Editor

Objective

Implement a multi-tab code editor using Monaco Editor with syntax highlighting for common languages.

Dependencies

  • Monaco Editor
  • Module 1 (File Explorer)
  • React state management

Components to Create

1. Editor Components

src/components/Editor/
├── Editor.tsx            // Main editor container
├── TabBar.tsx            // Tab navigation
├── MonacoEditor.tsx      // Monaco wrapper
└── LanguageDetector.tsx  // Language detection logic

2. Editor State Management

interface EditorTab {
  id: string;
  fileName: string;
  filePath: string;
  content: string;
  language: string;
  isActive: boolean;
  isDirty: boolean;
  isSaved: boolean;
}

3. Editor Configuration

interface EditorConfig {
  theme: 'vs-dark' | 'vs-light' | 'hc-black';
  fontSize: number;
  fontFamily: string;
  wordWrap: 'on' | 'off';
  minimap: { enabled: boolean };
  lineNumbers: 'on' | 'off';
  scrollBeyondLastLine: boolean;
}

Implementation Steps

  1. Monaco Editor Setup

    • Install and configure Monaco Editor
    • Create wrapper component
    • Set up TypeScript support

  2. Tab Management

    • Implement tab state management
    • Create tab bar UI
    • Add tab switching logic
    • Handle tab closing

  3. File Integration

    • Connect to File Explorer from Module 1
    • Load file content when selected
    • Detect file language automatically
    • Handle file saving

  4. Editor Features

    • Syntax highlighting for 20+ languages
    • Basic editing features
    • Search and replace
    • Go to line functionality

Deliverables

  • Multi-tab code editor
  • Language detection and syntax highlighting
  • File loading and saving
  • Tab management system

Module 3: Chat Panel / Model Interface

Objective

Implement a chat panel in the right sidebar with backend Node.js interface to connect to local LLMs.

Dependencies

  • Modules 1 & 2
  • Local LLM (Ollama/LM Studio)
  • HTTP client for API calls

Components to Create

1. Chat Components

src/components/ChatPanel/
├── ChatPanel.tsx         // Main chat container
├── MessageList.tsx       // Message display
├── InputArea.tsx         // User input
├── MessageBubble.tsx     // Individual message
└── TypingIndicator.tsx   // Loading indicator

2. LLM Interface Service (src/services/llmInterface.ts)

interface LLMConfig {
  provider: 'ollama' | 'lmstudio' | 'localai';
  endpoint: string;
  model: string;
  parameters: {
    temperature: number;
    maxTokens: number;
    topP: number;
  };
}

class LLMInterface {
  async chat(messages: ChatMessage[]): Promise<LLMResponse>;
  async analyzeCode(code: string, language: string): Promise<LLMResponse>;
  async editCode(code: string, instruction: string): Promise<LLMResponse>;
}

3. Chat Types (src/types/chat.ts)

interface ChatMessage {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  timestamp: Date;
  relatedFile?: string;
  type?: 'text' | 'code' | 'error';
}

Implementation Steps

  1. Chat UI Development

    • Create chat panel layout
    • Implement message display
    • Add input area with send functionality
    • Add typing indicators

  2. LLM Backend Integration

    • Set up local LLM connection
    • Implement API call handlers
    • Add error handling and retries
    • Support multiple model providers

  3. AI Command Processing

    • Parse user commands
    • Handle code analysis requests
    • Process file editing instructions
    • Format AI responses

  4. Integration with Editor

    • Pass current file context to AI
    • Handle AI-suggested code changes
    • Display code blocks with syntax highlighting
    • Add quick action buttons

Deliverables

  • Working chat interface
  • Local LLM integration
  • AI command processing
  • Editor context awareness

Module 4: File Management

Objective

Implement safe write system that writes changes to _new folder for review before overwriting original files.

Dependencies

  • Module 3 (AI-generated changes)
  • File system operations
  • UI components for change review

Components to Create

1. File Manager Service (src/services/fileManager.ts)

class FileManager {
  async safeWriteFile(filePath: string, content: string): Promise<WriteResult>;
  async previewChanges(filePath: string, newContent: string): Promise<FileDiff>;
  async approveChanges(filePath: string): Promise<void>;
  async rejectChanges(filePath: string): Promise<void>;
  async createBackup(filePath: string): Promise<string>;
  async restoreBackup(filePath: string, backupId: string): Promise<void>;
}

2. Change Review Components

src/components/FileManager/
├── ChangePreview.tsx      // Diff viewer
├── ApprovalDialog.tsx     // Approval modal
├── BackupManager.tsx      // Backup interface
└── FileDiff.tsx          // Diff display

3. Diff Types (src/types/diff.ts)

interface FileDiff {
  additions: DiffLine[];
  deletions: DiffLine[];
  modifications: DiffLine[];
  summary: {
    linesAdded: number;
    linesRemoved: number;
    linesModified: number;
  };
}

Implementation Steps

  1. Safe Write System

    • Create temporary _new folder structure
    • Implement file comparison logic
    • Add backup creation before changes
    • Handle conflict resolution

  2. Change Preview UI

    • Create diff viewer component
    • Show before/after comparison
    • Highlight changes clearly
    • Add approval/rejection buttons

  3. Backup Management

    • Automatic backup creation
    • Backup history tracking
    • Restore functionality
    • Backup cleanup policies

  4. Integration with AI

    • Route AI-generated changes through safe write
    • Preview AI suggestions before applying
    • Batch approval for multiple changes
    • Rollback capabilities

Deliverables

  • Safe file write system
  • Change preview and approval UI
  • Backup and restore functionality
  • Integration with AI-generated changes

Module 5: Task Queue / Multi-File Processing

Objective

Implement backend task queue for sequentially processing edits sent to LLM and handling multi-file operations.

Dependencies

  • Module 3 (LLM interface)
  • Module 4 (File management)
  • Background processing capabilities

Components to Create

1. Task Queue Service (src/services/taskQueue.ts)

interface Task {
  id: string;
  type: 'file-analysis' | 'code-edit' | 'multi-file' | 'llm-request';
  priority: number;
  status: 'pending' | 'processing' | 'completed' | 'failed';
  data: any;
  createdAt: Date;
  progress?: number;
  result?: any;
  error?: string;
}

class TaskQueue {
  addTask(task: Omit<Task, 'id' | 'createdAt'>): string;
  startProcessing(): void;
  pauseProcessing(): void;
  getTaskStatus(taskId: string): Task | null;
}

2. Task Management UI

src/components/TaskQueue/
├── TaskList.tsx           // Task display
├── TaskProgress.tsx       // Progress indicator
├── TaskControls.tsx       // Pause/resume controls
└── TaskDetails.tsx        // Task information

3. Background Processor

class TaskProcessor {
  async processTask(task: Task): Promise<TaskResult>;
  async processMultiFileOperation(files: string[], instruction: string): Promise<void>;
  async handleTaskError(task: Task, error: Error): Promise<void>;
}

Implementation Steps

  1. Task Queue Implementation

    • Create task data structures
    • Implement queue management logic
    • Add priority handling
    • Support task dependencies

  2. Background Processing

    • Set up worker threads for processing
    • Implement sequential task execution
    • Handle errors and retries
    • Manage resource allocation

  3. Multi-File Operations

    • Batch file processing
    • Progress tracking for large operations
    • Concurrent file handling with limits
    • Memory management for large projects

  4. UI Integration

    • Task progress display
    • Queue status indicators
    • User controls for task management
    • Error notifications and recovery

Deliverables

  • Task queue system
  • Background processing capabilities
  • Multi-file operation support
  • Task management UI

Module 6: Integration

Objective

Integrate all modules into a working Electron app with complete IDE interface and functionality.

Dependencies

  • All previous modules
  • Electron main process setup
  • Application packaging

Components to Create

1. Electron Main Process (electron.js)

// Main process functionality:
- Window management
- Menu creation
- File dialogs
- IPC communication
- Application lifecycle

2. App Layout (src/App.tsx)

// Main application component:
- Three-panel layout
- Module integration
- State management
- Event handling

3. Configuration Management

src/config/
├── app.ts               // App configuration
├── editor.ts            // Editor settings
├── llm.ts               // LLM configuration
└── theme.ts             // Theme settings

4. Package Configuration

{
  "name": "desktop-ide",
  "version": "1.0.0",
  "main": "electron.js",
  "scripts": {
    "dev": "concurrently \"npm run dev:renderer\" \"npm run dev:main\"",
    "build": "npm run build:renderer && npm run build:main",
    "electron:build": "electron-builder"
  }
}

Implementation Steps

  1. Electron Setup

    • Configure main process
    • Set up renderer process
    • Implement IPC communication
    • Create application menu

  2. Layout Integration

    • Create three-panel layout
    • Integrate all modules
    • Implement responsive design
    • Add status bar and title bar

  3. State Management

    • Global state management
    • Module communication
    • Event system
    • Data flow optimization

  4. Final Features

    • Keyboard shortcuts
    • Settings management
    • Theme support
    • Application packaging

  5. Testing and Optimization

    • Integration testing
    • Performance optimization
    • Error handling
    • User experience improvements

Deliverables

  • Complete working Electron IDE
  • All modules integrated
  • Cross-platform compatibility
  • Installation packages

Development Timeline

Phase 1: Foundation (Weeks 1-2)

  • Module 1: Project Loader & File Explorer
  • Module 2: Code Editor
  • Basic layout and navigation

Phase 2: AI Integration (Weeks 3-4)

  • Module 3: Chat Panel & Model Interface
  • LLM connection and basic AI features
  • Editor context awareness

Phase 3: Advanced Features (Weeks 5-6)

  • Module 4: File Management
  • Module 5: Task Queue
  • Safe operations and batch processing

Phase 4: Final Integration (Weeks 7-8)

  • Module 6: Integration
  • Testing, optimization, and packaging
  • Documentation and deployment

Quality Assurance

Testing Strategy

  • Unit Tests: Each module's components and services
  • Integration Tests: Module interactions
  • E2E Tests: Complete user workflows
  • Performance Tests: Large project handling

Code Quality

  • TypeScript strict mode
  • ESLint and Prettier
  • Code review process
  • Documentation requirements

User Experience

  • Responsive design
  • Error handling
  • Loading states
  • Accessibility features

This breakdown provides a clear roadmap for developing each module with specific deliverables and integration points.