Agenttien valinta: klikkaus = yksi, Shift+klikkaus = multi-select

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>
This commit is contained in:
2026-04-07 08:36:52 +03:00
parent dbb37b3c60
commit 2755794554

View File

@@ -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();