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

Layout-hiplailuja agenttinäkymään

Browse Source
This commit is contained in:
jaakko
2026-04-03 12:05:12 +03:00
parent 2d065ee0bf
commit 2ea24c6248
2 changed files with 85 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
network-poc/hub/nodes.db
View File

Binary file not shown.

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

@@ -13,6 +13,10 @@
--success-color: #3fb950;
--border-color: #30363d;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -405,7 +409,7 @@
box-shadow: 0 0 10px rgba(88, 166, 255, 0.5);
}
.org-branch {
width: 420px;
width: 510px;
height: 40px;
border-top: 2px solid rgba(88, 166, 255, 0.5);
border-left: 2px solid rgba(88, 166, 255, 0.5);
@@ -423,7 +427,7 @@
border-radius: 16px;
padding: 12px 10px;
text-align: center;
width: 120px;
width: 130px;
opacity: 0.5;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -458,8 +462,8 @@
box-shadow: 0 0 25px rgba(88, 166, 255, 0.5);
transform: scale(1.05);
}
.avatar-name { font-weight: 700; font-size: 14px; color: #f0f6fc; letter-spacing: 0.5px; margin-bottom: 2px; }
.avatar-role { font-size: 11px; color: #8b949e; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.avatar-name { font-weight: 700; font-size: 13px; color: #f0f6fc; letter-spacing: 0.5px; margin-bottom: 2px; }
.avatar-role { font-size: 10px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; line-height: 1.2; word-wrap: break-word; }
.agent-prompt-editor {
margin-top: 12px;
background: var(--panel-bg);
@@ -496,13 +500,55 @@
.lang-btn { background: transparent; border: none; color: #8b949e; font-size: 11px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: all 0.2s; }
.lang-btn:hover { color: #c9d1d9; }
.lang-btn.active { background: rgba(88, 166, 255, 0.15); color: var(--accent-color); }
@media (max-width: 768px) {
body { padding: 5px; margin: 0; }
.container { padding: 15px; border: none; border-radius: 0; border-bottom: 1px solid var(--border-color); }
.dashboard-panel { flex-direction: column; gap: 15px; padding: 10px; }
.stat-box { border-right: none !important; border-bottom: 1px solid #30363d; padding-bottom: 10px; }
.stat-box:last-child { border-bottom: none; padding-bottom: 0; }
/* Typography & Header */
h1 { font-size: 22px; }
.sub { font-size: 11px; }
.lang-selector { flex-direction: column; gap: 4px; }
[style*="justify-content: space-between; align-items: flex-start"] { align-items: center !important; }
/* Tabs */
.main-tabs { display: flex; overflow-x: auto; white-space: nowrap; padding-bottom: 5px; margin-bottom: 15px; gap: 10px; }
.main-tab { padding: 8px 10px; font-size: 13px; text-align: center; }
/* Grid optimizations */
#task-selector { grid-template-columns: 1fr !important; }
#metrics-grid { grid-template-columns: 1fr 1fr !important; }
/* Org chart mobile tweaks */
.org-chart { padding-left: 0; padding-right: 0; }
.org-branch { display: none; }
.org-connector { margin-bottom: 10px; height: 20px; }
.org-level { flex-wrap: wrap; justify-content: center; gap: 15px !important; }
#avatar-observer { display: block; position: relative !important; right: auto !important; top: auto !important; margin: 0 auto; margin-bottom: 15px; }
/* Avatar cards downscaling */
.avatar-card { width: 100px; padding: 8px 4px; }
.avatar-card img { width: 55px; height: 55px; margin-bottom: 4px; border-radius: 12px; }
.avatar-name { font-size: 11px; margin-bottom: 1px; }
.avatar-role { font-size: 8px; line-height: 1.1; }
/* User Input Area */
#user-input-box > div { flex-direction: column; }
#send-btn { width: 100%; padding: 12px; }
#code-input-container { flex-direction: column !important; }
#code-send-btn { width: 100%; margin-top: 5px; }
}
</style>
</head>
<body>
<div class="container">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;">
<div>
<h1 style="margin-bottom:0;" data-i18n="main_title">Kipinä <span>Agent Dashboard</span></h1>
<h1 style="margin-bottom:0;" data-i18n="main_title"><span style="color:#ff6b00">Kipinä</span> <span>Agent Dashboard</span></h1>
<p class="sub" style="margin-bottom:0;"><span data-i18n="main_subtitle">Hajautettu WebGPU Laskentaverkko</span> · <span id="hub-version" style="color:#58a6ff">-</span></p>
</div>
<div class="lang-selector">
@@ -516,7 +562,7 @@
<div class="main-tabs">
<div class="main-tab active" onclick="switchMainTab('network')" data-i18n="tab_network">Laskentaverkko</div>
<div class="main-tab" onclick="switchMainTab('codelab')" data-i18n="tab_codelab">Koodilaboratorio</div>
<div class="main-tab" onclick="switchMainTab('agents')" data-i18n="tab_agents">Agents & CLI</div>
<div class="main-tab" onclick="switchMainTab('agents')" data-i18n="tab_agents">Kipinä Agentic Playground</div>
</div>
<!-- PANEELI 1: Laskentaverkko -->
@@ -807,7 +853,7 @@
<div style="background:rgba(13, 17, 23, 0.7); backdrop-filter: blur(4px); border:1px solid var(--border-color); border-radius:6px; padding:16px; margin-bottom:16px; position: relative; z-index: 1;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
<div style="display:flex;align-items:center;gap:16px;">
<span style="font-weight:600;font-size:15px;color:var(--accent-color)">Kipinä Agent Workspace</span>
<span style="font-weight:600;font-size:15px;color:var(--text-color)"><span style="color:#ff6b00">Kipinä</span> Agent Workspace</span>
<button id="btn-toggle-all" onclick="toggleAllAgents()" style="background:rgba(33, 38, 45, 0.8);border:1px solid var(--border-color);color:#c9d1d9;font-size:11px;padding:4px 12px;border-radius:4px;cursor:pointer;">Valitse kaikki</button>
</div>
<span id="agent-status" style="font-size:12px;color:var(--success-color)">Monitoring Active</span>
@@ -835,12 +881,14 @@
</div>
<div class="avatar-card" id="avatar-kpn" data-agent="manager" onclick="selectAgent('manager')">
<img src="/avatars/pesukarhu_notext.png" alt="Manageri (Pesukarhu)">
<img src="/avatars/karhunpentu.png" alt="Manageri (Karhunpentu)">
<div class="avatar-name">Manageri</div>
<div class="avatar-role">KPN CLI</div>
</div>
</div>
<div class="org-connector"></div>
<div class="org-branch"></div>
<!-- Taso 3 -->
@@ -851,7 +899,7 @@
<div class="avatar-role">Ohjelmistokehitys</div>
</div>
<div class="avatar-card" id="avatar-data" data-agent="data" onclick="selectAgent('data')">
<img src="/avatars/karhunpentu.png" alt="Data-Agentti (Karhunpentu)">
<img src="/avatars/pesukarhu_notext.png" alt="Data-Agentti (Pesukarhu)">
<div class="avatar-name">Data</div>
<div class="avatar-role">Tietokannat</div>
</div>
@@ -1755,8 +1803,23 @@
}
document.querySelectorAll('.avatar-card').forEach(c => c.classList.remove('active'));
const model = data.model || '';
if (model.includes('coder') || model.includes('Coder')) document.getElementById('avatar-coder')?.classList.add('active');
else document.getElementById('avatar-tester')?.classList.add('active');
const p = data.prompt ? data.prompt.toLowerCase() : '';
if (p.includes('tiiminvetäjä') || p.includes('pilko')) {
document.getElementById('avatar-kpn')?.classList.add('active');
} else if (p.includes('arvioi seuraava koodi') || p.includes('ohjelmiston julkaisu')) {
document.getElementById('avatar-tester')?.classList.add('active');
} else if (p.includes('tervehdi')) {
document.getElementById('avatar-client')?.classList.add('active');
} else if (p.includes('test')) {
document.getElementById('avatar-qa')?.classList.add('active');
} else if (model.includes('coder') || model.includes('Coder')) {
// Koodari aktivoituu, jos kyse on suoraan koodarille osoitetusta mallitehtävästä (esim. network task)
document.getElementById('avatar-coder')?.classList.add('active');
} else if (model.includes('deepseek') || model.includes('r1')) {
document.getElementById('avatar-observer')?.classList.add('active');
}
// Emme enää aseta oletusagenttia, jottei tuntemattomissa verkkopyynnöissä mikään turhaan hypi silmille.
}
} catch(e) {}
};
@@ -2132,11 +2195,11 @@
const translations = {
fi: {
main_title: "Kipinä <span>Agent Dashboard</span>",
main_title: "<span style=\"color:#ff6b00\">Kipinä</span> <span>Agent Dashboard</span>",
main_subtitle: "Hajautettu WebGPU Laskentaverkko",
tab_network: "Laskentaverkko",
tab_codelab: "Koodilaboratorio",
tab_agents: "Agents & CLI",
tab_agents: "Kipinä Agentic Playground",
stat_nodes_lbl: "Aktiivisia Nodeja",
stat_tasks_lbl: "Verkossa Suoritettua Tehtävää (Globaali)",
stat_vram_lbl: "Verkon yhteis-VRAM",
@@ -2158,11 +2221,11 @@
metric_uptime: "Käynnissä"
},
se: {
main_title: "Kipinä <span>Agent Dashboard</span>",
main_title: "<span style=\"color:#ff6b00\">Kipinä</span> <span>Agent Dashboard</span>",
main_subtitle: "Decentraliserat WebGPU Beräkningsnätverk",
tab_network: "Kalkylnätverk",
tab_codelab: "Kodlaboratorium",
tab_agents: "Agenter & CLI",
tab_agents: "Kipinä Agentic Playground",
stat_nodes_lbl: "Aktiva Noder",
stat_tasks_lbl: "Slutförda Uppgifter (Globalt)",
stat_vram_lbl: "Nätverkets totala VRAM",
@@ -2184,11 +2247,11 @@
metric_uptime: "Drifttid"
},
en: {
main_title: "Kipinä <span>Agent Dashboard</span>",
main_title: "<span style=\"color:#ff6b00\">Kipinä</span> <span>Agent Dashboard</span>",
main_subtitle: "Decentralized WebGPU Compute Network",
tab_network: "Compute Network",
tab_codelab: "Code Laboratory",
tab_agents: "Agents & CLI",
tab_agents: "Kipinä Agentic Playground",
stat_nodes_lbl: "Active Nodes",
stat_tasks_lbl: "Tasks Completed (Global)",
stat_vram_lbl: "Total Network VRAM",
@@ -2259,6 +2322,11 @@
document.addEventListener('DOMContentLoaded', () => {
const savedLang = localStorage.getItem('kpn_lang') || 'fi';
setLanguage(savedLang);
// Valitaan Asiakas-agentti automaattisesti sivun ladattua (muttei jatkossa)
setTimeout(() => {
if (window.selectAgent) window.selectAgent('client');
}, 100);
});
</script>
</body>