openmagic 0.1.0 → 0.4.0

package/dist/toolbar/index.global.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-"use strict";var OpenMagicToolbar=(()=>{var P=`
+"use strict";var OpenMagicToolbar=(()=>{var $=`
 :host {
   all: initial;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -481,25 +481,84 @@
 .om-pill-btn:hover .om-tooltip {
   opacity: 1;
 }
-`;var m=null,p=new Map,V=[],E=[],k=!1,w=null;function L(){return Math.random().toString(36).slice(2)+Date.now().toString(36)}function S(e,n){return new Promise((t,i)=>{try{m=new WebSocket(`ws://127.0.0.1:${e}/__openmagic__/ws`),m.onopen=()=>{let r=L();M({id:r,type:"handshake",payload:{token:n}}),p.set(r,a=>{if(a.type==="handshake.ok"){k=!0;for(let s of E)m?.send(s);E=[],t()}else a.type==="error"&&i(new Error(a.payload?.message||"Handshake failed"))})},m.onmessage=r=>{try{let a=JSON.parse(r.data);a.id&&p.has(a.id)&&(p.get(a.id)(a),(a.type==="llm.done"||a.type==="llm.error"||!a.type.startsWith("llm."))&&p.delete(a.id));for(let s of V)s(a)}catch{}},m.onclose=()=>{k=!1,w||(w=setTimeout(()=>{w=null,S(e,n).catch(()=>{})},2e3))},m.onerror=()=>{}}catch(r){i(r)}})}function M(e){let n=JSON.stringify(e);m&&k?m.send(n):E.push(n)}function g(e,n){return new Promise((t,i)=>{let r=L(),a=setTimeout(()=>{p.delete(r),i(new Error("Request timeout"))},3e4);p.set(r,s=>{clearTimeout(a),s.type==="error"?i(new Error(s.payload?.message||"Unknown error")):t(s)}),M({id:r,type:e,payload:n})})}function $(e,n,t){return new Promise((i,r)=>{let a=L(),s=setTimeout(()=>{p.delete(a),r(new Error("Stream timeout"))},12e4);p.set(a,l=>{l.type==="llm.chunk"?t(l.payload?.delta||""):l.type==="llm.done"?(clearTimeout(s),p.delete(a),i(l.payload)):(l.type==="llm.error"||l.type==="error")&&(clearTimeout(s),p.delete(a),r(new Error(l.payload?.message||"Stream error")))}),M({id:a,type:e,payload:n})})}var Q=["display","position","width","height","margin","padding","color","background-color","background","font-size","font-weight","font-family","border","border-radius","box-shadow","flex-direction","justify-content","align-items","gap","grid-template-columns","grid-template-rows","overflow","opacity","z-index","text-align","line-height","letter-spacing"];function N(e){let n=window.getComputedStyle(e),t={};for(let r of Q)t[r]=n.getPropertyValue(r);let i=e.getBoundingClientRect();return{tagName:e.tagName.toLowerCase(),id:e.id||"",className:e.className||"",textContent:(e.textContent||"").trim().slice(0,200),outerHTML:Z(e),cssSelector:ee(e),xpath:te(e),computedStyles:t,rect:{x:i.x,y:i.y,width:i.width,height:i.height}}}function Z(e){let n=e.cloneNode(!0);n.querySelectorAll("script, style, svg").forEach(r=>r.remove());let i=n.outerHTML;if(i.length>2e3){let r=e.tagName.toLowerCase(),a=Array.from(e.attributes).map(l=>`${l.name}="${l.value}"`).join(" "),s=Array.from(e.children).slice(0,5).map(l=>`<${l.tagName.toLowerCase()} .../>`).join(`
+
+/* Update indicator dot on pill */
+.om-update-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #00b894;
+  margin-left: 6px;
+  cursor: pointer;
+  position: relative;
+  animation: om-pulse-green 2s ease infinite;
+  flex-shrink: 0;
+}
+
+@keyframes om-pulse-green {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 184, 148, 0.5); }
+  50% { box-shadow: 0 0 0 6px rgba(0, 184, 148, 0); }
+}
+
+/* Update banner in settings */
+.om-update-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 10px 14px;
+  margin-bottom: 16px;
+  background: rgba(0, 184, 148, 0.08);
+  border: 1px solid rgba(0, 184, 148, 0.2);
+  border-radius: 10px;
+  font-size: 13px;
+  color: #00b894;
+}
+
+.om-update-current {
+  font-size: 11px;
+  color: #888;
+}
+
+.om-update-cmd {
+  display: block;
+  width: 100%;
+  margin-top: 4px;
+  padding: 6px 10px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
+  font-size: 12px;
+  color: #55efc4;
+  user-select: all;
+}
+
+/* Version in panel header */
+.om-panel-version {
+  font-size: 11px;
+  color: #555;
+  margin-left: auto;
+  margin-right: 8px;
+}
+`;var m=null,p=new Map,J=[],k=[],E=!1,w=null;function L(){return Math.random().toString(36).slice(2)+Date.now().toString(36)}function S(e,t){return new Promise((n,i)=>{try{m=new WebSocket(`ws://127.0.0.1:${e}/__openmagic__/ws`),m.onopen=()=>{let r=L();C({id:r,type:"handshake",payload:{token:t}}),p.set(r,a=>{if(a.type==="handshake.ok"){E=!0;for(let s of k)m?.send(s);k=[],n()}else a.type==="error"&&i(new Error(a.payload?.message||"Handshake failed"))})},m.onmessage=r=>{try{let a=JSON.parse(r.data);a.id&&p.has(a.id)&&(p.get(a.id)(a),(a.type==="llm.done"||a.type==="llm.error"||!a.type.startsWith("llm."))&&p.delete(a.id));for(let s of J)s(a)}catch{}},m.onclose=()=>{E=!1,w||(w=setTimeout(()=>{w=null,S(e,t).catch(()=>{})},2e3))},m.onerror=()=>{}}catch(r){i(r)}})}function C(e){let t=JSON.stringify(e);m&&E?m.send(t):k.push(t)}function u(e,t){return new Promise((n,i)=>{let r=L(),a=setTimeout(()=>{p.delete(r),i(new Error("Request timeout"))},3e4);p.set(r,s=>{clearTimeout(a),s.type==="error"?i(new Error(s.payload?.message||"Unknown error")):n(s)}),C({id:r,type:e,payload:t})})}function N(e,t,n){return new Promise((i,r)=>{let a=L(),s=setTimeout(()=>{p.delete(a),r(new Error("Stream timeout"))},12e4);p.set(a,l=>{l.type==="llm.chunk"?n(l.payload?.delta||""):l.type==="llm.done"?(clearTimeout(s),p.delete(a),i(l.payload)):(l.type==="llm.error"||l.type==="error")&&(clearTimeout(s),p.delete(a),r(new Error(l.payload?.message||"Stream error")))}),C({id:a,type:e,payload:t})})}var Z=["display","position","width","height","margin","padding","color","background-color","background","font-size","font-weight","font-family","border","border-radius","box-shadow","flex-direction","justify-content","align-items","gap","grid-template-columns","grid-template-rows","overflow","opacity","z-index","text-align","line-height","letter-spacing"];function O(e){let t=window.getComputedStyle(e),n={};for(let r of Z)n[r]=t.getPropertyValue(r);let i=e.getBoundingClientRect();return{tagName:e.tagName.toLowerCase(),id:e.id||"",className:e.className||"",textContent:(e.textContent||"").trim().slice(0,200),outerHTML:ee(e),cssSelector:te(e),xpath:ne(e),computedStyles:n,rect:{x:i.x,y:i.y,width:i.width,height:i.height}}}function ee(e){let t=e.cloneNode(!0);t.querySelectorAll("script, style, svg").forEach(r=>r.remove());let i=t.outerHTML;if(i.length>2e3){let r=e.tagName.toLowerCase(),a=Array.from(e.attributes).map(l=>`${l.name}="${l.value}"`).join(" "),s=Array.from(e.children).slice(0,5).map(l=>`<${l.tagName.toLowerCase()} .../>`).join(`
   `);i=`<${r} ${a}>
   ${s}
   ${e.children.length>5?`<!-- +${e.children.length-5} more children -->`:""}
