{ const uname=val.toLowerCase(); const taken = store.users().some(u=>u.username===uname); hint.className = taken?'avail-no':'avail-ok'; hint.textContent = taken ? `✗ "${uname}" is taken` : `✓ ${uname}@wisoo.app`; hint.style.display='block'; },400); } function authSubmit() { const btn=document.getElementById('auth-submit'); const err=document.getElementById('auth-err'); const user=document.getElementById('inp-user').value.trim().toLowerCase(); const pass=document.getElementById('inp-pass').value; err.style.display='none'; if(!user||!pass){showErr('Username and password are required');return;} if(authMode==='login'){ const users=store.users(); const found=users.find(u=>u.username===user&&u.password===pass); if(!found){showErr('Invalid username or password');return;} state.user=found; state.proAccounts=found.proAccounts||[]; store.setSession({user:found,proAccounts:found.proAccounts||[]}); enterApp(); } else { const name=document.getElementById('inp-name').value.trim(); const confirm=document.getElementById('inp-confirm').value; const lang=document.getElementById('inp-lang').value; if(!name){showErr('Display name is required');return;} if(pass.length<8){showErr('Password must be at least 8 characters');return;} if(pass!==confirm){showErr('Passwords do not match');return;} if(!/^[a-z0-9_]{3,30}$/.test(user)){showErr('Username: 3-30 chars, lowercase, numbers, underscores only');return;} const users=store.users(); if(users.some(u=>u.username===user)){showErr(`Username "${user}" is already taken`);return;} const newUser={id:Date.now().toString(),username:user,email:`${user}@wisoo.app`,display_name:name,language:lang,password:pass,proAccounts:[],agents:[]}; users.push(newUser); store.save(users); state.user=newUser; state.proAccounts=[]; store.setSession({user:newUser,proAccounts:[]}); enterApp(); } } function showErr(msg){const e=document.getElementById('auth-err');e.textContent=msg;e.style.display='block';} function enterApp() { document.getElementById('auth').style.display='none'; document.getElementById('app').style.display='flex'; const u=state.user; const ini=(u.display_name||'U').split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase(); document.getElementById('s-av').textContent=ini; document.getElementById('msg-av-own').textContent=ini; document.getElementById('s-uname').textContent=u.display_name; document.getElementById('acc-p-email').textContent=u.email; document.getElementById('home-greet').textContent=`Good morning, ${u.display_name.split(' ')[0]}.`; // Load pro accounts if(u.proAccounts?.length>0){ const pro=u.proAccounts[0]; document.getElementById('acc-o').style.display='flex'; document.getElementById('acc-o-email').textContent=pro.pro_email; document.getElementById('acc-o').querySelector(':not(.acc-email)').textContent=pro.company_name; document.getElementById('acc-o').prepend(document.createTextNode('')); } // Load agents state.agents = u.agents||[]; renderAgents(); nav('home'); } function logout() { store.clear(); state={user:null,proAccounts:[],account:'personal',isPro:false,view:'home',toomiHistory:[],agents:[]}; document.getElementById('app').style.display='none'; document.getElementById('auth').style.display='flex'; document.getElementById('auth-err').style.display='none'; document.getElementById('inp-user').value=''; document.getElementById('inp-pass').value=''; } // ── Account switching ───────────────────────────────────────────────────── function switchAccount(mode) { state.account=mode; state.isPro=(mode!=='personal'); const root=document.getElementById('app'); root.className=state.isPro?'pro-mode':''; document.getElementById('glow').className=state.isPro?'pro':''; document.getElementById('s-mark').className='s-mark'+(state.isPro?' pro':''); document.getElementById('s-av').className='av'+(state.isPro?' pro':''); document.getElementById('acc-p').className='acc-btn'+(mode==='personal'?' on-p':''); document.getElementById('acc-o').className='acc-btn'+(mode!=='personal'?' on-o':''); document.getElementById('s-mode').textContent=state.isPro?'Professional':'Personal'; document.getElementById('stor-bar').style.background=state.isPro?'var(--o)':'var(--g)'; document.getElementById('home-mode-badge').textContent=state.isPro?'⚡ Professional Mode':'✦ Personal Mode'; document.getElementById('home-mode-badge').style.color=state.isPro?'var(--o)':'var(--g)'; document.getElementById('home-stats').style.display=state.isPro?'grid':'none'; document.getElementById('home-sub').textContent=state.isPro?'3 investor replies, 1 call at 2PM, TonoForge shipment updated.':'2 new messages, clear weather today, Spotify wrapped is ready.'; document.getElementById('call-banner').style.borderColor=state.isPro?'var(--o)':'var(--g)'; document.getElementById('tr-go').style.background=state.isPro?'var(--o)':'var(--g)'; document.getElementById('swap-btn').style.borderColor=state.isPro?'var(--o)':'var(--g)'; document.getElementById('swap-btn').style.color=state.isPro?'var(--o)':'var(--g)'; document.getElementById('fbar').className=state.isPro?'pro':''; document.querySelectorAll('.td').forEach(d=>d.style.background=state.isPro?'var(--o)':'var(--g)'); document.getElementById('agent-addr-hint').style.color=state.isPro?'var(--o)':'var(--g)'; document.getElementById('toomi-status').style.color=state.isPro?'var(--o)':'var(--g)'; } // ── Navigation ──────────────────────────────────────────────────────────── const TITLES={home:'Dashboard',messages:'Messages',files:'Files',calls:'Calls',integrations:'Integrations',toomi:'Toomi AI Twin',translator:'Translator',agents:'AI Agents',settings:'Settings'}; function nav(id) { state.view=id; document.querySelectorAll('.view').forEach(v=>v.classList.remove('active')); document.getElementById('v-'+id)?.classList.add('active'); document.querySelectorAll('.ni').forEach((n,i)=>{ const ids=['home','messages','files','calls','integrations','toomi','translator','agents','settings']; n.className='ni'+(ids[i]===id?' act':''); }); document.getElementById('tb-title').textContent=TITLES[id]||id; document.getElementById('fbar').style.display=id==='toomi'?'none':'flex'; document.getElementById('content').style.animation='none'; setTimeout(()=>document.getElementById('content').style.animation='fadeIn .3s ease',10); } // ── Messages ────────────────────────────────────────────────────────────── function sendMsg() { const inp=document.getElementById('chat-inp'); if(!inp.value.trim()) return; const msgs=document.getElementById('chat-msgs'); const ini=(state.user.display_name||'U').split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase(); const now=new Date().toLocaleTimeString('en',{hour:'2-digit',minute:'2-digit'}); msgs.innerHTML+=`

${ini}

${inp.value.trim()}

${now}

`; inp.value=''; msgs.scrollTop=msgs.scrollHeight; } function selConv(el, name, color, init) { document.querySelectorAll('.ci').forEach(c=>c.classList.remove('on')); el.classList.add('on'); document.getElementById('chat-hd-av').style.background=color; document.getElementById('chat-hd-av').textContent=init; document.getElementById('chat-hd-nm').textContent=name; } // ── Files ───────────────────────────────────────────────────────────────── function handleUpload(inp) { const grid=document.getElementById('files-grid'); Array.from(inp.files).forEach(f=>{ const ext=f.name.split('.').pop().toLowerCase(); const icons={pdf:'📄',doc:'📝',docx:'📝',xls:'📊',xlsx:'📊',ppt:'📋',pptx:'📋',mp4:'🎬',mov:'🎬',jpg:'🖼️',jpeg:'🖼️',png:'🖼️',zip:'📦',rar:'📦'}; const ic=icons[ext]||'📁'; const size=f.size>1e6?(f.size/1e6).toFixed(1)+' MB':(f.size/1024).toFixed(0)+' KB'; grid.innerHTML=`

${ic}

${f.name}

${size}

`+grid.innerHTML; }); } // ── Toomi ───────────────────────────────────────────────────────────────── function addToomiMsg(role, text) { const msgs=document.getElementById('toomi-msgs'); const isOwn=role==='user'; const ini=(state.user?.display_name||'U').split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase(); const av = isOwn ? `

${ini}

` : `

✦

`; msgs.innerHTML+=`

${isOwn?'':av}

${text.replace(/\n/g,'
')}

${isOwn?av:''}

`; msgs.scrollTop=msgs.scrollHeight; state.toomiHistory.push({role,content:text}); } function showTyping() { const msgs=document.getElementById('toomi-msgs'); const id='typing-'+Date.now(); msgs.innerHTML+=`

✦

`; msgs.scrollTop=msgs.scrollHeight; return id; } async function sendToomi(preset) { const inp=document.getElementById('toomi-inp'); const msg=(preset||inp.value).trim(); if(!msg) return; inp.value=''; addToomiMsg('user', msg); const tid=showTyping(); document.getElementById('toomi-send-btn').disabled=true; // Get API key from stored settings const apiKey = localStorage.getItem('wisoo_anthropic_key') || ''; if(!apiKey) { document.getElementById(tid)?.remove(); addToomiMsg('assistant', "To use Toomi AI, please add your Anthropic API key in **Settings → API Keys**. Once configured, I can fully assist you with drafting, research, translation, and more."); document.getElementById('toomi-send-btn').disabled=false; return; } try { const sysParts=[`You are Toomi, the AI twin of ${state.user.display_name}. You are their brilliant, concise personal assistant embedded in Wisoo.`]; if(state.isPro) sysParts.push('Currently in Professional Mode — prioritize business-relevant responses.'); sysParts.push('Make every response feel effortlessly intelligent. Be direct and sharp.'); const res=await fetch('https://api.anthropic.com/v1/messages',{ method:'POST', headers:{'Content-Type':'application/json','x-api-key':apiKey,'anthropic-version':'2023-06-01'}, body:JSON.stringify({model:'claude-sonnet-4-20250514',max_tokens:1200,system:sysParts.join(' '),messages:state.toomiHistory.slice(-18).map(m=>({role:m.role,content:m.content}))}) }); const data=await res.json(); document.getElementById(tid)?.remove(); if(data.content?.[0]?.text) addToomiMsg('assistant',data.content[0].text); else addToomiMsg('assistant','⚠ API error: '+(data.error?.message||'Unknown error')); } catch(e) { document.getElementById(tid)?.remove(); addToomiMsg('assistant','⚠ Connection error. Check your API key and network.'); } document.getElementById('toomi-send-btn').disabled=false; } function clearToomi() { document.getElementById('toomi-msgs').innerHTML=''; state.toomiHistory=[]; addToomiMsg('assistant',"Fresh start. What's on your mind?"); } // ── Translator ──────────────────────────────────────────────────────────── const LANGS=[['af','Afrikaans'],['sq','Albanian'],['am','Amharic'],['ar','Arabic'],['hy','Armenian'],['az','Azerbaijani'],['eu','Basque'],['bn','Bengali'],['bs','Bosnian'],['bg','Bulgarian'],['ca','Catalan'],['zh','Chinese (Simplified)'],['zh-tw','Chinese (Traditional)'],['hr','Croatian'],['cs','Czech'],['da','Danish'],['nl','Dutch'],['en','English'],['et','Estonian'],['fi','Finnish'],['fr','French'],['gl','Galician'],['ka','Georgian'],['de','German'],['el','Greek'],['gu','Gujarati'],['he','Hebrew'],['hi','Hindi'],['hu','Hungarian'],['id','Indonesian'],['ga','Irish'],['it','Italian'],['ja','Japanese'],['kn','Kannada'],['kk','Kazakh'],['km','Khmer'],['ko','Korean'],['ky','Kyrgyz'],['lo','Lao'],['lv','Latvian'],['lt','Lithuanian'],['ms','Malay'],['ml','Malayalam'],['mt','Maltese'],['mr','Marathi'],['mn','Mongolian'],['ne','Nepali'],['no','Norwegian'],['fa','Persian'],['pl','Polish'],['pt','Portuguese'],['pa','Punjabi'],['ro','Romanian'],['ru','Russian'],['sr','Serbian'],['sk','Slovak'],['sl','Slovenian'],['so','Somali'],['es','Spanish'],['sw','Swahili'],['sv','Swedish'],['tg','Tajik'],['ta','Tamil'],['te','Telugu'],['th','Thai'],['tr','Turkish'],['uk','Ukrainian'],['ur','Urdu'],['uz','Uzbek'],['vi','Vietnamese'],['cy','Welsh'],['xh','Xhosa'],['yo','Yoruba'],['zu','Zulu']]; const QUICK_LANGS=['fr','de','es','ar','nl','pt','it','zh','ja','ru','hi','ko','tr','pl','sv']; function buildTranslator() { const src=document.getElementById('src-lang'), tgt=document.getElementById('tgt-lang'); src.innerHTML='Detect language'+LANGS.map(([c,n])=>`${n}`).join(''); tgt.innerHTML=LANGS.map(([c,n])=>`${n}`).join(''); const qlb=document.getElementById('ql-btns'); qlb.innerHTML=QUICK_LANGS.map(c=>{ const name=LANGS.find(l=>l[0]===c)?.[1]||c; return `${name}`; }).join(''); } function setTgt(code) { document.getElementById('tgt-lang').value=code; } function swapLangs() { const src=document.getElementById('src-lang').value, tgt=document.getElementById('tgt-lang').value; if(src==='auto') return; document.getElementById('src-lang').value=tgt; document.getElementById('tgt-lang').value=src; const srcTxt=document.getElementById('tr-src').value; const outEl=document.getElementById('tr-out'); if(outEl.textContent && !outEl.querySelector('span')){document.getElementById('tr-src').value=outEl.textContent;outEl.innerHTML=srcTxt||'Translation will appear here';} } async function doTranslate() { const text=document.getElementById('tr-src').value.trim(); if(!text) return; const tgt=document.getElementById('tgt-lang').value; const tgtName=LANGS.find(l=>l[0]===tgt)?.[1]||tgt; const out=document.getElementById('tr-out'); out.innerHTML='Translating…'; document.getElementById('copy-btn').style.display='none'; const apiKey=localStorage.getItem('wisoo_anthropic_key')||''; if(!apiKey){out.innerHTML=`Add your Anthropic API key in Settings → API Keys to enable translation.`;return;} try { const r=await fetch('https://api.anthropic.com/v1/messages',{method:'POST',headers:{'Content-Type':'application/json','x-api-key':apiKey,'anthropic-version':'2023-06-01'},body:JSON.stringify({model:'claude-haiku-4-5-20251001',max_tokens:2000,messages:[{role:'user',content:`Translate to ${tgtName}. Output ONLY the translation, nothing else.\n\n${text}`}]})}); const data=await r.json(); if(data.content?.[0]?.text){out.textContent=data.content[0].text.trim();document.getElementById('copy-btn').style.display='block';} else out.innerHTML=`Translation failed: ${data.error?.message||'API error'}`; } catch(e){out.innerHTML=`Connection error. Check your API key.`;} } document.addEventListener('keydown', e=>{if(e.ctrlKey&&e.key==='Enter'&&state.view==='translator')doTranslate();}); // ── Agents ──────────────────────────────────────────────────────────────── function showAgentForm(){document.getElementById('agent-form').style.display='block';document.getElementById('agent-key-reveal').style.display='none';} function registerAgent() { const uname=document.getElementById('ag-user').value.trim(); const dname=document.getElementById('ag-name').value.trim(); const err=document.getElementById('ag-err'); if(!uname||!dname){err.textContent='Username and display name are required';err.style.display='block';return;} if(!/^[a-z][a-z0-9_]{2,29}$/.test(uname)){err.textContent='Username: start with letter, 3-30 chars, lowercase/numbers/underscore';err.style.display='block';return;} if(state.agents.some(a=>a.username===uname)){err.textContent=`Agent "${uname}" already exists`;err.style.display='block';return;} const key='wsa_'+Math.random().toString(36).slice(2)+Math.random().toString(36).slice(2); const agent={id:Date.now().toString(),username:uname,email:`${uname}@wisoo`,display_name:dname,description:document.getElementById('ag-desc').value.trim(),system_prompt:document.getElementById('ag-prompt').value.trim(),model:document.getElementById('ag-model').value,is_public:document.getElementById('ag-pub').value==='public',created_at:new Date().toISOString()}; state.agents.push(agent); // Persist to user record const users=store.users(); const uidx=users.findIndex(u=>u.id===state.user.id); if(uidx>=0){users[uidx].agents=state.agents;store.save(users);state.user.agents=state.agents;store.setSession({user:state.user,proAccounts:state.proAccounts});} renderAgents(); document.getElementById('agent-form').style.display='none'; document.getElementById('ag-err').style.display='none'; document.getElementById('ag-user').value='';document.getElementById('ag-name').value='';document.getElementById('ag-desc').value='';document.getElementById('ag-prompt').value=''; document.getElementById('ag-key-val').textContent=key; document.getElementById('agent-key-reveal').style.display='block'; } function deleteAgent(id) { if(!confirm('Delete this agent?')) return; state.agents=state.agents.filter(a=>a.id!==id); const users=store.users();const uidx=users.findIndex(u=>u.id===state.user.id); if(uidx>=0){users[uidx].agents=state.agents;store.save(users);} renderAgents(); } function renderAgents() { const list=document.getElementById('agent-list'); const accent=state.isPro?'var(--o)':'var(--g)'; if(!state.agents.length){list.innerHTML='';return;} list.innerHTML=state.agents.map(a=>``).join(''); } // ── Settings ────────────────────────────────────────────────────────────── const SETT_SECTIONS=['Profile','Professional','API Keys','Notifications','About']; let settSection='Profile'; function buildSettings() { const nav=document.getElementById('sett-nav'); nav.innerHTML=SETT_SECTIONS.map(s=>``).join(''); renderSettContent(); } function settNav(s){settSection=s;buildSettings();} function renderSettContent() { const c=document.getElementById('sett-content'); const u=state.user||{}; const accent=state.isPro?'var(--o)':'var(--g)'; if(settSection==='Profile'){ const ini=(u.display_name||'U').split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase(); c.innerHTML=``; } else if(settSection==='Professional'){ const pros=state.proAccounts||[]; const existing=pros.map(p=>``).join(''); c.innerHTML=existing+``; document.getElementById('pro-co-slug')?.addEventListener('input',function(){const s=document.getElementById('slug-preview');if(s)s.textContent=this.value||'company';}); } else if(settSection==='API Keys'){ const stored=localStorage.getItem('wisoo_anthropic_key')||''; c.innerHTML=` `; } else if(settSection==='Notifications'){ const toggles=[['Push notifications','Desktop and mobile alerts','notif'],['Toomi suggestions','Proactive AI recommendations','toomi_sug'],['Dark mode','Always dark theme','dark']]; c.innerHTML=``; } else if(settSection==='About'){ c.innerHTML=``; } } function saveApiKey(svc) { const val=document.getElementById('inp-anthropic')?.value.trim(); if(val){localStorage.setItem('wisoo_anthropic_key',val);buildSettings();alert('✓ Anthropic API key saved');} } function saveServiceKey(svc,val){if(val.trim())localStorage.setItem('wisoo_key_'+svc,val.trim());} async function testAnthropicKey(){ const key=localStorage.getItem('wisoo_anthropic_key')||''; const res=document.getElementById('key-test-result'); if(!res) return; res.style.display='block'; res.style.color='var(--muted2)'; res.textContent='Testing…'; try{ const r=await fetch('https://api.anthropic.com/v1/messages',{method:'POST',headers:{'Content-Type':'application/json','x-api-key':key,'anthropic-version':'2023-06-01'},body:JSON.stringify({model:'claude-haiku-4-5-20251001',max_tokens:5,messages:[{role:'user',content:'hi'}]})}); if(r.ok){res.style.color='var(--g)';res.textContent='✓ API key is valid and working';} else{res.style.color='var(--o)';res.textContent='✗ API key test failed — check the key and try again';} }catch{res.style.color='var(--o)';res.textContent='✗ Network error';} } function toggleSetting(btn,key){ const on=btn.classList.toggle('on'); btn.classList.toggle('off',!on); localStorage.setItem('wisoo_toggle_'+key, on?'on':'off'); } function addProAccount() { const name=document.getElementById('pro-co-name')?.value.trim(); const slug=document.getElementById('pro-co-slug')?.value.trim(); const role=document.getElementById('pro-role')?.value.trim(); const err=document.getElementById('pro-err'); if(!name||!slug){err.textContent='Company name and slug are required';err.style.display='block';return;} const proEmail=`${state.user.username}@${slug}@wisoo`; if(state.proAccounts.some(p=>p.company_slug===slug)){err.textContent='Professional account for this company already exists';err.style.display='block';return;} const pro={id:Date.now().toString(),company_slug:slug,company_name:name,pro_email:proEmail,role:role||'Owner'}; state.proAccounts.push(pro); // Persist const users=store.users();const uidx=users.findIndex(u=>u.id===state.user.id); if(uidx>=0){users[uidx].proAccounts=state.proAccounts;store.save(users);state.user.proAccounts=state.proAccounts;store.setSession({user:state.user,proAccounts:state.proAccounts});} // Update switcher const btn=document.getElementById('acc-o'); btn.style.display='flex'; btn.querySelector('.acc-email').textContent=proEmail; buildSettings(); } // ── Integrations ────────────────────────────────────────────────────────── const INTS=[{e:'🗓️',n:'Google Calendar',s:'connected'},{e:'📧',n:'Gmail',s:'connected'},{e:'💼',n:'Slack',s:'connected'},{e:'📹',n:'Zoom',s:'connected'},{e:'🗂️',n:'Notion',s:'connected'},{e:'🔵',n:'LinkedIn',s:'connected'},{e:'🚗',n:'Uber',s:'connected'},{e:'🏨',n:'Booking.com',s:'idle'},{e:'✈️',n:'Amadeus',s:'idle'},{e:'💳',n:'Stripe',s:'connected'},{e:'🏦',n:'Plaid',s:'idle'},{e:'📞',n:'Twilio',s:'connected'},{e:'🎵',n:'Spotify',s:'connected'},{e:'▶️',n:'YouTube',s:'idle'},{e:'🎮',n:'Twitch',s:'idle'},{e:'🗺️',n:'Google Maps',s:'connected'},{e:'📦',n:'DHL',s:'idle'},{e:'🛒',n:'Shopify',s:'idle'},{e:'🍔',n:'Uber Eats',s:'idle'},{e:'⭐',n:'Yelp',s:'idle'},{e:'🏥',n:'Doctolib',s:'idle'},{e:'❤️',n:'Apple Health',s:'connected'},{e:'📊',n:'Google Drive',s:'connected'},{e:'📋',n:'Trello',s:'idle'},{e:'🎫',n:'Ticketmaster',s:'idle'},{e:'📅',n:'Eventbrite',s:'idle'},{e:'📚',n:'Google Books',s:'idle'},{e:'🎧',n:'Podcast Index',s:'idle'},{e:'🏢',n:'Salesforce',s:'idle'},{e:'💬',n:'WhatsApp',s:'connected'},{e:'✈️',n:'Skyscanner',s:'idle'},{e:'🏠',n:'Airbnb',s:'idle'},{e:'💰',n:'PayPal',s:'connected'},{e:'📱',n:'TikTok',s:'idle'},{e:'🛍️',n:'Amazon',s:'idle'},{e:'🔐',n:'GitHub',s:'connected'}]; function buildIntegrations() { document.getElementById('int-grid').innerHTML=INTS.map(i=>``).join(''); }