602 lines
37 KiB
JavaScript
602 lines
37 KiB
JavaScript
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./rfb-DJnrkuu4.js","./rolldown-runtime-DkW27tQK.js"])))=>i.map(i=>d[i]);
|
|
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{Nr as t,Pr as n,er as r,hi as i,mi as a}from"./control-ui-foundation-CeFMP1Ly.js";import{Ja as o,Ka as s,bc as ee,fs as c,mc as te,ml as ne,ms as l,pl as re,ps as u,vr as ie,yr as ae}from"./control-ui-core-pH6nakZ-.js";import{G as d,J as f,W as p,X as oe,Z as se,at as m,lt as h,rt as g}from"./lit-runtime-BEtFSUCp.js";import{Bt as ce,Ht as _,Lt as v,Rt as y,qt as b,w as le,y as x,zt as ue}from"./control-ui-core-Br5DB0Zj.js";import{Ea as S,Ta as C,ei as de,fo as fe,oo as pe,po as me,ti as he}from"./control-ui-boot-Cdpgu1Gm.js";import{C as ge,w as _e}from"./control-ui-boot-J-x6DHHT.js";import{n as ve,t as ye}from"./scrollbar-styles-BYLTmsP_.js";import{n as be,r as w,t as xe}from"./dock-layout-controller-uvZhgHTs.js";function Se(e,t=globalThis.location?.href){let n=new URL(t??globalThis.location.href,globalThis.location?.href);n.protocol===`http:`?n.protocol=`ws:`:n.protocol===`https:`&&(n.protocol=`wss:`);let r=new URL(e,n);if(r.protocol===`http:`?r.protocol=`ws:`:r.protocol===`https:`&&(r.protocol=`wss:`),r.protocol!==`ws:`&&r.protocol!==`wss:`)throw Error(`Desktop observer URL must use WebSocket transport`);return r.toString()}var T,E;function D(){return(D=e((()=>{n(),T=async()=>(await t(()=>import(`./rfb-DJnrkuu4.js`),__vite__mapDeps([0,1]),import.meta.url)).default,E=class{constructor(e,t=e=>new WebSocket(e),n=T){this.rfbConstructor=e,this.createWebSocket=t,this.loadRfb=n}async connect(e){let t=this.rfbConstructor??await this.loadRfb(),n=Se(e.wsUrl,e.gatewayUrl),r=this.createWebSocket(n),i={};r.addEventListener(`close`,e=>{i={code:e.code,reason:e.reason}});let a=new t(e.target,r,e.credentials?{credentials:e.credentials}:void 0);a.background=e.background??getComputedStyle(e.target).backgroundColor,a.viewOnly=e.viewOnly,a.scaleViewport=e.scaleViewport??!0,a.addEventListener(`connect`,()=>e.onConnect?.()),a.addEventListener(`disconnect`,()=>e.onDisconnect?.(i)),a.addEventListener(`securityfailure`,t=>{let n=t.detail??{};e.onSecurityFailure?.(n)});let o=t=>{e.target.querySelector(`canvas`)?.dispatchEvent(t)},s=e=>new KeyboardEvent(e.type,{key:e.key,code:e.code,location:e.location,ctrlKey:e.ctrlKey,shiftKey:e.shiftKey,altKey:e.altKey,metaKey:e.metaKey,repeat:e.repeat,isComposing:e.isComposing,bubbles:!0,cancelable:!0});return{disconnect:()=>a.disconnect(),setScaleViewport:e=>{a.scaleViewport=e},sendKeyboardEvent:e=>o(s(e)),sendText:e=>{for(let t=0;t<e.length;t+=1)o(new KeyboardEvent(`keydown`,{key:e.charAt(t),code:`Unidentified`,bubbles:!0,cancelable:!0}))},sendBackspace:()=>{for(let e of[`keydown`,`keyup`])o(new KeyboardEvent(e,{key:`Backspace`,code:`Backspace`,bubbles:!0,cancelable:!0}))}}}}})))()}async function O(e,t){let n;try{n=(await e?.request(`sessions.describe`,{key:t}))?.session??void 0}catch{}return _e(n)}var k;function A(){return(A=e((()=>{s(),ee(),ae(),ge(),k=class{constructor(e,t,n){this.host=e,this.currentTarget=t,this.onTargetChange=n,this.refreshId=0,new ie(e).effect(()=>e.documentMode&&e.available&&e.sessionKey!==null&&e.requestedSource===null?e.client:null,t=>t.addEventListener(t=>{let n=t.event===`sessions.changed`?o(t.payload):null;n&&te(n.key,e.sessionKey)&&this.refresh()}))}invalidate(){this.refreshId+=1}async refresh(){let{client:e,sessionKey:t}=this.host;if(!e||!t)return;let n=++this.refreshId,r=await O(e,t);n!==this.refreshId||!this.host.isConnected||e!==this.host.client||t!==this.host.sessionKey||!this.host.documentMode||!this.host.available||this.host.requestedSource!==null||r!==null&&r===this.currentTarget()||this.onTargetChange(r)}}})))()}async function Ce(e){let t=e.source??(e.resolvedSessionTarget===void 0?e.sessionKey===null?null:await O(e.client,e.sessionKey):e.resolvedSessionTarget);return t!==null&&e.environments.some(e=>e.id===t)?t:null}function j(){return(j=e((()=>{A()})))()}function we(e){let t=f`
|
|
<div class="desktop-stage">
|
|
<div class="desktop-surface"></div>
|
|
${e.state===`connecting`?S(`desktop`,b(`desktop.connecting`),!1,!0):d}
|
|
<textarea
|
|
class="desktop-keyboard-input"
|
|
inputmode="text"
|
|
autocomplete="off"
|
|
autocapitalize="off"
|
|
spellcheck="false"
|
|
tabindex="-1"
|
|
aria-label=${b(`desktop.keyboardInput`)}
|
|
.value=${e.keyboardInputValue}
|
|
@keydown=${e.onKeyboardEvent}
|
|
@keyup=${e.onKeyboardEvent}
|
|
@input=${e.onKeyboardInput}
|
|
></textarea>
|
|
<nav class="desktop-touch-toolbar" aria-label=${b(`desktop.touchControls`)}>
|
|
<button
|
|
class="desktop-touch-action"
|
|
type="button"
|
|
aria-label=${b(e.controlling?`desktop.switchToViewOnly`:`desktop.takeControl`)}
|
|
aria-pressed=${e.controlling?`true`:`false`}
|
|
@click=${e.onControlToggle}
|
|
>
|
|
<span class="desktop-touch-action__icon" aria-hidden="true">
|
|
${e.controlling?v.hand:v.eye}
|
|
</span>
|
|
<span class="desktop-touch-action__label">
|
|
${b(e.controlling?`desktop.control`:`desktop.viewOnly`)}
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="desktop-touch-action"
|
|
type="button"
|
|
aria-label=${b(`desktop.keyboard`)}
|
|
@click=${e.onKeyboardFocus}
|
|
>
|
|
<span class="desktop-touch-action__icon" aria-hidden="true">${M}</span>
|
|
<span class="desktop-touch-action__label">${b(`desktop.keyboard`)}</span>
|
|
</button>
|
|
<button
|
|
class="desktop-touch-action"
|
|
type="button"
|
|
aria-label=${b(e.scaleViewport?`desktop.actualSize`:`desktop.fitScreen`)}
|
|
aria-pressed=${e.scaleViewport?`true`:`false`}
|
|
@click=${e.onScaleToggle}
|
|
>
|
|
<span class="desktop-touch-action__icon" aria-hidden="true">
|
|
${e.scaleViewport?v.minimize:v.maximize}
|
|
</span>
|
|
<span class="desktop-touch-action__label">${b(`desktop.fit`)}</span>
|
|
</button>
|
|
<button
|
|
class="desktop-touch-action"
|
|
type="button"
|
|
aria-label=${b(`desktop.back`)}
|
|
@click=${e.onClose}
|
|
>
|
|
<span class="desktop-touch-action__icon" aria-hidden="true">${v.arrowLeft}</span>
|
|
<span class="desktop-touch-action__label">${b(`desktop.back`)}</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
`;return f`
|
|
<section class="desktop-document" aria-label=${b(`desktop.title`)}>
|
|
<div class="desktop-content">
|
|
${e.notice}
|
|
${e.state===`picker`?e.picker:e.state===`inventory-error`||e.state===`disconnected`?e.recovery:e.state===`credentials`?e.credentials:t}
|
|
</div>
|
|
</section>
|
|
`}var M;function N(){return(N=e((()=>{p(),_(),ue(),y(),C(),M=ce(oe`
|
|
<rect width="20" height="14" x="2" y="5" rx="2" />
|
|
<path d="M6 9h.01" />
|
|
<path d="M10 9h.01" />
|
|
<path d="M14 9h.01" />
|
|
<path d="M18 9h.01" />
|
|
<path d="M6 13h.01" />
|
|
<path d="M10 13h.01" />
|
|
<path d="M14 13h.01" />
|
|
<path d="M18 13h.01" />
|
|
<path d="M8 17h8" />
|
|
`)})))()}function Te(e,t,n=!1){me(i({kind:`desktop`,source:t,control:n},e))}function P(){return(P=e((()=>{a(),fe()})))()}var F,I;function L(){return(L=e((()=>{F=`________________`,I=class{constructor(e){this.options=e,this.value=F}focus(){let e=this.options.input();e?.focus({preventScroll:!0}),e?.setSelectionRange(e.value.length,e.value.length)}reset(e){this.value=F;let t=e??this.options.input();t&&(t.value=F)}handleKeyboardEvent(e){let t=this.options.connection();!this.options.controlling()||!t?.sendKeyboardEvent||(t.sendKeyboardEvent(e),e.preventDefault())}handleInput(e){let t=e.currentTarget;if(!this.options.controlling()){this.reset(t);return}let n=t.value,r=this.options.connection(),i=0,a=Math.min(this.value.length,n.length);for(;i<a&&this.value.charAt(i)===n.charAt(i);)i+=1;for(let e=this.value.length-i;e>0;--e)r?.sendBackspace?.();if(r?.sendText?.(n.slice(i)),n.length<1||n.length>32){this.reset(t);return}this.value=n}}})))()}function Ee(e){if(!e||typeof e!=`object`||!(`details`in e))return null;let t=e.details;if(!t||typeof t!=`object`||!(`code`in t)||t.code!==R)return null;let n=`auth`in t?t.auth:void 0;return n===`vnc-password`||n===`ard-account`?n:null}var R;function z(){return(z=e((()=>{R=`DESKTOP_CREDENTIALS_REQUIRED`})))()}var B;function V(){return(V=e((()=>{_(),l(),he(),B=class extends de{constructor(e,t){super(e,{...t,buttonClass:`bp-icon desktop-fullscreen-button`,buttonSelector:`.desktop-fullscreen-button`,iconClass:`desktop-fullscreen-icon`,enterLabel:()=>b(`desktop.enterFullscreen`),exitLabel:()=>b(`desktop.exitFullscreen`),unavailableLabel:()=>b(`desktop.fullscreenUnavailable`),errorMessage:e=>b(`desktop.errors.fullscreenFailed`,{error:c(e)})})}}})))()}var H;function U(){return(U=e((()=>{H=pe({storageKey:`openclaw.desktopPanel`,minHeight:240,minWidth:380,defaultDock:`right`,supportedDocks:[`bottom`,`right`],defaultHeight:420,defaultWidth:560})})))()}function De(e){return f`
|
|
<div class="desktop-status">
|
|
${e.inventoryError?d:f`<div>
|
|
${b(`desktop.disconnected`,{reason:e.reason??b(`desktop.unknownReason`)})}
|
|
</div>`}
|
|
<button class="desktop-button desktop-button--primary" type="button" @click=${e.onRetry}>
|
|
${b(e.inventoryError?`common.retry`:`desktop.reconnect`)}
|
|
</button>
|
|
</div>
|
|
`}function W(){return(W=e((()=>{p(),_()})))()}var G;function K(){return(K=e((()=>{p(),G=h`
|
|
/* The inset sizes this to the viewport on its own. Do not reintroduce viewport
|
|
height units: Android WebView hosts the Control UI in a container that
|
|
resolves dvh/vh/svh/lvh to 0, which collapses the viewer to a blank page. */
|
|
.desktop-document {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
background: var(--bg);
|
|
}
|
|
.desktop-document .desktop-content {
|
|
width: 100%;
|
|
}
|
|
.desktop-document .desktop-stage {
|
|
width: 100%;
|
|
}
|
|
.desktop-touch-toolbar {
|
|
position: absolute;
|
|
z-index: 3;
|
|
right: 12px;
|
|
bottom: max(12px, env(safe-area-inset-bottom));
|
|
left: 12px;
|
|
display: flex;
|
|
width: max-content;
|
|
max-width: calc(100% - 24px);
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
margin: 0 auto;
|
|
padding: 5px;
|
|
border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
|
|
border-radius: 14px;
|
|
background: color-mix(in srgb, var(--bg) 84%, transparent);
|
|
box-shadow: 0 8px 28px rgb(0 0 0 / 35%);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
.desktop-touch-action {
|
|
display: inline-flex;
|
|
min-width: 48px;
|
|
height: 44px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
border: 0;
|
|
border-radius: 10px;
|
|
padding: 0 9px;
|
|
background: transparent;
|
|
color: var(--text);
|
|
font: inherit;
|
|
font-size: 11px;
|
|
}
|
|
.desktop-touch-action[aria-pressed="true"] {
|
|
color: var(--accent);
|
|
background: color-mix(in srgb, var(--accent) 16%, transparent);
|
|
}
|
|
.desktop-touch-action:focus-visible {
|
|
outline: 2px solid var(--focus, var(--accent));
|
|
outline-offset: 1px;
|
|
}
|
|
.desktop-touch-action__icon {
|
|
display: inline-flex;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.desktop-touch-action__icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
stroke-width: 1.8;
|
|
}
|
|
.desktop-keyboard-input {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 1px;
|
|
height: 1px;
|
|
border: 0;
|
|
padding: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
@media (max-width: 430px) {
|
|
.desktop-touch-action {
|
|
min-width: 44px;
|
|
padding: 0 7px;
|
|
}
|
|
.desktop-touch-action__label {
|
|
display: none;
|
|
}
|
|
}
|
|
`})))()}var q;function J(){return(J=e((()=>{p(),q=h`
|
|
.desktop-apps {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
.desktop-app-button,
|
|
.desktop-toolbar-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
padding: 5px 7px;
|
|
background: transparent;
|
|
color: var(--muted);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
.desktop-app-button {
|
|
color: var(--text);
|
|
}
|
|
.desktop-app-button:hover:not(:disabled),
|
|
.desktop-toolbar-action:hover:not(:disabled) {
|
|
background: color-mix(in srgb, var(--text) 8%, transparent);
|
|
color: var(--text);
|
|
}
|
|
.desktop-app-button:focus-visible,
|
|
.desktop-toolbar-action:focus-visible {
|
|
outline: 2px solid var(--focus, var(--accent));
|
|
outline-offset: 1px;
|
|
}
|
|
.desktop-app-button:disabled,
|
|
.desktop-toolbar-action:disabled {
|
|
cursor: default;
|
|
opacity: 0.55;
|
|
}
|
|
.desktop-app-button__icon {
|
|
display: inline-flex;
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
.desktop-app-button__icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
stroke-width: 1.75;
|
|
}
|
|
.desktop-app-button__icon--launching {
|
|
animation: desktop-app-launch 900ms linear infinite;
|
|
}
|
|
@keyframes desktop-app-launch {
|
|
50% {
|
|
opacity: 0.6;
|
|
transform: rotate(180deg) scale(0.92);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.desktop-app-button__icon--launching {
|
|
animation: none;
|
|
}
|
|
}
|
|
`})))()}var Y,X;function Z(){return(Z=e((()=>{p(),ye(),w(),K(),J(),Y=h`
|
|
.bp--embedded {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.bp--bottom {
|
|
left: var(--shell-nav-width, 0);
|
|
right: calc(var(--oc-terminal-reserve-right, 0px) + var(--oc-browser-reserve-right, 0px));
|
|
bottom: calc(var(--oc-terminal-reserve-bottom, 0px) + var(--oc-browser-reserve-bottom, 0px));
|
|
}
|
|
.bp--right {
|
|
top: var(--shell-topbar-height, 0);
|
|
right: calc(var(--oc-terminal-reserve-right, 0px) + var(--oc-browser-reserve-right, 0px));
|
|
bottom: calc(var(--oc-terminal-reserve-bottom, 0px) + var(--oc-browser-reserve-bottom, 0px));
|
|
}
|
|
.bp-title {
|
|
min-width: 0;
|
|
}
|
|
.bp-icon[aria-disabled="true"] {
|
|
opacity: 0.4;
|
|
}
|
|
.desktop-fullscreen-icon > svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
.bp:fullscreen {
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
.desktop-content {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
}
|
|
.desktop-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid var(--border, #262b34);
|
|
}
|
|
.desktop-toolbar--connection {
|
|
min-height: 42px;
|
|
gap: 12px;
|
|
}
|
|
.desktop-toolbar__spacer {
|
|
flex: 1;
|
|
}
|
|
.desktop-button {
|
|
border: 1px solid var(--border, #262b34);
|
|
border-radius: 6px;
|
|
padding: 5px 10px;
|
|
background: transparent;
|
|
color: var(--text, #d7dae0);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
}
|
|
.desktop-button:hover:not(:disabled) {
|
|
background: color-mix(in srgb, var(--text, #d7dae0) 10%, transparent);
|
|
}
|
|
.desktop-button--primary {
|
|
border-color: var(--accent, #ff5c5c);
|
|
color: var(--accent, #ff5c5c);
|
|
}
|
|
.desktop-button:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
.desktop-session {
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
color: var(--muted);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: 11px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.desktop-note {
|
|
padding: 7px 12px;
|
|
border-bottom: 1px solid var(--border, #262b34);
|
|
color: var(--muted, #8a919e);
|
|
font-size: 12px;
|
|
}
|
|
.desktop-note--error {
|
|
color: var(--danger, #ff6b6b);
|
|
}
|
|
.desktop-picker,
|
|
.desktop-status {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
overflow: auto;
|
|
padding: 14px;
|
|
background: var(--panel);
|
|
}
|
|
.desktop-status {
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
color: var(--muted, #8a919e);
|
|
}
|
|
.desktop-credentials {
|
|
display: flex;
|
|
width: min(320px, 100%);
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
text-align: left;
|
|
}
|
|
.desktop-credentials__label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
color: var(--text, #d7dae0);
|
|
font-size: 12px;
|
|
}
|
|
.desktop-credentials__input {
|
|
border: 1px solid var(--border, #262b34);
|
|
border-radius: 6px;
|
|
padding: 7px 9px;
|
|
background: var(--bg, #111318);
|
|
color: var(--text, #d7dae0);
|
|
font: inherit;
|
|
}
|
|
.desktop-environment {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px;
|
|
border: 1px solid var(--border, #262b34);
|
|
border-radius: 8px;
|
|
}
|
|
.desktop-environment__details {
|
|
display: flex;
|
|
flex: 1;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
.desktop-environment__id {
|
|
overflow: hidden;
|
|
color: var(--text, #d7dae0);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.desktop-environment__meta,
|
|
.desktop-environment__sessions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: var(--muted, #8a919e);
|
|
font-size: 11px;
|
|
}
|
|
.desktop-stage {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: var(--bg);
|
|
}
|
|
.desktop-surface {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--bg);
|
|
}
|
|
/* View-only affordance: clicking anywhere on the desktop takes control. */
|
|
.desktop-stage__take-control {
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
cursor: var(--cursor-action, pointer);
|
|
}
|
|
.desktop-stage__take-control:focus-visible {
|
|
outline: 2px solid var(--accent, #ff5c5c);
|
|
outline-offset: -2px;
|
|
}
|
|
`,X=[be,q,Y,G,ve]})))()}function Oe(e){return b(e===`browser`?`browser.title`:`terminal.title`)}function ke(e){return e===`browser`?v.chrome:v.terminal}function Ae(){return(Ae=e((()=>{_(),y()})))()}function je(e){return e.id===`gateway`?{kind:`host`}:e.id.startsWith(`node:`)&&e.id.length>5?{kind:`node`,nodeId:e.id.slice(5)}:{kind:`environment`,environmentId:e.id}}function Me(e){return f`
|
|
<header class="rail-header bp-header">
|
|
<div class="rail-header__title bp-title">${b(`desktop.title`)}</div>
|
|
<div class="rail-header__actions bp-actions">
|
|
<button
|
|
class="rail-header__action bp-icon ${e.dock===`bottom`?`is-active`:``}"
|
|
type="button"
|
|
title=${b(`desktop.dockBottom`)}
|
|
aria-label=${b(`desktop.dockBottom`)}
|
|
@click=${()=>e.onDock(`bottom`)}
|
|
>
|
|
${v.panelBottomOpen}
|
|
</button>
|
|
<button
|
|
class="rail-header__action bp-icon ${e.dock===`right`?`is-active`:``}"
|
|
type="button"
|
|
title=${b(`desktop.dockRight`)}
|
|
aria-label=${b(`desktop.dockRight`)}
|
|
@click=${()=>e.onDock(`right`)}
|
|
>
|
|
${v.panelRightOpen}
|
|
</button>
|
|
<button
|
|
class="rail-header__action bp-icon bp-open-window"
|
|
type="button"
|
|
title=${b(`desktop.openWindow`)}
|
|
aria-label=${b(`desktop.openWindow`)}
|
|
@click=${e.onOpenWindow}
|
|
>
|
|
${v.externalLink}
|
|
</button>
|
|
${e.fullscreenControl}
|
|
<button
|
|
class="rail-header__action bp-icon"
|
|
type="button"
|
|
title=${b(`desktop.hide`)}
|
|
aria-label=${b(`desktop.hide`)}
|
|
@click=${e.onClose}
|
|
>
|
|
${v.x}
|
|
</button>
|
|
</div>
|
|
</header>
|
|
`}function Ne(e){return f`
|
|
<div class="desktop-toolbar">
|
|
<span>${b(`desktop.pickerTitle`)}</span>
|
|
<span class="desktop-toolbar__spacer"></span>
|
|
<button
|
|
class="desktop-button"
|
|
type="button"
|
|
?disabled=${e.loading}
|
|
@click=${e.onRefresh}
|
|
>
|
|
${e.loading?b(`desktop.refreshing`):b(`desktop.refresh`)}
|
|
</button>
|
|
</div>
|
|
<div class="desktop-picker">
|
|
${e.loading&&e.environments.length===0?S(`desktop`,b(`desktop.loading`)):e.environments.length===0?f`<div class="desktop-status">${b(`desktop.empty`)}</div>`:e.environments.map(t=>Pe(t,e.onConnect))}
|
|
</div>
|
|
`}function Pe(e,t){let n=e.worker,r=je(e);return f`
|
|
<div class="desktop-environment">
|
|
<div class="desktop-environment__details">
|
|
<div class="desktop-environment__id">
|
|
${r.kind===`host`?b(`desktop.thisMachine`):e.id}
|
|
</div>
|
|
<div class="desktop-environment__meta">
|
|
<span>${n?.state??e.status}</span>
|
|
</div>
|
|
${n&&n.attachedSessionIds.length>0?f`<div class="desktop-environment__sessions">
|
|
${n.attachedSessionIds.map(e=>f`<span class="desktop-session">${e}</span>`)}
|
|
</div>`:d}
|
|
</div>
|
|
<button
|
|
class="desktop-button desktop-button--primary"
|
|
type="button"
|
|
@click=${()=>t(e.id)}
|
|
>
|
|
${b(`desktop.connect`)}
|
|
</button>
|
|
</div>
|
|
`}function Fe(e){return f`
|
|
<div class="desktop-status">
|
|
<form class="desktop-credentials" @submit=${e.onSubmit}>
|
|
<div>${b(e.ardAccount?`desktop.accountPrompt`:`desktop.passwordPrompt`)}</div>
|
|
${e.ardAccount?f`<label class="desktop-credentials__label">
|
|
${b(`desktop.usernameLabel`)}
|
|
<input
|
|
class="desktop-credentials__input"
|
|
name="username"
|
|
type="text"
|
|
autocomplete="off"
|
|
.value=${e.username}
|
|
required
|
|
/>
|
|
</label>`:d}
|
|
<label class="desktop-credentials__label">
|
|
${b(e.ardAccount?`desktop.accountPasswordLabel`:`desktop.passwordLabel`)}
|
|
<input
|
|
class="desktop-credentials__input"
|
|
name="password"
|
|
type="password"
|
|
autocomplete="off"
|
|
required
|
|
/>
|
|
</label>
|
|
<button class="desktop-button desktop-button--primary" type="submit">
|
|
${b(`desktop.connect`)}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
`}function Ie(e){return f`
|
|
<div class="desktop-toolbar desktop-toolbar--connection">
|
|
${e.showApps&&e.desktopApps.length>0?f`<div class="desktop-apps">
|
|
${e.desktopApps.map(t=>{let n=e.launchingApp===t,r=Oe(t);return f`<button
|
|
class="desktop-app-button"
|
|
type="button"
|
|
title=${r}
|
|
aria-label=${r}
|
|
aria-busy=${n?`true`:`false`}
|
|
?disabled=${!e.environmentSelected||n}
|
|
@click=${()=>e.onLaunch(t)}
|
|
>
|
|
<span
|
|
class="desktop-app-button__icon ${n?`desktop-app-button__icon--launching`:``}"
|
|
aria-hidden="true"
|
|
>
|
|
${ke(t)}
|
|
</span>
|
|
<span>${r}</span>
|
|
</button>`})}
|
|
</div>`:d}
|
|
<span class="desktop-toolbar__spacer"></span>
|
|
<button
|
|
class="desktop-toolbar-action"
|
|
type="button"
|
|
title=${b(`desktop.disconnect`)}
|
|
aria-label=${b(`desktop.disconnect`)}
|
|
@click=${e.onDisconnect}
|
|
>
|
|
${b(`desktop.disconnect`)}
|
|
</button>
|
|
</div>
|
|
<div class="desktop-stage">
|
|
<div class="desktop-surface"></div>
|
|
${e.controlling?d:f`<button
|
|
class="desktop-stage__take-control"
|
|
type="button"
|
|
title=${b(`desktop.takeControl`)}
|
|
aria-label=${b(`desktop.takeControl`)}
|
|
@click=${e.onTakeControl}
|
|
></button>`}
|
|
${e.state===`connecting`?S(`desktop`,b(`desktop.connecting`),!1,!0):d}
|
|
</div>
|
|
`}function Le(e,t){return e?f`<div class="desktop-note desktop-note--error" role="alert">${e}</div>`:t?f`<div class="desktop-note" role="status">${t}</div>`:d}function Re(){return(Re=e((()=>{p(),_(),y(),C(),Ae()})))()}var Q;function $(){return($=e((()=>{p(),se(),_(),l(),ne(),w(),le(),D(),j(),N(),P(),L(),z(),V(),U(),W(),Z(),Re(),A(),Q=class extends re{constructor(...e){super(...e),this.client=null,this.available=!1,this.suppressed=!1,this.documentMode=!1,this.requestedSource=null,this.sessionKey=null,this.documentControl=!1,this.basePath=``,this.embedded=!1,this.presented=!1,this.refreshOnPresentation=!0,this.onDocumentClose=null,this.desktopClientFactory=()=>new E,this.environments=[],this.loading=!1,this.state=`picker`,this.environmentId=null,this.source=null,this.controlling=!1,this.errorText=null,this.noticeText=null,this.disconnectedReason=null,this.launchingApp=null,this.launchErrorText=null,this.desktopApps=[],this.scaleViewport=!0,this.connection=null,this.pendingConnection=null,this.operationId=0,this.launchOperationId=0,this.controlTakeoverRecoveryUsed=!1,this.sourceSelection=`pending`,this.sessionSource=new k(this,()=>this.environmentId,e=>{this.returnToPicker(),this.sourceSelection=`pending`,this.refreshEnvironments(void 0,e)}),this.mobileKeyboard=new I({connection:()=>this.connection,controlling:()=>this.controlling,input:()=>this.shadowRoot?.querySelector(`.desktop-keyboard-input`)}),this.dockLayout=new xe(this,{layout:H,reservationPrefix:`desktop`,isAvailable:()=>this.available,isFullscreen:()=>this.fullscreenMode.active}),this.fullscreenMode=new B(this,{section:()=>this.renderRoot.querySelector(`section.bp`),onChange:()=>this.dockLayout.syncReservation()}),this.onToggleRequest=e=>this.handleToggleRequest(e)}static{this.styles=X}connectedCallback(){super.connectedCallback(),this.embedded||window.addEventListener(x,this.onToggleRequest),this.dockLayout.setSuppressed(this.suppressed),(this.documentMode&&this.available||!this.embedded&&this.dockLayout.open)&&this.refreshEnvironments()}disconnectedCallback(){window.removeEventListener(x,this.onToggleRequest),this.disconnectConnection(),this.credentials=void 0,super.disconnectedCallback()}updated(e){if(e.has(`embedded`)&&(this.embedded?window.removeEventListener(x,this.onToggleRequest):window.addEventListener(x,this.onToggleRequest)),e.has(`suppressed`)){let e=this.dockLayout.setSuppressed(this.suppressed);this.suppressed?this.returnToPicker():e&&this.refreshEnvironments()}let t=e.has(`client`)||e.has(`available`),n=t||e.has(`embedded`)||e.has(`presented`)||e.has(`documentMode`)||e.has(`requestedSource`)||e.has(`sessionKey`)||e.has(`documentControl`);(this.documentMode||this.embedded)&&n?(this.returnToPicker(),this.sourceSelection=`pending`,this.available&&(!this.embedded||this.presented&&this.refreshOnPresentation)&&this.refreshEnvironments()):t&&(!this.available&&this.dockLayout.open?(this.dockLayout.hideWithoutPersisting(),this.returnToPicker()):this.available&&this.dockLayout.restoreOpenState()&&this.refreshEnvironments()),this.dockLayout.syncReservation()}handleToggleRequest(e){if(this.documentMode)return;let t=e instanceof CustomEvent&&typeof e.detail==`object`&&e.detail!==null?e.detail:null;if(this.embedded){if(!this.presented)return;if(t?.open===!1){this.returnToPicker();return}if(!this.available||!this.client)return;t?.environmentId?this.connectRequestedEnvironment(t.environmentId):(this.returnToPicker(),this.sourceSelection=`picker`,this.refreshEnvironments());return}if((t?.dock===`right`||t?.dock===`bottom`)&&this.dockLayout.setDock(t.dock,!1),t?.open===!1){this.closePanel();return}if(!this.available)return;let n=this.dockLayout.open;this.dockLayout.setOpen(!0),t?.environmentId?this.connectRequestedEnvironment(t.environmentId):n?t?.open!==!0&&this.closePanel():this.refreshEnvironments()}closePanel(){this.returnToPicker(),this.dockLayout.setOpen(!1)}returnToPicker(){this.sessionSource.invalidate(),this.disconnectConnection(),this.clearLaunchState(),this.state=`picker`,this.environmentId=null,this.source=null,this.credentials=void 0,this.credentialAuth=void 0,this.desktopApps=[],this.controlling=!1,this.disconnectedReason=null}disconnectConnection(){this.operationId+=1,this.pendingConnection=null;let e=this.connection;this.connection=null,e?.disconnect(),this.mobileKeyboard.reset()}clearLaunchState(){this.launchOperationId+=1,this.launchingApp=null,this.launchErrorText=null}async refreshEnvironments(e,t){let n=this.client;if(!n||!this.available||this.embedded&&!this.presented)return!1;let r=e??++this.operationId;this.loading=!0,this.errorText=null;let i=!1;try{let e=await n.request(`environments.list`,{});if(r!==this.operationId)return!1;this.environments=e.environments.filter(e=>e.desktop===!0),i=!0}catch(e){r===this.operationId&&(this.errorText=b(`desktop.errors.listFailed`,{error:c(e)}),(this.requestedSource!==null||this.sessionKey!==null)&&(this.state=`inventory-error`))}finally{r===this.operationId&&(this.loading=!1)}return i&&await this.resolveRequestedSource(r,t),i}async resolveRequestedSource(e,t){if(this.sourceSelection!==`pending`||e!==this.operationId)return;this.sourceSelection=`resolved`;let n=await Ce({client:this.client,source:this.requestedSource,sessionKey:this.documentMode?this.sessionKey:null,environments:this.environments,resolvedSessionTarget:t});if(e===this.operationId){if(n===null){(this.requestedSource!==null||this.sessionKey!==null)&&(this.state=`picker`,this.noticeText=b(`desktop.sourceUnavailable`));return}await this.connectEnvironment(n,this.documentControl)}}async connectRequestedEnvironment(e){this.returnToPicker(),this.sourceSelection=`resolved`,this.environmentId=e,this.state=`connecting`;let t=this.operationId,n=await this.refreshEnvironments(t);if(t===this.operationId){if(!n){this.state=`inventory-error`;return}this.connectEnvironment(e,!1)}}async connectEnvironment(e,t,n={}){let r=this.client;if(!r||!this.available||this.embedded&&!this.presented)return;this.environmentId!==e&&(this.clearLaunchState(),this.credentials=void 0,this.credentialAuth=void 0),this.desktopApps=[...this.environments.find(t=>t.id===e)?.worker?.desktopApps??[]],this.disconnectConnection();let i=this.operationId,a=je(this.environments.find(t=>t.id===e)??{id:e});this.environmentId=e,this.source=a,this.controlling=t,this.state=`connecting`,this.errorText=null,this.disconnectedReason=null,n.preserveNotice||(this.noticeText=null),this.controlTakeoverRecoveryUsed=n.takeoverRecovery===!0;try{let n=a.kind!==`environment`&&this.credentials?.password&&(this.credentialAuth===`vnc-password`||this.credentialAuth===`ard-account`&&this.credentials.username)?this.credentials:void 0,o=await r.request(`desktop.observe`,{source:a,control:t,...n?{credentials:n}:{}});if(i!==this.operationId)return;this.controlling=o.control;let s=o.preauthenticated?void 0:o.vncPassword?{password:o.vncPassword}:o.auth===`vnc-password`?this.credentials:void 0;if(o.auth===`vnc-password`&&o.preauthenticated!==!0&&!s?.password){this.credentialAuth=`vnc-password`,this.pendingConnection={environmentId:e,control:t,observed:o,operationId:i},this.state=`credentials`;return}o.auth===`ard-account`&&(this.credentialAuth=`ard-account`),await this.connectObserved({environmentId:e,control:t,observed:o,operationId:i},o.auth===`vnc-password`?s:void 0)}catch(n){let r=Ee(n);if(r&&i===this.operationId){this.credentialAuth=r,this.pendingConnection={environmentId:e,control:t,operationId:i},this.state=`credentials`;return}this.failConnection(i,n)}}async connectObserved(e,t){let n=this.client;if(!(!n||e.operationId!==this.operationId)){this.state=`connecting`;try{if(await this.updateComplete,e.operationId!==this.operationId)return;let r=this.shadowRoot?.querySelector(`.desktop-surface`);if(!r)throw Error(`Desktop render target is unavailable`);let i=this.desktopClientFactory(),a=getComputedStyle(r).backgroundColor,o=await i.connect({background:a,wsUrl:e.observed.wsPath,gatewayUrl:n.gatewayUrl,credentials:t,viewOnly:!e.observed.control,scaleViewport:this.scaleViewport,target:r,onConnect:()=>{e.operationId===this.operationId&&(this.state=`connected`)},onDisconnect:t=>{e.operationId===this.operationId&&this.handleDesktopDisconnect(e.environmentId,t.code,t.reason)},onSecurityFailure:t=>{e.operationId===this.operationId&&(this.errorText=b(`desktop.errors.securityFailed`,{reason:u(t.reason,b(`desktop.unknownReason`))}))}});if(e.operationId!==this.operationId){o.disconnect();return}this.connection=o}catch(t){this.failConnection(e.operationId,t)}}}failConnection(e,t){e===this.operationId&&(this.state=`disconnected`,this.disconnectedReason=c(t),this.clearLaunchState())}handleCredentialsSubmit(e){e.preventDefault();let t=this.pendingConnection;if(!t||t.operationId!==this.operationId)return;let n=new FormData(e.currentTarget),r=n.get(`password`);if(typeof r!=`string`||r.length===0)return;let i=n.get(`username`);if(this.credentialAuth===`ard-account`&&(typeof i!=`string`||i.trim().length===0))return;let a={...typeof i==`string`&&i.trim()?{username:i.trim()}:{},password:r};this.credentials=a,this.pendingConnection=null,t.observed?this.connectObserved({...t,observed:t.observed},a):this.connectEnvironment(t.environmentId,t.control)}handleDesktopDisconnect(e,t,n){if(this.connection=null,this.clearLaunchState(),t===1008&&this.credentialAuth===`ard-account`){this.credentials=this.credentials?.username?{username:this.credentials.username}:void 0,this.pendingConnection={environmentId:e,control:this.controlling,operationId:this.operationId},this.state=`credentials`,this.errorText=b(`desktop.errors.securityFailed`,{reason:u(n,b(`desktop.unknownReason`))});return}if(t===4e3&&n===`control-taken`&&this.controlling&&!this.controlTakeoverRecoveryUsed){this.noticeText=b(`desktop.controlTaken`),this.connectEnvironment(e,!1,{preserveNotice:!0,takeoverRecovery:!0});return}this.state=`disconnected`,this.disconnectedReason=u(n,t?b(`desktop.closeCode`,{code:String(t)}):``)||null}async launchApp(e){let t=this.client,n=this.source;if(!t||this.embedded&&!this.presented||n?.kind!==`environment`||this.state!==`connecting`&&this.state!==`connected`||!this.desktopApps.includes(e)||this.launchingApp===e)return;let r=++this.launchOperationId;this.launchingApp=e,this.launchErrorText=null;try{if(await t.request(`desktop.launch`,{source:n,app:e}),r!==this.launchOperationId||n!==this.source)return;this.launchingApp=null}catch(e){if(r!==this.launchOperationId||n!==this.source)return;this.launchingApp=null,this.launchErrorText=c(e)}}render(){if(!this.available)return d;let e=Le(this.fullscreenMode.errorText??this.launchErrorText??this.errorText,this.noticeText),t=Ne({environments:this.environments,loading:this.loading,onRefresh:()=>void this.refreshEnvironments(),onConnect:e=>void this.connectEnvironment(e,!1)}),n=Fe({ardAccount:this.credentialAuth===`ard-account`,username:this.credentials?.username??``,onSubmit:e=>this.handleCredentialsSubmit(e)}),r=De({inventoryError:this.state===`inventory-error`,reason:this.disconnectedReason,onRetry:()=>{if(this.state===`inventory-error`&&(this.documentMode||!this.environmentId)){this.sourceSelection!==`picker`&&(this.sourceSelection=`pending`),this.state=`picker`,this.refreshEnvironments();return}if(this.environmentId){if(this.state===`inventory-error`){this.connectRequestedEnvironment(this.environmentId);return}this.connectEnvironment(this.environmentId,this.controlling)}}}),i=Ie({state:this.state,controlling:this.controlling,desktopApps:this.desktopApps,environmentSelected:this.environmentId!==null,launchingApp:this.launchingApp,showApps:this.source?.kind===`environment`,onLaunch:e=>void this.launchApp(e),onTakeControl:()=>{this.environmentId&&this.connectEnvironment(this.environmentId,!0)},onDisconnect:()=>this.returnToPicker()});if(this.documentMode)return we({state:this.state,controlling:this.controlling,scaleViewport:this.scaleViewport,keyboardInputValue:this.mobileKeyboard.value,notice:e,picker:t,credentials:n,recovery:r,onControlToggle:()=>{this.environmentId&&this.connectEnvironment(this.environmentId,!this.controlling)},onKeyboardFocus:()=>this.mobileKeyboard.focus(),onKeyboardEvent:e=>this.mobileKeyboard.handleKeyboardEvent(e),onKeyboardInput:e=>this.mobileKeyboard.handleInput(e),onScaleToggle:()=>{this.scaleViewport=!this.scaleViewport,this.connection?.setScaleViewport?.(this.scaleViewport)},onClose:()=>this.onDocumentClose?.()});if(!this.embedded&&!this.dockLayout.open)return d;let a=this.dockLayout.dock,o=this.embedded||this.fullscreenMode.active?``:a===`bottom`?`height:${this.dockLayout.height}px`:`width:${this.dockLayout.width}px`;return f`
|
|
<section
|
|
class="bp bp--${this.embedded?`embedded`:a}"
|
|
style=${o}
|
|
aria-label=${b(`desktop.title`)}
|
|
>
|
|
${this.embedded?d:this.dockLayout.renderResizer(`bp`,b(`desktop.resize`))}
|
|
${this.embedded?d:Me({dock:a,fullscreenControl:this.fullscreenMode.renderButton(),onDock:e=>this.dockLayout.setDock(e),onOpenWindow:()=>Te(this.basePath,this.environmentId,this.controlling),onClose:()=>this.closePanel()})}
|
|
<div class="desktop-content">
|
|
${e}
|
|
${this.state===`picker`?t:this.state===`inventory-error`||this.state===`disconnected`?r:this.state===`credentials`?n:i}
|
|
</div>
|
|
</section>
|
|
`}},r([m({attribute:!1})],Q.prototype,`client`,void 0),r([m({type:Boolean})],Q.prototype,`available`,void 0),r([m({type:Boolean})],Q.prototype,`suppressed`,void 0),r([m({type:Boolean})],Q.prototype,`documentMode`,void 0),r([m({attribute:!1})],Q.prototype,`requestedSource`,void 0),r([m({attribute:!1})],Q.prototype,`sessionKey`,void 0),r([m({type:Boolean})],Q.prototype,`documentControl`,void 0),r([m({attribute:!1})],Q.prototype,`basePath`,void 0),r([m({type:Boolean})],Q.prototype,`embedded`,void 0),r([m({type:Boolean})],Q.prototype,`presented`,void 0),r([m({type:Boolean})],Q.prototype,`refreshOnPresentation`,void 0),r([m({attribute:!1})],Q.prototype,`onDocumentClose`,void 0),r([g()],Q.prototype,`environments`,void 0),r([g()],Q.prototype,`loading`,void 0),r([g()],Q.prototype,`state`,void 0),r([g()],Q.prototype,`environmentId`,void 0),r([g()],Q.prototype,`source`,void 0),r([g()],Q.prototype,`controlling`,void 0),r([g()],Q.prototype,`errorText`,void 0),r([g()],Q.prototype,`noticeText`,void 0),r([g()],Q.prototype,`disconnectedReason`,void 0),r([g()],Q.prototype,`launchingApp`,void 0),r([g()],Q.prototype,`launchErrorText`,void 0),r([g()],Q.prototype,`desktopApps`,void 0),r([g()],Q.prototype,`scaleViewport`,void 0),customElements.get(`openclaw-desktop-panel`)||customElements.define(`openclaw-desktop-panel`,Q)})))()}$();
|
|
//# sourceMappingURL=desktop-panel-D3-Tqe5h.js.map
|