-</${r}>`}return i}function ee(e){if(e.id)return`#${e.id}`;let n=[],t=e;for(;t&&t!==document.body;){let i=t.tagName.toLowerCase();if(t.id){n.unshift(`#${t.id}`);break}if(t.className&&typeof t.className=="string"){let a=t.className.trim().split(/\s+/).filter(s=>!s.startsWith("__")&&s.length<30).slice(0,2);a.length>0&&(i+="."+a.join("."))}let r=t.parentElement;if(r){let a=Array.from(r.children).filter(s=>s.tagName===t.tagName);if(a.length>1){let s=a.indexOf(t)+1;i+=`:nth-child(${s})`}}n.unshift(i),t=t.parentElement}return n.join(" > ")}function te(e){let n=[],t=e;for(;t&&t!==document;){if(t.nodeType===Node.ELEMENT_NODE){let i=t,r=1,a=i.previousElementSibling;for(;a;)a.tagName===i.tagName&&r++,a=a.previousElementSibling;n.unshift(`${i.tagName.toLowerCase()}[${r}]`)}t=t.parentNode}return"/"+n.join("/")}var d=null;function O(e){d||(d=document.createElement("div"),d.style.cssText=`
+</${r}>`}return i}function te(e){if(e.id)return`#${e.id}`;let t=[],n=e;for(;n&&n!==document.body;){let i=n.tagName.toLowerCase();if(n.id){t.unshift(`#${n.id}`);break}if(n.className&&typeof n.className=="string"){let a=n.className.trim().split(/\s+/).filter(s=>!s.startsWith("__")&&s.length<30).slice(0,2);a.length>0&&(i+="."+a.join("."))}let r=n.parentElement;if(r){let a=Array.from(r.children).filter(s=>s.tagName===n.tagName);if(a.length>1){let s=a.indexOf(n)+1;i+=`:nth-child(${s})`}}t.unshift(i),n=n.parentElement}return t.join(" > ")}function ne(e){let t=[],n=e;for(;n&&n!==document;){if(n.nodeType===Node.ELEMENT_NODE){let i=n,r=1,a=i.previousElementSibling;for(;a;)a.tagName===i.tagName&&r++,a=a.previousElementSibling;t.unshift(`${i.tagName.toLowerCase()}[${r}]`)}n=n.parentNode}return"/"+t.join("/")}var d=null;function _(e){d||(d=document.createElement("div"),d.style.cssText=`
       position: fixed;
       pointer-events: none;
       z-index: 2147483646;
       border: 2px solid #6c5ce7;
       background: rgba(108, 92, 231, 0.1);
       transition: all 0.1s ease;
