feature: add support for services to use a path

frontend/src/components/panels/__tests__/DetailPanel.test.ts

@@ -2,10 +2,11 @@ import { describe, it, expect } from 'vitest'
 import { getServiceUrl } from '@/utils/serviceUrl'
 import type { ServiceInfo } from '@/types'
 
-const svc = (port: number, protocol: 'tcp' | 'udp' = 'tcp', service_name = 'test'): ServiceInfo => ({
-  port,
+const svc = (port?: number, protocol: 'tcp' | 'udp' = 'tcp', service_name = 'test', path?: string): ServiceInfo => ({
+  ...(port != null ? { port } : {}),
   protocol,
   service_name,
+  ...(path ? { path } : {}),
 })
 
 describe('getServiceUrl', () => {
@@ -63,4 +64,20 @@ describe('getServiceUrl', () => {
   it('uses host string directly (works with both IP and hostname)', () => {
     expect(getServiceUrl(svc(80), 'myserver.lan')).toBe('http://myserver.lan:80')
   })
+
+  it('uses the node port when the host already includes one', () => {
+    expect(getServiceUrl(svc(undefined, 'tcp', 'app'), '192.168.1.10:8080')).toBe('http://192.168.1.10:8080')
+  })
+
+  it('lets the service port override the node port', () => {
+    expect(getServiceUrl(svc(3000, 'tcp', 'app'), '192.168.1.10:8080')).toBe('http://192.168.1.10:3000')
+  })
+
+  it('appends a normalized path to the final URL', () => {
+    expect(getServiceUrl(svc(3000, 'tcp', 'app', 'admin/login'), '192.168.1.10')).toBe('http://192.168.1.10:3000/admin/login')
+  })
+
+  it('supports path-only services inheriting the node port', () => {
+    expect(getServiceUrl(svc(undefined, 'tcp', 'app', '/metrics'), '192.168.1.10:9090')).toBe('http://192.168.1.10:9090/metrics')
+  })
 })

frontend/src/components/panels/__tests__/DetailPanel.test.tsx

@@ -293,9 +293,35 @@ describe('DetailPanel', () => {
       fireEvent.click(addHeaders[addHeaders.length - 1])
       fireEvent.change(screen.getByPlaceholderText('Service name'), { target: { value: 'nginx' } })
       fireEvent.change(screen.getByPlaceholderText('Port'), { target: { value: '80' } })
+      fireEvent.change(screen.getByPlaceholderText('Path'), { target: { value: '/admin' } })
       fireEvent.keyDown(screen.getByPlaceholderText('Port'), { key: 'Enter' })
       expect(updateNode).toHaveBeenCalledOnce()
-      expect(updateNode.mock.calls[0][1].services[0]).toMatchObject({ service_name: 'nginx', port: 80, protocol: 'tcp' })
+      expect(updateNode.mock.calls[0][1].services[0]).toMatchObject({ service_name: 'nginx', port: 80, protocol: 'tcp', path: '/admin' })
+    })
+
+    it('allows adding a service without a port', () => {
+      const updateNode = vi.fn()
+      vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
+        nodes: [makeNode({ ip: '192.168.1.10:8080' })],
+        selectedNodeId: 'n1',
+        selectedNodeIds: [],
+        setSelectedNode: vi.fn(),
+        deleteNode: vi.fn(),
+        updateNode,
+        snapshotHistory: vi.fn(),
+        createGroup: vi.fn(),
+        ungroup: vi.fn(),
+      } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
+      render(<DetailPanel onEdit={vi.fn()} />)
+      const addHeaders = screen.getAllByText('Add')
+      fireEvent.click(addHeaders[addHeaders.length - 1])
+      fireEvent.change(screen.getByPlaceholderText('Service name'), { target: { value: 'health' } })
+      fireEvent.change(screen.getByPlaceholderText('Path (/dashboard)'), { target: { value: 'healthz' } })
+      fireEvent.click(screen.getAllByRole('button', { name: 'Add' }).at(-1) as HTMLButtonElement)
+
+      expect(updateNode).toHaveBeenCalledOnce()
+      expect(updateNode.mock.calls[0][1].services[0]).toMatchObject({ service_name: 'health', protocol: 'tcp', path: 'healthz' })
+      expect(updateNode.mock.calls[0][1].services[0].port).toBeUndefined()
     })
 
     it('calls updateNode without the removed service when X is clicked', () => {
@@ -332,15 +358,17 @@ describe('DetailPanel', () => {
     const svc = { port: 80, protocol: 'tcp' as const, service_name: 'nginx' }
 
     it('shows edit form pre-filled when pencil is clicked', () => {
-      setupStore({ services: [svc] })
+      setupStore({ services: [{ ...svc, path: '/admin' }] })
       render(<DetailPanel onEdit={vi.fn()} />)
       // Hover to reveal edit button (fireEvent.mouseOver isn't needed — opacity is CSS only)
       const editBtn = screen.getByTitle('Edit service')
       fireEvent.click(editBtn)
       const nameInput = screen.getByPlaceholderText('Service name') as HTMLInputElement
       expect(nameInput.value).toBe('nginx')
-      const portInput = screen.getByPlaceholderText('Port') as HTMLInputElement
+      const portInput = screen.getByPlaceholderText('Port (/dashboard)') as HTMLInputElement
       expect(portInput.value).toBe('80')
+      const pathInput = screen.getByPlaceholderText('Path (/dashboard)') as HTMLInputElement
+      expect(pathInput.value).toBe('/admin')
     })
 
     it('calls updateNode with updated values on Save', () => {
@@ -359,11 +387,13 @@ describe('DetailPanel', () => {
 
       const nameInput = screen.getByPlaceholderText('Service name')
       fireEvent.change(nameInput, { target: { value: 'apache' } })
+      fireEvent.change(screen.getByPlaceholderText('Path (/dashboard)'), { target: { value: '/ui' } })
       fireEvent.click(screen.getByRole('button', { name: 'Save' }))
 
       expect(updateNode).toHaveBeenCalledOnce()
       expect(updateNode.mock.calls[0][1].services[0].service_name).toBe('apache')
       expect(updateNode.mock.calls[0][1].services[0].port).toBe(80)
+      expect(updateNode.mock.calls[0][1].services[0].path).toBe('/ui')
     })
 
     it('cancels edit without updating', () => {