// Entity drawer + Observability (Retrievals/Usage) + Home
const { useState: useGx } = React;
// Entity drawer — resolves the clicked id against the live /skill/graph
// snapshot and renders the REAL node (aliases, properties, columns,
// connections, raw DTO). An id the snapshot doesn't contain gets a minimal
// "not in the graph" card; there is no fixture to fall back to.
const ENTITY_ICON_BY_TYPE = { table: 'Table', column: 'Table', document: 'Doc', chunk: 'Doc', concept: 'Sparkle' };
const EDGE_VERB = { mapping: 'maps to', dependency: 'depends on', relation: 'related', category: 'category', structure: 'links' };
function DrawerShell({ onClose, children }) {
return (
{loading ? 'Loading graph…'
: failed ? "Couldn't load the knowledge graph, so this entity can't be resolved. Try again once the backend is reachable."
: 'This entity is not in the current knowledge-graph snapshot.'}
);
}
function KV2({ k, v }) {
return
{k}{v}
;
}
// Observability page with Retrievals/Usage tabs
function ObservabilityPage({ openDetail }) {
const [tab, setTab] = useGx('retrievals');
return (
{(stats.total - classified).toLocaleString()} older ask{stats.total - classified === 1 ? '' : 's'} predate the current audit format and aren't classified.
)}
);
}
// Named UsageMetricCard (not MetricCard): every top-level function here is a
// global under babel-standalone, and chat_inspector.jsx already owns MetricCard.
function UsageMetricCard({ label, value, spark, delta, sub, subtle }) {
return (
{label}
{value}
{(delta || sub) && (
{delta && {delta}}
{sub && {sub}}
)}
{spark && spark.length > 1 && (
)}
);
}
// Home — every figure is read from the backend:
//
// the graph snapshot (GET /skill/graph, shared app-wide cache) → what the org
// knows and what it learned in the last 24h
// GET /skill/retrievals/stats?days=30 → ask volume and latency
// GET /skill/retrievals?page=1&limit=5 → the newest asks
//
// There is no demo dataset behind this page. A block whose source hasn't
// answered yet shows '—' / a skeleton, and a block whose source failed says so
// — neither is filled in with a plausible-looking number.
const HOME_RECENT_LIMIT = 5;
const HOME_STATS_DAYS = 30;
const HOME_CLOCK_MS = 60000;
// The retrieval figures are re-read on this cadence (and immediately whenever
// the tab comes back to the foreground). Without it "N today (UTC)" would keep
// reporting yesterday's count after UTC midnight, next to a header clock that
// does tick — and an ask made in Chat would not show up until a route change.
const HOME_REFRESH_MS = 300000;
function HomePage({ setRoute }) {
const [snapshot, setSnapshot] = useGx(null);
const [snapError, setSnapError] = useGx(null);
const [stats, setStats] = useGx(null);
const [statsError, setStatsError] = useGx(null);
const [recent, setRecent] = useGx(null);
const [recentError, setRecentError] = useGx(null);
const [now, setNow] = useGx(() => new Date());
// The header prints a wall clock, so it has to keep moving — a timestamp
// frozen at mount is wrong for every minute the tab stays open. The same tick
// re-evaluates the rolling "last 24 hours" digest below.
React.useEffect(() => {
const t = setInterval(() => setNow(new Date()), HOME_CLOCK_MS);
return () => clearInterval(t);
}, []);
// Graph snapshot — served from the app-wide cache primed at mount, and kept
// current by the same subscription Fabric / Learning use.
React.useEffect(() => {
let cancelled = false;
fetchGraphSnapshotCached()
.then(s => { if (!cancelled) { setSnapshot(s); setSnapError(null); } })
.catch(e => { if (!cancelled) setSnapError((e && e.message) || 'request failed'); });
const unsub = typeof subscribeGraphSnapshot === 'function'
? subscribeGraphSnapshot(s => { if (!cancelled) setSnapshot(s); })
: null;
return () => { cancelled = true; if (unsub) unsub(); };
}, []);
// Retrieval stats + the recent list, refreshed on a slow cadence and on
// foreground return. A failed read keeps the last good value on screen and
// reports itself; it never falls back to invented numbers.
React.useEffect(() => {
let alive = true;
const load = () => {
ParcleRetrievalsAPI.stats(HOME_STATS_DAYS)
.then(r => { if (alive) { setStats(r); setStatsError(null); } })
.catch(e => { if (alive) setStatsError((e && e.message) || 'request failed'); });
ParcleRetrievalsAPI.list(1, HOME_RECENT_LIMIT)
.then(r => { if (alive) { setRecent(r); setRecentError(null); } })
.catch(e => { if (alive) setRecentError((e && e.message) || 'request failed'); });
};
load();
let last = Date.now();
const tick = () => {
if (document.hidden) return; // don't poll a page nobody is looking at
const t = Date.now();
if (t - last < HOME_REFRESH_MS) return;
last = t;
load();
};
const onVisible = () => { if (!document.hidden) { last = Date.now(); load(); } };
const timer = setInterval(tick, HOME_CLOCK_MS);
document.addEventListener('visibilitychange', onVisible);
return () => {
alive = false;
clearInterval(timer);
document.removeEventListener('visibilitychange', onVisible);
};
}, []);
const events = React.useMemo(
() => (snapshot ? deriveLearningEvents(snapshot) : []),
[snapshot]
);
const graphStats = React.useMemo(
() => deriveFabricStats(snapshot, events),
[snapshot, events]
);
// Recomputed on every `now` tick so "last 24h" stays a rolling window rather
// than 24 hours measured from whenever the page happened to mount.
const digest = React.useMemo(
() => fabRecentLearningDigest(events),
[events, now]
);
// Read off the same figure Fabric's "Entities indexed" card shows, rather
// than re-adding the composition buckets: `FactualNode.type` is a free string
// on the backend, so a producer emitting a new type would silently drop out
// of a hand-rolled sum while still counting on Fabric.
const nodeTotal = graphStats ? graphStats.entities.total : null;
// `daily` is zero-filled and today-last (UTC days) per the endpoint contract.
const todayAsks = stats && stats.daily && stats.daily.length
? stats.daily[stats.daily.length - 1].count : null;
return (
Welcome back, {fabOrgName()}
Here's what's happening across your org knowledge.
);
}
// "What the graph learned in the last 24 hours", counted off the snapshot. A
// quiet day says so — it does not round up to a headline.
function HomeDigest({ snapshot, stats, error, digest, setRoute }) {
const box = (accent) => ({
marginTop: 24, padding: '16px 20px',
background: accent ? 'var(--accent-muted)' : 'var(--surface)',
border: accent ? '1px solid transparent' : '1px solid var(--border-subtle)',
borderRadius: 10,
display: 'flex', alignItems: 'center', gap: 20,
});
if (error) {
return (
Couldn't load the knowledge graph
{error}
);
}
if (!snapshot) {
return (
);
}
// A brand-new org has an empty graph, so "nothing new" would be a dead end —
// point it at the thing that would actually give it something to learn.
if (stats && stats.isEmpty) {
return (
No knowledge indexed yet
Connect Databricks or Slack, or upload a file, and the graph starts learning.
);
}
if (digest.total === 0) {
return (
Nothing new in the last 24 hours
The graph learns as sources sync and questions get asked.
);
}
// The newest asks from the audit trail, same shape the Observability tab
// renders. Clicking a row hands off to that tab, which owns the detail drawer.
function HomeRecentRetrievals({ data, error, setRoute }) {
if (error) {
return (