openmagic 0.1.0

package/dist/toolbar/index.global.js

@@ -0,0 +1,584 @@
+#!/usr/bin/env node
+"use strict";var OpenMagicToolbar=(()=>{var P=`
+:host {
+  all: initial;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  color: #e0e0e0;
+  line-height: 1.5;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Floating Pill */
+.om-pill {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  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;
+  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;
+}
+
+.om-pill:hover {
+  box-shadow: 0 6px 32px rgba(108, 92, 231, 0.3), 0 0 0 1px rgba(108, 92, 231, 0.3);
+  transform: translateY(-1px);
+}
+
+.om-pill:active {
+  cursor: grabbing;
+}
+
+.om-pill-logo {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.om-pill-text {
+  font-size: 12px;
+  font-weight: 600;
+  color: #a29bfe;
+  letter-spacing: 0.5px;
+}
+
+.om-pill-btn {
+  background: none;
+  border: none;
+  color: #e0e0e0;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 16px;
+  line-height: 1;
+  transition: background 0.15s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.om-pill-btn:hover {
+  background: rgba(108, 92, 231, 0.2);
+}
+
+.om-pill-btn.active {
+  background: rgba(108, 92, 231, 0.3);
+  color: #a29bfe;
+}
+
+.om-pill-divider {
+  width: 1px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  margin: 0 4px;
+}
+
+/* Panel */
+.om-panel {
+  position: fixed;
+  bottom: 80px;
+  right: 24px;
+  z-index: 2147483647;
+  width: 420px;
+  max-height: 600px;
+  background: #1a1a2e;
+  border: 1px solid rgba(108, 92, 231, 0.2);
+  border-radius: 16px;
+  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: om-slide-up 0.2s ease;
+}
+
+@keyframes om-slide-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.om-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(108, 92, 231, 0.05);
+}
+
+.om-panel-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #a29bfe;
+}
+
+.om-panel-close {
+  background: none;
+  border: none;
+  color: #666;
+  cursor: pointer;
+  font-size: 18px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  line-height: 1;
+}
+
+.om-panel-close:hover {
+  color: #e0e0e0;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.om-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.om-panel-body::-webkit-scrollbar {
+  width: 6px;
+}
+
+.om-panel-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.om-panel-body::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+}
+
+/* Chat */
+.om-chat-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 200px;
+  max-height: 380px;
+  overflow-y: auto;
+  padding-bottom: 8px;
+}
+
+.om-chat-messages::-webkit-scrollbar {
+  width: 4px;
+}
+
+.om-chat-messages::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+}
+
+.om-msg {
+  padding: 10px 14px;
+  border-radius: 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.om-msg-user {
+  background: rgba(108, 92, 231, 0.15);
+  color: #e0e0e0;
+  margin-left: 32px;
+  border-bottom-right-radius: 4px;
+}
+
+.om-msg-assistant {
+  background: rgba(255, 255, 255, 0.03);
+  color: #ccc;
+  margin-right: 32px;
+  border-bottom-left-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.om-msg-system {
+  background: rgba(233, 69, 96, 0.1);
+  color: #e94560;
+  font-size: 12px;
+  text-align: center;
+  padding: 8px;
+}
+
+.om-chat-input-wrap {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.om-chat-input {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  padding: 10px 14px;
+  color: #e0e0e0;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  resize: none;
+  min-height: 40px;
+  max-height: 120px;
+}
+
+.om-chat-input:focus {
+  border-color: rgba(108, 92, 231, 0.5);
+}
+
+.om-chat-input::placeholder {
+  color: #555;
+}
+
+.om-chat-send {
+  background: #6c5ce7;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 10px 16px;
+  border-radius: 10px;
+  font-size: 13px;
+  font-weight: 600;
+  transition: background 0.15s;
+  white-space: nowrap;
+}
+
+.om-chat-send:hover {
+  background: #7c6cf7;
+}
+
+.om-chat-send:disabled {
+  background: #333;
+  color: #666;
+  cursor: not-allowed;
+}
+
+/* Settings */
+.om-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.om-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.om-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #888;
+}
+
+.om-select, .om-input {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px 12px;
+  color: #e0e0e0;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  width: 100%;
+}
+
+.om-select:focus, .om-input:focus {
+  border-color: rgba(108, 92, 231, 0.5);
+}
+
+.om-select option {
+  background: #1a1a2e;
+  color: #e0e0e0;
+}
+
+.om-btn {
+  background: #6c5ce7;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 10px 16px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  transition: background 0.15s;
+}
+
+.om-btn:hover {
+  background: #7c6cf7;
+}
+
+.om-btn-secondary {
+  background: rgba(255, 255, 255, 0.05);
+  color: #e0e0e0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.om-btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.om-status {
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  text-align: center;
+}
+
+.om-status-success {
+  background: rgba(0, 184, 148, 0.1);
+  color: #00b894;
+}
+
+.om-status-error {
+  background: rgba(233, 69, 96, 0.1);
+  color: #e94560;
+}
+
+/* Context bar */
+.om-context-bar {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+.om-context-chip {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  background: rgba(108, 92, 231, 0.1);
+  border: 1px solid rgba(108, 92, 231, 0.2);
+  border-radius: 20px;
+  font-size: 11px;
+  color: #a29bfe;
+}
+
+.om-context-chip-remove {
+  background: none;
+  border: none;
+  color: #a29bfe;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 2px;
+  line-height: 1;
+}
+
+/* Diff */
+.om-diff {
+  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
+  font-size: 12px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  margin: 8px 0;
+}
+
+.om-diff-header {
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  color: #888;
+  font-size: 11px;
+}
+
+.om-diff-line {
+  padding: 2px 12px;
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.om-diff-add {
+  background: rgba(0, 184, 148, 0.1);
+  color: #55efc4;
+}
+
+.om-diff-remove {
+  background: rgba(233, 69, 96, 0.1);
+  color: #fab1a0;
+}
+
+.om-diff-actions {
+  display: flex;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+/* Element info */
+.om-element-info {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
+  font-size: 11px;
+  color: #888;
+  margin: 8px 0;
+  max-height: 100px;
+  overflow-y: auto;
+}
+
+.om-hidden {
+  display: none !important;
+}
+
+/* Loading */
+.om-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  color: #888;
+  font-size: 12px;
+}
+
+.om-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(108, 92, 231, 0.2);
+  border-top-color: #6c5ce7;
+  border-radius: 50%;
+  animation: om-spin 0.6s linear infinite;
+}
+
+@keyframes om-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Tooltip */
+.om-tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #1a1a2e;
+  color: #e0e0e0;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s;
+  margin-bottom: 4px;
+}
+
+.om-pill-btn:hover .om-tooltip {
+  opacity: 1;
+}
+`;var m=null,p=new Map,V=[],E=[],k=!1,w=null;function L(){return Math.random().toString(36).slice(2)+Date.now().toString(36)}function S(e,n){return new Promise((t,i)=>{try{m=new WebSocket(`ws://127.0.0.1:${e}/__openmagic__/ws`),m.onopen=()=>{let r=L();M({id:r,type:"handshake",payload:{token:n}}),p.set(r,a=>{if(a.type==="handshake.ok"){k=!0;for(let s of E)m?.send(s);E=[],t()}else a.type==="error"&&i(new Error(a.payload?.message||"Handshake failed"))})},m.onmessage=r=>{try{let a=JSON.parse(r.data);a.id&&p.has(a.id)&&(p.get(a.id)(a),(a.type==="llm.done"||a.type==="llm.error"||!a.type.startsWith("llm."))&&p.delete(a.id));for(let s of V)s(a)}catch{}},m.onclose=()=>{k=!1,w||(w=setTimeout(()=>{w=null,S(e,n).catch(()=>{})},2e3))},m.onerror=()=>{}}catch(r){i(r)}})}function M(e){let n=JSON.stringify(e);m&&k?m.send(n):E.push(n)}function g(e,n){return new Promise((t,i)=>{let r=L(),a=setTimeout(()=>{p.delete(r),i(new Error("Request timeout"))},3e4);p.set(r,s=>{clearTimeout(a),s.type==="error"?i(new Error(s.payload?.message||"Unknown error")):t(s)}),M({id:r,type:e,payload:n})})}function $(e,n,t){return new Promise((i,r)=>{let a=L(),s=setTimeout(()=>{p.delete(a),r(new Error("Stream timeout"))},12e4);p.set(a,l=>{l.type==="llm.chunk"?t(l.payload?.delta||""):l.type==="llm.done"?(clearTimeout(s),p.delete(a),i(l.payload)):(l.type==="llm.error"||l.type==="error")&&(clearTimeout(s),p.delete(a),r(new Error(l.payload?.message||"Stream error")))}),M({id:a,type:e,payload:n})})}var Q=["display","position","width","height","margin","padding","color","background-color","background","font-size","font-weight","font-family","border","border-radius","box-shadow","flex-direction","justify-content","align-items","gap","grid-template-columns","grid-template-rows","overflow","opacity","z-index","text-align","line-height","letter-spacing"];function N(e){let n=window.getComputedStyle(e),t={};for(let r of Q)t[r]=n.getPropertyValue(r);let i=e.getBoundingClientRect();return{tagName:e.tagName.toLowerCase(),id:e.id||"",className:e.className||"",textContent:(e.textContent||"").trim().slice(0,200),outerHTML:Z(e),cssSelector:ee(e),xpath:te(e),computedStyles:t,rect:{x:i.x,y:i.y,width:i.width,height:i.height}}}function Z(e){let n=e.cloneNode(!0);n.querySelectorAll("script, style, svg").forEach(r=>r.remove());let i=n.outerHTML;if(i.length>2e3){let r=e.tagName.toLowerCase(),a=Array.from(e.attributes).map(l=>`${l.name}="${l.value}"`).join(" "),s=Array.from(e.children).slice(0,5).map(l=>`<${l.tagName.toLowerCase()} .../>`).join(`
+  `);i=`<${r} ${a}>
+  ${s}
+  ${e.children.length>5?`<!-- +${e.children.length-5} more children -->`:""}
+</${r}>`}return i}function ee(e){if(e.id)return`#${e.id}`;let n=[],t=e;for(;t&&t!==document.body;){let i=t.tagName.toLowerCase();if(t.id){n.unshift(`#${t.id}`);break}if(t.className&&typeof t.className=="string"){let a=t.className.trim().split(/\s+/).filter(s=>!s.startsWith("__")&&s.length<30).slice(0,2);a.length>0&&(i+="."+a.join("."))}let r=t.parentElement;if(r){let a=Array.from(r.children).filter(s=>s.tagName===t.tagName);if(a.length>1){let s=a.indexOf(t)+1;i+=`:nth-child(${s})`}}n.unshift(i),t=t.parentElement}return n.join(" > ")}function te(e){let n=[],t=e;for(;t&&t!==document;){if(t.nodeType===Node.ELEMENT_NODE){let i=t,r=1,a=i.previousElementSibling;for(;a;)a.tagName===i.tagName&&r++,a=a.previousElementSibling;n.unshift(`${i.tagName.toLowerCase()}[${r}]`)}t=t.parentNode}return"/"+n.join("/")}var d=null;function O(e){d||(d=document.createElement("div"),d.style.cssText=`
+      position: fixed;
+      pointer-events: none;
+      z-index: 2147483646;
+      border: 2px solid #6c5ce7;
+      background: rgba(108, 92, 231, 0.1);
+      transition: all 0.1s ease;
+    `,d.dataset.openmagic="highlight",document.body.appendChild(d)),d.style.left=`${e.x}px`,d.style.top=`${e.y}px`,d.style.width=`${e.width}px`,d.style.height=`${e.height}px`,d.style.display="block"}function _(){d&&(d.style.display="none")}async function R(e){try{return e?await oe(e):await ne()}catch(n){return console.warn("[OpenMagic] Screenshot capture failed:",n),null}}async function ne(){let e=document.createElement("canvas"),n=window.devicePixelRatio||1;e.width=window.innerWidth*n,e.height=window.innerHeight*n;let t=e.getContext("2d");t.scale(n,n);try{let i=await A(document.body),r=await z(i,window.innerWidth,window.innerHeight);return t.drawImage(r,0,0),e.toDataURL("image/png")}catch{return null}}async function oe(e){let n=e.getBoundingClientRect(),t=document.createElement("canvas"),i=window.devicePixelRatio||1;t.width=n.width*i,t.height=n.height*i;let r=t.getContext("2d");r.scale(i,i);try{let a=await A(e),s=await z(a,n.width,n.height);return r.drawImage(s,0,0),t.toDataURL("image/png")}catch{return null}}function A(e){return new Promise(n=>{let t=e.cloneNode(!0);q(e,t);let i=e.getBoundingClientRect(),r=i.width,a=i.height,s=`
+      <svg xmlns="http://www.w3.org/2000/svg" width="${r}" height="${a}">
+        <foreignObject width="100%" height="100%">
+          <div xmlns="http://www.w3.org/1999/xhtml" style="width:${r}px;height:${a}px;overflow:hidden;">
+            ${t.outerHTML}
+          </div>
+        </foreignObject>
+      </svg>`;n(s)})}function q(e,n){let t=window.getComputedStyle(e),i="";for(let s=0;s<t.length;s++){let l=t[s];i+=`${l}:${t.getPropertyValue(l)};`}n.style.cssText=i;let r=e.children,a=n.children;for(let s=0;s<r.length&&s<a.length;s++)q(r[s],a[s])}function z(e,n,t){return new Promise((i,r)=>{let a=new Image,s=new Blob([e],{type:"image/svg+xml;charset=utf-8"}),l=URL.createObjectURL(s);a.onload=()=>{URL.revokeObjectURL(l),i(a)},a.onerror=()=>{URL.revokeObjectURL(l),r(new Error("Failed to load SVG image"))},a.width=n,a.height=t,a.src=l})}var b=[];var D=!1;function G(){if(D)return;D=!0;let e=window.fetch;window.fetch=async function(...i){let r=new Request(...i),a={method:r.method,url:r.url,timestamp:Date.now()};try{let s=await e.apply(this,i);return a.status=s.status,a.duration=Date.now()-a.timestamp,C(a),s}catch(s){throw a.status=0,a.duration=Date.now()-a.timestamp,C(a),s}};let n=XMLHttpRequest.prototype.open,t=XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.open=function(i,r,...a){return this.__om_method=i,this.__om_url=r,this.__om_start=Date.now(),n.apply(this,[i,r,...a])},XMLHttpRequest.prototype.send=function(...i){return this.addEventListener("loadend",()=>{C({method:this.__om_method||"GET",url:this.__om_url||"",status:this.status,duration:Date.now()-(this.__om_start||Date.now()),timestamp:this.__om_start||Date.now()})}),t.apply(this,i)}}function C(e){e.url.includes("__openmagic__")||(b.push(e),b.length>50&&b.shift())}function ae(){return[...b]}var x=[],ie=100,I=!1;function j(){if(I)return;I=!0;let e=["log","warn","error","info","debug"];for(let n of e){let t=console[n];console[n]=function(...i){x.push({level:n,args:i.map(r=>{try{return typeof r=="object"?JSON.stringify(r).slice(0,500):String(r)}catch{return String(r)}}),timestamp:Date.now()}),x.length>ie&&x.shift(),t.apply(console,i)}}}function re(){return[...x]}function K(e,n){return{selectedElement:e?{tagName:e.tagName,id:e.id,className:e.className,textContent:e.textContent,outerHTML:e.outerHTML,cssSelector:e.cssSelector,computedStyles:e.computedStyles}:void 0,screenshot:n||void 0,networkLogs:ae().map(t=>({method:t.method,url:t.url,status:t.status,duration:t.duration,timestamp:t.timestamp})),consoleLogs:re().map(t=>({level:t.level,args:t.args,timestamp:t.timestamp}))}}var T={openai:{name:"OpenAI",models:[{id:"gpt-4.1",name:"GPT-4.1"},{id:"gpt-4.1-mini",name:"GPT-4.1 Mini"},{id:"gpt-4.1-nano",name:"GPT-4.1 Nano"},{id:"gpt-4o",name:"GPT-4o"},{id:"gpt-4o-mini",name:"GPT-4o Mini"},{id:"o3",name:"o3 (Reasoning)"},{id:"o4-mini",name:"o4-mini (Reasoning)"}],keyPlaceholder:"sk-..."},anthropic:{name:"Anthropic",models:[{id:"claude-opus-4-20250514",name:"Claude Opus 4"},{id:"claude-sonnet-4-20250514",name:"Claude Sonnet 4"},{id:"claude-haiku-4-20250514",name:"Claude Haiku 4"}],keyPlaceholder:"sk-ant-..."},google:{name:"Google Gemini",models:[{id:"gemini-2.5-pro",name:"Gemini 2.5 Pro"},{id:"gemini-2.5-flash",name:"Gemini 2.5 Flash"},{id:"gemini-2.0-flash",name:"Gemini 2.0 Flash"}],keyPlaceholder:"AIza..."},deepseek:{name:"DeepSeek",models:[{id:"deepseek-chat",name:"DeepSeek V3"},{id:"deepseek-reasoner",name:"DeepSeek R1"}],keyPlaceholder:"sk-..."},groq:{name:"Groq",models:[{id:"llama-3.3-70b-versatile",name:"Llama 3.3 70B"},{id:"llama-3.1-8b-instant",name:"Llama 3.1 8B"}],keyPlaceholder:"gsk_..."},mistral:{name:"Mistral",models:[{id:"mistral-large-latest",name:"Mistral Large"},{id:"codestral-latest",name:"Codestral"}],keyPlaceholder:"..."},xai:{name:"xAI (Grok)",models:[{id:"grok-3",name:"Grok 3"},{id:"grok-3-mini",name:"Grok 3 Mini"}],keyPlaceholder:"xai-..."},ollama:{name:"Ollama (Local)",models:[],keyPlaceholder:"not required",local:!0},openrouter:{name:"OpenRouter",models:[],keyPlaceholder:"sk-or-..."}},o={connected:!1,panelOpen:!1,activePanel:null,selecting:!1,selectedElement:null,screenshot:null,messages:[],streaming:!1,streamContent:"",provider:"",model:"",hasApiKey:!1,roots:[]},y,u;function F(){if(document.querySelector("openmagic-toolbar"))return;let e=document.createElement("openmagic-toolbar");e.dataset.openmagic="true",y=e.attachShadow({mode:"closed"});let n=document.createElement("style");n.textContent=P,y.appendChild(n),u=document.createElement("div"),y.appendChild(u),document.body.appendChild(e),G(),j();let t=window.__OPENMAGIC_CONFIG__;t&&S(t.wsPort,t.token).then(()=>{o.connected=!0,g("config.get").then(i=>{o.provider=i.payload?.provider||"",o.model=i.payload?.model||"",o.hasApiKey=i.payload?.hasApiKey||!1,o.roots=i.payload?.roots||[],(!o.provider||!o.hasApiKey)&&(o.panelOpen=!0,o.activePanel="settings"),c()})}).catch(i=>{console.error("[OpenMagic] Connection failed:",i),o.connected=!1,c()}),c()}function c(){if(u.innerHTML="",o.panelOpen&&o.activePanel){let n=document.createElement("div");n.className="om-panel",o.activePanel==="settings"?n.innerHTML=se():o.activePanel==="chat"&&(n.innerHTML=le()),u.appendChild(n),ce(n)}let e=document.createElement("div");if(e.className="om-pill",e.innerHTML=`
+    <span class="om-pill-logo">\u2728</span>
+    <span class="om-pill-text">Magic</span>
+    <span class="om-pill-divider"></span>
+    <button class="om-pill-btn ${o.selecting?"active":""}" data-action="select" title="Select Element">
+      \u{1F3AF}
+    </button>
+    <button class="om-pill-btn" data-action="screenshot" title="Screenshot">
+      \u{1F4F8}
+    </button>
+    <button class="om-pill-btn ${o.activePanel==="chat"?"active":""}" data-action="chat" title="Chat">
+      \u{1F4AC}
+    </button>
+    <button class="om-pill-btn ${o.activePanel==="settings"?"active":""}" data-action="settings" title="Settings">
+      \u2699\uFE0F
+    </button>
+  `,!o.connected){let n=document.createElement("span");n.style.cssText="width:8px;height:8px;border-radius:50%;background:#e94560;margin-left:4px;",e.appendChild(n)}u.appendChild(e),ge(e),e.querySelectorAll(".om-pill-btn").forEach(n=>{n.addEventListener("click",t=>{t.stopPropagation();let i=n.dataset.action;i==="select"?de():i==="screenshot"?me():i==="chat"?U("chat"):i==="settings"&&U("settings")})})}function se(){let e=Object.entries(T).map(([a,s])=>`<option value="${a}" ${o.provider===a?"selected":""}>${s.name}</option>`).join(""),n=T[o.provider],t=n?n.models.map(a=>`<option value="${a.id}" ${o.model===a.id?"selected":""}>${a.name}</option>`).join(""):'<option value="">Select a provider first</option>',i=n?.keyPlaceholder||"Enter API key...",r=n?.local||!1;return`
+    <div class="om-panel-header">
+      <span class="om-panel-title">Settings</span>
+      <button class="om-panel-close" data-action="close">&times;</button>
+    </div>
+    <div class="om-panel-body">
+      <div class="om-settings">
+        <div class="om-field">
+          <label class="om-label">Provider</label>
+          <select class="om-select" data-field="provider">
+            <option value="">Select Provider...</option>
+            ${e}
+          </select>
+        </div>
+
+        <div class="om-field">
+          <label class="om-label">Model</label>
+          <select class="om-select" data-field="model">
+            <option value="">Select Model...</option>
+            ${t}
+          </select>
+        </div>
+
+        <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>
+
+        <button class="om-btn" data-action="save-settings">Save Configuration</button>
+
+        ${o.hasApiKey?'<div class="om-status om-status-success">API key configured</div>':""}
+      </div>
+    </div>
+  `}function le(){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>
+      </div>
+      <div class="om-panel-body">
+        <div class="om-status om-status-error">
+          Configure your LLM provider in Settings first
+        </div>
+      </div>
+    `;let e=o.messages.map(i=>`<div class="om-msg om-msg-${i.role}">${H(i.content)}</div>`).join(""),n=o.streaming?`<div class="om-msg om-msg-assistant"><div class="om-loading"><div class="om-spinner"></div> Thinking...</div>${H(o.streamContent)}</div>`:"",t=[];return o.selectedElement&&t.push(`<span class="om-context-chip">\u{1F3AF} ${o.selectedElement.tagName}${o.selectedElement.id?"#"+o.selectedElement.id:""} <button class="om-context-chip-remove" data-action="clear-element">&times;</button></span>`),o.screenshot&&t.push('<span class="om-context-chip">\u{1F4F8} Screenshot <button class="om-context-chip-remove" data-action="clear-screenshot">&times;</button></span>'),`
+    <div class="om-panel-header">
+      <span class="om-panel-title">Chat \u2014 ${T[o.provider]?.name||o.provider} / ${o.model}</span>
+      <button class="om-panel-close" data-action="close">&times;</button>
+    </div>
+    <div class="om-panel-body">
+      ${t.length>0?`<div class="om-context-bar">${t.join("")}</div>`:""}
+      ${o.selectedElement?`<div class="om-element-info">&lt;${o.selectedElement.tagName}${o.selectedElement.id?' id="'+o.selectedElement.id+'"':""}${o.selectedElement.className?' class="'+o.selectedElement.className.toString().slice(0,60)+'"':""}&gt;</div>`:""}
+      <div class="om-chat-messages">
+        ${e||'<div style="color:#555;text-align:center;padding:40px 0;font-size:13px;">Select an element or describe what you want to change</div>'}
+        ${n}
+      </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"}
+        </button>
+      </div>
+    </div>
+  `}function ce(e){e.querySelector('[data-action="close"]')?.addEventListener("click",()=>{o.panelOpen=!1,o.activePanel=null,c()}),e.querySelector('[data-field="provider"]')?.addEventListener("change",t=>{o.provider=t.target.value,o.model="",c()}),e.querySelector('[data-field="model"]')?.addEventListener("change",t=>{o.model=t.target.value}),e.querySelector('[data-action="save-settings"]')?.addEventListener("click",()=>{let i=e.querySelector('[data-field="apiKey"]')?.value||"",r={provider:o.provider,model:o.model};i&&(r.apiKey=i),g("config.set",r).then(()=>{o.hasApiKey=!0,c()}).catch(a=>{console.error("[OpenMagic] Failed to save config:",a)})}),e.querySelector('[data-action="send"]')?.addEventListener("click",()=>{X(e)});let n=e.querySelector(".om-chat-input");n?.addEventListener("keydown",t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),X(e))}),n?.addEventListener("input",()=>{n.style.height="auto",n.style.height=Math.min(n.scrollHeight,120)+"px"}),e.querySelector('[data-action="clear-element"]')?.addEventListener("click",()=>{o.selectedElement=null,c()}),e.querySelector('[data-action="clear-screenshot"]')?.addEventListener("click",()=>{o.screenshot=null,c()})}async function X(e){let n=e.querySelector(".om-chat-input");if(!n)return;let t=n.value.trim();if(!t||o.streaming)return;o.messages.push({role:"user",content:t}),o.streaming=!0,o.streamContent="",c();let i=K(o.selectedElement,o.screenshot);try{let r=await $("llm.chat",{provider:o.provider,model:o.model,messages:o.messages.map(a=>({role:a.role,content:a.content})),context:i},a=>{o.streamContent+=a;let l=y.querySelector(".om-chat-messages")?.querySelector(".om-msg-assistant:last-child");l&&(l.innerHTML=H(o.streamContent))});if(o.messages.push({role:"assistant",content:o.streamContent||r?.content||""}),r?.modifications&&r.modifications.length>0){for(let a of r.modifications)if(a.type==="edit"&&a.file&&a.search&&a.replace)try{let l=(await g("fs.read",{path:B(a.file)})).payload?.content;if(l&&l.includes(a.search)){let v=l.replace(a.search,a.replace);await g("fs.write",{path:B(a.file),content:v}),o.messages.push({role:"system",content:`Applied change to ${a.file}`})}}catch(s){o.messages.push({role:"system",content:`Failed to apply change to ${a.file}: ${s.message}`})}}}catch(r){o.messages.push({role:"system",content:`Error: ${r.message}`})}o.streaming=!1,o.streamContent="",c()}function B(e){return o.roots.length>0?o.roots[0]+"/"+e:e}var h=null,f=null;function de(){o.selecting?W():pe()}function pe(){o.selecting=!0,document.body.style.cursor="crosshair",f=e=>{let n=e.target;if(Y(n))return;let t=n.getBoundingClientRect();O({x:t.x,y:t.y,width:t.width,height:t.height})},h=e=>{e.preventDefault(),e.stopPropagation();let n=e.target;Y(n)||(o.selectedElement=N(n),W(),o.activePanel!=="chat"&&(o.panelOpen=!0,o.activePanel="chat"),c())},document.addEventListener("mousemove",f,!0),document.addEventListener("click",h,!0),c()}function W(){o.selecting=!1,document.body.style.cursor="",_(),f&&(document.removeEventListener("mousemove",f,!0),f=null),h&&(document.removeEventListener("click",h,!0),h=null),c()}async function me(){let e=await R();e&&(o.screenshot=e,o.panelOpen=!0,o.activePanel="chat",c())}function U(e){o.panelOpen&&o.activePanel===e?(o.panelOpen=!1,o.activePanel=null):(o.panelOpen=!0,o.activePanel=e),c()}function ge(e){let n=!1,t=0,i=0,r=0,a=0;e.addEventListener("mousedown",s=>{if(s.target.closest(".om-pill-btn"))return;n=!0,t=s.clientX,i=s.clientY;let l=e.getBoundingClientRect();r=l.left,a=l.top,s.preventDefault()}),document.addEventListener("mousemove",s=>{if(!n)return;let l=s.clientX-t,v=s.clientY-i;e.style.position="fixed",e.style.left=r+l+"px",e.style.top=a+v+"px",e.style.right="auto",e.style.bottom="auto"}),document.addEventListener("mouseup",()=>{n=!1})}function Y(e){return!!e.closest("openmagic-toolbar")||!!e.dataset?.openmagic}function H(e){let n=document.createElement("div");return n.textContent=e,n.innerHTML}typeof window<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",F):F());})();
+//# sourceMappingURL=index.global.js.map