// mailroom-replies.jsx — Replies triage queue (the daily driver). One decision // per card: Approve & Send / Redraft / Skip. Thread expand + keyboard triage // (J/K move · Enter approve · S skip · R redraft). Exports: ViewReplies. const REPLIES = [ { id: 1, cat: "BOOKING", conf: 96, name: "Priya Anand", company: "LedgerLoop", email: "priya@ledgerloop.com", campaign: "RevOps leaders · NA", time: "9:10a", inbound: "Booked 15 min for Friday — looking forward to it. Send the calendar invite to this address?", draft: "Hi Priya — done, invite's on its way for Friday 11:00a ET. I'll keep it to 15 and come with two concrete ideas for LedgerLoop's outbound. Talk soon!" }, { id: 2, cat: "POSITIVE", conf: 92, name: "Dana Whitfield", company: "Northwind SaaS", email: "dana@northwind.io", campaign: "Q3 · Series-A SaaS founders", time: "9:42a", inbound: "This is timely — we're ripping out our $400/mo stack right now. Can you do Thursday afternoon?", draft: "Hi Dana — perfect timing. Thursday works; does 2:00p or 3:30p ET suit you better? I'll show exactly how we land in primary without the $400 stack. Here's my link to grab whichever: " }, { id: 3, cat: "OBJECTION", conf: 81, name: "Aisha Khan", company: "Brightpath", email: "aisha@brightpath.io", campaign: "Q3 · Series-A SaaS founders", time: "Yest 4:20p", inbound: "Interesting, but we already use Apollo. What would you do differently — and what's pricing for a 12-seat team?", draft: "Hi Aisha — totally fair, Apollo's great for data. We're the opposite end: deliverability infra so your sends actually land. For 12 seats it's $X/mo flat, no per-lead fees. Worth a 15-min look at the inbox-placement difference?" }, { id: 4, cat: "NEGATIVE", conf: 88, name: "Marcus Lee", company: "Flowstate", email: "marcus@flowstate.app", campaign: "Q3 · Series-A SaaS founders", time: "Yest 1:05p", inbound: "Not interested, please don't email me again.", draft: "Understood, Marcus — I've removed you and you won't hear from us again. All the best with Flowstate." }, { id: 5, cat: "UNSUBSCRIBE", conf: 99, name: "Sofia Reyes", company: "Cohort", email: "sofia@cohort.cc", campaign: "Agency owners · warm reactivation", time: "Yest 11:40a", inbound: "unsubscribe", draft: null }, { id: 6, cat: "NOISE", conf: 74, name: "Tom Becker", company: "Parcelhub", email: "tom@parcelhub.com", campaign: "RevOps leaders · NA", time: "Mon 8:55a", inbound: "I'm OOO until June 14 with limited access to email. For urgent matters contact ops@parcelhub.com.", draft: null }, ]; const CATS = { POSITIVE: { emoji: "🔥", tone: "good", hot: true }, BOOKING: { emoji: "🔥📅", tone: "accent", hot: true }, OBJECTION: { emoji: "⚠️", tone: "warn", hot: false }, NEGATIVE: { emoji: "", tone: "bad", hot: false }, UNSUBSCRIBE: { emoji: "", tone: "neutral", hot: false }, NOISE: { emoji: "", tone: "neutral", hot: false }, }; const FILTERS = ["all", "POSITIVE", "BOOKING", "OBJECTION", "NEGATIVE", "UNSUBSCRIBE", "NOISE"]; // synth prior thread (what we sent before they replied) function priorThread(r) { const first = r.name.split(" ")[0]; return [ { side: "out", label: "Step 1 · opener", time: "Jun 9", body: `Hi ${first}, saw ${r.company} is scaling the GTM team — usually the moment deliverability starts quietly eating reply rate. We run cold-email infra so sends land in primary. Worth a look?` }, { side: "out", label: "Step 2 · bump", time: "Jun 12", body: `Following up, ${first} — happy to send a 2-min teardown of where ${r.company}'s domains sit today (spam vs primary). No pitch, just data.` }, ]; } function ViewReplies({ bookingLinkSet = false }) { const t = useT(); const [filter, setFilter] = React.useState("all"); const [done, setDone] = React.useState({}); const [activeId, setActiveId] = React.useState(REPLIES[0].id); const [redraftId, setRedraftId] = React.useState(null); const list = REPLIES.filter((r) => (filter === "all" || r.cat === filter) && !done[r.id]); const remaining = REPLIES.filter((r) => !done[r.id]).length; // keep active within current list React.useEffect(() => { if (!list.find((r) => r.id === activeId)) setActiveId(list[0] ? list[0].id : null); }, [list, activeId]); const advance = (fromId) => { const idx = list.findIndex((r) => r.id === fromId); const next = list[idx + 1] || list[idx - 1]; setActiveId(next ? next.id : null); }; const approve = (r) => { mrToast(`Reply sent to ${r.name}`, { tone: "good", icon: "send" }); advance(r.id); setDone((d) => ({ ...d, [r.id]: true })); }; const skip = (r) => { mrToast("Skipped — stays in queue", { icon: "clock" }); advance(r.id); setDone((d) => ({ ...d, [r.id]: true })); }; const ack = (r, msg, tone, icon) => { mrToast(msg, { tone, icon }); advance(r.id); setDone((d) => ({ ...d, [r.id]: true })); }; const redraft = (r) => { setRedraftId(r.id); setTimeout(() => { setRedraftId(null); mrToast("Draft rewritten by AI", { icon: "sparkle" }); }, 850); }; // keyboard triage React.useEffect(() => { const onKey = (e) => { if (/input|textarea/i.test(e.target.tagName)) return; const idx = list.findIndex((r) => r.id === activeId); const cur = list[idx]; if (e.key === "j" || e.key === "ArrowDown") { e.preventDefault(); setActiveId((list[idx + 1] || list[idx] || {}).id); } else if (e.key === "k" || e.key === "ArrowUp") { e.preventDefault(); setActiveId((list[idx - 1] || list[idx] || {}).id); } else if (e.key === "Enter" && cur && cur.draft !== null) { e.preventDefault(); approve(cur); } else if ((e.key === "s" || e.key === "Backspace") && cur) { e.preventDefault(); cur.draft !== null ? skip(cur) : ack(cur, "Acknowledged", undefined, "check"); } else if (e.key === "r" && cur && cur.draft !== null) { e.preventDefault(); redraft(cur); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [list, activeId]); return ( <> mrToast("Synced from Smartlead — no new replies", { icon: "refresh" })}>Sync mrToast("Sorted by confidence", { icon: "filter" })}>Sort: confidence {/* filter chips + kbd hint */}
{FILTERS.map((f) => { const on = filter === f; const n = f === "all" ? remaining : REPLIES.filter((r) => r.cat === f && !done[r.id]).length; const c = f === "all" ? null : CATS[f]; return ( ); })}
{[["J K", "move"], ["↵", "send"], ["S", "skip"], ["R", "redraft"]].map(([k, l]) => ( {k}{l} ))}
{/* triage queue */}
{list.length === 0 && (
{filter === "all" ? "Queue clear" : "Nothing in this filter"}
{filter === "all" ? "Every reply has been handled. Nice." : "No replies match this category right now."}
{filter !== "all" && setFilter("all")}>Back to all}
)} {list.map((r) => ( setActiveId(r.id)} onApprove={() => approve(r)} onSkip={() => skip(r)} onAck={(msg, tone, icon) => ack(r, msg, tone, icon)} onRedraft={() => redraft(r)} /> ))}
); } function ReplyCard({ r, bookingLinkSet, active, redrafting, onFocus, onApprove, onSkip, onAck, onRedraft }) { const t = useT(); const c = CATS[r.cat]; const [draft, setDraft] = React.useState(r.draft || ""); const [thread, setThread] = React.useState(false); const warnBooking = (r.cat === "POSITIVE" || r.cat === "BOOKING") && !bookingLinkSet; const insertLink = () => { if (bookingLinkSet) { setDraft((d) => d.trimEnd() + " cal.com/mohit/15min"); mrToast("Booking link inserted", { tone: "good", icon: "calendar" }); } else mrToast("No booking link — add one in Settings", { tone: "warn", icon: "alert" }); }; return (
{/* header */}
{c.emoji && {c.emoji}} {r.cat}
{r.name} {r.company}
{r.email}
confidence = 90 ? t.good : r.conf >= 78 ? t.warn : t.textSec }}>{r.conf}%
{r.time}
{/* thread toggle */} {thread && (
{priorThread(r).map((m, i) => (
you {m.label} {m.time}
{m.body}
))}
)} {/* quoted inbound */}
{r.name} replied · {r.time}
{r.inbound}
{/* booking warning */} {warnBooking && (
No booking link configured — add one in Settings so the draft can include it.
)} {/* AI draft */} {r.draft !== null ? (
· editable · via OpenRouter