/* global React, ReactDOM, ToastProvider, Sidebar, TopBar, HomeScreen, PipedriveScreen, KnowledgeBaseScreen, SettingsScreen */
const { useState, useEffect, useCallback } = React;
// ── Auth helpers ───────────────────────────────────────────────────────────────
function getToken() { return sessionStorage.getItem('robylab_token') || ''; }
function setToken(t) { sessionStorage.setItem('robylab_token', t); }
function clearToken() { sessionStorage.removeItem('robylab_token'); }
function authHeader() { return { Authorization: 'Basic ' + getToken() }; }
window.getToken = getToken;
window.authHeader = authHeader;
// ── Login screen ───────────────────────────────────────────────────────────────
function LoginScreen({ onLogin }) {
const [user, setUser] = useState('');
const [pass, setPass] = useState('');
const [err, setErr] = useState('');
const [loading, setLoading] = useState(false);
const submit = async (e) => {
e.preventDefault();
if (!user || !pass) { setErr('Enter username and password'); return; }
setLoading(true);
setErr('');
const token = btoa(user + ':' + pass);
try {
const r = await fetch('/api/auth/check', { headers: { Authorization: 'Basic ' + token } });
if (r.ok) { setToken(token); onLogin(); }
else { setErr('Invalid credentials'); }
} catch { setErr('Could not reach server'); }
setLoading(false);
};
return (
);
}
// ── App ────────────────────────────────────────────────────────────────────────
function App() {
const [authed, setAuthed] = useState(!!getToken());
const [route, setRoute] = useState('home');
const [toolStatuses, setToolStatuses] = useState({ pipedrive: null, knowledge: null });
const navigate = (target) => {
setRoute(target);
requestAnimationFrame(() => {
const el = document.getElementById('content-scroll');
if (el) el.scrollTop = 0;
});
};
// Poll tool statuses every 30s
const pollStatuses = useCallback(async () => {
if (!getToken()) return;
try {
const [pd, kb] = await Promise.allSettled([
fetch('/api/pd/api/sync/status', { headers: authHeader() }).then(r => r.json()),
fetch('/api/kb/sync/status', { headers: authHeader() }).then(r => r.json()),
]);
setToolStatuses({
pipedrive: pd.status === 'fulfilled' && pd.value.isRunning ? 'running' : 'idle',
knowledge: kb.status === 'fulfilled' && (kb.value.crm_running || kb.value.files_running || kb.value.summarize_running) ? 'running' : 'idle',
});
} catch {}
}, []);
useEffect(() => {
if (!authed) return;
pollStatuses();
const id = setInterval(pollStatuses, 30000);
return () => clearInterval(id);
}, [authed, pollStatuses]);
// Handle 401 from proxy — logout
useEffect(() => {
if (!authed) return;
const handler = (e) => {
if (e.detail?.status === 401) { clearToken(); setAuthed(false); }
};
window.addEventListener('robylab-401', handler);
return () => window.removeEventListener('robylab-401', handler);
}, [authed]);
if (!authed) return setAuthed(true)}/>;
const breadcrumbs = (() => {
if (route === 'home') return ['Robylab', 'Home'];
if (route === 'pipedrive') return ['Robylab', 'Tools', 'Pipedrive Sync'];
if (route === 'knowledge') return ['Robylab', 'Tools', 'Knowledge Base'];
if (route === 'settings') return ['Robylab', 'System', 'Settings'];
return ['Robylab'];
})();
return (
{route === 'home' &&
}
{route === 'pipedrive' && { clearToken(); setAuthed(false); }}/>}
{route === 'knowledge' && }
{route === 'settings' && }
);
}
ReactDOM.createRoot(document.getElementById('root')).render();