Versio 0.2.4

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Native-node: automaattinen Ollama-haistelu käynnistyksessä
2026-04-07 18:52:21 +03:00 · 2026-04-07 17:41:44 +03:00 · 2026-04-07 17:40:33 +03:00 · 2026-04-07 17:33:27 +03:00 · 2026-04-07 13:20:50 +03:00 · 2026-04-07 13:18:07 +03:00
14 changed files with 665 additions and 220 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,6 @@ Cargo.lock
 *.pdb

 # End of https://www.toptal.com/developers/gitignore/api/rust,linux
+
+# Ajonaikaiset tietokannat
+*.db
--- a/network-poc/Dockerfile.native-node
+++ b/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
--- a/network-poc/docker-compose.client.yml
+++ b/network-poc/docker-compose.client.yml
@@ -1,13 +1,12 @@
 services:
-  # NVIDIA GPU -solmu
-  native-node-nvidia:
-    build:
-      context: .
-      dockerfile: Dockerfile.native-node
-    container_name: kipina-node-nvidia
-    environment:
-      - HUB_URL=wss://kipina.studio/ws
-      - ALLOCATED_GB=4
+  # Ollama NVIDIA GPU:lla
+  ollama-nvidia:
+    image: ollama/ollama:latest
+    container_name: kipina-ollama
+    ports:
+      - "11434:11434"
+    volumes:
+      - ollama-models:/root/.ollama
    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:
-      - /dev/kfd:/dev/kfd
-      - /dev/dri:/dev/dri
-    group_add:
-      - video
-      - render
+    depends_on:
+      - ollama-amd
    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:
--- a/network-poc/docker-compose.yml
+++ b/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:
-      resources:
-        reservations:
-          devices:
-            - driver: nvidia
-              count: all
-              capabilities: [gpu]
+    devices:
+      - /dev/kfd
+      - /dev/dri
    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
--- a/network-poc/hub/Cargo.toml
+++ b/network-poc/hub/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "hub"
-version = "0.2.1"
+version = "0.2.4"
 edition = "2024"

 [dependencies]
--- a/network-poc/hub/nodes.db
+++ b/network-poc/hub/nodes.db
--- a/network-poc/hub/src/main.rs
+++ b/network-poc/hub/src/main.rs
@@ -984,17 +984,34 @@ async fn api_hardware(
        s.get("node_type").and_then(|v| v.as_str()) == Some("native")
    });

-    let (vram_mb, gpu_name, ram_mb) = if let Some(s) = native {
+    let (mut vram_mb, mut gpu_name, ram_mb) = if let Some(s) = native {
        let gpus = s.get("gpus").and_then(|v| v.as_array());
        let gpu = gpus.and_then(|g| g.first());
        let vram = gpu.and_then(|g| g.get("vram_total_mb")).and_then(|v| v.as_u64()).unwrap_or(0);
-        let name = gpu.and_then(|g| g.get("name")).and_then(|v| v.as_str()).unwrap_or("?");
+        let name = gpu.and_then(|g| g.get("name")).and_then(|v| v.as_str()).unwrap_or("").to_string();
        let ram = s.get("system").and_then(|v| v.get("ram_total_mb")).and_then(|v| v.as_u64()).unwrap_or(0);
-        (vram, name.to_string(), ram)
+        (vram, name, ram)
    } else {
-        (0, "ei natiivisolmua".to_string(), 0)
+        (0, String::new(), 0)
    };

+    // Fallback: kysytään Ollamalta onko malleja ladattu (= Ollama on käynnissä)
+    if vram_mb == 0 {
+        let ollama_url = std::env::var("OLLAMA_URL").unwrap_or_else(|_| "http://ollama:11434".to_string());
+        if let Ok(resp) = reqwest::get(format!("{}/api/tags", ollama_url)).await {
+            if let Ok(body) = resp.json::<serde_json::Value>().await {
+                let models = body["models"].as_array().map(|a| a.len()).unwrap_or(0);
+                if models > 0 {
+                    gpu_name = "Ollama (GPU/CPU)".to_string();
+                    // Natiivisolmun RAM fallbackina
+                    vram_mb = if ram_mb > 0 { ram_mb } else { 0 };
+                }
+            }
+        }
+    }
+
+    if gpu_name.is_empty() { gpu_name = "ei natiivisolmua".to_string(); }
+
    axum::Json(serde_json::json!({
        "gpu_name": gpu_name,
        "vram_mb": vram_mb,
--- a/network-poc/native-node/Cargo.toml
+++ b/network-poc/native-node/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "native-node"
-version = "0.2.1"
+version = "0.2.2"
 edition = "2024"

 [dependencies]
--- a/network-poc/native-node/src/inference.rs
+++ b/network-poc/native-node/src/inference.rs
@@ -8,17 +8,47 @@ pub struct LlmEngine {
 }

 impl LlmEngine {
-    pub fn load() -> Result<Self, String> {
-        let ollama_url = std::env::var("OLLAMA_URL").unwrap_or_else(|_| "http://localhost:11434".to_string());
+    pub async fn load() -> Result<Self, 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 })
    }

@@ -49,7 +79,7 @@ impl LlmEngine {
    }

    pub async fn generate(&self, prompt: &str, max_tokens: usize) -> Result<GenerateResult, String> {
-        let system = "You are a coding assistant. Respond with ONLY code. No explanations, no markdown, no comments unless asked.";
+        let system = "You are a coding assistant. Respond with ONLY code. Use proper newlines and indentation. No explanations, no markdown fences, no comments unless asked.";
        let model = self.model.borrow().clone();

        let start = Instant::now();
--- a/network-poc/native-node/src/main.rs
+++ b/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 {
--- a/network-poc/node/src/lib.rs
+++ b/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();
--- a/network-poc/static/GUIDE.md
+++ b/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 |
-|---|---|---|---|---|
-| 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 |
+![Tokenisointivertailu EN/FI](/images/tokenization-example.png)

 **Huomaa miten:**
 - Englannin yleiset sanat (`the`, `in`, `a`, `function`) ovat kokonaisia tokeneita
--- a/network-poc/static/images/tokenization-example.png
+++ b/network-poc/static/images/tokenization-example.png
--- a/network-poc/static/index.html
+++ b/network-poc/static/index.html
@@ -388,7 +388,7 @@
            font-family: 'Courier New', Courier, monospace;
            font-size:14px;
            color:var(--success-color);
-            height:500px;
+            height: clamp(200px, 35vh, 500px);
            overflow-y:auto;
            text-align:left;
            white-space: pre-wrap;
@@ -397,56 +397,58 @@
        .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;
+        }
+        .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);
            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;
-            opacity: 0.5;
+            width: 72px;
+            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;
-            height: 80px;
-            border-radius: 18px;
-            margin-bottom: 8px;
+            width: 50px;
+            height: 50px;
+            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 +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;
@@ -629,7 +631,7 @@
            font-family: 'Courier New', monospace;
            padding: 8px;
            resize: vertical;
-            min-height: 60px;
+            min-height: 40px;
            outline: none;
        }
        .agent-prompt-editor textarea:focus { border-color: var(--accent-color); }
@@ -669,17 +671,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; }
@@ -688,11 +687,26 @@
            #code-input-container { flex-direction: column !important; }
            #code-send-btn { width: 100%; margin-top: 5px; }
        }
+
+        /* Responsiivinen korkeus */
+        @media (max-height: 900px) {
+            .terminal-panel { height: clamp(150px, 25vh, 250px); }
+            .agent-prompt-editor textarea { min-height: 30px; }
+            .container > div:first-child { margin-bottom: 6px; }
+            .container h1 { font-size: 22px; }
+            .container .sub { font-size: 12px; }
+            .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); }
+            .agent-prompt-editor textarea { min-height: 80px; }
+        }
    </style>
 </head>
 <body>
    <div class="container">
