Replace annotation balloons with sidebar bar + activity panel

The old approach rendered complex balloon DOM per annotated line on every
scroll repaint, overlapping log content and adding render cost regardless
of whether the user cared about annotations at that moment.

New design — zero render-loop cost:
- Annotation bar: a fixed 190px panel to the right of the minimap.
  Cards are positioned proportionally to their line numbers (same math
  as minimap markers). A ◄ arrow on each card points to the target
  position. Cards show agent name + first line of text, click navigates.
  Minimum spacing prevents overlap. Hidden when no annotations.
- Annotations activity panel: new entry in the activity bar (speech
  bubble icon, count badge). Lists all annotations sorted by line number
  with severity-coloured left border and a clear-all button. Click any
  item to navigate.
- Render loop: replaced the per-line balloon structure with a single 7px
  gutter dot per annotated line — one div, no nesting, no pointer events.
  All the detail lives in the bar and panel, not in the scroll viewport.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ozgesolidkey

src/renderer/index.html

@@ -78,6 +78,10 @@
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="5" r="1.5"/><path d="M6 6q2 3 2 8"/><path d="M8 14q0-5 5-5t6 5"/><line x1="8" y1="14" x2="19" y2="14"/><path d="M19 14q2-3 3-6"/><line x1="10" y1="14" x2="10" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg>
             <span class="activity-badge" id="badge-history"></span>
           </button>
+          <button class="activity-bar-btn" data-panel="annotations" title="AI Annotations" data-help="AI agent comments and findings, linked to specific log lines.&#10;Click an annotation to jump to the line.">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" y1="10" x2="15" y2="10"/><line x1="9" y1="14" x2="13" y2="14"/></svg>
+            <span class="activity-badge" id="badge-annotations"></span>
+          </button>
           <div class="activity-bar-separator"></div>
           <button class="activity-bar-btn" data-bottom-tab="analysis" title="Analysis (Ctrl+6)">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"/><path d="M8.5 2h7"/><path d="M7 16h10"/></svg>
@@ -195,6 +199,15 @@
               <p class="placeholder">No activity recorded</p>
             </div>
           </div>
+          <div class="panel-view" id="panel-annotations" data-panel="annotations">
+            <div class="section-header-inline">
+              <span class="section-title">AI Annotations</span>
+              <button id="btn-clear-annotations" class="section-btn" title="Clear all annotations">&#128465;</button>
+            </div>
+            <div id="annotations-list" class="annotations-list-content">
+              <p class="placeholder">No annotations yet</p>
+            </div>
+          </div>
         </div>
       </div>
 

src/renderer/renderer.ts

@@ -1020,6 +1020,7 @@ let logViewerWrapper: HTMLDivElement | null = null;
 let minimapElement: HTMLDivElement | null = null;
 let minimapContentElement: HTMLDivElement | null = null;
 let minimapViewportElement: HTMLDivElement | null = null;
+let annotationBarElement: HTMLDivElement | null = null;
 let minimapData: Array<{ level: string | undefined }> = [];
 const MINIMAP_SAMPLE_RATE = 1000; // Sample every N lines for minimap
 
