From 7003bda706d5ca051bba573de9b3bdca5ff15271 Mon Sep 17 00:00:00 2001
From: weishu <twsxtd@gmail.com>
Date: Wed, 14 Jan 2026 11:27:35 +0800
Subject: [PATCH] fix: use baseUrl for Socket.IO connection to support separate
 frontend hosting

Previously, useTerminalSocket used a relative path `/terminal` for Socket.IO,
which would connect to the frontend host instead of the actual HAPI server.
Now it uses the baseUrl from context to connect to the correct server, enabling
scenarios like hosting the frontend on GitHub Pages while the server runs elsewhere.
---
 web/src/App.tsx                      | 2 +-
 web/src/hooks/useTerminalSocket.ts   | 7 +++++--
 web/src/lib/app-context.tsx          | 1 +
 web/src/routes/sessions/terminal.tsx | 5 +++--
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 0b9cd39b..377af3b1 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -313,7 +313,7 @@ function AppInner() {
     }
 
     return (
-        <AppContextProvider value={{ api, token }}>
+        <AppContextProvider value={{ api, token, baseUrl }}>
             <SyncingBanner isSyncing={isSyncing} />
             <OfflineBanner />
             <div className="h-full flex flex-col">
diff --git a/web/src/hooks/useTerminalSocket.ts b/web/src/hooks/useTerminalSocket.ts
index 7ff3c279..225ff64b 100644
--- a/web/src/hooks/useTerminalSocket.ts
+++ b/web/src/hooks/useTerminalSocket.ts
@@ -8,6 +8,7 @@ type TerminalConnectionState =
     | { status: 'error'; error: string }
 
 type UseTerminalSocketOptions = {
+    baseUrl: string
     token: string
     sessionId: string
     terminalId: string
@@ -49,12 +50,14 @@ export function useTerminalSocket(options: UseTerminalSocketOptions): {
     const sessionIdRef = useRef(options.sessionId)
     const terminalIdRef = useRef(options.terminalId)
     const tokenRef = useRef(options.token)
+    const baseUrlRef = useRef(options.baseUrl)
     const lastSizeRef = useRef<{ cols: number; rows: number } | null>(null)
 
     useEffect(() => {
         sessionIdRef.current = options.sessionId
         terminalIdRef.current = options.terminalId
-    }, [options.sessionId, options.terminalId])
+        baseUrlRef.current = options.baseUrl
+    }, [options.sessionId, options.terminalId, options.baseUrl])
 
     useEffect(() => {
         tokenRef.current = options.token
@@ -113,7 +116,7 @@ export function useTerminalSocket(options: UseTerminalSocketOptions): {
             return
         }
 
-        const socket = io('/terminal', {
+        const socket = io(`${baseUrlRef.current}/terminal`, {
             auth: { token },
             path: '/socket.io/',
             reconnection: true,
diff --git a/web/src/lib/app-context.tsx b/web/src/lib/app-context.tsx
index cdb319d8..477d9d91 100644
--- a/web/src/lib/app-context.tsx
+++ b/web/src/lib/app-context.tsx
@@ -4,6 +4,7 @@ import type { ApiClient } from '@/api/client'
 type AppContextValue = {
     api: ApiClient
     token: string
+    baseUrl: string
 }
 
 const AppContext = createContext<AppContextValue | null>(null)
diff --git a/web/src/routes/sessions/terminal.tsx b/web/src/routes/sessions/terminal.tsx
index c833509b..acfe4273 100644
--- a/web/src/routes/sessions/terminal.tsx
+++ b/web/src/routes/sessions/terminal.tsx
@@ -51,7 +51,7 @@ const QUICK_INPUTS = [
 
 export default function TerminalPage() {
     const { sessionId } = useParams({ from: '/sessions/$sessionId/terminal' })
-    const { api, token } = useAppContext()
+    const { api, token, baseUrl } = useAppContext()
     const goBack = useAppGoBack()
     const { session } = useSession(api, sessionId)
     const terminalId = useMemo(() => {
@@ -77,7 +77,8 @@ export default function TerminalPage() {
     } = useTerminalSocket({
         token,
         sessionId,
-        terminalId
+        terminalId,
+        baseUrl
     })
 
     useEffect(() => {