gitmaps 1.0.0

package/app/lib/global-search.ts

@@ -0,0 +1,264 @@
+// @ts-nocheck
+/**
+ * Global search panel — Ctrl+Shift+F to search across all repo files.
+ * Uses git grep via the /api/repo/search endpoint.
+ * Results grouped by file, clickable to open in editor modal.
+ */
+import type { CanvasContext } from './context';
+import { escapeHtml } from './utils';
+
+let _panel: HTMLElement | null = null;
+let _searchTimeout: any = null;
+let _abortController: AbortController | null = null;
+let _ctx: CanvasContext | null = null;
+
+/** Toggle the search panel */
+export function toggleGlobalSearch(ctx: CanvasContext) {
+    _ctx = ctx;
+    if (_panel) {
+        closeSearch();
+    } else {
+        openSearch();
+    }
+}
+
+function openSearch() {
+    if (_panel) return;
+
+    _panel = document.createElement('div');
+    _panel.id = 'globalSearchPanel';
+    _panel.className = 'global-search-panel';
+    // Inline positioning for reliability (same approach as settings modal)
+    Object.assign(_panel.style, {
+        position: 'fixed',
+        top: '0',
+        right: '0',
+        width: '420px',
+        height: '100vh',
+        zIndex: '9000',
+        display: 'flex',
+        flexDirection: 'column',
+    });
+    _panel.innerHTML = `
+        <div class="gs-header">
+            <div class="gs-search-row">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" class="gs-search-icon">
+                    <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+                </svg>
+                <input type="text" id="gsSearchInput" class="gs-input" placeholder="Search across all files..." spellcheck="false" autocomplete="off" />
+                <button id="gsClose" class="gs-close" title="Close (Esc)">✕</button>
+            </div>
+            <div class="gs-options">
+                <label class="gs-option" title="Match case">
+                    <input type="checkbox" id="gsCaseSensitive" />
+                    <span>Aa</span>
+                </label>
+                <span class="gs-info" id="gsInfo"></span>
+            </div>
+        </div>
+        <div class="gs-results" id="gsResults">
+            <div class="gs-empty">Type at least 2 characters to search</div>
+        </div>
+    `;
+
+    document.body.appendChild(_panel);
+
+    // Focus input
+    const input = _panel.querySelector('#gsSearchInput') as HTMLInputElement;
+    input?.focus();
+
+    // Wire events
+    input?.addEventListener('input', () => onSearchInput(input.value));
+    _panel.querySelector('#gsClose')?.addEventListener('click', closeSearch);
+
+    // Escape to close
+    document.addEventListener('keydown', _onEsc);
+
+    // Slide-in animation
+    requestAnimationFrame(() => _panel?.classList.add('visible'));
+}
+
+export function closeSearch() {
+    if (!_panel) return;
+    document.removeEventListener('keydown', _onEsc);
+    _panel.classList.remove('visible');
+    // Wait for slide-out animation
+    setTimeout(() => {
+        _panel?.remove();
+        _panel = null;
+    }, 200);
+    if (_abortController) { _abortController.abort(); _abortController = null; }
+    if (_searchTimeout) { clearTimeout(_searchTimeout); _searchTimeout = null; }
+}
+
+function _onEsc(e: KeyboardEvent) {
+    if (e.key === 'Escape' && _panel) {
+        e.preventDefault();
+        e.stopPropagation();
+        closeSearch();
+    }
+}
+
+function onSearchInput(query: string) {
+    if (_searchTimeout) clearTimeout(_searchTimeout);
+    if (_abortController) { _abortController.abort(); _abortController = null; }
+
+    const info = document.getElementById('gsInfo');
+    const results = document.getElementById('gsResults');
+
+    if (query.length < 2) {
+        if (info) info.textContent = '';
+        if (results) results.innerHTML = '<div class="gs-empty">Type at least 2 characters to search</div>';
+        return;
+    }
+
+    if (info) info.textContent = 'Searching...';
+    if (results) results.innerHTML = '<div class="gs-loading"><div class="gs-spinner"></div></div>';
+
+    // Debounce 300ms
+    _searchTimeout = setTimeout(() => performSearch(query), 300);
+}
+
+async function performSearch(query: string) {
+    if (!_ctx) return;
+
+    const state = _ctx.snap().context;
+    const repoPath = state.repoPath;
+    if (!repoPath) return;
+
+    const caseSensitive = (document.getElementById('gsCaseSensitive') as HTMLInputElement)?.checked || false;
+    const info = document.getElementById('gsInfo');
+    const resultsEl = document.getElementById('gsResults');
+
+    _abortController = new AbortController();
+
+    try {
+        const res = await fetch('/api/repo/search', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                path: repoPath,
+                query,
+                commit: state.currentCommitHash || undefined,
+                caseSensitive,
+            }),
+            signal: _abortController.signal,
+        });
+
+        if (!res.ok) {
+            if (info) info.textContent = 'Search failed';
+            if (resultsEl) resultsEl.innerHTML = '<div class="gs-empty gs-error">Search failed</div>';
+            return;
+        }
+
+        const data = await res.json();
+        const { results, totalMatches } = data;
+
+        if (info) {
+            const fileCount = results.length;
+            info.textContent = totalMatches === 0
+                ? 'No results'
+                : `${totalMatches} match${totalMatches > 1 ? 'es' : ''} in ${fileCount} file${fileCount > 1 ? 's' : ''}`;
+        }
+
+        if (!resultsEl) return;
+
+        if (results.length === 0) {
+            resultsEl.innerHTML = `<div class="gs-empty">No results for "${escapeHtml(query)}"</div>`;
+            return;
+        }
+
+        // Render grouped results
+        resultsEl.innerHTML = results.map((group: any) => `
+            <div class="gs-file-group">
+                <div class="gs-file-header" data-path="${escapeHtml(group.file)}">
+                    <span class="gs-file-icon">${getFileIcon(group.file)}</span>
+                    <span class="gs-file-name">${escapeHtml(group.file.split('/').pop() || group.file)}</span>
+                    <span class="gs-file-path">${escapeHtml(group.file)}</span>
+                    <span class="gs-match-count">${group.matches.length}</span>
+                </div>
+                ${group.matches.map((m: any) => `
+                    <div class="gs-match-line" data-path="${escapeHtml(group.file)}" data-line="${m.line}">
+                        <span class="gs-line-num">${m.line}</span>
+                        <span class="gs-line-content">${highlightMatch(escapeHtml(m.content), query, caseSensitive)}</span>
+                    </div>
+                `).join('')}
+            </div>
+        `).join('');
+
+        // Wire click handlers
+        resultsEl.querySelectorAll('.gs-match-line').forEach(el => {
+            el.addEventListener('click', () => {
+                const path = el.getAttribute('data-path');
+                const line = parseInt(el.getAttribute('data-line') || '1', 10);
+                if (path) openFileFromSearch(path, line);
+            });
+        });
+
+        resultsEl.querySelectorAll('.gs-file-header').forEach(el => {
+            el.addEventListener('click', () => {
+                const path = el.getAttribute('data-path');
+                if (path) openFileFromSearch(path, 1);
+            });
+        });
+
+    } catch (err: any) {
+        if (err.name === 'AbortError') return; // Cancelled
+        if (info) info.textContent = 'Search error';
+        if (resultsEl) resultsEl.innerHTML = `<div class="gs-empty gs-error">${escapeHtml(err.message)}</div>`;
+    }
+}
+
+/** Highlight search matches in result text */
+function highlightMatch(html: string, query: string, caseSensitive: boolean): string {
+    const flags = caseSensitive ? 'g' : 'gi';
+    const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    return html.replace(new RegExp(escaped, flags), '<mark class="gs-highlight">$&</mark>');
+}
+
+function getFileIcon(name: string): string {
+    const ext = name.split('.').pop()?.toLowerCase() || '';
+    const icons: Record<string, string> = {
+        ts: '🔷', tsx: '⚛️', js: '🟡', jsx: '⚛️',
+        css: '🎨', html: '🌐', json: '📋', md: '📝',
+        py: '🐍', go: '🔵', rs: '🦀', yml: '⚙️', yaml: '⚙️',
+        sh: '💻', sql: '🗃️', svg: '🖼️', png: '🖼️', jpg: '🖼️',
+        toml: '⚙️', lock: '🔒', gitignore: '🚫',
+    };
+    return icons[ext] || '📄';
+}
+
+/** Open a file from search results in the editor modal */
+function openFileFromSearch(filePath: string, line: number) {
+    if (!_ctx) return;
+
+    // Create a minimal file stub
+    const file = {
+        path: filePath,
+        name: filePath.split('/').pop() || filePath,
+        content: '',
+        lines: 0,
+    };
+
+    // Import and open the file modal
+    import('./file-modal').then(({ openFileModal }) => {
+        openFileModal(_ctx!, file, 'edit');
+        // Scroll to line after editor loads
+        if (line > 1) {
+            setTimeout(() => {
+                const editContainer = document.getElementById('modalEditContainer');
+                const editor = (editContainer as any)?._cmEditor;
+                if (editor?.view) {
+                    const lineInfo = editor.view.state.doc.line(Math.min(line, editor.view.state.doc.lines));
+                    editor.view.dispatch({
+                        selection: { anchor: lineInfo.from },
+                        scrollIntoView: true,
+                    });
+                }
+            }, 500);
+        }
+    });
+
+    // Close search panel
+    closeSearch();
+}

