Add Factorio World Management feature to GSM

- Add gsm-frontend to repository (React + Vite + TailwindCSS)
- New "Worlds" tab for Factorio server with:
  - List saved worlds with Start/Delete actions
  - Create new world with full map generation parameters
  - Preset selection (Default, Rich Resources, Rail World, etc.)
  - Save custom configurations as templates
- Show which save will be loaded in Overview tab
- Lock world management while server is running
- Backend changes deployed to server separately

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

gsm-frontend/src/components/FactorioWorldManager.jsx

@@ -0,0 +1,331 @@
+import { useState, useEffect } from 'react'
+import {
+  getFactorioSaves,
+  getFactorioPresets,
+  getFactorioPreset,
+  getFactorioTemplates,
+  createFactorioTemplate,
+  deleteFactorioTemplate,
+  createFactorioWorld,
+  deleteFactorioSave,
+  serverAction
+} from '../api'
+import WorldGenForm from './WorldGenForm'
+
+export default function FactorioWorldManager({ server, token, onServerAction }) {
+  const [saves, setSaves] = useState([])
+  const [templates, setTemplates] = useState([])
+  const [presets, setPresets] = useState([])
+  const [defaultSettings, setDefaultSettings] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [showCreateWorld, setShowCreateWorld] = useState(false)
+  const [newWorldName, setNewWorldName] = useState('')
+  const [worldSettings, setWorldSettings] = useState(null)
+  const [creating, setCreating] = useState(false)
+  const [deleteConfirm, setDeleteConfirm] = useState(null)
+  const [actionLoading, setActionLoading] = useState(null)
+
+  const fetchData = async () => {
+    try {
+      setLoading(true)
+      const [savesData, presetsData, templatesData] = await Promise.all([
+        getFactorioSaves(token),
+        getFactorioPresets(token),
+        getFactorioTemplates(token)
+      ])
+      setSaves(savesData.saves || [])
+      setPresets(presetsData.presets || [])
+      setDefaultSettings(presetsData.defaultSettings)
+      setWorldSettings(presetsData.defaultSettings)
+      setTemplates(templatesData.templates || [])
+      setError('')
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, [token])
+
+  const handleLoadPreset = async (presetName) => {
+    try {
+      const data = await getFactorioPreset(token, presetName)
+      setWorldSettings(data.settings)
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  const handleLoadTemplate = (templateId) => {
+    const template = templates.find(t => t.id === templateId)
+    if (template) {
+      setWorldSettings(template.settings)
+    }
+  }
+
+  const handleSaveTemplate = async (name) => {
+    try {
+      await createFactorioTemplate(token, name, worldSettings)
+      const templatesData = await getFactorioTemplates(token)
+      setTemplates(templatesData.templates || [])
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  const handleDeleteTemplate = async (id) => {
+    try {
+      await deleteFactorioTemplate(token, id)
+      setTemplates(templates.filter(t => t.id !== id))
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  const handleCreateWorld = async () => {
+    if (!newWorldName.trim()) {
+      setError('World name is required')
+      return
+    }
+
+    if (!/^[a-zA-Z0-9_-]+$/.test(newWorldName)) {
+      setError('World name can only contain letters, numbers, hyphens and underscores')
+      return
+    }
+
+    try {
+      setCreating(true)
+      setError('')
+      await createFactorioWorld(token, newWorldName, worldSettings)
+      setShowCreateWorld(false)
+      setNewWorldName('')
+      setWorldSettings(defaultSettings)
+      await fetchData()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  const handleStartWithSave = async (saveName) => {
+    try {
+      setActionLoading(saveName)
+      await serverAction(token, server.id, 'start', { save: saveName })
+      if (onServerAction) onServerAction()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const handleDeleteSave = async (saveName) => {
+    try {
+      setActionLoading(saveName)
+      await deleteFactorioSave(token, saveName)
+      setDeleteConfirm(null)
+      await fetchData()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="text-neutral-400">Loading world data...</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {error && (
+        <div className="alert alert-error">
+          {error}
+        </div>
+      )}
+
+      {/* Create World Modal */}
+      {showCreateWorld && (
+        <div className="modal-backdrop" onClick={() => !creating && setShowCreateWorld(false)}>
+          <div className="modal max-w-3xl fade-in-scale" onClick={e => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3 className="modal-title">Create New World</h3>
+              <button
+                onClick={() => !creating && setShowCreateWorld(false)}
+                disabled={creating}
+                className="btn btn-ghost p-1"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div className="modal-body">
+              <div className="form-group">
+                <label className="form-label">World Name</label>
+                <input
+                  type="text"
+                  value={newWorldName}
+                  onChange={(e) => setNewWorldName(e.target.value)}
+                  placeholder="my-new-world"
+                  disabled={creating}
+                  className="input"
+                />
+              </div>
+
+              <WorldGenForm
+                settings={worldSettings}
+                onSettingsChange={setWorldSettings}
+                presets={presets}
+                templates={templates}
+                onLoadPreset={handleLoadPreset}
+                onLoadTemplate={handleLoadTemplate}
+                onSaveTemplate={handleSaveTemplate}
+              />
+            </div>
+
+            <div className="modal-footer">
+              <button
+                onClick={() => setShowCreateWorld(false)}
+                disabled={creating}
+                className="btn btn-secondary"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleCreateWorld}
+                disabled={creating || !newWorldName.trim()}
+                className="btn btn-primary"
+              >
+                {creating ? 'Creating...' : 'Create World'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Delete Confirmation Modal */}
+      {deleteConfirm && (
+        <div className="modal-backdrop" onClick={() => setDeleteConfirm(null)}>
+          <div className="modal max-w-md fade-in-scale" onClick={e => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3 className="modal-title">Delete Save?</h3>
+            </div>
+            <div className="modal-body">
+              <p className="text-neutral-300">
+                Are you sure you want to delete <span className="text-white font-medium">{deleteConfirm}</span>? This action cannot be undone.
+              </p>
+            </div>
+            <div className="modal-footer">
+              <button
+                onClick={() => setDeleteConfirm(null)}
+                className="btn btn-secondary"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => handleDeleteSave(deleteConfirm)}
+                disabled={actionLoading === deleteConfirm}
+                className="btn btn-destructive"
+              >
+                {actionLoading === deleteConfirm ? 'Deleting...' : 'Delete'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium text-neutral-300">Saved Worlds</h3>
+        <button
+          onClick={() => setShowCreateWorld(true)}
+          className="btn btn-primary"
+        >
+          + Create New
+        </button>
+      </div>
+
+      {/* Saves List */}
+      {saves.length === 0 ? (
+        <div className="card p-8 text-center">
+          <div className="text-neutral-400">No saved worlds found</div>
+          <div className="text-neutral-500 text-sm mt-1">Create a new world to get started</div>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {saves.map((save) => (
+            <div
+              key={save.name}
+              className="card p-4 card-clickable"
+            >
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <span className="text-2xl">🌍</span>
+                  <div>
+                    <div className="text-white font-medium">{save.name}</div>
+                    <div className="text-neutral-500 text-xs mt-1">
+                      {save.size} · {save.modified}
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => handleStartWithSave(save.name)}
+                    disabled={actionLoading === save.name || server.running}
+                    className="btn btn-primary text-sm"
+                    title={server.running ? 'Stop server first' : 'Start with this save'}
+                  >
+                    {actionLoading === save.name ? '...' : 'Start'}
+                  </button>
+                  <button
+                    onClick={() => setDeleteConfirm(save.name)}
+                    disabled={actionLoading === save.name}
+                    className="btn btn-ghost text-red-400 hover:text-red-300 hover:bg-red-500/10"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Templates Section */}
+      {templates.length > 0 && (
+        <div className="mt-8">
+          <h3 className="text-sm font-medium text-neutral-300 mb-3">Saved Templates</h3>
+          <div className="flex flex-wrap gap-2">
+            {templates.map((template) => (
+              <div
+                key={template.id}
+                className="badge badge-secondary flex items-center gap-2 group"
+              >
+                <span>{template.name}</span>
+                <button
+                  onClick={() => handleDeleteTemplate(template.id)}
+                  className="text-neutral-500 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  ×
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

gsm-frontend/src/components/LoginModal.jsx

@@ -0,0 +1,80 @@
+import { useState } from 'react'
+import { login } from '../api'
+
+export default function LoginModal({ onLogin, onClose }) {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    try {
+      const { token } = await login(username, password)
+      onLogin(token)
+      onClose()
+    } catch (err) {
+      setError(err.message || 'Login failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="modal-backdrop" onClick={onClose}>
+      <div className="modal fade-in-scale" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2 className="modal-title">Sign in</h2>
+          <button onClick={onClose} className="btn btn-ghost">
+            &times;
+          </button>
+        </div>
+        <div className="modal-body">
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <div className="alert alert-error">
+                {error}
+              </div>
+            )}
+
+            <div className="form-group">
+              <label className="form-label">Username</label>
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="input"
+                placeholder="Enter username"
+                required
+                autoFocus
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">Password</label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="input"
+                placeholder="Enter password"
+                required
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="btn btn-primary w-full"
+            >
+              {loading ? 'Signing in...' : 'Sign in'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}

gsm-frontend/src/components/MetricsChart.jsx

@@ -0,0 +1,189 @@
+import { useState, useEffect } from 'react'
+import { AreaChart, Area, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import { getMetricsHistory } from '../api'
+import { useUser } from '../context/UserContext'
+
+const GRAFANA_URL = 'https://grafana.dimension47.de'
+
+export default function MetricsChart({ serverId, serverName, expanded = false }) {
+  const { token } = useUser()
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [range, setRange] = useState('1h')
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const metrics = await getMetricsHistory(token, serverId, range)
+        setData(metrics)
+      } catch (err) {
+        console.error('Failed to fetch metrics:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchData()
+    const interval = setInterval(fetchData, 60000)
+    return () => clearInterval(interval)
+  }, [token, serverId, range])
+
+  const formatTime = (timestamp) => {
+    const date = new Date(timestamp)
+    return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
+  }
+
+  const formatBytes = (bytes) => {
+    if (bytes < 1024) return bytes.toFixed(0) + ' B/s'
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB/s'
+    return (bytes / 1024 / 1024).toFixed(1) + ' MB/s'
+  }
+
+  if (loading) {
+    return (
+      <div className="card p-4">
+        <div className="h-20 flex items-center justify-center">
+          <span className="text-neutral-500 text-sm">Loading metrics...</span>
+        </div>
+      </div>
+    )
+  }
+
+  if (!data || data.cpu.length === 0) {
+    return (
+      <div className="card p-4">
+        <div className="h-20 flex items-center justify-center">
+          <span className="text-neutral-500 text-sm">No data available</span>
+        </div>
+      </div>
+    )
+  }
+
+  const combinedData = data.cpu.map((point, i) => ({
+    timestamp: point.timestamp,
+    cpu: point.value,
+    memory: data.memory[i]?.value || 0,
+    networkRx: data.networkRx[i]?.value || 0,
+    networkTx: data.networkTx[i]?.value || 0
+  }))
+
+  const CustomTooltip = ({ active, payload, label }) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="bg-neutral-900 border border-neutral-700 rounded-md p-3 text-xs shadow-lg">
+          <div className="text-neutral-400 mb-2">{formatTime(label)}</div>
+          {payload.map((entry, i) => (
+            <div key={i} className="flex justify-between gap-4" style={{ color: entry.color }}>
+              <span>{entry.name}:</span>
+              <span className="font-semibold">
+                {entry.name.includes('Network') ? formatBytes(entry.value) : entry.value.toFixed(1) + '%'}
+              </span>
+            </div>
+          ))}
+        </div>
+      )
+    }
+    return null
+  }
+
+  const ChartCard = ({ title, dataKey, color, domain, formatter }) => (
+    <div className="card p-4">
+      <div className="flex justify-between items-center mb-3">
+        <span className="text-neutral-400 text-xs uppercase tracking-wide">{title}</span>
+        <span className="text-white text-sm font-semibold">
+          {formatter
+            ? formatter(combinedData[combinedData.length - 1]?.[dataKey] || 0)
+            : (combinedData[combinedData.length - 1]?.[dataKey] || 0).toFixed(1) + '%'
+          }
+        </span>
+      </div>
+      <ResponsiveContainer width="100%" height={expanded ? 150 : 80}>
+        <AreaChart data={combinedData}>
+          <defs>
+            <linearGradient id={`gradient-${dataKey}`} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor={color} stopOpacity={0.3}/>
+              <stop offset="95%" stopColor={color} stopOpacity={0.05}/>
+            </linearGradient>
+          </defs>
+          {expanded && (
+            <>
+              <XAxis
+                dataKey="timestamp"
+                tickFormatter={formatTime}
+                tick={{ fill: '#737373', fontSize: 10 }}
+                axisLine={{ stroke: '#404040' }}
+                tickLine={false}
+                minTickGap={50}
+              />
+              <YAxis
+                domain={domain || [0, 'auto']}
+                tick={{ fill: '#737373', fontSize: 10 }}
+                axisLine={{ stroke: '#404040' }}
+                tickLine={false}
+                width={40}
+                tickFormatter={formatter ? (v) => formatBytes(v).split(' ')[0] : (v) => v.toFixed(0)}
+              />
+              <Tooltip content={<CustomTooltip />} />
+            </>
+          )}
+          <Area
+            type="monotone"
+            dataKey={dataKey}
+            name={title}
+            stroke={color}
+            strokeWidth={2}
+            fill={`url(#gradient-${dataKey})`}
+            isAnimationActive={true}
+            animationDuration={500}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  )
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <span className="text-neutral-400 text-sm">Metrics History</span>
+        <div className="flex items-center gap-3">
+          <select
+            value={range}
+            onChange={(e) => setRange(e.target.value)}
+            className="select"
+          >
+            <option value="15m">15 min</option>
+            <option value="1h">1 hour</option>
+            <option value="6h">6 hours</option>
+            <option value="24h">24 hours</option>
+          </select>
+          <a
+            href={`${GRAFANA_URL}/d/rYdddlPWk/node-exporter-full?var-job=${serverId}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn btn-secondary text-sm"
+          >
+            Grafana
+          </a>
+        </div>
+      </div>
+
+      {/* Charts */}
+      {expanded ? (
+        <div className="space-y-4">
+          <ChartCard title="CPU Usage" dataKey="cpu" color="#22c55e" domain={[0, 100]} />
+          <ChartCard title="Memory Usage" dataKey="memory" color="#3b82f6" domain={[0, 100]} />
+          <div className="grid grid-cols-2 gap-4">
+            <ChartCard title="Network RX" dataKey="networkRx" color="#a855f7" formatter={formatBytes} />
+            <ChartCard title="Network TX" dataKey="networkTx" color="#eab308" formatter={formatBytes} />
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 gap-3">
+          <ChartCard title="CPU" dataKey="cpu" color="#22c55e" domain={[0, 100]} />
+          <ChartCard title="Memory" dataKey="memory" color="#3b82f6" domain={[0, 100]} />
+        </div>
+      )}
+    </div>
+  )
+}

gsm-frontend/src/components/ServerCard.jsx

@@ -0,0 +1,190 @@
+const serverInfo = {
+  minecraft: {
+    address: 'minecraft.dimension47.de',
+    logo: '/minecraft.png',
+    links: [
+      { label: 'ATM10 Modpack', url: 'https://www.curseforge.com/minecraft/modpacks/all-the-mods-10' }
+    ]
+  },
+  factorio: {
+    hint: 'Serverpasswort: affe',
+    address: 'factorio.dimension47.de',
+    logo: '/factorio.png',
+    links: [
+      { label: 'Steam', url: 'https://store.steampowered.com/app/427520/Factorio/' }
+    ]
+  },
+  vrising: {
+    address: 'Zeasy Software Vampire',
+    logo: '/vrising.png',
+    links: [
+      { label: 'Steam', url: 'https://store.steampowered.com/app/1604030/V_Rising/' }
+    ]
+  }
+}
+
+const getServerInfo = (serverName) => {
+  const name = serverName.toLowerCase()
+  if (name.includes('minecraft') || name.includes('all the mods')) return serverInfo.minecraft
+  if (name.includes('factorio')) return serverInfo.factorio
+  if (name.includes('vrising') || name.includes('v rising')) return serverInfo.vrising
+  return null
+}
+
+export default function ServerCard({ server, onClick, isAuthenticated }) {
+  const info = getServerInfo(server.name)
+
+  const formatUptime = (seconds) => {
+    const hours = Math.floor(seconds / 3600)
+    if (hours > 24) {
+      const days = Math.floor(hours / 24)
+      return days + 'd ' + (hours % 24) + 'h'
+    }
+    const minutes = Math.floor((seconds % 3600) / 60)
+    return hours + 'h ' + minutes + 'm'
+  }
+
+  const cpuPercent = Math.min(server.metrics.cpu, 100)
+  const memPercent = Math.min(server.metrics.memory, 100)
+
+  const getProgressColor = (percent) => {
+    if (percent > 80) return 'progress-bar-danger'
+    if (percent > 60) return 'progress-bar-warning'
+    return 'progress-bar-success'
+  }
+
+  const getStatusBadge = () => {
+    const status = server.status || (server.running ? 'online' : 'offline')
+    switch (status) {
+      case 'online':
+        return { class: 'badge badge-success', text: 'Online' }
+      case 'starting':
+        return { class: 'badge badge-warning', text: 'Starting...' }
+      case 'stopping':
+        return { class: 'badge badge-warning', text: 'Stopping...' }
+      default:
+        return { class: 'badge badge-destructive', text: 'Offline' }
+    }
+  }
+
+  const statusBadge = getStatusBadge()
+
+  return (
+    <div
+      className="card card-clickable p-5"
+      onClick={onClick}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-3">
+          {info && info.logo && <img src={info.logo} alt="" className="h-8 w-8 object-contain" />}
+          <h3 className="text-lg font-semibold text-white">{server.name}</h3>
+        </div>
+        <span className={statusBadge.class}>
+          {statusBadge.text}
+        </span>
+      </div>
+
+      {/* Server Address & Links */}
+      {info && (
+        <div className="mb-4 flex items-center gap-3 text-sm">
+          <code className="text-neutral-400 bg-neutral-800 px-2 py-0.5 rounded">
+            {info.address}
+          </code>
+          {info.links.map((link, i) => (
+            <a
+              key={i}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={(e) => e.stopPropagation()}
+              className="text-blue-400 hover:text-blue-300 hover:underline"
+            >
+              {link.label}
+            </a>
+          ))}
+        </div>
+      )}
+
+      {/* Whitelist notice for Minecraft - only for authenticated users */}
+      {isAuthenticated && server.type === 'minecraft' && (
+        <div className="mb-4 text-xs text-neutral-500">
+          Whitelist erforderlich - im Whitelist-Tab freischalten
+        </div>
+      )}
+
+      {/* Factorio notice - only for authenticated users */}
+      {isAuthenticated && server.type === 'factorio' && (
+        <div className="mb-4 text-xs text-neutral-500">
+          Serverpasswort: affe
+        </div>
+      )}
+
+      {/* V Rising notice - only for authenticated users */}
+      {isAuthenticated && server.type === 'vrising' && (
+        <div className="mb-4 text-xs text-neutral-500">
+          In der Serverliste suchen - Passwort: affe
+        </div>
+      )}
+
+      {/* Metrics */}
+      <div className="space-y-3">
+        {/* CPU */}
+        <div>
+          <div className="flex justify-between text-sm mb-1">
+            <span className="text-neutral-400">CPU</span>
+            <span className="text-white">{server.metrics.cpu.toFixed(1)}%</span>
+          </div>
+          <div className="progress">
+            <div
+              className={'progress-bar ' + getProgressColor(cpuPercent)}
+              style={{ width: cpuPercent + '%' }}
+            />
+          </div>
+        </div>
+
+        {/* RAM */}
+        <div>
+          <div className="flex justify-between text-sm mb-1">
+            <span className="text-neutral-400">Memory</span>
+            <span className="text-white">
+              {server.metrics.memoryUsed?.toFixed(1) || 0} / {server.metrics.memoryTotal?.toFixed(1) || 0} {server.metrics.memoryUnit}
+            </span>
+          </div>
+          <div className="progress">
+            <div
+              className={'progress-bar ' + getProgressColor(memPercent)}
+              style={{ width: memPercent + '%' }}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Footer Stats */}
+      <div className="flex items-center justify-between mt-4 pt-4 border-t border-neutral-800 text-sm">
+        <div className="text-neutral-400">
+          <span className="text-white font-medium">{server.players.online}</span>
+          {server.players.max ? ' / ' + server.players.max : ''} players
+        </div>
+        {server.running && (
+          <div className="text-neutral-400">
+            Uptime: <span className="text-white">{formatUptime(server.metrics.uptime)}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Players List */}
+      {server.players?.list?.length > 0 && (
+        <div className="mt-3 pt-3 border-t border-neutral-800">
+          <div className="flex flex-wrap gap-1.5">
+            {server.players.list.map((player, i) => (
+              <span key={i} className="badge badge-secondary">
+                {player}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

gsm-frontend/src/components/ServerDetailModal.jsx

@@ -0,0 +1,337 @@
+import { useState, useEffect, useRef } from 'react'
+import { serverAction, sendRcon, getServerLogs } from '../api'
+import { useUser } from '../context/UserContext'
+import MetricsChart from './MetricsChart'
+import FactorioWorldManager from './FactorioWorldManager'
+
+export default function ServerDetailModal({ server, onClose, onUpdate }) {
+  const { token, isModerator } = useUser()
+  const [loading, setLoading] = useState(false)
+  const [activeTab, setActiveTab] = useState('overview')
+  const [rconCommand, setRconCommand] = useState('')
+  const [rconHistory, setRconHistory] = useState([])
+  const [logs, setLogs] = useState('')
+  const logsRef = useRef(null)
+  const rconRef = useRef(null)
+
+  const typeIcons = {
+    minecraft: '⛏️',
+    factorio: '⚙️'
+  }
+
+  const handleAction = async (action) => {
+    setLoading(true)
+    try {
+      await serverAction(token, server.id, action)
+      setTimeout(() => {
+        onUpdate()
+        setLoading(false)
+      }, 2000)
+    } catch (err) {
+      console.error(err)
+      setLoading(false)
+    }
+  }
+
+  const handleRcon = async (e) => {
+    e.preventDefault()
+    if (!rconCommand.trim()) return
+
+    const cmd = rconCommand
+    setRconCommand('')
+
+    try {
+      const { response } = await sendRcon(token, server.id, cmd)
+      setRconHistory([...rconHistory, { cmd, res: response, time: new Date() }])
+    } catch (err) {
+      setRconHistory([...rconHistory, { cmd, res: 'ERROR: ' + err.message, time: new Date(), error: true }])
+    }
+  }
+
+  const fetchLogs = async () => {
+    try {
+      const data = await getServerLogs(token, server.id, 100)
+      setLogs(data.logs || '')
+      if (logsRef.current) {
+        logsRef.current.scrollTop = logsRef.current.scrollHeight
+      }
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  useEffect(() => {
+    if (activeTab === 'logs' && isModerator) {
+      fetchLogs()
+      const interval = setInterval(fetchLogs, 5000)
+      return () => clearInterval(interval)
+    }
+  }, [activeTab, isModerator])
+
+  useEffect(() => {
+    if (rconRef.current) {
+      rconRef.current.scrollTop = rconRef.current.scrollHeight
+    }
+  }, [rconHistory])
+
+  useEffect(() => {
+    const handleEsc = (e) => {
+      if (e.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', handleEsc)
+    return () => window.removeEventListener('keydown', handleEsc)
+  }, [onClose])
+
+  const formatUptime = (seconds) => {
+    const days = Math.floor(seconds / 86400)
+    const hours = Math.floor((seconds % 86400) / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    if (days > 0) return `${days}d ${hours}h ${minutes}m`
+    return `${hours}h ${minutes}m`
+  }
+
+  const tabs = [
+    { id: 'overview', label: 'OVERVIEW', icon: '📊' },
+    { id: 'metrics', label: 'METRICS', icon: '📈' },
+    ...(isModerator ? [
+      { id: 'console', label: 'CONSOLE', icon: '💻' },
+      { id: 'logs', label: 'LOGS', icon: '📜' },
+      ...(server.type === 'factorio' ? [{ id: 'worlds', label: 'WORLDS', icon: '🌍' }] : []),
+    ] : []),
+  ]
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 modal-backdrop"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="relative w-full max-w-4xl max-h-[90vh] overflow-hidden bg-black/95 border border-[#00ff41]/50 rounded-lg glow-box fade-in-up">
+        {/* Header */}
+        <div className="border-b border-[#00ff41]/30 bg-[#00ff41]/5 p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <span className="text-4xl">{typeIcons[server.type] || '🎮'}</span>
+              <div>
+                <h2 className="text-2xl font-bold text-[#00ff41] font-mono tracking-wider glow-green">
+                  {server.name.toUpperCase()}
+                </h2>
+                <div className="flex items-center gap-3 mt-1">
+                  <span className={`flex items-center gap-2 text-sm font-mono ${server.running ? 'text-[#00ff41]' : 'text-red-500'}`}>
+                    <span className={`w-2 h-2 rounded-full ${server.running ? 'status-online' : 'status-offline'}`} />
+                    {server.running ? 'ONLINE' : 'OFFLINE'}
+                  </span>
+                  <span className="text-[#00ff41]/50 text-sm font-mono">|</span>
+                  <span className="text-[#00ff41]/50 text-sm font-mono">
+                    UPTIME: {formatUptime(server.metrics.uptime)}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <button
+              onClick={onClose}
+              className="text-[#00ff41]/60 hover:text-[#00ff41] transition-colors p-2"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Tabs */}
+          <div className="flex gap-1 mt-4">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`px-4 py-2 font-mono text-sm transition-all duration-300 rounded-t ${
+                  activeTab === tab.id
+                    ? 'bg-[#00ff41]/20 text-[#00ff41] border-t border-l border-r border-[#00ff41]/50'
+                    : 'text-[#00ff41]/50 hover:text-[#00ff41] hover:bg-[#00ff41]/5'
+                }`}
+              >
+                <span className="mr-2">{tab.icon}</span>
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 overflow-y-auto max-h-[calc(90vh-200px)]">
+          {/* Overview Tab */}
+          {activeTab === 'overview' && (
+            <div className="space-y-6">
+              {/* Stats Grid */}
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <StatBox label="CPU" value={`${server.metrics.cpu.toFixed(1)}%`} sub={`${server.metrics.cpuCores} cores`} />
+                <StatBox label="RAM" value={`${server.metrics.memoryUsed?.toFixed(1)} ${server.metrics.memoryUnit}`} sub={`/ ${server.metrics.memoryTotal?.toFixed(1)} ${server.metrics.memoryUnit}`} />
+                <StatBox label="PLAYERS" value={`${server.players.online}`} sub={server.players.max ? `/ ${server.players.max}` : 'unlimited'} />
+                <StatBox label="TYPE" value={server.type.toUpperCase()} sub={server.id} />
+              </div>
+
+              {/* Players List */}
+              {server.players?.list?.length > 0 && (
+                <div className="bg-black/50 border border-[#00ff41]/20 rounded p-4">
+                  <h3 className="text-[#00ff41] font-mono text-sm mb-3">CONNECTED_USERS:</h3>
+                  <div className="flex flex-wrap gap-2">
+                    {server.players.list.map((player, i) => (
+                      <span
+                        key={i}
+                        className="bg-[#00ff41]/10 border border-[#00ff41]/30 text-[#00ff41] px-3 py-1 rounded font-mono text-sm"
+                      >
+                        {player}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Power Controls */}
+              {isModerator && (
+                <div className="bg-black/50 border border-[#00ff41]/20 rounded p-4">
+                  <h3 className="text-[#00ff41] font-mono text-sm mb-3">POWER_CONTROLS:</h3>
+                  <div className="flex gap-3">
+                    {server.running ? (
+                      <>
+                        <button
+                          onClick={() => handleAction('stop')}
+                          disabled={loading}
+                          className="btn-matrix px-6 py-2 text-red-500 border-red-500 hover:bg-red-500/20 disabled:opacity-50"
+                        >
+                          {loading ? 'PROCESSING...' : 'STOP'}
+                        </button>
+                        <button
+                          onClick={() => handleAction('restart')}
+                          disabled={loading}
+                          className="btn-matrix px-6 py-2 text-yellow-500 border-yellow-500 hover:bg-yellow-500/20 disabled:opacity-50"
+                        >
+                          {loading ? 'PROCESSING...' : 'RESTART'}
+                        </button>
+                      </>
+                    ) : (
+                      <button
+                        onClick={() => handleAction('start')}
+                        disabled={loading}
+                        className="btn-matrix-solid px-6 py-2 disabled:opacity-50"
+                      >
+                        {loading ? 'PROCESSING...' : 'START'}
+                      </button>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Metrics Tab */}
+          {activeTab === 'metrics' && (
+            <div className="space-y-4">
+              <MetricsChart serverId={server.id} serverName={server.name} expanded={true} />
+            </div>
+          )}
+
+          {/* Console Tab */}
+          {activeTab === 'console' && isModerator && server.hasRcon && (
+            <div className="space-y-4">
+              <div
+                ref={rconRef}
+                className="terminal rounded h-80 overflow-y-auto p-4"
+              >
+                <div className="text-[#00ff41]/60 font-mono text-sm mb-2">
+                  // RCON Terminal - {server.name}
+                </div>
+                {rconHistory.length === 0 && (
+                  <div className="text-[#00ff41]/40 font-mono text-sm">
+                    Waiting for commands...
+                  </div>
+                )}
+                {rconHistory.map((entry, i) => (
+                  <div key={i} className="mb-2">
+                    <div className="text-[#00ff41] font-mono text-sm">
+                      <span className="text-[#00ff41]/50">[{entry.time.toLocaleTimeString()}]</span> &gt; {entry.cmd}
+                    </div>
+                    <div className={`font-mono text-sm whitespace-pre-wrap pl-4 ${entry.error ? 'text-red-500' : 'text-[#00ff41]/70'}`}>
+                      {entry.res}
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              <form onSubmit={handleRcon} className="flex gap-2">
+                <span className="text-[#00ff41] font-mono py-2">&gt;</span>
+                <input
+                  type="text"
+                  value={rconCommand}
+                  onChange={(e) => setRconCommand(e.target.value)}
+                  placeholder="Enter RCON command..."
+                  className="input-matrix flex-1 px-4 py-2 rounded font-mono text-sm"
+                />
+                <button
+                  type="submit"
+                  className="btn-matrix-solid px-6 py-2 font-mono text-sm"
+                >
+                  EXECUTE
+                </button>
+              </form>
+            </div>
+          )}
+
+          {/* Logs Tab */}
+          {activeTab === 'logs' && isModerator && (
+            <div className="space-y-4">
+              <div className="flex justify-between items-center">
+                <span className="text-[#00ff41]/60 font-mono text-sm">
+                  // Server Logs - Last 100 lines
+                </span>
+                <button
+                  onClick={fetchLogs}
+                  className="btn-matrix px-4 py-1 text-sm font-mono"
+                >
+                  REFRESH
+                </button>
+              </div>
+              <div
+                ref={logsRef}
+                className="terminal rounded h-96 overflow-y-auto p-4 font-mono text-xs text-[#00ff41]/80 whitespace-pre-wrap"
+              >
+                {logs || 'Loading...'}
+              </div>
+            </div>
+          )}
+
+          {/* Worlds Tab (Factorio only) */}
+          {activeTab === 'worlds' && isModerator && server.type === 'factorio' && (
+            <FactorioWorldManager
+              server={server}
+              token={token}
+              onServerAction={onUpdate}
+            />
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-[#00ff41]/30 bg-[#00ff41]/5 px-6 py-3">
+          <div className="flex justify-between items-center text-[#00ff41]/40 font-mono text-xs">
+            <span>SERVER_ID: {server.id}</span>
+            <span>PRESS [ESC] TO CLOSE</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function StatBox({ label, value, sub }) {
+  return (
+    <div className="bg-black/50 border border-[#00ff41]/20 rounded p-4 text-center">
+      <div className="text-[#00ff41]/50 font-mono text-xs mb-1">{label}</div>
+      <div className="text-[#00ff41] font-mono text-2xl font-bold glow-green metric-value">{value}</div>
+      <div className="text-[#00ff41]/40 font-mono text-xs mt-1">{sub}</div>
+    </div>
+  )
+}

gsm-frontend/src/components/SettingsModal.jsx

@@ -0,0 +1,120 @@
+import { useState } from 'react'
+import { useUser } from '../context/UserContext'
+import { changePassword } from '../api'
+
+export default function SettingsModal({ onClose }) {
+  const { user } = useUser()
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleChangePassword = async (e) => {
+    e.preventDefault()
+    setError('')
+    setSuccess('')
+
+    if (newPassword !== confirmPassword) {
+      setError('Passwords do not match')
+      return
+    }
+
+    if (newPassword.length < 6) {
+      setError('Password must be at least 6 characters')
+      return
+    }
+
+    setLoading(true)
+    try {
+      await changePassword(currentPassword, newPassword)
+      setSuccess('Password changed successfully')
+      setCurrentPassword('')
+      setNewPassword('')
+      setConfirmPassword('')
+    } catch (err) {
+      setError(err.message || 'Failed to change password')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="modal-backdrop fade-in" onClick={onClose}>
+      <div className="modal fade-in-scale" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2 className="modal-title">Settings</h2>
+          <button onClick={onClose} className="btn btn-ghost">
+            Close
+          </button>
+        </div>
+
+        <div className="modal-body">
+          <div className="mb-6">
+            <h3 className="text-sm font-medium text-neutral-300 mb-2">Account</h3>
+            <div className="card p-4">
+              <div className="flex justify-between items-center">
+                <span className="text-neutral-400">Username</span>
+                <span className="text-white">{user?.username}</span>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-sm font-medium text-neutral-300 mb-2">Change Password</h3>
+            <form onSubmit={handleChangePassword} className="space-y-4">
+              {error && (
+                <div className="alert alert-error">{error}</div>
+              )}
+              {success && (
+                <div className="alert alert-success">{success}</div>
+              )}
+
+              <div className="form-group">
+                <label className="form-label">Current Password</label>
+                <input
+                  type="password"
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                  className="input"
+                  required
+                />
+              </div>
+
+              <div className="form-group">
+                <label className="form-label">New Password</label>
+                <input
+                  type="password"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  className="input"
+                  required
+                />
+              </div>
+
+              <div className="form-group">
+                <label className="form-label">Confirm New Password</label>
+                <input
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  className="input"
+                  required
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="btn btn-primary w-full"
+              >
+                {loading ? 'Changing...' : 'Change Password'}
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

gsm-frontend/src/components/UserManagement.jsx

@@ -0,0 +1,235 @@
+import { useState, useEffect } from 'react'
+import { useUser } from '../context/UserContext'
+import { getUsers, createUser, updateUserRole, updateUserPassword, deleteUser } from '../api'
+
+export default function UserManagement({ onClose }) {
+  const { token } = useUser()
+  const [users, setUsers] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [showAddUser, setShowAddUser] = useState(false)
+  const [editingUser, setEditingUser] = useState(null)
+
+  // Form state
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [role, setRole] = useState('user')
+  const [formLoading, setFormLoading] = useState(false)
+  const [formError, setFormError] = useState('')
+
+  const fetchUsers = async () => {
+    try {
+      const data = await getUsers(token)
+      setUsers(data)
+      setError('')
+    } catch (err) {
+      setError('Failed to load users')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchUsers()
+  }, [token])
+
+  const resetForm = () => {
+    setUsername('')
+    setPassword('')
+    setRole('user')
+    setFormError('')
+    setShowAddUser(false)
+    setEditingUser(null)
+  }
+
+  const handleAddUser = async (e) => {
+    e.preventDefault()
+    setFormError('')
+    setFormLoading(true)
+
+    try {
+      await createUser(token, { username, password, role })
+      await fetchUsers()
+      resetForm()
+    } catch (err) {
+      setFormError(err.message || 'Failed to create user')
+    } finally {
+      setFormLoading(false)
+    }
+  }
+
+  const handleUpdateUser = async (e) => {
+    e.preventDefault()
+    setFormError('')
+    setFormLoading(true)
+
+    try {
+      // Update role if changed
+      if (role !== editingUser.role) {
+        await updateUserRole(token, editingUser.id, role)
+      }
+      // Update password if provided
+      if (password) {
+        await updateUserPassword(token, editingUser.id, password)
+      }
+      await fetchUsers()
+      resetForm()
+    } catch (err) {
+      setFormError(err.message || 'Failed to update user')
+    } finally {
+      setFormLoading(false)
+    }
+  }
+
+  const handleDeleteUser = async (userId) => {
+    if (!confirm('Are you sure you want to delete this user?')) return
+
+    try {
+      await deleteUser(token, userId)
+      await fetchUsers()
+    } catch (err) {
+      setError(err.message || 'Failed to delete user')
+    }
+  }
+
+  const startEdit = (user) => {
+    setEditingUser(user)
+    setUsername(user.username)
+    setRole(user.role)
+    setPassword('')
+    setShowAddUser(false)
+  }
+
+  const roleLabels = {
+    user: 'Viewer',
+    moderator: 'Operator',
+    superadmin: 'Admin'
+  }
+
+  return (
+    <div className="modal-backdrop fade-in" onClick={onClose}>
+      <div className="modal fade-in-scale" style={{ maxWidth: '32rem' }} onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2 className="modal-title">User Management</h2>
+          <button onClick={onClose} className="btn btn-ghost">
+            Close
+          </button>
+        </div>
+
+        <div className="modal-body">
+          {error && (
+            <div className="alert alert-error mb-4">{error}</div>
+          )}
+
+          {/* User List */}
+          {loading ? (
+            <div className="text-center py-4 text-neutral-400">Loading users...</div>
+          ) : (
+            <div className="space-y-2 mb-4">
+              {users.map((user) => (
+                <div key={user.id} className="card p-3 flex items-center justify-between">
+                  <div>
+                    <div className="text-white font-medium">{user.username}</div>
+                    <div className="text-xs text-neutral-500">{roleLabels[user.role]}</div>
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => startEdit(user)}
+                      className="btn btn-ghost text-sm"
+                    >
+                      Edit
+                    </button>
+                    <button
+                      onClick={() => handleDeleteUser(user.id)}
+                      className="btn btn-ghost text-sm text-red-400"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Add/Edit Form */}
+          {(showAddUser || editingUser) ? (
+            <form onSubmit={editingUser ? handleUpdateUser : handleAddUser} className="space-y-4">
+              <div className="border-t border-neutral-800 pt-4">
+                <h3 className="text-sm font-medium text-neutral-300 mb-3">
+                  {editingUser ? 'Edit User' : 'Add New User'}
+                </h3>
+
+                {formError && (
+                  <div className="alert alert-error mb-4">{formError}</div>
+                )}
+
+                {!editingUser && (
+                  <div className="form-group">
+                    <label className="form-label">Username</label>
+                    <input
+                      type="text"
+                      value={username}
+                      onChange={(e) => setUsername(e.target.value)}
+                      className="input"
+                      required
+                    />
+                  </div>
+                )}
+
+                <div className="form-group">
+                  <label className="form-label">
+                    {editingUser ? 'New Password (leave empty to keep current)' : 'Password'}
+                  </label>
+                  <input
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="input"
+                    required={!editingUser}
+                  />
+                </div>
+
+                <div className="form-group">
+                  <label className="form-label">Role</label>
+                  <select
+                    value={role}
+                    onChange={(e) => setRole(e.target.value)}
+                    className="select w-full"
+                  >
+                    <option value="user">Viewer</option>
+                    <option value="moderator">Operator</option>
+                    <option value="superadmin">Admin</option>
+                  </select>
+                </div>
+
+                <div className="flex gap-2">
+                  <button
+                    type="submit"
+                    disabled={formLoading}
+                    className="btn btn-primary flex-1"
+                  >
+                    {formLoading ? 'Saving...' : (editingUser ? 'Update User' : 'Add User')}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={resetForm}
+                    className="btn btn-secondary"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </form>
+          ) : (
+            <button
+              onClick={() => setShowAddUser(true)}
+              className="btn btn-primary w-full"
+            >
+              Add User
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

gsm-frontend/src/components/WorldGenForm.jsx

@@ -0,0 +1,370 @@
+import { useState } from 'react'
+
+const SLIDER_VALUES = [0, 0.167, 0.5, 1, 2, 3]
+const SLIDER_LABELS = ['None', 'Very Low', 'Low', 'Normal', 'High', 'Very High']
+
+function valueToSlider(value) {
+  if (value === 0 || value === undefined) return 0
+  if (value <= 0.167) return 1
+  if (value <= 0.5) return 2
+  if (value <= 1) return 3
+  if (value <= 2) return 4
+  return 5
+}
+
+function sliderToValue(index) {
+  return SLIDER_VALUES[index]
+}
+
+function ValueSelect({ value, onChange }) {
+  const index = valueToSlider(value)
+  return (
+    <select
+      value={index}
+      onChange={(e) => onChange(sliderToValue(parseInt(e.target.value)))}
+      className="select text-xs py-1 px-2"
+    >
+      {SLIDER_LABELS.map((label, i) => (
+        <option key={i} value={i}>{label}</option>
+      ))}
+    </select>
+  )
+}
+
+function ResourceRow({ label, settings, onChange }) {
+  const freq = settings?.frequency ?? 1
+  const size = settings?.size ?? 1
+  const richness = settings?.richness ?? 1
+
+  return (
+    <div className="grid grid-cols-4 gap-2 items-center py-2 border-b border-neutral-800 last:border-0">
+      <div className="text-neutral-300 text-sm">{label}</div>
+      <ValueSelect value={freq} onChange={(v) => onChange({ ...settings, frequency: v })} />
+      <ValueSelect value={size} onChange={(v) => onChange({ ...settings, size: v })} />
+      <ValueSelect value={richness} onChange={(v) => onChange({ ...settings, richness: v })} />
+    </div>
+  )
+}
+
+function SimpleSlider({ label, value, onChange }) {
+  const sliderIndex = valueToSlider(value)
+
+  return (
+    <div className="flex items-center gap-4 py-2 border-b border-neutral-800 last:border-0">
+      <div className="w-28 text-neutral-300 text-sm">{label}</div>
+      <input
+        type="range"
+        min="0"
+        max="5"
+        value={sliderIndex}
+        onChange={(e) => onChange(sliderToValue(parseInt(e.target.value)))}
+        className="slider flex-1 max-w-48"
+      />
+      <span className="text-neutral-500 text-xs w-16">{SLIDER_LABELS[sliderIndex]}</span>
+    </div>
+  )
+}
+
+function EvolutionSlider({ label, value, onChange }) {
+  const displayValue = (value * 100).toFixed(0)
+
+  return (
+    <div className="flex items-center gap-4 py-2 border-b border-neutral-800 last:border-0">
+      <div className="w-28 text-neutral-300 text-sm">{label}</div>
+      <input
+        type="range"
+        min="0"
+        max="200"
+        value={value * 100}
+        onChange={(e) => onChange(parseInt(e.target.value) / 100)}
+        className="slider flex-1 max-w-48"
+      />
+      <span className="text-neutral-500 text-xs w-16">{displayValue}%</span>
+    </div>
+  )
+}
+
+export default function WorldGenForm({
+  settings,
+  onSettingsChange,
+  presets,
+  templates,
+  onLoadPreset,
+  onLoadTemplate,
+  onSaveTemplate
+}) {
+  const [selectedPreset, setSelectedPreset] = useState('default')
+  const [templateName, setTemplateName] = useState('')
+  const [showSaveTemplate, setShowSaveTemplate] = useState(false)
+
+  const handlePresetChange = (presetName) => {
+    setSelectedPreset(presetName)
+    onLoadPreset(presetName)
+  }
+
+  const handleSaveTemplate = () => {
+    if (templateName.trim()) {
+      onSaveTemplate(templateName.trim())
+      setTemplateName('')
+      setShowSaveTemplate(false)
+    }
+  }
+
+  const updateAutoplace = (key, value) => {
+    onSettingsChange({
+      ...settings,
+      autoplace_controls: {
+        ...settings.autoplace_controls,
+        [key]: value
+      }
+    })
+  }
+
+  const updateCliff = (key, value) => {
+    onSettingsChange({
+      ...settings,
+      cliff_settings: {
+        ...settings.cliff_settings,
+        [key]: value
+      }
+    })
+  }
+
+  const updateProperty = (key, value) => {
+    onSettingsChange({
+      ...settings,
+      property_expression_names: {
+        ...settings.property_expression_names,
+        [key]: value
+      }
+    })
+  }
+
+  return (
+    <div className="space-y-4 max-h-[50vh] overflow-y-auto pr-2">
+      {/* Preset & Template Selection */}
+      <div className="card p-3">
+        <div className="flex flex-wrap gap-3 items-center">
+          <div className="flex items-center gap-2">
+            <span className="text-neutral-400 text-sm">Preset:</span>
+            <select
+              value={selectedPreset}
+              onChange={(e) => handlePresetChange(e.target.value)}
+              className="select"
+            >
+              {presets?.map(p => (
+                <option key={p} value={p}>{p.replace('-', ' ').replace(/\b\w/g, l => l.toUpperCase())}</option>
+              ))}
+            </select>
+          </div>
+
+          {templates?.length > 0 && (
+            <div className="flex items-center gap-2">
+              <span className="text-neutral-400 text-sm">Template:</span>
+              <select
+                onChange={(e) => e.target.value && onLoadTemplate(parseInt(e.target.value))}
+                className="select"
+                defaultValue=""
+              >
+                <option value="">Select...</option>
+                {templates.map(t => (
+                  <option key={t.id} value={t.id}>{t.name}</option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          <button
+            onClick={() => setShowSaveTemplate(!showSaveTemplate)}
+            className="btn btn-outline text-sm ml-auto"
+          >
+            Save as Template
+          </button>
+        </div>
+
+        {showSaveTemplate && (
+          <div className="flex gap-2 mt-3 pt-3 border-t border-neutral-700">
+            <input
+              type="text"
+              value={templateName}
+              onChange={(e) => setTemplateName(e.target.value)}
+              placeholder="Template name..."
+              className="input flex-1"
+            />
+            <button
+              onClick={handleSaveTemplate}
+              disabled={!templateName.trim()}
+              className="btn btn-primary"
+            >
+              Save
+            </button>
+            <button
+              onClick={() => setShowSaveTemplate(false)}
+              className="btn btn-secondary"
+            >
+              Cancel
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Terrain Section */}
+      <div className="card p-4">
+        <h4 className="text-white font-medium text-sm mb-3">Terrain</h4>
+
+        <SimpleSlider
+          label="Water"
+          value={settings?.autoplace_controls?.water?.frequency ?? 1}
+          onChange={(v) => updateAutoplace('water', { frequency: v, size: v })}
+        />
+        <SimpleSlider
+          label="Trees"
+          value={settings?.autoplace_controls?.trees?.frequency ?? 1}
+          onChange={(v) => updateAutoplace('trees', { frequency: v, size: v, richness: v })}
+        />
+        <SimpleSlider
+          label="Cliffs"
+          value={settings?.cliff_settings?.richness ?? 1}
+          onChange={(v) => updateCliff('richness', v)}
+        />
+        <SimpleSlider
+          label="Starting Area"
+          value={settings?.starting_area ?? 1}
+          onChange={(v) => onSettingsChange({ ...settings, starting_area: v })}
+        />
+      </div>
+
+      {/* Resources Section */}
+      <div className="card p-4">
+        <h4 className="text-white font-medium text-sm mb-3">Resources</h4>
+
+        <div className="grid grid-cols-4 gap-2 text-neutral-500 text-xs mb-2 pb-2 border-b border-neutral-700">
+          <div></div>
+          <div className="text-center">Frequency</div>
+          <div className="text-center">Size</div>
+          <div className="text-center">Richness</div>
+        </div>
+
+        <ResourceRow
+          label="Iron Ore"
+          settings={settings?.autoplace_controls?.['iron-ore']}
+          onChange={(v) => updateAutoplace('iron-ore', v)}
+        />
+        <ResourceRow
+          label="Copper Ore"
+          settings={settings?.autoplace_controls?.['copper-ore']}
+          onChange={(v) => updateAutoplace('copper-ore', v)}
+        />
+        <ResourceRow
+          label="Coal"
+          settings={settings?.autoplace_controls?.coal}
+          onChange={(v) => updateAutoplace('coal', v)}
+        />
+        <ResourceRow
+          label="Stone"
+          settings={settings?.autoplace_controls?.stone}
+          onChange={(v) => updateAutoplace('stone', v)}
+        />
+        <ResourceRow
+          label="Uranium"
+          settings={settings?.autoplace_controls?.['uranium-ore']}
+          onChange={(v) => updateAutoplace('uranium-ore', v)}
+        />
+        <ResourceRow
+          label="Crude Oil"
+          settings={settings?.autoplace_controls?.['crude-oil']}
+          onChange={(v) => updateAutoplace('crude-oil', v)}
+        />
+      </div>
+
+      {/* Enemies Section */}
+      <div className="card p-4">
+        <h4 className="text-white font-medium text-sm mb-3">Enemies</h4>
+
+        <div className="grid grid-cols-4 gap-2 text-neutral-500 text-xs mb-2 pb-2 border-b border-neutral-700">
+          <div></div>
+          <div className="text-center">Frequency</div>
+          <div className="text-center">Size</div>
+          <div className="text-center">Richness</div>
+        </div>
+
+        <ResourceRow
+          label="Biter Bases"
+          settings={settings?.autoplace_controls?.['enemy-base']}
+          onChange={(v) => updateAutoplace('enemy-base', v)}
+        />
+
+        <div className="flex items-center gap-3 mt-3 pt-3 border-t border-neutral-700">
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={settings?.peaceful_mode ?? false}
+              onChange={(e) => onSettingsChange({ ...settings, peaceful_mode: e.target.checked })}
+              className="w-4 h-4 rounded border-neutral-600 bg-neutral-800 text-white focus:ring-neutral-500"
+            />
+            <span className="text-neutral-300 text-sm">Peaceful Mode</span>
+          </label>
+        </div>
+      </div>
+
+      {/* Evolution Section */}
+      <div className="card p-4">
+        <h4 className="text-white font-medium text-sm mb-3">Evolution</h4>
+
+        <EvolutionSlider
+          label="Time Factor"
+          value={settings?.property_expression_names?.['enemy-evolution-factor-by-time'] ?? 1}
+          onChange={(v) => updateProperty('enemy-evolution-factor-by-time', v)}
+        />
+        <EvolutionSlider
+          label="Pollution Factor"
+          value={settings?.property_expression_names?.['enemy-evolution-factor-by-pollution'] ?? 1}
+          onChange={(v) => updateProperty('enemy-evolution-factor-by-pollution', v)}
+        />
+        <EvolutionSlider
+          label="Destroy Factor"
+          value={settings?.property_expression_names?.['enemy-evolution-factor-by-killing-spawners'] ?? 1}
+          onChange={(v) => updateProperty('enemy-evolution-factor-by-killing-spawners', v)}
+        />
+      </div>
+
+      {/* Advanced Section */}
+      <div className="card p-4">
+        <h4 className="text-white font-medium text-sm mb-3">Advanced</h4>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="form-label">Seed (empty = random)</label>
+            <input
+              type="text"
+              value={settings?.seed ?? ''}
+              onChange={(e) => onSettingsChange({ ...settings, seed: e.target.value ? parseInt(e.target.value) : null })}
+              placeholder="Random"
+              className="input"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <label className="form-label">Width (0=infinite)</label>
+              <input
+                type="number"
+                value={settings?.width ?? 0}
+                onChange={(e) => onSettingsChange({ ...settings, width: parseInt(e.target.value) || 0 })}
+                className="input"
+              />
+            </div>
+            <div>
+              <label className="form-label">Height (0=infinite)</label>
+              <input
+                type="number"
+                value={settings?.height ?? 0}
+                onChange={(e) => onSettingsChange({ ...settings, height: parseInt(e.target.value) || 0 })}
+                className="input"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}