Skip to content

Commit 291aa2b

Browse files
matteiusmatteius
committed
Improve WEB UI
1 parent 5c1762f commit 291aa2b

File tree

2 files changed

+159
-65
lines changed

2 files changed

+159
-65
lines changed

‎static/app.js‎

Lines changed: 134 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -375,23 +375,19 @@ class SmartCodeDiffApp {
375375
}
376376

377377
isCodeFile(filename) {
378-
const codeExtensions = [
379-
'.c', '.cpp', '.cc', '.cxx', '.h', '.hpp', '.hxx',
380-
'.js', '.jsx', '.ts', '.tsx', '.mjs', '.cjs',
381-
'.py', '.pyx', '.pyi',
382-
'.java', '.kt', '.scala',
383-
'.rs', '.go', '.rb', '.php',
384-
'.cs', '.vb', '.fs',
385-
'.swift', '.m', '.mm',
386-
'.sh', '.bash', '.zsh',
387-
'.sql', '.pl', '.r',
388-
'.html', '.htm', '.xml',
389-
'.css', '.scss', '.sass', '.less',
390-
'.json', '.yaml', '.yml', '.toml',
391-
'.md', '.txt', '.cfg', '.ini'
378+
// Only include extensions that the server actually supports
379+
const supportedExtensions = [
380+
'.c', '.h', // C
381+
'.cpp', '.cc', '.cxx', '.hpp', // C++
382+
'.js', '.jsx', // JavaScript
383+
'.ts', '.tsx', // TypeScript
384+
'.py', '.pyw', // Python
385+
'.java', // Java
386+
'.rs', // Rust
387+
'.go' // Go
392388
];
393-
394-
return codeExtensions.some(ext => filename.toLowerCase().endsWith(ext));
389+
390+
return supportedExtensions.some(ext => filename.toLowerCase().endsWith(ext));
395391
}
396392

397393
async handleFileSelection(files, isDirectory) {
@@ -448,31 +444,33 @@ class SmartCodeDiffApp {
448444
detectLanguage(filename) {
449445
const ext = filename.toLowerCase().split('.').pop();
450446
const languageMap = {
451-
'c': 'C',
452-
'cpp': 'C++', 'cc': 'C++', 'cxx': 'C++',
453-
'h': 'C/C++', 'hpp': 'C++', 'hxx': 'C++',
454-
'js': 'JavaScript', 'jsx': 'JavaScript', 'mjs': 'JavaScript', 'cjs': 'JavaScript',
455-
'ts': 'TypeScript', 'tsx': 'TypeScript',
456-
'py': 'Python', 'pyx': 'Python', 'pyi': 'Python',
457-
'java': 'Java',
458-
'kt': 'Kotlin',
459-
'rs': 'Rust',
460-
'go': 'Go',
461-
'rb': 'Ruby',
462-
'php': 'PHP',
463-
'cs': 'C#',
464-
'swift': 'Swift',
465-
'sh': 'Shell', 'bash': 'Shell', 'zsh': 'Shell',
466-
'sql': 'SQL',
467-
'html': 'HTML', 'htm': 'HTML',
468-
'css': 'CSS', 'scss': 'SCSS', 'sass': 'SASS',
469-
'json': 'JSON',
470-
'yaml': 'YAML', 'yml': 'YAML',
471-
'md': 'Markdown',
472-
'xml': 'XML'
447+
'c': 'c',
448+
'cpp': 'cpp', 'cc': 'cpp', 'cxx': 'cpp',
449+
'h': 'c', 'hpp': 'cpp', 'hxx': 'cpp',
450+
'js': 'javascript', 'jsx': 'javascript', 'mjs': 'javascript', 'cjs': 'javascript',
451+
'ts': 'typescript', 'tsx': 'typescript',
452+
'py': 'python', 'pyx': 'python', 'pyi': 'python',
453+
'java': 'java',
454+
'kt': 'kotlin',
455+
'rs': 'rust',
456+
'go': 'go',
457+
'rb': 'ruby',
458+
'php': 'php',
459+
'cs': 'csharp',
460+
'swift': 'swift',
461+
'sh': 'bash', 'bash': 'bash', 'zsh': 'bash',
462+
'sql': 'sql',
463+
'html': 'html', 'htm': 'html',
464+
'css': 'css', 'scss': 'css', 'sass': 'css',
465+
'json': 'json',
466+
'yaml': 'yaml', 'yml': 'yaml',
467+
'md': 'markdown',
468+
'xml': 'xml'
473469
};
474-
475-
return languageMap[ext] || 'Unknown';
470+
471+
// Return the language in lowercase format that the server expects
472+
// Default to 'c' for unknown files since that's most likely to work
473+
return languageMap[ext] || 'c';
476474
}
477475

478476
updateFileTree() {
@@ -953,19 +951,20 @@ class SmartCodeDiffApp {
953951

954952
// Compare all common files
955953
const comparisons = [];
954+
let successCount = 0;
955+
let errorCount = 0;
956+
956957
for (const commonFile of commonFiles) {
957-
const options = {
958-
threshold: parseFloat(document.getElementById('thresholdSlider')?.value || 0.8),
959-
ignore_whitespace: document.getElementById('ignoreWhitespace')?.checked || false,
960-
detect_moves: document.getElementById('detectMoves')?.checked || true
961-
};
962-
963-
const response = await fetch(`${this.apiBase}/compare`, {
964-
method: 'POST',
965-
headers: {
966-
'Content-Type': 'application/json',
967-
},
968-
body: JSON.stringify({
958+
try {
959+
this.showLoading(`Comparing files... (${successCount + errorCount + 1}/${commonFiles.length})`);
960+
961+
const options = {
962+
threshold: parseFloat(document.getElementById('thresholdSlider')?.value || 0.8),
963+
ignore_whitespace: document.getElementById('ignoreWhitespace')?.checked || false,
964+
detect_moves: document.getElementById('detectMoves')?.checked || true
965+
};
966+
967+
const requestBody = {
969968
file1: {
970969
path: commonFile.sourcePath,
971970
content: commonFile.sourceFile.content
@@ -975,23 +974,88 @@ class SmartCodeDiffApp {
975974
content: commonFile.targetFile.content
976975
},
977976
options: options
978-
})
979-
});
977+
};
980978

981-
if (!response.ok) {
982-
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
983-
}
979+
console.log('Comparing files:', commonFile.sourcePath, 'vs', commonFile.targetPath);
984980

985-
const result = await response.json();
986-
comparisons.push({
987-
...commonFile,
988-
comparison: result
989-
});
981+
const response = await fetch(`${this.apiBase}/compare`, {
982+
method: 'POST',
983+
headers: {
984+
'Content-Type': 'application/json',
985+
},
986+
body: JSON.stringify(requestBody)
987+
});
988+
989+
if (!response.ok) {
990+
const errorText = await response.text();
991+
console.error(`Error comparing ${commonFile.name}:`, response.status, errorText);
992+
errorCount++;
993+
994+
// Add a placeholder comparison result for failed comparisons
995+
comparisons.push({
996+
...commonFile,
997+
comparison: {
998+
similarity: 0,
999+
analysis: {
1000+
changes: {
1001+
total_changes: 0,
1002+
detailed_changes: [{
1003+
change_type: 'ERROR',
1004+
description: `Failed to compare: ${response.status} ${response.statusText}`,
1005+
confidence: 0
1006+
}]
1007+
},
1008+
functions: { total_functions: 0 }
1009+
},
1010+
execution_time_ms: 0,
1011+
error: true
1012+
}
1013+
});
1014+
continue;
1015+
}
1016+
1017+
const result = await response.json();
1018+
comparisons.push({
1019+
...commonFile,
1020+
comparison: result
1021+
});
1022+
successCount++;
1023+
1024+
} catch (error) {
1025+
console.error(`Exception comparing ${commonFile.name}:`, error);
1026+
errorCount++;
1027+
1028+
// Add error placeholder
1029+
comparisons.push({
1030+
...commonFile,
1031+
comparison: {
1032+
similarity: 0,
1033+
analysis: {
1034+
changes: {
1035+
total_changes: 0,
1036+
detailed_changes: [{
1037+
change_type: 'ERROR',
1038+
description: `Exception: ${error.message}`,
1039+
confidence: 0
1040+
}]
1041+
},
1042+
functions: { total_functions: 0 }
1043+
},
1044+
execution_time_ms: 0,
1045+
error: true
1046+
}
1047+
});
1048+
}
9901049
}
9911050

9921051
this.displayBranchComparisonResults(comparisons);
9931052
this.hideLoading();
994-
this.showToast(`Compared ${comparisons.length} files between branches`, 'success');
1053+
1054+
if (errorCount > 0) {
1055+
this.showToast(`Compared ${successCount} files successfully, ${errorCount} failed`, 'warning');
1056+
} else {
1057+
this.showToast(`Successfully compared ${successCount} files between branches`, 'success');
1058+
}
9951059

9961060
} catch (error) {
9971061
this.hideLoading();
@@ -1049,11 +1113,16 @@ class SmartCodeDiffApp {
10491113
const similarityClass = comp.comparison.similarity > 0.9 ? 'high' :
10501114
comp.comparison.similarity > 0.7 ? 'medium' : 'low';
10511115
1116+
const isError = comp.comparison.error;
1117+
const errorClass = isError ? 'error' : '';
1118+
10521119
return `
1053-
<div class="file-comparison-item">
1120+
<div class="file-comparison-item ${errorClass}">
10541121
<div class="file-comparison-header">
10551122
<span class="file-name">${comp.name}</span>
1056-
<span class="similarity-badge ${similarityClass}">${similarity}%</span>
1123+
<span class="similarity-badge ${isError ? 'error' : similarityClass}">
1124+
${isError ? 'ERROR' : similarity + '%'}
1125+
</span>
10571126
</div>
10581127
<div class="file-paths">
10591128
<div class="path-item">

‎static/styles.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -988,6 +988,21 @@ textarea:focus-visible {
988988
color: white;
989989
}
990990

991+
.similarity-badge.error {
992+
background: #dc2626;
993+
color: white;
994+
}
995+
996+
.file-comparison-item.error {
997+
border-left: 4px solid #dc2626;
998+
background: rgba(220, 38, 38, 0.05);
999+
}
1000+
1001+
.change-tag.error {
1002+
background: #fee2e2;
1003+
color: #991b1b;
1004+
}
1005+
9911006
.file-paths {
9921007
display: flex;
9931008
flex-direction: column;
@@ -1282,6 +1297,16 @@ textarea:focus-visible {
12821297
padding-left: var(--spacing-sm);
12831298
}
12841299

1300+
.ast-note {
1301+
background: rgba(245, 158, 11, 0.1);
1302+
border: 1px solid #f59e0b;
1303+
border-radius: var(--radius-md);
1304+
padding: var(--spacing-sm);
1305+
margin-bottom: var(--spacing-md);
1306+
font-size: var(--font-size-sm);
1307+
color: var(--text-secondary);
1308+
}
1309+
12851310
/* Graph Node Styles */
12861311
.graph-node {
12871312
cursor: pointer;

0 commit comments

Comments
 (0)