From 332bfbd965ca42f9462ee7db33ef3e619936cde1 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Sun, 28 Dec 2025 07:59:51 -0500
Subject: [PATCH] feat: dynamically determine devserver hostname from browser
 location instead of hardcoding localhost (#1640)

Co-authored-by: Vibe Kanban <noreply@vibekanban.com>
---
 frontend/src/hooks/useDevserverUrl.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/hooks/useDevserverUrl.ts b/frontend/src/hooks/useDevserverUrl.ts
index 2b4daade..61b0b01a 100644
--- a/frontend/src/hooks/useDevserverUrl.ts
+++ b/frontend/src/hooks/useDevserverUrl.ts
@@ -12,8 +12,17 @@ export type DevserverUrlInfo = {
   scheme: 'http' | 'https';
 };
 
+// Get the hostname from the current browser location, falling back to 'localhost'
+const getBrowserHostname = (): string => {
+  if (typeof window !== 'undefined') {
+    return window.location.hostname;
+  }
+  return 'localhost';
+};
+
 export const detectDevserverUrl = (line: string): DevserverUrlInfo | null => {
   const cleaned = stripAnsi(line);
+  const browserHostname = getBrowserHostname();
 
   const fullUrlMatch = urlPatterns[0].exec(cleaned);
   if (fullUrlMatch) {
@@ -24,7 +33,7 @@ export const detectDevserverUrl = (line: string): DevserverUrlInfo | null => {
         parsed.hostname === '::' ||
         parsed.hostname === '[::]'
       ) {
-        parsed.hostname = 'localhost';
+        parsed.hostname = browserHostname;
       }
       return {
         url: parsed.toString(),
@@ -41,7 +50,7 @@ export const detectDevserverUrl = (line: string): DevserverUrlInfo | null => {
     const port = Number(hostPortMatch[1]);
     const scheme = /https/i.test(cleaned) ? 'https' : 'http';
     return {
-      url: `${scheme}://localhost:${port}`,
+      url: `${scheme}://${browserHostname}:${port}`,
       port,
       scheme: scheme as 'http' | 'https',
     };