# Compliance Analysis — New Analysis (Document Review Loop)

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Implement the full "New Analysis" Document Review Loop — user submits text/document/file, backend runs a 4-stage SSE pipeline (clause extraction → RAG retrieval → gap analysis → conclusion synthesis), and the three-column workspace renders real AI findings in real time.

**Architecture:** New backend endpoint `POST /api/v1/compliance/analyze-stream` streams SSE events through 4 stages using the existing `KnowledgeRetrievalService` (Milvus BM25+dense) and `get_llm_client()` (DeepSeek/Qwen). Frontend: `NewAnalysisModal` (3 input tabs) + `useComplianceAnalysis` hook + refactored `CompliancePage` that drives the three-column workspace from SSE state instead of static mock data.

**Tech Stack:** FastAPI + Python asyncio (backend SSE), existing `get_llm_client()` / `get_retrieval_service()` / `get_document_query_service()`, React 19 + TypeScript + globals.css CSS variables (no Tailwind in new components).

---

## File Map

**CREATE:**
- `backend/app/application/compliance/__init__.py`
- `backend/app/application/compliance/pipeline.py` — LLM pipeline helpers (clause split, gap check, conclusion)
- `frontend/src/pages/Compliance/NewAnalysisModal.tsx` — 3-tab input modal
- `frontend/src/pages/Compliance/useComplianceAnalysis.ts` — SSE state hook

**MODIFY:**
- `backend/app/schemas/compliance.py` — add `AnalyzeStreamRequest` and SSE payload types
- `backend/app/api/routes/compliance.py` — add `POST /analyze-stream`
- `frontend/src/styles/globals.css` — add modal-tab, compliance-status-bar, analysis-empty styles
- `frontend/src/pages/Compliance/CompliancePage.tsx` — replace static mock with hook-driven state

---

## Task 1: Backend — Compliance pipeline helpers

**Files:**
- Create: `backend/app/application/compliance/__init__.py`
- Create: `backend/app/application/compliance/pipeline.py`

### Context

The pipeline module provides three synchronous helpers called from the async SSE generator via `asyncio.to_thread()`. They use `get_llm_client()` for structured LLM calls and `get_retrieval_service()` for Milvus retrieval.

LLM client interface (from `backend/app/services/llm/base_client.py`):
```python
client.chat(messages: List[Dict[str,str]], max_tokens: Optional[int] = None) -> LLMResponse
# LLMResponse.content: str  — the text response
# LLMResponse.is_success: bool
```

Retrieval service interface (from `backend/app/application/knowledge/services.py`):
```python
retrieval_service.retrieve(*, query: str, top_k: int, filters: str | None = None) -> list[RetrievedChunk]
# RetrievedChunk fields: chunk_id, doc_id, doc_title, text, score, section_title, page_start
```

---

- [ ] **Step 1: Create `backend/app/application/compliance/__init__.py`**

```python
"""Compliance application layer."""
```

- [ ] **Step 2: Create `backend/app/application/compliance/pipeline.py`**

