From 1090255bd74e3d4dca744f8246f6cd91a0e62509 Mon Sep 17 00:00:00 2001
From: Alex Netsch <alex@bloop.ai>
Date: Fri, 17 Oct 2025 14:20:29 +0100
Subject: [PATCH] Use the first found port for frontend preview detection
 (vibe-kanban) (#1046)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* - Updated `frontend/src/hooks/useDevserverUrl.ts:66-84` so new log chunks are scanned in arrival order and the state keeps the very first detected preview URL/port instead of replacing it with later ones.
- Confirmed the hook still resets when the log stream shrinks (new process) so a new attempt can detect a fresh first port.

I wasn’t able to run `pnpm run check` here; feel free to run it locally if you’d like to double-check.

* - Added an early return in `frontend/src/hooks/useDevserverUrl.ts:74-81` so once a preview URL is locked in we simply advance `lastIndexRef` and skip parsing new log entries, avoiding unnecessary work while still resetting correctly if the stream shrinks.
- Extended the effect dependency list to include `urlInfo` so the early-return logic behaves consistently with state updates.

If you want to cover the edge case where the dev server restarts on the same attempt and we intentionally reset the stored URL, we can hook into that next.

* Swapped the index-based `for` with `Array.prototype.some` over a sliced view of the new log entries (`frontend/src/hooks/useDevserverUrl.ts:77-85`). This keeps the “stop at the first hit” behavior but reads a little cleaner and avoids manual index bookkeeping.
---
 frontend/src/hooks/useDevserverUrl.ts | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/src/hooks/useDevserverUrl.ts b/frontend/src/hooks/useDevserverUrl.ts
index 33e431a9..2b4daade 100644
--- a/frontend/src/hooks/useDevserverUrl.ts
+++ b/frontend/src/hooks/useDevserverUrl.ts
@@ -68,18 +68,28 @@ export const useDevserverUrlFromLogs = (
       setUrlInfo(undefined);
     }
 
-    for (let i = logs.length - 1; i >= lastIndexRef.current; i -= 1) {
-      const detected = detectDevserverUrl(logs[i].content);
+    if (urlInfo) {
+      lastIndexRef.current = logs.length;
+      return;
+    }
+
+    let detectedUrl: DevserverUrlInfo | undefined;
+    const newEntries = logs.slice(lastIndexRef.current);
+    newEntries.some((entry) => {
+      const detected = detectDevserverUrl(entry.content);
       if (detected) {
-        setUrlInfo((prev) =>
-          prev && prev.url === detected.url ? prev : detected
-        );
-        break;
+        detectedUrl = detected;
+        return true;
       }
+      return false;
+    });
+
+    if (detectedUrl) {
+      setUrlInfo((prev) => prev ?? detectedUrl);
     }
 
     lastIndexRef.current = logs.length;
-  }, [logs]);
+  }, [logs, urlInfo]);
 
   return urlInfo;
 };