-    `,d.dataset.openmagic="highlight",document.body.appendChild(d)),d.style.left=`${e.x}px`,d.style.top=`${e.y}px`,d.style.width=`${e.width}px`,d.style.height=`${e.height}px`,d.style.display="block"}function _(){d&&(d.style.display="none")}async function R(e){try{return e?await oe(e):await ne()}catch(n){return console.warn("[OpenMagic] Screenshot capture failed:",n),null}}async function ne(){let e=document.createElement("canvas"),n=window.devicePixelRatio||1;e.width=window.innerWidth*n,e.height=window.innerHeight*n;let t=e.getContext("2d");t.scale(n,n);try{let i=await A(document.body),r=await z(i,window.innerWidth,window.innerHeight);return t.drawImage(r,0,0),e.toDataURL("image/png")}catch{return null}}async function oe(e){let n=e.getBoundingClientRect(),t=document.createElement("canvas"),i=window.devicePixelRatio||1;t.width=n.width*i,t.height=n.height*i;let r=t.getContext("2d");r.scale(i,i);try{let a=await A(e),s=await z(a,n.width,n.height);return r.drawImage(s,0,0),t.toDataURL("image/png")}catch{return null}}function A(e){return new Promise(n=>{let t=e.cloneNode(!0);q(e,t);let i=e.getBoundingClientRect(),r=i.width,a=i.height,s=`
+    `,d.dataset.openmagic="highlight",document.body.appendChild(d)),d.style.left=`${e.x}px`,d.style.top=`${e.y}px`,d.style.width=`${e.width}px`,d.style.height=`${e.height}px`,d.style.display="block"}function R(){d&&(d.style.display="none")}async function A(e){try{return e?await ae(e):await oe()}catch(t){return console.warn("[OpenMagic] Screenshot capture failed:",t),null}}async function oe(){let e=document.createElement("canvas"),t=window.devicePixelRatio||1;e.width=window.innerWidth*t,e.height=window.innerHeight*t;let n=e.getContext("2d");n.scale(t,t);try{let i=await z(document.body),r=await D(i,window.innerWidth,window.innerHeight);return n.drawImage(r,0,0),e.toDataURL("image/png")}catch{return null}}async function ae(e){let t=e.getBoundingClientRect(),n=document.createElement("canvas"),i=window.devicePixelRatio||1;n.width=t.width*i,n.height=t.height*i;let r=n.getContext("2d");r.scale(i,i);try{let a=await z(e),s=await D(a,t.width,t.height);return r.drawImage(s,0,0),n.toDataURL("image/png")}catch{return null}}function z(e){return new Promise(t=>{let n=e.cloneNode(!0);q(e,n);let i=e.getBoundingClientRect(),r=i.width,a=i.height,s=`
       <svg xmlns="http://www.w3.org/2000/svg" width="${r}" height="${a}">
         <foreignObject width="100%" height="100%">
           <div xmlns="http://www.w3.org/1999/xhtml" style="width:${r}px;height:${a}px;overflow:hidden;">
-            ${t.outerHTML}
+            ${n.outerHTML}
           </div>
         </foreignObject>
