\n {/* Header */}\n

Simulation Engine

\n Test, validate, and optimize your systems with high-fidelity simulations\n

\n\n

\n {/* Simulation Creation */}\n

Create Simulation

\n \n

\n {/* System Selection */}\n

\n Target System\n setSelectedSystem(e.target.value)}\n className=\"w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-400\"\n >\n \n {systems.map((system) => (\n \n ))}\n \n

\n\n {/* Simulation Type */}\n

\n Simulation Type\n

\n {[\n { id: 'system', label: 'System Behavior', desc: 'Test overall system performance' },\n { id: 'load_test', label: 'Load Testing', desc: 'Stress test with various load patterns' },\n { id: 'user_behavior', label: 'User Behavior', desc: 'Simulate real user interactions' }\n ].map((type) => (\n setSimulationType(type.id as any)}\n className={`w-full p-3 rounded-lg text-left transition-all duration-200 ${\n simulationType === type.id\n ? 'bg-white/20 border border-white/30'\n : 'bg-white/10 hover:bg-white/15'\n }`}\n >\n

{type.label}

{type.desc}

\n \n ))}\n

\n\n {/* Load Pattern (for load testing) */}\n {simulationType === 'load_test' && (\n

\n Load Pattern\n setLoadPattern(e.target.value as any)}\n className=\"w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-400\"\n >\n \n \n \n \n \n

\n )}\n\n {/* Create Button */}\n \n {loading ? (\n \n

\n Creating...\n \n ) : (\n \n 🎮\n Create Simulation\n \n )}\n \n

\n\n {/* Active Simulations */}\n

Active Simulations

\n {simulations.filter(s => s.running).map((simulation) => (\n \n

\n {getSimulationIcon(simulation.type)}\n

{simulation.name}

{simulation.type.replace('_', ' ')}

\n stopSimulation(simulation)}\n className=\"px-2 py-1 bg-red-500 hover:bg-red-600 text-white text-xs rounded transition-colors\"\n >\n Stop\n \n

\n ))}\n \n {simulations.filter(s => s.running).length === 0 && (\n

\n No active simulations\n

\n )}\n

\n\n {/* Simulation Details and Results */}\n

\n {selectedSimulation ? (\n

\n {/* Simulation Control */}\n

{selectedSimulation.name}

{selectedSimulation.type.replace('_', ' ')}

\n \n

\n {!selectedSimulation.running ? (\n startSimulation(selectedSimulation)}\n disabled={loading}\n className=\"px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg transition-colors disabled:opacity-50\"\n >\n ▶️ Start\n \n ) : (\n stopSimulation(selectedSimulation)}\n disabled={loading}\n className=\"px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors disabled:opacity-50\"\n >\n ⏹️ Stop\n \n )}\n

\n\n {/* Simulation Parameters */}\n

\n {Object.entries(selectedSimulation.parameters).map(([key, value]) => (\n

{key.replace(/([A-Z])/g, ' $1')}

\n {typeof value === 'object' ? JSON.stringify(value) : String(value)}\n

\n ))}\n

\n\n {/* Real-time Visualization */}\n {selectedSimulation.running && (\n

Real-time Metrics

\n {Math.floor(Math.random() * 1000) + 500}\n

Requests/sec

\n \n

\n {Math.floor(Math.random() * 100) + 50}ms\n

Avg Latency

\n \n

\n {(Math.random() * 2).toFixed(2)}%\n

Error Rate

\n\n {/* Live Activity Feed */}\n

Activity Feed

[{new Date().toLocaleTimeString()}] Simulation started

[{new Date().toLocaleTimeString()}] Load generators activated

[{new Date().toLocaleTimeString()}] Peak load reached

[{new Date().toLocaleTimeString()}] Monitoring performance...

\n )}\n\n {/* Results */}\n {simulationResults && (\n

Simulation Results

\n \n

Performance Metrics

\n {Object.entries(simulationResults.metrics).map(([key, values]) => (\n

\n {key.replace(/([A-Z])/g, ' $1')}\n \n {Array.isArray(values) ? values[values.length - 1]?.toFixed(2) : values}\n \n

\n ))}\n

\n\n

Insights & Recommendations

\n {simulationResults.insights.map((insight, index) => (\n

\n 💡\n {insight}\n

\n ))}\n

\n\n

Recommendations

\n {simulationResults.recommendations.map((rec, index) => (\n

\n ✅\n {rec}\n

\n ))}\n

\n\n

\n Simulation completed in {simulationResults.duration.toFixed(1)} seconds\n • {simulationResults.iterations} iterations\n

\n )}\n

\n ) : (\n /* No Simulation Selected */\n

🎮

No Simulation Selected

\n Create a new simulation or select an existing one to view details and results\n

\n\n {/* Recent Simulations */}\n {simulations.length > 0 && (\n

Recent Simulations

\n {simulations.slice(0, 4).map((simulation) => (\n setSelectedSimulation(simulation)}\n className=\"p-4 bg-white/10 rounded-lg hover:bg-white/20 transition-all duration-200 text-left\"\n >\n

\n \n {getSimulationIcon(simulation.type)}\n \n

{simulation.name}

{simulation.type.replace('_', ' ')}

\n {simulation.running ? 'Running' : 'Stopped'}\n

\n \n ))}\n

\n )}\n

\n \n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/sexy606ai/SOARE/code/frontend/components/SimulationView.tsx","extension","actionData","errors"]