Terminaalin status-rivit tiivistetty: yksi rivi per tehtävä jota päivitetään

Ennen (3 riviä):
  → qwen-coder käsittelee...
  → Reititetty solmulle #2
  ✓ Qwen2.5-Coder-0.5B-Instruct (75 tok)

Jälkeen (1 rivi jota päivitetään):
  → qwen-coder käsittelee...  →  → Reititetty solmulle #2 ▌  →  ✓ Qwen2.5-Coder 75 tok · 12.0s · 6.3 tok/s

Sama div päivitetään pyynnön elinkaaren läpi: käsittelee → reititys → valmis/virhe.
task_routed-viestit päivittävät samaa riviä uusien rivien sijaan.

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

network-poc/static/index.html

@@ -1751,8 +1751,15 @@
 
         // Lähettää promptin mallille ja palauttaa vastauksen (tai null virhetilanteessa)
         async function kpnRun(model, prompt, silent) {
-            termLog(`  → <span style="color:#58a6ff">${model}</span> käsittelee...`, '#8b949e');
             const taskId = crypto.randomUUID();
+            // Yksittäinen status-rivi jota päivitetään läpi pyynnön elinkaaren
+            const statusDiv = document.createElement('div');
+            statusDiv.className = 'terminal-line';
+            statusDiv.id = 'status-' + taskId;
+            statusDiv.innerHTML = `  <span style="color:#8b949e">→ <span style="color:#58a6ff">${model}</span> käsittelee...</span>`;
+            termPanel.appendChild(statusDiv);
+            termPanel.scrollTop = termPanel.scrollHeight;
+
             try {
                 const agent = Object.values(agentPrompts).find(a => a.model === model);
                 const parts = [];
@@ -1780,20 +1787,29 @@
 
                 if (!res.ok) {
                     const errText = await res.text().catch(() => res.statusText);
-                    termLog(`  ✗ ${errText}`, '#f85149');
+                    statusDiv.innerHTML = `  <span style="color:#f85149">✗ ${esc(errText)}</span>`;
                     return null;
                 }
                 const data = await res.json();
                 const response = (data.response || '').trim();
                 const tokGen = data.tokens_generated || 0;
-                termLog(`  <span style="color:#3fb950">✓</span> <span style="color:#58a6ff">${data.model || model}</span> <span style="color:#8b949e">(${tokGen} tok)</span>`);
+                const durS = data.duration_ms ? (data.duration_ms / 1000).toFixed(1) + 's' : '';
+                const tokS = data.tokens_per_sec ? data.tokens_per_sec.toFixed(1) + ' tok/s' : '';
+                statusDiv.innerHTML = `  <span style="color:#3fb950">✓</span> <span style="color:#58a6ff">${esc(data.model || model)}</span> <span style="color:#8b949e">${tokGen} tok · ${durS} · ${tokS}</span>`;
                 if (!silent) {
-                    const highlighted = highlightCode(response).replace(/\n/g, '\n  ');
+                    // Kompakti yksirivinen esikatselu — klikkaa/hover laajentaa
-                    termLog(`  <pre style="margin:0;font:inherit;white-space:pre-wrap">${highlighted}</pre>`);
+                    const firstLine = response.split('\n').find(l => l.trim()) || response;
+                    const lineCount = response.split('\n').filter(l => l.trim()).length;
+                    const preview = esc(firstLine.trim());
+                    const fullHighlighted = highlightCode(response).replace(/\n/g, '\n  ');
+                    const uid = 'code-' + Date.now();
+                    termLog(`  <span style="color:#3fb950;cursor:pointer" onclick="document.getElementById('${uid}').style.display=document.getElementById('${uid}').style.display==='none'?'block':'none'" title="Klikkaa nähdäksesi koko koodi">`
+                        + `<span style="color:#8b949e">▶</span> ${preview} <span style="color:#8b949e">${lineCount > 1 ? `(+${lineCount - 1} riviä)` : ''}</span></span>`
+                        + `<pre id="${uid}" style="display:none;margin:4px 0 0 16px;font:inherit;white-space:pre-wrap;border-left:2px solid #30363d;padding-left:10px">${fullHighlighted}</pre>`);
                 }
                 return response;
             } catch (e) {
-                termLog(`  ✗ ${e.message}`, '#f85149');
+                statusDiv.innerHTML = `  <span style="color:#f85149">✗ ${esc(e.message)}</span>`;
                 return null;
             } finally {
                 if (activeStreams[taskId]) {
@@ -2455,24 +2471,16 @@
                         }
                     }
                 } else if (data.type === "task_routed") {
-                    const term = document.getElementById('agent-terminal');
                     const isQueued = data.status === 'queued';
-                    const color = isQueued ? '#d29922' : '#58a6ff';
+                    const color = isQueued ? '#d29922' : '#8b949e';
                     const icon = isQueued ? '⏳' : '→';
                     const msg = esc(data.message || '');
 
-                    // Agents-terminaali
+                    // Päivitetään olemassaoleva status-rivi (kpnRun luo sen)
-                    if (term && data.task_id && activeStreams[data.task_id]) {
+                    const statusDiv = document.getElementById('status-' + data.task_id);
-                        const div = document.createElement('div');
+                    if (statusDiv) {
-                        div.className = 'terminal-line';
+                        statusDiv.innerHTML = `  <span style="color:${color}">${icon} ${msg}${isQueued ? '' : ' <span style="animation:blink 1s infinite">▌</span>'}</span>`;
-                        div.style.color = color;
+                        termPanel.scrollTop = termPanel.scrollHeight;
-                        div.innerHTML = `  ${icon} ${msg}`;
-                        if (isQueued) div.id = 'routing-' + data.task_id;
-                        // Päivitetään olemassaoleva jonorivi jos löytyy
-                        const existing = document.getElementById('routing-' + data.task_id);
-                        if (existing) { existing.innerHTML = `  ${icon} ${msg}`; existing.style.color = color; }
-                        else term.appendChild(div);
-                        term.scrollTop = term.scrollHeight;
                     }
 
                     // Codelab-loading-teksti