{!isGroup && milestone && (

{milestone}+

)} {isGroup ? (<>

{groupData.label || ("G"+groupData.id)} {groupData.caseData?.name ? "Caso " + groupData.caseData.id + " · " + (groupData.caseData.region||"") : ""}

{groupData.caseData?.name || ""}

{(groupData.activeThemes||[]).slice(0,4).map((tid,i) => { const th = getTheme(tid); return {th.label.split(" ")[0]}; })}

) : (<>

{/* Header: label + trend */}

{theme.label} {trendArrow}

{/* Count + menções inline */}

{count} menções

{/* Sentiment bar + group badges inline */}

{sbTotal > 0 && (

{sb.proposta > 0 &&

} {sb.duvida > 0 &&

} {sb.tensao > 0 &&

}

)} {themeGroups && themeGroups.length > 0 && (

{themeGroups.slice(0,5).map(gid => { const g = GROUPS.find(g=>g.id===gid); const gc = g?.caseData?.color || "#888"; return

; })} {themeGroups.length > 5 && +{themeGroups.length-5}}

)}

{/* Last citation (big tiles) */} {lastInsight && isBig && (

\"{lastInsight}\"

)} )}

); } /* ═══ DETAIL PANEL ═══ */ function DetailPanel({ selection, insights, onClose, questionByTheme }) { if (!selection) return null; const isGroup = selection.type === "group"; const filtered = insights.filter(ins => isGroup ? ins.group === selection.id : ins.theme === selection.id ).reverse(); const grp = GROUPS.find(g=>g.id===selection.id); const title = isGroup ? (grp?.label || "G" + selection.id) + " — " + (grp?.caseData?.name || "") : getTheme(selection.id).label; const color = isGroup ? grp?.caseData?.color || "#fff" : getTheme(selection.id).color; return (

{/* Header */}

{isGroup ? "Contribuições do grupo" : "Discussões sobre"}

{title}

{filtered.length}

menções

{!isGroup && ( <>

{filtered.filter(i=>i.sentiment==="proposta").length}

propostas

{filtered.filter(i=>i.sentiment==="duvida").length}

dúvidas

{filtered.filter(i=>i.sentiment==="tensao").length}

tensões

)} {isGroup && ( <>

{[...new Set(filtered.map(i=>i.theme))].length}

temas

)}

{/* Participating groups (for theme) or themes (for group) */}

{isGroup ? ( [...new Set(filtered.map(i=>i.theme))].map(tid => { const th = getTheme(tid); return {th.label}; }) ) : ( [...new Set(filtered.map(i=>i.group))].map(gid => { const g = GROUPS.find(g=>g.id===gid); return {g?.label || ("G"+gid)}; }) )}

{/* Facilitator question (theme panels only) */} {!isGroup && questionByTheme && questionByTheme[selection.id] && (

Pergunta para o grupo

{questionByTheme[selection.id]}

)}

{/* Insight list */}

{filtered.length === 0 ? (

Nenhuma interação ainda

) : filtered.map((ins, i) => { const th = getTheme(ins.theme); const se = SENTS[ins.sentiment]; return (

{se?.icon} {isGroup ? ( {th.label} ) : ( g.id===ins.group)?.caseData?.color||"#ddd",fontWeight:700,letterSpacing:1}}>{GROUPS.find(g=>g.id===ins.group)?.label || ("G"+ins.group)} )}

{se?.label}

{ins.text}

); })}

