gitmaps 1.0.0

package/app/lib/status-bar.ts

@@ -0,0 +1,128 @@
+/**
+ * Status Bar — VS Code-style bottom bar for GitMaps
+ * 
+ * Shows: zoom %, file count, selected count, repo name, mode.
+ * Updates reactively via exported update functions.
+ */
+
+import type { CanvasContext } from './context';
+
+let bar: HTMLElement | null = null;
+let ctx: CanvasContext | null = null;
+
+// Cached state for efficient updates
+let _zoom = 1;
+let _fileCount = 0;
+let _selectedCount = 0;
+let _repoName = '';
+let _mode = 'Simple';
+let _commitHash = '';
+
+function createBar(): HTMLElement {
+    const el = document.createElement('div');
+    el.id = 'status-bar';
+    el.innerHTML = `
+        <div class="sb-left">
+            <span class="sb-item sb-repo" id="sbRepo" title="Current repository"></span>
+            <span class="sb-item sb-commit" id="sbCommit" title="Current commit"></span>
+        </div>
+        <div class="sb-right">
+            <span class="sb-item sb-mode" id="sbMode" title="Interaction mode"></span>
+            <span class="sb-item sb-selected" id="sbSelected" title="Selected cards"></span>
+            <span class="sb-item sb-files" id="sbFiles" title="Total files on canvas"></span>
+            <span class="sb-item sb-zoom" id="sbZoom" title="Zoom level (scroll to zoom)"></span>
+        </div>
+    `;
+    return el;
+}
+
+function render() {
+    if (!bar) return;
+
+    const repoEl = bar.querySelector('#sbRepo') as HTMLElement;
+    const commitEl = bar.querySelector('#sbCommit') as HTMLElement;
+    const modeEl = bar.querySelector('#sbMode') as HTMLElement;
+    const selectedEl = bar.querySelector('#sbSelected') as HTMLElement;
+    const filesEl = bar.querySelector('#sbFiles') as HTMLElement;
+    const zoomEl = bar.querySelector('#sbZoom') as HTMLElement;
+
+    if (repoEl) repoEl.textContent = _repoName ? `📂 ${_repoName}` : '';
+    if (commitEl) commitEl.textContent = _commitHash ? `⊙ ${_commitHash.substring(0, 7)}` : '';
+    if (modeEl) {
+        modeEl.textContent = `${_mode === 'Advanced' ? '🎯' : '✋'} ${_mode}`;
+        modeEl.className = `sb-item sb-mode sb-mode--${_mode.toLowerCase()}`;
+    }
+    if (selectedEl) {
+        selectedEl.textContent = _selectedCount > 0 ? `☑ ${_selectedCount} selected` : '';
+        selectedEl.style.display = _selectedCount > 0 ? '' : 'none';
+    }
+    if (filesEl) filesEl.textContent = `📄 ${_fileCount} files`;
+    if (zoomEl) zoomEl.textContent = `🔍 ${Math.round(_zoom * 100)}%`;
+}
+
+// ─── Public API ──────────────────────────────────────────
+
+export function initStatusBar(context: CanvasContext) {
+    ctx = context;
+    bar = createBar();
+
+    // Insert after canvas-area
+    const canvasArea = document.querySelector('.canvas-area');
+    if (canvasArea) {
+        canvasArea.parentElement?.insertBefore(bar, canvasArea.nextSibling);
+    } else {
+        document.body.appendChild(bar);
+    }
+
+    // Initial sync
+    const state = ctx.snap().context;
+    _zoom = state.zoom || 1;
+    _repoName = (state.repoPath || '').split('/').pop() || '';
+    _fileCount = ctx.fileCards.size;
+    _mode = state.mode === 'advanced' ? 'Advanced' : 'Simple';
+    _commitHash = state.currentCommitHash || '';
+    render();
+}
+
+export function updateStatusBarZoom(zoom: number) {
+    if (Math.round(zoom * 100) === Math.round(_zoom * 100)) return;
+    _zoom = zoom;
+    const el = bar?.querySelector('#sbZoom') as HTMLElement;
+    if (el) el.textContent = `🔍 ${Math.round(zoom * 100)}%`;
+}
+
+export function updateStatusBarFiles(count: number) {
+    _fileCount = count;
+    const el = bar?.querySelector('#sbFiles') as HTMLElement;
+    if (el) el.textContent = `📄 ${count} files`;
+}
+
+export function updateStatusBarSelected(count: number) {
+    _selectedCount = count;
+    const el = bar?.querySelector('#sbSelected') as HTMLElement;
+    if (el) {
+        el.textContent = count > 0 ? `☑ ${count} selected` : '';
+        el.style.display = count > 0 ? '' : 'none';
+    }
+}
+
+export function updateStatusBarRepo(repoPath: string) {
+    _repoName = repoPath.split('/').pop() || repoPath.split('\\').pop() || '';
+    const el = bar?.querySelector('#sbRepo') as HTMLElement;
+    if (el) el.textContent = `📂 ${_repoName}`;
+}
+
+export function updateStatusBarCommit(hash: string) {
+    _commitHash = hash;
+    const el = bar?.querySelector('#sbCommit') as HTMLElement;
+    if (el) el.textContent = hash ? `⊙ ${hash.substring(0, 7)}` : '';
+}
+
+export function updateStatusBarMode(mode: string) {
+    _mode = mode;
+    const el = bar?.querySelector('#sbMode') as HTMLElement;
+    if (el) {
+        el.textContent = `${mode === 'Advanced' ? '🎯' : '✋'} ${mode}`;
+        el.className = `sb-item sb-mode sb-mode--${mode.toLowerCase()}`;
+    }
+}

