fix: migrate static UI to Tailwind v4

agentic_security/routes/static.py

@@ -115,7 +115,7 @@ async def serve_icon(icon_name: str) -> FileResponse:
 async def proxy_tailwindcss() -> FileResponse:
     """Proxy the Tailwind CSS script."""
     return proxy_external_resource(
-        "https://cdn.tailwindcss.com",
+        "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
         STATIC_DIR / "tailwindcss.js",
         "application/javascript",
     )

agentic_security/static/index.html

@@ -68,11 +68,11 @@
             <div
                 v-for="toast in toasts"
                 :key="toast.id"
-                class="flex items-center p-3 rounded-xl shadow-xl text-white max-w-md animate-toast-in border border-opacity-30"
+                class="flex items-center p-3 rounded-xl shadow-xl text-white max-w-md animate-toast-in border"
                 :class="{
-                    'bg-success-toast border-accent-green': toast.type === 'success',
-                    'bg-error-toast border-accent-red': toast.type === 'error',
-                    'bg-info-toast border-accent-orange': toast.type === 'info'
+                    'bg-success-toast border-accent-green/30': toast.type === 'success',
+                    'bg-error-toast border-accent-red/30': toast.type === 'error',
+                    'bg-info-toast border-accent-orange/30': toast.type === 'info'
                 }"
             >
                 <span class="flex-1 font-medium tracking-wide text-sm">{{ toast.message }}</span>
@@ -154,13 +154,13 @@
 
             <!-- Error and Success Messages -->
             <div v-if="errorMsg"
-              class="bg-dark-accent-red bg-opacity-20 border border-dark-accent-red text-dark-accent-red px-4 py-3 rounded-lg relative"
+              class="bg-dark-accent-red/20 border border-dark-accent-red text-dark-accent-red px-4 py-3 rounded-lg relative"
               role="alert">
               <strong class="font-bold">Oops!</strong>
               <span class="block sm:inline">{{errorMsg}}</span>
             </div>
             <div v-if="okMsg"
-              class="bg-dark-accent-green bg-opacity-20 border border-dark-accent-green text-dark-accent-green px-4 py-3 rounded-lg relative"
+              class="bg-dark-accent-green/20 border border-dark-accent-green text-dark-accent-green px-4 py-3 rounded-lg relative"
               role="alert">
               <strong class="font-bold">></strong>
               <span class="block sm:inline">{{okMsg}}</span>
@@ -172,7 +172,7 @@
             <section class="flex justify-center space-x-4 mt-10">
               <button
                 @click="verifyIntegration"
-                class="bg-dark-accent-orange text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors">
+                class="bg-dark-accent-orange text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-dark-accent-orange/80 transition-colors">
                 Verify Integration
               </button>
             </section>
@@ -219,7 +219,7 @@
             <div class="flex items-center justify-end mt-4">
               <button
                 @click="confirmResetState"
-                class="flex items-center bg-dark-accent-red text-dark-bg rounded-lg px-4 py-2 text-sm font-medium hover:bg-opacity-80 transition-colors">
+                class="flex items-center bg-dark-accent-red text-dark-bg rounded-lg px-4 py-2 text-sm font-medium hover:bg-dark-accent-red/80 transition-colors">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2"
                   fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round"
@@ -232,7 +232,7 @@
             <!-- Confirmation Modal -->
             <div
               v-if="showResetConfirmation"
-              class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+              class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
               <div class="bg-dark-card rounded-lg p-6 max-w-sm w-full">
                 <h3 class="text-xl font-bold mb-4 text-dark-text">Confirm
                   Reset</h3>
@@ -242,12 +242,12 @@
                 <div class="flex justify-end space-x-4">
                   <button
                     @click="showResetConfirmation = false"
-                    class="bg-gray-600 text-dark-text rounded-lg px-4 py-2 hover:bg-opacity-80 transition-colors">
+                    class="bg-gray-600 text-dark-text rounded-lg px-4 py-2 hover:bg-gray-600/80 transition-colors">
                     Cancel
                   </button>
                   <button
                     @click="resetState"
-                    class="bg-dark-accent-red text-dark-bg rounded-lg px-4 py-2 hover:bg-opacity-80 transition-colors">
+                    class="bg-dark-accent-red text-dark-bg rounded-lg px-4 py-2 hover:bg-dark-accent-red/80 transition-colors">
                     Reset
                   </button>
                 </div>
@@ -416,7 +416,7 @@
             @click="package.is_active !== false && addPackage(index)"
             class="border rounded-lg p-3 cursor-pointer transition-all hover:shadow-md overflow-hidden"
             :class="{
