{(particles || []).map(p => (

{p.emoji}

))}

); }; const SentenceIndicator = ({ text }) => { const count = countSentences(text || ''); const pct = Math.min(count / SENTENCE_GOAL, 1) * 100; return (

= SENTENCE_GOAL ? `linear-gradient(90deg, ${colors.success}, ${colors.secondary})` : `linear-gradient(90deg, ${colors.primary}, ${colors.accent})`, transition: 'width 0.3s ease' }} />

= SENTENCE_GOAL ? colors.success : colors.textMuted }}> {count}/{SENTENCE_GOAL} sentences {count >= SENTENCE_GOAL ? ' ✓' : ''}

); }; const EntryCard = ({ entry }) => { const isNew = (newEntryIds || []).includes(entry?.id); const burst = reactionBursts[entry?.id]; const isQuestion = entry?.type === 'question'; const authorDisplay = entry?._user?.displayName || entry?.author?.displayName || 'Anonymous'; const authorHandle = entry?._user?.handle || entry?.author?.handle; const authorImg = entry?._user?.profileImageUrl || entry?.author?.profileImageUrl; const authorInitial = (authorDisplay || 'A')[0]?.toUpperCase(); return (

{burst && (

{burst}

)}

authorHandle ? openProfile(authorHandle) : null} style={{ width: 32, height: 32, borderRadius: '50%', background: authorImg ? `url(${authorImg}) center/cover` : `linear-gradient(135deg, ${colors.primary}, ${colors.accent})`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, color: '#fff', cursor: authorHandle ? 'pointer' : 'default', flexShrink: 0 }}> {!authorImg && authorInitial}

authorHandle ? openProfile(authorHandle) : null} > {entry?.isDemo ? 'Demo • ' : ''}{authorDisplay}

{isQuestion ? '❓ Question' : '📝 Summary'} • Segment {entry?.segment || '?'} • {formatTime(entry?.timestamp || entry?._timestamp)}

{isNew && ( NEW )}

{entry?.text}

