Improve agent/config validation and UI robustness

Validate and tighten runtime and agent handling, fix event listener stability, and improve UX/error handling.

Key changes:
- server/config: validate DASHBOARD_DENSITY against allowed values (compact/comfortable) and default to comfortable.
- runtime-config: remove configuredAgentUrl from runtime shape to avoid exposing internal URL.
- types/agent & agent-config-manager: make agent.token optional (undefined by default) and remove required-token validation to support env-managed agents.
- AgentFormModal: ensure token field is initialized to an empty string when missing.
- DashboardSidebar: render disabled sidebar items as <button> with aria-disabled and preventDefault for better accessibility.
- map component: use refs and stable callback handlers for locationfound/locationerror to ensure proper add/remove of listeners and avoid stale closures.
- place-autocomplete: keep onResultsChange in a ref and call it when results clear or on errors; remove it from effect deps to avoid unnecessary fetches.
- useLogFetcher: memoize returned state and reset function, useCallback for resetAndLoadRecent, and rely on clearLogsFromIDB to handle its own errors.
- AgentContext: surface a toast on agent refresh failure and handle AbortError specially when checking agent status.
- LogContext: remove redundant useMemo and return logFetcher state directly.

These changes improve stability, avoid exposing internal configuration, and make UI interactions and async flows more resilient.

Author: hhftechnology

dashboard/server/config.ts

@@ -39,7 +39,9 @@ function buildRuntimeConfig(): Record<string, unknown> {
   const trafficTopItemsRaw = pick('DASHBOARD_TRAFFIC_TOP_ITEMS_LIMIT');
   const parserTrendWindowRaw = pick('DASHBOARD_PARSER_TREND_WINDOW_MINUTES');
   const agentsEnvOnlyRaw = pick('DASHBOARD_AGENTS_ENV_ONLY');
-  const density = pick('DASHBOARD_DENSITY', 'UI_DENSITY') || 'comfortable';
+  const VALID_DENSITIES = new Set(['compact', 'comfortable']);
+  const rawDensity = pick('DASHBOARD_DENSITY', 'UI_DENSITY');
+  const density = VALID_DENSITIES.has(rawDensity) ? rawDensity : 'comfortable';
   const agentUrl = pick('AGENT_API_URL', 'AGENT_URL');
   const agentToken = pick('AGENT_API_TOKEN', 'AGENT_TOKEN');
   const frontendAgentUrl = pick('DASHBOARD_DEFAULT_AGENT_URL');
@@ -80,7 +82,6 @@ function buildRuntimeConfig(): Record<string, unknown> {
     themeTokens: {},
     defaultAgentUrl: frontendAgentUrl,
     defaultAgentConfigured: !!agentToken,
-    configuredAgentUrl: agentUrl,
   };
 }
 

dashboard/src/components/AgentFormModal.tsx

