Update index.html

index.html

@@ -160,10 +160,44 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
 .think-body{margin-top:7px;display:none;border-top:1px solid rgba(13,148,136,.15);padding-top:7px;font-size:12px;color:var(--ink3);line-height:1.6;}
 .think-blk.open .think-body{display:block;}
 
-.bubble pre{background:#0d1117;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px 12px;margin:7px 0;overflow-x:auto;font-family:var(--fm);font-size:11.5px;line-height:1.6;}
+.bubble pre{background:#0d1117;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px 12px;margin:7px 0;overflow-x:auto;font-family:var(--fm);font-size:11.5px;line-height:1.6;position:relative;}
 .bubble code{font-family:var(--fm);font-size:11.5px;background:var(--fog);padding:1px 5px;border-radius:4px;}
 .bubble pre code{background:transparent;padding:0;}
 
+/* Code copy button */
+.code-wrap{position:relative;margin:7px 0;}
+.code-wrap pre{margin:0;}
+.code-header{display:flex;justify-content:space-between;align-items:center;padding:6px 14px;background:#161b22;border-radius:8px 8px 0 0;border:1px solid rgba(255,255,255,.08);border-bottom:none;}
+.code-lang-tag{font-size:11px;font-weight:600;color:#8b949e;font-family:var(--fm);}
+.copy-btn{padding:3px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#8b949e;font-size:10px;font-weight:600;cursor:pointer;font-family:var(--fm);transition:all .2s;}
+.copy-btn:hover{background:rgba(255,255,255,.12);color:#c9d1d9;}
+.copy-btn.copied{background:rgba(22,163,74,.15);color:#16a34a;border-color:rgba(22,163,74,.3);}
+.code-wrap pre{border-radius:0 0 8px 8px;}
+
+/* Response speed badge */
+.speed-badge{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:2px 8px;border-radius:12px;background:rgba(109,40,217,.06);border:1px solid rgba(109,40,217,.12);font-size:9px;font-weight:600;font-family:var(--fm);color:var(--v);}
+
+/* Reasoning depth badge */
+.reason-badge{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:2px 8px;border-radius:12px;background:rgba(13,148,136,.06);border:1px solid rgba(13,148,136,.15);font-size:9px;font-weight:600;font-family:var(--fm);color:var(--teal);}
+
+/* Search bar */
+.search-bar{display:none;padding:8px 18px 0;}
+.search-bar.show{display:block;}
+.search-wrap{display:flex;gap:6px;align-items:center;}
+.search-input{flex:1;padding:7px 12px;border-radius:var(--r-xs);border:1.5px solid var(--line);background:var(--fog);font-family:var(--fb);font-size:12px;color:var(--ink);outline:none;transition:border-color .2s;}
+.search-input:focus{border-color:rgba(109,40,217,.35);}
+.search-go{padding:7px 14px;border-radius:var(--r-xs);border:none;background:linear-gradient(135deg,#6d28d9,#7c3aed);color:#fff;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--fb);}
+.search-results{margin-top:6px;padding:8px 10px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-xs);font-size:11px;max-height:150px;overflow-y:auto;display:none;}
+.search-results.show{display:block;}
+.sr-item{padding:4px 0;border-bottom:1px solid var(--fog);}
+.sr-item:last-child{border:none;}
+.sr-title{font-weight:700;color:var(--ink);font-size:11px;}
+.sr-desc{color:var(--ink3);font-size:10px;line-height:1.4;}
+.sr-url{color:var(--v);font-size:9px;text-decoration:none;}
+
+/* PDF indicator */
+.pdf-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;background:rgba(225,29,72,.06);border:1px solid rgba(225,29,72,.15);font-size:10px;font-weight:600;color:var(--rose);}
+
 .typing{display:flex;align-items:center;gap:5px;padding:12px 15px;}
 .typing span{width:6px;height:6px;border-radius:50%;background:var(--v2);opacity:.4;animation:bounce .8s ease-in-out infinite;}
 .typing span:nth-child(2){animation-delay:.15s;}
@@ -240,6 +274,16 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
       </div>
       <div class="mc-desc">MRI-guided evolutionary merge · Surpassed both parents · 201 languages · 262K context</div>
       <a href="https://huggingface.co/FINAL-Bench/Darwin-35B-A3B-Opus" target="_blank" style="display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:10px;font-weight:700;color:var(--v);text-decoration:none;padding:4px 10px;border-radius:16px;background:var(--vg);border:1px solid rgba(109,40,217,.15);transition:all .2s;">🤗 Model Card ↗</a>
+      <div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;">
+        <a href="https://huggingface.co/spaces/FINAL-Bench/Leaderboard" target="_blank" style="display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:700;color:#059669;text-decoration:none;padding:3px 8px;border-radius:12px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.15);transition:all .2s;">🏆 FINAL Bench</a>
+        <a href="https://huggingface.co/spaces/FINAL-Bench/all-bench-leaderboard" target="_blank" style="display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:700;color:var(--amber);text-decoration:none;padding:3px 8px;border-radius:12px;background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.15);transition:all .2s;">📊 ALL Bench</a>
+        <a href="https://huggingface.co/spaces/MAYA-AI/all-leaderboard" target="_blank" style="display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:700;color:var(--v);text-decoration:none;padding:3px 8px;border-radius:12px;background:rgba(109,40,217,.06);border:1px solid rgba(109,40,217,.12);transition:all .2s;">🌐 MAYA LB</a>
+      </div>
+      <div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;">
+        <a href="https://huggingface.co/spaces/FINAL-Bench/Leaderboard" target="_blank" style="font-size:8px;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.18);color:#16a34a;text-decoration:none;transition:all .2s;">🏆 FINAL Bench</a>
+        <a href="https://huggingface.co/spaces/FINAL-Bench/all-bench-leaderboard" target="_blank" style="font-size:8px;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.18);color:#d97706;text-decoration:none;transition:all .2s;">📊 ALL Bench</a>
+        <a href="https://huggingface.co/spaces/MAYA-AI/all-leaderboard" target="_blank" style="font-size:8px;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(109,40,217,.08);border:1px solid rgba(109,40,217,.18);color:var(--v);text-decoration:none;transition:all .2s;">🌐 MAYA LB</a>
+      </div>
     </div>
 
     <!-- Settings -->
@@ -291,6 +335,9 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
       </div>
       <div style="display:flex;align-items:center;gap:12px;">
         <a href="https://huggingface.co/FINAL-Bench/Darwin-35B-A3B-Opus" target="_blank" style="display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:22px;background:linear-gradient(135deg,rgba(109,40,217,.1),rgba(16,185,129,.08));border:1.5px solid rgba(109,40,217,.25);color:var(--v);font-size:12px;font-weight:700;text-decoration:none;transition:all .22s;font-family:var(--fm);">🤗 Model Card ↗</a>
+        <a href="https://huggingface.co/spaces/FINAL-Bench/Leaderboard" target="_blank" style="padding:4px 9px;border-radius:14px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.18);color:#16a34a;font-size:9px;font-weight:700;text-decoration:none;font-family:var(--fm);">🏆 FINAL</a>
+        <a href="https://huggingface.co/spaces/FINAL-Bench/all-bench-leaderboard" target="_blank" style="padding:4px 9px;border-radius:14px;background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.18);color:#d97706;font-size:9px;font-weight:700;text-decoration:none;font-family:var(--fm);">📊 ALL</a>
+        <a href="https://huggingface.co/spaces/MAYA-AI/all-leaderboard" target="_blank" style="padding:4px 9px;border-radius:14px;background:rgba(109,40,217,.08);border:1px solid rgba(109,40,217,.18);color:var(--v);font-size:9px;font-weight:700;text-decoration:none;font-family:var(--fm);">🌐 MAYA</a>
         <a class="hf-login-btn" id="loginBtn" href="/oauth/login">
           <svg viewBox="0 0 120 120" width="16" height="16"><path fill="currentColor" d="M41.7 56.6c-5 0-8.8 4-8.8 9s3.8 9 8.8 9 8.8-4 8.8-9-3.8-9-8.8-9zm36.6 0c-5 0-8.8 4-8.8 9s3.8 9 8.8 9 8.8-4 8.8-9-3.8-9-8.8-9z"/></svg>
           Sign in with HF
@@ -328,17 +375,28 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
         <div class="ex-grid">
           <div class="ex-card" onclick="sendEx('Explain how Darwin V5 evolutionary merge with Model MRI works, and why it surpasses both parent models.')"><span class="ex-icon">🧬</span><div class="ex-title">Darwin Architecture</div><div class="ex-desc">How evolutionary merge works</div></div>
           <div class="ex-card" onclick="sendEx('Write a Python async web scraper with retry logic and rate limiting. Include type hints.')"><span class="ex-icon">💻</span><div class="ex-title">Code Generation</div><div class="ex-desc">Production-quality code</div></div>
-          <div class="ex-card" onclick="sendEx('Prove that √2 is irrational using proof by contradiction. Show every step.')"><span class="ex-icon">🔢</span><div class="ex-title">Math Reasoning</div><div class="ex-desc">Deep chain-of-thought</div></div>
+          <div class="ex-card" onclick="trySampleVision()"><span class="ex-icon">👁️</span><div class="ex-title">Vision Demo</div><div class="ex-desc">Try image analysis now</div></div>
           <div class="ex-card" onclick="sendEx('한국의 K-pop이 세계적으로 성공한 이유를 문화적, 경제적 관점에서 분석해주세요.')"><span class="ex-icon">🌐</span><div class="ex-title">201 Languages</div><div class="ex-desc">Korean, Japanese, Arabic…</div></div>
         </div>
       </div>
     </div>
 
+    <!-- Search Bar -->
+    <div class="search-bar" id="searchBar">
+      <div class="search-wrap">
+        <input class="search-input" id="searchInput" placeholder="Search the web..." onkeydown="if(event.key==='Enter')doSearch()">
+        <button class="search-go" onclick="doSearch()">🔍 Search</button>
+        <button class="icon-btn" onclick="toggleSearch()" style="font-size:12px;">✕</button>
+      </div>
+      <div class="search-results" id="searchResults"></div>
+    </div>
+
     <div class="inputbar">
       <div class="input-wrap">
         <textarea class="chat-ta" id="chatInput" placeholder="Message Darwin…" rows="1" onkeydown="handleKey(event)" oninput="autoGrow(this)"></textarea>
         <div class="input-acts">
-          <label class="icon-btn file-btn" id="fileLabel" title="Upload image">🖼<input type="file" accept="image/*" onchange="handleImg(this)" id="fileInput"></label>
+          <label class="icon-btn file-btn" id="fileLabel" title="Upload image or PDF">🖼<input type="file" accept="image/*,.pdf" onchange="handleFile(this)" id="fileInput"></label>
+          <button class="icon-btn" id="searchToggleBtn" onclick="toggleSearch()" title="Web search">🔍</button>
           <button class="icon-btn" onclick="clearChat()" title="New chat" style="font-size:16px;">🧬</button>
           <button class="send-btn" id="sendBtn" onclick="sendMsg()">➤</button>
         </div>
@@ -355,7 +413,7 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
 <div class="toast" id="toast"></div>
 
 <script>
-const S={vision:true,history:[],msgCount:0,totalTok:0,pending:null,busy:false,
+const S={vision:true,history:[],msgCount:0,totalTok:0,pending:null,busy:false,searchResults:null,
   presets:{
     general:'You are Darwin-35B-A3B-Opus, a highly capable reasoning model created by VIDRAFT via evolutionary merge. Think step by step for complex questions.',
     code:'You are an expert software engineer. Write clean, efficient, well-commented code. Explain your approach before writing.',
@@ -379,22 +437,87 @@ document.getElementById('visionToggle').addEventListener('change',function(){
 
 function setPreset(k){document.getElementById('sysPrompt').value=S.presets[k];showToast('Preset applied ✓');}
 
-// Image
-function handleImg(input){
+// File handling (image + PDF)
+function handleFile(input){
   const f=input.files[0];if(!f)return;
-  const r=new FileReader();
-  r.onload=e=>{
-    S.pending={data:e.target.result,name:f.name,size:fmtSz(f.size)};
-    document.getElementById('imgThumb').src=e.target.result;
-    document.getElementById('imgName').textContent=f.name;
-    document.getElementById('imgSize').textContent=fmtSz(f.size);
-    document.getElementById('imgPrev').classList.add('show');
-  };
-  r.readAsDataURL(f);
+  if(f.type==='application/pdf'){
+    // PDF handling
+    const r=new FileReader();
+    r.onload=async e=>{
+      S.pending={type:'pdf',data:e.target.result,name:f.name,size:fmtSz(f.size)};
+      document.getElementById('imgThumb').src='';
+      document.getElementById('imgThumb').style.display='none';
+      document.getElementById('imgName').textContent='📄 '+f.name;
+      document.getElementById('imgSize').textContent=fmtSz(f.size);
+      document.getElementById('imgPrev').classList.add('show');
+      // Extract text
+      try{
+        const res=await fetch('/api/extract-pdf',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({data:e.target.result})});
+        const data=await res.json();
+        if(data.text){S.pending.text=data.text;document.getElementById('imgSize').textContent=`${fmtSz(f.size)} · ${data.chars} chars extracted`;}
+      }catch(err){console.error('PDF extract failed:',err);}
+    };
+    r.readAsDataURL(f);
+  }else{
+    // Image handling
+    const r=new FileReader();
+    r.onload=e=>{
+      S.pending={type:'image',data:e.target.result,name:f.name,size:fmtSz(f.size)};
+      document.getElementById('imgThumb').src=e.target.result;
+      document.getElementById('imgThumb').style.display='block';
+      document.getElementById('imgName').textContent=f.name;
+      document.getElementById('imgSize').textContent=fmtSz(f.size);
+      document.getElementById('imgPrev').classList.add('show');
+    };
+    r.readAsDataURL(f);
+  }
 }
-function removeImg(){S.pending=null;document.getElementById('imgPrev').classList.remove('show');document.getElementById('fileInput').value='';}
+function removeImg(){S.pending=null;document.getElementById('imgPrev').classList.remove('show');document.getElementById('fileInput').value='';document.getElementById('imgThumb').style.display='block';}
 function fmtSz(b){return b<1048576?`${(b/1024).toFixed(0)} KB`:`${(b/1048576).toFixed(1)} MB`;}
 
+// Vision sample
+function trySampleVision(){
+  const sampleUrl='https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/transformers/rabbit.png';
+  S.pending={type:'image',data:sampleUrl,name:'sample_rabbit.png',size:'sample',isUrl:true};
+  document.getElementById('chatInput').value='Describe this image in detail. What story does it tell?';
+  sendMsg();
+}
+
+// Search
+function toggleSearch(){
+  const bar=document.getElementById('searchBar');
+  bar.classList.toggle('show');
+  if(bar.classList.contains('show'))document.getElementById('searchInput').focus();
+}
+async function doSearch(){
+  const q=document.getElementById('searchInput').value.trim();
+  if(!q)return;
+  const res=document.getElementById('searchResults');
+  res.innerHTML='<div style="color:var(--ink4);font-size:10px;">🔍 Searching...</div>';
+  res.classList.add('show');
+  try{
+    const r=await fetch('/api/search',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({query:q})});
+    const data=await r.json();
+    if(data.error){res.innerHTML=`<div style="color:var(--rose);font-size:10px;">❌ ${data.error}</div>`;return;}
+    if(!data.results||data.results.length===0){res.innerHTML='<div style="color:var(--ink4);">No results found</div>';return;}
+    let html=data.results.map(r=>`<div class="sr-item"><div class="sr-title">${esc(r.title)}</div><div class="sr-desc">${esc(r.desc)}</div><a class="sr-url" href="${r.url}" target="_blank">${r.url}</a></div>`).join('');
+    html+=`<button style="margin-top:6px;padding:4px 10px;border-radius:6px;border:1px solid var(--line);background:var(--vg);color:var(--v);font-size:10px;font-weight:600;cursor:pointer;font-family:var(--fb);" onclick="injectSearch()">📎 Inject into chat</button>`;
+    res.innerHTML=html;
+    S.searchResults=data.results;
+  }catch(e){res.innerHTML=`<div style="color:var(--rose);">Error: ${e.message}</div>`;}
+}
+function injectSearch(){
+  if(!S.searchResults)return;
+  const ctx=S.searchResults.map(r=>`• ${r.title}: ${r.desc}`).join('\n');
+  const inp=document.getElementById('chatInput');
+  const q=document.getElementById('searchInput').value.trim();
+  inp.value=`Based on the following web search results for "${q}":\n\n${ctx}\n\nPlease answer: ${q}`;
+  document.getElementById('searchBar').classList.remove('show');
+  document.getElementById('searchResults').classList.remove('show');
+  autoGrow(inp);
+  showToast('Search results injected ✓');
+}
+
 // Send
 function handleKey(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendMsg();}}
 function autoGrow(el){el.style.height='auto';el.style.height=Math.min(el.scrollHeight,150)+'px';}
@@ -410,11 +533,25 @@ async function sendMsg(){
 
   const imgSnap=S.pending?{...S.pending}:null;
   removeImg();
-  appendUser(msg,imgSnap);
+
+  // PDF: prepend extracted text to message
+  let finalMsg=msg;
+  let imgData=null;
+  if(imgSnap&&imgSnap.type==='pdf'&&imgSnap.text){
+    finalMsg=`[Document: ${imgSnap.name}]\n\n${imgSnap.text}\n\n---\n\n${msg}`;
+    appendUser(msg,null,'📄 '+imgSnap.name);
+  }else if(imgSnap&&imgSnap.type==='image'){
+    imgData=imgSnap.isUrl?null:imgSnap.data;  // URL images handled differently
+    appendUser(msg,imgSnap);
+  }else{
+    appendUser(msg);
+  }
+
+  const startTime=performance.now();
 
   const payload=[
-    msg,S.history,'⚡ Fast Mode  (direct answer)',
-    imgSnap?imgSnap.data:null,
+    finalMsg,S.history,'⚡ Fast Mode  (direct answer)',
+    imgData,
     document.getElementById('sysPrompt').value.trim()||S.presets.general,
     parseInt(document.getElementById('tokSl').value),
     parseFloat(document.getElementById('tempSl').value),
@@ -439,9 +576,12 @@ async function sendMsg(){
 
       const finish=text=>{
         if(done)return;done=true;es.close();
-        renderBot(botDiv,text);
+        const elapsed=(performance.now()-startTime)/1000;
+        const tokens=Math.round(text.length/4);
+        const speed=tokens/elapsed;
+        renderBot(botDiv,text,elapsed,tokens,speed);
         S.history.push([msg,stripThink(text)]);
-        S.msgCount+=2;S.totalTok+=Math.round(text.length/4);
+        S.msgCount+=2;S.totalTok+=tokens;
         updateStats();
         resolve();
       };
@@ -470,19 +610,21 @@ async function sendMsg(){
 function sendEx(t){document.getElementById('chatInput').value=t;sendMsg();}
 function hideWelcome(){const w=document.getElementById('welcome');if(w){w.style.transition='opacity .25s';w.style.opacity='0';setTimeout(()=>w.remove(),260);}}
 
-function appendUser(text,img){
+function appendUser(text,img,pdfLabel){
   const t=new Date().toLocaleTimeString('en',{hour:'2-digit',minute:'2-digit'});
-  const ih=img?`<img src="${img.data}" style="max-width:180px;border-radius:9px;margin-bottom:6px;display:block;">`:'';
+  let extra='';
+  if(img&&img.type==='image')extra=`<img src="${img.data}" style="max-width:180px;border-radius:9px;margin-bottom:6px;display:block;">`;
+  if(pdfLabel)extra=`<span class="pdf-badge">${esc(pdfLabel)}</span><br>`;
   const el=document.createElement('div');
   el.className='msg user';
-  el.innerHTML=`<div class="avatar">U</div><div class="body">${ih}<div class="bubble">${esc(text)}</div><div class="msg-time">${t}</div></div>`;
+  el.innerHTML=`<div class="avatar">U</div><div class="body">${extra}<div class="bubble">${esc(text)}</div><div class="msg-time">${t}</div></div>`;
   document.getElementById('msgs').appendChild(el);
   scrollDown();
 }
 function appendBot(){
   const el=document.createElement('div');
   el.className='msg bot';
-  el.innerHTML='<div class="avatar">🧬</div><div class="body"><div class="bubble"><div class="typing"><span></span><span></span><span></span></div></div><div class="msg-time">—</div></div>';
+  el.innerHTML='<div class="avatar">🧬</div><div class="body"><div class="bubble"><div class="typing"><span></span><span></span><span></span></div></div><div class="msg-time">—</div><div class="msg-badges"></div></div>';
   document.getElementById('msgs').appendChild(el);
   scrollDown();return el;
 }
@@ -511,38 +653,44 @@ function splitThinkAnswer(raw){
   return['',raw];
 }
 
-function renderBot(el,raw){
+function renderBot(el,raw,elapsed,tokens,speed){
   const t=new Date().toLocaleTimeString('en',{hour:'2-digit',minute:'2-digit'});
   el.querySelector('.msg-time').textContent=t;
   const b=el.querySelector('.bubble');
-  let thinkHtml='',ans=raw;
+  const badges=el.querySelector('.msg-badges');
+  let thinkHtml='',ans=raw,thinkChars=0;
   const tOpen=raw.indexOf('<think>'),tClose=raw.indexOf('</think>');
   const dOpen=raw.indexOf('<details>'),sClose=raw.indexOf('</summary>'),dClose=raw.indexOf('</details>');
 
   if(tOpen>=0&&tClose>tOpen){
     const chain=raw.slice(tOpen+7,tClose).trim();ans=raw.slice(tClose+8).trim();
-    thinkHtml=buildThink(chain);
+    thinkHtml=buildThink(chain);thinkChars=chain.length;
   }else if(tOpen>=0){
     const thinkLen=raw.length-tOpen-7;ans='';
     thinkHtml=`<div class="think-blk"><div class="think-hdr" style="cursor:default;">🧠 REASONING (${thinkLen} CHARS) <span class="typing" style="display:inline-flex;gap:4px;vertical-align:middle;margin-left:6px;"><span></span><span></span><span></span></span></div></div>`;
   }else if(dOpen>=0&&sClose>dOpen){
     const body=dClose>sClose?raw.slice(sClose+10,dClose):raw.slice(sClose+10);
     const chain=body.replace(/^> ?/gm,'').replace(/<[^>]+>/g,'').trim();
-    ans=dClose>0?raw.slice(dClose+10).trim():'';thinkHtml=buildThink(chain);
+    ans=dClose>0?raw.slice(dClose+10).trim():'';thinkHtml=buildThink(chain);thinkChars=chain.length;
   }else{
-    // Plain-text thinking detection
     const firstLine=raw.trim().split('\n')[0]||'';
     if(isThinkLine(firstLine)&&raw.length>20){
       const[think,answer]=splitThinkAnswer(raw);
-      if(think&&answer){
-        thinkHtml=buildThink(think);ans=answer;
-      }else if(think&&!answer){
+      if(think&&answer){thinkHtml=buildThink(think);ans=answer;thinkChars=think.length;}
+      else if(think&&!answer){
         ans='';
         thinkHtml=`<div class="think-blk"><div class="think-hdr" style="cursor:default;">🧠 REASONING (${raw.length} CHARS) <span class="typing" style="display:inline-flex;gap:4px;vertical-align:middle;margin-left:6px;"><span></span><span></span><span></span></span></div></div>`;
       }
     }
   }
   b.innerHTML=thinkHtml+md(ans);
+
+  // Speed + reasoning badges (only on final render)
+  if(elapsed&&badges){
+    let bh=`<span class="speed-badge">⚡ ${elapsed.toFixed(1)}s · ${tokens} tok · ${speed.toFixed(0)} tok/s</span>`;
+    if(thinkChars>0)bh+=`<span class="reason-badge">🧠 Deep Reasoning · ${thinkChars.toLocaleString()} chars analyzed</span>`;
+    badges.innerHTML=bh;
+  }
 }
 function buildThink(chain){
   if(!chain)return'';
@@ -555,21 +703,31 @@ function stripThink(t){
   return t;
 }
 
-// Marked.js
+// Marked.js + code copy
 (function setupMarked(){
   if(typeof marked==='undefined')return;
   const renderer=new marked.Renderer();
   renderer.code=(code,lang)=>{
     const language=lang&&hljs.getLanguage(lang)?lang:'plaintext';
-    const highlighted=hljs.highlight(typeof code==='object'?code.text:code,{language}).value;
-    const langLabel=language!=='plaintext'?`<span style="display:block;padding:6px 14px;font-size:11px;font-weight:600;color:#8b949e;border-bottom:1px solid rgba(255,255,255,.06)">${language}</span>`:'';
-    return`<div style="position:relative;margin:10px 0;border-radius:10px;overflow:hidden;background:#0d1117;border:1px solid rgba(255,255,255,.08)">${langLabel}<pre><code class="hljs language-${language}">${highlighted}</code></pre></div>`;
+    const codeText=typeof code==='object'?code.text:code;
+    const highlighted=hljs.highlight(codeText,{language}).value;
+    const langLabel=language!=='plaintext'?language:'code';
+    const escaped=codeText.replace(/'/g,"\\'").replace(/\n/g,"\\n");
+    return`<div class="code-wrap"><div class="code-header"><span class="code-lang-tag">${langLabel}</span><button class="copy-btn" onclick="copyCode(this,'${escaped}')">📋 Copy</button></div><pre style="border-radius:0 0 8px 8px;margin:0;border-top:none;"><code class="hljs language-${language}">${highlighted}</code></pre></div>`;
   };
   renderer.codespan=code=>`<code style="background:var(--fog);padding:1px 5px;border-radius:4px;font-family:var(--fm);font-size:11.5px">${code}</code>`;
   renderer.link=(href,title,text)=>`<a href="${typeof href==='object'?href.href:href}" target="_blank" rel="noopener">${text}</a>`;
   marked.setOptions({renderer,breaks:true,gfm:true});
 })();
 
+function copyCode(btn,code){
+  const text=code.replace(/\\n/g,'\n').replace(/\\'/g,"'");
+  navigator.clipboard.writeText(text).then(()=>{
+    btn.textContent='✅ Copied!';btn.classList.add('copied');
+    setTimeout(()=>{btn.textContent='📋 Copy';btn.classList.remove('copied');},2000);
+  });
+}
+
 function md(t){if(!t)return'';if(typeof marked!=='undefined'){try{return marked.parse(t);}catch(e){}}return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/`([^`]+)`/g,'<code>$1</code>').replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>').replace(/\n/g,'<br>');}
 function esc(t){return t?t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'):'';}
 function scrollDown(){const m=document.getElementById('msgs');m.scrollTop=m.scrollHeight;}