```python
"""Compliance analysis pipeline helpers.

All functions are synchronous — call them via asyncio.to_thread() in async SSE generators.
"""

from __future__ import annotations

import json
import os
import re
import tempfile
from typing import TYPE_CHECKING

from loguru import logger

if TYPE_CHECKING:
    from app.application.knowledge import KnowledgeRetrievalService
    from app.domain.retrieval import RetrievedChunk
    from app.services.llm.base_client import BaseLLMClient


# ── JSON extraction ────────────────────────────────────────────────────────────

def _extract_json(text: str):
    """Extract JSON from LLM response, tolerating markdown wrappers and extra prose."""
    # Strip markdown code fences
    stripped = text.strip()
    match = re.search(r"```(?:json)?\s*([\s\S]*?)```", stripped)
    if match:
        stripped = match.group(1).strip()
    # Direct parse
    try:
        return json.loads(stripped)
    except json.JSONDecodeError:
        pass
    # Find first JSON array or object
    for pattern in (r"(\[[\s\S]*\])", r"(\{[\s\S]*\})"):
        m = re.search(pattern, stripped)
        if m:
            try:
                return json.loads(m.group(1))
            except json.JSONDecodeError:
                continue
    raise ValueError(f"No valid JSON found in LLM response: {text[:300]}")


# ── Text extraction ────────────────────────────────────────────────────────────

def extract_text_from_doc_id(doc_id: str) -> str:
    """Retrieve document text by querying its chunks from Milvus."""
    from app.shared.bootstrap import get_document_query_service, get_retrieval_service

    doc = get_document_query_service().get(doc_id)
    if not doc:
        raise ValueError(f"Document '{doc_id}' not found")

    service = get_retrieval_service()
    # Broad query using doc name to pull representative chunks
    chunks = service.retrieve(query=doc.doc_name, top_k=30)
    # Filter to this document only
    doc_chunks = [c for c in chunks if c.doc_id == doc_id]
    # Fallback: use all results if none matched (e.g., different doc_id in Milvus)
    if not doc_chunks:
        doc_chunks = chunks[:15]
    return "\n\n".join(c.text for c in doc_chunks[:15])


def extract_text_from_file(content: bytes, filename: str) -> str:
    """Parse an uploaded file and return its raw text."""
    from app.shared.bootstrap import get_document_command_service

    suffix = os.path.splitext(filename or "doc.pdf")[1] or ".pdf"
    tmp_path = ""
    try:
        with tempfile.NamedTemporaryFile(delete=False, suffix=suffix) as tmp:
            tmp.write(content)
            tmp_path = tmp.name
        service = get_document_command_service()
        parsed = service.parser.parse(file_path=tmp_path, doc_id="tmp_analysis", doc_name=filename)
        # Prefer raw_text; fall back to joining semantic blocks
        if parsed.raw_text:
            return parsed.raw_text[:4000]
        return "\n".join(
            b.get("text", "") for b in parsed.semantic_blocks[:30] if b.get("text")
        )[:4000]
    except Exception as exc:
        logger.warning("File text extraction failed: {}", exc)
        return ""
    finally:
        if tmp_path:
            try:
                os.unlink(tmp_path)
            except OSError:
                pass


# ── Pipeline stage 1: clause extraction ───────────────────────────────────────

def split_into_clauses(text: str, client: "BaseLLMClient") -> list[str]:
    """Split input text into 3-8 semantic compliance clauses using LLM.

    Falls back to sentence-level splitting if LLM returns invalid JSON.
    """
    prompt = (
        "你是合规分析专家。请将以下文本分割为3-8个语义完整的合规条款，"
        "每个条款应是一个独立的合规要求或技术声明。\n"
        "以JSON数组格式返回，每个元素是一个字符串，例如：\n"
        "[\"条款一的内容...\", \"条款二的内容...\"]\n"
        "只返回JSON数组，不要有其他内容。\n\n"
        f"文本：\n{text[:2000]}"
    )
    response = client.chat([{"role": "user", "content": prompt}], max_tokens=1000)

    if response.is_success:
        try:
            result = _extract_json(response.content)
            if isinstance(result, list):
                clauses = [str(c).strip() for c in result if str(c).strip()]
                if clauses:
                    return clauses[:8]
        except (ValueError, TypeError):
            logger.warning("Clause split JSON parse failed, using fallback")

    # Fallback: sentence-level split
    sentences = re.split(r"[。；\n]+", text)
    return [s.strip() for s in sentences if len(s.strip()) > 20][:6]


# ── Pipeline stage 2+3: retrieval + gap check ─────────────────────────────────

def retrieve_for_clause(
    clause: str,
    retrieval_service: "KnowledgeRetrievalService",
    top_k: int = 5,
    domains: str | None = None,
) -> list["RetrievedChunk"]:
    """Retrieve top-K regulation chunks relevant to a clause."""
    return retrieval_service.retrieve(query=clause, top_k=top_k, filters=domains)


def check_clause_compliance(
    clause: str,
    chunks: list["RetrievedChunk"],
    client: "BaseLLMClient",
) -> dict | None:
    """Check whether a clause complies with retrieved regulations.

    Returns a finding dict with keys: title, desc, status, clause_ref.
    Returns None if the clause is fully compliant and no finding is needed.
    """
    if not chunks:
        return None

    reg_context = "\n".join(
        f"[{i+1}] {c.doc_title} {c.section_title or ''}: {c.text[:300]}"
        for i, c in enumerate(chunks[:5])
    )

    prompt = (
        "你是合规专家。请判断以下业务条款是否符合已检索的法规要求。\n\n"
        f"业务条款：\n{clause}\n\n"
        f"相关法规（已检索）：\n{reg_context}\n\n"
        "请以JSON格式返回判断结果：\n"
        "{\n"
        '  "status": "ok" | "warn" | "risk",\n'
        '  "title": "简短发现标题（不超过30字）",\n'
        '  "desc": "具体说明（50-120字）",\n'
        '  "clause_ref": "引用的法规条款编号，如 Art.9.1 或 §3.1"\n'
        "}\n"
        "status含义：ok=已符合，warn=存在差距需关注，risk=严重缺失需立即整改\n"
        "只返回JSON，不要其他内容。"
    )
    response = client.chat([{"role": "user", "content": prompt}], max_tokens=500)

    if not response.is_success:
        return None
    try:
        result = _extract_json(response.content)
        if isinstance(result, dict) and "status" in result:
            return {
                "title": str(result.get("title", "Compliance finding")),
                "desc": str(result.get("desc", "")),
                "status": result.get("status", "info"),
                "clause_ref": result.get("clause_ref"),
            }
    except (ValueError, TypeError) as exc:
        logger.warning("Gap check JSON parse failed: {}", exc)
    return None


# ── Pipeline stage 4: conclusion synthesis ────────────────────────────────────

def synthesize_conclusion(
    para_text: str,
    findings: list[dict],
    client: "BaseLLMClient",
) -> dict:
    """Synthesize overall compliance conclusion, action items, risk score, and highlight terms."""
    if not findings:
        return {
            "conclusion": "经过合规分析，未发现重大合规差距。建议持续跟踪相关法规更新。",
            "actions": [{"label": "Next action", "value": "Monitor regulation updates"}],
            "risk_score": 10,
            "highlight_terms": [],
            "para_text": para_text[:800],
        }

    findings_text = "\n".join(
        f"- [{f['status'].upper()}] {f['title']}: {f['desc']}"
        for f in findings
    )
    prompt = (
        "你是合规分析专家。请基于以下合规分析发现，生成总结报告。\n\n"
        f"原文摘要（前600字）：\n{para_text[:600]}\n\n"
        f"发现列表：\n{findings_text}\n\n"
        "请以JSON格式返回：\n"
        "{\n"
        '  "conclusion": "总体合规结论（100-200字）",\n'
        '  "actions": [\n'
        '    {"label": "下一步行动", "value": "具体描述"},\n'
        '    {"label": "优先级", "value": "高/中/低", "risk": true}\n'
        '  ],\n'
        '  "risk_score": 整体风险评分(0-100的整数，越高风险越大),\n'
        '  "highlight_terms": ["需要在原文中高亮的关键术语列表，最多10个"],\n'
        '  "para_text": "用于显示的原文或摘要（不超过600字）"\n'
        "}\n"
        "只返回JSON，不要其他内容。"
    )
    response = client.chat([{"role": "user", "content": prompt}], max_tokens=1200)

    fallback = {
        "conclusion": "合规分析完成。请查看各发现项并制定整改计划。",
        "actions": [
            {"label": "Next action", "value": "Review critical findings"},
            {"label": "Escalation", "value": "Legal review required", "risk": True},
        ],
        "risk_score": 60,
        "highlight_terms": [],
        "para_text": para_text[:800],
    }

    if not response.is_success:
        return fallback

    try:
        result = _extract_json(response.content)
        if isinstance(result, dict):
            return {
                "conclusion": str(result.get("conclusion", fallback["conclusion"])),
                "actions": result.get("actions", fallback["actions"]),
                "risk_score": int(result.get("risk_score", 60)),
                "highlight_terms": result.get("highlight_terms", []),
                "para_text": str(result.get("para_text", para_text[:800])),
            }
    except (ValueError, TypeError) as exc:
        logger.warning("Conclusion synthesis JSON parse failed: {}", exc)
    return fallback
```

