Laskentasolmun käynnistys käyttäjän hallinnassa: nappi + cancel + kpn load

Status-palkissa "Alusta laskentasolmu" -nappi joka:
- Klikkaa → käynnistää kielimallin latauksen omalle koneelle
- Latauksen aikana muuttuu "Peruuta"-napiksi (punainen)
- Valmis → vihreä "✓ Valmis" -tila
Myös kpn load -komento terminaalissa tekee saman.
Agents-sivulla ei enää automaattista käynnistystä — käyttäjä valitsee itse.

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

network-poc/static/index.html

@@ -1096,10 +1096,11 @@
                         <span id="agent-hub-label" style="color:#d29922">Yhdistetään...</span>
                     </span>
                     <span style="color:#30363d">│</span>
-                    <span style="display:flex;align-items:center;gap:6px;cursor:pointer" id="agent-compute-status" title="Klikkaa käynnistääksesi oman koneen laskentasolmu">
+                    <span style="display:flex;align-items:center;gap:6px" id="agent-compute-wrap">
                         <span id="agent-compute-dot" style="width:8px;height:8px;border-radius:50%;background:#30363d;display:inline-block"></span>
                         <span style="color:#8b949e">Laskenta:</span>
-                        <span id="agent-compute-label" style="color:#8b949e">Ei käynnissä ⟩</span>
+                        <span id="agent-compute-label" style="color:#8b949e">—</span>
+                        <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 class="terminal-panel" id="agent-terminal" style="margin-top:0;border-top:none;border-radius:0">
@@ -1457,9 +1458,9 @@
                 }));
             }
 
-            // Agents- ja codelab-sivuille: käynnistetään oma laskentasolmu
+            // Codelab: käynnistetään oma laskentasolmu automaattisesti
-            // jotta käyttäjän oma kone voi suorittaa tehtäviä
+            // Agents: käyttäjä käynnistää itse "Alusta laskentasolmu" -napista
-            if (tab === 'agents' || tab === 'codelab') {
+            if (tab === 'codelab') {
                 if (typeof ensureCoderNode === 'function') ensureCoderNode();
             }
         };
@@ -1847,12 +1848,13 @@
             }
 
             if (sub === 'load') {
-                const cl = document.getElementById('agent-compute-label');
+                const btn = document.getElementById('agent-compute-btn');
-                if (cl && cl.style.color === 'rgb(63, 185, 80)') {
+                if (btn && btn.dataset.state === 'ready') {
                     termLog('  ✓ Kielimalli on jo ladattu ja valmis', '#3fb950');
                 } else {
-                    termLog('  Ladataan kielimallia...', '#d29922');
+                    termLog('  Alustetaan laskentasolmua...', '#d29922');
-                    ensureCoderNode();
+                    if (btn) btn.click(); // Käytetään samaa logiikkaa kuin napissa
+                    else ensureCoderNode();
                 }
                 return;
             }
@@ -2521,13 +2523,17 @@
                 if (msg.includes('[Coder]') && msg.includes('model') && msg.includes('tallennettu')) { setStep('step-model', 'done', '100%'); }
                 if (msg.includes('[Coder]') && msg.includes('Rakennetaan')) { setStep('step-build', 'active'); }
                 if (msg.includes('Agent Node käynnistyy') || msg.includes('Rakennetaan')) {
-                    // Laskenta käynnistymässä
                     const cd = document.getElementById('agent-compute-dot');
                     const cl = document.getElementById('agent-compute-label');
-                    const cs = document.getElementById('agent-compute-status');
+                    const btn = document.getElementById('agent-compute-btn');
                     if (cd) cd.style.background = '#d29922';
-                    if (cl) { cl.textContent = 'Ladataan mallia...'; cl.style.color = '#d29922'; }
+                    if (cl) { cl.textContent = 'Ladataan...'; cl.style.color = '#d29922'; }
-                    if (cs) cs.title = 'Kielimallia ladataan — tämä kestää ensimmäisellä kerralla pidempään';
+                    if (btn && btn.dataset.state !== 'ready') {
+                        btn.dataset.state = 'loading';
+                        btn.textContent = 'Peruuta';
+                        btn.style.borderColor = '#f85149';
+                        btn.style.color = '#f85149';
+                    }
                 }
                 if (msg.includes('[Coder]') && msg.includes('Malli ladattu')) {
                     // Malli on valmis — merkataan kaikki vaiheet valmiiksi
@@ -2547,10 +2553,10 @@
                     // Agents-sivun compute-status: valmis
                     const cd = document.getElementById('agent-compute-dot');
                     const cl = document.getElementById('agent-compute-label');
-                    const cs = document.getElementById('agent-compute-status');
+                    const btn = document.getElementById('agent-compute-btn');
                     if (cd) cd.style.background = '#3fb950';
-                    if (cl) { cl.textContent = 'Valmis (Qwen2.5-Coder)'; cl.style.color = '#3fb950'; }
+                    if (cl) { cl.textContent = 'Qwen2.5-Coder'; cl.style.color = '#3fb950'; }
-                    if (cs) { cs.title = 'Kielimalli ladattu — oma kone on valmis suorittamaan tehtäviä'; cs.style.cursor = 'default'; }
+                    if (btn) { btn.dataset.state = 'ready'; btn.textContent = '✓ Valmis'; btn.style.borderColor = '#3fb950'; btn.style.color = '#3fb950'; btn.style.cursor = 'default'; btn.title = 'Kielimalli ladattu — oma kone on valmis laskentaan'; }
                 }
                 if (msg.includes('[Coder]') && msg.includes('Syöte:')) {
                     // Pipeline piiloon kun generointi alkaa
@@ -2637,15 +2643,31 @@
             }
         }
 
-        // Automaattinen coder-noden käynnistys agents-sivulle (suora navigointi #agents)
+        // Agents-sivun coder-node käynnistetään "Alusta laskentasolmu" -napista tai kpn load -komennolla
-        if (window.location.hash === '#agents') {
+
-            ensureCoderNode();
+        // Laskentasolmun käynnistys/pysäytys -nappi
+        let computeAbortController = null;
+        document.getElementById('agent-compute-btn')?.addEventListener('click', () => {
+            const btn = document.getElementById('agent-compute-btn');
+            const cl = document.getElementById('agent-compute-label');
+            if (!btn) return;
+
+            if (btn.dataset.state === 'ready') return; // Jo valmis, ei tehdä mitään
+
+            if (btn.dataset.state === 'loading') {
+                // Cancel — ladataan sivua uudelleen koska Wasm-latausta ei voi pysäyttää
+                btn.textContent = 'Peruutetaan...';
+                btn.disabled = true;
+                window.location.reload();
+                return;
             }
 
-        // Klikkaa compute-statusta käynnistääksesi laskentasolmu
+            // Käynnistetään
-        document.getElementById('agent-compute-status')?.addEventListener('click', () => {
+            btn.dataset.state = 'loading';
-            const cl = document.getElementById('agent-compute-label');
+            btn.textContent = 'Peruuta';
-            if (cl && cl.style.color === 'rgb(63, 185, 80)') return; // Jo valmis
+            btn.style.borderColor = '#f85149';
+            btn.style.color = '#f85149';
+            btn.title = 'Peruuta kielimallin lataus';
             ensureCoderNode();
         });