feat(recipes): redesign recipe detail modal with three-column workspace layout

- Three-column layout (preview | generation parameters | resources) with
  independent per-pane scrolling and a content-sized modal shell that
  shrinks to fit short recipes and caps at viewport height for long ones
- Blurred, darker backdrop to focus attention on the modal
- Preview frame hugs the image instead of a fixed-size box
- Move recipe-level 'Send to ComfyUI' into the header actions row to match
  the model detail modal convention; remove the modal 'Copy Recipe Syntax'
  button (context menu action is unaffected)
- Add recipes.actions.sendRecipe i18n keys with translations
- Sync modal test fixtures to the new structure

locales/de.json

@@ -853,7 +853,8 @@
     "recipes": {
         "title": "LoRA-Rezepte",
         "actions": {
-            "sendCheckpoint": "Send to ComfyUI"
+            "sendCheckpoint": "Send to ComfyUI",
+            "sendRecipe": "Send to ComfyUI"
         },
         "controls": {
             "import": {

locales/en.json

@@ -853,7 +853,8 @@
   "recipes": {
     "title": "LoRA Recipes",
     "actions": {
-      "sendCheckpoint": "Send to ComfyUI"
+      "sendCheckpoint": "Send to ComfyUI",
+      "sendRecipe": "Send to ComfyUI"
     },
     "controls": {
       "import": {

locales/es.json

@@ -853,7 +853,8 @@
     "recipes": {
         "title": "Recetas de LoRA",
         "actions": {
-            "sendCheckpoint": "Enviar a ComfyUI"
+            "sendCheckpoint": "Enviar a ComfyUI",
+            "sendRecipe": "Enviar a ComfyUI"
         },
         "controls": {
             "import": {

locales/fr.json

@@ -853,7 +853,8 @@
     "recipes": {
         "title": "LoRA Recipes",
         "actions": {
-            "sendCheckpoint": "Envoyer vers ComfyUI"
+            "sendCheckpoint": "Envoyer vers ComfyUI",
+            "sendRecipe": "Envoyer vers ComfyUI"
         },
         "controls": {
             "import": {

locales/he.json

@@ -853,7 +853,8 @@
     "recipes": {
         "title": "מתכוני LoRA",
         "actions": {
-            "sendCheckpoint": "שלח ל-ComfyUI"
+            "sendCheckpoint": "שלח ל-ComfyUI",
+            "sendRecipe": "שלח ל-ComfyUI"
         },
         "controls": {
             "import": {

locales/ja.json

@@ -853,7 +853,8 @@
     "recipes": {
         "title": "LoRAレシピ",
         "actions": {
-            "sendCheckpoint": "ComfyUIへ送信"
+            "sendCheckpoint": "ComfyUIへ送信",
+            "sendRecipe": "ComfyUIへ送信"
         },
         "controls": {
             "import": {

locales/ko.json

@@ -853,7 +853,8 @@
     "recipes": {
         "title": "LoRA 레시피",
         "actions": {
-            "sendCheckpoint": "ComfyUI로 보내기"
+            "sendCheckpoint": "ComfyUI로 보내기",
+            "sendRecipe": "ComfyUI로 보내기"
         },
         "controls": {
             "import": {

locales/ru.json

@@ -853,7 +853,8 @@
     "recipes": {
         "title": "Рецепты LoRA",
         "actions": {
-            "sendCheckpoint": "Отправить в ComfyUI"
+            "sendCheckpoint": "Отправить в ComfyUI",
+            "sendRecipe": "Отправить в ComfyUI"
         },
         "controls": {
             "import": {

locales/zh-CN.json

@@ -853,7 +853,8 @@
     "recipes": {
         "title": "LoRA 配方",
         "actions": {
-            "sendCheckpoint": "发送到 ComfyUI"
+            "sendCheckpoint": "发送到 ComfyUI",
+            "sendRecipe": "发送到 ComfyUI"
         },
         "controls": {
             "import": {

locales/zh-TW.json

@@ -853,7 +853,8 @@
     "recipes": {
         "title": "LoRA 配方",
         "actions": {
-            "sendCheckpoint": "傳送到 ComfyUI"
+            "sendCheckpoint": "傳送到 ComfyUI",
+            "sendRecipe": "傳送到 ComfyUI"
         },
         "controls": {
             "import": {

static/css/components/recipe-modal.css

@@ -104,15 +104,29 @@
     display: none;
 }
 
+/* Darker, blurred backdrop keeps the busy page behind the modal from bleeding through */
+#recipeModal {
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+}
+
 #recipeModal .modal-content {
     display: flex;
     flex-direction: column;
+    /* Content-sized shell: grows with content up to the viewport limit, inner panes scroll past it */
+    box-sizing: border-box; /* Include padding/border so the shell never exceeds the viewport */
+    width: min(1600px, 94vw);
+    max-width: min(1600px, 94vw);
+    height: auto;
+    max-height: calc(100vh - var(--header-height, 48px) - 2rem);
+    overflow: hidden;
 }
 
 #recipeModal .modal-body {
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-columns: 320px minmax(0, 1fr) 420px;
-    gap: var(--space-2);
+    gap: var(--space-3);
     flex: 1 1 auto;
     min-height: 0;
     overflow: hidden;
@@ -174,19 +188,22 @@
     }
 }
 
-/* Top Section: Preview and Gen Params */
+/* Left Column: Preview */
-.recipe-top-section {
+.recipe-media-column {
-    display: grid;
+    display: flex;
-    grid-template-columns: 280px 1fr;
+    flex-direction: column;
     gap: var(--space-2);
-    flex-shrink: 0;
+    min-height: 0;
-    margin-bottom: var(--space-2);
+    overflow-y: auto;
+    overflow-x: hidden; /* Guard against sub-pixel overflow from bordered children */
 }
 
 /* Recipe Preview */
 .recipe-preview-container {
     width: 100%;
-    height: 360px;
+    box-sizing: border-box; /* Keep the 1px border inside the column width */
+    height: auto;
+    max-height: 42vh;
     border-radius: var(--border-radius-sm);
     overflow: hidden;
     background: var(--lora-surface);
@@ -196,18 +213,19 @@
     align-items: center;
     justify-content: center;
     position: relative;
+    flex-shrink: 0;
 }
 
 .recipe-preview-container img,
 .recipe-preview-container video {
     max-width: 100%;
-    max-height: 100%;
+    max-height: 42vh;
     object-fit: contain;
 }
 
 .recipe-preview-media {
     max-width: 100%;
-    max-height: 100%;
+    max-height: 42vh;
     object-fit: contain;
 }
 
@@ -340,9 +358,10 @@
 
 /* Generation Parameters */
 .recipe-gen-params {
-    height: 360px;
     display: flex;
     flex-direction: column;
+    min-height: 0;
+    overflow-y: auto;
 }
 
 .gen-params-header-row {
@@ -399,8 +418,6 @@
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
-    overflow-y: auto;
-    flex: 1;
 }
 
 .param-group {
@@ -453,8 +470,6 @@
     color: var(--text-color);
     font-size: 0.9em;
     line-height: 1.5;
-    max-height: 150px;
-    overflow-y: auto;
     white-space: pre-wrap;
     word-break: break-word;
 }
@@ -526,14 +541,12 @@
     opacity: 0.8;
 }
 
-/* Bottom Section: Resources */
+/* Right Column: Resources */
 .recipe-bottom-section {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
     min-height: 0;
-    border-top: 1px solid var(--border-color);
-    padding-top: var(--space-2);
 }
 
 .recipe-section-header {
@@ -1010,18 +1023,43 @@
 }
 
 /* Responsive adjustments */
-@media (max-width: 768px) {
+@media (max-width: 1500px) {
-    .recipe-top-section {
+    #recipeModal .modal-body {
-        grid-template-columns: 1fr;
+        grid-template-columns: 300px minmax(0, 1fr) 380px;
     }
-    
+}
-    .recipe-preview-container {
+
-        height: 200px;
+@media (max-width: 1000px) {
+    #recipeModal .modal-body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2);
+        overflow-y: auto;
     }
-    
+
+    .recipe-media-column {
+        overflow-y: visible;
+        flex-shrink: 0;
+    }
+
+    .recipe-preview-container,
+    .recipe-preview-container img,
+    .recipe-preview-container video,
+    .recipe-preview-media {
+        max-height: 40vh;
+    }
+
     .recipe-gen-params {
-        height: auto;
+        overflow-y: visible;
-        max-height: 300px;
+        flex-shrink: 0;
+    }
+
+    .recipe-bottom-section {
+        flex: none;
+    }
+
+    .recipe-loras-list {
+        max-height: 45vh;
     }
 }
 
@@ -1045,19 +1083,11 @@
         margin-bottom: 6px;
     }
 
-    .recipe-top-section {
+    .recipe-preview-container,
-        grid-template-columns: 1fr;
+    .recipe-preview-container img,
-        gap: var(--space-1);
+    .recipe-preview-container video,
-        margin-bottom: var(--space-1);
+    .recipe-preview-media {
-    }
+        max-height: 32vh;
-
-    .recipe-preview-container {
-        display: none;
-    }
-
-    .recipe-gen-params {
-        height: auto;
-        max-height: 210px;
     }
 
     .recipe-gen-params h3 {
@@ -1070,7 +1100,6 @@
     }
 
     .param-content {
-        max-height: 90px;
         padding: 10px;
     }
 
@@ -1083,10 +1112,6 @@
         gap: 6px;
     }
 
-    .recipe-bottom-section {
-        padding-top: var(--space-1);
-    }
-
     .recipe-section-header {
         margin-bottom: var(--space-1);
     }

static/js/components/RecipeModal.js

@@ -515,7 +515,7 @@ class RecipeModal {
             return;
         }
 
-        actionsContainer.innerHTML = '';
+        actionsContainer.querySelectorAll('.recipe-source-url-btn').forEach(btn => btn.remove());
 
         const sourcePath = this.currentRecipe?.source_path || '';
         const isValidUrl = sourcePath.startsWith('http://') || sourcePath.startsWith('https://');
@@ -719,7 +719,7 @@ class RecipeModal {
                 }
             }
 
-            lorasCountElement.innerHTML = `<i class="fas fa-layer-group"></i> ${totalCount} LoRAs ${statusHTML}`;
+            lorasCountElement.innerHTML = `<i class="fas fa-layer-group"></i> ${totalCount} ${totalCount === 1 ? 'LoRA' : 'LoRAs'} ${statusHTML}`;
 
             setTimeout(() => {
                 const viewRecipeLorasBtn = document.getElementById('viewRecipeLorasBtn');
@@ -1180,11 +1180,10 @@ class RecipeModal {
         });
     }
 
-    // Setup copy buttons for prompts and recipe syntax
+    // Setup copy buttons for prompts and send recipe button
     setupCopyButtons() {
         const copyPromptBtn = document.getElementById('copyPromptBtn');
         const copyNegativePromptBtn = document.getElementById('copyNegativePromptBtn');
-        const copyRecipeSyntaxBtn = document.getElementById('copyRecipeSyntaxBtn');
         const sendRecipeBtn = document.getElementById('sendRecipeBtn');
 
         if (copyPromptBtn) {
@@ -1207,13 +1206,6 @@ class RecipeModal {
             });
         }
 
-        if (copyRecipeSyntaxBtn) {
-            copyRecipeSyntaxBtn.addEventListener('click', () => {
-                // Use backend API to get recipe syntax
-                this.fetchAndCopyRecipeSyntax();
-            });
-        }
-
         if (sendRecipeBtn) {
             sendRecipeBtn.addEventListener('click', () => {
                 // Send recipe to ComfyUI workflow
@@ -1299,35 +1291,6 @@ class RecipeModal {
         });
     }
 
-    // Fetch recipe syntax from backend and copy to clipboard
-    async fetchAndCopyRecipeSyntax() {
-        if (!this.recipeId) {
-            showToast('toast.recipes.noRecipeId', {}, 'error');
-            return;
-        }
-
-        try {
-            // Fetch recipe syntax from backend
-            const response = await fetch(`/api/lm/recipe/${this.recipeId}/syntax`);
-
-            if (!response.ok) {
-                throw new Error(`Failed to get recipe syntax: ${response.statusText}`);
-            }
-
-            const data = await response.json();
-
-            if (data.success && data.syntax) {
-                // Use the centralized copyToClipboard utility function
-                await copyToClipboard(data.syntax, 'Recipe syntax copied to clipboard');
-            } else {
-                throw new Error(data.error || 'No syntax returned from server');
-            }
-        } catch (error) {
-            console.error('Error fetching recipe syntax:', error);
-            showToast('toast.recipes.copyFailed', { message: error.message }, 'error');
-        }
-    }
-
     // Helper method to copy text to clipboard
     copyToClipboard(text, successMessage) {
         copyToClipboard(text, successMessage);
@@ -1632,7 +1595,7 @@ class RecipeModal {
         let headerAction = '';
         if (existsLocally && localPath) {
             headerAction = `
-                <button class="resource-action primary compact checkpoint-send">
+                <button class="resource-action compact checkpoint-send">
                     <i class="fas fa-paper-plane"></i>
                     <span>${translate('recipes.actions.sendCheckpoint', {}, 'Send to ComfyUI')}</span>
                 </button>

templates/components/recipe_modal.html

@@ -4,21 +4,27 @@
         
         <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
-            <!-- Header Actions: populated dynamically in RecipeModal.js -->
+            <!-- Header Actions: Send button is static; source URL button is appended dynamically in RecipeModal.js -->
-            <div class="recipe-header-actions" id="recipeHeaderActions"></div>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+                <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                    <i class="fas fa-paper-plane"></i> <span>{{ t('recipes.actions.sendRecipe') }}</span>
+                </button>
+            </div>
             <!-- Recipe Tags Container (rendered by renderCompactTags) -->
             <div id="recipeTagsContainer"></div>
         </header>
         
         <div class="modal-body">
-            <!-- Top Section: Preview and Generation Parameters -->
+            <!-- Left Column: Preview -->
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
                 <div class="recipe-preview-container" id="recipePreviewContainer">
                     <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
                     <!-- Source URL elements are now added dynamically in RecipeModal.js -->
                 </div>
-                
+            </div>
-                <div class="info-section recipe-gen-params">
+
+            <!-- Center Column: Generation Parameters -->
+            <div class="info-section recipe-gen-params">
                     <div class="gen-params-header-row">
                         <h3>Generation Parameters</h3>
                         <label class="inline-toggle-container lora-strip-toggle" title="When enabled, &lt;lora:...&gt; tags are removed from prompt text when copying">
@@ -103,9 +109,8 @@
                         </div>
                     </div>
                 </div>
-            </div>
+
-            
+            <!-- Right Column: Resources -->
-            <!-- Bottom Section: Resources -->
             <div class="info-section recipe-bottom-section">
                 <div class="recipe-section-header">
                     <h3>Resources</h3>
@@ -114,12 +119,6 @@
                     <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
                         <i class="fas fa-external-link-alt"></i>
                     </button>
-                    <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
-                        <i class="fas fa-copy"></i>
-                    </button>
-                    <button class="action-btn send-recipe-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
-                        <i class="fas fa-paper-plane"></i>
-                    </button>
                 </div>
             </div>
             <div class="recipe-resources-list">

tests/frontend/components/contextMenu.interactions.test.js

@@ -246,13 +246,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -284,7 +290,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div class="recipe-section-header">
                 <h3>Resources</h3>
@@ -293,9 +298,6 @@ describe('Interaction-level regression coverage', () => {
                   <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
                     <i class="fas fa-external-link-alt"></i>
                   </button>
-                  <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
-                    <i class="fas fa-copy"></i>
-                  </button>
                 </div>
               </div>
               <div class="recipe-loras-list" id="recipeLorasList"></div>
@@ -370,13 +372,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -408,7 +416,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div class="recipe-section-header">
                 <h3>Resources</h3>
@@ -417,9 +424,6 @@ describe('Interaction-level regression coverage', () => {
                   <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
                     <i class="fas fa-external-link-alt"></i>
                   </button>
-                  <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
-                    <i class="fas fa-copy"></i>
-                  </button>
                 </div>
               </div>
               <div class="recipe-loras-list" id="recipeLorasList"></div>
@@ -464,13 +468,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -502,7 +512,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div class="recipe-section-header">
                 <h3>Resources</h3>
@@ -511,9 +520,6 @@ describe('Interaction-level regression coverage', () => {
                   <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
                     <i class="fas fa-external-link-alt"></i>
                   </button>
-                  <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
-                    <i class="fas fa-copy"></i>
-                  </button>
                 </div>
               </div>
               <div class="recipe-loras-list" id="recipeLorasList"></div>
@@ -573,13 +579,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -611,7 +623,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div class="recipe-section-header">
                 <h3>Resources</h3>
@@ -620,9 +631,6 @@ describe('Interaction-level regression coverage', () => {
                   <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
                     <i class="fas fa-external-link-alt"></i>
                   </button>
-                  <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
-                    <i class="fas fa-copy"></i>
-                  </button>
                 </div>
               </div>
               <div class="recipe-loras-list" id="recipeLorasList"></div>
@@ -662,13 +670,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -700,7 +714,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div class="recipe-section-header">
                 <h3>Resources</h3>
@@ -709,9 +722,6 @@ describe('Interaction-level regression coverage', () => {
                   <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
                     <i class="fas fa-external-link-alt"></i>
                   </button>
-                  <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
-                    <i class="fas fa-copy"></i>
-                  </button>
                 </div>
               </div>
               <div class="recipe-loras-list" id="recipeLorasList"></div>
@@ -765,13 +775,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -803,7 +819,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div class="recipe-section-header">
                 <h3>Resources</h3>
@@ -812,9 +827,6 @@ describe('Interaction-level regression coverage', () => {
                   <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
                     <i class="fas fa-external-link-alt"></i>
                   </button>
-                  <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
-                    <i class="fas fa-copy"></i>
-                  </button>
                 </div>
               </div>
               <div class="recipe-loras-list" id="recipeLorasList"></div>
@@ -885,13 +897,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -923,7 +941,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div class="recipe-section-header">
                 <h3>Resources</h3>
@@ -932,9 +949,6 @@ describe('Interaction-level regression coverage', () => {
                   <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
                     <i class="fas fa-external-link-alt"></i>
                   </button>
-                  <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
-                    <i class="fas fa-copy"></i>
-                  </button>
                 </div>
               </div>
               <div class="recipe-loras-list" id="recipeLorasList"></div>
@@ -1019,13 +1033,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -1057,7 +1077,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div id="recipeCheckpoint"></div>
               <div id="recipeResourceDivider"></div>
@@ -1068,9 +1087,6 @@ describe('Interaction-level regression coverage', () => {
                   <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
                     <i class="fas fa-external-link-alt"></i>
                   </button>
-                  <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
-                    <i class="fas fa-copy"></i>
-                  </button>
                 </div>
               </div>
               <div class="recipe-loras-list" id="recipeLorasList"></div>
@@ -1138,7 +1154,7 @@ describe('Interaction-level regression coverage', () => {
         <div id="recipeLorasList"></div>
         <span id="recipeLorasCount"></span>
         <button id="viewRecipeLorasBtn"></button>
-        <button id="copyRecipeSyntaxBtn"></button>
+        
       </div>
     `;
 
@@ -1191,7 +1207,7 @@ describe('Interaction-level regression coverage', () => {
         <div id="recipeLorasList"></div>
         <span id="recipeLorasCount"></span>
         <button id="viewRecipeLorasBtn"></button>
-        <button id="copyRecipeSyntaxBtn"></button>
+        
       </div>
     `;
 
@@ -1255,13 +1271,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -1293,7 +1315,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div id="recipeCheckpoint"></div>
               <div id="recipeResourceDivider"></div>
@@ -1304,9 +1325,6 @@ describe('Interaction-level regression coverage', () => {
                   <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
                     <i class="fas fa-external-link-alt"></i>
                   </button>
-                  <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
-                    <i class="fas fa-copy"></i>
-                  </button>
                 </div>
               </div>
               <div class="recipe-loras-list" id="recipeLorasList"></div>
@@ -1368,13 +1386,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -1406,7 +1430,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div id="recipeCheckpoint"></div>
               <div id="recipeResourceDivider"></div>
@@ -1417,9 +1440,6 @@ describe('Interaction-level regression coverage', () => {
                   <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
                     <i class="fas fa-external-link-alt"></i>
                   </button>
-                  <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
-                    <i class="fas fa-copy"></i>
-                  </button>
                 </div>
               </div>
               <div class="recipe-loras-list" id="recipeLorasList"></div>
@@ -1486,13 +1506,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -1524,7 +1550,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div class="recipe-section-header">
                 <h3>Resources</h3>
@@ -1533,9 +1558,6 @@ describe('Interaction-level regression coverage', () => {
                   <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
                     <i class="fas fa-external-link-alt"></i>
                   </button>
-                  <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
-                    <i class="fas fa-copy"></i>
-                  </button>
                 </div>
               </div>
               <div class="recipe-loras-list" id="recipeLorasList"></div>
@@ -1594,13 +1616,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -1632,7 +1660,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div class="recipe-section-header">
                 <h3>Resources</h3>
@@ -1641,9 +1668,6 @@ describe('Interaction-level regression coverage', () => {
                   <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
                     <i class="fas fa-external-link-alt"></i>
                   </button>
-                  <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
-                    <i class="fas fa-copy"></i>
-                  </button>
                 </div>
               </div>
               <div class="recipe-loras-list" id="recipeLorasList"></div>
@@ -1711,13 +1735,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -1749,7 +1779,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div class="recipe-section-header">
                 <h3>Resources</h3>
@@ -1758,9 +1787,6 @@ describe('Interaction-level regression coverage', () => {
                   <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
                     <i class="fas fa-external-link-alt"></i>
                   </button>
-                  <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
-                    <i class="fas fa-copy"></i>
-                  </button>
                 </div>
               </div>
               <div class="recipe-loras-list" id="recipeLorasList"></div>
@@ -1808,13 +1834,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -1846,7 +1878,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div class="recipe-section-header">
                 <h3>Resources</h3>
@@ -1932,13 +1963,19 @@ describe('Interaction-level regression coverage', () => {
         <div class="modal-content">
           <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <div class="recipe-header-actions" id="recipeHeaderActions">
+              <button class="modal-send-btn" id="sendRecipeBtn" title="Send Recipe to ComfyUI">
+                <i class="fas fa-paper-plane"></i> <span>Send to ComfyUI</span>
+              </button>
+            </div>
             <div id="recipeTagsContainer"></div>
           </header>
           <div class="modal-body">
-            <div class="recipe-top-section">
+            <div class="recipe-media-column">
               <div class="recipe-preview-container" id="recipePreviewContainer">
                 <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
               </div>
+            </div>
               <div class="info-section recipe-gen-params">
                 <div class="gen-params-container">
                   <div class="param-group info-item">
@@ -1970,7 +2007,6 @@ describe('Interaction-level regression coverage', () => {
                   <div class="other-params" id="recipeOtherParams"></div>
                 </div>
               </div>
-            </div>
             <div class="info-section recipe-bottom-section">
               <div class="recipe-section-header">
                 <h3>Resources</h3>