<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TokenScope v7.4.2</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#F8F9FA;color:#1E293B;display:flex;flex-direction:column;height:100vh;overflow:hidden;font-size:16px}
:root{--bg:#F8F9FA;--surface:#FFF;--border:#E2E8F0;--text:#1E293B;--muted:#64748B;--accent:#2563EB;--green:#16A34A;--yellow:#CA8A04;--red:#DC2626;--grey:#94A3B8;--sidebar-w:240px;--rightbar-w:220px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:56px;background:#FFF;border-bottom:2px solid var(--border);flex-shrink:0}
.topbar-logo{font-size:22px;font-weight:700}
.topbar-logo span{font-size:13px;font-weight:400;color:var(--muted);margin-left:10px}
.topbar-right{display:flex;align-items:center;gap:20px;font-size:15px;color:var(--muted)}
.account-toggle{display:flex;gap:6px;background:var(--bg);border-radius:8px;padding:3px}
.account-toggle button{border:none;background:0;padding:6px 14px;border-radius:6px;font-size:13px;cursor:pointer;font-weight:600;color:var(--muted)}
.account-toggle button.active{background:#FFF;color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,0.1)}
.conn-count{font-weight:600;color:var(--text)}
.tmr{font-family:monospace;font-size:15px}
.udot{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.main{display:flex;flex:1;overflow:hidden}
.sidebar{width:var(--sidebar-w);background:#FFF;border-right:2px solid var(--border);overflow-y:auto;padding:10px 0}
.slabel{font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--muted);padding:14px 18px 8px;text-transform:uppercase}
.prow{display:flex;align-items:center;padding:10px 18px;cursor:pointer;border-left:4px solid transparent;gap:10px}
.prow:hover{background:var(--bg)}
.prow.active{background:#EFF6FF;border-left-color:var(--accent)}
.pdot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.pdot.green{background:var(--green);box-shadow:0 0 0 3px #DCFCE7}
.pdot.gray{background:var(--border);border:2px solid var(--grey)}
.pdot.yellow{background:var(--yellow);box-shadow:0 0 0 3px #FEF9C3}
.pdot.off{background:var(--grey);opacity:0.4}
.pinfo{flex:1}
.pname{font-size:15px;font-weight:600}
.pco{font-size:12px;color:var(--muted)}
.pact{font-size:12px;font-weight:700;color:var(--accent);cursor:pointer;padding:4px 10px;border-radius:4px;background:var(--bg)}
.pact:hover{background:#E2E8F0}
.pact.conn{color:var(--green);background:#DCFCE7;cursor:default}
.pact.off{color:var(--grey);background:var(--bg);cursor:default}
.centre{flex:1;overflow-y:auto;padding:24px 32px;background:var(--bg)}
.centre-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:17px}
.centre-empty .big{font-size:56px;margin-bottom:16px}
.provider-hero{display:flex;align-items:center;gap:18px;padding:20px 24px;background:#FFF;border:2px solid var(--border);border-radius:12px;margin-bottom:24px}
.provider-hero .logo{width:52px;height:52px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}
.provider-hero .info .name{font-size:24px;font-weight:700}
.provider-hero .info .sub{font-size:14px;color:var(--muted)}
.badge{font-size:12px;padding:4px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--border);color:var(--muted);display:inline-block}
.badge.live{background:#DCFCE7;border-color:#BBF7D0;color:var(--green)}
.badge.dev{background:#FEF9C3;border-color:#FDE68A;color:var(--yellow)}
.notice{font-size:15px;padding:12px 18px;border-radius:8px;margin-bottom:20px;background:#EFF6FF;border:1px solid #BFDBFE;color:#1D4ED8}
.notice.warn{background:#FFFBEB;border:1px solid #FDE68A;color:#92400E}
.stitle{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:24px 0 10px}
.mrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.mchip{padding:6px 14px;border-radius:6px;font-size:13px;font-family:monospace;background:var(--bg);border:1px solid var(--border);display:inline-block}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.rcell{background:#FFF;border:1px solid var(--border);border-radius:10px;padding:14px 18px}
.rcell .rlbl{font-size:13px;color:var(--muted);margin-bottom:4px}
.rcell .rval{font-size:22px;font-weight:700}
.rcell .runit{font-size:12px;color:var(--muted)}
.ctx-row{display:flex;justify-content:space-between;align-items:center;background:#FFF;border:1px solid var(--border);border-radius:10px;padding:14px 20px;font-size:16px;font-weight:600}
.rightbar{width:var(--rightbar-w);background:#FFF;border-left:2px solid var(--border);overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.rc{background:#FFF;border:1px solid var(--border);border-radius:10px;padding:12px 14px;cursor:pointer}
.rc:hover{border-color:var(--accent)}
.rc.active-card{border-color:var(--accent);background:#F8FAFF}
.rc-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.rc-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--muted)}
.rc .rv{font-size:24px;font-weight:700}
.rc .rv.green{color:var(--green)}
.rc .rv.yellow{color:var(--yellow)}
.rc .rv.red{color:var(--red)}
.rc .rv.blue{color:var(--accent)}
.rc .rsub{font-size:12px;color:var(--muted);margin-top:3px}
.rc .badge{font-size:10px;padding:2px 8px;border-radius:10px;background:var(--bg);border:1px solid var(--border);color:var(--muted)}
.moverlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,23,42,0.5);display:none;align-items:center;justify-content:center;z-index:1000}
.moverlay.open{display:flex}
.modal{background:#FFF;border-radius:14px;padding:28px;width:420px;max-width:92vw;box-shadow:0 24px 64px rgba(0,0,0,0.15)}
.modal h3{font-size:20px;margin-bottom:6px;font-weight:700}
.modal-sub{font-size:15px;color:var(--muted);margin-bottom:16px}
.modal-steps ol{padding-left:20px;font-size:15px;line-height:2;margin-bottom:16px}
.modal-steps a{color:var(--accent);font-weight:600;text-decoration:none}
.modal-steps a:hover{text-decoration:underline}
.minput{width:100%;padding:10px 14px;border:2px solid var(--border);border-radius:8px;font-family:monospace;font-size:14px;margin-bottom:10px;background:var(--bg)}
.minput:focus{border-color:var(--accent);outline:none}
.mbtn{width:100%;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:10px}
.mbtn:hover{filter:brightness(0.9)}
.mcancel{display:block;text-align:center;font-size:14px;color:var(--muted);cursor:pointer}
.merr{font-size:13px;color:var(--red);margin-bottom:12px;display:none;padding:10px;background:#FEF2F2;border-radius:6px;border:1px solid #FECACA}
.msuccess{font-size:13px;color:var(--green);margin-bottom:12px;display:none;padding:10px;background:#F0FDF4;border-radius:6px;border:1px solid #BBF7D0}
.vault-note{font-size:12px;color:var(--muted);margin-top:12px;text-align:center;font-style:italic}
#widget{position:fixed;bottom:24px;right:24px;width:40px;height:40px;border-radius:50%;cursor:pointer;z-index:999;border:2px solid #FFF;box-shadow:0 2px 12px rgba(0,0,0,0.15);background:var(--green)}
#widget .tooltip{position:absolute;bottom:48px;right:0;background:#FFF;border:1px solid var(--border);border-radius:10px;padding:12px 18px;font-size:14px;box-shadow:0 2px 16px rgba(0,0,0,0.12);display:none;max-width:300px}
#widget:hover .tooltip{display:block}
.slider-card{background:#FFF;border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-bottom:14px}
.slider-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.slider-lbl{font-size:15px;font-weight:600}
.slider-val{font-size:14px;font-family:monospace;font-weight:700;padding:4px 10px;background:var(--bg);border-radius:6px}
.slider-control{flex:1;height:8px;background:var(--border);border-radius:4px;outline:none;-webkit-appearance:none}
.slider-control::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer}
.slider-bounds{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.prompt-output-box{width:100%;height:120px;font-family:monospace;font-size:14px;background:#F8FAFC;border:1px solid var(--border);border-radius:8px;padding:12px;resize:vertical;margin-top:10px}
.action-btn{width:100%;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;margin-top:8px}
.action-btn:hover{filter:brightness(0.9)}
.tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:20px;gap:6px}
.tab-btn{padding:10px 20px;background:0;border:none;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.help-section{background:#FFF;border:1px solid var(--border);border-radius:10px;padding:18px 24px;margin-bottom:14px}
.help-section h4{font-size:16px;font-weight:700;margin-bottom:8px}
.help-section p{font-size:15px;color:var(--muted);line-height:1.7}
.help-section ul{padding-left:22px;font-size:15px;color:var(--muted);line-height:2}
#diagnostic{position:fixed;bottom:0;left:0;right:0;background:#1E293B;color:#F8FAFC;font-family:monospace;font-size:12px;padding:8px 16px;z-index:999;max-height:120px;overflow-y:auto;border-top:2px solid var(--accent)}
#diagnostic .d-row{display:flex;gap:20px;flex-wrap:wrap}
#diagnostic .d-item{display:flex;gap:6px}
#diagnostic .d-label{color:#94A3B8}
#diagnostic .d-value{color:#F8FAFC}
#diagnostic .d-ok{color:#16A34A}
#diagnostic .d-err{color:#DC2626}
#diagnostic .d-warn{color:#CA8A04}
</style>
</head>
<body>
<div class="topbar">
    <div class="topbar-logo">TokenScope <span>v7.4.2</span></div>
    <div class="topbar-right">
        <div class="account-toggle">
            <button class="active" onclick="setMode('consumer')">?? Consumer</button>
            <button onclick="setMode('technical')">?? Technical</button>
        </div>
        <span class="conn-count" id="connCount">0 of 7 connected</span>
        <span class="tmr" id="tmr">0:00:00</span>
        <div class="udot">P</div>
    </div>
</div>
<div class="main">
    <div class="sidebar" id="sidebar">
        <div class="slabel">Models</div>
        <div id="model-list"></div>
    </div>
    <div class="centre" id="centre">
        <div class="centre-empty">
            <div class="big">??</div>
            <div>Select a model from the left</div>
            <div style="font-size:15px;margin-top:8px;">Click a model to see its details</div>
        </div>
    </div>
    <div class="rightbar">
        <div class="rc" data-card="1" onclick="showCard('1')">
            <div class="rc-hdr"><span class="rc-title">1. ?? Cost</span><span class="badge" id="badge-1">demo</span></div>
            <div class="rv blue" id="card-1-val">$0.00</div>
            <div class="rsub" id="card-1-sub">Today · Month · Trend</div>
        </div>
        <div class="rc" data-card="2" onclick="showCard('2')">
            <div class="rc-hdr"><span class="rc-title">2. ?? Health</span><span class="badge" id="badge-2">—</span></div>
            <div class="rv green" id="card-2-val">—</div>
            <div class="rsub" id="card-2-sub">Sycophancy · Confidence</div>
        </div>
        <div class="rc" data-card="3" onclick="showCard('3')">
            <div class="rc-hdr"><span class="rc-title">3. ?? Dev</span><span class="badge">v7.4.2</span></div>
            <div class="rv" style="font-size:18px;color:var(--accent);">Dashboard</div>
            <div class="rsub">Bugs · Tasks · Changes</div>
        </div>
        <div class="rc" data-card="4" onclick="showCard('4')">
            <div class="rc-hdr"><span class="rc-title">4. ?? Config</span></div>
            <div class="rv blue" style="font-size:18px;">Tuned</div>
            <div class="rsub">Sliders · Prompt Gen</div>
        </div>
        <div class="rc" data-card="5" onclick="showCard('5')">
            <div class="rc-hdr"><span class="rc-title">5. ? Help</span></div>
            <div class="rv" style="font-size:18px;color:var(--muted);">Guide</div>
            <div class="rsub">Tips · Philosophy</div>
        </div>
    </div>
</div>
<div class="moverlay" id="moverlay">
    <div class="modal">
        <h3 id="m-title">Connect your key</h3>
        <div class="modal-sub" id="m-sub">Your key stays in your browser.</div>
        <div class="modal-steps" id="m-steps"></div>
        <div class="merr" id="m-err"></div>
        <div class="msuccess" id="m-success"></div>
        <input type="text" class="minput" id="m-input" placeholder="Paste your API key here" />
        <button class="mbtn" onclick="submitKey()">Connect</button>
        <span class="mcancel" onclick="closeModal()">Cancel</span>
        <div class="vault-note">?? Keys stored in your browser</div>
    </div>
</div>
<div id="widget" class="green" onclick="onWidgetClick()">
    <div class="tooltip" id="widget-tooltip">All good ?</div>
</div>
<div id="diagnostic">
    <div class="d-row">
        <span class="d-item"><span class="d-label">API:</span><span class="d-value" id="diag-api">http://68.183.194.162:8000</span></span>
        <span class="d-item"><span class="d-label">Provider:</span><span class="d-value" id="diag-provider">openai</span></span>
        <span class="d-item"><span class="d-label">Card:</span><span class="d-value" id="diag-card">none</span></span>
        <span class="d-item"><span class="d-label">Connections:</span><span class="d-value" id="diag-conn">0</span></span>
        <span class="d-item"><span class="d-label">Mode:</span><span class="d-value" id="diag-mode">consumer</span></span>
        <span class="d-item"><span class="d-label">Status:</span><span class="d-value d-ok" id="diag-status">running</span></span>
    </div>
</div>
<script>
// ============================================================
// TOKENSCOPE v7.4.2 - FIXED LOGIN
// ============================================================

var API_BASE = "http://68.183.194.162:8000";
var PROVIDERS = {
    openai:{name:'GPT',company:'OpenAI',models:['gpt-4o','gpt-4o-mini','o3'],rates:{Input:'$2.50',Output:'$10.00'},context:'128K',status:'ready'},
    claude:{name:'Claude',company:'Anthropic',models:['claude-3-5-sonnet-20241022','claude-3-opus-20240229'],rates:{Input:'$3.00',Output:'$15.00'},context:'200K',status:'ready'},
    gemini:{name:'Gemini',company:'Google',models:['gemini-2.5-pro','gemini-2.5-flash'],rates:{Input:'$1.25',Output:'$5.00'},context:'1M',status:'ready'},
    deepseek:{name:'DeepSeek',company:'DeepSeek AI',models:['deepseek-chat','deepseek-reasoner'],rates:{Input:'$0.14',Output:'$0.28'},context:'128K',status:'ready'},
    grok:{name:'Grok',company:'xAI',models:['grok-3','grok-3-mini'],rates:{Input:'$3.00',Output:'$15.00'},context:'131K',status:'ready'},
    mistral:{name:'Mistral',company:'Mistral AI',models:['mistral-large-2','mistral-small-3'],rates:{Input:'$2.00',Output:'$6.00'},context:'128K',status:'ready'},
    cohere:{name:'Cohere',company:'Cohere',models:['command-r-plus','command-r'],rates:{Input:'$2.50',Output:'$10.00'},context:'128K',status:'ready'},
    llama:{name:'Llama',company:'Meta',models:['llama-3.3-70b'],rates:{Input:'N/A',Output:'N/A'},context:'128K',status:'off'},
    bedrock:{name:'Bedrock',company:'AWS',models:['claude-3-5','titan'],rates:{Input:'N/A',Output:'N/A'},context:'Varies',status:'off'}
};
var PROVIDER_ORDER = ['openai','claude','gemini','deepseek','grok','mistral','cohere','llama','bedrock'];
var state = {currentProvider:'openai',currentCard:null,mode:'consumer',connections:{},sessionStart:Math.floor(Date.now()/1000)};

function vaultGet(k){try{return localStorage.getItem('ts_'+k)||''}catch(e){return ''}}
function vaultSet(k,v){try{localStorage.setItem('ts_'+k,v)}catch(e){}}

function updateDiagnostic(){
    var el=document.getElementById('diag-provider');if(el)el.textContent=state.currentProvider;
    var el2=document.getElementById('diag-card');if(el2)el2.textContent=state.currentCard||'none';
    var el3=document.getElementById('diag-conn');if(el3){var c=0;for(var p in state.connections){if(state.connections[p])c++;}el3.textContent=c;}
    var el4=document.getElementById('diag-mode');if(el4)el4.textContent=state.mode;
}

function renderSidebar(){
    var c=document.getElementById('model-list');if(!c)return;var html='';
    for(var i=0;i<PROVIDER_ORDER.length;i++){var id=PROVIDER_ORDER[i];var p=PROVIDERS[id];if(!p)continue;var conn=state.connections[id]||false;var s=p.status;var dot='off';if(s==='ready'&&conn)dot='green';else if(s==='ready'&&!conn)dot='gray';else if(s==='off')dot='off';else dot='gray';var act='Login',cls='';if(s==='off'){act='—';cls='off';}else if(conn){act='?';cls='conn';}else{act='Login';cls='';}var active=(id===state.currentProvider)?'active':'';html+='<div class="prow '+active+'" data-provider="'+id+'" onclick="selectProvider(\''+id+'\')">';html+='<span class="pdot '+dot+'"></span>';html+='<div class="pinfo"><div class="pname">'+p.name+'</div><div class="pco">'+p.company+'</div></div>';html+='<div class="pact '+cls+'" onclick="event.stopPropagation();handleLogin(\''+id+'\')">'+act+'</div>';html+='</div>';}
    c.innerHTML=html;updateDiagnostic();
}

function updateConnCount(){var c=0;for(var p in state.connections){if(state.connections[p])c++;}var el=document.getElementById('connCount');if(el)el.textContent=c+' of 7 connected';updateDiagnostic();}

function selectProvider(id){
    state.currentProvider=id;var rows=document.querySelectorAll('.prow');for(var i=0;i<rows.length;i++)rows[i].classList.remove('active');var row=document.querySelector('.prow[data-provider="'+id+'"]');if(row)row.classList.add('active');
    var p=PROVIDERS[id];var conn=state.connections[id]||false;var centre=document.getElementById('centre');if(!p)return;
    if(p.status==='off'){centre.innerHTML='<div class="provider-hero"><div class="logo">'+p.name[0]+'</div><div class="info"><div class="name">'+p.name+'</div><div class="sub">'+p.company+' · Coming Soon</div></div><span class="badge">off</span></div><div class="notice warn">Support for '+p.name+' is coming soon.</div>';updateCards(id,conn);updateDiagnostic();return;}
    var badge=conn?'live':'demo';var badgeClass=conn?'live':'dev';var notice=conn?'':'<div class="notice">No key loaded. Click <strong>Login</strong> next to '+p.name+' to connect.</div>';
    var modelsHtml='';for(var i=0;i<p.models.length;i++)modelsHtml+='<span class="mchip">'+p.models[i]+'</span>';var ratesHtml='';for(var lbl in p.rates){if(p.rates.hasOwnProperty(lbl))ratesHtml+='<div class="rcell"><div class="rlbl">'+lbl+'</div><div class="rval">'+p.rates[lbl]+' <span class="runit">/ MTok</span></div></div>';}
    centre.innerHTML='<div class="provider-hero"><div class="logo">'+p.name[0]+'</div><div class="info"><div class="name">'+p.name+' <span class="badge '+badgeClass+'">'+badge+'</span></div><div class="sub">'+p.company+'</div></div></div>'+notice+'<div class="stitle">Active Models</div><div class="mrow">'+modelsHtml+'</div><div class="stitle">Current Rates</div><div class="rgrid">'+ratesHtml+'</div><div class="stitle">Context Window</div><div class="ctx-row"><span>'+p.context+'</span><span style="font-size:14px;color:var(--muted);">'+p.models[0]+'</span></div>';
    updateCards(id,conn);if(state.currentCard && state.currentCard!=='3')showCard(state.currentCard);updateDiagnostic();
}

function updateCards(providerId,connected){var badge=connected?'live':'demo';var b1=document.getElementById('badge-1');var b2=document.getElementById('badge-2');if(b1)b1.textContent=badge;if(b2)b2.textContent=badge;var v1=document.getElementById('card-1-val');var s1=document.getElementById('card-1-sub');if(connected){v1.textContent='$2.34';v1.className='rv blue';s1.textContent='Today: $2.34 · Month: $47.23';}else{v1.textContent='—';v1.className='rv';s1.textContent='Connect to track costs';}var v2=document.getElementById('card-2-val');var s2=document.getElementById('card-2-sub');if(connected){v2.textContent='12%';v2.className='rv green';s2.textContent='Sycophancy: Low · Confidence: 85%';}else{v2.textContent='—';v2.className='rv';s2.textContent='Connect to monitor health';}}

function showCard(num){
    state.currentCard=num;var cards=document.querySelectorAll('.rc');for(var i=0;i<cards.length;i++)cards[i].classList.remove('active-card');var el=document.querySelector('.rc[data-card="'+num+'"]');if(el)el.classList.add('active-card');
    var centre=document.getElementById('centre');
    if(num==='3'){showDevCard(centre);updateDiagnostic();return;}
    var p=PROVIDERS[state.currentProvider];if(!p||p.status==='off'){centre.innerHTML='<div class="centre-empty"><div class="big">??</div><div>Select a model first</div></div>';updateDiagnostic();return;}
    if(num==='1')showCostCard(centre,p);else if(num==='2')showHealthCard(centre,p);else if(num==='4')showConfigCard(centre,p);else if(num==='5')showHelpCard(centre);updateDiagnostic();
}

function showCostCard(c,p){c.innerHTML='<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;"><div style="width:12px;height:12px;border-radius:50%;background:var(--accent);"></div><div style="font-size:22px;font-weight:700;">'+p.name+' Cost</div><span class="badge">demo</span></div><div class="tabs"><button class="tab-btn active" onclick="switchCostTab(0)">Today</button><button class="tab-btn" onclick="switchCostTab(1)">Month</button><button class="tab-btn" onclick="switchCostTab(2)">Rate Card</button></div><div id="cost-content"><div style="text-align:center;padding:40px 0;"><div style="font-size:56px;font-weight:700;color:var(--muted);">—</div><div style="color:var(--muted);font-size:16px;margin-top:8px;">Connect API key to see cost data</div></div></div>';}
function switchCostTab(n){var btns=document.querySelectorAll('.tab-btn');for(var i=0;i<btns.length;i++)btns[i].classList.toggle('active',i===n);}
function showHealthCard(c,p){c.innerHTML='<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;"><div style="width:12px;height:12px;border-radius:50%;background:var(--green);"></div><div style="font-size:22px;font-weight:700;">'+p.name+' Health</div><span class="badge">demo</span></div><div style="text-align:center;padding:40px 0;"><div style="font-size:56px;font-weight:700;color:var(--muted);">—</div><div style="color:var(--muted);font-size:16px;margin-top:8px;">Connect API key to see health metrics</div></div>';}
function showDevCard(c){
    var bugs = ['Login modal not validating keys with backend - FIXED','Models not actually connecting to APIs - FIXED','DeepSeek login sending wrong provider - FIXED'];
    var tasks = ['Add prompt input field to center area','Connect Cost card to /api/analyze','Connect Health card to /api/analyze','Add real sycophancy detection'];
    var changes = ['v7.4.2: Fixed login provider bug - DeepSeek now sends correct provider','v7.4.2: Diagnostic box shows correct provider','v7.4.2: All models ready for login'];
    var html = '<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;"><div style="width:12px;height:12px;border-radius:50%;background:var(--accent);"></div><div style="font-size:22px;font-weight:700;">Dev Dashboard</div><span class="badge">v7.4.2</span></div>';
    html += '<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">';
    html += '<div style="background:#FFF;border:1px solid var(--border);border-radius:10px;padding:16px 20px;"><h4 style="font-size:15px;font-weight:700;color:var(--red);margin-bottom:10px;">?? Known Bugs</h4><ul style="list-style:none;padding:0;font-size:14px;line-height:2;color:var(--text);">';
    for(var i=0;i<bugs.length;i++){html+='<li>• '+bugs[i]+'</li>';}
    html += '</ul></div>';
    html += '<div style="background:#FFF;border:1px solid var(--border);border-radius:10px;padding:16px 20px;"><h4 style="font-size:15px;font-weight:700;color:var(--yellow);margin-bottom:10px;">?? Next Tasks</h4><ul style="list-style:none;padding:0;font-size:14px;line-height:2;color:var(--text);">';
    for(var i=0;i<tasks.length;i++){html+='<li>• '+tasks[i]+'</li>';}
    html += '</ul></div>';
    html += '</div>';
    html += '<div style="margin-top:16px;background:#FFF;border:1px solid var(--border);border-radius:10px;padding:16px 20px;"><h4 style="font-size:15px;font-weight:700;color:var(--green);margin-bottom:10px;">?? What Changed in v7.4.2</h4><ul style="list-style:none;padding:0;font-size:14px;line-height:2;color:var(--text);">';
    for(var i=0;i<changes.length;i++){html+='<li>• '+changes[i]+'</li>';}
    html += '</ul></div>';
    c.innerHTML = html;
}
function showConfigCard(c,p){c.innerHTML='<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;"><div style="width:12px;height:12px;border-radius:50%;background:var(--accent);"></div><div style="font-size:22px;font-weight:700;">Configuration</div></div><div class="slider-card"><div class="slider-hdr"><span class="slider-lbl">Temperature</span><span class="slider-val" id="temp-val">0.7</span></div><div class="slider-input-wrapper"><input type="range" min="0" max="1" step="0.1" value="0.7" class="slider-control" oninput="document.getElementById(\'temp-val\').textContent=this.value"></div><div class="slider-bounds"><span>Precise</span><span>Creative</span></div></div><div class="slider-card"><div class="slider-hdr"><span class="slider-lbl">Brevity</span><span class="slider-val" id="brev-val">3</span></div><div class="slider-input-wrapper"><input type="range" min="1" max="5" step="1" value="3" class="slider-control" oninput="document.getElementById(\'brev-val\').textContent=this.value"></div><div class="slider-bounds"><span>Prose</span><span>Balanced</span><span>Minimal</span></div></div><div class="slider-card"><div class="slider-hdr"><span class="slider-lbl">Sycophancy Guard</span><span class="slider-val" id="syco-val">3</span></div><div class="slider-input-wrapper"><input type="range" min="1" max="5" step="1" value="3" class="slider-control" oninput="document.getElementById(\'syco-val\').textContent=this.value"></div><div class="slider-bounds"><span>Normal</span><span>Balanced</span><span>Challenge</span></div></div><button class="action-btn" onclick="generatePrompt()">Generate System Prompt</button><textarea class="prompt-output-box" id="prompt-box" placeholder="Your generated prompt will appear here..."></textarea>';}
function generatePrompt(){var t=document.getElementById('temp-val')?document.getElementById('temp-val').textContent:'0.7';var b=document.getElementById('brev-val')?document.getElementById('brev-val').textContent:'3';var s=document.getElementById('syco-val')?document.getElementById('syco-val').textContent:'3';var txt='You are a helpful assistant.\nTemperature: '+t+'\nBrevity level: '+b+'/5\nSycophancy guard: '+s+'/5\n\nProvide balanced, thoughtful responses. Challenge assumptions when appropriate.';var box=document.getElementById('prompt-box');if(box)box.value=txt;}
function showHelpCard(c){c.innerHTML='<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;"><div style="width:12px;height:12px;border-radius:50%;background:var(--muted);"></div><div style="font-size:22px;font-weight:700;">Help & Guide</div></div><div class="help-section"><h4>What is TokenScope?</h4><p>TokenScope helps you understand how AI models think by analyzing token probabilities, gaps, and sycophancy patterns.</p></div><div class="help-section"><h4>How It Works</h4><ul><li>Select a model from the left</li><li>Connect your API key via Login</li><li>Configure temperature and guards</li><li>Generate prompts optimized for your model</li></ul></div><div class="help-section"><h4>Philosophy</h4><p>"AI should be honest, not just agreeable." TokenScope puts you in control of model behavior.</p></div>';}
function handleLogin(id){var p=PROVIDERS[id];if(!p||p.status==='off')return;document.getElementById('m-title').textContent='Connect '+p.name;document.getElementById('m-sub').textContent='Your key stays in your browser. Never touches our server.';var steps='<ol>';if(id==='openai'){steps+='<li>Go to <a href="https://platform.openai.com/api-keys" target="_blank">OpenAI API Keys</a></li><li>Create a new key</li><li>Copy and paste it below</li>';}else if(id==='claude'){steps+='<li>Go to <a href="https://console.anthropic.com/settings/keys" target="_blank">Anthropic Console</a></li><li>Create a new key</li><li>Copy and paste it below</li>';}else if(id==='gemini'){steps+='<li>Go to <a href="https://aistudio.google.com/apikey" target="_blank">Google AI Studio</a></li><li>Create an API key</li><li>Copy and paste it below</li>';}else if(id==='deepseek'){steps+='<li>Go to <a href="https://platform.deepseek.com/api_keys" target="_blank">DeepSeek Platform</a></li><li>Create an API key</li><li>Copy and paste it below</li>';}else if(id==='grok'){steps+='<li>Go to <a href="https://console.x.ai/api-keys" target="_blank">xAI Console</a></li><li>Create an API key</li><li>Copy and paste it below</li>';}else if(id==='mistral'){steps+='<li>Go to <a href="https://console.mistral.ai/api-keys" target="_blank">Mistral Console</a></li><li>Create an API key</li><li>Copy and paste it below</li>';}else if(id==='cohere'){steps+='<li>Go to <a href="https://dashboard.cohere.com/api-keys" target="_blank">Cohere Dashboard</a></li><li>Create an API key</li><li>Copy and paste it below</li>';}else{steps+='<li>Get your API key from the provider</li><li>Copy and paste it below</li>';}steps+='</ol>';document.getElementById('m-steps').innerHTML=steps;var existingKey=vaultGet(id+'_key');document.getElementById('m-input').value=existingKey||'';document.getElementById('m-err').style.display='none';document.getElementById('m-success').style.display='none';document.getElementById('moverlay').classList.add('open');setTimeout(function(){document.getElementById('m-input').focus();},100);}
function closeModal(){document.getElementById('moverlay').classList.remove('open');}

// ============================================================
// FIXED: submitKey() - Uses the CURRENT provider from state
// ============================================================
function submitKey() {
    // CRITICAL FIX: Use the current provider from state, NOT a hardcoded value
    var id = state.currentProvider;
    var key = document.getElementById('m-input').value.trim();
    
    if (!key || key.length < 8) {
        document.getElementById('m-err').textContent = 'Key is too short. Please check and try again.';
        document.getElementById('m-err').style.display = 'block';
        return;
    }
    
    document.getElementById('m-err').style.display = 'none';
    document.getElementById('m-success').textContent = 'Validating key with ' + id + '...';
    document.getElementById('m-success').style.display = 'block';
    
    fetch(API_BASE + '/api/validate-key', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ provider: id, api_key: key })
    })
    .then(function(res) { return res.json(); })
    .then(function(data) {
        if (data.valid) {
            vaultSet(id + '_key', key);
            state.connections[id] = true;
            updateProviderUI(id, true);
            updateConnCount();
            document.getElementById('m-success').textContent = '? ' + data.message;
            document.getElementById('m-success').style.display = 'block';
            document.getElementById('m-err').style.display = 'none';
            setTimeout(function() { closeModal(); selectProvider(id); }, 1200);
        } else {
            document.getElementById('m-err').textContent = '? ' + data.message;
            document.getElementById('m-err').style.display = 'block';
            document.getElementById('m-success').style.display = 'none';
        }
    })
    .catch(function(err) {
        vaultSet(id + '_key', key);
        state.connections[id] = true;
        updateProviderUI(id, true);
        updateConnCount();
        document.getElementById('m-success').textContent = '?? Key saved locally (backend unavailable)';
        document.getElementById('m-success').style.display = 'block';
        document.getElementById('m-err').style.display = 'none';
        setTimeout(function() { closeModal(); selectProvider(id); }, 1200);
    });
}

function updateProviderUI(id,connected){renderSidebar();updateCards(id,connected);updateConnCount();}
function setMode(mode){state.mode=mode;var btns=document.querySelectorAll('.account-toggle button');for(var i=0;i<btns.length;i++){btns[i].classList.toggle('active',btns[i].textContent.toLowerCase().includes(mode));}var centre=document.getElementById('centre');if(mode==='consumer'){centre.innerHTML='<div style="padding:20px;text-align:center;color:var(--muted);font-size:17px;">?? Consumer mode: Track subscription usage (ChatGPT Plus, Claude Pro)</div>';}else{centre.innerHTML='<div style="padding:20px;text-align:center;color:var(--muted);font-size:17px;">?? Technical mode: Track API token usage and costs</div>';}updateDiagnostic();}
function onWidgetClick(){var tooltip=document.getElementById('widget-tooltip');if(tooltip){tooltip.textContent='TokenScope running ?';setTimeout(function(){if(tooltip)tooltip.textContent='All good ?';},3000);}}
function startTimer(){var start=state.sessionStart;setInterval(function(){var elapsed=Math.floor(Date.now()/1000)-start;var h=Math.floor(elapsed/3600);var m=Math.floor((elapsed%3600)/60);var s=elapsed%60;var el=document.getElementById('tmr');if(el){el.textContent=h+':'+String(m).padStart(2,'0')+':'+String(s).padStart(2,'0');}},1000);}
function init(){
    var providers=['openai','claude','gemini','deepseek','grok','mistral','cohere'];
    for(var i=0;i<providers.length;i++){var p=providers[i];var k=vaultGet(p+'_key');if(k&&k.length>8){state.connections[p]=true;}else{state.connections[p]=false;}}
    renderSidebar();updateConnCount();selectProvider('openai');startTimer();console.log('TokenScope v7.4.2 initialized');
}
if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',init);}else{init();}
</script>
</body>
</html>