Pup - the AI's own browser

@@ -11239,6 +11239,12 @@ select,input{background:#111b23;color:#e6edf3;border:1px solid #23303c;border-ra .texcap{margin-top:6px;font-size:11px;color:#8b949e} .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: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}+.texnames{display:flex;flex-wrap:wrap;gap:12px;padding-top:10px;border-top:1px solid #30363d} .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}@@ -11651,71 +11657,106 @@ function renderDlg(){ // so the strip always shows a range of name lengths. function paintThreadExamples(){   const strip=_q('#texstrip'); if(!strip) return;-  // v2.0.180 (John: "if plain is a choice, SHOW them what plain means — you keep previewing Thread-  // Tiles for every mode and it's crazy confusing"): the preview now follows the SELECTED mode.+  // v2.0.180 (John): the preview is the FULL 6-state matrix — mode (tiles | aumid | plain) x+  // overlay badges (on | off) — every cell live-drawn, the CURRENT state highlighted, and every+  // cell CLICKABLE to jump straight to that combination. No more guessing what a choice means.   const st2=(SNAP&&SNAP.bridge&&SNAP.bridge.settings)||{};   const mode=st2.aumidIcons!=='on'?'plain':(st2.threadTiles==='on'?'tiles':'aumid');-  const cap=strip.parentElement?strip.parentElement.querySelector('.texcap'):null;-  if(mode==='plain'){-    strip.innerHTML='<div class="tex texwide"><img class="texbase" src="/dashboard/baseicon?profile=adom-you" alt="" onerror="this.style.display=String.fromCharCode(110,111,110,101)">'-      +'<span class="texn">every pup window</span></div>';-    if(cap)cap.textContent='Plain: pup does no branding at all. All pup windows stack under the stock Chrome-for-Testing button (its real icon shown above), exactly like any unbranded app. No name tiles, no per-window icons, no overlay badges.';-    return;-  }-  if(mode==='aumid'){-    strip.innerHTML='<img class="sexample" src="/dashboard/example?n=iconstylecat&v='+PAGE_VERSION+'" alt="aumid category icons" data-fallback="hide">';-    if(cap)cap.textContent='AUMID: every window gets its OWN taskbar button wearing a pup/category icon (real capture above). Tune it with the grouping and icon-style options below; the overlay badge rides each button.';-    return;-  }-  if(cap)cap.textContent='Your real thread names, drawn exactly as the taskbar draws them. The badge in the corner is the favicon of the active tab.';+  const ovOn=st2.overlayBadges!=='off';   const live=[];   try{ ((SNAP&&SNAP.windows)||[]).forEach(w=>{const t=w.owner||w.ownerThread;if(t&&live.indexOf(t)<0)live.push(t);}); }catch(e){}-  const fill=['kicad','nb','fusion','ah build','shotlog','adom-tts','pup bridge maintenance'];-  const names=live.concat(fill.filter(f=>live.indexOf(f)<0)).slice(0,8);-  strip.innerHTML=names.map(n=>'<div class="tex"><canvas width="128" height="128" data-tname="'+esc(n)+'"></canvas>'-    +'<span class="texn">'+esc(n)+'</span></div>').join('');-  strip.querySelectorAll('canvas[data-tname]').forEach(cv=>{-    const nm=cv.getAttribute('data-tname'), box=128, ctx=cv.getContext('2d');-    ctx.fillStyle='#00b8b1'; ctx.fillRect(0,0,box,box);-    // Same rules as renderThreadTileIco on the server: font-size FLOOR, truncate rather than shrink.-    const FLOOR=box*0.36;-    const wFor=(i,total)=>(total===2&&i===0)?box*0.80:box*0.92;-    const setF=(s)=>{ctx.font='700 '+s+"px 'Familjen Grotesk','Segoe UI',sans-serif";};-    const wid=(t,s)=>{setF(s);return ctx.measureText(t).width;};-    const fitSize=(lines)=>{let s=box*0.9;-      for(let i=0;i<90;i++){let ok=true;-        for(let j=0;j<lines.length;j++){if(wid(lines[j],s)>wFor(j,lines.length)){ok=false;break;}}-        if(ok&&lines.length*s*0.95<=box*0.88)break;s*=0.95;}-      return s;};-    const cands=[[nm]];const sp=nm.lastIndexOf(' '),hy=nm.indexOf('-');-    if(sp>0)cands.push([nm.slice(0,sp),nm.slice(sp+1)]);else if(hy>0)cands.push([nm.slice(0,hy+1),nm.slice(hy+1)]);-    if(sp<0&&hy<0&&nm.length>=7){const m=Math.ceil(nm.length/2);cands.push([nm.slice(0,m),nm.slice(m)]);}-    let best=[nm],bf=0;for(const c of cands){const f=fitSize(c);if(f>bf){bf=f;best=c;}}-    if(bf<FLOOR){bf=FLOOR;-      const take=(str,maxw)=>{let n=0;for(let i=1;i<=str.length;i++){if(wid(str.slice(0,i),FLOOR)<=maxw)n=i;else break;}return n;};-      let rest=String(nm).trim();const out=[];-      for(let ln=0;ln<2&&rest;ln++){-        let n=take(rest,wFor(ln,2));-        if(n>=rest.length){out.push(rest);rest='';break;}-        if(n<1)n=1;-        const seg=rest.slice(0,n+1);-        const bp=Math.max(seg.lastIndexOf(' '),seg.lastIndexOf('-'));-        const cut=(bp>=Math.ceil(n*0.5))?bp+(seg.charAt(bp)==='-'?1:0):n;-        out.push(rest.slice(0,cut).trim());-        rest=rest.slice(cut).replace(/^[ -]+/,'');}-      best=out.filter(Boolean);}-    setF(bf);ctx.fillStyle='#05221f';ctx.textAlign='left';ctx.textBaseline='alphabetic';-    const lh=bf*0.95,mx=box*0.055,baseY=box-box*0.05-bf*0.14;-    best.forEach((ln,i)=>ctx.fillText(ln,mx,baseY-(best.length-1-i)*lh));-    // the favicon badge that rides the top-right corner on the real button-    const bs=box*0.34,bx=box-bs-box*0.02,by=box*0.02;-    ctx.fillStyle='#8b5cf6';ctx.beginPath();-    if(ctx.roundRect)ctx.roundRect(bx,by,bs,bs,bs*0.22);else ctx.rect(bx,by,bs,bs);-    ctx.fill();-    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(p=>{ctx.beginPath();ctx.arc(bx+bs*p[0],by+bs*p[1],r,0,7);ctx.fill();});+  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){+    const m=c[0],ov=c[1];+    const cur=(m===mode&&ov===ovOn);+    return '<div class="mcell'+(cur?' mcur':'')+'" data-mi="'+i+'" title="click to switch to this combination">'+      +'<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>';+  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){+    const m=cv.getAttribute('data-mmode'), ov=cv.getAttribute('data-mov')==='1';+    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;+      ctx.beginPath();ctx.arc(box/2,box/2,box*0.19,0,7);ctx.stroke();+      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();+    }+    if(ov){+      const 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];+      setSetting('taskbarMode',c[0]);+      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){+  rr(ctx,0,0,box,box,0,'#00b8b1');+  const FLOOR=box*0.36;+  const wFor=function(i,total){return (total===2&&i===0)?box*0.80:box*0.92;};+  const setF=function(sz){ctx.font='700 '+sz+"px 'Familjen Grotesk','Segoe UI',sans-serif";};+  const wid=function(t,sz){setF(sz);return ctx.measureText(t).width;};+  const fitSize=function(lines){let sz=box*0.9;+    for(let i=0;i<90;i++){let okf=true;+      for(let j=0;j<lines.length;j++){if(wid(lines[j],sz)>wFor(j,lines.length)){okf=false;break;}}+      if(okf&&lines.length*sz*0.95<=box*0.88)break;sz*=0.95;}+    return sz;};+  const cands=[[nm]];const sp=nm.lastIndexOf(' '),hy=nm.indexOf('-');+  if(sp>0)cands.push([nm.slice(0,sp),nm.slice(sp+1)]);else if(hy>0)cands.push([nm.slice(0,hy+1),nm.slice(hy+1)]);+  if(sp<0&&hy<0&&nm.length>=7){const mm=Math.ceil(nm.length/2);cands.push([nm.slice(0,mm),nm.slice(mm)]);}+  let best=[nm],bf=0;for(const c of cands){const f=fitSize(c);if(f>bf){bf=f;best=c;}}+  if(bf<FLOOR){bf=FLOOR;+    const take=function(str,maxw){let n=0;for(let i=1;i<=str.length;i++){if(wid(str.slice(0,i),FLOOR)<=maxw)n=i;else break;}return n;};+    let rest=String(nm).trim();const out=[];+    for(let ln=0;ln<2&&rest;ln++){+      let n=take(rest,wFor(ln,2));+      if(n>=rest.length){out.push(rest);rest='';break;}+      if(n<1)n=1;+      const seg=rest.slice(0,n+1);+      const bp=Math.max(seg.lastIndexOf(' '),seg.lastIndexOf('-'));+      const cut=(bp>=Math.ceil(n*0.5))?bp+(seg.charAt(bp)==='-'?1:0):n;+      out.push(rest.slice(0,cut).trim());+      rest=rest.slice(cut).replace(/^[ -]+/,'');}+    best=out.filter(Boolean);}+  setF(bf);ctx.fillStyle='#05221f';ctx.textAlign='left';ctx.textBaseline='alphabetic';+  const lh=bf*0.95,mx=box*0.055,baseY=box-box*0.05-bf*0.14;+  best.forEach(function(ln,i){ctx.fillText(ln,mx,baseY-(best.length-1-i)*lh);});+}+ async function setSetting(key,value){   const j=await act({action:'set-setting',key,value});   if(j&&j.ok&&j.settings&&SNAP&&SNAP.bridge){SNAP.bridge.settings=j.settings;renderDlg();}