/* Pre-Sales Agent — New brief. Three toggleable, dead-simple ways to start (switch via Tweaks → "New-brief flow"): • smart — one box, paste anything → instant brief • invite — forward / paste a calendar invite, confirm, go • meeting — pick from upcoming meetings the agent already sees All three converge on MP.addPrep → the Game Day Brief. */ const briefWait = (ms) => new Promise(r => setTimeout(r, ms)); const SAMPLE_INVITE = `Intro meeting with Northwind Freight When: Thursday 3:00 – 3:30 PM Organizer: Dana Whitfield (dana@northwindfreight.com) Guests: Dana Whitfield (VP Operations), Marcus Reed (Director of IT) northwindfreight.com Following up on your email — keen to hear how you cut manual handoffs and whether you integrate with our TMS. We're scoping the Q3 budget now.`; const SAMPLE_EMAIL = `From: Dana Whitfield Subject: Re: cutting our manual handoffs Hi — thanks for reaching out. We're a logistics team and the handoffs between our systems are killing us. Can you walk us through how you'd integrate with our TMS? Pricing matters too — we're a ~900-person company. Marcus Reed (Director of IT) will join.`; // ---- animated research card (reused by every flow's generating state) ---- function BriefResearchCard({ steps }) { const [done, setDone] = React.useState(0); React.useEffect(() => { let i = 0, t; const tick = () => { i += 1; setDone(i); if (i < steps.length) t = setTimeout(tick, 600); }; t = setTimeout(tick, 480); return () => clearTimeout(t); }, []); return (
Deep research
{steps.map((s, i) => { const isDone = i < done, isActive = i === done; return (
{isDone ? : isActive ? : } {s}
); })}
); } // ---- live flow selection (kept in sync with Tweaks) ---- function useCreateFlow() { const [flow, set] = React.useState(MP.get().createFlow || "smart"); React.useEffect(() => { const on = () => set(MP.get().createFlow || "smart"); window.addEventListener("mp-flowchange", on); return () => window.removeEventListener("mp-flowchange", on); }, []); return flow; } // ---- meeting time helper ---- function meetingTime(iso) { const d = new Date(iso), now = new Date(); const sameDay = d.toDateString() === now.toDateString(); const tom = new Date(now); tom.setDate(now.getDate() + 1); const isTom = d.toDateString() === tom.toDateString(); const time = d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" }); const day = sameDay ? "Today" : isTom ? "Tomorrow" : d.toLocaleDateString(undefined, { weekday: "long" }); return { day, time, soon: sameDay }; } // ---- live research card, driven by REAL pipeline stage events ---- // progress = { phase: "researching"|"writing"|"finishing"|"done", sources, model } // Two real backend stages — research (grounded web search) and synthesis // (profile + match + write) — map onto a four-line checklist. A step only // completes when its real stage actually finishes, so the final line keeps // spinning until the brief is genuinely ready (no premature "done", no hang). function LiveResearchCard({ prospect, who, progress }) { const phase = progress.phase || "researching"; const sources = progress.sources; const researchDone = phase === "writing" || phase === "finishing" || phase === "done"; const allDone = phase === "done"; const steps = [ { label: "Scanning " + (prospect || "the prospect") + " across the web", group: "research" }, { label: "Reading their site, news, funding & hiring" + (sources != null && sources > 0 ? " · " + sources + (sources === 1 ? " source" : " sources") : ""), group: "research" }, { label: "Profiling " + who + " & matching to your ICP", group: "synthesis" }, { label: "Writing your Game Day Brief", group: "synthesis" } ]; const statusOf = (g) => { if (allDone) return "done"; if (g === "research") return researchDone ? "done" : "active"; // synthesis group if (phase === "finishing") return "done"; return researchDone ? "active" : "pending"; // active once research finished }; const headline = allDone ? "Brief ready" : researchDone ? "Writing your brief…" : "Researching the live web…"; return (
Deep research · {headline}
{steps.map((s, i) => { const st = statusOf(s.group); const isDone = st === "done", isActive = st === "active"; return (
{isDone ? : isActive ? : } {s.label}
); })}
); } // ---- shared generating view ---- // When `progress` is supplied we render the live, event-driven card; otherwise // (offline / fallback path) we fall back to the timed checklist. function GeneratingView({ prospect, named, progress }) { const who = named === 1 ? "the stakeholder" : named > 1 ? named + " stakeholders" : "the company"; const fallbackSteps = [ "Scanning " + (prospect || "the prospect") + " across the web", "Reading their site, news, funding & hiring", "Profiling " + who + " — roles & priorities", "Matching them to your ICP & what you sell", "Writing your Game Day Brief" ]; return (
{prospect || "Your prospect"}
Building your brief…
{progress ? : }
); } // What the top bar counts down: the credits the platform reported, or the unknown state when it // could not be read — never a 0 Edge chose (design doc §1.3). No monthly allowance is counted: // none exists (Part 3; "0 of 0 briefs left" was the seat-model leak #504 §E / pitchiq #24 closed). function briefsLeftLabel() { const credits = MP.packBalance(); if (credits == null) return CREDITS_UNKNOWN.text; return `${credits} credit${credits === 1 ? "" : "s"} left`; } // ---- top bar shared by every flow ---- function CreateTopBar() { return (
{briefsLeftLabel()}
); } // =================== FLOW 1 — SMART BOX =================== // // `restore` re-seeds the fields after a FAILED generation. This flow unmounts // while GeneratingView is up, so a failure that returns here would otherwise // remount it empty and silently discard everything the user typed — leaving a // blank form and, once the error toast is closed, no explanation either. function SmartBoxFlow({ onGenerate, restore }) { const [prospect, setProspect] = React.useState((restore && restore.prospect) || ""); const [website, setWebsite] = React.useState((restore && restore.website) || ""); const [people, setPeople] = React.useState((restore && restore.contacts) || []); const [context, setContext] = React.useState((restore && restore.context) || ""); // Spec `BhNVUS9sai`: a dismissed credit dialog keeps the attachment selections too (#211). const [attachments, setAttachments] = React.useState((restore && restore.attachments) || []); const [drag, setDrag] = React.useState(false); const [nudge, setNudge] = React.useState(""); const [nudgeWarn, setNudgeWarn] = React.useState(false); const [softWarned, setSoftWarned] = React.useState(false); const fileRef = React.useRef(null); const addPerson = () => setPeople(p => [...p, { name: "", title: "", email: "", linkedin: "" }]); const updatePerson = (i, k, v) => setPeople(p => p.map((person, j) => j === i ? { ...person, [k]: v } : person)); const removePerson = (i) => setPeople(p => p.filter((_, j) => j !== i)); const namedPeople = people.filter(p => (p.name || "").trim()); const onFiles = (fl) => { const names = Array.from(fl || []).map(f => f.name).slice(0, 4); if (names.length) setAttachments(a => [...a, ...names].slice(0, 4)); }; const clearNudge = () => { setNudge(""); setNudgeWarn(false); }; const hasCompany = !!(prospect.trim() || website.trim()); // "Rich" once there's a person, a document, or real written context — a bare // company name/URL alone still yields a generic brief. const rich = namedPeople.length > 0 || attachments.length > 0 || context.trim().length > 60; const thin = !rich; const go = () => { if (!hasCompany) { setNudgeWarn(false); setNudge("Tell me who you're meeting — a company name or website is plenty to start."); return; } if (!rich && !softWarned) { setSoftWarned(true); setNudgeWarn(true); setNudge("Just the company gives me a thin, generic brief. Add who's in the room, paste the intro email, or attach a document and I'll walk you in genuinely ready — or hit “Prepare anyway” to continue with just this."); return; } const name = prospect.trim() || MP.companyNameFromDomain(website.trim()); const contacts = namedPeople.map(p => { const linkedin = (p.linkedin || "").trim(); const email = (p.email || "").trim(); return { name: p.name.trim(), title: (p.title || "").trim(), email, linkedin, contact: linkedin || email }; }); // `attachments` rides along only so a failed or refused generation can hand them back (restore // above); createBriefStream sends the server the five fields it names, never this one. onGenerate({ prospect: name, website: website.trim(), companyLinkedin: "", contacts, context: context.trim(), attachments }); }; return (
New Game Day Brief