-      </svg>`;n(s)})}function q(e,n){let t=window.getComputedStyle(e),i="";for(let s=0;s<t.length;s++){let l=t[s];i+=`${l}:${t.getPropertyValue(l)};`}n.style.cssText=i;let r=e.children,a=n.children;for(let s=0;s<r.length&&s<a.length;s++)q(r[s],a[s])}function z(e,n,t){return new Promise((i,r)=>{let a=new Image,s=new Blob([e],{type:"image/svg+xml;charset=utf-8"}),l=URL.createObjectURL(s);a.onload=()=>{URL.revokeObjectURL(l),i(a)},a.onerror=()=>{URL.revokeObjectURL(l),r(new Error("Failed to load SVG image"))},a.width=n,a.height=t,a.src=l})}var b=[];var D=!1;function G(){if(D)return;D=!0;let e=window.fetch;window.fetch=async function(...i){let r=new Request(...i),a={method:r.method,url:r.url,timestamp:Date.now()};try{let s=await e.apply(this,i);return a.status=s.status,a.duration=Date.now()-a.timestamp,C(a),s}catch(s){throw a.status=0,a.duration=Date.now()-a.timestamp,C(a),s}};let n=XMLHttpRequest.prototype.open,t=XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.open=function(i,r,...a){return this.__om_method=i,this.__om_url=r,this.__om_start=Date.now(),n.apply(this,[i,r,...a])},XMLHttpRequest.prototype.send=function(...i){return this.addEventListener("loadend",()=>{C({method:this.__om_method||"GET",url:this.__om_url||"",status:this.status,duration:Date.now()-(this.__om_start||Date.now()),timestamp:this.__om_start||Date.now()})}),t.apply(this,i)}}function C(e){e.url.includes("__openmagic__")||(b.push(e),b.length>50&&b.shift())}function ae(){return[...b]}var x=[],ie=100,I=!1;function j(){if(I)return;I=!0;let e=["log","warn","error","info","debug"];for(let n of e){let t=console[n];console[n]=function(...i){x.push({level:n,args:i.map(r=>{try{return typeof r=="object"?JSON.stringify(r).slice(0,500):String(r)}catch{return String(r)}}),timestamp:Date.now()}),x.length>ie&&x.shift(),t.apply(console,i)}}}function re(){return[...x]}function K(e,n){return{selectedElement:e?{tagName:e.tagName,id:e.id,className:e.className,textContent:e.textContent,outerHTML:e.outerHTML,cssSelector:e.cssSelector,computedStyles:e.computedStyles}:void 0,screenshot:n||void 0,networkLogs:ae().map(t=>({method:t.method,url:t.url,status:t.status,duration:t.duration,timestamp:t.timestamp})),consoleLogs:re().map(t=>({level:t.level,args:t.args,timestamp:t.timestamp}))}}var T={openai:{name:"OpenAI",models:[{id:"gpt-4.1",name:"GPT-4.1"},{id:"gpt-4.1-mini",name:"GPT-4.1 Mini"},{id:"gpt-4.1-nano",name:"GPT-4.1 Nano"},{id:"gpt-4o",name:"GPT-4o"},{id:"gpt-4o-mini",name:"GPT-4o Mini"},{id:"o3",name:"o3 (Reasoning)"},{id:"o4-mini",name:"o4-mini (Reasoning)"}],keyPlaceholder:"sk-..."},anthropic:{name:"Anthropic",models:[{id:"claude-opus-4-20250514",name:"Claude Opus 4"},{id:"claude-sonnet-4-20250514",name:"Claude Sonnet 4"},{id:"claude-haiku-4-20250514",name:"Claude Haiku 4"}],keyPlaceholder:"sk-ant-..."},google:{name:"Google Gemini",models:[{id:"gemini-2.5-pro",name:"Gemini 2.5 Pro"},{id:"gemini-2.5-flash",name:"Gemini 2.5 Flash"},{id:"gemini-2.0-flash",name:"Gemini 2.0 Flash"}],keyPlaceholder:"AIza..."},deepseek:{name:"DeepSeek",models:[{id:"deepseek-chat",name:"DeepSeek V3"},{id:"deepseek-reasoner",name:"DeepSeek R1"}],keyPlaceholder:"sk-..."},groq:{name:"Groq",models:[{id:"llama-3.3-70b-versatile",name:"Llama 3.3 70B"},{id:"llama-3.1-8b-instant",name:"Llama 3.1 8B"}],keyPlaceholder:"gsk_..."},mistral:{name:"Mistral",models:[{id:"mistral-large-latest",name:"Mistral Large"},{id:"codestral-latest",name:"Codestral"}],keyPlaceholder:"..."},xai:{name:"xAI (Grok)",models:[{id:"grok-3",name:"Grok 3"},{id:"grok-3-mini",name:"Grok 3 Mini"}],keyPlaceholder:"xai-..."},ollama:{name:"Ollama (Local)",models:[],keyPlaceholder:"not required",local:!0},openrouter:{name:"OpenRouter",models:[],keyPlaceholder:"sk-or-..."}},o={connected:!1,panelOpen:!1,activePanel:null,selecting:!1,selectedElement:null,screenshot:null,messages:[],streaming:!1,streamContent:"",provider:"",model:"",hasApiKey:!1,roots:[]},y,u;function F(){if(document.querySelector("openmagic-toolbar"))return;let e=document.createElement("openmagic-toolbar");e.dataset.openmagic="true",y=e.attachShadow({mode:"closed"});let n=document.createElement("style");n.textContent=P,y.appendChild(n),u=document.createElement("div"),y.appendChild(u),document.body.appendChild(e),G(),j();let t=window.__OPENMAGIC_CONFIG__;t&&S(t.wsPort,t.token).then(()=>{o.connected=!0,g("config.get").then(i=>{o.provider=i.payload?.provider||"",o.model=i.payload?.model||"",o.hasApiKey=i.payload?.hasApiKey||!1,o.roots=i.payload?.roots||[],(!o.provider||!o.hasApiKey)&&(o.panelOpen=!0,o.activePanel="settings"),c()})}).catch(i=>{console.error("[OpenMagic] Connection failed:",i),o.connected=!1,c()}),c()}function c(){if(u.innerHTML="",o.panelOpen&&o.activePanel){let n=document.createElement("div");n.className="om-panel",o.activePanel==="settings"?n.innerHTML=se():o.activePanel==="chat"&&(n.innerHTML=le()),u.appendChild(n),ce(n)}let e=document.createElement("div");if(e.className="om-pill",e.innerHTML=`
+      </svg>`;t(s)})}function q(e,t){let n=window.getComputedStyle(e),i="";for(let s=0;s<n.length;s++){let l=n[s];i+=`${l}:${n.getPropertyValue(l)};`}t.style.cssText=i;let r=e.children,a=t.children;for(let s=0;s<r.length&&s<a.length;s++)q(r[s],a[s])}function D(e,t,n){return new Promise((i,r)=>{let a=new Image,s=new Blob([e],{type:"image/svg+xml;charset=utf-8"}),l=URL.createObjectURL(s);a.onload=()=>{URL.revokeObjectURL(l),i(a)},a.onerror=()=>{URL.revokeObjectURL(l),r(new Error("Failed to load SVG image"))},a.width=t,a.height=n,a.src=l})}var b=[];var G=!1;function j(){if(G)return;G=!0;let e=window.fetch;window.fetch=async function(...i){let r=new Request(...i),a={method:r.method,url:r.url,timestamp:Date.now()};try{let s=await e.apply(this,i);return a.status=s.status,a.duration=Date.now()-a.timestamp,M(a),s}catch(s){throw a.status=0,a.duration=Date.now()-a.timestamp,M(a),s}};let t=XMLHttpRequest.prototype.open,n=XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.open=function(i,r,...a){return this.__om_method=i,this.__om_url=r,this.__om_start=Date.now(),t.apply(this,[i,r,...a])},XMLHttpRequest.prototype.send=function(...i){return this.addEventListener("loadend",()=>{M({method:this.__om_method||"GET",url:this.__om_url||"",status:this.status,duration:Date.now()-(this.__om_start||Date.now()),timestamp:this.__om_start||Date.now()})}),n.apply(this,i)}}function M(e){e.url.includes("__openmagic__")||(b.push(e),b.length>50&&b.shift())}function ie(){return[...b]}var x=[],re=100,I=!1;function F(){if(I)return;I=!0;let e=["log","warn","error","info","debug"];for(let t of e){let n=console[t];console[t]=function(...i){x.push({level:t,args:i.map(r=>{try{return typeof r=="object"?JSON.stringify(r).slice(0,500):String(r)}catch{return String(r)}}),timestamp:Date.now()}),x.length>re&&x.shift(),n.apply(console,i)}}}function se(){return[...x]}function K(e,t){return{selectedElement:e?{tagName:e.tagName,id:e.id,className:e.className,textContent:e.textContent,outerHTML:e.outerHTML,cssSelector:e.cssSelector,computedStyles:e.computedStyles}:void 0,screenshot:t||void 0,networkLogs:ie().map(n=>({method:n.method,url:n.url,status:n.status,duration:n.duration,timestamp:n.timestamp})),consoleLogs:se().map(n=>({level:n.level,args:n.args,timestamp:n.timestamp}))}}var T={openai:{name:"OpenAI",models:[{id:"gpt-5.4",name:"GPT-5.4"},{id:"gpt-5.4-pro",name:"GPT-5.4 Pro"},{id:"gpt-5.4-mini",name:"GPT-5.4 Mini"},{id:"gpt-5.4-nano",name:"GPT-5.4 Nano"},{id:"gpt-5.2",name:"GPT-5.2 Thinking"},{id:"gpt-5.2-pro",name:"GPT-5.2 Pro"},{id:"o3",name:"o3 (Reasoning)"},{id:"o4-mini",name:"o4-mini (Reasoning)"},{id:"gpt-4.1",name:"GPT-4.1"},{id:"gpt-4.1-mini",name:"GPT-4.1 Mini"},{id:"codex-mini-latest",name:"Codex Mini"}],keyPlaceholder:"sk-..."},anthropic:{name:"Anthropic",models:[{id:"claude-opus-4-6",name:"Claude Opus 4.6"},{id:"claude-sonnet-4-6",name:"Claude Sonnet 4.6"},{id:"claude-haiku-4-5-20251001",name:"Claude Haiku 4.5"},{id:"claude-sonnet-4-5-20250929",name:"Claude Sonnet 4.5"},{id:"claude-opus-4-5-20251101",name:"Claude Opus 4.5"},{id:"claude-sonnet-4-20250514",name:"Claude Sonnet 4"},{id:"claude-opus-4-20250514",name:"Claude Opus 4"}],keyPlaceholder:"sk-ant-..."},google:{name:"Google Gemini",models:[{id:"gemini-3.1-pro-preview",name:"Gemini 3.1 Pro"},{id:"gemini-3-flash-preview",name:"Gemini 3 Flash"},{id:"gemini-3.1-flash-lite-preview",name:"Gemini 3.1 Flash Lite"},{id:"gemini-2.5-pro",name:"Gemini 2.5 Pro"},{id:"gemini-2.5-flash",name:"Gemini 2.5 Flash"},{id:"gemini-2.5-flash-lite",name:"Gemini 2.5 Flash Lite"}],keyPlaceholder:"AIza..."},xai:{name:"xAI (Grok)",models:[{id:"grok-4.20-0309-reasoning",name:"Grok 4.20 Reasoning"},{id:"grok-4.20-0309-non-reasoning",name:"Grok 4.20"},{id:"grok-4-1-fast-reasoning",name:"Grok 4.1 Fast Reasoning"},{id:"grok-4-1-fast-non-reasoning",name:"Grok 4.1 Fast"}],keyPlaceholder:"xai-..."},deepseek:{name:"DeepSeek",models:[{id:"deepseek-chat",name:"DeepSeek V3.2"},{id:"deepseek-reasoner",name:"DeepSeek R1"}],keyPlaceholder:"sk-..."},mistral:{name:"Mistral",models:[{id:"mistral-large-3-25-12",name:"Mistral Large 3"},{id:"mistral-small-4-0-26-03",name:"Mistral Small 4"},{id:"codestral-2508",name:"Codestral"},{id:"devstral-2-25-12",name:"Devstral 2"},{id:"magistral-medium-1-2-25-09",name:"Magistral Medium"}],keyPlaceholder:"..."},groq:{name:"Groq",models:[{id:"meta-llama/llama-4-scout-17b-16e-instruct",name:"Llama 4 Scout 17B"},{id:"llama-3.3-70b-versatile",name:"Llama 3.3 70B"},{id:"llama-3.1-8b-instant",name:"Llama 3.1 8B Instant"},{id:"qwen/qwen3-32b",name:"Qwen 3 32B"}],keyPlaceholder:"gsk_..."},ollama:{name:"Ollama (Local)",models:[],keyPlaceholder:"not required",local:!0},openrouter:{name:"OpenRouter",models:[],keyPlaceholder:"sk-or-..."}},P="0.4.0",o={connected:!1,panelOpen:!1,activePanel:null,selecting:!1,selectedElement:null,screenshot:null,messages:[],streaming:!1,streamContent:"",provider:"",model:"",hasApiKey:!1,roots:[],updateAvailable:!1,latestVersion:""},y,g;function U(){if(document.querySelector("openmagic-toolbar"))return;let e=document.createElement("openmagic-toolbar");e.dataset.openmagic="true",y=e.attachShadow({mode:"closed"});let t=document.createElement("style");t.textContent=$,y.appendChild(t),g=document.createElement("div"),y.appendChild(g),document.body.appendChild(e),j(),F(),he();let n=window.__OPENMAGIC_CONFIG__;n&&S(n.wsPort,n.token).then(()=>{o.connected=!0,u("config.get").then(i=>{o.provider=i.payload?.provider||"",o.model=i.payload?.model||"",o.hasApiKey=i.payload?.hasApiKey||!1,o.roots=i.payload?.roots||[],(!o.provider||!o.hasApiKey)&&(o.panelOpen=!0,o.activePanel="settings"),c()})}).catch(i=>{console.error("[OpenMagic] Connection failed:",i),o.connected=!1,c()}),c()}function c(){if(g.innerHTML="",o.panelOpen&&o.activePanel){let t=document.createElement("div");t.className="om-panel",o.activePanel==="settings"?t.innerHTML=le():o.activePanel==="chat"&&(t.innerHTML=ce()),g.appendChild(t),de(t)}let e=document.createElement("div");if(e.className="om-pill",e.innerHTML=`
     <span class="om-pill-logo">\u2728</span>
     <span class="om-pill-text">Magic</span>
     <span class="om-pill-divider"></span>
