SourceDesk Documentation

X

Overview

SourceDesk is a powerful, AI-integrated code editor that brings the full VS Code experience to your web browser. Built with modern web technologies and powered by OpenAI's GPT-4, it combines familiar IDE features with cutting-edge AI assistance to supercharge your development workflow.

Key Highlight: SourceDesk is completely browser-based - no installation required. Simply open it in your browser and start coding with full AI support.

What Makes SourceDesk Special?

  • Browser-Native: Works entirely in your web browser, no downloads or installs needed
  • AI-Powered: GPT-4 integration that can read, understand, and modify your code
  • VS Code Aesthetic: Familiar interface with dark/light themes matching VS Code
  • Zero Configuration: Start coding immediately with no setup required
  • Web3 Ready: Built-in wallet integration for blockchain development

Installation

SourceDesk is a standalone web application. No installation required - just open login.html in your browser.

Requirements

  • Browser: Chrome 90+, Firefox 88+, Safari 14+, or Edge 90+
  • JavaScript: Must be enabled
  • Internet Connection: Required for AI features
  • Screen Resolution: Minimum 1280x720 recommended

Supported File Types

SourceDesk supports all text-based file formats with syntax-aware icons for:

  • JavaScript (.js, .jsx, .ts, .tsx)
  • HTML (.html, .htm)
  • CSS (.css, .scss, .sass, .less)
  • Python (.py)
  • Java (.java)
  • C/C++ (.c, .cpp, .h)
  • Markdown (.md)
  • JSON (.json)
  • And many more...

Quick Start

Getting started with SourceDesk is straightforward:

Step 1: Open login.html in your browser
Step 2: Choose authentication method:
        - Email/Password
        - Wallet Connect
        - Guest Mode
Step 3: Start coding immediately!

Authentication Options

Email/Password

Create an account or login with your credentials. Your session is saved locally so you stay logged in.

Wallet Connect

Connect your MetaMask or other Web3 wallet for instant access. Perfect for blockchain developers.

Guest Mode

Skip authentication and dive straight into coding. Your work is saved in your browser's local storage.

Your First Project

Let's create a simple HTML project to get you familiar with SourceDesk:

Method 1: Create Files Manually

  1. Click the "New File" button in the Explorer panel
  2. Name your file index.html
  3. Start typing your HTML code
  4. Files auto-save as you type

Method 2: Upload Existing Project

  1. Click "Upload Project" in the Explorer panel
  2. Select your project folder
  3. All files will be loaded instantly
  4. Start editing immediately
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First SourceDesk Project</title>
</head>
<body>
    <h1>Hello, SourceDesk!</h1>
</body>
</html>

File Management

SourceDesk provides comprehensive file management capabilities that rival desktop IDEs:

Creating Files

  • Click the "New File" button () in the Explorer sidebar
  • Use keyboard shortcut Ctrl+N
  • Use File menu → New File
  • Enter filename with extension (e.g., app.js, styles.css)
  • File opens automatically in a new tab

Uploading Projects

  • Click "Upload Project" button ()
  • Use keyboard shortcut Ctrl+O
  • Use File menu → Open Folder
  • Select entire folder from your computer
  • All files loaded with full directory structure
  • Project name automatically detected and displayed

Downloading Projects

  • Click "Download Project" button ()
  • Use File menu → Export Project
  • Project exported as formatted text file
  • All files and content included
  • Perfect for sharing or backup

File Operations

  • Rename: Right-click file → Rename
  • Delete: Right-click file → Delete (with confirmation)
  • Copy Path: Right-click file → Copy Path
  • Close Tab: Click X on tab or use Ctrl+W

AI Integration GPT-4

SourceDesk's AI integration is powered by OpenAI's GPT-4, providing intelligent code assistance that understands context and can modify your code directly.

AI Chat Interface

