\n {/* Header */}\n

System Designer

\n Describe your vision and let SOARE's AI architect design the perfect system for you\n

\n\n {/* Example Systems */}\n

Quick Start Examples

\n {exampleSystems.map((example, index) => (\n loadExample(example)}\n className=\"p-4 bg-white/10 rounded-lg hover:bg-white/20 transition-all duration-200 text-left group\"\n >\n

\n {example.name}\n

\n {example.description}\n

Click to load →

\n \n ))}\n

\n\n {/* Design Form */}\n

\n {/* System Description */}\n

\n \n System Description *\n \n handleInputChange('description', e.target.value)}\n onBlur={getSuggestions}\n placeholder=\"Describe your system in detail. What does it do? Who uses it? What are the key features?\"\n className=\"w-full h-32 px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent resize-none\"\n />\n

\n Be specific about functionality, users, and key requirements\n

\n\n {/* AI Suggestions */}\n {aiSuggestions.length > 0 && (\n

💡 AI Suggestions

\n {aiSuggestions.map((suggestion, index) => (\n

\n • {suggestion}\n

\n ))}\n

\n )}\n\n {/* Goals */}\n

\n \n System Goals *\n \n

\n {formData.goals.map((goal, index) => (\n

\n handleArrayChange('goals', index, e.target.value)}\n placeholder=\"e.g., Handle 10,000 concurrent users\"\n className=\"flex-1 px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n {formData.goals.length > 1 && (\n removeArrayItem('goals', index)}\n className=\"text-red-400 hover:text-red-300 p-2\"\n >\n ✕\n \n )}\n

\n ))}\n addArrayItem('goals')}\n className=\"text-blue-300 hover:text-blue-200 text-sm\"\n >\n + Add Goal\n \n

\n\n {/* Constraints */}\n

\n \n Constraints (Optional)\n \n

\n {formData.constraints?.map((constraint, index) => (\n

\n handleArrayChange('constraints', index, e.target.value)}\n placeholder=\"e.g., Budget under $5000/month\"\n className=\"flex-1 px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n removeArrayItem('constraints', index)}\n className=\"text-red-400 hover:text-red-300 p-2\"\n >\n ✕\n \n

\n ))}\n addArrayItem('constraints')}\n className=\"text-blue-300 hover:text-blue-200 text-sm\"\n >\n + Add Constraint\n \n

\n\n {/* Preferences */}\n

\n \n Architecture Style\n \n handleInputChange('preferences', {\n ...formData.preferences,\n architecture: e.target.value\n })}\n className=\"w-full px-4 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 \n Expected Scale\n \n handleInputChange('preferences', {\n ...formData.preferences,\n scalability: e.target.value as any\n })}\n className=\"w-full px-4 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 {/* Technology Preferences */}\n

\n \n Preferred Technologies (Optional)\n \n handleInputChange('preferences', {\n ...formData.preferences,\n technology: e.target.value.split(',').map(t => t.trim()).filter(Boolean)\n })}\n placeholder=\"e.g., TypeScript, React, PostgreSQL, Docker\"\n className=\"w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n

\n Comma-separated list of technologies you prefer\n

\n\n {/* Design Button */}\n

\n \n {loading ? (\n \n

\n Designing System...\n \n ) : (\n \n 🎨\n Design My System\n \n )}\n \n

\n\n {/* Design Process Visualization */}\n {designPhase === 'generating' && (\n

🧠

SOARE is designing your system...

\n Analyzing requirements\n

\n Selecting optimal architecture\n

\n Generating component specifications\n

\n )}\n

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