);
}
// Matches the shipped segmented control: counts inline in the label, the
// active segment a solid Black Blue pill, a Copilot bolt on Sourcing, and the
// right-hand chevron that affords the horizontal scroll.
function TabRow({ tabs, active, onChange }){
return (
);
}
/* The Outreach tab — full theater. Live scanning animation + the actual candidates in outreach */
function OutreachTheater({ outreachCount, candidates, selectedId, onSelect, onBackToWorkspace }) {
return (
{/* Back to workspace */}
{/* Theater */}
{/* Animated background dot grid */}
Your AI recruiter is actively sourcing
Scanning the FactoryFix talent pool for Machine Operator I — Greensboro, NC
{/* Scan stripes */}
{/* Stats */}
{/* Sub-header for the candidate list */}
Found and reaching out
{candidates.length} candidates
);
}
function TheaterStat({ n, label, color }) {
return (
{n}
{label}
);
}
/* The little fake candidate cards being "scanned" */
function ScanCards() {
// 8 fake rows: avatar circle + 2 bars. A few are "matched" (highlighted).
const rows = [
{ matched:false }, { matched:true }, { matched:false }, { matched:false },
{ matched:true }, { matched:false }, { matched:false }, { matched:true },
];
return (
{rows.map((r,i) => (
{r.matched && (
MATCH
)}
))}
);
}
function DotGridBackground() {
return (
);
}
/* ============================================================
SHARED — candidate list + row
============================================================ */
// `triggerFor` is optional: pass a (candidate) => trigger|null and each row
// renders its Action-needed reason. Omitted by every layout but Focus, so
// behaviour is unchanged everywhere else.
/* ============================================================
SCORE BADGE — ported from ats-ui's ApplicationScoreCompactDisplay
(+ the compact branch of ApplicationScoreCard that wraps it).
Thresholds are CriteriaThresholdEnum: GREEN 3.5, YELLOW 2. Note the
yellow band — the prototype previously had only two tones and split at
3.0, so anything from 2.0–3.4 was showing green when production shows
amber. Score always renders to one decimal.
============================================================ */
function ScoreStar() {
return (
);
}
function ScoreBadge({ score, jobTitle, hideJobTitle, isSelected, isViewed }) {
const hasScore = typeof score === 'number' && !Number.isNaN(score);
const badgeBg = !hasScore
? (isViewed ? CC.tint[60] : CC.tint[80])
: score >= 3.5 ? CC.primary[300]
: score >= 2 ? CC.caution[300]
: CC.critical[400];
return (
);
}
function CandidateList({ items, selectedId, onSelect, showSourceBadge, vocab, compact, showJustLanded, triggerFor, triggerStyle }) {
if (!items.length) {
return (
No candidates in this stage yet.
);
}
return (
{items.map(c => (
))}
);
}
function CandidateRow({ c, selected, onSelect, showSourceBadge, vocab, compact, justLanded, trigger, triggerStyle }) {
const v = vocab ? window.FFLIB.vocab(vocab) : window.FFLIB.vocab('applied-sourced');
const applied = c.source === 'applied';
// Production grades the score badge: green when it's a good match, red when
// it isn't (shipped panel shows 0.3 / 0.8 / 1.3 in red, 3.5 / 4.3 in green).
return (
onSelect?.(c.id)} className="ff-crow" style={{
position:'relative', padding: compact ? '10px 12px 10px 14px' : '12px 16px 14px',
borderBottom:`1px solid ${CC.tint[80]}`, cursor:'pointer',
background: selected ? CC.highlight[50]+'66' : '#fff',
}}>
{selected && }
{/* Row 1: checkbox + name + time. The checkbox lives on THIS line only,
so revealing it shifts the name across while the role and score lines
below stay put — that's the production behaviour. */}
{/* Row 3: score · job · provenance chip. Per ConversationIndexCard the
chip flows immediately after the score group rather than anchoring
right — the score sits in a min-w-0 wrapper so the job title is what
truncates, and the chip is shrink-0. */}
{/* Row 4 (opt-in): the Action-needed reason — why this person is blocked
on a human, and what to do. Only rendered when a layout passes it. */}
{trigger && triggerStyle !== 'badge' && (
{r.text}
{r.t}
