feat(ui): support unlimited agents with scalable terminal grid and scrollable settings

backend/config.py

@@ -20,31 +20,59 @@ class Settings:
     OLLAMA_BASE_URL = os.getenv("OLLAMA_BASE_URL", "http://localhost:11434/v1")
     OLLAMA_API_KEY = os.getenv("OLLAMA_API_KEY", "ollama")
 
-    # AGENTS (Dynamic N-Agent Support)
+    # AGENTS (Dynamic N-Agent Support - supports unlimited agents)
     import json
-    _default_agents = [
-        {
-            "id": "agent_a",
-            "model": os.getenv("AGENT_A_MODEL", ""),
-            "provider": os.getenv("AGENT_A_PROVIDER", "ollama"),
-            "role": os.getenv("AGENT_A_ROLE", "INVESTIGATOR"),
-            "system_prompt": os.getenv("AGENT_A_SYSTEM_PROMPT", ""),
-            "temperature": float(os.getenv("AGENT_A_TEMPERATURE", "0.8"))
-        },
-        {
-            "id": "agent_b",
-            "model": os.getenv("AGENT_B_MODEL", ""),
-            "provider": os.getenv("AGENT_B_PROVIDER", "ollama"),
-            "role": os.getenv("AGENT_B_ROLE", "VALIDATOR"),
-            "system_prompt": os.getenv("AGENT_B_SYSTEM_PROMPT", ""),
-            "temperature": float(os.getenv("AGENT_B_TEMPERATURE", "0.6"))
-        }
-    ]
+    _built_in_roles = ["INVESTIGATOR", "VALIDATOR", "FORENSIC_ANALYST", "NETWORK_ENGINEER", "SYSTEM_ADMIN", "SECURITY_ARCHITECT", "COMPLIANCE_OFFICER"]
+    _default_roles = ["INVESTIGATOR", "VALIDATOR", "FORENSIC_ANALYST", "NETWORK_ENGINEER"]
+    
+    def _build_agents_from_env():
+        agents = []
+        suffix_map = {'a': 0, 'b': 1, 'c': 2, 'd': 3, 'e': 4, 'f': 5, 'g': 6, 'h': 7, 'i': 8, 'j': 9}
+        for suffix, idx in suffix_map.items():
+            model_key = f"AGENT_{suffix.upper()}_MODEL"
+            provider_key = f"AGENT_{suffix.upper()}_PROVIDER"
+            role_key = f"AGENT_{suffix.upper()}_ROLE"
+            prompt_key = f"AGENT_{suffix.upper()}_SYSTEM_PROMPT"
+            temp_key = f"AGENT_{suffix.upper()}_TEMPERATURE"
+            
+            model = os.getenv(model_key, "")
+            if model:
+                role_idx = idx % len(_default_roles)
+                agents.append({
+                    "id": f"agent_{suffix}",
+                    "model": model,
+                    "provider": os.getenv(provider_key, "ollama"),
+                    "role": os.getenv(role_key, _default_roles[role_idx]),
+                    "system_prompt": os.getenv(prompt_key, ""),
+                    "temperature": float(os.getenv(temp_key, str(0.7 - idx * 0.05)))
+                })
+        
+        if not agents:
+            agents = [
+                {
+                    "id": "agent_a",
+                    "model": os.getenv("AGENT_A_MODEL", "meta-llama/Llama-3.1-8B-Instruct"),
+                    "provider": os.getenv("AGENT_A_PROVIDER", "hf"),
+                    "role": "INVESTIGATOR",
+                    "system_prompt": "",
+                    "temperature": 0.7
+                },
+                {
+                    "id": "agent_b",
+                    "model": os.getenv("AGENT_B_MODEL", "meta-llama/Llama-3.2-1B-Instruct"),
+                    "provider": os.getenv("AGENT_B_PROVIDER", "hf"),
+                    "role": "VALIDATOR",
+                    "system_prompt": "",
+                    "temperature": 0.6
+                }
+            ]
+        return agents
+    
     try:
         AGENTS_JSON = os.getenv("AGENTS_JSON")
