@kylindc/ccxray 1.2.0

package/public/intercept-ui.js

@@ -0,0 +1,335 @@
+// ══════════════════════════════════════════════════════════════════════
+// ── Intercept Feature ──
+// ══════════════════════════════════════════════════════════════════════
+
+function toggleIntercept(sid) {
+  fetch('/_api/intercept/toggle', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sessionId: sid }) });
+}
+
+function approveIntercept() {
+  if (!currentPending) return;
+  const id = currentPending.requestId;
+  fetch('/_api/intercept/' + encodeURIComponent(id) + '/approve', {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ body: currentPending.body }),
+  });
+}
+
+function rejectIntercept() {
+  if (!currentPending) return;
+  const id = currentPending.requestId;
+  fetch('/_api/intercept/' + encodeURIComponent(id) + '/reject', { method: 'POST' });
+}
+
+// ── Intercept overlay rendering ──
+let interceptTab = 'messages';
+
+function showInterceptOverlay() {
+  if (!currentPending) return;
+  const body = currentPending.body;
+  const msgs = body.messages || [];
+  const tools = body.tools || [];
+  const model = body.model || '?';
+  const sid = currentPending.sessionId;
+  const shortSid = sid ? sid.slice(0, 8) : '?';
+
+  let msgCount = msgs.length;
+  let toolCount = tools.length;
+  // rough token estimate
+  let roughTokens = JSON.stringify(body).length / 4;
+
+  let html = '<div class="intercept-overlay" id="intercept-overlay">';
+
+  // Header
+  html += '<div class="intercept-header">';
+  html += '<span class="ih-title">⏸ Request Intercepted</span>';
+  html += '<span class="ih-session">session:' + escapeHtml(shortSid) + ' · ' + escapeHtml(model.replace('claude-', '')) + '</span>';
+  html += '</div>';
+
+  // Tabs
+  const tabs = [
+    { id: 'messages', label: 'Messages (' + msgCount + ')' },
+    { id: 'system', label: 'System' },
+    { id: 'tools', label: 'Tools (' + toolCount + ')' },
+    { id: 'model', label: 'Model' },
+    { id: 'raw', label: 'Raw JSON' },
+  ];
+  html += '<div class="intercept-tabs">';
+  for (const t of tabs) {
+    html += '<div class="intercept-tab' + (interceptTab === t.id ? ' active' : '') + '" onclick="switchInterceptTab(&quot;' + t.id + '&quot;)">' + t.label + '</div>';
+  }
+  html += '</div>';
+
+  // Editor area
+  html += '<div class="intercept-editor" id="intercept-editor">';
+  html += renderInterceptTabContent(interceptTab);
+  html += '</div>';
+
+  // Summary
+  html += '<div class="intercept-summary">' + msgCount + ' messages · ' + toolCount + ' tools · ~' + Math.round(roughTokens).toLocaleString() + ' tokens</div>';
+
+  // Countdown bar
+  html += '<div class="intercept-countdown"><div class="intercept-countdown-bar" id="intercept-countdown-bar"></div></div>';
+
+  // Actions
+  html += '<div class="intercept-actions">';
+  html += '<button class="btn-reject" onclick="rejectIntercept()">✕ Reject</button>';
+  html += '<button class="btn-approve" onclick="approveIntercept()">✓ Approve & Send</button>';
+  html += '</div>';
+
+  html += '</div>';
+  colDetail.innerHTML = html;
+  startCountdown();
+}
+
+function renderInterceptTabContent(tab) {
+  if (!currentPending) return '';
+  const body = currentPending.body;
+
+  switch (tab) {
+    case 'messages': {
+      const msgs = body.messages || [];
+      if (!msgs.length) return '<div style="color:var(--dim)">No messages</div>';
+      // Show in reverse order (newest first)
+      let html = '';
+      for (let i = msgs.length - 1; i >= 0; i--) {
+        const m = msgs[i];
+        const preview = getMessagePreview(m).slice(0, 60);
+        html += '<div class="ie-msg" data-msg-idx="' + i + '" onclick="toggleInterceptMsg(this,' + i + ',event)">';
+        html += '<div class="ie-msg-role ' + m.role + '">[' + i + '] ' + m.role + '</div>';
+        html += '<div class="ie-msg-preview">' + escapeHtml(preview) + '</div>';
+        html += '</div>';
+      }
+      return html;
+    }
+    case 'system': {
+      const sys = body.system;
+      const text = !sys ? '' : (typeof sys === 'string' ? sys : JSON.stringify(sys, null, 2));
+      return '<textarea id="ie-system-ta" oninput="onInterceptSystemEdit(this)" style="min-height:300px">' + escapeHtml(text) + '</textarea>';
+    }
+    case 'tools': {
+      const tools = body.tools || [];
+      if (!tools.length) return '<div style="color:var(--dim)">No tools</div>';
+      let html = '';
+      for (let i = 0; i < tools.length; i++) {
+        const t = tools[i];
+        const checked = t._enabled !== false ? ' checked' : '';
+        html += '<div class="ie-tool-item">';
+        html += '<input type="checkbox" id="ie-tool-' + i + '"' + checked + ' onchange="onInterceptToolToggle(' + i + ',this.checked)">';
+        html += '<label for="ie-tool-' + i + '">' + escapeHtml(t.name) + '</label>';
+        html += '</div>';
+      }
+      return html;
+    }
+    case 'model': {
+      const models = ['claude-opus-4-6','claude-sonnet-4-6','claude-haiku-4-5','claude-opus-4-5','claude-sonnet-4','claude-haiku-4'];
+      let html = '<div style="margin-bottom:8px;color:var(--dim);font-size:11px">Current model:</div>';
+      html += '<select id="ie-model-select" onchange="onInterceptModelChange(this.value)" style="min-width:200px">';
+      for (const m of models) {
+        const sel = body.model === m ? ' selected' : '';
+        html += '<option value="' + m + '"' + sel + '>' + m + '</option>';
+      }
+      // If current model not in list, add it
+      if (!models.includes(body.model)) {
+        html += '<option value="' + escapeHtml(body.model) + '" selected>' + escapeHtml(body.model) + '</option>';
+      }
+      html += '</select>';
+      return html;
+    }
+    case 'raw': {
+      const json = JSON.stringify(body, null, 2);
+      return '<textarea id="ie-raw-ta" oninput="onInterceptRawEdit(this)" style="min-height:400px;font-size:11px">' + escapeHtml(json) + '</textarea>';
+    }
+    default: return '';
+  }
+}
+
+function switchInterceptTab(tab) {
+  interceptTab = tab;
+  document.querySelectorAll('.intercept-tab').forEach(el => {
+    el.classList.toggle('active', el.textContent.toLowerCase().startsWith(tab));
+  });
+  const editor = document.getElementById('intercept-editor');
+  if (editor) editor.innerHTML = renderInterceptTabContent(tab);
+}
+
+function toggleInterceptMsg(el, idx, evt) {
+  // Don't collapse if user clicked inside the textarea (event bubbling)
+  if (evt && (evt.target.tagName === 'TEXTAREA' || evt.target.closest('textarea'))) return;
+  if (el.querySelector('textarea')) {
+    // Collapse
+    el.innerHTML = '<div class="ie-msg-role ' + currentPending.body.messages[idx].role + '">[' + idx + '] ' + currentPending.body.messages[idx].role + '</div>' +
+      '<div class="ie-msg-preview">' + escapeHtml(getMessagePreview(currentPending.body.messages[idx]).slice(0, 60)) + '</div>';
+    el.classList.remove('expanded');
+    return;
+  }
+  const m = currentPending.body.messages[idx];
+  const content = typeof m.content === 'string' ? m.content : JSON.stringify(m.content, null, 2);
+  el.classList.add('expanded');
+  el.innerHTML = '<div class="ie-msg-role ' + m.role + '">[' + idx + '] ' + m.role + '</div>' +
+    '<textarea oninput="onInterceptMsgEdit(' + idx + ',this)" style="min-height:150px">' + escapeHtml(content) + '</textarea>';
+}
+
+function onInterceptMsgEdit(idx, ta) {
+  if (!currentPending) return;
+  try {
+    currentPending.body.messages[idx].content = JSON.parse(ta.value);
+  } catch {
+    currentPending.body.messages[idx].content = ta.value;
+  }
+}
+
+function onInterceptSystemEdit(ta) {
+  if (!currentPending) return;
+  try {
+    currentPending.body.system = JSON.parse(ta.value);
+  } catch {
+    currentPending.body.system = ta.value;
+  }
+}
+
+function onInterceptToolToggle(idx, enabled) {
+  if (!currentPending) return;
+  if (enabled) {
+    delete currentPending.body.tools[idx]._enabled;
+  } else {
+    currentPending.body.tools[idx]._enabled = false;
+  }
+  // Remove disabled tools before sending
+}
+
+function onInterceptModelChange(model) {
+  if (!currentPending) return;
+  currentPending.body.model = model;
+}
+
+function onInterceptRawEdit(ta) {
+  if (!currentPending) return;
+  try {
+    currentPending.body = JSON.parse(ta.value);
+  } catch {
+    // invalid JSON, ignore
+  }
+}
+
+// Override approveIntercept to filter disabled tools
+const _origApprove = approveIntercept;
+approveIntercept = function() {
+  if (currentPending && currentPending.body.tools) {
+    currentPending.body.tools = currentPending.body.tools.filter(t => t._enabled !== false);
+    // Clean up _enabled markers
+    currentPending.body.tools.forEach(t => delete t._enabled);
+  }
+  _origApprove();
+};
+
+// ── Countdown ──
+function startCountdown() {
+  if (countdownInterval) clearInterval(countdownInterval);
+  countdownInterval = setInterval(updateCountdown, 1000);
+  updateCountdown();
+}
+
+function updateCountdown() {
+  if (!currentPending) {
+    if (countdownInterval) { clearInterval(countdownInterval); countdownInterval = null; }
+    return;
+  }
+  const elapsed = (Date.now() - currentPending.receivedAt) / 1000;
+  const remaining = Math.max(0, interceptTimeoutSec - elapsed);
+  const pct = remaining / interceptTimeoutSec * 100;
+  const bar = document.getElementById('intercept-countdown-bar');
+  if (bar) {
+    bar.style.width = pct + '%';
+    bar.style.backgroundColor = pct > 50 ? 'var(--green)' : pct > 20 ? 'var(--yellow)' : 'var(--red)';
+  }
+  // Update topbar held indicator
+  updateTopbarHeld(Math.ceil(remaining));
+}
+
+function updateTopbarHeld(remaining) {
+  const el = document.getElementById('topbar-held');
+  if (!el) return;
+  if (!currentPending) {
+    el.style.display = 'none';
+    return;
+  }
+  el.style.display = 'inline';
+  el.textContent = 'HELD (' + (remaining != null ? remaining + 's' : '?') + ')';
+  el.onclick = () => showInterceptOverlay();
+}
+
+function hideInterceptOverlay() {
+  if (countdownInterval) { clearInterval(countdownInterval); countdownInterval = null; }
+  currentPending = null;
+  const el = document.getElementById('intercept-overlay');
+  if (el) el.remove();
+  const held = document.getElementById('topbar-held');
+  if (held) held.style.display = 'none';
+  // Re-render detail
+  renderDetailCol();
+}
+
+// ── SSE handlers for intercept events ──
+const _origOnMessage = evtSource.onmessage;
+evtSource.onmessage = (ev) => {
+  try {
+    const data = JSON.parse(ev.data);
+    if (data._type === 'intercept_toggled') {
+      if (data.enabled) interceptSessionIds.add(data.sessionId);
+      else interceptSessionIds.delete(data.sessionId);
+      // Re-render affected session item
+      const sid = data.sessionId;
+      const sessEl = document.getElementById('sess-' + sid.slice(0, 8));
+      const sess = sessionsMap.get(sid);
+      if (sessEl && sess) {
+        const hadFocus = sessEl.contains(document.activeElement) && document.activeElement.classList.contains('sdot');
+        sessEl.innerHTML = renderSessionItem(sess, sid);
+        if (hadFocus) { const btn = sessEl.querySelector('.sdot'); if (btn) btn.focus(); }
+      }
+      return;
+    }
+    if (data._type === 'pending_request') {
+      currentPending = {
+        requestId: data.requestId,
+        sessionId: data.sessionId,
+        body: data.body,
+        receivedAt: Date.now(),
+      };
+      interceptTab = 'messages';
+      showInterceptOverlay();
+      const hSessEl = document.getElementById('sess-' + data.sessionId.slice(0, 8));
+      const hSess = sessionsMap.get(data.sessionId);
+      if (hSessEl && hSess) hSessEl.innerHTML = renderSessionItem(hSess, data.sessionId);
+      return;
+    }
+    if (data._type === 'intercept_removed') {
+      const prevSid = currentPending && currentPending.sessionId;
+      if (currentPending && currentPending.requestId === data.requestId) {
+        hideInterceptOverlay();
+      }
+      if (prevSid) {
+        const rSessEl = document.getElementById('sess-' + prevSid.slice(0, 8));
+        const rSess = sessionsMap.get(prevSid);
+        if (rSessEl && rSess) rSessEl.innerHTML = renderSessionItem(rSess, prevSid);
+      }
+      return;
+    }
+    if (data._type === 'intercept_timeout') {
+      interceptTimeoutSec = data.timeout;
+      return;
+    }
+    if (data._type === 'version_detected') {
+      updateSysPromptBadge(data.agentKey || 'claude-code');
+      const banner = document.getElementById('version-banner');
+      if (banner) {
+        banner.style.display = 'flex';
+        banner.className = 'version-banner';
+        banner.innerHTML = `<span class="vb-dot">●</span> New cc_version: <span class="vb-ver">${escapeHtml(data.version)}</span> <span class="vb-delta">(+${(data.b2Len/4).toFixed(0)} tok)</span> <span class="vb-view" onclick="openSystemPromptPanel(true)">view</span> <span class="vb-close" onclick="this.parentElement.style.display='none'">×</span>`;
+      }
+      return;
+    }
+  } catch {}
+  // Fall through to original handler
+  _origOnMessage(ev);
+};

