From 6413f0238f2dc8a22aa96f5191c376e1096c135f Mon Sep 17 00:00:00 2001 From: Jaakko Vanhala Date: Fri, 10 Apr 2026 07:17:30 +0300 Subject: [PATCH] Avatarit vaihtuvat pystyyn pipelinen aikana, aktiivinen agentti highlightataan MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Pipeline käynnistyessä: - Avataririvi vaihtuu pystyyn (column) → näkee kuka tekee mitä - Aktiivinen agentti saa glow-highlightin (coder sininen, tester sininen) - Korjausvaiheessa koodari highlightataan uudelleen Pipeline valmistuttua: - Palautetaan vaakarivi (row) - Poistetaan highlight Poistettu manuaalinen layout-toggle-nappi — layout on automaattinen. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../frontend/src/components/AgentBar.astro | 11 +++---- network-poc/frontend/src/pages/index.astro | 31 ++++++++++++++----- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/network-poc/frontend/src/components/AgentBar.astro b/network-poc/frontend/src/components/AgentBar.astro index 400429d..977e1e6 100644 --- a/network-poc/frontend/src/components/AgentBar.astro +++ b/network-poc/frontend/src/components/AgentBar.astro @@ -4,13 +4,10 @@
- -
-
-
+
- Lisää -
- + +
+
+
+ Lisää
diff --git a/network-poc/frontend/src/pages/index.astro b/network-poc/frontend/src/pages/index.astro index 2f5dfe9..5beb880 100644 --- a/network-poc/frontend/src/pages/index.astro +++ b/network-poc/frontend/src/pages/index.astro @@ -216,15 +216,19 @@ OUTPUT FORMAT: // === Agent selection & config === let selectedAgent = null; - // Layout: vaaka/pysty toggle - let agentLayout = localStorage.getItem('kpn-agent-layout') || 'row'; - window.toggleAgentLayout = function() { - agentLayout = agentLayout === 'row' ? 'column' : 'row'; - localStorage.setItem('kpn-agent-layout', agentLayout); + // Layout: vaaka (oletus) → pysty kun pipeline pyörii + function setAgentLayout(layout) { const bar = document.getElementById('agent-bar'); - bar.style.flexDirection = agentLayout; - bar.style.alignItems = agentLayout === 'column' ? 'flex-start' : 'flex-end'; - }; + if (!bar) return; + bar.style.flexDirection = layout; + bar.style.alignItems = layout === 'column' ? 'flex-start' : 'flex-end'; + } + + // Highlightaa aktiivinen agentti pipeline-aikana + function highlightAgent(agentKey) { + document.querySelectorAll('.agent-avatar').forEach(el => el.classList.remove('active')); + if (agentKey) document.querySelector(`.agent-avatar[data-agent="${agentKey}"]`)?.classList.add('active'); + } function renderAgentBar() { const bar = document.getElementById('agent-bar'); @@ -721,10 +725,14 @@ OUTPUT FORMAT: const cdr = agents.coder || Object.values(agents)[1]; const tst = agents.tester || Object.values(agents)[2]; + // Vaihdetaan pystyyn pipelinen ajaksi + setAgentLayout('column'); + // Etsitään sopivin mallipohja const template = Object.values(templates)[0]; // Toistaiseksi vain FastAPI CRUD if (!template) { termLog(' ✗ Mallipohjia ei ladattu', '#f85149'); + setAgentLayout('row'); return; } @@ -740,6 +748,7 @@ OUTPUT FORMAT: const step = i + 1; termLog(`\n[${step}/${template.order.length}] ${esc(cdr.name)} — ${esc(fileName)}`); + highlightAgent('coder'); // Opettava selitys: miksi tämä tiedosto, mitä se sisältää explainStep(fileName, fileDef.instructions); @@ -779,6 +788,7 @@ OUTPUT FORMAT: // Review const allCode = Object.entries(files).map(([n,c]) => `--- ${n} ---\n${c}`).join('\n\n'); termLog(`\n[${template.order.length + 1}] ${esc(tst.name)} — review`); + highlightAgent('tester'); explainStep('Koodikatselmointi', 'Testaaja tarkistaa importit, nimeämiset, puuttuvat virheenkäsittelyt ja tiedostojen yhteensopivuuden.'); const tstPrompt = (tst.prompt ? tst.prompt+'\n\n' : '') + @@ -787,10 +797,15 @@ OUTPUT FORMAT: if (review && !review.toLowerCase().includes('lgtm')) { termLog(`\n[${template.order.length + 2}] ${esc(cdr.name)} — korjaukset`); + highlightAgent('coder'); explainStep('Korjausluuppi', 'Testaaja löysi ongelmia. Koodari saa palautteen ja korjaa koodin.'); await kpnRun(cdr.model, `${cdr.prompt ? cdr.prompt+'\n\n' : ''}Fix these issues:\n${review}\n\nCurrent code:\n${allCode}\n\nWrite the corrected files.`); } + // Pipeline valmis — palautetaan vaaka ja poistetaan highlight + setAgentLayout('row'); + highlightAgent(null); + termLog(`\n━━━ Valmis (${Object.keys(files).length} tiedostoa) ━━━`); explainStep('Tulos', `Projekti "${task}" generoitu ${Object.keys(files).length} tiedostoon. Klikkaa "Avaa editorissa" tutkiaksesi koodia. Aja: uv run uvicorn main:app --reload`); renderProjectCard(files, task);