Avatarit vaihtuvat pystyyn pipelinen aikana, aktiivinen agentti highlightataan

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) <noreply@anthropic.com>

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<span style="color:#3fb950;font-weight:bold">[${step}/${template.order.length}] ${esc(cdr.name)}</span> — ${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<span style="color:var(--accent);font-weight:bold">[${template.order.length + 1}] ${esc(tst.name)}</span> — 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<span style="color:#d29922;font-weight:bold">[${template.order.length + 2}] ${esc(cdr.name)}</span> — 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<span style="color:var(--purple);font-weight:bold">━━━ Valmis (${Object.keys(files).length} tiedostoa) ━━━</span>`);
         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);