- [ ] **Step 3: Verify imports resolve**

```powershell
cd backend
python -c "from app.application.compliance.pipeline import split_into_clauses, check_clause_compliance, synthesize_conclusion; print('OK')"
```

Expected: `OK`

---

## Task 2: Backend — Schema additions

**Files:**
- Modify: `backend/app/schemas/compliance.py`

Add the SSE event payload types to the existing schema file. These are used for documentation/typing only — the SSE endpoint yields raw JSON strings.

- [ ] **Step 1: Append to `backend/app/schemas/compliance.py`**

Add these classes at the end of the file (after the existing `AnalyzeResponse` class):

```python
class AnalyzeStreamSource(BaseModel):
    """Define the Analyze Stream Source API model."""
    standard: str
    clause: str
    score: float          # 0.0–1.0
    status: str           # "ok" | "warn" | "risk"
    full_content: str


class AnalyzeStreamFinding(BaseModel):
    """Define the Analyze Stream Finding API model."""
    title: str
    desc: str
    status: str           # "ok" | "warn" | "risk"
    clause_ref: Optional[str] = None


class AnalyzeStreamDone(BaseModel):
    """Define the Analyze Stream Done API model."""
    conclusion: str
    actions: list[dict]
    risk_score: int
    highlight_terms: list[str]
    para_text: str
```

---

## Task 3: Backend — analyze-stream SSE endpoint

**Files:**
- Modify: `backend/app/api/routes/compliance.py`

Add `POST /api/v1/compliance/analyze-stream`. This endpoint accepts multipart/form-data with one of `text`, `doc_id`, or `file`, plus optional `domains` and `title`. It streams SSE events in the pattern: `stage → source* → stage → finding* → stage → done`.

- [ ] **Step 1: Add imports at the top of `compliance.py`**

Replace the current import block with:

```python
"""Define API routes for compliance."""

from __future__ import annotations

import asyncio
import json
from pathlib import Path
from typing import AsyncGenerator, Optional

from fastapi import APIRouter, File, Form, HTTPException, UploadFile
from fastapi.responses import StreamingResponse
from loguru import logger

from app.application.compliance.pipeline import (
    check_clause_compliance,
    extract_text_from_doc_id,
    extract_text_from_file,
    retrieve_for_clause,
    split_into_clauses,
    synthesize_conclusion,
)
from app.config.settings import settings
from app.schemas.compliance import (
    AnalyzeResponse,
    ComplianceChatRequest,
)
from app.services.mock_data import generate_task_id, get_mock_compliance_result
from app.services.llm.llm_factory import get_llm_client
from app.shared.bootstrap import get_agent_conversation_service, get_retrieval_service
```

- [ ] **Step 2: Add `_sse` helper and `analyze_stream` endpoint at the end of `compliance.py`**

Append after the existing `compliance_chat` function:

