gitmaps 1.1.0 → 1.1.2

package/app/lib/recent-commits.ts

@@ -0,0 +1,227 @@
+/**
+ * Recent Commits — tracks and displays recently loaded repositories.
+ *
+ * Shows the last few repos in the sidebar and keeps legacy localStorage
+ * formats from older builds from breaking the UI.
+ */
+
+const STORAGE_KEY = "gitcanvas:recentRepos";
+const MAX_REPOS = 5;
+
+export interface RecentRepo {
+  path: string;
+  name: string;
+  loadedAt: number;
+  commitCount: number;
+}
+
+function normalizeRecentRepo(entry: any): RecentRepo | null {
+  if (typeof entry === "string") {
+    const trimmed = entry.trim();
+    if (!trimmed || trimmed.includes("[object")) return null;
+    return {
+      path: trimmed,
+      name: trimmed.split(/[\\/]/).pop() || trimmed,
+      loadedAt: 0,
+      commitCount: 0,
+    };
+  }
+
+  if (entry && typeof entry === "object" && typeof entry.path === "string") {
+    const path = entry.path.trim();
+    if (!path || path.includes("[object")) return null;
+    return {
+      path,
+      name: typeof entry.name === "string" && entry.name.trim()
+        ? entry.name.trim()
+        : path.split(/[\\/]/).pop() || path,
+      loadedAt: Number.isFinite(entry.loadedAt) ? entry.loadedAt : 0,
+      commitCount: Number.isFinite(entry.commitCount) ? entry.commitCount : 0,
+    };
+  }
+
+  return null;
+}
+
+function dedupeRecentRepos(entries: RecentRepo[]): RecentRepo[] {
+  const seen = new Set<string>();
+  const result: RecentRepo[] = [];
+
+  for (const entry of entries) {
+    if (seen.has(entry.path)) continue;
+    seen.add(entry.path);
+    result.push(entry);
+  }
+
+  return result.slice(0, MAX_REPOS);
+}
+
+function persistRecentRepos(repos: RecentRepo[]): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(dedupeRecentRepos(repos)));
+}
+
+export function getRecentRepos(): RecentRepo[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+
+    const normalized = parsed
+      .map(normalizeRecentRepo)
+      .filter(Boolean) as RecentRepo[];
+
+    const deduped = dedupeRecentRepos(normalized);
+
+    // Self-heal old / malformed localStorage so future renders stay clean.
+    if (JSON.stringify(parsed) !== JSON.stringify(deduped)) {
+      persistRecentRepos(deduped);
+    }
+
+    return deduped;
+  } catch {
+    return [];
+  }
+}
+
+export function addRecentRepo(path: string, commitCount: number = 0): void {
+  const trimmedPath = path?.trim();
+  if (!trimmedPath) return;
+
+  const repos = getRecentRepos().filter((r) => r.path !== trimmedPath);
+  const name = trimmedPath.split(/[\\/]/).pop() || trimmedPath;
+
+  repos.unshift({
+    path: trimmedPath,
+    name,
+    loadedAt: Date.now(),
+    commitCount: Number.isFinite(commitCount) ? commitCount : 0,
+  });
+
+  persistRecentRepos(repos);
+  renderRecentCommitsUI();
+}
+
+export function removeRecentRepo(path: string): void {
+  const repos = getRecentRepos().filter((r) => r.path !== path);
+  persistRecentRepos(repos);
+  renderRecentCommitsUI();
+}
+
+function renderRecentReposList(): void {
+  const section = document.getElementById("recentCommits");
+  const list = document.getElementById("recentCommitsList");
+  if (!list) return;
+
+  const repos = getRecentRepos();
+
+  if (section) {
+    section.style.display = repos.length ? "block" : "none";
+  }
+
+  if (!repos.length) {
+    list.innerHTML =
+      '<div style="font-size:11px;color:var(--text-muted);padding:8px 0">No recent commits</div>';
+    return;
+  }
+
+  list.innerHTML = repos
+    .map(
+      (repo) => `
+        <button
+          class="recent-commit-item"
+          data-path="${escapeHtml(repo.path)}"
+          title="${escapeHtml(repo.path)}"
+          style="display:block;width:100%;text-align:left;background:none;border:none;color:inherit;padding:8px 0;cursor:pointer"
+        >
+          <div style="font-size:12px;font-weight:600;color:var(--text-primary)">${escapeHtml(repo.name)}</div>
+          <div style="font-size:11px;color:var(--text-muted)">${repo.commitCount} commit${repo.commitCount === 1 ? "" : "s"} · ${formatTimeAgo(repo.loadedAt)}</div>
+        </button>
+      `,
+    )
+    .join("");
+
+  Array.from(list.querySelectorAll("[data-path]")).forEach((item) => {
+    item.addEventListener("click", async () => {
+      const path = item.dataset.path;
+      if (!path) return;
+
+      try {
+        const { getCanvasContext } = require("./context");
+        const { handoffRepoLoad } = require("./repo-handoff");
+        const ctx = getCanvasContext();
+        if (!ctx) return;
+        await handoffRepoLoad(ctx, path);
+      } catch (err) {
+        console.error("Failed to load recent repo", err);
+      }
+    });
+  });
+}
+
+export function renderRecentCommitsUI(): void {
+  renderRecentReposList();
+
+  const pullBtn = document.getElementById("pullBtn") as HTMLButtonElement | null;
+  if (!pullBtn || pullBtn.dataset.bound === "true") return;
+  pullBtn.dataset.bound = "true";
+
+  pullBtn.addEventListener("click", async () => {
+    const { showToast } = require("./utils");
+    const { getCanvasContext } = require("./context");
+    const ctx = getCanvasContext();
+
+    if (!ctx || !ctx.snap().context.repoPath) {
+      showToast("No repository loaded", "error");
+      return;
+    }
+
+    pullBtn.disabled = true;
+    pullBtn.innerHTML = `
+      <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.5">
+        <circle cx="12" cy="12" r="10" strokeDasharray="30" strokeDashoffset="0">
+          <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/>
+        </circle>
+      </svg>
+      Pulling...
+    `;
+
+    try {
+      const { loadRepository } = require("./repo");
+      await loadRepository(ctx, ctx.snap().context.repoPath);
+      showToast("Pulled latest commits", "success");
+    } catch (err: any) {
+      showToast(`Pull failed: ${err.message}`, "error");
+    } finally {
+      pullBtn.disabled = false;
+      pullBtn.innerHTML = `
+        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.5">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="7 10 12 15 17 10" />
+          <line x1="12" y1="15" x2="12" y2="3" />
+        </svg>
+        Pull
+      `;
+    }
+  });
+}
+
+function escapeHtml(str: string): string {
+  if (!str) return "";
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function formatTimeAgo(timestamp: number): string {
+  if (!timestamp || !Number.isFinite(timestamp) || timestamp <= 0) return "Just now";
+
+  const diff = Math.max(0, Date.now() - timestamp);
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+
+  if (minutes < 1) return "Just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  return `${days}d ago`;
+}

package/app/lib/repo-handoff.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, mock, test } from 'bun:test';
+import { handoffRepoLoad } from './repo-handoff';
+import { setupDomTest } from './test-dom';
+
+describe('repo handoff helper', () => {
+  test('uses onRepoReady seam and syncs repo selection without loading immediately', () => {
+    const handle = setupDomTest({
+      html: '<select id="repoSelect"><option value="">Select</option><option value="C:/Code/gitmaps">gitmaps</option></select>',
+    });
+
+    try {
+      const onRepoReady = mock(() => undefined);
+      const ctx = { onRepoReady } as any;
+
+      handoffRepoLoad(ctx, 'C:/Code/gitmaps');
+
+      expect((document.getElementById('repoSelect') as HTMLSelectElement).value).toBe('C:/Code/gitmaps');
+      expect(onRepoReady).toHaveBeenCalledWith('C:/Code/gitmaps');
+    } finally {
+      handle.cleanup();
+    }
+  });
+});

