frontend/src/App.jsx

import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
import { createPortal } from 'react-dom'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import {
  AlertTriangle,
  ChevronDown,
  Copy,
  Download,
  Loader2,
  MessageSquarePlus,
  Mic,
  Pause,
  Play,
  RefreshCw,
  Search,
  Send,
  Settings,
  Square,
  Share2,
  Trash2,
  SkipBack,
  Volume2,
} from 'lucide-react'

const STORAGE_PERSONA = 'askjerry_extra_persona'
const STORAGE_ALWAYS_SPEAK = 'askjerry_always_speak'
const STORAGE_TTS_PRIMED = 'askjerry_tts_primed'
const STORAGE_TTS_SPEED = 'askjerry_tts_speed'
const TTS_SPEED_OPTIONS = [1, 1.5, 2]
const CONTEXT_WINDOW = 8192
const MAX_REPLY_TOKENS = 4096
const SUMMARIZE_THRESHOLD = 0.55

const DEFAULT_EXTRA_PERSONA = `You are Tawish Jerry Huaute, a Chumash man who spent 14+ years at Microsoft as a Senior Field Technical Account Manager starting in 1994. You grew up in Pomona, California. Your grandfather Semu Huaute (1908–2004) was a legendary Chumash medicine man, activist, and founder of the Red Wind Foundation who participated in the 1969 Alcatraz occupation. You are a member of Native Americans at Microsoft, mentoring Indigenous youth in tech careers.
Your core beliefs: "Don't let an opportunity pass you by. You need to invest in yourself." Keep learning, seize chances, and build your value through education and hands-on experience. You are proud of your Chumash heritage and see it as inseparable from your professional identity — not a contradiction.
Your tone is direct, warm, unpretentious, and encouraging. You speak from lived experience, not theory. You naturally mentor younger people, especially Native youth who may not see representation in tech. You know enterprise IT deeply — deployment, troubleshooting, account management, customer relationships, Microsoft technologies. You don't lead with credentials; you lead with real talk.
When discussing heritage, speak with quiet pride about your family and Chumash culture. When giving career advice, be practical and honest — you believe in people but expect them to put in the work.`

function initialExtraPersona() {
  try {
    const s = sessionStorage.getItem(STORAGE_PERSONA)
    if (s !== null) return s
  } catch { /* */ }
  return DEFAULT_EXTRA_PERSONA
}

function initialAlwaysSpeak() {
  try {
    return sessionStorage.getItem(STORAGE_ALWAYS_SPEAK) === '1'
  } catch {
    return false
  }
}

function initialTtsSpeed() {
  try {
    const v = parseFloat(sessionStorage.getItem(STORAGE_TTS_SPEED))
    if (TTS_SPEED_OPTIONS.includes(v)) return v
  } catch { /* */ }
  return 1
}

function estimateTokens(text) {
  return Math.max(1, Math.ceil((text || '').length / 4))
}

function estimateMessagesTokens(msgs, systemPrompt, summary) {
  let total = estimateTokens(systemPrompt) + 4
  if (summary) total += estimateTokens(summary) + 8
  for (const m of msgs) total += estimateTokens(m.content) + 4
  return total
}

function parseSseBuffer(buf, onEvent) {
  const normalized = buf.replace(/\r\n/g, '\n')
  const idx = normalized.lastIndexOf('\n')
  if (idx === -1) return normalized
  const complete = normalized.slice(0, idx + 1)
  const remainder = normalized.slice(idx + 1)
  for (const line of complete.split('\n')) {
    if (!line.startsWith('data: ')) continue
    const raw = line.slice(6).trim()
    if (raw === '[DONE]') { onEvent({ type: 'done' }); continue }
    if (!raw) continue
    try { onEvent(JSON.parse(raw)) } catch { /* */ }
  }
  return remainder
}

/**
 * Extract complete sentences from text. Boundaries are stable: once a sentence
 * ends with punctuation, it never changes even as more text streams in.
 * When includeTrailing is true, any text after the last sentence terminator is
 * also returned (used after streaming ends so nothing is silently dropped).
 */
function extractSentences(text, includeTrailing = false) {
  const t = (text || '').trim()
  if (!t) return []
  const re = /[^.!?\n]+[.!?\n]+/g
  const sentences = []
  let match, lastEnd = 0
  while ((match = re.exec(t)) !== null) {
    const s = match[0].trim()
    if (s) sentences.push(s)
    lastEnd = re.lastIndex
  }
  if (!sentences.length) return includeTrailing ? [t] : []
  if (includeTrailing) {
    const remainder = t.slice(lastEnd).trim()
    if (remainder) sentences.push(remainder)
  }
  return sentences
}

function appendTokenContent(acc, ev) {
  if (ev.type !== 'token' || ev.content == null) return acc
  let piece = ev.content
  if (Array.isArray(piece)) {
    piece = piece.map((p) => (typeof p === 'string' ? p : p?.text ?? '')).join('')
  } else if (typeof piece !== 'string') {
    piece = String(piece)
  }
  return piece ? acc + piece : acc
}