@@ -515,12 +574,18 @@
     <button class="om-pill-btn ${o.activePanel==="settings"?"active":""}" data-action="settings" title="Settings">
       \u2699\uFE0F
     </button>
-  `,!o.connected){let n=document.createElement("span");n.style.cssText="width:8px;height:8px;border-radius:50%;background:#e94560;margin-left:4px;",e.appendChild(n)}u.appendChild(e),ge(e),e.querySelectorAll(".om-pill-btn").forEach(n=>{n.addEventListener("click",t=>{t.stopPropagation();let i=n.dataset.action;i==="select"?de():i==="screenshot"?me():i==="chat"?U("chat"):i==="settings"&&U("settings")})})}function se(){let e=Object.entries(T).map(([a,s])=>`<option value="${a}" ${o.provider===a?"selected":""}>${s.name}</option>`).join(""),n=T[o.provider],t=n?n.models.map(a=>`<option value="${a.id}" ${o.model===a.id?"selected":""}>${a.name}</option>`).join(""):'<option value="">Select a provider first</option>',i=n?.keyPlaceholder||"Enter API key...",r=n?.local||!1;return`
+  `,!o.connected){let t=document.createElement("span");t.style.cssText="width:8px;height:8px;border-radius:50%;background:#e94560;margin-left:4px;",e.appendChild(t)}if(o.updateAvailable){let t=document.createElement("span");t.className="om-update-dot",t.title=`Update available: v${o.latestVersion}`,t.addEventListener("click",n=>{n.stopPropagation(),o.panelOpen=!0,o.activePanel="settings",c()}),e.appendChild(t)}g.appendChild(e),ge(e),e.querySelectorAll(".om-pill-btn").forEach(t=>{t.addEventListener("click",n=>{n.stopPropagation();let i=t.dataset.action;i==="select"?pe():i==="screenshot"?ue():i==="chat"?X("chat"):i==="settings"&&X("settings")})})}function le(){let e=Object.entries(T).map(([s,l])=>`<option value="${s}" ${o.provider===s?"selected":""}>${l.name}</option>`).join(""),t=T[o.provider],n=t?t.models.map(s=>`<option value="${s.id}" ${o.model===s.id?"selected":""}>${s.name}</option>`).join(""):'<option value="">Select a provider first</option>',i=t?.keyPlaceholder||"Enter API key...",r=t?.local||!1,a=o.updateAvailable?`<div class="om-update-banner">
+        <span>\u{1F680} v${o.latestVersion} available</span>
+        <span class="om-update-current">current: v${P}</span>
+        <code class="om-update-cmd">npx openmagic@latest</code>
+       </div>`:"";return`
     <div class="om-panel-header">
       <span class="om-panel-title">Settings</span>
