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

Avatarit vaihtuvat pystyyn pipelinen aikana, aktiivinen agentti highlightataan

Browse Source 
Pipeline käynnistyessä:
- Avataririvi vaihtuu pystyyn (column) → näkee kuka tekee mitä
- Aktiivinen agentti saa glow-highlightin (coder sininen, tester sininen)
- Korjausvaiheessa koodari highlightataan uudelleen

Pipeline valmistuttua:
- Palautetaan vaakarivi (row)
- Poistetaan highlight

Poistettu manuaalinen layout-toggle-nappi — layout on automaattinen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jaakko Vanhala
2026-04-10 07:17:30 +03:00
parent 6b0394586e
commit 6413f0238f
2 changed files with 27 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
network-poc/frontend/src/components/AgentBar.astro
View File

@@ -4,13 +4,10 @@
<div id="agent-bar" style="display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap">
<!-- Renderöidään JS:stä -->
</div>
<!-- + Lisää agentti + layout-toggle -->
<div style="display:flex;flex-direction:column;gap:4px;align-items:center">
<div id="add-agent-btn" class="agent-avatar" onclick="addCustomAgent()" title="Lisää oma agentti" style="opacity:0.4">
<div style="width:48px;height:48px;border-radius:50%;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--border)">+</div>
<span style="font-size:10px;color:#8b949e;text-align:center;display:block">Lisää</span>
</div>
<button id="layout-toggle" onclick="toggleAgentLayout()" class="btn btn-muted" style="font-size:10px;padding:2px 6px" title="Vaihda vaaka/pysty">☰</button>
<!-- + Lisää agentti -->
<div id="add-agent-btn" class="agent-avatar" onclick="addCustomAgent()" title="Lisää oma agentti" style="opacity:0.4">
<div style="width:48px;height:48px;border-radius:50%;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--border)">+</div>
<span style="font-size:10px;color:#8b949e;text-align:center;display:block">Lisää</span>
</div>
</div>

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

@@ -216,15 +216,19 @@ OUTPUT FORMAT:
// === Agent selection & config ===
let selectedAgent = null;
// Layout: vaaka/pysty toggle
let agentLayout = localStorage.getItem('kpn-agent-layout') || 'row';
window.toggleAgentLayout = function() {
agentLayout = agentLayout === 'row' ? 'column' : 'row';
localStorage.setItem('kpn-agent-layout', agentLayout);
// Layout: vaaka (oletus) → pysty kun pipeline pyörii
function setAgentLayout(layout) {
const bar = document.getElementById('agent-bar');
bar.style.flexDirection = agentLayout;
bar.style.alignItems = agentLayout === 'column' ? 'flex-start' : 'flex-end';
};
if (!bar) return;
bar.style.flexDirection = layout;
bar.style.alignItems = layout === 'column' ? 'flex-start' : 'flex-end';
}
// Highlightaa aktiivinen agentti pipeline-aikana
function highlightAgent(agentKey) {
document.querySelectorAll('.agent-avatar').forEach(el => el.classList.remove('active'));
if (agentKey) document.querySelector(`.agent-avatar[data-agent="${agentKey}"]`)?.classList.add('active');
}
function renderAgentBar() {
const bar = document.getElementById('agent-bar');
@@ -721,10 +725,14 @@ OUTPUT FORMAT:
const cdr = agents.coder || Object.values(agents)[1];
const tst = agents.tester || Object.values(agents)[2];
// Vaihdetaan pystyyn pipelinen ajaksi
setAgentLayout('column');
// Etsitään sopivin mallipohja
const template = Object.values(templates)[0]; // Toistaiseksi vain FastAPI CRUD
if (!template) {
termLog(' ✗ Mallipohjia ei ladattu', '#f85149');
setAgentLayout('row');
return;
}
@@ -740,6 +748,7 @@ OUTPUT FORMAT:
const step = i + 1;
termLog(`\n<span style="color:#3fb950;font-weight:bold">[${step}/${template.order.length}] ${esc(cdr.name)}</span> — ${esc(fileName)}`);
highlightAgent('coder');
// Opettava selitys: miksi tämä tiedosto, mitä se sisältää
explainStep(fileName, fileDef.instructions);
@@ -779,6 +788,7 @@ OUTPUT FORMAT:
// Review
const allCode = Object.entries(files).map(([n,c]) => `--- ${n} ---\n${c}`).join('\n\n');
termLog(`\n<span style="color:var(--accent);font-weight:bold">[${template.order.length + 1}] ${esc(tst.name)}</span> — review`);
highlightAgent('tester');
explainStep('Koodikatselmointi', 'Testaaja tarkistaa importit, nimeämiset, puuttuvat virheenkäsittelyt ja tiedostojen yhteensopivuuden.');
const tstPrompt = (tst.prompt ? tst.prompt+'\n\n' : '') +
@@ -787,10 +797,15 @@ OUTPUT FORMAT:
if (review && !review.toLowerCase().includes('lgtm')) {
termLog(`\n<span style="color:#d29922;font-weight:bold">[${template.order.length + 2}] ${esc(cdr.name)}</span> — korjaukset`);
highlightAgent('coder');
explainStep('Korjausluuppi', 'Testaaja löysi ongelmia. Koodari saa palautteen ja korjaa koodin.');
await kpnRun(cdr.model, `${cdr.prompt ? cdr.prompt+'\n\n' : ''}Fix these issues:\n${review}\n\nCurrent code:\n${allCode}\n\nWrite the corrected files.`);
}
// Pipeline valmis — palautetaan vaaka ja poistetaan highlight
setAgentLayout('row');
highlightAgent(null);
termLog(`\n<span style="color:var(--purple);font-weight:bold">━━━ Valmis (${Object.keys(files).length} tiedostoa) ━━━</span>`);
explainStep('Tulos', `Projekti "${task}" generoitu ${Object.keys(files).length} tiedostoon. Klikkaa "Avaa editorissa" tutkiaksesi koodia. Aja: uv run uvicorn main:app --reload`);
renderProjectCard(files, task);