package/app/lib/repo-handoff.ts

@@ -0,0 +1,16 @@
+import type { CanvasContext } from './context';
+import { loadRepository } from './repo';
+
+export function syncRepoSelection(path: string) {
+  const repoSelect = document.getElementById('repoSelect') as HTMLSelectElement | null;
+  if (repoSelect) repoSelect.value = path;
+}
+
+export function handoffRepoLoad(ctx: CanvasContext, path: string) {
+  syncRepoSelection(path);
+  if ((ctx as any)?.onRepoReady) {
+    (ctx as any).onRepoReady(path);
+    return;
+  }
+  loadRepository(ctx, path);
+}

package/app/lib/repo-progressive.ts

@@ -0,0 +1,119 @@
+/**
+ * Progressive File Loading — Optimized rendering for large repos (500+ files)
+ * 
+ * Loads only visible cards initially, defers off-screen cards,
+ * and progressively loads as user pans/zooms.
+ */
+
+import type { CanvasContext } from './context';
+import { measure } from 'measure-fn';
+import { createAllFileCard } from './cards';
+import { getPositionKey, setPathExpandedInPositions } from './positions';
+
+const LARGE_REPO_THRESHOLD = 500;
+const PROGRESSIVE_BATCH_SIZE = 100;
+const LOAD_RADIUS = 2.0; // viewport widths
+
+export function isLargeRepo(fileCount: number): boolean {
+  return fileCount >= LARGE_REPO_THRESHOLD;
+}
+
+export function shouldDeferCard(
+  cardX: number,
+  cardY: number,
+  viewportCenterX: number,
+  viewportCenterY: number,
+  viewportWidth: number,
+  viewportHeight: number
+): boolean {
+  const dx = Math.abs(cardX - viewportCenterX);
+  const dy = Math.abs(cardY - viewportCenterY);
+  const maxDistX = viewportWidth * LOAD_RADIUS;
+  const maxDistY = viewportHeight * LOAD_RADIUS;
+  
+  return dx > maxDistX || dy > maxDistY;
+}
+
+export async function renderAllFilesProgressive(
+  ctx: CanvasContext,
+  files: any[]
+): Promise<void> {
+  return measure('canvas:renderProgressive', async () => {
+    const isLarge = isLargeRepo(files.length);
+    console.log(`[progressive] Loading ${files.length} files (large: ${isLarge})`);
+    
+    // Get viewport info
+    const vpEl = ctx.canvasViewport;
+    const vpW = vpEl?.clientWidth || window.innerWidth;
+    const vpH = vpEl?.clientHeight || window.innerHeight;
+    const state = ctx.snap().context;
+    const zoom = state.zoom || 1;
+    const offsetX = state.offsetX || 0;
+    const offsetY = state.offsetY || 0;
+    
+    const viewportCenterX = (-offsetX + vpW / 2) / zoom;
+    const viewportCenterY = (-offsetY + vpH / 2) / zoom;
+    
+    // Separate visible and deferred files
+    const visibleFiles: any[] = [];
+    const deferredFiles: any[] = [];
+    
+    files.forEach((file) => {
+      const posKey = getPositionKey('allfiles', file.path);
+      const pos = ctx.positions.get(posKey);
+      const x = pos?.x || 50;
+      const y = pos?.y || 50;
+      
+      if (isLarge && shouldDeferCard(x, y, viewportCenterX, viewportCenterY, vpW, vpH)) {
+        deferredFiles.push(file);
+        ctx.deferredCards.set(file.path, { x, y, file });
+      } else {
+        visibleFiles.push(file);
+      }
+    });
+    
+    console.log(`[progressive] Visible: ${visibleFiles.length}, Deferred: ${deferredFiles.length}`);
+    
+    // Load visible files immediately
+    await loadFileBatch(ctx, visibleFiles);
+    
+    // Progressive loading for deferred files
+    if (deferredFiles.length > 0) {
+      // Load in batches on animation frames
+      let batchIndex = 0;
+      const loadNextBatch = () => {
+        const start = batchIndex * PROGRESSIVE_BATCH_SIZE;
+        const end = Math.min(start + PROGRESSIVE_BATCH_SIZE, deferredFiles.length);
+        const batch = deferredFiles.slice(start, end);
+        
+        console.log(`[progressive] Loading batch ${batchIndex + 1} (${batch.length} files)`);
+        loadFileBatch(ctx, batch);
+        
+        batchIndex++;
+        if (batchIndex * PROGRESSIVE_BATCH_SIZE < deferredFiles.length) {
+          requestAnimationFrame(loadNextBatch);
+        }
+      };
+      
+      // Start loading after a short delay
+      setTimeout(() => loadNextBatch(), 500);
+    }
+  });
+}
+
+async function loadFileBatch(ctx: CanvasContext, files: any[]): Promise<void> {
+  const { createAllFileCard } = require('./cards');
+  const { performViewportCulling } = require('./viewport-culling');
+  
+  files.forEach((file) => {
+    const card = createAllFileCard(ctx, file);
+    if (card) {
+      ctx.canvasContent.appendChild(card);
+      ctx.fileCards.set(file.path, card);
+      ctx.deferredCards.delete(file.path);
+    }
+  });
+  
+  // Re-run culling after loading batch
+  performViewportCulling(ctx);
+}