{/* Bottom fade */}

); } /* ═══ TICKER BAR ═══ */ function TickerBar({ insights }) { const [idx, setIdx] = useState(0); const prevLen = useRef(0); // Auto-advance every 5s useEffect(() => { if (insights.length === 0) return; const iv = setInterval(() => { setIdx(p => (p + 1) % insights.length); }, 5000); return () => clearInterval(iv); }, [insights.length]); // Snap to latest when new insight arrives useEffect(() => { if (insights.length > prevLen.current && prevLen.current > 0) { setIdx(insights.length - 1); } prevLen.current = insights.length; }, [insights.length]); if (insights.length === 0) return null; const ins = insights[Math.min(idx, insights.length - 1)]; const th = getTheme(ins.theme); const se = SENTS[ins.sentiment]; const g = GROUPS.find(g => g.id === ins.group); return (

{/* Sentiment icon */} {se?.icon} {/* Theme label */} {th.label} {/* Divider */}

{/* Summary text */} {ins.text}

{/* Group badge */}

{g?.label || ("G"+ins.group)}

{/* Progress dots */}

{insights.slice(-5).map((_, i) => (

))}

); } /* ═══ MISSÃO VIEW ═══ */ function MissaoView({ outputs, filterGroup, groups, cases, onSelectGroup }) { const [expandedGroup, setExpandedGroup] = useState(null); const prevOutputCount = useRef(0); const [flashGroups, setFlashGroups] = useState({}); // Detect new outputs for flash animation useEffect(() => { if (outputs.length > prevOutputCount.current && prevOutputCount.current > 0) { const newest = outputs[outputs.length - 1]; setFlashGroups(p => ({...p, [newest.group]: true})); setTimeout(() => setFlashGroups(p => { const n = {...p}; delete n[newest.group]; return n; }), 2000); } prevOutputCount.current = outputs.length; }, [outputs.length]); // Group outputs by group_id → section_id const grouped = useMemo(() => { const map = {}; outputs.forEach(o => { if (!map[o.group]) map[o.group] = {}; if (!map[o.group][o.section_id]) map[o.group][o.section_id] = { label: o.section_label, items: [] }; map[o.group][o.section_id].items.push(o); }); return map; }, [outputs]); // All unique sections across all groups const allSections = useMemo(() => { const seen = {}; outputs.forEach(o => { seen[o.section_id] = o.section_label; }); return Object.entries(seen).map(([id, label]) => ({ id, label })); }, [outputs]); // Per-table view: single group expanded if (filterGroup !== null) { const g = groups.find(g => g.id === filterGroup); const gColor = g?.caseData?.color || "#3DFFA2"; const gOutputs = grouped[filterGroup] || {}; return (

{/* Group header */}

{g?.label || ("G"+filterGroup)}

{g?.caseData?.name || "Grupo "+filterGroup}

{g?.caseData?.region ? "Caso "+g.caseData.id+" · "+g.caseData.region : ""} {" · "}{Object.keys(gOutputs).length} seções · {outputs.filter(o=>o.group===filterGroup).length} contribuições

{/* Sections */} {allSections.length === 0 ? (

◇

Aguardando contribuições...

As respostas do grupo aparecerão aqui em tempo real

) : ( allSections.map(section => { const sData = gOutputs[section.id]; const hasContent = sData && sData.items.length > 0; return (

{/* Section header */}

{section.label} {hasContent && ( {sData.items.length} {sData.items.length === 1 ? "contribuição" : "contribuições"} )}

{hasContent && (

{Object.entries(CONTENT_TYPES).map(([k,v]) => { const ct = sData.items.filter(i => i.content_type === k).length; return ct > 0 ? ( {ct} {v.label} ) : null; })}

)}

{/* Content items */} {hasContent ? sData.items.map((item, idx) => { const ct = CONTENT_TYPES[item.content_type] || CONTENT_TYPES.proposal; return (

{ct.icon}

{item.content}

{ct.label} {item.ts && · {new Date(item.ts).toLocaleTimeString("pt-BR", { hour:"2-digit", minute:"2-digit" })}}

); }) : (

Aguardando contribuições para esta seção...

)}

); }) )}

); } // Facilitator view: grid of all groups return (

{/* Section summary bar */} {allSections.length > 0 && (

Seções {allSections.map(s => { const total = outputs.filter(o => o.section_id === s.id).length; return ( {s.label} {total} ); })}

)} {/* Group cards grid */}

