From 456dcc56140637d9bdb5dc0a090b71ccac529786 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 30 Jul 2025 22:38:54 -0400
Subject: [PATCH 01/17] feat: add initial implementation of broadcasts

---
 src/api/lichess/broadcasts.ts                 | 295 +++++++++++
 src/api/lichess/index.ts                      |   1 +
 src/components/Analysis/BroadcastAnalysis.tsx | 469 ++++++++++++++++++
 src/components/Analysis/BroadcastGameList.tsx | 219 ++++++++
 src/components/Analysis/index.ts              |   2 +
 src/hooks/index.ts                            |   1 +
 src/hooks/useBroadcastController.ts           | 411 +++++++++++++++
 .../broadcast/[broadcastId]/[roundId].tsx     | 271 ++++++++++
 src/pages/broadcast/index.tsx                 | 290 +++++++++++
 src/types/broadcast/index.ts                  |  92 ++++
 src/types/index.ts                            |   1 +
 11 files changed, 2052 insertions(+)
 create mode 100644 src/api/lichess/broadcasts.ts
 create mode 100644 src/components/Analysis/BroadcastAnalysis.tsx
 create mode 100644 src/components/Analysis/BroadcastGameList.tsx
 create mode 100644 src/hooks/useBroadcastController.ts
 create mode 100644 src/pages/broadcast/[broadcastId]/[roundId].tsx
 create mode 100644 src/pages/broadcast/index.tsx
 create mode 100644 src/types/broadcast/index.ts

diff --git a/src/api/lichess/broadcasts.ts b/src/api/lichess/broadcasts.ts
new file mode 100644
index 00000000..daba0f46
--- /dev/null
+++ b/src/api/lichess/broadcasts.ts
@@ -0,0 +1,295 @@
+import { Broadcast, BroadcastGame, PGNParseResult } from 'src/types'
+
+const readStream = (processLine: (data: any) => void) => (response: any) => {
+  const stream = response.body.getReader()
+  const matcher = /\r?\n/
+  const decoder = new TextDecoder()
+  let buf = ''
+
+  const loop = () =>
+    stream.read().then(({ done, value }: { done: boolean; value: any }) => {
+      if (done) {
+        if (buf.length > 0) processLine(JSON.parse(buf))
+      } else {
+        const chunk = decoder.decode(value, {
+          stream: true,
+        })
+        buf += chunk
+
+        const parts = (buf || '').split(matcher)
+        buf = parts.pop() as string
+        for (const i of parts.filter((p) => p)) processLine(JSON.parse(i))
+
+        return loop()
+      }
+    })
+
+  return loop()
+}
+
+export const getLichessBroadcasts = async (): Promise<Broadcast[]> => {
+  const response = await fetch('https://lichess.org/api/broadcast', {
+    headers: {
+      Accept: 'application/x-ndjson',
+    },
+  })
+
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+  }
+
+  if (!response.body) {
+    throw new Error('No response body')
+  }
+
+  const broadcasts: Broadcast[] = []
+
+  return new Promise((resolve, reject) => {
+    const onMessage = (message: any) => {
+      try {
+        broadcasts.push(message as Broadcast)
+      } catch (error) {
+        console.error('Error parsing broadcast message:', error)
+      }
+    }
+
+    const onComplete = () => {
+      resolve(broadcasts)
+    }
+
+    readStream(onMessage)(response).then(onComplete).catch(reject)
+  })
+}
+
+export const streamBroadcastRound = async (
+  roundId: string,
+  onPGNUpdate: (pgn: string) => void,
+  onComplete: () => void,
+  abortSignal?: AbortSignal,
+) => {
+  const stream = fetch(
+    `https://lichess.org/api/stream/broadcast/round/${roundId}.pgn`,
+    {
+      signal: abortSignal,
+      headers: {
+        Accept: 'application/x-chess-pgn',
+      },
+    },
+  )
+
+  const onMessage = (data: string) => {
+    if (data.trim()) {
+      onPGNUpdate(data)
+    }
+  }
+
+  try {
+    const response = await stream
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+    }
+
+    if (!response.body) {
+      throw new Error('No response body')
+    }
+
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder()
+    let buffer = ''
+
+    while (true) {
+      const { done, value } = await reader.read()
+
+      if (done) {
+        if (buffer.trim()) {
+          onMessage(buffer)
+        }
+        break
+      }
+
+      const chunk = decoder.decode(value, { stream: true })
+      buffer += chunk
+
+      // Split on double newlines to separate PGN games
+      const parts = buffer.split('\n\n\n')
+      buffer = parts.pop() || ''
+
+      for (const part of parts) {
+        if (part.trim()) {
+          onMessage(part)
+        }
+      }
+    }
+
+    onComplete()
+  } catch (error) {
+    if (abortSignal?.aborted) {
+      console.log('Broadcast stream aborted')
+    } else {
+      console.error('Broadcast stream error:', error)
+      throw error
+    }
+  }
+}
+
+export const parsePGNData = (pgnData: string): PGNParseResult => {
+  const games: BroadcastGame[] = []
+  const errors: string[] = []
+
+  try {
+    // Split the PGN data into individual games
+    const gameStrings = pgnData
+      .split(/\n\n\[Event/)
+      .filter((game) => game.trim())
+
+    for (let i = 0; i < gameStrings.length; i++) {
+      let gameString = gameStrings[i]
+
+      // Add back the [Event header if it was removed by split
+      if (i > 0 && !gameString.startsWith('[Event')) {
+        gameString = '[Event' + gameString
+      }
+
+      try {
+        const game = parseSinglePGN(gameString)
+        if (game) {
+          games.push(game)
+        }
+      } catch (error) {
+        errors.push(`Error parsing game ${i + 1}: ${error}`)
+      }
+    }
+  } catch (error) {
+    errors.push(`Error splitting PGN data: ${error}`)
+  }
+
+  return { games, errors }
+}
+
+const parseSinglePGN = (pgnString: string): BroadcastGame | null => {
+  const lines = pgnString.trim().split('\n')
+  const headers: Record<string, string> = {}
+  let movesSection = ''
+  let inMoves = false
+
+  // Parse headers and moves
+  for (const line of lines) {
+    const trimmedLine = line.trim()
+
+    if (trimmedLine.startsWith('[') && trimmedLine.endsWith(']')) {
+      // Parse header
+      const match = trimmedLine.match(/^\[(\w+)\s+"([^"]*)"\]$/)
+      if (match) {
+        headers[match[1]] = match[2]
+      }
+    } else if (trimmedLine && !inMoves) {
+      inMoves = true
+      movesSection = trimmedLine
+    } else if (inMoves && trimmedLine) {
+      movesSection += ' ' + trimmedLine
+    }
+  }
+
+  // Extract essential data
+  const white = headers.White || 'Unknown'
+  const black = headers.Black || 'Unknown'
+  const result = headers.Result || '*'
+  const event = headers.Event || ''
+  const site = headers.Site || ''
+  const date = headers.Date || headers.UTCDate || ''
+  const round = headers.Round || ''
+
+  // Parse moves from moves section
+  const moves = parseMovesFromPGN(movesSection)
+  const fen = extractFENFromMoves(moves)
+
+  const game: BroadcastGame = {
+    id: generateGameId(white, black, event, site),
+    white,
+    black,
+    result,
+    moves,
+    pgn: pgnString,
+    fen: fen || 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',
+    event,
+    site,
+    date,
+    round,
+    eco: headers.ECO,
+    opening: headers.Opening,
+    whiteElo: headers.WhiteElo ? parseInt(headers.WhiteElo) : undefined,
+    blackElo: headers.BlackElo ? parseInt(headers.BlackElo) : undefined,
+    timeControl: headers.TimeControl,
+    termination: headers.Termination,
+    annotator: headers.Annotator,
+    studyName: headers.StudyName,
+    chapterName: headers.ChapterName,
+    utcDate: headers.UTCDate,
+    utcTime: headers.UTCTime,
+  }
+
+  // Extract last move if available
+  if (moves.length > 0) {
+    const lastMove = moves[moves.length - 1]
+    // This would need proper move parsing to convert SAN to UCI
+    // For now, we'll leave it undefined and handle in the controller
+  }
+
+  return game
+}
+
+const parseMovesFromPGN = (movesSection: string): string[] => {
+  const moves: string[] = []
+
+  // Remove comments, variations, and result
+  const cleanMoves = movesSection
+    .replace(/\{[^}]*\}/g, '') // Remove comments
+    .replace(/\([^)]*\)/g, '') // Remove variations
+    .replace(/\s*(1-0|0-1|1\/2-1\/2|\*)\s*$/, '') // Remove result
+    .trim()
+
+  // Split by move numbers and extract moves
+  const tokens = cleanMoves.split(/\s+/)
+
+  for (const token of tokens) {
+    // Skip move numbers (e.g., "1.", "2.", etc.)
+    if (/^\d+\.+$/.test(token)) {
+      continue
+    }
+
+    // Skip empty tokens
+    if (!token.trim()) {
+      continue
+    }
+
+    // Add valid moves
+    if (
+      /^[NBRQK]?[a-h]?[1-8]?x?[a-h][1-8](\=[NBRQ])?[\+\#]?$/.test(token) ||
+      token === 'O-O' ||
+      token === 'O-O-O'
+    ) {
+      moves.push(token)
+    }
+  }
+
+  return moves
+}
+
+const extractFENFromMoves = (moves: string[]): string | null => {
+  // This would require a full chess engine to calculate the FEN from moves
+  // For now, return null and handle in the controller with chess.js
+  return null
+}
+
+const generateGameId = (
+  white: string,
+  black: string,
+  event: string,
+  site: string,
+): string => {
+  const baseString = `${white}-${black}-${event}-${site}`
+  return btoa(baseString)
+    .replace(/[^a-zA-Z0-9]/g, '')
+    .substring(0, 12)
+}
diff --git a/src/api/lichess/index.ts b/src/api/lichess/index.ts
index 7f1dfdc3..024fed9a 100644
--- a/src/api/lichess/index.ts
+++ b/src/api/lichess/index.ts
@@ -1 +1,2 @@
 export * from './streaming'
