openmagic 0.5.0 → 0.6.0

package/dist/toolbar/index.global.js

@@ -1,4 +1,3 @@
-#!/usr/bin/env node
 "use strict";var OpenMagicToolbar=(()=>{var $=`
 :host {
   all: initial;
@@ -22,51 +21,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,46 +567,126 @@
   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;
+}
+
+/* Auth tabs */
+.om-auth-tabs {
+  display: flex;
+  gap: 0;
+  margin-bottom: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.om-auth-tab {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: #888;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.om-auth-tab:hover {
+  color: #ccc;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.om-auth-tab.active {
+  background: rgba(108, 92, 231, 0.15);
+  color: #a29bfe;
+}
+
+.om-auth-hint {
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  padding: 10px 12px;
+  margin-top: 8px;
+  font-size: 12px;
+  color: #888;
+  line-height: 1.6;
+}
+
+.om-auth-hint p {
+  margin-bottom: 6px;
+}
+
+.om-auth-hint ol {
+  padding-left: 18px;
+}
+
+.om-auth-hint li {
+  margin-bottom: 3px;
+}
+
+.om-auth-hint code {
+  background: rgba(108, 92, 231, 0.1);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 11px;
+  color: #a29bfe;
+}
+
+.om-auth-hint strong {
+  color: #ccc;
+}
+`;var u=null,p=new Map,Q=[],M=[],E=!1,k=null;function L(){return Math.random().toString(36).slice(2)+Date.now().toString(36)}function S(e,o){return new Promise((t,i)=>{try{u=new WebSocket(`ws://127.0.0.1:${e}/__openmagic__/ws`),u.onopen=()=>{let r=L();C({id:r,type:"handshake",payload:{token:o}}),p.set(r,a=>{if(a.type==="handshake.ok"){E=!0;for(let s of M)u?.send(s);M=[],t()}else a.type==="error"&&i(new Error(a.payload?.message||"Handshake failed"))})},u.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 Q)s(a)}catch{}},u.onclose=()=>{E=!1,k||(k=setTimeout(()=>{k=null,S(e,o).catch(()=>{})},2e3))},u.onerror=()=>{}}catch(r){i(r)}})}function C(e){let o=JSON.stringify(e);u&&E?u.send(o):M.push(o)}function g(e,o){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)}),C({id:r,type:e,payload:o})})}function N(e,o,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")))}),C({id:a,type:e,payload:o})})}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 o=window.getComputedStyle(e),t={};for(let r of Z)t[r]=o.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:oe(e),computedStyles:t,rect:{x:i.x,y:i.y,width:i.width,height:i.height}}}function ee(e){let o=e.cloneNode(!0);o.querySelectorAll("script, style, svg").forEach(r=>r.remove());let i=o.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 te(e){if(e.id)return`#${e.id}`;let o=[],t=e;for(;t&&t!==document.body;){let i=t.tagName.toLowerCase();if(t.id){o.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})`}}o.unshift(i),t=t.parentElement}return o.join(" > ")}function oe(e){let o=[],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;o.unshift(`${i.tagName.toLowerCase()}[${r}]`)}t=t.parentNode}return"/"+o.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 _(){d&&(d.style.display="none")}async function R(e){try{return e?await ae(e):await ne()}catch(o){return console.warn("[OpenMagic] Screenshot capture failed:",o),null}}async function ne(){let e=document.createElement("canvas"),o=window.devicePixelRatio||1;e.width=window.innerWidth*o,e.height=window.innerHeight*o;let t=e.getContext("2d");t.scale(o,o);try{let i=await q(document.body),r=await D(i,window.innerWidth,window.innerHeight);return t.drawImage(r,0,0),e.toDataURL("image/png")}catch{return null}}async function ae(e){let o=e.getBoundingClientRect(),t=document.createElement("canvas"),i=window.devicePixelRatio||1;t.width=o.width*i,t.height=o.height*i;let r=t.getContext("2d");r.scale(i,i);try{let a=await q(e),s=await D(a,o.width,o.height);return r.drawImage(s,0,0),t.toDataURL("image/png")}catch{return null}}function q(e){return new Promise(o=>{let t=e.cloneNode(!0);z(e,t);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}
+            ${t.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>`;o(s)})}function z(e,o){let t=window.getComputedStyle(e),i="";for(let s=0;s<t.length;s++){let l=t[s];i+=`${l}:${t.getPropertyValue(l)};`}o.style.cssText=i;let r=e.children,a=o.children;for(let s=0;s<r.length&&s<a.length;s++)z(r[s],a[s])}function D(e,o,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=o,a.height=t,a.src=l})}var x=[];var G=!1;function I(){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,T(a),s}catch(s){throw a.status=0,a.duration=Date.now()-a.timestamp,T(a),s}};let o=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(),o.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()})}),t.apply(this,i)}}function T(e){e.url.includes("__openmagic__")||(x.push(e),x.length>50&&x.shift())}function ie(){return[...x]}var v=[],re=100,j=!1;function K(){if(j)return;j=!0;let e=["log","warn","error","info","debug"];for(let o of e){let t=console[o];console[o]=function(...i){v.push({level:o,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>re&&v.shift(),t.apply(console,i)}}}function se(){return[...v]}function B(e,o){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:o||void 0,networkLogs:ie().map(t=>({method:t.method,url:t.url,status:t.status,duration:t.duration,timestamp:t.timestamp})),consoleLogs:se().map(t=>({level:t.level,args:t.args,timestamp:t.timestamp}))}}var w={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-..."}},P="0.6.0",n={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,h;function F(){if(document.querySelector("openmagic-toolbar"))return;let e=document.createElement("openmagic-toolbar");e.dataset.openmagic="true",y=e.attachShadow({mode:"closed"});let o=document.createElement("style");o.textContent=$,y.appendChild(o),h=document.createElement("div"),y.appendChild(h),document.body.appendChild(e),I(),K(),he();let t=window.__OPENMAGIC_CONFIG__;t&&S(t.wsPort,t.token).then(()=>{n.connected=!0,g("config.get").then(i=>{n.provider=i.payload?.provider||"",n.model=i.payload?.model||"",n.hasApiKey=i.payload?.hasApiKey||!1,n.roots=i.payload?.roots||[],(!n.provider||!n.hasApiKey)&&(n.panelOpen=!0,n.activePanel="settings"),c()})}).catch(i=>{console.error("[OpenMagic] Connection failed:",i),n.connected=!1,c()}),c()}function c(){if(h.innerHTML="",n.panelOpen&&n.activePanel){let o=document.createElement("div");o.className="om-panel",n.activePanel==="settings"?o.innerHTML=le():n.activePanel==="chat"&&(o.innerHTML=ce()),h.appendChild(o),de(o)}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}
+    <button class="om-pill-btn ${n.selecting?"active":""}" data-action="select" title="Select Element">
+      <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 ${n.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
+    <button class="om-pill-btn ${n.activePanel==="settings"?"active":""}" data-action="settings" title="Settings">
+      <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">
-        <span>\u{1F680} v${o.latestVersion} available</span>
+  `,!n.connected){let o=document.createElement("span");o.style.cssText="width:8px;height:8px;border-radius:50%;background:#e94560;margin-left:4px;",e.appendChild(o)}if(n.updateAvailable){let o=document.createElement("span");o.className="om-update-dot",o.title=`Update available: v${n.latestVersion}`,o.addEventListener("click",t=>{t.stopPropagation(),n.panelOpen=!0,n.activePanel="settings",c()}),e.appendChild(o)}h.appendChild(e),ge(e),e.querySelectorAll(".om-pill-btn").forEach(o=>{o.addEventListener("click",t=>{t.stopPropagation();let i=o.dataset.action;i==="select"?pe():i==="screenshot"?ue():i==="chat"?X("chat"):i==="settings"&&X("settings")})})}function le(){let e=Object.entries(w).map(([l,m])=>`<option value="${l}" ${n.provider===l?"selected":""}>${m.name}</option>`).join(""),o=w[n.provider],t=o?o.models.map(l=>`<option value="${l.id}" ${n.model===l.id?"selected":""}>${l.name}</option>`).join(""):'<option value="">Select a provider first</option>',i=o?.keyPlaceholder||"Enter API key...",r=o?.local||!1,a=n.updateAvailable?`<div class="om-update-banner">
+        <span>\u{1F680} v${n.latestVersion} available</span>
         <span class="om-update-current">current: v${P}</span>
         <code class="om-update-cmd">npx openmagic@latest</code>
-       </div>`:"";return`
+       </div>`:"",s=n.provider==="openai"||n.provider==="anthropic";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>
       <button class="om-panel-close" data-action="close">&times;</button>
@@ -599,23 +706,40 @@
           <label class="om-label">Model</label>
           <select class="om-select" data-field="model">
             <option value="">Select Model...</option>
-            ${n}
+            ${t}
           </select>
         </div>
 
         <div class="om-field ${r?"om-hidden":""}">
-          <label class="om-label">API Key</label>
+          <label class="om-label">Authentication</label>
+          ${s?`
+            <div class="om-auth-tabs">
+              <button class="om-auth-tab active" data-auth="apikey">API Key</button>
+              <button class="om-auth-tab" data-auth="session">Session Token</button>
+            </div>
+          `:""}
           <input type="password" class="om-input" data-field="apiKey"
                  placeholder="${i}"
                  value="" />
+          ${s?`
+            <div class="om-auth-hint om-hidden" data-hint="session">
+              <p>To use your existing account session:</p>
+              <ol>
+                <li>Go to <strong>${n.provider==="openai"?"platform.openai.com":"console.anthropic.com"}</strong></li>
+                <li>Open DevTools \u2192 Application \u2192 Cookies</li>
+                <li>Copy the <code>sessionKey</code> value</li>
+                <li>Paste it above</li>
+              </ol>
+            </div>
+          `:""}
         </div>
 
         <button class="om-btn" data-action="save-settings">Save Configuration</button>
 
-        ${o.hasApiKey?'<div class="om-status om-status-success">API key configured</div>':""}
+        ${n.hasApiKey?'<div class="om-status om-status-success">Authenticated</div>':""}
       </div>
     </div>
-  `}function ce(){if(!o.hasApiKey||!o.provider)return`
+  `}function ce(){if(!n.hasApiKey||!n.provider)return`
       <div class="om-panel-header">
         <span class="om-panel-title">Chat</span>
         <button class="om-panel-close" data-action="close">&times;</button>
@@ -625,25 +749,26 @@
           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(""),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>'),`
+    `;let e=n.messages.map(i=>`<div class="om-msg om-msg-${i.role}">${H(i.content)}</div>`).join(""),o=n.streaming?`<div class="om-msg om-msg-assistant"><div class="om-loading"><div class="om-spinner"></div> Thinking...</div>${H(n.streamContent)}</div>`:"",t=[];return n.selectedElement&&t.push(`<span class="om-context-chip">\u{1F3AF} ${n.selectedElement.tagName}${n.selectedElement.id?"#"+n.selectedElement.id:""} <button class="om-context-chip-remove" data-action="clear-element">&times;</button></span>`),n.screenshot&&t.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 ${w[n.provider]?.name||n.provider} / ${n.model}</span>
       <button class="om-panel-close" data-action="close">&times;</button>
     </div>
     <div class="om-panel-body">
-      ${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>`:""}
+      ${t.length>0?`<div class="om-context-bar">${t.join("")}</div>`:""}
+      ${n.selectedElement?`<div class="om-element-info">&lt;${n.selectedElement.tagName}${n.selectedElement.id?' id="'+n.selectedElement.id+'"':""}${n.selectedElement.className?' class="'+n.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>'}
-        ${t}
+        ${o}
       </div>
       <div class="om-chat-input-wrap">
         <textarea class="om-chat-input" placeholder="Describe the change you want..."
-                  rows="1" ${o.streaming?"disabled":""}></textarea>
-        <button class="om-chat-send" data-action="send" ${o.streaming?"disabled":""}>
-          ${o.streaming?"...":"Send"}
+                  rows="1" ${n.streaming?"disabled":""}></textarea>
+        <button class="om-chat-send" data-action="send" ${n.streaming?"disabled":""}>
+          ${n.streaming?"...":"Send"}
         </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 de(e){e.querySelector('[data-action="close"]')?.addEventListener("click",()=>{n.panelOpen=!1,n.activePanel=null,c()}),e.querySelector('[data-field="provider"]')?.addEventListener("change",t=>{n.provider=t.target.value,n.model="",c()}),e.querySelector('[data-field="model"]')?.addEventListener("change",t=>{n.model=t.target.value}),e.querySelectorAll(".om-auth-tab").forEach(t=>{t.addEventListener("click",()=>{e.querySelectorAll(".om-auth-tab").forEach(s=>s.classList.remove("active")),t.classList.add("active");let i=t.dataset.auth,r=e.querySelector('[data-hint="session"]'),a=e.querySelector('[data-field="apiKey"]');if(i==="session")r?.classList.remove("om-hidden"),a&&(a.placeholder="Paste session token...");else{r?.classList.add("om-hidden");let s=w[n.provider];a&&(a.placeholder=s?.keyPlaceholder||"Enter API key...")}})}),e.querySelector('[data-action="save-settings"]')?.addEventListener("click",()=>{let i=e.querySelector('[data-field="apiKey"]')?.value||"",r={provider:n.provider,model:n.model};i&&(r.apiKey=i),g("config.set",r).then(()=>{n.hasApiKey=!0,c()}).catch(a=>{console.error("[OpenMagic] Failed to save config:",a)})}),e.querySelector('[data-action="send"]')?.addEventListener("click",()=>{V(e)});let o=e.querySelector(".om-chat-input");o?.addEventListener("keydown",t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),V(e))}),o?.addEventListener("input",()=>{o.style.height="auto",o.style.height=Math.min(o.scrollHeight,120)+"px"}),e.querySelector('[data-action="clear-element"]')?.addEventListener("click",()=>{n.selectedElement=null,c()}),e.querySelector('[data-action="clear-screenshot"]')?.addEventListener("click",()=>{n.screenshot=null,c()})}async function V(e){let o=e.querySelector(".om-chat-input");if(!o)return;let t=o.value.trim();if(!t||n.streaming)return;n.messages.push({role:"user",content:t}),n.streaming=!0,n.streamContent="",c();let i=B(n.selectedElement,n.screenshot);try{let r=await N("llm.chat",{provider:n.provider,model:n.model,messages:n.messages.map(a=>({role:a.role,content:a.content})),context:i},a=>{n.streamContent+=a;let l=y.querySelector(".om-chat-messages")?.querySelector(".om-msg-assistant:last-child");l&&(l.innerHTML=H(n.streamContent))});if(n.messages.push({role:"assistant",content:n.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:U(a.file)})).payload?.content;if(l&&l.includes(a.search)){let m=l.replace(a.search,a.replace);await g("fs.write",{path:U(a.file),content:m}),n.messages.push({role:"system",content:`Applied change to ${a.file}`})}}catch(s){n.messages.push({role:"system",content:`Failed to apply change to ${a.file}: ${s.message}`})}}}catch(r){n.messages.push({role:"system",content:`Error: ${r.message}`})}n.streaming=!1,n.streamContent="",c()}function U(e){return n.roots.length>0?n.roots[0]+"/"+e:e}var f=null,b=null;function pe(){n.selecting?W():me()}function me(){n.selecting=!0,document.body.style.cursor="crosshair",b=e=>{let o=e.target;if(Y(o))return;let t=o.getBoundingClientRect();A({x:t.x,y:t.y,width:t.width,height:t.height})},f=e=>{e.preventDefault(),e.stopPropagation();let o=e.target;Y(o)||(n.selectedElement=O(o),W(),n.activePanel!=="chat"&&(n.panelOpen=!0,n.activePanel="chat"),c())},document.addEventListener("mousemove",b,!0),document.addEventListener("click",f,!0),c()}function W(){n.selecting=!1,document.body.style.cursor="",_(),b&&(document.removeEventListener("mousemove",b,!0),b=null),f&&(document.removeEventListener("click",f,!0),f=null),c()}async function ue(){let e=await R();e&&(n.screenshot=e,n.panelOpen=!0,n.activePanel="chat",c())}function X(e){n.panelOpen&&n.activePanel===e?(n.panelOpen=!1,n.activePanel=null):(n.panelOpen=!0,n.activePanel=e),c()}function ge(e){let o=!1,t=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;o=!0,t=s.clientX,i=s.clientY;let m=e.getBoundingClientRect();r=m.left,a=m.top,s.preventDefault()}),document.addEventListener("mousemove",s=>{if(!o)return;let l=s.clientX-t,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",()=>{o=!1})}function Y(e){return!!e.closest("openmagic-toolbar")||!!e.dataset?.openmagic}function H(e){let o=document.createElement("div");return o.textContent=e,o.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 o=e.version;fe(o,P)&&(n.updateAvailable=!0,n.latestVersion=o,c())}).catch(()=>{})}function fe(e,o){let t=e.split(".").map(Number),i=o.split(".").map(Number);for(let r=0;r<3;r++){if((t[r]||0)>(i[r]||0))return!0;if((t[r]||0)<(i[r]||0))return!1}return!1}typeof window<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",F):F());})();
+aded",F):F());})();
 //# sourceMappingURL=index.global.js.map