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

Avatarit vaakariviin: kompakti layout, säästää pystytilaa

Browse Source 
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>
This commit is contained in:
jaakko
2026-04-07 12:53:25 +03:00
parent a6a94f7688
commit 86191fbb6c
1 changed files with 44 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -397,56 +397,48 @@
.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;
}
.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;
width: 72px;
opacity: 0.5;
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 +453,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 +600,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 +661,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 +685,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); }
@@ -1026,58 +1015,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>