fix(ui): add model modal backdrop blur to match recipe modal

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
2026-08-18 03:21:26 -03:00 · 2026-08-18 09:09:05 +08:00 · 2026-08-18 09:09:05 +08:00 · 2026-08-16 11:47:29 +00:00
16 changed files with 226 additions and 186 deletions
@@ -853,7 +853,8 @@
    "recipes": {
        "title": "LoRA-Rezepte",
        "actions": {
-            "sendCheckpoint": "Send to ComfyUI"
+            "sendCheckpoint": "Send to ComfyUI",
+            "sendRecipe": "Send to ComfyUI"
        },
        "controls": {
            "import": {
@@ -853,7 +853,8 @@
  "recipes": {
    "title": "LoRA Recipes",
    "actions": {
-      "sendCheckpoint": "Send to ComfyUI"
+      "sendCheckpoint": "Send to ComfyUI",
+      "sendRecipe": "Send to ComfyUI"
    },
    "controls": {
      "import": {
@@ -853,7 +853,8 @@
    "recipes": {
        "title": "Recetas de LoRA",
        "actions": {
-            "sendCheckpoint": "Enviar a ComfyUI"
+            "sendCheckpoint": "Enviar a ComfyUI",
+            "sendRecipe": "Enviar a ComfyUI"
        },
        "controls": {
            "import": {
@@ -853,7 +853,8 @@
    "recipes": {
        "title": "LoRA Recipes",
        "actions": {
-            "sendCheckpoint": "Envoyer vers ComfyUI"
+            "sendCheckpoint": "Envoyer vers ComfyUI",
+            "sendRecipe": "Envoyer vers ComfyUI"
        },
        "controls": {
            "import": {
@@ -853,7 +853,8 @@
    "recipes": {
        "title": "מתכוני LoRA",
        "actions": {
-            "sendCheckpoint": "שלח ל-ComfyUI"
+            "sendCheckpoint": "שלח ל-ComfyUI",
+            "sendRecipe": "שלח ל-ComfyUI"
        },
        "controls": {
            "import": {
@@ -853,7 +853,8 @@
    "recipes": {
        "title": "LoRAレシピ",
        "actions": {
-            "sendCheckpoint": "ComfyUIへ送信"
+            "sendCheckpoint": "ComfyUIへ送信",
+            "sendRecipe": "ComfyUIへ送信"
        },
        "controls": {
            "import": {
@@ -853,7 +853,8 @@
    "recipes": {
        "title": "LoRA 레시피",
        "actions": {
-            "sendCheckpoint": "ComfyUI로 보내기"
+            "sendCheckpoint": "ComfyUI로 보내기",
+            "sendRecipe": "ComfyUI로 보내기"
        },
        "controls": {
            "import": {
@@ -853,7 +853,8 @@
    "recipes": {
        "title": "Рецепты LoRA",
        "actions": {
-            "sendCheckpoint": "Отправить в ComfyUI"
+            "sendCheckpoint": "Отправить в ComfyUI",
+            "sendRecipe": "Отправить в ComfyUI"
        },
        "controls": {
            "import": {
@@ -853,7 +853,8 @@
    "recipes": {
        "title": "LoRA 配方",
        "actions": {
-            "sendCheckpoint": "发送到 ComfyUI"
+            "sendCheckpoint": "发送到 ComfyUI",
+            "sendRecipe": "发送到 ComfyUI"
        },
        "controls": {
            "import": {
@@ -853,7 +853,8 @@
    "recipes": {
        "title": "LoRA 配方",
        "actions": {
-            "sendCheckpoint": "傳送到 ComfyUI"
+            "sendCheckpoint": "傳送到 ComfyUI",
+            "sendRecipe": "傳送到 ComfyUI"
        },
        "controls": {
            "import": {
@@ -1,3 +1,10 @@
+/* Blurred backdrop for the model modal to match the recipe modal */
+#modelModal {
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+}
+
 /* Lora Modal Header */
 .modal-header {
    display: flex;
@@ -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;
-    flex-direction: column;
-    gap: var(--space-2);
+    display: grid;
+    grid-template-columns: 320px minmax(0, 1fr) 420px;
+    gap: var(--space-3);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
@@ -174,19 +188,22 @@
    }
 }

-/* Top Section: Preview and Gen Params */
-.recipe-top-section {
-    display: grid;
-    grid-template-columns: 280px 1fr;
+/* Left Column: Preview */
+.recipe-media-column {
+    display: flex;
+    flex-direction: column;
    gap: var(--space-2);
-    flex-shrink: 0;
-    margin-bottom: var(--space-2);
+    min-height: 0;
+    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) {
-    .recipe-top-section {
-        grid-template-columns: 1fr;
+@media (max-width: 1500px) {
+    #recipeModal .modal-body {
+        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;
-        max-height: 300px;
+        overflow-y: visible;
+        flex-shrink: 0;
+    }
+
+    .recipe-bottom-section {
+        flex: none;
+    }
+
+    .recipe-loras-list {
+        max-height: 45vh;
    }
 }

@@ -1045,19 +1083,11 @@
        margin-bottom: 6px;
    }

-    .recipe-top-section {
-        grid-template-columns: 1fr;
-        gap: var(--space-1);
-        margin-bottom: var(--space-1);
-    }
-
-    .recipe-preview-container {
-        display: none;
-    }
-
-    .recipe-gen-params {
-        height: auto;
-        max-height: 210px;
+    .recipe-preview-container,
+    .recipe-preview-container img,
+    .recipe-preview-container video,
+    .recipe-preview-media {
+        max-height: 32vh;
    }

    .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);
    }
@@ -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>
@@ -4,21 +4,27 @@
        
        <header class="recipe-modal-header">
            <h2 id="recipeModalTitle">Recipe Details</h2>
-            <!-- Header Actions: populated dynamically in RecipeModal.js -->
-            <div class="recipe-header-actions" id="recipeHeaderActions"></div>
+            <!-- Header Actions: Send button is static; source URL button is appended dynamically in RecipeModal.js -->
+            <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 -->
-            <div class="recipe-top-section">
+            <!-- Left Column: Preview -->
+            <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 class="info-section recipe-gen-params">
+            </div>
+
+            <!-- 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>
-            
-            <!-- Bottom Section: Resources -->
+
+            <!-- Right Column: 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">
@@ -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>