```python
def _sse(data: dict) -> str:
    """Format a dict as an SSE data line."""
    return f"event: message\ndata: {json.dumps(data, ensure_ascii=False)}\n\n"


@router.post("/analyze-stream")
async def analyze_stream(
    text: Optional[str] = Form(None),
    doc_id: Optional[str] = Form(None),
    file: Optional[UploadFile] = File(None),
    domains: Optional[str] = Form(None),
    title: Optional[str] = Form(None),
):
    """Stream a 4-stage compliance analysis as SSE.

    Input priority: text → doc_id → file (first non-empty wins).
    SSE event types: stage | source | finding | done | error
    """
    # ── Validate that at least one input is provided ──────────────────────────
    if not text and not doc_id and not file:
        raise HTTPException(status_code=400, detail="Provide text, doc_id, or file")

    file_content: bytes = b""
    file_name: str = ""
    if file:
        file_content = await file.read()
        file_name = file.filename or "document"

    async def generate() -> AsyncGenerator[str, None]:
        # ── Stage 1: Extract text ─────────────────────────────────────────────
        yield _sse({"type": "stage", "stage": "Clause extraction", "pct": 5,
                    "message": "Extracting input text..."})
        await asyncio.sleep(0)

        try:
            if text:
                input_text = text
            elif doc_id:
                input_text = await asyncio.to_thread(extract_text_from_doc_id, doc_id)
            else:
                input_text = await asyncio.to_thread(
                    extract_text_from_file, file_content, file_name
                )
        except Exception as exc:
            logger.exception("Text extraction failed")
            yield _sse({"type": "error", "message": f"Text extraction failed: {exc}"})
            return

        if not input_text.strip():
            yield _sse({"type": "error", "message": "No text could be extracted from the input"})
            return

        # ── Split into clauses ────────────────────────────────────────────────
        client = get_llm_client(provider=settings.llm_provider, model=settings.llm_model)
        yield _sse({"type": "stage", "stage": "Clause extraction", "pct": 20,
                    "message": "Splitting into semantic clauses..."})
        await asyncio.sleep(0)

        clauses = await asyncio.to_thread(split_into_clauses, input_text, client)
        yield _sse({"type": "stage", "stage": "Clause extraction", "pct": 100,
                    "message": f"Extracted {len(clauses)} clauses"})
        await asyncio.sleep(0)

        # ── Stage 2: Retrieve regulations per clause ──────────────────────────
        yield _sse({"type": "stage", "stage": "Regulation retrieval", "pct": 10,
                    "message": "Retrieving relevant regulations from knowledge base..."})
        await asyncio.sleep(0)

        retrieval_service = get_retrieval_service()
        seen_sources: set[str] = set()
        clause_chunks: list[list] = []

        for i, clause in enumerate(clauses):
            pct = 10 + int(90 * (i + 1) / len(clauses))
            chunks = await asyncio.to_thread(
                retrieve_for_clause, clause, retrieval_service, 5, domains
            )
            clause_chunks.append(chunks)

            for chunk in chunks[:3]:
                source_key = f"{chunk.doc_title}|{chunk.section_title}"
                if source_key not in seen_sources:
                    seen_sources.add(source_key)
                    score = chunk.score if chunk.score <= 1.0 else chunk.score / 100.0
                    status = "risk" if score >= 0.85 else "warn" if score >= 0.65 else "ok"
                    yield _sse({
                        "type": "source",
                        "data": {
                            "standard": chunk.doc_title,
                            "clause": chunk.section_title or "—",
                            "score": round(score, 3),
                            "status": status,
                            "full_content": chunk.text[:400],
                        }
                    })
                    await asyncio.sleep(0)

            yield _sse({"type": "stage", "stage": "Regulation retrieval", "pct": pct,
                        "message": f"Processed clause {i+1}/{len(clauses)}"})
            await asyncio.sleep(0)

        yield _sse({"type": "stage", "stage": "Regulation retrieval", "pct": 100,
                    "message": "Retrieval complete"})
        await asyncio.sleep(0)

        # ── Stage 3: Gap analysis per clause ─────────────────────────────────
        yield _sse({"type": "stage", "stage": "Gap analysis", "pct": 5,
                    "message": "Analyzing compliance gaps..."})
        await asyncio.sleep(0)

        findings: list[dict] = []
        for i, (clause, chunks) in enumerate(zip(clauses, clause_chunks)):
            pct = 5 + int(95 * (i + 1) / len(clauses))
            finding = await asyncio.to_thread(check_clause_compliance, clause, chunks, client)
            if finding:
                findings.append(finding)
                yield _sse({"type": "finding", "data": finding})
                await asyncio.sleep(0)
            yield _sse({"type": "stage", "stage": "Gap analysis", "pct": pct,
                        "message": f"Checked clause {i+1}/{len(clauses)}"})
            await asyncio.sleep(0)

        yield _sse({"type": "stage", "stage": "Gap analysis", "pct": 100,
                    "message": f"Found {len(findings)} issues"})
        await asyncio.sleep(0)

        # ── Stage 4: Conclusion synthesis ─────────────────────────────────────
        yield _sse({"type": "stage", "stage": "Recommendation synthesis", "pct": 20,
                    "message": "Synthesizing recommendations..."})
        await asyncio.sleep(0)

        done_data = await asyncio.to_thread(synthesize_conclusion, input_text, findings, client)

        yield _sse({"type": "stage", "stage": "Recommendation synthesis", "pct": 100,
                    "message": "Analysis complete"})
        yield _sse({"type": "done", "data": done_data})

    return StreamingResponse(
        generate(),
        media_type="text/event-stream",
        headers={
            "Cache-Control": "no-cache",
            "Connection": "keep-alive",
            "X-Accel-Buffering": "no",
        },
    )
```

- [ ] **Step 3: Verify backend starts without import errors**

```powershell
cd backend
python -c "from app.api.routes.compliance import router; print('compliance router OK')"
```

Expected: `compliance router OK`

---

## Task 4: Frontend — CSS additions

**Files:**
- Modify: `frontend/src/styles/globals.css`

Add styles for the modal tab switcher, compliance status bar, analysis empty state, and stage-running animation. Append to the end of globals.css.

- [ ] **Step 1: Append CSS to the end of `frontend/src/styles/globals.css`**

```css
/* ── New Analysis Modal — Tab Switcher ──────────────────── */
.modal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: 12px 0 16px;
  flex-shrink: 0;
}
.modal-tab {
  height: 34px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.modal-tab:hover { color: var(--fg); }
.modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ── Compliance Status Bar ──────────────────────────────── */
.compliance-status-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 13px;
}
.compliance-status-bar .analysis-title {
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--fg);
}
.compliance-status-bar .risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.risk-badge.high   { background: var(--danger-bg); color: var(--danger); }
.risk-badge.medium { background: var(--warn-bg);   color: var(--warn); }
.risk-badge.low    { background: var(--success-bg); color: var(--success); }

/* ── Analysis Empty State ───────────────────────────────── */
.compliance-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--muted);
  padding: 48px 24px;
  text-align: center;
}
.compliance-empty .empty-ring {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px dashed var(--border);
}
.compliance-empty p { font-size: 13px; max-width: 280px; line-height: 1.6; }

/* ── Stage running animation ────────────────────────────── */
.stage-fill.stage-running {
  background: var(--accent);
  animation: stage-pulse 1.2s ease-in-out infinite;
}
@keyframes stage-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ── Domain chips in modal ──────────────────────────────── */
.domain-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ── Doc select in library tab ──────────────────────────── */
.doc-select-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 8px;
}
.doc-select-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
  font-size: 13px;
}
.doc-select-item:hover { background: var(--bg); }
.doc-select-item.selected {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}
.doc-select-name { font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-select-type { font-size: 10px; color: var(--muted); font-family: var(--font-mono); }
```

---

## Task 5: Frontend — useComplianceAnalysis hook

**Files:**
- Create: `frontend/src/pages/Compliance/useComplianceAnalysis.ts`

This hook encapsulates all SSE state. It exposes `state`, `run(formData, title)`, and `reset()`. No JSX — pure TypeScript.

- [ ] **Step 1: Create `frontend/src/pages/Compliance/useComplianceAnalysis.ts`**

