// Henry's widgets: Agents strip, Blockers, Priorities, Client Health, Goals, // Transcript Recs, Churn Risk placeholder, plus the Client detail Drawer body. const { Monogram, WidgetCard, Sparkline, Empty, ExtArrow } = window.DC; // ── KPI Strip (Revenue MTD lead) ──────────────────────────────────────────── function KPIStrip({ kpis }) { if (!kpis) return null; const items = [ { ...kpis.revenueMTD, key: 'rev', emphasis: true }, { ...kpis.demosBooked, key: 'demos', emphasis: false }, { ...kpis.activeClients, key: 'clients', emphasis: false }, ].filter(k => k.label); const trendColor = (t) => t === 'good' ? 'var(--status-green)' : t === 'warn' ? 'var(--status-amber)' : 'var(--ink-soft)'; return (
{items.map((k, i) => (
{k.emphasis && ( Headline )}
{k.label}
{k.value}
{k.delta} · {k.target}
{k.series && (
{k.prefix || ''}{k.series[0].toLocaleString()} → {k.prefix || ''}{k.series[k.series.length-1].toLocaleString()}
)}
))}
); } // ── Recommend Focus box (one-sentence CTA above the fold) ─────────────────── function FocusBox({ focus }) { if (!focus) return null; const tone = focus.tone || 'amber'; const accent = tone === 'amber' ? 'var(--status-amber)' : tone === 'red' ? 'var(--status-red)' : 'var(--forest-500)'; const bg = tone === 'amber' ? 'rgba(248,197,48,.10)' : tone === 'red' ? 'rgba(154,42,42,.06)' : 'var(--surface-2)'; return (
Recommend focus {focus.headline} {focus.source && {focus.source}}
); } // ── Agent Status Panel ────────────────────────────────────────────────────── function AgentStrip({ agents, expandedId, setExpandedId }) { if (!agents || !agents.length) return null; return (
{agents.map((a, i) => { const expanded = expandedId === a.id; return (
setExpandedId(expanded ? null : a.id)}>
{a.name}
{a.role} {a.scope && · {a.scope.replace('-', ' ')}} · {timeAgo(a.lastRun)}
{a.flaggedCount > 0 ? ( {a.flaggedCount} for you ) : ( quiet )}
{expanded && (
    {a.priorities.map((p, j) => (
  • 0{j+1} {p}
    • ))} {a.cta && (
    • )}
)}
); })}
); } function timeAgo(iso) { const now = new Date('2026-04-29T09:00:00Z'); const d = new Date(iso); const m = Math.round((now - d) / 60000); 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`; } // ── Blockers Board (Kanban, 4 cols) ───────────────────────────────────────── function BlockersBoard({ blockers, setBlockers }) { const cols = [ { key: 'me', label: 'On me', sub: 'Henry' }, { key: 'team', label: 'On team', sub: 'Internal' }, { key: 'client', label: 'On client', sub: 'Awaiting' }, { key: 'external', label: 'External', sub: 'Vendors' }, ]; const [dragId, setDragId] = useState(null); const [overCol, setOverCol] = useState(null); const onDragStart = (id) => setDragId(id); const onDragOver = (e, col) => { e.preventDefault(); setOverCol(col); }; const onDrop = (col) => { if (!dragId) return; setBlockers(prev => prev.map(b => b.id === dragId ? { ...b, owner: col } : b)); setDragId(null); setOverCol(null); }; return (
{cols.map(c => { const items = blockers.filter(b => b.owner === c.key); return (
onDragOver(e, c.key)} onDrop={() => onDrop(c.key)} style={{ background: 'var(--paper-100)', border: overCol === c.key ? '1px dashed var(--gold-deep)' : '1px solid var(--border-soft)', padding: 10, minHeight: 120, }}>
{c.label} {items.length}
{items.length === 0 && (
{c.key === 'me' ? "Nothing on you." : c.key === 'team' ? "Nothing for the team." : c.key === 'client' ? "Nothing pending." : "All clear."}
)} {items.map(b => { const aged = b.ageDays > 5; return ( onDragStart(b.id)} className={dragId === b.id ? 'dragging' : ''} style={{ display: 'block', background: aged ? 'rgba(154,42,42,.04)' : 'var(--surface-2)', border: aged ? '1px solid rgba(154,42,42,.25)' : '1px solid var(--border)', padding: 10, textDecoration: 'none', color: 'inherit', cursor: 'grab', borderLeft: aged ? '3px solid var(--status-red)' : '3px solid transparent', }}>
{b.title}
{b.client && {b.client}} {b.client && ·} {b.ownerName} {aged && } {b.ageDays}d
); })}
); })}
Drag a card to reassign · aged > 5d carry a flag External = ClickUp tag external-blocker
); } // ── Top Priorities ────────────────────────────────────────────────────────── function Priorities({ priorities, setPriorities }) { const [dragId, setDragId] = useState(null); const STATUS_ICON = { not_started: '○', in_progress: '◐', done: '●' }; const STATUS_LABEL = { not_started: 'Not started', in_progress: 'In progress', done: 'Done' }; const STATUS_COLOR = { not_started: 'var(--ink-soft)', in_progress: 'var(--status-amber)', done: 'var(--status-green)', }; const onDragOver = (e, id) => { e.preventDefault(); if (!dragId || dragId === id) return; setPriorities(prev => { const arr = [...prev]; const from = arr.findIndex(p => p.id === dragId); const to = arr.findIndex(p => p.id === id); if (from < 0 || to < 0) return prev; const [m] = arr.splice(from, 1); arr.splice(to, 0, m); return arr; }); }; return ( ); } // ── Client Health Grid ────────────────────────────────────────────────────── function ClientHealth({ clients, onPickClient }) { const [filter, setFilter] = useState('all'); const filters = [ { k: 'all', l: 'All' }, { k: 'red', l: 'Red' }, { k: 'yellow', l: 'Yellow' }, { k: 'green', l: 'Green' }, ]; const visible = filter === 'all' ? clients : clients.filter(c => c.status === filter); const counts = { red: clients.filter(c => c.status === 'red').length, yellow: clients.filter(c => c.status === 'yellow').length, green: clients.filter(c => c.status === 'green').length, }; return ( {filters.map(f => ( ))} }>
{visible.map(c => ( ))} {visible.length === 0 && (
)}
); } // ── Goals Tracker ─────────────────────────────────────────────────────────── function GoalsTracker({ goals }) { const items = Object.entries(goals).map(([k, g]) => ({ ...g, key: k })); const fmt = (g, v) => `${g.prefix || ''}${v.toLocaleString()}${g.suffix || ''}`; return (
{items.map(g => { const pct = Math.min(100, Math.round((g.current / g.target) * 100)); const fillColor = pct >= 90 ? 'var(--status-green)' : pct >= 60 ? 'var(--gold-deep)' : 'var(--status-amber)'; return (
{g.label} {fmt(g, g.current)} / {fmt(g, g.target)} {pct}%
); })}
); } // ── Transcript Recommendations ────────────────────────────────────────────── function TranscriptRecs({ recs, setRecs }) { const onAction = (id, action) => { console.log(`[transcript-rec] ${action} → ${id}`); setRecs(prev => prev.map(r => r.id === id ? { ...r, _action: action } : r)); }; const visible = recs.filter(r => !r._action || r._action === 'edit'); return (
    {visible.length === 0 && } {visible.map((r, i) => (
  • {r.callTitle} {r.callDate}

    {r.recommendation}

    {r._action === 'edit' && Editing…}
    • ))}
); } // ── Churn Risk (placeholder) ──────────────────────────────────────────────── function ChurnRisk() { return ( Coming soon}>

We're building a model that scores accounts on disengagement signals — missed monthly reviews, slow client replies, declining estimator booking rate — to flag clients before they ask to pause. First pass ships in May.

); } // ── Client Drawer body (rich, scrollable) ─────────────────────────────────── function ClientDrawerBody({ slug, onClose }) { if (!slug) return null; const detail = window.DC_DATA.getClientDrawerData(slug); const { client, status, statusReason, summary, metaMetrics, cplSeries, bookingSeries, clickupActivity, recentCalls, lastUpdated } = detail; const statusColor = status === 'red' ? 'var(--status-red)' : status === 'yellow' ? 'var(--status-amber)' : 'var(--status-green)'; const fmtAgo = (iso) => { const m = Math.round((new Date('2026-04-29T09:00:00Z') - new Date(iso)) / 60000); if (m < 60) return `${m}m`; const h = Math.round(m/60); return h < 24 ? `${h}h` : `${Math.round(h/24)}d`; }; return (
Client detail

{client.name}

{status} · {statusReason}
{summary}
ClickUp Meta Ads GHL
Meta · last 14 days
updated {fmtAgo(lastUpdated.meta)} ago
{metaMetrics.map((m, i) => (
{m.k}
{m.v}
{m.cmp}
))}
{[ { l: 'Cost / booked', s: cplSeries, color: 'var(--forest-700)', prefix: '$' }, { l: 'Bookings / day', s: bookingSeries, color: 'var(--gold-deep)', prefix: '' }, ].map((c, i) => { const lo = Math.min(...c.s), hi = Math.max(...c.s); const first = c.s[0], last = c.s[c.s.length-1]; const trendBad = c.l.startsWith('Cost') ? last > first : last < first; return (
{c.l}
{c.prefix}{first} → {c.prefix}{last} lo {c.prefix}{lo} · hi {c.prefix}{hi}
{trendBad ? '▲ trending wrong way' : '▼ trending right way'}
); })}
Recent calls · {recentCalls.count30d} in last 30d
{recentCalls.latest.title} {recentCalls.latest.date}
    {recentCalls.latest.bullets.map((b, i) => (
  • · {b}
    • ))}
{recentCalls.others.map((o, i) => ( {o.date} {o.title} — {o.snippet} ))}
Recent ClickUp activity
updated {fmtAgo(lastUpdated.clickup)} ago
); } window.DC = Object.assign(window.DC || {}, { AgentStrip, BlockersBoard, Priorities, ClientHealth, GoalsTracker, TranscriptRecs, ChurnRisk, ClientDrawerBody, KPIStrip, FocusBox, });