ai-research-assistant

byVinay Kumar

# AI Research Assistant (LLM-Powered RAG) - Complete Project Specification ## Project Overview This project is being built for a college placement hackathon organized by a fintech/brokerage company. The goal is to build an AI-powered financial research assistant capable of answering natural-language questions about Indian publicly listed companies. The assistant should provide accurate, grounded, citation-backed responses using Retrieval-Augmented Generation (RAG) instead of relying solely on the LLM's internal knowledge. The product is designed as an embedded AI assistant inside a stock brokerage application. --- # Primary Objectives The assistant should be able to answer questions like: * Summarize TCS's latest quarterly results. * Compare HDFC Bank and ICICI Bank. * What are the major risks facing Asian Paints? * What are Reliance's future growth drivers? * Explain Infosys revenue growth. * Summarize recent news about Tata Motors. * What are the key highlights from the latest annual report? Every answer must be grounded using retrieved documents and must include citations. --- # Companies Covered The project currently supports 20 large-cap Indian companies including: * Reliance * TCS * Infosys * HDFC Bank * ICICI Bank * SBI * Bharti Airtel * ITC * Asian Paints * Tata Motors * Maruti * L&T * Bajaj Finance * Kotak Bank * Axis Bank * Sun Pharma * NTPC * UltraTech Cement * Hindustan Unilever * Mahindra & Mahindra --- # Data Sources ## Synthetic Knowledge Base Synthetic data is allowed in the hackathon. Instead of downloading massive annual reports, a curated synthetic knowledge base has been created. Each company has three markdown documents. Example: knowledge_base/ TCS/ * company_knowledge.md * quarterly_results.md * recent_news.md AsianPaints/ * company_knowledge.md * quarterly_results.md * recent_news.md etc. --- ## company_knowledge.md Contains * Company Overview * Business Segments * Products & Services * Financial Highlights * Competitive Advantages * Risk Factors * Industry Outlook * Future Strategy --- ## quarterly_results.md Contains * Revenue * PAT * EBITDA * EPS * Operating Margins * Key Highlights * Management Commentary * Future Guidance --- ## recent_news.md Contains multiple realistic news articles including * Title * Date * Publisher * Summary This simulates Yahoo Finance news. --- # Backend Stack Python FastAPI MongoDB Google Gemini API Sentence Transformer Embedding Model --- # Frontend Stack React Vite Tailwind CSS Axios --- # RAG Pipeline Document Loader ↓ Read Markdown Files ↓ Metadata Extraction ↓ Chunking ↓ Embedding Generation ↓ Store Chunks in MongoDB ↓ Semantic Retrieval ↓ Prompt Builder ↓ Gemini ↓ Response + Citations --- # Chunking Strategy Chunk Size Approximately 500 words Overlap Approximately 100 words Chunks should preserve semantic meaning. Avoid splitting sections in the middle. --- # Metadata Each chunk should include metadata. Example { company: "TCS", ticker: "TCS", document_type: "company_knowledge", section: "Risk Factors", chunk_id: 21, source: "company_knowledge.md" } This metadata will later be used for citations and filtering. --- # MongoDB Structure Collection: documents Each document contains { company, ticker, document_type, chunk_id, section, text, embedding } --- # Retrieval Flow User asks a question ↓ Extract company names (if present) ↓ Retrieve relevant chunks ↓ Rank by semantic similarity ↓ Return Top-K chunks ↓ Pass retrieved context to Gemini --- # Prompt Design System Prompt "You are an AI Financial Research Assistant. Answer ONLY using the supplied context. Do not invent facts. If information is unavailable, clearly state that the context does not contain the answer. Always provide citations." --- # LLM Google Gemini Responsibilities * Read retrieved context * Generate grounded answer * Never hallucinate * Produce concise financial explanations * Add citations --- # Citations Each response should include citations like Source: Company Knowledge Section: Risk Factors or Quarterly Results Management Commentary --- # Frontend Requirements Pages Home Search Company Stock Detail Page AI Assistant Panel --- ## AI Assistant Chat interface User enters question ↓ Backend API ↓ Response displayed with citations --- # Suggested UI Left Company Information Center Stock Details Right AI Research Assistant Below answer Sources Used --- # Backend API POST /chat Input { "query":"Summarize TCS latest quarterly results." } Output { "answer":"...", "citations":[] } --- # Future APIs POST /compare POST /summarize POST /search --- # Expected Features Mandatory ✓ Question Answering ✓ Company Comparison ✓ Quarterly Report Summary ✓ News Summary ✓ Citation Support Stretch ✓ Streaming Responses ✓ Suggested Follow-up Questions ✓ Conversation Memory ✓ Bull vs Bear Analysis --- # Folder Structure project/ frontend/ backend/ knowledge_base/ TCS/ company_knowledge.md quarterly_results.md recent_news.md Infosys/ ... embeddings/ prompts/ models/ api/ docs/ README.md --- # Development Workflow Phase 1 Knowledge Base Completed Phase 2 Document Loader Chunking Metadata Extraction Embedding Generation Phase 3 MongoDB Storage Semantic Retrieval Phase 4 Gemini Integration Prompt Engineering Citation Generation Phase 5 Frontend React Vite Tailwind Chat UI Phase 6 Testing Presentation Demo --- # Success Criteria The assistant should * Answer questions correctly. * Use only retrieved context. * Produce concise financial summaries. * Cite sources. * Work with all 20 companies. * Respond in under 5 seconds. * Have a clean modern interface. The project should resemble an AI assistant integrated into a modern stock brokerage platform rather than a generic chatbot.

