jaakko/agentic-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
jaakko
2026-04-07 08:36:52 +03:00
parent dbb37b3c60
commit 2755794554
1 changed files with 35 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
network-poc/static/index.html
View File

@@ -1013,7 +1013,7 @@
<div class="org-chart"> <div class="org-chart">
<!-- Taso 1 --> <!-- Taso 1 -->
<div class="org-level"> <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)"> <img src="/avatars/kettu_notext.png" alt="Asiakas (Kettu)">
<div class="avatar-name">Asiakas</div> <div class="avatar-name">Asiakas</div>
<div class="avatar-role">Tuoteomistaja</div> <div class="avatar-role">Tuoteomistaja</div>
@@ -1025,13 +1025,13 @@
<!-- Taso 2 --> <!-- Taso 2 -->
<div class="org-level" style="position: relative;"> <div class="org-level" style="position: relative;">
<!-- Tarkkailija laitetaan erilleen kauemmas sivuun jotta se näyttää itsenäiseltä valvojalta --> <!-- 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)"> <img src="/avatars/aikuinen_susi.png" alt="Tarkkailija (Aikuinen Susi)">
<div class="avatar-name">Tarkkailija</div> <div class="avatar-name">Tarkkailija</div>
<div class="avatar-role">Laadunvalvonta</div> <div class="avatar-role">Laadunvalvonta</div>
</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)"> <img src="/avatars/karhunpentu.png" alt="Manageri (Karhunpentu)">
<div class="avatar-name">Manageri</div> <div class="avatar-name">Manageri</div>
<div class="avatar-role">KPN CLI</div> <div class="avatar-role">KPN CLI</div>
@@ -1044,22 +1044,22 @@
<!-- Taso 3 --> <!-- Taso 3 -->
<div class="org-level" style="gap: 20px;"> <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)"> <img src="/avatars/kipina_notext.png" alt="Koodari (Salamanteri)">
<div class="avatar-name">Koodari</div> <div class="avatar-name">Koodari</div>
<div class="avatar-role">SOFTAKEHITYS</div> <div class="avatar-role">SOFTAKEHITYS</div>
</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)"> <img src="/avatars/pesukarhu_notext.png" alt="Data-Agentti (Pesukarhu)">
<div class="avatar-name">Data</div> <div class="avatar-name">Data</div>
<div class="avatar-role">Tietokannat</div> <div class="avatar-role">Tietokannat</div>
</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)"> <img src="/avatars/susi_notext.png" alt="QA (Pikkususi)">
<div class="avatar-name">QA</div> <div class="avatar-name">QA</div>
<div class="avatar-role">Testaus</div> <div class="avatar-role">Testaus</div>
</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)"> <img src="/avatars/laiskiainen_notext.png" alt="DevOps (Laiskiainen)">
<div class="avatar-name">DevOps</div> <div class="avatar-name">DevOps</div>
<div class="avatar-role">Käyttöönotto</div> <div class="avatar-role">Käyttöönotto</div>
@@ -1264,16 +1264,36 @@
} }
} }
window.selectAgent = function(agent) { window.selectAgent = function(agent, e) {
const card = document.querySelector(`[data-agent="${agent}"]`); const isShift = e && e.shiftKey;
if (selectedAgents.has(agent)) { if (isShift) {
selectedAgents.delete(agent); // Shift+klikkaus: lisää/poista multi-selectistä
card.classList.remove('selected'); const card = document.querySelector(`[data-agent="${agent}"]`);
card.classList.remove('active'); if (selectedAgents.has(agent)) {
selectedAgents.delete(agent);
card?.classList.remove('selected');
card?.classList.remove('active');
} else {
selectedAgents.add(agent);
card?.classList.add('selected');
}
} else { } else {
selectedAgents.add(agent); // Normaali klikkaus: valitse yksi (poista muut)
card.classList.add('selected'); 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(); updatePromptEditor();