/* ============================================================ Guided Workshop — AI Report tab Single-screen analyst's read-out of the workshop. Reads every item, response, session note, and asks Claude to produce a structured insight package: headline, at-a-glance KPIs, executive bullets, strengths, concerns, recommended actions, themes. The component then renders that JSON with proper visual hierarchy (not just bullets like the legacy design). Exports: window.AiReportTab ============================================================ */ const { useState: aUseState, useEffect: aUseEffect, useRef: aUseRef, useMemo: aUseMemo, useCallback: aUseCallback } = React; /* ---------- Icons ---------- */ const aiIcons = { sparkle: , copy: , thumbUp: , thumbDn: , retry: , share: , download: , check: , alert: , arrow: , plus: , theme: , flag: , close: , }; /* ---------- The Claude prompt ---------- We ask for strict JSON to keep parsing trivial. Schema kept tight so the model doesn't drift into a wall of prose. */ function buildPrompt({ moduleName, chapters }) { /* Lightweight digest of the workshop the model can reason over. We include item titles, types, and 1-line stand-ins for responses so prompts stay small even on big modules. */ const lines = []; for (const c of chapters) { lines.push(`## Chapter ${c.num}: ${c.title}`); for (const it of c.items) { const t = it.type === "question" && it.mode === "poll" ? "poll" : it.type; const meta = it.questionType ? ` · ${it.questionType}` : ""; const desc = it.description ? `\n desc: ${it.description}` : ""; lines.push(` - ${it.num} [${t}${meta}] ${it.title}${desc}`); } } const digest = lines.join("\n"); return `You are an analyst preparing an executive report on a guided compliance/operations workshop held on the Method 8 platform. Module: "${moduleName}" Audience: programme owner + compliance lead (Adaeze Nwosu, Adetola Okafor). Vocabulary: this is a "module" not a survey; participants are "completers"; outcomes are "actions"; questions live inside "chapters". Workshop digest: ${digest} Produce a strictly-valid JSON object with this exact schema. Return ONLY the JSON, no preamble, no markdown fences. { "headline": "ONE punchy sentence (max 20 words) capturing the most important takeaway.", "confidence": "high" | "medium" | "low", "confidence_note": "ONE short sentence explaining the confidence rating.", "glance": [ { "label": "Overall health", "value": "e.g. 58%", "tone": "good"|"warn"|"bad", "note": "≤8 word context" }, { "label": "Top concern", "value": "≤4 word phrase", "tone": "warn"|"bad", "note": "≤8 word context" }, { "label": "Top strength", "value": "≤4 word phrase", "tone": "good", "note": "≤8 word context" }, { "label": "Next step", "value": "≤4 word phrase", "tone": "neutral", "note": "≤8 word context" } ], "executive": [ "3 to 5 bullet sentences. Each ≤25 words. Plain prose, no markdown." ], "strengths": [ { "title": "5-word phrase", "detail": "≤25 word explanation", "items": ["item id like 4.1"] } ], "concerns": [ { "title": "5-word phrase", "detail": "≤25 word explanation", "items": ["item id"] } ], "actions": [ { "priority": "high"|"med"|"low", "title": "Action verb + object", "detail": "≤20 word elaboration", "owner": "role suggestion", "items": ["item id"] } ], "themes": [ { "title": "3-word theme name", "detail": "≤30 words", "tags": ["short", "labels"] } ] } Rules: - 2-3 entries for strengths, concerns, actions, themes (not more). - item ids must be real ids from the digest above (e.g. "4.1", "5.2"). - No "the team should consider…" fluff. Be direct. - If the digest contains no signal of something, write "Insufficient data" as the value/title and explain in the detail. - Keep all strings short and concrete.`; } /* ---------- Demo fallback report ---------- Used if the user clicks Generate offline or Claude rate-limits. Same shape as the live one so the renderer stays simple. */ const DEMO_REPORT = { headline: "Solid grasp of foundations, but accountability and tooling gaps are slowing real change.", confidence: "medium", confidence_note: "Based on 47 responses across 6 chapters with mixed completion of evidence uploads.", glance: [ { label: "Overall health", value: "62%", tone: "warn", note: "Above target on Understanding, below on Performance" }, { label: "Top concern", value: "Patch cadence drift", tone: "bad", note: "No defined owner; data exists in two places" }, { label: "Top strength", value: "Strategic alignment", tone: "good", note: "Direction is clear across leadership" }, { label: "Next step", value: "Define asset owner", tone: "neutral", note: "Single source-of-truth for the asset register" }, ], executive: [ "The team has a clear strategic direction and reads the foundations framework consistently — Understanding scored highest of the three score types.", "Compliance and Performance lag behind. Multiple chapters surfaced the same root cause: data lives in two systems with no defined reconciliation.", "Three of the five live poll questions split sharply down the middle, suggesting cultural rather than process issues at play.", "Evidence uploads are patchy. Half the chapters have no supporting document attached — risk for any future audit.", ], strengths: [ { title: "Clear strategic direction", detail: "Chapter 2 returned the highest Understanding scores across all respondents — leadership intent reads cleanly.", items: ["2.1", "2.2"] }, { title: "Strong governance forums", detail: "Terms of reference are documented and meeting cadence is regular — uncommonly mature for the band.", items: ["3.2"] }, ], concerns: [ { title: "Asset register drift", detail: "Finance and Ops keep parallel registers; reconciliation happens quarterly at best.", items: ["4.1", "4.2"] }, { title: "Maturity self-rating gap", detail: "Self-scored 'Defined' but evidence places this at 'Initial' — over-rating risks downstream planning.", items: ["4.2", "6.2"] }, { title: "No single owner for write-offs", detail: "Came up in three separate chapters' session notes; not yet captured as an action.", items: ["3.1", "4.1", "6.1"] }, ], actions: [ { priority: "high", title: "Nominate one owner for the asset register", detail: "Pick from Finance or Ops — both can't keep parallel registers. Owner sets reconciliation cadence.", owner: "Programme lead", items: ["4.1"] }, { priority: "high", title: "Re-score 4.2 with evidence first", detail: "Move from self-rating to evidence-led scoring. Use the audit log on 3.2 as the input.", owner: "Compliance lead", items: ["4.2"] }, { priority: "med", title: "Backfill evidence uploads", detail: "Half the chapters have no supporting document. Spend one week closing gaps before the next review.", owner: "Adaeze Nwosu", items: ["1.3", "2.5", "4.2"] }, { priority: "low", title: "Run a follow-up on cultural split polls", detail: "Polls 5.1 and 5.3 split 50/50 — convene a focused discussion to understand the dissent.", owner: "Adetola Okafor", items: ["5.1", "5.3"] }, ], themes: [ { title: "Single source of truth", detail: "Recurring across data, governance, and process chapters. One owner, one register, one cadence.", tags: ["data", "ownership"] }, { title: "Self-rating gap", detail: "Teams systematically over-rate themselves relative to evidence. Affects 4.2 and 6.2 directly.", tags: ["calibration", "evidence"] }, { title: "Cultural alignment", detail: "Process is in place but adoption is uneven — visible in the split polls and the session notes.", tags: ["adoption", "polls"] }, ], }; /* ---------- Hook ---------- */ function useAiReport({ moduleName = "Asset Management" } = {}) { /* status: 'idle' | 'generating' | 'ready' | 'error' */ const [status, setStatus] = aUseState("idle"); const [report, setReport] = aUseState(null); const [errMsg, setErrMsg] = aUseState(null); const [feedback, setFeedback] = aUseState(null); /* 'up' | 'down' | null */ const [generatedAt, setGeneratedAt] = aUseState(null); /* Streaming phase text — purely cosmetic; rotates while we wait. */ const [phase, setPhase] = aUseState("Reading responses"); aUseEffect(() => { if (status !== "generating") return; const phases = [ "Reading the workshop transcript", "Identifying themes across chapters", "Comparing evidence with self-reported scores", "Drafting executive bullets", "Surfacing recommended actions", ]; let i = 0; setPhase(phases[i]); const handle = setInterval(() => { i = (i + 1) % phases.length; setPhase(phases[i]); }, 2200); return () => clearInterval(handle); }, [status]); const generate = aUseCallback(async () => { setStatus("generating"); setReport(null); setErrMsg(null); const chapters = window.GW_CHAPTERS || []; const prompt = buildPrompt({ moduleName, chapters }); try { const text = await window.claude.complete({ messages: [{ role: "user", content: prompt }], }); /* Strip optional code fences just in case the model adds them */ const cleaned = text.replace(/^```(?:json)?/i, "").replace(/```$/i, "").trim(); let parsed; try { parsed = JSON.parse(cleaned); } catch (e) { /* Sometimes the model wraps JSON inside prose — extract the first { ... } block */ const m = cleaned.match(/\{[\s\S]*\}/); if (!m) throw e; parsed = JSON.parse(m[0]); } setReport(parsed); setGeneratedAt(new Date()); setStatus("ready"); } catch (e) { console.error("[AI report] generation failed:", e); /* Fall back to the demo report so the user always has something to interact with — not a hard error blocking the tab. */ setReport(DEMO_REPORT); setGeneratedAt(new Date()); setStatus("ready"); setErrMsg(`Live AI call failed (${e?.message || "unknown"}). Showing a sample report instead.`); } }, [moduleName]); const regenerate = generate; const reset = aUseCallback(() => { setStatus("idle"); setReport(null); setErrMsg(null); setFeedback(null); }, []); return { status, report, errMsg, feedback, setFeedback, phase, generate, regenerate, reset, generatedAt }; } /* ===================================================================== Empty hero — first-run state ===================================================================== */ function AiReportEmpty({ stats, onGenerate }) { return (