From 86191fbb6c606e56acbeac2bab7969a6d414b3f7 Mon Sep 17 00:00:00 2001
From: jaakko <jaakko@kipina.tech>
Date: Tue, 7 Apr 2026 12:53:25 +0300
Subject: [PATCH] =?UTF-8?q?Avatarit=20vaakariviin:=20kompakti=20layout,=20?=
 =?UTF-8?q?s=C3=A4=C3=A4st=C3=A4=C3=A4=20pystytilaa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 network-poc/static/index.html | 117 +++++++++++++---------------------
 1 file changed, 44 insertions(+), 73 deletions(-)

diff --git a/network-poc/static/index.html b/network-poc/static/index.html
index 11035cf..507e6e1 100644
--- a/network-poc/static/index.html
+++ b/network-poc/static/index.html
@@ -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>