From 8f56ae89b9564ca2287d402f1681fa33bc3cb16f Mon Sep 17 00:00:00 2001
From: ssdfasd <2156608475@qq.com>
Date: Sun, 8 Mar 2026 15:38:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(remote):=20=E6=B7=BB=E5=8A=A0=20OpenCode?=
 =?UTF-8?q?=20=E5=92=8C=20OpenClaw=20=E6=8C=89=E9=92=AE=E5=88=B0=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E6=8E=A7=E5=88=B6=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/remote/RemotePage.tsx | 44 +++++++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/modules/remote/RemotePage.tsx b/src/modules/remote/RemotePage.tsx
index 92ce5a7..90cf79d 100644
--- a/src/modules/remote/RemotePage.tsx
+++ b/src/modules/remote/RemotePage.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react'
-import { Monitor, GitBranch, Settings, Plus, Trash2, GripVertical, Folder } from 'lucide-react'
+import { Monitor, GitBranch, Settings, Plus, Trash2, GripVertical, Folder, Code, Sparkles } from 'lucide-react'
 import { ConfigDialog } from './components/ConfigDialog'
 import { DeleteConfirmDialog } from '@/components/dialogs/DeleteConfirmDialog'
 import type { DeviceInfo, RemoteConfig, RemoteDevice } from './types'
@@ -193,6 +193,28 @@ export const RemotePage: React.FC = () => {
     selectFile(fileItem)
   }
 
+  const handleOpenCode = () => {
+    if (!selectedConfig?.serverHost) {
+      setShowConfig(true)
+      return
+    }
+    const url = `http://${selectedConfig.serverHost}:${selectedConfig.desktopPort}/opencode`
+    const deviceName = selectedConfig.deviceName ? ` - ${selectedConfig.deviceName}` : ''
+    const fileItem = createRemoteDesktopFileItem(url, `OpenCode${deviceName}`, selectedConfig.deviceName)
+    selectFile(fileItem)
+  }
+
+  const handleOpenClaw = () => {
+    if (!selectedConfig?.serverHost) {
+      setShowConfig(true)
+      return
+    }
+    const url = `http://${selectedConfig.serverHost}:${selectedConfig.desktopPort}/openclaw`
+    const deviceName = selectedConfig.deviceName ? ` - ${selectedConfig.deviceName}` : ''
+    const fileItem = createRemoteDesktopFileItem(url, `OpenClaw${deviceName}`, selectedConfig.deviceName)
+    selectFile(fileItem)
+  }
+
   const handleOpenConfig = () => {
     if (selectedConfig) {
       setEditingDevice(selectedConfig)
@@ -536,7 +558,7 @@ export const RemotePage: React.FC = () => {
               </div>
 
               <div className="mt-6 mb-4">
-                <div className="grid grid-cols-1 md:grid-cols-[2fr_1fr] gap-8">
+                <div className="grid grid-cols-[2fr_1fr_1fr] gap-8">
                   <button
                     onClick={handleOpenRemoteDesktop}
                     className="rounded-lg overflow-hidden border border-gray-300/40 dark:border-gray-500/50 bg-gray-100/30 dark:bg-gray-800/30 hover:opacity-80 transition-opacity cursor-pointer"
@@ -565,6 +587,24 @@ export const RemotePage: React.FC = () => {
                       文件传输
                     </button>
                   </div>
+
+                  <div className="grid grid-rows-2 gap-6">
+                    <button
+                      onClick={handleOpenCode}
+                      className="flex items-center justify-center gap-2 text-2xl bg-gray-100/50 dark:bg-gray-700/40 hover:bg-gray-200/60 dark:hover:bg-gray-600/50 rounded-2xl shadow-md hover:shadow-xl transition-all font-medium text-gray-700 dark:text-gray-200 whitespace-nowrap"
+                    >
+                      <Code size={24} />
+                      OpenCode
+                    </button>
+
+                    <button
+                      onClick={handleOpenClaw}
+                      className="flex items-center justify-center gap-2 text-2xl bg-gray-100/50 dark:bg-gray-700/40 hover:bg-gray-200/60 dark:hover:bg-gray-600/50 rounded-2xl shadow-md hover:shadow-xl transition-all font-medium text-gray-700 dark:text-gray-200 whitespace-nowrap"
+                    >
+                      <Sparkles size={24} />
+                      OpenClaw
+                    </button>
+                  </div>
                 </div>
               </div>
               </div>