```typescript
import { useState, useRef, useCallback } from 'react';

// ── Types ─────────────────────────────────────────────────────────────────────

export interface AnalysisSource {
  standard: string;
  clause: string;
  score: number;   // 0–1
  status: 'ok' | 'warn' | 'risk';
  full_content: string;
}

export interface AnalysisFinding {
  title: string;
  desc: string;
  status: 'ok' | 'warn' | 'risk';
  clause_ref?: string;
}

export interface AnalysisStage {
  label: string;
  pct: number;
  status: 'idle' | 'running' | 'ok' | 'warn';
}

export interface AnalysisConclusion {
  text: string;
  actions: Array<{ label: string; value: string; risk?: boolean }>;
  riskScore: number;
}

export interface AnalysisState {
  status: 'idle' | 'running' | 'done' | 'error';
  title: string;
  paraText: string;
  highlightTerms: string[];
  sources: AnalysisSource[];
  stages: AnalysisStage[];
  findings: AnalysisFinding[];
  conclusion: AnalysisConclusion | null;
  errorMessage: string;
}

// ── Constants ─────────────────────────────────────────────────────────────────

const STAGE_LABELS = [
  'Clause extraction',
  'Regulation retrieval',
  'Gap analysis',
  'Recommendation synthesis',
] as const;

const STAGE_INDEX: Record<string, number> = {
  'Clause extraction': 0,
  'Regulation retrieval': 1,
  'Gap analysis': 2,
  'Recommendation synthesis': 3,
};

function makeInitialStages(): AnalysisStage[] {
  return STAGE_LABELS.map(label => ({ label, pct: 0, status: 'idle' as const }));
}

const INITIAL_STATE: AnalysisState = {
  status: 'idle',
  title: '',
  paraText: '',
  highlightTerms: [],
  sources: [],
  stages: makeInitialStages(),
  findings: [],
  conclusion: null,
  errorMessage: '',
};

// ── Hook ──────────────────────────────────────────────────────────────────────

export function useComplianceAnalysis() {
  const [state, setState] = useState<AnalysisState>(INITIAL_STATE);
  const abortRef = useRef<AbortController | null>(null);

  const run = useCallback(async (formData: FormData, title: string) => {
    abortRef.current?.abort();
    const ctrl = new AbortController();
    abortRef.current = ctrl;

    setState({
      ...INITIAL_STATE,
      status: 'running',
      title,
      stages: makeInitialStages(),
    });

    try {
      const res = await fetch('/api/v1/compliance/analyze-stream', {
        method: 'POST',
        body: formData,
        signal: ctrl.signal,
      });

      if (!res.ok) {
        const errText = await res.text().catch(() => res.statusText);
        setState(s => ({ ...s, status: 'error', errorMessage: errText }));
        return;
      }

      if (!res.body) throw new Error('No SSE stream body');
      const reader = res.body.getReader();
      const dec = new TextDecoder();
      let buffer = '';

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buffer += dec.decode(value, { stream: true });

        // SSE blocks are separated by double newlines
        const blocks = buffer.split('\n\n');
        buffer = blocks.pop() ?? '';

        for (const block of blocks) {
          const dataLine = block.split('\n').find(l => l.startsWith('data: '));
          if (!dataLine) continue;
          const raw = dataLine.slice(6).trim();
          if (!raw) continue;

          try {
            const j = JSON.parse(raw) as {
              type: string;
              stage?: string;
              pct?: number;
              data?: Record<string, unknown>;
              message?: string;
            };

            if (j.type === 'stage' && j.stage !== undefined) {
              const idx = STAGE_INDEX[j.stage] ?? -1;
              const pct = j.pct ?? 0;
              setState(s => {
                const stages = s.stages.map((st, i) => {
                  if (i < idx)   return { ...st, pct: 100, status: 'ok' as const };
                  if (i === idx) return { ...st, pct, status: pct >= 100 ? 'ok' as const : 'running' as const };
                  return st;
                });
                return { ...s, stages };
              });

            } else if (j.type === 'source' && j.data) {
              const src = j.data as unknown as AnalysisSource;
              setState(s => ({ ...s, sources: [...s.sources, src] }));

            } else if (j.type === 'finding' && j.data) {
              const finding = j.data as unknown as AnalysisFinding;
              setState(s => ({ ...s, findings: [...s.findings, finding] }));

            } else if (j.type === 'done' && j.data) {
              const d = j.data as {
                conclusion: string;
                actions: Array<{ label: string; value: string; risk?: boolean }>;
                risk_score: number;
                highlight_terms: string[];
                para_text: string;
              };
              setState(s => ({
                ...s,
                status: 'done',
                paraText: d.para_text ?? '',
                highlightTerms: d.highlight_terms ?? [],
                conclusion: {
                  text: d.conclusion,
                  actions: d.actions ?? [],
                  riskScore: d.risk_score ?? 0,
                },
                stages: s.stages.map(st => ({ ...st, pct: 100, status: 'ok' as const })),
              }));

            } else if (j.type === 'error') {
              setState(s => ({
                ...s,
                status: 'error',
                errorMessage: j.message ?? 'Analysis failed',
              }));
            }
          } catch { /* skip malformed SSE data */ }
        }
      }
    } catch (e: unknown) {
      if (e instanceof Error && e.name === 'AbortError') return;
      setState(s => ({
        ...s,
        status: 'error',
        errorMessage: e instanceof Error ? e.message : 'Unknown error',
      }));
    }
  }, []);

  const reset = useCallback(() => {
    abortRef.current?.abort();
    setState(INITIAL_STATE);
  }, []);

  return { state, run, reset };
}
```

---

## Task 6: Frontend — NewAnalysisModal component

**Files:**
- Create: `frontend/src/pages/Compliance/NewAnalysisModal.tsx`

Three-tab input modal: Tab 1 = paste text, Tab 2 = select from document library, Tab 3 = upload file. Shared: domain chips, optional title, Run button.

- [ ] **Step 1: Create `frontend/src/pages/Compliance/NewAnalysisModal.tsx`**

