gitmaps 1.1.13 → 1.1.15

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

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { estimatePreviewCharsPerLine, estimatePreviewLineCapacity, estimatePreviewMaxScroll, estimateTitleCharsPerLine, getLowZoomPreviewText, getLowZoomScale, wrapPreviewText } from './low-zoom-preview';
+import { collectPreviewDiffMarkers, estimatePreviewCharsPerLine, estimatePreviewLineCapacity, estimatePreviewMaxScroll, estimateTitleCharsPerLine, getLowZoomPreviewText, getLowZoomScale, getPreviewScrollMetrics, wrapPreviewText } from './low-zoom-preview';
 
 describe('low zoom preview helpers', () => {
   test('anchors preview text to approximate saved scroll position', () => {
@@ -52,6 +52,23 @@ describe('low zoom preview helpers', () => {
     expect(estimatePreviewMaxScroll(longFile, 700, 1)).toBeGreaterThan(estimatePreviewMaxScroll(shortFile, 700, 1));
   });
 
+  test('scroll metrics produce a visible thumb position', () => {
+    const file = { content: Array.from({ length: 120 }, (_, i) => `line-${i}`).join('\n') };
+    const metrics = getPreviewScrollMetrics(file, 700, 1, 120);
+    expect(metrics.thumbHeight).toBeGreaterThan(0);
+    expect(metrics.thumbY).toBeGreaterThanOrEqual(metrics.trackPadding);
+  });
+
+  test('collects diff markers from added and deleted lines', () => {
+    const markers = collectPreviewDiffMarkers({
+      addedLines: new Set([2, 10]),
+      deletedBeforeLine: new Map([[5, ['gone']]]),
+    }, 20);
+    expect(markers.length).toBe(3);
+    expect(markers.some((m) => m.color === '#22c55e')).toBe(true);
+    expect(markers.some((m) => m.color === '#ef4444')).toBe(true);
+  });
+
   test('title typography is larger than body typography for readability', () => {
     const scale = getLowZoomScale(0.18);
     expect(scale.titleFont).toBeGreaterThan(scale.bodyFont);

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

@@ -122,6 +122,33 @@ export function estimatePreviewMaxScroll(file: any, height: number, zoom: number
   return Math.max(0, (totalLines - visibleLines) * 20);
 }
 
+export function getPreviewScrollMetrics(file: any, height: number, zoom: number, scrollTop: number) {
+  const totalLines = Math.max(1, String(file?.content || '').split('\n').length);
+  const visibleLines = Math.max(1, estimatePreviewLineCapacity(height, zoom));
+  const maxScroll = Math.max(0, (totalLines - visibleLines) * 20);
+  const trackPadding = 10;
+  const trackHeight = Math.max(24, height - trackPadding * 2);
+  const thumbHeight = Math.max(18, (visibleLines / totalLines) * trackHeight);
+  const thumbTravel = Math.max(0, trackHeight - thumbHeight);
+  const thumbY = trackPadding + (maxScroll > 0 ? (scrollTop / maxScroll) * thumbTravel : 0);
+  return { totalLines, visibleLines, maxScroll, trackPadding, trackHeight, thumbHeight, thumbY };
+}
+
+export function collectPreviewDiffMarkers(file: any, totalLines: number) {
+  const markers: Array<{ ratio: number; color: string }> = [];
+  const safeTotal = Math.max(1, totalLines);
+  const added = file?.addedLines instanceof Set ? Array.from(file.addedLines) : [];
+  const deletedBefore = file?.deletedBeforeLine instanceof Map ? Array.from(file.deletedBeforeLine.keys()) : [];
+
+  for (const line of added) {
+    markers.push({ ratio: Math.max(0, Math.min(1, (line - 1) / safeTotal)), color: '#22c55e' });
+  }
+  for (const line of deletedBefore) {
+    markers.push({ ratio: Math.max(0, Math.min(1, (line - 1) / safeTotal)), color: '#ef4444' });
+  }
+  return markers;
+}
+
 export function renderLowZoomPreviewCanvas(
   canvas: HTMLCanvasElement,
   params: {
@@ -140,6 +167,7 @@ export function renderLowZoomPreviewCanvas(
   const scale = getLowZoomScale(zoom);
   const ctx = canvas.getContext('2d');
   if (!ctx) return;
+  const scrollMetrics = getPreviewScrollMetrics(file, height, zoom, scrollTop);
 
   canvas.width = Math.max(1, Math.floor(width * dpr));
   canvas.height = Math.max(1, Math.floor(height * dpr));
@@ -157,12 +185,15 @@ export function renderLowZoomPreviewCanvas(
   ctx.fill();
 
   const accentWidth = Math.max(6, width * 0.012);
+  const scrollbarWidth = 6;
+  const markerLaneWidth = 4;
+  const rightRailWidth = scrollbarWidth + markerLaneWidth + 8;
   ctx.fillStyle = accentColor;
   ctx.fillRect(0, 0, accentWidth, height);
 
   const leftInset = scale.padding + accentWidth + scale.gap * 0.8;
   const topInset = scale.padding;
-  const maxTextWidth = Math.max(40, width - leftInset - scale.padding);
+  const maxTextWidth = Math.max(40, width - leftInset - scale.padding - rightRailWidth);
 
   ctx.textBaseline = 'top';
   ctx.font = `700 ${scale.titleFont}px "JetBrains Mono", monospace`;
@@ -206,6 +237,26 @@ export function renderLowZoomPreviewCanvas(
     if (y > height - scale.padding) return;
     ctx.fillText(line, leftInset, y);
   });
+
+  const trackX = width - scrollbarWidth - 4;
+  const markerX = trackX - markerLaneWidth - 3;
+  const trackY = scrollMetrics.trackPadding;
+  const trackHeight = scrollMetrics.trackHeight;
+
+  ctx.fillStyle = 'rgba(255,255,255,0.08)';
+  roundRect(ctx, trackX, trackY, scrollbarWidth, trackHeight, scrollbarWidth / 2);
+  ctx.fill();
+
+  const markers = collectPreviewDiffMarkers(file, scrollMetrics.totalLines);
+  for (const marker of markers) {
+    const y = trackY + marker.ratio * trackHeight;
+    ctx.fillStyle = marker.color;
+    ctx.fillRect(markerX, Math.max(trackY, y), markerLaneWidth, 3);
+  }
+
+  ctx.fillStyle = 'rgba(196,181,253,0.9)';
+  roundRect(ctx, trackX, scrollMetrics.thumbY, scrollbarWidth, scrollMetrics.thumbHeight, scrollbarWidth / 2);
+  ctx.fill();
 }
 
 function trimToWidth(ctx: CanvasRenderingContext2D, text: string, maxWidth: number) {

package/app/lib/viewport-culling.ts

@@ -37,6 +37,7 @@ const VIEWPORT_MARGIN = 500;
 // LOD threshold: below this zoom level, use lightweight pill placeholders
 const LOD_ZOOM_THRESHOLD = 0.25;
 const LOW_ZOOM_MODE_STORAGE_KEY = 'gitmaps:detailMode';
+const PREVIEW_HINT_SHOWN_KEY = 'gitmaps:previewModeHintShown';
 
 // Maximum deferred cards to materialize per animation frame
 // Prevents frame drops when zooming out then back in on huge repos
@@ -120,6 +121,21 @@ export function isPreviewModeForced() {
     return _detailMode === 'preview';
 }
 
+function maybeShowPreviewModeHint() {
+    if (_detailMode !== 'preview') return;
+    try {
+        if (localStorage.getItem(PREVIEW_HINT_SHOWN_KEY) === 'true') return;
+        localStorage.setItem(PREVIEW_HINT_SHOWN_KEY, 'true');
+    } catch { }
+
+    setTimeout(() => {
+        try {
+            const { showToast } = require('./utils');
+            showToast('Preview mode: wheel scrolls card content · right rail shows scroll + diff markers · top-right switch returns to Classic', 'info');
+        } catch { }
+    }, 120);
+}
+
 // ── Status colors for low-zoom cards
 const PILL_COLORS: Record<string, string> = {
     'ts': '#3178c6',
@@ -441,6 +457,7 @@ export function performViewportCulling(ctx: CanvasContext) {
                 if (isChanged) pill.dataset.changed = 'true';
                 ctx.canvas.appendChild(pill);
                 pillCards.set(path, pill);
+                maybeShowPreviewModeHint();
             } else if (inView && pillCards.has(path)) {
                 updatePillCardLayout(ctx, pillCards.get(path)!, zoom, !!isChanged);
             } else if (!inView && pillCards.has(path)) {
@@ -470,6 +487,7 @@ export function performViewportCulling(ctx: CanvasContext) {
                     if (isChanged) pill.dataset.changed = 'true';
                     ctx.canvas.appendChild(pill);
                     pillCards.set(path, pill);
+                    maybeShowPreviewModeHint();
                 }
             } else {
                 updatePillCardLayout(ctx, pillCards.get(path)!, zoom, card.dataset.changed === 'true');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitmaps",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "type": "module",
   "bin": {
     "gitmaps": "cli.ts"