gitmaps 1.0.0

package/app/lib/multi-repo.ts

@@ -0,0 +1,286 @@
+// @ts-nocheck
+/**
+ * Multi-repo workspace — load multiple repos on the same canvas.
+ *
+ * Each repo gets its own zone (bounding box region) on the canvas.
+ * Files from different repos are offset horizontally with a gap.
+ * A floating repo zone label appears at the top of each repo's area.
+ *
+ * Architecture:
+ * - `loadedRepos` tracks all loaded repos with their file data and bounds
+ * - When a second repo is loaded, its grid starts to the right of the first
+ * - Repo zone labels are DOM elements inside the canvas (world-space)
+ * - Sidebar commit timeline switches between repos via tab clicks
+ */
+
+import type { CanvasContext } from './context';
+import { showToast } from './utils';
+
+export interface LoadedRepo {
+    path: string;
+    name: string;        // Display name (last folder segment)
+    commits: any[];
+    files: any[];        // allFilesData
+    bounds: { x: number; y: number; width: number; height: number };
+    zoneLabel: HTMLElement | null;
+    color: string;       // Accent color for the zone
+}
+
+// ── State ────────────────────────────────────────────
+const loadedRepos = new Map<string, LoadedRepo>();
+let _activeRepoPath: string | null = null;
+
+const REPO_COLORS = [
+    'rgba(124, 58, 237, 0.6)',   // Purple (primary)
+    'rgba(59, 130, 246, 0.6)',   // Blue
+    'rgba(16, 185, 129, 0.6)',   // Emerald
+    'rgba(245, 158, 11, 0.6)',   // Amber
+    'rgba(239, 68, 68, 0.6)',    // Red
+];
+
+const REPO_GAP = 800; // World-space gap between repos
+
+// ── Public API ───────────────────────────────────────
+
+export function getLoadedRepos() { return loadedRepos; }
+export function getActiveRepoPath() { return _activeRepoPath; }
+export function setActiveRepoPath(path: string) { _activeRepoPath = path; }
+
+export function getRepoDisplayName(path: string): string {
+    const parts = path.replace(/\\/g, '/').split('/').filter(Boolean);
+    return parts[parts.length - 1] || path;
+}
+
+/**
+ * Register a repo that has just been loaded.
+ * Called from loadRepository after files are rendered.
+ */
+export function registerRepo(ctx: CanvasContext, repoPath: string, commits: any[], files: any[]) {
+    const name = getRepoDisplayName(repoPath);
+    const colorIdx = loadedRepos.size % REPO_COLORS.length;
+
+    // Calculate bounds from existing cards + deferred cards
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+    for (const [path, card] of ctx.fileCards) {
+        if (!repoMatchesPath(repoPath, path)) continue;
+        const x = parseFloat(card.style.left) || 0;
+        const y = parseFloat(card.style.top) || 0;
+        const w = card.offsetWidth || 580;
+        const h = card.offsetHeight || 700;
+        if (x < minX) minX = x;
+        if (y < minY) minY = y;
+        if (x + w > maxX) maxX = x + w;
+        if (y + h > maxY) maxY = y + h;
+    }
+
+    for (const [path, entry] of ctx.deferredCards) {
+        if (!repoMatchesPath(repoPath, path)) continue;
+        const { x, y, size } = entry;
+        const w = size?.width || 580;
+        const h = size?.height || 700;
+        if (x < minX) minX = x;
+        if (y < minY) minY = y;
+        if (x + w > maxX) maxX = x + w;
+        if (y + h > maxY) maxY = y + h;
+    }
+
+    if (minX === Infinity) {
+        minX = 50; minY = 50; maxX = 650; maxY = 750;
+    }
+
+    const repo: LoadedRepo = {
+        path: repoPath,
+        name,
+        commits,
+        files,
+        bounds: { x: minX, y: minY, width: maxX - minX, height: maxY - minY },
+        zoneLabel: null,
+        color: REPO_COLORS[colorIdx],
+    };
+
+    loadedRepos.set(repoPath, repo);
+    _activeRepoPath = repoPath;
+
+    createZoneLabel(ctx, repo);
+}
+
+/**
+ * Get the X offset for a new repo being added to the canvas.
+ * Returns the right edge of the rightmost existing repo + gap.
+ */
+export function getNextRepoOffset(): number {
+    if (loadedRepos.size === 0) return 50;
+
+    let maxRight = 0;
+    for (const [, repo] of loadedRepos) {
+        const right = repo.bounds.x + repo.bounds.width;
+        if (right > maxRight) maxRight = right;
+    }
+
+    return maxRight + REPO_GAP;
+}
+
+/**
+ * Check if this is an additional repo load (not the first one).
+ */
+export function isMultiRepoLoad(): boolean {
+    return loadedRepos.size > 0;
+}
+
+/**
+ * Remove a repo from the workspace.
+ */
+export function unloadRepo(ctx: CanvasContext, repoPath: string) {
+    const repo = loadedRepos.get(repoPath);
+    if (!repo) return;
+
+    // Remove zone label
+    if (repo.zoneLabel) repo.zoneLabel.remove();
+
+    // Remove cards belonging to this repo
+    for (const [path, card] of ctx.fileCards) {
+        if (repoMatchesPath(repoPath, path)) {
+            card.remove();
+            ctx.fileCards.delete(path);
+        }
+    }
+
+    // Remove deferred cards
+    for (const [path] of ctx.deferredCards) {
+        if (repoMatchesPath(repoPath, path)) {
+            ctx.deferredCards.delete(path);
+        }
+    }
+
+    loadedRepos.delete(repoPath);
+
+    // Switch active to first remaining repo
+    if (_activeRepoPath === repoPath) {
+        const first = loadedRepos.keys().next();
+        _activeRepoPath = first.done ? null : first.value;
+    }
+}
+
+/**
+ * Create repo zone tabs in the sidebar for switching between repos.
+ */
+export function renderRepoTabs(ctx: CanvasContext) {
+    const container = document.getElementById('repoTabs');
+    if (!container) return;
+
+    if (loadedRepos.size <= 1) {
+        container.style.display = 'none';
+        return;
+    }
+
+    container.style.display = 'flex';
+    container.innerHTML = '';
+
+    for (const [path, repo] of loadedRepos) {
+        const tab = document.createElement('button');
+        tab.className = `repo-tab ${path === _activeRepoPath ? 'repo-tab--active' : ''}`;
+        tab.textContent = repo.name;
+        tab.style.cssText = `
+            padding: 6px 14px;
+            font-size: 11px;
+            font-weight: 600;
+            border: 1px solid ${path === _activeRepoPath ? repo.color : 'rgba(255,255,255,0.08)'};
+            background: ${path === _activeRepoPath ? repo.color.replace('0.6', '0.15') : 'rgba(255,255,255,0.03)'};
+            color: ${path === _activeRepoPath ? '#e2e8f0' : 'rgba(255,255,255,0.4)'};
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.15s;
+            white-space: nowrap;
+            font-family: 'JetBrains Mono', monospace;
+        `;
+
+        tab.addEventListener('click', () => {
+            _activeRepoPath = path;
+            renderRepoTabs(ctx);
+            // Re-render commit timeline for this repo
+            import('./repo').then(m => {
+                // Update XState with this repo's commits
+                ctx.actor.send({ type: 'REPO_LOADED', commits: repo.commits });
+                ctx.snap().context.repoPath = path;
+                m.renderCommitTimeline(ctx);
+            });
+        });
+
+        tab.addEventListener('mouseenter', () => {
+            if (path !== _activeRepoPath) {
+                tab.style.borderColor = repo.color;
+                tab.style.color = '#e2e8f0';
+            }
+        });
+        tab.addEventListener('mouseleave', () => {
+            if (path !== _activeRepoPath) {
+                tab.style.borderColor = 'rgba(255,255,255,0.08)';
+                tab.style.color = 'rgba(255,255,255,0.4)';
+            }
+        });
+
+        container.appendChild(tab);
+    }
+}
+
+// ── Zone Label ───────────────────────────────────────
+
+function createZoneLabel(ctx: CanvasContext, repo: LoadedRepo) {
+    if (!ctx.canvas) return;
+
+    // Remove old label if exists
+    if (repo.zoneLabel) repo.zoneLabel.remove();
+
+    const label = document.createElement('div');
+    label.className = 'repo-zone-label';
+    label.dataset.repo = repo.path;
+    label.innerHTML = `
+        <span style="
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 20px;
+            background: ${repo.color.replace('0.6', '0.12')};
+            border: 1px solid ${repo.color.replace('0.6', '0.3')};
+            border-radius: 10px;
+            color: #e2e8f0;
+            font-size: 32px;
+            font-weight: 700;
+            font-family: system-ui, -apple-system, sans-serif;
+            backdrop-filter: blur(8px);
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+            letter-spacing: -0.02em;
+            pointer-events: auto;
+            user-select: none;
+        ">
+            <span style="
+                width: 10px; height: 10px; border-radius: 50%;
+                background: ${repo.color};
+                box-shadow: 0 0 8px ${repo.color};
+            "></span>
+            ${repo.name}
+        </span>
+    `;
+
+    label.style.cssText = `
+        position: absolute;
+        left: ${repo.bounds.x}px;
+        top: ${repo.bounds.y - 70}px;
+        z-index: 1;
+        pointer-events: none;
+    `;
+
+    ctx.canvas.appendChild(label);
+    repo.zoneLabel = label;
+}
+
+// ── Helpers ──────────────────────────────────────────
+
+function repoMatchesPath(repoPath: string, filePath: string): boolean {
+    // In multi-repo mode, file paths are prefixed with the repo name
+    // or we match by checking all paths registered for this repo
+    const repo = loadedRepos.get(repoPath);
+    if (!repo || !repo.files) return false;
+    return repo.files.some(f => f.path === filePath);
+}

