feat: show network aliases and IP in card view

Parse Docker Compose dict-form network config to extract aliases and
ipv4_address. Cards now display structured network details (e.g.,
"media (aliases: plex-alias; ip: 172.20.0.10)"). Table and markdown
views continue showing only network names for compact display.

- Add NetworkInfo interface (name, aliases, ipv4Address)
- Update extractNetworks to parse dict-form details immutably
- Add renderNetworksSection in cards.ts for structured rendering
- Add negative-assertion tests for table/markdown (no alias/ip leak)

Author: bakerboy448

src/cards.ts

@@ -1,5 +1,5 @@
 import { el } from './dom'
-import type { ServiceInfo } from './services'
+import type { ServiceInfo, NetworkInfo } from './services'
 
 const VOLUME_MODES: ReadonlySet<string> = new Set([
   'ro', 'rw', 'z', 'Z', 'shared', 'slave', 'private', 'rshared', 'rslave', 'rprivate',
@@ -68,6 +68,25 @@ function renderVolumesSection(volumes: readonly string[]): HTMLElement {
   return section
 }
 
+function renderNetworksSection(networks: readonly NetworkInfo[]): HTMLElement {
+  const section = el('div', { className: 'card-section' })
+  const labelEl = el('div', { className: 'card-label' })
+  labelEl.textContent = 'Networks'
+  section.appendChild(labelEl)
+
+  const list = el('div', { className: 'card-value' })
+  for (const net of networks) {
+    const line = el('div')
+    const details: string[] = []
+    if (net.aliases.length > 0) details.push(`aliases: ${net.aliases.join(', ')}`)
+    if (net.ipv4Address) details.push(`ip: ${net.ipv4Address}`)
+    line.textContent = details.length > 0 ? `${net.name} (${details.join('; ')})` : net.name
+    list.appendChild(line)
+  }
+  section.appendChild(list)
+  return section
+}
+
 function renderListSection(label: string, items: readonly string[]): HTMLElement {
   const section = el('div', { className: 'card-section' })
   const labelEl = el('div', { className: 'card-label' })
@@ -123,7 +142,7 @@ function renderCard(service: ServiceInfo): HTMLElement {
   }
 
   if (service.networks.length > 0) {
-    card.appendChild(renderListSection('Networks', service.networks))
+    card.appendChild(renderNetworksSection(service.networks))
   }
 
   if (service.environment.size > 0) {

src/markdown.ts

@@ -56,7 +56,7 @@ export function generateMarkdownTable(services: readonly ServiceInfo[]): string
       escapeCell(svc.name),
       escapeCell(svc.image),
       escapeCell(joinField([...svc.ports])),
-      escapeCell(joinField([...svc.networks])),
+      escapeCell(joinField(svc.networks.map(n => n.name))),
     ]
     const extraCells = extraKeys.map(key => escapeCell(svc.extras.get(key) ?? ''))
     return `| ${[...baseCells, ...extraCells].join(' | ')} |`

src/services.ts

@@ -1,11 +1,17 @@
 import { isRecord } from './patterns'
 
+export interface NetworkInfo {
+  readonly name: string
+  readonly aliases: readonly string[]
+  readonly ipv4Address: string
+}
+
 export interface ServiceInfo {
   readonly name: string
   readonly image: string
   readonly ports: readonly string[]
   readonly volumes: readonly string[]
-  readonly networks: readonly string[]
+  readonly networks: readonly NetworkInfo[]
   readonly environment: ReadonlyMap<string, string>
   readonly extras: ReadonlyMap<string, string>
 }
@@ -48,12 +54,24 @@ function normalizeVolumes(volumes: unknown): readonly string[] {
   return volumes.map(normalizeVolume)
 }
 
-function extractNetworks(networks: unknown): readonly string[] {
+function extractNetworks(networks: unknown): readonly NetworkInfo[] {
   if (Array.isArray(networks)) {
-    return [...networks].map(String).sort()
+    return [...networks]
+      .map(n => ({ name: String(n), aliases: [] as readonly string[], ipv4Address: '' }))
+      .sort((a, b) => a.name.localeCompare(b.name))
   }
   if (isRecord(networks)) {
-    return Object.keys(networks).sort()
+    return Object.entries(networks)
+      .map(([name, config]): NetworkInfo => {
+        const aliases = isRecord(config) && Array.isArray(config['aliases'])
+          ? config['aliases'].map(String)
+          : []
+        const ipv4Address = isRecord(config) && typeof config['ipv4_address'] === 'string'
+          ? config['ipv4_address']
+          : ''
+        return { name, aliases, ipv4Address }
+      })
+      .sort((a, b) => a.name.localeCompare(b.name))
   }
   return []
 }

src/volume-table.ts

@@ -57,7 +57,8 @@ export function renderServiceTable(services: readonly ServiceInfo[]): HTMLElemen
     row.appendChild(portsTd)
 
     const netTd = el('td')
-    netTd.textContent = svc.networks.length > 0 ? [...svc.networks].join(', ') : '\u2014'
+    const netNames = svc.networks.map(n => n.name)
+    netTd.textContent = netNames.length > 0 ? netNames.join(', ') : '\u2014'
     if (svc.networks.length === 0) netTd.className = 'vol-empty'
     row.appendChild(netTd)
 

tests/cards.test.ts

@@ -1,6 +1,10 @@
 import { describe, it, expect } from 'vitest'
 import { renderCards, parseVolume } from '../src/cards'
-import type { ServiceInfo } from '../src/services'
+import type { ServiceInfo, NetworkInfo } from '../src/services'
+
+function net(name: string, opts?: { aliases?: string[]; ipv4Address?: string }): NetworkInfo {
+  return { name, aliases: opts?.aliases ?? [], ipv4Address: opts?.ipv4Address ?? '' }
+}
 
 function makeService(overrides: Partial<ServiceInfo> & { name: string }): ServiceInfo {
   return {
@@ -142,6 +146,65 @@ describe('renderCards', () => {
     expect(volLabel).toBeDefined()
     expect(volLabel!.nextElementSibling!.className).toBe('vol-grid')
   })
+
+  it('renders network names in card', () => {
+    const services = [makeService({
+      name: 'app',
+      image: 'nginx',
+      networks: [net('frontend'), net('backend')],
+    })]
+    const container = renderCards(services)
+    const labels = container.querySelectorAll('.card-label')
+    const netLabel = Array.from(labels).find(l => l.textContent === 'Networks')
+    expect(netLabel).toBeDefined()
+    const netSection = netLabel!.parentElement!
+    expect(netSection.textContent).toContain('frontend')
+    expect(netSection.textContent).toContain('backend')
+  })
+
+  it('renders network aliases in card', () => {
+    const services = [makeService({
+      name: 'plex',
+      image: 'plex',
+      networks: [net('media', { aliases: ['plex-media', 'media-server'] })],
+    })]
+    const container = renderCards(services)
+    const labels = container.querySelectorAll('.card-label')
+    const netLabel = Array.from(labels).find(l => l.textContent === 'Networks')
+    expect(netLabel).toBeDefined()
+    const netSection = netLabel!.parentElement!
+    expect(netSection.textContent).toContain('media')
+    expect(netSection.textContent).toContain('plex-media')
+    expect(netSection.textContent).toContain('media-server')
+  })
+
+  it('renders network ipv4 address in card', () => {
+    const services = [makeService({
+      name: 'app',
+      image: 'nginx',
+      networks: [net('backend', { ipv4Address: '172.20.0.10' })],
+    })]
+    const container = renderCards(services)
+    const labels = container.querySelectorAll('.card-label')
+    const netLabel = Array.from(labels).find(l => l.textContent === 'Networks')
+    const netSection = netLabel!.parentElement!
+    expect(netSection.textContent).toContain('172.20.0.10')
+  })
+
+  it('renders network with both aliases and ip', () => {
+    const services = [makeService({
+      name: 'app',
+      image: 'nginx',
+      networks: [net('media', { aliases: ['plex-alias'], ipv4Address: '172.20.0.5' })],
+    })]
+    const container = renderCards(services)
+    const labels = container.querySelectorAll('.card-label')
+    const netLabel = Array.from(labels).find(l => l.textContent === 'Networks')
+    const netSection = netLabel!.parentElement!
+    expect(netSection.textContent).toContain('media')
+    expect(netSection.textContent).toContain('plex-alias')
+    expect(netSection.textContent).toContain('172.20.0.5')
+  })
 })
 
 describe('parseVolume', () => {

tests/markdown.test.ts

@@ -1,6 +1,10 @@
 import { describe, it, expect } from 'vitest'
 import { generateMarkdownTable, generateVolumeComparisonMarkdown } from '../src/markdown'
-import type { ServiceInfo } from '../src/services'
+import type { ServiceInfo, NetworkInfo } from '../src/services'
+
+function net(name: string, opts?: { aliases?: string[]; ipv4Address?: string }): NetworkInfo {
+  return { name, aliases: opts?.aliases ?? [], ipv4Address: opts?.ipv4Address ?? '' }
+}
 
 function makeService(overrides: Partial<ServiceInfo> & { name: string }): ServiceInfo {
   return {
@@ -26,7 +30,7 @@ describe('generateMarkdownTable', () => {
         image: 'linuxserver/sonarr:latest',
         ports: ['8989:8989'],
         volumes: ['/config:/config', '/data:/data'],
-        networks: ['default'],
+        networks: [net('default')],
       }),
     ]
     const result = generateMarkdownTable(services)
@@ -97,7 +101,7 @@ describe('generateMarkdownTable', () => {
         name: 'app',
         image: 'nginx',
         ports: ['80:80', '443:443'],
-        networks: ['frontend', 'backend'],
+        networks: [net('frontend'), net('backend')],
       }),
     ]
     const result = generateMarkdownTable(services)
@@ -114,6 +118,20 @@ describe('generateMarkdownTable', () => {
     expect(result).not.toContain('\n\n') // no double newlines in data
     expect(result).toContain('nginx latest') // newline replaced with space
   })
+
+  it('renders only network name, not aliases or ip', () => {
+    const services = [
+      makeService({
+        name: 'app',
+        image: 'nginx',
+        networks: [net('media', { aliases: ['plex-alias'], ipv4Address: '172.20.0.5' })],
+      }),
+    ]
+    const result = generateMarkdownTable(services)
+    expect(result).toContain('media')
+    expect(result).not.toContain('plex-alias')
+    expect(result).not.toContain('172.20.0.5')
+  })
 })
 
 describe('generateVolumeComparisonMarkdown', () => {

tests/services.test.ts

@@ -149,7 +149,7 @@ describe('parseServices', () => {
 
   // Network extraction
   describe('network extraction', () => {
-    it('extracts networks from dict form', () => {
+    it('extracts networks from dict form with NetworkInfo', () => {
       const compose = {
         services: {
           app: {
@@ -159,7 +159,68 @@ describe('parseServices', () => {
         },
       }
       const result = parseServices(compose)
-      expect(result[0].networks).toEqual(['backend', 'frontend'])
+      expect(result[0].networks).toEqual([
+        { name: 'backend', aliases: [], ipv4Address: '' },
+        { name: 'frontend', aliases: [], ipv4Address: '' },
+      ])
+    })
+
+    it('extracts aliases from dict form', () => {
+      const compose = {
+        services: {
+          app: {
+            image: 'nginx',
+            networks: {
+              media: {
+                aliases: ['plex-media', 'media-server'],
+              },
+            },
+          },
+        },
+      }
+      const result = parseServices(compose)
+      expect(result[0].networks).toEqual([
+        { name: 'media', aliases: ['plex-media', 'media-server'], ipv4Address: '' },
+      ])
+    })
+
+    it('extracts ipv4_address from dict form', () => {
+      const compose = {
+        services: {
+          app: {
+            image: 'nginx',
+            networks: {
+              backend: {
+                ipv4_address: '172.20.0.10',
+              },
+            },
+          },
+        },
+      }
+      const result = parseServices(compose)
+      expect(result[0].networks).toEqual([
+        { name: 'backend', aliases: [], ipv4Address: '172.20.0.10' },
+      ])
+    })
+
+    it('extracts both aliases and ipv4_address', () => {
+      const compose = {
+        services: {
+          app: {
+            image: 'nginx',
+            networks: {
+              media: {
+                aliases: ['plex-alias'],
+                ipv4_address: '172.20.0.5',
+              },
+            },
+          },
+        },
+      }
+      const result = parseServices(compose)
+      expect(result[0].networks).toEqual([
+        { name: 'media', aliases: ['plex-alias'], ipv4Address: '172.20.0.5' },
+      ])
     })
 
     it('extracts networks from array form', () => {
@@ -172,7 +233,10 @@ describe('parseServices', () => {
         },
       }
       const result = parseServices(compose)
-      expect(result[0].networks).toEqual(['backend', 'frontend'])
+      expect(result[0].networks).toEqual([
+        { name: 'backend', aliases: [], ipv4Address: '' },
+        { name: 'frontend', aliases: [], ipv4Address: '' },
+      ])
     })
 
     it('returns empty array when no networks', () => {

tests/volume-table.test.ts

@@ -1,6 +1,10 @@
 import { describe, it, expect } from 'vitest'
 import { renderServiceTable, renderVolumeTable } from '../src/volume-table'
-import type { ServiceInfo } from '../src/services'
+import type { ServiceInfo, NetworkInfo } from '../src/services'
+
+function net(name: string, opts?: { aliases?: string[]; ipv4Address?: string }): NetworkInfo {
+  return { name, aliases: opts?.aliases ?? [], ipv4Address: opts?.ipv4Address ?? '' }
+}
 
 function makeService(overrides: Partial<ServiceInfo> & { name: string }): ServiceInfo {
   return {
@@ -22,7 +26,7 @@ describe('renderServiceTable', () => {
 
   it('renders base columns: Service, Image, Ports, Networks', () => {
     const services = [
-      makeService({ name: 'app', image: 'nginx:latest', ports: ['80:80'], networks: ['frontend'] }),
+      makeService({ name: 'app', image: 'nginx:latest', ports: ['80:80'], networks: [net('frontend')] }),
     ]
     const container = renderServiceTable(services)
     const ths = container.querySelectorAll('th')
@@ -34,7 +38,7 @@ describe('renderServiceTable', () => {
 
   it('renders service data in rows', () => {
     const services = [
-      makeService({ name: 'plex', image: 'plex:latest', ports: ['32400:32400'], networks: ['media'] }),
+      makeService({ name: 'plex', image: 'plex:latest', ports: ['32400:32400'], networks: [net('media')] }),
     ]
     const container = renderServiceTable(services)
     const tds = container.querySelectorAll('tbody td')
@@ -76,6 +80,20 @@ describe('renderServiceTable', () => {
     expect(dbCells[restartIdx]!.textContent).toBe('always')
     expect(dbCells[hostnameIdx]!.textContent).toBe('pg-host')
   })
+
+  it('renders only network name, not aliases or ip', () => {
+    const services = [
+      makeService({
+        name: 'app',
+        image: 'nginx',
+        networks: [net('media', { aliases: ['plex-alias'], ipv4Address: '172.20.0.5' })],
+      }),
+    ]
+    const container = renderServiceTable(services)
+    const tds = container.querySelectorAll('tbody td')
+    // Networks column is index 3 (Service, Image, Ports, Networks)
+    expect(tds[3]!.textContent).toBe('media')
+  })
 })
 
 describe('renderVolumeTable', () => {