Agenttiavatarit palautettu: AgentBar-komponentti viidellä roolilla

Manageri (pöllö), Koodari (kameleontti), Testaaja (rukoilijasirkka),
QA (kilpikonna), Data (norsu). Klikattavat, highlight aktiiviselle.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

network-poc/frontend/public/avatars/README.md

@@ -0,0 +1,34 @@
+# Kipinä Agentic Playground - Animaatioiden käyttöönotto
+
+Koska Kipinä-verkon agenttien avatarit tällä erää ovat staattisia PNG-kuvatiedostoja, käyttöliittymä hyödyntää CSS-pohjaista pomppimisilmiötä (sekä pulppuavaa 💬 puhekuplaa) "puhumisen" merkkinä. Olemme kuitenkin koodanneet taustalle piilotetun tuen aivioiduille videoloopeille myöhempää käyttöä varten!
+
+Näin saat UI:n tukemaan oikeasti animoituja kasvoja/videoita.
+
+## 1. Luo Animoidut GIF-tiedostot
+Valitse mikä tahansa ulkoinen AI-työkalu (kuten HeyGen, Pika v1.0, tai Midjourney+Runway yhdistelmä) ja muunna avatar-kuvat (esim. `kettu_notext.png`) 3-5 sekunnin kestäviksi GIF-loopeiksi. Hahmon leuka tulisi pyöriä tai naama vääntyillä puhuessaan.
+
+## 2. Nimeä Tiedostot Oikein ja Lisää Ne Kansioon
+Siirrä uudet GIF-animaatiot samaan kansioon alkuperäisten kuvien kanssa. Muuta niiden nimi siten, että se päättyy tunnisteeseen `_puhuva.gif`.
+
+Esimerkkejä:
+- Koodari `kipina_notext.png` → `kipina_notext_puhuva.gif`
+- Manageri `karhunpentu.png` → `karhunpentu_puhuva.gif`
+- Asiakas `kettu_notext.png` → `kettu_notext_puhuva.gif`
+
+## 3. Aktivoi Koodi
+Käännä Kipinä Playground -ohjaimen JavaScript-koodista piilotettu ominaisuus päälle.
+
+Etsi tiedostosta `../index.html` (noin riviltä 1084, `updatePromptEditor`-funktiosta):
+```javascript
+// Piilotettu ominaisuus: Puhuvien videoiden / gif-animaatioiden kytkentä
+window.USE_ANIMATED_GIFS = false;
+```
+Muuta tuo `false` arvoon `true`:
+```javascript
+window.USE_ANIMATED_GIFS = true;
+```
+
+**Mitä logiikka tekee?**
+Aina kun valitset agentin kaaviosta, koodi korvaa aktiivisen kuvakkeen lopussa olevan `.png` -päätteen sanalla `_puhuva.gif` – lennosta! Jos poistut agentin valinnasta tai valitset jonkun toisen, koodi vaihtaa kuvan välittömästi takaisin staattiseen `.png`-versioon ja sulkee ilmentymän suun.
+
+Näin saat kaikkien asiantuntijoiden face-track looppeja hallittua yhdellä kädenkäänteellä.

network-poc/frontend/src/components/AgentBar.astro

@@ -0,0 +1,23 @@
+<!-- Agenttigalleria: roolit + avatarit -->
+<div id="agent-bar" style="display:flex;gap:8px;padding:10px 0;overflow-x:auto;align-items:flex-end">
+    <div class="agent-avatar" data-agent="manager" onclick="selectAgent('manager')" title="Manageri — suunnittelee ja pilkkoo tehtävät">
+        <img src="/avatars/owl.png" alt="Manageri" style="width:48px;height:48px;border-radius:50%;border:2px solid transparent">
+        <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Manageri</span>
+    </div>
+    <div class="agent-avatar" data-agent="coder" onclick="selectAgent('coder')" title="Koodari — kirjoittaa koodin">
+        <img src="/avatars/chameleon.png" alt="Koodari" style="width:48px;height:48px;border-radius:50%;border:2px solid transparent">
+        <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Koodari</span>
+    </div>
+    <div class="agent-avatar" data-agent="tester" onclick="selectAgent('tester')" title="Testaaja — arvioi ja etsii bugeja">
+        <img src="/avatars/mantis.png" alt="Testaaja" style="width:48px;height:48px;border-radius:50%;border:2px solid transparent">
+        <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Testaaja</span>
+    </div>
+    <div class="agent-avatar" data-agent="qa" onclick="selectAgent('qa')" title="QA — laadunvarmistus ja testit">
+        <img src="/avatars/tortoise.png" alt="QA" style="width:48px;height:48px;border-radius:50%;border:2px solid transparent">
+        <span style="font-size:10px;color:#8b949e;text-align:center;display:block">QA</span>
+    </div>
+    <div class="agent-avatar" data-agent="data" onclick="selectAgent('data')" title="Data — tietokanta-asiantuntija">
+        <img src="/avatars/elephant.png" alt="Data" style="width:48px;height:48px;border-radius:50%;border:2px solid transparent">
+        <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Data</span>
+    </div>
+</div>

network-poc/frontend/src/pages/index.astro

@@ -4,6 +4,7 @@ import StatusBar from "../components/StatusBar.astro";
 import Terminal from "../components/Terminal.astro";
 import Editor from "../components/Editor.astro";
 import Guide from "../components/Guide.astro";
+import AgentBar from "../components/AgentBar.astro";
 ---
 <!DOCTYPE html>
 <html lang="fi">
@@ -33,6 +34,7 @@ import Guide from "../components/Guide.astro";
 
         <!-- Agents-paneeli -->
         <div id="panel-agents" class="panel active">
+            <AgentBar />
             <StatusBar />
             <Terminal />
         </div>
@@ -66,6 +68,12 @@ import Guide from "../components/Guide.astro";
     const initHash = window.location.hash.replace('#','');
     if (['editor','guide'].includes(initHash)) switchTab(initHash);
 
+    // === Agent selection ===
+    window.selectAgent = function(agent) {
+        document.querySelectorAll('.agent-avatar').forEach(el => el.classList.remove('active'));
+        document.querySelector(`.agent-avatar[data-agent="${agent}"]`)?.classList.add('active');
+    };
+
     // === WebSocket ===
     const wsUrl = `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/ws`;
     const uiSocket = new WebSocket(wsUrl);

network-poc/frontend/src/styles/global.css

@@ -123,6 +123,20 @@ body {
 }
 .code-block .hljs { background: transparent; padding: 0; }
 
+/* Agent avatars */
+.agent-avatar {
+    cursor: pointer; text-align: center; transition: transform 0.15s;
+    opacity: 0.6;
+}
+.agent-avatar:hover { transform: scale(1.1); opacity: 0.9; }
+.agent-avatar.active {
+    opacity: 1;
+}
+.agent-avatar.active img {
+    border-color: var(--accent) !important;
+    box-shadow: 0 0 8px rgba(88,166,255,0.3);
+}
+
 /* Animations */
 @keyframes blink { 0%,100% { opacity:1 } 50% { opacity:0 } }
 @keyframes spin { to { transform: rotate(360deg) } }