From a24a0b39aa8abe3751f63b8837b59146d2d8c2a0 Mon Sep 17 00:00:00 2001
From: Naeel <naeel@nubes.ru>
Date: Mon, 20 Apr 2026 15:17:17 +0300
Subject: [PATCH] feat(console): wider assistant, generate+explain buttons
 v0.8.2

---
 console/ui/index.html | 55 +++++++++++++++++++++++++++++++++++++++----
 1 file changed, 51 insertions(+), 4 deletions(-)

diff --git a/console/ui/index.html b/console/ui/index.html
index 366725f..8f15a62 100644
--- a/console/ui/index.html
+++ b/console/ui/index.html
@@ -390,8 +390,10 @@
         <textarea id="c-code">def main(ctx):
     return {"ok": True, "msg": "hello from fission console"}
 </textarea>
-        <div style="margin-top:6px;">
+        <div style="margin-top:6px; display:flex; gap:6px; flex-wrap:wrap;">
           <button class="btn ghost" id="c-ai-btn" onclick="aiCheck('c-code','c-lang','c-ai-result')">&#x1F50D; Проверить синтаксис</button>
+          <button class="btn ghost" id="c-gen-btn" onclick="aiGenerate()">&#x2728; Сгенерировать код</button>
+          <button class="btn ghost" id="c-exp-btn" onclick="aiExplain('c-code','c-lang','c-ai-result')">&#x1F4D6; Что делает?</button>
         </div>
         <div id="c-ai-result" style="display:none;margin-top:8px;padding:10px 12px;border-radius:6px;font-size:13px;line-height:1.5;white-space:pre-wrap;font-family:monospace;"></div>
       </div>
@@ -424,8 +426,9 @@
       <div>
         <label>Код</label>
         <textarea id="e-code"></textarea>
-        <div style="margin-top:6px;">
+        <div style="margin-top:6px; display:flex; gap:6px; flex-wrap:wrap;">
           <button class="btn ghost" id="e-ai-btn" onclick="aiCheck('e-code','e-lang-hidden','e-ai-result')">&#x1F50D; Проверить синтаксис</button>
+          <button class="btn ghost" id="e-exp-btn" onclick="aiExplain('e-code','e-lang-hidden','e-ai-result')">&#x1F4D6; Что делает?</button>
         </div>
         <div id="e-ai-result" style="display:none;margin-top:8px;padding:10px 12px;border-radius:6px;font-size:13px;line-height:1.5;white-space:pre-wrap;font-family:monospace;"></div>
       </div>
@@ -858,7 +861,7 @@
        ================================================================ -->
   <div id="assistant-panel" style="
     position:fixed; bottom:0; right:24px;
-    width:360px; background:#1e1e2e; border:1px solid #3a3a5c;
+    width:720px; background:#1e1e2e; border:1px solid #3a3a5c;
     border-bottom:none; border-radius:8px 8px 0 0;
     font-family:inherit; z-index:900; box-shadow:0 -2px 12px rgba(0,0,0,.4);
   ">
@@ -872,7 +875,7 @@
     </div>
     <div id="assistant-body" style="padding:10px; display:flex; flex-direction:column; gap:8px;">
       <div id="assistant-messages" style="
-        min-height:80px; max-height:260px; overflow-y:auto;
+        min-height:80px; max-height:400px; overflow-y:auto;
         font-size:.82rem; line-height:1.5; color:#cdd6f4;
         background:#13131f; border-radius:4px; padding:8px;
         white-space:pre-wrap; word-break:break-word;
@@ -918,6 +921,50 @@
       }
       msgs.scrollTop = msgs.scrollHeight;
     }
+    async function aiGenerate() {
+      var name = (document.getElementById('c-name').value || '').trim() || 'my-func';
+      var lang = document.getElementById('c-lang').value || 'python';
+      var btn = document.getElementById('c-gen-btn');
+      var resEl = document.getElementById('c-ai-result');
+      btn.disabled = true; btn.textContent = '⏳ Генерирую...';
+      resEl.style.display = 'block'; resEl.style.background = 'var(--bg-alt)'; resEl.style.color = 'var(--fg)';
+      resEl.textContent = 'Запрашиваю у LLM...';
+      try {
+        var q = 'Напиши функцию Fission на ' + lang + ' с именем "' + name + '". Верни только чистый код без пояснений и без markdown-блоков.';
+        var d = await requestJSON('/console/api/ai/ask', 'POST', {question: q});
+        var code = (d.answer || '').replace(/^```[\w]*\n?/, '').replace(/\n?```$/, '');
+        document.getElementById('c-code').value = code;
+        resEl.style.background = '#1a3a1a'; resEl.style.color = '#8f8';
+        resEl.textContent = 'Код сгенерирован и вставлен.';
+      } catch(e) {
+        resEl.style.background = '#3a2a00'; resEl.style.color = '#ffa';
+        resEl.textContent = 'Ошибка: ' + e.message;
+      } finally {
+        btn.disabled = false; btn.textContent = '✨ Сгенерировать код';
+      }
+    }
+    async function aiExplain(codeId, langId, resultId) {
+      var code = (document.getElementById(codeId).value || '').trim();
+      var lang = (document.getElementById(langId) ? document.getElementById(langId).value : '') || 'python';
+      var resEl = document.getElementById(resultId);
+      var btnId = codeId === 'c-code' ? 'c-exp-btn' : 'e-exp-btn';
+      var btn = document.getElementById(btnId);
+      if (!code) { resEl.style.display='block'; resEl.style.background='var(--bg-alt)'; resEl.textContent='Введите код.'; return; }
+      btn.disabled = true; btn.textContent = '⏳ Объясняю...';
+      resEl.style.display = 'block'; resEl.style.background = 'var(--bg-alt)'; resEl.style.color = 'var(--fg)';
+      resEl.textContent = 'Запрашиваю у LLM...';
+      try {
+        var q = 'Кратко объясни что делает этот ' + lang + ' код:\n' + code;
+        var d = await requestJSON('/console/api/ai/ask', 'POST', {question: q});
+        resEl.style.background = '#1a2a3a'; resEl.style.color = '#8cf';
+        resEl.textContent = d.answer || '(пустой ответ)';
+      } catch(e) {
+        resEl.style.background = '#3a2a00'; resEl.style.color = '#ffa';
+        resEl.textContent = 'Ошибка: ' + e.message;
+      } finally {
+        btn.disabled = false; btn.textContent = '📖 Что делает?';
+      }
+    }
     // end ai/ask feature
   </script>
   <!-- end ai/ask feature -->