diff --git a/network-poc/hub/nodes.db b/network-poc/hub/nodes.db
index 08c9306..7cf2122 100644
Binary files a/network-poc/hub/nodes.db and b/network-poc/hub/nodes.db differ
diff --git a/network-poc/static/index.html b/network-poc/static/index.html
index 7cf595e..3747a83 100644
--- a/network-poc/static/index.html
+++ b/network-poc/static/index.html
@@ -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>