{/* Upload lives in its own card above, next to Slack and Databricks. */}
{/* Wrap the call: onClick={openAddFlow} would pass the click event as
the vendor id, and no vendor matches an event object. */}
)}
{/* Your sources */}
{!live && sourcesPopulated && (
Request a connector and we'll prioritize it based on demand.
)}
);
}
// ── Live hero stats ─────────────────────────────────────────────────────────
// On a live backend every number above the connectors is read from the backend:
//
// Connected — how many of the eight real connectors actually hold
// something: Slack authorized (GET …/slack/connection),
// Notion authorized (GET …/notion/connection),
// Google Drive / Gmail / Google Calendar authorized (ONE
// probe of the shared "google" connection fills all three
// tiles, so one Google sign-in counts all three),
// Telegram signed in (GET …/telegram/connection),
// Databricks connected (GET …/databricks/connection),
// at least one uploaded file (GET /ingestion/files)
// Indexed — documents and tables in the org's knowledge graph
// Concepts — business concepts learned from them, and the semantic edges
// between them
// Both are counted off the GET /skill/graph snapshot the app
// already primes at mount — the first read comes free from
// that shared cache, and it is only refetched on a slow
// cadence while this page is actually on screen.
// Retrieval calls — `total` of the /skill/retrievals audit trail
//
// A number stays '—' until its source answers, and a failed read keeps the last
// known value: falling back to 0 would read as "your data disappeared".
//
// The eight cards below poll the same connection endpoints on their own, faster
// cadences, so right after a change the strip can trail its card by a moment;
// the change events the cards fire keep that window short.
const CX_TICK_MS = 5000; // cheap visibility check; the work below is rate-limited
const CX_STATS_POLL_MS = 30000;
const CX_GRAPH_RELOAD_MS = 300000; // /skill/graph is the whole graph — refetch sparingly
// 940 → "940", 8200 → "8.2k", 14900 → "15k", 1240000 → "1.24M".
function cxNum(n) {
const v = Number(n);
if (!isFinite(v)) return '—';
if (v < 1000) return String(Math.round(v));
const k = v / 1000;
if (v < 9950) return `${k.toFixed(1)}k`; // below the point where .toFixed(1) would read "10.0k"
if (Math.round(k) < 1000) return `${Math.round(k)}k`;
const m = v / 1e6;
return m < 10 ? `${m.toFixed(2)}M` : `${Math.round(m)}M`;
}
// Structure edges (table↔column, document↔chunk) are the graph's own plumbing —
// counting them as "relationships" would drown the number the user cares about,
// the same reason the Learning stream skips them.
function cxGraphCounts(snap) {
if (!snap) return null;
const factual = snap.factual_nodes || [];
const ofType = (t) => factual.filter(n => n.type === t).length;
const semanticEdges = ['mapping_edges', 'dependency_edges', 'relation_edges', 'category_edges']
.reduce((sum, key) => sum + (snap[key] || []).length, 0);
return {
documents: ofType('document'),
tables: ofType('table'),
concepts: (snap.concept_nodes || []).length,
edges: semanticEdges,
};
}
// `graphMock: true` in config.js serves the demo graph even against a real
// backend. These tiles promise real numbers, so in that configuration they show
// nothing rather than the mock's counts.
function cxGraphMock() {
return typeof graphApiMockEnabled === 'function' && graphApiMockEnabled();
}
// Never let one unreachable endpoint reject the whole batch.
function cxSafe(fn) {
try { return Promise.resolve(fn()).catch(() => null); }
catch (e) { return Promise.resolve(null); }
}
// A probe that keeps failing this many times in a row is reported as "not
// connected" rather than holding the whole tile at '—' forever: a blip must not
// drop a connector out of the count, but a route that is genuinely broken on a
// deployment must not make the number permanently unreadable either.
const CX_PROBE_GIVE_UP = 3;
function ConnectorsHeroLive() {
const { useState, useEffect, useRef, useCallback } = React;
// Per connector: true / false / null (nothing usable yet). The tile stays '—'
// until all eight have a value.
const [conns, setConns] = useState({ slack: null, notion: null, googledrive: null, gmail: null, gcalendar: null, telegram: null, databricks: null, upload: null });
const [graph, setGraph] = useState(null);
const [asks, setAsks] = useState(null);
const alive = useRef(true);
const rootRef = useRef(null);
const fails = useRef({ slack: 0, notion: 0, googledrive: 0, gmail: 0, gcalendar: 0, telegram: 0, databricks: 0, upload: 0 });
useEffect(() => () => { alive.current = false; }, []);
// The Connectors route stays mounted and is merely display:none'd when the
// user navigates away, so a poll would otherwise keep running off-screen
// forever. offsetParent is null exactly when an ancestor is display:none.
const onScreen = () => !document.hidden && !!(rootRef.current && rootRef.current.offsetParent !== null);
const refresh = useCallback(async () => {
// Drive/Gmail/Calendar share ONE "google" connection (each of their
// /connection endpoints round-trips Composio for the same record), so the
// strip probes it once through the Drive API and reuses the answer for all
// three — is_active is identical by construction, only the per-product
// sync_job differs and this count doesn't read it.
const [slack, notion, google, telegram, dbx, files, page] = await Promise.all([
cxSafe(() => OrgSlackAPI.status()),
cxSafe(() => OrgNotionAPI.status()),
cxSafe(() => OrgGoogleDriveAPI.status()),
cxSafe(() => OrgTelegramAPI.status()),
cxSafe(() => DatabricksAPI.connection()),
cxSafe(() => ParcleUploadAPI.files(0)), // limit=0 → counts only
cxSafe(() => ParcleRetrievalsAPI.list(1, 1)),
]);
if (!alive.current) return;
// A probe that failed keeps whatever it last reported (see CX_PROBE_GIVE_UP).
const settle = (key, answered, value, prev) => {
if (answered) { fails.current[key] = 0; return value; }
fails.current[key] += 1;
if (prev !== null) return prev;
return fails.current[key] >= CX_PROBE_GIVE_UP ? false : null;
};
setConns(prev => ({
slack: settle('slack', !!slack, !!(slack && slack.is_active), prev.slack),
notion: settle('notion', !!notion, !!(notion && notion.is_active), prev.notion),
googledrive: settle('googledrive', !!google, !!(google && google.is_active), prev.googledrive),
gmail: settle('gmail', !!google, !!(google && google.is_active), prev.gmail),
gcalendar: settle('gcalendar', !!google, !!(google && google.is_active), prev.gcalendar),
telegram: settle('telegram', !!telegram, !!(telegram && telegram.is_active), prev.telegram),
databricks: settle('databricks', !!dbx, !!(dbx && dbxIsConnected(dbx)), prev.databricks),
upload: settle('upload', !!files, !!(files && (files.total || 0) > 0), prev.upload),
}));
if (page && typeof page.total === 'number') setAsks(page.total);
}, []);
// One ticker drives both refreshes. It runs often but does nothing off-screen,
// and refreshes the moment the page comes BACK on screen (route switch or tab
// switch) so a returning user never reads numbers from before they left.
const lastStats = useRef(0);
const lastGraph = useRef(0);
const wasOnScreen = useRef(true);
useEffect(() => {
lastStats.current = Date.now();
lastGraph.current = Date.now(); // the app-mount prime is this page's first read
refresh();
const tick = () => {
const on = onScreen();
const returned = on && !wasOnScreen.current;
wasOnScreen.current = on;
if (!on) return;
const now = Date.now();
if (returned || now - lastStats.current >= CX_STATS_POLL_MS) {
lastStats.current = now;
refresh();
}
// Ingestion finishes minutes after an upload does, so without this the
// graph counts would sit frozen at whatever the prime saw.
if (now - lastGraph.current >= CX_GRAPH_RELOAD_MS) {
lastGraph.current = now;
if (!cxGraphMock()) reloadGraphSnapshot();
}
};
const t = setInterval(tick, CX_TICK_MS);
document.addEventListener('visibilitychange', tick);
return () => { clearInterval(t); document.removeEventListener('visibilitychange', tick); };
}, [refresh]);
// The connectors announce their own writes, so the strip catches up at once
// instead of a poll interval later. Uploads fire on every queue change, so
// react to the active→idle EDGE only (same rule as the upload card).
const wasUploading = useRef(false);
useEffect(() => {
const onConnectorChanged = () => {
lastStats.current = Date.now();
refresh();
// A connect / disconnect / finished upload is also the most likely moment
// for the graph to have moved. reloadGraphSnapshot coalesces, so asking
// opportunistically is safe; the slow tick still covers ingestion that
// only lands minutes later.
lastGraph.current = Date.now();
if (!cxGraphMock()) reloadGraphSnapshot();
};
const onUploadChanged = (e) => {
// Refresh-only announce (a delete in the upload drawer): counts moved
// without any batch running, so skip the edge detection.
if (e && e.detail && e.detail.refresh) { onConnectorChanged(); return; }
const active = !!(e && e.detail && e.detail.active);
if (wasUploading.current && !active) onConnectorChanged();
wasUploading.current = active;
};
window.addEventListener(ODB_CHANGED_EVENT, onConnectorChanged);
window.addEventListener(OS_CHANGED_EVENT, onConnectorChanged);
window.addEventListener(ON_CHANGED_EVENT, onConnectorChanged);
window.addEventListener(GOOGLE_CHANGED_EVENT, onConnectorChanged);
window.addEventListener(OT_CHANGED_EVENT, onConnectorChanged);
window.addEventListener(PARCLE_UPLOAD_EVENT, onUploadChanged);
return () => {
window.removeEventListener(ODB_CHANGED_EVENT, onConnectorChanged);
window.removeEventListener(OS_CHANGED_EVENT, onConnectorChanged);
window.removeEventListener(ON_CHANGED_EVENT, onConnectorChanged);
window.removeEventListener(GOOGLE_CHANGED_EVENT, onConnectorChanged);
window.removeEventListener(OT_CHANGED_EVENT, onConnectorChanged);
window.removeEventListener(PARCLE_UPLOAD_EVENT, onUploadChanged);
};
}, [refresh]);
useEffect(() => {
if (cxGraphMock()) return undefined;
let cancelled = false;
const apply = (s) => { if (!cancelled && alive.current) setGraph(cxGraphCounts(s)); };
fetchGraphSnapshotCached().then(apply).catch(() => { /* '—' until a later reload lands */ });
const unsub = subscribeGraphSnapshot(apply);
return () => { cancelled = true; unsub(); };
}, []);
const states = [conns.slack, conns.notion, conns.googledrive, conns.gmail, conns.gcalendar, conns.telegram, conns.databricks, conns.upload];
const count = states.every(s => s !== null) ? states.filter(Boolean).length : null;
return (