Improve video-log sync UX clarity (v0.7.1)

- Add help icon (ⓘ) with tooltip explaining the sync workflow
- Rename "Set from line" to "🔗 Sync line ↔ video time" with primary
  styling so the main action is obvious
- Better status messages with icons and color coding:
  - Success: ✓ green confirmation showing the line/time pairing
  - Errors: ⚠ amber warnings explaining what to do
- Reorder elements so the primary button is prominent
- Add local sidecar/agent state files to .gitignore

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

Author: ozgesolidkey

.gitignore

@@ -17,3 +17,12 @@ test-data/
 # IDE
 .idea/
 .vscode/
+
+# Local LOGAN sidecar / agent state
+.logan/
+nohup.out
+firebase-service-account.json
+scripts/__pycache__/
+scripts/*.pyc
+scripts/logan-agent.py
+scripts/poll_chat.py

package.json

@@ -1,6 +1,6 @@
 {
   "name": "logan",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "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

@@ -442,11 +442,11 @@ <h2>LOGAN</h2>
               </div>
             </div>
             <div class="video-sync-bar">
-              <label class="video-sync-label">Sync:</label>
-              <input type="text" id="video-sync-input" class="video-sync-input" placeholder="Log timestamp at video start" title="Enter the log timestamp that corresponds to video start (0:00)">
-              <button id="btn-video-sync-from-line" class="video-sync-btn" title="Sync selected line to current video time">Set from line</button>
-              <span id="video-file-name" class="video-file-name"></span>
+              <span class="video-sync-help" title="How to sync video and logs:&#10;1. Pause the video at a moment you can identify in the logs&#10;2. Click that line in the log viewer&#10;3. Click the 'Sync to video time' button below&#10;4. Now clicking any log line jumps the video to that moment">&#9432;</span>
+              <button id="btn-video-sync-from-line" class="video-sync-btn primary" title="Pair the currently selected log line with the current video time">&#128279; Sync line ↔ video time</button>
+              <input type="text" id="video-sync-input" class="video-sync-input" placeholder="or paste timestamp here" title="Enter the log timestamp that corresponds to video start (0:00)">
               <span id="video-sync-status" class="video-sync-status"></span>
+              <span id="video-file-name" class="video-file-name"></span>
             </div>
           </div>
         </div>

src/renderer/renderer.ts

@@ -7307,22 +7307,25 @@ function tryParseTimestamp(text: string): number | null {
 
 function setVideoSyncFromCurrentLine(): void {
   if (state.selectedLine === null) {
-    elements.videoSyncStatus.textContent = 'No line selected';
-    setTimeout(() => { elements.videoSyncStatus.textContent = ''; }, 3000);
+    elements.videoSyncStatus.textContent = '⚠ Click a log line first, then click this button';
+    elements.videoSyncStatus.style.color = '#ffb840';
+    setTimeout(() => { elements.videoSyncStatus.textContent = ''; elements.videoSyncStatus.style.color = ''; }, 5000);
     return;
   }
   window.api.getLineTimestamp(state.selectedLine).then((result) => {
     if (result.epochMs === null) {
-      elements.videoSyncStatus.textContent = 'No timestamp found';
-      setTimeout(() => { elements.videoSyncStatus.textContent = ''; }, 3000);
+      elements.videoSyncStatus.textContent = '⚠ No timestamp found in selected line';
+      elements.videoSyncStatus.style.color = '#ffb840';
+      setTimeout(() => { elements.videoSyncStatus.textContent = ''; elements.videoSyncStatus.style.color = ''; }, 5000);
       return;
     }
     const currentVideoTimeMs = (elements.videoElement.currentTime || 0) * 1000;
     state.videoSyncOffsetMs = result.epochMs - currentVideoTimeMs;
     elements.videoSyncInput.value = result.timestampStr || '';
     const videoTimeStr = formatVideoTime(elements.videoElement.currentTime || 0);
-    elements.videoSyncStatus.textContent = 'Sync set: line ' + (state.selectedLine! + 1) + ' → ' + videoTimeStr;
-    setTimeout(() => { elements.videoSyncStatus.textContent = ''; }, 3000);
+    elements.videoSyncStatus.textContent = '✓ Synced (line ' + (state.selectedLine! + 1) + ' = ' + videoTimeStr + '). Click any line to seek.';
+    elements.videoSyncStatus.style.color = '#4caf50';
+    setTimeout(() => { elements.videoSyncStatus.textContent = ''; elements.videoSyncStatus.style.color = ''; }, 6000);
     saveVideoState();
   });
 }

src/renderer/styles.css

@@ -5675,6 +5675,33 @@ kbd {
   color: #fff;
 }
 
+.video-sync-btn.primary {
+  background: var(--accent-color, #007acc);
+  color: #fff;
+  border-color: var(--accent-color, #007acc);
+}
+.video-sync-btn.primary:hover {
+  opacity: 0.9;
+  background: var(--accent-color, #007acc);
+}
+
+.video-sync-help {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-secondary);
+  font-size: 12px;
+  cursor: help;
+}
+.video-sync-help:hover {
+  background: rgba(255, 255, 255, 0.16);
+  color: var(--text-primary);
+}
+
 .video-sync-status {
   font-size: 11px;
   color: #888;