// ============ Main App — API-connected ============ // ---- Auth screen ---- function AuthScreen({ error }) { return (
ATLAS Email Agent

ATLAS Email Agent

AI-powered inbox management for Elite Roads.
Connect your Microsoft 365 account to get started.

{error &&
{error}
} Sign in with Microsoft 365
Sign in with your Elite Roads Microsoft 365 account to get started.
); } // ---- Mailbox Switcher ---- function MailboxSwitcher({ activeMailbox, mailboxes, onSwitch }) { const [open, setOpen] = useState(false); const current = mailboxes.find(m => m.id === activeMailbox) || mailboxes[0]; const isShared = activeMailbox === 'shared:tenders'; return (
{open && (
{mailboxes.map(mb => ( ))}
)}
); } // ---- Sidebar ---- function Sidebar({ view, setView, counts, employee, profile, activeMailbox, mailboxes, onMailboxSwitch }) { const isFleet = profile?.interface === 'fleet'; const isQuoting = activeMailbox === 'shared:tenders'; const nav = [ // Personal inbox items — only shown when on personal mailbox (not tenders@) ...(!isQuoting ? [ { key:'todo', label:'To-do list', icon:, count:counts.todo, section:'Inbox' }, { key:'done', label:'Done', icon:, count:counts.done }, { key:'deleted', label:'Recently Deleted', icon:, count:counts.deleted||undefined }, { key:'followup', label:'Follow-ups', icon:, count:counts.followup, urgent:counts.followup>0, section:'Watching' }, { key:'disputes', label:'Disputes & claims', icon:, count:counts.disputes, urgent:counts.disputesEsc>0 }, ] : []), ...(isFleet ? [{ key:'fleet-kb', label:'Fleet Intelligence', icon:, section:'Fleet' }] : []), ...(isQuoting ? [ { key:'tenders-inbox', label:'Tenders Inbox', icon:'📋', count:counts.tenderUnread||undefined, section:'Quoting' }, { key:'opportunities', label:'Opportunities', icon:'🎯', count:counts.opportunitiesNew||undefined, urgent:counts.opportunitiesNew>0 }, { key:'move-log', label:'Move Log', icon:'📂', section:'' }, { key:'followup', label:'Follow-ups', icon:, count:counts.followup, urgent:counts.followup>0 }, ] : []), { key:'folders', label:'Folder rules', icon:, section:'Configuration' }, { key:'style', label:'Settings', icon: }, ]; const initials = (employee?.name || 'U').split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase(); return ( ); } // ---- Topbar ---- function Topbar({ view, scanning, lastScan, nextScanAt, onScan, showRail, onToggleRail, onRefreshAll, refreshingAll }) { const titles = { todo:'To-do list', done:'Done', followup:'Follow-ups', disputes:'Disputes & claims', folders:'Folder rules', style:'Settings', 'fleet-kb':'Fleet Intelligence', 'tenders-inbox':'Tenders Inbox', 'opportunities':'Opportunities', 'move-log':'Move Log', }; const [now, setNow] = useState(Date.now()); useEffect(() => { const t = setInterval(() => setNow(Date.now()), 10000); return () => clearInterval(t); }, []); const mins = lastScan ? Math.round((now - new Date(lastScan)) / 60000) : null; const nextMins = nextScanAt ? Math.max(0, Math.round((new Date(nextScanAt) - now) / 60000)) : null; return (

ATLAS Email Agent  /  {titles[view]}