package/app/lib/repo-select.test.ts

@@ -0,0 +1,61 @@
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import { appendDiscoveredRepos, populateRepoSelect } from './repo-select';
+import { setupDomTest } from './test-dom';
+
+describe('repo select smoke', () => {
+  let cleanup: (() => void) | undefined;
+
+  beforeEach(() => {
+    const handle = setupDomTest({
+      url: 'http://localhost:3335/',
+      html: '<select id="repoSelect"><option value="">Select a repository...</option></select>',
+    });
+    cleanup = handle.cleanup;
+  });
+
+  afterEach(() => {
+    cleanup?.();
+  });
+
+  test('populates recent repos and preserves placeholder/new option flow', () => {
+    const repoSelect = document.getElementById('repoSelect') as HTMLSelectElement;
+
+    populateRepoSelect(repoSelect, [
+      { path: 'C:/Code/gitmaps', name: 'gitmaps' },
+      { path: 'C:/Code/geeksy', name: 'geeksy' },
+    ] as any, { hashPath: '' });
+
+    const options = Array.from(repoSelect.options).map((opt) => ({ value: opt.value, text: opt.textContent }));
+    expect(options).toEqual([
+      { value: '', text: 'Select a repository...' },
+      { value: 'C:/Code/gitmaps', text: 'gitmaps' },
+      { value: 'C:/Code/geeksy', text: 'geeksy' },
+      { value: '__new__', text: '＋ Open new repo...' },
+    ]);
+    expect(repoSelect.value).toBe('');
+  });
+
+  test('appends discovered repos before the open-new option without duplicating known repos', () => {
+    const repoSelect = document.getElementById('repoSelect') as HTMLSelectElement;
+    const added: string[] = [];
+
+    const recentRepos = [
+      { path: 'C:/Code/gitmaps', name: 'gitmaps' },
+    ];
+    populateRepoSelect(repoSelect, recentRepos as any, { hashPath: '' });
+
+    appendDiscoveredRepos(
+      repoSelect,
+      recentRepos as any,
+      [
+        { path: 'C:/Code/gitmaps', name: 'gitmaps' },
+        { path: 'C:/Code/new-repo', name: 'new-repo' },
+      ],
+      (repoPath) => added.push(repoPath),
+    );
+
+    const values = Array.from(repoSelect.options).map((opt) => opt.value);
+    expect(values).toEqual(['', 'C:/Code/gitmaps', 'C:/Code/new-repo', '__new__']);
+    expect(added).toEqual(['C:/Code/new-repo']);
+  });
+});

