fix(external-services): fix cache comment accuracy, add keyboard reorder instructions, and name magic number constant

Copilot · PDowney · web-flow · commit 2d3ffdb68a37 · 2026-04-11T01:40:29.000Z
Agent-Logs-Url: https://github.com/EngineScript/EngineScript/sessions/993246a3-b5f5-4372-b259-830ad04ed941 Co-authored-by: PDowney <11467177+PDowney@users.noreply.github.com>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,14 @@ Changes are organized by date, with the most recent changes listed first.
 
 ## 2026-04-11
 
+### 🔧 EXTERNAL-SERVICES.JS CODE QUALITY IMPROVEMENTS
+
+- Updated cache comment from "LRU cache" to "TTL cache and FIFO eviction" to accurately describe the eviction strategy used in `external-services.js`.
+- Added keyboard navigation instructions to the settings header text, informing users they can press Enter to activate reorder mode and use arrow keys to move service cards.
+- Extracted the magic number `7` (CSSRule.KEYFRAMES_RULE fallback) into a named constant `LEGACY_KEYFRAMES_RULE_TYPE` with an explanatory comment for clarity and maintainability.
+
+## 2026-04-11
+
 ### 🔧 VHOST IMPORT BUG FIXES & IMPROVEMENTS
 
 - Updated the single-zip database file detection in `scripts/functions/vhost/vhost-import.sh` to search for both `*.sql` and `*.sql.gz` patterns, so compressed database dumps are correctly found and imported instead of failing silently.
diff --git a/config/var/www/admin/control-panel/external-services/external-services.js b/config/var/www/admin/control-panel/external-services/external-services.js
@@ -33,7 +33,7 @@ export class ExternalServicesManager {
     this.container = document.querySelector(containerSelector);
     this.settingsContainer = document.querySelector(settingsContainerSelector);
     
-    // State management with LRU cache (5-minute TTL, max 100 entries)
+    // State management with TTL cache and FIFO eviction (5-minute TTL, max 100 entries)
     this.serviceCache = new Map();
     this.cacheTTL = 5 * 60 * 1000; // 5 minutes in milliseconds
     this.cacheMaxSize = 100; // Limit cache size to prevent memory growth
@@ -489,7 +489,7 @@ export class ExternalServicesManager {
     const settingsHeader = document.createElement("div");
     settingsHeader.className = "settings-header";
     const headerP = document.createElement("p");
-    headerP.textContent = 'Toggle services to show/hide on the dashboard. Drag service cards to reorder them. Click "Save Changes" to apply. Services are organized by category.';
+    headerP.textContent = 'Toggle services to show/hide on the dashboard. Drag service cards to reorder them, or use the keyboard: press Enter to activate reorder mode and use arrow keys to move cards. Click "Save Changes" to apply. Services are organized by category.';
     settingsHeader.appendChild(headerP);
     settingsContent.appendChild(settingsHeader);
     
@@ -1727,7 +1727,9 @@ export class ExternalServicesManager {
    */
   hasAnimationKeyframes(animationName) {
     const styleSheets = Array.from(document.styleSheets || []);
-    const keyframesType = typeof CSSRule !== 'undefined' ? CSSRule.KEYFRAMES_RULE : 7;
+    // Standard CSSOM numeric value for KEYFRAMES_RULE, used when CSSRule.KEYFRAMES_RULE is unavailable (legacy browsers).
+    const LEGACY_KEYFRAMES_RULE_TYPE = 7;
+    const keyframesType = typeof CSSRule !== 'undefined' ? CSSRule.KEYFRAMES_RULE : LEGACY_KEYFRAMES_RULE_TYPE;
 
     for (const styleSheet of styleSheets) {
       const rules = this.getSheetRules(styleSheet);