{scanning ? Scanning inbox… : <> Connected · M365 {mins !== null && · last scan {mins}m ago} {nextMins !== null && · next in {nextMins}m} }
{/* Refresh All — reloads folders + emails + state in one click */}
); } // ---- Activity rail ---- function ActivityRail({ log, pipelineStep, stats, onCollapse }) { const steps = [ 'Fetch new emails', 'Remove duplicates', 'Classify & prioritise', 'Group by thread', 'Detect follow-ups', 'Update to-do list', ]; const logRef = useRef(null); useEffect(() => { if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight; }, [log]); return ( ); } // ============ Root App ============ function App() { const [authStatus, setAuthStatus] = useState(null); // null=loading, false=unauthed, true=authed const [authError, setAuthError] = useState(null); const [appState, setAppState] = useState(null); const [view, setView] = useState('todo'); const [toasts, setToasts] = useState([]); const [openTask, setOpenTask] = useState(null); const [openThread, setOpenThread] = useState(null); const [banner, setBanner] = useState(null); const [showRail, setShowRail] = useState(false); const [refreshKey, setRefreshKey] = useState(0); // increment to force TenderView full reload const [refreshingAll, setRefreshingAll] = useState(false); const [activeMailbox, setActiveMailbox] = useState('me'); const [mailboxes, setMailboxes] = useState([]); // ---- Auth check on mount ---- useEffect(() => { // Read auth_error from URL if any const params = new URLSearchParams(location.search); if (params.get('auth_error')) { setAuthError(decodeURIComponent(params.get('auth_error'))); history.replaceState({}, '', '/'); } api.get('/api/auth/status') .then(({ authenticated }) => setAuthStatus(authenticated)) .catch(() => setAuthStatus(false)); }, []); // ---- Poll state when authenticated ---- useEffect(() => { if (!authStatus) return; const load = () => { api.get('/api/state') .then(s => setAppState(s)) .catch(console.error); }; load(); const id = setInterval(load, 20000); // refresh every 20 s return () => clearInterval(id); }, [authStatus]); // ---- Load mailboxes once authenticated ---- useEffect(() => { if (!authStatus) return; api.get('/api/mailbox/list') .then(list => setMailboxes(list)) .catch(() => {}); }, [authStatus]); // ---- Restore activeMailbox from session on first state load ---- const mailboxRestored = useRef(false); useEffect(() => { if (!appState || mailboxRestored.current) return; mailboxRestored.current = true; const mb = appState.activeMailbox || 'me'; if (mb !== 'me') { setActiveMailbox(mb); if (mb === 'shared:tenders') setView('tenders-inbox'); } }, [appState]); // ---- Mailbox switch ---- const handleMailboxSwitch = useCallback(async (mailboxId) => { setActiveMailbox(mailboxId); try { await api.post('/api/mailbox/select', { mailbox: mailboxId }); } catch (e) { /* non-critical */ } // Always switch to the correct interface view when mailbox changes if (mailboxId === 'shared:tenders') { setView('tenders-inbox'); } else { setView('todo'); } }, []); // ---- Helpers ---- const pushToast = (msg, folder) => { const id = Math.random().toString(36).slice(2); setToasts(t => [...t, { id, msg, folder }]); }; const removeToast = id => setToasts(t => t.filter(x => x.id !== id)); const refreshState = useCallback(() => { api.get('/api/state').then(s => setAppState(s)).catch(console.error); }, []); // ---- Scan ---- const handleScan = async () => { if (appState?.scanning) return; try { await api.post('/api/scan', {}); pushToast('Scan started — refreshing shortly…'); setTimeout(refreshState, 4000); setTimeout(refreshState, 9000); } catch (err) { pushToast('Scan failed: ' + err.message); } }; // Register global handler so OpportunitiesView can jump back to Tenders Inbox useEffect(() => { window._jumpToConversation = (convId, subject) => { setView('tenders-inbox'); setRefreshKey(k => k + 1); window._pendingConversationJump = { conversationId: convId, subject }; }; return () => { delete window._jumpToConversation; }; }, []); // Refresh everything: state + tenders folder tree + current folder messages const handleRefreshAll = async () => { if (refreshingAll) return; setRefreshingAll(true); try { // 1. Bust folder tree cache + reload folders in-place (no remount) if (window._tenderBustRefresh) { await window._tenderBustRefresh(); } else { setRefreshKey(k => k + 1); // fallback: full remount } // 2. Refresh app state refreshState(); pushToast('↻ Refreshed — all folders and emails updated'); } finally { setTimeout(() => setRefreshingAll(false), 3000); } }; // ---- Thread toggle ---- const handleToggle = (threadId) => { setAppState(prev => ({ ...prev, threads: prev.threads.map(t => t.id === threadId ? { ...t, expanded: !t.expanded } : t), })); }; // ---- Task done/undo ---- const handleCheck = async (threadId, taskId) => { const thread = appState?.threads?.find(t => t.id === threadId); const task = thread?.tasks?.find(t => t.id === taskId); if (!task) return; if (task.doneAt) { // undo await api.post('/api/task/undo', { threadId, taskId }).catch(console.error); setAppState(prev => ({ ...prev, threads: prev.threads.map(th => th.id !== threadId ? th : { ...th, tasks: th.tasks.map(t => t.id !== taskId ? t : { ...t, doneAt: null }), }), })); } else { // optimistic update const now = new Date().toISOString(); setAppState(prev => ({ ...prev, threads: prev.threads.map(th => th.id !== threadId ? th : { ...th, tasks: th.tasks.map(t => t.id !== taskId ? t : { ...t, doneAt: now }), }), })); try { const { moved, folder } = await api.post('/api/task/done', { threadId, taskId }); if (moved && folder) pushToast('Email moved in Outlook →', folder); // Task 5: auto-dismiss matching follow-ups const matchingFU = (appState?.followUps || []).filter(fu => fu.threadId === threadId || (fu.subject && task?.subject && fu.subject.toLowerCase() === task.subject.toLowerCase()) ); for (const fu of matchingFU) { api.post('/api/followup/dismiss', { id: fu.id }).catch(console.error); } refreshState(); } catch (err) { // rollback setAppState(prev => ({ ...prev, threads: prev.threads.map(th => th.id !== threadId ? th : { ...th, tasks: th.tasks.map(t => t.id !== taskId ? t : { ...t, doneAt: null }), }), })); pushToast('Error: ' + err.message); } } }; // ---- Standalone task done/undo ---- const handleCheckStandalone = async (taskId) => { const task = appState?.standaloneManualTasks?.find(t => t.id === taskId); if (!task) return; if (task.doneAt) { // undo setAppState(prev => ({ ...prev, standaloneManualTasks: (prev.standaloneManualTasks || []).map(t => t.id !== taskId ? t : { ...t, doneAt: null } ), })); api.post('/api/task/standalone/undo', { id: taskId }).catch(console.error); } else { // mark done const now = new Date().toISOString(); setAppState(prev => ({ ...prev, standaloneManualTasks: (prev.standaloneManualTasks || []).map(t => t.id !== taskId ? t : { ...t, doneAt: now } ), })); try { await api.post('/api/task/standalone/done', { id: taskId }); refreshState(); } catch (err) { setAppState(prev => ({ ...prev, standaloneManualTasks: (prev.standaloneManualTasks || []).map(t => t.id !== taskId ? t : { ...t, doneAt: null } ), })); pushToast('Error: ' + err.message); } } }; // ---- Dispute actions ---- const handleDispute = async (a) => { try { if (a.type === 'state') { await api.post('/api/dispute/state', { id: a.id, state: a.next }); if (a.next === 'resolved') pushToast('Email moved in Outlook →', 'Disputes & Claims'); } if (a.type === 'close') { await api.post('/api/dispute/close', { id: a.id }); pushToast('Dispute closed →', 'Disputes & Claims'); } if (a.type === 'delete') { await api.post('/api/dispute/delete', { id: a.id }); pushToast('Dispute deleted · audit kept'); } refreshState(); } catch (err) { pushToast('Error: ' + err.message); } }; // ---- Banner ---- const handleBanner = (choice) => { if (choice === 'accept' && banner) { pushToast('Added to thread', banner.threadTitle); refreshState(); } setBanner(null); }; // ---- Counts ---- const counts = useMemo(() => { const threads = appState?.threads || []; const disputes = appState?.disputes || []; const followup = appState?.followUps || []; const done = appState?.doneHistory || {}; const opps = appState?.opportunities || []; return { todo: threads.reduce((n,t) => n + t.tasks.filter(x=>!x.doneAt && !x.deletedAt).length, 0), done: Object.values(done).flat().length, followup: followup.length, disputes: disputes.filter(d => d.state !== 'resolved').length, disputesEsc: disputes.filter(d => d.state === 'escalated').length, opportunitiesNew: opps.filter(o => o.status === 'new').length || undefined, deleted: ( threads.reduce((n,t) => n + t.tasks.filter(x => x.isManual && x.deletedAt).length, 0) + (appState?.standaloneManualTasks||[]).filter(x => x.deletedAt).length + (appState?.dismissedFollowUps||[]).length ) || undefined, }; }, [appState]); // ---- Update page title with badge ---- useEffect(() => { document.title = counts.todo > 0 ? `(${counts.todo}) ATLAS Email Agent — Elite Roads` : 'ATLAS Email Agent — Elite Roads'; }, [counts.todo]); // ---- Loading ---- if (authStatus === null) { return (

