openmagic 0.5.0 → 0.7.0

package/dist/toolbar/index.global.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-"use strict";var OpenMagicToolbar=(()=>{var $=`
+"use strict";var OpenMagicToolbar=(()=>{var N=`
 :host {
   all: initial;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -22,51 +22,79 @@
   z-index: 2147483647;
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 8px 16px;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-  border: 1px solid rgba(108, 92, 231, 0.3);
-  border-radius: 50px;
-  cursor: grab;
+  gap: 2px;
+  padding: 6px 12px 6px 6px;
+  background: linear-gradient(135deg, #13132b 0%, #1a1a3e 100%);
+  border: 1px solid rgba(108, 92, 231, 0.25);
+  border-radius: 12px;
   user-select: none;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(108, 92, 231, 0.1);
-  transition: box-shadow 0.2s, transform 0.2s;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(108, 92, 231, 0.08);
+  transition: box-shadow 0.2s, transform 0.15s;
 }
 
 .om-pill:hover {
-  box-shadow: 0 6px 32px rgba(108, 92, 231, 0.3), 0 0 0 1px rgba(108, 92, 231, 0.3);
+  box-shadow: 0 6px 32px rgba(108, 92, 231, 0.25), 0 0 0 1px rgba(108, 92, 231, 0.3);
   transform: translateY(-1px);
 }
 
-.om-pill:active {
+/* Six-dot grab handle */
+.om-grab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 28px;
+  color: #444;
+  cursor: grab;
+  border-radius: 6px;
+  transition: color 0.15s, background 0.15s;
+  flex-shrink: 0;
+}
+
+.om-grab:hover {
+  color: #888;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.om-grab:active {
   cursor: grabbing;
+  color: #a29bfe;
 }
 
-.om-pill-logo {
-  font-size: 18px;
-  line-height: 1;
+/* Brand */
+.om-pill-brand {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 6px;
+}
+
+.om-pill-icon {
+  color: #a29bfe;
+  flex-shrink: 0;
 }
 
 .om-pill-text {
   font-size: 12px;
-  font-weight: 600;
-  color: #a29bfe;
-  letter-spacing: 0.5px;
+  font-weight: 700;
+  color: #c4b5fd;
+  letter-spacing: 0.3px;
+  white-space: nowrap;
 }
 
 .om-pill-btn {
   background: none;
   border: none;
-  color: #e0e0e0;
+  color: #888;
   cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 6px;
-  font-size: 16px;
+  padding: 6px;
+  border-radius: 8px;
   line-height: 1;
-  transition: background 0.15s;
+  transition: background 0.15s, color 0.15s;
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
 }
 
 .om-pill-btn:hover {
@@ -540,48 +568,118 @@
   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(`
+
+.om-header-icon {
+  color: #a29bfe;
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
+/* API Key row with connect button */
+.om-key-row {
+  display: flex;
+  gap: 8px;
+  align-items: stretch;
+}
+
+.om-key-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.om-btn-connect {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 8px 12px;
+  background: rgba(108, 92, 231, 0.12);
+  border: 1px solid rgba(108, 92, 231, 0.25);
+  border-radius: 8px;
+  color: #a29bfe;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s;
+}
+
+.om-btn-connect:hover {
+  background: rgba(108, 92, 231, 0.2);
+  border-color: rgba(108, 92, 231, 0.4);
+  color: #c4b5fd;
+}
+
+.om-key-hint {
+  font-size: 11px;
+  color: #666;
+  margin-top: 6px;
+  line-height: 1.5;
+}
+
+.om-key-hint a {
+  color: #a29bfe;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.om-key-hint a:hover {
+  text-decoration: underline;
+  color: #c4b5fd;
+}
+
+.om-status svg {
+  vertical-align: -2px;
+  margin-right: 4px;
+}
+`;var g=null,p=new Map,Z=[],M=[],E=!1,k=null;function L(){return Math.random().toString(36).slice(2)+Date.now().toString(36)}function S(e,t){return new Promise((n,i)=>{try{g=new WebSocket(`ws://127.0.0.1:${e}/__openmagic__/ws`),g.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 M)g?.send(s);M=[],n()}else a.type==="error"&&i(new Error(a.payload?.message||"Handshake failed"))})},g.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 Z)s(a)}catch{}},g.onclose=()=>{E=!1,k||(k=setTimeout(()=>{k=null,S(e,t).catch(()=>{})},2e3))},g.onerror=()=>{}}catch(r){i(r)}})}function C(e){let t=JSON.stringify(e);g&&E?g.send(t):M.push(t)}function h(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 O(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 te=["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 _(e){let t=window.getComputedStyle(e),n={};for(let r of te)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:ne(e),cssSelector:oe(e),xpath:ae(e),computedStyles:n,rect:{x:i.x,y:i.y,width:i.width,height:i.height}}}function ne(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 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=`
+</${r}>`}return i}function oe(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 ae(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 A(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 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=`
+    `,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 q(e){try{return e?await re(e):await ie()}catch(t){return console.warn("[OpenMagic] Screenshot capture failed:",t),null}}async function ie(){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 G(i,window.innerWidth,window.innerHeight);return n.drawImage(r,0,0),e.toDataURL("image/png")}catch{return null}}async function re(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 G(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);D(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;">
             ${n.outerHTML}
           </div>
         </foreignObject>
-      </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.5.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>
+      </svg>`;t(s)})}function D(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++)D(r[s],a[s])}function G(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 y=[];var j=!1;function K(){if(j)return;j=!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,T(a),s}catch(s){throw a.status=0,a.duration=Date.now()-a.timestamp,T(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",()=>{T({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 T(e){e.url.includes("__openmagic__")||(y.push(e),y.length>50&&y.shift())}function se(){return[...y]}var v=[],le=100,I=!1;function B(){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){v.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()}),v.length>le&&v.shift(),n.apply(console,i)}}}function ce(){return[...v]}function F(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:se().map(n=>({method:n.method,url:n.url,status:n.status,duration:n.duration,timestamp:n.timestamp})),consoleLogs:ce().map(n=>({level:n.level,args:n.args,timestamp:n.timestamp}))}}var P={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_..."},minimax:{name:"MiniMax",models:[{id:"MiniMax-M2.7",name:"MiniMax M2.7"},{id:"MiniMax-M2.7-highspeed",name:"M2.7 Highspeed"},{id:"MiniMax-M2.5",name:"MiniMax M2.5"}],keyPlaceholder:"MiniMax key..."},moonshot:{name:"Kimi (Moonshot)",models:[{id:"kimi-k2.5",name:"Kimi K2.5"},{id:"kimi-k2-thinking",name:"Kimi K2 Thinking"}],keyPlaceholder:"Moonshot key..."},qwen:{name:"Qwen (Alibaba)",models:[{id:"qwen3.5-plus",name:"Qwen 3.5 Plus"},{id:"qwen-max",name:"Qwen Max"},{id:"qwen-turbo",name:"Qwen Turbo"}],keyPlaceholder:"DashScope key..."},zhipu:{name:"Zhipu AI (GLM)",models:[{id:"glm-5",name:"GLM-5"},{id:"glm-4.7",name:"GLM-4.7"},{id:"glm-4.6",name:"GLM-4.6"}],keyPlaceholder:"Zhipu key..."},doubao:{name:"Doubao (ByteDance)",models:[{id:"doubao-seed-2-0-pro",name:"Doubao Seed 2.0 Pro"},{id:"doubao-seed-2-0-code",name:"Doubao Seed 2.0 Code"}],keyPlaceholder:"Volcano key..."},ollama:{name:"Ollama (Local)",models:[],keyPlaceholder:"not required",local:!0},openrouter:{name:"OpenRouter",models:[],keyPlaceholder:"sk-or-..."}},$="0.7.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:""},w,f;function V(){if(document.querySelector("openmagic-toolbar"))return;let e=document.createElement("openmagic-toolbar");e.dataset.openmagic="true",w=e.attachShadow({mode:"closed"});let t=document.createElement("style");t.textContent=N,w.appendChild(t),f=document.createElement("div"),w.appendChild(f),document.body.appendChild(e),K(),B(),be();let n=window.__OPENMAGIC_CONFIG__;n&&S(n.wsPort,n.token).then(()=>{o.connected=!0,h("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(f.innerHTML="",o.panelOpen&&o.activePanel){let t=document.createElement("div");t.className="om-panel",o.activePanel==="settings"?t.innerHTML=de():o.activePanel==="chat"&&(t.innerHTML=pe()),f.appendChild(t),me(t)}let e=document.createElement("div");if(e.className="om-pill",e.innerHTML=`
+    <span class="om-grab" title="Drag to move">
+      <svg width="8" height="14" viewBox="0 0 8 14" fill="currentColor"><circle cx="2" cy="2" r="1.2"/><circle cx="6" cy="2" r="1.2"/><circle cx="2" cy="7" r="1.2"/><circle cx="6" cy="7" r="1.2"/><circle cx="2" cy="12" r="1.2"/><circle cx="6" cy="12" r="1.2"/></svg>
+    </span>
+    <span class="om-pill-brand">
+      <svg class="om-pill-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.582a.5.5 0 0 1 0 .962L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/></svg>
+      <span class="om-pill-text">OpenMagic</span>
+    </span>
     <span class="om-pill-divider"></span>
     <button class="om-pill-btn ${o.selecting?"active":""}" data-action="select" title="Select Element">
-      \u{1F3AF}
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
     </button>
     <button class="om-pill-btn" data-action="screenshot" title="Screenshot">
-      \u{1F4F8}
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
     </button>
-    <button class="om-pill-btn ${o.activePanel==="chat"?"active":""}" data-action="chat" title="Chat">
-      \u{1F4AC}
+    <button class="om-pill-btn ${o.activePanel==="chat"?"active":""}" data-action="chat" title="Chat with AI">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
     </button>
     <button class="om-pill-btn ${o.activePanel==="settings"?"active":""}" data-action="settings" title="Settings">
-      \u2699\uFE0F
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
     </button>
-  `,!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">
+  `,!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)}f.appendChild(e),fe(e),e.querySelectorAll(".om-pill-btn").forEach(t=>{t.addEventListener("click",n=>{n.stopPropagation();let i=t.dataset.action;i==="select"?ge():i==="screenshot"?he():i==="chat"?Y("chat"):i==="settings"&&Y("settings")})})}function de(){let e=Object.entries(P).map(([u,J])=>`<option value="${u}" ${o.provider===u?"selected":""}>${J.name}</option>`).join(""),t=P[o.provider],n=t?t.models.map(u=>`<option value="${u.id}" ${o.model===u.id?"selected":""}>${u.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>
+        <span class="om-update-current">current: v${$}</span>
         <code class="om-update-cmd">npx openmagic@latest</code>
-       </div>`:"";return`
+       </div>`:"",l={openai:"https://platform.openai.com/api-keys",anthropic:"https://console.anthropic.com/settings/keys",google:"https://aistudio.google.com/apikey",xai:"https://console.x.ai/team/default/api-keys",deepseek:"https://platform.deepseek.com/api_keys",mistral:"https://console.mistral.ai/api-keys",groq:"https://console.groq.com/keys",minimax:"https://platform.minimax.chat/user-center/basic-information/interface-key",moonshot:"https://platform.moonshot.cn/console/api-keys",qwen:"https://dashscope.console.aliyun.com/apiKey",zhipu:"https://open.bigmodel.cn/usercenter/apikeys",doubao:"https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey",openrouter:"https://openrouter.ai/settings/keys"}[o.provider]||"",m=t?.name||"provider";return`
     <div class="om-panel-header">
+      <svg class="om-header-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
       <span class="om-panel-title">Settings</span>
-      <span class="om-panel-version">v${P}</span>
+      <span class="om-panel-version">v${$}</span>
       <button class="om-panel-close" data-action="close">&times;</button>
     </div>
     <div class="om-panel-body">
@@ -605,17 +703,30 @@
 
         <div class="om-field ${r?"om-hidden":""}">
           <label class="om-label">API Key</label>
-          <input type="password" class="om-input" data-field="apiKey"
-                 placeholder="${i}"
-                 value="" />
+          <div class="om-key-row">
+            <input type="password" class="om-input om-key-input" data-field="apiKey"
+                   placeholder="${i}"
+                   value="" />
+            ${l?`<button class="om-btn-connect" data-action="get-key" data-url="${l}" title="Get API key from ${m}">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+              Get key
+            </button>`:""}
+          </div>
+          ${o.provider&&!r?`<div class="om-key-hint">Paste your ${m} API key above.${l?` <a data-action="get-key" data-url="${l}">Get one here &rarr;</a>`:""}</div>`:""}
         </div>
 
-        <button class="om-btn" data-action="save-settings">Save Configuration</button>
+        <button class="om-btn" data-action="save-settings">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
+          Save
+        </button>
 
-        ${o.hasApiKey?'<div class="om-status om-status-success">API key configured</div>':""}
+        ${o.hasApiKey?`<div class="om-status om-status-success">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+          Connected
+        </div>`:""}
       </div>
     </div>
-  `}function ce(){if(!o.hasApiKey||!o.provider)return`
+  `}function pe(){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>
@@ -627,7 +738,7 @@
       </div>
     `;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>
+      <span class="om-panel-title">Chat \u2014 ${P[o.provider]?.name||o.provider} / ${o.model}</span>
       <button class="om-panel-close" data-action="close">&times;</button>
     </div>
     <div class="om-panel-body">
@@ -645,5 +756,5 @@
         </button>
       </div>
     </div>
-  `}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());})();
+  `}function me(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.querySelectorAll('[data-action="get-key"]').forEach(n=>{n.addEventListener("click",i=>{i.preventDefault();let r=n.dataset.url;r&&window.open(r,"_blank","noopener")})}),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),h("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",()=>{U(e)});let t=e.querySelector(".om-chat-input");t?.addEventListener("keydown",n=>{n.key==="Enter"&&!n.shiftKey&&(n.preventDefault(),U(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 U(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=F(o.selectedElement,o.screenshot);try{let r=await O("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=w.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 h("fs.read",{path:X(a.file)})).payload?.content;if(l&&l.includes(a.search)){let m=l.replace(a.search,a.replace);await h("fs.write",{path:X(a.file),content:m}),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 X(e){return o.roots.length>0?o.roots[0]+"/"+e:e}var b=null,x=null;function ge(){o.selecting?Q():ue()}function ue(){o.selecting=!0,document.body.style.cursor="crosshair",x=e=>{let t=e.target;if(W(t))return;let n=t.getBoundingClientRect();A({x:n.x,y:n.y,width:n.width,height:n.height})},b=e=>{e.preventDefault(),e.stopPropagation();let t=e.target;W(t)||(o.selectedElement=_(t),Q(),o.activePanel!=="chat"&&(o.panelOpen=!0,o.activePanel="chat"),c())},document.addEventListener("mousemove",x,!0),document.addEventListener("click",b,!0),c()}function Q(){o.selecting=!1,document.body.style.cursor="",R(),x&&(document.removeEventListener("mousemove",x,!0),x=null),b&&(document.removeEventListener("click",b,!0),b=null),c()}async function he(){let e=await q();e&&(o.screenshot=e,o.panelOpen=!0,o.activePanel="chat",c())}function Y(e){o.panelOpen&&o.activePanel===e?(o.panelOpen=!1,o.activePanel=null):(o.panelOpen=!0,o.activePanel=e),c()}function fe(e){let t=!1,n=0,i=0,r=0,a=0;e.addEventListener("mousedown",s=>{let l=s.target;if(l.closest(".om-pill-btn")||!l.closest(".om-grab")&&!l.closest(".om-pill-brand"))return;t=!0,n=s.clientX,i=s.clientY;let m=e.getBoundingClientRect();r=m.left,a=m.top,s.preventDefault()}),document.addEventListener("mousemove",s=>{if(!t)return;let l=s.clientX-n,m=s.clientY-i;e.style.position="fixed",e.style.left=r+l+"px",e.style.top=a+m+"px",e.style.right="auto",e.style.bottom="auto"}),document.addEventListener("mouseup",()=>{t=!1})}function W(e){return!!e.closest("openmagic-toolbar")||!!e.dataset?.openmagic}function H(e){let t=document.createElement("div");return t.textContent=e,t.innerHTML}function be(){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;xe(t,$)&&(o.updateAvailable=!0,o.latestVersion=t,c())}).catch(()=>{})}function xe(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",V):V());})();
 //# sourceMappingURL=index.global.js.map