Components

🧱 Widget Design & Component Mapping

This section outlines the UI widgets required to represent data returned by each API endpoint. Each component is designed for clarity, contextual visualization, and real-time responsiveness.

---

📊 Widgets for Each API

1. /api/query → Query Analyzer

• Widget: QuerySummary

• Purpose: Displays user query intent, detected components, and relevant tags.

• View:

  • Chips for tags (/price, /var)
  • Icons for components (📊 Portfolio, 📈 Technical)

2. /api/assemble → Data Assembler

• Widget: ComponentStatus

• Purpose: Shows loading, success, and error states of multiple async components.

• View:

  • Horizontal progress list with loaders, retries, and fail markers.

3. /api/insights → Insights Generator

• Widget: TextBubble

• Purpose: Natural language insight summary.

• View:

  • Timestamped message block
  • Supports markdown and emphasis for key metrics

4. /api/market-data → Market Data

• Widget: PriceTile, DepthChart, VWAPTag

• Purpose: Display real-time price, market depth, and VWAP.

• View:

  • PriceTile: Symbol, last price, % change
  • DepthChart: Interactive order book
  • VWAPTag: Chip with VWAP info

5. /api/portfolio → Portfolio

• Widget: PortfolioTable, SegmentFilter, HoldingStats

• Purpose: Breakdown of positions, exposure, sectors.

• View:

  • Table for holdings with gain/loss
  • Segment tabs (Equity, Futures)
  • Sector pie chart or bar breakdown

6. /api/stock-screener → Stock Screener

• Widget: ScreenerTable, FilterSummary

• Purpose: Show matched stocks with applied filter summary.

• View:

  • Compact table with PE, EPS, Market Cap
  • FilterSummary banner (e.g., PE < 20, ROE > 15%)

7. /api/technical-analysis → Technical Analysis

• Widget: CandleChart, IndicatorLine

• Purpose: Display historical price with indicators like MACD.

• View:

  • Interactive candlestick chart
  • Overlay for selected indicators

8. /api/fundamental-analysis → Fundamentals

• Widget: RatioTable, FinancialHighlights

• Purpose: Present key financial metrics.

• View:

  • Table layout with PE, ROE, Debt/Equity
  • Historical ratio trend lines

9. /api/risk-metrics → Risk Metrics

• Widget: RiskGauge, DrawdownChart

• Purpose: Portfolio risk analysis.

• View:

  • Gauge meter for VaR (green/yellow/red thresholds)
  • Line chart of max drawdown over time

10. /api/tax-engine → Tax Calculation

• Widget: TaxSummaryCard, YearlyBreakdown

• Purpose: Compute LTCG/STCG from trades.

• View:

  • Cards for totals by tax type
  • Bar chart for yearly CG trends

11. /api/chat-storage → Encrypted Chat Storage

• Widget: SessionHistoryPanel

• Purpose: Retrieve old chat sessions.

• View:

  • List of timestamped chat threads
  • Expandable preview of each conversation

---

🧩 Required Components Overview

UI

• SidebarNavigation
• AlertBanner
• AuthProvider
• SessionRestoreModal

Data

• TagMapper.ts
• DataValidator.ts
• SupabaseClient.ts
• CryptoUtils.ts

System

• api/ routes for each component
• Central tag registry: lib/tags.ts
• Middleware for encryption and token guards

---

This mapping ensures modularity, maintainability, and real-time responsiveness for Bullseye AI’s dynamic financial assistant interface.