gitmaps 1.0.0 → 1.1.0

package/app/page.tsx

@@ -51,10 +51,7 @@ async function getFeaturedRepos() {
 }
 
 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> = {
@@ -98,7 +95,7 @@ export default function Page() {
                 <div className="landing-mesh"></div>
 
                 <div className="landing-content">
-                    {/* Hero Section */}
+                    {/* Hero Section — integrates the pitch message */}
                     <div className="landing-hero">
                         <div className="landing-badge">
                             <span className="badge-dot"></span>
@@ -107,39 +104,27 @@ export default function Page() {
 
                         <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" />
@@ -159,89 +144,35 @@ export default function Page() {
                             <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>
+                            Transcend the file tree. See your codebase in four dimensions.<br />
+                            <span className="subtitle-accent">Every file rendered on an infinite canvas —</span><br />
+                            <span className="subtitle-accent">review AI-generated code spatially instead of one-file-at-a-time.</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>
+                        {/* Key features inline */}
+                        <div className="landing-features">
+                            <div className="feature-pill"><span className="feature-icon">📐</span> Spatial canvas</div>
+                            <div className="feature-pill"><span className="feature-icon">🗂️</span> Focus layers</div>
+                            <div className="feature-pill"><span className="feature-icon">🔗</span> File connections</div>
+                            <div className="feature-pill"><span className="feature-icon">⏱️</span> Git timeline</div>
                         </div>
                     </div>
 
-                    {/* Featured Repos — Quick start */}
+                    {/* Featured Repos — Open in browser */}
                     <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>
+                            <span>Explore popular repositories — click to open instantly</span>
                         </div>
                         <div className="repos-grid">
                             {featuredRepos.map((repo) => (
-                                <button
+                                <a
                                     key={repo.name}
                                     className="repo-card-btn"
-                                    data-repo={`https://github.com/${repo.name}`}
+                                    href={`/${repo.name}`}
                                     id={`landing-repo-${repo.name.replace('/', '-')}`}
                                 >
                                     <div className="repo-card-name">{repo.name.split('/')[1]}</div>
@@ -253,7 +184,7 @@ export default function Page() {
                                         </span>
                                         <span className="repo-card-stars">★ {repo.stars}</span>
                                     </div>
-                                </button>
+                                </a>
                             ))}
                         </div>
                     </div>
@@ -262,13 +193,18 @@ export default function Page() {
                     <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>
+                            <span className="cta-text">Select a repo from the sidebar, or click a card above</span>
                         </div>
-                        <div className="cta-or">or click Import from GitHub in the sidebar</div>
+                        <div className="cta-or">Import any GitHub repo with the sidebar button</div>
                     </div>
 
                     {/* Stats Row */}
                     <div className="landing-stats">
+                        <div className="landing-stat">
+                            <span className="stat-num">4D</span>
+                            <span className="stat-desc">Dimensional Space</span>
+                        </div>
+                        <div className="stat-divider"></div>
                         <div className="landing-stat">
                             <span className="stat-num">∞</span>
                             <span className="stat-desc">Infinite Canvas</span>

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "gitmaps",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "bin": {
     "gitmaps": "cli.ts"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/7flash/git-on-canvas"
+    "url": "https://github.com/7flash/gitmaps"
   },
   "homepage": "https://gitmaps.xyz",
   "workspaces": [

package/packages/galaxydraw/README.md

@@ -7,7 +7,7 @@
 </p>
 
 <p align="center">
-  <a href="https://7flash.github.io/git-on-canvas/"><img src="https://img.shields.io/badge/🌌_Live_Demo-galaxydraw-9382ff?style=flat-square" alt="Live Demo"></a>
+  <a href="https://7flash.github.io/gitmaps/"><img src="https://img.shields.io/badge/🌌_Live_Demo-galaxydraw-9382ff?style=flat-square" alt="Live Demo"></a>
   <a href="https://www.npmjs.com/package/galaxydraw"><img src="https://img.shields.io/npm/v/galaxydraw.svg?style=flat-square" alt="npm version"></a>
   <a href="https://www.npmjs.com/package/galaxydraw"><img src="https://img.shields.io/npm/dm/galaxydraw.svg?style=flat-square" alt="npm downloads"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg?style=flat-square" alt="License"></a>
@@ -275,7 +275,7 @@ Total: ~1,200 lines of engine code. Zero dependencies.
 
 ## 🚀 Used By
 
-- **[GitMaps](https://github.com/7flash/git-on-canvas)** — Repository visualization on an infinite canvas. Uses `advanced` mode with FileCardPlugin + DiffCardPlugin. Renders 6,800+ file cards with viewport culling (~35ms).
+- **[GitMaps](https://github.com/7flash/gitmaps)** — Repository visualization on an infinite canvas. Uses `advanced` mode with FileCardPlugin + DiffCardPlugin. Renders 6,800+ file cards with viewport culling (~35ms).
 - **[WARMAPS](https://github.com/7flash/starwar)** — Real-time geopolitical intelligence dashboard. Uses `simple` mode with WarmapsContainerPlugin for MapLibre/WebSocket feed passthrough.
 
 ## 🧪 Testing

package/packages/galaxydraw/package.json

@@ -38,7 +38,7 @@
     ],
     "repository": {
         "type": "git",
-        "url": "https://github.com/7flash/git-on-canvas",
+        "url": "https://github.com/7flash/gitmaps",
         "directory": "packages/galaxydraw"
     },
     "license": "MIT",

package/server.ts

@@ -59,4 +59,4 @@ const websocket = {
 serve(createAppRouter({
     appDir,
     globalCss: path.join(appDir, 'globals.css'),
-}), { port: parseInt(process.env.BUN_PORT || "3333"), websocket });
+}), { port: parseInt(process.env.PORT || process.env.BUN_PORT || "3335"), websocket });

package/app/api/connections/route.ts

@@ -1,72 +0,0 @@
-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 });
-        }
-    });
-}

package/app/api/positions/route.ts

@@ -1,80 +0,0 @@
-import { measure, measureSync } from 'measure-fn';
-import { Database, z } from 'sqlite-zod-orm';
-import path from 'path';
-
-const dbPath = path.join(process.cwd(), 'db', 'positions_v3.sqlite');
-
-const db = new Database(dbPath, {
-    positions: z.object({
-        commit_hash: z.string(),
-        file_path: z.string(),
-        x: z.number(),
-        y: z.number(),
-        width: z.number().optional(),
-        height: z.number().optional(),
-    }),
-}, {
-    indexes: { positions: ['commit_hash'] },
-    reactive: false,
-});
-
-export async function GET(req: Request) {
-    return measure('api:positions:get', async () => {
-        try {
-            const url = new URL(req.url);
-            const commitHash = url.searchParams.get('commit');
-
-            const query = commitHash
-                ? db.positions.select().where({ commit_hash: commitHash })
-                : db.positions.select();
-
-            const positions = query.all();
-
-            // Convert to map format
-            const positionMap: Record<string, { x: number; y: number; width?: number; height?: number }> = {};
-            for (const pos of positions) {
-                positionMap[`${pos.commit_hash}:${pos.file_path}`] = {
-                    x: pos.x,
-                    y: pos.y,
-                    width: pos.width ?? undefined,
-                    height: pos.height ?? undefined,
-                };
-            }
-
-            return Response.json(positionMap);
-        } catch (error: any) {
-            console.error('api:positions:get:error', error);
-            return new Response(`Error: ${error.message}`, { status: 500 });
-        }
-    });
-}
-
-export async function POST(req: Request) {
-    return measure('api:positions:save', async () => {
-        try {
-            const body = await req.json();
-            const { commitHash, filePath, x, y, width, height } = body;
-
-            if (!commitHash || !filePath || x === undefined || y === undefined) {
-                return new Response('commitHash, filePath, x, and y are required', { status: 400 });
-            }
-
-            db.positions.upsert(
-                { commit_hash: commitHash, file_path: filePath },
-                {
-                    commit_hash: commitHash,
-                    file_path: filePath,
-                    x,
-                    y,
-                    width: width || undefined,
-                    height: height || undefined,
-                },
-            );
-
-            return Response.json({ success: true });
-        } catch (error: any) {
-            console.error('api:positions:save:error', error);
-            return new Response(`Error: ${error.message}`, { status: 500 });
-        }
-    });
-}

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

@@ -1,55 +0,0 @@
-import { measure } from 'measure-fn';
-import { exec } from 'child_process';
-import { promisify } from 'util';
-import { blockInProduction } from '../validate-path';
-
-const execAsync = promisify(exec);
-
-export async function POST(req: Request) {
-    const blocked = blockInProduction('Folder browser');
-    if (blocked) return blocked;
-
-    return measure('api:repo:browse', async () => {
-        try {
-            // Use PowerShell with -EncodedCommand to avoid quoting issues
-            // Use TopMost Form to ensure the dialog pops up ABOVE the browser window
-            const psScript = `
-Add-Type -AssemblyName System.Windows.Forms
-$dialog = New-Object System.Windows.Forms.FolderBrowserDialog
-$dialog.Description = "Select Git Repository"
-$dialog.ShowNewFolderButton = $false
-
-$form = New-Object System.Windows.Forms.Form
-$form.TopMost = $true
-$result = $dialog.ShowDialog($form)
-
-if ($result -eq [System.Windows.Forms.DialogResult]::OK) {
-    Write-Output $dialog.SelectedPath
-} else {
-    Write-Output ""
-}
-$form.Dispose()
-`.trim();
-
-            const encoded = Buffer.from(psScript, 'utf16le').toString('base64');
-
-            // Use async exec so we don't block the entire melina server (which freezes the UI's live updates)
-            const { stdout } = await execAsync(
-                `powershell -sta -WindowStyle Hidden -NoProfile -EncodedCommand ${encoded}`,
-                { encoding: 'utf-8', timeout: 86400000 }
-            );
-
-            const selected = stdout.trim();
-
-            if (!selected) {
-                return Response.json({ cancelled: true, path: null });
-            }
-
-            return Response.json({ cancelled: false, path: selected });
-        } catch (error: any) {
-            console.error('api:repo:browse:error', error);
-            // Even if cancelled or errored, don't crash the server. Let UI reset the dropdown.
-            return Response.json({ cancelled: true, path: null, error: error.message });
-        }
-    });
-}