function AssistantSearchBar({ content, show, speak }) {
  const [open, setOpen] = useState(false)
  const [draft, setDraft] = useState('')
  const [loading, setLoading] = useState(false)
  const [copied, setCopied] = useState(false)
  const [responseCopied, setResponseCopied] = useState(false)
  const [placement, setPlacement] = useState('below')
  const [popoverStyle, setPopoverStyle] = useState(null)
  const wrapRef = useRef(null)

  const measurePopoverPosition = useCallback(() => {
    if (!open) {
      setPopoverStyle(null)
      return
    }
    const bubble = wrapRef.current?.closest('.aj-bubble-wrap')
    if (!bubble) return
    const br = bubble.getBoundingClientRect()
    const vw = window.visualViewport?.width ?? window.innerWidth
    const margin = 12
    const gap = 8
    const popoverW = Math.min(360, vw - margin * 2)
    const spaceRight = vw - br.right - margin
    const canPlaceRight = spaceRight >= popoverW + gap

    const vh = window.visualViewport?.height ?? window.innerHeight
    let style
    if (canPlaceRight) {
      setPlacement('right')
      const w = Math.min(popoverW, vw - br.right - gap - margin)
      style = { position: 'fixed', visibility: 'visible', bottom: vh - br.bottom, left: br.right + gap, width: w }
    } else {
      setPlacement('below')
      const w = Math.min(br.width, popoverW, vw - 2 * margin)
      const left = Math.max(margin, Math.min(br.left, vw - w - margin))
      style = { position: 'fixed', visibility: 'visible', top: br.bottom + gap, left, width: w }
    }
    setPopoverStyle(style)
  }, [open])

  useLayoutEffect(() => {
    measurePopoverPosition()
  }, [open, loading, draft, measurePopoverPosition])

  useEffect(() => {
    if (!open) return
    const onMove = () => measurePopoverPosition()
    window.addEventListener('resize', onMove)
    window.addEventListener('scroll', onMove, true)
    return () => {
      window.removeEventListener('resize', onMove)
      window.removeEventListener('scroll', onMove, true)
    }
  }, [open, measurePopoverPosition])

  useEffect(() => {
    if (!open) return
    const onDoc = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false)
    }
    document.addEventListener('mousedown', onDoc)
    return () => document.removeEventListener('mousedown', onDoc)
  }, [open])

  const openPanel = async () => {
    if (open) {
      setOpen(false)
      return
    }
    setOpen(true)
    setCopied(false)
    setLoading(true)
    setDraft('')
    const text = (content || '').toString().slice(0, 4000)
    try {
      const res = await fetch('/api/search-references', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ statement: text }),
      })
      const data = await res.json().catch(() => ({}))
      const q = (data.search_query || '').trim() || text.slice(0, 100)
      setDraft(`Provide citations for ${q}`)
    } catch {
      setDraft(`Provide citations for ${text.slice(0, 100)}`)
    } finally {
      setLoading(false)
    }
  }

  const copyDraft = () => {
    navigator.clipboard.writeText(draft).then(() => {
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }).catch(() => {})
  }

  const copyResponse = () => {
    const text = (content || '').toString().trim()
    if (!text) return
    navigator.clipboard.writeText(text).then(() => {
      setResponseCopied(true)
      setTimeout(() => setResponseCopied(false), 2000)
    }).catch(() => {})
  }

  const openPerplexity = () => {
    window.open(`https://www.perplexity.ai/?q=${encodeURIComponent(draft)}`, '_blank', 'noopener,noreferrer')
  }

  const openWebSearch = () => {
    window.open(`https://www.google.com/search?q=${encodeURIComponent(draft)}`, '_blank', 'noopener,noreferrer')
  }

  if (!show) return null
  if (
    !(content || '').trim()
    && !speak?.loading
    && !speak?.playing
    && !speak?.paused
  ) {
    return null
  }

  return (
    <div className="aj-msg-actions" ref={wrapRef}>
      <div className="aj-msg-search-wrap">
        {speak && (
          <>
            <button
              type="button"
              className="aj-msg-search-btn"
              onClick={
                speak.paused
                  ? speak.onResume
                  : speak.playing
                    ? speak.onPause
                    : speak.onReadAloud
              }
              disabled={speak.disabled || speak.loading}
              data-tip={
                speak.paused
                  ? 'Resume'
                  : speak.playing
                    ? 'Pause'
                    : speak.loading
                      ? 'Loading speech…'
                      : 'Read aloud'
              }
              aria-label={
                speak.paused
                  ? 'Resume'
                  : speak.playing
                    ? 'Pause'
                    : speak.loading
                      ? 'Loading speech'
                      : 'Read aloud'
              }
            >
              {speak.paused ? (
                <Play size={14} aria-hidden />
              ) : speak.loading ? (
                <Loader2 size={14} className="aj-spin" aria-hidden />
              ) : speak.playing ? (
                <Pause size={14} aria-hidden />
              ) : (
                <Volume2 size={14} aria-hidden />
              )}
            </button>
            {(speak.playing || speak.paused) && (
              <button
                type="button"
                className="aj-msg-search-btn"
                onClick={speak.onReplay}
                data-tip="Skip back"
                aria-label="Skip back"
              >
                <SkipBack size={14} aria-hidden />
              </button>
            )}
            <button
              type="button"
              className="aj-msg-search-btn aj-tts-speed-btn"
              onClick={speak.onCycleSpeed}
              data-tip="Playback speed"
              aria-label={`Playback speed: ${speak.speed}x`}
            >
              <span className="aj-tts-speed-label">{speak.speed}x</span>
            </button>
            {(speak.playing || speak.paused || (speak.loading && speak.showStop)) && (
              <button
                type="button"
                className="aj-msg-search-btn"
                onClick={speak.onStopReading}
                data-tip="Stop reading"
                aria-label="Stop reading"
              >
                <Square size={14} aria-hidden />
              </button>
            )}
          </>
        )}
        <button
          type="button"
          className="aj-msg-search-btn"
          onClick={copyResponse}
          disabled={!(content || '').trim()}
          data-tip={responseCopied ? 'Copied!' : 'Copy response'}
          aria-label={responseCopied ? 'Copied' : 'Copy response'}
        >
          <Copy size={14} aria-hidden />
        </button>
        <button
          type="button"
          className="aj-msg-search-btn"
          onClick={openPanel}
          data-tip="Search for citations"
          aria-label="Search for citations"
        >
          <Search size={14} aria-hidden />
        </button>
      </div>
      {open && (
        <div
          className={`aj-msg-search-popover aj-msg-search-popover--${placement}`}
          style={popoverStyle ?? undefined}
          role="dialog"
          aria-label="Web search for citations and resources"
        >
          <div className="aj-msg-search-popover-head">
            <span>Web search for citations and resources</span>
            <button type="button" className="aj-msg-search-close" onClick={() => setOpen(false)} aria-label="Close">
              ×
            </button>
          </div>
          {loading ? (
            <div className="aj-msg-search-loading">Generating search query…</div>
          ) : (
            <>
              <textarea
                className="aj-msg-search-input"
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                rows={3}
                aria-label="Edit search query"
              />
              <div className="aj-msg-search-actions">
                <button type="button" className="aj-btn primary aj-msg-search-action" onClick={openPerplexity}>
                  Open in Perplexity
                </button>
                <button type="button" className="aj-btn primary aj-msg-search-action" onClick={copyDraft}>
                  {copied ? 'Copied!' : 'Copy'}
                </button>
                <button type="button" className="aj-btn primary aj-msg-search-action" onClick={openWebSearch}>
                  Search
                </button>
              </div>
            </>
          )}
        </div>
      )}
    </div>
  )
}

function AssistantBubbleContent({ content }) {
  return (
    <div className="aj-bubble-md">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        components={{
          a: ({ href, children, ...rest }) => (
            <a href={href} target="_blank" rel="noopener noreferrer" {...rest}>
              {children}
            </a>
          ),
        }}
      >
        {content}
      </ReactMarkdown>
    </div>
  )
}