package/app/lib/symbol-outline.ts

@@ -0,0 +1,212 @@
+// @ts-nocheck
+/**
+ * Symbol outline panel — extracts functions, classes, interfaces, types,
+ * and exports from file content and renders them as a navigable list.
+ */
+
+export interface SymbolEntry {
+    name: string;
+    kind: 'function' | 'class' | 'interface' | 'type' | 'const' | 'variable' | 'enum' | 'method' | 'export';
+    line: number;
+    indent: number; // nesting depth
+}
+
+// ─── Symbol extraction patterns ─────────────────────
+const PATTERNS: Array<{ regex: RegExp; kind: SymbolEntry['kind'] }> = [
+    // JS/TS: export function / async function / function
+    { regex: /^(\s*)(?:export\s+)?(?:async\s+)?function\s+(\w+)/gm, kind: 'function' },
+    // JS/TS: arrow function assigned to const/let/var
+    { regex: /^(\s*)(?:export\s+)?(?:const|let|var)\s+(\w+)\s*=\s*(?:async\s+)?(?:\([^)]*\)|[a-zA-Z_]\w*)\s*=>/gm, kind: 'function' },
+    // JS/TS: class
+    { regex: /^(\s*)(?:export\s+)?(?:abstract\s+)?class\s+(\w+)/gm, kind: 'class' },
+    // TS: interface
+    { regex: /^(\s*)(?:export\s+)?interface\s+(\w+)/gm, kind: 'interface' },
+    // TS: type alias
+    { regex: /^(\s*)(?:export\s+)?type\s+(\w+)\s*[=<]/gm, kind: 'type' },
+    // TS: enum
+    { regex: /^(\s*)(?:export\s+)?enum\s+(\w+)/gm, kind: 'enum' },
+    // JS/TS: exported const (non-arrow)
+    { regex: /^(\s*)export\s+(?:const|let|var)\s+(\w+)\s*[=:]/gm, kind: 'const' },
+    // Class methods
+    { regex: /^(\s+)(?:async\s+)?(\w+)\s*\([^)]*\)\s*[:{]/gm, kind: 'method' },
+    // Python: def / class
+    { regex: /^(\s*)def\s+(\w+)/gm, kind: 'function' },
+    { regex: /^(\s*)class\s+(\w+)/gm, kind: 'class' },
+];
+
+/**
+ * Extract symbols from file content.
+ */
+export function extractSymbols(content: string, fileName: string): SymbolEntry[] {
+    const ext = fileName.split('.').pop()?.toLowerCase() || '';
+    const isPython = ext === 'py';
+    const isCSS = ext === 'css' || ext === 'scss' || ext === 'less';
+    const isJSON = ext === 'json';
+    const isMarkdown = ext === 'md';
+
+    // CSS: extract selectors/rules
+    if (isCSS) return extractCSSSymbols(content);
+    // JSON: extract top-level keys
+    if (isJSON) return extractJSONSymbols(content);
+    // Markdown: extract headings
+    if (isMarkdown) return extractMarkdownSymbols(content);
+
+    const symbols: SymbolEntry[] = [];
+    const lines = content.split('\n');
+
+    for (const pattern of PATTERNS) {
+        // Skip Python-specific patterns for non-Python, and vice versa
+        if (isPython && pattern.kind === 'interface') continue;
+        if (isPython && pattern.kind === 'type') continue;
+        if (isPython && pattern.kind === 'enum') continue;
+
+        pattern.regex.lastIndex = 0;
+        let match;
+        while ((match = pattern.regex.exec(content)) !== null) {
+            const indent = (match[1] || '').length;
+            const name = match[2];
+            if (!name || name === 'if' || name === 'for' || name === 'while' || name === 'switch' || name === 'catch' || name === 'return') continue;
+
+            // Calculate line number
+            const beforeMatch = content.slice(0, match.index);
+            const line = beforeMatch.split('\n').length;
+
+            // Skip methods that are too deeply nested (likely control flow)
+            if (pattern.kind === 'method' && indent < 2) continue;
+
+            symbols.push({ name, kind: pattern.kind, line, indent: Math.floor(indent / 2) });
+        }
+    }
+
+    // Deduplicate (same name + line)
+    const seen = new Set<string>();
+    return symbols
+        .filter(s => {
+            const key = `${s.name}:${s.line}`;
+            if (seen.has(key)) return false;
+            seen.add(key);
+            return true;
+        })
+        .sort((a, b) => a.line - b.line);
+}
+
+function extractCSSSymbols(content: string): SymbolEntry[] {
+    const symbols: SymbolEntry[] = [];
+    const regex = /^([.#@][^\s{]+)\s*\{/gm;
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+        const beforeMatch = content.slice(0, match.index);
+        const line = beforeMatch.split('\n').length;
+        symbols.push({ name: match[1], kind: 'class', line, indent: 0 });
+    }
+    return symbols.sort((a, b) => a.line - b.line);
+}
+
+function extractJSONSymbols(content: string): SymbolEntry[] {
+    const symbols: SymbolEntry[] = [];
+    const regex = /^(\s*)"(\w+)"\s*:/gm;
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+        const indent = (match[1] || '').length;
+        if (indent > 4) continue; // Only top-level and one level deep
+        const beforeMatch = content.slice(0, match.index);
+        const line = beforeMatch.split('\n').length;
+        symbols.push({ name: match[2], kind: 'const', line, indent: Math.floor(indent / 2) });
+    }
+    return symbols.sort((a, b) => a.line - b.line);
+}
+
+function extractMarkdownSymbols(content: string): SymbolEntry[] {
+    const symbols: SymbolEntry[] = [];
+    const regex = /^(#{1,6})\s+(.+)$/gm;
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+        const level = match[1].length;
+        const beforeMatch = content.slice(0, match.index);
+        const line = beforeMatch.split('\n').length;
+        symbols.push({ name: match[2].trim(), kind: 'export', line, indent: level - 1 });
+    }
+    return symbols.sort((a, b) => a.line - b.line);
+}
+
+// ─── Symbol icons ───────────────────────────────────
+const SYMBOL_ICONS: Record<SymbolEntry['kind'], string> = {
+    function: 'ƒ',
+    class: '◆',
+    interface: '◇',
+    type: 'T',
+    const: '●',
+    variable: '○',
+    enum: 'E',
+    method: 'μ',
+    export: '→',
+};
+
+const SYMBOL_COLORS: Record<SymbolEntry['kind'], string> = {
+    function: '#c4b5fd',
+    class: '#86efac',
+    interface: '#67e8f9',
+    type: '#fde68a',
+    const: '#93c5fd',
+    variable: '#9ca3af',
+    enum: '#f9a8d4',
+    method: '#a5b4fc',
+    export: '#fdba74',
+};
+
+/**
+ * Render the symbol outline panel.
+ */
+export function renderSymbolOutline(
+    container: HTMLElement,
+    content: string,
+    fileName: string,
+    onSymbolClick: (line: number) => void
+) {
+    const symbols = extractSymbols(content, fileName);
+
+    if (symbols.length === 0) {
+        container.innerHTML = '<div class="outline-empty">No symbols found</div>';
+        return;
+    }
+
+    container.innerHTML = '';
+
+    // Header
+    const header = document.createElement('div');
+    header.className = 'outline-header';
+    header.innerHTML = `<span class="outline-title">Outline</span><span class="outline-count">${symbols.length}</span>`;
+    container.appendChild(header);
+
+    // Symbol list
+    const list = document.createElement('div');
+    list.className = 'outline-list';
+
+    for (const sym of symbols) {
+        const item = document.createElement('button');
+        item.className = 'outline-item';
+        item.style.paddingLeft = `${12 + sym.indent * 14}px`;
+        item.title = `${sym.kind}: ${sym.name} (line ${sym.line})`;
+
+        const icon = document.createElement('span');
+        icon.className = 'outline-icon';
+        icon.textContent = SYMBOL_ICONS[sym.kind];
+        icon.style.color = SYMBOL_COLORS[sym.kind];
+        item.appendChild(icon);
+
+        const name = document.createElement('span');
+        name.className = 'outline-name';
+        name.textContent = sym.name;
+        item.appendChild(name);
+
+        const lineNo = document.createElement('span');
+        lineNo.className = 'outline-lineno';
+        lineNo.textContent = `:${sym.line}`;
+        item.appendChild(lineNo);
+
+        item.addEventListener('click', () => onSymbolClick(sym.line));
+        list.appendChild(item);
+    }
+
+    container.appendChild(list);
+}

