function updateSectionDisplay(bestMatch, poorMatch = null, insertionInfo = null) {
const el = deps.getEl();
const sectionDisplay = el.querySelector('#sectionInfoDisplay');
if (!sectionDisplay) return;
if (!bestMatch && insertionInfo && insertionInfo.type === 'options') {
// Show multiple options for 60-90% matches
const options = insertionInfo.options;
const selectedIndex = insertionInfo.selectedIndex || 0;
const selectedOption = options[selectedIndex];
let optionsHtml = options.map((opt, idx) => {
const scoreInfo = opt.score > 0 ? ` • ${(opt.score * 100).toFixed(0)}%` : '';
return `
<label style="
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: ${idx === selectedIndex ? '#4a5568' : '#2d2d2d'};
border-radius: 4px;
cursor: pointer;
transition: background 0.15s;
font-family: 'Segoe UI', sans-serif;
font-size: 12px;
" class="insertion-option" data-index="${idx}">
<input type="radio" name="insertionChoice" value="${idx}" ${idx === selectedIndex ? 'checked' : ''} style="
accent-color: #3b82f6;
">
<span style="font-size: 14px;">${opt.icon}</span>
<span style="color: #e0e0e0; flex: 1;">
${deps.escapeHtml(opt.label)}
<span style="color: #888; font-size: 11px;">${opt.detail}${scoreInfo}</span>
</span>
</label>
`;
}).join('');
sectionDisplay.innerHTML = `
<div style="flex: 1; display: flex; flex-direction: column; gap: 4px;">
<div style="
color: #fbbf24;
font-size: 13px;
font-weight: 600;
margin-bottom: 2px;
">⚠️ Multiple options found:</div>
${optionsHtml}
</div>
<button id="refreshSectionBtn" style="
padding: 4px 8px;
background: #3d3d3d;
border: 1px solid #555;
border-radius: 4px;
color: #e0e0e0;
cursor: pointer;
font-size: 12px;
font-family: 'Segoe UI', sans-serif;
align-self: flex-start;
">🔄 Detect</button>
`;
// Attach option selection handlers
setTimeout(() => {
const globalEditorInstance = deps.getGlobalEditor();
const session = globalEditorInstance.getSession();
const Range = ace.require('ace/range').Range;
const optionElements = sectionDisplay.querySelectorAll('.insertion-option');
optionElements.forEach((optEl, idx) => {
optEl.addEventListener('mouseenter', () => {
if (idx !== selectedIndex) {
optEl.style.background = '#3d3d3d';
}
});
optEl.addEventListener('mouseleave', () => {
if (idx !== selectedIndex) {
optEl.style.background = '#2d2d2d';
}
});
optEl.addEventListener('click', () => {
const option = options[idx];
// Update selection range based on option type
if (option.isReplacement) {
selectionRange = new Range(
option.row,
0,
option.endRow,
session.getLine(option.endRow).length
);
} else {
selectionRange = new Range(option.row, 0, option.row, 0);
}
// Re-render with new selection
updateSectionDisplay(null, poorMatch, {
...insertionInfo,
selectedIndex: idx
});
if (deps.showToast) {
deps.showToast(`📍 Selected: ${option.label}`, 'info');
}
});
});
}, 10);
if (deps.showToast && insertionInfo.selectedIndex === undefined) {
deps.showToast(`⚠️ ${(options[0].score * 100).toFixed(0)}% match - choose action`, 'warning');
}
}
else if (!bestMatch && insertionInfo && insertionInfo.options) {
// Smart insertion mode with options (from findSmartInsertionPoint)
const options = insertionInfo.options;
const selectedIndex = insertionInfo.selectedIndex || 0;
const selectedOption = options[selectedIndex];
let optionsHtml = options.map((opt, idx) => `
<label style="
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: ${idx === selectedIndex ? '#4a5568' : '#2d2d2d'};
border-radius: 4px;
cursor: pointer;
transition: background 0.15s;
font-family: 'Segoe UI', sans-serif;
font-size: 12px;
" class="insertion-option" data-index="${idx}">
<input type="radio" name="insertionChoice" value="${idx}" ${idx === selectedIndex ? 'checked' : ''} style="
accent-color: #3b82f6;
">
<span style="font-size: 14px;">${opt.icon}</span>
<span style="color: #e0e0e0;">${deps.escapeHtml(opt.label)}</span>
</label>
`).join('');
sectionDisplay.innerHTML = `
<div style="flex: 1; display: flex; flex-direction: column; gap: 4px;">
<div style="
color: #3b82f6;
font-size: 13px;
font-weight: 600;
margin-bottom: 2px;
">📍 Choose insertion point:</div>
${optionsHtml}
</div>
<button id="refreshSectionBtn" style="
padding: 4px 8px;
background: #3d3d3d;
border: 1px solid #555;
border-radius: 4px;
color: #e0e0e0;
cursor: pointer;
font-size: 12px;
font-family: 'Segoe UI', sans-serif;
align-self: flex-start;
">🔄 Detect</button>
`;
// Attach option selection handlers
setTimeout(() => {
const optionElements = sectionDisplay.querySelectorAll('.insertion-option');
optionElements.forEach((optEl, idx) => {
optEl.addEventListener('mouseenter', () => {
if (idx !== selectedIndex) {
optEl.style.background = '#3d3d3d';
}
});
optEl.addEventListener('mouseleave', () => {
if (idx !== selectedIndex) {
optEl.style.background = '#2d2d2d';
}
});
optEl.addEventListener('click', () => {
const globalEditorInstance = deps.getGlobalEditor();
const Range = ace.require('ace/range').Range;
// Update selection range
const option = options[idx];
selectionRange = new Range(option.row, 0, option.row, 0);
// Re-render with new selection
updateSectionDisplay(null, poorMatch, {
...insertionInfo,
selectedIndex: idx
});
if (deps.showToast) {
deps.showToast(`📍 Will insert ${option.label}`, 'info');
}
});
});
}, 10);
if (deps.showToast && insertionInfo.selectedIndex === undefined) {
deps.showToast(`📍 Choose where to insert content`, 'info');
}
} else if (!bestMatch && insertionInfo) {
// Legacy fallback (shouldn't hit this anymore)
sectionDisplay.innerHTML = `
<span style="font-size: 16px;">📍</span>
<span style="
flex: 1;
color: #3b82f6;
font-size: 14px;
font-family: 'Segoe UI', sans-serif;
font-weight: 500;
">Insert after line ${insertionInfo.row + 1} <span style="color: #888; font-size: 11px;">(${insertionInfo.contentType})</span></span>
<button id="refreshSectionBtn" style="
padding: 4px 8px;
background: #3d3d3d;
border: 1px solid #555;
border-radius: 4px;
color: #e0e0e0;
cursor: pointer;
font-size: 12px;
font-family: 'Segoe UI', sans-serif;
">🔄 Detect</button>
`;
if (deps.showToast) {
deps.showToast(`📍 Will insert after line ${insertionInfo.row + 1}`, 'info');
}
} else if (!bestMatch) {
// No good match
const poorInfo = poorMatch
? `<span style="color: #888; font-size: 11px;">(best: ${deps.escapeHtml(poorMatch.label)} ${(poorMatch.score * 100).toFixed(0)}%)</span>`
: '';
sectionDisplay.innerHTML = `
<span style="font-size: 16px;">❌</span>
<span style="
flex: 1;
color: #ef4444;
font-size: 14px;
font-family: 'Segoe UI', sans-serif;
font-weight: 500;
">No match found ${poorInfo}</span>
<button id="refreshSectionBtn" style="
padding: 4px 8px;
background: #3d3d3d;
border: 1px solid #555;
border-radius: 4px;
color: #e0e0e0;
cursor: pointer;
font-size: 12px;
font-family: 'Segoe UI', sans-serif;
">🔄 Detect</button>
`;
if (deps.showToast) {
deps.showToast('❌ No good match found', 'error');
}
} else {
// Good match (90%+)
const matchInfo = `H:${(bestMatch.headerScore * 100).toFixed(0)}% C:${(bestMatch.contentScore * 100).toFixed(0)}%`;
sectionDisplay.innerHTML = `
<span style="font-size: 16px;">${bestMatch.icon}</span>
<span style="
flex: 1;
color: #22c55e;
font-size: 14px;
font-family: 'Segoe UI', sans-serif;
font-weight: 500;
">Target: ${deps.escapeHtml(bestMatch.label)} <span style="color: #888; font-size: 11px;">(${(bestMatch.score * 100).toFixed(0)}% • ${matchInfo})</span></span>
<button id="refreshSectionBtn" style="
padding: 4px 8px;
background: #3d3d3d;
border: 1px solid #555;
border-radius: 4px;
color: #e0e0e0;
cursor: pointer;
font-size: 12px;
font-family: 'Segoe UI', sans-serif;
">🔄 Detect</button>
`;
if (deps.showToast) {
deps.showToast(`🎯 Target: ${bestMatch.label} (${(bestMatch.score * 100).toFixed(0)}%)`, 'success');
}
}
// Re-attach event listener for detect button
const refreshBtn = sectionDisplay.querySelector('#refreshSectionBtn');
if (refreshBtn) {
refreshBtn.addEventListener('click', detectTargetSection);
}
}