-        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;">
+        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px;">
            <div>
                <h1 style="margin-bottom:0;" data-i18n="main_title"><span style="color:#ff6b00">Kipinä</span> <span>Agentic Playground</span></h1>
                <p class="sub" style="margin-bottom:0;"><span data-i18n="main_subtitle">AI-ohjelmistokehitystiimi</span> · <span id="hub-version" style="color:#58a6ff">-</span></p>
@@ -707,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('codelab')" data-i18n="tab_codelab" style="display:none">Koodilaboratorio</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">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>
@@ -1003,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>
@@ -1011,64 +1026,46 @@
                    <!-- 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>

                        <!-- Prompt Editor -->
-                        <div class="agent-prompt-editor" id="agent-prompt-editor" style="margin-top:20px;">
+                        <div class="agent-prompt-editor" id="agent-prompt-editor" style="margin-top:10px;">
                            <div class="agent-prompt-label">
                                <strong id="agent-prompt-name">—</strong>
                                <span id="agent-prompt-saved" style="color:var(--success-color);opacity:0;transition:opacity 0.3s">Tallennettu</span>
@@ -1116,7 +1113,7 @@
                        <button id="agent-compute-btn" style="margin-left:4px;padding:2px 10px;border-radius:4px;border:1px solid #30363d;background:#161b22;color:#58a6ff;font-size:12px;font-family:inherit;cursor:pointer" title="Käynnistä kielimalli omalla koneellasi laskentaa varten">Alusta laskentasolmu</button>
                    </span>
                </div>
-                <div id="pipeline-steps" style="display:none;background:#0d1117;border:1px solid var(--border-color);border-top:none;padding:8px 14px;font-family:'Courier New',monospace;font-size:12px;overflow-x:auto;white-space:nowrap"></div>
+                <div id="pipeline-steps" style="display:none;background:#0d1117;border:1px solid var(--border-color);border-top:none;padding:8px 14px;font-family:'Courier New',monospace;font-size:12px;line-height:1.8;flex-wrap:wrap;display:flex;gap:2px"></div>
                <div class="terminal-panel" id="agent-terminal" style="margin-top:0;border-top:none;border-radius:0">
                </div>
                <div style="position:relative;display:flex;align-items:center;background:#010409;border:1px solid var(--border-color);border-top:none;border-radius:0 0 6px 6px;padding:8px 12px;font-family:'Courier New',monospace;font-size:14px">
@@ -1317,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;
@@ -1444,12 +1451,14 @@ filename.py: one-line description
 CONSTRAINTS: the coder can only generate ~400 tokens per file
 - Max 3 files (keep it minimal)
 - Each file must be SHORT: one clear responsibility, no boilerplate
- Only .py and pyproject.toml files
+- Only .py, .html and pyproject.toml files
+- If the project has a UI, include one index.html served by FastAPI at /

 EXAMPLE: for "FastAPI todo app with SQLite"
 pyproject.toml: project metadata and dependencies
 models.py: SQLAlchemy models and database setup
-main.py: FastAPI app with CRUD endpoints
+main.py: FastAPI app with CRUD endpoints and serves index.html at /
+index.html: simple HTML UI with forms and fetch() to call the API

 Project: (käyttäjän kuvaus)` },
            coder: { label: 'Koodaus', prompt: `Project: (managerin suunnitelma)
@@ -1483,7 +1492,7 @@ IMPORTANT: Check consistency
 2. Dockerfile deps vs imports: all imports covered
 3. docker-compose ports: match EXPOSE
 4. Test imports: match actual module names
-5. pyproject.toml deps: cover all imports` },
+5. pyproject.toml deps: cover all imports (but NOT stdlib like sqlite3, os, sys, json)` },
            tester: { label: 'DevOps', prompt: `docker-compose.yml: services, volumes, port mappings

 EXAMPLE:
@@ -1499,11 +1508,11 @@ IMPORTANT: Use uv for package management (uv sync, uv run)` },
            data: { label: 'Data', prompt: `SQLAlchemy models and database setup.

 EXAMPLE:
-from sqlalchemy import create_engine, Column, Integer, String
-from sqlalchemy.orm import sessionmaker, declarative_base
+from sqlalchemy import create_engine, Column, Integer, String, Boolean, Text
+from sqlalchemy.orm import sessionmaker, DeclarativeBase

 engine = create_engine("sqlite:///app.db")
-Base = declarative_base()
+class Base(DeclarativeBase): pass

 IMPORTANT: Include get_db() dependency for FastAPI` },
        };
@@ -2130,7 +2139,7 @@ IMPORTANT: Include get_db() dependency for FastAPI` },
                pipelineSteps.push(step);
            }
            renderPipelineSteps();
-            // Päivitetään agentin avatar tooltip
+            // Päivitetään agentin avatar tooltip + vilahdus
            const avatarMap = { manager: 'avatar-kpn', coder: 'avatar-coder', tester: 'avatar-tester', qa: 'avatar-qa', data: 'avatar-data' };
            const avatarId = avatarMap[agent];
            if (avatarId) {
@@ -2138,6 +2147,19 @@ IMPORTANT: Include get_db() dependency for FastAPI` },
                if (el) {
                    const truncOut = (output || '').substring(0, 200).replace(/\n/g, ' ');
                    el.title = `${label}\n${status === 'active' ? '⏳ Käsittelee...' : '✓ Valmis'}\n\nInput: ${(input || '').substring(0, 100)}...\nOutput: ${truncOut}...`;
+
+                    // Avatar-aktivointi: syttyy vuoron alussa, sammuu lopussa
+                    if (status === 'active') {
+                        document.querySelectorAll('.avatar-card').forEach(c => c.classList.remove('active'));
+                        el.classList.add('active');
+                        document.querySelectorAll('.gallery-head-wrap').forEach(w => w.classList.remove('active'));
+                        const gw = document.getElementById('wrap-' + agent);
+                        if (gw) gw.classList.add('active');
+                    } else if (status === 'done') {
+                        el.classList.remove('active');
+                        const gw = document.getElementById('wrap-' + agent);
+                        if (gw) gw.classList.remove('active');
+                    }
                }
            }
        }
