Phase 1: Activity and Error Log for Agent Tab
Backend: _log_agent_activity, _get_activity_log, _get_error_log. API: GET /api/agents/{id}/activity and /errors. Frontend: Activity and Errors tabs in agent detail overlay. CSS: activity-event-row, error-event-row. Config fix: Z.ai API key.
This commit is contained in:
Rose
777
static/panels.js
777
static/panels.js
@@ -1211,10 +1211,10 @@ let _settingsThemeOnOpen = null; // track theme at open time for discard revert
|
||||
let _settingsSection = 'conversation';
|
||||
|
||||
function switchSettingsSection(name){
|
||||
const section=(name==='preferences'||name==='system'||name==='gateways')?name:'conversation';
|
||||
const section=(name==='preferences'||name==='system'||name==='gateways'||name==='logs')?name:'conversation';
|
||||
_settingsSection=section;
|
||||
const map={conversation:'Conversation',preferences:'Preferences',system:'System',gateways:'Gateways'};
|
||||
['conversation','preferences','system','gateways'].forEach(key=>{
|
||||
const map={conversation:'Conversation',preferences:'Preferences',system:'System',gateways:'Gateways',logs:'Logs'};
|
||||
['conversation','preferences','system','gateways','logs'].forEach(key=>{
|
||||
const tab=$('settingsTab'+map[key]);
|
||||
const pane=$('settingsPane'+map[key]);
|
||||
const active=key===section;
|
||||
@@ -1224,6 +1224,7 @@ function switchSettingsSection(name){
|
||||
}
|
||||
if(pane) pane.classList.toggle('active',active);
|
||||
});
|
||||
if(section==='logs') loadLogsPanel();
|
||||
}
|
||||
|
||||
function _syncHermesPanelSessionActions(){
|
||||
@@ -1768,6 +1769,22 @@ async function deleteMCPriority(id) {
|
||||
// ── Agents Panel (Rose + Tier-2) ─────────────────────────────────────────────
|
||||
let _agentsInterval = null;
|
||||
let _selectedAgent = null;
|
||||
let _agentTab = 'overview'; // current tab in detail overlay
|
||||
|
||||
const STATUS_COLORS = { active: '#4caf50', idle: '#ff9800', offline: '#9e9e9e' };
|
||||
const STATUS_LABELS = { active: 'Active', idle: 'Idle', offline: 'Offline' };
|
||||
|
||||
function _relTime(ts) {
|
||||
if (!ts) return 'N/A';
|
||||
try {
|
||||
const d = new Date(ts);
|
||||
const diff = (Date.now() - d.getTime()) / 1000;
|
||||
if (diff < 60) return 'Just now';
|
||||
if (diff < 3600) return `${Math.floor(diff/60)}m ago`;
|
||||
if (diff < 86400) return `${Math.floor(diff/3600)}h ago`;
|
||||
return d.toLocaleDateString();
|
||||
} catch { return ts; }
|
||||
}
|
||||
|
||||
async function loadAgentsPanel() {
|
||||
clearInterval(_agentsInterval);
|
||||
@@ -1790,23 +1807,28 @@ function renderAgentsList(agents) {
|
||||
if (!box) return;
|
||||
|
||||
const html = agents.map(a => {
|
||||
const statusColor = a.running ? '#4caf50' : '#9e9e9e';
|
||||
const statusLabel = a.running ? 'Active' : 'Inactive';
|
||||
const color = STATUS_COLORS[a.status] || STATUS_COLORS.offline;
|
||||
const label = STATUS_LABELS[a.status] || 'Offline';
|
||||
const tierBadge = a.tier === 'orchestrator'
|
||||
? '<span class="agent-tier-badge tier-1">🌹 Tier-1</span>'
|
||||
: '<span class="agent-tier-badge tier-2">Tier-2</span>';
|
||||
const inboxBadge = a.inbox_count > 0
|
||||
? `<span style="background:#ff5722;color:white;border-radius:10px;padding:1px 6px;font-size:9px;font-weight:600">${a.inbox_count}</span>`
|
||||
? `<span class="agent-inbox-badge">${a.inbox_count}</span>`
|
||||
: '';
|
||||
return `<div class="agent-card" onclick="selectAgent('${a.id}')" style="cursor:pointer">
|
||||
const disabled = a.disabled ? 'opacity:0.5;' : '';
|
||||
return `<div class="agent-card${a.disabled ? ' agent-card-disabled' : ''}" onclick="openAgentDetail('${a.id}')" style="cursor:pointer;${disabled}">
|
||||
<div class="agent-card-left">
|
||||
<span style="font-size:24px;line-height:1">${a.emoji}</span>
|
||||
<span style="font-size:28px;line-height:1">${a.emoji}</span>
|
||||
</div>
|
||||
<div class="agent-card-body">
|
||||
<div class="agent-card-name">${esc(a.name)}</div>
|
||||
<div class="agent-card-domain">${esc(a.domain)}</div>
|
||||
<div class="agent-card-meta">
|
||||
<span class="agent-status-dot" style="background:${statusColor}"></span>
|
||||
<span style="color:${statusColor};font-size:10px">${statusLabel}</span>
|
||||
${a.tier === 'orchestrator' ? '<span style="opacity:0.5;font-size:9px;margin-left:4px">Tier 0</span>' : '<span style="opacity:0.5;font-size:9px;margin-left:4px">Tier 2</span>'}
|
||||
<span class="agent-status-dot" style="background:${color}"></span>
|
||||
<span style="color:${color};font-size:10px;font-weight:600">${label}</span>
|
||||
${tierBadge}
|
||||
</div>
|
||||
<div style="font-size:9px;color:var(--muted);margin-top:2px">${_relTime(a.last_activity)}</div>
|
||||
</div>
|
||||
<div class="agent-card-right">
|
||||
${inboxBadge}
|
||||
@@ -1818,88 +1840,517 @@ function renderAgentsList(agents) {
|
||||
box.innerHTML = html;
|
||||
}
|
||||
|
||||
async function selectAgent(agentId) {
|
||||
async function openAgentDetail(agentId) {
|
||||
_selectedAgent = agentId;
|
||||
// Highlight selected
|
||||
_agentTab = 'overview';
|
||||
|
||||
// Highlight card
|
||||
document.querySelectorAll('.agent-card').forEach(el => el.classList.remove('selected'));
|
||||
const cards = document.querySelectorAll('.agent-card');
|
||||
const agents_data = await api('/api/agents');
|
||||
const idx = agents_data.agents.findIndex(a => a.id === agentId);
|
||||
const agentsData = await api('/api/agents');
|
||||
const idx = agentsData.agents.findIndex(a => a.id === agentId);
|
||||
if (cards[idx]) cards[idx].classList.add('selected');
|
||||
|
||||
// Show inbox panel
|
||||
const inboxBox = $('agentInbox');
|
||||
const agentName = agents_data.agents[idx]?.name || agentId;
|
||||
const emoji = agents_data.agents[idx]?.emoji || '🤖';
|
||||
const domain = agents_data.agents[idx]?.domain || '';
|
||||
const box = $('agentInbox');
|
||||
|
||||
inboxBox.innerHTML = `
|
||||
<div class="inbox-header">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
|
||||
<span style="font-size:20px">${emoji}</span>
|
||||
<div>
|
||||
<div style="font-weight:600;font-size:13px">${esc(agentName)}</div>
|
||||
<div style="font-size:10px;opacity:0.5">${esc(domain)}</div>
|
||||
</div>
|
||||
<button onclick="closeAgentInbox()" style="margin-left:auto;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:6px;padding:4px 8px;cursor:pointer;color:var(--muted);font-size:11px">× Close</button>
|
||||
</div>
|
||||
<div style="color:var(--muted);font-size:11px;text-align:center;padding:20px">Loading inbox...</div>
|
||||
</div>
|
||||
`;
|
||||
inboxBox.style.display = 'block';
|
||||
|
||||
// Fetch inbox
|
||||
// Fetch full agent data
|
||||
let agent;
|
||||
try {
|
||||
const data = await api(`/api/agents/inbox/${agentId}`);
|
||||
renderAgentInbox(data);
|
||||
agent = await api(`/api/agents/${agentId}`);
|
||||
} catch(e) {
|
||||
inboxBox.innerHTML = `<div style="padding:12px;color:var(--accent);font-size:12px">Error: ${esc(e.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderAgentInbox(data) {
|
||||
const inboxBox = $('agentInbox');
|
||||
const agentName = data.agent_name || _selectedAgent;
|
||||
const messages = data.messages || [];
|
||||
|
||||
if (messages.length === 0) {
|
||||
inboxBox.innerHTML = `
|
||||
<div class="inbox-header">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
|
||||
<span style="font-size:18px">📭</span>
|
||||
<span style="font-weight:600;font-size:13px">${esc(agentName)} — Inbox</span>
|
||||
<button onclick="closeAgentInbox()" style="margin-left:auto;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:6px;padding:4px 8px;cursor:pointer;color:var(--muted);font-size:11px">× Close</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:24px;text-align:center;color:var(--muted);font-size:12px">
|
||||
<div style="font-size:28px;margin-bottom:8px">📭</div>
|
||||
<div>No messages in inbox</div>
|
||||
<div style="font-size:10px;margin-top:4px;opacity:0.5">Messages from other agents appear here</div>
|
||||
</div>
|
||||
`;
|
||||
box.innerHTML = `<div style="padding:16px;color:var(--accent)">Error loading agent: ${esc(e.message)}</div><div style="padding:16px"><button onclick="closeAgentInbox()" class="cron-btn">Close</button></div>`;
|
||||
box.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
inboxBox.innerHTML = `
|
||||
<div class="inbox-header">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
|
||||
<span style="font-size:18px">📥</span>
|
||||
<span style="font-weight:600;font-size:13px">${esc(agentName)} — Inbox</span>
|
||||
<span style="opacity:0.5;font-size:10px">(${messages.length} messages)</span>
|
||||
<button onclick="closeAgentInbox()" style="margin-left:auto;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:6px;padding:4px 8px;cursor:pointer;color:var(--muted);font-size:11px">× Close</button>
|
||||
const color = STATUS_COLORS[agent.status] || STATUS_COLORS.offline;
|
||||
const tierBadge = agent.tier === 'orchestrator'
|
||||
? '<span class="agent-tier-badge tier-1">🌹 Tier-1</span>'
|
||||
: '<span class="agent-tier-badge tier-2">Tier-2</span>';
|
||||
const lastAct = agent.last_activity ? new Date(agent.last_activity).toLocaleString() : 'N/A';
|
||||
const canEdit = agentId !== 'rose';
|
||||
|
||||
box.innerHTML = `
|
||||
<div class="agent-detail-header">
|
||||
<div class="agent-detail-title">
|
||||
<span style="font-size:28px">${agent.emoji}</span>
|
||||
<div>
|
||||
<div style="font-weight:700;font-size:15px">${esc(agent.name)}</div>
|
||||
<div style="font-size:10px;opacity:0.6">${esc(agent.domain)}</div>
|
||||
<div style="margin-top:4px">${tierBadge}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="closeAgentInbox()" style="background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--muted);font-size:12px;flex-shrink:0">× Close</button>
|
||||
</div>
|
||||
<div class="inbox-messages">
|
||||
${messages.map(m => {
|
||||
const ts = m.timestamp ? new Date(m.timestamp).toLocaleString() : '';
|
||||
const content = typeof m === 'string' ? m : (m.content || JSON.stringify(m));
|
||||
return `<div class="inbox-msg">
|
||||
<div class="inbox-msg-ts">${esc(ts)}</div>
|
||||
<div class="inbox-msg-content">${esc(String(content).slice(0, 300))}</div>
|
||||
</div>`;
|
||||
}).join('')}
|
||||
|
||||
<div class="agent-detail-status">
|
||||
<div class="agent-status-row">
|
||||
<span class="agent-status-dot lg" style="background:${color}"></span>
|
||||
<span style="color:${color};font-weight:600;font-size:12px">${STATUS_LABELS[agent.status] || 'Offline'}</span>
|
||||
${agent.pid ? `<span style="font-size:9px;color:var(--muted);margin-left:4px">PID ${agent.pid}</span>` : ''}
|
||||
</div>
|
||||
<div style="font-size:10px;color:var(--muted)">Last active: ${esc(lastAct)}</div>
|
||||
${agent.default_model ? `<div style="font-size:10px;color:var(--muted)">Model: ${esc(agent.default_model)}</div>` : ''}
|
||||
</div>
|
||||
|
||||
${agentId !== 'rose' ? `
|
||||
<div class="agent-toggle-row">
|
||||
<span style="font-size:11px;color:var(--muted)">Agent ${agent.disabled ? 'disabled' : 'enabled'}</span>
|
||||
<button class="agent-toggle-btn${agent.disabled ? '' : ' on'}" onclick="toggleAgentEnabled('${agentId}', ${!agent.disabled})">
|
||||
<span class="agent-toggle-knob"></span>
|
||||
</button>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div class="agent-detail-actions">
|
||||
<button class="agent-action-btn primary" onclick="chatWithAgent('${agentId}')">
|
||||
💬 Direct Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="agent-tabs">
|
||||
<button class="agent-tab${_agentTab==='overview'?' active':''}" onclick="switchAgentTab('overview')">Overview</button>
|
||||
<button class="agent-tab${_agentTab==='soul'?' active':''}" onclick="switchAgentTab('soul')">soul.md</button>
|
||||
<button class="agent-tab${_agentTab==='memory'?' active':''}" onclick="switchAgentTab('memory')">memory.md</button>
|
||||
<button class="agent-tab${_agentTab==='inbox'?' active':''}" onclick="switchAgentTab('inbox')">
|
||||
Inbox${agent.inbox_count > 0 ? ` <span class="agent-inbox-badge sm">${agent.inbox_count}</span>` : ''}
|
||||
</button>
|
||||
<button class="agent-tab${_agentTab==='activity'?' active':''}" onclick="switchAgentTab('activity')">Activity</button>
|
||||
<button class="agent-tab${_agentTab==='errors'?' active':''}" onclick="switchAgentTab('errors')">Errors</button>
|
||||
</div>
|
||||
|
||||
<div id="agentTabContent" class="agent-tab-content">
|
||||
<div style="color:var(--muted);font-size:12px;text-align:center;padding:20px">Loading...</div>
|
||||
</div>
|
||||
`;
|
||||
box.style.display = 'block';
|
||||
|
||||
// Load first tab content
|
||||
await switchAgentTab('overview');
|
||||
}
|
||||
|
||||
async function switchAgentTab(tab) {
|
||||
_agentTab = tab;
|
||||
const agentId = _selectedAgent;
|
||||
if (!agentId) return;
|
||||
|
||||
// Update tab buttons
|
||||
document.querySelectorAll('.agent-tab').forEach((el, i) => {
|
||||
const tabs = ['overview', 'soul', 'memory', 'inbox', 'activity', 'errors'];
|
||||
el.classList.toggle('active', tabs[i] === tab);
|
||||
});
|
||||
|
||||
const content = $('agentTabContent');
|
||||
|
||||
switch(tab) {
|
||||
case 'overview':
|
||||
await loadAgentOverview(agentId, content);
|
||||
break;
|
||||
case 'soul':
|
||||
await loadAgentSoul(agentId, content);
|
||||
break;
|
||||
case 'memory':
|
||||
await loadAgentMemory(agentId, content);
|
||||
break;
|
||||
case 'inbox':
|
||||
await loadAgentInboxTab(agentId, content);
|
||||
break;
|
||||
case 'activity':
|
||||
await loadAgentActivity(agentId, content);
|
||||
break;
|
||||
case 'errors':
|
||||
await loadAgentErrors(agentId, content);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAgentOverview(agentId, content) {
|
||||
try {
|
||||
const agent = await api(`/api/agents/${agentId}`);
|
||||
const color = STATUS_COLORS[agent.status] || STATUS_COLORS.offline;
|
||||
content.innerHTML = `
|
||||
<div class="agent-overview">
|
||||
<div class="agent-info-row">
|
||||
<span class="agent-info-label">Status</span>
|
||||
<span style="display:flex;align-items:center;gap:4px">
|
||||
<span class="agent-status-dot" style="background:${color}"></span>
|
||||
<span style="color:${color};font-size:11px;font-weight:600">${STATUS_LABELS[agent.status] || 'Offline'}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="agent-info-row">
|
||||
<span class="agent-info-label">Domain</span>
|
||||
<span style="font-size:11px">${esc(agent.domain)}</span>
|
||||
</div>
|
||||
<div class="agent-info-row">
|
||||
<span class="agent-info-label">Tier</span>
|
||||
<span style="font-size:11px">${agent.tier === 'orchestrator' ? '🌹 Orchestrator (Tier-1)' : 'Tier-2 Domain Agent'}</span>
|
||||
</div>
|
||||
<div class="agent-info-row">
|
||||
<span class="agent-info-label">Last Active</span>
|
||||
<span style="font-size:11px">${agent.last_activity ? new Date(agent.last_activity).toLocaleString() : 'N/A'}</span>
|
||||
</div>
|
||||
${agent.default_model ? `
|
||||
<div class="agent-info-row">
|
||||
<span class="agent-info-label">Model</span>
|
||||
<span style="font-size:11px;font-family:monospace">${esc(agent.default_model)}</span>
|
||||
</div>` : ''}
|
||||
${agent.inbox_count > 0 ? `
|
||||
<div class="agent-info-row">
|
||||
<span class="agent-info-label">Inbox</span>
|
||||
<span style="font-size:11px"><span class="agent-inbox-badge">${agent.inbox_count}</span> unread messages</span>
|
||||
</div>` : ''}
|
||||
${agent.pid ? `
|
||||
<div class="agent-info-row">
|
||||
<span class="agent-info-label">Process</span>
|
||||
<span style="font-size:11px;font-family:monospace">PID ${agent.pid}</span>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
`;
|
||||
} catch(e) {
|
||||
content.innerHTML = `<div style="padding:12px;color:var(--accent);font-size:12px">Error: ${esc(e.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAgentSoul(agentId, content) {
|
||||
const canEdit = agentId !== 'rose';
|
||||
try {
|
||||
const agent = await api(`/api/agents/${agentId}`);
|
||||
const soul = agent.soul || '';
|
||||
if (!soul) {
|
||||
content.innerHTML = `<div style="padding:16px;text-align:center;color:var(--muted);font-size:12px">
|
||||
<div style="font-size:24px;margin-bottom:8px">📄</div>
|
||||
<div>No soul.md found</div>
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
content.innerHTML = `
|
||||
<div id="soulView">
|
||||
${canEdit ? `<button class="agent-edit-btn" onclick="editAgentSoul('${agentId}')">✏️ Edit</button>` : ''}
|
||||
<div class="agent-md-content">${renderMarkdown(soul)}</div>
|
||||
</div>
|
||||
<div id="soulEdit" style="display:none">
|
||||
<textarea id="soulEditArea" rows="18" style="width:100%;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:8px;padding:10px;font-family:monospace;font-size:11px;line-height:1.6;resize:vertical;outline:none;box-sizing:border-box">${esc(soul)}</textarea>
|
||||
<div style="display:flex;gap:6px;margin-top:8px">
|
||||
<button class="cron-btn run" onclick="saveAgentSoul('${agentId}')">💾 Save</button>
|
||||
<button class="cron-btn" onclick="cancelEditSoul('${agentId}')">Cancel</button>
|
||||
</div>
|
||||
<div id="soulEditError" style="color:var(--accent);font-size:11px;margin-top:6px;display:none"></div>
|
||||
</div>
|
||||
`;
|
||||
} catch(e) {
|
||||
content.innerHTML = `<div style="padding:12px;color:var(--accent);font-size:12px">Error: ${esc(e.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAgentMemory(agentId, content) {
|
||||
const canEdit = agentId !== 'rose';
|
||||
try {
|
||||
const agent = await api(`/api/agents/${agentId}`);
|
||||
const memory = agent.memory || '';
|
||||
if (!memory) {
|
||||
content.innerHTML = `<div style="padding:16px;text-align:center;color:var(--muted);font-size:12px">
|
||||
<div style="font-size:24px;margin-bottom:8px">🧠</div>
|
||||
<div>No memory.md found</div>
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
content.innerHTML = `
|
||||
<div id="memoryView">
|
||||
${canEdit ? `<button class="agent-edit-btn" onclick="editAgentMemory('${agentId}')">✏️ Edit</button>` : ''}
|
||||
<div class="agent-md-content">${renderMarkdown(memory)}</div>
|
||||
</div>
|
||||
<div id="memoryEdit" style="display:none">
|
||||
<textarea id="memoryEditArea" rows="18" style="width:100%;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:8px;padding:10px;font-family:monospace;font-size:11px;line-height:1.6;resize:vertical;outline:none;box-sizing:border-box">${esc(memory)}</textarea>
|
||||
<div style="display:flex;gap:6px;margin-top:8px">
|
||||
<button class="cron-btn run" onclick="saveAgentMemory('${agentId}')">💾 Save</button>
|
||||
<button class="cron-btn" onclick="cancelEditMemory('${agentId}')">Cancel</button>
|
||||
</div>
|
||||
<div id="memoryEditError" style="color:var(--accent);font-size:11px;margin-top:6px;display:none"></div>
|
||||
</div>
|
||||
`;
|
||||
} catch(e) {
|
||||
content.innerHTML = `<div style="padding:12px;color:var(--accent);font-size:12px">Error: ${esc(e.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAgentInboxTab(agentId, content) {
|
||||
try {
|
||||
const data = await api(`/api/agents/${agentId}/inbox`);
|
||||
const messages = data.messages || [];
|
||||
const agentName = data.agent_name || agentId;
|
||||
|
||||
if (messages.length === 0) {
|
||||
content.innerHTML = `
|
||||
<div style="padding:24px;text-align:center;color:var(--muted);font-size:12px">
|
||||
<div style="font-size:28px;margin-bottom:8px">📭</div>
|
||||
<div>No messages in inbox</div>
|
||||
<div style="font-size:10px;margin-top:4px;opacity:0.6">Messages from other agents appear here</div>
|
||||
</div>
|
||||
<div style="padding:12px;border-top:1px solid var(--border)">
|
||||
<div style="font-size:10px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;font-weight:600">Send Message</div>
|
||||
<input id="msgToAgentSubject" placeholder="Subject" style="width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:6px 8px;font-size:11px;margin-bottom:4px;outline:none;box-sizing:border-box">
|
||||
<textarea id="msgToAgentBody" rows="3" placeholder="Message body..." style="width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:6px 8px;font-size:11px;margin-bottom:4px;resize:none;outline:none;font-family:inherit;box-sizing:border-box"></textarea>
|
||||
<button class="cron-btn run" style="width:100%" onclick="sendToAgent('${agentId}')">Send</button>
|
||||
<div id="sendToAgentError" style="color:var(--accent);font-size:11px;margin-top:4px;display:none"></div>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const msgsHtml = messages.map(m => {
|
||||
const ts = m.timestamp ? new Date(m.timestamp).toLocaleString() : '';
|
||||
const isUnread = m.status !== 'read';
|
||||
const typeColor = m.type === 'request' ? '#ff9800' : '#4caf50';
|
||||
const typeLabel = m.type === 'request' ? '📨 REQUEST' : '✅ REPLY';
|
||||
return `
|
||||
<div class="inbox-msg${isUnread ? ' unread' : ''}" onclick="toggleInboxMsg(this)">
|
||||
<div class="inbox-msg-header">
|
||||
<span style="font-size:9px;font-weight:700;color:${typeColor}">${typeLabel}</span>
|
||||
<span style="font-size:9px;color:var(--muted)">← ${esc(m.from || 'unknown')}</span>
|
||||
<span style="font-size:9px;color:var(--muted);margin-left:auto">${esc(ts)}</span>
|
||||
</div>
|
||||
<div class="inbox-msg-subject">${esc(m.subject || '(no subject)')}</div>
|
||||
<div class="inbox-msg-body">${esc(String(m.content || '').slice(0,200))}</div>
|
||||
<div class="inbox-msg-actions">
|
||||
${isUnread ? `<button class="cron-btn" style="padding:2px 8px;font-size:9px" onclick="event.stopPropagation();ackMsg('${agentId}','${m.id}')">✓ Acknowledge</button>` : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
||||
content.innerHTML = `
|
||||
<div class="inbox-messages-list">
|
||||
${msgsHtml}
|
||||
</div>
|
||||
<div style="padding:12px;border-top:1px solid var(--border);margin-top:8px">
|
||||
<div style="font-size:10px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;font-weight:600">Send Message</div>
|
||||
<input id="msgToAgentSubject" placeholder="Subject" style="width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:6px 8px;font-size:11px;margin-bottom:4px;outline:none;box-sizing:border-box">
|
||||
<textarea id="msgToAgentBody" rows="3" placeholder="Message body..." style="width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:6px 8px;font-size:11px;margin-bottom:4px;resize:none;outline:none;font-family:inherit;box-sizing:border-box"></textarea>
|
||||
<button class="cron-btn run" style="width:100%" onclick="sendToAgent('${agentId}')">Send</button>
|
||||
<div id="sendToAgentError" style="color:var(--accent);font-size:11px;margin-top:4px;display:none"></div>
|
||||
</div>
|
||||
`;
|
||||
} catch(e) {
|
||||
content.innerHTML = `<div style="padding:12px;color:var(--accent);font-size:12px">Error: ${esc(e.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAgentActivity(agentId, content) {
|
||||
try {
|
||||
const data = await api(`/api/agents/${agentId}/activity`);
|
||||
const events = data.events || [];
|
||||
|
||||
if (events.length === 0) {
|
||||
content.innerHTML = `
|
||||
<div style="padding:24px;text-align:center;color:var(--muted);font-size:12px">
|
||||
<div style="font-size:28px;margin-bottom:8px">📋</div>
|
||||
<div>No activity recorded yet</div>
|
||||
<div style="font-size:10px;margin-top:4px;opacity:0.6">Events like messages, tasks and updates appear here</div>
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const EVENT_COLORS = {
|
||||
'agent_started': '#4caf50',
|
||||
'agent_stopped': '#9e9e9e',
|
||||
'message_sent': '#2196f3',
|
||||
'message_received': '#00bcd4',
|
||||
'task_started': '#ff9800',
|
||||
'task_completed': '#4caf50',
|
||||
'task_failed': '#f44336',
|
||||
'soul_updated': '#9c27b0',
|
||||
'memory_updated': '#3f51b5',
|
||||
'chat_started': '#ff9800',
|
||||
'chat_ended': '#795548',
|
||||
'health_check': '#4caf50',
|
||||
'config_updated': '#607d8b',
|
||||
'error': '#f44336',
|
||||
};
|
||||
|
||||
const EVENT_ICONS = {
|
||||
'agent_started': '🟢',
|
||||
'agent_stopped': '⚫',
|
||||
'message_sent': '📤',
|
||||
'message_received': '📥',
|
||||
'task_started': '▶️',
|
||||
'task_completed': '✅',
|
||||
'task_failed': '❌',
|
||||
'soul_updated': '✏️',
|
||||
'memory_updated': '🧠',
|
||||
'chat_started': '💬',
|
||||
'chat_ended': '💬',
|
||||
'health_check': '❤️',
|
||||
'config_updated': '⚙️',
|
||||
'error': '⚠️',
|
||||
};
|
||||
|
||||
const rows = events.map(e => {
|
||||
const color = EVENT_COLORS[e.type] || '#9e9e9e';
|
||||
const icon = EVENT_ICONS[e.type] || '•';
|
||||
const ts = e.timestamp ? new Date(e.timestamp).toLocaleString() : 'N/A';
|
||||
const rel = e.timestamp ? _relTime(e.timestamp) : '';
|
||||
const details = e.details ? `<span style="font-size:10px;color:var(--muted);margin-left:6px">${esc(e.details)}</span>` : '';
|
||||
return `
|
||||
<div class="activity-event-row">
|
||||
<span style="font-size:14px;flex-shrink:0">${icon}</span>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap">
|
||||
<span style="font-size:10px;font-weight:600;color:${color}">${esc(e.type)}</span>
|
||||
${details}
|
||||
</div>
|
||||
<div style="font-size:9px;color:var(--muted)">${esc(ts)} · ${rel}</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
||||
content.innerHTML = `<div class="activity-list">${rows}</div>`;
|
||||
|
||||
} catch(e) {
|
||||
content.innerHTML = `<div style="padding:12px;color:var(--accent);font-size:12px">Error: ${esc(e.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAgentErrors(agentId, content) {
|
||||
try {
|
||||
const data = await api(`/api/agents/${agentId}/errors`);
|
||||
const errors = data.errors || [];
|
||||
|
||||
if (errors.length === 0) {
|
||||
content.innerHTML = `
|
||||
<div style="padding:24px;text-align:center;color:#4caf50;font-size:12px">
|
||||
<div style="font-size:28px;margin-bottom:8px">✅</div>
|
||||
<div>No errors recorded</div>
|
||||
<div style="font-size:10px;margin-top:4px;opacity:0.6">All good — this agent has no logged errors</div>
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const rows = errors.map(e => {
|
||||
const ts = e.timestamp ? new Date(e.timestamp).toLocaleString() : 'N/A';
|
||||
const rel = e.timestamp ? _relTime(e.timestamp) : '';
|
||||
return `
|
||||
<div class="error-event-row">
|
||||
<span style="font-size:14px;flex-shrink:0">⚠️</span>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="font-size:11px;color:#f44336;font-weight:600">${esc(e.details || 'Unknown error')}</div>
|
||||
<div style="font-size:9px;color:var(--muted)">${esc(ts)} · ${rel}</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
||||
content.innerHTML = `
|
||||
<div style="padding:8px 0 8px;font-size:10px;color:#f44336;margin-bottom:4px">
|
||||
⚠️ ${errors.length} error${errors.length !== 1 ? 's' : ''} total
|
||||
</div>
|
||||
<div class="error-list">${rows}</div>`;
|
||||
|
||||
} catch(e) {
|
||||
content.innerHTML = `<div style="padding:12px;color:var(--accent);font-size:12px">Error: ${esc(e.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleInboxMsg(el) {
|
||||
el.classList.toggle('expanded');
|
||||
}
|
||||
|
||||
// Edit handlers
|
||||
function editAgentSoul(agentId) {
|
||||
document.getElementById('soulView').style.display = 'none';
|
||||
document.getElementById('soulEdit').style.display = 'block';
|
||||
}
|
||||
|
||||
function cancelEditSoul(agentId) {
|
||||
document.getElementById('soulView').style.display = 'block';
|
||||
document.getElementById('soulEdit').style.display = 'none';
|
||||
}
|
||||
|
||||
async function saveAgentSoul(agentId) {
|
||||
const content = document.getElementById('soulEditArea').value;
|
||||
const errEl = document.getElementById('soulEditError');
|
||||
errEl.style.display = 'none';
|
||||
try {
|
||||
const r = await api(`/api/agents/${agentId}/soul`, { method: 'PUT', body: JSON.stringify({ content }) });
|
||||
if (!r.ok) throw new Error(r.error || 'Save failed');
|
||||
showToast('soul.md saved');
|
||||
await switchAgentTab('soul');
|
||||
} catch(e) {
|
||||
errEl.textContent = e.message;
|
||||
errEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
function editAgentMemory(agentId) {
|
||||
document.getElementById('memoryView').style.display = 'none';
|
||||
document.getElementById('memoryEdit').style.display = 'block';
|
||||
}
|
||||
|
||||
function cancelEditMemory(agentId) {
|
||||
document.getElementById('memoryView').style.display = 'block';
|
||||
document.getElementById('memoryEdit').style.display = 'none';
|
||||
}
|
||||
|
||||
async function saveAgentMemory(agentId) {
|
||||
const content = document.getElementById('memoryEditArea').value;
|
||||
const errEl = document.getElementById('memoryEditError');
|
||||
errEl.style.display = 'none';
|
||||
try {
|
||||
const r = await api(`/api/agents/${agentId}/memory`, { method: 'PUT', body: JSON.stringify({ content }) });
|
||||
if (!r.ok) throw new Error(r.error || 'Save failed');
|
||||
showToast('memory.md saved');
|
||||
await switchAgentTab('memory');
|
||||
} catch(e) {
|
||||
errEl.textContent = e.message;
|
||||
errEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
async function sendToAgent(agentId) {
|
||||
const subject = document.getElementById('msgToAgentSubject').value.trim();
|
||||
const body = document.getElementById('msgToAgentBody').value.trim();
|
||||
const errEl = document.getElementById('sendToAgentError');
|
||||
errEl.style.display = 'none';
|
||||
if (!body) { errEl.textContent = 'Message body is required'; errEl.style.display = 'block'; return; }
|
||||
try {
|
||||
const r = await api(`/api/agents/${agentId}/message`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ from: 'rose', type: 'request', subject, content: body }),
|
||||
});
|
||||
if (!r.ok) throw new Error(r.error || 'Send failed');
|
||||
showToast('Message sent');
|
||||
document.getElementById('msgToAgentSubject').value = '';
|
||||
document.getElementById('msgToAgentBody').value = '';
|
||||
await switchAgentTab('inbox');
|
||||
} catch(e) {
|
||||
errEl.textContent = e.message;
|
||||
errEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
async function ackMsg(agentId, msgId) {
|
||||
try {
|
||||
await api(`/api/agents/${agentId}/ack/${msgId}`, { method: 'POST' });
|
||||
await switchAgentTab('inbox');
|
||||
await refreshAgents();
|
||||
} catch(e) {
|
||||
showToast('Ack failed: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleAgentEnabled(agentId, enable) {
|
||||
try {
|
||||
const r = await api(`/api/agents/${agentId}/${enable ? 'enable' : 'disable'}`, { method: 'POST' });
|
||||
if (!r.ok) throw new Error(r.error || 'Toggle failed');
|
||||
showToast(`Agent ${enable ? 'enabled' : 'disabled'}`);
|
||||
await openAgentDetail(agentId);
|
||||
await refreshAgents();
|
||||
} catch(e) {
|
||||
showToast('Error: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function chatWithAgent(agentId) {
|
||||
localStorage.setItem('hermes.chat_agent', agentId);
|
||||
closeAgentInbox();
|
||||
switchPanel('chat');
|
||||
}
|
||||
|
||||
function closeAgentInbox() {
|
||||
@@ -1908,4 +2359,174 @@ function closeAgentInbox() {
|
||||
document.querySelectorAll('.agent-card').forEach(el => el.classList.remove('selected'));
|
||||
}
|
||||
|
||||
// Simple markdown renderer (bold, italic, code, headers, lists, linebreaks)
|
||||
function renderMarkdown(text) {
|
||||
if (!text) return '';
|
||||
return esc(text)
|
||||
.replace(/<(\/?)(pre|code|strong|b|em|i|li|ul|ol|h[1-6]|br|p)>/gi, '<$1$2>')
|
||||
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
||||
.replace(/\*(.+?)\*/g, '<em>$1</em>')
|
||||
.replace(/`(.+?)`/g, '<code style="background:rgba(255,255,255,.08);padding:1px 4px;border-radius:3px;font-size:.9em">$1</code>')
|
||||
.replace(/^### (.+)$/gm, '<h4 style="font-size:12px;font-weight:700;margin:8px 0 4px">$1</h3>')
|
||||
.replace(/^## (.+)$/gm, '<h3 style="font-size:13px;font-weight:700;margin:10px 0 4px">$1</h3>')
|
||||
.replace(/^# (.+)$/gm, '<h2 style="font-size:14px;font-weight:700;margin:12px 0 6px">$1</h2>')
|
||||
.replace(/^- (.+)$/gm, '<li style="margin-left:12px">$1</li>')
|
||||
.replace(/^(\d+)\. (.+)$/gm, '<li style="margin-left:12px;list-style:decimal">$2</li>')
|
||||
.replace(/\n/g, '<br>');
|
||||
}
|
||||
|
||||
// ── Logs Panel ────────────────────────────────────────────────────────────────
|
||||
let _currentLogFile = null;
|
||||
let _currentLogContent = '';
|
||||
let _currentLogLevel = 'all';
|
||||
let _currentLogSearch = '';
|
||||
let _logAutoRefreshInterval = null;
|
||||
|
||||
async function loadLogsPanel() {
|
||||
const el = $('logsFileList');
|
||||
if (!el) return;
|
||||
el.innerHTML = '<div style="color:var(--muted);font-size:12px;padding:8px">Loading...</div>';
|
||||
try {
|
||||
const data = await api('/api/logs');
|
||||
if (!data.logs) return;
|
||||
el.innerHTML = '';
|
||||
data.logs.forEach(log => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'logs-sidebar-item' + (log.missing ? ' missing' : '') + (_currentLogFile === log.name ? ' active' : '');
|
||||
item.onclick = () => { if (!log.missing) selectLog(log.name); };
|
||||
item.innerHTML = `
|
||||
<div class="logs-sidebar-name">${esc(log.name)}</div>
|
||||
<div class="logs-sidebar-meta">${log.missing ? 'Missing' : log.size_human + ' • ' + (log.modified ? _formatDate(log.modified) : 'Unknown')}</div>
|
||||
`;
|
||||
el.appendChild(item);
|
||||
});
|
||||
} catch(e) {
|
||||
el.innerHTML = '<div style="color:var(--accent);font-size:12px;padding:8px">Failed to load logs.</div>';
|
||||
}
|
||||
}
|
||||
|
||||
async function selectLog(name) {
|
||||
_currentLogFile = name;
|
||||
_currentLogLevel = 'all';
|
||||
_currentLogSearch = '';
|
||||
$('logsSearchInput').value = '';
|
||||
$('logsFileName').textContent = name;
|
||||
// Show toolbar controls
|
||||
$('logsSearchInput').style.display = '';
|
||||
$('logsLevelBtns').style.display = '';
|
||||
$('logsAutoRefreshLabel').style.display = '';
|
||||
$('btnRefreshLog').style.display = '';
|
||||
$('logsFooter').style.display = '';
|
||||
$('logsContent').innerHTML = '<div style="color:var(--muted);font-size:12px;padding:12px">Loading...</div>';
|
||||
// Reset level buttons
|
||||
document.querySelectorAll('.log-level-btn').forEach(b => b.classList.toggle('active', b.dataset.level === 'all'));
|
||||
try {
|
||||
const data = await api('/api/logs/' + encodeURIComponent(name));
|
||||
_currentLogContent = data.content || '';
|
||||
_applyLogFilter();
|
||||
} catch(e) {
|
||||
$('logsContent').innerHTML = '<div style="color:var(--accent);font-size:12px">Failed to load log.</div>';
|
||||
}
|
||||
// Update active state in list
|
||||
document.querySelectorAll('.logs-sidebar-item').forEach(el => {
|
||||
el.classList.toggle('active', el.querySelector('.logs-sidebar-name').textContent === name);
|
||||
});
|
||||
// Stop auto-refresh if running for different log
|
||||
if (_logAutoRefreshInterval) {
|
||||
clearInterval(_logAutoRefreshInterval);
|
||||
_logAutoRefreshInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
function _applyLogFilter() {
|
||||
let content = _currentLogContent;
|
||||
let lines = content.split('\n');
|
||||
|
||||
// Filter by level
|
||||
if (_currentLogLevel !== 'all') {
|
||||
const levelMap = { ERROR: ['ERROR', 'CRITICAL', 'FATAL'], WARN: ['WARNING', 'WARN'], INFO: ['INFO', 'DEBUG', 'TRACE'] };
|
||||
const allowed = levelMap[_currentLogLevel] || [_currentLogLevel];
|
||||
lines = lines.filter(line => allowed.some(l => line.toUpperCase().includes(l)));
|
||||
}
|
||||
|
||||
// Filter by search
|
||||
if (_currentLogSearch) {
|
||||
const q = _currentLogSearch.toLowerCase();
|
||||
lines = lines.filter(line => line.toLowerCase().includes(q));
|
||||
}
|
||||
|
||||
// Render
|
||||
const html = esc(lines.join('\n')) || '<span style="color:var(--muted)">(no matches)</span>';
|
||||
$('logsContent').innerHTML = html;
|
||||
|
||||
// Match count
|
||||
const total = _currentLogContent.split('\n').length;
|
||||
const shown = lines.length;
|
||||
$('logsMatchCount').textContent = _currentLogSearch || _currentLogLevel !== 'all'
|
||||
? `${shown} of ${total} lines shown`
|
||||
: `${total} lines`;
|
||||
}
|
||||
|
||||
function filterLogContent() {
|
||||
_currentLogSearch = $('logsSearchInput').value;
|
||||
_applyLogFilter();
|
||||
}
|
||||
|
||||
function setLogLevel(level) {
|
||||
_currentLogLevel = level;
|
||||
document.querySelectorAll('.log-level-btn').forEach(b => b.classList.toggle('active', b.dataset.level === level));
|
||||
_applyLogFilter();
|
||||
}
|
||||
|
||||
function toggleLogAutoRefresh() {
|
||||
const enabled = $('logsAutoRefresh').checked;
|
||||
if (enabled) {
|
||||
if (!_logAutoRefreshInterval) {
|
||||
_logAutoRefreshInterval = setInterval(() => refreshLog(), 5000);
|
||||
}
|
||||
} else {
|
||||
if (_logAutoRefreshInterval) {
|
||||
clearInterval(_logAutoRefreshInterval);
|
||||
_logAutoRefreshInterval = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshLog() {
|
||||
if (!_currentLogFile) return;
|
||||
try {
|
||||
const data = await api('/api/logs/' + encodeURIComponent(_currentLogFile));
|
||||
_currentLogContent = data.content || '';
|
||||
_applyLogFilter();
|
||||
// Auto-scroll to bottom if near bottom
|
||||
const pre = $('logsContent');
|
||||
if (pre.scrollHeight - pre.scrollTop - pre.clientHeight < 100) {
|
||||
pre.scrollTop = pre.scrollHeight;
|
||||
}
|
||||
} catch(e) {
|
||||
// Silent fail on auto-refresh
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshLogManual() {
|
||||
if (!_currentLogFile) return;
|
||||
try {
|
||||
const data = await api('/api/logs/' + encodeURIComponent(_currentLogFile));
|
||||
_currentLogContent = data.content || '';
|
||||
_applyLogFilter();
|
||||
const pre = $('logsContent');
|
||||
pre.scrollTop = pre.scrollHeight;
|
||||
showToast('Log refreshed');
|
||||
} catch(e) {
|
||||
showToast('Refresh failed');
|
||||
}
|
||||
}
|
||||
|
||||
function _formatDate(ts) {
|
||||
if (!ts) return '';
|
||||
const d = new Date(ts * 1000);
|
||||
return d.toLocaleDateString(undefined, {month:'short', day:'numeric'}) + ' ' +
|
||||
d.toLocaleTimeString(undefined, {hour:'2-digit', minute:'2-digit'});
|
||||
}
|
||||
|
||||
// Event wiring
|
||||
|
||||
Reference in New Issue
Block a user