package/app/lib/new-file-dialog.tsx

@@ -0,0 +1,230 @@
+// @ts-nocheck
+/**
+ * New file dialog — create files directly from the canvas.
+ * Opens a dialog to enter the file path, creates the file via API,
+ * then adds a card and opens it in edit mode.
+ */
+import { render } from 'melina/client';
+import type { CanvasContext } from './context';
+import { showToast, escapeHtml } from './utils';
+
+// ─── New File Dialog JSX ────────────────────────────────
+function NewFileDialog({ onSubmit, onCancel, repoPath }: {
+    onSubmit: (filePath: string) => void;
+    onCancel: () => void;
+    repoPath: string;
+}) {
+    const repoName = repoPath.replace(/\\/g, '/').split('/').filter(Boolean).pop() || repoPath;
+    return (
+        <div className="new-file-overlay" onClick={(e) => { if (e.target === e.currentTarget) onCancel(); }}>
+            <div className="new-file-dialog">
+                <div className="new-file-header">
+                    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+                        <polyline points="14 2 14 8 20 8" />
+                        <line x1="12" y1="18" x2="12" y2="12" />
+                        <line x1="9" y1="15" x2="15" y2="15" />
+                    </svg>
+                    <h3>Create New File</h3>
+                </div>
+                <div className="new-file-body">
+                    <label className="new-file-label">File path relative to <code>{repoName}</code></label>
+                    <input
+                        type="text"
+                        id="newFilePathInput"
+                        className="new-file-input"
+                        placeholder="src/components/Button.tsx"
+                        autoComplete="off"
+                        spellCheck={false}
+                        autofocus
+                    />
+                    <div className="new-file-hint">
+                        Directories will be created automatically. Use <code>/</code> as separator.
+                    </div>
+                </div>
+                <div className="new-file-actions">
+                    <button className="btn-ghost btn-sm" onClick={onCancel}>Cancel</button>
+                    <button className="btn-primary btn-sm new-file-create-btn" id="newFileCreateBtn">
+                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2">
+                            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+                            <polyline points="14 2 14 8 20 8" />
+                            <line x1="12" y1="18" x2="12" y2="12" />
+                            <line x1="9" y1="15" x2="15" y2="15" />
+                        </svg>
+                        Create File
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// ─── Show New File Dialog ───────────────────────────────
+export function showNewFileDialog(ctx: CanvasContext) {
+    const state = ctx.snap().context;
+    if (!state.repoPath) {
+        showToast('Load a repository first', 'error');
+        return;
+    }
+
+    // Remove existing dialog if open
+    document.getElementById('newFileOverlay')?.remove();
+
+    const container = document.createElement('div');
+    container.id = 'newFileOverlay';
+    document.body.appendChild(container);
+
+    function close() {
+        render(null, container);
+        container.remove();
+    }
+
+    async function submit(filePath: string) {
+        const normalizedPath = filePath.replace(/\\/g, '/').replace(/^\/+/, '');
+        if (!normalizedPath) {
+            showToast('Please enter a file path', 'error');
+            return;
+        }
+
+        // Check for dangerous paths
+        if (normalizedPath.includes('..') || normalizedPath.startsWith('/')) {
+            showToast('Invalid path — cannot use .. or start with /', 'error');
+            return;
+        }
+
+        const createBtn = document.getElementById('newFileCreateBtn');
+        if (createBtn) { createBtn.textContent = 'Creating...'; createBtn.setAttribute('disabled', 'true'); }
+
+        try {
+            // Determine initial template content based on extension
+            const ext = normalizedPath.split('.').pop()?.toLowerCase() || '';
+            const fileName = normalizedPath.split('/').pop() || normalizedPath;
+            const content = getTemplateContent(fileName, ext);
+
+            const res = await fetch('/api/repo/file-save', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    path: state.repoPath,
+                    filePath: normalizedPath,
+                    content,
+                }),
+            });
+
+            if (!res.ok) {
+                const err = await res.text();
+                showToast(`Failed to create file: ${err}`, 'error');
+                if (createBtn) { createBtn.textContent = 'Create File'; createBtn.removeAttribute('disabled'); }
+                return;
+            }
+
+            const data = await res.json();
+            close();
+
+            showToast(`Created ${normalizedPath}`, 'success');
+
+            // Create file object and open in the modal for editing
+            const newFile = {
+                path: normalizedPath,
+                name: fileName,
+                lines: data.lines || 1,
+                content,
+                status: 'added',
+            };
+
+            // Open the file modal in edit mode
+            const { openFileModal } = await import('./file-modal');
+            openFileModal(ctx, newFile);
+
+            // Switch to edit tab after a brief delay to let modal render
+            setTimeout(() => {
+                const editTab = document.querySelector('.modal-tab[data-view="edit"]') as HTMLElement;
+                if (editTab) editTab.click();
+            }, 200);
+
+        } catch (err: any) {
+            showToast(`Error: ${err.message}`, 'error');
+            if (createBtn) { createBtn.textContent = 'Create File'; createBtn.removeAttribute('disabled'); }
+        }
+    }
+
+    render(
+        <NewFileDialog
+            onSubmit={submit}
+            onCancel={close}
+            repoPath={state.repoPath}
+        />,
+        container
+    );
+
+    // Focus and wire up the input
+    requestAnimationFrame(() => {
+        const input = document.getElementById('newFilePathInput') as HTMLInputElement;
+        if (input) {
+            input.focus();
+            input.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    submit(input.value.trim());
+                }
+                if (e.key === 'Escape') {
+                    e.preventDefault();
+                    close();
+                }
+            });
+        }
+        // Also wire create button click
+        const createBtn = document.getElementById('newFileCreateBtn');
+        if (createBtn) {
+            createBtn.addEventListener('click', () => {
+                const input = document.getElementById('newFilePathInput') as HTMLInputElement;
+                if (input) submit(input.value.trim());
+            });
+        }
+    });
+}
+
+// ─── Template content for new files ─────────────────────
+function getTemplateContent(fileName: string, ext: string): string {
+    const baseName = fileName.replace(/\.[^.]+$/, '');
+
+    switch (ext) {
+        case 'ts':
+        case 'tsx':
+            return `/**\n * ${baseName}\n */\n\nexport function ${toCamelCase(baseName)}() {\n    // TODO: implement\n}\n`;
+        case 'js':
+        case 'jsx':
+            return `/**\n * ${baseName}\n */\n\nexport function ${toCamelCase(baseName)}() {\n    // TODO: implement\n}\n`;
+        case 'py':
+            return `"""${baseName}"""\n\n\ndef ${toSnakeCase(baseName)}():\n    \"\"\"TODO: implement\"\"\"\n    pass\n`;
+        case 'css':
+            return `/* ${baseName} styles */\n\n`;
+        case 'html':
+            return `<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>${baseName}</title>\n</head>\n<body>\n    \n</body>\n</html>\n`;
+        case 'json':
+            return `{\n    \n}\n`;
+        case 'md':
+            return `# ${baseName}\n\n`;
+        case 'yaml':
+        case 'yml':
+            return `# ${baseName}\n\n`;
+        case 'toml':
+            return `# ${baseName}\n\n`;
+        default:
+            return ``;
+    }
+}
+
+function toCamelCase(str: string): string {
+    return str
+        .replace(/[^a-zA-Z0-9]+(.)/g, (_, c) => c.toUpperCase())
+        .replace(/^[A-Z]/, c => c.toLowerCase());
+}
+
+function toSnakeCase(str: string): string {
+    return str
+        .replace(/([A-Z])/g, '_$1')
+        .replace(/[^a-zA-Z0-9]+/g, '_')
+        .replace(/^_+|_+$/g, '')
+        .toLowerCase();
+}