index.php

<?php
/**
 * LocalhostIndex - Security Hardened Version
 * A beautiful localhost homepage for local development environments.
 *
 * SECURITY: This tool is for LOCAL DEVELOPMENT ONLY.
 * Set 'enable_security' => true if deploying on shared/public servers.
 */

// Configuration constants
define( 'CSRF_TOKEN_LENGTH', 32 );        // Length of CSRF token in bytes
define( 'MYSQL_TIMEOUT', 2 );             // MySQL connection timeout in seconds
define( 'RECENT_ITEMS_LIMIT', 10 );       // Number of recent items to display (extended)
define( 'RECENT_ITEMS_PREVIEW', 2 );      // Number of recent items in preview (folded)
define( 'CACHE_TTL', 60 );                // Cache time-to-live in seconds
define( 'MAX_LOGIN_ATTEMPTS', 5 );        // Maximum failed login attempts before lockout
define( 'LOCKOUT_DURATION', 300 );        // Lockout duration in seconds (5 minutes)
define( 'DIR_MAX_DEPTH', 2 );             // Maximum recursion depth for directory size calculation

$options = [
	/**
	 * Set the theme
	 * Available themes: bluey, sunny, forest, retro, matrix, nebula, sundown, monochrome, dark, light
	 */
	'theme' => 'bluey',

	/**
	 * Exclude files or folders
	 * use wildcard pattern. eg: ['.git*', '*.exe', '*.sh', '*.php*', '*.png']
	 */
	'exclude' => [ '.DS_Store', '.localized', '*.php*', '*.png' ],

	/**
	 * Add extra tools
	 * [label] => '[link of the tool]
	 * eg: 'phpMyAdmin' => 'http://localhost/phpMyAdmin'
	 * Note: phpinfo link will automatically include CSRF token if enabled
	 */
	'extras' => [
		'phpinfo()' => '?phpinfo=1',
		'PhpMyAdmin()' => 'phpMyAdmin'
	],

	/**
	 * Set one or more favicon file names to look for (relative to this directory).
	 * Provide a string or an array; the first existing file will be used.
	 */
	'favicon' => [ 'favicon.ico', 'favicon.png', 'favicon.svg' ],

	/**
	 * MySQL detection options
	 * - 'bin' => array|string of explicit mysql/mysqld binary paths/commands
	 * - 'connection' => [
	 *       'host' => '127.0.0.1',
	 *       'user' => 'root',
	 *       'password' => 'secret',
	 *       'database' => null,
	 *       'port' => 3306,
	 *       'socket' => null,
	 *       'timeout' => 2
	 *   ]
	 */
	'mysql' => [],

	/**
	 * Display Settings
	 * Customize how files and folders are displayed
	 */
	'display' => [
		// Show file sizes in directory listing
		'show_file_sizes' => true,
		// Default sort order: 'name', 'date', 'size'
		'default_sort' => 'name',
		// Enable caching (improves performance with many files)
		'enable_cache' => true,
	],

	/**
	 * Security Settings
	 * Enable these for shared or public-facing servers
	 */
	'security' => [
		// Enable authentication (recommended for non-localhost)
		'enable_authentication' => false,
		// Simple password protection (use strong password if enabled)
		'password' => '',  // Leave empty to disable, or set a password hash via password_hash('your_password', PASSWORD_DEFAULT)
		// Disable phpinfo for security
		'disable_phpinfo' => false,
		// Enable CSRF protection
		'enable_csrf' => true,
		// Validate all paths against traversal
		'strict_path_validation' => true,
	]
];

// Security: Session management
session_start();

// Security: Generate CSRF token
if( !isset( $_SESSION['csrf_token'] ) ){
	$_SESSION['csrf_token'] = bin2hex( random_bytes( CSRF_TOKEN_LENGTH ) );
}

// Security: HTTP Headers
header( 'X-Content-Type-Options: nosniff' );
header( 'X-Frame-Options: SAMEORIGIN' );
header( 'X-XSS-Protection: 1; mode=block' );
header( 'Referrer-Policy: strict-origin-when-cross-origin' );

