@weavetab/mcp 2.5.0-beta.0

package/ext-dist/manifest.json

@@ -0,0 +1,77 @@
+{
+  "manifest_version": 3,
+  "name": "Weavetab Agent",
+  "version": "1.0.63031",
+  "description": "Native browser agent for Weavetab MCP",
+  "permissions": [
+    "tabs",
+    "tabGroups",
+    "scripting",
+    "storage",
+    "webNavigation",
+    "activeTab",
+    "declarativeNetRequest",
+    "cookies",
+    "notifications",
+    "alarms",
+    "contextMenus",
+    "downloads",
+    "browsingData",
+    "sidePanel"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "side_panel": {
+    "default_path": "sidepanel.html"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content.js"
+      ],
+      "css": [
+        "styles.css"
+      ],
+      "run_at": "document_start",
+      "all_frames": true
+    }
+  ],
+  "action": {
+    "default_title": "Weavetab Agent"
+  },
+  "omnibox": {
+    "keyword": "Weavetab"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "dashboard.html",
+        "hud/*"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
+    }
+  ],
+  "commands": {
+    "toggle-hud": {
+      "suggested_key": {
+        "default": "Alt+Shift+W"
+      },
+      "description": "Toggle WeaveTab HUD"
+    },
+    "toggle-debug": {
+      "suggested_key": {
+        "default": "Alt+Shift+D"
+      },
+      "description": "Toggle WeaveTab Debug Menu"
+    }
+  }
+}

package/ext-dist/sidepanel/sidepanel.js

