gitmaps 1.0.0 → 1.1.1

package/app/lib/github-import.test.ts

@@ -0,0 +1,424 @@
+import { afterEach, beforeEach, describe, expect, mock, test } from 'bun:test';
+import { setupGithubImport } from './events';
+import { installFetchMock, installWindowOpenMock, setupDomTest } from './test-dom';
+
+function makeSseResponse(chunks: string[]): Response {
+  const stream = new ReadableStream({
+    start(controller) {
+      const enc = new TextEncoder();
+      for (const chunk of chunks) controller.enqueue(enc.encode(chunk));
+      controller.close();
+    },
+  });
+  return new Response(stream, {
+    headers: { 'Content-Type': 'text/event-stream' },
+  });
+}
+
+describe('GitHub import modal smoke', () => {
+  let cleanup: (() => void) | undefined;
+
+  beforeEach(() => {
+    const handle = setupDomTest({
+      url: 'http://localhost:3335/',
+      html: `
+        <button id="githubImportBtn">Import GitHub</button>
+        <div class="github-modal" id="githubModal">
+          <div class="github-modal-backdrop"></div>
+          <div class="github-modal-content">
+            <button id="githubModalClose">×</button>
+            <input id="githubUserInput" />
+            <select id="githubSortSelect">
+              <option value="updated">Recently Updated</option>
+              <option value="stars">Most Stars</option>
+              <option value="name">Name A→Z</option>
+            </select>
+            <button id="githubSearchBtn">Search</button>
+            <div id="githubUrlCloneRow" style="display:none">
+              <span id="githubDetectedUrl"></span>
+              <button id="githubUrlCloneBtn">Clone & Open</button>
+            </div>
+            <div id="githubFilterRow" style="display:none">
+              <input id="githubRepoFilter" />
+            </div>
+            <div id="githubProfile" style="display:none"></div>
+            <div id="githubReposGrid"></div>
+            <div id="githubPagination" style="display:none">
+              <button id="githubPrevPage"></button>
+              <span id="githubPageInfo"></span>
+              <button id="githubNextPage"></button>
+            </div>
+          </div>
+        </div>
+        <div id="cloneStatus"></div>
+        <select id="repoSelect"></select>
+      `,
+    });
+    cleanup = handle.cleanup;
+  });
+
+  afterEach(() => {
+    cleanup?.();
+  });
+
+  test('opens, searches, renders repos, and filters results', async () => {
+    const fetchMock = mock(async (input: string) => {
+      expect(input).toBe('/api/github/repos?user=7flash&page=1&sort=updated');
+      return new Response(JSON.stringify({
+        profile: {
+          login: '7flash',
+          name: '7flash',
+          public_repos: 2,
+          type: 'User',
+          avatar_url: 'https://example.com/avatar.png',
+          bio: 'builder',
+        },
+        repos: [
+          {
+            name: 'gitmaps',
+            clone_url: 'https://github.com/7flash/gitmaps.git',
+            description: 'Spatial code explorer',
+            language: 'TypeScript',
+            size: 2048,
+            updated_at: new Date().toISOString(),
+            stars: 10,
+          },
+          {
+            name: 'jsx-ai',
+            clone_url: 'https://github.com/7flash/jsx-ai.git',
+            description: 'JSX interface for structured LLM calls',
+            language: 'TypeScript',
+            size: 512,
+            updated_at: new Date().toISOString(),
+            stars: 5,
+          },
+        ],
+        page: 1,
+        hasNext: true,
+        hasPrev: false,
+      }), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    });
+
+    const openMock = mock(() => null as any);
+    const fetchHandle = installFetchMock(fetchMock as any);
+    const openHandle = installWindowOpenMock(openMock as any);
+
+    try {
+      setupGithubImport({} as any);
+
+      const openBtn = document.getElementById('githubImportBtn') as HTMLButtonElement;
+      const modal = document.getElementById('githubModal') as HTMLElement;
+      const userInput = document.getElementById('githubUserInput') as HTMLInputElement;
+      const searchBtn = document.getElementById('githubSearchBtn') as HTMLButtonElement;
+      const profile = document.getElementById('githubProfile') as HTMLElement;
+      const grid = document.getElementById('githubReposGrid') as HTMLElement;
+      const filterRow = document.getElementById('githubFilterRow') as HTMLElement;
+      const filterInput = document.getElementById('githubRepoFilter') as HTMLInputElement;
+      const pageInfo = document.getElementById('githubPageInfo') as HTMLElement;
+      const nextBtn = document.getElementById('githubNextPage') as HTMLButtonElement;
+
+      openBtn.click();
+      expect(modal.classList.contains('active')).toBe(true);
+
+      userInput.value = '7flash';
+      searchBtn.click();
+      await Promise.resolve();
+      await Promise.resolve();
+
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      expect(localStorage.getItem('gitcanvas:lastGithubUser')).toBe('7flash');
+      expect(profile.style.display).toBe('flex');
+      expect(profile.textContent).toContain('@7flash');
+      expect(grid.textContent).toContain('gitmaps');
+      expect(grid.textContent).toContain('jsx-ai');
+      expect(filterRow.style.display).toBe('flex');
+      expect(pageInfo.textContent).toBe('Page 1');
+      expect(nextBtn.disabled).toBe(false);
+
+      filterInput.value = 'jsx';
+      filterInput.dispatchEvent(new window.Event('input', { bubbles: true }));
+
+      const cards = Array.from(document.querySelectorAll('.github-repo-card')) as HTMLElement[];
+      const visibleNames = cards.filter(card => card.style.display !== 'none').map(card => card.dataset.name);
+      expect(visibleNames).toEqual(['jsx-ai']);
+
+      cards[0].click();
+      expect(openMock).toHaveBeenCalledWith('https://github.com/7flash/gitmaps', '_blank');
+    } finally {
+      fetchHandle.restore();
+      openHandle.restore();
+    }
+  });
+
+  test('detects direct GitHub URLs and shows clone affordance', () => {
+    setupGithubImport({} as any);
+
+    const userInput = document.getElementById('githubUserInput') as HTMLInputElement;
+    const urlRow = document.getElementById('githubUrlCloneRow') as HTMLElement;
+    const detected = document.getElementById('githubDetectedUrl') as HTMLElement;
+
+    userInput.value = 'https://github.com/7flash/jsx-ai';
+    userInput.dispatchEvent(new window.Event('input', { bubbles: true }));
+
+    expect(urlRow.style.display).toBe('flex');
+    expect(detected.textContent).toBe('7flash/jsx-ai');
+  });
+
+  test('pressing Enter on a direct GitHub URL starts clone-stream and closes the modal', async () => {
+    const fetchMock = mock(() => new Promise<Response>(() => {}));
+    const fetchHandle = installFetchMock(fetchMock as any);
+
+    try {
+      setupGithubImport({} as any);
+
+      const openBtn = document.getElementById('githubImportBtn') as HTMLButtonElement;
+      const modal = document.getElementById('githubModal') as HTMLElement;
+      const userInput = document.getElementById('githubUserInput') as HTMLInputElement;
+      const cloneStatus = document.getElementById('cloneStatus') as HTMLElement;
+
+      openBtn.click();
+      expect(modal.classList.contains('active')).toBe(true);
+
+      userInput.value = 'https://github.com/7flash/jsx-ai';
+      userInput.dispatchEvent(new window.Event('input', { bubbles: true }));
+      userInput.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+      await Promise.resolve();
+
+      expect(modal.classList.contains('active')).toBe(false);
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      expect(fetchMock.mock.calls[0]?.[0]).toBe('/api/repo/clone-stream');
+      expect(String(fetchMock.mock.calls[0]?.[1]?.body)).toContain('https://github.com/7flash/jsx-ai.git');
+      expect(cloneStatus.style.display).toBe('block');
+      expect(cloneStatus.textContent).toContain('Cloning');
+    } finally {
+      fetchHandle.restore();
+    }
+  });
+
+  test('repo card clone button starts clone-stream without opening the GitHub page', async () => {
+    const fetchMock = mock(async (input: string) => {
+      if (input.startsWith('/api/github/repos')) {
+        return new Response(JSON.stringify({
+          profile: {
+            login: '7flash',
+            name: '7flash',
+            public_repos: 1,
+            type: 'User',
+            avatar_url: 'https://example.com/avatar.png',
+          },
+          repos: [
+            {
+              name: 'gitmaps',
+              clone_url: 'https://github.com/7flash/gitmaps.git',
+              description: 'Spatial code explorer',
+              language: 'TypeScript',
+              size: 2048,
+              updated_at: new Date().toISOString(),
+              stars: 10,
+            },
+          ],
+          page: 1,
+          hasNext: false,
+          hasPrev: false,
+        }), { headers: { 'Content-Type': 'application/json' } });
+      }
+      return new Promise<Response>(() => {});
+    });
+
+    const openMock = mock(() => null as any);
+    const fetchHandle = installFetchMock(fetchMock as any);
+    const openHandle = installWindowOpenMock(openMock as any);
+
+    try {
+      setupGithubImport({} as any);
+
+      const openBtn = document.getElementById('githubImportBtn') as HTMLButtonElement;
+      const userInput = document.getElementById('githubUserInput') as HTMLInputElement;
+      const searchBtn = document.getElementById('githubSearchBtn') as HTMLButtonElement;
+      const modal = document.getElementById('githubModal') as HTMLElement;
+      const cloneStatus = document.getElementById('cloneStatus') as HTMLElement;
+
+      openBtn.click();
+      userInput.value = '7flash';
+      searchBtn.click();
+      await Promise.resolve();
+      await Promise.resolve();
+
+      const cloneBtn = document.querySelector('.github-clone-btn[data-url="https://github.com/7flash/gitmaps.git"]') as HTMLButtonElement;
+      expect(cloneBtn).toBeTruthy();
+
+      cloneBtn.click();
+      await Promise.resolve();
+
+      expect(fetchMock).toHaveBeenCalledTimes(2);
+      expect(fetchMock.mock.calls[1]?.[0]).toBe('/api/repo/clone-stream');
+      expect(String(fetchMock.mock.calls[1]?.[1]?.body)).toContain('https://github.com/7flash/gitmaps.git');
+      expect(modal.classList.contains('active')).toBe(false);
+      expect(cloneStatus.style.display).toBe('block');
+      expect(cloneStatus.textContent).toContain('Cloning');
+      expect(openMock).not.toHaveBeenCalled();
+    } finally {
+      fetchHandle.restore();
+      openHandle.restore();
+    }
+  });
+
+  test('cached clone response shows success and selects the cached repo path', async () => {
+    const onRepoReady = mock(() => undefined);
+    const ctx = {
+      actor: { send: mock(() => undefined) },
+      onRepoReady,
+      snap: () => ({ context: { repoPath: '', zoom: 1, offsetX: 0, offsetY: 0, commits: [] }, value: { view: 'allfiles' } }),
+      fileCards: new Map(),
+      deferredCards: new Map(),
+      changedFilePaths: new Set(),
+      positions: new Map(),
+      hiddenFiles: new Set(),
+      allFilesData: [],
+      commitFilesData: [],
+      canvas: document.createElement('div'),
+      canvasViewport: document.createElement('div'),
+      svgOverlay: null,
+      loadingOverlay: null,
+    } as any;
+
+    const fetchMock = mock(async (input: string) => {
+      if (input === '/api/repo/clone-stream') {
+        return new Response(JSON.stringify({ path: 'C:/Code/gitmaps' }), {
+          headers: { 'Content-Type': 'application/json' },
+        });
+      }
+      if (input === '/api/repo/load') {
+        return new Promise<Response>(() => {});
+      }
+      throw new Error(`Unexpected fetch: ${input}`);
+    });
+
+    const fetchHandle = installFetchMock(fetchMock as any);
+
+    try {
+      setupGithubImport(ctx);
+
+      const openBtn = document.getElementById('githubImportBtn') as HTMLButtonElement;
+      const userInput = document.getElementById('githubUserInput') as HTMLInputElement;
+      const cloneBtn = document.getElementById('githubUrlCloneBtn') as HTMLButtonElement;
+      const cloneStatus = document.getElementById('cloneStatus') as HTMLElement;
+      const repoSelect = document.getElementById('repoSelect') as HTMLSelectElement;
+
+      openBtn.click();
+      userInput.value = 'https://github.com/7flash/gitmaps';
+      userInput.dispatchEvent(new window.Event('input', { bubbles: true }));
+      cloneBtn.click();
+      await Promise.resolve();
+      await Promise.resolve();
+
+      expect(cloneStatus.className).toContain('success');
+      expect(cloneStatus.textContent).toContain('Updated — loading');
+      expect(repoSelect.value).toBe('C:/Code/gitmaps');
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      expect(onRepoReady).toHaveBeenCalledWith('C:/Code/gitmaps');
+    } finally {
+      fetchHandle.restore();
+    }
+  });
+
+  test('SSE clone done updates success state and selects the cloned repo path', async () => {
+    const onRepoReady = mock(() => undefined);
+    const ctx = {
+      actor: { send: mock(() => undefined) },
+      onRepoReady,
+      snap: () => ({ context: { repoPath: '', zoom: 1, offsetX: 0, offsetY: 0, commits: [] }, value: { view: 'allfiles' } }),
+      fileCards: new Map(),
+      deferredCards: new Map(),
+      changedFilePaths: new Set(),
+      positions: new Map(),
+      hiddenFiles: new Set(),
+      allFilesData: [],
+      commitFilesData: [],
+      canvas: document.createElement('div'),
+      canvasViewport: document.createElement('div'),
+      svgOverlay: null,
+      loadingOverlay: null,
+    } as any;
+
+    const fetchMock = mock(async (input: string) => {
+      if (input === '/api/repo/clone-stream') {
+        return makeSseResponse([
+          'event: progress\ndata: {"message":"Resolving repository","percent":25}\n\n',
+          'event: done\ndata: {"path":"C:/Code/jsx-ai"}\n\n',
+        ]);
+      }
+      if (input === '/api/repo/load') {
+        return new Promise<Response>(() => {});
+      }
+      throw new Error(`Unexpected fetch: ${input}`);
+    });
+
+    const fetchHandle = installFetchMock(fetchMock as any);
+
+    try {
+      setupGithubImport(ctx);
+
+      const openBtn = document.getElementById('githubImportBtn') as HTMLButtonElement;
+      const userInput = document.getElementById('githubUserInput') as HTMLInputElement;
+      const cloneBtn = document.getElementById('githubUrlCloneBtn') as HTMLButtonElement;
+      const cloneStatus = document.getElementById('cloneStatus') as HTMLElement;
+      const repoSelect = document.getElementById('repoSelect') as HTMLSelectElement;
+
+      openBtn.click();
+      userInput.value = 'https://github.com/7flash/jsx-ai';
+      userInput.dispatchEvent(new window.Event('input', { bubbles: true }));
+      cloneBtn.click();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+
+      expect(cloneStatus.className).toContain('success');
+      expect(cloneStatus.textContent).toContain('Cloned — loading');
+      expect(repoSelect.value).toBe('C:/Code/jsx-ai');
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      expect(onRepoReady).toHaveBeenCalledWith('C:/Code/jsx-ai');
+    } finally {
+      fetchHandle.restore();
+    }
+  });
+
+  test('SSE clone error updates the clone status to an error state', async () => {
+    const fetchMock = mock(async (input: string) => {
+      if (input === '/api/repo/clone-stream') {
+        return makeSseResponse([
+          'event: progress\ndata: {"message":"Cloning","percent":40}\n\n',
+          'event: error\ndata: {"error":"Repository not found"}\n\n',
+        ]);
+      }
+      throw new Error(`Unexpected fetch: ${input}`);
+    });
+
+    const fetchHandle = installFetchMock(fetchMock as any);
+
+    try {
+      setupGithubImport({} as any);
+
+      const openBtn = document.getElementById('githubImportBtn') as HTMLButtonElement;
+      const userInput = document.getElementById('githubUserInput') as HTMLInputElement;
+      const cloneBtn = document.getElementById('githubUrlCloneBtn') as HTMLButtonElement;
+      const cloneStatus = document.getElementById('cloneStatus') as HTMLElement;
+
+      openBtn.click();
+      userInput.value = 'https://github.com/7flash/missing-repo';
+      userInput.dispatchEvent(new window.Event('input', { bubbles: true }));
+      cloneBtn.click();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+
+      expect(cloneStatus.className).toContain('error');
+      expect(cloneStatus.textContent).toContain('Repository not found');
+    } finally {
+      fetchHandle.restore();
+    }
+  });
+});
+

package/app/lib/global-search.ts

@@ -15,14 +15,27 @@ let _ctx: CanvasContext | null = null;
 /** Toggle the search panel */
 export function toggleGlobalSearch(ctx: CanvasContext) {
     _ctx = ctx;
-    if (_panel) {
+    // Panel exists and is visible → close it
+    if (_panel && _panel.style.display !== 'none') {
         closeSearch();
     } else {
+        // Panel doesn't exist or is hidden → open/restore it
         openSearch();
     }
 }
 
 function openSearch() {
+    // If panel was hidden (not destroyed), restore it
+    if (_panel && _panel.style.display === 'none') {
+        _panel.style.display = 'flex';
+        document.addEventListener('keydown', _onEsc);
+        requestAnimationFrame(() => _panel?.classList.add('visible'));
+        // Re-focus search input
+        const input = _panel.querySelector('#gsSearchInput') as HTMLInputElement;
+        input?.focus();
+        return;
+    }
+
     if (_panel) return;
 
     _panel = document.createElement('div');
@@ -82,10 +95,11 @@ export function closeSearch() {
     if (!_panel) return;
     document.removeEventListener('keydown', _onEsc);
     _panel.classList.remove('visible');
-    // Wait for slide-out animation
+    // Hide instead of destroy — preserves query + results
     setTimeout(() => {
-        _panel?.remove();
-        _panel = null;
+        if (_panel) {
+            _panel.style.display = 'none';
+        }
     }, 200);
     if (_abortController) { _abortController.abort(); _abortController = null; }
     if (_searchTimeout) { clearTimeout(_searchTimeout); _searchTimeout = null; }
@@ -228,37 +242,44 @@ function getFileIcon(name: string): string {
     return icons[ext] || '📄';
 }
 
-/** Open a file from search results in the editor modal */
+/** Jump to a file on the canvas from search results */
 function openFileFromSearch(filePath: string, line: number) {
     if (!_ctx) return;
 
-    // Create a minimal file stub
-    const file = {
-        path: filePath,
-        name: filePath.split('/').pop() || filePath,
-        content: '',
-        lines: 0,
-    };
+    // Jump to the file on the canvas (handles layer switching and centering)
+    import('./canvas').then(({ jumpToFile }) => {
+        jumpToFile(_ctx!, filePath);
 
-    // Import and open the file modal
-    import('./file-modal').then(({ openFileModal }) => {
-        openFileModal(_ctx!, file, 'edit');
-        // Scroll to line after editor loads
+        // After jump animation settles, scroll to the matching line
         if (line > 1) {
             setTimeout(() => {
-                const editContainer = document.getElementById('modalEditContainer');
-                const editor = (editContainer as any)?._cmEditor;
-                if (editor?.view) {
-                    const lineInfo = editor.view.state.doc.line(Math.min(line, editor.view.state.doc.lines));
-                    editor.view.dispatch({
-                        selection: { anchor: lineInfo.from },
-                        scrollIntoView: true,
-                    });
+                const card = _ctx?.fileCards.get(filePath);
+                if (!card) return;
+                const body = card.querySelector('.file-card-body') as HTMLElement;
+                if (!body) return;
+                // Find the line element
+                const lineEl = body.querySelector(`[data-line="${line}"]`) as HTMLElement;
+                if (lineEl) {
+                    lineEl.scrollIntoView({ block: 'center', behavior: 'smooth' });
+                    // Flash highlight
+                    lineEl.style.background = 'rgba(124, 58, 237, 0.3)';
+                    setTimeout(() => { lineEl.style.background = ''; }, 2000);
                 }
-            }, 500);
+            }, 600); // Wait for jump animation
         }
     });
 
-    // Close search panel
-    closeSearch();
+    // Hide panel but don't destroy — preserve state
+    if (_panel) {
+        _panel.classList.remove('visible');
+        _panel.style.pointerEvents = 'none';
+        _panel.style.opacity = '0';
+        setTimeout(() => {
+            if (_panel) {
+                _panel.style.display = 'none';
+                _panel.style.pointerEvents = '';
+                _panel.style.opacity = '';
+            }
+        }, 200);
+    }
 }