Update index.html

index.html

@@ -73,6 +73,11 @@
   .block-title { font-family: -apple-system, Segoe UI, Roboto, sans-serif; font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
   .issue { background: #fff; border-left: 4px solid #ef4444; padding: 6px 8px; margin-bottom: 6px; border-radius: 4px; font-size: 13px; }
   .issue.ok { border-color: #16a34a; }
+  .issue[data-m] { cursor: pointer; transition: background .15s; }
+  .issue[data-m]:hover { background: #f1f5f9; }
+  .issue.active { background: #fef9c3; border-left-color: #f59e0b; }
+  @keyframes flash { 0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } 30% { box-shadow: 0 0 0 4px rgba(245,158,11,.7); background: #fde68a; } }
+  .err.flash { animation: flash 1.6s ease-out; }
   .issue .msg { font-weight: 600; }
   .issue .sugg { color: #16a34a; }
   .issue .ctx { color: #64748b; font-size: 12px; margin-top: 3px; }
@@ -541,7 +546,7 @@ function renderChunkResult(idx) {
       const end = Math.min(ch.text.length, m.offset + m.length + 25);
       const ctx = ch.text.substring(start, end).replace(/\n/g, ' ');
       const sugg = m.replacements.slice(0, 5).map(r => r.value).join(', ');
-      html += `<div class="issue">
+      html += `<div class="issue" data-chunk="${idx}" data-m="${i}" title="Показать в тексте">
         <div class="msg">${i+1}. ${escapeHtml(m.message)}</div>
         <div class="ctx">…${escapeHtml(ctx)}…</div>
         ${sugg ? `<div class="sugg">→ ${escapeHtml(sugg)}</div>` : ''}
@@ -573,7 +578,7 @@ function renderHighlighted() {
     } else if (!ch.done) {
       html += fmtSpan(ch.start, ch.end);
     } else {
-      html += highlightChunk(ch);
+      html += highlightChunk(ch, idx);
     }
     html += `</div>`;
   });
@@ -581,18 +586,18 @@ function renderHighlighted() {
   highlighted.scrollTop = keepScroll;
 }
 
-function highlightChunk(ch) {
+function highlightChunk(ch, ci) {
   const text = ch.text;
   const g = ch.start;
-  const matches = [...ch.matches].sort((a,b) => a.offset - b.offset);
+  const matches = ch.matches.map((m, i) => ({ m, i })).sort((a, b) => a.m.offset - b.m.offset);
   let out = '';
   let pos = 0;
-  for (const m of matches) {
+  for (const { m, i: mi } of matches) {
     if (m.offset < pos) continue;
     out += fmtSpan(g + pos, g + m.offset);
     const orig = text.substring(m.offset, m.offset + m.length);
     const sugg = m.replacements.length ? m.replacements[0].value : '';
-    out += `<span class="err" title="${escapeAttr(m.message)}${sugg ? ' → ' + escapeAttr(sugg) : ''}">${fmtSpan(g + m.offset, g + m.offset + m.length)}</span>`;
+    out += `<span class="err" data-mid="${ci}-${mi}" title="${escapeAttr(m.message)}${sugg ? ' → ' + escapeAttr(sugg) : ''}">${fmtSpan(g + m.offset, g + m.offset + m.length)}</span>`;
     if (sugg && sugg !== orig) {
       out += ` <span class="fix">[→ ${escapeHtml(sugg)}]</span> `;
     }
@@ -602,6 +607,44 @@ function highlightChunk(ch) {
   return out;
 }
 
+/* ---------- Клик по ошибке во 2-й колонке → переход к месту в тексте ---------- */
+results.addEventListener('click', e => {
+  const issue = e.target.closest('.issue[data-m]');
+  if (!issue) return;
+  jumpToMatch(+issue.dataset.chunk, +issue.dataset.m, issue);
+});
+
+function jumpToMatch(ci, mi, issueEl) {
+  const ch = chunks[ci];
+  const m = ch && ch.matches[mi];
+  if (!m) return;
+
+  results.querySelectorAll('.issue.active').forEach(x => x.classList.remove('active'));
+  if (issueEl) issueEl.classList.add('active');
+
+  syncing = true; // не даём синхронной прокрутке сдвинуть остальные колонки
+
+  // 3-я колонка: точно к нужному месту
+  const el = highlighted.querySelector(`[data-mid="${ci}-${mi}"]`);
+  if (el) {
+    const hr = highlighted.getBoundingClientRect();
+    const er = el.getBoundingClientRect();
+    highlighted.scrollTop += (er.top - hr.top) - highlighted.clientHeight / 3;
+    el.classList.remove('flash');
+    void el.offsetWidth;
+    el.classList.add('flash');
+  }
+
+  // 1-я колонка: по доле текста (приблизительно, но рядом с нужным местом)
+  const g = ch.start + m.offset;
+  const max = input.scrollHeight - input.clientHeight;
+  if (max > 0 && fullText.length) {
+    input.scrollTop = Math.max(0, (g / fullText.length) * input.scrollHeight - input.clientHeight / 3);
+  }
+
+  requestAnimationFrame(() => requestAnimationFrame(() => { syncing = false; }));
+}
+
 /* ---------- Прогон всех кусков ---------- */
 document.getElementById('btnRunAll').onclick = async () => {
   if (running) return;