Phase 2: Jinja2 infrastructure

api/app/core/templates.py

@@ -0,0 +1,23 @@
+"""
+Centralized Jinja2Templates instance.
+
+Kept in api/app/core/ so every page-rendering router imports from one place,
+avoiding multiple conflicting Template objects pointing at the same directory.
+
+WHY THIS FILE EXISTS
+--------------------
+FastAPI's Jinja2Templates must be initialised with a directory path.
+Centralising it here means that when Phase 3-5 routers add fragment endpoints
+they import `templates` from here — no duplication, no divergence.
+"""
+from __future__ import annotations
+
+from pathlib import Path
+
+from fastapi.templating import Jinja2Templates
+
+# Resolve relative to this file:
+#   api/app/core/templates.py  →  api/app/templates/
+_TEMPLATE_DIR: Path = Path(__file__).parent.parent / "templates"
+
+templates = Jinja2Templates(directory=str(_TEMPLATE_DIR))

api/app/main.py

@@ -2,10 +2,13 @@ from fastapi import FastAPI
 from contextlib import asynccontextmanager
 from dotenv import load_dotenv
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles  # Phase 2: serves api/app/static/
+from pathlib import Path                      # Phase 2: resolve static directory path
 
 load_dotenv()
 
 from api.app.routes import predict, results  # noqa: E402
+from api.app.routes import pages             # noqa: E402  Phase 2: Jinja2 page routes
 from api.app.middleware.metrics import instrumentator  # noqa: E402
 from api.app.services.absa_pipeline import pipeline  # noqa: E402
 from api.app.schemas.db_models import Base  # noqa: E402
@@ -46,3 +49,23 @@ app.include_router(predict.router, tags=["Predict"])
 app.include_router(results.router, tags=["System"])
 
 instrumentator.instrument(app).expose(app, endpoint="/metrics")
+
+# ── Phase 2: Jinja2 / HTMX frontend ──────────────────────────────────────────
+#
+# WHY pages router is included AFTER instrumentator:
+#   The instrumentator middleware wraps the entire ASGI app; order of
+#   router inclusion does not affect which routes get instrumented.  Including
+#   the pages router last is simply a readability convention — API routes first.
+#
+# WHY StaticFiles is mounted AFTER instrumentator:
+#   app.mount() creates a sub-application.  Mounting after the instrumentator
+#   call means the Prometheus middleware still wraps /static/* requests, but
+#   since static files are not hot paths for an ML tool this is acceptable.
+#   (Phase 7 cleanup will add /static to excluded_handlers in metrics.py.)
+
+app.include_router(pages.router)  # include_in_schema=False is set on the router itself
+
+# Resolve path relative to this file so it works regardless of CWD.
+_STATIC_DIR = Path(__file__).parent / "static"
+_STATIC_DIR.mkdir(parents=True, exist_ok=True)  # idempotent safety guard
+app.mount("/static", StaticFiles(directory=str(_STATIC_DIR)), name="static")

api/app/routes/pages.py

@@ -0,0 +1,111 @@
+"""
+Page routes — Jinja2/HTMX web frontend.
+
+WHY THIS FILE EXISTS
+--------------------
+All HTML-serving GET routes live here, completely separate from the JSON REST
+routes in routes/predict.py and routes/results.py.  This boundary means:
+
+  • REST routes never return HTML accidentally.
+  • Page routes never appear in the OpenAPI schema (include_in_schema=False).
+  • Future phases add HTMX fragment endpoints alongside these page routes
+    without touching any existing API code.
+
+WHAT THIS FILE DOES (Phase 2)
+------------------------------
+Registers four GET routes that render placeholder Jinja2 templates:
+  GET /           → redirect to /predict
+  GET /predict    → pages/predict.html
+  GET /batch      → pages/batch.html
+  GET /monitor    → pages/monitor.html
+
+No business logic.  No inference.  No database queries.
+The routes exist only to prove the template rendering infrastructure works.
+
+HTMX fragment endpoints (POST /predict/fragment, GET /batch/progress/{id},
+GET /monitor/health-partial) will be added in Phases 3-5.
+"""
+from __future__ import annotations
+
+from fastapi import APIRouter, Request
+from fastapi.responses import HTMLResponse
+
+from api.app.core.templates import templates
+
+# include_in_schema=False keeps these HTML routes out of the OpenAPI / Swagger UI.
+router = APIRouter(include_in_schema=False)
+
+# ── Navigation structure ───────────────────────────────────────────────────────
+# Mirrors the NAV constant in the React Sidebar.jsx so sidebar rendering is
+# driven from a single Python list rather than hard-coded in every template.
+_NAV_ITEMS: list[dict[str, str]] = [
+    {"path": "/predict", "icon": "psychology",   "label": "Predictor"},
+    {"path": "/batch",   "icon": "cloud_upload", "label": "Batch Analytics"},
+    {"path": "/monitor", "icon": "monitoring",   "label": "System Health"},
+]
+
+
+def _base_ctx(request: Request, page_title: str, **extra: object) -> dict:
+    """
+    Build the Jinja2 template context that base.html expects.
+
+    Every page renderer calls this so the sidebar and header always receive
+    the nav items and the current path (for active-link highlighting).
+    """
+    return {
+        "request":      request,          # required by Jinja2Templates
+        "page_title":   page_title,
+        "nav_items":    _NAV_ITEMS,
+        "current_path": request.url.path,
+        **extra,
+    }
+
+
+# ── Routes ─────────────────────────────────────────────────────────────────────
+
+@router.get("/", response_class=HTMLResponse)
+async def index(request: Request) -> HTMLResponse:
+    """Root → serve the Predict page (same behaviour as React's Navigate redirect)."""
+    return templates.TemplateResponse(
+        "pages/predict.html",
+        _base_ctx(request, "Live Predictor"),
+    )
+
+
+@router.get("/predict", response_class=HTMLResponse)
+async def predict_page(request: Request) -> HTMLResponse:
+    """
+    Jinja2 Live Predictor page.
+    Phase 2: renders the layout shell with a placeholder content block.
+    Phase 3: the content block will contain the HTMX predict form + result panel.
+    """
+    return templates.TemplateResponse(
+        "pages/predict.html",
+        _base_ctx(request, "Live Predictor"),
+    )
+
+
+@router.get("/batch", response_class=HTMLResponse)
+async def batch_page(request: Request) -> HTMLResponse:
+    """
+    Jinja2 Batch Analytics page.
+    Phase 2: placeholder.
+    Phase 4: file upload form + progress polling.
+    """
+    return templates.TemplateResponse(
+        "pages/batch.html",
+        _base_ctx(request, "Batch Analytics"),
+    )
+
+
+@router.get("/monitor", response_class=HTMLResponse)
+async def monitor_page(request: Request) -> HTMLResponse:
+    """
+    Jinja2 System Monitor page.
+    Phase 2: placeholder.
+    Phase 5: live health status + performance metrics.
+    """
+    return templates.TemplateResponse(
+        "pages/monitor.html",
+        _base_ctx(request, "System Monitor"),
+    )

api/app/static/css/app.css

