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

Avatarit ja tyylit palautettu main-haarasta: glassmorphism-kortit, oikeat hahmot

Browse Source 
Avatarit: karhunpentu (Manageri), kipina (Koodari), pesukarhu (Data),
susi (QA), laiskiainen (DevOps), aikuinen_susi (Tarkkailija).

CSS: glassmorphism-taustat, hover-animaatio, active-glow,
pyöristetyt reunat, varjostukset. Sama tyyli kuin main-haarassa.

Huom: tyhjennä localStorage (kpn-agents) selainkonsolin kautta
jotta uudet oletusavatarit tulevat voimaan:
  localStorage.removeItem('kpn-agents')

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jaakko Vanhala
2026-04-09 21:46:21 +03:00
parent 84d13153ed
commit eb57ee7b92
2 changed files with 42 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -58,11 +58,12 @@ import AgentBar from "../components/AgentBar.astro";
// === Globaalit tilat ===
const defaultAgents = {
manager: { name: 'Manageri', avatar: '/avatars/owl.png', model: 'qwen-coder', prompt: 'You are a project manager. Break tasks into files, prioritize, coordinate.', order: 0 },
coder: { name: 'Koodari', avatar: '/avatars/chameleon.png', model: 'qwen-coder', prompt: 'You are an expert developer. Write clean, working code. Respond with code only.', order: 1 },
tester: { name: 'Testaaja', avatar: '/avatars/mantis.png', model: 'qwen-coder', prompt: 'You are a code reviewer. Find bugs, suggest improvements. Be brief.', order: 2 },
qa: { name: 'QA', avatar: '/avatars/tortoise.png', model: 'qwen-coder', prompt: 'You are a QA engineer. Write tests, verify edge cases.', order: 3 },
data: { name: 'Data', avatar: '/avatars/elephant.png', model: 'qwen-coder', prompt: 'You are a database expert. Design schemas, optimize queries.', order: 4 },
manager: { name: 'Manageri', avatar: '/avatars/karhunpentu.png', model: 'qwen-coder', prompt: 'You are a project manager. Break tasks into files, prioritize, coordinate.', order: 0 },
coder: { name: 'Koodari', avatar: '/avatars/kipina_notext.png', model: 'qwen-coder', prompt: 'You are an expert developer. Write clean, working code. Respond with code only.', order: 1 },
data: { name: 'Data', avatar: '/avatars/pesukarhu_notext.png', model: 'qwen-coder', prompt: 'You are a database expert. Design schemas, optimize queries.', order: 2 },
qa: { name: 'QA', avatar: '/avatars/susi_notext.png', model: 'qwen-coder', prompt: 'You are a QA engineer. Write tests, verify edge cases.', order: 3 },
tester: { name: 'DevOps', avatar: '/avatars/laiskiainen_notext.png', model: 'qwen-coder', prompt: 'You are a code reviewer and DevOps engineer. Find bugs, review deployments.', order: 4 },
observer:{ name: 'Tarkkailija', avatar: '/avatars/aikuinen_susi.png', model: 'qwen-coder', prompt: 'You are an independent observer. Monitor the team, flag risks.', order: 5 },
};
let agents = JSON.parse(localStorage.getItem('kpn-agents') || 'null') || JSON.parse(JSON.stringify(defaultAgents));
function saveAgents() { localStorage.setItem('kpn-agents', JSON.stringify(agents)); }
@@ -87,9 +88,9 @@ import AgentBar from "../components/AgentBar.astro";
const bar = document.getElementById('agent-bar');
const sorted = Object.entries(agents).sort((a,b) => (a[1].order||0) - (b[1].order||0));
bar.innerHTML = sorted.map(([key, a]) =>
`<div class="agent-avatar${selectedAgent===key?' active':''}" data-agent="${key}" onclick="selectAgent('${key}')" draggable="true" ondragstart="dragAgent(event,'${key}')" ondragover="event.preventDefault()" ondrop="dropAgent(event,'${key}')" title="${esc(a.name)} — ${esc(a.prompt?.substring(0,60))}...">` +
`<img src="${a.avatar}" alt="${esc(a.name)}" style="width:48px;height:48px;border-radius:50%;border:2px solid transparent">` +
`<span style="font-size:10px;color:#8b949e;text-align:center;display:block">${esc(a.name)}</span></div>`
`<div class="agent-avatar${selectedAgent===key?' active':''}" data-agent="${key}" onclick="selectAgent('${key}')" draggable="true" ondragstart="dragAgent(event,'${key}')" ondragover="event.preventDefault()" ondrop="dropAgent(event,'${key}')" title="${esc(a.name)}">` +
`<img src="${a.avatar}" alt="${esc(a.name)}">` +
`<div class="avatar-name">${esc(a.name)}</div></div>`
).join('');
}
renderAgentBar();