CyberMind-FR
f2dfb5c144
Network Anomaly Agent (secubox-network-anomaly): - 5 detection modules: bandwidth, connection flood, port scan, DNS, protocol - EMA-based baseline comparison - LocalAI integration for threat assessment - network-anomalyctl CLI LocalRecall Memory System (secubox-localrecall): - Persistent memory for AI agents - Categories: threats, decisions, patterns, configs, conversations - EMA-based importance scoring - LocalAI integration for summarization - localrecallctl CLI with 13 commands AI Insights Dashboard (luci-app-ai-insights): - Unified view across all AI agents - Security posture scoring (0-100) - Agent status grid with alert counts - Aggregated alerts from all agents - Run All Agents and AI Analysis actions LuCI Dashboards: - luci-app-network-anomaly with real-time stats - luci-app-localrecall with memory management Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
338 lines
5.6 KiB
CSS
338 lines
5.6 KiB
CSS
/* AI Insights Dashboard Styles */
|
|
|
|
.ai-view {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.ai-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--border-color-medium, #ddd);
|
|
}
|
|
|
|
.ai-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ai-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ai-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.ai-dot.online {
|
|
background: #28a745;
|
|
box-shadow: 0 0 6px #28a745;
|
|
}
|
|
|
|
.ai-dot.offline {
|
|
background: #dc3545;
|
|
}
|
|
|
|
/* Posture Card */
|
|
.ai-posture-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
padding: 1.5rem 2rem;
|
|
border-radius: 12px;
|
|
margin-bottom: 1.5rem;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
|
|
}
|
|
|
|
.ai-posture-card.success {
|
|
background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
|
|
}
|
|
|
|
.ai-posture-card.warning {
|
|
background: linear-gradient(135deg, #ffc107 0%, #d39e00 100%);
|
|
color: #212529;
|
|
}
|
|
|
|
.ai-posture-card.caution {
|
|
background: linear-gradient(135deg, #fd7e14 0%, #dc6502 100%);
|
|
}
|
|
|
|
.ai-posture-card.danger {
|
|
background: linear-gradient(135deg, #dc3545 0%, #bd2130 100%);
|
|
}
|
|
|
|
.ai-posture-score {
|
|
text-align: center;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.ai-score-value {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ai-score-label {
|
|
font-size: 0.85rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.ai-posture-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.ai-posture-label {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.ai-posture-factors {
|
|
font-size: 0.9rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Stats Row */
|
|
.ai-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.ai-stat {
|
|
background: var(--background-color-low, #f8f9fa);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
border-left: 4px solid var(--border-color-medium, #ddd);
|
|
}
|
|
|
|
.ai-stat.success { border-left-color: #28a745; }
|
|
.ai-stat.warning { border-left-color: #ffc107; }
|
|
.ai-stat.danger { border-left-color: #dc3545; }
|
|
|
|
.ai-stat-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ai-stat-label {
|
|
font-size: 0.85rem;
|
|
color: var(--text-color-low, #666);
|
|
}
|
|
|
|
/* Agents Grid */
|
|
.ai-agents-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.ai-agent-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
background: var(--background-color-high, #fff);
|
|
border: 1px solid var(--border-color-medium, #ddd);
|
|
border-radius: 8px;
|
|
border-left: 4px solid #6c757d;
|
|
}
|
|
|
|
.ai-agent-card.online {
|
|
border-left-color: #28a745;
|
|
}
|
|
|
|
.ai-agent-card.offline {
|
|
border-left-color: #dc3545;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.ai-agent-icon {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.ai-agent-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.ai-agent-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ai-agent-status {
|
|
font-size: 0.85rem;
|
|
color: var(--text-color-low, #666);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ai-agent-alerts {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* Card */
|
|
.ai-card {
|
|
background: var(--background-color-high, #fff);
|
|
border: 1px solid var(--border-color-medium, #ddd);
|
|
border-radius: 8px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.ai-card-header {
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid var(--border-color-medium, #ddd);
|
|
font-weight: 600;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.ai-card-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Actions */
|
|
.ai-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.ai-btn {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.ai-btn:hover { opacity: 0.85; }
|
|
|
|
.ai-btn-primary { background: #007bff; color: #fff; }
|
|
.ai-btn-secondary { background: #6c757d; color: #fff; }
|
|
.ai-btn-info { background: #17a2b8; color: #fff; }
|
|
.ai-btn-outline { background: transparent; border: 1px solid #6c757d; color: #6c757d; }
|
|
|
|
/* Alerts */
|
|
.ai-alerts-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ai-alert-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem;
|
|
background: var(--background-color-low, #f8f9fa);
|
|
border-radius: 4px;
|
|
border-left: 3px solid #6c757d;
|
|
}
|
|
|
|
.ai-alert-item.alert { border-left-color: #ffc107; }
|
|
.ai-alert-item.rule { border-left-color: #007bff; }
|
|
.ai-alert-item.cve { border-left-color: #dc3545; }
|
|
|
|
.ai-alert-icon {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.ai-alert-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.ai-alert-source {
|
|
font-size: 0.8rem;
|
|
color: var(--text-color-low, #666);
|
|
}
|
|
|
|
.ai-alert-message {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.ai-alert-time {
|
|
font-size: 0.8rem;
|
|
color: var(--text-color-low, #666);
|
|
}
|
|
|
|
/* Badge */
|
|
.ai-badge {
|
|
display: inline-block;
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
background: var(--background-color-low, #e9ecef);
|
|
}
|
|
|
|
.ai-badge.warning {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
/* Timeline */
|
|
.ai-timeline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ai-timeline-item {
|
|
display: grid;
|
|
grid-template-columns: 100px 100px 1fr;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: var(--background-color-low, #f8f9fa);
|
|
border-radius: 4px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.ai-timeline-time {
|
|
color: var(--text-color-low, #666);
|
|
}
|
|
|
|
.ai-timeline-source {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Empty state */
|
|
.ai-empty {
|
|
color: var(--text-color-low, #666);
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.spinning::after {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
margin-left: 0.5em;
|
|
border: 2px solid currentColor;
|
|
border-right-color: transparent;
|
|
border-radius: 50%;
|
|
animation: spin 0.75s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|