The AI panel appears on the right side of the screen. You can:

  • Toggle it with Ctrl+` or View menu → Toggle AI Panel
  • Ask any coding question and get instant responses
  • Have natural conversations about your code
  • Switch between Chat, Code, and Explain tabs

AI Capabilities

  • Code Generation: Create entire functions, classes, or components from descriptions
  • Code Explanation: Understand complex code with detailed explanations
  • Debugging Assistance: Find and fix bugs with AI guidance
  • Code Review: Get suggestions for improvements and best practices
  • Direct Modification: AI can modify your active file automatically
  • Refactoring: Improve code structure and readability

AI Code Modification

The AI can directly modify your code files. When you have a file open and ask the AI to make changes, it will:

  1. Read the current file content
  2. Understand the modification request
  3. Generate the updated code
  4. Apply changes directly to your file
  5. Notify you of the update
Example AI prompts that trigger code modification:

"Add error handling to this function"
"Refactor this code to use async/await"
"Add comments explaining this code"
"Fix the bug in this validation logic"
"Improve performance of this loop"
"Add TypeScript types to this function"
"Convert this to a React component"

Pro Tip: The AI works best when you provide clear, specific instructions. Instead of "make this better", try "add input validation and error handling to this form".

Code Editing

SourceDesk provides a full-featured code editing experience:

Editor Features

  • Multi-Tab Support: Work on multiple files simultaneously
  • Auto-Save: Changes saved automatically as you type
  • Syntax Icons: File-type specific icons for easy identification
  • Line Numbers: Track your position with line and column numbers
  • Language Detection: Automatic detection of file language
  • Tab Management: Easy switching between open files

Status Bar Information

The status bar at the bottom shows:

  • Current line and column position
  • File language (JavaScript, HTML, CSS, etc.)
  • File encoding (UTF-8)
  • Line ending type (LF/CRLF)
  • Error and warning counts
  • Git branch information

Themes

SourceDesk offers professional themes that match the VS Code experience:

Available Themes

  • Dark Mode: Default VS Code Dark+ theme with dark backgrounds and high contrast
  • Light Mode: Clean, bright theme perfect for well-lit environments

Switching Themes

  • Click the theme toggle button () in the menubar
  • Use View menu → Toggle Theme
  • Theme preference is saved automatically
  • Persists across sessions

SourceDesk features a complete menu bar with all standard IDE operations:

File Menu

  • New File (Ctrl+N)
  • Open Folder (Ctrl+O)
  • Save (Ctrl+S) - Auto-save notification
  • Save All (Ctrl+K S)
  • Export Project
  • Close Editor (Ctrl+W)

Edit Menu

  • Undo (Ctrl+Z)
  • Redo (Ctrl+Y)
  • Cut (Ctrl+X)
  • Copy (Ctrl+C)
  • Paste (Ctrl+V)
  • Find (Ctrl+F)
  • Replace (Ctrl+H)

View Menu

  • Toggle Sidebar (Ctrl+B)
  • Toggle AI Panel (Ctrl+`)
  • Toggle Theme
  • Zoom In (Ctrl++)
  • Zoom Out (Ctrl+-)

Help Menu

  • Documentation - Opens this page
  • X - Opens SourceDesk X account
  • About SourceDesk - Version information

Source Code Architecture

SourceDesk is built with vanilla JavaScript following clean, modern architecture patterns:

Technology Stack

  • HTML5: Semantic markup for structure
  • CSS3: Custom properties for theming
  • Vanilla JavaScript: No frameworks, pure ES6+
  • OpenAI API: GPT-4 for AI features
  • Web3.js: Ethereum wallet integration
  • LocalStorage: Client-side data persistence

Core Components

SourceDesk Class

Main application class that manages all functionality:

class SourceDesk {
    constructor() {
        this.files = new Map();        // File storage
        this.openTabs = [];            // Track open tabs
        this.activeFile = null;        // Currently active file
        this.currentView = 'explorer'; // Active sidebar view
        this.theme = 'dark';           // Current theme
        this.walletConnected = false;  // Wallet status
        this.aiConversation = [];      // AI chat history
        this.projectName = 'UNTITLED'; // Current project
        
        this.init();
    }
    
    init() {
        this.checkAuthentication();
        this.setupTheme();
        this.setupMenuBar();
        this.setupActivityBar();
        this.setupFileOperations();
        this.setupTabs();
        this.setupAI();
        this.setupWallet();
        this.setupWindowControls();
        this.setupContextMenu();
        this.setupStatusBar();
        this.setupKeyboardShortcuts();
    }
}

File Storage

Files are stored in a JavaScript Map for efficient O(1) access:

this.files.set(fileName, {
    name: fileName,        // File name
    content: fileContent,  // File contents
    type: 'file',          // Type (file/folder)
    path: filePath,        // Full path
    modified: new Date()   // Last modified timestamp
});

AI Integration

OpenAI API is called directly from the browser with conversation context:

