code cleanup

src/components/membership/CreateUserModal.tsx

@@ -32,7 +32,7 @@ export function CreateUserModal({ roles, onClose }: CreateUserModalProps) {
 			const result = await createUserAction(formDataObj);
 			if (result.success) {
 				onClose();
-				window.location.reload(); // Refresh to show new user
+				window.location.reload();
 			} else {
 				setError(result.message);
 			}

src/components/membership/DeleteUserModal.tsx

@@ -25,7 +25,7 @@ export function DeleteUserModal({ user, onClose }: DeleteUserModalProps) {
 			const result = await deleteUserAction(formDataObj);
 			if (result.success) {
 				onClose();
-				window.location.reload(); // Refresh to remove deleted user
+				window.location.reload();
 			} else {
 				setError(result.message);
 			}

src/components/server/CreateServerModal.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useActionState, useTransition } from 'react';
-import { useFormState } from 'react-dom';
 import { Modal } from '@/components/ui/Modal';
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
 import { createServerAction, type ServerActionResult } from '@/lib/actions/server-management';
@@ -16,37 +15,40 @@ const initialState: ServerActionResult = { success: false, message: '' };
 
 export function CreateServerModal({ isOpen, onClose }: CreateServerModalProps) {
 	const [serverName, setServerName] = useState('');
+	const [submittedName, setSubmittedName] = useState('');
 	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [isPending, setTransition] = useTransition();
 
-	const [state, formAction] = useFormState(createServerAction, initialState);
+	const [state, formAction] = useActionState(createServerAction, initialState);
 	const { showPopup } = useServerCreationPopup();
 
 	useEffect(() => {
 		if (state.success && state.data?.id) {
-			// Server creation started, show popup
+			showPopup(state.data.id, submittedName);
-			showPopup(state.data.id, serverName);
 			onClose();
-			setServerName('');
 			setIsSubmitting(false);
 		}
-	}, [state.success, state.data, showPopup, serverName, onClose]);
+	}, [state.success, state.data, showPopup, onClose, submittedName]);
 
