// ───────────────────────────────────────────────────────────────────────────── // EDGE — Business Decision Simulation // Working prototype · The Architect's Lab · The Game Changers // Black & white design system. No colour accents. // // Standalone web version. Two changes from the original Claude artifact: // 1. callClaude now talks to /api/chat (the backend relay) instead of calling // api.anthropic.com directly. The API key lives only on the server. // 2. A short access-code gate sits in front of the experience. // Everything else — the scenarios, the engine prompts, the design — is unchanged. // ───────────────────────────────────────────────────────────────────────────── const { useState, useRef, useEffect } = React; const INK = "#161614"; const SOFT = "#6E6E69"; const HAIR = "#DCDCD6"; const PAPER = "#FCFCFA"; const SCENARIOS = [ { id: "supplier", title: "The Supplier Ultimatum", sector: "Agro-processing · Export", opening: { act_title: "A call from Réunion", situation: "You run a small agro-processing business in Moka, exporting flavoured rum bases and fruit concentrates to hotels and two distributors in Réunion. Sixty per cent of your raw input comes from a single supplier, a family operation in Saint-Pierre you have worked with for four years. This morning the son, who has just taken over from his father, calls you. He is courteous but firm: a larger Mauritian competitor has offered to buy his entire output at a fourteen per cent premium, with payment at thirty days instead of your sixty. He says the family would prefer to keep working with you, out of loyalty to his father's relationship, but he needs an answer within one week.", the_pressure: "Matching the premium would erase most of your margin on your two biggest contracts. Your hotel clients have fixed-price agreements until December. Your operations manager, who negotiated the original supplier terms, has not yet been told.", decision_required: "What do you do in the next seven days, and what do you actually say, to the son, and to anyone else you choose to involve? Write your reasoning and your words.", }, }, { id: "cash", title: "The Quiet Cash Crisis", sector: "Services · B2B", opening: { act_title: "Healthy on paper", situation: "Your facilities-services company in Port Louis has just closed its best quarter on record. Revenue is up thirty per cent, you have signed two corporate clients, and your team has grown to eighteen people. Yesterday evening your part-time accountant sent you a short message: receivables have stretched from forty-five days to over ninety, your two newest clients are the slowest payers, and at the current rhythm you will not cover payroll in five weeks. One of the slow payers is a large group whose business represents a quarter of your revenue, and whose procurement officer has stopped answering your emails.", the_pressure: "Your relationship manager at the bank has hinted that an overdraft extension is possible but would require a personal guarantee. Your operations lead, who recruited most of the new team, does not know how tight things are. Your spouse co-signed the original business loan.", decision_required: "What do you do this week, and what do you actually say, to the procurement officer, to your bank, to your team if you choose to tell them? Write your reasoning and your words.", }, }, { id: "board", title: "The Boardroom Challenge", sector: "Family enterprise · Retail", opening: { act_title: "In front of the bank", situation: "You founded a homeware retail business eight years ago and brought in your uncle as a director when the family invested at the start. The business now has three outlets and you are presenting an expansion plan to your bank, seeking financing for a fourth location in the west. In the meeting, with your relationship manager and her credit analyst present, your uncle interrupts your presentation. He says, smiling, that the family has 'not yet agreed' to the expansion, that the figures are 'your daughter's optimism', and that perhaps the bank should wait until 'the family has discussed it properly'. The relationship manager closes her folder and suggests reconvening once the shareholders are aligned.", the_pressure: "The landlord of the west-coast site has given you until the end of the month before opening the lease to other offers. Your uncle holds twenty per cent of the shares; you hold sixty. Your mother, who holds the remaining twenty, avoids conflict and has not taken a position.", decision_required: "What do you do in the next forty-eight hours, and what do you actually say, in the room, to your uncle afterwards, to the relationship manager? Write your reasoning and your words.", }, }, ]; const DIMENSIONS = "1. Strategic clarity — does the participant reach the systemic cause or only the surface symptom? 2. Stakeholder awareness — does the response account for the interests and likely reactions of others? 3. Risk orientation — does the participant move toward the risk, around it, or away from it? 4. Leadership agency — does the response reflect ownership or deflection? 5. Relational intelligence — when the participant writes the words they would actually say, how do those words land: do they preserve dignity, build trust, and create the conditions for the other person to move?"; // ── The only networking change: talk to our own backend, never Anthropic directly. async function callClaude(prompt, accessCode) { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt, accessCode }), }); if (!response.ok) { const err = await response.json().catch(() => ({})); throw new Error(err.error || "Request failed"); } const data = await response.json(); const text = (data.content || []) .filter((b) => b.type === "text") .map((b) => b.text) .join("\n"); const clean = text.replace(/```json|```/g, "").trim(); return JSON.parse(clean); } function buildHistory(scenario, acts, responses) { let h = `SCENARIO: ${scenario.title} (${scenario.sector})\n\n`; acts.forEach((a, i) => { h += `ACT ${i + 1} — ${a.act_title}\nSituation: ${a.situation}\nPressure: ${a.the_pressure}\nDecision required: ${a.decision_required}\n`; if (responses[i]) h += `PARTICIPANT'S RESPONSE (their reasoning and their actual words): ${responses[i]}\n`; h += `\n`; }); return h; } function evolvePrompt(scenario, acts, responses, actNumber) { return `You are the adaptive engine of EDGE, a business simulation platform for young entrepreneurs and women leaders in Mauritius, built by The Game Changers. You evolve a live scenario in response to the participant's actual decisions. You are rigorous but never cruel; the pressure must feel like real Mauritian business life, not a punishment. ${buildHistory(scenario, acts, responses)} Silently analyse the participant's latest response across these five dimensions (do not output the analysis): ${DIMENSIONS} Now write ACT ${actNumber} of the scenario. The world must respond directly and plausibly to what the participant actually did and said: consequences of their choices arrive, a stakeholder reacts to the participant's specific words, and the pressure escalates in a way that targets the weakest dimension you observed. Keep it grounded in Mauritian business texture (banking relationships, family dynamics, suppliers, regulators). Introduce at most one new element. End with a decision that requires the participant to both decide and to write the actual words they would say to someone. Respond ONLY with valid JSON, no preamble, no markdown fences, in exactly this shape: {"act_title": "short evocative title, 3-6 words", "situation": "what has happened since their decision, reacting to their specific words and choices, 90-130 words", "the_pressure": "the constraint or stake that makes this hard, 40-70 words", "decision_required": "the decision and the words they must write, one or two sentences ending with: Write your reasoning and your words."}`; } function profilePrompt(scenario, acts, responses) { return `You are the reflective layer of EDGE, a simulation platform within The Architect's Lab, a coaching programme by The Game Changers (Mauritius). A participant has completed a three-act simulation. Your task is to write their Thinking Profile. The profile is descriptive, never evaluative. It does not score, rank, praise or condemn. It mirrors, in the spirit of person-centred practice: it gives the participant precise, dignified language for patterns in how they think and communicate under pressure, so that they can examine those patterns with their coach. Write warmly and plainly, in the second person, with quiet authority. Quote or closely paraphrase the participant's own words where it illuminates a pattern. ${buildHistory(scenario, acts, responses)} The five dimensions to mirror: ${DIMENSIONS} Respond ONLY with valid JSON, no preamble, no markdown fences, in exactly this shape: {"opening": "a 60-90 word portrait of how this person approached the whole arc, naming the throughline you observed", "dimensions": [{"name": "Strategic clarity", "mirror": "2-3 sentences"}, {"name": "Stakeholder awareness", "mirror": "2-3 sentences"}, {"name": "Risk orientation", "mirror": "2-3 sentences"}, {"name": "Leadership agency", "mirror": "2-3 sentences"}, {"name": "Relational intelligence", "mirror": "2-3 sentences, drawing on the actual words they wrote to stakeholders"}], "coaching_questions": ["three open questions, each one sentence, that the participant should bring to their next coaching session — questions only a human conversation can resolve"], "closing_line": "one sentence that settles rather than concludes, no advice, no exclamation"}`; } const LOADING_LINES = [ "The world is responding to your decision", "Your words have reached their audience", "Consequences are taking shape", ]; function App() { const [screen, setScreen] = useState("gate"); const [accessCode, setAccessCode] = useState(""); const [codeInput, setCodeInput] = useState(""); const [gateError, setGateError] = useState(null); const [gateChecking, setGateChecking] = useState(false); const [scenario, setScenario] = useState(null); const [acts, setActs] = useState([]); const [responses, setResponses] = useState([]); const [draft, setDraft] = useState(""); const [loading, setLoading] = useState(false); const [loadLine, setLoadLine] = useState(0); const [profile, setProfile] = useState(null); const [error, setError] = useState(null); const topRef = useRef(null); useEffect(() => { if (!loading) return; const t = setInterval( () => setLoadLine((n) => (n + 1) % LOADING_LINES.length), 2600 ); return () => clearInterval(t); }, [loading]); useEffect(() => { if (topRef.current) topRef.current.scrollIntoView({ behavior: "smooth" }); }, [acts.length, screen]); const unlock = async () => { const code = codeInput.trim(); if (!code || gateChecking) return; setGateError(null); setGateChecking(true); try { const r = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ verify: true, accessCode: code }), }); if (r.ok) { setAccessCode(code); setScreen("intro"); } else { setGateError("That code was not recognised. Check it and try again."); } } catch (e) { setGateError("Could not reach the server. Try again in a moment."); } setGateChecking(false); }; const begin = (s) => { setScenario(s); setActs([s.opening]); setResponses([]); setDraft(""); setProfile(null); setError(null); setScreen("simulation"); }; const commit = async () => { if (draft.trim().length < 40 || loading) return; const newResponses = [...responses, draft.trim()]; setResponses(newResponses); setDraft(""); setLoading(true); setError(null); try { if (acts.length < 3) { const next = await callClaude( evolvePrompt(scenario, acts, newResponses, acts.length + 1), accessCode ); setActs((a) => [...a, next]); } else { const p = await callClaude( profilePrompt(scenario, acts, newResponses), accessCode ); setProfile(p); setScreen("profile"); } } catch (e) { setError( "EDGE could not reach its reasoning engine. Your response is kept below — try committing it again." ); setResponses(responses); setDraft(newResponses[newResponses.length - 1]); } setLoading(false); }; const reset = () => { setScreen("intro"); setScenario(null); setActs([]); setResponses([]); setProfile(null); setError(null); }; const roman = ["I", "II", "III"]; return (
{/* Masthead */}
E D G E
THE ARCHITECT'S LAB · THE GAME CHANGERS
{/* ── GATE ───────────────────────────────────────────────── */} {screen === "gate" && (

Enter your access code

EDGE is open to participants of The Architect's Lab. Enter the code you were given to begin.

setCodeInput(e.target.value)} onKeyDown={(e) => e.key === "Enter" && unlock()} placeholder="Access code" style={{ width: "100%", maxWidth: 340, boxSizing: "border-box", border: `1px solid ${HAIR}`, background: "#FFFFFF", padding: "14px 16px", fontSize: 15, color: INK, marginTop: 28, fontWeight: 300, letterSpacing: "0.04em", }} /> {gateError && (

{gateError}

)}
)} {/* ── INTRO ─────────────────────────────────────────────── */} {screen === "intro" && (

A thinking environment,
not a test.

EDGE places you inside a live business situation drawn from Mauritian reality. Your decisions change what happens next, and the people in the scenario respond to the words you actually write, not the ones you meant. There are no scores and no right answers. At the end, EDGE mirrors back how you think under pressure, and gives you questions to bring to your coach.

CHOOSE YOUR SITUATION
{SCENARIOS.map((s) => (
begin(s)} onKeyDown={(e) => e.key === "Enter" && begin(s)} style={{ border: `1px solid ${HAIR}`, background: "#FFFFFF", padding: "22px 24px", }} >
{s.sector.toUpperCase()}
{s.title}
{s.opening.situation.slice(0, 130)}…
))}

Three acts. Write freely, in your own words — reasoning and what you would actually say. Nothing you write is stored beyond this session.

)} {/* ── SIMULATION ─────────────────────────────────────────── */} {screen === "simulation" && scenario && (
{scenario.title.toUpperCase()}
ACT {roman[acts.length - 1]} OF III
{acts.map((a, i) => { const isCurrent = i === acts.length - 1; return (
ACT {roman[i]}

{a.act_title}

{a.situation}

{a.the_pressure}

{a.decision_required}

{responses[i] && (
YOUR RESPONSE

{responses[i]}

)}
); })} {!loading && !responses[acts.length - 1] && (