mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-10-09 00:49:41 +02:00
feat: add web interface with real-time streaming and timed runs
- Add Fastify-based web server with SSE for real-time updates - Create responsive dark-themed UI with: - Prompt input with directory and duration options - Live countdown timer for timed runs - Real-time output streaming - Collapsible sessions panel - Cost and task tracking - Support timed runs that repeat prompts for specified duration - Add /api endpoints for sessions, scheduled runs, and status - Update Session class to parse Claude CLI JSON output - Add 'claudeman web' command to start the interface Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
@@ -0,0 +1,356 @@
|
||||
// Claudeman App
|
||||
class ClaudemanApp {
|
||||
constructor() {
|
||||
this.sessions = new Map();
|
||||
this.currentRun = null;
|
||||
this.totalCost = 0;
|
||||
this.totalTasks = 0;
|
||||
this.eventSource = null;
|
||||
this.sessionsCollapsed = true;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.connectSSE();
|
||||
this.loadState();
|
||||
this.startTimerUpdates();
|
||||
|
||||
// Start with sessions collapsed
|
||||
document.getElementById('sessionsPanel').classList.add('collapsed');
|
||||
}
|
||||
|
||||
// SSE Connection
|
||||
connectSSE() {
|
||||
this.eventSource = new EventSource('/api/events');
|
||||
|
||||
this.eventSource.onopen = () => {
|
||||
this.setConnectionStatus('connected');
|
||||
};
|
||||
|
||||
this.eventSource.onerror = () => {
|
||||
this.setConnectionStatus('disconnected');
|
||||
setTimeout(() => this.connectSSE(), 3000);
|
||||
};
|
||||
|
||||
this.eventSource.addEventListener('init', (e) => {
|
||||
const data = JSON.parse(e.data);
|
||||
this.handleInit(data);
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('session:created', (e) => {
|
||||
const data = JSON.parse(e.data);
|
||||
this.sessions.set(data.id, data);
|
||||
this.renderSessions();
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('session:updated', (e) => {
|
||||
const data = JSON.parse(e.data);
|
||||
this.sessions.set(data.id, data);
|
||||
this.updateStats();
|
||||
this.renderSessions();
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('session:output', (e) => {
|
||||
const data = JSON.parse(e.data);
|
||||
this.appendOutput(data.data);
|
||||
this.updateSessionOutput(data.id, data.data);
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('session:message', (e) => {
|
||||
const data = JSON.parse(e.data);
|
||||
const msg = data.message;
|
||||
|
||||
if (msg.type === 'assistant' && msg.message?.content) {
|
||||
const text = msg.message.content
|
||||
.filter(b => b.type === 'text')
|
||||
.map(b => b.text)
|
||||
.join('');
|
||||
if (text) {
|
||||
this.appendOutput(text);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('session:completion', (e) => {
|
||||
const data = JSON.parse(e.data);
|
||||
this.totalCost += data.cost || 0;
|
||||
this.totalTasks++;
|
||||
this.appendOutput(`\n\n✓ Completed (Cost: $${(data.cost || 0).toFixed(4)})\n`);
|
||||
this.updateStats();
|
||||
this.setRunning(false);
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('session:error', (e) => {
|
||||
const data = JSON.parse(e.data);
|
||||
this.appendOutput(`\n❌ Error: ${data.error}\n`, 'error');
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('scheduled:created', (e) => {
|
||||
const data = JSON.parse(e.data);
|
||||
this.currentRun = data;
|
||||
this.showTimer();
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('scheduled:updated', (e) => {
|
||||
const data = JSON.parse(e.data);
|
||||
this.currentRun = data;
|
||||
this.updateTimer();
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('scheduled:completed', (e) => {
|
||||
const data = JSON.parse(e.data);
|
||||
this.currentRun = data;
|
||||
this.hideTimer();
|
||||
this.appendOutput(`\n\n🎉 Scheduled run completed! Tasks: ${data.completedTasks}, Cost: $${data.totalCost.toFixed(4)}\n`);
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('scheduled:stopped', (e) => {
|
||||
const data = JSON.parse(e.data);
|
||||
this.currentRun = data;
|
||||
this.hideTimer();
|
||||
this.appendOutput(`\n\n⏹ Scheduled run stopped.\n`);
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('scheduled:log', (e) => {
|
||||
const data = JSON.parse(e.data);
|
||||
this.appendOutput(`\n${data.log}`);
|
||||
});
|
||||
}
|
||||
|
||||
setConnectionStatus(status) {
|
||||
const el = document.getElementById('connectionStatus');
|
||||
const dot = el.querySelector('.status-dot');
|
||||
const text = el.querySelector('span:last-child');
|
||||
|
||||
dot.className = 'status-dot ' + status;
|
||||
text.textContent = status === 'connected' ? 'Connected' : 'Disconnected';
|
||||
}
|
||||
|
||||
handleInit(data) {
|
||||
this.sessions.clear();
|
||||
data.sessions.forEach(s => this.sessions.set(s.id, s));
|
||||
|
||||
// Check for active scheduled run
|
||||
const activeRun = data.scheduledRuns.find(r => r.status === 'running');
|
||||
if (activeRun) {
|
||||
this.currentRun = activeRun;
|
||||
this.showTimer();
|
||||
}
|
||||
|
||||
// Calculate totals
|
||||
this.totalCost = data.sessions.reduce((sum, s) => sum + (s.totalCost || 0), 0);
|
||||
this.totalCost += data.scheduledRuns.reduce((sum, r) => sum + (r.totalCost || 0), 0);
|
||||
this.totalTasks = data.scheduledRuns.reduce((sum, r) => sum + (r.completedTasks || 0), 0);
|
||||
|
||||
this.updateStats();
|
||||
this.renderSessions();
|
||||
}
|
||||
|
||||
async loadState() {
|
||||
try {
|
||||
const res = await fetch('/api/status');
|
||||
const data = await res.json();
|
||||
this.handleInit(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to load state:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Actions
|
||||
async startRun() {
|
||||
const prompt = document.getElementById('promptInput').value.trim();
|
||||
const dir = document.getElementById('dirInput').value.trim();
|
||||
const duration = parseInt(document.getElementById('durationInput').value) || 0;
|
||||
|
||||
if (!prompt) {
|
||||
alert('Please enter a prompt');
|
||||
return;
|
||||
}
|
||||
|
||||
this.setRunning(true);
|
||||
this.clearOutput();
|
||||
this.appendOutput('Starting...\n\n');
|
||||
|
||||
try {
|
||||
if (duration > 0) {
|
||||
// Scheduled run with timer
|
||||
const res = await fetch('/api/scheduled', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
prompt,
|
||||
workingDir: dir || undefined,
|
||||
durationMinutes: duration
|
||||
})
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!data.success) {
|
||||
throw new Error(data.error);
|
||||
}
|
||||
} else {
|
||||
// Single run
|
||||
const res = await fetch('/api/run', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
prompt,
|
||||
workingDir: dir || undefined
|
||||
})
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!data.success) {
|
||||
throw new Error(data.error);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
this.appendOutput(`❌ Error: ${err.message}\n`, 'error');
|
||||
this.setRunning(false);
|
||||
}
|
||||
}
|
||||
|
||||
async stopCurrentRun() {
|
||||
if (!this.currentRun) return;
|
||||
|
||||
try {
|
||||
await fetch(`/api/scheduled/${this.currentRun.id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
} catch (err) {
|
||||
alert('Error stopping run: ' + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
setRunning(running) {
|
||||
const btn = document.getElementById('runBtn');
|
||||
if (running) {
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="loading"></span> Running...';
|
||||
} else {
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '<span class="btn-icon">▶</span> Run';
|
||||
}
|
||||
}
|
||||
|
||||
// Output
|
||||
appendOutput(text, type = '') {
|
||||
const container = document.getElementById('outputContainer');
|
||||
|
||||
// Remove placeholder if present
|
||||
const placeholder = container.querySelector('.output-placeholder');
|
||||
if (placeholder) {
|
||||
container.innerHTML = '';
|
||||
}
|
||||
|
||||
const span = document.createElement('span');
|
||||
span.className = type ? `msg-${type}` : '';
|
||||
span.textContent = text;
|
||||
container.appendChild(span);
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
|
||||
clearOutput() {
|
||||
const container = document.getElementById('outputContainer');
|
||||
container.innerHTML = `
|
||||
<div class="output-placeholder">
|
||||
<div class="placeholder-icon">💬</div>
|
||||
<div class="placeholder-text">Run a prompt to see Claude's output here</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Timer
|
||||
showTimer() {
|
||||
document.getElementById('timerBanner').style.display = 'block';
|
||||
this.updateTimer();
|
||||
}
|
||||
|
||||
hideTimer() {
|
||||
document.getElementById('timerBanner').style.display = 'none';
|
||||
this.currentRun = null;
|
||||
}
|
||||
|
||||
updateTimer() {
|
||||
if (!this.currentRun || this.currentRun.status !== 'running') return;
|
||||
|
||||
const now = Date.now();
|
||||
const remaining = Math.max(0, this.currentRun.endAt - now);
|
||||
const total = this.currentRun.endAt - this.currentRun.startedAt;
|
||||
const elapsed = now - this.currentRun.startedAt;
|
||||
const percent = Math.min(100, (elapsed / total) * 100);
|
||||
|
||||
document.getElementById('timerValue').textContent = this.formatTime(remaining);
|
||||
document.getElementById('timerProgress').style.width = `${percent}%`;
|
||||
document.getElementById('timerTasks').textContent = `${this.currentRun.completedTasks} tasks completed`;
|
||||
document.getElementById('timerCost').textContent = `$${this.currentRun.totalCost.toFixed(4)}`;
|
||||
}
|
||||
|
||||
startTimerUpdates() {
|
||||
setInterval(() => this.updateTimer(), 1000);
|
||||
}
|
||||
|
||||
formatTime(ms) {
|
||||
const totalSeconds = Math.floor(ms / 1000);
|
||||
const hours = Math.floor(totalSeconds / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
|
||||
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
// Stats
|
||||
updateStats() {
|
||||
document.getElementById('statCost').textContent = `$${this.totalCost.toFixed(2)}`;
|
||||
document.getElementById('statTasks').textContent = this.totalTasks;
|
||||
}
|
||||
|
||||
// Sessions
|
||||
toggleSessions() {
|
||||
const panel = document.getElementById('sessionsPanel');
|
||||
panel.classList.toggle('collapsed');
|
||||
this.sessionsCollapsed = panel.classList.contains('collapsed');
|
||||
}
|
||||
|
||||
renderSessions() {
|
||||
const count = this.sessions.size;
|
||||
document.getElementById('sessionCount').textContent = count;
|
||||
|
||||
const list = document.getElementById('sessionsList');
|
||||
|
||||
if (count === 0) {
|
||||
list.innerHTML = '<div style="padding: 1rem; color: var(--text-muted);">No active sessions</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = Array.from(this.sessions.values()).map(s => `
|
||||
<div class="session-card" data-session="${s.id}">
|
||||
<div class="session-card-header">
|
||||
<div class="session-status">
|
||||
<span class="session-status-dot ${s.status}"></span>
|
||||
<span>${s.id.slice(0, 8)}</span>
|
||||
</div>
|
||||
<span class="session-cost">$${(s.totalCost || 0).toFixed(4)}</span>
|
||||
</div>
|
||||
<div class="session-output" id="session-output-${s.id}">${this.escapeHtml(s.textOutput || '')}</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
updateSessionOutput(sessionId, text) {
|
||||
const el = document.getElementById(`session-output-${sessionId}`);
|
||||
if (el) {
|
||||
el.textContent += text;
|
||||
el.scrollTop = el.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
escapeHtml(text) {
|
||||
if (!text) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize
|
||||
const app = new ClaudemanApp();
|
||||
Reference in New Issue
Block a user