// Security: Simple authentication check with rate limiting
if( !empty( $options['security']['enable_authentication'] ) && !empty( $options['security']['password'] ) ){
	if( !isset( $_SESSION['authenticated'] ) ){
		// Rate limiting using constants
		$maxAttempts = MAX_LOGIN_ATTEMPTS;
		$lockoutTime = LOCKOUT_DURATION;

		// Initialize rate limiting session vars
		if( !isset( $_SESSION['login_attempts'] ) ){
			$_SESSION['login_attempts'] = 0;
			$_SESSION['lockout_until'] = 0;
		}

		// Check if currently locked out
		if( $_SESSION['lockout_until'] > time() ){
			$remaining = $_SESSION['lockout_until'] - time();
			$login_error = "Too many attempts. Try again in {$remaining} seconds.";
		}
		// Handle login form (only if not locked out)
		elseif( isset( $_POST['password'] ) && isset( $_POST['csrf_token'] ) ){
			if( hash_equals( $_SESSION['csrf_token'], $_POST['csrf_token'] ) ){
				if( password_verify( $_POST['password'], $options['security']['password'] ) ){
					// Success: reset attempts and authenticate
					$_SESSION['login_attempts'] = 0;
					$_SESSION['lockout_until'] = 0;
					session_regenerate_id( true );
					$_SESSION['authenticated'] = true;
					header( 'Location: ' . $_SERVER['PHP_SELF'] );
					exit;
				} else {
					// Failed: increment attempts
					$_SESSION['login_attempts']++;
					if( $_SESSION['login_attempts'] >= $maxAttempts ){
						$_SESSION['lockout_until'] = time() + $lockoutTime;
						$login_error = "Too many attempts. Try again in {$lockoutTime} seconds.";
					} else {
						$remaining = $maxAttempts - $_SESSION['login_attempts'];
						$login_error = "Invalid password. {$remaining} attempts remaining.";
					}
				}
			}
		}

		// Show login form
		if( !isset( $_SESSION['authenticated'] ) ){
			?>
			<!DOCTYPE html>
			<html lang="en">
			<head>
				<meta charset="utf-8">
				<meta name="viewport" content="width=device-width, initial-scale=1">
				<title>LocalhostIndex - Login</title>
				<style>
					body { font-family: monospace; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #102252; color: #f4f6ff; margin: 0; }
					.login-box { background: rgba(255,255,255,0.05); padding: 40px; border-radius: 8px; max-width: 350px; }
					h1 { margin-top: 0; font-size: 18px; letter-spacing: 2px; }
					input { width: 100%; padding: 12px; margin: 10px 0; border: none; border-radius: 4px; font-family: monospace; box-sizing: border-box; }
					button { width: 100%; padding: 12px; background: #d9e009; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; font-family: monospace; }
					button:hover { opacity: 0.9; }
					.error { color: #ff6b6b; margin: 10px 0; font-size: 13px; }
				</style>
			</head>
			<body>
				<div class="login-box">
					<h1>LOCALHOSTINDEX</h1>
					<?php if( isset( $login_error ) ): ?>
						<div class="error"><?= htmlspecialchars( $login_error, ENT_QUOTES, 'UTF-8' ); ?></div>
					<?php endif; ?>
					<form method="post">
						<input type="password" name="password" placeholder="Password" required autofocus>
						<input type="hidden" name="csrf_token" value="<?= htmlspecialchars( $_SESSION['csrf_token'], ENT_QUOTES, 'UTF-8' ); ?>">
						<button type="submit">Login</button>
					</form>
				</div>
			</body>
			</html>
			<?php
			exit;
		}
	}
}

// Security: Validate and sanitize paths
function validatePath( string $filename, bool $strict = true ): bool {
	// Reject dangerous characters (null bytes, control chars, shell metacharacters)
	if( preg_match( '/[<>:"|?*\x00-\x1f]/', $filename ) ){
		return false;
	}

	// Prevent path traversal
	if( strpos( $filename, '..' ) !== false ){
		return false;
	}

	// Additional strict validation with proper symlink handling
	if( $strict ){
		$basePath = realpath( __DIR__ );
		if( $basePath === false ){
			return false;
		}

		$fullPath = __DIR__ . DIRECTORY_SEPARATOR . $filename;
		$realPath = realpath( $fullPath );

		// Path must exist
		if( $realPath === false ){
			return false;
		}

		// Strict prefix check: must be within base directory
		// Use DIRECTORY_SEPARATOR to prevent partial matches (e.g., /var/www vs /var/www2)
		if( $realPath !== $basePath && strpos( $realPath, $basePath . DIRECTORY_SEPARATOR ) !== 0 ){
			return false;
		}
	}

	return true;
}

// display phpinfo with CSRF protection (POST preferred for security)
if( isset( $_GET['phpinfo'] ) && $_GET['phpinfo'] === '1' ){
	// Check if phpinfo is disabled
	if( !empty( $options['security']['disable_phpinfo'] ) ){
		http_response_code( 403 );
		die( 'phpinfo() has been disabled for security.' );
	}

	// CSRF protection - accept POST token (preferred) or GET token (legacy)
	if( !empty( $options['security']['enable_csrf'] ) ){
		$token = $_POST['csrf_token'] ?? $_GET['token'] ?? '';
		if( empty( $token ) || !hash_equals( $_SESSION['csrf_token'], $token ) ){
			http_response_code( 403 );
			die( 'Invalid security token.' );
		}
	}

	phpinfo();
	exit;
}

/**
 * Get Apache version string (extracted for DRY principle)
 */
function getApacheVersion(): ?string {
	if( !function_exists( 'apache_get_version' ) ){
		return null;
	}
	$versionString = apache_get_version();
	if( $versionString === false ){
		return null;
	}
	$parts = explode( '/', $versionString );
	if( !isset( $parts[1] ) ){
		return null;
	}
	return explode( ' ', $parts[1] )[0];
}

// Health check endpoint for monitoring
if( isset( $_GET['health'] ) ){
	header( 'Content-Type: application/json' );
	echo json_encode([
		'status' => 'ok',
		'timestamp' => time(),
		'php_version' => PHP_VERSION,
		'server' => getApacheVersion() ?? 'unknown'
	]);
	exit;
}

/**
 * Detect runtime version by sourcing user's shell profile
 * This ensures version managers (pyenv, nvm, rbenv, etc.) are loaded
 */
function detectRuntimeVersion( string $command, string $versionFlag = '--version', string $pattern = '/(\d+\.\d+[\.\d]*)/' ): ?string {
	// Find user's shell profile to source version managers
	$homeDir = getenv( 'HOME' );
	$profiles = [ '.zshrc', '.bashrc', '.bash_profile', '.profile' ];
	$sourceCmd = '';

	if( $homeDir ){
		foreach( $profiles as $profile ){
			$profilePath = $homeDir . '/' . $profile;
			if( file_exists( $profilePath ) ){
				$sourceCmd = "source $profilePath 2>/dev/null && ";
				break;
			}
		}
	}

	// Execute command with sourced environment (uses safeShellExec for graceful degradation)
	$fullCommand = escapeshellcmd( $command ) . ' ' . $versionFlag;
	$cmd = "bash -c '" . $sourceCmd . $fullCommand . "' 2>/dev/null";
	$output = safeShellExec( $cmd );

	if( $output === null || trim( $output ) === '' ){
		return null;
	}

	$output = trim( $output );
	if( preg_match( $pattern, $output, $matches ) ){
		return $matches[1];
	}

	return null;
}

/**
 * Detect open localhost ports with running services
 * Returns array of ports with process info
 */
function detectOpenPorts(): array {
	$ports = [];

	// Common development port ranges
	$portRanges = [
		[ 3000, 3999 ],  // Node.js apps (Express, React, etc.)
		[ 4000, 4999 ],  // Various dev servers
		[ 5000, 5999 ],  // Flask, Vite, etc.
		[ 8000, 8999 ],  // Django, PHP dev servers, etc.
		[ 9000, 9999 ],  // Various services
	];

	if( PHP_OS_FAMILY === 'Darwin' ){
		// macOS: Use lsof for reliable port detection
		$output = safeShellExec( "lsof -iTCP -sTCP:LISTEN -n -P 2>/dev/null | grep -E ':(3[0-9]{3}|4[0-9]{3}|5[0-9]{3}|8[0-9]{3}|9[0-9]{3})'" );
		if( $output ){
			$lines = explode( "\n", trim( $output ) );
			foreach( $lines as $line ){
				if( empty( $line ) ) continue;

				// Parse lsof output: COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
				if( preg_match( '/^(\S+)\s+(\d+)\s+\S+\s+\S+\s+\S+\s+\S+\s+\S+\s+\S+\s+\S+:(\d+)/', $line, $matches ) ){
					$process = strtolower( $matches[1] );
					$pid = (int)$matches[2];
					$port = (int)$matches[3];

					// Filter to common development port ranges only
					$inRange = ( $port >= 3000 && $port <= 3999 ) ||
					           ( $port >= 4000 && $port <= 4999 ) ||
					           ( $port >= 5000 && $port <= 5999 ) ||
					           ( $port >= 8000 && $port <= 8999 ) ||
					           ( $port >= 9000 && $port <= 9999 );
					if( !$inRange ) continue;

					// Skip known macOS system services (not dev servers)
					$systemProcesses = [ 'controlce', 'airplayd', 'rapportd', 'sharingd' ];
					if( in_array( $process, $systemProcesses, true ) ) continue;

					// Skip php-fpm on port 9000 (background FastCGI service, not a dev server)
					if( $process === 'php-fpm' && $port === 9000 ) continue;

					// Skip if already found (can have multiple entries per port)
					$exists = false;
					foreach( $ports as $p ){
						if( $p['port'] === $port ){
							$exists = true;
							break;
						}
					}
					if( $exists ) continue;

					// Map process names to friendly names
					$processName = match( true ){
						str_contains( $process, 'node' ) => 'Node.js',
						str_contains( $process, 'python' ) => 'Python',
						str_contains( $process, 'ruby' ) => 'Ruby',
						str_contains( $process, 'php' ) => 'PHP',
						str_contains( $process, 'go' ) => 'Go',
						str_contains( $process, 'java' ) => 'Java',
						str_contains( $process, 'nginx' ) => 'nginx',
						str_contains( $process, 'httpd' ) || str_contains( $process, 'apache' ) => 'Apache',
						str_contains( $process, 'docker' ) => 'Docker',
						str_contains( $process, 'com.docke' ) => 'Docker',
						default => ucfirst( $process )
					};

					// Get command and working directory for more detail
					$detail = '';
					$cmdOutput = safeShellExec( "ps -p {$pid} -o args= 2>/dev/null" );
					if( $cmdOutput ){
						$cmd = trim( $cmdOutput );
						// Extract the tool/script being run
						if( preg_match( '/\/(flask|django|uvicorn|gunicorn|manage\.py)\b/', $cmd, $m ) ){
							// Python frameworks
							$detail = $m[1];
							if( preg_match( '/(run|runserver|serve)/', $cmd ) ) $detail .= ' run';
						} elseif( preg_match( '/\/(eleventy|vite|webpack|next|nuxt|remix|astro|parcel|esbuild|rollup|tsx?)\b/', $cmd, $m ) ){
							// Node.js tools
							$detail = $m[1];
						} elseif( preg_match( '/([^\s\/]+\.(js|ts|py|rb|php|go))(?:\s|$)/', $cmd, $m ) ){
							// Script files
							$detail = $m[1];
						} elseif( preg_match( '/node_modules\/\.bin\/([^\s\/]+)/', $cmd, $m ) ){
							// npm binaries
							$detail = $m[1];
						} elseif( preg_match( '/\s-m\s+(\S+)/', $cmd, $m ) ){
							// Python -m module
							$detail = $m[1];
						}
					}
					// Get project folder from cwd
					$cwdOutput = safeShellExec( "lsof -p {$pid} -a -d cwd 2>/dev/null | tail -1 | awk '{print \$NF}'" );
					if( $cwdOutput ){
						$cwd = trim( $cwdOutput );
						$folder = basename( $cwd );
						if( $folder && $folder !== '/' && $folder !== 'Sites' ){
							$detail = $detail ? "{$detail} · {$folder}" : $folder;
						}
					}

					$ports[] = [
						'port' => $port,
						'process' => $processName,
						'pid' => $pid,
						'detail' => $detail
					];
				}
			}
		}
	} elseif( PHP_OS_FAMILY === 'Linux' ){
		// Linux: Try ss first (modern), fallback to netstat
		$output = safeShellExec( "ss -tlnp 2>/dev/null | grep -E ':(3[0-9]{3}|4[0-9]{3}|5[0-9]{3}|8[0-9]{3}|9[0-9]{3})'" );
		if( $output === null ){
			$output = safeShellExec( "netstat -tlnp 2>/dev/null | grep -E ':(3[0-9]{3}|4[0-9]{3}|5[0-9]{3}|8[0-9]{3}|9[0-9]{3})'" );
		}

		if( $output ){
			$lines = explode( "\n", trim( $output ) );
			foreach( $lines as $line ){
				if( empty( $line ) ) continue;

				// Parse ss/netstat output for port and process
				if( preg_match( '/:(\d+)\s/', $line, $portMatch ) ){
					$port = (int)$portMatch[1];

					// Filter to common development port ranges only
					$inRange = ( $port >= 3000 && $port <= 3999 ) ||
					           ( $port >= 4000 && $port <= 4999 ) ||
					           ( $port >= 5000 && $port <= 5999 ) ||
					           ( $port >= 8000 && $port <= 8999 ) ||
					           ( $port >= 9000 && $port <= 9999 );
					if( !$inRange ) continue;

					// Skip if already found
					$exists = false;
					foreach( $ports as $p ){
						if( $p['port'] === $port ){
							$exists = true;
							break;
						}
					}
					if( $exists ) continue;

					// Try to extract process name
					$processName = 'Unknown';
					$pid = null;
					if( preg_match( '/users:\(\("([^"]+)",pid=(\d+)/', $line, $procMatch ) ){
						$processName = ucfirst( $procMatch[1] );
						$pid = (int)$procMatch[2];
					} elseif( preg_match( '/(\d+)\/(\S+)/', $line, $procMatch ) ){
						$pid = (int)$procMatch[1];
						$processName = ucfirst( $procMatch[2] );
					}

					// Get command and working directory for more detail
					$detail = '';
					if( $pid ){
						$cmdOutput = safeShellExec( "ps -p {$pid} -o args= 2>/dev/null" );
						if( $cmdOutput ){
							$cmd = trim( $cmdOutput );
							if( preg_match( '/\/(flask|django|uvicorn|gunicorn|manage\.py)\b/', $cmd, $m ) ){
								$detail = $m[1];
								if( preg_match( '/(run|runserver|serve)/', $cmd ) ) $detail .= ' run';
							} elseif( preg_match( '/\/(eleventy|vite|webpack|next|nuxt|remix|astro|parcel|esbuild|rollup|tsx?)\b/', $cmd, $m ) ){
								$detail = $m[1];
							} elseif( preg_match( '/([^\s\/]+\.(js|ts|py|rb|php|go))(?:\s|$)/', $cmd, $m ) ){
								$detail = $m[1];
							} elseif( preg_match( '/node_modules\/\.bin\/([^\s\/]+)/', $cmd, $m ) ){
								$detail = $m[1];
							} elseif( preg_match( '/\s-m\s+(\S+)/', $cmd, $m ) ){
								$detail = $m[1];
							}
						}
						$cwdOutput = safeShellExec( "lsof -p {$pid} -a -d cwd 2>/dev/null | tail -1 | awk '{print \$NF}'" );
						if( $cwdOutput ){
							$cwd = trim( $cwdOutput );
							$folder = basename( $cwd );
							if( $folder && $folder !== '/' && $folder !== 'Sites' ){
								$detail = $detail ? "{$detail} · {$folder}" : $folder;
							}
						}
					}

					$ports[] = [
						'port' => $port,
						'process' => $processName,
						'pid' => $pid,
						'detail' => $detail
					];
				}
			}
		}
	}

	// Sort by port number
	usort( $ports, fn( $a, $b ) => $a['port'] <=> $b['port'] );

	return $ports;
}

/**
 * Auto-detect installed runtimes and their versions (true parallel for speed)
 */
function detectRuntimes(): array {
	$runtimes = [];

	// Web Server (instant - PHP function)
	$apacheVersion = getApacheVersion();
	if( $apacheVersion !== null ){
		$runtimes['Apache'] = $apacheVersion;
	}

	// PHP (instant - always available)
	$runtimes['PHP'] = explode( '-', phpversion() )[0];

	// MySQL (instant - direct path)
	$mysqlPaths = [ '/usr/local/mysql/bin/mysql', '/opt/homebrew/bin/mysql' ];
	foreach( $mysqlPaths as $mysqlBin ){
		$output = @shell_exec( escapeshellarg( $mysqlBin ) . ' --version 2>/dev/null' );
		if( $output && preg_match( '/Ver\\s+([0-9.]+)/i', $output, $m ) ){
			$runtimes['MySQL'] = $m[1];
			break;
		}
	}

	// Define all tools to detect: [label, command, flag, pattern]
	$tools = [
		[ 'Python', 'python3', '--version', '/Python (\d+\.\d+\.\d+)/' ],
		[ 'pip', 'pip3', '--version', '/pip (\d+\.\d+[\.\d]*)/' ],
		[ 'Node.js', 'node', '--version', '/v?(\d+\.\d+\.\d+)/' ],
		[ 'npm', 'npm', '--version', '/(\d+\.\d+[\.\d]*)/' ],
		[ 'Ruby', 'ruby', '--version', '/ruby (\d+\.\d+\.\d+)/' ],
		[ 'Go', 'go', 'version', '/go(\d+\.\d+[\.\d]*)/' ],
		[ 'Composer', 'composer', '--version', '/(\d+\.\d+\.\d+)/' ],
		[ 'Git', 'git', '--version', '/git version (\d+\.\d+[\.\d]*)/' ],
		[ 'Docker', 'docker', '--version', '/Docker version (\d+\.\d+\.\d+)/' ],
		[ 'Homebrew', 'brew', '--version', '/Homebrew (\d+\.\d+\.\d+)/' ],
		[ 'PostgreSQL', 'psql', '--version', '/(\d+\.\d+[\.\d]*)/' ],
		[ 'Redis', 'redis-server', '--version', '/v=(\d+\.\d+\.\d+)/' ],
		[ 'Java', 'java', '--version', '/(\d+\.\d+[\.\d]*)/' ],
		[ 'Rust', 'rustc', '--version', '/rustc (\d+\.\d+\.\d+)/' ],
		[ 'MongoDB', 'mongod', '--version', '/v(\d+\.\d+\.\d+)/' ],
		[ 'SQLite', 'sqlite3', '--version', '/(\d+\.\d+\.\d+)/' ],
		[ 'TypeScript', 'tsc', '--version', '/(\d+\.\d+\.\d+)/' ],
		[ 'Swift', 'swift', '--version', '/Swift version (\d+\.\d+[\.\d]*)/' ],
		[ '.NET', 'dotnet', '--version', '/(\d+\.\d+[\.\d]*)/' ],
		[ 'GitHub CLI', 'gh', '--version', '/gh version (\d+\.\d+\.\d+)/' ],
		[ 'Claude', 'claude', '--version', '/(\d+\.\d+\.\d+)/' ],
		[ 'Codex', 'codex', '--version', '/(\d+\.\d+\.\d+)/' ],
		[ 'Gemini', 'gemini', '--version', '/(\d+\.\d+\.\d+)/' ],
	];

	// Create temp directory for parallel output
	$tmpDir = sys_get_temp_dir() . '/lhi_' . getmypid();
	@mkdir( $tmpDir, 0755, true );

	// Source shell profile for version managers (pyenv, nvm, etc.)
	$homeDir = getenv( 'HOME' );
	$sourceCmd = '';
	if( $homeDir ){
		foreach( [ '.zshrc', '.bashrc', '.bash_profile', '.profile' ] as $profile ){
			$profilePath = "$homeDir/$profile";
			if( file_exists( $profilePath ) ){
				$sourceCmd = "source $profilePath 2>/dev/null; ";
				break;
			}
		}
	}

	// Build parallel shell script: run all commands in background, wait, collect
	$bgCmds = [];
	foreach( $tools as $i => $tool ){
		[ $label, $cmd, $flag ] = $tool;
		$outFile = "$tmpDir/t$i";
		$bgCmds[] = "($cmd $flag 2>&1 | head -1 > $outFile) &";
	}
	$bgCmds[] = 'wait';

	// Execute all in parallel with sourced environment
	$script = implode( "\n", $bgCmds );
	@shell_exec( "bash -c '{$sourceCmd}{$script}' 2>/dev/null" );

	// Collect results
	foreach( $tools as $i => $tool ){
		[ $label, $cmd, $flag, $pattern ] = $tool;
		$outFile = "$tmpDir/t$i";
		if( file_exists( $outFile ) ){
			$output = trim( @file_get_contents( $outFile ) );
			@unlink( $outFile );
			if( $output && preg_match( $pattern, $output, $m ) ){
				$runtimes[$label] = $m[1];
			}
		}
	}

	// Cleanup
	@rmdir( $tmpDir );

	return $runtimes;
}

// AJAX endpoint for extended runtime detection
if( isset( $_GET['action'] ) && $_GET['action'] === 'detect_runtimes' ){
	// Verify CSRF token if enabled
	if( !empty( $options['security']['enable_csrf'] ) ){
		if( !isset( $_GET['token'] ) || !hash_equals( $_SESSION['csrf_token'], $_GET['token'] ) ){
			http_response_code( 403 );
			die( json_encode( [ 'error' => 'Invalid token' ] ) );
		}
	}

	header( 'Content-Type: application/json' );
	echo json_encode( detectRuntimes() );
	exit;
}

// AJAX endpoint for server stats (deferred loading for faster page load)
if( isset( $_GET['action'] ) && $_GET['action'] === 'server_stats' ){
	// Verify CSRF token if enabled
	if( !empty( $options['security']['enable_csrf'] ) ){
		if( !isset( $_GET['token'] ) || !hash_equals( $_SESSION['csrf_token'], $_GET['token'] ) ){
			http_response_code( 403 );
			die( json_encode( [ 'error' => 'Invalid token' ] ) );
		}
	}

	$stats = [];

	// Apache connections (only if Apache is running)
	if( function_exists( 'apache_get_modules' ) ){
		$apacheStatus = safeShellExec( "netstat -an 2>/dev/null | grep -cE ':(80|443).*ESTABLISHED'" );
		if( $apacheStatus !== null ){
			$stats['Apache connections'] = trim( $apacheStatus );
		}
	}

	// Active ports - optimized command
	$activePorts = safeShellExec( "netstat -an 2>/dev/null | grep -c LISTEN" );
	if( $activePorts !== null ){
		$stats['Active ports'] = trim( $activePorts );
	}

	// Running processes - SINGLE ps call instead of 3
	if( PHP_OS_FAMILY === 'Darwin' || PHP_OS_FAMILY === 'Linux' ){
		$psOutput = safeShellExec( "ps aux 2>/dev/null" );
		if( $psOutput !== null ){
			$procCounts = [];
			$apacheCount = preg_match_all( '/httpd|apache2/i', $psOutput );
			$mysqlCount = preg_match_all( '/mysqld/i', $psOutput );
			$nodeCount = preg_match_all( '/\bnode\b/i', $psOutput );

			if( $apacheCount > 0 ) $procCounts[] = "Apache: {$apacheCount}";
			if( $mysqlCount > 0 ) $procCounts[] = "MySQL: {$mysqlCount}";
			if( $nodeCount > 0 ) $procCounts[] = "Node: {$nodeCount}";

			if( !empty( $procCounts ) ){
				$stats['Running processes'] = implode( ', ', $procCounts );
			}
		}
	}

	header( 'Content-Type: application/json' );
	echo json_encode( $stats );
	exit;
}

// AJAX endpoint for detecting open localhost ports
if( isset( $_GET['action'] ) && $_GET['action'] === 'detect_ports' ){
	// Verify CSRF token if enabled
	if( !empty( $options['security']['enable_csrf'] ) ){
		if( !isset( $_GET['token'] ) || !hash_equals( $_SESSION['csrf_token'], $_GET['token'] ) ){
			http_response_code( 403 );
			die( json_encode( [ 'error' => 'Invalid token' ] ) );
		}
	}

	header( 'Content-Type: application/json' );
	echo json_encode( [ 'ports' => detectOpenPorts() ] );
	exit;
}

// AJAX endpoint for killing a process by PID
if( isset( $_POST['action'] ) && $_POST['action'] === 'kill_process' ){
	header( 'Content-Type: application/json' );

	// Verify CSRF token if enabled
	if( !empty( $options['security']['enable_csrf'] ) ){
		if( !isset( $_POST['token'] ) || !hash_equals( $_SESSION['csrf_token'], $_POST['token'] ) ){
			http_response_code( 403 );
			die( json_encode( [ 'success' => false, 'message' => 'Invalid token' ] ) );
		}
	}

	$pid = isset( $_POST['pid'] ) ? (int)$_POST['pid'] : 0;

	if( $pid <= 0 ){
		echo json_encode( [ 'success' => false, 'message' => 'Invalid PID' ] );
		exit;
	}

	// Kill the process (only works for processes owned by current user)
	if( PHP_OS_FAMILY === 'Darwin' || PHP_OS_FAMILY === 'Linux' ){
		@shell_exec( "kill {$pid} 2>/dev/null" );
		// Always return success - the refresh will show if it actually worked
		echo json_encode( [ 'success' => true, 'message' => "Signal sent to {$pid}" ] );
	} else {
		echo json_encode( [ 'success' => false, 'message' => 'Not supported on this platform' ] );
	}
	exit;
}

// AJAX endpoint for quick actions
if( isset( $_POST['action'] ) ){
	// IMPORTANT: Set content type first, before any output
	header( 'Content-Type: application/json' );

	// Verify CSRF token if enabled
	if( !empty( $options['security']['enable_csrf'] ) ){
		if( !isset( $_POST['token'] ) || !hash_equals( $_SESSION['csrf_token'], $_POST['token'] ) ){
			http_response_code( 403 );
			die( json_encode( [ 'success' => false, 'message' => 'Invalid token' ] ) );
		}
	}

	$action = $_POST['action'];
	$result = [ 'success' => false, 'message' => 'Unknown action' ];

	switch( $action ){
		case 'clear-opcache':
			if( function_exists( 'opcache_reset' ) ){
				opcache_reset();
				$result = [ 'success' => true, 'message' => 'OPcache cleared successfully' ];
			} else {
				$result = [ 'success' => false, 'message' => 'OPcache not available' ];
			}
			break;

		case 'clear-sessions':
			$sessionPath = session_save_path() ?: sys_get_temp_dir();
			$realPath = realpath( $sessionPath );
			if( $realPath === false || !is_dir( $realPath ) ){
				$result = [ 'success' => false, 'message' => 'Invalid session path' ];
				break;
			}
			$count = 0;
			$errors = 0;
			try {
				$iterator = new DirectoryIterator( $realPath );
				foreach( $iterator as $file ){
					if( $file->isFile() && strpos( $file->getFilename(), 'sess_' ) === 0 ){
						if( @unlink( $file->getPathname() ) ){
							$count++;
						} else {
							$errors++;
						}
					}
				}
				$result = [ 'success' => true, 'message' => "Cleared {$count} session files" . ( $errors > 0 ? " ({$errors} failed)" : '' ) ];
			} catch( Exception $e ){
				$result = [ 'success' => false, 'message' => 'Failed to access session directory' ];
			}
			break;
	}

	echo json_encode( $result );
	exit;
}

// Detect basic info only (fast - no shell sourcing, no network calls)
// MySQL detection moved to AJAX endpoint for faster page load
function detectBasicInfo(): array {
	$info = [];

	// Web Server (instant - PHP function)
	$apacheVersion = getApacheVersion();
	if( $apacheVersion !== null ){
		$info['Apache'] = $apacheVersion;
	}

	// PHP (instant - always available)
	$info['PHP'] = explode( '-', phpversion() )[0];

	// MySQL/MariaDB - try direct path first (fast)
	$mysqlOutput = @shell_exec( "'/usr/local/mysql/bin/mysql' --version 2>/dev/null" );
	if( !$mysqlOutput ){
		$mysqlOutput = @shell_exec( "'/opt/homebrew/bin/mysql' --version 2>/dev/null" );
	}
	if( $mysqlOutput && preg_match( '/Ver\s+([0-9.]+)/i', $mysqlOutput, $m ) ){
		$info['MySQL'] = $m[1];
	}

	return $info;
}

// Load basic info only on page load
$info = detectBasicInfo();

// match a given filename against an array of patterns
function filenameMatch( array $patternArray, string $filename ): bool {
	if( empty( $patternArray ) ){
		return false;
	}
	foreach( $patternArray as $pattern ){
		if( fnmatch( $pattern, $filename ) ){
			return true;
		}
	}
	return false;
}

/**
 * Attempt to detect the MySQL server version using CLI tools or optional connection details.
 */
function detectMysqlVersion( array $mysqlOptions = [] ): string {
	$mysqlOptions = is_array( $mysqlOptions ) ? $mysqlOptions : [];

	$binary_candidates = [];
	if( !empty( $mysqlOptions['bin'] ) ){
		$binary_candidates = array_merge(
			$binary_candidates,
			is_array( $mysqlOptions['bin'] ) ? $mysqlOptions['bin'] : [ $mysqlOptions['bin'] ]
		);
	}
	if( !empty( $mysqlOptions['binary'] ) ){
		$binary_candidates = array_merge(
			$binary_candidates,
			is_array( $mysqlOptions['binary'] ) ? $mysqlOptions['binary'] : [ $mysqlOptions['binary'] ]
		);
	}

	// Most common MySQL paths (ordered by likelihood on macOS/Linux)
	$default_binaries = [
		'/usr/local/mysql/bin/mysql',
		'/opt/homebrew/bin/mysql',
		'/usr/local/bin/mysql',
		'/usr/bin/mysql',
		'/opt/local/bin/mysql',
		'mysql',
		'/usr/local/mysql/bin/mysqld',
		'/usr/sbin/mysqld',
		'/usr/libexec/mysqld',
		'mysqld'
	];

	$binary_candidates = array_values(
		array_unique(
			array_filter(
				array_merge( $binary_candidates, $default_binaries ),
				static fn( $binary ) => is_string( $binary ) && trim( $binary ) !== ''
			)
		)
	);

	// Try first 5 candidates for better detection while keeping good performance
	foreach( array_slice( $binary_candidates, 0, 5 ) as $binary ){
		$binary = trim( (string) $binary );
		if( $binary === '' ){
			continue;
		}
		$escaped_binary = escapeshellarg( $binary );
		$output = safeShellExec( $escaped_binary . ' --version 2>/dev/null' );
		if( $output === null || trim( $output ) === '' ){
			continue;
		}
		$output = trim( $output );
		if( preg_match( '/Distrib\\s+([0-9.]+)/i', $output, $matches ) ){
			return $matches[1];
		}
		if( preg_match( '/Ver\\s+([0-9.]+)/i', $output, $matches ) ){
			return $matches[1];
		}
	}

	$connection = $mysqlOptions['connection'] ?? [];

	$host = $connection['host'] ?? $connection['hostname'] ?? ini_get( 'mysqli.default_host' );
	$port = $connection['port'] ?? ini_get( 'mysqli.default_port' );
	$socket = $connection['socket'] ?? ini_get( 'mysqli.default_socket' );
	$user = $connection['user'] ?? $connection['username'] ?? ini_get( 'mysqli.default_user' );
	$password = $connection['password'] ?? $connection['pass'] ?? $connection['pw'] ?? ini_get( 'mysqli.default_pw' );
	$database = $connection['database'] ?? $connection['dbname'] ?? null;
	$timeout = isset( $connection['timeout'] ) ? (int) $connection['timeout'] : MYSQL_TIMEOUT;

	$env_user = getenv( 'DB_USER' )
		?: getenv( 'MYSQL_USER' )
		?: getenv( 'JAWSDB_USERNAME' )
		?: getenv( 'JAWSDB_USER' )
		?: getenv( 'CLEARDB_USERNAME' );
	$env_password = getenv( 'DB_PASSWORD' )
		?: getenv( 'MYSQL_PASSWORD' )
		?: getenv( 'JAWSDB_PASSWORD' )
		?: getenv( 'CLEARDB_PASSWORD' );
	$env_host = getenv( 'DB_HOST' )
		?: getenv( 'MYSQL_HOST' )
		?: getenv( 'JAWSDB_HOST' )
		?: getenv( 'CLEARDB_HOST' );
	$env_db = getenv( 'DB_NAME' )
		?: getenv( 'MYSQL_DATABASE' )
		?: getenv( 'MYSQL_DB' )
		?: getenv( 'JAWSDB_DATABASE' )
		?: getenv( 'CLEARDB_DATABASE' );
	$env_port = getenv( 'DB_PORT' )
		?: getenv( 'MYSQL_PORT' )
		?: getenv( 'JAWSDB_PORT' )
		?: getenv( 'CLEARDB_PORT' );

	if( empty( $user ) && !empty( $env_user ) ){
		$user = $env_user;
	}
	if( $password === null && $env_password !== false ){
		$password = $env_password;
	}
	if( empty( $host ) && !empty( $env_host ) ){
		$host = $env_host;
	}
	if( empty( $database ) && !empty( $env_db ) ){
		$database = $env_db;
	}
	if( empty( $port ) && !empty( $env_port ) ){
		$port = $env_port;
	}

	$database_url = getenv( 'DATABASE_URL' ) ?: getenv( 'JAWSDB_URL' ) ?: getenv( 'CLEARDB_DATABASE_URL' );
	if( !empty( $database_url ) ){
		$url_parts = parse_url( $database_url );
		if( is_array( $url_parts ) ){
			if( empty( $user ) && !empty( $url_parts['user'] ) ){
				$user = $url_parts['user'];
			}
			if( $password === null && isset( $url_parts['pass'] ) ){
				$password = $url_parts['pass'];
			}
			if( empty( $host ) && !empty( $url_parts['host'] ) ){
				$host = $url_parts['host'];
			}
			if( empty( $port ) && !empty( $url_parts['port'] ) ){
				$port = $url_parts['port'];
			}
			if( empty( $database ) && !empty( $url_parts['path'] ) ){
				$database = ltrim( $url_parts['path'], '/' );
			}
		}
	}

	$host = $host !== '' ? $host : null;
	$port = !empty( $port ) ? (int) $port : null;
	$socket = !empty( $socket ) ? $socket : null;
	$password = $password !== null ? (string) $password : '';

	// Disable mysqli exceptions for detection (PHP 8.x throws by default)
	$prevReporting = mysqli_report( MYSQLI_REPORT_OFF );

	// Build list of connection attempts: user-provided first, then defaults
	$attempts = [];
	if( !empty( $user ) || $socket !== null ){
		$attempts[] = [ 'host' => $host, 'user' => $user, 'pass' => $password, 'port' => $port, 'socket' => $socket ];
	}
	// Always try common local defaults as fallback
	$attempts[] = [ 'host' => '127.0.0.1', 'user' => 'root', 'pass' => '', 'port' => 3306, 'socket' => null ];
	$attempts[] = [ 'host' => 'localhost', 'user' => 'root', 'pass' => '', 'port' => 3306, 'socket' => null ];
	// Try socket connection (common on macOS)
	$attempts[] = [ 'host' => null, 'user' => 'root', 'pass' => '', 'port' => null, 'socket' => '/tmp/mysql.sock' ];

	foreach( $attempts as $attempt ){
		$mysqli = @mysqli_init();
		if( $mysqli ){
			if( defined( 'MYSQLI_OPT_CONNECT_TIMEOUT' ) ){
				@mysqli_options( $mysqli, MYSQLI_OPT_CONNECT_TIMEOUT, $timeout );
			}
			// Suppress connection errors as this is detection, not critical functionality
			$connected = @mysqli_real_connect(
				$mysqli,
				$attempt['host'],
				$attempt['user'],
				$attempt['pass'],
				$database,
				$attempt['port'],
				$attempt['socket']
			);
			if( $connected ){
				$server_info = @mysqli_get_server_info( $mysqli );
				@mysqli_close( $mysqli );
				mysqli_report( $prevReporting );
				if( !empty( $server_info ) ){
					if( preg_match( '/([0-9]+\\.[0-9]+\\.[0-9]+)/', $server_info, $matches ) ){
						return $matches[1];
					}
					return $server_info;
				}
			}
		}
	}

	// Restore previous reporting mode
	mysqli_report( $prevReporting );

	$client_info = mysqli_get_client_info();
	$client_info = preg_replace( '/^mysqlnd\\s*/i', '', $client_info );
	return $client_info !== '' ? $client_info : 'Unknown';
}

/**
 * Convert bytes into a human-friendly string.
 */
function humanFileSize( $bytes, int $decimals = 1 ): string {
	if( !is_numeric( $bytes ) || $bytes <= 0 ){
		return '0 B';
	}
	$units = [ 'B', 'KB', 'MB', 'GB', 'TB' ];
	$factor = floor( ( strlen( (string) $bytes ) - 1 ) / 3 );
	$factor = min( $factor, count( $units ) - 1 );
	$value = $bytes / pow( 1024, $factor );
	return number_format( $value, $decimals ) . ' ' . $units[ $factor ];
}

/**
 * Return a compact relative time string for a timestamp.
 */
function formatRelativeTime( $timestamp ): string {
	if( !is_numeric( $timestamp ) || $timestamp <= 0 ){
		return 'unknown';
	}
	$diff = time() - $timestamp;
	if( $diff < 0 ){
		return 'just now';
	}
	$units = [
		[ 31536000, 'yr' ],
		[ 2592000, 'mo' ],
		[ 604800, 'wk' ],
		[ 86400, 'd' ],
		[ 3600, 'h' ],
		[ 60, 'm' ],
	];
	foreach( $units as [ $seconds, $label ] ){
		if( $diff >= $seconds ){
			$value = floor( $diff / $seconds );
			return $value . $label . ' ago';
		}
	}
	return max( 1, $diff ) . 's ago';
}

/**
 * Safe shell_exec wrapper with availability check for graceful degradation
 */
function safeShellExec( string $cmd ): ?string {
	static $shellAvailable = null;

	if( $shellAvailable === null ){
		$disabled = array_map( 'trim', explode( ',', strtolower( ini_get( 'disable_functions' ) ) ) );
		$shellAvailable = function_exists( 'shell_exec' ) && !in_array( 'shell_exec', $disabled, true );
	}

	if( !$shellAvailable ){
		return null;
	}

	return @shell_exec( $cmd );
}

/**
 * Calculate directory size recursively (with symlink loop protection and skip large dirs)
 */
function getDirectorySize( string $path, int $maxDepth = DIR_MAX_DEPTH, int $currentDepth = 0, array &$visited = [] ): int {
	$size = 0;

	// Stop if we've gone too deep (prevent performance issues)
	if( $currentDepth >= $maxDepth ){
		return $size;
	}

	// Prevent symlink loops by tracking visited real paths
	$realPath = realpath( $path );
	if( $realPath === false || isset( $visited[$realPath] ) ){
		return $size;
	}
	$visited[$realPath] = true;

	if( !is_dir( $path ) || !is_readable( $path ) ){
		return $size;
	}

	// Skip known large directories that slow down scanning
	static $skipDirs = ['node_modules', 'vendor', '.git', 'bower_components', '__pycache__', '.venv', 'venv'];
	$baseName = basename( $path );
	if( in_array( $baseName, $skipDirs, true ) ){
		return $size;
	}

	$handle = @opendir( $path );
	if( !$handle ){
		return $size;
	}

	while( ( $item = readdir( $handle ) ) !== false ){
		if( $item === '.' || $item === '..' ){
			continue;
		}

		$itemPath = $path . '/' . $item;

		if( is_file( $itemPath ) ){
			$size += @filesize( $itemPath ) ?: 0;
		} elseif( is_dir( $itemPath ) ){
			$size += getDirectorySize( $itemPath, $maxDepth, $currentDepth + 1, $visited );
		}
	}

	closedir( $handle );
	return $size;
}

/**
 * Get cached directory listing or scan directory
 */
function getDirectoryListing( array $options ): array {
	$cacheEnabled = $options['display']['enable_cache'] ?? true;
	$cacheKey = 'directory_listing_cache';
	$cacheFile = sys_get_temp_dir() . '/' . md5( __DIR__ ) . '_localhostindex.cache';

	// Check cache
	if( $cacheEnabled && file_exists( $cacheFile ) ){
		$cacheData = @file_get_contents( $cacheFile );
		if( $cacheData !== false ){
			$cache = @json_decode( $cacheData, true );
			if( is_array( $cache ) && isset( $cache['timestamp'], $cache['data'] ) ){
				if( ( time() - $cache['timestamp'] ) < CACHE_TTL ){
					return $cache['data'];
				}
			}
		}
	}

	// Scan directory
	$directoryList = [];
	if( $handle = opendir( './' ) ){
		while( false !== ( $item = readdir( $handle ) ) ){
			if( $item == '..' || $item == '.' || filenameMatch( $options['exclude'], $item ) ){
				continue;
			}

			// Security: Validate path against traversal attacks
			$strictValidation = $options['security']['strict_path_validation'] ?? true;
			if( !validatePath( $item, $strictValidation ) ){
				continue;
			}

			$path = __DIR__ . '/' . $item;
			$isDir = is_dir( $path );
			$itemType = $isDir ? 'dir' : 'file';

			// Calculate size (for directories, calculate recursively with depth limit)
			$size = $isDir ? getDirectorySize( $path ) : filesize( $path );

			$itemData = [
				'name' => $item,
				'type' => $itemType,
				'mtime' => filemtime( $path ),
				'size' => $size,
			];

			$directoryList[] = $itemData;
		}
		closedir( $handle );
	}

	// Cache the results
	if( $cacheEnabled ){
		$cacheData = json_encode([
			'timestamp' => time(),
			'data' => $directoryList
		]);
		@file_put_contents( $cacheFile, $cacheData, LOCK_EX );
	}

	return $directoryList;
}

// read all items in the ./ dir
$directoryList = getDirectoryListing( $options );

// Sort directory based on user preference or default
$defaultSort = $options['display']['default_sort'] ?? 'name';
$sortOrder = $_GET['sort'] ?? $defaultSort;

usort( $directoryList, static function ( $a, $b ) use ( $sortOrder ) {
	// Directories always first
	if( $a['type'] !== $b['type'] ){
		return $a['type'] === 'dir' ? -1 : 1;
	}

	// Then sort by specified field
	switch( $sortOrder ){
		case 'date':
			return $b['mtime'] <=> $a['mtime'];
		case 'size':
			$aSize = $a['size'] ?? 0;
			$bSize = $b['size'] ?? 0;
			return $bSize <=> $aSize;
		case 'name':
		default:
			return strcasecmp( $a['name'], $b['name'] );
	}
});

$projectCount = 0;
$fileCount = 0;
$latestItem = null;
$latestMtime = 0;
$recentItems = [];

foreach( $directoryList as $item ){
	$isDir = ( $item['type'] === 'dir' );
	$projectCount += $isDir ? 1 : 0;
	$fileCount += $isDir ? 0 : 1;

	$mtime = $item['mtime'] ?? 0;
	if( $mtime > 0 ){
		$recentItems[] = $item;
		if( $mtime > $latestMtime ){
			$latestMtime = $mtime;
			$latestItem = $item;
		}
	}
}

// Stats: Preview (folded) and Extended (expanded)
// Preview: Projects, Disk free, OS
// Expanded Section 1 (Project Stats): Projects, Files, Last update
// Expanded Section 2 (System Stats): Disk free, Total disk, Memory, CPU, Uptime, OS
// Expanded Section 3 (PHP Stats): PHP memory limit, PHP max upload, OPcache status
// Expanded Section 4 (Server Stats): Apache connections, Active ports, Running processes
$statsPreview = [];
$statsProjectExpanded = [];
$statsSystemExpanded = [];
$statsPHPExpanded = [];
$statsServerExpanded = [];

// Get disk info first (used in both preview and system expanded)
$diskTotal = disk_total_space( __DIR__ );
$diskFree = disk_free_space( __DIR__ );

// Preview stats (only visible when folded)
if( $projectCount > 0 ){
	$statsPreview['Projects'] = number_format( $projectCount );
}
if( $diskTotal !== false && $diskTotal > 0 && $diskFree !== false ){
	$freePercent = round( ( $diskFree / $diskTotal ) * 100 );
	$statsPreview['Disk free'] = humanFileSize( $diskFree ) . ' (' . $freePercent . '%)';
}

// Project Stats (expanded section 1): Projects, Files, Last update
if( $projectCount > 0 ){
	$statsProjectExpanded['Projects'] = number_format( $projectCount );
}
if( $fileCount > 0 ){
	$statsProjectExpanded['Files'] = number_format( $fileCount );
}
if( $latestItem ){
	$statsProjectExpanded['Last update'] = formatRelativeTime( $latestMtime ) . ' · ' . $latestItem['name'];
}

// System Stats (expanded section 2): Disk free, Total disk, Memory, CPU, Uptime, OS
if( $diskTotal !== false && $diskTotal > 0 && $diskFree !== false ){
	$freePercent = round( ( $diskFree / $diskTotal ) * 100 );
	$statsSystemExpanded['Disk free'] = humanFileSize( $diskFree ) . ' (' . $freePercent . '%)';
}
if( $diskTotal !== false && $diskTotal > 0 ){
	$statsSystemExpanded['Total disk'] = humanFileSize( $diskTotal );
}

// Memory
if( PHP_OS_FAMILY === 'Darwin' || PHP_OS_FAMILY === 'Linux' ){
	$memInfo = safeShellExec( PHP_OS_FAMILY === 'Darwin' ? 'sysctl hw.memsize' : 'free -b | grep Mem' );
	if( $memInfo ){
		if( PHP_OS_FAMILY === 'Darwin' ){
			if( preg_match( '/hw\.memsize:\s+(\d+)/', $memInfo, $matches ) ){
				$statsSystemExpanded['Memory'] = humanFileSize( (int)$matches[1] );
			}
		} else {
			if( preg_match( '/Mem:\s+(\d+)/', $memInfo, $matches ) ){
				$statsSystemExpanded['Memory'] = humanFileSize( (int)$matches[1] );
			}
		}
	}
}

// CPU Info
if( PHP_OS_FAMILY === 'Darwin' ){
	$cpuModel = safeShellExec( 'sysctl -n machdep.cpu.brand_string' );
	$cpuCores = safeShellExec( 'sysctl -n hw.ncpu' );
	if( $cpuModel && $cpuCores ){
		$cpuModel = trim( $cpuModel );
		$cpuCores = trim( $cpuCores );
		$statsSystemExpanded['CPU'] = $cpuCores . ' cores';
	}
} elseif( PHP_OS_FAMILY === 'Linux' ){
	$cpuInfo = safeShellExec( 'nproc' );
	if( $cpuInfo ){
		$statsSystemExpanded['CPU'] = trim( $cpuInfo ) . ' cores';
	}
}

// Uptime
if( PHP_OS_FAMILY === 'Darwin' || PHP_OS_FAMILY === 'Linux' ){
	$uptime = safeShellExec( 'uptime' );
	if( $uptime && preg_match( '/up\s+(.+?),\s+\d+\s+user/', $uptime, $matches ) ){
		$statsSystemExpanded['Uptime'] = trim( $matches[1] );
	}
}

// OS Version (in both preview and system expanded)
if( PHP_OS_FAMILY === 'Darwin' ){
	$osVersion = safeShellExec( 'sw_vers -productVersion' );
	if( $osVersion ){
		$version = trim( $osVersion );
		$versionParts = explode( '.', $version );
		$majorVersion = (int)$versionParts[0];

		// macOS version names
		$versionNames = [
			15 => 'Sequoia',
			14 => 'Sonoma',
			13 => 'Ventura',
			12 => 'Monterey',
			11 => 'Big Sur',
			10 => 'Catalina/Mojave/High Sierra'
		];

		$versionName = $versionNames[$majorVersion] ?? 'macOS';
		$osDisplayValue = "macOS {$version} ({$versionName})";
		$statsPreview['OS'] = $osDisplayValue;
		$statsSystemExpanded['OS'] = $osDisplayValue;
	}
} elseif( PHP_OS_FAMILY === 'Linux' ){
	$osVersion = safeShellExec( "lsb_release -ds 2>/dev/null || cat /etc/*release 2>/dev/null | grep PRETTY_NAME | cut -d= -f2 | tr -d '\"'" );
	if( $osVersion ){
		$osValue = trim( explode( "\n", $osVersion )[0] );
		$statsPreview['OS'] = $osValue;
		$statsSystemExpanded['OS'] = $osValue;
	}
}

// PHP Stats
$statsPHPExpanded['PHP memory limit'] = ini_get( 'memory_limit' );
$statsPHPExpanded['PHP max upload'] = ini_get( 'upload_max_filesize' );

// OPcache status
if( function_exists( 'opcache_get_status' ) ){
	$opcache = @opcache_get_status( false );
	if( $opcache && isset( $opcache['opcache_enabled'] ) ){
		if( $opcache['opcache_enabled'] ){
			$hits = $opcache['opcache_statistics']['hits'] ?? 0;
			$misses = $opcache['opcache_statistics']['misses'] ?? 0;
			$total = $hits + $misses;
			$hitRate = $total > 0 ? round( ( $hits / $total ) * 100, 1 ) : 0;
			$statsPHPExpanded['OPcache'] = "Enabled ({$hitRate}% hit rate)";
		} else {
			$statsPHPExpanded['OPcache'] = 'Disabled';
		}
	}
} else {
	$statsPHPExpanded['OPcache'] = 'Not available';
}

// Server Stats - DEFERRED TO AJAX for faster page load
// These stats are loaded via ?action=server_stats when user expands the stats section
$statsServerExpanded = []; // Will be populated via AJAX

usort( $recentItems, static fn( $a, $b ) => $b['mtime'] <=> $a['mtime'] );
$recentItems = array_slice( $recentItems, 0, RECENT_ITEMS_LIMIT );
$recentItems = array_map(
	static function( $item ) {
		$mtime = $item['mtime'];
		return [
			'name' => $item['name'],
			'type' => $item['type'],
			'mtime' => $mtime,
			'relative' => formatRelativeTime( $mtime ),
			'absolute' => date( 'M j, Y H:i', $mtime ),
		];
	},
	$recentItems
);

// Split recent items into preview and extended
$recentPreview = array_slice( $recentItems, 0, RECENT_ITEMS_PREVIEW );
$recentExtended = array_slice( $recentItems, RECENT_ITEMS_PREVIEW );

$themes = [
	'light' => [
		'label' => 'Light',
		'background' => '#f8f9fb',
		'accent' => '#0066ff',
		'secondary' => '#2f2f2f',
		'text' => '#11131d',
		'title' => '#05070c',
		'muted' => '#5c6375',
		'input_bg' => 'rgba(0, 0, 0, 0.05)',
		'input_focus_bg' => 'rgba(0, 0, 0, 0.08)',
		'input_text' => '#1f2332',
	],
	'bluey' => [
		'label' => 'Bluey',
		'background' => '#102252',
		'accent' => '#d9e009',
		'secondary' => '#efffc1',
		'text' => '#f4f6ff',
		'title' => 'rgba(255, 255, 255, 0.85)',
		'muted' => 'rgba(255, 255, 255, 0.65)',
		'input_bg' => 'rgba(255, 255, 255, 0.06)',
		'input_focus_bg' => 'rgba(204, 204, 204, 0.05)',
		'input_text' => '#e3e7ff',
	],
	'sunny' => [
		'label' => 'Sunny',
		'background' => '#A94907',
		'accent' => '#FFB703',
		'secondary' => '#FFE5A8',
		'text' => '#fff4e6',
		'title' => 'rgba(255, 255, 255, 0.88)',
		'muted' => 'rgba(255, 255, 255, 0.7)',
		'input_bg' => 'rgba(255, 255, 255, 0.08)',
		'input_focus_bg' => 'rgba(255, 255, 255, 0.15)',
		'input_text' => '#fff7ed',
	],
	'forest' => [
		'label' => 'Forest',
		'background' => '#0D2F26',
		'accent' => '#2EC4B6',
		'secondary' => '#C6F7E2',
		'text' => '#e6fff2',
		'title' => 'rgba(255, 255, 255, 0.85)',
		'muted' => 'rgba(255, 255, 255, 0.7)',
		'input_bg' => 'rgba(255, 255, 255, 0.06)',
		'input_focus_bg' => 'rgba(204, 204, 204, 0.05)',
		'input_text' => '#e9fff7',
	],
	'retro' => [
		'label' => 'Retro',
		'background' => '#041b05',
		'accent' => '#39ff14',
		'secondary' => '#9dff7a',
		'text' => '#d8ffd9',
		'title' => 'rgba(217, 255, 223, 0.9)',
		'muted' => 'rgba(204, 255, 214, 0.7)',
		'input_bg' => 'rgba(255, 255, 255, 0.05)',
		'input_focus_bg' => 'rgba(255, 255, 255, 0.1)',
		'input_text' => '#e1ffe3',
	],
	'matrix' => [
		'label' => 'Matrix',
		'background' => '#020d06',
		'accent' => '#00ff9c',
		'secondary' => '#b1ffc9',
		'text' => '#d6ffe4',
		'title' => 'rgba(214, 255, 228, 0.9)',
		'muted' => 'rgba(190, 255, 219, 0.7)',
		'input_bg' => 'rgba(255, 255, 255, 0.05)',
		'input_focus_bg' => 'rgba(255, 255, 255, 0.1)',
		'input_text' => '#defeea',
	],
	'nebula' => [
		'label' => 'Nebula',
		'background' => '#0d0221',
		'accent' => '#ff5c8d',
		'secondary' => '#5defff',
		'text' => '#f6e8ff',
		'title' => 'rgba(245, 232, 255, 0.88)',
		'muted' => 'rgba(230, 210, 255, 0.7)',
		'input_bg' => 'rgba(255, 255, 255, 0.06)',
		'input_focus_bg' => 'rgba(204, 204, 204, 0.05)',
		'input_text' => '#f8f0ff',
	],
	'sundown' => [
		'label' => 'Sundown',
		'background' => '#2b0b0e',
		'accent' => '#ff7f50',
		'secondary' => '#ffd9a0',
		'text' => '#ffe6db',
		'title' => 'rgba(255, 228, 213, 0.88)',
		'muted' => 'rgba(255, 212, 192, 0.72)',
		'input_bg' => 'rgba(255, 255, 255, 0.08)',
		'input_focus_bg' => 'rgba(255, 255, 255, 0.14)',
		'input_text' => '#ffece2',
	],
	'monochrome' => [
		'label' => 'Mono',
		'background' => '#121212',
		'accent' => '#f5c400',
		'secondary' => '#d1d1d1',
		'text' => '#f2f2f2',
		'title' => '#ffffff',
		'muted' => 'rgba(240, 240, 240, 0.65)',
		'input_bg' => 'rgba(255, 255, 255, 0.05)',
		'input_focus_bg' => 'rgba(255, 255, 255, 0.1)',
		'input_text' => '#f6f6f6',
	],
	'dark' => [
		'label' => 'Dark',
		'background' => '#050608',
		'accent' => '#3a9bff',
		'secondary' => '#c7d6ff',
		'text' => '#eef2ff',
		'title' => '#ffffff',
		'muted' => 'rgba(238, 242, 255, 0.62)',
		'input_bg' => 'rgba(255, 255, 255, 0.05)',
		'input_focus_bg' => 'rgba(255, 255, 255, 0.12)',
		'input_text' => '#f0f3ff',
	],
];

$themeOrder = array_keys( $themes );
$defaultThemeKey = array_key_exists( $options['theme'], $themes ) ? $options['theme'] : $themeOrder[0];
$theme = $themes[ $defaultThemeKey ];
$defaultThemeIndex = array_search( $defaultThemeKey, $themeOrder, true );

$themesForClient = [];
foreach( $themeOrder as $key ){
	$themesForClient[ $key ] = [
		'label' => $themes[ $key ]['label'],
		'background' => $themes[ $key ]['background'],
		'accent' => $themes[ $key ]['accent'],
		'secondary' => $themes[ $key ]['secondary'],
		'text' => $themes[ $key ]['text'] ?? '#ffffff',
		'title' => $themes[ $key ]['title'] ?? 'rgba(255, 255, 255, 0.8)',
		'muted' => $themes[ $key ]['muted'] ?? 'rgba(255, 255, 255, 0.65)',
		'inputBg' => $themes[ $key ]['input_bg'] ?? 'rgba(255, 255, 255, 0.06)',
		'inputFocusBg' => $themes[ $key ]['input_focus_bg'] ?? 'rgba(204, 204, 204, 0.05)',
		'inputText' => $themes[ $key ]['input_text'] ?? '#dfdfdf',
	];
}

$faviconCandidates = $options['favicon'] ?? [];
if( is_string( $faviconCandidates ) ){
	$faviconCandidates = [ $faviconCandidates ];
}
$faviconCandidates = array_filter(
	array_map( static fn( $candidate ) => ltrim( trim( (string) $candidate ), '/' ), $faviconCandidates )
);

$faviconHref = '';
foreach( $faviconCandidates as $candidate ){
	$faviconPath = __DIR__ . '/' . $candidate;
	if( file_exists( $faviconPath ) ){
		$faviconHref = $candidate;
		break;
	}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <?php if( !empty( $faviconHref ) ): ?>
        <link rel="icon" href="<?= htmlspecialchars( $faviconHref, ENT_QUOTES, 'UTF-8' ); ?>">
    <?php endif; ?>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        :root {
            --color-bkg: <?=$theme['background']?>;
            --color-accent: <?=$theme['accent']?>;
            --color-secondary: <?=$theme['secondary']?>;
            --color-text: <?=$theme['text'] ?? '#ffffff'?>;
            --color-title: <?=$theme['title'] ?? 'rgba(255, 255, 255, 0.85)'?>;
            --color-muted: <?=$theme['muted'] ?? 'rgba(255, 255, 255, 0.65)'?>;
            --input-bg: <?=$theme['input_bg'] ?? 'rgba(255, 255, 255, 0.06)'?>;
            --input-focus-bg: <?=$theme['input_focus_bg'] ?? 'rgba(204, 204, 204, 0.05)'?>;
            --input-text: <?=$theme['input_text'] ?? '#dfdfdf'?>;

            /* Layout Variables */
            --spacing-unit: 8px;
            --card-padding: 12px;
            --card-radius: 6px;
            --card-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
            --card-bg: rgba(255, 255, 255, 0.02);
            --container-max-width: 1400px;
            --grid-gap: 32px;
            --body-padding-top: 24px;
            --body-padding-bottom: 24px;
            --body-padding-x: clamp(16px, 3vw, 32px);
        }

        html {
            height: 100%;
        }

        body {
            font-family: monospace;
            background: var(--color-bkg);
            color: var(--color-text);
            margin: 0;
            padding: var(--body-padding-top) var(--body-padding-x) var(--body-padding-bottom);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            overflow-x: hidden;
        }

        h2 {
            font-size: 16px;
            color: var(--color-title);
            font-weight: normal;
            margin-top: 0;
            margin-bottom: 16px;
            letter-spacing: 3px;
        }

        .theme {
            margin-bottom: calc(var(--spacing-unit) * 2);
            padding: var(--card-padding);
            background: var(--card-bg);
            border-radius: var(--card-radius);
            box-shadow: var(--card-shadow);
        }

        .theme-toggle {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }

        .theme-toggle button {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: none;
            padding: 0;
            background: rgba(255, 255, 255, 0.18);
            cursor: pointer;
            transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
            position: relative;
        }

        .theme-toggle button::before {
            content: '';
            position: absolute;
            inset: 4px;
            border-radius: 50%;
            background: var(--theme-accent, rgba(255, 255, 255, 0.45));
            opacity: 0.55;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .theme-toggle button::after {
            content: '';
            position: absolute;
            inset: 4px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.2);
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .theme-toggle button[aria-pressed="true"] {
            background: var(--color-accent);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
            transform: translateY(-1px);
        }

        .theme-toggle button[aria-pressed="true"]::before {
            opacity: 1;
            transform: scale(0.92);
        }

        .theme-toggle button[aria-pressed="true"]::after {
            opacity: 0.25;
        }

        .theme-toggle button:focus-visible {
            outline: 2px solid rgba(255, 255, 255, 0.8);
            outline-offset: 2px;
        }

        main {
            display: grid;
            grid-template-columns: minmax(0, 2.4fr) minmax(280px, 1fr);
            gap: var(--grid-gap);
            width: 100%;
            max-width: var(--container-max-width);
            margin: 0 auto;
            padding: 0;
            color: var(--color-text);
        }

        main > .projects {
            min-width: 0;
            display: flex;
            flex-direction: column;
            height: calc(100vh - var(--body-padding-top) - var(--body-padding-bottom));
        }

        main > .projects .projects-header {
            flex-shrink: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        main > .projects h2 {
            flex-shrink: 0;
            margin-bottom: 0;
        }

        .sort-buttons {
            display: flex;
            gap: 6px;
        }

        .sort-btn {
            background: var(--input-bg);
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            color: var(--color-muted);
            cursor: pointer;
            font-family: monospace;
            font-size: 13px;
            transition: all 0.2s ease;
        }

        .sort-btn:hover {
            background: var(--input-focus-bg);
            color: var(--color-text);
        }

        .sort-btn.active {
            background: var(--color-accent);
            color: var(--color-bkg);
            font-weight: bold;
        }

        .sort-btn.active.reversed::after {
            content: ' ↓';
            font-size: 0.9em;
        }

        .sort-btn:focus-visible {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

        main > .projects .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        main > aside {
            min-width: 280px;
        }


        .info,
        .stats,
        .actions,
        .recent,
        .tools,
        .ports {
            margin-bottom: calc(var(--spacing-unit) * 2);
            padding: var(--card-padding);
            background: var(--card-bg);
            border-radius: var(--card-radius);
            box-shadow: var(--card-shadow);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: calc(var(--spacing-unit) * 2);
        }

        .section-header h2 {
            margin-bottom: 0;
        }

        .toggle-btn {
            background: var(--input-bg);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            width: 24px;
            height: 24px;
            color: var(--color-accent);
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            line-height: 1;
        }

        .toggle-btn:hover {
            background: var(--input-focus-bg);
            border-color: var(--color-accent);
            transform: scale(1.1);
        }

        .extended-section {
            margin-top: calc(var(--spacing-unit) * 2);
            padding-top: calc(var(--spacing-unit) * 2);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .info .table > div,
        .stats .table > div,
        .system-stats .table > div {
            margin: 7px 0;
            color: var(--color-muted);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }

        .info .table > div > span,
        .stats .table > div > span {
        }

        .info .table > div > span:first-child,
        .stats .table > div > span:first-child,
        .system-stats .table > div > span:first-child {
            flex: 1;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 11px;
            color: var(--color-muted);
        }

        .info .table > div > span:last-child,
        .stats .table > div > span:last-child,
        .system-stats .table > div > span:last-child {
            flex-shrink: 0;
            font-weight: bold;
            padding: 0 3px;
            border-radius: 3px;
            text-align: right;
        }

        .stats .table > div > span:last-child {
            color: var(--color-secondary);
            font-weight: 600;
        }

        .system-stats .table > div > span:last-child {
            color: var(--color-accent);
            font-weight: 600;
        }

        .action-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }

        #actions-preview {
            display: grid;
        }

        #actions-extended {
            display: none;
        }

        .action-btn {
            background: var(--input-bg);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            color: var(--color-text);
            padding: 10px 12px;
            font-family: monospace;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .action-btn span {
            font-size: 14px;
        }

        .action-btn:hover {
            background: var(--input-focus-bg);
            border-color: var(--color-accent);
            transform: translateY(-1px);
        }

        .action-btn:active {
            transform: translateY(0);
        }

        .action-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .action-section h3 {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--color-muted);
            margin-bottom: calc(var(--spacing-unit) * 2);
            font-weight: 600;
        }

        .expand-btn {
            width: 100%;
            margin-top: 12px;
            padding: 8px 12px;
            background: var(--input-bg);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            color: var(--color-accent);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .expand-btn:hover {
            background: var(--input-focus-bg);
            border-color: var(--color-accent);
            transform: translateY(-1px);
        }

        .expand-btn:active {
            transform: translateY(0);
        }

        .expand-btn.loading {
            cursor: wait;
            opacity: 0.6;
        }

        .expand-btn.expanded {
            display: none;
        }

        #extended-info .table {
            margin-top: 0;
            padding-top: 0;
        }

        #extended-info .table > div {
            margin: 7px 0;
            color: var(--color-muted);
            text-align: left;
            display: flex;
            justify-content: space-between;
            gap: 12px;
        }

        #extended-info .table > div > span:first-child {
            flex: 1;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 11px;
            color: var(--color-muted);
        }

        #extended-info .table > div > span:last-child {
            flex-shrink: 0;
            font-weight: bold;
            padding: 0 3px;
            border-radius: 3px;
            text-align: right;
        }

        .recent ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .recent ul li {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            font-size: 13px;
            padding: 6px 0;
            color: var(--color-muted);
        }

        .recent ul li .name {
            color: var(--color-secondary);
            margin-right: 16px;
            word-break: break-word;
            text-decoration: none;
            border-radius: 3px;
            padding: 2px 4px;
            transition: all 0.2s ease;
        }

        .recent ul li .name:hover,
        .recent ul li .name:focus {
            background-color: var(--color-secondary);
            color: var(--color-bkg);
            outline: none;
        }

        .recent ul li.dir .name {
            color: var(--color-accent);
            font-weight: bold;
        }

        .recent ul li.dir .name:hover,
        .recent ul li.dir .name:focus {
            background-color: var(--color-accent);
            color: var(--color-bkg);
            outline: none;
        }

        .recent ul li small {
            font-size: 11px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--color-muted);
            white-space: nowrap;
            margin-left: auto;
        }

        .projects {
            padding: var(--card-padding);
            max-width: 100%;
            background: var(--card-bg);
            border-radius: var(--card-radius);
            box-shadow: var(--card-shadow);
        }

        .projects .content {
            position: relative;
            height: auto;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .projects .content input {
            background: var(--input-bg);
            border: none;
            padding: 12px 15px;
            margin-bottom: 10px;
            width: 100%;
            box-sizing: border-box;
            border-radius: 4px;
            font-family: monospace;
            font-weight: bold;
            color: var(--input-text);
            transition: all 0.3s ease;
        }

        .projects .content input::placeholder {
            color: var(--color-muted);
        }

        .projects .content input:focus {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
            background: var(--input-focus-bg);
        }

        .projects ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            flex: 1;
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .projects ul::-webkit-scrollbar {
            display: none;
        }

        .projects ul li {
            margin: 8px 0;
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
            border-radius: 4px;
            transition: background-color 0.2s ease;
        }

        .projects ul li:hover {
            background-color: rgba(255, 255, 255, 0.03);
        }

        .projects ul li.hidden {
            display: none;
        }

        .projects ul li .project-link {
            display: flex;
            align-items: center;
            flex: 1;
            gap: 12px;
            text-decoration: none;
            color: inherit;
            padding: 4px 12px 4px 0;
            margin: -4px 0;
            min-width: 0;
        }

        .projects ul li .project-link:hover {
            color: var(--color-accent);
        }

        .projects ul li .project-main {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 1;
            min-width: 0;
            padding-left: 12px;
        }

        .projects ul li .project-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .projects ul li .spacer {
            flex: 1;
            min-width: 20px;
        }

        .projects ul li .project-meta {
            font-size: 11px;
            color: var(--color-muted);
            font-style: italic;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }

        .projects ul li .project-meta .description {
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .projects ul li .project-meta .tag {
            display: inline-flex;
            align-items: center;
            padding: 2px 6px;
            background: var(--input-bg);
            border-radius: 3px;
            font-size: 10px;
            white-space: nowrap;
            font-style: normal;
        }

        .projects ul li .project-controls {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
            padding-right: 12px;
        }

        .projects ul li .project-controls button {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 4px;
            font-size: 14px;
            color: var(--color-muted);
            transition: all 0.2s ease;
            border-radius: 3px;
            opacity: 0;
        }

        .projects ul li:hover .project-controls button {
            opacity: 1;
        }

        .projects ul li .project-controls button:hover {
            background: var(--input-bg);
            color: var(--color-accent);
            transform: scale(1.1);
        }

        .projects ul li .project-controls button.active {
            color: var(--color-accent);
        }

        .projects ul li .file-size {
            font-size: 11px;
            color: var(--color-muted);
            min-width: 50px;
            text-align: right;
            flex-shrink: 0;
        }

        .projects ul li .category-badge {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 3px;
            background: var(--input-bg);
            color: var(--color-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
            flex-shrink: 0;
        }


        .projects ul li .category-badge.Laravel { background: #ff2d20; color: white; }
        .projects ul li .category-badge.WordPress { background: #21759b; color: white; }
        .projects ul li .category-badge.React { background: #61dafb; color: #282c34; }
        .projects ul li .category-badge.Node { background: #339933; color: white; }
        .projects ul li .category-badge.Python { background: #3776ab; color: white; }
        .projects ul li .category-badge.PHP { background: #777bb4; color: white; }
        .projects ul li .category-badge.Static { background: #6c757d; color: white; }
        .projects ul li .category-badge.Other { background: var(--color-accent); color: var(--color-bkg); }

        .favorites-section {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .favorites-section h3 {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--color-muted);
            margin: 0 0 12px 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .favorites-section h3::before {
            content: '⭐';
            font-size: 14px;
        }

        .favorites-section.empty {
            display: none;
        }

        .projects ul li a {
            text-decoration: none;
            border-radius: 3px;
            font-size: 13px;
            padding: 2px 4px;
            flex: 1;
            min-width: 0;
            transition: all 0.2s ease;
        }

        .projects ul li .file-size {
            font-size: 11px;
            color: var(--color-muted);
            white-space: nowrap;
            font-weight: normal;
        }

        .projects ul li.dir a {
            color: var(--color-accent);
            font-weight: bold;
        }

        .projects ul li.dir a:hover,
        .projects ul li.dir a:focus {
            background-color: var(--color-accent);
            color: var(--color-bkg);
            outline: none;
        }

        .projects ul li.file a {
            color: var(--color-secondary);
        }

        .projects ul li.file a:hover,
        .projects ul li.file a:focus {
            background-color: var(--color-secondary);
            color: var(--color-bkg);
            outline: none;
        }

        .tools ul {
            list-style-type: none;
            padding: 0;
            margin-left: 4px;
        }

        .tools ul li::before {
            content: '↪ ';
        }

        .tools ul li {
            margin: 6px 0;
        }

        .tools ul li a {
            color: var(--color-accent);
            text-decoration: none;
            border-radius: 3px;
            font-size: 14px;
            padding: 2px 4px;
            transition: all 0.2s ease;
        }

        .tools ul li a:hover {
            background-color: var(--color-accent);
            color: var(--color-bkg);
        }

        /* Ports Section */
        .ports-content {
            min-height: 40px;
        }

        .ports-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .ports-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .ports-list li:last-child {
            border-bottom: none;
        }

        .ports-list .port-link {
            color: var(--color-accent);
            text-decoration: none;
            font-weight: bold;
            font-size: 14px;
            padding: 2px 6px;
            border-radius: 3px;
            transition: all 0.2s ease;
        }

        .ports-list .port-link:hover {
            background-color: var(--color-accent);
            color: var(--color-bkg);
        }

        .ports-list .port-process {
            color: var(--color-muted);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .ports-list .port-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ports-list .kill-btn {
            background: rgba(255, 80, 80, 0.15);
            border: 1px solid rgba(255, 80, 80, 0.4);
            color: #ff6b6b;
            cursor: pointer;
            font-size: 11px;
            font-weight: bold;
            padding: 3px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .ports-list .kill-btn:hover {
            background: #ff6b6b;
            border-color: #ff6b6b;
            color: #fff;
        }

        .refresh-btn {
            font-size: 14px !important;
        }

        .refresh-btn.loading {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Project Notes Modal */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: var(--color-bkg);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 24px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        }

        .modal h3 {
            margin: 0 0 20px 0;
            color: var(--color-text);
            font-size: 18px;
        }

        .modal label {
            display: block;
            margin: 16px 0 6px 0;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--color-muted);
        }

        .modal input[type="text"],
        .modal input[type="url"],
        .modal textarea,
        .modal select {
            width: 100%;
            background: var(--input-bg);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--color-text);
            padding: 10px 12px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 13px;
            box-sizing: border-box;
        }

        .modal textarea {
            resize: vertical;
            min-height: 80px;
        }

        .modal input:focus,
        .modal textarea:focus,
        .modal select:focus {
            outline: none;
            border-color: var(--color-accent);
            background: var(--input-focus-bg);
        }

        .modal .tag-list {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 8px;
        }

        .modal .tag-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: var(--input-bg);
            border-radius: 4px;
            font-size: 12px;
            color: var(--color-text);
        }

        .modal .tag-item button {
            background: none;
            border: none;
            color: var(--color-muted);
            cursor: pointer;
            padding: 0;
            font-size: 14px;
            line-height: 1;
        }

        .modal .tag-item button:hover {
            color: var(--color-accent);
        }

        .modal .button-group {
            display: flex;
            gap: 12px;
            margin-top: 24px;
            justify-content: flex-end;
        }

        .modal button {
            padding: 10px 20px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            font-family: monospace;
            font-size: 13px;
            transition: all 0.2s ease;
        }

        .modal button.primary {
            background: var(--color-accent);
            color: var(--color-bkg);
        }

        .modal button.primary:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .modal button.secondary {
            background: var(--input-bg);
            color: var(--color-text);
        }

        .modal button.secondary:hover {
            background: var(--input-focus-bg);
        }

        .modal .info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            color: var(--color-muted);
            font-size: 12px;
        }

        .modal .info-row strong {
            color: var(--color-text);
        }

        @media screen and (max-width: 900px) {
            main {
                grid-template-columns: 1fr;
            }
        }

        @media screen and (max-width: 500px) {
            :root {
                --body-padding-x: 12px;
                --grid-gap: 24px;
            }

            .theme-toggle {
                gap: 8px;
            }

            .theme-toggle button {
                width: 16px;
                height: 16px;
            }

            main > aside {
                order: 2;
                min-width: 0;
            }

            .projects ul li {
                margin: 12px 0;
            }

            .projects ul li a {
                padding: 12px 8px;
                font-size: 14px;
                min-height: 44px;
                display: flex;
                align-items: center;
            }

            .recent ul li {
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
                padding: 8px 0;
            }

            .recent ul li .name {
                padding: 8px 12px;
                min-height: 44px;
                display: flex;
                align-items: center;
            }

            .recent ul li small {
                margin-left: 0;
            }

            .tools ul li a {
                padding: 12px 8px;
                min-height: 44px;
                display: flex;
                align-items: center;
                font-size: 15px;
            }

            .sort-btn {
                padding: 12px 16px;
                font-size: 14px;
                min-height: 44px;
            }
        }
    </style>
</head>

<body>
<main>
    <div class="projects">
        <div class="projects-header">
            <h2>projects</h2>
            <div class="sort-buttons">
                <button class="sort-btn <?= $sortOrder === 'name' ? 'active' : '' ?>" data-sort="name" title="Sort by name">A-Z</button>
                <button class="sort-btn <?= $sortOrder === 'date' ? 'active' : '' ?>" data-sort="date" title="Sort by date">📅</button>
                <button class="sort-btn <?= $sortOrder === 'size' ? 'active' : '' ?>" data-sort="size" title="Sort by size">💾</button>
            </div>
        </div>
        <div class="content">
            <input type="text" placeholder="Search" class="search">

            <!-- Favorites Section -->
            <div class="favorites-section empty" id="favorites-section">
                <h3>Favorites</h3>
                <ul id="favorites-list"></ul>
            </div>

            <!-- Main Projects List -->
            <ul id="projects-list">
				<?php foreach( $directoryList as $item ):
					$showSize = $options['display']['show_file_sizes'] ?? true;
					$sizeBytes = $item['size'] ?? 0;
					$sizeFormatted = humanFileSize( $sizeBytes );
					$size = ($showSize && $sizeBytes > 0) ? $sizeFormatted : '';
				?>
                    <li class="<?= $item['type'] ?>"
                        data-name="<?= htmlspecialchars( $item['name'], ENT_QUOTES, 'UTF-8' ); ?>"
                        data-modified="<?= $item['mtime'] ?? 0 ?>"
                        data-size="<?= $item['size'] ?? 0 ?>">
                        <a class="project-link" target="_blank" href="<?= htmlspecialchars( $item['name'], ENT_QUOTES, 'UTF-8' ); ?>">
                            <div class="project-main">
                                <span class="project-name"><?= htmlspecialchars( $item['name'], ENT_QUOTES, 'UTF-8' ); ?></span>
                            </div>
                            <span class="spacer"></span>
                            <span class="project-meta" style="display: none;"></span>
                            <span class="category-badge" style="display: none;"></span>
                        </a>
                        <div class="project-controls">
                            <button class="favorite-btn" title="Add to favorites" aria-label="Add to favorites">☆</button>
                            <button class="category-btn" title="Set category" aria-label="Set category">🏷️</button>
                            <button class="notes-btn" title="Add notes" aria-label="Add notes">📝</button>
                        </div>
                        <span class="file-size" style="display: none;" data-size-formatted="<?= htmlspecialchars($sizeFormatted) ?>"></span>
                    </li>
				<?php endforeach; ?>
            </ul>
        </div>
    </div>
    <aside>
        <div class="theme">
            <h2>theme</h2>
            <div class="theme-toggle" role="group" aria-label="Theme selector">
                <?php foreach( $themeOrder as $idx => $key ): ?>
                <button
                    type="button"
                    data-theme-key="<?= htmlspecialchars( $key, ENT_QUOTES, 'UTF-8' ); ?>"
                    aria-pressed="<?= $idx === $defaultThemeIndex ? 'true' : 'false'; ?>"
                    aria-label="<?= htmlspecialchars( $themes[ $key ]['label'], ENT_QUOTES, 'UTF-8' ); ?>"
                    style="--theme-accent: <?= htmlspecialchars( $themes[ $key ]['accent'], ENT_QUOTES, 'UTF-8' ); ?>;"
                ></button>
                <?php endforeach; ?>
            </div>
        </div>
        <div class="info">
            <div class="section-header">
                <h2>info</h2>
                <button class="toggle-btn" data-target="info-extended" data-ajax="runtimes" aria-label="Expand runtimes">+</button>
            </div>
            <div class="table" id="basic-info">
				<?php foreach( $info as $label => $value ): ?>
                    <div class="<?= $label ?>">
                        <span><?= htmlspecialchars( $label, ENT_QUOTES, 'UTF-8' ); ?></span>
                        <span><?= htmlspecialchars( $value, ENT_QUOTES, 'UTF-8' ); ?></span>
                    </div>
				<?php endforeach; ?>
            </div>
            <div id="info-extended" class="extended-section" style="display: none;">
                <div id="extended-info"></div>
            </div>
        </div>
		<?php if( !empty( $options['extras'] ) ): ?>
            <div class="tools">
                <h2>extras</h2>
                <ul>
					<?php foreach( $options['extras'] as $label => $link ):
						// Use POST for phpinfo links (CSRF token not exposed in URL)
						$isPhpinfo = strpos( $link, 'phpinfo' ) !== false;
						$usePost = $isPhpinfo && !empty( $options['security']['enable_csrf'] );
					?>
						<?php if( $usePost ): ?>
                        <li><a href="#" onclick="postToPhpinfo(); return false;"><?= htmlspecialchars( $label, ENT_QUOTES, 'UTF-8' ); ?></a></li>
						<?php else: ?>
                        <li><a target="_blank" href="<?= htmlspecialchars( $link, ENT_QUOTES, 'UTF-8' ); ?>"><?= htmlspecialchars( $label, ENT_QUOTES, 'UTF-8' ); ?></a></li>
						<?php endif; ?>
					<?php endforeach; ?>
                </ul>
            </div>
		<?php endif; ?>
        <div class="ports">
            <div class="section-header">
                <h2>ports</h2>
                <button class="toggle-btn refresh-btn" id="refresh-ports" aria-label="Refresh ports">↻</button>
            </div>
            <div id="ports-list" class="ports-content">
                <div style="text-align:center;padding:10px;color:var(--color-muted);">Scanning...</div>
            </div>
        </div>
		<?php if( !empty( $statsPreview ) ): ?>
            <div class="stats">
                <div class="section-header">
                    <h2>stats</h2>
                    <button class="toggle-btn" data-target="stats-extended" data-preview="stats-preview" data-ajax="server_stats" aria-label="Expand stats">+</button>
                </div>
                <div id="stats-preview" class="table">
					<?php foreach( $statsPreview as $label => $value ): ?>
                        <div>
                            <span><?= htmlspecialchars( $label, ENT_QUOTES, 'UTF-8' ); ?></span>
                            <span><?= htmlspecialchars( $value, ENT_QUOTES, 'UTF-8' ); ?></span>
                        </div>
					<?php endforeach; ?>
                </div>
				<?php if( !empty( $statsProjectExpanded ) || !empty( $statsSystemExpanded ) || !empty( $statsPHPExpanded ) || !empty( $statsServerExpanded ) ): ?>
                <div id="stats-extended" style="display: none;">
					<?php if( !empty( $statsProjectExpanded ) ): ?>
                        <div class="table">
							<?php foreach( $statsProjectExpanded as $label => $value ): ?>
                                <div>
                                    <span><?= htmlspecialchars( $label, ENT_QUOTES, 'UTF-8' ); ?></span>
                                    <span><?= htmlspecialchars( $value, ENT_QUOTES, 'UTF-8' ); ?></span>
                                </div>
							<?php endforeach; ?>
                        </div>
					<?php endif; ?>
					<?php if( !empty( $statsSystemExpanded ) ): ?>
                        <div class="table" style="margin-top: calc(var(--spacing-unit) * 2); padding-top: calc(var(--spacing-unit) * 2); border-top: 1px solid rgba(255, 255, 255, 0.1);">
							<?php foreach( $statsSystemExpanded as $label => $value ): ?>
                                <div>
                                    <span><?= htmlspecialchars( $label, ENT_QUOTES, 'UTF-8' ); ?></span>
                                    <span><?= htmlspecialchars( $value, ENT_QUOTES, 'UTF-8' ); ?></span>
                                </div>
							<?php endforeach; ?>
                        </div>
					<?php endif; ?>
					<?php if( !empty( $statsPHPExpanded ) ): ?>
                        <div class="table" style="margin-top: calc(var(--spacing-unit) * 2); padding-top: calc(var(--spacing-unit) * 2); border-top: 1px solid rgba(255, 255, 255, 0.1);">
							<?php foreach( $statsPHPExpanded as $label => $value ): ?>
                                <div>
                                    <span><?= htmlspecialchars( $label, ENT_QUOTES, 'UTF-8' ); ?></span>
                                    <span><?= htmlspecialchars( $value, ENT_QUOTES, 'UTF-8' ); ?></span>
                                </div>
							<?php endforeach; ?>
                        </div>
					<?php endif; ?>
	                        <div id="server-stats-container" class="table" style="margin-top: calc(var(--spacing-unit) * 2); padding-top: calc(var(--spacing-unit) * 2); border-top: 1px solid rgba(255, 255, 255, 0.1);">
                            <div style="text-align:center;padding:5px;color:var(--color-muted);font-size:12px;">Server stats load on expand</div>
                        </div>
                </div>
				<?php endif; ?>
            </div>
		<?php endif; ?>
            <div class="actions">
                <div class="section-header">
                    <h2>actions</h2>
                </div>
                <div class="action-buttons">
                    <button class="action-btn" data-action="clear-opcache" title="Clear OPcache">
                        <span>🗑️</span> Clear OPcache
                    </button>
                    <button class="action-btn" data-action="clear-sessions" title="Clear session files">
                        <span>🗑️</span> Clear Sessions
                    </button>
                </div>

                <!-- Action Output -->
                <div id="action-output" style="display: none; margin-top: calc(var(--spacing-unit) * 2); padding: var(--card-padding); background: var(--input-bg); border-radius: var(--card-radius); border: 1px solid rgba(255, 255, 255, 0.1);">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--spacing-unit) * 2);">
                        <strong id="action-output-title">Output</strong>
                        <button id="action-output-close" style="background: none; border: none; color: var(--color-accent); cursor: pointer; font-size: 20px;">×</button>
                    </div>
                    <pre id="action-output-content" style="white-space: pre-wrap; word-wrap: break-word; max-height: 300px; overflow-y: auto; font-size: 12px; line-height: 1.4;"></pre>
                </div>
            </div>
		<?php if( !empty( $recentPreview ) ): ?>
            <div class="recent">
                <div class="section-header">
                    <h2>recent</h2>
                    <button class="toggle-btn" data-target="recent-extended" aria-label="Expand recent">+</button>
                </div>
                <ul>
					<?php foreach( $recentPreview as $item ): ?>
                        <li class="<?= htmlspecialchars( $item['type'], ENT_QUOTES, 'UTF-8' ); ?>">
                            <a target="_blank" href="<?= htmlspecialchars( $item['name'], ENT_QUOTES, 'UTF-8' ); ?>" class="name">
								<?= htmlspecialchars( $item['name'], ENT_QUOTES, 'UTF-8' ); ?>
                            </a>
                            <small title="<?= htmlspecialchars( $item['absolute'], ENT_QUOTES, 'UTF-8' ); ?>"><?= htmlspecialchars( $item['relative'], ENT_QUOTES, 'UTF-8' ); ?></small>
                        </li>
					<?php endforeach; ?>
                </ul>
				<?php if( !empty( $recentExtended ) ): ?>
                <div id="recent-extended" style="display: none; margin-top: calc(var(--spacing-unit) * 2);">
                    <ul>
						<?php foreach( $recentExtended as $item ): ?>
                            <li class="<?= htmlspecialchars( $item['type'], ENT_QUOTES, 'UTF-8' ); ?>">
                                <a target="_blank" href="<?= htmlspecialchars( $item['name'], ENT_QUOTES, 'UTF-8' ); ?>" class="name">
									<?= htmlspecialchars( $item['name'], ENT_QUOTES, 'UTF-8' ); ?>
                                </a>
                                <small title="<?= htmlspecialchars( $item['absolute'], ENT_QUOTES, 'UTF-8' ); ?>"><?= htmlspecialchars( $item['relative'], ENT_QUOTES, 'UTF-8' ); ?></small>
                            </li>
						<?php endforeach; ?>
                    </ul>
                </div>
				<?php endif; ?>
            </div>
		<?php endif; ?>
    </aside>
</main>
<script>
    // POST-based phpinfo access (CSRF token not exposed in URL)
    function postToPhpinfo() {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '?phpinfo=1';
        form.target = '_blank';
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'csrf_token';
        input.value = '<?= htmlspecialchars( $_SESSION['csrf_token'] ?? '', ENT_QUOTES, 'UTF-8' ); ?>';
        form.appendChild(input);
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    }

    const themeData = <?= json_encode( $themesForClient, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE ); ?>;
    const themeOrder = <?= json_encode( array_values( $themeOrder ), JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE ); ?>;
    const defaultThemeKey = <?= json_encode( $defaultThemeKey, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE ); ?>;
    const themeButtons = Array.from(document.querySelectorAll('.theme-toggle button'));
    const rootStyle = document.documentElement.style;
    const THEME_STORAGE_KEY = 'directoryTheme';

    const updateButtonState = (activeKey) => {
        themeButtons.forEach((button) => {
            const isActive = button.dataset.themeKey === activeKey;
            button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
        });
    };

    const applyTheme = (key, { persist = true } = {}) => {
        const selectedTheme = themeData[key];
        if (!selectedTheme) {
            return;
        }

        rootStyle.setProperty('--color-bkg', selectedTheme.background);
        rootStyle.setProperty('--color-accent', selectedTheme.accent);
        rootStyle.setProperty('--color-secondary', selectedTheme.secondary);
        rootStyle.setProperty('--color-text', selectedTheme.text ?? '#ffffff');
        rootStyle.setProperty('--color-title', selectedTheme.title ?? 'rgba(255, 255, 255, 0.85)');
        rootStyle.setProperty('--color-muted', selectedTheme.muted ?? 'rgba(255, 255, 255, 0.65)');
        rootStyle.setProperty('--input-bg', selectedTheme.inputBg ?? 'rgba(255, 255, 255, 0.06)');
        rootStyle.setProperty('--input-focus-bg', selectedTheme.inputFocusBg ?? 'rgba(204, 204, 204, 0.05)');
        rootStyle.setProperty('--input-text', selectedTheme.inputText ?? '#dfdfdf');

        updateButtonState(key);

        if (persist) {
            try {
                localStorage.setItem(THEME_STORAGE_KEY, key);
            } catch (err) {
                // ignore storage failures
            }
        }
    };

    const resolveInitialTheme = () => {
        try {
            const storedKey = localStorage.getItem(THEME_STORAGE_KEY);
            if (storedKey && Object.prototype.hasOwnProperty.call(themeData, storedKey)) {
                return storedKey;
            }
        } catch (err) {
            // ignore storage failures
        }
        return defaultThemeKey;
    };

    const initialThemeKey = resolveInitialTheme();
    applyTheme(initialThemeKey, { persist: false });

    const focusButtonByOffset = (currentKey, offset) => {
        const currentIndex = themeOrder.indexOf(currentKey);
        if (currentIndex === -1) {
            return;
        }
        const nextIndex = (currentIndex + offset + themeOrder.length) % themeOrder.length;
        const nextKey = themeOrder[nextIndex];
        const nextButton = themeButtons.find((button) => button.dataset.themeKey === nextKey);
        if (nextButton) {
            nextButton.focus();
            applyTheme(nextKey);
        }
    };

    themeButtons.forEach((button) => {
        button.addEventListener('click', () => {
            const key = button.dataset.themeKey;
            if (key) {
                applyTheme(key);
            }
        });

        button.addEventListener('keydown', (event) => {
            const key = button.dataset.themeKey;
            if (!key) {
                return;
            }
            if (event.key === 'ArrowLeft') {
                event.preventDefault();
                focusButtonByOffset(key, -1);
            } else if (event.key === 'ArrowRight') {
                event.preventDefault();
                focusButtonByOffset(key, 1);
            }
        });
    });

    const searchInput = document.querySelector('input.search');
    const projectContent = document.querySelector('#projects-list');

    searchInput.focus();
    searchInput.addEventListener('keyup', (e) => {
        let val = searchInput.value.trim().toLowerCase();

        // Search both main list and favorites
        document.querySelectorAll('#projects-list li, #favorites-list li').forEach((el) => {
            // jump to the first displayed dir/file on enter
            if (e.keyCode == 13 && val != '') {
                const firstResult = projectContent.querySelector('li:not(.hidden) a');
                if (firstResult) {
                    const loc = firstResult.getAttribute('href');
                    searchInput.value = '';
                    window.location = loc;
                }
            }

            if (val == '') {
                el.classList.remove('hidden');
            } else {
                // Search in project name
                const name = el.dataset.name || '';
                let searchText = name.toLowerCase();

                // Also search in notes data
                const notes = projectData.notes[name];
                if (notes) {
                    if (notes.description) searchText += ' ' + notes.description.toLowerCase();
                    if (notes.url) searchText += ' ' + notes.url.toLowerCase();
                    if (notes.tags) searchText += ' ' + notes.tags.join(' ').toLowerCase();
                }

                // Also search in category
                const category = projectData.categories[name];
                if (category) searchText += ' ' + category.toLowerCase();

                if (searchText.indexOf(val) <= -1) {
                    el.classList.add('hidden');
                } else {
                    el.classList.remove('hidden');
                }
            }
        });
    });

    // Sort button handlers (client-side, instant sorting with reverse)
    const sortButtons = document.querySelectorAll('.sort-btn');
    const projectList = document.querySelector('#projects-list');
    let currentSort = null;
    let isReversed = false;

    if (projectList) {
        sortButtons.forEach((btn) => {
            btn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                const sortType = btn.dataset.sort;

                // Check if clicking the same button (toggle reverse)
                if (currentSort === sortType) {
                    isReversed = !isReversed;
                } else {
                    isReversed = false;
                    currentSort = sortType;
                }

                // Update active state
                sortButtons.forEach(b => {
                    b.classList.remove('active');
                    b.classList.remove('reversed');
                });
                btn.classList.add('active');
                if (isReversed) {
                    btn.classList.add('reversed');
                }

                // Show/hide file sizes based on sort type
                const showSizes = sortType === 'size';
                document.querySelectorAll('#projects-list .file-size, #favorites-list .file-size').forEach(sizeEl => {
                    if (showSizes) {
                        // Show all sizes when sorting by size
                        const formattedSize = sizeEl.dataset.sizeFormatted || '0 B';
                        sizeEl.textContent = formattedSize;
                        sizeEl.style.display = '';
                    } else {
                        // Hide all sizes when not sorting by size
                        sizeEl.textContent = '';
                        sizeEl.style.display = 'none';
                    }
                });

                // Get all list items
                const items = Array.from(projectList.children);

                // Sort items
                items.sort((a, b) => {
                    // For name sorting: directories before files
                    // For date/size sorting: mix directories and files together
                    if (sortType === 'name') {
                        const typeA = a.classList.contains('dir') ? 0 : 1;
                        const typeB = b.classList.contains('dir') ? 0 : 1;
                        if (typeA !== typeB) {
                            return typeA - typeB;
                        }
                    }

                    // Sort by the selected criterion
                    let result = 0;
                    if (sortType === 'name') {
                        const nameA = (a.dataset.name || '').toLowerCase();
                        const nameB = (b.dataset.name || '').toLowerCase();
                        result = nameA.localeCompare(nameB);
                    } else if (sortType === 'date') {
                        const dateA = parseInt(a.dataset.modified || '0');
                        const dateB = parseInt(b.dataset.modified || '0');
                        result = dateB - dateA; // Newest first by default
                    } else if (sortType === 'size') {
                        const sizeA = parseInt(a.dataset.size || '0');
                        const sizeB = parseInt(b.dataset.size || '0');
                        result = sizeB - sizeA; // Largest first by default
                    }

                    // Reverse if needed
                    return isReversed ? -result : result;
                });

                // Clear and re-append in sorted order
                projectList.innerHTML = '';
                items.forEach(item => projectList.appendChild(item));
            });
        });
    }

    // ===== PROJECT MANAGEMENT SYSTEM =====
    const STORAGE_KEY = 'localhostindex_projects';

    // Data structure for project management
    let projectData = {
        favorites: [],
        categories: {},
        notes: {}
    };

    // Load data from localStorage
    function loadProjectData() {
        try {
            const stored = localStorage.getItem(STORAGE_KEY);
            if (stored) {
                projectData = JSON.parse(stored);
            }
        } catch (e) {
            console.error('Failed to load project data:', e);
        }
    }

    // Save data to localStorage
    function saveProjectData() {
        try {
            localStorage.setItem(STORAGE_KEY, JSON.stringify(projectData));
        } catch (e) {
            console.error('Failed to save project data:', e);
        }
    }

    // Initialize UI based on stored data
    function initializeProjectUI() {
        document.querySelectorAll('#projects-list li').forEach(li => {
            const name = li.dataset.name;
            if (!name) return;

            // Reset state
            const favoriteBtn = li.querySelector('.favorite-btn');
            favoriteBtn.textContent = '☆';
            favoriteBtn.classList.remove('active');
            favoriteBtn.title = 'Add to favorites';

            const badge = li.querySelector('.category-badge');
            badge.style.display = 'none';
            badge.textContent = '';
            badge.className = 'category-badge';

            const notesBtn = li.querySelector('.notes-btn');
            notesBtn.classList.remove('active');

            const meta = li.querySelector('.project-meta');
            meta.style.display = 'none';
            meta.innerHTML = '';

            // Update favorite button
            if (projectData.favorites.includes(name)) {
                favoriteBtn.textContent = '★';
                favoriteBtn.classList.add('active');
                favoriteBtn.title = 'Remove from favorites';
            }

            // Update category badge
            if (projectData.categories[name]) {
                badge.textContent = projectData.categories[name];
                badge.className = 'category-badge ' + projectData.categories[name];
                badge.style.display = '';
            }

            // Display notes metadata (description + tags)
            const notes = projectData.notes[name];
            if (notes && (notes.description || notes.tags || notes.url)) {
                notesBtn.classList.add('active');

                let metaHTML = '';

                // Show description (truncated)
                if (notes.description) {
                    metaHTML += `<span class="description">${escapeHtml(notes.description)}</span>`;
                }

                // Show tags
                if (notes.tags && notes.tags.length > 0) {
                    metaHTML += notes.tags.map(tag => `<span class="tag">${escapeHtml(tag)}</span>`).join('');
                }

                if (metaHTML) {
                    meta.innerHTML = metaHTML;
                    meta.style.display = '';
                }
            }
        });

        // Update favorites section
        updateFavoritesSection();
    }

    // Update favorites section
    function updateFavoritesSection() {
        const favSection = document.getElementById('favorites-section');
        const favList = document.getElementById('favorites-list');
        favList.innerHTML = '';

        if (projectData.favorites.length === 0) {
            favSection.classList.add('empty');
            return;
        }

        favSection.classList.remove('empty');

        projectData.favorites.forEach(name => {
            const originalLi = document.querySelector(`#projects-list li[data-name="${CSS.escape(name)}"]`);
            if (originalLi) {
                const clone = originalLi.cloneNode(true);
                favList.appendChild(clone);
                attachProjectControls(clone);
            }
        });
    }

    // Attach event listeners to project controls
    function attachProjectControls(li) {
        const name = li.dataset.name;

        // Favorite button
        const favoriteBtn = li.querySelector('.favorite-btn');
        if (favoriteBtn) {
            favoriteBtn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                toggleFavorite(name);
            });
        }

        // Category button
        const categoryBtn = li.querySelector('.category-btn');
        if (categoryBtn) {
            categoryBtn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                showCategoryModal(name);
            });
        }

        // Notes button
        const notesBtn = li.querySelector('.notes-btn');
        if (notesBtn) {
            notesBtn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                showNotesModal(name);
            });
        }

        // Track last opened
        const link = li.querySelector('.project-link');
        if (link) {
            link.addEventListener('click', () => {
                trackLastOpened(name);
            });
        }
    }

    // Toggle favorite status
    function toggleFavorite(name) {
        const index = projectData.favorites.indexOf(name);
        if (index > -1) {
            projectData.favorites.splice(index, 1);
        } else {
            projectData.favorites.push(name);
        }
        saveProjectData();
        initializeProjectUI();
    }

    // Show category modal
    let currentCategoryProject = null;
    function showCategoryModal(name) {
        currentCategoryProject = name;
        const modal = document.getElementById('categoryModal');
        const select = document.getElementById('category-select');
        const projectNameSpan = document.getElementById('category-modal-project-name');

        projectNameSpan.textContent = name;
        select.value = projectData.categories[name] || '';
        modal.classList.add('active');
    }

    // Show notes modal
    let currentNotesProject = null;
    function showNotesModal(name) {
        currentNotesProject = name;
        const modal = document.getElementById('notesModal');
        const projectNameSpan = document.getElementById('modal-project-name');
        const categorySelect = document.getElementById('modal-category');
        const descriptionInput = document.getElementById('modal-description');
        const urlInput = document.getElementById('modal-url');
        const lastOpenedSpan = document.getElementById('modal-last-opened');
        const tagsContainer = document.getElementById('modal-tags');

        projectNameSpan.textContent = name;
        categorySelect.value = projectData.categories[name] || '';

        const notes = projectData.notes[name] || {};
        descriptionInput.value = notes.description || '';
        urlInput.value = notes.url || '';

        // Last opened
        if (notes.lastOpened) {
            const date = new Date(notes.lastOpened);
            lastOpenedSpan.textContent = date.toLocaleString();
        } else {
            lastOpenedSpan.textContent = 'Never';
        }

        // Tags
        tagsContainer.innerHTML = '';
        if (notes.tags && notes.tags.length > 0) {
            notes.tags.forEach(tag => {
                const tagEl = document.createElement('span');
                tagEl.className = 'tag-item';
                tagEl.innerHTML = `${escapeHtml(tag)} <button onclick="removeTag('${escapeHtml(tag)}')">×</button>`;
                tagsContainer.appendChild(tagEl);
            });
        }

        modal.classList.add('active');
    }

    // Remove tag
    window.removeTag = function(tag) {
        if (!currentNotesProject) return;
        const notes = projectData.notes[currentNotesProject] || {};
        notes.tags = (notes.tags || []).filter(t => t !== tag);
        projectData.notes[currentNotesProject] = notes;

        const tagsContainer = document.getElementById('modal-tags');
        tagsContainer.innerHTML = '';
        notes.tags.forEach(t => {
            const tagEl = document.createElement('span');
            tagEl.className = 'tag-item';
            tagEl.innerHTML = `${escapeHtml(t)} <button onclick="removeTag('${escapeHtml(t)}')">×</button>`;
            tagsContainer.appendChild(tagEl);
        });
    };

    // Track last opened
    function trackLastOpened(name) {
        if (!projectData.notes[name]) {
            projectData.notes[name] = {};
        }
        projectData.notes[name].lastOpened = Date.now();
        saveProjectData();
    }

    // Initialize modal event listeners (delayed until DOM ready)
    function initializeModalHandlers() {
        // Modal: Category Save
        const categorySave = document.getElementById('category-save');
        if (categorySave) {
            categorySave.addEventListener('click', () => {
                if (!currentCategoryProject) return;
                const category = document.getElementById('category-select').value;

                if (category) {
                    projectData.categories[currentCategoryProject] = category;
                } else {
                    delete projectData.categories[currentCategoryProject];
                }

                saveProjectData();
                initializeProjectUI();
                document.getElementById('categoryModal').classList.remove('active');
                currentCategoryProject = null;
            });
        }

        // Modal: Category Cancel
        const categoryCancel = document.getElementById('category-cancel');
        if (categoryCancel) {
            categoryCancel.addEventListener('click', () => {
                document.getElementById('categoryModal').classList.remove('active');
                currentCategoryProject = null;
            });
        }

        // Modal: Notes Save
        const notesSave = document.getElementById('modal-save');
        if (notesSave) {
            notesSave.addEventListener('click', () => {
                if (!currentNotesProject) return;

                const category = document.getElementById('modal-category').value;
                const description = document.getElementById('modal-description').value;
                const url = document.getElementById('modal-url').value;

                // Save category
                if (category) {
                    projectData.categories[currentNotesProject] = category;
                } else {
                    delete projectData.categories[currentNotesProject];
                }

                // Save notes
                if (!projectData.notes[currentNotesProject]) {
                    projectData.notes[currentNotesProject] = {};
                }

                projectData.notes[currentNotesProject].description = description;
                projectData.notes[currentNotesProject].url = url;

                saveProjectData();
                initializeProjectUI();
                document.getElementById('notesModal').classList.remove('active');
                currentNotesProject = null;
            });
        }

        // Modal: Notes Cancel
        const notesCancel = document.getElementById('modal-cancel');
        if (notesCancel) {
            notesCancel.addEventListener('click', () => {
                document.getElementById('notesModal').classList.remove('active');
                currentNotesProject = null;
            });
        }

        // Tag input handler
        const tagInput = document.getElementById('modal-tag-input');
        if (tagInput) {
            tagInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter' && currentNotesProject) {
                    e.preventDefault();
                    const input = e.target;
                    const tag = input.value.trim();

                    if (tag) {
                        if (!projectData.notes[currentNotesProject]) {
                            projectData.notes[currentNotesProject] = {};
                        }
                        if (!projectData.notes[currentNotesProject].tags) {
                            projectData.notes[currentNotesProject].tags = [];
                        }

                        if (!projectData.notes[currentNotesProject].tags.includes(tag)) {
                            projectData.notes[currentNotesProject].tags.push(tag);

                            const tagsContainer = document.getElementById('modal-tags');
                            const tagEl = document.createElement('span');
                            tagEl.className = 'tag-item';
                            tagEl.innerHTML = `${escapeHtml(tag)} <button onclick="removeTag('${escapeHtml(tag)}')">×</button>`;
                            tagsContainer.appendChild(tagEl);
                        }

                        input.value = '';
                    }
                }
            });
        }

        // Close modals on overlay click
        document.querySelectorAll('.modal-overlay').forEach(overlay => {
            overlay.addEventListener('click', (e) => {
                if (e.target === overlay) {
                    overlay.classList.remove('active');
                    currentCategoryProject = null;
                    currentNotesProject = null;
                }
            });
        });
    }

    // Call modal initialization when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initializeModalHandlers);
    } else {
        initializeModalHandlers();
    }

    // Initialize project management
    loadProjectData();
    document.querySelectorAll('#projects-list li').forEach(attachProjectControls);
    initializeProjectUI();

    // Toggle buttons for stats, actions, and info
    let runtimesLoaded = false;
    let serverStatsLoaded = false;
    let cachedRuntimes = null;
    let cachedServerStats = null;

    // Pre-fetch runtimes in background for instant display when expanded
    (function prefetchRuntimes() {
        const url = new URL(window.location.href);
        url.searchParams.set('action', 'detect_runtimes');
<?php if( !empty( $options['security']['enable_csrf'] ) ): ?>
        url.searchParams.set('token', '<?= $_SESSION['csrf_token'] ?>');
<?php endif; ?>
        fetch(url.toString())
            .then(response => response.json())
            .then(data => { cachedRuntimes = data; })
            .catch(() => {});
    })();

    // Pre-fetch server stats in background
    (function prefetchServerStats() {
        const url = new URL(window.location.href);
        url.searchParams.set('action', 'server_stats');
<?php if( !empty( $options['security']['enable_csrf'] ) ): ?>
        url.searchParams.set('token', '<?= $_SESSION['csrf_token'] ?>');
<?php endif; ?>
        fetch(url.toString())
            .then(response => response.json())
            .then(data => { cachedServerStats = data; })
            .catch(() => {});
    })();

    document.querySelectorAll('.toggle-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const target = document.getElementById(targetId);
            const ajax = this.getAttribute('data-ajax');
            const previewId = this.getAttribute('data-preview');

            if (target) {
                if (target.style.display === 'none') {
                    // Expanding
                    target.style.display = 'block';
                    this.textContent = '−';
                    this.setAttribute('aria-label', 'Collapse section');

                    // Hide preview if it exists
                    if (previewId) {
                        const preview = document.getElementById(previewId);
                        if (preview) {
                            preview.style.display = 'none';
                        }
                    }

                    // Load runtimes via AJAX if needed (use cached data if available)
                    if (ajax === 'runtimes' && !runtimesLoaded) {
                        const extendedInfo = document.getElementById('extended-info');
                        if (extendedInfo) {
                            const displayRuntimes = (data) => {
                                const basicKeys = ['Apache', 'PHP', 'MySQL'];
                                const extended = Object.entries(data)
                                    .filter(([key]) => !basicKeys.includes(key))
                                    .map(([label, value]) => {
                                        const escapedLabel = label.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                                        const escapedValue = value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                                        return `<div><span>${escapedLabel}</span><span>${escapedValue}</span></div>`;
                                    })
                                    .join('');
                                extendedInfo.innerHTML = extended ? `<div class="table">${extended}</div>` : '<div style="text-align:center;padding:10px;color:var(--color-muted);">No additional runtimes detected</div>';
                                runtimesLoaded = true;
                            };

                            if (cachedRuntimes) {
                                displayRuntimes(cachedRuntimes);
                            } else {
                                extendedInfo.innerHTML = '<div style="text-align:center;padding:10px;color:var(--color-muted);">loading...</div>';
                                const url = new URL(window.location.href);
                                url.searchParams.set('action', 'detect_runtimes');
<?php if( !empty( $options['security']['enable_csrf'] ) ): ?>
                                url.searchParams.set('token', '<?= $_SESSION['csrf_token'] ?>');
<?php endif; ?>
                                fetch(url.toString())
                                    .then(response => response.json())
                                    .then(displayRuntimes)
                                    .catch(error => {
                                        console.error('Failed to load runtimes:', error);
                                        extendedInfo.innerHTML = '<div style="text-align:center;padding:10px;color:var(--color-muted);">⚠ Failed to load</div>';
                                    });
                            }
                        }
                    }

                    // Load server stats via AJAX if needed (use cached data if available)
                    if (ajax === 'server_stats' && !serverStatsLoaded) {
                        const serverStatsContainer = document.getElementById('server-stats-container');
                        if (serverStatsContainer) {
                            const displayServerStats = (data) => {
                                const html = Object.entries(data)
                                    .map(([label, value]) => {
                                        const escapedLabel = label.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                                        const escapedValue = String(value).replace(/</g, '&lt;').replace(/>/g, '&gt;');
                                        return `<div><span>${escapedLabel}</span><span>${escapedValue}</span></div>`;
                                    })
                                    .join('');
                                serverStatsContainer.innerHTML = html || '<div style="text-align:center;padding:5px;color:var(--color-muted);">No server stats</div>';
                                serverStatsLoaded = true;
                            };

                            if (cachedServerStats) {
                                displayServerStats(cachedServerStats);
                            } else {
                                serverStatsContainer.innerHTML = '<div style="text-align:center;padding:5px;color:var(--color-muted);">loading...</div>';
                                const url = new URL(window.location.href);
                                url.searchParams.set('action', 'server_stats');
<?php if( !empty( $options['security']['enable_csrf'] ) ): ?>
                                url.searchParams.set('token', '<?= $_SESSION['csrf_token'] ?>');
<?php endif; ?>
                                fetch(url.toString())
                                    .then(response => response.json())
                                    .then(displayServerStats)
                                    .catch(error => {
                                        console.error('Failed to load server stats:', error);
                                        serverStatsContainer.innerHTML = '<div style="text-align:center;padding:5px;color:var(--color-muted);">⚠ Failed</div>';
                                    });
                            }
                        }
                    }
                } else {
                    // Collapsing
                    target.style.display = 'none';
                    this.textContent = '+';
                    this.setAttribute('aria-label', 'Expand section');

                    // Show preview if it exists
                    if (previewId) {
                        const preview = document.getElementById(previewId);
                        if (preview) {
                            // Use grid for action-buttons, block for others
                            preview.style.display = preview.classList.contains('action-buttons') ? 'grid' : 'block';
                        }
                    }

                    // Hide action output when collapsing actions section
                    if (targetId === 'actions-extended') {
                        const actionOutput = document.getElementById('action-output');
                        if (actionOutput) {
                            actionOutput.style.display = 'none';
                        }
                    }
                }
            }
        });
    });

    // Ports detection
    const refreshPortsBtn = document.getElementById('refresh-ports');
    const portsList = document.getElementById('ports-list');

    function loadPorts() {
        if (!refreshPortsBtn || !portsList) return;

        refreshPortsBtn.classList.add('loading');
        portsList.innerHTML = '<div style="text-align:center;padding:10px;color:var(--color-muted);">Scanning...</div>';

        const url = new URL(window.location.href);
        url.searchParams.set('action', 'detect_ports');
<?php if( !empty( $options['security']['enable_csrf'] ) ): ?>
        url.searchParams.set('token', '<?= $_SESSION['csrf_token'] ?>');
<?php endif; ?>

        fetch(url.toString())
            .then(response => response.json())
            .then(data => {
                refreshPortsBtn.classList.remove('loading');

                if (!data.ports || data.ports.length === 0) {
                    portsList.innerHTML = '<div style="text-align:center;padding:10px;color:var(--color-muted);">No active services</div>';
                    return;
                }

                const html = data.ports.map(p => {
                    const port = String(p.port).replace(/</g, '&lt;').replace(/>/g, '&gt;');
                    const process = String(p.process).replace(/</g, '&lt;').replace(/>/g, '&gt;');
                    const detail = p.detail ? String(p.detail).replace(/</g, '&lt;').replace(/>/g, '&gt;') : '';
                    const pid = p.pid ? parseInt(p.pid, 10) : 0;

                    // Build full description: "Language · tool · folder"
                    const fullDesc = detail ? `${process} · ${detail}` : process;
                    // Truncate for display if too long
                    const maxLen = 28;
                    const displayDesc = fullDesc.length > maxLen ? fullDesc.substring(0, maxLen - 1) + '…' : fullDesc;
                    const needsTooltip = fullDesc.length > maxLen;

                    return `<li>
                        <div class="port-info">
                            <a href="http://localhost:${port}" target="_blank" class="port-link" title="Open localhost:${port}">:${port}</a>
                            ${pid ? `<button class="kill-btn" data-pid="${pid}" title="Kill process ${pid}">kill</button>` : ''}
                        </div>
                        <span class="port-process"${needsTooltip ? ` title="${fullDesc}"` : ''}>${displayDesc}</span>
                    </li>`;
                }).join('');

                portsList.innerHTML = `<ul class="ports-list">${html}</ul>`;

                // Add kill button handlers
                portsList.querySelectorAll('.kill-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const pid = this.getAttribute('data-pid');
                        if (!pid || !confirm(`Kill process ${pid}?`)) return;

                        this.textContent = '...';
                        this.disabled = true;

                        const formData = new FormData();
                        formData.append('action', 'kill_process');
                        formData.append('pid', pid);
<?php if( !empty( $options['security']['enable_csrf'] ) ): ?>
                        formData.append('token', '<?= $_SESSION['csrf_token'] ?>');
<?php endif; ?>

                        fetch(window.location.href, { method: 'POST', body: formData })
                            .then(r => r.json())
                            .then(data => {
                                if (data.success) {
                                    // Wait for process to fully terminate before refresh
                                    setTimeout(loadPorts, 1000);
                                } else {
                                    alert(data.message || 'Failed to kill process');
                                    this.textContent = 'kill';
                                    this.disabled = false;
                                }
                            })
                            .catch(() => {
                                alert('Failed to kill process');
                                this.textContent = 'kill';
                                this.disabled = false;
                            });
                    });
                });
            })
            .catch(error => {
                console.error('Failed to load ports:', error);
                refreshPortsBtn.classList.remove('loading');
                portsList.innerHTML = '<div style="text-align:center;padding:10px;color:var(--color-muted);">Failed to scan</div>';
            });
    }

    if (refreshPortsBtn) {
        refreshPortsBtn.addEventListener('click', loadPorts);
        // Auto-scan ports in background after page load
        setTimeout(loadPorts, 100);
    }

    // Action button handlers
    const actionButtons = document.querySelectorAll('.action-btn');
    const actionModal = document.getElementById('action-output');
    const actionOutput = document.getElementById('action-output-content');
    const closeModalBtn = document.getElementById('action-output-close');

    actionButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            const action = this.getAttribute('data-action');
            if (!action) return;

            // Disable button and show loading state
            this.disabled = true;
            const originalText = this.innerHTML;
            this.innerHTML = '<span>⏳</span> Processing...';

            // Prepare form data
            const formData = new FormData();
            formData.append('action', action);
