Agenttien konfigurointi: promptit, mallit, järjestys, omat agentit

Klikatessa avataria avautuu konfigurointipaneeli:
- Nimen muokkaus
- Mallinvalinta (0.5B/1.5B/3B/7B)
- System promptin muokkaus
- Pipeline-järjestys (drag & drop avatarit ja pipeline-tagit)
- Agentin poisto

"+" -nappi luo uuden agentin satunnaisella avatarilla.
Konfiguraatio tallennetaan localStorageen (kpn-agents).
Pipeline (kpn project) käyttää agenttien prompteja ja malleja.

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

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

@@ -1,23 +1,52 @@
-<!-- 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>
+<!-- Agenttigalleria + konfigurointipaneeli -->
+<div style="display:flex;gap:16px;padding:10px 0">
+    <!-- Agenttilista (drag & drop) -->
+    <div id="agent-bar" style="display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap">
+        <!-- Renderöidään JS:stä -->
     </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>
+    <!-- + Lisää agentti -->
+    <div id="add-agent-btn" class="agent-avatar" onclick="addCustomAgent()" title="Lisää oma agentti" style="opacity:0.4">
+        <div style="width:48px;height:48px;border-radius:50%;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--border)">+</div>
+        <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Lisää</span>
+    </div>
+</div>
+
+<!-- Agentin konfigurointipaneeli (avautuu klikkaamalla avataria) -->
+<div id="agent-config" style="display:none;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:16px;margin-bottom:10px">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
+        <div style="display:flex;align-items:center;gap:10px">
+            <img id="config-avatar" src="" style="width:40px;height:40px;border-radius:50%">
+            <div>
+                <input id="config-name" style="background:transparent;border:none;color:var(--text);font-size:16px;font-weight:600;outline:none;width:200px" placeholder="Agentin nimi">
+                <div id="config-role" style="font-size:11px;color:#8b949e"></div>
+            </div>
+        </div>
+        <div style="display:flex;gap:6px">
+            <button class="btn btn-red" onclick="deleteAgent()" title="Poista agentti">Poista</button>
+            <button class="btn btn-muted" onclick="closeAgentConfig()">Sulje</button>
+        </div>
+    </div>
+
+    <!-- Malli -->
+    <div style="margin-bottom:10px">
+        <label style="font-size:12px;color:#8b949e;display:block;margin-bottom:4px">Kielimalli</label>
+        <select id="config-model" style="background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px 10px;font-size:13px;width:100%">
+            <option value="qwen-coder">Qwen2.5-Coder:0.5B (selain)</option>
+            <option value="qwen-coder-3b">Qwen2.5-Coder:3B (Ollama)</option>
+            <option value="qwen2.5-coder:7b">Qwen2.5-Coder:7B (Ollama)</option>
+            <option value="qwen2.5-coder:1.5b">Qwen2.5-Coder:1.5B (Ollama)</option>
+        </select>
+    </div>
+
+    <!-- System prompt -->
+    <div style="margin-bottom:10px">
+        <label style="font-size:12px;color:#8b949e;display:block;margin-bottom:4px">System prompt</label>
+        <textarea id="config-prompt" rows="4" style="width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:8px;font-size:13px;font-family:inherit;resize:vertical" placeholder="Kuvaa agentin rooli ja käyttäytyminen..."></textarea>
+    </div>
+
+    <!-- Pipeline-järjestys -->
+    <div>
+        <label style="font-size:12px;color:#8b949e;display:block;margin-bottom:4px">Pipeline-järjestys <span style="color:var(--border)">(vedä järjestääksesi)</span></label>
+        <div id="config-pipeline" style="display:flex;gap:4px;flex-wrap:wrap"></div>
     </div>
 </div>