{groups.map(g => { const gColor = g.caseData?.color || "#3DFFA2"; const gOutputs = grouped[g.id] || {}; const totalItems = outputs.filter(o => o.group === g.id).length; const sectionsActive = Object.keys(gOutputs).length; const isFlashing = flashGroups[g.id]; const isExpanded = expandedGroup === g.id; return (

setExpandedGroup(isExpanded ? null : g.id)} style={{ background: "linear-gradient(135deg, "+gColor+(isFlashing?"28":"10")+", "+gColor+"05)", border: "1px solid "+gColor+(isFlashing?"50":"20"), borderLeft: "3px solid "+gColor+(isFlashing?"CC":"60"), borderRadius:4, padding:"14px 16px", cursor:"pointer", transition:"all 0.4s ease", gridColumn: isExpanded ? "span 3" : "span 1", animation: isFlashing ? "tileHit 0.6s cubic-bezier(0.34,1.56,0.64,1)" : "none", }}> {/* Card header */}

{g.label || ("G"+g.id)} {g.caseData?.name || ""}

{totalItems} outputs

{/* Progress: sections with content / total sections */} {allSections.length > 0 && (

{allSections.map(s => { const has = gOutputs[s.id] && gOutputs[s.id].items.length > 0; return (

); })}

)} {/* Section list */} {allSections.length === 0 ? (

Aguardando contribuições...

) : (

{allSections.map(s => { const sData = gOutputs[s.id]; const hasItems = sData && sData.items.length > 0; return (

{s.label} {hasItems && !isExpanded && (

{sData.items[sData.items.length-1].content}

)} {/* Expanded: show all items */} {hasItems && isExpanded && sData.items.map((item, idx) => { const ct = CONTENT_TYPES[item.content_type] || CONTENT_TYPES.proposal; return (

{ct.label} {item.content}

); })}

{hasItems && ( {sData.items.length} )}

); })}

)}

); })}

); } /* ═══ P&R (PERGUNTA E RESPOSTA) VIEW ═══ */ function PerguntaRespostaView({ questions, insights, groups, cases, participants }) { const PR_ACCENT = "#FF6B6B"; const SENT_COLORS = { proposta: "#3DFFA2", duvida: "#448AFF", tensao: "#FF4D4D" }; // Group insights by qa_question_id const insightsByQuestion = useMemo(() => { const map = {}; insights.forEach(i => { if (i.qaQuestionId) { if (!map[i.qaQuestionId]) map[i.qaQuestionId] = []; map[i.qaQuestionId].push(i); } }); return map; }, [insights]); // Get group info helper const getGroupInfo = (groupId) => { const g = groups.find(g => g.id === groupId); return g || { id: groupId, label: "G" + groupId, caseData: { color: "#666" } }; }; // Get participant name helper const getParticipantName = (participantId, groupId) => { if (participantId && participants) { const p = participants.find(p => p.id === participantId); if (p) return p.display_name || "Anônimo"; } return "Anônimo"; }; if (questions.length === 0) { return (

Modo P&R

Nenhuma pergunta cadastrada para esta sessão.
Use a API admin para criar perguntas com a ação create_qa_question.

); } return (

{questions.map((q, qIdx) => { const qInsights = insightsByQuestion[q.id] || []; const isActive = q.is_active; const hasResponses = qInsights.length > 0; return (

{/* Column header */}

Pergunta {qIdx + 1}

{isActive && ( ATIVA )} {qInsights.length} resp.

{q.question_text}

{/* AI Summary card (if generated) */} {q.summary && (

RESUMO IA

{q.summary}

)} {/* Response cards */}

{!hasResponses ? (

{isActive ? "..." : "---"}

{isActive ? "Aguardando respostas dos participantes..." : "Nenhuma resposta registrada"}

) : ( qInsights.map((insight, idx) => { const gInfo = getGroupInfo(insight.group); const gColor = gInfo.caseData?.color || "#666"; const sentColor = SENT_COLORS[insight.sentiment] || "#888"; const participantName = getParticipantName(insight.participantId, insight.group); return (

{participantName}

{new Date(insight.ts).toLocaleTimeString("pt-BR", {hour:"2-digit",minute:"2-digit"})}

{insight.verbatim || insight.text}

); }) )}

{/* Footer with sentiment breakdown */} {hasResponses && (

{Object.entries(SENT_COLORS).map(([k,color]) => { const ct = qInsights.filter(i => i.sentiment === k).length; return ct > 0 ? (

{ct}

) : null; })}

{[...new Set(qInsights.map(i => i.group))].length} grupos

)}

); })}

); } /* ═══ MAIN ═══ */ window.Dashboard = function Dashboard() { const initUrlParams = new URLSearchParams(window.location.search); const hasGroupFilter = initUrlParams.get("group") !== null; const [mode, setMode] = useState(hasGroupFilter ? "missao" : "mosaico"); const [selection, setSelection] = useState(null); const [dataSource, setDataSource] = useState("demo"); // "demo" | "live" const prevInsightCount = useRef(0); const [insights, setInsights] = useState([]); const [counts, setCounts] = useState({}); const [sentsMap, setSentsMap] = useState({}); const [lastQuote, setLastQuote] = useState({}); const [hits, setHits] = useState({}); const [gThemes, setGThemes] = useState({}); const [gEdges, setGEdges] = useState({}); const [conv, setConv] = useState({}); const [total, setTotal] = useState(0); const [active, setActive] = useState(0); const [sT, setST] = useState({proposta:0,duvida:0,tensao:0}); const [sentsByTheme, setSentsByTheme] = useState({}); const [groupsByTheme, setGroupsByTheme] = useState({}); const [trendByTheme, setTrendByTheme] = useState({}); const [questionByTheme, setQuestionByTheme] = useState({}); const [allSessions, setAllSessions] = useState([]); const [currentSessionId, setCurrentSessionId] = useState(null); const [showQR, setShowQR] = useState(false); const [qrDataUrl, setQrDataUrl] = useState(null); const [menuOpen, setMenuOpen] = useState(false); const [clockTime, setClockTime] = useState(() => { const now = new Date(); return now.toLocaleTimeString("pt-BR", { hour:"2-digit", minute:"2-digit", hour12:false }); }); const [sessionReady, setSessionReady] = useState(false); const isGenesisComplete = useRef(false); const [genesisActive, setGenesisActive] = useState(false); const [newThemes, setNewThemes] = useState({}); const [milestones, setMilestones] = useState({}); const prevCountsRef = useRef({}); const [tickerIdx, setTickerIdx] = useState(0); const prevTickerLen = useRef(0); const [missionOutputs, setMissionOutputs] = useState([]); const [participantsList, setParticipantsList] = useState([]); const [qaQuestions, setQaQuestions] = useState([]); const [filterGroup, setFilterGroup] = useState(initUrlParams.get("group") ? parseInt(initUrlParams.get("group")) : null); const [groupsVersion, setGroupsVersion] = useState(0); const ix = useRef(0), tk = useRef(0); const missionIx = useRef(0); // Clock tick useEffect(() => { const id = setInterval(() => { const now = new Date(); setClockTime(now.toLocaleTimeString("pt-BR", { hour:"2-digit", minute:"2-digit", hour12:false })); }, 1000); return () => clearInterval(id); }, []); // Ticker auto-advance useEffect(() => { if (insights.length === 0) return; const iv = setInterval(() => setTickerIdx(p => (p + 1) % insights.length), 5000); return () => clearInterval(iv); }, [insights.length]); // Snap to latest insight useEffect(() => { if (insights.length > prevTickerLen.current && prevTickerLen.current > 0) { setTickerIdx(insights.length - 1); } prevTickerLen.current = insights.length; }, [insights.length]); // Initialize: find LIVE session, load groups useEffect(() => { initSession().then(sessions => { setAllSessions(sessions); setCurrentSessionId(SESSION_ID); setSessionReady(true); setGroupsVersion(v => v + 1); }); }, []); // Generate QR code when session changes useEffect(() => { const sid = currentSessionId || SESSION_ID; if (!sid) return; const chatUrl = `https://sessions-inky-five.vercel.app/?session=${sid}`; // Try QRCode library first, fall back to API if (typeof QRCode !== "undefined" && QRCode.toDataURL) { QRCode.toDataURL(chatUrl, { width: 300, margin: 2, color: { dark: "#000000", light: "#ffffff" } }) .then(dataUrl => setQrDataUrl(dataUrl)) .catch(err => { console.error("[QR] Library failed, using API fallback:", err); setQrDataUrl(`https://api.qrserver.com/v1/create-qr-code/?size=280x280&data=${encodeURIComponent(chatUrl)}`); }); } else { // Fallback: use free QR code API setQrDataUrl(`https://api.qrserver.com/v1/create-qr-code/?size=280x280&data=${encodeURIComponent(chatUrl)}`); } }, [currentSessionId]); // When session changes via picker, update global and reload groups const switchSession = useCallback(async (newId) => { SESSION_ID = newId; setCurrentSessionId(newId); await loadActivityGroups(); setGroupsVersion(v => v + 1); // Reset live data setInsights([]); setCounts({}); setSentsMap({}); setLastQuote({}); setHits({}); setGThemes({}); setGEdges({}); setConv({}); setTotal(0); setActive(0); setST({proposta:0,duvida:0,tensao:0}); setSentsByTheme({}); setGroupsByTheme({}); setTrendByTheme({}); setQuestionByTheme({}); prevInsightCount.current=0; isGenesisComplete.current=false; setGenesisActive(false); setNewThemes({}); setMilestones({}); prevCountsRef.current={}; }, []); const MILESTONE_THRESHOLDS = [5, 10, 20, 50]; const detectBirthAndMilestones = useCallback((themeId, newCount) => { const prevCount = prevCountsRef.current[themeId] || 0; // Birth detection if (prevCount === 0 && newCount > 0) { if (!isGenesisComplete.current) { setGenesisActive(true); isGenesisComplete.current = true; setTimeout(() => setGenesisActive(false), 2000); } setNewThemes(p => ({...p, [themeId]: true})); setTimeout(() => setNewThemes(p => {const n={...p}; delete n[themeId]; return n;}), 1500); } // Milestone detection MILESTONE_THRESHOLDS.forEach(t => { if (newCount >= t && prevCount < t) { setMilestones(p => ({...p, [themeId]: t})); setTimeout(() => setMilestones(p => {const n={...p}; delete n[themeId]; return n;}), 3000); } }); }, []); const tick = useCallback(() => { if (ix.current>=POOL.length) ix.current=0; const raw = POOL[ix.current]; ix.current++; tk.current++; const ins = {...raw, ts: Date.now()}; setInsights(p=>[...p,ins]); setTotal(p=>p+Math.floor(Math.random()*4)+1); setActive(Math.min(54, 8+tk.current*3+Math.floor(Math.random()*5))); const bump = Math.floor(Math.random()*3)+1; const newCount = (prevCountsRef.current[ins.theme] || 0) + bump; detectBirthAndMilestones(ins.theme, newCount); prevCountsRef.current = {...prevCountsRef.current, [ins.theme]: newCount}; setCounts(p=>({...p,[ins.theme]:(p[ins.theme]||0)+bump})); setSentsMap(p=>({...p,[ins.theme]:ins.sentiment})); setLastQuote(p=>({...p,[ins.theme]:ins.text})); setHits(p=>({...p,[ins.theme]:true,["g"+ins.group]:true})); setTimeout(()=>setHits(p=>{const n={...p};delete n[ins.theme];delete n["g"+ins.group];return n;}),3000); setGThemes(p=>{const e=p[ins.group]||[];return e.includes(ins.theme)?p:{...p,[ins.group]:[...e,ins.theme].slice(-5)};}); setGEdges(p=>{const e=p[ins.group]||[];return {...p,[ins.group]:[...e,ins.theme]};}); setST(p=>({...p,[ins.sentiment]:(p[ins.sentiment]||0)+1})); // Enriched data for tiles setSentsByTheme(p=>{const prev=p[ins.theme]||{proposta:0,duvida:0,tensao:0};return {...p,[ins.theme]:{...prev,[ins.sentiment]:(prev[ins.sentiment]||0)+1}};}); setGroupsByTheme(p=>{const prev=p[ins.theme]||[];return prev.includes(ins.group)?p:{...p,[ins.theme]:[...prev,ins.group]};}); setTrendByTheme(p=>({...p,[ins.theme]:Math.random()>0.5?"up":"stable"})); if (ins.question) setQuestionByTheme(p=>({...p,[ins.theme]:ins.question})); setConv(p=>{ const next = {...p}; CASES.forEach(c => { const prev = next[c.id] || 15; next[c.id] = Math.max(5,Math.min(95, prev + (Math.random()>0.4?Math.random()*7:-Math.random()*3))); }); return next; }); // Also produce mission output in demo mode if (missionIx.current < MISSION_POOL.length) { const mRaw = MISSION_POOL[missionIx.current]; missionIx.current++; setMissionOutputs(p => [...p, {...mRaw, ts: Date.now()}]); } }, [detectBirthAndMilestones]); useEffect(() => { if (dataSource === "demo") { const iv = setInterval(tick, 2800); return () => clearInterval(iv); } else { // LIVE MODE: poll Supabase every 3s if (!SESSION_ID) return; // wait until session is resolved let mounted = true; async function poll() { try { const [rawInsights, sessions, participants, rawMission, rawQaQuestions] = await Promise.all([ supaFetch("insights", `session_id=eq.${SESSION_ID}&order=created_at.asc`), supaFetch("sessions", `id=eq.${SESSION_ID}&select=is_live`), supaFetch("participants", `session_id=eq.${SESSION_ID}&select=id,display_name,group_id`), supaFetch("mission_outputs", `session_id=eq.${SESSION_ID}&order=created_at.asc`), supaFetch("qa_questions", `session_id=eq.${SESSION_ID}&order=question_order.asc`), ]); if (!mounted) return; console.log("[LIVE] Poll:", rawInsights?.length, "insights,", participants?.length, "participants"); if (Array.isArray(rawInsights) && rawInsights.length > 0) { const processed = processLiveInsights(rawInsights); // Detect births and milestones Object.entries(processed.counts).forEach(([id, count]) => { detectBirthAndMilestones(id, count); }); prevCountsRef.current = {...processed.counts}; setCounts(processed.counts); setSentsMap(processed.sentsMap); setLastQuote(processed.lastQuote); setGThemes(processed.gThemes); setGEdges(processed.gEdges); setST(processed.sT); setSentsByTheme(processed.sentsByTheme); setGroupsByTheme(processed.groupsByTheme); setTrendByTheme(processed.trendByTheme); setQuestionByTheme(processed.questionByTheme); setInsights(processed.insights); setTotal(rawInsights.length); setConv(calcConvergence(processed.gEdges, CASE_GROUP_MAP)); // Flash hit on newest insight if (rawInsights.length > prevInsightCount.current && prevInsightCount.current > 0) { const newest = rawInsights[rawInsights.length - 1]; setHits(p => ({...p, [newest.theme]: true, ["g"+newest.group_id]: true})); setTimeout(() => setHits(p => {const n={...p}; delete n[newest.theme]; delete n["g"+newest.group_id]; return n;}), 3000); } prevInsightCount.current = rawInsights.length; } if (Array.isArray(rawMission) && rawMission.length > 0) { setMissionOutputs(processMissionOutputs(rawMission)); } if (Array.isArray(rawQaQuestions)) { setQaQuestions(rawQaQuestions); } // sessions data used for is_live check if needed if (Array.isArray(participants)) { setActive(participants.length); setParticipantsList(participants); } } catch (err) { console.error("Poll error:", err); } } poll(); const iv = setInterval(poll, 3000); return () => { mounted = false; clearInterval(iv); }; } }, [dataSource, tick, currentSessionId]); const sorted = useMemo(()=> Object.entries(counts).filter(([id])=>id!=="qa_response").map(([id,count])=>({...getTheme(id),count})).sort((a,b)=>b.count-a.count), [counts]); // Treemap rects will be computed at render time using container dimensions const [mosaicSize, setMosaicSize] = useState({ w: 0, h: 0 }); const mosaicRef = useRef(null); const mosaicObsRef = useRef(null); useEffect(() => { const node = mosaicRef.current; if (!node) { setMosaicSize({ w: 0, h: 0 }); return; } const measure = () => { const r = node.getBoundingClientRect(); if (r.width > 0 && r.height > 0) { setMosaicSize({ w: r.width, h: r.height }); } }; // Measure after browser paint requestAnimationFrame(measure); // Also observe resize if (mosaicObsRef.current) mosaicObsRef.current.disconnect(); const obs = new ResizeObserver(entries => { const { width, height } = entries[0].contentRect; if (width > 0 && height > 0) setMosaicSize({ w: width, h: height }); }); obs.observe(node); mosaicObsRef.current = obs; return () => obs.disconnect(); }, [sorted.length > 0, mode]); const treemapRects = useMemo(() => { if (!mosaicSize.w || !mosaicSize.h || sorted.length === 0) return []; return computeTreemap(sorted, { x: 0, y: 0, w: mosaicSize.w, h: mosaicSize.h }); }, [sorted, mosaicSize]); const isGrafos = mode==="grafos"; const totalS = Object.values(sT).reduce((a,b)=>a+b,0); return (

{/* HEADER — minimalist */}

{/* Main row */}

{/* LEFT — S&CO Logo */}

SERVICE

&CO

{/* CENTER — Session title */}

{allSessions.find(s=>s.id===currentSessionId)?.name || "Sessions"}

{dataSource==="live"?"LIVE":"DEMO"}

{/* RIGHT — Clock + hamburger */}

{clockTime}

setMenuOpen(true)} style={{ cursor:"pointer",display:"flex",flexDirection:"column",gap:5,padding:6, }}>

