From 27557945542fbd20f5a61b4c2e3141428b7e59ab Mon Sep 17 00:00:00 2001
From: jaakko <jaakko@kipina.tech>
Date: Tue, 7 Apr 2026 08:36:52 +0300
Subject: [PATCH] Agenttien valinta: klikkaus = yksi, Shift+klikkaus =
 multi-select
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Normaali klikkaus valitsee yhden agentin (poistaa muut valinnat).
Shift+klikkaus lisää/poistaa agentin valinnasta yhteistä promptia varten.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 network-poc/static/index.html | 50 ++++++++++++++++++++++++-----------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/network-poc/static/index.html b/network-poc/static/index.html
index 6892dd3..549f9f6 100644
--- a/network-poc/static/index.html
+++ b/network-poc/static/index.html
@@ -1013,7 +1013,7 @@
                         <div class="org-chart">
                             <!-- Taso 1 -->
                             <div class="org-level">
-                                <div class="avatar-card" id="avatar-client" data-agent="client" onclick="selectAgent('client')">
+                                <div class="avatar-card" id="avatar-client" data-agent="client" onclick="selectAgent('client', event)">
                                     <img src="/avatars/kettu_notext.png" alt="Asiakas (Kettu)">
                                     <div class="avatar-name">Asiakas</div>
                                     <div class="avatar-role">Tuoteomistaja</div>
@@ -1025,13 +1025,13 @@
                             <!-- Taso 2 -->
                             <div class="org-level" style="position: relative;">
                                 <!-- Tarkkailija laitetaan erilleen kauemmas sivuun jotta se näyttää itsenäiseltä valvojalta -->
-                                <div class="avatar-card" id="avatar-observer" data-agent="observer" onclick="selectAgent('observer')" style="position: absolute; right: calc(50% + 350px); top: 0;">
+                                <div class="avatar-card" id="avatar-observer" data-agent="observer" onclick="selectAgent('observer', event)" style="position: absolute; right: calc(50% + 350px); top: 0;">
                                     <img src="/avatars/aikuinen_susi.png" alt="Tarkkailija (Aikuinen Susi)">
                                     <div class="avatar-name">Tarkkailija</div>
                                     <div class="avatar-role">Laadunvalvonta</div>
                                 </div>
                                 
-                                <div class="avatar-card" id="avatar-kpn" data-agent="manager" onclick="selectAgent('manager')">
+                                <div class="avatar-card" id="avatar-kpn" data-agent="manager" onclick="selectAgent('manager', event)">
                                     <img src="/avatars/karhunpentu.png" alt="Manageri (Karhunpentu)">
                                     <div class="avatar-name">Manageri</div>
                                     <div class="avatar-role">KPN CLI</div>
@@ -1044,22 +1044,22 @@
                             
                             <!-- Taso 3 -->
                             <div class="org-level" style="gap: 20px;">
-                                <div class="avatar-card" id="avatar-coder" data-agent="coder" onclick="selectAgent('coder')">
+                                <div class="avatar-card" id="avatar-coder" data-agent="coder" onclick="selectAgent('coder', event)">
                                     <img src="/avatars/kipina_notext.png" alt="Koodari (Salamanteri)">
                                     <div class="avatar-name">Koodari</div>
                                     <div class="avatar-role">SOFTAKEHITYS</div>
                                 </div>
-                                <div class="avatar-card" id="avatar-data" data-agent="data" onclick="selectAgent('data')">
+                                <div class="avatar-card" id="avatar-data" data-agent="data" onclick="selectAgent('data', event)">
                                     <img src="/avatars/pesukarhu_notext.png" alt="Data-Agentti (Pesukarhu)">
                                     <div class="avatar-name">Data</div>
                                     <div class="avatar-role">Tietokannat</div>
                                 </div>
-                                <div class="avatar-card" id="avatar-qa" data-agent="qa" onclick="selectAgent('qa')">
+                                <div class="avatar-card" id="avatar-qa" data-agent="qa" onclick="selectAgent('qa', event)">
                                     <img src="/avatars/susi_notext.png" alt="QA (Pikkususi)">
                                     <div class="avatar-name">QA</div>
                                     <div class="avatar-role">Testaus</div>
                                 </div>
-                                <div class="avatar-card" id="avatar-tester" data-agent="tester" onclick="selectAgent('tester')">
+                                <div class="avatar-card" id="avatar-tester" data-agent="tester" onclick="selectAgent('tester', event)">
                                     <img src="/avatars/laiskiainen_notext.png" alt="DevOps (Laiskiainen)">
                                     <div class="avatar-name">DevOps</div>
                                     <div class="avatar-role">Käyttöönotto</div>
@@ -1264,16 +1264,36 @@
             }
         }
 
-        window.selectAgent = function(agent) {
-            const card = document.querySelector(`[data-agent="${agent}"]`);
+        window.selectAgent = function(agent, e) {
+            const isShift = e && e.shiftKey;
 
-            if (selectedAgents.has(agent)) {
-                selectedAgents.delete(agent);
-                card.classList.remove('selected');
-                card.classList.remove('active');
+            if (isShift) {
+                // Shift+klikkaus: lisää/poista multi-selectistä
+                const card = document.querySelector(`[data-agent="${agent}"]`);
+                if (selectedAgents.has(agent)) {
+                    selectedAgents.delete(agent);
+                    card?.classList.remove('selected');
+                    card?.classList.remove('active');
+                } else {
+                    selectedAgents.add(agent);
+                    card?.classList.add('selected');
+                }
             } else {
-                selectedAgents.add(agent);
-                card.classList.add('selected');
+                // Normaali klikkaus: valitse yksi (poista muut)
+                const wasSelected = selectedAgents.has(agent) && selectedAgents.size === 1;
+                // Poistetaan kaikki valinnat
+                document.querySelectorAll('.avatar-card').forEach(c => {
+                    c.classList.remove('selected');
+                    c.classList.remove('active');
+                });
+                selectedAgents.clear();
+
+                if (!wasSelected) {
+                    // Valitaan klikattu
+                    selectedAgents.add(agent);
+                    const card = document.querySelector(`[data-agent="${agent}"]`);
+                    card?.classList.add('selected');
+                }
             }
 
             updatePromptEditor();