/* global React, Icon, T24, PersonaMark */ function CreatePlay({ onCancel, onCreated }) { const [step, setStep] = React.useState(0); const [persona, setPersona] = React.useState(null); const [customPersona, setCustomPersona] = React.useState(""); const [title, setTitle] = React.useState(""); const [sources, setSources] = React.useState([]); // { name, size, _file } const [draggingOver, setDraggingOver] = React.useState(false); const [generating, setGenerating] = React.useState(false); const [genStep, setGenStep] = React.useState(0); const [genError, setGenError] = React.useState(null); const [uploadProgress, setUploadProgress] = React.useState({}); const [createdPlayId, setCreatedPlayId] = React.useState(null); const steps = ["Persona", "Brief", "Sources", "Review"]; // Sanitize custom persona to a folder-safe slug: alphanumeric only, max 6 chars. // Without the strip, "VP of Innovation" → "VP OF " (trailing space) → folder // name "VP OF Elevate" with a double-space. Now: → "VPOFIN". const personaId = persona === "__custom" ? customPersona.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 6) : persona; const playSlug = personaId ? ((window.SP?.playFolderName?.[personaId]) || `${personaId} Elevate`) : ""; const personaFull = persona === "__custom" ? customPersona : (T24.personaCatalog.find(p => p.id === personaId)?.full || personaId || ""); const submit = async () => { setGenerating(true); setGenError(null); try { // Phase 1: Ensure SharePoint folders setGenStep(1); if (window.spEnsureFolders) { await spEnsureFolders(playSlug).catch(e => console.warn("Folder create:", e)); } // Phase 2: Upload source files to 01 - Source Materials. // Surface upload failures — the cron pulls from these files later; a silent // partial upload means the agent works against an incomplete source set // and the user sees nothing wrong until the draft comes back thin. setGenStep(2); const realFiles = sources.filter(s => s._file); const uploadedNames = []; const uploadErrors = []; for (const s of realFiles) { try { await spUpload(s._file, playSlug, "sources", (pct) => { setUploadProgress(prev => ({ ...prev, [s.name]: pct })); }); uploadedNames.push(s.name); } catch (e) { console.error("Upload failed:", s.name, e); uploadErrors.push({ name: s.name, message: e?.message || String(e) }); } } if (uploadErrors.length > 0) { const head = uploadErrors[0]; const summary = uploadErrors.length === realFiles.length ? `All ${realFiles.length} source upload${realFiles.length === 1 ? "" : "s"} failed` : `${uploadErrors.length} of ${realFiles.length} source uploads failed (${uploadErrors.map(e => e.name).join(", ")})`; throw new Error(`${summary}. First error — ${head.name}: ${head.message}`); } // Phase 3: Register play in T24-Plays.json setGenStep(3); let newPlay = null; if (window.spCreatePlay) { newPlay = await spCreatePlay({ persona: personaId, personaFull, title: title || `${personaFull} play`, status: "Narrative draft queued · pipeline running", statusKind: "generating", pipelineStartedAt: new Date().toISOString(), lastActivity: "Narrative draft queued", }).catch(e => { console.error("spCreatePlay:", e); throw e; }); } // Phase 4: Drop generate-narrative marker so the cron picks it up setGenStep(4); const marker = JSON.stringify({ persona: personaId, playSlug, action: "generate-narrative", title: title || `${personaFull} play`, requestedAt: new Date().toISOString(), status: "pending", sources: uploadedNames, note: "Auto-dispatched by Create flow. Draft Narrative working paper from these client sources; calibrate against source-docs exemplars (CAIO_Elevate_FCD_Narrative.docx, CAO_Elevate_Storyboard_FINAL.docx, CAO_CAIO_CIO_Real_World_Examples.docx, Deck_Strategy.md, instructions.md). Forward direction.", }, null, 2); const markerBlob = new File([marker], "pipeline-request.json", { type: "application/json" }); if (window.spUpload) { // Marker drop is load-bearing — without it, the cron has nothing to dispatch // and the play sits at "Awaiting first draft" forever. Throw on failure so the // create UI's error banner surfaces it instead of swallowing into the console. try { await spUpload(markerBlob, playSlug, "sources"); } catch (e) { console.error("Marker drop failed:", e); throw new Error("Couldn't queue the narrative draft (marker upload failed). The play is created and your sources are uploaded — click Retry to re-queue, or open the workspace and use Re-run Narrative."); } } setGenStep(5); setTimeout(() => { if (onCreated) onCreated(newPlay); }, 600); } catch (e) { console.error("CreatePlay submit failed:", e); setGenError(e?.message || String(e)); } }; const next = () => setStep(s => Math.min(s + 1, steps.length - 1)); const back = () => setStep(s => Math.max(s - 1, 0)); const canNext = step === 0 ? !!persona : step === 1 ? title.trim().length > 4 : true; if (generating) { const fileCount = sources.filter(s => s._file).length; const totalUploadPct = fileCount === 0 ? 100 : Math.round( Object.values(uploadProgress).reduce((a, b) => a + b, 0) / (fileCount * 100) * 100 ); const phases = [ { label: "Setting up SharePoint folders…", done: genStep > 1 }, { label: fileCount > 0 ? `Uploading ${fileCount} source file${fileCount === 1 ? "" : "s"}… ${genStep === 2 ? totalUploadPct + "%" : ""}` : "No files to upload", done: genStep > 2 }, { label: "Registering play in T24-Plays.json…", done: genStep > 3 }, { label: "Queuing narrative draft (T24 will read your sources)…", done: genStep > 4 }, { label: "Done — opening your play.", done: genStep >= 5 }, ]; return (
Creating your play

Setting up the
{playSlug} play.

{phases.map((p, i) => (
genStep ? 0.35 : 1}}> {p.label} {p.done && }
))}
{genStep >= 5 && (
If the page doesn't redirect automatically —
)} {genError && (
Stalled at step {genStep} — {["", "Folder setup", "File upload", "Register play", "Queue narrative"][genStep] || "Submit"}
{genError}
Full trace is in the browser console (⌥⌘I → Console).
)}
); } return (
{steps.map((s, i) => (
{String(i + 1).padStart(2, "0")} {s}
))}
{step === 0 && (
Step 01 · Persona

Who is this play aimed at?

Plays target a role across many companies. Pick the C-suite persona this narrative is meant to resonate with.

{T24.personaCatalog.map(p => ( ))}
)} {step === 1 && (
Step 02 · Brief

What's the working title?

A one-line provocation that will headline the narrative. T24 will refine it after reading your sources.

setTitle(e.target.value)} autoFocus />
Reference exemplars · forward chain
{[ { n: "01", name: "Narrative working paper", file: "CAIO_Elevate_FCD_Narrative.docx", desc: "Drafted first from your client sources. Sets purpose, design principles, 7-move arc, exit beliefs.", primary: true }, { n: "02", name: "Narrative arc", file: "Derived from approved Narrative", desc: "One card per move — seller goal, branch points, tactical notes, what the customer should feel." }, { n: "03", name: "Storyboard", file: "CAO_Elevate_Storyboard_FINAL.docx", desc: "Slide-by-slide cards: title, message, visual intent, stats, sources. Generated from the approved Arc." }, { n: "04", name: "Final First Call Deck", file: "PPTX, built last", desc: "The artifact a seller walks through in 45–60 min. Calibrated against the chain above, never written first." }, ].map(ex => (
{ex.n}
{ex.name}{ex.primary && First · drafted from sources}
{ex.file}
{ex.desc}
))}
Forward direction: your sources → Narrative → Arc → Storyboard → Deck. Never the reverse. The exemplars hold the shape (7 moves, 5 enablers, peer-conversation framing); your client material drives the substance.
)} {step === 2 && (
Step 03 · Sources

Feed T24 the raw material.

Drop the meeting transcript, internal decks, briefs — anything from the client. The more T24 reads, the less it sounds like AI.

{ e.preventDefault(); setDraggingOver(true); }} onDragLeave={() => setDraggingOver(false)} onDrop={e => { e.preventDefault(); setDraggingOver(false); const newFiles = Array.from(e.dataTransfer.files).map(f => ({ name: f.name, size: f.size, _file: f })); setSources(s => [...s, ...newFiles]); }} onClick={() => { const input = document.createElement("input"); input.type = "file"; input.multiple = true; input.accept = ".docx,.pdf,.pptx,.txt,.vtt,.mp4,.xlsx"; input.onchange = e => { const newFiles = Array.from(e.target.files).map(f => ({ name: f.name, size: f.size, _file: f })); setSources(s => [...s, ...newFiles]); }; input.click(); }}>
Drop transcripts, decks, notes, PDFs
or click to browse · .docx, .pdf, .pptx, .txt, .vtt
{sources.length === 0 && (
)}
{sources.length > 0 && (
{sources.map((s, i) => (
{s.name} {(s.size / 1024).toFixed(0)} KB
))}
{sources.length} source{sources.length === 1 ? "" : "s"} · ready
)}
)} {step === 3 && (
Step 04 · Review

Ready to start the play?

T24 will draft Narrative v1, create your SharePoint folders, and notify the team. You can change anything later.

Persona {persona === "__custom" ? customPersona : T24.personaCatalog.find(p => p.id === persona)?.full}
Working title"{title}"
ReferenceCXO Elevate FCD · 7-move arc · 5 enablers
Sources{sources.length} file{sources.length === 1 ? "" : "s"} ready for T24
Team
{["angie","stephen","michael"].map(p => { const person = T24.people[p]; return {person.initials}; })}
Angie (lead), Stephen, Michael
SharePoint/BLN24/AWS/Plays/{(persona === "__custom" ? customPersona.slice(0,3).toUpperCase() : persona) || "—"}-{new Date().getFullYear()}/
)}
{step + 1} of {steps.length} · {steps[step]}
{step > 0 && } {step < steps.length - 1 && } {step === steps.length - 1 && }
); } window.CreatePlay = CreatePlay;