Upload 56 files

.dockerignore

@@ -0,0 +1,31 @@
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+.Python
+*.so
+*.egg
+*.egg-info
+dist
+build
+.venv
+venv
+env
+ENV
+node_modules
+frontend/node_modules
+frontend/dist
+.git
+.gitignore
+*.log
+.DS_Store
+.vscode
+.idea
+*.swp
+*.swo
+*~
+.env
+.env.local
+data/*.sqlite3
+*.db
+

.env

@@ -0,0 +1,6 @@
+AZURE_OPENAI_ENDPOINT=https://ezofisai.cognitiveservices.azure.com
+AZURE_OPENAI_API_KEY=DkCha4tDjyRZx1jROCBh05Iqr8d4T6HrITndWloNSu29t96kre7aJQQJ99BEACYeBjFXJ3w3AAAAACOGzHIR
+AZURE_OPENAI_DEPLOYMENT=gpt-4.1
+AZURE_OPENAI_API_VERSION=2025-01-01-preview
+
+

.gitignore

@@ -0,0 +1,14 @@
+# secrets
+.env
+*.env
+
+# local db/artifacts
+data/*.sqlite3
+data/*.db
+
+# python
+__pycache__/
+*.pyc
+.venv/
+
+

.huggingfaceignore

@@ -0,0 +1,38 @@
+# Files to ignore when uploading to Hugging Face
+node_modules/
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+*.so
+*.egg
+*.egg-info
+dist/
+build/
+.venv/
+venv/
+env/
+ENV/
+.git/
+.gitignore
+*.log
+.DS_Store
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.env
+.env.local
+data/*.sqlite3
+*.db
+frontend/node_modules/
+frontend/dist/
+frontend/.vite/
+*.csv
+samples/
+scripts/
+debug.log
+MSP SAMPLE MASTER Export.csv
+

Dockerfile

@@ -0,0 +1,50 @@
+# Multi-stage build for Hugging Face Spaces
+FROM node:18-alpine AS frontend-builder
+
+WORKDIR /app/frontend
+
+# Copy frontend files
+COPY frontend/package*.json ./
+RUN npm ci
+
+COPY frontend/ ./
+RUN npm run build
+
+# Python backend stage
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements and install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy backend code
+COPY backend1/ ./backend1/
+COPY ap_agent1/ ./ap_agent1/
+COPY data/ ./data/
+
+# Copy built frontend from builder stage
+COPY --from=frontend-builder /app/frontend/dist ./frontend/dist
+
+# Copy any additional files needed
+COPY scripts/ ./scripts/ 2>/dev/null || true
+
+# Create data directory if it doesn't exist
+RUN mkdir -p data
+
+# Expose port (Hugging Face Spaces uses port 7860 by default)
+EXPOSE 7860
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1
+ENV PORT=7860
+
+# Run the FastAPI app
+CMD ["python", "-m", "uvicorn", "backend1.main:app", "--host", "0.0.0.0", "--port", "7860"]
+

README.md

@@ -1,10 +1,158 @@
----
-title: APAgent Demo
-emoji: 📊
-colorFrom: blue
-colorTo: indigo
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# AP Agent Demo (Invoice ↔ PO Matching)
+
+User-friendly web app for Accounts Payable processing:
+- Upload **Invoice document** (PDF/DOCX/TXT) + **PO CSV**
+- Auto checks: **Invoice–PO match**, **back-order detection**, **duplicate invoice detection**, **supplier validation**
+- Persists **history** in local SQLite
+
+## Quickstart (FastAPI backend + React frontend)
+
+This repo uses:
+- **Backend API**: FastAPI (`backend1/main.py`)
+- **Frontend**: React + Tailwind + Framer Motion (`frontend/`)
+
+### One-command (Windows) ⭐
+
+If you're on Windows and want the easiest way to start everything:
+
+```powershell
+.\run-dev.ps1
+```
+
+This script starts:
+- the backend on the first free port from `8000, 8010, 8020, ...`
+- the frontend on `http://localhost:5173` with the correct API proxy target
+
+### Backend
+
+Set env vars:
+- `AZURE_OPENAI_ENDPOINT`
+- `AZURE_OPENAI_API_KEY`
+- `AZURE_OPENAI_DEPLOYMENT`
+- (optional) `AZURE_OPENAI_API_VERSION`
+
+Optional (real OCR for scanned invoices):
+- `AZURE_DOCUMENT_INTELLIGENCE_ENDPOINT`
+- `AZURE_DOCUMENT_INTELLIGENCE_KEY`
+- (optional) `AZURE_DOCUMENT_INTELLIGENCE_API_VERSION`
+
+Troubleshooting (common):
+- Make sure your frontend is talking to the **backend1** server (health shows `"service":"backend1"`). Old servers on `8010` may respond with just `{"ok":true}`.
+- If your backend is on port `8020`, run frontend with: `VITE_API_PROXY_TARGET=http://127.0.0.1:8020`
+
+Run:
+
+```bash
+python -m pip install -r requirements.txt
+python -m uvicorn backend1.main:app --reload --port 8010
+```
+
+> If you **can't use port 8000** on your machine: it's usually because another app/service is already listening on it.
+> In our environment we found a Windows service `EZ Capture OCREngineV1` (NSSM) running `uvicorn main:app --port 8000`.
+
+### Frontend
+
+In a new terminal:
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+Optional: point the frontend at a different API URL:
+- set `VITE_API_BASE_URL` (defaults to `http://127.0.0.1:8010` in dev; in production it uses relative `/api/*`)
+- or set `VITE_API_PROXY_TARGET` (controls the Vite dev-server proxy for `/api/*`)
+
+> Note: If port `8010` is taken on your machine, use any free port (e.g. `8020`) and set `VITE_API_BASE_URL` / `VITE_API_PROXY_TARGET` accordingly.
+
+## Single app (one server, one URL) ✅
+
+For a single "real web app" (frontend + backend served together):
+
+1) Build the frontend once:
+
+```bash
+cd frontend
+npm install
+npm run build
+cd ..
+```
+
+2) Run the server:
+
+```bash
+python -m pip install -r requirements.txt
+python -m uvicorn backend1.main:app --reload --port 8010
+```
+
+Open: `http://localhost:8010`
+
+## Hugging Face Spaces Deployment
+
+This app can be deployed to Hugging Face Spaces using Docker.
+
+### Setup
+
+1. Create a new Space on Hugging Face
+2. Select "Docker" as the SDK
+3. Push this repository to the Space
+4. Set environment variables in Space settings:
+   - `AZURE_OPENAI_ENDPOINT`
+   - `AZURE_OPENAI_API_KEY`
+   - `AZURE_OPENAI_DEPLOYMENT`
+   - `AZURE_OPENAI_API_VERSION` (optional)
+
+The Dockerfile will:
+- Build the React frontend
+- Install Python dependencies
+- Serve the app on port 7860
+
+## AI Agent (recommended)
+
+This demo supports an **AI-powered agent** mode for:
+- Better invoice field/line-item extraction
+- A model-driven final settlement decision (with rationale) using PO/history/supplier evidence
+
+### Enable
+
+- **UI**: Expand "AI Agent settings", toggle it on, choose **Azure OpenAI** or **OpenAI**, then type **YES** to allow model calls.
+- **Env var (OpenAI)**: set `OPENAI_API_KEY` before running the app
+- **Env var (Azure OpenAI)**: set `AZURE_OPENAI_ENDPOINT`, `AZURE_OPENAI_API_KEY` (optional: `AZURE_OPENAI_API_VERSION`)
+
+### Local .env (optional)
+
+Create a `.env` in the project root (optional) and fill in:
+- `AZURE_OPENAI_ENDPOINT`
+- `AZURE_OPENAI_API_KEY`
+- `AZURE_OPENAI_DEPLOYMENT`
+
+The app will fall back to rules-only mode if no API key is provided.
+
+## Feature rollout (only when you say YES)
+
+This demo is structured so capabilities can be enabled incrementally.
+
+Implemented now:
+- **Item 1**: Detailed match insights (line-level mismatch reasons + optional AI explanation)
+- **Item 2**: Backorder detection + monitoring (history-based remaining quantities + optional AI summary)
+
+## Data formats
+
+### PO CSV
+Expected columns (case-insensitive; extra columns are OK):
+- `po_number` (required)
+- `sku` (recommended)
+- `description` (required if `sku` missing)
+- `qty_ordered` (required)
+- `unit_price` (optional)
+
+The AI agent can handle **any column names** dynamically - it will intelligently identify PO number, SKU, description, quantity, etc. from your CSV structure.
+
+### Invoice
+Supported formats:
+- PDF (text extraction + optional OCR)
+- DOCX
+- TXT
+
+The AI agent extracts invoice fields and line items dynamically from any invoice format.

README_HF.md

@@ -0,0 +1,60 @@
+---
+title: AP Agent Demo
+emoji: 📄
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+license: mit
+---
+
+# AP Agent Demo - Invoice ↔ PO Matching
+
+AI-powered Accounts Payable processing application that automatically matches invoices to purchase orders, detects backorders, validates suppliers, and identifies duplicates.
+
+## Features
+
+- 🤖 **AI-Powered Matching**: Uses Azure OpenAI to dynamically match invoice lines to PO lines, handling any column names
+- 📊 **Backorder Tracking**: Automatically calculates remaining quantities per PO line
+- ✅ **Supplier Validation**: Validates suppliers against approved supplier lists
+- 🔍 **Duplicate Detection**: Detects duplicate invoices by file hash and business key
+- 📈 **History & Analytics**: Tracks processing history with search and filter capabilities
+- 🎨 **Modern UI**: Beautiful React frontend with real-time processing feedback
+
+## How to Use
+
+1. **Upload Invoice**: Upload a PDF, DOCX, or TXT invoice file
+2. **Upload PO File**: Upload a CSV or Excel file containing purchase order data
+3. **Review Results**: The AI agent will:
+   - Extract invoice fields and line items
+   - Match invoice lines to PO lines dynamically
+   - Calculate backorders
+   - Validate supplier
+   - Detect duplicates
+   - Provide approval decision (Approved/Partially Approved/Rejected)
+
+## Environment Variables
+
+Set these in your Hugging Face Space settings:
+
+- `AZURE_OPENAI_ENDPOINT`: Your Azure OpenAI endpoint
+- `AZURE_OPENAI_API_KEY`: Your Azure OpenAI API key
+- `AZURE_OPENAI_DEPLOYMENT`: Your Azure OpenAI deployment name
+- `AZURE_OPENAI_API_VERSION`: (Optional) API version, defaults to 2024-10-21
+
+Optional (for real OCR on scanned invoices):
+- `AZURE_DOCUMENT_INTELLIGENCE_ENDPOINT`: Azure Document Intelligence endpoint
+- `AZURE_DOCUMENT_INTELLIGENCE_KEY`: Azure Document Intelligence key
+
+## Technical Details
+
+- **Backend**: FastAPI (Python)
+- **Frontend**: React + TypeScript + Tailwind CSS
+- **AI**: Azure OpenAI (GPT-4)
+- **Database**: SQLite (persistent storage)
+- **Deployment**: Docker on Hugging Face Spaces
+
+## License
+
+MIT
+

ap_agent1/__init__.py

@@ -0,0 +1,11 @@
+"""
+AP Agent demo package.
+
+Core capabilities:
+- Parse invoice documents (PDF/DOCX/TXT) into text + best-effort structured fields/lines
+- Normalize PO CSV into a canonical schema
+- Compare invoice ↔ PO for settlement recommendation
+- Track backorders and detect duplicates via local SQLite history
+"""
+
+

ap_agent1/ai_agent.py

@@ -0,0 +1,581 @@
+from __future__ import annotations
+
+import json
+import os
+from typing import Any
+
+from ap_agent1.utils import norm_space, to_float
+from ap_agent1.config import MAX_HISTORY_INVOICES, MAX_INVOICE_TEXT_CHARS, MAX_PO_LINES
+from ap_agent1.document import png_bytes_to_data_url
+
+
+def _get_openai_client(*, provider: str, api_key: str | None, azure_endpoint: str | None, azure_api_version: str | None):
+    """
+    Lazy import so the app still runs without OpenAI installed (rules-only mode).
+    """
+    provider = (provider or "openai").strip().lower()
+    api_key = (api_key or os.environ.get("OPENAI_API_KEY") or "").strip()
+
+    if provider == "azure":
+        from openai import AzureOpenAI  # type: ignore
+
+        endpoint = (azure_endpoint or os.environ.get("AZURE_OPENAI_ENDPOINT") or "").strip()
+        api_version = (azure_api_version or os.environ.get("AZURE_OPENAI_API_VERSION") or "2024-10-21").strip()
+        if not endpoint:
+            raise ValueError("Azure OpenAI endpoint is required (AZURE_OPENAI_ENDPOINT).")
+        if not api_key:
+            raise ValueError("Azure OpenAI API key is required (AZURE_OPENAI_API_KEY).")
+        return AzureOpenAI(api_key=api_key, azure_endpoint=endpoint, api_version=api_version)
+
+    from openai import OpenAI  # type: ignore
+
+    return OpenAI(api_key=api_key)
+
+
+def _chat_json(
+    *,
+    client,
+    model: str,
+    prompt: str,
+    image_png_bytes: list[bytes] | None = None,
+) -> dict[str, Any]:
+    """
+    Call Chat Completions in JSON mode, with a compatibility fallback if response_format is unsupported.
+    """
+    content_parts: list[dict[str, Any]] = [{"type": "text", "text": prompt}]
+    for b in (image_png_bytes or [])[:3]:
+        content_parts.append({"type": "image_url", "image_url": {"url": png_bytes_to_data_url(b)}})
+
+    try:
+        resp = client.chat.completions.create(
+            model=model,
+            messages=[{"role": "user", "content": content_parts}],
+            response_format={"type": "json_object"},
+            temperature=0,
+        )
+    except TypeError:
+        # Some environments/SDK variants may not support response_format; rely on prompt-only JSON constraint.
+        resp = client.chat.completions.create(
+            model=model,
+            messages=[{"role": "user", "content": content_parts}],
+            temperature=0,
+        )
+
+    content = (resp.choices[0].message.content or "").strip()
+    return json.loads(content)
+
+
+def ai_enabled(*, provider: str, api_key: str | None = None, azure_endpoint: str | None = None) -> bool:
+    provider = (provider or "openai").strip().lower()
+    if provider == "azure":
+        k = (api_key or os.environ.get("AZURE_OPENAI_API_KEY") or "").strip()
+        ep = (azure_endpoint or os.environ.get("AZURE_OPENAI_ENDPOINT") or "").strip()
+        return bool(k and ep)
+    k = (api_key or os.environ.get("OPENAI_API_KEY") or "").strip()
+    return bool(k)
+
+
+def ai_extract_invoice(
+    *,
+    raw_text: str,
+    image_png_bytes: list[bytes] | None = None,
+    file_name: str | None,
+    model: str,
+    api_key: str | None = None,
+    provider: str = "openai",
+    azure_endpoint: str | None = None,
+    azure_api_version: str | None = None,
+) -> dict[str, Any]:
+    """
+    Uses an LLM to extract invoice header fields + line items from plain text and/or invoice images (vision).
+    Returns a dict with keys:
+      invoice_number, supplier, po_number, total_amount, currency, line_items[]
+    """
+    if provider.strip().lower() == "azure":
+        # AzureOpenAI uses AZURE_OPENAI_API_KEY by convention for env-based usage.
+        if api_key:
+            os.environ["AZURE_OPENAI_API_KEY"] = api_key
+    else:
+        if api_key:
+            os.environ["OPENAI_API_KEY"] = api_key
+
+    client = _get_openai_client(provider=provider, api_key=api_key, azure_endpoint=azure_endpoint, azure_api_version=azure_api_version)
+    text = (raw_text or "").strip()
+    if not text and not (image_png_bytes or []):
+        return {"invoice_number": "", "supplier": "", "po_number": "", "total_amount": "", "currency": "", "line_items": []}
+
+    prompt = f"""
+You are an Accounts Payable (AP) extraction agent.
+Extract structured fields from the invoice text below.
+
+Return ONLY valid JSON with this schema:
+{{
+  "invoice_number": string,
+  "supplier": string,
+  "po_number": string,
+  "total_amount": string,
+  "currency": string,
+  "line_items": [
+    {{
+      "sku": string,
+      "description": string,
+      "qty": number|null,
+      "unit_price": number|null,
+      "line_total": number|null
+    }}
+  ]
+}}
+
+Rules:
+- If a field is not present, use empty string (or null for numbers).
+- Normalize whitespace (no newlines inside fields).
+- Keep sku/description short and human-readable.
+- Do not invent items; only extract what is present.
+- Prefer the PO number that appears near 'PO', 'Purchase Order', etc.
+- For amounts, remove currency symbols and commas.
+
+Invoice filename: {file_name or ""}
+
+INVOICE TEXT (may be empty for scanned docs):
+\"\"\"{text[:12000]}\"\"\"
+""".strip()
+
+    data = _chat_json(client=client, model=model, prompt=prompt, image_png_bytes=list(image_png_bytes or []))
+
+    # light normalization
+    data["invoice_number"] = norm_space(str(data.get("invoice_number", "")))
+    data["supplier"] = norm_space(str(data.get("supplier", "")))
+    data["po_number"] = norm_space(str(data.get("po_number", "")))
+    data["total_amount"] = norm_space(str(data.get("total_amount", "")))
+    data["currency"] = norm_space(str(data.get("currency", "")))
+    items = data.get("line_items") or []
+    out_items = []
+    for it in items:
+        out_items.append(
+            {
+                "sku": norm_space(str(it.get("sku", "")))[:64],
+                "description": norm_space(str(it.get("description", "")))[:240],
+                "qty": to_float(it.get("qty")),
+                "unit_price": to_float(it.get("unit_price")),
+                "line_total": to_float(it.get("line_total")),
+            }
+        )
+    data["line_items"] = out_items[:80]
+    return data
+
+
+def ai_decide(
+    *,
+    model: str,
+    api_key: str | None,
+    evidence: dict[str, Any],
+    provider: str = "openai",
+    azure_endpoint: str | None = None,
+    azure_api_version: str | None = None,
+) -> dict[str, Any]:
+    """
+    Uses an LLM to make the final AP decision using evidence computed by tools.
+    Returns:
+      match_status: Matched|Review|Unmatched
+      duplicate: bool
+      supplier_status: Validated|Review|Unknown|Missing
+      alerts: [{level, message}]
+      rationale: string
+    """
+    if provider.strip().lower() == "azure":
+        if api_key:
+            os.environ["AZURE_OPENAI_API_KEY"] = api_key
+    else:
+        if api_key:
+            os.environ["OPENAI_API_KEY"] = api_key
+
+    client = _get_openai_client(provider=provider, api_key=api_key, azure_endpoint=azure_endpoint, azure_api_version=azure_api_version)
+
+    prompt = f"""
+You are an Accounts Payable (AP) settlement agent.
+Your job: decide whether the invoice matches the PO for payment settlement, detect duplicates, validate supplier confidence, and flag backorders.
+
+You are given EVIDENCE computed by the system (PO rows, matching results, duplicate checks, supplier fuzzy match, and backorder summary).
+
+Return ONLY valid JSON with this schema:
+{{
+  "match_status": "Matched" | "Review" | "Unmatched",
+  "duplicate": boolean,
+  "supplier_status": "Validated" | "Review" | "Unknown" | "Missing",
+  "alerts": [{{"level":"info"|"warning"|"error","message":string}}],
+  "rationale": string
+}}
+
+Decision guidance:
+- If duplicate is true: match_status should be "Review" (do not settle).
+- If any invoice lines are unmatched to PO: "Unmatched" unless there is very strong evidence it's a formatting/extraction issue → then "Review".
+- If quantities exceed remaining PO quantities or price variance is material (>2%): "Review".
+- If supplier_status is Unknown/Missing: at least "Review".
+- If everything aligns within tolerance: "Matched".
+
+EVIDENCE (JSON):
+{json.dumps(evidence, ensure_ascii=False)[:12000]}
+""".strip()
+
+    data = _chat_json(client=client, model=model, prompt=prompt)
+
+    # harden outputs
+    ms = str(data.get("match_status", "Review"))
+    if ms not in ("Matched", "Review", "Unmatched"):
+        ms = "Review"
+    ss = str(data.get("supplier_status", "Unknown"))
+    if ss not in ("Validated", "Review", "Unknown", "Missing"):
+        ss = "Unknown"
+    alerts = data.get("alerts") or []
+    safe_alerts = []
+    for a in alerts[:15]:
+        lvl = str(a.get("level", "info"))
+        if lvl not in ("info", "warning", "error"):
+            lvl = "info"
+        safe_alerts.append({"level": lvl, "message": norm_space(str(a.get("message", "")))[:240]})
+
+    return {
+        "match_status": ms,
+        "duplicate": bool(data.get("duplicate", False)),
+        "supplier_status": ss,
+        "alerts": safe_alerts,
+        "rationale": norm_space(str(data.get("rationale", "")))[:1200],
+    }
+
+
+def ai_match_insights(
+    *,
+    model: str,
+    api_key: str | None,
+    provider: str,
+    azure_endpoint: str | None,
+    azure_api_version: str | None,
+    evidence: dict[str, Any],
+) -> dict[str, Any]:
+    """
+    Produces short, user-facing insights about mismatches/backorders.
+    Returns JSON:
+      { "summary": string, "key_issues": [string], "suggested_action": string }
+    """
+    client = _get_openai_client(provider=provider, api_key=api_key, azure_endpoint=azure_endpoint, azure_api_version=azure_api_version)
+    prompt = f"""
+You are an AP agent assisting a human AP clerk.
+Given EVIDENCE (invoice↔PO comparison + backorders), generate a concise explanation.
+
+Return ONLY valid JSON with schema:
+{{
+  "summary": string,
+  "key_issues": [string],
+  "suggested_action": string
+}}
+
+Rules:
+- Keep it short and specific.
+- Only use evidence; do not invent.
+- If matched: suggest proceeding to payment.
+- If review/unmatched: suggest what to verify (qty/price/PO number/supplier/backorder).
+
+EVIDENCE (JSON):
+{json.dumps(evidence, ensure_ascii=False)[:12000]}
+""".strip()
+    data = _chat_json(client=client, model=model, prompt=prompt)
+    summary = norm_space(str(data.get("summary", "")))[:400]
+    issues = [norm_space(str(x))[:160] for x in (data.get("key_issues") or [])][:8]
+    action = norm_space(str(data.get("suggested_action", "")))[:200]
+    return {"summary": summary, "key_issues": issues, "suggested_action": action}
+
+
+def ai_ap_agent_process(
+    *,
+    deployment: str,
+    api_key: str,
+    azure_endpoint: str,
+    azure_api_version: str,
+    invoice_text: str,
+    invoice_images: list[bytes] | None = None,
+    file_name: str | None,
+    file_sha256: str | None,
+    po_rows: list[dict[str, Any]],
+    po_source_text: str | None = None,
+    supplier_master: list[dict[str, Any]],
+    history: dict[str, Any],
+    user_overrides: dict[str, Any] | None = None,
+) -> dict[str, Any]:
+    """
+    Single authoritative agent call for:
+    - Invoice extraction (header + line items)
+    - Invoice↔PO matching with detailed mismatch insights
+    - Backorder computation based on PO qty and historical receipts
+    - Duplicate invoice detection based on history (invoice number/supplier/file hash)
+    - Supplier validation against supplier_master
+
+    Returns a JSON object used directly by the UI and persisted to history.
+    """
+    client = _get_openai_client(
+        provider="azure",
+        api_key=api_key,
+        azure_endpoint=azure_endpoint,
+        azure_api_version=azure_api_version,
+    )
+
+    invoice_text = (invoice_text or "")[:MAX_INVOICE_TEXT_CHARS]
+    po_rows = (po_rows or [])[:MAX_PO_LINES]
+    po_source_text = (po_source_text or "")[:8000]
+    hist = history or {}
+    hist_invoices = (hist.get("invoices") or [])[:MAX_HISTORY_INVOICES]
+    hist_lines = hist.get("lines") or []
+
+    overrides = user_overrides or {}
+
+    prompt = f"""
+You are an autonomous Accounts Payable (AP) agent.
+You MUST do the entire processing based only on the evidence provided.
+
+Goals:
+1) Extract invoice header + line items from the invoice.
+2) Match invoice lines to the PO file’s line items (if provided) to support a payment decision.
+3) Detect duplicates using previously processed invoices (invoice number/supplier and file hash).
+4) Validate the supplier using the approved supplier list.
+5) Detect/compute backorders using PO ordered quantities vs quantities received in previous invoices.
+
+Return ONLY valid JSON with this schema:
+{{
+  "invoice": {{
+    "invoice_number": string,
+    "supplier": string,
+    "po_number": string,
+    "total_amount": string,
+    "currency": string
+  }},
+  "confidence_score": number|null,
+  "approval_decision": "Approved"|"Partially Approved"|"Rejected",
+  "supplier_validation": {{
+    "supplier_status": "Validated"|"Review"|"Unknown"|"Missing",
+    "supplier_validated": string,
+    "supplier_match_score": number|null,
+    "notes": string
+  }},
+  "duplicate": boolean,
+  "match_status": "Matched"|"Review"|"Unmatched",
+  "rationale": string,
+  "suggested_action": string,
+  "alerts": [{{"level":"info"|"warning"|"error","message":string}}],
+  "line_results": [
+    {{
+      "invoice_sku": string,
+      "invoice_description": string,
+      "invoice_qty": number|null,
+      "invoice_unit_price": number|null,
+      "invoice_line_total": number|null,
+      "po_sku": string,
+      "po_description": string,
+      "po_qty_ordered": number|null,
+      "po_unit_price": number|null,
+      "remaining_before": number|null,
+      "match_score": number|null,
+      "line_status": "Matched"|"Review"|"Unmatched",
+      "mismatch_reasons": string
+    }}
+  ],
+  "open_backorders": [
+    {{
+      "sku": string,
+      "description": string,
+      "qty_ordered": number,
+      "received_before": number,
+      "received_after": number,
+      "remaining": number
+    }}
+  ]
+}}
+
+Hard rules:
+- If you are not confident: use "Review" (not "Matched").
+- If duplicate=true: match_status must be "Review" and include an error alert.
+- Do NOT invent PO line items; only match against the PO line items provided.
+- If a line can't be matched: line_status="Unmatched" with mismatch_reasons.
+- Keep responses concise; no markdown; no extra keys.
+
+Decision rules:
+- You MUST set confidence_score as a float from 0.0 to 1.0 (or null if impossible).
+- You MUST set approval_decision to one of: Approved, Partially Approved, Rejected.
+- approval_decision MUST be consistent with confidence_score and the evidence:
+  - If match_status="Unmatched" → approval_decision MUST be "Rejected"
+  - If match_status="Matched" and confidence_score is high → "Approved"
+  - Otherwise → "Partially Approved" or "Rejected" depending on confidence_score and issues found.
+
+User-facing language rules (important):
+- You MUST NOT mention internal system words/keys in any user-facing fields (rationale, suggested_action, alerts.message, mismatch_reasons).
+  Do NOT use these terms: "PO_ROWS", "PO_SOURCE_TEXT", "SUPPLIER_MASTER", "HISTORY_LINES", "HISTORY_INVOICES", "USER_OVERRIDES".
+- Use plain AP language instead, e.g.:
+  - "approved supplier list" (instead of SUPPLIER_MASTER)
+  - "PO file" / "PO details" (instead of PO_ROWS/PO_SOURCE_TEXT)
+  - "previous invoices" (instead of HISTORY_*)
+
+Strict approval rules:
+- You MUST NOT return match_status="Matched" unless ALL are true:
+  1) invoice.invoice_number is present (non-empty)
+  2) invoice.po_number is present AND matches the PO number represented by the uploaded PO file
+  3) supplier_validation.supplier_status == "Validated"
+  4) PO provides item line items (descriptions/SKUs and quantities)
+  5) Every invoice line is matched to a PO line with consistent qty and unit price within tolerance
+- If the uploaded PO is a **PO summary only** (no item lines), you MUST set match_status="Review"
+  and include a warning alert explaining that PO line items are required to approve.
+
+INPUTS:
+- FILE_NAME: {file_name or ""}
+- FILE_SHA256: {file_sha256 or ""}
+- PO line items (JSON): {json.dumps(po_rows, ensure_ascii=False)[:12000]}
+- PO file preview (text snippet): {po_source_text}
+- Approved supplier list (JSON): {json.dumps(supplier_master, ensure_ascii=False)[:8000]}
+- Previous invoices (JSON): {json.dumps(hist_invoices, ensure_ascii=False)[:8000]}
+- Previous invoice line items (JSON): {json.dumps(hist_lines, ensure_ascii=False)[:8000]}
+- User edits (JSON): {json.dumps(overrides, ensure_ascii=False)[:8000]}
+
+INVOICE_TEXT:
+\"\"\"{invoice_text}\"\"\"
+""".strip()
+
+    data = _chat_json(client=client, model=deployment, prompt=prompt, image_png_bytes=list(invoice_images or []))
+
+    # Minimal normalization (not decision logic).
+    inv = data.get("invoice") or {}
+    inv_out = {
+        "invoice_number": norm_space(str(inv.get("invoice_number", "")))[:80],
+        "supplier": norm_space(str(inv.get("supplier", "")))[:120],
+        "po_number": norm_space(str(inv.get("po_number", "")))[:60],
+        "total_amount": norm_space(str(inv.get("total_amount", "")))[:40],
+        "currency": norm_space(str(inv.get("currency", "")))[:10],
+    }
+    data["invoice"] = inv_out
+
+    sv = data.get("supplier_validation") or {}
+    data["supplier_validation"] = {
+        "supplier_status": norm_space(str(sv.get("supplier_status", "Unknown"))),
+        "supplier_validated": norm_space(str(sv.get("supplier_validated", "")))[:120],
+        "supplier_match_score": to_float(sv.get("supplier_match_score")),
+        "notes": norm_space(str(sv.get("notes", "")))[:240],
+    }
+    data["confidence_score"] = to_float(data.get("confidence_score"))
+    # keep model's label but sanitize length
+    data["approval_decision"] = norm_space(str(data.get("approval_decision", "")))[:40]
+    data["rationale"] = norm_space(str(data.get("rationale", "")))[:1200]
+    data["suggested_action"] = norm_space(str(data.get("suggested_action", "")))[:240]
+    return data
+
+
+def ai_normalize_po_csv(
+    *,
+    deployment: str,
+    api_key: str,
+    azure_endpoint: str,
+    azure_api_version: str,
+    po_csv_text: str,
+) -> dict[str, Any]:
+    """
+    Agent-normalizes an arbitrary PO CSV (any columns) into a canonical schema we can store and match against.
+
+    Returns JSON:
+    {
+      "po_numbers": [string],
+      "po_header": {
+        "po_number": string,
+        "supplier": string,
+        "po_amount": number|null,
+        "currency": string
+      },
+      "po_lines": [
+        {"po_number": string, "sku": string, "description": string, "qty_ordered": number, "unit_price": number|null, "supplier": string|null}
+      ]
+    }
+    """
+    client = _get_openai_client(
+        provider="azure",
+        api_key=api_key,
+        azure_endpoint=azure_endpoint,
+        azure_api_version=azure_api_version,
+    )
+
+    text = (po_csv_text or "").strip()
+    # Keep it bounded: header + first ~200 lines is usually enough.
+    lines = text.splitlines()
+    text = "\n".join(lines[:201])[:12000]
+
+    prompt = f"""
+You are an AP agent. Normalize a Purchase Order (PO) table export into a canonical line-item format.
+The input may come from a CSV or from an Excel file with multiple sheets (sheet separators may be present).
+Columns can have ANY names. You must infer which columns represent:
+- PO number
+- Item identifier (SKU/material/part) and/or description
+- Quantity ordered
+- Unit price (optional)
+- Supplier (optional)
+
+Return ONLY valid JSON with this schema:
+{{
+  "po_numbers": [string],
+  "po_header": {{
+    "po_number": string,
+    "supplier": string,
+    "po_amount": number|null,
+    "currency": string
+  }},
+  "po_lines": [
+    {{
+      "po_number": string,
+      "sku": string,
+      "description": string,
+      "qty_ordered": number,
+      "unit_price": number|null,
+      "supplier": string|null
+    }}
+  ]
+}}
+
+Rules:
+- If SKU is missing, keep it empty string and rely on description.
+- qty_ordered must be numeric for PO_LINES; if missing/invalid, omit that line (do not invent).
+- Do NOT invent data that isn't present.
+- If there are multiple PO numbers, include them all.
+- Keep description short (<= 240 chars).
+
+PO CSV (sample/truncated):
+\"\"\"{text}\"\"\"
+""".strip()
+
+    data = _chat_json(client=client, model=deployment, prompt=prompt)
+
+    po_numbers = [norm_space(str(x)) for x in (data.get("po_numbers") or []) if str(x).strip()]
+    po_header = data.get("po_header") or {}
+    po_lines_in = data.get("po_lines") or []
+    po_lines_out = []
+    for r in po_lines_in:
+        po_lines_out.append(
+            {
+                "po_number": norm_space(str(r.get("po_number", "")))[:60],
+                "sku": norm_space(str(r.get("sku", "")))[:64],
+                "description": norm_space(str(r.get("description", "")))[:240],
+                "qty_ordered": to_float(r.get("qty_ordered")) or 0.0,
+                "unit_price": to_float(r.get("unit_price")),
+                "supplier": (norm_space(str(r.get("supplier", "")))[:120] or None),
+            }
+        )
+
+    # Drop invalid / missing PO number / qty <= 0
+    po_lines_out = [r for r in po_lines_out if r["po_number"] and (r["qty_ordered"] is not None) and float(r["qty_ordered"]) > 0]
+    if not po_numbers:
+        po_numbers = sorted({r["po_number"] for r in po_lines_out})
+
+    header_out = {
+        "po_number": norm_space(str(po_header.get("po_number", "")))[:60],
+        "supplier": norm_space(str(po_header.get("supplier", "")))[:120],
+        "po_amount": to_float(po_header.get("po_amount")),
+        "currency": norm_space(str(po_header.get("currency", "")))[:10],
+    }
+    # If header po_number exists, include it.
+    if header_out["po_number"] and header_out["po_number"] not in po_numbers:
+        po_numbers = [header_out["po_number"]] + po_numbers
+
+    return {"po_numbers": po_numbers, "po_header": header_out, "po_lines": po_lines_out}
+
+

ap_agent1/config.py

@@ -0,0 +1,23 @@
+"""
+Central configuration for the AP Agent demo.
+
+User requirement:
+- Model/deployment name must live in code (not user input).
+- AP decisions should be agent-driven (no rule-based decision engine).
+
+Azure OpenAI settings:
+- Credentials and endpoint should be provided via env vars or UI fields.
+"""
+
+# Azure OpenAI deployment name (this is the "model" identifier for Azure).
+AZURE_OPENAI_DEPLOYMENT = "gpt-4o-mini"
+
+# Default API version for Azure OpenAI
+AZURE_OPENAI_API_VERSION = "2024-10-21"
+
+# Safety limit: trim long inputs to keep requests reasonable.
+MAX_INVOICE_TEXT_CHARS = 12000
+MAX_HISTORY_INVOICES = 25
+MAX_PO_LINES = 200
+
+

ap_agent1/db.py

@@ -0,0 +1,464 @@
+from __future__ import annotations
+
+import sqlite3
+from datetime import datetime, timezone
+from pathlib import Path
+from typing import Any
+
+from uuid import uuid4
+
+
+DB_PATH = "data/ap_agent.sqlite3"
+
+
+def _utc_now_iso() -> str:
+    return datetime.now(timezone.utc).isoformat(timespec="seconds")
+
+
+def init_db(db_path: str = DB_PATH) -> None:
+    Path(db_path).parent.mkdir(parents=True, exist_ok=True)
+    conn = sqlite3.connect(db_path)
+    conn.execute("PRAGMA foreign_keys = ON;")
+
+    conn.executescript(
+        """
+        CREATE TABLE IF NOT EXISTS invoices (
+          id TEXT PRIMARY KEY,
+          processed_at TEXT NOT NULL,
+          invoice_number TEXT,
+          supplier TEXT,
+          supplier_validated TEXT,
+          supplier_match_score REAL,
+          supplier_status TEXT,
+          po_number TEXT,
+          invoice_total REAL,
+          currency TEXT,
+          match_status TEXT NOT NULL,
+          match_score REAL,
+          processing_ms INTEGER,
+          extractions_count INTEGER,
+          approval_decision TEXT,
+          rule_match_status TEXT,
+          rule_match_score REAL,
+          decision_engine TEXT,
+          ai_model TEXT,
+          ai_rationale TEXT,
+          override_reason TEXT,
+          open_backorders_count INTEGER NOT NULL DEFAULT 0,
+          duplicate_flag INTEGER NOT NULL DEFAULT 0,
+          file_name TEXT,
+          file_sha256 TEXT,
+          raw_text TEXT
+        );
+
+        CREATE TABLE IF NOT EXISTS invoice_lines (
+          id TEXT PRIMARY KEY,
+          invoice_id TEXT NOT NULL,
+          sku TEXT,
+          description TEXT,
+          qty REAL,
+          unit_price REAL,
+          line_total REAL,
+          matched_po_line_id TEXT,
+          match_score REAL,
+          FOREIGN KEY(invoice_id) REFERENCES invoices(id) ON DELETE CASCADE
+        );
+
+        CREATE TABLE IF NOT EXISTS po_lines (
+          id TEXT PRIMARY KEY,
+          po_number TEXT NOT NULL,
+          sku TEXT,
+          description TEXT,
+          qty_ordered REAL NOT NULL,
+          unit_price REAL,
+          supplier TEXT,
+          source_hash TEXT
+        );
+
+        CREATE INDEX IF NOT EXISTS idx_invoices_invoice_number ON invoices(invoice_number);
+        CREATE INDEX IF NOT EXISTS idx_invoices_po_number ON invoices(po_number);
+        CREATE INDEX IF NOT EXISTS idx_invoice_lines_invoice_id ON invoice_lines(invoice_id);
+        CREATE INDEX IF NOT EXISTS idx_po_lines_po_number ON po_lines(po_number);
+        -- NOTE: do not enforce uniqueness on file_sha256; duplicates are agent-detected and recorded for audit.
+        """
+    )
+
+    _migrate(conn)
+    conn.commit()
+    conn.close()
+
+
+def get_conn(db_path: str = DB_PATH) -> sqlite3.Connection:
+    conn = sqlite3.connect(db_path, check_same_thread=False)
+    conn.row_factory = sqlite3.Row
+    conn.execute("PRAGMA foreign_keys = ON;")
+    return conn
+
+
+def _col_exists(conn: sqlite3.Connection, table: str, col: str) -> bool:
+    rows = conn.execute(f"PRAGMA table_info({table})").fetchall()
+    return any(r[1] == col for r in rows)
+
+
+def _migrate(conn: sqlite3.Connection) -> None:
+    """
+    Best-effort additive migrations for existing local DBs.
+    """
+    # invoices
+    for col, ddl in [
+        ("rule_match_status", "ALTER TABLE invoices ADD COLUMN rule_match_status TEXT"),
+        ("rule_match_score", "ALTER TABLE invoices ADD COLUMN rule_match_score REAL"),
+        ("decision_engine", "ALTER TABLE invoices ADD COLUMN decision_engine TEXT"),
+        ("ai_model", "ALTER TABLE invoices ADD COLUMN ai_model TEXT"),
+        ("ai_rationale", "ALTER TABLE invoices ADD COLUMN ai_rationale TEXT"),
+        ("override_reason", "ALTER TABLE invoices ADD COLUMN override_reason TEXT"),
+        ("processing_ms", "ALTER TABLE invoices ADD COLUMN processing_ms INTEGER"),
+        ("extractions_count", "ALTER TABLE invoices ADD COLUMN extractions_count INTEGER"),
+        ("approval_decision", "ALTER TABLE invoices ADD COLUMN approval_decision TEXT"),
+    ]:
+        if not _col_exists(conn, "invoices", col):
+            conn.execute(ddl)
+
+    # Drop legacy unique index on file_sha256 if present (agent decides duplicates).
+    conn.execute("DROP INDEX IF EXISTS idx_invoices_file_sha256")
+
+
+def _new_id(prefix: str = "") -> str:
+    return f"{prefix}{uuid4().hex[:12]}"
+
+
+def clear_all(conn: sqlite3.Connection) -> None:
+    conn.executescript(
+        """
+        DELETE FROM invoice_lines;
+        DELETE FROM invoices;
+        DELETE FROM po_lines;
+        """
+    )
+    conn.commit()
+
+
+def invoice_exists_by_sha(conn: sqlite3.Connection, file_sha256: str | None) -> bool:
+    if not file_sha256:
+        return False
+    row = conn.execute("SELECT 1 FROM invoices WHERE file_sha256 = ? LIMIT 1", (file_sha256,)).fetchone()
+    return row is not None
+
+
+def invoice_exists_by_business_key(conn: sqlite3.Connection, invoice_number: str | None, supplier: str | None) -> bool:
+    if not invoice_number:
+        return False
+    row = conn.execute(
+        "SELECT 1 FROM invoices WHERE lower(invoice_number)=lower(?) AND lower(coalesce(supplier,''))=lower(coalesce(?,'')) LIMIT 1",
+        (invoice_number, supplier),
+    ).fetchone()
+    return row is not None
+
+
+def insert_invoice_run(
+    conn: sqlite3.Connection,
+    *,
+    invoice_number: str | None,
+    supplier: str | None,
+    supplier_validated: str | None,
+    supplier_match_score: float | None,
+    supplier_status: str,
+    po_number: str,
+    invoice_total: float | None,
+    currency: str | None,
+    match_status: str,
+    match_score: float | None,
+    processing_ms: int | None,
+    extractions_count: int | None,
+    approval_decision: str | None,
+    rule_match_status: str | None = None,
+    rule_match_score: float | None = None,
+    decision_engine: str | None = None,
+    ai_model: str | None = None,
+    ai_rationale: str | None = None,
+    override_reason: str | None = None,
+    open_backorders_count: int,
+    duplicate_flag: bool,
+    file_name: str | None,
+    file_sha256: str | None,
+    raw_text: str | None,
+    invoice_lines: list[dict[str, Any]],
+) -> str:
+    invoice_id = _new_id("inv_")
+    conn.execute(
+        """
+        INSERT INTO invoices(
+          id, processed_at, invoice_number, supplier, supplier_validated, supplier_match_score, supplier_status,
+          po_number, invoice_total, currency, match_status, match_score,
+          processing_ms, extractions_count,
+          approval_decision,
+          rule_match_status, rule_match_score, decision_engine, ai_model, ai_rationale,
+          override_reason,
+          open_backorders_count, duplicate_flag,
+          file_name, file_sha256, raw_text
+        ) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)
+        """,
+        (
+            invoice_id,
+            _utc_now_iso(),
+            invoice_number,
+            supplier,
+            supplier_validated,
+            supplier_match_score,
+            supplier_status,
+            po_number,
+            invoice_total,
+            currency,
+            match_status,
+            match_score,
+            processing_ms,
+            extractions_count,
+            approval_decision,
+            rule_match_status,
+            rule_match_score,
+            decision_engine,
+            ai_model,
+            ai_rationale,
+            override_reason,
+            int(open_backorders_count),
+            1 if duplicate_flag else 0,
+            file_name,
+            file_sha256,
+            raw_text,
+        ),
+    )
+
+    for line in invoice_lines:
+        conn.execute(
+            """
+            INSERT INTO invoice_lines(
+              id, invoice_id, sku, description, qty, unit_price, line_total, matched_po_line_id, match_score
+            ) VALUES (?,?,?,?,?,?,?,?,?)
+            """,
+            (
+                _new_id("line_"),
+                invoice_id,
+                line.get("sku") or None,
+                line.get("description") or None,
+                line.get("qty"),
+                line.get("unit_price"),
+                line.get("line_total"),
+                line.get("matched_po_line_id"),
+                line.get("match_score"),
+            ),
+        )
+
+    conn.commit()
+    return invoice_id
+
+
+def list_invoices(conn: sqlite3.Connection) -> list[dict[str, Any]]:
+    rows = conn.execute(
+        """
+        SELECT
+          id,
+          processed_at,
+          invoice_number,
+          supplier,
+          supplier_status,
+          po_number,
+          match_status,
+          match_score,
+          processing_ms,
+          extractions_count,
+          approval_decision,
+          open_backorders_count,
+          duplicate_flag,
+          decision_engine,
+          ai_model,
+          override_reason,
+          file_name
+        FROM invoices
+        ORDER BY processed_at DESC
+        """
+    ).fetchall()
+    return [dict(r) for r in rows]
+
+
+def load_invoice_detail(conn: sqlite3.Connection, invoice_id: str) -> dict[str, Any]:
+    inv = conn.execute("SELECT * FROM invoices WHERE id = ?", (invoice_id,)).fetchone()
+    lines = conn.execute("SELECT * FROM invoice_lines WHERE invoice_id = ? ORDER BY id", (invoice_id,)).fetchall()
+    return {"invoice": dict(inv) if inv else {}, "lines": [dict(r) for r in lines]}
+
+
+def search_invoices(
+    conn: sqlite3.Connection,
+    *,
+    limit: int = 100,
+    invoice_number: str | None = None,
+    supplier: str | None = None,
+    po_number: str | None = None,
+    match_status: str | None = None,
+    duplicate_flag: int | None = None,
+    date_from: str | None = None,  # ISO prefix accepted
+    date_to: str | None = None,
+) -> list[dict[str, Any]]:
+    where = []
+    params: list[Any] = []
+
+    if invoice_number:
+        where.append("lower(coalesce(invoice_number,'')) LIKE lower(?)")
+        params.append(f"%{invoice_number.strip()}%")
+    if supplier:
+        where.append("lower(coalesce(supplier,'')) LIKE lower(?)")
+        params.append(f"%{supplier.strip()}%")
+    if po_number:
+        where.append("lower(coalesce(po_number,'')) LIKE lower(?)")
+        params.append(f"%{po_number.strip()}%")
+    if match_status:
+        where.append("match_status = ?")
+        params.append(match_status.strip())
+    if duplicate_flag is not None:
+        where.append("duplicate_flag = ?")
+        params.append(int(duplicate_flag))
+    if date_from:
+        where.append("processed_at >= ?")
+        params.append(date_from.strip())
+    if date_to:
+        where.append("processed_at <= ?")
+        params.append(date_to.strip())
+
+    where_sql = ("WHERE " + " AND ".join(where)) if where else ""
+    rows = conn.execute(
+        f"""
+        SELECT
+          id,
+          processed_at,
+          invoice_number,
+          supplier,
+          po_number,
+          invoice_total,
+          currency,
+          supplier_status,
+          match_status,
+          match_score,
+          processing_ms,
+          extractions_count,
+          approval_decision,
+          open_backorders_count,
+          duplicate_flag,
+          decision_engine,
+          ai_model,
+          override_reason,
+          file_name
+        FROM invoices
+        {where_sql}
+        ORDER BY processed_at DESC
+        LIMIT ?
+        """,
+        (*params, int(limit)),
+    ).fetchall()
+    return [dict(r) for r in rows]
+
+
+def get_po_lines(conn: sqlite3.Connection, po_number: str) -> list[dict[str, Any]]:
+    rows = conn.execute(
+        """
+        SELECT id, po_number, sku, description, qty_ordered, unit_price, supplier
+        FROM po_lines
+        WHERE po_number = ?
+        ORDER BY id
+        """,
+        (po_number,),
+    ).fetchall()
+    return [dict(r) for r in rows]
+
+
+def get_received_qty_by_po(conn: sqlite3.Connection, po_number: str) -> dict[tuple[str, str], float]:
+    """
+    Returns map[(po_number, sku_norm_or_desc_norm)] -> received_qty summed across all saved invoices.
+    """
+    rows = conn.execute(
+        """
+        SELECT
+          i.po_number AS po_number,
+          lower(coalesce(l.sku,'')) AS sku_l,
+          lower(coalesce(l.description,'')) AS desc_l,
+          sum(coalesce(l.qty, 0)) AS received_qty
+        FROM invoices i
+        JOIN invoice_lines l ON l.invoice_id = i.id
+        WHERE i.po_number = ?
+          AND i.duplicate_flag = 0
+        GROUP BY i.po_number, sku_l, desc_l
+        """,
+        (po_number,),
+    ).fetchall()
+    out: dict[tuple[str, str], float] = {}
+    for r in rows:
+        key = (r["po_number"], r["sku_l"] or r["desc_l"])
+        out[key] = float(r["received_qty"] or 0.0)
+    return out
+
+
+def get_received_qty_by_po_line_id(conn: sqlite3.Connection, po_number: str) -> dict[str, float]:
+    """
+    Returns map[po_line_id] -> received_qty summed across all saved invoices for a PO.
+    Prefers deterministic matching via invoice_lines.matched_po_line_id.
+    Excludes duplicates (invoices.duplicate_flag=1).
+    """
+    rows = conn.execute(
+        """
+        SELECT
+          l.matched_po_line_id AS po_line_id,
+          sum(coalesce(l.qty, 0)) AS received_qty
+        FROM invoices i
+        JOIN invoice_lines l ON l.invoice_id = i.id
+        WHERE i.po_number = ?
+          AND i.duplicate_flag = 0
+          AND l.matched_po_line_id IS NOT NULL
+          AND l.matched_po_line_id != ''
+        GROUP BY l.matched_po_line_id
+        """,
+        (po_number,),
+    ).fetchall()
+    out: dict[str, float] = {}
+    for r in rows:
+        out[str(r["po_line_id"])] = float(r["received_qty"] or 0.0)
+    return out
+
+
+def get_history_context(conn: sqlite3.Connection, *, po_number: str, supplier: str | None = None, limit: int = 25) -> dict[str, Any]:
+    """
+    Fetches prior invoices + their lines for agent context.
+    This function does NOT make any decisions; it only provides evidence.
+    """
+    where = "po_number = ?"
+    params: list[Any] = [po_number]
+    if supplier:
+        where += " AND lower(coalesce(supplier,'')) = lower(?)"
+        params.append(supplier)
+
+    inv_rows = conn.execute(
+        f"""
+        SELECT id, processed_at, invoice_number, supplier, po_number, invoice_total, file_sha256, match_status, decision_engine
+        FROM invoices
+        WHERE {where}
+        ORDER BY processed_at DESC
+        LIMIT ?
+        """,
+        (*params, int(limit)),
+    ).fetchall()
+    invoices = [dict(r) for r in inv_rows]
+
+    inv_ids = [r["id"] for r in invoices]
+    lines: list[dict[str, Any]] = []
+    if inv_ids:
+        q_marks = ",".join(["?"] * len(inv_ids))
+        line_rows = conn.execute(
+            f"""
+            SELECT invoice_id, sku, description, qty, unit_price, line_total, matched_po_line_id
+            FROM invoice_lines
+            WHERE invoice_id IN ({q_marks})
+            """,
+            inv_ids,
+        ).fetchall()
+        lines = [dict(r) for r in line_rows]
+
+    return {"invoices": invoices, "lines": lines}
+
+

ap_agent1/document.py

@@ -0,0 +1,159 @@
+from __future__ import annotations
+
+import base64
+import io
+import os
+import time
+from typing import Any
+
+import fitz  # PyMuPDF
+import requests
+from pdfminer.high_level import extract_text
+
+from ap_agent1.config import MAX_INVOICE_TEXT_CHARS
+from ap_agent1.utils import norm_space
+
+
+def _pdf_to_png_pages(pdf_bytes: bytes, *, max_pages: int = 3, zoom: float = 2.0) -> list[bytes]:
+    doc = fitz.open(stream=pdf_bytes, filetype="pdf")
+    out: list[bytes] = []
+    for i in range(min(max_pages, doc.page_count)):
+        page = doc.load_page(i)
+        mat = fitz.Matrix(zoom, zoom)
+        pix = page.get_pixmap(matrix=mat, alpha=False)
+        out.append(pix.tobytes("png"))
+    doc.close()
+    return out
+
+
+def _azure_di_read(*, data: bytes, file_name: str) -> dict[str, Any] | None:
+    """
+    OCR via Azure Document Intelligence (prebuilt-read).
+
+    Requires:
+      AZURE_DOCUMENT_INTELLIGENCE_ENDPOINT
+      AZURE_DOCUMENT_INTELLIGENCE_KEY
+
+    Returns:
+      {
+        "provider": "azure_document_intelligence",
+        "model": "prebuilt-read",
+        "text": "...",
+        "result": {...raw analyzeResult...}
+      }
+    """
+    endpoint = (os.environ.get("AZURE_DOCUMENT_INTELLIGENCE_ENDPOINT") or "").strip().rstrip("/")
+    key = (os.environ.get("AZURE_DOCUMENT_INTELLIGENCE_KEY") or "").strip()
+    if not endpoint or not key:
+        return None
+
+    # NOTE: API versions change; this is a commonly supported recent version for the /documentintelligence path.
+    api_version = (os.environ.get("AZURE_DOCUMENT_INTELLIGENCE_API_VERSION") or "2024-11-30").strip()
+
+    url = f"{endpoint}/documentintelligence/documentModels/prebuilt-read:analyze?api-version={api_version}"
+    headers = {
+        "Ocp-Apim-Subscription-Key": key,
+        # service will infer from bytes; keep it generic
+        "Content-Type": "application/octet-stream",
+    }
+
+    resp = requests.post(url, headers=headers, data=data, timeout=30)
+    if resp.status_code not in (202, 200):
+        # Return a small error payload for UI/debug (do not throw).
+        return {
+            "provider": "azure_document_intelligence",
+            "model": "prebuilt-read",
+            "error": f"OCR request failed ({resp.status_code})",
+            "error_body": (resp.text or "")[:400],
+        }
+
+    # Synchronous responses may include JSON directly; async uses Operation-Location.
+    if resp.status_code == 200:
+        payload = resp.json()
+        analyze = payload.get("analyzeResult") or payload
+        content = analyze.get("content") or ""
+        return {"provider": "azure_document_intelligence", "model": "prebuilt-read", "text": norm_space(str(content)), "result": analyze}
+
+    op_url = resp.headers.get("operation-location") or resp.headers.get("Operation-Location") or ""
+    if not op_url:
+        return {"provider": "azure_document_intelligence", "model": "prebuilt-read", "error": "Missing Operation-Location header"}
+
+    # Poll until completion (bounded).
+    deadline = time.time() + 25.0
+    while time.time() < deadline:
+        r2 = requests.get(op_url, headers={"Ocp-Apim-Subscription-Key": key}, timeout=15)
+        try:
+            j = r2.json()
+        except Exception:
+            j = {}
+        status = str(j.get("status") or "").lower()
+        if status in ("succeeded", "failed"):
+            if status == "failed":
+                return {
+                    "provider": "azure_document_intelligence",
+                    "model": "prebuilt-read",
+                    "error": "OCR failed",
+                    "result": j,
+                }
+            analyze = j.get("analyzeResult") or {}
+            content = analyze.get("content") or ""
+            return {"provider": "azure_document_intelligence", "model": "prebuilt-read", "text": norm_space(str(content)), "result": analyze}
+        time.sleep(0.6)
+
+    return {"provider": "azure_document_intelligence", "model": "prebuilt-read", "error": "OCR timeout"}
+
+
+def extract_invoice_inputs(file_name: str, data: bytes) -> dict[str, Any]:
+    """
+    Produces agent-ready inputs:
+    - invoice_text: best-effort extracted text (may be empty for scanned docs)
+    - invoice_images: list of PNG bytes for vision grounding (PDF pages or the image itself)
+    """
+    name = (file_name or "").lower()
+
+    # Images: pass through directly + OCR if configured.
+    if name.endswith((".png", ".jpg", ".jpeg", ".webp")):
+        ocr = _azure_di_read(data=data, file_name=file_name) or None
+        txt = norm_space(str((ocr or {}).get("text") or ""))[:MAX_INVOICE_TEXT_CHARS]
+        return {"invoice_text": txt, "invoice_images": [data], "ocr": ocr}
+
+    # PDF: extract embedded text + also render pages to images; if embedded text is weak, OCR.
+    if name.endswith(".pdf"):
+        # Reduce latency by limiting number of rendered pages / zoom; configurable via env.
+        try:
+            max_pages = int((os.environ.get("AP_INVOICE_IMAGE_PAGES") or "2").strip())
+        except Exception:
+            max_pages = 2
+        try:
+            zoom = float((os.environ.get("AP_INVOICE_IMAGE_ZOOM") or "1.6").strip())
+        except Exception:
+            zoom = 1.6
+
+        try:
+            txt = extract_text(io.BytesIO(data)) or ""
+        except Exception:
+            txt = ""
+        txt = norm_space(txt)[:MAX_INVOICE_TEXT_CHARS]
+
+        # If text is tiny, it's likely scanned → rely on images.
+        pages = _pdf_to_png_pages(data, max_pages=max_pages, zoom=zoom)
+        ocr: dict[str, Any] | None = None
+        if len(txt) < 200:
+            # Prefer real OCR for scanned docs (if configured).
+            ocr = _azure_di_read(data=data, file_name=file_name) or None
+            ocr_txt = norm_space(str((ocr or {}).get("text") or ""))[:MAX_INVOICE_TEXT_CHARS]
+            if ocr_txt:
+                txt = ocr_txt
+            else:
+                txt = ""
+        return {"invoice_text": txt, "invoice_images": pages, "ocr": ocr}
+
+    # DOCX/TXT (optional): keep existing behavior via text-only.
+    return {"invoice_text": "", "invoice_images": [], "ocr": None}
+
+
+def png_bytes_to_data_url(png_bytes: bytes) -> str:
+    b64 = base64.b64encode(png_bytes).decode("ascii")
+    return f"data:image/png;base64,{b64}"
+
+

ap_agent1/invoice.py

@@ -0,0 +1,157 @@
+from __future__ import annotations
+
+import io
+import re
+from dataclasses import dataclass
+from typing import Any
+
+from docx import Document
+from pdfminer.high_level import extract_text
+
+from ap_agent1.utils import norm_space, to_float
+
+
+_RE_INV_NO = re.compile(r"(invoice\s*(number|no|#)\s*[:\-]?\s*)(?P<val>[A-Z0-9][A-Z0-9\-\/]{2,})", re.IGNORECASE)
+_RE_PO_NO = re.compile(r"(po|p\.o\.|purchase\s*order)\s*(number|no|#)?\s*[:\-]?\s*(?P<val>[A-Z0-9][A-Z0-9\-\/]{2,})", re.IGNORECASE)
+_RE_TOTAL = re.compile(
+    r"(?:(total\s*(amount)?|amount\s*due|grand\s*total)\s*[:\-]?\s*)(?P<val>\$?\s*\d{1,3}(?:,\d{3})*(?:\.\d{2})?)",
+    re.IGNORECASE,
+)
+
+
+def extract_invoice_text(file_name: str, data: bytes) -> str:
+    name = (file_name or "").lower()
+    if name.endswith(".pdf"):
+        return norm_space(extract_text(io.BytesIO(data)))
+    if name.endswith(".docx"):
+        doc = Document(io.BytesIO(data))
+        text = "\n".join(p.text for p in doc.paragraphs)
+        return norm_space(text)
+    # txt fallback
+    try:
+        return norm_space(data.decode("utf-8", errors="ignore"))
+    except Exception:
+        return norm_space(data.decode(errors="ignore"))
+
+
+def _guess_supplier(text: str) -> str:
+    # Heuristic: first non-trivial line, excluding common headers.
+    lines = [l.strip() for l in text.splitlines() if l.strip()]
+    for l in lines[:12]:
+        if len(l) < 3:
+            continue
+        if re.search(r"\b(invoice|bill\s*to|ship\s*to|purchase\s*order|po\s*#|amount\s*due)\b", l, re.IGNORECASE):
+            continue
+        # Avoid lines that are mostly numbers.
+        if sum(ch.isdigit() for ch in l) > max(3, len(l) // 2):
+            continue
+        return l[:120]
+    return ""
+
+
+def parse_invoice_fields(text: str) -> dict[str, str]:
+    text_n = text or ""
+    inv = ""
+    m = _RE_INV_NO.search(text_n)
+    if m:
+        inv = m.group("val").strip()
+
+    po = ""
+    m = _RE_PO_NO.search(text_n)
+    if m:
+        po = m.group("val").strip()
+
+    total = ""
+    m = _RE_TOTAL.search(text_n)
+    if m:
+        total = m.group("val").strip()
+
+    currency = "USD" if "$" in total else ""
+    supplier = _guess_supplier(text_n)
+
+    return {
+        "invoice_number": inv,
+        "po_number": po,
+        "total_amount": total,
+        "currency": currency,
+        "supplier": supplier,
+    }
+
+
+def _parse_line_by_trailing_numbers(line: str) -> dict[str, Any] | None:
+    """
+    Best-effort extractor for common invoice line formats.
+
+    We look for at least 2 numeric tokens at the end: qty and unit_price/total.
+    """
+    raw = line.strip()
+    if len(raw) < 6:
+        return None
+
+    # Strip currency symbols and commas for numeric detection.
+    clean = raw.replace("$", "").replace("₹", "").replace(",", "")
+    tokens = clean.split()
+
+    num_idx = []
+    for i, t in enumerate(tokens):
+        if re.fullmatch(r"\d+(?:\.\d+)?", t):
+            num_idx.append(i)
+
+    if len(num_idx) < 2:
+        return None
+
+    # Take last numeric tokens as qty/unit/total candidates.
+    last_nums = num_idx[-3:] if len(num_idx) >= 3 else num_idx[-2:]
+    nums = [tokens[i] for i in last_nums]
+
+    qty = to_float(nums[0]) if len(nums) == 3 else to_float(nums[0])
+    unit_price = to_float(nums[1]) if len(nums) == 3 else None
+    line_total = to_float(nums[2]) if len(nums) == 3 else to_float(nums[1])
+
+    if qty is None or qty <= 0:
+        return None
+
+    # Build sku/desc from non-numeric prefix.
+    prefix_end = last_nums[0]
+    prefix_tokens = raw.split()[:prefix_end]
+    if not prefix_tokens:
+        return None
+
+    sku = prefix_tokens[0]
+    desc = " ".join(prefix_tokens[1:]).strip()
+    if not desc:
+        desc = sku
+
+    # Reject header lines.
+    if re.search(r"\b(qty|quantity|amount|total|unit\s*price|price)\b", raw, re.IGNORECASE):
+        if re.search(r"\bsku\b", raw, re.IGNORECASE):
+            return None
+
+    return {"sku": sku[:64], "description": desc[:240], "qty": qty, "unit_price": unit_price, "line_total": line_total}
+
+
+def parse_invoice_lines(text: str) -> list[dict[str, Any]]:
+    lines = []
+    for raw_line in (text or "").splitlines():
+        l = raw_line.strip()
+        if not l:
+            continue
+        if len(l) > 300:
+            continue
+        parsed = _parse_line_by_trailing_numbers(l)
+        if parsed:
+            lines.append(parsed)
+
+    # De-dup identical lines (common in PDF extraction).
+    seen = set()
+    out = []
+    for r in lines:
+        key = (r.get("sku"), r.get("description"), r.get("qty"), r.get("unit_price"), r.get("line_total"))
+        if key in seen:
+            continue
+        seen.add(key)
+        out.append(r)
+
+    return out[:50]
+
+

ap_agent1/po.py

@@ -0,0 +1,168 @@
+from __future__ import annotations
+
+import io
+from typing import Any
+
+import pandas as pd
+
+from ap_agent1.db import get_conn
+from ap_agent1.utils import norm_key, to_float
+
+
+_COL_SYNONYMS: dict[str, list[str]] = {
+    "po_number": ["po_number", "po", "purchase_order", "purchase_order_number", "po_no", "ponumber"],
+    "sku": ["sku", "item", "item_code", "material", "material_code", "part", "part_number", "product_code"],
+    "description": ["description", "item_description", "material_description", "desc", "product_description"],
+    "qty_ordered": ["qty_ordered", "quantity", "qty", "ordered_qty", "order_qty", "po_qty"],
+    "unit_price": ["unit_price", "price", "unitcost", "unit_cost", "rate"],
+    "supplier": ["supplier", "vendor", "supplier_name", "vendor_name"],
+}
+
+
+def _find_col(cols: list[str], candidates: list[str]) -> str | None:
+    norm = {norm_key(c): c for c in cols}
+    for cand in candidates:
+        k = norm_key(cand)
+        if k in norm:
+            return norm[k]
+    return None
+
+
+def load_po_csv(file_like: io.BytesIO) -> tuple[pd.DataFrame, str | None]:
+    df = pd.read_csv(file_like)
+    cols = list(df.columns)
+
+    mapping: dict[str, str] = {}
+    for canonical, synonyms in _COL_SYNONYMS.items():
+        found = _find_col(cols, synonyms)
+        if found:
+            mapping[canonical] = found
+
+    if "po_number" not in mapping:
+        raise ValueError("PO CSV missing required column: po_number (or synonym).")
+    if "qty_ordered" not in mapping:
+        raise ValueError("PO CSV missing required column: qty_ordered (or synonym).")
+    if "sku" not in mapping and "description" not in mapping:
+        raise ValueError("PO CSV must include sku or description (or synonyms).")
+
+    out = pd.DataFrame()
+    out["po_number"] = df[mapping["po_number"]].astype(str).str.strip()
+    out["sku"] = df[mapping["sku"]].astype(str).str.strip() if "sku" in mapping else ""
+    out["description"] = df[mapping["description"]].astype(str).str.strip() if "description" in mapping else ""
+    out["qty_ordered"] = df[mapping["qty_ordered"]].apply(to_float)
+    out["unit_price"] = df[mapping["unit_price"]].apply(to_float) if "unit_price" in mapping else None
+    out["supplier"] = df[mapping["supplier"]].astype(str).str.strip() if "supplier" in mapping else ""
+
+    out = out.dropna(subset=["po_number", "qty_ordered"])
+    out = out[out["po_number"].astype(str).str.len() > 0]
+    out["qty_ordered"] = out["qty_ordered"].fillna(0.0)
+
+    # Pick a hint (first PO number) for auto-filling UI.
+    po_hint = None
+    if not out.empty:
+        po_hint = str(out["po_number"].iloc[0])
+
+    return out, po_hint
+
+
+def upsert_po_lines(conn, po_df: pd.DataFrame, source_hash: str) -> None:
+    """
+    For demo simplicity: delete existing rows for the PO(s) in the upload, then insert fresh.
+    """
+    po_numbers = sorted(set(po_df["po_number"].astype(str).tolist()))
+    for po_number in po_numbers:
+        conn.execute("DELETE FROM po_lines WHERE po_number = ?", (po_number,))
+
+    rows: list[dict[str, Any]] = po_df.to_dict(orient="records")
+    for r in rows:
+        conn.execute(
+            """
+            INSERT INTO po_lines(id, po_number, sku, description, qty_ordered, unit_price, supplier, source_hash)
+            VALUES(?,?,?,?,?,?,?,?)
+            """,
+            (
+                f"po_{source_hash[:10]}_{len(r.get('sku',''))}_{abs(hash((r.get('po_number'), r.get('sku'), r.get('description'))))%10_000_000}",
+                str(r.get("po_number") or "").strip(),
+                (r.get("sku") or "").strip() or None,
+                (r.get("description") or "").strip() or None,
+                float(r.get("qty_ordered") or 0.0),
+                r.get("unit_price"),
+                (r.get("supplier") or "").strip() or None,
+                source_hash,
+            ),
+        )
+    conn.commit()
+
+
+def read_csv_text(file_like: io.BytesIO) -> str:
+    """
+    Reads uploaded CSV bytes into text for the agent (best-effort encoding).
+    """
+    raw = file_like.getvalue() if hasattr(file_like, "getvalue") else file_like.read()
+    for enc in ("utf-8-sig", "utf-8", "cp1252", "latin-1"):
+        try:
+            return raw.decode(enc)
+        except Exception:
+            continue
+    return raw.decode(errors="ignore")
+
+
+def read_tabular_text(file_name: str, data: bytes) -> str:
+    """
+    Reads CSV or Excel (XLSX/XLS) into a single text payload for the agent.
+    For Excel, includes multiple sheets with clear separators.
+    """
+    name = (file_name or "").lower()
+    if name.endswith(".csv"):
+        return read_csv_text(io.BytesIO(data))
+
+    if name.endswith((".xlsx", ".xls")):
+        # Read all sheets
+        bio = io.BytesIO(data)
+        try:
+            sheets = pd.read_excel(bio, sheet_name=None)  # engine auto
+        except Exception:
+            # Retry with common engines
+            bio.seek(0)
+            engine = "openpyxl" if name.endswith(".xlsx") else "xlrd"
+            sheets = pd.read_excel(bio, sheet_name=None, engine=engine)
+
+        def _clean_sheet(df: pd.DataFrame) -> pd.DataFrame:
+            # Drop fully empty rows/cols
+            df = df.dropna(axis=0, how="all").dropna(axis=1, how="all")
+            if df.empty:
+                return df
+            # If columns are mostly Unnamed and first row looks like headers, promote it.
+            unnamed = sum(str(c).lower().startswith("unnamed") for c in df.columns)
+            if unnamed >= max(1, int(len(df.columns) * 0.5)) and len(df) >= 2:
+                first = df.iloc[0].tolist()
+                # Heuristic: header row has many non-numeric strings
+                non_empty = [x for x in first if str(x).strip() and str(x).strip().lower() != "nan"]
+                if len(non_empty) >= max(2, int(len(df.columns) * 0.4)):
+                    df2 = df.copy()
+                    df2.columns = [str(x).strip() for x in first]
+                    df2 = df2.iloc[1:].reset_index(drop=True)
+                    df2 = df2.dropna(axis=0, how="all").dropna(axis=1, how="all")
+                    return df2
+            return df.reset_index(drop=True)
+
+        parts: list[str] = []
+        for sheet_name, df in sheets.items():
+            if df is None:
+                continue
+            df = _clean_sheet(df)
+            if df.empty:
+                continue
+            # Bound size: header + first 200 rows
+            df2 = df.head(300).copy()
+            parts.append(f"--- SHEET: {sheet_name} ---")
+            parts.append(df2.to_csv(index=False))
+        return "\n".join(parts).strip()
+
+    # Unknown: try decode as text
+    try:
+        return data.decode("utf-8", errors="ignore")
+    except Exception:
+        return ""
+
+

ap_agent1/suppliers.py

@@ -0,0 +1,37 @@
+from __future__ import annotations
+
+from pathlib import Path
+
+import pandas as pd
+
+from ap_agent1.utils import norm_space
+
+
+SUPPLIERS_CSV = "data/suppliers.csv"
+
+
+def ensure_default_suppliers() -> None:
+    p = Path(SUPPLIERS_CSV)
+    p.parent.mkdir(parents=True, exist_ok=True)
+    if p.exists():
+        return
+    p.write_text(
+        "supplier_id,supplier_name,tax_id\n"
+        "SUP-001,Acme Industrial Supplies,TX-ACME-001\n"
+        "SUP-002,Northwind Traders,TX-NW-002\n"
+        "SUP-003,Contoso Components,TX-CON-003\n"
+        "SUP-004,Fabrikam Manufacturing,TX-FAB-004\n"
+        "SUP-005,Global Office Supplies Ltd.,TX-GOS-005\n",
+        encoding="utf-8",
+    )
+
+
+def load_suppliers() -> pd.DataFrame:
+    ensure_default_suppliers()
+    df = pd.read_csv(SUPPLIERS_CSV)
+    if "supplier_name" not in df.columns:
+        raise ValueError("Suppliers CSV must contain 'supplier_name' column.")
+    df["supplier_name"] = df["supplier_name"].astype(str).map(norm_space)
+    return df
+
+

ap_agent1/utils.py

@@ -0,0 +1,47 @@
+from __future__ import annotations
+
+import hashlib
+import re
+from typing import Any
+
+
+def sha256_bytes(data: bytes) -> str:
+    return hashlib.sha256(data).hexdigest()
+
+
+def norm_space(s: str) -> str:
+    return re.sub(r"\s+", " ", (s or "").strip())
+
+
+def norm_key(s: str) -> str:
+    s = norm_space(s).lower()
+    s = re.sub(r"[^a-z0-9]+", "_", s)
+    return s.strip("_")
+
+
+def to_float(v: Any) -> float | None:
+    if v is None:
+        return None
+    if isinstance(v, (int, float)):
+        return float(v)
+    s = str(v).strip()
+    if not s:
+        return None
+    s = s.replace(",", "")
+    try:
+        return float(s)
+    except ValueError:
+        # Try extracting the first numeric token (handles values like "6 EA", "$3099.59", etc.)
+        m = re.search(r"-?\d+(?:\.\d+)?", s)
+        if not m:
+            return None
+        try:
+            return float(m.group(0))
+        except ValueError:
+            return None
+
+
+def clamp01(x: float) -> float:
+    return 0.0 if x < 0 else 1.0 if x > 1 else x
+
+

app.py

@@ -0,0 +1,17 @@
+"""
+Hugging Face Spaces entry point.
+This file is required for Hugging Face Spaces to recognize the app.
+The actual app is in backend1/main.py
+"""
+import os
+import sys
+
+# Add the current directory to Python path
+sys.path.insert(0, os.path.dirname(__file__))
+
+# Import and run the FastAPI app
+from backend1.main import app
+
+# Hugging Face Spaces expects the app to be available as 'app'
+__all__ = ["app"]
+

backend1/main.py

@@ -0,0 +1,1045 @@
+import io
+import os
+import json
+import re
+import logging
+import time
+from collections import Counter
+from pathlib import Path
+from typing import Any
+
+import pandas as pd
+from fastapi import FastAPI, File, Form, HTTPException, UploadFile
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
+
+try:
+    # Load local .env for dev convenience (production should use real environment variables)
+    from dotenv import load_dotenv  # type: ignore
+
+    load_dotenv()
+except Exception:
+    pass
+
+from ap_agent1.ai_agent import ai_ap_agent_process, ai_enabled, ai_normalize_po_csv
+from ap_agent1.db import (
+    clear_all,
+    get_conn,
+    get_history_context,
+    get_po_lines,
+    get_received_qty_by_po_line_id,
+    init_db,
+    invoice_exists_by_business_key,
+    invoice_exists_by_sha,
+    insert_invoice_run,
+    load_invoice_detail,
+    search_invoices,
+)
+from ap_agent1.document import extract_invoice_inputs, png_bytes_to_data_url
+from ap_agent1.invoice import parse_invoice_fields
+from ap_agent1.po import read_tabular_text
+from ap_agent1.suppliers import load_suppliers
+from ap_agent1.utils import sha256_bytes, to_float
+
+
+logger = logging.getLogger("apdemo.backend1")
+if not logger.handlers:
+    logging.basicConfig(level=logging.INFO)
+
+BUILD_ID = f"backend1-{int(Path(__file__).stat().st_mtime)}"
+
+def _norm_po(s: str | None) -> str:
+    """
+    Normalize PO identifiers to a stable format like `PO-1008`.
+    Handles common variants: `po 1008`, `PO_1008`, `po-1008`, etc.
+    """
+    v = (s or "").strip().upper()
+    if not v:
+        return ""
+    v = v.replace("_", "-").replace(" ", "-")
+    # normalize "PO--1008" or "PO---1008"
+    v = re.sub(r"-{2,}", "-", v)
+    # normalize "PO1008" -> "PO-1008"
+    v = re.sub(r"^PO(\d+)$", r"PO-\1", v)
+    # normalize "PO- 1008" etc (after space->- above)
+    v = re.sub(r"^PO-(\d+)$", r"PO-\1", v)
+    return v
+
+def _norm_name(s: str | None) -> str:
+    return (s or "").strip()
+
+
+def _norm_key(s: str | None) -> str:
+    return (s or "").strip().lower()
+
+def _normalize_score(v: Any) -> float | None:
+    """
+    Normalize score to 0..1. Accepts either 0..1 or 0..100 style values.
+    """
+    f = to_float(v)
+    if f is None:
+        return None
+    # Handle % style scores
+    if f > 1.0 and f <= 100.0:
+        f = f / 100.0
+    # Clamp
+    if f < 0:
+        return 0.0
+    if f > 1.0:
+        return 1.0
+    return float(f)
+
+def _confidence_score(*, supplier_match_score: Any, line_results: list[dict[str, Any]]) -> float | None:
+    """
+    Best-effort overall confidence for UI visibility (0..1).
+    Combines supplier validation confidence + average line match confidence when available.
+    """
+    s = _normalize_score(supplier_match_score)
+    scores: list[float] = []
+    for r in line_results or []:
+        v = _normalize_score(r.get("match_score"))
+        if v is not None:
+            scores.append(v)
+    line_avg = (sum(scores) / len(scores)) if scores else None
+    if line_avg is not None and s is not None:
+        return 0.7 * line_avg + 0.3 * s
+    return line_avg if line_avg is not None else s
+
+def _extractions_count(*, invoice_fields: dict[str, Any], line_results: list[dict[str, Any]]) -> int:
+    """
+    Count extracted units (header fields present + extracted line items).
+    """
+    header_count = 0
+    for k in ["invoice_number", "supplier", "po_number", "total_amount", "currency"]:
+        if str((invoice_fields or {}).get(k) or "").strip():
+            header_count += 1
+    return int(header_count + len(line_results or []))
+
+
+def _compute_backorders(
+    *,
+    po_db_lines: list[dict[str, Any]],
+    received_before: dict[str, float],
+    current_invoice_qty_by_po_line_id: dict[str, float] | None = None,
+) -> list[dict[str, Any]]:
+    """
+    Deterministic backorder breakdown per PO line.
+    remaining is computed AFTER applying the current invoice quantities (if provided).
+    """
+    cur = current_invoice_qty_by_po_line_id or {}
+    out: list[dict[str, Any]] = []
+    for pl in po_db_lines or []:
+        po_line_id = str(pl.get("id") or "")
+        qty_ordered = to_float(pl.get("qty_ordered")) or 0.0
+        rb = float(received_before.get(po_line_id, 0.0) or 0.0)
+        ra = rb + float(cur.get(po_line_id, 0.0) or 0.0)
+        remaining = qty_ordered - ra
+        if remaining > 1e-9:
+            out.append(
+                {
+                    "po_line_id": po_line_id,
+                    "sku": pl.get("sku") or "",
+                    "description": pl.get("description") or "",
+                    "qty_ordered": qty_ordered,
+                    "received_before": rb,
+                    "received_after": ra,
+                    "remaining": remaining,
+                }
+            )
+    # stable ordering: most remaining first
+    out.sort(key=lambda r: float(r.get("remaining") or 0.0), reverse=True)
+    return out
+
+
+def _guess_po(*, invoice_text: str, file_name: str | None) -> str | None:
+    """
+    Best-effort PO number extraction from invoice text and/or filename.
+    We prefer filename as a fallback because some PDFs don't have clean text extraction.
+    """
+    candidates: list[str] = []
+
+    def collect(s: str) -> None:
+        s = (s or "").strip()
+        if not s:
+            return
+        # Normalize "PO 1008" -> "PO-1008"
+        s = re.sub(r"\bPO\s+(\d+)\b", r"PO-\1", s, flags=re.IGNORECASE)
+        # Normalize casing
+        s = s.upper()
+        candidates.append(s)
+
+    t = (invoice_text or "").strip()
+    if t:
+        for pat in [
+            r"\bPO[-\s]*\d{3,}\b",
+            r"\bPURCHASE\s+ORDER[:\s]*([A-Z0-9-]{4,})\b",
+        ]:
+            m = re.search(pat, t, flags=re.IGNORECASE)
+            if not m:
+                continue
+            s = m.group(0) if m.lastindex is None else m.group(1)
+            collect(s)
+
+    fn = (file_name or "").strip()
+    if fn:
+        # Common pattern in filenames: "...PO-1008..." or "...PO_1008..."
+        # NOTE: avoid \b here because underscores are "word characters" and can prevent word boundaries.
+        m = re.search(r"PO[-_ ]?\d{3,}", fn, flags=re.IGNORECASE)
+        if m:
+            collect(m.group(0).replace("_", "-").replace(" ", "-"))
+
+    if not candidates:
+        return None
+
+    # Prefer earliest occurrence (stable) rather than lexical order.
+    # If multiple candidates are found, return the first one collected.
+    return candidates[0]
+
+
+def _po_from_filename(file_name: str | None) -> str | None:
+    """
+    Strong signal: if the user-provided filename contains PO-xxxx, trust it.
+    This avoids cases where PDF text extraction contains other PO-like strings.
+    """
+    fn = (file_name or "").strip()
+    if not fn:
+        return None
+    m = re.search(r"PO[-_ ]?\d{3,}", fn, flags=re.IGNORECASE)
+    if not m:
+        return None
+    s = m.group(0).replace("_", "-").replace(" ", "-").strip().upper()
+    s = re.sub(r"\bPO\s+(\d+)\b", r"PO-\1", s, flags=re.IGNORECASE).upper()
+    return s
+
+
+def _po_rows_for_invoice(po_rows: list[dict[str, Any]], invoice_po: str | None) -> list[dict[str, Any]]:
+    inv_po = _norm_po(invoice_po)
+    if not inv_po:
+        return po_rows
+    filtered = [r for r in po_rows if _norm_po(str(r.get("po_number", ""))) == inv_po]
+    return filtered or po_rows
+
+
+def _single_po_number(po_lines: list[dict[str, Any]]) -> str | None:
+    vals = []
+    for r in po_lines or []:
+        v = _norm_po(str(r.get("po_number", "")))
+        if v:
+            vals.append(v)
+    uniq = sorted(set(vals))
+    return uniq[0] if len(uniq) == 1 else None
+
+
+def _pick_po_number_ctx(
+    *,
+    po_lines: list[dict[str, Any]],
+    po_header: dict[str, Any],
+    po_number_candidates: list[Any],
+    invoice_po_hint: str | None,
+    po_file_name: str | None,
+) -> str:
+    """
+    Choose the PO number we should use for matching / storage.
+    Priority:
+    1) If PO file has a single PO → trust it
+    2) If PO filename contains PO-#### → trust it (when present in the uploaded PO)
+    3) PO header PO number (when present in the uploaded PO)
+    4) Invoice hint if it matches a PO in the uploaded file
+    5) Most-common PO number in uploaded file
+    6) Fallback to first candidate
+    """
+    only_po = _single_po_number(po_lines)
+    if only_po:
+        return only_po
+
+    vals = [_norm_po(str(r.get("po_number", ""))) for r in (po_lines or [])]
+    vals = [v for v in vals if v]
+    uniq = set(vals)
+
+    po_file_hint = _po_from_filename(po_file_name)
+    if po_file_hint and (not uniq or po_file_hint in uniq):
+        return po_file_hint
+
+    hdr = _norm_po(str((po_header or {}).get("po_number") or ""))
+    if hdr and (not uniq or hdr in uniq):
+        return hdr
+
+    inv = _norm_po(invoice_po_hint)
+    if inv and inv in uniq:
+        return inv
+
+    if vals:
+        return Counter(vals).most_common(1)[0][0]
+
+    # last resort: candidate list
+    for c in po_number_candidates or []:
+        v = _norm_po(str(c))
+        if v:
+            return v
+    return ""
+
+def _supplier_master_from_po(po_lines: list[dict[str, Any]], po_header: dict[str, Any]) -> list[dict[str, Any]]:
+    """
+    Build an "approved supplier list" from the uploaded PO itself (Vendor Name / Supplier).
+    This avoids requiring a pre-maintained data/suppliers.csv for demo usage.
+    """
+    names: list[str] = []
+    header_supplier = _norm_name(str(po_header.get("supplier") or ""))
+    if header_supplier:
+        names.append(header_supplier)
+    for r in po_lines or []:
+        s = _norm_name(str(r.get("supplier") or ""))
+        if s:
+            names.append(s)
+    # dedupe while preserving order
+    seen: set[str] = set()
+    uniq: list[str] = []
+    for n in names:
+        key = n.lower()
+        if key in seen:
+            continue
+        seen.add(key)
+        uniq.append(n)
+    return [{"supplier_name": n} for n in uniq]
+
+
+def _extract_po_lines_from_embedded_json(po_bytes: bytes) -> list[dict[str, Any]]:
+    """
+    Fallback parser for exports like:
+      56,PO-1008,Global Office Supplies Ltd.,2025-09-01,3099.59,"[{...}]"
+
+    Many such files have **no header row**, so we parse by position:
+      col1 = po_number, col2 = supplier/vendor, last col = JSON items
+    """
+    out: list[dict[str, Any]] = []
+
+    # 1) Try headerless read (most common for your sample)
+    try:
+        df0 = pd.read_csv(io.BytesIO(po_bytes), header=None, engine="python", on_bad_lines="skip")
+        if df0.shape[1] >= 3:
+            for _, row in df0.iterrows():
+                po_number = str(row.iloc[1] if len(row) > 1 else "").strip()
+                if not po_number:
+                    continue
+                supplier = str(row.iloc[2] if len(row) > 2 else "").strip()
+                raw_items = row.iloc[-1] if len(row) > 0 else None
+                if raw_items is None:
+                    continue
+                s = str(raw_items).strip()
+                if not (s.startswith("[") and s.endswith("]")):
+                    continue
+                try:
+                    items = json.loads(s)
+                except Exception:
+                    continue
+                if not isinstance(items, list):
+                    continue
+                for it in items:
+                    if not isinstance(it, dict):
+                        continue
+                    keys = {str(k).strip().lower(): v for k, v in it.items()}
+                    sku = str(keys.get("part number") or keys.get("part") or keys.get("sku") or "").strip()
+                    desc = str(keys.get("description") or keys.get("desc") or "").strip()
+                    qty = to_float(keys.get("quantity") or keys.get("qty"))
+                    unit_price = to_float(keys.get("unit cost") or keys.get("unit_price") or keys.get("unit price"))
+                    if qty is None:
+                        continue
+                    out.append(
+                        {
+                            "po_number": po_number,
+                            "sku": sku[:64],
+                            "description": desc[:240],
+                            "qty_ordered": float(qty),
+                            "unit_price": unit_price,
+                            "supplier": supplier or None,
+                        }
+                    )
+    except Exception:
+        pass
+
+    if out:
+        return out
+
+    # 2) Try headered read (if file actually has headers)
+    try:
+        df = pd.read_csv(io.BytesIO(po_bytes), engine="python", on_bad_lines="skip")
+    except Exception:
+        return []
+
+    cols = [c for c in df.columns]
+
+    def pick_col(pred):
+        for c in cols:
+            if pred(str(c)):
+                return c
+        return None
+
+    po_col = pick_col(lambda c: "po" in c.lower() and "number" in c.lower()) or pick_col(lambda c: c.lower().strip() in {"po", "po_number"})
+    supplier_col = pick_col(lambda c: "vendor" in c.lower() or "supplier" in c.lower() or "vendor name" in c.lower())
+    items_col = pick_col(lambda c: "item" in c.lower())
+    if not po_col or not items_col:
+        return []
+
+    for _, row in df.iterrows():
+        po_number = str(row.get(po_col, "")).strip()
+        if not po_number:
+            continue
+        supplier = str(row.get(supplier_col, "")).strip() if supplier_col else ""
+        raw_items = row.get(items_col)
+        if raw_items is None:
+            continue
+        s = str(raw_items).strip()
+        if not (s.startswith("[") and s.endswith("]")):
+            continue
+        try:
+            items = json.loads(s)
+        except Exception:
+            continue
+        if not isinstance(items, list):
+            continue
+        for it in items:
+            if not isinstance(it, dict):
+                continue
+            keys = {str(k).strip().lower(): v for k, v in it.items()}
+            sku = str(keys.get("part number") or keys.get("part") or keys.get("sku") or "").strip()
+            desc = str(keys.get("description") or keys.get("desc") or "").strip()
+            qty = to_float(keys.get("quantity") or keys.get("qty"))
+            unit_price = to_float(keys.get("unit cost") or keys.get("unit_price") or keys.get("unit price"))
+            if qty is None:
+                continue
+            out.append(
+                {
+                    "po_number": po_number,
+                    "sku": sku[:64],
+                    "description": desc[:240],
+                    "qty_ordered": float(qty),
+                    "unit_price": unit_price,
+                    "supplier": supplier or None,
+                }
+            )
+    return out
+
+
+def _cfg() -> dict[str, str]:
+    endpoint = (os.environ.get("AZURE_OPENAI_ENDPOINT") or "").strip()
+    key = (os.environ.get("AZURE_OPENAI_API_KEY") or "").strip()
+    deployment = (os.environ.get("AZURE_OPENAI_DEPLOYMENT") or "").strip()
+    api_version = (os.environ.get("AZURE_OPENAI_API_VERSION") or "2024-10-21").strip()
+    if not ai_enabled(provider="azure", api_key=key, azure_endpoint=endpoint):
+        raise RuntimeError("Azure OpenAI is not configured. Set AZURE_OPENAI_ENDPOINT and AZURE_OPENAI_API_KEY.")
+    if not deployment:
+        raise RuntimeError("Azure OpenAI deployment is not configured. Set AZURE_OPENAI_DEPLOYMENT.")
+    return {"endpoint": endpoint, "key": key, "deployment": deployment, "api_version": api_version}
+
+
+app = FastAPI(title="AP Agent API", version="0.1.0")
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+@app.on_event("startup")
+def _startup() -> None:
+    init_db()
+
+
+# Serve the built React app (single-server deployment)
+# IMPORTANT: SPA routes are registered at the bottom of the file (after /api/*),
+# otherwise the catch-all will swallow API calls and return HTML instead of JSON.
+FRONTEND_DIST = Path(__file__).resolve().parent.parent / "frontend" / "dist"
+if FRONTEND_DIST.exists():
+    app.mount("/assets", StaticFiles(directory=str(FRONTEND_DIST / "assets")), name="assets")
+
+
+@app.get("/api/health")
+def health() -> dict[str, Any]:
+    try:
+        _ = _cfg()
+        return {"ok": True, "service": "backend1", "build": BUILD_ID}
+    except Exception as e:
+        return {"ok": False, "error": str(e), "service": "backend1", "build": BUILD_ID}
+
+
+@app.post("/api/clear")
+def api_clear() -> dict[str, Any]:
+    conn = get_conn()
+    clear_all(conn)
+    conn.close()
+    return {"ok": True}
+
+
+@app.get("/api/history")
+def api_history(
+    limit: int = 50,
+    invoice_number: str | None = None,
+    supplier: str | None = None,
+    po_number: str | None = None,
+    match_status: str | None = None,
+    duplicate_flag: int | None = None,
+    date_from: str | None = None,
+    date_to: str | None = None,
+) -> dict[str, Any]:
+    conn = get_conn()
+    rows = search_invoices(
+        conn,
+        limit=int(limit),
+        invoice_number=invoice_number,
+        supplier=supplier,
+        po_number=po_number,
+        match_status=match_status,
+        duplicate_flag=duplicate_flag,
+        date_from=date_from,
+        date_to=date_to,
+    )
+    conn.close()
+    return {"items": rows}
+
+
+@app.get("/api/history/{invoice_id}")
+def api_history_detail(invoice_id: str) -> dict[str, Any]:
+    conn = get_conn()
+    detail = load_invoice_detail(conn, invoice_id)
+    if not detail.get("invoice"):
+        conn.close()
+        raise HTTPException(status_code=404, detail="Not found")
+    # Reconstruct extracted invoice JSON (for History view) from persisted DB rows.
+    try:
+        inv = detail.get("invoice") or {}
+        lines = detail.get("lines") or []
+        po_number = str(inv.get("po_number") or "")
+        extracted_invoice = {
+            "invoice": {
+                "invoice_number": inv.get("invoice_number") or "",
+                "supplier": inv.get("supplier") or "",
+                "po_number": inv.get("po_number") or "",
+                "total_amount": str(inv.get("invoice_total") if inv.get("invoice_total") is not None else ""),
+                "currency": inv.get("currency") or "",
+            },
+            "line_items": [
+                {
+                    "sku": l.get("sku") or "",
+                    "description": l.get("description") or "",
+                    "qty": l.get("qty"),
+                    "unit_price": l.get("unit_price"),
+                    "line_total": l.get("line_total"),
+                }
+                for l in lines
+            ],
+        }
+        detail["extracted_invoice"] = extracted_invoice
+        # Current backorder state for this PO (based on all non-duplicate invoices stored so far).
+        po_db_lines = get_po_lines(conn, po_number) if po_number else []
+        received = get_received_qty_by_po_line_id(conn, po_number) if po_number else {}
+        backorders = _compute_backorders(po_db_lines=po_db_lines, received_before=received, current_invoice_qty_by_po_line_id=None)
+        detail["backorders"] = {"items": backorders, "count": len(backorders)}
+    except Exception:
+        detail["extracted_invoice"] = None
+        detail["backorders"] = {"items": [], "count": 0}
+    conn.close()
+    return detail
+
+
+@app.post("/api/analyze")
+async def api_analyze(
+    invoice: UploadFile = File(...),
+    po_file: UploadFile = File(...),
+    duplicate_override: bool = Form(default=False),
+    override_reason: str = Form(default=""),
+) -> dict[str, Any]:
+    try:
+        cfg = _cfg()
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+    t0 = time.perf_counter()
+    inv_bytes = await invoice.read()
+    po_bytes = await po_file.read()
+    if not inv_bytes or not po_bytes:
+        raise HTTPException(status_code=400, detail="Both invoice and PO file are required.")
+
+    inv_sha = sha256_bytes(inv_bytes)
+    po_sha = sha256_bytes(po_bytes)
+
+    po_csv_text = read_tabular_text(po_file.filename or "po", po_bytes)
+    # Fast path: many of your PO exports embed JSON line items in a cell. Parse deterministically and
+    # skip the LLM normalization call (big latency win).
+    fallback_po_lines = _extract_po_lines_from_embedded_json(po_bytes)
+    if fallback_po_lines:
+        po_lines = fallback_po_lines
+        # best-effort header from lines
+        po_header = {
+            "po_number": _single_po_number(po_lines) or (po_lines[0].get("po_number") if po_lines else ""),
+            "supplier": po_lines[0].get("supplier") if po_lines else "",
+            "po_amount": None,
+            "currency": "",
+        }
+        po_number_candidates = sorted({str(r.get("po_number") or "").strip() for r in po_lines if str(r.get("po_number") or "").strip()})
+    else:
+        po_norm = ai_normalize_po_csv(
+            deployment=cfg["deployment"],
+            api_key=cfg["key"],
+            azure_endpoint=cfg["endpoint"],
+            azure_api_version=cfg["api_version"],
+            po_csv_text=po_csv_text,
+        )
+        po_lines = po_norm.get("po_lines") or []
+        po_header = po_norm.get("po_header") or {}
+        po_number_candidates = po_norm.get("po_numbers") or []
+        if not po_number_candidates and po_header.get("po_number"):
+            po_number_candidates = [po_header.get("po_number")]
+
+    conn = get_conn()
+    # Deterministic duplicate detection (do not rely on the model).
+    dup_by_sha = invoice_exists_by_sha(conn, inv_sha)
+    if not po_number_candidates:
+        raise HTTPException(status_code=400, detail="Could not identify a PO number from the CSV.")
+    po_number = str(po_number_candidates[0])
+
+    inv_inputs = extract_invoice_inputs(invoice.filename or "invoice", inv_bytes)
+    invoice_text = inv_inputs.get("invoice_text", "")
+    invoice_images = inv_inputs.get("invoice_images", [])
+    ocr_payload = inv_inputs.get("ocr") or None
+    # OCR payload for frontend debug/inspection (real OCR when configured; otherwise embedded PDF text).
+    # Keep response size sane: include only the first page image (if present).
+    ocr_json: dict[str, Any] = {
+        "file_name": invoice.filename or "",
+        "file_sha256": inv_sha,
+        # If Azure DI isn't used, we still run the agent with vision images for PDFs.
+        # Use agent_vision as the primary "OCR" provider so the UI consistently shows extracted JSON for ALL PDFs.
+        "provider": (ocr_payload or {}).get("provider") or ("agent_vision" if (invoice_images or []) else ("pdf_text" if invoice_text else "none")),
+        "text": invoice_text,
+        "text_chars": len(invoice_text or ""),
+        "pdf_text_present": bool(invoice_text),
+        "images_count": len(invoice_images or []),
+        "images_preview": [png_bytes_to_data_url(invoice_images[0])] if invoice_images else [],
+        # OCR service raw output (bounded; UI can expand it)
+        "result": (ocr_payload or {}).get("result") or None,
+        "error": (ocr_payload or {}).get("error") or None,
+    }
+    # Prefer invoice parser output (most reliable for "PO Number: ...") and fall back to heuristic/filename.
+    inv_fields = parse_invoice_fields(invoice_text or "")
+    file_po = _po_from_filename(invoice.filename)
+    invoice_po_hint = file_po or (inv_fields.get("po_number") or "").strip() or _guess_po(invoice_text=invoice_text, file_name=invoice.filename)
+    if invoice_po_hint:
+        # normalize common variants
+        invoice_po_hint = re.sub(r"\bPO\s+(\d+)\b", r"PO-\1", invoice_po_hint, flags=re.IGNORECASE).upper()
+
+    if po_lines:
+        po_df = pd.DataFrame(po_lines)
+        from ap_agent1.po import upsert_po_lines
+
+        upsert_po_lines(conn, po_df, source_hash=po_sha)
+        # AGENT-FIRST: Don't pre-select PO number. Let agent extract PO from invoice and match dynamically.
+        # Pass ALL PO lines from the file, not filtered by a pre-selected PO number.
+        # The agent will extract the invoice PO number and match against all available PO lines.
+        po_rows_all = po_lines  # Pass all PO lines, let agent filter by invoice PO number
+        # We still need po_number_ctx for DB operations (history, backorders), but we'll use agent's extracted PO after it runs
+        po_number_ctx_temp = _pick_po_number_ctx(
+            po_lines=po_lines,
+            po_header=po_header,
+            po_number_candidates=po_number_candidates,
+            invoice_po_hint=invoice_po_hint,
+            po_file_name=po_file.filename,
+        )
+        po_rows = po_rows_all  # Use all lines, not filtered
+    else:
+        po_rows = []
+        po_number_ctx_temp = invoice_po_hint or _norm_po(po_number)
+
+    try:
+        uniq_po = sorted({str(r.get("po_number", "")).strip() for r in (po_lines or []) if str(r.get("po_number", "")).strip()})[:10]
+        logger.info(
+            "analyze debug: filename=%s file_po=%s inv_po=%s csv_po=%s only_po=%s po_number_ctx_temp=%s po_lines=%d po_rows=%d uniq_pos=%s",
+            invoice.filename,
+            file_po,
+            (inv_fields.get("po_number") or "").strip(),
+            po_number,
+            _single_po_number(po_lines),
+            po_number_ctx_temp,
+            len(po_lines or []),
+            len(po_rows or []),
+            uniq_po,
+        )
+    except Exception:
+        pass
+
+    supplier_master = load_suppliers().to_dict(orient="records")
+    # Use PO vendor/supplier as the approved supplier list (instead of relying on suppliers.csv).
+    supplier_master = _supplier_master_from_po(po_lines=po_lines, po_header=po_header)
+    # Use temporary PO number for history lookup (will be refined after agent extracts the correct PO)
+    history = get_history_context(conn, po_number=po_number_ctx_temp, limit=25)
+
+    agent_out = ai_ap_agent_process(
+        deployment=cfg["deployment"],
+        api_key=cfg["key"],
+        azure_endpoint=cfg["endpoint"],
+        azure_api_version=cfg["api_version"],
+        invoice_text=invoice_text,
+        invoice_images=invoice_images,
+        file_name=invoice.filename,
+        file_sha256=inv_sha,
+        po_rows=po_rows,
+        po_source_text=po_csv_text,
+        supplier_master=supplier_master,
+        history=history,
+        user_overrides=None,
+    )
+
+    inv = agent_out.get("invoice") or {}
+    sv = agent_out.get("supplier_validation") or {}
+    invoice_number = (inv.get("invoice_number") or "") or None
+    supplier = (inv.get("supplier") or "") or None
+    currency = (inv.get("currency") or "") or None
+    invoice_total_f = to_float(inv.get("total_amount"))
+    # AGENT-FIRST: Use the agent's extracted PO number (the source of truth)
+    agent_po_number = _norm_po(inv.get("po_number") or "")
+    # Use agent's PO number for DB operations (backorders, history, etc.)
+    po_number_ctx = agent_po_number if agent_po_number else po_number_ctx_temp
+    # Attach agent-extracted invoice structure to OCR JSON (no extra model call).
+    try:
+        line_items = []
+        for r in (agent_out.get("line_results") or [])[:200]:
+            line_items.append(
+                {
+                    "sku": r.get("invoice_sku") or "",
+                    "description": r.get("invoice_description") or "",
+                    "qty": r.get("invoice_qty"),
+                    "unit_price": r.get("invoice_unit_price"),
+                    "line_total": r.get("invoice_line_total"),
+                }
+            )
+        ocr_json["extracted_invoice"] = {
+            "invoice": inv,
+            "line_items": line_items,
+        }
+        # Print to backend console so you can verify locally even before the UI.
+        try:
+            logger.info("ocr extracted_invoice: %s", json.dumps(ocr_json["extracted_invoice"], ensure_ascii=False)[:2000])
+        except Exception:
+            logger.info("ocr extracted_invoice: <unprintable>")
+    except Exception:
+        pass
+
+    evaluation = {
+        "match_status": agent_out.get("match_status", "Review"),
+        # Start with model output, but we'll override below with deterministic DB checks.
+        "duplicate": bool(agent_out.get("duplicate", False)),
+        "supplier_status": sv.get("supplier_status", "Unknown"),
+        "rationale": agent_out.get("rationale", ""),
+        "suggested_action": agent_out.get("suggested_action", ""),
+        "alerts": agent_out.get("alerts") or [],
+        "line_results": agent_out.get("line_results") or [],
+        "open_backorders": agent_out.get("open_backorders") or [],
+    }
+
+    # Enforce deterministic duplicate detection (SHA strongest, business key fallback).
+    dup_by_business = invoice_exists_by_business_key(conn, invoice_number, supplier)
+    is_dup = bool(dup_by_sha or dup_by_business)
+    if is_dup:
+        evaluation["duplicate"] = True
+        # Duplicates should never be auto-approved.
+        evaluation["match_status"] = "Review"
+        alerts = list(evaluation.get("alerts") or [])
+        alerts.insert(
+            0,
+            {
+                "level": "warning",
+                "message": "Duplicate detected: this invoice appears to have been processed already.",
+            },
+        )
+        evaluation["alerts"] = alerts
+
+    # Metrics for UI visibility
+    model_conf = _normalize_score(agent_out.get("confidence_score"))
+    confidence = model_conf if model_conf is not None else _confidence_score(supplier_match_score=sv.get("supplier_match_score"), line_results=evaluation["line_results"])
+    approval_decision = (agent_out.get("approval_decision") or "").strip() or None
+    if approval_decision not in {"Approved", "Partially Approved", "Rejected"}:
+        approval_decision = None
+    evaluation["confidence_score"] = confidence
+    evaluation["approval_decision"] = approval_decision
+    extractions_count = _extractions_count(invoice_fields=inv, line_results=evaluation["line_results"])
+    processing_ms = int((time.perf_counter() - t0) * 1000)
+
+    # Duplicate evidence (for UI): find previously processed records that likely match
+    dup_matches: list[dict[str, Any]] = []
+    if evaluation["duplicate"]:
+        # Prefer sha match; fallback to invoice_number+supplier match
+        rows = conn.execute(
+            """
+            SELECT id, processed_at, invoice_number, supplier, po_number, match_status, duplicate_flag
+            FROM invoices
+            WHERE (file_sha256 = ? AND ? != '')
+               OR (lower(coalesce(invoice_number,'')) = lower(?) AND lower(coalesce(supplier,'')) = lower(?))
+            ORDER BY processed_at DESC
+            LIMIT 5
+            """,
+            (inv_sha, inv_sha, inv.get("invoice_number") or "", inv.get("supplier") or ""),
+        ).fetchall()
+        dup_matches = [dict(r) for r in rows]
+
+    # Persist
+    # Map matched PO line IDs so history can support future backorder reasoning.
+    po_db_lines = get_po_lines(conn, po_number_ctx) if po_number_ctx else []
+    po_by_sku: dict[str, str] = {}
+    po_by_desc: dict[str, str] = {}
+    # Build a map of (sku_norm, desc_norm) -> po_line_id for more robust matching
+    po_by_sku_desc: dict[tuple[str, str], str] = {}
+    for pl in po_db_lines:
+        sku_norm = _norm_key(str(pl.get("sku") or ""))
+        desc_norm = _norm_key(str(pl.get("description") or ""))
+        po_line_id_str = str(pl.get("id"))
+        
+        if sku_norm:
+            po_by_sku.setdefault(sku_norm, po_line_id_str)
+        if desc_norm:
+            po_by_desc.setdefault(desc_norm, po_line_id_str)
+        # Combined key for more precise matching
+        if sku_norm and desc_norm:
+            po_by_sku_desc[(sku_norm, desc_norm)] = po_line_id_str
+
+    to_save: list[dict[str, Any]] = []
+    for r in evaluation["line_results"]:
+        po_line_id: str | None = None
+        
+        # Get normalized values from agent's output
+        agent_po_sku = _norm_key(r.get("po_sku") or "")
+        agent_po_desc = _norm_key(r.get("po_description") or "")
+        invoice_sku = _norm_key(r.get("invoice_sku") or "")
+        invoice_desc = _norm_key(r.get("invoice_description") or "")
+        
+        # Try matching in order of preference:
+        # 1) Agent's po_sku + po_description (most reliable - agent already matched)
+        if agent_po_sku and agent_po_desc:
+            po_line_id = po_by_sku_desc.get((agent_po_sku, agent_po_desc))
+        
+        # 2) Agent's po_description only (since SKU might be generic like "Goods")
+        if not po_line_id and agent_po_desc:
+            po_line_id = po_by_desc.get(agent_po_desc)
+        
+        # 3) Invoice description (fallback if agent didn't provide po_description)
+        if not po_line_id and invoice_desc:
+            po_line_id = po_by_desc.get(invoice_desc)
+        
+        # 4) Agent's po_sku only (least reliable since it might be generic)
+        if not po_line_id and agent_po_sku:
+            po_line_id = po_by_sku.get(agent_po_sku)
+        
+        # 5) Invoice sku as last resort (should rarely be needed)
+        if not po_line_id and invoice_sku:
+            po_line_id = po_by_sku.get(invoice_sku)
+        
+        # Log matching attempt (for debugging)
+        if not po_line_id:
+            logger.warning(
+                "Could not match invoice line to PO line: invoice_sku=%s invoice_desc=%s agent_po_sku=%s agent_po_desc=%s po_db_lines_count=%d",
+                invoice_sku,
+                invoice_desc,
+                agent_po_sku,
+                agent_po_desc,
+                len(po_db_lines),
+            )
+            # Log available PO lines for debugging
+            if po_db_lines:
+                logger.info("Available PO lines: %s", [(pl.get("id"), _norm_key(str(pl.get("sku") or "")), _norm_key(str(pl.get("description") or ""))) for pl in po_db_lines[:5]])
+        else:
+            logger.debug(
+                "Matched invoice line: invoice_desc=%s -> po_line_id=%s",
+                invoice_desc,
+                po_line_id,
+            )
+
+        qty = to_float(r.get("invoice_qty"))
+        to_save.append(
+            {
+                "sku": r.get("invoice_sku") or None,
+                "description": r.get("invoice_description") or None,
+                "qty": qty,
+                "unit_price": to_float(r.get("invoice_unit_price")),
+                "line_total": to_float(r.get("invoice_line_total")),
+                "matched_po_line_id": po_line_id,
+                "match_score": r.get("match_score"),
+            }
+        )
+
+    # Deterministic backorder breakdown from DB (more reliable than model text).
+    received_before_by_line = get_received_qty_by_po_line_id(conn, po_number_ctx) if po_number_ctx else {}
+    current_qty_by_line: dict[str, float] = {}
+    unmatched_count = 0
+    for l in to_save:
+        po_line_id = str(l.get("matched_po_line_id") or "")
+        if not po_line_id:
+            unmatched_count += 1
+            logger.warning(
+                "Invoice line not matched to PO line ID: sku=%s desc=%s qty=%s",
+                l.get("sku"),
+                l.get("description"),
+                l.get("qty"),
+            )
+            continue
+        q = to_float(l.get("qty")) or 0.0
+        current_qty_by_line[po_line_id] = float(current_qty_by_line.get(po_line_id, 0.0)) + float(q)
+    
+    # Log backorder calculation inputs
+    logger.info(
+        "Backorder calc: po_number_ctx=%s po_db_lines=%d received_before=%d lines current_qty=%d lines unmatched=%d",
+        po_number_ctx,
+        len(po_db_lines),
+        len(received_before_by_line),
+        len(current_qty_by_line),
+        unmatched_count,
+    )
+    
+    backorders = _compute_backorders(
+        po_db_lines=po_db_lines,
+        received_before=received_before_by_line,
+        current_invoice_qty_by_po_line_id=current_qty_by_line,
+    )
+    
+    # If we have unmatched lines, prefer agent's backorder calculation (it did the matching)
+    if unmatched_count > 0:
+        agent_backorders = agent_out.get("open_backorders") or []
+        logger.warning(
+            "Some invoice lines unmatched (%d). Agent backorders: %d items, Deterministic backorders: %d items. Using agent's calculation.",
+            unmatched_count,
+            len(agent_backorders),
+            len(backorders),
+        )
+        # Use agent's backorder calculation when matching fails (agent did semantic matching)
+        if agent_backorders:
+            # Convert agent's format to our format
+            backorders_agent = []
+            for ab in agent_backorders:
+                # Find matching PO line ID by description
+                desc_match = _norm_key(str(ab.get("description") or ""))
+                po_line_id_match = None
+                for pl in po_db_lines:
+                    if _norm_key(str(pl.get("description") or "")) == desc_match:
+                        po_line_id_match = str(pl.get("id"))
+                        break
+                backorders_agent.append({
+                    "po_line_id": po_line_id_match or "",
+                    "sku": ab.get("sku") or "",
+                    "description": ab.get("description") or "",
+                    "qty_ordered": float(ab.get("qty_ordered") or 0),
+                    "received_before": float(ab.get("received_before") or 0),
+                    "received_after": float(ab.get("received_after") or 0),
+                    "remaining": float(ab.get("remaining") or 0),
+                })
+            if backorders_agent:
+                backorders = backorders_agent
+                logger.info("Using agent's backorder calculation due to unmatched lines")
+    
+    evaluation["open_backorders"] = backorders
+
+    inv_id = insert_invoice_run(
+        conn,
+        invoice_number=invoice_number,
+        supplier=supplier,
+        supplier_validated=sv.get("supplier_validated") or None,
+        supplier_match_score=sv.get("supplier_match_score"),
+        supplier_status=sv.get("supplier_status") or "Unknown",
+        po_number=po_number_ctx,  # Use agent's extracted PO number, not the pre-selected one
+        invoice_total=invoice_total_f,
+        currency=currency,
+        match_status=evaluation["match_status"],
+        match_score=confidence,
+        processing_ms=processing_ms,
+        extractions_count=extractions_count,
+        approval_decision=approval_decision,
+        rule_match_status=None,
+        rule_match_score=None,
+        decision_engine="agent",
+        ai_model=cfg["deployment"],
+        ai_rationale=agent_out.get("rationale"),
+        override_reason=override_reason.strip() or None,
+        open_backorders_count=len(backorders),
+        duplicate_flag=bool(evaluation["duplicate"]),
+        file_name=invoice.filename,
+        file_sha256=inv_sha,
+        raw_text=invoice_text,
+        invoice_lines=to_save,
+    )
+    conn.close()
+
+    return {
+        "invoice_id": inv_id,
+        "po_number": agent_po_number or po_number_ctx,  # Prefer agent's extracted PO number
+        "evaluation": evaluation,
+        "details": {
+            "metrics": {
+                "confidence_score": confidence,
+                "processing_ms": processing_ms,
+                "extractions_count": extractions_count,
+            },
+            "approval_decision": approval_decision,
+            "backorders": {
+                "items": backorders,
+                "count": len(backorders),
+            },
+            "invoice": {
+                "invoice_number": inv.get("invoice_number") or "",
+                "supplier": inv.get("supplier") or "",
+                "po_number": inv.get("po_number") or "",
+                "total_amount": inv.get("total_amount") or "",
+                "currency": inv.get("currency") or "",
+                "file_name": invoice.filename or "",
+            },
+            "po": {
+                "po_number": agent_po_number or po_number_ctx,  # Use agent's extracted PO number
+                "supplier": po_header.get("supplier") or "",
+                "po_amount": po_header.get("po_amount"),
+                "currency": po_header.get("currency") or "",
+                "line_items_count": len(po_rows),
+                "source_filename": po_file.filename or "",
+            },
+            "supplier_validation": {
+                "status": sv.get("supplier_status", "Unknown"),
+                "best_match": sv.get("supplier_validated") or "",
+                "match_score": sv.get("supplier_match_score"),
+                "notes": sv.get("notes") or "",
+            },
+            "ocr": ocr_json,
+        },
+        "duplicate_matches": dup_matches,
+        "blocked": False,
+    }
+
+
+# -------------------------
+# SPA routes (must be last)
+# -------------------------
+@app.get("/", include_in_schema=False)
+def spa_index():
+    if FRONTEND_DIST.exists():
+        return FileResponse(str(FRONTEND_DIST / "index.html"))
+    return HTMLResponse(
+        """
+        <html><body style="font-family:system-ui;padding:24px">
+          <h2>AP Agent</h2>
+          <p>Frontend is not built yet.</p>
+          <pre>cd frontend\nnpm install\nnpm run build</pre>
+          <p>Then run the server again.</p>
+        </body></html>
+        """.strip(),
+        status_code=200,
+    )
+
+
+@app.get("/{full_path:path}", include_in_schema=False)
+def spa_fallback(full_path: str):
+    # SPA fallback for client-side routing; must not swallow /api/*
+    if full_path.startswith("api/") or full_path == "api":
+        return HTMLResponse("Not found", status_code=404)
+    if FRONTEND_DIST.exists():
+        p = FRONTEND_DIST / full_path
+        if p.exists() and p.is_file():
+            return FileResponse(str(p))
+        return FileResponse(str(FRONTEND_DIST / "index.html"))
+    return HTMLResponse("Not found", status_code=404)
+
+

debug.log

@@ -0,0 +1,4 @@
+[0102/135446.143:ERROR:third_party\crashpad\crashpad\util\win\registration_protocol_win.cc:108] CreateFile: The system cannot find the file specified. (0x2)
+[0102/141610.439:ERROR:third_party\crashpad\crashpad\util\win\registration_protocol_win.cc:108] CreateFile: The system cannot find the file specified. (0x2)
+[0102/160659.061:ERROR:third_party\crashpad\crashpad\util\win\registration_protocol_win.cc:108] CreateFile: The system cannot find the file specified. (0x2)
+[0102/160724.764:ERROR:third_party\crashpad\crashpad\util\win\registration_protocol_win.cc:108] CreateFile: The system cannot find the file specified. (0x2)

frontend/dist/assets/index-Lye-aeXV.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.bottom-6{bottom:1.5rem}.right-6{right:1.5rem}.top-0{top:0}.top-6{top:1.5rem}.z-50{z-index:50}.z-\[60\]{z-index:60}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-1{height:.25rem}.h-12{height:3rem}.h-9{height:2.25rem}.h-\[420px\]{height:420px}.max-h-\[38vh\]{max-height:38vh}.max-h-\[420px\]{max-height:420px}.max-h-\[70vh\]{max-height:70vh}.max-h-\[75vh\]{max-height:75vh}.max-h-\[calc\(100vh-6\.5rem\)\]{max-height:calc(100vh - 6.5rem)}.min-h-screen{min-height:100vh}.w-12{width:3rem}.w-9{width:2.25rem}.w-full{width:100%}.min-w-0{min-width:0px}.min-w-full{min-width:100%}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}.max-w-\[1280px\]{max-width:1280px}.max-w-\[520px\]{max-width:520px}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-amber-600\/20{border-color:#d9770633}.border-amber-600\/25{border-color:#d9770640}.border-brand{--tw-border-opacity: 1;border-color:rgb(79 70 229 / var(--tw-border-opacity, 1))}.border-emerald-500{--tw-border-opacity: 1;border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))}.border-emerald-600\/25{border-color:#05966940}.border-rose-600\/20{border-color:#e11d4833}.border-rose-600\/25{border-color:#e11d4840}.border-stroke{border-color:#0f172a1a}.bg-amber-500\/10{background-color:#f59e0b1a}.bg-bg{--tw-bg-opacity: 1;background-color:rgb(246 247 251 / var(--tw-bg-opacity, 1))}.bg-black\/0{background-color:#0000}.bg-black\/40{background-color:#0006}.bg-brand{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-brand\/10{background-color:#4f46e51a}.bg-emerald-500{--tw-bg-opacity: 1;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))}.bg-emerald-500\/10{background-color:#10b9811a}.bg-panel{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-rose-500\/10{background-color:#f43f5e1a}.bg-stroke{background-color:#0f172a1a}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.object-contain{-o-object-fit:contain;object-fit:contain}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-4{padding-bottom:1rem}.pr-1{padding-right:.25rem}.pr-4{padding-right:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[11px\]{font-size:11px}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.text-amber-800{--tw-text-opacity: 1;color:rgb(146 64 14 / var(--tw-text-opacity, 1))}.text-brand{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-emerald-700{--tw-text-opacity: 1;color:rgb(4 120 87 / var(--tw-text-opacity, 1))}.text-ink{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-ink\/70{color:#0f172ab3}.text-ink\/80{color:#0f172acc}.text-muted{color:#0f172aa6}.text-rose-700{--tw-text-opacity: 1;color:rgb(190 18 60 / var(--tw-text-opacity, 1))}.text-rose-700\/90{color:#be123ce6}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.shadow-glow{--tw-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 18px 40px rgba(15,23,42,.08);--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 18px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-soft{--tw-shadow: 0 1px 0 rgba(15,23,42,.04), 0 10px 24px rgba(15,23,42,.06);--tw-shadow-colored: 0 1px 0 var(--tw-shadow-color), 0 10px 24px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-2{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-brand\/15{--tw-ring-color: rgb(79 70 229 / .15)}.ring-brand\/20{--tw-ring-color: rgb(79 70 229 / .2)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}:root{color-scheme:light}html,body{height:100%;background:#f6f7fb}.bg-clean{background:radial-gradient(900px 500px at 15% 0%,rgba(79,70,229,.1),transparent 60%),radial-gradient(700px 450px at 85% 0%,rgba(16,185,129,.08),transparent 60%),linear-gradient(#f6f7fb,#f6f7fb)}@keyframes floaty{0%{transform:translateZ(0) scale(1);opacity:.65}50%{transform:translate3d(18px,-14px,0) scale(1.06);opacity:.8}to{transform:translate3d(-10px,10px,0) scale(1.02);opacity:.7}}.aurora{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.aurora-blob{position:absolute;filter:blur(30px);border-radius:9999px;mix-blend-mode:multiply;animation:floaty 12s ease-in-out infinite}.aurora-blob.b1{width:520px;height:520px;left:-160px;top:-180px;background:#4f46e524;animation-duration:14s}.aurora-blob.b2{width:440px;height:440px;right:-160px;top:-140px;background:#10b9811f;animation-duration:16s}.aurora-blob.b3{width:520px;height:520px;left:25%;bottom:-220px;background:#6366f11a;animation-duration:18s}*::-webkit-scrollbar{height:10px;width:10px}*::-webkit-scrollbar-thumb{background:#0f172a26;border-radius:999px}*::-webkit-scrollbar-track{background:transparent}.placeholder\:text-muted::-moz-placeholder{color:#0f172aa6}.placeholder\:text-muted::placeholder{color:#0f172aa6}.hover\:bg-bg:hover{--tw-bg-opacity: 1;background-color:rgb(246 247 251 / var(--tw-bg-opacity, 1))}.hover\:bg-white\/70:hover{background-color:#ffffffb3}.hover\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-brand\/15:hover{--tw-shadow-color: rgb(79 70 229 / .15);--tw-shadow: var(--tw-shadow-colored)}.hover\:brightness-105:hover{--tw-brightness: brightness(1.05);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.disabled\:opacity-40:disabled{opacity:.4}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width: 640px){.sm\:inline{display:inline}}@media (min-width: 768px){.md\:col-span-2{grid-column:span 2 / span 2}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 1024px){.lg\:sticky{position:sticky}.lg\:top-0{top:0}.lg\:col-span-12{grid-column:span 12 / span 12}.lg\:h-screen{height:100vh}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:border-b-0{border-bottom-width:0px}.lg\:border-r{border-right-width:1px}}

frontend/dist/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AP Agent Demo</title>
+    <script type="module" crossorigin src="/assets/index-CUicmmlc.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Lye-aeXV.css">
+  </head>
+  <body class="bg-bg text-ink">
+    <div id="root"></div>
+  </body>
+</html>
+
+

frontend/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AP Agent Demo</title>
+  </head>
+  <body class="bg-bg text-ink">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+
+

frontend/package-lock.json

@@ -0,0 +1,2667 @@
+{
+  "name": "ap-agent-frontend",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "ap-agent-frontend",
+      "version": "0.1.0",
+      "dependencies": {
+        "framer-motion": "^11.0.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
+      },
+      "devDependencies": {
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
+        "@vitejs/plugin-react": "^4.3.4",
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.49",
+        "tailwindcss": "^3.4.16",
+        "typescript": "^5.6.3",
+        "vite": "^5.4.11"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
+      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
+      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.5"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.5",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.54.0.tgz",
+      "integrity": "sha512-OywsdRHrFvCdvsewAInDKCNyR3laPA2mc9bRYJ6LBp5IyvF3fvXbbNR0bSzHlZVFtn6E0xw2oZlyjg4rKCVcng==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.54.0.tgz",
+      "integrity": "sha512-Skx39Uv+u7H224Af+bDgNinitlmHyQX1K/atIA32JP3JQw6hVODX5tkbi2zof/E69M1qH2UoN3Xdxgs90mmNYw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.54.0.tgz",
+      "integrity": "sha512-k43D4qta/+6Fq+nCDhhv9yP2HdeKeP56QrUUTW7E6PhZP1US6NDqpJj4MY0jBHlJivVJD5P8NxrjuobZBJTCRw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.54.0.tgz",
+      "integrity": "sha512-cOo7biqwkpawslEfox5Vs8/qj83M/aZCSSNIWpVzfU2CYHa2G3P1UN5WF01RdTHSgCkri7XOlTdtk17BezlV3A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.54.0.tgz",
+      "integrity": "sha512-miSvuFkmvFbgJ1BevMa4CPCFt5MPGw094knM64W9I0giUIMMmRYcGW/JWZDriaw/k1kOBtsWh1z6nIFV1vPNtA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.54.0.tgz",
+      "integrity": "sha512-KGXIs55+b/ZfZsq9aR026tmr/+7tq6VG6MsnrvF4H8VhwflTIuYh+LFUlIsRdQSgrgmtM3fVATzEAj4hBQlaqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.54.0.tgz",
+      "integrity": "sha512-EHMUcDwhtdRGlXZsGSIuXSYwD5kOT9NVnx9sqzYiwAc91wfYOE1g1djOEDseZJKKqtHAHGwnGPQu3kytmfaXLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.54.0.tgz",
+      "integrity": "sha512-+pBrqEjaakN2ySv5RVrj/qLytYhPKEUwk+e3SFU5jTLHIcAtqh2rLrd/OkbNuHJpsBgxsD8ccJt5ga/SeG0JmA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.54.0.tgz",
+      "integrity": "sha512-NSqc7rE9wuUaRBsBp5ckQ5CVz5aIRKCwsoa6WMF7G01sX3/qHUw/z4pv+D+ahL1EIKy6Enpcnz1RY8pf7bjwng==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.54.0.tgz",
+      "integrity": "sha512-gr5vDbg3Bakga5kbdpqx81m2n9IX8M6gIMlQQIXiLTNeQW6CucvuInJ91EuCJ/JYvc+rcLLsDFcfAD1K7fMofg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.54.0.tgz",
+      "integrity": "sha512-gsrtB1NA3ZYj2vq0Rzkylo9ylCtW/PhpLEivlgWe0bpgtX5+9j9EZa0wtZiCjgu6zmSeZWyI/e2YRX1URozpIw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.54.0.tgz",
+      "integrity": "sha512-y3qNOfTBStmFNq+t4s7Tmc9hW2ENtPg8FeUD/VShI7rKxNW7O4fFeaYbMsd3tpFlIg1Q8IapFgy7Q9i2BqeBvA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.54.0.tgz",
+      "integrity": "sha512-89sepv7h2lIVPsFma8iwmccN7Yjjtgz0Rj/Ou6fEqg3HDhpCa+Et+YSufy27i6b0Wav69Qv4WBNl3Rs6pwhebQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.54.0.tgz",
+      "integrity": "sha512-ZcU77ieh0M2Q8Ur7D5X7KvK+UxbXeDHwiOt/CPSBTI1fBmeDMivW0dPkdqkT4rOgDjrDDBUed9x4EgraIKoR2A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.54.0.tgz",
+      "integrity": "sha512-2AdWy5RdDF5+4YfG/YesGDDtbyJlC9LHmL6rZw6FurBJ5n4vFGupsOBGfwMRjBYH7qRQowT8D/U4LoSvVwOhSQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.54.0.tgz",
+      "integrity": "sha512-WGt5J8Ij/rvyqpFexxk3ffKqqbLf9AqrTBbWDk7ApGUzaIs6V+s2s84kAxklFwmMF/vBNGrVdYgbblCOFFezMQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.54.0.tgz",
+      "integrity": "sha512-JzQmb38ATzHjxlPHuTH6tE7ojnMKM2kYNzt44LO/jJi8BpceEC8QuXYA908n8r3CNuG/B3BV8VR3Hi1rYtmPiw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.54.0.tgz",
+      "integrity": "sha512-huT3fd0iC7jigGh7n3q/+lfPcXxBi+om/Rs3yiFxjvSxbSB6aohDFXbWvlspaqjeOh+hx7DDHS+5Es5qRkWkZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.54.0.tgz",
+      "integrity": "sha512-c2V0W1bsKIKfbLMBu/WGBz6Yci8nJ/ZJdheE0EwB73N3MvHYKiKGs3mVilX4Gs70eGeDaMqEob25Tw2Gb9Nqyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.54.0.tgz",
+      "integrity": "sha512-woEHgqQqDCkAzrDhvDipnSirm5vxUXtSKDYTVpZG3nUdW/VVB5VdCYA2iReSj/u3yCZzXID4kuKG7OynPnB3WQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.54.0.tgz",
+      "integrity": "sha512-dzAc53LOuFvHwbCEOS0rPbXp6SIhAf2txMP5p6mGyOXXw5mWY8NGGbPMPrs4P1WItkfApDathBj/NzMLUZ9rtQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.54.0.tgz",
+      "integrity": "sha512-hYT5d3YNdSh3mbCU1gwQyPgQd3T2ne0A3KG8KSBdav5TiBg6eInVmV+TeR5uHufiIgSFg0XsOWGW5/RhNcSvPg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.27",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
+      "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.23",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
+      "integrity": "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001760",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.11",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz",
+      "integrity": "sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001761",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001761.tgz",
+      "integrity": "sha512-JF9ptu1vP2coz98+5051jZ4PwQgd2ni8A+gYSN7EA7dPKIMf0pDlSUxhdmVOaV3/fYK5uWBkgSXJaRLr4+3A6g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.267",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
+      "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "11.18.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.2.tgz",
+      "integrity": "sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^11.18.1",
+        "motion-utils": "^11.18.1",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "11.18.1",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",
+      "integrity": "sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^11.18.1"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "11.18.1",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.18.1.tgz",
+      "integrity": "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==",
+      "license": "MIT"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
+      "integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.54.0",
+        "@rollup/rollup-android-arm64": "4.54.0",
+        "@rollup/rollup-darwin-arm64": "4.54.0",
+        "@rollup/rollup-darwin-x64": "4.54.0",
+        "@rollup/rollup-freebsd-arm64": "4.54.0",
+        "@rollup/rollup-freebsd-x64": "4.54.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.54.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.54.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.54.0",
+        "@rollup/rollup-linux-arm64-musl": "4.54.0",
+        "@rollup/rollup-linux-loong64-gnu": "4.54.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.54.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.54.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.54.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.54.0",
+        "@rollup/rollup-linux-x64-gnu": "4.54.0",
+        "@rollup/rollup-linux-x64-musl": "4.54.0",
+        "@rollup/rollup-openharmony-arm64": "4.54.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.54.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.54.0",
+        "@rollup/rollup-win32-x64-gnu": "4.54.0",
+        "@rollup/rollup-win32-x64-msvc": "4.54.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "ap-agent-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "framer-motion": "^11.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11"
+  }
+}
+
+

frontend/postcss.config.js

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

frontend/src/App.tsx

@@ -0,0 +1,1687 @@
+import { useEffect, useMemo, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { analyze, AnalyzeResponse, clearDb, getHistory, getHistoryDetail, health, HistoryItem, InvoiceDetail } from "./api";
+import { Card } from "./components/Card";
+import { FileDrop } from "./components/FileDrop";
+import { MultiFileDrop } from "./components/MultiFileDrop";
+import { Badge } from "./components/Badge";
+import { BadgeButton } from "./components/BadgeButton";
+import { StepBar, StepState } from "./components/StepBar";
+import { InvoiceCarouselPreview, PoPreview } from "./components/FilePreview";
+import { LogoMark } from "./components/LogoMark";
+import { ShareButton } from "./components/ShareButton";
+import { BookLoader } from "./components/BookLoader";
+
+function IconGrid() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+      <path
+        d="M3 3h6v6H3V3Zm8 0h6v6h-6V3ZM3 11h6v6H3v-6Zm8 0h6v6h-6v-6Z"
+        fill="currentColor"
+        opacity="0.9"
+      />
+    </svg>
+  );
+}
+
+function IconClock() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+      <path
+        d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-13a1 1 0 0 1 1 1v3.6l2.3 1.3a1 1 0 1 1-1 1.7l-2.8-1.6A1 1 0 0 1 9 10V6a1 1 0 0 1 1-1Z"
+        fill="currentColor"
+        opacity="0.9"
+      />
+    </svg>
+  );
+}
+
+function IconChevron({ dir }: { dir: "left" | "right" }) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+      {dir === "left" ? (
+        <path d="M12.5 4.5 7 10l5.5 5.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      ) : (
+        <path d="M7.5 4.5 13 10l-5.5 5.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      )}
+    </svg>
+  );
+}
+
+function IconSearch() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+      <path
+        d="M9 16a7 7 0 1 1 0-14 7 7 0 0 1 0 14Zm6.2 1.6-3.1-3.1"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function IconFilter() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+      <path
+        d="M3 4h14l-5.5 6v5l-3 1v-6L3 4Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function IconFile() {
+  return (
+    <svg width="22" height="22" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+      <path
+        d="M6 2h5l3 3v13H6V2Z"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinejoin="round"
+      />
+      <path d="M11 2v3h3" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
+      <path d="M7.5 10h5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+      <path d="M7.5 13h5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function toneForStatus(status: string): "ok" | "warn" | "bad" | "neutral" {
+  if (status === "Matched") return "ok";
+  if (status === "Review") return "warn";
+  if (status === "Unmatched") return "bad";
+  return "neutral";
+}
+
+function toneForApprovalDecision(label?: string | null): "ok" | "warn" | "bad" | "neutral" {
+  const v = String(label || "");
+  if (v === "Approved") return "ok";
+  if (v === "Partially Approved") return "warn";
+  if (v === "Rejected") return "bad";
+  return "neutral";
+}
+
+function fmtDate(s?: string) {
+  if (!s) return "—";
+  // ISO string from backend (UTC). Keep it readable without heavy libs.
+  return s.replace("T", " ").replace("Z", "");
+}
+
+function fmtPct01(v?: number | null) {
+  if (v === null || v === undefined) return "—";
+  const n = Number(v);
+  if (!Number.isFinite(n)) return "—";
+  const x = n > 1 && n <= 100 ? n / 100 : n; // tolerate percent-style values
+  return `${Math.round(Math.max(0, Math.min(1, x)) * 100)}%`;
+}
+
+function fmtMs(v?: number | null) {
+  if (v === null || v === undefined) return "—";
+  const n = Number(v);
+  if (!Number.isFinite(n)) return "—";
+  if (n < 1000) return `${Math.round(n)} ms`;
+  return `${(n / 1000).toFixed(2)} s`;
+}
+
+function poFromFilename(fileName?: string | null): string | null {
+  const fn = (fileName || "").trim();
+  if (!fn) return null;
+  const m = fn.match(/PO[-_ ]?\d{3,}/i);
+  if (!m) return null;
+  const raw = m[0].replace("_", "-").replace(" ", "-").toUpperCase();
+  return raw.replace(/PO-(\d+)/i, "PO-$1");
+}
+
+function poDisplay(po?: string | null, fileName?: string | null): string {
+  return poFromFilename(fileName) || (po || "").trim() || "—";
+}
+
+function fmtSecCompact(v?: number | null) {
+  if (v === null || v === undefined) return "—";
+  const n = Number(v);
+  if (!Number.isFinite(n)) return "—";
+  const sec = n / 1000;
+  if (sec < 1) return `${Math.round(n)}ms`;
+  return `${sec.toFixed(sec < 10 ? 2 : 1)}s`;
+}
+
+function MetricPill({ label, value }: { label: string; value: string }) {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full border border-stroke bg-white px-2.5 py-1 text-[11px] font-semibold text-ink/80">
+      <span className="text-muted">{label}:</span>
+      <span className="text-ink/80">{value}</span>
+    </span>
+  );
+}
+
+function fmtNum(v: any) {
+  const n = Number(v);
+  if (!Number.isFinite(n)) return "—";
+  return n % 1 === 0 ? String(n) : n.toFixed(2);
+}
+
+function poKey(po?: string | null) {
+  const v = (po || "").trim();
+  return v || "(no PO)";
+}
+
+async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    if (navigator?.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+    // ignore and fall back
+  }
+  try {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.position = "fixed";
+    ta.style.left = "-9999px";
+    ta.style.top = "-9999px";
+    document.body.appendChild(ta);
+    ta.focus();
+    ta.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(ta);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+
+function downloadTextFile(filename: string, content: string, mime: string) {
+  const blob = new Blob([content], { type: mime });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  window.setTimeout(() => URL.revokeObjectURL(url), 2000);
+}
+
+function escapeXml(s: string) {
+  return (s ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/\"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+function jsonToXml(value: any, tagName = "root"): string {
+  const tag = escapeXml(tagName || "root");
+  if (value === null || value === undefined) return `<${tag}/>`;
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return `<${tag}>${escapeXml(String(value))}</${tag}>`;
+  }
+  if (Array.isArray(value)) {
+    return `<${tag}>${value.map((v) => jsonToXml(v, "item")).join("")}</${tag}>`;
+  }
+  if (typeof value === "object") {
+    const inner = Object.entries(value)
+      .map(([k, v]) => jsonToXml(v, k))
+      .join("");
+    return `<${tag}>${inner}</${tag}>`;
+  }
+  return `<${tag}>${escapeXml(String(value))}</${tag}>`;
+}
+
+export default function App() {
+  const [page, setPage] = useState<"dashboard" | "history">("dashboard");
+  const [stage, setStage] = useState<"upload" | "preview" | "analyzing" | "result">("upload");
+  const [invoices, setInvoices] = useState<File[]>([]);
+  const [activeInvoiceIdx, setActiveInvoiceIdx] = useState(0);
+  const [po, setPo] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [analysisRuns, setAnalysisRuns] = useState<{ file: File; result?: AnalyzeResponse; error?: string }[]>([]);
+  const [activeResultIdx, setActiveResultIdx] = useState(0);
+  const [analyzingIdx, setAnalyzingIdx] = useState<number | null>(null);
+  const [toast, setToast] = useState<string | null>(null);
+  const [ocrOpen, setOcrOpen] = useState(false);
+  const [historyJsonOpen, setHistoryJsonOpen] = useState(false);
+
+  // History state
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [historyError, setHistoryError] = useState<string | null>(null);
+  const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
+  const [historySearch, setHistorySearch] = useState<string>("");
+  const [historyStatusFilter, setHistoryStatusFilter] = useState<string>("");
+  const [selectedHistoryId, setSelectedHistoryId] = useState<string | null>(null);
+  const [historyDetailLoading, setHistoryDetailLoading] = useState(false);
+  const [historyDetail, setHistoryDetail] = useState<InvoiceDetail | null>(null);
+  const [historyDetailsOpen, setHistoryDetailsOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState<boolean>(() => {
+    try {
+      const v = localStorage.getItem("apdemo.sidebarCollapsed");
+      return v === null ? false : v === "true";
+    } catch {
+      return false;
+    }
+  });
+
+  const activeInvoice = invoices[activeInvoiceIdx] || null;
+  const activeRun = analysisRuns[activeResultIdx] || null;
+  const activeAnalysis = activeRun?.result || null;
+  const hasOcr = Boolean(activeAnalysis?.details?.ocr);
+  const hasHistoryExtracted = Boolean(historyDetail?.extracted_invoice);
+  const canNext = Boolean(invoices.length > 0 && po && !loading && stage === "upload");
+  const canStartAnalyze = Boolean(invoices.length > 0 && po && !loading && stage === "preview");
+  const showResultsPanel = stage !== "upload";
+  const hasUploads = Boolean(invoices.length > 0 && po);
+
+  // Keep active index valid as files are added/removed.
+  useEffect(() => {
+    setActiveInvoiceIdx((cur) => Math.max(0, Math.min(cur, Math.max(0, invoices.length - 1))));
+  }, [invoices.length]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem("apdemo.sidebarCollapsed", String(sidebarCollapsed));
+    } catch {
+      // ignore
+    }
+  }, [sidebarCollapsed]);
+
+  useEffect(() => {
+    if (!toast) return;
+    const t = window.setTimeout(() => setToast(null), 1800);
+    return () => window.clearTimeout(t);
+  }, [toast]);
+
+  // Load history when switching to the History tab.
+  useEffect(() => {
+    if (page !== "history") return;
+    let cancelled = false;
+
+    (async () => {
+      setHistoryError(null);
+      setHistoryLoading(true);
+      try {
+        const r = await getHistory({ limit: 200 });
+        if (cancelled) return;
+        setHistoryItems(r.items || []);
+      } catch (e: any) {
+        if (cancelled) return;
+        setHistoryItems([]);
+        setHistoryError(e?.message || String(e));
+      } finally {
+        if (!cancelled) setHistoryLoading(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [page]);
+
+  // Load selected history detail
+  useEffect(() => {
+    if (page !== "history") return;
+    if (!selectedHistoryId) {
+      setHistoryDetail(null);
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      setHistoryDetailLoading(true);
+      try {
+        const d = await getHistoryDetail(selectedHistoryId);
+        if (cancelled) return;
+        setHistoryDetail(d);
+      } catch (e: any) {
+        if (cancelled) return;
+        setHistoryDetail(null);
+        setHistoryError(e?.message || String(e));
+      } finally {
+        if (!cancelled) setHistoryDetailLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [page, selectedHistoryId]);
+
+  const stepState = useMemo(() => {
+    const upload: StepState = stage === "upload" ? "active" : "done";
+    // Keep the 3-step bar, but make it unambiguous:
+    // - Upload: active only on upload screen
+    // - Analyze: active only while analyzing (not while previewing)
+    // - Complete: done only when results are shown
+    const analyze: StepState = stage === "analyzing" ? "active" : stage === "result" ? "done" : "todo";
+    const complete: StepState = stage === "result" ? "done" : "todo";
+    return { upload, analyze, complete };
+  }, [stage]);
+
+  const loadingSteps = [
+    "Understanding PO CSV…",
+    "Reading invoice…",
+    "Matching headers and items…",
+    "Generating explanation…"
+  ];
+
+  const kpis = useMemo(() => {
+    if (!activeAnalysis) return null;
+    const e = activeAnalysis.evaluation;
+    const decisionLabel =
+      (activeAnalysis.details as any)?.approval_decision ||
+      (e as any)?.approval_decision ||
+      "";
+    const decisionTone = toneForApprovalDecision(decisionLabel) || toneForStatus(e.match_status);
+    return [
+      { label: "Decision", value: decisionLabel || e.match_status, badge: decisionLabel ? decisionTone : toneForStatus(e.match_status) },
+      { label: "Duplicate", value: e.duplicate ? "Yes" : "No", badge: e.duplicate ? "bad" : "ok" },
+      { label: "Supplier", value: e.supplier_status || "—", badge: e.supplier_status === "Validated" ? "ok" : "warn" },
+      { label: "Backorders", value: String(e.open_backorders?.length ?? 0), badge: (e.open_backorders?.length ?? 0) > 0 ? "warn" : "ok" }
+    ] as const;
+  }, [activeAnalysis]);
+
+  const filteredHistoryItems = useMemo(() => {
+    const q = historySearch.trim().toLowerCase();
+    const s = (historyStatusFilter || "").trim();
+    return (historyItems || []).filter((it) => {
+      if (s) {
+        const label = String((it as any).approval_decision || "");
+        if ((label || "").trim() !== s) return false;
+      }
+      if (!q) return true;
+      const hay = [
+        it.file_name,
+        it.invoice_number,
+        it.supplier,
+        it.po_number,
+        it.id,
+      ]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+      return hay.includes(q);
+    });
+  }, [historyItems, historySearch, historyStatusFilter]);
+
+  const historySummary = useMemo(() => {
+    const items = filteredHistoryItems || [];
+    const total = items.length;
+    const successes = items.filter((it) => String((it as any).approval_decision || "") === "Approved").length;
+    const successRate = total > 0 ? successes / total : 0;
+    const ms = items.map((it) => Number(it.processing_ms)).filter((n) => Number.isFinite(n)) as number[];
+    const avgMs = ms.length ? ms.reduce((a, b) => a + b, 0) / ms.length : null;
+    const fieldsTotal = items
+      .map((it) => Number(it.extractions_count))
+      .filter((n) => Number.isFinite(n))
+      .reduce((a, b) => a + b, 0);
+    return { total, successes, successRate, avgMs, fieldsTotal };
+  }, [filteredHistoryItems]);
+
+  function onNext() {
+    if (!invoices.length || !po) return;
+    setError(null);
+    setAnalysisRuns([]);
+    setActiveResultIdx(0);
+    setStage("preview");
+  }
+
+  async function onStartAnalyze() {
+    if (!invoices.length || !po) return;
+    setError(null);
+    setAnalysisRuns([]);
+    setActiveResultIdx(0);
+    setStage("analyzing");
+    setLoading(true);
+    setAnalyzingIdx(0);
+    try {
+      // quick preflight to surface config issues
+      const h = await health();
+      if (!h.ok) throw new Error(h.error || "Backend not ready");
+
+      const runs: { file: File; result?: AnalyzeResponse; error?: string }[] = [];
+      for (let i = 0; i < invoices.length; i++) {
+        const inv = invoices[i];
+        setAnalyzingIdx(i);
+        try {
+          const r = await analyze(inv, po);
+          runs.push({ file: inv, result: r });
+        } catch (e: any) {
+          runs.push({ file: inv, error: e?.message || String(e) });
+        }
+        // keep UI responsive while analyzing multiple invoices
+        setAnalysisRuns([...runs]);
+      }
+      setActiveResultIdx(0);
+      setStage("result");
+    } catch (e: any) {
+      setAnalysisRuns([]);
+      setError(e?.message || String(e));
+      setStage("preview");
+    } finally {
+      setLoading(false);
+      setAnalyzingIdx(null);
+    }
+  }
+
+  async function onClear() {
+    setError(null);
+    setLoading(true);
+    try {
+      await clearDb();
+      setAnalysisRuns([]);
+      setActiveResultIdx(0);
+      setStage("upload");
+    } catch (e: any) {
+      setError(e?.message || String(e));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-clean">
+      <div className="aurora">
+        <div className="aurora-blob b1" />
+        <div className="aurora-blob b2" />
+        <div className="aurora-blob b3" />
+      </div>
+      <div className="flex min-h-screen">
+        {/* Sidebar (anchored left, full height) */}
+        <motion.aside
+          className="w-full border-b border-stroke bg-white lg:sticky lg:top-0 lg:h-screen lg:border-b-0 lg:border-r"
+          animate={{ width: sidebarCollapsed ? 80 : 288 }}
+          transition={{ type: "spring", stiffness: 260, damping: 26 }}
+        >
+          <div className="flex items-center justify-between gap-2 px-4 py-4">
+            <div className="flex items-center gap-3">
+              <LogoMark size={26} />
+              {!sidebarCollapsed && (
+                <motion.div initial={{ opacity: 0, y: 4 }} animate={{ opacity: 1, y: 0 }} className="min-w-0">
+                  <div className="truncate text-sm font-semibold text-ink">AP Demo</div>
+                  <div className="truncate text-[11px] text-muted">Agent-powered</div>
+                </motion.div>
+              )}
+            </div>
+            <button
+              type="button"
+              onClick={() => setSidebarCollapsed((v) => !v)}
+              className="ml-auto inline-flex items-center justify-center rounded-lg border border-stroke bg-white p-2 text-ink hover:bg-bg"
+              aria-label={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+              title={sidebarCollapsed ? "Expand" : "Collapse"}
+            >
+              <IconChevron dir={sidebarCollapsed ? "right" : "left"} />
+            </button>
+          </div>
+
+          <div className="px-3 pb-4">
+            <motion.button
+              whileHover={{ x: 2 }}
+              whileTap={{ scale: 0.98 }}
+              className={`flex w-full items-center gap-3 rounded-xl px-4 py-3 text-left text-sm font-semibold ${
+                page === "dashboard" ? "bg-bg text-ink" : "text-muted hover:bg-bg"
+              }`}
+              onClick={() => setPage("dashboard")}
+              title="Dashboard"
+            >
+              <span className="text-ink/80">
+                <IconGrid />
+              </span>
+              {!sidebarCollapsed && <span>Dashboard</span>}
+            </motion.button>
+            <motion.button
+              whileHover={{ x: 2 }}
+              whileTap={{ scale: 0.98 }}
+              className={`mt-1 flex w-full items-center gap-3 rounded-xl px-4 py-3 text-left text-sm font-semibold ${
+                page === "history" ? "bg-bg text-ink" : "text-muted hover:bg-bg"
+              }`}
+              onClick={() => setPage("history")}
+              title="History"
+            >
+              <span className="text-ink/80">
+                <IconClock />
+              </span>
+              {!sidebarCollapsed && <span>History</span>}
+            </motion.button>
+          </div>
+        </motion.aside>
+
+        {/* Main */}
+        <main className="min-w-0 flex-1">
+          <div className="mx-auto w-full max-w-[1280px] px-6 py-6">
+          <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
+            {page === "dashboard" ? (
+              <>
+                <div className="flex items-start gap-3">
+                  <motion.div initial={{ opacity: 0, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.25 }}>
+                    <LogoMark size={34} />
+                  </motion.div>
+                  <div>
+                    <motion.div
+                      initial={{ opacity: 0, y: 8 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ duration: 0.25, ease: "easeOut" }}
+                      className="text-xl font-bold text-ink"
+                    >
+                      Accounts Payable Agent
+                    </motion.div>
+                    <div className="mt-1 text-sm text-muted">
+                      Upload an invoice and PO data. The agent returns a clear decision: <b>Approved</b> (Matched), <b>Review</b>, or <b>Unmatched</b>.
+                    </div>
+                    <div className="mt-2 text-xs text-muted">AP Demo · Agent-powered</div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <ShareButton
+                    title="Accounts Payable Agent"
+                    text="Open this AP Agent demo"
+                    url={window.location.href}
+                    onToast={(m) => setToast(m)}
+                  />
+                </div>
+              </>
+            ) : (
+              <div>
+                <div className="text-xl font-bold text-ink">Extraction History</div>
+                <div className="mt-1 text-sm text-muted">View detailed reports and performance metrics for all extractions</div>
+              </div>
+            )}
+          </div>
+
+          <AnimatePresence>
+            {toast && (
+              <motion.div
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 10 }}
+                className="fixed bottom-6 right-6 z-50 rounded-xl border border-stroke bg-white px-4 py-3 text-sm font-semibold text-ink shadow-glow"
+              >
+                {toast}
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* OCR JSON modal */}
+          <AnimatePresence>
+            {ocrOpen && (
+              <motion.div
+                key="ocr-modal"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 p-4"
+                onMouseDown={(e) => {
+                  if (e.target === e.currentTarget) setOcrOpen(false);
+                }}
+              >
+                <motion.div
+                  initial={{ opacity: 0, y: 10, scale: 0.98 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: 10, scale: 0.98 }}
+                  transition={{ duration: 0.18, ease: "easeOut" }}
+                  className="w-full max-w-3xl rounded-2xl border border-stroke bg-white shadow-glow"
+                >
+                  <div className="flex items-center justify-between gap-3 border-b border-stroke px-5 py-4">
+                    <div>
+                      <div className="text-sm font-semibold text-ink">Extracted JSON</div>
+                      <div className="mt-0.5 text-xs text-muted">
+                        {activeRun?.file?.name || "Invoice"} · provider: {String(activeAnalysis?.details?.ocr?.provider || "unknown")}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <button
+                        type="button"
+                        className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg disabled:opacity-40"
+                        onClick={async () => {
+                          const extracted = activeAnalysis?.details?.ocr?.extracted_invoice || {};
+                          const payload = JSON.stringify(extracted, null, 2);
+                          const ok = await copyToClipboard(payload);
+                          setToast(ok ? "Copied extracted JSON" : "Copy failed (try Download)");
+                        }}
+                        disabled={!hasOcr}
+                      >
+                        Copy JSON
+                      </button>
+                      <button
+                        type="button"
+                        className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg disabled:opacity-40"
+                        onClick={() => {
+                          const base = (activeRun?.file?.name || "invoice").replace(/\.[^.]+$/, "");
+                          const extracted = activeAnalysis?.details?.ocr?.extracted_invoice || {};
+                          downloadTextFile(`${base}.json`, JSON.stringify(extracted, null, 2), "application/json;charset=utf-8");
+                          setToast("Downloaded .json");
+                        }}
+                        disabled={!hasOcr}
+                      >
+                        JSON
+                      </button>
+                      <button
+                        type="button"
+                        className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg disabled:opacity-40"
+                        onClick={() => {
+                          const base = (activeRun?.file?.name || "invoice").replace(/\.[^.]+$/, "");
+                          const extracted = activeAnalysis?.details?.ocr?.extracted_invoice || {};
+                          const xml = `<?xml version="1.0" encoding="UTF-8"?>\n${jsonToXml(extracted, "invoice")}\n`;
+                          downloadTextFile(`${base}.xml`, xml, "application/xml;charset=utf-8");
+                          setToast("Downloaded .xml");
+                        }}
+                        disabled={!hasOcr}
+                      >
+                        XML
+                      </button>
+                      <button
+                        type="button"
+                        className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg disabled:opacity-40"
+                        onClick={() => {
+                          const base = (activeRun?.file?.name || "invoice").replace(/\.[^.]+$/, "");
+                          const ocrText = String(activeAnalysis?.details?.ocr?.text || "");
+                          const extracted = activeAnalysis?.details?.ocr?.extracted_invoice || {};
+                          const txt = `${ocrText}\n\n---\nEXTRACTED_JSON\n---\n${JSON.stringify(extracted, null, 2)}\n`;
+                          downloadTextFile(`${base}.txt`, txt, "text/plain;charset=utf-8");
+                          setToast("Downloaded .txt");
+                        }}
+                        disabled={!hasOcr}
+                      >
+                        TXT
+                      </button>
+                      <button
+                        type="button"
+                        className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg"
+                        onClick={() => setOcrOpen(false)}
+                      >
+                        Close
+                      </button>
+                    </div>
+                  </div>
+                  <div className="px-5 py-4">
+                    {!hasOcr ? (
+                      <div className="text-sm text-muted">No OCR payload available for this result.</div>
+                    ) : (
+                      <div className="space-y-3">
+                        <div className="rounded-lg border border-stroke bg-bg p-3">
+                          <div className="text-xs font-semibold text-ink/80">Extracted invoice JSON</div>
+                          <pre className="mt-2 max-h-[38vh] overflow-auto text-[11px] text-ink/80">
+                            {JSON.stringify(activeAnalysis?.details?.ocr?.extracted_invoice || {}, null, 2)}
+                          </pre>
+                        </div>
+                        <details>
+                          <summary className="cursor-pointer text-xs font-semibold text-ink/80">Show full OCR payload</summary>
+                          <pre className="mt-2 max-h-[38vh] overflow-auto rounded-lg border border-stroke bg-bg p-3 text-[11px] text-ink/80">
+                            {JSON.stringify(activeAnalysis?.details?.ocr || {}, null, 2)}
+                          </pre>
+                        </details>
+                      </div>
+                    )}
+                  </div>
+                </motion.div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* History extracted JSON modal */}
+          <AnimatePresence>
+            {historyJsonOpen && (
+              <motion.div
+                key="history-json-modal"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 p-4"
+                onMouseDown={(e) => {
+                  if (e.target === e.currentTarget) setHistoryJsonOpen(false);
+                }}
+              >
+                <motion.div
+                  initial={{ opacity: 0, y: 10, scale: 0.98 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: 10, scale: 0.98 }}
+                  transition={{ duration: 0.18, ease: "easeOut" }}
+                  className="w-full max-w-3xl rounded-2xl border border-stroke bg-white shadow-glow"
+                >
+                  <div className="flex items-center justify-between gap-3 border-b border-stroke px-5 py-4">
+                    <div>
+                      <div className="text-sm font-semibold text-ink">Extracted JSON (History)</div>
+                      <div className="mt-0.5 text-xs text-muted">{selectedHistoryId ? `Invoice ID: ${selectedHistoryId}` : ""}</div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <button
+                        type="button"
+                        className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg disabled:opacity-40"
+                        onClick={async () => {
+                          const payload = JSON.stringify(historyDetail?.extracted_invoice || {}, null, 2);
+                          const ok = await copyToClipboard(payload);
+                          setToast(ok ? "Copied extracted JSON" : "Copy failed (try Download)");
+                        }}
+                        disabled={!hasHistoryExtracted}
+                      >
+                        Copy JSON
+                      </button>
+                      <button
+                        type="button"
+                        className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg disabled:opacity-40"
+                        onClick={() => {
+                          const base = (historyDetail?.invoice?.file_name || selectedHistoryId || "invoice").replace(/\.[^.]+$/, "");
+                          downloadTextFile(`${base}.json`, JSON.stringify(historyDetail?.extracted_invoice || {}, null, 2), "application/json;charset=utf-8");
+                          setToast("Downloaded .json");
+                        }}
+                        disabled={!hasHistoryExtracted}
+                      >
+                        JSON
+                      </button>
+                      <button
+                        type="button"
+                        className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg disabled:opacity-40"
+                        onClick={() => {
+                          const base = (historyDetail?.invoice?.file_name || selectedHistoryId || "invoice").replace(/\.[^.]+$/, "");
+                          const xml = `<?xml version="1.0" encoding="UTF-8"?>\n${jsonToXml(historyDetail?.extracted_invoice || {}, "invoice")}\n`;
+                          downloadTextFile(`${base}.xml`, xml, "application/xml;charset=utf-8");
+                          setToast("Downloaded .xml");
+                        }}
+                        disabled={!hasHistoryExtracted}
+                      >
+                        XML
+                      </button>
+                      <button
+                        type="button"
+                        className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg disabled:opacity-40"
+                        onClick={() => {
+                          const base = (historyDetail?.invoice?.file_name || selectedHistoryId || "invoice").replace(/\.[^.]+$/, "");
+                          const txt = `${JSON.stringify(historyDetail?.extracted_invoice || {}, null, 2)}\n`;
+                          downloadTextFile(`${base}.txt`, txt, "text/plain;charset=utf-8");
+                          setToast("Downloaded .txt");
+                        }}
+                        disabled={!hasHistoryExtracted}
+                      >
+                        TXT
+                      </button>
+                      <button
+                        type="button"
+                        className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg"
+                        onClick={() => setHistoryJsonOpen(false)}
+                      >
+                        Close
+                      </button>
+                    </div>
+                  </div>
+                  <div className="px-5 py-4">
+                    {!hasHistoryExtracted ? (
+                      <div className="text-sm text-muted">No extracted JSON available for this history item.</div>
+                    ) : (
+                      <pre className="max-h-[70vh] overflow-auto rounded-lg border border-stroke bg-bg p-3 text-[11px] text-ink/80">
+                        {JSON.stringify(historyDetail?.extracted_invoice || {}, null, 2)}
+                      </pre>
+                    )}
+                  </div>
+                </motion.div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* History details modal */}
+          <AnimatePresence>
+            {historyDetailsOpen && (
+              <motion.div
+                key="history-details-modal"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 p-4"
+                onMouseDown={(e) => {
+                  if (e.target === e.currentTarget) setHistoryDetailsOpen(false);
+                }}
+              >
+                <motion.div
+                  initial={{ opacity: 0, y: 10, scale: 0.98 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: 10, scale: 0.98 }}
+                  transition={{ duration: 0.18, ease: "easeOut" }}
+                  className="w-full max-w-5xl rounded-2xl border border-stroke bg-white shadow-glow"
+                >
+                  <div className="flex flex-wrap items-center justify-between gap-3 border-b border-stroke px-5 py-4">
+                    <div className="min-w-0">
+                      <div className="truncate text-sm font-semibold text-ink">Details</div>
+                      <div className="mt-0.5 truncate text-xs text-muted">
+                        {selectedHistoryId ? `Invoice ID: ${selectedHistoryId}` : "—"}
+                      </div>
+                    </div>
+                    <div className="flex flex-wrap items-center justify-end gap-2">
+                      {historyDetailLoading ? <Badge tone="neutral" text="Loading…" /> : null}
+                      {selectedHistoryId && historyDetail && (
+                        <>
+                          <MetricPill label="Confidence" value={fmtPct01(historyDetail.invoice?.match_score ?? null)} />
+                          <MetricPill label="Time" value={fmtMs(historyDetail.invoice?.processing_ms ?? null)} />
+                          <MetricPill label="Extractions" value={String(historyDetail.invoice?.extractions_count ?? "—")} />
+                          <BadgeButton
+                            tone="ok"
+                            text="Extracted JSON"
+                            onClick={() => setHistoryJsonOpen(true)}
+                            disabled={!hasHistoryExtracted}
+                            title={hasHistoryExtracted ? "View extracted JSON" : "No extracted JSON stored for this invoice"}
+                          />
+                        </>
+                      )}
+                      <button
+                        type="button"
+                        className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg"
+                        onClick={() => setHistoryDetailsOpen(false)}
+                      >
+                        Close
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="max-h-[75vh] overflow-auto px-5 py-4">
+                    {!selectedHistoryId && <div className="text-sm text-muted">Select an item from the list.</div>}
+
+                    {selectedHistoryId && historyDetail && (
+                      <div className="space-y-4">
+                        <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+                          <div className="rounded-xl border border-stroke bg-white p-3">
+                            <div className="text-xs text-muted">PO</div>
+                            <div className="mt-1 text-sm font-semibold text-ink">
+                              {poDisplay(historyDetail.invoice?.po_number ?? null, historyDetail.invoice?.file_name ?? null)}
+                            </div>
+                          </div>
+                          <div className="rounded-xl border border-stroke bg-white p-3">
+                            <div className="text-xs text-muted">Invoice #</div>
+                            <div className="mt-1 text-sm font-semibold text-ink">{historyDetail.invoice?.invoice_number || "—"}</div>
+                          </div>
+                          <div className="rounded-xl border border-stroke bg-white p-3">
+                            <div className="text-xs text-muted">Supplier</div>
+                            <div className="mt-1 text-sm font-semibold text-ink">{historyDetail.invoice?.supplier || "—"}</div>
+                          </div>
+                          <div className="rounded-xl border border-stroke bg-white p-3">
+                            <div className="text-xs text-muted">Decision</div>
+                            <div className="mt-1">
+                              {(() => {
+                                const label = String((historyDetail.invoice as any)?.approval_decision || historyDetail.invoice?.match_status || "—");
+                                const tone = toneForApprovalDecision(label) || toneForStatus(String(historyDetail.invoice?.match_status || ""));
+                                return <Badge tone={tone} text={label} />;
+                              })()}
+                            </div>
+                          </div>
+                        </div>
+
+                        <div className="rounded-xl border border-stroke bg-white p-4">
+                          <div className="text-sm font-semibold text-ink">Invoice record</div>
+                          <div className="mt-2 grid grid-cols-1 gap-2 text-xs text-ink/80 md:grid-cols-2">
+                            <div>
+                              <span className="font-semibold text-ink/70">Processed:</span> {fmtDate(historyDetail.invoice?.processed_at)}
+                            </div>
+                            <div>
+                              <span className="font-semibold text-ink/70">Duplicate:</span> {historyDetail.invoice?.duplicate_flag ? "Yes" : "No"}
+                            </div>
+                            <div>
+                              <span className="font-semibold text-ink/70">Backorders:</span>{" "}
+                              {String(historyDetail.backorders?.count ?? historyDetail.invoice?.open_backorders_count ?? 0)}
+                            </div>
+                            <div>
+                              <span className="font-semibold text-ink/70">Supplier status:</span> {historyDetail.invoice?.supplier_status || "—"}
+                            </div>
+                            {historyDetail.invoice?.override_reason ? (
+                              <div className="md:col-span-2">
+                                <span className="font-semibold text-ink/70">Override reason:</span> {historyDetail.invoice?.override_reason}
+                              </div>
+                            ) : null}
+                          </div>
+                        </div>
+
+                        {(historyDetail.backorders?.items || []).length > 0 && (
+                          <div className="rounded-xl border border-stroke bg-white p-4">
+                            <div className="flex items-center justify-between gap-2">
+                              <div className="text-sm font-semibold text-ink">Backorder remaining</div>
+                              <div className="text-xs text-muted">{historyDetail.backorders?.count ?? historyDetail.backorders?.items?.length} item(s) still pending</div>
+                            </div>
+                            <div className="mt-2 overflow-auto rounded-lg border border-stroke">
+                              <table className="min-w-full text-left text-xs text-ink/80">
+                                <thead className="bg-white text-[11px] uppercase text-muted">
+                                  <tr>
+                                    <th className="px-3 py-2">SKU</th>
+                                    <th className="px-3 py-2">Description</th>
+                                    <th className="px-3 py-2">Ordered</th>
+                                    <th className="px-3 py-2">Received</th>
+                                    <th className="px-3 py-2">Remaining</th>
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                  {(historyDetail.backorders?.items || []).map((b: any, idx: number) => (
+                                    <tr key={b.po_line_id || idx} className="border-t border-stroke">
+                                      <td className="px-3 py-2">{b.sku || "—"}</td>
+                                      <td className="px-3 py-2">{b.description || "—"}</td>
+                                      <td className="px-3 py-2">{fmtNum(b.qty_ordered)}</td>
+                                      <td className="px-3 py-2">{fmtNum(b.received_after ?? b.received_before)}</td>
+                                      <td className="px-3 py-2 font-semibold text-amber-800">{fmtNum(b.remaining)}</td>
+                                    </tr>
+                                  ))}
+                                </tbody>
+                              </table>
+                            </div>
+                          </div>
+                        )}
+
+                        <div className="rounded-xl border border-stroke bg-white p-4">
+                          <div className="text-sm font-semibold text-ink">Line items</div>
+                          <div className="mt-2 overflow-auto rounded-lg border border-stroke">
+                            <table className="min-w-full text-left text-xs text-ink/80">
+                              <thead className="bg-white text-[11px] uppercase text-muted">
+                                <tr>
+                                  <th className="px-3 py-2">SKU</th>
+                                  <th className="px-3 py-2">Description</th>
+                                  <th className="px-3 py-2">Qty</th>
+                                  <th className="px-3 py-2">Unit price</th>
+                                  <th className="px-3 py-2">Line total</th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                {(historyDetail.lines || []).map((l: any) => (
+                                  <tr key={l.id || `${l.sku}-${l.description}`} className="border-t border-stroke">
+                                    <td className="px-3 py-2">{l.sku || "—"}</td>
+                                    <td className="px-3 py-2">{l.description || "—"}</td>
+                                    <td className="px-3 py-2">{l.qty ?? "—"}</td>
+                                    <td className="px-3 py-2">{l.unit_price ?? "—"}</td>
+                                    <td className="px-3 py-2">{l.line_total ?? "—"}</td>
+                                  </tr>
+                                ))}
+                                {(historyDetail.lines || []).length === 0 && (
+                                  <tr>
+                                    <td colSpan={5} className="px-3 py-6 text-center text-sm text-muted">
+                                      No line items stored for this invoice.
+                                    </td>
+                                  </tr>
+                                )}
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </motion.div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {page === "dashboard" && (
+            <AnimatePresence mode="wait">
+            <motion.div
+              key="dashboard"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 8 }}
+              transition={{ duration: 0.25, ease: "easeOut" }}
+              className="grid grid-cols-1 gap-6 lg:grid-cols-12"
+            >
+              <div className="lg:col-span-12">
+                <StepBar
+                  steps={[
+                    { key: "upload", label: "Upload", state: stepState.upload },
+                    { key: "analyze", label: "Analyze", state: stepState.analyze },
+                    { key: "complete", label: "Complete", state: stepState.complete }
+                  ]}
+                />
+                <div className="mt-2 text-xs text-muted">
+                  {stage === "upload"
+                    ? "Step 1/4 — Upload files"
+                    : stage === "preview"
+                      ? "Step 2/4 — Preview & confirm, then start analyze"
+                      : stage === "analyzing"
+                        ? "Step 3/4 — Analyzing"
+                        : "Step 4/4 — Results"}
+                  {invoices.length > 0 && (
+                    <span className="ml-2">
+                      {" "}
+                      ·{" "}
+                      {stage === "result" && analysisRuns.length > 0 ? (
+                        <>
+                          <span className="font-semibold text-ink/80">Viewing:</span>{" "}
+                          <span className="text-ink/70">
+                            Invoice {activeResultIdx + 1}/{analysisRuns.length} — {analysisRuns[activeResultIdx]?.file?.name}
+                          </span>
+                        </>
+                      ) : stage === "analyzing" && analyzingIdx !== null ? (
+                        <>
+                          <span className="font-semibold text-ink/80">Analyzing:</span>{" "}
+                          <span className="text-ink/70">
+                            Invoice {analyzingIdx + 1}/{invoices.length} — {invoices[analyzingIdx]?.name}
+                          </span>
+                        </>
+                      ) : invoices.length === 1 ? (
+                        <>
+                          <span className="font-semibold text-ink/80">Selected invoice:</span>{" "}
+                          <span className="text-ink/70">{invoices[0].name}</span>
+                        </>
+                      ) : (
+                        <>
+                          <span className="font-semibold text-ink/80">Selected invoices:</span>{" "}
+                          <span className="text-ink/70">
+                            {invoices
+                              .slice(0, 2)
+                              .map((f) => f.name)
+                              .join(", ")}
+                            {invoices.length > 2 ? <span className="text-muted"> (+{invoices.length - 2} more)</span> : null}
+                            <span className="text-muted"> ({invoices.length} total)</span>
+                          </span>
+                        </>
+                      )}
+                    </span>
+                  )}
+                </div>
+              </div>
+              {/* Upload (only before analysis) */}
+              {!showResultsPanel && (
+                <div className="lg:col-span-12">
+                  <Card title="Upload" subtitle="Invoice + PO CSV → decision">
+                    <div className="space-y-3">
+                      <MultiFileDrop
+                        label="Invoice (multiple)"
+                        accept=".pdf,.png,.jpg,.jpeg,.webp"
+                        files={invoices}
+                        onChange={(next) => setInvoices(next)}
+                        hint="PDF or image (scanned is OK). You can upload multiple invoices."
+                      />
+                      <FileDrop
+                        label="PO CSV"
+                        accept=".csv,.xlsx,.xls"
+                        file={po}
+                        onPick={setPo}
+                        hint="CSV or Excel (multiple sheets supported). Any columns accepted."
+                      />
+
+                      <button
+                        onClick={onNext}
+                        disabled={!canNext}
+                        className="w-full rounded-xl bg-brand px-4 py-3 text-sm font-bold text-white shadow-md hover:brightness-105 disabled:opacity-40"
+                      >
+                        Next
+                      </button>
+                      <button
+                        onClick={onClear}
+                        disabled={loading}
+                        className="w-full rounded-xl border border-stroke bg-white px-4 py-3 text-sm font-semibold text-ink hover:bg-bg disabled:opacity-40"
+                      >
+                        Clear history
+                      </button>
+
+                      <AnimatePresence>
+                        {error && (
+                          <motion.div
+                            initial={{ opacity: 0, y: 6 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: 6 }}
+                            className="rounded-xl border border-rose-600/20 bg-rose-500/10 p-3 text-sm text-rose-700"
+                          >
+                            {error}
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </div>
+                  </Card>
+                </div>
+              )}
+
+              {/* Results (only after Analyze is triggered) */}
+              {showResultsPanel && (
+                <div className="lg:col-span-12">
+                  <div className="sticky top-6 max-h-[calc(100vh-6.5rem)] overflow-auto pr-1">
+                    <Card
+                      title="Decision"
+                      subtitle={
+                        stage === "preview"
+                          ? "Ready to analyze"
+                          : stage === "analyzing"
+                            ? analysisRuns.length > 0 && activeRun
+                              ? `Viewing ${activeResultIdx + 1}/${analysisRuns.length} completed · ${activeRun.file.name} · ${
+                                  activeAnalysis ? `PO: ${poDisplay(activeAnalysis.po_number, activeRun.file.name)}` : "Failed"
+                                }`
+                              : "Analyzing…"
+                            : stage === "result" && activeRun
+                              ? `Invoice ${activeResultIdx + 1}/${analysisRuns.length} · ${activeRun.file.name} · ${
+                                  activeAnalysis ? `PO: ${poDisplay(activeAnalysis.po_number, activeRun.file.name)}` : "Failed"
+                                }`
+                              : ""
+                      }
+                      right={
+                        (stage === "result" || stage === "analyzing") && activeRun ? (
+                          <div className="flex flex-col items-end gap-2">
+                            <div className="flex items-center gap-2">
+                              {analysisRuns.length > 1 && (
+                                <>
+                                  <button
+                                    type="button"
+                                    onClick={() => setActiveResultIdx((i) => Math.max(0, i - 1))}
+                                    disabled={activeResultIdx <= 0}
+                                    className="inline-flex items-center justify-center rounded-lg border border-stroke bg-white p-2 text-ink hover:bg-bg disabled:opacity-40"
+                                    title="Previous invoice"
+                                    aria-label="Previous invoice"
+                                  >
+                                    <IconChevron dir="left" />
+                                  </button>
+                                  <button
+                                    type="button"
+                                    onClick={() => setActiveResultIdx((i) => Math.min(analysisRuns.length - 1, i + 1))}
+                                    disabled={activeResultIdx >= analysisRuns.length - 1}
+                                    className="inline-flex items-center justify-center rounded-lg border border-stroke bg-white p-2 text-ink hover:bg-bg disabled:opacity-40"
+                                    title="Next invoice"
+                                    aria-label="Next invoice"
+                                  >
+                                    <IconChevron dir="right" />
+                                  </button>
+                                </>
+                              )}
+                              {activeAnalysis ? (() => {
+                                const label =
+                                  (activeAnalysis.details as any)?.approval_decision ||
+                                  (activeAnalysis.evaluation as any)?.approval_decision ||
+                                  activeAnalysis.evaluation.match_status ||
+                                  "—";
+                                const tone = toneForApprovalDecision(label) || toneForStatus(activeAnalysis.evaluation.match_status);
+                                return <Badge tone={tone} text={label} />;
+                              })() : (
+                                <Badge tone="bad" text="Error" />
+                              )}
+                            </div>
+                            {activeAnalysis && (
+                              <div className="flex flex-wrap items-center justify-end gap-2">
+                                <MetricPill
+                                  label="Confidence"
+                                  value={fmtPct01(activeAnalysis?.details?.metrics?.confidence_score ?? null)}
+                                />
+                                <MetricPill label="Time" value={fmtMs(activeAnalysis?.details?.metrics?.processing_ms ?? null)} />
+                                <MetricPill
+                                  label="Extractions"
+                                  value={String(activeAnalysis?.details?.metrics?.extractions_count ?? "—")}
+                                />
+                              </div>
+                            )}
+                          </div>
+                        ) : undefined
+                      }
+                    >
+                      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
+                        <div className="text-xs text-muted">
+                          {stage === "preview"
+                            ? "Review the files below, then click “Start analyze”."
+                            : stage === "analyzing"
+                              ? "Analyzing your files…"
+                              : "Decision details"}
+                        </div>
+                        <div className="flex items-center gap-2">
+                          {stage === "preview" && (
+                            <>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  if (loading) return;
+                                  setError(null);
+                                  setAnalysisRuns([]);
+                                  setActiveResultIdx(0);
+                                  setStage("upload");
+                                }}
+                                disabled={loading}
+                                className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg disabled:opacity-40"
+                              >
+                                Back
+                              </button>
+                              <button
+                                type="button"
+                                onClick={onStartAnalyze}
+                                disabled={!canStartAnalyze}
+                                className="rounded-lg bg-brand px-3 py-2 text-xs font-bold text-white shadow-md hover:brightness-105 disabled:opacity-40"
+                              >
+                                Start analyze
+                              </button>
+                            </>
+                          )}
+                          {stage !== "preview" && (
+                            <button
+                              type="button"
+                              onClick={() => {
+                                if (loading) return;
+                                setError(null);
+                                setAnalysisRuns([]);
+                                setActiveResultIdx(0);
+                                setStage("upload");
+                              }}
+                              disabled={loading}
+                              className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg disabled:opacity-40"
+                            >
+                              Change files
+                            </button>
+                          )}
+                          <BadgeButton
+                            tone="ok"
+                            text="Extracted JSON"
+                            onClick={() => setOcrOpen(true)}
+                            disabled={!hasOcr}
+                            title={hasOcr ? "View extracted JSON" : "Extracted JSON not available for this result"}
+                          />
+                          <button
+                            type="button"
+                            onClick={onClear}
+                            disabled={loading}
+                            className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg disabled:opacity-40"
+                          >
+                            Clear history
+                          </button>
+                        </div>
+                      </div>
+
+                      <AnimatePresence>
+                        {error && (
+                          <motion.div
+                            initial={{ opacity: 0, y: 6 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: 6 }}
+                            className="mb-4 rounded-xl border border-rose-600/20 bg-rose-500/10 p-3 text-sm text-rose-700"
+                          >
+                            {error}
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+
+                      {stage === "preview" && (activeInvoice || po) && (
+                        <div className="mb-4 grid grid-cols-1 gap-3 lg:grid-cols-2">
+                          <InvoiceCarouselPreview
+                            files={invoices}
+                            activeIndex={activeInvoiceIdx}
+                            onChangeIndex={(idx) => setActiveInvoiceIdx(idx)}
+                          />
+                          <PoPreview file={po} />
+                        </div>
+                      )}
+              <AnimatePresence>
+                {stage === "analyzing" && loading && (
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="mb-4 rounded-xl border border-stroke bg-white p-4 shadow-sm"
+                  >
+                    <div className="text-sm font-semibold text-ink">Line matching</div>
+                    <div className="mt-2 overflow-auto">
+                      <table className="min-w-full text-left text-xs text-ink/80">
+                        <thead className="text-[11px] uppercase text-muted">
+                          <tr>
+                            <th className="py-2 pr-4">Status</th>
+                            <th className="py-2 pr-4">Item</th>
+                            <th className="py-2 pr-4">Qty</th>
+                            <th className="py-2 pr-4">PO Item</th>
+                            <th className="py-2 pr-4">Reason</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr className="border-t border-stroke">
+                            <td colSpan={5} className="py-10">
+                              <div className="flex w-full items-center justify-center">
+                                <div className="flex flex-col items-center text-center">
+                                  <motion.div
+                                    className="inline-flex items-center justify-center"
+                                    aria-hidden="true"
+                                  >
+                                    <BookLoader size={64} />
+                                  </motion.div>
+                                  <div className="mt-3 text-base font-semibold text-ink">
+                                    Analyzing {analyzingIdx === null ? "…" : `invoice ${analyzingIdx + 1}/${invoices.length}`}
+                                  </div>
+                                  <div className="mt-1 text-sm text-muted">
+                                    {analyzingIdx !== null ? invoices[analyzingIdx]?.name : "Matching invoice lines to PO lines"}
+                                  </div>
+                                </div>
+                              </div>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+
+                    {(stage === "result" || (stage === "analyzing" && analysisRuns.length > 0)) && activeRun && (
+                <div className="space-y-4">
+                  {stage === "analyzing" && (
+                    <div className="rounded-xl border border-stroke bg-white p-3 text-xs text-muted">
+                      Showing completed results while processing the next invoice…{" "}
+                      <span className="font-semibold text-ink/70">
+                        {analysisRuns.length}/{invoices.length} completed
+                      </span>
+                      {analyzingIdx !== null ? (
+                        <span>
+                          {" "}
+                          · currently processing invoice{" "}
+                          <span className="font-semibold text-ink/70">
+                            {analyzingIdx + 1}/{invoices.length}
+                          </span>
+                        </span>
+                      ) : null}
+                    </div>
+                  )}
+                  {!activeAnalysis && activeRun.error && (
+                    <div className="rounded-xl border border-rose-600/20 bg-rose-500/10 p-4 text-sm text-rose-700">
+                      <div className="font-semibold">Failed to analyze invoice</div>
+                      <div className="mt-1 text-sm text-rose-700/90">{activeRun.file.name}</div>
+                      <div className="mt-2 whitespace-pre-wrap text-sm text-rose-700/90">{activeRun.error}</div>
+                        </div>
+                      )}
+
+                  {activeAnalysis && (
+                    <>
+                  <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+                    {kpis?.map((k) => (
+                      <div key={k.label} className="rounded-xl border border-stroke bg-white p-3 shadow-sm">
+                        <div className="text-xs text-muted">{k.label}</div>
+                        <div className="mt-1 flex items-center justify-between gap-2">
+                          <div className="text-sm font-semibold text-ink">{k.value}</div>
+                          <Badge tone={k.badge} text={k.badge === "ok" ? "OK" : k.badge === "bad" ? "Issue" : "Review"} />
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+
+                  <div className="rounded-xl border border-stroke bg-white p-4 shadow-sm">
+                    <div className="text-sm font-semibold text-ink">Why this decision?</div>
+                        <div className="mt-2 whitespace-pre-wrap text-sm text-ink/80">{activeAnalysis.evaluation.rationale || "—"}</div>
+                        {activeAnalysis.evaluation.suggested_action && (
+                      <>
+                        <div className="mt-3 text-sm font-semibold text-ink">Suggested next step</div>
+                            <div className="mt-1 text-sm text-ink/80">{activeAnalysis.evaluation.suggested_action}</div>
+                      </>
+                    )}
+                  </div>
+
+                      {activeAnalysis.evaluation.alerts?.length > 0 && (
+                    <div className="rounded-xl border border-stroke bg-white p-4 shadow-sm">
+                      <div className="text-sm font-semibold text-ink">Alerts</div>
+                      <div className="mt-2 space-y-2">
+                            {activeAnalysis.evaluation.alerts.map((a, idx) => (
+                          <div
+                            key={idx}
+                            className={`rounded-lg border px-3 py-2 text-sm ${
+                              a.level === "error"
+                                ? "border-rose-600/20 bg-rose-500/10 text-rose-700"
+                                : a.level === "warning"
+                                  ? "border-amber-600/20 bg-amber-500/10 text-amber-800"
+                                  : "border-stroke bg-bg text-ink/80"
+                            }`}
+                          >
+                            {a.message}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="rounded-xl border border-stroke bg-white p-4 shadow-sm">
+                    <div className="text-sm font-semibold text-ink">Line matching</div>
+                    <div className="mt-2 overflow-auto">
+                      <table className="min-w-full text-left text-xs text-ink/80">
+                        <thead className="text-[11px] uppercase text-muted">
+                          <tr>
+                            <th className="py-2 pr-4">Status</th>
+                            <th className="py-2 pr-4">Item</th>
+                            <th className="py-2 pr-4">Qty</th>
+                            <th className="py-2 pr-4">PO Item</th>
+                            <th className="py-2 pr-4">Reason</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                              {activeAnalysis.evaluation.line_results?.map((r: any, i: number) => (
+                            <tr key={i} className="border-t border-stroke">
+                              <td className="py-2 pr-4">
+                                <Badge tone={toneForStatus(r.line_status)} text={r.line_status} />
+                              </td>
+                              <td className="py-2 pr-4">{r.invoice_sku || r.invoice_description || "—"}</td>
+                              <td className="py-2 pr-4">{r.invoice_qty ?? "—"}</td>
+                              <td className="py-2 pr-4">{r.po_sku || r.po_description || "—"}</td>
+                              <td className="py-2 pr-4">{r.mismatch_reasons || "—"}</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+
+                      {((activeAnalysis.details as any)?.backorders?.items || activeAnalysis.evaluation.open_backorders || []).length > 0 && (
+                        <div className="rounded-xl border border-stroke bg-white p-4 shadow-sm">
+                          <div className="flex items-center justify-between gap-2">
+                            <div className="text-sm font-semibold text-ink">Backorder remaining</div>
+                            <div className="text-xs text-muted">
+                              {((activeAnalysis.details as any)?.backorders?.count ??
+                                ((activeAnalysis.details as any)?.backorders?.items || activeAnalysis.evaluation.open_backorders || []).length) || 0}{" "}
+                              item(s) still pending
+                            </div>
+                          </div>
+                          <div className="mt-2 overflow-auto rounded-lg border border-stroke">
+                            <table className="min-w-full text-left text-xs text-ink/80">
+                              <thead className="bg-white text-[11px] uppercase text-muted">
+                                <tr>
+                                  <th className="px-3 py-2">SKU</th>
+                                  <th className="px-3 py-2">Description</th>
+                                  <th className="px-3 py-2">Ordered</th>
+                                  <th className="px-3 py-2">Received</th>
+                                  <th className="px-3 py-2">Remaining</th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                {(((activeAnalysis.details as any)?.backorders?.items ||
+                                  activeAnalysis.evaluation.open_backorders ||
+                                  []) as any[]).map((b: any, idx: number) => (
+                                  <tr key={b.po_line_id || idx} className="border-t border-stroke">
+                                    <td className="px-3 py-2">{b.sku || "—"}</td>
+                                    <td className="px-3 py-2">{b.description || "—"}</td>
+                                    <td className="px-3 py-2">{fmtNum(b.qty_ordered)}</td>
+                                    <td className="px-3 py-2">{fmtNum(b.received_after ?? b.received_before)}</td>
+                                    <td className="px-3 py-2 font-semibold text-amber-800">{fmtNum(b.remaining)}</td>
+                                  </tr>
+                                ))}
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+                  )}
+                  </Card>
+                </div>
+              </div>
+              )}
+            </motion.div>
+            </AnimatePresence>
+          )}
+
+          {page === "history" && (
+            <AnimatePresence mode="wait">
+              <motion.div
+                key="history"
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 8 }}
+                transition={{ duration: 0.25, ease: "easeOut" }}
+              >
+                  <div className="space-y-6">
+                  <div className="flex flex-wrap items-center gap-3">
+                    <div className="flex w-full max-w-[520px] items-center gap-2 rounded-xl border border-stroke bg-white px-3 py-2">
+                      <span className="text-muted">
+                        <IconSearch />
+                      </span>
+                      <input
+                        value={historySearch}
+                        onChange={(e) => {
+                          setSelectedHistoryId(null);
+                          setHistorySearch(e.target.value);
+                        }}
+                        placeholder="Search by file name, invoice, supplier…"
+                        className="w-full bg-transparent text-sm font-semibold text-ink outline-none placeholder:text-muted"
+                      />
+                    </div>
+
+                    <div className="flex items-center gap-2 rounded-xl border border-stroke bg-white px-3 py-2">
+                      <span className="text-muted">
+                        <IconFilter />
+                      </span>
+                      <select
+                        value={historyStatusFilter}
+                        onChange={(e) => {
+                          setSelectedHistoryId(null);
+                          setHistoryStatusFilter(e.target.value);
+                        }}
+                        className="bg-transparent text-sm font-semibold text-ink outline-none"
+                        title="Status"
+                      >
+                        <option value="">Status</option>
+                        <option value="Approved">Approved</option>
+                        <option value="Partially Approved">Partially Approved</option>
+                        <option value="Rejected">Rejected</option>
+                      </select>
+                    </div>
+
+                    <button
+                      type="button"
+                      className="ml-auto rounded-xl bg-brand px-4 py-2.5 text-sm font-bold text-white shadow-md hover:brightness-105"
+                      onClick={() => {
+                        const payload = {
+                          exported_at: new Date().toISOString(),
+                          total: filteredHistoryItems.length,
+                          items: filteredHistoryItems,
+                        };
+                        downloadTextFile(`history_export_${Date.now()}.json`, JSON.stringify(payload, null, 2), "application/json;charset=utf-8");
+                        setToast("Exported history (.json)");
+                      }}
+                      disabled={historyLoading || filteredHistoryItems.length === 0}
+                    >
+                      Export All
+                    </button>
+                  </div>
+
+                  <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">
+                    <div className="rounded-2xl border border-stroke bg-white p-4 shadow-soft">
+                      <div className="text-xs font-semibold text-muted">Total Extractions</div>
+                      <div className="mt-1 text-2xl font-bold text-ink">{historySummary.total}</div>
+                    </div>
+                    <div className="rounded-2xl border border-stroke bg-white p-4 shadow-soft">
+                      <div className="text-xs font-semibold text-muted">Success Rate</div>
+                      <div className="mt-1 text-2xl font-bold text-ink">{Math.round(historySummary.successRate * 1000) / 10}%</div>
+                      <div className="mt-0.5 text-xs font-semibold text-emerald-700">
+                        {historySummary.successes}/{historySummary.total || 0} successful
+                      </div>
+                    </div>
+                    <div className="rounded-2xl border border-stroke bg-white p-4 shadow-soft">
+                      <div className="text-xs font-semibold text-muted">Avg. Processing Time</div>
+                      <div className="mt-1 text-2xl font-bold text-ink">{fmtSecCompact(historySummary.avgMs)}</div>
+                    </div>
+                    <div className="rounded-2xl border border-stroke bg-white p-4 shadow-soft">
+                      <div className="text-xs font-semibold text-muted">Fields Extracted</div>
+                      <div className="mt-1 text-2xl font-bold text-ink">{historySummary.fieldsTotal}</div>
+                    </div>
+                  </div>
+
+                  <AnimatePresence>
+                    {historyError && (
+                      <motion.div
+                        initial={{ opacity: 0, y: 6 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: 6 }}
+                        className="rounded-xl border border-rose-600/20 bg-rose-500/10 p-3 text-sm text-rose-700"
+                      >
+                        {historyError}
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+
+                  {!historyLoading && historyItems.length === 0 && !historyError && (
+                    <div className="rounded-2xl border border-stroke bg-white p-6 text-sm text-muted">
+                      No history yet. Run an analysis to create entries.
+                    </div>
+                  )}
+
+                  <div className="space-y-3">
+                    {(filteredHistoryItems || []).map((it) => {
+                      const label = String((it as any).approval_decision || it.match_status || "—");
+                      const tone = toneForApprovalDecision(label) || toneForStatus(String(it.match_status || ""));
+                      return (
+                        <motion.button
+                          key={it.id}
+                          type="button"
+                          whileHover={{ y: -1 }}
+                          whileTap={{ scale: 0.995 }}
+                          onClick={() => {
+                            setSelectedHistoryId(it.id);
+                            setHistoryDetailsOpen(true);
+                          }}
+                          className={`w-full rounded-2xl border border-stroke bg-white p-5 text-left shadow-soft hover:bg-bg ${
+                            selectedHistoryId === it.id ? "ring-2 ring-brand/20" : ""
+                          }`}
+                        >
+                          <div className="flex flex-wrap items-center justify-between gap-4">
+                            <div className="flex min-w-0 items-center gap-4">
+                              <div className="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-brand/10 text-brand">
+                                <IconFile />
+                              </div>
+                              <div className="min-w-0">
+                                <div className="flex min-w-0 items-center gap-2">
+                                  <div className="truncate text-sm font-bold text-ink">{it.file_name || it.invoice_number || it.id}</div>
+                                  {it.duplicate_flag ? (
+                                    <span className="shrink-0 rounded-full border border-rose-600/25 bg-rose-500/10 px-2 py-0.5 text-[11px] font-semibold text-rose-700">
+                                      Duplicate
+                                    </span>
+                                  ) : null}
+                                </div>
+                                <div className="mt-1 flex flex-wrap items-center gap-3 text-xs text-muted">
+                                  <span>{poFromFilename(it.file_name) || (it.po_number || "").trim() || "—"}</span>
+                                  <span>·</span>
+                                  <span>{fmtDate(it.processed_at)}</span>
+                                </div>
+                              </div>
+                            </div>
+
+                            <div className="flex items-center gap-8">
+                              <div className="text-right">
+                                <div className="text-xs text-muted">Time</div>
+                                <div className="mt-1 text-sm font-bold text-ink">{fmtSecCompact(it.processing_ms ?? null)}</div>
+                              </div>
+                              <div className="text-right">
+                                <div className="text-xs text-muted">Fields</div>
+                                <div className="mt-1 text-sm font-bold text-ink">{it.extractions_count ?? "—"}</div>
+                              </div>
+                              <div className="text-right">
+                                <div className="text-xs text-muted">Confidence</div>
+                                <div className="mt-1 text-sm font-bold text-emerald-700">{fmtPct01(it.match_score ?? null)}</div>
+                              </div>
+
+                              <div className="flex items-center gap-3">
+                                <Badge tone={tone} text={label} />
+                                <div className="text-muted">
+                                  <IconChevron dir="right" />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </motion.button>
+                      );
+                    })}
+
+                    {!historyLoading && filteredHistoryItems.length === 0 && historyItems.length > 0 && (
+                      <div className="rounded-2xl border border-stroke bg-white p-6 text-sm text-muted">
+                        No results match your filters.
+                      </div>
+                    )}
+                  </div>
+
+                </div>
+              </motion.div>
+            </AnimatePresence>
+          )}
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
+
+
+

frontend/src/api.ts

@@ -0,0 +1,220 @@
+export type Alert = { level: "info" | "warning" | "error"; message: string };
+
+export type Evaluation = {
+  match_status: "Matched" | "Review" | "Unmatched" | string;
+  duplicate: boolean;
+  supplier_status: string;
+  confidence_score?: number | null;
+  approval_decision?: "Approved" | "Partially Approved" | "Rejected" | string;
+  rationale?: string;
+  suggested_action?: string;
+  alerts: Alert[];
+  line_results: any[];
+  open_backorders: any[];
+};
+
+export type DuplicateMatch = {
+  id: string;
+  processed_at?: string;
+  invoice_number?: string;
+  supplier?: string;
+  po_number?: string;
+  match_status?: string;
+  duplicate_flag?: number;
+};
+
+export type AnalyzeDetails = {
+  metrics?: {
+    confidence_score?: number | null;
+    processing_ms?: number | null;
+    extractions_count?: number | null;
+  };  
+  approval_decision?: "Approved" | "Partially Approved" | "Rejected" | string | null;
+  backorders?: {
+    count?: number;
+    items?: Array<{
+      po_line_id?: string;
+      sku?: string;
+      description?: string;
+      qty_ordered?: number;
+      received_before?: number;
+      received_after?: number;
+      remaining?: number;
+    }>;
+  };
+  ocr?: {
+    file_name?: string;
+    file_sha256?: string;
+    provider?: string;
+    text?: string;
+    text_chars?: number;
+    images_count?: number;
+    images_preview?: string[];
+    result?: any;
+    error?: string;
+    extracted_invoice?: any;
+  };
+  invoice?: {
+    invoice_number?: string;
+    supplier?: string;
+    po_number?: string;
+    total_amount?: string;
+    currency?: string;
+    file_name?: string;
+  };
+  po?: {
+    po_number?: string;
+    supplier?: string;
+    po_amount?: any;
+    currency?: string;
+    line_items_count?: number;
+    source_filename?: string;
+  };
+  supplier_validation?: {
+    status?: string;
+    best_match?: string;
+    match_score?: number;
+    notes?: string;
+  };
+};
+
+export type AnalyzeResponse = {
+  invoice_id: string | null;
+  po_number: string;
+  evaluation: Evaluation;
+  details?: AnalyzeDetails;
+  duplicate_matches?: DuplicateMatch[];
+  blocked?: boolean;
+};
+
+export type HistoryItem = {
+  id: string;
+  processed_at?: string;
+  invoice_number?: string;
+  supplier?: string;
+  po_number?: string;
+  invoice_total?: number | null;
+  currency?: string | null;
+  match_status?: string;
+  match_score?: number | null;
+  processing_ms?: number | null;
+  extractions_count?: number | null;
+  approval_decision?: "Approved" | "Partially Approved" | "Rejected" | string | null;
+  open_backorders_count?: number;
+  duplicate_flag?: number;
+  decision_engine?: string | null;
+  ai_model?: string | null;
+  supplier_status?: string | null;
+  override_reason?: string | null;
+  file_name?: string | null;
+};
+
+export type HistoryResponse = { items: HistoryItem[] };
+
+export type InvoiceDetail = {
+  invoice: Record<string, any>;
+  lines: Record<string, any>[];
+  extracted_invoice?: any;
+  backorders?: { count?: number; items?: any[] };
+};
+
+const CONFIGURED_API_BASE = (import.meta.env.VITE_API_BASE_URL || "").trim();
+// Use relative /api by default so Vite can proxy in dev and the backend can serve in prod.
+// If you need an absolute URL, set VITE_API_BASE_URL.
+const API_BASE = (CONFIGURED_API_BASE || "").replace(/\/$/, "");
+const api = (path: string) => (API_BASE ? `${API_BASE}${path}` : path);
+
+function safeJsonParse<T = any>(text: string): T | null {
+  try {
+    return JSON.parse(text) as T;
+  } catch {
+    return null;
+  }
+}
+
+async function readJsonOrThrow<T>(res: Response): Promise<T> {
+  const text = await res.text();
+  const ct = (res.headers.get("content-type") || "").toLowerCase();
+
+  // FastAPI errors often return JSON, but a misrouted request returns HTML (doctype).
+  const maybeJson = safeJsonParse<T>(text);
+  if (maybeJson !== null) return maybeJson;
+
+  const preview = text.slice(0, 200).replace(/\s+/g, " ").trim();
+  throw new Error(`Expected JSON but got ${ct || "unknown content-type"} (${res.status}). Response: ${preview}`);
+}
+
+export async function analyze(invoice: File, poCsv: File) {
+  const fd = new FormData();
+  fd.append("invoice", invoice);
+  fd.append("po_file", poCsv);
+
+  const res = await fetch(api("/api/analyze"), { method: "POST", body: fd });
+  const data = await readJsonOrThrow<AnalyzeResponse & { detail?: string }>(res);
+  if (!res.ok) throw new Error((data as any).detail || `Analyze failed (${res.status})`);
+  return data as AnalyzeResponse;
+}
+
+export async function analyzeWithOverride(
+  invoice: File,
+  poCsv: File,
+  opts: { duplicate_override: boolean; override_reason?: string }
+) {
+  const fd = new FormData();
+  fd.append("invoice", invoice);
+  fd.append("po_file", poCsv);
+  fd.append("duplicate_override", String(Boolean(opts.duplicate_override)));
+  fd.append("override_reason", (opts.override_reason || "").trim());
+
+  const res = await fetch(api("/api/analyze"), { method: "POST", body: fd });
+  const data = await readJsonOrThrow<AnalyzeResponse & { detail?: string }>(res);
+  if (!res.ok) throw new Error((data as any).detail || `Analyze failed (${res.status})`);
+  return data as AnalyzeResponse;
+}
+
+export async function clearDb() {
+  const res = await fetch(api("/api/clear"), { method: "POST" });
+  const data = await readJsonOrThrow<{ ok?: boolean; detail?: string }>(res);
+  if (!res.ok) throw new Error(data.detail || `Clear failed (${res.status})`);
+  return data;
+}
+
+export async function health() {
+  const res = await fetch(api("/api/health"));
+  return readJsonOrThrow<{ ok: boolean; error?: string }>(res);
+}
+
+export async function getHistory(params?: {
+  limit?: number;
+  invoice_number?: string;
+  supplier?: string;
+  po_number?: string;
+  match_status?: string;
+  duplicate_flag?: number;
+  date_from?: string;
+  date_to?: string;
+}) {
+  const qs = new URLSearchParams();
+  if (params?.limit != null) qs.set("limit", String(params.limit));
+  if (params?.invoice_number) qs.set("invoice_number", params.invoice_number);
+  if (params?.supplier) qs.set("supplier", params.supplier);
+  if (params?.po_number) qs.set("po_number", params.po_number);
+  if (params?.match_status) qs.set("match_status", params.match_status);
+  if (params?.duplicate_flag != null) qs.set("duplicate_flag", String(params.duplicate_flag));
+  if (params?.date_from) qs.set("date_from", params.date_from);
+  if (params?.date_to) qs.set("date_to", params.date_to);
+
+  const res = await fetch(api(`/api/history${qs.toString() ? `?${qs.toString()}` : ""}`));
+  const data = await readJsonOrThrow<HistoryResponse & { detail?: string }>(res);
+  if (!res.ok) throw new Error((data as any).detail || `History failed (${res.status})`);
+  return data as HistoryResponse;
+}
+
+export async function getHistoryDetail(invoiceId: string) {
+  const res = await fetch(api(`/api/history/${encodeURIComponent(invoiceId)}`));
+  const data = await readJsonOrThrow<InvoiceDetail & { detail?: string }>(res);
+  if (!res.ok) throw new Error((data as any).detail || `History detail failed (${res.status})`);
+  return data as InvoiceDetail;
+}
+
+

frontend/src/components/Badge.tsx

@@ -0,0 +1,27 @@
+import { motion } from "framer-motion";
+
+export function badgeToneClass(tone: "ok" | "warn" | "bad" | "neutral") {
+  return tone === "ok"
+    ? "border-emerald-600/25 bg-emerald-500/10 text-emerald-700"
+    : tone === "warn"
+      ? "border-amber-600/25 bg-amber-500/10 text-amber-800"
+      : tone === "bad"
+        ? "border-rose-600/25 bg-rose-500/10 text-rose-700"
+        : "border-stroke bg-black/0 text-muted";
+}
+
+export function Badge({ tone, text }: { tone: "ok" | "warn" | "bad" | "neutral"; text: string }) {
+  const cls = badgeToneClass(tone);
+  return (
+    <motion.span
+      initial={{ opacity: 0, scale: 0.98 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.18, ease: "easeOut" }}
+      className={`inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold ${cls}`}
+    >
+      {text}
+    </motion.span>
+  );
+}
+
+

frontend/src/components/BadgeButton.tsx

@@ -0,0 +1,31 @@
+import { motion } from "framer-motion";
+import { badgeToneClass } from "./Badge";
+
+export function BadgeButton(props: {
+  tone: "ok" | "warn" | "bad" | "neutral";
+  text: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  title?: string;
+  className?: string;
+}) {
+  const cls = badgeToneClass(props.tone);
+  return (
+    <motion.button
+      type="button"
+      initial={{ opacity: 0, scale: 0.98 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.18, ease: "easeOut" }}
+      onClick={props.onClick}
+      disabled={props.disabled}
+      title={props.title}
+      className={`inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold ${cls} transition-shadow hover:brightness-105 hover:shadow-md hover:shadow-brand/15 disabled:opacity-40 ${
+        props.className || ""
+      }`}
+    >
+      {props.text}
+    </motion.button>
+  );
+}
+
+

frontend/src/components/BookLoader.tsx

@@ -0,0 +1,85 @@
+import { motion } from "framer-motion";
+
+export function BookLoader({ size = 56 }: { size?: number }) {
+  const w = size;
+  const h = Math.round(size * 0.75);
+  const r = Math.max(10, Math.round(size * 0.18));
+
+  return (
+    <motion.svg
+      width={w}
+      height={h}
+      viewBox="0 0 120 90"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient id="bk" x1="15" y1="15" x2="105" y2="75" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#4F46E5" />
+          <stop offset="1" stopColor="#10B981" />
+        </linearGradient>
+      </defs>
+
+      {/* Shadow */}
+      <motion.ellipse
+        cx="60"
+        cy="80"
+        rx="40"
+        ry="7"
+        fill="rgba(15,23,42,0.10)"
+        animate={{ scaleX: [0.95, 1.05, 0.95], opacity: [0.22, 0.30, 0.22] }}
+        transition={{ repeat: Infinity, duration: 1.6, ease: "easeInOut" }}
+      />
+
+      {/* Left cover */}
+      <motion.path
+        d={`M16 18c0-6 5-11 11-11h33c7 0 12 5 12 12v55c0 2-2 4-4 3-11-3-22-4-34-4H28c-6 0-12-5-12-11V18Z`}
+        fill="url(#bk)"
+        opacity="0.92"
+        initial={false}
+        animate={{ rotate: [-10, -2, -10], y: [0, -1, 0] }}
+        style={{ transformOrigin: "60px 45px" }}
+        transition={{ repeat: Infinity, duration: 1.8, ease: "easeInOut" }}
+      />
+
+      {/* Right cover */}
+      <motion.path
+        d={`M104 18c0-6-5-11-11-11H60c-7 0-12 5-12 12v55c0 2 2 4 4 3 11-3 22-4 34-4h8c6 0 12-5 12-11V18Z`}
+        fill="url(#bk)"
+        opacity="0.86"
+        initial={false}
+        animate={{ rotate: [10, 2, 10], y: [0, -1, 0] }}
+        style={{ transformOrigin: "60px 45px" }}
+        transition={{ repeat: Infinity, duration: 1.8, ease: "easeInOut" }}
+      />
+
+      {/* Spine */}
+      <rect x="56" y="10" width="8" height="68" rx={r} fill="rgba(255,255,255,0.65)" />
+
+      {/* Pages (flipping) */}
+      <motion.path
+        d="M60 18c-10 0-20 2-30 5v45c10-3 20-4 30-4V18Z"
+        fill="rgba(255,255,255,0.88)"
+        animate={{ opacity: [0.55, 0.95, 0.55] }}
+        transition={{ repeat: Infinity, duration: 1.2, ease: "easeInOut" }}
+      />
+      <motion.path
+        d="M60 18c10 0 20 2 30 5v45c-10-3-20-4-30-4V18Z"
+        fill="rgba(255,255,255,0.82)"
+        animate={{ opacity: [0.45, 0.90, 0.45] }}
+        transition={{ repeat: Infinity, duration: 1.2, ease: "easeInOut", delay: 0.2 }}
+      />
+
+      {/* Page flip highlight */}
+      <motion.path
+        d="M60 22c9 1 18 3 26 5v5c-8-2-17-4-26-5v-5Z"
+        fill="rgba(255,255,255,0.55)"
+        animate={{ x: [0, 2, 0], opacity: [0.2, 0.55, 0.2] }}
+        transition={{ repeat: Infinity, duration: 0.9, ease: "easeInOut" }}
+      />
+    </motion.svg>
+  );
+}
+
+

frontend/src/components/Card.tsx

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+import { motion } from "framer-motion";
+
+export function Card({
+  title,
+  subtitle,
+  right,
+  children
+}: {
+  title?: string;
+  subtitle?: string;
+  right?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <motion.div
+      whileHover={{ y: -2 }}
+      transition={{ type: "spring", stiffness: 320, damping: 22 }}
+      className="group relative rounded-2xl border border-stroke bg-panel shadow-soft"
+    >
+      {(title || subtitle || right) && (
+        <div className="flex items-start justify-between gap-4 border-b border-stroke px-5 py-4">
+          <div>
+            {title && <div className="text-sm font-semibold text-ink">{title}</div>}
+            {subtitle && <div className="mt-0.5 text-xs text-muted">{subtitle}</div>}
+          </div>
+          {right}
+        </div>
+      )}
+      <div className="px-5 py-4">{children}</div>
+      <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-0 ring-1 ring-brand/15 transition-opacity duration-300 group-hover:opacity-100" />
+    </motion.div>
+  );
+}
+
+

frontend/src/components/FileDrop.tsx

@@ -0,0 +1,78 @@
+import { useCallback, useRef } from "react";
+import { motion } from "framer-motion";
+
+export function FileDrop({
+  label,
+  accept,
+  file,
+  onPick,
+  hint
+}: {
+  label: string;
+  accept: string;
+  file: File | null;
+  onPick: (f: File) => void;
+  hint?: string;
+}) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const onDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      const f = e.dataTransfer.files?.[0];
+      if (f) onPick(f);
+    },
+    [onPick]
+  );
+
+  return (
+    <motion.div
+      whileHover={{ y: -1 }}
+      className="rounded-xl border border-stroke bg-white p-4"
+      onDragOver={(e) => e.preventDefault()}
+      onDrop={onDrop}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="text-sm font-semibold text-ink">{label}</div>
+          <div className="mt-1 text-xs text-muted">{hint || "Drag & drop or browse"}</div>
+          <div className="mt-1 text-[11px] text-muted">Accepted: {accept.replace(/\./g, "").toUpperCase()}</div>
+        </div>
+        {file ? (
+          <div className="shrink-0 rounded-full border border-emerald-600/25 bg-emerald-500/10 px-2.5 py-1 text-xs font-semibold text-emerald-700">
+            ✓ Added
+          </div>
+        ) : null}
+      </div>
+
+      <div className="mt-3 flex items-center justify-between gap-3">
+        <div className="min-w-0">
+          {file ? (
+            <div className="truncate text-sm text-ink/80">{file.name}</div>
+          ) : (
+            <div className="text-sm text-muted">No file selected</div>
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={() => inputRef.current?.click()}
+          className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg"
+        >
+          Browse
+        </button>
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          className="hidden"
+          onChange={(e) => {
+            const f = e.target.files?.[0];
+            if (f) onPick(f);
+          }}
+        />
+      </div>
+    </motion.div>
+  );
+}
+
+

frontend/src/components/FilePreview.tsx

@@ -0,0 +1,274 @@
+import { useEffect, useMemo, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+function useObjectUrl(file: File | null) {
+  const [url, setUrl] = useState<string | null>(null);
+  useEffect(() => {
+    if (!file) {
+      setUrl(null);
+      return;
+    }
+    const u = URL.createObjectURL(file);
+    setUrl(u);
+    return () => URL.revokeObjectURL(u);
+  }, [file]);
+  return url;
+}
+
+function looksLikePdf(file: File) {
+  return file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf");
+}
+
+function looksLikeImage(file: File) {
+  return file.type.startsWith("image/");
+}
+
+function looksLikeCsv(file: File) {
+  const n = file.name.toLowerCase();
+  return file.type.includes("csv") || n.endsWith(".csv");
+}
+
+function parseCsvLine(line: string): string[] {
+  const out: string[] = [];
+  let cur = "";
+  let inQuotes = false;
+  for (let i = 0; i < line.length; i++) {
+    const ch = line[i];
+    if (inQuotes) {
+      if (ch === '"') {
+        const next = line[i + 1];
+        if (next === '"') {
+          cur += '"';
+          i++;
+        } else {
+          inQuotes = false;
+        }
+      } else {
+        cur += ch;
+      }
+    } else {
+      if (ch === ",") {
+        out.push(cur);
+        cur = "";
+      } else if (ch === '"') {
+        inQuotes = true;
+      } else {
+        cur += ch;
+      }
+    }
+  }
+  out.push(cur);
+  return out.map((s) => s.trim());
+}
+
+function InvoicePreviewBody({ file }: { file: File | null }) {
+  const url = useObjectUrl(file);
+  if (!file) return null;
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-stroke bg-bg">
+      {looksLikeImage(file) && url && <img src={url} alt="Invoice preview" className="max-h-[420px] w-full object-contain" />}
+
+      {looksLikePdf(file) && url && (
+        <object data={url} type="application/pdf" className="h-[420px] w-full">
+          <div className="p-4 text-sm text-muted">
+            PDF preview isn’t available in this browser view.{" "}
+            <a className="font-semibold text-brand underline" href={url} target="_blank" rel="noreferrer">
+              Open PDF in a new tab
+            </a>
+            .
+          </div>
+        </object>
+      )}
+
+      {!looksLikeImage(file) && !looksLikePdf(file) && (
+        <div className="p-4 text-sm text-muted">Preview not available for this file type.</div>
+      )}
+    </div>
+  );
+}
+
+export function InvoicePreview({ file }: { file: File | null }) {
+  if (!file) return null;
+  return (
+    <div className="rounded-xl border border-stroke bg-white p-4 shadow-sm">
+      <div className="mb-2 flex items-center justify-between gap-3">
+        <div className="text-sm font-semibold text-ink">Invoice preview</div>
+        <div className="truncate text-xs text-muted">{file.name}</div>
+      </div>
+      <InvoicePreviewBody file={file} />
+    </div>
+  );
+}
+
+export function InvoiceCarouselPreview({
+  files,
+  activeIndex,
+  onChangeIndex
+}: {
+  files: File[];
+  activeIndex: number;
+  onChangeIndex: (idx: number) => void;
+}) {
+  const total = files.length;
+  if (total === 0) return null;
+  const idx = Math.max(0, Math.min(activeIndex, total - 1));
+  const f = files[idx] || null;
+
+  const canPrev = idx > 0;
+  const canNext = idx < total - 1;
+
+  return (
+    <div className="rounded-xl border border-stroke bg-white p-4 shadow-sm">
+      <div className="mb-2 flex items-center justify-between gap-3">
+        <div className="min-w-0">
+          <div className="text-sm font-semibold text-ink">Invoice preview</div>
+          <div className="mt-0.5 truncate text-xs text-muted">
+            {f?.name || "—"} {total > 1 ? `(${idx + 1}/${total})` : ""}
+          </div>
+        </div>
+
+        {total > 1 && (
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => canPrev && onChangeIndex(idx - 1)}
+              disabled={!canPrev}
+              className="rounded-lg border border-stroke bg-white px-2.5 py-1.5 text-xs font-semibold text-ink hover:bg-bg disabled:opacity-40"
+              aria-label="Previous invoice"
+              title="Previous"
+            >
+              {"<"}
+            </button>
+            <button
+              type="button"
+              onClick={() => canNext && onChangeIndex(idx + 1)}
+              disabled={!canNext}
+              className="rounded-lg border border-stroke bg-white px-2.5 py-1.5 text-xs font-semibold text-ink hover:bg-bg disabled:opacity-40"
+              aria-label="Next invoice"
+              title="Next"
+            >
+              {">"}
+            </button>
+          </div>
+        )}
+      </div>
+
+      <InvoicePreviewBody file={f} />
+    </div>
+  );
+}
+
+export function PoPreview({ file }: { file: File | null }) {
+  const [csvText, setCsvText] = useState<string>("");
+  const [csvErr, setCsvErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function run() {
+      setCsvText("");
+      setCsvErr(null);
+      if (!file) return;
+      if (!looksLikeCsv(file)) return;
+      try {
+        const t = await file.text();
+        if (cancelled) return;
+        setCsvText(t);
+      } catch (e: any) {
+        if (cancelled) return;
+        setCsvErr(e?.message || String(e));
+      }
+    }
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [file]);
+
+  const preview = useMemo(() => {
+    if (!csvText) return null;
+    const lines = csvText
+      .split(/\r?\n/)
+      .map((l) => l.trimEnd())
+      .filter((l) => l.length > 0)
+      .slice(0, 21); // header + 20 rows
+    if (lines.length === 0) return null;
+    const rows = lines.map(parseCsvLine);
+    const header = rows[0] || [];
+    const body = rows.slice(1);
+    return { header, body };
+  }, [csvText]);
+
+  if (!file) return null;
+
+  const isCsv = looksLikeCsv(file);
+  const isExcel =
+    file.name.toLowerCase().endsWith(".xlsx") ||
+    file.name.toLowerCase().endsWith(".xls") ||
+    file.type.includes("spreadsheet");
+
+  return (
+    <div className="rounded-xl border border-stroke bg-white p-4 shadow-sm">
+      <div className="mb-2 flex items-center justify-between gap-3">
+        <div className="text-sm font-semibold text-ink">PO preview</div>
+        <div className="truncate text-xs text-muted">{file.name}</div>
+      </div>
+
+      <AnimatePresence>
+        {csvErr && (
+          <motion.div
+            initial={{ opacity: 0, y: 6 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 6 }}
+            className="rounded-lg border border-rose-600/20 bg-rose-500/10 p-3 text-sm text-rose-700"
+          >
+            {csvErr}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {!isCsv && isExcel && (
+        <div className="rounded-lg border border-stroke bg-bg p-3 text-sm text-muted">
+          Excel preview isn’t enabled yet. If you want, I can add Excel preview support (it requires adding an `xlsx` dependency).
+        </div>
+      )}
+
+      {!isCsv && !isExcel && (
+        <div className="rounded-lg border border-stroke bg-bg p-3 text-sm text-muted">Preview not available for this file type.</div>
+      )}
+
+      {isCsv && !preview && !csvErr && (
+        <div className="rounded-lg border border-stroke bg-bg p-3 text-sm text-muted">Loading CSV preview…</div>
+      )}
+
+      {isCsv && preview && (
+        <div className="overflow-auto rounded-lg border border-stroke">
+          <table className="min-w-full text-left text-xs text-ink/80">
+            <thead className="sticky top-0 bg-white text-[11px] uppercase text-muted">
+              <tr>
+                {preview.header.map((h, i) => (
+                  <th key={i} className="whitespace-nowrap border-b border-stroke px-3 py-2">
+                    {h || `col_${i + 1}`}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {preview.body.map((row, rIdx) => (
+                <tr key={rIdx} className="border-t border-stroke">
+                  {preview.header.map((_, cIdx) => (
+                    <td key={cIdx} className="whitespace-nowrap px-3 py-2">
+                      {row[cIdx] ?? ""}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+

frontend/src/components/LogoMark.tsx

@@ -0,0 +1,57 @@
+import { motion } from "framer-motion";
+
+export function LogoMark({ size = 28 }: { size?: number }) {
+  return (
+    <motion.svg
+      width={size}
+      height={size}
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient id="g1" x1="8" y1="8" x2="40" y2="40" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#4F46E5" />
+          <stop offset="1" stopColor="#10B981" />
+        </linearGradient>
+      </defs>
+
+      <motion.circle
+        cx="24"
+        cy="24"
+        r="18"
+        stroke="url(#g1)"
+        strokeWidth="3"
+        animate={{ rotate: 360 }}
+        transform-origin="24px 24px"
+        transition={{ repeat: Infinity, duration: 9, ease: "linear" }}
+        opacity="0.9"
+      />
+
+      <motion.path
+        d="M16 25.5c5.5-7.5 10.5-7.5 16 0"
+        stroke="url(#g1)"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        initial={{ pathLength: 0.1, opacity: 0.6 }}
+        animate={{ pathLength: [0.2, 1, 0.2], opacity: [0.6, 1, 0.6] }}
+        transition={{ repeat: Infinity, duration: 2.6, ease: "easeInOut" }}
+      />
+
+      <motion.circle
+        cx="24"
+        cy="24"
+        r="7"
+        fill="url(#g1)"
+        initial={{ scale: 0.95 }}
+        animate={{ scale: [0.95, 1.05, 0.95] }}
+        transition={{ repeat: Infinity, duration: 2.4, ease: "easeInOut" }}
+        opacity="0.95"
+      />
+    </motion.svg>
+  );
+}
+
+

frontend/src/components/MultiFileDrop.tsx

@@ -0,0 +1,119 @@
+import { useCallback, useRef } from "react";
+import { motion } from "framer-motion";
+
+function uniqKey(f: File) {
+  return `${f.name}::${f.size}::${f.lastModified}`;
+}
+
+export function MultiFileDrop({
+  label,
+  accept,
+  files,
+  onChange,
+  hint
+}: {
+  label: string;
+  accept: string;
+  files: File[];
+  onChange: (nextFiles: File[]) => void;
+  hint?: string;
+}) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const addFiles = useCallback(
+    (incoming: File[]) => {
+      if (!incoming.length) return;
+      const seen = new Set(files.map(uniqKey));
+      const merged = [...files];
+      for (const f of incoming) {
+        const k = uniqKey(f);
+        if (seen.has(k)) continue;
+        seen.add(k);
+        merged.push(f);
+      }
+      onChange(merged);
+    },
+    [files, onChange]
+  );
+
+  const onDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      const incoming = Array.from(e.dataTransfer.files || []);
+      addFiles(incoming);
+    },
+    [addFiles]
+  );
+
+  const removeAt = (idx: number) => {
+    const next = files.filter((_, i) => i !== idx);
+    onChange(next);
+  };
+
+  return (
+    <motion.div
+      whileHover={{ y: -1 }}
+      className="rounded-xl border border-stroke bg-white p-4"
+      onDragOver={(e) => e.preventDefault()}
+      onDrop={onDrop}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="text-sm font-semibold text-ink">{label}</div>
+          <div className="mt-1 text-xs text-muted">{hint || "Drag & drop or browse"}</div>
+          <div className="mt-1 text-[11px] text-muted">Accepted: {accept.replace(/\./g, "").toUpperCase()}</div>
+        </div>
+        {files.length > 0 ? (
+          <div className="shrink-0 rounded-full border border-emerald-600/25 bg-emerald-500/10 px-2.5 py-1 text-xs font-semibold text-emerald-700">
+            ✓ Added {files.length}
+          </div>
+        ) : null}
+      </div>
+
+      <div className="mt-3 flex items-center justify-between gap-3">
+        <div className="min-w-0 text-sm text-muted">{files.length ? "Selected invoices:" : "No file selected"}</div>
+        <button
+          type="button"
+          onClick={() => inputRef.current?.click()}
+          className="rounded-lg border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink hover:bg-bg"
+        >
+          Browse
+        </button>
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple
+          className="hidden"
+          onChange={(e) => {
+            const incoming = Array.from(e.target.files || []);
+            addFiles(incoming);
+            e.currentTarget.value = "";
+          }}
+        />
+      </div>
+
+      {files.length > 0 && (
+        <div className="mt-3 space-y-2">
+          {files.map((f, idx) => (
+            <div key={uniqKey(f)} className="flex items-center justify-between gap-3 rounded-lg border border-stroke bg-bg px-3 py-2">
+              <div className="min-w-0 flex-1">
+                <div className="truncate text-sm text-ink/80">{f.name}</div>
+              </div>
+              <button
+                type="button"
+                onClick={() => removeAt(idx)}
+                className="rounded-lg border border-stroke bg-white px-2.5 py-1.5 text-xs font-semibold text-ink hover:bg-white/70"
+              >
+                Remove
+              </button>
+            </div>
+          ))}
+          <div className="text-[11px] text-muted">Tip: you can preview invoices using the &lt; / &gt; buttons in the next step.</div>
+        </div>
+      )}
+    </motion.div>
+  );
+}
+
+

frontend/src/components/ShareButton.tsx

@@ -0,0 +1,76 @@
+import { motion } from "framer-motion";
+
+async function copyToClipboard(text: string) {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  // Fallback for older browsers
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.setAttribute("readonly", "true");
+  ta.style.position = "fixed";
+  ta.style.left = "-9999px";
+  document.body.appendChild(ta);
+  ta.select();
+  document.execCommand("copy");
+  document.body.removeChild(ta);
+}
+
+export function ShareButton({
+  title,
+  text,
+  url,
+  onToast
+}: {
+  title: string;
+  text: string;
+  url: string;
+  onToast?: (msg: string) => void;
+}) {
+  return (
+    <motion.button
+      whileHover={{ y: -1 }}
+      whileTap={{ scale: 0.98 }}
+      type="button"
+      className="inline-flex items-center gap-2 rounded-xl border border-stroke bg-white px-3 py-2 text-xs font-semibold text-ink shadow-soft hover:bg-bg"
+      onClick={async () => {
+        try {
+          // Prefer native share sheet when available
+          const navAny: any = navigator as any;
+          if (typeof navAny.share === "function") {
+            await navAny.share({ title, text, url });
+            onToast?.("Shared");
+            return;
+          }
+          await copyToClipboard(url);
+          onToast?.("Link copied");
+        } catch (e: any) {
+          // User can cancel share sheet; don't show error for AbortError.
+          if (e?.name === "AbortError") return;
+          onToast?.("Could not share");
+        }
+      }}
+      aria-label="Share"
+      title="Share"
+    >
+      <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+        <path
+          d="M12.5 6.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM5.5 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm7 5.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+          fill="currentColor"
+          opacity="0.9"
+        />
+        <path
+          d="M7.2 9.2l3.6-2.0M7.2 10.8l3.6 2.0"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+          opacity="0.9"
+        />
+      </svg>
+      <span className="hidden sm:inline">Share</span>
+    </motion.button>
+  );
+}
+
+

frontend/src/components/StepBar.tsx

@@ -0,0 +1,77 @@
+import { motion } from "framer-motion";
+
+export type StepState = "todo" | "active" | "done";
+
+type Step = {
+  key: string;
+  label: string;
+  state: StepState;
+};
+
+function tone(state: StepState) {
+  if (state === "done") return "bg-emerald-500 text-white border-emerald-500";
+  if (state === "active") return "bg-brand text-white border-brand";
+  return "bg-white text-muted border-stroke";
+}
+
+function lineTone(state: StepState) {
+  if (state === "done") return "bg-emerald-500";
+  if (state === "active") return "bg-brand";
+  return "bg-stroke";
+}
+
+function icon(state: StepState) {
+  if (state === "done") return "✓";
+  if (state === "active") return "•";
+  return "";
+}
+
+export function StepBar({ steps }: { steps: Step[] }) {
+  return (
+    <div className="rounded-2xl border border-stroke bg-white p-4 shadow-soft">
+      <div className="flex items-center justify-between gap-3">
+        {steps.map((s, idx) => {
+          const isLast = idx === steps.length - 1;
+          return (
+            <div key={s.key} className={`flex min-w-0 flex-1 items-center ${isLast ? "" : "gap-3"}`}>
+              <div className="flex min-w-0 items-center gap-3">
+                <motion.div
+                  className={`flex h-9 w-9 items-center justify-center rounded-full border text-sm font-bold ${tone(s.state)}`}
+                  animate={
+                    s.state === "active"
+                      ? { scale: [1, 1.08, 1] }
+                      : { scale: 1 }
+                  }
+                  transition={s.state === "active" ? { repeat: Infinity, duration: 1.3, ease: "easeInOut" } : { duration: 0.2 }}
+                >
+                  {icon(s.state)}
+                </motion.div>
+                <div className="min-w-0">
+                  <div className="truncate text-sm font-semibold text-ink">{s.label}</div>
+                  <div className="text-[11px] text-muted">
+                    {s.state === "done" ? "Done" : s.state === "active" ? "In progress" : "Pending"}
+                  </div>
+                </div>
+              </div>
+
+              {!isLast && (
+                <div className="mx-2 flex-1">
+                  <div className="h-1 w-full rounded-full bg-stroke">
+                    <motion.div
+                      className={`h-1 rounded-full ${lineTone(s.state)}`}
+                      initial={false}
+                      animate={{ width: s.state === "todo" ? "0%" : "100%" }}
+                      transition={{ duration: 0.6, ease: "easeInOut" }}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+

frontend/src/main.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./styles.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+

frontend/src/styles.css

@@ -0,0 +1,77 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light;
+}
+
+html, body {
+  height: 100%;
+  background: #F6F7FB;
+}
+
+/* clean background */
+.bg-clean {
+  background:
+    radial-gradient(900px 500px at 15% 0%, rgba(79, 70, 229, 0.10), transparent 60%),
+    radial-gradient(700px 450px at 85% 0%, rgba(16, 185, 129, 0.08), transparent 60%),
+    linear-gradient(#F6F7FB, #F6F7FB);
+}
+
+/* aurora blobs (subtle, modern) */
+@keyframes floaty {
+  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.65; }
+  50% { transform: translate3d(18px, -14px, 0) scale(1.06); opacity: 0.8; }
+  100% { transform: translate3d(-10px, 10px, 0) scale(1.02); opacity: 0.7; }
+}
+
+.aurora {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.aurora-blob {
+  position: absolute;
+  filter: blur(30px);
+  border-radius: 9999px;
+  mix-blend-mode: multiply;
+  animation: floaty 12s ease-in-out infinite;
+}
+
+.aurora-blob.b1 {
+  width: 520px;
+  height: 520px;
+  left: -160px;
+  top: -180px;
+  background: rgba(79, 70, 229, 0.14);
+  animation-duration: 14s;
+}
+
+.aurora-blob.b2 {
+  width: 440px;
+  height: 440px;
+  right: -160px;
+  top: -140px;
+  background: rgba(16, 185, 129, 0.12);
+  animation-duration: 16s;
+}
+
+.aurora-blob.b3 {
+  width: 520px;
+  height: 520px;
+  left: 25%;
+  bottom: -220px;
+  background: rgba(99, 102, 241, 0.10);
+  animation-duration: 18s;
+}
+
+/* nicer scrollbars */
+*::-webkit-scrollbar { height: 10px; width: 10px; }
+*::-webkit-scrollbar-thumb { background: rgba(15,23,42,.15); border-radius: 999px; }
+*::-webkit-scrollbar-track { background: transparent; }
+
+/* (intentionally left open for future UI utilities) */
+