Loading…

); } if (authStatus === false) { return ; } if (!appState) { return (

Loading state…

); } const currentThread = openTask ? appState.threads.find(th => th.tasks.some(x => x.id === openTask.id)) : null; return (
setShowRail(r => !r)} onRefreshAll={handleRefreshAll} refreshingAll={refreshingAll} />
{view === 'todo' && ( { setOpenTask(t); setOpenThread(th); }} banner={banner} onBanner={handleBanner} onRefresh={refreshState} dismissedFollowUps={appState.dismissedFollowUps || []} standaloneManualTasks={appState.standaloneManualTasks || []} onCheckStandalone={handleCheckStandalone} /> )} {view === 'done' && } {view === 'deleted' && } {view === 'followup' && } {view === 'disputes' && ( )} {view === 'fleet-kb' && } {view === 'tenders-inbox' && setView('opportunities')} />} {view === 'opportunities' && } {view === 'move-log' && } {view === 'todos' && ( )} {view === 'folders' && } {view === 'style' && ( { await api.post('/api/settings/reply', rs); pushToast('Reply style saved'); refreshState(); }} onInterfaceChange={async (iface) => { await api.post('/api/interface', { interface: iface }); pushToast('Workspace changed — reloading…'); setTimeout(() => window.location.reload(), 800); }} /> )}
{showRail && ( setShowRail(false)} /> )} {openTask && (currentThread || openThread) && ( { setOpenTask(null); setOpenThread(null); }} onCheck={() => handleCheck((currentThread || openThread).id, openTask.id)} onSend={refreshState} /> )}
); } ReactDOM.createRoot(document.getElementById('root')).render();