Feature Request: Drag and Drop Files from VS Code Explorer

Feature Request: Drag and Drop Files from VS Code Explorer

Problem

Currently, users need to manually type file paths or use commands to add files to the Claude Code context. This creates friction in the workflow, especially when working with multiple files or exploring unfamiliar codebases.

Proposed Solution

Enable drag and drop functionality from VS Code's File Explorer directly into the Claude Code chat input area.

Implementation Approach

VS Code provides several APIs that could enable this feature:

1. Drag and Drop API (vscode.DataTransfer)

• The vscode.DataTransfer API (introduced in VS Code 1.67) allows extensions to handle drag and drop operations
• The chat input area could register as a drop target using vscode.window.registerTreeDataProvider with drag-and-drop handlers

1. Proposed Implementation Pattern:

// Register drop handler for chat input
const dropProvider: vscode.DocumentDropEditProvider = {
  async provideDocumentDropEdits(
    document: vscode.TextDocument,
    position: vscode.Position,
    dataTransfer: vscode.DataTransfer,
    token: vscode.CancellationToken
  ) {
    // Extract file URIs from dataTransfer
    const uriList = await dataTransfer.get('text/uri-list')?.asString();
    
    if (uriList) {
      const files = uriList.split('\n').map(uri => vscode.Uri.parse(uri.trim()));
      // Add files to Claude Code context
      return files.map(file => ({
        insertText: `@${file.fsPath}`,
        // or trigger Read tool for each file
      }));
    }
  }
};

1. Alternative Approach - Webview Drag and Drop:

• If the chat interface uses a webview, implement native HTML5 drag and drop
• Listen for drop events and communicate with the extension host via postMessage

Expected Behavior

1. User drags one or more files from VS Code Explorer
2. User drops files into Claude Code chat input area
3. Files are automatically:

• Added to context with @filename syntax, OR
• Automatically read using the Read tool, OR
• User is prompted to choose action (add to context vs. read immediately)

Benefits

• Improved UX: Natural, intuitive interaction pattern familiar to VS Code users
• Faster workflow: Reduces context-switching and typing
• Better discoverability: Visual feedback makes the feature more discoverable
• Multi-file support: Easy to add multiple files at once

Additional Enhancements

• Show visual drop zone indicator when dragging files
• Support dropping folders (could expand to all files or show picker)
• Configurable behavior (auto-read vs. add to context)
• Visual feedback showing which files were added

Related VS Code APIs

• vscode.DataTransfer
• vscode.DocumentDropEditProvider
• vscode.TreeDragAndDropController

References

• VS Code Drag and Drop API documentation
• Tree View Drag and Drop Guide

---

Environment: VS Code Extension
Priority: Enhancement
Impact: User Experience