import { STATE } from '../core/State.js';
import { updateThreadColor, updateThreadVisibility } from '../visualizer/ThreadManager.js';
import { updateHUD } from './HUD.js';
export function updateThreadListUI() {
const ul = document.getElementById('thread-list-ul');
if (!ul) return;
ul.innerHTML = '';
STATE.threads.forEach((t, index) => {
const li = document.createElement('li');
li.className = 'list-item';
if (t.isGhost) {
li.style.borderColor = 'var(--color-brand-secondary)';
li.style.boxShadow = '0 0 8px oklch(from var(--color-brand-secondary) l c h / 0.2)';
}
const isFocused = STATE.focusedThreads.has(index);
const isHidden = STATE.hiddenThreads.has(index);
const hex = '#' + t.color.getHexString();
li.innerHTML = `
${t.label} ID: ${t.tokenID || 0}
0.00
`;
ul.appendChild(li);
});
// Attach color picker event listeners
ul.querySelectorAll('.thread-color-picker').forEach(input => {
input.oninput = (e) => {
const idx = parseInt(e.target.dataset.index);
const hex = e.target.value;
const thread = STATE.threads[idx];
if (thread) {
updateThreadColor(thread, hex);
}
};
});
// Focus state button listener
ul.querySelectorAll('.btn-focus').forEach(btn => {
btn.onclick = (e) => {
const idx = parseInt(e.currentTarget.dataset.index);
if (STATE.focusedThreads.has(idx)) {
STATE.focusedThreads.delete(idx);
} else {
STATE.focusedThreads.add(idx);
}
updateThreadListUI();
updateThreadVisibility();
};
});
// Visibility state button listener
ul.querySelectorAll('.btn-hide').forEach(btn => {
btn.onclick = (e) => {
const idx = parseInt(e.currentTarget.dataset.index);
if (STATE.hiddenThreads.has(idx)) {
STATE.hiddenThreads.delete(idx);
} else {
STATE.hiddenThreads.add(idx);
}
updateThreadListUI();
updateThreadVisibility();
};
});
}
export function displayHunterResults(matches) {
const container = document.getElementById('hunter-results');
if (!container) return;
container.innerHTML = '';
if (matches.length === 0) {
container.innerHTML = 'No matches found.';
return;
}
matches.forEach(m => {
const li = document.createElement('li');
li.className = 'list-item';
li.style.cssText = `
cursor: pointer; font-family: var(--font-mono); font-size: var(--font-size-small);
`;
li.innerHTML = `
DIM ${m.index}
${m.value.toFixed(3)}
`;
li.onclick = () => {
STATE.currentSelectedIndex = m.index;
updateHUD();
};
li.onmouseover = () => {
li.style.backgroundColor = 'oklch(from var(--color-brand-primary) l c h / 0.1)';
li.style.borderColor = 'var(--color-brand-primary)';
};
li.onmouseout = () => {
li.style.backgroundColor = 'oklch(from var(--color-neutral-50) l c h / 0.02)';
li.style.borderColor = 'oklch(from var(--color-neutral-50) l c h / 0.04)';
};
container.appendChild(li);
});
}
export function renderDemoBadge(containerTarget, customMessage) {
const el = typeof containerTarget === 'string' ? document.querySelector(containerTarget) : containerTarget;
if (!el) return;
const msg = customMessage || 'DEMO MODE (READ-ONLY) — This action is disabled in the public demo to ensure stability.';
const badgeHtml = `
🔒
${msg}
`;
el.insertAdjacentHTML('beforeend', badgeHtml);
}