From aa7540a6bfa8dde24458e727cefa4ddef89a9ee7 Mon Sep 17 00:00:00 2001
From: Jaakko Vanhala <jaakko.vanhala@kamk.fi>
Date: Mon, 6 Apr 2026 08:00:11 +0300
Subject: [PATCH] =?UTF-8?q?Prompt=20Inspector:=20[>]-nappi=20status-rivill?=
 =?UTF-8?q?=C3=A4=20n=C3=A4ytt=C3=A4=C3=A4=20mit=C3=A4=20mallille=20l?=
 =?UTF-8?q?=C3=A4hetettiin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Jokaisen kpnRun-tuloksen status-rivillä on [>]-nappi joka avaa inspektor-paneelin:
- system: inferenssin system prompt
- shared: kaikille agenteille yhteinen prompti (jos asetettu)
- agent: valitun agentin system prompt
- user: käyttäjän/pipelinen prompti (kokonaisuudessaan, scrollattava)
- prefill: ``` (ChatML prefill-tekniikka)
- Token-estimaatti: ~N tok in → M tok out

Paneeli avautuu/sulkeutuu klikkaamalla. Näyttää eksaktisti saman
mitä malli saa syötteeksi — hyödyllinen debuggaukseen ja promptien
kehittämiseen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 network-poc/static/index.html | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/network-poc/static/index.html b/network-poc/static/index.html
index 039f5a1..22ec19b 100644
--- a/network-poc/static/index.html
+++ b/network-poc/static/index.html
@@ -1796,7 +1796,23 @@
                 const tokGen = data.tokens_generated || 0;
                 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>`;
+                const inspectId = 'inspect-' + taskId;
+
+                // Prompt-inspektor: tallennetaan promptin osat
+                const systemPrompt = 'You are a coding assistant. Respond with ONLY code. No explanations, no markdown, no comments unless asked.';
+                const agentPromptText = agent?.prompt || '';
+                const inputTokensEst = Math.round(fullPrompt.length / 3.5);
+
+                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>`
+                    + ` <span style="color:#30363d;cursor:pointer;font-size:11px" onclick="document.getElementById('${inspectId}').style.display=document.getElementById('${inspectId}').style.display==='none'?'block':'none'" title="Prompt Inspector">[&gt;]</span>`
+                    + `<div id="${inspectId}" style="display:none;margin:6px 0 4px 16px;padding:8px 12px;background:#0d1117;border:1px solid #30363d;border-radius:4px;font-size:12px;line-height:1.6">`
+                    + `<div style="color:#8b949e;margin-bottom:6px">Prompt Inspector · <span style="color:#58a6ff">~${inputTokensEst} tok in</span> → <span style="color:#3fb950">${tokGen} tok out</span></div>`
+                    + `<div style="margin-bottom:4px"><span style="color:#f85149">system:</span> <span style="color:#8b949e">${esc(systemPrompt)}</span></div>`
+                    + (sharedPrompt ? `<div style="margin-bottom:4px"><span style="color:#d2a8ff">shared:</span> <span style="color:#8b949e">${esc(sharedPrompt).substring(0, 150)}${sharedPrompt.length > 150 ? '...' : ''}</span></div>` : '')
+                    + (agentPromptText ? `<div style="margin-bottom:4px"><span style="color:#d29922">agent:</span> <span style="color:#8b949e">${esc(agentPromptText)}</span></div>` : '')
+                    + `<div style="margin-bottom:4px"><span style="color:#3fb950">user:</span> <pre style="margin:2px 0 0 0;padding:6px;background:#161b22;border-radius:3px;white-space:pre-wrap;color:#c9d1d9;font:inherit;max-height:150px;overflow-y:auto">${esc(prompt)}</pre></div>`
+                    + `<div><span style="color:#58a6ff">prefill:</span> <span style="color:#8b949e">\`\`\`</span></div>`
+                    + `</div>`;
                 if (!silent) {
                     // Kompakti yksirivinen esikatselu — klikkaa/hover laajentaa
                     const firstLine = response.split('\n').find(l => l.trim()) || response;