gitmaps 1.0.0 → 1.1.1

package/app/lib/mount-route-wiring.ts

@@ -0,0 +1,84 @@
+import type { CanvasContext } from './context';
+import {
+  bootstrapInitialRouteUi,
+  handleInitialRouteError,
+  hideInitialRouteLanding,
+  hydrateInitialRouteRepo,
+  migrateLegacyHashRoute,
+  resolveInitialRepoPath,
+  showInitialRouteCloneStart,
+} from './initial-route-hydration';
+import { handlePopstateRepoEntry } from './route-repo-entry';
+
+export async function wireMountRoutes(
+  ctx: CanvasContext,
+  options: {
+    isDisposed: () => boolean;
+    showLandingPlaceholder: () => void;
+    updateFavoriteStar: (path: string) => void;
+    applySharedLayout: () => Promise<void>;
+    hydrateRoutes?: typeof hydrateInitialRouteRepo;
+    resolveRepoPath?: typeof resolveInitialRepoPath;
+    handleRouteError?: typeof handleInitialRouteError;
+    bootstrapRepoUi?: typeof bootstrapInitialRouteUi;
+    bindPopstate?: typeof bindMountPopstate;
+  },
+) {
+  const hydrateRoutes = options.hydrateRoutes || hydrateInitialRouteRepo;
+  const resolveRepoPath = options.resolveRepoPath || resolveInitialRepoPath;
+  const handleRouteError = options.handleRouteError || handleInitialRouteError;
+  const bootstrapRepoUi = options.bootstrapRepoUi || bootstrapInitialRouteUi;
+  const bindPopstate = options.bindPopstate || bindMountPopstate;
+
+  await hydrateRoutes(ctx, {
+    disposed: options.isDisposed(),
+    showLandingPlaceholder: options.showLandingPlaceholder,
+    hideLanding: hideInitialRouteLanding,
+    migrateLegacyHashRoute,
+    resolveRepoPath: async (slug) => {
+      try {
+        return await resolveRepoPath(slug, {
+          onCloneStart: showInitialRouteCloneStart,
+        } as any);
+      } catch (err: any) {
+        return await handleRouteError(err);
+      }
+    },
+    bootstrapRepoUi: async (resolvedPath) => {
+      await bootstrapRepoUi(ctx, resolvedPath, {
+        disposed: options.isDisposed(),
+        applySharedLayout: options.applySharedLayout,
+      } as any);
+    },
+    updateFavoriteStar: options.updateFavoriteStar,
+  });
+
+  bindPopstate(ctx, {
+    isDisposed: options.isDisposed,
+    showLandingPlaceholder: options.showLandingPlaceholder,
+    updateFavoriteStar: options.updateFavoriteStar,
+  });
+}
+
+export function bindMountPopstate(
+  ctx: CanvasContext,
+  options: {
+    isDisposed: () => boolean;
+    showLandingPlaceholder: () => void;
+    updateFavoriteStar: (path: string) => void;
+    addListener?: (type: string, handler: () => void) => void;
+  },
+) {
+  const addListener = options.addListener || ((type: string, handler: () => void) => {
+    window.addEventListener(type, handler);
+  });
+
+  addListener('popstate', () => {
+    handlePopstateRepoEntry(ctx, {
+      disposed: options.isDisposed(),
+      currentRepoPath: ctx.snap().context.repoPath,
+      showLandingPlaceholder: options.showLandingPlaceholder,
+      updateFavoriteStar: options.updateFavoriteStar,
+    });
+  });
+}

package/app/lib/multi-repo.ts