@@ -0,0 +1,25 @@
+"use strict";(()=>{var s=typeof browser<"u"?browser:chrome,Y=s.runtime.connect({name:"wt-sidepanel"});Y.onDisconnect.addListener(()=>{});var f=document.getElementById("tool-feed-container"),E=document.getElementById("thoughts-feed"),S=document.getElementById("notes-list"),$=document.getElementById("status-dot"),P=document.getElementById("status-label"),R=document.getElementById("badge-devmode"),w=document.getElementById("notes-input"),Z=document.getElementById("btn-send"),T=!1,c=!0,tt=500,et=200;function b(t){let e={idle:{dot:"#6b7280",label:"IDLE",color:"#6b7280"},weaving:{dot:"#3b82f6",label:"WEAVING",color:"#3b82f6"},stuck:{dot:"#f59e0b",label:"STUCK",color:"#f59e0b"},done:{dot:"#10b981",label:"DONE",color:"#10b981"}},{dot:n,label:a,color:d}=e[t]??e.idle;$.style.background=n,$.style.boxShadow=`0 0 6px ${n}`,P.textContent=a,P.style.color=d}var y=new Map;function N(t){let{name:e,status:n,args:a,result:d,id:z}=t,I=z??e,r=y.get(I),k=!r;k&&(r=document.createElement("div"),r.className="tool-call",y.set(I,r));let B={pending:{icon:"\u23F3",cls:"status-pending"},done:{icon:"\u2713",cls:"status-done"},error:{icon:"\u2717",cls:"status-error"}},{icon:J,cls:A}=B[n]??B.pending,O=a?JSON.stringify(a).slice(0,150):"",H=d?String(d).slice(0,120):"",j=new Date().toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"});if(r.innerHTML=`
+    <div class="tool-header">
+      <span style="font-weight:600;color:var(--text);">${v(e??"?")}</span>
+      <div style="display:flex;align-items:center;gap:6px;">
+        <span style="font-size:9px;color:var(--text-muted);">${j}</span>
+        <span class="${A}">${J}</span>
+      </div>
+    </div>
+    ${O?`<div class="tool-args">${v(O)}</div>`:""}
+    ${H?`<div class="tool-result ${A}">${v(H)}</div>`:""}
+  `,k){let x=f.querySelector(".empty");for(x&&x.remove(),f.prepend(r);f.children.length>tt;){let M=f.lastElementChild;if(M){let C=[...y.entries()].find(([,Q])=>Q===M)?.[0];C&&y.delete(C),M.remove()}}}}function G(t,e="thought"){let n=E.querySelector(".empty");n&&n.remove();let a=document.createElement("div");a.className=`thought-item thought-${e}`;let d=new Date().toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"});for(a.innerHTML=`<span class="thought-ts">${d}</span><span class="thought-text">${v(t)}</span>`,E.prepend(a);E.children.length>et;)E.lastElementChild?.remove()}function V(t){if(S.innerHTML="",!t?.length){S.innerHTML='<div class="task-item"><span class="task-icon" style="color:var(--text-muted)">\u25CB</span><span style="color:var(--text-muted)">No active mission</span></div>';return}t.forEach(e=>{let n=document.createElement("div");n.className="task-item",n.innerHTML=`<span class="task-icon">\u25C8</span><span>${v(e)}</span>`,S.appendChild(n)})}s.runtime.onMessage.addListener(t=>{switch(t.type){case"Weavetab_GROUP_STATE":case"WT_AGENT_STATUS":{let e=t.state??t.status;(e==="weaving"||e==="idle"||e==="stuck"||e==="done")&&b(e);break}case"Weavetab_STATE":{if(t.hud?.action){let e=String(t.hud.action).trim();if(e){let n=e.startsWith("[ERR]")?"error":e.startsWith("[OK]")?"done":"pending";N({id:`wt-state-${Date.now()}-${Math.random()}`,name:e,status:n,timestamp:Date.now()})}}break}case"TOOL_CALL_EVENT":case"WT_TOOL_CALL":{let e=t.payload??t.data??t;e?.name&&N(e),(e?.status==="pending"||e?.status==="done")&&b((e.status==="pending","weaving"));break}case"WT_THOUGHT":{t.text&&G(t.text,t.kind??"thought");break}case"WT_PLAN_UPDATE":{V(t.data?.tasks??[]);break}case"WT_CONFIG_UPDATE":case"Weavetab_CONFIG":{T=!!t.devMode,R.style.display=T?"inline-block":"none";break}}});var p=!0,l=document.getElementById("btn-master-visuals"),g=document.getElementById("btn-scripted-pill");s.storage.local.get(["wt_devMode","wt_plan","wt_agent_status","wt_scripted_pill","wt_master_visuals"],t=>{T=!!t.wt_devMode,R.style.display=T?"inline-block":"none",t.wt_plan?.tasks&&V(t.wt_plan.tasks),t.wt_agent_status&&b(t.wt_agent_status),c=t.wt_scripted_pill!==!1,F(),p=t.wt_master_visuals!==!1,U()});function U(){l&&(p?(l.textContent="Visuals: ON",l.classList.remove("off")):(l.textContent="Visuals: OFF",l.classList.add("off")))}function nt(t){s.runtime.sendMessage({type:"WT_TOGGLE_MASTER_VISUALS",enabled:t}).catch(()=>{}),s.tabs.query({},e=>{e.forEach(n=>{n.id&&s.tabs.sendMessage(n.id,{type:"WT_TOGGLE_MASTER_VISUALS",enabled:t}).catch(()=>{})})})}l&&l.addEventListener("click",()=>{p=!p,s.storage.local.set({wt_master_visuals:p}),U(),nt(p)});function F(){g&&(g.textContent=c?"Cursor Pills: ON":"Cursor Pills: OFF",g.style.opacity=c?"1":"0.5")}function st(t){s.tabs.query({},e=>{e.forEach(n=>{n.id&&s.tabs.sendMessage(n.id,{type:"WT_SCRIPTED_PILL_TOGGLE",enabled:t}).catch(()=>{})})})}g&&g.addEventListener("click",()=>{c=!c,s.storage.local.set({wt_scripted_pill:c}),F(),st(c)});var W="dom_target",u=null,i=document.getElementById("btn-snipe-trigger"),o=document.getElementById("snipe-popover"),_=document.getElementById("popover-opt-dom"),h=document.getElementById("popover-opt-vision"),L=document.getElementById("snipe-badge-container"),m=document.getElementById("snipe-badge-content"),D=document.getElementById("btn-remove-snipe");function it(t){if(t.stopPropagation(),!o)return;let e=o.style.display==="none";o.style.display=e?"flex":"none",i&&i.classList.toggle("active",e)}document.addEventListener("click",t=>{o&&o.style.display!=="none"&&!o.contains(t.target)&&t.target!==i&&(o.style.display="none",i&&i.classList.remove("active"))});i&&i.addEventListener("click",it);function q(t){W=t,o&&(o.style.display="none"),i&&i.classList.add("active"),_&&_.classList.toggle("active",t==="dom_target"),h&&h.classList.toggle("active",t==="visual_crop"),s.tabs.query({active:!0,currentWindow:!0},e=>{e[0]?.id&&s.tabs.sendMessage(e[0].id,{type:"WT_START_SNIPE",mode:W}).catch(()=>{})})}_&&_.addEventListener("click",()=>q("dom_target"));h&&h.addEventListener("click",()=>q("visual_crop"));function K(){u=null,L&&(L.style.display="none"),m&&(m.innerHTML=""),i&&i.classList.remove("active")}D&&D.addEventListener("click",K);function ot(t){if(u=t,i&&i.classList.remove("active"),!(!L||!m))if(L.style.display="flex",t.mode==="visual_crop"&&t.cropImage){let e=t.boundingRect?`${t.boundingRect.width}\xD7${t.boundingRect.height}px`:"WebP Image",n=t.cropImage?Math.round(t.cropImage.length/120):100;m.innerHTML=`
+      <img class="snipe-badge-thumb" src="${t.cropImage}" alt="crop preview" />
+      <div class="snipe-badge-meta">
+        <span class="snipe-badge-title">Vision Crop Attachment</span>
+        <span class="snipe-badge-subtitle">${e} \u2022 WebP Image (~${n} tokens)</span>
+      </div>
+    `}else{let e=t.elements?.length||0,n=t.elements?.[0]?.selector||t.elements?.[0]?.tag||"DOM Target";m.innerHTML=`
+      <div class="snipe-badge-icon-box">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+      </div>
+      <div class="snipe-badge-meta">
+        <span class="snipe-badge-title">DOM Target Attachment</span>
+        <span class="snipe-badge-subtitle">${e} elements \u2022 0 image tokens</span>
+      </div>
+    `}}s.runtime.onMessage.addListener(t=>{t.type==="WT_SNIPE_COMPLETED"&&t.payload&&ot(t.payload)});function X(){let t=w.value.trim();if(!t&&!u)return;let e={type:"WT_USER_NOTE",text:t||"(Targeted area annotation sent)",ts:Date.now()};u&&(e.snipe=u),s.runtime.sendMessage(e).catch(()=>{}),G(`[you] ${u?"[Snipe Attached] ":""}${t||"Annotation attached"}`,"action"),w.value="",K()}Z.addEventListener("click",X);w.addEventListener("keydown",t=>{t.key==="Enter"&&X()});function v(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}b("idle");})();

package/ext-dist/sidepanel.html

@@ -0,0 +1,547 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WEAVETAB_OS</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+
+    :root {
+      --bg:           #0d0d10;
+      --bg-panel:     #111113;
+      --bg-hover:     #1c1c1f;
+      --border:       #252529;
+      --text:         #e2e2ee;
+      --text-muted:   #52525b;
+      --accent:       #3b82f6;
+      --accent-hover: #2563eb;
+      --green:        #10b981;
+      --amber:        #f59e0b;
+      --red:          #ef4444;
+      --font:         'IBM Plex Mono', Consolas, monospace;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      background: var(--bg);
+      color: var(--text);
+      font-family: var(--font);
+      font-size: 11px;
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      overflow: hidden;
+    }
+
+    /* ── Header ─────────────────────────────────────────────────── */
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 14px;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    #status-dot {
+      width: 7px; height: 7px;
+      border-radius: 50%;
+      background: #6b7280;
+      flex-shrink: 0;
+      transition: background .3s, box-shadow .3s;
+    }
+    .title {
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.06em;
+      color: var(--text);
+      flex: 1;
+    }
+    #status-label {
+      font-size: 10px;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      color: var(--text-muted);
+      transition: color .3s;
+    }
+
+    /* ── Controls row ────────────────────────────────────────────── */
+    .controls-row {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 7px 14px;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    .badge {
+      font-size: 9px;
+      font-weight: 700;
+      padding: 2px 7px;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+    .badge.devmode { background: var(--accent); color: #fff; display: none; }
+    .badge.beta    { background: #78350f;       color: #fbbf24; }
+
+    /* ── Scripted pill toggle ────────────────────────────────────── */
+    .pill-toggle-bar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 14px 4px;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    #btn-master-visuals {
+      background: rgba(59, 130, 246, 0.12);
+      border: 1px solid var(--accent);
+      color: var(--accent);
+      font-family: var(--font);
+      font-size: 10px;
+      font-weight: 600;
+      padding: 3px 10px;
+      cursor: pointer;
+      letter-spacing: 0.04em;
+      border-radius: 4px;
+      transition: all .15s ease;
+    }
+    #btn-master-visuals:hover {
+      background: rgba(59, 130, 246, 0.25);
+    }
+    #btn-master-visuals.off {
+      border-color: var(--red);
+      color: var(--red);
+      background: rgba(239, 68, 68, 0.12);
+    }
+    #btn-scripted-pill {
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--text-muted);
+      font-family: var(--font);
+      font-size: 9px;
+      padding: 2px 8px;
+      cursor: pointer;
+      letter-spacing: 0.04em;
+      transition: color .15s, border-color .15s;
+    }
+    #btn-scripted-pill:hover { color: var(--text); border-color: #3f3f46; }
+
+
+    /* ── Content area ────────────────────────────────────────────── */
+    .content-area {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+    .content-area::-webkit-scrollbar { width: 3px; }
+    .content-area::-webkit-scrollbar-thumb { background: var(--border); }
+
+    /* ── Section ─────────────────────────────────────────────────── */
+    .section { border-bottom: 1px solid var(--border); }
+    .section-header {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 9px 14px;
+      color: var(--text-muted);
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      cursor: pointer;
+      user-select: none;
+      transition: color .15s;
+    }
+    .section-header:hover { color: var(--text); }
+    .section-arrow { font-size: 8px; }
+    .section-body {
+      padding: 0 14px 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .section.collapsed .section-body { display: none; }
+    .section.collapsed .section-arrow::before { content: '▶'; }
+    .section-arrow::before { content: '▼'; }
+
+    /* ── Tasks ───────────────────────────────────────────────────── */
+    .task-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      color: var(--text-muted);
+      padding: 2px 0;
+    }
+    .task-icon { flex-shrink: 0; color: var(--accent); }
+
+    /* ── Thoughts ────────────────────────────────────────────────── */
+    .thought-item {
+      display: flex;
+      gap: 8px;
+      padding: 3px 0;
+      border-bottom: 1px solid #1a1a1e;
+      line-height: 1.5;
+    }
+    .thought-ts {
+      color: var(--text-muted);
+      flex-shrink: 0;
+      font-size: 10px;
+    }
+    .thought-text { color: var(--text); word-break: break-word; }
+    .thought-action .thought-text { color: var(--accent); }
+
+    /* ── Tool calls ──────────────────────────────────────────────── */
+    .tool-call {
+      border: 1px solid var(--border);
+      background: #111116;
+      padding: 6px 8px;
+      margin-bottom: 4px;
+    }
+    .tool-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: var(--text);
+      font-weight: 500;
+      margin-bottom: 3px;
+    }
+    .tool-args, .tool-result {
+      font-size: 10px;
+      color: var(--text-muted);
+      word-break: break-all;
+      white-space: pre-wrap;
+    }
+    .tool-result.status-done  { color: var(--green); }
+    .tool-result.status-error { color: var(--red);   }
+    .status-pending { color: var(--amber); }
+    .status-done    { color: var(--green); }
+    .status-error   { color: var(--red);   }
+
+    /* ── Message input ───────────────────────────────────────────── */
+    .chat-bottom-bar {
+      padding: 10px 14px;
+      border-top: 1px solid var(--border);
+      background: var(--bg-panel);
+      flex-shrink: 0;
+    }
+    .chat-input-wrapper {
+      display: flex;
+      align-items: center;
+      border: 1px solid var(--border);
+      background: #18181b;
+      transition: border-color .15s;
+      border-radius: 4px;
+    }
+    .chat-input-wrapper:focus-within { border-color: var(--accent); }
+    .chat-input {
+      flex: 1;
+      background: transparent;
+      border: none;
+      color: var(--text);
+      font-family: var(--font);
+      font-size: 11px;
+      padding: 7px 10px;
+      outline: none;
+    }
+    .chat-input::placeholder { color: #3f3f46; }
+    .chat-send {
+      background: transparent;
+      border: none;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: var(--text-muted);
+      font-size: 14px;
+      flex-shrink: 0;
+      transition: color .15s;
+    }
+    .chat-send:hover { color: var(--accent); }
+
+    /* ── Snipe Popover & Attachment Chip ────────────────────────── */
+    .snipe-popover {
+      position: absolute;
+      bottom: 54px;
+      left: 10px;
+      background: rgba(24, 24, 27, 0.95);
+      backdrop-filter: blur(16px);
+      border: 1px solid rgba(255, 255, 255, 0.14);
+      border-radius: 10px;
+      padding: 6px;
+      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255,255,255,0.2);
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      z-index: 1000;
+      min-width: 175px;
+      animation: popoverIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    @keyframes popoverIn {
+      from { opacity: 0; transform: translateY(6px) scale(0.97); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    .snipe-popover-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      background: transparent;
+      border: 1px solid transparent;
+      color: #e4e4e7;
+      font-family: var(--font);
+      font-size: 11px;
+      font-weight: 500;
+      padding: 8px 10px;
+      border-radius: 7px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      width: 100%;
+      text-align: left;
+    }
+    .snipe-popover-item:hover {
+      background: rgba(255, 255, 255, 0.08);
+      color: #ffffff;
+    }
+    .snipe-popover-item.active {
+      background: rgba(56, 189, 248, 0.15);
+      color: #38bdf8;
+      border-color: rgba(56, 189, 248, 0.35);
+    }
+    .snipe-popover-tag {
+      margin-left: auto;
+      font-size: 9px;
+      font-weight: 600;
+      opacity: 0.8;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      padding: 2px 6px;
+      border-radius: 4px;
+      background: rgba(255,255,255,0.06);
+    }
+    .chat-input-btn {
+      background: transparent;
+      border: none;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: #a1a1aa;
+      flex-shrink: 0;
+      transition: all 0.15s ease;
+      border-radius: 6px;
+      margin-left: 2px;
+    }
+    .chat-input-btn:hover {
+      color: #38bdf8;
+      background: rgba(56, 189, 248, 0.12);
+    }
+    .chat-input-btn.active {
+      color: #38bdf8;
+      background: rgba(56, 189, 248, 0.22);
+    }
+    .snipe-badge-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: rgba(39, 39, 42, 0.85);
+      backdrop-filter: blur(12px);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      padding: 8px 12px;
+      border-radius: 10px;
+      margin-bottom: 8px;
+      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
+      animation: chipIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    @keyframes chipIn {
+      from { opacity: 0; transform: translateY(4px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .snipe-badge-content {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      overflow: hidden;
+    }
+    .snipe-badge-thumb {
+      width: 36px;
+      height: 36px;
+      object-fit: cover;
+      border-radius: 6px;
+      border: 1px solid rgba(255,255,255,0.18);
+      box-shadow: 0 2px 8px rgba(0,0,0,0.5);
+      flex-shrink: 0;
+    }
+    .snipe-badge-icon-box {
+      width: 36px;
+      height: 36px;
+      border-radius: 6px;
+      background: rgba(56, 189, 248, 0.12);
+      border: 1px solid rgba(56, 189, 248, 0.3);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #38bdf8;
+      flex-shrink: 0;
+    }
+    .snipe-badge-meta {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      overflow: hidden;
+    }
+    .snipe-badge-title {
+      font-weight: 600;
+      font-size: 11px;
+      color: #f4f4f5;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .snipe-badge-subtitle {
+      font-size: 9px;
+      color: #a1a1aa;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .snipe-badge-remove {
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      color: #a1a1aa;
+      cursor: pointer;
+      width: 22px;
+      height: 22px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.15s ease;
+      flex-shrink: 0;
+      margin-left: 8px;
+    }
+    .snipe-badge-remove:hover {
+      background: rgba(239, 68, 68, 0.2);
+      color: #f87171;
+      border-color: rgba(239, 68, 68, 0.4);
+    }
+    .snipe-badge-remove:hover {
+      background: rgba(239, 68, 68, 0.15);
+    }
+
+    /* ── Empty state ─────────────────────────────────────────────── */
+    .empty { color: var(--text-muted); padding: 2px 0; }
+  </style>
+</head>
+<body>
+
+  <!-- Header: status indicator -->
+  <div class="header">
+    <div id="status-dot"></div>
+    <div class="title">WEAVETAB_OS</div>
+    <div id="status-label">IDLE</div>
+  </div>
+
+  <!-- Controls -->
+  <div class="controls-row">
+    <div class="badge devmode" id="badge-devmode">DEVMODE</div>
+    <div class="badge beta">BETA</div>
+  </div>
+
+  <!-- Scrollable content -->
+  <div class="content-area">
+
+    <!-- THOUGHTS (live agent thought stream) -->
+    <div class="section" id="sec-thoughts">
+      <div class="section-header">
+        <span class="section-arrow"></span>THOUGHTS
+      </div>
+      <div class="section-body">
+        <div id="thoughts-feed">
+          <div class="empty">Waiting for agent activity…</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- TOOL CALLS -->
+    <div class="section" id="tool-feed-section">
+      <div class="section-header">
+        <span class="section-arrow"></span>TOOL CALLS
+      </div>
+      <div class="section-body">
+        <div id="tool-feed-container">
+          <div class="empty">No tool calls yet.</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- TASKS -->
+    <div class="section" id="sec-tasks">
+      <div class="section-header">
+        <span class="section-arrow"></span>TASKS
+      </div>
+      <div class="section-body">
+        <div id="notes-list">
+          <div class="task-item">
+            <span class="task-icon">○</span>
+            <span class="empty">No active mission</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="pill-toggle-bar">
+    <button id="btn-master-visuals">Visuals: ON</button>
+    <button id="btn-scripted-pill">Cursor Pills: ON</button>
+  </div>
+
+  <div class="chat-bottom-bar" style="position: relative;">
+
+    <!-- Mode Selector Popover -->
+    <div id="snipe-popover" class="snipe-popover" style="display: none;">
+      <button class="snipe-popover-item active" id="popover-opt-dom" title="Target Page Elements (0 Image Tokens)">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+        <span>DOM Target</span>
+        <span class="snipe-popover-tag">0 Tokens</span>
+      </button>
+      <button class="snipe-popover-item" id="popover-opt-vision" title="Crop Visual WebP Image">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+        <span>Vision Crop</span>
+        <span class="snipe-popover-tag">WebP</span>
+      </button>
+    </div>
+
+    <!-- Attachment Badge -->
+    <div id="snipe-badge-container" class="snipe-badge-container" style="display:none;">
+      <div class="snipe-badge-content" id="snipe-badge-content"></div>
+      <button class="snipe-badge-remove" id="btn-remove-snipe" title="Remove attachment">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+
+    <div class="chat-input-wrapper">
+      <button id="btn-snipe-trigger" class="chat-input-btn" title="Target Area on Tab (Alt+S)">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect x="7" y="7" width="10" height="10" rx="1"/></svg>
+      </button>
+      <input type="text" class="chat-input" id="notes-input" placeholder="Send a message or snipe instruction...">
+      <button class="chat-send" id="btn-send">↵</button>
+    </div>
+  </div>
+
+  <script src="sidepanel/sidepanel.js"></script>
+  <script>
+    // Collapsible section toggle
+    document.querySelectorAll('.section-header').forEach(h => {
+      h.addEventListener('click', () => {
+        h.closest('.section').classList.toggle('collapsed');
+      });
+    });
+  </script>
+</body>
+</html>