LandingStockDetailAIAssistantSearch
Landing

Comments (0)

No comments yet. Be the first!

Project Tasks39

#1

Implement Navbar for Landing

To Do

As a frontend developer, implement the Navbar section for the Landing page. Build the `Navbar` component with `scrolled` state (toggled via `window.scroll` event listener at 40px threshold) that adds `ld-nav--scrolled` class, and `menuOpen` state for mobile hamburger toggle. Render `ld-nav__logo` with ◆ icon and 'FinSight AI' text, a hamburger `<button>` with three `<span>` bars that toggles `ld-nav__hamburger--open`, and `ld-nav__links` nav link list with 4 routes (Landing `/`, Search `/Search`, Stock Detail `/StockDetail`, AI Assistant `/AIAssistant`) each as `ld-nav__link` with active class on `/`, plus a `ld-nav__cta` 'Start Researching' anchor. Apply Navbar.css styles. Note: this component may be reused across other pages.

AI 85%
Human 15%
High Priority
1 day
Frontend Developer
#7

Implement CTASection for Landing

To Do

As a frontend developer, implement the CTASection for the Landing page. Use `visible` state via `IntersectionObserver` at 0.3 threshold that fires once and disconnects, toggling `ld-cta--visible` class on the section. Render a background layer with two glow divs (`ld-cta__glow--1`, `ld-cta__glow--2`). The inner content includes an h2 with `ld-cta__title-accent` span ('smarter today'), a description paragraph mentioning India's top companies and no-account access, and two action anchors: `ld-cta__btn--primary` with a search SVG icon linking to `/Search`, and `ld-cta__btn--secondary` with a chat SVG icon linking to `/AIAssistant`. Render a `ld-cta__note` div with ◈ icon referencing RAG-powered real financial data. Apply CTASection.css (2867 chars). This is a root page with no cross-page depends_on.

AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#26

Build Knowledge Base Ingestion

To Do

As a Backend Developer, implement the knowledge base ingestion pipeline. Create markdown document loader that reads all files from knowledge_base/<Company>/ directories (company_knowledge.md, quarterly_results.md, recent_news.md) for all 20 supported companies. Implement chunking strategy (~500 words, ~100 word overlap, preserving semantic section boundaries). Extract metadata per chunk: company, ticker, document_type, section, chunk_id, source. Generate sentence transformer embeddings for each chunk. Store documents in MongoDB 'documents' collection with fields: company, ticker, document_type, chunk_id, section, text, embedding. Run as a one-time ingestion script (ingest.py). NOTE: Frontend tasks for Search/StockDetail pages depend on this data being available.

AI 70%
Human 30%
High Priority
2 days
Backend Developer
#33

Setup Global Theme Design System

To Do

As a Frontend Developer, set up the global theme and design system for the React/Vite/Tailwind frontend. Configure Tailwind CSS with custom theme tokens matching the SRD color palette: primary #1E3A8A, primary_light #3B82F6, secondary #F97316, accent #10B981, highlight #F59E0B, bg #F3F4F6, surface rgba(255,255,255,0.8), text #111827, text_muted #6B7280, border rgba(209,213,219,0.2). Set up global CSS variables in index.css. Install and configure required dependencies: framer-motion, gsap, @react-three/fiber, three, lucide-react, axios, react-chartjs-2, chart.js. Configure Vite for React. Set up React Router for page navigation (Landing /, Search /Search, StockDetail /StockDetail, AIAssistant /AIAssistant).

AI 50%
Human 50%
High Priority
0.5 days
Frontend Developer
#38

Generate Synthetic Knowledge Base

To Do

As a Data Engineer, generate the synthetic knowledge base markdown files for all 20 supported Indian large-cap companies. For each company create three markdown files under knowledge_base/<CompanyName>/: (1) company_knowledge.md — Company Overview, Business Segments, Products & Services, Financial Highlights, Competitive Advantages, Risk Factors, Industry Outlook, Future Strategy; (2) quarterly_results.md — Revenue, PAT, EBITDA, EPS, Operating Margins, Key Highlights, Management Commentary, Future Guidance; (3) recent_news.md — 3-5 realistic news articles with Title, Date, Publisher, Summary. Companies: Reliance, TCS, Infosys, HDFC Bank, ICICI Bank, SBI, Bharti Airtel, ITC, Asian Paints, Tata Motors, Maruti, L&T, Bajaj Finance, Kotak Bank, Axis Bank, Sun Pharma, NTPC, UltraTech Cement, Hindustan Unilever, Mahindra & Mahindra. All data is synthetic but must be realistic and internally consistent.

