Enhance port conflict detection with structured data and visual UI

[Copilot]

Docker Compose Maker

Type of Change

• 📦 New Container Definition
• 🐛 Bug Fix
• ✨ New Feature
• 📝 Documentation Update
• 🎨 UI/Style Improvement
• ♻️ Code Refactoring
• 🔧 Configuration Changes
• 🚀 Performance Improvement
• ⚙️ CI/Build Changes
• 🔥 Breaking Change
• 🧪 Test

Description

Port conflict detection now returns structured data and renders with visual indicators showing which services keep/lose ports and their reassignments.

Core Changes

Type System (lib/docker-compose/port-conflicts.ts)

• New types: PortChange, PortConflict, PortConflictsResult replace string arrays
• Tracks which service keeps original port, which get reassigned, and the old→new mappings per service

Regex Bug Fix

• Previous pattern: [\s\S]*? matched across service boundaries after port replacement
• Fixed with negative lookahead: (?![^\n]*\n\s{2}[a-zA-Z0-9_-]+:) prevents cross-service matching
• Removed while loop - each service only has one conflict per port

UI Component (components/compose-modal/PortConflictsAlert.tsx)

• Port badges: destructive red, monospace
• Service badges: green (✓) for kept, yellow (✗) for reassigned
• Port transitions: red old → green new with arrow icon
• Grouped by port number in card layout

Example

// Before: string array
conflicts: ["Port 8096 was used by: jellyfin, plex, emby\n  → Changed plex: 8096 → 8097"]

// After: structured data
detailedConflicts: [{
  port: "8096",
  affectedServices: ["jellyfin", "plex", "emby"],
  keptService: "jellyfin",
  changes: [
    { service: "plex", oldPort: "8096", newPort: "8097" },
    { service: "emby", oldPort: "8096", newPort: "8098" }
  ]
}]

Test Coverage

• 12 new tests: simple/multiple/three-way conflicts, quote variations, cross-service boundary regression

Checklist

• PR targets the main branch
• Code builds without warnings or errors
• Commits follow the conventional commits guideline
• No shorthand variable names are used
• Tests have been added for new functionality

This PR is in accordance with the CONTRIBUTING.md guidelines.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/dcm/dcm/node_modules/.bin/next build ker/cli-plugins/docker-compose n-me�� config --quiet /usr/libexec/docker/docker-init config --quiet docker-compose /usr/libexec/docker/docker-init --ve�� (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Enhance port conflict detection and resolution logic</issue_title>
<issue_description>Problem: The current auto-port conflict resolver works, but further improvements could:

• Show the user which containers have port conflicts
• Suggest alternative ports and allow selection
• Visualize port changes

Context: See ENHANCEMENTS.md and lib/docker-compose/port-conflicts.ts for current implementation.</issue_description>

<agent_instructions>use bun package manager </agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Enhance port conflict detection and resolution logic #76

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.