From bb2c00f2fab157bbe64d72973c998f40350aa60d Mon Sep 17 00:00:00 2001
From: Mick <119439091+mickbrowns1@users.noreply.github.com>
Date: Fri, 22 May 2026 11:31:23 -0400
Subject: [PATCH] =?UTF-8?q?Collapse=20MITRE=20tactic=20cards=20by=20defaul?=
 =?UTF-8?q?t=20=E2=80=94=20click=20to=20expand?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each card shows tactic name, technique count, and rule badge in the header.
Clicking the header toggles the technique chips with an animated chevron.
The existing '+N more' expander still works within the expanded card.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/index.html | 38 ++++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index fd4f855..15f65f1 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1949,6 +1949,9 @@ async function loadMitre() {
       const borderColor = t.rule_count >= 20 ? 'border-l-purple-500' : t.rule_count >= 5 ? 'border-l-blue-500' : 'border-l-slate-600'
       const badgeColor  = t.rule_count >= 20 ? 'bg-purple-900/60 text-purple-300 border-purple-700' : t.rule_count >= 5 ? 'bg-blue-900/60 text-blue-300 border-blue-700' : 'bg-slate-800/60 text-slate-400 border-slate-700'
 
+      const bodyId  = 'mitre-body-'   + t.tactic.replace(/[^a-z0-9]/gi, '_')
+      const chevId  = 'mitre-chev-'   + t.tactic.replace(/[^a-z0-9]/gi, '_')
+
       const MAX_SHOWN = 12
       const chips = t.techniques.slice(0, MAX_SHOWN).map(tech =>
         `<span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs bg-slate-800/80 ring-1 ring-white/5 text-slate-400 font-mono" title="${esc(tech.name)}">${esc(tech.id || tech.name)}</span>`
@@ -1963,14 +1966,25 @@ async function loadMitre() {
         <button onclick="mitreToggleMore('${expandId}', this)"
           class="mt-1.5 text-xs text-purple-500 hover:text-purple-400 transition-colors">+${t.techniques.length - MAX_SHOWN} more</button>` : ''
 
-      return `<div class="bg-gradient-to-b from-gray-900 to-gray-950 ring-1 ring-white/5 rounded-xl p-4 border-l-4 ${borderColor} shadow-sm">
-        <div class="flex items-center justify-between mb-3">
-          <span class="font-semibold text-white text-sm">${esc(t.tactic)}</span>
-          <span class="px-2 py-0.5 rounded-full text-xs font-medium border ${badgeColor}">${t.rule_count} rule${t.rule_count !== 1 ? 's' : ''}</span>
-        </div>
-        ${t.techniques.length > 0 ? `
-          <div class="flex flex-wrap gap-1">${chips}</div>
-          ${moreSection}` : `<p class="text-xs text-slate-600">No technique IDs mapped</p>`}
+      const techCount = t.techniques.length
+      const bodyContent = techCount > 0
+        ? `<div class="flex flex-wrap gap-1">${chips}</div>${moreSection}`
+        : `<p class="text-xs text-slate-600">No technique IDs mapped</p>`
+
+      return `<div class="bg-gradient-to-b from-gray-900 to-gray-950 ring-1 ring-white/5 rounded-xl border-l-4 ${borderColor} shadow-sm overflow-hidden">
+        <button onclick="mitreToggleTactic('${bodyId}','${chevId}')" class="w-full flex items-center justify-between px-4 py-3 hover:bg-white/[0.03] transition-colors text-left">
+          <div class="flex items-center gap-2.5">
+            <span class="font-semibold text-white text-sm">${esc(t.tactic)}</span>
+            ${techCount > 0 ? `<span class="text-xs text-slate-500">${techCount} technique${techCount !== 1 ? 's' : ''}</span>` : ''}
+          </div>
+          <div class="flex items-center gap-2 shrink-0">
+            <span class="px-2 py-0.5 rounded-full text-xs font-medium border ${badgeColor}">${t.rule_count} rule${t.rule_count !== 1 ? 's' : ''}</span>
+            <svg id="${chevId}" class="w-3.5 h-3.5 text-slate-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+            </svg>
+          </div>
+        </button>
+        <div id="${bodyId}" class="hidden px-4 pb-3 pt-1 border-t border-white/5">${bodyContent}</div>
       </div>`
     }).join('')
   } catch(e) {
@@ -1978,6 +1992,14 @@ async function loadMitre() {
   }
 }
 
+function mitreToggleTactic(bodyId, chevId) {
+  const body = document.getElementById(bodyId)
+  const chev  = document.getElementById(chevId)
+  if (!body) return
+  const hidden = body.classList.toggle('hidden')
+  if (chev) chev.style.transform = hidden ? '' : 'rotate(180deg)'
+}
+
 function mitreToggleMore(id, btn) {
   const el = document.getElementById(id)
   if (!el) return