AI 85%
Human 15%
High Priority
2 days
Data Engineer
#39

Setup FastAPI Backend Structure

To Do

As a Backend Developer, set up the FastAPI backend project structure. Initialize Python project with pyproject.toml or requirements.txt including: fastapi, uvicorn, pymongo, motor (async MongoDB), google-generativeai (Gemini SDK), sentence-transformers, langchain, langchain-community, python-dotenv, pydantic. Create folder structure: backend/api/ (routers), backend/services/ (retrieval, gemini, embedding), backend/models/ (pydantic schemas), backend/config.py (env vars: MONGODB_URI, GEMINI_API_KEY, EMBEDDING_MODEL). Set up main.py with FastAPI app, CORS middleware configured for frontend origin, and router registration. Configure .env.example with required environment variables. NOTE: Basic docker-compose and database setup are already done per project rules.

AI 55%
Human 45%
High Priority
0.5 days
Backend Developer
#2

Implement HeroSection for Landing

To Do

As a frontend developer, implement the HeroSection for the Landing page. Use `visible` state with a 100ms `setTimeout` on mount to trigger `ld-hero--visible` class. Render a layered background with `ld-hero__grid-overlay`, three glow divs (`ld-hero__glow--1/2/3`). Implement an auto-scrolling stock ticker (`ld-hero__ticker-track`) that duplicates the `tickerItems` array (10 NSE tickers like 'TCS ₹3,842.50 ▲2.1%') for infinite scroll animation via CSS. Render the hero content: badge with animated `ld-hero__badge-dot`, h1 with `ld-hero__title-accent` span, subtitle paragraph, two CTA buttons (`ld-hero__btn--primary` linking to `/Search`, `ld-hero__btn--secondary` linking to `/AIAssistant`), and a trust section with colored avatar spans. Apply HeroSection.css (9029 chars with ticker keyframe animation). Section should depend on Navbar existing.

Depends on:#1
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Frontend Developer
#3

Implement StatsSection for Landing

To Do

As a frontend developer, implement the StatsSection for the Landing page. Use `visible` state via `IntersectionObserver` at 0.3 threshold. Render four stat items (20+ Companies Covered, 5s Response Time, 100% Citation-Backed, 24/7 Always Available) with staggered `transitionDelay` of `i * 0.1s`. Each stat uses a `CountUp` sub-component that animates from 0 to `target` over 1500ms using `setInterval` at 16ms steps (60fps), only starting when `visible` is true. Render `ld-stats__icon` (◆ ⚡ ◈ ◎), `ld-stats__num` (from CountUp), `ld-stats__suffix`, and `ld-stats__label`. Apply StatsSection.css. Section is independent of other content sections.

Depends on:#1
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#4

Implement FeaturesSection for Landing

To Do

As a frontend developer, implement the FeaturesSection for the Landing page. Use `visible` state via `IntersectionObserver` at 0.15 threshold, plus `activeFeature` state (default 0) for tab-like interaction. Define a `features` array of 4 items — Natural Language Queries, Company Comparisons, Citation-Backed Responses, Risk Analysis — each with an inline SVG icon, title, description, and example query string. Render feature cards with click handlers that set `activeFeature` index, applying an active class to the selected card. The active feature's details panel or highlighted state updates accordingly. Apply FeaturesSection.css (3384 chars). Section is independent of other content sections.

Depends on:#1
Waiting for dependencies
AI 85%
Human 15%
High Priority
1 day
Frontend Developer
#5

Implement HowItWorksSection for Landing

To Do

As a frontend developer, implement the HowItWorksSection for the Landing page. Use `visible` state via `IntersectionObserver` at 0.15 threshold. Define a `steps` array of 4 objects (01 Ask Your Question, 02 AI Retrieves & Ranks, 03 Gemini Generates Response, 04 Citations Included) each with a `num` string, `title`, `description`, and inline SVG icon. Render a `ld-how__header` with label 'How It Works' and h2 title, followed by step cards using `ld-how--visible` class for entrance animation. Apply HowItWorksSection.css (3373 chars). Section is independent of other content sections.

Depends on:#1
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#6

Implement CompaniesSection for Landing

To Do

