gitmaps 1.1.3 → 1.1.5

package/app/api/repo/pdf-meta/route.ts

@@ -0,0 +1,68 @@
+import path from 'path';
+import { existsSync } from 'fs';
+import { validateRepoPath } from '../validate-path';
+
+function parsePdfInfoPageCount(output: string): number | null {
+  const match = output.match(/^Pages:\s+(\d+)/mi);
+  if (!match) return null;
+  const value = parseInt(match[1], 10);
+  return Number.isFinite(value) && value > 0 ? value : null;
+}
+
+export async function GET(req: Request) {
+  const url = new URL(req.url);
+  const repoPath = url.searchParams.get('path') || '';
+  const filePath = url.searchParams.get('file') || '';
+
+  if (!repoPath || !filePath) {
+    return Response.json({ error: 'path and file params required' }, { status: 400 });
+  }
+
+  const blocked = validateRepoPath(repoPath);
+  if (blocked) return blocked;
+
+  if (filePath.includes('..') || filePath.startsWith('/')) {
+    return Response.json({ error: 'Invalid file path' }, { status: 400 });
+  }
+
+  const fullPath = path.join(repoPath, filePath);
+  if (!existsSync(fullPath)) {
+    return Response.json({ error: 'File not found' }, { status: 404 });
+  }
+
+  try {
+    const info = Bun.spawnSync(['pdfinfo', fullPath], {
+      stdout: 'pipe',
+      stderr: 'pipe',
+      timeout: 15000,
+    });
+
+    if (info.exitCode === 0) {
+      const pageCount = parsePdfInfoPageCount(new TextDecoder().decode(info.stdout));
+      return Response.json({ pageCount });
+    }
+  } catch {
+    // pdfinfo unavailable
+  }
+
+  try {
+    const identify = Bun.spawnSync(['magick', 'identify', fullPath], {
+      stdout: 'pipe',
+      stderr: 'pipe',
+      timeout: 20000,
+    });
+
+    if (identify.exitCode === 0) {
+      const lines = new TextDecoder().decode(identify.stdout)
+        .split(/\r?\n/)
+        .map((line) => line.trim())
+        .filter(Boolean);
+      const pageCount = lines.length > 0 ? lines.length : null;
+      return Response.json({ pageCount });
+    }
+  } catch {
+    // magick unavailable
+  }
+
+  return Response.json({ pageCount: null });
+}

package/app/lib/cards.tsx

@@ -965,6 +965,116 @@ export function _buildFileContentHTML(
   return `<div class="file-content-preview"><pre><code>${code}</code></pre>${truncNote}</div>`;
 }
 