@@ -2146,15 +2168,16 @@ IMPORTANT: Include get_db() dependency for FastAPI` },
            const container = document.getElementById('pipeline-steps');
            if (!container) return;
            if (pipelineSteps.length === 0) { container.style.display = 'none'; return; }
-            container.style.display = 'block';
+            container.style.display = 'flex';
            container.innerHTML = pipelineSteps.map((s, i) => {
                const colors = { manager: '#d29922', coder: '#3fb950', tester: '#58a6ff', qa: '#a371f7', data: '#d2a8ff' };
                const color = colors[s.agent] || '#8b949e';
                const icon = s.status === 'done' ? '✓' : s.status === 'active' ? '◷' : '◯';
                const iconColor = s.status === 'done' ? '#3fb950' : s.status === 'active' ? '#d29922' : '#8b949e';
                const arrow = i < pipelineSteps.length - 1 ? ' <span style="color:#30363d">→</span> ' : '';
-                // Tooltip: input/output esikatselu
-                return `<span onclick="openPipelineStepModal(${i})" style="cursor:pointer;padding:2px 4px;border-radius:3px;transition:background 0.2s" onmouseenter="this.style.background='#21262d'" onmouseleave="this.style.background='transparent'"><span style="color:${iconColor}">${icon}</span> <span style="color:${color}">${esc(s.label)}</span></span>${arrow}`;
+                const stepDescs = { 'Suunnittelu': 'Pilkkoo tiedostoiksi', 'Review': 'Arvioi koodin laadun', 'Testit': 'Kirjoittaa testit', 'Dockerfile': 'Docker-image', 'Compose': 'Palvelumääritys', 'README': 'Dokumentaatio', 'Validointi': 'Tarkistaa yhteensopivuuden', 'Korjaukset': 'Korjaa löydetyt bugit' };
+                const desc = stepDescs[s.label] || s.label;
+                return `<span onclick="openPipelineStepModal(${i})" title="${desc}" style="cursor:pointer;padding:2px 4px;border-radius:3px;transition:background 0.2s" onmouseenter="this.style.background='#21262d'" onmouseleave="this.style.background='transparent'"><span style="color:${iconColor}">${icon}</span> <span style="color:${color}">${esc(s.label)}</span></span>${arrow}`;
            }).join('');
        }

@@ -2176,7 +2199,7 @@ IMPORTANT: Include get_db() dependency for FastAPI` },
        // Globaali storage projektikorttien tiedostoille (välttää JSON data-attribuuttien ongelmat)
        const projectFiles = {};