```tsx
import { useState, useEffect, useRef } from 'react';
import { X, Upload } from 'lucide-react';

interface Props {
  onClose: () => void;
  onRun: (formData: FormData, title: string) => void;
}

interface DocItem {
  doc_id: string;
  doc_name: string;
  regulation_type: string;
  status: string;
}

const DOMAIN_OPTIONS = [
  { key: 'vehicle', label: 'Vehicle Safety' },
  { key: 'data_security', label: 'Data Security' },
  { key: 'ehs', label: 'EHS' },
  { key: 'carbon', label: 'Carbon' },
  { key: 'quality', label: 'Quality System' },
];

type Tab = 'text' | 'library' | 'upload';

export function NewAnalysisModal({ onClose, onRun }: Props) {
  const [tab, setTab] = useState<Tab>('text');
  const [inputText, setInputText] = useState('');
  const [selectedDocId, setSelectedDocId] = useState('');
  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
  const [domains, setDomains] = useState<string[]>([]);
  const [title, setTitle] = useState('');
  const [docs, setDocs] = useState<DocItem[]>([]);
  const [dragging, setDragging] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Load document list for Tab 2
  useEffect(() => {
    fetch('/api/v1/documents/management-list')
      .then(r => r.json())
      .then(d => { if (Array.isArray(d?.documents)) setDocs(d.documents); })
      .catch(() => {});
  }, []);

  function toggleDomain(key: string) {
    setDomains(prev =>
      prev.includes(key) ? prev.filter(d => d !== key) : [...prev, key]
    );
  }

  function isReady(): boolean {
    if (tab === 'text')    return inputText.trim().length > 20;
    if (tab === 'library') return !!selectedDocId;
    if (tab === 'upload')  return !!uploadedFile;
    return false;
  }

  function handleRun() {
    if (!isReady()) return;
    const form = new FormData();
    if (tab === 'text')    form.append('text', inputText.trim());
    if (tab === 'library') form.append('doc_id', selectedDocId);
    if (tab === 'upload' && uploadedFile) form.append('file', uploadedFile);
    if (domains.length)   form.append('domains', domains.join(','));
    if (title.trim())     form.append('title', title.trim());
    const analysisTitle = title.trim() || (
      tab === 'library'
        ? docs.find(d => d.doc_id === selectedDocId)?.doc_name ?? 'Document Analysis'
        : tab === 'upload' ? uploadedFile?.name ?? 'File Analysis' : 'Text Analysis'
    );
    onRun(form, analysisTitle);
    onClose();
  }

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div
        className="modal-dialog"
        style={{ gridTemplateColumns: '1fr', maxWidth: 600 }}
        onClick={e => e.stopPropagation()}
      >
        <button className="modal-close" onClick={onClose} aria-label="Close"><X size={14} /></button>

        <div className="modal-panel" style={{ gap: 0 }}>
          <div className="modal-eyebrow">New Analysis</div>
          <div className="modal-title">Set up a compliance document review</div>
          <p className="modal-lead">Choose your input, select regulation domains to focus on, and run the AI pipeline.</p>

          {/* Tab switcher */}
          <div className="modal-tabs">
            {([
              { key: 'text',    label: 'Paste text' },
              { key: 'library', label: 'From library' },
              { key: 'upload',  label: 'Upload file' },
            ] as const).map(t => (
              <button
                key={t.key}
                className={`modal-tab${tab === t.key ? ' active' : ''}`}
                onClick={() => setTab(t.key)}
              >
                {t.label}
              </button>
            ))}
          </div>

          {/* Tab 1: Paste text */}
          {tab === 'text' && (
            <textarea
              className="composer-input"
              style={{ minHeight: 160, resize: 'vertical' }}
              placeholder="Paste the document paragraph or section you want to check for compliance…"
              value={inputText}
              onChange={e => setInputText(e.target.value)}
            />
          )}

          {/* Tab 2: From document library */}
          {tab === 'library' && (
            <div>
              {docs.length === 0 && (
                <p style={{ fontSize: 12, color: 'var(--muted)', padding: '12px 0' }}>
                  No indexed documents found. Upload documents in Document Management first.
                </p>
              )}
              <div className="doc-select-list">
                {docs.map(d => (
                  <div
                    key={d.doc_id}
                    className={`doc-select-item${selectedDocId === d.doc_id ? ' selected' : ''}`}
                    onClick={() => setSelectedDocId(d.doc_id)}
                  >
                    <div className="doc-select-name">{d.doc_name}</div>
                    <div className="doc-select-type">{d.regulation_type || d.status}</div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Tab 3: Upload file */}
          {tab === 'upload' && (
            <>
              <input
                ref={fileInputRef}
                type="file"
                accept=".pdf,.docx,.doc,.txt"
                style={{ display: 'none' }}
                onChange={e => setUploadedFile(e.target.files?.[0] ?? null)}
              />
              <div
                className={`dropzone${dragging ? ' drag-over' : ''}`}
                style={{ minHeight: 120 }}
                onDragOver={e => { e.preventDefault(); setDragging(true); }}
                onDragLeave={() => setDragging(false)}
                onDrop={e => {
                  e.preventDefault(); setDragging(false);
                  setUploadedFile(e.dataTransfer.files[0] ?? null);
                }}
                onClick={() => fileInputRef.current?.click()}
              >
                <div className="drop-icon"><Upload size={18} /></div>
                {uploadedFile
                  ? <div className="drop-label">{uploadedFile.name}</div>
                  : <>
                      <div className="drop-label">Drop file or click to browse</div>
                      <p className="drop-hint">PDF, DOCX, TXT</p>
                    </>
                }
              </div>
            </>
          )}

          {/* Regulation domain chips */}
          <div style={{ marginTop: 16 }}>
            <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 6 }}>
              Regulation domains (optional — leave empty to search all)
            </div>
            <div className="domain-chips">
              {DOMAIN_OPTIONS.map(d => (
                <button
                  key={d.key}
                  className={`chip${domains.includes(d.key) ? ' active' : ''}`}
                  onClick={() => toggleDomain(d.key)}
                >
                  {d.label}
                </button>
              ))}
            </div>
          </div>

          {/* Analysis title */}
          <div className="upload-field" style={{ marginTop: 14 }}>
            <label htmlFor="analysis-title">Analysis title (optional)</label>
            <input
              id="analysis-title"
              type="text"
              placeholder="e.g. Vehicle AI Safety Manual — Art. 9 Review"
              value={title}
              onChange={e => setTitle(e.target.value)}
            />
          </div>

          {/* Actions */}
          <div className="modal-actions" style={{ marginTop: 20 }}>
            <button className="btn" onClick={onClose}>Cancel</button>
            <button
              className="btn primary"
              onClick={handleRun}
              disabled={!isReady()}
            >
              Run Analysis
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
```

