feat(aria): Phase 3 — device security posture tracking

Adds per-device security posture reports and compliance dashboard. Agents POST
posture data (disk encryption, audit policy, image hashes, OS version/EOL) to
POST /api/aria/posture/report (service-secret authenticated). DevicePostureService
upserts the record and calculates a 0–100 posture score using a penalty model:
disk encryption off −25, audit policy off −20, OS EOL −20, image hash drift −20,
whitelist off −10, stale check −5/day (capped at −15). REST API adds GET /posture
(filterable by EOL status and score band) and GET /posture/{deviceId}. Stats
endpoint gains lowPostureCount (<50) and eolDeviceCount. Dashboard reorganised
into Threat Activity and Compliance rows. Device Posture SPA view enables the
previously-disabled nav item with score bar, EOL badges, and full detail panel.

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

frontend/src/App.svelte

@@ -3,6 +3,7 @@
   import ThreatEvents from './components/ThreatEvents.svelte';
   import IocManagement from './components/IocManagement.svelte';
   import PrecursorAlerts from './components/PrecursorAlerts.svelte';
+  import DevicePosture from './components/DevicePosture.svelte';
   import Toast from './components/common/Toast.svelte';
   import { onMount } from 'svelte';
   import { authApi } from './lib/api';
@@ -19,7 +20,7 @@
     localStorage.setItem('ariaSidebarCollapsed', String(sidebarCollapsed));
   }
 
-  type View = 'dashboard' | 'events' | 'ioc' | 'sequences';
+  type View = 'dashboard' | 'events' | 'ioc' | 'sequences' | 'posture';
   let currentView: View = 'dashboard';
   let eventsInitialSeverity: ThreatSeverity | '' = '';
 
@@ -33,6 +34,7 @@
     else if (e.detail.view === 'events-high') navigate('events', 'HIGH');
     else if (e.detail.view === 'ioc')         navigate('ioc');
     else if (e.detail.view === 'sequences')   navigate('sequences');
