feat(security): escape HTML attributes and content in model modal, fixes #720

- Import `escapeAttribute` and `escapeHtml` utilities from shared utils
- Remove duplicate `escapeAttribute` function from ModelModal.js
- Apply escaping to file path attributes in model modal and trigger words
- Escape folder path HTML content to prevent XSS vulnerabilities
- Ensure safe handling of user-controlled data in UI components

static/js/components/shared/utils.js

@@ -3,6 +3,20 @@
  * Helper functions for the Model Modal component - General version
  */
 
+export function escapeHtml(value = '') {
+    if (value === null || value === undefined) return '';
+    return String(value)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+export function escapeAttribute(value = '') {
+    return escapeHtml(value);
+}
+
 /**
  * Format file size
  * @param {number} bytes - Number of bytes
@@ -31,6 +45,7 @@ export function formatFileSize(bytes) {
 export function renderCompactTags(tags, filePath = '') {
     // Remove the early return and always render the container
     const tagsList = tags || [];
+    const safeFilePath = escapeAttribute(filePath || '');
     
     // Display up to 5 tags, with a tooltip indicator if there are more
     const visibleTags = tagsList.slice(0, 5);
@@ -40,20 +55,20 @@ export function renderCompactTags(tags, filePath = '') {
         <div class="model-tags-container">
             <div class="model-tags-header">
                 <div class="model-tags-compact">
-                    ${visibleTags.map(tag => `<span class="model-tag-compact">${tag}</span>`).join('')}
+                    ${visibleTags.map(tag => `<span class="model-tag-compact">${escapeHtml(tag)}</span>`).join('')}
                     ${remainingCount > 0 ? 
                         `<span class="model-tag-more" data-count="${remainingCount}">+${remainingCount}</span>` : 
                         ''}
                     ${tagsList.length === 0 ? `<span class="model-tag-empty">No tags</span>` : ''}
                 </div>
-                <button class="edit-tags-btn" data-file-path="${filePath}" title="Edit tags">
+                <button class="edit-tags-btn" data-file-path="${safeFilePath}" title="Edit tags">
                     <i class="fas fa-pencil-alt"></i>
                 </button>
             </div>
             ${tagsList.length > 0 ? 
                 `<div class="model-tags-tooltip">
                     <div class="tooltip-content">
-                        ${tagsList.map(tag => `<span class="tooltip-tag">${tag}</span>`).join('')}
+                        ${tagsList.map(tag => `<span class="tooltip-tag">${escapeHtml(tag)}</span>`).join('')}
                     </div>
                 </div>` : 
                 ''}
@@ -77,4 +92,4 @@ export function setupTagTooltip() {
             tooltip.classList.remove('visible');
         });
     }
-}
+}