-        AGENTS = json.loads(AGENTS_JSON) if AGENTS_JSON else _default_agents
+        AGENTS = json.loads(AGENTS_JSON) if AGENTS_JSON else _build_agents_from_env()
     except:
-        AGENTS = _default_agents
+        AGENTS = _build_agents_from_env()
     # EXECUTION ENVIRONMENT
     EXECUTION_MODE = os.getenv("EXECUTION_MODE", "simulated")
     SSH_HOST = os.getenv("SSH_HOST", "")

backend/core/agent_runner.py

@@ -92,19 +92,33 @@ class AgentRunner:
             sys_prompt = behavior + "\n\n" + tool_rules
 
         context = f"Current incident: {scenario.get('description', '')}\n"
-        if hasattr(episode_state, 'last_partner_message') and episode_state.last_partner_message:
-            context += f"Partner's last message: {episode_state.last_partner_message}\n"
+        
+        other_agents = [a["id"] for a in settings.AGENTS if a["id"] != agent_id]
+        if other_agents:
+            context += f"Other agents in this investigation: {', '.join(other_agents)}\n"
+        
+        agent_configs = {a["id"]: a for a in settings.AGENTS}
+        for other_id in other_agents:
+            other_msgs = episode_state.messages_by_agent.get(other_id, [])
+            if other_msgs:
+                other_role = agent_configs.get(other_id, {}).get("role", "AGENT")
+                last_msg = other_msgs[-1] if other_msgs else ""
+                context += f"\n[{other_role}] {other_id}'s latest insight: {last_msg[:300]}...\n"
+        
         if hasattr(episode_state, 'clues_found') and episode_state.clues_found:
-            context += f"Clues found: {episode_state.clues_found}\n"
+            context += f"\nClues discovered so far:\n"
+            for clue in episode_state.clues_found[-5:]:
+                context += f"- {clue[:200]}\n"
         
         messages = [{"role": "system", "content": sys_prompt}]
         
-        if hasattr(episode_state, 'all_messages'):
-            all_msgs = episode_state.all_messages[-3:]
-            if all_msgs:
-                context += "\nRecent history:\n"
-                for m in all_msgs:
-                    context += f"- {m}\n"
+        recent_msgs = episode_state.all_messages[-6:]
+        if recent_msgs:
+            context += "\nRecent conversation history:\n"
+            for i, m in enumerate(recent_msgs[-4:]):
+                if len(m) > 150:
+                    m = m[:150] + "..."
+                context += f"- {m}\n"
                 
         messages.append({"role": "user", "content": context})
         

default.env

@@ -13,16 +13,28 @@ OPENAI_API_KEY=
 OPENAI_BASE_URL=https://api.openai.com/v1
 
 # AGENTS - HuggingFace models (work with HF Inference API)
+# Supports agents a through j (10 agents max via env vars)
+# Additional agents can be configured via AGENTS_JSON env var
 AGENT_A_MODEL=meta-llama/Llama-3.1-8B-Instruct
 AGENT_B_MODEL=meta-llama/Llama-3.2-1B-Instruct
+AGENT_C_MODEL=
+AGENT_D_MODEL=
 AGENT_A_PROVIDER=hf
 AGENT_B_PROVIDER=hf
+AGENT_C_PROVIDER=hf
+AGENT_D_PROVIDER=hf
 AGENT_A_ROLE=INVESTIGATOR
 AGENT_B_ROLE=VALIDATOR
+AGENT_C_ROLE=FORENSIC_ANALYST
+AGENT_D_ROLE=NETWORK_ENGINEER
 AGENT_A_TEMPERATURE=0.7
-AGENT_B_TEMPERATURE=0.5
+AGENT_B_TEMPERATURE=0.6
+AGENT_C_TEMPERATURE=0.5
+AGENT_D_TEMPERATURE=0.5
 AGENT_A_MAX_TOKENS=512
 AGENT_B_MAX_TOKENS=512
