);
};
/* ───── AI Rail (functional — calls /api/copilot which proxies to Gemini) ───── */
const SUGGESTIONS_BY_PAGE = {
pnl: ["Which downline is dragging persistency below 80%?", "What's my biggest leak in the P&L this month?", "If I cut the worst-performing lead source, what's the net impact?"],
pipeline: ["Show me leads I haven't touched in 7 days", "Which deals are most likely to close this week?", "Why is this deal stuck in 'App In'?"],
queue: ["Which lead in the queue should I dial first and why?", "Draft a 30-second opener for the top scored lead", "Which producers are hottest right now?"],
leaderboard: ["Compare my conversion vs Tony's last month", "What's the gap between #1 and #2 this month?"],
performance: ["Who would qualify for Diamond if MTD threshold dropped to $45k?", "Which producers are most at risk of missing tier this month?", "What's our 30-day weighted forecast vs goal?"],
team: ["Who's at risk of missing tier this month?", "Which producer needs a coaching nudge today?"],
coaching: ["Top 3 issues across all producer calls this week", "Which coaching theme is moving the needle most?"],
vault: ["Are any artifacts approaching retention expiry?", "Audit pack for Aetna SRC — what's missing?"],
resources: ["Which carrier portal needs the credentials reset this month?", "Add a quick link for the new training URL"],
recruiting: ["Which campaign has the lowest cost per producer?", "Draft a follow-up DM for {{handle}} based on their reply"],
commissions: ["Where's my biggest variance vs carrier statements this month?"],
book: ["Which carrier mix segment has the best persistency?"],
default: ["Summarize what's on this page", "What should I focus on right now?", "What changed since yesterday?"],
};
function pageKeyFromContext(context) {
if (!context) return "default";
const c = String(context).toLowerCase();
if (c.includes("p&l") || c.includes("pnl")) return "pnl";
if (c.includes("pipeline")) return "pipeline";
if (c.includes("queue") || c.includes("dispatch")) return "queue";
if (c.includes("performance") || c.includes("standings")) return "performance";
if (c.includes("leaderboard")) return "leaderboard";
if (c.includes("team")) return "team";
if (c.includes("coaching")) return "coaching";
if (c.includes("vault")) return "vault";
if (c.includes("resources")) return "resources";
if (c.includes("tiering")) return "performance";
if (c.includes("forecast")) return "performance";
if (c.includes("recruit")) return "recruiting";
if (c.includes("commission")) return "commissions";
if (c.includes("book")) return "book";
return "default";
}
const AIRail = ({ context }) => {
const [val, setVal] = useState("");
const [history, setHist] = useState([]); // [{role, text, ms}]
const [busy, setBusy] = useState(false);
const bottomRef = useRef();
useEffect(() => { bottomRef.current?.scrollIntoView({ behavior: "smooth" }); }, [history.length, busy]);
// External pages can dispatch CustomEvent('ai:ask', { detail: { prompt, context }})
// to seed the rail with a prompt and auto-fire it.
useEffect(() => {
const onAsk = (e) => { const p = e.detail?.prompt; if (p) ask(p); };
window.addEventListener("ai:ask", onAsk);
return () => window.removeEventListener("ai:ask", onAsk);
}, [busy]);
const ask = async (prompt) => {
if (!prompt.trim() || busy) return;
setHist(h => [...h, { role: "user", text: prompt }]);
setVal("");
setBusy(true);
try {
// If signed in, forward the Supabase JWT so the Edge fn can fetch live data
// under authenticated RLS. Demo mode just sends no token.
let jwt = null;
const sb = window.getSupabase && window.getSupabase();
if (sb) {
const { data } = await sb.auth.getSession();
jwt = data?.session?.access_token || null;
}
const headers = { "content-type": "application/json" };
if (jwt) headers["x-supabase-auth"] = `Bearer ${jwt}`;
// Pass last 3 turns so the copilot has short-term memory for vague
// follow-ups like "what do you need?" / "??". Each turn = {q, a}.
const recent = [];
for (let i = hist.length - 1; i >= 0 && recent.length < 3; i--) {
const m = hist[i];
if (m.role === "assistant" && i > 0 && hist[i-1]?.role === "user") {
recent.unshift({ q: hist[i-1].text || "", a: m.text || "" });
}
}
const resp = await fetch("/api/copilot", {
method: "POST",
headers,
body: JSON.stringify({ prompt, context, history: recent })
});
const j = await resp.json();
if (!resp.ok) throw new Error(j.error + (j.detail ? " — " + j.detail.slice(0, 200) : ""));
setHist(h => [...h, { role: "assistant", text: j.text, ms: j.ms, model: j.model, tools: j.tools_used }]);
} catch (e) {
setHist(h => [...h, { role: "assistant", text: "Couldn't reach the model. " + (e.message || ""), ms: 0, err: true }]);
} finally {
setBusy(false);
}
};
const suggestions = SUGGESTIONS_BY_PAGE[pageKeyFromContext(context)] || SUGGESTIONS_BY_PAGE.default;
return (
);
};
/* ───── Modal + form primitives (used by Pipeline filter, New-lead, Bulk-assign) ───── */
const Modal = ({ title, children, onClose, actions, width = 460 }) => {
useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [onClose]);
return (
e.stopPropagation()} style={{ width }}>
{title}
{children}
{actions &&
{actions}
}
);
};
const Field = ({ label, children, hint }) => (
);
const Select = ({ value, onChange, options }) => (
);
/* Section pill — horizontal liquid-glass tabs for combining related pages
within one screen. Use as: */
const SectionPill = ({ items, value, onChange, dense }) => (
{items.map(it => (
))}
);
/* Validation helpers — every form should reach for these instead of trusting
the input element. Phone uses a permissive E.164 (10-15 digits, optional +).
Age clamps to 0-120 to catch typos like 999. ZIP is 5 or 5+4. */
const Validate = {
phone(v) {
if (!v) return { ok: true, msg: "" };
const cleaned = String(v).replace(/[\s\-().]/g, "");
return /^\+?[1-9]\d{9,14}$/.test(cleaned)
? { ok: true, msg: "" }
: { ok: false, msg: "Phone must be E.164 (10-15 digits, optional +)" };
},
age(v) {
if (v === "" || v == null) return { ok: true, msg: "" };
const n = Number(v);
if (!Number.isFinite(n)) return { ok: false, msg: "Age must be a number" };
if (n < 0 || n > 120) return { ok: false, msg: "Age must be 0-120" };
return { ok: true, msg: "" };
},
zip(v) {
if (!v) return { ok: true, msg: "" };
return /^\d{5}(-\d{4})?$/.test(String(v).trim())
? { ok: true, msg: "" }
: { ok: false, msg: "ZIP must be 5 digits (or 5+4)" };
},
state(v) {
if (!v) return { ok: true, msg: "" };
return /^[A-Z]{2}$/.test(String(v).trim().toUpperCase())
? { ok: true, msg: "" }
: { ok: false, msg: "State must be 2-letter code" };
},
money(v) {
if (v === "" || v == null) return { ok: true, msg: "" };
const n = Number(String(v).replace(/[^0-9.-]/g, ""));
if (!Number.isFinite(n)) return { ok: false, msg: "Must be a number" };
if (n < 0) return { ok: false, msg: "Cannot be negative" };
return { ok: true, msg: "" };
},
};
/* ValidatedInput — text-input that shows inline error tone + message when the
value fails its kind's check. Use as drop-in: . */
const ValidatedInput = ({ kind, value, onChange, className = "text-input", ...rest }) => {
const v = Validate[kind] ? Validate[kind](value) : { ok: true, msg: "" };
return (
{!v.ok && value && (
{v.msg}
)}
);
};
/* React class error boundary — wraps page content so a single throwing
component doesn't blank the whole app. Logs to console + offers a reset. */
class ErrorBoundary extends React.Component {
constructor(props) { super(props); this.state = { err: null }; }
static getDerivedStateFromError(err) { return { err }; }
componentDidCatch(err, info) {
console.error("[ErrorBoundary]", err, info?.componentStack);
if (window.toast) window.toast(`UI error: ${err?.message || err}`, "error");
}
render() {
if (!this.state.err) return this.props.children;
return (