fix(aria): correct V3 column names and switch filters to select dropdowns

V3 migration had wrong column names for threat_ioc (source, confidence)
and precursor_sequence_alert (auto_response_taken). Fixed column names
and added phases_detected TEXT[] conversion. PrecursorAlerts and
DevicePosture filter sidebar now uses <select> dropdowns per template
pattern (filter-sidebar structure kept; pill buttons removed).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/DevicePosture.svelte

@@ -42,18 +42,6 @@
     }
   }
 
-  function setScoreFilter(val: '' | 'low' | 'medium') {
-    filterScore = filterScore === val ? '' : val;
-    currentPage = 0;
-    load(0);
-  }
-
-  function setEolFilter(val: OsEolStatus | '') {
-    filterEol = filterEol === val ? '' : val;
-    currentPage = 0;
-    load(0);
-  }
-
   function clearAllFilters() {
     filterScore = '';
     filterEol = '';
@@ -141,24 +129,23 @@
 
           <div class="filter-section">
             <label class="filter-section-label">Score</label>
-            <div class="status-pills">
-              <button class="status-pill" class:active={filterScore === 'low'}
-                on:click={() => setScoreFilter('low')}>Low (&lt;50)</button>
-              <button class="status-pill" class:active={filterScore === 'medium'}
-                on:click={() => setScoreFilter('medium')}>Below Good (&lt;80)</button>
-            </div>
+            <select class="filter-select" bind:value={filterScore}
+              on:change={() => { currentPage = 0; load(0); }}>
+              <option value="">All Scores</option>
+              <option value="low">Low (&lt;50)</option>
+              <option value="medium">Below Good (&lt;80)</option>
+            </select>
           </div>
 
           <div class="filter-section">
             <label class="filter-section-label">OS Status</label>
-            <div class="status-pills">
-              <button class="status-pill" class:active={filterEol === 'EOL'}
-                on:click={() => setEolFilter('EOL')}>EOL</button>
-              <button class="status-pill" class:active={filterEol === 'SUPPORTED'}
-                on:click={() => setEolFilter('SUPPORTED')}>Supported</button>
-              <button class="status-pill" class:active={filterEol === 'UNKNOWN'}
-                on:click={() => setEolFilter('UNKNOWN')}>Unknown</button>
-            </div>
+            <select class="filter-select" bind:value={filterEol}
+              on:change={() => { currentPage = 0; load(0); }}>
+              <option value="">All</option>
+              <option value="EOL">EOL</option>
+              <option value="SUPPORTED">Supported</option>
+              <option value="UNKNOWN">Unknown</option>
+            </select>
           </div>
         </div>
       {/if}
@@ -441,10 +428,8 @@
   .filter-section { display: flex; flex-direction: column; gap: 0.3rem; }
   .filter-section-label { font-size: var(--font-size-tiny); font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; }
 
-  .status-pills { display: flex; flex-direction: column; gap: 4px; }
-  .status-pill { padding: 5px 10px; border-radius: 6px; border: 1px solid #d1d5db; background: white; font-size: var(--font-size-caption); font-weight: 500; cursor: pointer; color: #374151; text-align: left; transition: all 0.15s; }
-  .status-pill:hover  { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
-  .status-pill.active { background: #2563eb; color: white; border-color: #2563eb; }
+  .filter-select { padding: 0.4rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: var(--font-size-body-sm); width: 100%; background: white; color: #374151; }
+  .filter-select:focus { outline: none; border-color: #3b82f6; }
 
   .sidebar-clear-all-btn { border: none; background: #fee2e2; color: #dc2626; border-radius: 4px; padding: 0.3rem 0.6rem; cursor: pointer; font-size: var(--font-size-tiny); font-weight: 600; text-align: left; }
   .sidebar-clear-all-btn:hover { background: #fecaca; }
@@ -595,9 +580,7 @@
   :global(.dark-mode) .filter-sidebar-title      { color: #9ca3af; }
   :global(.dark-mode) .sidebar-toggle-btn        { border-color: #4b5563; color: #9ca3af; }
   :global(.dark-mode) .sidebar-toggle-btn:hover  { background: #374151; }
-  :global(.dark-mode) .status-pill               { background: #1e293b; border-color: #334155; color: #94a3b8; }
-  :global(.dark-mode) .status-pill:hover         { background: #1e2d4a; border-color: #2563eb; color: #93c5fd; }
-  :global(.dark-mode) .status-pill.active        { background: #2563eb; color: white; }
+  :global(.dark-mode) .filter-select              { background: #283040; border-color: #4b5563; color: #e2e8f0; }
   :global(.dark-mode) .sidebar-stat-pill         { background: #1e2d4a; border-color: #3730a3; color: #93c5fd; }
   :global(.dark-mode) .sidebar-clear-all-btn     { background: #3b1a1a; color: #f87171; }
 

frontend/src/components/PrecursorAlerts.svelte

@@ -80,18 +80,6 @@
     }
   }
 
-  function setStatusFilter(val: 'active' | 'resolved' | 'all') {
-    filterStatus = filterStatus === val ? 'all' : val;
-    currentPage = 0;
-    load(0);
-  }
-
-  function setTypeFilter(val: SequenceType | '') {
-    filterType = filterType === val ? '' : val;
-    currentPage = 0;
-    load(0);
-  }
-
   function onDeviceInput() {
     clearTimeout(deviceSearchTimer);
     deviceSearchTimer = setTimeout(() => {
@@ -175,24 +163,23 @@
 
           <div class="filter-section">
             <label class="filter-section-label">Status</label>
-            <div class="status-pills">
-              <button class="status-pill" class:active={filterStatus === 'active'}
-                on:click={() => setStatusFilter('active')}>Active</button>
-              <button class="status-pill" class:active={filterStatus === 'resolved'}
-                on:click={() => setStatusFilter('resolved')}>Resolved</button>
-            </div>
+            <select class="filter-select" bind:value={filterStatus}
+              on:change={() => { currentPage = 0; load(0); }}>
+              <option value="all">All</option>
+              <option value="active">Active</option>
+              <option value="resolved">Resolved</option>
+            </select>
           </div>
 
           <div class="filter-section">
             <label class="filter-section-label">Type</label>
-            <div class="status-pills">
-              <button class="status-pill" class:active={filterType === 'JACKPOTTING'}
-                on:click={() => setTypeFilter('JACKPOTTING')}>Jackpotting</button>
-              <button class="status-pill" class:active={filterType === 'SKIMMING'}
-                on:click={() => setTypeFilter('SKIMMING')}>Skimming</button>
-              <button class="status-pill" class:active={filterType === 'UNKNOWN'}
-                on:click={() => setTypeFilter('UNKNOWN')}>Unknown</button>
-            </div>
+            <select class="filter-select" bind:value={filterType}
+              on:change={() => { currentPage = 0; load(0); }}>
+              <option value="">All Types</option>
+              <option value="JACKPOTTING">Jackpotting</option>
+              <option value="SKIMMING">Skimming</option>
+              <option value="UNKNOWN">Unknown</option>
+            </select>
           </div>
         </div>
       {/if}
@@ -467,10 +454,8 @@
   .search-input { padding: 0.4rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: var(--font-size-body-sm); width: 100%; background: white; }
   .search-input:focus { outline: none; border-color: #3b82f6; }
 
-  .status-pills { display: flex; flex-direction: column; gap: 4px; }
-  .status-pill { padding: 5px 10px; border-radius: 6px; border: 1px solid #d1d5db; background: white; font-size: var(--font-size-caption); font-weight: 500; cursor: pointer; color: #374151; text-align: left; transition: all 0.15s; }
-  .status-pill:hover  { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
-  .status-pill.active { background: #2563eb; color: white; border-color: #2563eb; }
+  .filter-select { padding: 0.4rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: var(--font-size-body-sm); width: 100%; background: white; color: #374151; }
+  .filter-select:focus { outline: none; border-color: #3b82f6; }
 
   .sidebar-clear-all-btn { border: none; background: #fee2e2; color: #dc2626; border-radius: 4px; padding: 0.3rem 0.6rem; cursor: pointer; font-size: var(--font-size-tiny); font-weight: 600; text-align: left; }
   .sidebar-clear-all-btn:hover { background: #fecaca; }
@@ -636,9 +621,7 @@
   :global(.dark-mode) .sidebar-toggle-btn        { border-color: #4b5563; color: #9ca3af; }
   :global(.dark-mode) .sidebar-toggle-btn:hover  { background: #374151; }
   :global(.dark-mode) .search-input              { background: #283040; border-color: #4b5563; color: #e2e8f0; }
-  :global(.dark-mode) .status-pill               { background: #1e293b; border-color: #334155; color: #94a3b8; }
-  :global(.dark-mode) .status-pill:hover         { background: #1e2d4a; border-color: #2563eb; color: #93c5fd; }
-  :global(.dark-mode) .status-pill.active        { background: #2563eb; color: white; }
+  :global(.dark-mode) .filter-select              { background: #283040; border-color: #4b5563; color: #e2e8f0; }
   :global(.dark-mode) .sidebar-stat-pill         { background: #1e2d4a; border-color: #3730a3; color: #93c5fd; }
   :global(.dark-mode) .sidebar-clear-all-btn     { background: #3b1a1a; color: #f87171; }