+
e.stopPropagation()}>
+
+
+
{process.name}
+
PID: {process.pid}
+
+
+
+
+
+
+
Overview
+
+
+
+ {process.pid}
+
+
+
+ {process.ppid}
+
+
+
+ {process.user}
+
+
+
+ {process.parent_name}
+
+
+
+ {process.exe || 'N/A'}
+
+
+
+ {process.cwd || 'N/A'}
+
+
+
+ {process.sha256 || 'N/A'}
+
+
+
+
+
+
Threat Scores
+
+
+
+
+ {process.total_score.toFixed(2)}
+
+
+
+
+ {process.heuristic_score.toFixed(2)}
+
+
+
+ {process.ml_score.toFixed(2)}
+
+
+
+
+
+
Resource Usage
+
+
+
+
+ {process.cpu_percent.toFixed(1)}%
+
+
+
80 ? '#ef4444' : process.cpu_percent > 50 ? '#eab308' : '#22c55e'
+ }}
+ />
+
+
+
+
+
+ {process.conns_outbound ?? 0}
+
+
+
+
+
+
+
+
+
+
Detection Reasons
+
+ {process.reasons.length > 0 ? (
+ process.reasons.map((reason, index) => (
+
+ = 3 ? 'rgba(239, 68, 68, 0.2)' :
+ reason.score >= 2 ? 'rgba(234, 179, 8, 0.2)' :
+ 'rgba(34, 197, 94, 0.2)',
+ color: reason.score >= 3 ? '#ef4444' :
+ reason.score >= 2 ? '#eab308' :
+ '#22c55e'
+ }}>
+ {reason.score.toFixed(1)}
+
+ {reason.reason}
+
+ ))
+ ) : (
+
No specific reasons detected
+ )}
+
+
+
+
+
Command Line
+
+
+ {Array.isArray(process.cmdline)
+ ? process.cmdline.join(' ')
+ : (process.cmdline || 'N/A')}
+
+
+
+
+
+
+ )
+}
+
+export default ProcessDetails
diff --git a/frontend/src/components/ProcessTable.css b/frontend/src/components/ProcessTable.css
new file mode 100644
index 0000000..5ff824d
--- /dev/null
+++ b/frontend/src/components/ProcessTable.css
@@ -0,0 +1,165 @@
+.process-table-container {
+ background: rgba(30, 41, 59, 0.6);
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(148, 163, 184, 0.1);
+ border-radius: 12px;
+ overflow: hidden;
+}
+
+.table-header {
+ padding: 20px 24px;
+ border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+.table-header h2 {
+ margin: 0;
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: #f1f5f9;
+}
+
+.table-wrapper {
+ overflow-x: auto;
+}
+
+.process-table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.process-table thead {
+ background: rgba(15, 23, 42, 0.4);
+}
+
+.process-table th {
+ padding: 16px;
+ text-align: left;
+ font-size: 0.85rem;
+ font-weight: 600;
+ color: #cbd5e1;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ cursor: pointer;
+ user-select: none;
+ white-space: nowrap;
+}
+
+.process-table th:hover {
+ background: rgba(15, 23, 42, 0.6);
+}
+
+.process-table tbody tr {
+ border-bottom: 1px solid rgba(148, 163, 184, 0.05);
+ transition: all 0.2s;
+}
+
+.process-table tbody tr.clickable {
+ cursor: pointer;
+}
+
+.process-table tbody tr:hover {
+ background: rgba(59, 130, 246, 0.1);
+}
+
+.process-table td {
+ padding: 16px;
+ color: #e2e8f0;
+ font-size: 0.9rem;
+}
+
+.mono {
+ font-family: 'Courier New', monospace;
+ color: #94a3b8;
+}
+
+.process-name {
+ font-weight: 600;
+ color: #60a5fa;
+}
+
+.parent-name {
+ color: #94a3b8;
+ font-size: 0.85rem;
+}
+
+.score-badge {
+ display: inline-block;
+ padding: 4px 12px;
+ border-radius: 12px;
+ font-weight: 700;
+ font-size: 0.9rem;
+}
+
+.score-critical {
+ background-color: rgba(239, 68, 68, 0.2);
+ color: #ef4444;
+ border: 1px solid rgba(239, 68, 68, 0.4);
+}
+
+.score-warning {
+ background-color: rgba(234, 179, 8, 0.2);
+ color: #eab308;
+ border: 1px solid rgba(234, 179, 8, 0.4);
+}
+
+.score-normal {
+ background-color: rgba(34, 197, 94, 0.2);
+ color: #22c55e;
+ border: 1px solid rgba(34, 197, 94, 0.4);
+}
+
+.reasons-cell {
+ max-width: 400px;
+}
+
+.reasons-preview {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: #cbd5e1;
+ font-size: 0.85rem;
+}
+
+.more-badge {
+ background: rgba(59, 130, 246, 0.2);
+ color: #60a5fa;
+ padding: 2px 8px;
+ border-radius: 8px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ white-space: nowrap;
+}
+
+.loading-state, .empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 64px 24px;
+ color: #94a3b8;
+}
+
+.spinner {
+ width: 48px;
+ height: 48px;
+ border: 4px solid rgba(59, 130, 246, 0.2);
+ border-top-color: #3b82f6;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ margin-bottom: 16px;
+}
+
+@keyframes spin {
+ to { transform: rotate(360deg); }
+}
+
+.empty-state h3 {
+ margin: 16px 0 8px 0;
+ color: #22c55e;
+ font-size: 1.5rem;
+}
+
+.empty-state p {
+ margin: 0;
+ font-size: 1rem;
+}
diff --git a/frontend/src/components/ProcessTable.tsx b/frontend/src/components/ProcessTable.tsx
new file mode 100644
index 0000000..30cc008
--- /dev/null
+++ b/frontend/src/components/ProcessTable.tsx
@@ -0,0 +1,165 @@
+import React, { useState } from 'react'
+import type { ProcessData } from './Dashboard'
+import ProcessDetails from './ProcessDetails'
+import './ProcessTable.css'
+
+interface ProcessTableProps {
+ processes: ProcessData[]
+ loading: boolean
+}
+
+const ProcessTable: React.FC
= ({ processes, loading }) => {
+ const [selectedProcess, setSelectedProcess] = useState(null)
+ const [sortField, setSortField] = useState('total_score')
+ const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc')
+
+ const handleSort = (field: keyof ProcessData) => {
+ if (sortField === field) {
+ setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
+ } else {
+ setSortField(field)
+ setSortOrder('desc')
+ }
+ }
+
+ const sortedProcesses = [...processes].sort((a, b) => {
+ const aVal = a[sortField]
+ const bVal = b[sortField]
+
+ if (typeof aVal === 'number' && typeof bVal === 'number') {
+ return sortOrder === 'asc' ? aVal - bVal : bVal - aVal
+ }
+
+ if (typeof aVal === 'string' && typeof bVal === 'string') {
+ return sortOrder === 'asc'
+ ? aVal.localeCompare(bVal)
+ : bVal.localeCompare(aVal)
+ }
+
+ return 0
+ })
+
+ const getStatusClass = (status: string) => {
+ switch (status) {
+ case 'critical': return 'badge-critical'
+ case 'warning': return 'badge-warning'
+ default: return 'badge-normal'
+ }
+ }
+
+ const getScoreClass = (score: number) => {
+ if (score >= 8) return 'score-critical'
+ if (score >= 5) return 'score-warning'
+ return 'score-normal'
+ }
+
+ if (loading && processes.length === 0) {
+ return (
+
+
+
+
Loading processes...
+
+
+
+
+
All Clear!
+
No suspicious processes detected
+
+
+
+
Suspicious Processes ({processes.length})
+
+
+
+
+
+
+ | handleSort('total_score')}>
+ Score {sortField === 'total_score' && (sortOrder === 'asc' ? 'β' : 'β')}
+ |
+ handleSort('pid')}>
+ PID {sortField === 'pid' && (sortOrder === 'asc' ? 'β' : 'β')}
+ |
+ handleSort('name')}>
+ Name {sortField === 'name' && (sortOrder === 'asc' ? 'β' : 'β')}
+ |
+ handleSort('user')}>
+ User {sortField === 'user' && (sortOrder === 'asc' ? 'β' : 'β')}
+ |
+ Parent |
+ handleSort('cpu_percent')}>
+ CPU% {sortField === 'cpu_percent' && (sortOrder === 'asc' ? 'β' : 'β')}
+ |
+ handleSort('conns_outbound')}>
+ Connections {sortField === 'conns_outbound' && (sortOrder === 'asc' ? 'β' : 'β')}
+ |
+ Status |
+ Reasons |
+
+
+
+ {sortedProcesses.map((proc) => (
+ setSelectedProcess(proc)}
+ className="clickable"
+ >
+ |
+
+ {proc.total_score.toFixed(1)}
+
+ |
+ {proc.pid} |
+ {proc.name} |
+ {proc.user} |
+ {proc.parent_name} |
+ {proc.cpu_percent.toFixed(1)}% |
+ {proc.conns_outbound ?? 0} |
+
+
+ {proc.status.toUpperCase()}
+
+ |
+
+ {proc.reasons.length > 0 && (
+
+ {proc.reasons[0].reason}
+ {proc.reasons.length > 1 && (
+ +{proc.reasons.length - 1}
+ )}
+
+ )}
+ |
+
+ ))}
+
+
+
+
+ {[...Array(4)].map((_, i) => (
+
+ ))}
+
+ {cards.map((card, index) => (
+
+
+ {card.icon}
+ {card.title}
+
+
+ {card.value.toLocaleString()}
+
+ {card.title === 'Critical' && card.value > 0 && (
+
+ Requires attention
+
+ )}
+
+ ))}
+