gitmaps 1.0.0 → 1.1.1

package/app/lib/sync-controls.tsx

@@ -0,0 +1,303 @@
+/**
+ * Sync Controls — Leader-only UI for pushing canvas state to remote servers
+ *
+ * Features:
+ * - Server dropdown (select remote to push to)
+ * - Auto-sync toggle
+ * - Manual push/pull buttons
+ * - Last sync status indicator
+ */
+
+import { isLeader } from "./role";
+
+const DEFAULT_SERVERS = [
+  { url: "https://gitmaps.xyz", name: "gitmaps.xyz (Production)" },
+  { url: "http://localhost:3336", name: "Local Dev Server" },
+];
+
+let _customServers: string[] = [];
+let _selectedServer = DEFAULT_SERVERS[0].url;
+let _autoSync = false;
+let _lastSyncTime: number | null = null;
+let _syncing = false;
+
+try {
+  const stored = localStorage.getItem("gitcanvas:servers");
+  if (stored) _customServers = JSON.parse(stored);
+  const selected = localStorage.getItem("gitcanvas:selectedServer");
+  if (selected) _selectedServer = selected;
+  const auto = localStorage.getItem("gitcanvas:autoSync");
+  if (auto) _autoSync = JSON.parse(auto);
+} catch {}
+
+export function getSelectedServer(): string {
+  return _selectedServer;
+}
+
+export function isAutoSyncEnabled(): boolean {
+  return _autoSync;
+}
+
+export function getLastSyncTime(): number | null {
+  return _lastSyncTime;
+}
+
+export function isSyncing(): boolean {
+  return _syncing;
+}
+
+export function toggleAutoSync(): boolean {
+  _autoSync = !_autoSync;
+  localStorage.setItem("gitcanvas:autoSync", JSON.stringify(_autoSync));
+  console.log(`[sync] Auto-sync ${_autoSync ? "enabled" : "disabled"}`);
+  return _autoSync;
+}
+
+export function setSelectedServer(url: string): void {
+  _selectedServer = url;
+  localStorage.setItem("gitcanvas:selectedServer", url);
+  console.log(`[sync] Selected server: ${url}`);
+}
+
+export function getAvailableServers() {
+  return [
+    ...DEFAULT_SERVERS,
+    ..._customServers.map((url) => ({ url, name: `Custom: ${url}` })),
+  ];
+}
+
+export function addCustomServer(url: string): void {
+  if (!_customServers.includes(url)) {
+    _customServers.push(url);
+    localStorage.setItem("gitcanvas:servers", JSON.stringify(_customServers));
+  }
+}
+
+export async function pushToServer(
+  repoPath: string,
+  positions: Record<string, any>,
+): Promise<boolean> {
+  if (!isLeader()) {
+    console.warn("[sync] Cannot push - not in leader mode");
+    return false;
+  }
+
+  if (_syncing) {
+    console.log("[sync] Already syncing, skipping");
+    return false;
+  }
+
+  _syncing = true;
+  const startTime = Date.now();
+
+  try {
+    const serverUrl = _selectedServer;
+    const endpoint = `${serverUrl}/api/auth/positions`;
+
+    console.log(`[sync] Pushing to ${endpoint}`);
+
+    const response = await fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        repoUrl: repoPath,
+        positions,
+        syncedAt: new Date().toISOString(),
+      }),
+    });
+
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(`Server returned ${response.status}: ${error}`);
+    }
+
+    _lastSyncTime = Date.now();
+    console.log(`[sync] Push successful (${Date.now() - startTime}ms)`);
+    return true;
+  } catch (error: any) {
+    console.error("[sync] Push failed:", error.message);
+    return false;
+  } finally {
+    _syncing = false;
+  }
+}
+
+export async function pullFromServer(
+  repoPath: string,
+): Promise<Record<string, any> | null> {
+  if (_syncing) {
+    console.log("[sync] Already syncing, skipping");
+    return null;
+  }
+
+  _syncing = true;
+  const startTime = Date.now();
+
+  try {
+    const serverUrl = _selectedServer;
+    const endpoint = `${serverUrl}/api/auth/positions?repo=${encodeURIComponent(repoPath)}`;
+
+    console.log(`[sync] Pulling from ${endpoint}`);
+
+    const response = await fetch(endpoint);
+
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(`Server returned ${response.status}: ${error}`);
+    }
+
+    const data = await response.json();
+    console.log(`[sync] Pull successful (${Date.now() - startTime}ms)`);
+    return data.positions || null;
+  } catch (error: any) {
+    console.error("[sync] Pull failed:", error.message);
+    return null;
+  } finally {
+    _syncing = false;
+  }
+}
+
+export function formatLastSync(time: number | null): string {
+  if (!time) return "Never";
+  const diff = Date.now() - time;
+  if (diff < 60000) return "Just now";
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
+  return `${Math.floor(diff / 86400000)}d ago`;
+}
+
+export function createSyncControlsUI(): HTMLElement {
+  const container = document.createElement("div");
+  container.className = "sync-controls";
+  container.id = "syncControls";
+
+  const servers = getAvailableServers();
+  const lastSync = formatLastSync(_lastSyncTime);
+
+  container.innerHTML = `
+    <div class="sync-controls-inner">
+      <div class="sync-server-select">
+        <label for="syncServer">Server:</label>
+        <select id="syncServer">
+          ${servers.map((s) => `<option value="${s.url}" ${s.url === _selectedServer ? "selected" : ""}>${s.name}</option>`).join("")}
+        </select>
+        <button id="addServerBtn" class="sync-btn-icon" title="Add custom server">+</button>
+      </div>
+      
+      <div class="sync-auto-toggle">
+        <input type="checkbox" id="autoSyncToggle" ${_autoSync ? "checked" : ""} />
+        <label for="autoSyncToggle">Auto-sync</label>
+      </div>
+      
+      <div class="sync-buttons">
+        <button id="pushBtn" class="sync-btn sync-btn-push" ${_syncing ? "disabled" : ""}>
+          ${_syncing ? "⏳" : "📤"} Push
+        </button>
+        <button id="pullBtn" class="sync-btn sync-btn-pull" ${_syncing ? "disabled" : ""}>
+          ${_syncing ? "⏳" : "📥"} Pull
+        </button>
+      </div>
+      
+      <div class="sync-status">
+        <span class="sync-status-dot ${_lastSyncTime ? "synced" : ""}"></span>
+        <span class="sync-status-text">Last sync: ${lastSync}</span>
+      </div>
+    </div>
+  `;
+
+  // Wire up event listeners
+  const serverSelect = container.querySelector(
+    "#syncServer",
+  ) as HTMLSelectElement;
+  serverSelect?.addEventListener("change", (e) => {
+    setSelectedServer((e.target as HTMLSelectElement).value);
+  });
+
+  const addServerBtn = container.querySelector(
+    "#addServerBtn",
+  ) as HTMLButtonElement;
+  addServerBtn?.addEventListener("click", () => {
+    const url = prompt("Enter custom server URL (e.g., https://myserver.com):");
+    if (url && url.startsWith("http")) {
+      addCustomServer(url);
+      location.reload(); // Refresh to show new option
+    }
+  });
+
+  const autoSyncToggle = container.querySelector(
+    "#autoSyncToggle",
+  ) as HTMLInputElement;
+  autoSyncToggle?.addEventListener("change", () => {
+    toggleAutoSync();
+  });
+
+  const pushBtn = container.querySelector("#pushBtn") as HTMLButtonElement;
+  pushBtn?.addEventListener("click", async () => {
+    const ctx = getCanvasContext();
+    if (!ctx) return;
+
+    const repoPath = ctx.snap()?.context?.repoPath;
+    if (!repoPath) return;
+
+    pushBtn.disabled = true;
+    pushBtn.textContent = "⏳ Pushing...";
+
+    const positions: Record<string, any> = {};
+    for (const [k, v] of ctx.positions) {
+      positions[k] = v;
+    }
+
+    const success = await pushToServer(repoPath, positions);
+
+    pushBtn.disabled = false;
+    pushBtn.textContent = success ? "✅ Pushed!" : "❌ Failed";
+    setTimeout(() => {
+      pushBtn.textContent = "📤 Push";
+      location.reload(); // Refresh to show updated status
+    }, 2000);
+  });
+
+  const pullBtn = container.querySelector("#pullBtn") as HTMLButtonElement;
+  pullBtn?.addEventListener("click", async () => {
+    const ctx = getCanvasContext();
+    if (!ctx) return;
+
+    const repoPath = ctx.snap()?.context?.repoPath;
+    if (!repoPath) return;
+
+    pullBtn.disabled = true;
+    pullBtn.textContent = "⏳ Pulling...";
+
+    const positions = await pullFromServer(repoPath);
+
+    pullBtn.disabled = false;
+    pullBtn.textContent = positions ? "✅ Pulled!" : "❌ Failed";
+    setTimeout(() => {
+      pullBtn.textContent = "📥 Pull";
+      if (positions) {
+        // Merge pulled positions
+        for (const [k, v] of Object.entries(positions)) {
+          ctx.positions.set(k, v);
+        }
+        import("./repo").then((m) =>
+          m.renderAllFilesOnCanvas(ctx, ctx.allFilesData || []),
+        );
+      }
+    }, 2000);
+  });
+
+  return container;
+}
+
+export function renderSyncControls(container?: HTMLElement) {
+  if (!isLeader()) return; // Only leaders see sync controls
+
+  const target = container || document.querySelector(".toolbar-right");
+  if (!target) return;
+
+  const existing = document.getElementById("syncControls");
+  if (existing) existing.remove();
+
+  const ui = createSyncControlsUI();
+  target.appendChild(ui);
+}

