gitmaps 1.0.0 → 1.1.1

package/app/lib/cards.tsx

@@ -1,914 +1,1361 @@
-// @ts-nocheck
-/**
- * File cards — creation (diff + all-files), interaction (click/drag/resize),
- * selection, arrangement, and the file modal.
- */
-import { measure } from 'measure-fn';
-import { render } from 'melina/client';
-import type { CanvasContext } from './context';
-import { escapeHtml, getFileIcon, getFileIconClass, showToast } from './utils';
-import { hideSelectedFiles } from './hidden-files';
-import { savePosition, getPositionKey, isPathExpandedInPositions, setPathExpandedInPositions } from './positions';
-import { updateMinimap, updateCanvasTransform, updateZoomUI, jumpToFile } from './canvas';
-import { updateStatusBarSelected } from './status-bar';
-import { renderConnections, scheduleRenderConnections, setupConnectionDrag, hasPendingConnection } from './connections';
-import { highlightSyntax, buildModalDiffHTML } from './syntax';
-import { filterFileContentByLayer, layerState, createLayer, addFileToLayer, removeFileFromLayer, getActiveLayer } from './layers';
-import { openFileChatInModal } from './chat';
-import { buildDiffMarkerStrip as _buildDiffMarkerStrip, setupDeletedLinesOverlay as _setupDeletedLinesOverlay } from './card-diff-markers';
-import { updateHiddenLinesIndicator as _updateHiddenLinesIndicator } from './card-expand';
-
-// ─── Constants ──────────────────────────────────────────
-const CORNER_CURSORS = { tl: 'nwse-resize', tr: 'nesw-resize', bl: 'nesw-resize', br: 'nwse-resize' };
-
-// Max lines rendered in DOM for collapsed (folded) cards.
-// Files with more lines than this will show a truncated view until expanded with F.
-// This is the #1 performance optimization — a 10K-line file produces 10K <span> elements
-// which all participate in layout during pan/zoom, crushing frame rate.
-const VISIBLE_LINE_LIMIT = 120;
-
-const cardFileData = new WeakMap<HTMLElement, any>();
-
-// ─── Accessor for cardFileData (used by card-expand.ts via lazy require) ──
-export function _getCardFileData(card: HTMLElement) { return cardFileData.get(card); }
-
-// ─── Expanded state persistence ─────────────────────────
-// NOTE: Expanded state is now stored in the positions system (positions.ts)
-// so it automatically syncs to the server for logged-in users.
-// The old localStorage-only functions below are kept as thin wrappers
-// for backward compatibility but should not be used directly.
-// Use isPathExpandedInPositions / setPathExpandedInPositions from positions.ts.
-
-/** @deprecated Use isPathExpandedInPositions(ctx, filePath) instead */
-export function isPathExpanded(filePath: string): boolean {
-    // Legacy fallback: check localStorage for old data
-    // New code should use isPathExpandedInPositions which checks ctx.positions
-    const key = _getExpandedStorageKey();
-    if (!key) return false;
-    try {
-        const raw = localStorage.getItem(key);
-        if (raw) return new Set(JSON.parse(raw)).has(filePath);
-    } catch { }
-    return false;
-}
-
-/** @deprecated Use setPathExpandedInPositions(ctx, filePath, expanded) instead */
-export function setPathExpanded(filePath: string, expanded: boolean) {
-    // Legacy: only used if ctx is not available
-    const key = _getExpandedStorageKey();
-    if (!key) return;
-    try {
-        const raw = localStorage.getItem(key);
-        const paths = raw ? new Set(JSON.parse(raw)) : new Set();
-        if (expanded) paths.add(filePath);
-        else paths.delete(filePath);
-        if (paths.size === 0) localStorage.removeItem(key);
-        else localStorage.setItem(key, JSON.stringify(Array.from(paths)));
-    } catch { }
-}
-
-function _getExpandedStorageKey(): string | null {
-    const hashSlug = decodeURIComponent(window.location.hash.replace('#', ''));
-    const repo = (hashSlug && localStorage.getItem(`gitcanvas:slug:${hashSlug}`)) || localStorage.getItem('gitcanvas:lastRepo');
-    if (!repo) return null;
-    return `gitcanvas:expanded:${repo}`;
-}
-
-// ─── Selection highlights ───────────────────────────────
-export function updateSelectionHighlights(ctx: CanvasContext) {
-    const selected = ctx.snap().context.selectedCards;
-    ctx.fileCards.forEach((card, path) => {
-        card.classList.toggle('selected', selected.includes(path));
-    });
-    updateStatusBarSelected(selected.length);
-}
-
-export function clearSelectionHighlights(ctx: CanvasContext) {
-    ctx.fileCards.forEach(card => card.classList.remove('selected'));
-}
-
-// ─── Arrange toolbar visibility ─────────────────────────
-export function updateArrangeToolbar(ctx: CanvasContext) {
-    measure('arrange:updateToolbar', () => {
-        const toolbar = document.getElementById('arrangeToolbar');
-        if (!toolbar) return;
-        const selected = ctx.snap().context.selectedCards;
-        toolbar.style.display = selected.length >= 2 ? 'flex' : 'none';
-    });
-}
-
-// ─── Corner detection for resize ────────────────────────
-function isNearCorner(e: MouseEvent, card: HTMLElement, cornerSize: number, zoom: number): string | null {
-    const rect = card.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-    const w = rect.width;
-    const h = rect.height;
-    // Scale corner hit-area: base size + proportion of card size, capped at 80px
-    // This makes large cards much easier to grab at corners
-    const dynamicCorner = Math.min(80, Math.max(cornerSize, Math.min(w, h) * 0.12));
-    const c = dynamicCorner * zoom;
-
-    if (x > w - c && y > h - c) return 'br';
-    if (x < c && y > h - c) return 'bl';
-    if (x > w - c && y < c) return 'tr';
-    if (x < c && y < c) return 'tl';
-    return null;
-}
-
-// ─── Setup card interaction (click-select + drag) ────────
-export function setupCardInteraction(ctx: CanvasContext, card: HTMLElement, commitHash: string) {
-    let action = null; // null | 'move' | 'pending'
-    let startX: number, startY: number;
-    let moveStartPositions: any[] = [];
-    let rafPending = false;
-    const DRAG_THRESHOLD = 3;
-
-    function onMouseDown(e) {
-        // Only respond to left-click (button 0). Middle-click/right-click should not start card interaction.
-        if (e.button !== 0) return;
-        if (e.target.tagName === 'BUTTON' || e.target.closest('button')) return;
-        const bodyEl = e.target.closest('.file-card-body');
-        if (bodyEl && (e.offsetX > e.target.clientWidth || e.offsetY > e.target.clientHeight)) return;
-
-        // If a connection is pending and the click is inside body (on a diff-line),
-        // don't start drag — let the connection click handler handle it
-        if (hasPendingConnection() && bodyEl && (e.target as HTMLElement).closest('.diff-line')) return;
-
-        e.stopPropagation();
-        startX = e.clientX;
-        startY = e.clientY;
-        action = 'pending';
-
-        window.addEventListener('mousemove', onMouseMove);
-        window.addEventListener('mouseup', onMouseUp);
-    }
-
-    function onMouseMove(e) {
-        const state = ctx.snap().context;
-        const dx = (e.clientX - startX) / state.zoom;
-        const dy = (e.clientY - startY) / state.zoom;
-
-        if (action === 'pending') {
-            const screenDist = Math.sqrt((e.clientX - startX) ** 2 + (e.clientY - startY) ** 2);
-            if (screenDist < DRAG_THRESHOLD) return;
-
-            action = 'move';
-            card.style.cursor = 'move';
-
-            const selected = ctx.snap().context.selectedCards;
-            const cardPath = card.dataset.path;
-            if (!selected.includes(cardPath)) {
-                if (!e.shiftKey && !e.ctrlKey) {
-                    ctx.actor.send({ type: 'SELECT_CARD', path: cardPath, shift: false });
-                } else {
-                    ctx.actor.send({ type: 'SELECT_CARD', path: cardPath, shift: true });
-                }
-                updateSelectionHighlights(ctx);
-                updateArrangeToolbar(ctx);
-            }
-
-            const nowSelected = ctx.snap().context.selectedCards;
-            moveStartPositions = [];
-            nowSelected.forEach(path => {
-                const c = ctx.fileCards.get(path);
-                if (c) {
-                    c.style.cursor = 'grabbing';
-                    moveStartPositions.push({
-                        card: c,
-                        path,
-                        startLeft: parseInt(c.style.left) || 0,
-                        startTop: parseInt(c.style.top) || 0,
-                    });
-                }
-            });
-        }
-
-        if (action === 'move') {
-            moveStartPositions.forEach(info => {
-                info.card.style.left = `${info.startLeft + dx}px`;
-                info.card.style.top = `${info.startTop + dy}px`;
-            });
-            // Throttle expensive DOM updates to once per frame
-            if (!rafPending) {
-                rafPending = true;
-                requestAnimationFrame(() => {
-                    rafPending = false;
-                    scheduleRenderConnections(ctx);
-                    updateMinimap(ctx);
-                });
-            }
-            return;
-        }
-    }
-
-    function onMouseUp(e) {
-        window.removeEventListener('mousemove', onMouseMove);
-        window.removeEventListener('mouseup', onMouseUp);
-
-        if (action === 'pending') {
-            if (e.shiftKey || e.ctrlKey) {
-                ctx.actor.send({ type: 'SELECT_CARD', path: card.dataset.path, shift: true });
-            } else {
-                ctx.actor.send({ type: 'SELECT_CARD', path: card.dataset.path, shift: false });
-            }
-            updateSelectionHighlights(ctx);
-            updateArrangeToolbar(ctx);
-        } else if (action === 'move') {
-            document.body.style.cursor = '';
-            card.style.cursor = '';
-            moveStartPositions.forEach(info => {
-                info.card.style.cursor = '';
-            });
-            moveStartPositions.forEach(info => {
-                const x = parseInt(info.card.style.left) || 0;
-                const y = parseInt(info.card.style.top) || 0;
-                savePosition(ctx, commitHash, info.path, x, y);
-            });
-            moveStartPositions = [];
-        }
-
-        action = null;
-    }
-
-    card.addEventListener('mousedown', onMouseDown);
-
-    // ── Double-click to open in editor modal ──
-    card.addEventListener('dblclick', (e) => {
-        // Don't trigger on buttons
-        if ((e.target as HTMLElement).tagName === 'BUTTON' || (e.target as HTMLElement).closest('button')) return;
-        e.preventDefault();
-        e.stopPropagation();
-
-        const filePath = card.dataset.path;
-        if (filePath) {
-            const file = ctx.allFilesData?.find(f => f.path === filePath) ||
-                { path: filePath, name: filePath.split('/').pop(), lines: 0 };
-            // Read visible line from canvas text renderer scroll position
-            const renderer = (card as any)._canvasTextRenderer;
-            const initialLine = renderer ? renderer.getVisibleLine?.() : undefined;
-            import('./file-modal').then(({ openFileModal }) => openFileModal(ctx, file, undefined, initialLine));
-        }
-    });
-
-    // ── Right-click context menu ──
-    card.addEventListener('contextmenu', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        showCardContextMenu(ctx, card, e.clientX, e.clientY);
-    });
-}
-
-// ─── Context menu & file history (extracted to card-context-menu.tsx) ────
-import { showCardContextMenu, showFileHistory } from './card-context-menu';
-export { showCardContextMenu, showFileHistory };
-
-// ─── Arrangement functions (extracted to card-arrangement.ts) ────
-import { arrangeRow, arrangeColumn, arrangeGrid } from './card-arrangement';
-export { arrangeRow, arrangeColumn, arrangeGrid };
-
-// ─── Scroll debounce ────────────────────────────────────
-export function debounceSaveScroll(ctx: CanvasContext, filePath: string, scrollTop: number) {
-    if (ctx.scrollTimers[filePath]) clearTimeout(ctx.scrollTimers[filePath]);
-    ctx.scrollTimers[filePath] = setTimeout(() => {
-        ctx.actor.send({ type: 'SAVE_SCROLL', path: filePath, scrollTop });
-        savePosition(ctx, 'scroll', filePath, scrollTop, 0);
-    }, 300);
-}
-
-// ─── JSX sub-components for file card content ───────────
-
-function DiffLine({ type, lineNum, content }: { type: string; lineNum: number; content: string }) {
-    return (
-        <span className={`diff-line diff-${type}`} data-line={lineNum}>
-            <span className="line-num">{String(lineNum).padStart(4, ' ')}</span>
-            {content}
-        </span>
-    );
-}
-
-function DiffHunk({ hunk, hunkIdx }: { hunk: any; hunkIdx: number }) {
-    const header = `@@ -${hunk.oldStart},${hunk.oldCount} +${hunk.newStart},${hunk.newCount} @@${hunk.context ? ' ' + hunk.context : ''}`;
-    let oldLine = hunk.oldStart;
-    let newLine = hunk.newStart;
-
-    const currentItems: { type: string; ln: number; content: string }[] = [];
-    const previousItems: { type: string; ln: number; content: string }[] = [];
-
-    hunk.lines.forEach((l: any) => {
-        if (l.type === 'add') {
-            currentItems.push({ type: 'add', ln: newLine++, content: l.content });
-        } else if (l.type === 'del') {
-            previousItems.push({ type: 'del', ln: oldLine++, content: l.content });
-        } else {
-            const curLn = newLine++;
-            const prevLn = oldLine++;
-            currentItems.push({ type: 'ctx', ln: curLn, content: l.content });
-            previousItems.push({ type: 'ctx', ln: prevLn, content: l.content });
-        }
-    });
-
-    const hasDeletions = previousItems.some(l => l.type === 'del');
-
-    function toggle(e: Event, view: string) {
-        e.stopPropagation();
-        const hunkEl = (e.target as HTMLElement).closest('.diff-hunk');
-        if (!hunkEl) return;
-        hunkEl.querySelectorAll('.hunk-toggle-btn').forEach(b => b.classList.remove('active'));
-        (e.target as HTMLElement).classList.add('active');
-        const cur = hunkEl.querySelector('.hunk-pane--current') as HTMLElement;
-        const prev = hunkEl.querySelector('.hunk-pane--previous') as HTMLElement;
-        if (cur) cur.style.display = view === 'current' ? '' : 'none';
-        if (prev) prev.style.display = view === 'previous' ? '' : 'none';
-    }
-
-    return (
-        <div className="diff-hunk">
-            <div className="diff-hunk-header">
-                <span className="hunk-range">{header}</span>
-                {hasDeletions ? (
-                    <span className="hunk-view-toggle" data-hunk={hunkIdx}>
-                        <button className="hunk-toggle-btn active" data-view="current" onclick={(e) => toggle(e, 'current')}>Current</button>
-                        <button className="hunk-toggle-btn" data-view="previous" onclick={(e) => toggle(e, 'previous')}>Previous</button>
-                    </span>
-                ) : null}
-            </div>
-            <div className="diff-hunk-body">
-                <div className="hunk-pane hunk-pane--current">
-                    <pre><code>{currentItems.map(l => <DiffLine type={l.type} lineNum={l.ln} content={l.content} />)}</code></pre>
-                </div>
-                <div className="hunk-pane hunk-pane--previous" style="display:none">
-                    <pre><code>{previousItems.map(l => <DiffLine type={l.type} lineNum={l.ln} content={l.content} />)}</code></pre>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-function FileCardContent({ file }: { file: any }) {
-    if (file.status === 'added' && file.content) {
-        const lines = file.content.split('\n');
-        return (
-            <div className="file-content-preview">
-                <pre><code>{lines.map((line, i) => (!file.visibleLineIndices || file.visibleLineIndices.has(i)) ? <DiffLine type="add" lineNum={i + 1} content={line} /> : null)}</code></pre>
-            </div>
-        );
-    }
-    if (file.status === 'deleted' && file.content) {
-        const lines = file.content.split('\n');
-        return (
-            <div className="file-content-preview">
-                <pre><code>{lines.map((line, i) => (!file.visibleLineIndices || file.visibleLineIndices.has(i)) ? <DiffLine type="del" lineNum={i + 1} content={line} /> : null)}</code></pre>
-            </div>
-        );
-    }
-    if ((file.status === 'modified' || file.status === 'renamed' || file.status === 'copied') && file.hunks?.length > 0) {
-        return (
-            <div className="file-content-preview">
-                {file.hunks.map((hunk, idx) => <DiffHunk hunk={hunk} hunkIdx={idx} />)}
-            </div>
-        );
-    }
-    if ((file.status === 'renamed' || file.status === 'copied') && (!file.hunks || file.hunks.length === 0)) {
-        const simText = file.similarity ? ` (${file.similarity}% similar)` : '';
-        return (
-            <div className="file-content-preview">
-                <pre><code><span className="rename-notice">{'File ' + file.status + simText + '\nNo content changes'}</span></code></pre>
-            </div>
-        );
-    }
-    const msg = file.contentError || 'No changes to display';
-    return (
-        <div className="file-content-preview">
-            <pre><code><span className="error-notice">{msg}</span></code></pre>
-        </div>
-    );
-}
-
-const STATUS_COLORS: Record<string, string> = { added: '#22c55e', modified: '#eab308', deleted: '#ef4444', renamed: '#a78bfa', copied: '#60a5fa' };
-const STATUS_LABELS: Record<string, string> = { added: '+ ADDED', modified: '~ MODIFIED', deleted: '- DELETED', renamed: '→ RENAMED', copied: '⊕ COPIED' };
-
-function _handleChatClick(ctx: CanvasContext, file: any) {
-    const filePath = file.path;
-    const content = file.content || '';
-    const status = file.status || '';
-
-    let extraContext = '';
-
-    if (file.hunks && file.hunks.length > 0) {
-        extraContext += `\n--- DIFF SUMMARY ---\n`;
-        extraContext += file.hunks.map((h: any) =>
-            `@@ -${h.oldStart},${h.oldCount} +${h.newStart},${h.newCount} @@\n` +
-            h.lines.map((l: any) => `${l.type === 'add' ? '+' : l.type === 'del' ? '-' : ' '} ${l.content}`).join('\n')
-        ).join('\n');
-    }
-
-    const connections = ctx.snap().context.connections;
-    const relatedLinks = connections.filter((c: any) => c.sourceFile === filePath || c.targetFile === filePath);
-
-    if (relatedLinks.length > 0) {
-        extraContext += `\n\n--- ARCHITECTURE CONNECTIONS ---\n`;
-        extraContext += `This file is logically connected to the following modules in the visual graph:\n`;
-        relatedLinks.forEach((c: any) => {
-            if (c.sourceFile === filePath) {
-                extraContext += `- Outbound dependency on \`${c.targetFile}\` (Lines ${c.sourceLineStart}-${c.sourceLineEnd} -> Lines ${c.targetLineStart}-${c.targetLineEnd}). Note: "${c.comment || 'None'}"\n`;
-            } else {
-                extraContext += `- Inbound dependency from \`${c.sourceFile}\` (Lines ${c.sourceLineStart}-${c.sourceLineEnd} -> Lines ${c.targetLineStart}-${c.targetLineEnd}). Note: "${c.comment || 'None'}"\n`;
-            }
-        });
-    }
-
-    openFileChatInModal(filePath, content, status, extraContext);
-}
-
-// ─── Create file card (commit diff) ─────────────────────
-export function createFileCard(ctx: CanvasContext, file: any, x: number, y: number, commitHash: string, skipInteraction = false): HTMLElement {
-    const card = document.createElement('div');
-    card.className = `file-card file-card--${file.status || 'modified'}`;
-    card.style.left = `${x}px`;
-    card.style.top = `${y}px`;
-    card.dataset.path = file.path;
-
-    if (file.layerSections && file.layerSections.length > 0) {
-        if (file.content) {
-            const { visibleLineIndices } = filterFileContentByLayer(file.content, file.layerSections);
-            file.visibleLineIndices = visibleLineIndices;
-        }
-        if (file.hunks) {
-            // Very simplistic filtering for hunks
-            file.hunks = file.hunks.filter(h => {
-                // If the hunk's content has ANY line overlapping with visible lines, keep it. But we don't have exactly the full file contents to compare.
-                // Keep all hunks for now if layers view, else users might miss diffs.
-                return true;
-            });
-        }
-    }
-
-    // Apply saved size
-    const posKey = getPositionKey(file.path, commitHash);
-    if (ctx.positions.has(posKey)) {
-        const pos = ctx.positions.get(posKey);
-        if (pos.width) card.style.width = `${pos.width}px`;
-        if (pos.height) {
-            card.style.height = `${pos.height}px`;
-            card.style.maxHeight = `${pos.height}px`;
-        }
-    }
-
-    const ext = file.name.split('.').pop().toLowerCase();
-    const iconClass = getFileIconClass(ext);
-    const statusColor = STATUS_COLORS[file.status] || '#a855f7';
-    const statusLabel = STATUS_LABELS[file.status] || file.status?.toUpperCase() || 'CHANGED';
-    const hunkCount = file.hunks?.length || 0;
-    const metaInfo = hunkCount > 0
-        ? `${hunkCount} hunk${hunkCount > 1 ? 's' : ''}`
-        : `${file.lines || 0} lines`;
-
-    const iconSvg = getFileIcon(file.type, ext);
-
-    // Render JSX into card
-    render(
-        <>
-            <div className="file-card-header" style={`border-left: 4px solid ${statusColor}`}>
-                <div className={`file-icon ${iconClass}`} dangerouslySetInnerHTML={{ __html: iconSvg }} />
-                <span className="file-name">{file.name}</span>
-                <span className="file-status" style={`background: ${statusColor}20; color: ${statusColor}; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600;`}>{statusLabel}</span>
-                <span style="font-size: 10px; color: var(--text-muted); margin-left: auto;">{metaInfo}</span>
-
-            </div>
-            <div className="file-card-body">
-                {file.oldPath ? (
-                    <div className="file-rename-path">
-                        {file.oldPath} → {file.path}
-                        {file.similarity ? <span className="rename-similarity">{file.similarity}%</span> : null}
-                    </div>
-                ) : (
-                    <div className="file-path">{file.path}</div>
-                )}
-                <FileCardContent file={file} />
-            </div>
-        </>,
-        card
-    );
-
-    cardFileData.set(card, file);
-
-    // When managed by CardManager, skip legacy drag/resize/z-order setup
-    // but ALWAYS attach context menu, double-click, and click-to-select
-    if (!skipInteraction) {
-        setupCardInteraction(ctx, card, commitHash);
-    } else {
-        card.addEventListener('contextmenu', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            showCardContextMenu(ctx, card, e.clientX, e.clientY);
-        });
-        card.addEventListener('dblclick', (e) => {
-            if ((e.target as HTMLElement).tagName === 'BUTTON' || (e.target as HTMLElement).closest('button')) return;
-            e.preventDefault();
-            e.stopPropagation();
-            const filePath = card.dataset.path;
-            if (filePath) {
-                const file = ctx.allFilesData?.find(f => f.path === filePath) ||
-                    { path: filePath, name: filePath.split('/').pop(), lines: 0 };
-                import('./file-modal').then(({ openFileModal }) => openFileModal(ctx, file));
-            }
-        });
-        // Smart selection: don't deselect others on mousedown if card is already selected
-        // This allows multi-drag to work. Deselection is deferred to mouseup (click without drag).
-        let _dragOccurred = false;
-        card.addEventListener('mousedown', (e) => {
-            if (e.button !== 0) return;
-            if ((e.target as HTMLElement).closest('button') || (e.target as HTMLElement).closest('.connect-btn')) return;
-            const filePath = card.dataset.path || '';
-            const multi = e.shiftKey || e.ctrlKey;
-            const selected = ctx.snap().context.selectedCards;
-            const alreadySelected = selected.includes(filePath);
-            _dragOccurred = false;
-
-            if (multi) {
-                // Shift/Ctrl: toggle selection
-                ctx.actor.send({ type: 'SELECT_CARD', path: filePath, shift: true });
-                try {
-                    const { getCardManager } = require('./galaxydraw-bridge');
-                    const cm = getCardManager();
-                    if (cm) {
-                        if (alreadySelected) cm.deselect(filePath);
-                        else cm.select(filePath, true);
-                    }
-                } catch { }
-            } else if (!alreadySelected) {
-                // Not selected yet → replace selection with this card
-                ctx.actor.send({ type: 'SELECT_CARD', path: filePath, shift: false });
-                try {
-                    const { getCardManager } = require('./galaxydraw-bridge');
-                    const cm = getCardManager();
-                    if (cm) cm.select(filePath, false);
-                } catch { }
-            }
-            // If already selected without shift → do nothing on mousedown (allow multi-drag)
-            // Deselection of others happens on mouseup below
-
-            updateSelectionHighlights(ctx);
-            updateArrangeToolbar(ctx);
-        });
-        card.addEventListener('mouseup', (e) => {
-            if (e.button !== 0) return;
-            if ((e.target as HTMLElement).closest('button') || (e.target as HTMLElement).closest('.connect-btn')) return;
-            // Only deselect others if: no shift, card was already selected, and no drag happened
-            const filePath = card.dataset.path || '';
-            const multi = e.shiftKey || e.ctrlKey;
-            if (multi) return; // shift-click handled in mousedown
-            const selected = ctx.snap().context.selectedCards;
-            if (selected.length > 1 && selected.includes(filePath) && !_dragOccurred) {
-                ctx.actor.send({ type: 'SELECT_CARD', path: filePath, shift: false });
-                try {
-                    const { getCardManager } = require('./galaxydraw-bridge');
-                    const cm = getCardManager();
-                    if (cm) cm.select(filePath, false);
-                } catch { }
-                updateSelectionHighlights(ctx);
-                updateArrangeToolbar(ctx);
-            }
-        });
-        // Track drag state from engine for mouseup deselection logic
-        card.addEventListener('mousemove', () => { _dragOccurred = true; });
-    }
-    setupConnectionDrag(ctx, card, file.path);
-
-    // Expand button → open modal
-    const expandBtn = card.querySelector('.expand-btn');
-    if (expandBtn) {
-        expandBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            openFileModal(ctx, file);
-        });
-    }
-
-    // AI button → open chat
-    const aiBtn = card.querySelector('.ai-btn');
-    if (aiBtn) {
-        aiBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            _handleChatClick(ctx, file);
-        });
-    }
-
-    // Scroll listener
-    const body = card.querySelector('.file-card-body');
-    if (body) {
-        body.addEventListener('scroll', () => {
-            scheduleRenderConnections(ctx);
-        });
-    }
-
-    // Listen for resize from indicator drag
-    card.addEventListener('card-resized', ((e: CustomEvent) => {
-        const { path: p, width: w, height: h } = e.detail;
-        const state = ctx.snap().context;
-        const ch = state.currentCommitHash || 'allfiles';
-        ctx.actor.send({ type: 'RESIZE_CARD', path: p, width: w, height: h });
-        savePosition(ctx, ch, p, parseInt(card.style.left) || 0, parseInt(card.style.top) || 0, w, h);
-        renderConnections(ctx);
-    }) as EventListener);
-
-    return card;
-}
-
-
-// ─── Build file content HTML with optional line limiting ─
-// When isExpanded=false, only render VISIBLE_LINE_LIMIT lines to keep DOM small.
-// When isExpanded=true (F key), render all lines for full scrolling.
-export function _buildFileContentHTML(
-    content: string,
-    layerSections: any,
-    addedLines: Set<number>,
-    deletedBeforeLine: Map<number, string[]>,
-    isAllAdded: boolean,
-    isAllDeleted: boolean,
-    isExpanded: boolean,
-    totalFileLines: number
-): string {
-    const { filteredContent, visibleLineIndices } = filterFileContentByLayer(content, layerSections);
-    const lines = content.split('\n');
-    const totalVisible = Array.from(visibleLineIndices).length;
-    const limit = isExpanded ? Infinity : VISIBLE_LINE_LIMIT;
-    let code = '';
-    let renderedCount = 0;
-
-    for (let i = 0; i < lines.length; i++) {
-        if (!visibleLineIndices.has(i)) continue;
-        if (renderedCount >= limit) break;
-
-        const line = lines[i];
-        const lineNum = i + 1;
-        const lineClass = isAllAdded ? 'diff-add'
-            : isAllDeleted ? 'diff-del'
-                : addedLines.has(lineNum) ? 'diff-add'
-                    : 'diff-ctx';
-        const hasDel = deletedBeforeLine.has(lineNum);
-        const delCount = hasDel ? deletedBeforeLine.get(lineNum)!.length : 0;
-        const delAttr = hasDel ? ` data-del-count="${delCount}"` : '';
-        const delLines = hasDel ? ` data-del-lines="${encodeURIComponent(JSON.stringify(deletedBeforeLine.get(lineNum)))}"` : '';
-        code += `<span class="diff-line ${lineClass}${hasDel ? ' has-deleted' : ''}" data-line="${lineNum}"${delAttr}${delLines}><span class="line-num">${String(lineNum).padStart(4, ' ')}</span>${escapeHtml(line)}</span>\n`;
-        renderedCount++;
-    }
-
-    const hiddenCount = totalVisible - renderedCount;
-    // Invisible sentinel for IntersectionObserver auto-loading (no visible text)
-    const truncNote = hiddenCount > 0
-        ? `<span class="more-lines" data-auto-expand="true" style="display:block;height:1px;"></span>`
-        : '';
-    return `<div class="file-content-preview"><pre><code>${code}</code></pre>${truncNote}</div>`;
-}
-
-// ─── Create all-file card (working tree) ────────────────
-export function createAllFileCard(ctx: CanvasContext, file: any, x: number, y: number, savedSize: any, skipInteraction = false): HTMLElement {
-    const card = document.createElement('div');
-    card.className = 'file-card';
-    // Guard against NaN/undefined positions (corrupted position records)
-    const safeX = isNaN(x) ? 0 : x;
-    const safeY = isNaN(y) ? 0 : y;
-    card.style.left = `${safeX}px`;
-    card.style.top = `${safeY}px`;
-    card.dataset.path = file.path;
-
-    if (savedSize) {
-        card.style.width = `${savedSize.width}px`;
-        card.style.height = `${savedSize.height}px`;
-        card.style.maxHeight = `${savedSize.height}px`;
-    }
-
-    const ext = file.ext || '';
-    const iconClass = getFileIconClass(ext);
-    const addedLines: Set<number> = file.addedLines || new Set();
-    const isAllAdded = file.status === 'added';
-    const isAllDeleted = file.status === 'deleted';
-
-    const deletedBeforeLine: Map<number, string[]> = file.deletedBeforeLine || new Map();
-
-    // All files are now same fixed size - no expand persistence
-
-    let contentHTML = '';
-    let useCanvasText = false;
-    let canvasOptions: any = null;
-
-    if (file.isBinary) {
-        contentHTML = `<div class="file-content-preview"><pre><code><span class="error-notice">Binary file</span></code></pre></div>`;
-    } else if (file.content) {
-        if (ctx.useCanvasText) {
-            useCanvasText = true;
-            canvasOptions = {
-                content: file.content,
-                addedLines,
-                deletedBeforeLine,
-                isAllAdded,
-                isAllDeleted,
-                visibleLineIndices: filterFileContentByLayer(file.content, file.layerSections).visibleLineIndices,
-                filePath: file.path,
-            };
-            contentHTML = `<div class="file-content-preview canvas-container" style="position:relative; height: 100%; overflow: auto; background: var(--bg-card);"></div>`;
-        } else {
-            contentHTML = _buildFileContentHTML(file.content, file.layerSections, addedLines, deletedBeforeLine, isAllAdded, isAllDeleted, false, file.lines);
-        }
-    } else {
-        contentHTML = `<div class="file-content-preview"><pre><code><span class="error-notice">Could not read file</span></code></pre></div>`;
-    }
-
-
-    const dir = file.path.includes('/') ? file.path.split('/').slice(0, -1).join('/') : '';
-
-    // Status badge for changed files
-    const statusColors: Record<string, string> = { added: '#22c55e', modified: '#eab308', deleted: '#ef4444', renamed: '#60a5fa', copied: '#a78bfa' };
-    const statusBadge = file.status && file.status !== 'unmodified'
-        ? `<span style="font-size: 9px; color: ${statusColors[file.status] || 'var(--text-muted)'}; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.05em;">${escapeHtml(file.status)}${addedLines.size > 0 ? ` <span style="color:#22c55e">+${addedLines.size}</span>` : ''}${deletedBeforeLine.size > 0 ? ` <span style="color:#f87171">-${Array.from(deletedBeforeLine.values()).reduce((s, a) => s + a.length, 0)}</span>` : ''}</span>`
-        : '';
-    const metaInfo = file.status ? statusBadge : `<span style="font-size: 10px; color: var(--text-muted); margin-left: auto;">${file.lines} lines</span>`;
-
-    card.innerHTML = `
-        <div class="file-card-header">
-            <div class="file-icon ${iconClass}">
-                ${getFileIcon(file.type, ext)}
-            </div>
-            <span class="file-name">${escapeHtml(file.name)}</span>
-            ${metaInfo}
-
-        </div>
-        <div class="file-card-body">
-            <div class="file-path">${escapeHtml(dir)}</div>
-            ${contentHTML}
-        </div>
-    `;
-
-    // Store file data for re-rendering on expand/collapse
-    cardFileData.set(card, file);
-
-    setupConnectionDrag(ctx, card, file.path);
-    // When managed by CardManager, skip legacy drag/resize/z-order setup
-    // but ALWAYS attach context menu, double-click, and click-to-select
-    if (!skipInteraction) {
-        setupCardInteraction(ctx, card, 'allfiles');
-    } else {
-        // Context menu (right-click)
-        card.addEventListener('contextmenu', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            showCardContextMenu(ctx, card, e.clientX, e.clientY);
-        });
-        // Double-click to open in editor modal
-        card.addEventListener('dblclick', (e) => {
-            if ((e.target as HTMLElement).tagName === 'BUTTON' || (e.target as HTMLElement).closest('button')) return;
-            e.preventDefault();
-            e.stopPropagation();
-            const filePath = card.dataset.path;
-            if (filePath) {
-                const file = ctx.allFilesData?.find(f => f.path === filePath) ||
-                    { path: filePath, name: filePath.split('/').pop(), lines: 0 };
-                import('./file-modal').then(({ openFileModal }) => openFileModal(ctx, file));
-            }
-        });
-        // Click to select (sync both XState and CardManager)
-        card.addEventListener('mousedown', (e) => {
-            if (e.button !== 0) return;
-            if ((e.target as HTMLElement).closest('button') || (e.target as HTMLElement).closest('.connect-btn')) return;
-            const filePath = card.dataset.path || '';
-            const multi = e.shiftKey || e.ctrlKey;
-
-            try {
-                const { getCardManager } = require('./galaxydraw-bridge');
-                const cm = getCardManager();
-                if (cm) {
-                    const alreadySelected = cm.selected.has(filePath);
-
-                    if (multi) {
-                        // Shift/Ctrl click: toggle selection
-                        if (alreadySelected) {
-                            cm.deselect(filePath);
-                        } else {
-                            cm.select(filePath, true);
-                        }
-                        ctx.actor.send({ type: 'SELECT_CARD', path: filePath, shift: true });
-                    } else if (alreadySelected && cm.selected.size > 1) {
-                        // Clicking already-selected card in a multi-selection:
-                        // Don't deselect yet — user might be starting a multi-drag.
-                        // Deselect on mouseup if no drag occurred.
-                        let dragged = false;
-                        const onMove = () => { dragged = true; };
-                        const onUp = () => {
-                            window.removeEventListener('mousemove', onMove);
-                            window.removeEventListener('mouseup', onUp);
-                            if (!dragged) {
-                                // No drag happened — deselect all others
-                                cm.deselectAll();
-                                cm.select(filePath, false);
-                                ctx.actor.send({ type: 'SELECT_CARD', path: filePath, shift: false });
-                                updateSelectionHighlights(ctx);
-                                updateArrangeToolbar(ctx);
-                            }
-                        };
-                        window.addEventListener('mousemove', onMove);
-                        window.addEventListener('mouseup', onUp);
-                    } else {
-                        // Normal click: deselect all, select this one
-                        cm.select(filePath, false);
-                        ctx.actor.send({ type: 'SELECT_CARD', path: filePath, shift: false });
-                    }
-                }
-            } catch { }
-            updateSelectionHighlights(ctx);
-            updateArrangeToolbar(ctx);
-        });
-    }
-
-    if (useCanvasText && canvasOptions) {
-        const previewEl = card.querySelector('.canvas-container') as HTMLElement;
-        if (previewEl) {
-            import('./canvas-text').then(({ CanvasTextRenderer }) => {
-                const renderer = new CanvasTextRenderer(previewEl, canvasOptions);
-                (card as any)._canvasTextRenderer = renderer;
-            });
-        }
-    }
-
-    const expandBtn = card.querySelector('.expand-btn');
-    if (expandBtn) {
-        expandBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            openFileModal(ctx, file);
-        });
-    }
-
-    // AI button → open chat
-    const aiBtn = card.querySelector('.ai-btn');
-    if (aiBtn) {
-        aiBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            _handleChatClick(ctx, file);
-        });
-    }
-
-    const body = card.querySelector('.file-card-body') as HTMLElement;
-    if (body) {
-        body.addEventListener('scroll', () => {
-            debounceSaveScroll(ctx, file.path, body.scrollTop);
-            scheduleRenderConnections(ctx);
-        });
-    }
-
-    // ── Auto-load truncated lines when scrolled into view ──
-    const moreLinesEl = card.querySelector('.more-lines[data-auto-expand]') as HTMLElement;
-    if (moreLinesEl && file.content && !file.isBinary) {
-        const pre = card.querySelector('.file-content-preview pre') as HTMLElement;
-        if (pre) {
-            const observer = new IntersectionObserver((entries) => {
-                for (const entry of entries) {
-                    if (entry.isIntersecting) {
-                        observer.disconnect();
-                        // Re-render with all lines (expanded)
-                        const newHTML = _buildFileContentHTML(
-                            file.content, file.layerSections, addedLines, deletedBeforeLine,
-                            isAllAdded, isAllDeleted, true, file.lines
-                        );
-                        const preview = card.querySelector('.file-content-preview');
-                        if (preview) preview.outerHTML = newHTML;
-                    }
-                }
-            }, { root: pre, rootMargin: '200px' });
-            observer.observe(moreLinesEl);
-        }
-    }
-
-    // ── Diff marker strip (scrollbar annotations for changed lines) ──
-    // Skip when canvas-text mode is active — CanvasTextRenderer builds its own gutter
-    if ((addedLines.size > 0 || deletedBeforeLine.size > 0) && !isAllAdded && file.content && !useCanvasText) {
-        const totalLines = file.content.split('\n').length;
-        _buildDiffMarkerStrip(card, body, addedLines, totalLines, deletedBeforeLine, file.hunks);
-    }
-
-    // ── Deleted lines hover overlay ──
-    if (deletedBeforeLine.size > 0) {
-        _setupDeletedLinesOverlay(card);
-    }
-
-    // Listen for resize from indicator drag
-    card.addEventListener('card-resized', ((e: CustomEvent) => {
-        const { path: p, width: w, height: h } = e.detail;
-        const state = ctx.snap().context;
-        const ch = state.currentCommitHash || 'allfiles';
-        ctx.actor.send({ type: 'RESIZE_CARD', path: p, width: w, height: h });
-        savePosition(ctx, ch, p, parseInt(card.style.left) || 0, parseInt(card.style.top) || 0, w, h);
-        renderConnections(ctx);
-    }) as EventListener);
-
-    return card;
-}
-
-// ─── File expand modal (extracted to file-modal.tsx) ─────
-import { openFileModal } from './file-modal';
-export { openFileModal };
-
-// ─── Diff markers & card expand (extracted modules) ─────
-export { buildDiffMarkerStrip, scrollToLine, setupDeletedLinesOverlay } from './card-diff-markers';
-export { changeCardsFontSize, toggleCardExpand, expandCardByPath, fitScreenSize, updateHiddenLinesIndicator } from './card-expand';
-
-
+// @ts-nocheck
+/**
+ * File cards — creation (diff + all-files), interaction (click/drag/resize),
+ * selection, arrangement, and the file modal.
+ */
+import { measure } from "measure-fn";
+import { render } from "melina/client";
+import type { CanvasContext } from "./context";
+import { escapeHtml, getFileIcon, getFileIconClass, showToast } from "./utils";
+import { hideSelectedFiles } from "./hidden-files";
+import { isFollower, detectRole } from "./role";
+import {
+  savePosition,
+  getPositionKey,
+  isPathExpandedInPositions,
+  setPathExpandedInPositions,
+} from "./positions";
+import {
+  updateMinimap,
+  updateCanvasTransform,
+  updateZoomUI,
+  jumpToFile,
+  forceMinimapRebuild,
+} from "./canvas";
+import { updateStatusBarSelected } from "./status-bar";
+import {
+  renderConnections,
+  scheduleRenderConnections,
+  setupConnectionDrag,
+  hasPendingConnection,
+} from "./connections";
+import { highlightSyntax, buildModalDiffHTML } from "./syntax";
+import {
+  filterFileContentByLayer,
+  layerState,
+  createLayer,
+  addFileToLayer,
+  removeFileFromLayer,
+  getActiveLayer,
+} from "./layers";
+import { openFileChatInModal } from "./chat";
+import {
+  buildDiffMarkerStrip as _buildDiffMarkerStrip,
+  setupDeletedLinesOverlay as _setupDeletedLinesOverlay,
+} from "./card-diff-markers";
+import { updateHiddenLinesIndicator as _updateHiddenLinesIndicator } from "./card-expand";
+
+// ─── Constants ──────────────────────────────────────────
+const CORNER_CURSORS = {
+  tl: "nwse-resize",
+  tr: "nesw-resize",
+  bl: "nesw-resize",
+  br: "nwse-resize",
+};
+
+// Max lines rendered in DOM for collapsed (folded) cards.
+// Files with more lines than this will show a truncated view until expanded with F.
+// This is the #1 performance optimization — a 10K-line file produces 10K <span> elements
+// which all participate in layout during pan/zoom, crushing frame rate.
+const VISIBLE_LINE_LIMIT = 120;
+
+const cardFileData = new WeakMap<HTMLElement, any>();
+
+// ─── Accessor for cardFileData (used by card-expand.ts via lazy require) ──
+export function _getCardFileData(card: HTMLElement) {
+  return cardFileData.get(card);
+}
+
+// ─── Expanded state persistence ─────────────────────────
+// NOTE: Expanded state is now stored in the positions system (positions.ts)
+// so it automatically syncs to the server for logged-in users.
+// The old localStorage-only functions below are kept as thin wrappers
+// for backward compatibility but should not be used directly.
+// Use isPathExpandedInPositions / setPathExpandedInPositions from positions.ts.
+
+/** @deprecated Use isPathExpandedInPositions(ctx, filePath) instead */
+export function isPathExpanded(filePath: string): boolean {
+  // Legacy fallback: check localStorage for old data
+  // New code should use isPathExpandedInPositions which checks ctx.positions
+  const key = _getExpandedStorageKey();
+  if (!key) return false;
+  try {
+    const raw = localStorage.getItem(key);
+    if (raw) return new Set(JSON.parse(raw)).has(filePath);
+  } catch {}
+  return false;
+}
+
+/** @deprecated Use setPathExpandedInPositions(ctx, filePath, expanded) instead */
+export function setPathExpanded(filePath: string, expanded: boolean) {
+  // Legacy: only used if ctx is not available
+  const key = _getExpandedStorageKey();
+  if (!key) return;
+  try {
+    const raw = localStorage.getItem(key);
+    const paths = raw ? new Set(JSON.parse(raw)) : new Set();
+    if (expanded) paths.add(filePath);
+    else paths.delete(filePath);
+    if (paths.size === 0) localStorage.removeItem(key);
+    else localStorage.setItem(key, JSON.stringify(Array.from(paths)));
+  } catch {}
+}
+
+function _getExpandedStorageKey(): string | null {
+  const hashSlug = decodeURIComponent(window.location.hash.replace("#", ""));
+  const repo =
+    (hashSlug && localStorage.getItem(`gitcanvas:slug:${hashSlug}`)) ||
+    localStorage.getItem("gitcanvas:lastRepo");
+  if (!repo) return null;
+  return `gitcanvas:expanded:${repo}`;
+}
+
+// ─── Selection highlights ───────────────────────────────
+export function updateSelectionHighlights(ctx: CanvasContext) {
+  const selected = ctx.snap().context.selectedCards;
+  ctx.fileCards.forEach((card, path) => {
+    card.classList.toggle("selected", selected.includes(path));
+  });
+  updateStatusBarSelected(selected.length);
+}
+
+export function clearSelectionHighlights(ctx: CanvasContext) {
+  ctx.fileCards.forEach((card) => card.classList.remove("selected"));
+}
+
+// ─── Arrange toolbar visibility ─────────────────────────
+export function updateArrangeToolbar(ctx: CanvasContext) {
+  measure("arrange:updateToolbar", () => {
+    const toolbar = document.getElementById("arrangeToolbar");
+    if (!toolbar) return;
+    const selected = ctx.snap().context.selectedCards;
+    toolbar.style.display = selected.length >= 2 ? "flex" : "none";
+  });
+}
+
+// ─── Corner detection for resize ────────────────────────
+function isNearCorner(
+  e: MouseEvent,
+  card: HTMLElement,
+  cornerSize: number,
+  zoom: number,
+): string | null {
+  const rect = card.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+  const w = rect.width;
+  const h = rect.height;
+  // Scale corner hit-area: base size + proportion of card size, capped at 80px
+  // This makes large cards much easier to grab at corners
+  const dynamicCorner = Math.min(
+    80,
+    Math.max(cornerSize, Math.min(w, h) * 0.12),
+  );
+  const c = dynamicCorner * zoom;
+
+  if (x > w - c && y > h - c) return "br";
+  if (x < c && y > h - c) return "bl";
+  if (x > w - c && y < c) return "tr";
+  if (x < c && y < c) return "tl";
+  return null;
+}
+
+// ─── Setup card interaction (click-select + drag) ────────
+export function setupCardInteraction(
+  ctx: CanvasContext,
+  card: HTMLElement,
+  commitHash: string,
+) {
+  // Follower mode: read-only, no drag/edit
+  const role = detectRole();
+  console.log(
+    `[cards] setupCardInteraction: ${role} mode for ${card.dataset.path}`,
+  );
+
+  if (role === "follower") {
+    card.style.cursor = "default";
+    card.style.pointerEvents = "auto";
+    card.addEventListener("click", (e) => {
+      // Click to select is still allowed
+      const filePath = card.dataset.path || "";
+      ctx.actor.send({
+        type: "SELECT_CARD",
+        path: filePath,
+        shift: e.shiftKey || e.ctrlKey,
+      });
+    });
+    // Block drag by preventing mousedown
+    card.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+    return;
+  }
+
+  let action = null; // null | 'move' | 'pending'
+  let startX: number, startY: number;
+  let moveStartPositions: any[] = [];
+  let rafPending = false;
+  const DRAG_THRESHOLD = 3;
+
+  function onMouseDown(e) {
+    // Only respond to left-click (button 0). Middle-click/right-click should not start card interaction.
+    if (e.button !== 0) return;
+    if (e.target.tagName === "BUTTON" || e.target.closest("button")) return;
+    const bodyEl = e.target.closest(".file-card-body");
+    if (
+      bodyEl &&
+      (e.offsetX > e.target.clientWidth || e.offsetY > e.target.clientHeight)
+    )
+      return;
+
+    // If a connection is pending and the click is inside body (on a diff-line),
+    // don't start drag — let the connection click handler handle it
+    if (
+      hasPendingConnection() &&
+      bodyEl &&
+      (e.target as HTMLElement).closest(".diff-line")
+    )
+      return;
+
+    e.stopPropagation();
+    startX = e.clientX;
+    startY = e.clientY;
+    action = "pending";
+
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  }
+
+  function onMouseMove(e) {
+    const state = ctx.snap().context;
+    const dx = (e.clientX - startX) / state.zoom;
+    const dy = (e.clientY - startY) / state.zoom;
+
+    if (action === "pending") {
+      const screenDist = Math.sqrt(
+        (e.clientX - startX) ** 2 + (e.clientY - startY) ** 2,
+      );
+      if (screenDist < DRAG_THRESHOLD) return;
+
+      action = "move";
+      card.style.cursor = "move";
+
+      const selected = ctx.snap().context.selectedCards;
+      const cardPath = card.dataset.path;
+      if (!selected.includes(cardPath)) {
+        if (!e.shiftKey && !e.ctrlKey) {
+          ctx.actor.send({ type: "SELECT_CARD", path: cardPath, shift: false });
+        } else {
+          ctx.actor.send({ type: "SELECT_CARD", path: cardPath, shift: true });
+        }
+        updateSelectionHighlights(ctx);
+        updateArrangeToolbar(ctx);
+      }
+
+      const nowSelected = ctx.snap().context.selectedCards;
+      moveStartPositions = [];
+      nowSelected.forEach((path) => {
+        const c = ctx.fileCards.get(path);
+        if (c) {
+          c.style.cursor = "grabbing";
+          moveStartPositions.push({
+            card: c,
+            path,
+            startLeft: parseInt(c.style.left) || 0,
+            startTop: parseInt(c.style.top) || 0,
+          });
+        }
+      });
+    }
+
+    if (action === "move") {
+      moveStartPositions.forEach((info) => {
+        info.card.style.left = `${info.startLeft + dx}px`;
+        info.card.style.top = `${info.startTop + dy}px`;
+      });
+      // Throttle expensive DOM updates to once per frame
+      if (!rafPending) {
+        rafPending = true;
+        requestAnimationFrame(() => {
+          rafPending = false;
+          scheduleRenderConnections(ctx);
+          updateMinimap(ctx);
+        });
+      }
+      return;
+    }
+  }
+
+  function onMouseUp(e) {
+    window.removeEventListener("mousemove", onMouseMove);
+    window.removeEventListener("mouseup", onMouseUp);
+
+    if (action === "pending") {
+      if (e.shiftKey || e.ctrlKey) {
+        ctx.actor.send({
+          type: "SELECT_CARD",
+          path: card.dataset.path,
+          shift: true,
+        });
+      } else {
+        ctx.actor.send({
+          type: "SELECT_CARD",
+          path: card.dataset.path,
+          shift: false,
+        });
+      }
+      updateSelectionHighlights(ctx);
+      updateArrangeToolbar(ctx);
+      } else if (action === "move") {
+        document.body.style.cursor = "";
+        card.style.cursor = "";
+        moveStartPositions.forEach((info) => {
+          info.card.style.cursor = "";
+        });
+        moveStartPositions.forEach((info) => {
+          const x = parseInt(info.card.style.left) || 0;
+          const y = parseInt(info.card.style.top) || 0;
+          savePosition(ctx, commitHash, info.path, x, y, undefined, undefined, true);
+        });
+        moveStartPositions = [];
+        // Force minimap rebuild so dot positions reflect the drag result
+        forceMinimapRebuild(ctx);
+      }
+
+    action = null;
+  }
+
+  card.addEventListener("mousedown", onMouseDown);
+
+  // ── Double-click to open in editor modal ──
+  card.addEventListener("dblclick", (e) => {
+    // Don't trigger on buttons
+    if (
+      (e.target as HTMLElement).tagName === "BUTTON" ||
+      (e.target as HTMLElement).closest("button")
+    )
+      return;
+    e.preventDefault();
+    e.stopPropagation();
+
+    const filePath = card.dataset.path;
+    if (filePath) {
+      const file = ctx.allFilesData?.find((f) => f.path === filePath) || {
+        path: filePath,
+        name: filePath.split("/").pop(),
+        lines: 0,
+      };
+      // Read visible line from canvas text renderer scroll position
+      const renderer = (card as any)._canvasTextRenderer;
+      const initialLine = renderer ? renderer.getVisibleLine?.() : undefined;
+      import("./file-modal").then(({ openFileModal }) =>
+        openFileModal(ctx, file, undefined, initialLine),
+      );
+    }
+  });
+
+  // ── Right-click context menu ──
+  card.addEventListener("contextmenu", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    showCardContextMenu(ctx, card, e.clientX, e.clientY);
+  });
+}
+
+// ─── Context menu & file history (extracted to card-context-menu.tsx) ────
+import { showCardContextMenu, showFileHistory } from "./card-context-menu";
+export { showCardContextMenu, showFileHistory };
+
+// ─── Arrangement functions (extracted to card-arrangement.ts) ────
+import { arrangeRow, arrangeColumn, arrangeGrid } from "./card-arrangement";
+export { arrangeRow, arrangeColumn, arrangeGrid };
+
+// ─── Scroll debounce ────────────────────────────────────
+export function debounceSaveScroll(
+  ctx: CanvasContext,
+  filePath: string,
+  scrollTop: number,
+) {
+  if (ctx.scrollTimers[filePath]) clearTimeout(ctx.scrollTimers[filePath]);
+  ctx.scrollTimers[filePath] = setTimeout(() => {
+    ctx.actor.send({ type: "SAVE_SCROLL", path: filePath, scrollTop });
+    savePosition(ctx, "scroll", filePath, scrollTop, 0);
+  }, 300);
+}
+
+// ─── JSX sub-components for file card content ───────────
+
+function DiffLine({
+  type,
+  lineNum,
+  content,
+}: {
+  type: string;
+  lineNum: number;
+  content: string;
+}) {
+  return (
+    <span className={`diff-line diff-${type}`} data-line={lineNum}>
+      <span className="line-num">{String(lineNum).padStart(4, " ")}</span>
+      {content}
+    </span>
+  );
+}
+
+function DiffHunk({ hunk, hunkIdx }: { hunk: any; hunkIdx: number }) {
+  const header = `@@ -${hunk.oldStart},${hunk.oldCount} +${hunk.newStart},${hunk.newCount} @@${hunk.context ? " " + hunk.context : ""}`;
+  let oldLine = hunk.oldStart;
+  let newLine = hunk.newStart;
+
+  const currentItems: { type: string; ln: number; content: string }[] = [];
+  const previousItems: { type: string; ln: number; content: string }[] = [];
+
+  hunk.lines.forEach((l: any) => {
+    if (l.type === "add") {
+      currentItems.push({ type: "add", ln: newLine++, content: l.content });
+    } else if (l.type === "del") {
+      previousItems.push({ type: "del", ln: oldLine++, content: l.content });
+    } else {
+      const curLn = newLine++;
+      const prevLn = oldLine++;
+      currentItems.push({ type: "ctx", ln: curLn, content: l.content });
+      previousItems.push({ type: "ctx", ln: prevLn, content: l.content });
+    }
+  });
+
+  const hasDeletions = previousItems.some((l) => l.type === "del");
+
+  function toggle(e: Event, view: string) {
+    e.stopPropagation();
+    const hunkEl = (e.target as HTMLElement).closest(".diff-hunk");
+    if (!hunkEl) return;
+    hunkEl
+      .querySelectorAll(".hunk-toggle-btn")
+      .forEach((b) => b.classList.remove("active"));
+    (e.target as HTMLElement).classList.add("active");
+    const cur = hunkEl.querySelector(".hunk-pane--current") as HTMLElement;
+    const prev = hunkEl.querySelector(".hunk-pane--previous") as HTMLElement;
+    if (cur) cur.style.display = view === "current" ? "" : "none";
+    if (prev) prev.style.display = view === "previous" ? "" : "none";
+  }
+
+  return (
+    <div className="diff-hunk">
+      <div className="diff-hunk-header">
+        <span className="hunk-range">{header}</span>
+        {hasDeletions ? (
+          <span className="hunk-view-toggle" data-hunk={hunkIdx}>
+            <button
+              className="hunk-toggle-btn active"
+              data-view="current"
+              onclick={(e) => toggle(e, "current")}
+            >
+              Current
+            </button>
+            <button
+              className="hunk-toggle-btn"
+              data-view="previous"
+              onclick={(e) => toggle(e, "previous")}
+            >
+              Previous
+            </button>
+          </span>
+        ) : null}
+      </div>
+      <div className="diff-hunk-body">
+        <div className="hunk-pane hunk-pane--current">
+          <pre>
+            <code>
+              {currentItems.map((l) => (
+                <DiffLine type={l.type} lineNum={l.ln} content={l.content} />
+              ))}
+            </code>
+          </pre>
+        </div>
+        <div className="hunk-pane hunk-pane--previous" style="display:none">
+          <pre>
+            <code>
+              {previousItems.map((l) => (
+                <DiffLine type={l.type} lineNum={l.ln} content={l.content} />
+              ))}
+            </code>
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FileCardContent({ file }: { file: any }) {
+  const ext = file.name.split(".").pop()?.toLowerCase() || "";
+  const IMAGE_EXTS = new Set([
+    "png",
+    "jpg",
+    "jpeg",
+    "gif",
+    "webp",
+    "svg",
+    "bmp",
+    "ico",
+  ]);
+  const isImage = IMAGE_EXTS.has(ext);
+
+  if (isImage) {
+    const repoPath = (window as any).__GITCANVAS_REPO_PATH__ || "";
+    return (
+      <div
+        className="file-content-preview file-image-preview"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          background: "var(--bg-card)",
+          overflow: "hidden",
+        }}
+      >
+        <img
+          src={`/api/repo/file-content?path=${encodeURIComponent(repoPath)}&file=${encodeURIComponent(file.path)}`}
+          alt={file.name}
+          style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }}
+          loading="lazy"
+        />
+      </div>
+    );
+  }
+
+  if (file.status === "added" && file.content) {
+    const lines = file.content.split("\n");
+    return (
+      <div className="file-content-preview">
+        <pre>
+          <code>
+            {lines.map((line, i) =>
+              !file.visibleLineIndices || file.visibleLineIndices.has(i) ? (
+                <DiffLine type="add" lineNum={i + 1} content={line} />
+              ) : null,
+            )}
+          </code>
+        </pre>
+      </div>
+    );
+  }
+  if (file.status === "deleted" && file.content) {
+    const lines = file.content.split("\n");
+    return (
+      <div className="file-content-preview">
+        <pre>
+          <code>
+            {lines.map((line, i) =>
+              !file.visibleLineIndices || file.visibleLineIndices.has(i) ? (
+                <DiffLine type="del" lineNum={i + 1} content={line} />
+              ) : null,
+            )}
+          </code>
+        </pre>
+      </div>
+    );
+  }
+  if (
+    (file.status === "modified" ||
+      file.status === "renamed" ||
+      file.status === "copied") &&
+    file.hunks?.length > 0
+  ) {
+    return (
+      <div className="file-content-preview">
+        {file.hunks.map((hunk, idx) => (
+          <DiffHunk hunk={hunk} hunkIdx={idx} />
+        ))}
+      </div>
+    );
+  }
+  if (
+    (file.status === "renamed" || file.status === "copied") &&
+    (!file.hunks || file.hunks.length === 0)
+  ) {
+    const simText = file.similarity ? ` (${file.similarity}% similar)` : "";
+    return (
+      <div className="file-content-preview">
+        <pre>
+          <code>
+            <span className="rename-notice">
+              {"File " + file.status + simText + "\nNo content changes"}
+            </span>
+          </code>
+        </pre>
+      </div>
+    );
+  }
+  const msg = file.contentError || "No changes to display";
+  return (
+    <div className="file-content-preview">
+      <pre>
+        <code>
+          <span className="error-notice">{msg}</span>
+        </code>
+      </pre>
+    </div>
+  );
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  added: "#22c55e",
+  modified: "#eab308",
+  deleted: "#ef4444",
+  renamed: "#a78bfa",
+  copied: "#60a5fa",
+};
+const STATUS_LABELS: Record<string, string> = {
+  added: "+ ADDED",
+  modified: "~ MODIFIED",
+  deleted: "- DELETED",
+  renamed: "→ RENAMED",
+  copied: "⊕ COPIED",
+};
+
+function _handleChatClick(ctx: CanvasContext, file: any) {
+  const filePath = file.path;
+  const content = file.content || "";
+  const status = file.status || "";
+
+  let extraContext = "";
+
+  if (file.hunks && file.hunks.length > 0) {
+    extraContext += `\n--- DIFF SUMMARY ---\n`;
+    extraContext += file.hunks
+      .map(
+        (h: any) =>
+          `@@ -${h.oldStart},${h.oldCount} +${h.newStart},${h.newCount} @@\n` +
+          h.lines
+            .map(
+              (l: any) =>
+                `${l.type === "add" ? "+" : l.type === "del" ? "-" : " "} ${l.content}`,
+            )
+            .join("\n"),
+      )
+      .join("\n");
+  }
+
+  const connections = ctx.snap().context.connections;
+  const relatedLinks = connections.filter(
+    (c: any) => c.sourceFile === filePath || c.targetFile === filePath,
+  );
+
+  if (relatedLinks.length > 0) {
+    extraContext += `\n\n--- ARCHITECTURE CONNECTIONS ---\n`;
+    extraContext += `This file is logically connected to the following modules in the visual graph:\n`;
+    relatedLinks.forEach((c: any) => {
+      if (c.sourceFile === filePath) {
+        extraContext += `- Outbound dependency on \`${c.targetFile}\` (Lines ${c.sourceLineStart}-${c.sourceLineEnd} -> Lines ${c.targetLineStart}-${c.targetLineEnd}). Note: "${c.comment || "None"}"\n`;
+      } else {
+        extraContext += `- Inbound dependency from \`${c.sourceFile}\` (Lines ${c.sourceLineStart}-${c.sourceLineEnd} -> Lines ${c.targetLineStart}-${c.targetLineEnd}). Note: "${c.comment || "None"}"\n`;
+      }
+    });
+  }
+
+  const repoPath = ctx.snap().context.repoPath;
+  openFileChatInModal(repoPath, filePath, content, status, extraContext);
+}
+
+// ─── Create file card (commit diff) ─────────────────────
+export function createFileCard(
+  ctx: CanvasContext,
+  file: any,
+  x: number,
+  y: number,
+  commitHash: string,
+  skipInteraction = false,
+): HTMLElement {
+  const card = document.createElement("div");
+  card.className = `file-card file-card--${file.status || "modified"}`;
+  card.style.left = `${x}px`;
+  card.style.top = `${y}px`;
+  card.dataset.path = file.path;
+
+  if (file.layerSections && file.layerSections.length > 0) {
+    if (file.content) {
+      const { visibleLineIndices } = filterFileContentByLayer(
+        file.content,
+        file.layerSections,
+      );
+      file.visibleLineIndices = visibleLineIndices;
+    }
+    if (file.hunks) {
+      // Very simplistic filtering for hunks
+      file.hunks = file.hunks.filter((h) => {
+        // If the hunk's content has ANY line overlapping with visible lines, keep it. But we don't have exactly the full file contents to compare.
+        // Keep all hunks for now if layers view, else users might miss diffs.
+        return true;
+      });
+    }
+  }
+
+  // Apply saved size
+  const posKey = getPositionKey(file.path, commitHash);
+  if (ctx.positions.has(posKey)) {
+    const pos = ctx.positions.get(posKey);
+    if (pos.width) card.style.width = `${pos.width}px`;
+    if (pos.height) {
+      card.style.height = `${pos.height}px`;
+      card.style.maxHeight = `${pos.height}px`;
+    }
+  }
+
+  const ext = file.name.split(".").pop().toLowerCase();
+  const iconClass = getFileIconClass(ext);
+  const statusColor = STATUS_COLORS[file.status] || "#a855f7";
+  const statusLabel =
+    STATUS_LABELS[file.status] || file.status?.toUpperCase() || "CHANGED";
+  const hunkCount = file.hunks?.length || 0;
+  const metaInfo =
+    hunkCount > 0
+      ? `${hunkCount} hunk${hunkCount > 1 ? "s" : ""}`
+      : `${file.lines || 0} lines`;
+
+  const iconSvg = getFileIcon(file.type, ext);
+
+  // Render JSX into card
+  render(
+    <>
+      <div
+        className="file-card-header"
+        style={`border-left: 4px solid ${statusColor}`}
+      >
+        <div
+          className={`file-icon ${iconClass}`}
+          dangerouslySetInnerHTML={{ __html: iconSvg }}
+        />
+        <span className="file-name">{file.name}</span>
+        <span
+          className="file-status"
+          style={`background: ${statusColor}20; color: ${statusColor}; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600;`}
+        >
+          {statusLabel}
+        </span>
+        <span style="font-size: 10px; color: var(--text-muted); margin-left: auto;">
+          {metaInfo}
+        </span>
+      </div>
+      <div className="file-card-body">
+        {file.oldPath ? (
+          <div className="file-rename-path">
+            {file.oldPath} → {file.path}
+            {file.similarity ? (
+              <span className="rename-similarity">{file.similarity}%</span>
+            ) : null}
+          </div>
+        ) : (
+          <div className="file-path">{file.path}</div>
+        )}
+        <FileCardContent file={file} />
+      </div>
+    </>,
+    card,
+  );
+
+  cardFileData.set(card, file);
+
+  // When managed by CardManager, skip legacy drag/resize/z-order setup
+  // but ALWAYS attach context menu, double-click, and click-to-select
+  if (!skipInteraction) {
+    setupCardInteraction(ctx, card, commitHash);
+  } else {
+    card.addEventListener("contextmenu", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      showCardContextMenu(ctx, card, e.clientX, e.clientY);
+    });
+    card.addEventListener("dblclick", (e) => {
+      if (
+        (e.target as HTMLElement).tagName === "BUTTON" ||
+        (e.target as HTMLElement).closest("button")
+      )
+        return;
+      e.preventDefault();
+      e.stopPropagation();
+      const filePath = card.dataset.path;
+      if (filePath) {
+        const file = ctx.allFilesData?.find((f) => f.path === filePath) || {
+          path: filePath,
+          name: filePath.split("/").pop(),
+          lines: 0,
+        };
+        import("./file-modal").then(({ openFileModal }) =>
+          openFileModal(ctx, file),
+        );
+      }
+    });
+    // Smart selection: don't deselect others on mousedown if card is already selected
+    // This allows multi-drag to work. Deselection is deferred to mouseup (click without drag).
+    let _dragOccurred = false;
+    card.addEventListener("mousedown", (e) => {
+      if (e.button !== 0) return;
+      if (
+        (e.target as HTMLElement).closest("button") ||
+        (e.target as HTMLElement).closest(".connect-btn")
+      )
+        return;
+      const filePath = card.dataset.path || "";
+      const multi = e.shiftKey || e.ctrlKey;
+      const selected = ctx.snap().context.selectedCards;
+      const alreadySelected = selected.includes(filePath);
+      _dragOccurred = false;
+
+      if (multi) {
+        // Shift/Ctrl: toggle selection
+        ctx.actor.send({ type: "SELECT_CARD", path: filePath, shift: true });
+        try {
+          const { getCardManager } = require("./xydraw-bridge");
+          const cm = getCardManager();
+          if (cm) {
+            if (alreadySelected) cm.deselect(filePath);
+            else cm.select(filePath, true);
+          }
+        } catch {}
+      } else if (!alreadySelected) {
+        // Not selected yet → replace selection with this card
+        ctx.actor.send({ type: "SELECT_CARD", path: filePath, shift: false });
+        try {
+          const { getCardManager } = require("./xydraw-bridge");
+          const cm = getCardManager();
+          if (cm) cm.select(filePath, false);
+        } catch {}
+      }
+      // If already selected without shift → do nothing on mousedown (allow multi-drag)
+      // Deselection of others happens on mouseup below
+
+      updateSelectionHighlights(ctx);
+      updateArrangeToolbar(ctx);
+    });
+    card.addEventListener("mouseup", (e) => {
+      if (e.button !== 0) return;
+      if (
+        (e.target as HTMLElement).closest("button") ||
+        (e.target as HTMLElement).closest(".connect-btn")
+      )
+        return;
+      // Only deselect others if: no shift, card was already selected, and no drag happened
+      const filePath = card.dataset.path || "";
+      const multi = e.shiftKey || e.ctrlKey;
+      if (multi) return; // shift-click handled in mousedown
+      const selected = ctx.snap().context.selectedCards;
+      if (
+        selected.length > 1 &&
+        selected.includes(filePath) &&
+        !_dragOccurred
+      ) {
+        ctx.actor.send({ type: "SELECT_CARD", path: filePath, shift: false });
+        try {
+          const { getCardManager } = require("./xydraw-bridge");
+          const cm = getCardManager();
+          if (cm) cm.select(filePath, false);
+        } catch {}
+        updateSelectionHighlights(ctx);
+        updateArrangeToolbar(ctx);
+      }
+    });
+    // Track drag state from engine for mouseup deselection logic
+    card.addEventListener("mousemove", () => {
+      _dragOccurred = true;
+    });
+  }
+  setupConnectionDrag(ctx, card, file.path);
+
+  // Expand button → open modal
+  const expandBtn = card.querySelector(".expand-btn");
+  if (expandBtn) {
+    expandBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      openFileModal(ctx, file);
+    });
+  }
+
+  // AI button → open chat
+  const aiBtn = card.querySelector(".ai-btn");
+  if (aiBtn) {
+    aiBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      _handleChatClick(ctx, file);
+    });
+  }
+
+  // Scroll listener
+  const body = card.querySelector(".file-card-body");
+  if (body) {
+    body.addEventListener("scroll", () => {
+      scheduleRenderConnections(ctx);
+    });
+  }
+
+  // Listen for resize from indicator drag
+  card.addEventListener("card-resized", ((e: CustomEvent) => {
+    const { path: p, width: w, height: h } = e.detail;
+    const state = ctx.snap().context;
+    const ch = state.currentCommitHash || "allfiles";
+    ctx.actor.send({ type: "RESIZE_CARD", path: p, width: w, height: h });
+    savePosition(
+      ctx,
+      ch,
+      p,
+      parseInt(card.style.left) || 0,
+      parseInt(card.style.top) || 0,
+      w,
+      h,
+    );
+    renderConnections(ctx);
+  }) as EventListener);
+
+  return card;
+}
+
+// ─── Build file content HTML with optional line limiting ─
+// When isExpanded=false, only render VISIBLE_LINE_LIMIT lines to keep DOM small.
+// When isExpanded=true (F key), render all lines for full scrolling.
+export function _buildFileContentHTML(
+  content: string,
+  layerSections: any,
+  addedLines: Set<number>,
+  deletedBeforeLine: Map<number, string[]>,
+  isAllAdded: boolean,
+  isAllDeleted: boolean,
+  isExpanded: boolean,
+  totalFileLines: number,
+): string {
+  const { filteredContent, visibleLineIndices } = filterFileContentByLayer(
+    content,
+    layerSections,
+  );
+  const lines = content.split("\n");
+  const totalVisible = Array.from(visibleLineIndices).length;
+  const limit = isExpanded ? Infinity : VISIBLE_LINE_LIMIT;
+  let code = "";
+  let renderedCount = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    if (!visibleLineIndices.has(i)) continue;
+    if (renderedCount >= limit) break;
+
+    const line = lines[i];
+    const lineNum = i + 1;
+    const lineClass = isAllAdded
+      ? "diff-add"
+      : isAllDeleted
+        ? "diff-del"
+        : addedLines.has(lineNum)
+          ? "diff-add"
+          : "diff-ctx";
+    const hasDel = deletedBeforeLine.has(lineNum);
+    const delCount = hasDel ? deletedBeforeLine.get(lineNum)!.length : 0;
+    const delAttr = hasDel ? ` data-del-count="${delCount}"` : "";
+    const delLines = hasDel
+      ? ` data-del-lines="${encodeURIComponent(JSON.stringify(deletedBeforeLine.get(lineNum)))}"`
+      : "";
+    code += `<span class="diff-line ${lineClass}${hasDel ? " has-deleted" : ""}" data-line="${lineNum}"${delAttr}${delLines}><span class="line-num">${String(lineNum).padStart(4, " ")}</span>${escapeHtml(line)}</span>\n`;
+    renderedCount++;
+  }
+
+  const hiddenCount = totalVisible - renderedCount;
+  // Invisible sentinel for IntersectionObserver auto-loading (no visible text)
+  const truncNote =
+    hiddenCount > 0
+      ? `<span class="more-lines" data-auto-expand="true" style="display:block;height:1px;"></span>`
+      : "";
+  return `<div class="file-content-preview"><pre><code>${code}</code></pre>${truncNote}</div>`;
+}
+
+// ─── Create all-file card (working tree) ────────────────
+export function createAllFileCard(
+  ctx: CanvasContext,
+  file: any,
+  x: number,
+  y: number,
+  savedSize: any,
+  skipInteraction = false,
+): HTMLElement {
+  const card = document.createElement("div");
+  card.className = "file-card";
+  // Guard against NaN/undefined positions (corrupted position records)
+  const safeX = isNaN(x) ? 0 : x;
+  const safeY = isNaN(y) ? 0 : y;
+  card.style.left = `${safeX}px`;
+  card.style.top = `${safeY}px`;
+  card.dataset.path = file.path;
+
+  if (savedSize) {
+    card.style.width = `${savedSize.width}px`;
+    card.style.height = `${savedSize.height}px`;
+    card.style.maxHeight = `${savedSize.height}px`;
+  }
+
+  const ext = file.ext || "";
+  const iconClass = getFileIconClass(ext);
+  const addedLines: Set<number> = file.addedLines || new Set();
+  const isAllAdded = file.status === "added";
+  const isAllDeleted = file.status === "deleted";
+
+  const deletedBeforeLine: Map<number, string[]> =
+    file.deletedBeforeLine || new Map();
+
+  // All files are now same fixed size - no expand persistence
+
+  let contentHTML = "";
+  let canvasOptions: any = null;
+  const useAdvancedRenderer = ctx.textRendererMode === 'canvas' || ctx.textRendererMode === 'webgl';
+
+  const IMAGE_EXTS = new Set([
+    "png",
+    "jpg",
+    "jpeg",
+    "gif",
+    "webp",
+    "svg",
+    "bmp",
+    "ico",
+  ]);
+  const PDF_EXTS = new Set(["pdf"]);
+  const isImage = IMAGE_EXTS.has(ext);
+  const isPdf = PDF_EXTS.has(ext);
+
+  if (isImage) {
+    contentHTML = `<div class="file-content-preview file-image-preview" style="display:flex;align-items:center;justify-content:center;height:100%;background:var(--bg-card);overflow:hidden;">
+            <img src="/api/repo/file-content?path=${encodeURIComponent(ctx.snap().context.repoPath || "")}&file=${encodeURIComponent(file.path)}" 
+                 alt="${escapeHtml(file.name)}" 
+                 style="max-width:100%;max-height:100%;object-fit:contain;" 
+                 loading="lazy" />
+        </div>`;
+  } else if (isPdf) {
+    contentHTML = `<div class="file-content-preview file-image-preview" style="display:flex;align-items:center;justify-content:center;height:100%;background:var(--bg-card);overflow:hidden;">
+            <img src="/api/repo/pdf-thumb?path=${encodeURIComponent(ctx.snap().context.repoPath || "")}&file=${encodeURIComponent(file.path)}" 
+                 alt="${escapeHtml(file.name)}" 
+                 style="max-width:100%;max-height:100%;object-fit:contain;" 
+                 loading="lazy"
+                 onerror="this.parentElement.innerHTML='<pre><code><span class=\\'error-notice\\'>PDF preview unavailable</span></code></pre>'" />
+        </div>`;
+  } else if (file.isBinary) {
+    contentHTML = `<div class="file-content-preview"><pre><code><span class="error-notice">Binary file</span></code></pre></div>`;
+  } else if (file.content) {
+    if (useAdvancedRenderer) {
+      canvasOptions = {
+        content: file.content,
+        addedLines,
+        deletedBeforeLine,
+        isAllAdded,
+        isAllDeleted,
+        visibleLineIndices: filterFileContentByLayer(
+          file.content,
+          file.layerSections,
+        ).visibleLineIndices,
+        filePath: file.path,
+      };
+      contentHTML = `<div class="file-content-preview canvas-container" style="position:relative; height: 100%; overflow: auto; background: var(--bg-card);"></div>`;
+    } else {
+      contentHTML = _buildFileContentHTML(
+        file.content,
+        file.layerSections,
+        addedLines,
+        deletedBeforeLine,
+        isAllAdded,
+        isAllDeleted,
+        false,
+        file.lines,
+      );
+    }
+  } else {
+    contentHTML = `<div class="file-content-preview"><pre><code><span class="error-notice">Could not read file</span></code></pre></div>`;
+  }
+
+  const dir = file.path.includes("/")
+    ? file.path.split("/").slice(0, -1).join("/")
+    : "";
+
+  // Status badge for changed files
+  const statusColors: Record<string, string> = {
+    added: "#22c55e",
+    modified: "#eab308",
+    deleted: "#ef4444",
+    renamed: "#60a5fa",
+    copied: "#a78bfa",
+  };
+  const statusBadge =
+    file.status && file.status !== "unmodified"
+      ? `<span style="font-size: 9px; color: ${statusColors[file.status] || "var(--text-muted)"}; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.05em;">${escapeHtml(file.status)}${addedLines.size > 0 ? ` <span style="color:#22c55e">+${addedLines.size}</span>` : ""}${deletedBeforeLine.size > 0 ? ` <span style="color:#f87171">-${Array.from(deletedBeforeLine.values()).reduce((s, a) => s + a.length, 0)}</span>` : ""}</span>`
+      : "";
+  const metaInfo = file.status
+    ? statusBadge
+    : `<span style="font-size: 10px; color: var(--text-muted); margin-left: auto;">${file.lines} lines</span>`;
+
+  card.innerHTML = `
+        <div class="file-card-header">
+            <div class="file-icon ${iconClass}">
+                ${getFileIcon(file.type, ext)}
+            </div>
+            <span class="file-name">${escapeHtml(file.name)}</span>
+            ${metaInfo}
+
+        </div>
+        <div class="file-card-body">
+            <div class="file-path">${escapeHtml(dir)}</div>
+            ${contentHTML}
+        </div>
+    `;
+
+  // Store file data for re-rendering on expand/collapse
+  cardFileData.set(card, file);
+
+  setupConnectionDrag(ctx, card, file.path);
+  // When managed by CardManager, skip legacy drag/resize/z-order setup
+  // but ALWAYS attach context menu, double-click, and click-to-select
+  if (!skipInteraction) {
+    setupCardInteraction(ctx, card, "allfiles");
+  } else {
+    // Context menu (right-click)
+    card.addEventListener("contextmenu", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      showCardContextMenu(ctx, card, e.clientX, e.clientY);
+    });
+    // Double-click to open in editor modal
+    card.addEventListener("dblclick", (e) => {
+      if (
+        (e.target as HTMLElement).tagName === "BUTTON" ||
+        (e.target as HTMLElement).closest("button")
+      )
+        return;
+      e.preventDefault();
+      e.stopPropagation();
+      const filePath = card.dataset.path;
+      if (filePath) {
+        const file = ctx.allFilesData?.find((f) => f.path === filePath) || {
+          path: filePath,
+          name: filePath.split("/").pop(),
+          lines: 0,
+        };
+        import("./file-modal").then(({ openFileModal }) =>
+          openFileModal(ctx, file),
+        );
+      }
+    });
+    // Click to select (sync both XState and CardManager)
+    card.addEventListener("mousedown", (e) => {
+      if (e.button !== 0) return;
+      if (
+        (e.target as HTMLElement).closest("button") ||
+        (e.target as HTMLElement).closest(".connect-btn")
+      )
+        return;
+      const filePath = card.dataset.path || "";
+      const multi = e.shiftKey || e.ctrlKey;
+
+      try {
+        const { getCardManager } = require("./xydraw-bridge");
+        const cm = getCardManager();
+        if (cm) {
+          const alreadySelected = cm.selected.has(filePath);
+
+          if (multi) {
+            // Shift/Ctrl click: toggle selection
+            if (alreadySelected) {
+              cm.deselect(filePath);
+            } else {
+              cm.select(filePath, true);
+            }
+            ctx.actor.send({
+              type: "SELECT_CARD",
+              path: filePath,
+              shift: true,
+            });
+          } else if (alreadySelected && cm.selected.size > 1) {
+            // Clicking already-selected card in a multi-selection:
+            // Don't deselect yet — user might be starting a multi-drag.
+            // Deselect on mouseup if no drag occurred.
+            let dragged = false;
+            const onMove = () => {
+              dragged = true;
+            };
+            const onUp = () => {
+              window.removeEventListener("mousemove", onMove);
+              window.removeEventListener("mouseup", onUp);
+              if (!dragged) {
+                // No drag happened — deselect all others
+                cm.deselectAll();
+                cm.select(filePath, false);
+                ctx.actor.send({
+                  type: "SELECT_CARD",
+                  path: filePath,
+                  shift: false,
+                });
+                updateSelectionHighlights(ctx);
+                updateArrangeToolbar(ctx);
+              }
+            };
+            window.addEventListener("mousemove", onMove);
+            window.addEventListener("mouseup", onUp);
+          } else {
+            // Normal click: deselect all, select this one
+            cm.select(filePath, false);
+            ctx.actor.send({
+              type: "SELECT_CARD",
+              path: filePath,
+              shift: false,
+            });
+          }
+        }
+      } catch {}
+      updateSelectionHighlights(ctx);
+      updateArrangeToolbar(ctx);
+    });
+  }
+
+  if (canvasOptions) {
+    const previewEl = card.querySelector(".canvas-container") as HTMLElement;
+    if (previewEl) {
+      const mode = ctx.textRendererMode || 'dom';
+      
+      if (mode === 'webgl') {
+        // Use WebGL renderer (Pixi.js)
+        import("./webgl-text").then(({ WebGLTextRenderer }) => {
+          try {
+            const renderer = new WebGLTextRenderer(previewEl, canvasOptions);
+            (card as any)._webglTextRenderer = renderer;
+          } catch (e) {
+            console.error('[cards] WebGL text renderer failed, falling back to canvas:', e);
+            import("./canvas-text").then(({ CanvasTextRenderer }) => {
+              const renderer = new CanvasTextRenderer(previewEl, canvasOptions);
+              (card as any)._canvasTextRenderer = renderer;
+            });
+          }
+        });
+      } else if (mode === 'canvas') {
+        // Use Canvas 2D renderer
+        import("./canvas-text").then(({ CanvasTextRenderer }) => {
+          const renderer = new CanvasTextRenderer(previewEl, canvasOptions);
+          (card as any)._canvasTextRenderer = renderer;
+        });
+      }
+      // else: DOM mode (default) - no special renderer needed
+    }
+  }
+
+  const expandBtn = card.querySelector(".expand-btn");
+  if (expandBtn) {
+    expandBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      openFileModal(ctx, file);
+    });
+  }
+
+  // AI button → open chat
+  const aiBtn = card.querySelector(".ai-btn");
+  if (aiBtn) {
+    aiBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      _handleChatClick(ctx, file);
+    });
+  }
+
+  const body = card.querySelector(".file-card-body") as HTMLElement;
+  if (body) {
+    body.addEventListener("scroll", () => {
+      debounceSaveScroll(ctx, file.path, body.scrollTop);
+      scheduleRenderConnections(ctx);
+    });
+  }
+
+  // ── Auto-load truncated lines when scrolled into view ──
+  const moreLinesEl = card.querySelector(
+    ".more-lines[data-auto-expand]",
+  ) as HTMLElement;
+  if (moreLinesEl && file.content && !file.isBinary) {
+    const pre = card.querySelector(".file-content-preview pre") as HTMLElement;
+    if (pre) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              observer.disconnect();
+              // Re-render with all lines (expanded)
+              const newHTML = _buildFileContentHTML(
+                file.content,
+                file.layerSections,
+                addedLines,
+                deletedBeforeLine,
+                isAllAdded,
+                isAllDeleted,
+                true,
+                file.lines,
+              );
+              const preview = card.querySelector(".file-content-preview");
+              if (preview) preview.outerHTML = newHTML;
+            }
+          }
+        },
+        { root: pre, rootMargin: "200px" },
+      );
+      observer.observe(moreLinesEl);
+    }
+  }
+
+  // ── Diff marker strip (scrollbar annotations for changed lines) ──
+  // Skip when advanced renderer mode is active — renders its own gutter
+  if (
+    (addedLines.size > 0 || deletedBeforeLine.size > 0) &&
+    !isAllAdded &&
+    file.content &&
+    !useAdvancedRenderer
+  ) {
+    const totalLines = file.content.split("\n").length;
+    _buildDiffMarkerStrip(
+      card,
+      body,
+      addedLines,
+      totalLines,
+      deletedBeforeLine,
+      file.hunks,
+    );
+  }
+
+  // ── Deleted lines hover overlay ──
+  if (deletedBeforeLine.size > 0) {
+    _setupDeletedLinesOverlay(card);
+  }
+
+  // Listen for resize from indicator drag
+  card.addEventListener("card-resized", ((e: CustomEvent) => {
+    const { path: p, width: w, height: h } = e.detail;
+    const state = ctx.snap().context;
+    const ch = state.currentCommitHash || "allfiles";
+    ctx.actor.send({ type: "RESIZE_CARD", path: p, width: w, height: h });
+    savePosition(
+      ctx,
+      ch,
+      p,
+      parseInt(card.style.left) || 0,
+      parseInt(card.style.top) || 0,
+      w,
+      h,
+    );
+    renderConnections(ctx);
+  }) as EventListener);
+
+  return card;
+}
+
+// ─── File expand modal (extracted to file-modal.tsx) ─────
+import { openFileModal } from "./file-modal";
+export { openFileModal };
+
+// ─── Diff markers & card expand (extracted modules) ─────
+export {
+  buildDiffMarkerStrip,
+  scrollToLine,
+  setupDeletedLinesOverlay,
+} from "./card-diff-markers";
+export {
+  changeCardsFontSize,
+  toggleCardExpand,
+  expandCardByPath,
+  fitScreenSize,
+  updateHiddenLinesIndicator,
+} from "./card-expand";