find-duplicate-js 1.2.0 → 1.3.1

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.3.1] - 2025-12-31
+
+### 📝 Changes
+
+#### Simplified Command Names
+- **Changed Command**: `find-duplicates` → `find-duplicate` (removed 's')
+- **Changed UI Command**: `find-duplicates-ui` → `find-duplicate-ui` (removed 's')
+- **Reason**: Avoid confusion - file names have 's' (find-duplicates.js) but commands don't
+- **Backwards Compatibility**: Old commands may still work in cached installations
+
+**New Usage:**
+```bash
+find-duplicate ./src 80
+find-duplicate --ui ./src
+find-duplicate-ui ./src
+```
+
+## [1.3.0] - 2025-12-31
+
+### 🚀 New Features
+
+#### Unified CLI with --ui Flag
+- **Single Command**: No need for separate `find-duplicates-ui` command
+- **--ui Flag**: Add `--ui` flag to launch web interface from main command
+  - Example: `find-duplicates --ui ./src 80`
+- **Backwards Compatible**: `find-duplicates-ui` command still works
+- **Updated npm Scripts**: `npm run ui` now uses the `--ui` flag
+
+### ✨ Improvements
+- **Simplified Usage**: One command for both CLI and UI modes
+- **Better UX**: More intuitive flag-based interface
+- **Cleaner Architecture**: UI server code integrated into main file
+
 ## [1.2.0] - 2025-12-31
 
 ### 🚀 New Features

package/README.md

