Mandlix VS Code Extension

Transform Mandlix analysis into GitHub Copilot fix prompts for automated UI/UX improvements.

Features

• 🔍 Browse Issues: View all UI/UX issues organized by project and page in a sidebar tree view
• 🤖 Copilot Integration: Send fix prompts directly to GitHub Copilot
• 📁 File Mapping: Map analyzed URLs to your local project files
• 🔄 Auto-Sync: Automatically sync issues from Mandlix backend
• 🔧 One-Click Fixes: Apply AI-generated fixes with a single click
• 🌿 Git Integration: Create branches and pull requests for your fixes
• 📊 Export Reports: Generate comprehensive fix reports

Installation

From VSIX

1. Build the extension:

npm install
npm run compile
npm run package

2. Install in VS Code:

• Go to Extensions view (Ctrl+Shift+X)
• Click "..." menu → "Install from VSIX"
• Select the generated .vsix file

From Marketplace (Future)

Search for "Mandlix" in the VS Code Extensions marketplace.

Setup

1. Login to Mandlix

1. Open Command Palette (Ctrl+Shift+P)
2. Run Mandlix: Login
3. Enter your Mandlix API URL, email, and password

2. Sync Your Project

1. Run Mandlix: Map URL to File command
2. Select your Mandlix project
3. Confirm or adjust automatic file mappings

3. Configure Settings (Optional)

Open VS Code settings (Ctrl+,) and search for "Mandlix":

• mandlix.apiUrl - Your Mandlix API endpoint
• mandlix.autoSync - Auto-sync on startup
• mandlix.copilotModel - Copilot model to use
• mandlix.createGitBranch - Create git branch for fixes

Usage

Viewing Issues

1. Open the Explorer sidebar
2. Find the "Mandlix Issues" panel
3. Expand your project to see pages and issues
4. Click on an issue to view details

Fixing Issues

Method 1: Fix with Copilot Chat

1. Select an issue in the tree
2. Click "Fix with Copilot" button
3. Choose "Open in Copilot Chat"
4. Copilot will analyze and suggest fixes

Method 2: Copy Prompt

1. Click "Copy Prompt" in the issue detail panel
2. Paste into Copilot chat manually
3. Apply the suggested fix

Method 3: Direct Apply

1. Ensure file is mapped
2. Click "Apply Fix Directly"
3. Review the diff and confirm

File Mapping

Map URLs to local files:

1. Right-click a page in the tree
2. Select "Mandlix: Map URL to File"
3. Enter the relative path (e.g., src/pages/home.tsx)

Or sync the entire project:

1. Run Mandlix: Sync Project
2. Select your Mandlix project
3. Confirm automatic mappings

Creating Pull Requests

1. Apply your fixes
2. Run Mandlix: Create Pull Request
3. Review the generated PR
4. Open in GitHub to submit

Configuration File

The extension creates a .mandlixrc.json file in your workspace:

{
  "projectId": "proj_abc123",
  "baseUrl": "https://example.com",
  "framework": "react",
  "mappings": [
    {
      "url": "https://example.com/",
      "pattern": "^/$",
      "filePath": "src/pages/home.tsx"
    }
  ],
  "autoApply": false,
  "createPullRequests": true
}

Keyboard Shortcuts

• Ctrl+Shift+U - Refresh Mandlix issues
• Ctrl+Shift+F - Fix selected issue with Copilot

Requirements

• VS Code 1.86.0 or higher
• GitHub Copilot extension (for AI fix generation)
• Git (for branch/PR management)
• GitHub CLI gh (optional, for PR creation)

API Integration

The extension expects these backend endpoints:

• POST /api/v1/auth/login - Authentication
• GET /api/v1/projects - List projects
• GET /api/v1/projects/:id/pages - Get pages
• GET /api/v1/pages/:id/issues - Get issues
• GET /api/v1/issues/:id - Get issue details
• GET /api/v1/issues/:id/fix-prompt - Get fix prompt JSON
• POST /api/v1/issues/:id/status - Update issue status

Development

Build

npm install
npm run compile

Watch

npm run watch

Package

npm run package

Test

npm test

Extension Structure

src/
├── extension.ts          # Entry point
├── commands/             # VS Code commands
│   ├── login.ts
│   ├── refreshIssues.ts
│   ├── applyFix.ts
│   └── syncProject.ts
├── providers/            # Tree view & webview providers
│   ├── IssuesTreeProvider.ts
│   └── IssueDetailProvider.ts
├── services/             # Business logic
│   ├── apiService.ts
│   ├── copilotService.ts
│   ├── fileMapper.ts
│   └── gitService.ts
├── types/                # TypeScript interfaces
│   ├── issue.ts
│   ├── page.ts
│   └── project.ts
├── utils/                # Utilities
│   ├── config.ts
│   ├── constants.ts
│   └── helpers.ts
└── templates/            # HTML templates
    └── fixPromptTemplate.ts

License

MIT

Support

For issues and feature requests, please use the GitHub issue tracker.

Roadmap

• [ ] Real-time updates via WebSocket
• [ ] Batch fix operations
• [ ] Custom fix templates
• [ ] Integration with other AI providers
• [ ] Issue filtering and search
• [ ] Screenshot comparison in webview