From 3d6914974d8bb703a5c86c12542628611d01dfdb Mon Sep 17 00:00:00 2001
From: Jaakko Vanhala <jaakko.vanhala@kamk.fi>
Date: Fri, 10 Apr 2026 08:03:18 +0300
Subject: [PATCH] =?UTF-8?q?Prompti-textarea=20kasvaa=20automaattisesti=20s?=
 =?UTF-8?q?is=C3=A4ll=C3=B6n=20mukaan?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Koko prompti näkyy kerralla kun avatarin klikkaa — ei scrollausta.
Textarea saa overflow:hidden + auto-height sekä avatessa että kirjoittaessa.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 network-poc/frontend/src/components/AgentBar.astro | 2 +-
 network-poc/frontend/src/pages/index.astro         | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/network-poc/frontend/src/components/AgentBar.astro b/network-poc/frontend/src/components/AgentBar.astro
index 977e1e6..39c39fe 100644
--- a/network-poc/frontend/src/components/AgentBar.astro
+++ b/network-poc/frontend/src/components/AgentBar.astro
@@ -41,7 +41,7 @@
     <!-- System prompt -->
     <div style="margin-bottom:10px" title="Agentin perusohje joka lähetetään kielimallille jokaisessa pyynnössä.&#10;&#10;Hyvän promptin rakenne:&#10;1. Rooli: 'You are an expert...'&#10;2. Säännöt: RULES/CRITICAL RULES listana&#10;3. Esimerkit: EXAMPLE OUTPUT&#10;4. Kiellot: NEVER-lista&#10;&#10;Vinkki: käytä englantia — malli ymmärtää sen paremmin ja se kuluttaa vähemmän tokeneita.">
         <label style="font-size:12px;color:#8b949e;display:block;margin-bottom:4px;cursor:help">System prompt 💡</label>
-        <textarea id="config-prompt" rows="8" style="width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:8px;font-size:13px;font-family:'Courier New',monospace;resize:vertical" placeholder="Kuvaa agentin rooli ja käyttäytyminen..."></textarea>
+        <textarea id="config-prompt" style="width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:8px;font-size:13px;font-family:'Courier New',monospace;resize:vertical;overflow:hidden;min-height:60px" placeholder="Kuvaa agentin rooli ja käyttäytyminen..."></textarea>
     </div>
 
     <!-- Sampling-parametrit -->
diff --git a/network-poc/frontend/src/pages/index.astro b/network-poc/frontend/src/pages/index.astro
index 346b5f0..6e9769f 100644
--- a/network-poc/frontend/src/pages/index.astro
+++ b/network-poc/frontend/src/pages/index.astro
@@ -258,7 +258,11 @@ OUTPUT FORMAT:
         document.getElementById('config-name').value = a.name;
         document.getElementById('config-role').textContent = key;
         document.getElementById('config-model').value = a.model;
-        document.getElementById('config-prompt').value = a.prompt || '';
+        const promptEl = document.getElementById('config-prompt');
+        promptEl.value = a.prompt || '';
+        // Auto-resize: textarea kasvaa sisällön mukaan
+        promptEl.style.height = 'auto';
+        promptEl.style.height = promptEl.scrollHeight + 'px';
 
         // Sampling-parametrit
         const tempEl = document.getElementById('config-temperature');
@@ -285,7 +289,7 @@ OUTPUT FORMAT:
         // Muutosten tallennus
         document.getElementById('config-name').oninput = () => { agents[key].name = document.getElementById('config-name').value; saveAgents(); renderAgentBar(); };
         document.getElementById('config-model').onchange = () => { agents[key].model = document.getElementById('config-model').value; saveAgents(); };
-        document.getElementById('config-prompt').oninput = () => { agents[key].prompt = document.getElementById('config-prompt').value; saveAgents(); };
+        promptEl.oninput = () => { agents[key].prompt = promptEl.value; saveAgents(); promptEl.style.height = 'auto'; promptEl.style.height = promptEl.scrollHeight + 'px'; };
         tempEl.oninput = () => { agents[key].temperature = +tempEl.value; tempValEl.textContent = tempEl.value; saveAgents(); };
         maxtokEl.oninput = () => { agents[key].maxTokens = +maxtokEl.value; maxtokValEl.textContent = maxtokEl.value; saveAgents(); };
         topkEl.oninput = () => { agents[key].topK = +topkEl.value; topkValEl.textContent = topkEl.value; saveAgents(); };