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

<!-- Agent gallery + configuration panel -->
<div style="display:flex;gap:16px;padding:10px 0;align-items:flex-start">
    <!-- Agenttilista (drag & drop) -->
    <div id="agent-bar" style="display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap">
        <!-- Renderöidään JS:stä -->
    </div>
    <!-- + Add agent -->
    <div id="add-agent-btn" class="agent-avatar" onclick="addCustomAgent()" title="Add custom agent" style="opacity:0.4">
        <div style="width:48px;height:48px;border-radius:50%;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--border)">+</div>
        <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Add</span>
    </div>
</div>

<!-- Agent configuration panel (opens clicking avatar) -->
<div id="agent-config" style="display:none;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:16px;margin-bottom:10px">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
        <div style="display:flex;align-items:center;gap:10px">
            <img id="config-avatar" src="" style="width:40px;height:40px;border-radius:50%">
            <div>
                <input id="config-name" style="background:transparent;border:none;color:var(--text);font-size:16px;font-weight:600;outline:none;width:200px" placeholder="Agent Name">
                <div id="config-role" style="font-size:11px;color:#8b949e"></div>
            </div>
        </div>
        <div style="display:flex;gap:6px">
            <button class="btn btn-red" onclick="deleteAgent()" title="Delete agent">Delete</button>
            <button class="btn btn-muted" onclick="closeAgentConfig()">Close</button>
        </div>
    </div>

    <!-- Model -->
    <div style="margin-bottom:10px">
        <label style="font-size:12px;color:#8b949e;display:block;margin-bottom:4px">Model</label>
        <select id="config-model" style="background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px 10px;font-size:13px;width:100%">
            <option value="qwen-coder">Qwen2.5-Coder:0.5B (browser)</option>
            <option value="qwen-coder-3b">Qwen2.5-Coder:3B (Ollama)</option>
            <option value="qwen2.5-coder:7b">Qwen2.5-Coder:7B (Ollama)</option>
            <option value="qwen2.5-coder:1.5b">Qwen2.5-Coder:1.5B (Ollama)</option>
        </select>
    </div>

    <!-- System prompt -->
    <div style="margin-bottom:10px" title="System prompt sent to the LLM on every request.&#10;&#10;Good prompt structure:&#10;1. Role: 'You are an expert...'&#10;2. Rules: RULES/CRITICAL RULES as list&#10;3. Examples: EXAMPLE OUTPUT&#10;4. Restrictions: NEVER-list&#10;">
        <label style="font-size:12px;color:#8b949e;display:block;margin-bottom:4px;cursor:help">System prompt 💡</label>
        <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="Describe the agent's role and behavior..."></textarea>
    </div>

    <!-- Sampling Parameters -->
    <div style="margin-bottom:10px">
        <label style="font-size:12px;color:#8b949e;display:block;margin-bottom:8px">Sampling Parameters</label>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
            <div title="Controls 'creativity'. Low value (0.2-0.4) produces predictable, repeatable code — good for testers and reviewers. Medium value (0.6-0.8) is best for generating code. High value (1.0+) adds variation but also errors.&#10;&#10;Recommendation:&#10;• Manager: 0.5 (precise file lists)&#10;• Coder: 0.7 (working code + variation)&#10;• Tester: 0.3 (deterministic evaluation)">
                <label style="font-size:11px;color:#8b949e;cursor:help">Temperature 💡 <span id="config-temp-val" style="color:var(--accent);float:right">0.7</span></label>
                <input type="range" id="config-temperature" min="0" max="1.5" step="0.1" value="0.7" style="width:100%;accent-color:var(--accent)">
                <div style="font-size:10px;color:#30363d">0=strict · 0.7=default · 1.5=creative</div>
            </div>
            <div title="Maximum response length in tokens (~1 token ≈ 4 chars).&#10;&#10;Recommendation:&#10;• Manager: 256-512 (short lists)&#10;• Coder: 1024-2048 (full files, CRUD endpoints)&#10;• Tester: 256-512 (short evaluations)&#10;&#10;If code cuts off early, increase this.">
                <label style="font-size:11px;color:#8b949e;cursor:help">Max tokens 💡 <span id="config-maxtok-val" style="color:var(--accent);float:right">1024</span></label>
                <input type="range" id="config-maxtokens" min="64" max="4096" step="64" value="1024" style="width:100%;accent-color:var(--accent)">
                <div style="font-size:10px;color:#30363d">Maximum response length</div>
            </div>
            <div title="How many most probable tokens are considered. Low value (1-10) makes response deterministic. High value (50-100) allows rarer words.&#10;&#10;Recommendation:&#10;• Boilerplate code: 20-30 (familiar patterns)&#10;• General code: 40 (good default)&#10;• Creative text: 60-80">
                <label style="font-size:11px;color:#8b949e;cursor:help">Top-K 💡 <span id="config-topk-val" style="color:var(--accent);float:right">40</span></label>
                <input type="range" id="config-topk" min="1" max="100" step="1" value="40" style="width:100%;accent-color:var(--accent)">
                <div style="font-size:10px;color:#30363d">1=greedy · 40=default · 100=wide</div>
            </div>
            <div title="Reduces the probability of already generated words. Prevents model from repeating same sentences. Too high value (>1.5) can break code because common keywords (return, if, def) are necessary.&#10;&#10;Recommendation:&#10;• Code: 1.1-1.2 (mild, allows repetition)&#10;• Text: 1.15-1.3 (stronger penalty)&#10;• Review: 1.0-1.1 (no penalty, short answers)">
                <label style="font-size:11px;color:#8b949e;cursor:help">Repetition penalty 💡 <span id="config-rep-val" style="color:var(--accent);float:right">1.15</span></label>
                <input type="range" id="config-repeat" min="1.0" max="2.0" step="0.05" value="1.15" style="width:100%;accent-color:var(--accent)">
                <div style="font-size:10px;color:#30363d">1.0=none · 1.15=default · 2.0=strong</div>
            </div>
        </div>
    </div>

    <!-- Pipeline order -->
    <div>
        <label style="font-size:12px;color:#8b949e;display:block;margin-bottom:4px">Pipeline Order <span style="color:var(--border)">(drag to sort)</span></label>
        <div id="config-pipeline" style="display:flex;gap:4px;flex-wrap:wrap"></div>
    </div>
</div>