Initial commit: Instant SWOT Agent

Multi-agent strategic analysis system with:
- Research Gateway (A2A client to Researcher-Agent)
- Analyzer, Critic, Editor workflow nodes
- Data grounding enforcement in all LLM calls
- React frontend with real-time progress

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.dockerignore

@@ -0,0 +1,52 @@
+# Docker ignore file
+
+# Node modules
+node_modules
+frontend/node_modules
+
+# Python cache
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+
+# Virtual environment
+.venv
+venv
+
+# Environment files
+.env
+.env.local
+
+# Git files
+git
+.git
+.gitignore
+.gitmodules
+
+# IDE files
+.vscode
+.idea
+
+# Build artifacts
+dist
+build
+
+# Logs and cache
+*.log
+*.cache
+
+# Documentation
+docs
+
+# Test files
+tests
+
+# Coverage
+.coverage
+htmlcov
+
+# Misc
+.DS_Store
+*.swp
+*.swo

.env.example

@@ -0,0 +1,63 @@
+# Instant SWOT Agent - Environment Configuration
+# Copy this file to .env and fill in your API keys
+
+# ========================================
+# LLM Providers (at least one required)
+# ========================================
+
+# Primary - Groq (fast, recommended for demos)
+GROQ_API_KEY=
+GROQ_MODEL=llama-3.1-8b-instant
+
+# Fallback 1 - Google Gemini
+GEMINI_API_KEY=
+GEMINI_MODEL=gemini-2.0-flash-exp
+
+# Fallback 2 - OpenRouter (aggregator, many models)
+OPENROUTER_API_KEY=
+OPENROUTER_MODEL=google/gemini-2.0-flash-exp:free
+
+# ========================================
+# Search API (required for live company data)
+# ========================================
+TAVILY_API_KEY=
+
+# ========================================
+# Volatility MCP Server (optional)
+# ========================================
+
+# FRED - Federal Reserve Economic Data (for authoritative VIX)
+# Get free key: https://fred.stlouisfed.org/docs/api/api_key.html
+FRED_API_KEY=
+
+# Alpha Vantage (for implied volatility from options)
+# Get free key: https://www.alphavantage.co/support/#api-key
+ALPHA_VANTAGE_API_KEY=
+
+# ========================================
+# Sentiment MCP Server (optional)
+# ========================================
+
+# Finnhub - News sentiment data
+# Get free key: https://finnhub.io/register
+FINNHUB_API_KEY=
+
+# ========================================
+# A2A Protocol Configuration (optional)
+# ========================================
+
+# Enable A2A mode (set to true to use Researcher A2A Server)
+USE_A2A_RESEARCHER=false
+
+# Researcher A2A Server URL
+A2A_RESEARCHER_URL=https://vn6295337-researcher-a2a-agent.hf.space
+
+# A2A timeout in seconds
+A2A_TIMEOUT=60
+
+# ========================================
+# Tracing (optional, for debugging)
+# ========================================
+LANGCHAIN_API_KEY=
+LANGCHAIN_TRACING_V2=false
+LANGCHAIN_PROJECT=ai-strategy-copilot

.gitignore

@@ -0,0 +1,199 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+# Python lib directories (but not frontend/src/lib)
+/lib/
+lib64/
+!frontend/src/lib/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+.python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+# Node modules
+node_modules/
+
+# Log files
+*.log
+
+# Temporary files
+*.tmp
+*.temp
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Obsidian
+.obsidian/
+
+# Binary/media assets
+*.png
+*.jpg
+*.jpeg
+*.gif
+*.avif
+*.xlsx
+*.pdf
+
+# Storybook assets
+frontend/src/stories/assets/
+
+# Draft files
+process_flow.*

BUSINESS_README.md