-              'border-dark-accent-green bg-dark-accent-green bg-opacity-20': package.selected,
+              'border-dark-accent-green bg-dark-accent-green/20': package.selected,
               'border-gray-600': !package.selected,
               'opacity-30 pointer-events-none cursor-not-allowed': package.is_active === false
             }">
@@ -434,13 +434,13 @@
 
         <!-- Error and Success Messages -->
         <div v-if="errorMsg"
-          class="bg-dark-accent-red bg-opacity-20 border border-dark-accent-red text-dark-accent-red px-4 py-3 rounded-lg relative"
+          class="bg-dark-accent-red/20 border border-dark-accent-red text-dark-accent-red px-4 py-3 rounded-lg relative"
           role="alert">
           <strong class="font-bold">Oops!</strong>
           <span class="block sm:inline">{{errorMsg}}</span>
         </div>
         <div v-if="okMsg"
-          class="bg-dark-accent-green bg-opacity-20 border border-dark-accent-green text-dark-accent-green px-4 py-3 rounded-lg relative"
+          class="bg-dark-accent-green/20 border border-dark-accent-green text-dark-accent-green px-4 py-3 rounded-lg relative"
           role="alert">
           <strong class="font-bold">></strong>
           <span class="block sm:inline">{{okMsg}}</span>
@@ -452,13 +452,13 @@
         <section class="flex justify-center space-x-4">
           <button
             @click="verifyIntegration"
-            class="bg-dark-accent-orange text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors">
+            class="bg-dark-accent-orange text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-dark-accent-orange/80 transition-colors">
             Verify Integration
           </button>
           <button
             @click="startScan"
             v-if="!scanRunning"
-            class="bg-dark-accent-green text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors flex items-center">
+            class="bg-dark-accent-green text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-dark-accent-green/80 transition-colors flex items-center">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" fill="none" stroke="currentColor"
               stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -468,7 +468,7 @@
           <button
             @click="stopScan"
             v-if="scanRunning"
-            class="bg-dark-accent-red text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors flex items-center">
+            class="bg-dark-accent-red text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-dark-accent-red/80 transition-colors flex items-center">
             <!-- Stop Icon -->
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" fill="none" stroke="currentColor"
@@ -519,7 +519,7 @@
         <!-- Download Button -->
         <button
           @click="downloadFailures"
-          class="bg-dark-accent-yellow text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors">
+          class="bg-dark-accent-yellow text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-dark-accent-yellow/80 transition-colors">
           Download failures
         </button>
 
@@ -547,7 +547,7 @@
                 Math.min(logs.length, maxDisplayedLogs) }} of {{ logs.length }}
                 logs</span>
               <button @click="downloadLogs"
-                class="bg-dark-accent-green text-dark-bg rounded-lg px-4 py-2 text-sm font-medium hover:bg-opacity-80 transition-colors">
+                class="bg-dark-accent-green text-dark-bg rounded-lg px-4 py-2 text-sm font-medium hover:bg-dark-accent-green/80 transition-colors">
                 Download Logs
               </button>
             </div>

agentic_security/static/partials/concent.html

@@ -1,5 +1,5 @@
  <div id="consent-modal" v-if="showConsentModal"
-    class="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50">
+    class="fixed inset-0 bg-black/75 flex justify-center items-center z-50">
     <div
         class="bg-dark-card text-dark-text p-8 rounded-xl shadow-2xl max-w-xl w-full">
         <h2 class="text-2xl font-bold mb-6 text-center">AI Red Team Ethical
@@ -54,12 +54,12 @@
         <div class="flex justify-center space-x-4 mt-8">
             <button
                 @click="declineConsent"
-                class="bg-dark-accent-red text-white rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors">
+                class="bg-dark-accent-red text-white rounded-lg px-6 py-3 font-medium hover:bg-dark-accent-red/80 transition-colors">
                 Decline
             </button>
             <button
                 @click="acceptConsent"
-                class="bg-dark-accent-green text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors">
+                class="bg-dark-accent-green text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-dark-accent-green/80 transition-colors">
                 I Agree and Understand
             </button>
         </div>

agentic_security/static/partials/head.html

