From 4be856caf327f7d00dc650578dc778d6df6372d0 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 16:58:34 +0800
Subject: [PATCH] change size for remote desktop

---
 ui/src/ui/app-render.ts                   | 14 +++++++++-
 ui/src/ui/app.ts                          | 11 ++++++++
 ui/src/ui/components/resizable-divider.ts | 31 ++++++++++++++++++++++-
 3 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts
index 871f4b55244..7c03998a07f 100644
--- a/ui/src/ui/app-render.ts
+++ b/ui/src/ui/app-render.ts
@@ -591,7 +591,7 @@ export function renderApp(state: AppViewState) {
             : nothing
         }
         ${
-          state.tab === "config"
+          state.tab === "config" || state.tab === "chat"
             ? nothing
             : html`<section class="content-header">
               <div>
@@ -1317,7 +1317,17 @@ export function renderApp(state: AppViewState) {
         ${
           state.tab === "chat"
             ? html`
+            <div style="flex: 1; display: flex; flex-direction: row; min-height: 0; overflow: hidden;">
               <div style="flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 12px 16px 32px; overflow: hidden; gap: 24px;">
+                <section class="content-header">
+                  <div>
+                    ${renderChatSessionSelect(state)}
+                  </div>
+                  <div class="page-meta">
+                    ${state.lastError ? html`<div class="pill danger">${state.lastError}</div>` : nothing}
+                    ${renderChatControls(state)}
+                  </div>
+                </section>
 
           
             ${renderChat({
@@ -1445,6 +1455,7 @@ export function renderApp(state: AppViewState) {
                 ? html`
                     <resizable-divider
                       mode="pixels"
+                      side="right"
                       orientation="vertical"
                       .initialWidth=${state.clawComputerWidth}
                       .minWidth=${400}
@@ -1468,6 +1479,7 @@ export function renderApp(state: AppViewState) {
                   `
                 : nothing
             }
+          </div>
         `
             : nothing
         }
diff --git a/ui/src/ui/app.ts b/ui/src/ui/app.ts
index 7f936722ca5..9f103cdc25c 100644
--- a/ui/src/ui/app.ts
+++ b/ui/src/ui/app.ts
@@ -170,6 +170,9 @@ export class OpenClawApp extends LitElement {
   @state() sidebarError: string | null = null;
   @state() splitRatio = this.settings.splitRatio;
 
+  @state() showClawComputer = false;
+  @state() clawComputerWidth = 600;
+
   @state() nodesLoading = false;
   @state() nodes: Array<Record<string, unknown>> = [];
   @state() devicesLoading = false;
@@ -710,6 +713,14 @@ export class OpenClawApp extends LitElement {
     this.applySettings({ ...this.settings, splitRatio: newRatio });
   }
 
+  toggleClawComputer() {
+    this.showClawComputer = !this.showClawComputer;
+  }
+
+  setClawComputerWidth(width: number) {
+    this.clawComputerWidth = width;
+  }
+
   render() {
     return renderApp(this as unknown as AppViewState);
   }
diff --git a/ui/src/ui/components/resizable-divider.ts b/ui/src/ui/components/resizable-divider.ts
index defec19e5cb..74e421596ac 100644
--- a/ui/src/ui/components/resizable-divider.ts
+++ b/ui/src/ui/components/resizable-divider.ts
@@ -11,9 +11,16 @@ export class ResizableDivider extends LitElement {
   @property({ type: Number }) minRatio = 0.4;
   @property({ type: Number }) maxRatio = 0.7;
 
+  @property({ type: String }) mode: "ratio" | "pixels" = "ratio";
+  @property({ type: String }) side: "left" | "right" = "left";
+  @property({ type: Number }) initialWidth = 0;
+  @property({ type: Number }) minWidth = 0;
+  @property({ type: Number }) maxWidth = Infinity;
+
   private isDragging = false;
   private startX = 0;
   private startRatio = 0;
+  private startWidth = 0;
 
   static styles = css`
     :host {
@@ -60,6 +67,7 @@ export class ResizableDivider extends LitElement {
     this.isDragging = true;
     this.startX = e.clientX;
     this.startRatio = this.splitRatio;
+    this.startWidth = this.initialWidth;
     this.classList.add("dragging");
 
     document.addEventListener("mousemove", this.handleMouseMove);
@@ -78,8 +86,29 @@ export class ResizableDivider extends LitElement {
       return;
     }
 
-    const containerWidth = container.getBoundingClientRect().width;
     const deltaX = e.clientX - this.startX;
+
+    if (this.mode === "pixels") {
+      let newWidth = this.startWidth;
+      if (this.side === "left") {
+        newWidth += deltaX;
+      } else {
+        newWidth -= deltaX;
+      }
+
+      newWidth = Math.max(this.minWidth, Math.min(this.maxWidth, newWidth));
+
+      this.dispatchEvent(
+        new CustomEvent("resize", {
+          detail: { width: newWidth },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+      return;
+    }
+
+    const containerWidth = container.getBoundingClientRect().width;
     const deltaRatio = deltaX / containerWidth;
 
     let newRatio = this.startRatio + deltaRatio;