@@ -0,0 +1,89 @@
+# Instant SWOT Agent
+
+## Executive Summary
+
+Instant SWOT Agent is a proof-of-concept demonstrating how to build **reliable, enterprise-grade AI systems** that solve the core challenge plaguing most GenAI deployments: inconsistent output quality.
+
+This project showcases a multi-agent AI architecture that autonomously generates strategic SWOT analyses for publicly-traded companies—with built-in quality control that ensures outputs meet a defined standard before delivery. The system aggregates real-time data from six different sources, orchestrates specialized AI agents, and implements a self-correcting feedback loop that eliminates the "first draft = final draft" problem endemic to most LLM applications.
+
+---
+
+## Problem Statement
+
+Enterprise AI deployments consistently fail not because of model capability, but because of **quality unpredictability**. Strategic analysis tools face three compounding challenges:
+
+1. **Quality variance:** LLM outputs range from exceptional to unusable, with no systematic mechanism to detect or correct poor results before they reach end users.
+
+2. **Data fragmentation:** Strategic decisions require synthesizing financial data, market conditions, competitive intelligence, and sentiment—typically scattered across multiple systems and formats.
+
+3. **Time-to-insight gap:** Manual analysis processes that take hours or days cannot support the pace of modern business decision-making.
+
+The result: organizations either accept inconsistent AI outputs or abandon GenAI initiatives entirely, forfeiting competitive advantage.
+
+---
+
+## Solution Overview
+
+Instant SWOT Agent addresses these challenges through a **multi-agent workflow with autonomous quality control**:
+
+**Specialized Agent Roles:**
+- **Researcher Agent** — Aggregates real-time data from financial filings, market indicators, news sources, and sentiment signals
+- **Analyst Agent** — Synthesizes research into structured SWOT analysis aligned with specified strategic frameworks
+- **Critic Agent** — Evaluates output quality using a hybrid scoring system (objective metrics + subjective assessment)
+- **Editor Agent** — Revises drafts based on specific critique feedback until quality thresholds are met
+
+**The Quality Loop:** The system operates as a closed feedback loop. Analysis outputs are automatically evaluated against defined criteria. If quality falls below threshold, targeted revisions are made and re-evaluated—up to three iterations—ensuring consistent, board-ready deliverables.
+
+**Data Integration:** Six specialized data services aggregate 38+ metrics spanning fundamentals, valuation, volatility, macroeconomic indicators, news coverage, and market sentiment—all from free, publicly-available sources.
+
+---
+
+## Strategic AI Value
+
+This architecture addresses what enterprises struggle with most when deploying GenAI: **building trust through reliability**.
+
+**Quality gates enable business adoption.** By implementing systematic evaluation before output delivery, organizations can deploy AI-assisted analysis with confidence that quality standards will be maintained—critical for regulated industries and high-stakes decisions.
+
+**Self-correction reduces human overhead.** Rather than requiring human review of every output, the system handles routine quality issues autonomously, escalating only when necessary. This shifts human effort from review to exception-handling.
+
+**Modular data architecture supports customization.** The standardized data service layer allows organizations to swap in proprietary data sources (internal financials, CRM data, competitive intelligence) without modifying the core workflow—reducing integration complexity.
+
+**Cascading resilience prevents single points of failure.** The system gracefully degrades across multiple AI providers and data sources, maintaining availability even when individual services experience issues.
+
+---
+
+## Product & System Thinking
+
+**Design decisions reflect enterprise deployment priorities:**
+
+| Challenge | Design Choice | Reasoning |
+|-----------|---------------|-----------|
+| Output quality variance | Hybrid scoring (40% objective + 60% subjective) | Objective checks catch structural issues; subjective evaluation assesses insight quality |
+| Revision efficiency | Maximum three iterations | Empirical testing showed quality plateaus after 2-3 cycles; prevents wasted computation |
+| Quality threshold | Score of 7/10 to pass | Balances output quality against latency; lower thresholds cause excessive loops |
+| Provider reliability | Cascading fallback across three LLM providers | Ensures availability; automatically routes around provider outages |
+| Data integration complexity | Standardized MCP server interface | Agents call tools without knowing underlying APIs; sources can be swapped transparently |
+
+**Trade-offs acknowledged:**
+
+The demonstration uses the same model for both analysis and evaluation—a known limitation where self-evaluation can introduce bias. Production deployment would use a more capable model for evaluation or incorporate human-in-the-loop review for high-stakes outputs. This trade-off was intentional: demonstrating the architectural pattern while managing demo infrastructure costs.
+
+---
+
+## PoC Capabilities
+
+- **Multi-agent workflow orchestration** — Coordinating specialized agents with clear handoffs and state management
+- **Self-correcting feedback loops** — Implementing autonomous quality control with defined exit criteria
+- **Hybrid evaluation systems** — Combining deterministic checks with LLM-based assessment for robust scoring
+- **Real-time data pipeline integration** — Aggregating structured and unstructured data from multiple external sources
+- **Provider resilience patterns** — Building fallback chains for reliability across AI and data services
+- **Prompt engineering for specialized roles** — Designing role-specific prompts that produce consistent, structured outputs
+- **Full-stack AI application development** — Backend orchestration, API layer, and interactive frontend
+- **Rapid PoC execution** — Concept-to-deployment using vibe coding practices and modern tooling
+- **Observability integration** — Tracing and monitoring for debugging and performance optimization
+
+---
+
+**Live Demo:** [huggingface.co/spaces/vn6295337/Instant-SWOT-Agent](https://huggingface.co/spaces/vn6295337/Instant-SWOT-Agent)
+
+**Technical Documentation:** See [README.md](README.md) for architecture details and setup instructions.

Dockerfile

@@ -0,0 +1,32 @@
+# Dockerfile for HF Spaces (Docker SDK)
+# Uses pre-built frontend from static/ directory
+
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Copy Python requirements and install
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY src/ ./src/
+COPY a2a/ ./a2a/
+COPY data/ ./data/
+COPY .env.example ./.env
+
+# Copy pre-built frontend (built locally and committed)
+COPY static/ ./static/
+
+# Verify static files exist
+RUN ls -la /app/static/ && ls -la /app/static/assets/
+
+# Expose port (HF Spaces uses 7860)
+EXPOSE 7860
+
+# Environment variables
+ENV PYTHONUNBUFFERED=1
+ENV PYTHONPATH=/app
+
+# Start server (using new consolidated path)
+CMD ["uvicorn", "src.api.app:app", "--host", "0.0.0.0", "--port", "7860"]

Makefile

@@ -0,0 +1,104 @@
+# Makefile for Instant SWOT Agent
+
+# Variables
+PYTHON := python3
+PIP := pip3
+VENV := .venv
+TEST_DIR := tests
+SRC_DIR := src
+
+# Default target
+.PHONY: help
+help:
+	@echo "Instant SWOT Agent - Makefile Commands"
+	@echo ""
+	@echo "Usage:"
+	@echo "  make install           Install dependencies"
+	@echo "  make test              Run tests"
+	@echo "  make api               Run the FastAPI backend"
+	@echo "  make ui                Run the Streamlit UI"
+	@echo "  make analyze TICKER=X  Run CLI analysis for ticker X"
+	@echo "  make clean             Clean generated files"
+	@echo "  make docs              Generate documentation"
+	@echo "  make lint              Run code linting"
+	@echo "  make format            Format code with black"
+	@echo "  make help              Show this help message"
+
+# Install dependencies
+.PHONY: install
+install:
+	$(PIP) install -r requirements.txt
+
+# Run tests
+.PHONY: test
+test:
+	$(PYTHON) -m pytest $(TEST_DIR) -v
+
+# Run the Streamlit UI
+.PHONY: ui
+ui:
+	$(PYTHON) -m src.main streamlit
+
+# Run the FastAPI backend
+.PHONY: api
+api:
+	$(PYTHON) -m src.main api
+
+# Run the new React frontend with FastAPI backend
+.PHONY: frontend
+frontend:
+	./run_frontend.sh
+
+# Run CLI analysis (example: make analyze TICKER=AAPL)
+.PHONY: analyze
+analyze:
+	$(PYTHON) -m src.main analyze $(TICKER)
+
+# Clean generated files
+.PHONY: clean
+clean:
+	rm -rf *.log
+	rm -rf data/logs/
+	find . -type f -name "*.pyc" -delete
+	find . -type d -name "__pycache__" -delete
+
+# Lint code
+.PHONY: lint
+lint:
+	flake8 $(SRC_DIR) $(TEST_DIR)
+	pylint $(SRC_DIR) $(TEST_DIR)
+
+# Format code
+.PHONY: format
+format:
+	black $(SRC_DIR) $(TEST_DIR)
+
+# Generate documentation
+.PHONY: docs
+docs:
+	@echo "Documentation is available in the docs/ directory"
+
+# Setup development environment
+.PHONY: setup-dev
+setup-dev:
+	$(PYTHON) -m venv $(VENV)
+	. $(VENV)/bin/activate && $(PIP) install -r requirements.txt
+	@echo "Development environment setup complete. Activate with: source $(VENV)/bin/activate"
+
+# Run with coverage
+.PHONY: coverage
+coverage:
+	$(PYTHON) -m pytest $(TEST_DIR) --cov=$(SRC_DIR) --cov-report=html
+
+# Run specific test
+.PHONY: test-unit
+test-unit:
+	$(PYTHON) -m pytest $(TEST_DIR)/graph_test.py -v
+
+.PHONY: test-integration
+test-integration:
+	$(PYTHON) -m pytest $(TEST_DIR)/test_mcp_comprehensive.py -v
+
+.PHONY: test-ui
+test-ui:
+	$(PYTHON) -m pytest $(TEST_DIR)/test_streamlit.py -v

README.md

@@ -0,0 +1,345 @@
+---
+title: Instant SWOT Agent
+emoji: 📊
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+short_description: Instant SWOT Agent with self-correcting feedback
+---
+
+# Instant SWOT Agent
+
+**Multi-agent workflow with self-correcting quality control for strategic analysis.**
+
+[![Python 3.11+](https://img.shields.io/badge/python-3.11+-blue.svg)](https://www.python.org/downloads/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+| Resource | Link |
+|----------|------|
+| Live Demo | [huggingface.co/spaces/vn6295337/Instant-SWOT-Agent](https://huggingface.co/spaces/vn6295337/Instant-SWOT-Agent) |
+| Product Demo Video | [Pre-recorded Demo](https://github.com/vn6295337/Instant-SWOT-Agent/issues/1) |
+| Business Guide | [BUSINESS_README.md](BUSINESS_README.md) |
+
+---
+
+## The Problem
+
+Strategic analysis is time-consuming and quality varies widely. Analysts spend hours gathering data and drafting reports, with no systematic quality checks until peer review—often too late in the process.
+
+## The Solution
+
+This demo implements an **agentic AI pattern** where specialized agents collaborate autonomously: one gathers data, another drafts analysis, a third evaluates quality, and a fourth revises until standards are met. The self-correcting loop eliminates the "first draft = final draft" problem common in LLM applications.
+
+## Why This Matters
+
+Most enterprise AI deployments fail not from bad models, but from lack of quality gates. This architecture demonstrates how to build reliability into AI workflows—a pattern applicable to any domain requiring consistent output quality.
+
+---
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                              USER INTERFACE                                  │
+│                             (React + Vite)                                  │
+└─────────────────────────────────┬───────────────────────────────────────────┘
+                                  │
+                                  ▼
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                          ORCHESTRATION (LangGraph)                          │
+│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐    │
+│  │  Researcher  │─▶│   Analyst    │─▶│    Critic    │─▶│    Editor    │    │
+│  │              │  │  (SWOT Gen)  │  │  (Scoring)   │  │  (Revision)  │    │
+│  └──────────────┘  └──────────────┘  └──────┬───────┘  └───────┬──────┘    │
+│                                             │   score < 7      │           │
+│                                             │◀─────────────────┘           │
+│                                             ▼                              │
+│                                      score ≥ 7 or 3 revisions → [END]      │
+└─────────────────────────────────────────────┬───────────────────────────────┘
+                                              │
+                    ┌─────────────────────────┼─────────────────────────┐
+                    │                         │                         │
+                    ▼                         ▼                         ▼
+┌───────────────────────────┐ ┌───────────────────────────┐ ┌───────────────────────────┐
+│  1. FINANCIALS BASKET     │ │  2. VOLATILITY BASKET     │ │  3. MACRO BASKET          │
+│     (MCP Server) ✓        │ │     (MCP Server) ✓        │ │     (MCP Server) ✓        │
+├───────────────────────────┤ ├───────────────────────────┤ ├─────���─────────────────────┤
+│ • get_financials          │ │ • get_vix                 │ │ • get_gdp                 │
+│ • get_debt_metrics        │ │ • get_beta                │ │ • get_interest_rates      │
+│ • get_cash_flow           │ │ • get_historical_vol      │ │ • get_cpi                 │
+│ • get_material_events     │ │ • get_implied_vol         │ │ • get_unemployment        │
+│ • get_ownership_filings   │ │ • get_volatility_basket   │ │ • get_macro_basket        │
+│ • get_going_concern       │ │                           │ │                           │
+│ • get_sec_fundamentals    │ │                           │ │                           │
+└─────────────┬─────────────┘ └─────────────┬─────────────┘ └─────────────┬─────────────┘
+              │                             │                             │
+              ▼                             ▼                             ▼
+┌───────────────────────────┐ ┌───────────────────────────┐ ┌───────────────────────────┐
+│      SEC EDGAR API        │ │  FRED API + Yahoo Finance │ │         FRED API          │
+│      (Free, Public)       │ │  (Free with API Key)      │ │      (Free with Key)      │
+└───────────────────────────┘ └───────────────────────────┘ └───────────────────────────┘
+
+┌───────────────────────────┐ ┌───────────────────────────┐ ┌───────────────────────────┐
+│  4. VALUATION BASKET      │ │  5. NEWS BASKET           │ │  6. SENTIMENT BASKET      │
+│     (MCP Server) ✓        │ │     (MCP Server) ✓        │ │     (MCP Server) ✓        │
+├───────────────────────────┤ ├───────────────────────────┤ ├───────────────────────────┤
+│ • get_pe_ratio            │ │ • search_company_news     │ │ • get_social_sentiment    │
+│ • get_ps_ratio            │ │ • search_going_concern    │ │ • get_analyst_ratings     │
+│ • get_pb_ratio            │ │ • search_industry_trends  │ │                           │
+│ • get_ev_ebitda           │ │ • search_competitor_news  │ │                           │
+│ • get_valuation_basket    │ │ • tavily_search           │ │                           │
+└─────────────┬─────────────┘ └─────────────┬─────────────┘ └─────────────┬─────────────┘
+              │                             │                             │
+              ▼                             ▼                             ▼
+┌───────────────────────────┐ ┌───────────────────────────┐ ┌───────────────────────────┐
+│    Yahoo + SEC EDGAR      │ │       Tavily API          │ │     Finnhub API           │
+│      (Free/Public)        │ │  (Free 1,000/month)       │ │   (Free with API Key)     │
+└───────────────────────────┘ └───────────────────────────┘ └───────────────────────────┘
+
+```
+
+### MCP Baskets Summary
+
+| # | Basket | Status | Source | Key Metrics |
+|---|--------|--------|--------|-------------|
+| 1 | Financials | ✓ Done | SEC EDGAR | Revenue, Margins, Debt, Cash Flow, 8-K, Ownership |
+| 2 | Volatility | ✓ Done | FRED + Yahoo | VIX, Beta, Historical Vol, Implied Vol |
+| 3 | Macro | ✓ Done | FRED | GDP, CPI, Interest Rates, Unemployment |
+| 4 | Valuation | ✓ Done | Yahoo + SEC | P/E, P/S, P/B, EV/EBITDA, PEG |
+| 5 | News | ✓ Done | Tavily | Company News, Industry Trends, Competitors |
+| 6 | Sentiment | ✓ Done | Finnhub | Social Sentiment, Analyst Ratings |
+
+### Data Flow
+
+```
+User Input (Company) → Researcher → [MCP Servers] → Raw Data
+                                         ↓
+Raw Data → Analyst → SWOT Draft → Critic → Score
+                                     ↓
+                        Score < 7 → Editor → Revised Draft → Critic
+                        Score ≥ 7 → Final Output → User
+```
+
+## Features
+
+| Agent | Role | Implementation |
+|-------|------|----------------|
+| **Researcher** | Gathers real-time company data | 6 MCP servers (financials, volatility, macro, valuation, news, sentiment) |
+| **Analyst** | Drafts SWOT based on selected strategy | Prompt-engineered generation |
+| **Critic** | Scores output 1-10 with reasoning | Rubric-based evaluation |
+| **Editor** | Revises based on critique | Targeted improvement |
+
+**Supported Strategies:** Cost Leadership, Differentiation, Focus/Niche
+
+## MCP Data Servers
+
+Model Context Protocol (MCP) servers provide structured data access for AI agents. See [BUSINESS_README.md](BUSINESS_README.md) for detailed explanation.
+
+### Financials Basket
+
+| Location | Metric | Tool |
+|----------|--------|------|
+| `mcp-servers/financials-basket/` | Revenue, Net Income, Margins | `get_financials` |
+| | Debt, Debt-to-Equity | `get_debt_metrics` |
+| | Operating CF, CapEx, FCF, R&D | `get_cash_flow` |
+| | 8-K Material Events | `get_material_events` |
+| | 13D/13G, Form 4 (Ownership) | `get_ownership_filings` |
+| | Going Concern Warnings | `get_going_concern` |
+| | All Metrics + SWOT | `get_sec_fundamentals` |
+
+### Volatility Basket
+
+| Location | Metric | Tool |
+|----------|--------|------|
+| `mcp-servers/volatility-basket/` | VIX Index | `get_vix` |
+| | Beta (vs S&P 500) | `get_beta` |
+| | Historical Volatility | `get_historical_volatility` |
+| | Implied Volatility | `get_implied_volatility` |
+| | All Metrics + SWOT | `get_volatility_basket` |
+
+### Macro Basket
+
+| Location | Metric | Tool |
+|----------|--------|------|
+| `mcp-servers/macro-basket/` | GDP Growth Rate | `get_gdp` |
+| | Federal Funds Rate | `get_interest_rates` |
+| | CPI / Inflation | `get_cpi` |
+| | Unemployment Rate | `get_unemployment` |
+| | All Metrics + SWOT | `get_macro_basket` |
+
+### Valuation Basket
+
+| Location | Metric | Tool |
+|----------|--------|------|
+| `mcp-servers/valuation-basket/` | P/E Ratio | `get_pe_ratio` |
+| | P/S Ratio | `get_ps_ratio` |
+| | P/B Ratio | `get_pb_ratio` |
+| | EV/EBITDA | `get_ev_ebitda` |
+| | PEG Ratio | `get_peg_ratio` |
+| | All Metrics + SWOT | `get_valuation_basket` |
+
+### News Basket
+
+| Location | Metric | Tool |
+|----------|--------|------|
+| `mcp-servers/news-basket/` | General Web Search | `tavily_search` |
+| | Company News | `search_company_news` |
+| | Going Concern News | `search_going_concern_news` |
+| | Industry Trends | `search_industry_trends` |
+| | Competitor News | `search_competitor_news` |
+
+### Sentiment Basket
+
+| Location | Metric | Tool |
+|----------|--------|------|
+| `mcp-servers/sentiment-basket/` | Social Sentiment | `get_social_sentiment` |
+| | Analyst Ratings | `get_analyst_ratings` |
+
+### API Endpoints
+
+| MCP Server | API | Endpoint | Auth |
+|------------|-----|----------|------|
+| **Financials Basket** | SEC EDGAR | `https://data.sec.gov/api/xbrl/companyfacts/CIK{cik}.json` | None (free) |
+| | | `https://data.sec.gov/submissions/CIK{cik}.json` | |
+| **Volatility Basket** | FRED | `https://api.stlouisfed.org/fred/series/observations` | API Key |
+| | Yahoo Finance | `https://query1.finance.yahoo.com/v8/finance/chart/{ticker}` | None |
+| **Macro Basket** | FRED | `https://api.stlouisfed.org/fred/series/observations` | API Key |
+| **Valuation Basket** | Yahoo Finance | `https://query1.finance.yahoo.com/v10/finance/quoteSummary/{ticker}` | None |
+| **News Basket** | Tavily | `https://api.tavily.com/search` | API Key |
+| **Sentiment Basket** | Finnhub | `https://finnhub.io/api/v1/` | API Key |
+
+### API Keys
+
+| Key | Environment Variable | Get From |
+|-----|---------------------|----------|
+| FRED | `FRED_VIX_API_KEY` | https://fred.stlouisfed.org/docs/api/api_key.html |
+| Tavily | `TAVILY_API_KEY` | https://tavily.com |
+| Finnhub | `FINNHUB_API_KEY` | https://finnhub.io |
+
+Store in `.env`:
+```
+FRED_VIX_API_KEY=your_key
+TAVILY_API_KEY=tvly-your_key
+FINNHUB_API_KEY=your_key
+```
+
+## Installation & Setup
+
+### Local Development
+
+```bash
+# Clone the repository
+git clone https://github.com/vn6295337/Instant-SWOT-Agent.git
+cd Instant-SWOT-Agent
+
+# Create and activate virtual environment
+python3 -m venv .venv
+source .venv/bin/activate
+
+# Install dependencies
+pip install -r requirements.txt
+
+# Set up environment variables
+cp .env.example .env
+# Edit .env with your API keys
+
+# Run the application (FastAPI + React UI)
+python -m src.main api
+# Or use make
+make api
+```
+
+### Hugging Face Spaces Deployment
+
+1. **Create a new Space** (Docker SDK)
+2. **Add this repository** as the source
+3. **Set up Secrets** (at least one LLM provider required):
+   - `GROQ_API_KEY` (primary, recommended)
+   - `GEMINI_API_KEY` (fallback)
+   - `OPENROUTER_API_KEY` (fallback)
+   - `TAVILY_API_KEY` (for live search data)
+4. The system automatically falls back through providers if one fails
+
+## Requirements
+
+- Python 3.11+
+- At least one LLM API key (Groq, Gemini, or OpenRouter)
+- Tavily API key (optional, for live search data)
+
+## Usage Examples
+
+### Web UI
+```bash
+# Start the FastAPI server with React frontend
+python -m src.main api
+```
+Open http://localhost:7860, enter a company name (e.g., "Tesla", "NVIDIA", "Microsoft") and click "Generate SWOT".
+
+### CLI Usage
+```bash
+# Analyze a company from command line
+python -m src.main analyze --company "Apple" --strategy "Differentiation"
+```
+
+### Programmatic Usage
+```python
+from src.workflow.runner import run_self_correcting_workflow
+
+# Generate SWOT analysis with specific strategy
+result = run_self_correcting_workflow(company_name="Apple", strategy_focus="Differentiation")
+
+print(f"Score: {result['score']}/10")
+print(f"Revisions: {result['revision_count']}")
+print(f"SWOT Analysis:\n{result['draft_report']}")
+```
+
+## Testing
+
+```bash
+# Run tests
+make test
+# Or directly
+python3 tests/test_self_correcting_loop.py
+```
+
+## Technical Characteristics
+
+- **Analysis Time**: Typically under 10 seconds (depends on API latency)
+- **Quality Loop**: Iterates until score ≥ 7/10 or max 3 revisions
+- **LLM Providers**: Groq (primary) → Gemini → OpenRouter (cascading fallback)
+- **Data Sources**: 6 MCP servers aggregating SEC EDGAR, FRED, Yahoo Finance, Tavily, and Finnhub APIs
+- **Frontend**: React + TypeScript + Vite + Tailwind CSS
+- **Backend**: FastAPI with async workflow execution
+
+## Design Decisions
+
+| Decision | Choice | Rationale |
+|----------|--------|-----------|
+| **Orchestration** | LangGraph | Native support for cyclic workflows; cleaner than raw LangChain for multi-agent patterns |
+| **LLM Provider** | Groq (Llama 3.1 8B) | Sub-second inference enables tight feedback loops; cost-effective for demos |
+| **Quality Threshold** | 7/10 | Balances quality vs. latency; lower values cause excessive loops, higher values rarely achievable |
+| **Max Revisions** | 3 | Empirically, quality plateaus after 2-3 iterations; prevents infinite loops |
+| **Same Model for Critic** | Intentional tradeoff | Production would use a stronger model for evaluation; kept simple for demo cost management |
+| **Web Search** | Tavily API | Purpose-built for LLM applications; returns clean, structured content |
+
+### Known Limitations
+
+- **Self-evaluation bias**: The critic uses the same model family as the analyst. A production system would use a more capable evaluator model or human-in-the-loop for high-stakes decisions.
+- **Mock data visibility**: When Tavily API is unavailable, the UI clearly indicates cached data is being used.
+
+## Contributing
+
+Contributions are welcome! Please follow these steps:
+
+1. Fork the repository
+2. Create a feature branch
+3. Implement your changes
+4. Add tests for new functionality
+5. Submit a pull request
+
+## License
+
+This project is licensed under the MIT License.
+
+---

a2a/__init__.py

@@ -0,0 +1,7 @@
+"""
+A2A Protocol Implementation
+
+Researcher A2A Server - Standalone data pipeline server
+that communicates with the main LangGraph orchestrator
+via Google A2A protocol (JSON-RPC 2.0 over HTTP).
+"""

a2a/agent_card.json

@@ -0,0 +1,72 @@
+{
+  "name": "swot-researcher",
+  "version": "1.0.0",
+  "description": "Financial research agent that collects data from 6 MCP servers (Financials, Volatility, Macro, Valuation, News, Sentiment) for SWOT analysis.",
+  "url": "http://localhost:8003",
+  "capabilities": {
+    "streaming": false,
+    "pushNotifications": false,
+    "stateTransitionHistory": false
+  },
+  "authentication": {
+    "schemes": []
+  },
+  "defaultInputModes": ["text"],
+  "defaultOutputModes": ["data"],
+  "skills": [
+    {
+      "id": "research-company",
+      "name": "Company Research",
+      "description": "Fetch comprehensive financial data for a company from multiple sources including SEC EDGAR, Yahoo Finance, FRED, Tavily, and Finnhub.",
+      "inputModes": ["text"],
+      "outputModes": ["data"],
+      "examples": [
+        {
+          "input": "Research Tesla",
+          "output": "Aggregated financial data for TSLA including financials, volatility, macro indicators, valuation, news, and sentiment"
+        },
+        {
+          "input": "Research AAPL Apple Inc",
+          "output": "Aggregated financial data for Apple Inc"
+        }
+      ],
+      "inputSchema": {
+        "type": "object",
+        "properties": {
+          "company": {
+            "type": "string",
+            "description": "Company name or ticker symbol"
+          }
+        },
+        "required": ["company"]
+      }
+    }
+  ],
+  "dataSources": [
+    {
+      "name": "SEC EDGAR",
+      "description": "SEC filings, fundamentals, material events",
+      "mcp": "financials-basket"
+    },
+    {
+      "name": "Yahoo Finance",
+      "description": "Stock prices, volatility, valuation ratios",
+      "mcp": ["volatility-basket", "valuation-basket"]
+    },
+    {
+      "name": "FRED",
+      "description": "Federal Reserve economic data, macro indicators",
+      "mcp": ["volatility-basket", "macro-basket"]
+    },
+    {
+      "name": "Tavily",
+      "description": "Web search for company news",
+      "mcp": "news-basket"
+    },
+    {
+      "name": "Finnhub",
+      "description": "News sentiment analysis",
+      "mcp": "sentiment-basket"
+    }
+  ]
+}

docs/a2a_architecture.md

@@ -0,0 +1,113 @@
+# A2A Researcher Agent Architecture
+
+## Overview
+
+The Researcher agent supports two modes:
+- **Direct Mode** (default): Calls MCP servers directly from the main process
+- **A2A Mode**: Delegates to a standalone A2A server for parallel data fetching
+
+Enable A2A mode by setting `USE_A2A_RESEARCHER=true` in your environment.
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  Main Orchestrator (LangGraph)                          │
+│                                                         │
+│  ┌──────────────────────────────────────────────────┐   │
+│  │  Researcher Node                                 │   │
+│  │  (src/nodes/researcher.py)                       │   │
+│  │                                                  │   │
+│  │  if USE_A2A_RESEARCHER:                          │   │
+│  │      → A2A Client (researcher_a2a_client.py)     │   │
+│  │  else:                                           │   │
+│  │      → Direct MCP calls                          │   │
+│  └──────────────────────────────────────────────────┘   │
+│       │                                                 │
+│       │ JSON-RPC 2.0 over HTTP (A2A mode only)          │
+│       ↓                                                 │
+└───────┼─────────────────────────────────────────────────┘
+        │
+┌───────┴─────────────────────────────────────────────────┐
+│  Researcher A2A Server (optional, external)             │
+│  (a2a/researcher_server.py)                             │
+│                                                         │
+│  Endpoints:                                             │
+│  - GET  /.well-known/agent.json  (Agent Card)           │
+│  - POST /  (JSON-RPC: message/send, tasks/get)          │
+│                                                         │
+│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐        │
+│  │ Financials  │ │  Sentiment  │ │    News     │ ...    │
+│  │ MCP Server  │ │  MCP Server │ │  MCP Server │        │
+│  └─────────────┘ └─────────────┘ └─────────────┘        │
+└─────────────────────────────────────────────────────────┘
+```
+
+## A2A Protocol
+
+A2A (Agent-to-Agent) is Google's open protocol for agent interoperability.
+
+Reference: https://github.com/google-a2a/A2A
+
+### Agent Card
+
+Served at `/.well-known/agent.json`:
+
+```json
+{
+  "name": "swot-researcher",
+  "version": "1.0.0",
+  "description": "Financial research agent for SWOT analysis",
+  "capabilities": {
+    "streaming": false,
+    "pushNotifications": false
+  },
+  "skills": [{
+    "id": "research-company",
+    "name": "Company Research",
+    "inputModes": ["text"],
+    "outputModes": ["text", "data"]
+  }]
+}
+```
+
+### JSON-RPC Methods
+
+| Method | Description |
+|--------|-------------|
+| `message/send` | Submit research task |
+| `tasks/get` | Get task status/results |
+| `tasks/cancel` | Cancel running task |
+
+### Task Lifecycle
+
+```
+SUBMITTED → WORKING → COMPLETED
+                   ↘ FAILED
+```
+
+## File Structure
+
+```
+a2a/
+├── researcher_server.py      # A2A server implementation
+├── agent_card.json           # Agent capabilities metadata
+└── mcp_aggregator.py         # Calls MCP servers in parallel
+
+src/nodes/
+├── researcher.py             # Mode switch (A2A vs Direct)
+└── researcher_a2a_client.py  # A2A client wrapper
+```
+
+## Benefits of A2A Mode
+
+| Aspect | Direct Mode | A2A Mode |
+|--------|-------------|----------|
+| Latency | Sequential MCP calls | Parallel MCP calls |
+| Scaling | Coupled with orchestrator | Independent scaling |
+| Fault Isolation | Shared process | Separate process |
+| Reusability | Single workflow | Any A2A client |
+
+## Fallback Behavior
+
+If the A2A server is unavailable, the system falls back to direct mode automatically.

docs/architecture.md

@@ -0,0 +1,160 @@
+# Architecture Documentation
+
+## System Overview
+
+Instant SWOT Agent is an AI-powered strategic analysis system that generates comprehensive SWOT analyses for companies with automatic quality improvement through a self-correcting loop.
+
+## High-Level Architecture
+
+```
+User Input (Company Name)
+         ↓
+┌────────────────────────────────────────┐
+│           USER INTERFACE               │
+│    Streamlit (streamlit_app.py)        │
+│    React (frontend/) via FastAPI       │
+└────────────────────────────────────────┘
+         ↓
+┌────────────────────────────────────────┐
+│     FastAPI Backend (src/api/app.py)   │
+│   Routes: analysis.py, stocks.py       │
+└────────────────────────────────────────┘
+         ↓
+   Workflow Engine (LangGraph)
+   src/workflow/graph.py
+         ↓
+   Node Orchestration
+   ↙  ↓  ↓  ↓  ↘
+Researcher → Analyzer → Critic → Editor
+                 ↘________↗ (loop until score ≥7 or 3 revisions)
+         ↓
+   Final SWOT Analysis
+```
+
+## Directory Structure
+
+```
+src/
+├── api/                    # FastAPI backend
+│   ├── app.py              # Application factory
+│   ├── schemas.py          # Pydantic models
+│   └── routes/
+│       ├── analysis.py     # Workflow endpoints
+│       └── stocks.py       # Stock search endpoint
+├── workflow/               # LangGraph workflow
+│   ├── graph.py            # Workflow definition
+│   └── runner.py           # Execution wrapper
+├── nodes/                  # Workflow nodes
+├── services/               # Shared services
+│   ├── swot_parser.py      # SWOT text parsing
+│   ├── confidence.py       # Confidence calculation
+│   └── workflow_store.py   # Workflow state management
+├── utils/                  # Utilities
+└── main.py                 # CLI entry point
+```
+
+## Core Components
+
+### 1. Workflow Engine
+
+Located in `src/workflow/graph.py`, implements the self-correcting workflow:
+
+- **Entry**: Researcher node
+- **Flow**: Researcher → Analyzer → Critic → (conditional) Editor
+- **Exit**: Score ≥ 7 OR revision_count ≥ 3
+
+### 2. Workflow Nodes
+
+Located in `src/nodes/`:
+
+| Node | File | Responsibility |
+|------|------|----------------|
+| Researcher | `researcher.py` | Gathers data via MCP servers, summarizes with LLM |
+| Analyzer | `analyzer.py` | Generates SWOT analysis draft |
+| Critic | `critic.py` | Evaluates quality (1-10 score) using rubric |
+| Editor | `editor.py` | Revises draft based on critique |
+
+### 3. MCP Servers
+
+Located in `mcp-servers/`, providing data aggregation:
+
+| Server | Data Source | Output |
+|--------|-------------|--------|
+| financials-basket | SEC EDGAR | Financial statements |
+| volatility-basket | Yahoo Finance, FRED | VIX, Beta, IV |
+| macro-basket | FRED | GDP, rates, CPI |
+| valuation-basket | Yahoo Finance, SEC | P/E, P/B, EV/EBITDA |
+| news-basket | Tavily | News articles |
+| sentiment-basket | Finnhub | Sentiment scores |
+
+### 4. State Management
+
+Defined in `src/state.py`, the workflow state flows through each node:
+
+```python
+state = {
+    "company_name": str,
+    "strategy_focus": str,
+    "raw_data": str,
+    "draft_report": str,
+    "critique": str,
+    "score": int,
+    "revision_count": int,
+    "error": str | None
+}
+```
+
+## Data Flow
+
+1. **Input**: User enters company name via Streamlit UI
+2. **Research**: Researcher node queries MCP servers for financial data
+3. **Analysis**: Analyzer generates initial SWOT draft
+4. **Evaluation**: Critic scores draft (1-10) against rubric
+5. **Improvement**: If score < 7 and revisions < 3, Editor revises
+6. **Output**: Final SWOT displayed with quality metrics
+
+## Quality Evaluation
+
+The Critic node uses a rubric-based system:
+
+- **Completeness** (25%): All SWOT sections populated
+- **Specificity** (25%): Concrete, actionable insights with data
+- **Relevance** (25%): Aligned with company context
+- **Depth** (25%): Strategic sophistication
+
+Threshold: Score ≥ 7/10 to pass without revision.
+
+## Extending the System
+
+### Adding a New Node
+
+1. Create `src/nodes/new_node.py`:
+```python
+def new_node(state: dict) -> dict:
+    # Process state
+    state["new_field"] = result
+    return state
+```
+
+2. Register in `src/workflow/graph.py`:
+```python
+workflow.add_node("NewNode", RunnableLambda(new_node))
+workflow.add_edge("PreviousNode", "NewNode")
+```
+
+### Adding a New MCP Server
+
+1. Create directory `mcp-servers/new-basket/`
+2. Implement server with tool registration
+3. Update Researcher node to call new server
+
+## Observability
+
+- **LangSmith**: End-to-end workflow tracing (configure via environment variables)
+- **Logging**: Python standard logging at INFO/DEBUG levels
+
+## Error Handling
+
+- MCP server failures: Graceful degradation, continue with available data
+- LLM failures: Retry with fallback providers
+- Quality failures: Maximum 3 revision attempts before accepting result

docs/configuration.md

@@ -0,0 +1,89 @@
+# Configuration Guide
+
+## Quick Start
+
+```bash
+cp .env.example .env
+# Edit .env with your API keys
+```
+
+## Environment Variables
+
+### LLM Providers (at least one required)
+
+The system uses a fallback chain: Groq → Gemini → OpenRouter
+
+| Variable | Description | Required |
+|----------|-------------|----------|
+| `GROQ_API_KEY` | Groq API key (primary, fastest) | Recommended |
+| `GROQ_MODEL` | Model name (default: `llama-3.1-8b-instant`) | No |
+| `GEMINI_API_KEY` | Google Gemini API key (fallback 1) | No |
+| `GEMINI_MODEL` | Model name (default: `gemini-2.0-flash-exp`) | No |
+| `OPENROUTER_API_KEY` | OpenRouter API key (fallback 2) | No |
+| `OPENROUTER_MODEL` | Model name (default: `google/gemini-2.0-flash-exp:free`) | No |
+
+### Search API
+
+| Variable | Description | Required |
+|----------|-------------|----------|
+| `TAVILY_API_KEY` | Tavily search API for live company data | Yes |
+
+### MCP Server APIs (optional)
+
+| Variable | Description | Source |
+|----------|-------------|--------|
+| `FRED_API_KEY` | Federal Reserve data (VIX) | [fred.stlouisfed.org](https://fred.stlouisfed.org/docs/api/api_key.html) |
+| `ALPHA_VANTAGE_API_KEY` | Options implied volatility | [alphavantage.co](https://www.alphavantage.co/support/#api-key) |
+| `FINNHUB_API_KEY` | News sentiment data | [finnhub.io](https://finnhub.io/register) |
+
+### A2A Protocol (optional)
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `USE_A2A_RESEARCHER` | `false` | Enable A2A mode for Researcher |
+| `A2A_RESEARCHER_URL` | HuggingFace Spaces URL | Researcher A2A server endpoint |
+| `A2A_TIMEOUT` | `60` | Request timeout in seconds |
+
+### Observability (optional)
+
+| Variable | Description |
+|----------|-------------|
+| `LANGCHAIN_API_KEY` | LangSmith API key |
+| `LANGCHAIN_TRACING_V2` | Enable tracing (`true`/`false`) |
+| `LANGCHAIN_PROJECT` | Project name in LangSmith |
+
+## Deployment Environments
+
+### Local Development
+
+```bash
+cp .env.example .env
+# Add your API keys
+
+# Run Streamlit UI
+streamlit run streamlit_app.py
+
+# Or run FastAPI backend (serves React frontend at localhost:8002)
+python -m src.main api
+```
+
+### Docker
+
+```bash
+docker run --env-file .env -p 7860:7860 ai-strategy-copilot
+```
+
+### Hugging Face Spaces
+
+Add secrets in Space Settings → Repository secrets:
+- `GROQ_API_KEY`
+- `TAVILY_API_KEY`
+- (other optional keys)
+
+## Troubleshooting
+
+| Error | Solution |
+|-------|----------|
+| `No LLM provider configured` | Set at least one of: GROQ_API_KEY, GEMINI_API_KEY, OPENROUTER_API_KEY |
+| `TAVILY_API_KEY missing` | Required for live company research |
+| `MCP server timeout` | Check individual API keys for MCP servers |

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
+  ],
+  "framework": "@storybook/react-vite"
+};
+export default config;

frontend/.storybook/preview.tsx

@@ -0,0 +1,29 @@
+import type { Preview } from '@storybook/react-vite'
+import '../src/index.css'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#0a0a0a' },
+        { name: 'light', value: '#ffffff' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="dark">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default preview;

frontend/README.md

@@ -0,0 +1,88 @@
+# Instant SWOT Agent - React Frontend
+
+## Overview
+
+React-based frontend for Instant SWOT Agent, providing a modern UI for SWOT analysis with real-time workflow visualization.
+
+## Tech Stack
+
+- **React 18** with TypeScript
+- **Vite** build system
+- **Tailwind CSS** + shadcn/ui components
+- **TanStack Query** for data fetching
+- **React Router** for routing
+
+## Core Components
+
+| Component | Purpose |
+|-----------|---------|
+| `App.tsx` | Main layout, workflow orchestration, state management |
+| `ProcessFlow.tsx` | SVG-based visual workflow diagram |
+| `StockSearch.tsx` | Autocomplete search with keyboard navigation |
+| `ActivityLog.tsx` | Real-time log viewer with auto-scroll |
+
+## Installation
+
+```bash
+cd frontend
+npm install
+```
+
+## Development
+
+```bash
+# Start dev server (port 5173)
+npm run dev
+
+# Run tests
+npm test
+
+# Type check
+npx tsc --noEmit
+
+# Build for production
+npm run build
+```
+
+## API Integration
+
+The frontend connects to the FastAPI backend. API endpoints:
+
+| Endpoint | Method | Purpose |
+|----------|--------|---------|
+| `/api/stocks/search` | GET | Stock autocomplete |
+| `/analyze` | POST | Start analysis workflow |
+| `/workflow/{id}/status` | GET | Workflow status polling |
+| `/workflow/{id}/result` | GET | Get final results |
+
+### Environment Variables
+
+Create `.env` for local development:
+
+```bash
+VITE_API_URL=http://localhost:8002
+```
+
+Production builds auto-detect the API URL.
+
+## Production Deployment
+
+The frontend is pre-built and served from `/static/` by the FastAPI backend:
+
+```bash
+# Build production bundle
+npm run build
+
+# Copy to static directory
+cp -r dist/* ../static/
+```
+
+The Dockerfile uses pre-built static files for HuggingFace Spaces deployment.
+
+## Troubleshooting
+
+| Issue | Solution |
+|-------|----------|
+| Dependencies fail | `rm -rf node_modules && npm install` |
+| TypeScript errors | `npx tsc --noEmit` to check |
+| Port in use | `npm run dev -- --port 3000` |

frontend/e2e/app.spec.ts

@@ -0,0 +1,94 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('Instant SWOT Agent', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('should display the home page', async ({ page }) => {
+    await expect(page.getByText('Instant SWOT Agent')).toBeVisible()
+    await expect(page.getByPlaceholder('Search U.S. listed companies...')).toBeVisible()
+  })
+
+  test('should show empty state message', async ({ page }) => {
+    await expect(page.getByText('Enter a company name to begin')).toBeVisible()
+  })
+
+  test('should toggle between Executive and Full view modes', async ({ page }) => {
+    const executiveBtn = page.getByRole('button', { name: 'Executive' })
+    const fullBtn = page.getByRole('button', { name: 'Full' })
+
+    await expect(executiveBtn).toBeVisible()
+    await expect(fullBtn).toBeVisible()
+
+    // Click Executive
+    await executiveBtn.click()
+    await expect(executiveBtn).toHaveClass(/bg-primary/)
+
+    // Click Full
+    await fullBtn.click()
+    await expect(fullBtn).toHaveClass(/bg-primary/)
+  })
+
+  test('should toggle dark mode', async ({ page }) => {
+    const darkModeBtn = page.locator('button').filter({ has: page.locator('svg') }).last()
+
+    // Check initial state (dark mode)
+    await expect(page.locator('html')).toHaveClass(/dark/)
+
+    // Toggle to light mode
+    await darkModeBtn.click()
+    await expect(page.locator('html')).not.toHaveClass(/dark/)
+
+    // Toggle back to dark mode
+    await darkModeBtn.click()
+    await expect(page.locator('html')).toHaveClass(/dark/)
+  })
+
+  test('should search for stocks', async ({ page }) => {
+    const searchInput = page.getByPlaceholder('Search U.S. listed companies...')
+
+    await searchInput.fill('AAPL')
+
+    // Wait for autocomplete dropdown
+    await expect(page.getByText('Apple')).toBeVisible({ timeout: 5000 })
+  })
+
+  test('should select a stock and show Generate button', async ({ page }) => {
+    const searchInput = page.getByPlaceholder('Search U.S. listed companies...')
+
+    await searchInput.fill('TSLA')
+
+    // Wait for and click the Tesla option
+    await page.getByText('Tesla').first().click()
+
+    // Generate button should appear
+    await expect(page.getByRole('button', { name: /Generate SWOT/i })).toBeVisible()
+  })
+})
+
+test.describe('SWOT Analysis Workflow', () => {
+  test('should complete full analysis workflow', async ({ page }) => {
+    // This test requires the backend to be running
+    test.skip(!!process.env.CI, 'Skipping in CI - requires backend')
+
+    await page.goto('/')
+
+    // Search and select a stock
+    const searchInput = page.getByPlaceholder('Search U.S. listed companies...')
+    await searchInput.fill('AAPL')
+    await page.getByText('Apple').first().click()
+
+    // Click Generate SWOT
+    await page.getByRole('button', { name: /Generate SWOT/i }).click()
+
+    // Wait for loading state
+    await expect(page.getByText(/Analyzing/i)).toBeVisible({ timeout: 5000 })
+
+    // Wait for results (up to 2 minutes for full analysis)
+    await expect(page.getByText('Strengths')).toBeVisible({ timeout: 120000 })
+    await expect(page.getByText('Weaknesses')).toBeVisible()
+    await expect(page.getByText('Opportunities')).toBeVisible()
+    await expect(page.getByText('Threats')).toBeVisible()
+  })
+})

frontend/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist', 'node_modules', '.storybook', 'e2e'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      '@typescript-eslint/no-unused-vars': 'warn',
+    },
+  },
+)

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/install_dependencies.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+
+echo "🚀 Starting frontend dependency installation..."
+echo "This may take several minutes depending on your network speed."
+
+echo "📦 Installing core dependencies..."
+npm install --no-audit --no-fund
+
+if [ $? -eq 0 ]; then
+    echo "✅ Dependencies installed successfully!"
+    
+    echo "🧪 Running syntax check..."
+    npx tsc --noEmit
+    
+    if [ $? -eq 0 ]; then
+        echo "✅ TypeScript compilation successful!"
+        
+        echo "🚀 Starting development server..."
+        npm run dev
+    else
+        echo "❌ TypeScript compilation failed. Please check for errors."
+        exit 1
+    fi
+else
+    echo "❌ Dependency installation failed. Please try again."
+    exit 1
+fi

frontend/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:dev": "vite build --mode development",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@tanstack/react-query": "^5.83.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.462.0",
+    "nanoid": "^5.1.6",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.61.1",
+    "react-resizable-panels": "^2.1.9",
+    "react-router-dom": "^6.30.1",
+    "recharts": "^2.15.4",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.9",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
+    "@eslint/js": "^9.32.0",
+    "@playwright/test": "^1.57.0",
+    "@storybook/addon-a11y": "^10.1.10",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-onboarding": "^10.1.10",
+    "@storybook/addon-vitest": "^10.1.10",
+    "@storybook/react-vite": "^10.1.10",
+    "@tailwindcss/typography": "^0.5.16",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.16.5",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@vitest/coverage-v8": "^4.0.16",
+    "@vitest/ui": "^4.0.16",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-storybook": "^10.1.10",
+    "globals": "^15.15.0",
+    "jsdom": "^27.3.0",
+    "playwright": "^1.57.0",
+    "postcss": "^8.5.6",
+    "storybook": "^10.1.10",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.38.0",
+    "vite": "^5.4.19",
+    "vitest": "^4.0.16"
+  }
+}

frontend/playwright.config.ts

@@ -0,0 +1,42 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+  ],
+
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+  },
+})

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/src/App.tsx

@@ -0,0 +1,722 @@
+import { useState, useEffect, useRef, useMemo } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Badge } from "@/components/ui/badge"
+import { Toaster } from "@/components/ui/toaster"
+import { Toaster as Sonner } from "@/components/ui/sonner"
+import { TooltipProvider } from "@/components/ui/tooltip"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { BrowserRouter, Routes, Route } from "react-router-dom"
+import {
+  startAnalysis,
+  getWorkflowStatus,
+  getWorkflowResult,
+  StockResult,
+  WorkflowStatus,
+  ActivityLogEntry,
+  MCPStatus,
+  LLMStatus,
+  MetricEntry,
+} from "@/lib/api"
+import { AnalysisResponse } from "@/lib/types"
+import {
+  TrendingUp,
+  TrendingDown,
+  Target,
+  AlertTriangle,
+  CheckCircle,
+  XCircle,
+  AlertCircle,
+  BarChart3,
+  RefreshCw,
+  Zap,
+  Play,
+  Copy,
+  Download,
+  Printer,
+  Check,
+  Pause,
+  X,
+  Loader2,
+} from "lucide-react"
+
+// Import new components
+import { ProcessFlow } from "@/components/ProcessFlow"
+import { ActivityLog } from "@/components/ActivityLog"
+import { StockSearch } from "@/components/StockSearch"
+import { MetricsPanel } from "@/components/MetricsPanel"
+
+const queryClient = new QueryClient()
+
+const App = () => (
+  <QueryClientProvider client={queryClient}>
+    <TooltipProvider>
+      <Toaster />
+      <Sonner />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Index />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </BrowserRouter>
+    </TooltipProvider>
+  </QueryClientProvider>
+)
+
+export default App
+
+const defaultMCPStatus: MCPStatus = {
+  financials: 'idle',
+  valuation: 'idle',
+  volatility: 'idle',
+  macro: 'idle',
+  news: 'idle',
+  sentiment: 'idle',
+}
+
+const defaultLLMStatus: LLMStatus = {
+  groq: 'idle',
+  gemini: 'idle',
+  openrouter: 'idle',
+}
+
+const Index = () => {
+  const [selectedStock, setSelectedStock] = useState<StockResult | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [showResults, setShowResults] = useState(false)
+  const [mainTab, setMainTab] = useState<"flow" | "results">("flow")
+  const [analysisResult, setAnalysisResult] = useState<AnalysisResponse | null>(null)
+  const [workflowId, setWorkflowId] = useState<string | null>(null)
+
+  // Workflow tracking
+  const [currentStep, setCurrentStep] = useState<string>('idle')
+  const [completedSteps, setCompletedSteps] = useState<string[]>([])
+  const [mcpStatus, setMcpStatus] = useState<MCPStatus>(defaultMCPStatus)
+  const [llmStatus, setLlmStatus] = useState<LLMStatus>(defaultLLMStatus)
+  const [activityLog, setActivityLog] = useState<ActivityLogEntry[]>([])
+  const [metrics, setMetrics] = useState<MetricEntry[]>([])
+  const [revisionCount, setRevisionCount] = useState(0)
+  const [score, setScore] = useState(0)
+  const [llmProvider, setLlmProvider] = useState<string>('')
+  const [cacheHit, setCacheHit] = useState(false)
+  const [isSearching, setIsSearching] = useState(false)
+  const [isPaused, setIsPaused] = useState(false)
+  const [hasError, setHasError] = useState(false)
+  const [isAborted, setIsAborted] = useState(false)
+  const [abortReason, setAbortReason] = useState<string>('')
+  const [userEvents, setUserEvents] = useState<Array<{timestamp: string; message: string}>>([])
+
+  const [copied, setCopied] = useState(false)
+  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  // Helper to add user events to log
+  const addUserEvent = (message: string) => {
+    setUserEvents(prev => [...prev, { timestamp: new Date().toISOString(), message }])
+  }
+
+  // Extracted polling logic to avoid duplication
+  const startPolling = (workflowIdToUse: string) => {
+    if (pollingRef.current) {
+      clearInterval(pollingRef.current)
+    }
+
+    pollingRef.current = setInterval(async () => {
+      try {
+        const status = await getWorkflowStatus(workflowIdToUse)
+        setRevisionCount(status.revision_count)
+        setScore(status.score)
+        setActivityLog(status.activity_log || [])
+        setMetrics(status.metrics || [])
+        // Merge MCP status - preserve failed/partial states (they persist for session)
+        setMcpStatus(prev => {
+          const newStatus = status.mcp_status || defaultMCPStatus
+          return {
+            financials: prev.financials === 'failed' || prev.financials === 'partial' ? prev.financials : newStatus.financials,
+            valuation: prev.valuation === 'failed' || prev.valuation === 'partial' ? prev.valuation : newStatus.valuation,
+            volatility: prev.volatility === 'failed' || prev.volatility === 'partial' ? prev.volatility : newStatus.volatility,
+            macro: prev.macro === 'failed' || prev.macro === 'partial' ? prev.macro : newStatus.macro,
+            news: prev.news === 'failed' || prev.news === 'partial' ? prev.news : newStatus.news,
+            sentiment: prev.sentiment === 'failed' || prev.sentiment === 'partial' ? prev.sentiment : newStatus.sentiment,
+          }
+        })
+        // Merge LLM status - preserve failed states (they persist for session)
+        setLlmStatus(prev => {
+          const newStatus = status.llm_status || defaultLLMStatus
+          return {
+            groq: prev.groq === 'failed' ? prev.groq : newStatus.groq,
+            gemini: prev.gemini === 'failed' ? prev.gemini : newStatus.gemini,
+            openrouter: prev.openrouter === 'failed' ? prev.openrouter : newStatus.openrouter,
+          }
+        })
+        if (status.provider_used) setLlmProvider(status.provider_used)
+
+        // Update completed steps - accumulate rather than recalculate to handle loops
+        const stepOrder = ['input', 'cache', 'researcher', 'analyzer', 'critic', 'editor', 'output']
+        setCompletedSteps(prev => {
+          const newCompleted = new Set(prev)
+          const currentIdx = stepOrder.indexOf(status.current_step)
+
+          // Mark all steps before current as completed
+          for (let i = 0; i < currentIdx; i++) {
+            newCompleted.add(stepOrder[i])
+          }
+
+          // Handle Critic ↔ Editor loop: keep editor completed when looping back to critic
+          if (status.current_step === 'critic' && status.revision_count > 0) {
+            newCompleted.add('editor')
+          }
+
+          return Array.from(newCompleted)
+        })
+
+        // Only update currentStep for in-progress workflows to prevent output glow flash
+        if (status.status !== 'completed') {
+          setCurrentStep(status.current_step)
+        }
+
+        // Set cacheHit flag for ProcessFlow visualization
+        if (status.data_source === 'cache') {
+          setCacheHit(true)
+        }
+
+        if (status.status === "completed") {
+          clearInterval(pollingRef.current!)
+          pollingRef.current = null
+
+          // Check if this was a cache hit
+          if (status.data_source === 'cache') {
+            // Cache hit flow - only animate cache and output
+            setCacheHit(true)
+            setCurrentStep('cache')
+            setCompletedSteps(['input'])
+
+            setTimeout(() => {
+              setCompletedSteps(['input', 'cache'])
+              setCurrentStep('output')
+            }, 800)
+
+            setTimeout(async () => {
+              setCompletedSteps(['input', 'cache', 'output'])
+              setCurrentStep('completed')
+              const result = await getWorkflowResult(workflowIdToUse)
+              setAnalysisResult(result)
+              setIsLoading(false)
+              setShowResults(true)
+              setMainTab("results")
+            }, 1600)
+            return
+          }
+
+          // Normal flow - all steps completed
+          // Set completed steps BEFORE the async fetch to prevent output from glowing prematurely
+          // Only mark 'editor' as completed if revisions actually occurred
+          const finalSteps = status.revision_count > 0
+            ? stepOrder
+            : stepOrder.filter(s => s !== 'editor')
+          setCompletedSteps(finalSteps)
+          setCurrentStep('completed')
+          const result = await getWorkflowResult(workflowIdToUse)
+          setAnalysisResult(result)
+          setIsLoading(false)
+          setShowResults(true)
+          setMainTab("results")
+        } else if (status.status === "aborted") {
+          clearInterval(pollingRef.current!)
+          pollingRef.current = null
+          setIsLoading(false)
+          setIsAborted(true)
+          setAbortReason(status.error || 'Critical failure - workflow aborted')
+        } else if (status.status === "error") {
+          clearInterval(pollingRef.current!)
+          pollingRef.current = null
+          setIsLoading(false)
+          setHasError(true)
+        }
+      } catch (error) {
+        console.error("Polling error:", error)
+      }
+    }, 700)
+  }
+
+  // Button state logic
+  const buttonState = useMemo(() => {
+    if (isAborted) return 'aborted'
+    if (hasError) return 'error'
+    if (analysisResult && !isLoading) return 'complete'
+    if (isPaused) return 'paused'
+    if (isLoading) return 'analyzing'
+    return 'ready'
+  }, [isAborted, hasError, analysisResult, isLoading, isPaused])
+
+  // Pause handler - stop polling
+  const handlePause = () => {
+    setIsPaused(true)
+    if (pollingRef.current) {
+      clearInterval(pollingRef.current)
+      pollingRef.current = null
+    }
+  }
+
+  // Resume handler - restart polling
+  const handleResume = () => {
+    if (!workflowId) return
+    setIsPaused(false)
+    startPolling(workflowId)
+  }
+
+  // Abort handler - cancel workflow
+  const handleAbort = () => {
+    if (pollingRef.current) {
+      clearInterval(pollingRef.current)
+      pollingRef.current = null
+    }
+    setIsLoading(false)
+    setIsPaused(false)
+    setHasError(false)
+    setIsAborted(false)
+    setAbortReason('')
+    setCurrentStep('idle')
+    setCompletedSteps([])
+    setAnalysisResult(null)
+    setShowResults(false)
+    setMcpStatus(defaultMCPStatus)
+    setLlmStatus(defaultLLMStatus)
+  }
+
+  // Force dark mode
+  useEffect(() => {
+    document.documentElement.classList.add("dark")
+  }, [])
+
+  // Export functions
+  const formatSwotForClipboard = () => {
+    if (!analysisResult) return ''
+    return `SWOT Analysis: ${analysisResult.company_name}
+Quality Score: ${analysisResult.score}/10
+Revisions: ${analysisResult.revision_count}
+
+STRENGTHS:
+${analysisResult.swot_data.strengths.map(s => `- ${s}`).join('\n')}
+
+WEAKNESSES:
+${analysisResult.swot_data.weaknesses.map(w => `- ${w}`).join('\n')}
+
+OPPORTUNITIES:
+${analysisResult.swot_data.opportunities.map(o => `- ${o}`).join('\n')}
+
+THREATS:
+${analysisResult.swot_data.threats.map(t => `- ${t}`).join('\n')}
+
+QUALITY EVALUATION:
+${analysisResult.critique}
+
+---
+Generated by Instant SWOT Agent`
+  }
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(formatSwotForClipboard())
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }
+
+  const downloadAsJson = () => {
+    if (!analysisResult) return
+    const exportData = {
+      ...analysisResult,
+      exported_at: new Date().toISOString()
+    }
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `swot-analysis-${analysisResult.company_name.toLowerCase().replace(/\s+/g, '-')}.json`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  const handleGenerate = async () => {
+    if (!selectedStock) return
+
+    addUserEvent(`Analysis started for ${selectedStock.symbol}`)
+    setIsLoading(true)
+    setShowResults(false)
+    setCurrentStep('input')
+    setCompletedSteps([])
+    setMcpStatus(defaultMCPStatus)
+    setLlmStatus(defaultLLMStatus)
+    setActivityLog([])
+    setMetrics([])
+    setRevisionCount(0)
+    setScore(0)
+    setCacheHit(false)
+    setIsPaused(false)
+    setHasError(false)
+    setIsAborted(false)
+    setAbortReason('')
+    setAnalysisResult(null)
+
+    try {
+      const { workflow_id } = await startAnalysis(
+        selectedStock.name,
+        selectedStock.symbol,
+        'Competitive Position'
+      )
+      setWorkflowId(workflow_id)
+      setCompletedSteps(['input'])
+      setCurrentStep('cache')
+      startPolling(workflow_id)
+
+    } catch (error) {
+      console.error("Error starting analysis:", error)
+      setIsLoading(false)
+      setHasError(true)
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      if (pollingRef.current) {
+        clearInterval(pollingRef.current)
+      }
+    }
+  }, [])
+
+  const getScoreColor = (score: number) => {
+    if (score >= 7) return "text-emerald-400"
+    if (score >= 5) return "text-yellow-400"
+    return "text-red-400"
+  }
+
+  const getScoreBadge = (score: number) => {
+    if (score >= 7)
+      return { label: "Board-ready", variant: "default" as const, icon: CheckCircle }
+    if (score >= 5)
+      return { label: "Acceptable", variant: "secondary" as const, icon: AlertCircle }
+    return { label: "Needs Review", variant: "destructive" as const, icon: XCircle }
+  }
+
+  const handleStockClear = () => {
+    setSelectedStock(null)
+    setShowResults(false)
+    setAnalysisResult(null)
+    setCurrentStep('idle')
+    setCompletedSteps([])
+    setActivityLog([])
+    setMetrics([])
+    setUserEvents([])
+    setHasError(false)
+    setIsAborted(false)
+    setAbortReason('')
+    setMcpStatus(defaultMCPStatus)
+    setLlmStatus(defaultLLMStatus)
+  }
+
+  return (
+    <Tabs value={mainTab} onValueChange={(v) => setMainTab(v as "flow" | "results")} className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="border-b border-border bg-card sticky top-0 z-40">
+        <div className="container mx-auto px-4 sm:px-6 py-3">
+          <div className="flex items-center gap-3">
+            <div className="shrink-0">
+              <h1 className="text-lg font-semibold text-foreground">
+                Instant SWOT Agent
+              </h1>
+              <p className="text-xs text-muted-foreground hidden sm:block">
+                with self-correcting feedback
+              </p>
+            </div>
+            <div className="flex-1 max-w-xl">
+              <StockSearch
+                onSelect={(stock) => {
+                  setSelectedStock(stock)
+                  addUserEvent(`Selected: ${stock.name} (${stock.symbol})`)
+                }}
+                selectedStock={selectedStock}
+                onClear={handleStockClear}
+                disabled={isLoading}
+                onSearchChange={setIsSearching}
+              />
+            </div>
+            {/* Dynamic Submit/Control Buttons */}
+            <div className="flex items-center gap-2 shrink-0">
+              {buttonState === 'ready' && (
+                <Button
+                  onClick={handleGenerate}
+                  disabled={!selectedStock}
+                  className="gap-2"
+                >
+                  <Play className="h-4 w-4" />
+                  Submit
+                </Button>
+              )}
+
+              {buttonState === 'analyzing' && (
+                <>
+                  <Button onClick={handlePause} className="gap-2 btn-amber btn-amber-pulse">
+                    <Pause className="h-4 w-4" />
+                    Pause
+                  </Button>
+                  <Button variant="destructive" onClick={handleAbort} className="gap-2">
+                    <X className="h-4 w-4" />
+                    Abort
+                  </Button>
+                </>
+              )}
+
+              {buttonState === 'paused' && (
+                <>
+                  <Button onClick={handleResume} className="gap-2 btn-amber">
+                    <Play className="h-4 w-4" />
+                    Resume
+                  </Button>
+                  <Button variant="destructive" onClick={handleAbort} className="gap-2">
+                    <X className="h-4 w-4" />
+                    Abort
+                  </Button>
+                </>
+              )}
+
+              {buttonState === 'complete' && (
+                <Button className="gap-2 btn-green" disabled>
+                  <Check className="h-4 w-4" />
+                  Complete
+                </Button>
+              )}
+
+              {buttonState === 'error' && (
+                <Button variant="destructive" onClick={handleGenerate} className="gap-2">
+                  <X className="h-4 w-4" />
+                  Failed - Retry
+                </Button>
+              )}
+
+              {buttonState === 'aborted' && (
+                <Button variant="destructive" onClick={handleStockClear} className="gap-2" title={abortReason}>
+                  <AlertTriangle className="h-4 w-4" />
+                  Aborted
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="container mx-auto px-4 sm:px-6 pt-4 pb-6 space-y-6 overflow-visible">
+
+        {/* Process Flow + Metrics Panel */}
+        <div className="flex gap-4">
+          <div className="shrink-0">
+            <ProcessFlow
+              currentStep={currentStep}
+              completedSteps={completedSteps}
+              mcpStatus={mcpStatus}
+              llmStatus={llmStatus}
+              llmProvider={llmProvider}
+              cacheHit={cacheHit}
+              stockSelected={!!selectedStock}
+              isSearching={isSearching}
+              revisionCount={revisionCount}
+              isAborted={isAborted || hasError}
+            />
+          </div>
+          <div className="flex-1 min-w-0 h-[260px]">
+            <MetricsPanel
+              metrics={metrics}
+              activityLog={activityLog}
+              currentStep={currentStep}
+              revisionCount={revisionCount}
+              score={score}
+              isTyping={isSearching}
+              userEvents={userEvents}
+            />
+          </div>
+        </div>
+
+        {/* Flow Tab - Activity Log during loading */}
+        {(isLoading || showResults) && (
+          <TabsContent value="flow" className="space-y-6 mt-0">
+            {isLoading && <ActivityLog entries={activityLog} />}
+          </TabsContent>
+        )}
+
+        {/* Results Tab - SWOT cards + metrics */}
+        {(isLoading || showResults) && (
+          <TabsContent value="results" className="mt-0">
+              {analysisResult && (
+                <div className="space-y-6 animate-slide-up">
+                  {/* Results Header */}
+                  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                    <div>
+                      <h2 className="text-2xl font-semibold text-foreground">
+                        {analysisResult.company_name} ({selectedStock?.symbol})
+                      </h2>
+                      <p className="text-sm text-muted-foreground">
+                        {selectedStock?.exchange}
+                      </p>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-4">
+                      {/* Metrics */}
+                      <div className="flex items-center gap-4">
+                        <div className="text-center px-4 py-2 bg-card rounded-lg border">
+                          <p className="text-xs text-muted-foreground">Score</p>
+                          <p className={`text-xl font-bold ${getScoreColor(analysisResult.score)}`}>
+                            {analysisResult.score}/10
+                          </p>
+                        </div>
+                        <div className="text-center px-4 py-2 bg-card rounded-lg border">
+                          <p className="text-xs text-muted-foreground">Revisions</p>
+                          <p className="text-xl font-bold text-foreground">
+                            {analysisResult.revision_count}
+                          </p>
+                        </div>
+                      </div>
+                      <Badge variant={getScoreBadge(analysisResult.score).variant} className="gap-1.5">
+                        {(() => {
+                          const BadgeIcon = getScoreBadge(analysisResult.score).icon
+                          return <BadgeIcon className="h-4 w-4" />
+                        })()}
+                        {getScoreBadge(analysisResult.score).label}
+                      </Badge>
+                    </div>
+                  </div>
+
+                  {/* Export Buttons */}
+                  <div className="flex flex-wrap gap-2 print:hidden">
+                    <Button variant="outline" size="sm" onClick={copyToClipboard} className="gap-1.5">
+                      {copied ? <Check className="h-4 w-4 text-emerald-500" /> : <Copy className="h-4 w-4" />}
+                      {copied ? "Copied!" : "Copy"}
+                    </Button>
+                    <Button variant="outline" size="sm" onClick={downloadAsJson} className="gap-1.5">
+                      <Download className="h-4 w-4" />
+                      Export JSON
+                    </Button>
+                    <Button variant="outline" size="sm" onClick={() => window.print()} className="gap-1.5">
+                      <Printer className="h-4 w-4" />
+                      Print
+                    </Button>
+                  </div>
+
+                  {/* SWOT Cards */}
+                  <div className="grid gap-4 md:grid-cols-2">
+                    {/* Strengths Card */}
+                    <Card className="border-l-4 border-l-emerald-500">
+                      <CardHeader className="pb-3">
+                        <CardTitle className="flex items-center gap-2 text-base text-emerald-500">
+                          <TrendingUp className="h-5 w-5" />
+                          Strengths
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <ul className="space-y-2">
+                          {analysisResult.swot_data.strengths.map((item, i) => (
+                            <li key={i} className="flex gap-2 text-sm text-foreground">
+                              <CheckCircle className="h-4 w-4 text-emerald-500 shrink-0 mt-0.5" />
+                              <span>{item}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      </CardContent>
+                    </Card>
+
+                    {/* Weaknesses Card */}
+                    <Card className="border-l-4 border-l-red-500">
+                      <CardHeader className="pb-3">
+                        <CardTitle className="flex items-center gap-2 text-base text-red-500">
+                          <TrendingDown className="h-5 w-5" />
+                          Weaknesses
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <ul className="space-y-2">
+                          {analysisResult.swot_data.weaknesses.map((item, i) => (
+                            <li key={i} className="flex gap-2 text-sm text-foreground">
+                              <XCircle className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
+                              <span>{item}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      </CardContent>
+                    </Card>
+
+                    {/* Opportunities Card */}
+                    <Card className="border-l-4 border-l-blue-500">
+                      <CardHeader className="pb-3">
+                        <CardTitle className="flex items-center gap-2 text-base text-blue-500">
+                          <Target className="h-5 w-5" />
+                          Opportunities
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <ul className="space-y-2">
+                          {analysisResult.swot_data.opportunities.map((item, i) => (
+                            <li key={i} className="flex gap-2 text-sm text-foreground">
+                              <Zap className="h-4 w-4 text-blue-500 shrink-0 mt-0.5" />
+                              <span>{item}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      </CardContent>
+                    </Card>
+
+                    {/* Threats Card */}
+                    <Card className="border-l-4 border-l-yellow-500">
+                      <CardHeader className="pb-3">
+                        <CardTitle className="flex items-center gap-2 text-base text-yellow-500">
+                          <AlertTriangle className="h-5 w-5" />
+                          Threats
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <ul className="space-y-2">
+                          {analysisResult.swot_data.threats.map((item, i) => (
+                            <li key={i} className="flex gap-2 text-sm text-foreground">
+                              <AlertCircle className="h-4 w-4 text-yellow-500 shrink-0 mt-0.5" />
+                              <span>{item}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      </CardContent>
+                    </Card>
+                  </div>
+
+                  {/* Critic Evaluation */}
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-base flex items-center gap-2">
+                        <Target className="h-4 w-4" />
+                        Quality Evaluation
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <p className="text-sm text-muted-foreground leading-relaxed">
+                        {analysisResult.critique}
+                      </p>
+                    </CardContent>
+                  </Card>
+                </div>
+              )}
+            </TabsContent>
+        )}
+      </main>
+
+    </Tabs>
+  )
+}
+
+const NotFound = () => (
+  <div className="min-h-screen bg-background flex flex-col items-center justify-center">
+    <div className="text-center space-y-4">
+      <h1 className="text-4xl font-bold text-foreground">404</h1>
+      <p className="text-xl text-muted-foreground">Page Not Found</p>
+      <Button onClick={() => window.location.href = '/'}>Go Home</Button>
+    </div>
+  </div>
+)

frontend/src/components/ActivityLog.test.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { ActivityLog } from './ActivityLog'
+import type { ActivityLogEntry } from '@/lib/api'
+
+describe('ActivityLog', () => {
+  const mockEntries: ActivityLogEntry[] = [
+    {
+      timestamp: '2024-01-15T10:30:00.000Z',
+      step: 'input',
+      message: 'User selected Tesla, Inc. (TSLA)',
+    },
+    {
+      timestamp: '2024-01-15T10:30:01.000Z',
+      step: 'researcher',
+      message: 'Fetching data from 6 MCP servers',
+    },
+    {
+      timestamp: '2024-01-15T10:30:05.000Z',
+      step: 'analyzer',
+      message: 'Synthesizing SWOT analysis',
+    },
+  ]
+
+  it('renders the Activity Log header', () => {
+    render(<ActivityLog entries={[]} />)
+    expect(screen.getByText('Activity Log')).toBeInTheDocument()
+  })
+
+  it('shows empty state when no entries', () => {
+    render(<ActivityLog entries={[]} />)
+    expect(screen.getByText(/No activity yet/i)).toBeInTheDocument()
+  })
+
+  it('renders log entries', () => {
+    render(<ActivityLog entries={mockEntries} />)
+
+    expect(screen.getByText('User selected Tesla, Inc. (TSLA)')).toBeInTheDocument()
+    expect(screen.getByText('Fetching data from 6 MCP servers')).toBeInTheDocument()
+    expect(screen.getByText('Synthesizing SWOT analysis')).toBeInTheDocument()
+  })
+
+  it('displays step labels in brackets', () => {
+    render(<ActivityLog entries={mockEntries} />)
+
+    expect(screen.getByText('[input]')).toBeInTheDocument()
+    expect(screen.getByText('[researcher]')).toBeInTheDocument()
+    expect(screen.getByText('[analyzer]')).toBeInTheDocument()
+  })
+
+  it('formats timestamps in local time', () => {
+    render(<ActivityLog entries={mockEntries} />)
+
+    // Timestamps should be formatted (exact format depends on locale)
+    const timeElements = screen.getAllByText(/\d{1,2}:\d{2}:\d{2}/i)
+    expect(timeElements.length).toBeGreaterThan(0)
+  })
+})

frontend/src/components/ActivityLog.tsx

@@ -0,0 +1,130 @@
+import { useEffect, useRef } from "react"
+import { cn } from "@/lib/utils"
+import {
+  User,
+  Database,
+  Search,
+  Brain,
+  MessageSquare,
+  Edit3,
+  FileOutput,
+  Server,
+  AlertCircle,
+} from "lucide-react"
+import type { ActivityLogEntry } from "@/lib/api"
+
+interface ActivityLogProps {
+  entries: ActivityLogEntry[]
+  className?: string
+}
+
+const stepIcons: Record<string, React.ElementType> = {
+  input: User,
+  cache: Database,
+  researcher: Search,
+  analyzer: Brain,
+  critic: MessageSquare,
+  editor: Edit3,
+  output: FileOutput,
+  financials: Server,
+  valuation: Server,
+  volatility: Server,
+  macro: Server,
+  news: Server,
+  sentiment: Server,
+  error: AlertCircle,
+}
+
+const stepColors: Record<string, string> = {
+  input: 'text-blue-400',
+  cache: 'text-yellow-400',
+  researcher: 'text-purple-400',
+  analyzer: 'text-cyan-400',
+  critic: 'text-orange-400',
+  editor: 'text-pink-400',
+  output: 'text-emerald-400',
+  financials: 'text-gray-400',
+  valuation: 'text-gray-400',
+  volatility: 'text-gray-400',
+  macro: 'text-gray-400',
+  news: 'text-gray-400',
+  sentiment: 'text-gray-400',
+  error: 'text-red-400',
+}
+
+function formatTimestamp(isoTimestamp: string): string {
+  try {
+    const date = new Date(isoTimestamp)
+    return date.toLocaleTimeString(undefined, {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: true,
+    })
+  } catch {
+    return '--:--:--'
+  }
+}
+
+function LogEntry({ entry }: { entry: ActivityLogEntry }) {
+  const Icon = stepIcons[entry.step.toLowerCase()] || AlertCircle
+  const colorClass = stepColors[entry.step.toLowerCase()] || 'text-gray-400'
+
+  return (
+    <div className="flex items-start gap-3 py-2 px-3 hover:bg-gray-800/50 rounded transition-colors">
+      <span className="text-xs text-gray-500 font-mono whitespace-nowrap mt-0.5">
+        {formatTimestamp(entry.timestamp)}
+      </span>
+      <div className={cn('mt-0.5', colorClass)}>
+        <Icon className="w-4 h-4" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <span className={cn('text-xs font-medium mr-2', colorClass)}>
+          [{entry.step}]
+        </span>
+        <span className="text-sm text-gray-300">
+          {entry.message}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export function ActivityLog({ entries, className }: ActivityLogProps) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  // Auto-scroll to bottom when new entries are added
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [entries])
+
+  return (
+    <div className={cn('bg-gray-900/50 border border-gray-800 rounded-xl', className)}>
+      <div className="px-4 py-3 border-b border-gray-800">
+        <h3 className="text-xs font-medium text-gray-400 uppercase tracking-wider">
+          Activity Log
+        </h3>
+      </div>
+      <div
+        ref={scrollRef}
+        className="max-h-64 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-700 scrollbar-track-gray-900"
+      >
+        {entries.length === 0 ? (
+          <div className="px-4 py-8 text-center text-sm text-gray-500">
+            No activity yet. Start an analysis to see real-time updates.
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-800/50">
+            {entries.map((entry, index) => (
+              <LogEntry key={`${entry.timestamp}-${index}`} entry={entry} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ActivityLog

frontend/src/components/MetricsPanel.tsx

@@ -0,0 +1,178 @@
+import React, { useEffect, useRef } from "react"
+import { Download } from "lucide-react"
+import type { MetricEntry, ActivityLogEntry } from "@/lib/api"
+
+interface UserEvent {
+  timestamp: string
+  message: string
+}
+
+interface MetricsPanelProps {
+  metrics: MetricEntry[]
+  activityLog: ActivityLogEntry[]
+  currentStep: string
+  revisionCount: number
+  score: number
+  isTyping?: boolean
+  userEvents?: UserEvent[]
+}
+
+function formatTime(timestamp: string): string {
+  try {
+    const date = new Date(timestamp)
+    return date.toLocaleTimeString('en-US', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    })
+  } catch {
+    return ''
+  }
+}
+
+function formatValue(value: string | number): string {
+  if (typeof value === "number") {
+    if (Math.abs(value) >= 1e9) return `$${(value / 1e9).toFixed(1)}B`
+    if (Math.abs(value) >= 1e6) return `$${(value / 1e6).toFixed(1)}M`
+    if (Math.abs(value) < 100) return value.toFixed(2)
+    return value.toLocaleString()
+  }
+  return String(value)
+}
+
+function getCurrentTime(): string {
+  return new Date().toLocaleTimeString('en-US', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+}
+
+export function MetricsPanel({
+  metrics,
+  activityLog,
+  currentStep,
+  revisionCount,
+  score,
+  isTyping = false,
+  userEvents = [],
+}: MetricsPanelProps) {
+  const logRef = useRef<HTMLDivElement>(null)
+
+  // Auto-scroll to bottom when new entries arrive
+  useEffect(() => {
+    if (logRef.current) {
+      logRef.current.scrollTop = logRef.current.scrollHeight
+    }
+  }, [metrics, activityLog, isTyping, userEvents])
+
+  // Combine and sort all log entries
+  const allEntries = React.useMemo(() => {
+    const entries: Array<{ time: string; text: string; type: 'metric' | 'activity' | 'user' }> = []
+
+    // Add user events first
+    for (const e of userEvents) {
+      entries.push({
+        time: formatTime(e.timestamp),
+        text: `[user] ${e.message}`,
+        type: 'user'
+      })
+    }
+
+    // Add metrics
+    for (const m of metrics) {
+      entries.push({
+        time: formatTime(m.timestamp),
+        text: `[${m.source}] ${m.metric}: ${formatValue(m.value)}`,
+        type: 'metric'
+      })
+    }
+
+    // Add activity log
+    for (const a of activityLog) {
+      entries.push({
+        time: formatTime(a.timestamp),
+        text: `[${a.step}] ${a.message}`,
+        type: 'activity'
+      })
+    }
+
+    // Sort by timestamp
+    return entries.sort((a, b) => a.time.localeCompare(b.time))
+  }, [metrics, activityLog, userEvents])
+
+  // Download log as text file
+  const handleDownload = () => {
+    const logContent = allEntries.map(e => `${e.time} ${e.text}`).join('\n')
+    const blob = new Blob([logContent], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `analysis-log-${new Date().toISOString().split('T')[0]}.txt`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  return (
+    <div className="h-full w-full flex flex-col bg-black/90 rounded border border-zinc-700 font-mono text-[11px]">
+      {/* Header */}
+      <div className="px-2 py-1 border-b border-zinc-700 text-zinc-400 flex justify-between items-center">
+        <span>Log</span>
+        <button
+          onClick={handleDownload}
+          disabled={allEntries.length === 0}
+          className="p-1 hover:bg-zinc-700 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          title="Download log"
+        >
+          <Download className="h-3 w-3" />
+        </button>
+      </div>
+
+      {/* Log content */}
+      <div
+        ref={logRef}
+        className="flex-1 overflow-y-auto overflow-x-auto p-2 space-y-0.5"
+      >
+        {allEntries.length === 0 && !isTyping ? (
+          <div className="text-zinc-500">Waiting for input...</div>
+        ) : (
+          <>
+            {allEntries.map((entry, i) => (
+              <div key={i} className="text-zinc-300 whitespace-nowrap">
+                <span className="text-zinc-500">{entry.time}</span>
+                {' '}
+                <span className={
+                  entry.type === 'metric' ? 'text-green-400' :
+                  entry.type === 'user' ? 'text-blue-400' :
+                  'text-zinc-300'
+                }>
+                  {entry.text}
+                </span>
+              </div>
+            ))}
+            {/* Live typing indicator */}
+            {isTyping && (
+              <div className="text-zinc-300 whitespace-nowrap">
+                <span className="text-zinc-500">{getCurrentTime()}</span>
+                {' '}
+                <span className="text-blue-400">[user] Typing...</span>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="px-2 py-1 border-t border-zinc-700 text-zinc-500 flex justify-between">
+        <span>Step: {currentStep}</span>
+        {revisionCount > 0 && <span>Rev #{revisionCount}</span>}
+      </div>
+    </div>
+  )
+}
+
+export default MetricsPanel

frontend/src/components/ProcessFlow.tsx

@@ -0,0 +1,536 @@
+import React, { useMemo } from "react"
+import { cn } from "@/lib/utils"
+import {
+  User,
+  Database,
+  Search,
+  Brain,
+  MessageSquare,
+  Edit3,
+  FileOutput,
+  Server,
+  Loader2,
+  Network,
+  GitBranch,
+  TrendingUp,
+  DollarSign,
+  BarChart3,
+  Globe,
+  Newspaper,
+  Heart,
+} from "lucide-react"
+import type { MCPStatus, LLMStatus } from "@/lib/api"
+
+// === TYPES ===
+
+type NodeStatus = 'idle' | 'executing' | 'completed' | 'failed' | 'skipped'
+type CacheState = 'idle' | 'hit' | 'miss' | 'checking'
+
+interface ProcessFlowProps {
+  currentStep: string
+  completedSteps: string[]
+  mcpStatus: MCPStatus
+  llmStatus?: LLMStatus
+  llmProvider?: string
+  cacheHit?: boolean
+  stockSelected?: boolean
+  isSearching?: boolean
+  revisionCount?: number
+  isAborted?: boolean
+}
+
+// === CONSTANTS ===
+
+const NODE_SIZE = 44
+const ICON_SIZE = 24
+const MCP_SIZE = 36
+const MCP_ICON_SIZE = 20
+const LLM_WIDTH = 64
+const LLM_HEIGHT = 24
+
+const GAP = 72
+const CONNECTOR_PAD = 2
+const GROUP_PAD = 4
+
+// ADJUSTED VALUES FOR TIGHT FIT
+const ROW_GAP = 68            // Slight reduction to tighten vertical flow
+const ROW1_Y = 48             // Increased for labels above containers
+const ROW2_Y = ROW1_Y + ROW_GAP
+const ROW3_Y = ROW2_Y + ROW_GAP
+// SVG dimensions
+const SVG_HEIGHT = 218        // Exact content height - scales to fill container
+const NODE_COUNT = 7
+const FLOW_WIDTH = GAP * (NODE_COUNT - 1) + NODE_SIZE
+const SVG_WIDTH = FLOW_WIDTH  // Match content width exactly
+const FLOW_START_X = NODE_SIZE / 2  // Left-aligned with half-node margin
+
+const NODES = {
+  input: { x: FLOW_START_X, y: ROW1_Y },
+  cache: { x: FLOW_START_X + GAP, y: ROW1_Y },
+  a2a: { x: FLOW_START_X + GAP * 2, y: ROW1_Y },
+  analyzer: { x: FLOW_START_X + GAP * 3, y: ROW1_Y },
+  critic: { x: FLOW_START_X + GAP * 4, y: ROW1_Y },
+  editor: { x: FLOW_START_X + GAP * 5, y: ROW1_Y },
+  output: { x: FLOW_START_X + GAP * 6, y: ROW1_Y },
+  exchange: { x: FLOW_START_X, y: ROW2_Y },
+  researcher: { x: FLOW_START_X + GAP * 2, y: ROW3_Y },
+}
+
+const MCP_START_X = NODES.researcher.x + NODE_SIZE / 2 + 40
+const MCP_GAP = 38
+const MCP_SERVERS = [
+  { id: 'financials', label: 'Financials', icon: TrendingUp, x: MCP_START_X },
+  { id: 'valuation', label: 'Valuation', icon: DollarSign, x: MCP_START_X + MCP_GAP },
+  { id: 'volatility', label: 'Volatility', icon: BarChart3, x: MCP_START_X + MCP_GAP * 2 },
+  { id: 'macro', label: 'Macro', icon: Globe, x: MCP_START_X + MCP_GAP * 3 },
+  { id: 'news', label: 'News', icon: Newspaper, x: MCP_START_X + MCP_GAP * 4 },
+  { id: 'sentiment', label: 'Sentiment', icon: Heart, x: MCP_START_X + MCP_GAP * 5 },
+]
+
+const AGENTS_CENTER_X = (NODES.analyzer.x + NODES.editor.x) / 2
+const LLM_GAP = 68  // LLM_WIDTH (64) + 4px spacing
+const LLM_PROVIDERS = [
+  { id: 'groq', name: 'Groq', x: AGENTS_CENTER_X - LLM_GAP },
+  { id: 'gemini', name: 'Gemini', x: AGENTS_CENTER_X },
+  { id: 'openrouter', name: 'OpenRouter', x: AGENTS_CENTER_X + LLM_GAP },
+]
+
+const AGENTS_GROUP = {
+  x: NODES.analyzer.x - NODE_SIZE / 2 - GROUP_PAD,
+  y: ROW1_Y - NODE_SIZE / 2 - GROUP_PAD,
+  width: NODES.editor.x - NODES.analyzer.x + NODE_SIZE + GROUP_PAD * 2,
+  height: NODE_SIZE + GROUP_PAD * 2,
+}
+
+const LLM_GROUP = {
+  x: LLM_PROVIDERS[0].x - LLM_WIDTH / 2 - GROUP_PAD,
+  y: ROW2_Y - LLM_HEIGHT / 2 - GROUP_PAD,
+  width: LLM_PROVIDERS[2].x - LLM_PROVIDERS[0].x + LLM_WIDTH + GROUP_PAD * 2,
+  height: LLM_HEIGHT + GROUP_PAD * 2,
+}
+
+const MCP_GROUP = {
+  x: MCP_SERVERS[0].x - MCP_SIZE / 2 - GROUP_PAD,
+  y: ROW3_Y - MCP_SIZE / 2 - GROUP_PAD,
+  width: MCP_SERVERS[5].x - MCP_SERVERS[0].x + MCP_SIZE + GROUP_PAD * 2,
+  height: MCP_SIZE + GROUP_PAD * 2,
+}
+
+// === HELPER FUNCTIONS ===
+
+function normalizeStep(step: string): string {
+  const lower = step.toLowerCase()
+  if (lower === 'completed') return 'output'
+  return lower
+}
+
+function getNodeStatus(
+  stepId: string,
+  currentStep: string,
+  completedSteps: string[],
+  cacheHit?: boolean
+): NodeStatus {
+  const normalizedCurrent = normalizeStep(currentStep)
+  const normalizedCompleted = completedSteps.map(normalizeStep)
+
+  // On cache hit, intermediate steps stay idle (not completed)
+  if (cacheHit && ['researcher', 'analyzer', 'critic', 'editor', 'a2a'].includes(stepId)) {
+    return 'idle'
+  }
+
+  if (normalizedCompleted.includes(stepId)) return 'completed'
+  if (normalizedCurrent === stepId) return 'executing'
+  return 'idle'
+}
+
+// === SVG SUB-COMPONENTS ===
+
+function ArrowMarkers() {
+  return (
+    <defs>
+      {['idle', 'executing', 'completed', 'failed'].map((status) => (
+        <React.Fragment key={status}>
+          {/* Forward arrow (end) */}
+          <marker
+            id={`arrow-${status}`}
+            markerWidth="5"
+            markerHeight="5"
+            refX="4"
+            refY="2.5"
+            orient="auto"
+            markerUnits="userSpaceOnUse"
+          >
+            <path d="M0,0 L0,5 L5,2.5 z" fill={`var(--pf-connector-${status})`} />
+          </marker>
+          {/* Reverse arrow (start) for bidirectional */}
+          <marker
+            id={`arrow-start-${status}`}
+            markerWidth="5"
+            markerHeight="5"
+            refX="1"
+            refY="2.5"
+            orient="auto"
+            markerUnits="userSpaceOnUse"
+          >
+            <path d="M5,0 L5,5 L0,2.5 z" fill={`var(--pf-connector-${status})`} />
+          </marker>
+        </React.Fragment>
+      ))}
+    </defs>
+  )
+}
+
+function SVGNode({
+  x,
+  y,
+  icon: Icon,
+  label,
+  label2,
+  status,
+  isDiamond = false,
+  cacheState,
+  isAgent = false,
+  hasBorder = true,
+  labelPosition = 'below',
+  flipIcon = false,
+}: {
+  x: number
+  y: number
+  icon: React.ElementType
+  label: string
+  label2?: string
+  status: NodeStatus
+  isDiamond?: boolean
+  cacheState?: CacheState
+  isAgent?: boolean
+  hasBorder?: boolean
+  labelPosition?: 'above' | 'below'
+  flipIcon?: boolean
+}) {
+  const isExecuting = status === 'executing' || cacheState === 'checking'
+  const opacity = status === 'idle' && !cacheState ? 0.7 : status === 'skipped' ? 0.7 : 1
+  const strokeWidth = hasBorder ? 1 : 0
+
+  // Label positioning
+  const labelY = labelPosition === 'above'
+    ? y - NODE_SIZE / 2 - (label2 ? 16 : 8)
+    : y + NODE_SIZE / 2 + 10
+
+  return (
+    <g opacity={opacity} className="transition-opacity duration-300">
+      <rect
+        x={x - NODE_SIZE / 2}
+        y={y - NODE_SIZE / 2}
+        width={NODE_SIZE}
+        height={NODE_SIZE}
+        rx={isDiamond ? 4 : 8}
+        strokeWidth={strokeWidth}
+        className={cn(
+          "pf-node",
+          cacheState ? `pf-cache-${cacheState}` : `pf-node-${status}`,
+          isAgent && "pf-agent",
+          !hasBorder && "pf-no-border",
+          isExecuting && "pf-pulse"
+        )}
+        transform={isDiamond ? `rotate(45 ${x} ${y})` : undefined}
+      />
+      <foreignObject
+        x={x - ICON_SIZE / 2}
+        y={y - ICON_SIZE / 2}
+        width={ICON_SIZE}
+        height={ICON_SIZE}
+      >
+        <div className="flex items-center justify-center w-full h-full">
+          {isExecuting ? (
+            <Loader2 className="w-5 h-5 pf-icon animate-spin" />
+          ) : (
+            <Icon className="w-5 h-5 pf-icon" style={flipIcon ? { transform: 'scaleX(-1)' } : undefined} />
+          )}
+        </div>
+      </foreignObject>
+      <text
+        x={x}
+        y={labelY}
+        textAnchor="middle"
+        className={cn(
+          "font-medium",
+          isAgent ? "text-[9px] pf-text-agent" : "text-[8px] pf-text-label"
+        )}
+      >
+        {label}
+        {label2 && (
+          <tspan x={x} dy="10">{label2}</tspan>
+        )}
+      </text>
+    </g>
+  )
+}
+
+// === MAIN COMPONENT ===
+
+export function ProcessFlow({
+  currentStep,
+  completedSteps,
+  mcpStatus,
+  llmStatus,
+  llmProvider = 'groq',
+  cacheHit = false,
+  stockSelected = false,
+  isSearching = false,
+  revisionCount = 0,
+  isAborted = false,
+}: ProcessFlowProps) {
+
+  // Logic derivations - when aborted, stop all executing states
+  const inputStatus = stockSelected ? 'completed' : getNodeStatus('input', currentStep, completedSteps, cacheHit)
+  const exchangeStatus = stockSelected ? 'completed' : isSearching ? 'executing' : 'idle'
+
+  // When aborted, freeze agent nodes at their last completed state (no executing)
+  const analyzerStatus = isAborted
+    ? (completedSteps.includes('analyzer') ? 'completed' : 'idle')
+    : getNodeStatus('analyzer', currentStep, completedSteps, cacheHit)
+  const criticStatus = isAborted
+    ? (completedSteps.includes('critic') ? 'completed' : 'idle')
+    : getNodeStatus('critic', currentStep, completedSteps, cacheHit)
+  const editorStatus = isAborted
+    ? (completedSteps.includes('editor') ? 'completed' : 'idle')
+    : getNodeStatus('editor', currentStep, completedSteps, cacheHit)
+  const outputStatus = isAborted
+    ? (completedSteps.includes('output') ? 'completed' : 'idle')
+    : getNodeStatus('output', currentStep, completedSteps, cacheHit)
+  const researcherStatus = isAborted
+    ? (completedSteps.includes('researcher') ? 'completed' : 'idle')
+    : getNodeStatus('researcher', currentStep, completedSteps, cacheHit)
+  const a2aStatus = isAborted
+    ? (completedSteps.includes('researcher') ? 'completed' : 'idle')
+    : (researcherStatus === 'executing' ? 'executing' : researcherStatus === 'completed' ? 'completed' : 'idle')
+
+  const cacheState: CacheState = useMemo(() => {
+    if (currentStep === 'cache') return 'checking'
+    if (completedSteps.includes('cache')) return cacheHit ? 'hit' : 'miss'
+    return 'idle'
+  }, [currentStep, completedSteps, cacheHit])
+
+  // Completion halo: workflow completed successfully
+  // Editor is optional (only runs if score < 7), so we check for essential steps + output
+  const allDone = useMemo(() => {
+    const normalizedCompleted = completedSteps.map(normalizeStep)
+    const essentialSteps = ['input', 'cache', 'researcher', 'analyzer', 'critic', 'output']
+    return essentialSteps.every(s => normalizedCompleted.includes(s))
+  }, [completedSteps])
+
+  const conn = (from: NodeStatus | CacheState, to: NodeStatus): NodeStatus => {
+    if (from === 'completed' || from === 'miss' || from === 'hit') {
+        return to === 'idle' ? 'idle' : to === 'executing' ? 'executing' : 'completed'
+    }
+    return 'idle'
+  }
+
+  // Positioning helpers
+  const nodeRight = (n: { x: number }) => n.x + NODE_SIZE / 2 + CONNECTOR_PAD
+  const nodeLeft = (n: { x: number }) => n.x - NODE_SIZE / 2 - CONNECTOR_PAD
+  const nodeBottom = (n: { y: number }) => n.y + NODE_SIZE / 2 + CONNECTOR_PAD
+  const nodeTop = (n: { y: number }) => n.y - NODE_SIZE / 2 - CONNECTOR_PAD
+  // Diamond corners (rotated 45°, half-diagonal = NODE_SIZE * sqrt(2) / 2)
+  const diamondLeft = (n: { x: number }) => n.x - NODE_SIZE * Math.sqrt(2) / 2 - CONNECTOR_PAD
+  const diamondRight = (n: { x: number }) => n.x + NODE_SIZE * Math.sqrt(2) / 2 + CONNECTOR_PAD
+
+  return (
+    <div className="h-[260px]">
+      <div className="h-full">
+        <svg viewBox={`0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`} preserveAspectRatio="xMinYMin meet" className="h-full w-auto">
+          <ArrowMarkers />
+
+          {/* Group Backgrounds */}
+          <rect {...AGENTS_GROUP} rx={8} fill="none" stroke="var(--pf-group-stroke)" strokeWidth={1} strokeDasharray="4 3" opacity={0.35} />
+          <rect {...LLM_GROUP} rx={8} fill="none" stroke="var(--pf-group-stroke)" strokeWidth={1} strokeDasharray="4 3" opacity={0.35} />
+          <rect {...MCP_GROUP} rx={8} fill="none" stroke="var(--pf-group-stroke)" strokeWidth={1} strokeDasharray="4 3" opacity={0.35} />
+
+          {/* Completion Halo - around OUTPUT node when workflow completes successfully */}
+          {allDone && !isAborted && (
+            <circle
+              cx={NODES.output.x}
+              cy={NODES.output.y}
+              r={NODE_SIZE / 2 + 8}
+              className="pf-success-halo"
+            />
+          )}
+
+          {/* Row 1 Rightward Connectors */}
+          <line x1={nodeRight(NODES.input)} y1={ROW1_Y} x2={diamondLeft(NODES.cache)} y2={ROW1_Y}
+                strokeWidth={1.4} markerEnd={`url(#arrow-${conn(inputStatus, cacheState === 'idle' ? 'idle' : 'completed')})`}
+                className={cn("pf-connector", `pf-connector-${conn(inputStatus, cacheState === 'idle' ? 'idle' : 'completed')}`)} />
+          <line x1={diamondRight(NODES.cache)} y1={ROW1_Y} x2={nodeLeft(NODES.a2a)} y2={ROW1_Y}
+                strokeWidth={1.4} markerEnd={`url(#arrow-${cacheState === 'miss' ? conn('miss', a2aStatus) : 'idle'})`}
+                className={cn("pf-connector", `pf-connector-${cacheState === 'miss' ? conn('miss', a2aStatus) : 'idle'}`)} />
+          <line x1={nodeRight(NODES.a2a)} y1={ROW1_Y} x2={nodeLeft(NODES.analyzer)} y2={ROW1_Y}
+                strokeWidth={1.4} markerEnd={`url(#arrow-${conn(a2aStatus, analyzerStatus)})`}
+                className={cn("pf-connector", `pf-connector-${conn(a2aStatus, analyzerStatus)}`)} />
+          <line x1={nodeRight(NODES.analyzer)} y1={ROW1_Y} x2={nodeLeft(NODES.critic)} y2={ROW1_Y}
+                strokeWidth={1.4} markerEnd={`url(#arrow-${conn(analyzerStatus, criticStatus)})`}
+                className={cn("pf-connector", `pf-connector-${conn(analyzerStatus, criticStatus)}`)} />
+          {/* Critic → Editor connector - only lights up when editor actually runs */}
+          <line x1={nodeRight(NODES.critic)} y1={ROW1_Y} x2={nodeLeft(NODES.editor)} y2={ROW1_Y}
+                strokeWidth={1.4} markerEnd={`url(#arrow-${editorStatus === 'executing' || editorStatus === 'completed' ? conn(criticStatus, editorStatus) : 'idle'})`}
+                className={cn("pf-connector", `pf-connector-${editorStatus === 'executing' || editorStatus === 'completed' ? conn(criticStatus, editorStatus) : 'idle'}`)} />
+          {/* Editor → Critic loop (curved path below) - shows when revision loop is active */}
+          <path
+            d={`M ${NODES.editor.x} ${nodeBottom(NODES.editor)}
+                Q ${NODES.editor.x} ${ROW1_Y + 38} ${(NODES.critic.x + NODES.editor.x) / 2} ${ROW1_Y + 38}
+                Q ${NODES.critic.x} ${ROW1_Y + 38} ${NODES.critic.x} ${nodeBottom(NODES.critic)}`}
+            fill="none"
+            strokeWidth={1.4}
+            markerEnd={`url(#arrow-${revisionCount > 0 && (editorStatus === 'completed' || criticStatus === 'executing') ? 'completed' : 'idle'})`}
+            className={cn("pf-connector", `pf-connector-${revisionCount > 0 && (editorStatus === 'completed' || criticStatus === 'executing') ? 'completed' : 'idle'}`)}
+          />
+          {/* Editor → Output connector - only lights up when editor ran */}
+          <line x1={nodeRight(NODES.editor)} y1={ROW1_Y} x2={nodeLeft(NODES.output)} y2={ROW1_Y}
+                strokeWidth={1.4} markerEnd={`url(#arrow-${editorStatus === 'completed' ? conn(editorStatus, outputStatus) : 'idle'})`}
+                className={cn("pf-connector", `pf-connector-${editorStatus === 'completed' ? conn(editorStatus, outputStatus) : 'idle'}`)} />
+          {/* Critic → Output direct path (curved above) - shows when editor is skipped */}
+          <path
+            d={`M ${nodeRight(NODES.critic)} ${ROW1_Y - 8}
+                Q ${(NODES.critic.x + NODES.output.x) / 2} ${ROW1_Y - 28} ${nodeLeft(NODES.output)} ${ROW1_Y - 8}`}
+            fill="none"
+            strokeWidth={1.4}
+            markerEnd={`url(#arrow-${editorStatus === 'idle' && criticStatus === 'completed' ? conn(criticStatus, outputStatus) : 'idle'})`}
+            className={cn("pf-connector", `pf-connector-${editorStatus === 'idle' && criticStatus === 'completed' ? conn(criticStatus, outputStatus) : 'idle'}`)}
+          />
+
+          {/* Researcher ↔ MCP block connector (bidirectional) */}
+          <line x1={nodeRight(NODES.researcher)} y1={ROW3_Y} x2={MCP_GROUP.x - 2} y2={ROW3_Y}
+                strokeWidth={1.4}
+                markerStart={`url(#arrow-start-${researcherStatus === 'executing' || researcherStatus === 'completed' ? 'completed' : 'idle'})`}
+                markerEnd={`url(#arrow-${researcherStatus === 'executing' || researcherStatus === 'completed' ? 'completed' : 'idle'})`}
+                className={cn("pf-connector", `pf-connector-${researcherStatus === 'executing' || researcherStatus === 'completed' ? 'completed' : 'idle'}`)} />
+
+          {/* Bidirectional Vertical Connectors */}
+          {/* User Input ↔ Exchange */}
+          <line x1={NODES.input.x} y1={nodeBottom(NODES.input)} x2={NODES.exchange.x} y2={nodeTop(NODES.exchange)}
+                strokeWidth={1.4}
+                markerStart={`url(#arrow-start-${conn(exchangeStatus, inputStatus)})`}
+                markerEnd={`url(#arrow-${conn(inputStatus, exchangeStatus)})`}
+                className={cn("pf-connector", `pf-connector-${inputStatus === 'completed' || exchangeStatus === 'completed' ? 'completed' : 'idle'}`)} />
+
+          {/* A2A ↔ Researcher */}
+          <line x1={NODES.a2a.x} y1={nodeBottom(NODES.a2a)} x2={NODES.researcher.x} y2={nodeTop(NODES.researcher)}
+                strokeWidth={1.4}
+                markerStart={`url(#arrow-start-${conn(researcherStatus, a2aStatus)})`}
+                markerEnd={`url(#arrow-${conn(a2aStatus, researcherStatus)})`}
+                className={cn("pf-connector", `pf-connector-${a2aStatus === 'completed' || researcherStatus === 'completed' ? 'completed' : a2aStatus === 'executing' || researcherStatus === 'executing' ? 'executing' : 'idle'}`)} />
+
+          {/* Agent Group ↔ LLM Group (Orchestration connector) */}
+          <line x1={AGENTS_CENTER_X} y1={AGENTS_GROUP.y + AGENTS_GROUP.height + 2} x2={AGENTS_CENTER_X} y2={LLM_GROUP.y - 2}
+                markerStart={`url(#arrow-start-${analyzerStatus === 'executing' || criticStatus === 'executing' || editorStatus === 'executing' ? 'executing' : analyzerStatus === 'completed' ? 'completed' : 'idle'})`}
+                markerEnd={`url(#arrow-${analyzerStatus === 'executing' || criticStatus === 'executing' || editorStatus === 'executing' ? 'executing' : analyzerStatus === 'completed' ? 'completed' : 'idle'})`}
+                className={cn("pf-connector pf-orchestration", `pf-connector-${analyzerStatus === 'executing' || criticStatus === 'executing' || editorStatus === 'executing' ? 'executing' : analyzerStatus === 'completed' ? 'completed' : 'idle'}`)} />
+
+          {/* Row 1 Nodes - labels above */}
+          <SVGNode x={NODES.input.x} y={NODES.input.y} icon={User} label="User Input" status={inputStatus} labelPosition="above" />
+          <SVGNode x={NODES.cache.x} y={NODES.cache.y} icon={Database} label="Cache" status={cacheState === 'idle' ? 'idle' : 'completed'} isDiamond cacheState={cacheState} labelPosition="above" />
+          <SVGNode x={NODES.a2a.x} y={NODES.a2a.y} icon={Network} label="A2A client" status={a2aStatus} labelPosition="above" />
+          <SVGNode x={NODES.analyzer.x} y={NODES.analyzer.y} icon={Brain} label="Analyzer" label2="Agent" status={analyzerStatus} isAgent labelPosition="above" />
+          <SVGNode x={NODES.critic.x} y={NODES.critic.y} icon={MessageSquare} label="Critic" label2="Agent" status={criticStatus} isAgent labelPosition="above" />
+          <SVGNode x={NODES.editor.x} y={NODES.editor.y} icon={Edit3} label="Editor" label2="Agent" status={editorStatus} isAgent labelPosition="above" />
+          <SVGNode x={NODES.output.x} y={NODES.output.y} icon={FileOutput} label="Output" status={outputStatus} labelPosition="above" flipIcon />
+
+          {/* Row 2 & 3 Nodes - labels below */}
+          <SVGNode x={NODES.exchange.x} y={NODES.exchange.y} icon={GitBranch} label="Exchange" label2="Database" status={exchangeStatus} />
+          <SVGNode x={NODES.researcher.x} y={NODES.researcher.y} icon={Search} label="Researcher" label2="Agent" status={researcherStatus} isAgent />
+
+          {/* LLM Providers - with borders */}
+          {LLM_PROVIDERS.map((llm) => {
+            // Check actual provider status from backend
+            const providerStatus = llmStatus?.[llm.id as keyof LLMStatus];
+            const isFailed = providerStatus === 'failed';
+            const isProviderCompleted = providerStatus === 'completed';
+
+            // Only show executing if agents are active AND this provider hasn't failed/completed yet
+            const agentsActive = analyzerStatus === 'executing' || criticStatus === 'executing' || editorStatus === 'executing';
+            const isActive = agentsActive && !isFailed && !isProviderCompleted;
+
+            // Only the actually used provider shows as completed (from backend llmStatus)
+            const status = isFailed ? 'failed' : isProviderCompleted ? 'completed' : isActive ? 'executing' : 'idle';
+            return (
+              <g key={llm.id}>
+                <rect
+                  x={llm.x - LLM_WIDTH / 2}
+                  y={ROW2_Y - LLM_HEIGHT / 2}
+                  width={LLM_WIDTH}
+                  height={LLM_HEIGHT}
+                  rx={4}
+                  strokeWidth={1}
+                  className={cn("pf-llm", `pf-llm-${status}`, status === 'executing' && "pf-pulse")}
+                />
+                <text
+                  x={llm.x}
+                  y={ROW2_Y + 4}
+                  textAnchor="middle"
+                  className={`text-[9px] font-medium pf-llm-text-${status}`}
+                >
+                  {llm.name}
+                </text>
+              </g>
+            )
+          })}
+
+          {/* MCP Servers */}
+          {MCP_SERVERS.map((mcp) => {
+            // Check actual MCP status from backend
+            const serverStatus = mcpStatus[mcp.id as keyof MCPStatus];
+            const isFailed = serverStatus === 'failed';
+            const isPartial = serverStatus === 'partial';
+            const isServerCompleted = serverStatus === 'completed';
+
+            // Determine visual status: failed/partial take precedence (persist for session)
+            const status = isFailed ? 'failed' :
+                          isPartial ? 'partial' :
+                          isServerCompleted ? 'completed' :
+                          researcherStatus === 'executing' ? 'executing' : 'idle';
+            const Icon = mcp.icon;
+            return (
+              <g key={mcp.id} opacity={status === 'failed' || status === 'partial' ? 0.9 : status === 'executing' ? 1 : status === 'completed' ? 0.85 : 0.6}>
+                <rect x={mcp.x - MCP_SIZE / 2} y={ROW3_Y - MCP_SIZE / 2} width={MCP_SIZE} height={MCP_SIZE} rx={4}
+                      strokeWidth={1}
+                      className={cn("pf-node pf-node-mcp",
+                        status === 'failed' ? 'pf-node-failed' :
+                        status === 'partial' ? 'pf-node-partial' :
+                        status === 'executing' ? 'pf-node-executing pf-pulse' :
+                        status === 'completed' ? 'pf-node-completed' : 'pf-node-idle')} />
+                <foreignObject
+                  x={mcp.x - MCP_ICON_SIZE / 2}
+                  y={ROW3_Y - MCP_ICON_SIZE / 2}
+                  width={MCP_ICON_SIZE}
+                  height={MCP_ICON_SIZE}
+                >
+                  <div className="flex items-center justify-center w-full h-full">
+                    <Icon className={cn("w-4 h-4",
+                      status === 'failed' ? 'text-red-400' :
+                      status === 'partial' ? 'text-amber-400' : 'pf-icon')} />
+                  </div>
+                </foreignObject>
+                <text x={mcp.x} y={MCP_GROUP.y + MCP_GROUP.height + 12} textAnchor="middle"
+                      className={cn("text-[8px] font-medium",
+                        status === 'failed' ? 'fill-red-400' :
+                        status === 'partial' ? 'fill-amber-400' : 'pf-text-label')}>{mcp.label}</text>
+              </g>
+            )
+          })}
+
+          {/* MCP Group Label */}
+          <text
+            x={MCP_GROUP.x + MCP_GROUP.width / 2}
+            y={MCP_GROUP.y - 6}
+            textAnchor="middle"
+            className="text-[9px] font-medium pf-group-label"
+          >
+            Custom MCP Servers
+          </text>
+        </svg>
+
+      </div>
+    </div>
+  )
+}
+
+export default ProcessFlow

frontend/src/components/StockSearch.tsx

@@ -0,0 +1,261 @@
+import { useState, useEffect, useRef, useCallback } from "react"
+import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
+import { Search, X, Check, Loader2, ChevronLeft, ChevronRight } from "lucide-react"
+import { searchStocks, StockResult } from "@/lib/api"
+
+interface StockSearchProps {
+  onSelect: (stock: StockResult) => void
+  disabled?: boolean
+  selectedStock?: StockResult | null
+  onClear?: () => void
+  onSearchChange?: (isSearching: boolean) => void
+}
+
+export function StockSearch({
+  onSelect,
+  disabled = false,
+  selectedStock,
+  onClear,
+  onSearchChange,
+}: StockSearchProps) {
+  const [query, setQuery] = useState("")
+  const [results, setResults] = useState<StockResult[]>([])
+  const [isOpen, setIsOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [highlightedIndex, setHighlightedIndex] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+  const debounceRef = useRef<NodeJS.Timeout>()
+  const nameScrollRef = useRef<HTMLDivElement>(null)
+
+  const scrollName = (direction: 'left' | 'right') => {
+    if (nameScrollRef.current) {
+      const scrollAmount = direction === 'left' ? -80 : 80
+      nameScrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' })
+    }
+  }
+
+  // Debounced search
+  const performSearch = useCallback(async (searchQuery: string) => {
+    if (searchQuery.length < 1) {
+      setResults([])
+      setIsOpen(false)
+      return
+    }
+
+    setIsLoading(true)
+    try {
+      const response = await searchStocks(searchQuery)
+      setResults(response.results)
+      setIsOpen(response.results.length > 0)
+      setHighlightedIndex(0)
+    } catch (error) {
+      console.error("Stock search error:", error)
+      setResults([])
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current)
+    }
+
+    debounceRef.current = setTimeout(() => {
+      performSearch(query)
+    }, 150) // 150ms debounce
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current)
+      }
+    }
+  }, [query, performSearch])
+
+  // Notify parent when search state changes
+  useEffect(() => {
+    onSearchChange?.(query.length > 0)
+  }, [query, onSearchChange])
+
+  // Keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!isOpen) return
+
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault()
+        setHighlightedIndex((prev) =>
+          prev < results.length - 1 ? prev + 1 : prev
+        )
+        break
+      case "ArrowUp":
+        e.preventDefault()
+        setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : 0))
+        break
+      case "Enter":
+        e.preventDefault()
+        if (results[highlightedIndex]) {
+          handleSelect(results[highlightedIndex])
+        }
+        break
+      case "Escape":
+        e.preventDefault()
+        setIsOpen(false)
+        inputRef.current?.blur()
+        break
+    }
+  }
+
+  const handleSelect = (stock: StockResult) => {
+    onSelect(stock)
+    setQuery("")
+    setIsOpen(false)
+    setResults([])
+  }
+
+  const handleClear = () => {
+    setQuery("")
+    setResults([])
+    setIsOpen(false)
+    onClear?.()
+    inputRef.current?.focus()
+  }
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        listRef.current &&
+        !listRef.current.contains(e.target as Node) &&
+        inputRef.current &&
+        !inputRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => document.removeEventListener("mousedown", handleClickOutside)
+  }, [])
+
+  // Show selected stock
+  if (selectedStock) {
+    return (
+      <div className="relative">
+        <div className="flex items-center gap-1 px-2 py-2 bg-card border border-border rounded-lg">
+          <Check className="w-4 h-4 text-emerald-500 shrink-0" />
+          <button
+            onClick={() => scrollName('left')}
+            className="shrink-0 p-0.5 hover:bg-muted rounded transition-colors"
+          >
+            <ChevronLeft className="w-3 h-3 text-muted-foreground" />
+          </button>
+          <div
+            ref={nameScrollRef}
+            className="flex-1 overflow-x-auto whitespace-nowrap scrollbar-hide"
+            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+          >
+            <span className="font-medium text-foreground text-sm">
+              {selectedStock.name}
+            </span>
+            <span className="text-muted-foreground text-sm ml-1">
+              ({selectedStock.symbol})
+            </span>
+          </div>
+          <button
+            onClick={() => scrollName('right')}
+            className="shrink-0 p-0.5 hover:bg-muted rounded transition-colors"
+          >
+            <ChevronRight className="w-3 h-3 text-muted-foreground" />
+          </button>
+          <span className="text-xs text-muted-foreground px-1.5 py-0.5 bg-muted rounded shrink-0">
+            {selectedStock.exchange}
+          </span>
+          {!disabled && (
+            <button
+              onClick={handleClear}
+              className="p-0.5 hover:bg-muted rounded transition-colors shrink-0"
+            >
+              <X className="w-4 h-4 text-muted-foreground" />
+            </button>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative">
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+        <Input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onFocus={() => query.length > 0 && results.length > 0 && setIsOpen(true)}
+          placeholder="Search U.S. listed companies..."
+          disabled={disabled}
+          className="pl-10 pr-10 bg-background border-input text-foreground focus:border-primary"
+        />
+        {isLoading && (
+          <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground animate-spin" />
+        )}
+        {!isLoading && query && (
+          <button
+            onClick={() => {
+              setQuery("")
+              setResults([])
+              setIsOpen(false)
+            }}
+            className="absolute right-3 top-1/2 -translate-y-1/2 p-0.5 hover:bg-muted rounded"
+          >
+            <X className="w-4 h-4 text-muted-foreground" />
+          </button>
+        )}
+      </div>
+
+      {/* Dropdown */}
+      {isOpen && results.length > 0 && (
+        <div
+          ref={listRef}
+          className="absolute z-50 w-full mt-1 bg-card border border-border rounded-lg shadow-xl overflow-hidden"
+        >
+          <div className="max-h-64 overflow-y-auto">
+            {results.map((stock, index) => (
+              <button
+                key={stock.symbol}
+                onClick={() => handleSelect(stock)}
+                onMouseEnter={() => setHighlightedIndex(index)}
+                className={cn(
+                  "w-full flex items-center gap-3 px-3 py-2 text-left transition-colors",
+                  index === highlightedIndex
+                    ? "bg-muted"
+                    : "hover:bg-muted/50"
+                )}
+              >
+                <span className="font-mono font-medium text-foreground min-w-[60px]">
+                  {stock.symbol}
+                </span>
+                <span className="flex-1 text-sm text-muted-foreground truncate">
+                  {stock.name}
+                </span>
+                <span className="text-xs text-muted-foreground px-2 py-0.5 bg-muted rounded">
+                  {stock.exchange}
+                </span>
+              </button>
+            ))}
+          </div>
+          <div className="px-3 py-2 border-t border-border text-xs text-muted-foreground">
+            ↑↓ navigate · Enter select · Esc close
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default StockSearch

frontend/src/components/ViewModeToggle.test.tsx

@@ -0,0 +1,47 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ViewModeToggle } from './ViewModeToggle'
+
+describe('ViewModeToggle', () => {
+  it('renders Executive and Full buttons', () => {
+    const onChange = vi.fn()
+    render(<ViewModeToggle value="executive" onChange={onChange} />)
+
+    expect(screen.getByRole('button', { name: 'Executive' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Full' })).toBeInTheDocument()
+  })
+
+  it('highlights the selected mode', () => {
+    const onChange = vi.fn()
+    const { rerender } = render(<ViewModeToggle value="executive" onChange={onChange} />)
+
+    const executiveBtn = screen.getByRole('button', { name: 'Executive' })
+    const fullBtn = screen.getByRole('button', { name: 'Full' })
+
+    expect(executiveBtn).toHaveClass('bg-primary')
+    expect(fullBtn).not.toHaveClass('bg-primary')
+
+    rerender(<ViewModeToggle value="full" onChange={onChange} />)
+
+    expect(executiveBtn).not.toHaveClass('bg-primary')
+    expect(fullBtn).toHaveClass('bg-primary')
+  })
+
+  it('calls onChange when clicking a different mode', () => {
+    const onChange = vi.fn()
+    render(<ViewModeToggle value="executive" onChange={onChange} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Full' }))
+
+    expect(onChange).toHaveBeenCalledWith('full')
+  })
+
+  it('calls onChange with executive when clicking Executive', () => {
+    const onChange = vi.fn()
+    render(<ViewModeToggle value="full" onChange={onChange} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Executive' }))
+
+    expect(onChange).toHaveBeenCalledWith('executive')
+  })
+})

frontend/src/components/ViewModeToggle.tsx

@@ -0,0 +1,43 @@
+import { cn } from "@/lib/utils"
+
+export type ViewMode = 'executive' | 'full'
+
+interface ViewModeToggleProps {
+  value: ViewMode
+  onChange: (mode: ViewMode) => void
+  className?: string
+}
+
+export function ViewModeToggle({ value, onChange, className }: ViewModeToggleProps) {
+  return (
+    <div className={cn(
+      "inline-flex items-center rounded-lg bg-gray-800 p-1 text-sm",
+      className
+    )}>
+      <button
+        onClick={() => onChange('executive')}
+        className={cn(
+          "px-3 py-1.5 rounded-md transition-all duration-200 font-medium",
+          value === 'executive'
+            ? "bg-primary text-primary-foreground shadow-sm"
+            : "text-gray-400 hover:text-gray-200"
+        )}
+      >
+        Executive
+      </button>
+      <button
+        onClick={() => onChange('full')}
+        className={cn(
+          "px-3 py-1.5 rounded-md transition-all duration-200 font-medium",
+          value === 'full'
+            ? "bg-primary text-primary-foreground shadow-sm"
+            : "text-gray-400 hover:text-gray-200"
+        )}
+      >
+        Full
+      </button>
+    </div>
+  )
+}
+
+export default ViewModeToggle

frontend/src/components/ui/accordion.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

frontend/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

frontend/src/components/ui/alert.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
+  ),
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  ),
+);
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

frontend/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

frontend/src/components/ui/avatar.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

frontend/src/components/ui/badge.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

frontend/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+  ),
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return <Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />;
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+  <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

frontend/src/components/ui/button.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

frontend/src/components/ui/calendar.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };

frontend/src/components/ui/card.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

frontend/src/components/ui/carousel.tsx

@@ -0,0 +1,224 @@
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
+  ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext],
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
+        {...props}
+      />
+    );
+  },
+);
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeft className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  },
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRight className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  },
+);
+CarouselNext.displayName = "CarouselNext";
+
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };

frontend/src/components/ui/chart.tsx

@@ -0,0 +1,303 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>;
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center",
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          })}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center",
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground")}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle };

frontend/src/components/ui/checkbox.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };