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

Agenttiavatarit palautettu: AgentBar-komponentti viidellä roolilla

Browse Source 
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>
This commit is contained in:
Jaakko Vanhala
2026-04-09 20:53:35 +03:00
parent 1c7362c9b0
commit 3497f66db7
31 changed files with 79 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
network-poc/frontend/src/components/AgentBar.astro Normal file
View File

@@ -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>

8
network-poc/frontend/src/pages/index.astro
View File

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

14
network-poc/frontend/src/styles/global.css
View File

@@ -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) } }