openmagic 0.17.1 → 0.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +34 -12
- package/dist/cli.js.map +1 -1
- package/dist/toolbar/index.global.js +18 -18
- package/dist/toolbar/index.global.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
"use strict";var OpenMagicToolbar=(()=>{var
|
|
2
|
+
"use strict";var OpenMagicToolbar=(()=>{var ie=`
|
|
3
3
|
:host {
|
|
4
4
|
all: initial;
|
|
5
5
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
@@ -321,25 +321,25 @@
|
|
|
321
321
|
.om-btn-secondary:hover { background: rgba(255,255,255,0.08); color: #ccc; }
|
|
322
322
|
.om-diff-applied { opacity: 0.5; }
|
|
323
323
|
.om-diff-applied .om-diff-actions { display: none; }
|
|
324
|
-
`;var
|
|
324
|
+
`;var x=null,f=new Map,A=[],K=[],_=!1,le=!1,F=null,G=0;function W(){return Math.random().toString(36).slice(2)+Date.now().toString(36)}function V(e,o){return le=!0,new Promise((n,a)=>{let s=!1,r=setTimeout(()=>{s||(s=!0,a(new Error("Handshake timeout")),x?.close())},1e4);try{let i=window.location.hostname||"127.0.0.1",l=window.location.protocol==="https:"?"wss:":"ws:";x=new WebSocket(`${l}//${i}:${e}/__openmagic__/ws`),x.onopen=()=>{let c=W();x.send(JSON.stringify({id:c,type:"handshake",payload:{token:o}})),f.set(c,d=>{if(d.type==="handshake.ok"){clearTimeout(r),_=!0,G=0;for(let p of K)x?.send(p);K=[],s||(s=!0,n())}else d.type==="error"&&(clearTimeout(r),s||(s=!0,a(new Error(d.payload?.message||"Handshake failed"))))})},x.onmessage=c=>{try{let d=JSON.parse(c.data);d.id&&f.has(d.id)&&(f.get(d.id)(d),(d.type==="llm.done"||d.type==="llm.error"||!d.type.startsWith("llm."))&&f.delete(d.id));for(let p of A)p(d)}catch{}},x.onclose=()=>{let c=_;if(_=!1,f.forEach((d,p)=>{d({type:"error",id:p,payload:{message:"Connection lost"}})}),f.clear(),!c&&!s){clearTimeout(r),s=!0,a(new Error("WebSocket closed before handshake"));return}if(c&&le&&!F){let d=Math.min(2e3*Math.pow(1.5,G),3e4);G++,F=setTimeout(()=>{F=null,V(e,o).then(()=>{for(let p of A)p({type:"reconnected",payload:{}})}).catch(()=>{})},d)}},x.onerror=()=>{!_&&!s&&(clearTimeout(r),s=!0,a(new Error("WebSocket connection failed")))}}catch(i){clearTimeout(r),s||(s=!0,a(i))}})}function ce(e){let o=JSON.stringify(e);x&&x.readyState===WebSocket.OPEN&&_?x.send(o):K.push(o)}function M(e,o){return new Promise((n,a)=>{let s=W(),r=setTimeout(()=>{f.delete(s),a(new Error("Request timeout"))},3e4);f.set(s,i=>{clearTimeout(r),i.type==="error"?a(new Error(i.payload?.message||"Unknown error")):n(i)}),ce({id:s,type:e,payload:o})})}function de(e,o,n){return new Promise((a,s)=>{let r=W(),i=setTimeout(()=>{f.delete(r),s(new Error("Stream timeout"))},12e4);f.set(r,l=>{l.type==="llm.chunk"?n(l.payload?.delta||""):l.type==="llm.done"?(clearTimeout(i),f.delete(r),a(l.payload)):(l.type==="llm.error"||l.type==="error")&&(clearTimeout(i),f.delete(r),s(new Error(l.payload?.message||"Stream error")))}),ce({id:r,type:e,payload:o})})}function pe(e){return A.push(e),()=>{A=A.filter(o=>o!==e)}}function me(){return _}var Pe=["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 ue(e){let o=window.getComputedStyle(e),n={};for(let s of Pe)n[s]=o.getPropertyValue(s);let a=e.getBoundingClientRect();return{tagName:e.tagName.toLowerCase(),id:e.id||"",className:e.className||"",textContent:(e.textContent||"").trim().slice(0,200),outerHTML:Oe(e),cssSelector:Ae(e),xpath:Re(e),computedStyles:n,ancestry:_e(e),componentHint:Ne(e),rect:{x:a.x,y:a.y,width:a.width,height:a.height}}}function _e(e,o=5){let n=[],a=e.parentElement;for(;a&&a!==document.body&&n.length<o;){let s=a.tagName.toLowerCase(),r=(typeof a.className=="string"?a.className:"").split(/\s+/).filter(i=>i.length>1&&!i.startsWith("_")).slice(0,3).join(".");n.push(r?`${s}.${r}`:s),a=a.parentElement}return n}function Ne(e){let o=e;for(;o&&o!==document.body;){let n=o.getAttribute("data-component")||o.getAttribute("data-testid")||o.getAttribute("data-cy");if(n)return n;let a=Object.keys(o);for(let s of a)if(s.startsWith("__reactFiber")||s.startsWith("__reactInternalInstance"))try{let r=o[s],i=r?.type?.name||r?.type?.displayName||r?.return?.type?.name||r?.return?.type?.displayName;if(i&&i!=="div"&&i!=="span"&&i.length>1)return i}catch{}o=o.parentElement}return""}function Oe(e){let o=e.cloneNode(!0);o.querySelectorAll("script, style, svg").forEach(s=>s.remove());let a=o.outerHTML;if(a.length>2e3){let s=e.tagName.toLowerCase(),r=Array.from(e.attributes).map(l=>`${l.name}="${l.value}"`).join(" "),i=Array.from(e.children).slice(0,5).map(l=>`<${l.tagName.toLowerCase()} .../>`).join(`
|
|
325
325
|
`);a=`<${s} ${r}>
|
|
326
326
|
${i}
|
|
327
327
|
${e.children.length>5?`<!-- +${e.children.length-5} more children -->`:""}
|
|
328
|
-
</${s}>`}return a}function
|
|
328
|
+
</${s}>`}return a}function Ae(e){if(e.id)return`#${CSS.escape(e.id)}`;let o=[],n=e;for(;n&&n!==document.body;){let a=n.tagName.toLowerCase();if(n.id){o.unshift(`#${CSS.escape(n.id)}`);break}if(n.className&&typeof n.className=="string"){let r=n.className.trim().split(/\s+/).filter(i=>!i.startsWith("__")&&i.length<30).slice(0,2).map(i=>CSS.escape(i));r.length>0&&(a+="."+r.join("."))}let s=n.parentElement;if(s){let r=Array.from(s.children).filter(i=>i.tagName===n.tagName);if(r.length>1){let i=r.indexOf(n)+1;a+=`:nth-of-type(${i})`}}o.unshift(a),n=n.parentElement}return o.join(" > ")}function Re(e){let o=[],n=e;for(;n&&n!==document;){if(n.nodeType===Node.ELEMENT_NODE){let a=n,s=1,r=a.previousElementSibling;for(;r;)r.tagName===a.tagName&&s++,r=r.previousElementSibling;o.unshift(`${a.tagName.toLowerCase()}[${s}]`)}n=n.parentNode}return"/"+o.join("/")}var y=null;function ge(e){y||(y=document.createElement("div"),y.style.cssText=`
|
|
329
329
|
position: fixed;
|
|
330
330
|
pointer-events: none;
|
|
331
331
|
z-index: 2147483646;
|
|
332
332
|
border: 2px solid #6c5ce7;
|
|
333
333
|
background: rgba(108, 92, 231, 0.1);
|
|
334
334
|
transition: all 0.1s ease;
|
|
335
|
-
`,y.dataset.openmagic="highlight",document.body.appendChild(y)),y.style.left=`${e.x}px`,y.style.top=`${e.y}px`,y.style.width=`${e.width}px`,y.style.height=`${e.height}px`,y.style.display="block"}function
|
|
335
|
+
`,y.dataset.openmagic="highlight",document.body.appendChild(y)),y.style.left=`${e.x}px`,y.style.top=`${e.y}px`,y.style.width=`${e.width}px`,y.style.height=`${e.height}px`,y.style.display="block"}function he(){y&&(y.style.display="none")}async function fe(e){try{return e?await Be(e):await De()}catch(o){return console.warn("[OpenMagic] Screenshot capture failed:",o),null}}async function De(){let e=document.createElement("canvas"),o=window.devicePixelRatio||1;e.width=window.innerWidth*o,e.height=window.innerHeight*o;let n=e.getContext("2d");n.scale(o,o);try{let a=await ye(document.body),s=await xe(a,window.innerWidth,window.innerHeight);return n.drawImage(s,0,0),e.toDataURL("image/png")}catch{return null}}async function Be(e){let o=e.getBoundingClientRect(),n=document.createElement("canvas"),a=window.devicePixelRatio||1;n.width=o.width*a,n.height=o.height*a;let s=n.getContext("2d");s.scale(a,a);try{let r=await ye(e),i=await xe(r,o.width,o.height);return s.drawImage(i,0,0),n.toDataURL("image/png")}catch{return null}}function ye(e){return new Promise(o=>{let n=e.cloneNode(!0);be(e,n);let a=e.getBoundingClientRect(),s=a.width,r=a.height,i=`
|
|
336
336
|
<svg xmlns="http://www.w3.org/2000/svg" width="${s}" height="${r}">
|
|
337
337
|
<foreignObject width="100%" height="100%">
|
|
338
338
|
<div xmlns="http://www.w3.org/1999/xhtml" style="width:${s}px;height:${r}px;overflow:hidden;">
|
|
339
339
|
${n.outerHTML}
|
|
340
340
|
</div>
|
|
341
341
|
</foreignObject>
|
|
342
|
-
</svg>`;o(i)})}function he(e,o){let n=window.getComputedStyle(e),a="";for(let i=0;i<n.length;i++){let l=n[i];a+=`${l}:${n.getPropertyValue(l)};`}o.style.cssText=a;let s=e.children,r=o.children;for(let i=0;i<s.length&&i<r.length;i++)he(s[i],r[i])}function fe(e,o,n){return new Promise((a,s)=>{let r=new Image,i=new Blob([e],{type:"image/svg+xml;charset=utf-8"}),l=URL.createObjectURL(i);r.onload=()=>{URL.revokeObjectURL(l),a(r)},r.onerror=()=>{URL.revokeObjectURL(l),s(new Error("Failed to load SVG image"))},r.width=o,r.height=n,r.src=l})}var B=[];var ye=!1;function xe(){if(ye)return;ye=!0;let e=window.fetch;window.fetch=async function(...a){let s=new Request(...a),r={method:s.method,url:s.url,timestamp:Date.now()};try{let i=await e.apply(this,a);return r.status=i.status,r.duration=Date.now()-r.timestamp,V(r),i}catch(i){throw r.status=0,r.duration=Date.now()-r.timestamp,V(r),i}};let o=XMLHttpRequest.prototype.open,n=XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.open=function(a,s,...r){return this.__om_method=a,this.__om_url=s,this.__om_start=Date.now(),o.apply(this,[a,s,...r])},XMLHttpRequest.prototype.send=function(...a){return this.addEventListener("loadend",()=>{V({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,a)}}function V(e){e.url.includes("__openmagic__")||(B.push(e),B.length>50&&B.shift())}function W(){return[...B]}var q=[],Oe=100,be=!1;function ve(){if(be)return;be=!0;let e=["log","warn","error","info","debug"];for(let o of e){let n=console[o];console[o]=function(...a){q.push({level:o,args:a.map(s=>{try{return typeof s=="object"?JSON.stringify(s).slice(0,500):String(s)}catch{return String(s)}}),timestamp:Date.now()}),q.length>Oe&&q.shift(),n.apply(console,a)}}}function X(){return[...q]}function we(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:W().map(n=>({method:n.method,url:n.url,status:n.status,duration:n.duration,timestamp:n.timestamp})),consoleLogs:X().map(n=>({level:n.level,args:n.args,timestamp:n.timestamp}))}}var u={sparkle:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>',crosshair:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>',camera:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>',chat:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>',settings:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>',send:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>',x:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',externalLink:'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>',check:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',grip:'<svg width="7" 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>',network:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>',activity:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>',paperclip:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>',image:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>'},C={openai:{name:"OpenAI",keyUrl:"https://platform.openai.com/api-keys",keyPlaceholder:"sk-...",models:[{id:"gpt-5.4",name:"GPT-5.4"},{id:"gpt-5.4-mini",name:"GPT-5.4 Mini"},{id:"gpt-5.2",name:"GPT-5.2 Thinking"},{id:"o3",name:"o3"},{id:"o4-mini",name:"o4-mini"},{id:"gpt-4.1",name:"GPT-4.1"},{id:"gpt-4.1-mini",name:"GPT-4.1 Mini"}]},anthropic:{name:"Anthropic",keyUrl:"https://console.anthropic.com/settings/keys",keyPlaceholder:"sk-ant-...",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"}]},google:{name:"Google Gemini",keyUrl:"https://aistudio.google.com/apikey",keyPlaceholder:"AIza...",models:[{id:"gemini-3.1-pro-preview",name:"Gemini 3.1 Pro"},{id:"gemini-3-flash-preview",name:"Gemini 3 Flash"},{id:"gemini-2.5-pro",name:"Gemini 2.5 Pro"},{id:"gemini-2.5-flash",name:"Gemini 2.5 Flash"}]},xai:{name:"xAI (Grok)",keyUrl:"https://console.x.ai/team/default/api-keys",keyPlaceholder:"xai-...",models:[{id:"grok-4.20-0309-reasoning",name:"Grok 4.20 Reasoning"},{id:"grok-4-1-fast-non-reasoning",name:"Grok 4.1 Fast"}]},deepseek:{name:"DeepSeek",keyUrl:"https://platform.deepseek.com/api_keys",keyPlaceholder:"sk-...",models:[{id:"deepseek-chat",name:"DeepSeek V3.2"},{id:"deepseek-reasoner",name:"DeepSeek R1"}]},mistral:{name:"Mistral",keyUrl:"https://console.mistral.ai/api-keys",keyPlaceholder:"...",models:[{id:"mistral-large-3-25-12",name:"Mistral Large 3"},{id:"codestral-2508",name:"Codestral"},{id:"devstral-2-25-12",name:"Devstral 2"}]},groq:{name:"Groq",keyUrl:"https://console.groq.com/keys",keyPlaceholder:"gsk_...",models:[{id:"meta-llama/llama-4-scout-17b-16e-instruct",name:"Llama 4 Scout"},{id:"llama-3.3-70b-versatile",name:"Llama 3.3 70B"}]},minimax:{name:"MiniMax",keyUrl:"https://platform.minimax.chat/user-center/basic-information/interface-key",keyPlaceholder:"MiniMax key...",models:[{id:"MiniMax-M2.7",name:"MiniMax M2.7"},{id:"MiniMax-M2.5",name:"MiniMax M2.5"}]},moonshot:{name:"Kimi (Moonshot)",keyUrl:"https://platform.moonshot.cn/console/api-keys",keyPlaceholder:"Moonshot key...",models:[{id:"kimi-k2.5",name:"Kimi K2.5"},{id:"kimi-k2-thinking",name:"Kimi K2 Thinking"}]},qwen:{name:"Qwen (Alibaba)",keyUrl:"https://dashscope.console.aliyun.com/apiKey",keyPlaceholder:"DashScope key...",models:[{id:"qwen3.5-plus",name:"Qwen 3.5 Plus"},{id:"qwen-max",name:"Qwen Max"}]},zhipu:{name:"Zhipu AI (GLM)",keyUrl:"https://open.bigmodel.cn/usercenter/apikeys",keyPlaceholder:"Zhipu key...",models:[{id:"glm-5",name:"GLM-5"},{id:"glm-4.7",name:"GLM-4.7"}]},doubao:{name:"Doubao (ByteDance)",keyUrl:"https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey",keyPlaceholder:"Volcano key...",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"}]},ollama:{name:"Ollama (Local)",keyPlaceholder:"not required",local:!0,models:[]},openrouter:{name:"OpenRouter",keyUrl:"https://openrouter.ai/settings/keys",keyPlaceholder:"sk-or-...",models:[]}};function Q(e){let o=new TextEncoder().encode(e),n="";for(let a=0;a<o.length;a+=32768)n+=String.fromCharCode(...o.subarray(a,a+32768));return btoa(n)}function Z(e){let o=atob(e),n=new Uint8Array(o.length);for(let a=0;a<o.length;a++)n[a]=o.charCodeAt(a);return new TextDecoder().decode(n)}var Se="0.17.1",t={connected:!1,panelOpen:!1,activePanel:"",selecting:!1,selectedElement:null,screenshot:null,messages:[],streaming:!1,streamContent:"",provider:"",model:"",hasApiKey:!1,configuredProviders:{},roots:[],updateAvailable:!1,latestVersion:"",saveStatus:"",networkCapture:!1,attachments:[]},x,h,M,Ee,oe,w;function Re(){try{sessionStorage.setItem("__om_state__",JSON.stringify({messages:t.messages,provider:t.provider,model:t.model,panelOpen:t.panelOpen,activePanel:t.activePanel}))}catch{}}function Ae(){try{let e=JSON.parse(sessionStorage.getItem("__om_state__")||"{}");e.messages?.length&&(t.messages=e.messages),e.provider&&(t.provider=e.provider),e.model&&(t.model=e.model),e.panelOpen&&(t.panelOpen=e.panelOpen,t.activePanel=e.activePanel||"")}catch{}}function ke(){if(document.querySelector("openmagic-toolbar"))return;Ae();let e=document.createElement("openmagic-toolbar");e.dataset.openmagic="true",x=e.attachShadow({mode:"closed"});let o=document.createElement("style");o.textContent=ae,x.appendChild(o);let n=document.createElement("div");x.appendChild(n),n.innerHTML=De(),h=n.querySelector(".om-toolbar"),M=n.querySelector(".om-prompt-input"),Ee=n.querySelector(".om-prompt-context"),oe=n.querySelector(".om-panel"),w=n.querySelector(".om-panel-body"),document.body.appendChild(e),Be(n),Je();try{let i=JSON.parse(localStorage.getItem("__om_pos__")||"");i?.left&&i?.top&&(h.style.left=i.left,h.style.top=i.top,h.style.right="auto",h.style.bottom="auto")}catch{}xe(),ve(),Ye();let s=document.querySelector("script[data-openmagic-token]")?.dataset.openmagicToken||window.__OPENMAGIC_TOKEN__,r=parseInt(window.location.port,10)||(window.location.protocol==="https:"?443:80);s&&K(r,s).then(()=>(t.connected=!0,ee(),E("config.get"))).then(i=>{let l=i.payload?.provider||"",c=i.payload?.model||"";t.provider=t.provider||l,t.model=t.model||c,t.configuredProviders=i.payload?.apiKeys||{},t.hasApiKey=t.configuredProviders[t.provider]||!1,t.roots=i.payload?.roots||[],t.panelOpen&&t.activePanel?T(t.activePanel):(!t.provider||!t.hasApiKey&&!Object.values(t.configuredProviders).some(Boolean))&&T("settings"),A()}).catch(()=>{t.connected=!1,ee()})}function De(){return`
|
|
342
|
+
</svg>`;o(i)})}function be(e,o){let n=window.getComputedStyle(e),a="";for(let i=0;i<n.length;i++){let l=n[i];a+=`${l}:${n.getPropertyValue(l)};`}o.style.cssText=a;let s=e.children,r=o.children;for(let i=0;i<s.length&&i<r.length;i++)be(s[i],r[i])}function xe(e,o,n){return new Promise((a,s)=>{let r=new Image,i=new Blob([e],{type:"image/svg+xml;charset=utf-8"}),l=URL.createObjectURL(i);r.onload=()=>{URL.revokeObjectURL(l),a(r)},r.onerror=()=>{URL.revokeObjectURL(l),s(new Error("Failed to load SVG image"))},r.width=o,r.height=n,r.src=l})}var I=[];var ve=!1;function ke(){if(ve)return;ve=!0;let e=window.fetch;window.fetch=async function(...a){let s=new Request(...a),r={method:s.method,url:s.url,timestamp:Date.now()};try{let i=await e.apply(this,a);return r.status=i.status,r.duration=Date.now()-r.timestamp,X(r),i}catch(i){throw r.status=0,r.duration=Date.now()-r.timestamp,X(r),i}};let o=XMLHttpRequest.prototype.open,n=XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.open=function(a,s,...r){return this.__om_method=a,this.__om_url=s,this.__om_start=Date.now(),o.apply(this,[a,s,...r])},XMLHttpRequest.prototype.send=function(...a){return this.addEventListener("loadend",()=>{X({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,a)}}function X(e){e.url.includes("__openmagic__")||(I.push(e),I.length>50&&I.shift())}function J(){return[...I]}var j=[],qe=100,we=!1;function Se(){if(we)return;we=!0;let e=["log","warn","error","info","debug"];for(let o of e){let n=console[o];console[o]=function(...a){j.push({level:o,args:a.map(s=>{try{return typeof s=="object"?JSON.stringify(s).slice(0,500):String(s)}catch{return String(s)}}),timestamp:Date.now()}),j.length>qe&&j.shift(),n.apply(console,a)}}}function Y(){return[...j]}function Ee(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:J().map(n=>({method:n.method,url:n.url,status:n.status,duration:n.duration,timestamp:n.timestamp})),consoleLogs:Y().map(n=>({level:n.level,args:n.args,timestamp:n.timestamp}))}}var u={sparkle:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>',crosshair:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>',camera:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>',chat:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>',settings:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>',send:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>',x:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',externalLink:'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>',check:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',grip:'<svg width="7" 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>',network:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>',activity:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>',paperclip:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>',image:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>'},N={openai:{name:"OpenAI",keyUrl:"https://platform.openai.com/api-keys",keyPlaceholder:"sk-...",models:[{id:"gpt-5.4",name:"GPT-5.4"},{id:"gpt-5.4-mini",name:"GPT-5.4 Mini"},{id:"gpt-5.2",name:"GPT-5.2 Thinking"},{id:"o3",name:"o3"},{id:"o4-mini",name:"o4-mini"},{id:"gpt-4.1",name:"GPT-4.1"},{id:"gpt-4.1-mini",name:"GPT-4.1 Mini"}]},anthropic:{name:"Anthropic",keyUrl:"https://console.anthropic.com/settings/keys",keyPlaceholder:"sk-ant-...",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"}]},google:{name:"Google Gemini",keyUrl:"https://aistudio.google.com/apikey",keyPlaceholder:"AIza...",models:[{id:"gemini-3.1-pro-preview",name:"Gemini 3.1 Pro"},{id:"gemini-3-flash-preview",name:"Gemini 3 Flash"},{id:"gemini-2.5-pro",name:"Gemini 2.5 Pro"},{id:"gemini-2.5-flash",name:"Gemini 2.5 Flash"}]},xai:{name:"xAI (Grok)",keyUrl:"https://console.x.ai/team/default/api-keys",keyPlaceholder:"xai-...",models:[{id:"grok-4.20-0309-reasoning",name:"Grok 4.20 Reasoning"},{id:"grok-4-1-fast-non-reasoning",name:"Grok 4.1 Fast"}]},deepseek:{name:"DeepSeek",keyUrl:"https://platform.deepseek.com/api_keys",keyPlaceholder:"sk-...",models:[{id:"deepseek-chat",name:"DeepSeek V3.2"},{id:"deepseek-reasoner",name:"DeepSeek R1"}]},mistral:{name:"Mistral",keyUrl:"https://console.mistral.ai/api-keys",keyPlaceholder:"...",models:[{id:"mistral-large-3-25-12",name:"Mistral Large 3"},{id:"codestral-2508",name:"Codestral"},{id:"devstral-2-25-12",name:"Devstral 2"}]},groq:{name:"Groq",keyUrl:"https://console.groq.com/keys",keyPlaceholder:"gsk_...",models:[{id:"meta-llama/llama-4-scout-17b-16e-instruct",name:"Llama 4 Scout"},{id:"llama-3.3-70b-versatile",name:"Llama 3.3 70B"}]},minimax:{name:"MiniMax",keyUrl:"https://platform.minimax.chat/user-center/basic-information/interface-key",keyPlaceholder:"MiniMax key...",models:[{id:"MiniMax-M2.7",name:"MiniMax M2.7"},{id:"MiniMax-M2.5",name:"MiniMax M2.5"}]},moonshot:{name:"Kimi (Moonshot)",keyUrl:"https://platform.moonshot.cn/console/api-keys",keyPlaceholder:"Moonshot key...",models:[{id:"kimi-k2.5",name:"Kimi K2.5"},{id:"kimi-k2-thinking",name:"Kimi K2 Thinking"}]},qwen:{name:"Qwen (Alibaba)",keyUrl:"https://dashscope.console.aliyun.com/apiKey",keyPlaceholder:"DashScope key...",models:[{id:"qwen3.5-plus",name:"Qwen 3.5 Plus"},{id:"qwen-max",name:"Qwen Max"}]},zhipu:{name:"Zhipu AI (GLM)",keyUrl:"https://open.bigmodel.cn/usercenter/apikeys",keyPlaceholder:"Zhipu key...",models:[{id:"glm-5",name:"GLM-5"},{id:"glm-4.7",name:"GLM-4.7"}]},doubao:{name:"Doubao (ByteDance)",keyUrl:"https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey",keyPlaceholder:"Volcano key...",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"}]},ollama:{name:"Ollama (Local)",keyPlaceholder:"not required",local:!0,models:[]},openrouter:{name:"OpenRouter",keyUrl:"https://openrouter.ai/settings/keys",keyPlaceholder:"sk-or-...",models:[]}};function ee(e){let o=new TextEncoder().encode(e),n="";for(let a=0;a<o.length;a+=32768)n+=String.fromCharCode(...o.subarray(a,a+32768));return btoa(n)}function te(e){let o=atob(e),n=new Uint8Array(o.length);for(let a=0;a<o.length;a++)n[a]=o.charCodeAt(a);return new TextDecoder().decode(n)}var Me="0.18.0",t={connected:!1,panelOpen:!1,activePanel:"",selecting:!1,selectedElement:null,screenshot:null,messages:[],streaming:!1,streamContent:"",provider:"",model:"",hasApiKey:!1,configuredProviders:{},roots:[],updateAvailable:!1,latestVersion:"",saveStatus:"",networkCapture:!1,attachments:[]},v,h,$,Te,ae,k;function Ie(){try{sessionStorage.setItem("__om_state__",JSON.stringify({messages:t.messages,provider:t.provider,model:t.model,panelOpen:t.panelOpen,activePanel:t.activePanel}))}catch{}}function je(){try{let e=JSON.parse(sessionStorage.getItem("__om_state__")||"{}");e.messages?.length&&(t.messages=e.messages),e.provider&&(t.provider=e.provider),e.model&&(t.model=e.model),e.panelOpen&&(t.panelOpen=e.panelOpen,t.activePanel=e.activePanel||"")}catch{}}function Le(){if(document.querySelector("openmagic-toolbar"))return;je();let e=document.createElement("openmagic-toolbar");e.dataset.openmagic="true",v=e.attachShadow({mode:"closed"});let o=document.createElement("style");o.textContent=ie,v.appendChild(o);let n=document.createElement("div");v.appendChild(n),n.innerHTML=ze(),h=n.querySelector(".om-toolbar"),$=n.querySelector(".om-prompt-input"),Te=n.querySelector(".om-prompt-context"),ae=n.querySelector(".om-panel"),k=n.querySelector(".om-panel-body"),document.body.appendChild(e),Ue(n),tt();try{let i=JSON.parse(localStorage.getItem("__om_pos__")||"");i?.left&&i?.top&&(h.style.left=i.left,h.style.top=i.top,h.style.right="auto",h.style.bottom="auto")}catch{}ke(),Se(),ot();let s=document.querySelector("script[data-openmagic-token]")?.dataset.openmagicToken||window.__OPENMAGIC_TOKEN__,r=parseInt(window.location.port,10)||(window.location.protocol==="https:"?443:80);s&&V(r,s).then(()=>(t.connected=!0,oe(),M("config.get"))).then(i=>{let l=i.payload?.provider||"",c=i.payload?.model||"";t.provider=t.provider||l,t.model=t.model||c,t.configuredProviders=i.payload?.apiKeys||{},t.hasApiKey=t.configuredProviders[t.provider]||!1,t.roots=i.payload?.roots||[],t.panelOpen&&t.activePanel?C(t.activePanel):(!t.provider||!t.hasApiKey&&!Object.values(t.configuredProviders).some(Boolean))&&C("settings"),q()}).catch(()=>{t.connected=!1,oe()})}function ze(){return`
|
|
343
343
|
<div class="om-toolbar">
|
|
344
344
|
<div class="om-toolbar-header">
|
|
345
345
|
<span class="om-grab">${u.grip}</span>
|
|
@@ -359,7 +359,7 @@
|
|
|
359
359
|
<div class="om-panel om-hidden">
|
|
360
360
|
<div class="om-panel-header">
|
|
361
361
|
<span class="om-panel-title"></span>
|
|
362
|
-
<span class="om-panel-version">v${
|
|
362
|
+
<span class="om-panel-version">v${Me}</span>
|
|
363
363
|
<button class="om-panel-close" data-action="close-panel">${u.x}</button>
|
|
364
364
|
</div>
|
|
365
365
|
<div class="om-panel-body"></div>
|
|
@@ -372,7 +372,7 @@
|
|
|
372
372
|
<button class="om-prompt-send" data-action="prompt-send">${u.send}</button>
|
|
373
373
|
<input type="file" class="om-file-input om-hidden" accept="image/*" multiple />
|
|
374
374
|
</div>
|
|
375
|
-
</div>`}function
|
|
375
|
+
</div>`}function Ue(e){e.addEventListener("click",a=>{let s=a.target.closest("[data-action]");if(!s)return;a.preventDefault(),a.stopPropagation();let r=s.dataset.action;We(r,s)}),e.addEventListener("change",a=>{let s=a.target,r=s.dataset.field;r&&(r==="provider"?(t.provider=s.value,t.model=N[t.provider]?.models[0]?.id||"",t.hasApiKey=t.configuredProviders[t.provider]||N[t.provider]?.local||!1,t.saveStatus="",w()):r==="model"&&(t.model=s.value))}),$.addEventListener("keydown",a=>{a.key==="Enter"&&!a.shiftKey&&(a.preventDefault(),Ce())});let o=e.querySelector(".om-file-input");o&&o.addEventListener("change",()=>{Z(o.files),o.value=""});let n=e.querySelector(".om-prompt-row");n&&(n.addEventListener("dragover",a=>{a.preventDefault(),n.style.borderColor="rgba(108, 92, 231, 0.5)"}),n.addEventListener("dragleave",()=>{n.style.borderColor=""}),n.addEventListener("drop",a=>{a.preventDefault(),n.style.borderColor="";let s=a.dataTransfer;s?.files?.length&&Z(s.files)}),$.addEventListener("paste",a=>{let s=a.clipboardData?.items;if(s){for(let r=0;r<s.length;r++)if(s[r].type.startsWith("image/")){let i=s[r].getAsFile();if(i){let l=new DataTransfer;l.items.add(i),Z(l.files)}}}})),pe(a=>{a.type==="reconnected"&&(t.connected=!0,oe())})}function Fe(e){return t.roots.length>0?t.roots[0]+"/"+e:e}async function Ge(e){let o=e.dataset.file,n=e.dataset.search,a=e.dataset.replace;if(!o||!n||!a)return;let s,r;try{s=te(n),r=te(a)}catch{t.messages.push({role:"system",content:`Failed to decode diff data for ${o}`}),w();return}let i=e.closest(".om-diff-card"),l=Fe(o);if(i){let c=i.querySelector(".om-diff-actions");c&&(c.innerHTML='<span class="om-spinner"></span> Applying...')}try{let d=(await M("fs.read",{path:l}))?.payload?.content;if(!d)t.messages.push({role:"system",content:`Could not read ${o} \u2014 file may not exist at ${l}`});else{let p=d.split(s).length-1;if(p===0)t.messages.push({role:"system",content:`No matching code found in ${o}. The file may have changed since the suggestion was made.`});else if(p>1)t.messages.push({role:"system",content:`Found ${p} matches in ${o} \u2014 expected exactly 1. Edit not applied for safety.`});else{let H=await M("fs.write",{path:l,content:d.replace(s,r)});if(H?.payload?.ok===!1)t.messages.push({role:"system",content:`Write failed: ${o} - ${H.payload?.error||"unknown"}`});else{let S=i?.dataset.diffIdx;S!==void 0?t.messages[parseInt(S)]={role:"system",content:`Applied change to ${o}`}:t.messages.push({role:"system",content:`Applied change to ${o}`})}}}}catch(c){t.messages.push({role:"system",content:`Failed to apply: ${o} \u2014 ${c.message}`})}w(),O()}function Ke(e){let o=e.dataset.idx;if(o!==void 0){let n=parseInt(o),s=t.messages[n]?.content.split("__")?.[3]||"file";t.messages[n]={role:"system",content:`Rejected change to ${s}`}}w(),O()}function We(e,o){switch(e){case"select":Ze();break;case"screenshot":et();break;case"chat":Q("chat");break;case"settings":Q("settings");break;case"close-panel":$e();break;case"prompt-send":Ce();break;case"save-settings":Je();break;case"get-key":{let n=o.dataset.url;n&&window.open(n,"_blank","noopener");break}case"change-key":{let n=v.querySelector("[data-key-change]");n&&n.classList.remove("om-hidden"),o.style.display="none";break}case"network":Q("chat"),Ye();break;case"attach-image":Qe();break;case"remove-attachment":{let n=parseInt(o.dataset.idx||"0",10);t.attachments.splice(n,1),se();break}case"apply-diff":Ge(o);break;case"reject-diff":Ke(o);break;case"clear-element":t.selectedElement=null,B();break;case"clear-screenshot":t.screenshot=null,B();break}}function oe(){let e=v.querySelector(".om-status-dot");e&&(e.className=`om-status-dot ${t.connected?"connected":"disconnected"}`)}function q(){v.querySelectorAll(".om-pill-btn").forEach(e=>{let o=e.dataset.action;e.classList.toggle("active",o===t.activePanel||o==="select"&&t.selecting)})}function B(){let e=[];t.selectedElement&&e.push(`<span class="om-prompt-chip">${t.selectedElement.tagName}${t.selectedElement.id?"#"+t.selectedElement.id:""} <button class="om-prompt-chip-x" data-action="clear-element">${u.x}</button></span>`),t.screenshot&&e.push(`<span class="om-prompt-chip">Screenshot <button class="om-prompt-chip-x" data-action="clear-screenshot">${u.x}</button></span>`),t.attachments.length&&e.push(`<span class="om-prompt-chip">${t.attachments.length} image${t.attachments.length>1?"s":""}</span>`),Te.innerHTML=e.join("")}function C(e){t.panelOpen=!0,t.activePanel=e,ae.classList.remove("om-hidden");let o=v.querySelector(".om-panel-title");o&&(o.textContent=e==="settings"?"Settings":"Chat"),w(),q()}function $e(){t.panelOpen=!1,t.activePanel="",ae.classList.add("om-hidden"),q()}function Q(e){t.panelOpen&&t.activePanel===e?$e():C(e)}function w(){t.activePanel==="settings"?k.innerHTML=Ve():t.activePanel==="chat"&&(k.innerHTML=Xe(),O()),Ie()}function Ve(){let e=Object.entries(N).map(([b,P])=>{let g=t.configuredProviders[b]||P.local?" \u2713":"";return`<option value="${b}" ${t.provider===b?"selected":""}>${P.name}${g}</option>`}).join(""),o=N[t.provider],n=o?o.models.map(b=>`<option value="${b.id}" ${t.model===b.id?"selected":""}>${b.name}</option>`).join(""):'<option value="">Select provider first</option>',a=o?.local||!1,s=o?.keyUrl||"",r=o?.keyPlaceholder||"Enter API key...",i=t.configuredProviders[t.provider]||!1,l=t.updateAvailable?`<div class="om-update-banner">v${t.latestVersion} available <code class="om-update-cmd">npx openmagic@latest</code></div>`:"",c=i||a?`<div class="om-status om-status-success">${u.check} ${o?.name||"Provider"} connected</div>`:"",d=t.saveStatus==="saving"?'<span class="om-spinner"></span> Saving...':t.saveStatus==="saved"?`${u.check} Saved`:"Save",p=t.saveStatus==="saving"?"om-btn om-btn-saving":t.saveStatus==="saved"?"om-btn om-btn-saved":"om-btn",H=t.saveStatus==="saving"?"disabled":"",S="";return!a&&t.provider&&(i?S=`
|
|
376
376
|
<div class="om-field">
|
|
377
377
|
<label class="om-label">API Key</label>
|
|
378
378
|
<div class="om-key-configured">
|
|
@@ -385,7 +385,7 @@
|
|
|
385
385
|
${s?`<button class="om-btn-get-key" data-action="get-key" data-url="${s}">${u.externalLink} Get key</button>`:""}
|
|
386
386
|
</div>
|
|
387
387
|
</div>
|
|
388
|
-
</div>`:
|
|
388
|
+
</div>`:S=`
|
|
389
389
|
<div class="om-field">
|
|
390
390
|
<label class="om-label">API Key</label>
|
|
391
391
|
<div class="om-key-row">
|
|
@@ -404,23 +404,23 @@
|
|
|
404
404
|
<label class="om-label">Model</label>
|
|
405
405
|
<select class="om-select" data-field="model"><option value="">Select Model...</option>${n}</select>
|
|
406
406
|
</div>
|
|
407
|
-
${
|
|
408
|
-
<button class="${p}" data-action="save-settings" ${
|
|
407
|
+
${S}
|
|
408
|
+
<button class="${p}" data-action="save-settings" ${H}>${d}</button>
|
|
409
409
|
${c}
|
|
410
|
-
</div>`}function
|
|
411
|
-
<div class="om-diff-file">${
|
|
412
|
-
<div class="om-diff-removed">${
|
|
413
|
-
<div class="om-diff-added">${
|
|
410
|
+
</div>`}function Xe(){if(!t.provider||!t.hasApiKey&&!N[t.provider]?.local)return'<div class="om-status om-status-error">Configure your provider in Settings first</div>';let e=t.messages.map((a,s)=>{if(a.content.startsWith("__DIFF__"))try{let r=JSON.parse(te(a.content.slice(8))),i=ee(r.search),l=ee(r.replace);return`<div class="om-diff-card" data-diff-idx="${s}">
|
|
411
|
+
<div class="om-diff-file">${T(r.file)}</div>
|
|
412
|
+
<div class="om-diff-removed">${T(r.search.slice(0,200))}</div>
|
|
413
|
+
<div class="om-diff-added">${T(r.replace.slice(0,200))}</div>
|
|
414
414
|
<div class="om-diff-actions">
|
|
415
|
-
<button class="om-btn om-btn-sm" data-action="apply-diff" data-file="${
|
|
415
|
+
<button class="om-btn om-btn-sm" data-action="apply-diff" data-file="${T(r.file)}" data-search="${i}" data-replace="${l}">Apply</button>
|
|
416
416
|
<button class="om-btn-secondary om-btn-sm" data-action="reject-diff" data-idx="${s}">Reject</button>
|
|
417
417
|
</div>
|
|
418
|
-
</div>`}catch{return'<div class="om-msg om-msg-system">Malformed diff data</div>'}return`<div class="om-msg om-msg-${a.role}">${
|
|
418
|
+
</div>`}catch{return'<div class="om-msg om-msg-system">Malformed diff data</div>'}return`<div class="om-msg om-msg-${a.role}">${T(a.content)}</div>`}).join(""),o=t.streaming?`<div class="om-msg om-msg-assistant"><span class="om-spinner"></span>${T(t.streamContent)}</div>`:"";return`<div class="om-chat-messages">${!t.messages.length&&!t.streaming?'<div class="om-chat-empty">Select an element or type below to start</div>':""}${e}${o}</div>`}function O(){requestAnimationFrame(()=>{let e=k.querySelector(".om-chat-messages");e&&(e.scrollTop=e.scrollHeight)})}async function Je(){let o=k.querySelector('[data-field="apiKey"]')?.value||"";if(!t.provider){t.saveStatus="error",z(),setTimeout(()=>{t.saveStatus="",w()},2e3);return}if(!me()){t.saveStatus="error",z();let a=k.querySelector('[data-action="save-settings"]');a&&(a.innerHTML="Not connected - check terminal"),setTimeout(()=>{t.saveStatus="",w()},3e3);return}let n={provider:t.provider,model:t.model};o&&(n.apiKey=o),t.saveStatus="saving",z();try{let a=await Promise.race([M("config.set",n),new Promise((s,r)=>setTimeout(()=>r(new Error("Save timed out")),8e3))]);o&&t.provider&&(t.configuredProviders[t.provider]=!0),t.hasApiKey=!!(o||t.configuredProviders[t.provider]),t.saveStatus="saved",z(),setTimeout(()=>{t.saveStatus="",t.activePanel==="settings"&&C("chat")},1200)}catch(a){t.saveStatus="error";let s=k.querySelector('[data-action="save-settings"]'),r=(a?.message||"").includes("timeout")?"Connection timeout - is the CLI running?":(a?.message||"").includes("connected")?"Not connected to OpenMagic server":`Save failed: ${a?.message||"Unknown error"}`;s&&(s.innerHTML=r,s.className="om-btn",s.disabled=!1),setTimeout(()=>{t.saveStatus="",w()},4e3)}}function z(){let e=k.querySelector('[data-action="save-settings"]');e&&(t.saveStatus==="saving"?(e.innerHTML='<span class="om-spinner"></span> Saving...',e.className="om-btn om-btn-saving",e.disabled=!0):t.saveStatus==="saved"?(e.innerHTML=`${u.check} Saved`,e.className="om-btn om-btn-saved",e.disabled=!1):t.saveStatus==="error"?(e.innerHTML="Save failed - try again",e.className="om-btn",e.disabled=!1):(e.innerHTML="Save",e.className="om-btn",e.disabled=!1))}async function Ce(){let e=$.value.trim();if(!e||t.streaming)return;if(!t.provider||!t.hasApiKey&&!N[t.provider]?.local){C("settings");return}t.messages.push({role:"user",content:e}),t.streaming=!0,t.streamContent="",$.value="",C("chat");let o=Ee(t.selectedElement,t.screenshot);o.pageUrl=window.location.href,o.pageTitle=document.title,t.attachments.length>0&&(o.screenshot||(o.screenshot=t.attachments[0]),o.attachments=[...t.attachments]);let n=5,a=32e3,s=/\.(?:[cm]?[jt]sx?|svelte|vue|astro|html?|css|scss|less|php|py)$/i;try{let r=await M("fs.list",{});r?.payload?.projectTree&&(o.projectTree=r.payload.projectTree);let l=(r?.payload?.files||[]).filter(m=>m.type==="file"&&s.test(m.path)),c=[e];if(t.selectedElement&&(t.selectedElement.id&&c.push(t.selectedElement.id),t.selectedElement.className&&c.push(t.selectedElement.className),t.selectedElement.textContent&&c.push(t.selectedElement.textContent.slice(0,100)),t.selectedElement.componentHint&&c.push(t.selectedElement.componentHint),t.selectedElement.ancestry))for(let m of t.selectedElement.ancestry)c.push(m);let d=c.filter(Boolean).join(" ").toLowerCase().split(/[^a-z0-9_-]+/).filter(m=>m.length>=2&&!["the","to","in","of","and","div","span","class","style"].includes(m)),H=window.location.pathname.split("/").filter(m=>m.length>1&&!/^\d+$/.test(m)),S=l.map(m=>{let g=0,L=m.path.toLowerCase();for(let E of H)L.includes(E.toLowerCase())&&(g+=15);if(t.selectedElement?.componentHint){let E=t.selectedElement.componentHint.toLowerCase();L.includes(E)&&(g+=12)}for(let E of d)L.includes(E)&&(g+=5);return/(component|page|route|layout|template|view)/.test(L)&&(g+=3),/page\.[jt]sx?$|layout\.[jt]sx?$|\+page\.svelte$/.test(L)&&(g+=5),{...m,score:g}}).sort((m,g)=>g.score-m.score),b=[],P=0;for(let m of S.slice(0,n)){if(m.score<=0||P>=a)break;try{let g=t.roots[0]||"",L=await M("fs.read",{path:g?`${g}/${m.path}`:m.path}),E=String(L?.payload?.content||"");if(!E)continue;let re=E.slice(0,Math.min(8e3,a-P));b.push({path:m.path,content:re}),P+=re.length}catch{}}b.length&&(o.files=b)}catch{}try{let r=await de("llm.chat",{provider:t.provider,model:t.model,messages:t.messages.map(i=>({role:i.role,content:i.content})),context:o},i=>{t.streamContent+=i;let l=k.querySelector(".om-msg-assistant:last-child");l&&(l.innerHTML=`<span class="om-spinner"></span>${T(t.streamContent)}`,O())});if(t.messages.push({role:"assistant",content:t.streamContent||r?.content||""}),r?.modifications?.length){for(let i of r.modifications)if(i.type==="edit"&&i.file&&i.search&&i.replace){let l=Math.random().toString(36).slice(2),c=JSON.stringify({id:l,file:i.file,search:i.search,replace:i.replace});t.messages.push({role:"system",content:`__DIFF__${ee(c)}`})}}}catch(r){t.messages.push({role:"system",content:`Error: ${r.message}`})}t.streaming=!1,t.streamContent="",t.attachments=[],se(),w(),O()}function Ye(){let e=window.performance,o=e.getEntriesByType("navigation")[0],n=e.getEntriesByType("paint"),a=e.getEntriesByType("resource").slice(-20),s=J(),r=Y(),i=[];i.push("--- Network & Performance Capture ---"),o&&(i.push(`Page load: ${Math.round(o.loadEventEnd-o.startTime)}ms`),i.push(`DOM ready: ${Math.round(o.domContentLoadedEventEnd-o.startTime)}ms`),i.push(`TTFB: ${Math.round(o.responseStart-o.startTime)}ms`));let l=n.find(c=>c.name==="first-contentful-paint");if(l&&i.push(`FCP: ${Math.round(l.startTime)}ms`),s.length){i.push(`
|
|
419
419
|
Recent requests (${s.length}):`);for(let c of s.slice(-15))i.push(` ${c.method} ${c.url.slice(0,80)} \u2192 ${c.status||"pending"} (${c.duration||"?"}ms)`)}if(r.length){let c=r.filter(p=>p.level==="error"),d=r.filter(p=>p.level==="warn");c.length&&i.push(`
|
|
420
420
|
Console errors: ${c.length}`),d.length&&i.push(`Console warnings: ${d.length}`)}if(a.length){let c=[...a].sort((d,p)=>p.duration-d.duration).slice(0,5);i.push(`
|
|
421
421
|
Slowest resources:`);for(let d of c)i.push(` ${Math.round(d.duration)}ms \u2014 ${d.name.split("/").pop()?.slice(0,50)}`)}t.messages.push({role:"system",content:i.join(`
|
|
422
|
-
`)}),
|
|
422
|
+
`)}),w(),O(),B()}function Qe(){let e=v.querySelector(".om-file-input");e&&e.click()}function Z(e){if(e)for(let o=0;o<e.length&&t.attachments.length<5;o++){let n=e[o];if(!n.type.startsWith("image/")||n.size>10*1024*1024)continue;let a=new FileReader;a.onload=()=>{typeof a.result=="string"&&(t.attachments.push(a.result),se())},a.readAsDataURL(n)}}function se(){let e=v.querySelector(".om-prompt-attachments");if(e){if(!t.attachments.length){e.innerHTML="",e.classList.add("om-hidden");return}e.classList.remove("om-hidden"),e.innerHTML=t.attachments.map((o,n)=>`<div class="om-attachment-thumb">
|
|
423
423
|
<img src="${o}" alt="attachment" />
|
|
424
424
|
<button class="om-attachment-remove" data-action="remove-attachment" data-idx="${n}">${u.x}</button>
|
|
425
|
-
</div>`).join("")}}var
|
|
425
|
+
</div>`).join("")}}var R=null,D=null;function Ze(){t.selecting?ne():U()}function U(){t.selecting=!0,document.body.style.cursor="crosshair",q(),D=o=>{let n=o.target;if(n.closest("openmagic-toolbar")||n.dataset?.openmagic)return;let a=n.getBoundingClientRect();ge({x:a.x,y:a.y,width:a.width,height:a.height})},R=o=>{o.preventDefault(),o.stopPropagation();let n=o.target;n.closest("openmagic-toolbar")||n.dataset?.openmagic||(t.selectedElement=ue(n),ne(),B(),$.focus())};let e=o=>{o.key==="Escape"&&ne()};document.addEventListener("mousemove",D,!0),document.addEventListener("click",R,!0),document.addEventListener("keydown",e,!0),U._escHandler=e}function ne(){t.selecting=!1,document.body.style.cursor="",he(),D&&(document.removeEventListener("mousemove",D,!0),D=null),R&&(document.removeEventListener("click",R,!0),R=null);let e=U._escHandler;e&&(document.removeEventListener("keydown",e,!0),U._escHandler=null),q()}async function et(){let e;try{let n=t.selectedElement?.cssSelector?.trim();n&&(e=document.querySelector(n)||void 0)}catch{}let o=await fe(e||void 0);o&&(t.screenshot=o,B(),$.focus())}function tt(){let e=!1,o=0,n=0,a=0,s=0;h.addEventListener("mousedown",r=>{let i=r.target;if(i.closest("[data-action]")||!i.closest(".om-grab")&&!i.closest(".om-pill-brand"))return;e=!0,o=r.clientX,n=r.clientY;let l=h.getBoundingClientRect();a=l.left,s=l.top,r.preventDefault()}),document.addEventListener("mousemove",r=>{e&&(h.style.left=a+r.clientX-o+"px",h.style.top=s+r.clientY-n+"px",h.style.right="auto",h.style.bottom="auto")}),document.addEventListener("mouseup",()=>{if(e){e=!1;try{localStorage.setItem("__om_pos__",JSON.stringify({left:h.style.left,top:h.style.top}))}catch{}}})}function T(e){let o=document.createElement("div");return o.textContent=e,o.innerHTML}function ot(){fetch("https://registry.npmjs.org/openmagic/latest",{headers:{Accept:"application/json"},signal:AbortSignal.timeout(5e3)}).then(e=>e.ok?e.json():null).then(e=>{if(!e?.version)return;let o=e.version.split(".").map(Number),n=Me.split(".").map(Number);for(let a=0;a<3;a++){if((o[a]||0)>(n[a]||0)){t.updateAvailable=!0,t.latestVersion=e.version,nt();return}if((o[a]||0)<(n[a]||0))return}}).catch(()=>{})}function nt(){if(v.querySelector(".om-update-dot"))return;let o=document.createElement("span");o.className="om-update-dot",o.title=`v${t.latestVersion} available`,o.addEventListener("click",()=>C("settings"));let n=v.querySelector(".om-toolbar-header");n&&n.appendChild(o)}typeof window<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",Le):Le());})();
|
|
426
426
|
//# sourceMappingURL=index.global.js.map
|