-	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) =>
-		e.preventDefault();
+		setTransition(async () => {
+			e.preventDefault();
 
-		if (!serverName.trim()) {
+			if (!serverName.trim()) {
-			return;
+				return;
-		}
+			}
 
-		setIsSubmitting(true);
+			setIsSubmitting(true);
-		const formData = new FormData();
+			const formData = new FormData();
-		formData.append('name', serverName.trim());
+			formData.append('name', serverName.trim());
-		formAction(formData);
+			formAction(formData);
-	};
+			setSubmittedName(serverName.trim());
+			setServerName('');
+		});
 
 	const handleClose = () => {
 		if (isSubmitting) {
-			return; // Prevent closing during submission
+			return;
 		}
 		onClose();
 		setServerName('');
@@ -70,7 +72,7 @@ export function CreateServerModal({ isOpen, onClose }: CreateServerModalProps) {
 						value={serverName}
 						onChange={(e) => setServerName(e.target.value)}
 						required
-						disabled={isSubmitting}
+						disabled={isSubmitting || isPending}
 						className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none disabled:opacity-50"
 						placeholder="Enter server name..."
 					/>
@@ -80,14 +82,14 @@ export function CreateServerModal({ isOpen, onClose }: CreateServerModalProps) {
 					<button
 						type="button"
 						onClick={handleClose}
-						disabled={isSubmitting}
+						disabled={isSubmitting || isPending}
 						className="rounded-md bg-gray-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-700 disabled:opacity-50"
 					>
 						Cancel
 					</button>
 					<button
 						type="submit"
-						disabled={isSubmitting || !serverName.trim()}
+						disabled={isSubmitting || !serverName.trim() || isPending}
 						className="flex items-center rounded-md bg-green-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-green-700 disabled:opacity-50"
 					>
 						{isSubmitting ? (

src/components/server/DeleteServerModal.tsx

@@ -34,7 +34,7 @@ export function DeleteServerModal({ isOpen, onClose, server }: DeleteServerModal
 
 	const handleClose = () => {
 		if (isPending) {
-			return; // Prevent closing during deletion
+			return;
 		}
 		onClose();
 		setError(null);
@@ -46,7 +46,7 @@ export function DeleteServerModal({ isOpen, onClose, server }: DeleteServerModal
 
 			<div className="mb-6">
 				<p className="text-gray-300">
-					Are you sure you want to delete the server <strong>"{server.name}"</strong>?
+					Are you sure you want to delete the server <strong>&quot;{server.name}&quot;</strong>?
 				</p>
 				<p className="mt-2 text-sm text-gray-400">This action cannot be undone.</p>
 			</div>

src/components/server/ServerCard.tsx

@@ -1,7 +1,5 @@
-'use client';
-
 import Link from 'next/link';
-import { useState } from 'react';
+import { useState, useTransition } from 'react';
 import { Server, ServiceStatus, getStatusColor, serviceStatusToString } from '@/lib/types';
 import { User, hasPermission } from '@/lib/types/user';
 import {
@@ -10,7 +8,7 @@ import {
 	stopServerEventAction
 } from '@/lib/actions/servers';
 import { DeleteServerModal } from './DeleteServerModal';
-import { useSteamCMD } from '@/lib/context/SteamCMDContext';
+import { useRouter } from 'next/navigation';
 
 interface ServerCardProps {
 	server: Server;
@@ -19,9 +17,32 @@ interface ServerCardProps {
 
 export function ServerCard({ server, user }: ServerCardProps) {
 	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-	const { isSteamCMDRunning } = useSteamCMD();
+	const [isPending, startTransition] = useTransition();
+	const router = useRouter();
 
 	const canDeleteServer = hasPermission(user, 'server.delete');
+	const startServer = () =>
+		startTransition(async () => {
+			await startServerEventAction(server.id);
+			router.refresh();
+		});
+	const restartServer = () =>
+		startTransition(async () => {
+			await restartServerEventAction(server.id);
+			router.refresh();
+		});
+	const stopServer = () =>
+		startTransition(async () => {
+			await stopServerEventAction(server.id);
+			router.refresh();
+		});
+
+	const disabled = [
+		ServiceStatus.Restarting,
+		ServiceStatus.Starting,
+		ServiceStatus.Stopping,
+		ServiceStatus.Unknown
+	].includes(server.status);
 
 	return (
 		<>
@@ -91,38 +112,32 @@ export function ServerCard({ server, user }: ServerCardProps) {
 				</Link>
 
 				<div className="flex justify-between gap-2 bg-gray-900 px-4 py-3">
-					<form action={startServerEventAction.bind(null, server.id)}>
+					<button
-						<button
+						type="button"
-							type="submit"
+						onClick={startServer}
-							disabled={server.status === ServiceStatus.Running || isSteamCMDRunning}
+						disabled={server.status === ServiceStatus.Running || isPending || disabled}
-							className="rounded bg-green-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+						className="rounded bg-green-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
-							title={isSteamCMDRunning ? 'Server actions disabled while SteamCMD is running' : ''}
+					>
-						>
+						Start
-							Start
+					</button>
-						</button>
-					</form>
 
-					<form action={restartServerEventAction.bind(null, server.id)}>
+					<button
-						<button
+						type="button"
-							type="submit"
+						onClick={restartServer}
-							disabled={server.status === ServiceStatus.Stopped || isSteamCMDRunning}
+						disabled={server.status === ServiceStatus.Stopped || isPending || disabled}
-							className="rounded bg-yellow-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-yellow-700 disabled:cursor-not-allowed disabled:opacity-50"
+						className="rounded bg-yellow-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-yellow-700 disabled:cursor-not-allowed disabled:opacity-50"
-							title={isSteamCMDRunning ? 'Server actions disabled while SteamCMD is running' : ''}
+					>
-						>
+						Restart
-							Restart
+					</button>
-						</button>
-					</form>
 
-					<form action={stopServerEventAction.bind(null, server.id)}>
+					<button
-						<button
+						type="button"
-							type="submit"
+						onClick={stopServer}
-							disabled={server.status === ServiceStatus.Stopped || isSteamCMDRunning}
+						disabled={server.status === ServiceStatus.Stopped || isPending || disabled}
-							className="rounded bg-red-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
+						className="rounded bg-red-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
-							title={isSteamCMDRunning ? 'Server actions disabled while SteamCMD is running' : ''}
+					>
-						>
+						Stop
-							Stop
+					</button>
-						</button>
-					</form>
 				</div>
 			</div>
 

src/components/server/ServerCreationPopup.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import { useWebSocket } from '@/lib/websocket/context';
 import {
 	WebSocketMessage,
@@ -65,19 +65,18 @@ export function ServerCreationPopup({
 		addMessageHandler,
 		removeMessageHandler,
 		connectionStatus,
-		connectionError,
 		reconnect
 	} = useWebSocket();
 
 	const consoleRef = useRef<HTMLDivElement>(null);
 
-	const addEntry = (entry: Omit<ConsoleEntry, 'id'>) => {
+	const addEntry = useCallback((entry: Omit<ConsoleEntry, 'id'>) => {
 		const newEntry = {
 			...entry,
 			id: `${Date.now()}-${Math.random()}`
 		};
 		setEntries((prev) => [...prev, newEntry]);
-	};
+	}, []);
 
 	const scrollToBottom = () => {
 		if (consoleRef.current && !isMinimized && isConsoleVisible) {
@@ -95,9 +94,8 @@ export function ServerCreationPopup({
 		}
 	}, [serverId, isOpen, associateWithServer]);
 
-	useEffect(() => {
+	const handleMessage = useCallback(
-		const handleMessage = (message: WebSocketMessage) => {
+		(message: WebSocketMessage) => {
-			// Only handle messages for this server
 			if (message.server_id !== serverId) return;
 
 			const timestamp = message.timestamp;
@@ -105,14 +103,31 @@ export function ServerCreationPopup({
 			switch (message.type) {
 				case 'step': {
 					const data = message.data as StepData;
-					setSteps((prev) => ({
+					setSteps((prev) => {
-						...prev,
+						const updatedSteps = { ...prev };
-						[data.step]: {
+
+						const stepIndex = STEPS.findIndex((step) => step.key === data.step);
+						if (stepIndex > 0) {
+							for (let i = 0; i < stepIndex; i++) {
+								const prevStepKey = STEPS[i].key;
+								if (!updatedSteps[prevStepKey] || updatedSteps[prevStepKey].status === 'pending') {
+									updatedSteps[prevStepKey] = {
+										step: prevStepKey,
+										status: 'completed',
+										message: `${prevStepKey.replace('_', ' ')} completed`
+									};
+								}
+							}
+						}
+
+						updatedSteps[data.step] = {
 							step: data.step,
 							status: data.status,
 							message: data.message
-						}
+						};
-					}));
+
+						return updatedSteps;
+					});
 
 					let level: ConsoleEntry['level'] = 'info';
 					if (data.status === 'completed') level = 'success';
@@ -130,6 +145,43 @@ export function ServerCreationPopup({
 
 				case 'steam_output': {
 					const data = message.data as SteamOutputData;
+
+					setSteps((prev) => {
+						const updatedSteps = { ...prev };
+
+						if (
+							!updatedSteps['steam_download'] ||
+							updatedSteps['steam_download'].status === 'pending'
+						) {
+							updatedSteps['steam_download'] = {
+								step: 'steam_download',
+								status: 'in_progress',
+								message: 'Steam download in progress'
+							};
+						}
+
+						if (!updatedSteps['validation'] || updatedSteps['validation'].status === 'pending') {
+							updatedSteps['validation'] = {
+								step: 'validation',
+								status: 'completed',
+								message: 'Validation completed'
+							};
+						}
+
+						if (
+							!updatedSteps['directory_creation'] ||
+							updatedSteps['directory_creation'].status === 'pending'
+						) {
+							updatedSteps['directory_creation'] = {
+								step: 'directory_creation',
+								status: 'completed',
+								message: 'Directory creation completed'
+							};
+						}
+
+						return updatedSteps;
+					});
+
 					addEntry({
 						timestamp,
 						type: 'steam_output',
@@ -141,6 +193,22 @@ export function ServerCreationPopup({
 
 				case 'error': {
 					const data = message.data as ErrorData;
+
+					setSteps((prev) => {
+						const updatedSteps = { ...prev };
+						const currentStep = Object.values(updatedSteps).find(
+							(step) => step.status === 'in_progress'
+						);
+						if (currentStep) {
+							updatedSteps[currentStep.step] = {
+								...currentStep,
+								status: 'failed',
+								message: `${currentStep.step.replace('_', ' ')} failed: ${data.error}`
+							};
+						}
+						return updatedSteps;
+					});
+
 					addEntry({
 						timestamp,
 						type: 'error',
@@ -166,15 +234,18 @@ export function ServerCreationPopup({
 					break;
 				}
 			}
-		};
+		},
+		[serverId, addEntry, onComplete]
+	);
 
+	useEffect(() => {
 		if (isOpen) {
 			addMessageHandler(handleMessage);
 			return () => {
 				removeMessageHandler(handleMessage);
 			};
 		}
-	}, [addMessageHandler, removeMessageHandler, serverId, isOpen, onComplete]);
+	}, [addMessageHandler, removeMessageHandler, handleMessage, isOpen]);
 
 	const handleReconnect = async () => {
 		try {
@@ -210,19 +281,6 @@ export function ServerCreationPopup({
 		}
 	};
 
-	const getConnectionStatusColor = () => {
-		switch (connectionStatus) {
-			case 'connected':
-				return 'text-green-400';
-			case 'connecting':
-				return 'text-yellow-400';
-			case 'disconnected':
-				return 'text-gray-400';
-			case 'error':
-				return 'text-red-400';
-		}
-	};
-
 	const getConnectionStatusIcon = () => {
 		switch (connectionStatus) {
 			case 'connected':
@@ -246,14 +304,13 @@ export function ServerCreationPopup({
 
 	if (!isOpen) return null;
 
-	// Minimized state - circular icon in bottom corner
 	if (isMinimized) {
 		const progress = getCurrentProgress();
 		const isProgressing =
 			!isCompleted && Object.values(steps).some((step) => step.status === 'in_progress');
 
 		return (
-			<div className="fixed right-4 bottom-4 z-50">
+			<div className="fixed right-4 bottom-4 z-40">
 				<button
 					onClick={() => setIsMinimized(false)}
 					className={`flex h-16 w-16 items-center justify-center rounded-full border-2 shadow-lg transition-all hover:scale-105 ${
@@ -278,7 +335,6 @@ export function ServerCreationPopup({
 						)}
 					</div>
 
-					{/* Progress ring */}
 					{!isCompleted && (
 						<svg className="absolute inset-0 h-16 w-16 -rotate-90 transform">
 							<circle
@@ -307,10 +363,8 @@ export function ServerCreationPopup({
 		);
 	}
 
-	// Expanded popup state
 	return (
-		<div className="fixed right-4 bottom-4 z-50 max-h-[600px] w-96 rounded-lg border border-gray-700 bg-gray-800 shadow-2xl select-none">
+		<div className="fixed right-4 bottom-4 z-40 max-h-[600px] w-96 rounded-lg border border-gray-700 bg-gray-800 shadow-2xl select-none">
-			{/* Header */}
 			<div className="flex items-center justify-between border-b border-gray-700 p-4">
 				<div className="flex items-center space-x-2">
 					<span className="text-lg">🔧</span>
@@ -318,7 +372,6 @@ export function ServerCreationPopup({
 				</div>
 
 				<div className="flex items-center space-x-2">
-					{/* Connection Status */}
 					<div className="flex items-center space-x-1">
 						<span className="text-sm">{getConnectionStatusIcon()}</span>
 						{(connectionStatus === 'disconnected' || connectionStatus === 'error') && (
@@ -332,16 +385,14 @@ export function ServerCreationPopup({
 						)}
 					</div>
 
-					{/* Console Toggle */}
 					<button
 						onClick={() => setIsConsoleVisible(!isConsoleVisible)}
 						className="text-sm text-gray-400 hover:text-white"
 						title={isConsoleVisible ? 'Hide Console' : 'Show Console'}
 					>
-						{isConsoleVisible ? '📋' : '📋'}
+						📋
 					</button>
 
-					{/* Minimize */}
 					<button
 						onClick={() => setIsMinimized(true)}
 						className="text-gray-400 hover:text-white"
@@ -352,35 +403,19 @@ export function ServerCreationPopup({
 						</svg>
 					</button>
 
-					{/* Close */}
+					<button onClick={onClose} className="text-gray-400 hover:text-white" title="Close">
-					{isCompleted && (
+						<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<button onClick={onClose} className="text-gray-400 hover:text-white" title="Close">
+							<path
-							<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								strokeLinecap="round"
-								<path
+								strokeLinejoin="round"
-									strokeLinecap="round"
+								strokeWidth={2}
-									strokeLinejoin="round"
+								d="M6 18L18 6M6 6l12 12"
-									strokeWidth={2}
+							/>
-									d="M6 18L18 6M6 6l12 12"
+						</svg>
-								/>
+					</button>
-							</svg>
-						</button>
-					)}
 				</div>
 			</div>
 
-			{/* Connection Error Banner */}
-			{(connectionStatus === 'disconnected' || connectionStatus === 'error') && (
-				<div className="bg-red-600 p-2 text-xs text-red-50">
-					<div className="flex items-center justify-between">
-						<span>Connection lost - {connectionError || 'Reconnecting...'}</span>
-						<button onClick={handleReconnect} className="underline">
-							Reconnect
-						</button>
-					</div>
-				</div>
-			)}
-
-			{/* Steps Progress */}
 			<div className="border-b border-gray-700 p-4">
 				<div className="grid grid-cols-2 gap-2">
 					{STEPS.map(({ key, label }) => {
@@ -406,7 +441,6 @@ export function ServerCreationPopup({
 				</div>
 			</div>
 
-			{/* Console Output */}
 			{isConsoleVisible && (
 				<div className="h-64 bg-black">
 					<div ref={consoleRef} className="h-full space-y-1 overflow-y-auto p-3 font-mono text-xs">
@@ -427,7 +461,6 @@ export function ServerCreationPopup({
 				</div>
 			)}
 
-			{/* Completion Status */}
 			{isCompleted && (
 				<div
 					className={`p-3 text-center text-sm ${

src/components/server/ServerCreationPopupContainer.tsx

@@ -2,28 +2,33 @@
 
 import { useServerCreationPopup } from '@/lib/context/ServerCreationPopupContext';
 import { ServerCreationPopup } from './ServerCreationPopup';
+import { useSteamCMD } from '@/lib/context/SteamCMDContext';
+import { useCallback } from 'react';
 
 export function ServerCreationPopupContainer() {
-  const { popup, hidePopup } = useServerCreationPopup();
+	const { popup, hidePopup } = useServerCreationPopup();
+	const { dissociateServer } = useSteamCMD();
+	const handleClose = useCallback(() => {
+		hidePopup();
+		if (popup) return dissociateServer(popup.serverId);
+	}, [popup, dissociateServer, hidePopup]);
+	if (!popup) return null;
 
-  if (!popup) return null;
+	const handleComplete = (success: boolean) => {
+		if (success) {
+			setTimeout(() => {
+				window.location.reload();
+			}, 2000);
+		}
+	};
 
-  const handleComplete = (success: boolean, message: string) => {
+	return (
-    // Refresh the page on successful completion to show the new server
+		<ServerCreationPopup
-    if (success) {
+			serverId={popup.serverId}
-      setTimeout(() => {
+			serverName={popup.serverName}
-        window.location.reload();
+			isOpen={popup.isOpen}
-      }, 2000); // Wait 2 seconds to let user see the success message
+			onClose={handleClose}
-    }
+			onComplete={handleComplete}
-  };
+		/>
-
+	);
-  return (
-    <ServerCreationPopup
-      serverId={popup.serverId}
-      serverName={popup.serverName}
-      isOpen={popup.isOpen}
-      onClose={hidePopup}
-      onComplete={handleComplete}
-    />
-  );
 }

src/components/server/ServerCreationProgressClient.tsx

@@ -0,0 +1,432 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { useWebSocket } from '@/lib/websocket/context';
+import {
+	WebSocketMessage,
+	StepData,
+	SteamOutputData,
+	ErrorData,
+	CompleteData
+} from '@/lib/websocket/client';
+
+interface ServerCreationProgressClientProps {
+	serverId: string;
+}
+
+interface ConsoleEntry {
+	id: string;
+	timestamp: number;
+	type: 'step' | 'steam_output' | 'error' | 'complete';
+	content: string;
+	level: 'info' | 'success' | 'warning' | 'error';
+}
+
+interface StepStatus {
+	step: string;
+	status: 'pending' | 'in_progress' | 'completed' | 'failed';
+	message: string;
+}
+
+const STEPS = [
+	{ key: 'validation', label: 'Validation' },
+	{ key: 'directory_creation', label: 'Directory Creation' },
+	{ key: 'steam_download', label: 'Steam Download' },
+	{ key: 'config_generation', label: 'Config Generation' },
+	{ key: 'service_creation', label: 'Service Creation' },
+	{ key: 'firewall_rules', label: 'Firewall Rules' },
+	{ key: 'database_save', label: 'Database Save' },
+	{ key: 'completed', label: 'Completed' }
+];
+
+export function ServerCreationProgressClient({ serverId }: ServerCreationProgressClientProps) {
+	const [entries, setEntries] = useState<ConsoleEntry[]>([]);
+	const [steps, setSteps] = useState<Record<string, StepStatus>>({});
+	const [isCompleted, setIsCompleted] = useState(false);
+	const [completionResult, setCompletionResult] = useState<{
+		success: boolean;
+		message: string;
+	} | null>(null);
+	const [isMinimized, setIsMinimized] = useState(false);
+
+	const {
+		associateWithServer,
+		addMessageHandler,
+		removeMessageHandler,
+		connectionStatus,
+		connectionError,
+		reconnect
+	} = useWebSocket();
+	const router = useRouter();
+	const consoleRef = useRef<HTMLDivElement>(null);
+
+	const addEntry = (entry: Omit<ConsoleEntry, 'id'>) => {
+		const newEntry = {
+			...entry,
+			id: `${Date.now()}-${Math.random()}`
+		};
+		setEntries((prev) => [...prev, newEntry]);
+	};
+
+	const scrollToBottom = () => {
+		if (consoleRef.current && !isMinimized) {
+			consoleRef.current.scrollTop = consoleRef.current.scrollHeight;
+		}
+	};
+
+	useEffect(() => {
+		scrollToBottom();
+	}, [entries, isMinimized]);
+
+	useEffect(() => {
+		if (serverId) {
+			associateWithServer(serverId);
+		}
+	}, [serverId, associateWithServer]);
+
+	useEffect(() => {
+		const handleMessage = (message: WebSocketMessage) => {
+			if (message.server_id !== serverId) return;
+
+			const timestamp = message.timestamp;
+
+			switch (message.type) {
+				case 'step': {
+					const data = message.data as StepData;
+					setSteps((prev) => ({
+						...prev,
+						[data.step]: {
+							step: data.step,
+							status: data.status,
+							message: data.message
+						}
+					}));
+
+					let level: ConsoleEntry['level'] = 'info';
+					if (data.status === 'completed') level = 'success';
+					else if (data.status === 'failed') level = 'error';
+					else if (data.status === 'in_progress') level = 'warning';
+
+					addEntry({
+						timestamp,
+						type: 'step',
+						content: `[${data.step.toUpperCase()}] ${data.message}${data.error ? ` - ${data.error}` : ''}`,
+						level
+					});
+					break;
+				}
+
+				case 'steam_output': {
+					const data = message.data as SteamOutputData;
+					addEntry({
+						timestamp,
+						type: 'steam_output',
+						content: data.output,
+						level: data.is_error ? 'error' : 'info'
+					});
+					break;
+				}
+
+				case 'error': {
+					const data = message.data as ErrorData;
+					addEntry({
+						timestamp,
+						type: 'error',
+						content: `ERROR: ${data.error}${data.details ? ` - ${data.details}` : ''}`,
+						level: 'error'
+					});
+					break;
+				}
+
+				case 'complete': {
+					const data = message.data as CompleteData;
+					setIsCompleted(true);
+					setCompletionResult({ success: data.success, message: data.message });
+
+					addEntry({
+						timestamp,
+						type: 'complete',
+						content: `COMPLETED: ${data.message}`,
+						level: data.success ? 'success' : 'error'
+					});
+					break;
+				}
+			}
+		};
+
+		addMessageHandler(handleMessage);
+		return () => {
+			removeMessageHandler(handleMessage);
+		};
+	}, [addMessageHandler, removeMessageHandler, serverId]);
+
+	const handleReturnToDashboard = () => {
+		router.push('/dashboard');
+	};
+
+	const handleReconnect = async () => {
+		try {
+			await reconnect();
+		} catch (error) {
+			console.error('Failed to reconnect:', error);
+		}
+	};
+
+	const getStepStatusIcon = (status: StepStatus['status']) => {
+		switch (status) {
+			case 'pending':
+				return '⏳';
+			case 'in_progress':
+				return '🔄';
+			case 'completed':
+				return '✅';
+			case 'failed':
+				return '❌';
+		}
+	};
+
+	const getEntryClassName = (level: ConsoleEntry['level']) => {
+		switch (level) {
+			case 'success':
+				return 'text-green-400';
+			case 'warning':
+				return 'text-yellow-400';
+			case 'error':
+				return 'text-red-400';
+			default:
+				return 'text-gray-300';
+		}
+	};
+
+	const getConnectionStatusColor = () => {
+		switch (connectionStatus) {
+			case 'connected':
+				return 'text-green-400';
+			case 'connecting':
+				return 'text-yellow-400';
+			case 'disconnected':
+				return 'text-gray-400';
+			case 'error':
+				return 'text-red-400';
+		}
+	};
+
+	const getConnectionStatusIcon = () => {
+		switch (connectionStatus) {
+			case 'connected':
+				return '🟢';
+			case 'connecting':
+				return '🟡';
+			case 'disconnected':
+				return '⚫';
+			case 'error':
+				return '🔴';
+		}
+	};
+
+	return (
+		<div className="min-h-screen bg-gray-900 text-white">
+			{/* Header */}
+			<header className="bg-gray-800 shadow-md">
+				<div className="mx-auto flex max-w-[120rem] items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
+					<div className="flex items-center space-x-4">
+						<Link
+							href="/dashboard"
+							className="text-gray-400 hover:text-white"
+							title="Back to Dashboard"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								className="h-6 w-6"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth="2"
+									d="M10 19l-7-7m0 0l7-7m-7 7h18"
+								/>
+							</svg>
+						</Link>
+						<h1 className="text-xl font-bold">Server Creation Progress</h1>
+					</div>
+					<div className="flex items-center space-x-4">
+						{/* Connection Status */}
+						<div className="flex items-center space-x-2">
+							<span className="text-lg">{getConnectionStatusIcon()}</span>
+							<span className={`text-sm ${getConnectionStatusColor()}`}>
+								{connectionStatus === 'connected' && 'Connected'}
+								{connectionStatus === 'connecting' && 'Connecting...'}
+								{connectionStatus === 'disconnected' && 'Disconnected'}
+								{connectionStatus === 'error' && 'Connection Error'}
+							</span>
+							{(connectionStatus === 'disconnected' || connectionStatus === 'error') && (
+								<button
+									onClick={handleReconnect}
+									className="rounded bg-blue-600 px-2 py-1 text-xs hover:bg-blue-700"
+									title="Reconnect to WebSocket"
+								>
+									Reconnect
+								</button>
+							)}
+						</div>
+
+						<button
+							onClick={() => setIsMinimized(!isMinimized)}
+							className="text-gray-400 hover:text-white"
+							title={isMinimized ? 'Expand Console' : 'Minimize Console'}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								className="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								{isMinimized ? (
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth="2"
+										d="M7 14l3-3 3 3"
+									/>
+								) : (
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth="2"
+										d="M17 10l-3 3-3-3"
+									/>
+								)}
+							</svg>
+						</button>
+						{isCompleted && (
+							<button
+								onClick={handleReturnToDashboard}
+								className={`rounded-md px-4 py-2 text-sm font-medium ${
+									completionResult?.success
+										? 'bg-green-600 hover:bg-green-700'
+										: 'bg-red-600 hover:bg-red-700'
+								}`}
+							>
+								{completionResult?.success ? 'Return to Dashboard' : 'Back to Dashboard'}
+							</button>
+						)}
+					</div>
+				</div>
+			</header>
+
+			{/* Connection Error Banner */}
+			{(connectionStatus === 'disconnected' || connectionStatus === 'error') && (
+				<div className="border-l-4 border-red-400 bg-red-600 p-4">
+					<div className="flex items-center justify-between">
+						<div className="flex items-center">
+							<div className="flex-shrink-0">
+								<svg className="h-5 w-5 text-red-50" viewBox="0 0 20 20" fill="currentColor">
+									<path
+										fillRule="evenodd"
+										d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+										clipRule="evenodd"
+									/>
+								</svg>
+							</div>
+							<div className="ml-3">
+								<p className="text-sm text-red-50">
+									<strong>WebSocket Connection Lost</strong> -
+									{connectionError
+										? ` ${connectionError}`
+										: ' Unable to receive real-time updates.'}{' '}
+									Progress may not be current.
+								</p>
+							</div>
+						</div>
+						<button
+							onClick={handleReconnect}
+							className="rounded bg-red-700 px-3 py-1 text-sm text-red-50 hover:bg-red-800"
+						>
+							Reconnect
+						</button>
+					</div>
+				</div>
+			)}
+
+			<main className="mx-auto max-w-[120rem] px-4 py-6 sm:px-6 lg:px-8">
+				<div className="space-y-6">
+					{/* Steps Progress */}
+					<div className="rounded-lg bg-gray-800 p-6">
+						<h2 className="mb-4 text-lg font-medium text-gray-300">Progress Steps</h2>
+						<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+							{STEPS.map(({ key, label }) => {
+								const stepStatus = steps[key];
+								return (
+									<div
+										key={key}
+										className={`flex items-center space-x-3 rounded-lg p-3 text-sm ${
+											stepStatus?.status === 'completed'
+												? 'bg-green-900/50 text-green-100'
+												: stepStatus?.status === 'in_progress'
+													? 'bg-yellow-900/50 text-yellow-100'
+													: stepStatus?.status === 'failed'
+														? 'bg-red-900/50 text-red-100'
+														: 'bg-gray-700 text-gray-300'
+										}`}
+									>
+										<span className="text-lg">
+											{getStepStatusIcon(stepStatus?.status || 'pending')}
+										</span>
+										<span className="font-medium">{label}</span>
+									</div>
+								);
+							})}
+						</div>
+					</div>
+
+					{/* Console Output */}
+					{!isMinimized && (
+						<div className="rounded-lg bg-gray-800">
+							<div className="flex items-center justify-between border-b border-gray-700 p-4">
+								<h2 className="text-lg font-medium text-gray-300">Console Output</h2>
+								<div className="text-sm text-gray-400">{entries.length} log entries</div>
+							</div>
+							<div className="h-96 overflow-hidden rounded-b-lg bg-black p-4">
+								<div
+									ref={consoleRef}
+									className="h-full space-y-1 overflow-y-auto font-mono text-sm"
+								>
+									{entries.map((entry) => (
+										<div
+											key={entry.id}
+											className={`${getEntryClassName(entry.level)} leading-tight`}
+										>
+											<span className="text-xs text-gray-500">
+												{new Date(entry.timestamp * 1000).toLocaleTimeString()}
+											</span>{' '}
+											<span>{entry.content}</span>
+										</div>
+									))}
+									{entries.length === 0 && (
+										<div className="py-8 text-center text-gray-500">
+											Waiting for server creation to begin...
+										</div>
+									)}
+								</div>
+							</div>
+						</div>
+					)}
+
+					{isMinimized && (
+						<div className="rounded-lg bg-gray-800 p-4">
+							<div className="text-center text-gray-400">
+								Console minimized - click the expand button in the header to view output
+							</div>
+						</div>
+					)}
+				</div>
+			</main>
+		</div>
+	);
+}

src/components/server/ServerListWithActions.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Server } from '@/lib/types/server';
 import { User, hasPermission } from '@/lib/types/user';
 import { ServerCard } from './ServerCard';
@@ -17,6 +17,7 @@ export function ServerListWithActions({ servers, user }: ServerListWithActionsPr
 	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 	const { isSteamCMDRunning } = useSteamCMD();
 
+	const handleOnClose = useCallback(() => setIsCreateModalOpen(false), []);
 	const canCreateServer = hasPermission(user, 'server.create');
 
 	return (
@@ -44,7 +45,7 @@ export function ServerListWithActions({ servers, user }: ServerListWithActionsPr
 				))}
 			</div>
 
-			<CreateServerModal isOpen={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} />
+			<CreateServerModal isOpen={isCreateModalOpen} onClose={handleOnClose} />
 		</>
 	);
 }

src/components/ui/RefreshButton.tsx

@@ -1,9 +1,12 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
+
 export default function RefreshButton() {
+	const router = useRouter();
 	return (
 		<button
-			onClick={() => window.location.reload()}
+			onClick={() => router.refresh()}
 			className="rounded-md bg-gray-700 px-3 py-1 text-sm hover:bg-gray-600"
 		>
 			Refresh

src/components/websocket/WebSocketInitializer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useWebSocket } from '@/lib/websocket/context';
 
 interface WebSocketInitializerProps {
@@ -8,20 +8,18 @@ interface WebSocketInitializerProps {
 }
 
 export function WebSocketInitializer({ openToken }: WebSocketInitializerProps) {
-	const { connect, disconnect, isConnected } = useWebSocket();
+	const { connect, isConnected } = useWebSocket();
+	const hasInitialized = useRef(false);
 
 	useEffect(() => {
-		console.log({ openToken, connect, disconnect, isConnected });
+		if (openToken && !isConnected && !hasInitialized.current) {
-		if (openToken && !isConnected) {
+			hasInitialized.current = true;
 			connect(openToken).catch((error) => {
 				console.error('Failed to connect WebSocket:', error);
+				hasInitialized.current = false;
 			});
 		}
+	}, [openToken, connect, isConnected]);
 
-		return () => {
+	return null;
-			disconnect();
-		};
-	}, [openToken, connect, disconnect, isConnected]);
-
-	return null; // This component doesn't render anything
 }

src/lib/actions/servers.ts

@@ -1,6 +1,6 @@
 'use server';
 
-import { revalidatePath } from 'next/cache';
+import { revalidatePath, revalidateTag } from 'next/cache';
 import { requireAuth } from '@/lib/auth/server';
 import { startService, stopService, restartService } from '@/lib/api/server/servers';
 
@@ -10,6 +10,7 @@ export async function startServerAction(serverId: string) {
 		await startService(session.token!, serverId);
 		revalidatePath('/dashboard');
 		revalidatePath(`/dashboard/server/${serverId}`);
+		revalidateTag('/server');
 	} catch (error) {
 		return {
 			success: false,
@@ -28,6 +29,7 @@ export async function stopServerAction(serverId: string) {
 		await stopService(session.token!, serverId);
 		revalidatePath('/dashboard');
 		revalidatePath(`/dashboard/server/${serverId}`);
+		revalidateTag('/server');
 	} catch (error) {
 		return {
 			success: false,
@@ -46,6 +48,7 @@ export async function restartServerAction(serverId: string) {
 		await restartService(session.token!, serverId);
 		revalidatePath('/dashboard');
 		revalidatePath(`/dashboard/server/${serverId}`);
+		revalidateTag('/server');
 	} catch (error) {
 		return {
 			success: false,

src/lib/api/server/base.ts

@@ -22,7 +22,8 @@ export async function fetchServerAPI<T>(
 	const response = await fetch(`${BASE_URL}${endpoint}`, {
 		method,
 		headers,
-		body: body ? JSON.stringify(body) : undefined
+		body: body ? JSON.stringify(body) : undefined,
+		next: { tags: [endpoint] }
 	});
 
 	if (!response.ok) {

src/lib/context/ServerCreationPopupContext.tsx

@@ -1,61 +1,61 @@
 'use client';
 
-import { createContext, useContext, useState, ReactNode } from 'react';
+import { createContext, useContext, useState, ReactNode, useCallback } from 'react';
 
 interface ServerCreationPopupState {
-  serverId: string;
+	serverId: string;
-  serverName: string;
+	serverName: string;
-  isOpen: boolean;
+	isOpen: boolean;
 }
 
 interface ServerCreationPopupContextType {
-  popup: ServerCreationPopupState | null;
+	popup: ServerCreationPopupState | null;
-  showPopup: (serverId: string, serverName: string) => void;
+	showPopup: (serverId: string, serverName: string) => void;
-  hidePopup: () => void;
+	hidePopup: () => void;
-  isPopupOpen: boolean;
+	isPopupOpen: boolean;
 }
 
 const ServerCreationPopupContext = createContext<ServerCreationPopupContextType | null>(null);
 
 export function useServerCreationPopup() {
-  const context = useContext(ServerCreationPopupContext);
+	const context = useContext(ServerCreationPopupContext);
-  if (!context) {
+	if (!context) {
-    throw new Error('useServerCreationPopup must be used within a ServerCreationPopupProvider');
+		throw new Error('useServerCreationPopup must be used within a ServerCreationPopupProvider');
-  }
+	}
-  return context;
+	return context;
 }
 
 interface ServerCreationPopupProviderProps {
-  children: ReactNode;
+	children: ReactNode;
 }
 
 export function ServerCreationPopupProvider({ children }: ServerCreationPopupProviderProps) {
-  const [popup, setPopup] = useState<ServerCreationPopupState | null>(null);
+	const [popup, setPopup] = useState<ServerCreationPopupState | null>(null);
 
-  const showPopup = (serverId: string, serverName: string) => {
+	const showPopup = useCallback((serverId: string, serverName: string) => {
-    setPopup({
+		setPopup({
-      serverId,
+			serverId,
-      serverName,
+			serverName,
-      isOpen: true
+			isOpen: true
-    });
+		});
-  };
+	}, []);
 
-  const hidePopup = () => {
+	const hidePopup = useCallback(() => {
-    setPopup(null);
+		setPopup(null);
-  };
+	}, []);
 
-  const isPopupOpen = popup?.isOpen || false;
+	const isPopupOpen = popup?.isOpen || false;
 
-  return (
+	return (
-    <ServerCreationPopupContext.Provider
+		<ServerCreationPopupContext.Provider
-      value={{
+			value={{
-        popup,
+				popup,
-        showPopup,
+				showPopup,
-        hidePopup,
+				hidePopup,
-        isPopupOpen
+				isPopupOpen
-      }}
+			}}
-    >
+		>
-      {children}
+			{children}
-    </ServerCreationPopupContext.Provider>
+		</ServerCreationPopupContext.Provider>
-  );
+	);
 }

src/lib/context/SteamCMDContext.tsx

@@ -1,69 +1,79 @@
 'use client';
 
-import { createContext, useContext, useState, ReactNode, useEffect } from 'react';
+import { createContext, useContext, useState, ReactNode, useEffect, useCallback } from 'react';
 import { useWebSocket } from '@/lib/websocket/context';
 import { WebSocketMessage, StepData } from '@/lib/websocket/client';
 
 interface SteamCMDContextType {
-  isSteamCMDRunning: boolean;
+	isSteamCMDRunning: boolean;
-  runningSteamServers: Set<string>;
+	runningSteamServers: Set<string>;
+	dissociateServer: (serverId: string) => void;
 }
 
 const SteamCMDContext = createContext<SteamCMDContextType | null>(null);
 
 export function useSteamCMD() {
-  const context = useContext(SteamCMDContext);
+	const context = useContext(SteamCMDContext);
-  if (!context) {
+	if (!context) {
-    throw new Error('useSteamCMD must be used within a SteamCMDProvider');
+		throw new Error('useSteamCMD must be used within a SteamCMDProvider');
-  }
+	}
-  return context;
+	return context;
 }
 
 interface SteamCMDProviderProps {
-  children: ReactNode;
+	children: ReactNode;
 }
 
 export function SteamCMDProvider({ children }: SteamCMDProviderProps) {
-  const [runningSteamServers, setRunningSteamServers] = useState<Set<string>>(new Set());
+	const [runningSteamServers, setRunningSteamServers] = useState<Set<string>>(new Set());
-  const { addMessageHandler, removeMessageHandler } = useWebSocket();
+	const { addMessageHandler, removeMessageHandler } = useWebSocket();
 
-  const isSteamCMDRunning = runningSteamServers.size > 0;
+	const isSteamCMDRunning = runningSteamServers.size > 0;
 
-  useEffect(() => {
+	useEffect(() => {
-    const handleWebSocketMessage = (message: WebSocketMessage) => {
+		const handleWebSocketMessage = (message: WebSocketMessage) => {
-      if (message.type === 'step') {
+			if (message.type === 'step') {
-        const data = message.data as StepData;
+				const data = message.data as StepData;
 
-        if (data.step === 'steam_download') {
+				if (data.step === 'steam_download') {
-          setRunningSteamServers(prev => {
+					setRunningSteamServers((prev) => {
-            const newSet = new Set(prev);
+						const newSet = new Set(prev);
 
-            if (data.status === 'in_progress') {
+						if (data.status === 'in_progress') {
-              newSet.add(message.server_id);
+							newSet.add(message.server_id);
-            } else if (data.status === 'completed' || data.status === 'failed') {
+						} else if (data.status === 'completed' || data.status === 'failed') {
-              newSet.delete(message.server_id);
+							newSet.delete(message.server_id);
-            }
+						}
 
-            return newSet;
+						return newSet;
-          });
+					});
-        }
+				}
-      }
+			}
-    };
+		};
 
-    addMessageHandler(handleWebSocketMessage);
+		addMessageHandler(handleWebSocketMessage);
-    return () => {
+		return () => {
-      removeMessageHandler(handleWebSocketMessage);
+			removeMessageHandler(handleWebSocketMessage);
-    };
+		};
-  }, [addMessageHandler, removeMessageHandler]);
+	}, [addMessageHandler, removeMessageHandler]);
 
-  return (
+	const dissociateServer = useCallback((serverId: string) => {
-    <SteamCMDContext.Provider
+		setRunningSteamServers((prev) => {
-      value={{
+			const newSet = new Set(prev);
-        isSteamCMDRunning,
+			newSet.delete(serverId);
-        runningSteamServers
+			return newSet;
-      }}
+		});
-    >
+	}, []);
-      {children}
+
-    </SteamCMDContext.Provider>
+	return (
-  );
+		<SteamCMDContext.Provider
+			value={{
+				isSteamCMDRunning,
+				runningSteamServers,
+				dissociateServer
+			}}
+		>
+			{children}
+		</SteamCMDContext.Provider>
+	);
 }

src/lib/types/config.ts

@@ -15,7 +15,6 @@ export enum ServerTab {
 	settings = 'settings'
 }
 
-// Configuration interfaces
 export interface Configuration {
 	udpPort: number;
 	tcpPort: number;

src/lib/types/index.ts

@@ -1,4 +1,3 @@
-// Re-export all types for easier imports
 export * from './server';
 export * from './user';
 export * from './config';

src/lib/types/user.ts

@@ -20,7 +20,7 @@ export function hasPermission(user: User | null, permission: string): boolean {
 	if (!user || !user.role || !user.role.permissions) {
 		return false;
 	}
-	// Super Admins have all permissions
+
 	if (user.role.name === 'Super Admin') {
 		return true;
 	}

src/lib/websocket/client.ts

@@ -1,4 +1,4 @@
-const BASE_URL = process.env.NEXT_PUBLIC_WEBSOCKET_BASE_URL || 'ws://localhost:8080';
+const BASE_URL = process.env.NEXT_PUBLIC_WEBSOCKET_URL || 'ws://localhost:3000/ws';
 
 export interface WebSocketMessage {
 	type: 'step' | 'steam_output' | 'error' | 'complete';
@@ -52,8 +52,8 @@ export class WebSocketClient {
 	private connectionPromise: Promise<void> | null = null;
 	private reconnectAttempts = 0;
 	private maxReconnectAttempts = 10;
-	private reconnectDelay = 1000; // Start with 1 second
+	private reconnectDelay = 1000; // 1 second
-	private maxReconnectDelay = 30000; // Max 30 seconds
+	private maxReconnectDelay = 30000; // 30 seconds
 	private reconnectTimer: NodeJS.Timeout | null = null;
 	private shouldReconnect = true;
 	private associatedServerId: string | null = null;
@@ -80,7 +80,6 @@ export class WebSocketClient {
 					this.reconnectDelay = 5000;
 					this.notifyStatus('connected');
 
-					// Re-associate with server if we had one
 					if (this.associatedServerId) {
 						this.associateWithServer(this.associatedServerId);
 					}

src/lib/websocket/context.tsx

@@ -42,13 +42,16 @@ export function WebSocketProvider({ children }: WebSocketProviderProps) {
 
 	const connect = useCallback(
 		async (token: string) => {
+			if (client?.isConnected()) {
+				return;
+			}
+
 			if (client) {
 				client.disconnect();
 			}
 
 			const newClient = new WebSocketClient(token);
 
-			// Add connection status handler
 			const statusHandler: ConnectionStatusHandler = (status, error) => {
 				setConnectionStatus(status);
 				setIsConnected(status === 'connected');