gitmaps 1.1.5 → 1.1.7

package/app/globals.css

@@ -1145,10 +1145,64 @@ body {
 
 /* ── Sticky Zoom Controls ── */
 body.repo-loading .sticky-zoom-pill,
-body.landing-placeholder-visible .sticky-zoom-pill {
+body.repo-loading .detail-mode-switch,
+body.landing-placeholder-visible .sticky-zoom-pill,
+body.landing-placeholder-visible .detail-mode-switch {
   display: none;
 }
 
+.detail-mode-switch {
+  position: fixed;
+  top: 12px;
+  right: 144px;
+  z-index: 10001;
+}
+
+.detail-mode-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: rgba(15, 23, 42, 0.88);
+  border: 1px solid rgba(124, 58, 237, 0.24);
+  border-radius: 10px;
+  color: #d8ccff;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.12s ease;
+}
+
+.detail-mode-btn:hover {
+  background: rgba(15, 23, 42, 0.96);
+  border-color: rgba(124, 58, 237, 0.45);
+}
+
+.detail-mode-btn:active {
+  transform: scale(0.98);
+}
+
+.detail-mode-btn.active {
+  border-color: rgba(96, 165, 250, 0.6);
+  box-shadow: 0 10px 28px rgba(59, 130, 246, 0.16);
+}
+
+.detail-mode-label {
+  opacity: 0.72;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.detail-mode-state {
+  color: #f8fafc;
+  font-weight: 700;
+}
+
 .sticky-zoom-pill {
   position: absolute;
   bottom: 16px;

package/app/layout.tsx

@@ -875,6 +875,13 @@ export default function RootLayout({ children }: { children: any }) {
             </div>
 
             {/* Sticky Zoom Controls — floating pill, bottom-right */}
+            <div id="detailModeSwitch" className="detail-mode-switch" title="Toggle preview-focused detail mode">
+              <button id="toggleDetailMode" type="button" className="detail-mode-btn">
+                <span className="detail-mode-label">Preview mode</span>
+                <span id="detailModeState" className="detail-mode-state">Auto</span>
+              </button>
+            </div>
+
             <div id="stickyZoomControls" className="sticky-zoom-pill">
               <button id="stickyZoomOut" className="sz-btn" title="Zoom out">
                 <svg

package/app/lib/events.tsx

@@ -27,7 +27,7 @@ import { createLayer, getActiveLayer, addSectionToLayer } from './layers';
 import { updateCanvasTransform, updateZoomUI, updateMinimap, fitAllFiles, setupMinimapClick } from './canvas';
 import { zoomTowardScreen, panByDelta, screenToWorld, getCardManager } from './xydraw-bridge';
 import { hideSelectedFiles, showHiddenFilesModal as showHiddenModal } from './hidden-files';
-import { updatePillSelectionHighlights } from './viewport-culling';
+import { getDetailMode, toggleDetailMode, updatePillSelectionHighlights } from './viewport-culling';
 import { clearSelectionHighlights, updateSelectionHighlights, updateArrangeToolbar, arrangeRow, arrangeColumn, arrangeGrid, toggleCardExpand, fitScreenSize, changeCardsFontSize } from './cards';
 import { loadRepository, rerenderCurrentView, selectCommit } from './repo';
 import { handoffRepoLoad, syncRepoSelection } from './repo-handoff';
@@ -451,6 +451,28 @@ export function setupEventListeners(ctx: CanvasContext) {
             });
         }
 
+        const detailModeToggle = document.getElementById('toggleDetailMode');
+        if (detailModeToggle) {
+            const stateEl = document.getElementById('detailModeState');
+            const updateDetailModeUi = () => {
+                const mode = getDetailMode();
+                detailModeToggle.classList.toggle('active', mode === 'preview');
+                detailModeToggle.setAttribute('title', mode === 'preview'
+                    ? 'Preview mode forced on — click to restore auto detail switching'
+                    : 'Auto detail switching — click to keep preview mode on at every zoom');
+                if (stateEl) stateEl.textContent = mode === 'preview' ? 'Preview' : 'Auto';
+            };
+            updateDetailModeUi();
+            detailModeToggle.addEventListener('click', () => {
+                const next = toggleDetailMode();
+                updateDetailModeUi();
+                rerenderCurrentView(ctx);
+                showToast(next === 'preview'
+                    ? 'Preview mode forced on'
+                    : 'Auto detail switching restored', 'info');
+            });
+        }
+
         // Control mode toggle (Simple vs Advanced)
         const modeToggle = document.getElementById('toggleControlMode');
         if (modeToggle) {

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

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { getLowZoomPreviewText, getLowZoomScale } from './low-zoom-preview';
+import { estimatePreviewCharsPerLine, estimatePreviewLineCapacity, estimateTitleCharsPerLine, getLowZoomPreviewText, getLowZoomScale, wrapPreviewText } from './low-zoom-preview';
 
 describe('low zoom preview helpers', () => {
   test('anchors preview text to approximate saved scroll position', () => {
@@ -24,4 +24,22 @@ describe('low zoom preview helpers', () => {
     expect(far.titleFont).toBeGreaterThan(near.titleFont);
     expect(far.bodyFont).toBeGreaterThan(near.bodyFont);
   });
+
+  test('wraps preview text into bounded lines with ellipsis', () => {
+    const lines = wrapPreviewText('alpha beta gamma delta epsilon zeta eta theta', 10, 3);
+    expect(lines.length).toBeLessThanOrEqual(3);
+    expect(lines[lines.length - 1]?.endsWith('…')).toBe(true);
+  });
+
+  test('preview capacity estimates stay positive', () => {
+    expect(estimatePreviewCharsPerLine(580, 0.25)).toBeGreaterThan(8);
+    expect(estimateTitleCharsPerLine(580, 0.25)).toBeGreaterThan(8);
+    expect(estimatePreviewLineCapacity(700, 0.25)).toBeGreaterThanOrEqual(2);
+  });
+
+  test('title typography is larger than body typography for readability', () => {
+    const scale = getLowZoomScale(0.18);
+    expect(scale.titleFont).toBeGreaterThan(scale.bodyFont);
+    expect(scale.titleLineHeight).toBeGreaterThan(scale.bodyLineHeight * 0.7);
+  });
 });

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

@@ -5,15 +5,16 @@ const PREVIEWABLE_EXTS = new Set([
 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;
+  const desiredScreenTitle = 14 + progress * 6;
+  const desiredScreenBody = 9 + progress * 4;
   return {
     titleFont: desiredScreenTitle / clampedZoom,
+    titleLineHeight: (desiredScreenTitle * 1.08) / clampedZoom,
     bodyFont: desiredScreenBody / clampedZoom,
     bodyLineHeight: (desiredScreenBody * 1.45) / clampedZoom,
-    padding: (10 + progress * 4) / clampedZoom,
-    gap: (6 + progress * 3) / clampedZoom,
-    radius: 8 / clampedZoom,
+    padding: (12 + progress * 6) / clampedZoom,
+    gap: (7 + progress * 3) / clampedZoom,
+    radius: 10 / clampedZoom,
   };
 }
 
@@ -29,3 +30,176 @@ export function getLowZoomPreviewText(file: any, scrollTop: number): string {
   const startLine = Math.max(0, Math.floor(scrollTop / approxLineHeight));
   return lines.slice(startLine, startLine + 60).join('\n').trim();
 }
+
+export function wrapPreviewText(text: string, maxCharsPerLine: number, maxLines: number): string[] {
+  const safeMaxChars = Math.max(8, Math.floor(maxCharsPerLine));
+  const safeMaxLines = Math.max(1, Math.floor(maxLines));
+  const sourceLines = String(text || '').split('\n');
+  const out: string[] = [];
+
+  for (const sourceLine of sourceLines) {
+    const words = sourceLine.length === 0 ? [''] : sourceLine.split(/(\s+)/).filter(Boolean);
+    let current = '';
+
+    for (const part of words) {
+      if (part.length > safeMaxChars) {
+        if (current.trim().length > 0) {
+          out.push(current.trimEnd());
+          if (out.length >= safeMaxLines) return ellipsizeWrappedLines(out, safeMaxLines);
+          current = '';
+        }
+        for (let i = 0; i < part.length; i += safeMaxChars) {
+          out.push(part.slice(i, i + safeMaxChars));
+          if (out.length >= safeMaxLines) return ellipsizeWrappedLines(out, safeMaxLines);
+        }
+        continue;
+      }
+
+      if ((current + part).length > safeMaxChars && current.length > 0) {
+        out.push(current.trimEnd());
+        if (out.length >= safeMaxLines) return ellipsizeWrappedLines(out, safeMaxLines);
+        current = part.trimStart();
+      } else {
+        current += part;
+      }
+    }
+
+    if (current.length > 0 || sourceLine.length === 0) {
+      out.push(current.trimEnd());
+      if (out.length >= safeMaxLines) return ellipsizeWrappedLines(out, safeMaxLines);
+    }
+  }
+
+  return out.slice(0, safeMaxLines);
+}
+
+function ellipsizeWrappedLines(lines: string[], maxLines: number) {
+  const sliced = lines.slice(0, maxLines);
+  if (sliced.length === 0) return sliced;
+  const last = sliced[sliced.length - 1].replace(/[\s.…]+$/g, '');
+  sliced[sliced.length - 1] = `${last}…`;
+  return sliced;
+}
+
+export function estimatePreviewLineCapacity(height: number, zoom: number): number {
+  const scale = getLowZoomScale(zoom);
+  const available = Math.max(scale.bodyLineHeight, height - scale.padding * 2 - scale.titleLineHeight * 2 - scale.bodyFont - scale.gap * 4);
+  return Math.max(2, Math.floor(available / scale.bodyLineHeight));
+}
+
+export function estimateTitleCharsPerLine(width: number, zoom: number): number {
+  const scale = getLowZoomScale(zoom);
+  const available = Math.max(80, width - scale.padding * 2 - Math.max(14, width * 0.02));
+  const avgCharWidth = Math.max(7, scale.titleFont * 0.58);
+  return Math.max(8, Math.floor(available / avgCharWidth));
+}
+
+export function estimatePreviewCharsPerLine(width: number, zoom: number): number {
+  const scale = getLowZoomScale(zoom);
+  const available = Math.max(60, width - scale.padding * 2 - Math.max(14, width * 0.02));
+  const avgCharWidth = Math.max(6, scale.bodyFont * 0.6);
+  return Math.max(8, Math.floor(available / avgCharWidth));
+}
+
+export function renderLowZoomPreviewCanvas(
+  canvas: HTMLCanvasElement,
+  params: {
+    path: string;
+    file: any;
+    width: number;
+    height: number;
+    zoom: number;
+    scrollTop: number;
+    accentColor: string;
+    isChanged: boolean;
+  },
+) {
+  const { path, file, width, height, zoom, scrollTop, accentColor } = params;
+  const dpr = (globalThis.devicePixelRatio || 1);
+  const scale = getLowZoomScale(zoom);
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  canvas.width = Math.max(1, Math.floor(width * dpr));
+  canvas.height = Math.max(1, Math.floor(height * dpr));
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, width, height);
+
+  const gradient = ctx.createLinearGradient(0, 0, 0, height);
+  gradient.addColorStop(0, 'rgba(15,23,42,0.96)');
+  gradient.addColorStop(1, 'rgba(2,6,23,0.96)');
+  ctx.fillStyle = gradient;
+  roundRect(ctx, 0, 0, width, height, Math.max(6, scale.radius));
+  ctx.fill();
+
+  ctx.fillStyle = accentColor;
+  ctx.fillRect(0, 0, Math.max(10, width * 0.02), height);
+
+  const leftInset = scale.padding + Math.max(14, width * 0.02);
+  const topInset = scale.padding;
+  const maxTextWidth = Math.max(40, width - leftInset - scale.padding);
+
+  ctx.textBaseline = 'top';
+  ctx.font = `700 ${scale.titleFont}px "JetBrains Mono", monospace`;
+  ctx.fillStyle = '#f8fafc';
+  const title = path.split('/').pop() || path;
+  const titleLines = wrapPreviewText(title, estimateTitleCharsPerLine(width, zoom), 2);
+  titleLines.forEach((line, index) => {
+    ctx.fillText(trimToWidth(ctx, line, maxTextWidth), leftInset, topInset + index * scale.titleLineHeight);
+  });
+
+  const subtitleY = topInset + titleLines.length * scale.titleLineHeight + scale.gap * 0.8;
+  ctx.font = `${Math.max(scale.bodyFont * 0.8, 9 / Math.max(zoom, 0.08))}px "JetBrains Mono", monospace`;
+  ctx.fillStyle = 'rgba(226,232,240,0.72)';
+  const pathParts = path.split('/');
+  const subtitle = pathParts.length > 1 ? pathParts.slice(Math.max(0, pathParts.length - 3), -1).join(' / ') : 'root';
+  ctx.fillText(trimToWidth(ctx, subtitle, maxTextWidth), leftInset, subtitleY);
+
+  const previewY = subtitleY + Math.max(scale.bodyFont * 0.8, 9 / Math.max(zoom, 0.08)) + scale.gap * 1.35;
+  const rawPreview = getLowZoomPreviewText(file, scrollTop) || 'Preview unavailable';
+  const wrapped = wrapPreviewText(
+    rawPreview,
+    estimatePreviewCharsPerLine(width, zoom),
+    estimatePreviewLineCapacity(height, zoom),
+  );
+
+  ctx.font = `${scale.bodyFont}px "JetBrains Mono", monospace`;
+  ctx.fillStyle = 'rgba(226,232,240,0.92)';
+
+  const fadeStart = Math.max(previewY, height - scale.bodyLineHeight * 2.2);
+  const bodyHeight = Math.max(scale.bodyLineHeight * 2, height - previewY - scale.padding);
+  const mask = ctx.createLinearGradient(0, previewY, 0, previewY + bodyHeight);
+  mask.addColorStop(0, 'rgba(226,232,240,0.92)');
+  mask.addColorStop(Math.max(0, (fadeStart - previewY) / Math.max(1, bodyHeight)), 'rgba(226,232,240,0.92)');
+  mask.addColorStop(1, 'rgba(226,232,240,0)');
+  ctx.fillStyle = mask;
+
+  wrapped.forEach((line, index) => {
+    const y = previewY + index * scale.bodyLineHeight;
+    if (y > height - scale.padding) return;
+    ctx.fillText(line, leftInset, y);
+  });
+}
+
+function trimToWidth(ctx: CanvasRenderingContext2D, text: string, maxWidth: number) {
+  if (ctx.measureText(text).width <= maxWidth) return text;
+  let out = text;
+  while (out.length > 1 && ctx.measureText(`${out}…`).width > maxWidth) {
+    out = out.slice(0, -1);
+  }
+  return `${out}…`;
+}
+
+function roundRect(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number) {
+  const r = Math.min(radius, width / 2, height / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + width, y, x + width, y + height, r);
+  ctx.arcTo(x + width, y + height, x, y + height, r);
+  ctx.arcTo(x, y + height, x, y, r);
+  ctx.arcTo(x, y, x + width, y, r);
+  ctx.closePath();
+}

package/app/lib/viewport-culling.ts

@@ -23,7 +23,7 @@
  */
 import { measure } from 'measure-fn';
 import type { CanvasContext } from './context';
-import { getLowZoomPreviewText, getLowZoomScale } from './low-zoom-preview';
+import { getLowZoomScale, renderLowZoomPreviewCanvas } from './low-zoom-preview';
 import { materializeViewport } from './xydraw-bridge';
 
 // ── Culling state ──────────────────────────────────────────
@@ -36,6 +36,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';
 
 // Maximum deferred cards to materialize per animation frame
 // Prevents frame drops when zooming out then back in on huge repos
@@ -52,6 +53,14 @@ export function markTransformActive() {
 
 // Track current LOD mode so we can detect transitions
 let _currentLodMode: 'full' | 'pill' = 'full';
+let _detailMode: 'auto' | 'preview' = (() => {
+    try {
+        const stored = localStorage.getItem(LOW_ZOOM_MODE_STORAGE_KEY);
+        return stored === 'preview' ? 'preview' : 'auto';
+    } catch {
+        return 'auto';
+    }
+})();
 
 // Track pill elements for cleanup
 const pillCards = new Map<string, HTMLElement>();
@@ -90,6 +99,27 @@ export function getPinnedCards(): Set<string> {
     return _pinnedCards;
 }
 
+export function getDetailMode(): 'auto' | 'preview' {
+    return _detailMode;
+}
+
+export function setDetailMode(mode: 'auto' | 'preview') {
+    _detailMode = mode;
+    try {
+        localStorage.setItem(LOW_ZOOM_MODE_STORAGE_KEY, mode);
+    } catch { }
+}
+
+export function toggleDetailMode(): 'auto' | 'preview' {
+    const next = _detailMode === 'preview' ? 'auto' : 'preview';
+    setDetailMode(next);
+    return next;
+}
+
+export function isPreviewModeForced() {
+    return _detailMode === 'preview';
+}
+
 // ── Status colors for low-zoom cards
 const PILL_COLORS: Record<string, string> = {
     'ts': '#3178c6',
@@ -133,14 +163,13 @@ function createPillCard(ctx: CanvasContext, file: any, path: string, x: number,
     const pill = document.createElement('div');
     pill.className = 'file-pill';
     pill.dataset.path = path;
-    pill.dataset.previewMode = 'content';
+    pill.dataset.previewMode = 'canvas';
     pill.style.cssText = `
         position: absolute;
         left: ${x}px;
         top: ${y}px;
         width: ${w}px;
         height: ${h}px;
-        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.94'};
         contain: layout style paint;
@@ -151,45 +180,17 @@ function createPillCard(ctx: CanvasContext, file: any, path: string, x: number,
         user-select: none;
         transition: opacity 0.25s ease, box-shadow 0.2s ease, transform 0.25s ease;
         transform: ${animate ? 'scale(0.92)' : 'scale(1)'};
+        background: transparent;
     `;
 
-    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 canvas = document.createElement('canvas');
+    canvas.className = 'file-pill-canvas';
+    canvas.style.cssText = 'display:block;width:100%;height:100%;pointer-events:none;';
+    pill.appendChild(canvas);
 
-    const title = document.createElement('div');
-    title.className = 'file-pill-title';
-    title.textContent = path.split('/').pop() || path;
-    inner.appendChild(title);
+    (pill as any)._fileData = file;
+    updatePillCardLayout(ctx, pill, zoom, isChanged);
 
-    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.94';
@@ -200,62 +201,28 @@ function createPillCard(ctx: CanvasContext, file: any, path: string, x: number,
     return pill;
 }
 
-function updatePillCardLayout(pill: HTMLElement, zoom: number) {
-    const x = parseFloat(pill.style.left) || 0;
-    const y = parseFloat(pill.style.top) || 0;
+function updatePillCardLayout(ctx: CanvasContext, pill: HTMLElement, zoom: number, isChanged?: boolean) {
     const w = parseFloat(pill.style.width) || 580;
     const h = parseFloat(pill.style.height) || 700;
     const scale = getLowZoomScale(zoom);
+    const path = pill.dataset.path || '';
+    const canvas = pill.querySelector('.file-pill-canvas') as HTMLCanvasElement | null;
+    const file = (pill as any)._fileData || ctx.allFilesData?.find(f => f.path === path) || ctx.commitFilesData?.find(f => f.path === path) || null;
+    const changed = isChanged ?? pill.dataset.changed === 'true';
     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);
-    `;
-
-    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%);
-    `;
+    if (!canvas) return;
+
+    renderLowZoomPreviewCanvas(canvas, {
+        path,
+        file,
+        width: w,
+        height: h,
+        zoom,
+        scrollTop: getSavedScrollTop(ctx, path),
+        accentColor: getPillColor(path, changed),
+        isChanged: changed,
+    });
 }
 
 /**
@@ -356,7 +323,7 @@ export function performViewportCulling(ctx: CanvasContext) {
     // Phase 4c: also materialize deferred CardManager cards
     // Reuse zoom from worldRect (already snapped) — avoids redundant ctx.snap()
     const zoom = worldRect.zoom;
-    const isLowZoom = zoom <= LOD_ZOOM_THRESHOLD;
+    const isLowZoom = _detailMode === 'preview' || zoom <= LOD_ZOOM_THRESHOLD;
 
     // Important: never materialize full cards while in low-zoom pill mode.
     // Otherwise CardManager keeps mounting heavyweight cards right when the
@@ -471,10 +438,11 @@ export function performViewportCulling(ctx: CanvasContext) {
 
             if (inView && !pillCards.has(path)) {
                 const pill = createPillCard(ctx, file, path, x, y, cardW, cardH, !!isChanged, zoom, true);
+                if (isChanged) pill.dataset.changed = 'true';
                 ctx.canvas.appendChild(pill);
                 pillCards.set(path, pill);
             } else if (inView && pillCards.has(path)) {
-                updatePillCardLayout(pillCards.get(path)!, zoom);
+                updatePillCardLayout(ctx, pillCards.get(path)!, zoom, !!isChanged);
             } else if (!inView && pillCards.has(path)) {
                 removePillForPath(path);
             }
@@ -499,11 +467,12 @@ export function performViewportCulling(ctx: CanvasContext) {
                 if (inView) {
                     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);
+                    if (isChanged) pill.dataset.changed = 'true';
                     ctx.canvas.appendChild(pill);
                     pillCards.set(path, pill);
                 }
             } else {
-                updatePillCardLayout(pillCards.get(path)!, zoom);
+                updatePillCardLayout(ctx, pillCards.get(path)!, zoom, card.dataset.changed === 'true');
             }
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitmaps",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "type": "module",
   "bin": {
     "gitmaps": "cli.ts"
@@ -20,10 +20,12 @@
     "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:low-zoom": "bash scripts/browser-low-zoom-perf-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",
+    "bench:low-zoom": "bun scripts/low-zoom-preview-bench.ts",
     "prepublishOnly": "echo 'Publishing gitmaps to npm'"
   },
   "keywords": [