sensivity 2.5.44 → 2.5.46

package/public/js/app.js

@@ -1,107 +1,620 @@
 const SOCKET = (typeof io !== 'undefined') ? io() : null;
 let state = {}, currentSection = 0, currentSub = 0;
 let licenseAccepted = false, cheatRunning = false, listeningKeybind = null;
+let resourceList = [];
+let eventLogs = JSON.parse(localStorage.getItem('sensEventLogs') || '[]');
+let eventLogEnabled = false;
+let espSyncTimer = null;
+let startWatchTimer = null, startPending = false;
 
-function svgIcon(id, size) { size = size || 18; return `<svg width="${size}" height="${size}"><use href="#ic-${id}"></use></svg>`; }
+const SECTION_GROUPS = [
+  { label: 'AIMBOT', ids: ['aim'] },
+  { label: 'TOOLS', ids: ['misc'] },
+  { label: 'VISUALS', ids: ['visuals'] },
+  { label: 'PLAYERS', ids: ['playerlist', 'vehiclelist'] },
+  { label: 'WORLD', ids: ['world', 'settings', 'eventlog'] }
+];
+
+function svgIcon(id, size) {
+  size = size || 18;
+  return `<svg width="${size}" height="${size}"><use href="#ic-${id}"></use></svg>`;
+}
 
 function initState() {
   if (!SCHEMA) return;
-  SCHEMA.sections.forEach(s => { (s.subs || []).forEach(sub => { (sub.children || []).forEach(ch => { (ch.controls || []).forEach(c => {
-    if (!(c.key in state)) state[c.key] = c.type === 'color_checkbox' ? { value: c.def, color: [...(c.color || [1,1,1,1])] } : c.def;
-  });});});});
+  SCHEMA.sections.forEach(s => (s.subs || []).forEach(sub => (sub.children || []).forEach(ch => (ch.controls || []).forEach(c => {
+    if (!(c.key in state)) state[c.key] = c.type === 'color_checkbox' ? { value: c.def, color: [...(c.color || [1, 1, 1, 1])] } : c.def;
+  }))));
+}
+
+function sectionById(id) {
+  return SCHEMA.sections.findIndex(s => s.id === id);
+}
+
+function currentSubData() {
+  const s = SCHEMA.sections[currentSection];
+  return ((s && s.subs) || [])[currentSub] || ((s && s.subs) || [])[0];
 }
 
 function renderSidebar() {
   const el = document.getElementById('sidebar');
   if (!SCHEMA) return;
-  el.innerHTML = SCHEMA.sections.map((s, i) =>
-    `<button class="tab-btn${i===currentSection?' active':''}" onclick="setSection(${i})" title="${s.label}">${svgIcon(s.icon,19)}</button>`
-  ).join('');
+  const grouped = SECTION_GROUPS.map(group => {
+    const items = group.ids.map(id => {
+      const index = sectionById(id);
+      if (index < 0) return '';
+      const s = SCHEMA.sections[index];
+      return `<button class="tab-btn${index === currentSection ? ' active' : ''}" onclick="setSection(${index})" title="${s.label}">
+        <span class="tab-ico">${svgIcon(s.icon, 18)}</span>
+        <span class="tab-label">${s.label}</span>
+      </button>`;
+    }).join('');
+    return items ? `<div class="nav-group"><div class="nav-heading">${group.label}</div>${items}</div>` : '';
+  }).join('');
+
+  el.innerHTML = `
+    <div class="brand"><img src="/assets/logo.png" alt="Sensivity"><span>SENSIVITY</span></div>
+    <div class="nav-scroll">${grouped}</div>`;
 }
 
 function renderTopbar() {
-  const s = SCHEMA.sections[currentSection], subs = s.subs || [], sub = subs[currentSub] || subs[0];
+  const s = SCHEMA.sections[currentSection];
+  const subs = s.subs || [];
+  const sub = currentSubData();
   document.getElementById('topbar').innerHTML = `
-    ${sub&&sub.icon?`<span class="tb-icon">${svgIcon(sub.icon,16)}</span>`:''}
-    <span class="title">${s.label}</span><span class="sep">/</span><span class="sub">${sub?sub.label:''}</span>
-    ${subs.length>1?`<select onchange="setSub(this.value)">${subs.map((x,i)=>`<option value="${i}"${i===currentSub?' selected':''}>${x.label}</option>`).join('')}</select>`:''}`;
+    <div class="top-title">
+      <span class="tb-icon">${svgIcon((sub && sub.icon) || s.icon, 17)}</span>
+      <div>
+        <span class="top-primary">${s.label}</span>
+        <span class="top-secondary">${sub ? sub.label : ''}</span>
+      </div>
+    </div>
+    <div class="sub-tabs">
+      ${subs.map((x, i) => `<button class="sub-tab${i === currentSub ? ' active' : ''}" onclick="setSub(${i})">${x.label}</button>`).join('')}
+    </div>
+    <div class="profile-dot"><img src="/assets/logo.png" alt=""></div>`;
 }
 
 function renderPage() {
-  const sub = (SCHEMA.sections[currentSection].subs||[])[currentSub];
+  const sub = currentSubData();
   const pg = document.getElementById('pages');
-  if (!sub||!sub.children||!sub.children.length) { pg.innerHTML='<div class="child" style="grid-column:1/-1;text-align:center;padding:40px;color:var(--text3)">No settings</div>'; return; }
-  pg.innerHTML = sub.children.map(ch=>`<div class="child"><h3>${ch.label}</h3>${(ch.controls||[]).map(ctrl).join('')}</div>`).join('');
+  const showPreview = shouldShowEspPreview();
+  const workspace = document.getElementById('workspace');
+  if (workspace) workspace.classList.toggle('has-preview', showPreview);
+  if (!sub || !sub.children || !sub.children.length) {
+    pg.innerHTML = '<div class="child empty-state">No settings</div>';
+    renderEspPreviewShell(false);
+    return;
+  }
+
+  const children = sub.children.map(renderChild).join('');
+  pg.innerHTML = children;
+  renderEspPreviewShell(showPreview);
+}
+
+function renderChild(ch) {
+  const controls = ch.controls || [];
+  if (ch.id === 'worldTeleport') {
+    const left = controls.slice(0, 3);
+    const right = controls.slice(3);
+    return `<div class="child split-child world-teleport-card"><h3>${ch.label}</h3><div class="split-controls"><div class="split-left">${left.map(ctrl).join('')}</div><div class="split-right">${right.map(ctrl).join('')}</div></div></div>`;
+  }
+  if (ch.id === 'resCtl') {
+    return `<div class="child"><h3>${ch.label}</h3>${controls.map(ctrl).join('')}<div id="resource-list" class="res-list">${renderResources()}</div></div>`;
+  }
+  if (ch.id === 'evtControls') {
+    return `<div class="child"><h3>${ch.label}</h3>${controls.map(ctrl).join('')}<div id="event-log-container" class="evt-log">${renderEventLogs()}</div></div>`;
+  }
+  return `<div class="child"><h3>${ch.label}</h3>${controls.map(ctrl).join('')}</div>`;
+}
+
+function prettyLabel(key) {
+  return String(key).replace(/^Enable\s+/i, '').replace(/\s+ESP$/i, ' ESP');
 }
 
 function ctrl(c) {
-  const v = state[c.key], vs = c.type==='color_checkbox'?v?.value:v, id = 'c_'+c.key.replace(/[^a-zA-Z0-9]/g,'_');
-  switch(c.type) {
+  const v = state[c.key];
+  const vs = c.type === 'color_checkbox' ? v?.value : v;
+  const id = 'c_' + c.key.replace(/[^a-zA-Z0-9]/g, '_');
+  switch (c.type) {
     case 'checkbox':
-      return `<div class="ctrl"><label>${c.key}</label><label class="tgl"><input type="checkbox" id="${id}"${vs?' checked':''} onchange="set('${c.key}','checkbox',this.checked)"><span class="track"><span class="knob"></span></span></label></div>`;
+      return `<div class="ctrl"><label>${prettyLabel(c.key)}</label><label class="tgl"><input type="checkbox" id="${id}"${vs ? ' checked' : ''} onchange="set('${c.key}','checkbox',this.checked)"><span class="track"><span class="knob"></span></span></label></div>`;
     case 'slider_int':
-      return `<div class="ctrl"><label>${c.key}</label><div class="rng"><input type="range" id="${id}" min="${c.min||0}" max="${c.max||100}" value="${vs||0}" oninput="sliderUp('${c.key}','slider_int',this)"><span class="rng-val">${vs||0}</span></div></div>`;
+      return `<div class="ctrl range-ctrl"><label>${prettyLabel(c.key)}</label><div class="rng"><span class="rng-val">${vs || 0}</span><input type="range" id="${id}" min="${c.min || 0}" max="${c.max || 100}" value="${vs || 0}" style="--range-percent:${rangePercent(c, vs || 0)}%" oninput="sliderUp('${c.key}','slider_int',this)"></div></div>`;
     case 'slider_float':
-      return `<div class="ctrl"><label>${c.key}</label><div class="rng"><input type="range" id="${id}" min="${c.min||0}" max="${c.max||100}" step="${c.step||0.1}" value="${vs||0}" oninput="sliderUp('${c.key}','slider_float',this)"><span class="rng-val">${parseFloat(vs||0).toFixed(1)}</span></div></div>`;
+      return `<div class="ctrl range-ctrl"><label>${prettyLabel(c.key)}</label><div class="rng"><span class="rng-val">${parseFloat(vs || 0).toFixed(1)}</span><input type="range" id="${id}" min="${c.min || 0}" max="${c.max || 100}" step="${c.step || 0.1}" value="${vs || 0}" style="--range-percent:${rangePercent(c, vs || 0)}%" oninput="sliderUp('${c.key}','slider_float',this)"></div></div>`;
     case 'dropdown':
-      return `<div class="ctrl"><label>${c.key}</label><select id="${id}" onchange="set('${c.key}','dropdown',this.selectedIndex)">${(c.items||[]).map((x,i)=>`<option value="${i}"${i===vs?' selected':''}>${x}</option>`).join('')}</select></div>`;
-    case 'color_checkbox':{
-      const clr = v?.color||[1,1,1,1], hex = '#'+clr.slice(0,3).map(x=>('0'+Math.round(x*255).toString(16)).slice(-2)).join('');
-      return `<div class="ctrl"><label>${c.key}</label><label class="tgl"><input type="checkbox"${v?.value?' checked':''} onchange="set('${c.key}','color_checkbox',{value:this.checked,color:(state['${c.key}']?.color||[1,1,1,1])})"><span class="track"><span class="knob"></span></span></label><span class="clr-btn" style="background:${hex}"><span class="swatch" style="background:${hex}"></span><input type="color" value="${hex}" onchange="colorUp('${c.key}',this.value)"></span></div>`;}
+      return `<div class="ctrl"><label>${prettyLabel(c.key)}</label><select id="${id}" onchange="set('${c.key}','dropdown',this.selectedIndex)">${(c.items || []).map((x, i) => `<option value="${i}"${i === vs ? ' selected' : ''}>${x}</option>`).join('')}</select></div>`;
+    case 'color_checkbox': {
+      const clr = v?.color || [1, 1, 1, 1], hex = colorToHex(clr);
+      return `<div class="ctrl color-row"><label>${prettyLabel(c.key)}</label><div class="color-actions"><label class="tgl"><input type="checkbox"${v?.value ? ' checked' : ''} onchange="set('${c.key}','color_checkbox',{value:this.checked,color:(state['${c.key}']?.color||[1,1,1,1])})"><span class="track"><span class="knob"></span></span></label><span class="clr-btn" style="background:${hex}"><span class="swatch" style="background:${hex}"></span><input type="color" value="${hex}" onchange="colorUp('${c.key}',this.value)"></span></div></div>`;
+    }
     case 'keybind':
-      return `<div class="ctrl"><label>${c.key}</label><button class="key-btn${listeningKeybind===c.key?' listening':''}" id="${id}" onclick="keyStart('${c.key}')">${vkName(vs||0)}</button></div>`;
-  }return '';
+      return `<div class="ctrl"><label>${prettyLabel(c.key)}</label><button class="key-btn${listeningKeybind === c.key ? ' listening' : ''}" id="${id}" onclick="keyStart('${c.key}')">${vkName(vs || 0)}</button></div>`;
+    case 'action':
+      return `<div class="ctrl action-row"><label>${c.label || prettyLabel(c.key)}</label><button class="key-btn action-btn" id="${id}" onclick="runAction('${c.action || c.key}')">${c.button || 'Run'}</button></div>`;
+  }
+  return '';
+}
+
+function set(k, t, v) {
+  if (t === 'color_checkbox') {
+    state[k] = state[k] || { value: false, color: [1, 1, 1, 1] };
+    if (typeof v === 'object') state[k] = v;
+  } else state[k] = v;
+  if (k === 'Event Logger Enable') eventLogEnabled = !!v;
+  if (shouldAutoEnablePlayerEsp(k, t, state[k])) {
+    state['Enable ESP'] = true;
+    emit('Enable ESP', 'checkbox', true);
+  }
+  emit(k, t, state[k]);
+  queuePlayerEspSync(k);
+  rerender();
+}
+
+function sliderUp(k, t, el) {
+  const v = t === 'slider_int' ? parseInt(el.value) : parseFloat(el.value);
+  state[k] = v;
+  el.previousElementSibling.textContent = t === 'slider_int' ? v : v.toFixed(1);
+  updateRangeFill(el);
+  emit(k, t, v);
+  queuePlayerEspSync(k);
+  if (shouldShowEspPreview()) updateEspPreview();
+}
+
+function colorUp(k, hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255, g = parseInt(hex.slice(3, 5), 16) / 255, b = parseInt(hex.slice(5, 7), 16) / 255;
+  const cur = state[k] || { value: false, color: [1, 1, 1, 1] };
+  cur.color = [r, g, b, cur.color[3] || 1];
+  state[k] = cur;
+  emit(k, 'color_checkbox', cur);
+  queuePlayerEspSync(k);
+  rerender();
+}
+
+function emit(k, t, v) {
+  if (SOCKET && SOCKET.connected) SOCKET.emit('setConfig', { key: k, type: t, value: v });
+}
+
+function runAction(action) {
+  if (!SOCKET || !SOCKET.connected) {
+    showPanelDebug('Panel connection unavailable');
+    return;
+  }
+  if (action === 'refreshResources') { refreshResources(); return; }
+  if (action === 'eventClearLogs') { clearLogs(); return; }
+  if (action === 'eventExportLogs') { exportLogs(); return; }
+  if (action === 'resourceStartAll' || action === 'resourceStopAll') {
+    SOCKET.emit('performAction', { action });
+    setTimeout(() => refreshResources(), 2000);
+    return;
+  }
+  SOCKET.emit('performAction', { action });
+}
+
+function rangePercent(c, value) {
+  const min = Number(c.min || 0);
+  const max = Number(c.max || 100);
+  const val = Number(value || 0);
+  if (max <= min) return 0;
+  return Math.max(0, Math.min(100, ((val - min) / (max - min)) * 100)).toFixed(2);
+}
+
+function updateRangeFill(el) {
+  const min = Number(el.min || 0);
+  const max = Number(el.max || 100);
+  const val = Number(el.value || 0);
+  const pct = max <= min ? 0 : Math.max(0, Math.min(100, ((val - min) / (max - min)) * 100));
+  el.style.setProperty('--range-percent', pct.toFixed(2) + '%');
+}
+
+function visualPlayerControls() {
+  const visuals = SCHEMA.sections.find(s => s.id === 'visuals');
+  const player = visuals && (visuals.subs || []).find(sub => sub.id === 'vplayer');
+  if (!player) return [];
+  return (player.children || []).flatMap(ch => ch.controls || []);
+}
+
+function shouldAutoEnablePlayerEsp(key, type, value) {
+  if (key === 'Enable ESP' || type !== 'color_checkbox') return false;
+  if (!visualPlayerControls().some(c => c.key === key)) return false;
+  return !!(value && value.value) && !state['Enable ESP'];
+}
+
+function queuePlayerEspSync(changedKey) {
+  const controls = visualPlayerControls();
+  if (!controls.some(c => c.key === changedKey)) return;
+  clearTimeout(espSyncTimer);
+  espSyncTimer = setTimeout(() => {
+    controls.forEach(c => {
+      if (state[c.key] !== undefined) emit(c.key, c.type, state[c.key]);
+    });
+  }, 35);
+}
+
+function setSection(i) {
+  currentSection = i;
+  currentSub = 0;
+  rerender();
+}
+
+function setSub(i) {
+  currentSub = parseInt(i, 10);
+  rerender();
+}
+
+function rerender() {
+  renderSidebar();
+  renderTopbar();
+  renderPage();
+}
+
+function vkName(vk) {
+  const m = { 0: 'None', 1: 'LMB', 2: 'RMB', 4: 'MMB', 5: 'XB1', 6: 'XB2', 8: 'Back', 9: 'Tab', 13: 'Enter', 16: 'Shift', 17: 'Ctrl', 18: 'Alt', 20: 'Caps', 27: 'Esc', 32: 'Space', 33: 'PgUp', 34: 'PgDn', 37: 'Left', 38: 'Up', 39: 'Right', 40: 'Down', 44: 'PrtSc', 45: 'Ins', 46: 'Del', 160: 'LShift', 161: 'RShift', 162: 'LCtrl', 163: 'RCtrl', 164: 'LAlt', 165: 'RAlt' };
+  for (let i = 48; i <= 57; i++) m[i] = String(i - 48);
+  for (let i = 65; i <= 90; i++) m[i] = String.fromCharCode(i);
+  for (let i = 96; i <= 105; i++) m[i] = 'Num' + String(i - 96);
+  for (let i = 112; i <= 135; i++) m[i] = 'F' + (i - 111);
+  return m[vk] || ('VK' + vk);
 }
 
-function set(k,t,v){ if(t==='color_checkbox'){state[k]=state[k]||{value:false,color:[1,1,1,1]};if(typeof v==='object')state[k]=v;}else state[k]=v; emit(k,t,state[k]); rerender(); }
-function sliderUp(k,t,el){ const v=t==='slider_int'?parseInt(el.value):parseFloat(el.value); state[k]=v; el.nextElementSibling.textContent=t==='slider_int'?v:v.toFixed(1); emit(k,t,v); }
-function colorUp(k,hex){ const r=parseInt(hex.slice(1,3),16)/255,g=parseInt(hex.slice(3,5),16)/255,b=parseInt(hex.slice(5,7),16)/255; const cur=state[k]||{value:false,color:[1,1,1,1]}; cur.color=[r,g,b,cur.color[3]||1]; state[k]=cur; emit(k,'color_checkbox',cur); rerender(); }
-function emit(k,t,v){ if(SOCKET&&SOCKET.connected) SOCKET.emit('setConfig',{key:k,type:t,value:v}); }
-function setSection(i){ currentSection=i;currentSub=0;rerender(); } function setSub(i){ currentSub=parseInt(i);rerender(); }
+function keyStart(key) {
+  if (listeningKeybind === key) {
+    listeningKeybind = null;
+    rerender();
+    return;
+  }
+  listeningKeybind = key;
+  rerender();
+}
+
+function submitLicense() {
+  const k = document.getElementById('license-key').value.trim();
+  if (!k) return;
+  const b = document.getElementById('license-btn'), m = document.getElementById('license-msg');
+  b.disabled = true;
+  b.textContent = 'Checking...';
+  m.textContent = '';
+  m.className = 'msg';
+  if (SOCKET) SOCKET.emit('checkLicense', k);
+}
 
-function rerender(){ renderSidebar();renderTopbar();renderPage(); }
+document.addEventListener('keydown', function(e) {
+  if (!listeningKeybind) return;
+  e.preventDefault();
+  set(listeningKeybind, 'keybind', e.keyCode);
+  listeningKeybind = null;
+  rerender();
+});
 
-function vkName(vk){
-  const m={0:'None',1:'LMB',2:'RMB',4:'MMB',5:'XB1',6:'XB2',8:'Back',9:'Tab',13:'Enter',16:'Shift',17:'Ctrl',18:'Alt',20:'Caps',27:'Esc',32:'Space',33:'PgUp',34:'PgDn',37:'Left',38:'Up',39:'Right',40:'Down',44:'PrtSc',45:'Ins',46:'Del',160:'LShift',161:'RShift',162:'LCtrl',163:'RCtrl',164:'LAlt',165:'RAlt'};
-  for(let i=48;i<=57;i++)m[i]=String(i-48); for(let i=65;i<=90;i++)m[i]=String.fromCharCode(i);
-  for(let i=96;i<=105;i++)m[i]='Num'+String(i-96); for(let i=112;i<=135;i++)m[i]='F'+(i-111);
-  return m[vk]||('VK'+vk);
+document.addEventListener('mousedown', function(e) {
+  if (!listeningKeybind) return;
+  e.preventDefault();
+  set(listeningKeybind, 'keybind', { 0: 1, 1: 4, 2: 2 }[e.button] || 0);
+  listeningKeybind = null;
+  rerender();
+});
+
+function toggleCheat() {
+  if (!SOCKET) return;
+  const eventName = cheatRunning ? 'stopCheat' : 'startCheat';
+  if (eventName === 'startCheat') beginPanelStartWatch();
+  else clearPanelStartWatch();
+  SOCKET.emit(eventName);
+  if (!SOCKET.connected && typeof SOCKET.connect === 'function') {
+    showPanelDebug('Panel reconnecting before start');
+    SOCKET.connect();
+  }
 }
 
-function keyStart(key){ if(listeningKeybind===key){listeningKeybind=null;rerender();return;} listeningKeybind=key;rerender(); }
-function submitLicense(){ const k=document.getElementById('license-key').value.trim(); if(!k)return; const b=document.getElementById('license-btn'),m=document.getElementById('license-msg'); b.disabled=true;b.textContent='Checking...';m.textContent='';m.className='msg'; if(SOCKET)SOCKET.emit('checkLicense',k); }
+function beginPanelStartWatch() {
+  startPending = true;
+  clearTimeout(startWatchTimer);
+  clearPanelDebug();
+  updateStatus();
+  startWatchTimer = setTimeout(() => {
+    if (startPending && !cheatRunning) showPanelDebug('Program start did not confirm');
+  }, 90000);
+}
 
-document.addEventListener('keydown',function(e){ if(!listeningKeybind)return; e.preventDefault(); set(listeningKeybind,'keybind',e.keyCode); listeningKeybind=null;rerender(); });
-document.addEventListener('mousedown',function(e){ if(!listeningKeybind)return; e.preventDefault(); set(listeningKeybind,'keybind',{0:1,1:4,2:2}[e.button]||0); listeningKeybind=null;rerender(); });
+function clearPanelStartWatch() {
+  startPending = false;
+  clearTimeout(startWatchTimer);
+  startWatchTimer = null;
+}
 
-function toggleCheat(){ if(!SOCKET||!SOCKET.connected)return; SOCKET.emit(cheatRunning?'stopCheat':'startCheat'); }
-function updateStatus(){ const d=document.getElementById('status-dot'),t=document.getElementById('status-text'),b=document.getElementById('cheat-btn'); if(cheatRunning){ d.className='s-dot live';t.textContent='Cheat running';b.textContent='Stop';b.className='s-btn stop';}else{ d.className='s-dot';t.textContent='Ready';b.textContent='Start Cheat';b.className='s-btn';} }
+function showPanelDebug(message) {
+  const el = document.getElementById('debug-toast');
+  if (!el) return;
+  el.textContent = message;
+  el.classList.add('show');
+}
 
-if(SOCKET){ SOCKET.on('connect',()=>{fetch('/api/url').then(r=>r.json()).then(d=>{if(d.url)document.getElementById('s-url').textContent=d.url}).catch(()=>{});}); SOCKET.on('licenseResult',(r)=>{ const b=document.getElementById('license-btn'),m=document.getElementById('license-msg'); b.disabled=false;b.textContent='Authenticate'; if(r.ok){ licenseAccepted=true; m.textContent=r.message||'Accepted';m.className='msg ok'; document.getElementById('cheat-btn').disabled=false; setTimeout(()=>{document.getElementById('license-overlay').style.display='none';rerender();},300); }else{ m.textContent=r.message||'Invalid key';m.className='msg err'; } }); SOCKET.on('configSync',(c)=>{Object.assign(state,c);rerender();}); SOCKET.on('status',(s)=>{cheatRunning=s.running;updateStatus();}); SOCKET.on('killed',()=>{document.body.innerHTML='<div style="display:flex;align-items:center;justify-content:center;height:100vh;color:var(--danger);font-size:18px;font-family:var(--font)">Sensivity Terminated</div>';}); SOCKET.on('ytTrigger',(d)=>{const el=document.getElementById('qr-overlay');if(d.active){el.classList.add('show');document.getElementById('qr-url').textContent=d.url;document.getElementById('qr-img').src='/api/qr.png?'+Date.now();}else{el.classList.remove('show');}}); }
+function clearPanelDebug() {
+  const el = document.getElementById('debug-toast');
+  if (!el) return;
+  el.textContent = '';
+  el.classList.remove('show');
+}
 
-function killSensivity(){ if(!SOCKET||!SOCKET.connected)return; SOCKET.emit('killSensivity'); }
+function updateStatus() {
+  const d = document.getElementById('status-dot'), t = document.getElementById('status-text'), b = document.getElementById('cheat-btn');
+  if (startPending && !cheatRunning) {
+    d.className = 's-dot live';
+    t.textContent = 'Sensivity Starting...';
+    b.textContent = 'Starting...';
+    b.className = 's-btn';
+    b.disabled = true;
+  } else if (cheatRunning) {
+    d.className = 's-dot live';
+    t.textContent = 'Running';
+    b.textContent = 'Stop';
+    b.className = 's-btn stop';
+    b.disabled = false;
+  } else {
+    d.className = 's-dot';
+    t.textContent = 'Ready';
+    b.textContent = 'Start';
+    b.className = 's-btn';
+    b.disabled = !licenseAccepted;
+  }
+}
+
+function colorToHex(color) {
+  return '#' + (color || [1, 1, 1]).slice(0, 3).map(x => ('0' + Math.round(Math.max(0, Math.min(1, x)) * 255).toString(16)).slice(-2)).join('');
+}
+
+function ctrlValue(key) {
+  const v = state[key];
+  return v && typeof v === 'object' && 'value' in v ? v.value : v;
+}
+
+function ctrlColor(key, fallback) {
+  return colorToHex((state[key] && state[key].color) || fallback || [1, 1, 1, 1]);
+}
+
+function shouldShowEspPreview() {
+  const section = SCHEMA.sections[currentSection];
+  const sub = currentSubData();
+  return section && section.id === 'visuals' && sub && sub.id === 'vplayer';
+}
+
+function renderEspPreviewCard() {
+  return `<div class="esp-preview-panel"><h3>Live Preview</h3><div class="esp-stage" id="esp-stage">${espPreviewMarkup()}</div></div>`;
+}
+
+function renderEspPreviewShell(showPreview) {
+  const shell = document.getElementById('esp-preview-shell');
+  if (!shell) return;
+  shell.innerHTML = showPreview ? renderEspPreviewCard() : '';
+}
+
+function updateEspPreview() {
+  const stage = document.getElementById('esp-stage');
+  if (stage) stage.innerHTML = espPreviewMarkup();
+}
+
+function placementClass(key) {
+  const map = ['bottom', 'top', 'left-upper', 'right-upper', 'left-lower', 'right-lower'];
+  return map[Number(state[key] || 0)] || 'bottom';
+}
+
+function espPreviewMarkup() {
+  const espOn = !!ctrlValue('Enable ESP');
+  const boxOn = !!ctrlValue('Enable Box ESP');
+  const skeletonOn = !!ctrlValue('Enable Skeleton ESP');
+  const headOn = !!ctrlValue('Enable Head ESP');
+  const lineOn = !!ctrlValue('Enable Line ESP');
+  const healthOn = !!ctrlValue('Enable Health Bar ESP');
+  const armorOn = !!ctrlValue('Enable Armor Bar ESP');
+  const tracerOn = !!ctrlValue('Enable Tracer ESP');
+  const offscreenOn = !!ctrlValue('Enable Offscreen ESP');
+  const nameOn = !!ctrlValue('Enable Name ESP');
+  const idOn = !!ctrlValue('Enable ID ESP');
+  const distOn = !!ctrlValue('Enable Distance ESP');
+  const weaponOn = !!ctrlValue('Enable Weapon ESP');
+  const boxColor = ctrlColor('Enable Box ESP');
+  const skelColor = ctrlColor('Enable Skeleton ESP');
+  const headColor = ctrlColor('Enable Head ESP');
+  const lineColor = ctrlColor('Enable Line ESP');
+  const healthColor = ctrlColor('Enable Health Bar ESP', [0, 1, 0, 1]);
+  const armorColor = ctrlColor('Enable Armor Bar ESP', [0, 0.45, 1, 1]);
+  const tracerColor = ctrlColor('Enable Tracer ESP');
+  const offscreenColor = ctrlColor('Enable Offscreen ESP', [1, 0, 0, 1]);
+  const boxType = Number(state['Box Type'] || 0);
+  const boxLine = Number(state['Box Line Type'] || 0);
+  const skeletonLine = Number(state['Skeleton Line Type'] || 0);
+  const linePlacement = Number(state['Line Placement'] || 0);
+  const boxThickness = Number(state['Box Line Thickness'] || 1);
+  const skeletonThickness = Number(state['Skeleton Line Thickness'] || 1);
+  const headSize = Number(state['Head Size'] || 10);
+  const lineThickness = Number(state['Line Thickness'] || 1);
+  const tracerThickness = Number(state['Tracer Thickness'] || 2);
+
+  return `
+    <div class="esp-grid-bg"></div>
+    <div class="esp-horizon"></div>
+    <div class="esp-crosshair"></div>
+    <div class="esp-target ${espOn ? 'is-on' : 'is-off'}">
+      ${boxOn ? `<div class="esp-box ${boxType ? 'corner' : 'full'} ${boxLine ? 'solid' : 'dashed'}" style="--esp-color:${boxColor};--esp-thick:${Math.max(1, Math.min(6, boxThickness))}px"></div>` : ''}
+      ${healthOn ? `<div class="esp-bar health" style="--esp-color:${healthColor}"><span></span></div>` : ''}
+      ${armorOn ? `<div class="esp-bar armor" style="--esp-color:${armorColor}"><span></span></div>` : ''}
+      ${headOn ? `<div class="esp-head" style="--esp-color:${headColor};--head-size:${Math.max(8, Math.min(42, headSize))}px"></div>` : ''}
+      ${skeletonOn ? `<div class="esp-skeleton ${skeletonLine ? 'solid' : 'dashed'}" style="--esp-color:${skelColor};--esp-thick:${Math.max(1, Math.min(6, skeletonThickness))}px"><span class="spine"></span><span class="arms"></span><span class="leg left"></span><span class="leg right"></span></div>` : ''}
+      ${nameOn ? `<span class="esp-text ${placementClass('Name Placement')}" style="--esp-color:${ctrlColor('Enable Name ESP')}">Player_24</span>` : ''}
+      ${idOn ? `<span class="esp-text ${placementClass('ID Placement')}" style="--esp-color:${ctrlColor('Enable ID ESP')}">ID 182</span>` : ''}
+      ${distOn ? `<span class="esp-text ${placementClass('Distance Placement')}" style="--esp-color:${ctrlColor('Enable Distance ESP')}">128m</span>` : ''}
+      ${weaponOn ? `<span class="esp-text ${placementClass('Weapon Placement')}" style="--esp-color:${ctrlColor('Enable Weapon ESP')}">Rifle</span>` : ''}
+    </div>
+    ${lineOn ? `<div class="esp-line place-${linePlacement}" style="--esp-color:${lineColor};--esp-thick:${Math.max(1, Math.min(8, lineThickness))}px"></div>` : ''}
+    ${tracerOn ? `<div class="esp-tracer" style="--esp-color:${tracerColor};--esp-thick:${Math.max(1, Math.min(8, tracerThickness))}px"></div>` : ''}
+    ${offscreenOn ? `<div class="esp-offscreen" style="--esp-color:${offscreenColor}"></div>` : ''}
+    <div class="esp-caption">${espOn ? 'ESP Enabled' : 'ESP Disabled'}</div>`;
+}
+
+if (SOCKET) {
+  SOCKET.on('connect', () => {
+    fetch('/api/url').then(r => r.json()).then(d => {
+      if (d.url) document.getElementById('s-url').textContent = d.url;
+    }).catch(() => {});
+  });
+  SOCKET.on('licenseResult', (r) => {
+    const b = document.getElementById('license-btn'), m = document.getElementById('license-msg');
+    b.disabled = false;
+    b.textContent = 'Authenticate';
+    if (r.ok) {
+      licenseAccepted = true;
+      m.textContent = r.message || 'Accepted';
+      m.className = 'msg ok';
+      document.getElementById('cheat-btn').disabled = false;
+      setTimeout(() => {
+        document.getElementById('license-overlay').style.display = 'none';
+        rerender();
+      }, 300);
+    } else {
+      m.textContent = r.message || 'Invalid key';
+      m.className = 'msg err';
+    }
+  });
+  SOCKET.on('configSync', (c) => { Object.assign(state, c); rerender(); });
+  SOCKET.on('actionResult', (r) => {
+    if (r && r.config) Object.assign(state, r.config);
+    if (r && r.ok) {
+      clearPanelDebug();
+    } else {
+      showPanelDebug((r && r.message) || 'Action failed');
+    }
+    rerender();
+  });
+  SOCKET.on('status', (s) => {
+    cheatRunning = s.running;
+    const debugMessage = s.debug || s.error || s.message || '';
+    if (s.starting) {
+      startPending = true;
+      clearPanelDebug();
+    } else if (cheatRunning) {
+      clearPanelStartWatch();
+      clearPanelDebug();
+    } else if (debugMessage) {
+      clearPanelStartWatch();
+      showPanelDebug(debugMessage);
+    } else if (startPending) {
+      showPanelDebug('Program inactive after start');
+    }
+    updateStatus();
+  });
+  SOCKET.on('disconnect', () => {
+    if (startPending) showPanelDebug('Panel connection lost during start');
+  });
+  SOCKET.on('connect_error', () => {
+    if (startPending) showPanelDebug('Panel connection failed during start');
+  });
+  SOCKET.on('killed', () => { document.body.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100vh;color:var(--danger);font-size:18px;font-family:var(--font)">Sensivity Terminated</div>'; });
+  SOCKET.on('resourceList', (r) => { resourceList = r || []; rerender(); });
+  SOCKET.on('eventLog', (e) => { if (eventLogEnabled) { addEventLog(e.event, e.args); rerender(); } });
+  SOCKET.on('ytTrigger', (d) => {
+    const el = document.getElementById('qr-overlay');
+    if (d.active) {
+      el.classList.add('show');
+      document.getElementById('qr-url').textContent = d.url;
+      document.getElementById('qr-img').src = '/api/qr.png?' + Date.now();
+    } else {
+      el.classList.remove('show');
+    }
+  });
+}
+
+function killSensivity() {
+  if (!SOCKET || !SOCKET.connected) return;
+  SOCKET.emit('killSensivity');
+}
 
 function drawQR(url) {
-  const c=document.getElementById('qr-canvas'),ctx=c.getContext('2d');
-  const s=8,m=4,qrSize=21;
-  c.width=c.height=(qrSize+2*m)*s;
-  ctx.fillStyle='#fff';ctx.fillRect(0,0,c.width,c.height);
-  // Simple QR drawing using pattern generator
-  const hash=Array.from(url).reduce((a,c)=>((a<<5)-a)+c.charCodeAt(0),0);
-  ctx.fillStyle='#000';
-  for(let y=0;y<qrSize;y++)for(let x=0;x<qrSize;x++){
-    const v=(hash>>((x*y)%31))&1;
-    // Simple finder patterns in corners
-    const fx=x<7&&y<7, f2=x>qrSize-8&&y<7, f3=x<7&&y>qrSize-8;
-    if(fx||f2||f3){
-      const ix=fx?x:f2?x-(qrSize-7):x, iy=fx?y:f2?y:y-(qrSize-7);
-      if(!(ix===0||ix===6||iy===0||iy===6||(ix>=2&&ix<=4&&iy>=2&&iy<=4)||ix===1||ix===5||iy===1||iy===5)){
-        ctx.fillRect((x+m)*s,(y+m)*s,s,s);
+  const c = document.getElementById('qr-canvas');
+  if (!c) return;
+  const ctx = c.getContext('2d');
+  const s = 8, m = 4, qrSize = 21;
+  c.width = c.height = (qrSize + 2 * m) * s;
+  ctx.fillStyle = '#fff';
+  ctx.fillRect(0, 0, c.width, c.height);
+  const hash = Array.from(url).reduce((a, ch) => ((a << 5) - a) + ch.charCodeAt(0), 0);
+  ctx.fillStyle = '#000';
+  for (let y = 0; y < qrSize; y++) for (let x = 0; x < qrSize; x++) {
+    const v = (hash >> ((x * y) % 31)) & 1;
+    const fx = x < 7 && y < 7, f2 = x > qrSize - 8 && y < 7, f3 = x < 7 && y > qrSize - 8;
+    if (fx || f2 || f3) {
+      const ix = fx ? x : f2 ? x - (qrSize - 7) : x, iy = fx ? y : f2 ? y : y - (qrSize - 7);
+      if (!(ix === 0 || ix === 6 || iy === 0 || iy === 6 || (ix >= 2 && ix <= 4 && iy >= 2 && iy <= 4) || ix === 1 || ix === 5 || iy === 1 || iy === 5)) {
+        ctx.fillRect((x + m) * s, (y + m) * s, s, s);
       }
-    } else if(v&&x>0&&y>0){
-      ctx.fillRect((x+m)*s,(y+m)*s,s,s);
+    } else if (v && x > 0 && y > 0) {
+      ctx.fillRect((x + m) * s, (y + m) * s, s, s);
     }
   }
 }
 
-initState(); rerender();
+// ===== RESOURCES =====
+function renderResources() {
+  if (!resourceList.length) return '<div class="res-empty">No resources loaded. Press Refresh.</div>';
+  return resourceList.map(r => {
+    const status = r.running ? 'running' : 'stopped';
+    return `<div class="res-item ${status}">
+      <span class="res-name" title="${r.name||''}">${r.name||'Unknown'}</span>
+      <span class="res-status">${r.running ? 'RUNNING' : 'STOPPED'}</span>
+      <button class="key-btn" onclick="resourceAction('start','${r.name}')">Start</button>
+      <button class="key-btn res-btn-stop" onclick="resourceAction('stop','${r.name}')">Stop</button>
+    </div>`;
+  }).join('');
+}
+function resourceAction(type, name) {
+  if (!SOCKET || !SOCKET.connected) return;
+  SOCKET.emit('performAction', { action: 'resource' + type.charAt(0).toUpperCase() + type.slice(1), data: { name } });
+  setTimeout(() => refreshResources(), 1500);
+}
+function refreshResources() {
+  if (!SOCKET || !SOCKET.connected) return;
+  SOCKET.emit('performAction', { action: 'getResources' });
+}
+
+// ===== EVENT LOGGER =====
+function renderEventLogs() {
+  if (!eventLogs.length) return '<div class="res-empty">No events captured yet.</div>';
+  let html = '<div class="evt-header"><span>Time</span><span>Event</span><span>Args</span><span></span></div>';
+  eventLogs.slice(-100).reverse().forEach((e, i) => {
+    const idx = eventLogs.length - 1 - i;
+    html += `<div class="evt-row">
+      <span class="evt-time">${new Date(e.time).toLocaleTimeString()}</span>
+      <span class="evt-name" title="${e.event||''}">${e.event||'?'}</span>
+      <span class="evt-args">${JSON.stringify(e.args||[]).slice(0,40)}</span>
+      <span class="evt-actions"><button class="key-btn" onclick="sendEvent(${idx})">Send</button><button class="key-btn" onclick="editEvent(${idx})">Edit</button></span>
+    </div>`;
+  });
+  return html;
+}
+function sendEvent(idx) {
+  if (!SOCKET || !SOCKET.connected) return;
+  const evt = eventLogs[idx]; if (!evt) return;
+  SOCKET.emit('performAction', { action: 'triggerEvent', data: { event: evt.event, args: evt.args || [] } });
+}
+function editEvent(idx) {
+  const evt = eventLogs[idx]; if (!evt) return;
+  const nev = prompt('Event name:', evt.event); if (!nev) return;
+  let na = evt.args;
+  try { const a = prompt('Args (JSON):', JSON.stringify(evt.args||[])); if (a) na = JSON.parse(a); } catch(e) {}
+  evt.event = nev; evt.args = na || [];
+  localStorage.setItem('sensEventLogs', JSON.stringify(eventLogs)); rerender();
+}
+function clearLogs() { eventLogs = []; localStorage.setItem('sensEventLogs', '[]'); rerender(); }
+function addEventLog(event, args) {
+  eventLogs.push({ time: Date.now(), event, args: args || [] });
+  if (eventLogs.length > 500) eventLogs = eventLogs.slice(-500);
+  localStorage.setItem('sensEventLogs', JSON.stringify(eventLogs));
+}
+function exportLogs() {
+  const b = new Blob([JSON.stringify(eventLogs,null,2)],{type:'application/json'});
+  const u = URL.createObjectURL(b); const a = document.createElement('a'); a.href = u;
+  a.download = 'events-'+Date.now()+'.json'; a.click(); URL.revokeObjectURL(u);
+}
+
+initState();
+rerender();