+AGENT_C_MAX_TOKENS=512
+AGENT_D_MAX_TOKENS=512
 
 # EXECUTION ENVIRONMENT
 EXECUTION_MODE=simulated

frontend/src/components/EpisodeEndOverlay.jsx

@@ -6,10 +6,9 @@ const EpisodeEndOverlay = ({ isOpen, onClose, metrics, gameState }) => {
     const handleDownload = () => {
         if (!gameState) return;
 
-        // Assemble the detailed incident report
         const sc = gameState.scenario || {};
-        const agentA = gameState.agents?.agent_a?.messages || [];
-        const agentB = gameState.agents?.agent_b?.messages || [];
+        const allAgents = gameState.agents || {};
+        const allMessages = Object.values(allAgents).flatMap(a => a?.messages || []);
 
         let report = `=================================================================\n`;
         report += `                  NEXUS INCIDENT INVESTIGATION REPORT            \n`;
@@ -20,7 +19,17 @@ const EpisodeEndOverlay = ({ isOpen, onClose, metrics, gameState }) => {
         report += `Domain:          ${sc.domain || 'N/A'}\n`;
         report += `Difficulty:      ${sc.difficulty || 'N/A'}\n`;
         report += `Final Grading Score: ${Number(gameState?.cumulativeReward || metrics?.score || 0).toFixed(4)} / 1.00\n`;
-        report += `Total Steps:     ${gameState?.step || metrics?.steps || 'N/A'}\n\n`;
+        report += `Total Steps:     ${gameState?.step || metrics?.steps || 'N/A'}\n`;
+        report += `Active Agents:   ${Object.keys(allAgents).length}\n\n`;
+        
+        report += `[ AGENTS DEPLOYED ]\n`;
+        Object.entries(allAgents).forEach(([agentId, agentData], idx) => {
+            const msgs = agentData?.messages || [];
+            const msgCount = msgs.filter(m => m.type === 'message').length;
+            const toolCount = msgs.filter(m => m.type === 'tool_call').length;
+            report += `${idx + 1}. ${agentId}: ${msgCount} messages, ${toolCount} tool calls\n`;
+        });
+        report += `\n`;
         
         report += `[ STEP REWARDS ]\n`;
         if (gameState?.rewardHistory && gameState.rewardHistory.length > 0) {
@@ -52,13 +61,10 @@ const EpisodeEndOverlay = ({ isOpen, onClose, metrics, gameState }) => {
         report += `[ INVESTIGATION LOG & DETAILED TRACE ]\n`;
         report += `=================================================================\n\n`;
 
-        // Interweave the messages to show the timeline (roughly)
-        // Since we don't have exact timestamps, we'll just print Agent A then Agent B summary,
-        // or just print all tools called and errors encountered.
         const allErrors = [];
         const allTools = [];
 
-        [...agentA, ...agentB].forEach(msg => {
+        allMessages.forEach(msg => {
             if (msg.type === 'tool_call') {
                 allTools.push(`- ${msg.tool_name}(${JSON.stringify(msg.params)})`);
             }
@@ -66,7 +72,6 @@ const EpisodeEndOverlay = ({ isOpen, onClose, metrics, gameState }) => {
                 allErrors.push(`- Error from ${msg.tool_name}: ${msg.result}`);
             }
             if (msg.type === 'tool_result' && msg.result?.toLowerCase().includes('error')) {
-                // Catch strings that say error but were marked success true somehow
                 allErrors.push(`- Log/Cmd Error: ${msg.result}`);
             }
         });
@@ -222,70 +227,42 @@ const EpisodeEndOverlay = ({ isOpen, onClose, metrics, gameState }) => {
                         {/* Right Column: Agent Metrics */}
                         <div className="space-y-6">
                             <h3 className="font-mono text-[10px] text-outline tracking-widest uppercase mb-4">Agent Performance Breakdown</h3>
-                            {/* Agent A */}
-                            <div className="relative group">
-                                <div className="absolute -left-4 top-0 bottom-0 w-1 bg-primary shadow-[0_0_8px_rgba(0,212,255,0.4)]"></div>
-                                <div className="bg-surface-container-low/40 p-5 space-y-4 border border-white/5 rounded-r-lg">
-                                    <div className="flex justify-between items-center">
-                                        <span className="font-headline font-bold text-primary tracking-tighter uppercase">Agent_Alpha</span>
-                                        <span className="font-mono text-[10px] text-primary/50">CYAN_PROTOCOL</span>
-                                    </div>
-                                    {(() => {
-                                        const msgs = gameState?.agents?.agent_a?.messages || [];
-                                        const msgCount = msgs.filter(m => m.type === 'message').length;
-                                        const toolCount = msgs.filter(m => m.type === 'tool_call').length;
-                                        const errCount = msgs.filter(m => m.type === 'tool_result' && m.result?.toLowerCase().includes('error')).length;
-                                        return (
-                                            <div className="grid grid-cols-3 gap-2 text-center">
-                                                <div>
-                                                    <span className="font-mono text-[9px] text-outline flex flex-col items-center justify-center gap-1 uppercase"><span className="material-symbols-outlined text-[12px]">chat</span> MSGS</span>
-                                                    <span className="font-headline text-lg font-medium text-primary">{msgCount}</span>
-                                                </div>
-                                                <div className="border-x border-white/5">
-                                                    <span className="font-mono text-[9px] text-outline flex flex-col items-center justify-center gap-1 uppercase"><span className="material-symbols-outlined text-[12px]">build</span> TOOLS</span>
-                                                    <span className="font-headline text-lg font-medium text-primary">{toolCount}</span>
-                                                </div>
-                                                <div>
-                                                    <span className="font-mono text-[9px] text-outline flex flex-col items-center justify-center gap-1 uppercase"><span className="material-symbols-outlined text-[12px]">warning</span> ERRS</span>
-                                                    <span className="font-headline text-lg font-medium text-primary">{errCount}</span>
-                                                </div>
+                            {Object.entries(gameState?.agents || {}).map(([agentId, agentData], idx) => {
+                                const colors = ['primary', 'secondary', 'tertiary', 'error', 'success'];
+                                const color = colors[idx % colors.length];
+                                const msgs = agentData?.messages || [];
+                                const msgCount = msgs.filter(m => m.type === 'message').length;
+                                const toolCount = msgs.filter(m => m.type === 'tool_call').length;
+                                const errCount = msgs.filter(m => m.type === 'tool_result' && m.result?.toLowerCase().includes('error')).length;
+                                const agentNames = ['ALPHA', 'BRAVO', 'CHARLIE', 'DELTA', 'ECHO'];
+                                const agentName = agentNames[idx % agentNames.length];
+                                
+                                return (
+                                    <div key={agentId} className="relative group">
+                                        <div className={`absolute -left-4 top-0 bottom-0 w-1 bg-${color} shadow-[0_0_8px_rgba(var(--${color}),0.4)]`}></div>
+                                        <div className="bg-surface-container-low/40 p-5 space-y-4 border border-white/5 rounded-r-lg">
+                                            <div className="flex justify-between items-center">
+                                                <span className={`font-headline font-bold text-${color} tracking-tighter uppercase`}>Agent_{agentName}</span>
+                                                <span className={`font-mono text-[10px] text-${color}/50`}>{agentId.toUpperCase()}</span>
                                             </div>
-                                        );
-                                    })()}
-                                </div>
-                            </div>
-                            {/* Agent B */}
-                            <div className="relative group">
-                                <div className="absolute -left-4 top-0 bottom-0 w-1 bg-secondary shadow-[0_0_8px_rgba(221,183,255,0.4)]"></div>
-                                <div className="bg-surface-container-low/40 p-5 space-y-4 border border-white/5 rounded-r-lg">
-                                    <div className="flex justify-between items-center">
-                                        <span className="font-headline font-bold text-secondary tracking-tighter uppercase">Agent_Bravo</span>
-                                        <span className="font-mono text-[10px] text-secondary/50">VIOLET_PROTOCOL</span>
-                                    </div>
-                                    {(() => {
-                                        const msgs = gameState?.agents?.agent_b?.messages || [];
-                                        const msgCount = msgs.filter(m => m.type === 'message').length;
-                                        const toolCount = msgs.filter(m => m.type === 'tool_call').length;
-                                        const errCount = msgs.filter(m => m.type === 'tool_result' && m.result?.toLowerCase().includes('error')).length;
-                                        return (
                                             <div className="grid grid-cols-3 gap-2 text-center">
                                                 <div>
                                                     <span className="font-mono text-[9px] text-outline flex flex-col items-center justify-center gap-1 uppercase"><span className="material-symbols-outlined text-[12px]">chat</span> MSGS</span>
-                                                    <span className="font-headline text-lg font-medium text-secondary">{msgCount}</span>
+                                                    <span className={`font-headline text-lg font-medium text-${color}`}>{msgCount}</span>
                                                 </div>
                                                 <div className="border-x border-white/5">
                                                     <span className="font-mono text-[9px] text-outline flex flex-col items-center justify-center gap-1 uppercase"><span className="material-symbols-outlined text-[12px]">build</span> TOOLS</span>
-                                                    <span className="font-headline text-lg font-medium text-secondary">{toolCount}</span>
+                                                    <span className={`font-headline text-lg font-medium text-${color}`}>{toolCount}</span>
                                                 </div>
                                                 <div>
                                                     <span className="font-mono text-[9px] text-outline flex flex-col items-center justify-center gap-1 uppercase"><span className="material-symbols-outlined text-[12px]">warning</span> ERRS</span>
-                                                    <span className="font-headline text-lg font-medium text-secondary">{errCount}</span>
+                                                    <span className={`font-headline text-lg font-medium text-${color}`}>{errCount}</span>
                                                 </div>
                                             </div>
-                                        );
-                                    })()}
-                                </div>
-                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            })}
                         </div>
                     </div>
 
@@ -320,39 +297,38 @@ const EpisodeEndOverlay = ({ isOpen, onClose, metrics, gameState }) => {
                         );
                     })()}
 
-                    {/* Dual Agent Final Verdict Panel */}
+                    {/* Multi-Agent Final Verdict Panel */}
                     {(() => {
-                        const msgsA = gameState?.agents?.agent_a?.messages || [];
-                        const msgsB = gameState?.agents?.agent_b?.messages || [];
-
-                        const textMsgsA = msgsA.filter(m => m.type === 'message');
-                        const textMsgsB = msgsB.filter(m => m.type === 'message');
-
-                        const lastMsgA = textMsgsA[textMsgsA.length - 1];
-                        const lastMsgB = textMsgsB[textMsgsB.length - 1];
-
-                        if (!lastMsgA && !lastMsgB) return null;
+                        const allAgents = gameState?.agents || {};
+                        const agentEntries = Object.entries(allAgents);
+                        const conclusions = agentEntries.map(([agentId, agentData]) => {
+                            const msgs = agentData?.messages || [];
+                            const textMsgs = msgs.filter(m => m.type === 'message');
+                            return { agentId, lastMsg: textMsgs[textMsgs.length - 1] };
+                        }).filter(c => c.lastMsg);
+                        
+                        if (conclusions.length === 0) return null;
+                        
+                        const colors = ['primary', 'secondary', 'tertiary', 'error', 'success'];
 
                         return (
                             <div className="px-8 pb-8">
                                 <div className="p-6 bg-surface-container-low/40 border border-white/10 rounded-lg">
                                     <h3 className="font-headline font-bold text-on-surface tracking-widest uppercase mb-4 flex items-center gap-2">
                                         <span className="material-symbols-outlined">gavel</span>
-                                        Dual Agent Final Verdict
+                                        Multi-Agent Final Verdict
                                     </h3>
                                     <div className="space-y-4">
-                                        {lastMsgA && (
-                                            <div className="p-4 bg-primary/5 border-l-2 border-primary rounded-r">
-                                                <span className="font-mono text-[10px] text-primary uppercase block mb-1 tracking-widest">Agent Alpha Conclusion</span>
-                                                <p className="text-sm text-on-surface/90 leading-relaxed">{lastMsgA.content || lastMsgA.text || lastMsgA.message}</p>
-                                            </div>
-                                        )}
-                                        {lastMsgB && (
-                                            <div className="p-4 bg-secondary/5 border-l-2 border-secondary rounded-r">
-                                                <span className="font-mono text-[10px] text-secondary uppercase block mb-1 tracking-widest">Agent Bravo Conclusion</span>
-                                                <p className="text-sm text-on-surface/90 leading-relaxed">{lastMsgB.content || lastMsgB.text || lastMsgB.message}</p>
-                                            </div>
-                                        )}
+                                        {conclusions.map(({ agentId, lastMsg }, idx) => {
+                                            const color = colors[idx % colors.length];
+                                            const agentNames = ['ALPHA', 'BRAVO', 'CHARLIE', 'DELTA', 'ECHO'];
+                                            return (
+                                                <div key={agentId} className={`p-4 bg-${color}/5 border-l-2 border-${color} rounded-r`}>
+                                                    <span className={`font-mono text-[10px] text-${color} uppercase block mb-1 tracking-widest`}>Agent {agentNames[idx % agentNames.length]} ({agentId}) Conclusion</span>
+                                                    <p className="text-sm text-on-surface/90 leading-relaxed">{lastMsg.content || lastMsg.text || lastMsg.message}</p>
+                                                </div>
+                                            );
+                                        })}
                                     </div>
                                 </div>
                             </div>

frontend/src/hooks/useWebSocket.js

@@ -9,8 +9,6 @@ const useWebSocket = (url) => {
         step: 0,
         reward: 0,
         cumulativeReward: 0,
-        agent_a_model: '',
-        agent_b_model: '',
         agents: {},
         clues_found: [],
         rewardBreakdown: {},

frontend/src/views/DashboardView.jsx

@@ -141,9 +141,7 @@ const DashboardView = () => {
         active: false,
         step: 0,
         cumulativeReward: 0,
-        messages_by_agent: {
-            agent_a: []
-        }
+        agents: {}
     };
 
     const sc = state.scenario || {};
@@ -219,20 +217,31 @@ const DashboardView = () => {
             </div>
 
             {/* N-Agent Terminals */}
-            <div className={`grid grid-cols-1 ${configModels.agents.length > 2 ? 'lg:grid-cols-3' : 'lg:grid-cols-2'} gap-6`}>
+            <div className={`grid grid-cols-1 ${
+                configModels.agents.length === 1 ? 'lg:grid-cols-1' :
+                configModels.agents.length === 2 ? 'lg:grid-cols-2' :
+                configModels.agents.length === 3 ? 'lg:grid-cols-3' :
+                configModels.agents.length === 4 ? 'lg:grid-cols-2' :
+                configModels.agents.length <= 6 ? 'lg:grid-cols-3' : 'lg:grid-cols-4'
+            } gap-6 overflow-y-auto max-h-[80vh] custom-scrollbar pr-2`}>
                 {configModels.agents.map((agent, index) => {
-                    const isPrimary = index % 2 === 0;
-                    const accentColor = isPrimary ? 'cyan' : 'purple';
-                    // We don't have agent specific status tracked deeply beyond STANDBY/ACTIVE globally right now
-                    // We deduce messages from state.agents
+                    const colors = ['cyan', 'purple', 'green', 'orange', 'pink', 'yellow', 'red', 'blue'];
+                    const accentColor = colors[index % colors.length];
                     const messages = state.agents?.[agent.id]?.messages || [];
                     const agentStatus = state.active ? 'ACTIVE' : 'STANDBY';
-                    const icon = agent.role.includes('VALIDATOR') ? 'verified_user' : 'search';
+                    const icon = agent.role?.includes('VALIDATOR') ? 'verified_user' : 'search';
+                    
+                    // Scalable naming: ALPHA, BRAVO... then AA, AB...
+                    const agentNames = ['ALPHA', 'BRAVO', 'CHARLIE', 'DELTA', 'ECHO', 'FOXTROT', 'GOLF', 'HOTEL', 'INDIA', 'JULIETT', 'KILO', 'LIMA', 'MIKE', 'NOVEMBER', 'OSCAR', 'PAPA', 'QUEBEC', 'ROMEO', 'SIERRA', 'TANGO', 'UNIFORM', 'VICTOR', 'WHISKEY', 'X-RAY', 'YANKEE', 'ZULU'];
+                    let name = agentNames[index % agentNames.length];
+                    if (index >= agentNames.length) {
+                        name = `${name}_${Math.floor(index / agentNames.length)}`;
+                    }
 
                     return (
                         <AgentTerminal
                             key={agent.id}
-                            agentName={`Agent ${String.fromCharCode(65 + index)}: ${agent.role.replace(/_/g, ' ')}`}
+                            agentName={`Agent ${name}: ${agent.role?.replace(/_/g, ' ') || 'AGENT'}`}
                             model={agent.model}
                             status={agentStatus}
                             accentColor={accentColor}
@@ -322,11 +331,10 @@ const DashboardView = () => {
                 onClose={() => setIsOverlayDismissed(true)}
                 metrics={{
                     score: Number(state.cumulativeReward || 0).toFixed(2),
-                    runtime: '00:00:00', // could calculate if we tracked start/end time
+                    runtime: '00:00:00',
                     steps: state.step || 0,
                     rootCause: 'VERIFIED',
-                    agentA: { accuracy: 'High', latency: '42ms', iops: '9' },
-                    agentB: { accuracy: 'High', latency: '38ms', iops: '7' }
+                    agentCount: Object.keys(state.agents || {}).length
                 }}
                 gameState={state}
             />

frontend/src/views/SettingsView.jsx

@@ -279,16 +279,17 @@ const SettingsView = () => {
     };
 
     const addAgent = () => {
-        if (agents.length >= 4) return;
-        const newId = `agent_${String.fromCharCode(97 + agents.length)}`;
+        const newId = `agent_${Date.now()}`;
+        const roles = ['INVESTIGATOR', 'VALIDATOR', 'FORENSIC_ANALYST', 'NETWORK_ENGINEER', 'SYSTEM_ADMIN', 'SECURITY_ARCHITECT', 'COMPLIANCE_OFFICER'];
+        const role = roles[agents.length % roles.length];
         setAgents(prev => [...prev, {
-            id: newId, provider: 'hf', model: '', hfModel: 'meta-llama/Llama-3.2-1B-Instruct', openaiModel: 'gpt-4o-mini', temp: 0.5, role: 'INVESTIGATOR', customRoleName: '', customPrompt: ''
+            id: newId, provider: 'hf', model: '', hfModel: 'meta-llama/Llama-3.2-1B-Instruct', openaiModel: 'gpt-4o-mini', temp: Math.max(0.3, 0.7 - agents.length * 0.05), role, customRoleName: '', customPrompt: ''
         }]);
     };
 
     const removeAgent = (index) => {
         if (agents.length <= 1) return;
-        setAgents(prev => prev.filter((_, i) => i !== index).map((a, i) => ({ ...a, id: `agent_${String.fromCharCode(97 + i)}` })));
+        setAgents(prev => prev.filter((_, i) => i !== index));
     };
 
     const ProviderToggle = ({ agent, index }) => (
@@ -322,9 +323,14 @@ const SettingsView = () => {
                 </div>
             </section>
 
-            <div className="grid grid-cols-1 md:grid-cols-12 gap-6 items-stretch">
-                {/* N-Agents Render */}
-                {agents.map((agent, index) => {
+            <div className="md:col-span-12">
+                <div className="flex items-center gap-3 mb-4">
+                    <span className="font-mono text-[10px] tracking-widest text-primary uppercase">Active_Agent_Nodes</span>
+                    <div className="flex-1 h-px bg-primary/10"></div>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-12 gap-6 items-stretch max-h-[1200px] overflow-y-auto pr-2 custom-scrollbar p-1">
+                    {/* N-Agents Render */}
+                    {agents.map((agent, index) => {
                     const isPrimary = index % 2 === 0;
                     const accentColor = isPrimary ? 'primary' : 'secondary';
                     const titleColor = isPrimary ? 'text-primary' : 'text-secondary';
@@ -340,8 +346,8 @@ const SettingsView = () => {
                                 <div className="flex-1">
                                     <div className="flex justify-between items-start">
                                         <div>
-                                            <h3 className="font-headline text-xl font-bold uppercase">Agent {String.fromCharCode(65 + index)} <span className={`${titleColor} text-sm ml-2 tracking-tighter`}>[NPU_0{index + 1}]</span></h3>
-                                            <p className="font-mono text-[10px] text-slate-500 uppercase">Process ID: {agent.id}</p>
+                                            <h3 className="font-headline text-xl font-bold uppercase">{agent.role.replace(/_/g, ' ')} <span className={`${titleColor} text-sm ml-2 tracking-tighter`}>[{agent.id.toUpperCase()}]</span></h3>
+                                            <p className="font-mono text-[10px] text-slate-500 uppercase">Node ID: {agent.id}</p>
                                         </div>
                                         <div className="flex gap-2 items-center">
                                             <ProviderToggle agent={agent} index={index} />
@@ -443,14 +449,15 @@ const SettingsView = () => {
                         </div>
                     );
                 })}
-                {agents.length < 4 && (
-                    <div className="md:col-span-12 flex justify-center mt-4">
-                        <button onClick={addAgent} className="flex items-center gap-2 px-8 py-3 rounded-xl border border-dashed border-outline-variant/30 text-outline-variant font-mono text-xs uppercase hover:bg-surface-container-highest hover:text-white transition-all">
-                            <span className="material-symbols-outlined text-[16px]">add</span>
-                            <span>Add Compute Node (Max 4)</span>
-                        </button>
-                    </div>
-                )}
+                </div>
+            </div>
+
+            <div className="md:col-span-12 flex justify-center mt-4">
+                <button onClick={addAgent} className="flex items-center gap-2 px-8 py-3 rounded-xl border border-dashed border-outline-variant/30 text-outline-variant font-mono text-xs uppercase hover:bg-surface-container-highest hover:text-white transition-all bg-white/5">
+                    <span className="material-symbols-outlined text-[16px]">add</span>
+                    <span>Add Agent Node</span>
+                </button>
+            </div>
 
                 {/* Execution Environment */}
                 <div className="md:col-span-12 glass-panel rounded-xl p-8 refractive-edge">
@@ -593,7 +600,7 @@ const SettingsView = () => {
                 <div className="flex items-center gap-4">
                     <button
                         onClick={() => { 
-                            setAgents([{ id: 'agent_a', provider: 'ollama', model: '', temp: 0.7, role: 'INVESTIGATOR' }]); 
+                            setAgents([{ id: 'agent_default', provider: 'ollama', model: '', temp: 0.7, role: 'INVESTIGATOR', customRoleName: '', customPrompt: '' }]); 
                             setMaxSteps(12); 
                         }}
                         className="px-8 py-3 bg-surface-container-high text-on-surface-variant font-headline font-bold text-sm tracking-widest rounded hover:bg-surface-container-highest hover:text-white transition-all uppercase"