From a9e73020442302057af6264e1d6beca28ea0f5ca Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Thu, 5 Jun 2025 16:32:18 -0700
Subject: [PATCH 01/10] feat(UI): adding GenAI tag suggestions

---
 .../versions/2025-06-04_7fc3888c7b9a.py       |  29 +
 .../static/dispatch/src/tag/TagPicker.vue     | 626 +++++++++++++++---
 src/dispatch/static/dispatch/src/tag/store.js | 169 +++++
 .../dispatch/src/tag_type/NewEditSheet.vue    |  18 +
 .../static/dispatch/src/tag_type/Table.vue    |  24 +-
 src/dispatch/tag_type/models.py               |   2 +
 6 files changed, 760 insertions(+), 108 deletions(-)
 create mode 100644 src/dispatch/database/revisions/tenant/versions/2025-06-04_7fc3888c7b9a.py

diff --git a/src/dispatch/database/revisions/tenant/versions/2025-06-04_7fc3888c7b9a.py b/src/dispatch/database/revisions/tenant/versions/2025-06-04_7fc3888c7b9a.py
new file mode 100644
index 000000000000..d26c95380694
--- /dev/null
+++ b/src/dispatch/database/revisions/tenant/versions/2025-06-04_7fc3888c7b9a.py
@@ -0,0 +1,29 @@
+"""Add GenAI suggestions column to tag_type table
+
+Revision ID: 7fc3888c7b9a
+Revises: 8f324b0f365a
+Create Date: 2025-06-04 14:49:20.592746
+
+"""
+
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = "7fc3888c7b9a"
+down_revision = "8f324b0f365a"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column("tag_type", sa.Column("genai_suggestions", sa.Boolean(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column("tag_type", "genai_suggestions")
+    # ### end Alembic commands ###
diff --git a/src/dispatch/static/dispatch/src/tag/TagPicker.vue b/src/dispatch/static/dispatch/src/tag/TagPicker.vue
index 42bf093406a1..cdb5f7cb040c 100644
--- a/src/dispatch/static/dispatch/src/tag/TagPicker.vue
+++ b/src/dispatch/static/dispatch/src/tag/TagPicker.vue
@@ -1,33 +1,25 @@
 <template>
   <div>
-    <span v-click-outside="closeMenu"
-      ><v-text-field
-        readonly
-        label="Tags"
-        @click="toggleMenu"
-        variant="outlined"
-        v-model="dummyText"
-        class="main-panel"
-        :rules="[check_for_error]"
-      >
-        <template #prepend-inner>
-          <v-icon class="panel-button">
-            {{ menu ? "mdi-minus" : "mdi-plus" }}
-          </v-icon>
-        </template>
-        <template #append v-if="showCopy">
-          <v-icon class="panel-button" @click.stop="copyTags">mdi-content-copy</v-icon>
-        </template>
-        <div class="form-container mt-2">
+    <div v-click-outside="closeMenu">
+      <span class="tag-picker-row">
+        <div class="tag-picker-outline">
+          <v-icon class="panel-button tag-add-icon" @click="toggleMenu" style="cursor: pointer">{{
+            menu ? "mdi-minus" : "mdi-plus"
+          }}</v-icon>
+          <div class="tag-picker-label">Tags</div>
           <div class="chip-group" v-show="selectedItems.length">
             <span v-for="(item, index) in selectedItems" :key="item">
               <v-chip
                 label
                 :key="index"
-                :color="item.tag_type?.color"
                 closable
                 class="tag-chip"
+                size="small"
                 @click:close="removeItem(item.id)"
+                :style="{
+                  backgroundColor: (item.tag_type?.color || '#e0e0e0') + '22',
+                  color: item.tag_type?.color || '#333',
+                }"
               >
                 <span class="mr-2">
                   <v-icon
@@ -42,8 +34,115 @@
             </span>
           </div>
         </div>
-      </v-text-field>
-      <v-card v-if="menu">
+        <v-icon
+          v-if="showCopy"
+          class="panel-button tag-copy-icon"
+          @click.stop="copyTags"
+          style="cursor: pointer"
+          >mdi-content-copy</v-icon
+        >
+      </span>
+      <v-card v-if="menu" class="tag-picker-dropdown-block">
+        <!-- Initial state: Show generate button -->
+        <div v-if="!suggestionsGenerated && sampleSuggestions.length > 0" class="mb-4">
+          <div class="gradient-border-wrapper">
+            <div class="white-bg-wrapper">
+              <v-btn
+                variant="flat"
+                size="small"
+                @click="generateSuggestions"
+                :loading="suggestionsLoading"
+                class="generate-suggestions-btn"
+                :style="{
+                  backgroundColor: '#ffffff !important',
+                  background: '#ffffff !important',
+                  color: '#1a1a1a !important',
+                }"
+              >
+                <v-icon start size="18" color="#ffc107">mdi-sparkles</v-icon>
+                <span class="generate-btn-text">Generate AI tag suggestions</span>
+              </v-btn>
+            </div>
+          </div>
+        </div>
+
+        <!-- Suggestions panel: Show when generated (expanded or collapsed) -->
+        <div
+          v-if="suggestionsGenerated && sampleSuggestions.length > 0"
+          :class="[
+            'mitre-suggestions-panel',
+            suggestionsExpanded ? 'mb-4' : 'mb-3',
+            { collapsed: !suggestionsExpanded },
+          ]"
+        >
+          <div :class="suggestionsExpanded ? 'suggestion-header mb-1' : 'suggestion-header mb-0'">
+            <div class="suggestion-title">GenAI suggests the following tags:</div>
+            <v-btn
+              icon
+              size="small"
+              variant="text"
+              @click="suggestionsExpanded = !suggestionsExpanded"
+              class="collapse-btn"
+              :title="suggestionsExpanded ? 'Collapse suggestions' : 'Expand suggestions'"
+            >
+              <v-icon size="18">
+                {{ suggestionsExpanded ? "mdi-chevron-up" : "mdi-chevron-down" }}
+              </v-icon>
+            </v-btn>
+          </div>
+
+          <!-- Suggestion content - only show when expanded -->
+          <transition name="suggestion-collapse">
+            <div v-if="suggestionsExpanded" class="suggestion-content">
+              <div
+                v-for="(group, groupIdx) in sampleSuggestions"
+                :key="'suggested-group-' + groupIdx"
+                class="suggestion-group mb-1"
+              >
+                <span class="suggestion-group-label">
+                  <span>{{ getTagType(group.tag_type_id).name }}</span
+                  >:
+                </span>
+                <span
+                  v-for="tag in group.tags"
+                  :key="'suggested-tag-' + tag.id"
+                  class="suggestion-chip-wrapper"
+                >
+                  <v-chip
+                    class="suggestion-chip tag-chip mr-1"
+                    :style="{
+                      backgroundColor: (getTagType(group.tag_type_id).color || '#e0e0e0') + '22',
+                      color: getTagType(group.tag_type_id).color || '#333',
+                      cursor: 'pointer',
+                    }"
+                    size="small"
+                    label
+                    rounded
+                    :title="tag.reason"
+                    @click="addSuggestedTag(tag)"
+                  >
+                    <v-icon
+                      start
+                      size="16"
+                      :color="getTagType(group.tag_type_id).color"
+                      v-if="getTagType(group.tag_type_id).icon"
+                    >
+                      mdi-{{ getTagType(group.tag_type_id).icon }}
+                    </v-icon>
+                    {{ tag.name }}
+                    <v-icon class="add-chip ml-1" size="16">mdi-plus</v-icon>
+                  </v-chip>
+                </span>
+              </div>
+              <div class="suggestion-help-text mt-2">
+                <v-icon size="16" color="#ffc107" class="mr-1">mdi-lightbulb-on-outline</v-icon>
+                Tip: Hover over a suggested tag to see why it was recommended.
+              </div>
+            </div>
+          </transition>
+        </div>
+
+        <!-- Regular tag picker - always visible when menu is open -->
         <div>
           <v-text-field
             hide-details
@@ -121,7 +220,7 @@
           </ul>
         </div>
       </v-card>
-    </span>
+    </div>
     <v-snackbar v-model="snackbar" :timeout="2400" color="success">
       <v-row class="fill-height" align="center">
         <v-col class="text-center">Tags copied to the clipboard</v-col>
@@ -133,30 +232,26 @@
 <script setup>
 import { ref, computed, onMounted, watch } from "vue"
 import { cloneDeep } from "lodash"
-import SearchUtils from "@/search/utils"
 import TagApi from "@/tag/api"
-
-const ALL_DISCOVERABILITY_TYPES = [
-  { model: "TagType", field: "discoverable_incident", op: "==", value: "true" },
-  { model: "TagType", field: "discoverable_case", op: "==", value: "true" },
-  { model: "TagType", field: "discoverable_signal", op: "==", value: "true" },
-  { model: "TagType", field: "discoverable_query", op: "==", value: "true" },
-  { model: "TagType", field: "discoverable_source", op: "==", value: "true" },
-  { model: "TagType", field: "discoverable_document", op: "==", value: "true" },
-]
+import SearchUtils from "@/search/utils"
+import TagTypeApi from "@/tag_type/api"
 
 const menu = ref(false)
 const dummyText = ref(" ")
 const items = ref([])
 const total = ref(0)
-const more = ref(false)
 const groups = ref([])
 const searchQuery = ref("")
 const filteredMenuItems = ref([])
 const isDropdownOpen = ref(false)
-const loading = ref(true)
 const error = ref(true)
 const snackbar = ref(false)
