Versio 0.2.4

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

network-poc/Dockerfile.native-node

@@ -5,7 +5,8 @@ RUN apt-get update && apt-get install -y \
     && rm -rf /var/lib/apt/lists/*
 
 WORKDIR /app
-COPY Cargo.toml Cargo.lock ./
+COPY Cargo.toml ./
+COPY Cargo.loc[k] ./
 COPY hub/Cargo.toml hub/Cargo.toml
 COPY node/Cargo.toml node/Cargo.toml
 COPY native-node/Cargo.toml native-node/Cargo.toml

network-poc/docker-compose.client.yml

@@ -1,13 +1,12 @@
 services:
-  # NVIDIA GPU -solmu
+  # Ollama NVIDIA GPU:lla
-  native-node-nvidia:
+  ollama-nvidia:
-    build:
+    image: ollama/ollama:latest
-      context: .
+    container_name: kipina-ollama
-      dockerfile: Dockerfile.native-node
+    ports:
-    container_name: kipina-node-nvidia
+      - "11434:11434"
-    environment:
+    volumes:
-      - HUB_URL=wss://kipina.studio/ws
+      - ollama-models:/root/.ollama
-      - ALLOCATED_GB=4
     restart: unless-stopped
     deploy:
       resources:
@@ -16,6 +15,65 @@ services:
             - driver: nvidia
               count: all
               capabilities: [gpu]
+    networks:
+      default:
+        aliases:
+          - ollama
+    profiles:
+      - nvidia
+
+  # Ollama AMD ROCm GPU:lla
+  ollama-amd:
+    image: ollama/ollama:rocm
+    container_name: kipina-ollama
+    ports:
+      - "11434:11434"
+    volumes:
+      - ollama-models:/root/.ollama
+    restart: unless-stopped
+    devices:
+      - /dev/kfd:/dev/kfd
+      - /dev/dri:/dev/dri
+    group_add:
+      - video
+      - render
+    networks:
+      default:
+        aliases:
+          - ollama
+    profiles:
+      - amd
+
+  # Ollama CPU:lla
+  ollama-cpu:
+    image: ollama/ollama:latest
+    container_name: kipina-ollama
+    ports:
+      - "11434:11434"
+    volumes:
+      - ollama-models:/root/.ollama
+    restart: unless-stopped
+    networks:
+      default:
+        aliases:
+          - ollama
+    profiles:
+      - cpu
+
+  # NVIDIA GPU -solmu
+  native-node-nvidia:
+    build:
+      context: .
+      dockerfile: Dockerfile.native-node
+    container_name: kipina-node-nvidia
+    environment:
+      - HUB_URL=wss://kipina.studio/ws
+      - OLLAMA_URL=http://ollama:11434
+      - OLLAMA_MODEL=qwen2.5-coder:7b
+      - ALLOCATED_GB=4
+    restart: unless-stopped
+    depends_on:
+      - ollama-nvidia
     profiles:
       - nvidia
 
@@ -27,14 +85,12 @@ services:
     container_name: kipina-node-amd
     environment:
       - HUB_URL=wss://kipina.studio/ws
+      - OLLAMA_URL=http://ollama:11434
+      - OLLAMA_MODEL=qwen2.5-coder:7b
       - ALLOCATED_GB=4
     restart: unless-stopped
-    devices:
+    depends_on:
-      - /dev/kfd:/dev/kfd
+      - ollama-amd
-      - /dev/dri:/dev/dri
-    group_add:
-      - video
-      - render
     profiles:
       - amd
 
@@ -46,7 +102,14 @@ services:
     container_name: kipina-node-cpu
     environment:
       - HUB_URL=wss://kipina.studio/ws
+      - OLLAMA_URL=http://ollama:11434
+      - OLLAMA_MODEL=qwen2.5-coder:7b
       - ALLOCATED_GB=2
     restart: unless-stopped
+    depends_on:
+      - ollama-cpu
     profiles:
       - cpu
+
+volumes:
+  ollama-models:

network-poc/docker-compose.yml

@@ -11,21 +11,19 @@ services:
     # Käännetään aina käynnistyksen yhteydessä varmuuden vuoksi Wasm uusimmista koodeista, ja päälle pyöräytetään Hub!
     command: bash -c "cd node && wasm-pack build --release --target web --out-dir ../static/pkg && cd ../hub && cargo run"
 
-  # Ollama — LLM-inferenssi GPU:lla (NVIDIA/AMD/Apple)
+  # Ollama — LLM-inferenssi
+  # NVIDIA: vaihda image → ollama/ollama:latest ja lisää deploy.resources (ks. README)
+  # CPU: vaihda image → ollama/ollama:latest ja poista devices
   ollama:
-    image: ollama/ollama:latest
+    image: ollama/ollama:rocm
     container_name: kipina_ollama
     ports:
       - "11434:11434"
     volumes:
       - ollama-models:/root/.ollama
-    deploy:
+    devices:
-      resources:
+      - /dev/kfd
-        reservations:
+      - /dev/dri
-          devices:
-            - driver: nvidia
-              count: all
-              capabilities: [gpu]
     profiles:
       - native
 
@@ -36,12 +34,11 @@ services:
       dockerfile: Dockerfile.native-node
     container_name: kipina_native_node
     environment:
-      - HUB_URL=ws://agentic-poc:3000/ws
+      - HUB_URL=wss://kipina.studio/ws
       - OLLAMA_URL=http://ollama:11434
       - OLLAMA_MODEL=qwen2.5-coder:7b
       - ALLOCATED_GB=4
     depends_on:
-      - agentic-poc
       - ollama
     profiles:
       - native

network-poc/hub/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "hub"
-version = "0.2.2"
+version = "0.2.4"
 edition = "2024"
 
 [dependencies]

network-poc/native-node/src/inference.rs

@@ -8,17 +8,47 @@ pub struct LlmEngine {
 }
 
 impl LlmEngine {
-    pub fn load() -> Result<Self, String> {
+    pub async fn load() -> Result<Self, String> {
-        let ollama_url = std::env::var("OLLAMA_URL").unwrap_or_else(|_| "http://localhost:11434".to_string());
         let model = std::env::var("OLLAMA_MODEL").unwrap_or_else(|_| "qwen2.5-coder:7b".to_string());
 
-        tracing::info!("Ollama backend: {} | malli: {}", ollama_url, model);
-
         let client = reqwest::Client::builder()
             .timeout(std::time::Duration::from_secs(600))
+            .connect_timeout(std::time::Duration::from_secs(3))
             .build()
             .map_err(|e| format!("HTTP client: {}", e))?;
 
+        // Jos OLLAMA_URL on asetettu, käytetään sitä suoraan
+        let ollama_url = if let Ok(url) = std::env::var("OLLAMA_URL") {
+            tracing::info!("Ollama backend (env): {}", url);
+            url
+        } else {
+            // Haistellaan Ollamaa tunnetuista osoitteista
+            let candidates = [
+                "http://localhost:11434",
+                "http://127.0.0.1:11434",
+                "http://ollama:11434",
+                "http://host.docker.internal:11434",
+            ];
+            let mut found = None;
+            for url in &candidates {
+                let probe = reqwest::Client::builder()
+                    .connect_timeout(std::time::Duration::from_secs(2))
+                    .build().unwrap_or(client.clone());
+                if let Ok(resp) = probe.get(format!("{}/api/version", url)).send().await {
+                    if resp.status().is_success() {
+                        tracing::info!("Ollama löytyi osoitteesta: {}", url);
+                        found = Some(url.to_string());
+                        break;
+                    }
+                }
+            }
+            found.unwrap_or_else(|| {
+                tracing::warn!("Ollamaa ei löytynyt — käytetään oletusta http://localhost:11434");
+                "http://localhost:11434".to_string()
+            })
+        };
+
+        tracing::info!("Ollama backend: {} | malli: {}", ollama_url, model);
         Ok(LlmEngine { ollama_url, model: RefCell::new(model), client })
     }
 

network-poc/native-node/src/main.rs

@@ -287,7 +287,7 @@ async fn main() {
 
     // Ollama-backend
     tracing::info!("Alustetaan Ollama-yhteyttä...");
-    let llm = match inference::LlmEngine::load() {
+    let llm = match inference::LlmEngine::load().await {
         Ok(engine) => {
             // Varmistetaan malli (ollama pull) — odotetaan kunnes valmis
             match engine.ensure_model().await {

network-poc/node/src/lib.rs

@@ -118,6 +118,27 @@ async fn run_ai_tensor_inference(difficulty: usize) -> String {
     format!("PoC {} Matmul ({}x{}) >> {}", backend_name, active_workload_size, active_workload_size, result)
 }
 
+/// JS-exportti: tokenisoi tekstin ja palauttaa JSON-merkkijonon
+/// Tokenizer ladataan IndexedDB:stä (täytyy olla ladattu aiemmin)
+#[wasm_bindgen]
+pub async fn tokenize_js(text: String) -> Result<String, JsValue> {
+    let cached_tok = storage::load_from_idb("tokenizer.json").await.unwrap_or(None);
+    let Some(bytes) = cached_tok else {
+        // Yritetään ladata verkosta
+        let resp = reqwest::get("https://huggingface.co/Qwen/Qwen2.5-Coder-0.5B/resolve/main/tokenizer.json").await
+            .map_err(|e| JsValue::from_str(&format!("Tokenizer-lataus epäonnistui: {}", e)))?;
+        let bytes = resp.bytes().await
+            .map_err(|e| JsValue::from_str(&format!("Tokenizer-lataus epäonnistui: {}", e)))?;
+        let _ = storage::save_to_idb("tokenizer.json", &bytes).await;
+        let tokenizer = tokenizers::Tokenizer::from_bytes(&bytes)
+            .map_err(|e| JsValue::from_str(&format!("Tokenizer-parsinta: {}", e)))?;
+        return Ok(tokenize_text(&tokenizer, &text).to_string());
+    };
+    let tokenizer = tokenizers::Tokenizer::from_bytes(&bytes)
+        .map_err(|e| JsValue::from_str(&format!("Tokenizer-parsinta: {}", e)))?;
+    Ok(tokenize_text(&tokenizer, &text).to_string())
+}
+
 /// Tokenisoi yhden tekstin ja palauttaa metriikat
 fn tokenize_text(tokenizer: &tokenizers::Tokenizer, text: &str) -> serde_json::Value {
     let char_count = text.chars().count();

network-poc/static/GUIDE.md

@@ -36,29 +36,13 @@ sanan osa, kokonainen sana tai välilyönti. Tokenisaatio tehdään
 BPE-algoritmilla (Byte Pair Encoding) joka oppii yleisimmät
 merkkijonot harjoitusdatasta.
 
-### Esimerkki: koodi
-
-```
-"print('Hello')" → [print] [(' ] [Hello] [')]  = 4 tokenia
-"tulosta('Hei')" → [tul] [osta] [(' ] [He] [i] [')]  = 6 tokenia
-```
-
-Koodi tokenisoidaan tehokkaasti koska `print`, `def`, `return` yms.
-ovat kokonaisia tokeneita. Suomenkielinen `tulosta` joudutaan pilkkomaan
-osiin koska se ei esiinny harjoitusdatassa kokonaisena.
-
 ### Esimerkki: suomi vs. englanti
 
-Sama lause kahdella kielellä Qwen2.5-Coder -tokenisaattorilla:
+Alla oikea tokenisointitulos Qwen2.5-Coder-tokenisaattorilla. Jokainen
+värikoodattu lohko on yksi tokeni — huomaa miten suomi vaatii enemmän
+tokeneita saman merkityksen välittämiseen:
 
-| | Teksti | Tokenit | Määrä | Merkkejä/token |
+![Tokenisointivertailu EN/FI](/images/tokenization-example.png)
-|---|---|---|---|---|
-| EN | The cat sat on the mat | [The] [ cat] [ sat] [ on] [ the] [ mat] | **6** | 3.7 |
-| FI | Kissa istui matolla | [K] [issa] [ ist] [ui] [ mat] [olla] | **6** | 3.2 |
-| EN | Distributed computing in the browser | [Dist] [ributed] [ computing] [ in] [ the] [ browser] | **6** | 6.0 |
-| FI | Hajautettu laskenta selaimessa | [H] [aj] [au] [tettu] [ las] [kenta] [ sel] [aim] [essa] | **9** | 3.3 |
-| EN | Write a function that sorts a list | [Write] [ a] [ function] [ that] [ sorts] [ a] [ list] | **7** | 5.0 |
-| FI | Kirjoita funktio joka lajittelee listan | [K] [irj] [oita] [ funkt] [io] [ joka] [ laj] [ittel] [ee] [ listan] | **10** | 4.0 |
 
 **Huomaa miten:**
 - Englannin yleiset sanat (`the`, `in`, `a`, `function`) ovat kokonaisia tokeneita

network-poc/static/index.html

@@ -397,56 +397,58 @@
         .terminal-prompt { color: #d29922; }
         .org-chart {
             display: flex;
-            flex-direction: column;
+            flex-direction: row;
             align-items: center;
-            margin-bottom: 40px;
+            gap: 6px;
-            perspective: 1000px;
+            margin-bottom: 12px;
-            padding: 25px 50px;
+            padding: 10px 12px;
+            overflow-x: auto;
         }
         .org-level {
             display: flex;
-            justify-content: center;
+            gap: 6px;
-            gap: 40px;
             position: relative;
             z-index: 2;
+            flex-shrink: 0;
         }
         .org-connector {
-            width: 2px;
+            width: 20px;
-            height: 40px;
+            height: 2px;
-            background: linear-gradient(to bottom, rgba(88, 166, 255, 0.8), rgba(88, 166, 255, 0.2));
+            background: linear-gradient(to right, rgba(88, 166, 255, 0.8), rgba(88, 166, 255, 0.2));
-            margin: 0px auto;
+            align-self: center;
-            box-shadow: 0 0 10px rgba(88, 166, 255, 0.5);
+            flex-shrink: 0;
         }
         .org-branch {
-            width: 510px;
+            display: none;
-            height: 40px;
+        }
-            border-top: 2px solid rgba(88, 166, 255, 0.5);
+        .org-chart.vertical {
-            border-left: 2px solid rgba(88, 166, 255, 0.5);
+            flex-direction: column;
-            border-right: 2px solid rgba(88, 166, 255, 0.5);
+            align-items: center;
-            border-top-left-radius: 12px;
+            gap: 0;
-            border-top-right-radius: 12px;
+        }
-            margin-top: 0;
+        .org-chart.vertical .org-connector {
-            margin-bottom: -2px;
+            width: 2px;
-            box-shadow: inset 0 3px 6px -3px rgba(88, 166, 255, 0.4);
+            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;
+            border-radius: 12px;
-            padding: 12px 10px;
+            padding: 6px 6px 4px;
             text-align: center;
-            width: 130px;
+            width: 72px;
-            opacity: 0.5;
+            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;
+            width: 50px;
-            height: 80px;
+            height: 50px;
-            border-radius: 18px;
+            border-radius: 12px;
-            margin-bottom: 8px;
+            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-chart { padding: 6px; gap: 4px; }
-            .org-branch { display: none; }
+            .org-level { flex-wrap: wrap; gap: 4px !important; }
-            .org-connector { margin-bottom: 10px; height: 20px; }
+            .org-connector { width: 12px; }
-            .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 { width: 56px; padding: 4px 3px 2px; }
-            .avatar-card img { width: 55px; height: 55px; margin-bottom: 4px; border-radius: 12px; }
+            .avatar-card img { width: 36px; height: 36px; margin-bottom: 2px; border-radius: 8px; }
-            .avatar-name { font-size: 11px; margin-bottom: 1px; }
+            .avatar-name { font-size: 9px; margin-bottom: 0; }
-            .avatar-role { font-size: 8px; line-height: 1.1; }
 
             /* 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 { padding: 4px 4px 2px; }
-            .avatar-card img { width: 50px; height: 50px; margin-bottom: 4px; }
+            .avatar-card img { width: 40px; height: 40px; margin-bottom: 2px; }
         }
         @media (min-height: 1200px) {
             .terminal-panel { height: clamp(350px, 40vh, 600px); }
@@ -722,8 +721,8 @@
         <!-- Päävälilehdet -->
         <div class="main-tabs">
             <!-- Laskentaverkko ja Koodilaboratorio piilotettu (koodi säilytetty) -->
-            <div class="main-tab" onclick="switchMainTab('network')" data-i18n="tab_network" style="display:none">Laskentaverkko</div>
+            <div class="main-tab" onclick="switchMainTab('network')" data-i18n="tab_network">Laskentaverkko</div>
-            <div class="main-tab" onclick="switchMainTab('codelab')" data-i18n="tab_codelab" style="display:none">Koodilaboratorio</div>
+            <div class="main-tab" onclick="switchMainTab('codelab')" data-i18n="tab_codelab">Koodilaboratorio</div>
             <div class="main-tab active" onclick="switchMainTab('agents')" data-i18n="tab_agents">Kipinä Agentic Playground</div>
             <div class="main-tab" onclick="switchMainTab('guide')" data-i18n="tab_guide">Opas</div>
         </div>
@@ -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>
-                            
+                            <div class="org-level">
-                            <!-- 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="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-level">
-                            <div class="org-branch"></div>
-                            
-                            <!-- Taso 3 -->
-                            <div class="org-level" style="gap: 20px;">
                                 <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;
@@ -2848,26 +2840,62 @@ ${fixableFiles}`;
             const agentNames = { manager: 'Manageri', coder: 'Koodari', tester: 'DevOps', qa: 'QA', data: 'Data' };
             const agentColors = { manager: '#d29922', coder: '#3fb950', tester: '#58a6ff', qa: '#a371f7', data: '#d2a8ff' };
 
+            // Syntaksikorostus: kevyt regex-pohjainen highlighter
+            function highlightCode(code, filename) {
+                let h = code.replace(/&/g,'&amp;').replace(/</g,'&lt;');
+                if (filename.endsWith('.py') || filename.endsWith('.toml') || filename.endsWith('.yml') || filename.endsWith('.yaml')) {
+                    // Kommentit
+                    h = h.replace(/(#[^\n]*)/g, '<span style="color:#8b949e;font-style:italic">$1</span>');
+                    // Stringit (kolmois- ja yksittäiset)
+                    h = h.replace(/("""[\s\S]*?"""|'''[\s\S]*?''')/g, '<span style="color:#a5d6ff">$1</span>');
+                    h = h.replace(/((?<![\\])(?:"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'))/g, '<span style="color:#a5d6ff">$1</span>');
+                    // Avainsanat
+                    h = h.replace(/\b(def|class|import|from|return|if|elif|else|for|in|while|try|except|finally|with|as|raise|yield|async|await|True|False|None|not|and|or|is|lambda)\b/g, '<span style="color:#ff7b72">$1</span>');
+                    // Dekoraattorit
+                    h = h.replace(/^(\s*@\w+)/gm, '<span style="color:#d2a8ff">$1</span>');
+                    // Numerot
+                    h = h.replace(/\b(\d+\.?\d*)\b/g, '<span style="color:#79c0ff">$1</span>');
+                } else if (filename.endsWith('.html')) {
+                    h = h.replace(/(&lt;\/?[\w-]+)/g, '<span style="color:#7ee787">$1</span>');
+                    h = h.replace(/([\w-]+)=/g, '<span style="color:#79c0ff">$1</span>=');
+                    h = h.replace(/((?<!=)"[^"]*")/g, '<span style="color:#a5d6ff">$1</span>');
+                } else if (filename === 'Dockerfile') {
+                    h = h.replace(/^(FROM|RUN|COPY|WORKDIR|EXPOSE|CMD|ENV|ARG|ENTRYPOINT|ADD|VOLUME|LABEL|USER)/gm, '<span style="color:#ff7b72">$1</span>');
+                    h = h.replace(/(#[^\n]*)/g, '<span style="color:#8b949e;font-style:italic">$1</span>');
+                    h = h.replace(/((?<!=)"[^"]*")/g, '<span style="color:#a5d6ff">$1</span>');
+                }
+                return h;
+            }
+
             const stepsHtml = steps.map((s, i) => {
                 const color = agentColors[s.agent] || '#8b949e';
                 const icon = s.status === 'done' ? '✓' : '◷';
                 const outputPreview = (s.output || '').substring(0, 500);
+                const highlighted = outputPreview ? highlightCode(outputPreview, s.label) : '';
                 return `
-                    <div style="margin-bottom:16px;border:1px solid #30363d;border-radius:6px;overflow:hidden">
+                    <div style="margin-bottom:12px;border:1px solid #30363d;border-radius:8px;overflow:hidden">
-                        <div style="background:#161b22;padding:8px 12px;display:flex;justify-content:space-between;align-items:center">
+                        <div style="background:#161b22;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #21262d">
-                            <span><span style="color:${s.status === 'done' ? '#3fb950' : '#d29922'}">${icon}</span> <strong style="color:${color}">${agentNames[s.agent] || s.agent}</strong> — ${s.label}</span>
+                            <span><span style="color:${s.status === 'done' ? '#3fb950' : '#d29922'};font-size:14px">${icon}</span> <strong style="color:${color}">${agentNames[s.agent] || s.agent}</strong> <span style="color:#8b949e">—</span> ${s.label}</span>
-                            <span style="color:#8b949e;font-size:12px">Vaihe ${i + 1}</span>
+                            <span style="color:#484f58;font-size:11px;background:#0d1117;padding:2px 8px;border-radius:10px">Vaihe ${i + 1}</span>
                         </div>
-                        ${s.input ? `<details><summary style="padding:6px 12px;color:#8b949e;font-size:12px;cursor:pointer">Prompti</summary><pre style="margin:0;padding:8px 12px;background:#010409;font-size:11px;overflow-x:auto;white-space:pre-wrap;color:#8b949e">${s.input.replace(/</g,'&lt;').substring(0, 1000)}</pre></details>` : ''}
+                        ${s.input ? `<details><summary style="padding:6px 14px;color:#8b949e;font-size:12px;cursor:pointer;border-bottom:1px solid #21262d">▸ Prompti</summary><pre style="margin:0;padding:10px 14px;background:#010409;font-size:11px;overflow-x:auto;white-space:pre-wrap;color:#8b949e;line-height:1.5">${s.input.replace(/</g,'&lt;').substring(0, 1000)}</pre></details>` : ''}
-                        ${outputPreview ? `<pre style="margin:0;padding:8px 12px;background:#0d1117;font-size:12px;overflow-x:auto;white-space:pre-wrap;color:#c9d1d9">${outputPreview.replace(/</g,'&lt;')}</pre>` : ''}
+                        ${highlighted ? `<pre style="margin:0;padding:10px 14px;background:#0d1117;font-size:12px;overflow-x:auto;white-space:pre-wrap;color:#c9d1d9;line-height:1.6">${highlighted}</pre>` : ''}
                     </div>`;
             }).join('');
 
-            const filesHtml = fileEntries.map(([name, content]) => `
+            const filesHtml = fileEntries.map(([name, content]) => {
-                <div style="margin-bottom:16px;border:1px solid #30363d;border-radius:6px;overflow:hidden">
+                const ext = name.split('.').pop();
-                    <div style="background:#161b22;padding:8px 12px;font-weight:600;color:#58a6ff">${name}</div>
+                const langLabel = {py:'Python',html:'HTML',toml:'TOML',yml:'YAML',yaml:'YAML',md:'Markdown'}[ext] || ext.toUpperCase();
-                    <pre style="margin:0;padding:12px;background:#010409;font-size:12px;overflow-x:auto;white-space:pre-wrap;color:#c9d1d9">${(content || '').replace(/</g,'&lt;')}</pre>
+                const lines = (content || '').split('\\n').length;
-                </div>`).join('');
+                return `
+                <div style="margin-bottom:12px;border:1px solid #30363d;border-radius:8px;overflow:hidden">
+                    <div style="background:#161b22;padding:8px 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #21262d">
+                        <span style="font-weight:600;color:#58a6ff">${name}</span>
+                        <span style="color:#484f58;font-size:11px">${langLabel} · ${lines} riviä</span>
+                    </div>
+                    <pre style="margin:0;padding:12px 14px;background:#010409;font-size:12px;overflow-x:auto;white-space:pre-wrap;color:#c9d1d9;line-height:1.6">${highlightCode(content || '', name)}</pre>
+                </div>`;
+            }).join('');
 
             const staticHtml = (staticIssues || []).length > 0
                 ? `<div style="margin-bottom:16px;padding:12px;background:#1c1206;border:1px solid #d29922;border-radius:6px">
@@ -2884,14 +2912,18 @@ ${fixableFiles}`;
 <title>Kipinä Raportti — ${task}</title>
 <style>
   * { box-sizing: border-box; margin: 0; padding: 0; }
-  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0d1117; color: #c9d1d9; padding: 20px; max-width: 900px; margin: 0 auto; }
+  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif; background: #0d1117; color: #c9d1d9; padding: 24px; max-width: 960px; margin: 0 auto; line-height: 1.5; }
-  h1 { color: #58a6ff; margin-bottom: 4px; }
+  h1 { color: #f0f6fc; margin-bottom: 4px; font-size: 24px; }
-  h2 { color: #c9d1d9; margin: 24px 0 12px; border-bottom: 1px solid #30363d; padding-bottom: 6px; }
+  h2 { color: #c9d1d9; margin: 28px 0 14px; border-bottom: 1px solid #30363d; padding-bottom: 8px; font-size: 18px; }
   h3 { color: #8b949e; margin: 16px 0 8px; }
-  pre { font-family: 'Courier New', monospace; }
+  pre { font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace; tab-size: 4; }
   a { color: #58a6ff; }
-  details summary { list-style: none; }
+  details summary { list-style: none; cursor: pointer; }
   details summary::-webkit-details-marker { display: none; }
+  details[open] summary { color: #58a6ff; }
+  .sl-badge { display: inline-block; border: 1px solid; border-radius: 6px; padding: 3px 10px; margin: 2px; font-size: 11px; cursor: help; white-space: nowrap; position: relative; transition: transform 0.15s; }
+  .sl-badge:hover { transform: translateY(-1px); filter: brightness(1.3); }
+  .sl-badge[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1c2028; border: 1px solid #30363d; border-radius: 6px; padding: 8px 12px; font-size: 11px; color: #c9d1d9; white-space: pre-wrap; max-width: 350px; min-width: 180px; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.5); pointer-events: none; line-height: 1.5; }
 </style>
 </head>
 <body>
@@ -2911,7 +2943,7 @@ ${staticHtml}
 ${filesHtml}
 
 <hr style="border-color:#30363d;margin:24px 0">
-<p style="color:#8b949e;font-size:12px">Generoitu Kipinä Agentic Playground v0.2.2 — <a href="https://kipina.studio">kipina.studio</a></p>
+<p style="color:#8b949e;font-size:12px">Generoitu Kipinä Agentic Playground v0.2.4 — <a href="https://kipina.studio">kipina.studio</a></p>
 </body></html>`;
         }
 
@@ -2940,16 +2972,23 @@ ${filesHtml}
                 for (var bi = 0; bi < aSteps.length; bi++) {
                     var st = aSteps[bi];
                     var desc = stepDescs[st.label] || st.label;
-                    var outPrev = (st.output || '').substring(0, 100).replace(/</g, '&lt;').replace(/\n/g, ' ');
+                    var outPrev = (st.output || '').substring(0, 150).replace(/</g, '&lt;').replace(/"/g, '&quot;');
-                    var tip = desc + (outPrev ? ' — ' + outPrev : '');
+                    // Rivitys tooltipiin: jokainen rivi omalle rivilleen
+                    var tipLines = [desc];
+                    if (outPrev) {
+                        tipLines.push('');
+                        var outLines = outPrev.split(/\n/).slice(0, 6);
+                        for (var li = 0; li < outLines.length; li++) tipLines.push(outLines[li]);
+                        if ((st.output || '').split(/\n/).length > 6) tipLines.push('...');
+                    }
                     var icon = st.status === 'done' ? '✓' : '◷';
-                    if (bi > 0) badges += '<span style="color:#30363d;margin:0 1px">→</span>';
+                    if (bi > 0) badges += '<span style="color:#484f58;margin:0 2px">→</span>';
-                    badges += '<span title="' + tip.replace(/"/g, '&quot;') + '" style="display:inline-block;background:' + bg + ';border:1px solid ' + color + ';border-radius:4px;padding:3px 8px;margin:2px;font-size:11px;color:' + color + ';cursor:help;white-space:nowrap">' + icon + ' ' + st.label.replace(/</g, '&lt;') + '</span>';
+                    badges += '<span class="sl-badge" style="background:' + bg + ';border-color:' + color + ';color:' + color + '" data-tip="' + tipLines.join('&#10;') + '">' + icon + ' ' + st.label.replace(/</g, '&lt;') + '</span>';
                 }
-                rows += '<div style="display:flex;align-items:center;gap:8px;margin:4px 0"><span style="min-width:70px;font-weight:600;font-size:12px;color:' + color + '">' + label + '</span><div style="display:flex;flex-wrap:wrap;align-items:center">' + badges + '</div></div>';
+                rows += '<div style="display:flex;align-items:center;gap:10px;margin:5px 0;padding:4px 0;border-bottom:1px solid #21262d"><span style="min-width:70px;font-weight:600;font-size:12px;color:' + color + '">' + label + '</span><div style="display:flex;flex-wrap:wrap;align-items:center;gap:2px">' + badges + '</div></div>';
             }
 
-            return '<div style="background:#0d1117;border:1px solid #30363d;border-radius:6px;padding:12px">' + rows + '</div>';
+            return '<div style="background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:14px 16px">' + rows + '</div>';
         }
 
         // Yksinkertainen pipeline (vanha: manageri → koodari → testaaja)
@@ -4525,6 +4564,7 @@ ${filesHtml}
 
             function inlineFormat(text) {
                 return text
+                    .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" style="max-width:100%;border-radius:8px;border:1px solid #30363d;margin:12px 0;display:block">')
                     .replace(/`([^`]+)`/g, '<code style="background:#161b22;padding:2px 6px;border-radius:3px;font-size:13px;color:#e6edf3">$1</code>')
                     .replace(/\*\*([^*]+)\*\*/g, '<strong style="color:#e6edf3">$1</strong>')
                     .replace(/\*([^*]+)\*/g, '<em>$1</em>');