gitmaps 1.0.0 → 1.1.0

package/README.md

@@ -11,19 +11,13 @@
 
 # 🪐 GitMaps
 
-**See every file at once.** Pan, zoom, drag — arrange your codebase the way *you* think about it, not the way the file system forces you to.
+**Transcend the file tree.** GitMaps renders knowledge on an infinite canvas — with layers, time-travel, and a minimap to never lose context.
 
-🌐 **Try it now:** [gitmaps.xyz](https://gitmaps.xyz) — no install required
+🌐 **Try it now:** [gitmaps.xyz](https://gitmaps.xyz) — no install required  
+🔬 **Explore React:** [gitmaps.xyz/facebook/react](https://gitmaps.xyz/facebook/react)
 
 ---
 
-## The Problem
-
-Traditional code review: Open file → read → close → open next file → forget what you just saw → repeat.
-
-**Git on Canvas:**
-All changed files laid out on an infinite canvas. Drag them next to each other. Draw connections between related lines. Switch commits with arrow keys. Your spatial layout persists across sessions.
-
 ## ✨ Features
 
 | Feature | Description |
@@ -45,7 +39,7 @@ All changed files laid out on an infinite canvas. Drag them next to each other.
 | ✏️ **Full Editor** | CodeMirror 6 with syntax highlighting, multi-tab, auto-save, git commit, and code minimap. |
 | ⇄ **Tab Diff** | Compare two open tabs side-by-side with LCS diff, change markers, synced scrolling. |
 | 🧭 **Symbol Outline** | Side panel showing all functions/classes/types in a file. Click to scroll. |
-| 🔀 **Dependency Graph** | `Ctrl+G` to toggle force-directed graph layout based on import relationships. |
+| 🗺️ **Minimap** | Bird's-eye overview with click-to-navigate and viewport indicator. |
 | 📝 **PR Review** | Comment threads on any line, stored in localStorage. |
 | 📁 **Card Grouping** | Collapse entire directories into compact summary cards to reduce clutter. |
 
@@ -60,7 +54,7 @@ npx gitmaps
 Or clone for development:
 
 ```sh
-git clone https://github.com/7flash/git-on-canvas.git
+git clone https://github.com/7flash/gitmaps.git
 cd galaxy-canvas
 bun install
 bun run dev

package/app/[owner]/[repo]/page.client.tsx

@@ -0,0 +1,5 @@
+/**
+ * Dynamic owner/repo route client — re-exports the root page client.
+ * This ensures the client mount script is loaded for /owner/repo URLs.
+ */
+export { default } from '../../page.client';

package/app/[owner]/[repo]/page.tsx

@@ -0,0 +1,6 @@
+/**
+ * Dynamic owner/repo route — renders the same canvas page as root.
+ * URL: /7flash/gitmaps, /facebook/react, etc.
+ * The owner and repo are read client-side from window.location.pathname.
+ */
+export { default } from '../../page';

package/app/[slug]/page.client.tsx

@@ -0,0 +1,5 @@
+/**
+ * Dynamic slug route client — re-exports the root page client.
+ * This ensures the client mount script is loaded for /slug URLs.
+ */
+export { default } from '../page.client';

package/app/[slug]/page.tsx

@@ -0,0 +1,6 @@
+/**
+ * Dynamic slug route — renders the same canvas page as root.
+ * URL: /starwar, /galaxy-canvas, etc.
+ * The slug is read client-side from window.location.pathname.
+ */
+export { default } from '../page';

package/app/api/manifest.json/route.ts

@@ -0,0 +1,20 @@
+// GET /api/manifest.json — PWA Web App Manifest
+export function GET() {
+    return Response.json({
+        name: 'GitMaps — Spatial Code Explorer',
+        short_name: 'GitMaps',
+        description: 'Transcend the file tree. Explore code on an infinite canvas with layers, time-travel, and a minimap.',
+        start_url: '/',
+        display: 'standalone',
+        background_color: '#0a0a0f',
+        theme_color: '#7c3aed',
+        orientation: 'any',
+        categories: ['developer-tools', 'productivity'],
+        icons: [
+            { src: '/api/pwa-icon?size=192', sizes: '192x192', type: 'image/png' },
+            { src: '/api/pwa-icon?size=512', sizes: '512x512', type: 'image/png' },
+        ],
+    }, {
+        headers: { 'Content-Type': 'application/manifest+json' },
+    });
+}

package/app/api/pwa-icon/route.ts

@@ -0,0 +1,14 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+const iconBuffer = readFileSync(join(import.meta.dir, '..', '..', 'icon.png'));
+
+// GET /api/pwa-icon — serves the app icon (any size param ignored, returns PNG)
+export function GET() {
+    return new Response(iconBuffer, {
+        headers: {
+            'Content-Type': 'image/png',
+            'Cache-Control': 'public, max-age=86400',
+        },
+    });
+}

package/app/api/repo/clone-stream/route.ts

@@ -1,7 +1,7 @@
 import { measure } from 'measure-fn';
 import path from 'path';
 import fs from 'fs';
-import { spawn } from 'child_process';
+
 
 const CLONES_DIR = path.join(process.cwd(), 'git-canvas', 'repos');
 
@@ -46,8 +46,8 @@ export async function POST(req: Request) {
     if (fs.existsSync(path.join(targetPath, '.git'))) {
         return measure('api:repo:clone-stream:cached', async () => {
             try {
-                const pull = spawn('git', ['pull'], { cwd: targetPath, stdio: 'pipe' });
-                await new Promise<void>((resolve) => pull.on('close', resolve));
+                const pull = Bun.spawn(['git', 'pull'], { cwd: targetPath, stdio: ['ignore', 'pipe', 'pipe'] });
+                await pull.exited;
                 console.log(`[clone-stream] Updated existing repo: ${repoName}`);
             } catch {
                 console.log(`[clone-stream] Using existing repo (pull skipped): ${repoName}`);
@@ -69,7 +69,7 @@ export async function POST(req: Request) {
 
             sendSSE('progress', { message: `Starting clone of ${repoName}...`, percent: 0 });
 
-            const gitProc = spawn('git', ['clone', '--depth', '100', '--progress', url, targetPath], {
+            const gitProc = Bun.spawn(['git', 'clone', '--depth', '100', '--progress', url, targetPath], {
                 stdio: ['ignore', 'pipe', 'pipe']
             });
 
@@ -99,10 +99,20 @@ export async function POST(req: Request) {
                 }
             }
 
-            gitProc.stderr.on('data', parseProgress);
-            gitProc.stdout.on('data', parseProgress);
+            async function consumeStream(stream: ReadableStream) {
+                try {
+                    for await (const chunk of stream) {
+                        parseProgress(Buffer.from(chunk));
+                    }
+                } catch (e) {
+                    console.error('[clone-stream] stream parse error:', e);
+                }
+            }
 
-            gitProc.on('close', (code) => {
+            if (gitProc.stderr) consumeStream(gitProc.stderr);
+            if (gitProc.stdout) consumeStream(gitProc.stdout);
+
+            gitProc.exited.then(code => {
                 if (code === 0) {
                     console.log(`[clone-stream] ✅ Cloned ${repoName}`);
                     sendSSE('done', { ok: true, path: targetPath, cached: false });
@@ -110,13 +120,11 @@ export async function POST(req: Request) {
                     console.error(`[clone-stream] ✗ git clone exited with code ${code}`);
                     sendSSE('error', { error: `git clone failed (exit code ${code})` });
                 }
-                try { controller.close(); } catch { /* already closed */ }
-            });
-
-            gitProc.on('error', (err) => {
+                try { controller.close(); } catch { }
+            }).catch(err => {
                 console.error('[clone-stream] spawn error:', err);
                 sendSSE('error', { error: err.message || 'Failed to start git' });
-                try { controller.close(); } catch { /* already closed */ }
+                try { controller.close(); } catch { }
             });
         }
     });

package/app/api/repo/imports/route.ts

@@ -1,6 +1,7 @@
 import { measure } from 'measure-fn';
 import simpleGit from 'simple-git';
 import { validateRepoPath } from '../validate-path';
+import { join } from 'path';
 
 /**
  * POST /api/repo/imports
@@ -96,13 +97,30 @@ export async function POST(req: Request) {
             });
 
             // Scan each source file for imports (limit to first 200 files for perf)
-            const filesToScan = sourceFiles.slice(0, 200);
+            const filesToScan = sourceFiles.slice(0, 300);
             const edges: { source: string; target: string; line: number }[] = [];
 
+            const isWorkingTree = !commit || commit === 'allfiles' || commit === 'HEAD' || commit === '';
+
             await Promise.allSettled(filesToScan.map(async (filePath) => {
                 try {
-                    const content = await git.show([`${commit}:${filePath}`]);
-                    const lines = content.split('\n');
+                    let text = '';
+                    if (isWorkingTree) {
+                        try {
+                            const file = Bun.file(join(repoPath, filePath));
+                            if (await file.exists()) {
+                                text = await file.text();
+                            }
+                        } catch {
+                            // Fallback if failed
+                        }
+                    }
+                    if (!text) {
+                        text = await git.show([`${commit === 'allfiles' ? 'HEAD' : commit}:${filePath}`]);
+                    }
+                    if (!text) return;
+
+                    const lines = text.split('\n');
 
                     for (let i = 0; i < Math.min(lines.length, 100); i++) {
                         // Only scan first 100 lines (imports are at the top)

package/app/api/repo/list/route.ts

@@ -0,0 +1,30 @@
+// app/api/repo/list/route.ts — Lists repos from the git-canvas/repos directory
+import { readdirSync, statSync, existsSync } from 'fs';
+import { join } from 'path';
+
+export async function GET() {
+    const reposDir = join(process.cwd(), 'git-canvas', 'repos');
+    const repos: { name: string; path: string }[] = [];
+
+    if (existsSync(reposDir)) {
+        try {
+            const entries = readdirSync(reposDir);
+            for (const entry of entries) {
+                const fullPath = join(reposDir, entry);
+                try {
+                    const stat = statSync(fullPath);
+                    if (stat.isDirectory()) {
+                        // Check if it's a git repo (has .git)
+                        const isGit = existsSync(join(fullPath, '.git'));
+                        repos.push({
+                            name: entry,
+                            path: fullPath.replace(/\\/g, '/'),
+                        });
+                    }
+                } catch { }
+            }
+        } catch { }
+    }
+
+    return Response.json({ repos });
+}

package/app/api/repo/upload/route.ts

@@ -1,9 +1,6 @@
 import { mkdir, writeFile } from "fs/promises";
 import * as path from "path";
-import { exec } from "child_process";
-import { promisify } from "util";
-
-const execAsync = promisify(exec);
+import { $ } from "bun";
 
 export async function POST(req: Request) {
     try {
@@ -35,15 +32,15 @@ export async function POST(req: Request) {
         }
 
         // Initialize a Git repository so galaxy-canvas can read it
-        await execAsync(`git init`, { cwd: repoPath });
+        await $`git init`.cwd(repoPath);
 
         // Setup dummy user info, otherwise git commits will fail if not globally set
-        await execAsync(`git config user.name "Galaxy Canvas"`, { cwd: repoPath });
-        await execAsync(`git config user.email "bot@galaxycanvas.local"`, { cwd: repoPath });
+        await $`git config user.name "Galaxy Canvas"`.cwd(repoPath);
+        await $`git config user.email "bot@galaxycanvas.local"`.cwd(repoPath);
 
         // Add all files and commit
-        await execAsync(`git add .`, { cwd: repoPath });
-        await execAsync(`git commit -m "Initial drop imported by drag-and-drop"`, { cwd: repoPath });
+        await $`git add .`.cwd(repoPath);
+        await $`git commit -m "Initial drop imported by drag-and-drop"`.cwd(repoPath);
 
         return Response.json({ path: repoPath, success: true });
     } catch (e: any) {

package/app/api/sw.js/route.ts

@@ -0,0 +1,70 @@
+// GET /api/sw.js — Service Worker for offline caching
+export function GET() {
+    const sw = `
+const CACHE_NAME = 'gitmaps-v1';
+const PRECACHE = [
+    '/',
+];
+
+self.addEventListener('install', (e) => {
+    e.waitUntil(
+        caches.open(CACHE_NAME).then(cache => cache.addAll(PRECACHE))
+    );
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (e) => {
+    e.waitUntil(
+        caches.keys().then(keys =>
+            Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
+        )
+    );
+    self.clients.claim();
+});
+
+self.addEventListener('fetch', (e) => {
+    const url = new URL(e.request.url);
+
+    // Skip non-GET, WebSocket, and API requests (except manifest)
+    if (e.request.method !== 'GET') return;
+    if (url.protocol === 'ws:' || url.protocol === 'wss:') return;
+    if (url.pathname.startsWith('/api/') && !url.pathname.includes('manifest')) return;
+
+    // Network-first for HTML pages (always get fresh content)
+    if (e.request.headers.get('accept')?.includes('text/html')) {
+        e.respondWith(
+            fetch(e.request)
+                .then(res => {
+                    const clone = res.clone();
+                    caches.open(CACHE_NAME).then(c => c.put(e.request, clone));
+                    return res;
+                })
+                .catch(() => caches.match(e.request))
+        );
+        return;
+    }
+
+    // Cache-first for static assets (CSS, JS, fonts, images)
+    e.respondWith(
+        caches.match(e.request).then(cached => {
+            if (cached) return cached;
+            return fetch(e.request).then(res => {
+                if (res.ok && res.status === 200) {
+                    const clone = res.clone();
+                    caches.open(CACHE_NAME).then(c => c.put(e.request, clone));
+                }
+                return res;
+            });
+        })
+    );
+});
+`;
+
+    return new Response(sw, {
+        headers: {
+            'Content-Type': 'application/javascript',
+            'Service-Worker-Allowed': '/',
+            'Cache-Control': 'no-cache',
+        },
+    });
+}

package/app/galaxy-canvas/page.client.tsx

@@ -0,0 +1,2 @@
+// Re-export root page client for /galaxy-canvas route
+export { default } from '../page.client';

package/app/galaxy-canvas/page.tsx

@@ -0,0 +1,5 @@
+/**
+ * galaxy-canvas route — Aliases root page for /galaxy-canvas path
+ */
+import Page from '../page';
+export default Page;