visual-remote 0.1.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/README.md +277 -0
- package/apps/cli/dist/index.js +5280 -0
- package/package.json +61 -0
- package/packages/overlay/dist/client.js +775 -0
- package/packages/overlay/dist/viewer.js +1086 -0
|
@@ -0,0 +1,775 @@
|
|
|
1
|
+
var Fe,C,Pt,Kn,oe,Tt,Lt,It,Ye,Re,ve,At,Je,Ge,Xe,Wn,Ie={},Ae=[],Vn=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,Me=Array.isArray;function ee(e,t){for(var n in t)e[n]=t[n];return e}function Qe(e){e&&e.parentNode&&e.parentNode.removeChild(e)}function Yn(e,t,n){var o,r,i,s={};for(i in t)i=="key"?o=t[i]:i=="ref"?r=t[i]:s[i]=t[i];if(arguments.length>2&&(s.children=arguments.length>3?Fe.call(arguments,2):n),typeof e=="function"&&e.defaultProps!=null)for(i in e.defaultProps)s[i]===void 0&&(s[i]=e.defaultProps[i]);return Pe(e,s,o,r,null)}function Pe(e,t,n,o,r){var i={type:e,props:t,key:n,ref:o,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:r??++Pt,__i:-1,__u:0};return r==null&&C.vnode!=null&&C.vnode(i),i}function te(e){return e.children}function Le(e,t){this.props=e,this.context=t}function ue(e,t){if(t==null)return e.__?ue(e.__,e.__i+1):null;for(var n;t<e.__k.length;t++)if((n=e.__k[t])!=null&&n.__e!=null)return n.__e;return typeof e.type=="function"?ue(e):null}function Gn(e){if(e.__P&&e.__d){var t=e.__v,n=t.__e,o=[],r=[],i=ee({},t);i.__v=t.__v+1,C.vnode&&C.vnode(i),Ze(e.__P,i,t,e.__n,e.__P.namespaceURI,32&t.__u?[n]:null,o,n??ue(t),!!(32&t.__u),r),i.__v=t.__v,i.__.__k[i.__i]=i,Ht(o,i,r),t.__e=t.__=null,i.__e!=n&&qt(i)}}function qt(e){if((e=e.__)!=null&&e.__c!=null)return e.__e=e.__c.base=null,e.__k.some(function(t){if(t!=null&&t.__e!=null)return e.__e=e.__c.base=t.__e}),qt(e)}function Et(e){(!e.__d&&(e.__d=!0)&&oe.push(e)&&!qe.__r++||Tt!=C.debounceRendering)&&((Tt=C.debounceRendering)||Lt)(qe)}function qe(){try{for(var e,t=1;oe.length;)oe.length>t&&oe.sort(It),e=oe.shift(),t=oe.length,Gn(e)}finally{oe.length=qe.__r=0}}function Ft(e,t,n,o,r,i,s,l,f,c,m){var h,a,g,k,x,E,b,w=o&&o.__k||Ae,P=t.length;for(f=Xn(n,t,w,f,P),h=0;h<P;h++)(g=n.__k[h])!=null&&(a=g.__i!=-1&&w[g.__i]||Ie,g.__i=h,E=Ze(e,g,a,r,i,s,l,f,c,m),k=g.__e,g.ref&&a.ref!=g.ref&&(a.ref&&et(a.ref,null,g),m.push(g.ref,g.__c||k,g)),x==null&&k!=null&&(x=k),(b=!!(4&g.__u))||a.__k===g.__k?(f=Mt(g,f,e,b),b&&a.__e&&(a.__e=null)):typeof g.type=="function"&&E!==void 0?f=E:k&&(f=k.nextSibling),g.__u&=-7);return n.__e=x,f}function Xn(e,t,n,o,r){var i,s,l,f,c,m=n.length,h=m,a=0;for(e.__k=new Array(r),i=0;i<r;i++)(s=t[i])!=null&&typeof s!="boolean"&&typeof s!="function"?(typeof s=="string"||typeof s=="number"||typeof s=="bigint"||s.constructor==String?s=e.__k[i]=Pe(null,s,null,null,null):Me(s)?s=e.__k[i]=Pe(te,{children:s},null,null,null):s.constructor===void 0&&s.__b>0?s=e.__k[i]=Pe(s.type,s.props,s.key,s.ref?s.ref:null,s.__v):e.__k[i]=s,f=i+a,s.__=e,s.__b=e.__b+1,l=null,(c=s.__i=Jn(s,n,f,h))!=-1&&(h--,(l=n[c])&&(l.__u|=2)),l==null||l.__v==null?(c==-1&&(r>m?a--:r<m&&a++),typeof s.type!="function"&&(s.__u|=4)):c!=f&&(c==f-1?a--:c==f+1?a++:(c>f?a--:a++,s.__u|=4))):e.__k[i]=null;if(h)for(i=0;i<m;i++)(l=n[i])!=null&&(2&l.__u)==0&&(l.__e==o&&(o=ue(l)),Bt(l,l));return o}function Mt(e,t,n,o){var r,i;if(typeof e.type=="function"){for(r=e.__k,i=0;r&&i<r.length;i++)r[i]&&(r[i].__=e,t=Mt(r[i],t,n,o));return t}e.__e!=t&&(o&&(t&&e.type&&!t.parentNode&&(t=ue(e)),n.insertBefore(e.__e,t||null)),t=e.__e);do t=t&&t.nextSibling;while(t!=null&&t.nodeType==8);return t}function Jn(e,t,n,o){var r,i,s,l=e.key,f=e.type,c=t[n],m=c!=null&&(2&c.__u)==0;if(c===null&&l==null||m&&l==c.key&&f==c.type)return n;if(o>(m?1:0)){for(r=n-1,i=n+1;r>=0||i<t.length;)if((c=t[s=r>=0?r--:i++])!=null&&(2&c.__u)==0&&l==c.key&&f==c.type)return s}return-1}function Ct(e,t,n){t[0]=="-"?e.setProperty(t,n??""):e[t]=n==null?"":typeof n!="number"||Vn.test(t)?n:n+"px"}function Ce(e,t,n,o,r){var i,s;e:if(t=="style")if(typeof n=="string")e.style.cssText=n;else{if(typeof o=="string"&&(e.style.cssText=o=""),o)for(t in o)n&&t in n||Ct(e.style,t,"");if(n)for(t in n)o&&n[t]==o[t]||Ct(e.style,t,n[t])}else if(t[0]=="o"&&t[1]=="n")i=t!=(t=t.replace(At,"$1")),s=t.toLowerCase(),t=s in e||t=="onFocusOut"||t=="onFocusIn"?s.slice(2):t.slice(2),e.l||(e.l={}),e.l[t+i]=n,n?o?n[ve]=o[ve]:(n[ve]=Je,e.addEventListener(t,i?Xe:Ge,i)):e.removeEventListener(t,i?Xe:Ge,i);else{if(r=="http://www.w3.org/2000/svg")t=t.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(t!="width"&&t!="height"&&t!="href"&&t!="list"&&t!="form"&&t!="tabIndex"&&t!="download"&&t!="rowSpan"&&t!="colSpan"&&t!="role"&&t!="popover"&&t in e)try{e[t]=n??"";break e}catch{}typeof n=="function"||(n==null||n===!1&&t[4]!="-"?e.removeAttribute(t):e.setAttribute(t,t=="popover"&&n==1?"":n))}}function Rt(e){return function(t){if(this.l){var n=this.l[t.type+e];if(t[Re]==null)t[Re]=Je++;else if(t[Re]<n[ve])return;return n(C.event?C.event(t):t)}}}function Ze(e,t,n,o,r,i,s,l,f,c){var m,h,a,g,k,x,E,b,w,P,U,z,Y,j,L,A,B=t.type;if(t.constructor!==void 0)return null;128&n.__u&&(f=!!(32&n.__u),i=[l=t.__e=n.__e]),(m=C.__b)&&m(t);e:if(typeof B=="function"){h=s.length;try{if(w=t.props,P=B.prototype&&B.prototype.render,U=(m=B.contextType)&&o[m.__c],z=m?U?U.props.value:m.__:o,n.__c?b=(a=t.__c=n.__c).__=a.__E:(P?t.__c=a=new B(w,z):(t.__c=a=new Le(w,z),a.constructor=B,a.render=Zn),U&&U.sub(a),a.state||(a.state={}),a.__n=o,g=a.__d=!0,a.__h=[],a._sb=[]),P&&a.__s==null&&(a.__s=a.state),P&&B.getDerivedStateFromProps!=null&&(a.__s==a.state&&(a.__s=ee({},a.__s)),ee(a.__s,B.getDerivedStateFromProps(w,a.__s))),k=a.props,x=a.state,a.__v=t,g)P&&B.getDerivedStateFromProps==null&&a.componentWillMount!=null&&a.componentWillMount(),P&&a.componentDidMount!=null&&a.__h.push(a.componentDidMount);else{if(P&&B.getDerivedStateFromProps==null&&w!==k&&a.componentWillReceiveProps!=null&&a.componentWillReceiveProps(w,z),t.__v==n.__v||!a.__e&&a.shouldComponentUpdate!=null&&a.shouldComponentUpdate(w,a.__s,z)===!1){t.__v!=n.__v&&(a.props=w,a.state=a.__s,a.__d=!1),t.__e=n.__e,t.__k=n.__k,t.__k.some(function(J){J&&(J.__=t)}),Ae.push.apply(a.__h,a._sb),a._sb=[],a.__h.length&&s.push(a);break e}a.componentWillUpdate!=null&&a.componentWillUpdate(w,a.__s,z),P&&a.componentDidUpdate!=null&&a.__h.push(function(){a.componentDidUpdate(k,x,E)})}if(a.context=z,a.props=w,a.__P=e,a.__e=!1,Y=C.__r,j=0,P)a.state=a.__s,a.__d=!1,Y&&Y(t),m=a.render(a.props,a.state,a.context),Ae.push.apply(a.__h,a._sb),a._sb=[];else do a.__d=!1,Y&&Y(t),m=a.render(a.props,a.state,a.context),a.state=a.__s;while(a.__d&&++j<25);a.state=a.__s,a.getChildContext!=null&&(o=ee(ee({},o),a.getChildContext())),P&&!g&&a.getSnapshotBeforeUpdate!=null&&(E=a.getSnapshotBeforeUpdate(k,x)),L=m!=null&&m.type===te&&m.key==null?$t(m.props.children):m,l=Ft(e,Me(L)?L:[L],t,n,o,r,i,s,l,f,c),a.base=t.__e,t.__u&=-161,a.__h.length&&s.push(a),b&&(a.__E=a.__=null)}catch(J){if(s.length=h,t.__v=null,f||i!=null){if(J.then){for(t.__u|=f?160:128;l&&l.nodeType==8&&l.nextSibling;)l=l.nextSibling;i!=null&&(i[i.indexOf(l)]=null),t.__e=l}else if(i!=null)for(A=i.length;A--;)Qe(i[A])}else t.__e=n.__e;t.__k==null&&(t.__k=n.__k||[]),J.then||Nt(t),C.__e(J,t,n)}}else i==null&&t.__v==n.__v?(t.__k=n.__k,t.__e=n.__e):l=t.__e=Qn(n.__e,t,n,o,r,i,s,f,c);return(m=C.diffed)&&m(t),128&t.__u?void 0:l}function Nt(e){e&&(e.__c&&(e.__c.__e=!0),e.__k&&e.__k.some(Nt))}function Ht(e,t,n){for(var o=0;o<n.length;o++)et(n[o],n[++o],n[++o]);C.__c&&C.__c(t,e),e.some(function(r){try{e=r.__h,r.__h=[],e.some(function(i){i.call(r)})}catch(i){C.__e(i,r.__v)}})}function $t(e){return typeof e!="object"||e==null||e.__b>0?e:Me(e)?e.map($t):e.constructor!==void 0?null:ee({},e)}function Qn(e,t,n,o,r,i,s,l,f){var c,m,h,a,g,k,x,E=n.props||Ie,b=t.props,w=t.type;if(w=="svg"?r="http://www.w3.org/2000/svg":w=="math"?r="http://www.w3.org/1998/Math/MathML":r||(r="http://www.w3.org/1999/xhtml"),i!=null){for(c=0;c<i.length;c++)if((g=i[c])&&"setAttribute"in g==!!w&&(w?g.localName==w:g.nodeType==3)){e=g,i[c]=null;break}}if(e==null){if(w==null)return document.createTextNode(b);e=document.createElementNS(r,w,b.is&&b),l&&(C.__m&&C.__m(t,i),l=!1),i=null}if(w==null)E===b||l&&e.data==b||(e.data=b);else{if(i=w=="textarea"&&b.defaultValue!=null?null:i&&Fe.call(e.childNodes),!l&&i!=null)for(E={},c=0;c<e.attributes.length;c++)E[(g=e.attributes[c]).name]=g.value;for(c in E)g=E[c],c=="dangerouslySetInnerHTML"?h=g:c=="children"||c in b||c=="value"&&"defaultValue"in b||c=="checked"&&"defaultChecked"in b||Ce(e,c,null,g,r);for(c in b)g=b[c],c=="children"?a=g:c=="dangerouslySetInnerHTML"?m=g:c=="value"?k=g:c=="checked"?x=g:l&&typeof g!="function"||E[c]===g||Ce(e,c,g,E[c],r);if(m)l||h&&(m.__html==h.__html||m.__html==e.innerHTML)||(e.innerHTML=m.__html),t.__k=[];else if(h&&(e.innerHTML=""),Ft(t.type=="template"?e.content:e,Me(a)?a:[a],t,n,o,w=="foreignObject"?"http://www.w3.org/1999/xhtml":r,i,s,i?i[0]:n.__k&&ue(n,0),l,f),i!=null)for(c=i.length;c--;)Qe(i[c]);l&&w!="textarea"||(c="value",w=="progress"&&k==null?e.removeAttribute("value"):k!=null&&(k!==e[c]||w=="progress"&&!k||w=="option"&&k!=E[c])&&Ce(e,c,k,E[c],r),c="checked",x!=null&&x!=e[c]&&Ce(e,c,x,E[c],r))}return e}function et(e,t,n){try{if(typeof e=="function"){var o=typeof e.__u=="function";o&&e.__u(),o&&t==null||(e.__u=e(t))}else e.current=t}catch(r){C.__e(r,n)}}function Bt(e,t,n){var o,r;if(C.unmount&&C.unmount(e),(o=e.ref)&&(o.current&&o.current!=e.__e||et(o,null,t)),(o=e.__c)!=null){if(o.componentWillUnmount)try{o.componentWillUnmount()}catch(i){C.__e(i,t)}o.base=o.__P=o.__n=null}if(o=e.__k)for(r=0;r<o.length;r++)o[r]&&Bt(o[r],t,n||typeof e.type!="function");n||Qe(e.__e),e.__c=e.__=e.__e=void 0}function Zn(e,t,n){return this.constructor(e,n)}function Ut(e,t,n){var o,r,i,s;t==document&&(t=document.documentElement),C.__&&C.__(e,t),r=(o=typeof n=="function")?null:n&&n.__k||t.__k,i=[],s=[],Ze(t,e=(!o&&n||t).__k=Yn(te,null,[e]),r||Ie,Ie,t.namespaceURI,!o&&n?[n]:r?null:t.firstChild?Fe.call(t.childNodes):null,i,!o&&n?n:r?r.__e:t.firstChild,o,s),Ht(i,e,s),e.props.children=null}Fe=Ae.slice,C={__e:function(e,t,n,o){for(var r,i,s;t=t.__;)if((r=t.__c)&&!r.__)try{if((i=r.constructor)&&i.getDerivedStateFromError!=null&&(r.setState(i.getDerivedStateFromError(e)),s=r.__d),r.componentDidCatch!=null&&(r.componentDidCatch(e,o||{}),s=r.__d),s)return r.__E=r}catch(l){e=l}throw e}},Pt=0,Kn=function(e){return e!=null&&e.constructor===void 0},Le.prototype.setState=function(e,t){var n;n=this.__s!=null&&this.__s!=this.state?this.__s:this.__s=ee({},this.state),typeof e=="function"&&(e=e(ee({},n),this.props)),e&&ee(n,e),e!=null&&this.__v&&(t&&this._sb.push(t),Et(this))},Le.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),Et(this))},Le.prototype.render=te,oe=[],Lt=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,It=function(e,t){return e.__v.__b-t.__v.__b},qe.__r=0,Ye=Math.random().toString(8),Re="__d"+Ye,ve="__a"+Ye,At=/(PointerCapture)$|Capture$/i,Je=0,Ge=Rt(!1),Xe=Rt(!0),Wn=0;var de,q,tt,jt,ye=0,Gt=[],M=C,Ot=M.__b,Dt=M.__r,zt=M.diffed,Kt=M.__c,Wt=M.unmount,Vt=M.__;function He(e,t){M.__h&&M.__h(q,e,ye||t),ye=0;var n=q.__H||(q.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function N(e){return ye=1,eo(Jt,e)}function eo(e,t,n){var o=He(de++,2);if(o.t=e,!o.__c&&(o.__=[n?n(t):Jt(void 0,t),function(l){var f=o.__N?o.__N[0]:o.__[0],c=o.t(f,l);f!==c&&(o.__N=[c,o.__[1]],o.__c.setState({}))}],o.__c=q,!q.__f)){var r=function(l,f,c){if(!o.__c.__H)return!0;var m=!1,h=o.__c.props!==l;if(o.__c.__H.__.some(function(g){if(g.__N){m=!0;var k=g.__[0];g.__=g.__N,g.__N=void 0,k!==g.__[0]&&(h=!0)}}),i){var a=i.call(this,l,f,c);return m?a||h:a}return!m||h};q.__f=!0;var i=q.shouldComponentUpdate,s=q.componentWillUpdate;q.componentWillUpdate=function(l,f,c){if(this.__e){var m=i;i=void 0,r(l,f,c),i=m}s&&s.call(this,l,f,c)},q.shouldComponentUpdate=r}return o.__N||o.__}function W(e,t){var n=He(de++,3);!M.__s&&ot(n.__H,t)&&(n.__=e,n.u=t,q.__H.__h.push(n))}function Xt(e,t){var n=He(de++,4);!M.__s&&ot(n.__H,t)&&(n.__=e,n.u=t,q.__h.push(n))}function V(e){return ye=5,se(function(){return{current:e}},[])}function se(e,t){var n=He(de++,7);return ot(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function Q(e,t){return ye=8,se(function(){return e},t)}function to(){for(var e;e=Gt.shift();){var t=e.__H;if(e.__P&&t)try{t.__h.some(Ne),t.__h.some(nt),t.__h=[]}catch(n){t.__h=[],M.__e(n,e.__v)}}}M.__b=function(e){q=null,Ot&&Ot(e)},M.__=function(e,t){e&&t.__k&&t.__k.__m&&(e.__m=t.__k.__m),Vt&&Vt(e,t)},M.__r=function(e){Dt&&Dt(e),de=0;var t=(q=e.__c).__H;t&&(tt===q?(t.__h=[],q.__h=[],t.__.some(function(n){n.__N&&(n.__=n.__N),n.u=n.__N=void 0})):(t.__h.some(Ne),t.__h.some(nt),t.__h=[],de=0)),tt=q},M.diffed=function(e){zt&&zt(e);var t=e.__c;t&&t.__H&&(t.__H.__h.length&&(Gt.push(t)!==1&&jt===M.requestAnimationFrame||((jt=M.requestAnimationFrame)||no)(to)),t.__H.__.some(function(n){n.u&&(n.__H=n.u,n.u=void 0)})),tt=q=null},M.__c=function(e,t){t.some(function(n){try{n.__h.some(Ne),n.__h=n.__h.filter(function(o){return!o.__||nt(o)})}catch(o){t.some(function(r){r.__h&&(r.__h=[])}),t=[],M.__e(o,n.__v)}}),Kt&&Kt(e,t)},M.unmount=function(e){Wt&&Wt(e);var t,n=e.__c;n&&n.__H&&(n.__H.__.some(function(o){try{Ne(o)}catch(r){t=r}}),n.__H=void 0,t&&M.__e(t,n.__v))};var Yt=typeof requestAnimationFrame=="function";function no(e){var t,n=function(){clearTimeout(o),Yt&&cancelAnimationFrame(t),setTimeout(e)},o=setTimeout(n,35);Yt&&(t=requestAnimationFrame(n))}function Ne(e){var t=q,n=e.__c;typeof n=="function"&&(e.__c=void 0,n()),q=t}function nt(e){var t=q;e.__c=e.__(),q=t}function ot(e,t){return!e||e.length!==t.length||t.some(function(n,o){return n!==e[o]})}function Jt(e,t){return typeof t=="function"?t(e):t}function Qt(e,t,n){return n<t?t:Math.min(Math.max(e,t),n)}function rt(e,t){let n=Math.min(e.x,t.x),o=Math.min(e.y,t.y);return{x:n,y:o,width:Math.abs(t.x-e.x),height:Math.abs(t.y-e.y)}}function oo(e,t){let n=Math.max(0,Math.min(e.x+e.width,t.x+t.width)-Math.max(e.x,t.x)),o=Math.max(0,Math.min(e.y+e.height,t.y+t.height)-Math.max(e.y,t.y));return n*o}function it(e,t){let n=e.width*e.height;return n>0?oo(e,t)/n:0}function Zt(e,t,n,o=12,r=10,i=o){let s=Math.max(o,i),l=n.height-(e.y+e.height)-o,f=e.y-s,c=n.width-(e.x+e.width)-o,m=e.x-o,h;l>=t.height+r?h="below":f>=t.height+r?h="above":c>=t.width+r?h="right":m>=t.width+r?h="left":h=l>=f?"below":"above";let a=h==="right"?e.x+e.width+r:h==="left"?e.x-t.width-r:e.x,g=h==="below"?e.y+e.height+r:h==="above"?e.y-t.height-r:e.y;return{left:Qt(a,o,n.width-t.width-o),top:Qt(g,s,n.height-t.height-o),placement:h}}function ro(e,t){let n=e.startsWith("#")?e.slice(1):e;if(!n.includes(`${t}=`))return{token:null,remainingHash:e};let o=new URLSearchParams(n),r=o.get(t);o.delete(t);let i=o.toString();return{token:r?.trim()||null,remainingHash:i?`#${i}`:""}}function $e(e){return ro(e,"visual-pair")}function st(e,t){return e.key==="Enter"&&!e.shiftKey&&!e.isComposing&&!t}function I(e,t){let n=e.replace(/\s+/g," ").trim();return n.length<=t?n:`${n.slice(0,Math.max(0,t-1)).trimEnd()}\u2026`}var io="visual-bridge:pairing-token";var en="visual-bridge:browser-session",on="visual-bridge:last-sequence",so="visual-bridge:viewer-last-sequence",ao=new Set(["queued","preparing","snapshotting_before","resolving_context","running_agent","snapshotting_after","diffing","waiting_hmr","verifying","review","accepted","reverted","failed","canceled","unsafe"]);function rn(e){try{return sessionStorage.getItem(e)}catch{return null}}function sn(e,t){try{sessionStorage.setItem(e,t)}catch{}}function tn(e){try{sessionStorage.removeItem(e)}catch{}}function an(e){try{return JSON.parse(e)}catch{return e}}function D(e){return typeof e=="object"&&e!==null?e:null}function cn(){let e=$e(location.hash);if(tn(io),tn(on),e.token){let t=`${location.pathname}${location.search}${e.remainingHash}`;history.replaceState(history.state,"",t)}return""}function ln(){let e=rn(en);if(e)return e;let t=crypto.randomUUID();return sn(en,t),t}function co(e){let t=rn(e);if(t===null)return null;let n=Number.parseInt(t,10);return Number.isFinite(n)&&n>=0?n:null}function lo(){let e=new URL("/_visual/ws",location.href);return e.protocol=location.protocol==="https:"?"wss:":"ws:",e.href}var Be=class{browserSessionId;token;mode;getPageState;sequenceStorageKey;onSnapshot;onEvent;onSequenceGap;socket=null;heartbeatTimer;reconnectTimer;reconnectAttempt=0;manuallyClosed=!1;state="connecting";projectId;lastSequence;hasReplaySequence;constructor(t){this.token=t.token,this.browserSessionId=t.browserSessionId,this.mode=t.mode??"control",this.getPageState=t.getPageState??(()=>({})),this.sequenceStorageKey=this.mode==="viewer"?so:on;let n=co(this.sequenceStorageKey);this.lastSequence=n??0,this.hasReplaySequence=n!==null||this.mode==="control",this.onSnapshot=t.onSnapshot,this.onEvent=t.onEvent,this.onSequenceGap=t.onSequenceGap??(()=>{})}connect(){this.manuallyClosed=!1,this.openSocket()}close(){this.manuallyClosed=!0,this.clearTimers(),this.socket?.close(),this.socket=null}send(t,n){if(this.socket?.readyState!==WebSocket.OPEN)return!1;let o={id:crypto.randomUUID(),type:t,browserSessionId:this.browserSessionId,payload:n};return this.socket.send(JSON.stringify(o)),!0}emitSnapshot(){this.onSnapshot({state:this.state,...this.projectId?{projectId:this.projectId}:{},lastSequence:this.lastSequence})}openSocket(){this.clearTimers(),this.state=this.reconnectAttempt>0?"reconnecting":"connecting",this.emitSnapshot();let t;try{t=new WebSocket(lo())}catch{this.scheduleReconnect();return}this.socket=t,t.addEventListener("open",()=>{this.reconnectAttempt=0,this.send("auth",{token:this.token})}),t.addEventListener("message",n=>{this.handleMessage(String(n.data))}),t.addEventListener("close",n=>{if(this.socket=null,n.code===4001||n.code===4401){this.state="unauthorized",this.emitSnapshot();return}this.manuallyClosed||this.scheduleReconnect()}),t.addEventListener("error",()=>{this.state==="connecting"&&(this.state="offline",this.emitSnapshot())})}handleMessage(t){let n=D(an(t));if(!(!n||typeof n.type!="string")){if(n.type==="auth.ok"){this.projectId=typeof n.projectId=="string"?n.projectId:this.projectId,this.state="connected",this.emitSnapshot(),this.send("browser.hello",{...this.hasReplaySequence?{lastSeq:this.lastSequence}:{},...this.mode==="control"?this.getPageState():{}}),this.mode==="control"&&(this.heartbeatTimer=window.setInterval(()=>{this.send("browser.heartbeat",{lastSeq:this.lastSequence,...this.getPageState()})},15e3));return}if(n.type==="auth.error"||n.type==="error.unauthorized"){this.state="unauthorized",this.emitSnapshot(),this.socket?.close(4401,"Pairing rejected");return}if(typeof n.seq=="number"){if(n.seq<=this.lastSequence&&this.hasReplaySequence)return;this.hasReplaySequence&&n.seq>this.lastSequence+1&&this.onSequenceGap({expectedSequence:this.lastSequence+1,receivedSequence:n.seq}),this.lastSequence=n.seq,this.hasReplaySequence=!0,sn(this.sequenceStorageKey,String(this.lastSequence)),this.emitSnapshot()}typeof n.projectId=="string"&&(this.projectId=n.projectId),this.onEvent(n)}}scheduleReconnect(){if(this.clearTimers(),this.manuallyClosed)return;this.reconnectAttempt+=1,this.state="reconnecting",this.emitSnapshot();let t=Math.min(1e4,500*2**(this.reconnectAttempt-1));this.reconnectTimer=window.setTimeout(()=>this.openSocket(),t)}clearTimers(){this.heartbeatTimer!==void 0&&(clearInterval(this.heartbeatTimer),this.heartbeatTimer=void 0),this.reconnectTimer!==void 0&&(clearTimeout(this.reconnectTimer),this.reconnectTimer=void 0)}};async function ae(e,t,n){let o=new Headers(n?.headers);e&&o.set("Authorization",`Bearer ${e}`),n?.body&&!o.has("Content-Type")&&o.set("Content-Type","application/json");let r=await fetch(t,{...n,headers:o});if(!r.ok){let i=I(await r.text(),180);throw new Error(i||`Bridge request failed (${r.status} ${r.statusText})`)}return r}async function ce(e){let t=await e.text();return t?an(t):null}async function un(e){let t=await ce(await ae(e,"/_visual/api/viewer-session")),n=D(t)?.viewerUrl;if(typeof n!="string"||!n.startsWith("/_visual/viewer#visual-view="))throw new Error("Bridge returned an invalid viewer session URL");return n}async function dn(e){let t=await ce(await ae(e,"/_visual/api/project")),n=D(t),o=D(n?.project);return typeof n?.id=="string"?n.id:typeof n?.projectId=="string"?n.projectId:typeof o?.id=="string"?o.id:void 0}async function uo(e,t={}){let n=new URLSearchParams;t.limit!==void 0&&n.set("limit",String(t.limit)),t.cursor!==void 0&&(n.set("before",t.cursor.createdAt),n.set("beforeId",t.cursor.id));let o=n.toString(),r=o?`?${o}`:"",i=await ce(await ae(e,`/_visual/api/tasks${r}`)),s=D(i);return(Array.isArray(i)?i:Array.isArray(s?.tasks)?s.tasks:[]).filter(f=>{let c=D(f);return typeof c?.id=="string"&&typeof c.projectId=="string"&&typeof c.status=="string"&&ao.has(c.status)&&typeof c.requestText=="string"&&(c.scope==="instance"||c.scope==="component"||c.scope==="page"||c.scope==="project")&&typeof c.originBrowserSessionId=="string"&&Array.isArray(c.changedFiles)&&c.changedFiles.every(m=>typeof m=="string")&&typeof c.createdAt=="string"})}async function pn(e,t){let n=await uo(e);for(let o of n)if(o.originBrowserSessionId===t)return o}function nn(e){return Array.isArray(e)?e.filter(t=>typeof t=="string"):[]}function fn(e){let t=nn(e);if(t.length>0||Array.isArray(e))return t;let n=D(e);return nn(n?.files??n?.changedFiles??n?.data)}function po(e){if(typeof e=="string")return e;let t=D(e),n=t?.diff??t?.content??t?.data;return typeof n=="string"?n:""}function gn(e){if(typeof e=="string")return I(e,500);let t=D(e);if(!t)return null;let n=D(t.event)??t,o=typeof n.type=="string"?n.type:void 0;if(o==="tool_start"&&typeof n.name=="string")return I(`\uB3C4\uAD6C \uC2DC\uC791 \xB7 ${n.name}${typeof n.summary=="string"?` \xB7 ${n.summary}`:""}`,500);if(o==="tool_end"&&typeof n.name=="string")return I(`\uB3C4\uAD6C ${n.ok===!1?"\uC2E4\uD328":"\uC644\uB8CC"} \xB7 ${n.name}`,500);if(o==="phase"&&typeof n.name=="string")return I(`\uB2E8\uACC4 \xB7 ${n.name}`,500);if(o==="file_hint"&&typeof n.path=="string")return I(`\uD30C\uC77C \xB7 ${n.path}`,500);let r=n.message??n.text??n.summary??n.command??n.error??t.message;return typeof r=="string"?I(r,500):null}async function mn(e,t,n){let o=`/_visual/api/tasks/${encodeURIComponent(t)}`,r=n===void 0?void 0:{signal:n},[i,s,l]=await Promise.allSettled([ae(e,`${o}/files`,r).then(ce),ae(e,`${o}/diff`,r).then(ce),ae(e,`${o}/logs`,r).then(ce)]),f=[i,s,l].find(E=>E.status==="rejected"&&E.reason instanceof DOMException&&E.reason.name==="AbortError");if(f!==void 0)throw f.reason;let c=i.status==="fulfilled"?fn(i.value):[],m=s.status==="fulfilled"?po(s.value):"",h=l.status==="fulfilled"?l.value:[],a=D(h),g=Array.isArray(h)?h:Array.isArray(a?.logs)?a.logs:[],k=Array.isArray(g)?g.map(gn).filter(E=>!!E).slice(-40):[],x=[];return i.status==="rejected"&&x.push("files"),s.status==="rejected"&&x.push("diff"),l.status==="rejected"&&x.push("logs"),{changedFiles:c,diff:m,logs:k,unavailable:x}}async function hn(e,t,n){return ce(await ae(e,`/_visual/api/tasks/${encodeURIComponent(t)}/${n}`,{method:"POST"}))}function Ue(e){let t=D(e.payload),o=D(t?.task)??t;return o&&typeof o.id=="string"?o:void 0}function _n(e,t,n){let o=Ue(e),r=e.taskId??o?.id;return r?e.type==="task.queued"?o?.originBrowserSessionId===t?{accept:!0,bind:!0,taskId:r}:{accept:!1,bind:!1,taskId:r}:{accept:n===r,bind:!1,taskId:r}:{accept:!1,bind:!1}}function bn(e){let t=Ue(e);if(t?.status)return t.status;let n=D(e.payload),o=n?.phase??n?.status;return typeof o=="string"?o:void 0}function vn(e){let t=D(e.payload);return gn(t?.event??t)}function yn(e){let t=D(e.payload);return fn(t?.changedFiles??t?.files??[])}var le="__visual_bridge_root",fo=new Set(["SCRIPT","STYLE","META","LINK","NOSCRIPT","TEMPLATE"]),go=new Set(["alt","aria-label","aria-labelledby","aria-describedby","role","title","type","placeholder","data-testid","data-test-id","data-component","data-component-name","data-source","data-source-file","data-source-line","data-source-column","data-react-source"]),xn=/(?:auth|cookie|credential|csrf|jwt|key|password|secret|session|token|value)/i,Tn=[["display","display"],["position","position"],["width","width"],["height","height"],["margin","margin"],["padding","padding"],["gap","gap"],["borderRadius","border-radius"],["fontSize","font-size"],["fontWeight","font-weight"],["lineHeight","line-height"],["color","color"],["backgroundColor","background-color"],["flexDirection","flex-direction"],["alignItems","align-items"],["justifyContent","justify-content"],["gridTemplateColumns","grid-template-columns"],["zIndex","z-index"]],mo={a:"link",button:"button",footer:"contentinfo",form:"form",header:"banner",img:"img",main:"main",nav:"navigation",select:"combobox",textarea:"textbox"};function xe(e){return typeof e=="object"&&e!==null?e:null}function $(e){let t=e?.trim();return t||void 0}function pe(e){let t=typeof e=="number"?e:Number.parseInt(String(e),10);return Number.isInteger(t)&&t>0?t:void 0}function En(e,t){let n=$(typeof e.fileName=="string"?e.fileName:typeof e.filePath=="string"?e.filePath:typeof e.file=="string"?e.file:void 0);if(!n)return;let o=pe(e.lineNumber??e.line),r=pe(e.columnNumber??e.column),i=$(typeof e.componentName=="string"?e.componentName:t);return{filePath:n,...o?{lineNumber:o}:{},...r?{columnNumber:r}:{},...i?{componentName:i}:{}}}function ho(e,t){let n=e.trim();if(!n)return;if(n.startsWith("{"))try{let l=xe(JSON.parse(n));return l?En(l,t):void 0}catch{return}let o=/^(.*):(\d+)(?::(\d+))?$/.exec(n),r=$(o?.[1]??n);if(!r)return;let i=pe(o?.[2]),s=pe(o?.[3]);return{filePath:r,...i?{lineNumber:i}:{},...s?{columnNumber:s}:{},...t?{componentName:t}:{}}}function _o(e){let t=$(e.getAttribute("data-component-name"))??$(e.getAttribute("data-component")),n=e.getAttribute("data-react-source")??e.getAttribute("data-source");if(n){let s=ho(n,t);if(s)return s}let o=$(e.getAttribute("data-source-file")??e.getAttribute("data-file")??void 0);if(!o)return;let r=pe(e.getAttribute("data-source-line")),i=pe(e.getAttribute("data-source-column"));return{filePath:o,...r?{lineNumber:r}:{},...i?{columnNumber:i}:{},...t?{componentName:t}:{}}}function bo(e){let t=e.type;if(typeof t=="function"){let o=t;return $(typeof o.displayName=="string"?o.displayName:typeof o.name=="string"?o.name:void 0)}let n=xe(t);return $(typeof n?.displayName=="string"?n.displayName:typeof n?.name=="string"?n.name:void 0)}function vo(e,t){let n=typeof e=="string"?e:e instanceof Error?e.stack:void 0;if(!n)return[];let o=[];for(let r of n.split(`
|
|
2
|
+
`)){let i=/(?:\(|\s)([^()\s]+):(\d+):(\d+)\)?$/.exec(r.trim());if(!(!i?.[1]||i[1].includes("node_modules"))&&(o.push({filePath:i[1],lineNumber:Number(i[2]),columnNumber:Number(i[3]),...t?{componentName:t}:{}}),o.length===8))break}return o}function wn(e){let t=e,n=Object.keys(t).find(s=>s.startsWith("__reactFiber$")||s.startsWith("__reactInternalInstance$")),o=n?xe(t[n]):null,r=[],i=new Set;for(let s=0;o&&s<20&&r.length<8;s+=1){let l=bo(o),f=xe(o._debugSource),c=f?En(f,l):void 0,m=c?[c]:vo(o._debugStack,l);for(let h of m){let a=`${h.filePath}:${h.lineNumber??0}:${h.columnNumber??0}`;if(i.has(a)||(r.push(h),i.add(a)),r.length===8)break}o=xe(o.return)}return r}function yo(e){let t=e;for(let o=0;t&&o<5;o+=1){let r=_o(t);if(r){let i=wn(e);return{primary:r,stack:[r,...i].filter((s,l,f)=>f.findIndex(c=>c.filePath===s.filePath&&c.lineNumber===s.lineNumber&&c.columnNumber===s.columnNumber)===l).slice(0,8),confidence:o===0?"exact":"probable"}}t=t.parentElement}let n=wn(e);return n.length>0?{primary:n[0],stack:n,confidence:"probable"}:{stack:[],confidence:"unknown"}}function xo(e){if(e.id===le||e.closest(`#${le}`))return!0;let t=e.getRootNode();return t instanceof ShadowRoot&&t.host.id===le}function fe(e){if(!(e instanceof HTMLElement)||fo.has(e.tagName)||xo(e))return!1;let t=e.getBoundingClientRect();if(t.width<1||t.height<1)return!1;let n=getComputedStyle(e);return n.display!=="none"&&n.visibility!=="hidden"&&Number.parseFloat(n.opacity||"1")>0}function ct(e,t){for(let n of document.elementsFromPoint(e,t))if(fe(n))return n;return null}function wo(e){let t={};for(let n of e.attributes){let o=n.name.toLowerCase(),r=o.startsWith("data-")&&!xn.test(o)&&/(?:component|source|test|qa|variant)/i.test(o);(go.has(o)||r)&&!xn.test(o)&&(t[o]=I(n.value,200))}return t}function je(e){return $(e.getAttribute("role"))??mo[e.tagName.toLowerCase()]??(e instanceof HTMLInputElement?"textbox":void 0)}function lt(e){let t=$(e.getAttribute("aria-label"));if(t)return I(t,200);if(e instanceof HTMLImageElement)return $(e.alt);if(e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement){let o=e.labels?.[0],r=$(o?.innerText);return r?I(r,200):$(e.getAttribute("placeholder"))}let n=$(e.innerText);return n?I(n,200):$(e.title)}function Sn(e){return typeof CSS<"u"&&typeof CSS.escape=="function"?CSS.escape(e):e.replace(/[^a-zA-Z0-9_-]/g,t=>`\\${t}`)}function So(e){let t=e.getAttribute("data-testid")??e.getAttribute("data-test-id");if(t)return`[data-testid="${Sn(t)}"]`;if(e.id)return`#${Sn(e.id)}`;let n=[],o=e;for(;o&&o!==document.body&&n.length<5;){let r=o.parentElement,i=o.tagName.toLowerCase(),s=o.tagName;if(!r){n.unshift(i);break}let l=Array.from(r.children).filter(c=>c.tagName===s),f=l.length>1?`:nth-of-type(${l.indexOf(o)+1})`:"";n.unshift(`${i}${f}`),o=r}return n.join(" > ")}function ko(e){let t=[],n=e.getAttribute("data-testid")??e.getAttribute("data-test-id");n&&t.push({type:"testid",value:n,confidence:1}),e.id&&t.push({type:"id",value:e.id,confidence:.98});let o=je(e),r=lt(e);o&&t.push({type:"role",value:r?`${o}:${r}`:o,confidence:r?.9:.72});let i=So(e);i&&(t.push({type:"css",value:i,confidence:.68}),t.push({type:"dom-path",value:i,confidence:.5}));let s=$(e.innerText);return s&&!(e instanceof HTMLInputElement)&&t.push({type:"text",value:I(s,100),confidence:.45}),t}var kn={testid:0,id:1,role:2,css:3,"dom-path":4,text:5},To=new Map(Tn);function at(e,t){let n=0;for(let o of e){if(n+=1,n>2500)break;if(fe(o)&&t(o))return o}return null}function Eo(e,t){try{let n=e.querySelector(t);return n&&fe(n)?n:null}catch{return null}}function Co(e,t,n){if(n.type==="testid")return at(e.querySelectorAll("[data-testid], [data-test-id]"),r=>r.getAttribute("data-testid")===n.value||r.getAttribute("data-test-id")===n.value);if(n.type==="id"){let r=e.getElementById(n.value);return r&&fe(r)?r:null}if(n.type==="role"){let r=n.value.indexOf(":"),i=t.dom.role??(r<0?n.value:n.value.slice(0,r)),s=t.dom.accessibleName??(r<0?void 0:n.value.slice(r+1));return at(e.querySelectorAll("[role], a[href], button, footer, form, header, img, input, main, nav, select, textarea"),l=>je(l)===i&&(s===void 0||lt(l)===s))}if(n.type==="css"||n.type==="dom-path")return Eo(e,n.value);let o=I(n.value,100);return at(e.querySelectorAll("*"),r=>r.tagName.toLowerCase()!==t.dom.tagName?!1:I(r.innerText??"",100)===o)}function Ro(e,t){let n=[...e.dom.locatorCandidates].sort((o,r)=>kn[o.type]-kn[r.type]||r.confidence-o.confidence);for(let o of n){let r=Co(t,e,o);if(r)return r}return null}function Po(e,t){let n=re(t),o=e.dom.rect;if(Math.abs(n.x-o.x)>1||Math.abs(n.y-o.y)>1||Math.abs(n.width-o.width)>1||Math.abs(n.height-o.height)>1||e.dom.text!==void 0&&I(t.innerText??"",500)!==e.dom.text)return!0;let r=getComputedStyle(t);return Object.entries(e.styles).some(([i,s])=>{let l=To.get(i);return l!==void 0&&r.getPropertyValue(l)!==s})}function Cn(e,t=document){if(e.length===0)return{state:"unverified",targetCount:0,foundCount:0,changedCount:0};let n=0,o=0;for(let r of e){let i=Ro(r,t);i&&(n+=1,Po(r,i)&&(o+=1))}return{state:n!==e.length?"not-found":o>0?"found-and-changed":"found-no-visible-change",targetCount:e.length,foundCount:n,changedCount:o}}function Lo(e){let t=[],n=e.parentElement;for(;n&&n!==document.body&&t.length<8;){let o=n.parentElement?Array.from(n.parentElement.children).indexOf(n):void 0,r=$(n.id);t.unshift({tagName:n.tagName.toLowerCase(),...r?{id:r}:{},classNames:Array.from(n.classList).slice(0,20),...o!==void 0&&o>=0?{siblingIndex:o}:{}}),n=n.parentElement}return t}function re(e){let t=e.getBoundingClientRect();return{x:t.x,y:t.y,width:t.width,height:t.height}}async function ge(e,t){await Promise.resolve();let n=getComputedStyle(e),o=Array.from(e.classList).slice(0,100);for(;o.join(" ").length>2e3;)o.pop();let r={};for(let[m,h]of Tn){let a=n.getPropertyValue(h);a&&(r[m]=I(a,160))}let i=$(e.id),s=e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement?void 0:$(e.innerText),l=je(e),f=lt(e),c=yo(e);return{targetId:crypto.randomUUID(),order:t,dom:{tagName:e.tagName.toLowerCase(),...i?{id:i}:{},classNames:o,...s?{text:I(s,500)}:{},...l?{role:l}:{},...f?{accessibleName:I(f,200)}:{},attributes:wo(e),rect:re(e),locatorCandidates:ko(e),parentPath:Lo(e)},styles:r,source:c}}function Rn(e){let t=[],n=Math.max(e.width*e.height,1),o=document.body?.querySelectorAll("*")??[],r=0;for(let i of o){if(r+=1,r>4e3)break;if(!fe(i))continue;let s=re(i),l=it(s,e);if(l<=0)continue;let c=!!je(i)||/^(A|BUTTON|INPUT|SELECT|TEXTAREA|SUMMARY)$/.test(i.tagName),m=s.width*s.height/n,h=i.children.length<=2;!c&&!h&&m>.88||!c&&l<.12||t.push({element:i,score:l+(c?1.5:0)+(h?.35:0),index:r})}return t.sort((i,s)=>s.score-i.score||i.index-s.index).slice(0,20).sort((i,s)=>i.index-s.index).map(({element:i})=>i)}function Oe(){let e=["main","header","nav","aside","footer","[role='main']","[role='navigation']","h1","h2","button","a[href]","input","select","textarea","[role='button']"],t=[],n=new Set;for(let o of document.querySelectorAll(e.join(",")))if(!(n.has(o)||!fe(o)||it(re(o),{x:0,y:0,width:innerWidth,height:innerHeight})<=0)&&(t.push(o),n.add(o),t.length===20))break;return t}function ut(e){let t=e.targets.map((o,r)=>({...o,order:r})),n=e.mode==="element"?{mode:"element",targets:t.slice(0,1)}:e.mode==="multi"?{mode:"multi",targets:t.slice(0,8)}:e.mode==="region"?{mode:"region",region:e.region??{x:0,y:0,width:0,height:0},targets:t.slice(0,20)}:{mode:"page",targets:t.slice(0,20)};return{version:1,projectId:e.projectId||"current",browserSessionId:e.browserSessionId,page:{url:location.href,pathname:location.pathname,title:document.title,viewport:{width:innerWidth,height:innerHeight},devicePixelRatio:devicePixelRatio||1,scroll:{x:scrollX,y:scrollY},renderRevision:e.renderRevision},selection:n,request:{text:e.requestText.trim(),scope:e.scope}}}var Pn=String.raw`
|
|
3
|
+
--graphite: #20211f;
|
|
4
|
+
--graphite-2: #30312e;
|
|
5
|
+
--strip: #f4efe3;
|
|
6
|
+
--strip-strong: #fffaf0;
|
|
7
|
+
--ink: #1b1c1a;
|
|
8
|
+
--muted: #64635b;
|
|
9
|
+
--rule: #b7b0a1;
|
|
10
|
+
--dispatch: #cf450f;
|
|
11
|
+
--dispatch-dark: #9f3108;
|
|
12
|
+
--verified: #087f8c;
|
|
13
|
+
--danger: #a72920;
|
|
14
|
+
`;var Ln=String.raw`
|
|
15
|
+
:host {
|
|
16
|
+
all: initial;
|
|
17
|
+
position: fixed;
|
|
18
|
+
inset: 0;
|
|
19
|
+
z-index: 2147483647;
|
|
20
|
+
pointer-events: none;
|
|
21
|
+
color-scheme: light;
|
|
22
|
+
contain: layout style;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
*, *::before, *::after {
|
|
26
|
+
box-sizing: border-box;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
button, textarea, select {
|
|
30
|
+
font: inherit;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
button, select {
|
|
34
|
+
margin: 0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.visual-shell {
|
|
38
|
+
${Pn}
|
|
39
|
+
position: fixed;
|
|
40
|
+
inset: 0;
|
|
41
|
+
color: var(--ink);
|
|
42
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
43
|
+
font-size: 13px;
|
|
44
|
+
line-height: 1.4;
|
|
45
|
+
pointer-events: none;
|
|
46
|
+
text-rendering: optimizeLegibility;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.visual-shell[data-open="false"] {
|
|
50
|
+
pointer-events: none;
|
|
51
|
+
visibility: hidden;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.visual-shell[data-open="true"] .toolbar,
|
|
55
|
+
.visual-shell[data-open="true"] .strip {
|
|
56
|
+
pointer-events: auto;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.toolbar {
|
|
60
|
+
position: fixed;
|
|
61
|
+
top: max(12px, env(safe-area-inset-top));
|
|
62
|
+
left: 50%;
|
|
63
|
+
display: flex;
|
|
64
|
+
align-items: stretch;
|
|
65
|
+
min-height: 38px;
|
|
66
|
+
padding: 4px;
|
|
67
|
+
background: var(--graphite);
|
|
68
|
+
border: 1px solid #080907;
|
|
69
|
+
border-radius: 4px 4px 9px 4px;
|
|
70
|
+
box-shadow: 0 5px 18px rgb(0 0 0 / 28%);
|
|
71
|
+
transform: translateX(-50%);
|
|
72
|
+
color: #f9f4e9;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.brand-mark {
|
|
76
|
+
display: flex;
|
|
77
|
+
align-items: center;
|
|
78
|
+
gap: 7px;
|
|
79
|
+
padding: 0 10px 0 7px;
|
|
80
|
+
border-right: 1px solid #4a4b46;
|
|
81
|
+
white-space: nowrap;
|
|
82
|
+
font-weight: 650;
|
|
83
|
+
letter-spacing: -0.01em;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.brand-mark::before {
|
|
87
|
+
width: 8px;
|
|
88
|
+
height: 8px;
|
|
89
|
+
content: "";
|
|
90
|
+
background: var(--dispatch);
|
|
91
|
+
border: 1px solid #ffb58e;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.mode-tabs {
|
|
95
|
+
display: flex;
|
|
96
|
+
gap: 2px;
|
|
97
|
+
margin-left: 4px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.toolbar button,
|
|
101
|
+
.toolbar a,
|
|
102
|
+
.toolbar .connection {
|
|
103
|
+
min-height: 28px;
|
|
104
|
+
border: 1px solid transparent;
|
|
105
|
+
border-radius: 3px;
|
|
106
|
+
background: transparent;
|
|
107
|
+
color: #ded9cf;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.toolbar button,
|
|
111
|
+
.toolbar a {
|
|
112
|
+
display: flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
justify-content: center;
|
|
115
|
+
min-width: 48px;
|
|
116
|
+
padding: 4px 9px;
|
|
117
|
+
cursor: pointer;
|
|
118
|
+
text-decoration: none;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.toolbar button:hover,
|
|
122
|
+
.toolbar a:hover {
|
|
123
|
+
background: #3a3b37;
|
|
124
|
+
color: #fffaf0;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.toolbar button[aria-pressed="true"] {
|
|
128
|
+
background: var(--dispatch);
|
|
129
|
+
border-color: #f18755;
|
|
130
|
+
color: #fff;
|
|
131
|
+
font-weight: 700;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.toolbar button:disabled {
|
|
135
|
+
cursor: not-allowed;
|
|
136
|
+
opacity: 0.48;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.task-toggle,
|
|
140
|
+
.viewer-link {
|
|
141
|
+
margin-left: 4px;
|
|
142
|
+
white-space: nowrap;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.connection {
|
|
146
|
+
display: flex;
|
|
147
|
+
align-items: center;
|
|
148
|
+
gap: 6px;
|
|
149
|
+
margin-left: 5px;
|
|
150
|
+
padding: 4px 8px;
|
|
151
|
+
border-left-color: #4a4b46 !important;
|
|
152
|
+
border-radius: 0 !important;
|
|
153
|
+
color: #c5c1b8 !important;
|
|
154
|
+
font-size: 11px;
|
|
155
|
+
white-space: nowrap;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.connection-label-compact {
|
|
159
|
+
display: none;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.state-dot {
|
|
163
|
+
width: 7px;
|
|
164
|
+
height: 7px;
|
|
165
|
+
border: 1px solid currentColor;
|
|
166
|
+
background: currentColor;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.state-dot[data-state="connected"] {
|
|
170
|
+
color: var(--verified);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.state-dot[data-state="connecting"],
|
|
174
|
+
.state-dot[data-state="reconnecting"] {
|
|
175
|
+
color: #e1a14a;
|
|
176
|
+
animation: dispatch-tick 1.1s steps(2, end) infinite;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.state-dot[data-state="offline"],
|
|
180
|
+
.state-dot[data-state="unauthorized"],
|
|
181
|
+
.state-dot[data-state="unpaired"] {
|
|
182
|
+
color: #d25b51;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.reticle {
|
|
186
|
+
position: fixed;
|
|
187
|
+
z-index: 1;
|
|
188
|
+
border: 2px solid var(--dispatch);
|
|
189
|
+
outline: 1px solid #fffaf0;
|
|
190
|
+
outline-offset: 2px;
|
|
191
|
+
pointer-events: none;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.reticle::before,
|
|
195
|
+
.reticle::after {
|
|
196
|
+
position: absolute;
|
|
197
|
+
width: 9px;
|
|
198
|
+
height: 9px;
|
|
199
|
+
content: "";
|
|
200
|
+
border-color: var(--graphite);
|
|
201
|
+
border-style: solid;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.reticle::before {
|
|
205
|
+
top: -5px;
|
|
206
|
+
left: -5px;
|
|
207
|
+
border-width: 2px 0 0 2px;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.reticle::after {
|
|
211
|
+
right: -5px;
|
|
212
|
+
bottom: -5px;
|
|
213
|
+
border-width: 0 2px 2px 0;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.reticle[data-kind="hover"] {
|
|
217
|
+
border-color: #343530;
|
|
218
|
+
outline-color: #fffaf0;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.reticle-label {
|
|
222
|
+
position: absolute;
|
|
223
|
+
top: -22px;
|
|
224
|
+
left: -2px;
|
|
225
|
+
min-width: 20px;
|
|
226
|
+
height: 18px;
|
|
227
|
+
padding: 1px 5px;
|
|
228
|
+
background: var(--graphite);
|
|
229
|
+
border: 1px solid #fffaf0;
|
|
230
|
+
color: #fffaf0;
|
|
231
|
+
font: 700 11px/14px ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
232
|
+
text-align: center;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.region-box {
|
|
236
|
+
position: fixed;
|
|
237
|
+
z-index: 1;
|
|
238
|
+
border: 2px dashed var(--dispatch);
|
|
239
|
+
outline: 1px solid #fffaf0;
|
|
240
|
+
outline-offset: 2px;
|
|
241
|
+
background: rgb(207 69 15 / 8%);
|
|
242
|
+
pointer-events: none;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.region-box-label {
|
|
246
|
+
position: absolute;
|
|
247
|
+
top: 5px;
|
|
248
|
+
left: 5px;
|
|
249
|
+
padding: 2px 5px;
|
|
250
|
+
border: 1px solid #fffaf0;
|
|
251
|
+
background: var(--graphite);
|
|
252
|
+
color: #fffaf0;
|
|
253
|
+
font-size: 10px;
|
|
254
|
+
line-height: 1.4;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.strip {
|
|
258
|
+
position: fixed;
|
|
259
|
+
z-index: 3;
|
|
260
|
+
display: flex;
|
|
261
|
+
flex-direction: column;
|
|
262
|
+
width: min(408px, calc(100vw - 24px));
|
|
263
|
+
max-height: calc(100vh - 76px);
|
|
264
|
+
overflow: auto;
|
|
265
|
+
background: var(--strip);
|
|
266
|
+
border: 1px solid #272821;
|
|
267
|
+
border-radius: 4px 4px 11px 4px;
|
|
268
|
+
box-shadow: 0 7px 24px rgb(0 0 0 / 30%);
|
|
269
|
+
color: var(--ink);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.strip-head {
|
|
273
|
+
display: grid;
|
|
274
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
275
|
+
align-items: center;
|
|
276
|
+
min-height: 34px;
|
|
277
|
+
padding: 6px 9px 6px 11px;
|
|
278
|
+
background: var(--graphite);
|
|
279
|
+
color: #f8f3e9;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.strip-title {
|
|
283
|
+
min-width: 0;
|
|
284
|
+
overflow: hidden;
|
|
285
|
+
font-weight: 680;
|
|
286
|
+
letter-spacing: -0.01em;
|
|
287
|
+
text-overflow: ellipsis;
|
|
288
|
+
white-space: nowrap;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.machine {
|
|
292
|
+
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
293
|
+
font-variant-numeric: tabular-nums;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.strip-code {
|
|
297
|
+
margin-left: 10px;
|
|
298
|
+
color: #bdb9b0;
|
|
299
|
+
font-size: 10px;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.strip-body {
|
|
303
|
+
min-height: 0;
|
|
304
|
+
padding: 11px;
|
|
305
|
+
overflow: auto;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.selection-readout {
|
|
309
|
+
display: flex;
|
|
310
|
+
align-items: center;
|
|
311
|
+
justify-content: space-between;
|
|
312
|
+
gap: 8px;
|
|
313
|
+
min-height: 25px;
|
|
314
|
+
margin-bottom: 8px;
|
|
315
|
+
padding-bottom: 8px;
|
|
316
|
+
border-bottom: 1px solid var(--rule);
|
|
317
|
+
color: var(--muted);
|
|
318
|
+
font-size: 11px;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.selection-readout strong {
|
|
322
|
+
min-width: 0;
|
|
323
|
+
overflow: hidden;
|
|
324
|
+
color: var(--ink);
|
|
325
|
+
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
326
|
+
font-weight: 650;
|
|
327
|
+
text-overflow: ellipsis;
|
|
328
|
+
white-space: nowrap;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.request-field {
|
|
332
|
+
display: block;
|
|
333
|
+
width: 100%;
|
|
334
|
+
min-height: 86px;
|
|
335
|
+
max-height: 180px;
|
|
336
|
+
resize: vertical;
|
|
337
|
+
padding: 9px 10px;
|
|
338
|
+
border: 1px solid #888276;
|
|
339
|
+
border-radius: 3px;
|
|
340
|
+
outline: none;
|
|
341
|
+
background: var(--strip-strong);
|
|
342
|
+
color: var(--ink);
|
|
343
|
+
line-height: 1.5;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.request-field::placeholder {
|
|
347
|
+
color: #706e67;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.request-field:focus-visible,
|
|
351
|
+
select:focus-visible,
|
|
352
|
+
button:focus-visible,
|
|
353
|
+
.toolbar a:focus-visible,
|
|
354
|
+
summary:focus-visible {
|
|
355
|
+
outline: 3px solid #fffaf0;
|
|
356
|
+
outline-offset: 2px;
|
|
357
|
+
box-shadow: 0 0 0 5px var(--dispatch-dark);
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.request-meta {
|
|
361
|
+
display: grid;
|
|
362
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
363
|
+
align-items: end;
|
|
364
|
+
gap: 10px;
|
|
365
|
+
margin-top: 9px;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.field-label {
|
|
369
|
+
display: grid;
|
|
370
|
+
gap: 3px;
|
|
371
|
+
color: var(--muted);
|
|
372
|
+
font-size: 10px;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
select {
|
|
376
|
+
min-height: 34px;
|
|
377
|
+
padding: 5px 28px 5px 8px;
|
|
378
|
+
border: 1px solid #888276;
|
|
379
|
+
border-radius: 3px;
|
|
380
|
+
background: var(--strip-strong);
|
|
381
|
+
color: var(--ink);
|
|
382
|
+
cursor: pointer;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.primary,
|
|
386
|
+
.secondary,
|
|
387
|
+
.danger,
|
|
388
|
+
.quiet {
|
|
389
|
+
min-height: 34px;
|
|
390
|
+
padding: 6px 11px;
|
|
391
|
+
border: 1px solid #777268;
|
|
392
|
+
border-radius: 3px;
|
|
393
|
+
cursor: pointer;
|
|
394
|
+
font-weight: 650;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.primary {
|
|
398
|
+
background: var(--dispatch);
|
|
399
|
+
border-color: var(--dispatch-dark);
|
|
400
|
+
color: #fff;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.primary:hover {
|
|
404
|
+
background: #bd3d0d;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.secondary {
|
|
408
|
+
background: var(--graphite-2);
|
|
409
|
+
border-color: #11120f;
|
|
410
|
+
color: #fffaf0;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.secondary:hover {
|
|
414
|
+
background: #464741;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.quiet {
|
|
418
|
+
background: transparent;
|
|
419
|
+
color: var(--ink);
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.quiet:hover {
|
|
423
|
+
background: #e4ded2;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.danger {
|
|
427
|
+
background: transparent;
|
|
428
|
+
border-color: var(--danger);
|
|
429
|
+
color: var(--danger);
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.danger:hover {
|
|
433
|
+
background: #f8dfdb;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
button:disabled {
|
|
437
|
+
cursor: not-allowed;
|
|
438
|
+
opacity: 0.52;
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
.shortcut-note,
|
|
442
|
+
.input-note {
|
|
443
|
+
color: var(--muted);
|
|
444
|
+
font-size: 10px;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
.input-note {
|
|
448
|
+
margin: 6px 0 0;
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
.status-row {
|
|
452
|
+
display: grid;
|
|
453
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
454
|
+
align-items: center;
|
|
455
|
+
gap: 8px;
|
|
456
|
+
padding-bottom: 9px;
|
|
457
|
+
border-bottom: 1px solid var(--rule);
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.phase-mark {
|
|
461
|
+
width: 10px;
|
|
462
|
+
height: 10px;
|
|
463
|
+
background: var(--dispatch);
|
|
464
|
+
border: 1px solid var(--dispatch-dark);
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.phase-mark[data-terminal="true"] {
|
|
468
|
+
background: var(--verified);
|
|
469
|
+
border-color: #075e68;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.phase-mark[data-error="true"] {
|
|
473
|
+
background: var(--danger);
|
|
474
|
+
border-color: #711912;
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
.phase-mark[data-state="canceled"] {
|
|
478
|
+
background: #777268;
|
|
479
|
+
border-color: #4f4c46;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.phase-copy {
|
|
483
|
+
display: grid;
|
|
484
|
+
min-width: 0;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.phase-copy strong {
|
|
488
|
+
letter-spacing: -0.01em;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
.phase-copy span {
|
|
492
|
+
overflow: hidden;
|
|
493
|
+
color: var(--muted);
|
|
494
|
+
font-size: 10px;
|
|
495
|
+
text-overflow: ellipsis;
|
|
496
|
+
white-space: nowrap;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
.phase-count {
|
|
500
|
+
color: var(--muted);
|
|
501
|
+
font-size: 10px;
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
.progress-track {
|
|
505
|
+
height: 3px;
|
|
506
|
+
margin: 8px 0 10px;
|
|
507
|
+
overflow: hidden;
|
|
508
|
+
background: #d4cec1;
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
.progress-track span {
|
|
512
|
+
display: block;
|
|
513
|
+
width: 32%;
|
|
514
|
+
height: 100%;
|
|
515
|
+
background: var(--dispatch);
|
|
516
|
+
animation: task-route 1.25s cubic-bezier(.16, 1, .3, 1) infinite;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
.progress-track[data-active="false"] span {
|
|
520
|
+
width: 100%;
|
|
521
|
+
animation: none;
|
|
522
|
+
background: #777268;
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
.progress-track[data-outcome="complete"] span {
|
|
526
|
+
background: var(--verified);
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
.progress-track[data-outcome="error"] span {
|
|
530
|
+
background: var(--danger);
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
.log-summary {
|
|
534
|
+
display: grid;
|
|
535
|
+
gap: 4px;
|
|
536
|
+
margin: 0;
|
|
537
|
+
padding: 0;
|
|
538
|
+
list-style: none;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
.log-summary li {
|
|
542
|
+
display: grid;
|
|
543
|
+
grid-template-columns: 13px minmax(0, 1fr);
|
|
544
|
+
gap: 5px;
|
|
545
|
+
color: #4f4f49;
|
|
546
|
+
font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
.log-summary li::before {
|
|
550
|
+
content: "›";
|
|
551
|
+
color: var(--dispatch-dark);
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
.empty-line {
|
|
555
|
+
margin: 7px 0;
|
|
556
|
+
color: var(--muted);
|
|
557
|
+
font-size: 11px;
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
.error-banner {
|
|
561
|
+
margin: 8px 0 0;
|
|
562
|
+
padding: 7px 8px;
|
|
563
|
+
border: 1px solid var(--danger);
|
|
564
|
+
background: #f7dfdb;
|
|
565
|
+
color: #741a13;
|
|
566
|
+
font-size: 11px;
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
.review-summary {
|
|
570
|
+
display: grid;
|
|
571
|
+
grid-template-columns: 1fr auto;
|
|
572
|
+
gap: 8px;
|
|
573
|
+
margin-top: 10px;
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
.file-list {
|
|
577
|
+
display: grid;
|
|
578
|
+
gap: 4px;
|
|
579
|
+
max-height: 86px;
|
|
580
|
+
margin: 0;
|
|
581
|
+
padding: 7px 8px;
|
|
582
|
+
overflow: auto;
|
|
583
|
+
border: 1px solid var(--rule);
|
|
584
|
+
background: #e9e2d5;
|
|
585
|
+
list-style: none;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
.file-list li {
|
|
589
|
+
overflow: hidden;
|
|
590
|
+
font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
591
|
+
text-overflow: ellipsis;
|
|
592
|
+
white-space: nowrap;
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.verification {
|
|
596
|
+
display: grid;
|
|
597
|
+
align-content: start;
|
|
598
|
+
gap: 3px;
|
|
599
|
+
min-width: 104px;
|
|
600
|
+
padding: 7px 8px;
|
|
601
|
+
border: 1px solid #888276;
|
|
602
|
+
background: #e9e2d5;
|
|
603
|
+
color: var(--ink);
|
|
604
|
+
font-size: 10px;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.verification[data-status="passed"] {
|
|
608
|
+
border-color: #17727b;
|
|
609
|
+
background: #dcebed;
|
|
610
|
+
color: #075a63;
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
.verification[data-status="partial"] {
|
|
614
|
+
border-color: #8a5b14;
|
|
615
|
+
background: #f1e4cc;
|
|
616
|
+
color: #5f3e0d;
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.verification[data-status="failed"] {
|
|
620
|
+
border-color: var(--danger);
|
|
621
|
+
background: #f7dfdb;
|
|
622
|
+
color: #741a13;
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
.verification strong {
|
|
626
|
+
font-size: 11px;
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
details.diff {
|
|
630
|
+
margin-top: 8px;
|
|
631
|
+
border-top: 1px solid var(--rule);
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
details.diff summary {
|
|
635
|
+
padding: 8px 1px 1px;
|
|
636
|
+
cursor: pointer;
|
|
637
|
+
font-weight: 650;
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
.diff-code {
|
|
641
|
+
max-height: min(270px, 38vh);
|
|
642
|
+
margin: 7px -3px 0;
|
|
643
|
+
padding: 9px;
|
|
644
|
+
overflow: auto;
|
|
645
|
+
border: 1px solid #4b4b45;
|
|
646
|
+
background: #1f201e;
|
|
647
|
+
color: #f2eee4;
|
|
648
|
+
font: 10px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
649
|
+
tab-size: 2;
|
|
650
|
+
white-space: pre;
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
.actions {
|
|
654
|
+
display: flex;
|
|
655
|
+
flex-wrap: wrap;
|
|
656
|
+
gap: 6px;
|
|
657
|
+
margin-top: 10px;
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
.actions .danger {
|
|
661
|
+
margin-left: auto;
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
.follow-up {
|
|
665
|
+
display: grid;
|
|
666
|
+
gap: 7px;
|
|
667
|
+
margin-top: 10px;
|
|
668
|
+
padding-top: 10px;
|
|
669
|
+
border-top: 1px solid var(--rule);
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
.follow-up textarea {
|
|
673
|
+
min-height: 66px;
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
.selection-hint {
|
|
677
|
+
position: fixed;
|
|
678
|
+
bottom: max(14px, env(safe-area-inset-bottom));
|
|
679
|
+
left: 50%;
|
|
680
|
+
padding: 6px 9px;
|
|
681
|
+
background: var(--graphite);
|
|
682
|
+
border: 1px solid #0b0c0a;
|
|
683
|
+
border-radius: 3px;
|
|
684
|
+
box-shadow: 0 4px 14px rgb(0 0 0 / 24%);
|
|
685
|
+
transform: translateX(-50%);
|
|
686
|
+
color: #f8f3e9;
|
|
687
|
+
font-size: 11px;
|
|
688
|
+
white-space: nowrap;
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
.visually-hidden {
|
|
692
|
+
position: absolute !important;
|
|
693
|
+
width: 1px !important;
|
|
694
|
+
height: 1px !important;
|
|
695
|
+
padding: 0 !important;
|
|
696
|
+
overflow: hidden !important;
|
|
697
|
+
clip: rect(0, 0, 0, 0) !important;
|
|
698
|
+
white-space: nowrap !important;
|
|
699
|
+
border: 0 !important;
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
@keyframes dispatch-tick {
|
|
703
|
+
50% { opacity: 0.35; }
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
@keyframes task-route {
|
|
707
|
+
from { transform: translateX(-105%); }
|
|
708
|
+
to { transform: translateX(315%); }
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
@media (max-width: 600px) {
|
|
712
|
+
.toolbar {
|
|
713
|
+
right: 8px;
|
|
714
|
+
left: 8px;
|
|
715
|
+
overflow-x: auto;
|
|
716
|
+
transform: none;
|
|
717
|
+
}
|
|
718
|
+
|
|
719
|
+
.brand-mark {
|
|
720
|
+
display: none;
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
.toolbar button,
|
|
724
|
+
.toolbar a {
|
|
725
|
+
min-width: 46px;
|
|
726
|
+
min-height: 40px;
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
.connection {
|
|
730
|
+
margin-left: auto;
|
|
731
|
+
padding-right: 6px;
|
|
732
|
+
padding-left: 6px;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.connection-label-full {
|
|
736
|
+
display: none;
|
|
737
|
+
}
|
|
738
|
+
|
|
739
|
+
.connection-label-compact {
|
|
740
|
+
display: inline;
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
.strip {
|
|
744
|
+
right: 8px !important;
|
|
745
|
+
bottom: max(8px, env(safe-area-inset-bottom)) !important;
|
|
746
|
+
left: 8px !important;
|
|
747
|
+
top: auto !important;
|
|
748
|
+
width: auto;
|
|
749
|
+
max-height: calc(100vh - 74px - env(safe-area-inset-bottom));
|
|
750
|
+
overflow: auto;
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
.request-meta {
|
|
754
|
+
grid-template-columns: 1fr;
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
.request-meta .primary {
|
|
758
|
+
min-height: 44px;
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
.selection-hint {
|
|
762
|
+
bottom: calc(10px + env(safe-area-inset-bottom));
|
|
763
|
+
max-width: calc(100vw - 20px);
|
|
764
|
+
overflow: hidden;
|
|
765
|
+
text-overflow: ellipsis;
|
|
766
|
+
}
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
@media (prefers-reduced-motion: reduce) {
|
|
770
|
+
.state-dot,
|
|
771
|
+
.progress-track span {
|
|
772
|
+
animation: none !important;
|
|
773
|
+
}
|
|
774
|
+
}
|
|
775
|
+
`;var Io=0;function p(e,t,n,o,r,i){t||(t={});var s,l,f=t;if("ref"in f)for(l in f={},t)l=="ref"?s=t[l]:f[l]=t[l];var c={type:e,props:f,key:n,ref:s,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--Io,__i:-1,__u:0,__source:r,__self:i};if(typeof e=="function"&&(s=e.defaultProps))for(l in s)f[l]===void 0&&(f[l]=s[l]);return C.vnode&&C.vnode(c),c}var qn={queued:"\uB300\uAE30 \uC911",preparing:"\uC791\uC5C5 \uC900\uBE44",snapshotting_before:"\uBCC0\uACBD \uC804 \uC2A4\uB0C5\uC0F7",resolving_context:"\uC18C\uC2A4 \uD655\uC778",running_agent:"\uC5D0\uC774\uC804\uD2B8 \uC218\uC815 \uC911",snapshotting_after:"\uBCC0\uACBD \uD6C4 \uC2A4\uB0C5\uC0F7",diffing:"\uBCC0\uACBD \uBC94\uC704 \uACC4\uC0B0",waiting_hmr:"\uD654\uBA74 \uBC18\uC601 \uB300\uAE30",verifying:"\uAC80\uC99D \uC911",review:"\uAC80\uD1A0 \uB300\uAE30",accepted:"\uBCC0\uACBD \uC720\uC9C0",reverted:"\uB418\uB3CC\uB9AC\uAE30 \uC644\uB8CC",failed:"\uC791\uC5C5 \uC2E4\uD328",canceled:"\uC791\uC5C5 \uCDE8\uC18C",unsafe:"\uC548\uC804 \uD655\uC778 \uD544\uC694"},Fn={unpaired:"\uD398\uC5B4\uB9C1 \uD544\uC694",connecting:"\uC5F0\uACB0 \uC911",connected:"Bridge \uC5F0\uACB0\uB428",reconnecting:"\uC7AC\uC5F0\uACB0 \uC911",offline:"Bridge \uC751\uB2F5 \uC5C6\uC74C",unauthorized:"\uD398\uC5B4\uB9C1 \uAC70\uBD80\uB428"},Ao={unpaired:"\uD398\uC5B4\uB9C1",connecting:"\uC5F0\uACB0 \uC911",connected:"\uC5F0\uACB0\uB428",reconnecting:"\uC7AC\uC5F0\uACB0",offline:"\uC751\uB2F5 \uC5C6\uC74C",unauthorized:"\uAC70\uBD80\uB428"},Se=new Set(["queued","preparing","snapshotting_before","resolving_context","running_agent","snapshotting_after","diffing","waiting_hmr","verifying"]),qo=new Set(["failed","unsafe"]);function we(e){return e.composedPath().some(t=>t instanceof HTMLElement&&t.id===le)}function Fo(e){if(!e)return"\uD604\uC7AC \uD398\uC774\uC9C0";if(!e.context)return"\uC18C\uC2A4 \uC704\uCE58 \uD655\uC778 \uC911\u2026";let t=e.context.source.primary;if(t){let r=t.lineNumber?`:${t.lineNumber}`:"";return`${t.componentName?`${t.componentName} \xB7 `:""}${t.filePath}${r}`}let n=e.context.dom,o=n.id?`#${n.id}`:n.classNames[0]?`.${n.classNames[0]}`:"";return`${n.tagName}${o} \xB7 source unknown`}function Mo(e){switch(e){case"passed":return"\uAC80\uC99D \uD1B5\uACFC";case"partial":return"\uBD80\uBD84 \uAC80\uC99D";case"failed":return"\uAC80\uC99D \uC2E4\uD328";default:return"\uBBF8\uAC80\uC99D"}}function No(e){if(e instanceof Error)return e.stack??e.message;if(typeof e=="string")return e;try{return JSON.stringify(e)}catch{return String(e)}}function In({rect:e,kind:t,label:n}){return p("div",{class:"reticle","data-kind":t,style:{left:`${e.x}px`,top:`${e.y}px`,width:`${e.width}px`,height:`${e.height}px`},"aria-hidden":"true",children:n?p("span",{class:"reticle-label",children:n}):null})}function Ho({panelRef:e,position:t,selection:n,mode:o,connectionState:r,requestText:i,scope:s,composingRef:l,onRequestText:f,onScope:c,onSubmit:m}){let h=V(null),a=n[0],g=n.filter(x=>!x.context).length;W(()=>{h.current?.focus()},[]);let k=x=>{st({key:x.key,shiftKey:x.shiftKey,isComposing:x.isComposing},!!l.current)&&(x.preventDefault(),m())};return p("section",{ref:e,class:"strip",style:{left:`${t.left}px`,top:`${t.top}px`},"aria-label":o==="region"?"\uC601\uC5ED \uC218\uC815 \uC694\uCCAD \uC791\uC131":"\uC218\uC815 \uC694\uCCAD \uC791\uC131",children:[p("header",{class:"strip-head",children:[p("span",{class:"strip-title",children:o==="region"?"\uB4DC\uB798\uADF8\uD55C \uD654\uBA74 \uC601\uC5ED":Fo(a)}),p("span",{class:"strip-code machine",children:o==="element"?"TARGET 1":o==="multi"?`TARGETS ${n.length}/8`:o==="region"?"REGION":"PAGE"})]}),p("div",{class:"strip-body",children:[p("div",{class:"selection-readout",children:[p("strong",{children:o==="page"?"\uD604\uC7AC \uD398\uC774\uC9C0 \uCEE8\uD14D\uC2A4\uD2B8":o==="region"?"\uC601\uC5ED \uC120\uD0DD\uB428":`${n.length}\uAC1C \uB300\uC0C1 \uC120\uD0DD`}),p("span",{children:g>0?o==="region"?`\uBC94\uC704 \uC548 \uC694\uC18C ${g}\uAC1C \uD655\uC778 \uC911`:`\uC18C\uC2A4 ${g}\uAC1C \uD655\uC778 \uC911`:o==="region"?`\uBC94\uC704 \uC548 \uC694\uC18C ${n.length}\uAC1C \uD3EC\uD568`:"\uCEE8\uD14D\uC2A4\uD2B8 \uC900\uBE44\uB428"})]}),p("label",{class:"visually-hidden",for:"visual-request",children:"\uC218\uC815 \uC694\uCCAD"}),p("textarea",{ref:h,id:"visual-request",class:"request-field",value:i,maxLength:1e4,placeholder:"\uC120\uD0DD\uD55C \uD654\uBA74\uC744 \uC5B4\uB5BB\uAC8C \uBC14\uAFC0\uAE4C\uC694?",onInput:x=>f(x.currentTarget.value),onCompositionStart:()=>{l.current=!0},onCompositionEnd:()=>{l.current=!1},onKeyDown:k}),p("p",{class:"input-note",children:"Enter\uB85C \uBCF4\uB0B4\uAE30 \xB7 Shift+Enter\uB85C \uC904\uBC14\uAFC8"}),p("div",{class:"request-meta",children:[p("label",{class:"field-label",children:["\uC801\uC6A9 \uBC94\uC704",p("select",{value:s,onChange:x=>c(x.currentTarget.value),children:[p("option",{value:"instance",children:"\uC120\uD0DD\uD55C \uC778\uC2A4\uD134\uC2A4"}),p("option",{value:"component",children:"\uACF5\uC6A9 \uCEF4\uD3EC\uB10C\uD2B8"}),p("option",{value:"page",children:"\uD604\uC7AC \uD398\uC774\uC9C0"}),p("option",{value:"project",children:"\uD504\uB85C\uC81D\uD2B8 \uC804\uCCB4"})]})]}),p("button",{type:"button",class:"primary",disabled:!i.trim()||g>0||r!=="connected",onClick:m,children:"\uC694\uCCAD \uBCF4\uB0B4\uAE30"})]}),r!=="connected"?p("div",{class:"error-banner",role:"status",children:["\uC5F0\uACB0 \uC0C1\uD0DC: ",Fn[r],". Bridge \uC5F0\uACB0 \uD6C4 \uC694\uCCAD\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."]}):null]})]})}function $o({panelRef:e,position:t,task:n,followUpOpen:o,followUpText:r,composingRef:i,busyAction:s,onCancel:l,onAccept:f,onRevert:c,onToggleFollowUp:m,onFollowUpText:h,onFollowUp:a,onNewRequest:g,onDismiss:k}){let x=Se.has(n.status),E=n.changedFiles.length>0||!!n.diff,b=n.status==="review"||(n.status==="failed"||n.status==="canceled")&&E,w=n.status==="review"||n.status==="accepted"||n.status==="reverted",P=n.status==="accepted"||n.status==="reverted"||(n.status==="failed"||n.status==="canceled")&&!E,U=qo.has(n.status)||n.verification==="failed",z=U?"error":n.status==="canceled"?"canceled":w?"complete":"active",Y=n.logs.slice(-4),j=L=>{st({key:L.key,shiftKey:L.shiftKey,isComposing:L.isComposing},!!i.current)&&(L.preventDefault(),a())};return p("section",{id:"visual-task-strip",ref:e,class:"strip",style:{left:`${t.left}px`,top:`${t.top}px`},"aria-label":"\uC791\uC5C5 \uC9C4\uD589\uACFC \uAC80\uD1A0",children:[p("header",{class:"strip-head",children:[p("span",{class:"strip-title",children:I(n.requestText,72)}),p("span",{class:"strip-code machine",children:n.id?`TASK ${n.id.slice(0,8)}`:"DISPATCH"})]}),p("div",{class:"strip-body",children:[p("div",{class:"status-row",role:"status","aria-live":"polite",children:[p("span",{class:"phase-mark","data-state":n.status,"data-terminal":w?"true":"false","data-error":U?"true":"false","aria-hidden":"true"}),p("span",{class:"phase-copy",children:[p("strong",{children:qn[n.status]}),p("span",{children:n.logs.at(-1)??"Bridge\uC5D0\uC11C \uC791\uC5C5 \uC0C1\uD0DC\uB97C \uAE30\uB2E4\uB9AC\uB294 \uC911\uC785\uB2C8\uB2E4."})]}),p("span",{class:"phase-count machine",children:[n.changedFiles.length," files"]})]}),p("div",{class:"progress-track","data-active":x?"true":"false","data-outcome":z,children:p("span",{})}),Y.length>0?p("ul",{class:"log-summary","aria-label":"\uCD5C\uADFC \uC791\uC5C5 \uB85C\uADF8",children:Y.map((L,A)=>p("li",{children:L},`${A}-${L}`))}):p("p",{class:"empty-line",children:"\uC544\uC9C1 \uD45C\uC2DC\uD560 \uC791\uC5C5 \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."}),n.error?p("div",{class:"error-banner",role:"alert",children:["\uC624\uB958: ",n.error]}):null,n.status==="unsafe"?p("div",{class:"error-banner",role:"alert",children:"\uD5C8\uC6A9 \uBC94\uC704 \uBC16\uC758 \uD30C\uC77C \uB610\uB294 Git \uC0C1\uD0DC\uAC00 \uC791\uC5C5 \uC911 \uBC14\uB00C\uC5B4 \uC790\uB3D9 \uC720\uC9C0\xB7\uB418\uB3CC\uB9AC\uAE30\uB97C \uC7A0\uAC14\uC2B5\uB2C8\uB2E4. \uC544\uB798 diff\uC5D0\uB294 \uD5C8\uC6A9\uB41C \uACBD\uB85C\uB9CC \uD45C\uC2DC\uB429\uB2C8\uB2E4. \uC791\uC5C5 \uC624\uB958\uC640 Git \uC0C1\uD0DC\uB97C \uD655\uC778\uD55C \uB4A4 Git\uC5D0\uC11C \uBCC0\uACBD\uC744 \uC9C1\uC811 \uC720\uC9C0\uD558\uAC70\uB098 \uB418\uB3CC\uB9AC\uC138\uC694."}):null,n.changedFiles.length>0||b||w||n.status==="unsafe"?p(te,{children:[p("div",{class:"review-summary",children:[n.changedFiles.length>0?p("ul",{class:"file-list","aria-label":"\uBCC0\uACBD \uD30C\uC77C",children:n.changedFiles.map(L=>p("li",{children:["\u0394\xA0 ",L]},L))}):p("p",{class:"empty-line",children:"\uBCC0\uACBD \uD30C\uC77C\uC774 \uBCF4\uACE0\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4."}),p("div",{class:"verification","data-status":n.verification??"unverified",children:[p("strong",{children:"\uAC80\uC99D"}),p("span",{children:Mo(n.verification)})]})]}),p("details",{class:"diff",children:[p("summary",{children:"Unified diff \uBCF4\uAE30"}),p("pre",{class:"diff-code",children:n.diff||"Diff\uB97C \uC544\uC9C1 \uBC1B\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4."})]})]}):null,p("div",{class:"actions",children:[x?p("button",{type:"button",class:"quiet",disabled:!n.id||s,onClick:l,children:"\uC791\uC5C5 \uCDE8\uC18C"}):null,b?p(te,{children:[p("button",{type:"button",class:"primary",disabled:!n.id||s,onClick:f,children:"\uBCC0\uACBD \uC720\uC9C0"}),p("button",{type:"button",class:"secondary",disabled:!n.id||s,onClick:m,children:"\uD6C4\uC18D \uC218\uC815"}),p("button",{type:"button",class:"danger",disabled:!n.id||s,onClick:c,children:"\uB418\uB3CC\uB9AC\uAE30"})]}):null,P?p("button",{type:"button",class:"secondary",onClick:g,children:"\uC0C8 \uC694\uCCAD"}):null,x?null:p("button",{type:"button",class:"quiet",title:"\uC791\uC5C5 \uB0B4\uC5ED\uC740 \uC791\uC5C5 \uBCF4\uB4DC\uC5D0 \uB0A8\uAE30\uACE0 \uC774 \uD328\uB110\uB9CC \uB2EB\uAE30",onClick:k,children:"\uB2EB\uAE30"})]}),o&&b?p("div",{class:"follow-up",children:[p("label",{class:"field-label",for:"visual-follow-up",children:"\uD6C4\uC18D \uC218\uC815 \uB0B4\uC6A9"}),p("textarea",{id:"visual-follow-up",class:"request-field",value:r,maxLength:1e4,placeholder:"\uD604\uC7AC \uBCC0\uACBD\uC744 \uAE30\uC900\uC73C\uB85C \uCD94\uAC00\uD560 \uB0B4\uC6A9\uC744 \uC785\uB825\uD558\uC138\uC694.",onInput:L=>h(L.currentTarget.value),onCompositionStart:()=>{i.current=!0},onCompositionEnd:()=>{i.current=!1},onKeyDown:j}),p("button",{type:"button",class:"primary",disabled:!r.trim()||s,onClick:a,children:"\uD6C4\uC18D \uC694\uCCAD \uBCF4\uB0B4\uAE30"})]}):null]})]})}function Bo({host:e}){let t=se(()=>$e(location.hash).token!==null,[]),n=se(cn,[]),o=se(ln,[]),r=V(null),i=V([]),s=V(""),l=V(void 0),f=V(null),c=V(null),m=V(!1),h=V(1),a=V(null),g=V(null),k=V(null),[x,E]=N(t),[b,w]=N("element"),[P,U]=N([]),[z,Y]=N(null),[j,L]=N(null),[A,B]=N(!1),[J,dt]=N(""),[me,De]=N("instance"),[G,Mn]=N(1),[pt,ft]=N(0),[ne,Nn]=N({state:"connecting",lastSequence:0}),[ke,ze]=N("current"),[gt,mt]=N(null),[Hn,ht]=N(!1),[_,K]=N(null),[O,Z]=N(!1),[_t,Ke]=N(!1),[he,bt]=N(""),[$n,vt]=N(!1),[yt,Bn]=N({left:12,top:64,placement:"below"});i.current=P,s.current=J,h.current=G,l.current=_?.id;let Te=Q(()=>({url:location.href,pathname:location.pathname,title:document.title,viewport:{width:innerWidth,height:innerHeight},renderRevision:h.current}),[]),Ee=Q(async u=>{let d=await mn(n,u);K(v=>v?.id===u?{...v,changedFiles:d.changedFiles.length>0?d.changedFiles:v.changedFiles,diff:d.diff||v.diff,logs:d.logs.length>0?d.logs:v.logs}:v)},[n]),xt=Q(u=>{let d=Ue(u),v=u.taskId??d?.id,R=bn(u),y=vn(u),T=yn(u);if(u.type==="project.state"){let S=u.payload;typeof S?.projectId=="string"&&ze(S.projectId)}if(u.type==="command.error"){let S=u.payload;typeof S?.message=="string"&&K(F=>F&&{...F,status:F.status==="queued"&&!F.id?"failed":F.status,error:S.message});return}let H=_n(u,o,l.current);if(!(!H.accept||!H.taskId)){if(H.bind&&(l.current=H.taskId),d?.scope&&De(d.scope),u.type==="task.verification_result"){let S=u.payload,F=S.verificationStatus??S.status;typeof F=="string"&&K(X=>X&&{...X,verification:F})}(v||R||y||T.length>0||d)&&K(S=>{let F=S&&(!S.id||S.id===v)?S:{status:R??d?.status??"queued",requestText:d?.requestText??s.current,changedFiles:[],logs:[],diff:""},X=d?.error?.message??u.payload?.error?.message;return{...F,...v?{id:v}:{},status:R??d?.status??F.status,requestText:d?.requestText??F.requestText,changedFiles:T.length>0?T:d?.changedFiles?.length?d.changedFiles:F.changedFiles,logs:y?[...F.logs,y].slice(-40):F.logs,...d?.verificationStatus?{verification:d.verificationStatus}:{},...typeof X=="string"?{error:X}:{}}}),v&&(u.type==="task.diff_ready"||u.type==="task.completed"||u.type==="task.failed")&&Ee(v)}},[o,Ee]);W(()=>{let u=new Be({token:n,browserSessionId:o,getPageState:Te,onSnapshot:d=>{Nn(d),d.projectId&&ze(d.projectId)},onEvent:xt});return r.current=u,u.connect(),dn(n).then(d=>{d&&ze(d)}).catch(()=>{}),pn(n,o).then(d=>{d&&(K(v=>v||(l.current=d.id,{id:d.id,status:d.status,requestText:d.requestText,changedFiles:d.changedFiles,logs:[],diff:"",...d.verificationStatus?{verification:d.verificationStatus}:{},...d.error?.message?{error:d.error.message}:{}})),Ee(d.id))}).catch(()=>{}),()=>{u.close(),r.current=null}},[o,xt,Ee,Te,n]),W(()=>{let u=!0;return ht(!1),un(n).then(d=>{u&&mt(d)}).catch(()=>{u&&(mt(null),ht(!0))}),()=>{u=!1}},[n]),W(()=>{e.dataset.active=x?"true":"false",x&&requestAnimationFrame(()=>{k.current?.querySelector('button[aria-pressed="true"]')?.focus()})},[e,x]),W(()=>{let u,d=new MutationObserver(()=>{u!==void 0&&clearTimeout(u),u=window.setTimeout(()=>{Mn(v=>v+1)},250)});return document.body&&d.observe(document.body,{childList:!0,subtree:!0}),()=>{d.disconnect(),u!==void 0&&clearTimeout(u)}},[]),W(()=>{r.current?.send("browser.page_state",Te())},[Te,G]),W(()=>{if(ne.state!=="connected"||!_?.id||_.verification==="passed"||_.verification==="partial"||_.verification==="failed"||!Se.has(_.status)&&_.status!=="review")return;let u=f.current;if(!u){let T=`${_.id}:page-reloaded`;if(a.current===T)return;r.current?.send("verification.target_state",{taskId:_.id,state:"page-reloaded",renderRevision:G,targetCount:0,foundCount:0,changedCount:0})&&(a.current=T);return}let d=u.selection.targets;if(u.selection.mode==="page"||d.length===0||G<=u.page.renderRevision)return;let v=`${_.id}:${G}`;if(a.current===v)return;let R;try{R=Cn(d)}catch{R={state:"unverified",targetCount:d.length,foundCount:0,changedCount:0}}r.current?.send("verification.target_state",{taskId:_.id,renderRevision:G,...R})&&(a.current=v)},[ne.state,G,_?.id,_?.status,_?.verification]),W(()=>{let u=(S,F)=>{let X=I(F.map(No).join(" "),2e3);X&&r.current?.send("verification.console_events",{events:[{level:S,message:X,createdAt:new Date().toISOString()}]})},d=console.error,v=console.warn,R=(...S)=>{d.apply(console,S),u("error",S)},y=(...S)=>{v.apply(console,S),u("warning",S)},T=S=>{u("error",[S.error instanceof Error?S.error:S.message])},H=S=>{u("unhandled",[S.reason])};return console.error=R,console.warn=y,window.addEventListener("error",T),window.addEventListener("unhandledrejection",H),()=>{console.error===R&&(console.error=d),console.warn===y&&(console.warn=v),window.removeEventListener("error",T),window.removeEventListener("unhandledrejection",H)}},[]);let ie=Q(()=>{U([]),Y(null),L(null),B(!1),dt(""),Ke(!1),c.current=null},[]),_e=Q(u=>{let d=u.map(v=>({id:crypto.randomUUID(),element:v,context:null}));U(d);for(let[v,R]of d.entries())ge(R.element,v).then(y=>{U(T=>T.map(H=>H.id===R.id?{...H,context:y}:H))})},[]),Un=Q(u=>{ie(),Z(!!_),w(u),De(u==="page"?"page":"instance"),u==="page"&&(_e(Oe()),B(!0))},[_e,ie,_]);W(()=>{let u=d=>{if(d.key.toLowerCase()==="g"&&d.shiftKey&&(d.metaKey||d.ctrlKey)){d.preventDefault(),d.stopPropagation(),E(v=>!v);return}x&&(d.key==="Escape"?A?ie():E(!1):d.key==="Enter"&&b==="multi"&&i.current.length>0&&!A&&(!_||O)&&!we(d)&&(d.preventDefault(),B(!0)))};return window.addEventListener("keydown",u,!0),()=>window.removeEventListener("keydown",u,!0)},[b,x,A,ie,_,O]),W(()=>{if(!x||A||_&&Se.has(_.status)&&!O){Y(null);return}let u=y=>{if(b==="region"&&c.current){L(rt(c.current,{x:y.clientX,y:y.clientY}));return}if(b==="page"||we(y))return;let T=ct(y.clientX,y.clientY);Y(H=>H===T?H:T)},d=y=>{y.button!==0||we(y)||b==="page"||(y.preventDefault(),y.stopImmediatePropagation(),b==="region"&&(c.current={x:y.clientX,y:y.clientY},L({x:y.clientX,y:y.clientY,width:0,height:0}),U([])))},v=y=>{if(y.button!==0||we(y)||b==="page"||(y.preventDefault(),y.stopImmediatePropagation(),b!=="region"||!c.current))return;let T=rt(c.current,{x:y.clientX,y:y.clientY});if(c.current=null,T.width<5||T.height<5){L(null);return}L(T),_e(Rn(T)),B(!0)},R=y=>{if(b==="region"||b==="page"||y.button!==0||we(y))return;let T=ct(y.clientX,y.clientY);if(!T)return;if(y.preventDefault(),y.stopImmediatePropagation(),Z(!!_),!(b==="multi"||y.shiftKey)){_e([T]),B(!0);return}b!=="multi"&&w("multi");let S=i.current,F=S.find(be=>be.element===T);if(F){U(S.filter(be=>be.id!==F.id));return}if(S.length>=8)return;let X={id:crypto.randomUUID(),element:T,context:null};U([...S,X]),ge(T,S.length).then(be=>{U(zn=>zn.map(Ve=>Ve.id===X.id?{...Ve,context:be}:Ve))})};return document.addEventListener("pointermove",u,!0),document.addEventListener("pointerdown",d,!0),document.addEventListener("pointerup",v,!0),document.addEventListener("click",R,!0),()=>{document.removeEventListener("pointermove",u,!0),document.removeEventListener("pointerdown",d,!0),document.removeEventListener("pointerup",v,!0),document.removeEventListener("click",R,!0)}},[_e,b,x,A,_,O]),W(()=>{let u=0,d=()=>{cancelAnimationFrame(u),u=requestAnimationFrame(()=>ft(v=>v+1))};return window.addEventListener("resize",d),window.addEventListener("scroll",d,!0),()=>{cancelAnimationFrame(u),window.removeEventListener("resize",d),window.removeEventListener("scroll",d,!0)}},[]),W(()=>{if(!A&&!_)return;let u=g.current;if(!u)return;let d=0,v=new ResizeObserver(()=>{cancelAnimationFrame(d),d=requestAnimationFrame(()=>ft(R=>R+1))});return v.observe(u),()=>{cancelAnimationFrame(d),v.disconnect()}},[A,_?.id]);let wt=se(()=>{if(j)return j;let u=P.at(-1);return u?.element.isConnected?re(u.element):{x:12,y:52,width:1,height:1}},[pt,j,P]);Xt(()=>{if(!A&&!_)return;let u=g.current;if(!u)return;let d=k.current?.getBoundingClientRect().bottom??52;Bn(Zt(wt,{width:u.offsetWidth||408,height:u.offsetHeight||300},{width:innerWidth,height:innerHeight},12,10,d+10))},[wt,_t,A,_?.changedFiles.length,_?.diff,_?.logs.length,_?.status]);let jn=Q(async()=>{let u=J.trim();if(!u||ne.state!=="connected")return;let d=await Promise.all(i.current.map(async(y,T)=>y.context??ge(y.element,T)));if(b==="element"&&d.length===0)return;if(b==="page"&&d.length===0){let y=Oe();d=await Promise.all(y.map((T,H)=>ge(T,H)))}let v=ut({projectId:ke,browserSessionId:o,mode:b,targets:d,...j?{region:j}:{},requestText:u,scope:me,renderRevision:G});if(f.current=v,!r.current?.send("task.create",v)){Z(!1),K({status:"failed",requestText:u,changedFiles:[],logs:[],diff:"",error:"Bridge \uC5F0\uACB0\uC774 \uB04A\uC5B4\uC838 \uC694\uCCAD\uC744 \uBCF4\uB0B4\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4. \uC7AC\uC5F0\uACB0 \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD558\uC138\uC694."});return}K({status:"queued",requestText:u,changedFiles:[],logs:["\uC694\uCCAD\uC744 Bridge writer queue\uC5D0 \uC804\uB2EC\uD588\uC2B5\uB2C8\uB2E4."],diff:""}),Z(!1),B(!1)},[o,ne.state,b,ke,j,G,J,me]),We=Q(async u=>{if(_?.id){vt(!0);try{await hn(n,_.id,u),K(d=>d&&{...d,status:u==="accept"?"accepted":u==="revert"?"reverted":"canceled",logs:[...d.logs,u==="accept"?"\uD604\uC7AC working tree \uBCC0\uACBD\uC744 \uC720\uC9C0\uD588\uC2B5\uB2C8\uB2E4.":u==="revert"?"\uCD5C\uC2E0 task \uBCC0\uACBD\uC744 \uB418\uB3CC\uB838\uC2B5\uB2C8\uB2E4.":"\uC791\uC5C5 \uCDE8\uC18C\uB97C \uC694\uCCAD\uD588\uC2B5\uB2C8\uB2E4."]})}catch(d){K(v=>v&&{...v,error:d instanceof Error?d.message:"\uC791\uC5C5 \uBA85\uB839\uC744 \uC644\uB8CC\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4."})}finally{vt(!1)}}},[_?.id,n]),On=Q(async()=>{if(!_?.id||!he.trim())return;let u=f.current;if(!u){let R=Oe(),y=await Promise.all(R.map((T,H)=>ge(T,H)));u=ut({projectId:ke,browserSessionId:o,mode:"page",targets:y,requestText:_.requestText,scope:"page",renderRevision:G})}let d={...u,page:{...u.page,url:location.href,pathname:location.pathname,title:document.title,viewport:{width:innerWidth,height:innerHeight},devicePixelRatio:devicePixelRatio||1,scroll:{x:scrollX,y:scrollY},renderRevision:G},request:{text:he.trim(),scope:me}};if(!r.current?.send("task.follow_up",{taskId:_.id,parentTaskId:_.id,contextBundle:d})){K(R=>R&&{...R,error:"Bridge\uAC00 \uC5F0\uACB0\uB418\uC9C0 \uC54A\uC544 \uD6C4\uC18D \uC694\uCCAD\uC744 \uBCF4\uB0B4\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4."});return}K({status:"queued",requestText:he.trim(),changedFiles:[],logs:[`${_.id.slice(0,8)} task\uB97C \uAE30\uC900\uC73C\uB85C \uD6C4\uC18D \uC694\uCCAD\uC744 \uBCF4\uB0C8\uC2B5\uB2C8\uB2E4.`],diff:""}),Z(!1),bt(""),Ke(!1),f.current=d},[o,he,ke,G,me,_?.id,_?.requestText]),Dn=P.filter(u=>u.element.isConnected).map(u=>({item:u,rect:re(u.element)})),St=z?.isConnected&&!P.some(u=>u.element===z)?re(z):null,kt=b==="element"?"\uC694\uC18C\uB97C \uD074\uB9AD\uD558\uC138\uC694 \xB7 Shift+Click\uC740 \uC5EC\uB7EC \uC694\uC18C":b==="multi"?`\uC694\uC18C\uB97C \uC120\uD0DD\uD558\uC138\uC694 (${P.length}/8) \xB7 Enter\uB85C \uC694\uCCAD \uC791\uC131`:b==="region"?"\uC694\uCCAD\uD560 \uC601\uC5ED\uC744 \uB4DC\uB798\uADF8\uD558\uC138\uC694":"\uD604\uC7AC \uD398\uC774\uC9C0\uC758 \uC8FC\uC694 \uCEE8\uD14D\uC2A4\uD2B8\uB97C \uC218\uC9D1\uD588\uC2B5\uB2C8\uB2E4";return p("div",{class:"visual-shell","data-open":x?"true":"false",children:[p("nav",{ref:k,class:"toolbar","aria-label":"Visual Bridge \uB3C4\uAD6C",children:[p("span",{class:"brand-mark",children:"Visual Bridge"}),p("div",{class:"mode-tabs",children:[["element","\uC694\uC18C"],["multi","\uC5EC\uB7EC \uC694\uC18C"],["region","\uC601\uC5ED"],["page","\uD398\uC774\uC9C0"]].map(([u,d])=>p("button",{type:"button","aria-pressed":b===u?"true":"false",disabled:!!(_&&Se.has(_.status)&&!O),onClick:()=>Un(u),children:d},u))}),b==="multi"&&P.length>0&&!A&&(!_||O)?p("button",{type:"button",class:"primary",onClick:()=>B(!0),children:"\uC694\uCCAD \uC791\uC131"}):null,_&&!A?p("button",{type:"button",class:"task-toggle","aria-controls":"visual-task-strip","aria-expanded":O?"false":"true",title:O?"\uC228\uAE34 \uC791\uC5C5 \uD328\uB110 \uC5F4\uAE30":"\uC791\uC5C5\uC740 \uACC4\uC18D \uC9C4\uD589\uD558\uACE0 \uD328\uB110\uB9CC \uC228\uAE30\uAE30",onClick:()=>{if(O){Z(!1);return}ie(),Z(!0)},children:O?"\uC791\uC5C5 \uBCF4\uAE30":"\uC791\uC5C5 \uC228\uAE30\uAE30"}):null,gt?p("a",{class:"viewer-link",href:gt,target:"_blank",rel:"noopener","aria-label":"\uC804\uCCB4\uD654\uBA74 \uC791\uC5C5 \uBCF4\uB4DC\uB97C \uC0C8 \uD0ED\uC5D0\uC11C \uC5F4\uAE30",title:"\uC804\uCCB4\uD654\uBA74 \uC791\uC5C5 \uBCF4\uB4DC \uC5F4\uAE30",children:"\uC791\uC5C5 \uBCF4\uB4DC \u2197"}):p("button",{type:"button",class:"viewer-link",disabled:!0,title:Hn?"\uC791\uC5C5 \uBCF4\uB4DC \uC5F0\uACB0\uC744 \uC900\uBE44\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4":"\uC791\uC5C5 \uBCF4\uB4DC \uC900\uBE44 \uC911",children:"\uC791\uC5C5 \uBCF4\uB4DC"}),p("span",{class:"connection",role:"status",children:[p("span",{class:"state-dot","data-state":ne.state,"aria-hidden":"true"}),p("span",{class:"connection-label connection-label-full",children:Fn[ne.state]}),p("span",{class:"connection-label connection-label-compact",children:Ao[ne.state]})]})]}),!A&&(!_||O||!Se.has(_.status))&&St?p(In,{rect:St,kind:"hover"}):null,b!=="page"&&b!=="region"&&(!_||!O||A)?Dn.map(({item:u,rect:d},v)=>p(In,{rect:d,kind:"selected",...b==="multi"?{label:String(v+1)}:{}},u.id)):null,j&&(!_||!O||A)?p("div",{class:"region-box",style:{left:`${j.x}px`,top:`${j.y}px`,width:`${j.width}px`,height:`${j.height}px`},"aria-hidden":"true",children:p("span",{class:"region-box-label machine",children:"\uC601\uC5ED"})}):null,A&&(!_||O)?p(Ho,{panelRef:g,position:yt,selection:P,mode:b,connectionState:ne.state,requestText:J,scope:me,composingRef:m,onRequestText:dt,onScope:De,onSubmit:()=>{jn()}}):null,_&&!O?p($o,{panelRef:g,position:yt,task:_,followUpOpen:_t,followUpText:he,composingRef:m,busyAction:$n,onCancel:()=>{We("cancel")},onAccept:()=>{We("accept")},onRevert:()=>{We("revert")},onToggleFollowUp:()=>Ke(u=>!u),onFollowUpText:bt,onFollowUp:()=>{On()},onNewRequest:()=>{K(null),Z(!1),ie()},onDismiss:()=>{l.current=void 0,K(null),Z(!1),ie()}}):null,!A&&(!_||O)?p("div",{class:"selection-hint",children:kt}):null,p("div",{class:"visually-hidden","aria-live":"polite",children:_?`${qn[_.status]}. ${_.logs.at(-1)??""}`:kt}),p("span",{class:"visually-hidden",children:"Overlay \uC5F4\uAE30 \uB610\uB294 \uB2EB\uAE30: Command \uB610\uB294 Control + Shift + G"})]})}function An(){if(document.getElementById(le)||!document.body)return;let e=document.createElement("div");e.id=le,e.dataset.visualBridgeIgnore="true",e.dataset.active="false";let t=e.attachShadow({mode:"open"}),n=document.createElement("style");n.textContent=Ln;let o=document.createElement("div");o.dataset.visualBridgeIgnore="true",t.append(n,o),document.body.append(e),Ut(p(Bo,{host:e}),o)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",An,{once:!0}):An();
|