From 8f9597eb10b575db51001b8e072bc6a29fc00c43 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Fri, 17 Apr 2026 23:50:50 +0200
Subject: [PATCH] Show filename and expandable other matches in linker

Display the expected filename in the missing-item title and enable wrapping for node/category chips. Remove the duplicated filename row and make the "other matches below 100%" note expandable: clicking it toggles a hidden list of alternative matches. Each alternative now shows a confidence badge, truncated filename/path with tooltip, and a Link button that triggers the existing resolve action. These changes improve readability and UX when many matches are present.
---
 web/linker.js | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/web/linker.js b/web/linker.js
index 115ce71..139ff04 100644
--- a/web/linker.js
+++ b/web/linker.js
@@ -1045,16 +1045,21 @@ class LinkerManagerDialog extends ComfyDialog {
                 const versionLabel = modelUrl ? `<a href="${modelUrl}" target="_blank" style="color: #FF9800; font-size: 14px; text-decoration: none;">${civitaiLabel}</a>` : `<span style="color: var(--ml-text-muted); font-size: 14px;">${civitaiLabel}</span>`;
                 titleHtml += ` ${versionLabel}`;
             }
+            // Add filename in quotes
+            if (missing.civitai_info.expected_filename) {
+                titleHtml += ` <span style="color: var(--ml-text-muted); font-size: 12px;">"${missing.civitai_info.expected_filename}"</span>`;
+            }
         } else if (missing.civitai_info && missing.civitai_info.model_name) {
             titleHtml += ` <span style="color: var(--ml-text-muted); font-size: 14px;">(${missing.civitai_info.model_name})</span>`;
         }
         html += `<h3 class="ml-card-title">${titleHtml}</h3>`;
-        html += `<div style="display: flex; align-items: center; gap: 6px;">`;
+        html += `<div style="display: flex; align-items: center; gap: 6px; flex-wrap: wrap;">`;
         if (missing.category) {
             html += `<span class="ml-category-chip">${missing.category}</span>`;
         }
         html += `<span class="ml-node-chip">${nodeLabel} #${missing.node_id}</span>`;
         html += `</div>`;
+        // Removed - filename is already shown in title
         html += `</div>`;
         
         // Two-column layout
@@ -1093,9 +1098,21 @@ class LinkerManagerDialog extends ComfyDialog {
                 html += `</div>`;
             }
             
-            // Add note if only showing 100% matches
+            // Add note if only showing 100% matches - make it expandable
             if (perfectMatches.length > 0 && otherMatches.length > 0) {
-                html += `<div class="ml-no-matches">${otherMatches.length} other match${otherMatches.length > 1 ? 'es' : ''} below 100%</div>`;
+                const matchId = `more-matches-${missing.node_id}-${missing.widget_index}`;
+                html += `<div class="ml-no-matches" style="cursor: pointer; color: #2196F3;" onclick="document.getElementById('${matchId}').style.display = document.getElementById('${matchId}').style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === '${otherMatches.length} other matches below 100%' ? 'Hide alternatives' : '${otherMatches.length} other matches below 100%'">${otherMatches.length} other match${otherMatches.length > 1 ? 'es' : ''} below 100%</div>`;
+                // Hidden container with other matches
+                html += `<div id="${matchId}" style="display: none; flex-direction: column; gap: 4px; margin-top: 8px;">`;
+                for (const match of otherMatches) {
+                    const confClass = match.confidence >= 70 ? 'ml-badge-medium' : 'ml-badge-low';
+                    html += `<div class="ml-match-row" style="padding: 4px; background: var(--ml-bg-secondary); border-radius: 4px;">`;
+                    html += `<span class="ml-badge ${confClass}">${match.confidence}%</span>`;
+                    html += `<span class="ml-match-filename" title="${match.path || match.filename}" style="flex: 1; overflow: hidden; text-overflow: ellipsis;">${match.filename || match.path?.split(/[/\\]/).pop()}</span>`;
+                    html += `<button class="ml-btn ml-btn-secondary ml-btn-sm" onclick="document.getElementById('resolve-${missing.node_id}-${missing.widget_index}').click()">🔗 Link</button>`;
+                    html += `</div>`;
+                }
+                html += `</div>`;
             }
         } else if (allMatches.length > 0 && filteredMatches.length === 0) {
             html += `<div class="ml-no-matches">No matches above 70% confidence</div>`;