+      <span class="om-panel-version">v${P}</span>
       <button class="om-panel-close" data-action="close">&times;</button>
     </div>
     <div class="om-panel-body">
+      ${a}
       <div class="om-settings">
         <div class="om-field">
           <label class="om-label">Provider</label>
@@ -534,7 +599,7 @@
           <label class="om-label">Model</label>
           <select class="om-select" data-field="model">
             <option value="">Select Model...</option>
-            ${t}
+            ${n}
           </select>
         </div>
 
@@ -550,7 +615,7 @@
         ${o.hasApiKey?'<div class="om-status om-status-success">API key configured</div>':""}
       </div>
     </div>
-  `}function le(){if(!o.hasApiKey||!o.provider)return`
+  `}function ce(){if(!o.hasApiKey||!o.provider)return`
       <div class="om-panel-header">
         <span class="om-panel-title">Chat</span>
         <button class="om-panel-close" data-action="close">&times;</button>
@@ -560,17 +625,17 @@
           Configure your LLM provider in Settings first
         </div>
       </div>
-    `;let e=o.messages.map(i=>`<div class="om-msg om-msg-${i.role}">${H(i.content)}</div>`).join(""),n=o.streaming?`<div class="om-msg om-msg-assistant"><div class="om-loading"><div class="om-spinner"></div> Thinking...</div>${H(o.streamContent)}</div>`:"",t=[];return o.selectedElement&&t.push(`<span class="om-context-chip">\u{1F3AF} ${o.selectedElement.tagName}${o.selectedElement.id?"#"+o.selectedElement.id:""} <button class="om-context-chip-remove" data-action="clear-element">&times;</button></span>`),o.screenshot&&t.push('<span class="om-context-chip">\u{1F4F8} Screenshot <button class="om-context-chip-remove" data-action="clear-screenshot">&times;</button></span>'),`
+    `;let e=o.messages.map(i=>`<div class="om-msg om-msg-${i.role}">${H(i.content)}</div>`).join(""),t=o.streaming?`<div class="om-msg om-msg-assistant"><div class="om-loading"><div class="om-spinner"></div> Thinking...</div>${H(o.streamContent)}</div>`:"",n=[];return o.selectedElement&&n.push(`<span class="om-context-chip">\u{1F3AF} ${o.selectedElement.tagName}${o.selectedElement.id?"#"+o.selectedElement.id:""} <button class="om-context-chip-remove" data-action="clear-element">&times;</button></span>`),o.screenshot&&n.push('<span class="om-context-chip">\u{1F4F8} Screenshot <button class="om-context-chip-remove" data-action="clear-screenshot">&times;</button></span>'),`
     <div class="om-panel-header">
       <span class="om-panel-title">Chat \u2014 ${T[o.provider]?.name||o.provider} / ${o.model}</span>
       <button class="om-panel-close" data-action="close">&times;</button>
     </div>
     <div class="om-panel-body">