As a frontend developer, implement the CompaniesSection for the Landing page. Use `visible` state via `IntersectionObserver` at 0.15 threshold. Define a `companies` array of 20 large-cap Indian companies (TCS, Infosys, HDFC Bank, Reliance, ICICI Bank, Tata Motors, Asian Paints, Wipro, L&T, SBI, Bajaj Finance, HUL, Bharti Airtel, Kotak Bank, ITC, Axis Bank, Maruti Suzuki, Sun Pharma, Titan, NTPC) each with `name`, `sector`, and `ticker` (e.g. 'TCS.NS'). Define `sectorColors` map with 11 sector-to-CSS-variable/hex entries. Render `ld-companies__header` with label 'Coverage', h2, and desc, followed by a companies grid where each card displays sector color, company name, sector badge, and ticker. Apply CompaniesSection.css (3134 chars). Section is independent of other content sections.

Depends on:#1
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#8

Implement Footer for Landing

To Do

As a frontend developer, implement the Footer section for the Landing page. Render a `<footer>` with `ld-footer__inner` containing a top row and bottom row. The top row has three columns: `ld-footer__brand` with ◆ logo icon, 'FinSight AI' text, and tagline about RAG citation-backed accuracy; `ld-footer__links-group` titled 'Platform' with anchor links to `/`, `/Search`, `/StockDetail`, `/AIAssistant`; and a second links group titled 'Resources' with three muted `<span>` items (Documentation, API Reference, Data Sources). The bottom row renders copyright text '© 2024 FinSight AI. Hackathon Project — AI Research Assistant.' and four tech tags (React, FastAPI, Gemini, RAG) as `ld-footer__tech-tag` spans. Apply Footer.css (2356 chars). Note: this component may be reused across other pages.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#9

Implement Navbar for Search

To Do

As a frontend developer, implement the Navbar section for the Search page. This component may already exist from the Landing page (task eb96ce7c-5184-4535-bdae-89dc1a8b5582) — reuse or import the shared Navbar component. The Navbar uses useState for `scrolled` and `menuOpen` states, a useEffect scroll listener that toggles `ld-nav--scrolled` class at 40px scroll threshold, a hamburger button with `ld-nav__hamburger--open` toggle, and nav links array with labels Landing, Search, StockDetail, AIAssistant mapped to anchor tags with `ld-nav__link--active` class logic. Includes a 'Start Researching' CTA link to /Search. Styles from Navbar.css with `ld-nav`, `ld-nav__inner`, `ld-nav__logo`, `ld-nav__links--open` BEM classes.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#27

Build Semantic Retrieval Service

To Do

As a Backend Developer, implement the semantic retrieval service. Given a user query and optional company name list, embed the query using the same Sentence Transformer model, perform cosine similarity search against stored embeddings in MongoDB, filter by company if company names are extracted from query, return top-K (default 5) most relevant chunks with metadata. Expose as an internal service/module used by the chat and compare API endpoints. Include company name extraction logic (regex/string matching against supported 20 companies list).

Depends on:#26
Waiting for dependencies
AI 65%
Human 35%
High Priority
1.5 days
Backend Developer
#31

Implement GET /search Endpoint

To Do

As a Backend Developer, implement the GET /search FastAPI endpoint. Accept query params: q (search string), sector (optional filter), limit (default 20). Search across the 20 supported companies list by name/ticker/sector match. Return: { 'results': [{ 'company': string, 'ticker': string, 'sector': string, 'price': number, 'change': number, 'mcap': string, 'pe': number, 'high52': number }] }. For hackathon, financial values may be synthetic/static. NOTE: This endpoint supports the SearchBar (36862100) and CompanyGrid (f7431e8d) frontend tasks on the Search page.

Depends on:#26
Waiting for dependencies
AI 55%
Human 45%
Medium Priority
0.5 days
Backend Developer
#32

Implement GET /company/{ticker} Endpoint

To Do

As a Backend Developer, implement the GET /company/{ticker} FastAPI endpoint. Accept path param: ticker (e.g. TCS, INFY). Return company detail data: { 'company': string, 'ticker': string, 'sector': string, 'financials': { revenue, pat, eps, ebitda, dividend_yield, debt_equity, ebitda_margin with current/previous quarter values and trend }, 'annual_report_highlights': [{ icon, headline, description }] (5 items), 'recent_news': [{ date, headline, summary, source }] (4 items) }. Data may be synthetic for hackathon. NOTE: This endpoint supports FinancialHighlights (80d5e405), KeyMetrics (ceb3a303), AnnualReportSummary (2d4d4f14), and RecentNewsSummary (ebd947be) frontend tasks on the StockDetail page.

Depends on:#26
Waiting for dependencies
AI 55%
Human 45%
High Priority
1 day
Backend Developer
#34

Setup Axios API Client

To Do

