gitmaps 1.0.0 → 1.1.0

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);
+    }
 }

package/app/lib/layers.tsx

@@ -19,7 +19,7 @@ export const layerState = {
     activeLayerId: 'default' as string
 };
 
-const DEFAULT_LAYER: LayerData = { id: 'default', name: 'All Files (Default)', files: {} };
+const DEFAULT_LAYER: LayerData = { id: 'default', name: 'Main', files: {} };
 
 export function initLayers(ctx: CanvasContext) {
     // Load from local storage for now or maybe an API? Let's use localStorage to persist across commits.
@@ -170,7 +170,7 @@ export function setActiveLayer(ctx: CanvasContext, id: string) {
     renderLayersUI(ctx);
     applyLayer(ctx);
 
-    // User feedback
+    // User feedback — only show hint for empty layers
     const layer = layerState.layers.find(l => l.id === id);
     if (layer && id !== 'default') {
         const fileCount = Object.keys(layer.files).length;
@@ -179,14 +179,7 @@ export function setActiveLayer(ctx: CanvasContext, id: string) {
                 `Layer "${layer.name}" is empty — right-click cards to move them here`,
                 'info'
             ));
-        } else {
-            import('./utils').then(m => m.showToast(
-                `Switched to "${layer.name}" (${fileCount} files)`,
-                'info'
-            ));
         }
-    } else if (id === 'default') {
-        import('./utils').then(m => m.showToast('Switched to All Files', 'info'));
     }
 }
 
@@ -238,7 +231,7 @@ export function applyLayer(ctx: CanvasContext) {
             renderAllFilesOnCanvas(ctx, ctx.allFilesData);
             // Also repopulate the changed files panel with the new layer filter
             if (ctx.commitFilesData) {
-                populateChangedFilesPanel(ctx.commitFilesData);
+                populateChangedFilesPanel(ctx, ctx.commitFilesData);
             }
         } else if (commitHash && commitHash !== 'allfiles') {
             selectCommit(ctx, commitHash, true);
@@ -296,6 +289,10 @@ export function renderLayersUI(ctx: CanvasContext) {
                 className="layers-bar-add"
                 id="newLayerBtn"
                 title="Create a new Layer"
+                onClick={() => {
+                    const name = prompt('Enter a name for the new layer:');
+                    if (name) createLayer(ctx, name);
+                }}
             >
                 + New Layer
             </button>
@@ -303,14 +300,16 @@ export function renderLayersUI(ctx: CanvasContext) {
         container
     );
 
-    // Attach click handler via DOM (Melina onClick doesn't reliably bind here)
-    const btn = document.getElementById('newLayerBtn');
-    if (btn) {
-        btn.onclick = () => {
-            const name = prompt('Enter a name for the new layer:');
-            if (name) createLayer(ctx, name);
-        };
-    }
+    // Belt-and-suspenders: also attach via DOM in case Melina onClick doesn't fire
+    requestAnimationFrame(() => {
+        const btn = document.getElementById('newLayerBtn');
+        if (btn) {
+            btn.onclick = () => {
+                const name = prompt('Enter a name for the new layer:');
+                if (name) createLayer(ctx, name);
+            };
+        }
+    });
 }
 
 // UI to configure section extraction

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);

package/app/lib/positions.ts

@@ -71,7 +71,7 @@ export async function loadSavedPositions(ctx: CanvasContext) {
 }
 
 // ─── Persist all positions (debounced) ───────────────────
