feature: added a toggle to show the services on a node

frontend/src/components/canvas/__tests__/BaseNode.test.tsx

@@ -20,7 +20,9 @@ vi.mock('@/stores/themeStore', () => ({
 }))
 
 vi.mock('@/stores/canvasStore', () => ({
-  useCanvasStore: (sel: (s: { hideIp: boolean }) => unknown) => sel({ hideIp: false }),
+  useCanvasStore: (sel: (s: { hideIp: boolean }) => unknown) => sel({
+    hideIp: false,
+  }),
 }))
 
 vi.mock('@/utils/themes', () => ({
@@ -49,6 +51,7 @@ vi.mock('@/utils/nodeIcons', () => ({
 vi.mock('@/utils/maskIp', () => ({
   maskIp: (ip: string) => ip,
   splitIps: (ip: string) => ip ? ip.split(',').map((s: string) => s.trim()).filter(Boolean) : [],
+  primaryIp: (ip: string) => ip ? ip.split(',')[0].trim() : '',
 }))
 
 vi.mock('@/utils/propertyIcons', () => ({
@@ -61,7 +64,9 @@ vi.mock('@/utils/handleUtils', () => ({
   clampBottomHandles: (n: unknown) => typeof n === 'number' ? n : 1,
 }))
 
-beforeEach(() => { mockZoom = 1 })
+beforeEach(() => {
+  mockZoom = 1
+})
 
 function makeNode(data: Partial<NodeData>): Node<NodeData> {
   return {
@@ -169,6 +174,49 @@ describe('BaseNode — properties rendering', () => {
   })
 })
 
+describe('BaseNode — services visibility toggle', () => {
+  it('does not render service toggle button on the node', () => {
+    renderBaseNode({ services: [{ service_name: 'nginx', port: 80, protocol: 'tcp' }] })
+    expect(screen.queryByTitle('Show services')).toBeNull()
+  })
+
+  it('renders service rows when services are toggled on', () => {
+    renderBaseNode({
+      ip: '192.168.1.10',
+      custom_colors: { show_services: true },
+      services: [
+        { service_name: 'nginx', port: 80, protocol: 'tcp' },
+        { service_name: 'ssh', port: 22, protocol: 'tcp' },
+      ],
+    })
+
+    expect(screen.getByText('nginx')).toBeDefined()
+    expect(screen.getByText('80')).toBeDefined()
+    expect(screen.getByText('ssh')).toBeDefined()
+  })
+
+  it('renders clickable service links for web services', () => {
+    renderBaseNode({
+      ip: '192.168.1.10',
+      custom_colors: { show_services: true },
+      services: [{ service_name: 'nginx', port: 80, protocol: 'tcp' }],
+    })
+
+    const link = screen.getByRole('link', { name: /nginx/i }) as HTMLAnchorElement
+    expect(link.getAttribute('href')).toBe('http://192.168.1.10:80')
+  })
+
+  it('keeps non-web services as non-clickable rows', () => {
+    renderBaseNode({
+      ip: '192.168.1.10',
+      custom_colors: { show_services: true },
+      services: [{ service_name: 'ssh', port: 22, protocol: 'tcp' }],
+    })
+
+    expect(screen.queryByRole('link', { name: /ssh/i })).toBeNull()
+  })
+})
+
 describe('BaseNode — legacy hardware fallback', () => {
   it('renders legacy hardware when properties is undefined and show_hardware is true', () => {
     renderBaseNode({

frontend/src/components/canvas/nodes/BaseNode.tsx

@@ -1,6 +1,6 @@
 import { createElement, useEffect, useMemo } from 'react'
 import { Handle, Position, NodeResizer, useUpdateNodeInternals, useViewport, type NodeProps, type Node } from '@xyflow/react'
-import { Cpu, MemoryStick, HardDrive, type LucideIcon } from 'lucide-react'
+import { Cpu, MemoryStick, HardDrive, ExternalLink, type LucideIcon } from 'lucide-react'
 import type { NodeData } from '@/types'
 import { resolveNodeColors } from '@/utils/nodeColors'
 import { resolveNodeIcon } from '@/utils/nodeIcons'
@@ -8,8 +8,9 @@ import { resolvePropertyIcon } from '@/utils/propertyIcons'
 import { useThemeStore } from '@/stores/themeStore'
 import { THEMES } from '@/utils/themes'
 import { useCanvasStore } from '@/stores/canvasStore'
-import { maskIp, splitIps } from '@/utils/maskIp'
+import { maskIp, primaryIp, splitIps } from '@/utils/maskIp'
 import { bottomHandleId, bottomHandlePositions, clampBottomHandles } from '@/utils/handleUtils'
+import { getServiceUrl } from '@/utils/serviceUrl'
 
 interface BaseNodeProps extends NodeProps<Node<NodeData>> {
   icon: LucideIcon
@@ -35,6 +36,9 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
   const colors = resolveNodeColors(data, activeTheme)
   const statusColor = theme.colors.statusColors[data.status]
   const isOnline = data.status === 'online'
+  const services = data.services ?? []
+  const showServices = data.custom_colors?.show_services === true
+  const serviceHost = data.ip ? primaryIp(data.ip) : data.hostname
 
   // Properties: prefer new system; fall back to legacy hardware fields for unmigrated nodes
   const visibleProperties = data.properties?.filter((p) => p.visible) ?? null
@@ -117,6 +121,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
             </div>
           ))}
         </div>
+
       </div>
 
       {/* Properties section (new system) */}
@@ -138,6 +143,48 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
         </>
       )}
 
+      {showServices && services.length > 0 && (
+        <>
+          <div style={{ height: 1, background: `${colors.border}44`, margin: '0 8px' }} />
+          <div className="flex flex-col gap-1 px-2.5 py-1.5 overflow-hidden">
+            {services.map((svc, idx) => {
+              const url = getServiceUrl(svc, serviceHost)
+              const row = (
+                <div
+                  className="nodrag flex items-center justify-between gap-2 px-1.5 py-1 rounded text-[10px] min-w-0 overflow-hidden"
+                  style={{
+                    background: theme.colors.nodeIconBackground,
+                    color: theme.colors.nodeSubtextColor,
+                  }}
+                >
+                  <span className="font-medium truncate min-w-0" title={svc.service_name}>{svc.service_name}</span>
+                  <span className="font-mono shrink-0 opacity-80 flex items-center gap-1">
+                    <span>{svc.port}</span>
+                    {url && <ExternalLink size={9} className="shrink-0" />}
+                  </span>
+                </div>
+              )
+
+              if (!url) return <div key={`${svc.port}-${svc.protocol}-${svc.service_name}-${idx}`}>{row}</div>
+
+              return (
+                <a
+                  key={`${svc.port}-${svc.protocol}-${svc.service_name}-${idx}`}
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block hover:opacity-85 transition-opacity"
+                  title={url}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {row}
+                </a>
+              )
+            })}
+          </div>
+        </>
+      )}
+
       {/* Legacy hardware section — fallback for nodes not yet migrated */}
       {showLegacyHardware && (
         <>

frontend/src/components/modals/NodeModal.tsx

@@ -104,7 +104,7 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                 <SelectContent className="bg-[#21262d] border-[#30363d]">
                   {NODE_TYPE_GROUPS.map((group, i) => (
                     <Fragment key={group.label}>
-                      {i > 0 && <SelectSeparator className="bg-[#30363d]" />}
+                      {i > 0 && <SelectSeparator key={`sep-${group.label}`} className="bg-[#30363d]" />}
                       <SelectGroup>
                         <SelectLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/50 px-2 py-1">
                           {group.label}
@@ -303,11 +303,10 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                 <button
                   type="button"
                   role="switch"
+                  aria-label="Container Mode"
                   aria-checked={!!form.container_mode}
                   onClick={() => set('container_mode', !form.container_mode)}
                   className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none ${modalStyles['modal-interactive']}`}
-                  tabIndex={0}
-                  aria-label="Toggle container mode"
                   style={{ background: form.container_mode ? '#ff6e00' : '#30363d' }}
                 >
                   <span
@@ -318,6 +317,33 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
               </div>
             )}
 
+            {/* Service visibility */}
+            {form.type !== 'groupRect' && form.type !== 'group' && (
+              <div className="flex items-center justify-between col-span-2 py-1">
+                <div className="flex flex-col gap-0.5">
+                  <Label className="text-xs text-muted-foreground">Show Services</Label>
+                  <span className="text-[10px] text-muted-foreground/60">Display discovered services on the node card</span>
+                </div>
+                <button
+                  type="button"
+                  role="switch"
+                  aria-label="Show Services"
+                  aria-checked={form.custom_colors?.show_services === true}
+                  onClick={() => set('custom_colors', {
+                    ...form.custom_colors,
+                    show_services: !(form.custom_colors?.show_services === true),
+                  })}
+                  className="relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none"
+                  style={{ background: form.custom_colors?.show_services === true ? '#00d4ff' : '#30363d' }}
+                >
+                  <span
+                    className="pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform"
+                    style={{ transform: form.custom_colors?.show_services === true ? 'translateX(16px)' : 'translateX(0)' }}
+                  />
+                </button>
+              </div>
+            )}
+
             {/* Appearance */}
             <div className="flex flex-col gap-2 col-span-2">
               <div className="flex items-center justify-between">

frontend/src/components/modals/__tests__/NodeModal.test.tsx

@@ -273,12 +273,33 @@ describe('NodeModal', () => {
 
   it('toggles container_mode on click', () => {
     const { onSubmit } = renderModal({ initial: { ...BASE, type: 'proxmox', container_mode: true } })
-    fireEvent.click(screen.getByRole('switch'))
+    fireEvent.click(screen.getByRole('switch', { name: 'Container Mode' }))
     fireEvent.click(screen.getByRole('button', { name: 'Add' }))
     expect((onSubmit.mock.calls[0][0] as Partial<NodeData>).container_mode).toBe(false)
   })
 
-  // ── Parent container ──────────────────────────────────────────────────
+  // ── Show services toggle (modal-only) ───────────────────────────────
+
+  it('shows Show Services toggle for regular nodes', () => {
+    renderModal({ initial: BASE })
+    expect(screen.getByText('Show Services')).toBeDefined()
+    expect(screen.getByRole('switch', { name: 'Show Services' })).toBeDefined()
+  })
+
+  it('hides Show Services toggle for groupRect', () => {
+    renderModal({ initial: { ...BASE, type: 'groupRect' } })
+    expect(screen.queryByText('Show Services')).toBeNull()
+  })
+
+  it('submits custom_colors.show_services=true when toggled on', () => {
+    const { onSubmit } = renderModal({ initial: BASE })
+    fireEvent.click(screen.getByRole('switch', { name: 'Show Services' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
+    const data = onSubmit.mock.calls[0][0] as Partial<NodeData>
+    expect(data.custom_colors?.show_services).toBe(true)
+  })
+
+  // ── Parent Proxmox (vm / lxc only) ───────────────────────────────────
 
   const parentContainerVisibleTypes = ['proxmox', 'vm', 'lxc', 'docker_host', 'isp', 'router', 'switch', 'server', 'nas', 'ap', 'printer', 'iot', 'camera', 'cpl', 'computer', 'generic'] as const
   const parentContainerHiddenTypes = ['groupRect', 'group'] as const

frontend/src/types/index.ts

@@ -82,6 +82,7 @@ export interface NodeData extends Record<string, unknown> {
     border?: string
     background?: string
     icon?: string
+    show_services?: boolean
     // Group rectangle extras (type === 'groupRect')
     text_color?: string
     text_position?: TextPosition