From da3cfc199a4def2d914ae8818064959e7c441863 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 18:59:33 +0800
Subject: [PATCH] add some animate

---
 ui/src/ui/app-render.ts | 59 +++++++++++++++++++++--------------------
 1 file changed, 30 insertions(+), 29 deletions(-)

diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts
index 74ca445b8b0..18fc0610d9a 100644
--- a/ui/src/ui/app-render.ts
+++ b/ui/src/ui/app-render.ts
@@ -1474,35 +1474,36 @@ export function renderApp(state: AppViewState) {
             })}
             </div>
 
-            ${
-              state.showClawComputer
-                ? html`
-                    <resizable-divider
-                      mode="pixels"
-                      side="right"
-                      orientation="vertical"
-                      .initialWidth=${state.clawComputerWidth}
-                      .minWidth=${300}
-                      .maxWidth=${3000}
-                      @resize=${(e: CustomEvent) => {
-                        if (e.detail.width !== undefined) {
-                          state.setClawComputerWidth(e.detail.width);
-                        }
-                      }}
-                    ></resizable-divider>
-                    <div class="claw-computer-panel" style="width: ${state.clawComputerWidth}px;">
-                      <div class="claw-computer-header">
-                        <span>🖥️ 远程桌面</span>
-                        <button class="claw-computer-close" @click=${() => state.toggleClawComputer()}>×</button>
-                      </div>
-                      <claw-computer-panel
-                        .vncUrl=${state.settings.vncWsUrl}
-                        .password=${state.settings.vncPassword}
-                      ></claw-computer-panel>
-                    </div>
-                  `
-                : nothing
-            }
+            <resizable-divider
+              mode="pixels"
+              side="right"
+              orientation="vertical"
+              .initialWidth=${state.clawComputerWidth}
+              .minWidth=${300}
+              .maxWidth=${3000}
+              @resize=${(e: CustomEvent) => {
+                if (e.detail.width !== undefined) {
+                  state.setClawComputerWidth(e.detail.width);
+                }
+              }}
+              style=${state.showClawComputer ? "" : "display: none;"}
+            ></resizable-divider>
+            <div 
+              class="claw-computer-panel" 
+              style="
+                width: ${state.clawComputerWidth}px;
+                margin-right: ${state.showClawComputer ? 0 : -state.clawComputerWidth}px;
+                opacity: ${state.showClawComputer ? 1 : 0};
+                transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                overflow: hidden;
+                flex-shrink: 0;
+              "
+            >
+              <claw-computer-panel
+                .vncUrl=${state.settings.vncWsUrl}
+                .password=${state.settings.vncPassword}
+              ></claw-computer-panel>
+            </div>
           </div>
         `
             : nothing