<?php if( !empty( $options['security']['enable_csrf'] ) ): ?>
            formData.append('token', '<?= $_SESSION['csrf_token'] ?>');
<?php endif; ?>

            // Send AJAX request
            fetch(window.location.href, {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.text();
            })
            .then(text => {
                try {
                    return JSON.parse(text);
                } catch (e) {
                    console.error('Failed to parse JSON. Error:', e);
                    console.error('Server response (first 500 chars):', text.substring(0, 500));
                    console.error('Response length:', text.length);
                    throw new Error('Server returned invalid JSON. Check console for details.');
                }
            })
            .then(data => {
                // Re-enable button
                this.disabled = false;
                this.innerHTML = originalText;

                // Show modal with result
                if (actionModal && actionOutput) {
                    let output = `<strong>${data.success ? '✅' : '❌'} ${escapeHtml(data.message)}</strong>`;

                    if (data.output) {
                        output += `\n\n${escapeHtml(data.output)}`;
                    }

                    actionOutput.innerHTML = output;
                    actionModal.style.display = 'block';
                }
            })
            .catch(error => {
                // Re-enable button
                this.disabled = false;
                this.innerHTML = originalText;

                // Show error in modal
                if (actionModal && actionOutput) {
                    actionOutput.innerHTML = `<strong>❌ Error: ${escapeHtml(error.message)}</strong>`;
                    actionModal.style.display = 'block';
                }
            });
        });
    });

    // Close modal handler
    if (closeModalBtn) {
        closeModalBtn.addEventListener('click', function() {
            if (actionModal) {
                actionModal.style.display = 'none';
            }
        });
    }

    // Helper function to escape HTML
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
</script>

