gitmaps 1.0.0

package/README.md

@@ -0,0 +1,167 @@
+<p align="center">
+  <img src="banner.png" alt="GitMaps" width="100%" />
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/runtime-Bun-f472b6?style=flat-square" alt="Bun">
+  <img src="https://img.shields.io/badge/framework-Melina-7c3aed?style=flat-square" alt="Melina">
+  <img src="https://img.shields.io/badge/engine-GalaxyDraw-38bdf8?style=flat-square" alt="GalaxyDraw">
+  <img src="https://img.shields.io/badge/license-ISC-4ade80?style=flat-square" alt="License">
+</p>
+
+# 🪐 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.
+
+🌐 **Try it now:** [gitmaps.xyz](https://gitmaps.xyz) — no install required
+
+---
+
+## 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 |
+|---------|-------------|
+| 🖼️ **Infinite Canvas** | Pan, zoom, drag files anywhere. Your layout is saved per-commit. |
+| 📊 **Inline Diffs** | Green additions, red deletions — right inside each card. Scrollbar markers show *where* changes are. |
+| ⏳ **Commit Timeline** | `←` `→` arrow keys through history. Each commit shows exactly which files changed. |
+| 📌 **Persistent Layout** | Drag files where they belong in *your* mental model. Switch commits — arrangement stays. |
+| 🔍 **Command Palette** | `Ctrl+K` to fuzzy-search files with subsequence-weighted scoring and character-level match highlighting. |
+| 🌿 **Branch Comparison** | Side-by-side branch diff viewer with glassmorphism drawer, status badges, and diff cards rendered on canvas. |
+| 📦 **Multi-Repo Workspace** | Load 2-3 repos side-by-side. Auto-offset with zone labels. Sidebar tabs switch commit timelines. |
+| 👁️ **File Preview on Hover** | Glassmorphism tooltip at low zoom: language badge, path, first 12 lines of code. |
+| 🐙 **GitHub Import** | Paste a URL for instant clone, or search by username with live repo filtering. |
+| 🔗 **Connections** | `Alt+click` a line → pick target file → click target line. Visual bezier curves link related code. |
+| 📁 **Layers** | Group files into focused subsets. Each layer remembers its own viewport position. |
+| 🤖 **AI Chat** | Press `I` to open an AI sidebar that understands your current canvas context. |
+| ⌨️ **VIM-style Diff Nav** | `j`/`k` to jump between changes across files, `Shift+J`/`K` for file-level navigation. |
+| 🔎 **Cross-Card Search** | Press `/` to search across all visible file cards. Results highlighted in-place with match counts. |
+| ✏️ **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. |
+| 📝 **PR Review** | Comment threads on any line, stored in localStorage. |
+| 📁 **Card Grouping** | Collapse entire directories into compact summary cards to reduce clutter. |
+
+## 🚀 Quick Start
+
+```sh
+# One-liner (requires Bun)
+npx gitmaps
+# → http://localhost:3335
+```
+
+Or clone for development:
+
+```sh
+git clone https://github.com/7flash/git-on-canvas.git
+cd galaxy-canvas
+bun install
+bun run dev
+```
+
+Open a repository by entering its path in the sidebar dropdown, or navigate directly:
+
+```
+http://localhost:3335/#/path/to/your/repo
+```
+
+Or import from GitHub — click the GitHub icon, paste a repo URL, and it clones + opens instantly.
+
+## 🖥️ Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `←` `→` | Previous / next commit |
+| `Ctrl+K` | Command palette — fuzzy file search |
+| `/` or `Ctrl+F` | Cross-card text search |
+| `j` / `k` | Next / previous diff hunk (VIM-style) |
+| `Shift+J` / `Shift+K` | Next / previous changed file |
+| `W` | Fit selected cards to screen |
+| `H` | Arrange selected in a row |
+| `V` | Arrange selected in a column |
+| `G` | Arrange selected in a grid |
+| `Ctrl+A` | Select all cards |
+| `Del` / `Backspace` | Hide selected files |
+| `Space+Drag` | Pan canvas |
+| `Scroll` | Zoom in/out |
+| `Ctrl+`/`Ctrl-` | Increase/decrease card font size |
+| `I` | Toggle AI chat sidebar |
+| `Alt+Click` | Start connection from clicked line |
+| `Esc` | Cancel / deselect all |
+| Double-click | Zoom to file |
+
+## 📦 Multi-Repo Workspace
+
+Load multiple repositories on the same canvas:
+
+1. Open any repo normally
+2. Use the sidebar dropdown to load a second repo
+3. Repos appear side-by-side with **zone labels** (color-coded floating badges)
+4. **Sidebar tabs** switch commit timelines between repos
+5. Each repo auto-offsets horizontally with an 800px gap
+
+## 🔗 Connections
+
+Draw visual links between related code across files:
+
+1. **Alt+click** a line number in any file card (source)
+2. A **file picker** appears — search and select the target file
+3. **Click a line** in the target file to complete the connection
+
+Connection markers appear as colored dots on the left side of each card. Click a marker to jump to the other end.
+
+## 📁 Layers
+
+Layers let you isolate subsets of files for focused review:
+
+- **Create**: Click `+ New Layer` in the bottom bar
+- **Add files**: Right-click a card → "Add to Layer"  
+- **Switch**: Click any layer tab — canvas shows only that layer's files
+- **Default**: "All Files" layer shows everything
+
+Each layer remembers its own viewport position, so switching layers is instant context-switching.
+
+## 🎮 GalaxyDraw Engine
+
+The canvas is powered by **GalaxyDraw** — a zero-dependency infinite 2D canvas engine built for this project:
+
+| Capability | Implementation |
+|-----------|----------------|
+| **Viewport culling** | Only creates DOM for visible cards. React repo (6833 files): 9 DOM nodes, 6824 deferred. ~35ms vs 14s. |
+| **Zoom LOD** | Below 25%, cards render as lightweight pills with vertical file names. Smooth fade transitions. |
+| **Throttled materialization** | Max 8 cards per frame with 150ms cooldown — no frame drops. |
+| **Dual control modes** | Simple (drag=pan, scroll=zoom) or Advanced (space+drag=pan, rect select). |
+| **Touch support** | Single-finger pan + pinch-to-zoom on tablets. |
+| **Minimap** | Shows all files including deferred cards. Click to navigate. |
+
+GalaxyDraw is also used by [WARMAPS](https://warmaps.xyz) for its intelligence dashboard canvas.
+
+## 🔒 Production Security
+
+When deployed as a SaaS (`NODE_ENV=production`):
+
+- Path traversal protection — only `git-canvas/repos/` and `.data/uploads/` are accessible
+- Folder browser endpoint completely blocked
+- All 7 repo API routes validate paths via `validateRepoPath()`
+
+## ⚙️ Stack
+
+| Component | Technology |
+|-----------|------------|
+| Runtime | [Bun](https://bun.sh) |
+| Framework | [Melina](https://github.com/7flash/melina.js) v2.5 (file-based routing, SSR, hot reload) |
+| State | [XState](https://statemachine.xyz) v5 |
+| Database | [sqlite-zod-orm](https://github.com/7flash/measure-fn) (positions, connections, layers) |
+| Git | [simple-git](https://github.com/steveukx/git-js) |
+| Profiling | [measure-fn](https://github.com/7flash/measure-fn) |
+
+## License
+
+ISC

package/app/api/auth/favorites/route.ts

@@ -0,0 +1,56 @@
+/**
+ * POST /api/auth/favorites — Add/remove favorite repos
+ * 
+ * Body: { action: 'add' | 'remove', repoUrl: string, repoName?: string }
+ * GET /api/auth/favorites — List user's favorites
+ */
+import { getSessionFromRequest, addFavorite, removeFavorite, getUserFavorites } from '../../../lib/auth';
+
+export async function GET(req: Request) {
+    const user = getSessionFromRequest(req);
+    if (!user) {
+        return Response.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const favorites = getUserFavorites(user.id);
+    return Response.json({
+        favorites: favorites.map((f: any) => ({
+            repoUrl: f.repoUrl,
+            repoName: f.repoName,
+            addedAt: f.addedAt,
+        })),
+    });
+}
+
+export async function POST(req: Request) {
+    const user = getSessionFromRequest(req);
+    if (!user) {
+        return Response.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    try {
+        const body = await req.json() as {
+            action: 'add' | 'remove';
+            repoUrl: string;
+            repoName?: string;
+        };
+
+        if (!body.repoUrl) {
+            return Response.json({ error: 'repoUrl required' }, { status: 400 });
+        }
+
+        if (body.action === 'add') {
+            const fav = addFavorite(user.id, body.repoUrl, body.repoName);
+            return Response.json({ ok: true, favorite: { repoUrl: fav.repoUrl, repoName: fav.repoName, addedAt: fav.addedAt } });
+        }
+
+        if (body.action === 'remove') {
+            const removed = removeFavorite(user.id, body.repoUrl);
+            return Response.json({ ok: true, removed });
+        }
+
+        return Response.json({ error: 'action must be "add" or "remove"' }, { status: 400 });
+    } catch (err: any) {
+        return Response.json({ error: err.message }, { status: 400 });
+    }
+}

package/app/api/auth/github/callback/route.ts

@@ -0,0 +1,103 @@
+/**
+ * GET /api/auth/github/callback — GitHub OAuth callback
+ * 
+ * Exchanges the authorization code for an access token,
+ * fetches the GitHub user profile, creates/updates the user,
+ * creates a session, and redirects to the app.
+ */
+import { findOrCreateUser, createSession, sessionCookie } from '../../../../lib/auth';
+
+export async function GET(req: Request) {
+    const url = new URL(req.url);
+    const code = url.searchParams.get('code');
+    const state = url.searchParams.get('state');
+
+    if (!code) {
+        return new Response('Missing authorization code', { status: 400 });
+    }
+
+    // Verify CSRF state
+    const cookie = req.headers.get('cookie') || '';
+    const stateMatch = cookie.match(/gc_oauth_state=([a-f0-9-]+)/);
+    if (!stateMatch || stateMatch[1] !== state) {
+        return new Response('Invalid OAuth state — possible CSRF attack', { status: 403 });
+    }
+
+    const clientId = process.env.GITHUB_CLIENT_ID;
+    const clientSecret = process.env.GITHUB_CLIENT_SECRET;
+
+    if (!clientId || !clientSecret) {
+        return new Response('GitHub OAuth not configured', { status: 500 });
+    }
+
+    try {
+        // 1. Exchange code for access token
+        const tokenRes = await fetch('https://github.com/login/oauth/access_token', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+            },
+            body: JSON.stringify({
+                client_id: clientId,
+                client_secret: clientSecret,
+                code,
+            }),
+        });
+
+        const tokenData = await tokenRes.json() as { access_token?: string; error?: string };
+        if (!tokenData.access_token) {
+            console.error('[auth] Token exchange failed:', tokenData);
+            return new Response('Failed to get access token: ' + (tokenData.error || 'unknown'), { status: 400 });
+        }
+
+        // 2. Fetch GitHub user profile
+        const userRes = await fetch('https://api.github.com/user', {
+            headers: {
+                'Authorization': `Bearer ${tokenData.access_token}`,
+                'Accept': 'application/vnd.github.v3+json',
+                'User-Agent': 'Galaxy-Canvas',
+            },
+        });
+
+        if (!userRes.ok) {
+            return new Response('Failed to fetch GitHub profile', { status: 502 });
+        }
+
+        const ghUser = await userRes.json() as {
+            id: number;
+            login: string;
+            name?: string;
+            avatar_url?: string;
+            email?: string;
+        };
+
+        // 3. Create or update user in our DB
+        const user = findOrCreateUser({
+            id: String(ghUser.id),
+            login: ghUser.login,
+            name: ghUser.name || undefined,
+            avatar_url: ghUser.avatar_url || undefined,
+            email: ghUser.email || undefined,
+        });
+
+        // 4. Create session
+        const token = createSession(user.id);
+
+        // 5. Redirect to app with session cookie
+        return new Response(null, {
+            status: 302,
+            headers: {
+                'Location': '/',
+                'Set-Cookie': [
+                    sessionCookie(token),
+                    // Clear OAuth state cookie
+                    'gc_oauth_state=; Path=/; HttpOnly; Max-Age=0',
+                ].join(', '),
+            },
+        });
+    } catch (err: any) {
+        console.error('[auth] OAuth callback error:', err.message);
+        return new Response('Authentication failed: ' + err.message, { status: 500 });
+    }
+}

package/app/api/auth/github/route.ts

@@ -0,0 +1,32 @@
+/**
+ * GET /api/auth/github — Redirect to GitHub OAuth
+ * 
+ * Initiates the GitHub OAuth flow by redirecting to GitHub's authorize URL.
+ * Requires GITHUB_CLIENT_ID env var (from GitHub OAuth App settings).
+ */
+export async function GET(req: Request) {
+    const clientId = process.env.GITHUB_CLIENT_ID;
+    if (!clientId) {
+        return Response.json({ error: 'GitHub OAuth not configured (set GITHUB_CLIENT_ID)' }, { status: 500 });
+    }
+
+    const url = new URL(req.url);
+    const redirectUri = `${url.origin}/api/auth/github/callback`;
+
+    // Generate state for CSRF protection
+    const state = crypto.randomUUID();
+
+    const githubUrl = new URL('https://github.com/login/oauth/authorize');
+    githubUrl.searchParams.set('client_id', clientId);
+    githubUrl.searchParams.set('redirect_uri', redirectUri);
+    githubUrl.searchParams.set('scope', 'read:user user:email');
+    githubUrl.searchParams.set('state', state);
+
+    return new Response(null, {
+        status: 302,
+        headers: {
+            'Location': githubUrl.toString(),
+            'Set-Cookie': `gc_oauth_state=${state}; Path=/; HttpOnly; SameSite=Lax; Max-Age=600`,
+        },
+    });
+}

package/app/api/auth/me/route.ts

@@ -0,0 +1,52 @@
+/**
+ * GET /api/auth/me — Get current user
+ * POST /api/auth/me — Logout (delete session)
+ * 
+ * Returns the authenticated user's profile, favorites, and settings.
+ */
+import { getSessionFromRequest, deleteSession, getUserFavorites, getAllSettings } from '../../../lib/auth';
+
+export async function GET(req: Request) {
+    const user = getSessionFromRequest(req);
+    if (!user) {
+        return Response.json({ authenticated: false });
+    }
+
+    const favorites = getUserFavorites(user.id);
+    const settings = getAllSettings(user.id);
+
+    return Response.json({
+        authenticated: true,
+        user: {
+            id: user.id,
+            username: user.username,
+            displayName: user.displayName,
+            avatarUrl: user.avatarUrl,
+            email: user.email,
+            createdAt: user.createdAt,
+            lastLoginAt: user.lastLoginAt,
+        },
+        favorites: favorites.map((f: any) => ({
+            repoUrl: f.repoUrl,
+            repoName: f.repoName,
+            addedAt: f.addedAt,
+        })),
+        settings,
+    });
+}
+
+export async function POST(req: Request) {
+    // Logout
+    const cookie = req.headers.get('cookie') || '';
+    const match = cookie.match(/gc_session=([a-f0-9]+)/);
+    if (match) {
+        deleteSession(match[1]);
+    }
+
+    return new Response(null, {
+        status: 200,
+        headers: {
+            'Set-Cookie': 'gc_session=; Path=/; HttpOnly; Max-Age=0',
+        },
+    });
+}

package/app/api/auth/positions/route.ts

@@ -0,0 +1,50 @@
+/**
+ * GET /api/auth/positions?repo=<url> — Load saved positions for a repo
+ * POST /api/auth/positions — Save positions for a repo
+ * 
+ * Enables shared repositories: each user has their own card layout
+ * for the same cloned repository.
+ */
+import { getSessionFromRequest, loadRepoPositions, saveRepoPositions } from '../../../lib/auth';
+
+export async function GET(req: Request) {
+    const user = getSessionFromRequest(req);
+    if (!user) {
+        return Response.json({ authenticated: false });
+    }
+
+    const url = new URL(req.url);
+    const repoUrl = url.searchParams.get('repo');
+    if (!repoUrl) {
+        return Response.json({ error: 'repo param required' }, { status: 400 });
+    }
+
+    const positionsJson = loadRepoPositions(user.id, repoUrl);
+    return Response.json({
+        positions: positionsJson ? JSON.parse(positionsJson) : null,
+        repoUrl,
+    });
+}
+
+export async function POST(req: Request) {
+    const user = getSessionFromRequest(req);
+    if (!user) {
+        return Response.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    try {
+        const body = await req.json() as {
+            repoUrl: string;
+            positions: Record<string, any>;
+        };
+
+        if (!body.repoUrl) {
+            return Response.json({ error: 'repoUrl required' }, { status: 400 });
+        }
+
+        saveRepoPositions(user.id, body.repoUrl, JSON.stringify(body.positions || {}));
+        return Response.json({ ok: true });
+    } catch (err: any) {
+        return Response.json({ error: err.message }, { status: 400 });
+    }
+}

package/app/api/chat/route.ts

@@ -0,0 +1,101 @@
+// @ts-nocheck
+import { measure } from 'measure-fn';
+import { streamLLM } from 'jsx-ai';
+
+/**
+ * POST /api/chat
+ * Streams an AI chat response about a file or the whole canvas.
+ * 
+ * Body: { messages: [{role, content}], fileContext?: {path, content}, canvasContext?: {files: [{path, status}]} }
+ */
+export async function POST(req: Request) {
+    return measure('api:chat', async () => {
+        try {
+            const body = await req.json();
+            const { messages, fileContext, canvasContext, model } = body;
+
+            if (!messages || !Array.isArray(messages)) {
+                return new Response('messages array is required', { status: 400 });
+            }
+
+            // Build system prompt based on context
+            let systemPrompt = '';
+
+            if (fileContext) {
+                systemPrompt = `You are an AI code assistant analyzing a specific file in a Git repository.
+
+FILE: ${fileContext.path}
+STATUS: ${fileContext.status || 'unknown'}
+
+FILE CONTENT:
+\`\`\`
+${fileContext.content || '(no content available)'}
+\`\`\`
+
+${fileContext.diff ? `DIFF (changes in current commit):\n\`\`\`diff\n${fileContext.diff}\n\`\`\`` : ''}
+
+Help the user understand this file. You can:
+- Explain what the code does
+- Point out potential issues or improvements
+- Answer questions about specific parts
+- Suggest refactorings
+- Explain the diff/changes
+
+Be concise but thorough. Use code blocks with language tags for code examples. Reference line numbers when relevant.`;
+            } else if (canvasContext) {
+                systemPrompt = `You are an AI code assistant helping analyze a Git repository's commit changes.
+
+REPOSITORY: ${canvasContext.repoPath || 'unknown'}
+CURRENT COMMIT: ${canvasContext.commitHash || 'none'} — ${canvasContext.commitMessage || ''}
+
+FILES ON CANVAS:
+${(canvasContext.files || []).map(f => `- ${f.path} (${f.status})`).join('\n')}
+
+Help the user understand the codebase, the commit changes, relationships between files, architecture patterns, and potential issues. Be concise and actionable.`;
+            } else {
+                systemPrompt = `You are an AI code assistant. Help the user with their coding questions. Be concise and use code blocks with language tags.`;
+            }
+
+            // Build message array for streamLLM
+            const llmMessages = [
+                { role: 'system', content: systemPrompt },
+                ...messages.map(m => ({
+                    role: m.role as 'user' | 'assistant',
+                    content: m.content,
+                })),
+            ];
+
+            const selectedModel = model || 'gemini-2.5-flash';
+
+            // Create a ReadableStream that streams chunks
+            const stream = new ReadableStream({
+                async start(controller) {
+                    try {
+                        for await (const chunk of streamLLM(selectedModel, llmMessages, {
+                            temperature: 0.3,
+                            maxTokens: 4000,
+                        })) {
+                            controller.enqueue(new TextEncoder().encode(`data: ${JSON.stringify({ text: chunk })}\n\n`));
+                        }
+                        controller.enqueue(new TextEncoder().encode(`data: [DONE]\n\n`));
+                        controller.close();
+                    } catch (err) {
+                        controller.enqueue(new TextEncoder().encode(`data: ${JSON.stringify({ error: err.message })}\n\n`));
+                        controller.close();
+                    }
+                },
+            });
+
+            return new Response(stream, {
+                headers: {
+                    'Content-Type': 'text/event-stream',
+                    'Cache-Control': 'no-cache',
+                    'Connection': 'keep-alive',
+                },
+            });
+        } catch (error: any) {
+            console.error('api:chat:error', error);
+            return new Response(`Error: ${error.message}`, { status: 500 });
+        }
+    });
+}

package/app/api/connections/route.ts

@@ -0,0 +1,72 @@
+import { measure } from 'measure-fn';
+import { Database, z } from 'sqlite-zod-orm';
+import path from 'path';
+
+const dbPath = path.join(process.cwd(), 'db', 'connections_v1.sqlite');
+
+const db = new Database(dbPath, {
+    connections: z.object({
+        conn_id: z.string(),
+        source_file: z.string(),
+        source_line_start: z.number(),
+        source_line_end: z.number(),
+        target_file: z.string(),
+        target_line_start: z.number(),
+        target_line_end: z.number(),
+        comment: z.string().default(''),
+        created_at: z.string().default(() => new Date().toISOString()),
+    }),
+}, {
+    indexes: { connections: ['source_file', 'target_file'] },
+    reactive: false,
+});
+
+export async function GET() {
+    return measure('api:connections:get', async () => {
+        try {
+            const connections = db.connections.select().all();
+            return Response.json({ connections });
+        } catch (error: any) {
+            console.error('api:connections:get:error', error);
+            return new Response(`Error: ${error.message}`, { status: 500 });
+        }
+    });
+}
+
+export async function POST(req: Request) {
+    return measure('api:connections:save', async () => {
+        try {
+            const body = await req.json();
+            const { connections } = body;
+
+            if (!Array.isArray(connections)) {
+                return new Response('connections array is required', { status: 400 });
+            }
+
+            // Delete all existing, then re-insert
+            const existing = db.connections.select().all();
+            for (const e of existing) {
+                e.delete();
+            }
+
+            for (const conn of connections) {
+                db.connections.insert({
+                    conn_id: conn.id,
+                    source_file: conn.sourceFile,
+                    source_line_start: conn.sourceLineStart,
+                    source_line_end: conn.sourceLineEnd,
+                    target_file: conn.targetFile,
+                    target_line_start: conn.targetLineStart,
+                    target_line_end: conn.targetLineEnd,
+                    comment: conn.comment || '',
+                    created_at: conn.createdAt || new Date().toISOString(),
+                });
+            }
+
+            return Response.json({ success: true, count: connections.length });
+        } catch (error: any) {
+            console.error('api:connections:save:error', error);
+            return new Response(`Error: ${error.message}`, { status: 500 });
+        }
+    });
+}