From c7f3b0d79f8ce242940157b85c1b23c3a85175b9 Mon Sep 17 00:00:00 2001
From: jaakko <jaakko@kipina.tech>
Date: Wed, 8 Apr 2026 11:20:28 +0300
Subject: [PATCH] Agent Builder: tooltip-ohjeistukset kaikille kentille
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- System Prompt: miten kirjoittaa hyvä prompti, esimerkit hyvä/huono
- Temperature: mitä arvot tarkoittavat (0.0–1.0+)
- Top-k: tokenivalinnan laajuus
- Max tokens: vastauksen pituus
- Malli: Ollama-malliesimerkit
- Docs: referenssidokumentin käyttö
- CSS .builder-tip ::after tooltip (white-space: pre-wrap)

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

diff --git a/network-poc/static/index.html b/network-poc/static/index.html
index 6b0e5be..8c5a80d 100644
--- a/network-poc/static/index.html
+++ b/network-poc/static/index.html
@@ -150,6 +150,16 @@
         #guide-content a { color: #58a6ff; }
         #guide-content table { border: 1px solid #30363d; border-radius: 6px; overflow: hidden; }
         #guide-content pre { scrollbar-color: #30363d transparent; }
+        .builder-tip { position: relative; }
+        .builder-tip[data-tip]:hover::after {
+            content: attr(data-tip);
+            position: absolute; bottom: calc(100% + 8px); left: 0;
+            background: #1c2028; border: 1px solid #30363d; border-radius: 8px;
+            padding: 10px 14px; font-size: 12px; color: #c9d1d9;
+            white-space: pre-wrap; max-width: 340px; min-width: 220px;
+            z-index: 100; box-shadow: 0 6px 16px rgba(0,0,0,0.5);
+            pointer-events: none; line-height: 1.6; font-weight: 400;
+        }
 
         .code-task-card {
             background: #0d1117;
@@ -1167,19 +1177,65 @@
                                     <option value="writer">Kirjoittaja</option>
                                     <option value="custom">Vapaa</option>
                                 </select>
-                                <input id="builder-model" placeholder="Malli (esim. qwen2.5-coder:7b)" value="qwen2.5-coder:7b" style="flex:1;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:6px 10px;color:#c9d1d9;font-size:13px">
+                                <div style="flex:1;position:relative">
+                                    <input id="builder-model" placeholder="Malli (esim. qwen2.5-coder:7b)" value="qwen2.5-coder:7b" style="width:100%;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:6px 10px;color:#c9d1d9;font-size:13px" class="builder-tip" data-tip="Ollama-mallin eksakti nimi.
+Esimerkkejä:
+• qwen2.5-coder:7b (oletus, hyvä koodaamiseen)
+• qwen2.5-coder:1.5b (kevyempi, nopeampi)
+• deepseek-r1 (reasoning, hidas mutta laadukas)
+• llama3.2:3b (yleiskäyttöinen)
+
+Malli pitää olla ladattuna Ollamaan (ollama pull).">
+                                </div>
                             </div>
                             <div style="display:flex;gap:10px">
                                 <input id="builder-color" type="color" value="#3fb950" style="width:40px;height:32px;border:1px solid #30363d;border-radius:4px;background:#0d1117;cursor:pointer">
-                                <input id="builder-docs" placeholder="Docs URL (valinnainen, esim. /docs/tofu-cheatsheet.md)" style="flex:1;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:6px 10px;color:#c9d1d9;font-size:13px">
+                                <input id="builder-docs" placeholder="Docs URL (valinnainen, esim. /docs/tofu-cheatsheet.md)" style="flex:1;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:6px 10px;color:#c9d1d9;font-size:13px" class="builder-tip" data-tip="Referenssidokumentti joka liitetään agentin promptiin automaattisesti.
+Esim. /docs/tofu-cheatsheet.md
+
+Dokumentti ladataan kerran ja cachetetaan.
+Max ~10 KB — pidempi teksti vie konteksti-ikkunaa.
+Tiedoston tulee olla .md tai .txt palvelimella.">
                             </div>
-                            <textarea id="builder-prompt" rows="4" placeholder="System prompt..." style="background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:8px 10px;color:#c9d1d9;font-size:13px;resize:vertical;font-family:inherit"></textarea>
-                            <div style="display:flex;gap:10px;align-items:center">
-                                <label style="color:#8b949e;font-size:12px">Temp:</label>
+                            <div>
+                                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px">
+                                    <label style="color:#8b949e;font-size:12px;font-weight:600">System Prompt</label>
+                                    <span class="builder-tip" data-tip="Prompti on agentin 'persoonallisuus' — se ohjaa miten malli vastaa.
+
+Kirjoita englanniksi (tehokkaampi tokenisointi, parempi ymmärrys).
+
+Hyvä prompti:
+• Määrittele rooli: 'You are a senior Python developer'
+• Ole konkreettinen: 'Always use type hints and docstrings'
+• Mainitse kirjastot: 'Use FastAPI, SQLAlchemy, Pydantic'
+• Rajoita: 'Output ONLY code, no explanations'
+
+Huono prompti:
+• Liian yleinen: 'Olet koodari'
+• Suomeksi (kuluttaa enemmän tokeneita)
+• Liian pitkä (vie tilaa vastaukselta)
+
+Prompti lähetetään jokaisessa kutsussa ennen käyttäjän viestiä.
+Max ~100 sanaa — pidempi vie konteksti-ikkunaa." style="color:#484f58;cursor:help;font-size:13px">?</span>
+                                </div>
+                                <textarea id="builder-prompt" rows="4" placeholder="You are a senior developer specializing in..." style="background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:8px 10px;color:#c9d1d9;font-size:13px;resize:vertical;font-family:inherit;width:100%"></textarea>
+                            </div>
+                            <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">
+                                <label style="color:#8b949e;font-size:12px" class="builder-tip" data-tip="Temperature: kuinka 'luova' malli on.
+0.0 = aina sama vastaus (deterministic)
+0.3–0.5 = tarkka koodi, boilerplate
+0.7 = oletus, hyvä kompromissi
+1.0+ = luova, vaihteleva, riskialtis">Temp: <span style="color:#484f58;cursor:help">?</span></label>
                                 <input id="builder-temp" type="number" value="0.7" min="0" max="2" step="0.1" style="width:60px;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:4px 8px;color:#c9d1d9;font-size:12px">
-                                <label style="color:#8b949e;font-size:12px">Top-k:</label>
+                                <label style="color:#8b949e;font-size:12px" class="builder-tip" data-tip="Top-k: montako todennäköisintä tokenia on valittavissa.
+1 = greedy (aina paras)
+40 = oletus, järkevät vaihtoehdot
+100+ = laajempi valikoima, enemmän vaihtelua">Top-k: <span style="color:#484f58;cursor:help">?</span></label>
                                 <input id="builder-topk" type="number" value="40" min="1" max="200" style="width:60px;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:4px 8px;color:#c9d1d9;font-size:12px">
-                                <label style="color:#8b949e;font-size:12px">Max tok:</label>
+                                <label style="color:#8b949e;font-size:12px" class="builder-tip" data-tip="Max tokens: vastauksen enimmäispituus.
+128 = lyhyt vastaus (review, suunnitelma)
+512 = oletus, riittää useimpiin tiedostoihin
+1024+ = pitkä koodi, mutta hitaampi">Max tok: <span style="color:#484f58;cursor:help">?</span></label>
                                 <input id="builder-maxtokens" type="number" value="512" min="32" max="4096" step="32" style="width:70px;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:4px 8px;color:#c9d1d9;font-size:12px">
                             </div>
                             <div style="display:flex;gap:8px;justify-content:flex-end">