update websocket url passing through server

move websocket base url inside of constructor
fix build errors
2025-09-18 23:14:45 +02:00 · 2025-09-18 22:56:47 +02:00 · 2025-09-18 22:12:40 +02:00 · 2025-09-18 22:04:34 +02:00 · 2025-09-18 01:34:16 +02:00 · 2025-09-14 21:44:54 +02:00
41 changed files with 2134 additions and 131 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "acc-server-manager-web",
-  "version": "0.20.1",
+  "version": "0.20.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "acc-server-manager-web",
-      "version": "0.20.1",
+      "version": "0.20.2",
      "dependencies": {
        "@date-fns/utc": "^2.1.1",
        "@hookform/resolvers": "^5.2.1",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "acc-server-manager-web",
-	"version": "0.20.1",
+	"version": "0.20.2",
 	"private": true,
 	"scripts": {
 		"dev": "next dev --turbopack",
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -5,6 +5,9 @@ import { ServerCard } from '@/components/server/ServerCard';
 import { logoutAction } from '@/lib/actions/auth';
 import RefreshButton from '@/components/ui/RefreshButton';
 import Link from 'next/link';
+import { ServerListWithActions } from '@/components/server/ServerListWithActions';
+import { WebSocketInitializer } from '@/components/websocket/WebSocketInitializer';
+import { SteamCMDNotification } from '@/components/ui/SteamCMDNotification';

 export default async function DashboardPage() {
 	const session = await requireAuth();
@@ -12,8 +15,9 @@ export default async function DashboardPage() {

 	return (
 		<div className="min-h-screen bg-gray-900 text-white">
+			<WebSocketInitializer openToken={session.openToken} />
 			<header className="bg-gray-800 shadow-md">
-				<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
+				<div className="mx-auto flex max-w-[120rem] items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
 					<h1 className="text-2xl font-bold">ACC Server Manager</h1>
 					<div className="flex items-center space-x-4">
 						{hasPermission(session.user!, 'membership.view') && (
@@ -61,17 +65,10 @@ export default async function DashboardPage() {
 				</div>
 			</header>

-			<main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-				<div className="mb-6 flex items-center justify-between">
-					<h2 className="text-xl font-semibold">Your Servers</h2>
-					<RefreshButton />
-				</div>
+			<SteamCMDNotification />

-				<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-					{servers.map((server) => (
-						<ServerCard key={server.id} server={server} />
-					))}
-				</div>
+			<main className="mx-auto max-w-[120rem] px-4 py-8 sm:px-6 lg:px-8">
+				<ServerListWithActions servers={servers} user={session.user!} />
 			</main>
 		</div>
 	);
--- a/src/app/dashboard/server/[id]/page.tsx
+++ b/src/app/dashboard/server/[id]/page.tsx
@@ -27,7 +27,7 @@ export default async function ServerPage({ params }: ServerPageProps) {

 	return (
 		<div className="min-h-screen bg-gray-900 text-white">
-			<div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+			<div className="mx-auto max-w-[120rem] px-4 py-8 sm:px-6 lg:px-8">
 				<ServerHeader server={server} />

 				<div className="mt-8">
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,10 @@
 import type { Metadata } from 'next';
 import './globals.css';
 import { QueryProvider } from '@/components/providers/QueryProvider';
+import { WebSocketProvider } from '@/lib/websocket/context';
+import { SteamCMDProvider } from '@/lib/context/SteamCMDContext';
+import { ServerCreationPopupProvider } from '@/lib/context/ServerCreationPopupContext';
+import { ServerCreationPopupContainer } from '@/components/server/ServerCreationPopupContainer';

 export const metadata: Metadata = {
 	title: 'ACC Server Manager',
@@ -15,7 +19,18 @@ export default function RootLayout({
 	return (
 		<html lang="en">
 			<body className="bg-gray-900 text-white antialiased">
-				<QueryProvider>{children}</QueryProvider>
+				<QueryProvider>
+					<WebSocketProvider
+						websocketURL={process.env.NEXT_PUBLIC_WEBSOCKET_URL || 'ws://localhost:3000/ws'}
+					>
+						<SteamCMDProvider>
+							<ServerCreationPopupProvider>
+								{children}
+								<ServerCreationPopupContainer />
+							</ServerCreationPopupProvider>
+						</SteamCMDProvider>
+					</WebSocketProvider>
+				</QueryProvider>
 			</body>
 		</html>
 	);
--- a/src/app/logout/route.ts
+++ b/src/app/logout/route.ts
@@ -0,0 +1,7 @@
+import { logout } from '@/lib/auth/server';
+import { redirect, RedirectType } from 'next/navigation';
+
+export async function GET() {
+	await logout();
+	redirect('/login', RedirectType.replace);
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,6 +7,6 @@ export default async function HomePage() {
 	if (session.token && session.user) {
 		redirect('/dashboard');
 	} else {
-		redirect('/login');
+		redirect('/logout');
 	}
 }
--- a/src/components/membership/CreateUserModal.tsx
+++ b/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);
 			}
--- a/src/components/membership/DeleteUserModal.tsx
+++ b/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);
 			}
--- a/src/components/membership/UserManagementTable.tsx
+++ b/src/components/membership/UserManagementTable.tsx
@@ -80,7 +80,7 @@ export function UserManagementTable({ initialData, roles, currentUser }: UserMan
 	return (
 		<>
 			<header className="bg-gray-800 shadow-md">
-				<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
+				<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-300 hover:text-white">
 							<svg
@@ -111,7 +111,7 @@ export function UserManagementTable({ initialData, roles, currentUser }: UserMan
 				</div>
 			</header>

-			<main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+			<main className="mx-auto max-w-[120rem] px-4 py-8 sm:px-6 lg:px-8">
 				{/* Filters */}
 				<div className="mb-6 rounded-lg border border-gray-700 bg-gray-800 p-4">
 					<h2 className="mb-3 text-lg font-semibold">Filters</h2>
--- a/src/components/server/CreateServerModal.tsx
+++ b/src/components/server/CreateServerModal.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import { useState, useEffect, useActionState, useTransition } from 'react';
+import { Modal } from '@/components/ui/Modal';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { createServerAction, type ServerActionResult } from '@/lib/actions/server-management';
+import { useServerCreationPopup } from '@/lib/context/ServerCreationPopupContext';
+
+interface CreateServerModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+}
+
+const initialState: ServerActionResult = { success: false, message: '', data: undefined };
+
+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] = useActionState(createServerAction, initialState);
+	const { showPopup } = useServerCreationPopup();
+
+	useEffect(() => {
+		if (state.success && state.data?.id) {
+			showPopup(state.data.id, submittedName);
+			onClose();
+			setIsSubmitting(false);
+		}
+	}, [state.success, state.data, showPopup, onClose, submittedName]);
+
+	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) =>
+		setTransition(async () => {
+			e.preventDefault();
+
+			if (!serverName.trim()) {
+				return;
+			}
+
+			setIsSubmitting(true);
+			const formData = new FormData();
+			formData.append('name', serverName.trim());
+			formAction(formData);
+			setSubmittedName(serverName.trim());
+			setServerName('');
+		});
+
+	const handleClose = () => {
+		if (isSubmitting) {
+			return;
+		}
+		onClose();
+		setServerName('');
+		setIsSubmitting(false);
+	};
+
+	return (
+		<Modal isOpen={isOpen} onClose={handleClose} title="Create New Server">
+			{!state.success && state.message && (
+				<div className="mb-4 rounded-md bg-red-900 p-3 text-sm text-red-300">{state.message}</div>
+			)}
+
+			<form onSubmit={handleSubmit}>
+				<div className="mb-6">
+					<label htmlFor="server-name" className="block text-sm font-medium text-gray-300">
+						Server Name
+					</label>
+					<input
+						id="server-name"
+						type="text"
+						value={serverName}
+						onChange={(e) => setServerName(e.target.value)}
+						required
+						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..."
+					/>
+				</div>
+
+				<div className="flex justify-end space-x-2">
+					<button
+						type="button"
+						onClick={handleClose}
+						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() || 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 ? (
+							<>
+								<LoadingSpinner className="mr-2 h-4 w-4" />
+								Creating...
+							</>
+						) : (
+							'Create Server'
+						)}
+					</button>
+				</div>
+			</form>
+		</Modal>
+	);
+}
--- a/src/components/server/DeleteServerModal.tsx
+++ b/src/components/server/DeleteServerModal.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { Modal } from '@/components/ui/Modal';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { deleteServerAction } from '@/lib/actions/server-management';
+import { Server } from '@/lib/types/server';
+
+interface DeleteServerModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	server: Server;
+}
+
+export function DeleteServerModal({ isOpen, onClose, server }: DeleteServerModalProps) {
+	const [error, setError] = useState<string | null>(null);
+	const [isPending, startTransition] = useTransition();
+
+	const handleDelete = () => {
+		setError(null);
+		startTransition(async () => {
+			try {
+				const result = await deleteServerAction(server.id);
+				if (result.success) {
+					onClose();
+				} else {
+					setError(result.message);
+				}
+			} catch (err) {
+				setError(err instanceof Error ? err.message : 'Failed to delete server');
+			}
+		});
+	};
+
+	const handleClose = () => {
+		if (isPending) {
+			return;
+		}
+		onClose();
+		setError(null);
+	};
+
+	return (
+		<Modal isOpen={isOpen} onClose={handleClose} title="Delete Server">
+			{error && <div className="mb-4 rounded-md bg-red-900 p-3 text-sm text-red-300">{error}</div>}
+
+			<div className="mb-6">
+				<p className="text-gray-300">
+					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>
+
+			<div className="flex justify-end space-x-2">
+				<button
+					onClick={handleClose}
+					disabled={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
+					onClick={handleDelete}
+					disabled={isPending}
+					className="flex items-center rounded-md bg-red-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-red-700 disabled:opacity-50"
+				>
+					{isPending ? (
+						<>
+							<LoadingSpinner size="sm" className="mr-2" />
+							Deleting...
+						</>
+					) : (
+						'Delete Server'
+					)}
+				</button>
+			</div>
+		</Modal>
+	);
+}
--- a/src/components/server/ServerCard.tsx
+++ b/src/components/server/ServerCard.tsx
@@ -1,88 +1,151 @@
 import Link from 'next/link';
+import { useState, useTransition } from 'react';
 import { Server, ServiceStatus, getStatusColor, serviceStatusToString } from '@/lib/types';
+import { User, hasPermission } from '@/lib/types/user';
 import {
 	startServerEventAction,
 	restartServerEventAction,
 	stopServerEventAction
 } from '@/lib/actions/servers';
+import { DeleteServerModal } from './DeleteServerModal';
+import { useRouter } from 'next/navigation';

 interface ServerCardProps {
 	server: Server;
+	user: User;
 }

-export function ServerCard({ server }: ServerCardProps) {
+export function ServerCard({ server, user }: ServerCardProps) {
+	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+	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 (
-		<div className="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-lg">
-			<Link href={`/dashboard/server/${server.id}`} className="block">
-				<div className="p-6">
-					<div className="flex items-start justify-between">
-						<div>
-							<h3 className="text-lg font-medium text-white">{server.name}</h3>
-							<div className="mt-2 flex items-center">
-								<span
-									className={`inline-block h-2 w-2 rounded-full ${getStatusColor(server.status)} mr-2`}
-								/>
-								<span className="text-sm text-gray-300 capitalize">
-									{serviceStatusToString(server.status)}
-								</span>
+		<>
+			<div className="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-lg">
+				<Link href={`/dashboard/server/${server.id}`} className="block">
+					<div className="p-6">
+						<div className="flex items-start justify-between">
+							<div>
+								<h3 className="text-lg font-medium text-white">{server.name}</h3>
+								<div className="mt-2 flex items-center">
+									<span
+										className={`inline-block h-2 w-2 rounded-full ${getStatusColor(server.status)} mr-2`}
+									/>
+									<span className="text-sm text-gray-300 capitalize">
+										{serviceStatusToString(server.status)}
+									</span>
+								</div>
+							</div>
+							<div className="flex items-center space-x-2">
+								{canDeleteServer && (
+									<button
+										onClick={(e) => {
+											e.preventDefault();
+											setIsDeleteModalOpen(true);
+										}}
+										className="text-gray-400 hover:text-red-400"
+										title="Delete Server"
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											className="h-5 w-5"
+											viewBox="0 0 20 20"
+											fill="currentColor"
+										>
+											<path
+												fillRule="evenodd"
+												d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9zM4 5a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 102 0v3a1 1 0 11-2 0V9zm4 0a1 1 0 10-2 0v3a1 1 0 002 0V9z"
+												clipRule="evenodd"
+											/>
+										</svg>
+									</button>
+								)}
+								<div className="text-gray-400 hover:text-white">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										className="h-5 w-5"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+									>
+										<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+									</svg>
+								</div>
 							</div>
 						</div>
-						<div className="text-gray-400 hover:text-white">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								className="h-5 w-5"
-								viewBox="0 0 20 20"
-								fill="currentColor"
-							>
-								<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
-							</svg>
+
+						<div className="mt-4 grid grid-cols-2 gap-4 text-sm text-gray-300">
+							<div>
+								<span className="text-gray-500">Track:</span>
+								<span className="ml-2">{server.state?.track || 'N/A'}</span>
+							</div>
+							<div>
+								<span className="text-gray-500">Players:</span>
+								<span className="ml-2">{server.state?.playerCount || 0}</span>
+							</div>
 						</div>
 					</div>
+				</Link>

-					<div className="mt-4 grid grid-cols-2 gap-4 text-sm text-gray-300">
-						<div>
-							<span className="text-gray-500">Track:</span>
-							<span className="ml-2">{server.state?.track || 'N/A'}</span>
-						</div>
-						<div>
-							<span className="text-gray-500">Players:</span>
-							<span className="ml-2">{server.state?.playerCount || 0}</span>
-						</div>
-					</div>
-				</div>
-			</Link>
-
-			<div className="flex justify-between gap-2 bg-gray-900 px-4 py-3">
-				<form action={startServerEventAction.bind(null, server.id)}>
+				<div className="flex justify-between gap-2 bg-gray-900 px-4 py-3">
 					<button
-						type="submit"
-						disabled={server.status === ServiceStatus.Running}
+						type="button"
+						onClick={startServer}
+						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"
 					>
 						Start
 					</button>
-				</form>

-				<form action={restartServerEventAction.bind(null, server.id)}>
 					<button
-						type="submit"
-						disabled={server.status === ServiceStatus.Stopped}
+						type="button"
+						onClick={restartServer}
+						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"
 					>
 						Restart
 					</button>
-				</form>

-				<form action={stopServerEventAction.bind(null, server.id)}>
 					<button
-						type="submit"
-						disabled={server.status === ServiceStatus.Stopped}
+						type="button"
+						onClick={stopServer}
+						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"
 					>
 						Stop
 					</button>
-				</form>
+				</div>
 			</div>
-		</div>
+
+			<DeleteServerModal
+				isOpen={isDeleteModalOpen}
+				onClose={() => setIsDeleteModalOpen(false)}
+				server={server}
+			/>
+		</>
 	);
 }
--- a/src/components/server/ServerCreationPopup.tsx
+++ b/src/components/server/ServerCreationPopup.tsx
@@ -0,0 +1,477 @@
+'use client';
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { useWebSocket } from '@/lib/websocket/context';
+import {
+	WebSocketMessage,
+	StepData,
+	SteamOutputData,
+	ErrorData,
+	CompleteData
+} from '@/lib/websocket/client';
+
+interface ServerCreationPopupProps {
+	serverId: string;
+	serverName: string;
+	isOpen: boolean;
+	onClose: () => void;
+	onComplete?: (success: boolean, message: string) => void;
+}
+
+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 ServerCreationPopup({
+	serverId,
+	serverName,
+	isOpen,
+	onClose,
+	onComplete
+}: ServerCreationPopupProps) {
+	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 [isConsoleVisible, setIsConsoleVisible] = useState(true);
+
+	const {
+		associateWithServer,
+		addMessageHandler,
+		removeMessageHandler,
+		connectionStatus,
+		reconnect
+	} = useWebSocket();
+
+	const consoleRef = useRef<HTMLDivElement>(null);
+
+	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) {
+			consoleRef.current.scrollTop = consoleRef.current.scrollHeight;
+		}
+	};
+
+	useEffect(() => {
+		scrollToBottom();
+	}, [entries, isMinimized, isConsoleVisible]);
+
+	useEffect(() => {
+		if (serverId && isOpen) {
+			associateWithServer(serverId);
+		}
+	}, [serverId, isOpen, associateWithServer]);
+
+	const handleMessage = useCallback(
+		(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) => {
+						const updatedSteps = { ...prev };
+
+						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';
+					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;
+
+					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',
+						content: data.output,
+						level: data.is_error ? 'error' : 'info'
+					});
+					break;
+				}
+
+				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',
+						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'
+					});
+
+					onComplete?.(data.success, data.message);
+					break;
+				}
+			}
+		},
+		[serverId, addEntry, onComplete]
+	);
+
+	useEffect(() => {
+		if (isOpen) {
+			addMessageHandler(handleMessage);
+			return () => {
+				removeMessageHandler(handleMessage);
+			};
+		}
+	}, [addMessageHandler, removeMessageHandler, handleMessage, isOpen]);
+
+	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 getConnectionStatusIcon = () => {
+		switch (connectionStatus) {
+			case 'connected':
+				return '🟢';
+			case 'connecting':
+				return '🟡';
+			case 'disconnected':
+				return '⚫';
+			case 'error':
+				return '🔴';
+		}
+	};
+
+	const getCurrentProgress = () => {
+		const completedSteps = Object.values(steps).filter(
+			(step) => step.status === 'completed'
+		).length;
+		const totalSteps = STEPS.length;
+		return { completed: completedSteps, total: totalSteps };
+	};
+
+	if (!isOpen) return null;
+
+	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-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 ${
+						isCompleted
+							? completionResult?.success
+								? 'border-green-400 bg-green-600 hover:bg-green-700'
+								: 'border-red-400 bg-red-600 hover:bg-red-700'
+							: 'border-blue-400 bg-blue-600 hover:bg-blue-700'
+					}`}
+					title={`Server Creation: ${serverName} - ${progress.completed}/${progress.total} steps`}
+				>
+					<div className="text-center text-white">
+						{isCompleted ? (
+							<span className="text-2xl">{completionResult?.success ? '✅' : '❌'}</span>
+						) : (
+							<>
+								<div className="text-xs font-bold">
+									{progress.completed}/{progress.total}
+								</div>
+								{isProgressing && <div className="animate-pulse text-xs">⚡</div>}
+							</>
+						)}
+					</div>
+
+					{!isCompleted && (
+						<svg className="absolute inset-0 h-16 w-16 -rotate-90 transform">
+							<circle
+								cx="32"
+								cy="32"
+								r="28"
+								stroke="currentColor"
+								strokeWidth="4"
+								fill="none"
+								className="text-gray-300 opacity-20"
+							/>
+							<circle
+								cx="32"
+								cy="32"
+								r="28"
+								stroke="currentColor"
+								strokeWidth="4"
+								fill="none"
+								strokeDasharray={`${(progress.completed / progress.total) * 175.929} 175.929`}
+								className="text-white transition-all duration-500"
+							/>
+						</svg>
+					)}
+				</button>
+			</div>
+		);
+	}
+
+	return (
+		<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">
+			<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>
+					<h3 className="truncate font-medium text-white">{serverName}</h3>
+				</div>
+
+				<div className="flex items-center space-x-2">
+					<div className="flex items-center space-x-1">
+						<span className="text-sm">{getConnectionStatusIcon()}</span>
+						{(connectionStatus === 'disconnected' || connectionStatus === 'error') && (
+							<button
+								onClick={handleReconnect}
+								className="rounded bg-blue-600 px-1 py-0.5 text-xs hover:bg-blue-700"
+								title="Reconnect"
+							>
+								🔄
+							</button>
+						)}
+					</div>
+
+					<button
+						onClick={() => setIsConsoleVisible(!isConsoleVisible)}
+						className="text-sm text-gray-400 hover:text-white"
+						title={isConsoleVisible ? 'Hide Console' : 'Show Console'}
+					>
+						📋
+					</button>
+
+					<button
+						onClick={() => setIsMinimized(true)}
+						className="text-gray-400 hover:text-white"
+						title="Minimize"
+					>
+						<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
+						</svg>
+					</button>
+
+					<button onClick={onClose} className="text-gray-400 hover:text-white" title="Close">
+						<svg className="h-4 w-4" 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>
+
+			<div className="border-b border-gray-700 p-4">
+				<div className="grid grid-cols-2 gap-2">
+					{STEPS.map(({ key, label }) => {
+						const stepStatus = steps[key];
+						return (
+							<div
+								key={key}
+								className={`flex items-center space-x-2 rounded p-2 text-xs ${
+									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>{getStepStatusIcon(stepStatus?.status || 'pending')}</span>
+								<span className="truncate">{label}</span>
+							</div>
+						);
+					})}
+				</div>
+			</div>
+
+			{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">
+						{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>
+			)}
+
+			{isCompleted && (
+				<div
+					className={`p-3 text-center text-sm ${
+						completionResult?.success
+							? 'bg-green-900/50 text-green-100'
+							: 'bg-red-900/50 text-red-100'
+					}`}
+				>
+					{completionResult?.message}
+				</div>
+			)}
+		</div>
+	);
+}
--- a/src/components/server/ServerCreationPopupContainer.tsx
+++ b/src/components/server/ServerCreationPopupContainer.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+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 { dissociateServer } = useSteamCMD();
+	const handleClose = useCallback(() => {
+		hidePopup();
+		if (popup) return dissociateServer(popup.serverId);
+	}, [popup, dissociateServer, hidePopup]);
+	if (!popup) return null;
+
+	const handleComplete = (success: boolean) => {
+		if (success) {
+			setTimeout(() => {
+				window.location.reload();
+			}, 2000);
+		}
+	};
+
+	return (
+		<ServerCreationPopup
+			serverId={popup.serverId}
+			serverName={popup.serverName}
+			isOpen={popup.isOpen}
+			onClose={handleClose}
+			onComplete={handleComplete}
+		/>
+	);
+}
--- a/src/components/server/ServerCreationProgressClient.tsx
+++ b/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>
+	);
+}
--- a/src/components/server/ServerListWithActions.tsx
+++ b/src/components/server/ServerListWithActions.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import { Server } from '@/lib/types/server';
+import { User, hasPermission } from '@/lib/types/user';
+import { ServerCard } from './ServerCard';
+import { CreateServerModal } from './CreateServerModal';
+import RefreshButton from '@/components/ui/RefreshButton';
+import { useSteamCMD } from '@/lib/context/SteamCMDContext';
+
+interface ServerListWithActionsProps {
+	servers: Server[];
+	user: User;
+}
+
+export function ServerListWithActions({ servers, user }: ServerListWithActionsProps) {
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+	const { isSteamCMDRunning } = useSteamCMD();
+
+	const handleOnClose = useCallback(() => setIsCreateModalOpen(false), []);
+	const canCreateServer = hasPermission(user, 'server.create');
+
+	return (
+		<>
+			<div className="mb-6 flex items-center justify-between">
+				<h2 className="text-xl font-semibold">Your Servers</h2>
+				<div className="flex items-center space-x-4">
+					{canCreateServer && (
+						<button
+							onClick={() => setIsCreateModalOpen(true)}
+							disabled={isSteamCMDRunning}
+							className="rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+							title={isSteamCMDRunning ? 'Server creation disabled while SteamCMD is running' : ''}
+						>
+							Create Server
+						</button>
+					)}
+					<RefreshButton />
+				</div>
+			</div>
+
+			<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+				{servers.map((server) => (
+					<ServerCard key={server.id} server={server} user={user} />
+				))}
+			</div>
+
+			<CreateServerModal isOpen={isCreateModalOpen} onClose={handleOnClose} />
+		</>
+	);
+}
--- a/src/components/statistics/StatisticsDashboard.tsx
+++ b/src/components/statistics/StatisticsDashboard.tsx
@@ -40,13 +40,13 @@ export function StatisticsDashboard({ stats }: StatisticsDashboardProps) {
 			</div>

 			{/* Charts */}
-			<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-				<div className="rounded-lg bg-gray-800 p-6">
+			<div className="grid grid-cols-12 gap-4">
+				<div className="col-span-9 rounded-lg bg-gray-800 p-6">
 					<h3 className="mb-4 text-lg font-medium text-white">Player Count Over Time</h3>
 					<PlayerCountChart data={stats.playerCountOverTime ?? []} />
 				</div>

-				<div className="rounded-lg bg-gray-800 p-6">
+				<div className="col-span-3 rounded-lg bg-gray-800 p-6">
 					<h3 className="mb-4 text-lg font-medium text-white">Session Types</h3>
 					<SessionTypesChart data={stats.sessionTypes ?? []} />
 				</div>
--- a/src/components/ui/RefreshButton.tsx
+++ b/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
--- a/src/components/ui/SteamCMDNotification.tsx
+++ b/src/components/ui/SteamCMDNotification.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { useSteamCMD } from '@/lib/context/SteamCMDContext';
+
+export function SteamCMDNotification() {
+  const { isSteamCMDRunning, runningSteamServers } = useSteamCMD();
+
+  if (!isSteamCMDRunning) {
+    return null;
+  }
+
+  const serverCount = runningSteamServers.size;
+
+  return (
+    <div className="bg-yellow-600 border-l-4 border-yellow-400 p-4">
+      <div className="flex items-center">
+        <div className="flex-shrink-0">
+          <svg
+            className="h-5 w-5 text-yellow-50"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </div>
+        <div className="ml-3">
+          <p className="text-sm text-yellow-50">
+            <strong>SteamCMD is currently running</strong> for {serverCount} server{serverCount !== 1 ? 's' : ''}.
+            Server actions are temporarily disabled to prevent conflicts.
+            This will automatically resolve when the download completes.
+          </p>
+        </div>
+        <div className="ml-auto flex-shrink-0">
+          <div className="flex items-center">
+            <div className="animate-spin h-4 w-4 border-2 border-yellow-50 border-t-transparent rounded-full mr-2"></div>
+            <span className="text-xs text-yellow-50">Downloading...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/websocket/WebSocketInitializer.tsx
+++ b/src/components/websocket/WebSocketInitializer.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useWebSocket } from '@/lib/websocket/context';
+
+interface WebSocketInitializerProps {
+	openToken?: string;
+}
+
+export function WebSocketInitializer({ openToken }: WebSocketInitializerProps) {
+	const { connect, isConnected } = useWebSocket();
+	const hasInitialized = useRef(false);
+
+	useEffect(() => {
+		if (openToken && !isConnected && !hasInitialized.current) {
+			hasInitialized.current = true;
+			connect(openToken).catch((error) => {
+				console.error('Failed to connect WebSocket:', error);
+				hasInitialized.current = false;
+			});
+		}
+	}, [openToken, connect, isConnected]);
+
+	return null;
+}
--- a/src/lib/actions/auth.ts
+++ b/src/lib/actions/auth.ts
@@ -1,8 +1,8 @@
 'use server';

 import { redirect } from 'next/navigation';
-import { loginUser } from '@/lib/api/server/auth';
-import { login, logout } from '@/lib/auth/server';
+import { loginUser, getOpenToken } from '@/lib/api/server/auth';
+import { login } from '@/lib/auth/server';

 export type LoginResult = {
 	success: boolean;
@@ -24,7 +24,8 @@ export async function loginAction(prevState: LoginResult, formData: FormData) {
 		const result = await loginUser(username, password);

 		if (result.token && result.user) {
-			await login(result.token, result.user);
+			const openToken = await getOpenToken(result.token);
+			await login(result.token, result.user, openToken);
 		} else {
 			return {
 				success: false,
@@ -42,6 +43,5 @@ export async function loginAction(prevState: LoginResult, formData: FormData) {
 }

 export async function logoutAction() {
-	await logout();
-	redirect('/login');
+	redirect('/logout');
 }
--- a/src/lib/actions/server-management.ts
+++ b/src/lib/actions/server-management.ts
@@ -0,0 +1,64 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { requireAuth } from '@/lib/auth/server';
+import { createServer, deleteServer } from '@/lib/api/server/servers';
+
+export type ServerActionData = {
+	id: string;
+};
+
+export type ServerActionResult = {
+	success: boolean;
+	message: string;
+	data?: ServerActionData;
+};
+
+export async function createServerAction(
+	prevState: ServerActionResult,
+	formData: FormData
+): Promise<ServerActionResult> {
+	try {
+		const session = await requireAuth();
+		const name = formData.get('name') as string;
+
+		if (!name?.trim()) {
+			return {
+				success: false,
+				message: 'Server name is required'
+			};
+		}
+
+		const server = await createServer(session.token!, name.trim());
+		revalidatePath('/dashboard');
+
+		return {
+			success: true,
+			message: 'Server creation started',
+			data: server
+		};
+	} catch (error) {
+		return {
+			success: false,
+			message: error instanceof Error ? error.message : 'Failed to create server'
+		};
+	}
+}
+
+export async function deleteServerAction(serverId: string): Promise<ServerActionResult> {
+	try {
+		const session = await requireAuth();
+		await deleteServer(session.token!, serverId);
+		revalidatePath('/dashboard');
+
+		return {
+			success: true,
+			message: 'Server deleted successfully'
+		};
+	} catch (error) {
+		return {
+			success: false,
+			message: error instanceof Error ? error.message : 'Failed to delete server'
+		};
+	}
+}
--- a/src/lib/actions/servers.ts
+++ b/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,
--- a/src/lib/api/client/base.ts
+++ b/src/lib/api/client/base.ts
@@ -0,0 +1,55 @@
+'use client';
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080';
+
+export type ClientApiResponse<T> = {
+	data?: T;
+	error?: string;
+	message?: string;
+};
+
+export async function fetchClientAPI<T>(
+	endpoint: string,
+	method: string = 'GET',
+	body?: object,
+	customToken?: string
+): Promise<ClientApiResponse<T>> {
+	let token = customToken;
+
+	if (!token) {
+		const response = await fetch('/api/session');
+		if (response.ok) {
+			const session = await response.json();
+			token = session.openToken;
+		}
+
+		if (!token) {
+			throw new Error('No authentication token available');
+		}
+	}
+
+	const headers: Record<string, string> = {
+		'Content-Type': 'application/json',
+		Authorization: `Bearer ${token}`
+	};
+
+	const response = await fetch(`${BASE_URL}${endpoint}`, {
+		method,
+		headers,
+		body: body ? JSON.stringify(body) : undefined
+	});
+
+	if (!response.ok) {
+		if (response.status === 401) {
+			window.location.href = '/logout';
+			return { error: 'unauthorized' };
+		}
+		throw new Error(`API Error: ${response.statusText} - ${method} - ${BASE_URL}${endpoint}`);
+	}
+
+	if (response.headers.get('Content-Type')?.includes('application/json')) {
+		return { data: await response.json() };
+	}
+
+	return { message: await response.text() };
+}
--- a/src/lib/api/server/auth.ts
+++ b/src/lib/api/server/auth.ts
@@ -29,6 +29,16 @@ export async function loginUser(username: string, password: string) {
 	return { token, user: userResponse };
 }

-export async function getCurrentUser(token: string) {
-	return fetchServerAPI<User>(`${authRoute}/me`, token);
+export async function getCurrentUser(token: string): Promise<User> {
+	const response = await fetchServerAPI<User>(`${authRoute}/me`, token);
+	return response.data!;
+}
+
+export async function getOpenToken(token: string): Promise<string> {
+	const response = await fetchServerAPI<{ token: string }>(
+		`${authRoute}/open-token`,
+		token,
+		'POST'
+	);
+	return response.data!.token;
 }
--- a/src/lib/api/server/base.ts
+++ b/src/lib/api/server/base.ts
@@ -1,11 +1,19 @@
+import { redirect } from 'next/navigation';
+
 const BASE_URL = process.env.API_BASE_URL || 'http://localhost:8080';

+type ApiResponse<T> = {
+	data?: T;
+	error?: string;
+	message?: string;
+};
+
 export async function fetchServerAPI<T>(
 	endpoint: string,
 	token: string,
 	method: string = 'GET',
 	body?: object
-): Promise<T> {
+): Promise<ApiResponse<T>> {
 	const headers: Record<string, string> = {
 		'Content-Type': 'application/json',
 		Authorization: `Bearer ${token}`
@@ -14,18 +22,23 @@ 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) {
+		if (response.status == 401) {
+			redirect('/logout');
+			return { error: 'unauthorized' };
+		}
 		throw new Error(
 			`API Error: ${response.statusText} - ${method} - ${BASE_URL}${endpoint} - ${token}`
 		);
 	}

 	if (response.headers.get('Content-Type')?.includes('application/json')) {
-		return response.json();
+		return { data: await response.json() };
 	}

-	return response.text() as T;
+	return { message: await response.text() };
 }
--- a/src/lib/api/server/configuration.ts
+++ b/src/lib/api/server/configuration.ts
@@ -1,13 +1,5 @@
 import { fetchServerAPI } from './base';
-import type {
-	Configurations,
-	Configuration,
-	AssistRules,
-	EventConfig,
-	EventRules,
-	ServerSettings,
-	ConfigFile
-} from '@/lib/types/config';
+import type { Configurations, ConfigFile, Config } from '@/lib/types/config';

 const serverRoute = '/server';

@@ -15,22 +7,27 @@ export async function getServerConfigurations(
 	token: string,
 	serverId: string
 ): Promise<Configurations> {
-	return fetchServerAPI<Configurations>(`${serverRoute}/${serverId}/config`, token);
+	const response = await fetchServerAPI<Configurations>(`${serverRoute}/${serverId}/config`, token);
+	return response.data!;
 }

 export async function getServerConfiguration(
 	token: string,
 	serverId: string,
 	configType: ConfigFile
-): Promise<Configuration | AssistRules | EventConfig | EventRules | ServerSettings> {
-	return fetchServerAPI(`${serverRoute}/${serverId}/config/${configType}`, token);
+): Promise<Config> {
+	const response = await fetchServerAPI<Config>(
+		`${serverRoute}/${serverId}/config/${configType}`,
+		token
+	);
+	return response.data!;
 }

 export async function updateServerConfiguration(
 	token: string,
 	serverId: string,
 	configType: ConfigFile,
-	config: Configuration | AssistRules | EventConfig | EventRules | ServerSettings,
+	config: Config,
 	restart = false
 ): Promise<void> {
 	await fetchServerAPI(`${serverRoute}/${serverId}/config/${configType}`, token, 'PUT', {
--- a/src/lib/api/server/lookups.ts
+++ b/src/lib/api/server/lookups.ts
@@ -4,21 +4,29 @@ import { Track, CarModel, CupCategory, DriverCategory, SessionType } from '@/lib
 const lookupRoute = '/lookup';

 export async function getTracks(token: string): Promise<Track[]> {
-	return fetchServerAPI(`${lookupRoute}/tracks`, token);
+	const response = await fetchServerAPI<Track[]>(`${lookupRoute}/tracks`, token);
+	return response.data!;
 }

 export async function getCarModels(token: string): Promise<CarModel[]> {
-	return fetchServerAPI(`${lookupRoute}/car-models`, token);
+	const response = await fetchServerAPI<CarModel[]>(`${lookupRoute}/car-models`, token);
+	return response.data!;
 }

 export async function getCupCategories(token: string): Promise<CupCategory[]> {
-	return fetchServerAPI(`${lookupRoute}/cup-categories`, token);
+	const response = await fetchServerAPI<CupCategory[]>(`${lookupRoute}/cup-categories`, token);
+	return response.data!;
 }

 export async function getDriverCategories(token: string): Promise<DriverCategory[]> {
-	return fetchServerAPI(`${lookupRoute}/driver-categories`, token);
+	const response = await fetchServerAPI<DriverCategory[]>(
+		`${lookupRoute}/driver-categories`,
+		token
+	);
+	return response.data!;
 }

 export async function getSessionTypes(token: string): Promise<SessionType[]> {
-	return fetchServerAPI(`${lookupRoute}/session-types`, token);
+	const response = await fetchServerAPI<SessionType[]>(`${lookupRoute}/session-types`, token);
+	return response.data!;
 }
--- a/src/lib/api/server/membership.ts
+++ b/src/lib/api/server/membership.ts
@@ -24,28 +24,35 @@ export async function getUsers(token: string, params: UserListParams = {}): Prom
 	const queryString = searchParams.toString();
 	const endpoint = `${membershipRoute}${queryString ? `?${queryString}` : ''}`;

-	return fetchServerAPI(endpoint, token);
+	const response = await fetchServerAPI<User[]>(endpoint, token);
+	return response.data!;
 }

 export async function createUser(
 	token: string,
 	userData: { username: string; password: string; role: string }
-) {
-	return fetchServerAPI(membershipRoute, token, 'POST', userData);
+): Promise<void> {
+	await fetchServerAPI(membershipRoute, token, 'POST', userData);
 }

 export async function getUserById(token: string, userId: string): Promise<User> {
-	return fetchServerAPI(`${membershipRoute}/${userId}`, token);
+	const response = await fetchServerAPI<User>(`${membershipRoute}/${userId}`, token);
+	return response.data!;
 }

-export async function updateUser(token: string, userId: string, userData: Partial<User>) {
-	return fetchServerAPI(`${membershipRoute}/${userId}`, token, 'PUT', userData);
+export async function updateUser(
+	token: string,
+	userId: string,
+	userData: Partial<User>
+): Promise<void> {
+	await fetchServerAPI(`${membershipRoute}/${userId}`, token, 'PUT', userData);
 }

-export async function deleteUser(token: string, userId: string) {
-	return fetchServerAPI(`${membershipRoute}/${userId}`, token, 'DELETE');
+export async function deleteUser(token: string, userId: string): Promise<void> {
+	await fetchServerAPI(`${membershipRoute}/${userId}`, token, 'DELETE');
 }

 export async function getRoles(token: string): Promise<Role[]> {
-	return fetchServerAPI(`${membershipRoute}/roles`, token);
+	const response = await fetchServerAPI<Role[]>(`${membershipRoute}/roles`, token);
+	return response.data!;
 }
--- a/src/lib/api/server/servers.ts
+++ b/src/lib/api/server/servers.ts
@@ -1,30 +1,40 @@
 import { fetchServerAPI } from './base';
-import { Server } from '@/lib/types/server';
+import { Server, ServiceStatus } from '@/lib/types/server';

 const serverRoute = '/server';

 export async function getServers(token: string): Promise<Server[]> {
 	const response = await fetchServerAPI<Server[]>(serverRoute, token);
-	return response;
+	return response.data!;
 }

 export async function getServer(token: string, serverId: string): Promise<Server> {
 	const response = await fetchServerAPI<Server>(`${serverRoute}/${serverId}`, token);
-	return response;
+	return response.data!;
 }

-export async function restartService(token: string, serverId: string) {
-	return fetchServerAPI(`${serverRoute}/${serverId}/service/restart`, token, 'POST');
+export async function restartService(token: string, serverId: string): Promise<void> {
+	await fetchServerAPI(`${serverRoute}/${serverId}/service/restart`, token, 'POST');
 }

-export async function startService(token: string, serverId: string) {
-	return fetchServerAPI(`${serverRoute}/${serverId}/service/start`, token, 'POST');
+export async function startService(token: string, serverId: string): Promise<void> {
+	await fetchServerAPI(`${serverRoute}/${serverId}/service/start`, token, 'POST');
 }

-export async function stopService(token: string, serverId: string) {
-	return fetchServerAPI(`${serverRoute}/${serverId}/service/stop`, token, 'POST');
+export async function stopService(token: string, serverId: string): Promise<void> {
+	await fetchServerAPI(`${serverRoute}/${serverId}/service/stop`, token, 'POST');
 }

-export async function getServiceStatus(token: string, serverId: string) {
-	return fetchServerAPI(`${serverRoute}/${serverId}/service`, token);
+export async function getServiceStatus(token: string, serverId: string): Promise<ServiceStatus> {
+	const response = await fetchServerAPI<ServiceStatus>(`${serverRoute}/${serverId}/service`, token);
+	return response.data!;
+}
+
+export async function createServer(token: string, name: string): Promise<Server> {
+	const response = await fetchServerAPI<Server>(serverRoute, token, 'POST', { name });
+	return response.data!;
+}
+
+export async function deleteServer(token: string, serverId: string): Promise<void> {
+	await fetchServerAPI(`${serverRoute}/${serverId}`, token, 'DELETE');
 }
--- a/src/lib/api/server/statistics.ts
+++ b/src/lib/api/server/statistics.ts
@@ -9,8 +9,9 @@ export async function getServerStatistics(
 	startDate: string,
 	endDate: string
 ): Promise<StateHistoryStats> {
-	return fetchServerAPI<StateHistoryStats>(
+	const response = await fetchServerAPI<StateHistoryStats>(
 		`${serverRoute}/${serverId}/state-history/statistics?start_date=${startDate}&end_date=${endDate}`,
 		token
 	);
+	return response.data!;
 }
--- a/src/lib/auth/server.ts
+++ b/src/lib/auth/server.ts
@@ -12,16 +12,17 @@ export async function requireAuth() {
 	const session = await getSession();

 	if (!session.token || !session.user) {
-		redirect('/login');
+		redirect('/logout');
 	}

 	return session;
 }

-export async function login(token: string, user: SessionData['user']) {
+export async function login(token: string, user: SessionData['user'], openToken?: string) {
 	const session = await getSession();
 	session.token = token;
 	session.user = user;
+	session.openToken = openToken;
 	await session.save();
 }

--- a/src/lib/context/ServerCreationPopupContext.tsx
+++ b/src/lib/context/ServerCreationPopupContext.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { createContext, useContext, useState, ReactNode, useCallback } from 'react';
+
+interface ServerCreationPopupState {
+	serverId: string;
+	serverName: string;
+	isOpen: boolean;
+}
+
+interface ServerCreationPopupContextType {
+	popup: ServerCreationPopupState | null;
+	showPopup: (serverId: string, serverName: string) => void;
+	hidePopup: () => void;
+	isPopupOpen: boolean;
+}
+
+const ServerCreationPopupContext = createContext<ServerCreationPopupContextType | null>(null);
+
+export function useServerCreationPopup() {
+	const context = useContext(ServerCreationPopupContext);
+	if (!context) {
+		throw new Error('useServerCreationPopup must be used within a ServerCreationPopupProvider');
+	}
+	return context;
+}
+
+interface ServerCreationPopupProviderProps {
+	children: ReactNode;
+}
+
+export function ServerCreationPopupProvider({ children }: ServerCreationPopupProviderProps) {
+	const [popup, setPopup] = useState<ServerCreationPopupState | null>(null);
+
+	const showPopup = useCallback((serverId: string, serverName: string) => {
+		setPopup({
+			serverId,
+			serverName,
+			isOpen: true
+		});
+	}, []);
+
+	const hidePopup = useCallback(() => {
+		setPopup(null);
+	}, []);
+
+	const isPopupOpen = popup?.isOpen || false;
+
+	return (
+		<ServerCreationPopupContext.Provider
+			value={{
+				popup,
+				showPopup,
+				hidePopup,
+				isPopupOpen
+			}}
+		>
+			{children}
+		</ServerCreationPopupContext.Provider>
+	);
+}
--- a/src/lib/context/SteamCMDContext.tsx
+++ b/src/lib/context/SteamCMDContext.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+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;
+	runningSteamServers: Set<string>;
+	dissociateServer: (serverId: string) => void;
+}
+
+const SteamCMDContext = createContext<SteamCMDContextType | null>(null);
+
+export function useSteamCMD() {
+	const context = useContext(SteamCMDContext);
+	if (!context) {
+		throw new Error('useSteamCMD must be used within a SteamCMDProvider');
+	}
+	return context;
+}
+
+interface SteamCMDProviderProps {
+	children: ReactNode;
+}
+
+export function SteamCMDProvider({ children }: SteamCMDProviderProps) {
+	const [runningSteamServers, setRunningSteamServers] = useState<Set<string>>(new Set());
+	const { addMessageHandler, removeMessageHandler } = useWebSocket();
+
+	const isSteamCMDRunning = runningSteamServers.size > 0;
+
+	useEffect(() => {
+		const handleWebSocketMessage = (message: WebSocketMessage) => {
+			if (message.type === 'step') {
+				const data = message.data as StepData;
+
+				if (data.step === 'steam_download') {
+					setRunningSteamServers((prev) => {
+						const newSet = new Set(prev);
+
+						if (data.status === 'in_progress') {
+							newSet.add(message.server_id);
+						} else if (data.status === 'completed' || data.status === 'failed') {
+							newSet.delete(message.server_id);
+						}
+
+						return newSet;
+					});
+				}
+			}
+		};
+
+		addMessageHandler(handleWebSocketMessage);
+		return () => {
+			removeMessageHandler(handleWebSocketMessage);
+		};
+	}, [addMessageHandler, removeMessageHandler]);
+
+	const dissociateServer = useCallback((serverId: string) => {
+		setRunningSteamServers((prev) => {
+			const newSet = new Set(prev);
+			newSet.delete(serverId);
+			return newSet;
+		});
+	}, []);
+
+	return (
+		<SteamCMDContext.Provider
+			value={{
+				isSteamCMDRunning,
+				runningSteamServers,
+				dissociateServer
+			}}
+		>
+			{children}
+		</SteamCMDContext.Provider>
+	);
+}
--- a/src/lib/session/config.ts
+++ b/src/lib/session/config.ts
@@ -3,6 +3,7 @@ import { User } from '@/lib/types';

 export interface SessionData {
 	token?: string;
+	openToken?: string;
 	user?: User;
 }

--- a/src/lib/types/config.ts
+++ b/src/lib/types/config.ts
@@ -15,7 +15,6 @@ export enum ServerTab {
 	settings = 'settings'
 }

-// Configuration interfaces
 export interface Configuration {
 	udpPort: number;
 	tcpPort: number;
--- a/src/lib/types/index.ts
+++ b/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';
--- a/src/lib/types/user.ts
+++ b/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;
 	}
--- a/src/lib/websocket/client.ts
+++ b/src/lib/websocket/client.ts
@@ -0,0 +1,206 @@
+export interface WebSocketMessage {
+	type: 'step' | 'steam_output' | 'error' | 'complete';
+	server_id: string;
+	timestamp: number;
+	data: StepData | SteamOutputData | ErrorData | CompleteData;
+}
+
+export interface StepData {
+	step:
+		| 'validation'
+		| 'directory_creation'
+		| 'steam_download'
+		| 'config_generation'
+		| 'service_creation'
+		| 'firewall_rules'
+		| 'database_save'
+		| 'completed';
+	status: 'pending' | 'in_progress' | 'completed' | 'failed';
+	message: string;
+	error: string;
+}
+
+export interface SteamOutputData {
+	output: string;
+	is_error: boolean;
+}
+
+export interface ErrorData {
+	error: string;
+	details: string;
+}
+
+export interface CompleteData {
+	server_id: string;
+	success: boolean;
+	message: string;
+}
+
+export type MessageHandler = (message: WebSocketMessage) => void;
+export type ConnectionStatusHandler = (
+	status: 'connecting' | 'connected' | 'disconnected' | 'error',
+	error?: string
+) => void;
+
+export class WebSocketClient {
+	private ws: WebSocket | null = null;
+	private token: string;
+	private messageHandlers: MessageHandler[] = [];
+	private connectionStatusHandlers: ConnectionStatusHandler[] = [];
+	private connectionPromise: Promise<void> | null = null;
+	private reconnectAttempts = 0;
+	private maxReconnectAttempts = 10;
+	private reconnectDelay = 1000; // 1 second
+	private maxReconnectDelay = 30000; // 30 seconds
+	private reconnectTimer: NodeJS.Timeout | null = null;
+	private shouldReconnect = true;
+	private associatedServerId: string | null = null;
+	private baseUrl: string;
+
+	constructor(token: string, url: string) {
+		this.token = token;
+		this.baseUrl = url;
+	}
+
+	connect(): Promise<void> {
+		if (this.connectionPromise) {
+			return this.connectionPromise;
+		}
+
+		this.shouldReconnect = true;
+		this.notifyStatus('connecting');
+
+		this.connectionPromise = new Promise((resolve, reject) => {
+			try {
+				this.ws = new WebSocket(`${this.baseUrl}?token=${this.token}`);
+
+				this.ws.onopen = () => {
+					console.log('WebSocket connected');
+					this.reconnectAttempts = 0;
+					this.reconnectDelay = 5000;
+					this.notifyStatus('connected');
+
+					if (this.associatedServerId) {
+						this.associateWithServer(this.associatedServerId);
+					}
+
+					resolve();
+				};
+
+				this.ws.onmessage = (event) => {
+					try {
+						const message: WebSocketMessage = JSON.parse(event.data);
+						this.messageHandlers.forEach((handler) => handler(message));
+					} catch (error) {
+						console.error('Failed to parse WebSocket message:', error);
+					}
+				};
+
+				this.ws.onclose = (event) => {
+					console.log('WebSocket disconnected:', event.code, event.reason);
+					this.connectionPromise = null;
+					this.notifyStatus('disconnected');
+
+					if (this.shouldReconnect && this.reconnectAttempts < this.maxReconnectAttempts) {
+						this.scheduleReconnect();
+					}
+				};
+
+				this.ws.onerror = (error) => {
+					console.error('WebSocket error:', error);
+					this.notifyStatus('error', 'Connection failed');
+					reject(error);
+				};
+			} catch (error) {
+				this.notifyStatus('error', error instanceof Error ? error.message : 'Unknown error');
+				reject(error);
+			}
+		});
+
+		return this.connectionPromise;
+	}
+
+	associateWithServer(serverId: string): void {
+		this.associatedServerId = serverId;
+		if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+			this.ws.send(`server_id:${serverId}`);
+		}
+	}
+
+	addMessageHandler(handler: MessageHandler): void {
+		this.messageHandlers.push(handler);
+	}
+
+	removeMessageHandler(handler: MessageHandler): void {
+		const index = this.messageHandlers.indexOf(handler);
+		if (index > -1) {
+			this.messageHandlers.splice(index, 1);
+		}
+	}
+
+	disconnect(): void {
+		this.shouldReconnect = false;
+		if (this.reconnectTimer) {
+			clearTimeout(this.reconnectTimer);
+			this.reconnectTimer = null;
+		}
+		if (this.ws) {
+			this.ws.close();
+			this.ws = null;
+		}
+		this.connectionPromise = null;
+		this.messageHandlers = [];
+		this.connectionStatusHandlers = [];
+		this.associatedServerId = null;
+	}
+
+	isConnected(): boolean {
+		return this.ws?.readyState === WebSocket.OPEN;
+	}
+
+	addConnectionStatusHandler(handler: ConnectionStatusHandler): void {
+		this.connectionStatusHandlers.push(handler);
+	}
+
+	removeConnectionStatusHandler(handler: ConnectionStatusHandler): void {
+		const index = this.connectionStatusHandlers.indexOf(handler);
+		if (index > -1) {
+			this.connectionStatusHandlers.splice(index, 1);
+		}
+	}
+
+	reconnect(): Promise<void> {
+		this.disconnect();
+		return this.connect();
+	}
+
+	private notifyStatus(
+		status: 'connecting' | 'connected' | 'disconnected' | 'error',
+		error?: string
+	): void {
+		this.connectionStatusHandlers.forEach((handler) => handler(status, error));
+	}
+
+	private scheduleReconnect(): void {
+		if (this.reconnectTimer) {
+			clearTimeout(this.reconnectTimer);
+		}
+
+		this.reconnectAttempts++;
+		const delay = Math.min(
+			this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1),
+			this.maxReconnectDelay
+		);
+
+		console.log(
+			`WebSocket reconnect attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts} in ${delay}ms`
+		);
+
+		this.reconnectTimer = setTimeout(() => {
+			this.reconnectTimer = null;
+			this.connect().catch((error) => {
+				console.error('Reconnection failed:', error);
+			});
+		}, delay);
+	}
+}
--- a/src/lib/websocket/context.tsx
+++ b/src/lib/websocket/context.tsx
@@ -0,0 +1,152 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState, ReactNode, useCallback } from 'react';
+import { WebSocketClient, MessageHandler, ConnectionStatusHandler } from './client';
+
+interface WebSocketContextType {
+	client: WebSocketClient | null;
+	isConnected: boolean;
+	connectionStatus: 'connecting' | 'connected' | 'disconnected' | 'error';
+	connectionError: string | null;
+	connect: (token: string) => Promise<void>;
+	disconnect: () => void;
+	reconnect: () => Promise<void>;
+	associateWithServer: (serverId: string) => void;
+	addMessageHandler: (handler: MessageHandler) => void;
+	removeMessageHandler: (handler: MessageHandler) => void;
+	addConnectionStatusHandler: (handler: ConnectionStatusHandler) => void;
+	removeConnectionStatusHandler: (handler: ConnectionStatusHandler) => void;
+}
+
+const WebSocketContext = createContext<WebSocketContextType | null>(null);
+
+export function useWebSocket() {
+	const context = useContext(WebSocketContext);
+	if (!context) {
+		throw new Error('useWebSocket must be used within a WebSocketProvider');
+	}
+	return context;
+}
+
+interface WebSocketProviderProps {
+	children: ReactNode;
+	websocketURL: string;
+}
+
+export function WebSocketProvider({ children, websocketURL }: WebSocketProviderProps) {
+	const [client, setClient] = useState<WebSocketClient | null>(null);
+	const [isConnected, setIsConnected] = useState(false);
+	const [connectionStatus, setConnectionStatus] = useState<
+		'connecting' | 'connected' | 'disconnected' | 'error'
+	>('disconnected');
+	const [connectionError, setConnectionError] = useState<string | null>(null);
+
+	const connect = useCallback(
+		async (token: string) => {
+			if (client?.isConnected()) {
+				return;
+			}
+
+			if (client) {
+				client.disconnect();
+			}
+
+			const newClient = new WebSocketClient(token, websocketURL);
+
+			const statusHandler: ConnectionStatusHandler = (status, error) => {
+				setConnectionStatus(status);
+				setIsConnected(status === 'connected');
+				setConnectionError(error || null);
+			};
+
+			newClient.addConnectionStatusHandler(statusHandler);
+
+			try {
+				await newClient.connect();
+				setClient(newClient);
+			} catch (error) {
+				console.error('Failed to connect WebSocket:', error);
+				throw error;
+			}
+		},
+		[client]
+	);
+
+	const disconnect = useCallback(() => {
+		if (client) {
+			client.disconnect();
+			setClient(null);
+			setIsConnected(false);
+			setConnectionStatus('disconnected');
+			setConnectionError(null);
+		}
+	}, [client]);
+
+	const reconnect = async () => {
+		if (client) {
+			try {
+				await client.reconnect();
+			} catch (error) {
+				console.error('Failed to reconnect WebSocket:', error);
+				throw error;
+			}
+		}
+	};
+
+	const associateWithServer = (serverId: string) => {
+		if (client && isConnected) {
+			client.associateWithServer(serverId);
+		}
+	};
+
+	const addMessageHandler = (handler: MessageHandler) => {
+		if (client) {
+			client.addMessageHandler(handler);
+		}
+	};
+
+	const removeMessageHandler = (handler: MessageHandler) => {
+		if (client) {
+			client.removeMessageHandler(handler);
+		}
+	};
+
+	const addConnectionStatusHandler = (handler: ConnectionStatusHandler) => {
+		if (client) {
+			client.addConnectionStatusHandler(handler);
+		}
+	};
+
+	const removeConnectionStatusHandler = (handler: ConnectionStatusHandler) => {
+		if (client) {
+			client.removeConnectionStatusHandler(handler);
+		}
+	};
+
+	useEffect(() => {
+		return () => {
+			disconnect();
+		};
+	}, [disconnect]);
+
+	return (
+		<WebSocketContext.Provider
+			value={{
+				client,
+				isConnected,
+				connectionStatus,
+				connectionError,
+				connect,
+				disconnect,
+				reconnect,
+				associateWithServer,
+				addMessageHandler,
+				removeMessageHandler,
+				addConnectionStatusHandler,
+				removeConnectionStatusHandler
+			}}
+		>
+			{children}
+		</WebSocketContext.Provider>
+	);
+}
Author	SHA1	Message	Date
Fran Jurmanović	3ba83ad538	update websocket url passing through server	2025-09-18 23:14:45 +02:00
Fran Jurmanović	fe6a36f3dc	move websocket base url inside of constructor	2025-09-18 22:56:47 +02:00
Fran Jurmanović	1ca98233f8	fix build errors	2025-09-18 22:12:40 +02:00
Fran Jurmanović	fe4d299eae	code cleanup	2025-09-18 22:04:34 +02:00
Fran Jurmanović	b0ee67c2be	server creation	2025-09-18 01:34:16 +02:00
Fran Jurmanović	b7999b02e8	fix ApiResponse on success	2025-09-14 21:44:54 +02:00
Fran Jurmanović	4bc74f26d1	update logout method	2025-09-14 21:27:41 +02:00
Fran Jurmanović	e6b7ec7401	fix unbuildable client	2025-09-14 19:08:34 +02:00
Fran Jurmanović	373adcb49d	update api fetch client	2025-09-14 19:04:24 +02:00
Fran Jurmanović	8a5afee0e3	logout if unauthorized	2025-09-14 17:51:43 +02:00
Fran Jurmanović	4888db7f1a	update layout	2025-08-27 22:11:22 +02:00
Fran Jurmanović	4db5d49a64	update version	2025-08-27 22:11:15 +02:00