fix(update UX and add save state):

Author: msoedov

agentic_security/static/index.html

@@ -142,6 +142,45 @@ <h2 class="text-2xl font-bold">Parameters</h2>
             </svg>
           </div>
           <div v-show="showParams" class="mt-4">
+            <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">
+                <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"
+                    stroke-width="2"
+                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+                Reset State
+              </button>
+            </div>
+            <!-- Confirmation Modal -->
+            <div
+              v-if="showResetConfirmation"
+              class="fixed inset-0 bg-black bg-opacity-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>
+                <p class="text-gray-400 mb-6">Are you sure you want to reset all
+                  settings to their default state? This action cannot be
+                  undone.</p>
+                <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">
+                    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">
+                    Reset
+                  </button>
+                </div>
+              </div>
+            </div>
+            <!-- Confirmation Modal -->
+
             <!-- Maximum Budget Slider -->
             <!-- Budget Slider -->
             <section class="bg-dark-card rounded-lg p-6 shadow-lg">
@@ -229,6 +268,21 @@ <h3 class="text-lg font-semibold">Enable Concurrency</h3>
                 concurrently. This can significantly reduce the total scan time
                 but may increase resource usage.
               </p>
+              <!-- Multi-Step Attack Toggle -->
+              <div class="flex items-center justify-between mb-2">
+                <h3 class="text-lg font-semibold">Enable Multi-Step Attack</h3>
+                <label class="relative inline-flex items-center cursor-pointer">
+                  <input type="checkbox" v-model="enableMultiStepAttack"
+                    class="sr-only peer">
+                  <div
+                    class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-dark-accent-green rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-dark-accent-green"></div>
+                </label>
+              </div>
+              <p class="text-sm text-gray-400 mt-2">
+                When enabled, the scan will attempt multi-step attack
+                simulations,
+                increasing accuracy and depth of analysis.
+              </p>
             </div>
           </div>
         </section>

agentic_security/static/main.js

@@ -73,10 +73,12 @@ var app = new Vue({
         modelSpec: LLM_SPECS[0],
         budget: 50,
         showParams: false,
+        showResetConfirmation: false,
         enableChartDiagram: true,
         enableLogging: false,
         enableConcurrency: false,
         optimize: false,
+        enableMultiStepAttack: false,
         showDatasets: false,
         scanResults: [],
         mainTable: [],
@@ -117,6 +119,7 @@ var app = new Vue({
         this.adjustHeight({ target: document.getElementById('llm-spec') });
         // this.startScan();
         this.loadConfigs();
+
     },
     computed: {
         selectedDS: function () {
@@ -131,6 +134,45 @@ var app = new Vue({
             this.showConsentModal = false; // Close the modal
             localStorage.setItem('consentGiven', 'true'); // Save consent to local storage
         },
+
+        saveStateToLocalStorage() {
+            const state = {
+                modelSpec: this.modelSpec,
+                budget: this.budget,
+                dataConfig: this.dataConfig,
+                optimize: this.optimize,
+                enableChartDiagram: this.enableChartDiagram,
+            };
+            localStorage.setItem('appState', JSON.stringify(state));
+        },
+        loadStateFromLocalStorage() {
+            const savedState = localStorage.getItem('appState');
+            console.log('Loading state from local storage:', savedState);
+            if (savedState) {
+                const state = JSON.parse(savedState);
+                this.modelSpec = state.modelSpec;
+                this.budget = state.budget;
+                this.dataConfig = state.dataConfig;
+                this.optimize = state.optimize;
+                this.enableChartDiagram = state.enableChartDiagram;
+            }
+        },
+        resetState() {
+            localStorage.removeItem('appState');
+            this.modelSpec = LLM_SPECS[0];
+            this.budget = 50;
+            this.dataConfig.forEach(config => config.selected = false);
+            this.optimize = false;
+            this.enableChartDiagram = true;
+            this.okMsg = '';
+            this.errorMsg = '';
+            this.integrationVerified = false;
+            this.showResetConfirmation = false;
+        },
+        confirmResetState() {
+            this.showResetConfirmation = true;
+        },
+
         declineConsent() {
             this.showConsentModal = false; // Close the modal
             localStorage.setItem('consentGiven', 'false'); // Save decline to local storage
@@ -186,6 +228,7 @@ var app = new Vue({
                 // this.$forceUpdate();
 
             }
+            this.saveStateToLocalStorage();
         },
         loadConfigs: async function () {
             const response = await fetch(`${URL}/v1/data-config`, {
@@ -196,6 +239,7 @@ var app = new Vue({
             });
             console.log(response);
             this.dataConfig = await response.json();
+            this.loadStateFromLocalStorage();
         },
         selectConfig(index) {
             this.selectedConfig = index;
@@ -413,6 +457,8 @@ var app = new Vue({
                     }
                 });
             }
+            this.saveStateToLocalStorage();
+
         }
     }
 });

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "agentic_security"
-version = "0.3.2"
+version = "0.3.3"
 description = "Agentic LLM vulnerability scanner"
 authors = ["Alexander Miasoiedov <msoedov@gmail.com>"]
 maintainers = ["Alexander Miasoiedov <msoedov@gmail.com>"]