-function flushPositions(ctx: CanvasContext) {
+export function flushPositions(ctx: CanvasContext) {
     const repoPath = getRepoPath(ctx);
     if (!repoPath) return;
 

package/app/lib/repo.tsx

@@ -59,12 +59,21 @@ export async function loadRepository(ctx: CanvasContext, repoPath: string) {
             const landing = document.getElementById('landingOverlay');
             if (landing) landing.style.display = 'none';
 
-            // Set URL hash to a friendly slug (folder name) instead of full path
+            // Determine the best URL slug to display:
+            // If the current URL is already a GitHub owner/repo slug that maps to this repo, keep it.
+            // Otherwise fall back to the short folder name.
+            const currentPath = decodeURIComponent(window.location.pathname.replace(/^\//, ''));
+            const isCurrentGitHubSlug = /^[a-zA-Z0-9._-]+\/[a-zA-Z0-9._-]+$/.test(currentPath)
+                && localStorage.getItem(`gitcanvas:slug:${currentPath}`) === repoPath;
             const repoSlug = repoPath.replace(/\\/g, '/').split('/').filter(Boolean).pop() || repoPath;
-            history.replaceState(null, '', '#' + encodeURIComponent(repoSlug));
+            const displaySlug = isCurrentGitHubSlug ? currentPath : repoSlug;
+            history.replaceState(null, '', '/' + (displaySlug.includes('/') ? displaySlug : encodeURIComponent(displaySlug)));
             localStorage.setItem('gitcanvas:lastRepo', repoPath);
-            // Also store slug→path mapping for URL-based loading
+            // Store slug→path mapping for URL-based loading (both short and GitHub-style)
             localStorage.setItem(`gitcanvas:slug:${repoSlug}`, repoPath);
+            if (isCurrentGitHubSlug) {
+                localStorage.setItem(`gitcanvas:slug:${currentPath}`, repoPath);
+            }
             updateStatusBarRepo(repoPath);
             // Save to recent repos list
             const recentKey = 'gitcanvas:recentRepos';
@@ -392,7 +401,7 @@ export async function selectCommit(ctx: CanvasContext, hash: string) {
             updateStatusBarFiles(ctx.fileCards.size);
 
             // Populate changed files panel with diff stats
-            populateChangedFilesPanel(data.files);
+            populateChangedFilesPanel(ctx, data.files);
         } catch (err) {
             _showCommitProgress(false);
             measure('commit:selectError', () => err);
@@ -853,7 +862,7 @@ export function switchView(ctx: CanvasContext, mode: string) {
                 // We have commit files in state — render them
                 ctx.commitFilesData = state.commitFiles;
                 renderFilesOnCanvas(ctx, state.commitFiles, state.currentCommitHash);
-                populateChangedFilesPanel(state.commitFiles);
+                populateChangedFilesPanel(ctx, state.commitFiles);
                 const fileCountEl = document.getElementById('fileCount');
                 if (fileCountEl) fileCountEl.textContent = state.commitFiles.length;
             } else {
@@ -887,7 +896,7 @@ function ChangedFilesList({ fileStats, totalAdd, totalDel, count }: {
     const statusIcons = { added: '+', modified: '~', deleted: '−', renamed: '→', copied: '⊕' };
 
     return (
-        <>
+        <div className="changed-files-container-inner" style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
             <div className="changed-files-summary">
                 <span className="stat-add">+{totalAdd}</span>
                 <span className="stat-del">−{totalDel}</span>
@@ -921,11 +930,12 @@ function ChangedFilesList({ fileStats, totalAdd, totalDel, count }: {
                     </div>
                 );
             })}
-        </>
+        </div>
     );
 }
 
-export function populateChangedFilesPanel(files: any[]) {
+export function populateChangedFilesPanel(ctx: CanvasContext, files: any[]) {
+    setPanelCtx(ctx);
     const panel = document.getElementById('changedFilesPanel');
     const listEl = document.getElementById('changedFilesList');
     if (!panel || !listEl) return;

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' },

package/app/lib/viewport-culling.ts

@@ -515,7 +515,11 @@ export function scheduleViewportCulling(ctx: CanvasContext) {
     _cullRafPending = true;
     requestAnimationFrame(() => {
         _cullRafPending = false;
+        const t0 = performance.now();
         performViewportCulling(ctx);
+        const elapsed = performance.now() - t0;
+        // Report to perf overlay (lazy import avoids circular dep)
+        try { require('./perf-overlay').reportRenderTiming('cull', elapsed); } catch { }
     });
 }
 
@@ -694,6 +698,9 @@ export function setupPillInteraction(ctx: CanvasContext) {
                 savePosition(ctx, 'allfiles', info.path, newX, newY);
             });
             pillMoveInfos = [];
+            // Force minimap rebuild so dot positions reflect the drag result
+            const { forceMinimapRebuild } = require('./canvas');
+            forceMinimapRebuild(ctx);
         }
 
         pillAction = null;

package/app/page.client.tsx

@@ -75,7 +75,7 @@ export default function mount(): () => void {
             if (disposed) return; // bail if cleaned up during await
             loadHiddenFiles(ctx);
             updateHiddenUI(ctx);
-            await loadConnections(ctx);
+            loadConnections(ctx);
             if (disposed) return; // bail if cleaned up during await
 
             // Init auth UI
@@ -119,11 +119,71 @@ export default function mount(): () => void {
                 }
             };
 
-            // Check URL hash for repo slug (or legacy full path)
-            const hashValue = decodeURIComponent(window.location.hash.replace('#', ''));
-            if (hashValue) {
-                // Resolve slug to full path (check localStorage mapping)
-                const resolvedPath = localStorage.getItem(`gitcanvas:slug:${hashValue}`) || hashValue;
+            // Check URL path for repo slug (e.g. /starwar or /galaxy-canvas/starwar)
+            // Fallback: also check hash for legacy URLs (e.g. #starwar)
+            const rawPath = decodeURIComponent(window.location.pathname.replace(/^\//, ''));
+            // Strip the route-name prefix if we're served at /galaxy-canvas
+            const pathSlug = rawPath.replace(/^galaxy-canvas\/?/, '');
+            const hashSlug = decodeURIComponent(window.location.hash.replace('#', ''));
+            const urlSlug = pathSlug || hashSlug;
+
+            if (urlSlug) {
+                // Migrate legacy hash URL to path URL
+                if (hashSlug && !pathSlug) {
+                    history.replaceState(null, '', '/' + encodeURIComponent(hashSlug));
+                }
+
+                // Detect GitHub owner/repo pattern (exactly one /, no \ or : which indicate local paths)
+                const isGitHubSlug = /^[a-zA-Z0-9._-]+\/[a-zA-Z0-9._-]+$/.test(urlSlug)
+                    && !urlSlug.includes('\\') && !urlSlug.includes(':');
+
+                let resolvedPath: string;
+
+                if (isGitHubSlug) {
+                    // Check if we already have a localStorage mapping for this GitHub slug
+                    const cached = localStorage.getItem(`gitcanvas:slug:${urlSlug}`);
+                    if (cached) {
+                        resolvedPath = cached;
+                    } else {
+                        // Clone from GitHub and use the local clone path
+                        const landing = document.getElementById('landingOverlay');
+                        if (landing) landing.style.display = 'none';
+
+                        // Show loading state
+                        const loadingEl = document.getElementById('loadingProgress');
+                        if (loadingEl) {
+                            loadingEl.style.display = 'flex';
+                            const msgEl = loadingEl.querySelector('.loading-message');
+                            if (msgEl) msgEl.textContent = `Cloning ${urlSlug} from GitHub...`;
+                        }
+
+                        try {
+                            const cloneRes = await fetch('/api/repo/clone', {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({ url: `https://github.com/${urlSlug}.git` }),
+                            });
+                            if (!cloneRes.ok) {
+                                const err = await cloneRes.json().catch(() => ({ error: 'Clone failed' }));
+                                throw new Error(err.error || 'Clone failed');
+                            }
+                            const cloneData = await cloneRes.json();
+                            resolvedPath = cloneData.path;
+
+                            // Store slug→path mapping so future visits are instant
+                            localStorage.setItem(`gitcanvas:slug:${urlSlug}`, resolvedPath);
+                        } catch (err: any) {
+                            console.error(`[gitmaps] Failed to clone ${urlSlug}:`, err);
+                            const { showToast } = await import('./lib/utils');
+                            showToast(`Failed to clone ${urlSlug}: ${err.message}`, 'error');
+                            // Fall through — show landing
+                            return;
+                        }
+                    }
+                } else {
+                    // Resolve slug to full path (check localStorage mapping)
+                    resolvedPath = localStorage.getItem(`gitcanvas:slug:${urlSlug}`) || urlSlug;
+                }
 
                 // Hide landing immediately since we have a repo
                 const landing = document.getElementById('landingOverlay');
@@ -145,9 +205,6 @@ export default function mount(): () => void {
                 updateZoomUI(ctx);
 
                 if (!disposed) {
-                    import('./lib/pr-review').then(({ initReviewStore }) => {
-                        initReviewStore(hashValue);
-                    });
                     loadRepository(ctx, resolvedPath);
                     updateFavoriteStar(resolvedPath);
                 }
@@ -157,9 +214,9 @@ export default function mount(): () => void {
                     const sel2 = document.getElementById('repoSelect') as HTMLSelectElement;
                     if (sel2) sel2.value = saved;
 
-                    // Set URL hash to friendly slug instead of full path
+                    // Set URL path to friendly slug instead of full path
                     const savedSlug = saved.replace(/\\/g, '/').split('/').filter(Boolean).pop() || saved;
-                    history.replaceState(null, '', '#' + encodeURIComponent(savedSlug));
+                    history.replaceState(null, '', '/' + encodeURIComponent(savedSlug));
                     // Store slug→path mapping
                     localStorage.setItem(`gitcanvas:slug:${savedSlug}`, saved);
 
@@ -176,19 +233,16 @@ export default function mount(): () => void {
 
                     // Actually load the repo data
                     if (!disposed) {
-                        import('./lib/pr-review').then(({ initReviewStore }) => {
-                            initReviewStore(savedSlug);
-                        });
                         loadRepository(ctx, saved);
                     }
                 }
             }
 
-            // Listen for hash changes
-            window.addEventListener('hashchange', () => {
+            // Listen for popstate (back/forward navigation with path-based routing)
+            window.addEventListener('popstate', () => {
                 if (disposed) return;
-                const hashSlug = decodeURIComponent(window.location.hash.replace('#', ''));
-                const resolvedPath = localStorage.getItem(`gitcanvas:slug:${hashSlug}`) || hashSlug;
+                const slug = decodeURIComponent(window.location.pathname.replace(/^\//, ''));
+                const resolvedPath = localStorage.getItem(`gitcanvas:slug:${slug}`) || slug;
                 if (resolvedPath && resolvedPath !== ctx.snap().context.repoPath) {
                     const sel3 = document.getElementById('repoSelect') as HTMLSelectElement;
                     if (sel3) sel3.value = resolvedPath;