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

Compare commits

base: jaakko:a6a94f76882ddc61e2c9ff3f6fc49f686be4e6d5
Branches Tags
jaakko:main jaakko:projekti1 jaakko:revolution
jaakko:v0.2.4 jaakko:pre-worker-refactor jaakko:agentic-coder-ok
...
compare: jaakko:b074e0cb498a90427621dae10bb57b26c3208639
Branches Tags
jaakko:main jaakko:projekti1 jaakko:revolution
jaakko:v0.2.4 jaakko:pre-worker-refactor jaakko:agentic-coder-ok

3 Commits
a6a94f7688 ... b074e0cb49

Author SHA1 Message Date
jaakko
b074e0cb49 Avatar-korttien opacity nostettu 0.5 → 0.8 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
 2026-04-07 12:55:46 +03:00
jaakko
9307c75516 Pysty/vaaka-toggle avatareille 
Lisätty nappi jolla org-chartin voi vaihtaa vaaka- ja pystyasennon välillä.
Vaaka on oletuksena (kompakti), pysty lisää vertical-CSS-luokan.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
 2026-04-07 12:55:07 +03:00
jaakko
86191fbb6c Avatarit vaakariviin: kompakti layout, säästää pystytilaa 
Org-chart muutettu vertikaalisesta hierarkiasta horisontaaliseksi riviksi:
Asiakas → Manageri → [Koodari, Data, QA, DevOps, Tarkkailija]
- Connector-viivat muutettu pystysuuntaisista vaakanuoliksi
- Avatar-kortit 72px leveitä (oli 130px), kuvat 48px (oli 80px)
- Roolikuvaus poistettu korteista — pelkkä nimi riittää
- Tarkkailija siirretty absolute-asemasta rivin loppuun
- Responsive-tyylit päivitetty

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
 2026-04-07 12:53:25 +03:00
1 changed files with 66 additions and 74 deletions
Expand all files Collapse all files

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

