Add minimap hover preview and visibility toggle (v0.7.3)

Minimap preview:
- Hover over the minimap to see a magnified preview of ~7 lines
  at that position, with the target line highlighted
- 80ms debounce for smooth performance, no API calls for cached lines
- Shows line numbers, truncated text, and current position

Settings:
- "Show minimap" toggle to completely hide/show the minimap
- "Hover preview" toggle to enable/disable the magnifier
- Both saved in localStorage and persist across sessions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ozgesolidkey

package.json

@@ -1,6 +1,6 @@
 {
   "name": "logan",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "AI-powered log file viewer and analyzer — handles 14M+ lines with virtual scrolling, MCP agent integration, live serial/logcat/SSH connections, pattern correlation, diff view, and built-in terminal",
   "keywords": [
     "log-analyzer",

src/renderer/index.html

@@ -1020,6 +1020,15 @@ <h3>Settings</h3>
             </label>
             <p class="hint">Automatically run analysis when a file is opened</p>
           </div>
+          <div class="settings-group">
+            <label class="checkbox-label">
+              <input type="checkbox" id="minimap-visible" checked> Show minimap
+            </label>
+            <label class="checkbox-label" style="margin-left: 16px;">
+              <input type="checkbox" id="minimap-preview-enabled" checked> Hover preview
+            </label>
+            <p class="hint">Toggle the minimap sidebar and its hover magnifier</p>
+          </div>
           <div class="settings-group">
             <label>Sidebar Sections</label>
             <div class="settings-checkboxes" id="sidebar-section-toggles">

src/renderer/renderer.ts

@@ -390,6 +390,8 @@ interface UserSettings {
   defaultFontSize: number;    // 10-20, pixels
   defaultGapThreshold: number; // 1-60, seconds
   autoAnalyze: boolean;
+  minimapVisible: boolean;
+  minimapPreview: boolean;
   theme: 'dark' | 'paper';
   sidebarSections: Record<string, boolean>; // section-id → visible
 }
@@ -409,6 +411,8 @@ const DEFAULT_SETTINGS: UserSettings = {
   defaultFontSize: 13,
   defaultGapThreshold: 5,
   autoAnalyze: false,
+  minimapVisible: true,
+  minimapPreview: true,
   theme: 'dark',
   sidebarSections: { ...DEFAULT_SIDEBAR_SECTIONS },
 };
@@ -815,6 +819,8 @@ const elements = {
   defaultGapThresholdSlider: document.getElementById('default-gap-threshold') as HTMLInputElement,
   defaultGapThresholdValue: document.getElementById('default-gap-threshold-value') as HTMLSpanElement,
   autoAnalyzeCheckbox: document.getElementById('auto-analyze') as HTMLInputElement,
+  minimapVisibleCheckbox: document.getElementById('minimap-visible') as HTMLInputElement,
+  minimapPreviewCheckbox: document.getElementById('minimap-preview-enabled') as HTMLInputElement,
   themeSelect: document.getElementById('theme-select') as HTMLSelectElement,
   btnResetSettings: document.getElementById('btn-reset-settings') as HTMLButtonElement,
   btnCloseSettings: document.getElementById('btn-close-settings') as HTMLButtonElement,
@@ -1952,6 +1958,12 @@ function createLogViewer(): void {
   minimapElement.appendChild(minimapContentElement);
   minimapElement.appendChild(minimapViewportElement);
 
+  // Minimap hover preview box
+  const previewEl = document.createElement('div');
+  previewEl.className = 'minimap-preview hidden';
+  previewEl.id = 'minimap-preview';
+  minimapElement.appendChild(previewEl);
+
   // Add to wrapper
   logViewerWrapper.appendChild(logViewerElement);
   logViewerWrapper.appendChild(minimapElement);
@@ -2016,6 +2028,8 @@ function createLogViewer(): void {
   }, { passive: false });
   minimapElement.addEventListener('click', handleMinimapClick);
   minimapElement.addEventListener('mousedown', handleMinimapDrag);
+  minimapElement.addEventListener('mousemove', handleMinimapHover);
+  minimapElement.addEventListener('mouseleave', hideMinimapPreview);
 
   // Use ResizeObserver for responsive updates
   const resizeObserver = new ResizeObserver(() => {
@@ -3274,6 +3288,65 @@ function handleMinimapClick(event: MouseEvent): void {
   logViewerElement.scrollTop = Math.max(0, targetScrollTop);
 }
 
+// ─── Minimap Hover Preview ──────────────────────────────────────────────
+
+let minimapPreviewTimer: ReturnType<typeof setTimeout> | null = null;
+let minimapPreviewLine = -1;
+
+function isMinimapPreviewEnabled(): boolean {
+  return userSettings.minimapPreview;
+}
+
+function handleMinimapHover(event: MouseEvent): void {
+  if (!minimapElement || isDraggingMinimap || !isMinimapPreviewEnabled()) return;
+
+  const rect = minimapElement.getBoundingClientRect();
+  const hoverY = event.clientY - rect.top;
+  const minimapHeight = minimapElement.clientHeight;
+  const totalLines = getTotalLines();
+  if (totalLines === 0) return;
+
+  const targetLine = Math.floor((hoverY / minimapHeight) * totalLines);
+  if (targetLine === minimapPreviewLine) return; // Same line, skip
+  minimapPreviewLine = targetLine;
+
+  // Debounce to avoid hammering getLines
+  if (minimapPreviewTimer) clearTimeout(minimapPreviewTimer);
+  minimapPreviewTimer = setTimeout(async () => {
+    const preview = document.getElementById('minimap-preview');
+    if (!preview) return;
+
+    const PREVIEW_LINES = 7;
+    const startLine = Math.max(0, targetLine - Math.floor(PREVIEW_LINES / 2));
+    const result = await window.api.getLines(startLine, PREVIEW_LINES);
+    if (!result.success || !result.lines?.length) {
+      preview.classList.add('hidden');
+      return;
+    }
+
+    let html = `<div class="minimap-preview-header">Line ${targetLine + 1}</div>`;
+    for (const line of result.lines) {
+      const isCurrent = line.lineNumber === targetLine;
+      const text = line.text.length > 120 ? line.text.substring(0, 120) + '...' : line.text;
+      html += `<div class="minimap-preview-line${isCurrent ? ' current' : ''}"><span class="minimap-preview-num">${line.lineNumber + 1}</span>${escapeHtml(text)}</div>`;
+    }
+    preview.innerHTML = html;
+
+    // Position: vertically centered on hover Y, to the left of the minimap
+    const previewHeight = Math.max(120, (PREVIEW_LINES + 1) * 16 + 8);
+    const top = Math.max(0, Math.min(hoverY - previewHeight / 2, minimapHeight - previewHeight));
+    preview.style.top = `${top}px`;
+    preview.classList.remove('hidden');
+  }, 80);
+}
+
+function hideMinimapPreview(): void {
+  if (minimapPreviewTimer) { clearTimeout(minimapPreviewTimer); minimapPreviewTimer = null; }
+  minimapPreviewLine = -1;
+  const preview = document.getElementById('minimap-preview');
+  if (preview) preview.classList.add('hidden');
+}
+
 let isDraggingMinimap = false;
 
 function handleMinimapDrag(_event: MouseEvent): void {
@@ -11929,6 +12002,9 @@ function setupActivityBar(): void {
     elements.defaultGapThresholdSlider.value = userSettings.defaultGapThreshold.toString();
     elements.defaultGapThresholdValue.textContent = `${userSettings.defaultGapThreshold}s`;
     elements.autoAnalyzeCheckbox.checked = userSettings.autoAnalyze;
+    elements.minimapVisibleCheckbox.checked = userSettings.minimapVisible;
+    elements.minimapPreviewCheckbox.checked = userSettings.minimapPreview;
+    if (minimapElement) minimapElement.style.display = userSettings.minimapVisible ? '' : 'none';
     elements.themeSelect.value = userSettings.theme;
     populateSidebarSectionToggles();
     // Load Datadog config
@@ -13155,6 +13231,19 @@ function init(): void {
     saveSettings();
   });
 
+  elements.minimapVisibleCheckbox.addEventListener('change', () => {
+    userSettings.minimapVisible = elements.minimapVisibleCheckbox.checked;
+    saveSettings();
+    if (minimapElement) minimapElement.style.display = userSettings.minimapVisible ? '' : 'none';
+    if (!userSettings.minimapVisible) hideMinimapPreview();
+  });
+
+  elements.minimapPreviewCheckbox.addEventListener('change', () => {
+    userSettings.minimapPreview = elements.minimapPreviewCheckbox.checked;
+    saveSettings();
+    if (!userSettings.minimapPreview) hideMinimapPreview();
+  });
+
   elements.themeSelect.addEventListener('change', () => {
     userSettings.theme = elements.themeSelect.value as 'dark' | 'paper';
     saveSettings();
@@ -13172,6 +13261,9 @@ function init(): void {
     elements.defaultGapThresholdSlider.value = userSettings.defaultGapThreshold.toString();
     elements.defaultGapThresholdValue.textContent = `${userSettings.defaultGapThreshold}s`;
     elements.autoAnalyzeCheckbox.checked = userSettings.autoAnalyze;
+    elements.minimapVisibleCheckbox.checked = userSettings.minimapVisible;
+    elements.minimapPreviewCheckbox.checked = userSettings.minimapPreview;
+    if (minimapElement) minimapElement.style.display = userSettings.minimapVisible ? '' : 'none';
     elements.themeSelect.value = userSettings.theme;
     applyTheme(userSettings.theme);
     populateSidebarSectionToggles();

src/renderer/styles.css

@@ -2893,6 +2893,54 @@ body.platform-darwin .titlebar {
   border-color: rgba(255, 255, 255, 0.5);
 }
 
+/* Minimap hover preview */
+.minimap-preview {
+  position: absolute;
+  right: 100%;
+  margin-right: 4px;
+  width: 450px;
+  max-width: 50vw;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  z-index: 100;
+  overflow: hidden;
+  pointer-events: none;
+}
+.minimap-preview.hidden { display: none; }
+.minimap-preview-header {
+  padding: 4px 8px;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-tertiary);
+}
+.minimap-preview-line {
+  padding: 1px 8px;
+  font-size: 11px;
+  font-family: var(--font-mono, monospace);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text-secondary);
+  line-height: 16px;
+}
+.minimap-preview-line.current {
+  background: rgba(255, 255, 0, 0.1);
+  color: var(--text-primary);
+  border-left: 2px solid var(--accent-color);
+}
+.minimap-preview-num {
+  display: inline-block;
+  width: 50px;
+  text-align: right;
+  margin-right: 8px;
+  color: var(--text-muted);
+  font-size: 10px;
+}
+
 /* Bookmark markers in minimap */
 .minimap-bookmark {
   position: absolute;