const { useState, useEffect, useRef, useMemo, Fragment } = React;
/* ─────────────────────────────────────────────────────
Phish-or-Pass — Outlook-immersive simulation
Day-1 inbox triage with one trick-positive.
───────────────────────────────────────────────────── */
const EMAILS = [
{
id: "m-helpdesk",
avatarColor: "#605E5C",
avatarText: "IT",
senderShort: "IT Helpdesk",
sender: { display: "IT Helpdesk", real: "helpdesk@compan-y-it.com", spoof: true, verification: "Failed authentication" },
subject: "Action required: your password expires today",
preview: "Our records show your corporate password expires today at 17:00…",
time: "9:14 AM",
day: "Today",
banner: { kind: "danger", title: "Defender for Office 365 marked this message as a potential phishing attempt.", detail: "Sender domain compan-y-it.com fails authentication. Links have been rewritten with Safe Links protection.", action: "Show details" },
body: ({ urlHover }) => (
<>
Dear user,
Our records show your corporate password expires today at 17:00. To keep your
account active and avoid being locked out of email, please verify your identity
within the next hour.
Failure to act will result in account suspension. If you require assistance,
contact your local IT support representative.
— IT Service Desk
),
correct: "phishing",
teach: {
title: "Credential-harvest phish — textbook.",
summary:
"Display name says IT Helpdesk, but the real sender is compan-y-it.com — a look-alike of the company domain. The reset link rewrites to the same look-alike. Three pressure phrases are stacked in 4 lines.",
indicators: [
{ kind: "bad", text: "Display name vs sender: \"IT Helpdesk\" claims internal, real domain is external look-alike (compan-y-it.com)." },
{ kind: "bad", text: "Domain authentication failed (Defender banner). SPF/DKIM did not pass." },
{ kind: "bad", text: "Link text says company.com but resolves to compan-y-it.com — classic redirect." },
{ kind: "bad", text: "Urgency stacking: \"expires today\", \"keep your account active\", \"failure to act\"." },
],
verdictIfRight: "Reporting this directly is exactly right — the indicators are conclusive. The Junk-only option also catches it but starts a longer triage clock for the SOC team.",
verdictIfWrong: {
safe: "Marking this safe leaves a credential-harvest URL in production inboxes. This is the easy one — if it slipped past, the next won't be obvious.",
junk: "Junk-only is too soft for this signal stack. Authentication-failed + look-alike domain + pressure stacking warrants the phishing report, which routes to the SOC fast-lane.",
},
},
},
{
id: "m-people-ops",
avatarColor: "#C239B3",
avatarText: "SC",
senderShort: "Sarah Chen",
sender: { display: "Sarah Chen", real: "sarah.chen@company.com", spoof: false, match: true, verification: "Verified internal sender" },
subject: "Welcome to the team — your week-1 checklist",
preview: "So glad you're with us. I've shared your week-1 checklist below — calendar invites…",
time: "8:46 AM",
day: "Today",
banner: null,
body: () => (
<>
Hi, and welcome to the team!
So glad you're with us. I've shared your week-1 checklist below — calendar
invites for your 1:1 with your manager and the Friday team lunch are already in
your inbox.
Heads up: in the next hour you'll get a DocuSign envelope for your
employment paperwork (employment agreement, IP assignment, tax forms). Sign that
today if you can — it unblocks your benefits enrolment on Monday.
Any questions, ping me directly. My door is open.
Sarah People Operations · ext. 4203
),
correct: "safe",
teach: {
title: "Routine onboarding — looks exactly like what it is.",
summary:
"Display name and real sender domain match. Internal sender is verified. No urgency, no payment ask, no surprise links. The mention of an inbound DocuSign envelope is the context you'll want for the fourth message.",
indicators: [
{ kind: "ok", text: "Display name and real sender domain match (sarah.chen@company.com)." },
{ kind: "ok", text: "Internal verified sender (Defender authentication passed)." },
{ kind: "neutral", text: "No urgency, no payment ask, no out-of-band channel jumping." },
{ kind: "neutral", text: "Mentions a DocuSign envelope coming in the next hour — note this for later." },
],
verdictIfRight: "Right call. Not every new email needs a Defender escalation — clean signals get the clean disposition.",
verdictIfWrong: {
junk: "Reporting a verified internal sender as Junk is exactly the noise the SOC training tries to dial down. Junk-rate inflation buries real signal.",
phishing: "Reporting your People-Ops contact as phishing is the over-rotation new hires often make after generic awareness training. Calibrate.",
},
},
},
{
id: "m-ceo-bec",
avatarColor: "#0078D4",
avatarText: "SA",
senderShort: "Sundar Aravind",
sender: { display: "Sundar Aravind", real: "ceo.aravind@gmail.com", spoof: true, verification: "External sender · personal mailbox" },
subject: "Quick favour — are you at your desk?",
preview: "Are you at your desk? I need a quick favour and I'm stuck in back-to-back meetings…",
time: "8:22 AM",
day: "Today",
banner: { kind: "warn", title: "First-time sender. This email looks similar to a previous sender's display name.", detail: "Display name \"Sundar Aravind\" resembles an internal contact. Real sender is a personal gmail.com address.", action: "Show original" },
body: ({ urlHover }) => (
<>
Hello,
Are you at your desk? I need a quick favour and I'm stuck in back-to-back
meetings — can't take calls.
Please reply from your phone (not email) so we can move fast. I'll send
instructions once I know you're available. Don't loop anyone else in — keep
this between us for now.
— S Sent from my iPhone
),
correct: "phishing",
teach: {
title: "Business Email Compromise — CEO impersonation pattern.",
summary:
"Display says CEO but the real sender is a personal Gmail. The opener stacks three pressure-isolation moves: \"quick favour\", \"don't loop anyone in\", \"reply from your phone\". The classic follow-up is a gift-card or wire request.",
indicators: [
{ kind: "bad", text: "Display \"Sundar Aravind\" resembles internal exec; real sender is ceo.aravind@gmail.com." },
{ kind: "bad", text: "External sender flagged by Defender. No prior thread with this address." },
{ kind: "bad", text: "Urgency + channel switch (\"reply from your phone, not email\")." },
{ kind: "bad", text: "Isolation (\"don't loop anyone in\") — keeps the target from a sanity-check." },
],
verdictIfRight: "Right call. BEC openers like this rarely contain a payload yet — the trick is catching the opener so you never see the wire request.",
verdictIfWrong: {
safe: "Marking safe is the failure mode this whole cohort exists to fix. BEC successfully delivered is six-figure money on average.",
junk: "Junk-only sends this to a slower SOC queue. The combined indicators warrant the phishing report and the executive-team alert that comes with it.",
},
},
},
{
id: "m-docusign",
avatarColor: "#FFCC00",
avatarText: "DS",
avatarClass: "docusign",
senderShort: "DocuSign",
trickPositive: true,
sender: { display: "DocuSign via Sarah Chen", real: "dse_NA8@docusign.net", spoof: false, match: true, verification: "Verified DocuSign sender" },
subject: "Sarah Chen sent you a document to sign: Employment Agreement",
preview: "Sarah Chen has sent you a document to sign. Employment Agreement · 7 pages…",
time: "7:58 AM",
day: "Today",
banner: { kind: "info", title: "First time you've received mail from this DocuSign envelope.", detail: "DocuSign is a verified sender. The link below has been protected by Safe Links and resolves to docusign.net.", action: "Learn more" },
body: ({ urlHover }) => (
<>
Hello,
Sarah Chen has sent you a new DocuSign document to review and sign.
This email was sent on behalf of Sarah Chen from Company. If you have
questions about this document, contact the sender directly. To stop receiving
this email, click here.
DocuSign, Inc. · 221 Main St., San Francisco, CA 94105
),
correct: "safe",
teach: {
title: "The trick-positive. Looks transactional, isn't a phish.",
summary:
"Real sender is dse_NA8@docusign.net (DocuSign's actual mail domain). The link resolves to docusign.net. Sarah told you in the previous email this envelope was coming. Three independent confirmations.",
indicators: [
{ kind: "ok", text: "Sender domain is docusign.net — DocuSign's real envelope-sender." },
{ kind: "ok", text: "Authentication passed. Defender marked sender as verified." },
{ kind: "ok", text: "Link resolves to na8.docusign.net (the real DocuSign region for North-America EU envelopes)." },
{ kind: "ok", text: "Context match: the People-Ops email from Sarah explicitly mentioned this envelope was on its way." },
],
verdictIfRight: "Exactly the call the cohort usually misses. Awareness training over-trains for \"report anything transactional\" — the discipline you just showed is what good triage looks like.",
verdictIfWrong: {
junk: "Most cohorts mark legit DocuSign as Junk because it \"looks transactional\". Over-reporting buries real signals under noise — the SOC stops trusting alerts from your team.",
phishing: "Reporting a verified DocuSign envelope that you were told to expect is exactly the over-rotation we're calibrating away from. This is the part awareness training skips.",
},
},
},
];
const FOLDERS = [
{ name: "Focused", icon: "★", count: 4, active: true },
{ name: "Other", icon: "📥", count: 12 },
{ name: "Drafts", icon: "✏", count: 1 },
{ name: "Sent items", icon: "→", count: null },
{ name: "Deleted items", icon: "🗑", count: 3, muted: true },
{ name: "Junk email", icon: "⚠", count: null, muted: true },
{ name: "Archive", icon: "▤", count: null, muted: true },
{ name: "Notes", icon: "▭", count: null, muted: true },
{ name: "Conversation history", icon: "↔", count: null, muted: true },
];
const CHOICES = {
safe: { id: "safe", label: "Looks fine", ribbon: "It's not junk", toast: "Kept in Inbox. No further action.", toastKind: "info" },
junk: { id: "junk", label: "Report as Junk", ribbon: "Report > Junk", toast: "Reported to your IT team. Message moved to Junk Email.", toastKind: "info" },
phishing: { id: "phishing", label: "Report as Phishing", ribbon: "Report > Phishing", toast: "Reported to Security. Message moved to Deleted Items and a copy sent to SOC.", toastKind: "success" },
};
/* ─────────────────────────────────────────────────────
App
───────────────────────────────────────────────────── */
function App() {
const [selectedId, setSelectedId] = useState(EMAILS[0].id);
const [decisions, setDecisions] = useState({}); // id → { choice, correct }
const [coach, setCoach] = useState(null); // { email, choice, correct }
const [toast, setToast] = useState(null);
const [reportOpen, setReportOpen] = useState(false);
const [urlInfo, setUrlInfo] = useState(null);
const [showResults, setShowResults] = useState(false);
const email = useMemo(() => EMAILS.find((e) => e.id === selectedId), [selectedId]);
const decided = !!decisions[email?.id];
const done = Object.keys(decisions).length;
const correct = Object.values(decisions).filter((d) => d.correct).length;
const progressPct = Math.round((done / EMAILS.length) * 100);
const urlHover = useMemo(() => ({
set: (info) => setUrlInfo(info),
clear: () => setUrlInfo(null),
}), []);
const decide = (choiceId) => {
if (!email || decisions[email.id]) return;
const isCorrect = choiceId === email.correct;
const choice = CHOICES[choiceId];
setDecisions((d) => ({ ...d, [email.id]: { choice: choiceId, correct: isCorrect } }));
setReportOpen(false);
// Toast
setToast({ msg: choice.toast, kind: choice.toastKind });
setTimeout(() => setToast(null), 2200);
// Coach panel after a beat
setTimeout(() => {
setCoach({ email, choice: choiceId, correct: isCorrect });
}, 600);
};
const nextEmail = () => {
setCoach(null);
setTimeout(() => {
// pick next undecided email in order
const order = EMAILS.map((e) => e.id);
const startIdx = order.indexOf(email.id);
let nextId = null;
for (let i = 1; i <= order.length; i++) {
const candidate = order[(startIdx + i) % order.length];
if (!decisions[candidate] && candidate !== email.id) { nextId = candidate; break; }
}
// re-check now-completed state including current decision
const allDone = Object.keys({ ...decisions, [email.id]: true }).length >= EMAILS.length;
if (!nextId && allDone) {
setShowResults(true);
} else if (nextId) {
setSelectedId(nextId);
}
}, 300);
};
const restart = () => {
setSelectedId(EMAILS[0].id);
setDecisions({});
setCoach(null);
setToast(null);
setShowResults(false);
};
// Close report menu on outside click
useEffect(() => {
if (!reportOpen) return;
const onClick = (e) => {
if (!e.target.closest(".rb-report-wrap")) setReportOpen(false);
};
document.addEventListener("click", onClick);
return () => document.removeEventListener("click", onClick);
}, [reportOpen]);
return (
<>
{/* ───── M365 top bar ───── */}
Simulated phish-cohort #14 · 4 messages including one trick-positive. The
pass-bar is 3 / 4 correct triages — including catching the legitimate
message that looks suspicious.
{correct}/{EMAILS.length}
Pass bar3 / 4 correct
L3 targetclick-rate 18% → ≤ 5%
L4 targetincidents 2/q → ≤ 1/yr
{EMAILS.map((e) => {
const d = decisions[e.id];
if (!d) return null;
return (