@@ -1970,9 +1971,18 @@ function createLogViewer(): void {
   minimapTooltip.id = 'minimap-tooltip';
   minimapElement.appendChild(minimapTooltip);
 
+  // Annotation bar — cards positioned proportionally, shown only when annotations exist
+  if (annotationBarElement) annotationBarElement.remove();
+  annotationBarElement = document.createElement('div');
+  annotationBarElement.className = 'annotation-bar';
+  if (!state.showAnnotations || state.annotations.length === 0) {
+    annotationBarElement.classList.add('hidden');
+  }
+
   // Add to wrapper
   logViewerWrapper.appendChild(logViewerElement);
   logViewerWrapper.appendChild(minimapElement);
+  logViewerWrapper.appendChild(annotationBarElement);
   elements.editorContainer.appendChild(logViewerWrapper);
 
   // Event listeners with passive flag for better scroll performance
@@ -2478,36 +2488,15 @@ function renderVisibleLines(): void {
 
       fragment.appendChild(lineElement);
 
-      // Agent annotation balloon (only when visible and annotations exist for this line)
+      // Lightweight annotation gutter dot — annotation detail lives in the bar and panel
       if (state.showAnnotations && state.annotationsByLine.size > 0) {
         const lineAnns = state.annotationsByLine.get(line.lineNumber);
         if (lineAnns) {
-          // Show a small indicator dot on the line + balloon on hover/always
-          const indicator = document.createElement('div');
-          indicator.className = 'annotation-indicator';
-          indicator.style.cssText = `position:absolute;right:44px;transform:translateY(${top}px);z-index:3;`;
-          indicator.dataset.lineNumber = String(line.lineNumber);
-
-          // Build balloon content (stacked if multiple)
-          let balloonHtml = '';
-          for (const ann of lineAnns) {
-            const sevClass = `severity-${ann.severity || 'info'}`;
-            balloonHtml += `<div class="annotation-balloon ${sevClass}">` +
-              `<span class="annotation-agent">${escapeHtml(ann.agentName)}</span>` +
-              `<span class="annotation-text">${escapeHtml(ann.text)}</span>` +
-              `</div>`;
-          }
-
-          const balloon = document.createElement('div');
-          balloon.className = 'annotation-balloon-container';
-          balloon.style.cssText = `position:absolute;right:48px;transform:translateY(${top - 4}px);z-index:10;`;
-          balloon.innerHTML = balloonHtml;
-
-          indicator.innerHTML = `<span class="annotation-dot severity-${lineAnns[0].severity || 'info'}">${lineAnns.length > 1 ? lineAnns.length : ''}</span>`;
-          indicator.title = lineAnns.map(a => `${a.agentName}: ${a.text}`).join('\n');
-
-          fragment.appendChild(indicator);
-          fragment.appendChild(balloon);
+          const dot = document.createElement('div');
+          dot.className = `annotation-gutter-dot severity-${lineAnns[0].severity || 'info'}`;
+          dot.style.cssText = `position:absolute;right:6px;transform:translateY(${top + (getLineHeight() - 8) / 2}px);z-index:3;`;
+          dot.title = lineAnns.map(a => `${a.agentName}: ${a.text}`).join('\n');
+          fragment.appendChild(dot);
         }
       }
 
@@ -6087,9 +6076,109 @@ function rebuildAnnotationIndex(): void {
   }
 }
 
+function renderAnnotationBar(): void {
+  if (!annotationBarElement) return;
+
+  const totalLines = getTotalLines();
+  const hasAnns = state.showAnnotations && state.annotations.length > 0 && totalLines > 0;
+
+  if (!hasAnns) {
+    annotationBarElement.classList.add('hidden');
+    annotationBarElement.innerHTML = '';
+    return;
+  }
+
+  annotationBarElement.classList.remove('hidden');
+  const barHeight = annotationBarElement.clientHeight || minimapElement?.clientHeight || 400;
+
+  // Sort by line number, then position with minimum spacing to avoid overlap
+  const sorted = [...state.annotations].sort((a, b) => a.lineNumber - b.lineNumber);
+  const MIN_GAP = 30;
+  const positions: number[] = [];
+  let prevBottom = -MIN_GAP;
+  for (const ann of sorted) {
+    const ideal = (ann.lineNumber / totalLines) * barHeight;
+    const top = Math.max(ideal, prevBottom + MIN_GAP);
+    positions.push(top);
+    prevBottom = top;
+  }
+
+  const frag = document.createDocumentFragment();
+  sorted.forEach((ann, i) => {
+    const card = document.createElement('div');
+    const sev = ann.severity || 'info';
+    card.className = `ann-bar-card severity-${sev}`;
+    card.style.top = `${positions[i]}px`;
+    card.title = `Line ${ann.lineNumber + 1} — ${ann.agentName}: ${ann.text}`;
+    card.dataset.lineNumber = String(ann.lineNumber);
+
+    const firstLine = ann.text.split('\n')[0];
+    const truncated = firstLine.length > 60 ? firstLine.slice(0, 58) + '…' : firstLine;
+
+    card.innerHTML =
+      `<div class="ann-bar-agent">${escapeHtml(ann.agentName)}</div>` +
+      `<div class="ann-bar-text">${escapeHtml(truncated)}</div>`;
+
+    card.addEventListener('click', () => {
+      const di = getFilteredDisplayIndex(ann.lineNumber);
+      goToLine(di >= 0 ? di : ann.lineNumber, ann.lineNumber);
+      renderVisibleLines();
+    });
+
+    frag.appendChild(card);
+  });
+
+  annotationBarElement.innerHTML = '';
+  annotationBarElement.appendChild(frag);
+}
+
+function renderAnnotationsPanel(): void {
+  const list = document.getElementById('annotations-list');
+  if (!list) return;
+
+  const badge = document.getElementById('badge-annotations');
+
+  if (state.annotations.length === 0) {
+    list.innerHTML = '<p class="placeholder">No annotations yet</p>';
+    if (badge) badge.textContent = '';
+    return;
+  }
+
+  if (badge) badge.textContent = String(state.annotations.length);
+
+  const sorted = [...state.annotations].sort((a, b) => a.lineNumber - b.lineNumber);
+  const frag = document.createDocumentFragment();
+
+  for (const ann of sorted) {
+    const sev = ann.severity || 'info';
+    const item = document.createElement('div');
+    item.className = `ann-panel-item severity-${sev}`;
+    item.dataset.lineNumber = String(ann.lineNumber);
+
+    item.innerHTML =
+      `<span class="ann-panel-line">L${ann.lineNumber + 1}</span>` +
+      `<div class="ann-panel-body">` +
+        `<span class="ann-panel-agent">${escapeHtml(ann.agentName)}</span>` +
+        `<span class="ann-panel-text">${escapeHtml(ann.text)}</span>` +
+      `</div>`;
+
+    item.addEventListener('click', () => {
+      const di = getFilteredDisplayIndex(ann.lineNumber);
+      goToLine(di >= 0 ? di : ann.lineNumber, ann.lineNumber);
+      renderVisibleLines();
+    });
+
+    frag.appendChild(item);
+  }
+
+  list.innerHTML = '';
+  list.appendChild(frag);
+}
+
 function toggleAnnotations(): void {
   state.showAnnotations = !state.showAnnotations;
   elements.btnAnnotationsToggle.classList.toggle('active', state.showAnnotations);
+  renderAnnotationBar();
   renderVisibleLines();
   renderMinimapMarkers();
 }
@@ -11915,13 +12004,14 @@ function formatBytes(bytes: number): string {
 
 // Sidebar toggle
 // Panel system
-const PANEL_IDS = ['folders', 'bookmarks', 'highlights', 'stats', 'history'];
+const PANEL_IDS = ['folders', 'bookmarks', 'highlights', 'stats', 'history', 'annotations'];
 const PANEL_NAMES: Record<string, string> = {
   'folders': 'Folders',
   'bookmarks': 'Bookmarks',
   'highlights': 'Highlights',
   'stats': 'Stats',
   'history': 'History',
+  'annotations': 'AI Annotations',
 };
 
 const BOTTOM_TAB_IDS = ['analysis', 'time-gaps', 'search-results', 'search-configs', 'video', 'live', 'notes'];
@@ -11970,6 +12060,11 @@ function openPanel(panelId: string): void {
     loadAndRenderHistory();
   }
 
+  // Render annotations panel on open
+  if (panelId === 'annotations') {
+    renderAnnotationsPanel();
+  }
+
   savePanelState();
 }
 
@@ -13075,9 +13170,16 @@ function init(): void {
   window.api.onAnnotationsChanged((anns: any[]) => {
     state.annotations = anns;
     rebuildAnnotationIndex();
+    renderAnnotationBar();
+    renderAnnotationsPanel();
     renderVisibleLines();
     renderMinimapMarkers();
   });
+
+  // Clear all annotations button
+  document.getElementById('btn-clear-annotations')?.addEventListener('click', async () => {
+    await window.api.clearAnnotations();
+  });
   // Launch/Stop agent button
   elements.chatLaunchAgent.addEventListener('click', toggleAgent);
   // Agent setup wizard