/* global React, ReactDOM, Icon, STATUS, INITIAL, KanbanView, TimelineView, CanvasView, DetailDrawer, sid */ const { useState, useEffect, useCallback, useRef } = React; const clone = (x) => JSON.parse(JSON.stringify(x)); const loadLS = (k, f) => { try { const v = localStorage.getItem(k); return v ? JSON.parse(v) : f; } catch (e) { return f; } }; function App() { const [agents, setAgents] = useState(() => clone(INITIAL)); const [view, setView] = useState('canvas'); const [selectedId, setSelectedId] = useState(null); const [live, setLive] = useState(true); const liveRef = useRef(live); liveRef.current = live; // canvas board state (persisted) const [layout, setLayout] = useState(() => loadLS('mc.layout', {})); const [extras, setExtras] = useState(() => loadLS('mc.extras', [])); const dragActiveRef = useRef(false); useEffect(() => { try { localStorage.setItem('mc.layout', JSON.stringify(layout)); } catch (e) {} }, [layout]); useEffect(() => { try { localStorage.setItem('mc.extras', JSON.stringify(extras)); } catch (e) {} }, [extras]); const patch = useCallback((id, fn) => { setAgents((prev) => prev.map((a) => (a.id === id ? fn(clone(a)) : a))); }, []); // ---- interactions ---- const toggle = useCallback((id) => patch(id, (a) => { a.status = a.status === 'running' ? 'paused' : 'running'; return a; }), [patch]); const approve = useCallback((id, stepId) => patch(id, (a) => { const i = a.steps.findIndex((s) => s.id === stepId); if (i < 0) return a; a.steps[i].state = 'done'; a.steps[i].kind = 'action'; const nxt = a.steps.find((s) => s.state === 'pending'); if (nxt) nxt.state = 'active'; a.status = 'running'; a.trust = [...a.trust, Math.min(99, a.trust[a.trust.length - 1] + 5)].slice(-24); return a; }), [patch]); const reject = useCallback((id, stepId) => patch(id, (a) => { a.steps = a.steps.filter((s) => s.id !== stepId); const nxt = a.steps.find((s) => s.state === 'pending'); if (nxt) nxt.state = 'active'; a.status = 'running'; a.trust = [...a.trust, Math.max(4, a.trust[a.trust.length - 1] - 3)].slice(-24); return a; }), [patch]); const override = useCallback((id, stepId, label) => patch(id, (a) => { const s = a.steps.find((x) => x.id === stepId); if (s && label.trim()) { s.label = label.trim(); s.overridden = true; } return a; }), [patch]); const rollback = useCallback((id, stepId) => patch(id, (a) => { const i = a.steps.findIndex((s) => s.id === stepId); if (i < 0) return a; a.steps = a.steps.filter((s) => s.kind !== 'note'); const j = a.steps.findIndex((s) => s.id === stepId); a.steps.forEach((s, k) => { if (k < j) s.state = 'done'; else if (k === j) s.state = 'active'; else s.state = 'pending'; }); a.status = 'running'; a.trust = [...a.trust, a.trust[a.trust.length - 1]].slice(-24); return a; }), [patch]); const takeover = useCallback((id) => patch(id, (a) => { a.status = 'manual'; return a; }), [patch]); const returnControl = useCallback((id) => patch(id, (a) => { a.status = 'running'; return a; }), [patch]); const note = useCallback((id, text) => patch(id, (a) => { let idx = a.steps.findIndex((s) => s.state === 'active' || s.state === 'proposed' || s.state === 'blocked'); if (idx < 0) idx = a.steps.length - 1; a.steps.splice(idx + 1, 0, { id: sid(), kind: 'note', state: 'done', label: text }); return a; }), [patch]); // ---- gentle live simulation ---- useEffect(() => { const t = setInterval(() => { if (!liveRef.current || dragActiveRef.current) return; setAgents((prev) => prev.map((a) => { if (a.status !== 'running') return a; const b = clone(a); const last = b.trust[b.trust.length - 1]; const bias = b.kind === 'test' ? -1.4 : 1.3; b.trust = [...b.trust, Math.max(4, Math.min(99, Math.round(last + bias + (Math.random() * 6 - 3))))].slice(-24); if (Math.random() < 0.22) { const ai = b.steps.findIndex((s) => s.state === 'active'); if (ai >= 0) { const nxt = b.steps[ai + 1]; if (nxt && nxt.state === 'pending') { b.steps[ai].state = 'done'; nxt.state = 'active'; } else if (nxt && nxt.state === 'proposed') { b.steps[ai].state = 'done'; b.status = 'needs_review'; } } } return b; })); }, 3600); return () => clearInterval(t); }, []); const selected = agents.find((a) => a.id === selectedId) || null; const count = (st) => agents.filter((a) => a.status === st).length; const Seg = ({ id, icon, label }) => ( ); return (
{/* header */}
Agent Friends

Agent Friends

{agents.length} agents · {count('running')} running · {count('needs_review')} need review · {count('blocked')} blocked
{view === 'kanban' && } {view === 'timeline' && } {view === 'canvas' && }
setSelectedId(null)} onToggle={toggle} onApprove={approve} onReject={reject} onOverride={override} onRollback={rollback} onTakeover={takeover} onReturn={returnControl} onNote={note} />
); } ReactDOM.createRoot(document.getElementById('root')).render();