@@ -1,7 +1,51 @@
-  <head></head>
+  <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LLM Vulnerability Scanner</title>
+    <style type="text/tailwindcss">
+      @theme {
+        --font-sans: Inter, sans-serif;
+        --font-technopollas: Technopollas, sans-serif;
+
+        --color-dark-bg: #0D0D0D;
+        --color-dark-card: #1A1A1A;
+        --color-dark-text: #FFFFFF;
+        --color-dark-accent-green: #E0A3B6;
+        --color-dark-accent-red: #1C3F74;
+        --color-dark-accent-orange: #A5A5A5;
+        --color-dark-accent-yellow: #2E4053;
+
+        --color-dark1-bg: #121212;
+        --color-dark1-card: #1E1E1E;
+        --color-dark1-text: #FFFFFF;
+        --color-dark1-accent-green: #4CAF50;
+        --color-dark1-accent-red: #F44336;
+        --color-dark1-accent-orange: #FF9800;
+        --color-dark1-accent-yellow: #FFEB3B;
+        --color-dark1-accent-berry: #E0A3B6;
+        --color-dark1-accent-blue: #1C3F74;
+        --color-dark1-accent-silver: #A5A5A5;
+        --color-dark1-accent-black: #DAF7A6;
+        --color-dark1-variant1-primary: #E0A3B6;
+        --color-dark1-variant1-secondary: #1C3F74;
+        --color-dark1-variant1-highlight: #A5A5A5;
+        --color-dark1-variant1-dark: #000000;
+        --color-dark1-variant2-primary: #FF5733;
+        --color-dark1-variant2-secondary: #2E4053;
+        --color-dark1-variant2-highlight: #C0C0C0;
+        --color-dark1-variant2-dark: #121212;
+        --color-dark1-variant3-primary: #3D9970;
+        --color-dark1-variant3-secondary: #85144B;
+        --color-dark1-variant3-highlight: #AAAAAA;
+        --color-dark1-variant3-dark: #111111;
+        --color-dark1-variant4-primary: #FFC300;
+        --color-dark1-variant4-secondary: #DAF7A6;
+        --color-dark1-variant4-highlight: #888888;
+        --color-dark1-variant4-dark: #222222;
+
+        --radius-lg: 1rem;
+      }
+    </style>
     <script src="/cdn/tailwindcss.js"></script>
     <script src="/cdn/vue.js"></script>
     <script src="/cdn/lucide.js"></script>
@@ -9,84 +53,6 @@
     <style>
       @import url('/cdn/inter.css');
     </style>
-    <script>
-      tailwind.config = {
-        darkMode: 'class',
-        theme: {
-          extend: {
-            fontFamily: {
-              sans: ['Inter', 'sans-serif'],
-              technopollas: ['Technopollas', 'sans-serif'],
-            },
-            colors: {
-                dark: {
-                bg: '#0D0D0D', // Jet Black
-                card: '#1A1A1A', // Dark Carbon Fiber
-                text: '#FFFFFF',
-                accent: {
-                  green: '#E0A3B6', // Frozen Berry
-                  red: '#1C3F74', // Neptune Blue
-                  orange: '#A5A5A5', // Dolomite Silver
-                  yellow: '#2E4053', // Jet Black
-                },
-              },
-              dark1: {
-                bg: '#121212',
-                card: '#1E1E1E',
-                text: '#FFFFFF',
-                accent: {
-                  green: '#4CAF50',
-                  red: '#F44336',
-                  orange: '#FF9800',
-                  yellow: '#FFEB3B',
-                // bg: '#0D0D0D', // Jet Black
-                // card: '#1A1A1A', // Dark Carbon Fiber
-                // text: '#FFFFFF',
-                // accent: {
-                //   green: '#E0A3B6', // Frozen Berry
-                //   red: '#1C3F74', // Neptune Blue
-                //   orange: '#A5A5A5', // Dolomite Silver
-                //   yellow: '#2E4053', // Jet Black
-
-                  berry: '#E0A3B6', // Frozen Berry
-                  blue: '#1C3F74', // Neptune Blue
-                  silver: '#A5A5A5', // Dolomite Silver
-                  black: '#DAF7A6', // Jet Black
-                },
-                variant1: {
-                    primary: '#E0A3B6', // Frozen Berry
-                    secondary: '#1C3F74', // Neptune Blue
-                    highlight: '#A5A5A5', // Dolomite Silver
-                    dark: '#000000' // Jet Black
-                  },
-                  variant2: {
-                    primary: '#FF5733', // Lava Red
-                    secondary: '#2E4053', // Midnight Blue
-                    highlight: '#C0C0C0', // Platinum Silver
-                    dark: '#121212' // Deep Black
-                  },
-                  variant3: {
-                    primary: '#3D9970', // Racing Green
-                    secondary: '#85144B', // Burgundy Red
-                    highlight: '#AAAAAA', // Light Silver
-                    dark: '#111111' // Matte Black
-                  },
-                  variant4: {
-                    primary: '#FFC300', // Golden Yellow
-                    secondary: '#DAF7A6', // Soft Mint
-                    highlight: '#888888', // Titanium Gray
-                    dark: '#222222' // Charcoal Black
-                  },
-              },
-            },
-            borderRadius: {
-              'lg': '1rem',
-            },
-          }
-        }
-      }
-    </script>
-
     <style>
 .scrollbar-hide::-webkit-scrollbar {
   display: none;