feat: Implement initial VSCode extension for Git Chronoscope, including CLI integration, UI, commands, and logging.

Author: southpawriter02

vscode-extension/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+out/
+*.vsix
+.vscode-test/

vscode-extension/README.md

@@ -0,0 +1,47 @@
+# Git Chronoscope VSCode Extension
+
+Generate time-lapse visualizations of your Git repository directly in VSCode.
+
+## Features
+
+- **Generate Time-Lapse**: Create a video showing your repository's evolution
+- **File-Specific Time-Lapse**: Focus on a single file's history
+- **Sidebar Panel**: Easy access to generation controls
+- **Output Channel**: Detailed logging for debugging
+
+## Commands
+
+| Command | Description |
+|---------|-------------|
+| `Chronoscope: Generate Time-Lapse` | Generate for entire repository |
+| `Chronoscope: Generate Time-Lapse for Current File` | Generate for active file |
+| `Chronoscope: Show Output` | Show logging output |
+
+## Configuration
+
+| Setting | Default | Description |
+|---------|---------|-------------|
+| `chronoscope.pythonPath` | `python3` | Path to Python executable |
+| `chronoscope.outputFormat` | `mp4` | Default output format |
+| `chronoscope.fps` | `5` | Frames per second |
+
+## Requirements
+
+- Python 3.7+
+- git-chronoscope installed
+- FFmpeg (for video output)
+
+## Installation
+
+1. Open VSCode Extensions (Ctrl+Shift+X)
+2. Search for "Git Chronoscope"
+3. Click Install
+
+## Development
+
+```bash
+cd vscode-extension
+npm install
+npm run compile
+npm test
+```

vscode-extension/media/icon.svg

@@ -0,0 +1,96 @@
+{
+    "name": "git-chronoscope",
+    "displayName": "Git Chronoscope",
+    "description": "Generate time-lapse visualizations of your Git repository's evolution",
+    "version": "0.1.0",
+    "publisher": "git-chronoscope",
+    "engines": {
+        "vscode": "^1.74.0"
+    },
+    "categories": [
+        "Visualization",
+        "SCM Providers"
+    ],
+    "activationEvents": [
+        "onCommand:chronoscope.generate",
+        "onCommand:chronoscope.generateFile",
+        "onCommand:chronoscope.showOutput"
+    ],
+    "main": "./out/extension.js",
+    "contributes": {
+        "commands": [
+            {
+                "command": "chronoscope.generate",
+                "title": "Chronoscope: Generate Time-Lapse"
+            },
+            {
+                "command": "chronoscope.generateFile",
+                "title": "Chronoscope: Generate Time-Lapse for Current File"
+            },
+            {
+                "command": "chronoscope.showOutput",
+                "title": "Chronoscope: Show Output"
+            }
+        ],
+        "viewsContainers": {
+            "activitybar": [
+                {
+                    "id": "chronoscope",
+                    "title": "Git Chronoscope",
+                    "icon": "media/icon.svg"
+                }
+            ]
+        },
+        "views": {
+            "chronoscope": [
+                {
+                    "type": "webview",
+                    "id": "chronoscope.sidebar",
+                    "name": "Configuration"
+                }
+            ]
+        },
+        "configuration": {
+            "title": "Git Chronoscope",
+            "properties": {
+                "chronoscope.pythonPath": {
+                    "type": "string",
+                    "default": "python3",
+                    "description": "Path to Python executable"
+                },
+                "chronoscope.outputFormat": {
+                    "type": "string",
+                    "enum": [
+                        "mp4",
+                        "gif",
+                        "html"
+                    ],
+                    "default": "mp4",
+                    "description": "Default output format"
+                },
+                "chronoscope.fps": {
+                    "type": "number",
+                    "default": 5,
+                    "description": "Frames per second"
+                }
+            }
+        }
+    },
+    "scripts": {
+        "vscode:prepublish": "npm run compile",
+        "compile": "tsc -p ./",
+        "watch": "tsc -watch -p ./",
+        "pretest": "npm run compile",
+        "test": "node ./out/test/runTest.js",
+        "lint": "eslint src --ext ts"
+    },
+    "devDependencies": {
+        "@types/vscode": "^1.74.0",
+        "@types/mocha": "^10.0.1",
+        "@types/node": "^18.0.0",
+        "@vscode/test-electron": "^2.3.0",
+        "typescript": "^5.0.0",
+        "mocha": "^10.2.0",
+        "eslint": "^8.0.0"
+    }
+}

vscode-extension/package.json

