From 1299d415b8c2d2a0fca189f644c0f21ecee61383 Mon Sep 17 00:00:00 2001
From: Luciano Castillo <2213102+luccast@users.noreply.github.com>
Date: Thu, 5 Feb 2026 11:26:31 -0500
Subject: [PATCH] feat(monitor): display configured gateway endpoint
 dynamically (#53)

---
 src/components/monitor/SettingsPanel.tsx |  4 +++-
 src/integrations/openclaw/client.ts      | 11 ++++++++---
 src/integrations/trpc/router.ts          |  6 +++++-
 src/routes/monitor/index.tsx             | 13 +++++++++++++
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/monitor/SettingsPanel.tsx b/src/components/monitor/SettingsPanel.tsx
index 3aa297b..d31a2b1 100644
--- a/src/components/monitor/SettingsPanel.tsx
+++ b/src/components/monitor/SettingsPanel.tsx
@@ -12,6 +12,7 @@ interface SettingsPanelProps {
   persistenceStartedAt: number | null
   persistenceSessionCount: number
   persistenceActionCount: number
+  gatewayEndpoint: string
   open: boolean
   onOpenChange: (open: boolean) => void
   onHistoricalModeChange: (enabled: boolean) => void
@@ -37,6 +38,7 @@ export function SettingsPanel({
   persistenceStartedAt,
   persistenceSessionCount,
   persistenceActionCount,
+  gatewayEndpoint,
   open,
   onOpenChange,
   onHistoricalModeChange,
@@ -305,7 +307,7 @@ export function SettingsPanel({
 
                   <div className="font-console text-[11px] text-shell-500 space-y-1.5">
                     <div>
-                      <span className="text-crab-600">&gt;</span> endpoint: ws://127.0.0.1:18789
+                      <span className="text-crab-600">&gt;</span> endpoint: {gatewayEndpoint}
                     </div>
                     <div>
                       <span className="text-crab-600">&gt;</span> protocol: v3
diff --git a/src/integrations/openclaw/client.ts b/src/integrations/openclaw/client.ts
index e1e7cde..87fbf6e 100644
--- a/src/integrations/openclaw/client.ts
+++ b/src/integrations/openclaw/client.ts
@@ -12,6 +12,8 @@ import {
   createConnectParams,
 } from './protocol'
 
+const DEFAULT_GATEWAY_URL = process.env.CLAWDBOT_URL || 'ws://127.0.0.1:18789'
+
 interface ChallengePayload {
   nonce: string
   ts: number
@@ -32,7 +34,7 @@ export class ClawdbotClient {
   private _connecting = false
 
   constructor(
-    private url: string = 'ws://127.0.0.1:18789',
+    private url: string = DEFAULT_GATEWAY_URL,
     private token?: string
   ) {}
 
@@ -239,11 +241,14 @@ export class ClawdbotClient {
 // Singleton instance for server use
 let clientInstance: ClawdbotClient | null = null
 
+export function getClawdbotEndpoint(): string {
+  return DEFAULT_GATEWAY_URL
+}
+
 export function getClawdbotClient(): ClawdbotClient {
   if (!clientInstance) {
-    const url = process.env.CLAWDBOT_URL || 'ws://127.0.0.1:18789'
     const token = process.env.CLAWDBOT_API_TOKEN
-    clientInstance = new ClawdbotClient(url, token)
+    clientInstance = new ClawdbotClient(DEFAULT_GATEWAY_URL, token)
   }
   return clientInstance
 }
diff --git a/src/integrations/trpc/router.ts b/src/integrations/trpc/router.ts
index 3b72bd1..635087e 100644
--- a/src/integrations/trpc/router.ts
+++ b/src/integrations/trpc/router.ts
@@ -2,7 +2,7 @@ import { initTRPC } from '@trpc/server'
 import { observable } from '@trpc/server/observable'
 import superjson from 'superjson'
 import { z } from 'zod'
-import { getClawdbotClient } from '~/integrations/openclaw/client'
+import { getClawdbotClient, getClawdbotEndpoint } from '~/integrations/openclaw/client'
 import { getPersistenceService } from '~/integrations/openclaw/persistence'
 import {
   parseEventFrame,
@@ -72,6 +72,10 @@ const openclawRouter = router({
     return { connected: client.connected }
   }),
 
+  gatewayEndpoint: publicProcedure.query(() => {
+    return { url: getClawdbotEndpoint() }
+  }),
+
   setDebugMode: publicProcedure
     .input(z.object({ enabled: z.boolean() }))
     .mutation(({ input }) => {
diff --git a/src/routes/monitor/index.tsx b/src/routes/monitor/index.tsx
index ab67796..2040395 100644
--- a/src/routes/monitor/index.tsx
+++ b/src/routes/monitor/index.tsx
@@ -64,6 +64,7 @@ function MonitorPageWrapper() {
 
 const RETRY_DELAY = 3000
 const MAX_RETRIES = 10
+const DEFAULT_GATEWAY_ENDPOINT = 'ws://127.0.0.1:18789'
 
 function MonitorPage() {
   const [connected, setConnected] = useState(false)
@@ -73,6 +74,7 @@ function MonitorPage() {
   const [debugMode, setDebugMode] = useState(false)
   const [logCollection, setLogCollection] = useState(false)
   const [logCount, setLogCount] = useState(0)
+  const [gatewayEndpoint, setGatewayEndpoint] = useState(DEFAULT_GATEWAY_ENDPOINT)
   const [selectedSession, setSelectedSession] = useState<string | null>(null)
 
   // Persistence service state
@@ -116,8 +118,18 @@ function MonitorPage() {
   useEffect(() => {
     checkStatus()
     checkPersistenceStatus()
+    loadGatewayEndpoint()
   }, [])
 
+  const loadGatewayEndpoint = async () => {
+    try {
+      const data = await trpc.openclaw.gatewayEndpoint.query()
+      setGatewayEndpoint(data.url)
+    } catch {
+      // keep default
+    }
+  }
+
   const checkPersistenceStatus = async () => {
     try {
       const status = await trpc.openclaw.persistenceStatus.query()
@@ -468,6 +480,7 @@ function MonitorPage() {
             persistenceStartedAt={persistenceStartedAt}
             persistenceSessionCount={persistenceSessionCount}
             persistenceActionCount={persistenceActionCount}
+            gatewayEndpoint={gatewayEndpoint}
             open={settingsOpen}
             onOpenChange={setSettingsOpen}
             onHistoricalModeChange={handleHistoricalModeChange}