+    else if (e.detail.view === 'posture')     navigate('posture');
   }
 
   onMount(() => {
@@ -94,12 +96,9 @@
         </button>
       </div>
 
-      {#if !sidebarCollapsed}
-        <div class="nav-section-header">Phase 3</div>
-      {/if}
-
       <div class="nav-group">
-        <button class="nav-btn nav-disabled" disabled title="Device Posture (Phase 3)">
+        <button class="nav-btn" class:active={currentView === 'posture'}
+          on:click={() => navigate('posture')} title="Device Posture">
           <span class="nav-icon">🔒</span>
           {#if !sidebarCollapsed}<span>Device Posture</span>{/if}
         </button>
@@ -130,6 +129,8 @@
       <IocManagement />
     {:else if currentView === 'sequences'}
       <PrecursorAlerts />
+    {:else if currentView === 'posture'}
+      <DevicePosture />
     {/if}
   </main>
 </div>

frontend/src/components/Dashboard.svelte

@@ -31,6 +31,7 @@
   {#if loading}
     <div class="loading-row">Loading…</div>
   {:else if stats}
+    <div class="section-title">Threat Activity</div>
     <div class="stat-grid">
       <div class="stat-card">
         <div class="stat-icon neutral">🛡️</div>
@@ -38,33 +39,56 @@
         <div class="stat-label">Total Events</div>
       </div>
 
-      <button class="stat-card clickable critical" on:click={() => dispatch('navigate', { view: 'events-critical' })}>
-        <div class="stat-icon critical-icon">🔴</div>
+      <button class="stat-card clickable" on:click={() => dispatch('navigate', { view: 'events-critical' })}>
+        <div class="stat-icon">🔴</div>
         <div class="stat-value critical-val">{stats.criticalCount.toLocaleString()}</div>
         <div class="stat-label">Critical</div>
         <div class="stat-hint">View events →</div>
       </button>
 
-      <button class="stat-card clickable high" on:click={() => dispatch('navigate', { view: 'events-high' })}>
-        <div class="stat-icon high-icon">🟠</div>
+      <button class="stat-card clickable" on:click={() => dispatch('navigate', { view: 'events-high' })}>
+        <div class="stat-icon">🟠</div>
         <div class="stat-value high-val">{stats.highCount.toLocaleString()}</div>
         <div class="stat-label">High</div>
         <div class="stat-hint">View events →</div>
       </button>
 
-      <button class="stat-card clickable ioc" on:click={() => dispatch('navigate', { view: 'ioc' })}>
-        <div class="stat-icon ioc-icon">🎯</div>
+      <button class="stat-card clickable" on:click={() => dispatch('navigate', { view: 'sequences' })}>
+        <div class="stat-icon">🔔</div>
+        <div class="stat-value seq-val">{(stats.activeSequenceCount ?? 0).toLocaleString()}</div>
+        <div class="stat-label">Active Sequences</div>
+        <div class="stat-hint">View alerts →</div>
+      </button>
+    </div>
+
+    <div class="section-title">Compliance</div>
+    <div class="stat-grid">
+      <button class="stat-card clickable" on:click={() => dispatch('navigate', { view: 'ioc' })}>
+        <div class="stat-icon">🎯</div>
         <div class="stat-value ioc-val">{stats.activeIocCount.toLocaleString()}</div>
         <div class="stat-label">Active IOCs</div>
         <div class="stat-hint">Manage IOCs →</div>
       </button>
 
-      <button class="stat-card clickable seq" on:click={() => dispatch('navigate', { view: 'sequences' })}>
-        <div class="stat-icon seq-icon">🔔</div>
-        <div class="stat-value seq-val">{(stats.activeSequenceCount ?? 0).toLocaleString()}</div>
-        <div class="stat-label">Active Sequences</div>
-        <div class="stat-hint">View alerts →</div>
+      <button class="stat-card clickable" on:click={() => dispatch('navigate', { view: 'posture' })}>
+        <div class="stat-icon">🔒</div>
+        <div class="stat-value posture-val">{(stats.lowPostureCount ?? 0).toLocaleString()}</div>
+        <div class="stat-label">Low Posture</div>
+        <div class="stat-hint">Score &lt;50 →</div>
       </button>
+
+      <button class="stat-card clickable" on:click={() => dispatch('navigate', { view: 'posture' })}>
+        <div class="stat-icon">⚠️</div>
+        <div class="stat-value eol-val">{(stats.eolDeviceCount ?? 0).toLocaleString()}</div>
+        <div class="stat-label">EOL Devices</div>
+        <div class="stat-hint">View posture →</div>
+      </button>
+
+      <div class="stat-card">
+        <div class="stat-icon neutral">📋</div>
+        <div class="stat-value">{(stats.totalEvents - (stats.criticalCount ?? 0) - (stats.highCount ?? 0)).toLocaleString()}</div>
+        <div class="stat-label">Non-Critical Events</div>
+      </div>
     </div>
 
     <div class="section-title">Phase Coverage</div>
@@ -106,7 +130,7 @@
 
   .stat-grid {
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     gap: 16px;
     margin-bottom: 32px;
   }
@@ -142,6 +166,8 @@
   .high-val     { color: #d97706; }
   .ioc-val      { color: #2563eb; }
   .seq-val      { color: #7c3aed; }
+  .posture-val  { color: #dc2626; }
+  .eol-val      { color: #d97706; }
 
   .section-title {
     font-size: 0.78rem;

frontend/src/components/DevicePosture.svelte

@@ -0,0 +1,532 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { ariaApi, type DeviceSecurityPosture, type OsEolStatus } from '../lib/api';
+  import { addToast } from '../lib/stores';
+
+  let postures: DeviceSecurityPosture[] = [];
+  let totalElements = 0;
+  let totalPages = 0;
+  let currentPage = 0;
+  const pageSize = 25;
+
+  let loading = true;
+
+  // Filters
+  let filterScore: '' | 'low' | 'medium' = '';
+  let filterEol: OsEolStatus | '' = '';
+
+  // Detail panel
+  let panelOpen = false;
+  let panelDevice: DeviceSecurityPosture | null = null;
+
+  async function load(page = 0) {
+    loading = true;
+    try {
+      const params: Record<string, any> = { page, size: pageSize };
+      if (filterScore)  params.scoreFilter  = filterScore;
+      if (filterEol)    params.osEolStatus  = filterEol;
+
+      const res = await ariaApi.getPostures(params);
+      postures = res.data.content;
+      totalElements = res.data.page.totalElements;
+      totalPages = res.data.page.totalPages;
+      currentPage = res.data.page.number;
+    } catch {
+      addToast('error', 'Load Failed', 'Could not load device posture data');
+    } finally {
+      loading = false;
+    }
+  }
+
+  function openPanel(device: DeviceSecurityPosture) {
+    panelDevice = device;
+    panelOpen = true;
+  }
+
+  function scoreColor(score: number | undefined): string {
+    if (score == null) return 'unknown';
+    if (score >= 80) return 'good';
+    if (score >= 50) return 'medium';
+    return 'bad';
+  }
+
+  function eolLabel(s: OsEolStatus): string {
+    if (s === 'SUPPORTED') return 'Supported';
+    if (s === 'EOL')       return 'EOL';
+    return 'Unknown';
+  }
+
+  function boolCell(v: boolean | undefined): string {
+    if (v == null) return '—';
+    return v ? '✓' : '✗';
+  }
+
+  function boolClass(v: boolean | undefined): string {
+    if (v == null) return 'neutral';
+    return v ? 'ok' : 'bad';
+  }
+
+  function formatDate(iso: string | undefined): string {
+    if (!iso) return '—';
+    return new Date(iso).toLocaleString('en-US', {
+      month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'
+    });
+  }
+
+  function imageMismatch(d: DeviceSecurityPosture): boolean {
+    return !!(d.goldImageHash && d.currentImageHash && d.goldImageHash !== d.currentImageHash);
+  }
+
+  function onFilterChange() { load(0); }
+
+  onMount(() => load(0));
+</script>
+
+<div class="page-wrap">
+  <div class="header">
+    <div class="header-text">
+      <h1>Device Posture</h1>
+      <p>Per-device security compliance — disk encryption, image integrity, OS currency</p>
+    </div>
+    <div class="header-count">
+      {#if !loading}
+        <span class="total-badge">{totalElements} device{totalElements !== 1 ? 's' : ''}</span>
+      {/if}
+    </div>
+  </div>
+
+  <div class="toolbar">
+    <div class="toolbar-left">
+      <div class="filter-group">
+        <label class="filter-label">Score</label>
+        <select class="filter-select" bind:value={filterScore} on:change={onFilterChange}>
+          <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-group">
+        <label class="filter-label">OS Status</label>
+        <select class="filter-select" bind:value={filterEol} on:change={onFilterChange}>
+          <option value="">All</option>
+          <option value="EOL">EOL Only</option>
+          <option value="SUPPORTED">Supported Only</option>
+          <option value="UNKNOWN">Unknown</option>
+        </select>
+      </div>
+    </div>
+
+    <button class="btn btn-secondary btn-sm" on:click={() => load(currentPage)}>
+      Refresh
+    </button>
+  </div>
+
+  {#if loading}
+    <div class="loading-row">Loading…</div>
+  {:else if postures.length === 0}
+    <div class="empty-state">
+      <div class="empty-icon">🔒</div>
+      <div class="empty-title">No posture data yet</div>
+      <div class="empty-sub">Devices report posture via POST /api/aria/posture/report using the service secret</div>
+    </div>
+  {:else}
+    <div class="table-wrapper">
+      <table>
+        <thead>
+          <tr>
+            <th>Device</th>
+            <th>OS Version</th>
+            <th>OS Status</th>
+            <th>Disk Enc.</th>
+            <th>Audit Policy</th>
+            <th>Whitelist</th>
+            <th>Image</th>
+            <th>Score</th>
+            <th>Last Check</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each postures as device (device.deviceId)}
+            <tr>
+              <td class="device-cell">{device.deviceAgentId ?? device.deviceId}</td>
+              <td class="os-cell">{device.osVersion ?? '—'}</td>
+              <td>
+                <span class="eol-badge eol-{(device.osEolStatus ?? 'UNKNOWN').toLowerCase()}">
+                  {eolLabel(device.osEolStatus)}
+                </span>
+              </td>
+              <td class="bool-cell {boolClass(device.diskEncryptionEnabled)}">{boolCell(device.diskEncryptionEnabled)}</td>
+              <td class="bool-cell {boolClass(device.auditPolicyCompliant)}">{boolCell(device.auditPolicyCompliant)}</td>
+              <td class="bool-cell {boolClass(device.softwareWhitelistEnabled)}">{boolCell(device.softwareWhitelistEnabled)}</td>
+              <td>
+                {#if imageMismatch(device)}
+                  <span class="img-badge drift">Drift</span>
+                {:else if device.goldImageHash}
+                  <span class="img-badge ok">Match</span>
+                {:else}
+                  <span class="img-badge unknown">—</span>
+                {/if}
+              </td>
+              <td>
+                <div class="score-wrap">
+                  <div class="score-bar">
+                    <div class="score-fill score-{scoreColor(device.postureScore)}"
+                      style="width: {device.postureScore ?? 0}%"></div>
+                  </div>
+                  <span class="score-text score-text-{scoreColor(device.postureScore)}">
+                    {device.postureScore ?? '—'}
+                  </span>
+                </div>
+              </td>
+              <td class="date-cell">{formatDate(device.lastPostureCheckAt)}</td>
+              <td>
+                <button class="btn btn-secondary btn-sm" on:click={() => openPanel(device)}>
+                  Detail
+                </button>
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+
+    {#if totalPages > 1}
+      <div class="pagination">
+        <button class="btn btn-secondary btn-sm" disabled={currentPage === 0}
+          on:click={() => load(currentPage - 1)}>← Prev</button>
+        <span class="page-info">Page {currentPage + 1} of {totalPages}</span>
+        <button class="btn btn-secondary btn-sm" disabled={currentPage >= totalPages - 1}
+          on:click={() => load(currentPage + 1)}>Next →</button>
+      </div>
+    {/if}
+  {/if}
+</div>
+
+{#if panelOpen && panelDevice}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div class="overlay" on:click={() => { panelOpen = false; panelDevice = null; }}></div>
+  <div class="panel">
+    <div class="panel-header">
+      <div>
+        <h2 class="panel-title">{panelDevice.deviceAgentId ?? `Device ${panelDevice.deviceId}`}</h2>
+        <p class="panel-sub">Institution: {panelDevice.institutionKey ?? '—'}</p>
+      </div>
+      <button class="close-btn" on:click={() => { panelOpen = false; panelDevice = null; }}>✕</button>
+    </div>
+
+    <div class="panel-score-row">
+      <div class="big-score score-text-{scoreColor(panelDevice.postureScore)}">
+        {panelDevice.postureScore ?? '—'}
+      </div>
+      <div class="big-score-label">Posture Score</div>
+      <div class="score-bar big-bar">
+        <div class="score-fill score-{scoreColor(panelDevice.postureScore)}"
+          style="width: {panelDevice.postureScore ?? 0}%"></div>
+      </div>
+    </div>
+
+    <div class="panel-checks">
+      <div class="check-row">
+        <span class="check-label">Disk Encryption</span>
+        <span class="check-val {boolClass(panelDevice.diskEncryptionEnabled)}">
+          {boolCell(panelDevice.diskEncryptionEnabled)}
+          {#if panelDevice.diskEncryptionEnabled === false}<span class="penalty">−25</span>{/if}
+        </span>
+      </div>
+      <div class="check-row">
+        <span class="check-label">Audit Policy</span>
+        <span class="check-val {boolClass(panelDevice.auditPolicyCompliant)}">
+          {boolCell(panelDevice.auditPolicyCompliant)}
+          {#if panelDevice.auditPolicyCompliant === false}<span class="penalty">−20</span>{/if}
+        </span>
+      </div>
+      <div class="check-row">
+        <span class="check-label">Software Whitelist</span>
+        <span class="check-val {boolClass(panelDevice.softwareWhitelistEnabled)}">
+          {boolCell(panelDevice.softwareWhitelistEnabled)}
+          {#if panelDevice.softwareWhitelistEnabled === false}<span class="penalty">−10</span>{/if}
+        </span>
+      </div>
+      <div class="check-row">
+        <span class="check-label">OS Version</span>
+        <span class="check-val neutral">{panelDevice.osVersion ?? '—'}</span>
+      </div>
+      <div class="check-row">
+        <span class="check-label">OS EOL Status</span>
+        <span class="check-val {panelDevice.osEolStatus === 'EOL' ? 'bad' : panelDevice.osEolStatus === 'SUPPORTED' ? 'ok' : 'neutral'}">
+          {eolLabel(panelDevice.osEolStatus)}
+          {#if panelDevice.osEolStatus === 'EOL'}<span class="penalty">−20</span>{/if}
+        </span>
+      </div>
+
+      <div class="check-divider"></div>
+
+      <div class="check-row">
+        <span class="check-label">Gold Image Hash</span>
+        <span class="check-val neutral hash">{panelDevice.goldImageHash ? panelDevice.goldImageHash.substring(0, 20) + '…' : '—'}</span>
+      </div>
+      <div class="check-row">
+        <span class="check-label">Current Hash</span>
+        <span class="check-val {imageMismatch(panelDevice) ? 'bad' : 'neutral'} hash">
+          {panelDevice.currentImageHash ? panelDevice.currentImageHash.substring(0, 20) + '…' : '—'}
+          {#if imageMismatch(panelDevice)}<span class="penalty">−20 drift</span>{/if}
+        </span>
+      </div>
+
+      <div class="check-divider"></div>
+
+      <div class="check-row">
+        <span class="check-label">Last Posture Check</span>
+        <span class="check-val neutral">{formatDate(panelDevice.lastPostureCheckAt)}</span>
+      </div>
+      <div class="check-row">
+        <span class="check-label">Gold Validated At</span>
+        <span class="check-val neutral">{formatDate(panelDevice.goldImageValidatedAt)}</span>
+      </div>
+      <div class="check-row">
+        <span class="check-label">Record Updated</span>
+        <span class="check-val neutral">{formatDate(panelDevice.updatedAt)}</span>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .page-wrap {
+    padding: 24px;
+    height: 100%;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .header-count { display: flex; align-items: center; }
+  .total-badge {
+    background: rgba(255,255,255,0.15);
+    color: white;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 0.82rem;
+    font-weight: 600;
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+  .toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+
+  .filter-group { display: flex; align-items: center; gap: 6px; }
+  .filter-label { font-size: 0.8rem; color: #6b7280; white-space: nowrap; }
+  .filter-select {
+    padding: 6px 10px;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    background: white;
+    color: #1f2937;
+    outline: none;
+  }
+  .filter-select:focus { border-color: #2563eb; }
+
+  .loading-row { padding: 2rem; text-align: center; color: #6b7280; }
+
+  .empty-state {
+    display: flex; flex-direction: column; align-items: center;
+    justify-content: center; padding: 4rem 2rem; gap: 12px;
+  }
+  .empty-icon  { font-size: 2.5rem; }
+  .empty-title { font-size: 1.1rem; font-weight: 600; color: #374151; }
+  .empty-sub   { font-size: 0.85rem; color: #9ca3af; text-align: center; max-width: 400px; }
+
+  .table-wrapper {
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    overflow: hidden;
+    margin-bottom: 16px;
+  }
+
+  table { width: 100%; border-collapse: collapse; }
+  thead tr { background: #f9fafb; }
+  th {
+    padding: 10px 12px;
+    font-size: 0.78rem;
+    font-weight: 700;
+    color: #374151;
+    text-align: left;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    border-bottom: 1px solid #e5e7eb;
+    white-space: nowrap;
+  }
+  td {
+    padding: 10px 12px;
+    font-size: 0.88rem;
+    color: #1f2937;
+    border-bottom: 1px solid #f3f4f6;
+    vertical-align: middle;
+  }
+  tbody tr:last-child td { border-bottom: none; }
+  tbody tr:hover td { background: #eff6ff; }
+
+  .device-cell { font-family: monospace; font-size: 0.82rem; color: #374151; }
+  .os-cell     { font-size: 0.82rem; color: #4b5563; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .date-cell   { white-space: nowrap; color: #6b7280; font-size: 0.8rem; }
+
+  .bool-cell { font-size: 1rem; font-weight: 700; text-align: center; }
+  .bool-cell.ok   { color: #16a34a; }
+  .bool-cell.bad  { color: #dc2626; }
+  .bool-cell.neutral { color: #9ca3af; }
+
+  .eol-badge {
+    display: inline-block;
+    padding: 3px 9px;
+    border-radius: 20px;
+    font-size: 0.72rem;
+    font-weight: 700;
+  }
+  .eol-badge.eol-supported { background: #dcfce7; color: #16a34a; }
+  .eol-badge.eol-eol       { background: #fee2e2; color: #dc2626; }
+  .eol-badge.eol-unknown   { background: #f3f4f6; color: #6b7280; }
+
+  .img-badge {
+    display: inline-block;
+    padding: 3px 9px;
+    border-radius: 20px;
+    font-size: 0.72rem;
+    font-weight: 700;
+  }
+  .img-badge.ok      { background: #dcfce7; color: #16a34a; }
+  .img-badge.drift   { background: #fee2e2; color: #dc2626; }
+  .img-badge.unknown { background: #f3f4f6; color: #9ca3af; }
+
+  .score-wrap { display: flex; align-items: center; gap: 8px; }
+  .score-bar {
+    width: 60px;
+    height: 6px;
+    background: #e5e7eb;
+    border-radius: 3px;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  .score-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
+  .score-fill.score-good   { background: #16a34a; }
+  .score-fill.score-medium { background: #d97706; }
+  .score-fill.score-bad    { background: #dc2626; }
+  .score-fill.score-unknown { background: #9ca3af; }
+
+  .score-text { font-size: 0.82rem; font-weight: 700; }
+  .score-text-good    { color: #16a34a; }
+  .score-text-medium  { color: #d97706; }
+  .score-text-bad     { color: #dc2626; }
+  .score-text-unknown { color: #9ca3af; }
+
+  .pagination {
+    display: flex; align-items: center; gap: 12px;
+    justify-content: center; padding: 8px 0;
+  }
+  .page-info { font-size: 0.82rem; color: #6b7280; }
+
+  /* Panel */
+  .overlay {
+    position: fixed; inset: 0;
+    background: rgba(0,0,0,0.35);
+    z-index: 100;
+  }
+  .panel {
+    position: fixed; top: 0; right: 0;
+    width: 480px; height: 100vh;
+    background: white;
+    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
+    z-index: 101;
+    display: flex; flex-direction: column;
+    overflow: hidden;
+  }
+
+  .panel-header {
+    padding: 20px 20px 16px;
+    border-bottom: 1px solid #e5e7eb;
+    display: flex; justify-content: space-between; align-items: flex-start;
+    flex-shrink: 0;
+  }
+  .panel-title { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; color: #111827; font-family: monospace; }
+  .panel-sub   { margin: 0; font-size: 0.82rem; color: #6b7280; }
+
+  .close-btn {
+    background: none; border: none; font-size: 1.1rem;
+    cursor: pointer; color: #9ca3af; padding: 4px; line-height: 1;
+  }
+  .close-btn:hover { color: #374151; }
+
+  .panel-score-row {
+    padding: 20px;
+    border-bottom: 1px solid #e5e7eb;
+    display: flex; flex-direction: column; align-items: center; gap: 6px;
+    flex-shrink: 0;
+  }
+  .big-score { font-size: 3rem; font-weight: 800; line-height: 1; }
+  .big-score-label { font-size: 0.75rem; color: #9ca3af; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
+  .big-bar { width: 100%; height: 8px; margin-top: 4px; }
+
+  .panel-checks {
+    flex: 1; overflow-y: auto;
+    padding: 16px 20px;
+    display: flex; flex-direction: column; gap: 10px;
+  }
+
+  .check-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+  .check-label { font-size: 0.82rem; color: #6b7280; flex-shrink: 0; width: 150px; }
+  .check-val { font-size: 0.88rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
+  .check-val.ok      { color: #16a34a; }
+  .check-val.bad     { color: #dc2626; }
+  .check-val.neutral { color: #374151; font-weight: 400; }
+  .check-val.hash    { font-family: monospace; font-size: 0.78rem; font-weight: 400; }
+
+  .penalty {
+    display: inline-block;
+    background: #fee2e2;
+    color: #dc2626;
+    font-size: 0.65rem;
+    font-weight: 700;
+    padding: 1px 6px;
+    border-radius: 8px;
+  }
+
+  .check-divider { height: 1px; background: #f3f4f6; margin: 4px 0; }
+
+  /* Dark mode */
+  :global(.dark-mode) .filter-select { background: #1e293b; border-color: #334155; color: #e2e8f0; }
+  :global(.dark-mode) .filter-label  { color: #9ca3af; }
+  :global(.dark-mode) .table-wrapper { background: #1f2937; border-color: #374151; }
+  :global(.dark-mode) thead tr { background: #111827; }
+  :global(.dark-mode) th  { color: #9ca3af; border-color: #374151; }
+  :global(.dark-mode) td  { color: #e5e7eb; border-color: #374151; }
+  :global(.dark-mode) tbody tr:hover td { background: #1e3a5f; }
+  :global(.dark-mode) .device-cell { color: #9ca3af; }
+  :global(.dark-mode) .os-cell     { color: #94a3b8; }
+  :global(.dark-mode) .date-cell   { color: #6b7280; }
+  :global(.dark-mode) .score-bar   { background: #374151; }
+  :global(.dark-mode) .empty-title { color: #e2e8f0; }
+  :global(.dark-mode) .empty-sub   { color: #6b7280; }
+  :global(.dark-mode) .eol-badge.eol-supported { background: #052e16; color: #86efac; }
+  :global(.dark-mode) .eol-badge.eol-eol       { background: #450a0a; color: #fca5a5; }
+  :global(.dark-mode) .eol-badge.eol-unknown   { background: #1e293b; color: #94a3b8; }
+  :global(.dark-mode) .img-badge.ok    { background: #052e16; color: #86efac; }
+  :global(.dark-mode) .img-badge.drift { background: #450a0a; color: #fca5a5; }
+  :global(.dark-mode) .img-badge.unknown { background: #1e293b; color: #94a3b8; }
+  :global(.dark-mode) .panel        { background: #1f2937; }
+  :global(.dark-mode) .panel-header { border-color: #374151; }
+  :global(.dark-mode) .panel-title  { color: #f1f5f9; }
+  :global(.dark-mode) .panel-sub    { color: #9ca3af; }
+  :global(.dark-mode) .panel-score-row { border-color: #374151; }
+  :global(.dark-mode) .check-val.neutral { color: #cbd5e1; }
+  :global(.dark-mode) .check-divider { background: #374151; }
+</style>

frontend/src/lib/api.ts

@@ -61,12 +61,33 @@ export interface ThreatEvent {
 
 export type SequenceType = 'JACKPOTTING' | 'SKIMMING' | 'UNKNOWN';
 
+export type OsEolStatus = 'SUPPORTED' | 'EOL' | 'UNKNOWN';
+
 export interface AriaStats {
   totalEvents: number;
   criticalCount: number;
   highCount: number;
   activeIocCount: number;
   activeSequenceCount: number;
+  lowPostureCount: number;
+  eolDeviceCount: number;
+}
+
+export interface DeviceSecurityPosture {
+  deviceId: number;
+  deviceAgentId?: string;
+  institutionKey?: string;
+  auditPolicyCompliant?: boolean;
+  goldImageValidatedAt?: string;
+  goldImageHash?: string;
+  currentImageHash?: string;
+  diskEncryptionEnabled?: boolean;
+  osVersion?: string;
+  osEolStatus: OsEolStatus;
+  softwareWhitelistEnabled?: boolean;
+  lastPostureCheckAt?: string;
+  postureScore?: number;
+  updatedAt: string;
 }
 
 export interface PrecursorSequenceAlert {
@@ -131,4 +152,10 @@ export const ariaApi = {
 
   resolveSequence: (id: number) =>
     api.post<PrecursorSequenceAlert>(`/api/aria/sequences/${id}/resolve`),
+
+  getPostures: (params?: { osEolStatus?: OsEolStatus; scoreFilter?: string; page?: number; size?: number }) =>
+    api.get<PageResponse<DeviceSecurityPosture>>('/api/aria/posture', { params }),
+
+  getPosture: (deviceId: number) =>
+    api.get<DeviceSecurityPosture>(`/api/aria/posture/${deviceId}`),
 };