{isQuestion && ( )} {(reactionEmojis || []).map(emoji => { const key = (entry?.id || '') + '-' + emoji; const reacted = reactedEntries[key]; const count = entry?.reactions?.[emoji] || 0; if (count === 0 && !reacted) { return ( ); } return ( ); })}

); }; const sortedEntries = useMemo(() => { return [...(entries ?? [])].sort((a, b) => (b?.timestamp || b?._timestamp || 0) - (a?.timestamp || a?._timestamp || 0)); }, [entries]); const totalContributors = useMemo(() => { const ids = new Set(); (entries ?? []).forEach(e => { if (!e?.isDemo) { const eid = e?._user?.id || e?.author?.id; if (eid) ids.add(eid); } }); return Math.max(ids.size, (memberList || []).length); }, [entries, memberList]); const realEntryCount = useMemo(() => { return (entries ?? []).filter(e => !e?.isDemo).length; }, [entries]); return (

{/* Header */}

✨ Lecture Insights

Summarize, question, collaborate — live

{/* Stats bar */}

👥 {totalContributors} active

📝 {realEntryCount} insights

{/* Member avatars */}

{(memberList || []).slice(0, 5).map((m, i) => (

m?.handle ? openProfile(m.handle) : null} title={m?.displayName} style={{ width: 30, height: 30, borderRadius: '50%', border: `2px solid ${colors.bg}`, background: m?.avatarUrl ? `url(${m.avatarUrl}) center/cover` : `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, color: '#fff', marginLeft: i > 0 ? -8 : 0, cursor: m?.handle ? 'pointer' : 'default', position: 'relative', zIndex: 5 - i }} > {!m?.avatarUrl && (m?.displayName || '?')[0]?.toUpperCase()}

))} {(memberList || []).length > 5 && (

+{(memberList || []).length - 5}

)}

{/* Scrollable content */}

{/* Segment Tabs */}

{(segmentLabels || []).map((label, i) => ( ))}

{/* Active Segment Form */}

{segmentLabels[activeSegment]} Summary

setFormData(prev => ({ ...prev, [segmentKeys[activeSegment]]: e.target.value }))}
            placeholder={`Write 2 sentences summarizing the ${segmentLabels[activeSegment].toLowerCase()} of the lecture...`}
            style={{
              width: '100%', minHeight: 90, fontSize: 16, lineHeight: 1.6,
              background: 'rgba(255,255,255,0.03)',
              border: `1px solid ${(formData[segmentKeys[activeSegment]] || '').length > 0 ? colors.primary : 'rgba(255,255,255,0.08)'}`,
              borderRadius: 12, padding: 14, color: colors.text,
              resize: 'vertical', fontFamily: 'inherit',
              transition: 'border-color 0.3s ease'
            }}
          />
          <SentenceIndicator text={formData[segmentKeys[activeSegment]]} />

{/* Question/Comment section */}
          <div style={{
            marginTop: 16, paddingTop: 16,
            borderTop: `1px solid ${colors.border}`
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10
            }}>
              <span style={{ fontSize: 18 }}>❓</span>
              <span style={{ fontSize: 14, fontWeight: 600, color: colors.accent }}>
                Question or Comment
              </span>
              <span style={{ fontSize: 12, color: colors.textDim }}>(optional)</span>
            </div>
            <textarea
              value={formData[questionKeys[activeSegment]] || ''}
              onChange={(e) => setFormData(prev => ({ ...prev, [questionKeys[activeSegment]]: e.target.value }))}
              placeholder="Ask a question or add a comment about this part of the lecture..."
              style={{
                width: '100%', minHeight: 64, fontSize: 16, lineHeight: 1.5,
                background: 'rgba(253, 121, 168, 0.04)',
                border: `1px solid ${(formData[questionKeys[activeSegment]] || '').length > 0 ? colors.accent : 'rgba(255,255,255,0.06)'}`,
                borderRadius: 12, padding: 14, color: colors.text,
                resize: 'vertical', fontFamily: 'inherit',
                transition: 'border-color 0.3s ease'
              }}
            />
          </div>

{/* Submit Button */}
          <button
            onClick={() => handleSubmitSegment(activeSegment)}
            disabled={!(formData[segmentKeys[activeSegment]]?.trim() || formData[questionKeys[activeSegment]]?.trim())}
            style={{
              width: '100%', minHeight: 52, borderRadius: 14,
              border: 'none', cursor: 'pointer',
              marginTop: 16,
              fontSize: 16, fontWeight: 700, color: '#fff',
              background: (formData[segmentKeys[activeSegment]]?.trim() || formData[questionKeys[activeSegment]]?.trim())
                ? `linear-gradient(135deg, ${colors.primary}, ${colors.accent})`
                : 'rgba(255,255,255,0.06)',
              opacity: (formData[segmentKeys[activeSegment]]?.trim() || formData[questionKeys[activeSegment]]?.trim()) ? 1 : 0.4,
              transition: 'all 0.3s ease',
              boxShadow: (formData[segmentKeys[activeSegment]]?.trim() || formData[questionKeys[activeSegment]]?.trim())
                ? `0 4px 20px ${colors.primaryGlow}`
                : 'none'
            }}
          >
            {submittedSegments[activeSegment] ? '✅ Update Segment' : '🚀 Submit Insight'}
          </button>
        </div>

{/* Active Members Panel */}
        <div style={{
          background: colors.card,
          border: `1px solid ${colors.border}`,
          borderRadius: 16, padding: 16, marginBottom: 20
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12
          }}>
            <span style={{ fontSize: 16 }}>👥</span>
            <span style={{ fontSize: 15, fontWeight: 700 }}>Active Members</span>
            <span style={{
              fontSize: 12, color: colors.textDim, marginLeft: 'auto'
            }}>
              {(memberList || []).length} {(memberList || []).length === 1 ? 'member' : 'members'}
            </span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {(memberList || []).slice(0, 10).map((m, i) => {
              const activity = memberActivity?.[m?.id];
              const lastActive = activity?.lastActiveAt;
              const isOnline = lastActive && (Date.now() - lastActive < 120000);
              const memberContributions = (entries ?? []).filter(e => !e?.isDemo && (e?._user?.id === m?.id || e?.author?.id === m?.id)).length;
              return (
                <div
                  key={m?.id || i}
                  onClick={() => m?.handle ? openProfile(m.handle) : null}
                  style={{
                    display: 'flex', alignItems: 'center', gap: 10,
                    padding: '8px 10px', borderRadius: 10,
                    background: 'rgba(255,255,255,0.02)',
                    cursor: m?.handle ? 'pointer' : 'default',
                    transition: 'background 0.2s ease'
                  }}
                >
                  <div style={{ position: 'relative', flexShrink: 0 }}>
                    <div style={{
                      width: 34, height: 34, borderRadius: '50%',
                      background: m?.avatarUrl ? `url(${m.avatarUrl}) center/cover` : `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 14, fontWeight: 700, color: '#fff'
                    }}>
                      {!m?.avatarUrl && (m?.displayName || m?.name || '?')[0]?.toUpperCase()}
                    </div>
                    <div style={{
                      position: 'absolute', bottom: -1, right: -1,
                      width: 10, height: 10, borderRadius: '50%',
                      background: isOnline ? colors.success : colors.textDim,
                      border: `2px solid ${colors.card}`,
                      boxShadow: isOnline ? `0 0 6px ${colors.success}` : 'none'
                    }} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{
                      fontSize: 13, fontWeight: 600, color: colors.text,
                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'
                    }}>
                      {m?.displayName || m?.name || 'Anonymous'}
                      {m?.id === user?.id ? ' (you)' : ''}
                    </div>
                    <div style={{ fontSize: 11, color: colors.textDim }}>
                      {memberContributions > 0 ? `${memberContributions} insight${memberContributions !== 1 ? 's' : ''}` : 'No insights yet'}
                      {m?.role === 'owner' ? ' • Owner' : ''}
                    </div>
                  </div>
                  {isOnline && (
                    <span style={{
                      fontSize: 10, fontWeight: 600, color: colors.success,
                      background: 'rgba(0, 184, 148, 0.12)',
                      padding: '2px 8px', borderRadius: 20
                    }}>LIVE</span>
                  )}
                </div>
              );
            })}
          </div>
          {!user?.id && (
            <button
              onClick={() => openAuth()}
              style={{
                width: '100%', marginTop: 12, padding: '10px 16px',
                borderRadius: 10, border: `1px solid ${colors.border}`,
                background: 'rgba(255,255,255,0.03)',
                color: colors.primary, fontSize: 13, fontWeight: 600,
                cursor: 'pointer', minHeight: 44
              }}
            >
              Sign in to join the session
            </button>
          )}
        </div>

{/* Live Insight Stream */}
        <div style={{ marginBottom: 16 }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14
          }}>
            <div style={{
              width: 8, height: 8, borderRadius: '50%',
              background: colors.secondary,
              boxShadow: `0 0 8px ${colors.secondary}`
            }} />
            <span style={{ fontSize: 17, fontWeight: 700 }}>Live Insight Stream</span>
            <span style={{
              fontSize: 12, color: colors.textDim, marginLeft: 'auto'
            }}>
              {(sortedEntries || []).length} {(sortedEntries || []).length === 1 ? 'entry' : 'entries'}
            </span>
          </div>

{(sortedEntries || []).length === 0 ? (
            <div style={{
              textAlign: 'center', padding: '40px 20px',
              background: colors.glass, borderRadius: 16,
              border: `1px dashed ${colors.border}`
            }}>
              <div style={{ fontSize: 48, marginBottom: 12 }}>📝</div>
              <p style={{ color: colors.textMuted, fontSize: 15, margin: 0 }}>
                Be the first to share an insight!
              </p>
            </div>
          ) : (
            (sortedEntries || []).map(entry => (
              <EntryCard key={entry?.id} entry={entry} />
            ))
          )}
        </div>
      </div>
    </div>
  );
}</article></body></html>