From 9307c755166af8a19fe076385369ce0c8132c586 Mon Sep 17 00:00:00 2001
From: jaakko <jaakko@kipina.tech>
Date: Tue, 7 Apr 2026 12:55:07 +0300
Subject: [PATCH] Pysty/vaaka-toggle avatareille
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/network-poc/static/index.html b/network-poc/static/index.html
index 507e6e1..9631f71 100644
--- a/network-poc/static/index.html
+++ b/network-poc/static/index.html
@@ -421,6 +421,16 @@
         .org-branch {
             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);
@@ -1007,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>
@@ -1303,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;