fix: the frontend button opens whichever listed frontend is running

src/renderer/src/lib/workspace-port-labels.test.ts

@@ -43,6 +43,16 @@ describe('pickFrontendPortLabel', () => {
     expect(pickFrontendPortLabel(labels, [21495])).toBeNull()
   })
 
+  it('picks whichever frontend is running, the first listed when several are', () => {
+    const frontends = [
+      { label: 'Frontend dev server', port: 21486, url: 'http://e-4871.localhost:21486' },
+      { label: 'Frontend prebuild', port: 21499, url: 'http://e-4871.localhost:21499' }
+    ]
+    expect(pickFrontendPortLabel(frontends, [21499])?.label).toBe('Frontend prebuild')
+    expect(pickFrontendPortLabel(frontends, [21486, 21499])?.label).toBe('Frontend dev server')
+    expect(pickFrontendPortLabel(frontends, [])).toBeNull()
+  })
+
   it('falls back to the first entry when none is called frontend', () => {
     const [, ...rest] = labels
     expect(pickFrontendPortLabel(rest, [22844])?.label).toBe('Backend docs')

src/renderer/src/lib/workspace-port-labels.ts

@@ -36,8 +36,12 @@ export function pickFrontendPortLabel(
   labels: readonly PortLabel[],
   livePorts: readonly number[]
 ): PortLabel | null {
-  const frontend = labels.find((entry) => /frontend/i.test(entry.label)) ?? labels[0]
-  return frontend && livePorts.includes(frontend.port) ? frontend : null
+  const frontends = labels.filter((entry) => /frontend/i.test(entry.label))
+  if (frontends.length === 0) {
+    return labels[0] && livePorts.includes(labels[0].port) ? labels[0] : null
+  }
+  // Why the first running one: a repo can list several, such as a dev server and a prebuild.
+  return frontends.find((entry) => livePorts.includes(entry.port)) ?? null
 }
 
 const cache = new Map<string, { key: string; labels: PortLabel[] }>()