/* ============================================================ Guided Workshop — Transcribe + AI summary (shared) Records the live session, streams a transcript anchored to the item under discussion, and feeds the whole thing into Claude for a structured summary at the end. Exports onto window: useTranscribe({ activeItemId, activeItemLabel }) hook TranscribeButton start/stop pill (top bar) TranscribeBadge small floating "REC 02:14" pill TranscribeDrawer side panel with live transcript TranscribeSummaryModal AI summary overlay (Claude) The recording itself is mocked — there's no Web Audio call. A scheduler drips pre-baked transcript lines into state every few seconds so the demo feels alive. When `summarize()` runs, we hand the real transcript to `window.claude.complete()` and show the result. ============================================================ */ const { useState: txUseState, useEffect: txUseEffect, useCallback: txUseCallback, useRef: txUseRef, useMemo: txUseMemo } = React; /* ---------- Demo dialogue ---------- A workshop unfolds left-to-right through Asset Management items. Each line is { ts (seconds into session), who, text, itemId }. The scheduler picks the next line whose ts is <= elapsed and inserts it. This keeps the appearance deterministic regardless of the user's actual navigation — the transcript reflects "what was said", not "what the user is looking at right now". */ const TX_DIALOGUE = [ { ts: 2, who: "supporter", text: "Okay Adaeze, I'm in — let's start with the intro. Quick read, we'll spend more time on chapter 4.", itemId: "1.1" }, { ts: 8, who: "completer", text: "Sounds good. I've already skimmed it. Skipping to the asset register now.", itemId: "1.1" }, { ts: 15, who: "supporter", text: "Right — so on 4.1, what do you have today? A spreadsheet, a system, both?", itemId: "4.1" }, { ts: 22, who: "completer", text: "Both, honestly. Finance keeps the ledger, Ops keeps a spreadsheet. They drift apart by the quarter.", itemId: "4.1" }, { ts: 32, who: "supporter", text: "Classic. That's an action — single source of truth, owner assigned. Let me drop that in for you.", itemId: "4.1" }, { ts: 40, who: "completer", text: "Yeah please do. On 4.2 — what's the honest maturity score then?", itemId: "4.2" }, { ts: 47, who: "supporter", text: "If there's data but no defined process, that's Initial. Don't talk yourself into Repeatable.", itemId: "4.2" }, { ts: 55, who: "completer", text: "Initial it is. I'll note that we're targeting Defined by Q4.", itemId: "4.2" }, { ts: 64, who: "supporter", text: "Perfect. Add a comment to that effect on 4.2 so we remember why during the readout.", itemId: "4.2" }, { ts: 73, who: "completer", text: "Done. Moving on — 5.1, the open poll question. I'm a bit unsure how to launch it.", itemId: "5.1" }, { ts: 80, who: "supporter", text: "Open it first, share the code on the screen, then read the question. Don't preface.", itemId: "5.1" }, { ts: 88, who: "completer", text: "Got it. And for 6.1 — the bottleneck question — they always list three.", itemId: "6.1" }, { ts: 95, who: "supporter", text: "Push back. One bottleneck, the one they'd fix this quarter. Otherwise the action list is noise.", itemId: "6.1" }, { ts: 104, who: "completer", text: "Makes sense. I think we have enough to wrap up. Thank you, this was really useful.", itemId: "6.1" }, ]; /* ---------- People dictionary ---------- */ const TX_PEOPLE = { completer: { id: "completer", name: "Adaeze Nwosu", short: "Adaeze", role: "Compliance Lead", avatar: 47, hue: "#175cd3" }, supporter: { id: "supporter", name: "Adetola Okafor", short: "Adetola", role: "Module creator", avatar: 14, hue: "#7a5af8" }, }; /* ---------- Time helpers ---------- */ function fmtElapsed(s) { const m = Math.floor(s / 60); const r = Math.floor(s % 60); return `${String(m).padStart(2, "0")}:${String(r).padStart(2, "0")}`; } /* ---------- Hook ---------- */ function useTranscribe({ moduleName = "Asset Management" } = {}) { /* status: 'idle' | 'recording' | 'paused' | 'stopped' | 'summarizing' */ const [status, setStatus] = txUseState("idle"); const [elapsed, setElapsed] = txUseState(0); const [lines, setLines] = txUseState([]); /* { ts, who, text, itemId } */ const [drawerOpen, setDrawerOpen] = txUseState(false); const [summary, setSummary] = txUseState(null); /* string from claude */ const [summaryErr, setSummaryErr] = txUseState(null); const [showSummary, setShowSummary] = txUseState(false); /* Drip-feed scheduler. Tick once per second when recording, append any dialogue line whose timestamp passed since the last tick. */ txUseEffect(() => { if (status !== "recording") return; const handle = setInterval(() => { setElapsed(prev => { const next = prev + 1; const cutoff = next; setLines(linesPrev => { const lastTs = linesPrev.length ? linesPrev[linesPrev.length - 1].ts : -1; const newOnes = TX_DIALOGUE.filter(l => l.ts > lastTs && l.ts <= cutoff); return newOnes.length ? [...linesPrev, ...newOnes] : linesPrev; }); return next; }); }, 1000); return () => clearInterval(handle); }, [status]); const start = txUseCallback(() => { setStatus("recording"); setSummary(null); setSummaryErr(null); }, []); const pause = txUseCallback(() => { setStatus(prev => prev === "recording" ? "paused" : prev); }, []); const stop = txUseCallback(() => { setStatus("stopped"); }, []); const reset = txUseCallback(() => { setStatus("idle"); setElapsed(0); setLines([]); setSummary(null); setSummaryErr(null); }, []); /* Hand the transcript to Claude. The prompt is tuned to match Method 8 vocabulary — programmes, modules, actions — and produce a structured read-out the team can drop into the Results tab or share. */ const summarize = txUseCallback(async () => { if (lines.length === 0) { setSummaryErr("No transcript captured yet — record something first."); setShowSummary(true); return; } setStatus("summarizing"); setShowSummary(true); setSummary(null); setSummaryErr(null); const transcriptText = lines .map(l => `[${fmtElapsed(l.ts)}] ${TX_PEOPLE[l.who].name} (on ${l.itemId}): ${l.text}`) .join("\n"); const prompt = [ `You are summarising a live guided workshop session for the Method 8 platform.`, `Module: "${moduleName}". Two participants — a completer (Adaeze Nwosu) and a supporter who is the module creator (Adetola Okafor).`, ``, `Transcript (with timestamps and the question item being discussed):`, transcriptText, ``, `Produce a concise summary using exactly these sections, in plain text with bold section headers and short bullet lists. No preamble.`, ``, `**Headline**`, `One sentence — what got done.`, ``, `**Key decisions**`, `- 2 to 4 bullets, each tagged with the item id in [brackets].`, ``, `**Action items**`, `- 2 to 4 bullets, each starting with a verb, owner in (parentheses).`, ``, `**Open questions**`, `- 1 to 3 bullets, anything left unresolved. If none, write "None — clean session." and nothing else.`, ``, `Keep the whole thing under 180 words. Use the Method 8 vocabulary: modules, programmes, actions, completers.`, ].join("\n"); try { const text = await window.claude.complete({ messages: [{ role: "user", content: prompt }], }); setSummary(text); } catch (e) { setSummaryErr(e?.message || String(e) || "Couldn't reach the AI service."); } finally { setStatus("stopped"); } }, [lines, moduleName]); const openDrawer = txUseCallback(() => setDrawerOpen(true), []); const closeDrawer = txUseCallback(() => setDrawerOpen(false), []); const openSummary = txUseCallback(() => setShowSummary(true), []); const closeSummary = txUseCallback(() => setShowSummary(false), []); return { status, elapsed, lines, drawerOpen, summary, summaryErr, showSummary, moduleName, start, pause, stop, reset, summarize, openDrawer, closeDrawer, openSummary, closeSummary, setStatus, }; } /* ---------- Icons (subset, reuse SupIcon when available) ---------- */ function TxIcon({ name, size = 16 }) { const s = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { case "mic": return ; case "micOff": return ; case "stop": return ; case "pause": return ; case "play": return ; case "sparkle": return ; case "transcript":return ; case "close": return ; case "download": return ; case "copy": return ; case "retry": return ; default: return null; } } /* ============================================================ Button — the main "Record" / "Recording 02:14" / "Stop" pill. Lives in the page header / topbar. Single source of truth for recording state. ============================================================ */ function TranscribeButton({ tx, variant = "v1" }) { if (tx.status === "idle") { return ( ); } if (tx.status === "recording" || tx.status === "paused") { return (
); } /* stopped or summarizing */ return (
); } /* ============================================================ Drawer — right-side slide-over showing the live transcript. Shows per-line speaker + item chip + relative timestamp. ============================================================ */ function TranscribeDrawer({ tx, variant = "v1" }) { const listRef = txUseRef(null); /* Auto-scroll to bottom when new lines arrive */ txUseEffect(() => { if (!tx.drawerOpen || !listRef.current) return; const el = listRef.current; el.scrollTop = el.scrollHeight; }, [tx.lines.length, tx.drawerOpen]); if (!tx.drawerOpen) return null; const downloadTranscript = () => { const text = tx.lines.map(l => `[${fmtElapsed(l.ts)}] ${TX_PEOPLE[l.who].name} (on ${l.itemId}): ${l.text}`).join("\n"); const blob = new Blob([text], { type: "text/plain;charset=utf-8" }); const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = `${tx.moduleName.replace(/\s+/g, "-").toLowerCase()}-transcript.txt`; document.body.appendChild(a); a.click(); a.remove(); }; return (
); } /* ============================================================ Summary modal — shows the Claude output. Plain text from the model is rendered through a tiny markdown-ish formatter (just bold headers + bullets, nothing fancy). ============================================================ */ function renderAiText(text) { if (!text) return null; const blocks = []; const lines = text.replace(/\r/g, "").split("\n"); let bulletBuf = []; const flushBullets = () => { if (bulletBuf.length) { blocks.push(); bulletBuf = []; } }; lines.forEach((raw) => { const line = raw.trim(); if (!line) { flushBullets(); return; } /* Bold header like "**Headline**" — render as h4 */ const hdr = line.match(/^\*\*(.+?)\*\*\s*:?$/); if (hdr) { flushBullets(); blocks.push(

{hdr[1]}

); return; } /* Bullet */ const bul = line.match(/^[-*\u2022]\s+(.*)$/); if (bul) { bulletBuf.push(bul[1]); return; } flushBullets(); blocks.push(

{renderInline(line)}

); }); flushBullets(); return blocks; } function renderInline(text) { /* Replace **bold** runs with , leave the rest as-is. */ const parts = []; const re = /\*\*([^*]+)\*\*/g; let last = 0, m; while ((m = re.exec(text)) !== null) { if (m.index > last) parts.push(text.slice(last, m.index)); parts.push({m[1]}); last = m.index + m[0].length; } if (last < text.length) parts.push(text.slice(last)); return parts; } function TranscribeSummaryModal({ tx, variant = "v1" }) { if (!tx.showSummary) return null; const copy = async () => { if (!tx.summary) return; try { await navigator.clipboard.writeText(tx.summary); } catch {} }; return (
e.stopPropagation()}>
AI summary

{tx.moduleName} — session readout

Generated from {fmtElapsed(tx.elapsed)} of transcribed audio · {tx.lines.length} lines
{tx.status === "summarizing" && (

Reading the transcript, weighing each item, drafting the summary…

)} {tx.summary && (
{renderAiText(tx.summary)}
)} {tx.summaryErr && (
Couldn't generate a summary.

{tx.summaryErr}

)}
); } /* ---------- Export ---------- */ Object.assign(window, { useTranscribe, TX_PEOPLE, TX_DIALOGUE, TxIcon, TranscribeButton, TranscribeDrawer, TranscribeSummaryModal, });