= {};
if(model) body.default_model=model;
if(sendKey) body.send_key=sendKey;
body.theme=theme;
body.language=language;
body.show_token_usage=showTokenUsage;
body.show_cli_sessions=showCliSessions;
body.sync_to_insights=!!($('settingsSyncInsights') as HTMLInputElement | null)?.checked;
body.check_for_updates=!!($('settingsCheckUpdates') as HTMLInputElement | null)?.checked;
body.sound_enabled=!!($('settingsSoundEnabled') as HTMLInputElement | null)?.checked;
body.notifications_enabled=!!($('settingsNotificationsEnabled') as HTMLInputElement | null)?.checked;
body.bubble_layout=!!($('settingsBubbleLayout') as HTMLInputElement | null)?.checked;
document.body.classList.toggle('bubble-layout', body.bubble_layout as boolean);
const botName=((($('settingsBotName') as HTMLInputElement | null)?.value)||'').trim();
body.bot_name=botName||'Hermes';
const userEmoji=((($('settingsUserEmoji') as HTMLInputElement | null)?.value)||'').trim();
const userName=((($('settingsUserName') as HTMLInputElement | null)?.value)||'').trim();
body.user_emoji=userEmoji||'🙂';
body.user_name=userName||'You';
// Password: only act if the field has content; blank = leave auth unchanged
if(pw && pw.trim()){
try{
const saved=await api('/api/settings',{method:'POST',body:JSON.stringify({...body,_set_password:pw.trim()})});
_applySavedSettingsUi(saved, body, {sendKey,showTokenUsage,showCliSessions,theme,language});
showToast(t(saved.auth_just_enabled?'settings_saved_pw':'settings_saved_pw_updated'));
_hideSettingsPanel();
return;
}catch(e){showToast(t('settings_save_failed')+e.message);return;}
}
try{
const saved=await api('/api/settings',{method:'POST',body:JSON.stringify(body)});
_applySavedSettingsUi(saved, body, {sendKey,showTokenUsage,showCliSessions,theme,language});
showToast(t('settings_saved'));
_hideSettingsPanel();
}catch(e){
showToast(t('settings_save_failed')+e.message);
}
}
async function signOut(){
try{
await api('/api/auth/logout',{method:'POST',body:'{}'});
window.location.href='/login';
}catch(e){
showToast(t('sign_out_failed')+e.message);
}
}
async function disableAuth(){
const _disAuth=await showConfirmDialog({title:t('disable_auth_confirm_title'),message:t('disable_auth_confirm_message'),confirmLabel:t('disable'),danger:true,focusCancel:true});
if(!_disAuth) return;
try{
await api('/api/settings',{method:'POST',body:JSON.stringify({_clear_password:true})});
showToast(t('auth_disabled'));
// Hide both auth buttons since auth is now off
const disableBtn=$('btnDisableAuth');
if(disableBtn) disableBtn.style.display='none';
const signOutBtn=$('btnSignOut');
if(signOutBtn) signOutBtn.style.display='none';
}catch(e){
showToast(t('disable_auth_failed')+e.message);
}
}
// Close settings on overlay click (not panel click) -- with unsaved-changes check
document.addEventListener('click',e=>{
const overlay=$('settingsOverlay');
if(overlay&&e.target===overlay) _closeSettingsPanel();
});
// ── Cron completion alerts ────────────────────────────────────────────────────
let _cronPollSince=Date.now()/1000; // track from page load
let _cronPollTimer=null;
let _cronUnreadCount=0;
function startCronPolling(){
if(_cronPollTimer) return;
_cronPollTimer=setInterval(async()=>{
if(document.hidden) return; // don't poll when tab is in background
try{
const data=await api(`/api/crons/recent?since=${_cronPollSince}`);
if(data.completions&&data.completions.length>0){
for(const c of data.completions){
showToast(t('cron_completion_status', c.name, c.status==='error' ? t('status_failed') : t('status_completed')),4000);
_cronPollSince=Math.max(_cronPollSince,c.completed_at);
}
_cronUnreadCount+=data.completions.length;
updateCronBadge();
}
}catch(e){}
},30000);
}
function updateCronBadge(){
const tab=document.querySelector('.nav-tab[data-panel="tasks"]');
if(!tab) return;
let badge=tab.querySelector('.cron-badge');
if(_cronUnreadCount>0){
if(!badge){
badge=document.createElement('span') as unknown as Element;
badge.className='cron-badge';
tab.style.position='relative';
tab.appendChild(badge as Node);
}
badge.textContent=String(_cronUnreadCount>9?'9+':_cronUnreadCount);
badge.style.display='';
}else if(badge){
badge.style.display='none';
}
}
// Clear cron badge when Tasks tab is opened, load Projects panel
// (original switchPanel handles all panel logic - no override needed)
// Start polling on page load
startCronPolling();
// ── Background agent error tracking ──────────────────────────────────────────
const _backgroundErrors=[]; // {session_id, title, message, ts}
function trackBackgroundError(sessionId, title, message){
// Only track if user is NOT currently viewing this session
if(S.session&&S.session.session_id===sessionId) return;
_backgroundErrors.push({session_id:sessionId, title:title||t('untitled'), message, ts:Date.now()});
showErrorBanner();
}
function showErrorBanner(){
let banner=$('bgErrorBanner');
if(!banner){
banner=document.createElement('div');
banner.id='bgErrorBanner';
banner.className='bg-error-banner';
const msgs=document.querySelector('.messages');
if(msgs) msgs.insertAdjacentElement('beforebegin', banner as unknown as Element); else document.body.appendChild(banner);
}
const latest=_backgroundErrors[0]; // FIFO: show oldest (first) error
if(!latest){banner.style.display='none';return;}
const count=_backgroundErrors.length;
const msg=count>1?t('bg_error_multi',count):t('bg_error_single',latest.title);
banner.innerHTML=`\u26a0 ${esc(msg)}`;
banner.style.display='';
}
function navigateToErrorSession(){
const latest=_backgroundErrors.shift(); // FIFO: show oldest error first
if(latest){
loadSession(latest.session_id);renderSessionList();
}
if(_backgroundErrors.length===0) dismissErrorBanner();
else showErrorBanner();
}
function dismissErrorBanner(){
_backgroundErrors.length=0;
const banner=$('bgErrorBanner');
if(banner) banner.style.display='none';
}
// ── Mission Control panel ──
let _mcInterval = null;
async function loadMissionControl() {
clearInterval(_mcInterval);
await refreshMC();
_mcInterval = setInterval(refreshMC, 15000);
}
async function refreshMC() {
const [statusRes, tasksRes, feedRes, prioritiesRes] = await Promise.all([
api('/api/mc/status'),
api('/api/mc/tasks'),
api('/api/mc/feed?limit=10'),
api('/api/mc/priorities'),
]);
const status = statusRes;
const tasks = tasksRes.tasks || [];
const feed = feedRes.feed || [];
const priorities = prioritiesRes.priorities || [];
// ── Health Badge ──
const h = status.dashboard_health || 'empty';
const healthColors = { healthy: '#4caf50', active: '#ff9800', warning: '#ff5722', empty: '#9e9e9e', ok: '#4caf50' };
const healthLabels = { healthy: 'Healthy', active: 'Active', warning: 'Warning', empty: 'No Data', ok: 'OK' };
const $hb = $('mcHealthBadge');
$hb.textContent = healthLabels[h] || 'Unknown';
$hb.style.color = healthColors[h] || '#9e9e9e';
$hb.style.background = (healthColors[h] || '#9e9e9e') + '22';
// ── Stats Cards ──
const totalTasks = tasks.length;
const doneTasks = tasks.filter(t => t.status === 'done').length;
const progressPct = totalTasks > 0 ? Math.round((doneTasks / totalTasks) * 100) : 0;
$('mcTasksCount').textContent = `${doneTasks}/${totalTasks}`;
$('mcTasksLabel').textContent = `${doneTasks} done · ${totalTasks - doneTasks} open`;
$('mcPrioritiesCount').textContent = priorities.length;
$('mcPrioritiesLabel').textContent = `${priorities.filter(p => p.done).length} done`;
// ── Progress Bar ──
$('mcProgressBar').style.width = progressPct + '%';
$('mcProgressPct').textContent = progressPct + '%';
// ── Priority Filters ──
const priorityMap = {};
priorities.forEach(p => { priorityMap[p.id] = p; });
const priorityEmoji = { 1: '🔴', 2: '🟠', 3: '🟡', 4: '🟢' };
const pfEl = $('mcPriorityFilters');
pfEl.innerHTML = [
``,
...priorities.map(p =>
``
)
].join('');
// ── Tasks List ──
const listEl = $('mcTasksList');
const activeFilter = window._mcPriorityFilter || 'all';
const filteredTasks = activeFilter === 'all' ? tasks : tasks.filter(t => t.priority === activeFilter);
if (filteredTasks.length === 0) {
listEl.innerHTML = 'No tasks yet.
Add one above ↑
';
} else {
const statusMeta = {
backlog: { icon: '○', color: 'var(--muted)', label: 'Backlog' },
progress: { icon: '◐', color: '#ff9800', label: 'In Progress' },
done: { icon: '●', color: '#4caf50', label: 'Done' }
};
listEl.innerHTML = filteredTasks.map(t => {
const meta = statusMeta[t.status] || statusMeta.backlog;
const p = priorityMap[t.priority] || { name: 'Unknown', color: '#808080' };
const emoji = priorityEmoji[t.priority] || '•';
return `
${meta.icon}
${esc(t.title)}
${meta.label}
${emoji} ${esc(p.name)}
`;
}).join('');
}
// ── Feed ──
const feedEl = $('mcFeed');
if (feed.length === 0) {
feedEl.innerHTML = 'No recent activity
';
} else {
feedEl.innerHTML = feed.map(f => {
const d = new Date(f.timestamp);
const time = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
return `
${esc(f.event)}
${time}
`;
}).join('');
}
}
function toggleMCTask(id, currentStatus) {
const next = currentStatus === 'done' ? 'backlog' : currentStatus === 'backlog' ? 'progress' : 'done';
updateMCTask(id, next);
}
function filterMCTasks(priorityId) {
window._mcPriorityFilter = priorityId;
refreshMC();
}
async function createMCTask() {
const title = $('mcNewTaskTitle').value.trim();
if (!title) return;
const priority = parseInt($('mcNewTaskPriority').value);
const status = $('mcNewTaskStatus').value;
$('mcNewTaskTitle').value = '';
await api('/api/mc/task/create', { method: 'POST', body: JSON.stringify({ title, priority, status }) });
await refreshMC();
}
async function updateMCTask(id, status) {
await api('/api/mc/task/update', { method: 'POST', body: JSON.stringify({ id, status }) });
await refreshMC();
}
// ── Priority Management ──
async function createMCPriority() {
const name = prompt('Priority name:');
if (!name) return;
const color = prompt('Color (hex, e.g. #ff0000):', '#808080');
if (!color) return;
await api('/api/mc/priority/create', { method: 'POST', body: JSON.stringify({ name, color }) });
await refreshMC();
}
async function deleteMCPriority(id) {
if (!confirm('Delete this priority?')) return;
await api('/api/mc/priority/delete', { method: 'POST', body: JSON.stringify({ id }) });
await refreshMC();
}
// ── 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 _relTimeAgent(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);
await refreshAgents();
_agentsInterval = setInterval(refreshAgents, 15000);
}
async function refreshAgents() {
try {
const data = await api('/api/agents');
renderAgentsList(data.agents || []);
} catch(e) {
const box = $('agentsList');
if (box) box.innerHTML = `Error: ${esc(e.message)}
`;
}
}
function renderAgentsList(agents) {
const box = $('agentsList');
if (!box) return;
const html = agents.map(a => {
const color = STATUS_COLORS[a.status] || STATUS_COLORS.offline;
const label = STATUS_LABELS[a.status] || 'Offline';
const tierBadge = a.tier === 'orchestrator'
? '🌹 Tier-1'
: 'Tier-2';
const inboxBadge = a.inbox_count > 0
? `${a.inbox_count}`
: '';
const disabled = a.disabled ? 'opacity:0.5;' : '';
return `
${a.emoji}
${esc(a.name)}
${esc(a.domain)}
${label}
${tierBadge}
${_relTime(a.last_activity)}
${inboxBadge}
›
`;
}).join('');
box.innerHTML = html;
}
async function openAgentDetail(agentId) {
_selectedAgent = agentId;
_agentTab = 'overview';
// Highlight card
document.querySelectorAll('.agent-card').forEach(el => el.classList.remove('selected'));
const cards = document.querySelectorAll('.agent-card');
const agentsData = await api('/api/agents');
const idx = agentsData.agents.findIndex(a => a.id === agentId);
if (cards[idx]) cards[idx].classList.add('selected');
const box = $('agentInbox');
// Fetch full agent data
let agent;
try {
agent = await api(`/api/agents/${agentId}`);
} catch(e) {
box.innerHTML = `Error loading agent: ${esc(e.message)}
`;
box.style.display = 'block';
return;
}
const color = STATUS_COLORS[agent.status] || STATUS_COLORS.offline;
const tierBadge = agent.tier === 'orchestrator'
? '🌹 Tier-1'
: 'Tier-2';
const lastAct = agent.last_activity ? new Date(agent.last_activity).toLocaleString() : 'N/A';
const canEdit = agentId !== 'rose';
box.innerHTML = `
${STATUS_LABELS[agent.status] || 'Offline'}
${agent.pid ? `PID ${agent.pid}` : ''}
Last active: ${esc(lastAct)}
${agent.default_model ? `
Model: ${esc(agent.default_model)}
` : ''}
${agentId !== 'rose' ? `
Agent ${agent.disabled ? 'disabled' : 'enabled'}
` : ''}
`;
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', 'chat', 'tasks', 'bus', 'usage', 'topology'];
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;
case 'chat':
await loadAgentChatHistory(agentId, content);
break;
case 'tasks':
await loadAgentTasks(agentId, content);
break;
case 'bus':
await loadAgentBus(agentId, content);
break;
case 'usage':
await loadAgentUsage(agentId, content);
break;
case 'topology':
await loadAgentTopology(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 = `
Status
${STATUS_LABELS[agent.status] || 'Offline'}
Domain
${esc(agent.domain)}
Tier
${agent.tier === 'orchestrator' ? '🌹 Orchestrator (Tier-1)' : 'Tier-2 Domain Agent'}
Last Active
${agent.last_activity ? new Date(agent.last_activity).toLocaleString() : 'N/A'}
${agent.default_model ? `
Model
${esc(agent.default_model)}
` : ''}
${agent.inbox_count > 0 ? `
Inbox
${agent.inbox_count} unread messages
` : ''}
${agent.pid ? `
Process
PID ${agent.pid}
` : ''}
`;
// Fetch health metrics in parallel
try {
const health = await api(`/api/agents/${agentId}/health`);
if (!health.error && health.status !== 'offline') {
const memBar = health.memory_mb > 0 ? `` : '';
const uptime = health.uptime_seconds > 0 ? _formatUptime(health.uptime_seconds) : 'N/A';
content.innerHTML += `
System Health
CPU
${health.cpu_percent}%
Memory
${health.memory_mb} MB ${memBar}
Threads
${health.threads}
`;
}
} catch(e) {}
} catch(e) {
content.innerHTML = `Error: ${esc(e.message)}
`;
}
}
function _formatUptime(seconds) {
if (!seconds || seconds <= 0) return 'N/A';
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
return h > 0 ? `${h}h ${m}m` : `${m}m`;
}
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 = ``;
return;
}
content.innerHTML = `
${canEdit ? `
` : ''}
${renderMarkdown(soul)}
Error: ${esc(e.message)}
`;
}
}
async function loadAgentMemory(agentId, content) {
const canEdit = agentId !== 'rose';
// Fetch memory.md + render search bar
try {
const agent = await api(`/api/agents/${agentId}`);
const memory = agent.memory || '';
content.innerHTML = `
${canEdit ? `
` : ''}
${memory ? renderMarkdown(memory) : '
No memory.md found
'}
Error: ${esc(e.message)}
`;
}
}
async function searchAgentMemory(agentId) {
const q = document.getElementById('memSearchInput').value.trim();
const resultsBox = document.getElementById('memSearchResults');
if (!q) return;
resultsBox.style.display = '';
resultsBox.innerHTML = `Searching...
`;
try {
const endpoint = agentId === 'rose'
? `/api/agents/memory/search?q=${encodeURIComponent(q)}`
: `/api/agents/${agentId}/memory/search?q=${encodeURIComponent(q)}`;
const data = await api(endpoint);
const results = data.results || [];
if (!results.length) {
resultsBox.innerHTML = `No results for "${esc(q)}"
`;
return;
}
resultsBox.innerHTML = `
${results.length} result${results.length!==1?'s':''}
${results.map(r => `
${esc(r.topic)}
${(r.confidence*100).toFixed(0)}%
${r.agent ? 'Agent: '+esc(r.agent)+' · ' : ''}Topic: ${esc(r.topic)}
${esc((r.content||'').slice(0,200))}
`).join('')}
`;
} catch(e) {
resultsBox.innerHTML = `Error: ${esc(e.message)}
`;
}
}
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 = `
📭
No messages in inbox
Messages from other agents appear here
`;
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 `
${esc(m.subject || '(no subject)')}
${esc(String(m.content || '').slice(0,200))}
${isUnread ? `` : ''}
`;
}).join('');
content.innerHTML = `
${msgsHtml}
`;
} catch(e) {
content.innerHTML = `Error: ${esc(e.message)}
`;
}
}
async function loadAgentActivity(agentId, content) {
try {
const data = await api(`/api/agents/${agentId}/activity`);
const events = data.events || [];
if (events.length === 0) {
content.innerHTML = `
📋
No activity recorded yet
Events like messages, tasks and updates appear here
`;
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 ? `${esc(e.details)}` : '';
return `
${icon}
${esc(e.type)}
${details}
${esc(ts)} · ${rel}
`;
}).join('');
content.innerHTML = `${rows}
`;
} catch(e) {
content.innerHTML = `Error: ${esc(e.message)}
`;
}
}
async function loadAgentErrors(agentId, content) {
try {
const data = await api(`/api/agents/${agentId}/errors`);
const errors = data.errors || [];
if (errors.length === 0) {
content.innerHTML = `
✅
No errors recorded
All good — this agent has no logged errors
`;
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 `
⚠️
${esc(e.details || 'Unknown error')}
${esc(ts)} · ${rel}
`;
}).join('');
content.innerHTML = `
⚠️ ${errors.length} error${errors.length !== 1 ? 's' : ''} total
${rows}
`;
} catch(e) {
content.innerHTML = `Error: ${esc(e.message)}
`;
}
}
function toggleInboxMsg(el) {
el.classList.toggle('expanded');
}
async function loadAgentChatHistory(agentId, content) {
try {
const data = await api(`/api/agents/${agentId}/chat-history`);
const sessions = data.sessions || [];
if (sessions.length === 0) {
content.innerHTML = `
💬
No chat history yet
Your conversations with ${agentId} appear here
`;
return;
}
const rows = sessions.map(s => {
const created = s.created_at ? new Date(s.created_at).toLocaleString() : 'N/A';
const rel = s.created_at ? _relTime(s.created_at) : '';
const model = s.model || 'unknown';
return `
${esc(s.title)}
${created} · ${rel}
${esc(model)}
${s.message_count} msgs
`;
}).join('');
content.innerHTML = `${rows}
`;
} catch(e) {
content.innerHTML = `Error: ${esc(e.message)}
`;
}
}
function openAgentChatSession(agentId, sessionId) {
// Switch to the chat panel and load this session
closeAgentDetail();
if (typeof switchToChatPanel === 'function') switchToChatPanel();
if (typeof loadSession === 'function') loadSession(sessionId);
showToast(`Loading chat session...`);
}
async function loadAgentTasks(agentId, content) {
try {
const data = await api(`/api/agents/${agentId}/tasks`);
const tasks = data.tasks || [];
if (tasks.length === 0) {
content.innerHTML = `
📋
No tasks in queue
Tasks will appear here when agents are working on something
`;
return;
}
const TASK_STATUS_COLORS = { 'running': '#4caf50', 'queued': '#ff9800', 'completed': '#9e9e9e', 'failed': '#f44336' };
const rows = tasks.map(t => {
const color = TASK_STATUS_COLORS[t.status] || '#9e9e9e';
const ts = t.created_at ? new Date(t.created_at).toLocaleString() : '';
return `
${esc(t.description || 'Task')}
${esc(ts)} · ${esc(t.status)}
`;
}).join('');
content.innerHTML = `
${tasks.length} task${tasks.length !== 1 ? 's' : ''}
${rows}
`;
} catch(e) {
content.innerHTML = `Error: ${esc(e.message)}
`;
}
}
async function loadAgentBus(agentId, content) {
try {
const data = await api(`/api/agents/message-bus`);
const bus = data.bus || {};
// Collect all messages across agents, filter to those involving agentId
const allMsgs = [];
for (const [aId, aData] of Object.entries(bus)) {
const msgs = (aData as any).messages || [];
for (const m of msgs) {
if (m.from === agentId || m.to === agentId) {
allMsgs.push({ ...m, _agent: aId });
}
}
}
// Sort newest first
allMsgs.sort((a, b) => (b.timestamp || '').localeCompare(a.timestamp || ''));
if (allMsgs.length === 0) {
content.innerHTML = `
🚌
No messages in the bus
Messages between agents appear here
`;
return;
}
const rows = allMsgs.map(m => {
const ts = m.timestamp ? new Date(m.timestamp).toLocaleString() : 'N/A';
const rel = m.timestamp ? _relTime(m.timestamp) : '';
const isOutgoing = m.from === agentId;
const dirIcon = isOutgoing ? '📤' : '📥';
const dirLabel = isOutgoing ? `→ ${m.to}` : `← ${m.from}`;
const typeColor = m.type === 'request' ? '#ff9800' : '#4caf50';
return `
${dirIcon}
${esc(m.type || '').toUpperCase()}
${dirLabel}
${esc(ts)} · ${rel}
${esc(m.subject || '(no subject)')}
${esc(String(m.content || '').slice(0, 120))}
`;
}).join('');
content.innerHTML = `
${rows}
`;
} catch(e) {
content.innerHTML = `Error: ${esc(e.message)}
`;
}
}
async function sendBusMessage(toAgent) {
const subject = document.getElementById('busSubject').value.trim();
const content = document.getElementById('busContent').value.trim();
if (!subject && !content) {
showToast('Please enter a subject or message');
return;
}
try {
const r = await api(`/api/agents/${toAgent}/bus-message`, {
method: 'POST',
body: JSON.stringify({ from_agent: 'rose', subject, content }),
});
if (!r.ok) throw new Error(r.error || 'Send failed');
showToast('Message sent via bus');
document.getElementById('busSubject').value = '';
document.getElementById('busContent').value = '';
// Refresh
await switchAgentTab('bus');
} catch(e) {
showToast('Error: ' + e.message);
}
}
async function loadAgentTopology(agentId, content) {
const agents = [
{ id: 'rose', name: 'rose', emoji: '🌹', tier: 'orchestrator', x: 0, y: 0 },
{ id: 'lotus', name: 'lotus', emoji: '🪷', tier: 'tier2', x: 0, y: -1 },
{ id: 'forget-me-not', name: 'forget-me-not', emoji: '🌼', tier: 'tier2', x: 0.7, y: -0.7 },
{ id: 'sunflower', name: 'sunflower', emoji: '🌻', tier: 'tier2', x: -1, y: 0 },
{ id: 'iris', name: 'iris', emoji: '⚜️', tier: 'tier2', x: 0, y: 1 },
{ id: 'ivy', name: 'ivy', emoji: '🌿', tier: 'tier2', x: -0.7, y: 0.7 },
{ id: 'dandelion', name: 'dandelion', emoji: '🛡️', tier: 'tier2', x: 0.7, y: 0.7 },
{ id: 'root', name: 'root', emoji: '🌳', tier: 'tier2', x: 0, y: 0.7 }
];
const connections = [
{ from: 'rose', to: 'lotus' },
{ from: 'rose', to: 'forget-me-not' },
{ from: 'rose', to: 'sunflower' },
{ from: 'rose', to: 'iris' },
{ from: 'rose', to: 'ivy' },
{ from: 'rose', to: 'dandelion' },
{ from: 'rose', to: 'root' },
{ from: 'lotus', to: 'forget-me-not' },
{ from: 'sunflower', to: 'lotus' },
{ from: 'iris', to: 'rose' },
{ from: 'ivy', to: 'rose' },
{ from: 'dandelion', to: 'rose' },
{ from: 'root', to: 'rose' }
];
const scale = 80;
let svg = '';
content.innerHTML = '' + svg + '
';
}
async function loadAgentUsage(agentId, content) {
try {
const data = await api(`/api/agents/${agentId}/usage`);
if (data.error) {
content.innerHTML = `${esc(data.error)}
`;
return;
}
const fmt = (n) => n.toLocaleString();
const fmtCost = (c) => '$' + c.toFixed(4);
const historyRows = (data.history || []).slice(0, 14).map(h => `
| ${esc(h.date)} |
${fmt(h.total_tokens || 0)} |
${fmt(h.prompt_tokens || 0)} |
${fmt(h.completion_tokens || 0)} |
${fmtCost(h.cost_usd || 0)} |
`).join('');
content.innerHTML = `
Today
${fmt(data.today.tokens)}
${fmtCost(data.today.cost)}
This Week
${fmt(data.week.tokens)}
${fmtCost(data.week.cost)}
This Month
${fmt(data.month.tokens)}
${fmtCost(data.month.cost)}
${historyRows ? `
Recent History
| Date |
Total |
Prompt |
Completion |
Cost |
${historyRows}
` : `
📊
No usage data recorded yet
Token usage will appear here once recorded
`}
`;
} catch(e) {
content.innerHTML = `Failed to load usage: ${esc(e.message)}
`;
}
}
// 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() {
$('agentInbox').style.display = 'none';
_selectedAgent = null;
document.querySelectorAll('.agent-card').forEach(el => el.classList.remove('selected'));
}
// ── Agent Selector (Chat) ─────────────────────────────────────────────────────
let _agentSelectorOpen = false;
async function toggleAgentSelectorDropdown() {
const dd = $('agentSelectorDropdown');
if (_agentSelectorOpen) {
dd.style.display = 'none';
_agentSelectorOpen = false;
return;
}
_agentSelectorOpen = true;
await renderAgentSelectorDropdown();
dd.style.display = 'block';
}
async function renderAgentSelectorDropdown() {
const dd = $('agentSelectorDropdown');
const current = localStorage.getItem('hermes.chat_agent') || 'rose';
// Rose always first
const agents = [
{ id: 'rose', name: 'Rose', emoji: '🌹', domain: 'Orchestrator & Main Interface', color: '#f44336' },
];
// Add Tier-2 agents
try {
const data = await api('/api/agents');
if (data.agents) {
for (const a of data.agents) {
if (a.id !== 'rose') {
agents.push({ id: a.id, name: a.name, emoji: a.emoji, domain: a.domain, color: a.color || '#888' });
}
}
}
} catch(e) {}
dd.innerHTML = agents.map(a => `
`).join('');
// Add active style
const style = document.createElement('style');
style.textContent = `.agent-sel-item:hover{background:var(--hover)}.agent-sel-item.active{background:rgba(255,255,255,.06)}`;
if (!document.querySelector('#agent-sel-styles')) {
style.id = 'agent-sel-styles';
document.head.appendChild(style);
}
}
function selectChatAgent(agentId) {
$('agentSelectorDropdown').style.display = 'none';
_agentSelectorOpen = false;
// Use the existing composer selector logic (syncs session + localStorage + UI)
if (typeof selectAgentFromDropdown === 'function') {
selectAgentFromDropdown(agentId);
} else {
// Fallback
localStorage.setItem('hermes.chat_agent', agentId);
localStorage.setItem('hermes-webui-agent', agentId);
const sel = $('agentSelect');
if (sel && Array.from((sel as unknown as HTMLSelectElement).options).some(o => o.value === agentId)) {
(sel as unknown as HTMLSelectElement).value = agentId;
}
if (typeof syncAgentChip === 'function') syncAgentChip();
}
// Update topbar display
updateAgentSelectorDisplay();
// Switch to new session for agent-specific chat (clear old messages)
if (agentId !== 'rose') {
switchToAgentChat(agentId);
}
}
async function switchToAgentChat(agentId) {
// Create a fresh session for this agent
if (typeof newSession === 'function') {
await newSession();
}
// Update topbar title to show agent context
const topMeta = $('topbarMeta');
if (topMeta && AGENT_META && AGENT_META[agentId]) {
const meta = AGENT_META[agentId];
topMeta.textContent = `Chatting with ${meta.emoji} ${meta.name}`;
}
}
async function updateAgentSelectorDisplay() {
const agentId = localStorage.getItem('hermes.chat_agent') || 'rose';
const icon = $('agentSelectorIcon');
const label = $('agentSelectorLabel');
if (agentId === 'rose') {
icon.textContent = '🌹';
label.textContent = 'Rose';
} else {
try {
const data = await api(`/api/agents/${agentId}`);
if (data.agent) {
icon.textContent = data.agent.emoji || '🤖';
label.textContent = data.agent.name || agentId;
}
} catch(e) {
label.textContent = agentId;
}
}
}
async function showAgentChatMode(agentId) {
// Switch main chat to agent-specific mode
// For now, just reload the chat panel
if (typeof switchPanel === 'function') {
switchPanel('chat');
}
// Reload messages to show agent context
if (typeof loadSession === 'function') {
await loadSession(S.session?.session_id);
}
}
// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
const wrap = $('agentSelectorWrap');
if (wrap && !wrap.contains(e.target as Node) && _agentSelectorOpen) {
$('agentSelectorDropdown').style.display = 'none';
_agentSelectorOpen = false;
}
});
// 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, '$1')
.replace(/\*(.+?)\*/g, '$1')
.replace(/`(.+?)`/g, '$1')
.replace(/^### (.+)$/gm, '$1')
.replace(/^## (.+)$/gm, '$1
')
.replace(/^# (.+)$/gm, '$1
')
.replace(/^- (.+)$/gm, '
$1')
.replace(/^(\d+)\. (.+)$/gm, '$2')
.replace(/\n/g, '
');
}
// ── 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 = 'Loading...
';
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 = `
`;
el.appendChild(item);
});
} catch(e) {
el.innerHTML = 'Failed to load logs.
';
}
}
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 = 'Loading...
';
// 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 = 'Failed to load log.
';
}
// 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
const searchLower = _currentLogSearch ? _currentLogSearch.toLowerCase() : '';
if (searchLower) {
lines = lines.filter(line => line.toLowerCase().includes(searchLower));
}
// Render with highlighting
const total = _currentLogContent.split('\n').length;
const shown = lines.length;
$('logsMatchCount').textContent = searchLower || _currentLogLevel !== 'all'
? `${shown} of ${total} lines shown`
: `${total} lines`;
if (lines.length === 0) {
$('logsContent').innerHTML = '(no matches)';
return;
}
// Escape first, then highlight search terms
const highlighted = lines.map((line, i) => {
const escaped = esc(line) || ' ';
if (searchLower) {
// Highlight all occurrences of search term (case-insensitive, preserves case in display)
const regex = new RegExp(escRegex(_currentLogSearch), 'gi');
return `${escaped.replace(regex, m => `${m}`)}`;
}
return `${escaped}`;
}).join('\n');
$('logsContent').innerHTML = highlighted;
// Auto-scroll to first match when searching
if (searchLower) {
const pre = $('logsContent');
const first = pre.querySelector('.log-highlight');
if (first) {
first.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
} else {
// Normal: scroll to bottom (newest)
const pre = $('logsContent');
pre.scrollTop = pre.scrollHeight;
}
}
// Escape special regex characters
function escRegex(s) {
return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
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'});
}
// ── Heartbeats panel ─────────────────────────────────────────────────────────
let _heartbeatsCache = null;
async function loadHeartbeatsPanel() {
const panel = $('heartbeatsPanelContent');
if (!panel) return;
try {
_heartbeatsCache = await api('/api/heartbeats');
renderHeartbeatsList(_heartbeatsCache);
} catch (e) {
panel.innerHTML = 'Failed to load heartbeats: ' + e.message + '
';
}
}
function renderHeartbeatsList(data) {
const panel = $('heartbeatsPanelContent');
if (!panel) return;
const hb = data.heartbeats || [];
const total = data.total || 0;
const pending = data.pending_due_count || 0;
const manager = data._manager || {};
let html = `
Active Heartbeats (${hb.length})
${hb.length === 0 ? '
No heartbeats yet
' : ''}
`;
for (const h of hb) {
const isRecurring = h.recurring;
const iterationInfo = isRecurring && h.max_iterations
? ` (${h.iteration_count || 0}/${h.max_iterations})`
: isRecurring ? ' (∞)' : '';
const statusClass = h.status === 'pending' ? 'hb-item-pending' : 'hb-item-' + h.status;
const dueInfo = h.status === 'pending' ? `→ ${_nextIn(h.trigger_at)}` : h.status;
html += `
${h.action}
${h.source}
${h.priority || 'n'}
${dueInfo}
${iterationInfo}
${_escapeHtml(h.instruction || h.user_message || '')}
`;
}
html += '';
// Also attach manager info from separate call
panel.innerHTML = html;
// Toggle recurring fields
const recurringCheck = document.getElementById('hb-recurring');
const intervalInput = document.getElementById('hb-interval');
const maxiterInput = document.getElementById('hb-maxiter');
const agentSelect = document.getElementById('hb-agent');
const actionSelect = document.getElementById('hb-action');
if (recurringCheck) recurringCheck.addEventListener('change', () => {
const show = recurringCheck.checked;
intervalInput.style.display = show ? '' : 'none';
maxiterInput.style.display = show ? '' : 'none';
});
if (actionSelect) actionSelect.addEventListener('change', () => {
agentSelect.style.display = actionSelect.value === 'delegate' ? '' : 'none';
});
}
function _escapeHtml(s) {
return String(s).replace(/&/g,'&').replace(//g,'>');
}
async function hbQuickReminder() {
const instr = prompt('Reminder text for Rose:');
if (!instr) return;
await api('/api/heartbeats', {
method: 'POST',
body: JSON.stringify({ source: 'webui', action: 'rose_continue', instruction: instr, minutes: 5, priority: 'high' })
});
showToast('Reminder set');
await loadHeartbeatsPanel();
}
async function hbQuickDailyCheck() {
await api('/api/heartbeats', {
method: 'POST',
body: JSON.stringify({
source: 'webui', action: 'rose_continue',
instruction: 'Daily calendar check — any meetings or conflicts today?',
minutes: 0, recurring: true, interval_minutes: 1440, max_iterations: 30
})
});
showToast('Daily check created (30 days)');
await loadHeartbeatsPanel();
}
async function hbQuickMemoryCheck() {
await api('/api/heartbeats', {
method: 'POST',
body: JSON.stringify({
source: 'webui', action: 'rose_continue',
instruction: 'Memory Health Check — run /search memory health',
minutes: 60, recurring: true, interval_minutes: 60, max_iterations: 999
})
});
showToast('Hourly memory check created');
await loadHeartbeatsPanel();
}
async function hbCreate() {
const instruction = document.getElementById('hb-instruction')?.value.trim();
const action = document.getElementById('hb-action')?.value;
const minutes = parseInt(document.getElementById('hb-minutes')?.value) || 5;
const priority = document.getElementById('hb-priority')?.value || undefined;
const recurring = document.getElementById('hb-recurring')?.checked;
const interval_minutes = parseInt(document.getElementById('hb-interval')?.value) || minutes;
const max_iterations = parseInt(document.getElementById('hb-maxiter')?.value) || undefined;
const target_agent = action === 'delegate' ? document.getElementById('hb-agent')?.value : undefined;
if (!instruction) {
showToast('Please enter an instruction');
return;
}
const body = { source: 'webui', action, instruction, minutes, recurring };
if (priority) (body as any).priority = priority;
if (recurring) {
(body as any).interval_minutes = interval_minutes;
if (max_iterations) (body as any).max_iterations = max_iterations;
}
if (target_agent) (body as any).target_agent = target_agent;
try {
await api('/api/heartbeats', {
method: 'POST',
body: JSON.stringify(body)
});
showToast('Heartbeat created');
document.getElementById('hb-instruction').value = '';
await loadHeartbeatsPanel();
} catch (e) {
showToast('Error: ' + e.message);
}
}
async function hbCancel(id) {
if (!confirm('Cancel heartbeat ' + id + '?')) return;
try {
await api('/api/heartbeats/' + id, { method: 'DELETE' });
showToast('Cancelled');
await loadHeartbeatsPanel();
} catch (e) {
showToast('Error: ' + e.message);
}
}
function _nextInProject(dateStr) {
if (!dateStr) return '—';
const diff = new Date(dateStr).getTime() - Date.now();
if (diff <= 0) return 'now';
const mins = Math.floor(diff / 60000);
if (mins < 60) return `in ${mins}m`;
const hours = Math.floor(mins / 60);
if (hours < 24) return `in ${hours}h ${mins % 60}m`;
return `in ${Math.floor(hours / 24)}d`;
}
// ── Projects panel ──────────────────────────────────────────────────────────
let projectsState = {
projects: [],
allTasks: [],
filter: { type: 'all', priority: null },
expanded: false
};
async function loadProjectsPanel() {
try {
const [projectsRes, tasksRes, statsRes] = await Promise.all([
api('/api/projects'),
api('/api/projects/tasks'),
api('/api/projects/stats')
]);
// Merge projects from projects/ folder (via our api) with tasks
projectsState.projects = projectsRes.projects || [];
projectsState.allTasks = (tasksRes.tasks || []).map(t => ({
...t,
status: (t.status === 'pending' || !t.status) ? 'todo' : t.status
}));
renderProjectsStats(statsRes);
renderProjectsList();
renderKanban();
// Set "All" filter button as active
document.querySelectorAll('.filter-btn[data-filter]').forEach(btn => {
btn.classList.toggle('active', btn.dataset.filter === 'all');
});
} catch(e) {
console.error('loadProjectsPanel:', e);
}
}
function renderProjectsStats(stats) {
// Header stats bar
const headerEl = $('projectsHeaderStats');
if (headerEl) {
headerEl.innerHTML = `
📋 ${stats.total_tasks || 0}
✅ ${stats.done || 0}
🎯 ${stats.today_completed || 0}
`;
}
// Filter bar streak & overdue
const streakEl = $('filterStreak');
if (streakEl) streakEl.textContent = stats.streak ? `🔥 ${stats.streak}` : '';
const overdueEl = $('filterOverdue');
if (overdueEl) {
if (stats.overdue > 0) {
overdueEl.textContent = `⚠️ ${stats.overdue}`;
overdueEl.style.display = '';
} else {
overdueEl.style.display = 'none';
}
}
}
function renderProjectsList() {
// Projects sidebar
const list = $('projectsList');
if (list) {
list.innerHTML = projectsState.projects.map(p => `
${p.name || p.id}
${(p.tasks || []).length}
`).join('');
}
// Daily tasks
const dailyList = $('dailyTasksList');
const dailyTasks = projectsState.allTasks.filter(t => t.task_type === 'daily');
if (dailyList) {
dailyList.innerHTML = dailyTasks.length ? dailyTasks.map(t => renderTaskItem(t)).join('')
: 'No daily tasks
';
}
// Recurring tasks
const recList = $('recurringTasksList');
const recTasks = projectsState.allTasks.filter(t => t.task_type === 'recurring');
if (recList) {
recList.innerHTML = recTasks.length ? recTasks.map(t => renderTaskItem(t)).join('')
: 'No recurring tasks
';
}
}
function renderTaskItem(t) {
const prioColors = { p1: '🔴', p2: '🟡', p3: '🟢' };
const prio = prioColors[t.priority] || '⚪';
const done = t.status === 'done' ? '✓' : '○';
const doneCls = t.status === 'done' ? 'done' : '';
const due = t.due ? `📅 ${t.due}` : '';
const tags = (t.tags || []).map(tag => `${esc(tag)}`).join('');
const ownerBadgeMap = { 'user': '👤', 'rose': '🌹', 'agent:lotus': '🪷', 'agent:sunflower': '🌻', 'agent:iris': '⚜️', 'agent:ivy': '🌿', 'agent:dandelion': '🛡️', 'agent:root': '🌳' };
const ownerBadge = ownerBadgeMap[t.owner] || '';
return `
${done}
${esc(t.title)}
${ownerBadge}
${prio}
${due}
${tags}
`;
}
function renderKanban() {
const tasks = getFilteredTasks();
const cols = {
todo: tasks.filter(t => t.status === 'todo'),
in_progress: tasks.filter(t => t.status === 'in_progress'),
review: tasks.filter(t => t.status === 'review'),
done: tasks.filter(t => t.status === 'done')
};
for (const [colId, colTasks] of Object.entries(cols)) {
const el = $(`kanban${colId.split('_').map((p, i) => i === 0 ? p : p.charAt(0).toUpperCase() + p.slice(1)).join('')}Content`);
if (el) {
el.innerHTML = colTasks.map(t => renderKanbanCard(t)).join('');
}
// Update column count badge
const countEl = $(`kanban${colId.split('_').map((p, i) => i === 0 ? p : p.charAt(0).toUpperCase() + p.slice(1)).join('')}Count`);
if (countEl) countEl.textContent = String(colTasks.length || '');
}
}
function renderKanbanCard(t) {
const prioColors = { p1: 'var(--accent)', p2: 'var(--warning)', p3: 'var(--success)' };
const borderColor = prioColors[t.priority] || 'var(--border)';
const projectLabel = t.project_name ? `${esc(t.project_name)}` : '';
const today = new Date().toISOString().slice(0, 10);
const isOverdue = t.due && t.due < today && t.status !== 'done';
const due = t.due ? `📅 ${esc(t.due)}` : '';
const tags = (t.tags || []).slice(0, 2).map(tag => `${esc(tag)}`).join('');
const prioLabel = { p1: '🔴', p2: '🟡', p3: '🟢' }[t.priority] || '';
const ownerBadge = t.owner ? `${esc(t.owner)}` : '';
return `
${projectLabel}
${ownerBadge}
`;
}
function getFilteredTasks() {
let tasks = projectsState.allTasks;
const f = projectsState.filter;
if (f.type === 'daily') {
tasks = projectsState.allTasks.filter(t => t.task_type === 'daily');
} else if (f.type === 'recurring') {
tasks = projectsState.allTasks.filter(t => t.task_type === 'recurring');
} else if (f.type === 'project') {
tasks = projectsState.allTasks.filter(t => t.task_type === 'project');
}
// 'all' shows everything (no filter)
if (f.priority) {
tasks = tasks.filter(t => t.priority === f.priority);
}
return tasks;
}
function filterTasks(type) {
if (['all', 'project', 'daily', 'recurring'].includes(type)) {
projectsState.filter.type = type;
document.querySelectorAll('.filter-btn[data-filter]').forEach(btn => {
if (['all', 'project', 'daily', 'recurring'].includes(btn.dataset.filter)) {
btn.classList.toggle('active', btn.dataset.filter === type);
}
});
} else if (['p1', 'p2', 'p3'].includes(type)) {
if (projectsState.filter.priority === type) {
projectsState.filter.priority = null;
} else {
projectsState.filter.priority = type;
}
document.querySelectorAll('.filter-btn[data-filter]').forEach(btn => {
if (['p1', 'p2', 'p3'].includes(btn.dataset.filter)) {
btn.classList.toggle('active', btn.dataset.filter === projectsState.filter.priority);
}
});
}
renderKanban();
}
async function quickAddTask() {
const input = $('quickAddInput');
const typeSelect = $('quickAddType');
const dueInput = $('quickAddDue');
const title = input.value.trim();
if (!title) return;
const task = {
title,
task_type: typeSelect.value,
status: 'todo',
priority: 'p2',
project_id: projectsState.projects[0]?.id || null,
due: dueInput.value || null,
tags: []
};
try {
await api('/api/projects/tasks', { method: 'POST', body: JSON.stringify(task) });
input.value = '';
dueInput.value = '';
await loadProjectsPanel();
} catch(e) {
console.error('quickAddTask:', e);
showToast('Error: ' + e.message);
}
}
async function toggleTaskStatus(taskId) {
const task = projectsState.allTasks.find(t => t.id === taskId);
if (!task) return;
const newStatus = task.status === 'done' ? 'todo' : 'done';
const completed = newStatus === 'done' ? new Date().toISOString() : null;
try {
await api(`/api/projects/tasks/${taskId}`, {
method: 'PUT',
body: JSON.stringify({ status: newStatus, completed })
});
await loadProjectsPanel();
} catch(e) {
console.error('toggleTaskStatus:', e);
}
}
let _currentTaskId = null;
let _originalTaskStatus = null;
function openTaskModal(taskId) {
const task = projectsState.allTasks.find(t => t.id === taskId);
if (!task) return;
_currentTaskId = taskId;
_originalTaskStatus = task.status;
const modal = $('taskDetailModal');
const title = $('taskModalTitle');
const inputTitle = $('taskModalInputTitle');
const selStatus = $('taskModalSelectStatus');
const selPrio = $('taskModalSelectPrio');
const inputDue = $('taskModalInputDue');
const selOwner = $('taskModalSelectOwner');
const inputTags = $('taskModalInputTags');
const meta = $('taskModalMeta');
const ownerLabels = {
'user': '👤 Sabo', 'rose': '🌹 Rose',
'agent:lotus': '🪷 Lotus', 'agent:sunflower': '🌻 Sunflower',
'agent:iris': '⚜️ Iris', 'agent:ivy': '🌿 Ivy',
'agent:dandelion': '🛡️ Dandelion', 'agent:root': '🌳 Root'
};
title.textContent = task.title;
inputTitle.value = task.title;
selStatus.value = task.status || 'todo';
selPrio.value = task.priority || 'p2';
inputDue.value = task.due || '';
selOwner.value = task.owner || 'user';
inputTags.value = (task.tags || []).join(', ');
const created = task.created ? new Date(task.created).toLocaleDateString() : '—';
const updated = task.updated ? new Date(task.updated).toLocaleDateString() : '—';
meta.textContent = `ID: ${task.id} | Created: ${created} | Updated: ${updated}`;
modal.style.display = 'flex';
}
function closeTaskModal() {
$('taskDetailModal').style.display = 'none';
_currentTaskId = null;
}
async function saveTaskFromModal() {
if (!_currentTaskId) return;
const title = $('taskModalInputTitle').value.trim();
if (!title) {
showToast('Title cannot be empty');
return;
}
const updates = {
title,
status: $('taskModalSelectStatus').value,
priority: $('taskModalSelectPrio').value,
due: $('taskModalInputDue').value || null,
owner: $('taskModalSelectOwner').value,
tags: $('taskModalInputTags').value.split(',').map(t => t.trim()).filter(Boolean)
};
if (updates.status === 'done' && _originalTaskStatus !== 'done') {
(updates as any).completed = new Date().toISOString();
}
try {
await api(`/api/projects/tasks/${_currentTaskId}`, {
method: 'PUT',
body: JSON.stringify(updates)
});
closeTaskModal();
await loadProjectsPanel();
showToast('Task saved');
} catch(e) {
showToast('Error saving task: ' + e.message);
}
}
async function deleteTaskFromModal() {
if (!_currentTaskId) return;
const task = projectsState.allTasks.find(t => t.id === _currentTaskId);
if (!confirm(`Delete task "${task?.title}"? This cannot be undone.`)) return;
try {
await api(`/api/projects/tasks/${_currentTaskId}`, { method: 'DELETE' });
closeTaskModal();
await loadProjectsPanel();
showToast('Task deleted');
} catch(e) {
showToast('Error deleting task: ' + e.message);
}
}
// Legacy: Kanban card click opens modal
function openTaskDetail(taskId) {
openTaskModal(taskId);
}
function expandPanel(panelName) {
const panelEl = $(`panel${panelName.charAt(0).toUpperCase() + panelName.slice(1)}`);
if (!panelEl) return;
const isExpanded = panelEl.classList.contains('panel-expanded');
panelEl.classList.toggle('panel-expanded', !isExpanded);
const btn = $(`btnExpand${panelName.charAt(0).toUpperCase() + panelName.slice(1)}`);
if (btn) {
if (!isExpanded) {
btn.innerHTML = ``;
btn.title = 'Collapse';
} else {
btn.innerHTML = ``;
btn.title = 'Expand';
}
}
if (!isExpanded) {
document.addEventListener('keydown', _escHandler = (e) => {
if (e.key === 'Escape') {
expandPanel(panelName);
document.removeEventListener('keydown', _escHandler);
}
});
}
}
// Event wiring
// ── Kanban Drag & Drop ────────────────────────────────────────────────────────
let draggedTaskId = null;
function onKanbanDragStart(e, taskId) {
draggedTaskId = taskId;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', taskId);
e.target.style.opacity = '0.5';
}
function onKanbanDragEnd(e) {
e.target.style.opacity = '1';
draggedTaskId = null;
}
function onKanbanDragOver(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
}
async function onKanbanDrop(e, newStatus) {
e.preventDefault();
if (!draggedTaskId) return;
const taskId = draggedTaskId;
draggedTaskId = null;
try {
await api(`/api/projects/tasks/${taskId}`, {
method: 'PUT',
body: JSON.stringify({ status: newStatus })
});
await loadProjectsPanel();
} catch(err) {
showToast('Move failed: ' + err.message);
}
}
// ── Task Edit Modal ────────────────────────────────────────────────────────────
let editingTaskId = null;
let selectedProjectColor = '#6366f1';
function openTaskEditModal(taskId) {
const task = (projectsState as any).tasks?.find((t: any) => t.id === taskId)
|| projectsState.allTasks.find((t: any) => t.id === taskId);
if (!task) return;
editingTaskId = taskId;
$('editTaskTitle').value = task.title || '';
$('editTaskType').value = task.task_type || 'project';
$('editTaskPriority').value = task.priority || 'p2';
$('editTaskDue').value = task.due || '';
// Populate project dropdown
const projSelect = $('editTaskProject');
projSelect.innerHTML = '';
projectsState.projects.forEach(p => {
const opt = document.createElement('option');
opt.value = p.id;
opt.textContent = p.name;
if (p.id === task.project_id) opt.selected = true;
projSelect.appendChild(opt);
});
// Recurring options visibility
$('editTaskRecurringOpts').style.display = task.task_type === 'recurring' ? 'block' : 'none';
if (task.recurring) {
$('editRecInterval').value = task.recurring.interval || 1;
$('editRecUnit').value = task.recurring.unit || 'days';
}
$('taskEditModal').style.display = 'flex';
}
function closeTaskEditModal() {
$('taskEditModal').style.display = 'none';
editingTaskId = null;
}
function onEditTypeChange() {
$('editTaskRecurringOpts').style.display = $('editTaskType').value === 'recurring' ? 'block' : 'none';
}
async function saveTaskEdit() {
if (!editingTaskId) return;
const updated = {
title: $('editTaskTitle').value.trim(),
task_type: $('editTaskType').value,
priority: $('editTaskPriority').value,
project_id: $('editTaskProject').value || null,
due: $('editTaskDue').value || null,
};
if ($('editTaskType').value === 'recurring') {
(updated as any).recurring = {
interval: parseInt($('editRecInterval').value) || 1,
unit: $('editRecUnit').value
};
}
try {
await api(`/api/projects/tasks/${editingTaskId}`, { method: 'PUT', body: JSON.stringify(updated) });
closeTaskEditModal();
await loadProjectsPanel();
} catch(e) {
showToast('Error saving: ' + e.message);
}
}
async function deleteTask(taskId) {
if (!confirm('Delete this task?')) return;
try {
await api(`/api/projects/tasks/${taskId}`, { method: 'DELETE' });
await loadProjectsPanel();
} catch(e) {
showToast('Error deleting: ' + e.message);
}
}
// ── Project Edit Modal ─────────────────────────────────────────────────────────
let editingProjectId = null;
function openProjectEditModal(projectId) {
const project = projectsState.projects.find(p => p.id === projectId);
if (!project) return;
editingProjectId = projectId;
$('editProjectName').value = project.name || '';
selectedProjectColor = project.color || '#6366f1';
document.querySelectorAll('.color-dot').forEach(btn => {
btn.classList.toggle('selected', btn.dataset.color === selectedProjectColor);
});
$('projectEditModal').style.display = 'flex';
}
function closeProjectEditModal() {
$('projectEditModal').style.display = 'none';
editingProjectId = null;
}
function selectProjectColor(btn) {
selectedProjectColor = btn.dataset.color;
document.querySelectorAll('.color-dot').forEach(b => b.classList.remove('selected'));
btn.classList.add('selected');
}
async function saveProjectEdit() {
if (!editingProjectId) return;
const updated = { name: $('editProjectName').value.trim(), color: selectedProjectColor };
try {
await api(`/api/projects/projects/${editingProjectId}`, { method: 'PUT', body: JSON.stringify(updated) });
closeProjectEditModal();
await loadProjectsPanel();
} catch(e) {
showToast('Error saving: ' + e.message);
}
}
async function deleteProject(projectId) {
if (!confirm('Delete this project and all its tasks?')) return;
try {
await api(`/api/projects/projects/${projectId}`, { method: 'DELETE' });
await loadProjectsPanel();
} catch(e) {
showToast('Error deleting: ' + e.message);
}
}