@@ -165,6 +165,20 @@ export function unloadRepo(ctx: CanvasContext, repoPath: string) {
 /**
  * Create repo zone tabs in the sidebar for switching between repos.
  */
+export function clearMultiRepoWorkspace(ctx?: CanvasContext) {
+    for (const [, repo] of loadedRepos) {
+        if (repo.zoneLabel) repo.zoneLabel.remove();
+    }
+    loadedRepos.clear();
+    _activeRepoPath = null;
+
+    const container = document.getElementById('repoTabs');
+    if (container) {
+        container.innerHTML = '';
+        container.style.display = 'none';
+    }
+}
+
 export function renderRepoTabs(ctx: CanvasContext) {
     const container = document.getElementById('repoTabs');
     if (!container) return;

package/app/lib/onboarding-tutorial.ts

@@ -0,0 +1,278 @@
+/**
+ * Interactive Onboarding Tutorial — Guide new users through GitMaps
+ * 
+ * Features:
+ * - Step-by-step interactive tour
+ * - Highlights UI elements as it explains them
+ * - Keyboard shortcuts cheat sheet
+ * - Skip/resume anytime
+ * - Persists completion state
+ */
+
+import type { CanvasContext } from './context';
+
+export interface TutorialStep {
+  id: string;
+  title: string;
+  description: string;
+  highlightSelector: string;
+  position: 'top' | 'bottom' | 'left' | 'right';
+  action?: () => void;
+}
+
+const TUTORIAL_STEPS: TutorialStep[] = [
+  {
+    id: 'welcome',
+    title: 'Welcome to GitMaps! 🎉',
+    description: 'Explore codebases on an infinite canvas. Let\'s take a quick tour of the features.',
+    highlightSelector: '#app',
+    position: 'bottom',
+  },
+  {
+    id: 'repo-selector',
+    title: 'Repository Selector',
+    description: 'Select any loaded repository from the dropdown. Import new repos from GitHub with the button.',
+    highlightSelector: '#repoSelect',
+    position: 'bottom',
+  },
+  {
+    id: 'commit-timeline',
+    title: 'Commit Timeline',
+    description: 'Browse through commit history. Click any commit to see what changed. Use ← → arrow keys to navigate.',
+    highlightSelector: '#commitTimeline',
+    position: 'right',
+  },
+  {
+    id: 'canvas-area',
+    title: 'Infinite Canvas',
+    description: 'Your code lives here! Each file is a card. Pan with Space+Drag or middle-click. Scroll to zoom.',
+    highlightSelector: '#canvasViewport',
+    position: 'top',
+  },
+  {
+    id: 'file-cards',
+    title: 'File Cards',
+    description: 'Each card shows a file with code preview. Green/red markers show additions/deletions. Hover to see full preview.',
+    highlightSelector: '.file-card',
+    position: 'bottom',
+  },
+  {
+    id: 'minimap',
+    title: 'Minimap',
+    description: 'Never get lost! The minimap shows your entire canvas. Click to jump to any area.',
+    highlightSelector: '#minimap',
+    position: 'top',
+  },
+  {
+    id: 'arrange-toolbar',
+    title: 'Arrange Tools',
+    description: 'Organize cards with H (row), V (column), or G (grid). W fits all cards on screen.',
+    highlightSelector: '#arrangeToolbar',
+    position: 'bottom',
+  },
+  {
+    id: 'zoom-controls',
+    title: 'Zoom Controls',
+    description: 'Fine-tune zoom with the slider or +/- keys. Current zoom level shown in percentage.',
+    highlightSelector: '#zoomSlider',
+    position: 'top',
+  },
+  {
+    id: 'shortcuts',
+    title: 'Keyboard Shortcuts',
+    description: 'Press ? anytime to see all shortcuts. Power users love Ctrl+F (search), Ctrl+G (dependency graph), and Ctrl+O (find file).',
+    highlightSelector: '#hotkeyToggle',
+    position: 'bottom',
+  },
+  {
+    id: 'done',
+    title: 'You\'re Ready! 🚀',
+    description: 'Start exploring! Import a repo, arrange cards your way, and enjoy spatial code exploration.',
+    highlightSelector: '#app',
+    position: 'bottom',
+    action: () => {
+      localStorage.setItem('gitcanvas:onboardingComplete', 'true');
+    },
+  },
+];
+
+let currentStep = 0;
+let tutorialOverlay: HTMLElement | null = null;
+
+/**
+ * Check if user has completed onboarding
+ */
+export function hasCompletedOnboarding(): boolean {
+  return localStorage.getItem('gitcanvas:onboardingComplete') === 'true';
+}
+
+/**
+ * Reset onboarding progress
+ */
+export function resetOnboarding(): void {
+  localStorage.removeItem('gitcanvas:onboardingComplete');
+  currentStep = 0;
+}
+
+/**
+ * Start the onboarding tutorial
+ */
+export function startOnboarding(ctx: CanvasContext): void {
+  if (tutorialOverlay) return;
+  
+  currentStep = 0;
+  showTutorialStep(ctx, currentStep);
+}
+
+/**
+ * Show a specific tutorial step
+ */
+function showTutorialStep(ctx: CanvasContext, stepIndex: number): void {
+  if (stepIndex < 0 || stepIndex >= TUTORIAL_STEPS.length) {
+    hideTutorial();
+    return;
+  }
+
+  const step = TUTORIAL_STEPS[stepIndex];
+  
+  // Create overlay if needed
+  if (!tutorialOverlay) {
+    tutorialOverlay = document.createElement('div');
+    tutorialOverlay.className = 'tutorial-overlay';
+    tutorialOverlay.innerHTML = `
+      <div class="tutorial-backdrop"></div>
+      <div class="tutorial-content">
+        <div class="tutorial-header">
+          <h3 class="tutorial-title"></h3>
+          <button class="tutorial-close" id="tutorialClose">×</button>
+        </div>
+        <div class="tutorial-description"></div>
+        <div class="tutorial-progress">
+          <span class="tutorial-step-count"></span>
+        </div>
+        <div class="tutorial-actions">
+          <button class="btn-ghost" id="tutorialSkip">Skip Tour</button>
+          <button class="btn-primary" id="tutorialNext">Next →</button>
+        </div>
+      </div>
+    `;
+    
+    document.body.appendChild(tutorialOverlay);
+    
+    // Add styles
+    const style = document.createElement('style');
+    style.textContent = `
+      .tutorial-overlay {
+        position: fixed;
+        inset: 0;
+        z-index: 99999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        animation: fadeIn 0.2s ease;
+      }
+      .tutorial-backdrop {
+        position: absolute;
+        inset: 0;
+        background: rgba(10, 10, 15, 0.85);
+        backdrop-filter: blur(4px);
+      }
+      .tutorial-content {
+        position: relative;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-primary);
+        border-radius: 12px;
+        padding: 24px;
+        max-width: 450px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+        animation: slideUp 0.3s ease;
+      }
+      .tutorial-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 12px;
+      }
+      .tutorial-title {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        background: linear-gradient(135deg, #a78bfa, #60a5fa);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .tutorial-close {
+        background: none;
+        border: none;
+        color: var(--text-muted);
+        font-size: 24px;
+        cursor: pointer;
+        padding: 4px 8px;
+        border-radius: 4px;
+        transition: all 0.2s;
+      }
+      .tutorial-close:hover {
+        background: var(--bg-tertiary);
+        color: var(--text-primary);
+      }
+      .tutorial-description {
+        color: var(--text-primary);
+        font-size: 14px;
+        line-height: 1.6;
+        margin-bottom: 20px;
+      }
+      .tutorial-progress {
+        margin-bottom: 20px;
+      }
+      .tutorial-step-count {
+        font-size: 12px;
+        color: var(--text-muted);
+      }
+      .tutorial-actions {
+        display: flex;
+        gap: 8px;
+        justify-content: space-between;
+      }
+      .tutorial-actions button {
+        padding: 10px 20px;
+        border-radius: 8px;
+        border: none;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+      .btn-primary {
+        background: linear-gradient(135deg, #7c3aed, #3b82f6);
+        color: white;
+      }
+      .btn-primary:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
+      }
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      @keyframes slideUp {
+        from { transform: translateY(20px); opacity: 0; }
+        to { transform: translateY(0); opacity: 1; }
+      }
+    `;
+    document.head.appendChild(style);
+    
+    // Wire up buttons
+    tutorialOverlay.querySelector('#tutorialClose')?.addEventListener('click', hideTutorial);
+    tutorialOverlay.querySelector('#tutorialSkip')?.addEventListener('click', () => {
+      hideTutorial();
+      localStorage.setItem('gitcanvas:onboardingComplete', 'true');
+    });
+    tutorialOverlay.querySelector('#tutorialNext')?.addEventListener('click', () => {
+      const step = TUTORIAL_STEPS[currentStep];
+      if (step.action) step.action();
+      currentStep++;
+      showTutorialStep(ctx, currentStep);
+    });
+    
+    // Keyboard navigation
+    document.addEventListener('keydown', ha

package/app/lib/perf-overlay.ts

@@ -26,11 +26,22 @@ let _lastFpsTime = 0;
 let _currentFps = 0;
 let _fpsHistory: number[] = [];
 const FPS_HISTORY_LENGTH = 60; // 1 second of history at 60fps
+let _lastFrameTime = 0; // ms per frame
 
 // DOM count tracking (expensive, sample every ~500ms)
 let _lastDomCount = 0;
 let _lastDomTime = 0;
 
+// Render timing (external instrumentation can set these)
+let _lastCullTimeMs = 0;
+let _lastRenderTimeMs = 0;
+
+/** Set cull/render timing from external code (viewport-culling, connections) */
+export function reportRenderTiming(phase: 'cull' | 'render', ms: number) {
+    if (phase === 'cull') _lastCullTimeMs = ms;
+    else _lastRenderTimeMs = ms;
+}
+
 // ── DOM Elements (cached) ──────────────────────────────────
 let _elFps: HTMLElement;
 let _elFpsBar: HTMLElement;
@@ -39,6 +50,10 @@ let _elDom: HTMLElement;
 let _elCards: HTMLElement;
 let _elZoom: HTMLElement;
 let _elMemory: HTMLElement;
+let _elFrameTime: HTMLElement;
+let _elConnections: HTMLElement;
+let _elRenderBudget: HTMLElement;
+let _elRenderBudgetBar: HTMLElement;
 
 /**
  * Creates the overlay DOM once.
@@ -91,6 +106,23 @@ function createOverlay(): HTMLElement {
                 <div class="perf-label">Zoom</div>
                 <div class="perf-value" id="perf-zoom">--</div>
             </div>
+            <div class="perf-stat">
+                <div class="perf-label">Frame</div>
+                <div class="perf-value" id="perf-frametime">--</div>
+            </div>
+            <div class="perf-stat">
+                <div class="perf-label">Lines</div>
+                <div class="perf-value" id="perf-connections">--</div>
+            </div>
+        </div>
+        <div class="perf-stat" style="margin-top:6px;">
+            <div class="perf-label">Render Budget</div>
+            <div style="display:flex;align-items:center;gap:6px">
+                <div class="perf-value" id="perf-render-budget" style="min-width:50px">--</div>
+                <div class="perf-bar-wrap" style="flex:1">
+                    <div class="perf-bar" id="perf-render-budget-bar" style="width:0%;background:#22c55e;"></div>
+                </div>
+            </div>
         </div>
         <div class="perf-stat" style="margin-top:6px;">
             <div class="perf-label">Memory</div>
@@ -147,6 +179,10 @@ function createOverlay(): HTMLElement {
     _elCards = el.querySelector('#perf-cards')!;
     _elZoom = el.querySelector('#perf-zoom')!;
     _elMemory = el.querySelector('#perf-memory')!;
+    _elFrameTime = el.querySelector('#perf-frametime')!;
+    _elConnections = el.querySelector('#perf-connections')!;
+    _elRenderBudget = el.querySelector('#perf-render-budget')!;
+    _elRenderBudgetBar = el.querySelector('#perf-render-budget-bar')!;
 
     // Close button
     el.querySelector('#perf-close')!.addEventListener('click', () => togglePerfOverlay(_ctx!));
@@ -250,6 +286,17 @@ function drawFpsGraph() {
 function measureFrame(timestamp: number) {
     if (!_visible || !_ctx) return;
 
+    // Frame time (ms since last frame)
+    if (_lastFrameTime > 0) {
+        const frameMs = timestamp - _lastFrameTime;
+        const frameMsRounded = Math.round(frameMs * 10) / 10;
+        _elFrameTime.textContent = frameMsRounded + 'ms';
+        if (frameMs > 33) _elFrameTime.style.color = '#ef4444'; // < 30fps
+        else if (frameMs > 20) _elFrameTime.style.color = '#fbbf24'; // < 50fps
+        else _elFrameTime.style.color = '#e0e0f0';
+    }
+    _lastFrameTime = timestamp;
+
     _frameCount++;
 
     // Calculate FPS every 500ms
@@ -295,6 +342,16 @@ function measureFrame(timestamp: number) {
         _elCards.style.color = culled > 0 ? '#22c55e' : '#e0e0f0';
     }
 
+    // Connection line count
+    const svgLayer = _ctx.connectionLayer || document.querySelector('.connections-layer');
+    if (svgLayer) {
+        const lineCount = svgLayer.querySelectorAll('line, path').length;
+        _elConnections.textContent = lineCount.toLocaleString();
+        if (lineCount > 1000) _elConnections.style.color = '#ef4444';
+        else if (lineCount > 500) _elConnections.style.color = '#fbbf24';
+        else _elConnections.style.color = '#e0e0f0';
+    }
+
     // Zoom level
     if (_ctx.snap) {
         try {
@@ -304,6 +361,24 @@ function measureFrame(timestamp: number) {
         } catch (_) { }
     }
 
+    // Render budget: cull + render time vs 16.67ms target
+    const totalRenderMs = _lastCullTimeMs + _lastRenderTimeMs;
+    if (totalRenderMs > 0) {
+        const budgetPct = Math.min((totalRenderMs / 16.67) * 100, 100);
+        _elRenderBudget.textContent = totalRenderMs.toFixed(1) + 'ms';
+        _elRenderBudgetBar.style.width = budgetPct + '%';
+        if (totalRenderMs > 16.67) {
+            _elRenderBudget.style.color = '#ef4444';
+            _elRenderBudgetBar.style.background = '#ef4444';
+        } else if (totalRenderMs > 10) {
+            _elRenderBudget.style.color = '#fbbf24';
+            _elRenderBudgetBar.style.background = '#fbbf24';
+        } else {
+            _elRenderBudget.style.color = '#22c55e';
+            _elRenderBudgetBar.style.background = '#22c55e';
+        }
+    }
+
     // Memory (Chrome only)
     const perf = (performance as any);
     if (perf.memory) {
@@ -352,6 +427,9 @@ export function togglePerfOverlay(ctx: CanvasContext) {
 export function setupPerfOverlay(ctx: CanvasContext) {
     _ctx = ctx;
     window.addEventListener('keydown', (e: KeyboardEvent) => {
+        // Don't steal Shift+P from text inputs
+        const tag = (e.target as HTMLElement)?.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement)?.isContentEditable) return;
         if (e.shiftKey && e.key === 'P') {
             e.preventDefault();
             togglePerfOverlay(ctx);