Add Claude integration to dashboard

Add comprehensive Claude Code monitoring and realtime streaming to the K8s dashboard.
Includes API endpoints for health, stats, summary, inventory, and live event streaming.
Frontend provides overview, usage, inventory, debug, and live feed views.
This commit is contained in:
OpenCode Test
2026-01-03 10:54:48 -08:00
parent de89f3066c
commit ae958528a6
26 changed files with 1638 additions and 2 deletions

View File

@@ -63,6 +63,7 @@ nav {
background: var(--bg-secondary);
padding: 0.5rem 2rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
border-bottom: 1px solid var(--bg-card);
}
@@ -178,6 +179,47 @@ td {
color: var(--success);
}
/* Claude dashboard extra badges */
.status-ok {
background: rgba(74, 222, 128, 0.2);
color: var(--success);
}
.status-missing {
background: rgba(239, 68, 68, 0.2);
color: var(--danger);
}
.simple-list {
margin-left: 1.25rem;
}
.simple-list li {
margin: 0.25rem 0;
}
.inventory-section + .inventory-section {
margin-top: 1.25rem;
}
.metric {
font-size: 2rem;
font-weight: 700;
margin-top: 0.25rem;
}
/* Grid helper for Claude overview (keeps markup minimal) */
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* In some contexts we want a grid inside a card; remove card bottom margin in that case */
.grid .card {
margin-bottom: 0;
}
.alerts-list, .pending-list, .workflows-list {
display: flex;
flex-direction: column;
@@ -328,6 +370,59 @@ footer {
.progress-bar .fill.warning { background: var(--warning); }
.progress-bar .fill.danger { background: var(--danger); }
/* Live feed styles */
.live-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.conn-badge {
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
}
.conn-badge-connected {
background: rgba(74, 222, 128, 0.2);
color: var(--success);
}
.conn-badge-error {
background: rgba(239, 68, 68, 0.2);
color: var(--danger);
}
.conn-badge-yellow {
background: rgba(251, 191, 36, 0.2);
color: var(--warning);
}
.raw-json {
background: var(--bg-secondary);
padding: 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
overflow-x: auto;
margin-top: 0.5rem;
}
.btn-sm {
padding: 0.25rem 0.5rem;
border: 1px solid var(--bg-secondary);
background: transparent;
color: var(--text-primary);
border-radius: 4px;
cursor: pointer;
font-size: 0.75rem;
}
.btn-sm:hover {
background: var(--bg-secondary);
}
/* Responsive */
@media (max-width: 768px) {
header {