Merge pull request 'feat: 添加看门狗与重连机制' (#7) from fix/issue-32 into main

Reviewed-on: #7

html/src/components/terminal/xterm/index.ts

@@ -82,6 +82,7 @@ export class Xterm {
     private textDecoder = new TextDecoder();
     private written = 0;
     private pending = 0;
+    private attachWatchdogTick = 0;
 
     private terminal: Terminal;
     private fitAddon = new FitAddon();
@@ -112,6 +113,9 @@ export class Xterm {
     private containerStatus = "";
     private attachCommandSent = false;
     private attachCommandSentAt?: number;
+    private ptyOutputReceived = false;
+    private attachWatchdogId?: NodeJS.Timeout;
+    private commandLoadInFlight = false;
     constructor(
         private options: XtermOptions,
         private sendCb: () => void
@@ -122,6 +126,10 @@ export class Xterm {
             d.dispose();
         }
         this.disposables.length = 0;
+        if (this.attachWatchdogId) {
+            clearInterval(this.attachWatchdogId);
+            this.attachWatchdogId = undefined;
+        }
     }
 
     @bind
@@ -276,6 +284,8 @@ export class Xterm {
     @bind
     public connect() {
         this.socket = new WebSocket(this.options.wsUrl, ['tty']);
+        this.ptyOutputReceived = false;
+        this.attachWatchdogTick = 0;
         const { socket, register } = this;
 
         socket.binaryType = 'arraybuffer';
@@ -283,11 +293,31 @@ export class Xterm {
         register(addEventListener(socket, 'message', this.onSocketData as EventListener));
         register(addEventListener(socket, 'close', this.onSocketClose as EventListener));
         register(addEventListener(socket, 'error', () => (this.doReconnect = false)));
+
+    }
+
+    @bind
+    private startAttachWatchdog() {
+        if (this.attachWatchdogId) return;
+        this.attachWatchdogId = setInterval(() => {
+            this.attachWatchdogTick++;
+            if (this.connectStatus) return;
+            this.tryExecuteAttachCommand();
+            if (!this.connectStatus) this.loadCommandOnce();
+        }, 2000);
+    }
+
+    @bind
+    private stopAttachWatchdog() {
+        if (!this.attachWatchdogId) return;
+        clearInterval(this.attachWatchdogId);
+        this.attachWatchdogId = undefined;
     }
 
     @bind
     private onSocketOpen() {
         console.log('[webTerminal] WebSocket opened, containerStatus:', this.containerStatus, 'connectStatus:', this.connectStatus, 'attachCommandSent:', this.attachCommandSent);
+        console.log('[webTerminal] onSocketOpen - postAttachCommand:', this.postAttachCommand?.length || 0, 'ptyOutputReceived:', this.ptyOutputReceived, 'commandLoadInFlight:', this.commandLoadInFlight);
 
         const { textEncoder, terminal, overlayAddon } = this;
         const msg = JSON.stringify({ AuthToken: this.token, columns: terminal.cols, rows: terminal.rows });
@@ -310,6 +340,10 @@ export class Xterm {
         this.doReconnect = this.reconnect;
         this.initListeners();
         terminal.focus();
+
+        // Check if  can execute pending command
+        console.log('[webTerminal] onSocketOpen - calling tryExecuteAttachCommand()');
+        this.tryExecuteAttachCommand();
     }
 
     @bind
@@ -340,6 +374,45 @@ export class Xterm {
         }
     }
 
+    @bind
+    private tryExecuteAttachCommand() {
+        if (this.connectStatus) {
+            console.log('[Xterm] tryExecuteAttachCommand: already connected');
+            return;
+        }
+        if (!this.postAttachCommand || this.postAttachCommand.length === 0) {
+            console.log('[Xterm] tryExecuteAttachCommand: no command available');
+            return;
+        }
+        if (this.socket?.readyState !== WebSocket.OPEN) {
+            console.log('[Xterm] tryExecuteAttachCommand: WebSocket not ready, state:', this.socket?.readyState);
+            return;
+        }
+        if (!this.ptyOutputReceived) {
+            console.log('[Xterm] tryExecuteAttachCommand: ttyd not ready yet (waiting for first output)');
+            return; // Wait for TTY readiness confirm via output
+        }
+
+        // 如果已发送没连上，允许超时后重发
+        const shouldResend =
+            this.attachCommandSent &&
+            this.attachCommandSentAt !== undefined &&
+            Date.now() - this.attachCommandSentAt > 5000;
+        if (this.attachCommandSent && !shouldResend) {
+            console.log('[Xterm] tryExecuteAttachCommand: command already sent, not resending yet');
+            return;
+        }
+
+        const cmd = this.postAttachCommand[0];
+        if (cmd) {
+            console.log('[Xterm] ✅ All conditions met, executing attach command...');
+            this.sendData(cmd + "\n");
+            this.attachCommandSent = true;
+            this.attachCommandSentAt = Date.now();
+            console.log('[Xterm] Command sent at:', new Date(this.attachCommandSentAt).toISOString());
+        }
+    }
+
     /**
      * 获取 URL 查询参数
      */
@@ -363,6 +436,12 @@ export class Xterm {
      */
     @bind
     public loadCommandOnce() {
+        if (this.commandLoadInFlight) {
+            console.log('[Xterm] loadCommandOnce: command load already in flight, skipping');
+            return;
+        }
+        console.log('[Xterm] loadCommandOnce: starting command load...');
+        this.commandLoadInFlight = true;
         this.loadCommandWithRetry(0);
     }
 
@@ -375,6 +454,7 @@ export class Xterm {
         const maxRetries = 5;
         const { params, baseUrl } = this.getUrlParams();
 
+        console.log(`[Xterm] loadCommandWithRetry: attempt ${retryCount + 1}/${maxRetries}, fetching command from ${baseUrl}/devcontainer/command?${params}`);
         fetch(`${baseUrl}/devcontainer/command?${params}`)
             .then(response => {
                 if (!response.ok) {
@@ -393,14 +473,10 @@ export class Xterm {
                 }
                 
                 // 执行连接容器的命令（只执行一次）
-                const parts = data.command.split('\n');
-                if (parts[0] && !this.connectStatus) {
-                    console.log('[Xterm] Successfully loaded connection command, executing...');
-                    this.sendData(parts[0]+"\n");
-                    this.attachCommandSent = true;
-                    this.attachCommandSentAt = Date.now();
-                }
-                this.postAttachCommand = parts;
+                console.log('[Xterm] Command loaded successfully, attempting to execute...');
+                this.postAttachCommand = data.command.split('\n');
+                this.tryExecuteAttachCommand();
+                this.commandLoadInFlight = false;
             })
             .catch(error => {
                 console.error(`[Xterm] Error loading command (attempt ${retryCount + 1}/${maxRetries}):`, error);
@@ -415,12 +491,26 @@ export class Xterm {
                 } else {
                     console.error('[Xterm] Failed to load command after all retries');
                     // 可以在这里显示错误提示给用户
+                    this.commandLoadInFlight = false;
                 }
             });
     }
     @bind
     public changeContainerStatus(v: string){
+        const oldStatus = this.containerStatus;
         this.containerStatus = v;
+        
+        const { options } = this.getUrlParams();
+        if (options.get('type') !== 'docker') return;
+        
+        const statusNum = parseInt(v);
+        const oldStatusNum = oldStatus ? parseInt(oldStatus) : -1;
+        
+        // 检测到状态 9（已停止）：启动 watchdog，等待容器启动
+        if (statusNum === 9 && !this.connectStatus) {
+            console.log('[Xterm] Container is stopped (status 9), starting attach watchdog to wait for startup');
+            this.startAttachWatchdog();
+        }
     }
 
     @bind
@@ -465,48 +555,85 @@ export class Xterm {
         const data = rawData.slice(1);
         switch (cmd) {
             case Command.OUTPUT:
+                if (!this.ptyOutputReceived) {
+                    this.ptyOutputReceived = true;
+                    console.log('[Xterm] OUTPUT: ttyd is now ready (received first output), attempting to execute attach command');
+                    this.tryExecuteAttachCommand();
+                }
+
                 const decodedData = textDecoder.decode(data);
-                console.log('[ttyd] output:', decodedData);
+                const pure = this.stripAnsi(decodedData);
                 const compactOutput = decodedData.replace(/\s/g, '');
                 const { options } = this.getUrlParams();
                 if (options.get('type') === 'docker') {
-                    // 保存host的标题
-                    if (this.hostTitle === ''){
-                        this.hostTitle = compactOutput;
+                    // 保存 host的标题
+                    const pureContent = this.stripAnsi(decodedData).trim();
+                    if (!this.connectStatus && !this.attachCommandSent && this.hostTitle === '' && pureContent.length > 0) {
+                        this.hostTitle = pureContent;
                     }
-                    // 检测是否退出devcontainer，标题等于host的标题
-                    if (this.connectStatus && compactOutput.includes(this.hostTitle)){
+                    
+                    // 检测是否退出 devcontainer：
+                    if (this.connectStatus && this.hostTitle && pureContent === this.hostTitle) {
                         this.connectStatus = false;
                         this.connectionMessageBuffer = '';
                         this.attachCommandSent = false;
                         this.attachCommandSentAt = undefined;
                         this.postAttachCommandStatus = false;
-                    }
-                    // 检测连接完成：监听 "Successfully connected to the devcontainer" 消息
-                    // 这条消息是由连接命令中的 echo "$WEB_TERMINAL_HELLO" 输出的
-                    if (!this.connectStatus) {
-                        const sanitizedOutput = this.stripAnsi(decodedData).replace(/\r/g, '\n');
-                        const combinedOutput = this.connectionMessageBuffer + sanitizedOutput;
-                        const segments = combinedOutput.split(/\n/);
-                        this.connectionMessageBuffer = segments.pop() ?? '';
-                        const hasSuccessLine = segments.some(line => line.trim() === 'Successfully connected to the devcontainer');
-                        if (hasSuccessLine) {
-                            this.connectStatus = true;
-                            this.connectionMessageBuffer = '';
-                            this.attachCommandSentAt = undefined;
-                            console.log('[Xterm] Connection established, enabling terminal input');
-                            // 确保终端输入已启用
-                            this.terminal.options.disableStdin = false;
+                        if (this.socket?.readyState === WebSocket.OPEN) {
+                            this.ptyOutputReceived = true;
+                        } else {
+                            this.ptyOutputReceived = false;
                         }
+                        this.startAttachWatchdog();
                     }
-                    // 连接完成之前，过滤掉 docker exec 命令的标题输出（ANSI 码和 docker-H 开头的输出）
-                    if ( 
-                        !(this.connectStatus === false && 
-                            (textDecoder.decode(data).includes('\x1b') || 
-                            textDecoder.decode(data).replace(/\s/g, '').includes('docker-H')))
-                    ){
-                        this.writeFunc(data);
+
+                    if (this.connectStatus) {
+                        try {
+                            this.writeFunc(data);
+                        } catch (e) {
+                             console.error('[Xterm] writeFunc error:', e);
+                        }
+                    } else {
+                        // 未连接状态：缓冲所有输出
+                        this.connectionMessageBuffer += decodedData;
+
+                        // docker exec 失败时（容器不存在/未运行），只重置状态，让 watchdog 定时重试
+                        const lower = pure.toLowerCase();
+                        const isDockerExecError =
+                            lower.includes('error response from daemon') &&
+                            (lower.includes('is not running') || lower.includes('no such container') || lower.includes('cannot connect'));
+                        if (isDockerExecError) {
+                            this.attachCommandSent = false;
+                            this.attachCommandSentAt = undefined;
+                            this.connectionMessageBuffer = '';
+                        }
+                        
+                        const successMarker = 'Successfully connected to the devcontainer';
+                        // 尝试在 buffer 中查找成功标记
+                        const markerIndex = this.connectionMessageBuffer.indexOf(successMarker);
+
+                        if (markerIndex !== -1) {
+                            console.log('[Xterm] ✅ Connection established! Found success marker in buffer');
+                            this.connectStatus = true;
+                            this.terminal.options.disableStdin = false;
+                            this.stopAttachWatchdog();
+                            
+                            const validOutput = this.connectionMessageBuffer.substring(markerIndex);
+                            this.writeData(validOutput);
+                            this.connectionMessageBuffer = '';
+                        } else {
+                            // 调试：如果命令已发送但还没连接成功，检查 buffer 内容
+                            if (this.attachCommandSent && !this.connectStatus && this.connectionMessageBuffer.length > 0) {
+                                const bufferPreview = this.connectionMessageBuffer.substring(0, 200).replace(/\n/g, '\\n').replace(/\r/g, '\\r');
+                                console.log('[Xterm] Waiting for connection success... buffer length:', this.connectionMessageBuffer.length, 'preview:', bufferPreview);
+                            }
+                        } 
+                        
+                        if (this.connectionMessageBuffer.length > 20000) {
+                            this.connectionMessageBuffer = this.connectionMessageBuffer.slice(-5000);
                     }
+                    }
+
                     // 连接完成且出现容器的标题，且没有执行过postAttach命令
                     if (this.connectStatus && compactOutput.includes(this.workdir) && !this.postAttachCommandStatus){
                         console.log('[Xterm] Detected workdir in output, executing postAttachCommand');
@@ -525,6 +652,12 @@ export class Xterm {
                 document.title = this.title;
                 break;
             case Command.SET_PREFERENCES:
+                console.log('[Xterm] Received SET_PREFERENCES, ptyOutputReceived:', this.ptyOutputReceived);
+                if (!this.ptyOutputReceived) {
+                    this.ptyOutputReceived = true;
+                    console.log('[Xterm] SET_PREFERENCES: ttyd is now ready, attempting to execute attach command');
+                    this.tryExecuteAttachCommand();
+                }
                 this.applyPreferences({
                     ...this.options.clientOptions,
                     ...JSON.parse(textDecoder.decode(data)),
@@ -704,6 +837,12 @@ export class Xterm {
     }
 
     private stripAnsi(input: string): string {
-        return input.replace(/\u001B\[[0-9;?]*[ -\/]*[@-~]/g, '').replace(/\u0007/g, '');
+        // CSI: ESC [ ... command
+        // OSC: ESC ] ... (BEL or ESC \)
+        // BEL: \u0007
+        return input
+            .replace(/\u001B\][^\u0007\u001B]*(?:\u0007|\u001B\\)/g, '') // OSC ... BEL or ST
+            .replace(/\u001B\[[0-9;?]*[ -\/]*[@-~]/g, '') // CSI
+            .replace(/\u0007/g, ''); // stray BEL
     }
 }