@@ -31,7 +31,7 @@ export default function AgentFormModal({ isOpen, onClose, agent }: AgentFormModa
       setFormData({
         name: agent.name,
         url: agent.configuredUrl || agent.url,
-        token: agent.token,
+        token: agent.token ?? '',
         location: agent.location,
         description: agent.description || '',
         tags: agent.tags?.join(', ') || '',

dashboard/src/components/layout/DashboardSidebar.tsx

@@ -195,12 +195,15 @@ export function DashboardSidebar() {
                       <item.icon className="size-4" />
                     </a>
                   ) : (
-                    <span
+                    <button
+                      type="button"
+                      aria-disabled="true"
                       aria-label={`${item.label} coming soon`}
                       className="inline-flex cursor-not-allowed items-center justify-center rounded-md p-1.5 text-sidebar-foreground/30"
+                      onClick={(e) => e.preventDefault()}
                     >
                       <item.icon className="size-4" />
-                    </span>
+                    </button>
                   )}
                 </TooltipTrigger>
                 <TooltipContent side="top">{tooltipLabel}</TooltipContent>

dashboard/src/components/ui/map.tsx

@@ -754,28 +754,37 @@ function MapLocateControl({
     const [isLocating, setIsLocating] = useDebounceLoadingState(200)
     const [position, setPosition] = useState<LatLngExpression | null>(null)
 
+    const onLocationFoundRef = useRef(onLocationFound)
+    onLocationFoundRef.current = onLocationFound
+    const onLocationErrorRef = useRef(onLocationError)
+    onLocationErrorRef.current = onLocationError
+
+    const onLocationFoundHandler = useCallback((location: LocationEvent) => {
+        setPosition(location.latlng)
+        setIsLocating(false)
+        onLocationFoundRef.current?.(location)
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps -- reads from ref
+
+    const onLocationErrorHandler = useCallback((error: ErrorEvent) => {
+        setPosition(null)
+        setIsLocating(false)
+        onLocationErrorRef.current?.(error)
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps -- reads from ref
+
     function startLocating() {
         setIsLocating(true)
         map.locate({ setView: true, maxZoom: map.getMaxZoom(), watch })
-        map.on("locationfound", (location: LocationEvent) => {
-            setPosition(location.latlng)
-            setIsLocating(false)
-            onLocationFound?.(location)
-        })
-        map.on("locationerror", (error: ErrorEvent) => {
-            setPosition(null)
-            setIsLocating(false)
-            onLocationError?.(error)
-        })
+        map.on("locationfound", onLocationFoundHandler)
+        map.on("locationerror", onLocationErrorHandler)
     }
 
     const stopLocating = useCallback(() => {
         map.stopLocate()
-        map.off("locationfound")
-        map.off("locationerror")
+        map.off("locationfound", onLocationFoundHandler)
+        map.off("locationerror", onLocationErrorHandler)
         setPosition(null)
         setIsLocating(false)
-    }, [map]) // eslint-disable-line react-hooks/exhaustive-deps -- setIsLocating is stable setState
+    }, [map, onLocationFoundHandler, onLocationErrorHandler])
 
     // eslint-disable-next-line no-restricted-syntax -- cleanup on unmount
     useEffect(() => () => stopLocating(), [stopLocating])

dashboard/src/components/ui/place-autocomplete.tsx

@@ -188,10 +188,15 @@ function usePlaceSearch({
 
     const debouncedQuery = useDebounce(query, debounceMs)
 
+    const onResultsChangeRef = React.useRef(onResultsChange)
+    // eslint-disable-next-line no-restricted-syntax -- keep ref current without re-triggering fetch effect
+    React.useEffect(() => { onResultsChangeRef.current = onResultsChange }, [onResultsChange])
+
     // eslint-disable-next-line no-restricted-syntax -- search on debounced query change
     React.useEffect(() => {
         if (!debouncedQuery.trim()) {
             setResults([])
+            onResultsChangeRef.current?.([])
             setIsLoading(false)
             setHasSearched(false)
             return
@@ -225,11 +230,12 @@ function usePlaceSearch({
                     return true
                 })
                 setResults(dedupedFeatures)
-                onResultsChange?.(dedupedFeatures)
+                onResultsChangeRef.current?.(dedupedFeatures)
             } catch (err) {
                 if (err instanceof Error && err.name !== "AbortError") {
                     setError(err)
                     setResults([])
+                    onResultsChangeRef.current?.([])
                 }
             } finally {
                 setIsLoading(false)
@@ -248,7 +254,6 @@ function usePlaceSearch({
         lon,
         zoom,
         locationBiasScale,
-        onResultsChange,
     ])
 
     return { results, isLoading, error, hasSearched }

dashboard/src/hooks/useLogFetcher.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useSyncExternalStore } from 'react'; // eslint-disable-line no-restricted-syntax
+import { useState, useEffect, useRef, useSyncExternalStore, useCallback, useMemo } from 'react'; // eslint-disable-line no-restricted-syntax
 import { TraefikLog } from '@/utils/types';
 import { enrichLogsWithGeoLocation } from '@/utils/location';
 import { apiClient } from '@/utils/api-client';
@@ -363,18 +363,17 @@ export function useLogFetcher() {
     logStore.trimLogs(maxLogsDisplay);
   }, [maxLogsDisplay]);
 
-  const resetAndLoadRecent = () => {
+  const resetAndLoadRecent = useCallback(() => {
     if (selectedAgent?.id) {
-      clearLogsFromIDB(selectedAgent.id).catch((err) => {
-        console.warn('[useLogFetcher] Failed to clear IndexedDB logs:', err);
-      });
+      // clearLogsFromIDB handles its own errors internally
+      clearLogsFromIDB(selectedAgent.id);
       logStore.clearPosition(selectedAgent.id);
       logStore.clearLogs();
       logStore.requestReset();
     }
-  };
+  }, [selectedAgent?.id]);
 
-  return {
+  return useMemo(() => ({
     logs: storeState.logs,
     loading: storeState.loading,
     error: storeState.error,
@@ -388,5 +387,5 @@ export function useLogFetcher() {
     isCatchingUp: storeState.isCatchingUp,
     isCached: storeState.isCached,
     resetAndLoadRecent,
-  };
+  }), [storeState.logs, storeState.loading, storeState.error, storeState.connected, storeState.lastUpdate, isPaused, setIsPaused, storeState.agentId, storeState.agentName, dedupeDebug, storeState.isCatchingUp, storeState.isCached, resetAndLoadRecent]);
 }

dashboard/src/utils/agent-config-manager.ts

@@ -46,7 +46,7 @@ export class AgentConfigManager {
       id: 'agent-001',
       name: 'Default Agent',
       url: runtime.defaultAgentUrl || sameOrigin,
-      token: '',
+      token: undefined,
       location: 'on-site',
       number: 1,
       status: 'checking',
@@ -199,10 +199,6 @@ export class AgentConfigManager {
       }
     }
 
-    if (!agent.token?.trim()) {
-      errors.push('Authentication token is required');
-    }
-
     if (!agent.location || !['on-site', 'off-site'].includes(agent.location)) {
       errors.push('Location must be either "on-site" or "off-site"');
     }

dashboard/src/utils/config/runtime-config.ts

@@ -15,7 +15,6 @@ export interface RuntimeConfig {
   themeTokens?: Record<string, string>;
   defaultAgentUrl?: string;
   defaultAgentConfigured?: boolean;
-  configuredAgentUrl?: string;
 }
 
 const buildTimeFallback: RuntimeConfig = {

dashboard/src/utils/contexts/AgentContext.tsx

@@ -39,6 +39,7 @@ export function AgentProvider({ children }: { children: React.ReactNode }) {
       setSelectedAgent(agentStore.getSelectedAgent());
     }).catch((err) => {
       console.error('[AgentContext] Failed to refresh agents:', err);
+      toast.error('Failed to refresh agents');
     });
   }, []);
 
@@ -124,6 +125,9 @@ export function AgentProvider({ children }: { children: React.ReactNode }) {
 
       return isOnline;
     } catch (error) {
+      if (error instanceof Error && error.name === 'AbortError') {
+        return false;
+      }
       console.error(`Agent ${id} status check failed:`, error);
 
       agentStore.updateAgent(id, { status: 'offline' });

dashboard/src/utils/contexts/LogContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, useContext } from 'react';
 import { TraefikLog } from '@/utils/types';
 import { useLogFetcher, DedupeDebugStats } from '@/hooks/useLogFetcher';
 
@@ -31,9 +31,7 @@ const LogContext = createContext<LogContextType | undefined>(undefined);
 export function LogProvider({ children }: { children: React.ReactNode }) {
   const logFetcherState = useLogFetcher();
 
-  const value = useMemo(() => logFetcherState, [logFetcherState]);
-
-  return <LogContext.Provider value={value}>{children}</LogContext.Provider>;
+  return <LogContext.Provider value={logFetcherState}>{children}</LogContext.Provider>;
 }
 
 export function useLogContext(): LogContextType {