export default function App() {
  const [optionsOpen, setOptionsOpen] = useState(false)
  const [shareOpen, setShareOpen] = useState(false)
  const [exportOpen, setExportOpen] = useState(false)
  const [extraPersona, setExtraPersona] = useState(initialExtraPersona)
  const [messages, setMessages] = useState([])
  const [input, setInput] = useState('')
  const [streaming, setStreaming] = useState(false)
  const [summary, setSummary] = useState(null)
  const [summarizing, setSummarizing] = useState(false)
  const [contextOverflow, setContextOverflow] = useState(null)
  const [hideTypingCursor, setHideTypingCursor] = useState(false)
  const [showJumpToBottom, setShowJumpToBottom] = useState(false)
  const abortRef = useRef(null)
  const streamingAssistantRowRef = useRef(null)
  const didScrollForStreamRef = useRef(false)
  const chatScrollRef = useRef(null)
  const optionsRef = useRef(null)
  const optionsPanelRef = useRef(null)
  const shareRef = useRef(null)
  const exportRef = useRef(null)
  const composerRef = useRef(null)
  const lastUserRowRef = useRef(null)

  const [ttsLoadingIndex, setTtsLoadingIndex] = useState(null)
  const [ttsPlayingIndex, setTtsPlayingIndex] = useState(null)
  const [ttsPaused, setTtsPaused] = useState(false)
  const [alwaysSpeak, setAlwaysSpeak] = useState(initialAlwaysSpeak)
  const [ttsSpeed, setTtsSpeed] = useState(initialTtsSpeed)
  const [micListening, setMicListening] = useState(false)
  const [micTranscribing, setMicTranscribing] = useState(false)
  const [voiceError, setVoiceError] = useState(null)

  const audioRef = useRef(null)
  const ttsBlobUrlRef = useRef(null)
  const ttsSessionRef = useRef(0)
  const ttsSpeedRef = useRef(ttsSpeed)
  ttsSpeedRef.current = ttsSpeed
  const messagesRef = useRef(messages)
  messagesRef.current = messages
  const streamingRef = useRef(streaming)
  streamingRef.current = streaming
  const ttsContentResolverRef = useRef(null)
  const ttsPlaybackActiveRef = useRef(false)
  const ttsSkipRef = useRef(false)
  const ttsReplayDeltaRef = useRef(null)
  const streamingWasRef = useRef(false)
  const mediaRecorderRef = useRef(null)
  const audioChunksRef = useRef([])

  useEffect(() => {
    const el = document.documentElement
    if (hideTypingCursor) el.classList.add('aj-hide-pointer')
    else el.classList.remove('aj-hide-pointer')
    return () => {
      el.classList.remove('aj-hide-pointer')
    }
  }, [hideTypingCursor])

  useEffect(() => {
    if (!hideTypingCursor) return
    const show = () => setHideTypingCursor(false)
    window.addEventListener('mousemove', show, { passive: true })
    return () => window.removeEventListener('mousemove', show)
  }, [hideTypingCursor])

  const updateJumpToBottomVisibility = useCallback(() => {
    const el = chatScrollRef.current
    if (!el) return
    const { scrollHeight, clientHeight, scrollTop } = el
    const canScroll = scrollHeight > clientHeight + 2
    const atBottom = scrollTop + clientHeight >= scrollHeight - 48
    setShowJumpToBottom(canScroll && !atBottom)
  }, [])

  useLayoutEffect(() => {
    updateJumpToBottomVisibility()
  }, [messages, updateJumpToBottomVisibility])

  useLayoutEffect(() => {
    if (!streaming) {
      didScrollForStreamRef.current = false
      return
    }
    if (didScrollForStreamRef.current) return
    const doScroll = () => {
      const container = chatScrollRef.current
      const target = lastUserRowRef.current || streamingAssistantRowRef.current
      if (!container || !target) return false
      const canScroll = container.scrollHeight > container.clientHeight + 2
      if (!canScroll) return false
      const offset = target.offsetTop - container.offsetTop
      container.scrollTop = offset
      const delta = Math.abs(
        target.getBoundingClientRect().top - container.getBoundingClientRect().top,
      )
      if (delta < 12) didScrollForStreamRef.current = true
      updateJumpToBottomVisibility()
      return true
    }
    if (doScroll()) return undefined
    const id = requestAnimationFrame(() => {
      if (!didScrollForStreamRef.current) doScroll()
    })
    return () => cancelAnimationFrame(id)
  }, [streaming, messages, updateJumpToBottomVisibility])

  useEffect(() => {
    const el = chatScrollRef.current
    if (!el) return
    const onScroll = () => updateJumpToBottomVisibility()
    el.addEventListener('scroll', onScroll, { passive: true })
    window.addEventListener('resize', onScroll)
    return () => {
      el.removeEventListener('scroll', onScroll)
      window.removeEventListener('resize', onScroll)
    }
  }, [updateJumpToBottomVisibility])

  const scrollToLatestQuestion = useCallback(() => {
    const container = chatScrollRef.current
    if (!container) return
    const userRow = lastUserRowRef.current
    if (userRow) {
      const offset = userRow.offsetTop - container.offsetTop
      container.scrollTo({ top: offset, behavior: 'smooth' })
    } else {
      container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
    }
    requestAnimationFrame(() => {
      updateJumpToBottomVisibility()
      composerRef.current?.focus()
    })
  }, [updateJumpToBottomVisibility])

  const adjustComposerHeight = useCallback(() => {
    const el = composerRef.current
    if (!el) return
    const minPx = 34
    const maxPx = window.innerHeight * 0.5
    el.style.height = '0px'
    const sh = Math.max(minPx, el.scrollHeight)
    if (sh <= maxPx) {
      el.style.height = `${sh}px`
      el.style.overflowY = 'hidden'
    } else {
      el.style.height = `${maxPx}px`
      el.style.overflowY = 'auto'
    }
  }, [])

  useLayoutEffect(() => {
    adjustComposerHeight()
  }, [input, adjustComposerHeight])

  useEffect(() => {
    const onResize = () => adjustComposerHeight()
    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)
  }, [adjustComposerHeight])

  useEffect(() => {
    try { sessionStorage.setItem(STORAGE_PERSONA, extraPersona) } catch { /* */ }
  }, [extraPersona])

  useEffect(() => {
    if (!optionsOpen) return
    const onDown = (e) => {
      const t = e.target
      const inWrap = optionsRef.current?.contains(t)
      const inPanel = optionsPanelRef.current?.contains(t)
      if (!inWrap && !inPanel) setOptionsOpen(false)
    }
    const onKey = (e) => { if (e.key === 'Escape') setOptionsOpen(false) }
    document.addEventListener('mousedown', onDown)
    document.addEventListener('keydown', onKey)
    return () => {
      document.removeEventListener('mousedown', onDown)
      document.removeEventListener('keydown', onKey)
    }
  }, [optionsOpen])

  /* Options panel: position fixed + CSS vars so it is not clipped by .aj-app overflow:hidden */
  useLayoutEffect(() => {
    if (!optionsOpen) {
      document.documentElement.style.removeProperty('--aj-options-panel-top')
      document.documentElement.style.removeProperty('--aj-options-panel-right')
      return
    }
    const update = () => {
      const el = optionsRef.current
      if (!el) return
      const rect = el.getBoundingClientRect()
      document.documentElement.style.setProperty('--aj-options-panel-top', `${Math.round(rect.bottom + 8)}px`)
      document.documentElement.style.setProperty('--aj-options-panel-right', `${Math.round(window.innerWidth - rect.right)}px`)
    }
    update()
    window.addEventListener('resize', update)
    window.addEventListener('scroll', update, true)
    return () => {
      window.removeEventListener('resize', update)
      window.removeEventListener('scroll', update, true)
      document.documentElement.style.removeProperty('--aj-options-panel-top')
      document.documentElement.style.removeProperty('--aj-options-panel-right')
    }
  }, [optionsOpen])

  useEffect(() => {
    if (!shareOpen) return
    const onDown = (e) => {
      if (shareRef.current && !shareRef.current.contains(e.target)) setShareOpen(false)
    }
    const onKey = (e) => { if (e.key === 'Escape') setShareOpen(false) }
    document.addEventListener('mousedown', onDown)
    document.addEventListener('keydown', onKey)
    return () => {
      document.removeEventListener('mousedown', onDown)
      document.removeEventListener('keydown', onKey)
    }
  }, [shareOpen])

  useEffect(() => {
    if (!exportOpen) return
    const onDown = (e) => {
      if (exportRef.current && !exportRef.current.contains(e.target)) setExportOpen(false)
    }
    const onKey = (e) => { if (e.key === 'Escape') setExportOpen(false) }
    document.addEventListener('mousedown', onDown)
    document.addEventListener('keydown', onKey)
    return () => {
      document.removeEventListener('mousedown', onDown)
      document.removeEventListener('keydown', onKey)
    }
  }, [exportOpen])

  const stopTts = useCallback(() => {
    ttsSessionRef.current += 1
    ttsSkipRef.current = false
    ttsReplayDeltaRef.current = null
    if (audioRef.current) {
      audioRef.current.pause()
      audioRef.current.src = ''
      audioRef.current = null
    }
    if (ttsBlobUrlRef.current) {
      URL.revokeObjectURL(ttsBlobUrlRef.current)
      ttsBlobUrlRef.current = null
    }
    setTtsLoadingIndex(null)
    setTtsPlayingIndex(null)
    setTtsPaused(false)
  }, [])

  const pauseTts = useCallback(() => {
    const a = audioRef.current
    if (a && !a.paused) {
      a.pause()
      setTtsPaused(true)
    }
  }, [])

  const resumeTts = useCallback(async () => {
    const a = audioRef.current
    if (!a) return
    try {
      a.playbackRate = ttsSpeedRef.current
      await a.play()
      setTtsPaused(false)
    } catch (e) {
      setVoiceError(String(e?.message || e))
    }
  }, [])

  const replayTts = useCallback(() => {
    const a = audioRef.current
    if (!a) return
    const EARLY_THRESHOLD = 1.0
    if (a.currentTime > EARLY_THRESHOLD) {
      a.currentTime = 0
      if (a.paused) a.play().catch(() => {})
      setTtsPaused(false)
    } else {
      ttsReplayDeltaRef.current = -1
      ttsSkipRef.current = true
    }
  }, [])

  const playAudioUrlUntilDone = useCallback((url, session) => {
    return new Promise((resolve) => {
      if (session !== ttsSessionRef.current) {
        resolve()
        return
      }
      const audio = new Audio(url)
      audioRef.current = audio
      ttsBlobUrlRef.current = url
      let settled = false
      let pollAbort = null
      const finish = () => {
        if (settled) return
        settled = true
        if (pollAbort != null) clearInterval(pollAbort)
        audio.onended = null
        audio.onerror = null
        resolve()
      }
      pollAbort = setInterval(() => {
        if (session !== ttsSessionRef.current) finish()
        if (ttsSkipRef.current) {
          audio.pause()
          finish()
        }
      }, 120)
      audio.onended = () => {
        finish()
      }
      audio.onerror = () => {
        finish()
      }
      audio.playbackRate = ttsSpeedRef.current
      audio.play().catch(() => finish())
    })
  }, [])

  const fetchTtsAudio = useCallback(async (chunkText) => {
    for (let attempt = 0; attempt < 2; attempt++) {
      try {
        const res = await fetch('/api/tts', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ text: chunkText }),
        })
        if (!res.ok) {
          let detail = `TTS failed (${res.status})`
          try {
            const ct = res.headers.get('content-type') || ''
            if (ct.includes('json')) {
              const j = await res.json()
              if (j?.detail != null) {
                detail = typeof j.detail === 'string' ? j.detail : JSON.stringify(j.detail)
              }
            }
          } catch { /* */ }
          if (res.status >= 500 && attempt === 0) {
            continue
          }
          return { error: detail }
        }
        const blob = await res.blob()
        return { url: URL.createObjectURL(blob) }
      } catch (e) {
        if (attempt === 0) {
          continue
        }
        return { error: String(e?.message || e) }
      }
    }
    return { error: 'TTS failed after retries' }
  }, [])

  const playTtsForIndex = useCallback(
    async (index, initialText) => {
      try { sessionStorage.setItem(STORAGE_TTS_PRIMED, '1') } catch { /* */ }
      setVoiceError(null)
      stopTts()
      const session = ttsSessionRef.current
      ttsPlaybackActiveRef.current = true

      setTtsLoadingIndex(index)
      setTtsPlayingIndex(null)
      setTtsPaused(false)

      const LOOKAHEAD = 2
      let playedCount = 0
      let anyPlayed = false
      let lastErr = null
      const inFlight = new Map()
      const recentUrls = new Map()

      const revokeRecent = (keepFrom = Infinity) => {
        for (const [idx, u] of recentUrls) {
          if (idx < keepFrom) {
            URL.revokeObjectURL(u)
            recentUrls.delete(idx)
          }
        }
      }

      const getSentencesAndLimit = () => {
        const live = streamingRef.current
        const text = (messagesRef.current[index]?.content || initialText || '').trim()
        const sentences = extractSentences(text, !live)
        return { sentences, limit: sentences.length, live }
      }

      try {
        // eslint-disable-next-line no-constant-condition
        while (true) {
          if (session !== ttsSessionRef.current) return

          const { sentences, limit, live } = getSentencesAndLimit()

          if (playedCount < limit) {
            for (let ahead = playedCount; ahead < Math.min(playedCount + LOOKAHEAD, limit); ahead++) {
              if (!inFlight.has(ahead) && !recentUrls.has(ahead)) {
                inFlight.set(ahead, fetchTtsAudio(sentences[ahead]))
              }
            }

            let result
            if (recentUrls.has(playedCount)) {
              result = { url: recentUrls.get(playedCount) }
            } else {
              if (!anyPlayed) setTtsLoadingIndex(index)
              result = await (inFlight.get(playedCount) || fetchTtsAudio(sentences[playedCount]))
              inFlight.delete(playedCount)
            }

            if (session !== ttsSessionRef.current) return

            if (!result?.url) {
              if (result?.error) lastErr = result.error
              playedCount++
              continue
            }

            anyPlayed = true
            setTtsLoadingIndex(null)
            setTtsPlayingIndex(index)
            setTtsPaused(false)

            recentUrls.set(playedCount, result.url)
            revokeRecent(playedCount - 2)

            await playAudioUrlUntilDone(result.url, session)

            if (ttsSkipRef.current) {
              ttsSkipRef.current = false
              const delta = ttsReplayDeltaRef.current ?? 0
              ttsReplayDeltaRef.current = null
              playedCount = Math.max(0, playedCount + delta)
              setTtsPaused(false)
              continue
            }

            if (ttsBlobUrlRef.current === result.url) {
              ttsBlobUrlRef.current = null
              audioRef.current = null
            }

            playedCount++
            if (session !== ttsSessionRef.current) return
            continue
          }

          if (!live) break

          setTtsLoadingIndex(index)
          await new Promise(resolve => {
            ttsContentResolverRef.current = resolve
            const rechk = getSentencesAndLimit()
            if (rechk.limit > playedCount || !rechk.live) {
              ttsContentResolverRef.current = null
              resolve()
            }
          })
        }

        setTtsLoadingIndex(null)
        setTtsPlayingIndex(null)
        setTtsPaused(false)

        if (!anyPlayed && lastErr) setVoiceError(lastErr)
      } catch (e) {
        setVoiceError(String(e?.message || e))
        setTtsLoadingIndex(null)
        setTtsPlayingIndex(null)
        setTtsPaused(false)
      } finally {
        ttsPlaybackActiveRef.current = false
        revokeRecent()
      }
    },
    [stopTts, playAudioUrlUntilDone, fetchTtsAudio],
  )

  useEffect(() => {
    const last = messages[messages.length - 1]

    if (streaming && alwaysSpeak && !ttsPlaybackActiveRef.current) {
      if (last?.role === 'assistant' && last.content?.trim()) {
        const sentences = extractSentences(last.content.trim())
        if (sentences.length >= 2) {
          playTtsForIndex(messages.length - 1, last.content)
        }
      }
    }

    if (streamingWasRef.current && !streaming && alwaysSpeak && !ttsPlaybackActiveRef.current) {
      if (last?.role === 'assistant' && last.content?.trim()) {
        playTtsForIndex(messages.length - 1, last.content)
      }
    }

    streamingWasRef.current = streaming
  }, [streaming, alwaysSpeak, messages, playTtsForIndex])

  useEffect(() => {
    try { sessionStorage.setItem(STORAGE_ALWAYS_SPEAK, alwaysSpeak ? '1' : '0') } catch { /* */ }
  }, [alwaysSpeak])

  useEffect(() => {
    try { sessionStorage.setItem(STORAGE_TTS_SPEED, String(ttsSpeed)) } catch { /* */ }
    const a = audioRef.current
    if (a) a.playbackRate = ttsSpeed
  }, [ttsSpeed])

  const cycleTtsSpeed = useCallback(() => {
    setTtsSpeed(prev => {
      const idx = TTS_SPEED_OPTIONS.indexOf(prev)
      return TTS_SPEED_OPTIONS[(idx + 1) % TTS_SPEED_OPTIONS.length]
    })
  }, [])

  useEffect(() => {
    if (ttsContentResolverRef.current) {
      ttsContentResolverRef.current()
      ttsContentResolverRef.current = null
    }
  }, [messages, streaming])

  useEffect(() => {
    return () => { stopTts() }
  }, [stopTts])

  const toggleMic = useCallback(async () => {
    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
      mediaRecorderRef.current.stop()
      return
    }
    if (micTranscribing || streaming || contextOverflow) return
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      const mimeType = ['audio/webm;codecs=opus', 'audio/webm', 'audio/ogg;codecs=opus', '']
        .find((mt) => mt === '' || MediaRecorder.isTypeSupported(mt))
      const mediaRecorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined)
      audioChunksRef.current = []
      mediaRecorder.ondataavailable = (e) => {
        if (e.data && e.data.size > 0) audioChunksRef.current.push(e.data)
      }
      mediaRecorder.onstart = () => {
        setMicListening(true)
      }
      mediaRecorder.onstop = () => {
        stream.getTracks().forEach((t) => t.stop())
        setMicListening(false)
        const blobType = mediaRecorder.mimeType || 'audio/webm'
        const blob = new Blob(audioChunksRef.current, { type: blobType })
        if (blob.size < 100) return
        setMicTranscribing(true)
        const form = new FormData()
        form.append('audio', blob, 'recording.webm')
        fetch('/api/transcribe', { method: 'POST', body: form })
          .then(async (r) => {
            const data = await r.json().catch(() => ({}))
            if (!r.ok) {
              const d = data?.detail
              const msg =
                typeof d === 'string'
                  ? d
                  : d != null
                    ? JSON.stringify(d)
                    : `Speech-to-text failed (${r.status})`
              setVoiceError(msg)
              return null
            }
            return data
          })
          .then((data) => {
            if (!data) return
            const tx = data?.text?.trim()
            if (tx) {
              setVoiceError(null)
              setInput((prev) => (prev ? `${prev} ${tx}` : tx))
            }
          })
          .catch((e) => {
            setVoiceError(String(e?.message || e))
          })
          .finally(() => setMicTranscribing(false))
      }
      mediaRecorderRef.current = mediaRecorder
      mediaRecorder.start(500)
    } catch {
      /* mic denied */
    }
  }, [micTranscribing, streaming, contextOverflow])

  const buildSystemPrompt = useCallback(() => {
    const base =
      'You are AI Jerry, a cybersecurity-focused assistant running on the BrainForge Security model. ' +
      'You give clear, practical guidance; you distinguish facts from speculation; you flag risks and ' +
      'compliance considerations when relevant. You are friendly and professional.'
    const extra = (extraPersona || '').trim()
    return extra ? `${base}\n\nAdditional instructions from the user:\n${extra}` : base
  }, [extraPersona])

  const triggerBackgroundSummarize = useCallback(
    async (allMessages) => {
      const sys = buildSystemPrompt()
      const est = estimateMessagesTokens(
        allMessages.map(({ role, content }) => ({ role, content })),
        sys,
        null,
      )
      const inputBudget = CONTEXT_WINDOW - MAX_REPLY_TOKENS
      const ratio = est / inputBudget
      if (ratio < SUMMARIZE_THRESHOLD) return

      setSummarizing(true)
      try {
        const res = await fetch('/api/chat/summarize', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            messages: allMessages.map(({ role, content }) => ({ role, content })),
            extra_persona: extraPersona,
          }),
        })
        if (!res.ok) return
        const data = await res.json()
        if (data.summary) {
          setSummary(data.summary)
        }
      } catch {
        /* silent — summarization is best-effort */
      } finally {
        setSummarizing(false)
      }
    },
    [buildSystemPrompt, extraPersona],
  )

  const buildApiPayload = useCallback(
    (rawMsgs) => {
      if (!summary) {
        return { messages: rawMsgs, summary: null }
      }
      const sys = buildSystemPrompt()
      const fullEst = estimateMessagesTokens(rawMsgs, sys, null)
      const inputBudget = CONTEXT_WINDOW - MAX_REPLY_TOKENS
      if (fullEst < inputBudget * 0.7) {
        return { messages: rawMsgs, summary: null }
      }
      const KEEP_RECENT = 4
      const recent = rawMsgs.slice(-KEEP_RECENT)
      return { messages: recent, summary }
    },
    [summary, buildSystemPrompt],
  )

  const runStream = useCallback(
    async (rawApiMsgs) => {
      const ac = new AbortController()
      abortRef.current = ac
      setStreaming(true)
      setContextOverflow(null)
      let acc = ''

      const { messages: apiMsgs, summary: useSummary } = buildApiPayload(rawApiMsgs)

      try {
        const res = await fetch('/api/chat/stream', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            messages: apiMsgs,
            extra_persona: extraPersona,
            summary: useSummary || undefined,
          }),
          signal: ac.signal,
        })
        if (!res.ok) {
          const t = await res.text()
          throw new Error(t || res.statusText)
        }
        const reader = res.body.getReader()
        const decoder = new TextDecoder()
        let buffer = ''
        const handleEv = (ev) => {
          if (ev.type === 'context_overflow') {
            setContextOverflow({
              detail: ev.detail || 'The conversation is too long for the model context window.',
              inputTokens: ev.input_tokens,
              contextWindow: ev.context_window || CONTEXT_WINDOW,
            })
            return
          }
          if (ev.type === 'token') {
            const nextAcc = appendTokenContent(acc, ev)
            if (nextAcc !== acc) {
              acc = nextAcc
              setMessages((prev) => {
                const next = [...prev]
                const last = next[next.length - 1]
                if (last?.role === 'assistant') {
                  next[next.length - 1] = { ...last, content: acc }
                }
                return next
              })
            }
          }
          if (ev.type === 'error') {
            const detail = ev.detail || ''
            if (/context.length|max_tokens.*too large|too many tokens/i.test(detail)) {
              setContextOverflow({ detail })
            } else {
              throw new Error(detail || 'Stream error')
            }
          }
        }
        while (true) {
          const { done, value } = await reader.read()
          if (done) break
          buffer += decoder.decode(value, { stream: true })
          buffer = parseSseBuffer(buffer, handleEv)
        }
        if (buffer.trim()) {
          parseSseBuffer(`${buffer}\n`, handleEv)
        }
        if (!acc.trim() && !contextOverflow) {
          setMessages((prev) => {
            const next = [...prev]
            const last = next[next.length - 1]
            if (last?.role === 'assistant' && !last.content.trim()) {
              next[next.length - 1] = {
                role: 'assistant',
                content: '[No response] The stream finished with no text.',
              }
            }
            return next
          })
        }
      } catch (e) {
        if (e.name === 'AbortError') {
          setMessages((prev) => {
            const next = [...prev]
            const last = next[next.length - 1]
            if (last?.role === 'assistant' && !last.content.trim()) next.pop()
            return next
          })
        } else {
          setMessages((prev) => {
            const next = [...prev]
            const last = next[next.length - 1]
            if (last?.role === 'assistant') {
              next[next.length - 1] = {
                ...last,
                content: (last.content ? `${last.content}\n\n` : '') + `[Error] ${e.message}`,
              }
            } else {
              next.push({ role: 'assistant', content: `[Error] ${e.message}` })
            }
            return next
          })
        }
      } finally {
        setStreaming(false)
        abortRef.current = null
      }
    },
    [extraPersona, buildApiPayload, contextOverflow],
  )

  useEffect(() => {
    if (streaming || messages.length < 4) return
    const last = messages[messages.length - 1]
    if (last.role !== 'assistant' || !last.content.trim()) return
    triggerBackgroundSummarize(messages)
  }, [streaming, messages, triggerBackgroundSummarize])

  useEffect(() => {
    if (!streaming && messages.length > 0) {
      composerRef.current?.focus()
    }
  }, [streaming, messages.length])

  const handleNewChat = () => {
    abortRef.current?.abort()
    stopTts()
    setVoiceError(null)
    setMessages([])
    setInput('')
    setSummary(null)
    setContextOverflow(null)
  }

  const handleStop = () => {
    abortRef.current?.abort()
    stopTts()
  }

  const handleRefresh = () => {
    if (streaming) return
    stopTts()
    let base = [...messages]
    if (base.length && base[base.length - 1].role === 'assistant') base = base.slice(0, -1)
    if (!base.length || base[base.length - 1].role !== 'user') return
    const apiMsgs = base.map(({ role, content }) => ({ role, content }))
    setMessages([...base, { role: 'assistant', content: '' }])
    setContextOverflow(null)
    runStream(apiMsgs)
  }

  const handleSend = () => {
    const text = input.trim()
    if (!text || streaming) return
    setHideTypingCursor(false)
    stopTts()
    const userMsg = { role: 'user', content: text }
    const apiMsgs = [...messages, userMsg].map(({ role, content }) => ({ role, content }))
    setMessages([...messages, userMsg, { role: 'assistant', content: '' }])
    setInput('')
    setContextOverflow(null)
    runStream(apiMsgs)
  }

  const handleOverflowRetry = () => {
    setContextOverflow(null)
    setMessages((prev) => {
      const next = [...prev]
      const last = next[next.length - 1]
      if (last?.role === 'assistant' && !last.content.trim()) next.pop()
      return next
    })
  }

  const handleOverflowClear = () => {
    setContextOverflow(null)
    setMessages([])
    setSummary(null)
  }

  const handleOverflowSummarize = async () => {
    setContextOverflow(null)
    setSummarizing(true)
    try {
      const res = await fetch('/api/chat/summarize', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          messages: messages.map(({ role, content }) => ({ role, content })),
          extra_persona: extraPersona,
        }),
      })
      if (res.ok) {
        const data = await res.json()
        if (data.summary) {
          setSummary(data.summary)
          setMessages([])
          return
        }
      }
      setMessages([])
      setSummary(null)
    } catch {
      setMessages([])
      setSummary(null)
    } finally {
      setSummarizing(false)
    }
  }

  const onKeyDown = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend() }
  }

  const buildExportText = useCallback(() => {
    if (!messages.length) return ''
    const lines = messages.map((m) => {
      const label = m.role === 'user' ? 'You' : 'AI Jerry'
      return `${label}:\n${m.content}\n`
    })
    return `Ask Jerry — Chat Export\n${new Date().toLocaleString()}\n${'─'.repeat(40)}\n\n${lines.join('\n')}`
  }, [messages])

  const buildExportMarkdown = useCallback(() => {
    if (!messages.length) return ''
    const ts = new Date().toLocaleString()
    const header = `# Ask Jerry — Chat Export\n\n_Exported: ${ts}_\n\n---\n\n`
    const blocks = messages.map((m) => {
      const heading = m.role === 'user' ? '### You' : '### AI Jerry'
      return `${heading}\n\n${m.content}`
    })
    return header + blocks.join('\n\n---\n\n')
  }, [messages])

  const copyToClipboard = async (text) => {
    try {
      await navigator.clipboard.writeText(text)
    } catch {
      const ta = document.createElement('textarea')
      ta.value = text
      ta.setAttribute('readonly', '')
      ta.style.position = 'fixed'
      ta.style.left = '-9999px'
      document.body.appendChild(ta)
      ta.select()
      try {
        document.execCommand('copy')
      } finally {
        document.body.removeChild(ta)
      }
    }
  }

  const handleExportDownload = (format) => {
    const text = format === 'md' ? buildExportMarkdown() : buildExportText()
    if (!text) return
    const mime =
      format === 'md' ? 'text/markdown;charset=utf-8' : 'text/plain;charset=utf-8'
    const ext = format === 'md' ? 'md' : 'txt'
    const blob = new Blob([text], { type: mime })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `ask-jerry-chat-${Date.now()}.${ext}`
    a.click()
    URL.revokeObjectURL(url)
    setExportOpen(false)
  }

  const handleShareCopyClipboard = async () => {
    const text = buildExportText()
    if (!text) return
    await copyToClipboard(text)
    setShareOpen(false)
  }

  const handleShareEmail = () => {
    const text = buildExportText()
    if (!text) return
    const subject = encodeURIComponent('Ask Jerry chat')
    const body = encodeURIComponent(text.length > 16000 ? `${text.slice(0, 16000)}\n\n… (truncated)` : text)
    const a = document.createElement('a')
    a.href = `mailto:?subject=${subject}&body=${body}`
    a.rel = 'noopener noreferrer'
    a.click()
    setShareOpen(false)
  }

  const handleShareLinkedIn = async () => {
    const text = buildExportText()
    if (!text) return
    await copyToClipboard(text)
    window.open('https://www.linkedin.com/feed/?shareActive=true', '_blank', 'noopener,noreferrer')
    setShareOpen(false)
  }

  const handleShareFacebook = async () => {
    const text = buildExportText()
    if (!text) return
    await copyToClipboard(text)
    const quote = encodeURIComponent(text.slice(0, 2000))
    const fb = `https://www.facebook.com/sharer/sharer.php?quote=${quote}`
    if (fb.length > 2048) {
      window.open('https://www.facebook.com/', '_blank', 'noopener,noreferrer')
    } else {
      window.open(fb, '_blank', 'noopener,noreferrer')
    }
    setShareOpen(false)
  }

  const inputBudget = CONTEXT_WINDOW - MAX_REPLY_TOKENS
  const currentTokens = estimateMessagesTokens(
    messages.map(({ role, content }) => ({ role, content })),
    buildSystemPrompt(),
    summary && messages.length > 4 ? summary : null,
  )
  const usagePct = Math.min(100, Math.round((currentTokens / inputBudget) * 100))
  return (
    <div className="aj-app">
      <header className="aj-header">
        <a
          className="aj-header-brand-link"
          href="https://www.neon.ai/"
          target="_blank"
          rel="noopener noreferrer"
          data-tip="Neon.ai"
        >
          <img src="/neon-logo.png" alt="Neon.ai" className="aj-header-logo" />
          <span className="aj-header-brand-name">Neon.ai</span>
        </a>
        <div className="aj-header-title-wrap">
          <h1 className="aj-header-title">Ask Jerry About Cyber Security</h1>
        </div>
        <div className="aj-options-wrap" ref={optionsRef}>
          {streaming && (
            <button
              type="button"
              className="aj-btn danger"
              onClick={handleStop}
              data-tip="Stop"
              aria-label="Stop"
            >
              <Square size={16} aria-hidden />
            </button>
          )}
          <button
            type="button"
            className="aj-btn"
            onClick={handleRefresh}
            disabled={streaming || messages.length === 0}
            data-tip="Refresh"
            aria-label="Refresh"
          >
            <RefreshCw size={16} aria-hidden />
          </button>
          <button
            type="button"
            className="aj-btn"
            onClick={handleNewChat}
            data-tip="New chat"
            aria-label="New chat"
          >
            <MessageSquarePlus size={16} aria-hidden />
          </button>
          <button
            type="button"
            className="aj-btn"
            onClick={() => setOptionsOpen((o) => !o)}
            aria-expanded={optionsOpen}
            aria-haspopup="dialog"
            aria-controls="aj-options-panel"
            data-tip="Options"
            aria-label="Options"
          >
            <Settings size={16} aria-hidden />
          </button>
          {optionsOpen &&
            createPortal(
              <div
                ref={optionsPanelRef}
                id="aj-options-panel"
                className="aj-options-panel"
                role="dialog"
                aria-label="Options"
                onMouseDown={(e) => e.stopPropagation()}
              >
                <div className="aj-options-section">
                  <h4 className="aj-options-section-title">Always speak</h4>
                  <label className="aj-field aj-field-checkbox">
                    <input
                      type="checkbox"
                      checked={alwaysSpeak}
                      onChange={(e) => setAlwaysSpeak(e.target.checked)}
                      disabled={streaming}
                    />
                    <span>Always speak responses</span>
                  </label>
                  <p className="aj-options-hint">
                    Read each assistant reply aloud automatically.
                  </p>
                </div>
                <div className="aj-options-section">
                  <h4 className="aj-options-section-title">Playback speed</h4>
                  <div className="aj-field" role="group" aria-label="Playback speed">
                    <div className="aj-speed-options">
                      {TTS_SPEED_OPTIONS.map(s => (
                        <button
                          key={s}
                          type="button"
                          className={`aj-speed-option${ttsSpeed === s ? ' aj-speed-option--active' : ''}`}
                          onClick={() => setTtsSpeed(s)}
                        >
                          {s}x
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
                <div className="aj-options-section">
                  <h4 className="aj-options-section-title">Persona</h4>
                  <label className="aj-field">
                    <span>Additional persona instructions</span>
                    <textarea
                      value={extraPersona}
                      onChange={(e) => setExtraPersona(e.target.value)}
                      placeholder="Optional — style, tone, domain focus… The assistant stays AI Jerry."
                      rows={10}
                      disabled={streaming}
                    />
                  </label>
                  <p className="aj-options-hint">
                    Merged into the system prompt for this session.
                  </p>
                </div>
              </div>,
              document.body,
            )}
        </div>
      </header>

      {voiceError && (
        <div className="aj-voice-error-banner" role="alert">
          <span>{voiceError}</span>
          <button type="button" className="aj-voice-error-dismiss" onClick={() => setVoiceError(null)} aria-label="Dismiss">
            ×
          </button>
        </div>
      )}

      {messages.length > 0 && (
        <div className="aj-context-bar">
          <div className="aj-context-meter">
            <div className="aj-context-fill" style={{ width: `${usagePct}%` }} data-hot={usagePct > 80 ? '' : undefined} />
          </div>
          <span className="aj-context-label">
            Context: ~{currentTokens.toLocaleString()} / {inputBudget.toLocaleString()} tokens ({usagePct}%)
            {summary && ' · chat history is being summarized'}
            {summarizing && ' · summarizing…'}
          </span>
        </div>
      )}

      <div className="aj-chat-wrap">
        <div className="aj-messages" ref={chatScrollRef}>
          {messages.length === 0 && !summary && (
            <p className="aj-sub" style={{ textAlign: 'center', marginTop: 24 }}>
              Message AI Jerry to begin.
            </p>
          )}
          {messages.length === 0 && summary && (
            <div className="aj-summary-banner">
              <p><strong>Continuing from a summary of your previous conversation.</strong></p>
              <p className="aj-summary-text">{summary}</p>
            </div>
          )}
          {(() => {
            const lastUserIdx = messages.reduce((acc, msg, idx) => msg.role === 'user' ? idx : acc, -1)
            return messages.map((m, i) => {
              const isUser = m.role === 'user'
              const rowRef =
                i === lastUserIdx
                  ? lastUserRowRef
                  : i === messages.length - 1 && m.role === 'assistant'
                    ? streamingAssistantRowRef
                    : undefined
              return (
                <div
                  key={i}
                  ref={rowRef}
                  className={`aj-msg-row ${isUser ? 'user' : ''}`}
                >
                <div className="aj-bubble-wrap">
                  <div className="aj-bubble-name">{isUser ? 'You' : 'AI Jerry'}</div>
                  <div className={`aj-bubble ${!isUser ? 'aj-bubble--assistant-md' : ''}`}>
                    {isUser ? (
                      m.content
                    ) : (
                      <>
                        {m.content ? <AssistantBubbleContent content={m.content} /> : null}
                        {streaming && i === messages.length - 1 && !m.content && (
                          <span className="aj-typing" />
                        )}
                      </>
                    )}
                  </div>
                  {!isUser && (
                    <AssistantSearchBar
                      content={m.content}
                      show={!(streaming && i === messages.length - 1)}
                      speak={{
                        loading: ttsLoadingIndex === i,
                        playing:
                          ttsPlayingIndex === i
                          && !ttsPaused
                          && ttsLoadingIndex !== i,
                        paused: ttsPlayingIndex === i && ttsPaused,
                        showStop: ttsLoadingIndex === i || ttsPlayingIndex === i,
                        disabled:
                          !(m.content || '').trim()
                          && ttsLoadingIndex !== i
                          && ttsPlayingIndex !== i,
                        onReadAloud: () => playTtsForIndex(i, m.content),
                        onPause: pauseTts,
                        onResume: resumeTts,
                        onReplay: replayTts,
                        onCycleSpeed: cycleTtsSpeed,
                        speed: ttsSpeed,
                        onStopReading: stopTts,
                      }}
                    />
                  )}
                </div>
                </div>
              )
            })
          })()}
        </div>

        {contextOverflow && (
          <div className="aj-overflow-banner">
            <div className="aj-overflow-icon"><AlertTriangle size={22} /></div>
            <div className="aj-overflow-body">
              <p className="aj-overflow-title">Context window exceeded</p>
              <p className="aj-overflow-detail">
                The conversation history is too long for this model's {CONTEXT_WINDOW.toLocaleString()}-token context window.
              </p>
              <div className="aj-overflow-actions">
                <button type="button" className="aj-btn" onClick={handleOverflowRetry}>
                  <RefreshCw size={14} aria-hidden />
                  Try again (shorter request)
                </button>
                <button type="button" className="aj-btn" onClick={handleOverflowClear}>
                  <Trash2 size={14} aria-hidden />
                  Clear chat &amp; start fresh
                </button>
                <button type="button" className="aj-btn primary" onClick={handleOverflowSummarize} disabled={summarizing}>
                  <MessageSquarePlus size={14} aria-hidden />
                  {summarizing ? 'Summarizing…' : 'New chat with summary'}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>

        <div className="aj-composer">
          <div className="aj-composer-inner">
            <div className={`aj-composer-field ${micListening ? 'aj-composer-field--listening' : ''}`}>
              <textarea
                ref={composerRef}
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onInput={(e) => {
                  const ne = e.nativeEvent
                  if (ne.inputType?.startsWith('insert') || (ne.data != null && ne.data !== '')) {
                    setHideTypingCursor(true)
                  }
                }}
                onKeyDown={onKeyDown}
                placeholder="Ask Jerry about cybersecurity…"
                rows={1}
                disabled={streaming || !!contextOverflow || micTranscribing}
              />
            </div>
            <button
              type="button"
              className="aj-btn"
              onClick={toggleMic}
              disabled={streaming || !!contextOverflow || micTranscribing}
              data-tip={micListening ? 'Stop recording' : micTranscribing ? 'Transcribing…' : 'Speak your message'}
              aria-label={micListening ? 'Stop recording' : 'Speak your message'}
            >
              {micTranscribing ? (
                <Loader2 size={18} className="aj-spin" aria-hidden />
              ) : (
                <Mic size={18} aria-hidden />
              )}
            </button>
            <button
              type="button"
              className="aj-btn primary"
              onClick={handleSend}
              disabled={streaming || !input.trim() || !!contextOverflow}
              data-tip="Send"
            >
              <Send size={18} aria-hidden />
            </button>
            <div className="aj-share-wrap" ref={exportRef}>
              <button
                type="button"
                className="aj-btn"
                onClick={() => {
                  setExportOpen((o) => !o)
                  setShareOpen(false)
                }}
                disabled={!messages.length || streaming}
                data-tip="Export chat"
                aria-expanded={exportOpen}
                aria-haspopup="menu"
                aria-controls="aj-export-panel"
              >
                <Download size={18} aria-hidden />
              </button>
              {exportOpen && (
                <div
                  id="aj-export-panel"
                  className="aj-share-panel"
                  role="menu"
                  aria-label="Export format"
                  onMouseDown={(e) => e.stopPropagation()}
                >
                  <button
                    type="button"
                    className="aj-share-item"
                    role="menuitem"
                    onClick={() => handleExportDownload('md')}
                  >
                    Markdown (.md)
                  </button>
                  <button
                    type="button"
                    className="aj-share-item"
                    role="menuitem"
                    onClick={() => handleExportDownload('txt')}
                  >
                    Plain text (.txt)
                  </button>
                </div>
              )}
            </div>
            <div className="aj-share-wrap" ref={shareRef}>
              <button
                type="button"
                className="aj-btn"
                onClick={() => {
                  setShareOpen((o) => !o)
                  setExportOpen(false)
                }}
                disabled={!messages.length || streaming}
                data-tip="Share chat"
                aria-expanded={shareOpen}
                aria-haspopup="menu"
                aria-controls="aj-share-panel"
              >
                <Share2 size={18} aria-hidden />
              </button>
              {shareOpen && (
                <div
                  id="aj-share-panel"
                  className="aj-share-panel"
                  role="menu"
                  aria-label="Share chat"
                  onMouseDown={(e) => e.stopPropagation()}
                >
                  <button
                    type="button"
                    className="aj-share-item"
                    role="menuitem"
                    onClick={handleShareLinkedIn}
                  >
                    LinkedIn
                  </button>
                  <button
                    type="button"
                    className="aj-share-item"
                    role="menuitem"
                    onClick={handleShareFacebook}
                  >
                    Facebook
                  </button>
                  <button
                    type="button"
                    className="aj-share-item"
                    role="menuitem"
                    onClick={handleShareEmail}
                  >
                    Email
                  </button>
                  <button
                    type="button"
                    className="aj-share-item"
                    role="menuitem"
                    onClick={handleShareCopyClipboard}
                  >
                    Copy to clipboard
                  </button>
                  <p className="aj-share-hint">
                    LinkedIn and Facebook copy the conversation to your clipboard, then open the site so you can paste into a post.
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>

        {showJumpToBottom && (
          <button
            type="button"
            className="aj-jump-bottom-btn"
            onClick={scrollToLatestQuestion}
            data-tip="Jump to latest question"
            aria-label="Jump to latest question"
          >
            <ChevronDown size={22} aria-hidden />
          </button>
        )}
    </div>
  )
}