From 2e795fc1a95061f68f44bd23f3a31be08a9cde62 Mon Sep 17 00:00:00 2001
From: deacon <marksoccerman1@aol.com>
Date: Sun, 9 Nov 2025 16:55:32 -0500
Subject: [PATCH 01/12] new Adversary UI support and operations schema

---
 package-lock.json                             |  317 +++++
 .../abilities/CreateEditAbility.vue           |  826 +++++++++----
 .../abilities/CreateEditAbility.vue.bkp       |  313 +++++
 .../DeleteAdversaryConfirmationModal.vue      |    4 +-
 .../DeleteAdversaryConfirmationModal.vue.bkp  |   31 +
 src/components/adversaries/DetailsTable.vue   | 1096 +++++++++++------
 .../adversaries/DetailsTable.vue.bkp          |  512 ++++++++
 src/components/adversaries/ImportModal.vue    |  139 ++-
 .../adversaries/ImportModal.vue.bkp           |   76 ++
 src/components/operations/CreateModal.vue     |  468 ++++---
 src/router.js                                 |    2 +-
 src/stores/adversaryStore.js                  |  302 ++++-
 src/stores/adversaryStore.js.bkp              |  127 ++
 src/utils/executorUtils.js                    |   78 ++
 src/views/AdversariesView.vue                 |  346 +++++-
 src/views/AdversariesView.vue.bkp             |   85 ++
 16 files changed, 3695 insertions(+), 1027 deletions(-)
 create mode 100644 src/components/abilities/CreateEditAbility.vue.bkp
 create mode 100644 src/components/adversaries/DeleteAdversaryConfirmationModal.vue.bkp
 create mode 100644 src/components/adversaries/DetailsTable.vue.bkp
 create mode 100644 src/components/adversaries/ImportModal.vue.bkp
 create mode 100644 src/stores/adversaryStore.js.bkp
 create mode 100644 src/utils/executorUtils.js
 create mode 100644 src/views/AdversariesView.vue.bkp

diff --git a/package-lock.json b/package-lock.json
index 86d4322..734dea4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -97,6 +97,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.2.tgz",
       "integrity": "sha512-A8pri1YJiC5UnkdrWcmfZTJTV85b4UXTAfImGmCfYmax4TR9Cw8sDS0MOk++Gp2mE/BefVJ5nwy5yzqNJbP/DQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.16.7",
@@ -1883,6 +1884,7 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
       "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
       "hasInstallScript": true,
+      "peer": true,
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "6.2.0"
       },
@@ -2802,6 +2804,7 @@
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
       "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3083,6 +3086,7 @@
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-28.1.0.tgz",
       "integrity": "sha512-zNKk0yhDZ6QUwfxh9k07GII6siNGMJWVUU49gmFj5gfdqDKLqa2RArXOF2CODp4Dr7dLxN2cvAV+667dGJ4b4w==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@jest/transform": "^28.1.0",
         "@types/babel__core": "^7.1.14",
@@ -3666,6 +3670,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
       "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "peer": true,
       "dependencies": {
         "d3-dispatch": "1 - 3",
         "d3-quadtree": "1 - 3",
@@ -4073,6 +4078,38 @@
         "esbuild-windows-arm64": "0.14.38"
       }
     },
+    "node_modules/esbuild-android-64": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.38.tgz",
+      "integrity": "sha512-aRFxR3scRKkbmNuGAK+Gee3+yFxkTJO/cx83Dkyzo4CnQl/2zVSurtG6+G86EQIZ+w+VYngVyK7P3HyTBKu3nw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-android-arm64": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.38.tgz",
+      "integrity": "sha512-L2NgQRWuHFI89IIZIlpAcINy9FvBk6xFVZ7xGdOwIm8VyhX1vNCEqUJO3DPSSy945Gzdg98cxtNt8Grv1CsyhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/esbuild-darwin-64": {
       "version": "0.14.38",
       "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.38.tgz",
@@ -4088,6 +4125,278 @@
         "node": ">=12"
       }
     },
+    "node_modules/esbuild-darwin-arm64": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.38.tgz",
+      "integrity": "sha512-eqF+OejMI3mC5Dlo9Kdq/Ilbki9sQBw3QlHW3wjLmsLh+quNfHmGMp3Ly1eWm981iGBMdbtSS9+LRvR2T8B3eQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-freebsd-64": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.38.tgz",
+      "integrity": "sha512-epnPbhZUt93xV5cgeY36ZxPXDsQeO55DppzsIgWM8vgiG/Rz+qYDLmh5ts3e+Ln1wA9dQ+nZmVHw+RjaW3I5Ig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-freebsd-arm64": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.38.tgz",
+      "integrity": "sha512-/9icXUYJWherhk+y5fjPI5yNUdFPtXHQlwP7/K/zg8t8lQdHVj20SqU9/udQmeUo5pDFHMYzcEFfJqgOVeKNNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-32": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.38.tgz",
+      "integrity": "sha512-QfgfeNHRFvr2XeHFzP8kOZVnal3QvST3A0cgq32ZrHjSMFTdgXhMhmWdKzRXP/PKcfv3e2OW9tT9PpcjNvaq6g==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-64": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.38.tgz",
+      "integrity": "sha512-uuZHNmqcs+Bj1qiW9k/HZU3FtIHmYiuxZ/6Aa+/KHb/pFKr7R3aVqvxlAudYI9Fw3St0VCPfv7QBpUITSmBR1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-arm": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.38.tgz",
+      "integrity": "sha512-FiFvQe8J3VKTDXG01JbvoVRXQ0x6UZwyrU4IaLBZeq39Bsbatd94Fuc3F1RGqPF5RbIWW7RvkVQjn79ejzysnA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-arm64": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.38.tgz",
+      "integrity": "sha512-HlMGZTEsBrXrivr64eZ/EO0NQM8H8DuSENRok9d+Jtvq8hOLzrxfsAT9U94K3KOGk2XgCmkaI2KD8hX7F97lvA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-mips64le": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.38.tgz",
+      "integrity": "sha512-qd1dLf2v7QBiI5wwfil9j0HG/5YMFBAmMVmdeokbNAMbcg49p25t6IlJFXAeLzogv1AvgaXRXvgFNhScYEUXGQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-ppc64le": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.38.tgz",
+      "integrity": "sha512-mnbEm7o69gTl60jSuK+nn+pRsRHGtDPfzhrqEUXyCl7CTOCLtWN2bhK8bgsdp6J/2NyS/wHBjs1x8aBWwP2X9Q==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-riscv64": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.38.tgz",
+      "integrity": "sha512-+p6YKYbuV72uikChRk14FSyNJZ4WfYkffj6Af0/Tw63/6TJX6TnIKE+6D3xtEc7DeDth1fjUOEqm+ApKFXbbVQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-s390x": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.38.tgz",
+      "integrity": "sha512-0zUsiDkGJiMHxBQ7JDU8jbaanUY975CdOW1YDrurjrM0vWHfjv9tLQsW9GSyEb/heSK1L5gaweRjzfUVBFoybQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-netbsd-64": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.38.tgz",
+      "integrity": "sha512-cljBAApVwkpnJZfnRVThpRBGzCi+a+V9Ofb1fVkKhtrPLDYlHLrSYGtmnoTVWDQdU516qYI8+wOgcGZ4XIZh0Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-openbsd-64": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.38.tgz",
+      "integrity": "sha512-CDswYr2PWPGEPpLDUO50mL3WO/07EMjnZDNKpmaxUPsrW+kVM3LoAqr/CE8UbzugpEiflYqJsGPLirThRB18IQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-sunos-64": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.38.tgz",
+      "integrity": "sha512-2mfIoYW58gKcC3bck0j7lD3RZkqYA7MmujFYmSn9l6TiIcAMpuEvqksO+ntBgbLep/eyjpgdplF7b+4T9VJGOA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-windows-32": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.38.tgz",
+      "integrity": "sha512-L2BmEeFZATAvU+FJzJiRLFUP+d9RHN+QXpgaOrs2klshoAm1AE6Us4X6fS9k33Uy5SzScn2TpcgecbqJza1Hjw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-windows-64": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.38.tgz",
+      "integrity": "sha512-Khy4wVmebnzue8aeSXLC+6clo/hRYeNIm0DyikoEqX+3w3rcvrhzpoix0S+MF9vzh6JFskkIGD7Zx47ODJNyCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-windows-arm64": {
+      "version": "0.14.38",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.38.tgz",
+      "integrity": "sha512-k3FGCNmHBkqdJXuJszdWciAH77PukEyDsdIryEHn9cKLQFxzhT39dSumeTuggaQcXY57UlmLGIkklWZo2qzHpw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -4133,6 +4442,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.16.0.tgz",
       "integrity": "sha512-MBndsoXY/PeVTDJeWsYj7kLZ5hQpJOfMYLsF6LicLHQWbRDG19lK5jOix4DPl8yY4SUFcE3txy86OzFLWT+yoA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint/eslintrc": "^1.3.0",
         "@humanwhocodes/config-array": "^0.9.2",
@@ -4778,6 +5088,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
       "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.4",
         "array.prototype.flat": "^1.2.5",
@@ -4832,6 +5143,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz",
       "integrity": "sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.16.3",
         "aria-query": "^4.2.2",
@@ -4885,6 +5197,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.30.0.tgz",
       "integrity": "sha512-RgwH7hjW48BleKsYyHK5vUAvxtE9SMPDKmcPRQgtRCYaZA0XQPt5FSkrU3nhz5ifzMZcA8opwmRJ2cmOO8tr5A==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.5",
         "array.prototype.flatmap": "^1.3.0",
@@ -4913,6 +5226,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz",
       "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -6263,6 +6577,7 @@
       "resolved": "https://registry.npmjs.org/jest/-/jest-28.1.0.tgz",
       "integrity": "sha512-TZR+tHxopPhzw3c3560IJXZWLNHgpcz1Zh0w5A65vynLGNcg/5pZ+VildAd7+XGOu6jd58XMY/HNn0IkZIXVXg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@jest/core": "^28.1.0",
         "import-local": "^3.0.2",
@@ -9081,6 +9396,7 @@
       "version": "2.9.15",
       "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.15.tgz",
       "integrity": "sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.14.27",
         "postcss": "^8.4.13",
@@ -9125,6 +9441,7 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
       "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.3.4",
         "@vue/compiler-sfc": "3.3.4",
diff --git a/src/components/abilities/CreateEditAbility.vue b/src/components/abilities/CreateEditAbility.vue
index 3c69833..89ea9c1 100644
--- a/src/components/abilities/CreateEditAbility.vue
+++ b/src/components/abilities/CreateEditAbility.vue
@@ -1,295 +1,613 @@
 <script setup>
-import { inject, ref, reactive, watch, onMounted } from "vue";
-import { storeToRefs } from "pinia";
-
-import { useAbilityStore } from "@/stores/abilityStore";
-import CodeEditor from "@/components/core/CodeEditor.vue";
-import AutoSuggest from "@/components/core/AutoSuggest.vue";
+import { inject, ref, reactive, watch, onMounted, computed, onBeforeUnmount } from 'vue';
+import { storeToRefs } from 'pinia';
+import cloneDeep from 'lodash/cloneDeep';
+import { useAbilityStore } from '@/stores/abilityStore';
+import CodeEditor from '@/components/core/CodeEditor.vue';
+import AutoSuggest from '@/components/core/AutoSuggest.vue';
 
 const props = defineProps({
   ability: Object,
-  active: Boolean,
-  creating: Boolean,
+  agent: Object,
+  operationFacts: Array,
+  abilityFacts: Array,
+  active: { type: Boolean, default: false },
+  creating: Boolean
+});
+function handleClickOutside(event) {
+  // Loop through each executor and close its dropdown if the click is outside
+  for (const executor of abilityToEdit.value.executors || []) {
+    const dropdownEl = document.querySelector(`.executor-payload-dropdown-${executor.key}`);
+    if (dropdownEl && !dropdownEl.contains(event.target)) {
+      executor.showPayloadDropdown = false;
+    }
+  }
+}
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
 });
-const emit = defineEmits(["close"]);
 
-const $api = inject("$api");
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
 
+
+const emit = defineEmits(['close', 'update']);
+const $api = inject('$api');
 const abilityStore = useAbilityStore();
-const { tactics, techniqueIds, techniqueNames, platforms, payloads } =
-  storeToRefs(abilityStore);
+const { tactics, techniqueIds, techniqueNames, platforms, payloads } = storeToRefs(abilityStore);
 
 let abilityToEdit = ref({});
+
 let validation = reactive({
-  name: "",
-  tactic: "",
-  techniqueId: "",
-  techniqueName: "",
-  executors: "",
+  name: '',
+  tactic: '',
+  techniqueId: '',
+  techniqueName: '',
+  executors: ''
 });
+const VALID_EXECUTORS = {
+  linux: ['sh'],
+  darwin: ['sh'],
+  windows: ['cmd', 'psh', 'pwsh']
+};
 
-onMounted(async () => {
-  await abilityStore.getAbilities($api);
-  await abilityStore.getPayloads($api);
-});
+const isPayloadDropdownOpen = ref(false);
+const userFactsMap = reactive({});
 
-watch(
-  () => props.ability,
-  () => {
-    setAbilityToEdit();
-  }
-);
+function getExecutorKey(executor) {
+  return executor.key;
+}
+function getUserFactsFor(executor, index = null) {
+  const executorKey = getExecutorKey(executor, index);
+  if (!userFactsMap[executorKey]) userFactsMap[executorKey] = [];
 
-function setAbilityToEdit() {
-  abilityToEdit.value = JSON.parse(JSON.stringify(props.ability));
-  if (!abilityToEdit.value.requirements) {
-    abilityToEdit.value.requirements = [];
+  const existingTraits = userFactsMap[executorKey].map(f => f.trait);
+  const cmdFields = getCommandFields(executor.command || '');
+
+  for (const trait of cmdFields) {
+    if (!existingTraits.includes(trait)) {
+      userFactsMap[executorKey].push({ trait, value: '' });
+    }
   }
+  return userFactsMap[executorKey];
+}
+const commandFields = computed(() => {
+  const cmd = abilityToEdit.value.executors?.[0]?.command || '';
+  if (!cmd) return [];
+  return [...new Set([...cmd.matchAll(/#{(.*?)}/gm)].map(m => m[1]))];
+});
+const predefinedFacts = computed(() => {
+  return commandFields.value
+    .map(trait => {
+      return props.abilityFacts?.find(f => f.trait === trait)
+    })
+    .filter(Boolean);
+});
+const selectedFacts = computed(() => {
+  const facts = [];
+  for (const [index, executor] of (abilityToEdit.value.executors || []).entries()) {
+    facts.push(...getUserFactsFor(executor, index));
+  }
+  return [...predefinedFacts.value, ...facts].filter(f => f.value?.trim());
+});
+const userFactsPerExecutor = computed(() => {
+  const map = {};
+  (abilityToEdit.value.executors || []).forEach((executor, index) => {
+    const key = getExecutorKey(executor, index);
+    map[key] = userFactsMap[key] || [];
+  });
+  return map;
+});
+const formattedPayloads = computed(() => {
+  return (Array.isArray(payloads.value) ? payloads.value : []).map(p => {
+    return typeof p === 'string' ? { payload_id: p, name: p } : p;
+  });
+});
+function isPredefinedTrait(trait) {
+  return predefinedFacts.value.some(pre => pre.trait === trait);
 }
-
 function addExecutor() {
   const baseExecutor = {
     cleanup: [],
     timeout: 60,
-    platform: "darwin",
+    platform: 'darwin',
     name: platforms.value.darwin[0],
     payloads: [],
     parsers: [],
+    key: uuidv4(),
+    showPayloadDropdown: false,
+    payloadSearch: ''
   };
-  if (!abilityToEdit.value.executors) {
-    abilityToEdit.value.executors = [baseExecutor];
-  } else {
-    abilityToEdit.value.executors.push(baseExecutor);
+  if (!abilityToEdit.value.executors) abilityToEdit.value.executors = [baseExecutor];
+  else abilityToEdit.value.executors.push(baseExecutor);
+}
+function setAbilityToEdit() {
+  console.info('[Ability.vue] setAbilityToEdit() with props.ability:', JSON.stringify(props.ability, null, 2));
+  abilityToEdit.value = cloneDeep(props.ability);
+  if (!abilityToEdit.value.requirements) abilityToEdit.value.requirements = [];
+  for (const executor of abilityToEdit.value.executors || []) {
+    if (executor.showPayloadDropdown === undefined) executor.showPayloadDropdown = false;
+    if (executor.payloadSearch === undefined) executor.payloadSearch = '';
+    if (!Array.isArray(executor.payloads)) executor.payloads = [];
   }
+  initializeUserFacts();
 }
+function initializeUserFacts() {
+  if (!abilityToEdit.value.executors) return;
+
+  const executorFacts = abilityToEdit.value.metadata?.executor_facts || {};
+  console.info('[Ability.vue] initializeUserFacts() → executor_facts:', JSON.stringify(executorFacts, null, 2));
+  console.info('[Ability.vue] executors:', JSON.stringify(abilityToEdit.value.executors, null, 2));
 
-function validateAndSave() {
-  validation.name = abilityToEdit.value.name ? "" : "Name cannot be empty";
-  validation.tactic = abilityToEdit.value.tactic
-    ? ""
-    : "Tactic cannot be empty";
-  validation.techniqueId = abilityToEdit.value.technique_id
-    ? ""
-    : "Technique ID cannot be empty";
-  validation.techniqueName = abilityToEdit.value.technique_name
-    ? ""
-    : "Technique Name cannot be empty";
-  validation.executors =
-    abilityToEdit.value.executors &&
-    abilityToEdit.value.executors.every(
-      (executor) =>
-        executor.platform &&
-        executor.name &&
-        executor.command &&
-        executor.timeout !== null &&
-        executor.timeout >= 0
-    )
-      ? ""
-      : "There must be at least 1 executor. Each executor must have a command, platform, timeout, and executor.";
-
-  if (Object.keys(validation).every((k) => !validation[k])) {
-    abilityStore.saveAbility($api, abilityToEdit.value, props.creating);
-    emit("close");
+  for (const [index, executor] of abilityToEdit.value.executors.entries()) {
+    console.info(`[Ability.vue] Initializing user facts for executor ${index}:`, executor);
+    const key = getExecutorKey(executor, index);
+    let savedFacts = executorFacts[key] || [];
+    if (!savedFacts.length && executorFacts[executor.platform]?.length) {
+      console.info(`[Ability.vue] No facts found for ${key}, falling back to platform key: ${executor.platform}`);
+      savedFacts = executorFacts[executor.platform];
+    }
+
+    if (!userFactsMap[key]) userFactsMap[key] = [];
+
+    // Merge saved values by trait
+    const existing = userFactsMap[key];
+    for (const saved of savedFacts) {
+      const idx = existing.findIndex(f => f.trait === saved.trait);
+      if (idx >= 0) {
+        existing[idx].value = saved.value;
+      } else {
+        existing.push({ trait: saved.trait, value: saved.value });
+      }
+    }
+    // Add any missing traits with empty value, but don't overwrite
+    const cmdFields = getCommandFields(executor.command || '');
+    for (const trait of cmdFields) {
+      if (!existing.some(f => f.trait === trait)) {
+        existing.push({ trait, value: '' });
+      }
+    }
   }
+    console.info('[Ability.vue] userFactsMap after initialization:', JSON.stringify(userFactsMap, null, 2));
 }
+function validateAndSaveAbility() {
+  // updateInjectedFacts();
+  validation.name = abilityToEdit.value.name ? '' : 'Name cannot be empty';
+  validation.tactic = abilityToEdit.value.tactic ? '' : 'Tactic cannot be empty';
+  validation.techniqueId = abilityToEdit.value.technique_id ? '' : 'Technique ID cannot be empty';
+  validation.techniqueName = abilityToEdit.value.technique_name ? '' : 'Technique Name cannot be empty';
+  validation.executors = abilityToEdit.value.executors?.length &&
+    abilityToEdit.value.executors.every(ex => ex.platform && ex.name && ex.command && ex.timeout >= 0)
+    ? '' : 'Executors are invalid or missing.';
+
+  if (Object.values(validation).every(v => !v)) {
+    // Build executor_facts structure
+    const executorFacts = {};
+
+    (abilityToEdit.value.executors || []).forEach((executor, idx) => {
+      const key = getExecutorKey(executor, idx);
+      const userFacts = userFactsMap[key]?.filter(f => f.trait && f.value?.trim()) || [];
+      if (userFacts.length > 0) {
+        executorFacts[key] = userFacts;
+      }
+    });
+    // ✅ Update the local object itself
+      abilityToEdit.value.metadata = {
+        ...(abilityToEdit.value.metadata || {}),
+        executor_facts: executorFacts
+      };
+
+    // Emit back to parent
+    emit('update', {
+      ...cloneDeep(abilityToEdit.value),
+      metadata: {
+        ...(abilityToEdit.value.metadata || {}),
+        executor_facts: executorFacts
+      }
+    });
 
+    emit('close');
+  }
+}
 async function deleteAbility() {
   await abilityStore.deleteAbility($api, abilityToEdit.value.ability_id);
-  emit("close");
+  emit('close');
 }
+function getCommandFields(command = '') {
+  if (!command) return [];
+  return [...new Set([...command.matchAll(/#{(.*?)}/gm)].map(m => m[1]))];
+}
+
+function filteredPayloads(searchQuery) {
+  const query = searchQuery?.toLowerCase() || '';
+  return formattedPayloads.value.filter(p => p.name.toLowerCase().includes(query)).map(p => p.payload_id);
+}
+function togglePayload(executor, payloadId) {
+  const list = executor.payloads;
+  const idx = list.indexOf(payloadId);
+  if (idx === -1) {
+    list.push(payloadId);
+  } else {
+    list.splice(idx, 1);
+  }
+}
+onMounted(async () => {
+  await abilityStore.getAbilities($api);
+  await abilityStore.getPayloads($api);
+  setAbilityToEdit();
+  console.log('Payloads loaded:', payloads.value);
+});
+watch(() => props.ability, () => {
+  setAbilityToEdit();
+});
+
 </script>
 
-<template lang="pug">
-.modal(:class="{ 'is-active': props.active }")
-    .modal-background(@click="emit('close')")
-    .modal-card 
-        header.modal-card-head 
-            p.modal-card-title {{ props.creating ? 'Create' : 'Edit' }} Ability
-        .modal-card-body.content.m-0
-            form
-                label.label Ability ID
-                .field(v-if="!props.creating")
-                    .control
-                        input.input(v-model="abilityToEdit.ability_id" disabled)
-                .field(v-else)
-                    p.is-italic ID will be automatically created
-                .field
-                    label.label Name
-                    .control
-                        input.input(v-model="abilityToEdit.name" :class="{ 'is-danger': validation.name }")
-                        p.has-text-danger {{ validation.name }}
-                .field
-                    label.label Description
-                    .control
-                        textarea.textarea(v-model="abilityToEdit.description")
-                .field
-                    label.label Tactic
-                    .control(v-if="tactics.length > 0")
-                        AutoSuggest(v-model="abilityToEdit.tactic" :items="tactics" :isDanger="!!validation.tactic" placeholder="Tactic")
-                        p.has-text-danger {{ validation.tactic }}
-                .field
-                    label.label Technique ID
-                    .control(v-if="techniqueIds.length > 0")
-                        AutoSuggest(v-model="abilityToEdit.technique_id" :items="techniqueIds" :isDanger="!!validation.techniqueId" placeholder="Technique ID")
-                        p.has-text-danger {{ validation.techniqueId }}
-                .field
-                    label.label Technique Name
-                    .control(v-if="techniqueNames.length > 0")
-                        AutoSuggest(v-model="abilityToEdit.technique_name" :items="techniqueNames" :isDanger="!!validation.techniqueName" placeholder="Technique Names")
-                        p.has-text-danger {{ validation.techniqueName }}
-                .field
-                    label.label Options
-                    .control
-                        input(type="checkbox" v-model="abilityToEdit.singleton")
-                        span.ml-3 Singleton
-                .field
-                    .control
-                        input(type="checkbox" v-model="abilityToEdit.repeatable")
-                        span.ml-3 Repeatable
-                .field
-                        .control
-                            input(type="checkbox" v-model="abilityToEdit.delete_payload")
-                            span.ml-3 Delete payload
-            p.has-text-centered Executors
-            p.has-text-danger {{ validation.executors }}
-            .has-text-centered
-                button.button.is-primary.mb-4(@click="addExecutor()")
-                    span.icon
-                        font-awesome-icon(icon="fas fa-plus")
-                    span Add Executor
-            .box(v-for="(executor, index) in abilityToEdit.executors" :key="index + (abilityToEdit.ability_id ? abilityToEdit.ability_id : 0)")
-                button.button.delete-btn(@click="abilityToEdit.executors.splice(index, 1)")
-                    span.icon
-                        font-awesome-icon(icon="fas fa-times")
-                form
-                    .field
-                        label.label Platform
-                        .control
-                            .select
-                                select(v-model="executor.platform")
-                                    option(v-for="platform in Object.keys(platforms)" :value="platform") {{ platform }}
-                    .field
-                        label.label Executor
-                        .control
-                            .select
-                                select(v-model="executor.name")
-                                    option(v-for="exec in platforms[executor.platform]" :value="exec") {{ exec }}
-                    .field.is-grouped.is-grouped-multiline
-                        label.label Payloads
-                        br
-                        .control(v-if="executor.payloads.length === 0" class="ml-4")
-                            span.tag.is-light No payloads
-                        .control(v-for="(payload, idx) in executor.payloads" class="ml-4")
-                          .tags.has-addons
-                            span.tag.is-primary {{ payload }}
-                            a.tag.is-delete(@click="executor.payloads.splice(idx, 1)")
-                    .field
-                        .control.mt-3
-                            div.select.is-small.is-multiple.is-fullwidth
-                              select.select.is-multiple(multiple size="6")
-                                template(v-for="payload in payloads")
-                                  option(v-if="executor.payloads.indexOf(payload) === -1" @click="executor.payloads.push(payload)") {{ payload }}
-                    .field
-                        label.label Command
-                        .control
-                            CodeEditor(v-model="executor.command" :key="index" language="bash" line-numbers)
-                    .field
-                        label.label Timeout
-                        .control
-                            input.input(type="number" v-model="executor.timeout")
-                    .field
-                      label.label Cleanup
-                      .field.has-addons(v-for="(cleanup, index) of executor.cleanup")
-                          .control.is-expanded
-                              CodeEditor(v-model="executor.cleanup[index]" :key="index" language="bash" line-numbers)
-                          .control
-                              a.button(@click="executor.cleanup.splice(index, 1)")
-                                  span.icon
-                                      font-awesome-icon(icon="fas fa-times")
-                      button.button(type="button" @click="executor.cleanup.push('')")
-                          span.icon
-                              font-awesome-icon(icon="fas fa-plus")
-                          span Add Cleanup Command
-                    .field
-                      label.label Requirements
-                      .field.has-addons(v-for="(requirement, index) of abilityToEdit.requirements")
-                          .control.is-expanded
-                            .field
-                              span Requirement Module
-                              .control
-                                input.input(type="text" v-model="abilityToEdit.requirements[index].module" placeholder="Requirement Module")
-                            .field
-                              span Source
-                              .field.has-addons(v-for="(relationship, r_index) of abilityToEdit.requirements[index].relationship_match")
-                                .field
-                                  .control
-                                    input.input(type="text" v-model="abilityToEdit.requirements[index].relationship_match[r_index].source" placeholder="Source")
-                                .field
-                                  .control
-                                    input.input(type="text" v-model="abilityToEdit.requirements[index].relationship_match[r_index].edge" placeholder="Edge [optional]")
-                                .field 
-                                  .control
-                                    input.input(type="text" v-model="abilityToEdit.requirements[index].relationship_match[r_index].target" placeholder="Target [optional]")
-                          .control
-                              a.button(@click="abilityToEdit.requirements.splice(index, 1)")
-                                  span.icon
-                                      font-awesome-icon(icon="fas fa-times")
-                      button.button(type="button" @click="abilityToEdit.requirements.push({module: '',relationship_match:[{source:'', edge:'',target:''}]})")
-                          span.icon
-                              font-awesome-icon(icon="fas fa-plus")
-                          span Add Requirement
-                    .field
-                      label.label Parsers
-                      .field.has-addons(v-for="(parser, index) of executor.parsers")
-                          .control.is-expanded
-                            .field
-                              span Parser Module
-                              .control
-                                input.input(type="text" v-model="executor.parsers[index].module" placeholder="Parser Module")
-                            .field
-                              span Output Source(s)
-                                .field.has-addons(v-for="(parserconfig, pc_index) of executor.parsers[index].parserconfigs")
-                                    .field
-                                      .control
-                                        input.input(type="text" v-model="executor.parsers[index].parserconfigs[pc_index].source" placeholder="Output Source")
-                                    .field
-                                      .control
-                                        input.input(type="text" v-model="executor.parsers[index].parserconfigs[pc_index].edge" placeholder="Output Edge [optional]")
-                                    .field
-                                      .control
-                                        input.input(type="text" v-model="executor.parsers[index].parserconfigs[pc_index].target" placeholder="Output Target [optional]")
-                          .control
-                              a.button(@click="executor.parsers.splice(index, 1)")
-                                  span.icon
-                                      font-awesome-icon(icon="fas fa-times")
-                      button.button(type="button" @click="executor.parsers.push({module: '', parserconfigs: [{source:'', edge:'', target:''}]})")
-                          span.icon
-                              font-awesome-icon(icon="fas fa-plus")
-                          span Add Parser
-            p.has-text-danger(v-if="abilityToEdit.executors && abilityToEdit.executors.length") {{ validation.executors }}
-            .has-text-centered
-                button.button.is-primary.mb-4(v-if="abilityToEdit.executors && abilityToEdit.executors.length" @click="addExecutor()")
-                    span.icon
-                        font-awesome-icon(icon="fas fa-plus")
-                    span Add Executor
-        footer.modal-card-foot.is-flex.is-justify-content-space-between
-            .is-flex
-                button.button(@click="setAbilityToEdit()") 
-                    span.icon
-                        font-awesome-icon(icon="fas fa-undo")
-                    span Reset
-                button.button.is-danger.is-outlined(v-if="!props.creating" @click="deleteAbility()") 
-                    span.icon
-                        font-awesome-icon(icon="fas fa-trash")
-                    span Delete
-            .is-flex
-                button.button(@click="emit('close')") Cancel 
-                button.button.is-primary(@click="validateAndSave()")
-                    span.icon
-                        font-awesome-icon(icon="fas fa-save") 
-                    span {{ props.creating ? "Create" : "Save" }} 
+<template>
+  <div class="modal" :class="{ 'is-active': props.active }">
+    <div class="modal-background" @click="$emit('close')"></div>
+    <div class="modal-card" style="width: 80%;">
+      <header class="modal-card-head">
+        <p class="modal-card-title">{{ props.creating ? 'Create' : 'Edit' }} Ability</p>
+      </header>
+
+        <section class="modal-card-body content m-0">
+          <form>
+            <!-- Basic Info -->
+            <label class="label">Ability ID</label>
+            <div class="field" v-if="!props.creating">
+              <div class="control">
+                <input class="input" v-model="abilityToEdit.ability_id" disabled />
+              </div>
+            </div>
+            <div class="field" v-else>
+              <p class="is-italic">ID will be automatically created</p>
+            </div>
+
+            <div class="field">
+              <label class="label">Name</label>
+              <div class="control">
+                <input class="input" v-model="abilityToEdit.name" :class="{ 'is-danger': validation.name }" />
+                <p class="has-text-danger">{{ validation.name }}</p>
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">Description</label>
+              <div class="control">
+                <textarea class="textarea" v-model="abilityToEdit.description"></textarea>
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">Tactic</label>
+              <div class="control" v-if="tactics.length > 0">
+                <AutoSuggest v-model="abilityToEdit.tactic" :items="tactics" :isDanger="!!validation.tactic" placeholder="Tactic" />
+                <p class="has-text-danger">{{ validation.tactic }}</p>
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">Technique ID</label>
+              <div class="control" v-if="techniqueIds.length > 0">
+                <AutoSuggest v-model="abilityToEdit.technique_id" :items="techniqueIds" :isDanger="!!validation.techniqueId" placeholder="Technique ID" />
+                <p class="has-text-danger">{{ validation.techniqueId }}</p>
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">Technique Name</label>
+              <div class="control" v-if="techniqueNames.length > 0">
+                <AutoSuggest v-model="abilityToEdit.technique_name" :items="techniqueNames" :isDanger="!!validation.techniqueName" placeholder="Technique Name" />
+                <p class="has-text-danger">{{ validation.techniqueName }}</p>
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">Options</label>
+              <div class="control">
+                <input type="checkbox" v-model="abilityToEdit.singleton" />
+                <span class="ml-3">Singleton</span>
+              </div>
+              <div class="control">
+                <input type="checkbox" v-model="abilityToEdit.repeatable" />
+                <span class="ml-3">Repeatable</span>
+              </div>
+              <div class="control">
+                <input type="checkbox" v-model="abilityToEdit.delete_payload" />
+                <span class="ml-3">Delete payload</span>
+              </div>
+            </div>
+          </form>
+          
+          <!-- Executors Section -->
+          <p class="has-text-centered has-text-weight-semibold is-size-5 mb-2 mt-4">Executors</p>
+          <p class="has-text-danger has-text-centered mb-3">{{ validation.executors }}</p>
+
+          <div class="has-text-centered mb-4">
+            <button type="button" class="button is-primary" @click="addExecutor">
+              <span class="icon"><font-awesome-icon icon="fas fa-plus" /></span>
+              <span>Add Executor</span>
+            </button>
+          </div>
+          <div
+            class="box"
+            v-for="(executor, index) in abilityToEdit.executors"
+            :key="index + (abilityToEdit.ability_id || 0)"
+          >
+            <!-- Delete button aligned top-right -->
+            <div class="is-flex is-justify-content-flex-end">
+              <button
+                type="button"
+                class="button is-small is-danger is-light"
+                @click="abilityToEdit.executors.splice(index, 1)"
+              >
+                <span class="icon is-small">
+                  <font-awesome-icon icon="fas fa-times" />
+                </span>
+              </button>
+            </div>
+            <!-- Flex row for Platform and Executor -->
+            <div class="is-flex" style="gap: 1.5rem;">
+              <!-- Platform -->
+              <div class="field" style="flex: 0 0 150px;">
+                <label class="label">Platform</label>
+                <div class="control">
+                  <div class="select is-fullwidth">
+                    <select v-model="executor.platform">
+                      <option v-for="platform in Object.keys(platforms)" :key="platform" :value="platform">
+                        {{ platform }}
+                      </option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Executor -->
+              <div class="field" style="flex: 0 0 150px;">
+                <label class="label">Executor</label>
+                <div class="control">
+                  <div class="select is-fullwidth">
+                    <select v-model="executor.name">
+                      <option v-for="exec in VALID_EXECUTORS[executor.platform] || []" :key="exec" :value="exec">
+                        {{ exec }}
+                    </option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- Payloads Dropdown + Selected Tags -->
+            <div class="field mt-4">
+              <label class="label">Payloads</label>
+
+              <!-- Dropdown trigger -->
+              <div class="dropdown"   :class="['executor-payload-dropdown-' + executor.key, { 'is-active': executor.showPayloadDropdown }]" style="width: 100%;">
+                <div class="dropdown-trigger">
+                  <button
+                    class="button is-fullwidth"
+                    @click="executor.showPayloadDropdown = !executor.showPayloadDropdown"
+                    type="button"
+                  >
+                    <span>Select payloads</span>
+                    <span class="icon is-small">
+                      <font-awesome-icon icon="fas fa-angle-down" />
+                    </span>
+                  </button>
+                </div>
+
+                <!-- Dropdown content -->
+                <div class="dropdown-menu" role="menu">
+                  <div class="dropdown-content px-2 py-2" style="max-height: 200px; overflow-y: auto;">
+                    <div class="control has-icons-left mb-2">
+                      <input
+                        v-model="executor.payloadSearch"
+                        class="input is-small"
+                        placeholder="Search payloads..."
+                      />
+                      <span class="icon is-left is-small">
+                        <font-awesome-icon icon="fas fa-search" />
+                      </span>
+                    </div>
+
+                    <div
+                      class="dropdown-item"
+                      v-for="payload in filteredPayloads(executor.payloadSearch)"
+                      :key="payload"
+                      @click.stop="togglePayload(executor, payload)"
+                      style="cursor: pointer;"
+                    >
+                      <label class="checkbox">
+                        <input
+                          type="checkbox"
+                          :checked="executor.payloads.includes(payload)"
+                          @change.stop
+                        />
+                        {{ payload }}
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Selected tags -->
+              <div class="field is-grouped is-grouped-multiline mt-3" style="margin-left: 9rem;">
+                <div
+                  class="control"
+                  v-for="(payload, idx) in executor.payloads"
+                  :key="payload"
+                >
+                  <div class="tags has-addons">
+                    <span class="tag is-primary is-light">{{ payload }}</span>
+                    <a class="tag is-delete" @click="executor.payloads.splice(idx, 1)"></a>
+                  </div>
+                </div>
+                <div class="control" v-if="executor.payloads.length === 0">
+                  <span class="tag is-light">No payloads</span>
+                </div>
+              </div>
+            </div>
+            <!-- Command and Facts -->
+            <div class="field mt-5">
+              <label class="label">Command</label>
+              <CodeEditor v-model="executor.command" language="bash" line-numbers :readonly="true" />
+            </div>
+
+            <div class="field" v-if="getCommandFields(executor.command).length">
+              <label class="label">Fact Templates</label>
+              <p>This ability needs facts in order to run properly. Provide at least one value for each fact.</p>
+              <details open>
+                <summary>
+                  <span class="has-text-weight-bold is-size-5 ml-2">Facts</span>
+                </summary>
+                <table class="mt-2">
+                  <tr>
+                    <th>Trait</th>
+                    <th>Value</th>
+                  </tr>
+                  <tr v-for="fact in predefinedFacts" :key="'predef-' + fact.trait">
+                    <td><span>{{ fact.trait }}</span></td>
+                    <td><span>{{ fact.value }}</span></td>
+                  </tr>
+                  <tr
+                    v-for="fact in userFactsPerExecutor[getExecutorKey(executor, index)].filter(f => !isPredefinedTrait(f.trait))"
+                    :key="'user-' + fact.trait"
+                  >
+                      <td>
+                        <span>{{ fact.trait }}</span>
+                        <font-awesome-icon
+                          icon="fa-exclamation-triangle"
+                          class="ml-2 has-text-warning"
+                          :class="{ 'is-invisible': !!fact.value }"
+                        />
+                      </td>
+                      <td>
+                        <input
+                          class="input"
+                          v-model="fact.value"
+                          placeholder="Enter a custom value"
+                        />
+                      </td>
+                    </tr>
+                </table>
+              </details>
+            </div>
+
+            <!-- Cleanup -->
+            <div class="field">
+              <label class="label">Cleanup</label>
+              <div class="field has-addons" v-for="(cleanup, cidx) in executor.cleanup" :key="cidx">
+                <div class="control is-expanded">
+                  <CodeEditor v-model="executor.cleanup[cidx]" :key="cidx" language="bash" line-numbers />
+                </div>
+                <div class="control">
+                  <a class="button" @click="executor.cleanup.splice(cidx, 1)">
+                    <span class="icon"><font-awesome-icon icon="fas fa-times" /></span>
+                  </a>
+                </div>
+              </div>
+              <button class="button" type="button" @click="executor.cleanup.push('')">
+                <span class="icon"><font-awesome-icon icon="fas fa-plus" /></span>
+                <span>Add Cleanup Command</span>
+              </button>
+            </div>
+
+            <div class="field">
+              <label class="label">Requirements</label>
+              <div class="field has-addons" v-for="(requirement, rIdx) in abilityToEdit.requirements" :key="rIdx">
+                <div class="control is-expanded">
+                  <input class="input" type="text" v-model="requirement.module" placeholder="Requirement Module" />
+                </div>
+                <div class="control">
+                  <a class="button" @click="abilityToEdit.requirements.splice(rIdx, 1)">
+                    <span class="icon"><font-awesome-icon icon="fas fa-times" /></span>
+                  </a>
+                </div>
+                <div class="field has-addons" v-for="(rel, relIdx) in requirement.relationship_match" :key="relIdx">
+                  <input class="input" type="text" v-model="rel.source" placeholder="Source" />
+                  <input class="input" type="text" v-model="rel.edge" placeholder="Edge [optional]" />
+                  <input class="input" type="text" v-model="rel.target" placeholder="Target [optional]" />
+                </div>
+              </div>
+              <button class="button" type="button" @click="abilityToEdit.requirements.push({ module: '', relationship_match: [{ source: '', edge: '', target: '' }] })">
+                <span class="icon"><font-awesome-icon icon="fas fa-plus" /></span>
+                <span>Add Requirement</span>
+              </button>
+            </div>
+
+            <div class="field">
+              <label class="label">Parsers</label>
+              <div class="field has-addons" v-for="(parser, pIdx) in executor.parsers" :key="pIdx">
+                <div class="control is-expanded">
+                  <input class="input" type="text" v-model="parser.module" placeholder="Parser Module" />
+                </div>
+                <div class="control">
+                  <a class="button" @click="executor.parsers.splice(pIdx, 1)">
+                    <span class="icon"><font-awesome-icon icon="fas fa-times" /></span>
+                  </a>
+                </div>
+                <div class="field has-addons" v-for="(cfg, cfgIdx) in parser.parserconfigs" :key="cfgIdx">
+                  <input class="input" type="text" v-model="cfg.source" placeholder="Output Source" />
+                  <input class="input" type="text" v-model="cfg.edge" placeholder="Output Edge [optional]" />
+                  <input class="input" type="text" v-model="cfg.target" placeholder="Output Target [optional]" />
+                </div>
+              </div>
+              <button class="button" type="button" @click="executor.parsers.push({ module: '', parserconfigs: [{ source: '', edge: '', target: '' }] })">
+                <span class="icon"><font-awesome-icon icon="fas fa-plus" /></span>
+                <span>Add Parser</span>
+              </button>
+            </div>
+          </div>
+          <!-- Footer -->
+          <footer class="modal-card-foot is-flex is-justify-content-space-between">
+            <div class="is-flex">
+              <button class="button" @click="setAbilityToEdit">
+                <span class="icon">
+                  <font-awesome-icon icon="fas fa-undo" />
+                </span>
+                <span>Reset</span>
+              </button>
+              <button class="button is-danger is-outlined" v-if="!props.creating" @click="deleteAbility">
+                <span class="icon">
+                  <font-awesome-icon icon="fas fa-trash" />
+                </span>
+                <span>Delete</span>
+              </button>
+            </div>
+            <div class="is-flex">
+              <button class="button" @click="emit('close')">Cancel</button>
+              <button class="button is-primary" @click="validateAndSaveAbility">
+                <span class="icon">
+                  <font-awesome-icon icon="fas fa-save" />
+                </span>
+                <span>{{ props.creating ? 'Create' : 'Save' }}</span>
+              </button>
+            </div>
+          </footer>
+        </section>
+      </div>
+      </div>
 </template>
 
+
+
+              
+                
+
+                
+            
+
+          
+ 
+              
+
+              
+
+              
+    
+
+
 <style scoped>
 .box {
   position: relative;
diff --git a/src/components/abilities/CreateEditAbility.vue.bkp b/src/components/abilities/CreateEditAbility.vue.bkp
new file mode 100644
index 0000000..3c69833
--- /dev/null
+++ b/src/components/abilities/CreateEditAbility.vue.bkp
@@ -0,0 +1,313 @@
+<script setup>
+import { inject, ref, reactive, watch, onMounted } from "vue";
+import { storeToRefs } from "pinia";
+
+import { useAbilityStore } from "@/stores/abilityStore";
+import CodeEditor from "@/components/core/CodeEditor.vue";
+import AutoSuggest from "@/components/core/AutoSuggest.vue";
+
+const props = defineProps({
+  ability: Object,
+  active: Boolean,
+  creating: Boolean,
+});
+const emit = defineEmits(["close"]);
+
+const $api = inject("$api");
+
+const abilityStore = useAbilityStore();
+const { tactics, techniqueIds, techniqueNames, platforms, payloads } =
+  storeToRefs(abilityStore);
+
+let abilityToEdit = ref({});
+let validation = reactive({
+  name: "",
+  tactic: "",
+  techniqueId: "",
+  techniqueName: "",
+  executors: "",
+});
+
+onMounted(async () => {
+  await abilityStore.getAbilities($api);
+  await abilityStore.getPayloads($api);
+});
+
+watch(
+  () => props.ability,
+  () => {
+    setAbilityToEdit();
+  }
+);
+
+function setAbilityToEdit() {
+  abilityToEdit.value = JSON.parse(JSON.stringify(props.ability));
+  if (!abilityToEdit.value.requirements) {
+    abilityToEdit.value.requirements = [];
+  }
+}
+
+function addExecutor() {
+  const baseExecutor = {
+    cleanup: [],
+    timeout: 60,
+    platform: "darwin",
+    name: platforms.value.darwin[0],
+    payloads: [],
+    parsers: [],
+  };
+  if (!abilityToEdit.value.executors) {
+    abilityToEdit.value.executors = [baseExecutor];
+  } else {
+    abilityToEdit.value.executors.push(baseExecutor);
+  }
+}
+
+function validateAndSave() {
+  validation.name = abilityToEdit.value.name ? "" : "Name cannot be empty";
+  validation.tactic = abilityToEdit.value.tactic
+    ? ""
+    : "Tactic cannot be empty";
+  validation.techniqueId = abilityToEdit.value.technique_id
+    ? ""
+    : "Technique ID cannot be empty";
+  validation.techniqueName = abilityToEdit.value.technique_name
+    ? ""
+    : "Technique Name cannot be empty";
+  validation.executors =
+    abilityToEdit.value.executors &&
+    abilityToEdit.value.executors.every(
+      (executor) =>
+        executor.platform &&
+        executor.name &&
+        executor.command &&
+        executor.timeout !== null &&
+        executor.timeout >= 0
+    )
+      ? ""
+      : "There must be at least 1 executor. Each executor must have a command, platform, timeout, and executor.";
+
+  if (Object.keys(validation).every((k) => !validation[k])) {
+    abilityStore.saveAbility($api, abilityToEdit.value, props.creating);
+    emit("close");
+  }
+}
+
+async function deleteAbility() {
+  await abilityStore.deleteAbility($api, abilityToEdit.value.ability_id);
+  emit("close");
+}
+</script>
+
+<template lang="pug">
+.modal(:class="{ 'is-active': props.active }")
+    .modal-background(@click="emit('close')")
+    .modal-card 
+        header.modal-card-head 
+            p.modal-card-title {{ props.creating ? 'Create' : 'Edit' }} Ability
+        .modal-card-body.content.m-0
+            form
+                label.label Ability ID
+                .field(v-if="!props.creating")
+                    .control
+                        input.input(v-model="abilityToEdit.ability_id" disabled)
+                .field(v-else)
+                    p.is-italic ID will be automatically created
+                .field
+                    label.label Name
+                    .control
+                        input.input(v-model="abilityToEdit.name" :class="{ 'is-danger': validation.name }")
+                        p.has-text-danger {{ validation.name }}
+                .field
+                    label.label Description
+                    .control
+                        textarea.textarea(v-model="abilityToEdit.description")
+                .field
+                    label.label Tactic
+                    .control(v-if="tactics.length > 0")
+                        AutoSuggest(v-model="abilityToEdit.tactic" :items="tactics" :isDanger="!!validation.tactic" placeholder="Tactic")
+                        p.has-text-danger {{ validation.tactic }}
+                .field
+                    label.label Technique ID
+                    .control(v-if="techniqueIds.length > 0")
+                        AutoSuggest(v-model="abilityToEdit.technique_id" :items="techniqueIds" :isDanger="!!validation.techniqueId" placeholder="Technique ID")
+                        p.has-text-danger {{ validation.techniqueId }}
+                .field
+                    label.label Technique Name
+                    .control(v-if="techniqueNames.length > 0")
+                        AutoSuggest(v-model="abilityToEdit.technique_name" :items="techniqueNames" :isDanger="!!validation.techniqueName" placeholder="Technique Names")
+                        p.has-text-danger {{ validation.techniqueName }}
+                .field
+                    label.label Options
+                    .control
+                        input(type="checkbox" v-model="abilityToEdit.singleton")
+                        span.ml-3 Singleton
+                .field
+                    .control
+                        input(type="checkbox" v-model="abilityToEdit.repeatable")
+                        span.ml-3 Repeatable
+                .field
+                        .control
+                            input(type="checkbox" v-model="abilityToEdit.delete_payload")
+                            span.ml-3 Delete payload
+            p.has-text-centered Executors
+            p.has-text-danger {{ validation.executors }}
+            .has-text-centered
+                button.button.is-primary.mb-4(@click="addExecutor()")
+                    span.icon
+                        font-awesome-icon(icon="fas fa-plus")
+                    span Add Executor
+            .box(v-for="(executor, index) in abilityToEdit.executors" :key="index + (abilityToEdit.ability_id ? abilityToEdit.ability_id : 0)")
+                button.button.delete-btn(@click="abilityToEdit.executors.splice(index, 1)")
+                    span.icon
+                        font-awesome-icon(icon="fas fa-times")
+                form
+                    .field
+                        label.label Platform
+                        .control
+                            .select
+                                select(v-model="executor.platform")
+                                    option(v-for="platform in Object.keys(platforms)" :value="platform") {{ platform }}
+                    .field
+                        label.label Executor
+                        .control
+                            .select
+                                select(v-model="executor.name")
+                                    option(v-for="exec in platforms[executor.platform]" :value="exec") {{ exec }}
+                    .field.is-grouped.is-grouped-multiline
+                        label.label Payloads
+                        br
+                        .control(v-if="executor.payloads.length === 0" class="ml-4")
+                            span.tag.is-light No payloads
+                        .control(v-for="(payload, idx) in executor.payloads" class="ml-4")
+                          .tags.has-addons
+                            span.tag.is-primary {{ payload }}
+                            a.tag.is-delete(@click="executor.payloads.splice(idx, 1)")
+                    .field
+                        .control.mt-3
+                            div.select.is-small.is-multiple.is-fullwidth
+                              select.select.is-multiple(multiple size="6")
+                                template(v-for="payload in payloads")
+                                  option(v-if="executor.payloads.indexOf(payload) === -1" @click="executor.payloads.push(payload)") {{ payload }}
+                    .field
+                        label.label Command
+                        .control
+                            CodeEditor(v-model="executor.command" :key="index" language="bash" line-numbers)
+                    .field
+                        label.label Timeout
+                        .control
+                            input.input(type="number" v-model="executor.timeout")
+                    .field
+                      label.label Cleanup
+                      .field.has-addons(v-for="(cleanup, index) of executor.cleanup")
+                          .control.is-expanded
+                              CodeEditor(v-model="executor.cleanup[index]" :key="index" language="bash" line-numbers)
+                          .control
+                              a.button(@click="executor.cleanup.splice(index, 1)")
+                                  span.icon
+                                      font-awesome-icon(icon="fas fa-times")
+                      button.button(type="button" @click="executor.cleanup.push('')")
+                          span.icon
+                              font-awesome-icon(icon="fas fa-plus")
+                          span Add Cleanup Command
+                    .field
+                      label.label Requirements
+                      .field.has-addons(v-for="(requirement, index) of abilityToEdit.requirements")
+                          .control.is-expanded
+                            .field
+                              span Requirement Module
+                              .control
+                                input.input(type="text" v-model="abilityToEdit.requirements[index].module" placeholder="Requirement Module")
+                            .field
+                              span Source
+                              .field.has-addons(v-for="(relationship, r_index) of abilityToEdit.requirements[index].relationship_match")
+                                .field
+                                  .control
+                                    input.input(type="text" v-model="abilityToEdit.requirements[index].relationship_match[r_index].source" placeholder="Source")
+                                .field
+                                  .control
+                                    input.input(type="text" v-model="abilityToEdit.requirements[index].relationship_match[r_index].edge" placeholder="Edge [optional]")
+                                .field 
+                                  .control
+                                    input.input(type="text" v-model="abilityToEdit.requirements[index].relationship_match[r_index].target" placeholder="Target [optional]")
+                          .control
+                              a.button(@click="abilityToEdit.requirements.splice(index, 1)")
+                                  span.icon
+                                      font-awesome-icon(icon="fas fa-times")
+                      button.button(type="button" @click="abilityToEdit.requirements.push({module: '',relationship_match:[{source:'', edge:'',target:''}]})")
+                          span.icon
+                              font-awesome-icon(icon="fas fa-plus")
+                          span Add Requirement
+                    .field
+                      label.label Parsers
+                      .field.has-addons(v-for="(parser, index) of executor.parsers")
+                          .control.is-expanded
+                            .field
+                              span Parser Module
+                              .control
+                                input.input(type="text" v-model="executor.parsers[index].module" placeholder="Parser Module")
+                            .field
+                              span Output Source(s)
+                                .field.has-addons(v-for="(parserconfig, pc_index) of executor.parsers[index].parserconfigs")
+                                    .field
+                                      .control
+                                        input.input(type="text" v-model="executor.parsers[index].parserconfigs[pc_index].source" placeholder="Output Source")
+                                    .field
+                                      .control
+                                        input.input(type="text" v-model="executor.parsers[index].parserconfigs[pc_index].edge" placeholder="Output Edge [optional]")
+                                    .field
+                                      .control
+                                        input.input(type="text" v-model="executor.parsers[index].parserconfigs[pc_index].target" placeholder="Output Target [optional]")
+                          .control
+                              a.button(@click="executor.parsers.splice(index, 1)")
+                                  span.icon
+                                      font-awesome-icon(icon="fas fa-times")
+                      button.button(type="button" @click="executor.parsers.push({module: '', parserconfigs: [{source:'', edge:'', target:''}]})")
+                          span.icon
+                              font-awesome-icon(icon="fas fa-plus")
+                          span Add Parser
+            p.has-text-danger(v-if="abilityToEdit.executors && abilityToEdit.executors.length") {{ validation.executors }}
+            .has-text-centered
+                button.button.is-primary.mb-4(v-if="abilityToEdit.executors && abilityToEdit.executors.length" @click="addExecutor()")
+                    span.icon
+                        font-awesome-icon(icon="fas fa-plus")
+                    span Add Executor
+        footer.modal-card-foot.is-flex.is-justify-content-space-between
+            .is-flex
+                button.button(@click="setAbilityToEdit()") 
+                    span.icon
+                        font-awesome-icon(icon="fas fa-undo")
+                    span Reset
+                button.button.is-danger.is-outlined(v-if="!props.creating" @click="deleteAbility()") 
+                    span.icon
+                        font-awesome-icon(icon="fas fa-trash")
+                    span Delete
+            .is-flex
+                button.button(@click="emit('close')") Cancel 
+                button.button.is-primary(@click="validateAndSave()")
+                    span.icon
+                        font-awesome-icon(icon="fas fa-save") 
+                    span {{ props.creating ? "Create" : "Save" }} 
+</template>
+
+<style scoped>
+.box {
+  position: relative;
+}
+
+.delete-btn {
+  position: absolute;
+  top: 18px;
+  right: 20px;
+}
+
+.modal-card {
+  width: 1000px;
+}
+
+@media screen and (max-width: 1050px) {
+  .modal-card {
+    width: 600px;
+  }
+}
+</style>
diff --git a/src/components/adversaries/DeleteAdversaryConfirmationModal.vue b/src/components/adversaries/DeleteAdversaryConfirmationModal.vue
index 22f642b..0851f1c 100644
--- a/src/components/adversaries/DeleteAdversaryConfirmationModal.vue
+++ b/src/components/adversaries/DeleteAdversaryConfirmationModal.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { ref, inject } from "vue";
-import { useCoreDisplayStore } from "../../stores/coreDisplayStore";
+import { useCoreDisplayStore } from "@/stores/coreDisplayStore";
 import { storeToRefs } from "pinia";
-import { useAdversaryStore } from "../../stores/adversaryStore";
+import { useAdversaryStore } from "@/stores/adversaryStore";
 
 const $api = inject("$api");
 
diff --git a/src/components/adversaries/DeleteAdversaryConfirmationModal.vue.bkp b/src/components/adversaries/DeleteAdversaryConfirmationModal.vue.bkp
new file mode 100644
index 0000000..22f642b
--- /dev/null
+++ b/src/components/adversaries/DeleteAdversaryConfirmationModal.vue.bkp
@@ -0,0 +1,31 @@
+<script setup>
+import { ref, inject } from "vue";
+import { useCoreDisplayStore } from "../../stores/coreDisplayStore";
+import { storeToRefs } from "pinia";
+import { useAdversaryStore } from "../../stores/adversaryStore";
+
+const $api = inject("$api");
+
+const adversaryStore = useAdversaryStore();
+const coreDisplayStore = useCoreDisplayStore();
+const { modals } = storeToRefs(coreDisplayStore);
+</script>
+
+<template lang="pug">
+.modal(:class="{ 'is-active': modals.adversaries.showDeleteConfirm }")
+    .modal-background(@click="modals.adversaries.showDeleteConfirm = false")
+    .modal-card 
+        header.modal-card-head 
+            p.modal-card-title Delete Adversary
+        .modal-card-body 
+            br
+            p.block Are you sure you want to delete this adversary? This action cannot be undone
+            br
+
+        footer.modal-card-foot.is-flex.is-justify-content-flex-end 
+            button.button(@click="modals.adversaries.showDeleteConfirm = false") Cancel
+            button.button.is-danger(@click="adversaryStore.deleteAdversary($api) && (modals.adversaries.showDeleteConfirm = false)")
+                span.icon
+                    font-awesome-icon(icon="fas fa-trash")
+                span Delete
+    </template>
\ No newline at end of file
diff --git a/src/components/adversaries/DetailsTable.vue b/src/components/adversaries/DetailsTable.vue
index c5a785a..fe13f6f 100644
--- a/src/components/adversaries/DetailsTable.vue
+++ b/src/components/adversaries/DetailsTable.vue
@@ -1,512 +1,796 @@
 <script setup>
+/**
+ * DetailsTable.vue
+ * Renders and edits an adversary's abilities list with dependency visualization,
+ * drag-and-drop reordering, fact-source filtering (dropdown is in the button row),
+ * and export/save utilities.
+ */
+
 import { storeToRefs } from "pinia";
-import { ref, reactive, watch, inject } from "vue";
+import { ref, reactive, watch, inject, onMounted } from "vue";
+import cloneDeep from "lodash/cloneDeep";
+import { v4 as uuidv4 } from "uuid";
 
-import { useAdversaryStore } from "@/stores/adversaryStore";
 import { useObjectiveStore } from "@/stores/objectiveStore";
 import { useCoreDisplayStore } from "@/stores/coreDisplayStore";
-import CreateEditAbility from "@/components/abilities/CreateEditAbility.vue";
+import { useAdversaryStore } from "@/stores/adversaryStore";
+import { useSourceStore } from "@/stores/sourceStore";
 import FactBreakdownModal from "@/components/adversaries/FactBreakdownModal.vue";
 import AddAbilitiesFromAdversaryModal from "@/components/adversaries/AddAbilitiesFromAdversaryModal.vue";
 import AbilitySelection from "@/components/abilities/AbilitySelection.vue";
 import DeleteAdversaryConfirmationModal from "./DeleteAdversaryConfirmationModal.vue";
+import { buildExecutorsFromFacts } from "@/utils/executorUtils";
 
 const $api = inject("$api");
+const emit = defineEmits(["ability-click", "update:abilities"]);
 
 const adversaryStore = useAdversaryStore();
-const { selectedAdversary, selectedAdversaryAbilities } = storeToRefs(adversaryStore);
+const { selectedAdversary } = storeToRefs(adversaryStore);
+
 const objectiveStore = useObjectiveStore();
 const { objectives } = storeToRefs(objectiveStore);
+
 const coreDisplayStore = useCoreDisplayStore();
 const { modals } = storeToRefs(coreDisplayStore);
 
-let isEditingName = ref(false);
-let validation = reactive({
-    name: ""
-});
-
-// Ability dependencies
-let undefinedAbilities = ref([]);
-let abilityDependencies = ref({});
-let factBreakdown = ref([]);
-let needsParser = ref([]);
-let isTacticBreakdownActive = ref(false);
-let onHoverLocks = ref([]);
-let onHoverUnlocks = ref([]);
-
-// Table row drag and drop
-let tableDragTarget = ref(null);
-let tableDragEndIndex = ref(null);
-let tableDragTargetIndex = ref(null);
-let tableDragHoverId = ref(null);
-
-// Abilities
-let selectedAbility = ref({});
+// Fact sources
+const sourceStore = useSourceStore();
+const { sources } = storeToRefs(sourceStore);
+const selectedSource = ref("");
+
+// Local view state
+const abilitiesReady = ref(false);
+const isEditingName = ref(false);
+const validation = reactive({ name: "" });
+
+// Ability dependency state
+const undefinedAbilities = ref([]);
+const abilityDependencies = ref({});
+const factBreakdown = ref([]);
+const needsParser = ref([]);
+const isTacticBreakdownActive = ref(false);
+const onHoverLocks = ref([]);
+const onHoverUnlocks = ref([]);
+
+// DnD state
+const tableDragTarget = ref(null);
+const tableDragEndIndex = ref(null);
+const tableDragTargetIndex = ref(null);
+const tableDragHoverId = ref(null);
 
 // Modals
-let showAbilitySelection = ref(false);
-let showCreateEditAbilityModal = ref(false);
-let showAddFromAdversary = ref(false);
-
-findAbilityDependencies();
-
-watch(selectedAdversaryAbilities, () => {
-    findAbilityDependencies();
+const showAbilitySelection = ref(false);
+const showAddFromAdversary = ref(false);
+
+// Template references this flag; define it locally
+const isCreatingNewAdversary = ref(false);
+
+// Props
+const props = defineProps({
+  abilities: {
+    type: Array,
+    required: true,
+  },
 });
-
+const localAbilities = ref([]);
+
+/**
+ * Decide whether to show a warning icon on an executor because required #{trait}
+ * placeholders in the command are not satisfied by provided facts.
+ */
+const shouldShowWarningIcon = (ability, executor) => {
+  const key = executor?.key;
+  if (!key) return false;
+
+  const facts = ability.metadata?.executor_facts?.[key] || [];
+  const executorCmd = executor.command || "";
+  const requiredTraits = [...executorCmd.matchAll(/#\{([^}]+)\}/g)].map((m) => m[1]);
+  if (requiredTraits.length === 0) return false;
+
+  const providedTraits = new Set(facts.map((f) => f.trait).filter(Boolean));
+  return requiredTraits.some((t) => !providedTraits.has(t));
+};
+
+/**
+ * Compute ability dependencies and fact coverage across the list.
+ * Populates:
+ *  - abilityDependencies (per-step enable/require types and links)
+ *  - factBreakdown (met/unmet/extra)
+ *  - needsParser (abilities with unmet requirements)
+ *  - undefinedAbilities (abilities missing definitions)
+ */
 function findAbilityDependencies() {
-    const types = {};
-    let factsCollected = [];
-    let factsRequired = [];
-    undefinedAbilities.value = [];
-
-    selectedAdversaryAbilities.value.forEach((ability) => {	
-        let requireTypes = [];
-        let enableTypes = [];
-
-        // Skip building out enable types and require types if ability is unknown
-        if (ability.ability_id !== undefined) {    
-            // Get all parser types from executors
-            ability.executors.forEach((executor) => {
-                executor.parsers.forEach((parser) => {
-                    enableTypes = enableTypes.concat(parser.parserconfigs.map((rel) => rel.source));
-                });
-            });
-            // Get all requirement types
-            ability.requirements.forEach((requirement) => {
-                requireTypes = requireTypes.concat(requirement.relationship_match.map((match) => match.source));
+  const types = {};
+  let factsCollected = [];
+  let factsRequired = [];
+  undefinedAbilities.value = [];
+
+  // Collect enable/require types per ability
+  localAbilities.value.forEach((ability) => {
+    let requireTypes = [];
+    let enableTypes = [];
+
+    if (ability.ability_id !== undefined) {
+      if (Array.isArray(ability.executors)) {
+        ability.executors.forEach((executor) => {
+          if (Array.isArray(executor.parsers)) {
+            executor.parsers.forEach((parser) => {
+              if (Array.isArray(parser.parserconfigs)) {
+                enableTypes = enableTypes.concat(
+                  parser.parserconfigs.map((rel) => rel.source)
+                );
+              }
             });
-        } else {
-            undefinedAbilities.value.push(ability.ability_id);
-        }
-
-        types[ability.ability_id] = {
-            enableTypes: [...new Set(enableTypes)],
-            requireTypes: [...new Set(requireTypes)]
-        };
-    });
-
-    selectedAdversaryAbilities.value.forEach((ability, index) => {
-        const enablesAbilityIds = [];
-        const requiresAbilityIds = [];
-        const requireTypesMet = [];
-
-        // For each parser, look at and forward for any ability it unlocks
-        types[ability.ability_id].enableTypes.forEach((key) => {
-            if(selectedAdversaryAbilities.value) {
-                for (let i = index; i < selectedAdversaryAbilities.value.length; i++) {
-                    if (types[selectedAdversaryAbilities.value[i].ability_id].requireTypes.indexOf(key) > -1) {
-                        enablesAbilityIds.push(selectedAdversaryAbilities.value[i].ability_id);
-                    }
-                }
-            }
+          }
         });
-
-        // For each requirement, look at and before for any ability to unlock it
-        types[ability.ability_id].requireTypes.forEach((requirement) => {
-            let requirementMet = false;
-            for (let i = index; i >= 0; i--) {
-                if (types[selectedAdversaryAbilities.value[i].ability_id].enableTypes.indexOf(requirement) > -1) {
-                    requiresAbilityIds.push(selectedAdversaryAbilities.value[i].ability_id);
-                    requirementMet = true;
-                }
-            }
-            requireTypesMet.push(requirementMet);
+      }
+      if (Array.isArray(ability.requirements)) {
+        ability.requirements.forEach((requirement) => {
+          if (Array.isArray(requirement.relationship_match)) {
+            requireTypes = requireTypes.concat(
+              requirement.relationship_match.map((match) => match.source)
+            );
+          }
         });
+      }
+    } else {
+      undefinedAbilities.value.push(ability.ability_id);
+    }
 
-        abilityDependencies.value[ability.ability_id] = {
-            // The ability IDs that this ability will enable
-            enablesAbilityIds: [...new Set(enablesAbilityIds)],
-            // The ability IDs that this ability is dependent on
-            requiresAbilityIds: [...new Set(requiresAbilityIds)],
-            // The names of the parser requirements this ability enables
-            enableTypes: types[ability.ability_id].enableTypes,
-            // The names of the requirements this ability needs from a parser
-            requireTypes: types[ability.ability_id].requireTypes,
-            // Same dimension as requireTypes, but true/false if requirement has been met
-            requireTypesMet: requireTypesMet,
-        };
-
-        // Update fact totals for fact breakdown
-        factsCollected = factsCollected.concat(types[ability.ability_id].enableTypes);
-        factsRequired = factsRequired.concat(types[ability.ability_id].requireTypes);
+    types[ability.step_uuid] = {
+      enableTypes: [...new Set(enableTypes)],
+      requireTypes: [...new Set(requireTypes)],
+    };
+  });
+
+  // Resolve cross-ability relationships (what enables/what requires)
+  localAbilities.value.forEach((ability, index) => {
+    const enablesAbilityIds = [];
+    const requiresAbilityIds = [];
+    const requireTypesMet = [];
+
+    // Forward search: which later abilities require facts we enable?
+    types[ability.step_uuid].enableTypes.forEach((key) => {
+      for (let i = index; i < localAbilities.value.length; i++) {
+        if (types[localAbilities.value[i].step_uuid].requireTypes.indexOf(key) > -1) {
+          enablesAbilityIds.push(localAbilities.value[i].step_uuid);
+        }
+      }
     });
 
-    factBreakdown.value = [];
-    factsCollected = [...new Set(factsCollected)];
-    factsRequired = [...new Set(factsRequired)];
-    factsRequired.forEach((fact) => {
-        factBreakdown.value.push({ fact: fact, type: factsCollected.includes(fact) ? 'met' : 'unmet' });
+    // Backward search: do earlier abilities provide the facts we need?
+    types[ability.step_uuid].requireTypes.forEach((requirement) => {
+      let requirementMet = false;
+      for (let i = index; i >= 0; i--) {
+        if (types[localAbilities.value[i].step_uuid].enableTypes.indexOf(requirement) > -1) {
+          requiresAbilityIds.push(localAbilities.value[i].step_uuid);
+          requirementMet = true;
+        }
+      }
+      requireTypesMet.push(requirementMet);
     });
-    factsCollected.filter(x => !factsRequired.includes(x)).forEach((fact) => {
-        factBreakdown.value.push({ fact: fact, type: 'extra' });
+
+    abilityDependencies.value[ability.step_uuid] = {
+      enablesAbilityIds: [...new Set(enablesAbilityIds)],
+      requiresAbilityIds: [...new Set(requiresAbilityIds)],
+      enableTypes: types[ability.step_uuid].enableTypes,
+      requireTypes: types[ability.step_uuid].requireTypes,
+      requireTypesMet,
+    };
+
+    factsCollected = factsCollected.concat(types[ability.step_uuid].enableTypes);
+    factsRequired = factsRequired.concat(types[ability.step_uuid].requireTypes);
+  });
+
+  // Build fact breakdown
+  factBreakdown.value = [];
+  factsCollected = [...new Set(factsCollected)];
+  factsRequired = [...new Set(factsRequired)];
+  factsRequired.forEach((fact) => {
+    factBreakdown.value.push({
+      fact,
+      type: factsCollected.includes(fact) ? "met" : "unmet",
     });
+  });
+  factsCollected
+    .filter((x) => !factsRequired.includes(x))
+    .forEach((fact) => factBreakdown.value.push({ fact, type: "extra" }));
 
-    hasMetAbilityDependencies();
+  hasMetAbilityDependencies();
 }
 
+/**
+ * Check if all ability dependencies are satisfied.
+ * Updates `needsParser` with names of abilities missing required facts.
+ * @returns {boolean} true if all dependencies are met, false otherwise
+ */
 function hasMetAbilityDependencies() {
-    let isMet = true;
-    needsParser.value = [];
-
-    Object.keys(abilityDependencies.value).forEach((abilityId) => {
-        if (!abilityDependencies.value[abilityId].requireTypesMet.every(((requirement) => requirement))) {
-            isMet = false;
-            try {
-                needsParser.value.push(selectedAdversaryAbilities.value.find((ability) => ability.ability_id === abilityId).name);
-            } catch {
-                needsParser.value.push();
-            }
-        }
-    });
+  let isMet = true;
+  needsParser.value = [];
+
+  Object.keys(abilityDependencies.value).forEach((step_uuid) => {
+    if (!abilityDependencies.value[step_uuid].requireTypesMet.every((requirement) => requirement)) {
+      isMet = false;
+      try {
+        const name = localAbilities.value.find((a) => a.step_uuid === step_uuid)?.name ?? "";
+        if (name) needsParser.value.push(name);
+      } catch {
+        /* no-op */
+      }
+    }
+  });
 
-    return isMet;
+  return isMet;
 }
 
+/**
+ * Return a detail about an ability’s executors: cleanup/parser/payload flags,
+ * requirements presence, or a processed platforms list with warning flags.
+ */
 function getExecutorDetail(detail, ability) {
-    const executorNameMap = new Map([
-        ['psh', 'powershell'],
-        ['pwsh', 'powershell core'],
-        ['sh', 'shell'],
-        ['cmd', 'commandline'],
-    ]);
-    const plats = [];
-    let hasCleanup = false;
-    let hasPayload = false;
-    let hasParser = false;
-
-    if(ability.executors) {
-        ability.executors.forEach((executor) => {
-            if (executor.cleanup.length > 0) hasCleanup = true;
-            if (executor.parsers.length > 0) hasParser = true;
-            if (executor.payloads.length > 0) hasPayload = true;
-            plats.push(`${executor.platform} (${executorNameMap.get(executor.name) || executor.name})`);
-        });
-    }
-
-    switch (detail) {
-        case 'cleanup':
-            return hasCleanup;
-        case 'parser':
-            return hasParser;
-        case 'payload':
-            return hasPayload;
-        case 'requirements':
-            if(ability.requirements){
-                return ability.requirements.length > 0;
-            }
-        case 'platforms':
-            return plats;
-        default:
-            return false;
+  const executorNameMap = new Map([
+    ["psh", "powershell"],
+    ["pwsh", "powershell core"],
+    ["sh", "shell"],
+    ["cmd", "commandline"],
+  ]);
+
+  let hasCleanup = false;
+  let hasPayload = false;
+  let hasParser = false;
+
+  if (ability.executors) {
+    ability.executors.forEach((executor) => {
+      if ((executor.cleanup || []).length > 0) hasCleanup = true;
+      if ((executor.parsers || []).length > 0) hasParser = true;
+      if ((executor.payloads || []).length > 0) hasPayload = true;
+      const _ = `${executor.platform} (${executorNameMap.get(executor.name) || executor.name})`;
+    });
+  }
+
+  switch (detail) {
+    case "cleanup":
+      return hasCleanup;
+    case "parser":
+      return hasParser;
+    case "payload":
+      return hasPayload;
+    case "requirements":
+      return Array.isArray(ability.requirements) && ability.requirements.length > 0;
+
+    case "platforms": {
+      const builtExecutors = buildExecutorsFromFacts(
+        ability.executors,
+        ability.metadata?.executor_facts || {}
+      );
+      return builtExecutors
+        .map((executor) => ({
+          platform: executor.platform,
+          name: executor.name,
+          key: executor.key,
+          hasWarning: shouldShowWarningIcon(ability, executor),
+        }))
+        .filter((e) => e.platform && e.name);
     }
+    default:
+      return false;
+  }
 }
 
+/**
+ * Build a tactic distribution array: [tactic, percent].
+ */
 function getTacticBreakdown() {
-    if (!selectedAdversaryAbilities.value) return;
-    let counts = {};
-    selectedAdversaryAbilities.value.forEach((ability) => {
-        counts[ability.tactic] ? counts[ability.tactic] += 1 : counts[ability.tactic] = 1;
+  if (!localAbilities.value) return;
+  const counts = {};
+  localAbilities.value.forEach((ability) => {
+    counts[ability.tactic] ? (counts[ability.tactic] += 1) : (counts[ability.tactic] = 1);
+  });
+
+  const total = Array.isArray(localAbilities.value) ? localAbilities.value.length : 0;
+  return Object.keys(counts)
+    .sort()
+    .map((tactic) => {
+      const percent = total ? Math.ceil((counts[tactic] / total) * 10000) / 100 : 0;
+      return [tactic, percent];
     });
-    return Object.keys(counts).sort().map((tactic) => {
-        let percent = Math.ceil(counts[tactic] / selectedAdversaryAbilities.value.length * 10000) / 100
-        return [tactic, percent]
-    })
 }
 
+/**
+ * Deterministic color from string using djb2.
+ */
 function hashStringToColor(str) {
-    let hash = 5381;
-    if(str) {
-        for (let i = 0; i < str.length; i++) {
-            hash = ((hash << 5) + hash) + str.charCodeAt(i);
-        }
-    }
-
-    let r = (hash & 0xFF0000) >> 16;
-    let g = (hash & 0x00FF00) >> 8;
-    let b = hash & 0x0000FF;
-    return "#" + ("0" + r.toString(16)).substr(-2) + ("0" + g.toString(16)).substr(-2) + ("0" + b.toString(16)).substr(-2);
+  let hash = 5381;
+  if (str) {
+    for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i);
+  }
+  const r = (hash & 0xff0000) >> 16;
+  const g = (hash & 0x00ff00) >> 8;
+  const b = (hash & 0x0000ff);
+  return (
+    "#" +
+    ("0" + r.toString(16)).slice(-2) +
+    ("0" + g.toString(16)).slice(-2) +
+    ("0" + b.toString(16)).slice(-2)
+  );
 }
 
-function setAbilityHover(abilityId) {
-    if (!abilityDependencies.value[abilityId]) return;
-    onHoverLocks.value = abilityDependencies.value[abilityId].requiresAbilityIds;
-    onHoverUnlocks.value = abilityDependencies.value[abilityId].enablesAbilityIds;
-    if (abilityDependencies.value[abilityId].requireTypes.length) onHoverUnlocks.value.push(abilityId);
-    if (abilityDependencies.value[abilityId].enableTypes.length) onHoverLocks.value.push(abilityId);
+/**
+ * Highlight related rows based on dependency graph for the hovered ability.
+ */
+function setAbilityHover(step_uuid) {
+  if (!abilityDependencies.value[step_uuid]) return;
+  onHoverLocks.value = abilityDependencies.value[step_uuid].requiresAbilityIds;
+  onHoverUnlocks.value = abilityDependencies.value[step_uuid].enablesAbilityIds;
+  if (abilityDependencies.value[step_uuid].requireTypes.length) onHoverUnlocks.value.push(step_uuid);
+  if (abilityDependencies.value[step_uuid].enableTypes.length) onHoverLocks.value.push(step_uuid);
 }
 
+/**
+ * Begin drag operation: capture the origin row and its index.
+ */
 function startAbilitySwap(event) {
-    tableDragTarget.value = event.target.parentNode;
-    tableDragTargetIndex.value = parseInt(tableDragTarget.value.children[1].children[0].children[0].innerHTML, 10);
+  const target = event?.target?.parentNode || null;
+  tableDragTarget.value = target;
+  tableDragTargetIndex.value = parseInt(
+    target?.children?.[1]?.children?.[0]?.children?.[0]?.innerHTML ?? "0",
+    10
+  );
 }
 
+/**
+ * Update the potential drop index while dragging.
+ */
 function swapAbilitiesHover(event) {
-    if (!event.target.parentNode.children[1]) return;
-    tableDragEndIndex.value = parseInt(event.target.parentNode.children[1].children[0].children[0].innerHTML, 10);
+  const parent = event?.target?.parentNode || null;
+  if (!parent?.children?.[1]) return;
+  tableDragEndIndex.value = parseInt(
+    parent.children[1].children[0].children[0].innerHTML ?? "0",
+    10
+  );
 }
 
+/**
+ * Apply the row swap using captured indices and reset highlights.
+ */
 function swapAbilities() {
-    const fromIndex = tableDragTargetIndex.value - 1;
-    const toIndex = tableDragEndIndex.value - 1;
-    const temp = selectedAdversaryAbilities.value[fromIndex]; 
-    selectedAdversaryAbilities.value.splice(fromIndex, 1); 
-    selectedAdversaryAbilities.value.splice(toIndex, 0, temp); 
-    tableDragHoverId.value = undefined;
-    tableDragEndIndex.value = undefined;
+  const fromIndex = (tableDragTargetIndex.value ?? 1) - 1;
+  const toIndex = (tableDragEndIndex.value ?? 1) - 1;
+  if (fromIndex < 0 || toIndex < 0) return;
+
+  const temp = localAbilities.value[fromIndex];
+  localAbilities.value.splice(fromIndex, 1);
+  localAbilities.value.splice(toIndex, 0, temp);
+
+  tableDragHoverId.value = null;
+  tableDragEndIndex.value = null;
+
+  // Notify parent of new order
+  emit("update:abilities", [...localAbilities.value]);
 }
 
+/**
+ * Emit selection event to allow parent to open the editor modal.
+ */
 function selectAbility(ability) {
-    selectedAbility.value = ability;
-    showCreateEditAbilityModal.value = true;
+  emit("ability-click", ability);
 }
 
-function validateAndSaveAdversary() {
-    if (!selectedAdversary.value.name || !selectedAdversary.value.description) {
-        isEditingName.value = true;
-        validation.name = "Name and description can't be blank";
-        return;
-    }
-    adversaryStore.saveSelectedAdversary($api);
-    validation.name = "";
-    isEditingName.value = false;
+/**
+ * Persist the selected adversary profile via store.
+ */
+async function validateAndSaveAdversary() {
+  await adversaryStore.saveSelectedAdversary($api);
 }
 
+/**
+ * Export the current adversary profile as YAML (best-effort).
+ */
 function exportAdversary() {
-    let yaml = `id: ${selectedAdversary.value.adversary_id}\n`;
-    yaml += `name: ${selectedAdversary.value.name}\n`;
-    yaml += `description: ${selectedAdversary.value.description}\n`;
-    yaml += `objective: ${selectedAdversary.value.objective}\n`;
-    yaml += `atomic_ordering:\n`;
-    selectedAdversaryAbilities.value.forEach((ability) => yaml += `- ${ability.ability_id}\n`);
-    yaml += `abilities:\n`;
-    selectedAdversaryAbilities.value.forEach((ability) => {
-        yaml += ` ${ability.ability_id}:\n`;
-        yaml += `  name:  ${ability.name}\n`;
-        yaml += `  tactic:  ${ability.tactic}\n`;
-        yaml += `  technique_name:  "${ability.technique_name}"\n`;
-        yaml += `  technique_id:  ${ability.technique_id}\n`;
-        yaml += `  executors: \n`;
-        ability.executors.forEach((executor) => {
-            yaml += `   - ${executor.name}:\n`;
-            yaml += `     platform: ${executor.platform}\n`;
-            yaml += `     command: |\n       ${executor.command.replaceAll("\n", "\n       ")}\n`;
-        });
+  if (!selectedAdversary.value) return;
+
+  let yaml = `id: ${selectedAdversary.value.adversary_id}\n`;
+  yaml += `name: ${selectedAdversary.value.name}\n`;
+  yaml += `description: ${selectedAdversary.value.description}\n`;
+  yaml += `objective: ${selectedAdversary.value.objective}\n`;
+  yaml += `atomic_ordering:\n`;
+  localAbilities.value.forEach((ability) => (yaml += `- ${ability.ability_id}\n`));
+  yaml += `abilities:\n`;
+  localAbilities.value.forEach((ability) => {
+    yaml += ` ${ability.ability_id}:\n`;
+    yaml += `  name:  ${ability.name}\n`;
+    yaml += `  tactic:  ${ability.tactic}\n`;
+    yaml += `  technique_name:  "${ability.technique_name}"\n`;
+    yaml += `  technique_id:  ${ability.technique_id}\n`;
+    yaml += `  executors: \n`;
+    ability.executors.forEach((executor) => {
+      yaml += `   - ${executor.name}:\n`;
+      yaml += `     platform: ${executor.platform}\n`;
+      yaml += `     command: |\n       ${String(executor.command || "").replaceAll("\n", "\n       ")}\n`;
     });
-
-    const blob = new Blob([yaml], { type: 'application/x-yaml' })
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.style.display = 'none';
-    a.href = url;
-    a.download = `${selectedAdversary.value.name}.yaml`;
-    document.body.appendChild(a);
-    a.click();
-    window.URL.revokeObjectURL(url);
+  });
+
+  const blob = new Blob([yaml], { type: "application/x-yaml" });
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.style.display = "none";
+  a.href = url;
+  a.download = `${selectedAdversary.value.name}.yaml`;
+  document.body.appendChild(a);
+  a.click();
+  window.URL.revokeObjectURL(url);
 }
 
+/**
+ * Append a single ability to the local list and notify parent.
+ */
 function addAbilityToAdversary(ability) {
-    selectedAdversaryAbilities.value.push(ability);
-    showAbilitySelection.value = false;
+  if (!ability.step_uuid) ability.step_uuid = uuidv4();
+  localAbilities.value.push(ability);
+  emit("update:abilities", [...localAbilities.value]);
+  showAbilitySelection.value = false;
 }
 
+/**
+ * Append multiple abilities (from another adversary) and notify parent.
+ */
 function addAbilitiesFromAdversary(abilities) {
-    abilities.forEach((ability) => addAbilityToAdversary(ability));
-    showAddFromAdversary.value = false;
+  abilities.forEach((ability) => {
+    if (!ability.step_uuid) ability.step_uuid = uuidv4();
+    addAbilityToAdversary(ability);
+  });
+  showAddFromAdversary.value = false;
+}
+
+/**
+ * Remove an ability by index and notify parent.
+ */
+function deleteAbility(index) {
+  localAbilities.value.splice(index, 1);
+  emit("update:abilities", [...localAbilities.value]);
+}
+
+/**
+ * Rebuild executors for all abilities using stored executor_facts.
+ * Ensures platform/name/key are mapped consistently for UI/tooling.
+ */
+function rebuildExecutors() {
+  try {
+    localAbilities.value.forEach((ability) => {
+      const executorFacts = ability?.metadata?.executor_facts;
+      if (!executorFacts) return;
+
+      const rebuiltExecutors = buildExecutorsFromFacts(ability.executors, executorFacts);
+      if (Array.isArray(rebuiltExecutors)) {
+        ability.executors = rebuiltExecutors;
+      }
+    });
+  } catch (err) {
+    console.warn("[AutomationDetailsTable] Skipped executors rebuild:", err);
+  }
+}
+/**
+ * Get CSS classes for a given ability row based on drag-and-drop and dependency state.
+ * @param ability 
+ */
+function getRowClass(ability) {
+  return {
+    'row-hover-above': ability.step_uuid === tableDragHoverId.value && tableDragHoverId.value != undefined && tableDragEndIndex.value < tableDragTargetIndex.value,
+    'row-hover-below': ability.step_uuid === tableDragHoverId.value && tableDragHoverId.value != undefined && tableDragEndIndex.value > tableDragTargetIndex.value,
+    'orange-row': needsParser.value.indexOf(ability.name) > -1,
+    'row-hover': ability.step_uuid === tableDragHoverId.value && tableDragHoverId.value != undefined,
+    'red-row-unclickable': undefinedAbilities.value.indexOf(ability.step_uuid) > -1
+  };
+}
+
+/** Fetch sources and set a sensible default ("basic" if present) */
+async function getSources() {
+  try {
+    await sourceStore.getSources($api);
+    const basic = sources.value?.find(s => s?.name === "basic");
+    if (basic) selectedSource.value = basic;
+  } catch (error) {
+    console.error("Error getting sources", error);
+  }
 }
+
+/**
+ * Load initial data required by the table and prime computed caches.
+ * - Objectives
+ * - Local abilities copy (with dependency graph)
+ * - Fact sources (default to "basic" if present)
+ */
+onMounted(async () => {
+  await objectiveStore.getObjectives($api);
+  localAbilities.value = cloneDeep(props.abilities);
+  findAbilityDependencies();
+  rebuildExecutors();
+  abilitiesReady.value = true;
+  await getSources();
+});
+
+/**
+ * Keep local state in sync with incoming prop changes.
+ */
+watch(
+  () => props.abilities,
+  (newAbilities) => {
+    localAbilities.value = cloneDeep(newAbilities);
+    findAbilityDependencies();
+    rebuildExecutors();
+    abilitiesReady.value = true;
+  },
+  { immediate: true }
+);
 </script>
 
 <template lang="pug">
-//- Header
-.content(v-if="!isEditingName" @click="isEditingName = true")
-    h3.pointer {{ selectedAdversary.name }} {{ selectedAdversary.name === "New adversary" ? "(click to edit)" : "" }}
-    p.pointer {{ selectedAdversary.description }}
-form.mb-4(v-else)
+.automation-editor( v-if="selectedAdversary?.adversary_id || isCreatingNewAdversary" )
+  //- Header
+  .content(v-if="selectedAdversary && !isEditingName")
+    h3.pointer(@click="isEditingName = true") {{ selectedAdversary.name }} {{ selectedAdversary.name === "New adversary" ? "(click to edit)" : "" }}
+    p.pointer(@click="isEditingName = true") {{ selectedAdversary.description }}
+  .form(v-if="isEditingName")
     .field
-        .control
-            input.input.is-large(v-model="selectedAdversary.name" placeholder="Adversary name")
+      .control
+        input.input.is-large(v-model="selectedAdversary.name" placeholder="Adversary name")
     .field
-        .control
-            input.input(v-model="selectedAdversary.description" placeholder="Adversary description")
+      .control
+        input.input(v-model="selectedAdversary.description" placeholder="Adversary description")
     p.help.has-text-danger.mb-3(v-if="validation.name") {{ validation.name }}
     button.button.is-primary(@click="isEditingName = false") Done
 
-//- Button row
-.is-flex.is-align-items-center
-    button.button.mr-2(@click="showAbilitySelection = true")
-        span.icon 
-            font-awesome-icon(icon="fas fa-plus") 
-        span Add Ability 
-    button.button.mr-2(@click="showAddFromAdversary = true")
-        span.icon 
-            font-awesome-icon(icon="fas fa-plus") 
-        span Add Adversary 
-    button.button.mr-2(@click="modals.adversaries.showFactBreakdown = true")
-        span.icon 
-            font-awesome-icon(icon="fas fa-unlock-alt") 
-        span Fact Breakdown
-    .vr
-    span.mr-2 Objective: 
-    .field.mb-0.mr-2
-        .control
-            .select
-                select(v-model="selectedAdversary.objective")
-                    option(v-for="objective in objectives" :value="objective.id") {{ objective.name }}
-    .vr 
-    button.button.mr-2(@click="exportAdversary()")
-        span.icon 
-            font-awesome-icon(icon="fas fa-file-export") 
-        span Export 
-    button.button.is-success.mr-2(@click="validateAndSaveAdversary()") 
-        span.icon
-            font-awesome-icon(icon="fas fa-save")
-        span Save 
-    button.button.is-danger.is-outlined.mr-2(@click="modals.adversaries.showDeleteConfirm = true") 
-        span.icon
-            font-awesome-icon(icon="fas fa-trash")
-        span Delete
-
-//- Tactic breakdown
-.tactic-breakdown.pt-4.pb-4(title="Click to expand/collapse" @click="isTacticBreakdownActive = !isTacticBreakdownActive")
-    span.tactic-item(v-for="tactic in getTacticBreakdown()" :class="{ 'active': isTacticBreakdownActive }" :style="`width: ${tactic[1]}%; background-color: ${hashStringToColor(tactic[0])};`" v-tooltip="tactic[0]") {{ `${tactic[0]}  ${tactic[1]}%` }}
-
-//- Ability table
-table.table.is-striped.is-fullwidth.is-narrow
+  //- Button row (grid: left | center | right)
+  .toolbar(v-if="selectedAdversary && !isEditingName")
+    //- Left buttons
+    .toolbar-left.is-flex.is-align-items-center
+        button.button.mr-2(@click="showAbilitySelection = true")
+            span.icon
+                font-awesome-icon(icon="fas fa-plus")
+            span Add Ability
+        button.button.mr-2(@click="showAddFromAdversary = true")
+            span.icon
+                font-awesome-icon(icon="fas fa-plus")
+            span Add Adversary
+        .vr.mx-3
+    .toolbar-center.is-flex.is-align-items-center
+        // Facts group
+        .field.is-grouped.is-align-items-center.mr-2.mb-0
+            .control
+                span.toolbar-label.mr-2 Facts:
+            .control
+                .select
+                    select(v-model="selectedSource")
+                        option(disabled value="") Choose a Fact Source
+                        option(v-for="source in sources" :key="source.id" :value="source") {{ `${source.name}` }}
+            .control
+                button.button(@click="modals.adversaries.showFactBreakdown = true")
+                    span.icon
+                        font-awesome-icon(icon="fas fa-unlock-alt")
+                    span Fact Breakdown
+
+        .vr.mx-2
+
+        // Objective group
+        .field.is-grouped.is-align-items-center.mb-0
+            .control
+                span.toolbar-label.mr-2 Objective:
+            .control
+                .select
+                    select(v-model="selectedAdversary.objective")
+                        option(v-for="objective in objectives" :key="objective.id" :value="objective.id") {{ objective.name }}
+
+    // Right-aligned actions
+    .toolbar-right.is-flex.is-align-items-center
+        .vr.mx-3
+        button.button.mr-2(@click="exportAdversary()")
+            span.icon
+                font-awesome-icon(icon="fas fa-file-export")
+            span Export
+        button.button.is-success.mr-2(@click="validateAndSaveAdversary()")
+            span.icon
+                font-awesome-icon(icon="fas fa-save")
+            span Save
+        button.button.is-danger.is-outlined(@click="modals.adversaries.showDeleteConfirm = true")
+            span.icon
+                font-awesome-icon(icon="fas fa-trash")
+            span Delete
+
+  //- Tactic breakdown
+  .tactic-breakdown.pt-4.pb-4(title="Click to expand/collapse" @click="isTacticBreakdownActive = !isTacticBreakdownActive")
+    span.tactic-item(
+      v-for="tactic in getTacticBreakdown()"
+      :class="{ 'active': isTacticBreakdownActive }"
+      :style="`width: ${tactic[1]}%; background-color: ${hashStringToColor(tactic[0])};`"
+      v-tooltip="tactic[0]"
+    ) {{ `${tactic[0]}  ${tactic[1]}%` }}
+
+  //- Ability table
+  table.table.is-striped.is-fullwidth.is-narrow
     thead
-        tr
-            th
-            th Ordering 
-            th Name 
-            th Tactic
-            th Technique
-            th Executors
-            th Requires 
-            th Unlocks 
-            th Payload 
-            th Cleanup 
-            th
+      tr
+        th
+        th Ordering
+        th Name
+        th Tactic
+        th Technique
+        th Executors
+        th Requires
+        th Unlocks
+        th Payload
+        th Cleanup
+        th
     tbody
-        tr.pointer(
-            v-for="(ability, index) in selectedAdversaryAbilities"
-            :class="{ 'row-hover-above': ability.ability_id === tableDragHoverId && tableDragHoverId != undefined && tableDragEndIndex < tableDragTargetIndex, 'row-hover-below': ability.ability_id === tableDragHoverId && tableDragHoverId != undefined && tableDragEndIndex > tableDragTargetIndex, 'orange-row': needsParser.indexOf(ability.name) > -1, 'row-hover': ability.ability_id === tableDragHoverId && tableDragHoverId != undefined, 'red-row-unclickable': undefinedAbilities.indexOf(ability.ability_id) > -1}" 
-            @click="selectAbility(ability)"
-            @mouseenter="setAbilityHover(ability.ability_id)"
-            @mouseleave="onHoverLocks = []; onHoverUnlocks = [];"
+      tr.pointer(
+        v-for="(ability, index) in abilities"
+        :class="getRowClass(ability)"
+        @click="selectAbility(ability)"
+        @mouseenter="setAbilityHover(ability.step_uuid)"
+        @mouseleave="onHoverLocks = []; onHoverUnlocks = [];"
+        )
+        td.drag.is-flex.is-align-items-center.is-justify-content-center(
+          @click.stop
+          draggable="true"
+          @dragenter="tableDragHoverId = ability.step_uuid"
+          @dragstart="startAbilitySwap"
+          @dragover.prevent="swapAbilitiesHover"
+          @dragend="swapAbilities"
+        )
+          span &#9776;
+        td
+          .icon-text
+            span {{ index + 1 }}
+            span.icon.has-text-danger(v-if="!ability.step_uuid")
+              font-awesome-icon(icon="fas fa-ban")
+            span.icon.has-text-warning(v-if="needsParser.indexOf(ability.name) > -1")
+              font-awesome-icon(icon="fas fa-exclamation-triangle")
+        td {{ ability?.step_uuid ? ability?.name || 'Unnamed' : "Undefined Ability" }}
+        td
+          span(:style="`border-bottom: 2px ridge ${hashStringToColor(ability.tactic)}`") {{ ability.tactic }}
+        td {{ ability.technique_name }}
+        td
+          span.icon-wrapper(
+            v-for="(executor, index) in getExecutorDetail('platforms', ability)"
+            v-tooltip="`${executor.platform} (${executor.name})`"
+          )
+            font-awesome-icon(
+              :icon="executor.platform.includes('windows') ? 'fab fa-windows' : executor.platform.includes('darwin') ? 'fab fa-apple' : 'fab fa-linux'"
+              class="executor-icon"
+            )
+            font-awesome-icon(
+              v-if="executor.hasWarning"
+              icon="fa-exclamation-triangle"
+              class="warning-icon"
             )
-            td.drag.is-flex.is-align-items-center.is-justify-content-center(@click.stop draggable="true" @dragenter="tableDragHoverId = ability.ability_id" @dragstart="startAbilitySwap" @dragover.prevent="swapAbilitiesHover" @dragend="swapAbilities")
-                span &#9776;
-            td 
-                .icon-text 
-                    span {{ index + 1 }}
-                    span.icon.has-text-danger(v-if="!ability.ability_id")
-                        font-awesome-icon(icon="fas fa-ban")
-                    span.icon.has-text-warning(v-if="needsParser.indexOf(ability.name) > -1")
-                        font-awesome-icon(icon="fas fa-exclamation-triangle") 
-            td {{ ability.ability_id ? ability.name : "Undefined Ability" }}
-            td 
-                span(:style="`border-bottom: 2px ridge ${hashStringToColor(ability.tactic)}`") {{ ability.tactic }}
-            td {{ ability.technique_name }}
-            td 
-                span(v-for="platform in getExecutorDetail('platforms', ability)" v-tooltip="platform")
-                    span.icon.is-small.mr-2
-                        font-awesome-icon(v-if="platform.includes('windows')" icon="fab fa-windows")
-                        font-awesome-icon(v-if="platform.includes('darwin')" icon="fab fa-apple")
-                        font-awesome-icon(v-if="platform.includes('linux')" icon="fab fa-linux")
-            td.has-text-centered(:class="{ 'unlock': onHoverUnlocks.indexOf(ability.ability_id) > -1 }")
-                span(v-if="abilityDependencies[ability.ability_id] && getExecutorDetail('requirements', ability)" v-tooltip="`This ability has requirements: (${abilityDependencies[ability.ability_id].requireTypes})`")
-                    span.icon.is-small
-                        font-awesome-icon(icon="fas fa-lock") 
-            td.has-text-centered(:class="{ 'lock': onHoverLocks.indexOf(ability.ability_id) > -1 }")
-                span(v-if="abilityDependencies[ability.ability_id] && getExecutorDetail('parser', ability)" v-tooltip="`This ability unlocks other abilities: (${abilityDependencies[ability.ability_id].enableTypes})`")
-                    span.icon.is-small
-                        font-awesome-icon(icon="fas fa-key")
-            td.has-text-centered 
-                span(v-if="getExecutorDetail('payload', ability)" v-tooltip="'This ability uses a payload'")
-                    span.icon.is-small
-                        font-awesome-icon(icon="fas fa-weight-hanging")
-            td.has-text-centered
-                span(v-if="getExecutorDetail('cleanup', ability)" v-tooltip="'This ability can clean itself up'")
-                    span.icon.is-small
-                        font-awesome-icon(icon="fas fa-trash")
-            td.has-text-centered
-                button.delete(@click.stop="selectedAdversaryAbilities.splice(index, 1)")
-
-.container.has-text-centered(v-if="!selectedAdversaryAbilities.length")
+        td.has-text-centered(:class="{ 'unlock': onHoverUnlocks.indexOf(ability.step_uuid) > -1 }")
+          span(
+            v-if="abilityDependencies[ability.step_uuid] && getExecutorDetail('parser', ability)"
+            v-tooltip="`This ability has requirements: (${abilityDependencies[ability.step_uuid].requireTypes})`"
+          )
+            span.icon.is-small
+              font-awesome-icon(icon="fas fa-lock")
+        td.has-text-centered(:class="{ 'lock': onHoverLocks.indexOf(ability.step_uuid) > -1 }")
+          span(
+            v-if="abilityDependencies[ability.step_uuid] && getExecutorDetail('parser', ability)"
+            v-tooltip="`This ability unlocks other abilities: (${abilityDependencies[ability.step_uuid].enableTypes})`"
+          )
+            span.icon.is-small
+              font-awesome-icon(icon="fas fa-key")
+        td.has-text-centered
+          span(v-if="getExecutorDetail('payload', ability)" v-tooltip="'This ability uses a payload'")
+            span.icon.is-small
+              font-awesome-icon(icon="fas fa-weight-hanging")
+        td.has-text-centered
+          span(v-if="getExecutorDetail('cleanup', ability)" v-tooltip="'This ability can clean itself up'")
+            span.icon.is-small
+              font-awesome-icon(icon="fas fa-trash")
+        td.has-text-centered
+          button.delete(@click.stop="deleteAbility(index)")
+
+  .container.has-text-centered(
+    v-if="abilitiesReady && Array.isArray(localAbilities.value) && !localAbilities.value.length"
+  )
     p This profile has no abilities
-.icon-text(v-if="needsParser.length")
+    .icon-text(v-if="Array.isArray(needsParser) && needsParser.length")
     span.icon.has-text-warning
-        font-awesome-icon(icon="fas fa-exclamation-triangle")
+      font-awesome-icon(icon="fas fa-exclamation-triangle")
     span One or more of the abilities have unmet requirements, which may result in a failed operation if ran sequentially.
-.icon-text.mt-2(v-if="undefinedAbilities.length")
-    span.icon.has-text-danger 
-        font-awesome-icon(icon="fas fa-ban") 
+    .icon-text.mt-2(v-if="Array.isArray(undefinedAbilities) && undefinedAbilities.length")
+    span.icon.has-text-danger
+      font-awesome-icon(icon="fas fa-ban")
     span One or more of the referenced abilities are not defined
 
-//- Modals
-AbilitySelection(:active="showAbilitySelection" @select="addAbilityToAdversary" @close="showAbilitySelection = false" :canCreate="true")
-
-CreateEditAbility(:ability="selectedAbility" :active="showCreateEditAbilityModal" :creating="false" @close="showCreateEditAbilityModal = false")
-
-FactBreakdownModal(:breakdown="factBreakdown")
-
-AddAbilitiesFromAdversaryModal(:active="showAddFromAdversary" @select="addAbilitiesFromAdversary" @close="showAddFromAdversary = false")
-
-DeleteAdversaryConfirmationModal
+  //- Modals
+  AbilitySelection(:active="showAbilitySelection" @select="addAbilityToAdversary" @close="showAbilitySelection = false" :canCreate="true")
+  FactBreakdownModal(:breakdown="factBreakdown")
+  AddAbilitiesFromAdversaryModal(:active="showAddFromAdversary" @select="addAbilitiesFromAdversary" @close="showAddFromAdversary = false")
+  DeleteAdversaryConfirmationModal
 </template>
 
 <style scoped>
-.drag {
-    cursor: grab;
-}
+.drag { cursor: grab; }
 
 .red-row-unclickable {
-    pointer-events: none;
-    font-weight: bold;
-    border: 3px solid #8B0000;
+  pointer-events: none;
+  font-weight: bold;
+  border: 3px solid #8B0000;
 }
 
-.lock {
-    background-color: blueviolet !important;
-}
-.unlock {
-    background-color: coral !important;
-}
-
-.orange-row {
-    border: 2px solid orange;
-}
-
-.row-hover {
-    background-color: #484848 !important;
-}
+.lock { background-color: blueviolet !important; }
+.unlock { background-color: coral !important; }
 
-.row-hover-above {
-  border-top: 3px solid green;
-}
+.orange-row { border: 2px solid orange; }
 
-.row-hover-below {
-  border-bottom: 3px solid green;
-}
+.row-hover { background-color: #484848 !important; }
+.row-hover-above { border-top: 3px solid green; }
+.row-hover-below { border-bottom: 3px solid green; }
 
 .tactic-breakdown {
-    display: table;
-    width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    transform-style: preserve-3d;
+  display: table;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transform-style: preserve-3d;
 }
-
 .tactic-item {
-    display: table-cell;
-    line-height: 8px;
-    text-indent: -9999px;
-    border-bottom: none !important;
+  display: table-cell;
+  line-height: 8px;
+  text-indent: -9999px;
+  border-bottom: none !important;
 }
 .tactic-item.active {
-    line-height: 30px;
-    text-indent: 6px;
-    font-size: .7em;
+  line-height: 30px;
+  text-indent: 6px;
+  font-size: .7em;
+}
+.icon-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.25rem;
 }
+.executor-icon {
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+}
+.warning-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 0.7rem;
+  color: orange;
+  z-index: 2;
+  pointer-events: none;
+}
+/* Center group  */
+.toolbar-center .field.is-grouped {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0;
+}
+.toolbar-label {
+  font-size: 1.0rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+/* Toolbar grid: left | center | right */
+.toolbar {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr; /* center column auto-sized, sides flex */
+  align-items: center;
+  column-gap: 1rem;
+  width: 100%;
+}
+
+/* Right group hugs the right edge; center block stays centered */
+.toolbar-right { justify-self: end; }
+.toolbar-center { justify-self: center; }
+
+
+.field.is-grouped .control + .control { margin-left: 0.5rem; }
+
 </style>
diff --git a/src/components/adversaries/DetailsTable.vue.bkp b/src/components/adversaries/DetailsTable.vue.bkp
new file mode 100644
index 0000000..c5a785a
--- /dev/null
+++ b/src/components/adversaries/DetailsTable.vue.bkp
@@ -0,0 +1,512 @@
+<script setup>
+import { storeToRefs } from "pinia";
+import { ref, reactive, watch, inject } from "vue";
+
+import { useAdversaryStore } from "@/stores/adversaryStore";
+import { useObjectiveStore } from "@/stores/objectiveStore";
+import { useCoreDisplayStore } from "@/stores/coreDisplayStore";
+import CreateEditAbility from "@/components/abilities/CreateEditAbility.vue";
+import FactBreakdownModal from "@/components/adversaries/FactBreakdownModal.vue";
+import AddAbilitiesFromAdversaryModal from "@/components/adversaries/AddAbilitiesFromAdversaryModal.vue";
+import AbilitySelection from "@/components/abilities/AbilitySelection.vue";
+import DeleteAdversaryConfirmationModal from "./DeleteAdversaryConfirmationModal.vue";
+
+const $api = inject("$api");
+
+const adversaryStore = useAdversaryStore();
+const { selectedAdversary, selectedAdversaryAbilities } = storeToRefs(adversaryStore);
+const objectiveStore = useObjectiveStore();
+const { objectives } = storeToRefs(objectiveStore);
+const coreDisplayStore = useCoreDisplayStore();
+const { modals } = storeToRefs(coreDisplayStore);
+
+let isEditingName = ref(false);
+let validation = reactive({
+    name: ""
+});
+
+// Ability dependencies
+let undefinedAbilities = ref([]);
+let abilityDependencies = ref({});
+let factBreakdown = ref([]);
+let needsParser = ref([]);
+let isTacticBreakdownActive = ref(false);
+let onHoverLocks = ref([]);
+let onHoverUnlocks = ref([]);
+
+// Table row drag and drop
+let tableDragTarget = ref(null);
+let tableDragEndIndex = ref(null);
+let tableDragTargetIndex = ref(null);
+let tableDragHoverId = ref(null);
+
+// Abilities
+let selectedAbility = ref({});
+
+// Modals
+let showAbilitySelection = ref(false);
+let showCreateEditAbilityModal = ref(false);
+let showAddFromAdversary = ref(false);
+
+findAbilityDependencies();
+
+watch(selectedAdversaryAbilities, () => {
+    findAbilityDependencies();
+});
+
+function findAbilityDependencies() {
+    const types = {};
+    let factsCollected = [];
+    let factsRequired = [];
+    undefinedAbilities.value = [];
+
+    selectedAdversaryAbilities.value.forEach((ability) => {	
+        let requireTypes = [];
+        let enableTypes = [];
+
+        // Skip building out enable types and require types if ability is unknown
+        if (ability.ability_id !== undefined) {    
+            // Get all parser types from executors
+            ability.executors.forEach((executor) => {
+                executor.parsers.forEach((parser) => {
+                    enableTypes = enableTypes.concat(parser.parserconfigs.map((rel) => rel.source));
+                });
+            });
+            // Get all requirement types
+            ability.requirements.forEach((requirement) => {
+                requireTypes = requireTypes.concat(requirement.relationship_match.map((match) => match.source));
+            });
+        } else {
+            undefinedAbilities.value.push(ability.ability_id);
+        }
+
+        types[ability.ability_id] = {
+            enableTypes: [...new Set(enableTypes)],
+            requireTypes: [...new Set(requireTypes)]
+        };
+    });
+
+    selectedAdversaryAbilities.value.forEach((ability, index) => {
+        const enablesAbilityIds = [];
+        const requiresAbilityIds = [];
+        const requireTypesMet = [];
+
+        // For each parser, look at and forward for any ability it unlocks
+        types[ability.ability_id].enableTypes.forEach((key) => {
+            if(selectedAdversaryAbilities.value) {
+                for (let i = index; i < selectedAdversaryAbilities.value.length; i++) {
+                    if (types[selectedAdversaryAbilities.value[i].ability_id].requireTypes.indexOf(key) > -1) {
+                        enablesAbilityIds.push(selectedAdversaryAbilities.value[i].ability_id);
+                    }
+                }
+            }
+        });
+
+        // For each requirement, look at and before for any ability to unlock it
+        types[ability.ability_id].requireTypes.forEach((requirement) => {
+            let requirementMet = false;
+            for (let i = index; i >= 0; i--) {
+                if (types[selectedAdversaryAbilities.value[i].ability_id].enableTypes.indexOf(requirement) > -1) {
+                    requiresAbilityIds.push(selectedAdversaryAbilities.value[i].ability_id);
+                    requirementMet = true;
+                }
+            }
+            requireTypesMet.push(requirementMet);
+        });
+
+        abilityDependencies.value[ability.ability_id] = {
+            // The ability IDs that this ability will enable
+            enablesAbilityIds: [...new Set(enablesAbilityIds)],
+            // The ability IDs that this ability is dependent on
+            requiresAbilityIds: [...new Set(requiresAbilityIds)],
+            // The names of the parser requirements this ability enables
+            enableTypes: types[ability.ability_id].enableTypes,
+            // The names of the requirements this ability needs from a parser
+            requireTypes: types[ability.ability_id].requireTypes,
+            // Same dimension as requireTypes, but true/false if requirement has been met
+            requireTypesMet: requireTypesMet,
+        };
+
+        // Update fact totals for fact breakdown
+        factsCollected = factsCollected.concat(types[ability.ability_id].enableTypes);
+        factsRequired = factsRequired.concat(types[ability.ability_id].requireTypes);
+    });
+
+    factBreakdown.value = [];
+    factsCollected = [...new Set(factsCollected)];
+    factsRequired = [...new Set(factsRequired)];
+    factsRequired.forEach((fact) => {
+        factBreakdown.value.push({ fact: fact, type: factsCollected.includes(fact) ? 'met' : 'unmet' });
+    });
+    factsCollected.filter(x => !factsRequired.includes(x)).forEach((fact) => {
+        factBreakdown.value.push({ fact: fact, type: 'extra' });
+    });
+
+    hasMetAbilityDependencies();
+}
+
+function hasMetAbilityDependencies() {
+    let isMet = true;
+    needsParser.value = [];
+
+    Object.keys(abilityDependencies.value).forEach((abilityId) => {
+        if (!abilityDependencies.value[abilityId].requireTypesMet.every(((requirement) => requirement))) {
+            isMet = false;
+            try {
+                needsParser.value.push(selectedAdversaryAbilities.value.find((ability) => ability.ability_id === abilityId).name);
+            } catch {
+                needsParser.value.push();
+            }
+        }
+    });
+
+    return isMet;
+}
+
+function getExecutorDetail(detail, ability) {
+    const executorNameMap = new Map([
+        ['psh', 'powershell'],
+        ['pwsh', 'powershell core'],
+        ['sh', 'shell'],
+        ['cmd', 'commandline'],
+    ]);
+    const plats = [];
+    let hasCleanup = false;
+    let hasPayload = false;
+    let hasParser = false;
+
+    if(ability.executors) {
+        ability.executors.forEach((executor) => {
+            if (executor.cleanup.length > 0) hasCleanup = true;
+            if (executor.parsers.length > 0) hasParser = true;
+            if (executor.payloads.length > 0) hasPayload = true;
+            plats.push(`${executor.platform} (${executorNameMap.get(executor.name) || executor.name})`);
+        });
+    }
+
+    switch (detail) {
+        case 'cleanup':
+            return hasCleanup;
+        case 'parser':
+            return hasParser;
+        case 'payload':
+            return hasPayload;
+        case 'requirements':
+            if(ability.requirements){
+                return ability.requirements.length > 0;
+            }
+        case 'platforms':
+            return plats;
+        default:
+            return false;
+    }
+}
+
+function getTacticBreakdown() {
+    if (!selectedAdversaryAbilities.value) return;
+    let counts = {};
+    selectedAdversaryAbilities.value.forEach((ability) => {
+        counts[ability.tactic] ? counts[ability.tactic] += 1 : counts[ability.tactic] = 1;
+    });
+    return Object.keys(counts).sort().map((tactic) => {
+        let percent = Math.ceil(counts[tactic] / selectedAdversaryAbilities.value.length * 10000) / 100
+        return [tactic, percent]
+    })
+}
+
+function hashStringToColor(str) {
+    let hash = 5381;
+    if(str) {
+        for (let i = 0; i < str.length; i++) {
+            hash = ((hash << 5) + hash) + str.charCodeAt(i);
+        }
+    }
+
+    let r = (hash & 0xFF0000) >> 16;
+    let g = (hash & 0x00FF00) >> 8;
+    let b = hash & 0x0000FF;
+    return "#" + ("0" + r.toString(16)).substr(-2) + ("0" + g.toString(16)).substr(-2) + ("0" + b.toString(16)).substr(-2);
+}
+
+function setAbilityHover(abilityId) {
+    if (!abilityDependencies.value[abilityId]) return;
+    onHoverLocks.value = abilityDependencies.value[abilityId].requiresAbilityIds;
+    onHoverUnlocks.value = abilityDependencies.value[abilityId].enablesAbilityIds;
+    if (abilityDependencies.value[abilityId].requireTypes.length) onHoverUnlocks.value.push(abilityId);
+    if (abilityDependencies.value[abilityId].enableTypes.length) onHoverLocks.value.push(abilityId);
+}
+
+function startAbilitySwap(event) {
+    tableDragTarget.value = event.target.parentNode;
+    tableDragTargetIndex.value = parseInt(tableDragTarget.value.children[1].children[0].children[0].innerHTML, 10);
+}
+
+function swapAbilitiesHover(event) {
+    if (!event.target.parentNode.children[1]) return;
+    tableDragEndIndex.value = parseInt(event.target.parentNode.children[1].children[0].children[0].innerHTML, 10);
+}
+
+function swapAbilities() {
+    const fromIndex = tableDragTargetIndex.value - 1;
+    const toIndex = tableDragEndIndex.value - 1;
+    const temp = selectedAdversaryAbilities.value[fromIndex]; 
+    selectedAdversaryAbilities.value.splice(fromIndex, 1); 
+    selectedAdversaryAbilities.value.splice(toIndex, 0, temp); 
+    tableDragHoverId.value = undefined;
+    tableDragEndIndex.value = undefined;
+}
+
+function selectAbility(ability) {
+    selectedAbility.value = ability;
+    showCreateEditAbilityModal.value = true;
+}
+
+function validateAndSaveAdversary() {
+    if (!selectedAdversary.value.name || !selectedAdversary.value.description) {
+        isEditingName.value = true;
+        validation.name = "Name and description can't be blank";
+        return;
+    }
+    adversaryStore.saveSelectedAdversary($api);
+    validation.name = "";
+    isEditingName.value = false;
+}
+
+function exportAdversary() {
+    let yaml = `id: ${selectedAdversary.value.adversary_id}\n`;
+    yaml += `name: ${selectedAdversary.value.name}\n`;
+    yaml += `description: ${selectedAdversary.value.description}\n`;
+    yaml += `objective: ${selectedAdversary.value.objective}\n`;
+    yaml += `atomic_ordering:\n`;
+    selectedAdversaryAbilities.value.forEach((ability) => yaml += `- ${ability.ability_id}\n`);
+    yaml += `abilities:\n`;
+    selectedAdversaryAbilities.value.forEach((ability) => {
+        yaml += ` ${ability.ability_id}:\n`;
+        yaml += `  name:  ${ability.name}\n`;
+        yaml += `  tactic:  ${ability.tactic}\n`;
+        yaml += `  technique_name:  "${ability.technique_name}"\n`;
+        yaml += `  technique_id:  ${ability.technique_id}\n`;
+        yaml += `  executors: \n`;
+        ability.executors.forEach((executor) => {
+            yaml += `   - ${executor.name}:\n`;
+            yaml += `     platform: ${executor.platform}\n`;
+            yaml += `     command: |\n       ${executor.command.replaceAll("\n", "\n       ")}\n`;
+        });
+    });
+
+    const blob = new Blob([yaml], { type: 'application/x-yaml' })
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.style.display = 'none';
+    a.href = url;
+    a.download = `${selectedAdversary.value.name}.yaml`;
+    document.body.appendChild(a);
+    a.click();
+    window.URL.revokeObjectURL(url);
+}
+
+function addAbilityToAdversary(ability) {
+    selectedAdversaryAbilities.value.push(ability);
+    showAbilitySelection.value = false;
+}
+
+function addAbilitiesFromAdversary(abilities) {
+    abilities.forEach((ability) => addAbilityToAdversary(ability));
+    showAddFromAdversary.value = false;
+}
+</script>
+
+<template lang="pug">
+//- Header
+.content(v-if="!isEditingName" @click="isEditingName = true")
+    h3.pointer {{ selectedAdversary.name }} {{ selectedAdversary.name === "New adversary" ? "(click to edit)" : "" }}
+    p.pointer {{ selectedAdversary.description }}
+form.mb-4(v-else)
+    .field
+        .control
+            input.input.is-large(v-model="selectedAdversary.name" placeholder="Adversary name")
+    .field
+        .control
+            input.input(v-model="selectedAdversary.description" placeholder="Adversary description")
+    p.help.has-text-danger.mb-3(v-if="validation.name") {{ validation.name }}
+    button.button.is-primary(@click="isEditingName = false") Done
+
+//- Button row
+.is-flex.is-align-items-center
+    button.button.mr-2(@click="showAbilitySelection = true")
+        span.icon 
+            font-awesome-icon(icon="fas fa-plus") 
+        span Add Ability 
+    button.button.mr-2(@click="showAddFromAdversary = true")
+        span.icon 
+            font-awesome-icon(icon="fas fa-plus") 
+        span Add Adversary 
+    button.button.mr-2(@click="modals.adversaries.showFactBreakdown = true")
+        span.icon 
+            font-awesome-icon(icon="fas fa-unlock-alt") 
+        span Fact Breakdown
+    .vr
+    span.mr-2 Objective: 
+    .field.mb-0.mr-2
+        .control
+            .select
+                select(v-model="selectedAdversary.objective")
+                    option(v-for="objective in objectives" :value="objective.id") {{ objective.name }}
+    .vr 
+    button.button.mr-2(@click="exportAdversary()")
+        span.icon 
+            font-awesome-icon(icon="fas fa-file-export") 
+        span Export 
+    button.button.is-success.mr-2(@click="validateAndSaveAdversary()") 
+        span.icon
+            font-awesome-icon(icon="fas fa-save")
+        span Save 
+    button.button.is-danger.is-outlined.mr-2(@click="modals.adversaries.showDeleteConfirm = true") 
+        span.icon
+            font-awesome-icon(icon="fas fa-trash")
+        span Delete
+
+//- Tactic breakdown
+.tactic-breakdown.pt-4.pb-4(title="Click to expand/collapse" @click="isTacticBreakdownActive = !isTacticBreakdownActive")
+    span.tactic-item(v-for="tactic in getTacticBreakdown()" :class="{ 'active': isTacticBreakdownActive }" :style="`width: ${tactic[1]}%; background-color: ${hashStringToColor(tactic[0])};`" v-tooltip="tactic[0]") {{ `${tactic[0]}  ${tactic[1]}%` }}
+
+//- Ability table
+table.table.is-striped.is-fullwidth.is-narrow
+    thead
+        tr
+            th
+            th Ordering 
+            th Name 
+            th Tactic
+            th Technique
+            th Executors
+            th Requires 
+            th Unlocks 
+            th Payload 
+            th Cleanup 
+            th
+    tbody
+        tr.pointer(
+            v-for="(ability, index) in selectedAdversaryAbilities"
+            :class="{ 'row-hover-above': ability.ability_id === tableDragHoverId && tableDragHoverId != undefined && tableDragEndIndex < tableDragTargetIndex, 'row-hover-below': ability.ability_id === tableDragHoverId && tableDragHoverId != undefined && tableDragEndIndex > tableDragTargetIndex, 'orange-row': needsParser.indexOf(ability.name) > -1, 'row-hover': ability.ability_id === tableDragHoverId && tableDragHoverId != undefined, 'red-row-unclickable': undefinedAbilities.indexOf(ability.ability_id) > -1}" 
+            @click="selectAbility(ability)"
+            @mouseenter="setAbilityHover(ability.ability_id)"
+            @mouseleave="onHoverLocks = []; onHoverUnlocks = [];"
+            )
+            td.drag.is-flex.is-align-items-center.is-justify-content-center(@click.stop draggable="true" @dragenter="tableDragHoverId = ability.ability_id" @dragstart="startAbilitySwap" @dragover.prevent="swapAbilitiesHover" @dragend="swapAbilities")
+                span &#9776;
+            td 
+                .icon-text 
+                    span {{ index + 1 }}
+                    span.icon.has-text-danger(v-if="!ability.ability_id")
+                        font-awesome-icon(icon="fas fa-ban")
+                    span.icon.has-text-warning(v-if="needsParser.indexOf(ability.name) > -1")
+                        font-awesome-icon(icon="fas fa-exclamation-triangle") 
+            td {{ ability.ability_id ? ability.name : "Undefined Ability" }}
+            td 
+                span(:style="`border-bottom: 2px ridge ${hashStringToColor(ability.tactic)}`") {{ ability.tactic }}
+            td {{ ability.technique_name }}
+            td 
+                span(v-for="platform in getExecutorDetail('platforms', ability)" v-tooltip="platform")
+                    span.icon.is-small.mr-2
+                        font-awesome-icon(v-if="platform.includes('windows')" icon="fab fa-windows")
+                        font-awesome-icon(v-if="platform.includes('darwin')" icon="fab fa-apple")
+                        font-awesome-icon(v-if="platform.includes('linux')" icon="fab fa-linux")
+            td.has-text-centered(:class="{ 'unlock': onHoverUnlocks.indexOf(ability.ability_id) > -1 }")
+                span(v-if="abilityDependencies[ability.ability_id] && getExecutorDetail('requirements', ability)" v-tooltip="`This ability has requirements: (${abilityDependencies[ability.ability_id].requireTypes})`")
+                    span.icon.is-small
+                        font-awesome-icon(icon="fas fa-lock") 
+            td.has-text-centered(:class="{ 'lock': onHoverLocks.indexOf(ability.ability_id) > -1 }")
+                span(v-if="abilityDependencies[ability.ability_id] && getExecutorDetail('parser', ability)" v-tooltip="`This ability unlocks other abilities: (${abilityDependencies[ability.ability_id].enableTypes})`")
+                    span.icon.is-small
+                        font-awesome-icon(icon="fas fa-key")
+            td.has-text-centered 
+                span(v-if="getExecutorDetail('payload', ability)" v-tooltip="'This ability uses a payload'")
+                    span.icon.is-small
+                        font-awesome-icon(icon="fas fa-weight-hanging")
+            td.has-text-centered
+                span(v-if="getExecutorDetail('cleanup', ability)" v-tooltip="'This ability can clean itself up'")
+                    span.icon.is-small
+                        font-awesome-icon(icon="fas fa-trash")
+            td.has-text-centered
+                button.delete(@click.stop="selectedAdversaryAbilities.splice(index, 1)")
+
+.container.has-text-centered(v-if="!selectedAdversaryAbilities.length")
+    p This profile has no abilities
+.icon-text(v-if="needsParser.length")
+    span.icon.has-text-warning
+        font-awesome-icon(icon="fas fa-exclamation-triangle")
+    span One or more of the abilities have unmet requirements, which may result in a failed operation if ran sequentially.
+.icon-text.mt-2(v-if="undefinedAbilities.length")
+    span.icon.has-text-danger 
+        font-awesome-icon(icon="fas fa-ban") 
+    span One or more of the referenced abilities are not defined
+
+//- Modals
+AbilitySelection(:active="showAbilitySelection" @select="addAbilityToAdversary" @close="showAbilitySelection = false" :canCreate="true")
+
+CreateEditAbility(:ability="selectedAbility" :active="showCreateEditAbilityModal" :creating="false" @close="showCreateEditAbilityModal = false")
+
+FactBreakdownModal(:breakdown="factBreakdown")
+
+AddAbilitiesFromAdversaryModal(:active="showAddFromAdversary" @select="addAbilitiesFromAdversary" @close="showAddFromAdversary = false")
+
+DeleteAdversaryConfirmationModal
+</template>
+
+<style scoped>
+.drag {
+    cursor: grab;
+}
+
+.red-row-unclickable {
+    pointer-events: none;
+    font-weight: bold;
+    border: 3px solid #8B0000;
+}
+
+.lock {
+    background-color: blueviolet !important;
+}
+.unlock {
+    background-color: coral !important;
+}
+
+.orange-row {
+    border: 2px solid orange;
+}
+
+.row-hover {
+    background-color: #484848 !important;
+}
+
+.row-hover-above {
+  border-top: 3px solid green;
+}
+
+.row-hover-below {
+  border-bottom: 3px solid green;
+}
+
+.tactic-breakdown {
+    display: table;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transform-style: preserve-3d;
+}
+
+.tactic-item {
+    display: table-cell;
+    line-height: 8px;
+    text-indent: -9999px;
+    border-bottom: none !important;
+}
+.tactic-item.active {
+    line-height: 30px;
+    text-indent: 6px;
+    font-size: .7em;
+}
+</style>
diff --git a/src/components/adversaries/ImportModal.vue b/src/components/adversaries/ImportModal.vue
index 7b13339..90878d4 100644
--- a/src/components/adversaries/ImportModal.vue
+++ b/src/components/adversaries/ImportModal.vue
@@ -1,76 +1,81 @@
+<template>
+  <div class="modal is-active">
+    <div class="modal-background" @click="$emit('close')"></div>
+    <div class="modal-content" style="max-width: 600px;">
+      <div class="box">
+        <h3 class="title is-5">Import Adversary</h3>
+        <p class="mb-4">Import an adversary in YAML format. Export any existing adversary to see the required format.</p>
+
+        <div class="is-flex is-align-items-center mb-5">
+          <div class="file has-name is-fullwidth mr-3">
+            <label class="file-label">
+              <input
+                class="file-input"
+                type="file"
+                accept=".yml,.yaml"
+                @change="handleFileImport"
+              />
+              <span class="file-cta">
+                <span class="file-icon">
+                  <font-awesome-icon icon="fas fa-upload" />
+                </span>
+                <span class="file-label">Choose a file...</span>
+              </span>
+              <span class="file-name">{{ selectedFileName }}</span>
+            </label>
+          </div>
+
+          <button class="button is-primary is-bold" :disabled="!selectedFileName" @click="triggerImport">
+            <span class="icon">
+              <font-awesome-icon icon="fas fa-file-import" />
+            </span>
+            <span>Import</span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <button class="modal-close is-large" @click="$emit('close')"></button>
+  </div>
+</template>
+
 <script setup>
-import { ref, inject } from "vue";
-import { useCoreDisplayStore } from "../../stores/coreDisplayStore";
-import { storeToRefs } from "pinia";
-import { useAdversaryStore } from "../../stores/adversaryStore";
+import { ref } from "vue";
+import yaml from 'js-yaml';
+import { toast } from 'bulma-toast';
 
-const $api = inject("$api");
+const emit = defineEmits(["close", "imported"]);
 
-const adversaryStore = useAdversaryStore();
-const coreDisplayStore = useCoreDisplayStore();
-const { modals } = storeToRefs(coreDisplayStore);
+const selectedFile = ref(null);
+const selectedFileName = ref("");
 
-let importFile = ref({});
-let importFileContent = ref({});
+function handleFileImport(event) {
+  const file = event.target.files[0];
+  if (!file) return;
 
-function uploadImportFile(event) {
-    let el = event.target;
-    if (!el.files || !el.files.length) return;
-    importFile.value = el.files[0];
-    const reader = new FileReader();
-    reader.onload = (event) => importFileContent.value = event.target.result;
-    reader.readAsText(importFile.value);
+  selectedFile.value = file;
+  selectedFileName.value = file.name;
 }
 
-function importAdversary() {
-    let newProfile = {};
-    let lastKey;
-    importFileContent.value.split("\n").forEach((line) => {
-        // Remove comments
-        line = line.split('#')[0];
-        // Line has a key-value pair
-        let keyValSplit = line.split(':');
-        if (keyValSplit.length >= 2) {
-            if (keyValSplit[1]) {
-                newProfile[keyValSplit[0]] = keyValSplit[1].trim();
-            } else {
-                lastKey = keyValSplit[0];
-                newProfile[lastKey] = [];
-            }
-        }
-        // Line is a list item
-        if (line.trim()[0] === '-' && line.trim() !== '---') {
-            newProfile[lastKey].push(line.replace('-', '').trim());
-        }
-    });
-    
-    adversaryStore.createAdversary($api, newProfile);
-    importFile.value = {};
-    importFileContent.value = {};
-    modals.value.adversaries.showImport = false;
+function triggerImport() {
+  if (!selectedFile.value) return;
+
+  const reader = new FileReader();
+  reader.onload = async (e) => {
+    try {
+      const content = e.target.result;
+      const parsed = yaml.load(content);
+      emit("imported", parsed);
+      emit("close");
+    } catch (err) {
+      console.error("YAML parse error:", err);
+      toast({
+        message: "Invalid YAML file.",
+        type: "is-danger",
+        duration: 3000,
+        position: "bottom-right",
+      });
+    }
+  };
+  reader.readAsText(selectedFile.value);
 }
 </script>
-    
-<template lang="pug">
-.modal(:class="{ 'is-active': modals.adversaries.showImport }")
-    .modal-background(@click="modals.adversaries.showImport = false")
-    .modal-card 
-        header.modal-card-head 
-            p.modal-card-title Import Adversary
-        .modal-card-body 
-            p.block Import an adversary in YAML format. Export any existing adversary to see the required format.
-            .file.has-name.is-fullwidth
-                label.file-label
-                    input.file-input(accept=".yml,.yaml" type="file" @change="uploadImportFile")
-                    span.file-cta
-                        span.file-icon 
-                            font-awesome-icon(icon="fas fa-upload")
-                        span.file-label Choose a file...
-                    span.file-name {{ importFile ? importFile.name : '' }}
-        footer.modal-card-foot.is-flex.is-justify-content-flex-end 
-            button.button(@click="modals.adversaries.showImport = false") Close
-            button.button.is-primary(@click="importAdversary()")
-                span.icon 
-                    font-awesome-icon(icon="fas fa-save") 
-                span Import
-</template>
diff --git a/src/components/adversaries/ImportModal.vue.bkp b/src/components/adversaries/ImportModal.vue.bkp
new file mode 100644
index 0000000..7b13339
--- /dev/null
+++ b/src/components/adversaries/ImportModal.vue.bkp
@@ -0,0 +1,76 @@
+<script setup>
+import { ref, inject } from "vue";
+import { useCoreDisplayStore } from "../../stores/coreDisplayStore";
+import { storeToRefs } from "pinia";
+import { useAdversaryStore } from "../../stores/adversaryStore";
+
+const $api = inject("$api");
+
+const adversaryStore = useAdversaryStore();
+const coreDisplayStore = useCoreDisplayStore();
+const { modals } = storeToRefs(coreDisplayStore);
+
+let importFile = ref({});
+let importFileContent = ref({});
+
+function uploadImportFile(event) {
+    let el = event.target;
+    if (!el.files || !el.files.length) return;
+    importFile.value = el.files[0];
+    const reader = new FileReader();
+    reader.onload = (event) => importFileContent.value = event.target.result;
+    reader.readAsText(importFile.value);
+}
+
+function importAdversary() {
+    let newProfile = {};
+    let lastKey;
+    importFileContent.value.split("\n").forEach((line) => {
+        // Remove comments
+        line = line.split('#')[0];
+        // Line has a key-value pair
+        let keyValSplit = line.split(':');
+        if (keyValSplit.length >= 2) {
+            if (keyValSplit[1]) {
+                newProfile[keyValSplit[0]] = keyValSplit[1].trim();
+            } else {
+                lastKey = keyValSplit[0];
+                newProfile[lastKey] = [];
+            }
+        }
+        // Line is a list item
+        if (line.trim()[0] === '-' && line.trim() !== '---') {
+            newProfile[lastKey].push(line.replace('-', '').trim());
+        }
+    });
+    
+    adversaryStore.createAdversary($api, newProfile);
+    importFile.value = {};
+    importFileContent.value = {};
+    modals.value.adversaries.showImport = false;
+}
+</script>
+    
+<template lang="pug">
+.modal(:class="{ 'is-active': modals.adversaries.showImport }")
+    .modal-background(@click="modals.adversaries.showImport = false")
+    .modal-card 
+        header.modal-card-head 
+            p.modal-card-title Import Adversary
+        .modal-card-body 
+            p.block Import an adversary in YAML format. Export any existing adversary to see the required format.
+            .file.has-name.is-fullwidth
+                label.file-label
+                    input.file-input(accept=".yml,.yaml" type="file" @change="uploadImportFile")
+                    span.file-cta
+                        span.file-icon 
+                            font-awesome-icon(icon="fas fa-upload")
+                        span.file-label Choose a file...
+                    span.file-name {{ importFile ? importFile.name : '' }}
+        footer.modal-card-foot.is-flex.is-justify-content-flex-end 
+            button.button(@click="modals.adversaries.showImport = false") Close
+            button.button.is-primary(@click="importAdversary()")
+                span.icon 
+                    font-awesome-icon(icon="fas fa-save") 
+                span Import
+</template>
diff --git a/src/components/operations/CreateModal.vue b/src/components/operations/CreateModal.vue
index c979755..b5442ed 100644
--- a/src/components/operations/CreateModal.vue
+++ b/src/components/operations/CreateModal.vue
@@ -1,10 +1,17 @@
 <script setup>
+/**
+ * Start Operation Modal
+ * ---------------------
+ * Modal for creating a new operation. Handles loading of backing data (agents, adversaries,
+ * sources, planners, obfuscators), form state, validation, submission, and success/error toasts.
+ */
+
 import { ref, inject, onMounted } from "vue";
 import { storeToRefs } from "pinia";
-import { toast } from 'bulma-toast'
+import { toast } from "bulma-toast";
 
 import { useCoreDisplayStore } from "@/stores/coreDisplayStore";
-import { useOperationStore } from '@/stores/operationStore';
+import { useOperationStore } from "@/stores/operationStore";
 import { useAdversaryStore } from "@/stores/adversaryStore";
 import { useCoreStore } from "@/stores/coreStore";
 import { useAgentStore } from "@/stores/agentStore";
@@ -12,218 +19,309 @@ import { useSourceStore } from "@/stores/sourceStore";
 
 const $api = inject("$api");
 
+// ──────────────────────────────────────────────────────────────────────────────
+// Stores
+// ──────────────────────────────────────────────────────────────────────────────
 const coreDisplayStore = useCoreDisplayStore();
 const { modals } = storeToRefs(coreDisplayStore);
-const adversaryStore = useAdversaryStore();
+
 const operationStore = useOperationStore();
+const adversaryStore = useAdversaryStore();
 const coreStore = useCoreStore();
 const agentStore = useAgentStore();
+
 const sourceStore = useSourceStore();
 const { sources } = storeToRefs(sourceStore);
 
+// ──────────────────────────────────────────────────────────────────────────────
+/** Parent-provided callback to refresh intervals on success (optional). */
 const props = defineProps({
-    selectInterval: {
-        type: Function,
-    },
+  selectInterval: {
+    type: Function,
+    required: false
+  }
 });
 
-let operationName = ref("");
-let selectedAdversary = ref("");
-let selectedSource = ref("")
-let selectedGroup = ref("");
-let selectedObfuscator = ref({ name: "plain-text" });
-let selectedPlanner = ref();
-let isAuto = ref(true);
-let isDefParser = ref(true);
-let isAutoClose = ref(false);
-let isPause = ref(false);
-let minJitter = ref(2);
-let maxJitter = ref(8);
-let visibility = ref(51);
-let validation = ref({
-    name: "",
-});
+// ──────────────────────────────────────────────────────────────────────────────
+// Local Form State
+// ──────────────────────────────────────────────────────────────────────────────
+const operationName = ref("");
+const selectedAdversary = ref(""); // holds entire adversary object or empty string
+const selectedSource = ref("");     // holds entire source object or empty string
+const selectedGroup = ref("");
+
+const selectedObfuscator = ref({ name: "plain-text" });
+const selectedPlanner = ref(undefined);
+
+const isAuto = ref(true);
+const isDefParser = ref(true);
+const isAutoClose = ref(false);
+const isPause = ref(false);
+
+const minJitter = ref(2);
+const maxJitter = ref(8);
+
+const visibility = ref(51);
+
+const validation = ref({ name: "" });
 
+// ──────────────────────────────────────────────────────────────────────────────
+// Lifecycle
+// ──────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Load initial data required by the form.
+ * - Agents (and groups)
+ * - Adversaries
+ * - Sources
+ * - Obfuscators
+ * - Planners
+ */
 onMounted(async () => {
-    await agentStore.getAgents($api);
-    agentStore.updateAgentGroups();
-    await adversaryStore.getAdversaries($api);
-    await getSources();
-    await coreStore.getObfuscators($api);
-    await getPlanners();
+  await agentStore.getAgents($api);
+  agentStore.updateAgentGroups();
+
+  await adversaryStore.getAdversaries($api);
+  await getSources();
+  await coreStore.getObfuscators($api);
+  await getPlanners();
 });
 
+// ──────────────────────────────────────────────────────────────────────────────
+// Helpers & Actions
+// ──────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Fetch sources and set default selection.
+ * Prefers "basic" if present; otherwise leaves unselected.
+ */
 async function getSources() {
-    try {
-        await sourceStore.getSources($api);
-        selectedSource.value = sources.value.find(source => source.name === "basic");
-    } catch(error) {
-        console.error("Error getting sources", error);
-    }
+  try {
+    await sourceStore.getSources($api);
+    const basic = sources.value?.find((s) => s?.name === "basic");
+    if (basic) selectedSource.value = basic;
+  } catch (error) {
+    console.error("Error getting sources", error);
+  }
 }
 
+/**
+ * Fetch planners and set default planner to the first one, if any.
+ */
 async function getPlanners() {
-    try {
-        await coreStore.getPlanners($api);
-        selectedPlanner.value = coreStore.planners[0];
-    } catch(error) {
-        console.error("Error getting planners", error);
-    }
+  try {
+    await coreStore.getPlanners($api);
+    selectedPlanner.value = coreStore.planners?.[0];
+  } catch (error) {
+    console.error("Error getting planners", error);
+  }
 }
 
-async function createOperation() {
-    if(!operationName.value){
-        validation.value.name = "Name cannot be empty";
-        return;
-    }
-    validation.value.name = "";
-    if(!selectedAdversary.value.adversary_id){
-        selectedAdversary.value = {adversary_id: "ad-hoc"};
-    }
-    const newOperation = {
-        name: operationName.value,
-        autonomous: Number(isAuto.value),
-        use_learning_parsers: isDefParser.value,
-        auto_close: isAutoClose.value,
-        jitter: `${minJitter.value}/${maxJitter.value}`,
-        state: isPause ? "running" : "paused",
-        visibility: visibility.value,
-        obfuscator: selectedObfuscator.value.name,
-        source: {id: JSON.parse(JSON.stringify(selectedSource.value.id))},
-        planner: {id: JSON.parse(JSON.stringify(selectedPlanner.value.id))},
-        adversary: {adversary_id: JSON.parse(JSON.stringify(selectedAdversary.value.adversary_id))},
-        group: selectedGroup.value,
-    };
-    try {
-        await operationStore.createOperation($api, newOperation);
-        props.selectInterval();
-        toast({
-            message: `Operation ${operationName.value} created`,
-            type: 'is-success',
-            dismissible: true,
-            pauseOnHover: true,
-            duration: 2000,
-            position: "bottom-right",
-        });
-    } catch(error) {
-        console.error("Error creating operation", error);
-        toast({
-            message: `Error creating operation`,
-            type: 'is-danger',
-            dismissible: true,
-            pauseOnHover: true,
-            duration: 2000,
-            position: "bottom-right",
-        });
-    }
-    modals.value.operations.showCreate = false
+/**
+ * Validate jitter inputs and return normalized "min/max" pair (numbers).
+ * Ensures numbers, swaps if out-of-order, clamps to sensible bounds (>=0).
+ */
+function normalizeJitter() {
+  let min = Number(minJitter.value);
+  let max = Number(maxJitter.value);
+
+  if (!Number.isFinite(min)) min = 0;
+  if (!Number.isFinite(max)) max = 0;
+  if (min < 0) min = 0;
+  if (max < 0) max = 0;
+  if (min > max) [min, max] = [max, min];
+
+  return { min, max };
+}
+
+/**
+ * Build the payload for operation creation from current form state.
+ */
+function buildOperationPayload() {
+  const { min, max } = normalizeJitter();
+
+  // If no adversary selected, default to 'ad-hoc' (manual)
+  const adversaryId =
+    selectedAdversary.value && selectedAdversary.value.adversary_id
+      ? selectedAdversary.value.adversary_id
+      : "ad-hoc";
+
+  return {
+    name: operationName.value,
+    autonomous: Number(isAuto.value),
+    use_learning_parsers: isDefParser.value,
+    auto_close: isAutoClose.value,
+    jitter: `${min}/${max}`,
+    // pause flag should produce 'paused'
+    state: isPause.value ? "paused" : "running",
+    visibility: visibility.value,
+    obfuscator: selectedObfuscator.value?.name,
+    source: selectedSource.value?.id ? { id: selectedSource.value.id } : undefined,
+    planner: selectedPlanner.value?.id ? { id: selectedPlanner.value.id } : undefined,
+    adversary: { adversary_id: adversaryId },
+    group: selectedGroup.value,
+  };
 }
 
+/**
+ * Validate minimal required fields; sets inline messages.
+ * @returns true if valid, false otherwise
+ */
+function validateForm() {
+  if (!operationName.value || !operationName.value.trim()) {
+    validation.value.name = "Name cannot be empty";
+    return false;
+  }
+  validation.value.name = "";
+  return true;
+}
+
+/**
+ * Create an operation from the current form state, show toast on success/failure,
+ * optionally call parent refresh, and close the modal.
+ */
+async function createOperation() {
+  if (!validateForm()) return;
+
+  const payload = buildOperationPayload();
+
+  try {
+    await operationStore.createOperation($api, payload);
+    if (typeof props.selectInterval === "function") props.selectInterval();
+    toast({
+      message: `Operation "${operationName.value}" created`,
+      type: "is-success",
+      dismissible: true,
+      pauseOnHover: true,
+      duration: 2000,
+      position: "bottom-right",
+    });
+  } catch (error) {
+    console.error("Error creating operation", error);
+    toast({
+      message: "Error creating operation",
+      type: "is-danger",
+      dismissible: true,
+      pauseOnHover: true,
+      duration: 2000,
+      position: "bottom-right",
+    });
+  }
+
+  modals.value.operations.showCreate = false;
+}
 </script>
 
 <template lang="pug">
 .modal(:class="{ 'is-active': modals.operations.showCreate }")
-    .modal-background(@click="modals.operations.showCreate = false")
-    .modal-card
-        header.modal-card-head 
-            p.modal-card-title Start New Operation
-        .modal-card-body
-            .field.is-horizontal
-                .field-label.is-normal 
-                    label.label Operation Name
-                .field-body 
-                    input.input(placeholder="Operation Name" v-model="operationName")
-                    label.label.ml-3.mt-1.has-text-danger {{ `${validation.name}` }}
-            .field.is-horizontal
-                .field-label.is-normal 
-                    label.label Adversary
-                .field-body
-                    .control
-                        .select
-                            select(v-model="selectedAdversary")
-                                option(selected value="") No Adversary (manual)
-                                option(v-for="adversary in adversaryStore.adversaries" :key="adversary.id" :value="adversary") {{ `${adversary.name}` }}
-            .field.is-horizontal
-                .field-label.is-normal 
-                    label.label Fact Source
-                .field-body
-                    .control
-                        .select
-                            select(v-model="selectedSource")
-                                option(disabled selected value="") Choose a Fact Source 
-                                option(v-for="source in sources" :key="source.id" :value="source") {{ `${source.name}` }}
-            .field.is-horizontal 
-                .field-label.is-normal 
-                    label.label Group
-                .field-body
-                    button.button(:class="{ 'is-primary': selectedGroup === '' }" @click="selectedGroup = ''") All groups
-                    button.button.mx-2(v-for="group in agentStore.agentGroups" :key="group" :class="{ 'is-primary': selectedGroup === group }", @click="selectedGroup = group") {{`${group}`}}
-            .field.is-horizontal
-                .field-label.is-normal 
-                    label.label Planner 
-                .field-body
-                    .control
-                        .select 
-                            select(v-model="selectedPlanner")
-                                option(v-for="planner in coreStore.planners" :key="planner.id" :value="planner") {{ `${planner.name}` }}
-            .field.is-horizontal
-                .field-label
-                    label.label Obfuscators 
-                .field-body
-                    .field.is-grouped-multiline
-                        button.button.my-1.mr-2(v-for="obf in coreStore.obfuscators" :key="obf.id" :value="obf" :class="{ 'is-primary': selectedObfuscator.name === obf.name }" @click="selectedObfuscator = obf") {{ `${obf.name}` }}
-            .field.is-horizontal
-                .field-label
-                    label.label Autonomous
-                .field-body
-                    .field.is-grouped
-                        input.is-checkradio(type="radio" id="auto" :checked="isAuto" @click="isAuto = true")
-                        label.label.ml-3.mt-1(for="auto") Run autonomously
-                        input.is-checkradio.ml-3(type="radio" id="manual" :checked="!isAuto" @click="isAuto = false")
-                        label.label.ml-3.mt-1(for="manual") Require manual approval
-            .field.is-horizontal
-                .field-label
-                    label.label Parser
-                .field-body
-                    .field.is-grouped 
-                        input.is-checkradio(type="radio" id="defaultparser" :checked="isDefParser" @click="isDefParser = true")
-                        label.label.ml-3.mt-1(for="defaultparser") Use Default Parser
-                        input.is-checkradio.ml-3(type="radio" id="nondefaultparser" :checked="!isDefParser" @click="isDefParser = false")
-                        label.label.ml-3.mt-1(for="nondefaultparser") Don't use default learning parsers
-            .field.is-horizontal
-                .field-label 
-                    label.label Auto Close
-                .field-body.is-grouped
-                    input.is-checkradio(type="radio" id="keepopen" :checked="!isAutoClose" @click="isAutoClose = false")
-                    label.label.ml-3.mt-1(for="keepopen") Keep open forever
-                    input.is-checkradio.ml-3(type="radio" id="autoclose" :checked="isAutoClose" @click="isAutoClose = true")
-                    label.label.ml-3.mt-1(for="autoclose") Auto close operation
-            .field.is-horizontal 
-                .field-label 
-                    label.label Run State 
-                .field-body.is-grouped
-                    input.is-checkradio(type="radio" id="runimmediately" :checked="!isPause" @click="isPause = false")
-                    label.label.ml-3.mt-1(for="runimmediately") Run immediately
-                    input.is-checkradio.ml-3(type="radio" id="pausestart" :checked="isPause" @click="isPause = true")
-                    label.label.ml-3.mt-1(for="pausestart") Pause on start
-            .field.is-horizontal
-                .field-label 
-                    label.label Jitter (sec/sec)
-                .field-body
-                    input.input.is-small(v-model="minJitter")
-                    span /
-                    input.input.is-small(v-model="maxJitter")
-        footer.modal-card-foot.is-justify-content-right
-            button.button(@click="modals.operations.showCreate = false") Cancel
-            button.button.is-primary(@click="createOperation()") Start 
+  .modal-background(@click="modals.operations.showCreate = false")
+  .modal-card
+    header.modal-card-head 
+      p.modal-card-title Start New Operation
+    .modal-card-body
+      .field.is-horizontal
+        .field-label.is-normal 
+          label.label Operation Name
+        .field-body 
+          input.input(placeholder="Operation Name" v-model="operationName")
+          label.label.ml-3.mt-1.has-text-danger {{ `${validation.name}` }}
+
+      .field.is-horizontal
+        .field-label.is-normal 
+          label.label Adversary
+        .field-body
+          .control
+            .select
+              select(v-model="selectedAdversary")
+                option(selected value="") No Adversary (manual)
+                option(v-for="adversary in adversaryStore.adversaries" :key="adversary.id" :value="adversary") {{ `${adversary.name}` }}
+
+      .field.is-horizontal
+        .field-label.is-normal 
+          label.label Fact Source
+        .field-body
+          .control
+            .select
+              select(v-model="selectedSource")
+                option(disabled selected value="") Choose a Fact Source 
+                option(v-for="source in sources" :key="source.id" :value="source") {{ `${source.name}` }}
+
+      .field.is-horizontal 
+        .field-label.is-normal 
+          label.label Group
+        .field-body
+          button.button(:class="{ 'is-primary': selectedGroup === '' }" @click="selectedGroup = ''") All groups
+          button.button.mx-2(v-for="group in agentStore.agentGroups" :key="group" :class="{ 'is-primary': selectedGroup === group }", @click="selectedGroup = group") {{`${group}`}}
+
+      .field.is-horizontal
+        .field-label.is-normal 
+          label.label Planner 
+        .field-body
+          .control
+            .select 
+              select(v-model="selectedPlanner")
+                option(v-for="planner in coreStore.planners" :key="planner.id" :value="planner") {{ `${planner.name}` }}
+
+      .field.is-horizontal
+        .field-label
+          label.label Obfuscators 
+        .field-body
+          .field.is-grouped-multiline
+            button.button.my-1.mr-2(v-for="obf in coreStore.obfuscators" :key="obf.id" :value="obf" :class="{ 'is-primary': selectedObfuscator.name === obf.name }" @click="selectedObfuscator = obf") {{ `${obf.name}` }}
+
+      .field.is-horizontal
+        .field-label
+          label.label Autonomous
+        .field-body
+          .field.is-grouped
+            input.is-checkradio(type="radio" id="auto" :checked="isAuto" @click="isAuto = true")
+            label.label.ml-3.mt-1(for="auto") Run autonomously
+            input.is-checkradio.ml-3(type="radio" id="manual" :checked="!isAuto" @click="isAuto = false")
+            label.label.ml-3.mt-1(for="manual") Require manual approval
+
+      .field.is-horizontal
+        .field-label
+          label.label Parser
+        .field-body
+          .field.is-grouped 
+            input.is-checkradio(type="radio" id="defaultparser" :checked="isDefParser" @click="isDefParser = true")
+            label.label.ml-3.mt-1(for="defaultparser") Use Default Parser
+            input.is-checkradio.ml-3(type="radio" id="nondefaultparser" :checked="!isDefParser" @click="isDefParser = false")
+            label.label.ml-3.mt-1(for="nondefaultparser") Don't use default learning parsers
+
+      .field.is-horizontal
+        .field-label 
+          label.label Auto Close
+        .field-body.is-grouped
+          input.is-checkradio(type="radio" id="keepopen" :checked="!isAutoClose" @click="isAutoClose = false")
+          label.label.ml-3.mt-1(for="keepopen") Keep open forever
+          input.is-checkradio.ml-3(type="radio" id="autoclose" :checked="isAutoClose" @click="isAutoClose = true")
+          label.label.ml-3.mt-1(for="autoclose") Auto close operation
+
+      .field.is-horizontal 
+        .field-label 
+          label.label Run State 
+        .field-body.is-grouped
+          input.is-checkradio(type="radio" id="runimmediately" :checked="!isPause" @click="isPause = false")
+          label.label.ml-3.mt-1(for="runimmediately") Run immediately
+          input.is-checkradio.ml-3(type="radio" id="pausestart" :checked="isPause" @click="isPause = true")
+          label.label.ml-3.mt-1(for="pausestart") Pause on start
+
+      .field.is-horizontal
+        .field-label 
+          label.label Jitter (sec/sec)
+        .field-body
+          input.input.is-small(v-model="minJitter")
+          span /
+          input.input.is-small(v-model="maxJitter")
+
+    footer.modal-card-foot.is-justify-content-right
+      button.button(@click="modals.operations.showCreate = false") Cancel
+      button.button.is-primary(@click="createOperation()") Start 
 </template>
 
 <style scoped>
-.modal-card {
-    width: 800px;
-}
+.modal-card { width: 800px; }
 
-.field-label label{
-    font-size: 0.9rem;
-}
+.field-label label { font-size: 0.9rem; }
 </style>
diff --git a/src/router.js b/src/router.js
index bdb9af3..9656f6c 100644
--- a/src/router.js
+++ b/src/router.js
@@ -6,7 +6,7 @@ import HomeView from "./views/HomeView.vue";
 import LoginView from "./views/LoginView.vue";
 import AgentsView from "./views/AgentsView.vue";
 import PayloadsView from "./views/PayloadsView.vue";
-import AbilitiesView from "./views/AbilitiesView.vue";
+import AbilitiesView from "./components/abilities/CreateEditAbility.vue";
 import AdversariesView from "./views/AdversariesView.vue";
 import OperationsView from "./views/OperationsView.vue";
 import SchedulesView from "@/views/SchedulesView.vue";
diff --git a/src/stores/adversaryStore.js b/src/stores/adversaryStore.js
index 11ce3f7..bef3eee 100644
--- a/src/stores/adversaryStore.js
+++ b/src/stores/adversaryStore.js
@@ -1,17 +1,31 @@
 import { defineStore } from "pinia";
-import { useAbilityStore as abilityStore } from "./abilityStore";
+import { useAbilityStore as abilityStore } from "@/stores/abilityStore";
+import { useObjectiveStore } from "@/stores/objectiveStore";
+import {
+  buildExecutorsFromFacts,
+  normalizeStepExecutorFacts,
+  normalizeExecutorFactsForSave,
+} from "@/utils/executorUtils";
+import { v4 as uuidv4 } from "uuid";
+import cloneDeep from "lodash/cloneDeep";
 
+/**
+ * Adversary store:
+ * - Loads, selects, edits, saves, and deletes adversaries
+ * - Generates hydrated ability rows for the details table
+ * - Normalizes executor facts for load/save
+ */
 export const useAdversaryStore = defineStore("adversaryStore", {
-  state: () => {
-    return {
-      adversaries: [],
-      selectedAdversary: {},
-      selectedAdversaryAbilities: [],
-      objectives: [],
-      selectedObjective: "",
-    };
-  },
+  state: () => ({
+    adversaries: [],
+    selectedAdversary: {},
+    selectedAdversaryAbilities: [],
+    objectives: [],
+    selectedObjective: "",
+  }),
+
   actions: {
+    /** Fetch the list of adversaries from the backend. */
     async getAdversaries($api) {
       try {
         const response = await $api.get("/api/v2/adversaries");
@@ -20,6 +34,8 @@ export const useAdversaryStore = defineStore("adversaryStore", {
         console.error("Error fetching adversaries", error);
       }
     },
+
+    /** Fetch the list of objectives from the backend. */
     async getObjectives($api) {
       try {
         const response = await $api.get("/api/v2/objectives");
@@ -28,6 +44,8 @@ export const useAdversaryStore = defineStore("adversaryStore", {
         console.error("Error fetching objectives", error);
       }
     },
+
+    /** Create a new objective with a placeholder name/description and select it. */
     async createObjective($api) {
       try {
         const response = await $api.post("/api/v2/objectives", {
@@ -40,6 +58,8 @@ export const useAdversaryStore = defineStore("adversaryStore", {
         console.error("Error creating objective", error);
       }
     },
+
+    /** Persist the currently selected objective’s updates. */
     async saveObjective($api) {
       try {
         await $api.put(
@@ -50,77 +70,261 @@ export const useAdversaryStore = defineStore("adversaryStore", {
         console.error("Error saving objective", error);
       }
     },
-    async createAdversary($api, adversary = null) {
-      try {
-        const response = await $api.post(
-          "/api/v2/adversaries",
-          adversary || {
-            name: "New adversary",
-            description: "---",
-            atomic_ordering: [],
-          }
-        );
-        this.adversaries.push(response.data);
-        this.adversaries.sort((a, b) => a.name > b.name);
-        this.selectedAdversary = response.data;
-        this.updateSelectedAdversaryAbilities();
-      } catch (error) {
-        console.error("Error creating an adversary", error);
-      }
-    },
+
+    /**
+     * Save (PATCH) the currently selected adversary.
+     * Falls back to POST on 404/500. Normalizes executor facts before send.
+     */
     async saveSelectedAdversary($api) {
+      const buildAtomicOrdering = () =>
+        this.selectedAdversaryAbilities.map(({ ability_id, metadata = {} }) => {
+          const normalizedFacts = normalizeExecutorFactsForSave(
+            metadata.executor_facts || {}
+          );
+          return {
+            ability_id,
+            metadata: { executor_facts: normalizedFacts },
+          };
+        });
+
       const reqBody = {
+        adversary_id: this.selectedAdversary.adversary_id,
         name: this.selectedAdversary.name,
         description: this.selectedAdversary.description,
-        objective: this.selectedAdversary.objective,
-        atomic_ordering: this.selectedAdversaryAbilities.map(
-          (ability) => ability.ability_id
-        ),
+        objective:
+          this.selectedAdversary.objective?.id ??
+          this.selectedAdversary.objective ??
+          null,
+        atomic_ordering: buildAtomicOrdering(),
       };
 
       try {
         const response = await $api.patch(
-          `/api/v2/adversaries/${this.selectedAdversary.adversary_id}`,
+          `/api/v2/adversaries/${reqBody.adversary_id}`,
           reqBody
         );
-        const index = this.adversaries.findIndex(
-          (adversary) =>
-            adversary.adversary_id === this.selectedAdversary.adversary_id
+        const idx = this.adversaries.findIndex(
+          (a) => a.adversary_id === reqBody.adversary_id
         );
-        this.adversaries[index] = this.selectedAdversary;
+        if (idx !== -1) this.adversaries[idx] = response.data;
         return response.data;
       } catch (error) {
-        console.error("Error saving adversary", error);
+        const code = error.response?.status;
+        if (code !== 404 && code !== 500) {
+          console.error("Unexpected error during PATCH:", error);
+          throw error;
+        }
+        try {
+          const response = await $api.post("/api/v2/adversaries", reqBody);
+          this.adversaries.push(response.data);
+          return response.data;
+        } catch (postErr) {
+          console.error("POST also failed:", postErr);
+          throw postErr;
+        }
       }
     },
+
+    /** Delete the currently selected adversary and clear related state. */
     async deleteAdversary($api) {
       try {
-        const response = await $api.delete(
+        await $api.delete(
           `/api/v2/adversaries/${this.selectedAdversary.adversary_id}`
         );
         const index = this.adversaries.findIndex(
-          (adversary) =>
-            adversary.adversary_id === this.selectedAdversary.adversary_id
+          (a) => a.adversary_id === this.selectedAdversary.adversary_id
         );
         this.selectedAdversary = {};
         this.selectedAdversaryAbilities = [];
-        this.adversaries.splice(index, 1);
+        if (index !== -1) this.adversaries.splice(index, 1);
       } catch (error) {
         console.error("Error deleting adversary", error);
       }
     },
+
+    /**
+     * Legacy helper: hydrate selectedAdversaryAbilities from atomic_ordering
+     * when atomic_ordering is a list of ability_ids (strings).
+     * (Use generateSelectedAdversaryAbilities for richer step objects.)
+     */
     updateSelectedAdversaryAbilities() {
       if (!this.selectedAdversary.atomic_ordering) {
         this.selectedAdversaryAbilities = [];
-      } else {
-        this.selectedAdversaryAbilities =
-          this.selectedAdversary.atomic_ordering.map((ability_id) => {
+        return;
+      }
+      this.selectedAdversaryAbilities =
+        this.selectedAdversary.atomic_ordering.map((ability_id) => {
+          return {
+            ...abilityStore().abilities.find(
+              (ability) => ability.ability_id === ability_id
+            ),
+          };
+        });
+    },
+
+    /**
+     * Build the table-ready abilities from an adversary profile.
+     * - Accepts string ids or { ability_id, step_uuid, metadata } objects
+     * - Normalizes executor facts and rebuilds executors
+     */
+    generateSelectedAdversaryAbilities(adversary, abilitiesStore) {
+      return (adversary.atomic_ordering || [])
+        .map((step, index) => {
+          const stepObj =
+            typeof step === "string"
+              ? { ability_id: step, step_uuid: uuidv4(), metadata: {} }
+              : step;
+
+          const stepId = stepObj.ability_id;
+          const abilityTemplate = abilitiesStore.abilities.find(
+            (a) => a.ability_id === stepId
+          );
+          if (!abilityTemplate) {
+            console.warn(
+              `[Automation] Ability not found for step ${index}: ${stepId}`
+            );
+            return null;
+          }
+
+          const clonedAbility = cloneDeep(abilityTemplate);
+          const stepUuid = stepObj.step_uuid || uuidv4();
+
+          // Merge metadata (step overrides template)
+          const metadata = {
+            ...(clonedAbility.metadata || {}),
+            ...(stepObj.metadata || {}),
+          };
+          metadata.executor_facts ??= {};
+
+          // Normalize and rebuild executors
+          const normalizedStep = normalizeStepExecutorFacts(
+            { ...stepObj, metadata },
+            clonedAbility.executors
+          );
+          const normalizedExecutorFacts =
+            normalizedStep.metadata.executor_facts ?? {};
+          const rebuiltExecutors = buildExecutorsFromFacts(
+            clonedAbility.executors,
+            normalizedExecutorFacts
+          );
+
+          clonedAbility.executors = rebuiltExecutors;
+          clonedAbility.metadata = {
+            ...clonedAbility.metadata,
+            ...metadata,
+            executor_facts: { ...normalizedExecutorFacts },
+          };
+
+          return {
+            step_uuid: stepUuid,
+            ability_id: clonedAbility.ability_id,
+            name: clonedAbility.name,
+            tactic: clonedAbility.tactic,
+            technique_id: clonedAbility.technique_id,
+            technique_name: clonedAbility.technique_name,
+            executors: clonedAbility.executors,
+            metadata: clonedAbility.metadata,
+          };
+        })
+        .filter(Boolean);
+    },
+
+    /**
+     * Load an adversary profile (from API or imported JSON) into store state.
+     * - Ensures each step has step_uuid and metadata
+     * - Normalizes executor facts
+     * - Populates selectedAdversaryAbilities for the table
+     */
+    async loadAdversaryFromProfile(profile) {
+      const abilityStoreInstance = abilityStore();
+      const objectiveStoreInstance = useObjectiveStore();
+      const defaultObjective = objectiveStoreInstance.objectives?.[0]?.id ?? null;
+      const objectiveId =
+        profile.objective?.id ?? profile.objective ?? defaultObjective;
+
+      // Ensure abilities are available
+      if (!abilityStoreInstance.abilities.length) {
+        await abilityStoreInstance.getAbilities($api);
+      }
+
+      // Selected adversary shell
+      this.selectedAdversary = cloneDeep({
+        adversary_id: profile.adversary_id || profile.id || uuidv4(),
+        name: profile.name || "Imported",
+        description: profile.description || "",
+        objective: objectiveId,
+      });
+
+      // Normalize each step into { ability_id, step_uuid, metadata }
+      this.selectedAdversary.atomic_ordering = (profile.atomic_ordering || [])
+        .map((step) => {
+          const normalized = step?.ability_id
+            ? JSON.parse(JSON.stringify(step))
+            : step;
+
+          // String → object
+          if (typeof normalized === "string") {
             return {
-              ...abilityStore().abilities.find(
-                (ability) => ability.ability_id === ability_id
-              ),
+              ability_id: normalized,
+              step_uuid: uuidv4(),
+              metadata: {},
+            };
+          }
+
+          // Object with ability_id
+          if (normalized && typeof normalized === "object" && normalized.ability_id) {
+            const abilityDef = abilityStoreInstance.abilities.find(
+              (a) => a.ability_id === normalized.ability_id
+            );
+            const stepWithUUID = {
+              ...normalized,
+              step_uuid: normalized.step_uuid || uuidv4(),
+              metadata: { ...normalized.metadata },
             };
-          });
+            // Normalize executor facts vs. the ability's executors
+            const normalizedStepExecutorFacts = normalizeStepExecutorFacts(
+              stepWithUUID,
+              abilityDef?.executors || []
+            );
+            return normalizedStepExecutorFacts;
+          }
+
+          console.warn("[Automation] Skipping invalid step format:", step);
+          return null;
+        })
+        .filter(Boolean);
+
+      // Build table-ready abilities
+      this.selectedAdversaryAbilities = this.generateSelectedAdversaryAbilities(
+        this.selectedAdversary,
+        abilityStoreInstance
+      );
+      // Force reactive array update (no-op reassign but keeps intention clear)
+      this.selectedAdversaryAbilities.splice(
+        0,
+        this.selectedAdversaryAbilities.length,
+        ...this.selectedAdversaryAbilities
+      );
+    },
+
+    /**
+     * Update a single step (by step_uuid) in selectedAdversaryAbilities.
+     * Uses shallow merge to preserve reactivity.
+     */
+    updateAbilityInstance(updatedStep) {
+      const idx = this.selectedAdversaryAbilities.findIndex(
+        (s) => s.step_uuid === updatedStep.step_uuid
+      );
+      if (idx !== -1) {
+        this.selectedAdversaryAbilities[idx] = {
+          ...this.selectedAdversaryAbilities[idx],
+          ...updatedStep,
+        };
+      } else {
+        console.warn(
+          "[Automation] Could not find ability with step_uuid:",
+          updatedStep.step_uuid
+        );
       }
     },
   },
diff --git a/src/stores/adversaryStore.js.bkp b/src/stores/adversaryStore.js.bkp
new file mode 100644
index 0000000..11ce3f7
--- /dev/null
+++ b/src/stores/adversaryStore.js.bkp
@@ -0,0 +1,127 @@
+import { defineStore } from "pinia";
+import { useAbilityStore as abilityStore } from "./abilityStore";
+
+export const useAdversaryStore = defineStore("adversaryStore", {
+  state: () => {
+    return {
+      adversaries: [],
+      selectedAdversary: {},
+      selectedAdversaryAbilities: [],
+      objectives: [],
+      selectedObjective: "",
+    };
+  },
+  actions: {
+    async getAdversaries($api) {
+      try {
+        const response = await $api.get("/api/v2/adversaries");
+        this.adversaries = response.data;
+      } catch (error) {
+        console.error("Error fetching adversaries", error);
+      }
+    },
+    async getObjectives($api) {
+      try {
+        const response = await $api.get("/api/v2/objectives");
+        this.objectives = response.data;
+      } catch (error) {
+        console.error("Error fetching objectives", error);
+      }
+    },
+    async createObjective($api) {
+      try {
+        const response = await $api.post("/api/v2/objectives", {
+          name: "New objective",
+          description: "Enter a description",
+        });
+        this.objectives.push(response.data);
+        this.selectedObjective = this.objectives[this.objectives.length - 1];
+      } catch (error) {
+        console.error("Error creating objective", error);
+      }
+    },
+    async saveObjective($api) {
+      try {
+        await $api.put(
+          `/api/v2/objectives/${this.selectedObjective.id}`,
+          this.selectedObjective
+        );
+      } catch (error) {
+        console.error("Error saving objective", error);
+      }
+    },
+    async createAdversary($api, adversary = null) {
+      try {
+        const response = await $api.post(
+          "/api/v2/adversaries",
+          adversary || {
+            name: "New adversary",
+            description: "---",
+            atomic_ordering: [],
+          }
+        );
+        this.adversaries.push(response.data);
+        this.adversaries.sort((a, b) => a.name > b.name);
+        this.selectedAdversary = response.data;
+        this.updateSelectedAdversaryAbilities();
+      } catch (error) {
+        console.error("Error creating an adversary", error);
+      }
+    },
+    async saveSelectedAdversary($api) {
+      const reqBody = {
+        name: this.selectedAdversary.name,
+        description: this.selectedAdversary.description,
+        objective: this.selectedAdversary.objective,
+        atomic_ordering: this.selectedAdversaryAbilities.map(
+          (ability) => ability.ability_id
+        ),
+      };
+
+      try {
+        const response = await $api.patch(
+          `/api/v2/adversaries/${this.selectedAdversary.adversary_id}`,
+          reqBody
+        );
+        const index = this.adversaries.findIndex(
+          (adversary) =>
+            adversary.adversary_id === this.selectedAdversary.adversary_id
+        );
+        this.adversaries[index] = this.selectedAdversary;
+        return response.data;
+      } catch (error) {
+        console.error("Error saving adversary", error);
+      }
+    },
+    async deleteAdversary($api) {
+      try {
+        const response = await $api.delete(
+          `/api/v2/adversaries/${this.selectedAdversary.adversary_id}`
+        );
+        const index = this.adversaries.findIndex(
+          (adversary) =>
+            adversary.adversary_id === this.selectedAdversary.adversary_id
+        );
+        this.selectedAdversary = {};
+        this.selectedAdversaryAbilities = [];
+        this.adversaries.splice(index, 1);
+      } catch (error) {
+        console.error("Error deleting adversary", error);
+      }
+    },
+    updateSelectedAdversaryAbilities() {
+      if (!this.selectedAdversary.atomic_ordering) {
+        this.selectedAdversaryAbilities = [];
+      } else {
+        this.selectedAdversaryAbilities =
+          this.selectedAdversary.atomic_ordering.map((ability_id) => {
+            return {
+              ...abilityStore().abilities.find(
+                (ability) => ability.ability_id === ability_id
+              ),
+            };
+          });
+      }
+    },
+  },
+});
diff --git a/src/utils/executorUtils.js b/src/utils/executorUtils.js
new file mode 100644
index 0000000..795686e
--- /dev/null
+++ b/src/utils/executorUtils.js
@@ -0,0 +1,78 @@
+import cloneDeep from 'lodash/cloneDeep';
+
+/**
+ * Rebuilds an ability’s executor array using executor_facts keys
+ * like linux_sh_0, linux_sh_1, etc.
+ *
+ * @param {Array} originalExecutors - The ability.executors array
+ * @param {Object} executorFactsMap - Normalized executor_facts object
+ * @returns {Array} New executor list with injected facts
+ */
+export function buildExecutorsFromFacts(originalExecutors, executorFactsMap) {
+  if (!Array.isArray(originalExecutors)) return [];
+    const platformNameCounts = {};
+
+return originalExecutors.map((executor) => {
+  const base = `${executor.platform}_${executor.name}`;
+  const count = platformNameCounts[base] ?? 0;
+  platformNameCounts[base] = count + 1;
+
+  const key = `${base}_${count}`;
+  const facts = executorFactsMap?.[key] || [];
+  
+  return {
+    ...cloneDeep(executor),
+    executor_facts: facts.map(({ trait, value }) => ({ trait, value })),
+    key: key,
+    payloads: Array.isArray(executor.payloads) ? executor.payloads : [],
+  };
+});
+}
+/**
+ * Normalizes unstructured executor_facts using ability executor info
+ *
+ * @param {Object} step - Adversary step with optional executor_facts
+ * @param {Array} abilityExecutors - Ability.executors list to match
+ * @returns {Object} Step with normalized executor_facts
+ */
+export function normalizeStepExecutorFacts(step, abilityExecutors) {
+      const executorFacts = step?.metadata?.executor_facts;
+      if (!executorFacts || typeof executorFacts !== 'object') return step;
+      console.debug('[normalizeStepExecutorFacts] input step:', JSON.stringify(step, null, 2));
+      console.debug('[normalizeStepExecutorFacts] input executor_facts:', JSON.stringify(executorFacts, null, 2));
+      const normalizedFacts = {};
+      for (const [platformKey, facts] of Object.entries(executorFacts)) {
+        if (!platformKey.includes('_')) {
+          const matchingExecutors = abilityExecutors?.filter(e => e.platform === platformKey) || [];
+          matchingExecutors.forEach((executor, i) => {
+            const key = `${platformKey}_${executor.name}_${i}`;
+            normalizedFacts[key] = facts;
+          });
+        } else {
+          normalizedFacts[platformKey] = facts;
+        }
+      }
+
+      return {
+        ...step,
+        metadata: {
+          ...step.metadata,
+          executor_facts: normalizedFacts
+        }
+      };
+    }
+    export function normalizeExecutorFactsForSave(executorFacts) {
+      const normalized = {};
+      for (const [key, facts] of Object.entries(executorFacts || {})) {
+        if (!Array.isArray(facts) || facts.length === 0) continue;
+
+        const [platform] = key.split('_');
+        if (!normalized[platform]) {
+          normalized[platform] = facts.map(({ trait, value }) => ({ trait, value }));
+        } else {
+          normalized[platform].push(...facts.map(({ trait, value }) => ({ trait, value })));
+        }
+      }
+      return normalized;
+    }
+
diff --git a/src/views/AdversariesView.vue b/src/views/AdversariesView.vue
index 0bfc5ad..d285a56 100644
--- a/src/views/AdversariesView.vue
+++ b/src/views/AdversariesView.vue
@@ -1,85 +1,305 @@
 <script setup>
-import { inject, reactive, ref, onMounted, computed } from "vue";
+/**
+ * Automation view logic: handles loading, selecting, and editing adversaries and abilities.
+ * Provides UI bindings for adversary dropdown, import modal, and edit modal.
+ */
+
+import { ref, inject, onMounted, computed } from "vue";
 import { storeToRefs } from "pinia";
+import { useRouter } from "vue-router";
+import cloneDeep from "lodash/cloneDeep";
+import { v4 as uuidv4 } from "uuid";
 
-import { useAdversaryStore } from "@/stores/adversaryStore";
+import { useAgentStore } from "@/stores/agentStore";
 import { useAbilityStore } from "@/stores/abilityStore";
+import { useCoreStore } from "@/stores/coreStore";
+import { useCoreDisplayStore } from "@/stores/coreDisplayStore";
+import { useAdversaryStore } from "@/stores/adversaryStore";
 import { useObjectiveStore } from "@/stores/objectiveStore";
+import { buildExecutorsFromFacts } from "@/utils/executorUtils";
+
+import ImportAutomationModal from "@/components/adversaries/ImportModal.vue";
 import DetailsTable from "@/components/adversaries/DetailsTable.vue";
-import { useCoreDisplayStore } from "@/stores/coreDisplayStore";
-import ImportModal from "@/components/adversaries/ImportModal.vue";
+import EditAbilityModal from "@/components/abilities/CreateEditAbility.vue";
+
 
+// ────────────────────────────
+// Store initialization
+// ────────────────────────────
 const $api = inject("$api");
+const router = useRouter();
 
-const adversaryStore = useAdversaryStore();
-const { adversaries, selectedAdversary } = storeToRefs(adversaryStore);
+const coreStore = useCoreStore();
 const coreDisplayStore = useCoreDisplayStore();
-const { modals } = storeToRefs(coreDisplayStore);
+const agentStore = useAgentStore();
 const abilityStore = useAbilityStore();
+const adversaryStore = useAdversaryStore();
 const objectiveStore = useObjectiveStore();
 
-let isAdversaryDropdownOpen = ref(false);
-let adversarySearchQuery = ref("");
+const { modals } = storeToRefs(coreDisplayStore);
+const { agents } = storeToRefs(agentStore);
+const { abilities } = storeToRefs(abilityStore);
+const { adversaries, selectedAdversary, selectedAdversaryAbilities } = storeToRefs(adversaryStore);
+const { objectives } = storeToRefs(objectiveStore);
 
-let filteredAdversaries = computed(() => {
-    return adversaries.value.filter((adversary) => adversary.name.toLowerCase().includes(adversarySearchQuery.value.toLowerCase()));
-});
 
-onMounted(async () => {
-    await abilityStore.getAbilities($api);
-    await adversaryStore.getAdversaries($api);
-    await objectiveStore.getObjectives($api);
+// ────────────────────────────
+// Local reactive state
+// ────────────────────────────
+const selectedAbility = ref(null);
+const showEditModal = ref(false);
+const selectedAgent = ref({});
+const importedFileContent = ref({});
+const isAdversaryDropdownOpen = ref(false);
+const adversarySearchQuery = ref("");
+const isCreatingNewAdversary = ref(false);
+
+
+// ────────────────────────────
+// Computed values
+// ────────────────────────────
+
+/** Filter and sort adversaries by search input, excluding the currently selected one. */
+const filteredAdversaries = computed(() => {
+  if (!Array.isArray(adversaries.value) || !adversaries.value.length) return [];
+
+  const search = adversarySearchQuery.value.toLowerCase();
+  const currentId = selectedAdversary.value?.adversary_id ?? null;
+
+  return adversaries.value
+    .filter(a => a.name?.toLowerCase().includes(search) && a.adversary_id !== currentId)
+    .sort((a, b) => a.name.localeCompare(b.name));
 });
 
+/** Extract operation-level facts from imported profile content. */
+const operationFacts = computed(() => importedFileContent.value?.operation_facts || []);
+
+
+// ────────────────────────────
+// Action handlers
+// ────────────────────────────
+
+/** 
+ * Select an adversary profile from the dropdown. 
+ * Resets any open modals or ability editing state.
+ */
 function selectAdversary(adversary) {
-    selectedAdversary.value = adversary; 
-    adversaryStore.updateSelectedAdversaryAbilities();
-    isAdversaryDropdownOpen.value = false;
-    adversarySearchQuery.value = "";
+  showEditModal.value = false;
+  selectedAbility.value = null;
+  selectedAdversary.value = adversary;
+  adversaryStore.loadAdversaryFromProfile(adversary);
+  isAdversaryDropdownOpen.value = false;
+  adversarySearchQuery.value = "";
 }
-</script>
 
-<template lang="pug">
-//- Header
-.content
-    h2 Adversaries
-    p Adversary Profiles are collections of ATT&CK TTPs, designed to create specific effects on a host or network. Profiles can be used for offensive or defensive use cases.
-hr
-
-//- Adversary Selection
-#select-adversary.is-flex.is-align-items-center.mb-4
-    .dropdown.searchable.is-flex-grow-1.mr-2(:class="{ 'is-active': isAdversaryDropdownOpen }" @mouseenter="isAdversaryDropdownOpen = true" @mouseleave="isAdversaryDropdownOpen = false")
-        .dropdown-trigger
-            button.button.is-fullwidth(type="button" aria-haspopup="true" aria-controls="dropdown-menu")
-                span {{ selectedAdversary.name || 'Select an adversary' }} 
-                span.icon.is-small
-                    font-awesome-icon(icon="fas fa-angle-down" aria-hidden="true")
-        .dropdown-menu.is-fullwidth(role="menu")
-            .dropdown-content
-                .dropdown-item 
-                    input.input(v-model="adversarySearchQuery" placeholder="Search for an adversary...")
-                .dropdown-divider
-                a.dropdown-item(v-for="adversary in filteredAdversaries" @click="selectAdversary(adversary)" :class="{ 'is-active': adversary.adversary_id === selectedAdversary.adversary_id }") {{ adversary.name }}
-                p.has-text-centered(v-if="!filteredAdversaries.length") No results
-    button.button.is-primary.mr-2(type="button" @click="adversaryStore.createAdversary($api)")
-        span.icon 
-            font-awesome-icon(icon="fas fa-plus") 
-        span New Profile
-    button.button.mr-2(type="button" @click="modals.adversaries.showImport = true")
-        span.icon
-            font-awesome-icon(icon="fas fa-file-import") 
-        span Import
-
-//- Adversary details table
-DetailsTable(v-if="selectedAdversary.adversary_id")
-
-//- Modals
-ImportModal
-</template>
+/**
+ * Create a new temporary adversary profile for editing before saving to backend.
+ */
+function createAdversary() {
+  const defaultObjectiveId = objectives.value?.[0]?.id ?? null;
+  isCreatingNewAdversary.value = true;
+
+  const newAdversary = {
+    adversary_id: uuidv4(),
+    name: "New Adversary Profile",
+    description: "",
+    objective: defaultObjectiveId,
+    atomic_ordering: [],
+    abilities: [],
+  };
+
+  adversaryStore.selectedAdversary = newAdversary;
+  adversaryStore.selectedAdversaryAbilities = [];
 
-<style scoped>
-#select-adversary {
-    max-width: 800px;
-    margin: 0 auto;
+  coreDisplayStore.modals.adversaries = {
+    showFactBreakdown: false,
+    showDeleteConfirm: false,
+    showImport: false,
+    showDetails: false,
+  };
 }
-</style>
+
+/**
+ * Import an adversary profile JSON and sanitize its data before loading into store.
+ */
+async function handleImportedProfile(profile) {
+  try {
+    if (!Array.isArray(profile.atomic_ordering)) {
+      throw new Error("Invalid profile: atomic_ordering must be an array.");
+    }
+
+    const cleanProfile = {
+      adversary_id: profile.id || profile.adversary_id || uuidv4(),
+      name: profile.name || "Imported Adversary",
+      description: profile.description || "",
+      objective: typeof profile.objective === "object"
+        ? profile.objective?.id
+        : profile.objective || null,
+      operation_facts: profile.operation_facts || [],
+      atomic_ordering: profile.atomic_ordering.map(step =>
+        typeof step === "string"
+          ? { ability_id: step }
+          : {
+              ...step,
+              ability_id: step.ability_id,
+              facts: step.facts || [],
+              metadata: step.metadata || {},
+            }
+      ),
+    };
+
+    adversaryStore.loadAdversaryFromProfile(cleanProfile);
+    importedFileContent.value = cleanProfile;
+  } catch (e) {
+    console.error("Error importing adversary profile:", e);
+  }
+}
+
+/**
+ * Handle clicking on an ability in the DetailsTable.
+ * Merges metadata and executor facts into a complete editable object.
+ */
+function handleAbilityClick(step) {
+  console.debug("[handleAbilityClick]", new Date().toISOString(), step?.ability_id);
+
+  const full = abilities.value.find(a => a.ability_id === step.ability_id);
+  if (!full) {
+    console.warn("Missing ability:", step.ability_id);
+    return;
+  }
+
+  const built = {
+    ...cloneDeep(full),
+    step_uuid: step.step_uuid || crypto.randomUUID(),
+    metadata: {
+      ...(full.metadata || {}),
+      ...(step.metadata || {}),
+      executor_facts: step.metadata?.executor_facts || full.metadata?.executor_facts || {},
+    },
+  };
+
+  built.executors = buildExecutorsFromFacts(built.executors, built.metadata.executor_facts);
+  selectedAbility.value = built;
+  showEditModal.value = true;
+}
+
+/** Close the edit ability modal. */
+function closeEditModal() {
+  showEditModal.value = false;
+}
+
+/** Apply updates to an ability instance within the adversary store. */
+function onUpdateAbility(updatedAbility) {
+  adversaryStore.updateAbilityInstance(updatedAbility);
+}
+
+
+// ────────────────────────────
+// Lifecycle
+// ────────────────────────────
+
+/**
+ * Load initial data (abilities, adversaries, agents) on mount.
+ */
+onMounted(async () => {
+  await Promise.all([
+    abilityStore.getAbilities($api),
+    adversaryStore.getAdversaries($api),
+    agentStore.getAgents($api),
+  ]);
+});
+</script>
+
+<template>
+  <div class="content">
+  <h2 class="title is-3">Automation</h2>
+  <p>
+    Build and run automated sequences by chaining abilities together. Import an automation profile, or start by selecting an adversary to preload abilities.
+  </p>
+  <hr />
+
+  <!-- Adversary Selector -->
+  <section id="select-adversary" class="is-flex is-align-items-center mb-4">
+    <div
+      class="dropdown searchable is-flex-grow-1 mr-2"
+      :class="{ 'is-active': isAdversaryDropdownOpen }"
+    >
+      <div class="dropdown-trigger">
+        <button
+          class="button is-fullwidth"
+          type="button"
+          @click="isAdversaryDropdownOpen = !isAdversaryDropdownOpen"
+        >
+          <span>{{ selectedAdversary?.name || "Select an adversary" }}</span>
+          <span class="icon is-small">
+            <font-awesome-icon icon="fas fa-angle-down" />
+          </span>
+        </button>
+      </div>
+
+      <div class="dropdown-menu is-fullwidth" role="menu">
+        <div class="dropdown-content">
+          <div class="dropdown-item">
+            <input
+              class="input"
+              v-model="adversarySearchQuery"
+              placeholder="Search for an adversary..."
+            />
+          </div>
+          <div class="dropdown-divider" />
+          <a
+            v-for="adversary in filteredAdversaries"
+            :key="adversary.adversary_id"
+            class="dropdown-item"
+            @click="selectAdversary(adversary)"
+            @mousedown.stop.prevent
+            @click.stop.prevent="selectAdversary(adversary)"
+            :class="{ 'is-active': adversary.adversary_id === selectedAdversary?.adversary_id }"
+          >
+            {{ adversary.name }}
+          </a>
+          <p class="has-text-centered" v-if="!filteredAdversaries.length">No results</p>
+        </div>
+      </div>
+    </div>
+
+    <button class="button is-primary mr-2" @click="createAdversary">
+      <span class="icon"><font-awesome-icon icon="fas fa-plus" /></span>
+      <span>New Profile</span>
+    </button>
+
+    <button class="button mr-2" type="button" @click="modals.automationImport = true">
+      <span class="icon"><font-awesome-icon icon="fas fa-file-import" /></span>
+      <span>Import</span>
+    </button>
+  </section>
+
+
+    <!-- Ability Edit Modal -->
+    <EditAbilityModal
+            v-if="showEditModal"
+            :active="showEditModal"
+            :ability="selectedAbility"
+            :agent="selectedAgent"
+            :operationFacts="operationFacts"
+            @close="closeEditModal"
+            @update="onUpdateAbility"
+            />
+    <!-- Modal & Details -->
+    <ImportAutomationModal
+      v-if="modals.automationImport"
+      @close="modals.automationImport = false"
+      @imported="handleImportedProfile"
+    />
+
+    <section v-if="!showEditModal" class="box mt-4">
+        <DetailsTable
+        :abilities="selectedAdversaryAbilities"
+        @ability-click="handleAbilityClick"
+        @update:abilities="adversaryStore.selectedAdversaryAbilities = $event"
+        />
+
+    </section>
+  </div>
+
+</template>
diff --git a/src/views/AdversariesView.vue.bkp b/src/views/AdversariesView.vue.bkp
new file mode 100644
index 0000000..0bfc5ad
--- /dev/null
+++ b/src/views/AdversariesView.vue.bkp
@@ -0,0 +1,85 @@
+<script setup>
+import { inject, reactive, ref, onMounted, computed } from "vue";
+import { storeToRefs } from "pinia";
+
+import { useAdversaryStore } from "@/stores/adversaryStore";
+import { useAbilityStore } from "@/stores/abilityStore";
+import { useObjectiveStore } from "@/stores/objectiveStore";
+import DetailsTable from "@/components/adversaries/DetailsTable.vue";
+import { useCoreDisplayStore } from "@/stores/coreDisplayStore";
+import ImportModal from "@/components/adversaries/ImportModal.vue";
+
+const $api = inject("$api");
+
+const adversaryStore = useAdversaryStore();
+const { adversaries, selectedAdversary } = storeToRefs(adversaryStore);
+const coreDisplayStore = useCoreDisplayStore();
+const { modals } = storeToRefs(coreDisplayStore);
+const abilityStore = useAbilityStore();
+const objectiveStore = useObjectiveStore();
+
+let isAdversaryDropdownOpen = ref(false);
+let adversarySearchQuery = ref("");
+
+let filteredAdversaries = computed(() => {
+    return adversaries.value.filter((adversary) => adversary.name.toLowerCase().includes(adversarySearchQuery.value.toLowerCase()));
+});
+
+onMounted(async () => {
+    await abilityStore.getAbilities($api);
+    await adversaryStore.getAdversaries($api);
+    await objectiveStore.getObjectives($api);
+});
+
+function selectAdversary(adversary) {
+    selectedAdversary.value = adversary; 
+    adversaryStore.updateSelectedAdversaryAbilities();
+    isAdversaryDropdownOpen.value = false;
+    adversarySearchQuery.value = "";
+}
+</script>
+
+<template lang="pug">
+//- Header
+.content
+    h2 Adversaries
+    p Adversary Profiles are collections of ATT&CK TTPs, designed to create specific effects on a host or network. Profiles can be used for offensive or defensive use cases.
+hr
+
+//- Adversary Selection
+#select-adversary.is-flex.is-align-items-center.mb-4
+    .dropdown.searchable.is-flex-grow-1.mr-2(:class="{ 'is-active': isAdversaryDropdownOpen }" @mouseenter="isAdversaryDropdownOpen = true" @mouseleave="isAdversaryDropdownOpen = false")
+        .dropdown-trigger
+            button.button.is-fullwidth(type="button" aria-haspopup="true" aria-controls="dropdown-menu")
+                span {{ selectedAdversary.name || 'Select an adversary' }} 
+                span.icon.is-small
+                    font-awesome-icon(icon="fas fa-angle-down" aria-hidden="true")
+        .dropdown-menu.is-fullwidth(role="menu")
+            .dropdown-content
+                .dropdown-item 
+                    input.input(v-model="adversarySearchQuery" placeholder="Search for an adversary...")
+                .dropdown-divider
+                a.dropdown-item(v-for="adversary in filteredAdversaries" @click="selectAdversary(adversary)" :class="{ 'is-active': adversary.adversary_id === selectedAdversary.adversary_id }") {{ adversary.name }}
+                p.has-text-centered(v-if="!filteredAdversaries.length") No results
+    button.button.is-primary.mr-2(type="button" @click="adversaryStore.createAdversary($api)")
+        span.icon 
+            font-awesome-icon(icon="fas fa-plus") 
+        span New Profile
+    button.button.mr-2(type="button" @click="modals.adversaries.showImport = true")
+        span.icon
+            font-awesome-icon(icon="fas fa-file-import") 
+        span Import
+
+//- Adversary details table
+DetailsTable(v-if="selectedAdversary.adversary_id")
+
+//- Modals
+ImportModal
+</template>
+
+<style scoped>
+#select-adversary {
+    max-width: 800px;
+    margin: 0 auto;
+}
+</style>

From a0e74c3f588eef7165f080a7f8a0598edb6d5ebc Mon Sep 17 00:00:00 2001
From: deacon <marksoccerman1@aol.com>
Date: Mon, 12 Jan 2026 13:42:06 -0500
Subject: [PATCH 02/12] working abilities view

---
 .../abilities/CreateEditAbility.vue           | 49 ++++++++++++++-----
 src/router.js                                 |  2 +-
 src/views/AbilitiesView.vue                   | 10 +++-
 3 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/components/abilities/CreateEditAbility.vue b/src/components/abilities/CreateEditAbility.vue
index 89ea9c1..fb05bef 100644
--- a/src/components/abilities/CreateEditAbility.vue
+++ b/src/components/abilities/CreateEditAbility.vue
@@ -123,14 +123,36 @@ function addExecutor() {
   else abilityToEdit.value.executors.push(baseExecutor);
 }
 function setAbilityToEdit() {
-  console.info('[Ability.vue] setAbilityToEdit() with props.ability:', JSON.stringify(props.ability, null, 2));
-  abilityToEdit.value = cloneDeep(props.ability);
-  if (!abilityToEdit.value.requirements) abilityToEdit.value.requirements = [];
-  for (const executor of abilityToEdit.value.executors || []) {
-    if (executor.showPayloadDropdown === undefined) executor.showPayloadDropdown = false;
-    if (executor.payloadSearch === undefined) executor.payloadSearch = '';
-    if (!Array.isArray(executor.payloads)) executor.payloads = [];
+  console.info(
+    '[Ability.vue] setAbilityToEdit() with props.ability:',
+    JSON.stringify(props.ability ?? null, null, 2)
+  );
+
+  // HARD GUARD: abilities view may mount with no selected ability
+  if (!props.ability) {
+    abilityToEdit.value = {
+      requirements: [],
+      executors: [],
+      metadata: {}
+    };
+    return;
+  }
+
+  const cloned = cloneDeep(props.ability) || {};
+
+  cloned.requirements = Array.isArray(cloned.requirements) ? cloned.requirements : [];
+  cloned.executors = Array.isArray(cloned.executors) ? cloned.executors : [];
+  cloned.metadata = cloned.metadata || {};
+
+  for (const executor of cloned.executors) {
+    executor.showPayloadDropdown ??= false;
+    executor.payloadSearch ??= '';
+    executor.payloads = Array.isArray(executor.payloads) ? executor.payloads : [];
+    executor.cleanup = Array.isArray(executor.cleanup) ? executor.cleanup : [];
+    executor.parsers = Array.isArray(executor.parsers) ? executor.parsers : [];
   }
+
+  abilityToEdit.value = cloned;
   initializeUserFacts();
 }
 function initializeUserFacts() {
@@ -237,11 +259,14 @@ onMounted(async () => {
   await abilityStore.getPayloads($api);
   setAbilityToEdit();
   console.log('Payloads loaded:', payloads.value);
-});
-watch(() => props.ability, () => {
-  setAbilityToEdit();
-});
-
+})
+watch(
+  () => props.ability,
+  () => {
+    setAbilityToEdit(),
+  { immediate: true }
+  }
+)
 </script>
 
 <template>
diff --git a/src/router.js b/src/router.js
index 9656f6c..bdb9af3 100644
--- a/src/router.js
+++ b/src/router.js
@@ -6,7 +6,7 @@ import HomeView from "./views/HomeView.vue";
 import LoginView from "./views/LoginView.vue";
 import AgentsView from "./views/AgentsView.vue";
 import PayloadsView from "./views/PayloadsView.vue";
-import AbilitiesView from "./components/abilities/CreateEditAbility.vue";
+import AbilitiesView from "./views/AbilitiesView.vue";
 import AdversariesView from "./views/AdversariesView.vue";
 import OperationsView from "./views/OperationsView.vue";
 import SchedulesView from "@/views/SchedulesView.vue";
diff --git a/src/views/AbilitiesView.vue b/src/views/AbilitiesView.vue
index 8bae5c7..5f48928 100644
--- a/src/views/AbilitiesView.vue
+++ b/src/views/AbilitiesView.vue
@@ -22,7 +22,7 @@ let filters = reactive({
 
 let isCreatingAbility = ref(false);
 let showAbilityModal = ref(false);
-let selectedAbility = ref({});
+let selectedAbility = ref(null);
 
 const filteredAbilities = computed(() => {
     return abilities.value.filter((ability) => (
@@ -112,7 +112,13 @@ hr
             p.help.mb-0 {{ ability.description }}   
 
 //- Modals
-CreateEditAbility(:ability="selectedAbility" :active="showAbilityModal" :creating="isCreatingAbility" @close="showAbilityModal = false")
+CreateEditAbility(
+  v-if="showAbilityModal"
+  :ability="selectedAbility"
+  :active="showAbilityModal"
+  :creating="isCreatingAbility"
+  @close="showAbilityModal = false"
+)
 </template>
 
 <style scoped>

From 7038206a0f01344333a067895a71bf37099d17af Mon Sep 17 00:00:00 2001
From: deacon <marksoccerman1@aol.com>
Date: Thu, 5 Feb 2026 19:12:26 -0500
Subject: [PATCH 03/12] working adversary view

---
 .../abilities/CreateEditAbility.vue           | 1117 ++++++++++-------
 src/components/adversaries/DetailsTable.vue   |   72 +-
 src/stores/adversaryStore.js                  |   93 +-
 src/utils/executorUtils.js                    |  104 +-
 src/views/AbilitiesView.vue                   |    3 +
 src/views/AdversariesView.vue                 |   60 +-
 vite.config.js                                |   68 +-
 7 files changed, 920 insertions(+), 597 deletions(-)

diff --git a/src/components/abilities/CreateEditAbility.vue b/src/components/abilities/CreateEditAbility.vue
index fb05bef..90d39cc 100644
--- a/src/components/abilities/CreateEditAbility.vue
+++ b/src/components/abilities/CreateEditAbility.vue
@@ -1,272 +1,452 @@
+<!-- CreateEditAbility.vue -->
 <script setup>
+/**
+ * CreateEditAbility.vue
+ *
+ * Backwards-compatible ability editor that supports:
+ * - Template abilities (no step_uuid, no metadata.executor_facts)
+ * - Adversary step instances (have step_uuid and metadata.executor_facts)
+ *
+ * Core rule:
+ * - UI identity is ALWAYS derived from a UI-only step_uuid + executor identity (name+platform).
+ * - Backend persistence for executor_facts remains platform-keyed (linux/darwin/windows) for compatibility.
+ */
+
 import { inject, ref, reactive, watch, onMounted, computed, onBeforeUnmount } from 'vue';
 import { storeToRefs } from 'pinia';
 import cloneDeep from 'lodash/cloneDeep';
+import { v4 as uuidv4 } from 'uuid';
+
 import { useAbilityStore } from '@/stores/abilityStore';
 import CodeEditor from '@/components/core/CodeEditor.vue';
 import AutoSuggest from '@/components/core/AutoSuggest.vue';
+import { useSourceStore } from '@/stores/sourceStore';
+
+const sourceStore = useSourceStore();
+const { sources } = storeToRefs(sourceStore);
 
 const props = defineProps({
   ability: Object,
   agent: Object,
   operationFacts: Array,
-  abilityFacts: Array,
   active: { type: Boolean, default: false },
-  creating: Boolean
-});
-function handleClickOutside(event) {
-  // Loop through each executor and close its dropdown if the click is outside
-  for (const executor of abilityToEdit.value.executors || []) {
-    const dropdownEl = document.querySelector(`.executor-payload-dropdown-${executor.key}`);
-    if (dropdownEl && !dropdownEl.contains(event.target)) {
-      executor.showPayloadDropdown = false;
-    }
+  creating: Boolean,
+  // CONTEXT FLAGS
+  allowCommandEdit: {
+    type: Boolean,
+    default: true
+  },
+  allowTraitEdit: {
+    type: Boolean,
+    default: false
+  },
+  deleteMode: {
+    type: String,
+    default: 'ability',
   }
-}
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener('click', handleClickOutside);
 });
 
+const emit = defineEmits(['close', 'update', 'remove']);
 
-const emit = defineEmits(['close', 'update']);
 const $api = inject('$api');
 const abilityStore = useAbilityStore();
 const { tactics, techniqueIds, techniqueNames, platforms, payloads } = storeToRefs(abilityStore);
 
-let abilityToEdit = ref({});
+const abilityToEdit = ref({});
 
-let validation = reactive({
+/**
+ * validation
+ * - Basic client-side validation used before emitting updated ability/step data.
+ */
+const validation = reactive({
   name: '',
   tactic: '',
   techniqueId: '',
   techniqueName: '',
   executors: ''
 });
+
 const VALID_EXECUTORS = {
   linux: ['sh'],
   darwin: ['sh'],
   windows: ['cmd', 'psh', 'pwsh']
 };
 
-const isPayloadDropdownOpen = ref(false);
+/**
+ * userFactsMap
+ * - UI-only, step-scoped, executor-scoped container for user-edited facts.
+ * - Keyed by derived UI executor key: `${step_uuid}::${executor.name}::${executor.platform}`
+ * - Values are objects keyed by trait:
+ *   { [trait]: { customValue: string, selected: string[] } }
+ */
 const userFactsMap = reactive({});
 
-function getExecutorKey(executor) {
-  return executor.key;
-}
-function getUserFactsFor(executor, index = null) {
-  const executorKey = getExecutorKey(executor, index);
-  if (!userFactsMap[executorKey]) userFactsMap[executorKey] = [];
-
-  const existingTraits = userFactsMap[executorKey].map(f => f.trait);
-  const cmdFields = getCommandFields(executor.command || '');
-
-  for (const trait of cmdFields) {
-    if (!existingTraits.includes(trait)) {
-      userFactsMap[executorKey].push({ trait, value: '' });
+/**
+ * handleClickOutside
+ * - Closes an executor's payload dropdown when clicking outside.
+ */
+function handleClickOutside(event) {
+  for (const [index, executor] of (abilityToEdit.value.executors || []).entries()) {
+    const key = getExecutorKey(executor, index);
+    const dropdownEl = document.querySelector(
+      `.executor-payload-dropdown[data-executor-key="${CSS.escape(key)}"]`
+    );
+    if (dropdownEl && !dropdownEl.contains(event.target)) {
+      executor.showPayloadDropdown = false;
     }
   }
-  return userFactsMap[executorKey];
 }
-const commandFields = computed(() => {
-  const cmd = abilityToEdit.value.executors?.[0]?.command || '';
-  if (!cmd) return [];
-  return [...new Set([...cmd.matchAll(/#{(.*?)}/gm)].map(m => m[1]))];
-});
-const predefinedFacts = computed(() => {
-  return commandFields.value
-    .map(trait => {
-      return props.abilityFacts?.find(f => f.trait === trait)
-    })
-    .filter(Boolean);
+
+onMounted((async () => {
+  document.addEventListener('click', handleClickOutside);
+  await sourceStore.getSources($api);
+}));
+
+const factSourceFacts = computed(() => {
+  return sources.value.flatMap(src =>
+    (src.facts || []).map(f => ({
+      trait: f.trait,
+      value: f.value,
+      sourceName: src.name // 👈 HUMAN name
+    }))
+  );
 });
-const selectedFacts = computed(() => {
-  const facts = [];
-  for (const [index, executor] of (abilityToEdit.value.executors || []).entries()) {
-    facts.push(...getUserFactsFor(executor, index));
-  }
-  return [...predefinedFacts.value, ...facts].filter(f => f.value?.trim());
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside);
 });
-const userFactsPerExecutor = computed(() => {
+
+
+/**
+ * getStepUuid
+ * - Ensures we ALWAYS have a UI-only step_uuid for stable UI identity.
+ * - Backwards compatible:
+ *   - If backend provided step_uuid, we use it.
+ *   - If missing (template ability), we generate a UI uuid.
+ */
+function getStepUuid() {
+  const existing =
+    abilityToEdit.value?.step_uuid ||
+    props.ability?.step_uuid ||
+    null;
+
+  if (existing) return existing;
+
+  // UI-only UUID (never meant to persist to backend; parent may strip on save)
+  const created = uuidv4();
+
+  // Store on current editor state so it's stable during this edit session
+  if (!abilityToEdit.value) abilityToEdit.value = {};
+  abilityToEdit.value.step_uuid = created;
+
+  return created;
+}
+
+/**
+ * getExecutorKey
+ * - Single source of truth for executor identity in the UI.
+ * - IMPORTANT: derived (never stored on executor object).
+ * - Backwards compatible:
+ *   - Works with abilities that do or do not have step_uuid.
+ */
+function getExecutorKey(executor) {
+  const stepUuid = ensureStepUuid();
+  const key = `${stepUuid}::${executor.name}::${executor.platform}`;
+
+  console.log('[Ability.vue] executor UI key:', {
+    stepUuid,
+    name: executor.name,
+    platform: executor.platform,
+    key
+  });
+
+  return key;
+}
+
+/**
+ * getCommandFields
+ * - Extracts #{trait} placeholders from a command string.
+ * - Returns unique list of traits.
+ */
+function getCommandFields(command = '') {
+  if (!command) return [];
+  return [...new Set([...command.matchAll(/#{(.*?)}/gm)].map(m => m[1]))];
+}
+
+const matchedFactsByTrait = computed(() => {
   const map = {};
-  (abilityToEdit.value.executors || []).forEach((executor, index) => {
-    const key = getExecutorKey(executor, index);
-    map[key] = userFactsMap[key] || [];
+  const facts = factSourceFacts.value;
+
+  (abilityToEdit.value.executors || []).forEach(executor => {
+    const key = getExecutorKey(executor);
+    const userFacts = userFactsMap[key] || {};
+
+    getCommandFields(executor.command || '').forEach(trait => {
+      map[trait] ??= facts
+        .filter(f => f.trait === trait)
+        .map(f => ({
+          value: f.value,
+          origin: f.sourceName || 'fact-source',
+          selected: userFacts[trait]?.selected?.includes(f.value) || false
+        }));
+    });
   });
+
   return map;
 });
+
+function toggleSuggestedFact(executor, trait, fact) {
+  const key = getExecutorKey(executor);
+  userFactsMap[key] ??= {};
+  userFactsMap[key][trait] ??= { customValue: '', selected: [] };
+
+  const selected = userFactsMap[key][trait].selected;
+
+  if (fact.selected) {
+    if (!selected.includes(fact.value)) selected.push(fact.value);
+  } else {
+    userFactsMap[key][trait].selected =
+      selected.filter(v => v !== fact.value);
+  }
+}
+
+/**
+ * formattedPayloads
+ * - Normalizes payload records into objects.
+ */
 const formattedPayloads = computed(() => {
   return (Array.isArray(payloads.value) ? payloads.value : []).map(p => {
     return typeof p === 'string' ? { payload_id: p, name: p } : p;
   });
 });
-function isPredefinedTrait(trait) {
-  return predefinedFacts.value.some(pre => pre.trait === trait);
+
+/**
+ * filteredPayloads
+ * - Applies executor payload search input to the payload list.
+ */
+function filteredPayloads(searchQuery) {
+  const query = searchQuery?.toLowerCase() || '';
+  return formattedPayloads.value
+    .filter(p => p.name.toLowerCase().includes(query))
+    .map(p => p.payload_id);
+}
+
+/**
+ * togglePayload
+ * - Adds/removes payload IDs from an executor.
+ */
+function togglePayload(executor, payloadId) {
+  const list = executor.payloads;
+  const idx = list.indexOf(payloadId);
+  if (idx === -1) list.push(payloadId);
+  else list.splice(idx, 1);
 }
+
+/**
+ * addExecutor
+ * - Adds a new executor entry to the ability being edited.
+ * - Backwards compatible:
+ *   - Does not assume step_uuid exists; UI key will derive from getStepUuid().
+ */
 function addExecutor() {
   const baseExecutor = {
     cleanup: [],
     timeout: 60,
     platform: 'darwin',
-    name: platforms.value.darwin[0],
+    name: platforms.value?.darwin?.[0] || 'sh',
     payloads: [],
     parsers: [],
-    key: uuidv4(),
+    uploads: [],
+    variations: [],
+    additional_info: {},
     showPayloadDropdown: false,
     payloadSearch: ''
   };
+
   if (!abilityToEdit.value.executors) abilityToEdit.value.executors = [baseExecutor];
   else abilityToEdit.value.executors.push(baseExecutor);
+
+  
 }
-function setAbilityToEdit() {
-  console.info(
-    '[Ability.vue] setAbilityToEdit() with props.ability:',
-    JSON.stringify(props.ability ?? null, null, 2)
-  );
 
-  // HARD GUARD: abilities view may mount with no selected ability
+/**
+ * setAbilityToEdit
+ * - Clones the incoming ability/step instance and normalizes it for editing.
+ * - Backwards compatible:
+ *   - If metadata.executor_facts is missing, initializes it to {}.
+ *   - If step_uuid is missing, generates UI-only step_uuid for stable UI identity.
+ */
+function setAbilityToEdit() {
   if (!props.ability) {
     abilityToEdit.value = {
+      step_uuid: uuidv4(), // UI-only for creation flows
       requirements: [],
       executors: [],
-      metadata: {}
+      metadata: { executor_facts: {} }
     };
+
+    // Clear stale facts
+    Object.keys(userFactsMap).forEach(k => delete userFactsMap[k]);
     return;
   }
 
-  const cloned = cloneDeep(props.ability) || {};
+  const cloned = cloneDeep(props.ability);
+
+  // Ensure UI-only step_uuid exists
+  cloned.step_uuid = cloned.step_uuid || uuidv4();
 
   cloned.requirements = Array.isArray(cloned.requirements) ? cloned.requirements : [];
   cloned.executors = Array.isArray(cloned.executors) ? cloned.executors : [];
   cloned.metadata = cloned.metadata || {};
+  cloned.metadata.executor_facts = cloned.metadata.executor_facts || {};
 
+  // Normalize executor shape (do not set executor.key)
   for (const executor of cloned.executors) {
     executor.showPayloadDropdown ??= false;
     executor.payloadSearch ??= '';
     executor.payloads = Array.isArray(executor.payloads) ? executor.payloads : [];
     executor.cleanup = Array.isArray(executor.cleanup) ? executor.cleanup : [];
     executor.parsers = Array.isArray(executor.parsers) ? executor.parsers : [];
+    executor.uploads = Array.isArray(executor.uploads) ? executor.uploads : [];
+    executor.variations = Array.isArray(executor.variations) ? executor.variations : [];
+    executor.additional_info = executor.additional_info || {};
   }
 
   abilityToEdit.value = cloned;
+
+  // Clear stale facts
+  Object.keys(userFactsMap).forEach(k => delete userFactsMap[k]);
+
   initializeUserFacts();
 }
+
 function initializeUserFacts() {
   if (!abilityToEdit.value.executors) return;
 
   const executorFacts = abilityToEdit.value.metadata?.executor_facts || {};
-  console.info('[Ability.vue] initializeUserFacts() → executor_facts:', JSON.stringify(executorFacts, null, 2));
-  console.info('[Ability.vue] executors:', JSON.stringify(abilityToEdit.value.executors, null, 2));
 
-  for (const [index, executor] of abilityToEdit.value.executors.entries()) {
-    console.info(`[Ability.vue] Initializing user facts for executor ${index}:`, executor);
-    const key = getExecutorKey(executor, index);
-    let savedFacts = executorFacts[key] || [];
-    if (!savedFacts.length && executorFacts[executor.platform]?.length) {
-      console.info(`[Ability.vue] No facts found for ${key}, falling back to platform key: ${executor.platform}`);
-      savedFacts = executorFacts[executor.platform];
-    }
+  for (const executor of abilityToEdit.value.executors) {
+    const key = getExecutorKey(executor);
+    userFactsMap[key] ??= {};
 
-    if (!userFactsMap[key]) userFactsMap[key] = [];
+    const platformFacts = executorFacts[executor.platform] || [];
 
-    // Merge saved values by trait
-    const existing = userFactsMap[key];
-    for (const saved of savedFacts) {
-      const idx = existing.findIndex(f => f.trait === saved.trait);
-      if (idx >= 0) {
-        existing[idx].value = saved.value;
-      } else {
-        existing.push({ trait: saved.trait, value: saved.value });
+    platformFacts.forEach(({ trait, value }) => {
+      userFactsMap[key][trait] ??= { customValue: '', selected: [] };
+      if (!userFactsMap[key][trait].selected.includes(value)) {
+        userFactsMap[key][trait].selected.push(value);
       }
-    }
-    // Add any missing traits with empty value, but don't overwrite
-    const cmdFields = getCommandFields(executor.command || '');
-    for (const trait of cmdFields) {
-      if (!existing.some(f => f.trait === trait)) {
-        existing.push({ trait, value: '' });
-      }
-    }
+    });
+
+    getCommandFields(executor.command || '').forEach(trait => {
+      userFactsMap[key][trait] ??= { customValue: '', selected: [] };
+    });
   }
-    console.info('[Ability.vue] userFactsMap after initialization:', JSON.stringify(userFactsMap, null, 2));
 }
+
+
+/**
+ * validateAndSaveAbility
+ * - Validates and emits an updated ability/step object.
+ * - Persists facts in metadata.executor_facts using BACKEND COMPATIBLE format:
+ *   { linux: [{trait,value}], darwin: [...], windows: [...] }
+ * - Always includes step_uuid in emitted object for stable UI references.
+ */
 function validateAndSaveAbility() {
-  // updateInjectedFacts();
   validation.name = abilityToEdit.value.name ? '' : 'Name cannot be empty';
   validation.tactic = abilityToEdit.value.tactic ? '' : 'Tactic cannot be empty';
   validation.techniqueId = abilityToEdit.value.technique_id ? '' : 'Technique ID cannot be empty';
   validation.techniqueName = abilityToEdit.value.technique_name ? '' : 'Technique Name cannot be empty';
-  validation.executors = abilityToEdit.value.executors?.length &&
+
+  validation.executors =
+    abilityToEdit.value.executors?.length &&
     abilityToEdit.value.executors.every(ex => ex.platform && ex.name && ex.command && ex.timeout >= 0)
-    ? '' : 'Executors are invalid or missing.';
+      ? ''
+      : 'Executors are invalid or missing.';
 
-  if (Object.values(validation).every(v => !v)) {
-    // Build executor_facts structure
-    const executorFacts = {};
+  if (!Object.values(validation).every(v => !v)) return;
 
-    (abilityToEdit.value.executors || []).forEach((executor, idx) => {
-      const key = getExecutorKey(executor, idx);
-      const userFacts = userFactsMap[key]?.filter(f => f.trait && f.value?.trim()) || [];
-      if (userFacts.length > 0) {
-        executorFacts[key] = userFacts;
-      }
-    });
-    // ✅ Update the local object itself
-      abilityToEdit.value.metadata = {
-        ...(abilityToEdit.value.metadata || {}),
-        executor_facts: executorFacts
-      };
-
-    // Emit back to parent
-    emit('update', {
-      ...cloneDeep(abilityToEdit.value),
-      metadata: {
-        ...(abilityToEdit.value.metadata || {}),
-        executor_facts: executorFacts
-      }
+  // Build platform-keyed executor_facts (backwards compatible)
+  const executorFacts = {};
+
+(abilityToEdit.value.executors || []).forEach(executor => {
+  const key = getExecutorKey(executor);
+  const byTrait = userFactsMap[key] || {};
+  const platform = executor.platform;
+
+  executorFacts[platform] ??= [];
+
+  Object.entries(byTrait).forEach(([trait, data]) => {
+    if (data.customValue) {
+      executorFacts[platform].push({ trait, value: data.customValue });
+    }
+    data.selected.forEach(v => {
+      executorFacts[platform].push({ trait, value: v });
     });
+  });
+});
+
+  // Update local
+  abilityToEdit.value.step_uuid = getStepUuid();
+  abilityToEdit.value.metadata = {
+    ...(abilityToEdit.value.metadata || {}),
+    executor_facts: executorFacts
+  };
+
+  // Emit updated object back to parent
+  emit('update', {
+    ...cloneDeep(abilityToEdit.value),
+    step_uuid: abilityToEdit.value.step_uuid,
+    metadata: {
+      ...(abilityToEdit.value.metadata || {}),
+      executor_facts: executorFacts
+    }
+  });
 
-    emit('close');
-  }
-}
-async function deleteAbility() {
-  await abilityStore.deleteAbility($api, abilityToEdit.value.ability_id);
   emit('close');
 }
-function getCommandFields(command = '') {
-  if (!command) return [];
-  return [...new Set([...command.matchAll(/#{(.*?)}/gm)].map(m => m[1]))];
-}
 
-function filteredPayloads(searchQuery) {
-  const query = searchQuery?.toLowerCase() || '';
-  return formattedPayloads.value.filter(p => p.name.toLowerCase().includes(query)).map(p => p.payload_id);
+function ensureStepUuid() {
+  if (!abilityToEdit.value.step_uuid) {
+    abilityToEdit.value.step_uuid = uuidv4();
+    console.log('[Ability.vue] Generated UI step_uuid:', abilityToEdit.value.step_uuid);
+  }
+  return abilityToEdit.value.step_uuid;
 }
-function togglePayload(executor, payloadId) {
-  const list = executor.payloads;
-  const idx = list.indexOf(payloadId);
-  if (idx === -1) {
-    list.push(payloadId);
-  } else {
-    list.splice(idx, 1);
+
+async function deleteAbility() {
+  if (props.deleteMode === 'ability') {
+    // GLOBAL DELETE (file + backend)
+    await abilityStore.deleteAbility($api, abilityToEdit.value.ability_id);
+    emit('close');
+    return;
+  }
+
+  if (props.deleteMode === 'adversary') {
+    // LOCAL DELETE (UI only)
+    emit('remove', abilityToEdit.value.step_uuid);
+    emit('close');
+    return;
   }
+
+  console.warn('[CreateEditAbility] Delete blocked: deleteMode=none');
 }
+
+// Load dropdown data
 onMounted(async () => {
   await abilityStore.getAbilities($api);
   await abilityStore.getPayloads($api);
-  setAbilityToEdit();
-  console.log('Payloads loaded:', payloads.value);
-})
+});
+
+// When ability changes, re-normalize + hydrate
 watch(
   () => props.ability,
-  () => {
-    setAbilityToEdit(),
+  (val) => {
+    if (!val || !val.ability_id) return;
+    setAbilityToEdit();
+  },
   { immediate: true }
-  }
-)
+);
 </script>
 
 <template>
@@ -277,361 +457,390 @@ watch(
         <p class="modal-card-title">{{ props.creating ? 'Create' : 'Edit' }} Ability</p>
       </header>
 
-        <section class="modal-card-body content m-0">
-          <form>
-            <!-- Basic Info -->
-            <label class="label">Ability ID</label>
-            <div class="field" v-if="!props.creating">
-              <div class="control">
-                <input class="input" v-model="abilityToEdit.ability_id" disabled />
-              </div>
+      <section class="modal-card-body content m-0">
+        <form>
+          <!-- Basic Info -->
+          <label class="label">Ability ID</label>
+          <div class="field" v-if="!props.creating">
+            <div class="control">
+              <input class="input" v-model="abilityToEdit.ability_id" disabled />
             </div>
-            <div class="field" v-else>
-              <p class="is-italic">ID will be automatically created</p>
+          </div>
+          <div class="field" v-else>
+            <p class="is-italic">ID will be automatically created</p>
+          </div>
+
+          <div class="field">
+            <label class="label">Name</label>
+            <div class="control">
+              <input class="input" v-model="abilityToEdit.name" :class="{ 'is-danger': validation.name }" />
+              <p class="has-text-danger">{{ validation.name }}</p>
             </div>
+          </div>
 
-            <div class="field">
-              <label class="label">Name</label>
-              <div class="control">
-                <input class="input" v-model="abilityToEdit.name" :class="{ 'is-danger': validation.name }" />
-                <p class="has-text-danger">{{ validation.name }}</p>
-              </div>
+          <div class="field">
+            <label class="label">Description</label>
+            <div class="control">
+              <textarea class="textarea" v-model="abilityToEdit.description"></textarea>
             </div>
+          </div>
 
-            <div class="field">
-              <label class="label">Description</label>
-              <div class="control">
-                <textarea class="textarea" v-model="abilityToEdit.description"></textarea>
-              </div>
+          <div class="field">
+            <label class="label">Tactic</label>
+            <div class="control" v-if="tactics.length > 0">
+              <AutoSuggest v-model="abilityToEdit.tactic" :items="tactics" :isDanger="!!validation.tactic" placeholder="Tactic" />
+              <p class="has-text-danger">{{ validation.tactic }}</p>
             </div>
+          </div>
 
-            <div class="field">
-              <label class="label">Tactic</label>
-              <div class="control" v-if="tactics.length > 0">
-                <AutoSuggest v-model="abilityToEdit.tactic" :items="tactics" :isDanger="!!validation.tactic" placeholder="Tactic" />
-                <p class="has-text-danger">{{ validation.tactic }}</p>
-              </div>
+          <div class="field">
+            <label class="label">Technique ID</label>
+            <div class="control" v-if="techniqueIds.length > 0">
+              <AutoSuggest v-model="abilityToEdit.technique_id" :items="techniqueIds" :isDanger="!!validation.techniqueId" placeholder="Technique ID" />
+              <p class="has-text-danger">{{ validation.techniqueId }}</p>
             </div>
+          </div>
 
-            <div class="field">
-              <label class="label">Technique ID</label>
-              <div class="control" v-if="techniqueIds.length > 0">
-                <AutoSuggest v-model="abilityToEdit.technique_id" :items="techniqueIds" :isDanger="!!validation.techniqueId" placeholder="Technique ID" />
-                <p class="has-text-danger">{{ validation.techniqueId }}</p>
-              </div>
+          <div class="field">
+            <label class="label">Technique Name</label>
+            <div class="control" v-if="techniqueNames.length > 0">
+              <AutoSuggest v-model="abilityToEdit.technique_name" :items="techniqueNames" :isDanger="!!validation.techniqueName" placeholder="Technique Name" />
+              <p class="has-text-danger">{{ validation.techniqueName }}</p>
             </div>
+          </div>
 
-            <div class="field">
-              <label class="label">Technique Name</label>
-              <div class="control" v-if="techniqueNames.length > 0">
-                <AutoSuggest v-model="abilityToEdit.technique_name" :items="techniqueNames" :isDanger="!!validation.techniqueName" placeholder="Technique Name" />
-                <p class="has-text-danger">{{ validation.techniqueName }}</p>
-              </div>
+          <div class="field">
+            <label class="label">Options</label>
+            <div class="control">
+              <input type="checkbox" v-model="abilityToEdit.singleton" />
+              <span class="ml-3">Singleton</span>
+            </div>
+            <div class="control">
+              <input type="checkbox" v-model="abilityToEdit.repeatable" />
+              <span class="ml-3">Repeatable</span>
             </div>
+            <div class="control">
+              <input type="checkbox" v-model="abilityToEdit.delete_payload" />
+              <span class="ml-3">Delete payload</span>
+            </div>
+          </div>
+        </form>
+
+        <!-- Executors Section -->
+        <p class="has-text-centered has-text-weight-semibold is-size-5 mb-2 mt-4">Executors</p>
+        <p class="has-text-danger has-text-centered mb-3">{{ validation.executors }}</p>
+
+        <div class="has-text-centered mb-4">
+          <button type="button" class="button is-primary" @click="addExecutor">
+            <span class="icon"><font-awesome-icon icon="fas fa-plus" /></span>
+            <span>Add Executor</span>
+          </button>
+        </div>
+
+        <div
+          class="box"
+          v-for="(executor, index) in abilityToEdit.executors"
+          :key="getExecutorKey(executor, index)"
+        >
+          <!-- Delete button aligned top-right -->
+          <div class="is-flex is-justify-content-flex-end">
+            <button
+              type="button"
+              class="button is-small is-danger is-light"
+              @click="abilityToEdit.executors.splice(index, 1)"
+            >
+              <span class="icon is-small">
+                <font-awesome-icon icon="fas fa-times" />
+              </span>
+            </button>
+          </div>
 
-            <div class="field">
-              <label class="label">Options</label>
-              <div class="control">
-                <input type="checkbox" v-model="abilityToEdit.singleton" />
-                <span class="ml-3">Singleton</span>
-              </div>
+          <!-- Flex row for Platform and Executor -->
+          <div class="is-flex" style="gap: 1.5rem;">
+            <!-- Platform -->
+            <div class="field" style="flex: 0 0 150px;">
+              <label class="label">Platform</label>
               <div class="control">
-                <input type="checkbox" v-model="abilityToEdit.repeatable" />
-                <span class="ml-3">Repeatable</span>
+                <div class="select is-fullwidth">
+                  <select v-model="executor.platform">
+                    <option v-for="platform in Object.keys(platforms)" :key="platform" :value="platform">
+                      {{ platform }}
+                    </option>
+                  </select>
+                </div>
               </div>
+            </div>
+
+            <!-- Executor -->
+            <div class="field" style="flex: 0 0 150px;">
+              <label class="label">Executor</label>
               <div class="control">
-                <input type="checkbox" v-model="abilityToEdit.delete_payload" />
-                <span class="ml-3">Delete payload</span>
+                <div class="select is-fullwidth">
+                  <select v-model="executor.name">
+                    <option v-for="exec in VALID_EXECUTORS[executor.platform] || []" :key="exec" :value="exec">
+                      {{ exec }}
+                    </option>
+                  </select>
+                </div>
               </div>
             </div>
-          </form>
-          
-          <!-- Executors Section -->
-          <p class="has-text-centered has-text-weight-semibold is-size-5 mb-2 mt-4">Executors</p>
-          <p class="has-text-danger has-text-centered mb-3">{{ validation.executors }}</p>
-
-          <div class="has-text-centered mb-4">
-            <button type="button" class="button is-primary" @click="addExecutor">
-              <span class="icon"><font-awesome-icon icon="fas fa-plus" /></span>
-              <span>Add Executor</span>
-            </button>
           </div>
-          <div
-            class="box"
-            v-for="(executor, index) in abilityToEdit.executors"
-            :key="index + (abilityToEdit.ability_id || 0)"
-          >
-            <!-- Delete button aligned top-right -->
-            <div class="is-flex is-justify-content-flex-end">
-              <button
-                type="button"
-                class="button is-small is-danger is-light"
-                @click="abilityToEdit.executors.splice(index, 1)"
-              >
-                <span class="icon is-small">
-                  <font-awesome-icon icon="fas fa-times" />
-                </span>
-              </button>
-            </div>
-            <!-- Flex row for Platform and Executor -->
-            <div class="is-flex" style="gap: 1.5rem;">
-              <!-- Platform -->
-              <div class="field" style="flex: 0 0 150px;">
-                <label class="label">Platform</label>
-                <div class="control">
-                  <div class="select is-fullwidth">
-                    <select v-model="executor.platform">
-                      <option v-for="platform in Object.keys(platforms)" :key="platform" :value="platform">
-                        {{ platform }}
-                      </option>
-                    </select>
-                  </div>
-                </div>
+
+          <!-- Payloads Dropdown + Selected Tags -->
+          <div class="field mt-4">
+            <label class="label">Payloads</label>
+
+            <div
+              class="dropdown executor-payload-dropdown"
+              :data-executor-key="getExecutorKey(executor, index)"
+              :class="{ 'is-active': executor.showPayloadDropdown }"
+              style="width: 100%;"
+            >
+              <div class="dropdown-trigger">
+                <button
+                  class="button is-fullwidth"
+                  @click="executor.showPayloadDropdown = !executor.showPayloadDropdown"
+                  type="button"
+                >
+                  <span>Select payloads</span>
+                  <span class="icon is-small">
+                    <font-awesome-icon icon="fas fa-angle-down" />
+                  </span>
+                </button>
               </div>
 
-              <!-- Executor -->
-              <div class="field" style="flex: 0 0 150px;">
-                <label class="label">Executor</label>
-                <div class="control">
-                  <div class="select is-fullwidth">
-                    <select v-model="executor.name">
-                      <option v-for="exec in VALID_EXECUTORS[executor.platform] || []" :key="exec" :value="exec">
-                        {{ exec }}
-                    </option>
-                    </select>
+              <div class="dropdown-menu" role="menu">
+                <div class="dropdown-content px-2 py-2" style="max-height: 200px; overflow-y: auto;">
+                  <div class="control has-icons-left mb-2">
+                    <input
+                      v-model="executor.payloadSearch"
+                      class="input is-small"
+                      placeholder="Search payloads..."
+                    />
+                    <span class="icon is-left is-small">
+                      <font-awesome-icon icon="fas fa-search" />
+                    </span>
+                  </div>
+
+                  <div
+                    class="dropdown-item"
+                    v-for="payload in filteredPayloads(executor.payloadSearch)"
+                    :key="payload"
+                    @click.stop="togglePayload(executor, payload)"
+                    style="cursor: pointer;"
+                  >
+                    <label class="checkbox">
+                      <input
+                        type="checkbox"
+                        :checked="executor.payloads.includes(payload)"
+                        @change.stop
+                      />
+                      {{ payload }}
+                    </label>
                   </div>
                 </div>
               </div>
             </div>
-            <!-- Payloads Dropdown + Selected Tags -->
-            <div class="field mt-4">
-              <label class="label">Payloads</label>
-
-              <!-- Dropdown trigger -->
-              <div class="dropdown"   :class="['executor-payload-dropdown-' + executor.key, { 'is-active': executor.showPayloadDropdown }]" style="width: 100%;">
-                <div class="dropdown-trigger">
-                  <button
-                    class="button is-fullwidth"
-                    @click="executor.showPayloadDropdown = !executor.showPayloadDropdown"
-                    type="button"
-                  >
-                    <span>Select payloads</span>
-                    <span class="icon is-small">
-                      <font-awesome-icon icon="fas fa-angle-down" />
-                    </span>
-                  </button>
+
+            <!-- Selected tags -->
+            <div class="field is-grouped is-grouped-multiline mt-3" style="margin-left: 9rem;">
+              <div class="control" v-for="(payload, idx) in executor.payloads" :key="payload">
+                <div class="tags has-addons">
+                  <span class="tag is-primary is-light">{{ payload }}</span>
+                  <a class="tag is-delete" @click="executor.payloads.splice(idx, 1)"></a>
                 </div>
+              </div>
+              <div class="control" v-if="executor.payloads.length === 0">
+                <span class="tag is-light">No payloads</span>
+              </div>
+            </div>
+          </div>
 
-                <!-- Dropdown content -->
-                <div class="dropdown-menu" role="menu">
-                  <div class="dropdown-content px-2 py-2" style="max-height: 200px; overflow-y: auto;">
-                    <div class="control has-icons-left mb-2">
-                      <input
-                        v-model="executor.payloadSearch"
-                        class="input is-small"
-                        placeholder="Search payloads..."
-                      />
-                      <span class="icon is-left is-small">
-                        <font-awesome-icon icon="fas fa-search" />
-                      </span>
-                    </div>
+          <!-- Command -->
+          <div class="field mt-5">
+            <label class="label">Command</label>
+            <CodeEditor v-model="executor.command" language="bash" line-numbers :readonly="!props.allowCommandEdit" />
+          </div>
 
+          <!-- Facts -->
+          <div class="field" v-if="getCommandFields(executor.command).length">
+            <label class="label">Fact Templates</label>
+            <p>This ability needs facts in order to run properly. Provide at least one value for each fact.</p>
+            <details open>
+              <summary>
+                <span class="has-text-weight-bold is-size-5 ml-2">Facts</span>
+              </summary>
+              <table class="mt-2">
+                <tr>
+                  <th>Trait</th>
+                  <th>Value</th>
+                </tr>
+
+                <!-- Command traits with selectable facts -->
+                <tr
+                  v-for="trait in getCommandFields(executor.command)"
+                  :key="'trait-' + trait"
+                >
+                  <td>
+                    <span>{{ trait }}</span>
+                    <font-awesome-icon
+                      icon="fa-exclamation-triangle"
+                      class="ml-2 has-text-warning"
+                      v-if="!(
+                        userFactsMap[getExecutorKey(executor, index)]?.[trait]?.customValue ||
+                        userFactsMap[getExecutorKey(executor, index)]?.[trait]?.selected?.length
+                      )"
+                    />
+                  </td>
+
+                  <td>
+                    <!-- Custom value -->
+                    <input
+                      class="input mb-2"
+                      :disabled="!props.allowTraitEdit"
+                      placeholder="Enter a custom value"
+                      @input="(e) => {
+                        const key = getExecutorKey(executor, index);
+                        userFactsMap[key] ??= {};
+                        userFactsMap[key][trait] ??= { customValue: '', selected: [] };
+                        userFactsMap[key][trait].customValue = e.target.value;
+                      }"
+                    />
+
+                    <!-- Suggested facts -->
                     <div
-                      class="dropdown-item"
-                      v-for="payload in filteredPayloads(executor.payloadSearch)"
-                      :key="payload"
-                      @click.stop="togglePayload(executor, payload)"
-                      style="cursor: pointer;"
+                      v-for="fact in matchedFactsByTrait[trait] || []"
+                      :key="fact.value"
                     >
                       <label class="checkbox">
                         <input
                           type="checkbox"
-                          :checked="executor.payloads.includes(payload)"
-                          @change.stop
+                          :checked="userFactsMap[getExecutorKey(executor)]?.[trait]?.selected?.includes(fact.value)"
+                          :disabled="!props.allowTraitEdit"
+                          @change="toggleSuggestedFact(executor, trait, {
+                            value: fact.value,
+                            selected: $event.target.checked
+                          })"
                         />
-                        {{ payload }}
+                        <span class="ml-2">{{ fact.value }}</span>
+                        <span class="tag ml-2">{{ fact.origin }}</span>
                       </label>
                     </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Selected tags -->
-              <div class="field is-grouped is-grouped-multiline mt-3" style="margin-left: 9rem;">
-                <div
-                  class="control"
-                  v-for="(payload, idx) in executor.payloads"
-                  :key="payload"
-                >
-                  <div class="tags has-addons">
-                    <span class="tag is-primary is-light">{{ payload }}</span>
-                    <a class="tag is-delete" @click="executor.payloads.splice(idx, 1)"></a>
-                  </div>
-                </div>
-                <div class="control" v-if="executor.payloads.length === 0">
-                  <span class="tag is-light">No payloads</span>
-                </div>
-              </div>
-            </div>
-            <!-- Command and Facts -->
-            <div class="field mt-5">
-              <label class="label">Command</label>
-              <CodeEditor v-model="executor.command" language="bash" line-numbers :readonly="true" />
-            </div>
+                  </td>
+                </tr>
+              </table>
 
-            <div class="field" v-if="getCommandFields(executor.command).length">
-              <label class="label">Fact Templates</label>
-              <p>This ability needs facts in order to run properly. Provide at least one value for each fact.</p>
-              <details open>
-                <summary>
-                  <span class="has-text-weight-bold is-size-5 ml-2">Facts</span>
-                </summary>
-                <table class="mt-2">
-                  <tr>
-                    <th>Trait</th>
-                    <th>Value</th>
-                  </tr>
-                  <tr v-for="fact in predefinedFacts" :key="'predef-' + fact.trait">
-                    <td><span>{{ fact.trait }}</span></td>
-                    <td><span>{{ fact.value }}</span></td>
-                  </tr>
-                  <tr
-                    v-for="fact in userFactsPerExecutor[getExecutorKey(executor, index)].filter(f => !isPredefinedTrait(f.trait))"
-                    :key="'user-' + fact.trait"
-                  >
-                      <td>
-                        <span>{{ fact.trait }}</span>
-                        <font-awesome-icon
-                          icon="fa-exclamation-triangle"
-                          class="ml-2 has-text-warning"
-                          :class="{ 'is-invisible': !!fact.value }"
-                        />
-                      </td>
-                      <td>
-                        <input
-                          class="input"
-                          v-model="fact.value"
-                          placeholder="Enter a custom value"
-                        />
-                      </td>
-                    </tr>
-                </table>
-              </details>
-            </div>
+            </details>
+          </div>
 
-            <!-- Cleanup -->
-            <div class="field">
-              <label class="label">Cleanup</label>
-              <div class="field has-addons" v-for="(cleanup, cidx) in executor.cleanup" :key="cidx">
-                <div class="control is-expanded">
-                  <CodeEditor v-model="executor.cleanup[cidx]" :key="cidx" language="bash" line-numbers />
-                </div>
-                <div class="control">
-                  <a class="button" @click="executor.cleanup.splice(cidx, 1)">
-                    <span class="icon"><font-awesome-icon icon="fas fa-times" /></span>
-                  </a>
-                </div>
+          <!-- Cleanup -->
+          <div class="field">
+            <label class="label">Cleanup</label>
+            <div class="field has-addons" v-for="(cleanup, cidx) in executor.cleanup" :key="cidx">
+              <div class="control is-expanded">
+                <CodeEditor v-model="executor.cleanup[cidx]" :key="cidx" language="bash" line-numbers />
+              </div>
+              <div class="control">
+                <a class="button" @click="executor.cleanup.splice(cidx, 1)">
+                  <span class="icon"><font-awesome-icon icon="fas fa-times" /></span>
+                </a>
               </div>
-              <button class="button" type="button" @click="executor.cleanup.push('')">
-                <span class="icon"><font-awesome-icon icon="fas fa-plus" /></span>
-                <span>Add Cleanup Command</span>
-              </button>
             </div>
+            <button class="button" type="button" @click="executor.cleanup.push('')">
+              <span class="icon"><font-awesome-icon icon="fas fa-plus" /></span>
+              <span>Add Cleanup Command</span>
+            </button>
+          </div>
 
-            <div class="field">
-              <label class="label">Requirements</label>
-              <div class="field has-addons" v-for="(requirement, rIdx) in abilityToEdit.requirements" :key="rIdx">
-                <div class="control is-expanded">
-                  <input class="input" type="text" v-model="requirement.module" placeholder="Requirement Module" />
-                </div>
-                <div class="control">
-                  <a class="button" @click="abilityToEdit.requirements.splice(rIdx, 1)">
-                    <span class="icon"><font-awesome-icon icon="fas fa-times" /></span>
-                  </a>
-                </div>
-                <div class="field has-addons" v-for="(rel, relIdx) in requirement.relationship_match" :key="relIdx">
-                  <input class="input" type="text" v-model="rel.source" placeholder="Source" />
-                  <input class="input" type="text" v-model="rel.edge" placeholder="Edge [optional]" />
-                  <input class="input" type="text" v-model="rel.target" placeholder="Target [optional]" />
-                </div>
+          <!-- Requirements -->
+          <div class="field">
+            <label class="label">Requirements</label>
+            <div class="field has-addons" v-for="(requirement, rIdx) in abilityToEdit.requirements" :key="rIdx">
+              <div class="control is-expanded">
+                <input class="input" type="text" v-model="requirement.module" placeholder="Requirement Module" />
+              </div>
+              <div class="control">
+                <a class="button" @click="abilityToEdit.requirements.splice(rIdx, 1)">
+                  <span class="icon"><font-awesome-icon icon="fas fa-times" /></span>
+                </a>
+              </div>
+              <div class="field has-addons" v-for="(rel, relIdx) in requirement.relationship_match" :key="relIdx">
+                <input class="input" type="text" v-model="rel.source" placeholder="Source" />
+                <input class="input" type="text" v-model="rel.edge" placeholder="Edge [optional]" />
+                <input class="input" type="text" v-model="rel.target" placeholder="Target [optional]" />
               </div>
-              <button class="button" type="button" @click="abilityToEdit.requirements.push({ module: '', relationship_match: [{ source: '', edge: '', target: '' }] })">
-                <span class="icon"><font-awesome-icon icon="fas fa-plus" /></span>
-                <span>Add Requirement</span>
-              </button>
             </div>
+            <button
+              class="button"
+              type="button"
+              @click="abilityToEdit.requirements.push({ module: '', relationship_match: [{ source: '', edge: '', target: '' }] })"
+            >
+              <span class="icon"><font-awesome-icon icon="fas fa-plus" /></span>
+              <span>Add Requirement</span>
+            </button>
+          </div>
 
-            <div class="field">
-              <label class="label">Parsers</label>
-              <div class="field has-addons" v-for="(parser, pIdx) in executor.parsers" :key="pIdx">
-                <div class="control is-expanded">
-                  <input class="input" type="text" v-model="parser.module" placeholder="Parser Module" />
-                </div>
-                <div class="control">
-                  <a class="button" @click="executor.parsers.splice(pIdx, 1)">
-                    <span class="icon"><font-awesome-icon icon="fas fa-times" /></span>
-                  </a>
-                </div>
-                <div class="field has-addons" v-for="(cfg, cfgIdx) in parser.parserconfigs" :key="cfgIdx">
-                  <input class="input" type="text" v-model="cfg.source" placeholder="Output Source" />
-                  <input class="input" type="text" v-model="cfg.edge" placeholder="Output Edge [optional]" />
-                  <input class="input" type="text" v-model="cfg.target" placeholder="Output Target [optional]" />
-                </div>
+          <!-- Parsers -->
+          <div class="field">
+            <label class="label">Parsers</label>
+            <div class="field has-addons" v-for="(parser, pIdx) in executor.parsers" :key="pIdx">
+              <div class="control is-expanded">
+                <input class="input" type="text" v-model="parser.module" placeholder="Parser Module" />
+              </div>
+              <div class="control">
+                <a class="button" @click="executor.parsers.splice(pIdx, 1)">
+                  <span class="icon"><font-awesome-icon icon="fas fa-times" /></span>
+                </a>
+              </div>
+              <div class="field has-addons" v-for="(cfg, cfgIdx) in parser.parserconfigs" :key="cfgIdx">
+                <input class="input" type="text" v-model="cfg.source" placeholder="Output Source" />
+                <input class="input" type="text" v-model="cfg.edge" placeholder="Output Edge [optional]" />
+                <input class="input" type="text" v-model="cfg.target" placeholder="Output Target [optional]" />
               </div>
-              <button class="button" type="button" @click="executor.parsers.push({ module: '', parserconfigs: [{ source: '', edge: '', target: '' }] })">
-                <span class="icon"><font-awesome-icon icon="fas fa-plus" /></span>
-                <span>Add Parser</span>
-              </button>
             </div>
+            <button
+              class="button"
+              type="button"
+              @click="executor.parsers.push({ module: '', parserconfigs: [{ source: '', edge: '', target: '' }] })"
+            >
+              <span class="icon"><font-awesome-icon icon="fas fa-plus" /></span>
+              <span>Add Parser</span>
+            </button>
           </div>
-          <!-- Footer -->
-          <footer class="modal-card-foot is-flex is-justify-content-space-between">
-            <div class="is-flex">
-              <button class="button" @click="setAbilityToEdit">
-                <span class="icon">
-                  <font-awesome-icon icon="fas fa-undo" />
-                </span>
-                <span>Reset</span>
-              </button>
-              <button class="button is-danger is-outlined" v-if="!props.creating" @click="deleteAbility">
-                <span class="icon">
-                  <font-awesome-icon icon="fas fa-trash" />
-                </span>
-                <span>Delete</span>
-              </button>
-            </div>
-            <div class="is-flex">
-              <button class="button" @click="emit('close')">Cancel</button>
-              <button class="button is-primary" @click="validateAndSaveAbility">
-                <span class="icon">
-                  <font-awesome-icon icon="fas fa-save" />
-                </span>
-                <span>{{ props.creating ? 'Create' : 'Save' }}</span>
-              </button>
-            </div>
-          </footer>
-        </section>
-      </div>
-      </div>
-</template>
-
-
-
-              
-                
-
-                
-            
-
-          
- 
-              
-
-              
+        </div>
+
+        <!-- Footer -->
+        <footer class="modal-card-foot is-flex is-justify-content-space-between">
+          <div class="is-flex">
+            <button class="button" @click="setAbilityToEdit">
+              <span class="icon">
+                <font-awesome-icon icon="fas fa-undo" />
+              </span>
+              <span>Reset</span>
+            </button>
 
-              
-    
+            <button class="button is-danger is-outlined" v-if="!props.creating && props.deleteMode !== 'none'" @click="deleteAbility">
+              <span class="icon">
+                <font-awesome-icon icon="fas fa-trash" />
+              </span>
+              <span>Delete</span>
+            </button>
+          </div>
 
+          <div class="is-flex">
+            <button class="button" @click="emit('close')">Cancel</button>
+            <button class="button is-primary" @click="validateAndSaveAbility">
+              <span class="icon">
+                <font-awesome-icon icon="fas fa-save" />
+              </span>
+              <span>{{ props.creating ? 'Create' : 'Save' }}</span>
+            </button>
+          </div>
+        </footer>
+      </section>
+    </div>
+  </div>
+</template>
 
 <style scoped>
 .box {
diff --git a/src/components/adversaries/DetailsTable.vue b/src/components/adversaries/DetailsTable.vue
index fe13f6f..9adfd75 100644
--- a/src/components/adversaries/DetailsTable.vue
+++ b/src/components/adversaries/DetailsTable.vue
@@ -79,18 +79,24 @@ const localAbilities = ref([]);
  * placeholders in the command are not satisfied by provided facts.
  */
 const shouldShowWarningIcon = (ability, executor) => {
-  const key = executor?.key;
-  if (!key) return false;
+  const executorCmd = executor?.command || '';
+  const requiredTraits = [...executorCmd.matchAll(/#\{([^}]+)\}/g)]
+    .map(m => m[1]);
 
-  const facts = ability.metadata?.executor_facts?.[key] || [];
-  const executorCmd = executor.command || "";
-  const requiredTraits = [...executorCmd.matchAll(/#\{([^}]+)\}/g)].map((m) => m[1]);
-  if (requiredTraits.length === 0) return false;
+  if (!requiredTraits.length) return false;
 
-  const providedTraits = new Set(facts.map((f) => f.trait).filter(Boolean));
-  return requiredTraits.some((t) => !providedTraits.has(t));
-};
+  const executorFacts = Array.isArray(executor.executor_facts)
+    ? executor.executor_facts
+    : [];
+
+  const providedTraits = new Set(
+    executorFacts
+      .filter(f => f.value?.trim())
+      .map(f => f.trait)
+  );
 
+  return requiredTraits.some(trait => !providedTraits.has(trait));
+};
 /**
  * Compute ability dependencies and fact coverage across the list.
  * Populates:
@@ -380,6 +386,25 @@ function selectAbility(ability) {
  * Persist the selected adversary profile via store.
  */
 async function validateAndSaveAdversary() {
+  console.debug(
+    "[DetailsTable] localAbilities → store sync preview",
+    localAbilities.value.map((a, i) => ({
+      index: i,
+      step_uuid: a.step_uuid,
+      ability_id: a.ability_id,
+      executor_facts: a.metadata?.executor_facts,
+    }))
+  );
+  adversaryStore.selectedAdversaryAbilities = cloneDeep(localAbilities.value);
+  console.debug(
+    "[DetailsTable] selectedAdversaryAbilities before save",
+    adversaryStore.selectedAdversaryAbilities.map((a, i) => ({
+      index: i,
+      step_uuid: a.step_uuid,
+      ability_id: a.ability_id,
+      executor_facts: a.metadata?.executor_facts,
+    }))
+  );
   await adversaryStore.saveSelectedAdversary($api);
 }
 
@@ -425,8 +450,17 @@ function exportAdversary() {
  * Append a single ability to the local list and notify parent.
  */
 function addAbilityToAdversary(ability) {
-  if (!ability.step_uuid) ability.step_uuid = uuidv4();
-  localAbilities.value.push(ability);
+  // ✅ clone so instances never share state
+  const inst = cloneDeep(ability);
+
+  // ✅ always new frontend instance id
+  inst.step_uuid = uuidv4();
+
+  // ✅ instance-scoped metadata
+  inst.metadata = inst.metadata || {};
+  inst.metadata.executor_facts = inst.metadata.executor_facts || {};
+
+  localAbilities.value.push(inst);
   emit("update:abilities", [...localAbilities.value]);
   showAbilitySelection.value = false;
 }
@@ -435,10 +469,7 @@ function addAbilityToAdversary(ability) {
  * Append multiple abilities (from another adversary) and notify parent.
  */
 function addAbilitiesFromAdversary(abilities) {
-  abilities.forEach((ability) => {
-    if (!ability.step_uuid) ability.step_uuid = uuidv4();
-    addAbilityToAdversary(ability);
-  });
+  abilities.forEach(a => addAbilityToAdversary(a));
   showAddFromAdversary.value = false;
 }
 
@@ -457,10 +488,13 @@ function deleteAbility(index) {
 function rebuildExecutors() {
   try {
     localAbilities.value.forEach((ability) => {
-      const executorFacts = ability?.metadata?.executor_facts;
-      if (!executorFacts) return;
+      const executorFacts = ability?.metadata?.executor_facts || {};
+      if (!executorFacts || !Object.keys(executorFacts).length) return;
 
-      const rebuiltExecutors = buildExecutorsFromFacts(ability.executors, executorFacts);
+      const rebuiltExecutors = buildExecutorsFromFacts(
+        ability.executors,
+        executorFacts
+      );
       if (Array.isArray(rebuiltExecutors)) {
         ability.executors = rebuiltExecutors;
       }
@@ -622,7 +656,7 @@ watch(
         th
     tbody
       tr.pointer(
-        v-for="(ability, index) in abilities"
+        v-for="(ability, index) in localAbilities"
         :class="getRowClass(ability)"
         @click="selectAbility(ability)"
         @mouseenter="setAbilityHover(ability.step_uuid)"
diff --git a/src/stores/adversaryStore.js b/src/stores/adversaryStore.js
index bef3eee..253a751 100644
--- a/src/stores/adversaryStore.js
+++ b/src/stores/adversaryStore.js
@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+
 import { useAbilityStore as abilityStore } from "@/stores/abilityStore";
 import { useObjectiveStore } from "@/stores/objectiveStore";
 import {
@@ -77,13 +78,25 @@ export const useAdversaryStore = defineStore("adversaryStore", {
      */
     async saveSelectedAdversary($api) {
       const buildAtomicOrdering = () =>
-        this.selectedAdversaryAbilities.map(({ ability_id, metadata = {} }) => {
-          const normalizedFacts = normalizeExecutorFactsForSave(
-            metadata.executor_facts || {}
+        this.selectedAdversaryAbilities.map((step) => {
+          const executorFactsFromExecutors = {};
+
+          const facts = step.metadata?.executor_facts || {};
+          Object.assign(executorFactsFromExecutors, facts);
+
+          // 🚨 FINAL NORMALIZATION (UI → backend)
+          const sanitizedFacts =
+            normalizeExecutorFactsForSave(executorFactsFromExecutors);
+          console.debug(
+            "[FE] sanitizedFacts",
+            JSON.stringify(sanitizedFacts, null, 2)
           );
+
           return {
-            ability_id,
-            metadata: { executor_facts: normalizedFacts },
+            ability_id: step.ability_id,
+            metadata: {
+              executor_facts: sanitizedFacts,
+            },
           };
         });
 
@@ -96,9 +109,18 @@ export const useAdversaryStore = defineStore("adversaryStore", {
           this.selectedAdversary.objective ??
           null,
         atomic_ordering: buildAtomicOrdering(),
+        tags: this.selectedAdversary.tags ?? [],
+        has_repeatable_abilities: this.selectedAdversary.has_repeatable_abilities ?? false,
+        plugin: this.selectedAdversary.plugin ?? '',
       };
+      console.log("[AdversaryStore] Saving adversary with payload:", reqBody);
 
       try {
+        console.debug(
+          "[FE] PATCH payload atomic_ordering",
+          JSON.stringify(reqBody.atomic_ordering, null, 2)
+        );
+
         const response = await $api.patch(
           `/api/v2/adversaries/${reqBody.adversary_id}`,
           reqBody
@@ -177,38 +199,48 @@ export const useAdversaryStore = defineStore("adversaryStore", {
 
           const stepId = stepObj.ability_id;
           const abilityTemplate = abilitiesStore.abilities.find(
-            (a) => a.ability_id === stepId
+            (a) => a.id === stepId || a.ability_id === stepId
           );
+
           if (!abilityTemplate) {
             console.warn(
-              `[Automation] Ability not found for step ${index}: ${stepId}`
+              `[Automation] Ability not found in abilityStore for step ${index}: ${stepId} — using step data`
             );
-            return null;
+            // Fallback: use step itself as the ability
+            
           }
 
           const clonedAbility = cloneDeep(abilityTemplate);
           const stepUuid = stepObj.step_uuid || uuidv4();
+          stepObj.step_uuid = stepUuid;
 
-          // Merge metadata (step overrides template)
+          // 1️⃣ Merge metadata (step overrides template)
           const metadata = {
             ...(clonedAbility.metadata || {}),
             ...(stepObj.metadata || {}),
           };
           metadata.executor_facts ??= {};
 
-          // Normalize and rebuild executors
+          // 2️⃣ 🔒 FIRST: establish stable executor keys
+          clonedAbility.executors.forEach(exec => {
+            exec.key = `${stepUuid}::${exec.name}::${exec.platform}`;
+          });
+
+          // 3️⃣ THEN normalize executor_facts (now keys match)
           const normalizedStep = normalizeStepExecutorFacts(
             { ...stepObj, metadata },
             clonedAbility.executors
           );
+
           const normalizedExecutorFacts =
             normalizedStep.metadata.executor_facts ?? {};
-          const rebuiltExecutors = buildExecutorsFromFacts(
+
+          // 4️⃣ Rebuild executors with correct facts
+          clonedAbility.executors = buildExecutorsFromFacts(
             clonedAbility.executors,
             normalizedExecutorFacts
           );
 
-          clonedAbility.executors = rebuiltExecutors;
           clonedAbility.metadata = {
             ...clonedAbility.metadata,
             ...metadata,
@@ -245,6 +277,7 @@ export const useAdversaryStore = defineStore("adversaryStore", {
       // Ensure abilities are available
       if (!abilityStoreInstance.abilities.length) {
         await abilityStoreInstance.getAbilities($api);
+        
       }
 
       // Selected adversary shell
@@ -311,21 +344,29 @@ export const useAdversaryStore = defineStore("adversaryStore", {
      * Update a single step (by step_uuid) in selectedAdversaryAbilities.
      * Uses shallow merge to preserve reactivity.
      */
-    updateAbilityInstance(updatedStep) {
+    updateAbilityInstance(updatedAbility) {
       const idx = this.selectedAdversaryAbilities.findIndex(
-        (s) => s.step_uuid === updatedStep.step_uuid
+        a => a.step_uuid === updatedAbility.step_uuid
       );
-      if (idx !== -1) {
-        this.selectedAdversaryAbilities[idx] = {
-          ...this.selectedAdversaryAbilities[idx],
-          ...updatedStep,
-        };
-      } else {
-        console.warn(
-          "[Automation] Could not find ability with step_uuid:",
-          updatedStep.step_uuid
-        );
-      }
-    },
+      if (idx === -1) return;
+
+      const existing = this.selectedAdversaryAbilities[idx];
+
+      this.selectedAdversaryAbilities[idx] = {
+        ...existing,
+        ...updatedAbility,
+        metadata: {
+          ...(existing.metadata || {}),
+          ...(updatedAbility.metadata || {}),
+          executor_facts:
+            updatedAbility.metadata?.executor_facts ??
+            existing.metadata?.executor_facts ??
+            {}
+        }
+      };
+
+    }
+
+
   },
 });
diff --git a/src/utils/executorUtils.js b/src/utils/executorUtils.js
index 795686e..46c51ff 100644
--- a/src/utils/executorUtils.js
+++ b/src/utils/executorUtils.js
@@ -1,5 +1,5 @@
-import cloneDeep from 'lodash/cloneDeep';
-
+import { v4 as uuidv4 } from "uuid";
+import cloneDeep from "lodash/cloneDeep";
 /**
  * Rebuilds an ability’s executor array using executor_facts keys
  * like linux_sh_0, linux_sh_1, etc.
@@ -8,26 +8,20 @@ import cloneDeep from 'lodash/cloneDeep';
  * @param {Object} executorFactsMap - Normalized executor_facts object
  * @returns {Array} New executor list with injected facts
  */
-export function buildExecutorsFromFacts(originalExecutors, executorFactsMap) {
+export function buildExecutorsFromFacts(originalExecutors, executorFactsMap = {}) {
   if (!Array.isArray(originalExecutors)) return [];
-    const platformNameCounts = {};
 
-return originalExecutors.map((executor) => {
-  const base = `${executor.platform}_${executor.name}`;
-  const count = platformNameCounts[base] ?? 0;
-  platformNameCounts[base] = count + 1;
+  return originalExecutors.map((executor) => {
+    const platformFacts = executorFactsMap?.[executor.platform] || [];
 
-  const key = `${base}_${count}`;
-  const facts = executorFactsMap?.[key] || [];
-  
-  return {
-    ...cloneDeep(executor),
-    executor_facts: facts.map(({ trait, value }) => ({ trait, value })),
-    key: key,
-    payloads: Array.isArray(executor.payloads) ? executor.payloads : [],
-  };
-});
+    return {
+      ...cloneDeep(executor),
+      executor_facts: cloneDeep(platformFacts),
+      payloads: Array.isArray(executor.payloads) ? executor.payloads : [],
+    };
+  });
 }
+
 /**
  * Normalizes unstructured executor_facts using ability executor info
  *
@@ -36,43 +30,45 @@ return originalExecutors.map((executor) => {
  * @returns {Object} Step with normalized executor_facts
  */
 export function normalizeStepExecutorFacts(step, abilityExecutors) {
-      const executorFacts = step?.metadata?.executor_facts;
-      if (!executorFacts || typeof executorFacts !== 'object') return step;
-      console.debug('[normalizeStepExecutorFacts] input step:', JSON.stringify(step, null, 2));
-      console.debug('[normalizeStepExecutorFacts] input executor_facts:', JSON.stringify(executorFacts, null, 2));
-      const normalizedFacts = {};
-      for (const [platformKey, facts] of Object.entries(executorFacts)) {
-        if (!platformKey.includes('_')) {
-          const matchingExecutors = abilityExecutors?.filter(e => e.platform === platformKey) || [];
-          matchingExecutors.forEach((executor, i) => {
-            const key = `${platformKey}_${executor.name}_${i}`;
-            normalizedFacts[key] = facts;
-          });
-        } else {
-          normalizedFacts[platformKey] = facts;
-        }
-      }
+  const executorFacts = step?.metadata?.executor_facts;
+  if (!executorFacts || typeof executorFacts !== "object") return step;
 
-      return {
-        ...step,
-        metadata: {
-          ...step.metadata,
-          executor_facts: normalizedFacts
-        }
-      };
-    }
-    export function normalizeExecutorFactsForSave(executorFacts) {
-      const normalized = {};
-      for (const [key, facts] of Object.entries(executorFacts || {})) {
-        if (!Array.isArray(facts) || facts.length === 0) continue;
+  return {
+    ...step,
+    metadata: {
+      ...step.metadata,
+      executor_facts: executorFacts,
+    },
+  };
+}
 
-        const [platform] = key.split('_');
-        if (!normalized[platform]) {
-          normalized[platform] = facts.map(({ trait, value }) => ({ trait, value }));
-        } else {
-          normalized[platform].push(...facts.map(({ trait, value }) => ({ trait, value })));
-        }
-      }
-      return normalized;
+    // utils/executorUtils.js
+export function normalizeExecutorFactsForSave(executorFacts = {}) {
+  const normalized = {};
+
+  for (const [key, facts] of Object.entries(executorFacts)) {
+    if (!Array.isArray(facts) || facts.length === 0) continue;
+
+    // UI keys supported:
+    // - uuid::linux
+    // - linux_sh_0
+    // - linux (already backend style)
+    let platform = key;
+
+    if (key.includes("::")) {
+      platform = key.split("::").pop();      // uuid::linux -> linux
+    } else if (key.includes("_")) {
+      platform = key.split("_")[0];          // linux_sh_0 -> linux
     }
 
+    normalized[platform] ??= [];
+    normalized[platform].push(
+      ...facts.map(({ trait, value }) => ({ trait, value }))
+    );
+  }
+
+  return normalized;
+}
+
+
+
diff --git a/src/views/AbilitiesView.vue b/src/views/AbilitiesView.vue
index 5f48928..83abc7b 100644
--- a/src/views/AbilitiesView.vue
+++ b/src/views/AbilitiesView.vue
@@ -117,6 +117,9 @@ CreateEditAbility(
   :ability="selectedAbility"
   :active="showAbilityModal"
   :creating="isCreatingAbility"
+  :allow-command-edit="true"
+  :allow-trait-edit="false"
+  delete-mode="ability"
   @close="showAbilityModal = false"
 )
 </template>
diff --git a/src/views/AdversariesView.vue b/src/views/AdversariesView.vue
index d285a56..6d74c75 100644
--- a/src/views/AdversariesView.vue
+++ b/src/views/AdversariesView.vue
@@ -160,29 +160,25 @@ async function handleImportedProfile(profile) {
  * Merges metadata and executor facts into a complete editable object.
  */
 function handleAbilityClick(step) {
-  console.debug("[handleAbilityClick]", new Date().toISOString(), step?.ability_id);
+  const stepUuid = step?.step_uuid;
+  if (!stepUuid) return;
 
-  const full = abilities.value.find(a => a.ability_id === step.ability_id);
-  if (!full) {
-    console.warn("Missing ability:", step.ability_id);
-    return;
-  }
+  const live = selectedAdversaryAbilities.value.find(
+    a => a.step_uuid === stepUuid
+  );
 
-  const built = {
-    ...cloneDeep(full),
-    step_uuid: step.step_uuid || crypto.randomUUID(),
-    metadata: {
-      ...(full.metadata || {}),
-      ...(step.metadata || {}),
-      executor_facts: step.metadata?.executor_facts || full.metadata?.executor_facts || {},
-    },
-  };
+  const built = cloneDeep(live || step);
+
+  built.executors = Array.isArray(built.executors) ? built.executors : [];
+  built.metadata = built.metadata || {};
+  built.metadata.executor_facts = built.metadata.executor_facts || {};
 
-  built.executors = buildExecutorsFromFacts(built.executors, built.metadata.executor_facts);
   selectedAbility.value = built;
   showEditModal.value = true;
 }
 
+
+
 /** Close the edit ability modal. */
 function closeEditModal() {
   showEditModal.value = false;
@@ -191,6 +187,18 @@ function closeEditModal() {
 /** Apply updates to an ability instance within the adversary store. */
 function onUpdateAbility(updatedAbility) {
   adversaryStore.updateAbilityInstance(updatedAbility);
+
+  // ✅ force new array ref so DetailsTable watcher fires
+  adversaryStore.selectedAdversaryAbilities = [
+    ...adversaryStore.selectedAdversaryAbilities
+  ];
+
+  selectedAbility.value = cloneDeep(updatedAbility);
+}
+
+function removeAbilityFromAdversary(stepUuid) {
+  selectedAdversaryAbilities.value =
+    selectedAdversaryAbilities.value.filter(a => a.step_uuid !== stepUuid);
 }
 
 
@@ -277,14 +285,18 @@ onMounted(async () => {
 
     <!-- Ability Edit Modal -->
     <EditAbilityModal
-            v-if="showEditModal"
-            :active="showEditModal"
-            :ability="selectedAbility"
-            :agent="selectedAgent"
-            :operationFacts="operationFacts"
-            @close="closeEditModal"
-            @update="onUpdateAbility"
-            />
+      v-if="showEditModal"
+      :active="showEditModal"
+      :ability="selectedAbility"
+      :agent="selectedAgent"
+      :operationFacts="operationFacts"
+      @remove="removeAbilityFromAdversary"
+      :allow-command-edit="false"
+      :allow-trait-edit="true"
+      delete-mode="adversary"
+      @close="closeEditModal"
+      @update="onUpdateAbility"
+    />
     <!-- Modal & Details -->
     <ImportAutomationModal
       v-if="modals.automationImport"
diff --git a/vite.config.js b/vite.config.js
index 07aa352..8715e93 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,26 +1,54 @@
 import { fileURLToPath, URL } from "url";
-
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  server: {
-    fs: {
-      allow: ["../"],
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+
+  // Backend Caldera server
+  const backend = env.VITE_BACKEND_URL || "http://localhost:8888";
+
+  return {
+    plugins: [vue()],
+    server: {
+      host: "0.0.0.0",
+      port: 3000,
+      fs: {
+        allow: ["../"],
+      },
+      proxy: {
+        // 🔐 Auth
+        "/enter": {
+          target: backend,
+          changeOrigin: true,
+        },
+        "/logout": {
+          target: backend,
+          changeOrigin: true,
+        },
+
+        // 🔌 Core API
+        "/api": {
+          target: backend,
+          changeOrigin: true,
+        },
+
+        // 🧩 Plugins
+        "/plugins": {
+          target: backend,
+          changeOrigin: true,
+        },
+      },
+    },
+    build: {
+      rollupOptions: {
+        external: [/gui/],
+      },
     },
-  },
-  build: {
-    rollupOptions: {
-      external: [
-        /gui/
-      ]
-    }
-  },
-  resolve: {
-    alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url))
+    resolve: {
+      alias: {
+        "@": fileURLToPath(new URL("./src", import.meta.url)),
+      },
     },
-  }
+  };
 });

From dd60f0e8450ef01ca0f746bafb9b26bc2fbabc5e Mon Sep 17 00:00:00 2001
From: deacon <marksoccerman1@aol.com>
Date: Fri, 6 Feb 2026 18:45:36 -0500
Subject: [PATCH 04/12] working fact breakdown table

---
 .../abilities/CreateEditAbility.vue           |  94 ++---
 src/components/adversaries/DetailsTable.vue   |  80 +++--
 .../adversaries/FactBreakdownModal.vue        | 329 ++++++++++++++++--
 3 files changed, 413 insertions(+), 90 deletions(-)

diff --git a/src/components/abilities/CreateEditAbility.vue b/src/components/abilities/CreateEditAbility.vue
index 90d39cc..45d741e 100644
--- a/src/components/abilities/CreateEditAbility.vue
+++ b/src/components/abilities/CreateEditAbility.vue
@@ -142,6 +142,15 @@ function getStepUuid() {
   return created;
 }
 
+
+// /mnt/data/CreateEditAbility.vue (script setup, near initializeUserFacts)
+function ensureTraitSlot(executor, trait) {
+  const key = getExecutorKey(executor);
+  userFactsMap[key] ??= {};
+  userFactsMap[key][trait] ??= { customValue: '', selected: [] };
+  return userFactsMap[key][trait];
+}
+
 /**
  * getExecutorKey
  * - Single source of truth for executor identity in the UI.
@@ -152,14 +161,6 @@ function getStepUuid() {
 function getExecutorKey(executor) {
   const stepUuid = ensureStepUuid();
   const key = `${stepUuid}::${executor.name}::${executor.platform}`;
-
-  console.log('[Ability.vue] executor UI key:', {
-    stepUuid,
-    name: executor.name,
-    platform: executor.platform,
-    key
-  });
-
   return key;
 }
 
@@ -331,20 +332,28 @@ function initializeUserFacts() {
 
     const platformFacts = executorFacts[executor.platform] || [];
 
-    platformFacts.forEach(({ trait, value }) => {
+    // ✅ group persisted facts by trait
+    const byTrait = {};
+    for (const { trait, value } of platformFacts) {
+      (byTrait[trait] ??= []).push(String(value ?? ''));
+    }
+
+    // ✅ hydrate into customValue + selected
+    for (const [trait, values] of Object.entries(byTrait)) {
       userFactsMap[key][trait] ??= { customValue: '', selected: [] };
-      if (!userFactsMap[key][trait].selected.includes(value)) {
-        userFactsMap[key][trait].selected.push(value);
-      }
-    });
 
+      const trimmed = values.map(v => v.trim()).filter(Boolean);
+      userFactsMap[key][trait].customValue = trimmed[0] ?? '';
+      userFactsMap[key][trait].selected = trimmed.slice(1);
+    }
+
+    // ensure trait slots exist for all placeholders
     getCommandFields(executor.command || '').forEach(trait => {
       userFactsMap[key][trait] ??= { customValue: '', selected: [] };
     });
   }
 }
 
-
 /**
  * validateAndSaveAbility
  * - Validates and emits an updated ability/step object.
@@ -360,52 +369,52 @@ function validateAndSaveAbility() {
 
   validation.executors =
     abilityToEdit.value.executors?.length &&
-    abilityToEdit.value.executors.every(ex => ex.platform && ex.name && ex.command && ex.timeout >= 0)
+    abilityToEdit.value.executors.every(
+      ex => ex.platform && ex.name && ex.command && ex.timeout >= 0
+    )
       ? ''
       : 'Executors are invalid or missing.';
 
   if (!Object.values(validation).every(v => !v)) return;
 
-  // Build platform-keyed executor_facts (backwards compatible)
+  // ✅ Build platform-keyed executor_facts from userFactsMap
   const executorFacts = {};
 
-(abilityToEdit.value.executors || []).forEach(executor => {
-  const key = getExecutorKey(executor);
-  const byTrait = userFactsMap[key] || {};
-  const platform = executor.platform;
+  (abilityToEdit.value.executors || []).forEach((executor) => {
+    const key = getExecutorKey(executor);
+    const platform = executor.platform;
 
-  executorFacts[platform] ??= [];
+    const traitMap = userFactsMap[key] || {};
+    executorFacts[platform] ??= [];
 
-  Object.entries(byTrait).forEach(([trait, data]) => {
-    if (data.customValue) {
-      executorFacts[platform].push({ trait, value: data.customValue });
-    }
-    data.selected.forEach(v => {
-      executorFacts[platform].push({ trait, value: v });
+    Object.entries(traitMap).forEach(([trait, data]) => {
+      const custom = (data?.customValue ?? '').trim();
+      if (custom) {
+        executorFacts[platform].push({ trait, value: custom });
+      }
+
+      (data?.selected ?? []).forEach((v) => {
+        const val = String(v ?? '').trim();
+        if (val) {
+          executorFacts[platform].push({ trait, value: val });
+        }
+      });
     });
   });
-});
 
-  // Update local
+  // Update local ability
   abilityToEdit.value.step_uuid = getStepUuid();
   abilityToEdit.value.metadata = {
     ...(abilityToEdit.value.metadata || {}),
     executor_facts: executorFacts
   };
 
-  // Emit updated object back to parent
-  emit('update', {
-    ...cloneDeep(abilityToEdit.value),
-    step_uuid: abilityToEdit.value.step_uuid,
-    metadata: {
-      ...(abilityToEdit.value.metadata || {}),
-      executor_facts: executorFacts
-    }
-  });
-
+  // Emit updated object
+  emit('update', cloneDeep(abilityToEdit.value));
   emit('close');
 }
 
+
 function ensureStepUuid() {
   if (!abilityToEdit.value.step_uuid) {
     abilityToEdit.value.step_uuid = uuidv4();
@@ -699,12 +708,7 @@ watch(
                       class="input mb-2"
                       :disabled="!props.allowTraitEdit"
                       placeholder="Enter a custom value"
-                      @input="(e) => {
-                        const key = getExecutorKey(executor, index);
-                        userFactsMap[key] ??= {};
-                        userFactsMap[key][trait] ??= { customValue: '', selected: [] };
-                        userFactsMap[key][trait].customValue = e.target.value;
-                      }"
+                      v-model="ensureTraitSlot(executor, trait).customValue"
                     />
 
                     <!-- Suggested facts -->
diff --git a/src/components/adversaries/DetailsTable.vue b/src/components/adversaries/DetailsTable.vue
index 9adfd75..65cc8ca 100644
--- a/src/components/adversaries/DetailsTable.vue
+++ b/src/components/adversaries/DetailsTable.vue
@@ -78,25 +78,44 @@ const localAbilities = ref([]);
  * Decide whether to show a warning icon on an executor because required #{trait}
  * placeholders in the command are not satisfied by provided facts.
  */
+// /mnt/data/DetailsTable.vue (around L81)
 const shouldShowWarningIcon = (ability, executor) => {
-  const executorCmd = executor?.command || '';
-  const requiredTraits = [...executorCmd.matchAll(/#\{([^}]+)\}/g)]
-    .map(m => m[1]);
-
-  if (!requiredTraits.length) return false;
-
-  const executorFacts = Array.isArray(executor.executor_facts)
-    ? executor.executor_facts
-    : [];
+  if (!selectedSource.value || !selectedSource.value.facts) return null;
+  const cmd = String(executor?.command || "");
+  const requiredTraits = [...cmd.matchAll(/#\{([^}]+)\}/g)].map(m => m[1]);
+  if (!requiredTraits.length) return null;
 
+  // executor-provided facts
+  const executorFacts = ability?.metadata?.executor_facts?.[executor.platform] || [];
   const providedTraits = new Set(
-    executorFacts
-      .filter(f => f.value?.trim())
-      .map(f => f.trait)
+    executorFacts.filter(f => f.value?.trim()).map(f => f.trait)
+  );
+
+  // fact source traits
+  const source = selectedSource.value;
+  const sourceTraits = new Set(
+    (source?.facts || []).map(f => f.trait)
   );
 
-  return requiredTraits.some(trait => !providedTraits.has(trait));
+  // ❌ missing entirely → warning
+  if (requiredTraits.some(
+    trait => !providedTraits.has(trait) && !sourceTraits.has(trait)
+  )) {
+    return "warning";
+  }
+
+  // 🧩 source-backed but not yet satisfied
+  if (requiredTraits.some(
+    trait => !providedTraits.has(trait) && sourceTraits.has(trait)
+  )) {
+    return "source";
+  }
+
+  // ✅ fully satisfied
+  return null;
 };
+
+
 /**
  * Compute ability dependencies and fact coverage across the list.
  * Populates:
@@ -264,20 +283,19 @@ function getExecutorDetail(detail, ability) {
     case "requirements":
       return Array.isArray(ability.requirements) && ability.requirements.length > 0;
 
+    // /mnt/data/DetailsTable.vue (replace case "platforms")
     case "platforms": {
-      const builtExecutors = buildExecutorsFromFacts(
-        ability.executors,
-        ability.metadata?.executor_facts || {}
-      );
-      return builtExecutors
+      const executors = ability.executors || [];
+      return executors
         .map((executor) => ({
           platform: executor.platform,
           name: executor.name,
-          key: executor.key,
+          key: executor.key, // already step_uuid-scoped by the store
           hasWarning: shouldShowWarningIcon(ability, executor),
         }))
         .filter((e) => e.platform && e.name);
     }
+
     default:
       return false;
   }
@@ -692,10 +710,15 @@ watch(
               class="executor-icon"
             )
             font-awesome-icon(
-              v-if="executor.hasWarning"
-              icon="fa-exclamation-triangle"
+              v-if="executor.hasWarning === 'warning'"
+              icon="fas fa-exclamation-triangle"
               class="warning-icon"
             )
+            font-awesome-icon(
+              v-else-if="executor.hasWarning === 'source'"
+              icon="fas fa-puzzle-piece"
+              class="source-icon"
+            )
         td.has-text-centered(:class="{ 'unlock': onHoverUnlocks.indexOf(ability.step_uuid) > -1 }")
           span(
             v-if="abilityDependencies[ability.step_uuid] && getExecutorDetail('parser', ability)"
@@ -736,7 +759,11 @@ watch(
 
   //- Modals
   AbilitySelection(:active="showAbilitySelection" @select="addAbilityToAdversary" @close="showAbilitySelection = false" :canCreate="true")
-  FactBreakdownModal(:breakdown="factBreakdown")
+  FactBreakdownModal(
+    v-if="selectedSource && selectedSource.id && localAbilities.length"
+    :abilities="localAbilities"
+    :selectedSource="selectedSource"
+  )
   AddAbilitiesFromAdversaryModal(:active="showAddFromAdversary" @select="addAbilitiesFromAdversary" @close="showAddFromAdversary = false")
   DeleteAdversaryConfirmationModal
 </template>
@@ -799,6 +826,15 @@ watch(
   z-index: 2;
   pointer-events: none;
 }
+.source-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 0.7rem;
+  color: #a77dff;
+  z-index: 2;
+  pointer-events: none;
+}
 /* Center group  */
 .toolbar-center .field.is-grouped {
   display: flex;
diff --git a/src/components/adversaries/FactBreakdownModal.vue b/src/components/adversaries/FactBreakdownModal.vue
index f7396ac..64cb85b 100644
--- a/src/components/adversaries/FactBreakdownModal.vue
+++ b/src/components/adversaries/FactBreakdownModal.vue
@@ -1,33 +1,316 @@
 <script setup>
+import { computed } from "vue";
 import { useCoreDisplayStore } from "../../stores/coreDisplayStore";
 import { storeToRefs } from "pinia";
 
 const coreDisplayStore = useCoreDisplayStore();
 const { modals } = storeToRefs(coreDisplayStore);
 
-const props = defineProps(['breakdown']);
+const props = defineProps({
+  abilities: {
+    type: Array,
+    required: true
+  },
+  selectedSource: {
+    type: [Object, null],
+    required: false,
+    default: null
+  }
+});
+
+function isTraitSatisfied(ability, executor, trait) {
+  const facts = ability?.metadata?.executor_facts?.[executor.platform] || [];
+  return facts.some(f => f.trait === trait && String(f.value).trim());
+}
+
+
+const breakdown = computed(() => {
+  if (!props.abilities || !props.selectedSource) {
+    return { sourceFacts: [], requiredFacts: [] };
+  }
+
+  const source = props.selectedSource?.value ?? props.selectedSource;
+
+  /* ───────────── Source facts ───────────── */
+
+  const factsByTrait = {};
+  source?.facts?.forEach(f => {
+    if (!f?.trait) return;
+    factsByTrait[f.trait] ??= [];
+    factsByTrait[f.trait].push(f.value);
+  });
+
+  const sourceFactMap = new Map();
+  Object.entries(factsByTrait).forEach(([trait, values]) => {
+    sourceFactMap.set(trait, {
+      trait,
+      values,
+      usage: []
+    });
+  });
+
+  /* ───────────── Required-only facts ───────────── */
+
+  const requiredFactMap = new Map();
+
+  props.abilities.forEach((ability, idx) => {
+    const order = idx + 1;
+
+    ability?.executors?.forEach(exec => {
+      const cmd = exec?.command || "";
+      const traits = [...cmd.matchAll(/#\{([^}]+)\}/g)].map(m => m[1]);
+
+      traits.forEach(trait => {
+        const targetMap = sourceFactMap.has(trait)
+          ? sourceFactMap
+          : requiredFactMap;
+
+        if (!targetMap.has(trait)) {
+          targetMap.set(trait, {
+            trait,
+            values: sourceFactMap.has(trait) ? factsByTrait[trait] : [],
+            usage: []
+          });
+        }
+
+        const entry = targetMap.get(trait);
+
+        let usageRow = entry.usage.find(
+          u => u.order === order && u.ability === ability.name
+        );
+
+        if (!usageRow) {
+          usageRow = {
+            order,
+            ability: ability.name,
+            abilityRef: ability,
+            executors: []
+          };
+          entry.usage.push(usageRow);
+        }
+
+        usageRow.executors.push({
+          platform: exec.platform,
+          name: exec.name
+        });
+      });
+    });
+  });
+
+  return {
+    sourceFacts: Array.from(sourceFactMap.values()),
+    requiredFacts: Array.from(requiredFactMap.values())
+  };
+});
 </script>
+<style scoped>
+.icon-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.25rem;
+}
+
+.executor-icon {
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+}
+
+/* Overlay icons — MATCH DetailsTable */
+.needs-input-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 0.7rem;
+  color: #f2b705;
+  z-index: 3;
+  pointer-events: none;
+}
+.fact-source-values {
+  color: #a77dff;
+  font-weight: 500;
+}
+
+</style>
+<template>
+  <div
+    class="modal"
+    :class="{ 'is-active': modals.adversaries.showFactBreakdown }"
+  >
+    <div
+      class="modal-background"
+      @click="modals.adversaries.showFactBreakdown = false"
+    ></div>
+
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Fact Breakdown</p>
+      </header>
+
+      <section class="modal-card-body">
+
+        <!-- ───────────── Fact Source Facts ───────────── -->
+        <div v-if="breakdown.sourceFacts.length">
+            <h3 class="title is-5 mb-4">Fact Source Facts</h3>
+
+            <div
+            class="fact-block mb-6"
+            v-for="fact in breakdown.sourceFacts"
+            :key="fact.trait"
+            >
+            <!-- Fact header -->
+            <h4 class="title is-6 mb-1">
+                {{ fact.trait }}
+            </h4>
+
+            <p class="has-text-grey mb-3">
+                Value:
+                <span class="fact-source-values">
+                    {{ fact.values.join(', ') || '—' }}
+                </span>
+
+            </p>
+
+            <!-- Usage table -->
+            <table class="table is-narrow is-fullwidth">
+                <thead>
+                <tr>
+                    <th style="width: 80px;">Order #</th>
+                    <th>Ability</th>
+                    <th style="width: 220px;">Executors</th>
+                </tr>
+                </thead>
+
+                <tbody>
+                <tr
+                    v-for="use in fact.usage"
+                    :key="`${use.order}-${use.ability}`"
+                >
+                    <td>{{ use.order }}</td>
+                    <td>{{ use.ability }}</td>
+
+                    <!-- Executors grouped -->
+                    <td>
+                    <span
+                        v-for="exec in use.executors"
+                        :key="`${exec.platform}-${exec.name}`"
+                        class="icon-wrapper mr-1">
+                        <font-awesome-icon
+                        class="executor-icon"
+                        :icon="
+                            exec.platform.includes('windows')
+                            ? 'fab fa-windows'
+                            : exec.platform.includes('darwin')
+                            ? 'fab fa-apple'
+                            : 'fab fa-linux'
+                        "
+                        v-tooltip="`${exec.platform} / ${exec.name}`"
+                        />
+                    </span>
+                    </td>
+                </tr>
+
+                <!-- Empty usage row -->
+                <tr v-if="!fact.usage.length">
+                    <td colspan="3" class="has-text-grey has-text-centered">
+                    Not used by any ability yet
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+
+            <hr />
+            </div>
+        </div>
+
+        <!-- ───────────── Required (User-Defined) Facts ───────────── -->
+        <div v-if="breakdown.requiredFacts.length" class="mt-6">
+            <h3 class="title is-5 mb-4">
+            Required Facts (Not in Fact Source)
+            </h3>
+
+            <div
+            class="fact-block mb-6"
+            v-for="fact in breakdown.requiredFacts"
+            :key="fact.trait"
+            >
+            <h4 class="title is-6 mb-1">
+                {{ fact.trait }}
+            </h4>
+
+            <table class="table is-narrow is-fullwidth">
+                <thead>
+                <tr>
+                    <th style="width: 80px;">Order #</th>
+                    <th>Ability</th>
+                    <th style="width: 220px;">Executors</th>
+                </tr>
+                </thead>
+
+                <tbody>
+                <tr
+                    v-for="use in fact.usage"
+                    :key="`${use.order}-${use.ability}`"
+                >
+                    <td>{{ use.order }}</td>
+                    <td>{{ use.ability }}</td>
+
+                    <td>
+                        <span
+                            v-for="exec in use.executors"
+                            :key="`${exec.platform}-${exec.name}`"
+                            class="icon-wrapper mr-1"
+                            >
+                            <!-- Platform icon -->
+                            <font-awesome-icon
+                                :icon="
+                                exec.platform.includes('windows')
+                                    ? 'fab fa-windows'
+                                    : exec.platform.includes('darwin')
+                                    ? 'fab fa-apple'
+                                    : 'fab fa-linux'
+                                "
+                                class="executor-icon"
+                                v-tooltip="`${exec.platform} / ${exec.name}`"
+                            />
+
+                            <!-- 🟡 Required but unsatisfied -->
+                            <font-awesome-icon
+                                v-if="!isTraitSatisfied(use.abilityRef, exec, fact.trait)"
+                                icon="fas fa-exclamation-triangle"
+                                class="needs-input-icon"
+                                v-tooltip="'Required fact has no values in selected fact source'"
+                            />
+                        </span>
+
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+
+            <hr />
+            </div>
+        </div>
+
+        <!-- ───────────── Empty State ───────────── -->
+        <p
+            v-if="!breakdown.sourceFacts.length && !breakdown.requiredFacts.length"
+            class="has-text-centered has-text-grey"
+        >
+            No facts found in selected fact source
+        </p>
+
+        </section>
 
-<template lang="pug">
-.modal(:class="{ 'is-active': modals.adversaries.showFactBreakdown }")
-    .modal-background(@click="modals.adversaries.showFactBreakdown = false")
-    .modal-card 
-        header.modal-card-head 
-            p.modal-card-title Fact Breakdown
-        .modal-card-body 
-            p.help.tags.mb-1.has-text-centered
-                span.tag.is-success Required and Collected
-                span.tag.is-warning Required and not Collected
-                span.tag.is-black Collected but not Required
-            hr.mt-2
-            .tags(v-if="breakdown.length")
-                span.tag(v-for="fact in breakdown" :class="{ 'is-warning': fact.type === 'unmet', 'is-success': fact.type === 'met' }")
-                    span.icon
-                        font-awesome-icon(v-if="fact.type === 'unmet'" icon="fas fa-exclamation-triangle")
-                        font-awesome-icon(v-if="fact.type === 'met'" icon="fas fa-check")
-                        font-awesome-icon(v-if="fact.type === 'extra'" icon="fas fa-minus")
-                    span {{ fact.fact }}
-            p(v-else) No facts to show
-        footer.modal-card-foot.is-flex.is-justify-content-flex-end 
-            button.button(@click="modals.adversaries.showFactBreakdown = false") Close
+      <footer class="modal-card-foot is-flex is-justify-content-flex-end">
+        <button
+          class="button"
+          @click="modals.adversaries.showFactBreakdown = false"
+        >
+          Close
+        </button>
+      </footer>
+    </div>
+  </div>
 </template>

From cbc519feac0b71b7469d3a4330ee6c8c417a333f Mon Sep 17 00:00:00 2001
From: deacon <marksoccerman1@aol.com>
Date: Sat, 7 Feb 2026 14:13:06 -0500
Subject: [PATCH 05/12] some warning cleanup

---
 src/components/adversaries/DetailsTable.vue | 23 ++++++++++++++-------
 src/views/AdversariesView.vue               |  1 +
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/adversaries/DetailsTable.vue b/src/components/adversaries/DetailsTable.vue
index 65cc8ca..0ad9f24 100644
--- a/src/components/adversaries/DetailsTable.vue
+++ b/src/components/adversaries/DetailsTable.vue
@@ -7,7 +7,7 @@
  */
 
 import { storeToRefs } from "pinia";
-import { ref, reactive, watch, inject, onMounted } from "vue";
+import { ref, reactive, watch, inject, onMounted, computed } from "vue";
 import cloneDeep from "lodash/cloneDeep";
 import { v4 as uuidv4 } from "uuid";
 
@@ -20,13 +20,21 @@ import AddAbilitiesFromAdversaryModal from "@/components/adversaries/AddAbilitie
 import AbilitySelection from "@/components/abilities/AbilitySelection.vue";
 import DeleteAdversaryConfirmationModal from "./DeleteAdversaryConfirmationModal.vue";
 import { buildExecutorsFromFacts } from "@/utils/executorUtils";
+defineOptions({
+  components: {
+    AbilitySelection,
+    FactBreakdownModal,
+    AddAbilitiesFromAdversaryModal,
+    DeleteAdversaryConfirmationModal,
+  },
+});
 
 const $api = inject("$api");
 const emit = defineEmits(["ability-click", "update:abilities"]);
 
 const adversaryStore = useAdversaryStore();
-const { selectedAdversary } = storeToRefs(adversaryStore);
-
+const selectedAdversary = computed(() => adversaryStore.selectedAdversary);
+const isCreatingNewAdversary = computed(() => false);
 const objectiveStore = useObjectiveStore();
 const { objectives } = storeToRefs(objectiveStore);
 
@@ -62,15 +70,16 @@ const tableDragHoverId = ref(null);
 const showAbilitySelection = ref(false);
 const showAddFromAdversary = ref(false);
 
-// Template references this flag; define it locally
-const isCreatingNewAdversary = ref(false);
-
 // Props
 const props = defineProps({
   abilities: {
     type: Array,
     required: true,
   },
+  isCreatingNewAdversary: {
+    type: Boolean,
+    default: false,
+ },
 });
 const localAbilities = ref([]);
 
@@ -577,7 +586,7 @@ watch(
 </script>
 
 <template lang="pug">
-.automation-editor( v-if="selectedAdversary?.adversary_id || isCreatingNewAdversary" )
+.automation-editor
   //- Header
   .content(v-if="selectedAdversary && !isEditingName")
     h3.pointer(@click="isEditingName = true") {{ selectedAdversary.name }} {{ selectedAdversary.name === "New adversary" ? "(click to edit)" : "" }}
diff --git a/src/views/AdversariesView.vue b/src/views/AdversariesView.vue
index 6d74c75..2a319de 100644
--- a/src/views/AdversariesView.vue
+++ b/src/views/AdversariesView.vue
@@ -309,6 +309,7 @@ onMounted(async () => {
         :abilities="selectedAdversaryAbilities"
         @ability-click="handleAbilityClick"
         @update:abilities="adversaryStore.selectedAdversaryAbilities = $event"
+        :isCreatingNewAdversary="isCreatingNewAdversary"
         />
 
     </section>

From 254bec9a921e65c4e0b0ed584d9d7118474bec6f Mon Sep 17 00:00:00 2001
From: deacon <marksoccerman1@aol.com>
Date: Sun, 8 Feb 2026 15:03:19 -0500
Subject: [PATCH 06/12] initial

---
 src/App.vue                         | 151 +++++++++++++++++++--
 src/components/core/Navigation.vue  |  47 +++++--
 src/components/core/PluginModal.vue | 200 ++++++++++++++++++++++++----
 src/main.js                         |  43 +++++-
 src/stores/authStore.js             |   3 +
 src/stores/coreDisplayStore.js      |   5 +-
 src/stores/coreStore.js             |   6 +-
 src/views/LoginView.vue             |  17 ++-
 8 files changed, 407 insertions(+), 65 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 40a2310..11a3047 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,34 +1,136 @@
 <script setup>
-import { onMounted } from "vue";
+import { onMounted, watch, inject, ref, onUnmounted } from "vue";
 import { useRoute } from "vue-router";
-
+import { storeToRefs } from "pinia";
 import { useCoreStore } from "@/stores/coreStore";
+import { useCoreDisplayStore } from "@/stores/coreDisplayStore";
+import { useAuthStore } from "@/stores/authStore";
+
 import Navigation from "@/components/core/Navigation.vue";
 import PageTabs from "@/components/core/PageTabs.vue";
-
 const route = useRoute();
+const authStore = useAuthStore();
 const coreStore = useCoreStore();
+const coreDisplayStore = useCoreDisplayStore();
+const { restarting } = storeToRefs(coreDisplayStore);
+const showReconnect = ref(false);
+
+const $api = inject("$api");
+
+const restartMessage = ref("Caldera is restarting. You will be redirected shortly.");
+const showSpinner = ref(true);
+
+let restartTimer = null;
+let pollTimer = null;
+let pollDelayTimer = null;
+let reconnectTimer = null;
+
+const POLL_DELAY_MS = 25000;
+
+function forceReconnect() {
+  window.location.reload();
+}
 
 onMounted(() => {
     coreStore.getUserSettings();
-})
-</script>
+});
+watch(
+  () => route.name,
+  async (name) => {
+    if (!$api) return;
+    if (name === "login") return;
+    if (!authStore.isUserAuthenticated) return;
+
+    await coreStore.getAvailablePlugins($api);
+    await coreStore.getMainConfig($api);
+    await authStore.getGroup($api);
+  },
+  { immediate: true }
+);
+watch(restarting, (value) => {
+    if (!value) {
+        clearTimeout(restartTimer);
+        clearTimeout(pollDelayTimer);
+        clearInterval(pollTimer);
+        clearTimeout(reconnectTimer);
+        return;
+    }
+
+  // reset UI
+restartMessage.value = "Caldera is Re-Building.";
+showSpinner.value = true;
+showReconnect.value = false;
+
+// 1️⃣ message change at 10s
+restartTimer = setTimeout(() => {
+  restartMessage.value =
+    "Still Re-Building this may take a little longer.\nYou will be redirected shortly.";
+}, 10000);
+
+// 2️⃣ reconnect button at 20s
+reconnectTimer = setTimeout(() => {
+  showReconnect.value = true;
+}, 20000);
+
+// 3️⃣ START POLLING AFTER UI HAS UPDATED
+pollDelayTimer = setTimeout(() => {
+
+  pollTimer = setInterval(async () => {
+  try {
+    await $api.get("/api/v2/health", {
+      params: { t: Date.now() },
+      validateStatus: () => true
+    });
+
+    clearInterval(pollTimer);
+    window.location.reload();
+
+  } catch {
+    // backend still down
+  }
+}, 2000);
+
+}, POLL_DELAY_MS); // polling starts AFTER message + button timing
+});
+onUnmounted(() => {
+  clearTimeout(restartTimer);
+  clearTimeout(pollDelayTimer);
+  clearInterval(pollTimer);
+  clearTimeout(reconnectTimer);
+});
 
+</script>
 <template lang="pug">
+//- GLOBAL restart overlay (ALWAYS FIRST)
+.restart-overlay(v-if="restarting")
+  .restart-box
+    span.icon.is-large(v-if="showSpinner")
+      font-awesome-icon(icon="spinner" spin)
+
+    p.mt-3.mb-4.build-title Building Updated Plugin Interface…
+    p(style="white-space: pre-line") {{ restartMessage }}
+
+    button.button.is-primary.mt-4(
+      v-if="showReconnect"
+      @click="forceReconnect"
+    ) Reconnect
+
 //- Login page
 .is-fullwidth(v-if="route.name === 'login'")
-    router-view
+  router-view
 
 //- All other pages
-.is-flex.is-flex-direction-row(v-else style="min-height: 100vh;")
-    Suspense
-        Navigation
+.is-flex.is-flex-direction-row(
+  v-else
+  style="min-height: 100vh;"
+)
+  Navigation
 
-    main
-        PageTabs
+  main
+    PageTabs
 
-        .p-4#router
-            router-view
+    .p-4#router
+      router-view
 </template>
 
 <style scoped>
@@ -90,4 +192,27 @@ main {
     margin: 0 20px 0 10px;
     background-color: grey;
 }
+.restart-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(10,10,10,0.85);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    color: white;
+}
+
+.restart-box {
+    text-align: center;
+    font-size: 1.2rem;
+}
+.build-title {
+  font-size: 1.6rem;
+  font-weight: 600;
+}
+
 </style>
diff --git a/src/components/core/Navigation.vue b/src/components/core/Navigation.vue
index 130daa5..fb24b36 100644
--- a/src/components/core/Navigation.vue
+++ b/src/components/core/Navigation.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { inject } from "vue";
+import { inject, onMounted, watch, ref, computed } from "vue";
 import { storeToRefs } from "pinia";
 import { useRoute, useRouter } from "vue-router";
 import { useCoreStore } from "@/stores/coreStore";
@@ -18,14 +18,7 @@ const { group, version } = storeToRefs(authStore);
 const router = useRouter();
 
 const $api = inject("$api");
-
-try {
-  await coreStore.getAvailablePlugins($api);
-  await coreStore.getMainConfig($api);
-  await authStore.getGroup($api);
-} catch (error) {
-  console.log(error);
-}
+const { restarting } = storeToRefs(coreDisplayStore);
 
 function handleLogout() {
   coreDisplayStore.removeAllTabs();
@@ -33,9 +26,22 @@ function handleLogout() {
 }
 
 function promptToEnablePlugin(pluginName) {
-  this.modals.core.selectedPlugin = pluginName;
-  this.modals.core.showPluginPopup = true;
+  if (!modals.value?.core) return;
+
+  modals.value.core.selectedPlugin = pluginName;
+  modals.value.core.showPluginPopup = true;
+}
+
+function openDisablePlugins() {
+  if (!modals.value?.core) return;
+
+  modals.value.core.mode = "disable";
+  modals.value.core.availableToDisable =
+    enabledPlugins.value.map(p => typeof p === "string" ? p : p.name);
+  modals.value.core.selectedPlugins = [];
+  modals.value.core.showPluginPopup = true;
 }
+
 </script>
 
 <template lang="pug">
@@ -74,8 +80,14 @@ function promptToEnablePlugin(pluginName) {
         ul.menu-list
             li(v-for="plugin in availablePlugins")
                 a.menu-item(v-if="plugin.name === 'fieldmanual'" target="_blank" :href="'/docs/index.html'") {{ plugin.name }}
-                router-link.menu-item(v-else-if="enabledPlugins.includes(plugin.name)" :to="`/plugins/${plugin.name}`") {{ plugin.name }}
+                router-link.menu-item(v-else-if="enabledPlugins && enabledPlugins.includes(plugin.name)" :to="`/plugins/${plugin.name}`") {{ plugin.name }}
                 p.menu-item(v-else-if="plugin.name !== 'magma' && !hideDisabledPlugins" @click="promptToEnablePlugin(plugin.name)") {{ plugin.name }}
+            // Disable plugins button
+            li(v-if="enabledPlugins && enabledPlugins.length && !restarting")
+                .menu-item.is-clickable.disable-plugins(@click="openDisablePlugins()")
+                    span.icon
+                        font-awesome-icon(icon="fas fa-puzzle-piece")
+                    span Disable a Plugin
         p.menu-label
             font-awesome-icon(icon="fas fa-cog").pr-2
             | Configuration
@@ -136,7 +148,7 @@ function promptToEnablePlugin(pluginName) {
                 .dropdown-content.ml-2
                     div(v-for="plugin in availablePlugins")
                         a.dropdown-item(v-if="plugin.name === 'fieldmanual'" target="_blank" :href="'/docs/index.html'") {{ plugin.name }}
-                        router-link.dropdown-item(v-else-if="enabledPlugins.includes(plugin.name)" :to="`/plugins/${plugin.name}`") {{ plugin.name }}
+                        router-link.dropdown-item(v-else-if="enabledPlugins && enabledPlugins.includes(plugin.name)" :to="`/plugins/${plugin.name}`") {{ plugin.name }}
                         p.dropdown-item(v-else-if="plugin.name !== 'magma'" @click="promptToEnablePlugin(plugin.name)") {{ plugin.name }}
         .dropdown.is-hoverable.mb-2
             .dropdown-trigger
@@ -165,7 +177,7 @@ function promptToEnablePlugin(pluginName) {
                         font-awesome-icon(icon="fas fa-external-link-alt").pl-1.is-size-7
 
 //- Modals
-PluginModal
+PluginModal(v-if="modals && modals.core")
 </template>
 
 <style scoped>
@@ -272,4 +284,11 @@ p.dropdown-item:hover {
 .is-blue {
   color: hsl(204, 86%, 53%);
 }
+.menu-item.disable-plugins {
+  color: #bbb;
+}
+.menu-item.disable-plugins:hover {
+  color: white;
+}
+
 </style>
diff --git a/src/components/core/PluginModal.vue b/src/components/core/PluginModal.vue
index 1620c60..cee9ef7 100644
--- a/src/components/core/PluginModal.vue
+++ b/src/components/core/PluginModal.vue
@@ -1,42 +1,184 @@
 <script setup>
-import { ref, inject } from "vue";
-import { useCoreDisplayStore } from "../../stores/coreDisplayStore";
+import { inject, nextTick, watch } from "vue";
 import { storeToRefs } from "pinia";
+import { useCoreDisplayStore } from "../../stores/coreDisplayStore";
+import { useCoreStore } from "../../stores/coreStore";
 
 const $api = inject("$api");
+const coreStore = useCoreStore();
 
 const coreDisplayStore = useCoreDisplayStore();
 const { modals } = storeToRefs(coreDisplayStore);
 
-
 async function enablePlugin() {
-    try {
-        await $api.patch('/api/v2/config/main', {
-            value: coreDisplayStore.modals.core.selectedPlugin,
-            prop: 'plugin'
-        });
-    } catch(error) {
-        console.error(`Error enabling ${coreDisplayStore.modals.core.selectedPlugin}`);
-    }
-
-    coreDisplayStore.modals.core.showPluginPopup = false;
+  if (!modals.value?.core) return;
+
+  const pluginName = modals.value.core.selectedPlugin;
+  if (!pluginName) return;
+
+  // 1️⃣ show overlay FIRST
+  coreDisplayStore.$patch({ restarting: true });
+
+  // 2️⃣ close modal immediately
+  modals.value.core.showPluginPopup = false;
+
+  // 3️⃣ allow Vue to render overlay
+  await nextTick();
+  await new Promise(requestAnimationFrame);
+  // 4️⃣ now trigger backend restart
+
+  $api.post(
+    `/api/v2/plugins/${pluginName}/enable`,
+    { build_gui: true }
+  ).catch(() => {
+  });
 }
+async function disablePlugins() {
+  if (!modals.value?.core) return;
 
-</script>
+  const plugins = (modals.value.core.selectedPlugins || []);
+
+
+  if (!plugins.length) return;
+
+  coreDisplayStore.$patch({ restarting: true });
 
+  modals.value.core.showPluginPopup = false;
+
+  await nextTick();
+  await new Promise(requestAnimationFrame);
+
+  $api.post(`/api/v2/plugins/disable`, {
+    plugins
+  }).catch(() => {});
+}
+watch(
+  () => modals.value?.core?.availableToDisable,
+  (val) => {
+    console.log("availableToDisable:", val);
+  },
+  { immediate: true }
+);
+</script>
 <template lang="pug">
-.modal(:class="{ 'is-active': modals.core.showPluginPopup }")
-    .modal-background(@click="modals.core.showPluginPopup = false")
-    .modal-card 
-        header.modal-card-head 
-            p.modal-card-title Enable Plugin
-        .modal-card-body 
-            br
-            p.block "{{ coreDisplayStore.modals.core.selectedPlugin }}" plugin is currently disabled. Would you like to enable it?
-            p Note: Enabling the plugin will require you to restart Caldera
-            br
-
-        footer.modal-card-foot.is-flex.is-justify-content-flex-end 
-            button.button(@click="modals.core.showPluginPopup = false") Cancel
-            button.button.is-primary(@click="enablePlugin") Confirm
-    </template>
\ No newline at end of file
+.modal(
+  v-if="modals && modals.core"
+  :class="{ 'is-active': modals.core.showPluginPopup }"
+)
+  .modal-background(@click="modals.core.showPluginPopup = false")
+
+  .modal-card
+
+    header.modal-card-head
+      p.modal-card-title(
+        v-if="modals.core.mode === 'enable'"
+      )
+        | Enable {{ modals.core.selectedPlugin }} Plugin
+
+      p.modal-card-title(
+        v-else
+      )
+        | Disable Plugins
+
+    .modal-card-body
+
+      // ---------- ENABLE VIEW ----------
+      template(v-if="modals.core.mode === 'enable'")
+        p.has-text-centered.has-text-weight-semibold.mb-4
+            | Enable {{ modals.core.selectedPlugin }} plugin?
+
+        hr.modal-divider
+
+        .plugin-enable-info
+            p.has-text-centered
+            | Enabling this plugin will rebuild the plugin interface and restart Caldera.
+
+        hr.modal-divider
+
+        p.has-text-centered.has-text-warning
+            span.icon.mr-1
+            font-awesome-icon(icon="fas fa-triangle-exclamation")
+            | Caldera will restart during this process.
+
+
+      // ---------- DISABLE VIEW ----------
+      template(v-else)
+        p.has-text-centered.has-text-weight-semibold.mb-4
+            | Select plugins to disable
+
+        hr.modal-divider
+
+        .plugin-disable-list
+            .plugin-disable-item(
+                v-for="plugin in (modals.core.availableToDisable || [])"
+                :key="plugin"
+            )
+                label.checkbox.is-flex.is-align-items-center
+                    input(
+                    type="checkbox"
+                    v-model="modals.core.selectedPlugins"
+                    :value="plugin"
+                    )
+                    span.ml-2.has-text-weight-medium {{ plugin }}
+
+                p.plugin-disable-desc
+                    | Removes plugin UI components and rebuilds Caldera.
+
+        hr.modal-divider
+
+        p.has-text-centered.has-text-warning
+            span.icon.mr-1
+            font-awesome-icon(icon="fas fa-triangle-exclamation")
+            | Disabling plugins will restart Caldera.
+
+
+    footer.modal-card-foot.is-flex.is-justify-content-flex-end
+      button.button(
+        @click="modals.core.showPluginPopup = false"
+      )
+        | Cancel
+
+      button.button.is-primary(
+        v-if="modals.core.mode === 'enable'"
+        @click="enablePlugin"
+      )
+        | Confirm
+
+      button.button.is-danger(
+        v-else
+        @click="disablePlugins"
+      )
+        | Disable Selected
+
+</template>
+<style scoped>
+.modal-divider {
+  background: rgba(255,255,255,0.08);
+  border: none;
+  height: 1px;
+  margin: 1.25rem 0;
+}
+
+.plugin-disable-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.plugin-disable-item {
+  padding: 0.5rem 0.25rem;
+  border-radius: 6px;
+}
+
+.plugin-disable-item:hover {
+  background: rgba(255,255,255,0.04);
+}
+
+.plugin-disable-desc {
+  font-size: 0.85rem;
+  color: #aaa;
+  margin-left: 1.9rem; /* aligns under text, not checkbox */
+  margin-top: 0.2rem;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 81bd253..078ad54 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,8 @@ import FloatingVue from "floating-vue";
 import VNetworkGraph from "v-network-graph"
 import "v-network-graph/lib/style.css"
 
+import { useCoreDisplayStore } from "@/stores/coreDisplayStore";
+
 import App from "@/App.vue";
 import router from "@/router.js";
 
@@ -17,6 +19,43 @@ const app = createApp(App);
 const $api = axios.create({
   withCredentials: true,
 });
+$api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    // connection lost (restart)
+    if (!error.response) {
+      const displayStore = useCoreDisplayStore(pinia);
+
+      // ignore connection loss during restart
+      if (displayStore?.restarting) {
+        return Promise.reject(error);
+      }
+
+      window.location.href = "/login";
+      return Promise.reject(error);
+    }
+
+    // auth invalid AFTER login
+    if (error.response?.status === 401 &&
+  !   error.config?.url?.includes("/api/v2/health")) {
+
+  // ignore auth status probe
+  if (
+      error.config?.method === "head" &&
+      error.config?.url?.includes("/api/v2/config/main")
+    ) {
+      return Promise.reject(error);
+    }
+
+    console.log("[caldera] auth invalid");
+
+    if (window.location.pathname !== "/login") {
+      window.location.href = "/login";
+    }
+  }
+    return Promise.reject(error);
+  }
+);
 app.provide("$api", $api);
 
 app.use(createPinia());
@@ -37,13 +76,13 @@ import {
   faAngleDown, faAngleRight, faAngleUp, faAnglesLeft, faAnglesRight, faArrowRight, faBan, faBook, faCheck, faCog, faDownload, faExclamationTriangle, 
   faExternalLinkAlt, faFileExport, faFileImport, faFlag as fasFlag, faKey, faLock, faMinus, faPause, faPencilAlt, faPlay, faPlus, faPuzzlePiece, faRedo, faRunning, faSave, faFilter,
   faSearch, faSkullCrossbones, faSignOutAlt, faStop, faTimes, faTrash, faUndo, faUnlockAlt, faUpload, faUser, faWeightHanging, faFolderOpen, faFolder, faFile, faDragon, faFolderClosed, faArrowLeft, faArrowUp, faArrowDown, 
-  faChevronUp, faChevronDown, faBroom, faForward, faFastForward, faBackward, faFastBackward
+  faChevronUp, faChevronDown, faBroom, faForward, faFastForward, faBackward, faFastBackward, faSpinner
 } from '@fortawesome/free-solid-svg-icons';
 library.add(
   faAngleDown, faAngleRight, faAngleUp, faAnglesLeft, faAnglesRight, faArrowRight, faBan, faBook, faCheck, faCog, faDownload, faExclamationTriangle, faFilter,
   faExternalLinkAlt, faFileExport, faFileImport, fasFlag, faKey, faLock, faMinus, faPause, faPencilAlt, faPlay, faPlus, faPuzzlePiece, faRedo, faRunning, faSave, 
   faSearch, faSkullCrossbones, faSignOutAlt, faStop, faTimes, faTrash, faUndo, faUnlockAlt, faUpload, faUser, faWeightHanging, faFolderOpen, faFolder, faFile, faDragon, faFolderClosed, faArrowLeft, faArrowUp, faArrowDown,
-  faChevronUp, faChevronDown, faBroom, faForward, faFastForward, faBackward, faFastBackward
+  faChevronUp, faChevronDown, faBroom, faForward, faFastForward, faBackward, faFastBackward, faSpinner
 );
 import { 
   faCircle, faCircleQuestion, faCopy, faFlag as farFlag
diff --git a/src/stores/authStore.js b/src/stores/authStore.js
index b71edec..f55bc5f 100644
--- a/src/stores/authStore.js
+++ b/src/stores/authStore.js
@@ -32,8 +32,11 @@ export const useAuthStore = defineStore({
     async getAuthStatus($api) {
       try {
         await $api.head("/api/v2/config/main");
+        this.isUserAuthenticated = true;
         return true;
       } catch (error) {
+        // 401 before login is normal — do nothing
+        this.isUserAuthenticated = false;
         return false;
       }
     },
diff --git a/src/stores/coreDisplayStore.js b/src/stores/coreDisplayStore.js
index eea7ba0..70fcc41 100644
--- a/src/stores/coreDisplayStore.js
+++ b/src/stores/coreDisplayStore.js
@@ -1,10 +1,10 @@
 import { defineStore } from "pinia";
-
 export const useCoreDisplayStore = defineStore("coreDisplayStore", {
   state: () => {
     return {
       openTabs: [],
       activeTab: "",
+      restarting: false,
       modals: {
         agents: {
           showDeploy: false,
@@ -23,6 +23,9 @@ export const useCoreDisplayStore = defineStore("coreDisplayStore", {
         core: {
           showPluginPopup: false,
           selectedPlugin: "",
+          mode: "enable",
+          selectedPlugins: [],
+          availableToDisable: []
         },
         operations: {
           showCreate: false,
diff --git a/src/stores/coreStore.js b/src/stores/coreStore.js
index ea97cf9..8c1e0a7 100644
--- a/src/stores/coreStore.js
+++ b/src/stores/coreStore.js
@@ -14,7 +14,7 @@ export const useCoreStore = defineStore("coreStore", {
       userSettings: {},
       contacts: [],
       availableContacts: [],
-      hideDisabledPlugins: false,
+      hideDisabledPlugins: true,
     };
   },
   getters: {
@@ -34,8 +34,8 @@ export const useCoreStore = defineStore("coreStore", {
       try {
         const response = await $api.get("/api/v2/plugins");
         this.availablePlugins = response.data;
-      } catch (error) {
-        throw error;
+      } catch {
+        return;
       }
     },
     async updateMainConfigSetting($api, key, value) {
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 2c8a2c7..4e536b7 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -21,17 +21,28 @@ async function handleLogin(e) {
 #login.container.content.fullwh.is-flex.is-flex-direction-column.is-align-items-center.is-justify-content-center()
     img(src="/src/assets/img/caldera-logo.png" alt="Caldera Logo")
     .p-6
-        form
+        form(@submit.prevent="handleLogin")
             .field
                 label.label Username
                 .control.has-icons-left
-                    input.input(v-focus v-model="username" type="text" placeholder="username")
+                    input.input(
+                    v-focus
+                    v-model="username"
+                    type="text"
+                    placeholder="username"
+                    autocomplete="username"
+                    )
                     span.icon.is-small.is-left
                         font-awesome-icon(icon="fas fa-user")
             .field
                 label.label Password
                 .control.has-icons-left
-                    input.input(v-model="password" type="password" placeholder="password")
+                    input.input(
+                    v-model="password"
+                    type="password"
+                    placeholder="password"
+                    autocomplete="current-password"
+                    )
                     span.icon.is-small.is-left
                         font-awesome-icon(icon="fas fa-lock")
             button.button.fancy-button.is-fullwidth(type="submit" @click="handleLogin") Log In

From 42f103bd445ccd08baa94e855767bd38ee97cd9f Mon Sep 17 00:00:00 2001
From: deacon <marksoccerman1@aol.com>
Date: Sun, 8 Feb 2026 18:12:46 -0500
Subject: [PATCH 07/12] refinements

---
 src/App.vue                         | 123 +++++++++++++++-------------
 src/components/core/Navigation.vue  |  10 ++-
 src/components/core/PluginModal.vue |   3 -
 3 files changed, 77 insertions(+), 59 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 11a3047..36f0376 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,32 +8,30 @@ import { useAuthStore } from "@/stores/authStore";
 
 import Navigation from "@/components/core/Navigation.vue";
 import PageTabs from "@/components/core/PageTabs.vue";
+
 const route = useRoute();
 const authStore = useAuthStore();
 const coreStore = useCoreStore();
 const coreDisplayStore = useCoreDisplayStore();
+
 const { restarting } = storeToRefs(coreDisplayStore);
-const showReconnect = ref(false);
 
 const $api = inject("$api");
 
-const restartMessage = ref("Caldera is restarting. You will be redirected shortly.");
+const restartMessage = ref("Caldera is restarting…");
 const showSpinner = ref(true);
 
-let restartTimer = null;
-let pollTimer = null;
-let pollDelayTimer = null;
-let reconnectTimer = null;
-
-const POLL_DELAY_MS = 25000;
+let buildPollTimer = null;
+let healthPollTimer = null;
 
 function forceReconnect() {
   window.location.reload();
 }
 
 onMounted(() => {
-    coreStore.getUserSettings();
+  coreStore.getUserSettings();
 });
+
 watch(
   () => route.name,
   async (name) => {
@@ -47,58 +45,73 @@ watch(
   },
   { immediate: true }
 );
-watch(restarting, (value) => {
-    if (!value) {
-        clearTimeout(restartTimer);
-        clearTimeout(pollDelayTimer);
-        clearInterval(pollTimer);
-        clearTimeout(reconnectTimer);
-        return;
-    }
 
-  // reset UI
-restartMessage.value = "Caldera is Re-Building.";
-showSpinner.value = true;
-showReconnect.value = false;
-
-// 1️⃣ message change at 10s
-restartTimer = setTimeout(() => {
-  restartMessage.value =
-    "Still Re-Building this may take a little longer.\nYou will be redirected shortly.";
-}, 10000);
-
-// 2️⃣ reconnect button at 20s
-reconnectTimer = setTimeout(() => {
-  showReconnect.value = true;
-}, 20000);
-
-// 3️⃣ START POLLING AFTER UI HAS UPDATED
-pollDelayTimer = setTimeout(() => {
-
-  pollTimer = setInterval(async () => {
-  try {
-    await $api.get("/api/v2/health", {
-      params: { t: Date.now() },
-      validateStatus: () => true
-    });
-
-    clearInterval(pollTimer);
-    window.location.reload();
-
-  } catch {
-    // backend still down
+watch(restarting, (value) => {
+  if (!value) {
+    clearInterval(buildPollTimer);
+    clearInterval(healthPollTimer);
+    return;
   }
-}, 2000);
 
-}, POLL_DELAY_MS); // polling starts AFTER message + button timing
+  startBuildPolling();
 });
+
+function startBuildPolling() {
+  clearInterval(buildPollTimer);
+
+  buildPollTimer = setInterval(async () => {
+    try {
+      const res = await $api.get("/api/v2/plugins/build-status");
+      const state = res.data;
+
+      switch (state.status) {
+        case "installing":
+          restartMessage.value =
+            `Installing dependencies for ${state.plugin}…`;
+          break;
+
+        case "building":
+          restartMessage.value =
+            `Building plugin interface for ${state.plugin}…`;
+          break;
+
+        case "restarting":
+          restartMessage.value = "Restarting Caldera…";
+          clearInterval(buildPollTimer);
+          startHealthPolling();
+          break;
+
+        default:
+          restartMessage.value = "Preparing plugin…";
+      }
+    } catch {
+      // backend may be restarting
+    }
+  }, 1000);
+}
+
+function startHealthPolling() {
+  clearInterval(healthPollTimer);
+
+  healthPollTimer = setInterval(async () => {
+    try {
+      await $api.get("/api/v2/health", {
+        params: { t: Date.now() },
+        validateStatus: () => true
+      });
+
+      clearInterval(healthPollTimer);
+      window.location.reload();
+    } catch {
+      // still restarting
+    }
+  }, 2000);
+}
+
 onUnmounted(() => {
-  clearTimeout(restartTimer);
-  clearTimeout(pollDelayTimer);
-  clearInterval(pollTimer);
-  clearTimeout(reconnectTimer);
+  clearInterval(buildPollTimer);
+  clearInterval(healthPollTimer);
 });
-
 </script>
 <template lang="pug">
 //- GLOBAL restart overlay (ALWAYS FIRST)
diff --git a/src/components/core/Navigation.vue b/src/components/core/Navigation.vue
index fb24b36..554ee38 100644
--- a/src/components/core/Navigation.vue
+++ b/src/components/core/Navigation.vue
@@ -41,6 +41,14 @@ function openDisablePlugins() {
   modals.value.core.selectedPlugins = [];
   modals.value.core.showPluginPopup = true;
 }
+const disableablePlugins = computed(() => {
+  if (!enabledPlugins.value) return []
+
+  return enabledPlugins.value.filter(p => {
+    const name = typeof p === "string" ? p : p.name
+    return name && name !== "magma"
+  })
+})
 
 </script>
 
@@ -83,7 +91,7 @@ function openDisablePlugins() {
                 router-link.menu-item(v-else-if="enabledPlugins && enabledPlugins.includes(plugin.name)" :to="`/plugins/${plugin.name}`") {{ plugin.name }}
                 p.menu-item(v-else-if="plugin.name !== 'magma' && !hideDisabledPlugins" @click="promptToEnablePlugin(plugin.name)") {{ plugin.name }}
             // Disable plugins button
-            li(v-if="enabledPlugins && enabledPlugins.length && !restarting")
+            li(v-if="disableablePlugins.length && !restarting")
                 .menu-item.is-clickable.disable-plugins(@click="openDisablePlugins()")
                     span.icon
                         font-awesome-icon(icon="fas fa-puzzle-piece")
diff --git a/src/components/core/PluginModal.vue b/src/components/core/PluginModal.vue
index cee9ef7..b349689 100644
--- a/src/components/core/PluginModal.vue
+++ b/src/components/core/PluginModal.vue
@@ -84,9 +84,6 @@ watch(
 
       // ---------- ENABLE VIEW ----------
       template(v-if="modals.core.mode === 'enable'")
-        p.has-text-centered.has-text-weight-semibold.mb-4
-            | Enable {{ modals.core.selectedPlugin }} plugin?
-
         hr.modal-divider
 
         .plugin-enable-info

From d52fcbbe8f86a9713a36f30789608a9f919f2ea4 Mon Sep 17 00:00:00 2001
From: deacon <marksoccerman1@aol.com>
Date: Sun, 8 Feb 2026 18:26:35 -0500
Subject: [PATCH 08/12] refinements

---
 prebundle.js | 33 ++++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/prebundle.js b/prebundle.js
index a5f6933..1470dcf 100644
--- a/prebundle.js
+++ b/prebundle.js
@@ -1,17 +1,36 @@
 const fs = require('fs-extra');
 
-console.log('Copying all plugin GUI source files to magma');
+console.log('Copying plugin GUI source files to magma');
 
-if (fs.existsSync('./src/plugins/')) fs.removeSync('./src/plugins/');
+if (fs.existsSync('./src/plugins/')) {
+    fs.removeSync('./src/plugins/');
+}
+
+// arguments passed from backend
+const requestedPlugins = process.argv.slice(2);
+
+let plugins = [];
+
+if (requestedPlugins.length > 0) {
+    // targeted build
+    plugins = requestedPlugins;
+    console.log("Building selected plugins:", plugins.join(', '));
+} else {
+    // full build (server.py --build or manual build)
+    plugins = fs.readdirSync('../');
+    console.log("Building ALL plugins");
+}
 
-const plugins = fs.readdirSync('../')
 plugins.forEach((plugin) => {
-    // Check to see if gui directory exists
     if (!fs.existsSync(`../${plugin}/gui`)) return;
 
-    // Copy contents of gui directory to src directory
-    console.log(`Copying over "${plugin}" files...`)
-    fs.copySync(`../${plugin}/gui/`, `./src/plugins/${plugin}`, { overwrite: true, recursive: true })
+    console.log(`Copying "${plugin}" files...`);
+
+    fs.copySync(
+        `../${plugin}/gui/`,
+        `./src/plugins/${plugin}`,
+        { overwrite: true, recursive: true }
+    );
 });
 
 console.log('Plugin GUI source files copied!');

From b7563b69cf1338a18a6a4900667113707214a4cf Mon Sep 17 00:00:00 2001
From: deacon <marksoccerman1@aol.com>
Date: Sun, 8 Feb 2026 18:33:19 -0500
Subject: [PATCH 09/12] refinements

---
 package.json | 2 +-
 prebundle.js | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 774542b..dd79d3f 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite --host '0.0.0.0'",
-    "build": "node prebundle.js && vite build",
+    "build": "vite build",
     "preview": "vite preview --port 5050",
     "lint": "npx eslint \"./**\"",
     "lintfix": "npx eslint \"./**\" --fix",
diff --git a/prebundle.js b/prebundle.js
index 1470dcf..7cffddd 100644
--- a/prebundle.js
+++ b/prebundle.js
@@ -8,6 +8,10 @@ if (fs.existsSync('./src/plugins/')) {
 
 // arguments passed from backend
 const requestedPlugins = process.argv.slice(2);
+if (requestedPlugins.length === 0) {
+    console.log("No plugins specified — skipping copy phase");
+    process.exit(0);
+}
 
 let plugins = [];
 

From 07aea3c5ac625a550cd488d57457349666a7c829 Mon Sep 17 00:00:00 2001
From: deacon <marksoccerman1@aol.com>
Date: Sun, 8 Feb 2026 18:36:26 -0500
Subject: [PATCH 10/12] refinements

---
 package-lock.json | 14 ++++++++++++++
 package.json      |  1 +
 2 files changed, 15 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 734dea4..eed9f41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "pinia": "^2.0.13",
         "prismjs": "^1.29.0",
         "pug": "^3.0.2",
+        "uuid": "^13.0.0",
         "v-network-graph": "^0.9.8",
         "vite": "^2.8.4",
         "vue": "^3.2.31",
@@ -9353,6 +9354,19 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.0.tgz",
+      "integrity": "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist-node/bin/uuid"
+      }
+    },
     "node_modules/v-network-graph": {
       "version": "0.9.8",
       "resolved": "https://registry.npmjs.org/v-network-graph/-/v-network-graph-0.9.8.tgz",
diff --git a/package.json b/package.json
index dd79d3f..1ade2d2 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "pinia": "^2.0.13",
     "prismjs": "^1.29.0",
     "pug": "^3.0.2",
+    "uuid": "^13.0.0",
     "v-network-graph": "^0.9.8",
     "vite": "^2.8.4",
     "vue": "^3.2.31",

From c324e9406123accd9b4b927ef15171487ef94fef Mon Sep 17 00:00:00 2001
From: deacon <marksoccerman1@aol.com>
Date: Sun, 8 Feb 2026 18:47:11 -0500
Subject: [PATCH 11/12] refinements

---
 prebundle.js | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/prebundle.js b/prebundle.js
index 7cffddd..e155f37 100644
--- a/prebundle.js
+++ b/prebundle.js
@@ -1,4 +1,5 @@
 const fs = require('fs-extra');
+const yaml = require('js-yaml');
 
 console.log('Copying plugin GUI source files to magma');
 
@@ -6,26 +7,33 @@ if (fs.existsSync('./src/plugins/')) {
     fs.removeSync('./src/plugins/');
 }
 
-// arguments passed from backend
 const requestedPlugins = process.argv.slice(2);
-if (requestedPlugins.length === 0) {
-    console.log("No plugins specified — skipping copy phase");
-    process.exit(0);
-}
 
 let plugins = [];
 
 if (requestedPlugins.length > 0) {
-    // targeted build
+    // runtime targeted build
     plugins = requestedPlugins;
     console.log("Building selected plugins:", plugins.join(', '));
+
 } else {
-    // full build (server.py --build or manual build)
-    plugins = fs.readdirSync('../');
-    console.log("Building ALL plugins");
+    // server --build mode
+    try {
+        const conf = yaml.load(
+            fs.readFileSync('../../conf/default.yml', 'utf8')
+        );
+
+        plugins = conf.plugins || [];
+        console.log("Building enabled plugins from config:", plugins.join(', '));
+
+    } catch (e) {
+        // fallback for dev mode
+        plugins = fs.readdirSync('../');
+        console.log("Building ALL plugins (fallback)");
+    }
 }
 
-plugins.forEach((plugin) => {
+plugins.forEach(plugin => {
     if (!fs.existsSync(`../${plugin}/gui`)) return;
 
     console.log(`Copying "${plugin}" files...`);

From 0f1a68989630f2a70ffc1d7e4b34207ad392e0e6 Mon Sep 17 00:00:00 2001
From: deacon <marksoccerman1@aol.com>
Date: Sun, 8 Feb 2026 18:49:26 -0500
Subject: [PATCH 12/12] refinements

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1ade2d2..15b6b38 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite --host '0.0.0.0'",
-    "build": "vite build",
+   "build": "node prebundle.js && vite build",
     "preview": "vite preview --port 5050",
     "lint": "npx eslint \"./**\"",
     "lintfix": "npx eslint \"./**\" --fix",