+export * from './broadcasts'
diff --git a/src/components/Analysis/BroadcastAnalysis.tsx b/src/components/Analysis/BroadcastAnalysis.tsx
new file mode 100644
index 00000000..208fac4e
--- /dev/null
+++ b/src/components/Analysis/BroadcastAnalysis.tsx
@@ -0,0 +1,469 @@
+import React, {
+  useMemo,
+  useState,
+  useEffect,
+  useCallback,
+  useContext,
+} from 'react'
+import { motion } from 'framer-motion'
+import type { Key } from 'chessground/types'
+import { Chess, PieceSymbol } from 'chess.ts'
+import type { DrawShape } from 'chessground/draw'
+
+import { WindowSizeContext } from 'src/contexts'
+import { MAIA_MODELS } from 'src/constants/common'
+import { GameInfo } from 'src/components/Common/GameInfo'
+import { GameBoard } from 'src/components/Board/GameBoard'
+import { PlayerInfo } from 'src/components/Common/PlayerInfo'
+import { MovesContainer } from 'src/components/Board/MovesContainer'
+import { LiveGame, GameNode, BroadcastStreamController } from 'src/types'
+import { BoardController } from 'src/components/Board/BoardController'
+import { PromotionOverlay } from 'src/components/Board/PromotionOverlay'
+import { AnalysisSidebar } from 'src/components/Analysis'
+import { ConfigurableScreens } from 'src/components/Analysis/ConfigurableScreens'
+import { BroadcastGameList } from 'src/components/Analysis/BroadcastGameList'
+import { useAnalysisController } from 'src/hooks/useAnalysisController'
+
+interface Props {
+  game: LiveGame
+  broadcastController: BroadcastStreamController & {
+    currentLiveGame: LiveGame | null
+  }
+  analysisController: ReturnType<typeof useAnalysisController>
+}
+
+export const BroadcastAnalysis: React.FC<Props> = ({
+  game,
+  broadcastController,
+  analysisController,
+}) => {
+  const { width } = useContext(WindowSizeContext)
+  const isMobile = useMemo(() => width > 0 && width <= 670, [width])
+
+  const [hoverArrow, setHoverArrow] = useState<DrawShape | null>(null)
+  const [currentSquare, setCurrentSquare] = useState<Key | null>(null)
+  const [promotionFromTo, setPromotionFromTo] = useState<
+    [string, string] | null
+  >(null)
+
+  useEffect(() => {
+    setHoverArrow(null)
+  }, [analysisController.currentNode])
+
+  const hover = (move?: string) => {
+    if (move) {
+      setHoverArrow({
+        orig: move.slice(0, 2) as Key,
+        dest: move.slice(2, 4) as Key,
+        brush: 'green',
+        modifiers: {
+          lineWidth: 10,
+        },
+      })
+    } else {
+      setHoverArrow(null)
+    }
+  }
+
+  const makeMove = (move: string) => {
+    if (!analysisController.currentNode || !game.tree) return
+
+    const chess = new Chess(analysisController.currentNode.fen)
+    const moveAttempt = chess.move({
+      from: move.slice(0, 2),
+      to: move.slice(2, 4),
+      promotion: move[4] ? (move[4] as PieceSymbol) : undefined,
+    })
+
+    if (moveAttempt) {
+      const newFen = chess.fen()
+      const moveString =
+        moveAttempt.from +
+        moveAttempt.to +
+        (moveAttempt.promotion ? moveAttempt.promotion : '')
+      const san = moveAttempt.san
+
+      if (analysisController.currentNode.mainChild?.move === moveString) {
+        analysisController.goToNode(analysisController.currentNode.mainChild)
+      } else {
+        const newVariation = game.tree.addVariation(
+          analysisController.currentNode,
+          newFen,
+          moveString,
+          san,
+          analysisController.currentMaiaModel,
+        )
+        analysisController.goToNode(newVariation)
+      }
+    }
+  }
+
+  const onPlayerMakeMove = useCallback(
+    (playedMove: [string, string] | null) => {
+      if (!playedMove) return
+
+      const availableMoves: { from: string; to: string }[] = []
+      for (const [from, tos] of analysisController.availableMoves.entries()) {
+        for (const to of tos as string[]) {
+          availableMoves.push({ from, to })
+        }
+      }
+
+      const matching = availableMoves.filter((m) => {
+        return m.from === playedMove[0] && m.to === playedMove[1]
+      })
+
+      if (matching.length > 1) {
+        setPromotionFromTo(playedMove)
+        return
+      }
+
+      const moveUci = playedMove[0] + playedMove[1]
+      makeMove(moveUci)
+    },
+    [analysisController.availableMoves],
+  )
+
+  const onPlayerSelectPromotion = useCallback(
+    (piece: string) => {
+      if (!promotionFromTo) {
+        return
+      }
+      setPromotionFromTo(null)
+      const moveUci = promotionFromTo[0] + promotionFromTo[1] + piece
+      makeMove(moveUci)
+    },
+    [promotionFromTo, setPromotionFromTo],
+  )
+
+  const launchContinue = useCallback(() => {
+    const fen = analysisController.currentNode?.fen as string
+    const url = '/play' + '?fen=' + encodeURIComponent(fen)
+    window.open(url)
+  }, [analysisController.currentNode])
+
+  const currentPlayer = useMemo(() => {
+    if (!analysisController.currentNode) return 'white'
+    const chess = new Chess(analysisController.currentNode.fen)
+    return chess.turn() === 'w' ? 'white' : 'black'
+  }, [analysisController.currentNode])
+
+  const NestedGameInfo = () => (
+    <div className="flex w-full flex-col">
+      <div className="hidden md:block">
+        {[game.whitePlayer, game.blackPlayer].map((player, index) => (
+          <div key={index} className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <div
+                className={`h-2 w-2 rounded-full ${index === 0 ? 'bg-white' : 'border-[0.5px] bg-black'}`}
+              />
+              <p className="text-sm">{player.name}</p>
+              <span className="text-xs">
+                {player.rating ? <>({player.rating})</> : null}
+              </span>
+            </div>
+            {game.termination?.winner === (index == 0 ? 'white' : 'black') ? (
+              <p className="text-xs text-engine-3">1</p>
+            ) : game.termination?.winner !== 'none' ? (
+              <p className="text-xs text-human-3">0</p>
+            ) : game.termination === undefined ? (
+              <></>
+            ) : (
+              <p className="text-xs text-secondary">½</p>
+            )}
+          </div>
+        ))}
+        <div className="mt-1 flex items-center justify-center gap-1">
+          <span className="text-xxs text-secondary">
+            {broadcastController.currentBroadcast?.tour.name}
+            {broadcastController.currentRound && (
+              <> • {broadcastController.currentRound.name}</>
+            )}
+          </span>
+        </div>
+      </div>
+      <div className="flex w-full items-center justify-between text-xs md:hidden">
+        <div className="flex items-center gap-1">
+          <div className="h-2 w-2 rounded-full bg-white" />
+          <span className="font-medium">{game.whitePlayer.name}</span>
+          {game.whitePlayer.rating && (
+            <span className="text-primary/60">({game.whitePlayer.rating})</span>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          {broadcastController.broadcastState.isLive && !game.termination ? (
+            <span className="font-medium text-red-400">LIVE</span>
+          ) : game.termination?.winner === 'none' ? (
+            <span className="font-medium text-primary/80">½-½</span>
+          ) : (
+            <span className="font-medium">
+              <span className="text-primary/70">
+                {game.termination?.winner === 'white' ? '1' : '0'}
+              </span>
+              <span className="text-primary/70">-</span>
+              <span className="text-primary/70">
+                {game.termination?.winner === 'black' ? '1' : '0'}
+              </span>
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          <div className="h-2 w-2 rounded-full border-[0.5px] bg-black" />
+          <span className="font-medium">{game.blackPlayer.name}</span>
+          {game.blackPlayer.rating && (
+            <span className="text-primary/60">({game.blackPlayer.rating})</span>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        duration: 0.2,
+        staggerChildren: 0.05,
+      },
+    },
+  }
+
+  const itemVariants = {
+    hidden: {
+      opacity: 0,
+      y: 4,
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.25,
+        ease: [0.25, 0.46, 0.45, 0.94],
+        type: 'tween',
+      },
+    },
+    exit: {
+      opacity: 0,
+      y: -4,
+      transition: {
+        duration: 0.2,
+        ease: [0.25, 0.46, 0.45, 0.94],
+        type: 'tween',
+      },
+    },
+  }
+
+  const desktopLayout = (
+    <motion.div
+      className="flex h-full w-full flex-col items-center py-4"
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      style={{ willChange: 'transform, opacity' }}
+    >
+      <div className="flex h-full w-[90%] flex-row gap-2">
+        <motion.div
+          id="navigation"
+          className="desktop-left-column-container flex flex-col gap-2 overflow-hidden"
+          variants={itemVariants}
+          style={{ willChange: 'transform, opacity' }}
+        >
+          <GameInfo
+            title="Broadcast"
+            icon="live_tv"
+            type="analysis"
+            streamState={broadcastController.broadcastState}
+          >
+            <NestedGameInfo />
+          </GameInfo>
+          <div className="flex h-1/2 w-full flex-1 flex-col gap-2">
+            <div className="flex h-full flex-col overflow-y-scroll">
+              <BroadcastGameList broadcastController={broadcastController} />
+            </div>
+          </div>
+        </motion.div>
+        <motion.div
+          className="desktop-middle-column-container flex flex-col gap-2"
+          variants={itemVariants}
+          style={{ willChange: 'transform, opacity' }}
+        >
+          <div className="flex w-full flex-col overflow-hidden rounded">
+            <PlayerInfo
+              name={
+                analysisController.orientation === 'white'
+                  ? game.blackPlayer.name
+                  : game.whitePlayer.name
+              }
+              rating={
+                analysisController.orientation === 'white'
+                  ? game.blackPlayer.rating
+                  : game.whitePlayer.rating
+              }
+              color={
+                analysisController.orientation === 'white' ? 'black' : 'white'
+              }
+              termination={game.termination?.winner}
+            />
+            <div className="desktop-board-container relative flex aspect-square">
+              <GameBoard
+                game={game}
+                availableMoves={analysisController.availableMoves}
+                setCurrentSquare={setCurrentSquare}
+                shapes={(() => {
+                  const baseShapes = [...analysisController.arrows]
+                  if (hoverArrow) {
+                    baseShapes.push(hoverArrow)
+                  }
+                  return baseShapes
+                })()}
+                currentNode={analysisController.currentNode as GameNode}
+                orientation={analysisController.orientation}
+                onPlayerMakeMove={onPlayerMakeMove}
+                goToNode={analysisController.goToNode}
+                gameTree={game.tree}
+              />
+              {promotionFromTo ? (
+                <PromotionOverlay
+                  player={currentPlayer}
+                  file={promotionFromTo[1].slice(0, 1)}
+                  onPlayerSelectPromotion={onPlayerSelectPromotion}
+                />
+              ) : null}
+            </div>
+            <PlayerInfo
+              name={
+                analysisController.orientation === 'white'
+                  ? game.whitePlayer.name
+                  : game.blackPlayer.name
+              }
+              rating={
+                analysisController.orientation === 'white'
+                  ? game.whitePlayer.rating
+                  : game.blackPlayer.rating
+              }
+              color={
+                analysisController.orientation === 'white' ? 'white' : 'black'
+              }
+              termination={game.termination?.winner}
+              showArrowLegend={true}
+            />
+          </div>
+          <ConfigurableScreens
+            currentMaiaModel={analysisController.currentMaiaModel}
+            setCurrentMaiaModel={analysisController.setCurrentMaiaModel}
+            launchContinue={launchContinue}
+            MAIA_MODELS={MAIA_MODELS}
+            game={game}
+            currentNode={analysisController.currentNode as GameNode}
+          />
+        </motion.div>
+        <AnalysisSidebar
+          hover={hover}
+          makeMove={makeMove}
+          controller={analysisController}
+          setHoverArrow={setHoverArrow}
+          analysisEnabled={true}
+          handleToggleAnalysis={() => {
+            // Analysis toggle not needed for broadcast - always enabled
+          }}
+          itemVariants={itemVariants}
+        />
+      </div>
+    </motion.div>
+  )
+
+  const mobileLayout = (
+    <motion.div
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      style={{ willChange: 'transform, opacity' }}
+    >
+      <div className="flex h-full flex-1 flex-col justify-center gap-1">
+        <motion.div
+          className="flex w-full flex-col items-start justify-start gap-1"
+          variants={itemVariants}
+          style={{ willChange: 'transform, opacity' }}
+        >
+          <GameInfo
+            title="Broadcast"
+            icon="live_tv"
+            type="analysis"
+            currentMaiaModel={analysisController.currentMaiaModel}
+            setCurrentMaiaModel={analysisController.setCurrentMaiaModel}
+            MAIA_MODELS={MAIA_MODELS}
+            streamState={broadcastController.broadcastState}
+          >
+            <NestedGameInfo />
+          </GameInfo>
+          <div id="analysis" className="relative flex h-[100vw] w-screen">
+            <GameBoard
+              game={game}
+              availableMoves={analysisController.availableMoves}
+              setCurrentSquare={setCurrentSquare}
+              shapes={(() => {
+                const baseShapes = [...analysisController.arrows]
+                if (hoverArrow) {
+                  baseShapes.push(hoverArrow)
+                }
+                return baseShapes
+              })()}
+              currentNode={analysisController.currentNode as GameNode}
+              orientation={analysisController.orientation}
+              onPlayerMakeMove={onPlayerMakeMove}
+              goToNode={analysisController.goToNode}
+              gameTree={game.tree}
+            />
+            {promotionFromTo ? (
+              <PromotionOverlay
+                player={currentPlayer}
+                file={promotionFromTo[1].slice(0, 1)}
+                onPlayerSelectPromotion={onPlayerSelectPromotion}
+              />
+            ) : null}
+          </div>
+          <div className="flex w-full flex-col gap-0">
+            <div className="w-full !flex-grow-0">
+              <BoardController
+                gameTree={analysisController.gameTree}
+                orientation={analysisController.orientation}
+                setOrientation={analysisController.setOrientation}
+                currentNode={analysisController.currentNode}
+                plyCount={analysisController.plyCount}
+                goToNode={analysisController.goToNode}
+                goToNextNode={analysisController.goToNextNode}
+                goToPreviousNode={analysisController.goToPreviousNode}
+                goToRootNode={analysisController.goToRootNode}
+                disableKeyboardNavigation={false}
+                disableNavigation={false}
+              />
+            </div>
+            <div className="relative bottom-0 h-48 max-h-48 flex-1 overflow-auto overflow-y-hidden">
+              <MovesContainer
+                game={game}
+                termination={game.termination}
+                type="analysis"
+                showAnnotations={true}
+                disableKeyboardNavigation={false}
+                disableMoveClicking={false}
+              />
+            </div>
+          </div>
+          <ConfigurableScreens
+            currentMaiaModel={analysisController.currentMaiaModel}
+            setCurrentMaiaModel={analysisController.setCurrentMaiaModel}
+            launchContinue={launchContinue}
+            MAIA_MODELS={MAIA_MODELS}
+            game={game}
+            currentNode={analysisController.currentNode as GameNode}
+          />
+        </motion.div>
+      </div>
+    </motion.div>
+  )
+
+  return <div>{isMobile ? mobileLayout : desktopLayout}</div>
+}
diff --git a/src/components/Analysis/BroadcastGameList.tsx b/src/components/Analysis/BroadcastGameList.tsx
new file mode 100644
index 00000000..8101de4d
--- /dev/null
+++ b/src/components/Analysis/BroadcastGameList.tsx
@@ -0,0 +1,219 @@
+import React, { useState, useMemo } from 'react'
+import { motion } from 'framer-motion'
+import { BroadcastStreamController, BroadcastGame } from 'src/types'
+
+interface BroadcastGameListProps {
+  broadcastController: BroadcastStreamController
+  onGameSelected?: () => void
+}
+
+export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
+  broadcastController,
+  onGameSelected,
+}) => {
+  const [selectedRoundId, setSelectedRoundId] = useState<string>(
+    broadcastController.currentRound?.id || '',
+  )
+
+  const handleRoundChange = (roundId: string) => {
+    setSelectedRoundId(roundId)
+    broadcastController.selectRound(roundId)
+  }
+
+  const handleGameSelect = (game: BroadcastGame) => {
+    broadcastController.selectGame(game.id)
+    onGameSelected?.()
+  }
+
+  const currentGames = useMemo(() => {
+    if (!broadcastController.roundData?.games) return []
+    return Array.from(broadcastController.roundData.games.values())
+  }, [broadcastController.roundData?.games])
+
+  const getGameStatus = (game: BroadcastGame) => {
+    if (game.result === '*') {
+      return { status: 'Live', color: 'text-red-400' }
+    } else if (game.result === '1-0') {
+      return { status: '1-0', color: 'text-primary' }
+    } else if (game.result === '0-1') {
+      return { status: '0-1', color: 'text-primary' }
+    } else if (game.result === '1/2-1/2') {
+      return { status: '½-½', color: 'text-primary' }
+    }
+    return { status: game.result, color: 'text-secondary' }
+  }
+
+  const formatPlayerName = (name: string, elo?: number) => {
+    const displayName = name.length > 12 ? name.substring(0, 12) + '...' : name
+    return elo ? `${displayName} (${elo})` : displayName
+  }
+
+  return (
+    <div className="flex h-full flex-col items-start justify-start overflow-hidden bg-background-1 md:rounded">
+      <div className="w-full border-b-2 border-white border-opacity-10 p-3">
+        <div className="mb-3">
+          <h3 className="text-sm font-semibold text-primary">
+            {broadcastController.currentBroadcast?.tour.name ||
+              'Live Broadcast'}
+          </h3>
+          {broadcastController.broadcastState.isLive && (
+            <div className="mt-1 flex items-center gap-1">
+              <div className="h-2 w-2 animate-pulse rounded-full bg-red-500"></div>
+              <span className="text-xs font-medium text-red-400">LIVE</span>
+            </div>
+          )}
+        </div>
+
+        {/* Round Selector */}
+        {broadcastController.currentBroadcast && (
+          <div className="mb-3">
+            <label
+              htmlFor="round-selector"
+              className="mb-1 block text-xs text-secondary"
+            >
+              Round
+            </label>
+            <select
+              id="round-selector"
+              value={selectedRoundId}
+              onChange={(e) => handleRoundChange(e.target.value)}
+              className="w-full rounded bg-background-2 px-2 py-1 text-xs text-primary focus:outline-none focus:ring-1 focus:ring-human-4"
+            >
+              {broadcastController.currentBroadcast.rounds.map((round) => (
+                <option key={round.id} value={round.id}>
+                  {round.name} {round.ongoing ? '(Live)' : ''}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {/* Connection Status */}
+        {broadcastController.broadcastState.error && (
+          <div className="mb-2 rounded bg-red-500/20 p-2 text-xs text-red-400">
+            <div className="flex items-center justify-between">
+              <span>Connection Error</span>
+              <button
+                onClick={broadcastController.reconnect}
+                className="text-xs underline hover:no-underline"
+              >
+                Retry
+              </button>
+            </div>
+          </div>
+        )}
+
+        {broadcastController.broadcastState.isConnecting && (
+          <div className="mb-2 rounded bg-background-2 p-2 text-xs text-secondary">
+            <div className="flex items-center gap-2">
+              <div className="h-3 w-3 animate-spin rounded-full border-b border-white"></div>
+              <span>Connecting...</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="red-scrollbar flex h-full flex-col overflow-y-scroll">
+        {currentGames.length === 0 ? (
+          <div className="flex flex-1 items-center justify-center py-8 text-center">
+            <div>
+              <span className="material-symbols-outlined mb-2 !text-4xl text-secondary">
+                live_tv
+              </span>
+              <p className="text-xs text-secondary">
+                {broadcastController.broadcastState.isConnecting
+                  ? 'Loading games...'
+                  : 'No games available'}
+              </p>
+            </div>
+          </div>
+        ) : (
+          <>
+            {currentGames.map((game, index) => {
+              const isSelected = broadcastController.currentGame?.id === game.id
+              const gameStatus = getGameStatus(game)
+
+              return (
+                <div
+                  key={game.id}
+                  className={`group flex w-full items-center ${
+                    isSelected
+                      ? 'bg-background-2 font-bold'
+                      : index % 2 === 0
+                        ? 'bg-background-1/30 hover:bg-background-2'
+                        : 'bg-background-1/10 hover:bg-background-2'
+                  }`}
+                >
+                  <div
+                    className={`flex h-full w-9 items-center justify-center ${
+                      isSelected
+                        ? 'bg-background-3'
+                        : 'bg-background-2 group-hover:bg-white/5'
+                    }`}
+                  >
+                    <p className="text-sm text-secondary">{index + 1}</p>
+                  </div>
+                  <button
+                    onClick={() => handleGameSelect(game)}
+                    className="flex flex-1 cursor-pointer flex-col items-start justify-center overflow-hidden px-2 py-2"
+                  >
+                    <div className="flex w-full items-center justify-between">
+                      <div className="flex flex-col items-start overflow-hidden">
+                        <div className="flex items-center gap-1">
+                          <div className="h-2 w-2 rounded-full bg-white" />
+                          <span className="overflow-hidden text-ellipsis whitespace-nowrap text-xs text-primary">
+                            {formatPlayerName(game.white, game.whiteElo)}
+                          </span>
+                        </div>
+                        <div className="mt-0.5 flex items-center gap-1">
+                          <div className="h-2 w-2 rounded-full border-[0.5px] bg-black" />
+                          <span className="overflow-hidden text-ellipsis whitespace-nowrap text-xs text-primary">
+                            {formatPlayerName(game.black, game.blackElo)}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span
+                          className={`text-xs font-medium ${gameStatus.color}`}
+                        >
+                          {gameStatus.status}
+                        </span>
+                        {game.result === '*' && (
+                          <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-red-500"></div>
+                        )}
+                      </div>
+                    </div>
+                    {(game.opening || game.eco) && (
+                      <div className="mt-1 w-full text-left">
+                        <span className="text-xs text-secondary">
+                          {game.eco} {game.opening}
+                        </span>
+                      </div>
+                    )}
+                  </button>
+                </div>
+              )
+            })}
+          </>
+        )}
+      </div>
+
+      {/* Footer with broadcast info */}
+      <div className="w-full border-t border-white border-opacity-10 p-2">
+        <div className="text-center text-xs text-secondary">
+          <p>
+            Watch on{' '}
+            <a
+              href={broadcastController.currentBroadcast?.tour.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary/60 underline hover:text-primary"
+            >
+              Lichess
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Analysis/index.ts b/src/components/Analysis/index.ts
index fc650a15..6a548c15 100644
--- a/src/components/Analysis/index.ts
+++ b/src/components/Analysis/index.ts
@@ -13,3 +13,5 @@ export * from './AnalysisOverlay'
 export * from './InteractiveDescription'
 export * from './AnalysisSidebar'
 export * from './LearnFromMistakes'
+export * from './BroadcastGameList'
+export * from './BroadcastAnalysis'
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 11ac3dbb..ed96c7cb 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,5 +1,6 @@
 export * from './useAnalysisController'
 export * from './useBaseTreeController'
+export * from './useBroadcastController'
 export * from './useChessSound'
 export * from './useLocalStorage'
 export * from './useOpeningDrillController'
diff --git a/src/hooks/useBroadcastController.ts b/src/hooks/useBroadcastController.ts
new file mode 100644
index 00000000..d580fb99
--- /dev/null
+++ b/src/hooks/useBroadcastController.ts
@@ -0,0 +1,411 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+import { Chess } from 'chess.ts'
+import { GameTree } from 'src/types/base/tree'
+import { AvailableMoves } from 'src/types/training'
+import {
+  Broadcast,
+  BroadcastRound,
+  BroadcastGame,
+  BroadcastRoundData,
+  BroadcastState,
+  BroadcastStreamController,
+  LiveGame,
+} from 'src/types'
+import {
+  getLichessBroadcasts,
+  streamBroadcastRound,
+  parsePGNData,
+} from 'src/api/lichess/broadcasts'
+
+export const useBroadcastController = (): BroadcastStreamController => {
+  const [broadcasts, setBroadcasts] = useState<Broadcast[]>([])
+  const [currentBroadcast, setCurrentBroadcast] = useState<Broadcast | null>(
+    null,
+  )
+  const [currentRound, setCurrentRound] = useState<BroadcastRound | null>(null)
+  const [currentGame, setCurrentGame] = useState<BroadcastGame | null>(null)
+  const [roundData, setRoundData] = useState<BroadcastRoundData | null>(null)
+  const [broadcastState, setBroadcastState] = useState<BroadcastState>({
+    isConnected: false,
+    isConnecting: false,
+    isLive: false,
+    error: null,
+    roundStarted: false,
+    roundEnded: false,
+    gameEnded: false,
+  })
+
+  const abortController = useRef<AbortController | null>(null)
+  const currentRoundId = useRef<string | null>(null)
+  const gameStates = useRef<Map<string, LiveGame>>(new Map())
+  const lastPGNData = useRef<string>('')
+
+  const loadBroadcasts = useCallback(async () => {
+    try {
+      setBroadcastState((prev) => ({
+        ...prev,
+        isConnecting: true,
+        error: null,
+      }))
+      const broadcastList = await getLichessBroadcasts()
+      setBroadcasts(broadcastList)
+      setBroadcastState((prev) => ({ ...prev, isConnecting: false }))
+    } catch (error) {
+      console.error('Error loading broadcasts:', error)
+      setBroadcastState((prev) => ({
+        ...prev,
+        isConnecting: false,
+        error:
+          error instanceof Error ? error.message : 'Failed to load broadcasts',
+      }))
+    }
+  }, [])
+
+  const selectBroadcast = useCallback(
+    (broadcastId: string) => {
+      const broadcast = broadcasts.find((b) => b.tour.id === broadcastId)
+      if (broadcast) {
+        setCurrentBroadcast(broadcast)
+        // Auto-select default round if available
+        const defaultRound =
+          broadcast.rounds.find((r) => r.id === broadcast.defaultRoundId) ||
+          broadcast.rounds.find((r) => r.ongoing) ||
+          broadcast.rounds[0]
+        if (defaultRound) {
+          setCurrentRound(defaultRound)
+        }
+      }
+    },
+    [broadcasts],
+  )
+
+  const selectRound = useCallback(
+    (roundId: string) => {
+      if (currentBroadcast) {
+        const round = currentBroadcast.rounds.find((r) => r.id === roundId)
+        if (round) {
+          setCurrentRound(round)
+          // Stop current stream if different round
+          if (currentRoundId.current !== roundId) {
+            stopRoundStream()
+          }
+        }
+      }
+    },
+    [currentBroadcast],
+  )
+
+  const selectGame = useCallback(
+    (gameId: string) => {
+      if (roundData) {
+        const game = roundData.games.get(gameId)
+        if (game) {
+          setCurrentGame(game)
+        }
+      }
+    },
+    [roundData],
+  )
+
+  const stopRoundStream = useCallback(() => {
+    if (abortController.current) {
+      abortController.current.abort()
+      abortController.current = null
+    }
+
+    setBroadcastState({
+      isConnected: false,
+      isConnecting: false,
+      isLive: false,
+      error: null,
+      roundStarted: false,
+      roundEnded: false,
+      gameEnded: false,
+    })
+
+    currentRoundId.current = null
+    gameStates.current.clear()
+    lastPGNData.current = ''
+  }, [])
+
+  const createLiveGameFromBroadcastGame = useCallback(
+    (broadcastGame: BroadcastGame): LiveGame => {
+      const startingFen =
+        'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'
+
+      // Build game tree from moves
+      const tree = new GameTree(startingFen)
+      const chess = new Chess(startingFen)
+      let currentNode = tree.getRoot()
+
+      const gameStates = [
+        {
+          board: startingFen,
+          lastMove: undefined as [string, string] | undefined,
+          san: undefined as string | undefined,
+          check: false,
+          maia_values: {},
+        },
+      ]
+
+      // Process each move
+      for (const moveStr of broadcastGame.moves) {
+        try {
+          const move = chess.move(moveStr)
+          if (move) {
+            const newFen = chess.fen()
+            const uci =
+              move.from + move.to + (move.promotion ? move.promotion : '')
+
+            gameStates.push({
+              board: newFen,
+              lastMove: [move.from, move.to],
+              san: move.san,
+              check: chess.inCheck(),
+              maia_values: {},
+            })
+
+            currentNode = tree.addMainMove(currentNode, newFen, uci, move.san)
+          }
+        } catch (error) {
+          console.warn(`Error processing move ${moveStr}:`, error)
+          break
+        }
+      }
+
+      return {
+        id: broadcastGame.id,
+        blackPlayer: {
+          name: broadcastGame.black,
+          rating: broadcastGame.blackElo,
+        },
+        whitePlayer: {
+          name: broadcastGame.white,
+          rating: broadcastGame.whiteElo,
+        },
+        gameType: 'broadcast',
+        type: 'stream' as const,
+        moves: gameStates,
+        availableMoves: new Array(gameStates.length).fill(
+          {},
+        ) as AvailableMoves[],
+        termination:
+          broadcastGame.result === '*'
+            ? undefined
+            : {
+                result: broadcastGame.result,
+                winner:
+                  broadcastGame.result === '1-0'
+                    ? 'white'
+                    : broadcastGame.result === '0-1'
+                      ? 'black'
+                      : 'none',
+              },
+        maiaEvaluations: [],
+        stockfishEvaluations: [],
+        loadedFen: broadcastGame.fen,
+        loaded: true,
+        tree,
+      } as LiveGame
+    },
+    [],
+  )
+
+  const handlePGNUpdate = useCallback(
+    (pgnData: string) => {
+      // Skip if it's the same data we already processed
+      if (pgnData === lastPGNData.current) {
+        return
+      }
+
+      lastPGNData.current = pgnData
+
+      const parseResult = parsePGNData(pgnData)
+
+      if (parseResult.errors.length > 0) {
+        console.warn('PGN parsing errors:', parseResult.errors)
+      }
+
+      if (parseResult.games.length === 0) {
+        return
+      }
+
+      // Update round data
+      const newGames = new Map<string, BroadcastGame>()
+      const updatedGameStates = new Map<string, LiveGame>()
+      let hasNewMoves = false
+
+      for (const game of parseResult.games) {
+        newGames.set(game.id, game)
+
+        // Check if this game has new moves compared to our stored state
+        const existingGameState = gameStates.current.get(game.id)
+        const newLiveGame = createLiveGameFromBroadcastGame(game)
+
+        if (
+          !existingGameState ||
+          existingGameState.moves.length !== newLiveGame.moves.length
+        ) {
+          hasNewMoves = true
+
+          // Play sound for new moves if game was already loaded
+          if (
+            existingGameState &&
+            newLiveGame.moves.length > existingGameState.moves.length
+          ) {
+            try {
+              const audio = new Audio('/assets/sound/move.mp3')
+              audio
+                .play()
+                .catch((e) => console.log('Could not play move sound:', e))
+            } catch (e) {}
+          }
+        }
+
+        updatedGameStates.set(game.id, newLiveGame)
+      }
+
+      gameStates.current = updatedGameStates
+
+      setRoundData((prev) => {
+        const newRoundData: BroadcastRoundData = {
+          roundId: currentRoundId.current || '',
+          broadcastId: currentBroadcast?.tour.id || '',
+          games: newGames,
+          lastUpdate: Date.now(),
+        }
+        return newRoundData
+      })
+
+      // Update current game if it exists in the new data
+      if (currentGame) {
+        const updatedCurrentGame = newGames.get(currentGame.id)
+        if (updatedCurrentGame) {
+          setCurrentGame(updatedCurrentGame)
+        }
+      } else if (parseResult.games.length > 0) {
+        // Auto-select first game if none selected
+        setCurrentGame(parseResult.games[0])
+      }
+
+      // Update broadcast state
+      setBroadcastState((prev) => ({
+        ...prev,
+        isConnected: true,
+        isConnecting: false,
+        isLive: true,
+        roundStarted: true,
+        error: null,
+      }))
+    },
+    [currentBroadcast, currentGame, createLiveGameFromBroadcastGame],
+  )
+
+  const handleStreamComplete = useCallback(() => {
+    setBroadcastState((prev) => ({
+      ...prev,
+      isConnected: false,
+      isLive: false,
+      roundEnded: true,
+      gameEnded: true,
+    }))
+  }, [])
+
+  const startRoundStream = useCallback(
+    async (roundId: string) => {
+      if (abortController.current) {
+        abortController.current.abort()
+      }
+
+      abortController.current = new AbortController()
+      currentRoundId.current = roundId
+
+      setBroadcastState((prev) => ({
+        ...prev,
+        isConnecting: true,
+        error: null,
+      }))
+
+      try {
+        await streamBroadcastRound(
+          roundId,
+          handlePGNUpdate,
+          handleStreamComplete,
+          abortController.current.signal,
+        )
+      } catch (error) {
+        console.error('Round stream error:', error)
+
+        const errorMessage =
+          error instanceof Error ? error.message : 'Unknown streaming error'
+
+        setBroadcastState({
+          isConnected: false,
+          isConnecting: false,
+          isLive: false,
+          error: errorMessage,
+          roundStarted: false,
+          roundEnded: false,
+          gameEnded: false,
+        })
+
+        abortController.current = null
+      }
+    },
+    [handlePGNUpdate, handleStreamComplete],
+  )
+
+  const reconnect = useCallback(() => {
+    if (currentRoundId.current) {
+      startRoundStream(currentRoundId.current)
+    }
+  }, [startRoundStream])
+
+  // Auto-start stream when round is selected and ongoing
+  useEffect(() => {
+    if (
+      currentRound?.ongoing &&
+      !broadcastState.isConnecting &&
+      !broadcastState.isConnected
+    ) {
+      startRoundStream(currentRound.id)
+    }
+  }, [
+    currentRound,
+    broadcastState.isConnecting,
+    broadcastState.isConnected,
+    startRoundStream,
+  ])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      stopRoundStream()
+    }
+  }, [stopRoundStream])
+
+  // Get current live game state for the selected game
+  const currentLiveGame = useMemo(() => {
+    if (currentGame && gameStates.current.has(currentGame.id)) {
+      return gameStates.current.get(currentGame.id) || null
+    }
+    return null
+  }, [currentGame, roundData?.lastUpdate])
+
+  return {
+    broadcasts,
+    currentBroadcast,
+    currentRound,
+    currentGame,
+    roundData,
+    broadcastState,
+    loadBroadcasts,
+    selectBroadcast,
+    selectRound,
+    selectGame,
+    startRoundStream,
+    stopRoundStream,
+    reconnect,
+    currentLiveGame,
+  } as BroadcastStreamController & { currentLiveGame: LiveGame | null }
+}
diff --git a/src/pages/broadcast/[broadcastId]/[roundId].tsx b/src/pages/broadcast/[broadcastId]/[roundId].tsx
new file mode 100644
index 00000000..ac99cc4d
--- /dev/null
+++ b/src/pages/broadcast/[broadcastId]/[roundId].tsx
@@ -0,0 +1,271 @@
+import React, { useEffect, useState, useMemo, useRef } from 'react'
+import { NextPage } from 'next'
+import { useRouter } from 'next/router'
+import Head from 'next/head'
+import { AnimatePresence } from 'framer-motion'
+
+import { DelayedLoading } from 'src/components'
+import { AuthenticatedWrapper } from 'src/components/Common/AuthenticatedWrapper'
+import { DownloadModelModal } from 'src/components/Common/DownloadModelModal'
+import { useBroadcastController } from 'src/hooks/useBroadcastController'
+import { useAnalysisController } from 'src/hooks'
+import { TreeControllerContext } from 'src/contexts'
+import { BroadcastAnalysis } from 'src/components/Analysis/BroadcastAnalysis'
+import { AnalyzedGame, BroadcastStreamController, LiveGame } from 'src/types'
+import { GameTree } from 'src/types/base/tree'
+
+const BroadcastAnalysisPage: NextPage = () => {
+  const router = useRouter()
+  const { broadcastId, roundId } = router.query as {
+    broadcastId: string
+    roundId: string
+  }
+
+  const broadcastController = useBroadcastController()
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const initializeBroadcast = async () => {
+      if (!broadcastId || !roundId) return
+
+      try {
+        setLoading(true)
+        setError(null)
+
+        // Load broadcasts if not already loaded
+        if (broadcastController.broadcasts.length === 0) {
+          await broadcastController.loadBroadcasts()
+        }
+
+        // Find and select the broadcast
+        const broadcast = broadcastController.broadcasts.find(
+          (b) => b.tour.id === broadcastId,
+        )
+
+        if (!broadcast) {
+          throw new Error('Broadcast not found')
+        }
+
+        // Find the round
+        const round = broadcast.rounds.find((r) => r.id === roundId)
+        if (!round) {
+          throw new Error('Round not found')
+        }
+
+        // Select broadcast and round
+        broadcastController.selectBroadcast(broadcastId)
+        broadcastController.selectRound(roundId)
+
+        setLoading(false)
+      } catch (err) {
+        console.error('Error initializing broadcast:', err)
+        setError(
+          err instanceof Error ? err.message : 'Failed to load broadcast',
+        )
+        setLoading(false)
+      }
+    }
+
+    initializeBroadcast()
+  }, [broadcastId, roundId, broadcastController.broadcasts.length])
+
+  // Create a dummy game for analysis controller when no game is selected
+  const dummyGame: AnalyzedGame = useMemo(() => {
+    const startingFen =
+      'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'
+    const dummyTree = new GameTree(startingFen)
+
+    return {
+      id: '',
+      blackPlayer: { name: 'Black' },
+      whitePlayer: { name: 'White' },
+      moves: [
+        {
+          board: startingFen,
+          lastMove: undefined,
+          san: undefined,
+          check: false,
+          maia_values: {},
+        },
+      ],
+      availableMoves: [{}],
+      gameType: 'broadcast',
+      termination: { result: '*', winner: undefined },
+      maiaEvaluations: [{}],
+      stockfishEvaluations: [undefined],
+      tree: dummyTree,
+      type: 'stream' as const,
+    }
+  }, [])
+
+  const currentGame = (broadcastController as any).currentLiveGame || dummyGame
+  const analysisController = useAnalysisController(
+    currentGame,
+    undefined,
+    false,
+  )
+
+  // Auto-follow live moves for the selected game
+  const lastGameMoveCount = useRef(0)
+
+  useEffect(() => {
+    const currentLiveGame = (broadcastController as any).currentLiveGame
+    if (currentLiveGame?.tree && analysisController) {
+      try {
+        const mainLine = currentLiveGame.tree.getMainLine()
+        const currentMoveCount = mainLine.length
+
+        // If new moves have been added to the game
+        if (currentMoveCount > lastGameMoveCount.current) {
+          lastGameMoveCount.current = currentMoveCount
+
+          // Find the last node in the main line
+          let lastNode = currentLiveGame.tree.getRoot()
+          while (lastNode.mainChild) {
+            lastNode = lastNode.mainChild
+          }
+
+          // Only auto-follow if user is currently at the previous last node
+          if (
+            analysisController.currentNode &&
+            lastNode.parent === analysisController.currentNode
+          ) {
+            analysisController.setCurrentNode(lastNode)
+          }
+        }
+      } catch (error) {
+        console.error('Error setting current node:', error)
+      }
+    }
+  }, [(broadcastController as any).currentLiveGame, analysisController])
+
+  // When we select a new game, set the current node to the last move
+  useEffect(() => {
+    const currentLiveGame = (broadcastController as any).currentLiveGame
+    if (currentLiveGame?.loaded) {
+      const mainLine = currentLiveGame.tree.getMainLine()
+      if (mainLine.length > 0) {
+        analysisController.setCurrentNode(mainLine[mainLine.length - 1])
+      }
+    }
+  }, [broadcastController.currentGame?.id])
+
+  const pageTitle = useMemo(() => {
+    if (
+      broadcastController.currentBroadcast &&
+      broadcastController.currentRound
+    ) {
+      return `${broadcastController.currentBroadcast.tour.name} • ${broadcastController.currentRound.name} – Maia Chess`
+    }
+    return 'Live Broadcast – Maia Chess'
+  }, [broadcastController.currentBroadcast, broadcastController.currentRound])
+
+  const pageDescription = useMemo(() => {
+    if (broadcastController.currentBroadcast) {
+      return `Watch ${broadcastController.currentBroadcast.tour.name} live with real-time Maia AI analysis.`
+    }
+    return 'Watch live chess broadcasts with real-time Maia AI analysis.'
+  }, [broadcastController.currentBroadcast])
+
+  if (loading) {
+    return (
+      <>
+        <Head>
+          <title>Loading Broadcast – Maia Chess</title>
+        </Head>
+        <DelayedLoading isLoading={true}>
+          <div className="flex flex-col items-center justify-center gap-4">
+            <div className="text-center">
+              <h2 className="mb-2 text-xl font-semibold">Loading Broadcast</h2>
+              <p className="text-secondary">Connecting to live tournament...</p>
+            </div>
+          </div>
+        </DelayedLoading>
+      </>
+    )
+  }
+
+  if (error) {
+    return (
+      <>
+        <Head>
+          <title>Broadcast Error – Maia Chess</title>
+        </Head>
+        <div className="flex min-h-screen items-center justify-center bg-background-1">
+          <div className="text-center">
+            <h2 className="mb-4 text-xl font-semibold text-red-400">
+              Error Loading Broadcast
+            </h2>
+            <p className="mb-4 text-secondary">{error}</p>
+            <div className="flex justify-center gap-2">
+              <button
+                onClick={() => router.push('/broadcast')}
+                className="rounded bg-background-3 px-4 py-2 text-primary transition hover:bg-background-3/80"
+              >
+                Back to Broadcasts
+              </button>
+              <button
+                onClick={() => window.location.reload()}
+                className="rounded bg-human-4 px-4 py-2 text-white transition hover:bg-human-4/80"
+              >
+                Try Again
+              </button>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{pageTitle}</title>
+        <meta name="description" content={pageDescription} />
+      </Head>
+
+      <AnimatePresence>
+        {analysisController &&
+        (analysisController.maia.status === 'no-cache' ||
+          analysisController.maia.status === 'downloading') ? (
+          <DownloadModelModal
+            progress={analysisController.maia.progress}
+            download={analysisController.maia.downloadModel}
+          />
+        ) : null}
+      </AnimatePresence>
+
+      <TreeControllerContext.Provider value={analysisController}>
+        {!(broadcastController as any).currentLiveGame?.loaded &&
+        broadcastController.currentGame &&
+        !broadcastController.broadcastState.roundEnded ? (
+          <div className="absolute left-0 top-0 z-50">
+            <DelayedLoading transparent isLoading={true}>
+              <p>Loading game...</p>
+            </DelayedLoading>
+          </div>
+        ) : null}
+        {analysisController && (
+          <BroadcastAnalysis
+            game={currentGame}
+            broadcastController={
+              broadcastController as BroadcastStreamController & {
+                currentLiveGame: LiveGame | null
+              }
+            }
+            analysisController={analysisController}
+          />
+        )}
+      </TreeControllerContext.Provider>
+    </>
+  )
+}
+
+export default function AuthenticatedBroadcastAnalysisPage() {
+  return (
+    <AuthenticatedWrapper>
+      <BroadcastAnalysisPage />
+    </AuthenticatedWrapper>
+  )
+}
diff --git a/src/pages/broadcast/index.tsx b/src/pages/broadcast/index.tsx
new file mode 100644
index 00000000..67a02538
--- /dev/null
+++ b/src/pages/broadcast/index.tsx
@@ -0,0 +1,290 @@
+import React, { useEffect, useState } from 'react'
+import { NextPage } from 'next'
+import { useRouter } from 'next/router'
+import Head from 'next/head'
+import { motion } from 'framer-motion'
+
+import { DelayedLoading } from 'src/components'
+import { AuthenticatedWrapper } from 'src/components/Common/AuthenticatedWrapper'
+import { useBroadcastController } from 'src/hooks/useBroadcastController'
+import { Broadcast } from 'src/types'
+
+const BroadcastsPage: NextPage = () => {
+  const router = useRouter()
+  const broadcastController = useBroadcastController()
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        await broadcastController.loadBroadcasts()
+      } catch (error) {
+        console.error('Error loading broadcasts:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadData()
+  }, [])
+
+  const handleSelectBroadcast = (broadcast: Broadcast) => {
+    const defaultRound =
+      broadcast.rounds.find((r) => r.id === broadcast.defaultRoundId) ||
+      broadcast.rounds.find((r) => r.ongoing) ||
+      broadcast.rounds[0]
+
+    if (defaultRound) {
+      router.push(`/broadcast/${broadcast.tour.id}/${defaultRound.id}`)
+    }
+  }
+
+  const formatDate = (timestamp: number) => {
+    return new Date(timestamp).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  }
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        duration: 0.3,
+        staggerChildren: 0.1,
+      },
+    },
+  }
+
+  const itemVariants = {
+    hidden: {
+      opacity: 0,
+      y: 20,
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  if (loading) {
+    return (
+      <>
+        <Head>
+          <title>Live Broadcasts – Maia Chess</title>
+          <meta
+            name="description"
+            content="Watch live chess tournaments and broadcasts with real-time Maia AI analysis."
+          />
+        </Head>
+        <DelayedLoading isLoading={true}>
+          <div className="flex flex-col items-center justify-center gap-4">
+            <div className="text-center">
+              <h2 className="mb-2 text-xl font-semibold">
+                Loading Live Broadcasts
+              </h2>
+              <p className="text-secondary">Fetching ongoing tournaments...</p>
+            </div>
+          </div>
+        </DelayedLoading>
+      </>
+    )
+  }
+
+  if (broadcastController.broadcastState.error) {
+    return (
+      <>
+        <Head>
+          <title>Live Broadcasts – Maia Chess</title>
+        </Head>
+        <div className="flex min-h-screen items-center justify-center bg-background-1">
+          <div className="text-center">
+            <h2 className="mb-4 text-xl font-semibold text-red-400">
+              Error Loading Broadcasts
+            </h2>
+            <p className="mb-4 text-secondary">
+              {broadcastController.broadcastState.error}
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              className="rounded bg-human-4 px-4 py-2 text-white transition hover:bg-human-4/80"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Live Broadcasts – Maia Chess</title>
+        <meta
+          name="description"
+          content="Watch live chess tournaments and broadcasts with real-time Maia AI analysis."
+        />
+      </Head>
+
+      <div className="min-h-screen bg-background-1">
+        <motion.div
+          className="container mx-auto px-4 py-8"
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+        >
+          <motion.div variants={itemVariants} className="mb-8 text-center">
+            <h1 className="mb-2 text-3xl font-bold text-primary">
+              Live Broadcasts
+            </h1>
+            <p className="text-secondary">
+              Watch ongoing chess tournaments with real-time Maia AI analysis
+            </p>
+          </motion.div>
+
+          {broadcastController.broadcasts.length === 0 ? (
+            <motion.div
+              variants={itemVariants}
+              className="flex flex-col items-center justify-center py-16 text-center"
+            >
+              <span className="material-symbols-outlined mb-4 !text-6xl text-secondary">
+                live_tv
+              </span>
+              <h2 className="mb-2 text-xl font-semibold text-primary">
+                No Live Broadcasts
+              </h2>
+              <p className="text-secondary">
+                There are currently no ongoing tournaments available.
+              </p>
+              <button
+                onClick={() => broadcastController.loadBroadcasts()}
+                className="mt-4 rounded bg-human-4 px-4 py-2 text-white transition hover:bg-human-4/80"
+              >
+                Refresh
+              </button>
+            </motion.div>
+          ) : (
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              {broadcastController.broadcasts.map((broadcast, index) => {
+                const ongoingRounds = broadcast.rounds.filter((r) => r.ongoing)
+                const hasOngoingRounds = ongoingRounds.length > 0
+
+                return (
+                  <motion.div
+                    key={broadcast.tour.id}
+                    variants={itemVariants}
+                    className="overflow-hidden rounded-lg bg-background-2 shadow-lg transition-transform hover:scale-105"
+                  >
+                    <div className="p-6">
+                      <div className="mb-4 flex items-start justify-between">
+                        <div className="flex-1">
+                          <h3 className="mb-1 line-clamp-2 text-lg font-semibold text-primary">
+                            {broadcast.tour.name}
+                          </h3>
+                          {hasOngoingRounds && (
+                            <div className="flex items-center gap-1">
+                              <div className="h-2 w-2 animate-pulse rounded-full bg-red-500"></div>
+                              <span className="text-xs font-medium text-red-400">
+                                LIVE
+                              </span>
+                            </div>
+                          )}
+                        </div>
+                        <div className="text-right">
+                          <div className="mb-1 text-xs text-secondary">
+                            Tier {broadcast.tour.tier}
+                          </div>
+                          {broadcast.tour.dates.length > 0 && (
+                            <div className="text-xs text-secondary">
+                              {formatDate(broadcast.tour.dates[0])}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+
+                      <div className="mb-4">
+                        <div className="mb-2 text-sm font-medium text-primary">
+                          Rounds ({broadcast.rounds.length})
+                        </div>
+                        <div className="space-y-1">
+                          {broadcast.rounds.slice(0, 3).map((round) => (
+                            <div
+                              key={round.id}
+                              className="flex items-center justify-between text-xs"
+                            >
+                              <span className="text-secondary">
+                                {round.name}
+                              </span>
+                              <span
+                                className={`rounded px-2 py-0.5 text-xs ${
+                                  round.ongoing
+                                    ? 'bg-red-500/20 text-red-400'
+                                    : 'bg-background-3 text-secondary'
+                                }`}
+                              >
+                                {round.ongoing ? 'Live' : 'Finished'}
+                              </span>
+                            </div>
+                          ))}
+                          {broadcast.rounds.length > 3 && (
+                            <div className="text-xs text-secondary">
+                              +{broadcast.rounds.length - 3} more rounds
+                            </div>
+                          )}
+                        </div>
+                      </div>
+
+                      <button
+                        onClick={() => handleSelectBroadcast(broadcast)}
+                        disabled={!hasOngoingRounds}
+                        className={`w-full rounded py-2 text-sm font-medium transition ${
+                          hasOngoingRounds
+                            ? 'bg-human-4 text-white hover:bg-human-4/80'
+                            : 'cursor-not-allowed bg-background-3 text-secondary'
+                        }`}
+                      >
+                        {hasOngoingRounds ? 'Watch Live' : 'No Live Rounds'}
+                      </button>
+                    </div>
+                  </motion.div>
+                )
+              })}
+            </div>
+          )}
+
+          <motion.div
+            variants={itemVariants}
+            className="mt-8 text-center text-xs text-secondary"
+          >
+            <p>
+              Broadcasts powered by{' '}
+              <a
+                href="https://lichess.org"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary/60 underline hover:text-primary"
+              >
+                Lichess
+              </a>
+            </p>
+          </motion.div>
+        </motion.div>
+      </div>
+    </>
+  )
+}
+
+export default function AuthenticatedBroadcastsPage() {
+  return (
+    <AuthenticatedWrapper>
+      <BroadcastsPage />
+    </AuthenticatedWrapper>
+  )
+}
diff --git a/src/types/broadcast/index.ts b/src/types/broadcast/index.ts
new file mode 100644
index 00000000..77f1e916
--- /dev/null
+++ b/src/types/broadcast/index.ts
@@ -0,0 +1,92 @@
+export interface BroadcastTour {
+  id: string
+  name: string
+  slug: string
+  info: Record<string, any>
+  createdAt: number
+  url: string
+  tier: number
+  dates: number[]
+}
+
+export interface BroadcastRound {
+  id: string
+  name: string
+  slug: string
+  createdAt: number
+  ongoing: boolean
+  startsAt: number
+  rated: boolean
+  url: string
+}
+
+export interface Broadcast {
+  tour: BroadcastTour
+  rounds: BroadcastRound[]
+  defaultRoundId: string
+}
+
+export interface BroadcastGame {
+  id: string
+  white: string
+  black: string
+  result: string
+  moves: string[]
+  pgn: string
+  fen: string
+  lastMove?: [string, string]
+  event: string
+  site: string
+  date: string
+  round: string
+  eco?: string
+  opening?: string
+  whiteElo?: number
+  blackElo?: number
+  timeControl?: string
+  termination?: string
+  annotator?: string
+  studyName?: string
+  chapterName?: string
+  utcDate?: string
+  utcTime?: string
+}
+
+export interface BroadcastRoundData {
+  roundId: string
+  broadcastId: string
+  games: Map<string, BroadcastGame>
+  lastUpdate: number
+}
+
+export interface BroadcastState {
+  isConnected: boolean
+  isConnecting: boolean
+  isLive: boolean
+  error: string | null
+  roundStarted: boolean
+  roundEnded: boolean
+  gameEnded: boolean
+}
+
+export interface BroadcastStreamController {
+  broadcasts: Broadcast[]
+  currentBroadcast: Broadcast | null
+  currentRound: BroadcastRound | null
+  currentGame: BroadcastGame | null
+  currentLiveGame: any | null
+  roundData: BroadcastRoundData | null
+  broadcastState: BroadcastState
+  loadBroadcasts: () => Promise<void>
+  selectBroadcast: (broadcastId: string) => void
+  selectRound: (roundId: string) => void
+  selectGame: (gameId: string) => void
+  startRoundStream: (roundId: string) => void
+  stopRoundStream: () => void
+  reconnect: () => void
+}
+
+export interface PGNParseResult {
+  games: BroadcastGame[]
+  errors: string[]
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 525df138..f4ce8634 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -9,3 +9,4 @@ export * from './modal'
 export * from './blog'
 export * from './leaderboard'
 export * from './stream'
+export * from './broadcast'

From 8724cff099c32a23c51e011910f95adf5bed5e00 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 30 Jul 2025 22:39:00 -0400
Subject: [PATCH 02/17] feat: include unofficial broadcasts

---
 src/api/lichess/broadcasts.ts                 |  56 +++--
 src/hooks/useBroadcastController.ts           | 104 +++++++++-
 src/pages/_app.tsx                            |   1 +
 .../broadcast/[broadcastId]/[roundId].tsx     |  25 ++-
 src/pages/broadcast/index.tsx                 | 193 +++++++++++-------
 src/types/broadcast/index.ts                  |  32 ++-
 6 files changed, 307 insertions(+), 104 deletions(-)

diff --git a/src/api/lichess/broadcasts.ts b/src/api/lichess/broadcasts.ts
index daba0f46..ee5c9483 100644
--- a/src/api/lichess/broadcasts.ts
+++ b/src/api/lichess/broadcasts.ts
@@ -1,4 +1,10 @@
-import { Broadcast, BroadcastGame, PGNParseResult } from 'src/types'
+import {
+  Broadcast,
+  BroadcastGame,
+  PGNParseResult,
+  TopBroadcastsResponse,
+  TopBroadcastItem,
+} from 'src/types'
 
 const readStream = (processLine: (data: any) => void) => (response: any) => {
   const stream = response.body.getReader()
@@ -61,6 +67,31 @@ export const getLichessBroadcasts = async (): Promise<Broadcast[]> => {
   })
 }
 
+export const getLichessTopBroadcasts =
+  async (): Promise<TopBroadcastsResponse> => {
+    const response = await fetch('https://lichess.org/api/broadcast/top', {
+      headers: {
+        Accept: 'application/json',
+      },
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+    }
+
+    return response.json()
+  }
+
+export const convertTopBroadcastToBroadcast = (
+  item: TopBroadcastItem,
+): Broadcast => {
+  return {
+    tour: item.tour,
+    rounds: [item.round],
+    defaultRoundId: item.round.id,
+  }
+}
+
 export const streamBroadcastRound = async (
   roundId: string,
   onPGNUpdate: (pgn: string) => void,
@@ -202,7 +233,7 @@ const parseSinglePGN = (pgnString: string): BroadcastGame | null => {
 
   // Parse moves from moves section
   const moves = parseMovesFromPGN(movesSection)
-  const fen = extractFENFromMoves(moves)
+  const fen = extractFENFromMoves()
 
   const game: BroadcastGame = {
     id: generateGameId(white, black, event, site),
@@ -229,12 +260,8 @@ const parseSinglePGN = (pgnString: string): BroadcastGame | null => {
     utcTime: headers.UTCTime,
   }
 
-  // Extract last move if available
-  if (moves.length > 0) {
-    const lastMove = moves[moves.length - 1]
-    // This would need proper move parsing to convert SAN to UCI
-    // For now, we'll leave it undefined and handle in the controller
-  }
+  // Note: Last move extraction would need proper move parsing to convert SAN to UCI
+  // For now, we'll leave it undefined and handle in the controller
 
   return game
 }
@@ -276,7 +303,7 @@ const parseMovesFromPGN = (movesSection: string): string[] => {
   return moves
 }
 
-const extractFENFromMoves = (moves: string[]): string | null => {
+const extractFENFromMoves = (): string | null => {
   // This would require a full chess engine to calculate the FEN from moves
   // For now, return null and handle in the controller with chess.js
   return null
@@ -289,7 +316,12 @@ const generateGameId = (
   site: string,
 ): string => {
   const baseString = `${white}-${black}-${event}-${site}`
-  return btoa(baseString)
-    .replace(/[^a-zA-Z0-9]/g, '')
-    .substring(0, 12)
+  // Use a simple hash instead of deprecated btoa for better compatibility
+  let hash = 0
+  for (let i = 0; i < baseString.length; i++) {
+    const char = baseString.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash // Convert to 32bit integer
+  }
+  return Math.abs(hash).toString(36).substring(0, 12)
 }
diff --git a/src/hooks/useBroadcastController.ts b/src/hooks/useBroadcastController.ts
index d580fb99..38651835 100644
--- a/src/hooks/useBroadcastController.ts
+++ b/src/hooks/useBroadcastController.ts
@@ -9,16 +9,21 @@ import {
   BroadcastRoundData,
   BroadcastState,
   BroadcastStreamController,
+  BroadcastSection,
   LiveGame,
 } from 'src/types'
 import {
   getLichessBroadcasts,
+  getLichessTopBroadcasts,
+  convertTopBroadcastToBroadcast,
   streamBroadcastRound,
   parsePGNData,
 } from 'src/api/lichess/broadcasts'
 
 export const useBroadcastController = (): BroadcastStreamController => {
-  const [broadcasts, setBroadcasts] = useState<Broadcast[]>([])
+  const [broadcastSections, setBroadcastSections] = useState<
+    BroadcastSection[]
+  >([])
   const [currentBroadcast, setCurrentBroadcast] = useState<Broadcast | null>(
     null,
   )
@@ -47,8 +52,90 @@ export const useBroadcastController = (): BroadcastStreamController => {
         isConnecting: true,
         error: null,
       }))
-      const broadcastList = await getLichessBroadcasts()
-      setBroadcasts(broadcastList)
+
+      // Load both official and top broadcasts concurrently
+      const [officialBroadcasts, topBroadcasts] = await Promise.all([
+        getLichessBroadcasts(),
+        getLichessTopBroadcasts(),
+      ])
+
+      // Organize broadcasts into sections
+      const sections: BroadcastSection[] = []
+
+      // Official active broadcasts
+      const officialActive = officialBroadcasts.filter((b) =>
+        b.rounds.some((r) => r.ongoing),
+      )
+      if (officialActive.length > 0) {
+        sections.push({
+          title: 'Official Live Tournaments',
+          broadcasts: officialActive,
+          type: 'official-active',
+        })
+      }
+
+      // Top active broadcasts (unofficial)
+      const unofficialActive = topBroadcasts.active
+        .map(convertTopBroadcastToBroadcast)
+        .filter(
+          (b) =>
+            !officialActive.some((official) => official.tour.id === b.tour.id),
+        )
+      if (unofficialActive.length > 0) {
+        sections.push({
+          title: 'Community Live Broadcasts',
+          broadcasts: unofficialActive,
+          type: 'unofficial-active',
+        })
+      }
+
+      // Official upcoming broadcasts
+      const officialUpcoming = officialBroadcasts.filter(
+        (b) =>
+          b.rounds.every((r) => !r.ongoing) &&
+          b.rounds.some((r) => r.startsAt > Date.now()),
+      )
+      if (officialUpcoming.length > 0) {
+        sections.push({
+          title: 'Upcoming Official Tournaments',
+          broadcasts: officialUpcoming,
+          type: 'official-upcoming',
+        })
+      }
+
+      // Top upcoming broadcasts (unofficial)
+      const unofficialUpcoming = topBroadcasts.upcoming.map(
+        convertTopBroadcastToBroadcast,
+      )
+      if (unofficialUpcoming.length > 0) {
+        sections.push({
+          title: 'Upcoming Community Broadcasts',
+          broadcasts: unofficialUpcoming,
+          type: 'unofficial-upcoming',
+        })
+      }
+
+      // Past broadcasts (mix of official and top)
+      const officialPast = officialBroadcasts.filter(
+        (b) =>
+          b.rounds.every((r) => !r.ongoing) &&
+          b.rounds.every((r) => r.startsAt <= Date.now()),
+      )
+      const pastBroadcasts = [
+        ...officialPast,
+        ...topBroadcasts.past.currentPageResults.map(
+          convertTopBroadcastToBroadcast,
+        ),
+      ]
+      if (pastBroadcasts.length > 0) {
+        sections.push({
+          title: 'Recent Tournaments',
+          broadcasts: pastBroadcasts,
+          type: 'past',
+        })
+      }
+
+      setBroadcastSections(sections)
       setBroadcastState((prev) => ({ ...prev, isConnecting: false }))
     } catch (error) {
       console.error('Error loading broadcasts:', error)
@@ -63,7 +150,12 @@ export const useBroadcastController = (): BroadcastStreamController => {
 
   const selectBroadcast = useCallback(
     (broadcastId: string) => {
-      const broadcast = broadcasts.find((b) => b.tour.id === broadcastId)
+      // Find broadcast across all sections
+      let broadcast: Broadcast | undefined
+      for (const section of broadcastSections) {
+        broadcast = section.broadcasts.find((b) => b.tour.id === broadcastId)
+        if (broadcast) break
+      }
       if (broadcast) {
         setCurrentBroadcast(broadcast)
         // Auto-select default round if available
@@ -76,7 +168,7 @@ export const useBroadcastController = (): BroadcastStreamController => {
         }
       }
     },
-    [broadcasts],
+    [broadcastSections],
   )
 
   const selectRound = useCallback(
@@ -393,7 +485,7 @@ export const useBroadcastController = (): BroadcastStreamController => {
   }, [currentGame, roundData?.lastUpdate])
 
   return {
-    broadcasts,
+    broadcastSections,
     currentBroadcast,
     currentRound,
     currentGame,
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 80eeee3a..746b09aa 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -44,6 +44,7 @@ function MaiaPlatform({ Component, pageProps }: AppProps) {
     '/openings',
     '/puzzles',
     '/settings',
+    '/broadcast',
   ].some((path) => router.pathname.includes(path))
 
   useEffect(() => {
diff --git a/src/pages/broadcast/[broadcastId]/[roundId].tsx b/src/pages/broadcast/[broadcastId]/[roundId].tsx
index ac99cc4d..ad04b1f5 100644
--- a/src/pages/broadcast/[broadcastId]/[roundId].tsx
+++ b/src/pages/broadcast/[broadcastId]/[roundId].tsx
@@ -11,7 +11,12 @@ import { useBroadcastController } from 'src/hooks/useBroadcastController'
 import { useAnalysisController } from 'src/hooks'
 import { TreeControllerContext } from 'src/contexts'
 import { BroadcastAnalysis } from 'src/components/Analysis/BroadcastAnalysis'
-import { AnalyzedGame, BroadcastStreamController, LiveGame } from 'src/types'
+import {
+  AnalyzedGame,
+  Broadcast,
+  BroadcastStreamController,
+  LiveGame,
+} from 'src/types'
 import { GameTree } from 'src/types/base/tree'
 
 const BroadcastAnalysisPage: NextPage = () => {
@@ -34,21 +39,25 @@ const BroadcastAnalysisPage: NextPage = () => {
         setError(null)
 
         // Load broadcasts if not already loaded
-        if (broadcastController.broadcasts.length === 0) {
+        if (broadcastController.broadcastSections.length === 0) {
           await broadcastController.loadBroadcasts()
         }
 
-        // Find and select the broadcast
-        const broadcast = broadcastController.broadcasts.find(
-          (b) => b.tour.id === broadcastId,
-        )
+        // Find and select the broadcast across all sections
+        let broadcast: Broadcast | undefined
+        for (const section of broadcastController.broadcastSections) {
+          broadcast = section.broadcasts.find((b) => b.tour.id === broadcastId)
+          if (broadcast) break
+        }
 
         if (!broadcast) {
           throw new Error('Broadcast not found')
         }
 
         // Find the round
-        const round = broadcast.rounds.find((r) => r.id === roundId)
+        const round = broadcast.rounds.find(
+          (r: { id: string }) => r.id === roundId,
+        )
         if (!round) {
           throw new Error('Round not found')
         }
@@ -68,7 +77,7 @@ const BroadcastAnalysisPage: NextPage = () => {
     }
 
     initializeBroadcast()
-  }, [broadcastId, roundId, broadcastController.broadcasts.length])
+  }, [broadcastId, roundId, broadcastController.broadcastSections.length])
 
   // Create a dummy game for analysis controller when no game is selected
   const dummyGame: AnalyzedGame = useMemo(() => {
diff --git a/src/pages/broadcast/index.tsx b/src/pages/broadcast/index.tsx
index 67a02538..ff15a3c7 100644
--- a/src/pages/broadcast/index.tsx
+++ b/src/pages/broadcast/index.tsx
@@ -149,7 +149,7 @@ const BroadcastsPage: NextPage = () => {
             </p>
           </motion.div>
 
-          {broadcastController.broadcasts.length === 0 ? (
+          {broadcastController.broadcastSections.length === 0 ? (
             <motion.div
               variants={itemVariants}
               className="flex flex-col items-center justify-center py-16 text-center"
@@ -171,91 +171,132 @@ const BroadcastsPage: NextPage = () => {
               </button>
             </motion.div>
           ) : (
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-              {broadcastController.broadcasts.map((broadcast, index) => {
-                const ongoingRounds = broadcast.rounds.filter((r) => r.ongoing)
-                const hasOngoingRounds = ongoingRounds.length > 0
-
-                return (
+            <div className="space-y-8">
+              {broadcastController.broadcastSections.map(
+                (section, sectionIndex) => (
                   <motion.div
-                    key={broadcast.tour.id}
+                    key={section.type}
                     variants={itemVariants}
-                    className="overflow-hidden rounded-lg bg-background-2 shadow-lg transition-transform hover:scale-105"
+                    className="space-y-4"
                   >
-                    <div className="p-6">
-                      <div className="mb-4 flex items-start justify-between">
-                        <div className="flex-1">
-                          <h3 className="mb-1 line-clamp-2 text-lg font-semibold text-primary">
-                            {broadcast.tour.name}
-                          </h3>
-                          {hasOngoingRounds && (
-                            <div className="flex items-center gap-1">
-                              <div className="h-2 w-2 animate-pulse rounded-full bg-red-500"></div>
-                              <span className="text-xs font-medium text-red-400">
-                                LIVE
-                              </span>
-                            </div>
-                          )}
-                        </div>
-                        <div className="text-right">
-                          <div className="mb-1 text-xs text-secondary">
-                            Tier {broadcast.tour.tier}
-                          </div>
-                          {broadcast.tour.dates.length > 0 && (
-                            <div className="text-xs text-secondary">
-                              {formatDate(broadcast.tour.dates[0])}
-                            </div>
-                          )}
+                    <h2 className="flex items-center gap-2 text-xl font-semibold text-primary">
+                      {section.title}
+                      {(section.type === 'official-active' ||
+                        section.type === 'unofficial-active') && (
+                        <div className="flex items-center gap-1">
+                          <div className="h-2 w-2 animate-pulse rounded-full bg-red-500"></div>
+                          <span className="text-xs font-medium text-red-400">
+                            LIVE
+                          </span>
                         </div>
-                      </div>
+                      )}
+                    </h2>
 
-                      <div className="mb-4">
-                        <div className="mb-2 text-sm font-medium text-primary">
-                          Rounds ({broadcast.rounds.length})
-                        </div>
-                        <div className="space-y-1">
-                          {broadcast.rounds.slice(0, 3).map((round) => (
-                            <div
-                              key={round.id}
-                              className="flex items-center justify-between text-xs"
-                            >
-                              <span className="text-secondary">
-                                {round.name}
-                              </span>
-                              <span
-                                className={`rounded px-2 py-0.5 text-xs ${
-                                  round.ongoing
-                                    ? 'bg-red-500/20 text-red-400'
-                                    : 'bg-background-3 text-secondary'
+                    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                      {section.broadcasts.map((broadcast, index) => {
+                        const ongoingRounds = broadcast.rounds.filter(
+                          (r) => r.ongoing,
+                        )
+                        const hasOngoingRounds = ongoingRounds.length > 0
+                        const isActive = section.type.includes('active')
+                        const isPast = section.type === 'past'
+
+                        return (
+                          <motion.div
+                            key={broadcast.tour.id}
+                            variants={itemVariants}
+                            className="overflow-hidden rounded-lg bg-background-2 shadow-lg transition-transform hover:scale-105"
+                          >
+                            <div className="p-6">
+                              <div className="mb-4 flex items-start justify-between">
+                                <div className="flex-1">
+                                  <h3 className="mb-1 line-clamp-2 text-lg font-semibold text-primary">
+                                    {broadcast.tour.name}
+                                  </h3>
+                                  {hasOngoingRounds && isActive && (
+                                    <div className="flex items-center gap-1">
+                                      <div className="h-2 w-2 animate-pulse rounded-full bg-red-500"></div>
+                                      <span className="text-xs font-medium text-red-400">
+                                        LIVE
+                                      </span>
+                                    </div>
+                                  )}
+                                </div>
+                                <div className="text-right">
+                                  <div className="mb-1 text-xs text-secondary">
+                                    Tier {broadcast.tour.tier}
+                                  </div>
+                                  {broadcast.tour.dates.length > 0 && (
+                                    <div className="text-xs text-secondary">
+                                      {formatDate(broadcast.tour.dates[0])}
+                                    </div>
+                                  )}
+                                </div>
+                              </div>
+
+                              <div className="mb-4">
+                                <div className="mb-2 text-sm font-medium text-primary">
+                                  Rounds ({broadcast.rounds.length})
+                                </div>
+                                <div className="space-y-1">
+                                  {broadcast.rounds.slice(0, 3).map((round) => (
+                                    <div
+                                      key={round.id}
+                                      className="flex items-center justify-between text-xs"
+                                    >
+                                      <span className="text-secondary">
+                                        {round.name}
+                                      </span>
+                                      <span
+                                        className={`rounded px-2 py-0.5 text-xs ${
+                                          round.ongoing
+                                            ? 'bg-red-500/20 text-red-400'
+                                            : isPast
+                                              ? 'bg-background-3 text-secondary'
+                                              : 'bg-blue-500/20 text-blue-400'
+                                        }`}
+                                      >
+                                        {round.ongoing
+                                          ? 'Live'
+                                          : isPast
+                                            ? 'Finished'
+                                            : 'Upcoming'}
+                                      </span>
+                                    </div>
+                                  ))}
+                                  {broadcast.rounds.length > 3 && (
+                                    <div className="text-xs text-secondary">
+                                      +{broadcast.rounds.length - 3} more rounds
+                                    </div>
+                                  )}
+                                </div>
+                              </div>
+
+                              <button
+                                onClick={() => handleSelectBroadcast(broadcast)}
+                                disabled={!hasOngoingRounds && !isPast}
+                                className={`w-full rounded py-2 text-sm font-medium transition ${
+                                  hasOngoingRounds
+                                    ? 'bg-human-4 text-white hover:bg-human-4/80'
+                                    : isPast
+                                      ? 'bg-background-3 text-secondary hover:bg-background-3/80'
+                                      : 'cursor-not-allowed bg-background-3/50 text-secondary/50'
                                 }`}
                               >
-                                {round.ongoing ? 'Live' : 'Finished'}
-                              </span>
-                            </div>
-                          ))}
-                          {broadcast.rounds.length > 3 && (
-                            <div className="text-xs text-secondary">
-                              +{broadcast.rounds.length - 3} more rounds
+                                {hasOngoingRounds
+                                  ? 'Watch Live'
+                                  : isPast
+                                    ? 'View Tournament'
+                                    : 'Coming Soon'}
+                              </button>
                             </div>
-                          )}
-                        </div>
-                      </div>
-
-                      <button
-                        onClick={() => handleSelectBroadcast(broadcast)}
-                        disabled={!hasOngoingRounds}
-                        className={`w-full rounded py-2 text-sm font-medium transition ${
-                          hasOngoingRounds
-                            ? 'bg-human-4 text-white hover:bg-human-4/80'
-                            : 'cursor-not-allowed bg-background-3 text-secondary'
-                        }`}
-                      >
-                        {hasOngoingRounds ? 'Watch Live' : 'No Live Rounds'}
-                      </button>
+                          </motion.div>
+                        )
+                      })}
                     </div>
                   </motion.div>
-                )
-              })}
+                ),
+              )}
             </div>
           )}
 
diff --git a/src/types/broadcast/index.ts b/src/types/broadcast/index.ts
index 77f1e916..77dee34e 100644
--- a/src/types/broadcast/index.ts
+++ b/src/types/broadcast/index.ts
@@ -69,12 +69,40 @@ export interface BroadcastState {
   gameEnded: boolean
 }
 
-export interface BroadcastStreamController {
+export interface TopBroadcastItem {
+  tour: BroadcastTour
+  round: BroadcastRound
+}
+
+export interface TopBroadcastsResponse {
+  active: TopBroadcastItem[]
+  upcoming: TopBroadcastItem[]
+  past: {
+    currentPage: number
+    maxPerPage: number
+    currentPageResults: TopBroadcastItem[]
+    previousPage: number | null
+    nextPage: number | null
+  }
+}
+
+export interface BroadcastSection {
+  title: string
   broadcasts: Broadcast[]
+  type:
+    | 'official-active'
+    | 'unofficial-active'
+    | 'official-upcoming'
+    | 'unofficial-upcoming'
+    | 'past'
+}
+
+export interface BroadcastStreamController {
+  broadcastSections: BroadcastSection[]
   currentBroadcast: Broadcast | null
   currentRound: BroadcastRound | null
   currentGame: BroadcastGame | null
-  currentLiveGame: any | null
+  currentLiveGame: unknown | null
   roundData: BroadcastRoundData | null
   broadcastState: BroadcastState
   loadBroadcasts: () => Promise<void>

From 60246292e7ec64ea898073574e8dd452a60a508c Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 30 Jul 2025 23:05:58 -0400
Subject: [PATCH 03/17] feat: support multiple games in rounds

---
 src/api/lichess/broadcasts.ts                 | 20 +++++++
 src/components/Analysis/BroadcastAnalysis.tsx | 16 +++++-
 src/components/Analysis/BroadcastGameList.tsx | 26 ++++++++-
 src/hooks/useBroadcastController.ts           | 55 +++++++++++--------
 .../broadcast/[broadcastId]/[roundId].tsx     |  3 +-
 5 files changed, 91 insertions(+), 29 deletions(-)

diff --git a/src/api/lichess/broadcasts.ts b/src/api/lichess/broadcasts.ts
index ee5c9483..39e25e61 100644
--- a/src/api/lichess/broadcasts.ts
+++ b/src/api/lichess/broadcasts.ts
@@ -92,6 +92,25 @@ export const convertTopBroadcastToBroadcast = (
   }
 }
 
+export const getBroadcastRoundPGN = async (
+  roundId: string,
+): Promise<string> => {
+  const response = await fetch(
+    `https://lichess.org/api/broadcast/round/${roundId}.pgn`,
+    {
+      headers: {
+        Accept: 'application/x-chess-pgn',
+      },
+    },
+  )
+
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+  }
+
+  return await response.text()
+}
+
 export const streamBroadcastRound = async (
   roundId: string,
   onPGNUpdate: (pgn: string) => void,
@@ -110,6 +129,7 @@ export const streamBroadcastRound = async (
 
   const onMessage = (data: string) => {
     if (data.trim()) {
+      console.log('Received PGN data length:', data.length)
       onPGNUpdate(data)
     }
   }
diff --git a/src/components/Analysis/BroadcastAnalysis.tsx b/src/components/Analysis/BroadcastAnalysis.tsx
index 208fac4e..10b494c6 100644
--- a/src/components/Analysis/BroadcastAnalysis.tsx
+++ b/src/components/Analysis/BroadcastAnalysis.tsx
@@ -279,8 +279,20 @@ export const BroadcastAnalysis: React.FC<Props> = ({
             <NestedGameInfo />
           </GameInfo>
           <div className="flex h-1/2 w-full flex-1 flex-col gap-2">
-            <div className="flex h-full flex-col overflow-y-scroll">
-              <BroadcastGameList broadcastController={broadcastController} />
+            <div className="flex h-full flex-col">
+              <div className="flex-1 overflow-hidden">
+                <BroadcastGameList broadcastController={broadcastController} />
+              </div>
+              <div className="flex-1 overflow-hidden">
+                <MovesContainer
+                  game={game}
+                  termination={game.termination}
+                  type="analysis"
+                  showAnnotations={true}
+                  disableKeyboardNavigation={false}
+                  disableMoveClicking={false}
+                />
+              </div>
             </div>
           </div>
         </motion.div>
diff --git a/src/components/Analysis/BroadcastGameList.tsx b/src/components/Analysis/BroadcastGameList.tsx
index 8101de4d..0a7120e4 100644
--- a/src/components/Analysis/BroadcastGameList.tsx
+++ b/src/components/Analysis/BroadcastGameList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useEffect } from 'react'
 import { motion } from 'framer-motion'
 import { BroadcastStreamController, BroadcastGame } from 'src/types'
 
@@ -15,6 +15,16 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
     broadcastController.currentRound?.id || '',
   )
 
+  // Sync selectedRoundId when currentRound changes
+  useEffect(() => {
+    if (
+      broadcastController.currentRound?.id &&
+      broadcastController.currentRound.id !== selectedRoundId
+    ) {
+      setSelectedRoundId(broadcastController.currentRound.id)
+    }
+  }, [broadcastController.currentRound?.id, selectedRoundId])
+
   const handleRoundChange = (roundId: string) => {
     setSelectedRoundId(roundId)
     broadcastController.selectRound(roundId)
@@ -26,8 +36,18 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
   }
 
   const currentGames = useMemo(() => {
-    if (!broadcastController.roundData?.games) return []
-    return Array.from(broadcastController.roundData.games.values())
+    if (!broadcastController.roundData?.games) {
+      console.log('No round data games available')
+      return []
+    }
+    const games = Array.from(broadcastController.roundData.games.values())
+    console.log(
+      'BroadcastGameList displaying',
+      games.length,
+      'games:',
+      games.map((g) => `${g.white} vs ${g.black}`),
+    )
+    return games
   }, [broadcastController.roundData?.games])
 
   const getGameStatus = (game: BroadcastGame) => {
diff --git a/src/hooks/useBroadcastController.ts b/src/hooks/useBroadcastController.ts
index 38651835..cae1ced7 100644
--- a/src/hooks/useBroadcastController.ts
+++ b/src/hooks/useBroadcastController.ts
@@ -16,6 +16,7 @@ import {
   getLichessBroadcasts,
   getLichessTopBroadcasts,
   convertTopBroadcastToBroadcast,
+  getBroadcastRoundPGN,
   streamBroadcastRound,
   parsePGNData,
 } from 'src/api/lichess/broadcasts'
@@ -311,34 +312,41 @@ export const useBroadcastController = (): BroadcastStreamController => {
       }
 
       lastPGNData.current = pgnData
+      console.log('Processing PGN update with length:', pgnData.length)
 
       const parseResult = parsePGNData(pgnData)
+      console.log('Parsed games count:', parseResult.games.length)
+      console.log(
+        'Game IDs:',
+        parseResult.games.map((g) => `${g.white} vs ${g.black}`),
+      )
 
       if (parseResult.errors.length > 0) {
         console.warn('PGN parsing errors:', parseResult.errors)
       }
 
       if (parseResult.games.length === 0) {
+        console.warn('No games found in PGN data')
         return
       }
 
-      // Update round data
-      const newGames = new Map<string, BroadcastGame>()
-      const updatedGameStates = new Map<string, LiveGame>()
-      let hasNewMoves = false
+      // Determine if this is initial load (multiple games) or update (single game)
+      const isInitialLoad = parseResult.games.length > 1
+      console.log('Is initial load:', isInitialLoad)
 
-      for (const game of parseResult.games) {
-        newGames.set(game.id, game)
+      setRoundData((prevRoundData) => {
+        // Start with existing games
+        const existingGames =
+          prevRoundData?.games || new Map<string, BroadcastGame>()
+        const updatedGames = new Map(existingGames)
 
-        // Check if this game has new moves compared to our stored state
-        const existingGameState = gameStates.current.get(game.id)
-        const newLiveGame = createLiveGameFromBroadcastGame(game)
+        // Process new/updated games
+        for (const game of parseResult.games) {
+          updatedGames.set(game.id, game)
 
-        if (
-          !existingGameState ||
-          existingGameState.moves.length !== newLiveGame.moves.length
-        ) {
-          hasNewMoves = true
+          // Update game states
+          const existingGameState = gameStates.current.get(game.id)
+          const newLiveGame = createLiveGameFromBroadcastGame(game)
 
           // Play sound for new moves if game was already loaded
           if (
@@ -352,18 +360,16 @@ export const useBroadcastController = (): BroadcastStreamController => {
                 .catch((e) => console.log('Could not play move sound:', e))
             } catch (e) {}
           }
-        }
 
-        updatedGameStates.set(game.id, newLiveGame)
-      }
+          gameStates.current.set(game.id, newLiveGame)
+        }
 
-      gameStates.current = updatedGameStates
+        console.log('Updated games map, now has', updatedGames.size, 'games')
 
-      setRoundData((prev) => {
         const newRoundData: BroadcastRoundData = {
           roundId: currentRoundId.current || '',
           broadcastId: currentBroadcast?.tour.id || '',
-          games: newGames,
+          games: updatedGames,
           lastUpdate: Date.now(),
         }
         return newRoundData
@@ -371,9 +377,11 @@ export const useBroadcastController = (): BroadcastStreamController => {
 
       // Update current game if it exists in the new data
       if (currentGame) {
-        const updatedCurrentGame = newGames.get(currentGame.id)
-        if (updatedCurrentGame) {
-          setCurrentGame(updatedCurrentGame)
+        const updatedGame = parseResult.games.find(
+          (g) => g.id === currentGame.id,
+        )
+        if (updatedGame) {
+          setCurrentGame(updatedGame)
         }
       } else if (parseResult.games.length > 0) {
         // Auto-select first game if none selected
@@ -419,6 +427,7 @@ export const useBroadcastController = (): BroadcastStreamController => {
       }))
 
       try {
+        // Start streaming - this will send all games initially, then updates
         await streamBroadcastRound(
           roundId,
           handlePGNUpdate,
diff --git a/src/pages/broadcast/[broadcastId]/[roundId].tsx b/src/pages/broadcast/[broadcastId]/[roundId].tsx
index ad04b1f5..ec59c3b9 100644
--- a/src/pages/broadcast/[broadcastId]/[roundId].tsx
+++ b/src/pages/broadcast/[broadcastId]/[roundId].tsx
@@ -51,7 +51,8 @@ const BroadcastAnalysisPage: NextPage = () => {
         }
 
         if (!broadcast) {
-          throw new Error('Broadcast not found')
+          // throw new Error('Broadcast not found')
+          return
         }
 
         // Find the round

From af3ab8d2237e139354ecc693f642e4b9c2f56ad9 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 30 Jul 2025 23:17:53 -0400
Subject: [PATCH 04/17] style: clean up UI

---
 src/components/Analysis/BroadcastAnalysis.tsx |  6 ++-
 src/components/Analysis/BroadcastGameList.tsx | 53 ++++++-------------
 2 files changed, 20 insertions(+), 39 deletions(-)

diff --git a/src/components/Analysis/BroadcastAnalysis.tsx b/src/components/Analysis/BroadcastAnalysis.tsx
index 10b494c6..55f9ee4a 100644
--- a/src/components/Analysis/BroadcastAnalysis.tsx
+++ b/src/components/Analysis/BroadcastAnalysis.tsx
@@ -157,7 +157,9 @@ export const BroadcastAnalysis: React.FC<Props> = ({
               <div
                 className={`h-2 w-2 rounded-full ${index === 0 ? 'bg-white' : 'border-[0.5px] bg-black'}`}
               />
-              <p className="text-sm">{player.name}</p>
+              <p className="truncate whitespace-nowrap text-sm">
+                {player.name}
+              </p>
               <span className="text-xs">
                 {player.rating ? <>({player.rating})</> : null}
               </span>
@@ -174,7 +176,7 @@ export const BroadcastAnalysis: React.FC<Props> = ({
           </div>
         ))}
         <div className="mt-1 flex items-center justify-center gap-1">
-          <span className="text-xxs text-secondary">
+          <span className="truncate whitespace-nowrap text-xxs text-secondary">
             {broadcastController.currentBroadcast?.tour.name}
             {broadcastController.currentRound && (
               <> • {broadcastController.currentRound.name}</>
diff --git a/src/components/Analysis/BroadcastGameList.tsx b/src/components/Analysis/BroadcastGameList.tsx
index 0a7120e4..aa926e1e 100644
--- a/src/components/Analysis/BroadcastGameList.tsx
+++ b/src/components/Analysis/BroadcastGameList.tsx
@@ -70,42 +70,28 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
 
   return (
     <div className="flex h-full flex-col items-start justify-start overflow-hidden bg-background-1 md:rounded">
-      <div className="w-full border-b-2 border-white border-opacity-10 p-3">
-        <div className="mb-3">
-          <h3 className="text-sm font-semibold text-primary">
+      <div className="flex w-full flex-col items-start justify-start gap-2 border-b-2 border-white border-opacity-10 p-3">
+        <div className="w-full overflow-hidden">
+          <h3 className="truncate text-sm font-semibold text-primary">
             {broadcastController.currentBroadcast?.tour.name ||
               'Live Broadcast'}
           </h3>
-          {broadcastController.broadcastState.isLive && (
-            <div className="mt-1 flex items-center gap-1">
-              <div className="h-2 w-2 animate-pulse rounded-full bg-red-500"></div>
-              <span className="text-xs font-medium text-red-400">LIVE</span>
-            </div>
-          )}
         </div>
 
         {/* Round Selector */}
         {broadcastController.currentBroadcast && (
-          <div className="mb-3">
-            <label
-              htmlFor="round-selector"
-              className="mb-1 block text-xs text-secondary"
-            >
-              Round
-            </label>
-            <select
-              id="round-selector"
-              value={selectedRoundId}
-              onChange={(e) => handleRoundChange(e.target.value)}
-              className="w-full rounded bg-background-2 px-2 py-1 text-xs text-primary focus:outline-none focus:ring-1 focus:ring-human-4"
-            >
-              {broadcastController.currentBroadcast.rounds.map((round) => (
-                <option key={round.id} value={round.id}>
-                  {round.name} {round.ongoing ? '(Live)' : ''}
-                </option>
-              ))}
-            </select>
-          </div>
+          <select
+            id="round-selector"
+            value={selectedRoundId}
+            onChange={(e) => handleRoundChange(e.target.value)}
+            className="w-full rounded bg-background-2 px-2 py-1 text-xs text-primary focus:outline-none focus:ring-1 focus:ring-human-4"
+          >
+            {broadcastController.currentBroadcast.rounds.map((round) => (
+              <option key={round.id} value={round.id}>
+                {round.name} {round.ongoing ? '(Live)' : ''}
+              </option>
+            ))}
+          </select>
         )}
 
         {/* Connection Status */}
@@ -133,7 +119,7 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
         )}
       </div>
 
-      <div className="red-scrollbar flex h-full flex-col overflow-y-scroll">
+      <div className="red-scrollbar flex w-full flex-col overflow-y-scroll">
         {currentGames.length === 0 ? (
           <div className="flex flex-1 items-center justify-center py-8 text-center">
             <div>
@@ -203,13 +189,6 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
                         )}
                       </div>
                     </div>
-                    {(game.opening || game.eco) && (
-                      <div className="mt-1 w-full text-left">
-                        <span className="text-xs text-secondary">
-                          {game.eco} {game.opening}
-                        </span>
-                      </div>
-                    )}
                   </button>
                 </div>
               )

From d66f29e3529a020238d9516deef0a13399e46c3f Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 30 Jul 2025 23:39:09 -0400
Subject: [PATCH 05/17] feat: add clocks to game board

---
 src/api/lichess/broadcasts.ts                 | 139 ++++++++++++++----
 src/components/Analysis/BroadcastAnalysis.tsx |  22 +++
 src/components/Analysis/BroadcastGameList.tsx |  10 +-
 src/hooks/useBroadcastController.ts           |  13 --
 src/types/broadcast/index.ts                  |  10 ++
 5 files changed, 144 insertions(+), 50 deletions(-)

diff --git a/src/api/lichess/broadcasts.ts b/src/api/lichess/broadcasts.ts
index 39e25e61..0482b737 100644
--- a/src/api/lichess/broadcasts.ts
+++ b/src/api/lichess/broadcasts.ts
@@ -1,3 +1,4 @@
+import { Chess } from 'chess.ts'
 import {
   Broadcast,
   BroadcastGame,
@@ -129,7 +130,6 @@ export const streamBroadcastRound = async (
 
   const onMessage = (data: string) => {
     if (data.trim()) {
-      console.log('Received PGN data length:', data.length)
       onPGNUpdate(data)
     }
   }
@@ -251,10 +251,22 @@ const parseSinglePGN = (pgnString: string): BroadcastGame | null => {
   const date = headers.Date || headers.UTCDate || ''
   const round = headers.Round || ''
 
-  // Parse moves from moves section
-  const moves = parseMovesFromPGN(movesSection)
+  // Parse moves and clock information from full PGN
+  console.log(`Parsing PGN for ${white} vs ${black}`)
+  const parseResult = parseMovesAndClocksFromPGN(pgnString)
+  const moves = parseResult.moves
+  const { whiteClock, blackClock } = parseResult
   const fen = extractFENFromMoves()
 
+  // Debug clock parsing
+  if (whiteClock || blackClock) {
+    console.log(`Clock data for ${white} vs ${black}:`, {
+      whiteClock,
+      blackClock,
+      movesSection: movesSection.substring(0, 200) + '...',
+    })
+  }
+
   const game: BroadcastGame = {
     id: generateGameId(white, black, event, site),
     white,
@@ -278,6 +290,8 @@ const parseSinglePGN = (pgnString: string): BroadcastGame | null => {
     chapterName: headers.ChapterName,
     utcDate: headers.UTCDate,
     utcTime: headers.UTCTime,
+    whiteClock,
+    blackClock,
   }
 
   // Note: Last move extraction would need proper move parsing to convert SAN to UCI
@@ -286,41 +300,110 @@ const parseSinglePGN = (pgnString: string): BroadcastGame | null => {
   return game
 }
 
-const parseMovesFromPGN = (movesSection: string): string[] => {
+const parseMovesAndClocksFromPGN = (
+  pgnString: string,
+): {
+  moves: string[]
+  whiteClock?: {
+    timeInSeconds: number
+    isActive: boolean
+    lastUpdateTime: number
+  }
+  blackClock?: {
+    timeInSeconds: number
+    isActive: boolean
+    lastUpdateTime: number
+  }
+} => {
   const moves: string[] = []
+  let whiteClock:
+    | { timeInSeconds: number; isActive: boolean; lastUpdateTime: number }
+    | undefined
+  let blackClock:
+    | { timeInSeconds: number; isActive: boolean; lastUpdateTime: number }
+    | undefined
 
-  // Remove comments, variations, and result
-  const cleanMoves = movesSection
-    .replace(/\{[^}]*\}/g, '') // Remove comments
-    .replace(/\([^)]*\)/g, '') // Remove variations
-    .replace(/\s*(1-0|0-1|1\/2-1\/2|\*)\s*$/, '') // Remove result
-    .trim()
-
-  // Split by move numbers and extract moves
-  const tokens = cleanMoves.split(/\s+/)
+  try {
+    // Use chess.js to parse the full PGN
+    const chess = new Chess()
+    const success = chess.loadPgn(pgnString)
+
+    if (!success) {
+      console.warn(
+        'Failed to parse PGN with chess.js, falling back to manual parsing',
+      )
+      return { moves }
+    }
 
-  for (const token of tokens) {
-    // Skip move numbers (e.g., "1.", "2.", etc.)
-    if (/^\d+\.+$/.test(token)) {
-      continue
+    // Get all moves from the game history
+    const history = chess.history({ verbose: true })
+    for (const move of history) {
+      moves.push(move.san)
     }
 
-    // Skip empty tokens
-    if (!token.trim()) {
-      continue
+    // Get comments which contain clock information
+    const comments = chess.getComments()
+    let lastWhiteClock: any = null
+    let lastBlackClock: any = null
+
+    for (const commentData of comments) {
+      const comment = commentData.comment
+
+      // Extract clock from comment using regex
+      const clockMatch = comment.match(/\[%clk\s+(\d+):(\d+)(?::(\d+))?\]/)
+      if (clockMatch) {
+        const hours = clockMatch[3] ? parseInt(clockMatch[1]) : 0
+        const minutes = clockMatch[3]
+          ? parseInt(clockMatch[2])
+          : parseInt(clockMatch[1])
+        const seconds = clockMatch[3]
+          ? parseInt(clockMatch[3])
+          : parseInt(clockMatch[2])
+
+        const timeInSeconds = hours * 3600 + minutes * 60 + seconds
+        const clockData = {
+          timeInSeconds,
+          isActive: false,
+          lastUpdateTime: Date.now(),
+        }
+
+        // Determine if this is white or black's move based on the FEN
+        const chess_temp = new Chess(commentData.fen)
+        const isWhiteToMove = chess_temp.turn() === 'b' // After white's move, it's black's turn
+
+        if (isWhiteToMove) {
+          lastWhiteClock = clockData
+        } else {
+          lastBlackClock = clockData
+        }
+
+        console.log(
+          `Found clock for ${isWhiteToMove ? 'white' : 'black'}: ${hours}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')} = ${timeInSeconds}s`,
+        )
+      }
     }
 
-    // Add valid moves
-    if (
-      /^[NBRQK]?[a-h]?[1-8]?x?[a-h][1-8](\=[NBRQ])?[\+\#]?$/.test(token) ||
-      token === 'O-O' ||
-      token === 'O-O-O'
-    ) {
-      moves.push(token)
+    whiteClock = lastWhiteClock
+    blackClock = lastBlackClock
+
+    // Determine which clock is active based on current turn
+    if (moves.length > 0) {
+      const finalPosition = new Chess()
+      finalPosition.loadPgn(pgnString)
+      const isCurrentlyWhiteTurn = finalPosition.turn() === 'w'
+
+      if (whiteClock) {
+        whiteClock.isActive = isCurrentlyWhiteTurn
+      }
+      if (blackClock) {
+        blackClock.isActive = !isCurrentlyWhiteTurn
+      }
     }
+  } catch (error) {
+    console.warn('Error parsing PGN with chess.js:', error)
   }
 
-  return moves
+  return { moves, whiteClock, blackClock }
 }
 
 const extractFENFromMoves = (): string | null => {
diff --git a/src/components/Analysis/BroadcastAnalysis.tsx b/src/components/Analysis/BroadcastAnalysis.tsx
index 55f9ee4a..a99aea8f 100644
--- a/src/components/Analysis/BroadcastAnalysis.tsx
+++ b/src/components/Analysis/BroadcastAnalysis.tsx
@@ -319,6 +319,23 @@ export const BroadcastAnalysis: React.FC<Props> = ({
                 analysisController.orientation === 'white' ? 'black' : 'white'
               }
               termination={game.termination?.winner}
+              clock={(() => {
+                const clock =
+                  analysisController.orientation === 'white'
+                    ? broadcastController.currentGame?.blackClock
+                    : broadcastController.currentGame?.whiteClock
+                console.log('Top PlayerInfo clock data:', {
+                  orientation: analysisController.orientation,
+                  currentGame:
+                    broadcastController.currentGame?.white +
+                    ' vs ' +
+                    broadcastController.currentGame?.black,
+                  whiteClock: broadcastController.currentGame?.whiteClock,
+                  blackClock: broadcastController.currentGame?.blackClock,
+                  selectedClock: clock,
+                })
+                return clock
+              })()}
             />
             <div className="desktop-board-container relative flex aspect-square">
               <GameBoard
@@ -362,6 +379,11 @@ export const BroadcastAnalysis: React.FC<Props> = ({
               }
               termination={game.termination?.winner}
               showArrowLegend={true}
+              clock={
+                analysisController.orientation === 'white'
+                  ? broadcastController.currentGame?.whiteClock
+                  : broadcastController.currentGame?.blackClock
+              }
             />
           </div>
           <ConfigurableScreens
diff --git a/src/components/Analysis/BroadcastGameList.tsx b/src/components/Analysis/BroadcastGameList.tsx
index aa926e1e..2716769a 100644
--- a/src/components/Analysis/BroadcastGameList.tsx
+++ b/src/components/Analysis/BroadcastGameList.tsx
@@ -37,17 +37,9 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
 
   const currentGames = useMemo(() => {
     if (!broadcastController.roundData?.games) {
-      console.log('No round data games available')
       return []
     }
-    const games = Array.from(broadcastController.roundData.games.values())
-    console.log(
-      'BroadcastGameList displaying',
-      games.length,
-      'games:',
-      games.map((g) => `${g.white} vs ${g.black}`),
-    )
-    return games
+    return Array.from(broadcastController.roundData.games.values())
   }, [broadcastController.roundData?.games])
 
   const getGameStatus = (game: BroadcastGame) => {
diff --git a/src/hooks/useBroadcastController.ts b/src/hooks/useBroadcastController.ts
index cae1ced7..f94bcdc0 100644
--- a/src/hooks/useBroadcastController.ts
+++ b/src/hooks/useBroadcastController.ts
@@ -312,28 +312,17 @@ export const useBroadcastController = (): BroadcastStreamController => {
       }
 
       lastPGNData.current = pgnData
-      console.log('Processing PGN update with length:', pgnData.length)
 
       const parseResult = parsePGNData(pgnData)
-      console.log('Parsed games count:', parseResult.games.length)
-      console.log(
-        'Game IDs:',
-        parseResult.games.map((g) => `${g.white} vs ${g.black}`),
-      )
 
       if (parseResult.errors.length > 0) {
         console.warn('PGN parsing errors:', parseResult.errors)
       }
 
       if (parseResult.games.length === 0) {
-        console.warn('No games found in PGN data')
         return
       }
 
-      // Determine if this is initial load (multiple games) or update (single game)
-      const isInitialLoad = parseResult.games.length > 1
-      console.log('Is initial load:', isInitialLoad)
-
       setRoundData((prevRoundData) => {
         // Start with existing games
         const existingGames =
@@ -364,8 +353,6 @@ export const useBroadcastController = (): BroadcastStreamController => {
           gameStates.current.set(game.id, newLiveGame)
         }
 
-        console.log('Updated games map, now has', updatedGames.size, 'games')
-
         const newRoundData: BroadcastRoundData = {
           roundId: currentRoundId.current || '',
           broadcastId: currentBroadcast?.tour.id || '',
diff --git a/src/types/broadcast/index.ts b/src/types/broadcast/index.ts
index 77dee34e..9fcdf3bd 100644
--- a/src/types/broadcast/index.ts
+++ b/src/types/broadcast/index.ts
@@ -50,6 +50,16 @@ export interface BroadcastGame {
   chapterName?: string
   utcDate?: string
   utcTime?: string
+  whiteClock?: {
+    timeInSeconds: number
+    isActive: boolean
+    lastUpdateTime: number
+  }
+  blackClock?: {
+    timeInSeconds: number
+    isActive: boolean
+    lastUpdateTime: number
+  }
 }
 
 export interface BroadcastRoundData {

From 706714fb791ca8ddc0ad2e121e451ae761a4a7bc Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 30 Jul 2025 23:48:57 -0400
Subject: [PATCH 06/17] fix: don't change games when new moves come in

---
 src/hooks/useBroadcastController.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useBroadcastController.ts b/src/hooks/useBroadcastController.ts
index f94bcdc0..70f56f75 100644
--- a/src/hooks/useBroadcastController.ts
+++ b/src/hooks/useBroadcastController.ts
@@ -337,8 +337,10 @@ export const useBroadcastController = (): BroadcastStreamController => {
           const existingGameState = gameStates.current.get(game.id)
           const newLiveGame = createLiveGameFromBroadcastGame(game)
 
-          // Play sound for new moves if game was already loaded
+          // Play sound for new moves only if this is the currently selected game
           if (
+            currentGame &&
+            game.id === currentGame.id &&
             existingGameState &&
             newLiveGame.moves.length > existingGameState.moves.length
           ) {
@@ -362,16 +364,17 @@ export const useBroadcastController = (): BroadcastStreamController => {
         return newRoundData
       })
 
-      // Update current game if it exists in the new data
+      // Update current game data if it's in the update, but don't switch to a different game
       if (currentGame) {
-        const updatedGame = parseResult.games.find(
+        const updatedCurrentGame = parseResult.games.find(
           (g) => g.id === currentGame.id,
         )
-        if (updatedGame) {
-          setCurrentGame(updatedGame)
+        if (updatedCurrentGame) {
+          // Update the currently selected game with new data (including clocks)
+          setCurrentGame(updatedCurrentGame)
         }
       } else if (parseResult.games.length > 0) {
-        // Auto-select first game if none selected
+        // Auto-select first game only if no game is currently selected
         setCurrentGame(parseResult.games[0])
       }
 

From b8f5f4d50399756ed41a806d1fb1fb5ab2f1393b Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Thu, 31 Jul 2025 00:12:26 -0400
Subject: [PATCH 07/17] fix: prevent rebuilding of game node/tree on new move

---
 src/hooks/useBroadcastController.ts           | 152 +++++++++++++-----
 .../broadcast/[broadcastId]/[roundId].tsx     |  43 +++--
 2 files changed, 142 insertions(+), 53 deletions(-)

diff --git a/src/hooks/useBroadcastController.ts b/src/hooks/useBroadcastController.ts
index 70f56f75..aa42ca7e 100644
--- a/src/hooks/useBroadcastController.ts
+++ b/src/hooks/useBroadcastController.ts
@@ -193,6 +193,10 @@ export const useBroadcastController = (): BroadcastStreamController => {
       if (roundData) {
         const game = roundData.games.get(gameId)
         if (game) {
+          console.log(
+            'Manual game selection:',
+            game.white + ' vs ' + game.black,
+          )
           setCurrentGame(game)
         }
       }
@@ -226,46 +230,99 @@ export const useBroadcastController = (): BroadcastStreamController => {
       const startingFen =
         'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'
 
-      // Build game tree from moves
-      const tree = new GameTree(startingFen)
-      const chess = new Chess(startingFen)
-      let currentNode = tree.getRoot()
-
-      const gameStates = [
-        {
-          board: startingFen,
-          lastMove: undefined as [string, string] | undefined,
-          san: undefined as string | undefined,
-          check: false,
-          maia_values: {},
-        },
-      ]
+      // Check if we have an existing game state to build upon
+      const existingLiveGame = gameStates.current.get(broadcastGame.id)
+
+      let tree: GameTree
+      let movesList: any[]
+      let existingMoveCount = 0
+
+      if (existingLiveGame && existingLiveGame.tree) {
+        // Reuse existing tree and states - preserve all analysis and variations
+        tree = existingLiveGame.tree
+        movesList = [...existingLiveGame.moves]
+        existingMoveCount = movesList.length - 1 // Subtract 1 for initial position
+        console.log(
+          `Reusing existing tree with ${existingMoveCount} moves, adding ${broadcastGame.moves.length - existingMoveCount} new moves`,
+        )
+      } else {
+        // Create new tree only for new games
+        tree = new GameTree(startingFen)
+        movesList = [
+          {
+            board: startingFen,
+            lastMove: undefined as [string, string] | undefined,
+            san: undefined as string | undefined,
+            check: false,
+            maia_values: {},
+          },
+        ]
+        console.log(
+          `Creating new tree for ${broadcastGame.white} vs ${broadcastGame.black}`,
+        )
+      }
 
-      // Process each move
-      for (const moveStr of broadcastGame.moves) {
-        try {
-          const move = chess.move(moveStr)
-          if (move) {
-            const newFen = chess.fen()
-            const uci =
-              move.from + move.to + (move.promotion ? move.promotion : '')
-
-            gameStates.push({
-              board: newFen,
-              lastMove: [move.from, move.to],
-              san: move.san,
-              check: chess.inCheck(),
-              maia_values: {},
-            })
-
-            currentNode = tree.addMainMove(currentNode, newFen, uci, move.san)
+      // Only process new moves that we don't already have
+      if (broadcastGame.moves.length > existingMoveCount) {
+        const chess = new Chess(startingFen)
+        let currentNode = tree.getRoot()
+
+        // Replay existing moves to get to the current position
+        for (let i = 0; i < existingMoveCount; i++) {
+          try {
+            const move = chess.move(broadcastGame.moves[i])
+            if (move && currentNode.mainChild) {
+              currentNode = currentNode.mainChild
+            }
+          } catch (error) {
+            console.warn(
+              `Error replaying existing move ${broadcastGame.moves[i]}:`,
+              error,
+            )
+            break
+          }
+        }
+
+        // Add only the new moves
+        for (let i = existingMoveCount; i < broadcastGame.moves.length; i++) {
+          try {
+            const moveStr = broadcastGame.moves[i]
+            const move = chess.move(moveStr)
+            if (move) {
+              const newFen = chess.fen()
+              const uci =
+                move.from + move.to + (move.promotion ? move.promotion : '')
+
+              movesList.push({
+                board: newFen,
+                lastMove: [move.from, move.to],
+                san: move.san,
+                check: chess.inCheck(),
+                maia_values: {},
+              })
+
+              currentNode = tree.addMainMove(currentNode, newFen, uci, move.san)
+              console.log(`Added new move: ${move.san}`)
+            }
+          } catch (error) {
+            console.warn(
+              `Error processing new move ${broadcastGame.moves[i]}:`,
+              error,
+            )
+            break
           }
-        } catch (error) {
-          console.warn(`Error processing move ${moveStr}:`, error)
-          break
         }
       }
 
+      // Preserve existing availableMoves array (legacy) and extend if needed
+      const availableMoves =
+        existingLiveGame?.availableMoves || new Array(movesList.length).fill({})
+
+      // Extend availableMoves array if we have new moves
+      while (availableMoves.length < movesList.length) {
+        availableMoves.push({})
+      }
+
       return {
         id: broadcastGame.id,
         blackPlayer: {
@@ -278,10 +335,8 @@ export const useBroadcastController = (): BroadcastStreamController => {
         },
         gameType: 'broadcast',
         type: 'stream' as const,
-        moves: gameStates,
-        availableMoves: new Array(gameStates.length).fill(
-          {},
-        ) as AvailableMoves[],
+        moves: movesList,
+        availableMoves: availableMoves as AvailableMoves[],
         termination:
           broadcastGame.result === '*'
             ? undefined
@@ -294,8 +349,8 @@ export const useBroadcastController = (): BroadcastStreamController => {
                       ? 'black'
                       : 'none',
               },
-        maiaEvaluations: [],
-        stockfishEvaluations: [],
+        maiaEvaluations: existingLiveGame?.maiaEvaluations || [],
+        stockfishEvaluations: existingLiveGame?.stockfishEvaluations || [],
         loadedFen: broadcastGame.fen,
         loaded: true,
         tree,
@@ -366,15 +421,30 @@ export const useBroadcastController = (): BroadcastStreamController => {
 
       // Update current game data if it's in the update, but don't switch to a different game
       if (currentGame) {
+        console.log(
+          'Current game selected:',
+          currentGame.white + ' vs ' + currentGame.black,
+        )
         const updatedCurrentGame = parseResult.games.find(
           (g) => g.id === currentGame.id,
         )
         if (updatedCurrentGame) {
+          console.log('Updating current game with new data')
           // Update the currently selected game with new data (including clocks)
           setCurrentGame(updatedCurrentGame)
+        } else {
+          console.log(
+            'Current game not in update - keeping selection unchanged',
+          )
         }
+        // Important: Do NOT change game selection if current game is not in the update
       } else if (parseResult.games.length > 0) {
         // Auto-select first game only if no game is currently selected
+        console.log('No game selected - auto-selecting first game')
+        console.log(
+          'Auto-selecting:',
+          parseResult.games[0].white + ' vs ' + parseResult.games[0].black,
+        )
         setCurrentGame(parseResult.games[0])
       }
 
diff --git a/src/pages/broadcast/[broadcastId]/[roundId].tsx b/src/pages/broadcast/[broadcastId]/[roundId].tsx
index ec59c3b9..31914285 100644
--- a/src/pages/broadcast/[broadcastId]/[roundId].tsx
+++ b/src/pages/broadcast/[broadcastId]/[roundId].tsx
@@ -121,31 +121,45 @@ const BroadcastAnalysisPage: NextPage = () => {
 
   useEffect(() => {
     const currentLiveGame = (broadcastController as any).currentLiveGame
-    if (currentLiveGame?.tree && analysisController) {
+    if (
+      currentLiveGame?.tree &&
+      analysisController &&
+      analysisController.currentNode
+    ) {
       try {
         const mainLine = currentLiveGame.tree.getMainLine()
         const currentMoveCount = mainLine.length
 
         // If new moves have been added to the game
         if (currentMoveCount > lastGameMoveCount.current) {
-          lastGameMoveCount.current = currentMoveCount
+          console.log(
+            `New move detected: ${lastGameMoveCount.current} -> ${currentMoveCount}`,
+          )
 
           // Find the last node in the main line
-          let lastNode = currentLiveGame.tree.getRoot()
-          while (lastNode.mainChild) {
-            lastNode = lastNode.mainChild
-          }
+          const lastNode = mainLine[mainLine.length - 1]
 
-          // Only auto-follow if user is currently at the previous last node
-          if (
-            analysisController.currentNode &&
-            lastNode.parent === analysisController.currentNode
-          ) {
+          // Only auto-follow if user is currently at the previous last node (or close to it)
+          const isAtLatestPosition =
+            lastNode.parent === analysisController.currentNode ||
+            lastNode === analysisController.currentNode
+
+          console.log('Auto-follow check:', {
+            isAtLatestPosition,
+            currentNodeId: analysisController.currentNode.id,
+            lastNodeParentId: lastNode.parent?.id,
+            lastNodeId: lastNode.id,
+          })
+
+          if (isAtLatestPosition) {
+            console.log('Auto-following to new move')
             analysisController.setCurrentNode(lastNode)
           }
+
+          lastGameMoveCount.current = currentMoveCount
         }
       } catch (error) {
-        console.error('Error setting current node:', error)
+        console.error('Error in auto-follow logic:', error)
       }
     }
   }, [(broadcastController as any).currentLiveGame, analysisController])
@@ -157,6 +171,11 @@ const BroadcastAnalysisPage: NextPage = () => {
       const mainLine = currentLiveGame.tree.getMainLine()
       if (mainLine.length > 0) {
         analysisController.setCurrentNode(mainLine[mainLine.length - 1])
+        // Update the move count tracker for the new game
+        lastGameMoveCount.current = mainLine.length
+      } else {
+        // Reset move count for games with no moves
+        lastGameMoveCount.current = 0
       }
     }
   }, [broadcastController.currentGame?.id])

From bfd4dc48c9a7407cf66ba13b6e8b72162beec6ee Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Thu, 31 Jul 2025 00:17:54 -0400
Subject: [PATCH 08/17] fix: don't change games when new moves come in

---
 src/hooks/useBroadcastController.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useBroadcastController.ts b/src/hooks/useBroadcastController.ts
index aa42ca7e..f16bfbc9 100644
--- a/src/hooks/useBroadcastController.ts
+++ b/src/hooks/useBroadcastController.ts
@@ -378,6 +378,8 @@ export const useBroadcastController = (): BroadcastStreamController => {
         return
       }
 
+      let allGamesAfterUpdate: BroadcastGame[] = []
+
       setRoundData((prevRoundData) => {
         // Start with existing games
         const existingGames =
@@ -410,6 +412,9 @@ export const useBroadcastController = (): BroadcastStreamController => {
           gameStates.current.set(game.id, newLiveGame)
         }
 
+        // Store all games for auto-selection logic
+        allGamesAfterUpdate = Array.from(updatedGames.values())
+
         const newRoundData: BroadcastRoundData = {
           roundId: currentRoundId.current || '',
           broadcastId: currentBroadcast?.tour.id || '',
@@ -438,14 +443,15 @@ export const useBroadcastController = (): BroadcastStreamController => {
           )
         }
         // Important: Do NOT change game selection if current game is not in the update
-      } else if (parseResult.games.length > 0) {
+      } else if (allGamesAfterUpdate.length > 0) {
         // Auto-select first game only if no game is currently selected
+        // Use the first game from the complete games list, not just the updated games
         console.log('No game selected - auto-selecting first game')
         console.log(
           'Auto-selecting:',
-          parseResult.games[0].white + ' vs ' + parseResult.games[0].black,
+          allGamesAfterUpdate[0].white + ' vs ' + allGamesAfterUpdate[0].black,
         )
-        setCurrentGame(parseResult.games[0])
+        setCurrentGame(allGamesAfterUpdate[0])
       }
 
       // Update broadcast state

From bfeca233a3fcda353398a1d5380e663c11ad9116 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Thu, 31 Jul 2025 00:33:19 -0400
Subject: [PATCH 09/17] style: improve broadcast list page

---
 src/hooks/useBroadcastController.ts | 52 +++++++++++++++--------------
 src/pages/broadcast/index.tsx       | 46 +++++++++++++------------
 2 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/src/hooks/useBroadcastController.ts b/src/hooks/useBroadcastController.ts
index f16bfbc9..f00f8a07 100644
--- a/src/hooks/useBroadcastController.ts
+++ b/src/hooks/useBroadcastController.ts
@@ -63,7 +63,7 @@ export const useBroadcastController = (): BroadcastStreamController => {
       // Organize broadcasts into sections
       const sections: BroadcastSection[] = []
 
-      // Official active broadcasts
+      // 1. Official active broadcasts (Lichess official live tournaments)
       const officialActive = officialBroadcasts.filter((b) =>
         b.rounds.some((r) => r.ongoing),
       )
@@ -75,7 +75,23 @@ export const useBroadcastController = (): BroadcastStreamController => {
         })
       }
 
-      // Top active broadcasts (unofficial)
+      // 2. Official upcoming broadcasts (Lichess official upcoming tournaments) - max 4
+      const officialUpcoming = officialBroadcasts
+        .filter(
+          (b) =>
+            b.rounds.every((r) => !r.ongoing) &&
+            b.rounds.some((r) => r.startsAt > Date.now()),
+        )
+        .slice(0, 4) // Limit to 4
+      if (officialUpcoming.length > 0) {
+        sections.push({
+          title: 'Upcoming Official Tournaments',
+          broadcasts: officialUpcoming,
+          type: 'official-upcoming',
+        })
+      }
+
+      // 3. Community live broadcasts (all live community broadcasts)
       const unofficialActive = topBroadcasts.active
         .map(convertTopBroadcastToBroadcast)
         .filter(
@@ -86,37 +102,23 @@ export const useBroadcastController = (): BroadcastStreamController => {
         sections.push({
           title: 'Community Live Broadcasts',
           broadcasts: unofficialActive,
-          type: 'unofficial-active',
-        })
-      }
-
-      // Official upcoming broadcasts
-      const officialUpcoming = officialBroadcasts.filter(
-        (b) =>
-          b.rounds.every((r) => !r.ongoing) &&
-          b.rounds.some((r) => r.startsAt > Date.now()),
-      )
-      if (officialUpcoming.length > 0) {
-        sections.push({
-          title: 'Upcoming Official Tournaments',
-          broadcasts: officialUpcoming,
-          type: 'official-upcoming',
+          type: 'community-active',
         })
       }
 
-      // Top upcoming broadcasts (unofficial)
-      const unofficialUpcoming = topBroadcasts.upcoming.map(
-        convertTopBroadcastToBroadcast,
-      )
+      // 4. Community upcoming broadcasts - max 5
+      const unofficialUpcoming = topBroadcasts.upcoming
+        .map(convertTopBroadcastToBroadcast)
+        .slice(0, 5) // Limit to 5
       if (unofficialUpcoming.length > 0) {
         sections.push({
           title: 'Upcoming Community Broadcasts',
           broadcasts: unofficialUpcoming,
-          type: 'unofficial-upcoming',
+          type: 'community-upcoming',
         })
       }
 
-      // Past broadcasts (mix of official and top)
+      // 5. Past tournaments (separate section) - max 8
       const officialPast = officialBroadcasts.filter(
         (b) =>
           b.rounds.every((r) => !r.ongoing) &&
@@ -127,10 +129,10 @@ export const useBroadcastController = (): BroadcastStreamController => {
         ...topBroadcasts.past.currentPageResults.map(
           convertTopBroadcastToBroadcast,
         ),
-      ]
+      ].slice(0, 8) // Limit to 8
       if (pastBroadcasts.length > 0) {
         sections.push({
-          title: 'Recent Tournaments',
+          title: 'Past Tournaments',
           broadcasts: pastBroadcasts,
           type: 'past',
         })
diff --git a/src/pages/broadcast/index.tsx b/src/pages/broadcast/index.tsx
index ff15a3c7..709af530 100644
--- a/src/pages/broadcast/index.tsx
+++ b/src/pages/broadcast/index.tsx
@@ -103,8 +103,8 @@ const BroadcastsPage: NextPage = () => {
         <Head>
           <title>Live Broadcasts – Maia Chess</title>
         </Head>
-        <div className="flex min-h-screen items-center justify-center bg-background-1">
-          <div className="text-center">
+        <div className="flex min-h-screen items-center justify-center bg-backdrop">
+          <div className="rounded-lg border border-white/10 bg-background-1 p-6 text-center">
             <h2 className="mb-4 text-xl font-semibold text-red-400">
               Error Loading Broadcasts
             </h2>
@@ -113,7 +113,7 @@ const BroadcastsPage: NextPage = () => {
             </p>
             <button
               onClick={() => window.location.reload()}
-              className="rounded bg-human-4 px-4 py-2 text-white transition hover:bg-human-4/80"
+              className="rounded border border-human-4/30 bg-human-4 px-4 py-2 text-white transition-all duration-200 hover:border-human-4/50 hover:bg-human-4/80"
             >
               Try Again
             </button>
@@ -133,9 +133,9 @@ const BroadcastsPage: NextPage = () => {
         />
       </Head>
 
-      <div className="min-h-screen bg-background-1">
+      <div className="min-h-screen bg-backdrop">
         <motion.div
-          className="container mx-auto px-4 py-8"
+          className="container mx-auto px-6 py-8"
           variants={containerVariants}
           initial="hidden"
           animate="visible"
@@ -165,24 +165,24 @@ const BroadcastsPage: NextPage = () => {
               </p>
               <button
                 onClick={() => broadcastController.loadBroadcasts()}
-                className="mt-4 rounded bg-human-4 px-4 py-2 text-white transition hover:bg-human-4/80"
+                className="mt-4 rounded border border-human-4/30 bg-human-4 px-4 py-2 text-white transition-all duration-200 hover:border-human-4/50 hover:bg-human-4/80"
               >
                 Refresh
               </button>
             </motion.div>
           ) : (
-            <div className="space-y-8">
+            <div className="space-y-6">
               {broadcastController.broadcastSections.map(
                 (section, sectionIndex) => (
                   <motion.div
                     key={section.type}
                     variants={itemVariants}
-                    className="space-y-4"
+                    className="space-y-3"
                   >
                     <h2 className="flex items-center gap-2 text-xl font-semibold text-primary">
                       {section.title}
                       {(section.type === 'official-active' ||
-                        section.type === 'unofficial-active') && (
+                        section.type === 'community-active') && (
                         <div className="flex items-center gap-1">
                           <div className="h-2 w-2 animate-pulse rounded-full bg-red-500"></div>
                           <span className="text-xs font-medium text-red-400">
@@ -192,25 +192,27 @@ const BroadcastsPage: NextPage = () => {
                       )}
                     </h2>
 
-                    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                    <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
                       {section.broadcasts.map((broadcast, index) => {
                         const ongoingRounds = broadcast.rounds.filter(
                           (r) => r.ongoing,
                         )
                         const hasOngoingRounds = ongoingRounds.length > 0
-                        const isActive = section.type.includes('active')
+                        const isActive =
+                          section.type.includes('active') ||
+                          section.type.includes('community')
                         const isPast = section.type === 'past'
 
                         return (
                           <motion.div
                             key={broadcast.tour.id}
                             variants={itemVariants}
-                            className="overflow-hidden rounded-lg bg-background-2 shadow-lg transition-transform hover:scale-105"
+                            className="overflow-hidden rounded-lg border border-white/10 bg-background-1 transition-all duration-200 hover:border-white/20 hover:bg-background-1/80"
                           >
-                            <div className="p-6">
-                              <div className="mb-4 flex items-start justify-between">
+                            <div className="p-3">
+                              <div className="mb-3 flex items-start justify-between">
                                 <div className="flex-1">
-                                  <h3 className="mb-1 line-clamp-2 text-lg font-semibold text-primary">
+                                  <h3 className="mb-1 line-clamp-2 text-base font-semibold text-primary">
                                     {broadcast.tour.name}
                                   </h3>
                                   {hasOngoingRounds && isActive && (
@@ -234,8 +236,8 @@ const BroadcastsPage: NextPage = () => {
                                 </div>
                               </div>
 
-                              <div className="mb-4">
-                                <div className="mb-2 text-sm font-medium text-primary">
+                              <div className="mb-3 border-t border-white/10 pt-2">
+                                <div className="mb-1.5 text-xs font-medium text-primary">
                                   Rounds ({broadcast.rounds.length})
                                 </div>
                                 <div className="space-y-1">
@@ -252,7 +254,7 @@ const BroadcastsPage: NextPage = () => {
                                           round.ongoing
                                             ? 'bg-red-500/20 text-red-400'
                                             : isPast
-                                              ? 'bg-background-3 text-secondary'
+                                              ? 'bg-background-2 text-secondary'
                                               : 'bg-blue-500/20 text-blue-400'
                                         }`}
                                       >
@@ -275,12 +277,12 @@ const BroadcastsPage: NextPage = () => {
                               <button
                                 onClick={() => handleSelectBroadcast(broadcast)}
                                 disabled={!hasOngoingRounds && !isPast}
-                                className={`w-full rounded py-2 text-sm font-medium transition ${
+                                className={`w-full rounded border py-1.5 text-sm font-medium transition-all duration-200 ${
                                   hasOngoingRounds
-                                    ? 'bg-human-4 text-white hover:bg-human-4/80'
+                                    ? 'border-human-4/30 bg-human-4 text-white hover:border-human-4/50 hover:bg-human-4/80'
                                     : isPast
-                                      ? 'bg-background-3 text-secondary hover:bg-background-3/80'
-                                      : 'cursor-not-allowed bg-background-3/50 text-secondary/50'
+                                      ? 'border-white/10 bg-background-2 text-secondary hover:border-white/20 hover:bg-background-2/80'
+                                      : 'cursor-not-allowed border-white/5 bg-background-2/50 text-secondary/50'
                                 }`}
                               >
                                 {hasOngoingRounds

From 52da2191a5638acf8b17e9e85f89c70c1506a314 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Tue, 5 Aug 2025 23:21:36 -0400
Subject: [PATCH 10/17] fix: game swapping

---
 src/hooks/useBroadcastController.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/hooks/useBroadcastController.ts b/src/hooks/useBroadcastController.ts
index f00f8a07..0da7286f 100644
--- a/src/hooks/useBroadcastController.ts
+++ b/src/hooks/useBroadcastController.ts
@@ -380,6 +380,9 @@ export const useBroadcastController = (): BroadcastStreamController => {
         return
       }
 
+      // Store the current game ID to preserve selection
+      const currentGameId = currentGame?.id
+
       let allGamesAfterUpdate: BroadcastGame[] = []
 
       setRoundData((prevRoundData) => {
@@ -398,8 +401,8 @@ export const useBroadcastController = (): BroadcastStreamController => {
 
           // Play sound for new moves only if this is the currently selected game
           if (
-            currentGame &&
-            game.id === currentGame.id &&
+            currentGameId &&
+            game.id === currentGameId &&
             existingGameState &&
             newLiveGame.moves.length > existingGameState.moves.length
           ) {
@@ -426,14 +429,14 @@ export const useBroadcastController = (): BroadcastStreamController => {
         return newRoundData
       })
 
-      // Update current game data if it's in the update, but don't switch to a different game
-      if (currentGame) {
+      // Preserve game selection - only update current game if it was already selected
+      if (currentGameId) {
         console.log(
           'Current game selected:',
-          currentGame.white + ' vs ' + currentGame.black,
+          currentGame?.white + ' vs ' + currentGame?.black,
         )
         const updatedCurrentGame = parseResult.games.find(
-          (g) => g.id === currentGame.id,
+          (g) => g.id === currentGameId,
         )
         if (updatedCurrentGame) {
           console.log('Updating current game with new data')
@@ -443,11 +446,11 @@ export const useBroadcastController = (): BroadcastStreamController => {
           console.log(
             'Current game not in update - keeping selection unchanged',
           )
+          // Keep the current game selection even if it's not in this update
+          // This prevents auto-switching to the first game
         }
-        // Important: Do NOT change game selection if current game is not in the update
       } else if (allGamesAfterUpdate.length > 0) {
         // Auto-select first game only if no game is currently selected
-        // Use the first game from the complete games list, not just the updated games
         console.log('No game selected - auto-selecting first game')
         console.log(
           'Auto-selecting:',

From adc6c15661db887c17d5fbcd91181b6a8e2f5e9a Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 6 Aug 2025 00:32:41 -0400
Subject: [PATCH 11/17] fix: game switching bug

---
 src/hooks/useBroadcastController.ts           | 38 +++++++++++++++----
 .../broadcast/[broadcastId]/[roundId].tsx     |  7 ----
 src/pages/broadcast/index.tsx                 |  2 +-
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/hooks/useBroadcastController.ts b/src/hooks/useBroadcastController.ts
index 0da7286f..fa9c69d8 100644
--- a/src/hooks/useBroadcastController.ts
+++ b/src/hooks/useBroadcastController.ts
@@ -45,6 +45,12 @@ export const useBroadcastController = (): BroadcastStreamController => {
   const currentRoundId = useRef<string | null>(null)
   const gameStates = useRef<Map<string, LiveGame>>(new Map())
   const lastPGNData = useRef<string>('')
+  const currentGameRef = useRef<BroadcastGame | null>(null)
+
+  // Keep ref in sync with state
+  useEffect(() => {
+    currentGameRef.current = currentGame
+  }, [currentGame])
 
   const loadBroadcasts = useCallback(async () => {
     try {
@@ -102,7 +108,7 @@ export const useBroadcastController = (): BroadcastStreamController => {
         sections.push({
           title: 'Community Live Broadcasts',
           broadcasts: unofficialActive,
-          type: 'community-active',
+          type: 'unofficial-active',
         })
       }
 
@@ -114,7 +120,7 @@ export const useBroadcastController = (): BroadcastStreamController => {
         sections.push({
           title: 'Upcoming Community Broadcasts',
           broadcasts: unofficialUpcoming,
-          type: 'community-upcoming',
+          type: 'unofficial-upcoming',
         })
       }
 
@@ -223,6 +229,7 @@ export const useBroadcastController = (): BroadcastStreamController => {
     })
 
     currentRoundId.current = null
+    setCurrentGame(null)
     gameStates.current.clear()
     lastPGNData.current = ''
   }, [])
@@ -381,7 +388,13 @@ export const useBroadcastController = (): BroadcastStreamController => {
       }
 
       // Store the current game ID to preserve selection
-      const currentGameId = currentGame?.id
+      const currentGameId = currentGameRef.current?.id
+      console.log(
+        'handlePGNUpdate - currentGameId:',
+        currentGameId,
+        'currentGame:',
+        currentGameRef.current?.white + ' vs ' + currentGameRef.current?.black,
+      )
 
       let allGamesAfterUpdate: BroadcastGame[] = []
 
@@ -433,7 +446,9 @@ export const useBroadcastController = (): BroadcastStreamController => {
       if (currentGameId) {
         console.log(
           'Current game selected:',
-          currentGame?.white + ' vs ' + currentGame?.black,
+          currentGameRef.current?.white +
+            ' vs ' +
+            currentGameRef.current?.black,
         )
         const updatedCurrentGame = parseResult.games.find(
           (g) => g.id === currentGameId,
@@ -449,14 +464,23 @@ export const useBroadcastController = (): BroadcastStreamController => {
           // Keep the current game selection even if it's not in this update
           // This prevents auto-switching to the first game
         }
-      } else if (allGamesAfterUpdate.length > 0) {
-        // Auto-select first game only if no game is currently selected
+      } else if (!currentGameRef.current && allGamesAfterUpdate.length > 0) {
+        // Auto-select first game only if no game is currently selected at all
         console.log('No game selected - auto-selecting first game')
         console.log(
           'Auto-selecting:',
           allGamesAfterUpdate[0].white + ' vs ' + allGamesAfterUpdate[0].black,
         )
         setCurrentGame(allGamesAfterUpdate[0])
+      } else {
+        console.log(
+          'No action taken - currentGameId:',
+          currentGameId,
+          'currentGame exists:',
+          !!currentGameRef.current,
+          'allGamesAfterUpdate.length:',
+          allGamesAfterUpdate.length,
+        )
       }
 
       // Update broadcast state
@@ -469,7 +493,7 @@ export const useBroadcastController = (): BroadcastStreamController => {
         error: null,
       }))
     },
-    [currentBroadcast, currentGame, createLiveGameFromBroadcastGame],
+    [currentBroadcast, createLiveGameFromBroadcastGame],
   )
 
   const handleStreamComplete = useCallback(() => {
diff --git a/src/pages/broadcast/[broadcastId]/[roundId].tsx b/src/pages/broadcast/[broadcastId]/[roundId].tsx
index 31914285..163bf290 100644
--- a/src/pages/broadcast/[broadcastId]/[roundId].tsx
+++ b/src/pages/broadcast/[broadcastId]/[roundId].tsx
@@ -144,13 +144,6 @@ const BroadcastAnalysisPage: NextPage = () => {
             lastNode.parent === analysisController.currentNode ||
             lastNode === analysisController.currentNode
 
-          console.log('Auto-follow check:', {
-            isAtLatestPosition,
-            currentNodeId: analysisController.currentNode.id,
-            lastNodeParentId: lastNode.parent?.id,
-            lastNodeId: lastNode.id,
-          })
-
           if (isAtLatestPosition) {
             console.log('Auto-following to new move')
             analysisController.setCurrentNode(lastNode)
diff --git a/src/pages/broadcast/index.tsx b/src/pages/broadcast/index.tsx
index 709af530..77861ee0 100644
--- a/src/pages/broadcast/index.tsx
+++ b/src/pages/broadcast/index.tsx
@@ -182,7 +182,7 @@ const BroadcastsPage: NextPage = () => {
                     <h2 className="flex items-center gap-2 text-xl font-semibold text-primary">
                       {section.title}
                       {(section.type === 'official-active' ||
-                        section.type === 'community-active') && (
+                        section.type === 'unofficial-active') && (
                         <div className="flex items-center gap-1">
                           <div className="h-2 w-2 animate-pulse rounded-full bg-red-500"></div>
                           <span className="text-xs font-medium text-red-400">

From 8c1cc7863886d7a9f3a3f77d4950fd7ba30db9af Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 6 Aug 2025 00:44:37 -0400
Subject: [PATCH 12/17] fix: add ability to see all previous rounds in
 broadcast

---
 src/api/lichess/broadcasts.ts                 | 39 ++++++++
 src/hooks/useBroadcastController.ts           | 89 +++++++++++++++++--
 .../broadcast/[broadcastId]/[roundId].tsx     |  2 +-
 src/types/broadcast/index.ts                  |  2 +-
 4 files changed, 121 insertions(+), 11 deletions(-)

diff --git a/src/api/lichess/broadcasts.ts b/src/api/lichess/broadcasts.ts
index 0482b737..7526d1e9 100644
--- a/src/api/lichess/broadcasts.ts
+++ b/src/api/lichess/broadcasts.ts
@@ -68,6 +68,45 @@ export const getLichessBroadcasts = async (): Promise<Broadcast[]> => {
   })
 }
 
+export const getLichessBroadcastById = async (
+  broadcastId: string,
+): Promise<Broadcast | null> => {
+  try {
+    console.log('Fetching broadcast by ID:', broadcastId)
+    const response = await fetch(
+      `https://lichess.org/api/broadcast/${broadcastId}`,
+      {
+        headers: {
+          Accept: 'application/json',
+        },
+      },
+    )
+
+    if (!response.ok) {
+      console.error(`Failed to fetch broadcast: ${response.status}`)
+      return null
+    }
+
+    const data = await response.json()
+    console.log('Broadcast data received:', {
+      name: data.tour?.name,
+      rounds: data.rounds?.length,
+      roundNames: data.rounds?.map((r: any) => r.name),
+    })
+
+    // Validate that this looks like broadcast data
+    if (data.tour && data.rounds) {
+      return data as Broadcast
+    }
+
+    console.error('Invalid broadcast data structure')
+    return null
+  } catch (error) {
+    console.error('Error fetching broadcast by ID:', error)
+    return null
+  }
+}
+
 export const getLichessTopBroadcasts =
   async (): Promise<TopBroadcastsResponse> => {
     const response = await fetch('https://lichess.org/api/broadcast/top', {
diff --git a/src/hooks/useBroadcastController.ts b/src/hooks/useBroadcastController.ts
index fa9c69d8..df93cdf7 100644
--- a/src/hooks/useBroadcastController.ts
+++ b/src/hooks/useBroadcastController.ts
@@ -14,6 +14,7 @@ import {
 } from 'src/types'
 import {
   getLichessBroadcasts,
+  getLichessBroadcastById,
   getLichessTopBroadcasts,
   convertTopBroadcastToBroadcast,
   getBroadcastRoundPGN,
@@ -145,6 +146,17 @@ export const useBroadcastController = (): BroadcastStreamController => {
       }
 
       setBroadcastSections(sections)
+      console.log(
+        'Loaded broadcasts:',
+        sections.map((s) => ({
+          title: s.title,
+          broadcasts: s.broadcasts.map((b) => ({
+            name: b.tour.name,
+            rounds: b.rounds.length,
+            roundNames: b.rounds.map((r) => r.name),
+          })),
+        })),
+      )
       setBroadcastState((prev) => ({ ...prev, isConnecting: false }))
     } catch (error) {
       console.error('Error loading broadcasts:', error)
@@ -158,14 +170,44 @@ export const useBroadcastController = (): BroadcastStreamController => {
   }, [])
 
   const selectBroadcast = useCallback(
-    (broadcastId: string) => {
-      // Find broadcast across all sections
+    async (broadcastId: string) => {
+      console.log('Selecting broadcast:', broadcastId)
+
+      // Always fetch complete broadcast data directly from API to ensure we get ALL rounds
+      // The /api/broadcast endpoint often only returns currently ongoing rounds
       let broadcast: Broadcast | undefined
-      for (const section of broadcastSections) {
-        broadcast = section.broadcasts.find((b) => b.tour.id === broadcastId)
-        if (broadcast) break
+      try {
+        console.log('Fetching complete broadcast data from API...')
+        const fetchedBroadcast = await getLichessBroadcastById(broadcastId)
+        if (fetchedBroadcast) {
+          broadcast = fetchedBroadcast
+          console.log('✓ Got complete broadcast data with all rounds')
+        }
+      } catch (error) {
+        console.error('Failed to get broadcast by ID:', error)
+      }
+
+      // Fallback: use data from sections if API call failed
+      if (!broadcast) {
+        console.log('API call failed, falling back to section data...')
+        for (const section of broadcastSections) {
+          broadcast = section.broadcasts.find((b) => b.tour.id === broadcastId)
+          if (broadcast) {
+            console.log('⚠ Found in sections but may have incomplete rounds')
+            break
+          }
+        }
       }
+
       if (broadcast) {
+        console.log(
+          'Selected broadcast:',
+          broadcast.tour.name,
+          'with',
+          broadcast.rounds.length,
+          'rounds:',
+          broadcast.rounds.map((r) => r.name),
+        )
         setCurrentBroadcast(broadcast)
         // Auto-select default round if available
         const defaultRound =
@@ -175,6 +217,8 @@ export const useBroadcastController = (): BroadcastStreamController => {
         if (defaultRound) {
           setCurrentRound(defaultRound)
         }
+      } else {
+        console.error('Broadcast not found:', broadcastId)
       }
     },
     [broadcastSections],
@@ -185,11 +229,33 @@ export const useBroadcastController = (): BroadcastStreamController => {
       if (currentBroadcast) {
         const round = currentBroadcast.rounds.find((r) => r.id === roundId)
         if (round) {
-          setCurrentRound(round)
+          console.log('Selecting round:', round.name, `(${roundId})`)
+
           // Stop current stream if different round
           if (currentRoundId.current !== roundId) {
-            stopRoundStream()
+            console.log('Switching to different round, stopping current stream')
+            // Stop the current stream
+            if (abortController.current) {
+              abortController.current.abort()
+              abortController.current = null
+            }
+            setBroadcastState((prev) => ({
+              ...prev,
+              isConnected: false,
+              isLive: false,
+            }))
+            currentRoundId.current = null
+            gameStates.current.clear()
+            lastPGNData.current = ''
+
+            // Clear current game selection when switching rounds
+            setCurrentGame(null)
+            // Clear round data so games list shows loading state
+            setRoundData(null)
           }
+
+          setCurrentRound(round)
+          // The useEffect will automatically start streaming the new round
         }
       }
     },
@@ -557,13 +623,18 @@ export const useBroadcastController = (): BroadcastStreamController => {
     }
   }, [startRoundStream])
 
-  // Auto-start stream when round is selected and ongoing
+  // Auto-start stream when any round is selected
   useEffect(() => {
     if (
-      currentRound?.ongoing &&
+      currentRound &&
       !broadcastState.isConnecting &&
       !broadcastState.isConnected
     ) {
+      console.log(
+        'Starting stream for selected round:',
+        currentRound.name,
+        currentRound.ongoing ? '(Live)' : '(Past/Future)',
+      )
       startRoundStream(currentRound.id)
     }
   }, [
diff --git a/src/pages/broadcast/[broadcastId]/[roundId].tsx b/src/pages/broadcast/[broadcastId]/[roundId].tsx
index 163bf290..811fa288 100644
--- a/src/pages/broadcast/[broadcastId]/[roundId].tsx
+++ b/src/pages/broadcast/[broadcastId]/[roundId].tsx
@@ -64,7 +64,7 @@ const BroadcastAnalysisPage: NextPage = () => {
         }
 
         // Select broadcast and round
-        broadcastController.selectBroadcast(broadcastId)
+        await broadcastController.selectBroadcast(broadcastId)
         broadcastController.selectRound(roundId)
 
         setLoading(false)
diff --git a/src/types/broadcast/index.ts b/src/types/broadcast/index.ts
index 9fcdf3bd..008bc2d6 100644
--- a/src/types/broadcast/index.ts
+++ b/src/types/broadcast/index.ts
@@ -116,7 +116,7 @@ export interface BroadcastStreamController {
   roundData: BroadcastRoundData | null
   broadcastState: BroadcastState
   loadBroadcasts: () => Promise<void>
-  selectBroadcast: (broadcastId: string) => void
+  selectBroadcast: (broadcastId: string) => Promise<void>
   selectRound: (roundId: string) => void
   selectGame: (gameId: string) => void
   startRoundStream: (roundId: string) => void

From 78b660ff70e3d4ef13b8c2ad411de5e9eb04e76e Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 6 Aug 2025 00:47:44 -0400
Subject: [PATCH 13/17] fix: change clock colour based on turn to play

---
 src/components/Common/PlayerInfo.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Common/PlayerInfo.tsx b/src/components/Common/PlayerInfo.tsx
index 9be59962..1384c99a 100644
--- a/src/components/Common/PlayerInfo.tsx
+++ b/src/components/Common/PlayerInfo.tsx
@@ -84,11 +84,15 @@ export const PlayerInfo: React.FC<PlayerInfoProps> = ({
           </div>
         )}
         {clock && (
-          <div className="flex items-center bg-primary px-2 py-0.5">
+          <div
+            className={`flex items-center px-2 py-1 ${
+              clock.isActive ? 'bg-primary' : 'bg-background-2'
+            }`}
+          >
             <span
               className={`font-mono text-xs font-medium ${
-                clock.isActive ? 'text-black' : 'text-black/60'
-              } ${currentTime < 60 ? 'text-red-700' : ''}`}
+                clock.isActive ? 'text-black' : 'text-secondary/80'
+              } ${currentTime < 60 && clock.isActive ? 'text-red-700' : ''}`}
             >
               {formatTime(currentTime)}
             </span>

From 3d1110c9277ab740888126f44ce53a5c35132a8f Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 6 Aug 2025 00:49:27 -0400
Subject: [PATCH 14/17] feat: add boardcontroller component to broadcasts

---
 src/components/Analysis/BroadcastAnalysis.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/components/Analysis/BroadcastAnalysis.tsx b/src/components/Analysis/BroadcastAnalysis.tsx
index a99aea8f..63a7b804 100644
--- a/src/components/Analysis/BroadcastAnalysis.tsx
+++ b/src/components/Analysis/BroadcastAnalysis.tsx
@@ -295,6 +295,19 @@ export const BroadcastAnalysis: React.FC<Props> = ({
                   disableMoveClicking={false}
                 />
               </div>
+              <BoardController
+                gameTree={analysisController.gameTree}
+                orientation={analysisController.orientation}
+                setOrientation={analysisController.setOrientation}
+                currentNode={analysisController.currentNode}
+                plyCount={analysisController.plyCount}
+                goToNode={analysisController.goToNode}
+                goToNextNode={analysisController.goToNextNode}
+                goToPreviousNode={analysisController.goToPreviousNode}
+                goToRootNode={analysisController.goToRootNode}
+                disableKeyboardNavigation={false}
+                disableNavigation={false}
+              />
             </div>
           </div>
         </motion.div>

From 399c3af76db1cc7774e9797d41dd8b758b3dcb00 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 6 Aug 2025 00:53:44 -0400
Subject: [PATCH 15/17] fix: handle future rounds of broadcasts

---
 src/components/Analysis/BroadcastGameList.tsx |  4 +-
 src/hooks/useBroadcastController.ts           | 40 +++++++++++++++++--
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/components/Analysis/BroadcastGameList.tsx b/src/components/Analysis/BroadcastGameList.tsx
index 2716769a..5881c1ee 100644
--- a/src/components/Analysis/BroadcastGameList.tsx
+++ b/src/components/Analysis/BroadcastGameList.tsx
@@ -121,7 +121,9 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
               <p className="text-xs text-secondary">
                 {broadcastController.broadcastState.isConnecting
                   ? 'Loading games...'
-                  : 'No games available'}
+                  : broadcastController.currentRound?.ongoing
+                    ? 'No games available'
+                    : 'Round not started yet'}
               </p>
             </div>
           </div>
diff --git a/src/hooks/useBroadcastController.ts b/src/hooks/useBroadcastController.ts
index df93cdf7..043ec565 100644
--- a/src/hooks/useBroadcastController.ts
+++ b/src/hooks/useBroadcastController.ts
@@ -587,15 +587,49 @@ export const useBroadcastController = (): BroadcastStreamController => {
         error: null,
       }))
 
+      // Set up a timeout to handle rounds with no data (future rounds)
+      const timeoutId = setTimeout(() => {
+        console.log(
+          'Stream timeout - no data received, likely future/empty round',
+        )
+        if (abortController.current && currentRoundId.current === roundId) {
+          // Set empty round data instead of staying in connecting state
+          setRoundData({
+            roundId: roundId,
+            broadcastId: currentBroadcast?.tour.id || '',
+            games: new Map(),
+            lastUpdate: Date.now(),
+          })
+
+          setBroadcastState({
+            isConnected: true,
+            isConnecting: false,
+            isLive: false,
+            error: null,
+            roundStarted: true,
+            roundEnded: false,
+            gameEnded: false,
+          })
+        }
+      }, 5000) // 5 second timeout
+
       try {
         // Start streaming - this will send all games initially, then updates
         await streamBroadcastRound(
           roundId,
-          handlePGNUpdate,
-          handleStreamComplete,
+          (pgnData) => {
+            // Clear timeout if we receive data
+            clearTimeout(timeoutId)
+            handlePGNUpdate(pgnData)
+          },
+          () => {
+            clearTimeout(timeoutId)
+            handleStreamComplete()
+          },
           abortController.current.signal,
         )
       } catch (error) {
+        clearTimeout(timeoutId)
         console.error('Round stream error:', error)
 
         const errorMessage =
@@ -614,7 +648,7 @@ export const useBroadcastController = (): BroadcastStreamController => {
         abortController.current = null
       }
     },
-    [handlePGNUpdate, handleStreamComplete],
+    [handlePGNUpdate, handleStreamComplete, currentBroadcast],
   )
 
   const reconnect = useCallback(() => {

From 570f73ad2065a99b74a43028134c95838fe39764 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Sat, 9 Aug 2025 01:06:06 -0400
Subject: [PATCH 16/17] feat: add broadcasts to home page

---
 src/components/Home/HomeHero.tsx              |   2 -
 .../Home/LiveChessBoardShowcase.tsx           | 205 ++++++++++++++++
 src/components/Home/LiveChessShowcase.tsx     | 232 ++++++++++++++++++
 src/pages/index.tsx                           |   2 +
 4 files changed, 439 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Home/LiveChessBoardShowcase.tsx
 create mode 100644 src/components/Home/LiveChessShowcase.tsx

diff --git a/src/components/Home/HomeHero.tsx b/src/components/Home/HomeHero.tsx
index 9e2ebb2e..6f471208 100644
--- a/src/components/Home/HomeHero.tsx
+++ b/src/components/Home/HomeHero.tsx
@@ -18,7 +18,6 @@ import { PlayType } from 'src/types'
 import { getGlobalStats, getActiveUserCount } from 'src/api'
 import { AuthContext, ModalContext } from 'src/contexts'
 import { AnimatedNumber } from 'src/components/Common/AnimatedNumber'
-import { LiveChessBoard } from 'src/components/Home/LiveChessBoard'
 
 interface Props {
   scrollHandler: () => void
@@ -292,7 +291,6 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
             <></>
           )}
         </motion.div>
-        <LiveChessBoard />
       </div>
     </Fragment>
   )
diff --git a/src/components/Home/LiveChessBoardShowcase.tsx b/src/components/Home/LiveChessBoardShowcase.tsx
new file mode 100644
index 00000000..cc98bc6d
--- /dev/null
+++ b/src/components/Home/LiveChessBoardShowcase.tsx
@@ -0,0 +1,205 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+import { useRouter } from 'next/router'
+import { motion } from 'framer-motion'
+import { Chess } from 'chess.ts'
+import Chessground from '@react-chess/chessground'
+import { getLichessTVGame, streamLichessGame } from 'src/api/lichess/streaming'
+import { StreamedGame, StreamedMove } from 'src/types/stream'
+
+interface LiveGameData {
+  gameId: string
+  white?: {
+    user: {
+      id: string
+      name: string
+    }
+    rating?: number
+  }
+  black?: {
+    user: {
+      id: string
+      name: string
+    }
+    rating?: number
+  }
+  currentFen?: string
+  isLive?: boolean
+}
+
+export const LiveChessBoardShowcase: React.FC = () => {
+  const router = useRouter()
+  const [liveGame, setLiveGame] = useState<LiveGameData | null>(null)
+  const [currentFen, setCurrentFen] = useState<string>(
+    'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',
+  )
+  const [error, setError] = useState<string | null>(null)
+  const abortController = useRef<AbortController | null>(null)
+
+  const handleGameStart = useCallback((gameData: StreamedGame) => {
+    if (gameData.fen) {
+      setCurrentFen(gameData.fen)
+    }
+    setLiveGame({
+      gameId: gameData.id,
+      white: gameData.players?.white,
+      black: gameData.players?.black,
+      currentFen: gameData.fen,
+      isLive: true,
+    })
+  }, [])
+
+  const handleMove = useCallback((moveData: StreamedMove) => {
+    if (moveData.fen) {
+      setCurrentFen(moveData.fen)
+    }
+  }, [])
+
+  const handleStreamComplete = useCallback(() => {
+    console.log('Live board showcase - Stream completed')
+    fetchNewGame()
+  }, [])
+
+  const fetchNewGame = useCallback(async () => {
+    try {
+      setError(null)
+      const tvGame = await getLichessTVGame()
+
+      // Stop current stream if any
+      if (abortController.current) {
+        abortController.current.abort()
+      }
+
+      // Start new stream
+      abortController.current = new AbortController()
+
+      setLiveGame({
+        gameId: tvGame.gameId,
+        white: tvGame.white,
+        black: tvGame.black,
+        isLive: true,
+      })
+
+      streamLichessGame(
+        tvGame.gameId,
+        handleGameStart,
+        handleMove,
+        handleStreamComplete,
+        abortController.current.signal,
+      ).catch((err) => {
+        if (err.name !== 'AbortError') {
+          console.error('Live board streaming error:', err)
+          setError('Connection lost')
+        }
+      })
+    } catch (err) {
+      console.error('Error fetching new live game:', err)
+      setError('Failed to load live game')
+    }
+  }, [handleGameStart, handleMove, handleStreamComplete])
+
+  useEffect(() => {
+    // Initial fetch
+    fetchNewGame()
+
+    // Cleanup on unmount
+    return () => {
+      if (abortController.current) {
+        abortController.current.abort()
+      }
+    }
+  }, []) // Remove fetchNewGame dependency to prevent re-renders
+
+  const handleClick = () => {
+    if (liveGame?.gameId) {
+      router.push(`/analysis/stream/${liveGame.gameId}`)
+    }
+  }
+
+  // Keep FEN only; Chessground renders from FEN directly
+
+  return (
+    <div className="flex flex-col items-center">
+      <motion.div
+        className="relative inline-block h-[192px] w-[192px] cursor-pointer overflow-hidden rounded-lg transition-colors duration-200"
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.3 }}
+        onClick={handleClick}
+      >
+        {/* Live indicator */}
+        {liveGame?.isLive && (
+          <div className="absolute right-2 top-2 z-10 flex items-center gap-1 rounded-full bg-red-500 px-2 py-1">
+            <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-white" />
+            <span className="text-xs font-semibold text-white">LIVE</span>
+          </div>
+        )}
+
+        {/* Chess board */}
+        <Chessground
+          contained
+          width={192}
+          height={192}
+          config={{
+            fen: currentFen,
+            viewOnly: true,
+            coordinates: false,
+            drawable: {
+              enabled: false,
+            },
+            highlight: {
+              lastMove: true,
+              check: true,
+            },
+            animation: {
+              enabled: true,
+              duration: 200,
+            },
+          }}
+        />
+      </motion.div>
+
+      {/* Player names below the board */}
+      {liveGame && (
+        <div className="mt-2 w-48 text-center">
+          <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2 text-xs">
+            <div className="flex min-w-0 items-center gap-1">
+              <div className="h-1.5 w-1.5 rounded-full border border-gray-300 bg-white" />
+              <span className="truncate font-medium">
+                {liveGame.white?.user?.name || 'White'}
+              </span>
+              {liveGame.white?.rating && (
+                <span className="shrink-0 text-[11px] text-secondary">
+                  ({liveGame.white.rating})
+                </span>
+              )}
+            </div>
+            <span className="text-[11px] text-secondary">vs</span>
+            <div className="flex min-w-0 items-center justify-end gap-1">
+              <div className="h-1.5 w-1.5 rounded-full bg-black" />
+              <span className="truncate font-medium">
+                {liveGame.black?.user?.name || 'Black'}
+              </span>
+              {liveGame.black?.rating && (
+                <span className="shrink-0 text-[11px] text-secondary">
+                  ({liveGame.black.rating})
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div className="mt-3 text-center">
+          <p className="text-sm text-red-400">{error}</p>
+          <button
+            onClick={fetchNewGame}
+            className="mt-1 text-xs font-medium text-human-4 hover:underline"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/Home/LiveChessShowcase.tsx b/src/components/Home/LiveChessShowcase.tsx
new file mode 100644
index 00000000..42fed4f3
--- /dev/null
+++ b/src/components/Home/LiveChessShowcase.tsx
@@ -0,0 +1,232 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import Link from 'next/link'
+import { motion } from 'framer-motion'
+import { LiveChessBoardShowcase } from './LiveChessBoardShowcase'
+import {
+  getLichessBroadcasts,
+  getLichessTopBroadcasts,
+  convertTopBroadcastToBroadcast,
+} from 'src/api/lichess/broadcasts'
+import { Broadcast } from 'src/types'
+
+interface BroadcastWidgetProps {
+  broadcast: Broadcast
+}
+
+const BroadcastWidget: React.FC<BroadcastWidgetProps> = ({ broadcast }) => {
+  // Get the first ongoing round, or the first round if none are ongoing
+  const activeRound =
+    broadcast.rounds.find((r) => r.ongoing) || broadcast.rounds[0]
+
+  return (
+    <motion.div
+      className="group flex flex-col items-center"
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.3 }}
+    >
+      {/* Tournament card */}
+      <Link
+        href={`/broadcast/${broadcast.tour.id}/${activeRound?.id || broadcast.rounds[0]?.id}`}
+        className="w-full"
+      >
+        <div className="relative w-48 overflow-hidden rounded-lg border border-background-2 bg-background-1 transition-colors duration-200 hover:border-primary/40">
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-background-2 px-3 py-2">
+            <h4 className="line-clamp-1 text-[13px] font-semibold text-primary">
+              {broadcast.tour.name}
+            </h4>
+            {activeRound?.ongoing && (
+              <div className="flex items-center gap-1 rounded-full bg-red-500/90 px-2 py-0.5">
+                <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-white" />
+                <span className="text-[10px] font-semibold text-white">
+                  LIVE
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Body */}
+          <div className="flex h-28 flex-col justify-between px-3 py-2">
+            <div>
+              <p
+                className="line-clamp-1 text-xs text-secondary"
+                title={activeRound?.name}
+              >
+                {activeRound?.name}
+              </p>
+              {/* Placeholder meta; could be expanded when we parse PGN/game counts */}
+              <p className="mt-1 text-[11px] text-primary/70">Ongoing round</p>
+            </div>
+
+            <div className="flex items-center justify-end gap-1">
+              <span className="text-[11px] text-human-4">View</span>
+              <span className="material-symbols-outlined text-sm text-human-4">
+                chevron_right
+              </span>
+            </div>
+          </div>
+        </div>
+      </Link>
+
+      {/* Spacing under card */}
+      <div className="h-1" />
+    </motion.div>
+  )
+}
+
+export const LiveChessShowcase: React.FC = () => {
+  const [topBroadcasts, setTopBroadcasts] = useState<Broadcast[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchBroadcasts = useCallback(async () => {
+    try {
+      setError(null)
+      setIsLoading(true)
+
+      // Load both official and top broadcasts
+      const [officialBroadcasts, topBroadcastsData] = await Promise.all([
+        getLichessBroadcasts(),
+        getLichessTopBroadcasts(),
+      ])
+
+      // Get top ongoing broadcasts with live rounds (official first, then unofficial)
+      const officialActive = officialBroadcasts
+        .filter((b) => b.rounds.some((r) => r.ongoing))
+        .slice(0, 1) // Take top 1 official
+
+      const unofficialActive = topBroadcastsData.active
+        .map(convertTopBroadcastToBroadcast)
+        .filter(
+          (b) =>
+            // Must have ongoing rounds and not be in official list
+            b.rounds.some((r) => r.ongoing) &&
+            !officialActive.some((official) => official.tour.id === b.tour.id),
+        )
+        .slice(0, 1) // Take top 1 unofficial
+
+      const broadcasts = [...officialActive, ...unofficialActive].slice(0, 2)
+      setTopBroadcasts(broadcasts)
+    } catch (err) {
+      console.error('Error fetching broadcasts:', err)
+      setError('Failed to load broadcasts')
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchBroadcasts()
+    // Refresh every 10 minutes
+    const interval = setInterval(fetchBroadcasts, 600000)
+    return () => clearInterval(interval)
+  }, [fetchBroadcasts])
+
+  return (
+    <section className="bg-background-2 py-4">
+      <div className="container mx-auto px-4">
+        <div className="mb-4 flex flex-col items-center justify-between gap-4 lg:flex-row lg:items-center">
+          {/* Header on the left */}
+          <div className="text-center lg:text-left">
+            <h2 className="mb-1 text-2xl font-bold text-primary">Live Chess</h2>
+            <p className="text-secondary">
+              Watch live games and tournaments with real-time Maia AI analysis
+            </p>
+          </div>
+
+          {/* Live content on the right */}
+          <div className="flex items-start gap-4 sm:flex-row sm:items-start sm:gap-6">
+            {/* Live Lichess TV Game */}
+            <div className="flex flex-col items-center">
+              <h3 className="mb-2 text-base font-semibold text-primary">
+                Maia TV
+              </h3>
+              <LiveChessBoardShowcase />
+            </div>
+
+            {/* Top Live Broadcasts */}
+            {isLoading ? (
+              <div className="flex flex-col items-center">
+                <h3 className="mb-2 text-base font-semibold text-primary">
+                  Live Tournament
+                </h3>
+                <motion.div
+                  className="flex h-[180px] w-48 flex-col items-center justify-center rounded-lg border border-background-2 bg-background-1"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                >
+                  <div className="flex flex-col items-center gap-2 text-center">
+                    <span className="material-symbols-outlined animate-pulse text-2xl text-secondary">
+                      stadia_controller
+                    </span>
+                    <p className="px-3 text-xs text-secondary">
+                      Loading tournaments...
+                    </p>
+                  </div>
+                </motion.div>
+              </div>
+            ) : error ? (
+              <div className="flex flex-col items-center">
+                <h3 className="mb-2 text-base font-semibold text-primary">
+                  Live Tournament
+                </h3>
+                <motion.div
+                  className="flex h-[180px] w-48 flex-col items-center justify-center rounded-lg border border-background-2 bg-background-1"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                >
+                  <div className="flex flex-col items-center gap-2 text-center">
+                    <span className="material-symbols-outlined text-2xl text-red-400">
+                      error
+                    </span>
+                    <p className="px-3 text-xs text-secondary">{error}</p>
+                    <button
+                      onClick={fetchBroadcasts}
+                      className="text-xs font-medium text-human-4 hover:underline"
+                    >
+                      Retry
+                    </button>
+                  </div>
+                </motion.div>
+              </div>
+            ) : topBroadcasts.length > 0 ? (
+              <div className="flex flex-col items-center">
+                <h3 className="mb-2 text-base font-semibold text-primary">
+                  Live Tournament
+                </h3>
+                <BroadcastWidget broadcast={topBroadcasts[0]} />
+              </div>
+            ) : (
+              <div className="flex flex-col items-center">
+                <h3 className="mb-2 text-base font-semibold text-primary">
+                  Live Tournament
+                </h3>
+                <motion.div
+                  className="flex h-[180px] w-48 flex-col items-center justify-center rounded-lg border border-background-2 bg-background-1"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                >
+                  <div className="flex flex-col items-center gap-2 text-center">
+                    <span className="material-symbols-outlined text-xl text-secondary">
+                      stadia_controller
+                    </span>
+                    <p className="px-3 text-xs text-secondary">
+                      No live tournaments
+                    </p>
+                    <Link
+                      href="/broadcast"
+                      className="text-xs font-medium text-engine-4 hover:underline"
+                    >
+                      View all
+                    </Link>
+                  </div>
+                </motion.div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e39303f2..26346762 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -12,6 +12,7 @@ import {
   AdditionalFeaturesSection,
   PageNavigation,
 } from 'src/components'
+import { LiveChessShowcase } from 'src/components/Home/LiveChessShowcase'
 
 const Home: NextPage = () => {
   const { setPlaySetupModalProps } = useContext(ModalContext)
@@ -40,6 +41,7 @@ const Home: NextPage = () => {
         />
       </Head>
       <HomeHero scrollHandler={scrollHandler} />
+      <LiveChessShowcase />
       <PageNavigation />
       <div ref={featuresRef}>
         <div className="bg-background-1">

From 1601e17ac4a139b63bd6c4a8a7c4fdeb04d31398 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Sat, 23 Aug 2025 22:53:29 -0700
Subject: [PATCH 17/17] fix: build errors

---
 src/components/Analysis/AnalysisSidebar.tsx   |  4 +-
 src/components/Analysis/BroadcastAnalysis.tsx | 18 +++----
 src/components/Board/BoardController.tsx      |  2 +-
 src/components/Turing/TuringGames.tsx         |  8 ++--
 src/components/Turing/TuringLog.tsx           |  8 ++--
 src/contexts/TuringControllerContext.ts       | 12 ++---
 .../useAnalysisController.ts                  |  1 -
 .../useTreeController/useTreeController.ts    |  9 ++--
 .../useTuringController.ts                    | 48 ++++++++++---------
 src/pages/turing.tsx                          | 27 ++++++-----
 10 files changed, 70 insertions(+), 67 deletions(-)

diff --git a/src/components/Analysis/AnalysisSidebar.tsx b/src/components/Analysis/AnalysisSidebar.tsx
index e84a54a3..b3eacca7 100644
--- a/src/components/Analysis/AnalysisSidebar.tsx
+++ b/src/components/Analysis/AnalysisSidebar.tsx
@@ -144,7 +144,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
                         ],
                       }
                 }
-                currentNode={controller.currentNode}
+                currentNode={controller.currentNode ?? undefined}
               />
             </div>
             <div className="flex h-full w-full bg-background-1">
@@ -254,7 +254,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
                       ],
                     }
               }
-              currentNode={controller.currentNode}
+              currentNode={controller.currentNode ?? undefined}
             />
           </div>
           <div className="flex h-full w-auto min-w-[40%] max-w-[40%] bg-background-1 p-3">
diff --git a/src/components/Analysis/BroadcastAnalysis.tsx b/src/components/Analysis/BroadcastAnalysis.tsx
index 63a7b804..7822b8b3 100644
--- a/src/components/Analysis/BroadcastAnalysis.tsx
+++ b/src/components/Analysis/BroadcastAnalysis.tsx
@@ -86,13 +86,15 @@ export const BroadcastAnalysis: React.FC<Props> = ({
       if (analysisController.currentNode.mainChild?.move === moveString) {
         analysisController.goToNode(analysisController.currentNode.mainChild)
       } else {
-        const newVariation = game.tree.addVariation(
-          analysisController.currentNode,
-          newFen,
-          moveString,
-          san,
-          analysisController.currentMaiaModel,
-        )
+        const newVariation = game.tree
+          .getLastMainlineNode()
+          .addChild(
+            newFen,
+            moveString,
+            san,
+            false,
+            analysisController.currentMaiaModel,
+          )
         analysisController.goToNode(newVariation)
       }
     }
@@ -289,7 +291,6 @@ export const BroadcastAnalysis: React.FC<Props> = ({
                 <MovesContainer
                   game={game}
                   termination={game.termination}
-                  type="analysis"
                   showAnnotations={true}
                   disableKeyboardNavigation={false}
                   disableMoveClicking={false}
@@ -494,7 +495,6 @@ export const BroadcastAnalysis: React.FC<Props> = ({
               <MovesContainer
                 game={game}
                 termination={game.termination}
-                type="analysis"
                 showAnnotations={true}
                 disableKeyboardNavigation={false}
                 disableMoveClicking={false}
diff --git a/src/components/Board/BoardController.tsx b/src/components/Board/BoardController.tsx
index 5ce85639..5f2fdbdf 100644
--- a/src/components/Board/BoardController.tsx
+++ b/src/components/Board/BoardController.tsx
@@ -67,7 +67,7 @@ export const BoardController: React.FC<Props> = ({
 
   const getLast = useCallback(() => {
     if (!currentNode) return
-    
+
     let lastNode = currentNode
     while (lastNode?.mainChild) {
       lastNode = lastNode.mainChild
diff --git a/src/components/Turing/TuringGames.tsx b/src/components/Turing/TuringGames.tsx
index fd23cdcd..f6f6a74a 100644
--- a/src/components/Turing/TuringGames.tsx
+++ b/src/components/Turing/TuringGames.tsx
@@ -3,17 +3,17 @@ import { useContext } from 'react'
 import { TuringControllerContext } from 'src/contexts'
 
 export const TuringGames: React.FC = () => {
-  const { gameIds, setCurrentGameId, games } = useContext(
+  const { gameIds, setCurrentIndex, games } = useContext(
     TuringControllerContext,
   )
   return (
     <div className="flex flex-row flex-wrap items-start justify-start gap-1 overflow-y-auto">
-      {gameIds.map((id) => {
-        const game = games[id]
+      {gameIds.map((id, index) => {
+        const game = games[index]
         return (
           <button
             key={id}
-            onClick={() => setCurrentGameId(id)}
+            onClick={() => setCurrentIndex(index)}
             className={`${!game.result ? 'bg-button-secondary' : game.result?.correct ? 'bg-engine-4' : 'bg-human-4'} h-10 w-10 cursor-pointer rounded-sm`}
           >
             {game.result?.ratingDiff ? (
diff --git a/src/components/Turing/TuringLog.tsx b/src/components/Turing/TuringLog.tsx
index e8018bb3..da3f7a80 100644
--- a/src/components/Turing/TuringLog.tsx
+++ b/src/components/Turing/TuringLog.tsx
@@ -2,7 +2,7 @@ import { useContext } from 'react'
 import { TuringControllerContext } from 'src/contexts'
 
 export const TuringLog: React.FC = () => {
-  const { games, gameIds, setCurrentGameId, currentGameId } = useContext(
+  const { games, gameIds, setCurrentIndex, currentIndex } = useContext(
     TuringControllerContext,
   )
 
@@ -18,8 +18,8 @@ export const TuringLog: React.FC = () => {
           </div>
         ) : (
           gameIds.map((gameId, index) => {
-            const game = games[gameId]
-            const isCurrentGame = gameId === currentGameId
+            const game = games[index]
+            const isCurrentGame = index === currentIndex
             const getStatusInfo = () => {
               if (game.result?.correct === true) {
                 return {
@@ -48,7 +48,7 @@ export const TuringLog: React.FC = () => {
             return (
               <button
                 key={gameId}
-                onClick={() => setCurrentGameId(gameId)}
+                onClick={() => setCurrentIndex(index)}
                 className={`group flex w-full cursor-pointer items-center gap-2 border-b border-white/5 px-3 py-2 text-left transition-colors ${
                   isCurrentGame
                     ? 'bg-background-2 font-medium'
diff --git a/src/contexts/TuringControllerContext.ts b/src/contexts/TuringControllerContext.ts
index 8772fb45..d9f777fd 100644
--- a/src/contexts/TuringControllerContext.ts
+++ b/src/contexts/TuringControllerContext.ts
@@ -6,14 +6,14 @@ import { GameTree, Color, BaseTreeControllerContext } from 'src/types'
 
 export interface ITuringControllerContext extends BaseTreeControllerContext {
   game?: TuringGame
-  games: { [id: string]: TuringGame }
+  games: TuringGame[]
   loading: boolean
   gameIds: string[]
   stats: AllStats
 
   getNewGame: () => Promise<void>
-  currentGameId: string
-  setCurrentGameId: (id: string) => void
+  currentIndex: number
+  setCurrentIndex: (index: number) => void
   submitGuess: (
     guess: Color,
     comment?: string,
@@ -40,8 +40,8 @@ const defaultContext: ITuringControllerContext = {
   goToRootNode: () => {
     /* no-op */
   },
-  currentGameId: '',
-  setCurrentGameId: () => {
+  currentIndex: 0,
+  setCurrentIndex: () => {
     /* no-op */
   },
   plyCount: 0,
@@ -50,7 +50,7 @@ const defaultContext: ITuringControllerContext = {
     /* no-op */
   },
   game: undefined,
-  games: {},
+  games: [],
   loading: false,
   gameIds: [],
   stats: {
diff --git a/src/hooks/useAnalysisController/useAnalysisController.ts b/src/hooks/useAnalysisController/useAnalysisController.ts
index d9dc2ad2..9bfdfe13 100644
--- a/src/hooks/useAnalysisController/useAnalysisController.ts
+++ b/src/hooks/useAnalysisController/useAnalysisController.ts
@@ -40,7 +40,6 @@ export const useAnalysisController = (
   const [analysisState, setAnalysisState] = useState(0)
   const inProgressAnalyses = useMemo(() => new Set<string>(), [])
 
-  // Use auto-save hook
   const autoSaveController = useAutoSave({
     game,
     gameTree: controller.tree,
diff --git a/src/hooks/useTreeController/useTreeController.ts b/src/hooks/useTreeController/useTreeController.ts
index 3040bb6c..81f88d05 100644
--- a/src/hooks/useTreeController/useTreeController.ts
+++ b/src/hooks/useTreeController/useTreeController.ts
@@ -2,20 +2,17 @@ import { Color, GameTree, GameNode } from 'src/types'
 import { useState, useMemo, useCallback, useEffect } from 'react'
 
 export const useTreeController = (
-  gameTree: GameTree | null | undefined,
+  gameTree: GameTree,
   initialOrientation: Color = 'white',
 ) => {
-  const [currentNode, setCurrentNode] = useState<GameNode | null>(
-    gameTree?.getRoot() || null
-  )
+  const [currentNode, setCurrentNode] = useState<GameNode>(gameTree.getRoot())
   const [orientation, setOrientation] = useState<Color>(initialOrientation)
 
   useEffect(() => {
-    setCurrentNode(gameTree?.getRoot() || null)
+    setCurrentNode(gameTree.getRoot())
   }, [gameTree])
 
   const plyCount = useMemo(() => {
-    if (!gameTree) return 0
     return gameTree.getMainLine().length
   }, [gameTree])
 
diff --git a/src/hooks/useTuringController/useTuringController.ts b/src/hooks/useTuringController/useTuringController.ts
index 93bfff74..b5a3d837 100644
--- a/src/hooks/useTuringController/useTuringController.ts
+++ b/src/hooks/useTuringController/useTuringController.ts
@@ -22,12 +22,10 @@ const statsLoader = async () => {
 
 export const useTuringController = () => {
   const router = useRouter()
-  const [turingGames, setTuringGames] = useState<{ [id: string]: TuringGame }>(
-    {},
-  )
+  const [turingGames, setTuringGames] = useState<TuringGame[]>([])
 
   const [loading, setLoading] = useState(false)
-  const [currentGameId, setCurrentGameId] = useState<string>('')
+  const [currentIndex, setCurrentIndex] = useState(0)
   const [stats, incrementStats, updateRating] = useStats(statsLoader)
 
   const getNewGame = useCallback(async () => {
@@ -41,20 +39,20 @@ export const useTuringController = () => {
     }
 
     setLoading(false)
-    setTuringGames({ ...turingGames, [game.id]: game })
-    setCurrentGameId(game.id)
+    setCurrentIndex(turingGames.length)
+    setTuringGames(turingGames.concat([game]))
   }, [turingGames, router])
 
   useEffect(() => {
-    if (Object.keys(turingGames).length === 0) getNewGame()
-  }, [getNewGame, turingGames])
+    if (turingGames.length === 0 && !loading) getNewGame()
+  }, [getNewGame, turingGames.length, loading])
 
   const game = useMemo(
-    () => turingGames[currentGameId ?? ''],
-    [turingGames, currentGameId],
+    () => turingGames[currentIndex],
+    [turingGames, currentIndex],
   )
 
-  const controller = useTreeController(game?.tree, 'white')
+  const controller = useTreeController(game.tree, 'white')
 
   useEffect(() => {
     if (controller.tree && game) {
@@ -63,26 +61,32 @@ export const useTuringController = () => {
     }
   }, [game])
 
-  const gameIds = useMemo(() => Object.keys(turingGames), [turingGames])
+  const gameIds = useMemo(() => turingGames.map((g) => g.id), [turingGames])
 
   const submitGuess = useCallback(
     async (guess: Color, comment = '', rating?: number) => {
       if (game && !game.result) {
         const result = await submitTuringGuess(game.id, guess, comment)
-        setTuringGames({
-          ...turingGames,
-          [game.id]: {
-            ...game,
-            result: { ...result, ratingDiff: result.turingElo - (rating || 0) },
-          },
-        })
+        setTuringGames(
+          turingGames.map((g, index) =>
+            index === currentIndex
+              ? {
+                  ...g,
+                  result: {
+                    ...result,
+                    ratingDiff: result.turingElo - (rating || 0),
+                  },
+                }
+              : g,
+          ),
+        )
         commentController[1]('')
 
         updateRating(result.turingElo)
         incrementStats(1, result.correct ? 1 : 0)
       }
     },
-    [game, incrementStats, turingGames, updateRating],
+    [game, incrementStats, turingGames, updateRating, currentIndex],
   )
 
   const commentController = useState('')
@@ -104,8 +108,8 @@ export const useTuringController = () => {
     getNewGame,
     loading,
     gameIds,
-    currentGameId,
-    setCurrentGameId,
+    currentIndex,
+    setCurrentIndex,
     submitGuess,
     commentController,
     stats,
diff --git a/src/pages/turing.tsx b/src/pages/turing.tsx
index ab491a53..474c4974 100644
--- a/src/pages/turing.tsx
+++ b/src/pages/turing.tsx
@@ -46,13 +46,17 @@ const TuringPage: NextPage = () => {
     }
   }, [controller.game, controller.stats?.rating])
 
+  if (controller.loading || !controller.game) {
+    return (
+      <DelayedLoading isLoading={true}>
+        <div></div>
+      </DelayedLoading>
+    )
+  }
+
   return (
     <TuringControllerContext.Provider value={controller}>
-      <DelayedLoading isLoading={!controller.game}>
-        {controller.game && (
-          <Turing game={controller.game} stats={controller.stats} />
-        )}
-      </DelayedLoading>
+      <Turing game={controller.game} stats={controller.stats} />
     </TuringControllerContext.Provider>
   )
 }
@@ -66,7 +70,6 @@ const Turing: React.FC<Props> = (props: Props) => {
   const { game, stats } = props
 
   const { isMobile } = useContext(WindowSizeContext)
-
   const controller = useContext(TuringControllerContext)
 
   const containerVariants = {
@@ -189,9 +192,9 @@ const Turing: React.FC<Props> = (props: Props) => {
             id="turing-page"
             className="relative flex aspect-square w-full max-w-[75vh] flex-shrink-0"
           >
-            <GameBoard 
-              game={game} 
-              currentNode={controller.currentNode} 
+            <GameBoard
+              game={game}
+              currentNode={controller.currentNode}
               orientation={controller.orientation}
             />
           </motion.div>
@@ -248,9 +251,9 @@ const Turing: React.FC<Props> = (props: Props) => {
             id="turing-page"
             className="relative flex aspect-square h-[100vw] w-screen"
           >
-            <GameBoard 
-              game={game} 
-              currentNode={controller.currentNode} 
+            <GameBoard
+              game={game}
+              currentNode={controller.currentNode}
               orientation={controller.orientation}
             />
           </div>