kimi/Timmy-time-dashboard
Archived
1
0
Fork 0
forked from Rockachopa/Timmy-time-dashboard
Code Pull Requests Activity

feat: Hands Dashboard Routes and UI (Phase 3.6)

Browse Source 
Add dashboard for managing autonomous Hands:

Routes (src/dashboard/routes/hands.py):
- GET /api/hands - List all Hands with status
- GET /api/hands/{name} - Get Hand details
- POST /api/hands/{name}/trigger - Manual trigger
- POST /api/hands/{name}/pause - Pause scheduled Hand
- POST /api/hands/{name}/resume - Resume paused Hand
- GET /api/approvals - List pending approvals
- POST /api/approvals/{id}/approve - Approve request
- POST /api/approvals/{id}/reject - Reject request
- GET /api/executions - List execution history

Templates:
- hands.html - Main dashboard page
- partials/hands_list.html - Active Hands list
- partials/approvals_list.html - Pending approvals
- partials/hand_executions.html - Execution history

Integration:
- Wired up in app.py
- Navigation links in base.html
This commit is contained in:
Alexander Payne
2026-02-26 12:46:48 -05:00
parent 73cf780656
commit d7aaae74d5
7 changed files with 628 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/dashboard/templates/hands.html Normal file
View File

@@ -0,0 +1,140 @@
{% extends "base.html" %}
{% block title %}Hands — Timmy Time{% endblock %}
{% block content %}
<div class="container-fluid py-4">
<!-- Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h1 class="h3 mb-0">Hands</h1>
<p class="text-muted small mb-0">Autonomous scheduled agents</p>
</div>
<div class="d-flex gap-2">
<button class="btn btn-sm btn-outline-info" hx-get="/hands/list" hx-target="#hands-container">
Refresh
</button>
</div>
</div>
<!-- Main Content Grid -->
<div class="row g-4">
<!-- Left Column: Hands List -->
<div class="col-lg-8">
<div class="card border-0 shadow-sm">
<div class="card-header bg-transparent border-secondary d-flex justify-content-between align-items-center">
<h5 class="mb-0">Active Hands</h5>
<span class="badge bg-info" hx-get="/hands/api/hands" hx-trigger="every 30s" hx-swap="none">
Auto-refresh
</span>
</div>
<div class="card-body p-0">
<div id="hands-container" hx-get="/hands/list" hx-trigger="load">
<div class="d-flex justify-content-center py-5">
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading Hands...</span>
</div>
</div>
</div>
</div>
</div>
<!-- Executions -->
<div class="card border-0 shadow-sm mt-4">
<div class="card-header bg-transparent border-secondary">
<h5 class="mb-0">Recent Executions</h5>
</div>
<div class="card-body p-0">
<div id="executions-container" hx-get="/hands/executions" hx-trigger="load">
<div class="d-flex justify-content-center py-3">
<div class="spinner-border spinner-border-sm text-muted" role="status"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Approvals & Info -->
<div class="col-lg-4">
<!-- Pending Approvals -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-transparent border-secondary d-flex justify-content-between align-items-center">
<h5 class="mb-0">Pending Approvals</h5>
<span class="badge bg-warning text-dark" id="approval-count">-</span>
</div>
<div class="card-body p-0">
<div id="approvals-container" hx-get="/hands/approvals" hx-trigger="load, every 10s">
<div class="d-flex justify-content-center py-3">
<div class="spinner-border spinner-border-sm text-muted" role="status"></div>
</div>
</div>
</div>
</div>
<!-- What are Hands -->
<div class="card border-0 shadow-sm">
<div class="card-header bg-transparent border-secondary">
<h5 class="mb-0">What are Hands?</h5>
</div>
<div class="card-body">
<p class="small mb-2">Hands are autonomous agents that run on schedules:</p>
<ul class="list-unstyled small mb-0">
<li class="mb-1">🔮 <strong>Oracle</strong> — Bitcoin intelligence</li>
<li class="mb-1">🔍 <strong>Scout</strong> — OSINT monitoring</li>
<li class="mb-1">✍️ <strong>Scribe</strong> — Content production</li>
<li class="mb-1">💰 <strong>Ledger</strong> — Treasury tracking</li>
<li class="mb-1">🔧 <strong>Forge</strong> — Model management</li>
<li class="mb-1">🎨 <strong>Weaver</strong> — Creative pipeline</li>
<li class="mb-1">🛡️ <strong>Sentinel</strong> — System health</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<style>
.hand-card {
transition: all 0.2s ease;
border-left: 3px solid transparent;
}
.hand-card:hover {
background-color: rgba(255, 255, 255, 0.03);
}
.hand-card.running {
border-left-color: #0dcaf0;
}
.hand-card.scheduled {
border-left-color: #198754;
}
.hand-card.paused {
border-left-color: #ffc107;
}
.hand-card.error {
border-left-color: #dc3545;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.status-dot.running { background-color: #0dcaf0; animation: pulse 1.5s infinite; }
.status-dot.scheduled { background-color: #198754; }
.status-dot.paused { background-color: #ffc107; }
.status-dot.error { background-color: #dc3545; }
.status-dot.idle { background-color: #6c757d; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
</style>
{% endblock %}