feat: add service cards, tabbed output, and markdown table

Parse Docker Compose YAML into structured ServiceInfo[] with normalized
ports, volumes, networks, environment, and extras. Render per-service
cards in a responsive two-column grid. Add tabbed YAML/Cards output
switching and a "Copy as Markdown Table" button for sharing in Discord
or GitHub support channels.

New modules: dom.ts, services.ts, markdown.ts, cards.ts
Tests: 150 passing (46 new across 3 test files)
Rebrand: Docker Compose Sanitizer → Compose Debugger

Author: bakerboy448

CLAUDE.md

@@ -1,4 +1,4 @@
-# Compose Sanitizer
+# Compose Debugger
 
 ## Build
 npm install && npm run build

README.md

@@ -1,16 +1,24 @@
-# Docker Compose Sanitizer
+# Compose Debugger
 
-Browser-based tool that redacts sensitive values from Docker Compose YAML while preserving debugging-relevant structure. Paste output from `docker-autocompose`, `docker compose config`, or raw `docker-compose.yml` and get back a version safe to share in support channels.
+Browser-based tool for parsing Docker Compose output into structured debugging views. Paste output from `docker-autocompose`, `docker compose config`, or raw `docker-compose.yml` — get sanitized YAML, per-service cards, and a markdown table ready for Discord or GitHub support channels.
 
 **Live:** [bakerboy448.github.io/compose-sanitizer](https://bakerboy448.github.io/compose-sanitizer/)
 
 ## Features
 
+### Service Cards
+
+Parsed per-service view showing image, ports, volumes, networks, environment, and extras (restart policy, hostname, depends_on, resource limits). Empty sections are omitted. Switch between YAML and Cards views with the tab bar.
+
+### Markdown Table
+
+One-click "Copy as Markdown Table" generates a table with columns for Service, Image, Ports, Volumes, and Networks — paste directly into Discord or GitHub issues.
+
 ### Redaction
 
 | What | Example | Result |
 |------|---------|--------|
-| Sensitive env values | `MYSQL_PASSWORD: supersecret` | `MYSQL_PASSWORD: **REDACTED**` |
+| Sensitive env values | `RADARR__POSTGRES__HOST: db.example.com` | `RADARR__POSTGRES__HOST: **REDACTED**` |
 | Email addresses | `NOTIFY: [email protected]` | `NOTIFY: **REDACTED**` |
 | Home directory paths | `/home/john/media:/tv` | `~/media:/tv` |
 
@@ -26,7 +34,7 @@ Removes auto-generated fields that clutter compose output:
 - S6-overlay env vars (`S6_*`)
 - Default runtime values (`ipc: private`, `entrypoint: /init`)
 - Locale/path env vars (`PATH`, `LANG`, `XDG_*`)
-- Empty maps and arrays
+- Empty env values and empty maps/arrays
 
 ### Advisories
 
@@ -44,7 +52,7 @@ Accepts multiple input formats:
 
 ### Customizable Patterns
 
-The Settings panel allows custom sensitive patterns (regex) and safe key lists. Configuration persists in `localStorage`.
+The Advanced Settings panel allows custom sensitive patterns (regex) and safe key lists. Configuration persists in `localStorage`.
 
 ## Self-Hosting
 
@@ -65,21 +73,23 @@ Single-page app built with Vite + vanilla TypeScript. The build produces one sel
 
 ```
 src/
-  patterns.ts     # Shared type guards, regex patterns, utility functions
+  dom.ts          # Shared el() DOM helper (no innerHTML)
+  patterns.ts     # Type guards, regex patterns, utility functions
   extract.ts      # Extracts YAML from mixed console output
   redact.ts       # Redacts sensitive values, anonymizes paths
   noise.ts        # Strips auto-generated noise fields
   advisories.ts   # Detects misconfigurations (hardlinks, etc.)
+  services.ts     # Parses compose object into ServiceInfo[]
+  markdown.ts     # Generates markdown table from ServiceInfo[]
+  cards.ts        # Renders per-service card DOM
   config.ts       # Customizable patterns, localStorage persistence
   clipboard.ts    # Copy, PrivateBin, and Gist sharing
   disclaimer.ts   # PII warnings and legal disclaimers
-  main.ts         # UI assembly and event wiring
+  main.ts         # UI assembly, tabs, and event wiring
 ```
 
 ### Testing
 
-104 tests across 7 test files with >93% statement coverage:
-
 ```bash
 npm test                       # Run tests
 npx vitest run --coverage      # Run with coverage report

index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self'; font-src 'self'; base-uri 'none'">
-  <title>Docker Compose Sanitizer</title>
+  <title>Compose Debugger</title>
   <style>
     :root {
       --bg: #1a1a2e;
@@ -273,6 +273,83 @@
 
     .footer a { color: var(--text); }
 
+    /* Tab bar */
+    .tab-bar {
+      display: flex;
+      gap: 0;
+      margin: 0.75rem 0 0;
+      border-bottom: 2px solid var(--border);
+    }
+
+    .tab-btn {
+      padding: 0.5rem 1.2rem;
+      font-size: 0.9rem;
+      font-weight: 500;
+      border: none;
+      background: transparent;
+      color: var(--text-muted);
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -2px;
+      transition: color 0.15s, border-color 0.15s;
+    }
+
+    .tab-btn:hover { color: var(--text); }
+
+    .tab-btn.active {
+      color: var(--primary);
+      border-bottom-color: var(--primary);
+    }
+
+    /* Cards */
+    .cards-container {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+      gap: 0.75rem;
+      max-height: 600px;
+      overflow-y: auto;
+      padding: 0.5rem 0;
+    }
+
+    .card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 0.75rem;
+    }
+
+    .card-header {
+      font-size: 1rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+      padding-bottom: 0.4rem;
+      border-bottom: 1px solid var(--border);
+      color: var(--primary);
+    }
+
+    .card-section {
+      margin-top: 0.4rem;
+      display: flex;
+      gap: 0.75rem;
+      align-items: baseline;
+    }
+
+    .card-label {
+      font-size: 0.8rem;
+      font-weight: 600;
+      color: var(--text-muted);
+      min-width: 100px;
+      flex-shrink: 0;
+    }
+
+    .card-value {
+      font-family: var(--mono);
+      font-size: 0.8rem;
+      white-space: pre-wrap;
+      word-break: break-all;
+      color: var(--text);
+    }
+
     .hidden { display: none !important; }
   </style>
 </head>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "compose-sanitizer",
   "version": "0.1.0",
-  "description": "Browser-based Docker Compose sanitizer — redacts secrets, keeps debugging info",
+  "description": "Browser-based Docker Compose debugger — redacts secrets, shows service cards, and generates markdown tables for support channels",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/cards.ts

@@ -0,0 +1,87 @@
+import { el } from './dom'
+import type { ServiceInfo } from './services'
+
+function renderListSection(label: string, items: readonly string[]): HTMLElement {
+  const section = el('div', { className: 'card-section' })
+  const labelEl = el('div', { className: 'card-label' })
+  labelEl.textContent = label
+  section.appendChild(labelEl)
+
+  const valueEl = el('div', { className: 'card-value' })
+  valueEl.textContent = items.join('\n')
+  section.appendChild(valueEl)
+
+  return section
+}
+
+function renderMapSection(label: string, entries: ReadonlyMap<string, string>): HTMLElement {
+  const section = el('div', { className: 'card-section' })
+  const labelEl = el('div', { className: 'card-label' })
+  labelEl.textContent = label
+  section.appendChild(labelEl)
+
+  const valueEl = el('div', { className: 'card-value' })
+  const lines = Array.from(entries).map(([k, v]) => `${k}=${v}`)
+  valueEl.textContent = lines.join('\n')
+  section.appendChild(valueEl)
+
+  return section
+}
+
+function renderCard(service: ServiceInfo): HTMLElement {
+  const card = el('div', { className: 'card' })
+
+  const header = el('div', { className: 'card-header' })
+  header.textContent = service.name
+  card.appendChild(header)
+
+  // Image (always shown if present)
+  if (service.image) {
+    const section = el('div', { className: 'card-section' })
+    const label = el('div', { className: 'card-label' })
+    label.textContent = 'Image'
+    section.appendChild(label)
+    const value = el('div', { className: 'card-value' })
+    value.textContent = service.image
+    section.appendChild(value)
+    card.appendChild(section)
+  }
+
+  if (service.ports.length > 0) {
+    card.appendChild(renderListSection('Ports', service.ports))
+  }
+
+  if (service.volumes.length > 0) {
+    card.appendChild(renderListSection('Volumes', service.volumes))
+  }
+
+  if (service.networks.length > 0) {
+    card.appendChild(renderListSection('Networks', service.networks))
+  }
+
+  if (service.environment.size > 0) {
+    card.appendChild(renderMapSection('Environment', service.environment))
+  }
+
+  // Extras rendered as individual labeled fields
+  for (const [key, value] of service.extras) {
+    const section = el('div', { className: 'card-section' })
+    const label = el('div', { className: 'card-label' })
+    label.textContent = key
+    section.appendChild(label)
+    const valueEl = el('div', { className: 'card-value' })
+    valueEl.textContent = value
+    section.appendChild(valueEl)
+    card.appendChild(section)
+  }
+
+  return card
+}
+
+export function renderCards(services: readonly ServiceInfo[]): HTMLElement {
+  const container = el('div', { className: 'cards-container' })
+  for (const service of services) {
+    container.appendChild(renderCard(service))
+  }
+  return container
+}

src/dom.ts

@@ -0,0 +1,26 @@
+export function el<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  attrs?: Record<string, string>,
+  children?: (HTMLElement | string)[],
+): HTMLElementTagNameMap[K] {
+  const element = document.createElement(tag)
+  if (attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      if (key === 'className') {
+        element.className = value
+      } else {
+        element.setAttribute(key, value)
+      }
+    }
+  }
+  if (children) {
+    for (const child of children) {
+      if (typeof child === 'string') {
+        element.appendChild(document.createTextNode(child))
+      } else {
+        element.appendChild(child)
+      }
+    }
+  }
+  return element
+}