From 675421ea848de70c8265e7e194e4f71b60ed9d28 Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Sat, 29 Aug 2026 16:49:50 +0800
Subject: [PATCH] fix(recipes): render reconnect form for hash-invalid LoRAs in
 recipe modal

The Reconnect action button was rendered for both deleted and hash-invalid
(Unresolvable Hash) LoRA entries, but the .lora-reconnect-container input
form was only rendered for deleted ones. Clicking Reconnect on a
hash-invalid item silently did nothing because showReconnectInput() could
not find the container. Align the container render condition with the
button condition, and extend the resource-items test to assert the form
opens on click.
---
 static/js/components/RecipeModal.js                       | 2 +-
 .../frontend/components/recipeModal.resourceItems.test.js | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/static/js/components/RecipeModal.js b/static/js/components/RecipeModal.js
index f4845d6d..b6e198e3 100644
--- a/static/js/components/RecipeModal.js
+++ b/static/js/components/RecipeModal.js
@@ -960,7 +960,7 @@ class RecipeModal {
                                 ${lora.baseModel ? `<div class="base-model">${lora.baseModel}</div>` : ''}
                             </div>
                             ${actionsRow}
-                            ${isDeleted ? `
+                            ${isDeleted || lora.hashInvalid ? `
                             <div class="lora-reconnect-container" data-lora-index="${loraIndex}">
                                 <div class="reconnect-instructions">
                                     <p>Enter LoRA Syntax or Name to Reconnect:</p>
diff --git a/tests/frontend/components/recipeModal.resourceItems.test.js b/tests/frontend/components/recipeModal.resourceItems.test.js
index 5ab666b2..069ec8a9 100644
--- a/tests/frontend/components/recipeModal.resourceItems.test.js
+++ b/tests/frontend/components/recipeModal.resourceItems.test.js
@@ -342,7 +342,13 @@ describe('RecipeModal resource item interactions', () => {
     expect(badge.textContent).toContain('Unresolvable Hash');
 
     expect(invalidItem.querySelector('.lora-download')).toBeNull();
-    expect(invalidItem.querySelector('.lora-reconnect')).not.toBeNull();
+    const reconnectButton = invalidItem.querySelector('.lora-reconnect');
+    expect(reconnectButton).not.toBeNull();
+
+    reconnectButton.click();
+    const container = invalidItem.querySelector('.lora-reconnect-container');
+    expect(container).not.toBeNull();
+    expect(container.classList.contains('active')).toBe(true);
   });
 
   it('marks the entry hash-invalid when hash resolution returns Model not found', async () => {