Frontend

README.md

@@ -27,7 +27,7 @@ tags:
 
 # Pay Equity for EU
 
-A grounded, multilingual chat assistant that answers two questions Danish
+A grounded, citation-first assistant that answers two questions Danish
 graduates ask every job offer: **"What pay should I expect?"** and **"What does
 the law actually let me ask for?"**
 
@@ -49,9 +49,11 @@ This app fixes both, in one chat.
   (salary statistics from the engineers' union), broken down by sector,
   experience, and role. No hallucinations: numbers come straight from the
   union's published tables.
-- **Your rights** — RAG over the EU Pay Transparency Directive in EN / DA / FR,
-  with article-level citations on every claim (e.g. *"You can request the
-  average pay for your role broken down by gender (Art. 7(1))"*).
+- **Your rights** — RAG over the EU Pay Transparency Directive with
+  article-level citations on every claim (e.g. *"You can request the
+  average pay for your role broken down by gender (Art. 7(1))"*). Answers are
+  in **English** in v1; the directive text is already parsed in DA / FR and the
+  generation model is multilingual, so localized answers are a fast follow.
 - **Private document review** — session-only upload of a contract or payslip,
   never persisted, never sent to a third-party API.
 
@@ -72,8 +74,9 @@ for a real circle of people (Danish graduates job-hunting right now).
 | Swap-in LLM | OpenBMB MiniCPM3-4B | One-line swap via `LLMClient` interface |
 | Embeddings | **NVIDIA Nemotron-Embed 1B v2** | Strong multilingual retrieval, ungated |
 | Retrieval | FAISS IndexFlatIP + per-source top-k + Reciprocal Rank Fusion | Keeps salary numbers and legal text from drowning each other |
-| Runtime | Gradio Server + ZeroGPU on HF Spaces | Single `main.py`, FastAPI-style endpoints exposed alongside the chat UI |
-| Theme | Custom Scandinavian sage palette via `gr.themes.Soft` + Bricolage Grotesque / Inter | Goes well beyond default Gradio look |
+| Runtime | Gradio Server + ZeroGPU on HF Spaces | FastAPI-style `@app.api` endpoints behind a custom JS frontend |
+| Frontend | **Hand-authored HTML / CSS / JS SPA** (no Gradio Blocks at the root) | Onboarding wizard → profile-driven dashboard with hand-drawn SVG charts (bell curve, gauge, comparison bars) → contextual rights chat with seeded questions, served on top of `gradio.Server` via the JS client |
+| Type / palette | Bricolage Grotesque + Inter on a sage / ink Scandinavian palette | Goes well beyond default Gradio look |
 
 All model revisions are pinned by SHA in `configs/models.yaml`. No `latest`.
 

src/backend/README.md

@@ -4,7 +4,9 @@ A retrieval-augmented chat assistant over two sources — **IDA salary
 statistics** (engineers) and the **EU Pay Transparency Directive 2023/970** —
 served through a [Gradio Server](https://huggingface.co/blog/introducing-gradio-server).
 `build_server()` (in `server.py`) creates the `gradio.Server`, registers the
-backend API endpoints, and mounts the Gradio-native chat [UI](ui.py) at `/`.
+backend API endpoints, and serves the **custom HTML/CSS/JS SPA** from
+[`../frontend/`](../frontend/) at `/`. The SPA calls the registered
+`@app.api` endpoints via the Gradio JS client.
 
 ## Start it
 
@@ -14,9 +16,9 @@ From the repo root:
 uv run python main.py
 ```
 
-`main.py` builds `demo = build_blocks()` and calls `demo.launch(...)`. The
-server prints a local URL (default `http://127.0.0.1:7860`). Open it for the
-chat UI.
+`main.py` calls `build_server().launch(...)`. The server prints a local URL
+(default `http://127.0.0.1:7860`). Open it to use the SPA (wizard → dashboard
+→ rights chat).
 
 Before first run, build the vector index (see **RAG pipeline** below).
 
@@ -53,13 +55,13 @@ selected by `llm.<role>.backend` (`tiny_aya` | `minicpm` | `llama_cpp` |
 
 ## Endpoints
 
-Registered in `api/endpoints.py` via `@app.api(name=...)`; the structured chat
-API is also exposed inside the Blocks via `gr.api(api_name="chat")` so it stays
-reachable at `/` for `gradio_client`.
+Registered in `api/endpoints.py` via `@app.api(name=...)` and consumed by the
+custom SPA in `../frontend/static/app.js` through the Gradio JS client.
 
 | `api_name` | Input | Returns | Status |
 |---|---|---|---|
 | `/chat` | `messages: list[dict]`, `lang: str` | `ChatResponse` (reply + citations) | RAG-grounded |
+| `/dashboard` | `profile: Profile` | `Dashboard` (KPIs + cells + projection) | profile-driven IDA lookup |
 | `/parse_directive` | `lang: str` | `list[Chunk]` | real (article chunks) |
 | `/parse_lonstatistik` | `file: FileData`, `source: str` | `ParseResult` | placeholder |
 | `/index_documents` | `source: str` | `IndexStatus` | reports loaded index |
@@ -80,8 +82,7 @@ print(r["reply"], r["citations"])
 ## Layout
 
 ```
-server.py            build_server() — Server + endpoints + mounts the chat UI at /
-ui.py                build_blocks(): sage-themed gr.Blocks ChatInterface + gr.api chat
+server.py            build_server() — Server + endpoints + serves the custom SPA at /
 rag.py               answer() + single @spaces.GPU retrieve→generate function
 config.py            load_models_config() (configs/models.yaml) + get_secret()
 schemas.py           pydantic models (Chunk, ChatMessage/Request/Response, …)

src/backend/ui.py

@@ -1,149 +0,0 @@
-"""Gradio-native chat UI (replaces the old custom HTML/JS frontend).
-
-A free-text, grounded Q&A chat styled to match the project's sage/Scandinavian
-look — implemented through Gradio's own theming + CSS rather than custom HTML.
-The chat function calls the same shared ``rag.answer()`` as the ``/chat`` API
-endpoint, so there is one grounding code path.
-"""
-
-from __future__ import annotations
-
-import gradio as gr
-
-from .rag import answer, answer_stream, build_index
-from .schemas import ChatMessage, ChatResponse
-
-# The disclaimer is owned by ChatResponse; reuse its default as the UI footer.
-_DISCLAIMER = ChatResponse.model_fields["disclaimer"].default
-
-# --- palette (ported from the old static/styles.css :root tokens) ----------
-SAGE = "#C4D5D3"
-SAGE_LIGHT = "#E7EFEE"
-INK = "#15211D"
-ACCENT = "#1F4A3F"
-
-SAGE_THEME = gr.themes.Soft(
-    # Editorial serif to match the Djøf lønstatistik look (Lora ≈ Djøf's warm,
-    # moderate-contrast Nordic serif, with proper ø/å glyphs).
-    font=[gr.themes.GoogleFont("Lora"), "Georgia", "serif"],
-    font_mono=[gr.themes.GoogleFont("Inter"), "monospace"],
-).set(
-    body_background_fill="#FFFFFF",
-    body_text_color=INK,
-    block_title_text_color=INK,
-    button_primary_background_fill=INK,
-    button_primary_background_fill_hover=ACCENT,
-    button_primary_text_color="#FFFFFF",
-    input_background_fill="#FFFFFF",
-    block_border_color="#D7E0DD",
-)
-
-CUSTOM_CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..600&display=swap');
-.gradio-container { font-family: 'Lora', Georgia, 'Times New Roman', serif; }
-h1, h2, h3, .prose h1, .prose h2 {
-  font-family: 'Lora', Georgia, serif;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-#hero { background: #C4D5D3; border-radius: 16px; padding: 28px 32px; margin-bottom: 8px; }
-#hero h1 { margin: 0 0 6px; font-size: 2.2rem; font-weight: 700; color: #15211D !important; }
-#hero p { margin: 0; font-size: 1.05rem; color: #34423D !important; }
-
-/* user bubble: white text on ink */
-.message.user, .user .message-bubble-border, div[data-testid="user"] {
-  background: #15211D !important; color: #FFFFFF !important;
-}
-/* assistant bubble: dark ink text on sage-light — the readability fix.
-   The background was set but the text color was not, so it inherited the
-   dark theme's light text → light-on-light. Force ink on the bubble and all
-   its markdown children (paragraphs, bold "Sources", italic disclaimer). */
-.message.bot, div[data-testid="bot"] {
-  background: #E7EFEE !important; color: #15211D !important;
-}
-.message.bot *, div[data-testid="bot"] * { color: #15211D !important; }
-.message.bot a, div[data-testid="bot"] a {
-  color: #1F4A3F !important; text-decoration: underline;
-}
-
-.disclaimer { color: #6E7B77; font-size: 0.85rem; text-align: center; margin-top: 8px; }
-footer { display: none !important; }
-"""
-
-_HERO = (
-    "<div id='hero'><h1>Fair pay, made clear.</h1>"
-    "<p>Ask about expected pay for engineers in Denmark, or your rights under "
-    "the EU Pay Transparency Directive (2023/970). Answers are grounded in "
-    "IDA salary statistics and the Directive, with citations.</p></div>"
-)
-
-# Pin the page to light mode so the sage/white theme renders as designed —
-# Gradio otherwise follows the visitor's system dark mode. Runs once on load;
-# only redirects if not already light, so no reload loop.
-# NOTE: passed to ``launch(js=...)`` (Gradio 6 moved `js` off the Blocks ctor).
-FORCE_LIGHT_JS = """
-() => {
-  const u = new URL(window.location.href);
-  if (u.searchParams.get('__theme') !== 'light') {
-    u.searchParams.set('__theme', 'light');
-    window.location.replace(u.href);
-  }
-}
-"""
-
-
-def _chat_fn(message: str, history: list[dict], lang: str):
-    """Streaming ChatInterface callback → grounded answer, then sources + disclaimer.
-
-    Yields the reply incrementally as tokens arrive (smooth UX), then a final
-    frame with the citation footer and disclaimer appended.
-    """
-    msgs = [ChatMessage(role=h["role"], content=h["content"]) for h in history]
-    msgs.append(ChatMessage(role="user", content=message))
-    resp = ChatResponse(reply="", citations=[])
-    for resp in answer_stream(msgs, lang=lang):
-        yield resp.reply
-    footer = ""
-    if resp.citations:
-        footer += "\n\n**Sources:** " + " · ".join(resp.citations)
-    footer += f"\n\n_{resp.disclaimer}_"
-    yield resp.reply + footer
-
-
-def _chat_api(messages: list[dict], lang: str = "en") -> dict:
-    """Structured chat endpoint (api_name='chat') for gradio_client.
-
-    Same contract as before: ``{messages, lang}`` → ``{reply, citations,
-    disclaimer}``. Delegates to the shared ``answer()`` so the programmatic API
-    and the UI share one grounding path.
-    """
-    msgs = [ChatMessage(role=m["role"], content=m["content"]) for m in messages]
-    return answer(msgs, lang=lang).model_dump()
-
-
-def build_blocks() -> gr.Blocks:
-    """Build the sage-themed chat UI (mounted at the site root)."""
-    with gr.Blocks(title="Pay Equity for EU") as demo:
-        gr.HTML(_HERO)
-        lang = gr.Dropdown(
-            choices=[("English", "en"), ("Dansk", "da"), ("Français", "fr")],
-            value="en",
-            label="Language",
-        )
-        gr.ChatInterface(
-            fn=_chat_fn,
-            additional_inputs=[lang],
-            api_name=False,  # the structured gr.api below is the public chat API
-            examples=[
-                ["What monthly salary should an experienced engineer expect?"],
-                ["What information am I entitled to about pay at my workplace?"],
-                ["Can my employer ask my salary history during hiring?"],
-            ],
-        )
-        gr.Markdown(f"<p class='disclaimer'>{_DISCLAIMER}</p>")
-        with gr.Accordion("Admin", open=False):
-            build_btn = gr.Button("Build Index", variant="secondary")
-            build_status = gr.Textbox(label="Status", interactive=False)
-            build_btn.click(fn=build_index, inputs=[], outputs=[build_status])
-        gr.api(_chat_api, api_name="chat")
-    return demo

src/frontend/README.md

@@ -1,34 +1,72 @@
 # Frontend
 
-The user-facing UI is now a **Gradio-native** chat (`gr.Blocks` +
-`gr.ChatInterface`) defined in [`../backend/ui.py`](../backend/ui.py) and mounted
-at `/` by `build_server()`. It is a free-text, grounded Q&A chat with a language
-selector (en/da/fr) and inline source citations.
+A **hand-authored single-page app** in `index.html` + `static/` — no Gradio
+Blocks at the root, no `gr.ChatInterface`. The page is served by
+`build_server()` in `../backend/server.py`, which mounts `static/` and returns
+`index.html` from `/`. The page connects back to the same origin via the Gradio
+JS client (`@gradio/client`) and calls the registered `@app.api` endpoints.
 
-The Scandinavian/sage style is implemented through Gradio's own theming engine
-(`gr.themes.Soft(...).set(...)` + a small CSS block for the Bricolage Grotesque
-/ Inter fonts and message-bubble colors) — **not** custom HTML. Theme and CSS
-are passed to `demo.launch(...)` in `main.py` (Gradio 6 moved them off the
-`Blocks` constructor).
+## What's on the page
+
+- **Hero** with a two-branch entry point: *I'm employed — benchmark my pay* /
+  *I'm job-seeking — prep for an offer*.
+- **Onboarding wizard** (`#wizard`) — 9 questions, branch-aware, with a
+  per-step help text written in plain language. Salary entry supports either
+  a known total range or `base × (1 + perks%)`.
+- **Dashboard** (`#dashboard`) — KPI row, comparison cards from real IDA
+  cells, and a "make it visual" toggle that swaps in hand-drawn SVG charts:
+  - Bell curve of your peer group with your pay marked and the percentile
+    computed via a JS-side normal CDF
+  - Circular gauge of your standing
+  - Horizontal comparison bars across all matched IDA cells
+- **Rights chat** (`#rights`) — seeded with profile-aware suggested questions
+  (e.g. mode-, sector-, headcount-, gender-driven), session-only document
+  upload, inline citations and disclaimer rendered under each reply.
+- **Language switcher** (EN / DA / FR) wired through `static/i18n.js`.
+
+All charts are hand-rolled SVG (no charting library) and degrade gracefully
+down to a single matched cell.
+
+## Style system
+
+`static/styles.css` defines a Scandinavian / Djøf-inspired token system:
+
+- Sage hero (`#C4D5D3`), ink near-black (`#15211D`), deep-teal accent
+  (`#1F4A3F`), sage-light alt sections (`#E7EFEE`).
+- Display: **Bricolage Grotesque**. Body: **Inter**. Both via Google Fonts.
+- Pill, rounded, and editorial radii (`--radius-md/lg/xl/pill`) plus a custom
+  shadow scale and motion tokens.
+
+This is the project's Off-Brand UI; Gradio's own theming engine is **not** used
+on the served page.
 
 ## Start it
 
-No build step. Start the backend and the UI is served at `/`:
+From the repo root:
 
 ```bash
-uv run python main.py    # from the repo root
+uv run python main.py
 ```
 
-## Legacy static files
+`main.py` calls `build_server().launch(...)`, which serves `index.html` at `/`
+and the API endpoints alongside it.
+
+## API contract used by the SPA
+
+| `api_name` | Used by |
+|---|---|
+| `/dashboard` | `submitProfile()` after the wizard |
+| `/chat` | `sendMessage()` (rights chat) |
+| `/parse_lonstatistik` | `uploadDocument()` (file upload) |
 
-`index.html` and `static/{app.js,i18n.js,styles.css}` are the previous custom
-HTML/CSS/JS frontend. They are **no longer served** (the Gradio UI replaced
-them); `styles.css` is kept only as the reference for the palette/fonts ported
-into `ui.py`. These can be deleted in a follow-up cleanup.
+See `../backend/api/endpoints.py` for the registered endpoints and
+`../backend/schemas.py` for the request/response models.
 
 ## Editing
 
-- **Layout / behavior:** edit `build_blocks()` in `../backend/ui.py`.
-- **Style:** the `SAGE_THEME` and `CUSTOM_CSS` constants in `../backend/ui.py`.
-- **Chat logic:** `_chat_fn` (UI) and `_chat_api` (structured `/chat`) both call
-  the shared `rag.answer()`.
+- **Layout / wizard / chat behavior:** `static/app.js`.
+- **Translations:** `static/i18n.js` (`en` populated; `da`/`fr` keys exist with
+  empty values, falling back to EN).
+- **Style:** `static/styles.css` (token system at the top, sectioned by
+  component below).
+- **Page shell:** `index.html`.

src/frontend/static/app.js

@@ -803,13 +803,21 @@ function appendMessage(role, content, citations = []) {
   return el;
 }
 
+let chatWarmed = false; // first reply loads the model on GPU — warn once.
+
 async function sendMessage() {
   const text = chatInput.value.trim();
   if (!text) return;
   chatInput.value = "";
   appendMessage("user", text);
   messages.push({ role: "user", content: text });
-  const pending = appendMessage("assistant", "…");
+  const pending = appendMessage(
+    "assistant",
+    chatWarmed
+      ? "…"
+      : "Cold-starting the assistant — the first reply can take up to a minute while the model loads. Thanks for your patience…"
+  );
+  if (!chatWarmed) pending.classList.add("msg-warming");
   try {
     const c = await getClient();
     const result = await c.predict("/chat", {
@@ -817,6 +825,8 @@ async function sendMessage() {
       lang: window.i18n.lang,
     });
     const data = Array.isArray(result.data) ? result.data[0] : result.data;
+    chatWarmed = true;
+    pending.classList.remove("msg-warming");
     pending.textContent = data.reply ?? String(data);
     if (data.citations?.length) {
       const cit = document.createElement("span");
@@ -832,7 +842,10 @@ async function sendMessage() {
     }
     messages.push({ role: "assistant", content: data.reply ?? "" });
   } catch (err) {
-    pending.textContent = "Error: " + (err?.message ?? err);
+    pending.classList.remove("msg-warming");
+    pending.textContent =
+      "The assistant is still waking up or busy right now — please try again in a moment.";
+    console.error("chat error:", err);
   }
 }
 

src/frontend/static/styles.css

@@ -307,6 +307,8 @@ section { padding: var(--section-padding-y) 0; }
 .msg.user { align-self: flex-end; background: var(--color-ink); color: #fff; border-bottom-right-radius: var(--radius-sm); }
 .msg.assistant { align-self: flex-start; background: var(--color-sage-light); color: var(--color-text-primary); border-bottom-left-radius: var(--radius-sm); }
 .msg.assistant .citations { display:block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
+.msg.assistant.msg-warming { font-style: italic; color: var(--color-text-secondary); animation: warm-pulse 1.6s ease-in-out infinite; }
+@keyframes warm-pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
 .chat-input {
   display: flex;
   gap: var(--space-3);