-        function renderProjectCard(files, projectName) {
+        function renderProjectCard(files, projectName, reportUrl) {
            const fileEntries = Object.entries(files);
            if (fileEntries.length === 0) return;

@@ -2204,6 +2227,7 @@ IMPORTANT: Include get_db() dependency for FastAPI` },
                        <span style="display:flex;gap:6px">
                            <button onclick="copyAllFiles('${cardId}')" style="background:none;border:1px solid #30363d;color:#8b949e;font-size:11px;padding:2px 8px;border-radius:3px;cursor:pointer" title="Kopioi kaikki tiedostot leikepöydälle">Kopioi kaikki</button>
                            <button onclick="downloadZip('${cardId}')" style="background:none;border:1px solid #30363d;color:#58a6ff;font-size:11px;padding:2px 8px;border-radius:3px;cursor:pointer" title="Lataa projekti ZIP-tiedostona">Lataa ZIP</button>
+                            ${reportUrl ? `<a href="${reportUrl}" target="_blank" style="background:none;border:1px solid #a371f7;color:#a371f7;font-size:11px;padding:2px 8px;border-radius:3px;cursor:pointer;text-decoration:none">📄 Raportti</a>` : ''}
                        </span>
                    </div>
                    <div style="display:flex;gap:2px;padding:6px 8px 0;background:#0d1117">${tabsHtml}</div>
@@ -2256,6 +2280,10 @@ IMPORTANT: Include get_db() dependency for FastAPI` },
            const card = document.getElementById(cardId);
            if (!card) return;
            const files = projectFiles[cardId];
+            if (!files || Object.keys(files).length === 0) {
+                alert('Tiedostot eivät ole enää muistissa — aja pipeline uudelleen.');
+                return;
+            }

            // CRC-32 laskenta ZIP-tiedostoille
            function crc32(bytes) {
@@ -2276,7 +2304,7 @@ IMPORTANT: Include get_db() dependency for FastAPI` },

            for (const [name, content] of entries) {
                const nameBytes = new TextEncoder().encode(name);
-                const contentBytes = new TextEncoder().encode(content);
+                const contentBytes = new TextEncoder().encode(content || '');
                const crc = crc32(contentBytes);

                // Local file header
@@ -2344,14 +2372,16 @@ filename.py: one-line description
 CONSTRAINTS — the coder can only generate ~400 tokens per file:
 - Max 3 files (keep it minimal)
 - Each file must be SHORT: one clear responsibility, no boilerplate
- Only .py and pyproject.toml files
+- Only .py, .html and pyproject.toml files
+- If the project has a UI, include one index.html served by FastAPI at /
 - No directories, no paths, just filenames
 - List dependencies first, then main app

 EXAMPLE for "FastAPI todo app with SQLite":
 pyproject.toml: project metadata and dependencies
 models.py: SQLAlchemy models and database setup
-main.py: FastAPI app with CRUD endpoints
+main.py: FastAPI app with CRUD endpoints and serves index.html at /
+index.html: simple HTML UI with forms and fetch() to call the API

 Project: ${task}`;
            termLog(`\n<span style="color:#d29922;font-weight:bold">[1] Manageri</span> — projektin suunnittelu`);
@@ -2414,40 +2444,92 @@ Project: ${task}`;
 name = "projectname"
 version = "0.1.0"
 requires-python = ">=3.11"
-dependencies = ["fastapi", "uvicorn"]
+dependencies = ["fastapi", "uvicorn", "sqlalchemy", "httpx", "pytest"]

 [project.scripts]
-start = "uvicorn main:app --reload"`;
+start = "uvicorn main:app --reload"
+
+IMPORTANT: Only list pip-installable packages. NEVER include Python stdlib modules like sqlite3, os, sys, json, typing, collections, etc.`;
                } else if (file.name === 'requirements.txt') {
                    extraInstructions = '\nList one dependency per line. No version pins unless necessary.';
                }

                const coderExample = file.name.includes('main') || file.name.includes('app')
-                    ? `\nEXAMPLE output for a main.py:
-from fastapi import FastAPI, Depends
+                    ? `\nEXAMPLE output for a main.py (CRUD + HTML UI):
+from fastapi import FastAPI, Depends, HTTPException
+from fastapi.responses import FileResponse
 from sqlalchemy.orm import Session
-from models import get_db, User
+from models import get_db, Base, engine, User

+Base.metadata.create_all(engine)
 app = FastAPI()

-@app.get("/users")
+@app.get("/")
+def index():
+    return FileResponse("index.html")
+
+@app.get("/api/users")
 def list_users(db: Session = Depends(get_db)):
    return db.query(User).all()

-@app.post("/users")
+@app.post("/api/users")
 def create_user(name: str, db: Session = Depends(get_db)):
    user = User(name=name)
    db.add(user)
    db.commit()
-    return {"id": user.id, "name": user.name}`
+    return {"id": user.id, "name": user.name}
+
+@app.put("/api/users/{user_id}")
+def update_user(user_id: int, name: str, db: Session = Depends(get_db)):
+    user = db.query(User).get(user_id)
+    if not user: raise HTTPException(404)
+    user.name = name
+    db.commit()
+    return {"id": user.id, "name": user.name}
+
+@app.delete("/api/users/{user_id}")
+def delete_user(user_id: int, db: Session = Depends(get_db)):
+    user = db.query(User).get(user_id)
+    if not user: raise HTTPException(404)
+    db.delete(user)
+    db.commit()
+    return {"ok": True}`
+                    : file.name.includes('index.html')
+                    ? `\nEXAMPLE output for index.html (simple CRUD UI):
+<!DOCTYPE html>
+<html><head><title>App</title></head>
+<body>
+<h1>Users</h1>
+<input id="name" placeholder="Name"><button onclick="add()">Add</button>
+<ul id="list"></ul>
+<script>
+async function load() {
+  const r = await fetch('/api/users');
+  const users = await r.json();
+  document.getElementById('list').innerHTML = users.map(u =>
+    '<li>' + u.name + ' <button onclick="del('+u.id+')">x</button></li>'
+  ).join('');
+}
+async function add() {
+  const name = document.getElementById('name').value;
+  await fetch('/api/users?name='+name, {method:'POST'});
+  document.getElementById('name').value = '';
+  load();
+}
+async function del(id) {
+  await fetch('/api/users/'+id, {method:'DELETE'});
+  load();
+}
+load();
+<` + `/script></body></html>`
                    : file.name.includes('model')
                    ? `\nEXAMPLE output for a models.py:
-from sqlalchemy import create_engine, Column, Integer, String
-from sqlalchemy.orm import sessionmaker, declarative_base
+from sqlalchemy import create_engine, Column, Integer, String, Boolean, Text
+from sqlalchemy.orm import sessionmaker, DeclarativeBase

 engine = create_engine("sqlite:///app.db")
 SessionLocal = sessionmaker(bind=engine)
-Base = declarative_base()
+class Base(DeclarativeBase): pass

 class User(Base):
    __tablename__ = "users"
@@ -2463,7 +2545,7 @@ def get_db():
                    : '';
                const coderPrompt = `${context}Project: ${task}
 Write ONLY the file "${file.name}"${file.desc ? ': ' + file.desc : ''}.${extraInstructions}${coderExample}
-IMPORTANT: Keep the code SHORT. Max ~50 lines. No comments, no docstrings. Write minimal, working code. Output ONLY code.`;
+IMPORTANT: Keep the code SHORT. Max ~60 lines. No comments, no docstrings. Write minimal, working code. Output ONLY code. Serve index.html at / using FileResponse. Use /api/ prefix for JSON endpoints.`;
                const code = await kpnRun(agentPrompts.coder.model, coderPrompt);
                if (!code) {
                    termLog(`  ✗ Pipeline keskeytyi (${file.name})`, '#f85149');
@@ -2478,17 +2560,103 @@ IMPORTANT: Keep the code SHORT. Max ~50 lines. No comments, no docstrings. Write
                .map(([name, code]) => `--- ${name} ---\n${code}`)
                .join('\n\n');

-            termLog(`\n<span style="color:#58a6ff;font-weight:bold">[${fileList.length + 2}] Testaaja</span> — arviointi`);
+            // Staattinen analyysi ennen LLM-arviointia
+            termLog(`\n<span style="color:#58a6ff;font-weight:bold">[${fileList.length + 2}] Testaaja</span> — staattinen analyysi + arviointi`);
            pipelineStep('tester', 'Review', 'active', `${Object.keys(generatedFiles).length} tiedostoa`);
-            const reviewPrompt = `Review this project. List bugs or issues. Be brief.
-If the code is correct, say "LGTM".
+
+            // Yksinkertainen staattinen tarkistus selaimessa
+            const staticIssues = [];
+            for (const [name, code] of Object.entries(generatedFiles)) {
+                if (!name.endsWith('.py')) continue;
+                const lines = (code || '').split('\n');
+                // Tarkista importit
+                const imports = lines.filter(l => l.match(/^(from|import)\s/));
+                const usedNames = code.replace(/^(from|import)\s.*/gm, '');
+                for (const imp of imports) {
+                    const match = imp.match(/import\s+(\w+)|from\s+\S+\s+import\s+(.+)/);
+                    if (match) {
+                        const names = (match[1] || match[2]).split(',').map(n => n.trim().split(' as ').pop().trim());
+                        for (const n of names) {
+                            if (n && !usedNames.includes(n) && n !== '*') {
+                                staticIssues.push(`${name}: käyttämätön import '${n}'`);
+                            }
+                        }
+                    }
+                }
+                // Tarkista puuttuvat importit
+                const importText = imports.join(' ');
+                const needsImport = [
+                    ['FastAPI', 'FastAPI'], ['Session', 'Session'], ['Depends', 'Depends'],
+                    ['HTTPException', 'HTTPException'], ['TestClient', 'TestClient'],
+                    ['Boolean', 'Boolean'], ['Text', 'Text'], ['Float', 'Float'], ['DateTime', 'DateTime'],
+                    ['Column', 'Column'], ['create_engine', 'create_engine'],
+                    ['DeclarativeBase', 'DeclarativeBase'], ['sessionmaker', 'sessionmaker'],
+                ];
+                for (const [symbol, name_] of needsImport) {
+                    // Tarkista käytetäänkö symbolia koodissa (ei import-riveillä)
+                    const codeWithoutImports = lines.filter(l => !l.match(/^(from|import)\s/)).join('\n');
+                    if (codeWithoutImports.includes(symbol) && !importText.includes(symbol)) {
+                        staticIssues.push(`${name}: käyttää '${symbol}' mutta ei importtaa sitä`);
+                    }
+                }
+                // Tarkista tyhjät funktiot
+                const emptyFuncs = code.match(/def \w+\([^)]*\):\s*\n\s*(pass|\.\.\.)/g);
+                if (emptyFuncs) staticIssues.push(`${name}: ${emptyFuncs.length} tyhjää funktiota`);
+                // Tarkista one-liner koodi (kaikki yhdellä rivillä)
+                if (lines.length <= 2 && code.length > 200) {
+                    staticIssues.push(`${name}: koodi on yhdellä rivillä (${code.length} merkkiä) — generoi uudelleen`);
+                }
+
+                // Tarkista tiedostojen väliset importit (from db import get_db → onko get_db db.py:ssä?)
+                for (const imp of imports) {
+                    const crossMatch = imp.match(/from\s+(\w+)\s+import\s+(.+)/);
+                    if (crossMatch) {
+                        const modName = crossMatch[1];
+                        const importedNames = crossMatch[2].split(',').map(n => n.trim().split(' as ')[0].trim());
+                        const targetFile = modName + '.py';
+                        const targetCode = generatedFiles[targetFile];
+                        if (targetCode) {
+                            for (const sym of importedNames) {
+                                // Tarkista onko symboli määritelty kohdetiedostossa (def, class, muuttuja)
+                                const defined = targetCode.includes(`def ${sym}`) || targetCode.includes(`class ${sym}`) || targetCode.match(new RegExp(`^${sym}\\s*=`, 'm'));
+                                if (!defined) {
+                                    staticIssues.push(`${name}: importtaa '${sym}' tiedostosta ${targetFile}, mutta sitä ei ole määritelty siellä`);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            if (staticIssues.length > 0) {
+                termLog(`  <span style="color:#d29922">Staattinen analyysi (${staticIssues.length} huomautusta):</span>`);
+                for (const issue of staticIssues) {
+                    termLog(`    <span style="color:#d29922">⚠</span> ${esc(issue)}`);
+                }
+            } else {
+                termLog('  <span style="color:#3fb950">Staattinen analyysi: ei huomautuksia</span>');
+            }
+            const reviewPrompt = `Review this project code. Check EVERY item and report result:
+
+1. Imports: ✓/✗ — are all imports valid and available?
+2. Database: ✓/✗ — is the DB setup correct (engine, session, models)?
+3. Endpoints: ✓/✗ — do all routes have correct parameters and return types?
+4. Error handling: ✓/✗ — are edge cases handled (404, validation)?
+5. Security: ✓/✗ — any SQL injection, missing auth, or data exposure?
+
+EXAMPLE output:
+1. Imports: ✓ — all imports are valid
+2. Database: ✗ — missing Base.metadata.create_all(engine) call
+3. Endpoints: ✓ — GET/POST/DELETE routes are correct
+4. Error handling: ✗ — no 404 when todo not found
+5. Security: ✓ — using ORM, no raw SQL

 ${allCode}`;
-            const review = await kpnRun(agentPrompts.tester.model, reviewPrompt, false, 200);
+            const review = await kpnRun(agentPrompts.tester.model, reviewPrompt, false, 300);
            pipelineStep('tester', 'Review', 'done', `${Object.keys(generatedFiles).length} tiedostoa`, review);

            // Vaihe 4: Korjausluuppi — jos testaaja löysi ongelmia
-            if (review && !review.toLowerCase().includes('lgtm') && !review.toLowerCase().includes('looks good')) {
+            const hasIssues = review && (review.includes('✗') || staticIssues.length > 0);
+            if (hasIssues) {
                termLog(`\n<span style="color:#d29922;font-weight:bold">[${fileList.length + 3}] Koodari</span> — korjaukset`);
                pipelineStep('coder', 'Korjaukset', 'active', review);
                const fixPrompt = `Fix the issues found in the review.
@@ -2542,7 +2710,7 @@ ${Object.entries(generatedFiles).map(([n, c]) => `--- ${n} ---\n${c}`).join('\n\
            const mainFile = Object.keys(generatedFiles).find(f => f.includes('main') || f.includes('app')) || Object.keys(generatedFiles)[0];
            const hasPyproject = 'pyproject.toml' in generatedFiles;
            const hasRequirements = 'requirements.txt' in generatedFiles;
-            const pyFiles = Object.keys(generatedFiles).filter(f => f.endsWith('.py'));
+            const codeFiles = Object.keys(generatedFiles).filter(f => f.endsWith('.py') || f.endsWith('.html'));
            // Dockerfile-templatti: ei anneta mallin keksiä omaa
            let depLines;
            if (hasPyproject) {
@@ -2556,7 +2724,7 @@ ${Object.entries(generatedFiles).map(([n, c]) => `--- ${n} ---\n${c}`).join('\n\
 COPY --from=ghcr.io/astral-sh/uv:latest /uv /usr/local/bin/uv
 WORKDIR /app
 ${depLines}
-COPY ${pyFiles.join(' ')} ./
+COPY ${codeFiles.join(' ')} ./
 EXPOSE 8000
 CMD ["uv", "run", "uvicorn", "${mainFile.replace('.py','')}:app", "--host", "0.0.0.0", "--port", "8000"]`;
            // Generoidaan Dockerfile suoraan templatesta, ei mallilla
@@ -2568,16 +2736,21 @@ CMD ["uv", "run", "uvicorn", "${mainFile.replace('.py','')}:app", "--host", "0.0
            const step7 = step6 + 1;
            termLog(`\n<span style="color:#d29922;font-weight:bold">[${step7}] DevOps</span> — docker-compose.yml`);
            pipelineStep('tester', 'Compose', 'active', 'docker-compose.yml');
-            const composePrompt = `Write a docker-compose.yml for this project. Include:
- app service (build from Dockerfile, port mapping, restart: unless-stopped)
- db service if SQLite/PostgreSQL is used (volume for data persistence)
- Named volumes for persistent data
-Only output the YAML content, nothing else.
+            // docker-compose.yml templatesta (ei LLM:llä — vältetään version/postgres ongelmat)
+            const composeContent = `services:
+  app:
+    build: .
+    ports:
+      - "8000:8000"
+    volumes:
+      - app-data:/app/data
+    restart: unless-stopped

-Files: ${Object.keys(generatedFiles).join(', ')}`;
-            const compose = await kpnRun(agentPrompts.tester.model, composePrompt, false, 256);
-            if (compose) generatedFiles['docker-compose.yml'] = compose;
-            pipelineStep('tester', 'Compose', 'done', 'docker-compose.yml', compose);
+volumes:
+  app-data:`;
+            generatedFiles['docker-compose.yml'] = composeContent;
+            termLog(`  <span style="color:#3fb950">✓</span> docker-compose.yml generoitu (template)`);
+            pipelineStep('tester', 'Compose', 'done', composeContent, composeContent);

            // Vaihe 8: DevOps — README
            const step8 = step7 + 1;
@@ -2585,8 +2758,8 @@ Files: ${Object.keys(generatedFiles).join(', ')}`;
            pipelineStep('tester', 'README', 'active', 'README.md');
            const readmePrompt = `Write a minimal README.md. Include ONLY:
 1. One-line description
-2. Quick start: docker compose up
-3. Development: uv sync && uv run uvicorn main:app --reload
+2. Quick start: docker compose up → open http://localhost:8000
+3. Development: uv sync && uv run uvicorn main:app --reload → http://localhost:8000
 4. API endpoints (if applicable)
 5. Testing: uv run pytest
 Max 20 lines.
@@ -2608,7 +2781,7 @@ Files: ${Object.keys(generatedFiles).join(', ')}`;
 3. docker-compose ports: ✓ OK / ✗ problem description
 4. README commands: ✓ OK / ✗ problem description
 5. Test imports: ✓ OK / ✗ problem description
-6. pyproject.toml deps: ✓ OK / ✗ problem description
+6. pyproject.toml deps: ✓ OK / ✗ problem (NEVER list stdlib: sqlite3, os, sys, json, typing)

 EXAMPLE output:
 1. Dockerfile COPY: ✓ OK — copies main.py and models.py which both exist
@@ -2630,20 +2803,192 @@ ${allFiles}`;
                termLog(`\n<span style="color:#d29922;font-weight:bold">[${stepFix}] DevOps</span> — korjaukset`);
                pipelineStep('tester', 'Korjaukset', 'active', validation);
                // Korjataan vain Dockerfile ja docker-compose
-                const fixPrompt = `Fix ONLY the Dockerfile based on this feedback. Output the corrected Dockerfile, nothing else.
+                // Korjataan koodatiedostot (ei Dockerfilea — se on template)
+                const fixableFiles = Object.entries(generatedFiles)
+                    .filter(([n]) => n.endsWith('.py') || n === 'pyproject.toml')
+                    .map(([n, c]) => `--- ${n} ---\n${c}`).join('\n\n');
+                const fixPrompt = `Fix the code files based on this feedback. Output corrected code only.
+Do NOT output Dockerfile or docker-compose.yml — those are auto-generated.

 Feedback: ${validation}

-Current files: ${Object.keys(generatedFiles).join(', ')}
-Current Dockerfile:
-${generatedFiles['Dockerfile'] || '(puuttuu)'}`;
-                const fixedDockerfile = await kpnRun(agentPrompts.tester.model, fixPrompt, false, 256);
-                if (fixedDockerfile) generatedFiles['Dockerfile'] = fixedDockerfile;
-                pipelineStep('tester', 'Korjaukset', 'done', 'Dockerfile korjattu', fixedDockerfile);
+${fixableFiles}`;
+                const fixedCode = await kpnRun(agentPrompts.coder.model, fixPrompt, false, 512);
+                // Ei ylikirjoiteta Dockerfilea — generoidaan template uudelleen
+                if (fixedCode) {
+                    termLog(`  <span style="color:#8b949e">Korjaukset generoitu</span>`);
+                }
+                pipelineStep('coder', 'Korjaukset', 'done', 'Korjaukset generoitu', fixedCode);
            }

+            // Generoidaan projektin dokumentaatio HTML-raporttina
+            const reportHtml = generateProjectReport(task, generatedFiles, pipelineSteps, staticIssues);
+            const reportBlob = new Blob([reportHtml], { type: 'text/html' });
+            const reportUrl = URL.createObjectURL(reportBlob);
+
+            // Pipeline valmis — sammutetaan kaikki avataret
+            document.querySelectorAll('.avatar-card').forEach(c => c.classList.remove('active'));
+            document.querySelectorAll('.gallery-head-wrap').forEach(w => w.classList.remove('active'));
+
            termLog(`\n<span style="color:#a371f7;font-weight:bold">━━━ Pipeline valmis (${Object.keys(generatedFiles).length} tiedostoa) ━━━</span>`);
-            renderProjectCard(generatedFiles, task);
+            termLog(`  <a href="${reportUrl}" target="_blank" style="color:#58a6ff;text-decoration:underline;cursor:pointer">📄 Avaa projektiraportti</a>`);
+            renderProjectCard(generatedFiles, task, reportUrl);
+        }
+
+        function generateProjectReport(task, files, steps, staticIssues) {
+            const fileEntries = Object.entries(files);
+            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:12px;border:1px solid #30363d;border-radius:8px;overflow:hidden">
+                        <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'};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:#484f58;font-size:11px;background:#0d1117;padding:2px 8px;border-radius:10px">Vaihe ${i + 1}</span>
+                        </div>
+                        ${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>` : ''}
+                        ${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 ext = name.split('.').pop();
+                const langLabel = {py:'Python',html:'HTML',toml:'TOML',yml:'YAML',yaml:'YAML',md:'Markdown'}[ext] || ext.toUpperCase();
+                const lines = (content || '').split('\\n').length;
+                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">
+                    <strong style="color:#d29922">Staattinen analyysi (${staticIssues.length} huomautusta)</strong>
+                    <ul style="margin:8px 0 0;padding-left:20px;color:#d29922">${staticIssues.map(i => `<li>${i}</li>`).join('')}</ul>
+                   </div>`
+                : '<p style="color:#3fb950">✓ Staattinen analyysi: ei huomautuksia</p>';
+
+            return `<!DOCTYPE html>
+<html lang="fi">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Kipinä Raportti — ${task}</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  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: #f0f6fc; margin-bottom: 4px; font-size: 24px; }
+  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: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace; tab-size: 4; }
+  a { color: #58a6ff; }
+  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>
+<h1>🔥 Kipinä Projektiraportti</h1>
+<p style="color:#8b949e;margin-bottom:20px">${task} — ${new Date().toLocaleString('fi-FI')} — ${fileEntries.length} tiedostoa, ${steps.length} vaihetta</p>
+
+<h2>🔄 Agenttien workflow</h2>
+${generateWorkflowSwimlane(steps)}
+
+<h2>📋 Pipeline-vaiheet</h2>
+${stepsHtml}
+
+<h2>🔍 Staattinen analyysi</h2>
+${staticHtml}
+
+<h2>📁 Tiedostot</h2>
+${filesHtml}
+
+<hr style="border-color:#30363d;margin:24px 0">
+<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>`;
+        }
+
+        function generateWorkflowSwimlane(steps) {
+            const agentLabels = { manager: 'Manageri', coder: 'Koodari', tester: 'DevOps', qa: 'QA', data: 'Data' };
+            const agentColors = { manager: '#d29922', coder: '#3fb950', tester: '#58a6ff', qa: '#a371f7', data: '#d2a8ff' };
+            const agentBgs = { manager: '#1c1206', coder: '#0d1a0d', tester: '#0d1520', qa: '#170d22', data: '#1a0d22' };
+            const stepDescs = { 'Suunnittelu': 'Jakaa projektin tiedostoiksi', 'Review': 'Tarkistaa koodin laadun', 'Testit': 'Kirjoittaa pytest-testit', 'Dockerfile': 'Generoi Docker-imagen', 'Compose': 'Palvelumääritys', 'README': 'Käyttöohjeet', 'Validointi': 'Tarkistaa yhteensopivuuden', 'Korjaukset': 'Korjaa löydetyt ongelmat' };
+
+            var agents = [];
+            var agentMap = {};
+            for (var si = 0; si < steps.length; si++) {
+                var s = steps[si];
+                if (!agentMap[s.agent]) { agentMap[s.agent] = []; agents.push(s.agent); }
+                agentMap[s.agent].push(s);
+            }
+
+            var rows = '';
+            for (var ai = 0; ai < agents.length; ai++) {
+                var agent = agents[ai];
+                var color = agentColors[agent] || '#8b949e';
+                var bg = agentBgs[agent] || '#161b22';
+                var label = agentLabels[agent] || agent;
+                var badges = '';
+                var aSteps = agentMap[agent];
+                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, 150).replace(/</g, '&lt;').replace(/"/g, '&quot;');
+                    // 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:#484f58;margin:0 2px">→</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: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:8px;padding:14px 16px">' + rows + '</div>';
        }

        // Yksinkertainen pipeline (vanha: manageri → koodari → testaaja)
@@ -2838,7 +3183,8 @@ ${generatedFiles['Dockerfile'] || '(puuttuu)'}`;
                    clearInterval(spinTimer);
                    pullLine.remove();
                    if (hubData.status === 'ok') {
-                        termLog(`  <span style="color:#3fb950">✓</span> ${selected.name} ladattu ja aktiivinen`, '#3fb950');
+                        termLog(`  <span style="color:#3fb950">✓</span> ${selected.name} valittu — natiivisolmu lataa mallin`, '#3fb950');
+                        termLog(`  <span style="color:#8b949e">Ensimmäinen pyyntö voi kestää pidempään jos mallia ei ole ladattu</span>`);
                        ollamaModels.forEach(m => m.default = false);
                        selected.default = true;
                    } else {
@@ -2876,11 +3222,16 @@ ${generatedFiles['Dockerfile'] || '(puuttuu)'}`;
                    const btn = document.getElementById('agent-compute-btn');
                    const wasmLoaded = btn?.dataset.state === 'ready';
                    if (hw.gpu_name && hw.gpu_name !== 'ei natiivisolmua') {
-                        termLog(`  <span style="color:#8b949e">GPU: ${hw.gpu_name} | VRAM: ${Math.round((hw.vram_mb||0)/1024)} GB</span>`);
+                        const vram = hw.vram_mb ? ` | VRAM: ${Math.round(hw.vram_mb/1024)} GB` : '';
+                        termLog(`  <span style="color:#8b949e">${hw.gpu_name}${vram}</span>`);
+                    }
+                    if (loadedNames.length > 0) {
+                        termLog(`  <span style="color:#3fb950">Ollama: ${loadedNames.length} mallia ladattu</span>`);
                    }
                    termLog('  Mallit <span style="color:#8b949e">(kpn load &lt;numero&gt;)</span>:', '#c9d1d9');
                    for (const m of allModels) {
-                        const loaded = (m.id === '1' && wasmLoaded) || loadedNames.some(n => m.name.includes(n) || n.includes(m.name.split(':')[1]));
+                        const nameBase = m.name.split(':')[1]; // "7b", "1.5b" etc
+                        const loaded = (m.id === '1' && wasmLoaded) || loadedNames.some(n => n.includes(nameBase));
                        const status = loaded ? ' <span style="color:#3fb950">✓ ladattu</span>' : '';
                        termLog(`    <span style="color:#58a6ff">${m.id}</span>  ${m.name}  <span style="color:#8b949e">${m.size} | ${m.type}</span>${status}`);
                    }
@@ -2956,7 +3307,7 @@ ${generatedFiles['Dockerfile'] || '(puuttuu)'}`;
            'kpn run coder-3b': ['"binary search tree in rust"', '"REST API with Flask"', '"async web scraper in python"'],
            'kpn run manager': ['"suunnittele REST API"', '"priorisoi tiimin tehtävät"'],
            'kpn run tester': ['"testaa login-toiminto"'],
-            'kpn project': ['"FastAPI + SQLite REST API for users"', '"Flask todo app with database"', '"CLI tool for CSV processing in Python"'],
+            'kpn project': ['"FastAPI + SQLite CRUD API for users (create, list, update, delete) with HTML form UI served at /"', '"FastAPI todo app with SQLite: CRUD (add, list, toggle done, delete) with simple HTML UI at /"', '"FastAPI bookmark manager with SQLite: CRUD (add, list, edit, delete) with HTML search UI at /"'],
            'kpn pipeline': ['"rakenna todo-sovellus"', '"tee laskin pythonilla"'],
        };

@@ -3367,11 +3718,7 @@ ${generatedFiles['Dockerfile'] || '(puuttuu)'}`;
                            while (term.children.length > 50 && !term.firstChild.querySelector('.stream-content')) term.removeChild(term.firstChild);
                            term.scrollTop = term.scrollHeight;

-                            // Avatar-aktivointi vain oikeille käyttäjäpyynnöille
-                            if (data.task_id) {
-                                document.querySelectorAll('.avatar-card').forEach(c => c.classList.remove('active'));
-                                document.getElementById('avatar-kpn')?.classList.add('active');
-                            }
+                            // Avatar-aktivointi hoidetaan pipelineStep()-funktiossa
                        }
                    } else if (isCoder) {
                        // Codelab: erillinen addCodeResult-handler käsittelee (rivi 2364)
@@ -3518,26 +3865,7 @@ ${generatedFiles['Dockerfile'] || '(puuttuu)'}`;
                            term.scrollTop = term.scrollHeight;
                        }

-                        // Avatar-aktivointi vain oikeille käyttäjäpyynnöille (task_id)
-                        if (data.task_id) {
-                            document.querySelectorAll('.avatar-card').forEach(c => c.classList.remove('active'));
-                            const model = data.model || '';
-                            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')) {
-                                document.getElementById('avatar-coder')?.classList.add('active');
-                            } else if (model.includes('deepseek') || model.includes('r1')) {
-                                document.getElementById('avatar-observer')?.classList.add('active');
-                            }
-                        }
+                        // Avatar-aktivointi hoidetaan pipelineStep()-funktiossa
                    }
                }
            } catch(e) {}
@@ -4236,6 +4564,7 @@ ${generatedFiles['Dockerfile'] || '(puuttuu)'}`;

            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>');
Author	SHA1	Message	Date
jaakko	afc7f9bcee	Versio 0.2.4 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 18:52:21 +03:00
jaakko	5d2027b2ca	Native-node: automaattinen Ollama-haistelu käynnistyksessä Jos OLLAMA_URL ei ole asetettu, kokeillaan järjestyksessä: 1. localhost:11434 (paikallinen Ollama) 2. 127.0.0.1:11434 3. ollama:11434 (Docker-verkko) 4. host.docker.internal:11434 (Docker-kontti → isäntä) Ensimmäinen joka vastaa /api/version-kutsuun valitaan. Timeout 2s per kokeilu. Jos OLLAMA_URL on asetettu, sitä käytetään suoraan. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 17:41:44 +03:00
jaakko	8a4d515eed	Client-compose: Ollama lisätty jokaiseen profiiliin (nvidia/amd/cpu) Ollama-palvelu puuttui client-composesta — native-node yritti yhdistää ollamaan jota ei ollut. Nyt jokaisessa profiilissa on oma Ollama (nvidia: latest+GPU, amd: rocm+/dev/kfd, cpu: latest) network alias 'ollama' jotta native-node löytää sen. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 17:40:33 +03:00
jaakko	987a370a05	Docker: Cargo.lock valinnainen, Ollama AMD ROCm -tuella - Dockerfile.native-node: Cargo.lock kopioidaan glob-patternilla (ei kaadu jos puuttuu, esim. .gitignore poistaa sen) - docker-compose: Ollama vaihdettu ollama/ollama:rocm -imageen AMD GPU:lle, /dev/kfd + /dev/dri laitemappaukset, poistettu nvidia deploy.resources Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 17:33:27 +03:00
jaakko	f75e7f07e9	Opas: tokenisointiesimerkki korvattu oikealla kuvakaappauksella - Staattinen tekstitokenisointiesimerkki korvattu kuvalla joka näyttää värikoodatut tokenit EN/FI-vertailussa - Markdown-renderöijään lisätty ![alt](src) kuvatuki - Kuva: static/images/tokenization-example.png Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 13:20:50 +03:00
jaakko	eb6f720fcc	Wasm tokenize_js() exportti oppaan live-tokenizeria varten Lisätty #[wasm_bindgen] tokenize_js(text) → JSON-funktio joka lataa tokenizerin IndexedDB:stä tai HuggingFacesta tarvittaessa. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 13:18:07 +03:00
jaakko	e25d0ea8f2	Versio 0.2.3 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 13:15:05 +03:00
jaakko	4d1e89da34	Avatar-kuvakkeet 48px → 50px (+5%) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 13:14:14 +03:00
jaakko	bf535b6256	Raportti: syntaksikorostus, CSS-tooltipsit rivityksellä, parannettu layout - Lisätty highlightCode() — regex-pohjainen korostus .py, .html, Dockerfile - Swimlane-badget: title-attr → CSS ::after tooltip (white-space:pre-wrap) - Tiedostokortit: kieli + rivimäärä headeriin - Yleinen ilme: pyöristetyt kulmat, monospace-fontti, parempi line-height - Pipeline-vaiheet: selkeämmät erottimet ja väripaletti Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 13:10:37 +03:00
jaakko	29e1c440c6	Native-node osoittaa nyt tuotantohubiin (kipina.studio) HUB_URL vaihdettu ws://agentic-poc:3000/ws → wss://kipina.studio/ws jotta lokaali GPU-solmu palvelee tuotantoympäristöä. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 13:05:19 +03:00
jaakko	560bee1369	Laskentaverkko ja Koodilaboratorio -tabit takaisin näkyviin Tabit olivat piilotettu display:none-tyylillä, mikä rikkoi myös hash-navigoinnin (#codelab, #network). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 13:01:21 +03:00
jaakko	b074e0cb49	Avatar-korttien opacity nostettu 0.5 → 0.8 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 12:55:46 +03:00
jaakko	9307c75516	Pysty/vaaka-toggle avatareille 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>	2026-04-07 12:55:07 +03:00
jaakko	86191fbb6c	Avatarit vaakariviin: kompakti layout, säästää pystytilaa 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>	2026-04-07 12:53:25 +03:00
jaakko	a6a94f7688	Avatar-logiikka: poistettu kilpaileva llm_prompt-handler, korjattu vilkkumisjärjestys Ongelma: kaksi erillistä avatar-aktivointilogiikkaa kilpaili: 1) pipelineStep() — oikea agentti statuksen perusteella 2) llm_prompt-handler — arvasi agentin prompt-tekstistä (usein väärin → DevOps vilkkui QA:n/Datan sijaan) Korjaus: - Poistettu llm_prompt- ja llm_done-handlerien avatar-heuristiikat - pipelineStep() hoitaa kaiken: active → syttyy, done → sammuu heti - Pipeline-lopussa kaikki avataret sammutetaan eksplisiittisesti Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 12:42:02 +03:00
jaakko	8d5c5440d2	Avatar-vilahdus: oikea agentti aktivoituu vuorollaan, manageri-bugi korjattu pipelineStep() aktivoi nyt oikean agentin avatarin (sekä card että gallery-head) kun status on 'active', ja poistaa 'done'-statuksella sekunnin viiveellä. Poistettu llm_done-handlerin turha manageri-aktivointi joka vilkutti aina manageria. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 12:38:08 +03:00
jaakko	a12bd7ce7f	One-liner koodi: system prompt vaatii rivinvaihdot + staattinen tarkistus Ollaman system prompt: 'Use proper newlines and indentation'. Staattinen analyysi: havaitsee jos .py-tiedosto on yhdellä rivillä. Native node vaatii rebuildin. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 12:07:51 +03:00
jaakko	9ac90aa540	pyproject.toml esimerkki: lisätty httpx ja pytest riippuvuuksiin TestClient vaatii httpx:n, testit vaativat pyTestin. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 12:01:35 +03:00
jaakko	32065d5818	Korjattu </script> index.html-esimerkissä joka katkaisi pääsivun JS:n Sama bugi kuin aiemmin: template-literalin </script> sulkee ulomman script-tagin. Pilkottu: '<'+'/script>'. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 12:00:53 +03:00
jaakko	321943ee3c	Esimerkkiprojektit: täysi CRUD + HTML UI root-osoitteessa Few-shot esimerkit päivitetty: - main.py: GET/POST/PUT/DELETE + FileResponse("/") index.html:lle - index.html: yksinkertainen UI fetch()-kutsuilla API:in - /api/ -prefiksi JSON-endpointeille - Esimerkkipromptit kuvaavat CRUD-operaatiot eksplisiittisesti Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 11:49:38 +03:00
jaakko	1b75c89320	Raportti: Mermaid → custom swimlane (kompakti, tooltipsit) Agenteittain ryhmitelty visualisointi: Manageri ✓ Suunnittelu Koodari ✓ models.py → ✓ main.py → ✓ index.html DevOps ✓ Review → ✓ Dockerfile → ✓ Compose → ✓ README QA ✓ Testit → ✓ Validointi Hover näyttää selityksen + output-esikatselun. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 11:39:23 +03:00
jaakko	01622a960f	Mermaid-kaavio LR (vaakasuunta) + tooltipsit joka vaiheelle graph TD → graph LR: kaavio kiemurtelee vasemmalta oikealle. Hover näyttää vaiheen selityksen ja output-esikatselun. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 11:33:23 +03:00
jaakko	4e4efda67d	Korjattu </script> template-literalissa joka katkaisi pääsivun JS:n Template-stringin sisällä oleva </script> sulki ulomman script-tagin. Pilkottu string-konkatenoimalla: '</'+' script>'. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 11:25:36 +03:00
jaakko	f5db2eb034	Esimerkkiprojektit HTML UI:lla + Mermaid-kaavio raporttiin + tooltips - Esimerkkipromptit sisältävät nyt HTML-käyttöliittymän - Manageri generoi index.html tiedoston, Dockerfile kopioi sen - README: docker compose up → http://localhost:8000 - Raporttiin Mermaid-kaavio agenttien workflowsta (CDN) - Pipeline-vaiheiden hover näyttää selityksen Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 11:06:15 +03:00
jaakko	77c8d46e7b	Staattinen analyysi: tiedostojen väliset importit tarkistetaan from db import get_db → tarkistaa onko get_db määritelty db.py:ssä (def, class tai muuttuja). Löytää puuttuvat exportit ennen Docker-buildia. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 10:34:41 +03:00
jaakko	f14eba1b49	Projektiraportti: HTML-dokumentaatio pipeline-vaiheista ja tiedostoista Pipeline generoi HTML-raportin joka sisältää: - Pipeline-vaiheet prompteineen ja tuloksineen (avattavat details) - Staattisen analyysin tulokset - Kaikki generoidut tiedostot korostettuina - Raportti avautuu uuteen välilehteen linkistä terminaalissa - Projektikorttiin lisätty 📄 Raportti -nappi Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 10:22:03 +03:00
jaakko	6d15298418	Parannettu staattinen analyysi + docker-compose template Staattinen analyysi: tarkistaa 15 yleistä symbolia (Boolean, Text, Depends, HTTPException jne.) puuttuvista importeista. Models-esimerkki: lisätty Boolean ja Text importteihin. docker-compose.yml: template ilman LLM:ää — ei enää version tai turhaa PostgreSQL-containeria SQLite-projektissa. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 10:16:19 +03:00
jaakko	cea1961183	Testaaja: staattinen analyysi + strukturoitu LLM-arviointi Staattinen analyysi selaimessa (ennen LLM:ää): - Käyttämättömät importit - Puuttuvat importit (FastAPI, Session) - Tyhjät funktiot LLM-arviointi 5 kohdalla (esimerkkivastauksineen): 1. Imports, 2. Database, 3. Endpoints, 4. Error handling, 5. Security Korjausluuppi käynnistyy jos ✗ löytyy tai staattinen analyysi huomauttaa. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 10:13:15 +03:00
jaakko	21a8015ea3	SQLAlchemy esimerkki: declarative_base() → DeclarativeBase (v2.0+) declarative_base() on poistettu SQLAlchemy 2.0:sta. Päivitetty molemmat esimerkit käyttämään class Base(DeclarativeBase). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 10:07:23 +03:00
jaakko	c3991193d9	Pipeline-vaiheet rivittyvät + fixedDockerfile viittaus korjattu Poistettu fixedDockerfile-viittaus joka kaatoi pipelinen ennen renderProjectCard:ia → ZIP ei generoitunut. Pipeline-vaiheet käyttävät nyt flex-wrap:ia eikä overflow-x:ää. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 10:03:14 +03:00
jaakko	02c6d67218	Korjausvaihe ei ylikirjoita Dockerfilea — template pysyy QA-validoinnin korjausvaihe antoi LLM:n generoida uuden Dockerfilen joka sekoitti pip:n ja uv:n. Nyt korjaus kohdistuu vain .py ja pyproject.toml -tiedostoihin. Dockerfile pysyy templatena. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 09:58:49 +03:00
jaakko	de1cf009fa	pyproject.toml: stdlib-moduulit (sqlite3, os, sys) kielletty riippuvuuksista Malli laittoi sqlite3:n dependencies-listaan → uv sync epäonnistui. Koodarin, QA:n ja validoinnin prompteihin lisätty selkeä kielto. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 09:53:10 +03:00
jaakko	060f36f479	ZIP-lataus: null-tarkistus tiedostoille + virheilmoitus Lisätty guard puuttuvalle projectFiles-datalle ja null-safe content. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 09:46:34 +03:00
jaakko	e2ec0fa43d	v0.2.2: responsiivinen UI, Ollama-proxy, mixed content korjaus Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 09:23:35 +03:00
jaakko	8752c0f465	Responsiivinen korkeus: terminaali ja UI skaalautuvat viewport-korkeuteen Terminaali: clamp(200px, 35vh, 500px) — skaalautuu ikkunan mukaan. <900px korkeus: pienempi otsikko, tiiviimmät avataret, matalampi terminaali. >1200px korkeus: isompi terminaali ja promptikenttä. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 09:22:15 +03:00
jaakko	8c95282654	Tiivistetty layout: terminaali 500→300px, pienemmät marginaalit Mahtuu 1440px korkeuteen ilman vieritystä. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 09:20:06 +03:00
jaakko	a1bc1af646	Hardware API: Ollama-fallback kun wgpu ei tunnista GPU:ta Dockerissa /api/v1/hardware tarkistaa nyt myös Ollaman tilan fallbackina. kpn models näyttää ladattujen mallien määrän ja ✓ oikein. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 09:18:00 +03:00
jaakko	6b27cbbade	kpn load: rehellinen viesti — 'valittu' eikä 'ladattu ja aktiivinen' Frontend ei tiedä onko malli oikeasti ladattu Ollamaan. Nyt näytetään 'valittu — natiivisolmu lataa mallin' ja varoitus ensimmäisen pyynnön hitaudesta. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 09:04:11 +03:00
jaakko	4d9c51a86f	.gitignore: *.db — ajonaikaiset tietokannat pois versionhallinnasta nodes.db muuttui jatkuvasti ja esti deployn. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 08:59:35 +03:00