@@ -397,56 +397,58 @@
.terminal-prompt { color: #d29922; }
.org-chart {
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
margin-bottom: 40px;
perspective: 1000px;
padding: 25px 50px;
gap: 6px;
margin-bottom: 12px;
padding: 10px 12px;
overflow-x: auto;
}
.org-level {
display: flex;
justify-content: center;
gap: 40px;
gap: 6px;
position: relative;
z-index: 2;
flex-shrink: 0;
}
.org-connector {
width: 2px;
height: 40px;
background: linear-gradient(to bottom, rgba(88, 166, 255, 0.8), rgba(88, 166, 255, 0.2));
margin: 0px auto;
box-shadow: 0 0 10px rgba(88, 166, 255, 0.5);
width: 20px;
height: 2px;
background: linear-gradient(to right, rgba(88, 166, 255, 0.8), rgba(88, 166, 255, 0.2));
align-self: center;
flex-shrink: 0;
}
.org-branch {
width: 510px;
height: 40px;
border-top: 2px solid rgba(88, 166, 255, 0.5);
border-left: 2px solid rgba(88, 166, 255, 0.5);
border-right: 2px solid rgba(88, 166, 255, 0.5);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
margin-top: 0;
margin-bottom: -2px;
box-shadow: inset 0 3px 6px -3px rgba(88, 166, 255, 0.4);
display: none;
}
.org-chart.vertical {
flex-direction: column;
align-items: center;
gap: 0;
}
.org-chart.vertical .org-connector {
width: 2px;
height: 24px;
background: linear-gradient(to bottom, rgba(88, 166, 255, 0.8), rgba(88, 166, 255, 0.2));
}
.avatar-card {
background: linear-gradient(145deg, rgba(33, 38, 45, 0.4) 0%, rgba(13, 17, 23, 0.8) 100%);
backdrop-filter: blur(12px);
border: 1px solid rgba(240, 246, 252, 0.1);
border-radius: 16px;
padding: 12px 10px;
border-radius: 12px;
padding: 6px 6px 4px;
text-align: center;
width: 130px;
opacity: 0.5;
width: 72px;
opacity: 0.8;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.avatar-card:hover {
opacity: 0.85;
transform: translateY(-4px) scale(1.02);
transform: translateY(-2px) scale(1.02);
border-color: rgba(240, 246, 252, 0.3);
box-shadow: 0 12px 20px rgba(0,0,0,0.4);
box-shadow: 0 8px 14px rgba(0,0,0,0.4);
}
@keyframes idle-breathe {
0%, 100% { transform: translateY(0) scale(1); }
@@ -461,10 +463,10 @@
}
.avatar-card img {
width: 80px;
height: 80px;
border-radius: 18px;
margin-bottom: 8px;
width: 48px;
height: 48px;
border-radius: 12px;
margin-bottom: 4px;
border: 2px solid rgba(240, 246, 252, 0.1);
transition: all 0.4s ease;
object-fit: cover;
@@ -608,7 +610,7 @@
background: #0d1117;
border: 1px solid var(--accent-color);
}
.avatar-name { font-weight: 700; font-size: 13px; color: #f0f6fc; letter-spacing: 0.5px; margin-bottom: 2px; }
.avatar-name { font-weight: 700; font-size: 10px; color: #f0f6fc; letter-spacing: 0.3px; margin-bottom: 0; }
.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;
@@ -669,17 +671,14 @@
#metrics-grid { grid-template-columns: 1fr 1fr !important; }
/* Org chart mobile tweaks */
.org-chart { padding: 20px 10px; }
.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; }
.org-chart { padding: 6px; gap: 4px; }
.org-level { flex-wrap: wrap; gap: 4px !important; }
.org-connector { width: 12px; }
/* 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; }
.avatar-card { width: 56px; padding: 4px 3px 2px; }
.avatar-card img { width: 36px; height: 36px; margin-bottom: 2px; border-radius: 8px; }
.avatar-name { font-size: 9px; margin-bottom: 0; }
/* User Input Area */
#user-input-box > div { flex-direction: column; }
@@ -696,8 +695,8 @@
.container > div:first-child { margin-bottom: 6px; }
.container h1 { font-size: 22px; }
.container .sub { font-size: 12px; }
.avatar-card { padding: 6px 4px; }
.avatar-card img { width: 50px; height: 50px; margin-bottom: 4px; }
.avatar-card { padding: 4px 4px 2px; }
.avatar-card img { width: 40px; height: 40px; margin-bottom: 2px; }
}
@media (min-height: 1200px) {
.terminal-panel { height: clamp(350px, 40vh, 600px); }
@@ -1018,6 +1017,7 @@
<div style="display:flex;align-items:center;gap:16px;">
<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>
<button id="btn-toggle-layout" onclick="toggleOrgLayout()" 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;">⇅ Pysty</button>
</div>
<span id="agent-status" style="font-size:12px;color:var(--success-color)">Monitoring Active</span>
</div>
@@ -1026,58 +1026,40 @@
<!-- LEFT COLUMN: Org chart & Prompt Editor -->
<div style="flex:1; min-width:300px; overflow-x:auto;">
<div class="org-chart">
<!-- Taso 1 -->
<div class="org-level">
<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">
<div class="avatar-name">Asiakas</div>
<div class="avatar-role">Tuoteomistaja</div>
</div>
</div>
<div class="org-connector"></div>
<!-- Taso 2 -->
<div class="org-level" style="position: relative;">
<!-- 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', event)" style="position: absolute; right: calc(50% + 350px); top: 0;">
<img src="/avatars/aikuinen_susi.png" alt="Tarkkailija (Aikuinen Susi)">
<div class="avatar-name">Tarkkailija</div>
<div class="avatar-role">Laadunvalvonta</div>
</div>
<div class="org-level">
<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">
<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 -->
<div class="org-level" style="gap: 20px;">
<div class="org-level">
<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">
<div class="avatar-name">Koodari</div>
<div class="avatar-role">SOFTAKEHITYS</div>
</div>
<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">
<div class="avatar-name">Data</div>
<div class="avatar-role">Tietokannat</div>
</div>
<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">
<div class="avatar-name">QA</div>
<div class="avatar-role">Testaus</div>
</div>
<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">
<div class="avatar-name">DevOps</div>
<div class="avatar-role">Käyttöönotto</div>
</div>
<div class="avatar-card" id="avatar-observer" data-agent="observer" onclick="selectAgent('observer', event)">
<img src="/avatars/aikuinen_susi.png" alt="Tarkkailija">
<div class="avatar-name">Tarkkailija</div>
</div>
</div>
</div>
@@ -1332,6 +1314,16 @@
updatePromptEditor();
};
window.toggleOrgLayout = function() {
const chart = document.querySelector('.org-chart');
const btn = document.getElementById('btn-toggle-layout');
if (chart.classList.toggle('vertical')) {
btn.textContent = '⇄ Vaaka';
} else {
btn.textContent = '⇅ Pysty';
}
};
// Autosave prompti
document.getElementById('agent-prompt-text')?.addEventListener('input', (e) => {
if (selectedAgents.size === 0) return;