{/* Feed row — insight ticker */} {insights.length > 0 && (() => { const ins = insights[Math.min(tickerIdx, insights.length - 1)]; const th = getTheme(ins.theme); const se = SENTS[ins.sentiment]; const g = GROUPS.find(gr => gr.id === ins.group); return (

{se?.icon} {th.label}

{ins.text}

{g?.label || ("G"+ins.group)}

); })()}

{/* NAVIGATION OVERLAY */} {menuOpen && (

setMenuOpen(false)} style={{ position:"fixed",inset:0,zIndex:500, background:"rgba(5,5,10,0.92)", backdropFilter:"blur(24px)",WebkitBackdropFilter:"blur(24px)", animation:"menuBgIn 0.25s ease forwards", display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center", }}>

e.stopPropagation()} style={{ animation:"menuIn 0.3s ease forwards", display:"flex",flexDirection:"column",alignItems:"center",gap:36, maxWidth:420,width:"90%", }}> {/* Close button */}

setMenuOpen(false)} style={{ position:"fixed",top:20,right:28,cursor:"pointer", fontSize:28,color:"#fff",fontWeight:300,lineHeight:1, }}>✕

{/* VIEW MODE */}

Visualização

{["mosaico","grafos","missao","pr"].map(m => { const mColors = { mosaico:"#3DFFA2", grafos:"#B388FF", missao:"#448AFF", pr:"#FF6B6B" }; const mLabels = { mosaico:"MOSAICO", grafos:"GRAFOS", missao:"MISSÃO", pr:"P&R" }; const mIcons = { mosaico: React.createElement("svg", {width:22,height:22,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}, React.createElement("path", {d:"M4 6.1C4 5.54 4 5.26 4.109 5.046C4.205 4.858 4.358 4.705 4.546 4.609C4.76 4.5 5.04 4.5 5.6 4.5H8.4C8.96 4.5 9.24 4.5 9.454 4.609C9.642 4.705 9.795 4.858 9.891 5.046C10 5.26 10 5.54 10 6.1V8.9C10 9.46 10 9.74 9.891 9.954C9.795 10.142 9.642 10.295 9.454 10.391C9.24 10.5 8.96 10.5 8.4 10.5H5.6C5.04 10.5 4.76 10.5 4.546 10.391C4.358 10.295 4.205 10.142 4.109 9.954C4 9.74 4 9.46 4 8.9V6.1Z",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}), React.createElement("path", {d:"M13 6C13 5.534 13 5.301 13.076 5.117C13.178 4.872 13.372 4.678 13.617 4.576C13.801 4.5 14.034 4.5 14.5 4.5H18.5C18.966 4.5 19.199 4.5 19.383 4.576C19.628 4.678 19.822 4.872 19.924 5.117C20 5.301 20 5.534 20 6C20 6.466 20 6.699 19.924 6.883C19.822 7.128 19.628 7.322 19.383 7.424C19.199 7.5 18.966 7.5 18.5 7.5H14.5C14.034 7.5 13.801 7.5 13.617 7.424C13.372 7.322 13.178 7.128 13.076 6.883C13 6.699 13 6.466 13 6Z",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}), React.createElement("path", {d:"M13 12C13 11.534 13 11.301 13.076 11.117C13.178 10.872 13.372 10.678 13.617 10.576C13.801 10.5 14.034 10.5 14.5 10.5H18.5C18.966 10.5 19.199 10.5 19.383 10.576C19.628 10.678 19.822 10.872 19.924 11.117C20 11.301 20 11.534 20 12C20 12.466 20 12.699 19.924 12.883C19.822 13.128 19.628 13.322 19.383 13.424C19.199 13.5 18.966 13.5 18.5 13.5H14.5C14.034 13.5 13.801 13.5 13.617 13.424C13.372 13.322 13.178 13.128 13.076 12.883C13 12.699 13 12.466 13 12Z",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}), React.createElement("path", {d:"M13 18C13 17.534 13 17.301 13.076 17.117C13.178 16.872 13.372 16.678 13.617 16.576C13.801 16.5 14.034 16.5 14.5 16.5H18.5C18.966 16.5 19.199 16.5 19.383 16.576C19.628 16.678 19.822 16.872 19.924 17.117C20 17.301 20 17.534 20 18C20 18.466 20 18.699 19.924 18.883C19.822 19.128 19.628 19.322 19.383 19.424C19.199 19.5 18.966 19.5 18.5 19.5H14.5C14.034 19.5 13.801 19.5 13.617 19.424C13.372 19.322 13.178 19.128 13.076 18.883C13 18.699 13 18.466 13 18Z",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}), React.createElement("path", {d:"M4 15.1C4 14.54 4 14.26 4.109 14.046C4.205 13.858 4.358 13.705 4.546 13.609C4.76 13.5 5.04 13.5 5.6 13.5H8.4C8.96 13.5 9.24 13.5 9.454 13.609C9.642 13.705 9.795 13.858 9.891 14.046C10 14.26 10 14.54 10 15.1V17.9C10 18.46 10 18.74 9.891 18.954C9.795 19.142 9.642 19.295 9.454 19.391C9.24 19.5 8.96 19.5 8.4 19.5H5.6C5.04 19.5 4.76 19.5 4.546 19.391C4.358 19.295 4.205 19.142 4.109 18.954C4 18.74 4 18.46 4 17.9V15.1Z",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}), ), grafos: React.createElement("svg", {width:22,height:22,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}, React.createElement("path", {d:"M9 13C9 15.209 10.791 17 13 17C14.105 17 15.105 16.552 15.828 15.828M9 13H5M9 13C9 11.448 9.884 10.103 11.176 9.439M5 13C5 13.552 4.552 14 4 14C3.448 14 3 13.552 3 13C3 12.448 3.448 12 4 12C4.552 12 5 12.448 5 13ZM19.293 6.707C19.112 6.526 19 6.276 19 6C19 5.448 19.448 5 20 5C20.552 5 21 5.448 21 6C21 6.552 20.552 7 20 7C19.724 7 19.474 6.888 19.293 6.707ZM19.293 6.707L15.828 10.172M9.371 4.929C9.74 4.781 10 4.421 10 4C10 3.448 9.552 3 9 3C8.448 3 8 3.448 8 4C8 4.552 8.448 5 9 5C9.131 5 9.257 4.975 9.371 4.929ZM9.371 4.929L11.176 9.439M15.828 15.828C16.552 15.105 17 14.105 17 13C17 11.895 16.552 10.895 15.828 10.172M15.828 15.828L19.293 19.293M19.293 19.293C19.112 19.474 19 19.724 19 20C19 20.552 19.448 21 20 21C20.552 21 21 20.552 21 20C21 19.448 20.552 19 20 19C19.724 19 19.474 19.112 19.293 19.293ZM15.828 10.172C15.105 9.448 14.105 9 13 9C12.343 9 11.723 9.158 11.176 9.439",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}), ), missao: React.createElement("svg", {width:22,height:22,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}, React.createElement("path", {d:"M21 12C21 16.971 16.971 21 12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3M17 12C17 14.761 14.761 17 12 17C9.239 17 7 14.761 7 12C7 9.239 9.239 7 12 7M14.758 9.352L18.717 9.767L20.863 6.763L18.288 5.905L17.429 3.329L14.425 5.475L14.758 9.352ZM14.758 9.352L12 12",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}), ), pr: React.createElement("svg", {width:22,height:22,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}, React.createElement("path", {d:"M11.967 12.75C12.967 11.75 13.967 11.355 13.967 10.25C13.967 9.145 13.072 8.25 11.967 8.25C11.035 8.25 10.252 8.887 10.03 9.75M11.967 15.75H11.977M21 12C21 16.971 16.971 21 12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12Z",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round"}), ), }; const mc = mColors[m]; const active = mode === m; return (

{ setMode(m); setMenuOpen(false); }} style={{ padding:"14px 20px",cursor:"pointer", borderLeft:active ? ("3px solid " + mc) : "3px solid transparent", background:active ? mc+"10" : "transparent", display:"flex",alignItems:"center",gap:14, color:active ? mc : "#666", transition:"all 0.2s ease", }}> {mIcons[m]} {mLabels[m]}

); })}

{/* DATA SOURCE */}

Fonte de dados

{["demo","live"].map(d=>(

{ setDataSource(d); if (d==="live") { setInsights([]); setCounts({}); setSentsMap({}); setLastQuote({}); setHits({}); setGThemes({}); setGEdges({}); setConv({}); setTotal(0); setActive(0); setST({proposta:0,duvida:0,tensao:0}); prevInsightCount.current=0; isGenesisComplete.current=false; setGenesisActive(false); setNewThemes({}); setMilestones({}); prevCountsRef.current={}; setMissionOutputs([]); setQaQuestions([]); missionIx.current=0; loadActivityGroups().then(() => setGroupsVersion(v => v + 1)); } }} style={{ flex:1,padding:"12px 0",cursor:"pointer",textAlign:"center", background:dataSource===d?(d==="live"?"#3DFFA218":"#FFD93D18"):"transparent", fontSize:14,fontWeight:700,textTransform:"uppercase",letterSpacing:2, color:dataSource===d?(d==="live"?"#3DFFA2":"#FFD93D"):"#555", transition:"all 0.3s ease", }}>{d}

))}

{/* STATS */}

{[{v:total,l:"Interações",c:"#3DFFA2"},{v:Math.min(active,54),l:"Ativos",c:"#448AFF"},{v:insights.length,l:"Insights",c:"#B388FF"}].map(s=>(

{s.v}

{s.l}

))}

{/* SENTIMENT */}

{Object.entries(SENTS).map(([k,v])=>{ const pct=totalS?((sT[k]||0)/totalS)*100:33; return

; })}

{Object.entries(SENTS).map(([k,v])=>(

{v.label} {sT[k]}

))}

{/* SESSION PICKER + QR */}

{allSessions.length > 1 && ( )}

{ setShowQR(q => !q); setMenuOpen(false); }} style={{ padding:"10px 20px", cursor:"pointer", borderRadius:8, border:"1px solid rgba(255,255,255,0.15)", background: showQR ? "rgba(61,255,162,0.15)" : "rgba(255,255,255,0.05)", fontSize:14, fontWeight:700, textTransform:"uppercase", letterSpacing:2, color: showQR ? "#3DFFA2" : "#aaa", }}>QR Code

)} {/* BODY */} {mode === "pr" ? ( ) : mode === "missao" ? ( ) : isGrafos ? (

) : sorted.length === 0 ? (

) : (

{treemapRects.map((t) => { const totalArea = mosaicSize.w * mosaicSize.h; return setSelection({type:"theme",id:t.id})} isNew={!!newThemes[t.id]} isGenesis={!!newThemes[t.id] && genesisActive} milestone={milestones[t.id]} sentBreakdown={sentsByTheme[t.id]} themeGroups={groupsByTheme[t.id]} trend={trendByTheme[t.id]} question={questionByTheme[t.id]} />; })}

)} {/* DETAIL PANEL */} {selection && (

setSelection(null)} style={{position:"fixed",inset:0,zIndex:150,background:"rgba(0,0,0,0.3)"}} /> )} setSelection(null)} questionByTheme={questionByTheme} /> {/* QR CODE — top-right corner overlay */} {showQR && (

Escaneie para participar {qrDataUrl ? ( QR Code

) : (

Gerando QR...

)} {`sessions-inky-five.vercel.app/?session=${currentSessionId || SESSION_ID}`}

)} {/* GENESIS OVERLAY */} {genesisActive && (

)} {/* AMBIENT CIRCLES */}

); }