feat(aria): IOC reported_at, threat stats 24h window, filter sidebar, posture UX

- Add reported_at field to threat_ioc (V7 migration) — tracks when the source
  originally published the IOC, distinct from addedAt (ingestion time); wired
  into OTX (created field), MalwareBazaar and ThreatFox (first_seen field),
  and the manual IOC creation endpoint
- Fix threat event stats to use a 24h time window for critical/high counts
  (countBySeverityAndDetectedAtAfter) instead of all-time totals
- Rebuild IOC Management with canonical filter sidebar: collapsible left sidebar
  with per-type toggle pills, active filter chips with individual removal
- DevicePosture: collapse institutions and filter sidebar by default

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

frontend/src/components/DevicePosture.svelte

@@ -8,7 +8,7 @@
   let loading = true;
 
   // Filter sidebar
-  let filterSidebarCollapsed = false;
+  let filterSidebarCollapsed = true;
   let filterScore: '' | 'low' | 'medium' = '';
   let filterEol: OsEolStatus | '' = '';
 
@@ -18,9 +18,8 @@
   let panelOpen = false;
   let panelDevice: DeviceSecurityPosture | null = null;
 
-  // Accordion — all expanded by default
+  // Accordion — collapsed by default
   let expandedInstitutions = new Set<string>();
