feat: 2026 UI overhaul, stability fixes, and NVIDIA NIM support

- Overhauled frontend with 2026 hacking HUD aesthetic (neon colors, glassmorphism)
- Added native support for NVIDIA NIM as a Tier 2 provider
- Fixed critical backend crashes in autonomous_agent.py and knowledge_processor.py
- Updated Kali sandbox build to Go 1.26 and fixed health check reliability
- Integrated Space Grotesk and JetBrains Mono fonts

frontend/src/components/common/Button.tsx

@@ -17,19 +17,19 @@ export default function Button({
   disabled,
   ...props
 }: ButtonProps) {
-  const baseStyles = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-700 disabled:opacity-50 disabled:cursor-not-allowed'
+  const baseStyles = 'inline-flex items-center justify-center font-bold uppercase tracking-widest rounded-none transition-all duration-300 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed border'
 
   const variants = {
-    primary: 'bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-500',
-    secondary: 'bg-dark-900 text-white hover:bg-dark-800 focus:ring-dark-500',
-    danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
-    ghost: 'text-dark-300 hover:text-white hover:bg-dark-900/50 focus:ring-dark-500',
+    primary: 'bg-cyber-green/10 text-cyber-green border-cyber-green/50 hover:bg-cyber-green hover:text-black hover:shadow-neon-green',
+    secondary: 'bg-cyber-blue/10 text-cyber-blue border-cyber-blue/50 hover:bg-cyber-blue hover:text-black hover:shadow-neon-blue',
+    danger: 'bg-cyber-red/10 text-cyber-red border-cyber-red/50 hover:bg-cyber-red hover:text-black hover:shadow-[0_0_20px_rgba(255,0,85,0.4)]',
+    ghost: 'bg-transparent text-dark-400 border-transparent hover:text-white hover:bg-white/5',
   }
 
   const sizes = {
-    sm: 'px-3 py-1.5 text-sm',
-    md: 'px-4 py-2 text-sm',
-    lg: 'px-6 py-3 text-base',
+    sm: 'px-4 py-1.5 text-[10px] font-mono',
+    md: 'px-6 py-2.5 text-xs font-mono',
+    lg: 'px-8 py-3.5 text-sm font-mono',
   }
 
   return (

frontend/src/components/common/Card.tsx

@@ -11,17 +11,25 @@ interface CardProps {
 
 export default function Card({ children, className, title, subtitle, action }: CardProps) {
   return (
-    <div className={clsx('bg-dark-800 rounded-xl border border-dark-900/50', className)}>
+    <div className={clsx('cyber-card group', className)}>
       {(title || action) && (
-        <div className="flex items-center justify-between p-4 border-b border-dark-900/50">
-          <div>
-            {title && <h3 className="text-lg font-semibold text-white">{title}</h3>}
-            {subtitle && <p className="text-sm text-dark-400 mt-1">{subtitle}</p>}
+        <div className="flex items-center justify-between p-5 border-b border-cyber-green/10 relative overflow-hidden">
+          {/* Subtle header pulse glow */}
+          <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-cyber-green/20 to-transparent"></div>
+          
+          <div className="z-10">
+            {title && (
+              <h3 className="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
+                <span className="w-1.5 h-1.5 bg-cyber-green rounded-full shadow-neon-green"></span>
+                {title}
+              </h3>
+            )}
+            {subtitle && <p className="text-[10px] text-dark-400 mt-1 uppercase tracking-widest font-mono">{subtitle}</p>}
           </div>
-          {action}
+          <div className="z-10">{action}</div>
         </div>
       )}
-      <div className="p-4">{children}</div>
+      <div className="p-5">{children}</div>
     </div>
   )
 }

frontend/src/components/layout/Header.tsx

@@ -13,16 +13,28 @@ export default function Header() {
   const title = pageTitles[location.pathname] || 'NeuroSploit'
 
   return (
-    <header className="h-16 bg-dark-800 border-b border-dark-900/50 flex items-center justify-between px-6">
-      <h1 className="text-xl font-semibold text-white">{title}</h1>
+    <header className="h-16 glass-panel border-b border-cyber-green/10 flex items-center justify-between px-8 z-40">
       <div className="flex items-center gap-4">
-        <span className="text-sm text-dark-400">
+        <div className="w-1 h-6 bg-cyber-green/50 rounded-full animate-pulse"></div>
+        <h1 className="text-xl font-bold text-white tracking-tighter uppercase font-sans">
+          {title}
+        </h1>
+      </div>
+      
+      <div className="flex items-center gap-6 font-mono text-[11px]">
+        <div className="flex items-center gap-2 px-3 py-1 bg-cyber-green/5 border border-cyber-green/20 rounded text-cyber-green">
+          <span className="w-1.5 h-1.5 bg-cyber-green rounded-full animate-pulse"></span>
+          SCANNER_ACTIVE
+        </div>
+        
+        <span className="text-dark-400 uppercase tracking-widest hidden sm:block">
           {new Date().toLocaleDateString('en-US', {
-            weekday: 'long',
             year: 'numeric',
-            month: 'long',
+            month: 'short',
             day: 'numeric'
           })}
+          <span className="ml-2 text-cyber-green/30">|</span>
+          <span className="ml-2">SEC_LEVEL: ALPHA</span>
         </span>
       </div>
     </header>

frontend/src/components/layout/Layout.tsx

@@ -8,12 +8,17 @@ interface LayoutProps {
 
 export default function Layout({ children }: LayoutProps) {
   return (
-    <div className="flex min-h-screen bg-dark-700 overflow-hidden">
+    <div className="flex min-h-screen bg-cyber-black overflow-hidden selection:bg-cyber-green selection:text-black">
+      {/* Dynamic scanning line */}
+      <div className="fixed top-0 left-0 w-full h-1 bg-cyber-green/20 blur-[2px] z-[9999] animate-scanline pointer-events-none"></div>
+      
       <Sidebar />
-      <div className="flex-1 flex flex-col min-w-0">
+      <div className="flex-1 flex flex-col min-w-0 relative">
         <Header />
-        <main className="flex-1 p-6 overflow-auto">
-          {children}
+        <main className="flex-1 p-6 overflow-auto scrollbar-thin scrollbar-thumb-cyber-green/20">
+          <div className="max-w-[1600px] mx-auto animate-fadeIn">
+            {children}
+          </div>
         </main>
       </div>
     </div>

frontend/src/components/layout/Sidebar.tsx

@@ -63,25 +63,27 @@ export default function Sidebar() {
     <aside
       className={`${
         sidebarCollapsed ? 'w-16' : 'w-64'
-      } bg-dark-800 border-r border-dark-900/50 flex flex-col transition-all duration-300 ease-in-out flex-shrink-0`}
+      } glass-panel border-r border-cyber-green/10 flex flex-col transition-all duration-300 ease-in-out flex-shrink-0 z-50`}
     >
       {/* Logo */}
-      <div className={`border-b border-dark-900/50 ${sidebarCollapsed ? 'p-3' : 'p-4'}`}>
+      <div className={`border-b border-cyber-green/10 ${sidebarCollapsed ? 'p-3' : 'p-4'}`}>
         <div className="flex items-center justify-between">
-          <Link to="/" className="flex items-center gap-3 min-w-0">
-            <div className="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center flex-shrink-0">
-              <Shield className="w-6 h-6 text-white" />
+          <Link to="/" className="flex items-center gap-3 min-w-0 group">
+            <div className="w-10 h-10 bg-cyber-green/10 border border-cyber-green/30 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:shadow-neon-green transition-all duration-300">
+              <Shield className="w-6 h-6 text-cyber-green animate-pulse-glow" />
             </div>
             {!sidebarCollapsed && (
               <div className="min-w-0">
-                <h1 className="text-lg font-bold text-white truncate">NeuroSploit</h1>
-                <p className="text-xs text-dark-400">v3.0 AI Pentest</p>
+                <h1 className="text-lg font-bold text-white truncate tracking-tighter uppercase">
+                  Neuro<span className="text-cyber-green">Sploit</span>
+                </h1>
+                <p className="text-[10px] text-cyber-green/50 font-mono tracking-widest uppercase">v3.0 AI PENTEST</p>
               </div>
             )}
           </Link>
           <button
             onClick={toggleSidebar}
-            className="text-dark-400 hover:text-white transition-colors p-1 rounded hover:bg-dark-700 flex-shrink-0"
+            className="text-dark-400 hover:text-cyber-green transition-all p-1 rounded hover:bg-cyber-green/5 flex-shrink-0 border border-transparent hover:border-cyber-green/20"
             title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
           >
             {sidebarCollapsed ? (
@@ -94,16 +96,17 @@ export default function Sidebar() {
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 p-2 overflow-y-auto overflow-x-hidden">
+      <nav className="flex-1 p-2 overflow-y-auto overflow-x-hidden space-y-4 pt-4">
         {navGroups.map((group) => (
-          <div key={group.label} className="mb-3">
+          <div key={group.label}>
             {!sidebarCollapsed && (
-              <p className="px-3 mb-1 text-[10px] font-semibold uppercase text-dark-500 tracking-wider">
+              <p className="px-3 mb-2 text-[10px] font-bold uppercase text-dark-500 tracking-[0.2em] flex items-center gap-2">
+                <span className="w-1 h-1 bg-cyber-green/30 rounded-full"></span>
                 {group.label}
               </p>
             )}
-            {sidebarCollapsed && <div className="border-t border-dark-700/50 mx-2 mb-2 mt-1" />}
-            <ul className="space-y-0.5">
+            {sidebarCollapsed && <div className="border-t border-cyber-green/5 mx-2 mb-2 mt-1" />}
+            <ul className="space-y-1">
               {group.items.map((item) => {
                 const isActive = location.pathname === item.path
                 const Icon = item.icon
@@ -114,16 +117,19 @@ export default function Sidebar() {
                       title={sidebarCollapsed ? item.label : undefined}
                       className={`flex items-center ${
                         sidebarCollapsed ? 'justify-center px-2' : 'gap-3 px-3'
-                      } py-2.5 rounded-lg transition-colors ${
+                      } py-2.5 rounded transition-all duration-200 relative group overflow-hidden ${
                         isActive
-                          ? 'bg-primary-500/20 text-primary-500'
-                          : 'text-dark-300 hover:bg-dark-900/50 hover:text-white'
+                          ? 'bg-cyber-green/10 text-cyber-green border-l-2 border-cyber-green shadow-[inset_4px_0_10px_rgba(0,255,102,0.1)]'
+                          : 'text-dark-300 hover:bg-cyber-green/5 hover:text-white border-l-2 border-transparent'
                       }`}
                     >
-                      <Icon className="w-5 h-5 flex-shrink-0" />
+                      <Icon className={`w-5 h-5 flex-shrink-0 transition-transform duration-300 ${isActive ? 'scale-110' : 'group-hover:scale-110 group-hover:text-cyber-green'}`} />
                       {!sidebarCollapsed && (
-                        <span className="whitespace-nowrap text-sm">{item.label}</span>
+                        <span className="whitespace-nowrap text-sm font-medium tracking-tight">{item.label}</span>
                       )}
+                      
+                      {/* Hover effect light */}
+                      <div className="absolute inset-0 bg-gradient-to-r from-cyber-green/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
                     </Link>
                   </li>
                 )
@@ -134,10 +140,18 @@ export default function Sidebar() {
       </nav>
 
       {/* Status */}
-      <div className="p-3 border-t border-dark-900/50">
-        <div className={`flex items-center ${sidebarCollapsed ? 'justify-center' : 'gap-2'} text-sm`}>
-          <Activity className="w-4 h-4 text-green-500 flex-shrink-0" />
-          {!sidebarCollapsed && <span className="text-dark-400">System Online</span>}
+      <div className="p-4 border-t border-cyber-green/10 bg-cyber-green/[0.02]">
+        <div className={`flex items-center ${sidebarCollapsed ? 'justify-center' : 'gap-3'} text-[11px] font-mono`}>
+          <div className="relative">
+            <Activity className="w-4 h-4 text-cyber-green" />
+            <div className="absolute inset-0 bg-cyber-green rounded-full blur-[4px] animate-pulse opacity-50"></div>
+          </div>
+          {!sidebarCollapsed && (
+            <div className="flex flex-col">
+              <span className="text-white font-bold uppercase tracking-tighter">System Online</span>
+              <span className="text-cyber-green/50 text-[9px] uppercase">Node: NS-2026-ALPHA</span>
+            </div>
+          )}
         </div>
       </div>
     </aside>

frontend/src/styles/globals.css

@@ -3,61 +3,133 @@
 @tailwind utilities;
 
 :root {
-  --bg-primary: #1a1a2e;
-  --bg-secondary: #16213e;
-  --bg-card: #0f3460;
-  --text-primary: #eee;
-  --text-secondary: #aaa;
-  --accent: #e94560;
-  --border: #333;
+  --bg-primary: #050505;
+  --bg-secondary: #0a0a0a;
+  --bg-card: #121212;
+  --text-primary: #ffffff;
+  --text-secondary: #94a3b8;
+  --accent: #00ff66;
+  --border: #1a1a1a;
+  --cyber-green: #00ff66;
+  --cyber-blue: #00f0ff;
+  --cyber-purple: #bd00ff;
+  --cyber-red: #ff0055;
 }
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  font-family: 'Space Grotesk', -apple-system, sans-serif;
   background-color: var(--bg-primary);
   color: var(--text-primary);
   min-height: 100vh;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* Background Grid Effect */
+body::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-image: 
+    linear-gradient(rgba(0, 255, 102, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 255, 102, 0.03) 1px, transparent 1px);
+  background-size: 30px 30px;
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* Scanline Effect */
+body::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    rgba(18, 16, 16, 0) 50%,
+    rgba(0, 0, 0, 0.1) 50%
+  ), linear-gradient(
+    90deg,
+    rgba(255, 0, 0, 0.02),
+    rgba(0, 255, 0, 0.01),
+    rgba(0, 0, 255, 0.02)
+  );
+  background-size: 100% 4px, 3px 100%;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0.3;
 }
 
 * {
   box-sizing: border-box;
 }
 
-/* Custom scrollbar */
+/* Custom cyber scrollbar */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 5px;
+  height: 5px;
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--bg-secondary);
+  background: var(--bg-primary);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--bg-card);
-  border-radius: 4px;
+  background: var(--border);
+  border-radius: 0;
+  border: 1px solid var(--border);
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background: var(--accent);
+  box-shadow: 0 0 10px var(--accent);
 }
 
-/* Animations */
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
+/* Cyber Text Effects */
+.cyber-glitch {
+  position: relative;
 }
 
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
+.cyber-glitch::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 2px;
+  text-shadow: -1px 0 var(--cyber-red);
+  background: var(--bg-primary);
+  overflow: hidden;
+  clip: rect(0, 900px, 0, 0);
+  animation: glitch-anim 2s infinite linear alternate-reverse;
 }
 
-.animate-fadeIn {
-  animation: fadeIn 0.3s ease-out;
+@keyframes glitch-anim {
+  0% { clip: rect(10px, 9999px, 50px, 0); }
+  20% { clip: rect(30px, 9999px, 10px, 0); }
+  40% { clip: rect(80px, 9999px, 40px, 0); }
+  60% { clip: rect(20px, 9999px, 70px, 0); }
+  80% { clip: rect(40px, 9999px, 20px, 0); }
+  100% { clip: rect(60px, 9999px, 80px, 0); }
 }
 
-.animate-pulse {
-  animation: pulse 2s infinite;
+/* Glassmorphism utility */
+.glass-panel {
+  background: rgba(10, 10, 10, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
+
+.cyber-card {
+  @apply glass-panel transition-all duration-300;
+}
+
+.cyber-card:hover {
+  border-color: rgba(0, 255, 102, 0.3);
+  box-shadow: 0 0 20px rgba(0, 255, 102, 0.1);
+}
+