const { useState, useEffect, useRef, useCallback } = React; // ─── CONFIG ────────────────────────────────────────────────────────────────── const SUPABASE_URL = "https://nwxfoisdrnpkotenbqfr.supabase.co"; const SUPABASE_ANON = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im53eGZvaXNkcm5wa290ZW5icWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODI2NzE3NzcsImV4cCI6MjA5ODI0Nzc3N30.cCMlsBXY5eqydJtxohM5tX26cZey75_3GKL41EFHh8Y"; const POLL_MS = 8000; // ─── FETCH ──────────────────────────────────────────────────────────────────── async function sbFetch(path, params = {}) { const url = new URL(`${SUPABASE_URL}/rest/v1/${path}`); Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v)); const res = await fetch(url.toString(), { headers: { apikey: SUPABASE_ANON, Authorization: `Bearer ${SUPABASE_ANON}` }, }); if (!res.ok) throw new Error(`${res.status} ${path}`); return res.json(); } // ─── HELPERS ───────────────────────────────────────────────────────────────── function timeAgo(iso) { const s = Math.floor((Date.now() - new Date(iso)) / 1000); if (s < 60) return `${s}s atrás`; if (s < 3600) return `${Math.floor(s/60)}m atrás`; if (s < 86400) return `${Math.floor(s/3600)}h atrás`; return `${Math.floor(s/86400)}d atrás`; } const EVENT_META = { session_start: { label: "Sessão iniciada", color: "#4C8EC9" }, session_end: { label: "Sessão encerrada", color: "#555" }, task_started: { label: "Tarefa iniciada", color: "#C9A84C" }, task_completed: { label: "Tarefa concluída", color: "#4CC98E" }, task_failed: { label: "Erro", color: "#FF6B6B" }, cron_fired: { label: "Cron disparado", color: "#9B4CC9" }, cron_completed: { label: "Cron concluído", color: "#4CC98E" }, memory_updated: { label: "Memória atualizada", color: "#C9A84C" }, escalation: { label: "Escalado", color: "#FF6B6B" }, awaiting_approval: { label: "Aguarda aprovação", color: "#FF9B3D" }, heartbeat: { label: "Heartbeat", color: "#4CC98E" }, skill_loaded: { label: "Skill carregada", color: "#7A99CC" }, }; const PRIO_COLOR = { critica:"#FF6B6B", alta:"#C9A84C", media:"#4C8EC9", baixa:"#555" }; const STATUS_COLOR = { running:"#4CC98E", stopped:"#FF6B6B", em_andamento:"#C9A84C", pendente:"#555", concluida:"#4CC98E", bloqueada:"#FF6B6B", aguardando_aprovacao:"#FF9B3D", }; const STATUS_LABEL = { em_andamento:"Em andamento", pendente:"Pendente", concluida:"Concluída", bloqueada:"Bloqueada", aguardando_aprovacao:"Aguarda aprovação", }; // ─── ATOMS ─────────────────────────────────────────────────────────────────── function Pulse({ color, size = 8 }) { return ( ); } function Dot({ color, size = 7 }) { return ; } function Badge({ children, color }) { return ( {children} ); } // ─── TELA QG (principal) ───────────────────────────────────────────────────── function QGScreen({ agents, gwMap, events, missions, approvals, newIds, lastPoll, isLive, ticks, error, onSelectAgent }) { const running = Object.values(gwMap).filter(g => g?.status === "running").length; const lastEventMap = {}; events.forEach(ev => { if (!lastEventMap[ev.agent_id]) lastEventMap[ev.agent_id] = ev; }); const pendingByAgent = {}; events.filter(e => e.event_type === "awaiting_approval").forEach(e => { pendingByAgent[e.agent_id] = (pendingByAgent[e.agent_id] || 0) + 1; }); return (
{/* HEADER */}
⚡
Hermes Control Mission
Grupo Marcandali · QG
{running} ativo{running!==1?"s":""} {agents.length-running} parado{(agents.length-running)!==1?"s":""} {approvals.length > 0 && {approvals.length} aguardando}
{isLive ? : } {isLive ? `${lastPoll?.toLocaleTimeString("pt-BR")} · ${ticks}` : "conectando…"}
{error && ⚠ erro}
{/* APROVAÇÕES PENDENTES */} {approvals.length > 0 && (
⏳ {approvals.length} {approvals.length===1?"ação aguarda":"ações aguardam"} sua aprovação
{approvals.map((a, i) => (
0?"1px solid #1A1200":"none" }}> {a.agent_emoji}
{a.description}
{a.agent_name} · {timeAgo(a.created_at)}
{a.risk_level}
))}
)} {/* GRID DE AGENTES */}
{agents.map(ag => { const gw = gwMap[ag.id]; const running = gw?.status === "running"; const color = ag.accent_color || "#666"; const last = lastEventMap[ag.id]; const pending = pendingByAgent[ag.id] || 0; const agMissions = missions.filter(m => m.agent_id === ag.id && m.status !== "concluida"); return (
onSelectAgent(ag.id)} style={{ background:"#0D0D12", border:`1px solid ${running ? color+"44" : "#1C1C26"}`, borderRadius:11, padding:"16px 17px", cursor:"pointer", transition:"all 0.12s", position:"relative", }} onMouseEnter={e => e.currentTarget.style.border = `1px solid ${color}66`} onMouseLeave={e => e.currentTarget.style.border = `1px solid ${running ? color+"44" : "#1C1C26"}`} > {/* badge de pendência */} {pending > 0 && (
{pending}
)}
{ag.emoji}
{ag.name}
{ag.role}
{running ? : } {running ? "gateway ativo" : "gateway parado"}
{last ? ( <>
{last.summary}
{timeAgo(last.created_at)}
) : (
Sem atividade recente
)}
{agMissions.length > 0 && (
{agMissions.length} missão{agMissions.length!==1?"ões":""} ativa{agMissions.length!==1?"s":""} ver →
)}
); })}
{/* FEED GERAL */}
Feed geral ao vivo
{events.length === 0 ?
Aguardando eventos…
: events.slice(0, 30).map((ev, i) => { const m = EVENT_META[ev.event_type] || { label: ev.event_type, color:"#666" }; const isNew = newIds?.has(ev.id); return (
onSelectAgent(ev.agent_id)} style={{ display:"flex", gap:10, padding:"9px 18px", borderBottom: i < 29 ? "1px solid #0F0F14":"none", background: isNew?"#0C140A":"transparent", transition:"background 0.5s", cursor:"pointer" }} onMouseEnter={e => e.currentTarget.style.background = "#111118"} onMouseLeave={e => e.currentTarget.style.background = isNew?"#0C140A":"transparent"} > {ev.agent_emoji}
{ev.agent_name} {m.label} {isNew && novo}
{ev.summary}
{timeAgo(ev.created_at)}
); }) }
Hermes v0.17.0 · polling {POLL_MS/1000}s Rafael Marcandali · Comandante Máximo
); } // ─── TELA AGENTE (detalhe) ──────────────────────────────────────────────────── function AgentScreen({ agentId, agents, gwMap, events, missions, approvals, onBack }) { const agent = agents.find(a => a.id === agentId); const gw = gwMap[agentId]; const running = gw?.status === "running"; if (!agent) return null; const color = agent.accent_color || "#666"; const agEvents = events.filter(e => e.agent_id === agentId); const agMissions = missions.filter(m => m.agent_id === agentId); const agApprovals = approvals.filter(a => a.agent_id === agentId); const pendingEvts = agEvents.filter(e => e.event_type === "awaiting_approval"); const openMissions = agMissions.filter(m => m.status !== "concluida"); const closedMissions = agMissions.filter(m => m.status === "concluida"); return (
{/* HEADER AGENTE */}
{agent.emoji}
{agent.name}
{agent.role}
{running ? : } {running ? "gateway ativo" : "gateway parado"} {gw?.telegram_connected && ( 📱 {gw.telegram_bot} )}
{/* PENDÊNCIAS DO AGENTE */} {(agApprovals.length > 0 || pendingEvts.length > 0) && (
⏳ Pendências aguardando você
{agApprovals.map((a, i) => (
0?"1px solid #1A1200":"none" }}>
{a.description}
{a.action_type} · {timeAgo(a.created_at)}
{a.risk_level}
))} {pendingEvts.map((e, i) => (
{e.summary}
{timeAgo(e.created_at)}
aguarda aprovação
))}
)}
{/* MISSÕES ABERTAS */}
Missões abertas {openMissions.length}
{openMissions.length === 0 ?
Nenhuma missão aberta
: openMissions.map((m, i) => { const sc = STATUS_COLOR[m.status] || "#666"; const pc = PRIO_COLOR[m.priority] || "#666"; return (
{m.id} {m.title} {m.priority} {STATUS_LABEL[m.status] || m.status}
{m.notes &&
{m.notes}
}
{m.progress_pct}%
); }) }
{/* FEED DO AGENTE */}
Atividade
{agEvents.length === 0 ?
Sem registros ainda
: agEvents.map((ev, i) => { const m = EVENT_META[ev.event_type] || { label: ev.event_type, color:"#666" }; return (
{m.label}
{ev.summary}
{timeAgo(ev.created_at)}
); }) }
{/* COLUNA DIREITA */}
{/* PERFIL */}
Perfil Hermes
{[ ["Perfil", agent.profile_name], ["Superior", agent.superior || "Rafael"], ["Gateway", running ? "ativo" : "parado"], ].map(([label, val]) => (
{label} {val}
))}
{/* MISSÕES CONCLUÍDAS */} {closedMissions.length > 0 && (
Concluídas {closedMissions.length}
{closedMissions.map((m, i) => (
✓ {m.title}
))}
)} {/* STATS */}
Atividade recente
{[ ["Eventos", agEvents.length], ["Missões", agMissions.length], ["Pendentes", agApprovals.length + pendingEvts.length], ["Concluídas", closedMissions.length], ].map(([label, val]) => (
0 ? color : "#333" }}>{val}
{label}
))}
); } // ─── APP PRINCIPAL ──────────────────────────────────────────────────────────── function App() { const [agents, setAgents] = useState([]); const [gws, setGws] = useState([]); const [events, setEvents] = useState([]); const [missions, setMissions] = useState([]); const [approvals, setApprovals] = useState([]); const [newIds, setNewIds] = useState(new Set()); const [lastPoll, setLastPoll] = useState(null); const [error, setError] = useState(null); const [isLive, setIsLive] = useState(false); const [ticks, setTicks] = useState(0); const [screen, setScreen] = useState("qg"); // "qg" | agentId const prevIds = useRef(new Set()); const poll = useCallback(async () => { try { const [ag, gw, ev, ms, ap] = await Promise.all([ sbFetch("hcm_agents", { select:"*", order:"id" }), sbFetch("hcm_gateway_latest", { select:"*" }), sbFetch("hcm_events_feed", { select:"*" }), sbFetch("hcm_missions", { select:"*", order:"priority,id" }), sbFetch("hcm_approvals_pending", { select:"*" }), ]); const ids = new Set(ev.map(e => e.id)); const fresh = new Set([...ids].filter(id => !prevIds.current.has(id))); prevIds.current = ids; if (ag.length) setAgents(ag); if (gw.length) setGws(gw); setEvents(ev); if (ms.length) setMissions(ms); setApprovals(ap); if (fresh.size) { setNewIds(fresh); setTimeout(() => setNewIds(new Set()), 5000); } setLastPoll(new Date()); setError(null); setIsLive(true); setTicks(t => t + 1); } catch (e) { setError(e.message); } }, []); useEffect(() => { poll(); const t = setInterval(poll, POLL_MS); return () => clearInterval(t); }, [poll]); const gwMap = Object.fromEntries(gws.map(g => [g.agent_id, g])); const commonProps = { agents, gwMap, events, missions, approvals, newIds, lastPoll, isLive, ticks, error }; if (screen === "qg") { return setScreen(id)} />; } return setScreen("qg")} />; }