package/app/lib/test-dom.ts

@@ -0,0 +1,145 @@
+import { Window } from 'happy-dom';
+
+export interface SetupDomTestOptions {
+  url?: string;
+  html?: string;
+  clipboard?: { writeText: (text: string) => Promise<void> };
+  raf?: boolean;
+}
+
+export interface DomTestHandle {
+  window: Window;
+  cleanup: () => void;
+}
+
+export function setupDomTest(options: SetupDomTestOptions = {}): DomTestHandle {
+  const {
+    url = 'http://localhost:3335/',
+    html = '',
+    clipboard,
+    raf = false,
+  } = options;
+
+  const window = new Window({ url });
+  (window as any).SyntaxError = SyntaxError;
+
+  Object.assign(globalThis, {
+    window,
+    document: window.document,
+    navigator: window.navigator,
+    localStorage: window.localStorage,
+    Element: window.Element,
+    HTMLElement: window.HTMLElement,
+    HTMLButtonElement: window.HTMLButtonElement,
+    HTMLInputElement: window.HTMLInputElement,
+    HTMLSelectElement: window.HTMLSelectElement,
+    HTMLTextAreaElement: window.HTMLTextAreaElement,
+    SVGElement: window.SVGElement,
+    DocumentFragment: window.DocumentFragment,
+    Node: window.Node,
+    Text: window.Text,
+    DOMRect: window.DOMRect,
+    Event: window.Event,
+    CustomEvent: window.CustomEvent,
+    MouseEvent: window.MouseEvent,
+    KeyboardEvent: window.KeyboardEvent,
+    MutationObserver: window.MutationObserver,
+    ResizeObserver: window.ResizeObserver,
+    getComputedStyle: window.getComputedStyle.bind(window),
+  });
+
+  if (raf) {
+    Object.assign(globalThis, {
+      requestAnimationFrame: (cb: FrameRequestCallback) => setTimeout(() => cb(Date.now()), 0),
+      cancelAnimationFrame: (id: any) => clearTimeout(id),
+    });
+  }
+
+  if (html) {
+    document.body.innerHTML = html;
+  }
+
+  if (clipboard) {
+    Object.defineProperty(navigator, 'clipboard', {
+      value: clipboard,
+      configurable: true,
+    });
+  }
+
+  const cleanup = () => {
+    window?.close();
+    document.body.innerHTML = '';
+    try {
+      localStorage.clear();
+    } catch {}
+    try {
+      delete (globalThis as any).requestAnimationFrame;
+      delete (globalThis as any).cancelAnimationFrame;
+    } catch {}
+    try {
+      delete (globalThis as any).window;
+      delete (globalThis as any).document;
+      delete (globalThis as any).navigator;
+      delete (globalThis as any).localStorage;
+      delete (globalThis as any).Element;
+      delete (globalThis as any).HTMLElement;
+      delete (globalThis as any).HTMLButtonElement;
+      delete (globalThis as any).HTMLInputElement;
+      delete (globalThis as any).HTMLSelectElement;
+      delete (globalThis as any).HTMLTextAreaElement;
+      delete (globalThis as any).SVGElement;
+      delete (globalThis as any).DocumentFragment;
+      delete (globalThis as any).Node;
+      delete (globalThis as any).Text;
+      delete (globalThis as any).DOMRect;
+      delete (globalThis as any).Event;
+      delete (globalThis as any).CustomEvent;
+      delete (globalThis as any).MouseEvent;
+      delete (globalThis as any).KeyboardEvent;
+      delete (globalThis as any).MutationObserver;
+      delete (globalThis as any).ResizeObserver;
+      delete (globalThis as any).getComputedStyle;
+    } catch {}
+  };
+
+  return { window, cleanup };
+}
+
+export function installFetchMock(fetchImpl: typeof globalThis.fetch): RestoreHandle {
+  const originalFetch = globalThis.fetch;
+  const originalWindowFetch = window.fetch;
+  (globalThis as any).fetch = fetchImpl;
+  (window as any).fetch = fetchImpl;
+  return {
+    restore() {
+      (globalThis as any).fetch = originalFetch;
+      (window as any).fetch = originalWindowFetch;
+    },
+  };
+}
+
+export function installWindowOpenMock(openImpl: typeof window.open): RestoreHandle {
+  const originalOpen = window.open;
+  (window as any).open = openImpl;
+  return {
+    restore() {
+      (window as any).open = originalOpen;
+    },
+  };
+}
+
+export function setElementRect(el: HTMLElement, width: number, height: number) {
+  Object.defineProperty(el, 'offsetWidth', { value: width, configurable: true });
+  Object.defineProperty(el, 'offsetHeight', { value: height, configurable: true });
+  (el as any).getBoundingClientRect = () => ({
+    left: 0,
+    top: 0,
+    width,
+    height,
+    right: width,
+    bottom: height,
+    x: 0,
+    y: 0,
+    toJSON() {},
+  });
+}

