gitmaps 1.0.0

package/app/page.client.tsx

@@ -0,0 +1,215 @@
+// @ts-nocheck
+/**
+ * page.client.tsx — Slim orchestrator
+ *
+ * Creates the XState actor, initialises all sub-modules, and returns a
+ * cleanup function.  All heavy logic lives in `./lib/*`.
+ * 
+ * Uses an AbortController to cancel in-flight async work when cleanup runs,
+ * preventing the "stopped actor" race condition.
+ */
+import { measure } from 'measure-fn';
+import { createActor } from 'xstate';
+import { canvasMachine } from './state/machine.js';
+import { createCanvasContext } from './lib/context';
+import { loadSavedPositions } from './lib/positions';
+import { loadHiddenFiles, updateHiddenUI } from './lib/hidden-files';
+import { setupCanvasInteraction, setupEventListeners } from './lib/events';
+import { loadConnections } from './lib/connections';
+import { clearCanvas, updateCanvasTransform, updateZoomUI, restoreViewport } from './lib/canvas';
+import { setupPillInteraction } from './lib/viewport-culling';
+import { loadRepository } from './lib/repo';
+import { initLayers, renderLayersUI } from './lib/layers';
+import { setupAuth, updateFavoriteStar } from './lib/user';
+import { setupPerfOverlay } from './lib/perf-overlay';
+import { initGalaxyDrawState, initCardManager } from './lib/galaxydraw-bridge';
+import { initFilePreview, destroyFilePreview } from './lib/file-preview';
+import { initBranchCompare } from './lib/branch-compare';
+import { initCommandPalette } from './lib/command-palette';
+import { initShortcutsPanel } from './lib/shortcuts-panel';
+import { initStatusBar } from './lib/status-bar';
+
+export default function mount(): () => void {
+    // Stop any previous actor from a prior mount
+    if ((window as any).__gitcanvas_cleanup__) {
+        try { (window as any).__gitcanvas_cleanup__(); } catch (_) { }
+    }
+
+    const actor = createActor(canvasMachine);
+    const ctx = createCanvasContext(actor);
+    let disposed = false;
+
+    // ─── Init ────────────────────────────────────────────
+    async function init() {
+        return measure('app:init', async () => {
+            ctx.canvas = document.getElementById('canvasContent');
+            ctx.canvasViewport = document.getElementById('canvasViewport');
+
+            // Reuse existing SVG overlay from server-rendered DOM
+            ctx.svgOverlay = document.getElementById('connectionsOverlay') as unknown as SVGSVGElement;
+            if (!ctx.svgOverlay && ctx.canvas) {
+                // Fallback: create overlay if not present
+                ctx.svgOverlay = document.createElementNS('http://www.w3.org/2000/svg', 'svg') as SVGSVGElement;
+                ctx.svgOverlay.id = 'connectionsOverlay';
+                ctx.svgOverlay.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible;';
+                ctx.canvas.appendChild(ctx.svgOverlay);
+            }
+
+            // Init galaxydraw state engine (binds to existing DOM)
+            initGalaxyDrawState(ctx);
+
+            // Init galaxydraw card manager (Phase 4 — registers file + diff plugins)
+            initCardManager(ctx);
+
+            actor.start();
+            setupCanvasInteraction(ctx);
+            setupEventListeners(ctx);
+            setupPillInteraction(ctx);
+            setupPerfOverlay(ctx);
+            if (ctx.canvasViewport) initFilePreview(ctx.canvasViewport, ctx);
+            initBranchCompare(ctx);
+            initCommandPalette(ctx);
+            initShortcutsPanel();
+            initStatusBar(ctx);
+            await loadSavedPositions(ctx); // initial load (may be empty if no repo yet)
+            if (disposed) return; // bail if cleaned up during await
+            loadHiddenFiles(ctx);
+            updateHiddenUI(ctx);
+            await loadConnections(ctx);
+            if (disposed) return; // bail if cleaned up during await
+
+            // Init auth UI
+            setupAuth();
+
+            // ── Shared Layout Decoder ──────────────────────────────────────────
+            const applySharedLayout = async (ctx: CanvasContext) => {
+                const urlParams = new URLSearchParams(window.location.search);
+                const sharedLayout = urlParams.get('layout');
+                if (!sharedLayout) return;
+
+                try {
+                    const parsed = JSON.parse(atob(sharedLayout));
+                    if (parsed.positions) {
+                        ctx.positions = new Map(Object.entries(parsed.positions));
+                        const { savePosition } = await import('./lib/positions');
+                        // Quick dummy save to trigger debounced persistence
+                        savePosition(ctx, '_share_', '_trigger_', 0, 0);
+                    }
+                    if (parsed.hiddenFiles) {
+                        ctx.hiddenFiles = new Set(parsed.hiddenFiles);
+                        const { saveHiddenFiles } = await import('./lib/hidden-files');
+                        saveHiddenFiles(ctx);
+                        updateHiddenUI(ctx);
+                    }
+                    if (parsed.zoom !== undefined) ctx.actor.send({ type: 'SET_ZOOM', zoom: parsed.zoom });
+                    if (parsed.offsetX !== undefined) ctx.actor.send({ type: 'SET_OFFSET', x: parsed.offsetX, y: parsed.offsetY });
+                    if (parsed.cardSizes) {
+                        for (const [path, size] of Object.entries(parsed.cardSizes)) {
+                            ctx.actor.send({ type: 'RESIZE_CARD', path, width: (size as any).width, height: (size as any).height });
+                        }
+                    }
+
+                    const cleanUrl = new URL(window.location.href);
+                    cleanUrl.searchParams.delete('layout');
+                    window.history.replaceState({}, '', cleanUrl.toString());
+                    const { showToast } = await import('./lib/utils');
+                    showToast('Shared layout applied!', 'success');
+                } catch (e) {
+                    console.error('Failed to decode shared layout', e);
+                }
+            };
+
+            // Check URL hash for repo slug (or legacy full path)
+            const hashValue = decodeURIComponent(window.location.hash.replace('#', ''));
+            if (hashValue) {
+                // Resolve slug to full path (check localStorage mapping)
+                const resolvedPath = localStorage.getItem(`gitcanvas:slug:${hashValue}`) || hashValue;
+
+                // Hide landing immediately since we have a repo
+                const landing = document.getElementById('landingOverlay');
+                if (landing) landing.style.display = 'none';
+
+                const sel = document.getElementById('repoSelect') as HTMLSelectElement;
+                if (sel) sel.value = resolvedPath;
+
+                // Init layers based on repo
+                ctx.actor.send({ type: 'LOAD_REPO', path: resolvedPath });
+                ctx.snap().context.repoPath = resolvedPath;
+                await loadSavedPositions(ctx); // reload positions for this repo
+                if (disposed) return;
+                await applySharedLayout(ctx);
+                initLayers(ctx);
+                renderLayersUI(ctx);
+                restoreViewport(ctx);
+                updateCanvasTransform(ctx);
+                updateZoomUI(ctx);
+
+                if (!disposed) {
+                    import('./lib/pr-review').then(({ initReviewStore }) => {
+                        initReviewStore(hashValue);
+                    });
+                    loadRepository(ctx, resolvedPath);
+                    updateFavoriteStar(resolvedPath);
+                }
+            } else {
+                const saved = localStorage.getItem('gitcanvas:lastRepo');
+                if (saved) {
+                    const sel2 = document.getElementById('repoSelect') as HTMLSelectElement;
+                    if (sel2) sel2.value = saved;
+
+                    // Set URL hash to friendly slug instead of full path
+                    const savedSlug = saved.replace(/\\/g, '/').split('/').filter(Boolean).pop() || saved;
+                    history.replaceState(null, '', '#' + encodeURIComponent(savedSlug));
+                    // Store slug→path mapping
+                    localStorage.setItem(`gitcanvas:slug:${savedSlug}`, saved);
+
+                    ctx.actor.send({ type: 'LOAD_REPO', path: saved });
+                    ctx.snap().context.repoPath = saved;
+                    await loadSavedPositions(ctx);
+                    if (disposed) return;
+                    await applySharedLayout(ctx);
+                    initLayers(ctx);
+                    renderLayersUI(ctx);
+                    restoreViewport(ctx);
+                    updateCanvasTransform(ctx);
+                    updateZoomUI(ctx);
+
+                    // Actually load the repo data
+                    if (!disposed) {
+                        import('./lib/pr-review').then(({ initReviewStore }) => {
+                            initReviewStore(savedSlug);
+                        });
+                        loadRepository(ctx, saved);
+                    }
+                }
+            }
+
+            // Listen for hash changes
+            window.addEventListener('hashchange', () => {
+                if (disposed) return;
+                const hashSlug = decodeURIComponent(window.location.hash.replace('#', ''));
+                const resolvedPath = localStorage.getItem(`gitcanvas:slug:${hashSlug}`) || hashSlug;
+                if (resolvedPath && resolvedPath !== ctx.snap().context.repoPath) {
+                    const sel3 = document.getElementById('repoSelect') as HTMLSelectElement;
+                    if (sel3) sel3.value = resolvedPath;
+                    loadRepository(ctx, resolvedPath);
+                    updateFavoriteStar(resolvedPath);
+                }
+            });
+        });
+    }
+
+    // ─── Boot ────────────────────────────────────────────
+    init();
+
+    // ─── Cleanup ─────────────────────────────────────────
+    const cleanup = () => {
+        disposed = true;
+        (window as any).__gitcanvas_cleanup__ = null;
+        try { actor.stop(); } catch (_) { }
+        if (ctx.canvasViewport) destroyFilePreview(ctx.canvasViewport);
+        clearCanvas(ctx);
+    };
+    (window as any).__gitcanvas_cleanup__ = cleanup;
+    return cleanup;
+}

