)}
);
}
// Rotative horizontal carousel for the coaching queue. The active card sits
// centred; the prev/next deals peek in at both edges. Navigate by dragging
// the stage, the flanking arrows, the pips, or the arrow keys — and it loops
// around in whichever direction is shorter.
function CoachCarousel({ deals, coached, onToggleCoached, openDeal }) {
const n = deals.length;
const [idx, setIdx] = useState(0);
const [dragDx, setDragDx] = useState(0);
const [dragging, setDragging] = useState(false);
const [stageH, setStageH] = useState(null);
const startX = useRef(null);
const moved = useRef(false);
const activeCardRef = useRef(null);
// Keep the index in range if the queue shrank under it (e.g. filter change).
useEffect(() => { setIdx((i) => (i > n - 1 ? 0 : i)); }, [n]);
// Measure the active card so the stage can animate its height between
// cards whose content (evidence, questions) makes them different heights.
React.useLayoutEffect(() => {
const el = activeCardRef.current;
if (!el) return;
const measure = () => setStageH(el.offsetHeight);
measure();
if (typeof ResizeObserver === "undefined") return;
const ro = new ResizeObserver(measure);
ro.observe(el);
return () => ro.disconnect();
}, [idx, n]);
if (n === 0) {
return
Pipeline’s clean. Buyer proof is holding.
;
}
const go = (delta) => setIdx((i) => (i + delta + n) % n);
// Primary CTA — opens an action preview showing the drafted coaching DM
// with evidence + expected impact. Confirm fires: toast, mark coached,
// advance carousel, then a delayed outcome toast simulating the rep's
// follow-through so the demo closes the loop.
const fireAction = (deal) => {
const who = aeShortName(deal.aeName || "the rep");
const fullName = deal.aeName || who;
const questions = deal.coachingQuestions || [];
const missing = deal.evidenceMissing || [];
const messageText = [
`${deal.company} · ${deal.stage}`,
"",
"Quick check before forecast review:",
...questions.map((q) => "• " + q),
].join("\n");
// Coaching impact — Slack DMs land fast, severity dictates the lift.
const sev = deal.severity === "critical" ? "high" : deal.severity === "warn" ? "mid" : "good";
const likelihood = { high: 78, mid: 85, good: 92 }[sev];
const firmnessPct = { high: 0.55, mid: 0.70, good: 0.85 }[sev];
const firmnessRaw = Math.round((deal.amount || 0) * firmnessPct);
const firmness = formatManagerMoney(firmnessRaw);
const commit = () => {
if (typeof window.fireToast === "function") {
window.fireToast(`Coaching prep sent to ${who}`);
}
if (!coached.has(deal.id)) onToggleCoached(deal.id);
setTimeout(() => go(1), 500);
// Simulated follow-through: rep responds, gap closes, forecast firms.
setTimeout(() => {
if (typeof window.fireToast === "function") {
window.fireToast(`✓ ${who} confirmed ${deal.company} · gap closed · +${firmness} firmed`);
}
}, 5200);
};
if (typeof window.previewAction === "function") {
window.previewAction({
kicker: "Preview · Coaching prep",
title: `Send to ${fullName}`,
meta: [
{ label: "TO", value: fullName },
{ label: "CHANNEL", value: "Slack DM" },
{ label: "CONTEXT", value: `${deal.company} · ${deal.stage}` },
],
body: {
label: "Drafted message",
text: messageText,
},
impact: {
likelihood,
timeHorizon: "24h",
firmness,
firmnessRaw,
},
evidence: [
{ label: "Trigger", value: `${deal.triggerType} · ${deal.triggerAge}` },
...(missing.length ? [{ label: "Missing proof", value: missing.join(", ") }] : []),
...(deal.suggestedIntervention ? [{ label: "Recommended", value: deal.suggestedIntervention }] : []),
],
primaryLabel: `Send to ${who}`,
onConfirm: commit,
});
} else {
commit();
}
};
// Signed shortest-path offset of card i from the active index, so the deck
// wraps in whichever direction is closer (true rotative feel).
const signedOffset = (i) => {
let d = i - idx;
if (d > n / 2) d -= n;
if (d < -n / 2) d += n;
return d;
};
// Pointer tracking WITHOUT setPointerCapture — capture retargets the
// trailing mouseup/click onto the stage and the card's click handler
// never fires. Without capture, the pointer stays on the original target
// during normal swipes (release usually happens within the stage), so
// clicks reach the card and drag still works.
const onPointerDown = (e) => {
startX.current = e.clientX;
moved.current = false;
setDragging(true);
};
const onPointerMove = (e) => {
if (startX.current == null) return;
const dx = e.clientX - startX.current;
if (Math.abs(dx) > 6) moved.current = true;
setDragDx(dx);
};
const endDrag = (e) => {
if (startX.current == null) return;
const dx = e.clientX - startX.current;
startX.current = null;
setDragging(false);
setDragDx(0);
if (dx <= -56) go(1);
else if (dx >= 56) go(-1);
};
// Pointer left the stage mid-drag — release without committing.
const onPointerLeave = () => {
if (startX.current == null) return;
startX.current = null;
setDragging(false);
setDragDx(0);
};
// Swallow the click that follows a real drag so swiping never fires the
// buttons inside the card it landed on.
const onClickCapture = (e) => {
if (moved.current) { e.stopPropagation(); e.preventDefault(); moved.current = false; }
};
const onKeyDown = (e) => {
if (e.key === "ArrowLeft") { e.preventDefault(); go(-1); }
else if (e.key === "ArrowRight") { e.preventDefault(); go(1); }
};
return (
);
}
// Coaching queue — the manager's "what should I actually do" surface.
// Two parts: team patterns (one-off vs habit) up top, then the prioritised
// intervention queue. Clicking a rep's pattern filters the queue to them.
function CoachingScreen({ model, openDeal }) {
const { aes, deals, interventions, metrics } = model;
const [coached, setCoached] = useState(() => new Set());
const toggleCoached = (id) => setCoached((curr) => {
const next = new Set(curr);
if (next.has(id)) next.delete(id); else next.add(id);
return next;
});
// Per-rep pattern cards — the static coaching patterns enriched with the
// rep's live open-intervention count so the manager sees scale at a glance.
const patterns = useMemo(() => aes.map((ae) => {
const p = managerCoachingPatterns[ae.id];
const openCount = interventions.filter((d) => d.aeId === ae.id).length;
return { ae, openCount, ...(p || {}) };
}).filter((p) => p.pattern), [aes, interventions]);
// Queue: sort critical-first by amount. Order stays stable as cards get
// coached so the carousel index never jumps under the manager mid-swipe.
// AE filtering happens upstream (via Recalc's By-AE rollup), not here.
const rank = (d) => (d.severity === "critical" ? 2 : d.severity === "warn" ? 1 : 0);
const queue = useMemo(() => interventions
.slice()
.sort((a, b) => rank(b) - rank(a) || (b.amount || 0) - (a.amount || 0)),
[interventions]);
const dueCount = queue.filter((d) => !coached.has(d.id)).length;
return (
{/* KPI strip — only metrics unique to the coaching workflow. The
critical count and forecast-at-risk dollars live in Recalc, so
they don't repeat here. */}
Conversations due{dueCount}
Reps showing a pattern{patterns.length} / {aes.length}
{dueCount} {dueCount === 1 ? "conversation" : "conversations"} to have
Open deals where seller activity is racing ahead of buyer signals — exactly where coaching pays off.
{coached.size > 0 && (
· {coached.size} marked coached today
)}
);
}
// Manager view = forecast experience. The sidebar sections map to forecast
// modules (recalc / deals / backtest / config), plus a coaching queue that
// surfaces the per-deal coaching layer. The manager view itself is just thin
// chrome around whichever section is active.
function ManagerView({ deals, openDeal, managerSection = "recalc", setManagerSection }) {
const model = useMemo(() => buildManagerDemoData(deals), [deals]);
return (
)}
);
}
// ── Agent status banner ──────────────────────────────────────────────────
// Greeting + pipeline weather + buyer-proof verdict, fused into one fixed
// top header. The weather glyph replaces the old live-pulse indicator —
// the sun rotates and the rain bounces, so the surface is alive without a
// separate ping. State headline ("Stable pipeline" / "Drift forming" /
// "Heavy drift") tags onto the greeting; the verdict carries the numbers.
function AgentBanner({ deals }) {
const greeting = useMemo(() => {
const h = new Date().getHours();
if (h < 12) return "Good morning";
if (h < 18) return "Good afternoon";
return "Good evening";
}, []);
const verdict = useMemo(() => {
const open = deals.filter((d) => !/closed/i.test(`${d.stage || ""} ${d.statusLabel || ""}`));
if (open.length === 0) return { kind: "empty" };
const unverified = open.filter((d) => (window.isBuyerUnverifiedDeal ? window.isBuyerUnverifiedDeal(d) : false));
if (unverified.length === 0) return { kind: "clean", openCount: open.length };
const valueAtRisk = unverified.reduce((sum, d) => sum + (d.value || 0), 0);
return {
kind: "verdict",
unverifiedCount: unverified.length,
openCount: open.length,
valueAtRisk: formatPipelineValue(valueAtRisk),
};
}, [deals]);
const weather = useMemo(() => {
const openDeals = deals.filter((d) => !isClosedPipelineDeal(d));
const totalValue = openDeals.reduce((sum, d) => sum + d.value, 0);
const weighted = (key) => {
if (!openDeals.length || totalValue <= 0) return 0;
return Math.round(openDeals.reduce((sum, d) => sum + (d[key] || 0) * d.value, 0) / totalValue);
};
const signedGap = weighted("buyerScore") - weighted("sellerScore");
const gap = Math.abs(signedGap);
const tone = pipelineTone(gap);
if (gap < 10) return { kind: "sunny", headline: "Stable pipeline", tone };
if (gap < 25) return signedGap < 0
? { kind: "partly", headline: "Drift forming", tone }
: { kind: "cloudy", headline: "Buyer running ahead", tone };
return { kind: "rainy", headline: "Heavy drift", tone };
}, [deals]);
// Banner doubles as the entry point to the buyer-progression forecast —
// since the forecast is itself a weather report on the pipeline, the
// banner IS the affordance. Click the whole surface to open it.
const openForecast = () => {
if (typeof window.openBuyerForecast === "function") window.openBuyerForecast();
};
return (
{
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openForecast(); }
}}
aria-label="Open buyer-progression forecast"
>
{greeting}, Ridha.
— {weather.headline}
{verdict.kind === "empty" && "No open deals to defend."}
{verdict.kind === "clean" && (
<>All {verdict.openCount} open deals carry buyer proof.
)}
{verdict.kind === "verdict" && (
<>{verdict.unverifiedCount} of {verdict.openCount} open deals are buyer-unverified · {verdict.valueAtRisk} depends on proof you don’t have
)}
Open forecast
);
}
const isClosedPipelineDeal = (deal) => /^closed/i.test(deal.stage || "") || /^closed/i.test(deal.statusLabel || "");
function pipelineTone(gap) {
return gap >= 25 ? "warn" : gap >= 10 ? "amber" : "good";
}
function formatPipelineValue(value) {
if (value >= 1000000) {
return `$${(value / 1000000).toFixed(value % 1000000 === 0 ? 0 : 1)}M`;
}
return `$${Math.round(value / 1000)}K`;
}
// One priority card — same coach-card recipe as the manager-side coaching +
// theatre cards, just bound to AE-side deal data. Header carries the
// company + stage + the diag headline as the severity-tinted "trigger" line;
// reality holds the diag.why impact sentence; "Your move" holds diag.fix.
// The buyer↔seller progression and signal chips tuck into a "Deal context"
// disclosure so the card stays calm until the AE wants the proof.
function CoachCtaChannel({ channel }) {
if (!channel) return null;
const label = (window.CHANNEL_LABEL && window.CHANNEL_LABEL[channel]) || channel;
const icon = (window.CHANNEL_ICON && window.CHANNEL_ICON[channel]) || "mail";
return (
{label}
);
}
function PriorityDealCard({ deal, openDeal, active = true, onAction }) {
const diag = diagnosisForDeal(deal);
const tone = Math.abs(deal.gap) >= 25 ? "warn" : Math.abs(deal.gap) >= 10 ? "amber" : "good";
const CategoryStrip = window.DealCategoryStrip;
const ctaChannel = useMemo(() => {
if (!window.recommendChannel || !window.executionContextFor) return "email";
return window.recommendChannel(window.executionContextFor(deal, "diag")).primary || "email";
}, [deal.id]);
const [prepOpen, setPrepOpen] = useState(true);
const committee = diag?.committee || [];
// When the committee is present, it replaces the "Signals" chip block —
// same coverage, more concrete (named stakeholders + state).
const symptoms = committee.length > 0 ? [] : (diag?.symptoms || []);
const hasAlignment = deal.buyerScore != null && deal.sellerScore != null;
const hasPrep = hasAlignment || !!diag?.what || committee.length > 0 || symptoms.length > 0;
const prepBits = [];
if (committee.length) prepBits.push(`${committee.length} stakeholder${committee.length === 1 ? "" : "s"}`);
if (symptoms.length) prepBits.push(`${symptoms.length} signal${symptoms.length === 1 ? "" : "s"}`);
const targetDealId = deal.sourceDealId || deal.id;
const displayValue = deal.arr || formatManagerMoney(deal.value || deal.amount || 0);
const open = () => openDeal(targetDealId);
const gapAbs = Math.abs(deal.gap || 0);
return (
{
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); open(); }
} : undefined}
aria-label={active ? `Open ${deal.company} deal room` : undefined}
>
)}
);
}
// ── Priority deals — stack + selected deal brief ──
// Left side keeps every eligible priority deal visible. Right side owns the
// selected deal's diagnosis, proof, and action preview CTA.
function PriorityDeal({ deal, diag, idx, total, onNext, onPrev, openDeal, queue, onJump, cardClass, cardDragProps, onRemove }) {
const n = queue.length;
const [swipingOut, setSwipingOut] = useState(false);
// Tinder-like advance: the current detail swipes right, then idx moves
// forward and the next deal mounts with the entrance animation. Used by
// the next-arrow and the CTA confirm. Prev / jump skip the exit phase
// and just snap to the new card (entrance animation still plays via the
// article's key change).
const swipeAdvance = () => {
if (swipingOut) return;
setSwipingOut(true);
setTimeout(() => {
onNext();
setSwipingOut(false);
}, 280);
};
// Empty state — verified silence. Brand principle: when nothing is
// wrong, the surface stays calm and says so plainly.
if (n === 0) {
return (
Top priority deals
No deals at risk right now — verified silence is the success state.
· · ·
No deals need defending.
Verified silence.
);
}
// Manager flavour — coaching move on a team deal. The manager doesn't
// send the buyer email themselves; they coach the AE, request proof, or
// pull the deal into a 1:1 / forecast review. Modal payload is a Slack
// draft to the rep, not an email to the buyer.
const managerFireAction = (q) => {
const repName = q.aeName || "the rep";
const firstName = repName.split(" ")[0];
const value = q.amount || q.value || 0;
const fmtK = (n) => n >= 1000000 ? `$${(n / 1000000).toFixed(1)}M` : `$${Math.round(n / 1000)}K`;
const gapAbs = Math.abs(q.gap || 0);
const firmnessRaw = Math.round(value * 0.45);
const firmness = fmtK(firmnessRaw);
const ask = q.suggestedManagerAction || "Ask rep for buyer-owned evidence";
const question = (q.coachingQuestions && q.coachingQuestions[0])
|| q.managerNextAction
|| "What buyer-owned action happened since the last meeting?";
const missing = q.evidenceMissing && q.evidenceMissing[0];
const stageLine = `${q.company} · ${q.stage}`;
const body = `${firstName} — quick one on ${q.company}. Wanted to check what buyer-owned proof we have on this before forecast. ${question} If we don't have it yet, let's pull it into Friday's review so we can make the call together.`;
const commit = () => {
if (typeof window.fireToast === "function") {
window.fireToast(`Coaching note sent · ${repName} · ${q.company}`);
}
setTimeout(swipeAdvance, 500);
setTimeout(() => {
if (typeof window.fireToast === "function") {
window.fireToast(`✓ ${firstName} replied · forecast firmed +${firmness}`);
}
}, 5200);
};
if (typeof window.previewAction === "function") {
const evidence = [];
if (q.topGap) evidence.push({ label: "Gap", value: q.topGap });
if (missing) evidence.push({ label: "Missing", value: missing });
if (q.crmVsNudge) evidence.push({ label: "Read", value: q.crmVsNudge });
if (gapAbs) evidence.push({ label: "Buyer/seller gap", value: `${gapAbs} pt` });
window.previewAction({
kicker: `Coaching move · Slack to ${firstName}`,
title: `${ask} · ${repName}`,
meta: [
{ label: "TO", value: `${repName} · AE` },
{ label: "CHANNEL", value: "Slack DM" },
{ label: "DEAL", value: stageLine },
{ label: "AMOUNT", value: fmtK(value) },
],
body: {
label: "Drafted Slack to the rep",
text: body,
},
impact: {
likelihood: 76,
timeHorizon: "24h",
firmness,
firmnessRaw,
gapLabel: "Probability gap",
gapBefore: gapAbs || null,
gapAfter: gapAbs > 0 ? Math.max(2, Math.round(gapAbs * 0.3)) : null,
},
evidence,
primaryLabel: `Send to ${firstName}`,
onConfirm: commit,
});
} else {
commit();
}
};
// Primary CTA — opens an action preview with the drafted message,
// evidence, and expected impact. Confirm fires the action and a delayed
// outcome toast that simulates the buyer's response. For manager-shape
// deals (q.aeName set) we route through managerFireAction so the CTA
// becomes a coaching move, not an AE-driven outbound.
const fireAction = (q) => {
if (q && q.aeName) return managerFireAction(q);
const diagFor = diagnosisForDeal(q);
const fix = diagFor && diagFor.fix;
const draft = diagFor && diagFor.draft;
const outcome = diagFor && diagFor.outcome;
const gapAbs = Math.abs(q.gap || 0);
const value = q.value || q.amount || 0;
const sev = diagFor && diagFor.severity;
const sevKey = sev === "warn" ? "high" : sev === "amber" ? "mid" : "good";
const likelihood = { high: 58, mid: 70, good: 86 }[sevKey];
const firmnessPct = { high: 0.55, mid: 0.70, good: 0.85 }[sevKey];
const firmnessRaw = Math.round(value * firmnessPct);
const fmtK = (n) => n >= 1000000 ? `$${(n / 1000000).toFixed(1)}M` : `$${Math.round(n / 1000)}K`;
const firmness = fmtK(firmnessRaw);
const horizon = draft && (draft.channel === "Slack DM" || draft.channel === "LinkedIn DM") ? "24h" : "48h";
const gapAfter = gapAbs > 0 ? Math.max(2, Math.round(gapAbs * 0.3)) : null;
const commit = () => {
if (window.NudgeBackend) {
window.NudgeBackend.execute(q, {
kind: diagFor?.kind || "Recommended action",
channel: draft?.channel || null,
recipient: draft?.to || null,
action: fix || `Action on ${q.company}`,
subject: draft?.subject || null,
body: draft?.text || null,
outcome,
});
}
if (typeof window.fireToast === "function") {
window.fireToast(fix ? `Sent · ${fix}` : `Action taken on ${q.company}`);
}
setTimeout(swipeAdvance, 500);
setTimeout(() => {
if (typeof window.fireToast === "function") {
const tail = outcome ? `${q.company} · ${outcome} · +${firmness} firmed`
: `${q.company} · response received · +${firmness} firmed`;
window.fireToast(`✓ ${tail}`);
}
}, 5200);
};
if (typeof window.previewAction === "function" && draft) {
const evidence = [];
if (diagFor.headline) evidence.push({ label: "Trigger", value: diagFor.headline });
if (diagFor.what) evidence.push({ label: "Signal", value: diagFor.what });
if (gapAbs) evidence.push({ label: "Gap", value: `${gapAbs}pt buyer-seller drift` });
if (diagFor.fixMeta) evidence.push({ label: "Source", value: diagFor.fixMeta });
window.previewAction({
kicker: `Preview · ${draft.channel || "Message"}`,
title: fix || `Action on ${q.company}`,
meta: [
{ label: "TO", value: draft.to },
{ label: "CHANNEL", value: draft.channel || "Email" },
{ label: "DEAL", value: `${q.company} · ${q.stage}` },
],
body: {
subject: draft.subject || null,
label: draft.subject ? "Body" : "Message",
text: draft.text,
},
impact: {
likelihood,
timeHorizon: horizon,
firmness,
firmnessRaw,
gapLabel: "Buyer-seller gap",
gapBefore: gapAbs || null,
gapAfter,
},
evidence,
primaryLabel: draft.channel === "LinkedIn DM" ? "Send DM" : "Send",
onConfirm: commit,
});
} else if (typeof window.previewAction === "function") {
window.previewAction({
kicker: "Preview · Action",
title: fix || `Action on ${q.company}`,
meta: [{ label: "DEAL", value: `${q.company} · ${q.stage}` }],
body: { label: "What will happen", text: fix || "Send the suggested next move." },
impact: {
likelihood,
timeHorizon: horizon,
firmness,
firmnessRaw,
gapLabel: "Buyer-seller gap",
gapBefore: gapAbs || null,
gapAfter,
},
evidence: diagFor && diagFor.headline ? [{ label: "Trigger", value: diagFor.headline }] : [],
primaryLabel: "Confirm",
onConfirm: commit,
});
} else {
commit();
}
};
// idx may be null (nothing selected yet — show the daily-read PriorityEmpty)
// or a valid index in queue. Clamp defensively in case queue shrank.
const activeIdx = idx == null ? null : Math.min(idx, n - 1);
const activeQ = activeIdx == null ? null : queue[activeIdx];
const activeDiag = activeQ ? (diagnosisForDeal(activeQ) || {}) : {};
const activeTone = activeQ
? (activeQ.status === "at-risk" ? "warn"
: activeQ.status === "needs-attention" ? "amber" : "good")
: "good";
const activeTargetId = activeQ ? (activeQ.sourceDealId || activeQ.id) : null;
const CategoryStrip = window.DealCategoryStrip;
// Manager-shape deals (with aeName) get coaching-flavoured copy. AE deals
// keep the existing buyer-action label.
const isManagerDeal = !!(activeQ && activeQ.aeName);
const actionLabel = activeQ
? (isManagerDeal
? (activeQ.suggestedManagerAction || `Coach ${activeQ.aeName} on ${activeQ.company}`)
: (activeDiag.fix || activeQ.nudges?.[0]?.action || "Review next move"))
: "";
const actionChannel = activeQ
? (isManagerDeal ? "slack" : (activeDiag.draft?.channel || "email"))
: null;
const activeValue = activeQ ? (activeQ.arr || formatManagerMoney(activeQ.value || activeQ.amount || 0)) : "";
const gapAbs = activeQ ? Math.abs(activeQ.gap || 0) : 0;
const hasAlignment = activeQ && activeQ.buyerScore != null && activeQ.sellerScore != null;
return (
Top priority deals
Deals that need attention right now — pick one to inspect the diagnosis and next move.
{queue.map((q, i) => {
const qTone = q.status === "at-risk" ? "warn"
: q.status === "needs-attention" ? "amber" : "good";
const selected = i === activeIdx;
// Riskiest = the at-risk deal with the largest buyer/seller gap.
// Pulses its orb so the queue has a clear "look here first" anchor.
const isRiskiest = q.status === "at-risk" && queue
.filter((d) => d.status === "at-risk")
.sort((a, b) => Math.abs(b.gap || 0) - Math.abs(a.gap || 0))[0]?.id === q.id;
const value = q.arr || formatManagerMoney(q.value || q.amount || 0);
return (
);
})}
);
}
// Buyer ↔ Seller progression — tug-of-war design. The track has a fixed
// centre line; Buyer pushes left, Seller pushes right. Each side's fill
// extends from the centre outward by score/100 of its half, so whoever's
// "pulling the deal" visually dominates the track. The leading side is
// tinted with the state tone (warn / amber / good); the trailing side
// stays muted. A caption below carries the numeric gap + direction.
function BuyerSellerProgress({ buyer, seller, gap, tone }) {
const sellerAhead = seller > buyer;
const buyerAhead = buyer > seller;
const stateLabel = tone === "warn" ? "Drift" : tone === "amber" ? "Watch" : "Aligned";
const direction = sellerAhead
? "seller pulling ahead"
: buyerAhead
? "buyer pulling ahead"
: "even pull";
const buyerWidth = Math.max(0, Math.min(100, buyer)) / 2;
const sellerWidth = Math.max(0, Math.min(100, seller)) / 2;
return (
Buyer
{buyer}%
{seller}%
Seller
);
}
// ─────────────────────────────────────────────────────────────────────────
// Slot widget extras: section picker + 3 new feed-style widgets
// ─────────────────────────────────────────────────────────────────────────
// Modal picker with the section catalogue. Closes on Esc or backdrop click.
function SectionPicker({ onSelect, onClose }) {
useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [onClose]);
return (
e.stopPropagation()} role="dialog" aria-label="Add a section">
Add a section