package/app/lib/repo-select.ts

@@ -0,0 +1,74 @@
+import { getRecentRepos, type RecentRepo } from './recent-commits';
+
+export interface RepoSelectItem {
+  path: string;
+  name?: string;
+}
+
+export function normalizeRepoPath(repoPath: string): string {
+  return (repoPath || '').trim().replace(/\\/g, '/');
+}
+
+function getShortRepoName(repoPath: string): string {
+  return normalizeRepoPath(repoPath).split('/').filter(Boolean).pop() || repoPath;
+}
+
+export function populateRepoSelect(
+  repoSelect: HTMLSelectElement,
+  recentRepos: Array<RecentRepo | RepoSelectItem | string> = getRecentRepos(),
+  options: { hashPath?: string } = {},
+) {
+  while (repoSelect.options.length > 1) repoSelect.remove(1);
+
+  for (const repo of recentRepos) {
+    const rawRepoPath = typeof repo === 'string' ? repo : repo.path || '';
+    const repoPath = normalizeRepoPath(rawRepoPath);
+    if (!repoPath) continue;
+
+    const opt = document.createElement('option');
+    opt.value = repoPath;
+    opt.textContent = typeof repo === 'string'
+      ? getShortRepoName(repoPath)
+      : repo.name || getShortRepoName(repoPath);
+    opt.title = rawRepoPath;
+    repoSelect.add(opt);
+  }
+
+  const newOpt = document.createElement('option');
+  newOpt.value = '__new__';
+  newOpt.textContent = '＋ Open new repo...';
+  newOpt.id = 'optNewLocal';
+  repoSelect.add(newOpt);
+
+  const hashPath = normalizeRepoPath(options.hashPath ?? decodeURIComponent(location.hash.slice(1)));
+  const knownPaths = recentRepos.map((repo) => normalizeRepoPath(typeof repo === 'string' ? repo : repo.path || ''));
+  if (hashPath && knownPaths.includes(hashPath)) {
+    repoSelect.value = hashPath;
+  } else if (!hashPath) {
+    repoSelect.value = '';
+  }
+}
+
+export function appendDiscoveredRepos(
+  repoSelect: HTMLSelectElement,
+  recentRepos: Array<RecentRepo | RepoSelectItem | string>,
+  discoveredRepos: RepoSelectItem[],
+  onNewRepo?: (repoPath: string) => void,
+) {
+  const currentPaths = new Set(recentRepos.map((repo) => normalizeRepoPath(typeof repo === 'string' ? repo : repo.path || '')));
+
+  for (const repo of discoveredRepos) {
+    const repoPath = normalizeRepoPath(repo.path);
+    if (!repoPath || currentPaths.has(repoPath)) continue;
+    onNewRepo?.(repoPath);
+
+    const opt = document.createElement('option');
+    opt.value = repoPath;
+    opt.textContent = repo.name || getShortRepoName(repoPath);
+    opt.title = repo.path;
+
+    const newOpt = repoSelect.querySelector('option[value="__new__"]');
+    if (newOpt) repoSelect.insertBefore(opt, newOpt);
+    else repoSelect.add(opt);
+  }
+}