-  let allLoaded = false;
 
   interface InstGroup {
     key: string;
@@ -69,11 +68,6 @@
       const res = await ariaApi.getPostures(params);
       postures = res.data.content;
       totalElements = res.data.page.totalElements;
-
-      if (!allLoaded) {
-        expandedInstitutions = new Set(postures.map(d => d.institutionKey ?? 'Unknown'));
-        allLoaded = true;
-      }
     } catch {
       addToast('error', 'Load Failed', 'Could not load device posture data');
     } finally {

frontend/src/components/IocManagement.svelte

@@ -6,7 +6,28 @@
   let iocs: ThreatIoc[] = [];
   let loading = false;
   let showInactive = false;
-  let typeFilter: IocType | '' = '';
+
+  // Filter sidebar
+  let filterSidebarCollapsed = true;
+
+  // Multi-type filter — client-side
+  let selectedTypes = new Set<IocType>();
+
+  $: hasActiveFilters = selectedTypes.size > 0;
+
+  $: filteredIocs = selectedTypes.size > 0
+    ? iocs.filter(i => selectedTypes.has(i.iocType))
+    : iocs;
+
+  function toggleTypeFilter(t: IocType) {
+    if (selectedTypes.has(t)) selectedTypes.delete(t);
+    else selectedTypes.add(t);
+    selectedTypes = selectedTypes;
+  }
+
+  function clearAllFilters() {
+    selectedTypes = new Set();
+  }
 
   let showPanel = false;
   let editingIoc: ThreatIoc | null = null;
@@ -45,7 +66,6 @@
     loading = true;
     try {
       const res = await ariaApi.getIocs({
-        type: typeFilter || undefined,
         activeOnly: !showInactive,
       });
       iocs = res.data;
@@ -125,7 +145,8 @@
   onMount(load);
 </script>
 
-<div class="page-wrap">
+<div class="page-wrapper">
+
   <div class="header">
     <div class="header-text">
       <h1>IOC Management</h1>
@@ -133,84 +154,141 @@
     </div>
   </div>
 
-  <div class="form-card">
-    <div class="toolbar">
-      <div class="toolbar-left">
-        <span class="count">{iocs.length} IOC{iocs.length !== 1 ? 's' : ''}</span>
+  <div class="page-body">
 
-        <div class="type-filter">
-          <select bind:value={typeFilter} on:change={() => { load(); }}>
-            <option value="">All Types</option>
-            {#each IOC_TYPES as t}
-              <option value={t}>{t.replace(/_/g, ' ')}</option>
-            {/each}
-          </select>
+    <!-- LEFT: Filter sidebar -->
+    <div class="filter-sidebar" class:sidebar-collapsed={filterSidebarCollapsed}>
+      <div class="filter-sidebar-toggle-bar" class:bar-filters-active={hasActiveFilters}>
+        {#if !filterSidebarCollapsed}
+          <span class="filter-sidebar-title">Filters</span>
+          <div class="toggle-bar-right">
+            <span class="sidebar-stat-pill">{filteredIocs.length}</span>
+            <button class="sidebar-toggle-btn"
+              on:click={() => filterSidebarCollapsed = true}
+              title="Collapse filters">◀</button>
+          </div>
+        {:else}
+          <button class="sidebar-toggle-btn"
+            on:click={() => filterSidebarCollapsed = false}
+            title="Expand filters">▶</button>
+        {/if}
+      </div>
+
+      {#if !filterSidebarCollapsed}
+        <div class="filter-sidebar-content">
+          {#if hasActiveFilters}
+            <button class="sidebar-clear-all-btn" on:click={clearAllFilters}>✕ Clear all</button>
+          {/if}
+
+          <div class="filter-section">
+            <label class="filter-section-label">IOC Type</label>
+            <div class="type-pills">
+              {#each IOC_TYPES as t}
+                <button class="type-pill" class:active={selectedTypes.has(t)}
+                  on:click={() => toggleTypeFilter(t)}>
+                  {t.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, c => c.toUpperCase())}
+                </button>
+              {/each}
+            </div>
+          </div>
+
+          <div class="filter-section">
+            <label class="filter-section-label">Visibility</label>
+            <label class="inactive-toggle">
+              <input type="checkbox" bind:checked={showInactive} on:change={load} />
+              Show inactive
+            </label>
+          </div>
         </div>
-
-        <label class="inactive-toggle">
-          <input type="checkbox" bind:checked={showInactive} on:change={load} />
-          Show inactive
-        </label>
-      </div>
-      <div class="toolbar-right">
-        <button class="btn btn-primary btn-sm" on:click={openAdd}>+ Add IOC</button>
-      </div>
+      {/if}
     </div>
 
-    <div class="table-wrapper">
-      {#if loading}
-        <div class="table-msg">Loading…</div>
-      {:else if iocs.length === 0}
-        <div class="table-msg">No IOCs found.</div>
-      {:else}
-        <table>
-          <thead>
-            <tr>
-              <th>Type</th>
-              <th>Value</th>
-              <th>Description</th>
-              <th>Source</th>
-              <th>Confidence</th>
-              <th>Added</th>
-              <th>Expires</th>
-              <th>Status</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            {#each iocs as ioc (ioc.id)}
-              <tr class:inactive-row={!ioc.active}>
-                <td>
-                  <span class="type-badge">{ioc.iocType.replace(/_/g,' ')}</span>
-                </td>
-                <td>
-                  <code class="ioc-value" title={ioc.value}>{ioc.value}</code>
-                </td>
-                <td class="desc-cell" title={ioc.description ?? ''}>{ioc.description ?? '—'}</td>
-                <td class="src-cell">{SRC_LABEL[ioc.source] ?? ioc.source}</td>
-                <td>
-                  <span class="conf-badge" style="color:{CONF_COLOR[ioc.confidence]}">{ioc.confidence}</span>
-                </td>
-                <td class="date-cell">{fmtDate(ioc.addedAt)}</td>
-                <td class="date-cell">{fmtDate(ioc.expiresAt)}</td>
-                <td>
-                  {#if ioc.active}
-                    <span class="badge badge-active">Active</span>
-                  {:else}
-                    <span class="badge badge-inactive">Inactive</span>
-                  {/if}
-                </td>
-                <td class="actions">
-                  <button class="btn-sm btn-edit" on:click={() => openEdit(ioc)}>Edit</button>
-                  {#if ioc.active}
-                    <button class="btn-sm btn-delete" on:click={() => deactivate(ioc)}>Deactivate</button>
-                  {/if}
-                </td>
-              </tr>
-            {/each}
-          </tbody>
-        </table>
+    <!-- RIGHT: chips + content -->
+    <div class="page-right">
+
+      {#if hasActiveFilters}
+        <div class="active-filters">
+          <span class="active-filters-label">Filters:</span>
+          {#each [...selectedTypes] as t}
+            <span class="filter-tag">
+              <span class="filter-tag-dot"></span>
+              {t.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, c => c.toUpperCase())}
+              <button class="filter-tag-remove" on:click={() => toggleTypeFilter(t)}>&times;</button>
+            </span>
+          {/each}
+        </div>
       {/if}
+
+      <div class="content-frame">
+        <div class="page-main">
+
+          <div class="toolbar">
+            <span class="count">{filteredIocs.length} IOC{filteredIocs.length !== 1 ? 's' : ''}</span>
+            <div class="toolbar-right">
+              <button class="btn btn-primary btn-sm" on:click={openAdd}>+ Add IOC</button>
+            </div>
+          </div>
+
+          <div class="table-card">
+            <div class="table-container">
+              {#if loading}
+                <div class="table-msg">Loading…</div>
+              {:else if filteredIocs.length === 0}
+                <div class="table-msg">{hasActiveFilters ? 'No IOCs match the selected filters.' : 'No IOCs found.'}</div>
+              {:else}
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Type</th>
+                      <th>Value</th>
+                      <th>Description</th>
+                      <th>Source</th>
+                      <th>Confidence</th>
+                      <th>Added</th>
+                      <th>Expires</th>
+                      <th>Status</th>
+                      <th></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {#each filteredIocs as ioc (ioc.id)}
+                      <tr class:inactive-row={!ioc.active}>
+                        <td>
+                          <span class="type-badge">{ioc.iocType.replace(/_/g,' ')}</span>
+                        </td>
+                        <td>
+                          <code class="ioc-value" title={ioc.value}>{ioc.value}</code>
+                        </td>
+                        <td class="desc-cell" title={ioc.description ?? ''}>{ioc.description ?? '—'}</td>
+                        <td class="src-cell">{SRC_LABEL[ioc.source] ?? ioc.source}</td>
+                        <td>
+                          <span class="conf-badge" style="color:{CONF_COLOR[ioc.confidence]}">{ioc.confidence}</span>
+                        </td>
+                        <td class="date-cell">{fmtDate(ioc.addedAt)}</td>
+                        <td class="date-cell">{fmtDate(ioc.expiresAt)}</td>
+                        <td>
+                          {#if ioc.active}
+                            <span class="badge badge-active">Active</span>
+                          {:else}
+                            <span class="badge badge-inactive">Inactive</span>
+                          {/if}
+                        </td>
+                        <td class="actions">
+                          <button class="btn-sm btn-edit" on:click={() => openEdit(ioc)}>Edit</button>
+                          {#if ioc.active}
+                            <button class="btn-sm btn-delete" on:click={() => deactivate(ioc)}>Deactivate</button>
+                          {/if}
+                        </td>
+                      </tr>
+                    {/each}
+                  </tbody>
+                </table>
+              {/if}
+            </div>
+          </div>
+
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -279,41 +357,74 @@
 {/if}
 
 <style>
-  .page-wrap {
-    padding: 24px;
-    height: 100%;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
+  /* Page layout */
+  .page-wrapper {
+    display: flex; flex-direction: column;
+    height: 100%; overflow: hidden;
+    padding: 24px 24px 0;
+  }
+  .page-body {
+    display: flex; flex: 1;
+    overflow: hidden; min-height: 0;
+    margin: 0 0 16px;
+  }
+  .page-right {
+    flex: 1; display: flex; flex-direction: column;
+    overflow: hidden; min-height: 0;
+  }
+  .content-frame {
+    flex: 1; border: 1px solid #e5e7eb; border-radius: 8px;
+    overflow: hidden; display: flex; flex-direction: column;
+    min-height: 0; margin-top: 8px; background: white;
+  }
+  .page-main {
+    flex: 1; overflow-y: auto; padding: 16px 24px 24px;
+    min-width: 0; display: flex; flex-direction: column;
   }
 
-  .form-card {
-    background: white;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    padding: 1.25rem;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
+  /* Filter sidebar */
+  .filter-sidebar {
+    width: 220px; min-width: 220px;
+    background: #f8f9fa; border-right: 1px solid #dee2e6;
+    display: flex; flex-direction: column;
+    overflow: hidden;
+    transition: width 0.2s ease, min-width 0.2s ease;
+    flex-shrink: 0;
   }
+  .filter-sidebar.sidebar-collapsed { width: 40px; min-width: 40px; }
 
-  .toolbar {
-    display: flex; justify-content: space-between; align-items: center;
-    margin-bottom: 1rem; gap: 0.75rem;
+  .filter-sidebar-toggle-bar {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 0.55rem 0.65rem;
+    border-bottom: 1px solid #dee2e6;
+    background: #eef2f7;
+    flex-shrink: 0; min-height: 36px;
   }
-  .toolbar-left  { display: flex; align-items: center; gap: 0.75rem; }
-  .toolbar-right { display: flex; gap: 0.5rem; }
-  .count { color: #6b7280; font-size: var(--font-size-body-sm); white-space: nowrap; }
+  .bar-filters-active { background: #dbeafe !important; border-bottom-color: #93c5fd !important; }
+  .bar-filters-active .filter-sidebar-title { color: #1e40af !important; }
+  .toggle-bar-right { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
+  .filter-sidebar-title { font-size: var(--font-size-label); font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.5px; }
+  .sidebar-stat-pill { font-size: var(--font-size-tiny); background: #e0e7ff; border: 1px solid #c7d2fe; color: #3730a3; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
+  .sidebar-toggle-btn { background: none; border: 1px solid #d1d5db; border-radius: 4px; padding: 1px 6px; cursor: pointer; font-size: 0.82rem; color: #6b7280; line-height: 1.4; flex-shrink: 0; margin-left: auto; }
+  .sidebar-toggle-btn:hover { background: #e5e7eb; border-color: #9ca3af; }
 
-  .type-filter select {
-    padding: 0.3rem 0.5rem;
-    border: 1px solid #d1d5db;
-    border-radius: 6px;
-    font-size: var(--font-size-caption);
-    background: white;
-    color: #374151;
+  .filter-sidebar-content { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem 0.65rem; overflow-y: auto; flex: 1; }
+  .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; }
+
+  .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; }
+
+  .type-pills { display: flex; flex-direction: column; gap: 4px; }
+  .type-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;
   }
+  .type-pill:hover  { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }
+  .type-pill.active { background: #2563eb; color: white; border-color: #2563eb; }
 
   .inactive-toggle {
     display: flex; align-items: center; gap: 5px;
@@ -321,49 +432,54 @@
   }
   .inactive-toggle input { cursor: pointer; }
 
-  .table-wrapper {
-    flex: 1;
-    overflow: auto;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
-    border: 1px solid #e5e7eb;
-    min-height: 0;
+  /* Active filter chips */
+  .active-filters {
+    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
+    margin-bottom: 0; padding: 0.5rem 0.75rem; flex-shrink: 0;
   }
+  .active-filters-label { font-size: var(--font-size-tiny); font-weight: 600; color: #555; margin-right: 0.25rem; }
+  .filter-tag {
+    display: inline-flex; align-items: center; gap: 0.4rem;
+    padding: 0.3rem 0.6rem; background: white;
+    border: 1px solid #ddd; border-left: 3px solid #2563eb;
+    border-radius: 4px; font-size: var(--font-size-tiny); font-weight: 500; color: #333;
+  }
+  .filter-tag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2563eb; flex-shrink: 0; }
+  .filter-tag-remove {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 18px; height: 18px; border: none; background: #e5e7eb;
+    border-radius: 50%; cursor: pointer; font-size: var(--font-size-tiny);
+    color: #666; line-height: 1; padding: 0; margin-left: 0.15rem;
+  }
+  .filter-tag-remove:hover { background: #f44336; color: white; }
 
+  /* Toolbar */
+  .toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-shrink: 0; }
+  .toolbar-right { display: flex; gap: 0.5rem; }
+  .count { color: #6b7280; font-size: var(--font-size-body-sm); }
+
+  /* Table */
+  .table-card {
+    background: white; border: 1px solid #e5e7eb; border-radius: 8px;
+    overflow: hidden; flex: 1; display: flex; flex-direction: column; min-height: 0;
+  }
+  .table-container { flex: 1; overflow: auto; }
   .table-msg { padding: 2rem; text-align: center; color: #6b7280; font-size: var(--font-size-body-sm); }
 
   table { width: 100%; border-collapse: collapse; }
-  thead { position: sticky; top: 0; z-index: 5; }
+  thead { background: #f9fafb; position: sticky; top: 0; z-index: 5; }
   th {
-    background: #f9fafb; color: #374151;
-    font-size: 0.78rem; font-weight: 600;
-    text-transform: uppercase; letter-spacing: 0.3px;
-    border-bottom: 2px solid #e5e7eb;
-    padding: 0.6rem 0.75rem; text-align: left;
-  }
-  td {
-    border-bottom: 1px solid #f3f4f6;
-    color: #1f2937; font-size: var(--font-size-label);
-    padding: 0.55rem 0.75rem;
+    color: #374151; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.3px;
+    font-weight: 600; border-bottom: 2px solid #e5e7eb;
+    padding: 0.6rem 0.75rem; text-align: left; white-space: nowrap;
   }
+  td { border-bottom: 1px solid #f3f4f6; color: #1f2937; padding: 0.55rem 0.75rem; font-size: var(--font-size-label); vertical-align: middle; }
   tbody tr:hover { background: #eff6ff; }
   tbody tr:last-child td { border-bottom: none; }
   .inactive-row { opacity: 0.55; }
 
-  .type-badge {
-    display: inline-block;
-    font-size: 0.68rem; font-weight: 700;
-    padding: 1px 6px; border-radius: 3px;
-    background: #dbeafe; color: #1e40af;
-    font-family: monospace; white-space: nowrap;
-  }
-
-  .ioc-value {
-    font-family: monospace; font-size: 0.78rem;
-    color: #111827; display: block;
-    max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  }
-
+  .type-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: #dbeafe; color: #1e40af; font-family: monospace; white-space: nowrap; }
+  .ioc-value { font-family: monospace; font-size: 0.78rem; color: #111827; display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .desc-cell { color: #6b7280; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .src-cell  { color: #6b7280; white-space: nowrap; font-size: var(--font-size-caption); }
   .date-cell { color: #6b7280; white-space: nowrap; }
@@ -380,28 +496,17 @@
   .btn-delete { background: #fee2e2; color: #b91c1c; }
   .btn-delete:hover { background: #fecaca; }
 
-  /* Panel */
-  .panel-overlay {
-    position: fixed; inset: 0;
-    background: rgba(0,0,0,0.35);
-    z-index: 999; cursor: pointer;
-  }
+  /* Slide-in panel */
+  .panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 999; cursor: pointer; }
   .panel {
-    position: fixed; top: 0; right: 0;
-    width: 480px; height: 100vh;
-    background: white; z-index: 1000;
-    display: flex; flex-direction: column;
-    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
-    animation: panelIn 0.25s ease; overflow: hidden;
-  }
-  @keyframes panelIn {
-    from { transform: translateX(100%); }
-    to   { transform: translateX(0); }
+    position: fixed; top: 0; right: 0; width: 480px; height: 100vh;
+    background: white; z-index: 1000; display: flex; flex-direction: column;
+    box-shadow: -4px 0 20px rgba(0,0,0,0.15); animation: panelIn 0.25s ease; overflow: hidden;
   }
+  @keyframes panelIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
   .panel-header {
     background: linear-gradient(180deg, #081651 0%, #1c49b8 100%);
-    padding: 1rem 1.25rem;
-    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
+    padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
   }
   .panel-title    { color: white; font-size: 1rem; font-weight: 700; }
   .panel-subtitle { color: rgba(255,255,255,0.65); font-size: 0.78rem; margin-top: 2px; }
@@ -412,42 +517,50 @@
     flex-shrink: 0; transition: background 0.15s;
   }
   .panel-close:hover { background: rgba(255,255,255,0.3); }
-
-  .panel-body {
-    flex: 1; overflow-y: auto; padding: 1.5rem;
-    display: flex; flex-direction: column; gap: 1rem;
-  }
-
-  .panel-footer {
-    border-top: 1px solid #e5e7eb; padding: 1rem 1.5rem;
-    display: flex; justify-content: flex-end; gap: 0.75rem;
-    flex-shrink: 0; background: #f9fafb;
-  }
+  .panel-body { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
+  .panel-footer { border-top: 1px solid #e5e7eb; padding: 1rem 1.5rem; display: flex; justify-content: flex-end; gap: 0.75rem; flex-shrink: 0; background: #f9fafb; }
 
   .field { display: flex; flex-direction: column; gap: 0.3rem; }
   .field label { font-size: var(--font-size-label); font-weight: 600; color: #374151; }
   .field input, .field select, .field textarea {
-    padding: 0.5rem 0.65rem;
-    border: 1px solid #d1d5db; border-radius: 6px;
-    font-size: var(--font-size-body-sm); color: #111827;
-    font-family: inherit;
+    padding: 0.5rem 0.65rem; border: 1px solid #d1d5db; border-radius: 6px;
+    font-size: var(--font-size-body-sm); color: #111827; font-family: inherit;
   }
   .field input:focus, .field select:focus, .field textarea:focus {
-    outline: none; border-color: #3b82f6;
-    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
+    outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
   }
   .field textarea { resize: vertical; }
   .field select:disabled { background: #f3f4f6; color: #6b7280; }
 
   /* Dark mode */
-  :global(.dark-mode) .form-card      { background: #1f2937; border-color: #374151; }
-  :global(.dark-mode) .count          { color: #9ca3af; }
-  :global(.dark-mode) .type-filter select { background: #1e293b; border-color: #4b5563; color: #e2e8f0; }
-  :global(.dark-mode) .inactive-toggle { color: #9ca3af; }
-  :global(.dark-mode) th              { background: #111827; color: #9ca3af; border-bottom-color: #374151; }
-  :global(.dark-mode) td              { color: #e5e7eb; border-bottom-color: #374151; }
+  :global(.dark-mode) .content-frame  { border-color: #374151; background: #1f2937; }
+  :global(.dark-mode) .filter-sidebar             { background: #1f2937; border-right-color: #374151; }
+  :global(.dark-mode) .filter-sidebar-toggle-bar  { background: #111827; border-bottom-color: #374151; }
+  :global(.dark-mode) .bar-filters-active         { background: #1d4ed8 !important; border-bottom-color: #60a5fa !important; }
+  :global(.dark-mode) .bar-filters-active .filter-sidebar-title { color: #bfdbfe !important; }
+  :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) .sidebar-stat-pill          { background: #1e2d4a; border-color: #3730a3; color: #93c5fd; }
+  :global(.dark-mode) .sidebar-clear-all-btn      { background: #3b1a1a; color: #f87171; }
+  :global(.dark-mode) .type-pill                  { background: #1e293b; border-color: #334155; color: #94a3b8; }
+  :global(.dark-mode) .type-pill:hover            { background: #1e2d4a; border-color: #3b82f6; color: #93c5fd; }
+  :global(.dark-mode) .type-pill.active           { background: #2563eb; color: white; border-color: #2563eb; }
+  :global(.dark-mode) .inactive-toggle            { color: #9ca3af; }
+
+  :global(.dark-mode) .active-filters-label { color: #9ca3af; }
+  :global(.dark-mode) .filter-tag           { background: #1f2937; border-color: #374151; border-left-color: #3b82f6; color: #e5e5e5; }
+  :global(.dark-mode) .filter-tag-remove    { background: #374151; color: #e5e7eb; }
+
+  :global(.dark-mode) .count      { color: #9ca3af; }
+  :global(.dark-mode) .table-card { background: #1f2937; }
+  :global(.dark-mode) thead       { background: #111827; }
+  :global(.dark-mode) th          { background: #111827; color: #9ca3af; border-bottom-color: #374151; }
+  :global(.dark-mode) td          { color: #e5e7eb; border-bottom-color: #374151; }
   :global(.dark-mode) tbody tr        { background: #1f2937; }
   :global(.dark-mode) tbody tr:hover  { background: #374151; }
+  :global(.dark-mode) .table-msg  { color: #9ca3af; }
+
   :global(.dark-mode) .ioc-value      { color: #e5e7eb; }
   :global(.dark-mode) .desc-cell      { color: #9ca3af; }
   :global(.dark-mode) .src-cell       { color: #9ca3af; }
@@ -458,11 +571,11 @@
   :global(.dark-mode) .btn-edit:hover { background: #4b5563; }
   :global(.dark-mode) .btn-delete     { background: #3b1a1a; color: #f87171; }
   :global(.dark-mode) .btn-delete:hover { background: #4c1d1d; }
+
   :global(.dark-mode) .panel          { background: #1e293b; }
   :global(.dark-mode) .panel-footer   { background: #162032; border-color: #334155; }
   :global(.dark-mode) .field label    { color: #e2e8f0; }
   :global(.dark-mode) .field input, :global(.dark-mode) .field select, :global(.dark-mode) .field textarea {
     background: #283040; border-color: #4b5563; color: #e2e8f0;
   }
-  :global(.dark-mode) .table-msg      { color: #9ca3af; }
 </style>

src/main/java/com/hiveops/aria/controller/ThreatEventController.java

@@ -16,6 +16,8 @@ import org.springframework.http.ResponseEntity;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.web.bind.annotation.*;
 
+import java.time.Instant;
+import java.time.temporal.ChronoUnit;
 import java.util.Map;
 
 @RestController
@@ -50,9 +52,10 @@ public class ThreatEventController {
     @GetMapping("/stats")
     @PreAuthorize("hasRole('BCOS_ADMIN')")
     public ResponseEntity<Map<String, Object>> getStats() {
+        Instant since24h   = Instant.now().minus(24, ChronoUnit.HOURS);
         long totalEvents   = eventRepository.count();
-        long critical24h   = eventRepository.countBySeverity(ThreatEvent.ThreatSeverity.CRITICAL);
-        long high24h       = eventRepository.countBySeverity(ThreatEvent.ThreatSeverity.HIGH);
+        long critical24h   = eventRepository.countBySeverityAndDetectedAtAfter(ThreatEvent.ThreatSeverity.CRITICAL, since24h);
+        long high24h       = eventRepository.countBySeverityAndDetectedAtAfter(ThreatEvent.ThreatSeverity.HIGH, since24h);
         long activeIocs    = iocRepository.findByActiveTrue().size();
 
         long activeSequences = sequenceAlertRepository.countByResolvedAtIsNull();

src/main/java/com/hiveops/aria/controller/ThreatIocController.java

@@ -52,6 +52,7 @@ public class ThreatIocController {
                 .source(ThreatIoc.IocSource.MANUAL)
                 .sourceRef(request.getSourceRef())
                 .confidence(request.getConfidence() != null ? request.getConfidence() : ThreatIoc.ConfidenceLevel.MEDIUM)
+                .reportedAt(request.getReportedAt())
                 .expiresAt(request.getExpiresAt())
                 .build();
         return ResponseEntity.ok(iocRepository.save(ioc));
@@ -88,6 +89,7 @@ public class ThreatIocController {
         private String description;
         private String sourceRef;
         private ThreatIoc.ConfidenceLevel confidence;
+        private Instant reportedAt;
         private Instant expiresAt;
     }
 }

src/main/java/com/hiveops/aria/entity/ThreatIoc.java

@@ -40,6 +40,9 @@ public class ThreatIoc {
     @Builder.Default
     private ConfidenceLevel confidence = ConfidenceLevel.HIGH;
 
+    @Column(name = "reported_at")
+    private Instant reportedAt;
+
     @Column(name = "added_at", nullable = false)
     @Builder.Default
     private Instant addedAt = Instant.now();

src/main/java/com/hiveops/aria/feed/MalwareBazaarFeedClient.java

@@ -14,6 +14,9 @@ import org.springframework.util.MultiValueMap;
 import org.springframework.web.client.RestTemplate;
 
 import java.time.Instant;
+import java.time.ZoneOffset;
+import java.time.format.DateTimeFormatter;
+import java.time.format.DateTimeParseException;
 import java.time.temporal.ChronoUnit;
 import java.util.ArrayList;
 import java.util.List;
@@ -32,6 +35,9 @@ public class MalwareBazaarFeedClient {
     @Value("${aria.feed.malware-bazaar.api-key:}")
     private String apiKey;
 
+    private static final DateTimeFormatter MB_DATE_FMT =
+            DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss z").withZone(ZoneOffset.UTC);
+
     private final RestTemplate restTemplate = new RestTemplate();
 
     public boolean isConfigured() {
@@ -78,6 +84,12 @@ public class MalwareBazaarFeedClient {
                 String name   = sample.path("file_name").asText("").trim();
                 String sigName = sample.path("signature").asText("Unknown");
 
+                Instant reportedAt = null;
+                String firstSeen = sample.path("first_seen").asText("");
+                if (!firstSeen.isBlank()) {
+                    try { reportedAt = MB_DATE_FMT.parse(firstSeen, Instant::from); } catch (DateTimeParseException ignored) {}
+                }
+
                 if (!md5.isBlank()) {
                     out.add(ThreatIoc.builder()
                             .iocType(ThreatIoc.IocType.MD5)
@@ -86,6 +98,7 @@ public class MalwareBazaarFeedClient {
                             .source(ThreatIoc.IocSource.MALWARE_BAZAAR)
                             .sourceRef(sha256.isBlank() ? tag : sha256)
                             .confidence(ThreatIoc.ConfidenceLevel.HIGH)
+                            .reportedAt(reportedAt)
                             .expiresAt(Instant.now().plus(365, ChronoUnit.DAYS))
                             .build());
                 }
@@ -97,6 +110,7 @@ public class MalwareBazaarFeedClient {
                             .source(ThreatIoc.IocSource.MALWARE_BAZAAR)
                             .sourceRef(sha256.isBlank() ? tag : sha256)
                             .confidence(ThreatIoc.ConfidenceLevel.MEDIUM)
+                            .reportedAt(reportedAt)
                             .expiresAt(Instant.now().plus(365, ChronoUnit.DAYS))
                             .build());
                 }

src/main/java/com/hiveops/aria/feed/OtxFeedClient.java

@@ -10,6 +10,7 @@ import org.springframework.web.client.RestTemplate;
 
 import java.net.URI;
 import java.time.Instant;
+import java.time.format.DateTimeParseException;
 import java.time.temporal.ChronoUnit;
 import java.util.ArrayList;
 import java.util.List;
@@ -91,6 +92,12 @@ public class OtxFeedClient {
         };
         if (iocType == null) return null;
 
+        Instant reportedAt = null;
+        String created = ind.path("created").asText("");
+        if (!created.isBlank()) {
+            try { reportedAt = Instant.parse(created); } catch (DateTimeParseException ignored) {}
+        }
+
         return ThreatIoc.builder()
                 .iocType(iocType)
                 .value(value)
@@ -98,6 +105,7 @@ public class OtxFeedClient {
                 .source(ThreatIoc.IocSource.OTX)
                 .sourceRef(pulseName)
                 .confidence(ThreatIoc.ConfidenceLevel.MEDIUM)
+                .reportedAt(reportedAt)
                 .expiresAt(Instant.now().plus(90, ChronoUnit.DAYS))
                 .build();
     }

src/main/java/com/hiveops/aria/feed/ThreatFoxFeedClient.java

@@ -12,6 +12,9 @@ import org.springframework.stereotype.Component;
 import org.springframework.web.client.RestTemplate;
 
 import java.time.Instant;
+import java.time.ZoneOffset;
+import java.time.format.DateTimeFormatter;
+import java.time.format.DateTimeParseException;
 import java.time.temporal.ChronoUnit;
 import java.util.ArrayList;
 import java.util.List;
@@ -31,6 +34,9 @@ public class ThreatFoxFeedClient {
     @Value("${aria.feed.threat-fox.api-key:}")
     private String apiKey;
 
+    private static final DateTimeFormatter TF_DATE_FMT =
+            DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss z").withZone(ZoneOffset.UTC);
+
     private final RestTemplate restTemplate = new RestTemplate();
 
     public boolean isConfigured() {
@@ -161,6 +167,12 @@ public class ThreatFoxFeedClient {
                 ? ThreatIoc.ConfidenceLevel.HIGH
                 : confidenceInt >= 50 ? ThreatIoc.ConfidenceLevel.MEDIUM : ThreatIoc.ConfidenceLevel.LOW;
 
+        Instant reportedAt = null;
+        String firstSeen = ioc.path("first_seen").asText("");
+        if (!firstSeen.isBlank()) {
+            try { reportedAt = TF_DATE_FMT.parse(firstSeen, Instant::from); } catch (DateTimeParseException ignored) {}
+        }
+
         return ThreatIoc.builder()
                 .iocType(type)
                 .value(value)
@@ -168,6 +180,7 @@ public class ThreatFoxFeedClient {
                 .source(ThreatIoc.IocSource.THREAT_FOX)
                 .sourceRef(iocId)
                 .confidence(level)
+                .reportedAt(reportedAt)
                 .expiresAt(Instant.now().plus(180, ChronoUnit.DAYS))
                 .build();
     }

src/main/java/com/hiveops/aria/repository/ThreatEventRepository.java

@@ -22,7 +22,7 @@ public interface ThreatEventRepository extends JpaRepository<ThreatEvent, Long>
 
     Page<ThreatEvent> findBySeverityOrderByDetectedAtDesc(ThreatEvent.ThreatSeverity severity, Pageable pageable);
 
-    long countBySeverity(ThreatEvent.ThreatSeverity severity);
+    long countBySeverityAndDetectedAtAfter(ThreatEvent.ThreatSeverity severity, Instant since);
 
     Page<ThreatEvent> findAllByOrderByDetectedAtDesc(Pageable pageable);
 }

src/main/java/com/hiveops/aria/service/IocFeedService.java

@@ -102,6 +102,7 @@ public class IocFeedService {
                 e.setDescription(ioc.getDescription());
                 e.setSourceRef(ioc.getSourceRef());
                 e.setConfidence(ioc.getConfidence());
+                e.setReportedAt(ioc.getReportedAt());
                 e.setExpiresAt(ioc.getExpiresAt());
                 iocRepository.save(e);
                 updated++;

src/main/resources/db/migration/V7__add_ioc_reported_at.sql

@@ -0,0 +1 @@
+ALTER TABLE threat_ioc ADD COLUMN reported_at TIMESTAMPTZ;