package/app/page.tsx

@@ -0,0 +1,291 @@
+/**
+ * Home Page — JSX server component
+ *
+ * Returns the canvas viewport as JSX.
+ * Client interactivity is mounted by page.client.tsx.
+ */
+
+const FEATURED_REPOS_FALLBACK = [
+    { name: 'facebook/react', desc: 'UI Library', lang: 'JavaScript', stars: '230k' },
+    { name: 'denoland/deno', desc: 'JS Runtime', lang: 'TypeScript', stars: '100k' },
+    { name: 'sveltejs/svelte', desc: 'Compiler Framework', lang: 'TypeScript', stars: '80k' },
+    { name: 'oven-sh/bun', desc: 'JS Toolkit', lang: 'Zig', stars: '75k' },
+    { name: 'vercel/next.js', desc: 'React Framework', lang: 'TypeScript', stars: '127k' },
+    { name: 'tailwindlabs/tailwindcss', desc: 'CSS Framework', lang: 'TypeScript', stars: '85k' },
+];
+
+// Cache GitHub stats for 5 minutes
+let _cachedRepos: typeof FEATURED_REPOS_FALLBACK | null = null;
+let _cacheTime = 0;
+const CACHE_TTL = 5 * 60 * 1000;
+
+function formatStars(n: number): string {
+    return n >= 1000 ? `${Math.round(n / 1000)}k` : String(n);
+}
+
+async function getFeaturedRepos() {
+    if (_cachedRepos && Date.now() - _cacheTime < CACHE_TTL) return _cachedRepos;
+    try {
+        const results = await Promise.all(
+            FEATURED_REPOS_FALLBACK.map(async (r) => {
+                const resp = await fetch(`https://api.github.com/repos/${r.name}`, {
+                    headers: { 'Accept': 'application/vnd.github.v3+json', 'User-Agent': 'GitMaps' },
+                    signal: AbortSignal.timeout(3000),
+                });
+                if (!resp.ok) return r;
+                const data = await resp.json();
+                return {
+                    name: r.name,
+                    desc: r.desc,
+                    lang: data.language || r.lang,
+                    stars: formatStars(data.stargazers_count || 0),
+                };
+            })
+        );
+        _cachedRepos = results;
+        _cacheTime = Date.now();
+        return results;
+    } catch {
+        return _cachedRepos || FEATURED_REPOS_FALLBACK;
+    }
+}
+
+export default function Page() {
+    // Use fallback values synchronously — Melina does NOT support async page components.
+    // The GitHub star counts are fetched client-side or pre-cached.
+    const featuredRepos = _cachedRepos || FEATURED_REPOS_FALLBACK;
+    // Trigger async cache fill for next render
+    getFeaturedRepos().catch(() => { });
+
+    const langColors: Record<string, string> = {
+        JavaScript: '#f1e05a',
+        TypeScript: '#3178c6',
+        Zig: '#ec915c',
+        Rust: '#dea584',
+        Go: '#00ADD8',
+    };
+
+    return (
+        <div className="canvas-viewport" id="canvasViewport">
+            <div className="canvas-content" id="canvasContent">
+                <svg className="connections-overlay" id="connectionsOverlay"></svg>
+            </div>
+
+            {/* Landing overlay — visible until a repo is loaded */}
+            <div className="landing-overlay" id="landingOverlay">
+                {/* Animated grid canvas background */}
+                <div className="landing-grid-bg">
+                    <div className="grid-line gl-h1"></div>
+                    <div className="grid-line gl-h2"></div>
+                    <div className="grid-line gl-h3"></div>
+                    <div className="grid-line gl-v1"></div>
+                    <div className="grid-line gl-v2"></div>
+                    <div className="grid-line gl-v3"></div>
+                </div>
+
+                {/* Animated background particles */}
+                <div className="landing-bg-particles" id="landingParticles">
+                    <div className="particle p1"></div>
+                    <div className="particle p2"></div>
+                    <div className="particle p3"></div>
+                    <div className="particle p4"></div>
+                    <div className="particle p5"></div>
+                    <div className="particle p6"></div>
+                    <div className="particle p7"></div>
+                    <div className="particle p8"></div>
+                </div>
+                {/* Gradient mesh background */}
+                <div className="landing-mesh"></div>
+
+                <div className="landing-content">
+                    {/* Hero Section */}
+                    <div className="landing-hero">
+                        <div className="landing-badge">
+                            <span className="badge-dot"></span>
+                            Open Source · Spatial Code Explorer
+                        </div>
+
+                        <div className="landing-icon">
+                            <svg viewBox="0 0 140 140" width="100" height="100" fill="none">
+                                {/* Outer ring with dash animation */}
+                                <circle cx="70" cy="70" r="64" stroke="url(#lgHero)" strokeWidth="1.5" opacity="0.2" strokeDasharray="6 8" className="ring-outer" />
+                                <circle cx="70" cy="70" r="48" stroke="url(#lgHero)" strokeWidth="1.2" opacity="0.15" strokeDasharray="4 6" className="ring-mid" />
+                                <circle cx="70" cy="70" r="30" stroke="url(#lgHero)" strokeWidth="1" opacity="0.1" />
+
+                                {/* Center glow core */}
+                                <circle cx="70" cy="70" r="8" fill="url(#lgHero)" opacity="0.9" className="core-glow" />
+                                <circle cx="70" cy="70" r="4" fill="#fff" opacity="0.8" />
+
+                                {/* Orbiting nodes with connection lines */}
+                                <g className="orbit-group">
+                                    <line x1="70" y1="6" x2="70" y2="62" stroke="#a78bfa" strokeWidth="0.6" opacity="0.2" />
+                                    <circle cx="70" cy="6" r="5" fill="#a78bfa" opacity="0.85" className="node-orbit n1" />
+                                    <circle cx="70" cy="6" r="2" fill="#fff" opacity="0.6" />
+
+                                    <line x1="126" y1="46" x2="76" y2="68" stroke="#60a5fa" strokeWidth="0.6" opacity="0.2" />
+                                    <circle cx="126" cy="46" r="4.5" fill="#60a5fa" opacity="0.8" className="node-orbit n2" />
+                                    <circle cx="126" cy="46" r="1.8" fill="#fff" opacity="0.5" />
+
+                                    <line x1="112" y1="110" x2="74" y2="74" stroke="#34d399" strokeWidth="0.6" opacity="0.18" />
+                                    <circle cx="112" cy="110" r="4" fill="#34d399" opacity="0.75" className="node-orbit n3" />
+
+                                    <line x1="28" y1="110" x2="66" y2="74" stroke="#f472b6" strokeWidth="0.6" opacity="0.18" />
+                                    <circle cx="28" cy="110" r="4" fill="#f472b6" opacity="0.65" className="node-orbit n4" />
+
+                                    <line x1="14" y1="46" x2="64" y2="68" stroke="#fbbf24" strokeWidth="0.6" opacity="0.2" />
+                                    <circle cx="14" cy="46" r="3.5" fill="#fbbf24" opacity="0.7" className="node-orbit n5" />
+
+                                    {/* Extra subtle node */}
+                                    <circle cx="98" cy="20" r="2.5" fill="#818cf8" opacity="0.4" className="node-orbit n6" />
+                                    <circle cx="42" cy="20" r="2" fill="#c084fc" opacity="0.35" />
+                                </g>
+
+                                <defs>
+                                    <linearGradient id="lgHero" x1="0%" y1="0%" x2="100%" y2="100%">
+                                        <stop offset="0%" stopColor="#a78bfa" />
+                                        <stop offset="50%" stopColor="#60a5fa" />
+                                        <stop offset="100%" stopColor="#34d399" />
+                                    </linearGradient>
+                                    <radialGradient id="rgCore">
+                                        <stop offset="0%" stopColor="#c4b5fd" />
+                                        <stop offset="100%" stopColor="#7c3aed" />
+                                    </radialGradient>
+                                </defs>
+                            </svg>
+                        </div>
+
+                        <h1 className="landing-title">
+                            <span className="title-git">Git</span>
+                            <span className="title-maps">Maps</span>
+                        </h1>
+                        <p className="landing-subtitle">
+                            See your codebase in a new dimension.<br />
+                            <span className="subtitle-accent">Every file becomes a card. Every change tells a story.</span>
+                        </p>
+                    </div>
+
+                    {/* Feature Cards */}
+                    <div className="landing-features">
+                        <div className="feature-card fc-1">
+                            <div className="feature-glow"></div>
+                            <div className="feature-icon-wrap">
+                                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                                    <rect x="3" y="3" width="7" height="7" rx="1" />
+                                    <rect x="14" y="3" width="7" height="7" rx="1" />
+                                    <rect x="3" y="14" width="7" height="7" rx="1" />
+                                    <rect x="14" y="14" width="7" height="7" rx="1" />
+                                </svg>
+                            </div>
+                            <h3>Spatial Code Review</h3>
+                            <p>Every file becomes a card on an infinite 2D canvas. Arrange, group, and navigate them spatially — not as a flat list.</p>
+                        </div>
+
+                        <div className="feature-card fc-2">
+                            <div className="feature-glow"></div>
+                            <div className="feature-icon-wrap">
+                                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                                    <circle cx="6" cy="6" r="3" />
+                                    <circle cx="18" cy="18" r="3" />
+                                    <path d="M8.59 13.51l6.83 6.83" />
+                                    <line x1="21" y1="3" x2="14" y2="10" />
+                                    <polyline points="21 10 21 3 14 3" />
+                                </svg>
+                            </div>
+                            <h3>Interwingled Files</h3>
+                            <p>Draw connections between related lines across files. See how <code>auth.ts:42</code> relates to <code>middleware.ts:15</code> — visually.</p>
+                        </div>
+
+                        <div className="feature-card fc-3">
+                            <div className="feature-glow"></div>
+                            <div className="feature-icon-wrap">
+                                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                                    <polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2" />
+                                    <line x1="12" y1="22" x2="12" y2="15.5" />
+                                    <polyline points="22 8.5 12 15.5 2 8.5" />
+                                    <polyline points="2 15.5 12 8.5 22 15.5" />
+                                    <line x1="12" y1="2" x2="12" y2="8.5" />
+                                </svg>
+                            </div>
+                            <h3>Layers of Focus</h3>
+                            <p>Create layers to isolate subsets of files. "Auth layer" shows only auth-related changes. Switch context without losing position.</p>
+                        </div>
+
+                        <div className="feature-card fc-4">
+                            <div className="feature-glow"></div>
+                            <div className="feature-icon-wrap">
+                                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+                                    <polyline points="7.5 4.21 12 6.81 16.5 4.21" />
+                                    <polyline points="7.5 19.79 7.5 14.6 3 12" />
+                                    <polyline points="21 12 16.5 14.6 16.5 19.79" />
+                                    <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+                                    <line x1="12" y1="22.08" x2="12" y2="12" />
+                                </svg>
+                            </div>
+                            <h3>Clone & Explore</h3>
+                            <p>Paste any GitHub URL and explore it instantly. Real-time clone progress, smart caching, and full commit timeline navigation.</p>
+                        </div>
+                    </div>
+
+                    {/* Featured Repos — Quick start */}
+                    <div className="landing-repos">
+                        <div className="repos-header">
+                            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+                                <path d="M9 18c-4.51 2-5-2-7-2" />
+                            </svg>
+                            <span>Explore popular repositories</span>
+                        </div>
+                        <div className="repos-grid">
+                            {featuredRepos.map((repo) => (
+                                <button
+                                    key={repo.name}
+                                    className="repo-card-btn"
+                                    data-repo={`https://github.com/${repo.name}`}
+                                    id={`landing-repo-${repo.name.replace('/', '-')}`}
+                                >
+                                    <div className="repo-card-name">{repo.name.split('/')[1]}</div>
+                                    <div className="repo-card-org">{repo.name.split('/')[0]}</div>
+                                    <div className="repo-card-meta">
+                                        <span className="repo-card-lang">
+                                            <span className="lang-dot" style={{ background: langColors[repo.lang] || '#888' }}></span>
+                                            {repo.lang}
+                                        </span>
+                                        <span className="repo-card-stars">★ {repo.stars}</span>
+                                    </div>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Call to Action */}
+                    <div className="landing-cta">
+                        <div className="cta-arrows">
+                            <span className="cta-arrow a1">←</span>
+                            <span className="cta-text">Select a repository from the sidebar to begin</span>
+                        </div>
+                        <div className="cta-or">or click Import from GitHub in the sidebar</div>
+                    </div>
+
+                    {/* Stats Row */}
+                    <div className="landing-stats">
+                        <div className="landing-stat">
+                            <span className="stat-num">∞</span>
+                            <span className="stat-desc">Infinite Canvas</span>
+                        </div>
+                        <div className="stat-divider"></div>
+                        <div className="landing-stat">
+                            <span className="stat-num">0ms</span>
+                            <span className="stat-desc">Local-First</span>
+                        </div>
+                        <div className="stat-divider"></div>
+                        <div className="landing-stat">
+                            <span className="stat-num">OSS</span>
+                            <span className="stat-desc">Open Source</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}