+const loading = ref(false)
+const more = ref(false)
+const tagTypes = ref({})
+const suggestionsExpanded = ref(false)
+const suggestionsLoading = ref(false)
+const suggestionsGenerated = ref(false)
 
 const props = defineProps({
   modelValue: {
@@ -184,34 +279,6 @@ const props = defineProps({
 })
 const currentProject = ref(props.project)
 
-watch(
-  () => props.project,
-  (newVal) => {
-    if (newVal === currentProject.value) {
-      return
-    }
-    currentProject.value = newVal
-    fetchData()
-    validateTags(selectedItems.value)
-  }
-)
-const check_for_error = () => {
-  return error.value
-}
-
-function are_required_tags_selected(sel) {
-  // iterate through all tag types and ensure that at least one tag of each required tag type is selected
-  const tagTypes = groups.value
-  for (let i = 0; i < tagTypes.length; i++) {
-    if (tagTypes[i].isRequired) {
-      if (!sel.some((item) => item.tag_type?.id === tagTypes[i]?.id)) {
-        return false
-      }
-    }
-  }
-  return true
-}
-
 const fetchData = () => {
   if (!currentProject.value) {
     return
@@ -220,7 +287,7 @@ const fetchData = () => {
 
   let filterOptions = {
     q: null,
-    itemsPerPage: 100,
+    itemsPerPage: 500,
     sortBy: ["tag_type.name"],
     descending: [false],
   }
@@ -234,29 +301,11 @@ const fetchData = () => {
   // add a filter to only return discoverable tags
   filters["tagFilter"] = [{ model: "Tag", field: "discoverable", op: "==", value: "true" }]
 
-  if (filterOptions.q && filterOptions.q.indexOf("/") != -1) {
-    // modify the query and add a tag type filter
-    let [tagType, query] = filterOptions.q.split("/")
-    filterOptions.q = query
-    if (props.model) {
-      filters["tagTypeFilter"] = [
-        { model: "TagType", field: "name", op: "==", value: tagType },
-        { model: "TagType", field: "discoverable_" + props.model, op: "==", value: "true" },
-      ]
-    } else {
-      filters["tagTypeFilter"] = [
-        { model: "TagType", field: "name", op: "==", value: tagType },
-        ...ALL_DISCOVERABILITY_TYPES,
-      ]
-    }
-  } else {
-    if (props.model) {
-      filters["tagTypeFilter"] = [
-        { model: "TagType", field: "discoverable_" + props.model, op: "==", value: "true" },
-      ]
-    } else {
-      filters["tagTypeFilter"] = ALL_DISCOVERABILITY_TYPES
-    }
+  // Simplified tag type filtering - only filter by model if specified
+  if (props.model) {
+    filters["tagTypeFilter"] = [
+      { model: "TagType", field: "discoverable_" + props.model, op: "==", value: "true" },
+    ]
   }
 
   filterOptions = {
@@ -266,22 +315,76 @@ const fetchData = () => {
 
   filterOptions = SearchUtils.createParametersFromTableOptions({ ...filterOptions })
 
-  TagApi.getAll(filterOptions).then((response) => {
-    items.value = response.data.items
-    total.value = response.data.total
+  TagApi.getAll(filterOptions)
+    .then((response) => {
+      items.value = response.data.items
+      total.value = response.data.total
 
-    if (items.value.length < total.value) {
-      more.value = true
-    } else {
-      more.value = false
+      if (items.value.length < total.value) {
+        more.value = true
+      } else {
+        more.value = false
+      }
+      groups.value = convertData(items.value)
+      loading.value = false
+      validateTags(selectedItems.value)
+    })
+    .catch((error) => {
+      console.error("Error fetching tags:", error)
+      loading.value = false
+    })
+}
+
+async function fetchTagTypes() {
+  const resp = await TagTypeApi.getAll({ itemsPerPage: 5000 })
+  tagTypes.value = Object.fromEntries(resp.data.items.map((tt) => [tt.id, tt]))
+
+  // Add sample tag types for demo purposes if they don't exist
+  if (!tagTypes.value[135]) {
+    tagTypes.value[135] = {
+      id: 135,
+      name: "MITRE Tactics",
+      color: "#1976d2",
+      icon: "bullseye-arrow",
     }
-    groups.value = convertData(items.value)
-    loading.value = false
-    validateTags(selectedItems.value)
-  })
+  }
+  if (!tagTypes.value[136]) {
+    tagTypes.value[136] = {
+      id: 136,
+      name: "MITRE Techniques",
+      color: "#388e3c",
+      icon: "tools",
+    }
+  }
 }
 
 onMounted(fetchData)
+onMounted(fetchTagTypes)
+
+watch(
+  () => props.project,
+  (newVal) => {
+    if (newVal === currentProject.value) {
+      return
+    }
+    currentProject.value = newVal
+    fetchData()
+    validateTags(selectedItems.value)
+  }
+)
+
+function are_required_tags_selected(sel) {
+  // iterate through all tag types and ensure that at least one tag of each required tag type is selected
+  const tagTypes = groups.value
+  for (let i = 0; i < tagTypes.length; i++) {
+    if (tagTypes[i].isRequired) {
+      if (!sel.some((item) => item.tag_type?.id === tagTypes[i]?.id)) {
+        return false
+      }
+    }
+  }
+  return true
+}
 
 const emit = defineEmits(["update:modelValue"])
 
@@ -342,7 +445,9 @@ const closeMenu = () => {
 }
 
 const toggleMenu = () => {
+  console.log("Toggle menu clicked, current menu state:", menu.value)
   menu.value = !menu.value
+  console.log("New menu state:", menu.value)
 }
 
 const showDropdown = (state) => {
@@ -386,6 +491,20 @@ const getBackgroundColorAsStyle = (color) => {
 
 const convertData = (data) => {
   var groupedObject = data.reduce(function (r, a) {
+    // Filter out tag types where all discoverability fields are false
+    const tagType = a.tag_type
+    const hasAnyDiscoverability =
+      tagType.discoverable_incident ||
+      tagType.discoverable_case ||
+      tagType.discoverable_signal ||
+      tagType.discoverable_query ||
+      tagType.discoverable_source ||
+      tagType.discoverable_document
+
+    if (!hasAnyDiscoverability) {
+      return r // Skip this tag type
+    }
+
     if (!r[a.tag_type.id]) {
       r[a.tag_type.id] = {
         id: a.tag_type.id,
@@ -420,6 +539,317 @@ const vClickOutside = {
     document.body.removeEventListener("click", el.clickOutsideEvent)
   },
 }
+
+// Sample data for demo purposes - make reactive so it can be updated from API
+const sampleSuggestions = ref([
+  {
+    tag_type_id: 135,
+    tags: [
+      {
+        id: 58019,
+        name: "Reconnaissance",
+        reason:
+          "The attacker could use the unauthenticated API to gather information about users by mapping phone numbers to email addresses.",
+      },
+      {
+        id: 58020,
+        name: "Collection",
+        reason:
+          "The ability to automate the extraction of email addresses by inputting phone numbers suggests a tactic focused on collecting sensitive data.",
+      },
+      {
+        id: 58021,
+        name: "Impact",
+        reason:
+          "The exposure of email addresses linked to phone numbers can lead to privacy violations or facilitate further attacks like phishing.",
+      },
+    ],
+  },
+  {
+    tag_type_id: 136,
+    tags: [
+      {
+        id: 58022,
+        name: "Active Scanning",
+        reason:
+          "This technique involves actively probing a target to gather information and identify vulnerabilities, which aligns with how an attacker might exploit the unauthenticated API.",
+      },
+      {
+        id: 58023,
+        name: "Gather Victim Identity Information",
+        reason:
+          "This technique encompasses collecting information about victims, such as email addresses and phone numbers, which is relevant given the incident's focus on extracting email addresses using phone numbers.",
+      },
+      {
+        id: 58024,
+        name: "Data from Cloud Storage",
+        reason:
+          "While not a perfect fit, this technique involves accessing data from cloud storage, relating to accessing user data stored or exposed through online services, such as the unauthenticated API.",
+      },
+    ],
+  },
+])
+
+function addSuggestedTag(tag) {
+  if (!tag || !tag.id) return
+  // Find the full tag object from items.value
+  const fullTag = items.value.find((t) => t.id === tag.id)
+  if (!fullTag) return
+  if (!selectedItems.value.some((item) => item.id === fullTag.id)) {
+    selectedItems.value = [...selectedItems.value, fullTag]
+  }
+}
+
+function getTagType(tag_type_id) {
+  return tagTypes.value[tag_type_id] || {}
+}
+
+async function generateSuggestions() {
+  suggestionsLoading.value = true
+
+  try {
+    // TODO: Replace with your actual AI suggestions API call
+    // Example API call structure following the pattern used in this file:
+
+    // const aiSuggestionsPayload = {
+    //   project: currentProject.value?.name,
+    //   model: props.model,
+    //   modelId: props.modelId,
+    //   context: "incident", // or whatever context you need
+    //   // Add any other relevant data like incident description, etc.
+    // }
+
+    // const response = await AiSuggestionsApi.generateTags(aiSuggestionsPayload)
+    // sampleSuggestions.value = response.data.suggestions
+
+    // For now, keeping the mock delay - remove this when implementing real API
+    await new Promise((resolve) => setTimeout(resolve, 1500))
+
+    suggestionsLoading.value = false
+    suggestionsGenerated.value = true
+    suggestionsExpanded.value = true
+  } catch (error) {
+    console.error("Error generating AI suggestions:", error)
+    suggestionsLoading.value = false
+    // You might want to show an error message to the user here
+  }
+}
 </script>
 
 <style scoped src="@/styles/tagpicker.scss"></style>
+<style scoped>
+.mitre-suggestions-panel {
+  background: #f5f7fa;
+  border-radius: 6px;
+  padding: 12px 16px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  transition: padding 0.2s ease;
+}
+.mitre-suggestions-panel.collapsed {
+  padding: 8px 16px;
+}
+.suggestion-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.suggestion-title {
+  font-weight: 400;
+  font-size: 15px;
+  color: #888;
+}
+.collapse-btn {
+  color: #666 !important;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+.collapse-btn:hover {
+  opacity: 1;
+}
+.collapse-btn.v-btn {
+  border: none !important;
+  box-shadow: none !important;
+}
+.collapse-btn.v-btn .v-btn__overlay {
+  display: none !important;
+}
+
+.suggestion-content {
+  overflow: hidden;
+}
+
+.suggestion-collapse-enter-active,
+.suggestion-collapse-leave-active {
+  transition: all 0.3s ease;
+  max-height: 500px;
+  opacity: 1;
+}
+
+.suggestion-collapse-enter-from,
+.suggestion-collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.suggestion-group-label {
+  font-weight: 600;
+  margin-right: 8px;
+}
+.suggestion-chip-wrapper {
+  display: inline-block;
+}
+.suggestion-chip {
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+.tactic-chip {
+  background: #e3f2fd !important;
+  color: #1a237e !important;
+}
+.technique-chip {
+  background: #e8f5e9 !important;
+  color: #1b5e20 !important;
+}
+.add-chip {
+  margin-left: 4px;
+  color: #388e3c;
+}
+.suggestion-help-text {
+  font-size: 12px;
+  color: #aaa;
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+}
+.chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 0;
+}
+.tag-picker-row {
+  display: flex;
+  align-items: flex-start;
+}
+.tag-picker-outline {
+  position: relative;
+  flex: 1;
+  border: 1.5px solid #cfd8dc;
+  border-radius: 8px;
+  padding: 12px 16px 8px 40px; /* left padding for icon */
+  background: #fff;
+  min-height: 56px;
+  margin-bottom: 16px;
+}
+.tag-add-icon {
+  position: absolute;
+  left: 12px;
+  top: 16px;
+  z-index: 2;
+}
+.tag-copy-icon {
+  margin-left: 12px;
+  margin-top: 8px;
+}
+.tag-picker-label {
+  position: absolute;
+  top: -10px;
+  left: 16px;
+  background: #fff;
+  padding: 0 4px;
+  font-size: 13px;
+  color: #757575;
+  z-index: 1;
+}
+.tag-picker-dropdown,
+.tag-picker-dropdown-wrapper {
+  position: static !important;
+  left: auto !important;
+  right: auto !important;
+  top: auto !important;
+  z-index: auto !important;
+  margin-top: 0 !important;
+  max-height: none !important;
+  overflow: visible !important;
+  box-shadow: none !important;
+  background: none !important;
+}
+.tag-picker-dropdown-block {
+  margin-bottom: 16px;
+}
+
+.gradient-border-wrapper {
+  position: relative;
+  display: inline-block;
+  border-radius: 24px;
+  padding: 2px;
+  background: linear-gradient(45deg, #00d4ff, #3b82f6, #8b5cf6, #ec4899, #00d4ff);
+  background-size: 300% 300%;
+  animation: gradientBorder 3s ease infinite;
+}
+
+@keyframes gradientBorder {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.generate-suggestions-btn {
+  color: #1a1a1a !important;
+  border: none !important;
+  border-radius: 22px !important;
+  background: #ffffff !important;
+  --v-theme-surface: #ffffff !important;
+  --v-theme-on-surface: #1a1a1a !important;
+}
+
+.generate-suggestions-btn .v-btn__content {
+  color: #1a1a1a !important;
+}
+
+.generate-suggestions-btn.v-btn {
+  background-color: #ffffff !important;
+  background: #ffffff !important;
+}
+
+.generate-suggestions-btn.v-btn .v-btn__underlay {
+  background-color: #ffffff !important;
+}
+
+.generate-suggestions-btn.v-btn .v-btn__overlay {
+  background: #ffffff !important;
+  opacity: 0 !important;
+}
+
+.white-bg-wrapper {
+  background: #ffffff;
+  border-radius: 22px;
+  overflow: hidden;
+}
+
+.gradient-border-wrapper .v-btn--variant-flat {
+  background-color: #ffffff !important;
+  background: #ffffff !important;
+  border: none !important;
+}
+
+.generate-suggestions-btn .generate-btn-text {
+  font-weight: normal;
+  text-transform: none;
+  color: #1a1a1a;
+}
+
+/* .tag-chip {
+  font-size: 15px;
+  padding: 0 12px;
+  height: 32px;
+} */
+</style>
diff --git a/src/dispatch/static/dispatch/src/tag/store.js b/src/dispatch/static/dispatch/src/tag/store.js
index 6118f5a1e85b..2c6b9b93adcd 100644
--- a/src/dispatch/static/dispatch/src/tag/store.js
+++ b/src/dispatch/static/dispatch/src/tag/store.js
@@ -3,6 +3,7 @@ import { debounce } from "lodash"
 
 import SearchUtils from "@/search/utils"
 import TagApi from "@/tag/api"
+import TagTypeApi from "@/tag_type/api"
 
 const getDefaultSelectedState = () => {
   return {
@@ -46,6 +47,9 @@ const state = {
     },
     loading: false,
   },
+  suggestedTags: [],
+  selectedItems: [],
+  validationError: null,
 }
 
 const getters = {
@@ -128,6 +132,159 @@ const actions = {
       )
     })
   },
+  async fetchSuggestedTags({ commit }, suggestedTagData) {
+    // Fetch all tag and tag_type data needed for the suggestions
+    const tagTypeIds = suggestedTagData.map((g) => g.tag_type_id)
+    const tagIds = suggestedTagData.flatMap((g) => g.tags.map((t) => t.id))
+    const tagFilterOptions = {
+      filters: {
+        tagIdFilter: tagIds.map((id) => ({ model: "Tag", field: "id", op: "==", value: id })),
+        tagTypeIdFilter: tagTypeIds.map((id) => ({
+          model: "TagType",
+          field: "id",
+          op: "==",
+          value: id,
+        })),
+      },
+      itemsPerPage: 100,
+    }
+    const params = SearchUtils.createParametersFromTableOptions({ ...tagFilterOptions })
+    const tagResp = await TagApi.getAll(params)
+    const tags = tagResp.data.items
+    // Group tags by tag_type_id
+    const tagTypeMap = {}
+    tags.forEach((tag) => {
+      if (tag.tag_type && tag.tag_type.id) {
+        tagTypeMap[tag.tag_type.id] = tag.tag_type
+      }
+    })
+    // Also ensure all tag_types are present (in case some are not attached to tags)
+    suggestedTagData.forEach((group) => {
+      if (!tagTypeMap[group.tag_type_id]) {
+        tagTypeMap[group.tag_type_id] = {
+          id: group.tag_type_id,
+          name: "",
+          icon: "",
+          color: "#1976d2",
+        }
+      }
+    })
+    // Build the suggestion structure for rendering
+    const result = suggestedTagData.map((group) => {
+      const tag_type = tagTypeMap[group.tag_type_id]
+      return {
+        tag_type,
+        tags: group.tags.map((t) => {
+          const tag = tags.find((tg) => tg.id === t.id)
+          return {
+            ...t,
+            tag,
+          }
+        }),
+      }
+    })
+    commit("SET_SUGGESTED_TAGS", result)
+  },
+  addSuggestedTag({ commit, state }, tagObj) {
+    if (!tagObj || !tagObj.id) return
+    if (!state.selectedItems.some((item) => item.id === tagObj.id)) {
+      commit("ADD_SELECTED_TAG", tagObj)
+    }
+  },
+  removeTag({ commit, state }, tagId) {
+    commit("REMOVE_SELECTED_TAG", tagId)
+  },
+  validateTags({ commit, state }, { value, groups, currentProject }) {
+    // project_id logic
+    const project_id = currentProject?.id || 0
+    let all_tags_in_project = false
+    if (project_id) {
+      all_tags_in_project = value.every((tag) => tag.project?.id == project_id)
+    } else {
+      const project_name = currentProject?.name
+      if (!project_name) {
+        commit("SET_VALIDATION_ERROR", true)
+        return
+      }
+      all_tags_in_project = value.every((tag) => tag.project?.name == project_name)
+    }
+    if (all_tags_in_project) {
+      if (areRequiredTagsSelected(value, groups)) {
+        commit("SET_VALIDATION_ERROR", true)
+      } else {
+        const required_tag_types = groups
+          .filter((tag_type) => tag_type.isRequired)
+          .map((tag_type) => tag_type.label)
+        commit(
+          "SET_VALIDATION_ERROR",
+          `Please select at least one tag from each required category (${required_tag_types.join(
+            ", "
+          )})`
+        )
+      }
+    } else {
+      commit("SET_VALIDATION_ERROR", "Only tags in selected project are allowed")
+    }
+  },
+  async fetchEligibleTagTypes() {
+    // Fetch all tag types where any discoverable_* is true
+    const discoverableFields = [
+      "discoverable_incident",
+      "discoverable_case",
+      "discoverable_signal",
+      "discoverable_query",
+      "discoverable_source",
+      "discoverable_document",
+    ]
+    const orFilters = discoverableFields.map((field) => ({ field, op: "==", value: true }))
+    const params = {
+      filters: { or: orFilters },
+      itemsPerPage: 5000, // adjust as needed
+    }
+    const resp = await TagTypeApi.getAll(params)
+    return resp.data.items.map((tt) => tt.id)
+  },
+
+  async fetchAllTagsWithEligibleTypes({ commit, dispatch }, { project }) {
+    // 1. Fetch eligible tag type ids
+    const eligibleTagTypeIds = await dispatch("fetchEligibleTagTypes")
+    console.log("Eligible tag type IDs:", eligibleTagTypeIds)
+    // 2. Fetch tags for this project
+    const tagFilterOptions = {
+      filters: {
+        project: [{ model: "Project", field: "name", op: "==", value: project.name }],
+        tagTypeIdFilter: eligibleTagTypeIds.map((id) => ({
+          model: "TagType",
+          field: "id",
+          op: "==",
+          value: id,
+        })),
+        tagFilter: [{ model: "Tag", field: "discoverable", op: "==", value: "true" }],
+      },
+      itemsPerPage: 5000, // adjust as needed
+    }
+    const params = SearchUtils.createParametersFromTableOptions({ ...tagFilterOptions })
+    const tagResp = await TagApi.getAll(params)
+    // 3. Filter tags client-side as a safeguard
+    const tags = tagResp.data.items.filter((tag) => eligibleTagTypeIds.includes(tag.tag_type.id))
+    console.log(
+      "Filtered tags:",
+      tags.map((t) => t.tag_type.name)
+    )
+    commit("SET_TABLE_ROWS", { items: tags, total: tags.length })
+    return tags
+  },
+}
+
+function areRequiredTagsSelected(sel, tagTypes) {
+  for (let i = 0; i < tagTypes.length; i++) {
+    if (tagTypes[i].isRequired) {
+      if (!sel.some((item) => item.tag_type?.id === tagTypes[i]?.id)) {
+        return false
+      }
+    }
+  }
+  return true
 }
 
 const mutations = {
@@ -156,6 +313,18 @@ const mutations = {
     state.selected = { ...getDefaultSelectedState() }
     state.selected.project = project
   },
+  SET_SUGGESTED_TAGS(state, tags) {
+    state.suggestedTags = tags
+  },
+  ADD_SELECTED_TAG(state, tag) {
+    state.selectedItems = [...(state.selectedItems || []), tag]
+  },
+  REMOVE_SELECTED_TAG(state, tagId) {
+    state.selectedItems = (state.selectedItems || []).filter((item) => item.id !== tagId)
+  },
+  SET_VALIDATION_ERROR(state, error) {
+    state.validationError = error
+  },
 }
 
 export default {
diff --git a/src/dispatch/static/dispatch/src/tag_type/NewEditSheet.vue b/src/dispatch/static/dispatch/src/tag_type/NewEditSheet.vue
index dd0a659e6d2a..4fa297a5b60e 100644
--- a/src/dispatch/static/dispatch/src/tag_type/NewEditSheet.vue
+++ b/src/dispatch/static/dispatch/src/tag_type/NewEditSheet.vue
@@ -170,6 +170,23 @@
                   </span>
                 </v-tooltip>
               </v-col>
+              <v-col cols="5">
+                <v-checkbox
+                  v-model="genai_suggestions"
+                  label="Enable GenAI suggestions"
+                  hint="If activated, GenAI will suggest tags of this type."
+                />
+              </v-col>
+              <v-col cols="7">
+                <v-tooltip max-width="500px" open-delay="50" location="bottom">
+                  <template #activator="{ props }">
+                    <v-icon class="mt-4" v-bind="props">mdi-information</v-icon>
+                  </template>
+                  <span>
+                    If activated, GenAI will provide tag suggestions for this tag type in the UI.
+                  </span>
+                </v-tooltip>
+              </v-col>
             </v-row>
           </v-container>
         </v-card-text>
@@ -217,6 +234,7 @@ export default {
       "selected.exclusive",
       "selected.required",
       "selected.use_for_project_folder",
+      "selected.genai_suggestions",
       "selected.loading",
     ]),
     ...mapFields("tag_type", {
diff --git a/src/dispatch/static/dispatch/src/tag_type/Table.vue b/src/dispatch/static/dispatch/src/tag_type/Table.vue
index 355398ba680e..a416f1ec01f3 100644
--- a/src/dispatch/static/dispatch/src/tag_type/Table.vue
+++ b/src/dispatch/static/dispatch/src/tag_type/Table.vue
@@ -33,28 +33,31 @@
             :loading="loading"
             loading-text="Loading... Please wait"
           >
-            <template #item.data-table-actions="{ item }">
+            <template #item.data-table-actions="slotProps">
               <v-menu location="right" origin="overlap">
-                <template #activator="{ props }">
-                  <v-btn icon variant="text" v-bind="props">
+                <template #activator="menuProps">
+                  <v-btn icon variant="text" v-bind="menuProps.props">
                     <v-icon>mdi-dots-vertical</v-icon>
                   </v-btn>
                 </template>
                 <v-list>
-                  <v-list-item @click="createEditShow(item)">
+                  <v-list-item @click="createEditShow(slotProps.item)">
                     <v-list-item-title>View / Edit</v-list-item-title>
                   </v-list-item>
                 </v-list>
               </v-menu>
             </template>
-            <template #item.discoverability="{ item }">
-              <span>{{ combine(item) }}</span>
+            <template #item.discoverability="slotProps">
+              <span>{{ combine(slotProps.item) }}</span>
             </template>
-            <template #item.required="{ value }">
-              <v-checkbox-btn :model-value="value" disabled />
+            <template #item.required="slotProps">
+              <v-checkbox-btn :model-value="slotProps.value" disabled />
             </template>
-            <template #item.exclusive="{ value }">
-              <v-checkbox-btn :model-value="value" disabled />
+            <template #item.exclusive="slotProps">
+              <v-checkbox-btn :model-value="slotProps.value" disabled />
+            </template>
+            <template #item.genai_suggestions="slotProps">
+              <v-checkbox-btn :model-value="slotProps.value" disabled />
             </template>
           </v-data-table-server>
         </v-card>
@@ -94,6 +97,7 @@ export default {
         { title: "Discoverability", value: "discoverability", sortable: false },
         { title: "Required", value: "required", sortable: false },
         { title: "Exclusive", value: "exclusive", sortable: false },
+        { title: "GenAI Suggestions", value: "genai_suggestions", sortable: false },
         { title: "", key: "data-table-actions", sortable: false, align: "end" },
       ],
     }
diff --git a/src/dispatch/tag_type/models.py b/src/dispatch/tag_type/models.py
index 0cb6b7c6d580..adddf2dc3543 100644
--- a/src/dispatch/tag_type/models.py
+++ b/src/dispatch/tag_type/models.py
@@ -32,6 +32,7 @@ class TagType(Base, TimeStampMixin, ProjectMixin):
     icon = Column(String)
     search_vector = Column(TSVectorType("name", regconfig="pg_catalog.simple"))
     use_for_project_folder = Column(Boolean, default=False, server_default="f")
+    genai_suggestions = Column(Boolean, default=False)
 
 
 # Pydantic models
@@ -49,6 +50,7 @@ class TagTypeBase(DispatchBase):
     color: str | None = None
     icon: str | None = None
     use_for_project_folder: bool | None = False
+    genai_suggestions: bool | None = False
 
 
 class TagTypeCreate(TagTypeBase):

From cbfd0195c967eced2f1fbb33440d830439f7e795 Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Thu, 5 Jun 2025 16:59:07 -0700
Subject: [PATCH 02/10] hooking back end to sample data

---
 .../static/dispatch/src/tag/TagPicker.vue     | 101 ++++++------------
 src/dispatch/static/dispatch/src/tag/api.js   |   4 +-
 src/dispatch/tag/models.py                    |  22 ++++
 src/dispatch/tag/views.py                     |  89 +++++++++++----
 4 files changed, 129 insertions(+), 87 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/tag/TagPicker.vue b/src/dispatch/static/dispatch/src/tag/TagPicker.vue
index cdb5f7cb040c..968251025b61 100644
--- a/src/dispatch/static/dispatch/src/tag/TagPicker.vue
+++ b/src/dispatch/static/dispatch/src/tag/TagPicker.vue
@@ -44,7 +44,7 @@
       </span>
       <v-card v-if="menu" class="tag-picker-dropdown-block">
         <!-- Initial state: Show generate button -->
-        <div v-if="!suggestionsGenerated && sampleSuggestions.length > 0" class="mb-4">
+        <div v-if="!suggestionsGenerated" class="mb-4">
           <div class="gradient-border-wrapper">
             <div class="white-bg-wrapper">
               <v-btn
@@ -68,7 +68,7 @@
 
         <!-- Suggestions panel: Show when generated (expanded or collapsed) -->
         <div
-          v-if="suggestionsGenerated && sampleSuggestions.length > 0"
+          v-if="suggestionsGenerated && tagSuggestions.length > 0"
           :class="[
             'mitre-suggestions-panel',
             suggestionsExpanded ? 'mb-4' : 'mb-3',
@@ -76,7 +76,13 @@
           ]"
         >
           <div :class="suggestionsExpanded ? 'suggestion-header mb-1' : 'suggestion-header mb-0'">
-            <div class="suggestion-title">GenAI suggests the following tags:</div>
+            <div
+              class="suggestion-title clickable"
+              @click="suggestionsExpanded = !suggestionsExpanded"
+              :title="suggestionsExpanded ? 'Collapse suggestions' : 'Expand suggestions'"
+            >
+              GenAI suggests the following tags:
+            </div>
             <v-btn
               icon
               size="small"
@@ -95,7 +101,7 @@
           <transition name="suggestion-collapse">
             <div v-if="suggestionsExpanded" class="suggestion-content">
               <div
-                v-for="(group, groupIdx) in sampleSuggestions"
+                v-for="(group, groupIdx) in tagSuggestions"
                 :key="'suggested-group-' + groupIdx"
                 class="suggestion-group mb-1"
               >
@@ -540,55 +546,8 @@ const vClickOutside = {
   },
 }
 
-// Sample data for demo purposes - make reactive so it can be updated from API
-const sampleSuggestions = ref([
-  {
-    tag_type_id: 135,
-    tags: [
-      {
-        id: 58019,
-        name: "Reconnaissance",
-        reason:
-          "The attacker could use the unauthenticated API to gather information about users by mapping phone numbers to email addresses.",
-      },
-      {
-        id: 58020,
-        name: "Collection",
-        reason:
-          "The ability to automate the extraction of email addresses by inputting phone numbers suggests a tactic focused on collecting sensitive data.",
-      },
-      {
-        id: 58021,
-        name: "Impact",
-        reason:
-          "The exposure of email addresses linked to phone numbers can lead to privacy violations or facilitate further attacks like phishing.",
-      },
-    ],
-  },
-  {
-    tag_type_id: 136,
-    tags: [
-      {
-        id: 58022,
-        name: "Active Scanning",
-        reason:
-          "This technique involves actively probing a target to gather information and identify vulnerabilities, which aligns with how an attacker might exploit the unauthenticated API.",
-      },
-      {
-        id: 58023,
-        name: "Gather Victim Identity Information",
-        reason:
-          "This technique encompasses collecting information about victims, such as email addresses and phone numbers, which is relevant given the incident's focus on extracting email addresses using phone numbers.",
-      },
-      {
-        id: 58024,
-        name: "Data from Cloud Storage",
-        reason:
-          "While not a perfect fit, this technique involves accessing data from cloud storage, relating to accessing user data stored or exposed through online services, such as the unauthenticated API.",
-      },
-    ],
-  },
-])
+// Tag suggestions from API - make reactive so it can be updated from API
+const tagSuggestions = ref([])
 
 function addSuggestedTag(tag) {
   if (!tag || !tag.id) return
@@ -608,28 +567,31 @@ async function generateSuggestions() {
   suggestionsLoading.value = true
 
   try {
-    // TODO: Replace with your actual AI suggestions API call
-    // Example API call structure following the pattern used in this file:
+    if (!currentProject.value?.id) {
+      console.error("No project ID available")
+      suggestionsLoading.value = false
+      return
+    }
 
-    // const aiSuggestionsPayload = {
-    //   project: currentProject.value?.name,
-    //   model: props.model,
-    //   modelId: props.modelId,
-    //   context: "incident", // or whatever context you need
-    //   // Add any other relevant data like incident description, etc.
-    // }
+    const response = await TagApi.getRecommendations(currentProject.value.id)
 
-    // const response = await AiSuggestionsApi.generateTags(aiSuggestionsPayload)
-    // sampleSuggestions.value = response.data.suggestions
+    // Handle the new response structure with recommendations field
+    const suggestions = response.data?.recommendations || response.recommendations || []
 
-    // For now, keeping the mock delay - remove this when implementing real API
-    await new Promise((resolve) => setTimeout(resolve, 1500))
+    // Ensure suggestions is an array
+    if (Array.isArray(suggestions)) {
+      tagSuggestions.value = suggestions
+    } else {
+      console.error("API response recommendations is not an array:", suggestions)
+      tagSuggestions.value = []
+    }
 
     suggestionsLoading.value = false
     suggestionsGenerated.value = true
     suggestionsExpanded.value = true
   } catch (error) {
     console.error("Error generating AI suggestions:", error)
+    tagSuggestions.value = []
     suggestionsLoading.value = false
     // You might want to show an error message to the user here
   }
@@ -658,6 +620,13 @@ async function generateSuggestions() {
   font-size: 15px;
   color: #888;
 }
+.suggestion-title.clickable {
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+.suggestion-title.clickable:hover {
+  color: #555;
+}
 .collapse-btn {
   color: #666 !important;
   opacity: 0.7;
diff --git a/src/dispatch/static/dispatch/src/tag/api.js b/src/dispatch/static/dispatch/src/tag/api.js
index a4d202a4b8cd..2bf6f281a8a7 100644
--- a/src/dispatch/static/dispatch/src/tag/api.js
+++ b/src/dispatch/static/dispatch/src/tag/api.js
@@ -13,8 +13,8 @@ export default {
     return API.get(`${resource}/${tagId}`)
   },
 
-  getRecommendations(model, modelId) {
-    return API.get(`/${resource}/recommendations/${model}/${modelId}`)
+  getRecommendations(projectId) {
+    return API.get(`/${resource}/recommendations/${projectId}`)
   },
 
   create(payload) {
diff --git a/src/dispatch/tag/models.py b/src/dispatch/tag/models.py
index 58d0ea240c1f..9f188e15b5ad 100644
--- a/src/dispatch/tag/models.py
+++ b/src/dispatch/tag/models.py
@@ -60,3 +60,25 @@ class TagRead(TagBase):
 
 class TagPagination(Pagination):
     items: list[TagRead]
+
+
+# Tag recommendation models
+class TagRecommendation(DispatchBase):
+    """Model for a single tag recommendation."""
+
+    id: PrimaryKey
+    name: str
+    reason: str
+
+
+class TagTypeRecommendation(DispatchBase):
+    """Model for tag recommendations grouped by tag type."""
+
+    tag_type_id: PrimaryKey
+    tags: list[TagRecommendation]
+
+
+class TagRecommendationResponse(DispatchBase):
+    """Response model for tag recommendations."""
+
+    recommendations: list[TagTypeRecommendation]
diff --git a/src/dispatch/tag/views.py b/src/dispatch/tag/views.py
index 9776bbfc7f14..d6a31ef10ad7 100644
--- a/src/dispatch/tag/views.py
+++ b/src/dispatch/tag/views.py
@@ -1,14 +1,14 @@
 from fastapi import APIRouter, HTTPException, status
 
-from dispatch.database.core import DbSession, get_class_by_tablename
+from dispatch.database.core import DbSession
 from dispatch.database.service import CommonParameters, search_filter_sort_paginate
 from dispatch.models import PrimaryKey
-from dispatch.tag.recommender import get_recommendations
 
 from .models import (
     TagCreate,
     TagPagination,
     TagRead,
+    TagRecommendationResponse,
     TagUpdate,
 )
 from .service import create, delete, get, update
@@ -64,21 +64,72 @@ def delete_tag(db_session: DbSession, tag_id: PrimaryKey):
     delete(db_session=db_session, tag_id=tag_id)
 
 
-@router.get("/recommendations/{model_name}/{id}", response_model=TagPagination)
-def get_tag_recommendations(db_session: DbSession, model_name: str, id: int):
+@router.get("/recommendations/{project_id}", response_model=TagRecommendationResponse)
+def get_tag_recommendations(db_session: DbSession, project_id: int):
     """Retrieves a tag recommendation based on the model and model id."""
-    model_object = get_class_by_tablename(model_name)
-    model = db_session.query(model_object).filter(model_object.id == id).one_or_none()
-    project_slug = model.project.slug
-    organization_slug = model.project.organization.slug
-
-    if not model:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail=[{"msg": f"No model with id {id} and name {model_name} found."}],
-        )
-
-    tags = get_recommendations(
-        db_session, [t.id for t in model.tags], organization_slug, project_slug, model_name
-    )
-    return {"items": tags, "total": len(tags)}
+    recommendations = [
+        {
+            "tag_type_id": 135,
+            "tags": [
+                {
+                    "id": 58019,
+                    "name": "Reconnaissance",
+                    "reason": (
+                        "The attacker could use the unauthenticated API to gather "
+                        "information about users by mapping phone numbers to email addresses."
+                    ),
+                },
+                {
+                    "id": 58020,
+                    "name": "Collection",
+                    "reason": (
+                        "The ability to automate the extraction of email addresses by "
+                        "inputting phone numbers suggests a tactic focused on collecting "
+                        "sensitive data."
+                    ),
+                },
+                {
+                    "id": 58021,
+                    "name": "Impact",
+                    "reason": (
+                        "The exposure of email addresses linked to phone numbers can lead "
+                        "to privacy violations or facilitate further attacks like phishing."
+                    ),
+                },
+            ],
+        },
+        {
+            "tag_type_id": 136,
+            "tags": [
+                {
+                    "id": 58022,
+                    "name": "Active Scanning",
+                    "reason": (
+                        "This technique involves actively probing a target to gather "
+                        "information and identify vulnerabilities, which aligns with how "
+                        "an attacker might exploit the unauthenticated API."
+                    ),
+                },
+                {
+                    "id": 58023,
+                    "name": "Gather Victim Identity Information",
+                    "reason": (
+                        "This technique encompasses collecting information about victims, "
+                        "such as email addresses and phone numbers, which is relevant given "
+                        "the incident's focus on extracting email addresses using phone numbers."
+                    ),
+                },
+                {
+                    "id": 58024,
+                    "name": "Data from Cloud Storage",
+                    "reason": (
+                        "While not a perfect fit, this technique involves accessing data "
+                        "from cloud storage, relating to accessing user data stored or "
+                        "exposed through online services, such as the unauthenticated API."
+                    ),
+                },
+            ],
+        },
+    ]
+
+    return {"recommendations": recommendations}

From d7882b2c3d77ff53c62de6730faa47e3bd06b522 Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Fri, 6 Jun 2025 15:45:51 -0700
Subject: [PATCH 03/10] connected backend to AI plugin to get actual results

---
 src/dispatch/ai/service.py                    | 172 ++++++++++++++++++
 .../dispatch/src/incident/DetailsTab.vue      |   1 +
 .../static/dispatch/src/tag/TagPicker.vue     |  80 +++++++-
 src/dispatch/static/dispatch/src/tag/api.js   |   8 +-
 src/dispatch/tag/models.py                    |   1 +
 src/dispatch/tag/views.py                     |  86 ++-------
 6 files changed, 274 insertions(+), 74 deletions(-)

diff --git a/src/dispatch/ai/service.py b/src/dispatch/ai/service.py
index 4832f5b82833..52914bec9e67 100644
--- a/src/dispatch/ai/service.py
+++ b/src/dispatch/ai/service.py
@@ -10,6 +10,10 @@
 from dispatch.incident.models import Incident
 from dispatch.plugin import service as plugin_service
 from dispatch.signal import service as signal_service
+from dispatch.tag.models import Tag, TagRecommendationResponse
+from dispatch.tag_type.models import TagType
+from dispatch.case import service as case_service
+from dispatch.incident import service as incident_service
 
 from .exceptions import GenAIException
 
@@ -390,3 +394,171 @@ def generate_incident_summary(incident: Incident, db_session: Session) -> str:
     except Exception as e:
         log.exception(f"Error trying to generate summary for incident {incident.name}: {e}")
         return "Incident summary not generated. An error occurred."
+
+
+def get_tag_recommendations(
+    *, db_session, project_id: int, case_id: int | None = None, incident_id: int | None = None
+) -> TagRecommendationResponse:
+    """Gets tag recommendations for a project."""
+    genai_plugin = plugin_service.get_active_instance(
+        db_session=db_session, project_id=project_id, plugin_type="artificial-intelligence"
+    )
+
+    # we check if the artificial intelligence plugin is enabled
+    if not genai_plugin:
+        message = (
+            "AI tag suggestions are not available. No AI plugin is configured for this project."
+        )
+        log.warning(message)
+        return TagRecommendationResponse(recommendations=[], error_message=message)
+
+    storage_plugin = plugin_service.get_active_instance(
+        db_session=db_session, plugin_type="storage", project_id=project_id
+    )
+
+    if not storage_plugin:
+        message = "AI tag suggestions are not available. No storage plugin is configured for this project."
+        log.warning(message)
+        return TagRecommendationResponse(recommendations=[], error_message=message)
+
+    # get resources from the case or incident
+    resources = ""
+    if case_id:
+        case = case_service.get(db_session=db_session, case_id=case_id)
+        if not case:
+            raise ValueError(f"Case with id {case_id} not found")
+        if case.visibility == Visibility.restricted:
+            message = "AI tag suggestions are not available for restricted cases."
+            return TagRecommendationResponse(recommendations=[], error_message=message)
+
+        resources += f"Case title: {case.name}\n"
+        resources += f"Description: {case.description}\n"
+        resources += f"Resolution: {case.resolution}\n"
+        resources += f"Resolution Reason: {case.resolution_reason}\n"
+        resources += f"Case type: {case.case_type.name}\n"
+
+        if case.case_document and case.case_document.resource_id:
+            case_doc = storage_plugin.instance.get(
+                file_id=case.case_document.resource_id,
+                mime_type="text/plain",
+            )
+            resources += f"Case document: {case_doc}\n"
+
+    elif incident_id:
+        incident = incident_service.get(db_session=db_session, incident_id=incident_id)
+        resources += f"Incident: {incident.name}\n"
+        resources += f"Description: {incident.description}\n"
+        resources += f"Resolution: {incident.resolution}\n"
+        resources += f"Incident type: {incident.incident_type.name}\n"
+
+        if incident.incident_document and incident.incident_document.resource_id:
+            incident_doc = storage_plugin.instance.get(
+                file_id=incident.incident_document.resource_id,
+                mime_type="text/plain",
+            )
+            resources += f"Incident document: {incident_doc}\n"
+
+        if incident.incident_review_document and incident.incident_review_document.resource_id:
+            incident_review_doc = storage_plugin.instance.get(
+                file_id=incident.incident_review_document.resource_id,
+                mime_type="text/plain",
+            )
+            resources += f"Incident review document: {incident_review_doc}\n"
+
+    else:
+        raise ValueError("Either case_id or incident_id must be provided")
+    # get all tags for the project with the tag_type that has genai_suggestions set to True
+    tags: list[Tag] = (
+        db_session.query(Tag)
+        .filter(Tag.project_id == project_id)
+        .filter(Tag.tag_type.has(TagType.genai_suggestions.is_(True)))
+        .all()
+    )
+    print(f"*** {tags=}")
+
+    # Check if there are any tags available for AI suggestions
+    if not tags:
+        message = (
+            "AI tag suggestions are not available. No tag types are configured "
+            "for AI suggestions in this project."
+        )
+        return TagRecommendationResponse(recommendations=[], error_message=message)
+
+    # add to the resources each tag name, id, tag_type_id, and description
+    tag_list = "Tags you can use:\n" + (
+        "\n".join(
+            [
+                f"tag_name: {tag.name}\n"
+                f"tag_id: {tag.id}\n"
+                f"description: {tag.description}\n"
+                f"tag_type_id: {tag.tag_type_id}\n"
+                f"tag_type_name: {tag.tag_type.name}\n"
+                f"tag_type_description: {tag.tag_type.description}\n"
+                for tag in tags
+            ]
+        )
+        + "\n"
+    )
+
+    prompt = """
+    You are a security professional that can help with tag recommendations.
+    You will be given details about a security event and a list of tags you can use.
+    You will need to recommend tags for the security event using the descriptions of the tags.
+    Please identify the top three tags of each tag_type_id that best apply to the security event.
+    Provide the output in JSON format organized by tag_type_id in the following format:
+    {"recommendations":
+        [
+            {
+                "tag_type_id": 1,
+                "tags": [
+                    {
+                        "id": 1,
+                        "name": "tag_name",
+                        "reason": "your reasoning for including this tag"
+                    }
+                ]
+            }
+        ]
+    }
+    Do not output anything except for the JSON.
+    """
+
+    prompt += f"** Tags you can use: {tag_list} \n ** Security event details: {resources}"
+
+    tokenized_prompt, num_tokens, encoding = num_tokens_from_string(
+        prompt, genai_plugin.instance.configuration.chat_completion_model
+    )
+
+    # we check if the prompt exceeds the token limit
+    model_token_limit = get_model_token_limit(
+        genai_plugin.instance.configuration.chat_completion_model
+    )
+    if num_tokens > model_token_limit:
+        prompt = truncate_prompt(tokenized_prompt, num_tokens, encoding, model_token_limit)
+
+    try:
+        result = genai_plugin.instance.chat_completion(prompt=prompt)
+
+        # *** I just want to check it for now
+        print(f"*** {result=}")
+
+        # For testing - replace with actual AI result when ready
+        # result = """```json\n{\n    "recommendations": [\n        {\n            "tag_type_id": 135,\n            "tags": [\n                {\n                    "id": 58019,\n                    "name": "Reconnaissance",\n                    "reason": "The investigation may involve understanding the methods used by the malware to infiltrate the system, which could involve reconnaissance techniques."\n                },\n                {\n                    "id": 58020,\n                    "name": "Collection",\n                    "reason": "This tag refers to the potential collection activities by malware, which could involve gathering sensitive data from the systems."\n                },\n                {\n                    "id": 58021,\n                    "name": "Impact",\n                    "reason": "This tag is relevant as it signifies the potential consequences and severity of the malware incident on affected systems."\n                }\n            ]\n        },\n        {\n            "tag_type_id": 136,\n            "tags": [\n                {\n                    "id": 58022,\n                    "name": "Active Scanning",\n                    "reason": "This technique could relate to the malware actively scanning networks or systems to identify vulnerabilities or other targets."\n                },\n                {\n                    "id": 58023,\n                    "name": "Gather Victim Identity Information",\n                    "reason": "The malware may have attempted to collect identity-related information from the affected systems or users."\n                },\n                {\n                    "id": 58024,\n                    "name": "Data from Cloud Storage",\n                    "reason": "If the malware accessed or exfiltrated data from cloud storage solutions, this technique would be relevant."\n                }\n            ]\n        }\n    ]\n}\n```"""
+
+        # Clean the JSON string by removing markdown formatting and newlines
+        # Remove markdown code block markers
+        cleaned_result = result.strip()
+        if cleaned_result.startswith("```json"):
+            cleaned_result = cleaned_result[7:]  # Remove ```json
+        if cleaned_result.endswith("```"):
+            cleaned_result = cleaned_result[:-3]  # Remove ```
+
+        # Replace escaped newlines with actual newlines, then clean whitespace
+        cleaned_result = cleaned_result.replace("\\n", "\n")
+        cleaned_result = " ".join(cleaned_result.split())
+
+        return TagRecommendationResponse.model_validate_json(cleaned_result)
+    except Exception as e:
+        log.exception(f"Error generating tag recommendations: {e}")
+        message = "AI tag suggestions encountered an error. Please try again later."
+        return TagRecommendationResponse(recommendations=[], error_message=message)
diff --git a/src/dispatch/static/dispatch/src/incident/DetailsTab.vue b/src/dispatch/static/dispatch/src/incident/DetailsTab.vue
index 28cccf27ea59..80a31172f54e 100644
--- a/src/dispatch/static/dispatch/src/incident/DetailsTab.vue
+++ b/src/dispatch/static/dispatch/src/incident/DetailsTab.vue
@@ -100,6 +100,7 @@
           :project="project"
           model="incident"
           :model-id="id"
+          :visibility="visibility"
           show-copy
         />
       </v-col>
diff --git a/src/dispatch/static/dispatch/src/tag/TagPicker.vue b/src/dispatch/static/dispatch/src/tag/TagPicker.vue
index 968251025b61..80f65030e95c 100644
--- a/src/dispatch/static/dispatch/src/tag/TagPicker.vue
+++ b/src/dispatch/static/dispatch/src/tag/TagPicker.vue
@@ -44,7 +44,7 @@
       </span>
       <v-card v-if="menu" class="tag-picker-dropdown-block">
         <!-- Initial state: Show generate button -->
-        <div v-if="!suggestionsGenerated" class="mb-4">
+        <div v-if="!suggestionsGenerated && props.visibility !== 'Restricted'" class="mb-4">
           <div class="gradient-border-wrapper">
             <div class="white-bg-wrapper">
               <v-btn
@@ -66,6 +66,24 @@
           </div>
         </div>
 
+        <!-- Error banner: Show when there's an error -->
+        <div v-if="suggestionsGenerated && suggestionsError" class="error-banner mb-3">
+          <div class="error-content">
+            <v-icon size="18" color="#f57f17" class="mr-2">mdi-alert</v-icon>
+            <span class="error-message">{{ suggestionsError }}</span>
+            <v-btn
+              variant="text"
+              size="small"
+              @click="retryGenerateSuggestions"
+              :loading="suggestionsLoading"
+              class="retry-btn ml-3"
+            >
+              <v-icon start size="16">mdi-refresh</v-icon>
+              Try Again
+            </v-btn>
+          </div>
+        </div>
+
         <!-- Suggestions panel: Show when generated (expanded or collapsed) -->
         <div
           v-if="suggestionsGenerated && tagSuggestions.length > 0"
@@ -258,6 +276,7 @@ const tagTypes = ref({})
 const suggestionsExpanded = ref(false)
 const suggestionsLoading = ref(false)
 const suggestionsGenerated = ref(false)
+const suggestionsError = ref(null)
 
 const props = defineProps({
   modelValue: {
@@ -282,6 +301,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  visibility: {
+    type: String,
+    default: null,
+  },
 })
 const currentProject = ref(props.project)
 
@@ -565,6 +588,7 @@ function getTagType(tag_type_id) {
 
 async function generateSuggestions() {
   suggestionsLoading.value = true
+  suggestionsError.value = null
 
   try {
     if (!currentProject.value?.id) {
@@ -573,14 +597,28 @@ async function generateSuggestions() {
       return
     }
 
-    const response = await TagApi.getRecommendations(currentProject.value.id)
+    const response = await TagApi.getRecommendationsIncident(currentProject.value.id, props.modelId)
+
+    // Check for error message from backend
+    const errorMessage = response.data?.error_message || response.error_message
+    if (errorMessage) {
+      suggestionsError.value = errorMessage
+      tagSuggestions.value = []
+      suggestionsLoading.value = false
+      suggestionsGenerated.value = true
+      return
+    }
 
     // Handle the new response structure with recommendations field
     const suggestions = response.data?.recommendations || response.recommendations || []
 
-    // Ensure suggestions is an array
+    // Ensure suggestions is an array and set the value
     if (Array.isArray(suggestions)) {
       tagSuggestions.value = suggestions
+      // If no recommendations were generated, you could show a message to the user
+      if (suggestions.length === 0) {
+        console.info("No tag recommendations were generated")
+      }
     } else {
       console.error("API response recommendations is not an array:", suggestions)
       tagSuggestions.value = []
@@ -591,11 +629,19 @@ async function generateSuggestions() {
     suggestionsExpanded.value = true
   } catch (error) {
     console.error("Error generating AI suggestions:", error)
+    suggestionsError.value = "Failed to generate AI tag suggestions. Please try again later."
     tagSuggestions.value = []
     suggestionsLoading.value = false
-    // You might want to show an error message to the user here
+    suggestionsGenerated.value = true
   }
 }
+
+function retryGenerateSuggestions() {
+  // Reset the state and try again
+  suggestionsGenerated.value = false
+  suggestionsError.value = null
+  generateSuggestions()
+}
 </script>
 
 <style scoped src="@/styles/tagpicker.scss"></style>
@@ -691,6 +737,32 @@ async function generateSuggestions() {
   align-items: center;
   margin-top: 8px;
 }
+
+.error-banner {
+  background: #fffbf0;
+  border: 1px solid #ffc947;
+  border-radius: 6px;
+  padding: 12px 16px;
+}
+.error-content {
+  display: flex;
+  align-items: center;
+}
+.error-message {
+  font-size: 14px;
+  color: #8d6e00;
+  font-weight: 400;
+  flex: 1;
+}
+.retry-btn {
+  color: #8d6e00 !important;
+  font-size: 13px !important;
+  text-transform: none !important;
+  font-weight: 500 !important;
+}
+.retry-btn:hover {
+  background-color: rgba(141, 110, 0, 0.08) !important;
+}
 .chip-group {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/dispatch/static/dispatch/src/tag/api.js b/src/dispatch/static/dispatch/src/tag/api.js
index 2bf6f281a8a7..da13b855f753 100644
--- a/src/dispatch/static/dispatch/src/tag/api.js
+++ b/src/dispatch/static/dispatch/src/tag/api.js
@@ -13,8 +13,12 @@ export default {
     return API.get(`${resource}/${tagId}`)
   },
 
-  getRecommendations(projectId) {
-    return API.get(`/${resource}/recommendations/${projectId}`)
+  getRecommendationsCase(projectId, caseId) {
+    return API.get(`/${resource}/recommendations/${projectId}/case/${caseId}`)
+  },
+
+  getRecommendationsIncident(projectId, incidentId) {
+    return API.get(`/${resource}/recommendations/${projectId}/incident/${incidentId}`)
   },
 
   create(payload) {
diff --git a/src/dispatch/tag/models.py b/src/dispatch/tag/models.py
index 9f188e15b5ad..726e68898841 100644
--- a/src/dispatch/tag/models.py
+++ b/src/dispatch/tag/models.py
@@ -82,3 +82,4 @@ class TagRecommendationResponse(DispatchBase):
     """Response model for tag recommendations."""
 
     recommendations: list[TagTypeRecommendation]
+    error_message: str | None = None
diff --git a/src/dispatch/tag/views.py b/src/dispatch/tag/views.py
index d6a31ef10ad7..4de4f4c8f21c 100644
--- a/src/dispatch/tag/views.py
+++ b/src/dispatch/tag/views.py
@@ -1,5 +1,6 @@
 from fastapi import APIRouter, HTTPException, status
 
+from dispatch.ai import service as ai_service
 from dispatch.database.core import DbSession
 from dispatch.database.service import CommonParameters, search_filter_sort_paginate
 from dispatch.models import PrimaryKey
@@ -64,72 +65,21 @@ def delete_tag(db_session: DbSession, tag_id: PrimaryKey):
     delete(db_session=db_session, tag_id=tag_id)
 
 
-@router.get("/recommendations/{project_id}", response_model=TagRecommendationResponse)
-def get_tag_recommendations(db_session: DbSession, project_id: int):
+@router.get(
+    "/recommendations/{project_id}/case/{case_id}", response_model=TagRecommendationResponse
+)
+def get_tag_recommendations_case(db_session: DbSession, project_id: int, case_id: int):
+    """Retrieves a tag recommendation based on the model and model id."""
+    return ai_service.get_tag_recommendations(
+        db_session=db_session, project_id=project_id, case_id=case_id
+    )
+
+
+@router.get(
+    "/recommendations/{project_id}/incident/{incident_id}", response_model=TagRecommendationResponse
+)
+def get_tag_recommendations_incident(db_session: DbSession, project_id: int, incident_id: int):
     """Retrieves a tag recommendation based on the model and model id."""
-    recommendations = [
-        {
-            "tag_type_id": 135,
-            "tags": [
-                {
-                    "id": 58019,
-                    "name": "Reconnaissance",
-                    "reason": (
-                        "The attacker could use the unauthenticated API to gather "
-                        "information about users by mapping phone numbers to email addresses."
-                    ),
-                },
-                {
-                    "id": 58020,
-                    "name": "Collection",
-                    "reason": (
-                        "The ability to automate the extraction of email addresses by "
-                        "inputting phone numbers suggests a tactic focused on collecting "
-                        "sensitive data."
-                    ),
-                },
-                {
-                    "id": 58021,
-                    "name": "Impact",
-                    "reason": (
-                        "The exposure of email addresses linked to phone numbers can lead "
-                        "to privacy violations or facilitate further attacks like phishing."
-                    ),
-                },
-            ],
-        },
-        {
-            "tag_type_id": 136,
-            "tags": [
-                {
-                    "id": 58022,
-                    "name": "Active Scanning",
-                    "reason": (
-                        "This technique involves actively probing a target to gather "
-                        "information and identify vulnerabilities, which aligns with how "
-                        "an attacker might exploit the unauthenticated API."
-                    ),
-                },
-                {
-                    "id": 58023,
-                    "name": "Gather Victim Identity Information",
-                    "reason": (
-                        "This technique encompasses collecting information about victims, "
-                        "such as email addresses and phone numbers, which is relevant given "
-                        "the incident's focus on extracting email addresses using phone numbers."
-                    ),
-                },
-                {
-                    "id": 58024,
-                    "name": "Data from Cloud Storage",
-                    "reason": (
-                        "While not a perfect fit, this technique involves accessing data "
-                        "from cloud storage, relating to accessing user data stored or "
-                        "exposed through online services, such as the unauthenticated API."
-                    ),
-                },
-            ],
-        },
-    ]
-
-    return {"recommendations": recommendations}
+    return ai_service.get_tag_recommendations(
+        db_session=db_session, project_id=project_id, incident_id=incident_id
+    )

From 40c9005e1335d9b94fdd958431a92c4980929d8b Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Mon, 9 Jun 2025 14:56:07 -0700
Subject: [PATCH 04/10] adding filtering to tag table

---
 src/dispatch/database/service.py              |  79 ++++++++++--
 .../static/dispatch/src/search/utils.js       |   8 +-
 .../static/dispatch/src/tag/Table.vue         |  35 +++++-
 .../dispatch/src/tag/TableFilterDialog.vue    | 114 ++++++++++++++++++
 src/dispatch/static/dispatch/src/tag/store.js |   2 +
 5 files changed, 221 insertions(+), 17 deletions(-)
 create mode 100644 src/dispatch/static/dispatch/src/tag/TableFilterDialog.vue

diff --git a/src/dispatch/database/service.py b/src/dispatch/database/service.py
index 96de7519a00d..3ff5e62fa677 100644
--- a/src/dispatch/database/service.py
+++ b/src/dispatch/database/service.py
@@ -39,7 +39,7 @@
 from dispatch.search.fulltext.composite_search import CompositeSearch
 from dispatch.signal.models import Signal, SignalInstance
 from dispatch.tag.models import Tag
-from dispatch.tag_type.models import TagType
+
 from dispatch.task.models import Task
 from typing import Annotated
 
@@ -137,12 +137,23 @@ def format_for_sqlalchemy(self, query: SQLAlchemyQuery, default_model):
         operator = self.operator
         value = self.value
 
+        # Special handling for TagType.id filtering on Tag model
+        # Needed since TagType.id is not a column on the Tag model
+        # Convert TagType.id filter to tag_type_id filter on Tag model
+        if (
+            filter_spec.get("model") == "TagType"
+            and filter_spec.get("field") == "id"
+            and default_model
+            and getattr(default_model, "__tablename__", None) == "tag"
+        ):
+            filter_spec = {"model": "Tag", "field": "tag_type_id", "op": filter_spec.get("op")}
+
         model = get_model_from_spec(filter_spec, query, default_model)
 
         function = operator.function
         arity = operator.arity
 
-        field_name = self.filter_spec["field"]
+        field_name = filter_spec["field"]
         field = Field(model, field_name)
         sqlalchemy_field = field.get_sqlalchemy_field()
 
@@ -403,8 +414,18 @@ def apply_filters(query, filter_spec, model_cls=None, do_auto_join=True):
 
                                     filter_spec = {
                                                     'or': [
-                                                                    {'model': 'Foo', 'field': 'id', 'op': '==', 'value': '1'},
-                                                                    {'model': 'Bar', 'field': 'id', 'op': '==', 'value': '2'},
+                                                                    {
+                                                                        'model': 'Foo',
+                                                                        'field': 'id',
+                                                                        'op': '==',
+                                                                        'value': '1'
+                                                                    },
+                                                                    {
+                                                                        'model': 'Bar',
+                                                                        'field': 'id',
+                                                                        'op': '==',
+                                                                        'value': '2'
+                                                                    },
                                                     ]
                                     }
 
@@ -459,7 +480,7 @@ def apply_filter_specific_joins(model: Base, filter_spec: dict, query: orm.query
         (Signal, "TagType"): (Signal.tags, True),
         (SignalInstance, "Entity"): (SignalInstance.entities, True),
         (SignalInstance, "EntityType"): (SignalInstance.entities, True),
-        (Tag, "TagType"): (TagType, False),
+        # (Tag, "TagType"): (TagType, False),  # Disabled: filtering by tag_type_id directly
         (Tag, "Project"): (Project, False),
         (CaseType, "Project"): (Project, False),
         (CaseSeverity, "Project"): (Project, False),
@@ -737,12 +758,56 @@ def search_filter_sort_paginate(
     if items_per_page == -1:
         items_per_page = None
 
-    # sometimes we get bad input for the search function
+        # sometimes we get bad input for the search function
     # TODO investigate moving to a different way to parsing queries that won't through errors
     # e.g. websearch_to_tsquery
     # https://www.postgresql.org/docs/current/textsearch-controls.html
     try:
-        query, pagination = apply_pagination(query, page_number=page, page_size=items_per_page)
+        # Check if this model is likely to have duplicate results from many-to-many joins
+        # Models with many secondary relationships (like Tag) can cause count inflation
+        models_needing_distinct = ["Tag"]  # Add other models here as needed
+
+        if model in models_needing_distinct:
+            # Use custom pagination that handles DISTINCT properly
+            from collections import namedtuple
+
+            Pagination = namedtuple(
+                "Pagination", ["page_number", "page_size", "num_pages", "total_results"]
+            )
+
+            if items_per_page == -1 or items_per_page is None:
+                # No pagination requested - apply DISTINCT to get unique results
+                query = query.distinct()
+                items = query.all()
+                total_count = len(items)
+                pagination = Pagination(page, items_per_page, 1, total_count)
+                query = query.limit(0)  # Empty query since we already have items
+            else:
+                # Get total count using distinct ID to avoid duplicates
+                # Remove ORDER BY clause for counting since it's not needed and causes issues with DISTINCT
+                count_query = query.with_entities(model_cls.id).distinct().order_by(None)
+                total_count = count_query.count()
+
+                # Apply DISTINCT to the main query as well to avoid duplicate results
+                # Remove ORDER BY clause since it can conflict with DISTINCT when ordering by joined table columns
+                query = query.distinct().order_by(None)
+
+                # Apply pagination to the distinct query
+                offset = (page - 1) * items_per_page if page > 1 else 0
+                query = query.offset(offset).limit(items_per_page)
+
+                # Calculate number of pages
+                num_pages = (
+                    (total_count + items_per_page - 1) // items_per_page
+                    if items_per_page > 0
+                    else 1
+                )
+
+                pagination = Pagination(page, items_per_page, num_pages, total_count)
+        else:
+            # Use standard pagination for other models
+            query, pagination = apply_pagination(query, page_number=page, page_size=items_per_page)
+
     except ProgrammingError as e:
         log.debug(e)
         return {
diff --git a/src/dispatch/static/dispatch/src/search/utils.js b/src/dispatch/static/dispatch/src/search/utils.js
index 70d2cf09dbf8..993c43e6fcba 100644
--- a/src/dispatch/static/dispatch/src/search/utils.js
+++ b/src/dispatch/static/dispatch/src/search/utils.js
@@ -133,8 +133,8 @@ export default {
         }
       } else {
         each(value, function (value) {
-          // filter null values
-          if (!value) {
+          // filter null/undefined values but allow false
+          if (value === null || value === undefined) {
             return
           }
           if (["commander", "participant", "assignee"].includes(key) && has(value, "email")) {
@@ -166,8 +166,8 @@ export default {
               value: value.name,
             })
           } else if (has(value, "model")) {
-            // avoid filter null values
-            if (value.value) {
+            // avoid filter null/undefined values but allow false
+            if (value.value !== null && value.value !== undefined) {
               subFilter.push({
                 model: value.model,
                 field: value.field,
diff --git a/src/dispatch/static/dispatch/src/tag/Table.vue b/src/dispatch/static/dispatch/src/tag/Table.vue
index d3ffc3bd6e41..2f671ec5b88f 100644
--- a/src/dispatch/static/dispatch/src/tag/Table.vue
+++ b/src/dispatch/static/dispatch/src/tag/Table.vue
@@ -7,7 +7,8 @@
         <settings-breadcrumbs v-model="project" />
       </v-col>
       <v-col class="text-right">
-        <v-btn color="info" class="mr-2" @click="createEditShow()"> New </v-btn>
+        <table-filter-dialog :project="project" />
+        <v-btn color="info" class="ml-2" @click="createEditShow()"> New </v-btn>
       </v-col>
     </v-row>
     <v-row no-gutters>
@@ -34,15 +35,15 @@
             :loading="loading"
             loading-text="Loading... Please wait"
           >
-            <template #item.discoverable="{ value }">
+            <template #[`item.discoverable`]="{ value }">
               <v-checkbox-btn :model-value="value" disabled />
             </template>
-            <template #item.tag_type.name="{ item }">
+            <template #[`item.tag_type.name`]="{ item }">
               <span v-if="item.tag_type">
                 {{ item.tag_type.name }}
               </span>
             </template>
-            <template #item.data-table-actions="{ item }">
+            <template #[`item.data-table-actions`]="{ item }">
               <v-menu location="right" origin="overlap">
                 <template #activator="{ props }">
                   <v-btn icon variant="text" v-bind="props">
@@ -73,6 +74,7 @@ import { mapActions } from "vuex"
 import DeleteDialog from "@/tag/DeleteDialog.vue"
 import NewEditSheet from "@/tag/NewEditSheet.vue"
 import SettingsBreadcrumbs from "@/components/SettingsBreadcrumbs.vue"
+import TableFilterDialog from "@/tag/TableFilterDialog.vue"
 
 export default {
   name: "TagTable",
@@ -81,6 +83,7 @@ export default {
     DeleteDialog,
     NewEditSheet,
     SettingsBreadcrumbs,
+    TableFilterDialog,
   },
 
   data() {
@@ -106,6 +109,8 @@ export default {
       "table.options.sortBy",
       "table.options.descending",
       "table.options.filters.project",
+      "table.options.filters.tag_type",
+      "table.options.filters.discoverable",
       "table.loading",
       "table.rows.items",
       "table.rows.total",
@@ -125,17 +130,35 @@ export default {
     )
 
     this.$watch(
-      (vm) => [vm.q, vm.itemsPerPage, vm.sortBy, vm.descending, vm.project],
+      (vm) => [
+        vm.q,
+        vm.itemsPerPage,
+        vm.sortBy,
+        vm.descending,
+        vm.project,
+        vm.tag_type,
+        vm.discoverable,
+      ],
       () => {
         this.page = 1
         this.$router.push({ query: { project: this.project[0].name } })
-        this.getAll()
+        this.debugGetAll()
       }
     )
   },
 
   methods: {
     ...mapActions("tag", ["getAll", "createEditShow", "removeShow"]),
+
+    // Debug version of getAll to see what filters are being sent
+    debugGetAll() {
+      console.log("Table.vue calling getAll with filters:")
+      console.log("project:", this.project)
+      console.log("tag_type:", this.tag_type)
+      console.log("discoverable:", this.discoverable)
+      console.log("Full table options:", this.$store.state.tag.table.options)
+      this.getAll()
+    },
   },
 }
 </script>
diff --git a/src/dispatch/static/dispatch/src/tag/TableFilterDialog.vue b/src/dispatch/static/dispatch/src/tag/TableFilterDialog.vue
new file mode 100644
index 000000000000..aef670d2dbbb
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/tag/TableFilterDialog.vue
@@ -0,0 +1,114 @@
+<template>
+  <v-dialog v-model="display" max-width="600px">
+    <template #activator="{ props }">
+      <v-badge :model-value="!!numFilters" bordered color="info" :content="numFilters">
+        <v-btn color="secondary" v-bind="props"> Filter </v-btn>
+      </v-badge>
+    </template>
+    <v-card>
+      <v-card-title>
+        <span class="text-h5">Tag Filters</span>
+      </v-card-title>
+      <v-list density="compact">
+        <v-list-item>
+          <tag-type-filter-combobox
+            v-model="local_tag_type"
+            label="Tag Types"
+            :project="currentProject"
+          />
+        </v-list-item>
+        <v-list-item>
+          <v-select
+            v-model="local_discoverable"
+            :items="discoverableOptions"
+            item-title="text"
+            item-value="value"
+            label="Discoverable"
+            clearable
+            multiple
+            chips
+          />
+        </v-list-item>
+      </v-list>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn color="info" variant="text" @click="applyFilters()"> Apply Filters </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import { sum } from "lodash"
+import { mapFields } from "vuex-map-fields"
+
+import TagTypeFilterCombobox from "@/tag_type/TagTypeFilterCombobox.vue"
+
+export default {
+  name: "TagTableFilterDialog",
+
+  components: {
+    TagTypeFilterCombobox,
+  },
+
+  props: {
+    project: {
+      type: Array,
+      default: function () {
+        return []
+      },
+    },
+  },
+
+  data() {
+    return {
+      display: false,
+      local_tag_type: [],
+      local_discoverable: [],
+      discoverableOptions: [
+        { text: "True", value: true },
+        { text: "False", value: false },
+      ],
+    }
+  },
+
+  computed: {
+    ...mapFields("tag", ["table.options.filters.tag_type", "table.options.filters.discoverable"]),
+    currentProject() {
+      // TagTypeFilterCombobox expects a single project object, not an array
+      return this.project && this.project.length > 0 ? this.project[0] : null
+    },
+    numFilters: function () {
+      return sum([this.tag_type?.length || 0, this.discoverable?.length || 0])
+    },
+  },
+
+  methods: {
+    applyFilters() {
+      // Debug logging
+      console.log("Applying filters:")
+      console.log("local_tag_type:", this.local_tag_type)
+      console.log("local_discoverable:", this.local_discoverable)
+
+      // Check the structure of tag_type objects
+      if (this.local_tag_type && this.local_tag_type.length > 0) {
+        console.log("First tag_type object:", this.local_tag_type[0])
+        console.log("Has id?", this.local_tag_type[0].id)
+        console.log("Has name?", this.local_tag_type[0].name)
+      }
+
+      // we set the filter values
+      this.tag_type = this.local_tag_type
+      this.discoverable = this.local_discoverable
+
+      // Debug: Check what's in the store after setting filters
+      console.log("After setting filters:")
+      console.log("Store tag_type:", this.tag_type)
+      console.log("Store discoverable:", this.discoverable)
+
+      // we close the dialog
+      this.display = false
+    },
+  },
+}
+</script>
diff --git a/src/dispatch/static/dispatch/src/tag/store.js b/src/dispatch/static/dispatch/src/tag/store.js
index 2c6b9b93adcd..4945b9bc292c 100644
--- a/src/dispatch/static/dispatch/src/tag/store.js
+++ b/src/dispatch/static/dispatch/src/tag/store.js
@@ -43,6 +43,8 @@ const state = {
       descending: [false],
       filters: {
         project: [],
+        tag_type: [],
+        discoverable: [],
       },
     },
     loading: false,

From 31bfdeaf3049a6bf5943695867796fdd3f02c541 Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Fri, 13 Jun 2025 16:02:52 -0700
Subject: [PATCH 05/10] moving bulk of business logic to vuex store

---
 src/dispatch/ai/service.py                    |  22 +-
 src/dispatch/database/service.py              |   2 +-
 .../static/dispatch/src/styles/tagpicker.scss | 283 +++++++-
 .../static/dispatch/src/tag/Table.vue         |  12 +-
 .../static/dispatch/src/tag/TagPicker.vue     | 618 +++---------------
 src/dispatch/static/dispatch/src/tag/store.js | 174 +++++
 6 files changed, 547 insertions(+), 564 deletions(-)

diff --git a/src/dispatch/ai/service.py b/src/dispatch/ai/service.py
index 52914bec9e67..927a43a64c28 100644
--- a/src/dispatch/ai/service.py
+++ b/src/dispatch/ai/service.py
@@ -416,11 +416,6 @@ def get_tag_recommendations(
         db_session=db_session, plugin_type="storage", project_id=project_id
     )
 
-    if not storage_plugin:
-        message = "AI tag suggestions are not available. No storage plugin is configured for this project."
-        log.warning(message)
-        return TagRecommendationResponse(recommendations=[], error_message=message)
-
     # get resources from the case or incident
     resources = ""
     if case_id:
@@ -437,7 +432,7 @@ def get_tag_recommendations(
         resources += f"Resolution Reason: {case.resolution_reason}\n"
         resources += f"Case type: {case.case_type.name}\n"
 
-        if case.case_document and case.case_document.resource_id:
+        if storage_plugin and case.case_document and case.case_document.resource_id:
             case_doc = storage_plugin.instance.get(
                 file_id=case.case_document.resource_id,
                 mime_type="text/plain",
@@ -451,14 +446,18 @@ def get_tag_recommendations(
         resources += f"Resolution: {incident.resolution}\n"
         resources += f"Incident type: {incident.incident_type.name}\n"
 
-        if incident.incident_document and incident.incident_document.resource_id:
+        if storage_plugin and incident.incident_document and incident.incident_document.resource_id:
             incident_doc = storage_plugin.instance.get(
                 file_id=incident.incident_document.resource_id,
                 mime_type="text/plain",
             )
             resources += f"Incident document: {incident_doc}\n"
 
-        if incident.incident_review_document and incident.incident_review_document.resource_id:
+        if (
+            storage_plugin
+            and incident.incident_review_document
+            and incident.incident_review_document.resource_id
+        ):
             incident_review_doc = storage_plugin.instance.get(
                 file_id=incident.incident_review_document.resource_id,
                 mime_type="text/plain",
@@ -474,7 +473,6 @@ def get_tag_recommendations(
         .filter(Tag.tag_type.has(TagType.genai_suggestions.is_(True)))
         .all()
     )
-    print(f"*** {tags=}")
 
     # Check if there are any tags available for AI suggestions
     if not tags:
@@ -539,12 +537,6 @@ def get_tag_recommendations(
     try:
         result = genai_plugin.instance.chat_completion(prompt=prompt)
 
-        # *** I just want to check it for now
-        print(f"*** {result=}")
-
-        # For testing - replace with actual AI result when ready
-        # result = """```json\n{\n    "recommendations": [\n        {\n            "tag_type_id": 135,\n            "tags": [\n                {\n                    "id": 58019,\n                    "name": "Reconnaissance",\n                    "reason": "The investigation may involve understanding the methods used by the malware to infiltrate the system, which could involve reconnaissance techniques."\n                },\n                {\n                    "id": 58020,\n                    "name": "Collection",\n                    "reason": "This tag refers to the potential collection activities by malware, which could involve gathering sensitive data from the systems."\n                },\n                {\n                    "id": 58021,\n                    "name": "Impact",\n                    "reason": "This tag is relevant as it signifies the potential consequences and severity of the malware incident on affected systems."\n                }\n            ]\n        },\n        {\n            "tag_type_id": 136,\n            "tags": [\n                {\n                    "id": 58022,\n                    "name": "Active Scanning",\n                    "reason": "This technique could relate to the malware actively scanning networks or systems to identify vulnerabilities or other targets."\n                },\n                {\n                    "id": 58023,\n                    "name": "Gather Victim Identity Information",\n                    "reason": "The malware may have attempted to collect identity-related information from the affected systems or users."\n                },\n                {\n                    "id": 58024,\n                    "name": "Data from Cloud Storage",\n                    "reason": "If the malware accessed or exfiltrated data from cloud storage solutions, this technique would be relevant."\n                }\n            ]\n        }\n    ]\n}\n```"""
-
         # Clean the JSON string by removing markdown formatting and newlines
         # Remove markdown code block markers
         cleaned_result = result.strip()
diff --git a/src/dispatch/database/service.py b/src/dispatch/database/service.py
index 3ff5e62fa677..514c7780c2aa 100644
--- a/src/dispatch/database/service.py
+++ b/src/dispatch/database/service.py
@@ -758,7 +758,7 @@ def search_filter_sort_paginate(
     if items_per_page == -1:
         items_per_page = None
 
-        # sometimes we get bad input for the search function
+    # sometimes we get bad input for the search function
     # TODO investigate moving to a different way to parsing queries that won't through errors
     # e.g. websearch_to_tsquery
     # https://www.postgresql.org/docs/current/textsearch-controls.html
diff --git a/src/dispatch/static/dispatch/src/styles/tagpicker.scss b/src/dispatch/static/dispatch/src/styles/tagpicker.scss
index 90fd90aa21cb..c5d99ed33489 100644
--- a/src/dispatch/static/dispatch/src/styles/tagpicker.scss
+++ b/src/dispatch/static/dispatch/src/styles/tagpicker.scss
@@ -97,10 +97,287 @@ button {
 [id^="togList"] ~ label .tag-group-icon-up,
 [id^="togList"]:checked ~ label .tag-group-icon-down,
 [id^="togList"] ~ .checkbox-label {
-  display:none;
+  display: none;
 }
 [id^="togList"] ~ label .tag-group-icon-down,
 [id^="togList"]:checked ~ label .tag-group-icon-up,
-[id^="togList"]:checked ~ .checkbox-label{
-  display:block;
+[id^="togList"]:checked ~ .checkbox-label {
+  display: block;
+}
+
+// New styles from TagPicker.vue
+.mitre-suggestions-panel {
+  background: #f5f7fa;
+  border-radius: 6px;
+  padding: 12px 16px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  transition: padding 0.2s ease;
+
+  &.collapsed {
+    padding: 8px 16px;
+  }
+}
+
+.suggestion-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.suggestion-title {
+  font-weight: 400;
+  font-size: 15px;
+  color: #888;
+
+  &.clickable {
+    cursor: pointer;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: #555;
+    }
+  }
+}
+
+.collapse-btn {
+  color: #666 !important;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &.v-btn {
+    border: none !important;
+    box-shadow: none !important;
+
+    .v-btn__overlay {
+      display: none !important;
+    }
+  }
+}
+
+.suggestion-content {
+  overflow: hidden;
+}
+
+.suggestion-collapse-enter-active,
+.suggestion-collapse-leave-active {
+  transition: all 0.3s ease;
+  max-height: 500px;
+  opacity: 1;
+}
+
+.suggestion-collapse-enter-from,
+.suggestion-collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.suggestion-group-label {
+  font-weight: 600;
+  margin-right: 8px;
+}
+
+.suggestion-chip-wrapper {
+  display: inline-block;
+}
+
+.suggestion-chip {
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.tactic-chip {
+  background: #e3f2fd !important;
+  color: #1a237e !important;
+}
+
+.technique-chip {
+  background: #e8f5e9 !important;
+  color: #1b5e20 !important;
+}
+
+.add-chip {
+  margin-left: 4px;
+  color: #388e3c;
+}
+
+.suggestion-help-text {
+  font-size: 12px;
+  color: #aaa;
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.error-banner {
+  background: #fffbf0;
+  border: 1px solid #ffc947;
+  border-radius: 6px;
+  padding: 12px 16px;
+}
+
+.error-content {
+  display: flex;
+  align-items: center;
+}
+
+.error-message {
+  font-size: 14px;
+  color: #8d6e00;
+  font-weight: 400;
+  flex: 1;
+}
+
+.retry-btn {
+  color: #8d6e00 !important;
+  font-size: 13px !important;
+  text-transform: none !important;
+  font-weight: 500 !important;
+
+  &:hover {
+    background-color: rgba(141, 110, 0, 0.08) !important;
+  }
+}
+
+.tag-picker-row {
+  display: flex;
+  align-items: flex-start;
+}
+
+.tag-picker-outline {
+  position: relative;
+  flex: 1;
+  border: 1.5px solid #cfd8dc;
+  border-radius: 8px;
+  padding: 12px 16px 8px 40px; /* left padding for icon */
+  background: #fff;
+  min-height: 56px;
+  margin-bottom: 16px;
+}
+
+.tag-add-icon {
+  position: absolute;
+  left: 12px;
+  top: 16px;
+  z-index: 2;
+}
+
+.tag-copy-icon {
+  margin-left: 12px;
+  margin-top: 8px;
+}
+
+.tag-picker-label {
+  position: absolute;
+  top: -10px;
+  left: 16px;
+  background: #fff;
+  padding: 0 4px;
+  font-size: 13px;
+  color: #757575;
+  z-index: 1;
+}
+
+.tag-picker-dropdown,
+.tag-picker-dropdown-wrapper {
+  position: static !important;
+  left: auto !important;
+  right: auto !important;
+  top: auto !important;
+  z-index: auto !important;
+  margin-top: 0 !important;
+  max-height: none !important;
+  overflow: visible !important;
+  box-shadow: none !important;
+  background: none !important;
+}
+
+.tag-picker-dropdown-block {
+  margin-bottom: 16px;
+}
+
+.gradient-border-wrapper {
+  position: relative;
+  display: inline-block;
+  border-radius: 24px;
+  padding: 2px;
+  background: linear-gradient(45deg, #00d4ff, #3b82f6, #8b5cf6, #ec4899, #00d4ff);
+  background-size: 300% 300%;
+  animation: gradientBorder 3s ease infinite;
+}
+
+@keyframes gradientBorder {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.generate-suggestions-btn {
+  color: #1a1a1a !important;
+  border: none !important;
+  border-radius: 22px !important;
+  background: #ffffff !important;
+  --v-theme-surface: #ffffff !important;
+  --v-theme-on-surface: #1a1a1a !important;
+
+  .v-btn__content {
+    color: #1a1a1a !important;
+  }
+
+  &.v-btn {
+    background-color: #ffffff !important;
+    background: #ffffff !important;
+
+    .v-btn__underlay {
+      background-color: #ffffff !important;
+    }
+
+    .v-btn__overlay {
+      background: #ffffff !important;
+      opacity: 0 !important;
+    }
+  }
+}
+
+.white-bg-wrapper {
+  background: #ffffff;
+  border-radius: 22px;
+  overflow: hidden;
+}
+
+.gradient-border-wrapper .v-btn--variant-flat {
+  background-color: #ffffff !important;
+  background: #ffffff !important;
+  border: none !important;
+}
+
+.generate-suggestions-btn .generate-btn-text {
+  font-weight: normal;
+  text-transform: none;
+  color: #1a1a1a;
+}
+
+// Ensure icons inside tag chips and suggestions display correctly
+.tag-chip .v-icon,
+.suggestion-chip .v-icon {
+  color: inherit !important;
+  background: none !important;
+  font-family: "Material Design Icons" !important;
+  font-style: normal !important;
+  font-weight: normal !important;
+  text-transform: none !important;
+  speak: never;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/src/dispatch/static/dispatch/src/tag/Table.vue b/src/dispatch/static/dispatch/src/tag/Table.vue
index 2f671ec5b88f..a603194ccad9 100644
--- a/src/dispatch/static/dispatch/src/tag/Table.vue
+++ b/src/dispatch/static/dispatch/src/tag/Table.vue
@@ -142,23 +142,13 @@ export default {
       () => {
         this.page = 1
         this.$router.push({ query: { project: this.project[0].name } })
-        this.debugGetAll()
+        this.getAll()
       }
     )
   },
 
   methods: {
     ...mapActions("tag", ["getAll", "createEditShow", "removeShow"]),
-
-    // Debug version of getAll to see what filters are being sent
-    debugGetAll() {
-      console.log("Table.vue calling getAll with filters:")
-      console.log("project:", this.project)
-      console.log("tag_type:", this.tag_type)
-      console.log("discoverable:", this.discoverable)
-      console.log("Full table options:", this.$store.state.tag.table.options)
-      this.getAll()
-    },
   },
 }
 </script>
diff --git a/src/dispatch/static/dispatch/src/tag/TagPicker.vue b/src/dispatch/static/dispatch/src/tag/TagPicker.vue
index 80f65030e95c..87e9911163a4 100644
--- a/src/dispatch/static/dispatch/src/tag/TagPicker.vue
+++ b/src/dispatch/static/dispatch/src/tag/TagPicker.vue
@@ -3,9 +3,12 @@
     <div v-click-outside="closeMenu">
       <span class="tag-picker-row">
         <div class="tag-picker-outline">
-          <v-icon class="panel-button tag-add-icon" @click="toggleMenu" style="cursor: pointer">{{
-            menu ? "mdi-minus" : "mdi-plus"
-          }}</v-icon>
+          <v-icon
+            class="panel-button tag-add-icon"
+            @click.stop="toggleMenu"
+            style="cursor: pointer"
+            >{{ menu ? "mdi-minus" : "mdi-plus" }}</v-icon
+          >
           <div class="tag-picker-label">Tags</div>
           <div class="chip-group" v-show="selectedItems.length">
             <span v-for="(item, index) in selectedItems" :key="item">
@@ -117,7 +120,7 @@
 
           <!-- Suggestion content - only show when expanded -->
           <transition name="suggestion-collapse">
-            <div v-if="suggestionsExpanded" class="suggestion-content">
+            <div v-show="suggestionsExpanded" class="suggestion-content">
               <div
                 v-for="(group, groupIdx) in tagSuggestions"
                 :key="'suggested-group-' + groupIdx"
@@ -134,11 +137,7 @@
                 >
                   <v-chip
                     class="suggestion-chip tag-chip mr-1"
-                    :style="{
-                      backgroundColor: (getTagType(group.tag_type_id).color || '#e0e0e0') + '22',
-                      color: getTagType(group.tag_type_id).color || '#333',
-                      cursor: 'pointer',
-                    }"
+                    :color="getTagType(group.tag_type_id).color || '#e0e0e0'"
                     size="small"
                     label
                     rounded
@@ -148,8 +147,9 @@
                     <v-icon
                       start
                       size="16"
-                      :color="getTagType(group.tag_type_id).color"
+                      :color="'#fff'"
                       v-if="getTagType(group.tag_type_id).icon"
+                      class="tag-type-icon"
                     >
                       mdi-{{ getTagType(group.tag_type_id).icon }}
                     </v-icon>
@@ -201,7 +201,7 @@
                         :icon="'mdi-' + group.icon"
                         size="18"
                         :color="group.color"
-                        :style="getBackgroundColorAsStyle(group.color)"
+                        class="tag-type-icon"
                       />
                       <strong v-text="group.label" />
                       <span v-show="group.isRequired" class="tag-group-rule">Required</span>
@@ -256,34 +256,20 @@
 <script setup>
 import { ref, computed, onMounted, watch } from "vue"
 import { cloneDeep } from "lodash"
-import TagApi from "@/tag/api"
-import SearchUtils from "@/search/utils"
-import TagTypeApi from "@/tag_type/api"
+import { useStore } from "vuex"
 
+const store = useStore()
 const menu = ref(false)
-const dummyText = ref(" ")
-const items = ref([])
-const total = ref(0)
-const groups = ref([])
 const searchQuery = ref("")
 const filteredMenuItems = ref([])
 const isDropdownOpen = ref(false)
-const error = ref(true)
 const snackbar = ref(false)
-const loading = ref(false)
-const more = ref(false)
-const tagTypes = ref({})
 const suggestionsExpanded = ref(false)
-const suggestionsLoading = ref(false)
-const suggestionsGenerated = ref(false)
-const suggestionsError = ref(null)
 
 const props = defineProps({
   modelValue: {
     type: Array,
-    default: function () {
-      return []
-    },
+    default: () => [],
   },
   project: {
     type: Object,
@@ -306,162 +292,63 @@ const props = defineProps({
     default: null,
   },
 })
-const currentProject = ref(props.project)
 
-const fetchData = () => {
-  if (!currentProject.value) {
-    return
-  }
-  loading.value = true
-
-  let filterOptions = {
-    q: null,
-    itemsPerPage: 500,
-    sortBy: ["tag_type.name"],
-    descending: [false],
-  }
-
-  let filters = {}
-
-  filters["project"] = [
-    { model: "Project", field: "name", op: "==", value: currentProject.value.name },
-  ]
-
-  // add a filter to only return discoverable tags
-  filters["tagFilter"] = [{ model: "Tag", field: "discoverable", op: "==", value: "true" }]
-
-  // Simplified tag type filtering - only filter by model if specified
-  if (props.model) {
-    filters["tagTypeFilter"] = [
-      { model: "TagType", field: "discoverable_" + props.model, op: "==", value: "true" },
-    ]
-  }
-
-  filterOptions = {
-    ...filterOptions,
-    filters: filters,
-  }
-
-  filterOptions = SearchUtils.createParametersFromTableOptions({ ...filterOptions })
+// Computed properties from store
+const groups = computed(() => store.state.tag.groups)
+const suggestionsLoading = computed(() => store.state.tag.suggestionsLoading)
+const suggestionsGenerated = computed(() => store.state.tag.suggestionsGenerated)
+const suggestionsError = computed(() => store.state.tag.suggestionsError)
+const tagSuggestions = computed(() => store.state.tag.tagSuggestions)
 
-  TagApi.getAll(filterOptions)
-    .then((response) => {
-      items.value = response.data.items
-      total.value = response.data.total
-
-      if (items.value.length < total.value) {
-        more.value = true
-      } else {
-        more.value = false
-      }
-      groups.value = convertData(items.value)
-      loading.value = false
-      validateTags(selectedItems.value)
-    })
-    .catch((error) => {
-      console.error("Error fetching tags:", error)
-      loading.value = false
+// Selected items computed
+const selectedItems = computed({
+  get: () => cloneDeep(props.modelValue),
+  set: (value) => {
+    const tags = value.filter((v) => typeof v !== "string")
+    emit("update:modelValue", tags)
+    store.dispatch("tag/validateTags", {
+      value: tags,
+      groups: groups.value,
+      currentProject: props.project,
     })
-}
+  },
+})
 
-async function fetchTagTypes() {
-  const resp = await TagTypeApi.getAll({ itemsPerPage: 5000 })
-  tagTypes.value = Object.fromEntries(resp.data.items.map((tt) => [tt.id, tt]))
+const emit = defineEmits(["update:modelValue"])
 
-  // Add sample tag types for demo purposes if they don't exist
-  if (!tagTypes.value[135]) {
-    tagTypes.value[135] = {
-      id: 135,
-      name: "MITRE Tactics",
-      color: "#1976d2",
-      icon: "bullseye-arrow",
-    }
-  }
-  if (!tagTypes.value[136]) {
-    tagTypes.value[136] = {
-      id: 136,
-      name: "MITRE Techniques",
-      color: "#388e3c",
-      icon: "tools",
-    }
-  }
+// Methods
+const fetchData = async () => {
+  if (!props.project) return
+  await store.dispatch("tag/fetchTags", {
+    project: props.project,
+    model: props.model,
+  })
 }
 
-onMounted(fetchData)
-onMounted(fetchTagTypes)
-
-watch(
-  () => props.project,
-  (newVal) => {
-    if (newVal === currentProject.value) {
-      return
-    }
-    currentProject.value = newVal
-    fetchData()
-    validateTags(selectedItems.value)
-  }
-)
-
-function are_required_tags_selected(sel) {
-  // iterate through all tag types and ensure that at least one tag of each required tag type is selected
-  const tagTypes = groups.value
-  for (let i = 0; i < tagTypes.length; i++) {
-    if (tagTypes[i].isRequired) {
-      if (!sel.some((item) => item.tag_type?.id === tagTypes[i]?.id)) {
-        return false
-      }
-    }
-  }
-  return true
+const fetchTagTypes = async () => {
+  await store.dispatch("tag/fetchTagTypes")
 }
 
-const emit = defineEmits(["update:modelValue"])
+const generateSuggestions = async () => {
+  if (!props.project?.id) return
+  await store.dispatch("tag/generateSuggestions", {
+    projectId: props.project.id,
+    modelId: props.modelId,
+  })
+}
 
-function validateTags(value) {
-  const project_id = currentProject.value?.id || 0
-  var all_tags_in_project = false
-  if (project_id) {
-    all_tags_in_project = value.every((tag) => tag.project?.id == project_id)
-  } else {
-    const project_name = currentProject.value?.name
-    if (!project_name) {
-      error.value = true
-      dummyText.value += " "
-      return
-    }
-    all_tags_in_project = value.every((tag) => tag.project?.name == project_name)
-  }
-  if (all_tags_in_project) {
-    if (are_required_tags_selected(value)) {
-      error.value = true
-    } else {
-      const required_tag_types = groups.value
-        .filter((tag_type) => tag_type.isRequired)
-        .map((tag_type) => tag_type.label)
-      error.value = `Please select at least one tag from each required category (${required_tag_types.join(
-        ", "
-      )})`
-    }
-  } else {
-    error.value = "Only tags in selected project are allowed"
+const addSuggestedTag = (tag) => {
+  if (!tag || !tag.id) return
+  const fullTag = store.state.tag.table.rows.items.find((t) => t.id === tag.id)
+  if (!fullTag) return
+  if (!selectedItems.value.some((item) => item.id === fullTag.id)) {
+    selectedItems.value = [...selectedItems.value, fullTag]
   }
-  dummyText.value += " "
 }
 
-const selectedItems = computed({
-  get: () => cloneDeep(props.modelValue),
-  set: (value) => {
-    const tags = value.filter((v) => {
-      if (typeof v === "string") {
-        return false
-      }
-      return true
-    })
-    emit("update:modelValue", tags)
-    // check to make sure all tags in project
-    validateTags(value)
-  },
-})
+const getTagType = (tagTypeId) => {
+  return store.state.tag.tagTypes[tagTypeId] || {}
+}
 
 const copyTags = () => {
   const tags = selectedItems.value.map((item) => `${item.tag_type.name}/${item.name}`)
@@ -474,9 +361,7 @@ const closeMenu = () => {
 }
 
 const toggleMenu = () => {
-  console.log("Toggle menu clicked, current menu state:", menu.value)
   menu.value = !menu.value
-  console.log("New menu state:", menu.value)
 }
 
 const showDropdown = (state) => {
@@ -486,12 +371,10 @@ const showDropdown = (state) => {
 const removeItem = (index) => {
   const value = selectedItems.value.filter((item) => item.id !== index)
   selectedItems.value = value
-  validateTags(value)
 }
 
 const performSearch = () => {
   filteredMenuItems.value = []
-
   groups.value.forEach((group) => {
     const filteredItems = group.menuItems.filter((item) =>
       item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
@@ -510,51 +393,32 @@ const isItemDisabled = (group, item) => {
   )
 }
 
-const getColorAsStyle = (color) => {
-  return `color: '${color}'`
-}
-
-const getBackgroundColorAsStyle = (color) => {
-  return `background-color: '${color}'`
-}
-
-const convertData = (data) => {
-  var groupedObject = data.reduce(function (r, a) {
-    // Filter out tag types where all discoverability fields are false
-    const tagType = a.tag_type
-    const hasAnyDiscoverability =
-      tagType.discoverable_incident ||
-      tagType.discoverable_case ||
-      tagType.discoverable_signal ||
-      tagType.discoverable_query ||
-      tagType.discoverable_source ||
-      tagType.discoverable_document
+// Lifecycle hooks
+onMounted(() => {
+  fetchData()
+  fetchTagTypes()
+})
 
-    if (!hasAnyDiscoverability) {
-      return r // Skip this tag type
+watch(
+  () => props.project,
+  (newVal) => {
+    if (newVal) {
+      fetchData()
     }
+  }
+)
 
-    if (!r[a.tag_type.id]) {
-      r[a.tag_type.id] = {
-        id: a.tag_type.id,
-        icon: a.tag_type.icon,
-        label: a.tag_type.name,
-        desc: a.tag_type.description,
-        color: a.tag_type.color,
-        isRequired: a.tag_type.required,
-        isExclusive: a.tag_type.exclusive,
-        menuItems: [],
-      }
+// When suggestions are generated, expand the suggestions box by default
+watch(
+  () => suggestionsGenerated.value,
+  (newVal) => {
+    if (newVal) {
+      suggestionsExpanded.value = true
     }
-    r[a.tag_type.id].menuItems.push(a)
-    return r
-  }, Object.create(null))
-  var temp = Object.keys(groupedObject).map(function (key) {
-    return groupedObject[key]
-  })
-  return temp
-}
+  }
+)
 
+// Click outside directive
 const vClickOutside = {
   mounted(el, binding) {
     el.clickOutsideEvent = function (event) {
@@ -569,328 +433,14 @@ const vClickOutside = {
   },
 }
 
-// Tag suggestions from API - make reactive so it can be updated from API
-const tagSuggestions = ref([])
-
-function addSuggestedTag(tag) {
-  if (!tag || !tag.id) return
-  // Find the full tag object from items.value
-  const fullTag = items.value.find((t) => t.id === tag.id)
-  if (!fullTag) return
-  if (!selectedItems.value.some((item) => item.id === fullTag.id)) {
-    selectedItems.value = [...selectedItems.value, fullTag]
-  }
-}
-
-function getTagType(tag_type_id) {
-  return tagTypes.value[tag_type_id] || {}
-}
-
-async function generateSuggestions() {
-  suggestionsLoading.value = true
-  suggestionsError.value = null
-
-  try {
-    if (!currentProject.value?.id) {
-      console.error("No project ID available")
-      suggestionsLoading.value = false
-      return
-    }
-
-    const response = await TagApi.getRecommendationsIncident(currentProject.value.id, props.modelId)
-
-    // Check for error message from backend
-    const errorMessage = response.data?.error_message || response.error_message
-    if (errorMessage) {
-      suggestionsError.value = errorMessage
-      tagSuggestions.value = []
-      suggestionsLoading.value = false
-      suggestionsGenerated.value = true
-      return
-    }
-
-    // Handle the new response structure with recommendations field
-    const suggestions = response.data?.recommendations || response.recommendations || []
-
-    // Ensure suggestions is an array and set the value
-    if (Array.isArray(suggestions)) {
-      tagSuggestions.value = suggestions
-      // If no recommendations were generated, you could show a message to the user
-      if (suggestions.length === 0) {
-        console.info("No tag recommendations were generated")
-      }
-    } else {
-      console.error("API response recommendations is not an array:", suggestions)
-      tagSuggestions.value = []
-    }
-
-    suggestionsLoading.value = false
-    suggestionsGenerated.value = true
-    suggestionsExpanded.value = true
-  } catch (error) {
-    console.error("Error generating AI suggestions:", error)
-    suggestionsError.value = "Failed to generate AI tag suggestions. Please try again later."
-    tagSuggestions.value = []
-    suggestionsLoading.value = false
-    suggestionsGenerated.value = true
-  }
-}
-
 function retryGenerateSuggestions() {
-  // Reset the state and try again
-  suggestionsGenerated.value = false
-  suggestionsError.value = null
+  store.dispatch("tag/resetSuggestions")
   generateSuggestions()
 }
-</script>
-
-<style scoped src="@/styles/tagpicker.scss"></style>
-<style scoped>
-.mitre-suggestions-panel {
-  background: #f5f7fa;
-  border-radius: 6px;
-  padding: 12px 16px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-  transition: padding 0.2s ease;
-}
-.mitre-suggestions-panel.collapsed {
-  padding: 8px 16px;
-}
-.suggestion-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.suggestion-title {
-  font-weight: 400;
-  font-size: 15px;
-  color: #888;
-}
-.suggestion-title.clickable {
-  cursor: pointer;
-  transition: color 0.2s ease;
-}
-.suggestion-title.clickable:hover {
-  color: #555;
-}
-.collapse-btn {
-  color: #666 !important;
-  opacity: 0.7;
-  transition: opacity 0.2s ease;
-}
-.collapse-btn:hover {
-  opacity: 1;
-}
-.collapse-btn.v-btn {
-  border: none !important;
-  box-shadow: none !important;
-}
-.collapse-btn.v-btn .v-btn__overlay {
-  display: none !important;
-}
-
-.suggestion-content {
-  overflow: hidden;
-}
-
-.suggestion-collapse-enter-active,
-.suggestion-collapse-leave-active {
-  transition: all 0.3s ease;
-  max-height: 500px;
-  opacity: 1;
-}
-
-.suggestion-collapse-enter-from,
-.suggestion-collapse-leave-to {
-  max-height: 0;
-  opacity: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.suggestion-group-label {
-  font-weight: 600;
-  margin-right: 8px;
-}
-.suggestion-chip-wrapper {
-  display: inline-block;
-}
-.suggestion-chip {
-  margin-bottom: 4px;
-  cursor: pointer;
-}
-.tactic-chip {
-  background: #e3f2fd !important;
-  color: #1a237e !important;
-}
-.technique-chip {
-  background: #e8f5e9 !important;
-  color: #1b5e20 !important;
-}
-.add-chip {
-  margin-left: 4px;
-  color: #388e3c;
-}
-.suggestion-help-text {
-  font-size: 12px;
-  color: #aaa;
-  display: flex;
-  align-items: center;
-  margin-top: 8px;
-}
-
-.error-banner {
-  background: #fffbf0;
-  border: 1px solid #ffc947;
-  border-radius: 6px;
-  padding: 12px 16px;
-}
-.error-content {
-  display: flex;
-  align-items: center;
-}
-.error-message {
-  font-size: 14px;
-  color: #8d6e00;
-  font-weight: 400;
-  flex: 1;
-}
-.retry-btn {
-  color: #8d6e00 !important;
-  font-size: 13px !important;
-  text-transform: none !important;
-  font-weight: 500 !important;
-}
-.retry-btn:hover {
-  background-color: rgba(141, 110, 0, 0.08) !important;
-}
-.chip-group {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 8px;
-  margin-bottom: 0;
-}
-.tag-picker-row {
-  display: flex;
-  align-items: flex-start;
-}
-.tag-picker-outline {
-  position: relative;
-  flex: 1;
-  border: 1.5px solid #cfd8dc;
-  border-radius: 8px;
-  padding: 12px 16px 8px 40px; /* left padding for icon */
-  background: #fff;
-  min-height: 56px;
-  margin-bottom: 16px;
-}
-.tag-add-icon {
-  position: absolute;
-  left: 12px;
-  top: 16px;
-  z-index: 2;
-}
-.tag-copy-icon {
-  margin-left: 12px;
-  margin-top: 8px;
-}
-.tag-picker-label {
-  position: absolute;
-  top: -10px;
-  left: 16px;
-  background: #fff;
-  padding: 0 4px;
-  font-size: 13px;
-  color: #757575;
-  z-index: 1;
-}
-.tag-picker-dropdown,
-.tag-picker-dropdown-wrapper {
-  position: static !important;
-  left: auto !important;
-  right: auto !important;
-  top: auto !important;
-  z-index: auto !important;
-  margin-top: 0 !important;
-  max-height: none !important;
-  overflow: visible !important;
-  box-shadow: none !important;
-  background: none !important;
-}
-.tag-picker-dropdown-block {
-  margin-bottom: 16px;
-}
-
-.gradient-border-wrapper {
-  position: relative;
-  display: inline-block;
-  border-radius: 24px;
-  padding: 2px;
-  background: linear-gradient(45deg, #00d4ff, #3b82f6, #8b5cf6, #ec4899, #00d4ff);
-  background-size: 300% 300%;
-  animation: gradientBorder 3s ease infinite;
-}
-
-@keyframes gradientBorder {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
-
-.generate-suggestions-btn {
-  color: #1a1a1a !important;
-  border: none !important;
-  border-radius: 22px !important;
-  background: #ffffff !important;
-  --v-theme-surface: #ffffff !important;
-  --v-theme-on-surface: #1a1a1a !important;
-}
-
-.generate-suggestions-btn .v-btn__content {
-  color: #1a1a1a !important;
-}
-
-.generate-suggestions-btn.v-btn {
-  background-color: #ffffff !important;
-  background: #ffffff !important;
-}
 
-.generate-suggestions-btn.v-btn .v-btn__underlay {
-  background-color: #ffffff !important;
-}
-
-.generate-suggestions-btn.v-btn .v-btn__overlay {
-  background: #ffffff !important;
-  opacity: 0 !important;
-}
-
-.white-bg-wrapper {
-  background: #ffffff;
-  border-radius: 22px;
-  overflow: hidden;
-}
-
-.gradient-border-wrapper .v-btn--variant-flat {
-  background-color: #ffffff !important;
-  background: #ffffff !important;
-  border: none !important;
-}
-
-.generate-suggestions-btn .generate-btn-text {
-  font-weight: normal;
-  text-transform: none;
-  color: #1a1a1a;
+function getColorAsStyle(color) {
+  return color ? { backgroundColor: color } : {}
 }
+</script>
 
-/* .tag-chip {
-  font-size: 15px;
-  padding: 0 12px;
-  height: 32px;
-} */
-</style>
+<style scoped src="@/styles/tagpicker.scss"></style>
diff --git a/src/dispatch/static/dispatch/src/tag/store.js b/src/dispatch/static/dispatch/src/tag/store.js
index 4945b9bc292c..0c1d8e3a2f88 100644
--- a/src/dispatch/static/dispatch/src/tag/store.js
+++ b/src/dispatch/static/dispatch/src/tag/store.js
@@ -52,6 +52,15 @@ const state = {
   suggestedTags: [],
   selectedItems: [],
   validationError: null,
+  tagTypes: {},
+  groups: [],
+  loading: false,
+  more: false,
+  total: 0,
+  suggestionsLoading: false,
+  suggestionsGenerated: false,
+  suggestionsError: null,
+  tagSuggestions: [],
 }
 
 const getters = {
@@ -276,6 +285,113 @@ const actions = {
     commit("SET_TABLE_ROWS", { items: tags, total: tags.length })
     return tags
   },
+
+  async fetchTags({ commit }, { project, model }) {
+    if (!project) return
+
+    commit("SET_LOADING", true)
+
+    let filterOptions = {
+      q: null,
+      itemsPerPage: 500,
+      sortBy: ["tag_type.name"],
+      descending: [false],
+      filters: {
+        project: [{ model: "Project", field: "name", op: "==", value: project.name }],
+        tagFilter: [{ model: "Tag", field: "discoverable", op: "==", value: "true" }],
+      },
+    }
+
+    if (model) {
+      filterOptions.filters.tagTypeFilter = [
+        { model: "TagType", field: "discoverable_" + model, op: "==", value: "true" },
+      ]
+    }
+
+    filterOptions = SearchUtils.createParametersFromTableOptions(filterOptions)
+
+    try {
+      const response = await TagApi.getAll(filterOptions)
+      commit("SET_TABLE_ROWS", response.data)
+      commit("SET_GROUPS", convertData(response.data.items))
+      commit("SET_LOADING", false)
+      return response.data.items
+    } catch (error) {
+      console.error("Error fetching tags:", error)
+      commit("SET_LOADING", false)
+      throw error
+    }
+  },
+
+  async fetchTagTypes({ commit }) {
+    try {
+      const resp = await TagTypeApi.getAll({ itemsPerPage: 5000 })
+      const tagTypes = Object.fromEntries(resp.data.items.map((tt) => [tt.id, tt]))
+
+      // Add sample tag types for demo purposes if they don't exist
+      if (!tagTypes[135]) {
+        tagTypes[135] = {
+          id: 135,
+          name: "MITRE Tactics",
+          color: "#1976d2",
+          icon: "bullseye-arrow",
+        }
+      }
+      if (!tagTypes[136]) {
+        tagTypes[136] = {
+          id: 136,
+          name: "MITRE Techniques",
+          color: "#388e3c",
+          icon: "tools",
+        }
+      }
+
+      commit("SET_TAG_TYPES", tagTypes)
+      return tagTypes
+    } catch (error) {
+      console.error("Error fetching tag types:", error)
+      throw error
+    }
+  },
+
+  async generateSuggestions({ commit }, { projectId, modelId }) {
+    commit("SET_SUGGESTIONS_LOADING", true)
+    commit("SET_SUGGESTIONS_ERROR", null)
+
+    try {
+      const response = await TagApi.getRecommendationsIncident(projectId, modelId)
+
+      const errorMessage = response.data?.error_message || response.error_message
+      if (errorMessage) {
+        commit("SET_SUGGESTIONS_ERROR", errorMessage)
+        commit("SET_TAG_SUGGESTIONS", [])
+        return
+      }
+
+      const suggestions = response.data?.recommendations || response.recommendations || []
+      commit("SET_TAG_SUGGESTIONS", Array.isArray(suggestions) ? suggestions : [])
+      commit("SET_SUGGESTIONS_GENERATED", true)
+    } catch (error) {
+      console.error("Error generating AI suggestions:", error)
+      commit(
+        "SET_SUGGESTIONS_ERROR",
+        "Failed to generate AI tag suggestions. Please try again later."
+      )
+      commit("SET_TAG_SUGGESTIONS", [])
+    } finally {
+      commit("SET_SUGGESTIONS_LOADING", false)
+      commit("SET_SUGGESTIONS_GENERATED", true)
+    }
+  },
+
+  resetSuggestions({ commit }) {
+    commit("SET_SUGGESTIONS_GENERATED", false)
+    commit("SET_SUGGESTIONS_ERROR", null)
+  },
+
+  getTagType({ state }, tagTypeId) {
+    return state.tagTypes[tagTypeId] || {}
+  },
 }
 
 function areRequiredTagsSelected(sel, tagTypes) {
@@ -327,6 +443,64 @@ const mutations = {
   SET_VALIDATION_ERROR(state, error) {
     state.validationError = error
   },
+  SET_LOADING(state, value) {
+    state.loading = value
+  },
+  SET_MORE(state, value) {
+    state.more = value
+  },
+  SET_TOTAL(state, value) {
+    state.total = value
+  },
+  SET_GROUPS(state, groups) {
+    state.groups = groups
+  },
+  SET_TAG_TYPES(state, types) {
+    state.tagTypes = types
+  },
+  SET_SUGGESTIONS_LOADING(state, value) {
+    state.suggestionsLoading = value
+  },
+  SET_SUGGESTIONS_GENERATED(state, value) {
+    state.suggestionsGenerated = value
+  },
+  SET_SUGGESTIONS_ERROR(state, error) {
+    state.suggestionsError = error
+  },
+  SET_TAG_SUGGESTIONS(state, suggestions) {
+    state.tagSuggestions = suggestions
+  },
+}
+
+// Helper function for converting data
+function convertData(data) {
+  return data.reduce((r, a) => {
+    const tagType = a.tag_type
+    const hasAnyDiscoverability =
+      tagType.discoverable_incident ||
+      tagType.discoverable_case ||
+      tagType.discoverable_signal ||
+      tagType.discoverable_query ||
+      tagType.discoverable_source ||
+      tagType.discoverable_document
+
+    if (!hasAnyDiscoverability) return r
+
+    if (!r[a.tag_type.id]) {
+      r[a.tag_type.id] = {
+        id: a.tag_type.id,
+        icon: a.tag_type.icon,
+        label: a.tag_type.name,
+        desc: a.tag_type.description,
+        color: a.tag_type.color,
+        isRequired: a.tag_type.required,
+        isExclusive: a.tag_type.exclusive,
+        menuItems: [],
+      }
+    }
+    r[a.tag_type.id].menuItems.push(a)
+    return r
+  }, Object.create(null))
 }
 
 export default {

From b90577bc014d2a233af4b310e72f6141d10a6354 Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Sun, 15 Jun 2025 16:57:13 -0700
Subject: [PATCH 06/10] ensure suggestions are reset when another incident is
 chosen

---
 src/dispatch/static/dispatch/src/tag/TagPicker.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/dispatch/static/dispatch/src/tag/TagPicker.vue b/src/dispatch/static/dispatch/src/tag/TagPicker.vue
index 87e9911163a4..452c1618fe74 100644
--- a/src/dispatch/static/dispatch/src/tag/TagPicker.vue
+++ b/src/dispatch/static/dispatch/src/tag/TagPicker.vue
@@ -418,6 +418,17 @@ watch(
   }
 )
 
+// Reset suggestions when the incident/model changes
+watch(
+  () => props.modelId,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      store.dispatch("tag/resetSuggestions")
+      suggestionsExpanded.value = false
+    }
+  }
+)
+
 // Click outside directive
 const vClickOutside = {
   mounted(el, binding) {

From c40287f0290774b8c14a76cbcc8d7441328278dd Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Fri, 20 Jun 2025 09:51:53 -0700
Subject: [PATCH 07/10] removing logging

---
 .../dispatch/src/tag/TableFilterDialog.vue      | 17 -----------------
 src/dispatch/static/dispatch/src/tag/store.js   |  6 +-----
 2 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/tag/TableFilterDialog.vue b/src/dispatch/static/dispatch/src/tag/TableFilterDialog.vue
index aef670d2dbbb..9f9698abd3a3 100644
--- a/src/dispatch/static/dispatch/src/tag/TableFilterDialog.vue
+++ b/src/dispatch/static/dispatch/src/tag/TableFilterDialog.vue
@@ -85,27 +85,10 @@ export default {
 
   methods: {
     applyFilters() {
-      // Debug logging
-      console.log("Applying filters:")
-      console.log("local_tag_type:", this.local_tag_type)
-      console.log("local_discoverable:", this.local_discoverable)
-
-      // Check the structure of tag_type objects
-      if (this.local_tag_type && this.local_tag_type.length > 0) {
-        console.log("First tag_type object:", this.local_tag_type[0])
-        console.log("Has id?", this.local_tag_type[0].id)
-        console.log("Has name?", this.local_tag_type[0].name)
-      }
-
       // we set the filter values
       this.tag_type = this.local_tag_type
       this.discoverable = this.local_discoverable
 
-      // Debug: Check what's in the store after setting filters
-      console.log("After setting filters:")
-      console.log("Store tag_type:", this.tag_type)
-      console.log("Store discoverable:", this.discoverable)
-
       // we close the dialog
       this.display = false
     },
diff --git a/src/dispatch/static/dispatch/src/tag/store.js b/src/dispatch/static/dispatch/src/tag/store.js
index 0c1d8e3a2f88..f1c64f7118f4 100644
--- a/src/dispatch/static/dispatch/src/tag/store.js
+++ b/src/dispatch/static/dispatch/src/tag/store.js
@@ -259,7 +259,6 @@ const actions = {
   async fetchAllTagsWithEligibleTypes({ commit, dispatch }, { project }) {
     // 1. Fetch eligible tag type ids
     const eligibleTagTypeIds = await dispatch("fetchEligibleTagTypes")
-    console.log("Eligible tag type IDs:", eligibleTagTypeIds)
     // 2. Fetch tags for this project
     const tagFilterOptions = {
       filters: {
@@ -278,10 +277,7 @@ const actions = {
     const tagResp = await TagApi.getAll(params)
     // 3. Filter tags client-side as a safeguard
     const tags = tagResp.data.items.filter((tag) => eligibleTagTypeIds.includes(tag.tag_type.id))
-    console.log(
-      "Filtered tags:",
-      tags.map((t) => t.tag_type.name)
-    )
+
     commit("SET_TABLE_ROWS", { items: tags, total: tags.length })
     return tags
   },

From 157c1b0332d535b79205d49bd8a1cbd8a8e08150 Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Fri, 20 Jun 2025 10:06:51 -0700
Subject: [PATCH 08/10] only show in tag picker on details tab for case and
 incident

---
 .../static/dispatch/src/case/DetailsTab.vue   |  2 ++
 .../dispatch/src/incident/DetailsTab.vue      |  2 ++
 .../static/dispatch/src/tag/TagPicker.vue     | 23 ++++++++++++++++---
 src/dispatch/static/dispatch/src/tag/store.js | 13 +++++++----
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/case/DetailsTab.vue b/src/dispatch/static/dispatch/src/case/DetailsTab.vue
index e5d8e2ee9919..03cb5365fad8 100644
--- a/src/dispatch/static/dispatch/src/case/DetailsTab.vue
+++ b/src/dispatch/static/dispatch/src/case/DetailsTab.vue
@@ -145,6 +145,8 @@
           :model-id="id"
           :project="project"
           show-copy
+          :showGenAISuggestions="true"
+          modelType="case"
         />
       </v-col>
       <v-col cols="12">
diff --git a/src/dispatch/static/dispatch/src/incident/DetailsTab.vue b/src/dispatch/static/dispatch/src/incident/DetailsTab.vue
index 80a31172f54e..aa231810fd81 100644
--- a/src/dispatch/static/dispatch/src/incident/DetailsTab.vue
+++ b/src/dispatch/static/dispatch/src/incident/DetailsTab.vue
@@ -102,6 +102,8 @@
           :model-id="id"
           :visibility="visibility"
           show-copy
+          :showGenAISuggestions="true"
+          modelType="incident"
         />
       </v-col>
       <v-col cols="12">
diff --git a/src/dispatch/static/dispatch/src/tag/TagPicker.vue b/src/dispatch/static/dispatch/src/tag/TagPicker.vue
index 452c1618fe74..cb0a9cd3e0c0 100644
--- a/src/dispatch/static/dispatch/src/tag/TagPicker.vue
+++ b/src/dispatch/static/dispatch/src/tag/TagPicker.vue
@@ -47,7 +47,12 @@
       </span>
       <v-card v-if="menu" class="tag-picker-dropdown-block">
         <!-- Initial state: Show generate button -->
-        <div v-if="!suggestionsGenerated && props.visibility !== 'Restricted'" class="mb-4">
+        <div
+          v-if="
+            !suggestionsGenerated && props.visibility !== 'Restricted' && props.showGenAISuggestions
+          "
+          class="mb-4"
+        >
           <div class="gradient-border-wrapper">
             <div class="white-bg-wrapper">
               <v-btn
@@ -70,7 +75,10 @@
         </div>
 
         <!-- Error banner: Show when there's an error -->
-        <div v-if="suggestionsGenerated && suggestionsError" class="error-banner mb-3">
+        <div
+          v-if="suggestionsGenerated && suggestionsError && props.showGenAISuggestions"
+          class="error-banner mb-3"
+        >
           <div class="error-content">
             <v-icon size="18" color="#f57f17" class="mr-2">mdi-alert</v-icon>
             <span class="error-message">{{ suggestionsError }}</span>
@@ -89,7 +97,7 @@
 
         <!-- Suggestions panel: Show when generated (expanded or collapsed) -->
         <div
-          v-if="suggestionsGenerated && tagSuggestions.length > 0"
+          v-if="suggestionsGenerated && tagSuggestions.length > 0 && props.showGenAISuggestions"
           :class="[
             'mitre-suggestions-panel',
             suggestionsExpanded ? 'mb-4' : 'mb-3',
@@ -291,6 +299,14 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  showGenAISuggestions: {
+    type: Boolean,
+    default: false,
+  },
+  modelType: {
+    type: String,
+    default: "incident", // "incident" or "case"
+  },
 })
 
 // Computed properties from store
@@ -334,6 +350,7 @@ const generateSuggestions = async () => {
   await store.dispatch("tag/generateSuggestions", {
     projectId: props.project.id,
     modelId: props.modelId,
+    modelType: props.modelType,
   })
 }
 
diff --git a/src/dispatch/static/dispatch/src/tag/store.js b/src/dispatch/static/dispatch/src/tag/store.js
index f1c64f7118f4..fc26d1827dc3 100644
--- a/src/dispatch/static/dispatch/src/tag/store.js
+++ b/src/dispatch/static/dispatch/src/tag/store.js
@@ -202,10 +202,10 @@ const actions = {
       commit("ADD_SELECTED_TAG", tagObj)
     }
   },
-  removeTag({ commit, state }, tagId) {
+  removeTag({ commit }, tagId) {
     commit("REMOVE_SELECTED_TAG", tagId)
   },
-  validateTags({ commit, state }, { value, groups, currentProject }) {
+  validateTags({ commit }, { value, groups, currentProject }) {
     // project_id logic
     const project_id = currentProject?.id || 0
     let all_tags_in_project = false
@@ -350,12 +350,17 @@ const actions = {
     }
   },
 
-  async generateSuggestions({ commit }, { projectId, modelId }) {
+  async generateSuggestions({ commit }, { projectId, modelId, modelType = "incident" }) {
     commit("SET_SUGGESTIONS_LOADING", true)
     commit("SET_SUGGESTIONS_ERROR", null)
 
     try {
-      const response = await TagApi.getRecommendationsIncident(projectId, modelId)
+      let response
+      if (modelType === "case") {
+        response = await TagApi.getRecommendationsCase(projectId, modelId)
+      } else {
+        response = await TagApi.getRecommendationsIncident(projectId, modelId)
+      }
 
       const errorMessage = response.data?.error_message || response.error_message
       if (errorMessage) {

From 3f196d97362b19d41294aff6530a5f7895d68002 Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Fri, 20 Jun 2025 10:45:44 -0700
Subject: [PATCH 09/10] fixing validation issues

---
 .../static/dispatch/src/tag/TagPicker.vue     | 130 ++++++++++++++----
 src/dispatch/static/dispatch/src/tag/store.js |   6 +-
 2 files changed, 103 insertions(+), 33 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/tag/TagPicker.vue b/src/dispatch/static/dispatch/src/tag/TagPicker.vue
index cb0a9cd3e0c0..7e035f4a21fe 100644
--- a/src/dispatch/static/dispatch/src/tag/TagPicker.vue
+++ b/src/dispatch/static/dispatch/src/tag/TagPicker.vue
@@ -1,28 +1,33 @@
 <template>
   <div>
-    <div v-click-outside="closeMenu">
-      <span class="tag-picker-row">
-        <div class="tag-picker-outline">
-          <v-icon
-            class="panel-button tag-add-icon"
-            @click.stop="toggleMenu"
-            style="cursor: pointer"
-            >{{ menu ? "mdi-minus" : "mdi-plus" }}</v-icon
-          >
-          <div class="tag-picker-label">Tags</div>
+    <span v-click-outside="closeMenu">
+      <v-text-field
+        readonly
+        label="Tags"
+        @click="toggleMenu"
+        variant="outlined"
+        v-model="dummyText"
+        class="main-panel"
+        :rules="[check_for_error]"
+      >
+        <template #prepend-inner>
+          <v-icon class="panel-button">
+            {{ menu ? "mdi-minus" : "mdi-plus" }}
+          </v-icon>
+        </template>
+        <template #append v-if="showCopy">
+          <v-icon class="panel-button" @click.stop="copyTags">mdi-content-copy</v-icon>
+        </template>
+        <div class="form-container mt-2">
           <div class="chip-group" v-show="selectedItems.length">
             <span v-for="(item, index) in selectedItems" :key="item">
               <v-chip
                 label
                 :key="index"
+                :color="item.tag_type?.color"
                 closable
                 class="tag-chip"
-                size="small"
                 @click:close="removeItem(item.id)"
-                :style="{
-                  backgroundColor: (item.tag_type?.color || '#e0e0e0') + '22',
-                  color: item.tag_type?.color || '#333',
-                }"
               >
                 <span class="mr-2">
                   <v-icon
@@ -37,14 +42,7 @@
             </span>
           </div>
         </div>
-        <v-icon
-          v-if="showCopy"
-          class="panel-button tag-copy-icon"
-          @click.stop="copyTags"
-          style="cursor: pointer"
-          >mdi-content-copy</v-icon
-        >
-      </span>
+      </v-text-field>
       <v-card v-if="menu" class="tag-picker-dropdown-block">
         <!-- Initial state: Show generate button -->
         <div
@@ -252,7 +250,7 @@
           </ul>
         </div>
       </v-card>
-    </div>
+    </span>
     <v-snackbar v-model="snackbar" :timeout="2400" color="success">
       <v-row class="fill-height" align="center">
         <v-col class="text-center">Tags copied to the clipboard</v-col>
@@ -268,11 +266,13 @@ import { useStore } from "vuex"
 
 const store = useStore()
 const menu = ref(false)
+const dummyText = ref(" ")
 const searchQuery = ref("")
 const filteredMenuItems = ref([])
 const isDropdownOpen = ref(false)
 const snackbar = ref(false)
 const suggestionsExpanded = ref(false)
+const error = ref(null)
 
 const props = defineProps({
   modelValue: {
@@ -322,19 +322,74 @@ const selectedItems = computed({
   set: (value) => {
     const tags = value.filter((v) => typeof v !== "string")
     emit("update:modelValue", tags)
-    store.dispatch("tag/validateTags", {
-      value: tags,
-      groups: groups.value,
-      currentProject: props.project,
-    })
+    validateTags(tags)
   },
 })
 
 const emit = defineEmits(["update:modelValue"])
 
+// Validation function
+const check_for_error = () => {
+  return error.value
+}
+
+function are_required_tags_selected(sel) {
+  // iterate through all tag types and ensure that at least one tag of each required tag type is selected
+  const tagTypes = Object.values(groups.value)
+  for (let i = 0; i < tagTypes.length; i++) {
+    if (tagTypes[i].isRequired) {
+      if (!sel.some((item) => item.tag_type?.id === tagTypes[i]?.id)) {
+        return false
+      }
+    }
+  }
+  return true
+}
+
+function validateTags(value) {
+  // Don't validate if groups haven't been loaded yet
+  if (!groups.value || Object.keys(groups.value).length === 0) {
+    return
+  }
+
+  const project_id = props.project?.id || 0
+  var all_tags_in_project = false
+  if (project_id) {
+    all_tags_in_project = value.every((tag) => tag.project?.id == project_id)
+  } else {
+    const project_name = props.project?.name
+    if (!project_name) {
+      error.value = true
+      dummyText.value += " "
+      return
+    }
+    all_tags_in_project = value.every((tag) => tag.project?.name == project_name)
+  }
+
+  if (all_tags_in_project) {
+    const requiredSelected = are_required_tags_selected(value)
+
+    if (!requiredSelected) {
+      const required_tag_types = Object.values(groups.value)
+        .filter((tag_type) => tag_type.isRequired)
+        .map((tag_type) => tag_type.label)
+      error.value = `Please select at least one tag from each required category (${required_tag_types.join(
+        ", "
+      )})`
+    } else {
+      error.value = null
+    }
+  } else {
+    error.value = "Only tags in selected project are allowed"
+  }
+  dummyText.value += " "
+}
+
 // Methods
 const fetchData = async () => {
-  if (!props.project) return
+  if (!props.project) {
+    return
+  }
   await store.dispatch("tag/fetchTags", {
     project: props.project,
     model: props.model,
@@ -388,6 +443,7 @@ const showDropdown = (state) => {
 const removeItem = (index) => {
   const value = selectedItems.value.filter((item) => item.id !== index)
   selectedItems.value = value
+  validateTags(value)
 }
 
 const performSearch = () => {
@@ -414,6 +470,7 @@ const isItemDisabled = (group, item) => {
 onMounted(() => {
   fetchData()
   fetchTagTypes()
+  // Don't validate initially - wait for groups to be loaded
 })
 
 watch(
@@ -421,10 +478,23 @@ watch(
   (newVal) => {
     if (newVal) {
       fetchData()
+      // Validate after project changes
+      validateTags(selectedItems.value)
     }
   }
 )
 
+// Watch for groups to be loaded and validate
+watch(
+  () => groups.value,
+  (newGroups) => {
+    if (newGroups && Object.keys(newGroups).length > 0) {
+      validateTags(selectedItems.value)
+    }
+  },
+  { immediate: true }
+)
+
 // When suggestions are generated, expand the suggestions box by default
 watch(
   () => suggestionsGenerated.value,
diff --git a/src/dispatch/static/dispatch/src/tag/store.js b/src/dispatch/static/dispatch/src/tag/store.js
index fc26d1827dc3..f039b1c732c4 100644
--- a/src/dispatch/static/dispatch/src/tag/store.js
+++ b/src/dispatch/static/dispatch/src/tag/store.js
@@ -220,9 +220,7 @@ const actions = {
       all_tags_in_project = value.every((tag) => tag.project?.name == project_name)
     }
     if (all_tags_in_project) {
-      if (areRequiredTagsSelected(value, groups)) {
-        commit("SET_VALIDATION_ERROR", true)
-      } else {
+      if (!areRequiredTagsSelected(value, groups)) {
         const required_tag_types = groups
           .filter((tag_type) => tag_type.isRequired)
           .map((tag_type) => tag_type.label)
@@ -232,6 +230,8 @@ const actions = {
             ", "
           )})`
         )
+      } else {
+        commit("SET_VALIDATION_ERROR", null)
       }
     } else {
       commit("SET_VALIDATION_ERROR", "Only tags in selected project are allowed")

From 01c1b9fd362162070b3f4161b878e0143af892ea Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Mon, 23 Jun 2025 11:43:46 -0700
Subject: [PATCH 10/10] removed special pagination if query is all

---
 src/dispatch/database/service.py | 48 +++++++++++++-------------------
 1 file changed, 19 insertions(+), 29 deletions(-)

diff --git a/src/dispatch/database/service.py b/src/dispatch/database/service.py
index 514c7780c2aa..fdbb13090895 100644
--- a/src/dispatch/database/service.py
+++ b/src/dispatch/database/service.py
@@ -767,7 +767,7 @@ def search_filter_sort_paginate(
         # Models with many secondary relationships (like Tag) can cause count inflation
         models_needing_distinct = ["Tag"]  # Add other models here as needed
 
-        if model in models_needing_distinct:
+        if model in models_needing_distinct and items_per_page is not None:
             # Use custom pagination that handles DISTINCT properly
             from collections import namedtuple
 
@@ -775,35 +775,25 @@ def search_filter_sort_paginate(
                 "Pagination", ["page_number", "page_size", "num_pages", "total_results"]
             )
 
-            if items_per_page == -1 or items_per_page is None:
-                # No pagination requested - apply DISTINCT to get unique results
-                query = query.distinct()
-                items = query.all()
-                total_count = len(items)
-                pagination = Pagination(page, items_per_page, 1, total_count)
-                query = query.limit(0)  # Empty query since we already have items
-            else:
-                # Get total count using distinct ID to avoid duplicates
-                # Remove ORDER BY clause for counting since it's not needed and causes issues with DISTINCT
-                count_query = query.with_entities(model_cls.id).distinct().order_by(None)
-                total_count = count_query.count()
-
-                # Apply DISTINCT to the main query as well to avoid duplicate results
-                # Remove ORDER BY clause since it can conflict with DISTINCT when ordering by joined table columns
-                query = query.distinct().order_by(None)
-
-                # Apply pagination to the distinct query
-                offset = (page - 1) * items_per_page if page > 1 else 0
-                query = query.offset(offset).limit(items_per_page)
-
-                # Calculate number of pages
-                num_pages = (
-                    (total_count + items_per_page - 1) // items_per_page
-                    if items_per_page > 0
-                    else 1
-                )
+            # Get total count using distinct ID to avoid duplicates
+            # Remove ORDER BY clause for counting since it's not needed and causes issues with DISTINCT
+            count_query = query.with_entities(model_cls.id).distinct().order_by(None)
+            total_count = count_query.count()
+
+            # Apply DISTINCT to the main query as well to avoid duplicate results
+            # Remove ORDER BY clause since it can conflict with DISTINCT when ordering by joined table columns
+            query = query.distinct().order_by(None)
+
+            # Apply pagination to the distinct query
+            offset = (page - 1) * items_per_page if page > 1 else 0
+            query = query.offset(offset).limit(items_per_page)
+
+            # Calculate number of pages
+            num_pages = (
+                (total_count + items_per_page - 1) // items_per_page if items_per_page > 0 else 1
+            )
 
-                pagination = Pagination(page, items_per_page, num_pages, total_count)
+            pagination = Pagination(page, items_per_page, num_pages, total_count)
         else:
             # Use standard pagination for other models
             query, pagination = apply_pagination(query, page_number=page, page_size=items_per_page)