Refine bouncer status logic and cleanup UI

Update bouncer health logic to require a valid key and consider pulls within 60 minutes as "connected", mark valid-but-old as "stale", otherwise "disconnected" (applied to bouncers handler and health diagnostics). Clean up frontend: remove search context, shortcut and search input from Header, memoize breadcrumbs, remove location-driven scope handling and footer from Layout, move footer/copyright into Sidebar. Replace hardcoded sidebar version with import.meta.env.VITE_APP_VERSION and add Vite config to inject package.json version. Misc: adjust sidebar theme button sizing/layout and minor logging whitespace fix in DeleteBouncer.

Author: hhftechnology

internal/api/handlers/bouncers.go

@@ -50,14 +50,14 @@ func GetBouncers(dockerClient *docker.Client, cfg *config.Config) gin.HandlerFun
 
 		// Compute status for each bouncer
 		for i := range bouncers {
-			// Primary indicator: if last pull was recent (within 5 minutes), bouncer is connected
-			if time.Since(bouncers[i].LastPull) <= 5*time.Minute {
+			// Primary indicator: valid key + pulled within 60 minutes = connected
+			if bouncers[i].Valid && time.Since(bouncers[i].LastPull) <= 60*time.Minute {
 				bouncers[i].Status = "connected"
 			} else if bouncers[i].Valid {
-				// Last pull is old but key is valid - bouncer exists but inactive
+				// Valid key but hasn't pulled recently - stale but registered
 				bouncers[i].Status = "stale"
 			} else {
-				// Key is invalid - bouncer is disconnected
+				// Key is invalid/revoked - bouncer is disconnected
 				bouncers[i].Status = "disconnected"
 			}
 		}
@@ -161,7 +161,7 @@ func DeleteBouncer(dockerClient *docker.Client, cfg *config.Config) gin.HandlerF
 		// Execute delete command
 		cmd := []string{"cscli", "bouncers", "delete", name}
 		output, err := dockerClient.ExecCommand(cfg.CrowdsecContainerName, cmd)
-		
+
 		// Log the output for debugging
 		logger.Info("Delete command executed", "cmd", cmd, "output", output, "error", err)
 

internal/api/handlers/health_diagnostics.go

@@ -45,7 +45,7 @@ func parseBouncersJSON(bouncerOutput string, computeStatus bool) ([]models.Bounc
 		}
 
 		if computeStatus {
-			if time.Since(bouncer.LastPull) <= 5*time.Minute {
+			if bouncer.Valid && time.Since(bouncer.LastPull) <= 60*time.Minute {
 				bouncer.Status = "connected"
 			} else if bouncer.Valid {
 				bouncer.Status = "stale"
@@ -92,7 +92,7 @@ func checkBouncersHealth(dockerClient *docker.Client, containerName string) mode
 
 	activeBouncers := 0
 	for _, b := range bouncers {
-		if time.Since(b.LastPull) <= 5*time.Minute {
+		if b.Valid && time.Since(b.LastPull) <= 60*time.Minute {
 			activeBouncers++
 		}
 	}

web/src/layouts/Header.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from "react"
+import { useMemo } from "react"
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -17,10 +17,9 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { User, Settings, Github, Book, Server, Search, Menu, PanelLeftClose, PanelLeftOpen } from "lucide-react"
+import { User, Settings, Github, Book, Server, Menu, PanelLeftClose, PanelLeftOpen } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
-import { Input } from "@/components/ui/input"
 import {
   Select,
   SelectContent,
@@ -32,7 +31,6 @@ import EnrollDialog from "@/components/dialogs/EnrollDialog"
 import { CrowdSecLogo } from "@/components/icons/CrowdSecLogo"
 import { useQuery } from "@tanstack/react-query"
 import { hostsAPI, setSelectedHost, type HostInfo } from "@/lib/api"
-import { useSearch } from "@/contexts/SearchContext"
 
 interface HeaderProps {
   onMenuClick?: () => void
@@ -42,8 +40,6 @@ interface HeaderProps {
 
 export default function Header({ onMenuClick, isCollapsed, onToggleCollapse }: HeaderProps) {
   const location = useLocation()
-  const { query, scope, setQuery } = useSearch()
-  const searchRef = useRef<HTMLInputElement>(null)
 
   const { data: hostsData } = useQuery({
     queryKey: ['docker-hosts'],
@@ -56,7 +52,7 @@ export default function Header({ onMenuClick, isCollapsed, onToggleCollapse }: H
 
   // Generate breadcrumbs from path
   const pathSegments = location.pathname.split('/').filter(Boolean)
-  const breadcrumbs = [
+  const breadcrumbs = useMemo(() => [
     { name: 'Home', href: '/' },
     ...pathSegments.map((segment, index) => {
       const href = `/${pathSegments.slice(0, index + 1).join('/')}`
@@ -65,31 +61,7 @@ export default function Header({ onMenuClick, isCollapsed, onToggleCollapse }: H
         href
       }
     })
-  ]
-
-  const scopeLabel = useMemo(() => {
-    if (scope === 'hub') return 'Hub'
-    if (scope === 'logs') return 'Logs'
-    if (scope === 'scenarios') return 'Scenarios'
-    if (scope === 'bouncers') return 'Bouncers'
-    if (scope === 'alerts') return 'Alerts'
-    if (scope === 'decisions') return 'Decisions'
-    return 'Global'
-  }, [scope])
-
-  useEffect(() => {
-    const handler = (event: KeyboardEvent) => {
-      if (event.key !== '/' || event.defaultPrevented) return
-      const target = event.target as HTMLElement | null
-      if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) {
-        return
-      }
-      event.preventDefault()
-      searchRef.current?.focus()
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [])
+  ], [pathSegments])
 
   return (
     <header className="h-16 border-b border-sidebar-border bg-card px-6 flex items-center justify-between shadow-sm">
@@ -145,21 +117,6 @@ export default function Header({ onMenuClick, isCollapsed, onToggleCollapse }: H
 
       {/* Right Section: Links & User Profile */}
       <div className="flex items-center gap-4">
-        <div className="hidden lg:flex items-center gap-2">
-          <Badge variant="outline" className="text-[10px] uppercase tracking-wide">
-            Searching: {scopeLabel}
-          </Badge>
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              ref={searchRef}
-              value={query}
-              onChange={(event) => setQuery(event.target.value)}
-              placeholder={`Search ${scopeLabel}...`}
-              className="h-9 w-[240px] pl-9"
-            />
-          </div>
-        </div>
         {/* Host Selector */}
         {showHostSelector && (
           <div className="flex items-center gap-2">

web/src/layouts/Layout.tsx

@@ -1,9 +1,7 @@
-import { ReactNode, useEffect, useState, useCallback } from 'react'
-import { useLocation } from 'react-router-dom'
+import { ReactNode, useState, useCallback } from 'react'
 import Sidebar from './Sidebar'
 import Header from './Header'
 import { useConfigEvents } from '@/hooks/useConfigEvents'
-import { useSearch } from '@/contexts/SearchContext'
 
 interface LayoutProps {
   children: ReactNode
@@ -12,8 +10,6 @@ interface LayoutProps {
 export default function Layout({ children }: LayoutProps) {
   // Listen for config drift/missing events and show toast notifications
   useConfigEvents()
-  const location = useLocation()
-  const { setScope, clear } = useSearch()
   const [isCollapsed, setIsCollapsed] = useState(
     () => localStorage.getItem('sidebar-collapsed') === 'true'
   )
@@ -23,26 +19,6 @@ export default function Layout({ children }: LayoutProps) {
     setMobileOpen(false)
   }, [])
 
-  useEffect(() => {
-    const path = location.pathname
-    if (path.startsWith('/hub')) {
-      setScope('hub')
-    } else if (path.startsWith('/logs')) {
-      setScope('logs')
-    } else if (path.startsWith('/scenarios')) {
-      setScope('scenarios')
-    } else if (path.startsWith('/bouncers')) {
-      setScope('bouncers')
-    } else if (path.startsWith('/alerts')) {
-      setScope('alerts')
-    } else if (path.startsWith('/decisions')) {
-      setScope('decisions')
-    } else {
-      setScope('global')
-    }
-    clear()
-  }, [location.pathname, setScope, clear])
-
   return (
     <div className="h-full bg-background overflow-hidden">
       {/* Mobile overlay */}
@@ -84,9 +60,6 @@ export default function Layout({ children }: LayoutProps) {
               {children}
             </div>
           </main>
-          <footer className="border-t border-sidebar-border py-3 text-center text-xs text-muted-foreground bg-background shrink-0">
-            <p>&copy; {new Date().getFullYear()} HHF Technology &middot; Powered by CrowdSec</p>
-          </footer>
         </div>
       </div>
     </div>

web/src/layouts/Sidebar.tsx

@@ -135,7 +135,7 @@ export default function Sidebar({ isCollapsed, setIsCollapsed: _setIsCollapsed,
             <div className="flex flex-col">
               <span>CrowdSec Manager</span>
               <Badge variant="secondary" className="text-[10px] px-1 py-0 h-5 mt-1 w-fit whitespace-nowrap">
-              Beta-v0.0.6
+              v{import.meta.env.VITE_APP_VERSION}
               </Badge>
             </div>
           </div>
@@ -209,26 +209,32 @@ export default function Sidebar({ isCollapsed, setIsCollapsed: _setIsCollapsed,
         </div>
       </ScrollArea>
 
-      {/* Footer with Theme Toggle and Collapse */}
-      <div className="px-3 py-2">
+      {/* Footer with Theme Toggle and Copyright */}
+      <div className="px-3 py-2 shrink-0">
         <Separator className="mb-3 bg-sidebar-border" />
-        <div className="space-y-1">
+        <div className={cn("flex items-center", isCollapsed ? "justify-center" : "justify-between gap-2")}>
           <Button
             variant="ghost"
-            size={isCollapsed ? "icon" : "default"}
+            size={isCollapsed ? "icon" : "sm"}
             onClick={toggleTheme}
             className={cn(
-              "w-full justify-start text-muted-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-foreground overflow-hidden",
-              isCollapsed && "justify-center"
+              "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-foreground shrink-0",
+              isCollapsed ? "h-8 w-8" : "gap-2 px-2"
             )}
           >
             {theme === "dark" ? (
               <Sun className="h-4 w-4 shrink-0" />
             ) : (
               <Moon className="h-4 w-4 shrink-0" />
             )}
-            {!isCollapsed && <span className="ml-2 truncate">Toggle Theme</span>}
+            {!isCollapsed && <span className="truncate">Toggle Theme</span>}
           </Button>
+          {!isCollapsed && (
+            <p className="text-[10px] text-muted-foreground text-right leading-tight shrink-0">
+              &copy; {new Date().getFullYear()} HHF Technology<br />
+              Powered by CrowdSec
+            </p>
+          )}
         </div>
       </div>
     </div>

web/vite.config.ts

@@ -1,10 +1,16 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 import path from 'path'
+import { readFileSync } from 'fs'
+
+const pkg = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf-8'))
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  define: {
+    'import.meta.env.VITE_APP_VERSION': JSON.stringify(pkg.version),
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),