/* global React, Button, Icon, StatusBadge, EmptyState, useApiResource, apiFetch, formatDuration, formatPercent, formatNumber, formatRelative, DashboardInventoryStrip, DashHeroStat, RunTimelineChart, FailingWorkflowsLoadingRows, DashboardRecentLoadingRows, ClassificationPill, ScoreChip, DashboardTimePicker, parseDashboardTimeRange, dashboardTimeRangeKey, buildDashboardRangeQuery, formatDashboardTimeRangeLabel, getDashboardRefreshIntervalMs */
// Insights — unified operator surface. Mixes live dashboard signal
// (inventory strip, KPI hero, activity chart, top failing, recent
// runs) with the daily editorial digest "paper" so a Head of Product
// can see "what's happening right now" alongside "what the AI thinks
// is worth fixing today" without switching tabs.
//
// Layout (desktop, full-width):
// inventory strip: Servers / Monitors / Workflows counts
// (lifted from the standalone Dashboard view)
// KPI hero: Runs · Success rate · Failed · Median (48h)
// calendar: continuous date axis (one cell per day, dot
// per digest, hover/click into a past report)
// utility bar: eyebrow + actions (regenerate, email toggle)
// two-col grid:
// • left (paper): the editorial digest (offset window)
// • right (rail): Activity timeline · Top failing · Recent runs
//
// All three right-rail panels read the same /api/dashboard/* endpoints
// the standalone /dashboard tab uses. We lock the window to the
// digest's own 48h analysis window so the live numbers and the
// editorial narrative speak about the same slice of time.
const {
useEffect: useEffectI,
useMemo: useMemoI,
useRef: useRefI,
useState: useStateI,
} = React;
const SEVERITY_TONES = {
high: 'bad',
medium: 'warn',
low: 'ok',
};
const IMPACT_TONES = {
high: 'brand',
medium: 'amber',
low: 'neutral',
};
// Time the inflight (queued/running) report polls for a final state.
// We back off to 60s after the first 30s to avoid hammering when an LLM
// pass takes >2 min. Capped so a stuck job doesn't keep the page busy.
const REPORT_POLL_MS = 4_000;
const REPORT_POLL_BACKOFF_AFTER_MS = 30_000;
const REPORT_POLL_BACKOFF_MS = 12_000;
const REPORT_POLL_MAX_MS = 5 * 60_000;
function InsightsPage({ navigate, reportId, queryString = '' }) {
const [refreshTick, setRefreshTick] = useStateI(0);
const [archiving, setArchiving] = useStateI(false);
const refreshKey = `${reportId || 'latest'}:${refreshTick}`;
const reportPath = reportId
? `/api/insights/${reportId}`
: `/api/insights/latest`;
const reportResource = useApiResource(reportPath, [refreshKey]);
// Calendar walks ~14 days back from today (CALENDAR_DAYS); pulling 30
// reports leaves headroom for orgs with denser-than-daily cadence
// (catchup runs after an outage etc.).
const calendar = useApiResource('/api/insights?limit=30', [refreshKey]);
const emailPrefs = useApiResource('/api/insights/email-preferences', []);
// ── Live operational signal ─────────────────────────────────────
// Live numbers (KPI hero + Activity chart + Top failing + Recent
// runs) all read /api/dashboard/* against a user-selected time
// window. Window state is mirrored to the URL query so a
// bookmark-share captures the slice. Default is 48h, matching
// the digest's own analysis window so the rail numbers line up
// with the editorial paper.
const liveRange = useMemoI(() => parseDashboardTimeRange(queryString), [queryString]);
const liveRangeKey = dashboardTimeRangeKey(liveRange);
const liveRangeLabel = formatDashboardTimeRangeLabel(liveRange);
const liveRangeQuery = buildDashboardRangeQuery(liveRange);
const liveSummary = useApiResource(
`/api/dashboard/summary?${liveRangeQuery}`,
[liveRangeKey, refreshTick],
);
const liveTimeline = useApiResource(
// 12 buckets — the rail panel is ~360px wide, so 24 was packing
// too many bars to fit; the rightmost would crop. 12 still gives
// a useful at-a-glance shape and never overflows the box.
`/api/dashboard/run-timeline?${liveRangeQuery}&buckets=12`,
[liveRangeKey, refreshTick],
);
const liveRecent = useApiResource(
`/api/dashboard/recent-runs?${liveRangeQuery}&limit=8`,
[liveRangeKey, refreshTick],
);
const liveFailing = useApiResource(
`/api/dashboard/top-failing-workflows?${liveRangeQuery}`,
[liveRangeKey, refreshTick],
);
const liveServers = useApiResource('/api/mcp-servers');
const liveMonitors = useApiResource('/api/tool-monitors');
const liveWorkflows = useApiResource('/api/workflows');
const [generating, setGenerating] = useStateI(false);
const [pollDeadlineMs, setPollDeadlineMs] = useStateI(null);
const pollTimerRef = useRefI(null);
const report = reportResource.data?.report || null;
const liveLoading = (liveSummary.loading || liveTimeline.loading
|| liveRecent.loading || liveFailing.loading);
const hasAnyLiveData = Boolean(liveSummary.data || liveTimeline.data
|| liveRecent.data || liveFailing.data);
const liveRefreshing = liveLoading && hasAnyLiveData;
function reloadLive() {
liveSummary.reload();
liveTimeline.reload();
liveRecent.reload();
liveFailing.reload();
liveServers.reload();
liveMonitors.reload();
liveWorkflows.reload();
}
function setLiveRange(nextRange) {
const params = new URLSearchParams(queryString);
params.delete('range');
params.delete('from');
params.delete('to');
if (nextRange.type === 'absolute') {
params.set('from', new Date(nextRange.from).toISOString());
params.set('to', new Date(nextRange.to).toISOString());
} else {
params.set('range', nextRange.range);
}
const next = params.toString();
// Preserve the active /insights/:id when the operator changes
// window; the window is independent of which report they're
// reading, but the URL still needs to capture both.
const base = reportId ? `/insights/${reportId}` : '/insights';
navigate(`${base}${next ? `?${next}` : ''}`);
}
// Auto-refresh the live panels at the cadence the standalone
// Dashboard uses (faster for shorter windows). The digest itself
// doesn't refresh — it's a daily artifact addressed by id.
useEffectI(() => {
if (liveRange.type !== 'relative') return undefined;
const intervalMs = getDashboardRefreshIntervalMs(liveRange.range);
const timer = window.setInterval(() => {
reloadLive();
}, intervalMs);
return () => window.clearInterval(timer);
}, [liveRangeKey, liveSummary.reload, liveTimeline.reload, liveRecent.reload, liveFailing.reload]);
useEffectI(() => {
const status = report?.status;
if (!status) return undefined;
if (status === 'completed' || status === 'failed' || status === 'skipped') {
if (pollTimerRef.current) {
window.clearTimeout(pollTimerRef.current);
pollTimerRef.current = null;
}
setPollDeadlineMs(null);
return undefined;
}
const startedAt = pollDeadlineMs ?? Date.now() + REPORT_POLL_MAX_MS;
if (pollDeadlineMs === null) setPollDeadlineMs(startedAt);
if (Date.now() > startedAt) return undefined;
const elapsed = REPORT_POLL_MAX_MS - (startedAt - Date.now());
const wait = elapsed > REPORT_POLL_BACKOFF_AFTER_MS
? REPORT_POLL_BACKOFF_MS
: REPORT_POLL_MS;
pollTimerRef.current = window.setTimeout(() => {
reportResource.reload();
}, wait);
return () => {
if (pollTimerRef.current) {
window.clearTimeout(pollTimerRef.current);
pollTimerRef.current = null;
}
};
}, [report?.status, report?.updatedAt, pollDeadlineMs, reportResource.reload]);
async function regenerate() {
if (generating) return;
setGenerating(true);
try {
const result = await apiFetch('/api/insights', { method: 'POST' });
if (result?.report?.status) {
setPollDeadlineMs(Date.now() + REPORT_POLL_MAX_MS);
}
setRefreshTick((tick) => tick + 1);
} catch (error) {
console.error('Failed to enqueue insights report', error);
} finally {
setGenerating(false);
}
}
async function archiveDigest(next) {
if (archiving || !report?.id) return;
const willArchive = next !== false;
if (willArchive && !window.confirm(
'Archive this digest? It will be hidden from the calendar and the previous-day diff. The page will jump to the most recent live digest.',
)) return;
setArchiving(true);
try {
await apiFetch(`/api/insights/${report.id}/archive`, {
method: 'PATCH',
body: JSON.stringify({ archived: willArchive }),
});
// Calendar must reflect the change immediately (the strip filters
// archived rows server-side). Reload it AND the report. For
// archive, also navigate back to /insights so /latest picks the
// next live digest. For unarchive, stay on the report.
calendar.reload();
if (willArchive) {
navigate('/insights');
} else {
setRefreshTick((tick) => tick + 1);
}
} catch (error) {
window.alert(`${willArchive ? 'Archive' : 'Unarchive'} failed: ${error.message || error}`);
} finally {
setArchiving(false);
}
}
async function toggleEmail(next) {
try {
await apiFetch('/api/insights/email-preferences', {
method: 'PATCH',
body: JSON.stringify({ enabled: Boolean(next) }),
});
emailPrefs.reload();
} catch (error) {
console.error('Failed to update email preferences', error);
}
}
const isLoading = reportResource.loading && !report;
const errorState = reportResource.error;
const calendarRows = calendar.data?.rows || [];
const previousReports = reportResource.data?.previousReports || [];
const emailEnabled = Boolean(emailPrefs.data?.enabled);
return (
{/* Page toolbar — title on the left, live-window controls on
the right. The picker + refresh button govern every "live"
element on this page (inventory, KPI hero, Activity / Top
failing / Recent runs) but never the digest paper, which
lives in its own daily window. */}
Insights
{/* Live operational signal — inventory + KPI hero. Both
respond to the page-level time picker. These live above
the Daily Digest section by design: the digest section
itself contains only the calendar + the editorial paper,
and the paper carries a small intro + a few KPIs of its
own (different visual treatment from the hero so they
read as "operations bar" vs "editorial intro"). */}
{/* Main split:
LEFT — the Daily digest column (its own header,
calendar, and the paper). The "Daily digest"
label lives INSIDE this column so it does not
visually claim the right rail.
RIGHT — live charts that respond to the page-level
time picker, completely independent of the
digest's daily window. */}
Daily digest
Editorial summary generated daily for the last 48 hours
{errorState && (
Couldn’t load this report
{errorState.message || 'The insights API returned an error. Try refreshing in a moment.'}
);
}
// Reusable right-rail panel wrapper. The right column needs a
// distinctly calmer voice than the digest paper — flat surface, no
// offset shadow — so the eye reads "live context" vs the "report".
function InsightsRailPanel({ title, meta = null, link = null, navigate = null, children }) {
return (
);
}
function InsightsRecentList({ rows, loading, navigate }) {
if (loading) return ;
if (rows.length === 0) {
return (
No runs in this range yet.
);
}
return (
{rows.map((run) => (
))}
);
}
// Compact actions row used inside the "Daily digest" band on the
// merged Insights view. Title + date live in the band header
// (insights-digestband__lead); here we only render the email
// opt-in toggle and the regenerate button so the band fits on a
// single row at desktop widths.
function InsightsHeaderActions({
emailEnabled,
emailLoading,
onToggleEmail,
regenerating,
onRegenerate,
}) {
return (
);
}
// Number of days the continuous calendar spans. Strict invariant: the
// strip renders exactly one cell per day in this window — never more,
// never less. Today is the rightmost cell; we walk back N-1 days from
// there. Days without a digest are still drawn (empty cell), days with
// digest(s) draw one small square red dot per digest in the cell.
//
// The calendar now lives INSIDE the digest column (~58% of page
// width), so 14 cells fits comfortably while keeping each day cell
// legible without horizontal scrolling on a typical desktop.
const CALENDAR_DAYS = 14;
function InsightsCalendarStrip({ rows, loading, currentReportId, navigate }) {
const scrollerRef = useRefI(null);
// hoverInfo describes the dot the cursor (or focus) is on:
// { report, anchorLeft, anchorTop }. Null when nothing is hovered.
const [hoverInfo, setHoverInfo] = useStateI(null);
// Group ALL reports by the viewer's local calendar day (YYYY-MM-DD),
// keeping every digest sorted oldest → newest within the day so dots
// line up chronologically inside the cell. Local-day bucketing matches
// how operators think about "yesterday's" and "today's" digest — a
// manual rerun fired late in the local evening still belongs to the
// day it was triggered, even when its UTC timestamp has crossed
// midnight.
const reportsByDay = useMemoI(() => {
const map = new Map();
for (const row of rows || []) {
const key = ymdLocal(row.periodEnd);
if (!key) continue;
const list = map.get(key) || [];
list.push(row);
map.set(key, list);
}
for (const list of map.values()) {
list.sort((a, b) => new Date(a.periodEnd).getTime() - new Date(b.periodEnd).getTime());
}
return map;
}, [rows]);
// Continuous date axis: today + N-1 prior days in the viewer's local
// timezone, oldest first so `flex-direction: row` reads chronologically
// left → right. We step using the local-date constructor instead of
// subtracting 86,400,000 ms so DST transitions don't drift the axis.
const cells = useMemoI(() => {
const out = [];
const today = startOfDayLocal(new Date());
for (let i = CALENDAR_DAYS - 1; i >= 0; i -= 1) {
const date = new Date(today.getFullYear(), today.getMonth(), today.getDate() - i);
const key = ymdLocal(date);
const reports = reportsByDay.get(key) || [];
out.push({
key,
date,
reports,
isToday: i === 0,
});
}
return out;
}, [reportsByDay]);
// On mount and whenever the active report changes, scroll the active
// dot's cell (or today's) into view. One-shot per dependency change
// so operators can pan freely without being yanked back.
useEffectI(() => {
const root = scrollerRef.current;
if (!root) return;
const target = root.querySelector('[data-calendar-active="true"]')
|| root.querySelector('[data-calendar-today="true"]');
if (target && typeof target.scrollIntoView === 'function') {
target.scrollIntoView({ behavior: 'auto', inline: 'end', block: 'nearest' });
} else {
root.scrollLeft = root.scrollWidth;
}
}, [currentReportId, cells.length]);
function panBy(delta) {
const root = scrollerRef.current;
if (!root) return;
root.scrollBy({ left: delta, behavior: 'smooth' });
}
function showHover(report, event) {
const rect = event.currentTarget.getBoundingClientRect();
const rootRect = scrollerRef.current?.parentElement?.getBoundingClientRect();
setHoverInfo({
report,
anchorLeft: rect.left + rect.width / 2 - (rootRect?.left || 0),
anchorTop: rect.top - (rootRect?.top || 0),
});
}
function hideHover() {
setHoverInfo(null);
}
function openReport(report) {
navigate(`/insights/${report.id}`);
}
return (
);
}
function CalendarHoverCard({ hover }) {
const { report, anchorLeft, anchorTop } = hover;
// Container is `position: relative`; we measured (anchorLeft, anchorTop)
// relative to it in showHover(). The card is centered horizontally on
// the dot and pulled up by its full height via translate-Y so it
// floats just above the calendar row.
const style = {
left: Math.max(8, anchorLeft),
top: Math.max(0, anchorTop),
};
const heat = successHeat(report.successRate);
return (
);
}
// Normalizer used to fingerprint editorial findings across days.
// Two findings are considered "the same issue" when their normalized
// title (alphanumerics only, lowercased, first 48 chars) and category
// match. Tool overlap isn't required because the LLM may rephrase the
// same root issue differently while keeping the topic intact.
function findingFingerprint(finding) {
const title = String(finding?.title || '')
.toLowerCase()
.replace(/[^a-z0-9 ]+/g, '')
.replace(/\s+/g, ' ')
.trim()
.slice(0, 48);
const category = String(finding?.category || 'other');
return `${category}::${title}`;
}
// Walks the prior-day reports back from today and returns a Map of
// fingerprint → consecutive-day-count for findings that show up in
// today AND in an unbroken chain of prior reports. The count includes
// today (so a finding present today + yesterday => 2). Findings that
// don't appear in yesterday's report aren't tracked here even if they
// returned earlier — we want adjacency, not historical reappearance.
function computePersistence(currentFindings, previousReports) {
const persistence = new Map();
if (!Array.isArray(currentFindings) || currentFindings.length === 0) return persistence;
const todayPrints = new Set(currentFindings.map(findingFingerprint));
for (const print of todayPrints) {
let streak = 1;
for (const prior of previousReports || []) {
const priorPrints = new Set((prior.findings || []).map(findingFingerprint));
if (priorPrints.has(print)) {
streak += 1;
} else {
break;
}
}
if (streak > 1) persistence.set(print, streak);
}
return persistence;
}
function InsightsReport({ report, previousReports, calendarRows, navigate, archiving, onArchive }) {
const metrics = report.metrics || {};
const narrative = report.narrative || {};
const totals = metrics.totals || {};
const focalMcp = metrics.focal_mcp || null;
const otherMcps = metrics.account_other_mcps || [];
const benchmarks = metrics.benchmark_competitor || [];
const productFindings = narrative.product_findings || [];
const setupFindings = narrative.setup_findings || [];
const competitorFindings = narrative.competitor_findings || [];
const diffPills = narrative.diff_pills || [];
const headlineCopy = (narrative.headline || '').trim();
const focalName = (narrative.focal_mcp_name || focalMcp?.name || '').trim();
const yesterday = previousReports?.[0];
const successDelta = (totals.success_rate != null && yesterday?.successRate != null)
? Math.round((totals.success_rate - yesterday.successRate) * 1000) / 10
: null;
return (
<>
{/* On-brand offset "window" container — same hard-ink card +
offset second sheet used on /runs/:id and on the landing
page hero. The window-head strip carries the mono eyebrow
on the left and the report URL on the right; the editorial
content lives inside `.i-page__inner` underneath.
NOTE: The large KPI pulse used to live above this paper;
it now lives on the page above the Daily Digest section
(see InsightsLiveHero in the parent). Inside the paper we
only keep a small editorial intro stats line below the
headline so the document carries "a few KPIs" without
duplicating the hero's heft. */}
);
}
// Big-bold-sentence headline. Designed to deliver the message
// before any chart so a Head of Product reading on phone gets the
// answer in 5 seconds. `lede` is an optional ONE-sentence intro
// shown beneath the headline when the headline cannot carry the
// news on its own. The KPI strip below carries every other number
// the reader needs.
function InsightsHeadline({ headline, lede = '', focalName }) {
return (
{focalName && (
{focalName}
)}
{headline &&
{headline}
}
{lede &&
{lede}
}
);
}
// One bucket (product / setup / competitor). Renders a section
// header followed by a vertical column of finding cards.
function InsightsFindingSection({ tone, title, subtitle, findings }) {
return (
{title}
{subtitle &&
{subtitle}
}
{findings.map((finding, idx) => (
))}
);
}
// A finding: tag + bold title at top (clickable header), and a
// collapsible body containing analysis → chart → fix. Default
// collapsed so the report stays scannable; readers expand only the
// findings they want to deep-dive on instead of scrolling through
// every chart. The "always-open" override is reserved for the
// no-data competitor placeholder where there's no body to hide.
function InsightsFindingCard({ finding, defaultOpen = false, forceOpen = false }) {
const tone = finding.tone || 'warning';
const [open, setOpen] = useStateI(defaultOpen);
const isOpen = forceOpen || open;
const hasBody = Boolean(finding.analysis || finding.chart || finding.fix);
const toggle = () => {
if (forceOpen || !hasBody) return;
setOpen((v) => !v);
};
return (
{isOpen && hasBody && (
{finding.analysis && (
{finding.analysis}
)}
{finding.chart && (
)}
{finding.fix && (
Recommendation
{finding.fix}
)}
)}
);
}
// Competitor section: when benchmark data is missing we still render
// a card explaining what would unlock this row. Honesty about gaps is
// part of the product — it's the Head of Product's most important
// missing signal.
function InsightsCompetitorSection({ findings, hasBenchmarks }) {
if (findings.length === 0 && !hasBenchmarks) {
// Empty-state card explains the missing signal. Collapsing it
// would defeat the purpose, so we render it always-open with no
// disclosure chrome.
const placeholder = {
tag: 'C0',
tone: 'info',
title: 'No benchmark batches finished in this window',
analysis:
"Competitor comparison is the most important signal a digest can carry. Without it we can't say whether your shell-fallback rate, token cost, or pass rate are normal for MCPs in your category.",
fix:
'Schedule a benchmark batch comparing this MCP against 2 or 3 competitors on your top workflows. Once it finishes, this section will surface findings like "Supabase agents finish Customer Notes in 1.2 min vs your 5.8 min".',
};
return (
How you compare to competitors
);
}
if (findings.length === 0) return null;
return (
);
}
// Same shape as `InsightsFindingSection` but the header is a button
// that toggles the list. Used by the benchmark/competitor block so
// the digest stays scannable — competitor findings are the longest
// section and most readers want to glance at the title before they
// decide to expand.
function CollapsibleFindingSection({ tone, title, subtitle, findings }) {
const [open, setOpen] = useStateI(false);
return (
{open && (
{findings.map((finding, idx) => (
))}
)}
);
}
function InsightsDiffPills({ pills }) {
return (
);
}
function InsightsAccountFooter({ otherMcps, focalName, navigate }) {
if (otherMcps.length === 0) return null;
return (
Account-wide notes · about measurement, not your MCP
{focalName ? (
<>This digest analyzed {focalName} in detail.
) : null}
Other MCPs in this account also ran in the window:{' '}
{otherMcps.map((mcp, idx) => (
{idx > 0 ? ', ' : ''}
))}
. Low pass rates on auxiliary MCPs are most often auth-profile expiry, not MCP quality.
);
}
// Inline SVG chart renderer. Supports the four kinds the LLM is
// allowed to emit: bar_horizontal, bar_horizontal_stacked,
// bar_vertical, donut. Kept dependency-free so the digest renders
// fine in any embed context (email screenshots, screenshots, etc.).
function InsightsChart({ chart }) {
if (!chart) return null;
if (chart.kind === 'donut') return ;
if (chart.kind === 'bar_vertical') return ;
if (chart.kind === 'bar_horizontal_stacked') {
return ;
}
return ;
}
function chartToneColor(tone) {
switch (tone) {
case 'danger': return 'var(--accent-danger, #d04949)';
case 'warning': return 'var(--accent-warning, #c98316)';
case 'success': return 'var(--accent-success, #2f8c5d)';
case 'info': return 'var(--accent-info, #2f6fc8)';
case 'neutral': return 'var(--text-tertiary, #8a93a6)';
default: return 'var(--accent-info, #2f6fc8)';
}
}
const FALLBACK_SERIES_TONES = ['info', 'success', 'danger', 'warning', 'neutral'];
// Donut slices must each get a distinct color. The series tone (when the
// LLM provides one) describes the overall chart, not a single slice, so
// using it for every slice — as a naive `series[0].tone || palette[i]`
// would — collapses the whole donut to one color. Instead, anchor the
// series tone to slice 0 and walk the fallback palette for the rest,
// skipping the anchored tone so two slices never collide.
//
// Defensive against unknown tone strings: `chartToneColor` maps anything
// outside the five known tones to the same color as `info`, so anchoring
// an unrecognized tone would recreate the same-color collapse against
// the `info` palette entry. Treat unknown tones as if no tone was given.
function donutSliceTones(seriesTone, sliceCount) {
const anchor = FALLBACK_SERIES_TONES.includes(seriesTone) ? seriesTone : null;
const palette = anchor
? [anchor, ...FALLBACK_SERIES_TONES.filter((t) => t !== anchor)]
: FALLBACK_SERIES_TONES;
const tones = [];
for (let i = 0; i < sliceCount; i++) {
tones.push(palette[i % palette.length]);
}
return tones;
}
function HorizontalBarChart({ chart, stacked = false }) {
const categories = chart.categories || [];
const series = chart.series || [];
const suffix = chart.value_suffix || '';
const seriesMax = stacked
? Math.max(0, ...categories.map((_, i) => series.reduce((s, ser) => s + (Number(ser.data[i]) || 0), 0)))
: Math.max(0, ...series.flatMap((s) => s.data.map((v) => Number(v) || 0)));
const max = seriesMax > 0 ? seriesMax : 1;
return (
{categories.map((cat, i) => {
const seriesValues = series.map((s) => Number(s.data[i]) || 0);
const total = seriesValues.reduce((a, b) => a + b, 0);
return (
{cat}
{stacked ? (
{series.map((ser, sIdx) => {
const v = seriesValues[sIdx];
if (v <= 0) return null;
return (
);
})}
);
}
function DonutChart({ chart }) {
const series = chart.series || [];
const categories = chart.categories || [];
const allValues = series[0]?.data || [];
const total = allValues.reduce((a, b) => a + (Number(b) || 0), 0);
if (total <= 0) return null;
const sliceCount = Math.max(allValues.length, categories.length);
const sliceTones = donutSliceTones(series[0]?.tone || null, sliceCount);
const r = 36;
const c = 2 * Math.PI * r;
let acc = 0;
return (
{categories.map((cat, i) => (
{cat}{formatChartNumber(allValues[i])}
))}
);
}
function formatChartNumber(value) {
const n = Number(value);
if (!Number.isFinite(n)) return '';
if (Math.abs(n) >= 1000) return formatNumber(Math.round(n));
if (Number.isInteger(n)) return String(n);
return n.toFixed(1).replace(/\.0$/, '');
}
// (Legacy renderer and its companions removed — `InsightsReport` is
// the single rendering path. Pre-two-bucket digests (one historic
// row) were deleted from `org_insight_reports`; every digest the
// scheduler produces from here on conforms to the modern schema:
// { headline, lede, focal_mcp_name, product_findings[],
// setup_findings[], competitor_findings[], diff_pills[] }.)
function InsightsSkeleton() {
return (
);
}
function InsightsEmpty({ regenerating, onRegenerate }) {
return (
Generate first report
)} />
);
}
// Returns true when the selected report exists but has not finished
// generating yet. Rendering the report shell in this state would show
// an empty headline, no findings, and a misleading "0%" pass-rate
// card — `InsightsGenerating` is the placeholder we show instead.
function isReportGenerating(report) {
return report?.status === 'queued' || report?.status === 'running';
}
function InsightsGenerating({ status }) {
const label = status === 'queued' ? 'Queued' : 'Working on it';
return (
{label}
Today's digest is still being written. Check back in a minute.
);
}
function statusLabel(status) {
switch (status) {
case 'queued': return 'Queued — generating soon';
case 'running': return 'Generating now';
case 'failed': return 'Last run failed';
case 'skipped': return 'Skipped';
default: return status;
}
}
function formatPeriod(report) {
if (!report) return '';
const start = report.periodStart ? new Date(report.periodStart) : null;
const end = report.periodEnd ? new Date(report.periodEnd) : null;
if (!start || !end) return '';
const sameDay = start.toDateString() === end.toDateString();
const fmt = (d) => d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
return sameDay ? fmt(start) : `${fmt(start)} – ${fmt(end)}`;
}
function formatShortDate(iso) {
if (!iso) return '';
const d = new Date(iso);
if (Number.isNaN(d.getTime())) return '';
return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
}
function formatWeekday(date) {
if (!(date instanceof Date) || Number.isNaN(date.getTime())) return '';
return date.toLocaleDateString(undefined, { weekday: 'short' }).toUpperCase();
}
function formatLongDate(date) {
if (!(date instanceof Date) || Number.isNaN(date.getTime())) return '';
return date.toLocaleDateString(undefined, {
weekday: 'long',
month: 'short',
day: 'numeric',
});
}
// Truncates a Date to start-of-day in the viewer's local timezone.
// The calendar strip is local-anchored so its labels and groupings
// match how the viewer thinks about "today" and "yesterday"; the
// scheduler still dedupes on the UTC calendar day server-side, but
// that contract is orthogonal to how the digest is displayed.
function startOfDayLocal(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}
// YYYY-MM-DD in the viewer's local timezone. Stable key the calendar
// uses to match a report's period_end against the cell axis. Strings
// (ISO) are accepted as-is.
function ymdLocal(input) {
if (!input) return '';
const d = input instanceof Date ? input : new Date(input);
if (Number.isNaN(d.getTime())) return '';
const y = d.getFullYear();
const m = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
return `${y}-${m}-${day}`;
}
function successTone(rate) {
if (rate === null || rate === undefined) return 'neutral';
if (rate >= 0.95) return 'ok';
if (rate >= 0.85) return 'warn';
return 'bad';
}
function successHeat(rate) {
if (rate === null || rate === undefined) return 'neutral';
if (rate >= 0.9) return 'ok';
if (rate >= 0.7) return 'warn';
return 'bad';
}
window.InsightsPage = InsightsPage;