Skip to main content

Phase 2.5: AI Panel Integration, Market UI Overhaul, Score Displays, Breadcrumb Fix

Context​

PR #80 (Phase 2) delivered 3-panel layout, fixture tabs, skeletons, carousel. User feedback from live testing identified 11 areas for improvement across AI integration, market UI, score displays, and navigation.

Worktree: /Users/bhargavveepuri/forsyt/Hannibal/bet-panel/

1. AI Panel System (400px, left side, togglable)​

New Store: aiPanelStore.ts​

interface AIPanelState {
  isOpen: boolean;           // panel visible/hidden toggle
  activeAnalysis: {          // analysis rendered in top pane (null = empty state)
    type: 'fixture' | 'tournament';
    id: string;
    fixture?: Fixture;
    analysis?: FixtureAnalysis;
    tournamentName?: string;
    sportId?: string;
  } | null;
  toggle: () => void;
  open: () => void;
  close: () => void;
  setActiveAnalysis: (a: AIPanelState['activeAnalysis']) => void;
  clearAnalysis: () => void;
}
  • Persist isOpen in localStorage (key: hannibal-ai-panel)
  • activeAnalysis NOT persisted (ephemeral)

AI Panel Component: AIPanel.tsx​

Two-pane layout:

  • Top half (AI Analysis): Empty state with sparkle illustration, or active analysis with markdown, follow-up questions, match info bar
  • Bottom half (AI Chat): Reuses AIChatContent inline (Chat/Commands tabs, messages, input)
  • Styling: Both panes use bg-slate-900/80 backdrop-blur-xl border border-white/10 rounded-2xl, 50/50 split (flex-1), overflow-y-auto scrollbar-hide

Toggle Behavior​

  • All pages except /sports: Grid column. 400px column appears/disappears on left.
  • /sports only: Overlay on top of SportsSidebar (z-50, slides from left).
StateAIBetGrid (lg+)
Both on400px300pxlg:grid-cols-[400px_1fr_300px]
AI off, Bet on--300pxlg:grid-cols-[1fr_300px]
AI on, Bet off400px--lg:grid-cols-[400px_1fr]
Both off----lg:grid-cols-[1fr]

AI Button​

Moved to bottom-left (left-4 sm:left-6), wired to aiPanelStore.toggle().

Dock Integration​

Click ready dock card -> aiPanelStore.open() + setActiveAnalysis(...) -> analysis renders inline in top half of AI panel (not fullscreen overlay).

2. Header Gap (2-3px)​

mt-0.5 (2px) on grid container, height h-[calc(100vh-66px)].

3. Panel Sizing​

  • AI Panel: 400px
  • Bet Panel: 300px
  • Gaps: gap-0.5 (2px)

4. Fixture Header Redesign (Sport-Specific)​

  • Removed QuickOddsButton component
  • Added SportScoreDisplay.tsx for sport-specific score rendering (cricket, soccer, tennis, basketball)
  • Slim header with team names, scores, tournament, live indicator, volume badge, AIFixtureButton
  • Green border glow when live

5. Full-Width Equal Tab Buttons​

Each tab uses flex-1 text-center py-3 for equal distribution.

6. Market Collapse/Expand Redesign​

  • Individual groups: single chevron on RIGHT side (ChevronDown/ChevronUp)
  • Collapse All / Expand All: double chevrons (ChevronsUp/ChevronsDown)
  • Count badge only in CategoryTabs, not in group headers

7. Match Info Tab​

  • SportScoreDisplay at top with AIFixtureButton
  • Glassmorphic cards: bg-slate-800/40 backdrop-blur-md border border-white/10 rounded-2xl
  • Colored icons (blue Clock, emerald MapPin, red Activity)
  • Cricket pre-match: emerald info card about live intelligence
  • Non-cricket: sparkle icon with AI analysis suggestion

8. Ball by Ball Tab -- Green Tint Theme​

  • Container: bg-emerald-950/20 border-emerald-800/30
  • Ball colors: wicket=red, six=purple, four=emerald, dot=emerald-950, other=blue
  • Over separators: "End of Over X" badge between overs
  • Commentary header: text-emerald-400
  • AI insight cards: blue-green gradient
  • Waiting state: green pulse dot

9. Breadcrumb Fix​

  • Sport link: href={/live?sportId=${sportId}}
  • Tournament link: href={/live?sportId=${sportId}&tournament=${encodeURIComponent(tournamentName)}}
  • Guard: if (!sportId || sportName === 'Sport') return null;

10. Live Page -- Tournament Grouping​

  • Group fixtures by tournamentName with collapsible sections
  • tournament URL param support for breadcrumb navigation
  • 'Other' group sorted last

Files Summary​

New Files (3)​

FilePurpose
src/store/aiPanelStore.tsAI panel toggle + active analysis state
src/components/layout/AIPanel.tsxAI Panel: top=analysis, bottom=chat, glassmorphic
src/components/betting/SportScoreDisplay.tsxSport-specific scores (cricket/soccer/tennis/basketball)

Modified Files (12)​

FileChanges
MainLayout.tsx400px AI column (toggle), overlay for sports, header gap
layout.tsxRemove <AIChat />, keep dock manager
AIFloatingButton.tsxMove to bottom-left, wire to aiPanelStore
AIAnalysisDockManager.tsxCard click opens AI panel, remove fullscreen panels
fixture/[id]/page.tsxSlim header, SportScoreDisplay, remove QuickOdds
FixtureTabBar.tsxflex-1 equal-width tabs
MarketsSection.tsxSingle chevrons right, double chevrons collapse all
MatchInfoTab.tsxGlassmorphic cards, SportScoreDisplay, colored UI
BallByBallTab.tsxGreen tint, vibrant ball cards, over separators
FixtureBreadcrumb.tsxLink to /live, fix sport name fallback
live/page.tsxTournament grouping, collapsible sections
AIChatPanel.tsxExtract AIChatContent for reuse in AI panel

Kept As-Is​

  • AIFixtureButton.tsx -- sparkle on fixture cards
  • MinimizedAnalysisDock.tsx -- bottom-center dock
  • aiAnalysisStore.ts -- dock state
  • aiChatStore.ts -- messages/session
  • BetPanel.tsx -- 300px unchanged