From b23ea0ee4e97f626e3d1d7ee0dc7df688b0570da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CNaeel=E2=80=9D?= <tazet@narod.ru>
Date: Wed, 29 Jul 2026 09:43:29 +0400
Subject: [PATCH] =?UTF-8?q?v1.1.15:=20dynamic=20stages-box=20=E2=80=94=20i?=
 =?UTF-8?q?nline=20after=20instance,=20not=20below=20all?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/app.py               |  2 +-
 site/static/app.js        | 18 +++++++++++++-----
 site/templates/index.html |  1 -
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/site/app.py b/site/app.py
index 3188eb4..89e305a 100644
--- a/site/app.py
+++ b/site/app.py
@@ -18,7 +18,7 @@ from routes.api import bp as api_bp
 from routes.api_test import bp as api_test_bp
 
 # Версия — меняется при КАЖДОМ изменении кода. Показывается в топбаре UI.
-VERSION = "1.1.14"
+VERSION = "1.1.15"
 
 app = Flask(__name__, template_folder="templates", static_folder="static")
 app.config["NUBES_API_ENDPOINT"] = os.getenv("NUBES_API_ENDPOINT", "https://lk-api-gateway-test.ngcloud.ru/api/v1/svc")
diff --git a/site/static/app.js b/site/static/app.js
index 52596ac..8b9884c 100644
--- a/site/static/app.js
+++ b/site/static/app.js
@@ -37,7 +37,7 @@ async function selectService(svcId){
     currentSvcId=svcId;
     selectedInst=null; selectedOp=null; stopPoll();
     document.getElementById('params-area').style.display='none';
-    document.getElementById('stages-box').style.display='none';
+    document.querySelectorAll('.stages-box').forEach(e=>e.remove());
     // Подсветить активный сервис в боковой панели
     document.querySelectorAll('.svc-item').forEach(e=>e.classList.remove('active'));
     const svcEl=document.querySelector(`.svc-item[onclick*="${svcId}"]`);
@@ -135,7 +135,7 @@ function findInstName(){
 function showParams(opId,opName){
     selectedOp={opId,opName,svcId:currentSvcId};
     document.getElementById('params-area').style.display='block';
-    document.getElementById('stages-box').style.display='none';
+    document.querySelectorAll('.stages-box').forEach(e=>e.remove());
     document.getElementById('test-status').textContent='';
 
     const isCreate=opName==='create';
@@ -304,8 +304,15 @@ async function executeOp(params){
     btn.textContent=selectedOp.opName+'...';
     btn.disabled=true;
     setRunningState(selectedOp.opName, displayName);
-    document.getElementById('stages-box').style.display='block';
-    document.getElementById('stages-box').innerHTML='';
+    // Создать динамический stages-box после инстанса
+    const instId=selectedInst||'';
+    const afterEl=instId?document.getElementById('ops-'+instId):null;
+    document.querySelectorAll('.stages-box').forEach(e=>e.remove());
+    const stagesBox=document.createElement('div');
+    stagesBox.className='stages-box';
+    stagesBox.style.cssText='max-height:200px;overflow-y:auto;padding:4px 8px;margin-left:16px;background:var(--brand-grey-light);border-radius:4px;';
+    if(afterEl){afterEl.after(stagesBox);}
+    else{document.getElementById('inst-list').appendChild(stagesBox);}
 
     try{
         const r=await fetch('/api/test',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({
@@ -348,7 +355,8 @@ function showStages(stages){
         const icon=done?(s.isSuccessful?'✅':'❌'):'⏳';
         html+=`<div style="font-size:11px;padding:2px 0;">${icon} ${s.stage} — ${(s.duration||0).toFixed(1)}s</div>`;
     });
-    document.getElementById('stages-box').innerHTML=html;
+    const boxes=document.querySelectorAll('.stages-box');
+    if(boxes.length) boxes[boxes.length-1].innerHTML=html;
 }
 
 function stopPoll(){
diff --git a/site/templates/index.html b/site/templates/index.html
index 0cc8f16..d5fe481 100644
--- a/site/templates/index.html
+++ b/site/templates/index.html
@@ -117,7 +117,6 @@
                 <button class="btn btn-primary btn-sm" id="btn-test" style="display:none;">Запустить</button>
                 <span id="test-status" style="font-size:11px;margin-left:8px;"></span>
             </div>
-            <div id="stages-box" style="display:none;max-height:200px;overflow-y:auto;"></div>
         </div>
         <div id="create-btn-area" style="padding:0 8px 8px;">
             <div class="inst-item" style="border-top:1px solid var(--brand-gray);padding-top:8px;margin-top:4px;" onclick="startCreate()">