Pup - the AI's own browser

@@ -11329,7 +11329,8 @@ select,input{background:#111b23;color:#e6edf3;border:1px solid #23303c;border-ra .texwide{width:auto} .texbase{width:44px;height:44px;border-radius:7px;display:block} .texmatrix{display:grid;grid-template-columns:repeat(3,minmax(70px,1fr));gap:10px;margin-bottom:8px}-.mcell{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border:1px solid #30363d;border-radius:8px;cursor:pointer}+.mcell{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border:1px solid #30363d;border-radius:8px;cursor:pointer}+.mdef{position:absolute;top:4px;right:6px;font:600 8.5px 'Familjen Grotesk',sans-serif;color:#00b8b1;border:1px solid #00b8b1;border-radius:4px;padding:0 4px;letter-spacing:.04em} .mcell:hover{border-color:#8b949e} .mcell.mcur{border-color:#00b8b1;box-shadow:0 0 0 1px #00b8b1 inset} .mic canvas{width:44px;height:44px;border-radius:7px;display:block}@@ -11757,13 +11758,27 @@ function paintThreadExamples(){   const sampleName=live[0]||'kicad';   const cells=[];   [true,false].forEach(function(ov){ ['tiles','aumid','plain'].forEach(function(m){ cells.push([m,ov]); }); });-  strip.innerHTML='<div class="texmatrix">'+cells.map(function(c,i){+  var matrixHtml='<div class="texmatrix">'+cells.map(function(c,i){     const m=c[0],ov=c[1];     const cur=(m===mode&&ov===ovOn);+    const isDefault=(m==='tiles'&&ov);   // v2.0.189 (John): flag the suggested default combination     return '<div class="mcell'+(cur?' mcur':'')+'" data-mi="'+i+'" title="click to switch to this combination">'+      +(isDefault?'<span class="mdef">default</span>':'')       +'<div class="mic"><canvas width="128" height="128" data-mmode="'+m+'" data-mov="'+(ov?1:0)+'"></canvas></div>'       +'<span class="texn">'+m+(ov?' + overlay':'')+(cur?' (current)':'')+'</span></div>';   }).join('')+'</div>';+  // v2.0.189 (John: "the cells are blank and I can't click them"): the name strip used to be+  // APPENDED with innerHTML+= AFTER the matrix canvases were painted and wired — which re-creates+  // the whole subtree, wiping the painted pixels and orphaning every click handler. Build ALL the+  // HTML first, assign innerHTML ONCE, then paint canvases, then bind clicks.+  var namesHtml='';+  var names=[];+  if(mode==='tiles'){+    const fill=['kicad','nb','fusion','ah build','shotlog','adom-tts','pup bridge maintenance'];+    names=live.concat(fill.filter(function(f){return live.indexOf(f)<0;})).slice(0,8);+    namesHtml='<div class="texnames">'+names.map(function(n){return '<div class="tex"><canvas width="128" height="128" data-tname="'+esc(n)+'"></canvas><span class="texn">'+esc(n)+'</span></div>';}).join('')+'</div>';+  }+  strip.innerHTML=matrixHtml+namesHtml;   const cap=strip.parentElement?strip.parentElement.querySelector('.texcap'):null;   if(cap)cap.textContent='All six taskbar states, drawn by the same rules as the real icons: tiles = the thread NAME on the Adom tile; aumid = per-window pup/category icons; plain = the stock Chrome-for-Testing button, untouched. The small corner square is the overlay badge (active tab favicon + Adom mark). Click any cell to switch to it. Sample thread: "'+sampleName+'".';   strip.querySelectorAll('canvas[data-mmode]').forEach(function(cv){@@ -11771,7 +11786,6 @@ function paintThreadExamples(){     const box=128, ctx=cv.getContext('2d');     if(m==='tiles'){ drawNameTile(ctx,box,sampleName); }     else if(m==='aumid'){-      // the category tile look: teal rounded square, dark inset, globe ring (the open-web icon)       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;@@ -11779,7 +11793,6 @@ function paintThreadExamples(){       ctx.beginPath();ctx.ellipse(box/2,box/2,box*0.08,box*0.19,0,0,7);ctx.stroke();       ctx.beginPath();ctx.moveTo(box*0.31,box/2);ctx.lineTo(box*0.69,box/2);ctx.stroke();     } else {-      // plain: the stock Chrome-for-Testing mark (blue disc in a ring) on a neutral plate       rr(ctx,0,0,box,box,box*0.14,'#2a2f36');       ctx.fillStyle='#dfe3e8';ctx.beginPath();ctx.arc(box/2,box/2,box*0.30,0,7);ctx.fill();       ctx.fillStyle='#4a90e2';ctx.beginPath();ctx.arc(box/2,box/2,box*0.17,0,7);ctx.fill();@@ -11791,6 +11804,13 @@ function paintThreadExamples(){       [[0.32,0.34],[0.66,0.34],[0.32,0.68],[0.66,0.68]].forEach(function(pt){ctx.beginPath();ctx.arc(bx+bs*pt[0],by+bs*pt[1],r,0,7);ctx.fill();});     }   });+  strip.querySelectorAll('canvas[data-tname]').forEach(function(cv){+    const ctx=cv.getContext('2d'); drawNameTile(ctx,128,cv.getAttribute('data-tname'));+    const box=128,bs=box*0.34,bx=box-bs-box*0.02,by=box*0.02;+    rr(ctx,bx,by,bs,bs,bs*0.22,'#8b5cf6');+    ctx.fillStyle='#0d1117';const r=bs*0.11;+    [[0.32,0.34],[0.66,0.34],[0.32,0.68],[0.66,0.68]].forEach(function(pt){ctx.beginPath();ctx.arc(bx+bs*pt[0],by+bs*pt[1],r,0,7);ctx.fill();});+  });   strip.querySelectorAll('.mcell').forEach(function(cell,i){     cell.onclick=function(){       const c=cells[i];@@ -11798,19 +11818,6 @@ function paintThreadExamples(){       setSetting('overlayBadges',c[1]?'on':'off');     };   });-  // in tiles mode, ALSO show the live thread-name strip below the matrix (the part John liked)-  if(mode==='tiles'){-    const fill=['kicad','nb','fusion','ah build','shotlog','adom-tts','pup bridge maintenance'];-    const names=live.concat(fill.filter(function(f){return live.indexOf(f)<0;})).slice(0,8);-    strip.innerHTML+='<div class="texnames">'+names.map(function(n){return '<div class="tex"><canvas width="128" height="128" data-tname="'+esc(n)+'"></canvas><span class="texn">'+esc(n)+'</span></div>';}).join('')+'</div>';-    strip.querySelectorAll('canvas[data-tname]').forEach(function(cv){-      const ctx=cv.getContext('2d'); drawNameTile(ctx,128,cv.getAttribute('data-tname'));-      const box=128,bs=box*0.34,bx=box-bs-box*0.02,by=box*0.02;-      rr(ctx,bx,by,bs,bs,bs*0.22,'#8b5cf6');-      ctx.fillStyle='#0d1117';const r=bs*0.11;-      [[0.32,0.34],[0.66,0.34],[0.32,0.68],[0.66,0.68]].forEach(function(pt){ctx.beginPath();ctx.arc(bx+bs*pt[0],by+bs*pt[1],r,0,7);ctx.fill();});-    });-  } } function rr(ctx,x,y,w,h,r,fill){ctx.fillStyle=fill;ctx.beginPath();if(ctx.roundRect)ctx.roundRect(x,y,w,h,r);else ctx.rect(x,y,w,h);ctx.fill();} function drawNameTile(ctx,box,nm){