From 114eea225747cdba656f77578c496bfee83d6c3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=B8=80=E5=AF=B0?= <zhaoyihuan@bytedance.com>
Date: Fri, 13 Mar 2026 19:28:04 +0800
Subject: [PATCH] optimize for vnc window

---
 ui/src/ui/app-render.ts                     |  1 +
 ui/src/ui/components/claw-computer-panel.ts | 65 ++++++++++++++++++++-
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts
index 5285fbc147b..8c7f7df4dac 100644
--- a/ui/src/ui/app-render.ts
+++ b/ui/src/ui/app-render.ts
@@ -1504,6 +1504,7 @@ export function renderApp(state: AppViewState) {
               <claw-computer-panel
                 .vncUrl=${state.settings.vncWsUrl}
                 .password=${state.settings.vncPassword}
+                @close=${() => state.toggleClawComputer()}
                 style="flex: 1; min-height: 0;"
               ></claw-computer-panel>
             </div>
diff --git a/ui/src/ui/components/claw-computer-panel.ts b/ui/src/ui/components/claw-computer-panel.ts
index 1de639515ad..be19518dbe5 100644
--- a/ui/src/ui/components/claw-computer-panel.ts
+++ b/ui/src/ui/components/claw-computer-panel.ts
@@ -68,8 +68,57 @@ export class ClawComputerPanel extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
+
+      /* macOS-style window border wrapper */
+      padding: 6px;
+      padding-top: 36px; /* Extra space for title bar controls */
+      background: color-mix(
+        in srgb,
+        var(--bg-accent),
+        black 10%
+      ); /* Ensure darker than container */
+      border-radius: 6px;
+      box-shadow:
+        0 0 0 1px var(--border),
+        0 20px 50px rgba(0, 0, 0, 0.4);
+      box-sizing: border-box;
+      position: relative;
     }
-    .screen > div {
+
+    /* Window controls (fake traffic lights) */
+    .window-controls {
+      position: absolute;
+      top: 12px;
+      left: 12px;
+      display: flex;
+      gap: 8px;
+      z-index: 20;
+    }
+
+    .window-control {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      cursor: pointer;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      transition:
+        transform 0.1s,
+        opacity 0.2s;
+    }
+    .window-control:hover {
+      opacity: 0.8;
+      transform: scale(1.1);
+    }
+
+    .window-control.maximize {
+      background-color: #27c93f;
+      border-color: #1aab29;
+    }
+    .window-control.close {
+      background-color: #ff5f56;
+      border-color: #e0443e;
+    }
+    .screen > div:not(.window-controls) {
       /* Fix for noVNC wrapper div */
       display: flex !important;
       align-items: center !important;
@@ -88,6 +137,8 @@ export class ClawComputerPanel extends LitElement {
       outline: none;
       display: block; /* Remove inline gap */
       margin: auto !important;
+      border-radius: 0;
+      box-shadow: none;
     }
     .status-overlay {
       position: absolute;
@@ -111,12 +162,22 @@ export class ClawComputerPanel extends LitElement {
       <div class="container">
         ${!this.isConnected ? html`<div class="status-overlay">${this.status}</div>` : null}
         <div class="screen-container">
-          <div ${ref(this.screenRef)} class="screen"></div>
+          <div ${ref(this.screenRef)} class="screen">
+            <div class="window-controls">
+              <div class="window-control close" @click=${this.handleClose}></div>
+              <div class="window-control maximize" @click=${this.toggleFullscreen}></div>
+            </div>
+          </div>
         </div>
       </div>
     `;
   }
 
+  private handleClose = () => {
+    // Dispatch event to parent to close the panel
+    this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
+  };
+
   private connect = async () => {
     const url = this.vncUrl || "ws://localhost:8081";
     if (this.rfb) {