-      ${t.length>0?`<div class="om-context-bar">${t.join("")}</div>`:""}
+      ${n.length>0?`<div class="om-context-bar">${n.join("")}</div>`:""}
       ${o.selectedElement?`<div class="om-element-info">&lt;${o.selectedElement.tagName}${o.selectedElement.id?' id="'+o.selectedElement.id+'"':""}${o.selectedElement.className?' class="'+o.selectedElement.className.toString().slice(0,60)+'"':""}&gt;</div>`:""}
       <div class="om-chat-messages">
         ${e||'<div style="color:#555;text-align:center;padding:40px 0;font-size:13px;">Select an element or describe what you want to change</div>'}
-        ${n}
+        ${t}
       </div>
       <div class="om-chat-input-wrap">
         <textarea class="om-chat-input" placeholder="Describe the change you want..."
@@ -580,5 +645,5 @@
         </button>
       </div>
     </div>
-  `}function ce(e){e.querySelector('[data-action="close"]')?.addEventListener("click",()=>{o.panelOpen=!1,o.activePanel=null,c()}),e.querySelector('[data-field="provider"]')?.addEventListener("change",t=>{o.provider=t.target.value,o.model="",c()}),e.querySelector('[data-field="model"]')?.addEventListener("change",t=>{o.model=t.target.value}),e.querySelector('[data-action="save-settings"]')?.addEventListener("click",()=>{let i=e.querySelector('[data-field="apiKey"]')?.value||"",r={provider:o.provider,model:o.model};i&&(r.apiKey=i),g("config.set",r).then(()=>{o.hasApiKey=!0,c()}).catch(a=>{console.error("[OpenMagic] Failed to save config:",a)})}),e.querySelector('[data-action="send"]')?.addEventListener("click",()=>{X(e)});let n=e.querySelector(".om-chat-input");n?.addEventListener("keydown",t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),X(e))}),n?.addEventListener("input",()=>{n.style.height="auto",n.style.height=Math.min(n.scrollHeight,120)+"px"}),e.querySelector('[data-action="clear-element"]')?.addEventListener("click",()=>{o.selectedElement=null,c()}),e.querySelector('[data-action="clear-screenshot"]')?.addEventListener("click",()=>{o.screenshot=null,c()})}async function X(e){let n=e.querySelector(".om-chat-input");if(!n)return;let t=n.value.trim();if(!t||o.streaming)return;o.messages.push({role:"user",content:t}),o.streaming=!0,o.streamContent="",c();let i=K(o.selectedElement,o.screenshot);try{let r=await $("llm.chat",{provider:o.provider,model:o.model,messages:o.messages.map(a=>({role:a.role,content:a.content})),context:i},a=>{o.streamContent+=a;let l=y.querySelector(".om-chat-messages")?.querySelector(".om-msg-assistant:last-child");l&&(l.innerHTML=H(o.streamContent))});if(o.messages.push({role:"assistant",content:o.streamContent||r?.content||""}),r?.modifications&&r.modifications.length>0){for(let a of r.modifications)if(a.type==="edit"&&a.file&&a.search&&a.replace)try{let l=(await g("fs.read",{path:B(a.file)})).payload?.content;if(l&&l.includes(a.search)){let v=l.replace(a.search,a.replace);await g("fs.write",{path:B(a.file),content:v}),o.messages.push({role:"system",content:`Applied change to ${a.file}`})}}catch(s){o.messages.push({role:"system",content:`Failed to apply change to ${a.file}: ${s.message}`})}}}catch(r){o.messages.push({role:"system",content:`Error: ${r.message}`})}o.streaming=!1,o.streamContent="",c()}function B(e){return o.roots.length>0?o.roots[0]+"/"+e:e}var h=null,f=null;function de(){o.selecting?W():pe()}function pe(){o.selecting=!0,document.body.style.cursor="crosshair",f=e=>{let n=e.target;if(Y(n))return;let t=n.getBoundingClientRect();O({x:t.x,y:t.y,width:t.width,height:t.height})},h=e=>{e.preventDefault(),e.stopPropagation();let n=e.target;Y(n)||(o.selectedElement=N(n),W(),o.activePanel!=="chat"&&(o.panelOpen=!0,o.activePanel="chat"),c())},document.addEventListener("mousemove",f,!0),document.addEventListener("click",h,!0),c()}function W(){o.selecting=!1,document.body.style.cursor="",_(),f&&(document.removeEventListener("mousemove",f,!0),f=null),h&&(document.removeEventListener("click",h,!0),h=null),c()}async function me(){let e=await R();e&&(o.screenshot=e,o.panelOpen=!0,o.activePanel="chat",c())}function U(e){o.panelOpen&&o.activePanel===e?(o.panelOpen=!1,o.activePanel=null):(o.panelOpen=!0,o.activePanel=e),c()}function ge(e){let n=!1,t=0,i=0,r=0,a=0;e.addEventListener("mousedown",s=>{if(s.target.closest(".om-pill-btn"))return;n=!0,t=s.clientX,i=s.clientY;let l=e.getBoundingClientRect();r=l.left,a=l.top,s.preventDefault()}),document.addEventListener("mousemove",s=>{if(!n)return;let l=s.clientX-t,v=s.clientY-i;e.style.position="fixed",e.style.left=r+l+"px",e.style.top=a+v+"px",e.style.right="auto",e.style.bottom="auto"}),document.addEventListener("mouseup",()=>{n=!1})}function Y(e){return!!e.closest("openmagic-toolbar")||!!e.dataset?.openmagic}function H(e){let n=document.createElement("div");return n.textContent=e,n.innerHTML}typeof window<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",F):F());})();
+  `}function de(e){e.querySelector('[data-action="close"]')?.addEventListener("click",()=>{o.panelOpen=!1,o.activePanel=null,c()}),e.querySelector('[data-field="provider"]')?.addEventListener("change",n=>{o.provider=n.target.value,o.model="",c()}),e.querySelector('[data-field="model"]')?.addEventListener("change",n=>{o.model=n.target.value}),e.querySelector('[data-action="save-settings"]')?.addEventListener("click",()=>{let i=e.querySelector('[data-field="apiKey"]')?.value||"",r={provider:o.provider,model:o.model};i&&(r.apiKey=i),u("config.set",r).then(()=>{o.hasApiKey=!0,c()}).catch(a=>{console.error("[OpenMagic] Failed to save config:",a)})}),e.querySelector('[data-action="send"]')?.addEventListener("click",()=>{B(e)});let t=e.querySelector(".om-chat-input");t?.addEventListener("keydown",n=>{n.key==="Enter"&&!n.shiftKey&&(n.preventDefault(),B(e))}),t?.addEventListener("input",()=>{t.style.height="auto",t.style.height=Math.min(t.scrollHeight,120)+"px"}),e.querySelector('[data-action="clear-element"]')?.addEventListener("click",()=>{o.selectedElement=null,c()}),e.querySelector('[data-action="clear-screenshot"]')?.addEventListener("click",()=>{o.screenshot=null,c()})}async function B(e){let t=e.querySelector(".om-chat-input");if(!t)return;let n=t.value.trim();if(!n||o.streaming)return;o.messages.push({role:"user",content:n}),o.streaming=!0,o.streamContent="",c();let i=K(o.selectedElement,o.screenshot);try{let r=await N("llm.chat",{provider:o.provider,model:o.model,messages:o.messages.map(a=>({role:a.role,content:a.content})),context:i},a=>{o.streamContent+=a;let l=y.querySelector(".om-chat-messages")?.querySelector(".om-msg-assistant:last-child");l&&(l.innerHTML=H(o.streamContent))});if(o.messages.push({role:"assistant",content:o.streamContent||r?.content||""}),r?.modifications&&r.modifications.length>0){for(let a of r.modifications)if(a.type==="edit"&&a.file&&a.search&&a.replace)try{let l=(await u("fs.read",{path:V(a.file)})).payload?.content;if(l&&l.includes(a.search)){let v=l.replace(a.search,a.replace);await u("fs.write",{path:V(a.file),content:v}),o.messages.push({role:"system",content:`Applied change to ${a.file}`})}}catch(s){o.messages.push({role:"system",content:`Failed to apply change to ${a.file}: ${s.message}`})}}}catch(r){o.messages.push({role:"system",content:`Error: ${r.message}`})}o.streaming=!1,o.streamContent="",c()}function V(e){return o.roots.length>0?o.roots[0]+"/"+e:e}var h=null,f=null;function pe(){o.selecting?W():me()}function me(){o.selecting=!0,document.body.style.cursor="crosshair",f=e=>{let t=e.target;if(Y(t))return;let n=t.getBoundingClientRect();_({x:n.x,y:n.y,width:n.width,height:n.height})},h=e=>{e.preventDefault(),e.stopPropagation();let t=e.target;Y(t)||(o.selectedElement=O(t),W(),o.activePanel!=="chat"&&(o.panelOpen=!0,o.activePanel="chat"),c())},document.addEventListener("mousemove",f,!0),document.addEventListener("click",h,!0),c()}function W(){o.selecting=!1,document.body.style.cursor="",R(),f&&(document.removeEventListener("mousemove",f,!0),f=null),h&&(document.removeEventListener("click",h,!0),h=null),c()}async function ue(){let e=await A();e&&(o.screenshot=e,o.panelOpen=!0,o.activePanel="chat",c())}function X(e){o.panelOpen&&o.activePanel===e?(o.panelOpen=!1,o.activePanel=null):(o.panelOpen=!0,o.activePanel=e),c()}function ge(e){let t=!1,n=0,i=0,r=0,a=0;e.addEventListener("mousedown",s=>{if(s.target.closest(".om-pill-btn"))return;t=!0,n=s.clientX,i=s.clientY;let l=e.getBoundingClientRect();r=l.left,a=l.top,s.preventDefault()}),document.addEventListener("mousemove",s=>{if(!t)return;let l=s.clientX-n,v=s.clientY-i;e.style.position="fixed",e.style.left=r+l+"px",e.style.top=a+v+"px",e.style.right="auto",e.style.bottom="auto"}),document.addEventListener("mouseup",()=>{t=!1})}function Y(e){return!!e.closest("openmagic-toolbar")||!!e.dataset?.openmagic}function H(e){let t=document.createElement("div");return t.textContent=e,t.innerHTML}function he(){fetch("https://registry.npmjs.org/openmagic/latest",{headers:{Accept:"application/json"},signal:AbortSignal.timeout(5e3)}).then(e=>{if(e.ok)return e.json()}).then(e=>{if(!e?.version)return;let t=e.version;fe(t,P)&&(o.updateAvailable=!0,o.latestVersion=t,c())}).catch(()=>{})}function fe(e,t){let n=e.split(".").map(Number),i=t.split(".").map(Number);for(let r=0;r<3;r++){if((n[r]||0)>(i[r]||0))return!0;if((n[r]||0)<(i[r]||0))return!1}return!1}typeof window<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",U):U());})();
 //# sourceMappingURL=index.global.js.map