package/app/lib/test-fixtures/router-contract/[...slug]/page.tsx

@@ -0,0 +1,3 @@
+export default function CatchAllPage() {
+  return <div>catch-all</div>;
+}

package/app/lib/test-fixtures/router-contract/api/health/route.ts

@@ -0,0 +1,3 @@
+export function GET() {
+  return Response.json({ ok: true });
+}

package/app/lib/test-fixtures/router-contract/api/version/route.ts

@@ -0,0 +1,3 @@
+export function GET() {
+  return Response.json({ version: 'test' });
+}

package/app/lib/test-fixtures/router-contract/galaxy-canvas/page.tsx

@@ -0,0 +1,3 @@
+export default function GalaxyCanvasPage() {
+  return <div>galaxy-canvas</div>;
+}

package/app/lib/test-fixtures/router-contract/page.tsx

@@ -0,0 +1,3 @@
+export default function RootPage() {
+  return <div>root</div>;
+}

package/app/lib/transclusion-smoke.test.ts

@@ -0,0 +1,163 @@
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import type { Window } from 'happy-dom';
+import { processVirtualFileSet } from './virtual-files';
+import { setElementRect, setupDomTest } from './test-dom';
+
+function makeActor() {
+  const state = {
+    context: {
+      zoom: 1,
+      offsetX: 0,
+      offsetY: 0,
+      repoPath: 'C:/Code/gitmaps',
+      selectedCards: [],
+      currentCommitHash: '',
+      cardSizes: {},
+    },
+  } as any;
+
+  return {
+    getSnapshot() {
+      return state;
+    },
+    send(event: any) {
+      if (event?.type === 'SET_ZOOM') state.context.zoom = event.zoom;
+      if (event?.type === 'SET_OFFSET') {
+        state.context.offsetX = event.x;
+        state.context.offsetY = event.y;
+      }
+    },
+  };
+}
+
+function makeRepeatingContent() {
+  const repeated = [
+    'export function renderWidget(ctx) {',
+    '  const node = document.createElement("div");',
+    '  node.className = "widget-row";',
+    '  return node;',
+    '}',
+  ].join('\n');
+
+  const chunks: string[] = [];
+  for (let i = 0; i < 40; i++) {
+    chunks.push(`INFO widget-${i} start`);
+    chunks.push(repeated);
+    chunks.push(`INFO widget-${i} end`);
+  }
+  return chunks.join('\n');
+}
+
+describe('transclusion smoke', () => {
+  let window: Window;
+  let actor: any;
+  let ctx: any;
+  let sourceCard: HTMLElement;
+
+  let cleanup: (() => void) | undefined;
+
+  beforeEach(() => {
+    const handle = setupDomTest({
+      url: 'http://localhost:3335/gitmaps',
+      raf: true,
+      html: `
+        <div class="canvas-area"></div>
+        <div id="canvasViewport"><div id="canvasContent"><svg id="connectionsOverlay"></svg></div></div>
+        <input id="zoomSlider" />
+        <span id="zoomValue"></span>
+        <input id="stickyZoomSlider" />
+        <span id="stickyZoomValue"></span>
+        <div id="minimap"></div>
+        <div id="minimapViewport"></div>
+      `,
+    });
+    window = handle.window;
+    cleanup = handle.cleanup;
+
+    const viewport = document.getElementById('canvasViewport') as HTMLElement;
+    const canvas = document.getElementById('canvasContent') as HTMLElement;
+    const overlay = document.getElementById('connectionsOverlay') as unknown as SVGSVGElement;
+    setElementRect(viewport, 1400, 900);
+    setElementRect(canvas, 4000, 3000);
+    setElementRect(overlay as unknown as HTMLElement, 1400, 900);
+
+    actor = makeActor();
+    ctx = {
+      actor,
+      snap: () => actor.getSnapshot(),
+      canvas,
+      canvasViewport: viewport,
+      svgOverlay: overlay,
+      fileCards: new Map(),
+      positions: new Map(),
+      hiddenFiles: new Set(),
+      changedFilePaths: new Set(),
+      deferredCards: new Map(),
+      allFilesData: null,
+      commitFilesData: null,
+      isDragging: false,
+      spaceHeld: false,
+      CORNER_SIZE: 40,
+      scrollTimers: {},
+      connectionDragState: null,
+      loadingOverlay: null,
+      textRendererMode: 'dom',
+      allFilesActive: true,
+      controlMode: 'advanced',
+    };
+
+    sourceCard = document.createElement('div');
+    sourceCard.className = 'file-card';
+    sourceCard.dataset.path = 'app/lib/events.tsx';
+    sourceCard.style.left = '900px';
+    sourceCard.style.top = '600px';
+    setElementRect(sourceCard, 580, 700);
+    canvas.appendChild(sourceCard);
+    ctx.fileCards.set('app/lib/events.tsx', sourceCard);
+  });
+
+  afterEach(() => {
+    cleanup?.();
+  });
+
+  test('preserves slug-route bootstrap assumptions for transclusion flows', () => {
+    expect(window.location.pathname).toBe('/gitmaps');
+    expect(ctx.snap().context.repoPath).toBe('C:/Code/gitmaps');
+    expect(document.getElementById('canvasViewport')).toBeTruthy();
+    expect(document.getElementById('canvasContent')).toBeTruthy();
+  });
+
+  test('creates transclusion cards and clicking one highlights the source card', async () => {
+    const files = [
+      {
+        path: 'app/lib/events.tsx',
+        name: 'events.tsx',
+        ext: 'tsx',
+        type: 'file',
+        isBinary: false,
+        lines: 240,
+        size: 20000,
+        content: makeRepeatingContent(),
+      },
+    ];
+
+    const created = await processVirtualFileSet(ctx, files as any);
+    expect(created).toBeGreaterThan(0);
+    expect(document.querySelectorAll('.virtual-card').length).toBe(created);
+
+    const candidates = (window as any).__virtualCandidates;
+    expect(Array.isArray(candidates)).toBe(true);
+    expect(candidates[0]?.path).toBe('app/lib/events.tsx');
+
+    const virtualCard = document.querySelector('.virtual-card') as HTMLElement;
+    expect(virtualCard).toBeTruthy();
+    expect(virtualCard.title).toContain('app/lib/events.tsx');
+    expect(virtualCard.textContent || '').toContain('click to jump to source');
+
+    virtualCard.click();
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    expect(sourceCard.style.outline).toContain('var(--accent-primary)');
+    expect(sourceCard.style.outlineOffset).toBe('4px');
+  });
+});