gitmaps 1.0.0 → 1.1.1

package/app/lib/role.ts

@@ -0,0 +1,228 @@
+/**
+ * Role detection — Leader vs Follower
+ *
+ * Leader: Running locally (localhost, 127.0.0.1, 192.168.x.x)
+ *   - Full control: move cards, edit files, arrange layers
+ *   - Can push to remote servers
+ *
+ * Follower: Visiting gitmaps.xyz or any remote server
+ *   - Read-only canvas
+ *   - Can clone repo to their local
+ */
+
+export type Role = "leader" | "follower";
+
+let _cachedRole: Role | null = null;
+
+export function detectRole(): Role {
+  if (_cachedRole) return _cachedRole;
+
+  const host = window.location.hostname;
+
+  // Leader: running on localhost or local network
+  const isLocalhost =
+    host === "localhost" || host === "127.0.0.1" || host === "::1";
+  const isLocalNetwork =
+    host.startsWith("192.168.") ||
+    host.startsWith("10.") ||
+    host.startsWith("172.");
+
+  // Debug logging
+  console.log(
+    `[role] Host: ${host}, Localhost: ${isLocalhost}, LocalNetwork: ${isLocalNetwork}`,
+  );
+
+  _cachedRole = isLocalhost || isLocalNetwork ? "leader" : "follower";
+
+  console.log(`[role] Detected as ${_cachedRole}`);
+  return _cachedRole;
+}
+
+export function isLeader(): boolean {
+  return detectRole() === "leader";
+}
+
+export function isFollower(): boolean {
+  return detectRole() === "follower";
+}
+
+export function clearRoleCache() {
+  _cachedRole = null;
+}
+
+export function renderRoleBadge(): void {
+  const existing = document.getElementById("roleBadge");
+  if (existing) existing.remove();
+
+  const role = detectRole();
+  const badge = document.createElement("div");
+  badge.id = "roleBadge";
+  badge.className = `role-badge role-badge--${role}`;
+
+  if (role === "leader") {
+    badge.innerHTML = `
+      <span class="role-badge-icon">👑</span>
+      <span class="role-badge-text">Leader</span>
+      <span class="role-badge-sub">Local Control</span>
+    `;
+    badge.title =
+      "You have full control - can move cards, edit files, and push to remote servers";
+  } else {
+    badge.innerHTML = `
+      <span class="role-badge-icon">👁️</span>
+      <span class="role-badge-text">Follower</span>
+      <span class="role-badge-sub">Read-Only</span>
+      <button class="clone-to-edit-btn" title="Clone repo locally to edit">
+        📥 Clone to Edit
+      </button>
+    `;
+    badge.title = "Read-only mode - Clone this repo to edit locally";
+
+    // Wire up clone button
+    const cloneBtn = badge.querySelector(".clone-to-edit-btn");
+    if (cloneBtn) {
+      cloneBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        handleCloneToEdit();
+      });
+    }
+  }
+
+  const toolbar =
+    document.querySelector(".toolbar-right") ||
+    document.querySelector(".status-bar");
+  if (toolbar) {
+    toolbar.insertBefore(badge, toolbar.firstChild);
+  }
+}
+
+async function handleCloneToEdit(): Promise<void> {
+  const { showToast } = await import("./utils");
+
+  // Get current repo from URL or context
+  const pathSegments = window.location.pathname.slice(1).split("/");
+  const repoSlug = pathSegments.filter((s) => s).join("/");
+
+  if (!repoSlug) {
+    showToast("No repository loaded", "error");
+    return;
+  }
+
+  // Show clone instructions
+  const instructions = `
+    <div style="text-align:left;padding:20px;">
+      <h3 style="margin-bottom:16px;font-size:16px;">🚀 Clone to Edit</h3>
+      
+      <p style="margin-bottom:12px;color:var(--text-muted);">
+        To edit this repository, clone it locally and run GitMaps on your machine:
+      </p>
+      
+      <div style="background:var(--bg-tertiary);padding:12px;border-radius:6px;margin:12px 0;font-family:var(--font-mono);font-size:12px;">
+        <div style="margin-bottom:8px;"># Clone the repository</div>
+        <div style="color:var(--accent-primary);">git clone https://github.com/${repoSlug}.git</div>
+        <div style="margin-top:8px;margin-bottom:8px;"># Navigate to the repo</div>
+        <div style="color:var(--accent-primary);">cd ${repoSlug.split("/").pop()}</div>
+        <div style="margin-top:8px;margin-bottom:8px;"># Run GitMaps locally</div>
+        <div style="color:var(--accent-primary);">bunx gitmaps@latest</div>
+      </div>
+      
+      <p style="margin-top:12px;color:var(--text-muted);font-size:11px;">
+        Once running locally (http://localhost:3335), you'll be in <strong>Leader</strong> mode with full edit control.
+      </p>
+    </div>
+  `;
+
+  // Create modal
+  const modal = document.createElement("div");
+  modal.className = "clone-modal";
+  modal.innerHTML = `
+    <div class="clone-modal-backdrop"></div>
+    <div class="clone-modal-content">
+      ${instructions}
+      <div class="clone-modal-actions">
+        <button class="clone-modal-copy">📋 Copy Commands</button>
+        <button class="clone-modal-close">Close</button>
+      </div>
+    </div>
+  `;
+
+  document.body.appendChild(modal);
+
+  // Style the modal
+  const style = document.createElement("style");
+  style.textContent = `
+    .clone-modal {
+      position: fixed;
+      inset: 0;
+      z-index: 9999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      animation: fadeIn 0.15s ease;
+    }
+    .clone-modal-backdrop {
+      position: absolute;
+      inset: 0;
+      background: rgba(10, 10, 15, 0.8);
+      backdrop-filter: blur(4px);
+    }
+    .clone-modal-content {
+      position: relative;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-primary);
+      border-radius: 12px;
+      max-width: 500px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    }
+    .clone-modal-actions {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+      padding: 16px 20px;
+      border-top: 1px solid var(--border-primary);
+    }
+    .clone-modal-actions button {
+      padding: 8px 16px;
+      border-radius: 6px;
+      border: none;
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .clone-modal-copy {
+      background: var(--accent-primary);
+      color: white;
+    }
+    .clone-modal-copy:hover {
+      background: var(--accent-secondary);
+    }
+    .clone-modal-close {
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+    }
+    .clone-modal-close:hover {
+      background: var(--bg-card);
+    }
+  `;
+  document.head.appendChild(style);
+
+  // Wire up buttons
+  modal.querySelector(".clone-modal-copy")?.addEventListener("click", () => {
+    const commands = `git clone https://github.com/${repoSlug}.git\ncd ${repoSlug.split("/").pop()}\nbunx gitmaps@latest`;
+    navigator.clipboard.writeText(commands);
+    showToast("Commands copied to clipboard", "success");
+  });
+
+  modal.querySelector(".clone-modal-close")?.addEventListener("click", () => {
+    modal.remove();
+    style.remove();
+  });
+
+  modal
+    .querySelector(".clone-modal-backdrop")
+    ?.addEventListener("click", () => {
+      modal.remove();
+      style.remove();
+    });
+}