---

## Task 7: Frontend — CompliancePage refactor

**Files:**
- Modify: `frontend/src/pages/Compliance/CompliancePage.tsx`

Replace the entire static implementation with a stateful page driven by `useComplianceAnalysis`. The three-column workspace renders from `state` instead of hardcoded constants. An empty state is shown when no analysis has been run. A status bar shows the current analysis title and risk score when running/done.

- [ ] **Step 1: Replace `frontend/src/pages/Compliance/CompliancePage.tsx`**

Write the following complete file:

```tsx
import { useState } from 'react';
import { Topbar } from '../../components/layout/Topbar';
import { Search, Plus } from 'lucide-react';
import { NewAnalysisModal } from './NewAnalysisModal';
import { useComplianceAnalysis } from './useComplianceAnalysis';
import type { AnalysisSource, AnalysisFinding } from './useComplianceAnalysis';

// ── Helpers ───────────────────────────────────────────────────────────────────

const STATUS_LABEL: Record<string, string> = { ok: 'Covered', warn: 'Gap', risk: 'Critical' };

function riskLabel(score: number): string {
  if (score >= 70) return 'High Risk';
  if (score >= 40) return 'Medium Risk';
  return 'Low Risk';
}

function riskClass(score: number): string {
  if (score >= 70) return 'high';
  if (score >= 40) return 'medium';
  return 'low';
}

/** Render text with highlighted terms wrapped in <mark> */
function renderHighlighted(text: string, terms: string[]): React.ReactNode {
  if (!terms.length) return text;
  const escaped = terms.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
  const pattern = new RegExp(`(${escaped.join('|')})`, 'gi');
  const parts = text.split(pattern);
  return parts.map((part, i) =>
    terms.some(t => t.toLowerCase() === part.toLowerCase())
      ? <mark key={i}>{part}</mark>
      : <span key={i}>{part}</span>
  );
}

// ── Empty state ───────────────────────────────────────────────────────────────

function EmptyState({ onNew }: { onNew: () => void }) {
  return (
    <div className="compliance-empty">
      <div className="empty-ring" />
      <p>No analysis running. Click <strong>New analysis</strong> to start the AI-powered Document Review Loop.</p>
      <button className="btn primary" onClick={onNew}><Plus size={13} />New analysis</button>
    </div>
  );
}

// ── Left column: sources ──────────────────────────────────────────────────────

function SourceCol({ sources, loading }: { sources: AnalysisSource[]; loading: boolean }) {
  return (
    <div className="comp-col source-col">
      <div className="col-header">Retrieved Regulations</div>
      {loading && sources.length === 0 && (
        <div style={{ padding: '12px 2px', fontSize: 12, color: 'var(--muted)' }}>
          Retrieving regulations…
        </div>
      )}
      {sources.map((s, i) => (
        <div key={`${s.standard}-${i}`} className="source-item card">
          <div className="source-top">
            <span className="source-std">{s.standard}</span>
            <span className={`status ${s.status}`}>{STATUS_LABEL[s.status] ?? s.status}</span>
          </div>
          <div className="source-helper">{s.clause}</div>
          <div className="source-scores">
            <span className="score-pill">{Math.round(s.score * 100)}%</span>
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Middle column: paragraph + stages ────────────────────────────────────────

function ReviewCol({
  paraText,
  highlightTerms,
  stages,
  loading,
}: {
  paraText: string;
  highlightTerms: string[];
  stages: ReturnType<typeof useComplianceAnalysis>['state']['stages'];
  loading: boolean;
}) {
  return (
    <div className="comp-col review-col">
      <div className="col-header">Paragraph Under Review</div>
      <div className="card para-card">
        <p className="para-text">
          {paraText
            ? renderHighlighted(paraText, highlightTerms)
            : loading
              ? <span style={{ color: 'var(--muted)', fontSize: 12 }}>Extracting text…</span>
              : <span style={{ color: 'var(--muted)', fontSize: 12 }}>Text will appear here once analysis starts.</span>
          }
        </p>
      </div>
      <div className="card stages-card">
        <div className="card-header">Analysis stages</div>
        {stages.map(st => (
          <div key={st.label} className="stage-row">
            <div className="stage-label-row">
              <span className="stage-label">{st.label}</span>
              <span className="stage-pct">{st.pct}%</span>
            </div>
            <div className="stage-bar">
              <div
                className={`stage-fill ${
                  st.status === 'running' ? 'stage-running'
                  : st.status === 'ok' ? 'stage-ok'
                  : 'stage-info'
                }`}
                style={{ width: `${st.pct}%` }}
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Right column: findings + conclusion ───────────────────────────────────────

function FindingsCol({
  findings,
  conclusion,
  loading,
}: {
  findings: AnalysisFinding[];
  conclusion: ReturnType<typeof useComplianceAnalysis>['state']['conclusion'];
  loading: boolean;
}) {
  return (
    <div className="comp-col findings-col">
      <div className="col-header">Findings</div>
      {loading && findings.length === 0 && (
        <div style={{ padding: '12px 2px', fontSize: 12, color: 'var(--muted)' }}>
          Analyzing compliance gaps…
        </div>
      )}
      {findings.map((f, i) => (
        <div key={i} className="finding-item card">
          <div className="finding-top">
            <span className="finding-title">{f.title}</span>
            <span className={`status ${f.status}`}>{STATUS_LABEL[f.status] ?? f.status}</span>
          </div>
          <p className="finding-desc">{f.desc}</p>
          {f.clause_ref && (
            <span className="score-pill" style={{ marginTop: 4 }}>{f.clause_ref}</span>
          )}
        </div>
      ))}
      {conclusion && (
        <div className="card conclusion-box">
          <div className="card-header">Conclusion</div>
          <p className="conclusion-text">{conclusion.text}</p>
          {conclusion.actions.length > 0 && (
            <div className="action-items">
              {conclusion.actions.map((a, i) => (
                <div key={i} className="action-item">
                  <span className="action-label">{a.label}</span>
                  <span className={`action-value${a.risk ? ' risk-text' : ''}`}>{a.value}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ── Main page ─────────────────────────────────────────────────────────────────

export function CompliancePage() {
  const [showModal, setShowModal] = useState(false);
  const { state, run, reset } = useComplianceAnalysis();
  const isActive = state.status === 'running' || state.status === 'done';
  const isRunning = state.status === 'running';

  return (
    <div className="compliance-page">
      <Topbar
        title="Compliance Analysis"
        actions={
          <>
            <div className="search-box">
              <Search size={13} />
              <input placeholder="Search analyses..." />
            </div>
            {isActive && (
              <button className="btn sm" onClick={reset}>Reset</button>
            )}
            <button className="btn sm primary" onClick={() => setShowModal(true)}>
              <Plus size={13} />New analysis
            </button>
          </>
        }
      />

      {/* Status bar — shown when analysis is running or done */}
      {isActive && (
        <div className="compliance-status-bar">
          <span className="analysis-title">{state.title}</span>
          {state.status === 'done' && state.conclusion && (
            <span className={`risk-badge ${riskClass(state.conclusion.riskScore)}`}>
              {riskLabel(state.conclusion.riskScore)} · {state.conclusion.riskScore}/100
            </span>
          )}
          {isRunning && (
            <span style={{ fontSize: 12, color: 'var(--muted)' }}>
              {state.stages.find(s => s.status === 'running')?.label ?? 'Analyzing…'}
            </span>
          )}
          <span className="status ok" style={{ marginLeft: 'auto', fontSize: 11 }}>
            {state.sources.length} regulations · {state.findings.length} findings
          </span>
        </div>
      )}

      {/* Error state */}
      {state.status === 'error' && (
        <div style={{
          padding: '12px 24px',
          background: 'var(--danger-bg)',
          color: 'var(--danger)',
          fontSize: 13,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}>
          <span>Analysis error: {state.errorMessage}</span>
          <button className="btn sm" onClick={reset}>Dismiss</button>
        </div>
      )}

      {/* Main content */}
      {state.status === 'idle' ? (
        <EmptyState onNew={() => setShowModal(true)} />
      ) : (
        <div className="compliance-workspace">
          <SourceCol sources={state.sources} loading={isRunning} />
          <ReviewCol
            paraText={state.paraText}
            highlightTerms={state.highlightTerms}
            stages={state.stages}
            loading={isRunning}
          />
          <FindingsCol
            findings={state.findings}
            conclusion={state.conclusion}
            loading={isRunning}
          />
        </div>
      )}

      {showModal && (
        <NewAnalysisModal
          onClose={() => setShowModal(false)}
          onRun={(formData, title) => run(formData, title)}
        />
      )}
    </div>
  );
}
```

