agentic-studio/network-poc/frontend/src/components/Settings.astro

<!-- Asetukset-paneeli: kaikki LLM-parametrit muokattavissa -->
<div id="panel-settings" class="panel">
    <div style="max-width:800px;margin:0 auto;padding:20px">
        <h2 style="color:#e6edf3;margin-bottom:16px">Asetukset</h2>
        <p style="color:#8b949e;margin-bottom:20px;font-size:14px">Kaikki kielimallin toimintaan vaikuttavat parametrit. Muutokset tallentuvat automaattisesti.</p>

        <!-- System prompt -->
        <div class="settings-section">
            <h3 class="settings-title">System Prompt</h3>
            <p class="settings-desc">Kielimallin perusohje joka lähetetään jokaisessa pyynnössä. Määrittää mallin käyttäytymisen.</p>
            <textarea id="set-system-prompt" class="settings-textarea" rows="4"></textarea>
        </div>

        <!-- Sampling -->
        <div class="settings-section">
            <h3 class="settings-title">Sampling-parametrit</h3>
            <p class="settings-desc">Kontrolloi miten malli valitsee seuraavan tokenin. <a href="#guide" onclick="switchTab('guide')" style="color:var(--accent)">Lue lisää oppaasta.</a></p>
            <div class="settings-grid">
                <div>
                    <label class="settings-label">Temperature <span id="set-temp-val" class="settings-val">0.7</span></label>
                    <input type="range" id="set-temperature" min="0" max="1.5" step="0.1" value="0.7" class="settings-slider">
                    <div class="settings-hint">0 = deterministic, 0.7 = balanced, 1.5 = creative</div>
                </div>
                <div>
                    <label class="settings-label">Top-K <span id="set-topk-val" class="settings-val">40</span></label>
                    <input type="range" id="set-topk" min="1" max="100" step="1" value="40" class="settings-slider">
                    <div class="settings-hint">Montako tokenia huomioidaan. 1 = greedy, 40 = oletus</div>
                </div>
                <div>
                    <label class="settings-label">Repetition Penalty <span id="set-rep-val" class="settings-val">1.15</span></label>
                    <input type="range" id="set-repeat" min="1.0" max="2.0" step="0.05" value="1.15" class="settings-slider">
                    <div class="settings-hint">Estää toistoa. 1.0 = ei rangaistusta, 1.15 = oletus</div>
                </div>
                <div>
                    <label class="settings-label">Max Tokens <span id="set-maxtok-val" class="settings-val">1024</span></label>
                    <input type="range" id="set-maxtokens" min="64" max="4096" step="64" value="1024" class="settings-slider">
                    <div class="settings-hint">Vastauksen maksimipituus tokeneina</div>
                </div>
            </div>
        </div>

        <!-- Stop-sekvenssit -->
        <div class="settings-section">
            <h3 class="settings-title">Stop-sekvenssit</h3>
            <p class="settings-desc">Generointi katkeaa kun malli tuottaa jonkin näistä. Yksi per rivi.</p>
            <textarea id="set-stop-sequences" class="settings-textarea" rows="4"></textarea>
        </div>

        <!-- Malli -->
        <div class="settings-section">
            <h3 class="settings-title">Malli (Ollama)</h3>
            <p class="settings-desc">Natiivisolmun käyttämä kielimalli. Muutos vaatii native-noden uudelleenkäynnistyksen.</p>
            <select id="set-model" class="settings-select">
                <option value="qwen2.5-coder:1.5b">Qwen2.5-Coder:1.5B (~80 tok/s, ~1GB)</option>
                <option value="qwen2.5-coder:3b">Qwen2.5-Coder:3B (~50 tok/s, ~2GB)</option>
                <option value="qwen2.5-coder:7b-instruct-q4_K_M">Qwen2.5-Coder:7B Q4 (~30 tok/s, ~4GB)</option>
                <option value="qwen2.5-coder:7b">Qwen2.5-Coder:7B (~20 tok/s, ~7GB)</option>
            </select>
        </div>

        <!-- Pipeline-rajoitteet -->
        <div class="settings-section">
            <h3 class="settings-title">Pipeline-rajoitteet</h3>
            <p class="settings-desc">Projektin generoinnin rajat. Suuremmat arvot = rikkaampi output, hitaampi suoritus.</p>
            <div class="settings-grid">
                <div>
                    <label class="settings-label">Client: max sanat <span id="set-plc-words-val" class="settings-val">400</span></label>
                    <input type="range" id="set-plc-words" min="100" max="800" step="50" value="400" class="settings-slider">
                    <div class="settings-hint">Vaatimusmäärittelyn maksimipituus sanoina</div>
                </div>
                <div>
                    <label class="settings-label">Client: max ominaisuudet <span id="set-plc-feats-val" class="settings-val">8</span></label>
                    <input type="range" id="set-plc-feats" min="3" max="15" step="1" value="8" class="settings-slider">
                    <div class="settings-hint">Montako ominaisuutta vaatimuksiin</div>
                </div>
                <div>
                    <label class="settings-label">Manager: max tiedostot <span id="set-plc-mfiles-val" class="settings-val">8</span></label>
                    <input type="range" id="set-plc-mfiles" min="3" max="15" step="1" value="8" class="settings-slider">
                    <div class="settings-hint">Managerin suunnittelemien tiedostojen yläraja</div>
                </div>
                <div>
                    <label class="settings-label">Vapaa tila: max tiedostot <span id="set-plc-ffiles-val" class="settings-val">8</span></label>
                    <input type="range" id="set-plc-ffiles" min="3" max="15" step="1" value="8" class="settings-slider">
                    <div class="settings-hint">Tiedostoraja kun ei mallipohjaa</div>
                </div>
                <div>
                    <label class="settings-label">Review-kierrokset <span id="set-plc-review-val" class="settings-val">3</span></label>
                    <input type="range" id="set-plc-review" min="1" max="5" step="1" value="3" class="settings-slider">
                    <div class="settings-hint">Katselmointi-korjaus-syklien max määrä</div>
                </div>
                <div>
                    <label class="settings-label">Terminaali: max rivit <span id="set-plc-term-val" class="settings-val">300</span></label>
                    <input type="range" id="set-plc-term" min="50" max="1000" step="50" value="300" class="settings-slider">
                    <div class="settings-hint">Terminaalin näyttämien rivien yläraja</div>
                </div>
                <div>
                    <label class="settings-label">CrewAI: prompt-rivit <span id="set-plc-crew-val" class="settings-val">50</span></label>
                    <input type="range" id="set-plc-crew" min="10" max="200" step="10" value="50" class="settings-slider">
                    <div class="settings-hint">tasks.yaml:n promptin max rivimäärä</div>
                </div>
            </div>
        </div>

        <!-- Reset -->
        <div style="margin-top:24px;padding-top:16px;border-top:1px solid var(--border)">
            <button class="btn btn-red" onclick="resetSettings()" style="padding:6px 16px">Palauta oletukset</button>
            <span style="color:#8b949e;font-size:12px;margin-left:8px">Palauttaa kaikki parametrit oletusarvoihin</span>
        </div>
    </div>
</div>