package/public/keyboard-nav.js

@@ -0,0 +1,208 @@
+// ── Keyboard navigation ──
+document.addEventListener('keydown', (e) => {
+  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+  const key = e.key;
+
+  // Tab switching: 1=Dashboard, 2=Usage, 3=System Prompt
+  const tabMap = { '1': 'dashboard', '2': 'usage', '3': 'sysprompt' };
+  if (tabMap[key]) { switchTab(tabMap[key]); e.preventDefault(); return; }
+
+  // Focused mode intercept — takes priority over column navigation
+  if (isFocusedMode) {
+    if (key === 'Escape' || key === 'ArrowLeft') {
+      if (tlFilterActive) { closeTlFilter(); e.preventDefault(); return; }
+      exitFocusedMode(); e.preventDefault(); return;
+    }
+    // T11: open filter with /
+    if (key === '/' && selectedSection === 'timeline') { openTlFilter(); e.preventDefault(); return; }
+    // T12: step-type jump shortcuts
+    if (selectedSection === 'timeline' && !tlFilterActive) {
+      const dir = { 'e': ['error','next'], 'E': ['error','prev'], 't': ['thinking','next'], 'h': ['human','next'], ']': ['text','next'] }[key];
+      if (dir) { e.preventDefault(); jumpToStepType(dir[0], dir[1]); return; }
+    }
+    if ((key === 'ArrowUp' || key === 'ArrowDown') && selectedSection === 'timeline') {
+      e.preventDefault();
+      // Navigate between top-level steps (not sub-items within a step)
+      const all = [...colDetail.querySelectorAll('.tl-step-summary')];
+      if (!all.length) return;
+      // Build ordered list of unique step indices, preserving DOM order
+      const seen = new Set();
+      const steps = [];
+      for (const el of all) {
+        const s = el.dataset.step;
+        if (!seen.has(s)) { seen.add(s); steps.push(s); }
+      }
+      // Find current step
+      const curEl = colDetail.querySelector('.tl-step-summary.active');
+      const curStep = curEl ? curEl.dataset.step : null;
+      const curPos = curStep != null ? steps.indexOf(curStep) : -1;
+      const nextPos = Math.max(0, Math.min(steps.length - 1, curPos + (key === 'ArrowDown' ? 1 : -1)));
+      const nextStep = steps[nextPos];
+      // Click the first element of the target step
+      const target = colDetail.querySelector('.tl-step-summary[data-step="' + nextStep + '"]');
+      target?.click();
+      target?.scrollIntoView({ block: 'nearest' });
+      return;
+    }
+    // Navigate between sections while staying in focused mode
+    if (key === 'ArrowUp' || key === 'ArrowDown') {
+      e.preventDefault();
+      const sectionNames = [...colSections.querySelectorAll('.section-item')].map(el => el.dataset.section);
+      if (!sectionNames.length) return;
+      const cur = sectionNames.indexOf(selectedSection);
+      const next = Math.max(0, Math.min(sectionNames.length - 1, cur + (key === 'ArrowDown' ? 1 : -1)));
+      if (next === cur) return;
+      // Update section without exiting focused mode
+      selectedSection = sectionNames[next];
+      selectedMessageIdx = -1;
+      colSections.querySelectorAll('.section-item').forEach(el => {
+        el.classList.toggle('selected', el.dataset.section === selectedSection);
+      });
+      renderDetailCol();
+      renderBreadcrumb();
+      return;
+    }
+    return; // swallow other keys in focused mode
+  }
+
+  // Enter on sections → enter focused mode
+  if (key === 'Enter' && focusedCol === 'sections' && selectedSection) { enterFocusedMode(); e.preventDefault(); return; }
+  // T11: open filter in non-focused timeline view
+  if (key === '/' && selectedSection === 'timeline') { openTlFilter(); e.preventDefault(); return; }
+  if (!['ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(key)) return;
+  e.preventDefault();
+
+  if (focusedCol === 'projects') {
+    if (key === 'ArrowRight') { setFocus('sessions'); return; }
+    if (key === 'ArrowUp' || key === 'ArrowDown') {
+      // Build list from visible DOM items to respect active filter and sort order
+      const projItems = [null, ...[...colProjects.querySelectorAll('.project-item')].map(el => {
+        const m = el.getAttribute('onclick')?.match(/selectProject\((.+)\)/);
+        if (m) try { return JSON.parse(m[1].replace(/"/g, '"')); } catch(e) {}
+        return null;
+      }).filter(n => n !== null)];
+      const cur = projItems.indexOf(selectedProjectName);
+      const next = Math.max(0, Math.min(projItems.length - 1, cur + (key === 'ArrowDown' ? 1 : -1)));
+      if (next === cur) return;
+      selectProject(projItems[next]);
+    }
+  } else if (focusedCol === 'sessions') {
+    if (key === 'ArrowLeft') { setFocus('projects'); return; }
+    if (key === 'ArrowRight') { setFocus('turns'); return; }
+    const visibleSessEls = [...colSessions.querySelectorAll('.session-item')].filter(el => el.style.display !== 'none');
+    const sessIds = visibleSessEls.map(el => el.dataset.sessionId);
+    if (!sessIds.length) return;
+    const cur = selectedSessionId ? sessIds.indexOf(selectedSessionId) : sessIds.length - 1;
+    const next = Math.max(0, Math.min(sessIds.length - 1, cur + (key === 'ArrowDown' ? 1 : -1)));
+    selectSession(sessIds[next]);
+  } else if (focusedCol === 'turns') {
+    if (key === 'ArrowLeft') { setFocus('sessions'); return; }
+    if (key === 'ArrowRight' && selectedTurnIdx >= 0) { setFocus('sections'); return; }
+    if (key === 'ArrowUp' || key === 'ArrowDown') {
+      const visible = getVisibleTurnIndices();
+      if (!visible.length) return;
+      const cur = visible.indexOf(selectedTurnIdx);
+      const next = Math.max(0, Math.min(visible.length - 1, cur + (key === 'ArrowDown' ? 1 : -1)));
+      selectTurn(visible[next]);
+    }
+  } else if (focusedCol === 'sections') {
+    if (key === 'ArrowLeft') { setFocus('turns'); return; }
+    if (key === 'ArrowRight' && selectedSection) { enterFocusedMode(); return; }
+    if (key === 'ArrowUp' || key === 'ArrowDown') {
+      const sectionNames = [...colSections.querySelectorAll('.section-item')].map(el => el.dataset.section);
+      if (!sectionNames.length) return;
+      const cur = sectionNames.indexOf(selectedSection);
+      const next = Math.max(0, Math.min(sectionNames.length - 1, cur + (key === 'ArrowDown' ? 1 : -1)));
+      selectSection(sectionNames[next]);
+    }
+  }
+});
+
+// ── T11: Timeline Filter Bar ──────────────────────────────────────────────────
+let tlFilterActive = false;
+let tlFilterQuery = '';
+
+function openTlFilter() {
+  tlFilterActive = true;
+  const host = isFocusedMode ? colDetail : colDetail;
+  let bar = document.getElementById('tl-filter-bar');
+  if (!bar) {
+    bar = document.createElement('div');
+    bar.id = 'tl-filter-bar';
+    bar.style.cssText = 'position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--accent);padding:4px 8px;display:flex;align-items:center;gap:6px';
+    bar.innerHTML = '<span style="font-size:11px;color:var(--dim)">Filter:</span>'
+      + '<input id="tl-filter-input" type="text" placeholder="tool:Bash  status:fail"'
+      + ' style="flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:12px;font-family:monospace">'
+      + '<span id="tl-filter-count" style="font-size:10px;color:var(--dim)"></span>'
+      + '<button onclick="closeTlFilter()" style="background:none;border:none;color:var(--dim);cursor:pointer;font-size:12px;padding:0 2px">✕</button>';
+    host.prepend(bar);
+  }
+  bar.style.display = 'flex';
+  const inp = document.getElementById('tl-filter-input');
+  inp.value = tlFilterQuery;
+  inp.focus();
+  inp.oninput = function() { tlFilterQuery = inp.value; applyTlFilter(); };
+  inp.onkeydown = function(ev) {
+    if (ev.key === 'Escape') { closeTlFilter(); ev.preventDefault(); }
+    ev.stopPropagation();
+  };
+  applyTlFilter();
+}
+
+function closeTlFilter() {
+  tlFilterActive = false;
+  tlFilterQuery = '';
+  const bar = document.getElementById('tl-filter-bar');
+  if (bar) bar.style.display = 'none';
+  applyTlFilter();
+}
+
+function applyTlFilter() {
+  const q = tlFilterQuery.trim().toLowerCase();
+  const allStepEls = [...colDetail.querySelectorAll('.tl-step-summary')];
+  if (!q) {
+    allStepEls.forEach(function(el) { el.style.display = ''; });
+    const cnt = document.getElementById('tl-filter-count');
+    if (cnt) cnt.textContent = '';
+    return;
+  }
+  const toolMatch = (q.match(/\btool:(\S+)/) || [])[1];
+  const statusFail = /\bstatus:fail\b/.test(q);
+  let shown = 0;
+  allStepEls.forEach(function(el) {
+    let visible = true;
+    if (toolMatch) {
+      const nameEl = el.querySelector('.msg-list-row span:nth-child(2)');
+      visible = (nameEl ? nameEl.textContent.toLowerCase() : '').includes(toolMatch);
+    }
+    if (statusFail && visible) visible = el.dataset.hasError === '1';
+    el.style.display = visible ? '' : 'none';
+    if (visible) shown++;
+  });
+  const cnt = document.getElementById('tl-filter-count');
+  if (cnt) cnt.textContent = 'Showing ' + shown + ' of ' + allStepEls.length;
+}
+
+// ── T12: Step-type jump shortcuts ─────────────────────────────────────────────
+function jumpToStepType(type, dir) {
+  const allStepEls = [...colDetail.querySelectorAll('.tl-step-summary')];
+  if (!allStepEls.length) return;
+  const curEl = colDetail.querySelector('.tl-step-summary.active');
+  const curIdx = curEl ? allStepEls.indexOf(curEl) : -1;
+
+  const candidates = allStepEls.filter(function(el) {
+    if (type === 'error') return el.dataset.hasError === '1';
+    if (type === 'thinking') return el.textContent.trim().startsWith('🧠');
+    if (type === 'human') return el.querySelector('[style*="var(--accent)"]') !== null && el.querySelector('.msg-list-row') === null;
+    if (type === 'text') return el.querySelector('[style*="var(--green)"]') !== null && el.querySelector('.msg-list-row') === null;
+    return false;
+  });
+
+  if (!candidates.length) return;
+  const ci = candidates.indexOf(curEl);
+  const next = dir === 'next'
+    ? (ci < candidates.length - 1 ? ci + 1 : 0)
+    : (ci > 0 ? ci - 1 : candidates.length - 1);
+  const target = candidates[next];
+  if (target) { target.click(); target.scrollIntoView({ block: 'nearest' }); }
+}