package/app/lib/goto-definition.ts

@@ -0,0 +1,224 @@
+// @ts-nocheck
+/**
+ * Go-to-definition — makes import paths clickable in the file modal.
+ * Ctrl+Click or click on highlighted import paths navigates to the
+ * target file's card on the canvas.
+ */
+import type { CanvasContext } from './context';
+import { showToast } from './utils';
+
+// ─── Import path resolution ────────────────────────
+const IMPORT_PATTERNS = [
+    // JS/TS: import X from './path'
+    /(?:import|export)\s+(?:.*?\s+from\s+)?['"]([^'"]+)['"]/g,
+    // JS/TS: require('./path')
+    /require\s*\(\s*['"]([^'"]+)['"]\s*\)/g,
+    // JS/TS: import('./path')
+    /import\s*\(\s*['"]([^'"]+)['"]\s*\)/g,
+    // Python: from X import Y / import X
+    /(?:from|import)\s+([\w.]+)/g,
+    // CSS: @import './path'
+    /@import\s+['"]([^'"]+)['"]/g,
+];
+
+const JS_EXTENSIONS = ['', '.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs', '.mts', '.cts'];
+const INDEX_FILES = ['index.ts', 'index.tsx', 'index.js', 'index.jsx'];
+
+/**
+ * Resolve an import specifier to a file path in the repo.
+ */
+function resolveImportPath(importPath: string, currentFilePath: string, allFiles: string[]): string | null {
+    // Skip external packages (no ./ or ../ prefix, not Python dots)
+    if (!importPath.startsWith('.') && !importPath.startsWith('/')) {
+        // Could be a Python dotted import or a bare specifier
+        // Try converting Python dots to slashes
+        const pythonPath = importPath.replace(/\./g, '/');
+        const pyMatch = allFiles.find(f => f === pythonPath + '.py' || f === pythonPath + '/__init__.py');
+        if (pyMatch) return pyMatch;
+        return null;
+    }
+
+    // Resolve relative path
+    const currentDir = currentFilePath.split('/').slice(0, -1).join('/');
+    const parts = [...(currentDir ? currentDir.split('/') : []), ...importPath.split('/')];
+
+    // Normalize: resolve . and ..
+    const resolved: string[] = [];
+    for (const part of parts) {
+        if (part === '.') continue;
+        if (part === '..') { resolved.pop(); continue; }
+        resolved.push(part);
+    }
+
+    const basePath = resolved.join('/');
+
+    // Try exact match first
+    if (allFiles.includes(basePath)) return basePath;
+
+    // Try with extensions
+    for (const ext of JS_EXTENSIONS) {
+        const candidate = basePath + ext;
+        if (allFiles.includes(candidate)) return candidate;
+    }
+
+    // Try as directory with index file
+    for (const indexFile of INDEX_FILES) {
+        const candidate = basePath + '/' + indexFile;
+        if (allFiles.includes(candidate)) return candidate;
+    }
+
+    return null;
+}
+
+/**
+ * Extract all import paths from file content with their line positions.
+ */
+function extractImports(content: string): Array<{ path: string; line: number; start: number; end: number }> {
+    const lines = content.split('\n');
+    const imports: Array<{ path: string; line: number; start: number; end: number }> = [];
+
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        for (const pattern of IMPORT_PATTERNS) {
+            pattern.lastIndex = 0;
+            let match;
+            while ((match = pattern.exec(line)) !== null) {
+                const importPath = match[1];
+                if (!importPath) continue;
+                // Find the position of the import path string in the line
+                const pathStart = line.indexOf(importPath, match.index);
+                imports.push({
+                    path: importPath,
+                    line: i + 1,
+                    start: pathStart,
+                    end: pathStart + importPath.length,
+                });
+            }
+        }
+    }
+
+    return imports;
+}
+
+/**
+ * Post-process rendered HTML in the modal to make import paths clickable.
+ * Call this after setting contentEl.innerHTML.
+ */
+export function addClickableImports(ctx: CanvasContext, contentEl: HTMLElement, filePath: string, rawContent: string) {
+    if (!rawContent || !filePath) return;
+
+    const imports = extractImports(rawContent);
+    if (imports.length === 0) return;
+
+    // Get all file paths from the canvas
+    const allFiles: string[] = [];
+    if (ctx.allFilesData) {
+        for (const f of ctx.allFilesData) {
+            if (f.path) allFiles.push(f.path);
+        }
+    }
+    // Also gather from fileCards map
+    for (const [p] of ctx.fileCards) {
+        if (!allFiles.includes(p)) allFiles.push(p);
+    }
+
+    // Resolve imports and mark which are navigable
+    const navigable = new Map<string, string>(); // importPath -> resolvedPath
+    for (const imp of imports) {
+        if (navigable.has(imp.path)) continue;
+        const resolved = resolveImportPath(imp.path, filePath, allFiles);
+        if (resolved) navigable.set(imp.path, resolved);
+    }
+
+    if (navigable.size === 0) return;
+
+    // Add a delegated click handler on the content element
+    contentEl.addEventListener('click', (e: MouseEvent) => {
+        // Only activate on Ctrl+Click or if clicking a link-import element
+        const target = e.target as HTMLElement;
+        const importLink = target.closest('.goto-import-link');
+
+        if (importLink) {
+            e.preventDefault();
+            e.stopPropagation();
+            const resolvedPath = importLink.getAttribute('data-resolved');
+            if (resolvedPath) navigateToFile(ctx, resolvedPath);
+            return;
+        }
+
+        // Ctrl+Click on any text containing an import path
+        if (!e.ctrlKey && !e.metaKey) return;
+        const text = target.textContent || '';
+        for (const [importPath, resolvedPath] of navigable) {
+            if (text.includes(importPath)) {
+                e.preventDefault();
+                e.stopPropagation();
+                navigateToFile(ctx, resolvedPath);
+                return;
+            }
+        }
+    });
+
+    // Post-process HTML to wrap import paths with clickable spans
+    // We search for string literals containing navigable import paths
+    const codeEl = contentEl.querySelector('code') || contentEl;
+    const walker = document.createTreeWalker(codeEl, NodeFilter.SHOW_TEXT);
+    const textNodes: Text[] = [];
+    let node: Text | null;
+    while ((node = walker.nextNode() as Text)) {
+        for (const [importPath] of navigable) {
+            if (node.textContent?.includes(importPath)) {
+                textNodes.push(node);
+                break;
+            }
+        }
+    }
+
+    for (const textNode of textNodes) {
+        const text = textNode.textContent || '';
+        for (const [importPath, resolvedPath] of navigable) {
+            if (text.includes(importPath)) {
+                const parts = text.split(importPath);
+                if (parts.length < 2) continue;
+
+                const fragment = document.createDocumentFragment();
+                for (let i = 0; i < parts.length; i++) {
+                    if (i > 0) {
+                        // Insert the clickable import link
+                        const link = document.createElement('span');
+                        link.className = 'goto-import-link';
+                        link.setAttribute('data-resolved', resolvedPath);
+                        link.textContent = importPath;
+                        link.title = `Go to: ${resolvedPath} (Ctrl+Click)`;
+                        fragment.appendChild(link);
+                    }
+                    if (parts[i]) {
+                        fragment.appendChild(document.createTextNode(parts[i]));
+                    }
+                }
+                textNode.replaceWith(fragment);
+                break; // Only process first match per text node
+            }
+        }
+    }
+}
+
+/**
+ * Navigate to a file — opens it as a new tab in the modal.
+ */
+function navigateToFile(ctx: CanvasContext, filePath: string) {
+    // Find the file data
+    const fileData = ctx.allFilesData?.find(f => f.path === filePath);
+    if (!fileData) {
+        showToast(`File not found: ${filePath}`, 'error');
+        return;
+    }
+
+    showToast(`→ ${filePath.split('/').pop()}`, 'info');
+
+    // Open the file as a new tab in the current modal
+    import('./file-modal').then(({ openFileModal }) => {
+        openFileModal(ctx, fileData);
+    });
+}
+