+function buildPdfThumbUrl(repoPath: string, filePath: string, page: number) {
+  return `/api/repo/pdf-thumb?path=${encodeURIComponent(repoPath)}&file=${encodeURIComponent(filePath)}&page=${page}`;
+}
+
+function buildPdfPreviewHTML(repoPath: string, file: any) {
+  const thumbUrl = buildPdfThumbUrl(repoPath, file.path, 0);
+  return `<div class="file-content-preview file-image-preview pdf-preview" data-file="${escapeHtml(file.path)}" data-page="0" data-page-count="" style="display:flex;align-items:center;justify-content:center;height:100%;background:var(--bg-card);overflow:hidden;position:relative;">
+            <img class="pdf-preview-image" src="${thumbUrl}"
+                 alt="${escapeHtml(file.name)}"
+                 style="max-width:100%;max-height:100%;object-fit:contain;"
+                 loading="lazy"
+                 onerror="this.parentElement.innerHTML='<pre><code><span class=\\'error-notice\\'>PDF preview unavailable</span></code></pre>'" />
+            <div class="pdf-preview-toolbar" style="position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 8px;background:rgba(10,10,15,0.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.08);border-radius:10px;z-index:2;">
+              <button class="pdf-page-prev" type="button" style="min-width:28px;height:28px;border-radius:7px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);color:var(--text-primary);cursor:pointer;" disabled>‹</button>
+              <span class="pdf-page-indicator" style="font-size:11px;color:var(--text-primary);min-width:72px;text-align:center;">Page 1</span>
+              <button class="pdf-page-next" type="button" style="min-width:28px;height:28px;border-radius:7px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);color:var(--text-primary);cursor:pointer;">›</button>
+            </div>
+        </div>`;
+}
+
+async function setupPdfPreviewControls(ctx: CanvasContext, card: HTMLElement, file: any) {
+  const repoPath = ctx.snap().context.repoPath || "";
+  if (!repoPath) return;
+
+  const preview = card.querySelector('.pdf-preview') as HTMLElement | null;
+  const img = card.querySelector('.pdf-preview-image') as HTMLImageElement | null;
+  const prevBtn = card.querySelector('.pdf-page-prev') as HTMLButtonElement | null;
+  const nextBtn = card.querySelector('.pdf-page-next') as HTMLButtonElement | null;
+  const indicator = card.querySelector('.pdf-page-indicator') as HTMLElement | null;
+  if (!preview || !img || !prevBtn || !nextBtn || !indicator) return;
+
+  let page = 0;
+  let pageCount: number | null = null;
+  let lastGoodPage = 0;
+  let loading = false;
+
+  const updateUi = () => {
+    preview.dataset.page = String(page);
+    preview.dataset.pageCount = pageCount == null ? '' : String(pageCount);
+    indicator.textContent = pageCount && pageCount > 0 ? `Page ${page + 1} / ${pageCount}` : `Page ${page + 1}`;
+    prevBtn.disabled = loading || page <= 0;
+    nextBtn.disabled = loading || (pageCount != null && page >= pageCount - 1);
+    prevBtn.style.opacity = prevBtn.disabled ? '0.45' : '1';
+    nextBtn.style.opacity = nextBtn.disabled ? '0.45' : '1';
+    prevBtn.style.cursor = prevBtn.disabled ? 'default' : 'pointer';
+    nextBtn.style.cursor = nextBtn.disabled ? 'default' : 'pointer';
+  };
+
+  const loadPage = (nextPage: number) => {
+    if (loading || nextPage < 0) return;
+    if (pageCount != null && nextPage >= pageCount) return;
+
+    loading = true;
+    page = nextPage;
+    updateUi();
+
+    const nextSrc = buildPdfThumbUrl(repoPath, file.path, nextPage);
+    const rollbackPage = lastGoodPage;
+
+    img.onload = () => {
+      lastGoodPage = nextPage;
+      loading = false;
+      img.onload = null;
+      img.onerror = null;
+      updateUi();
+    };
+    img.onerror = () => {
+      loading = false;
+      if (pageCount == null && nextPage > rollbackPage) {
+        pageCount = nextPage;
+      }
+      page = rollbackPage;
+      img.onload = () => {
+        lastGoodPage = rollbackPage;
+        img.onload = null;
+        img.onerror = null;
+        updateUi();
+      };
+      img.onerror = null;
+      img.src = buildPdfThumbUrl(repoPath, file.path, rollbackPage);
+      updateUi();
+    };
+    img.src = nextSrc;
+  };
+
+  prevBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    loadPage(page - 1);
+  });
+  nextBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    loadPage(page + 1);
+  });
+
+  updateUi();
+
+  try {
+    const res = await fetch(`/api/repo/pdf-meta?path=${encodeURIComponent(repoPath)}&file=${encodeURIComponent(file.path)}`);
+    if (res.ok) {
+      const data = await res.json();
+      if (Number.isFinite(data?.pageCount) && data.pageCount > 0) {
+        pageCount = data.pageCount;
+        updateUi();
+      }
+    }
+  } catch {
+    // Metadata is optional — controls still work with optimistic next/prev.
+  }
+}
+
 // ─── Create all-file card (working tree) ────────────────
 export function createAllFileCard(
   ctx: CanvasContext,
@@ -1026,13 +1136,7 @@ export function createAllFileCard(
                  loading="lazy" />
         </div>`;
   } else if (isPdf) {
-    contentHTML = `<div class="file-content-preview file-image-preview" style="display:flex;align-items:center;justify-content:center;height:100%;background:var(--bg-card);overflow:hidden;">
-            <img src="/api/repo/pdf-thumb?path=${encodeURIComponent(ctx.snap().context.repoPath || "")}&file=${encodeURIComponent(file.path)}" 
-                 alt="${escapeHtml(file.name)}" 
-                 style="max-width:100%;max-height:100%;object-fit:contain;" 
-                 loading="lazy"
-                 onerror="this.parentElement.innerHTML='<pre><code><span class=\\'error-notice\\'>PDF preview unavailable</span></code></pre>'" />
-        </div>`;
+    contentHTML = buildPdfPreviewHTML(ctx.snap().context.repoPath || "", file);
   } else if (file.isBinary) {
     contentHTML = `<div class="file-content-preview"><pre><code><span class="error-notice">Binary file</span></code></pre></div>`;
   } else if (file.content) {
@@ -1208,6 +1312,10 @@ export function createAllFileCard(
     });
   }
 
+  if (isPdf) {
+    setupPdfPreviewControls(ctx, card, file);
+  }
+
   if (canvasOptions) {
     const previewEl = card.querySelector(".canvas-container") as HTMLElement;
     if (previewEl) {

package/app/lib/low-zoom-preview.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, test } from 'bun:test';
+import { getLowZoomPreviewText, getLowZoomScale } from './low-zoom-preview';
+
+describe('low zoom preview helpers', () => {
+  test('anchors preview text to approximate saved scroll position', () => {
+    const file = {
+      path: 'src/example.ts',
+      ext: 'ts',
+      content: Array.from({ length: 12 }, (_, i) => `line-${i + 1}`).join('\n'),
+    };
+
+    expect(getLowZoomPreviewText(file, 0).startsWith('line-1')).toBe(true);
+    expect(getLowZoomPreviewText(file, 40).startsWith('line-3')).toBe(true);
+  });
+
+  test('skips binary or unsupported files', () => {
+    expect(getLowZoomPreviewText({ path: 'image.png', ext: 'png', content: 'abc' }, 0)).toBe('');
+    expect(getLowZoomPreviewText({ path: 'bin.dat', ext: 'dat', isBinary: true, content: 'abc' }, 0)).toBe('');
+  });
+
+  test('increases world-space font size as zoom goes down', () => {
+    const near = getLowZoomScale(0.25);
+    const far = getLowZoomScale(0.1);
+    expect(far.titleFont).toBeGreaterThan(near.titleFont);
+    expect(far.bodyFont).toBeGreaterThan(near.bodyFont);
+  });
+});

package/app/lib/low-zoom-preview.ts

@@ -0,0 +1,31 @@
+const PREVIEWABLE_EXTS = new Set([
+  'ts', 'tsx', 'js', 'jsx', 'json', 'css', 'scss', 'html', 'md', 'py', 'rs', 'go', 'vue', 'svelte', 'toml', 'yaml', 'yml', 'sh', 'sql', 'txt'
+]);
+
+export function getLowZoomScale(zoom: number) {
+  const clampedZoom = Math.max(0.08, Math.min(0.25, zoom));
+  const progress = (0.25 - clampedZoom) / (0.25 - 0.08);
+  const desiredScreenTitle = 10 + progress * 4;
+  const desiredScreenBody = 8 + progress * 4;
+  return {
+    titleFont: desiredScreenTitle / clampedZoom,
+    bodyFont: desiredScreenBody / clampedZoom,
+    bodyLineHeight: (desiredScreenBody * 1.45) / clampedZoom,
+    padding: (10 + progress * 4) / clampedZoom,
+    gap: (6 + progress * 3) / clampedZoom,
+    radius: 8 / clampedZoom,
+  };
+}
+
+export function getLowZoomPreviewText(file: any, scrollTop: number): string {
+  if (!file || file.isBinary || !file.content) return '';
+
+  const ext = (file.ext || file.path?.split('.').pop() || '').toLowerCase();
+  if (!PREVIEWABLE_EXTS.has(ext)) return '';
+
+  const normalized = String(file.content).replace(/\t/g, '  ');
+  const lines = normalized.split('\n');
+  const approxLineHeight = 20;
+  const startLine = Math.max(0, Math.floor(scrollTop / approxLineHeight));
+  return lines.slice(startLine, startLine + 60).join('\n').trim();
+}

package/app/lib/viewport-culling.ts

@@ -23,6 +23,7 @@
  */
 import { measure } from 'measure-fn';
 import type { CanvasContext } from './context';
+import { getLowZoomPreviewText, getLowZoomScale } from './low-zoom-preview';
 import { materializeViewport } from './xydraw-bridge';
 
 // ── Culling state ──────────────────────────────────────────
@@ -89,7 +90,7 @@ export function getPinnedCards(): Set<string> {
     return _pinnedCards;
 }
 
-// ── Status colors for pill cards
+// ── Status colors for low-zoom cards
 const PILL_COLORS: Record<string, string> = {
     'ts': '#3178c6',
     'tsx': '#3178c6',
@@ -118,25 +119,31 @@ function getPillColor(path: string, isChanged: boolean): string {
     return PILL_COLORS[ext] || '#6b7280'; // Default gray
 }
 
+function getSavedScrollTop(ctx: CanvasContext, path: string): number {
+    const saved = ctx.positions.get(`scroll:${path}`);
+    return saved?.x || 0;
+}
+
 /**
  * Create a lightweight pill placeholder for a file.
  * ~3 DOM nodes vs ~100+ for a full card = massive perf win at low zoom.
  * Uses vertical text to fit file names in compact card footprint.
  */
-function createPillCard(path: string, x: number, y: number, w: number, h: number, isChanged: boolean, animate = false): HTMLElement {
+function createPillCard(ctx: CanvasContext, file: any, path: string, x: number, y: number, w: number, h: number, isChanged: boolean, zoom: number, animate = false): HTMLElement {
     const pill = document.createElement('div');
     pill.className = 'file-pill';
     pill.dataset.path = path;
+    pill.dataset.previewMode = 'content';
     pill.style.cssText = `
         position: absolute;
         left: ${x}px;
         top: ${y}px;
         width: ${w}px;
         height: ${h}px;
-        background: ${getPillColor(path, isChanged)};
+        background: linear-gradient(180deg, rgba(15,23,42,0.96) 0%, rgba(2,6,23,0.96) 100%);
         border-radius: 6px;
-        opacity: ${animate ? '0' : '0.9'};
-        contain: layout style;
+        opacity: ${animate ? '0' : '0.94'};
+        contain: layout style paint;
         box-shadow: 0 2px 8px rgba(0,0,0,0.3);
         border: 1px solid rgba(255,255,255,0.12);
         overflow: hidden;
@@ -146,45 +153,109 @@ function createPillCard(path: string, x: number, y: number, w: number, h: number
         transform: ${animate ? 'scale(0.92)' : 'scale(1)'};
     `;
 
+    const accent = document.createElement('div');
+    accent.className = 'file-pill-accent';
+    accent.style.cssText = `
+        position:absolute;
+        top:0;
+        left:0;
+        width:${Math.max(10, w * 0.02)}px;
+        height:100%;
+        background:${getPillColor(path, isChanged)};
+        opacity:0.95;
+        pointer-events:none;
+    `;
+    pill.appendChild(accent);
+
+    const inner = document.createElement('div');
+    inner.className = 'file-pill-inner';
+    inner.style.cssText = 'position:absolute; inset:0; transform-origin:top left; pointer-events:none;';
+    pill.appendChild(inner);
+
+    const title = document.createElement('div');
+    title.className = 'file-pill-title';
+    title.textContent = path.split('/').pop() || path;
+    inner.appendChild(title);
+
+    const sub = document.createElement('div');
+    sub.className = 'file-pill-subtitle';
+    sub.textContent = path.includes('/') ? path.split('/').slice(0, -1).join('/') : 'root';
+    inner.appendChild(sub);
+
+    const preview = document.createElement('div');
+    preview.className = 'file-pill-preview';
+    preview.textContent = getLowZoomPreviewText(file, getSavedScrollTop(ctx, path)) || 'Preview unavailable';
+    inner.appendChild(preview);
+
+    updatePillCardLayout(pill, zoom);
+
     // Animate pill entrance
     if (animate) {
         requestAnimationFrame(() => {
-            pill.style.opacity = '0.9';
+            pill.style.opacity = '0.94';
             pill.style.transform = 'scale(1)';
         });
     }
 
-    // File name label — show parent dir for common ambiguous filenames
-    const parts = path.split('/');
-    const filename = parts.pop() || path;
-    const AMBIGUOUS = ['route.ts', 'route.tsx', 'page.tsx', 'page.ts', 'index.ts', 'index.tsx', 'index.js', 'layout.tsx', 'middleware.ts'];
-    const name = AMBIGUOUS.includes(filename) && parts.length > 0
-        ? `${parts[parts.length - 1]}/${filename}`
-        : filename;
-    const label = document.createElement('span');
-    label.className = 'file-pill-label';
-    label.textContent = name;
-    label.style.cssText = `
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%) rotate(-90deg);
-        white-space: nowrap;
-        font-size: 48px;
-        font-weight: 700;
-        color: #fff;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: ${h - 40}px;
-        line-height: 1;
-        letter-spacing: 2px;
-        font-family: 'JetBrains Mono', monospace;
-        text-shadow: 0 2px 8px rgba(0,0,0,0.7);
-        pointer-events: none;
+    return pill;
+}
+
+function updatePillCardLayout(pill: HTMLElement, zoom: number) {
+    const x = parseFloat(pill.style.left) || 0;
+    const y = parseFloat(pill.style.top) || 0;
+    const w = parseFloat(pill.style.width) || 580;
+    const h = parseFloat(pill.style.height) || 700;
+    const scale = getLowZoomScale(zoom);
+    pill.dataset.zoomBucket = zoom.toFixed(3);
+    pill.style.borderRadius = `${Math.max(6, scale.radius)}px`;
+
+    const inner = pill.querySelector('.file-pill-inner') as HTMLElement | null;
+    const title = pill.querySelector('.file-pill-title') as HTMLElement | null;
+    const sub = pill.querySelector('.file-pill-subtitle') as HTMLElement | null;
+    const preview = pill.querySelector('.file-pill-preview') as HTMLElement | null;
+    if (!inner || !title || !sub || !preview) return;
+
+    inner.style.padding = `${scale.padding}px ${scale.padding}px ${scale.padding}px ${scale.padding + Math.max(14, w * 0.02)}px`;
+    inner.style.display = 'flex';
+    inner.style.flexDirection = 'column';
+    inner.style.gap = `${scale.gap}px`;
+
+    title.style.cssText = `
+        color:#f8fafc;
+        font-family:'JetBrains Mono', monospace;
+        font-size:${scale.titleFont}px;
+        font-weight:700;
+        line-height:1.05;
+        white-space:nowrap;
+        overflow:hidden;
+        text-overflow:ellipsis;
+        text-shadow:0 2px 8px rgba(0,0,0,0.45);
     `;
-    pill.appendChild(label);
 
-    return pill;
+    sub.style.cssText = `
+        color:rgba(226,232,240,0.72);
+        font-family:'JetBrains Mono', monospace;
+        font-size:${Math.max(scale.bodyFont * 0.78, 8 / Math.max(zoom, 0.08))}px;
+        line-height:1.05;
+        white-space:nowrap;
+        overflow:hidden;
+        text-overflow:ellipsis;
+    `;
+
+    preview.style.cssText = `
+        color:rgba(226,232,240,0.92);
+        font-family:'JetBrains Mono', monospace;
+        font-size:${scale.bodyFont}px;
+        line-height:${scale.bodyLineHeight}px;
+        white-space:pre-wrap;
+        overflow-wrap:anywhere;
+        word-break:break-word;
+        overflow:hidden;
+        flex:1 1 auto;
+        text-shadow:0 1px 4px rgba(0,0,0,0.3);
+        mask-image:linear-gradient(to bottom, black 0%, black 84%, transparent 100%);
+        -webkit-mask-image:linear-gradient(to bottom, black 0%, black 84%, transparent 100%);
+    `;
 }
 
 /**
@@ -399,9 +470,11 @@ export function performViewportCulling(ctx: CanvasContext) {
             );
 
             if (inView && !pillCards.has(path)) {
-                const pill = createPillCard(path, x, y, cardW, cardH, !!isChanged, true);
+                const pill = createPillCard(ctx, file, path, x, y, cardW, cardH, !!isChanged, zoom, true);
                 ctx.canvas.appendChild(pill);
                 pillCards.set(path, pill);
+            } else if (inView && pillCards.has(path)) {
+                updatePillCardLayout(pillCards.get(path)!, zoom);
             } else if (!inView && pillCards.has(path)) {
                 removePillForPath(path);
             }
@@ -424,10 +497,13 @@ export function performViewportCulling(ctx: CanvasContext) {
                 );
 
                 if (inView) {
-                    const pill = createPillCard(path, x, y, w, h, isChanged, true);
+                    const file = ctx.allFilesData?.find(f => f.path === path) || ctx.commitFilesData?.find(f => f.path === path) || null;
+                    const pill = createPillCard(ctx, file, path, x, y, w, h, isChanged, zoom, true);
                     ctx.canvas.appendChild(pill);
                     pillCards.set(path, pill);
                 }
+            } else {
+                updatePillCardLayout(pillCards.get(path)!, zoom);
             }
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitmaps",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "type": "module",
   "bin": {
     "gitmaps": "cli.ts"
@@ -16,13 +16,14 @@
   "scripts": {
     "dev": "bun run server.ts",
     "start": "bun run server.ts",
-    "test": "bun test app/api/repo/load/route.test.ts app/lib/route-catchall.test.ts app/lib/status-bar.test.ts app/lib/xydraw.test.ts app/lib/transclusion-smoke.test.ts app/lib/repo-select.test.ts packages/galaxydraw/perf.test.ts",
+    "test": "bun test app/api/repo/load/route.test.ts app/lib/route-catchall.test.ts app/lib/status-bar.test.ts app/lib/xydraw.test.ts app/lib/transclusion-smoke.test.ts app/lib/repo-select.test.ts app/lib/low-zoom-preview.test.ts packages/galaxydraw/perf.test.ts",
     "smoke:browser": "bun scripts/browser-smoke-local.ts",
     "smoke:browser-tools": "bash scripts/browser-smoke-local.sh",
     "smoke:browser-tools:load": "bash scripts/browser-repo-load-smoke.sh",
     "smoke:browser-tools:guard": "bash scripts/browser-smoke-guard.sh",
     "smoke:browser-tools:self-check": "bash scripts/browser-smoke-self-check.sh",
     "smoke:browser-tools:check": "bash scripts/browser-smoke-check.sh",
+    "smoke:docker-image": "bash scripts/docker-image-smoke.sh",
     "prepublishOnly": "echo 'Publishing gitmaps to npm'"
   },
   "keywords": [