@@ -0,0 +1,99 @@
+import * as vscode from 'vscode';
+import * as cp from 'child_process';
+import * as path from 'path';
+import { Logger } from './logger';
+
+/**
+ * Wrapper for the git-chronoscope Python CLI.
+ */
+export class Chronoscope {
+    private logger: Logger;
+
+    constructor() {
+        this.logger = Logger.getInstance();
+    }
+
+    /**
+     * Get the configured Python path.
+     */
+    private getPythonPath(): string {
+        const config = vscode.workspace.getConfiguration('chronoscope');
+        return config.get<string>('pythonPath', 'python3');
+    }
+
+    /**
+     * Get the chronoscope module path.
+     */
+    private getModulePath(): string {
+        // Assumes chronoscope is installed or in parent directory
+        const extensionPath = vscode.extensions.getExtension('git-chronoscope.git-chronoscope')?.extensionPath;
+        if (extensionPath) {
+            return path.join(extensionPath, '..');
+        }
+        return '.';
+    }
+
+    /**
+     * Generate a time-lapse for a repository.
+     */
+    async generate(
+        repoPath: string,
+        outputPath: string,
+        options: GenerateOptions = {}
+    ): Promise<void> {
+        const pythonPath = this.getPythonPath();
+        const config = vscode.workspace.getConfiguration('chronoscope');
+
+        const args = [
+            '-m', 'src.main',
+            repoPath,
+            outputPath
+        ];
+
+        // Add options
+        if (options.fps || config.get<number>('fps')) {
+            args.push('--fps', String(options.fps || config.get<number>('fps', 5)));
+        }
+        if (options.format || config.get<string>('outputFormat')) {
+            args.push('--format', options.format || config.get<string>('outputFormat', 'mp4'));
+        }
+        if (options.include) {
+            args.push('--include', options.include);
+        }
+
+        this.logger.info(`Running: ${pythonPath} ${args.join(' ')}`);
+
+        return new Promise((resolve, reject) => {
+            const cwd = this.getModulePath();
+            const process = cp.spawn(pythonPath, args, { cwd });
+
+            process.stdout.on('data', (data) => {
+                this.logger.info(data.toString().trim());
+            });
+
+            process.stderr.on('data', (data) => {
+                this.logger.error(data.toString().trim());
+            });
+
+            process.on('close', (code) => {
+                if (code === 0) {
+                    this.logger.info('Time-lapse generated successfully');
+                    resolve();
+                } else {
+                    reject(new Error(`Process exited with code ${code}`));
+                }
+            });
+
+            process.on('error', (err) => {
+                this.logger.error('Failed to start process', err);
+                reject(err);
+            });
+        });
+    }
+}
+
+export interface GenerateOptions {
+    fps?: number;
+    format?: string;
+    include?: string;
+}

vscode-extension/src/chronoscope.ts

@@ -0,0 +1,129 @@
+import * as vscode from 'vscode';
+import * as path from 'path';
+import { Chronoscope } from './chronoscope';
+import { Logger } from './logger';
+
+const logger = Logger.getInstance();
+const chronoscope = new Chronoscope();
+
+/**
+ * Command: Generate time-lapse for the workspace.
+ */
+export async function generateTimeLapse(): Promise<void> {
+    const workspaceFolders = vscode.workspace.workspaceFolders;
+
+    if (!workspaceFolders || workspaceFolders.length === 0) {
+        vscode.window.showErrorMessage('No workspace folder open');
+        return;
+    }
+
+    const repoPath = workspaceFolders[0].uri.fsPath;
+    logger.info(`Generating time-lapse for: ${repoPath}`);
+
+    // Ask for output location
+    const outputUri = await vscode.window.showSaveDialog({
+        defaultUri: vscode.Uri.file(path.join(repoPath, 'timelapse.mp4')),
+        filters: {
+            'Video': ['mp4'],
+            'GIF': ['gif'],
+            'HTML': ['html']
+        },
+        title: 'Save Time-Lapse'
+    });
+
+    if (!outputUri) {
+        return;
+    }
+
+    const outputPath = outputUri.fsPath;
+    const format = path.extname(outputPath).slice(1);
+
+    try {
+        await vscode.window.withProgress({
+            location: vscode.ProgressLocation.Notification,
+            title: 'Generating Time-Lapse',
+            cancellable: false
+        }, async (progress) => {
+            progress.report({ message: 'Processing commits...' });
+            await chronoscope.generate(repoPath, outputPath, { format });
+            return;
+        });
+
+        vscode.window.showInformationMessage(`Time-lapse saved to ${outputPath}`);
+    } catch (error) {
+        const err = error as Error;
+        logger.error('Failed to generate time-lapse', err);
+        vscode.window.showErrorMessage(`Failed to generate time-lapse: ${err.message}`);
+    }
+}
+
+/**
+ * Command: Generate time-lapse for the current file.
+ */
+export async function generateFileTimeLapse(): Promise<void> {
+    const editor = vscode.window.activeTextEditor;
+
+    if (!editor) {
+        vscode.window.showErrorMessage('No file open');
+        return;
+    }
+
+    const filePath = editor.document.uri.fsPath;
+    const workspaceFolders = vscode.workspace.workspaceFolders;
+
+    if (!workspaceFolders || workspaceFolders.length === 0) {
+        vscode.window.showErrorMessage('No workspace folder open');
+        return;
+    }
+
+    const repoPath = workspaceFolders[0].uri.fsPath;
+    const relativePath = path.relative(repoPath, filePath);
+
+    logger.info(`Generating time-lapse for file: ${relativePath}`);
+
+    // Ask for output location
+    const baseName = path.basename(filePath, path.extname(filePath));
+    const outputUri = await vscode.window.showSaveDialog({
+        defaultUri: vscode.Uri.file(path.join(repoPath, `${baseName}_timelapse.mp4`)),
+        filters: {
+            'Video': ['mp4'],
+            'GIF': ['gif']
+        },
+        title: 'Save Time-Lapse'
+    });
+
+    if (!outputUri) {
+        return;
+    }
+
+    const outputPath = outputUri.fsPath;
+    const format = path.extname(outputPath).slice(1);
+
+    try {
+        await vscode.window.withProgress({
+            location: vscode.ProgressLocation.Notification,
+            title: `Generating Time-Lapse for ${relativePath}`,
+            cancellable: false
+        }, async (progress) => {
+            progress.report({ message: 'Processing commits...' });
+            await chronoscope.generate(repoPath, outputPath, {
+                format,
+                include: relativePath
+            });
+            return;
+        });
+
+        vscode.window.showInformationMessage(`Time-lapse saved to ${outputPath}`);
+    } catch (error) {
+        const err = error as Error;
+        logger.error('Failed to generate file time-lapse', err);
+        vscode.window.showErrorMessage(`Failed to generate time-lapse: ${err.message}`);
+    }
+}
+
+/**
+ * Command: Show output channel.
+ */
+export function showOutput(): void {
+    logger.show();
+}