From fd89671bedb53350649cf8edfb3eebaade0d7710 Mon Sep 17 00:00:00 2001
From: Ayoub-Aguezar-12 <Ayoub.aguezar.dev@gmail.com>
Date: Wed, 4 Feb 2026 05:20:30 +0100
Subject: [PATCH 1/3] webUI: serve Tailwind v4 and update deprecated opacity
 utilities

---
 .gitignore                                    | 2 ++
 agentic_security/routes/static.py             | 2 +-
 agentic_security/static/partials/concent.html | 6 +++---
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index bbe6c45d..22e616b9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,5 @@ plan.md
 auto_loop.sh
 agentic_security/static/elm-stuff/
 agentic_security/static/node_modules/
+.venv/
+.cache/
diff --git a/agentic_security/routes/static.py b/agentic_security/routes/static.py
index 2abafd94..b5a838e0 100644
--- a/agentic_security/routes/static.py
+++ b/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",
     )
diff --git a/agentic_security/static/partials/concent.html b/agentic_security/static/partials/concent.html
index 5f938953..4e4313c6 100644
--- a/agentic_security/static/partials/concent.html
+++ b/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 @@ <h2 class="text-2xl font-bold mb-6 text-center">AI Red Team Ethical
         <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>

From 81404af4e0546c97acf8b263fa33a6eacc147f11 Mon Sep 17 00:00:00 2001
From: 64johnlee <64lamei@gmail.com>
Date: Sun, 3 May 2026 08:57:04 +0800
Subject: [PATCH 2/3] fix: migrate Tailwind v4 - update all deprecated opacity
 utilities

- Replace bg-opacity-NN with bg-color/NN (Tailwind v4 slash notation)
- Replace hover:bg-opacity-80 with hover:bg-color/80 for specific colors
- Replace hover:/80 (bare) with appropriate hover:bg-color/80
- Apply to PageContent.vue, PageConfigs.vue, index.html

Addresses: https://github.com/msoedov/agentic_security/issues/119
---
 agentic_security/static/index.html | 32 +++++++++++++++---------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/agentic_security/static/index.html b/agentic_security/static/index.html
index fcdf046e..1046d59c 100644
--- a/agentic_security/static/index.html
+++ b/agentic_security/static/index.html
@@ -68,7 +68,7 @@ <h4 class="text-lg font-semibold">
             <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 /30"
                 :class="{
                     'bg-success-toast border-accent-green': toast.type === 'success',
                     'bg-error-toast border-accent-red': toast.type === 'error',
@@ -154,13 +154,13 @@ <h2 class="text-2xl font-bold">LLM API Spec</h2>
 
             <!-- 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 @@ <h2 class="text-2xl font-bold">LLM API Spec</h2>
             <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 @@ <h2 class="text-2xl font-bold">Parameters</h2>
             <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 @@ <h2 class="text-2xl font-bold">Parameters</h2>
             <!-- 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 @@ <h3 class="text-xl font-bold mb-4 text-dark-text">Confirm
                 <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 @@ <h3 class="text-lg font-semibold">Enable Many-shot
             @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 @@ <h3 class="text-lg font-semibold">Enable Many-shot
 
         <!-- 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 @@ <h3 class="text-lg font-semibold">Enable Many-shot
         <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 @@ <h3 class="text-lg font-semibold">Enable Many-shot
           <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 @@ <h2 class="text-2xl font-bold mb-4">Scan Results</h2>
         <!-- 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 @@ <h2 class="text-2xl font-bold">Logs</h2>
                 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>

From 3189d7ed37331c0a442ed450b39e997bad227ff0 Mon Sep 17 00:00:00 2001
From: john lee <64lamei@gmail.com>
Date: Sun, 31 May 2026 20:06:25 +0800
Subject: [PATCH 3/3] fix(tailwind): correct slash-opacity notation (remove
 erroneous spaces)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

bg-color /N with a space is not a valid Tailwind utility — the slash
must be attached directly to the color class: bg-color/N.

Fix all occurrences in index.html:
- bg-dark-accent-red/20 (2x)
- bg-dark-accent-green/20 (3x)
- bg-black/50 (1x)

Revert border /30 to border-opacity-30 since the border color is
applied dynamically via :class and cannot be statically combined.
---
 agentic_security/static/index.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/agentic_security/static/index.html b/agentic_security/static/index.html
index 1046d59c..48a33fdd 100644
--- a/agentic_security/static/index.html
+++ b/agentic_security/static/index.html
@@ -68,7 +68,7 @@ <h4 class="text-lg font-semibold">
             <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 /30"
+                class="flex items-center p-3 rounded-xl shadow-xl text-white max-w-md animate-toast-in border border-opacity-30"
                 :class="{
                     'bg-success-toast border-accent-green': toast.type === 'success',
                     'bg-error-toast border-accent-red': toast.type === 'error',
@@ -154,13 +154,13 @@ <h2 class="text-2xl font-bold">LLM API Spec</h2>
 
             <!-- Error and Success Messages -->
             <div v-if="errorMsg"
-              class="bg-dark-accent-red /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 /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>
@@ -232,7 +232,7 @@ <h2 class="text-2xl font-bold">Parameters</h2>
             <!-- Confirmation Modal -->
             <div
               v-if="showResetConfirmation"
-              class="fixed inset-0 bg-black /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>
@@ -416,7 +416,7 @@ <h3 class="text-lg font-semibold">Enable Many-shot
             @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 /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 @@ <h3 class="text-lg font-semibold">Enable Many-shot
 
         <!-- Error and Success Messages -->
         <div v-if="errorMsg"
-          class="bg-dark-accent-red /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 /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>