feat: structured volume rendering, cross-service volume table, mobile layout

- Replace raw volume strings in cards with parsed grid (source → target mode)
- Add Volumes tab with cross-service comparison table (host paths × services)
- Add volume comparison markdown export (Copy Volume Table button)
- Add mobile-responsive CSS (@media max-width: 640px)
- Extract shared buildVolumeMatrix() into volume-utils.ts
- Support compound volume modes (ro,z) and nocopy option

Author: bakerboy448

index.html

@@ -350,6 +350,123 @@
       color: var(--text);
     }
 
+    /* Volume mini-table in cards */
+    .vol-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
+      gap: 0.15rem 0.5rem;
+      font-family: var(--mono);
+      font-size: 0.8rem;
+      color: var(--text);
+    }
+
+    .vol-source {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .vol-arrow {
+      color: var(--text-muted);
+      user-select: none;
+    }
+
+    .vol-target {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .vol-mode {
+      color: var(--text-muted);
+      font-size: 0.75rem;
+    }
+
+    /* Cross-service volume comparison table */
+    .volume-table-wrap {
+      overflow-x: auto;
+      max-height: 600px;
+      overflow-y: auto;
+      padding: 0.5rem 0;
+    }
+
+    .volume-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-family: var(--mono);
+      font-size: 0.8rem;
+    }
+
+    .volume-table th,
+    .volume-table td {
+      padding: 0.35rem 0.6rem;
+      border: 1px solid var(--border);
+      text-align: left;
+      white-space: nowrap;
+    }
+
+    .volume-table th {
+      background: var(--surface);
+      color: var(--primary);
+      font-weight: 600;
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    .volume-table td {
+      background: var(--bg);
+      color: var(--text);
+    }
+
+    .volume-table td.vol-empty {
+      color: var(--text-muted);
+      text-align: center;
+    }
+
+    /* Mobile responsive */
+    @media (max-width: 640px) {
+      #app {
+        padding: 1rem 0.75rem;
+      }
+
+      .code-textarea {
+        font-size: 0.78rem;
+      }
+
+      .cards-container {
+        grid-template-columns: 1fr;
+      }
+
+      .card-section {
+        flex-direction: column;
+        gap: 0.2rem;
+      }
+
+      .card-label {
+        min-width: unset;
+      }
+
+      .tab-btn {
+        padding: 0.4rem 0.8rem;
+        font-size: 0.85rem;
+      }
+
+      .volume-table-wrap {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      .actions {
+        flex-direction: column;
+      }
+
+      .actions .btn {
+        width: 100%;
+        text-align: center;
+      }
+    }
+
     .hidden { display: none !important; }
   </style>
 </head>

src/cards.ts

@@ -1,6 +1,73 @@
 import { el } from './dom'
 import type { ServiceInfo } from './services'
 
+const VOLUME_MODES: ReadonlySet<string> = new Set([
+  'ro', 'rw', 'z', 'Z', 'shared', 'slave', 'private', 'rshared', 'rslave', 'rprivate',
+  'consistent', 'cached', 'delegated', 'nocopy',
+])
+
+function isVolumeMode(segment: string): boolean {
+  if (segment === '') return false
+  return segment.split(',').every(opt => VOLUME_MODES.has(opt))
+}
+
+export interface ParsedVolume {
+  readonly source: string
+  readonly target: string
+  readonly mode: string
+}
+
+export function parseVolume(vol: string): ParsedVolume {
+  const parts = vol.split(':')
+  if (parts.length >= 3) {
+    const last = parts[parts.length - 1]!
+    if (isVolumeMode(last)) {
+      return {
+        source: parts.slice(0, -2).join(':'),
+        target: parts[parts.length - 2]!,
+        mode: last,
+      }
+    }
+  }
+  if (parts.length >= 2) {
+    return { source: parts[0]!, target: parts.slice(1).join(':'), mode: '' }
+  }
+  return { source: vol, target: '', mode: '' }
+}
+
+function renderVolumesSection(volumes: readonly string[]): HTMLElement {
+  const section = el('div', { className: 'card-section' })
+  const labelEl = el('div', { className: 'card-label' })
+  labelEl.textContent = 'Volumes'
+  section.appendChild(labelEl)
+
+  const grid = el('div', { className: 'vol-grid' })
+  for (const vol of volumes) {
+    const parsed = parseVolume(vol)
+
+    const sourceEl = el('span', { className: 'vol-source' })
+    sourceEl.textContent = parsed.source
+    sourceEl.title = parsed.source
+    grid.appendChild(sourceEl)
+
+    const arrowEl = el('span', { className: 'vol-arrow' })
+    arrowEl.textContent = '\u2192'
+    grid.appendChild(arrowEl)
+
+    const targetEl = el('span', { className: 'vol-target' })
+    targetEl.textContent = parsed.target
+    targetEl.title = parsed.target
+    grid.appendChild(targetEl)
+
+    const modeEl = el('span', { className: 'vol-mode' })
+    modeEl.textContent = parsed.mode
+    grid.appendChild(modeEl)
+  }
+
+  section.appendChild(grid)
+  return section
+}
+
 function renderListSection(label: string, items: readonly string[]): HTMLElement {
   const section = el('div', { className: 'card-section' })
   const labelEl = el('div', { className: 'card-label' })
@@ -52,7 +119,7 @@ function renderCard(service: ServiceInfo): HTMLElement {
   }
 
   if (service.volumes.length > 0) {
-    card.appendChild(renderListSection('Volumes', service.volumes))
+    card.appendChild(renderVolumesSection(service.volumes))
   }
 
   if (service.networks.length > 0) {

src/main.ts

@@ -9,8 +9,9 @@ import { copyToClipboard, openPrivateBin, openGist } from './clipboard'
 import { createShortNotice, createPiiWarning, createFullDisclaimer } from './disclaimer'
 import { el } from './dom'
 import { parseServices } from './services'
-import { generateMarkdownTable } from './markdown'
+import { generateMarkdownTable, generateVolumeComparisonMarkdown } from './markdown'
 import { renderCards } from './cards'
+import { renderVolumeTable } from './volume-table'
 
 const MAX_INPUT_BYTES = 512 * 1024
 
@@ -197,6 +198,9 @@ function init(): void {
   const cardsTab = el('button', { className: 'tab-btn' })
   cardsTab.textContent = 'Cards'
   tabBar.appendChild(cardsTab)
+  const volumesTab = el('button', { className: 'tab-btn' })
+  volumesTab.textContent = 'Volumes'
+  tabBar.appendChild(volumesTab)
   app.appendChild(tabBar)
 
   // Output textarea (YAML view)
@@ -213,22 +217,35 @@ function init(): void {
   const cardsContainer = el('div', { id: 'cards', className: 'cards-container hidden' })
   app.appendChild(cardsContainer)
 
+  // Volumes container (hidden by default)
+  const volumesContainer = el('div', { id: 'volumes', className: 'hidden' })
+  app.appendChild(volumesContainer)
+
   // Track current parsed object for markdown generation
   let currentParsed: Record<string, unknown> | null = null
 
   // Tab switching
-  yamlTab.addEventListener('click', () => {
-    yamlTab.classList.add('active')
-    cardsTab.classList.remove('active')
-    output.classList.remove('hidden')
-    cardsContainer.classList.add('hidden')
-  })
-  cardsTab.addEventListener('click', () => {
-    cardsTab.classList.add('active')
-    yamlTab.classList.remove('active')
-    cardsContainer.classList.remove('hidden')
-    output.classList.add('hidden')
-  })
+  const tabs = [
+    { btn: yamlTab, panel: output },
+    { btn: cardsTab, panel: cardsContainer },
+    { btn: volumesTab, panel: volumesContainer },
+  ] as const
+
+  function switchTab(activeBtn: HTMLElement): void {
+    for (const tab of tabs) {
+      if (tab.btn === activeBtn) {
+        tab.btn.classList.add('active')
+        tab.panel.classList.remove('hidden')
+      } else {
+        tab.btn.classList.remove('active')
+        tab.panel.classList.add('hidden')
+      }
+    }
+  }
+
+  yamlTab.addEventListener('click', () => switchTab(yamlTab))
+  cardsTab.addEventListener('click', () => switchTab(cardsTab))
+  volumesTab.addEventListener('click', () => switchTab(volumesTab))
 
   // Action buttons
   const actions = el('div', { id: 'actions', className: 'actions hidden' })
@@ -258,6 +275,21 @@ function init(): void {
   })
   actions.appendChild(mdBtn)
 
+  const volMdBtn = el('button', { className: 'btn btn-secondary' })
+  volMdBtn.textContent = 'Copy Volume Table'
+  volMdBtn.addEventListener('click', async () => {
+    if (currentParsed) {
+      const services = parseServices(currentParsed)
+      const md = generateVolumeComparisonMarkdown(services)
+      const ok = await copyToClipboard(md || 'No volumes found')
+      volMdBtn.textContent = ok ? 'Copied!' : 'Copy failed'
+    } else {
+      volMdBtn.textContent = 'No data'
+    }
+    setTimeout(() => { volMdBtn.textContent = 'Copy Volume Table' }, 1500)
+  })
+  actions.appendChild(volMdBtn)
+
   const pbBtn = el('button', { className: 'btn btn-secondary' })
   pbBtn.textContent = 'Open PrivateBin'
   pbBtn.addEventListener('click', async () => {
@@ -300,6 +332,7 @@ function init(): void {
     const hideOutput = () => {
       output.classList.add('hidden')
       cardsContainer.classList.add('hidden')
+      volumesContainer.classList.add('hidden')
       tabBar.classList.add('hidden')
       piiWarning.classList.add('hidden')
       actions.classList.add('hidden')
@@ -338,13 +371,11 @@ function init(): void {
         currentParsed = result.parsed
 
         // Reset to YAML tab
-        yamlTab.classList.add('active')
-        cardsTab.classList.remove('active')
-        output.classList.remove('hidden')
-        cardsContainer.classList.add('hidden')
+        switchTab(yamlTab)
 
-        // Render cards
+        // Render cards + volume table
         cardsContainer.replaceChildren()
+        volumesContainer.replaceChildren()
         if (result.parsed) {
           const services = parseServices(result.parsed)
           if (services.length > 0) {
@@ -353,6 +384,9 @@ function init(): void {
             while (cards.firstChild) {
               cardsContainer.appendChild(cards.firstChild)
             }
+            // Render volume comparison table
+            const volTable = renderVolumeTable(services)
+            volumesContainer.appendChild(volTable)
           }
         }
 

src/markdown.ts

@@ -1,3 +1,4 @@
+import { buildVolumeMatrix } from './volume-utils'
 import type { ServiceInfo } from './services'
 
 function escapeCell(value: string): string {
@@ -8,6 +9,29 @@ function joinField(values: readonly string[]): string {
   return values.join(', ')
 }
 
+export function generateVolumeComparisonMarkdown(services: readonly ServiceInfo[]): string {
+  if (services.length === 0) return ''
+
+  const { hostPaths, matrix } = buildVolumeMatrix(services)
+  if (hostPaths.length === 0) return ''
+
+  const header = `| Host Path | ${services.map(s => escapeCell(s.name)).join(' | ')} |`
+  const separator = `| --- | ${services.map(() => '---').join(' | ')} |`
+
+  const rows = hostPaths.map(hp => {
+    const serviceMap = matrix.get(hp) ?? new Map()
+    const cells = services.map(svc => {
+      const mapping = serviceMap.get(svc.name)
+      if (!mapping) return '\u2014'
+      const cell = mapping.mode ? `${mapping.target} (${mapping.mode})` : mapping.target
+      return escapeCell(cell)
+    })
+    return `| ${escapeCell(hp)} | ${cells.join(' | ')} |`
+  })
+
+  return [header, separator, ...rows].join('\n')
+}
+
 export function generateMarkdownTable(services: readonly ServiceInfo[]): string {
   if (services.length === 0) return ''