// Henry's full routes: /ai-agents, /client-health // Vukasi's full routes: /at-risk-accounts, /creative-log // touch const { Monogram, WidgetCard, Sparkline, Empty, ExtArrow, RoutePage, PillBar, PlaceholderRoute, useToast, ClientHealth, ClientDrawerBody, AtRiskAccounts, NextStepsModal, ReadOnlyBadge } = window.DC; const fmtAgo = (iso) => { const m = Math.round((new Date('2026-04-29T09:00:00Z') - new Date(iso)) / 60000); if (m < 1) return 'just now'; if (m < 60) return `${m}m ago`; const h = Math.round(m / 60); if (h < 24) return `${h}h ago`; return `${Math.round(h/24)}d ago`; }; // ── Henry · /ai-agents ────────────────────────────────────────────────────── function AgentsRoute({ onBack }) { const toast = useToast(); const agents = window.DC_DATA.AGENT_DETAIL; const [openAgent, setOpenAgent] = useState('cole'); const [activityFeed, setActivityFeed] = useState({ sal: [], cole: [], david: [] }); const [inputModal, setInputModal] = useState(null); // { agent, trigger } const fireTrigger = (agent, trigger) => { const eta = 4 + Math.floor(Math.random() * 8); toast.push({ title: `${agent.name.split(' ')[0]} is on it.`, body: `${trigger.label} — ETA ${eta} min`, initials: agent.initials, tone: 'success', }); setActivityFeed(prev => ({ ...prev, [agent.id]: [{ id: Math.random().toString(36).slice(2), when: new Date().toISOString(), title: trigger.label, status: 'running', eta, }, ...prev[agent.id]], })); setInputModal(null); }; const handleClick = (agent, trigger) => { if (trigger.kind === 'input') setInputModal({ agent, trigger }); else fireTrigger(agent, trigger); }; const totalRunning = Object.values(activityFeed).flat().length; const totalShipped = Object.values(agents).reduce((s, a) => s + a.outputs.filter(o => o.status === 'shipped').length, 0); const totalReview = Object.values(agents).reduce((s, a) => s + a.outputs.filter(o => o.status === 'review').length, 0); return ( setOpenAgent(null)}>Collapse all }>
{Object.values(agents).map(a => ( setOpenAgent(openAgent === a.id ? null : a.id)} onTrigger={handleClick} liveActivity={activityFeed[a.id] || []} /> ))}
setInputModal(null)}> {inputModal && ( fireTrigger(inputModal.agent, inputModal.trigger)} onClose={() => setInputModal(null)} /> )} ); } function AgentPanel({ agent, expanded, onToggle, onTrigger, liveActivity }) { const tone = agent.id === 'sal' ? 'forest' : agent.id === 'cole' ? 'gold' : 'forest'; const okRuns = agent.runHistory.filter(r => r.status === 'ok').length; const failRuns = agent.runHistory.filter(r => r.status === 'fail').length; return (
{/* Header */} {expanded && (
{/* Left col: triggers */}
Trigger a task
{agent.triggers.map(t => ( onTrigger(agent, t)} /> ))}
▶ fire-and-forget → needs input
{/* Right col: outputs + run history */}
Last 10 outputs
Run history · last 7d
    {agent.runHistory.map((r, i) => (
  • {new Date(r.when).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })} {r.durationS}s {r.status === 'ok' ? `${r.outputs} outputs` : `failed: ${r.err}`}
    • ))}
)}
); } function TriggerCard({ trigger, agent, onClick }) { const isInput = trigger.kind === 'input'; return ( ); } function TriggerInputForm({ agent, trigger, onSubmit, onClose }) { const [client, setClient] = useState(''); const [notes, setNotes] = useState(''); return (
{agent.name} · trigger

{trigger.label}

{trigger.desc}