package/app/lib/syntax.ts

@@ -0,0 +1,177 @@
+// @ts-nocheck
+/**
+ * Syntax highlighting & diff HTML builders.
+ */
+import { escapeHtml } from './utils';
+
+// ─── Check if position is inside a string literal ────────
+export function isInsideString(line: string, idx: number): boolean {
+    let inSingle = false, inDouble = false;
+    for (let i = 0; i < idx; i++) {
+        if (line[i] === "'" && !inDouble) inSingle = !inSingle;
+        if (line[i] === '"' && !inSingle) inDouble = !inDouble;
+    }
+    return inSingle || inDouble;
+}
+
+// ─── Syntax-highlighted HTML from file content ───────────
+export function highlightSyntax(content: string, ext: string): string {
+    const lines = content.split('\n');
+    const isJSLike = ['js', 'jsx', 'ts', 'tsx', 'mjs', 'cjs'].includes(ext);
+    const isPyLike = ['py', 'pyw'].includes(ext);
+    const isCSSLike = ['css', 'scss', 'less', 'sass'].includes(ext);
+    const isHTMLLike = ['html', 'htm', 'xml', 'svg', 'jsx', 'tsx'].includes(ext);
+    const isRustGo = ['rs', 'go'].includes(ext);
+    const isJSON = ext === 'json';
+    const isMD = ['md', 'mdx'].includes(ext);
+    const isYAML = ['yml', 'yaml', 'toml'].includes(ext);
+    const isShell = ['sh', 'bash', 'zsh', 'fish', 'bat', 'cmd', 'ps1'].includes(ext);
+    const isSQL = ext === 'sql';
+
+    return lines.map((line, i) => {
+        const lineNum = `<span class="line-num">${String(i + 1).padStart(4, ' ')}</span>`;
+        let highlighted = escapeHtml(line);
+
+        if (isJSON) {
+            highlighted = highlighted
+                .replace(/(&quot;[^&]*?&quot;)\s*:/g, '<span style="color:#7dd3fc">$1</span>:')
+                .replace(/:(\s*)(&quot;[^&]*?&quot;)/g, ':$1<span style="color:#86efac">$2</span>')
+                .replace(/\b(\d+(?:\.\d+)?)\b/g, '<span style="color:#fbbf24">$1</span>')
+                .replace(/\b(true|false|null)\b/g, '<span style="color:#c084fc">$1</span>');
+        } else if (isCSSLike) {
+            highlighted = highlighted
+                .replace(/(\/\*.*?\*\/)/g, '<span style="color:#6b7280;font-style:italic">$1</span>')
+                .replace(/(\/\/.*$)/g, '<span style="color:#6b7280;font-style:italic">$1</span>')
+                .replace(/([.#][\w-]+)/g, '<span style="color:#7dd3fc">$1</span>')
+                .replace(/(:\s*)([^;{}]+)(;)/g, '$1<span style="color:#86efac">$2</span>$3')
+                .replace(/\b(\d+(?:\.\d+)?(?:px|em|rem|%|vh|vw|s|ms)?)\b/g, '<span style="color:#fbbf24">$1</span>');
+        } else if (isMD) {
+            highlighted = highlighted
+                .replace(/^(#{1,6}\s.*)$/, '<span style="color:#c084fc;font-weight:600">$1</span>')
+                .replace(/(\*\*[^*]+\*\*)/g, '<span style="color:#f0abfc;font-weight:600">$1</span>')
+                .replace(/(\*[^*]+\*)/g, '<span style="color:#f0abfc;font-style:italic">$1</span>')
+                .replace(/(`[^`]+`)/g, '<span style="color:#86efac;background:rgba(134,239,172,0.08);padding:1px 3px;border-radius:2px">$1</span>')
+                .replace(/(\[[^\]]+\]\([^)]+\))/g, '<span style="color:#7dd3fc;text-decoration:underline">$1</span>')
+                .replace(/^(\s*[-*+]\s)/g, '<span style="color:#fbbf24">$1</span>')
+                .replace(/^(\s*\d+\.\s)/g, '<span style="color:#fbbf24">$1</span>')
+                .replace(/^(&gt;\s.*)/g, '<span style="color:#6b7280;font-style:italic;border-left:2px solid #6b7280;padding-left:8px">$1</span>');
+        } else if (isYAML) {
+            highlighted = highlighted
+                .replace(/(#.*$)/g, '<span style="color:#6b7280;font-style:italic">$1</span>')
+                .replace(/^(\s*[\w.-]+)(\s*[:=])/g, '<span style="color:#7dd3fc">$1</span>$2')
+                .replace(/:\s*(&quot;[^&]*?&quot;)/g, ': <span style="color:#86efac">$1</span>')
+                .replace(/:\s*(&amp;#x27;[^&]*?&amp;#x27;)/g, ': <span style="color:#86efac">$1</span>')
+                .replace(/\b(true|false|yes|no|null|~)\b/gi, '<span style="color:#c084fc">$1</span>')
+                .replace(/\b(\d+(?:\.\d+)?)\b/g, '<span style="color:#fbbf24">$1</span>')
+                .replace(/^(\s*-\s)/g, '<span style="color:#fbbf24">$1</span>')
+                .replace(/([\w.-]+\])/g, '<span style="color:#c084fc;font-weight:500">$1</span>');
+        } else if (isShell) {
+            highlighted = highlighted
+                .replace(/(#.*$)/g, '<span style="color:#6b7280;font-style:italic">$1</span>')
+                .replace(/(\$[\w{][^}\s]*}?)/g, '<span style="color:#7dd3fc">$1</span>')
+                .replace(/(&quot;[^&]*?&quot;)/g, '<span style="color:#86efac">$1</span>')
+                .replace(/(&amp;#x27;[^&]*?&amp;#x27;)/g, '<span style="color:#86efac">$1</span>');
+            const shKeywords = 'if|then|else|elif|fi|for|while|do|done|case|esac|function|return|exit|echo|export|source|local|set|unset|cd|mkdir|rm|cp|mv|cat|grep|sed|awk|chmod|chown';
+            highlighted = highlighted.replace(
+                new RegExp(`\\b(${shKeywords})\\b`, 'g'),
+                '<span style="color:#c084fc">$1</span>'
+            );
+        } else if (isSQL) {
+            const sqlKeywords = 'SELECT|FROM|WHERE|INSERT|INTO|UPDATE|SET|DELETE|CREATE|DROP|ALTER|TABLE|INDEX|VIEW|JOIN|LEFT|RIGHT|INNER|OUTER|ON|AND|OR|NOT|IN|EXISTS|BETWEEN|LIKE|ORDER|BY|GROUP|HAVING|LIMIT|OFFSET|UNION|ALL|AS|IS|NULL|PRIMARY|KEY|FOREIGN|REFERENCES|UNIQUE|DEFAULT|CHECK|CONSTRAINT|VALUES|COUNT|SUM|AVG|MIN|MAX|DISTINCT';
+            highlighted = highlighted
+                .replace(/(--.*$)/g, '<span style="color:#6b7280;font-style:italic">$1</span>')
+                .replace(/(&amp;#x27;[^&]*?&amp;#x27;)/g, '<span style="color:#86efac">$1</span>');
+            highlighted = highlighted.replace(
+                new RegExp(`\\b(${sqlKeywords})\\b`, 'gi'),
+                '<span style="color:#c084fc">$1</span>'
+            );
+            highlighted = highlighted.replace(/\b(\d+(?:\.\d+)?)\b/g, '<span style="color:#fbbf24">$1</span>');
+        } else if (isJSLike || isPyLike || isRustGo) {
+            const commentIdx = highlighted.indexOf('//');
+            const hashIdx = isPyLike ? highlighted.indexOf('#') : -1;
+            if (commentIdx >= 0 && !isInsideString(line, line.indexOf('//'))) {
+                const before = highlighted.substring(0, commentIdx);
+                const comment = highlighted.substring(commentIdx);
+                highlighted = before + `<span style="color:#6b7280;font-style:italic">${comment}</span>`;
+            } else if (hashIdx >= 0 && isPyLike && !isInsideString(line, line.indexOf('#'))) {
+                const before = highlighted.substring(0, hashIdx);
+                const comment = highlighted.substring(hashIdx);
+                highlighted = before + `<span style="color:#6b7280;font-style:italic">${comment}</span>`;
+            }
+
+            highlighted = highlighted
+                .replace(/(&quot;(?:[^&]|&(?!quot;))*?&quot;)/g, '<span style="color:#86efac">$1</span>')
+                .replace(/(&amp;#x27;(?:[^&]|&(?!#x27;))*?&amp;#x27;)/g, '<span style="color:#86efac">$1</span>')
+                .replace(/(`[^`]*?`)/g, '<span style="color:#86efac">$1</span>');
+
+            if (isJSLike || isPyLike) {
+                highlighted = highlighted.replace(
+                    /(@[\w.]+)/g,
+                    '<span style="color:#fb923c">$1</span>'
+                );
+            }
+
+            const keywords = isJSLike
+                ? 'const|let|var|function|return|if|else|for|while|do|switch|case|break|continue|try|catch|finally|throw|new|delete|typeof|instanceof|in|of|class|extends|super|import|export|from|default|async|await|yield|this|null|undefined|true|false|void|static|get|set|type|interface|enum|as|is'
+                : isPyLike
+                    ? 'def|class|if|elif|else|for|while|return|import|from|as|try|except|finally|raise|with|yield|lambda|pass|break|continue|and|or|not|in|is|True|False|None|self|async|await'
+                    : 'fn|let|mut|const|if|else|for|while|loop|match|return|struct|enum|impl|trait|use|mod|pub|self|Self|true|false|async|await|type|func|go|defer|chan|select|range|package|import|var';
+            highlighted = highlighted.replace(
+                new RegExp(`\\b(${keywords})\\b`, 'g'),
+                '<span style="color:#c084fc">$1</span>'
+            );
+
+            highlighted = highlighted.replace(/\b(\d+(?:\.\d+)?(?:e[+-]?\d+)?)\b/gi, '<span style="color:#fbbf24">$1</span>');
+            highlighted = highlighted.replace(/\b([A-Z][a-zA-Z0-9_]*)\b/g, '<span style="color:#7dd3fc">$1</span>');
+        } else if (isHTMLLike) {
+            highlighted = highlighted
+                .replace(/(&lt;\/?[\w-]+)/g, '<span style="color:#c084fc">$1</span>')
+                .replace(/([\w-]+)(=)/g, '<span style="color:#7dd3fc">$1</span>$2')
+                .replace(/(&quot;[^&]*?&quot;)/g, '<span style="color:#86efac">$1</span>');
+        }
+
+        return `<span class="diff-line">${lineNum}${highlighted}</span>`;
+    }).join('\n');
+}
+
+// ─── Build diff HTML for the modal view ──────────────────
+export function buildModalDiffHTML(file: any): string {
+    let html = '';
+
+    if (file.status === 'added' && file.content) {
+        const lines = file.content.split('\n');
+        html = lines.map((line: string, i: number) =>
+            `<span class="diff-line diff-add" data-line="${i + 1}"><span class="line-num">${String(i + 1).padStart(4, ' ')}</span>+  ${escapeHtml(line)}</span>`
+        ).join('\n');
+    } else if (file.status === 'deleted' && file.content) {
+        const lines = file.content.split('\n');
+        html = lines.map((line: string, i: number) =>
+            `<span class="diff-line diff-del" data-line="${i + 1}"><span class="line-num">${String(i + 1).padStart(4, ' ')}</span>-  ${escapeHtml(line)}</span>`
+        ).join('\n');
+    } else if (file.status === 'modified' && file.hunks?.length > 0) {
+        const hunkSections = file.hunks.map((hunk: any) => {
+            const header = `@@ -${hunk.oldStart},${hunk.oldCount} +${hunk.newStart},${hunk.newCount} @@${hunk.context ? ' ' + escapeHtml(hunk.context) : ''}`;
+            let oldLine = hunk.oldStart;
+            let newLine = hunk.newStart;
+
+            const lineItems = hunk.lines.map((l: any) => {
+                if (l.type === 'add') {
+                    const ln = newLine++;
+                    return `<span class="diff-line diff-add" data-line="${ln}"><span class="line-num">${String(ln).padStart(4, ' ')}</span>+  ${escapeHtml(l.content)}</span>`;
+                } else if (l.type === 'del') {
+                    const ln = oldLine++;
+                    return `<span class="diff-line diff-del" data-line="${ln}"><span class="line-num">${String(ln).padStart(4, ' ')}</span>-  ${escapeHtml(l.content)}</span>`;
+                } else {
+                    oldLine++; newLine++;
+                    const ln = newLine - 1;
+                    return `<span class="diff-line diff-ctx" data-line="${ln}"><span class="line-num">${String(ln).padStart(4, ' ')}</span>   ${escapeHtml(l.content)}</span>`;
+                }
+            }).join('\n');
+
+            return `<span class="diff-line diff-hunk-header-line" style="color:var(--accent-tertiary);background:rgba(124,58,237,0.08);font-weight:500;">${header}</span>\n${lineItems}`;
+        });
+        html = hunkSections.join('\n\n');
+    }
+
+    return html || '<span style="color: var(--text-muted); font-style: italic;">No diff available</span>';
+}