Pup - the AI's own browser

@@ -11389,6 +11389,8 @@ select,input{background:#111b23;color:#e6edf3;border:1px solid #23303c;border-ra .strow6.mcur{border-color:#00b8b1;box-shadow:0 0 0 1px #00b8b1 inset} .stlbl{flex:0 0 175px;font:600 12px 'Familjen Grotesk',sans-serif;color:#c9d1d9} .sticons{display:flex;gap:10px;flex-wrap:wrap;align-items:center}+.mbcard{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:5px;background:#202124;display:flex;align-items:center;justify-content:center;overflow:hidden}+.mbcard img{width:16px;height:16px;object-fit:contain} .srow{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid #21262d} .srow:last-child{border-bottom:none} .srow .stxt{flex:1 1 auto;min-width:0}@@ -11801,25 +11803,26 @@ function renderDlg(){ // so the strip always shows a range of name lengths. function paintThreadExamples(){   const strip=_q('#texstrip'); if(!strip) return;-  // v2.0.203 (John: "show the EXACT SAME sample windows' taskbar icons for each of the 6 states").-  // The preview is now SIX MINI-TASKBAR ROWS over ONE fixed sample set (the live windows), so every-  // state is an apples-to-apples rendering of the same windows:-  //   tiles rows  -> one name tile per THREAD (real tile renderer) + that thread's real badge-  //   aumid rows  -> one icon per WINDOW (the actual registered icon via stampicon) + real badge-  //   plain rows  -> ONE stock Chrome button (actual exe icon) + one real badge when overlay is on-  // Rows highlight the CURRENT state, carry the default chip, and click-to-switch.+  // v2.0.204 (John, the final spec): the examples are FIVE FIXED CANONICAL SAMPLES — wiki page,+  // dashboard app, ti.com, mouser, digikey — rendered identically under every one of the six+  // states, from BUNDLED ground-truth art (each vendor's own favicon, the real category tiles, the+  // real Chrome-for-Testing icon). Always present, never dependent on which windows are open: the+  // rows exist to teach what the modes MEAN.   const st2=(SNAP&&SNAP.bridge&&SNAP.bridge.settings)||{};   const mode=st2.aumidIcons!=='on'?'plain':(st2.threadTiles==='on'?'tiles':'aumid');   const ovOn=st2.overlayBadges!=='off';-  const wins=((SNAP&&SNAP.windows)||[]).filter(function(w){return (w.sessionId||w.id);});-  const V='&v='+(typeof PAGE_VERSION!=='undefined'?PAGE_VERSION:'0');-  const threads=[]; const sidByOwner={};-  wins.forEach(function(w){const t=w.owner||w.ownerThread||'window';const sid=w.sessionId||w.id;-    if(threads.indexOf(t)<0)threads.push(t); if(!sidByOwner[t])sidByOwner[t]=sid;});-  function badge(sid){ return '<img class="mbadge" src="/dashboard/badge?session='+encodeURIComponent(sid)+V+'" data-fbb="1">'; }-  function tileIc(name,withBadge){ return '<span class="mic"><canvas width="128" height="128" data-tname="'+esc(name)+'"></canvas>'+(withBadge&&sidByOwner[name]?badge(sidByOwner[name]):'')+'</span>'; }-  function aumidIc(sid,withBadge){ return '<span class="mic"><img class="mbase" src="/dashboard/stampicon?session='+encodeURIComponent(sid)+V+'" data-fb="1">'+(withBadge?badge(sid):'')+'</span>'; }-  function plainIc(withBadge){ return '<span class="mic"><img class="mbase" src="/dashboard/baseicon?profile=adom-you'+V+'">'+(withBadge?'<img class="mbadge" src="/dashboard/bestbadge?'+V.slice(1)+'" data-fbb="1">':'')+'</span>'; }+  const V='v='+(typeof PAGE_VERSION!=='undefined'?PAGE_VERSION:'0');+  const SAMPLES=[+    {tile:'wiki',    fav:'/dashboard/sample-favicon?n=wiki&'+V,    cat:'wiki', dark:false},+    {tile:'dash',    fav:'/dashboard/icon.svg?'+V,                 cat:'app',  dark:false},+    {tile:'ti.com',  fav:'/dashboard/sample-favicon?n=ti&'+V,      cat:'web',  dark:false},+    {tile:'mouser',  fav:'/dashboard/sample-favicon?n=mouser&'+V,  cat:'web',  dark:false},+    {tile:'digikey', fav:'/dashboard/sample-favicon?n=digikey&'+V, cat:'web',  dark:false},+  ];+  function fb(sm){ return '<span class="mbcard"><img src="'+sm.fav+'" alt=""></span>'; }+  function tileIc(sm,ov){ return '<span class="mic"><canvas width="128" height="128" data-tname="'+esc(sm.tile)+'"></canvas>'+(ov?fb(sm):'')+'</span>'; }+  function aumidIc(sm,ov){ return '<span class="mic"><img class="mbase" src="/dashboard/sample-cat?k='+sm.cat+'&'+V+'" data-catfb="'+sm.cat+'">'+(ov?fb(sm):'')+'</span>'; }+  function plainIc(ov){ return '<span class="mic"><img class="mbase" src="/dashboard/baseicon?profile=adom-you&'+V+'">'+(ov?fb(SAMPLES[0]):'')+'</span>'; }   const states=[     ['tiles',true, '1. tiles + overlay'],     ['tiles',false,'2. tiles'],@@ -11833,23 +11836,26 @@ function paintThreadExamples(){     const cur=(m===mode&&ov===ovOn);     const isDefault=(m==='tiles'&&ov);     let icons='';-    if(!wins.length){ icons='<span class="texn">(no live windows to sample — open a pup window and reopen Settings)</span>'; }-    else if(m==='tiles'){ icons=threads.map(function(t){return tileIc(t,ov);}).join(''); }-    else if(m==='aumid'){ icons=wins.map(function(w){return aumidIc(w.sessionId||w.id,ov);}).join(''); }-    else { icons=plainIc(ov); }+    if(m==='tiles'){ icons=SAMPLES.map(function(sm){return tileIc(sm,ov);}).join(''); }+    else if(m==='aumid'){ icons=SAMPLES.map(function(sm){return aumidIc(sm,ov);}).join(''); }+    else { icons=plainIc(ov)+'<span class="texn" style="align-self:center">all 5 sample windows stack here</span>'; }     return '<div class="strow6'+(cur?' mcur':'')+'" data-si="'+i+'" title="click to switch to this state">'       +'<span class="stlbl">'+lbl+(cur?' (current)':'')+(isDefault?' <span class="mdef">default</span>':'')+'</span>'       +'<div class="sticons">'+icons+'</div></div>';   }).join('')+'</div>';   const cap=strip.parentElement?strip.parentElement.querySelector('.texcap'):null;-  if(cap)cap.textContent='The SAME sample windows rendered under every state: tiles rows show one name tile per thread (drawn by the real tile renderer) with that thread\u2019s real composed badge; aumid rows show each window\u2019s actual registered icon; plain rows show the actual Chrome-for-Testing icon. Badges are the exact PNGs pup handed Windows. Click a row to switch. Sampling '+wins.length+' live window(s) across '+threads.length+' thread(s).';+  if(cap)cap.textContent='Five canonical sample windows — a wiki page, the pup dashboard app, ti.com, mouser and digikey — rendered under every state so you can compare like for like. Tiles are drawn by the real tile renderer; category icons and the Chrome icon are the real registered art; badges are each site\u2019s own favicon. Click a row to switch to it.';   strip.querySelectorAll('canvas[data-tname]').forEach(function(cv){ drawNameTile(cv.getContext('2d'),128,cv.getAttribute('data-tname')); });-  strip.querySelectorAll('img.mbadge[data-fbb]').forEach(function(im){-    im.onload=function(){ if(im.naturalWidth<=2){ im.remove(); } };-    im.onerror=function(){ im.remove(); };-  });-  strip.querySelectorAll('img.mbase[data-fb]').forEach(function(im){-    im.onerror=function(){ im.style.display='none'; };+  strip.querySelectorAll('img[data-catfb]').forEach(function(im){+    im.onerror=function(){+      const cv=document.createElement('canvas'); cv.width=128; cv.height=128; cv.className='mbase';+      const ctx=cv.getContext('2d'),box=128;+      rr(ctx,0,0,box,box,box*0.14,'#00b8b1');+      rr(ctx,box*0.18,box*0.18,box*0.64,box*0.64,box*0.1,'#053b38');+      ctx.strokeStyle='#7fe7e2';ctx.lineWidth=box*0.045;+      ctx.beginPath();ctx.arc(box/2,box/2,box*0.19,0,7);ctx.stroke();+      im.replaceWith(cv);+    };   });   strip.querySelectorAll('.strow6').forEach(function(row,i){     row.onclick=function(){@@ -12407,6 +12413,34 @@ const server = http.createServer(async (req, res) => {         res.end(buf); return;       } catch (e) { res.writeHead(404); res.end(); return; }     }+    if (pathname === '/dashboard/sample-favicon') {+      // v2.0.204 (John: the Settings examples are CANONICAL — wiki page, dashboard app, ti.com,+      // mouser, digikey — so users learn what the modes mean regardless of what is open): serve the+      // bundled ground-truth favicons fetched from each vendor's own site (ti's is the red Texas+      // logo pup's live pipeline cannot fetch yet, #55 — the example is still correct art).+      try {+        const n = (url.searchParams.get('n') || '').replace(/[^a-z]/g, '');+        const map = { wiki: ['wiki.svg', 'image/svg+xml'], ti: ['ti.ico', 'image/x-icon'], mouser: ['mouser.ico', 'image/x-icon'], digikey: ['digikey.svg', 'image/svg+xml'] };+        if (map[n]) {+          const buf = fs.readFileSync(path.join(__dirname, 'icons', 'settings-samples', map[n][0]));+          res.writeHead(200, { 'Content-Type': map[n][1], 'Cache-Control': 'public, max-age=3600' });+          res.end(buf); return;+        }+      } catch (e) {}+      res.writeHead(404); res.end(); return;+    }+    if (pathname === '/dashboard/sample-cat') {+      // The real registered category tiles (wiki signed-in / app / web) as PNG, for the aumid rows.+      try {+        const k = (url.searchParams.get('k') || '').replace(/[^a-z]/g, '');+        const name = { wiki: 'pup-cat-wikiin9.ico', app: 'pup-cat-app9.ico', web: 'pup-cat-web9.ico' }[k];+        if (name) {+          const inner = icoLargestPng(fs.readFileSync(path.join(_NOTCH_CACHE, name)));+          if (inner) { res.writeHead(200, { 'Content-Type': 'image/png', 'Cache-Control': 'public, max-age=3600' }); res.end(inner); return; }+        }+      } catch (e) {}+      res.writeHead(404); res.end(); return;+    }     if (pathname === '/dashboard/bestbadge') {       // v2.0.201 (John: the matrix overlay cells showed blank circles): serve the composed badge of       // a session whose favicon is REAL (kind page-favicon), so the Settings preview always has an