- [ ] **Step 2: Verify TypeScript compiles**

```powershell
cd frontend
node_modules\.bin\vue-tsc --noEmit 2>&1
```

Or use the Vite build to check:
```powershell
cd frontend
npx vite build --mode development 2>&1 | Select-String "error"
```

Expected: no TypeScript errors relating to the compliance files.

---

## Self-Review

**1. Spec coverage:**

| Requirement | Task |
|---|---|
| Text input (Tab 1) | Task 6 — NewAnalysisModal `text` tab |
| Document library input (Tab 2) | Task 6 — fetches `/documents/management-list` |
| File upload input (Tab 3) | Task 6 — dropzone, sends as `file` form field |
| Domain filter chips | Task 6 — DOMAIN_OPTIONS chips in modal |
| Backend clause extraction | Task 1 — `split_into_clauses()` |
| Backend RAG retrieval per clause | Task 1 — `retrieve_for_clause()` |
| Backend gap check per clause | Task 1 — `check_clause_compliance()` |
| Backend conclusion synthesis | Task 1 — `synthesize_conclusion()` |
| SSE streaming endpoint | Task 3 — `POST /compliance/analyze-stream` |
| `stage` events updating progress bars | Task 5 hook + Task 7 `ReviewCol` |
| `source` events filling left column | Task 5 hook + Task 7 `SourceCol` |
| `finding` events filling right column | Task 5 hook + Task 7 `FindingsCol` |
| `done` event — conclusion + highlights | Task 5 hook + Task 7 `FindingsCol` |
| Keyword highlighting in paragraph | Task 7 — `renderHighlighted()` |
| Empty state before analysis | Task 7 — `EmptyState` component |
| Status bar with risk score | Task 7 — `compliance-status-bar` |
| Reset button | Task 7 — calls `reset()` from hook |
| CSS for modal tabs, status bar, empty state | Task 4 |

**2. Placeholder scan:** No "TBD" or "TODO" found. All code blocks are complete.

**3. Type consistency:**
- `AnalysisSource`, `AnalysisFinding`, `AnalysisStage`, `AnalysisConclusion`, `AnalysisState` defined in Task 5 and imported in Task 7. ✓
- `useComplianceAnalysis` returns `{ state, run, reset }` — used correctly in Task 7. ✓
- `NewAnalysisModal` props `{ onClose, onRun }` — used correctly in Task 7. ✓
- Backend SSE field names (`type`, `stage`, `pct`, `data`, `para_text`, `highlight_terms`, `risk_score`) consistent between Task 3 (backend) and Task 5 (frontend parser). ✓