will/claude-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Claude integration to dashboard

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

91
dashboard/cmd/server/web/index.html
View File

@@ -16,6 +16,14 @@
</header>
<nav>
<!-- General -->
<button class="nav-btn" data-view="overview">Overview</button>
<button class="nav-btn" data-view="usage">Usage</button>
<button class="nav-btn" data-view="inventory">Inventory</button>
<button class="nav-btn" data-view="debug">Debug</button>
<button class="nav-btn" data-view="live">Live</button>
<!-- Existing K8s views (kept intact) -->
<button class="nav-btn active" data-view="status">Status</button>
<button class="nav-btn" data-view="pending">Pending <span id="pending-count" class="badge">0</span></button>
<button class="nav-btn" data-view="history">History</button>
@@ -23,6 +31,89 @@
</nav>
<main>
<!-- Overview View -->
<section id="overview-view" class="view">
<div class="card">
<h2>Overview</h2>
<div id="claude-overview">
<p class="empty-state">Loading Claude overview...</p>
</div>
</div>
</section>
<!-- Usage View -->
<section id="usage-view" class="view">
<div class="card">
<h2>Usage</h2>
<table id="claude-usage-table">
<thead>
<tr>
<th>Date</th>
<th>Sessions</th>
<th>Messages</th>
<th>Tool Calls</th>
</tr>
</thead>
<tbody>
<tr><td colspan="4" class="empty-state">Loading usage...</td></tr>
</tbody>
</table>
</div>
</section>
<!-- Inventory View -->
<section id="inventory-view" class="view">
<div class="card">
<h2>Inventory</h2>
<div id="claude-inventory">
<p class="empty-state">Loading inventory...</p>
</div>
</div>
</section>
<!-- Debug View -->
<section id="debug-view" class="view">
<div class="card">
<h2>Debug</h2>
<table id="claude-debug-table">
<thead>
<tr>
<th>File</th>
<th>Status</th>
<th>MTime</th>
<th>Error</th>
</tr>
</thead>
<tbody>
<tr><td colspan="4" class="empty-state">Loading debug info...</td></tr>
</tbody>
</table>
</div>
</section>
<!-- Live View -->
<section id="live-view" class="view">
<div class="card">
<h2>Live Feed</h2>
<div class="live-header">
<span id="claude-live-conn" class="conn-badge conn-badge-yellow">Connecting...</span>
</div>
<table id="claude-live-table">
<thead>
<tr>
<th>Time</th>
<th>Type</th>
<th>Summary</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr><td colspan="4" class="empty-state">Waiting for events...</td></tr>
</tbody>
</table>
</div>
</section>
<!-- Status View -->
<section id="status-view" class="view active">
<div class="card">