<!-- Project Notes Modal -->
<div class="modal-overlay" id="notesModal">
    <div class="modal">
        <h3>Project Details: <span id="modal-project-name"></span></h3>

        <label for="modal-category">Category</label>
        <select id="modal-category">
            <option value="">None</option>
            <option value="Laravel">Laravel</option>
            <option value="WordPress">WordPress</option>
            <option value="React">React</option>
            <option value="Node">Node.js</option>
            <option value="Python">Python</option>
            <option value="PHP">PHP</option>
            <option value="Static">Static</option>
            <option value="Other">Other</option>
        </select>

        <label for="modal-description">Description</label>
        <textarea id="modal-description" placeholder="Add a description for this project..."></textarea>

        <label for="modal-url">Documentation/URL</label>
        <input type="url" id="modal-url" placeholder="https://docs.example.com">

        <label>Quick Tags</label>
        <div class="tag-list" id="modal-tags"></div>
        <input type="text" id="modal-tag-input" placeholder="Type tag and press Enter...">

        <div class="info-row">
            <span>Last Opened:</span>
            <strong id="modal-last-opened">Never</strong>
        </div>

        <div class="button-group">
            <button class="secondary" id="modal-cancel">Cancel</button>
            <button class="primary" id="modal-save">Save</button>
        </div>
    </div>
</div>

<!-- Category Quick Select Modal -->
<div class="modal-overlay" id="categoryModal">
    <div class="modal">
        <h3>Select Category: <span id="category-modal-project-name"></span></h3>

        <label for="category-select">Category</label>
        <select id="category-select">
            <option value="">None</option>
            <option value="Laravel">Laravel</option>
            <option value="WordPress">WordPress</option>
            <option value="React">React</option>
            <option value="Node">Node.js</option>
            <option value="Python">Python</option>
            <option value="PHP">PHP</option>
            <option value="Static">Static</option>
            <option value="Other">Other</option>
        </select>

        <div class="button-group">
            <button class="secondary" id="category-cancel">Cancel</button>
            <button class="primary" id="category-save">Save</button>
        </div>
    </div>
</div>

</body>
</html>