package/app/lib/route-catchall.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, test } from 'bun:test';
+import path from 'path';
+import {
+    assertRouteExpectation,
+    discoverContractRoutes,
+    gitmapsCatchAllRoutingContract,
+} from './router-contract';
+
+describe('GitMaps catch-all route integration', () => {
+    const appDir = path.resolve(import.meta.dir, '..');
+    const routes = discoverContractRoutes(appDir);
+
+    test('discovers the catch-all slug route', () => {
+        const catchAll = routes.find(r => r.pattern === '/*slug');
+        expect(catchAll).toBeDefined();
+    });
+
+    for (const expectation of gitmapsCatchAllRoutingContract) {
+        test(`${expectation.pathname} matches ${expectation.pattern} in the real app`, () => {
+            const result = assertRouteExpectation(routes, expectation);
+            expect(result.route.pattern).toBe(expectation.pattern);
+            if (expectation.params) {
+                expect(result.params).toEqual(expectation.params);
+            }
+        });
+    }
+});

package/app/lib/route-repo-entry.test.ts

@@ -0,0 +1,95 @@
+import { describe, expect, mock, test } from 'bun:test';
+import { getCurrentRouteSlug, handlePopstateRepoEntry, resolveMappedRepoPath } from './route-repo-entry';
+import { setupDomTest } from './test-dom';
+
+describe('route repo entry helper', () => {
+  test('reads the current decoded route slug', () => {
+    const handle = setupDomTest({ url: 'http://localhost:3335/team/platform/tools/gitmaps' });
+    try {
+      expect(getCurrentRouteSlug()).toBe('team/platform/tools/gitmaps');
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('resolves mapped repo path from localStorage', () => {
+    const handle = setupDomTest();
+    try {
+      localStorage.setItem('gitcanvas:slug:team/platform/tools/gitmaps', 'C:/Code/gitmaps');
+      expect(resolveMappedRepoPath('team/platform/tools/gitmaps')).toBe('C:/Code/gitmaps');
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('popstate handoff uses onRepoReady seam for mapped slug routes', () => {
+    const handle = setupDomTest({
+      url: 'http://localhost:3335/team/platform/tools/gitmaps',
+      html: '<select id="repoSelect"><option value="">Select</option><option value="C:/Code/gitmaps">gitmaps</option></select>',
+    });
+
+    try {
+      localStorage.setItem('gitcanvas:slug:team/platform/tools/gitmaps', 'C:/Code/gitmaps');
+      const onRepoReady = mock(() => undefined);
+      const updateFavoriteStar = mock(() => undefined);
+      const showLandingPlaceholder = mock(() => undefined);
+      const ctx = { onRepoReady } as any;
+
+      const resolvedPath = handlePopstateRepoEntry(ctx, {
+        currentRepoPath: '',
+        showLandingPlaceholder,
+        updateFavoriteStar,
+      });
+
+      expect(resolvedPath).toBe('C:/Code/gitmaps');
+      expect((document.getElementById('repoSelect') as HTMLSelectElement).value).toBe('C:/Code/gitmaps');
+      expect(onRepoReady).toHaveBeenCalledWith('C:/Code/gitmaps');
+      expect(updateFavoriteStar).toHaveBeenCalledWith('C:/Code/gitmaps');
+      expect(showLandingPlaceholder).not.toHaveBeenCalled();
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('popstate shows landing when route is empty', () => {
+    const handle = setupDomTest({ url: 'http://localhost:3335/' });
+    try {
+      const showLandingPlaceholder = mock(() => undefined);
+      const updateFavoriteStar = mock(() => undefined);
+
+      const resolvedPath = handlePopstateRepoEntry({} as any, {
+        currentRepoPath: '',
+        showLandingPlaceholder,
+        updateFavoriteStar,
+      });
+
+      expect(resolvedPath).toBeNull();
+      expect(showLandingPlaceholder).toHaveBeenCalledTimes(1);
+      expect(updateFavoriteStar).not.toHaveBeenCalled();
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('popstate is a no-op when route resolves to the current repo', () => {
+    const handle = setupDomTest({ url: 'http://localhost:3335/gitmaps' });
+    try {
+      const onRepoReady = mock(() => undefined);
+      const showLandingPlaceholder = mock(() => undefined);
+      const updateFavoriteStar = mock(() => undefined);
+
+      const resolvedPath = handlePopstateRepoEntry({ onRepoReady } as any, {
+        currentRepoPath: 'gitmaps',
+        showLandingPlaceholder,
+        updateFavoriteStar,
+      });
+
+      expect(resolvedPath).toBe('gitmaps');
+      expect(onRepoReady).not.toHaveBeenCalled();
+      expect(showLandingPlaceholder).not.toHaveBeenCalled();
+      expect(updateFavoriteStar).not.toHaveBeenCalled();
+    } finally {
+      handle.cleanup();
+    }
+  });
+});

package/app/lib/route-repo-entry.ts

@@ -0,0 +1,36 @@
+import type { CanvasContext } from './context';
+import { handoffRepoLoad } from './repo-handoff';
+
+export function getCurrentRouteSlug(pathname = window.location.pathname): string {
+  return decodeURIComponent(pathname.replace(/^\//, ''));
+}
+
+export function resolveMappedRepoPath(slug: string): string {
+  return localStorage.getItem(`gitcanvas:slug:${slug}`) || slug;
+}
+
+export function handlePopstateRepoEntry(
+  ctx: CanvasContext,
+  options: {
+    disposed?: boolean;
+    currentRepoPath?: string;
+    showLandingPlaceholder: () => void;
+    updateFavoriteStar: (path: string) => void;
+  },
+) {
+  if (options.disposed) return null;
+
+  const slug = getCurrentRouteSlug();
+  if (!slug) {
+    options.showLandingPlaceholder();
+    return null;
+  }
+
+  const resolvedPath = resolveMappedRepoPath(slug);
+  if (resolvedPath && resolvedPath !== options.currentRepoPath) {
+    handoffRepoLoad(ctx, resolvedPath);
+    options.updateFavoriteStar(resolvedPath);
+  }
+
+  return resolvedPath;
+}

package/app/lib/router-contract.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, test } from 'bun:test';
+import path from 'path';
+import {
+  assertRouteExpectation,
+  discoverContractRoutes,
+  gitmapsCatchAllRoutingContract,
+} from './router-contract';
+
+describe('Melina catch-all routing contract fixture', () => {
+  const fixtureAppDir = path.resolve(import.meta.dir, 'test-fixtures/router-contract');
+  const routes = discoverContractRoutes(fixtureAppDir);
+
+  for (const expectation of gitmapsCatchAllRoutingContract) {
+    test(`${expectation.pathname} resolves to ${expectation.pattern}`, () => {
+      const result = assertRouteExpectation(routes, expectation);
+      expect(result.route.pattern).toBe(expectation.pattern);
+      if (expectation.params) {
+        expect(result.params).toEqual(expectation.params);
+      }
+    });
+  }
+});

package/app/lib/router-contract.ts

@@ -0,0 +1,19 @@
+export {
+  assertRouteExpectation,
+  catchAllRoutingContract,
+  discoverContractRoutes,
+} from '../../../melina.js/src/server/router-contract';
+
+export type { RouteExpectation } from '../../../melina.js/src/server/router-contract';
+
+export const gitmapsCatchAllRoutingContract: RouteExpectation[] = [
+  { pathname: '/', pattern: '/' },
+  { pathname: '/galaxy-canvas', pattern: '/galaxy-canvas' },
+  { pathname: '/api/version', pattern: '/api/version' },
+  { pathname: '/starwar', pattern: '/*slug', params: { slug: 'starwar' } },
+  {
+    pathname: '/team/platform/tools/gitmaps',
+    pattern: '/*slug',
+    params: { slug: 'team/platform/tools/gitmaps' },
+  },
+];

package/app/lib/shared-layout.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, mock, test } from 'bun:test';
+import { applySharedLayout, clearSharedLayoutParam, decodeSharedLayout, getSharedLayoutParam } from './shared-layout';
+import { setupDomTest } from './test-dom';
+
+describe('shared layout helper', () => {
+  test('reads and clears the layout query param', () => {
+    const handle = setupDomTest({ url: 'http://localhost:3335/gitmaps?layout=abc123&foo=bar' });
+    try {
+      expect(getSharedLayoutParam()).toBe('abc123');
+      clearSharedLayoutParam();
+      expect(window.location.search).toBe('?foo=bar');
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('decodes base64 shared layout payloads', () => {
+    const payload = { zoom: 1.5, hiddenFiles: ['a.ts'] };
+    expect(decodeSharedLayout(btoa(JSON.stringify(payload)))).toEqual(payload);
+  });
+
+  test('applies shared layout state, clears the query param, and shows success toast', async () => {
+    const layout = btoa(JSON.stringify({
+      positions: { 'allfiles:src/index.ts': { x: 10, y: 20 } },
+      hiddenFiles: ['secret.ts'],
+      zoom: 1.25,
+      offsetX: 111,
+      offsetY: 222,
+      cardSizes: { 'src/index.ts': { width: 600, height: 700 } },
+    }));
+    const handle = setupDomTest({
+      url: `http://localhost:3335/gitmaps?layout=${encodeURIComponent(layout)}`,
+      html: '<button id="showHidden" style="display:none"></button><span id="hiddenCount"></span>',
+    });
+
+    try {
+      const sent: any[] = [];
+      const toast = mock(async () => undefined);
+      const clearParam = mock(() => clearSharedLayoutParam());
+      const triggerPersist = mock(() => undefined);
+      const ctx = {
+        actor: { send: mock((event: any) => sent.push(event)) },
+        positions: new Map(),
+        hiddenFiles: new Set<string>(),
+      } as any;
+
+      const applied = await applySharedLayout(ctx, {
+        clearParam,
+        triggerPersist,
+        showToast: toast,
+      });
+
+      expect(applied).toBe(true);
+      expect(Array.from(ctx.positions.entries())).toEqual([
+        ['allfiles:src/index.ts', { x: 10, y: 20 }],
+      ]);
+      expect(triggerPersist).toHaveBeenCalledWith(ctx);
+      expect(Array.from(ctx.hiddenFiles)).toEqual(['secret.ts']);
+      expect((document.getElementById('showHidden') as HTMLElement).style.display).toBe('inline-flex');
+      expect(document.getElementById('hiddenCount')?.textContent).toBe('1');
+      expect(sent).toContainEqual({ type: 'SET_ZOOM', zoom: 1.25 });
+      expect(sent).toContainEqual({ type: 'SET_OFFSET', x: 111, y: 222 });
+      expect(sent).toContainEqual({ type: 'RESIZE_CARD', path: 'src/index.ts', width: 600, height: 700 });
+      expect(clearParam).toHaveBeenCalledTimes(1);
+      expect(window.location.search).toBe('');
+      expect(toast).toHaveBeenCalledWith('Shared layout applied!', 'success');
+      expect(localStorage.getItem('gitcanvas:hiddenFiles')).toBe(JSON.stringify(['secret.ts']));
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('is a no-op when no layout query param exists', async () => {
+    const handle = setupDomTest({ url: 'http://localhost:3335/gitmaps' });
+    try {
+      const showToast = mock(async () => undefined);
+      const applied = await applySharedLayout({ actor: { send: mock(() => undefined) }, positions: new Map(), hiddenFiles: new Set() } as any, {
+        showToast,
+      });
+      expect(applied).toBe(false);
+      expect(showToast).not.toHaveBeenCalled();
+    } finally {
+      handle.cleanup();
+    }
+  });
+});

package/app/lib/shared-layout.ts

@@ -0,0 +1,82 @@
+import type { CanvasContext } from './context';
+import { saveHiddenFiles, updateHiddenUI } from './hidden-files';
+import { savePosition } from './positions';
+
+export interface SharedLayoutPayload {
+  positions?: Record<string, any>;
+  hiddenFiles?: string[];
+  zoom?: number;
+  offsetX?: number;
+  offsetY?: number;
+  cardSizes?: Record<string, { width: number; height: number }>;
+}
+
+export function getSharedLayoutParam(search = window.location.search): string | null {
+  return new URLSearchParams(search).get('layout');
+}
+
+export function clearSharedLayoutParam(url = window.location.href) {
+  const cleanUrl = new URL(url);
+  cleanUrl.searchParams.delete('layout');
+  window.history.replaceState({}, '', cleanUrl.toString());
+}
+
+export function decodeSharedLayout(layout: string): SharedLayoutPayload {
+  return JSON.parse(atob(layout));
+}
+
+export async function applySharedLayout(
+  ctx: CanvasContext,
+  options?: {
+    search?: string;
+    decode?: (layout: string) => SharedLayoutPayload;
+    clearParam?: () => void;
+    triggerPersist?: (ctx: CanvasContext) => void;
+    showToast?: (message: string, type: string) => void | Promise<void>;
+  },
+) {
+  const sharedLayout = getSharedLayoutParam(options?.search);
+  if (!sharedLayout) return false;
+
+  const decode = options?.decode || decodeSharedLayout;
+  const clearParam = options?.clearParam || (() => clearSharedLayoutParam());
+  const triggerPersist = options?.triggerPersist || ((ctx: CanvasContext) => {
+    savePosition(ctx, '_share_', '_trigger_', 0, 0);
+  });
+  const showToast = options?.showToast || (async (message: string, type: string) => {
+    const utils = await import('./utils');
+    utils.showToast(message, type);
+  });
+
+  const parsed = decode(sharedLayout);
+
+  if (parsed.positions) {
+    ctx.positions = new Map(Object.entries(parsed.positions));
+    triggerPersist(ctx);
+  }
+  if (parsed.hiddenFiles) {
+    ctx.hiddenFiles = new Set(parsed.hiddenFiles);
+    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,
+      });
+    }
+  }
+
+  clearParam();
+  await showToast('Shared layout applied!', 'success');
+  return true;
+}

package/app/lib/shortcuts-panel.ts

@@ -42,6 +42,8 @@ const SHORTCUTS = [
     {
         category: 'Tools', items: [
             { keys: ['H'], description: 'Toggle git heatmap (no selection)' },
+            { keys: ['Shift', 'P'], description: 'Performance overlay' },
+            { keys: ['Ctrl', 'G'], description: 'Toggle dependency graph' },
             { keys: ['Ctrl', 'N'], description: 'Create new file' },
             { keys: ['Shift + Click line'], description: 'Start connection' },
             { keys: ['Ctrl', 'Shift', 'E'], description: 'Export canvas as PNG' },