feat: add service overview table with ports, networks, and extras

- Add renderServiceTable showing Service, Image, Ports, Networks + dynamic extras columns
- Table tab now shows service overview above volume comparison
- Markdown table includes extras columns (restart, hostname, depends_on, etc.)
- Markdown preview textarea combines both tables
- Remove Volumes column from service table (covered by volume comparison)

Author: bakerboy448

src/main.ts

@@ -11,7 +11,7 @@ import { el } from './dom'
 import { parseServices } from './services'
 import { generateMarkdownTable, generateVolumeComparisonMarkdown } from './markdown'
 import { renderCards } from './cards'
-import { renderVolumeTable } from './volume-table'
+import { renderServiceTable, renderVolumeTable } from './volume-table'
 
 const MAX_INPUT_BYTES = 512 * 1024
 
@@ -378,24 +378,33 @@ function init(): void {
             while (cards.firstChild) {
               cardsContainer.appendChild(cards.firstChild)
             }
+            // Render service overview table
+            const svcTable = renderServiceTable(services)
+            volumesContainer.appendChild(svcTable)
+
             // Render volume comparison table
             const volTable = renderVolumeTable(services)
             volumesContainer.appendChild(volTable)
 
             // Markdown preview textarea
+            const svcMd = generateMarkdownTable(services)
             const volMd = generateVolumeComparisonMarkdown(services)
-            if (volMd) {
+            const mdParts: string[] = []
+            if (svcMd) mdParts.push(svcMd)
+            if (volMd) mdParts.push(volMd)
+            if (mdParts.length > 0) {
+              const combinedMd = mdParts.join('\n\n')
               const mdLabel = el('label')
               mdLabel.textContent = 'Markdown (for pasting into Discord / GitHub):'
               mdLabel.style.marginTop = '0.75rem'
               volumesContainer.appendChild(mdLabel)
               const mdPreview = el('textarea', {
                 className: 'code-textarea',
-                rows: String(Math.min(volMd.split('\n').length + 1, 12)),
+                rows: String(Math.min(combinedMd.split('\n').length + 1, 18)),
                 readonly: 'true',
                 spellcheck: 'false',
               })
-              mdPreview.value = volMd
+              mdPreview.value = combinedMd
               volumesContainer.appendChild(mdPreview)
             }
           }

src/markdown.ts

@@ -35,18 +35,31 @@ export function generateVolumeComparisonMarkdown(services: readonly ServiceInfo[
 export function generateMarkdownTable(services: readonly ServiceInfo[]): string {
   if (services.length === 0) return ''
 
-  const header = '| Service | Image | Ports | Volumes | Networks |'
-  const separator = '| --- | --- | --- | --- | --- |'
+  // Collect extra keys across all services
+  const extraKeys: string[] = []
+  const seen = new Set<string>()
+  for (const svc of services) {
+    for (const key of svc.extras.keys()) {
+      if (!seen.has(key)) {
+        seen.add(key)
+        extraKeys.push(key)
+      }
+    }
+  }
+
+  const columns = ['Service', 'Image', 'Ports', 'Networks', ...extraKeys]
+  const header = `| ${columns.join(' | ')} |`
+  const separator = `| ${columns.map(() => '---').join(' | ')} |`
 
   const rows = services.map(svc => {
-    const cells = [
+    const baseCells = [
       escapeCell(svc.name),
       escapeCell(svc.image),
       escapeCell(joinField([...svc.ports])),
-      escapeCell(joinField([...svc.volumes])),
       escapeCell(joinField([...svc.networks])),
     ]
-    return `| ${cells.join(' | ')} |`
+    const extraCells = extraKeys.map(key => escapeCell(svc.extras.get(key) ?? ''))
+    return `| ${[...baseCells, ...extraCells].join(' | ')} |`
   })
 
   return [header, separator, ...rows].join('\n')

src/volume-table.ts

@@ -6,6 +6,81 @@ function formatCell(mapping: VolumeMapping): string {
   return mapping.mode ? `${mapping.target} (${mapping.mode})` : mapping.target
 }
 
+export function renderServiceTable(services: readonly ServiceInfo[]): HTMLElement {
+  const wrap = el('div', { className: 'volume-table-wrap' })
+  if (services.length === 0) return wrap
+
+  const table = el('table', { className: 'volume-table' })
+
+  // Determine which extra keys exist across all services
+  const extraKeys: string[] = []
+  const seen = new Set<string>()
+  for (const svc of services) {
+    for (const key of svc.extras.keys()) {
+      if (!seen.has(key)) {
+        seen.add(key)
+        extraKeys.push(key)
+      }
+    }
+  }
+
+  // Header
+  const thead = el('thead')
+  const headerRow = el('tr')
+  const columns = ['Service', 'Image', 'Ports', 'Networks', ...extraKeys]
+  for (const col of columns) {
+    const th = el('th')
+    th.textContent = col
+    headerRow.appendChild(th)
+  }
+  thead.appendChild(headerRow)
+  table.appendChild(thead)
+
+  // Body
+  const tbody = el('tbody')
+  for (const svc of services) {
+    const row = el('tr')
+
+    const nameTd = el('td')
+    nameTd.textContent = svc.name
+    nameTd.style.color = 'var(--primary)'
+    nameTd.style.fontWeight = '600'
+    row.appendChild(nameTd)
+
+    const imageTd = el('td')
+    imageTd.textContent = svc.image
+    row.appendChild(imageTd)
+
+    const portsTd = el('td')
+    portsTd.textContent = svc.ports.length > 0 ? [...svc.ports].join(', ') : '\u2014'
+    if (svc.ports.length === 0) portsTd.className = 'vol-empty'
+    row.appendChild(portsTd)
+
+    const netTd = el('td')
+    netTd.textContent = svc.networks.length > 0 ? [...svc.networks].join(', ') : '\u2014'
+    if (svc.networks.length === 0) netTd.className = 'vol-empty'
+    row.appendChild(netTd)
+
+    for (const key of extraKeys) {
+      const td = el('td')
+      const val = svc.extras.get(key)
+      if (val) {
+        td.textContent = val
+      } else {
+        td.textContent = '\u2014'
+        td.className = 'vol-empty'
+      }
+      row.appendChild(td)
+    }
+
+    tbody.appendChild(row)
+  }
+  table.appendChild(tbody)
+
+  wrap.appendChild(table)
+  return wrap
+}
+
 export function renderVolumeTable(services: readonly ServiceInfo[]): HTMLElement {
   const wrap = el('div', { className: 'volume-table-wrap' })
 

tests/markdown.test.ts

@@ -31,15 +31,14 @@ describe('generateMarkdownTable', () => {
     ]
     const result = generateMarkdownTable(services)
     const lines = result.split('\n')
-    // Header row
-    expect(lines[0]).toBe('| Service | Image | Ports | Volumes | Networks |')
+    // Header row (no Volumes column — volumes are in separate comparison table)
+    expect(lines[0]).toBe('| Service | Image | Ports | Networks |')
     // Separator
-    expect(lines[1]).toBe('| --- | --- | --- | --- | --- |')
+    expect(lines[1]).toBe('| --- | --- | --- | --- |')
     // Data row
     expect(lines[2]).toContain('sonarr')
     expect(lines[2]).toContain('linuxserver/sonarr:latest')
     expect(lines[2]).toContain('8989:8989')
-    expect(lines[2]).toContain('/config:/config, /data:/data')
     expect(lines[2]).toContain('default')
   })
 
@@ -62,8 +61,25 @@ describe('generateMarkdownTable', () => {
     const result = generateMarkdownTable(services)
     expect(result).not.toContain('undefined')
     const lines = result.split('\n')
-    // Data row should have empty cells for ports, volumes, networks
-    expect(lines[2]).toBe('| minimal | nginx |  |  |  |')
+    // Data row should have empty cells for ports, networks
+    expect(lines[2]).toBe('| minimal | nginx |  |  |')
+  })
+
+  it('includes extras columns dynamically', () => {
+    const services = [
+      makeService({ name: 'app', image: 'nginx', extras: new Map([['restart', 'unless-stopped'], ['hostname', 'app-host']]) }),
+      makeService({ name: 'db', image: 'postgres', extras: new Map([['restart', 'always']]) }),
+    ]
+    const result = generateMarkdownTable(services)
+    const lines = result.split('\n')
+    // Header includes extras
+    expect(lines[0]).toContain('restart')
+    expect(lines[0]).toContain('hostname')
+    // app row has both
+    expect(lines[2]).toContain('unless-stopped')
+    expect(lines[2]).toContain('app-host')
+    // db row has restart but empty hostname
+    expect(lines[3]).toContain('always')
   })
 
   it('escapes pipe characters in field values', () => {

tests/volume-table.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { renderVolumeTable } from '../src/volume-table'
+import { renderServiceTable, renderVolumeTable } from '../src/volume-table'
 import type { ServiceInfo } from '../src/services'
 
 function makeService(overrides: Partial<ServiceInfo> & { name: string }): ServiceInfo {
@@ -14,6 +14,70 @@ function makeService(overrides: Partial<ServiceInfo> & { name: string }): Servic
   }
 }
 
+describe('renderServiceTable', () => {
+  it('returns empty wrapper for no services', () => {
+    const container = renderServiceTable([])
+    expect(container.querySelector('table')).toBeNull()
+  })
+
+  it('renders base columns: Service, Image, Ports, Networks', () => {
+    const services = [
+      makeService({ name: 'app', image: 'nginx:latest', ports: ['80:80'], networks: ['frontend'] }),
+    ]
+    const container = renderServiceTable(services)
+    const ths = container.querySelectorAll('th')
+    expect(ths[0]!.textContent).toBe('Service')
+    expect(ths[1]!.textContent).toBe('Image')
+    expect(ths[2]!.textContent).toBe('Ports')
+    expect(ths[3]!.textContent).toBe('Networks')
+  })
+
+  it('renders service data in rows', () => {
+    const services = [
+      makeService({ name: 'plex', image: 'plex:latest', ports: ['32400:32400'], networks: ['media'] }),
+    ]
+    const container = renderServiceTable(services)
+    const tds = container.querySelectorAll('tbody td')
+    expect(tds[0]!.textContent).toBe('plex')
+    expect(tds[1]!.textContent).toBe('plex:latest')
+    expect(tds[2]!.textContent).toBe('32400:32400')
+    expect(tds[3]!.textContent).toBe('media')
+  })
+
+  it('shows dash for empty ports and networks', () => {
+    const services = [makeService({ name: 'app', image: 'nginx' })]
+    const container = renderServiceTable(services)
+    const tds = container.querySelectorAll('tbody td')
+    expect(tds[2]!.textContent).toBe('\u2014')
+    expect(tds[3]!.textContent).toBe('\u2014')
+  })
+
+  it('includes extras as dynamic columns', () => {
+    const services = [
+      makeService({ name: 'app', image: 'nginx', extras: new Map([['restart', 'unless-stopped']]) }),
+      makeService({ name: 'db', image: 'postgres', extras: new Map([['restart', 'always'], ['hostname', 'pg-host']]) }),
+    ]
+    const container = renderServiceTable(services)
+    const ths = container.querySelectorAll('th')
+    const headers = Array.from(ths).map(th => th.textContent)
+    expect(headers).toContain('restart')
+    expect(headers).toContain('hostname')
+
+    // app row: has restart, no hostname
+    const rows = container.querySelectorAll('tbody tr')
+    const appCells = rows[0]!.querySelectorAll('td')
+    const restartIdx = headers.indexOf('restart')
+    const hostnameIdx = headers.indexOf('hostname')
+    expect(appCells[restartIdx]!.textContent).toBe('unless-stopped')
+    expect(appCells[hostnameIdx]!.textContent).toBe('\u2014')
+
+    // db row: has both
+    const dbCells = rows[1]!.querySelectorAll('td')
+    expect(dbCells[restartIdx]!.textContent).toBe('always')
+    expect(dbCells[hostnameIdx]!.textContent).toBe('pg-host')
+  })
+})
+
 describe('renderVolumeTable', () => {
   it('returns empty div for no services', () => {
     const table = renderVolumeTable([])