feat: Server Color Coding System (#103)

* feat: implement server color coding feature - Add color column to servers table with migration - Add SERVER_COLOR_CODING_ENABLED environment variable - Create API route for color coding toggle settings - Add color field to Server and CreateServerData types - Update database CRUD operations to handle color field - Update server API routes to handle color field - Create colorUtils.ts with contrast calculation function - Add color coding toggle to GeneralSettingsModal - Add color picker to ServerForm component (only shown when enabled) - Apply colors to InstalledScriptsTab (borders and server column) - Apply colors to ScriptInstallationCard component - Apply colors to ServerList component - Fix 'Local' display issue in installed scripts table * fix: resolve TypeScript errors in color coding implementation - Fix unsafe argument type errors in GeneralSettingsModal and ServerForm - Remove unused import in ServerList component * feat: add color-coded dropdown for server selection - Create ColorCodedDropdown component with server color indicators - Replace HTML select with custom dropdown in ExecutionModeModal - Add color dots next to server names in dropdown options - Maintain all existing functionality with improved visual design * fix: generate new execution ID for each script run - Change executionId from useState to allow updates - Generate new execution ID in startScript function for each run - Fixes issue where scripts couldn't be run multiple times without page reload - Resolves 'Script execution already running' error on subsequent runs * fix: improve whiptail handling and execution ID generation - Remove premature terminal clearing for whiptail sessions - Let whiptail handle its own display without interference - Generate new execution ID for both initial and manual script runs - Fix whiptail session state management - Should resolve blank screen and script restart issues * fix: revert problematic whiptail changes that broke terminal display - Remove complex whiptail session handling that caused blank screen - Simplify output handling to just write data directly to terminal - Keep execution ID generation fix for multiple script runs - Remove unused inWhiptailSession state variable - Terminal should now display output normally again * fix: remove remaining inWhiptailSession reference - Remove inWhiptailSession from useEffect dependency array - Fixes ReferenceError: inWhiptailSession is not defined - Terminal should now work without JavaScript errors * debug: add console logging to terminal message handling - Add debug logs to see what messages are being received - Help diagnose why terminal shows blank screen - Will remove debug logs once issue is identified * fix: prevent WebSocket reconnection loop - Remove executionId from useEffect dependency arrays - Fixes terminal constantly reconnecting and showing blank screen - WebSocket now maintains stable connection during script execution - Removes debug console logs * fix: prevent WebSocket reconnection on second script run - Remove handleMessage from useEffect dependency array - Fixes loop of START messages and connection blinking on subsequent runs - WebSocket connection now stable for multiple script executions - handleMessage recreation no longer triggers WebSocket reconnection * debug: add logging to identify WebSocket reconnection cause - Add console logs to useEffect and startScript - Track what dependencies are changing - Identify why WebSocket reconnects on second run * fix: remove isRunning from WebSocket useEffect dependencies - isRunning state change was causing WebSocket reconnection loop - Each script start changed isRunning from false to true - This triggered useEffect to reconnect WebSocket - Removing isRunning from dependencies breaks the loop - WebSocket connection now stable during script execution * feat: preselect SSH mode in execution modal and clean up debug logs - Preselect SSH execution mode by default since it's the only available option - Remove debug console logs from Terminal component - Clean up code for production readiness * fix: resolve build errors and warnings - Add missing SettingsModal import to ExecutionModeModal - Remove unused selectedMode and handleModeChange variables - Add ESLint disable comments for intentional useEffect dependency exclusions - Build now passes successfully with no errors or warnings
2025-10-10 14:30:28 +02:00
parent aa9e155b0c
commit 4faa74b4c5
15 changed files with 421 additions and 64 deletions
--- a/src/app/_components/ColorCodedDropdown.tsx
+++ b/src/app/_components/ColorCodedDropdown.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import type { Server } from '../../types/server';
+
+interface ColorCodedDropdownProps {
+  servers: Server[];
+  selectedServer: Server | null;
+  onServerSelect: (server: Server | null) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export function ColorCodedDropdown({ 
+  servers, 
+  selectedServer, 
+  onServerSelect, 
+  placeholder = "Select a server...",
+  disabled = false 
+}: ColorCodedDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const handleServerClick = (server: Server) => {
+    onServerSelect(server);
+    setIsOpen(false);
+  };
+
+  const handleClearSelection = () => {
+    onServerSelect(null);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Dropdown Button */}
+      <button
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={`w-full px-3 py-2 border border-input rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary bg-background text-foreground text-left flex items-center justify-between ${
+          disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-accent'
+        }`}
+      >
+        <span className="truncate">
+          {selectedServer ? (
+            <span className="flex items-center gap-2">
+              {selectedServer.color && (
+                <span 
+                  className="w-3 h-3 rounded-full flex-shrink-0"
+                  style={{ backgroundColor: selectedServer.color }}
+                />
+              )}
+              {selectedServer.name} ({selectedServer.ip}) - {selectedServer.user}
+            </span>
+          ) : (
+            placeholder
+          )}
+        </span>
+        <svg 
+          className={`w-4 h-4 flex-shrink-0 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none" 
+          stroke="currentColor" 
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div className="absolute z-50 w-full mt-1 bg-card border border-border rounded-md shadow-lg max-h-60 overflow-auto">
+          {/* Clear Selection Option */}
+          <button
+            type="button"
+            onClick={handleClearSelection}
+            className="w-full px-3 py-2 text-left text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+          >
+            {placeholder}
+          </button>
+          
+          {/* Server Options */}
+          {servers.map((server) => (
+            <button
+              key={server.id}
+              type="button"
+              onClick={() => handleServerClick(server)}
+              className={`w-full px-3 py-2 text-left text-sm transition-colors flex items-center gap-2 ${
+                selectedServer?.id === server.id 
+                  ? 'bg-accent text-accent-foreground' 
+                  : 'text-foreground hover:bg-accent hover:text-foreground'
+              }`}
+            >
+              {server.color && (
+                <span 
+                  className="w-3 h-3 rounded-full flex-shrink-0"
+                  style={{ backgroundColor: server.color }}
+                />
+              )}
+              <span className="truncate">
+                {server.name} ({server.ip}) - {server.user}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/app/_components/ExecutionModeModal.tsx
+++ b/src/app/_components/ExecutionModeModal.tsx
@@ -3,8 +3,10 @@
 import { useState, useEffect } from 'react';
 import type { Server } from '../../types/server';
 import { Button } from './ui/button';
+import { ColorCodedDropdown } from './ColorCodedDropdown';
 import { SettingsModal } from './SettingsModal';

+
 interface ExecutionModeModalProps {
  isOpen: boolean;
  onClose: () => void;
@@ -70,6 +72,12 @@ export function ExecutionModeModal({ isOpen, onClose, onExecute, scriptName }: E
    onClose();
  };

+
+  const handleServerSelect = (server: Server | null) => {
+    setSelectedServer(server);
+  };
+
+
  if (!isOpen) return null;

  return (
@@ -138,23 +146,12 @@ export function ExecutionModeModal({ isOpen, onClose, onExecute, scriptName }: E
                  </Button>
                </div>
              ) : (
-                <select
-                  id="server"
-                  value={selectedServer?.id ?? ''}
-                  onChange={(e) => {
-                    const serverId = parseInt(e.target.value);
-                    const server = servers.find(s => s.id === serverId);
-                    setSelectedServer(server ?? null);
-                  }}
-                  className="w-full px-3 py-2 border border-input rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary bg-background text-foreground"
-                >
-                  <option value="">Select a server...</option>
-                  {servers.map((server) => (
-                    <option key={server.id} value={server.id}>
-                      {server.name} ({server.ip}) - {server.user}
-                    </option>
-                  ))}
-                </select>
+                <ColorCodedDropdown
+                  servers={servers}
+                  selectedServer={selectedServer}
+                  onServerSelect={handleServerSelect}
+                  placeholder="Select a server..."
+                />
              )}
            </div>

--- a/src/app/_components/GeneralSettingsModal.tsx
+++ b/src/app/_components/GeneralSettingsModal.tsx
@@ -15,6 +15,7 @@ export function GeneralSettingsModal({ isOpen, onClose }: GeneralSettingsModalPr
  const [githubToken, setGithubToken] = useState('');
  const [saveFilter, setSaveFilter] = useState(false);
  const [savedFilters, setSavedFilters] = useState<any>(null);
+  const [colorCodingEnabled, setColorCodingEnabled] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
@@ -35,6 +36,7 @@ export function GeneralSettingsModal({ isOpen, onClose }: GeneralSettingsModalPr
      void loadSaveFilter();
      void loadSavedFilters();
      void loadAuthCredentials();
+      void loadColorCodingSetting();
    }
  }, [isOpen]);

@@ -148,6 +150,43 @@ export function GeneralSettingsModal({ isOpen, onClose }: GeneralSettingsModalPr
    }
  };

+  const loadColorCodingSetting = async () => {
+    try {
+      const response = await fetch('/api/settings/color-coding');
+      if (response.ok) {
+        const data = await response.json();
+        setColorCodingEnabled(Boolean(data.enabled));
+      }
+    } catch (error) {
+      console.error('Error loading color coding setting:', error);
+    }
+  };
+
+  const saveColorCodingSetting = async (enabled: boolean) => {
+    try {
+      const response = await fetch('/api/settings/color-coding', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ enabled }),
+      });
+
+      if (response.ok) {
+        setColorCodingEnabled(enabled);
+        setMessage({ type: 'success', text: 'Color coding setting saved successfully' });
+        setTimeout(() => setMessage(null), 3000);
+      } else {
+        setMessage({ type: 'error', text: 'Failed to save color coding setting' });
+        setTimeout(() => setMessage(null), 3000);
+      }
+    } catch (error) {
+      console.error('Error saving color coding setting:', error);
+      setMessage({ type: 'error', text: 'Failed to save color coding setting' });
+      setTimeout(() => setMessage(null), 3000);
+    }
+  };
+
  const loadAuthCredentials = async () => {
    setAuthLoading(true);
    try {
@@ -345,6 +384,16 @@ export function GeneralSettingsModal({ isOpen, onClose }: GeneralSettingsModalPr
                      </div>
                    )}
                  </div>
+
+                  <div className="p-4 border border-border rounded-lg">
+                    <h4 className="font-medium text-foreground mb-2">Server Color Coding</h4>
+                    <p className="text-sm text-muted-foreground mb-4">Enable color coding for servers to visually distinguish them throughout the application.</p>
+                    <Toggle
+                      checked={colorCodingEnabled}
+                      onCheckedChange={saveColorCodingSetting}
+                      label="Enable server color coding"
+                    />
+                  </div>
              </div>
            </div>
          )}
--- a/src/app/_components/InstalledScriptsTab.tsx
+++ b/src/app/_components/InstalledScriptsTab.tsx
@@ -6,6 +6,7 @@ import { Terminal } from './Terminal';
 import { StatusBadge } from './Badge';
 import { Button } from './ui/button';
 import { ScriptInstallationCard } from './ScriptInstallationCard';
+import { getContrastColor } from '../../lib/colorUtils';

 interface InstalledScript {
  id: number;
@@ -17,6 +18,7 @@ interface InstalledScript {
  server_ip: string | null;
  server_user: string | null;
  server_password: string | null;
+  server_color: string | null;
  installation_date: string;
  status: 'in_progress' | 'success' | 'failed';
  output_log: string | null;
@@ -773,7 +775,11 @@ export function InstalledScriptsTab() {
                </thead>
                <tbody className="bg-card divide-y divide-gray-200">
                  {filteredScripts.map((script) => (
-                    <tr key={script.id} className="hover:bg-accent">
+                    <tr 
+                      key={script.id} 
+                      className="hover:bg-accent"
+                      style={{ borderLeft: `4px solid ${script.server_color ?? 'transparent'}` }}
+                    >
                      <td className="px-6 py-4 whitespace-nowrap">
                        {editingScriptId === script.id ? (
                          <div className="space-y-2">
@@ -811,8 +817,14 @@ export function InstalledScriptsTab() {
                        )}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
-                        <span className="text-sm text-muted-foreground">
-                          {script.server_name ?? 'Local'}
+                        <span 
+                          className="text-sm px-3 py-1 rounded"
+                          style={{
+                            backgroundColor: script.server_color ?? 'transparent',
+                            color: script.server_color ? getContrastColor(script.server_color) : 'inherit'
+                          }}
+                        >
+                          {script.server_name ?? '-'}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
--- a/src/app/_components/ScriptInstallationCard.tsx
+++ b/src/app/_components/ScriptInstallationCard.tsx
@@ -2,6 +2,7 @@

 import { Button } from './ui/button';
 import { StatusBadge } from './Badge';
+import { getContrastColor } from '../../lib/colorUtils';

 interface InstalledScript {
  id: number;
@@ -13,6 +14,7 @@ interface InstalledScript {
  server_ip: string | null;
  server_user: string | null;
  server_password: string | null;
+  server_color: string | null;
  installation_date: string;
  status: 'in_progress' | 'success' | 'failed';
  output_log: string | null;
@@ -50,7 +52,10 @@ export function ScriptInstallationCard({
  };

  return (
-    <div className="bg-card border border-border rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
+    <div 
+      className="bg-card border border-border rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow"
+      style={{ borderLeft: `4px solid ${script.server_color ?? 'transparent'}` }}
+    >
      {/* Header with Script Name and Status */}
      <div className="flex items-start justify-between mb-3">
        <div className="flex-1 min-w-0">
@@ -102,9 +107,15 @@ export function ScriptInstallationCard({
        {/* Server */}
        <div>
          <div className="text-xs font-medium text-muted-foreground mb-1">Server</div>
-          <div className="text-sm text-muted-foreground">
-            {script.server_name ?? 'Local'}
-          </div>
+          <span 
+            className="text-sm px-3 py-1 rounded inline-block"
+            style={{
+              backgroundColor: script.server_color ?? 'transparent',
+              color: script.server_color ? getContrastColor(script.server_color) : 'inherit'
+            }}
+          >
+            {script.server_name ?? '-'}
+          </span>
        </div>

        {/* Installation Date */}
--- a/src/app/_components/ServerForm.tsx
+++ b/src/app/_components/ServerForm.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import type { CreateServerData } from '../../types/server';
 import { Button } from './ui/button';
 import { SSHKeyInput } from './SSHKeyInput';
@@ -23,11 +23,28 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
      ssh_key: '',
      ssh_key_passphrase: '',
      ssh_port: 22,
+      color: '#3b82f6',
    }
  );

  const [errors, setErrors] = useState<Partial<Record<keyof CreateServerData, string>>>({});
  const [sshKeyError, setSshKeyError] = useState<string>('');
+  const [colorCodingEnabled, setColorCodingEnabled] = useState(false);
+
+  useEffect(() => {
+    const loadColorCodingSetting = async () => {
+      try {
+        const response = await fetch('/api/settings/color-coding');
+        if (response.ok) {
+          const data = await response.json();
+          setColorCodingEnabled(Boolean(data.enabled));
+        }
+      } catch (error) {
+        console.error('Error loading color coding setting:', error);
+      }
+    };
+    void loadColorCodingSetting();
+  }, []);

  const validateForm = (): boolean => {
    const newErrors: Partial<Record<keyof CreateServerData, string>> = {};
@@ -95,7 +112,8 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
          auth_type: 'password',
          ssh_key: '',
          ssh_key_passphrase: '',
-          ssh_port: 22
+          ssh_port: 22,
+          color: '#3b82f6'
        });
      }
    }
@@ -206,6 +224,26 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
            <option value="both">Both Password & SSH Key</option>
          </select>
        </div>
+
+        {colorCodingEnabled && (
+          <div>
+            <label htmlFor="color" className="block text-sm font-medium text-muted-foreground mb-1">
+              Server Color
+            </label>
+            <div className="flex items-center gap-3">
+              <input
+                type="color"
+                id="color"
+                value={formData.color ?? '#3b82f6'}
+                onChange={handleChange('color')}
+                className="w-20 h-10 rounded cursor-pointer border border-border"
+              />
+              <span className="text-sm text-muted-foreground">
+                Choose a color to identify this server
+              </span>
+            </div>
+          </div>
+        )}
      </div>

      {/* Password Authentication */}
--- a/src/app/_components/ServerList.tsx
+++ b/src/app/_components/ServerList.tsx
@@ -85,7 +85,11 @@ export function ServerList({ servers, onUpdate, onDelete }: ServerListProps) {
  return (
    <div className="space-y-4">
      {servers.map((server) => (
-        <div key={server.id} className="bg-card border border-border rounded-lg p-4 shadow-sm">
+        <div 
+          key={server.id} 
+          className="bg-card border border-border rounded-lg p-4 shadow-sm"
+          style={{ borderLeft: `4px solid ${server.color ?? 'transparent'}` }}
+        >
          {editingId === server.id ? (
            <div>
              <h4 className="text-lg font-medium text-foreground mb-4">Edit Server</h4>
@@ -95,6 +99,11 @@ export function ServerList({ servers, onUpdate, onDelete }: ServerListProps) {
                  ip: server.ip,
                  user: server.user,
                  password: server.password,
+                  auth_type: server.auth_type,
+                  ssh_key: server.ssh_key,
+                  ssh_key_passphrase: server.ssh_key_passphrase,
+                  ssh_port: server.ssh_port,
+                  color: server.color,
                }}
                onSubmit={handleUpdate}
                isEditing={true}
--- a/src/app/_components/Terminal.tsx
+++ b/src/app/_components/Terminal.tsx
@@ -27,14 +27,13 @@ export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate
  const [mobileInput, setMobileInput] = useState('');
  const [showMobileInput, setShowMobileInput] = useState(false);
  const [lastInputSent, setLastInputSent] = useState<string | null>(null);
-  const [inWhiptailSession, setInWhiptailSession] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  const [isStopped, setIsStopped] = useState(false);
  const terminalRef = useRef<HTMLDivElement>(null);
  const xtermRef = useRef<any>(null);
  const fitAddonRef = useRef<any>(null);
  const wsRef = useRef<WebSocket | null>(null);
-  const [executionId] = useState(() => `exec_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`);
+  const [executionId, setExecutionId] = useState(() => `exec_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`);
  const isConnectingRef = useRef<boolean>(false);
  const hasConnectedRef = useRef<boolean>(false);

@@ -53,22 +52,7 @@ export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate
        break;
      case 'output':
        // Write directly to terminal - xterm.js handles ANSI codes natively
-        // Detect whiptail sessions and clear immediately
-        if (message.data.includes('whiptail') || message.data.includes('dialog') || message.data.includes('Choose an option')) {
-          setInWhiptailSession(true);
-          // Clear terminal immediately when whiptail starts
-          xtermRef.current.clear();
-          xtermRef.current.write('\x1b[2J\x1b[H');
-        }
-        
-        // Check for screen clearing sequences and handle them properly
-        if (message.data.includes('\x1b[2J') || message.data.includes('\x1b[H\x1b[2J')) {
-          // This is a clear screen sequence, ensure it's processed correctly
-          xtermRef.current.write(message.data);
-        } else {
-          // Let xterm handle all ANSI sequences naturally
-          xtermRef.current.write(message.data);
-        }
+        xtermRef.current.write(message.data);
        break;
      case 'error':
        // Check if this looks like ANSI terminal output (contains escape codes)
@@ -87,8 +71,7 @@ export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate
        }
        break;
      case 'end':
-        // Reset whiptail session
-        setInWhiptailSession(false);
+        setIsRunning(false);
        
        // Check if this is an LXC creation script
        const isLxcCreation = scriptPath.includes('ct/') || 
@@ -107,7 +90,6 @@ export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate
        } else {
          xtermRef.current.writeln(`${prefix}✅ ${message.data}`);
        }
-        setIsRunning(false);
        break;
    }
  }, [scriptPath, containerId, scriptName]);
@@ -265,7 +247,7 @@ export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate
        fitAddonRef.current = null;
      }
    };
-  }, [executionId, isClient, inWhiptailSession, isMobile]);
+  }, [isClient, isMobile]); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    // Prevent multiple connections in React Strict Mode
@@ -298,10 +280,14 @@ export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate
        
        // Only auto-start on initial connection, not on reconnections
        if (isInitialConnection && !isRunning) {
+          // Generate a new execution ID for the initial run
+          const newExecutionId = `exec_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+          setExecutionId(newExecutionId);
+          
          const message = {
            action: 'start',
            scriptPath,
-            executionId,
+            executionId: newExecutionId,
            mode,
            server,
            isUpdate,
@@ -345,15 +331,19 @@ export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate
        wsRef.current.close();
      }
    };
-  }, [scriptPath, executionId, mode, server, isUpdate, containerId, handleMessage, isMobile, isRunning]);
+  }, [scriptPath, mode, server, isUpdate, containerId, isMobile]); // eslint-disable-line react-hooks/exhaustive-deps

  const startScript = () => {
    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN && !isRunning) {
+      // Generate a new execution ID for each script run
+      const newExecutionId = `exec_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+      setExecutionId(newExecutionId);
+      
      setIsStopped(false);
      wsRef.current.send(JSON.stringify({
        action: 'start',
        scriptPath,
-        executionId,
+        executionId: newExecutionId,
        mode,
        server,
        isUpdate,
--- a/src/app/api/servers/[id]/route.ts
+++ b/src/app/api/servers/[id]/route.ts
@@ -52,7 +52,7 @@ export async function PUT(
    }

    const body = await request.json();
-    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port }: CreateServerData = body;
+    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color }: CreateServerData = body;

    // Validate required fields
    if (!name || !ip || !user) {
@@ -120,7 +120,8 @@ export async function PUT(
      auth_type: authType,
      ssh_key,
      ssh_key_passphrase,
-      ssh_port: ssh_port ?? 22
+      ssh_port: ssh_port ?? 22,
+      color
    });
    
    return NextResponse.json(
--- a/src/app/api/servers/route.ts
+++ b/src/app/api/servers/route.ts
@@ -20,7 +20,7 @@ export async function GET() {
 export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
-    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port }: CreateServerData = body;
+    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color }: CreateServerData = body;

    // Validate required fields
    if (!name || !ip || !user) {
@@ -78,7 +78,8 @@ export async function POST(request: NextRequest) {
      auth_type: authType,
      ssh_key,
      ssh_key_passphrase,
-      ssh_port: ssh_port ?? 22
+      ssh_port: ssh_port ?? 22,
+      color
    });
    
    return NextResponse.json(
--- a/src/app/api/settings/color-coding/route.ts
+++ b/src/app/api/settings/color-coding/route.ts
@@ -0,0 +1,75 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { enabled } = await request.json();
+
+    if (typeof enabled !== 'boolean') {
+      return NextResponse.json(
+        { error: 'Enabled must be a boolean value' },
+        { status: 400 }
+      );
+    }
+
+    // Path to the .env file
+    const envPath = path.join(process.cwd(), '.env');
+    
+    // Read existing .env file
+    let envContent = '';
+    if (fs.existsSync(envPath)) {
+      envContent = fs.readFileSync(envPath, 'utf8');
+    }
+
+    // Check if SERVER_COLOR_CODING_ENABLED already exists
+    const colorCodingRegex = /^SERVER_COLOR_CODING_ENABLED=.*$/m;
+    const colorCodingMatch = colorCodingRegex.exec(envContent);
+    
+    if (colorCodingMatch) {
+      // Replace existing SERVER_COLOR_CODING_ENABLED
+      envContent = envContent.replace(colorCodingRegex, `SERVER_COLOR_CODING_ENABLED=${enabled}`);
+    } else {
+      // Add new SERVER_COLOR_CODING_ENABLED
+      envContent += (envContent.endsWith('\n') ? '' : '\n') + `SERVER_COLOR_CODING_ENABLED=${enabled}\n`;
+    }
+
+    // Write back to .env file
+    fs.writeFileSync(envPath, envContent);
+
+    return NextResponse.json({ success: true, message: 'Color coding setting saved successfully' });
+  } catch (error) {
+    console.error('Error saving color coding setting:', error);
+    return NextResponse.json(
+      { error: 'Failed to save color coding setting' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function GET() {
+  try {
+    // Path to the .env file
+    const envPath = path.join(process.cwd(), '.env');
+    
+    if (!fs.existsSync(envPath)) {
+      return NextResponse.json({ enabled: false });
+    }
+
+    const envContent = fs.readFileSync(envPath, 'utf8');
+    
+    // Extract SERVER_COLOR_CODING_ENABLED
+    const colorCodingRegex = /^SERVER_COLOR_CODING_ENABLED=(.*)$/m;
+    const colorCodingMatch = colorCodingRegex.exec(envContent);
+    const enabled = colorCodingMatch ? colorCodingMatch[1]?.trim().toLowerCase() === 'true' : false;
+    
+    return NextResponse.json({ enabled });
+  } catch (error) {
+    console.error('Error reading color coding setting:', error);
+    return NextResponse.json(
+      { error: 'Failed to read color coding setting' },
+      { status: 500 }
+    );
+  }
+}
--- a/src/env.js
+++ b/src/env.js
@@ -31,6 +31,8 @@ export const env = createEnv({
    AUTH_ENABLED: z.string().optional(),
    AUTH_SETUP_COMPLETED: z.string().optional(),
    JWT_SECRET: z.string().optional(),
+    // Server Color Coding Configuration
+    SERVER_COLOR_CODING_ENABLED: z.string().optional(),
  },

  /**
@@ -68,6 +70,8 @@ export const env = createEnv({
    AUTH_ENABLED: process.env.AUTH_ENABLED,
    AUTH_SETUP_COMPLETED: process.env.AUTH_SETUP_COMPLETED,
    JWT_SECRET: process.env.JWT_SECRET,
+    // Server Color Coding Configuration
+    SERVER_COLOR_CODING_ENABLED: process.env.SERVER_COLOR_CODING_ENABLED,
    // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
  },
  /**
--- a/src/lib/colorUtils.ts
+++ b/src/lib/colorUtils.ts
@@ -0,0 +1,35 @@
+/**
+ * Calculate the appropriate text color (black or white) for a given background color
+ * to ensure optimal readability based on luminance
+ */
+export function getContrastColor(hexColor: string): 'black' | 'white' {
+  if (!hexColor || hexColor.length !== 7 || !hexColor.startsWith('#')) {
+    return 'black'; // Default to black for invalid colors
+  }
+
+  // Remove the # and convert to RGB
+  const r = parseInt(hexColor.slice(1, 3), 16);
+  const g = parseInt(hexColor.slice(3, 5), 16);
+  const b = parseInt(hexColor.slice(5, 7), 16);
+
+  // Calculate relative luminance using the standard formula
+  // https://www.w3.org/WAI/GL/wiki/Relative_luminance
+  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+
+  // Return black for light backgrounds, white for dark backgrounds
+  return luminance > 0.5 ? 'black' : 'white';
+}
+
+/**
+ * Check if a color string is a valid hex color
+ */
+export function isValidHexColor(color: string): boolean {
+  return /^#[0-9A-F]{6}$/i.test(color);
+}
+
+/**
+ * Get a default color for servers that don't have one set
+ */
+export function getDefaultServerColor(): string {
+  return '#3b82f6'; // Blue-500 from Tailwind
+}
--- a/src/server/database.js
+++ b/src/server/database.js
@@ -21,6 +21,7 @@ class DatabaseService {
        ssh_key TEXT,
        ssh_key_passphrase TEXT,
        ssh_port INTEGER DEFAULT 22,
+        color TEXT,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
        updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
      )
@@ -59,6 +60,14 @@ class DatabaseService {
      // Column already exists, ignore error
    }

+    try {
+      this.db.exec(`
+        ALTER TABLE servers ADD COLUMN color TEXT
+      `);
+    } catch (e) {
+      // Column already exists, ignore error
+    }
+
    // Update existing servers to have auth_type='password' if not set
    this.db.exec(`
      UPDATE servers SET auth_type = 'password' WHERE auth_type IS NULL
@@ -100,12 +109,12 @@ class DatabaseService {
   * @param {import('../types/server').CreateServerData} serverData
   */
  createServer(serverData) {
-    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port } = serverData;
+    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color } = serverData;
    const stmt = this.db.prepare(`
-      INSERT INTO servers (name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port) 
-      VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+      INSERT INTO servers (name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color) 
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
    `);
-    return stmt.run(name, ip, user, password, auth_type || 'password', ssh_key, ssh_key_passphrase, ssh_port || 22);
+    return stmt.run(name, ip, user, password, auth_type || 'password', ssh_key, ssh_key_passphrase, ssh_port || 22, color);
  }

  getAllServers() {
@@ -126,13 +135,13 @@ class DatabaseService {
   * @param {import('../types/server').CreateServerData} serverData
   */
  updateServer(id, serverData) {
-    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port } = serverData;
+    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color } = serverData;
    const stmt = this.db.prepare(`
      UPDATE servers 
-      SET name = ?, ip = ?, user = ?, password = ?, auth_type = ?, ssh_key = ?, ssh_key_passphrase = ?, ssh_port = ?
+      SET name = ?, ip = ?, user = ?, password = ?, auth_type = ?, ssh_key = ?, ssh_key_passphrase = ?, ssh_port = ?, color = ?
      WHERE id = ?
    `);
-    return stmt.run(name, ip, user, password, auth_type || 'password', ssh_key, ssh_key_passphrase, ssh_port || 22, id);
+    return stmt.run(name, ip, user, password, auth_type || 'password', ssh_key, ssh_key_passphrase, ssh_port || 22, color, id);
  }

  /**
@@ -170,7 +179,8 @@ class DatabaseService {
        s.name as server_name,
        s.ip as server_ip,
        s.user as server_user,
-        s.password as server_password
+        s.password as server_password,
+        s.color as server_color
      FROM installed_scripts inst
      LEFT JOIN servers s ON inst.server_id = s.id
      ORDER BY inst.installation_date DESC
--- a/src/types/server.ts
+++ b/src/types/server.ts
@@ -8,6 +8,7 @@ export interface Server {
  ssh_key?: string;
  ssh_key_passphrase?: string;
  ssh_port?: number;
+  color?: string;
  created_at: string;
  updated_at: string;
 }
@@ -21,6 +22,7 @@ export interface CreateServerData {
  ssh_key?: string;
  ssh_key_passphrase?: string;
  ssh_port?: number;
+  color?: string;
 }

 export interface UpdateServerData extends CreateServerData {