fix: preserve gallery image identity and ignore stale metadata (#175)

* fix: preserve gallery root identity across media and metadata

Fixes #173

* fix: ignore stale gallery metadata responses

Fixes #174

* test: use platform-valid gallery filenames on Windows

web/js/gallery.js

@@ -583,6 +583,8 @@
             }
 
             destroyViewer({ keepSlideshow = false } = {}) {
+                this.metadataRequest = null;
+                this.currentMetadata = null;
                 if (!keepSlideshow) this.stopViewerSlideshow();
                 if (this.viewer) {
                     this.viewer.clearEnforceFocus();
@@ -647,6 +649,8 @@
                         }
                     },
                     hide: () => {
+                        this.metadataRequest = null;
+                        this.currentMetadata = null;
                         this.viewer?.clearEnforceFocus();
                         this.stopViewerSlideshow();
                         const sidebar = document.getElementById('metadata-sidebar');
@@ -1189,15 +1193,18 @@
             }
 
             async loadImageMetadata(imageUrl, container) {
+                const request = {};
+                this.metadataRequest = request;
+                this.currentMetadata = null;
+                container.textContent = 'Loading metadata...';
+                const isCurrent = () => this.metadataRequest === request && container.isConnected !== false;
                 try {
                     // First try to get linked prompt from database
                     let databasePrompt = null;
                     try {
-                        // Extract relative path from the URL for the API call
-                        const urlParts = imageUrl.split('/prompt_manager/images/serve/');
-                        if (urlParts.length > 1) {
-                            const relativePath = urlParts[1];
-                            const response = await ApiClient.fetchUrl(`/prompt_manager/images/prompt/${encodeURIComponent(relativePath)}`);
+                        const metadataUrl = ImageHelpers.metadataLookupUrl(imageUrl);
+                        if (metadataUrl) {
+                            const response = await ApiClient.fetchUrl(metadataUrl);
                             if (response.ok) {
                                 const data = await response.json();
                                 if (data.success && data.prompt) {
@@ -1256,8 +1263,9 @@
                         }
                     }
                     
-                    this.displayMetadata(metadata, container);
+                    if (isCurrent()) this.displayMetadata(metadata, container);
                 } catch (error) {
+                    if (!isCurrent()) return;
                     console.error('Error loading metadata:', error);
                     container.innerHTML = `
                         <div class="bg-pm-error-tint border border-pm-error rounded-pm-md p-4">

web/js/image-helpers.js

@@ -103,7 +103,23 @@
         return original;
     }
 
-    const api = { formatImageCaption, workflowDocumentHtml, autotagSingleBody, fallbackImageSource };
+    function metadataLookupUrl(imageUrl) {
+        try {
+            const url = new URL(imageUrl, 'http://prompt-manager.invalid');
+            const marker = '/prompt_manager/images/serve/';
+            const index = url.pathname.indexOf(marker);
+            if (index < 0) return null;
+            const relativePath = decodeURIComponent(url.pathname.slice(index + marker.length));
+            const query = new URLSearchParams();
+            if (url.searchParams.has('root')) query.set('root', url.searchParams.get('root'));
+            const suffix = query.size ? `?${query}` : '';
+            return `/prompt_manager/images/prompt/${encodeURIComponent(relativePath)}${suffix}`;
+        } catch {
+            return null;
+        }
+    }
+
+    const api = { formatImageCaption, workflowDocumentHtml, autotagSingleBody, fallbackImageSource, metadataLookupUrl };
     if (typeof module !== "undefined" && module.exports) module.exports = api;
     else root.ImageHelpers = api;
 })(typeof window !== "undefined" ? window : globalThis);