As a Frontend Developer, set up a shared Axios API client for all backend API calls. Create src/api/client.js with Axios instance configured with baseURL from environment variable (VITE_API_BASE_URL, default http://localhost:8000). Add request/response interceptors for error handling. Create typed API service modules: chatApi.js (post /chat), compareApi.js (post /compare), searchApi.js (get /search), companyApi.js (get /company/:ticker). Export all service functions for use across pages. This shared client is required by all frontend pages that make API calls.

Depends on:#33
Waiting for dependencies
AI 60%
Human 40%
High Priority
0.5 days
Frontend Developer
#10

Implement SearchHeader for Search

To Do

As a frontend developer, implement the SearchHeader section for the Search page. Note: the provided JSX for this section appears to be a duplicate of the Navbar component (same Navbar.css import, same `ld-nav` structure with `scrolled`/`menuOpen` useState hooks and scroll useEffect). Implement the SearchHeader as a page title/hero area above the search interface — a static header section displaying the Search page heading and subtitle, styled to introduce the search experience. If the design JSX is confirmed as a copy error, coordinate with design to obtain the correct SearchHeader JSX; otherwise implement a heading section with appropriate `sh-` BEM classes consistent with the Search page layout.

Depends on:#9
Waiting for dependencies
AI 80%
Human 20%
High Priority
0.5 days
Frontend Developer
#11

Implement SearchBar for Search

To Do

As a frontend developer, implement the SearchBar section for the Search page. Uses framer-motion `motion` and `AnimatePresence` with custom `dropdownVariants` (hidden/visible/exit with opacity, y, scale transitions) and `itemVariants` (staggered x-slide with `Math.min(i * 0.025, 0.3)` delay). State: `query` (string), `activeFilters` (array), `showDropdown` (boolean), `highlightedIndex` (number, default -1). Refs: `inputRef` and `containerRef`. Static `companies` array of 22 NSE tickers (TCS, INFY, WIPRO, HCLTECH, HDFCBANK, etc.) with ticker/name/sector fields. `filterCategories` array with keys IT, Finance, Energy, Auto, FMCG, Pharma. Filter logic matches company name/ticker against `query` and `activeFilters`. Implements keyboard navigation via `highlightedIndex`. Dropdown animates in/out via AnimatePresence. Styles from SearchBar.css.

Depends on:#9
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Frontend Developer
#12

Implement CompanyGrid for Search

To Do

As a frontend developer, implement the CompanyGrid section for the Search page. Imports framer-motion `motion`, `gsap`, and `three` (THREE.js). Static `companies` dataset of 18 NSE large-caps (RELIANCE, TCS, HDFCBANK, INFY, ICICIBANK, BHARTIARTL, SBIN, ITC, HINDUNILVR, LT, BAJFINANCE, ASIANPAINT, MARUTI, TITAN, KOTAKBANK, WIPRO, SUNPHARMA, TATAMOTORS) each with ticker, name, sector, price (₹), change (positive/negative float), mcap, pe, and high52 fields. Uses useState, useEffect, useRef, useCallback hooks. GSAP is used for card entrance/hover animations. THREE.js likely provides a background particle or canvas effect per card or for the grid container. Each card displays ticker, company name, sector badge, price, change percentage (color-coded green/red), mcap, PE ratio, and 52-week high. Styles from CompanyGrid.css. Cards are clickable navigating to /StockDetail.

Depends on:#9
Waiting for dependencies
AI 85%
Human 15%
High Priority
2 days
Frontend Developer
#14

Implement RecentSearches for Search

To Do

As a frontend developer, implement the RecentSearches section for the Search page. Uses framer-motion `motion` and `AnimatePresence`, THREE.js for a `ParticleField` background component, and hooks useState, useRef, useEffect, useCallback, useMemo. The `ParticleField` component creates a THREE.js scene with PerspectiveCamera (FOV 35, z=12), WebGLRenderer (alpha, antialias, pixelRatio capped at 2), and 90 particles via BufferGeometry with `position` and `size` BufferAttributes — particles randomly distributed across a 20×14×6 unit space with sizes 1.5–5.0. Two data arrays: `recentSearches` (8 items: TCS, INFY, HDFCBANK, RELIANCE, ASIANPAINT, TATAMOTORS, WIPRO, LT with `timeAgo` strings) and `popularSearches` (10 items with `freq` counts like '2.4K' and `trend` up/down flags). Renders two tabs or panels — Recent (with time stamps) and Popular (with frequency badges and trend indicators). AnimatePresence handles list item enter/exit. Styles from RecentSearches.css.

Depends on:#9
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
2 days
Frontend Developer
#15

Implement FinancialHighlights for StockDetail

To Do

As a frontend developer, implement the FinancialHighlights section for the StockDetail page. Render a 6-card grid using the `fh-grid` layout, each `fh-card` displaying a financial metric (Latest Revenue, Quarterly Profit, EPS, Dividend Yield, Debt-to-Equity, EBITDA Margin) with label, value, trend badge (`fh-trend-badge--positive` / `fh-trend-badge--negative`), trend icon, period label, and secondary descriptor. Static data is defined inline in the `metrics` array — no API calls or state hooks required. Import and apply `FinancialHighlights.css` for card styling and grid layout.

Depends on:#9
Waiting for dependencies
AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#16

Implement KeyMetrics for StockDetail

To Do

As a frontend developer, implement the KeyMetrics section for the StockDetail page. Accept a `company` prop (with `name` and `ticker` fields) to dynamically set `companyLabel`. Render a financial data comparison table (Revenue, PAT, EPS, EBITDA) showing current vs last quarter values and percentage change with positive/negative colouring. Integrate two Chart.js `Line` charts via `react-chartjs-2`: a Revenue trend chart (blue `#1E3A8A`, filled area) and a Net Profit chart (green `#10B981`, filled area), both using `CategoryScale`, `LinearScale`, `PointElement`, `LineElement`, `Filler`, `Tooltip`, and `Legend` registered via `ChartJS.register`. Configure `chartOptions` with responsive layout, hidden legend, custom tooltip styling (`rgba(17,24,39,0.95)` background), and subdued grid lines. Import `KeyMetrics.css`.

Depends on:#9
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Frontend Developer
#17

Implement AnnualReportSummary for StockDetail

To Do

As a frontend developer, implement the AnnualReportSummary section for the StockDetail page. Accept a `company` prop to dynamically render `companyName` and construct `reportUrl` (e.g. `/reports/tcs-annual-report`). Render a vertical `ars-timeline` of 5 highlight items (Revenue Growth, New Market Expansion, R&D Investment, Operating Margin, Shareholder Returns), each as an `ars-item` with an emoji icon in `ars-item-icon-wrapper`, a headline `h3`, and a description paragraph. Include a CTA button (`ars-cta-button`) as an anchor linking to `reportUrl` with an inline SVG icon. Import `AnnualReportSummary.css`.

Depends on:#9
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#18

Implement RecentNewsSummary for StockDetail

To Do

As a frontend developer, implement the RecentNewsSummary section for the StockDetail page. Use `useState` and `useEffect` from React alongside `framer-motion` (`motion`) for staggered card entry animations using `cardVariants` (hidden: opacity 0 / y 24, visible: staggered delay of `i * 0.12s`). Render 4 news cards from the `newsData` array (date, headline, summary, source) with Framer Motion `motion.div` wrappers and custom index-based delays. Integrate a `@react-three/fiber` `Canvas` rendering a `HeaderGlobe` — a Three.js sphere (`sphereGeometry args=[1.15,32,32]`) with `meshStandardMaterial` (color `#1E3A8A`, emissive `#3B82F6`) and 4 orbiting dot meshes in amber, green, orange, and blue emissive materials. Use `gsap` for any supplementary animations. Import `RecentNewsSummary.css`.

Depends on:#9
Waiting for dependencies
AI 80%
Human 20%
High Priority
2 days
Frontend Developer
#19

Implement AIAssistantPreview for StockDetail

To Do

As a frontend developer, implement the AIAssistantPreview section for the StockDetail page. Use `useState` to track `activeQuestion` (initially `null`). Render 3 example question pill buttons (`aap-pill`, `aap-pill--active` when selected) from the `exampleQuestions` array. On `handlePillClick`, set `activeQuestion` and immediately navigate via `window.location.href` to `/AIAssistant?q=<encoded>`. Include two CTA anchor buttons: a primary `aap-btn-primary` linking to `/AIAssistant` (with chat bubble SVG icon) and a secondary `aap-btn-secondary` linking to `/Search` (with search circle SVG icon). Import `AIAssistantPreview.css`.

Depends on:#9
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#20

Implement Footer for StockDetail

To Do

As a frontend developer, implement the Footer section for the StockDetail page. This component mirrors the Footer already implemented for the Landing page (`fe4ecb79-5a06-43e4-8653-d1f5e1ede712`) — reuse or verify that existing component if available. Render `ld-footer` with a top row containing: brand block (`ld-footer__logo` with ◆ icon and 'FinSight AI' text, tagline about RAG-backed accuracy) and two link groups ('Platform' with anchors to /, /Search, /StockDetail, /AIAssistant; 'Resources' with muted spans for Documentation, API Reference, Data Sources). Bottom row includes copyright span and tech tag pills (React, FastAPI, Gemini, RAG). Import `Footer.css`.

Depends on:#9
Waiting for dependencies
AI 92%
Human 8%
Low Priority
0.5 days
Frontend Developer
#28

Integrate Gemini LLM Response

To Do

As a Backend Developer, integrate Google Gemini API for response generation. Build prompt builder that constructs the system prompt ('You are an AI Financial Research Assistant. Answer ONLY using the supplied context. Do not invent facts. If information is unavailable, clearly state that the context does not contain the answer. Always provide citations.') and injects top-K retrieved chunks as context. Call Gemini API to generate grounded answer. Parse response to extract citation references and format citation objects (company, document_type, section, source fields). Return structured response with 'answer' string and 'citations' array.

Depends on:#27
Waiting for dependencies
AI 60%
Human 40%
High Priority
1.5 days
AI Engineer
#13

Implement SearchFilters for Search

To Do

As a frontend developer, implement the SearchFilters section for the Search page. Note: the provided JSX for this section appears to be a duplicate of the Navbar component (same Navbar.css import and `ld-nav` BEM structure with `scrolled`/`menuOpen` useState and scroll useEffect). Implement SearchFilters as a sidebar or horizontal filter panel providing sector/metric filter controls (e.g., sector chips for IT, Finance, Energy, Auto, FMCG, Pharma — consistent with the filterCategories in SearchBar). If the design JSX is confirmed a copy error, coordinate with design for the correct SearchFilters JSX; otherwise implement filter toggle chips with `sf-` BEM classes that integrate with SearchBar's `activeFilters` state to filter the CompanyGrid results.

Depends on:#11
Waiting for dependencies
AI 80%
Human 20%
Medium Priority
1 day
Frontend Developer
#21

Implement QueryInput for AIAssistant

To Do

As a frontend developer, implement the QueryInput section for the AIAssistant page. Build the main query input component using a textarea ref (textareaRef) with useState hooks for query, selectedTags, isListening, exampleIndex, showRecent, and hasSubmitted. Implement auto-advancing example queries via setInterval cycling through EXAMPLE_QUERIES array every 5000ms. Build a company tag selector with toggleTag callback for 15 COMPANIES (TCS, INFY, HDFC Bank, etc.) with multi-select state. Implement voice input simulation via toggleVoice — sets isListening true, then after 2800ms appends a sample query string and resets. Implement handleSubmit with 2000ms hasSubmitted flash state. Add applyExample to populate textarea from EXAMPLE_QUERIES. Add handleKeyDown for Enter-to-submit (no shift). Show RECENT_SEARCHES dropdown toggled by showRecent state. Include character counter against MAX_CHARS=500. Animate with framer-motion AnimatePresence and motion components; use lucide-react icons (Mic, Send, X, Clock, ChevronDown, ChevronLeft, ChevronRight, RotateCcw). Style from QueryInput.css.

Depends on:#15
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Frontend Developer
#22

Implement ResponseDisplay for AIAssistant

To Do

As a frontend developer, implement the ResponseDisplay section for the AIAssistant page. Render RESPONSE_PARAGRAPHS array which contains typed nodes: 'heading', 'paragraph', 'list', and 'table' blocks. Implement a typewriter/streaming effect using typingComplete state and TYPING_SPEED_MS=28 to progressively reveal text. Render an inline citation reference table using the CITATIONS array (4 entries with num, source, href fields) linked from superscript markers [1]–[4] in paragraph text. Render the competitive comparison data table with headers ['Metric', 'TCS', 'Infosys', 'Wipro'] and 5 data rows. Animate section reveal with framer-motion AnimatePresence and motion components. Style from ResponseDisplay.css.

Depends on:#15
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Frontend Developer
#23

Implement CitationPanel for AIAssistant

To Do

As a frontend developer, implement the CitationPanel section for the AIAssistant page. Render ALL_CITATIONS (5 entries for TCS, RIL, HDFC Bank, Infosys, Tata Motors) with fields: id, company, ticker, docType ('annual'/'report'/'news'), docLabel, source, date, snippet, and color hex. Implement useMemo-based filtering by docType. Each citation card displays colored ticker badge, docLabel chip, source string, date, and a snippet excerpt. Animate card entrance and filter transitions with framer-motion AnimatePresence. Style from CitationPanel.css.

Depends on:#15
Waiting for dependencies
AI 88%
Human 12%
High Priority
1 day
Frontend Developer
#24

Implement ComparisonView for AIAssistant

To Do

As a frontend developer, implement the ComparisonView section for the AIAssistant page. Build an interactive multi-company financial comparison UI using ALL_COMPANIES (TCS, Infosys, HDFC Bank, Reliance, ICICI Bank with color tokens) and METRICS (revenue, eps, ebitda, pat, growth). Use COMPANY_DATA lookup for raw values. Implement AnimatedValue component with a kinetic number counter using useRef animation loop over 650ms duration. Use getFormatFn to apply formatRevenue (₹+toLocaleString 'en-IN'), formatEPS (₹+toFixed(2)), or formatPercent (toFixed(1)+'%') based on metric key. Register GSAP ScrollTrigger plugin and use useRef/useEffect for scroll-driven reveal animations. Manage selectedCompanies and selectedMetric state with useCallback for toggle logic. Use useMemo for filtered/sorted company data. Animate layout changes with framer-motion AnimatePresence. Style from ComparisonView.css.

Depends on:#15
Waiting for dependencies
AI 82%
Human 18%
High Priority
2 days
Frontend Developer
#25

Implement RelatedQuestions for AIAssistant

To Do

As a frontend developer, implement the RelatedQuestions section for the AIAssistant page. Render 4 QUESTIONS (tcs-growth, infy-vs-tcs-revenue, asianpaints-risks, reliance-revenue-trend) each with a lucide-react icon (TrendingUp, BarChart3, AlertTriangle, LineChart), text, and description. Build TiltCard component using framer-motion useMotionValue and useTransform to derive rotateX/rotateY from mouse position within card bounds (range [0,1] → [-5,5] degrees). Handle onMouseMove to update x/y motion values and onMouseLeave to reset to 0.5. Apply whileTap scale 0.97. Animate card entrance with whileInView, staggered by index*0.1s delay, spring stiffness 320 damping 26. Manage loadingId state in RelatedQuestions; handleSelect sets loadingId for 900ms then clears. Show rq-card__spinner when isLoading, else ChevronRight icon. Style from RelatedQuestions.css.

Depends on:#15
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#29

Implement POST /chat Endpoint

To Do

As a Backend Developer, implement the POST /chat FastAPI endpoint. Accept request body: { 'query': string, 'company_filter': string[] (optional) }. Orchestrate: extract company names from query → call retrieval service → build Gemini prompt with top-K context → return { 'answer': string, 'citations': [{ 'company': string, 'ticker': string, 'document_type': string, 'section': string, 'source': string, 'snippet': string }] }. Enforce <5 second response time SLA. Add CORS middleware to allow frontend origin. NOTE: This endpoint is required by the QueryInput (7bdf7a40) and ResponseDisplay (df74c416) frontend tasks on the AIAssistant page.

Depends on:#28
Waiting for dependencies
AI 60%
Human 40%
High Priority
1 day
Backend Developer
#30

Implement POST /compare Endpoint

To Do

As a Backend Developer, implement the POST /compare FastAPI endpoint. Accept request body: { 'companies': string[] (2-5 company names/tickers), 'metrics': string[] (optional, e.g. revenue, eps, ebitda, pat, growth) }. Retrieve relevant financial chunks for each company, extract structured metric values from chunks using Gemini, return side-by-side comparison data: { 'comparison': { company: string, metrics: { [key]: { value, formatted_value, period } }[] } [], 'citations': Citation[] }. NOTE: This endpoint is required by the ComparisonView (c0ec442f) frontend task on the AIAssistant page.

Depends on:#28
Waiting for dependencies
AI 65%
Human 35%
High Priority
1.5 days
Backend Developer
#37

Integrate StockDetail Page Backend

To Do

As a Tech Lead, verify the end-to-end integration between the StockDetail page frontend and the GET /company/{ticker} backend API. Ensure FinancialHighlights renders live metric data from the API, KeyMetrics charts use real revenue/profit trend data, AnnualReportSummary dynamically populates highlights per company, and RecentNewsSummary displays actual news items from the API response. Confirm navigation from Search CompanyGrid (clicking a card to /StockDetail?ticker=TCS) correctly passes and loads the right company data.

Depends on:#15#17#18#32#34#16
Waiting for dependencies
AI 40%
Human 60%
High Priority
0.5 days
Tech Lead
#35

Integrate AIAssistant Chat Flow

To Do

As a Tech Lead, verify the end-to-end integration between the AIAssistant frontend implementation and the /chat backend API. Ensure QueryInput submits query to POST /chat, ResponseDisplay renders the returned answer with streaming/typewriter effect, CitationPanel populates from the citations array in the API response, and RelatedQuestions suggestions are properly handled. Confirm data flows correctly from user input through RAG pipeline to displayed answer with citations. NOTE: Also verify ComparisonView integrates with POST /compare for multi-company metric comparison.

Depends on:#24#21#29#22#30#25#23#34
Waiting for dependencies
AI 40%
Human 60%
High Priority
1 day
Tech Lead
#36

Integrate Search Page Backend

To Do

As a Tech Lead, verify the end-to-end integration between the Search page frontend implementation and the GET /search backend API. Ensure SearchBar query submissions call the API, CompanyGrid renders live results from the API response, SearchFilters correctly pass sector/metric filter params to the API, and RecentSearches are persisted/retrieved appropriately. Confirm all 20 supported companies appear correctly with financial data fields (price, change, mcap, pe, high52).

Depends on:#14#13#34#11#31#12
Waiting for dependencies
AI 40%
Human 60%
High Priority
0.5 days
Tech Lead
Landing design preview
Landing: View Overview
Search: Select Company
StockDetail: View Highlights
AIAssistant: Get Summary
AIAssistant: View Citations
AIAssistant: Compare Stocks
AIAssistant: Review Metrics
AIAssistant: News Summary
AIAssistant: Investment Insights