package/app/lib/heatmap.ts

@@ -0,0 +1,178 @@
+/**
+ * Git Heatmap — color-codes file cards by commit frequency.
+ * Hot files (frequently changed) glow red/orange.
+ * Cold files (rarely changed) stay blue/gray.
+ * Toggle with 'H' hotkey or toolbar button.
+ */
+import { getSetting } from './settings';
+
+// ─── Types ──────────────────────────────────────────
+
+interface HeatmapEntry {
+    file: string;
+    commits: number;
+    heat: number; // 0-1 normalized
+}
+
+interface HeatmapState {
+    active: boolean;
+    data: HeatmapEntry[];
+    maxCommits: number;
+    days: number;
+}
+
+const state: HeatmapState = {
+    active: false,
+    data: [],
+    maxCommits: 0,
+    days: 90,
+};
+
+// ─── Color Scale ────────────────────────────────────
+
+/** HSL heat colors: cold (220° blue) → warm (30° orange) → hot (0° red) */
+function heatToColor(heat: number): string {
+    // 0 = cold blue, 0.5 = orange, 1.0 = hot red
+    const hue = 220 - heat * 220; // 220 → 0
+    const saturation = 40 + heat * 50; // 40% → 90%
+    const lightness = 25 + heat * 20; // 25% → 45%
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+}
+
+function heatToGlow(heat: number): string {
+    if (heat < 0.3) return 'none';
+    const intensity = Math.round(heat * 20);
+    const hue = 220 - heat * 220;
+    return `0 0 ${intensity}px hsla(${hue}, 80%, 50%, ${heat * 0.6})`;
+}
+
+// ─── Data Fetching ──────────────────────────────────
+
+export async function fetchHeatmap(repoPath: string, days = 90): Promise<void> {
+    try {
+        const res = await fetch('/api/repo/git-heatmap', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ path: repoPath, days }),
+        });
+        if (!res.ok) throw new Error(`Heatmap API error: ${res.status}`);
+        const json = await res.json();
+        state.data = json.files || [];
+        state.maxCommits = json.maxCommits || 0;
+        state.days = days;
+    } catch (err) {
+        console.error('[heatmap] fetch failed:', err);
+        state.data = [];
+    }
+}
+
+// ─── Apply / Remove Overlay ─────────────────────────
+
+function applyOverlay() {
+    const heatMap = new Map(state.data.map(e => [e.file, e]));
+    const cards = document.querySelectorAll<HTMLElement>('.file-card');
+
+    for (const card of cards) {
+        const path = card.dataset.path;
+        if (!path) continue;
+
+        const entry = heatMap.get(path);
+        const heat = entry?.heat ?? 0;
+
+        // Apply heat background + glow
+        card.style.setProperty('--heat-bg', heatToColor(heat));
+        card.style.setProperty('--heat-glow', heatToGlow(heat));
+        card.classList.add('heatmap-active');
+
+        // Add commit count badge
+        if (entry && entry.commits > 0) {
+            let badge = card.querySelector('.heatmap-badge') as HTMLElement;
+            if (!badge) {
+                badge = document.createElement('div');
+                badge.className = 'heatmap-badge';
+                card.appendChild(badge);
+            }
+            badge.textContent = `🔥 ${entry.commits}`;
+            badge.title = `${entry.commits} commits in last ${state.days} days`;
+        }
+    }
+}
+
+function removeOverlay() {
+    const cards = document.querySelectorAll<HTMLElement>('.file-card');
+    for (const card of cards) {
+        card.style.removeProperty('--heat-bg');
+        card.style.removeProperty('--heat-glow');
+        card.classList.remove('heatmap-active');
+        card.querySelector('.heatmap-badge')?.remove();
+    }
+}
+
+// ─── Toggle ─────────────────────────────────────────
+
+export async function toggleHeatmap(repoPath: string): Promise<boolean> {
+    state.active = !state.active;
+
+    if (state.active) {
+        if (state.data.length === 0) {
+            const days = getSetting('heatmapDays');
+            await fetchHeatmap(repoPath, days);
+        }
+        applyOverlay();
+    } else {
+        removeOverlay();
+    }
+
+    return state.active;
+}
+
+export function isHeatmapActive(): boolean {
+    return state.active;
+}
+
+/** Refresh heatmap data and re-apply if active */
+export async function refreshHeatmap(repoPath: string): Promise<void> {
+    const days = getSetting('heatmapDays');
+    await fetchHeatmap(repoPath, days);
+    if (state.active) {
+        removeOverlay();
+        applyOverlay();
+    }
+}
+
+// ─── CSS (injected once) ────────────────────────────
+
+let cssInjected = false;
+export function injectHeatmapCSS() {
+    if (cssInjected) return;
+    cssInjected = true;
+
+    const style = document.createElement('style');
+    style.textContent = `
+        .file-card.heatmap-active {
+            background: var(--heat-bg, #1a1a2e) !important;
+            box-shadow: var(--heat-glow, none) !important;
+            transition: background 0.4s ease, box-shadow 0.4s ease;
+        }
+
+        .file-card.heatmap-active .file-card-header {
+            background: rgba(0, 0, 0, 0.3) !important;
+        }
+
+        .heatmap-badge {
+            position: absolute;
+            top: 4px;
+            right: 4px;
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 11px;
+            font-weight: 600;
+            color: #fff;
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(4px);
+            z-index: 10;
+            pointer-events: none;
+        }
+    `;
+    document.head.appendChild(style);
+}