@@ -1,381 +1,393 @@
-# 🔍 Find Duplicate JS
-
-[![npm version](https://img.shields.io/npm/v/find-duplicate-js.svg)](https://www.npmjs.com/package/find-duplicate-js)
-[![npm downloads](https://img.shields.io/npm/dm/find-duplicate-js.svg)](https://www.npmjs.com/package/find-duplicate-js)
-[![license](https://img.shields.io/npm/l/find-duplicate-js.svg)](https://github.com/benshabbat/find-duplicate-js/blob/main/LICENSE)
-
-A powerful and intelligent tool to detect duplicate and similar code in JavaScript projects. Find Duplicate JS helps you maintain cleaner codebases by automatically identifying redundant functions and code patterns across your project.
-
-## 📋 Table of Contents
-
-- [Why Use Find Duplicate JS?](#why-use-find-duplicate-js)
-- [Features](#features)
-- [Installation](#installation)
-- [Usage](#usage)
-  - [CLI Mode](#cli-mode)
-  - [Web UI Mode](#web-ui-mode)
-- [How It Works](#how-it-works)
-- [Configuration Options](#configuration-options)
-- [Examples](#examples)
-- [API](#api)
-- [Contributing](#contributing)
-- [Links](#links)
-- [License](#license)
-
-## 🎯 Why Use Find Duplicate JS?
-
-Duplicate code is a common problem in software development that leads to:
-- **Maintenance Headaches**: Fixing bugs requires updating code in multiple places
-- **Increased File Size**: Unnecessary code bloat
-- **Inconsistencies**: Changes in one place might not be reflected elsewhere
-- **Technical Debt**: Harder to refactor and improve code quality
-
-Find Duplicate JS helps you identify these issues automatically, saving time and improving code quality.
-
-## ✨ Features
-
-- **🎯 Smart Function Detection**: Recognizes multiple function types
-  - Arrow functions (`const func = () => {}`)
-  - Function declarations (`function func() {}`)
-  - Class methods and object methods
-  - Async functions
-  
-- **🧠 Intelligent Code Analysis**: 
-  - Normalizes code to ignore irrelevant differences (whitespace, comments, variable names)
-  - Uses Levenshtein distance algorithm for accurate similarity scoring
-  - Configurable similarity threshold (default 70%)
-
-- **🎨 Two Usage Modes**:
-  - **CLI Mode**: Quick terminal-based analysis with detailed text output
-  - **Web UI Mode**: Beautiful, interactive web interface with visual comparisons
-
-- **⚡ Performance**:
-  - Recursively scans entire project directories
-  - Automatically skips `node_modules`, `.git`, `dist`, and `build` folders
-  - Handles both `.js` and `.jsx` files
-
-- **🔧 Zero Configuration**: Works out of the box with sensible defaults
-
-## 📦 Installation
-
-### Global Installation (Recommended)
-
-```bash
-npm install -g find-duplicate-js
-```
-
-### Local Installation
-
-```bash
-npm install --save-dev find-duplicate-js
-```
-
-Then add to your `package.json` scripts:
-
-```json
-{
-  "scripts": {
-    "find-duplicates": "find-duplicates",
-    "find-duplicates-ui": "find-duplicates-ui"
-  }
-}
-```
-
-## 🚀 Usage
-
-### CLI Mode
-
-Run a quick analysis from the command line and get results in your terminal:
-
-```bash
-# Analyze current directory with default threshold (70%)
-find-duplicates
-
-# Analyze specific directory
-find-duplicates ./src
-
-# Custom similarity threshold (80%)
-find-duplicates ./src 80
-
-# Analyze entire project
-find-duplicates . 75
-```
-
-**CLI Output Example:**
-
-```
-🚀 Searching for duplicate code in: ./src
-📏 Similarity threshold: 70%
-
-🔍 Scanning 15 JavaScript files...
-
-📊 Found 42 functions total
-
-⚠️  Found 3 pairs of similar functions:
-
-═══════════════════════════════════════════════════════════════════════════════════════
-
-📋 Match #1 - Similarity: 95.5%
-
-   File 1: src/utils/math.js
-   Function: calculateTotal()
-   Code: const sum = items.reduce((acc, item) => acc + item.price, 0)...
-
-   File 2: src/components/cart.js
-   Function: getTotalPrice()
-   Code: const total = products.reduce((acc, prod) => acc + prod.pri...
-
-─────────────────────────────────────────────────────────────────────────────────────
-
-💡 Summary: Found 3 duplicate function pairs
-```
-
-### Web UI Mode
-
-Launch an interactive web interface for a better visual experience:
-
-```bash
-# Start web UI server (opens browser automatically)
-find-duplicates-ui
-
-# Analyze specific directory
-find-duplicates-ui ./src
-
-# Custom threshold
-find-duplicates-ui ./src 80
-```
-
-The web interface will:
-1. Start a local server on `http://localhost:2712`
-2. Automatically open your default browser
-3. Display an interactive dashboard with:
-   - Project statistics
-   - Color-coded duplicate pairs
-   - Side-by-side code comparison
-   - Similarity percentages
-   - File paths and function names
-
-**Features in Web UI:**
-- 📊 **Statistics Dashboard**: Overview of scanned files, functions found, and duplicates
-- 🎨 **Beautiful Design**: Modern, responsive interface
-- 🔄 **Live Refresh**: Re-analyze your code with a single click
-- 📱 **Mobile Friendly**: Works on all devices
-- 🎯 **Easy Navigation**: Jump directly to problematic code
-
-## 🔧 How It Works
-
-### 1. **File Discovery**
-Recursively scans your project directory and finds all `.js` and `.jsx` files, while intelligently skipping:
-- `node_modules`
-- `.git`
-- `dist`
-- `build`
-
-### 2. **Function Extraction**
-Uses sophisticated regex patterns to identify and extract:
-- Arrow functions with `const`, `let`, or `var`
-- Traditional function declarations
-- Class and object methods
-- Async functions
-
-### 3. **Code Normalization**
-Before comparison, the code is normalized to focus on logic rather than style:
-- Removes all whitespace and line breaks
-- Strips comments (single-line and multi-line)
-- Replaces variable names with generic placeholders
-- Replaces string literals with generic strings
-- Removes template literals
-
-**Example:**
-```javascript
-// Original Code
-function calculateSum(num1, num2) {
-  // Calculate sum of two numbers
-  const result = num1 + num2;
-  return result;
-}
-
-// Normalized Code
-V(){V=V+V;V;}
-```
-
-### 4. **Similarity Calculation**
-Uses the **Levenshtein Distance** algorithm to calculate how similar two functions are:
-- Measures the minimum number of edits needed to transform one string into another
-- Converts to a percentage (0-100%)
-- Compares against your configured threshold
-
-### 5. **Results Presentation**
-Presents findings in an easy-to-understand format (CLI or Web UI) showing:
-- Which functions are similar
-- Their similarity percentage
-- File locations
-- Code previews
-
-## ⚙️ Configuration Options
-
-### Command Line Arguments
-
-```bash
-find-duplicates [directory] [threshold]
-find-duplicates-ui [directory] [threshold]
-```
-
-**Parameters:**
-- `directory` (optional): Path to analyze. Default: current directory (`.`)
-- `threshold` (optional): Similarity percentage (0-100). Default: `70`
-
-### Examples:
-
-```bash
-# Very strict (only near-identical code)
-find-duplicates ./src 95
-
-# Moderate (recommended)
-find-duplicates ./src 70
-
-# Lenient (catches more potential duplicates)
-find-duplicates ./src 50
-```
-
-### Threshold Guidelines:
-
-- **90-100%**: Nearly identical functions (different variable names only)
-- **70-89%**: Very similar logic with minor variations
-- **50-69%**: Similar patterns but with notable differences
-- **Below 50%**: May produce many false positives
-
-## 📚 Examples
-
-### Example 1: Finding Exact Duplicates
-
-**File 1: `auth.js`**
-```javascript
-function validateUser(username, password) {
-  if (!username || !password) {
-    return false;
-  }
-  return true;
-}
-```
-
-**File 2: `login.js`**
-```javascript
-function checkCredentials(user, pass) {
-  if (!user || !pass) {
-    return false;
-  }
-  return true;
-}
-```
-
-**Result**: 100% similarity - Same logic, different names
-
-### Example 2: Similar Functions
-
-**File 1: `cart.js`**
-```javascript
-const calculateTotal = (items) => {
-  return items.reduce((sum, item) => sum + item.price, 0);
-}
-```
-
-**File 2: `checkout.js`**
-```javascript
-const getTotalPrice = (products) => {
-  let total = 0;
-  products.forEach(product => {
-    total += product.price;
-  });
-  return total;
-}
-```
-
-**Result**: ~75% similarity - Same logic, different implementation
-
-## 🔌 API
-
-You can also use Find Duplicate JS programmatically in your Node.js projects:
-
-```javascript
-import { findDuplicates, findJsFiles } from 'find-duplicate-js';
-
-// Find all JavaScript files
-const files = findJsFiles('./src');
-console.log(`Found ${files.length} files`);
-
-// Find duplicates with 70% threshold
-const result = findDuplicates('./src', 70);
-
-console.log(`Total functions: ${result.totalFunctions}`);
-console.log(`Duplicate pairs: ${result.duplicates.length}`);
-
-// Iterate through duplicates
-result.duplicates.forEach((dup, index) => {
-  console.log(`\nMatch #${index + 1}:`);
-  console.log(`Similarity: ${dup.similarity}%`);
-  console.log(`Function 1: ${dup.func1.name} in ${dup.func1.filePath}`);
-  console.log(`Function 2: ${dup.func2.name} in ${dup.func2.filePath}`);
-});
-```
-
-### Available Functions
-
-#### `findJsFiles(directory)`
-Returns an array of all `.js` and `.jsx` file paths in the directory.
-
-#### `findDuplicates(directory, threshold = 70)`
-Analyzes the directory and returns:
-```javascript
-{
-  duplicates: [
-    {
-      func1: { name, body, originalBody, filePath, startIndex },
-      func2: { name, body, originalBody, filePath, startIndex },
-      similarity: "95.50"
-    }
-  ],
-  totalFunctions: 42
-}
-```
-
-#### `calculateSimilarity(code1, code2)`
-Calculates similarity percentage between two code strings.
-
-#### `normalizeCode(code)`
-Normalizes JavaScript code for comparison.
-
-## 🤝 Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
-
-### Development Setup
-
-```bash
-# Clone the repository
-git clone https://github.com/benshabbat/find-duplicate-js.git
-
-# Install dependencies
-cd find-duplicate-js
-npm install
-
-# Run locally
-node find-duplicates.js ./src
-node find-duplicates-ui.js ./src
-```
-
-## 🔗 Links
-
-- [npm Package](https://www.npmjs.com/package/find-duplicate-js)
-- [GitHub Repository](https://github.com/benshabbat/find-duplicate-js)
-- [Issues & Bug Reports](https://github.com/benshabbat/find-duplicate-js/issues)
-
-## 📄 License
-
-MIT © [benshabbat](https://github.com/benshabbat)
-
----
-
-**Made with ❤️ to help developers write better code**
-
-If you find this tool helpful, please consider giving it a ⭐ on [GitHub](https://github.com/benshabbat/find-duplicate-js)!
+# 🔍 Find Duplicate JS
+
+[![npm version](https://img.shields.io/npm/v/find-duplicate-js.svg)](https://www.npmjs.com/package/find-duplicate-js)
+[![npm downloads](https://img.shields.io/npm/dm/find-duplicate-js.svg)](https://www.npmjs.com/package/find-duplicate-js)
+[![license](https://img.shields.io/npm/l/find-duplicate-js.svg)](https://github.com/benshabbat/find-duplicate-js/blob/main/LICENSE)
+
+A powerful and intelligent tool to detect duplicate and similar code in JavaScript projects. Find Duplicate JS helps you maintain cleaner codebases by automatically identifying redundant functions and code patterns across your project.
+
+## 📋 Table of Contents
+
+- [Why Use Find Duplicate JS?](#why-use-find-duplicate-js)
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+  - [CLI Mode](#cli-mode)
+  - [Web UI Mode](#web-ui-mode)
+- [How It Works](#how-it-works)
+- [Configuration Options](#configuration-options)
+- [Examples](#examples)
+- [API](#api)
+- [Contributing](#contributing)
+- [Links](#links)
+- [License](#license)
+
+## 🎯 Why Use Find Duplicate JS?
+
+Duplicate code is a common problem in software development that leads to:
+- **Maintenance Headaches**: Fixing bugs requires updating code in multiple places
+- **Increased File Size**: Unnecessary code bloat
+- **Inconsistencies**: Changes in one place might not be reflected elsewhere
+- **Technical Debt**: Harder to refactor and improve code quality
+
+Find Duplicate JS helps you identify these issues automatically, saving time and improving code quality.
+
+## ✨ Features
+
+- **🎯 Smart Function Detection**: Recognizes multiple function types
+  - Arrow functions (`const func = () => {}`)
+  - Function declarations (`function func() {}`)
+  - Class methods and object methods
+  - Async functions
+  
+- **🧠 Intelligent Code Analysis**: 
+  - Normalizes code to ignore irrelevant differences (whitespace, comments, variable names)
+  - Uses Levenshtein distance algorithm for accurate similarity scoring
+  - Configurable similarity threshold (default 70%)
+
+- **🎨 Two Usage Modes**:
+  - **CLI Mode**: Quick terminal-based analysis with detailed text output
+  - **Web UI Mode**: Beautiful, interactive web interface with visual comparisons
+
+- **⚡ Performance**:
+  - Recursively scans entire project directories
+  - Automatically skips `node_modules`, `.git`, `dist`, and `build` folders
+  - Handles both `.js` and `.jsx` files
+
+- **🔧 Zero Configuration**: Works out of the box with sensible defaults
+
+## 📦 Installation
+
+### Global Installation (Recommended)
+
+```bash
+npm install -g find-duplicate-js
+```
+
+### Local Installation
+
+```bash
+npm install --save-dev find-duplicate-js
+```
+
+Then add to your `package.json` scripts:
+
+```json
+{
+  "scripts": {
+    "find-duplicate": "find-duplicate",
+    "find-duplicate:ui": "find-duplicate --ui"
+  }
+}
+```
+
+Or use the built-in npm scripts:
+```bash
+npm start        # Run CLI mode
+npm run ui       # Run UI mode
+npm test         # Run tests
+```
+
+## 🚀 Usage
+
+### CLI Mode
+
+Run a quick analysis from the command line and get results in your terminal:
+
+```bash
+# Analyze current directory with default threshold (70%)
+find-duplicate
+
+# Analyze specific directory
+find-duplicate ./src
+
+# Custom similarity threshold (80%)
+find-duplicate ./src 80
+
+# Analyze entire project
+find-duplicate . 75
+```
+
+**CLI Output Example:**
+
+```
+🚀 Searching for duplicate code in: ./src
+📏 Similarity threshold: 70%
+
+🔍 Scanning 15 JavaScript files...
+
+📊 Found 42 functions total
+
+⚠️  Found 3 pairs of similar functions:
+
+═══════════════════════════════════════════════════════════════════════════════════════
+
+📋 Match #1 - Similarity: 95.5%
+
+   File 1: src/utils/math.js
+   Function: calculateTotal()
+   Code: const sum = items.reduce((acc, item) => acc + item.price, 0)...
+
+   File 2: src/components/cart.js
+   Function: getTotalPrice()
+   Code: const total = products.reduce((acc, prod) => acc + prod.pri...
+
+─────────────────────────────────────────────────────────────────────────────────────
+
+💡 Summary: Found 3 duplicate function pairs
+```
+
+### Web UI Mode
+
+Launch an interactive web interface for a better visual experience using the `--ui` flag:
+
+```bash
+# Start web UI server (opens browser automatically)
+find-duplicate --ui
+
+# Analyze specific directory
+find-duplicate --ui ./src
+
+# Custom threshold
+find-duplicate --ui ./src 80
+```
+
+**Alternative:** You can also use the dedicated UI command (backwards compatibility):
+```bash
+find-duplicate-ui ./src 80
+```
+
+The web interface will:
+1. Start a local server on `http://localhost:2712`
+2. Automatically open your default browser
+3. Display an interactive dashboard with:
+   - Project statistics
+   - Color-coded duplicate pairs
+   - Side-by-side code comparison
+   - Similarity percentages
+   - File paths and function names
+
+**Features in Web UI:**
+- 📊 **Statistics Dashboard**: Overview of scanned files, functions found, and duplicates
+- 🎨 **Beautiful Design**: Modern, responsive interface
+- 🔄 **Live Refresh**: Re-analyze your code with a single click
+- 📱 **Mobile Friendly**: Works on all devices
+- 🎯 **Easy Navigation**: Jump directly to problematic code
+
+## 🔧 How It Works
+
+### 1. **File Discovery**
+Recursively scans your project directory and finds all `.js` and `.jsx` files, while intelligently skipping:
+- `node_modules`
+- `.git`
+- `dist`
+- `build`
+
+### 2. **Function Extraction**
+Uses sophisticated regex patterns to identify and extract:
+- Arrow functions with `const`, `let`, or `var`
+- Traditional function declarations
+- Class and object methods
+- Async functions
+
+### 3. **Code Normalization**
+Before comparison, the code is normalized to focus on logic rather than style:
+- Removes all whitespace and line breaks
+- Strips comments (single-line and multi-line)
+- Replaces variable names with generic placeholders
+- Replaces string literals with generic strings
+- Removes template literals
+
+**Example:**
+```javascript
+// Original Code
+function calculateSum(num1, num2) {
+  // Calculate sum of two numbers
+  const result = num1 + num2;
+  return result;
+}
+
+// Normalized Code
+V(){V=V+V;V;}
+```
+
+### 4. **Similarity Calculation**
+Uses the **Levenshtein Distance** algorithm to calculate how similar two functions are:
+- Measures the minimum number of edits needed to transform one string into another
+- Converts to a percentage (0-100%)
+- Compares against your configured threshold
+
+### 5. **Results Presentation**
+Presents findings in an easy-to-understand format (CLI or Web UI) showing:
+- Which functions are similar
+- Their similarity percentage
+- File locations
+- Code previews
+
+## ⚙️ Configuration Options
+
+### Command Line Arguments
+
+```bash
+find-duplicate [directory] [threshold]
+find-duplicate-ui [directory] [threshold]
+```
+
+**Parameters:**
+- `directory` (optional): Path to analyze. Default: current directory (`.`)
+- `threshold` (optional): Similarity percentage (0-100). Default: `70`
+
+### Examples:
+
+```bash
+# Very strict (only near-identical code)
+find-duplicate ./src 95
+
+# Moderate (recommended)
+find-duplicate ./src 70
+
+# Lenient (catches more potential duplicates)
+find-duplicate ./src 50
+```
+
+### Threshold Guidelines:
+
+- **90-100%**: Nearly identical functions (different variable names only)
+- **70-89%**: Very similar logic with minor variations
+- **50-69%**: Similar patterns but with notable differences
+- **Below 50%**: May produce many false positives
+
+## 📚 Examples
+
+### Example 1: Finding Exact Duplicates
+
+**File 1: `auth.js`**
+```javascript
+function validateUser(username, password) {
+  if (!username || !password) {
+    return false;
+  }
+  return true;
+}
+```
+
+**File 2: `login.js`**
+```javascript
+function checkCredentials(user, pass) {
+  if (!user || !pass) {
+    return false;
+  }
+  return true;
+}
+```
+
+**Result**: 100% similarity - Same logic, different names
+
+### Example 2: Similar Functions
+
+**File 1: `cart.js`**
+```javascript
+const calculateTotal = (items) => {
+  return items.reduce((sum, item) => sum + item.price, 0);
+}
+```
+
+**File 2: `checkout.js`**
+```javascript
+const getTotalPrice = (products) => {
+  let total = 0;
+  products.forEach(product => {
+    total += product.price;
+  });
+  return total;
+}
+```
+
+**Result**: ~75% similarity - Same logic, different implementation
+
+## 🔌 API
+
+You can also use Find Duplicate JS programmatically in your Node.js projects:
+
+```javascript
+import { findDuplicates, findJsFiles } from 'find-duplicate-js';
+
+// Find all JavaScript files
+const files = findJsFiles('./src');
+console.log(`Found ${files.length} files`);
+
+// Find duplicates with 70% threshold
+const result = findDuplicates('./src', 70);
+
+console.log(`Total functions: ${result.totalFunctions}`);
+console.log(`Duplicate pairs: ${result.duplicates.length}`);
+
+// Iterate through duplicates
+result.duplicates.forEach((dup, index) => {
+  console.log(`\nMatch #${index + 1}:`);
+  console.log(`Similarity: ${dup.similarity}%`);
+  console.log(`Function 1: ${dup.func1.name} in ${dup.func1.filePath}`);
+  console.log(`Function 2: ${dup.func2.name} in ${dup.func2.filePath}`);
+});
+```
+
+### Available Functions
+
+#### `findJsFiles(directory)`
+Returns an array of all `.js` and `.jsx` file paths in the directory.
+
+#### `findDuplicates(directory, threshold = 70)`
+Analyzes the directory and returns:
+```javascript
+{
+  duplicates: [
+    {
+      func1: { name, body, originalBody, filePath, startIndex },
+      func2: { name, body, originalBody, filePath, startIndex },
+      similarity: "95.50"
+    }
+  ],
+  totalFunctions: 42
+}
+```
+
+#### `calculateSimilarity(code1, code2)`
+Calculates similarity percentage between two code strings.
+
+#### `normalizeCode(code)`
+Normalizes JavaScript code for comparison.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
+
+### Development Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/benshabbat/find-duplicate-js.git
+
+# Install dependencies
+cd find-duplicate-js
+npm install
+
+# Run locally
+node find-duplicates.js ./src
+node find-duplicates-ui.js ./src
+```
+
+## 🔗 Links
+
+- [npm Package](https://www.npmjs.com/package/find-duplicate-js)
+- [GitHub Repository](https://github.com/benshabbat/find-duplicate-js)
+- [Issues & Bug Reports](https://github.com/benshabbat/find-duplicate-js/issues)
+
+## 📄 License
+
+MIT © [benshabbat](https://github.com/benshabbat)
+
+---
+
+**Made with ❤️ to help developers write better code**
+
+If you find this tool helpful, please consider giving it a ⭐ on [GitHub](https://github.com/benshabbat/find-duplicate-js)!

package/find-duplicates-ui.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 import { exec as open } from "child_process";
 import http from "http";

package/find-duplicates.js

@@ -1,9 +1,13 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 import fs from 'fs';
 import path from 'path';
+import { fileURLToPath } from 'url';
 import { findDuplicates, findJsFiles } from './find-duplicates-core.js';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 /**
  * Displays the duplicate detection results to the console
  * @param {{duplicates: Array, totalFunctions: number}} result - The analysis result object
@@ -34,26 +38,181 @@ function displayResults(result) {
   console.log(`\n💡 Summary: Found ${duplicates.length} duplicate function pair${duplicates.length > 1 ? 's' : ''}\n`);
 }
 
-// Run the script
+/**
+ * Starts the web UI server
+ * @param {string} directory - Directory to analyze
+ * @param {number} threshold - Similarity threshold
+ */
+async function startUIServer(directory, threshold) {
+  const { exec: open } = await import('child_process');
+  const http = await import('http');
+  
+  const PORT = 2712;
+  
+  /**
+   * Generates the HTML page for the web UI
+   */
+  function generateHTML(duplicates, stats) {
+    const templatePath = path.join(__dirname, "ui-template.html");
+    const cssPath = path.join(__dirname, "ui-styles.css");
+    
+    let template = fs.readFileSync(templatePath, "utf-8");
+    const css = fs.readFileSync(cssPath, "utf-8");
+    
+    // Inject CSS inline
+    template = template.replace('<link rel="stylesheet" href="ui-styles.css">', `<style>${css}</style>`);
+    
+    // Replace stats placeholders
+    template = template
+      .replace("{{filesScanned}}", stats.filesScanned)
+      .replace("{{functionsFound}}", stats.functionsFound)
+      .replace("{{duplicatesFound}}", stats.duplicatesFound)
+      .replace("{{threshold}}", stats.threshold);
+    
+    // Generate results HTML
+    const resultsHTML = duplicates.length === 0
+      ? `
+        <div class="no-duplicates">
+            <div class="icon">✅</div>
+            <h2>Great! No Duplicates Found</h2>
+            <p>Your code is clean and well-organized.</p>
+        </div>
+      `
+      : duplicates
+          .map(
+            (dup, index) => `
+            <div class="duplicate-card">
+                <div class="duplicate-header">
+                    <h3>📋 Match #${index + 1}</h3>
+                    <div class="similarity-badge">${dup.similarity}% Similar</div>
+                </div>
+                <div class="duplicate-body">
+                    <div class="function-comparison">
+                        <div class="function-info">
+                            <h4>Function 1</h4>
+                            <div class="file-path">📁 ${dup.func1.filePath}</div>
+                            <div class="function-name">${dup.func1.name}()</div>
+                            <div class="code-preview">${escapeHtml(
+                              dup.func1.originalBody.substring(0, 200)
+                            )}${dup.func1.originalBody.length > 200 ? "..." : ""}</div>
+                        </div>
+                        <div class="function-info">
+                            <h4>Function 2</h4>
+                            <div class="file-path">📁 ${dup.func2.filePath}</div>
+                            <div class="function-name">${dup.func2.name}()</div>
+                            <div class="code-preview">${escapeHtml(
+                              dup.func2.originalBody.substring(0, 200)
+                            )}${dup.func2.originalBody.length > 200 ? "..." : ""}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+          `
+          )
+          .join("");
+    
+    // Inject results
+    template = template.replace('<div id="results">', `<div id="results">${resultsHTML}`);
+    
+    return template;
+  }
+  
+  /**
+   * Escapes HTML special characters to prevent XSS attacks
+   */
+  function escapeHtml(text) {
+    return text
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  }
+  
+  console.log("\n🚀 Starting Duplicate Finder Server...\n");
+  console.log(`📂 Directory: ${directory}`);
+  console.log(`📏 Threshold: ${threshold}%`);
+
+  const server = http.createServer((req, res) => {
+    if (req.url === "/") {
+      try {
+        console.log("\n🔍 Analyzing JavaScript files...");
+
+        const jsFiles = findJsFiles(directory);
+        const duplicates = findDuplicates(directory, threshold);
+
+        const stats = {
+          filesScanned: jsFiles.length,
+          functionsFound: duplicates.totalFunctions || 0,
+          duplicatesFound: duplicates.duplicates.length,
+          threshold: threshold,
+        };
+
+        const html = generateHTML(duplicates.duplicates, stats);
+
+        res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+        res.end(html);
+
+        console.log("✅ Analysis complete!");
+      } catch (error) {
+        console.error("❌ Error:", error);
+        res.writeHead(500, { "Content-Type": "text/html" });
+        res.end(`<h1>Error</h1><pre>${error.message}</pre>`);
+      }
+    } else {
+      res.writeHead(404);
+      res.end("Not Found");
+    }
+  });
+
+  server.listen(PORT, () => {
+    console.log(`\n✨ Server running at http://localhost:${PORT}`);
+    console.log(`\n💡 Open your browser and visit: http://localhost:${PORT}`);
+    console.log(`\n⏹️  Press Ctrl+C to stop the server\n`);
+
+    // Try to open browser automatically
+    const url = `http://localhost:${PORT}`;
+
+    switch (process.platform) {
+      case "win32":
+        open(`start ${url}`);
+        break;
+      case "darwin":
+        open(`open ${url}`);
+        break;
+      default:
+        open(`xdg-open ${url}`);
+    }
+  });
+}
+
+// Parse command line arguments
 const args = process.argv.slice(2);
-const directory = args[0] || process.cwd();
-const threshold = parseInt(args[1]) || 70;
+const hasUIFlag = args.includes('--ui');
+const filteredArgs = args.filter(arg => arg !== '--ui');
+const directory = filteredArgs[0] || process.cwd();
+const threshold = parseInt(filteredArgs[1]) || 70;
 
 if (!fs.existsSync(directory)) {
   console.error(`❌ Error: Directory "${directory}" does not exist`);
   process.exit(1);
 }
 
-console.log(`\n🚀 Searching for duplicate code in: ${directory}`);
-console.log(`📏 Similarity threshold: ${threshold}%`);
+// Run UI server or CLI based on flag
+if (hasUIFlag) {
+  startUIServer(directory, threshold);
+} else {
+  console.log(`\n🚀 Searching for duplicate code in: ${directory}`);
+  console.log(`📏 Similarity threshold: ${threshold}%`);
 
-const jsFiles = findJsFiles(directory);
-console.log(`\n🔍 Scanning ${jsFiles.length} JavaScript files...\n`);
+  const jsFiles = findJsFiles(directory);
+  console.log(`\n🔍 Scanning ${jsFiles.length} JavaScript files...\n`);
 
-const result = findDuplicates(directory, threshold);
-console.log(`📊 Found ${result.totalFunctions} functions total\n`);
+  const result = findDuplicates(directory, threshold);
+  console.log(`📊 Found ${result.totalFunctions} functions total\n`);
 
-displayResults(result);
+  displayResults(result);
+}
 
 // Export functions for programmatic use
 export { findDuplicates, findJsFiles, extractFunctions, normalizeCode, calculateSimilarity } from './find-duplicates-core.js';

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "find-duplicate-js",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "A tool to find duplicate code in JavaScript functions",
   "main": "find-duplicates.js",
   "type": "module",
   "bin": {
-    "find-duplicates": "find-duplicates.js",
-    "find-duplicates-ui": "find-duplicates-ui.js"
+    "find-duplicate": "find-duplicates.js",
+    "find-duplicate-ui": "find-duplicates-ui.js"
   },
   "scripts": {
     "start": "node find-duplicates.js",
-    "ui": "node find-duplicates-ui.js",
+    "ui": "node find-duplicates.js --ui",
     "test": "node --test tests/*.test.js"
   },
   "keywords": [