async callOpenAI(message) {
    const messages = [
        {
            role: 'system',
            content: 'You are a helpful coding assistant...'
        },
        ...this.aiConversation,  // Previous messages
        {
            role: 'user',
            content: message
        }
    ];

    const response = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${OPENAI_API_KEY}`
        },
        body: JSON.stringify({
            model: 'gpt-4',
            messages: messages,
            max_tokens: 2000,
            temperature: 0.7
        })
    });
    
    const data = await response.json();
    return data.choices[0].message.content;
}

Data Flow

Understanding how data flows through SourceDesk:

File Upload Flow

  1. User clicks "Upload Project" or uses Ctrl+O
  2. Browser file picker opens with directory selection
  3. Files are read using FileReader API
  4. Content stored in Map structure with metadata
  5. File tree UI updated with new files
  6. Project name extracted from folder name
  7. First file optionally opened in editor

AI Message Flow

  1. User types message in AI input panel
  2. Clicks send or presses Ctrl+Enter
  3. Message added to conversation history
  4. If modifying code, current file content included
  5. API request sent to OpenAI with full context
  6. Response received and parsed
  7. AI message displayed in chat interface
  8. If code modification detected, file updated automatically
  9. Notification shown to user

Theme Switching Flow

  1. User clicks theme toggle button
  2. Theme state toggled (dark ↔ light)
  3. Root element data-theme attribute updated
  4. CSS variables applied automatically
  5. Theme preference saved to localStorage
  6. Persists across sessions

API Reference

createNewFile()

Creates a new file in the workspace and opens it in the editor.

createNewFile()
// Prompts user for filename
// Creates file in files Map
// Updates file tree
// Opens file in editor automatically

Class Structure

SourceDesk follows a modular architecture with clear separation of concerns:

  • Authentication: checkAuthentication()
  • Theme Management: setupTheme(), toggleTheme()
  • Menu System: setupMenuBar(), handleMenuAction()
  • File Operations: createNewFile(), uploadProject(), downloadProject()
  • AI Integration: setupAI(), sendAIMessage(), callOpenAI()
  • Editor Management: createEditor(), switchToTab(), closeTab()

Web3 Integration

SourceDesk includes built-in Web3 wallet connection for blockchain development:

Supported Wallets

  • MetaMask
  • WalletConnect-compatible wallets
  • Mock mode for testing without wallet

Connecting Your Wallet

  1. Click "Connect Wallet" button in menubar
  2. Approve connection in your wallet
  3. Wallet address displayed (truncated)
  4. Click again to disconnect
async connectWallet() {
    if (typeof window.ethereum !== 'undefined') {
        const accounts = await window.ethereum.request({ 
            method: 'eth_requestAccounts' 
        });
        // Wallet connected successfully
    } else {
        // Mock mode for demo/testing
    }
}

Keyboard Shortcuts

Master these shortcuts to boost your productivity:

Action Shortcut Description
New File Ctrl+N Create a new file
Open Folder Ctrl+O Upload project from computer
Save Ctrl+S Show auto-save notification
Close Tab Ctrl+W Close active editor tab
Toggle Sidebar Ctrl+B Show/hide file explorer
Toggle AI Panel Ctrl+` Show/hide AI assistant
Send AI Message Ctrl+Enter Send message in AI chat
Undo Ctrl+Z Undo last change
Redo Ctrl+Y Redo undone change
Cut Ctrl+X Cut selected text
Copy Ctrl+C Copy selected text
Paste Ctrl+V Paste from clipboard
Select All Ctrl+A Select all text

Customization

SourceDesk can be customized to match your preferences:

Theme Customization

Edit styles.css to customize colors:

:root[data-theme="dark"] {
    --bg-primary: #1e1e1e;
    --bg-secondary: #252526;
    --accent-blue: #007acc;
    --text-primary: #cccccc;
    /* Customize any variable */
}

AI Behavior

Modify the AI system prompt in script.js:

{
    role: 'system',
    content: 'You are a helpful coding assistant integrated into SourceDesk...'
}

Best Practices

Working with AI

  • Be specific in your requests
  • Provide context about your code's purpose
  • Review AI-generated code before using
  • Use AI for learning, not just code generation

File Organization

  • Use descriptive file names
  • Group related files together
  • Keep consistent naming conventions
  • Regularly export/backup your work

Frequently Asked Questions

Is SourceDesk free to use?

Yes, SourceDesk is completely free. You only need an OpenAI API key for AI features.

Where is my data stored?

All your files are stored locally in your browser's localStorage. They never leave your computer unless you explicitly export them.

Can I use SourceDesk offline?

The editor works offline, but AI features require an internet connection to communicate with OpenAI's API.

How do I add my OpenAI API key?

The API key is configured in script.js. Replace the placeholder with your own key from OpenAI.

Can I collaborate with others?

Currently, SourceDesk is a single-user editor. Collaboration features may be added in future versions.

Troubleshooting

AI not responding

  • Check your internet connection
  • Verify your OpenAI API key is valid
  • Ensure you have API credits available
  • Check browser console for errors

Files not loading

  • Try a smaller project first
  • Check browser's file size limits
  • Clear browser cache and try again
  • Ensure files are text-based

Wallet not connecting

  • Install MetaMask browser extension
  • Unlock your wallet
  • Approve connection request
  • Try refreshing the page

Contributing

SourceDesk is open for contributions. The codebase is organized as follows:

File Structure

  • login.html - Authentication interface
  • login.css - Login page styling
  • index.html - Main editor interface
  • styles.css - Main application styles
  • script.js - Core application logic
  • docs.html - This documentation page

Development Guidelines

  • Maintain VS Code aesthetic
  • Keep code vanilla JavaScript
  • Follow existing naming conventions
  • Test in multiple browsers
  • Document new features

Thank you for using SourceDesk! For support, visit our X account or check out the GitHub repository.