// Agent Jobs — pipeline page (job-card rows)
const { useState: useStateJobs, useMemo: useMemoJobs } = React;
function fmtMoney(n) {
if (n >= 1000) return `$${(n/1000).toFixed(1)}K`;
return `$${n}`;
}
function fmtMoneyExact(n) { return `$${n.toLocaleString()}`; }
function aggregateLine(jobs) {
const onJob = jobs.filter(j => j.state === 'on_the_job');
const pipeline = jobs.filter(j => ['discovered','scoping','onboarding'].includes(j.state));
const totalCost = onJob.reduce((s,j) => s + (j.monthly_cost_usd || 0), 0);
return `${onJob.length} in production · ${pipeline.length} in pipeline · ${fmtMoney(totalCost)}/mo total · last started 4 days ago`;
}
const FUNCTION_LABEL = {
finance: 'Finance', customer: 'Customer', sales: 'Sales',
ops: 'Ops', legal: 'Legal', engineering: 'Engineering',
};
// Stage indices for the strip
const STAGE_ORDER = ['discovered','scoping','onboarding','on_the_job'];
const STAGE_SHORT = {
discovered: 'Triage',
scoping: 'Setup',
onboarding: 'Onboarding',
on_the_job: 'Production',
};
// =================================================================
// Per-stage center cell — the "current stage" data row inside the card
// =================================================================
function StageCenterDiscovered({ j }) {
// Unused now — Triage uses TriageCard which replaces JobCard entirely.
return null;
}
function TriageCard({ j }) {
const peopleVisible = j.people.slice(0, 3);
const peopleMore = j.people.length - peopleVisible.length;
const toolsVisible = j.tools.slice(0, 3);
const toolsMore = j.tools.length - toolsVisible.length;
return (
{j.title}
{j.source.label}
{j.description}
{j.why}
People
{peopleVisible.map((p, i) => (
{p}
))}
{peopleMore > 0 && +{peopleMore}}
·
Tools
{toolsVisible.map((t, i) => (
))}
{toolsMore > 0 && +{toolsMore}}
Expected value
{j.value.headline}
Last updated {j.last_updated}
Open →
);
}
function StageCenterScoping({ j }) {
// Unused — Setup uses SetupCard which replaces JobCard entirely.
return null;
}
const SETUP_STATUS_LABEL = {
drafting: 'Drafting',
awaiting_input: 'Awaiting your input',
ready: 'Ready to onboard agent',
};
function SetupProgressLine({ label, done, total }) {
const complete = done >= total;
return (
{label}
{done}
of
{total}
);
}
function SetupCard({ j }) {
const sp = j.setup_progress;
const boundariesDefined = sp.boundaries === 'Defined';
return (
{j.title}
{SETUP_STATUS_LABEL[j.setup_status]}
{j.setup_description}
{j.setup_status === 'awaiting_input' && j.setup_needs && (
→ {j.setup_needs}
)}
Setup progress
-
Agent boundaries
{sp.boundaries}
Last updated {j.setup_updated_at}
Open →
);
}
const ONBOARD_STATUS_LABEL = {
connecting_integrations: 'Connecting integrations',
loading_context: 'Loading context',
ready_for_trial: 'Ready for trial',
};
function OnboardCard({ j }) {
const integrations = j.integrations || [];
const toolsTotal = integrations.length;
const toolsConnected = integrations.filter(i => i.status === 'connected').length;
const toolsDone = toolsConnected === toolsTotal && toolsTotal > 0;
const ctxLoaded = (j.loaded_context || []).length;
const ctxDone = j.onboarding_status === 'loading_context'
? false
: (j.onboarding_status === 'ready_for_trial' || ctxLoaded > 0 && j.onboarding_status !== 'connecting_integrations');
const ctxComplete = j.onboarding_status === 'ready_for_trial';
const permsDone = !!j.permissions_summary;
const ready = j.onboarding_status === 'ready_for_trial';
const status = j.onboarding_status;
const toolsVisible = integrations.slice(0, 5);
const toolsMore = toolsTotal - toolsVisible.length;
return (
{j.title}
{ONBOARD_STATUS_LABEL[status]}
{j.onboarding_description}
{ready && (
→ Onboarding complete — review and start the 14-day trial.
)}
Tools
{toolsVisible.map((it, i) => (
))}
{toolsMore > 0 && +{toolsMore}}
Onboarding progress
-
Context loaded
{ctxComplete ? `${ctxLoaded} sources` : (ctxLoaded > 0 ? `${ctxLoaded} loading` : 'Pending')}
-
Permissions defined
{permsDone ? 'Defined' : 'Pending'}
Last updated {j.onboarding_updated_at}
Open →
);
}
function ProductionCard({ j }) {
const isAnomaly = j.anomaly || j.operational_status === 'anomaly';
const inTrial = !!j.trial_period;
const toolsVisible = (j.integrations || []).slice(0, 5);
const toolsMore = (j.integrations || []).length - toolsVisible.length;
let badgeLabel = null;
let badgeKind = '';
if (inTrial) {
badgeLabel = `Trial period · Day ${j.trial_day} of ${j.trial_duration_days}`;
badgeKind = j.trial_day >= j.trial_duration_days ? 'trial-decision' : 'trial';
} else if (j.operational_status === 'anomaly') {
badgeLabel = 'Anomaly';
badgeKind = 'anomaly';
} else if (j.operational_status === 'paused') {
badgeLabel = 'Paused';
badgeKind = 'paused';
} else {
badgeLabel = 'Running';
badgeKind = 'running';
}
const throughputUnit = inTrial ? 'so far' : '/mo';
const cost = j.monthly_cost_usd || 0;
const perUnit = (j.monthly_cases && cost) ? (cost / j.monthly_cases) : null;
return (
{j.title}
{badgeLabel}
{inTrial && j.decision_ready && (
→ Trial complete — review performance and decide to hire, extend, or reject.
)}
{isAnomaly && j.anomaly_note && (
⚠ {j.anomaly_note}
)}
Tools
{toolsVisible.map((it, i) => (
))}
{toolsMore > 0 && +{toolsMore}}
{inTrial ? 'Trial performance' : 'Live performance'}
-
Throughput
{(j.monthly_cases || 0).toLocaleString()}
{throughputUnit}
-
Quality
{Math.round((j.monthly_resolution_rate || j.resolution_rate || 0) * 100)}%
{inTrial ? (
-
Human corrections
5 ? 'pcm-value-warn' : '')}`}>
{j.human_corrections}
) : (
-
Monthly cost
{fmtMoneyExact(cost)}
{perUnit !== null && · ${perUnit.toFixed(2)}/{j.unit_label}}
)}
Last updated {j.last_updated}
Open →
);
}
function StageCenterScoping_OLD({ j }) {
return (
Inputs → Outputs
{j.inputs_outputs_summary}
Won't do
{j.boundaries.map((b,i) => {b})}
);
}
function StageCenterOnboarding({ j }) {
return (
Loading
{j.loaded_context.join(' · ')}
);
}
function StageCenterTrial({ j }) {
const complete = j.trial_day >= j.trial_duration_days;
const corrColor = j.human_corrections === 0 ? 'success' : (j.human_corrections > 5 ? 'warn' : '');
return (
Trial progress
Day {j.trial_day} of {j.trial_duration_days}
Cases
{j.cases_handled} of {j.cases_expected}
Resolution
{Math.round(j.resolution_rate * 100)}%
Corrections
{j.human_corrections}
);
}
function StageCenterOTJ({ j }) {
return (
Throughput
{j.monthly_cases.toLocaleString()} /mo
Quality
{Math.round(j.monthly_resolution_rate * 100)}%
Status
{j.anomaly_note && {j.anomaly_note}
}
);
}
const STAGE_CENTER = {
discovered: StageCenterDiscovered,
scoping: StageCenterScoping,
onboarding: StageCenterOnboarding,
in_trial: StageCenterTrial,
on_the_job: StageCenterOTJ,
};
// =================================================================
// Right-side summary metric per row
// =================================================================
function RowSummary({ j }) {
if (j.state === 'discovered') {
return (
);
}
if (j.state === 'scoping') {
return (
Updated
{j.scoping_updated_at}
);
}
if (j.state === 'onboarding') {
const connected = (j.integrations || []).filter(i => i.status === 'connected').length;
return (
Integrations
{connected} of {j.integrations.length}
);
}
if (j.state === 'in_trial') {
const complete = j.trial_day >= j.trial_duration_days;
return (
{complete ? 'Decision' : 'Avg time'}
{complete ? 'Ready' : `${j.avg_resolution_minutes} min`}
);
}
if (j.state === 'on_the_job') {
const perUnit = j.monthly_cost_usd / j.monthly_cases;
return (
Monthly cost
{fmtMoneyExact(j.monthly_cost_usd)}/mo
${perUnit.toFixed(2)}/{j.unit_label}
);
}
return null;
}
// =================================================================
// Stage strip — 5 cells showing pipeline position
// =================================================================
function StageStrip({ j }) {
const currentIdx = STAGE_ORDER.indexOf(j.state);
return (
{STAGE_ORDER.map((sid, i) => {
const isCurrent = i === currentIdx;
const isPast = i < currentIdx;
return (
{isCurrent &&
}
{STAGE_SHORT[sid]}
{isPast && ✓}
{isCurrent && }
);
})}
{j.title}
{isAnomaly && ⚠ anomaly}
{j.state === 'on_the_job' && j.started_at && (
● Running since {j.started_at}
)}
{j.state === 'in_trial' && (
▸ Trial day {j.trial_day} of {j.trial_duration_days}
)}
{j.state === 'discovered' && (
✦ Surfaced {j.surfaced_at}
)}
{j.state === 'scoping' && (
◆ Updated {j.scoping_updated_at}
)}
{j.state === 'onboarding' && (
⇄ Connecting to {j.integrations.length} systems
)}
{(j.function_tags || []).map(t => (
{FUNCTION_LABEL[t] || t}
))}
Unit: {j.unit_label}
);
}
// =================================================================
// Group section
// =================================================================
function StageGroup({ stage, jobs, filtered, collapsed, onToggle, isFirst, isLast }) {
return (
{stage.n}
{!collapsed && (
<>
{stage.desc}
{stage.id === 'discovered' && (
Values shown are estimates based on observed activity.
)}
{jobs.length === 0
?
{filtered ? 'No matching jobs in this stage.' : stage.empty}
: jobs.map(j => {
if (j.state === 'discovered') return
;
if (j.state === 'scoping') return ;
if (j.state === 'onboarding') return ;
if (j.state === 'on_the_job') return ;
return ;
})}
)}
);
}
// =================================================================
// Header / filter bar
// =================================================================
function FilterChip({ active, onClick, children }) {
return ;
}
// =================================================================
// Page
// =================================================================
function AgentJobsPage({ renderTopBar }) {
const [search, setSearch] = useStateJobs('');
const [fnFilter, setFnFilter] = useStateJobs('All');
const [statusFilter, setStatusFilter] = useStateJobs('All');
const [view, setView] = useStateJobs('pipeline'); // pipeline | table
const [collapsed, setCollapsed] = useStateJobs({}); // stage id -> bool
const filtered = useMemoJobs(() => {
let rows = JOBS;
if (search) {
const q = search.toLowerCase();
rows = rows.filter(j => j.title.toLowerCase().includes(q) || (j.detection_signal || '').toLowerCase().includes(q));
}
if (fnFilter !== 'All') {
rows = rows.filter(j => (j.function_tags || []).some(t => t.toLowerCase() === fnFilter.toLowerCase()));
}
if (statusFilter === 'Anomalies') {
rows = rows.filter(j => j.operational_status === 'anomaly' || j.anomaly);
} else if (statusFilter === 'Needs my attention') {
rows = rows.filter(j => j.setup_status === 'awaiting_input' || j.onboarding_status === 'ready_for_trial' || (j.trial_period && j.trial_day >= j.trial_duration_days) || j.state === 'discovered' || j.anomaly);
} else if (statusFilter === 'Running normally') {
rows = rows.filter(j => j.operational_status === 'running');
}
return rows;
}, [search, fnFilter, statusFilter]);
const isFiltered = search !== '' || fnFilter !== 'All' || statusFilter !== 'All';
const sortStage = (id, rows) => {
if (id === 'scoping') {
const order = { awaiting_input: 0, ready: 1, drafting: 2 };
return [...rows].sort((a,b) => order[a.setup_status] - order[b.setup_status]);
}
if (id === 'onboarding') {
return [...rows].sort((a,b) => (b.onboarding_status === 'ready_for_trial') - (a.onboarding_status === 'ready_for_trial'));
}
if (id === 'in_trial') {
return [...rows].sort((a,b) => {
if (a.anomaly && !b.anomaly) return -1;
if (b.anomaly && !a.anomaly) return 1;
return (b.trial_day / b.trial_duration_days) - (a.trial_day / a.trial_duration_days);
});
}
if (id === 'on_the_job') {
return [...rows].sort((a,b) => {
// 1. Trials with decision ready
const aDec = a.trial_period && a.decision_ready ? 0 : 1;
const bDec = b.trial_period && b.decision_ready ? 0 : 1;
if (aDec !== bDec) return aDec - bDec;
// 2. Anomalies
const aAnom = a.operational_status === 'anomaly' ? 0 : 1;
const bAnom = b.operational_status === 'anomaly' ? 0 : 1;
if (aAnom !== bAnom) return aAnom - bAnom;
// 3. Other trials
const aTrial = a.trial_period ? 0 : 1;
const bTrial = b.trial_period ? 0 : 1;
if (aTrial !== bTrial) return aTrial - bTrial;
// 4. By cost desc
return (b.monthly_cost_usd || 0) - (a.monthly_cost_usd || 0);
});
}
return rows;
};
return (
<>
{renderTopBar(null)}
{STAGES.map((stage, idx) => {
const rows = sortStage(stage.id, filtered.filter(j => j.state === stage.id));
return (
setCollapsed(c => ({ ...c, [stage.id]: !c[stage.id] }))}
isFirst={idx === 0}
isLast={idx === STAGES.length - 1}
/>
);
})}
);
}
window.AgentJobsPage = AgentJobsPage;