@@ -0,0 +1,497 @@
+/*
+ * SentimentAI — Application Design System
+ *
+ * WHY THIS FILE EXISTS
+ * --------------------
+ * The React dashboard used Tailwind's @apply directive to define component
+ * classes (badge-positive, card, btn-primary, etc.) inside index.css.  Those
+ * @apply rules require a compiled Tailwind build step which we are eliminating.
+ *
+ * This file replaces index.css + the @apply rules with equivalent plain CSS.
+ * Tailwind utility classes (bg-*, text-*, flex, etc.) are still available via
+ * the CDN Play CDN loaded in base.html — this file only contains component-level
+ * classes that the CDN cannot generate from the HTML scan.
+ *
+ * Design token values are taken verbatim from dashboard/tailwind.config.js.
+ * Do not change token values here without updating the Tailwind CDN config in
+ * base.html — they must stay in sync.
+ *
+ * SECTIONS
+ * --------
+ *   1. Base / Reset
+ *   2. Material Symbols Outlined icon font
+ *   3. Scrollbar
+ *   4. Focus ring
+ *   5. Layout helpers  (glass-panel, sidebar, overlay)
+ *   6. Navigation       (nav-item, nav-item-active)
+ *   7. Badges           (badge-positive, -negative, -neutral, -processing, -error)
+ *   8. Highlights       (highlight-positive, -negative, -neutral)
+ *   9. Cards            (card, card-low, stat-card)
+ *  10. Form controls    (input-base, textarea reset)
+ *  11. Button           (btn-primary)
+ *  12. Drag-and-drop    (drag-active)
+ *  13. HTMX             (htmx-indicator)
+ *  14. Animations       (keyframes + helper classes)
+ *  15. Toast notices
+ */
+
+/* ── 1. Base / Reset ────────────────────────────────────────────────────────── */
+
+html {
+  color-scheme: dark;
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  background-color: #0b1326;
+  color: #dae2fd;
+  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  min-height: 100vh;
+  margin: 0;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* ── 2. Material Symbols Outlined ───────────────────────────────────────────── */
+/*
+ * Mirrors the class defined in React's index.css exactly.
+ * The font itself is loaded via Google Fonts CDN in base.html.
+ */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 20px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+  vertical-align: middle;
+}
+
+/* ── 3. Scrollbar ────────────────────────────────────────────────────────────── */
+
+::-webkit-scrollbar          { width: 6px; height: 6px; }
+::-webkit-scrollbar-track    { background: transparent; }
+::-webkit-scrollbar-thumb    { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }
+
+/* ── 4. Focus ring ──────────────────────────────────────────────────────────── */
+
+:focus-visible {
+  outline: 2px solid #c0c1ff;
+  outline-offset: 2px;
+}
+
+/* ── 5. Layout helpers ──────────────────────────────────────────────────────── */
+
+.glass-panel {
+  background-color: rgba(23, 31, 51, 0.75);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+/* Sidebar slide-in / slide-out on mobile */
+.sidebar {
+  transform: translateX(-100%);
+  transition: transform 250ms ease-out;
+}
+.sidebar.sidebar--open {
+  transform: translateX(0);
+}
+@media (min-width: 768px) {
+  .sidebar {
+    transform: translateX(0);
+  }
+}
+
+/* Mobile overlay (backdrop) */
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 40;
+}
+.sidebar-overlay.sidebar-overlay--visible {
+  display: block;
+}
+
+/* ── 6. Navigation ──────────────────────────────────────────────────────────── */
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  color: #c7c4d7;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 150ms ease, background-color 150ms ease;
+}
+.nav-item:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+  color: #dae2fd;
+}
+
+.nav-item-active {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  color: #c0c1ff;
+  background-color: rgba(255, 255, 255, 0.07);
+  border-right: 2px solid #c0c1ff;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+/* ── 7. Badges ──────────────────────────────────────────────────────────────── */
+/*
+ * All badges share the same structural CSS.  The colour variant is applied
+ * via the class suffix.  Each badge is intentionally uppercase + monospace
+ * to match the React component styling.
+ */
+
+.badge-base {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.badge-positive {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  background-color: rgba(78, 222, 163, 0.10);
+  color: #4edea3;
+  border: 1px solid rgba(78, 222, 163, 0.25);
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.badge-negative {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  background-color: rgba(255, 180, 171, 0.10);
+  color: #ffb4ab;
+  border: 1px solid rgba(255, 180, 171, 0.25);
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.badge-neutral {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  background-color: rgba(144, 143, 160, 0.10);
+  color: #c7c4d7;
+  border: 1px solid rgba(144, 143, 160, 0.25);
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.badge-processing {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  background-color: rgba(192, 193, 255, 0.10);
+  color: #c0c1ff;
+  border: 1px solid rgba(192, 193, 255, 0.25);
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  animation: pulse-badge 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.badge-error {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  background-color: rgba(255, 180, 171, 0.10);
+  color: #ffb4ab;
+  border: 1px solid rgba(255, 180, 171, 0.25);
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+/* Dot inside badge */
+.badge-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 9999px;
+  flex-shrink: 0;
+  display: inline-block;
+}
+.badge-dot--positive { background-color: #4edea3; }
+.badge-dot--negative { background-color: #ffb4ab; }
+.badge-dot--neutral  { background-color: #908fa0; }
+.badge-dot--primary  { background-color: #c0c1ff; }
+.badge-dot--error    { background-color: #ffb4ab; }
+
+/* ── 8. Highlights (annotated text) ─────────────────────────────────────────── */
+/*
+ * Applied by the server-side annotated-text builder (Phase 3) to wrap
+ * aspect spans inside the review text.
+ */
+
+.highlight-positive {
+  background-color: rgba(78, 222, 163, 0.15);
+  color: #4edea3;
+  border: 1px solid rgba(78, 222, 163, 0.30);
+  border-radius: 4px;
+  padding: 0 4px;
+  margin: 0 2px;
+  font-weight: 500;
+}
+
+.highlight-negative {
+  background-color: rgba(255, 180, 171, 0.15);
+  color: #ffb4ab;
+  border: 1px solid rgba(255, 180, 171, 0.30);
+  border-radius: 4px;
+  padding: 0 4px;
+  margin: 0 2px;
+  font-weight: 500;
+}
+
+.highlight-neutral {
+  background-color: rgba(144, 143, 160, 0.15);
+  color: #c7c4d7;
+  border: 1px solid rgba(144, 143, 160, 0.25);
+  border-radius: 4px;
+  padding: 0 4px;
+  margin: 0 2px;
+  font-weight: 500;
+}
+
+/* ── 9. Cards ────────────────────────────────────────────────────────────────── */
+
+.card {
+  background-color: #171f33;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 24px;
+}
+
+.card-low {
+  background-color: #131b2e;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  padding: 24px;
+}
+
+.stat-card {
+  background-color: #171f33;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 24px;
+  position: relative;
+  overflow: hidden;
+}
+
+/* ── 10. Form controls ──────────────────────────────────────────────────────── */
+
+.input-base {
+  background-color: #0b1326;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #dae2fd;
+  width: 100%;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.input-base::placeholder {
+  color: rgba(199, 196, 215, 0.60);
+}
+
+.input-base:focus {
+  outline: none;
+  border-color: #c0c1ff;
+  box-shadow: 0 0 0 1px rgba(192, 193, 255, 0.40);
+}
+
+/* Select arrow */
+select.input-base {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c7c4d7' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 32px;
+  cursor: pointer;
+}
+
+/* Textarea */
+textarea.input-base {
+  resize: vertical;
+  font-family: inherit;
+  line-height: 1.6;
+}
+
+/* ── 11. Button — primary ────────────────────────────────────────────────────── */
+
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background-color: #c0c1ff;
+  color: #1000a9;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  padding: 10px 20px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  text-decoration: none;
+  transition: filter 150ms ease, transform 150ms ease;
+  white-space: nowrap;
+}
+.btn-primary:hover  { filter: brightness(1.10); }
+.btn-primary:active { transform: scale(0.98); }
+.btn-primary:disabled,
+.btn-primary[disabled] {
+  opacity: 0.50;
+  cursor: not-allowed;
+  transform: none;
+  pointer-events: none;
+}
+
+/* ── 12. Drag-and-drop ──────────────────────────────────────────────────────── */
+
+.drag-active {
+  border-color: rgba(192, 193, 255, 0.70) !important;
+  background-color: rgba(192, 193, 255, 0.04) !important;
+}
+
+/* ── 13. HTMX indicators ────────────────────────────────────────────────────── */
+/*
+ * HTMX adds .htmx-request to the element that triggered the request.
+ * Elements with .htmx-indicator are hidden by default and shown during request.
+ */
+.htmx-indicator                        { display: none; }
+.htmx-request .htmx-indicator          { display: flex; }
+.htmx-request.htmx-indicator           { display: flex; }
+
+/* Progress bar fill animation */
+.progress-bar {
+  transition: width 500ms ease;
+}
+
+/* ── 14. Animations ──────────────────────────────────────────────────────────── */
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes slideIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0);   }
+}
+
+@keyframes pulse-badge {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.6; }
+}
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.4; }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg);   }
+  to   { transform: rotate(360deg); }
+}
+
+.animate-fade-in   { animation: fadeIn 0.20s ease-out; }
+.animate-slide-in  { animation: slideIn 0.25s ease-out; }
+.animate-spin      { animation: spin 1s linear infinite; }
+.animate-pulse-slow { animation: pulse-dot 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+
+/* ── 15. Toast notifications ─────────────────────────────────────────────────── */
+/*
+ * Toasts are managed by Alpine.js appState().
+ * Base styles here; position and z-index are set with Tailwind utilities in base.html.
+ */
+.toast {
+  padding: 12px 16px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background-color: #222a3d;
+  color: #dae2fd;
+  font-size: 14px;
+  max-width: 380px;
+  pointer-events: auto;
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+.toast--success { border-color: rgba(78, 222, 163, 0.30);  color: #4edea3; }
+.toast--error   { border-color: rgba(255, 180, 171, 0.30); color: #ffb4ab; }
+.toast--info    { border-color: rgba(192, 193, 255, 0.20); color: #dae2fd; }

api/app/templates/base.html

@@ -0,0 +1,438 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{% block title %}{{ page_title }}{% endblock %} — SentimentAI</title>
+  <meta name="description" content="{% block description %}Multilingual Aspect-Based Sentiment Analysis Dashboard{% endblock %}" />
+
+  {# ── Fonts ────────────────────────────────────────────────────────────────── #}
+  {# Inter replaces Geist (same design language, available on Google Fonts CDN). #}
+  {# JetBrains Mono is used verbatim from the original tailwind.config.js.      #}
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
+        rel="stylesheet" />
+
+  {# ── Material Symbols Outlined icon font ──────────────────────────────────── #}
+  {# Variable-font version so FILL and wght axes are available (matching React). #}
+  <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+
+  {#
+    ── Tailwind CSS (Play CDN) ───────────────────────────────────────────────
+    The CDN version scans the DOM at runtime and generates utilities on demand.
+    This eliminates the npm build step.  Custom design tokens from the original
+    tailwind.config.js are provided in the tailwind.config object below.
+
+    NOTE: The config <script> MUST come AFTER the CDN <script> tag.
+  #}
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            // Surface palette — from tailwind.config.js
+            "surface":                   "#0b1326",
+            "surface-dim":               "#0b1326",
+            "surface-bright":            "#31394d",
+            "surface-container-lowest":  "#060e20",
+            "surface-container-low":     "#131b2e",
+            "surface-container":         "#171f33",
+            "surface-container-high":    "#222a3d",
+            "surface-container-highest": "#2d3449",
+            "surface-variant":           "#2d3449",
+            "background":                "#0b1326",
+            // On-surface
+            "on-surface":                "#dae2fd",
+            "on-surface-variant":        "#c7c4d7",
+            "on-background":             "#dae2fd",
+            // Primary
+            "primary":                   "#c0c1ff",
+            "primary-container":         "#8083ff",
+            "on-primary":                "#1000a9",
+            // Secondary
+            "secondary":                 "#c4c7c9",
+            // Tertiary (positive sentiment — green)
+            "tertiary":                  "#4edea3",
+            "tertiary-container":        "#00885d",
+            "on-tertiary":               "#003824",
+            // Error (negative sentiment — red)
+            "error":                     "#ffb4ab",
+            "error-container":           "#93000a",
+            "on-error":                  "#690005",
+            // Outline
+            "outline":                   "#908fa0",
+            "outline-variant":           "#464554",
+            // Semantic aliases
+            "positive":                  "#4edea3",
+            "negative":                  "#ffb4ab",
+            "warning":                   "#f5c542",
+          },
+          fontFamily: {
+            sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
+            mono: ["JetBrains Mono", "ui-monospace", "monospace"],
+          },
+          fontSize: {
+            "display":     ["36px", { lineHeight: "44px", letterSpacing: "-0.025em", fontWeight: "600" }],
+            "headline-lg": ["32px", { lineHeight: "40px", letterSpacing: "-0.02em",  fontWeight: "600" }],
+            "headline-md": ["24px", { lineHeight: "32px", letterSpacing: "-0.01em",  fontWeight: "600" }],
+            "headline-sm": ["20px", { lineHeight: "28px",                             fontWeight: "500" }],
+            "title-lg":    ["16px", { lineHeight: "24px",                             fontWeight: "600" }],
+            "title-md":    ["14px", { lineHeight: "20px",                             fontWeight: "600" }],
+            "body-lg":     ["16px", { lineHeight: "24px",                             fontWeight: "400" }],
+            "body-md":     ["14px", { lineHeight: "20px",                             fontWeight: "400" }],
+            "body-sm":     ["12px", { lineHeight: "16px",                             fontWeight: "400" }],
+            "label-lg":    ["14px", { lineHeight: "20px", letterSpacing: "0.02em",    fontWeight: "500" }],
+            "label-md":    ["12px", { lineHeight: "16px", letterSpacing: "0.05em",    fontWeight: "500" }],
+            "label-sm":    ["11px", { lineHeight: "16px", letterSpacing: "0.06em",    fontWeight: "500" }],
+          },
+          spacing: {
+            "xs":  "4px",
+            "sm":  "8px",
+            "md":  "12px",
+            "lg":  "16px",
+            "xl":  "24px",
+            "2xl": "32px",
+            "3xl": "48px",
+          },
+          borderRadius: {
+            "sm":      "4px",
+            "DEFAULT": "6px",
+            "md":      "8px",
+            "lg":      "12px",
+            "xl":      "16px",
+            "2xl":     "20px",
+            "full":    "9999px",
+          },
+          boxShadow: {
+            "card":           "0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3)",
+            "elevated":       "0 4px 16px rgba(0,0,0,0.5)",
+            "glow-primary":   "0 0 20px rgba(192,193,255,0.15)",
+            "glow-positive":  "0 0 12px rgba(78,222,163,0.20)",
+            "glow-negative":  "0 0 12px rgba(255,180,171,0.20)",
+          },
+          backdropBlur: {
+            "glass": "12px",
+          },
+          animation: {
+            "pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+            "fade-in":    "fadeIn 0.2s ease-out",
+            "slide-in":   "slideIn 0.25s ease-out",
+          },
+          keyframes: {
+            fadeIn:  { from: { opacity: "0" },                               to: { opacity: "1" } },
+            slideIn: { from: { opacity: "0", transform: "translateY(8px)" }, to: { opacity: "1", transform: "translateY(0)" } },
+          },
+          // Safelist ensures Alpine.js-toggled classes are always generated
+          safelist: ["translate-x-0", "-translate-x-full"],
+        },
+      },
+    };
+  </script>
+
+  {# ── Custom design system CSS ──────────────────────────────────────────────── #}
+  {# Component classes that use @apply in the React version are written as plain  #}
+  {# CSS in app.css (since the Play CDN does not process @apply in external CSS). #}
+  <link rel="stylesheet" href="{{ request.url_for('static', path='css/app.css') }}" />
+
+  {# ── Per-page extra head content ──────────────────────────────────────────── #}
+  {% block head %}{% endblock %}
+</head>
+
+<body class="bg-[#0b1326] text-[#dae2fd] antialiased font-sans"
+      x-data="appState()"
+      @notify.window="addToast($event.detail.msg, $event.detail.type)">
+
+  {# ── Toast notification container ────────────────────────────────────────── #}
+  {# Managed by Alpine.js appState().  HTMX error events dispatch to this.      #}
+  <div class="fixed top-4 right-4 z-[100] space-y-2 pointer-events-none w-80"
+       role="status"
+       aria-live="polite"
+       aria-atomic="false">
+    <template x-for="toast in toasts" :key="toast.id">
+      <div x-show="toast.visible"
+           x-transition:enter="transition ease-out duration-200"
+           x-transition:enter-start="opacity-0 translate-y-1"
+           x-transition:enter-end="opacity-100 translate-y-0"
+           x-transition:leave="transition ease-in duration-150"
+           x-transition:leave-start="opacity-100"
+           x-transition:leave-end="opacity-0"
+           class="toast pointer-events-auto"
+           :class="{
+             'toast--success': toast.type === 'success',
+             'toast--error':   toast.type === 'error',
+             'toast--info':    toast.type === 'info',
+           }"
+           x-text="toast.msg">
+      </div>
+    </template>
+  </div>
+
+  {# ── Page wrapper ─────────────────────────────────────────────────────────── #}
+  <div class="min-h-screen flex">
+
+    {# ── Mobile sidebar overlay ──────────────────────────────────────────────── #}
+    <div x-show="sidebarOpen"
+         x-transition:enter="transition ease-out duration-200"
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
+         x-transition:leave="transition ease-in duration-150"
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0"
+         @click="sidebarOpen = false"
+         class="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 md:hidden"
+         aria-hidden="true"
+         style="display: none;"></div>
+
+    {# ── Sidebar ─────────────────────────────────────────��───────────────────── #}
+    {#
+      The sidebar is always visible on desktop (md:translate-x-0) and slides in
+      on mobile when sidebarOpen is true.  Alpine.js toggles the translation via
+      :class binding.  The safelist in tailwind.config ensures translate-x-0 and
+      -translate-x-full are always generated by the CDN.
+    #}
+    <nav aria-label="Main navigation"
+         :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
+         class="fixed left-0 top-0 h-screen w-64 z-50 flex flex-col
+                bg-[#171f33] border-r border-white/[0.07]
+                transition-transform duration-[250ms] ease-out
+                md:translate-x-0">
+
+      {# Logo #}
+      <div class="flex items-center gap-3 px-xl py-xl">
+        <span class="material-symbols-outlined text-[#c0c1ff]"
+              style="font-size:28px; font-variation-settings: 'FILL' 1, 'wght' 400;"
+              aria-hidden="true">psychology</span>
+        <div>
+          <p class="text-[16px] font-semibold text-[#c0c1ff] leading-tight">SentimentAI</p>
+          <p class="font-mono text-[11px] text-[#c7c4d7] tracking-wider">Analysis Engine v2.4</p>
+        </div>
+      </div>
+
+      {# CTA — New Analysis #}
+      <div class="px-xl mb-xl">
+        <a href="/predict"
+           @click="sidebarOpen = false"
+           class="btn-primary w-full text-[12px]">
+          <span class="material-symbols-outlined"
+                style="font-size:18px; font-variation-settings: 'FILL' 0, 'wght' 300;"
+                aria-hidden="true">add</span>
+          New Analysis
+        </a>
+      </div>
+
+      {# Navigation links #}
+      <ul class="flex-1 px-sm space-y-0.5 overflow-y-auto" role="list">
+        {% for item in nav_items %}
+          {% set active = current_path == item.path or (current_path == '/' and item.path == '/predict') %}
+          <li role="listitem">
+            <a href="{{ item.path }}"
+               @click="sidebarOpen = false"
+               class="{{ 'nav-item-active' if active else 'nav-item' }}"
+               {% if active %}aria-current="page"{% endif %}>
+              <span class="material-symbols-outlined"
+                    style="font-size:20px; font-variation-settings: 'FILL' {{ '1' if active else '0' }}, 'wght' 300;"
+                    aria-hidden="true">{{ item.icon }}</span>
+              <span>{{ item.label }}</span>
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+
+      {# Bottom section: health pill + secondary nav #}
+      <div class="px-sm pt-sm pb-xl border-t border-white/[0.06] space-y-0.5 mt-auto">
+
+        {# API health indicator — static in Phase 2; HTMX polling added in Phase 5 #}
+        <div id="sidebar-health"
+             class="flex items-center gap-2 px-3 py-2 mb-1">
+          <span class="w-2 h-2 rounded-full bg-[#4edea3] flex-shrink-0 animate-pulse-slow"
+                aria-hidden="true"></span>
+          <span class="font-mono text-[12px] text-[#c7c4d7]">API Online</span>
+        </div>
+
+        <a href="/monitor"
+           @click="sidebarOpen = false"
+           class="{{ 'nav-item-active' if current_path == '/monitor' else 'nav-item' }}">
+          <span class="material-symbols-outlined"
+                style="font-size:20px; font-variation-settings: 'FILL' 0, 'wght' 300;"
+                aria-hidden="true">settings</span>
+          <span>Settings</span>
+        </a>
+
+        <a href="/docs"
+           target="_blank"
+           rel="noopener noreferrer"
+           class="nav-item">
+          <span class="material-symbols-outlined"
+                style="font-size:20px; font-variation-settings: 'FILL' 0, 'wght' 300;"
+                aria-hidden="true">menu_book</span>
+          <span>API Docs</span>
+        </a>
+      </div>
+    </nav>
+
+    {# ── Main area (right of sidebar) ────────────────────────────────────────── #}
+    <div class="flex-1 md:ml-64 flex flex-col min-h-screen">
+
+      {# Top header bar #}
+      <header class="fixed top-0 right-0 left-0 md:left-64 h-16 z-30
+                     bg-[#0b1326]/80 backdrop-blur-[12px]
+                     border-b border-white/[0.06]
+                     flex items-center justify-between px-xl gap-4">
+
+        <div class="flex items-center gap-3">
+          {# Mobile hamburger #}
+          <button @click="sidebarOpen = true"
+                  class="md:hidden p-2 rounded-lg text-[#c7c4d7]
+                         hover:text-[#dae2fd] hover:bg-white/[0.05]
+                         transition-colors"
+                  aria-label="Open navigation"
+                  aria-expanded="false"
+                  :aria-expanded="sidebarOpen">
+            <span class="material-symbols-outlined"
+                  style="font-size:22px; font-variation-settings: 'FILL' 0, 'wght' 300;"
+                  aria-hidden="true">menu</span>
+          </button>
+
+          {# Mobile brand (hidden on desktop) #}
+          <div class="md:hidden flex items-center gap-2">
+            <span class="material-symbols-outlined text-[#c0c1ff]"
+                  style="font-size:22px; font-variation-settings: 'FILL' 1, 'wght' 400;"
+                  aria-hidden="true">psychology</span>
+            <span class="font-semibold text-[#dae2fd]">SentimentAI</span>
+          </div>
+
+          {# Desktop page title (hidden on mobile) #}
+          <h2 class="hidden md:block text-body-md font-medium text-[#c7c4d7]">
+            {{ page_title }}
+          </h2>
+        </div>
+
+        {# Right action group #}
+        <div class="flex items-center gap-2">
+          <button class="p-2 rounded-lg text-[#c7c4d7]
+                         hover:text-[#dae2fd] hover:bg-white/[0.05]
+                         transition-colors"
+                  aria-label="Notifications">
+            <span class="material-symbols-outlined"
+                  style="font-size:20px; font-variation-settings: 'FILL' 0, 'wght' 300;"
+                  aria-hidden="true">notifications</span>
+          </button>
+
+          <a href="/docs"
+             target="_blank"
+             rel="noopener noreferrer"
+             class="hidden sm:flex items-center gap-1.5 px-3 py-1.5
+                    border border-white/[0.12] rounded-lg
+                    font-mono text-[12px] text-[#c7c4d7]
+                    hover:text-[#dae2fd] hover:border-white/25
+                    transition-colors duration-150">
+            <span class="material-symbols-outlined"
+                  style="font-size:14px; font-variation-settings: 'FILL' 0, 'wght' 300;"
+                  aria-hidden="true">api</span>
+            API Docs
+          </a>
+
+          {# Avatar placeholder #}
+          <div class="w-8 h-8 rounded-full bg-[#222a3d]
+                      border border-white/[0.12]
+                      flex items-center justify-center
+                      text-[#c7c4d7] select-none"
+               role="img"
+               aria-label="User avatar">
+            <span class="material-symbols-outlined"
+                  style="font-size:18px; font-variation-settings: 'FILL' 0, 'wght' 300;"
+                  aria-hidden="true">person</span>
+          </div>
+        </div>
+      </header>
+
+      {# Page content area #}
+      <main class="flex-1 pt-16 overflow-y-auto" id="main-content">
+        <div class="max-w-[1280px] mx-auto px-lg md:px-3xl py-xl md:py-2xl">
+          {% block content %}{% endblock %}
+        </div>
+      </main>
+
+      {# Footer #}
+      <footer class="border-t border-white/[0.05] py-4 text-center font-mono text-label-sm text-[#c7c4d7]/50">
+        SentimentAI — Multilingual ABSA Dashboard
+      </footer>
+
+    </div>{# /main area #}
+  </div>{# /page wrapper #}
+
+  {# ── JavaScript ────────────────────────────────────────────────────────────── #}
+
+  {#
+    Alpine.js state — defined BEFORE the defer script so appState() is in scope
+    when Alpine.js initialises after DOMContentLoaded.
+  #}
+  <script>
+    /**
+     * appState()
+     * ----------
+     * Root Alpine.js component mounted on <body>.
+     *
+     * Responsibilities:
+     *   - sidebarOpen  : mobile sidebar toggle state
+     *   - toasts       : notification queue for HTMX errors and success messages
+     *   - addToast()   : push a message (called via @notify.window event)
+     *
+     * HTMX events are converted to CustomEvents ("notify") which Alpine.js
+     * listens for via @notify.window.  This keeps HTMX and Alpine.js decoupled.
+     */
+    function appState() {
+      return {
+        sidebarOpen: false,
+        toasts: [],
+
+        addToast(msg, type = 'info') {
+          const toast = { id: Date.now() + Math.random(), msg, type, visible: true };
+          this.toasts.push(toast);
+          // Auto-dismiss after 3.5 s
+          setTimeout(() => {
+            toast.visible = false;
+            // Remove from array after fade-out completes
+            setTimeout(() => {
+              this.toasts = this.toasts.filter(t => t.id !== toast.id);
+            }, 200);
+          }, 3500);
+        },
+      };
+    }
+
+    // ── HTMX → notify bridge ─────────────────────────────────────────────────
+    // Translate HTMX lifecycle events into the "notify" CustomEvent so Alpine.js
+    // can display them without tightly coupling HTMX handlers to Alpine components.
+
+    document.addEventListener('htmx:responseError', function (e) {
+      let msg = 'Request failed. Please try again.';
+      try {
+        const body = JSON.parse(e.detail.xhr.responseText);
+        msg = body.detail || msg;
+      } catch (_) { /* not JSON — use default */ }
+      window.dispatchEvent(new CustomEvent('notify', { detail: { msg, type: 'error' } }));
+    });
+
+    document.addEventListener('htmx:sendError', function () {
+      window.dispatchEvent(new CustomEvent('notify', {
+        detail: { msg: 'Network error — check your connection.', type: 'error' }
+      }));
+    });
+  </script>
+
+  {# HTMX — loaded deferred so it does not block rendering #}
+  <script src="https://unpkg.com/htmx.org@1.9.12/dist/htmx.min.js" defer></script>
+
+  {# Alpine.js v3 — loaded deferred; appState() above is already in global scope #}
+  <script defer src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script>
+
+  {# ── Per-page extra scripts ───────────────────────────────────────────────── #}
+  {% block scripts %}{% endblock %}
+
+</body>
+</html>

api/app/templates/macros/ui.html

@@ -0,0 +1,178 @@
+{#
+  macros/ui.html — Reusable Jinja2 macros for the SentimentAI dashboard.
+
+  WHY THIS FILE EXISTS
+  --------------------
+  The React components (Sidebar.jsx, Monitor.jsx, Analytics.jsx) defined small
+  helper components (MSIcon, StatusBadge, HealthChip, InfoRow) that were reused
+  across pages.  Jinja2 macros provide the equivalent pattern: define once,
+  import anywhere.
+
+  USAGE IN TEMPLATES
+  ------------------
+    {% from "macros/ui.html" import ms_icon, status_badge, health_chip, sentiment_badge %}
+
+  Each macro produces self-contained HTML with no JavaScript dependencies.
+  CSS classes reference app.css component classes (badge-*, highlight-*) and
+  Tailwind utilities from the CDN.
+#}
+
+{# ── Material Symbols Outlined icon ───────────────────────────────────────── #}
+{#
+  ms_icon(name, filled, size, cls)
+  ---------------------------------
+  Renders a Material Symbols Outlined icon span.
+
+  Parameters
+  ----------
+  name   : str   — icon name e.g. "psychology", "cloud_upload", "bolt"
+  filled : bool  — whether to use FILL=1 (solid) or FILL=0 (outlined)
+  size   : int   — font-size in px (default 20)
+  cls    : str   — extra CSS classes appended to the span
+#}
+{% macro ms_icon(name, filled=False, size=20, cls='') %}
+<span class="material-symbols-outlined {{ cls }}"
+      style="font-size: {{ size }}px; font-variation-settings: 'FILL' {{ 1 if filled else 0 }}, 'wght' {{ 400 if filled else 300 }};"
+      aria-hidden="true">{{ name }}</span>
+{% endmacro %}
+
+
+{# ── Status badge ─────────────────────────────────────────────────────────── #}
+{#
+  status_badge(status)
+  ---------------------
+  Renders a coloured badge for a batch job status.
+
+  status values: "completed" | "processing" | "queued" | "failed"
+#}
+{% macro status_badge(status) %}
+{% if status == 'completed' %}
+<span class="badge-positive">
+  <span class="badge-dot badge-dot--positive"></span>
+  Completed
+</span>
+{% elif status == 'processing' %}
+<span class="badge-processing">
+  <span class="badge-dot badge-dot--primary animate-pulse-slow"></span>
+  Processing
+</span>
+{% elif status == 'queued' %}
+<span class="badge-neutral">
+  <span class="badge-dot badge-dot--neutral"></span>
+  Queued
+</span>
+{% elif status == 'failed' %}
+<span class="badge-error">
+  <span class="badge-dot badge-dot--error"></span>
+  Failed
+</span>
+{% else %}
+<span class="badge-neutral">{{ status }}</span>
+{% endif %}
+{% endmacro %}
+
+
+{# ── Health chip ──────────────────────────────────────────────────────────── #}
+{#
+  health_chip(ok)
+  ----------------
+  Renders a "Healthy" or "Degraded" status chip.
+
+  ok : bool — True if the API health check returned status=="ok"
+#}
+{% macro health_chip(ok) %}
+{% if ok %}
+<span class="badge-positive">
+  <span class="badge-dot badge-dot--positive animate-pulse-slow"></span>
+  Healthy
+</span>
+{% else %}
+<span class="badge-error">
+  <span class="badge-dot badge-dot--error animate-pulse-slow"></span>
+  Degraded
+</span>
+{% endif %}
+{% endmacro %}
+
+
+{# ── Sentiment badge ──────────────────────────────────────────────────────── #}
+{#
+  sentiment_badge(sentiment)
+  ---------------------------
+  Renders the sentiment label for an aspect card.
+
+  sentiment values: "positive" | "negative" | "neutral" | "conflict"
+#}
+{% macro sentiment_badge(sentiment) %}
+{% if sentiment == 'positive' %}
+<span class="badge-positive">
+  <span class="badge-dot badge-dot--positive"></span>
+  {{ sentiment }}
+</span>
+{% elif sentiment == 'negative' %}
+<span class="badge-negative">
+  <span class="badge-dot badge-dot--negative"></span>
+  {{ sentiment }}
+</span>
+{% elif sentiment == 'conflict' %}
+<span class="badge-error">
+  <span class="badge-dot badge-dot--error"></span>
+  {{ sentiment }}
+</span>
+{% else %}
+<span class="badge-neutral">
+  <span class="badge-dot badge-dot--neutral"></span>
+  {{ sentiment }}
+</span>
+{% endif %}
+{% endmacro %}
+
+
+{# ── Info row (used on Monitor page) ─────────────────────────────────────── #}
+{#
+  info_row(label, value, value_cls)
+  -----------------------------------
+  Renders a labelled key-value cell inside the Model Configuration card.
+#}
+{% macro info_row(label, value, value_cls='') %}
+<div class="bg-[#0b1326] rounded-lg p-3">
+  <p class="font-mono text-[11px] text-[#c7c4d7] mb-1 uppercase tracking-wide">{{ label }}</p>
+  <p class="text-sm text-[#dae2fd] font-medium {{ value_cls }}">{{ value }}</p>
+</div>
+{% endmacro %}
+
+
+{# ── Loaded badge (aspect/sentiment model status) ────────────────────────── #}
+{% macro loaded_badge() %}
+<div class="flex items-center gap-1.5 text-sm text-[#dae2fd] font-medium">
+  {{ ms_icon('check_circle', filled=False, size=16, cls='text-[#4edea3]') }}
+  Loaded
+</div>
+{% endmacro %}
+
+
+{# ── Skeleton placeholder (used during HTMX loading states) ─────────────── #}
+{#
+  skeleton(height, width_cls)
+  ----------------------------
+  Renders a pulsing skeleton placeholder matching the React Skeleton component.
+#}
+{% macro skeleton(height='h-4', width_cls='w-full') %}
+<div class="animate-pulse bg-[#222a3d] rounded {{ height }} {{ width_cls }}"></div>
+{% endmacro %}
+
+
+{# ── Empty-state panel ────────────────────────────────────────────────────── #}
+{#
+  empty_state(icon, message)
+  ---------------------------
+  Centred icon + message for panels with no data yet.
+#}
+{% macro empty_state(icon='psychology', message='No data yet') %}
+<div class="flex flex-col items-center justify-center gap-4 py-16 text-[#c7c4d7]">
+  <span class="material-symbols-outlined opacity-30"
+        style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 200;"
+        aria-hidden="true">{{ icon }}</span>
+  <p class="text-sm opacity-60">{{ message }}</p>
+</div>
+{% endmacro %}

api/app/templates/pages/batch.html

@@ -0,0 +1,104 @@
+{% extends "base.html" %}
+{% from "macros/ui.html" import ms_icon, status_badge, empty_state %}
+
+{% block title %}Batch Analytics{% endblock %}
+{% block description %}Upload a CSV of reviews for bulk aspect-based sentiment analysis.{% endblock %}
+
+{% block content %}
+{#
+  Phase 2: Placeholder layout for the Batch Analytics page.
+
+  What this page will contain after Phase 4:
+    - Upload zone  : drag-and-drop CSV input (HTML5 + Alpine.js drag events)
+    - Progress card: job status + progress bar polling via hx-trigger="every 2s"
+    - Recent table : DB-queried list of past batch jobs
+    - Charts       : post-completion AspectHeatmap, LanguagePie, SentimentChart
+                     (Chart.js, rendered with server-provided JSON data)
+
+  The page structure below mirrors Analytics.jsx exactly so Phase 4 only needs to
+  replace placeholder content with functional forms and HTMX targets.
+#}
+<div class="space-y-xl">
+
+  {# ── Page header ─────────────────────────────────────────────────────────── #}
+  <div>
+    <h1 class="text-headline-md text-[#dae2fd]">Batch Analytics</h1>
+    <p class="mt-1 text-body-md text-[#c7c4d7]">
+      Upload a CSV of reviews for bulk aspect-based sentiment analysis.
+    </p>
+  </div>
+
+  {# ── Upload zone placeholder ──────────────────────────────────────────────── #}
+  <section class="card" aria-label="File upload">
+    <div class="border-2 border-dashed border-white/[0.14] rounded-xl p-12
+                flex flex-col items-center justify-center text-center">
+      {{ ms_icon('cloud_upload', size=48, cls='text-[#c7c4d7] mb-4') }}
+      <h2 class="text-headline-sm text-[#dae2fd] mb-2">
+        Drag &amp; drop a CSV, or click to select
+      </h2>
+      <p class="text-body-md text-[#c7c4d7] max-w-sm">
+        Must contain a <code class="font-mono text-[#c0c1ff] px-1">text</code> column.
+        Maximum 10,000 rows. Files are deleted after analysis.
+      </p>
+    </div>
+
+    {# Phase 2 notice #}
+    <div class="mt-lg flex items-start gap-3 p-md rounded-lg bg-[#c0c1ff]/5 border border-[#c0c1ff]/20">
+      {{ ms_icon('info', size=18, cls='text-[#c0c1ff] mt-0.5 flex-shrink-0') }}
+      <div>
+        <p class="text-body-sm text-[#c7c4d7]">
+          File upload and batch processing are fully operational via
+          <code class="font-mono text-[#c0c1ff] text-xs">POST /batch</code>.
+          HTMX drag-and-drop UI and progress polling will be added in Phase 4.
+          <a href="/docs#/Predict/predict_batch_batch_post"
+             target="_blank"
+             class="text-[#c0c1ff] hover:underline ml-1">Test the API →</a>
+        </p>
+      </div>
+    </div>
+  </section>
+
+  {# ── Recent batches table placeholder ─────────────────────────────────────── #}
+  <section aria-label="Recent batch jobs">
+    <h2 class="text-headline-sm text-[#dae2fd] mb-lg">Recent Batches</h2>
+    <div class="card overflow-hidden p-0">
+      <div class="overflow-x-auto">
+        <table class="w-full text-left border-collapse" aria-label="Recent batch jobs">
+          <thead>
+            <tr class="border-b border-white/[0.08] bg-[#222a3d]/50">
+              <th scope="col" class="font-mono text-label-sm text-[#c7c4d7] py-3 px-xl">Filename</th>
+              <th scope="col" class="font-mono text-label-sm text-[#c7c4d7] py-3 px-lg">Rows</th>
+              <th scope="col" class="font-mono text-label-sm text-[#c7c4d7] py-3 px-lg">Status</th>
+              <th scope="col" class="font-mono text-label-sm text-[#c7c4d7] py-3 px-xl text-right">Date</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-white/[0.05]">
+            {# Phase 2: static mock rows matching React's Analytics.jsx mock data #}
+            {% for row in [
+              {'name': 'q3_customer_feedback.csv',  'rows': '4,250', 'status': 'completed',  'date': 'Today, 14:32'},
+              {'name': 'product_launch_tweets.csv', 'rows': '8,912', 'status': 'processing', 'date': 'Today, 14:15'},
+              {'name': 'corrupted_export_09.csv',   'rows': '—',     'status': 'failed',     'date': 'Yesterday'},
+            ] %}
+            <tr class="hover:bg-white/[0.03] transition-colors">
+              <td class="py-3 px-xl">
+                <div class="flex items-center gap-2 text-body-md text-[#dae2fd]">
+                  {{ ms_icon('description', size=16, cls='text-[#c7c4d7]') }}
+                  {{ row.name }}
+                </div>
+              </td>
+              <td class="py-3 px-lg font-mono text-body-sm text-[#c7c4d7]">{{ row.rows }}</td>
+              <td class="py-3 px-lg">{{ status_badge(row.status) }}</td>
+              <td class="py-3 px-xl text-right font-mono text-body-sm text-[#c7c4d7]">{{ row.date }}</td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <p class="mt-2 font-mono text-label-sm text-[#c7c4d7]/50 text-center">
+      Phase 4 will populate this table from the database.
+    </p>
+  </section>
+
+</div>
+{% endblock %}

api/app/templates/pages/monitor.html

@@ -0,0 +1,168 @@
+{% extends "base.html" %}
+{% from "macros/ui.html" import ms_icon, health_chip, info_row, loaded_badge %}
+
+{% block title %}System Monitor{% endblock %}
+{% block description %}Real-time API health, model metadata, and request statistics.{% endblock %}
+
+{% block content %}
+{#
+  Phase 2: Placeholder layout for the System Monitor page.
+
+  What this page will contain after Phase 5:
+    - API Status card        : live health chip polled via hx-trigger="every 30s"
+    - Model Configuration    : architecture, languages, model status
+    - Performance Metrics    : stat cards with SVG sparklines
+    - Recent Activity table  : last N API requests
+
+  All section structures below match Monitor.jsx exactly so Phase 5 only needs to
+  add live data and HTMX polling attributes.
+#}
+<div class="space-y-xl">
+
+  {# ── Page header ─────────────────────────────────────────────────────────── #}
+  <div class="flex flex-wrap justify-between items-end gap-4">
+    <div>
+      <h1 class="text-headline-md text-[#dae2fd]">System Monitor</h1>
+      <p class="mt-1 text-body-md text-[#c7c4d7]">
+        Real-time API health, model metadata, and request statistics.
+      </p>
+    </div>
+    <div class="flex items-center gap-2">
+      <label for="refresh-select" class="font-mono text-label-sm text-[#c7c4d7]">
+        Auto-refresh
+      </label>
+      <select id="refresh-select" class="input-base py-1 text-body-sm" style="width:auto;">
+        <option value="10000">10s</option>
+        <option value="30000" selected>30s</option>
+        <option value="60000">1m</option>
+        <option value="0">Off</option>
+      </select>
+    </div>
+  </div>
+
+  {# ── Health + Model config ────────────────────────────────────────────────── #}
+  <div class="grid grid-cols-1 lg:grid-cols-12 gap-xl">
+
+    {# API Status card #}
+    <div class="lg:col-span-4 card flex flex-col gap-lg">
+      <div class="flex items-center gap-3">
+        <div class="p-2.5 rounded-lg bg-[#4edea3]/10">
+          {{ ms_icon('monitor_heart', size=24, cls='text-[#4edea3]') }}
+        </div>
+        <div>
+          <h2 class="text-title-lg text-[#dae2fd]">API Status</h2>
+          <p class="font-mono text-label-sm text-[#c7c4d7]">Core Inference Engine</p>
+        </div>
+      </div>
+
+      {# Health status — HTMX polling target in Phase 5 #}
+      <div id="health-status"
+           class="flex items-center gap-3 pt-lg border-t border-white/[0.06]">
+        <span class="text-body-md text-[#c7c4d7]">Current state:</span>
+        {# Static placeholder — replaced by live fragment in Phase 5 #}
+        {{ health_chip(True) }}
+      </div>
+    </div>
+
+    {# Model Configuration card #}
+    <div class="lg:col-span-8 card">
+      <div class="flex items-center gap-3 mb-xl">
+        <div class="p-2.5 rounded-lg bg-[#c0c1ff]/10">
+          {{ ms_icon('memory', size=24, cls='text-[#c0c1ff]') }}
+        </div>
+        <div>
+          <h2 class="text-title-lg text-[#dae2fd]">Model Configuration</h2>
+          <p class="font-mono text-label-sm text-[#c7c4d7]">Loaded ONNX Graphs</p>
+        </div>
+      </div>
+      <div class="grid grid-cols-2 gap-md">
+        {{ info_row('Architecture',         'XLM-RoBERTa (INT8)') }}
+        {{ info_row('Supported Languages',  'English, Hindi, Hinglish') }}
+        <div class="bg-[#0b1326] rounded-lg p-3">
+          <p class="font-mono text-[11px] text-[#c7c4d7] mb-1 uppercase tracking-wide">Aspect Extraction</p>
+          {{ loaded_badge() }}
+        </div>
+        <div class="bg-[#0b1326] rounded-lg p-3">
+          <p class="font-mono text-[11px] text-[#c7c4d7] mb-1 uppercase tracking-wide">Sentiment Classification</p>
+          {{ loaded_badge() }}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {# ── Performance metrics (stat cards) ─────────────────────────────────────── #}
+  <div>
+    <h2 class="text-headline-sm text-[#dae2fd] mb-lg">Performance Metrics</h2>
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-xl">
+
+      {# Macro-style stat card — defined inline since it's used only here #}
+      {% for stat in [
+        {'icon': 'database', 'label': 'Total Requests Today', 'value': '12.4k',  'sub': '↑ 8% vs yesterday', 'color': '#c0c1ff', 'positive': true},
+        {'icon': 'bolt',     'label': 'Avg Latency (P95)',    'value': '145ms',  'sub': 'Well within SLA',   'color': '#4edea3', 'positive': true},
+        {'icon': 'warning',  'label': 'Error Rate',           'value': '0.2%',   'sub': 'Last 24 hours',     'color': '#ffb4ab', 'positive': false},
+      ] %}
+      <div class="stat-card group">
+        {# Sparkline gradient background #}
+        <div class="absolute bottom-0 left-0 w-full h-16 opacity-40 group-hover:opacity-70
+                    transition-opacity pointer-events-none">
+          <svg viewBox="0 0 100 40" class="w-full h-full" preserveAspectRatio="none" aria-hidden="true">
+            <path d="{{ 'M0 40 L0 28 Q25 24 50 20 T100 14 L100 40 Z' if stat.positive else 'M0 40 L0 32 Q25 30 50 26 T100 22 L100 40 Z' }}"
+                  fill="{{ stat.color }}22"
+                  stroke="{{ stat.color }}"
+                  stroke-width="1.5"
+                  vector-effect="non-scaling-stroke" />
+          </svg>
+        </div>
+        <div class="relative z-10">
+          <div class="flex items-center gap-2 mb-lg">
+            <span class="material-symbols-outlined text-2xl"
+                  style="color: {{ stat.color }}; font-variation-settings: 'FILL' 1, 'wght' 400;"
+                  aria-hidden="true">{{ stat.icon }}</span>
+            <span class="font-mono text-label-md text-[#c7c4d7] uppercase tracking-wider">{{ stat.label }}</span>
+          </div>
+          <p class="text-display text-[#dae2fd] font-semibold">{{ stat.value }}</p>
+          <p class="font-mono text-label-sm text-[#c7c4d7] mt-1">{{ stat.sub }}</p>
+        </div>
+      </div>
+      {% endfor %}
+
+    </div>
+  </div>
+
+  {# ── Recent endpoint activity ──────────────────────────────────────────────── #}
+  <div class="card">
+    <h2 class="text-title-lg text-[#dae2fd] mb-lg">Recent Endpoint Activity</h2>
+    <div class="space-y-2" role="list" aria-label="Recent API requests">
+      {% for req in [
+        {'method': 'POST', 'path': '/predict',       'status': 200, 'time': '3.5ms',  'ago': '2s ago'},
+        {'method': 'GET',  'path': '/health',        'status': 200, 'time': '0.8ms',  'ago': '5s ago'},
+        {'method': 'POST', 'path': '/batch',         'status': 202, 'time': '12.1ms', 'ago': '1m ago'},
+        {'method': 'GET',  'path': '/status/abc12',  'status': 200, 'time': '1.2ms',  'ago': '1m ago'},
+        {'method': 'POST', 'path': '/predict',       'status': 500, 'time': '23ms',   'ago': '3m ago'},
+      ] %}
+      <div class="flex items-center gap-4 py-2 px-md rounded-lg hover:bg-white/[0.03] transition-colors"
+           role="listitem">
+        <span class="font-mono text-label-sm w-10 flex-shrink-0
+                     {{ 'text-[#c0c1ff]' if req.method == 'POST' else 'text-[#4edea3]' }}">
+          {{ req.method }}
+        </span>
+        <span class="font-mono text-body-sm text-[#dae2fd] flex-1 truncate">{{ req.path }}</span>
+        <span class="font-mono text-label-sm w-10 text-right flex-shrink-0
+                     {{ 'text-[#ffb4ab]' if req.status >= 500 else ('text-[#f5c542]' if req.status >= 400 else 'text-[#4edea3]') }}">
+          {{ req.status }}
+        </span>
+        <span class="font-mono text-label-sm text-[#c7c4d7] w-14 text-right flex-shrink-0">{{ req.time }}</span>
+        <span class="hidden sm:block font-mono text-label-sm text-[#c7c4d7]/50 w-16 text-right flex-shrink-0">
+          {{ req.ago }}
+        </span>
+      </div>
+      {% endfor %}
+    </div>
+
+    <p class="mt-4 font-mono text-label-sm text-[#c7c4d7]/50 text-center">
+      Phase 5 will add live polling from <code class="text-[#c0c1ff]">GET /health</code>.
+    </p>
+  </div>
+
+</div>
+{% endblock %}

api/app/templates/pages/predict.html

@@ -0,0 +1,114 @@
+{% extends "base.html" %}
+{% from "macros/ui.html" import ms_icon, empty_state %}
+
+{% block title %}Live Predictor{% endblock %}
+{% block description %}Analyze aspect-based sentiment in English and Hindi text in real time.{% endblock %}
+
+{% block content %}
+{#
+  Phase 2: Placeholder layout for the Predict page.
+
+  What this page will contain after Phase 3:
+    - Left panel  : textarea input + language selector + Analyze button
+    - Right panel : annotated result text + aspect cards (HTMX swap target)
+    - POST /predict/fragment → returns partials/predict_result.html
+
+  The outer grid, headings, and card shells are already correct here so Phase 3
+  only needs to fill in the form and wire up HTMX — no structural changes.
+#}
+<div class="space-y-xl">
+
+  {# ── Page header ─────────────────────────────────────────────────────────── #}
+  <div>
+    <h1 class="text-headline-md text-[#dae2fd]">Live Sentiment Predictor</h1>
+    <p class="mt-1 text-body-md text-[#c7c4d7] max-w-2xl">
+      Enter text to analyze its aspects and sentiments in real-time.
+      The model automatically identifies the language and extracts key phrases.
+    </p>
+  </div>
+
+  {# ── Two-column layout (mirrors LivePredictor.jsx structure) ─────────────── #}
+  <div class="grid grid-cols-1 lg:grid-cols-12 gap-xl">
+
+    {# ── Left: Input panel ───────────────────────────────────────────────── #}
+    <div class="lg:col-span-7 flex flex-col">
+      <div class="card-low flex flex-col h-full min-h-[420px]">
+
+        <div class="flex justify-between items-center mb-lg pb-md border-b border-white/[0.06]">
+          <h3 class="font-mono text-label-md text-[#c7c4d7] uppercase tracking-wider">
+            Analyze Input
+          </h3>
+          {# Language selector placeholder — wired up in Phase 3 #}
+          <div class="flex items-center gap-2">
+            <label for="lang-select-preview"
+                   class="font-mono text-label-sm text-[#c7c4d7]">Language</label>
+            <select id="lang-select-preview" class="input-base py-1 text-body-sm" style="width:auto;" disabled>
+              <option>Auto-detect</option>
+            </select>
+          </div>
+        </div>
+
+        {# Textarea placeholder #}
+        <div class="flex-1 flex flex-col mb-lg">
+          <label for="review-text-preview"
+                 class="font-mono text-label-sm text-[#c7c4d7] mb-2">Source Text</label>
+          <textarea id="review-text-preview"
+                    class="input-base flex-1 min-h-[260px] resize-none leading-relaxed"
+                    placeholder="Paste your review, article, or social media post here…"
+                    disabled>
+          </textarea>
+          <div class="flex justify-between mt-2">
+            <span class="font-mono text-label-sm text-[#c7c4d7]/50">⌘ Enter to analyze</span>
+            <span class="font-mono text-label-sm text-[#c7c4d7]/50">0 / 512</span>
+          </div>
+        </div>
+
+        {# Analyze button placeholder #}
+        <button class="btn-primary" disabled>
+          {{ ms_icon('bolt', size=16) }}
+          Analyze
+        </button>
+
+      </div>
+    </div>
+
+    {# ── Right: Results panel ─────────────────────────────────────────────── #}
+    <div class="lg:col-span-5 flex flex-col">
+      <div class="glass-panel rounded-xl flex flex-col h-full min-h-[420px] p-xl">
+
+        <div class="flex justify-between items-center mb-lg pb-md border-b border-white/[0.06]">
+          <h3 class="font-mono text-label-md text-[#c7c4d7] uppercase tracking-wider">
+            Analysis Results
+          </h3>
+        </div>
+
+        {# Phase 2 placeholder — replaced by HTMX partial in Phase 3 #}
+        <div id="result-panel" class="flex-1 flex">
+          {{ empty_state('psychology', 'Enter a review and click Analyze to see results') }}
+        </div>
+
+      </div>
+    </div>
+
+  </div>{# /grid #}
+
+  {# Phase 2 notice (removed in Phase 3) #}
+  <div class="card border-[#c0c1ff]/20 bg-[#c0c1ff]/5">
+    <div class="flex items-start gap-3">
+      {{ ms_icon('info', size=18, cls='text-[#c0c1ff] mt-0.5 flex-shrink-0') }}
+      <div>
+        <p class="text-body-md text-[#dae2fd] font-medium mb-1">Phase 2 Infrastructure</p>
+        <p class="text-body-sm text-[#c7c4d7]">
+          The layout shell is in place. The
+          <code class="font-mono text-[#c0c1ff] text-xs">POST /predict</code>
+          API endpoint is fully operational — HTMX interactions will be wired in Phase 3.
+          <a href="/docs#/Predict/predict_predict_post"
+             target="_blank"
+             class="text-[#c0c1ff] hover:underline ml-1">Test the API directly →</a>
+        </p>
+      </div>
+    </div>
+  </div>
+
+</div>
+{% endblock %}

requirements.txt

@@ -15,6 +15,7 @@ mlflow==2.13.0
 dvc==3.51.1
 evidently==0.4.30
 fastapi==0.111.0
+jinja2>=3.1.4
 uvicorn==0.29.0
 celery==5.4.0
 redis==5.0.4

tests/api/test_api.py

@@ -52,3 +52,20 @@ def test_batch_upload():
             assert data["status"] == "queued"
             assert data["total_reviews"] == 2
             mock_delay.assert_called_once()
+
+def test_info_endpoint():
+    with TestClient(app) as client:
+        response = client.get("/info")
+        assert response.status_code == 200
+        data = response.json()
+        assert "model_name" in data
+        assert "supported_languages" in data
+        assert isinstance(data["supported_languages"], str)
+
+def test_metrics_endpoint():
+    with TestClient(app) as client:
+        response = client.get("/metrics")
+        assert response.status_code == 200
+        # metrics returns plain text Prometheus data
+        assert "text/plain" in response.headers["content-type"]
+        assert "http_requests_total" in response.text

tests/web/__init__.py

@@ -0,0 +1 @@
+# Phase 2 test package

tests/web/test_pages.py

@@ -0,0 +1,197 @@
+"""
+tests/web/test_pages.py — Phase 2 smoke tests.
+
+PURPOSE
+-------
+Verify that the new Jinja2 page infrastructure:
+  1. Renders all three pages without raising an exception (HTTP 200).
+  2. Returns HTML content (not JSON).
+  3. Contains the expected page titles / identifiers.
+  4. Does NOT break any existing JSON API endpoint.
+  5. Serves static CSS from the /static mount.
+
+These tests are strictly additive — they do not modify or replace
+any tests in tests/api/test_api.py.
+
+IMPORTANT: DATABASE_URL must be set before importing the app because
+api/app/middleware/dependencies.py reads it at module-import time.
+"""
+import os
+
+# Must be set before any app import (same pattern as tests/api/test_api.py)
+os.environ.setdefault("DATABASE_URL", "sqlite:///./tests/fixtures/test.db")
+
+import pytest
+from fastapi.testclient import TestClient
+
+from api.app.main import app
+
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+def _html_client() -> TestClient:
+    """Return a TestClient that triggers the lifespan (model loading)."""
+    return TestClient(app)
+
+
+# ---------------------------------------------------------------------------
+# Page rendering tests
+# ---------------------------------------------------------------------------
+
+class TestPageRoutes:
+    """Smoke tests: every GET page route returns 200 HTML."""
+
+    def test_root_redirects_to_predict(self):
+        """GET / should return the Predict page (200, HTML)."""
+        with _html_client() as client:
+            response = client.get("/", follow_redirects=True)
+        assert response.status_code == 200
+        assert "text/html" in response.headers["content-type"]
+
+    def test_predict_page_renders(self):
+        with _html_client() as client:
+            response = client.get("/predict")
+        assert response.status_code == 200
+        assert "text/html" in response.headers["content-type"]
+        assert "SentimentAI" in response.text
+        assert "Live Predictor" in response.text
+
+    def test_batch_page_renders(self):
+        with _html_client() as client:
+            response = client.get("/batch")
+        assert response.status_code == 200
+        assert "text/html" in response.headers["content-type"]
+        assert "SentimentAI" in response.text
+        assert "Batch Analytics" in response.text
+
+    def test_monitor_page_renders(self):
+        with _html_client() as client:
+            response = client.get("/monitor")
+        assert response.status_code == 200
+        assert "text/html" in response.headers["content-type"]
+        assert "SentimentAI" in response.text
+        assert "System Monitor" in response.text
+
+    def test_sidebar_nav_items_present(self):
+        """All three nav links must appear in every page."""
+        with _html_client() as client:
+            for path in ("/predict", "/batch", "/monitor"):
+                response = client.get(path)
+                assert response.status_code == 200
+                # Check all nav labels are present
+                assert "Predictor" in response.text
+                assert "Batch Analytics" in response.text
+                assert "System Health" in response.text
+
+    def test_predict_active_state(self):
+        """/predict page must mark Predictor nav item as active."""
+        with _html_client() as client:
+            response = client.get("/predict")
+        assert "nav-item-active" in response.text
+        # The active item must contain the predictor icon
+        assert "psychology" in response.text
+
+    def test_base_template_includes_htmx(self):
+        """HTMX CDN script must be present in every page."""
+        with _html_client() as client:
+            response = client.get("/predict")
+        assert "htmx.org" in response.text
+
+    def test_base_template_includes_alpinejs(self):
+        """Alpine.js CDN script must be present in every page."""
+        with _html_client() as client:
+            response = client.get("/predict")
+        assert "alpinejs" in response.text
+
+    def test_base_template_includes_tailwind(self):
+        """Tailwind CDN script must be present in every page."""
+        with _html_client() as client:
+            response = client.get("/predict")
+        assert "cdn.tailwindcss.com" in response.text
+
+
+# ---------------------------------------------------------------------------
+# Static file tests
+# ---------------------------------------------------------------------------
+
+class TestStaticFiles:
+    """Verify the /static mount serves files correctly."""
+
+    def test_css_file_served(self):
+        with _html_client() as client:
+            response = client.get("/static/css/app.css")
+        assert response.status_code == 200
+        assert "text/css" in response.headers["content-type"]
+        # Spot-check for key design system classes
+        assert "badge-positive" in response.text
+        assert "btn-primary" in response.text
+
+    def test_static_missing_file_returns_404(self):
+        with _html_client() as client:
+            response = client.get("/static/does-not-exist.css")
+        assert response.status_code == 404
+
+
+# ---------------------------------------------------------------------------
+# Regression tests — existing API must be unaffected
+# ---------------------------------------------------------------------------
+
+class TestExistingAPIUnchanged:
+    """
+    Re-run the core API assertions to prove Phase 2 changes introduced
+    zero regressions.  These mirror tests/api/test_api.py in spirit.
+    """
+
+    def test_health_endpoint_still_returns_json(self):
+        with _html_client() as client:
+            response = client.get("/health")
+        assert response.status_code == 200
+        data = response.json()
+        assert data["status"] == "ok"
+        # Verify content-type is JSON (not HTML)
+        assert "application/json" in response.headers["content-type"]
+
+    def test_info_endpoint_still_returns_json(self):
+        with _html_client() as client:
+            response = client.get("/info")
+        assert response.status_code == 200
+        data = response.json()
+        assert "model_name" in data
+        assert "supported_languages" in data
+
+    def test_predict_endpoint_still_returns_json(self):
+        """POST /predict must still return PredictionResponse JSON."""
+        with _html_client() as client:
+            response = client.post(
+                "/predict",
+                json={"text": "The sound quality is excellent.", "language": "en"},
+            )
+        assert response.status_code == 200
+        data = response.json()
+        # Schema check — all required fields must be present
+        assert "text" in data
+        assert "language" in data
+        assert "detected_language" in data
+        assert "aspects" in data
+        assert "processing_time_ms" in data
+        # Content-type must be JSON
+        assert "application/json" in response.headers["content-type"]
+
+    def test_openapi_schema_page_routes_hidden(self):
+        """Page GET routes must NOT appear in the OpenAPI schema."""
+        with _html_client() as client:
+            response = client.get("/openapi.json")
+        assert response.status_code == 200
+        schema = response.json()
+        paths = schema.get("paths", {})
+        # None of the page routes should be in the schema
+        assert "/predict" not in paths or all(
+            method == "post" for method in paths.get("/predict", {})
+        ), "GET /predict should not appear in OpenAPI schema"
+        assert "/" not in paths, "GET / should not appear in OpenAPI schema"
+        assert "/batch" not in paths or all(
+            method == "post" for method in paths.get("/batch", {})
+        ), "GET /batch should not appear in OpenAPI schema"
+        assert "/monitor" not in paths, "GET /monitor should not appear in OpenAPI schema"