Who are you meeting?

The more you tell me, the sharper your brief. Fill in what you can — every field helps.

{/* the company */}
The company you're meeting
{ setProspect(e.target.value); clearNudge(); }} placeholder="e.g. Northwind Freight" autoFocus /> { setWebsite(e.target.value); clearNudge(); }} placeholder="northwindfreight.com" />
{/* who you're meeting — recommended */}
Who you're meeting Recommended

{namedPeople.length ? "I'll prep a tailored angle for each person." : "Naming them sharpens the brief a lot — or skip it and I'll prep the company."}

{people.length > 0 && (
{people.map((p, i) => (
updatePerson(i, "name", e.target.value)} aria-label="Name" /> updatePerson(i, "title", e.target.value)} aria-label="Title" /> updatePerson(i, "email", e.target.value)} aria-label="Email" /> updatePerson(i, "linkedin", e.target.value)} aria-label="LinkedIn URL" />
))}
)}

Add a LinkedIn URL for anyone with a common name or at a big company — it's how I lock onto the right person instead of a namesake.

{/* additional context + attachments */}
{ e.preventDefault(); setDrag(true); }} onDragLeave={() => setDrag(false)} onDrop={(e) => { e.preventDefault(); setDrag(false); onFiles(e.dataTransfer.files); }}>
Additional context optional

Anything else that sharpens the brief — paste the intro email or thread, the deal background, or what you want out of the call.