Update UI

src/agent/router.py

@@ -2,6 +2,7 @@
 
 import logging
 import math
+import unicodedata
 
 from langchain_core.runnables import Runnable
 
@@ -42,9 +43,55 @@ class QueryRouter:
         self._generator = generator
         self._translate_query = translate_query
 
+    @staticmethod
+    def _detect_script(text: str) -> str | None:
+        """Detect language from Unicode script for non-Latin text.
+
+        Returns a language name (e.g. "Chinese") if the script is
+        unambiguously identifiable, or None to fall back to LLM detection.
+        """
+        script_counts: dict[str, int] = {}
+        for ch in text:
+            if ch.isspace() or ch in ".,!?;:\"'()[]{}":
+                continue
+            try:
+                name = unicodedata.name(ch, "")
+            except ValueError:
+                continue
+            if name.startswith("CJK") or name.startswith("KANGXI"):
+                script_counts["CJK"] = script_counts.get("CJK", 0) + 1
+            elif name.startswith("HIRAGANA") or name.startswith("KATAKANA"):
+                script_counts["Japanese"] = script_counts.get("Japanese", 0) + 1
+            elif name.startswith("HANGUL"):
+                script_counts["Korean"] = script_counts.get("Korean", 0) + 1
+            elif name.startswith("ARABIC"):
+                script_counts["Arabic"] = script_counts.get("Arabic", 0) + 1
+            elif name.startswith("DEVANAGARI"):
+                script_counts["Hindi"] = script_counts.get("Hindi", 0) + 1
+            elif name.startswith("THAI"):
+                script_counts["Thai"] = script_counts.get("Thai", 0) + 1
+            elif name.startswith("CYRILLIC"):
+                script_counts["Russian"] = script_counts.get("Russian", 0) + 1
+
+        if not script_counts:
+            return None
+
+        dominant = max(script_counts, key=lambda k: script_counts[k])
+        # CJK characters alone -> Chinese; if mixed with Hiragana/Katakana -> Japanese
+        if dominant == "CJK" and "Japanese" in script_counts:
+            return "Japanese"
+        if dominant == "CJK":
+            return "Chinese"
+        return dominant
+
     def _detect_and_translate_query(self, query: str) -> tuple[str, str]:
         """Detect the query language and optionally translate to Danish.
 
+        Uses Unicode script detection first for non-Latin scripts (Chinese,
+        Japanese, Korean, Arabic, etc.) which are reliably identifiable from
+        character ranges. Falls back to LLM-based detection for Latin-script
+        languages.
+
         Translation is only performed when ``self._translate_query`` is True and
         the detected language is not Danish.
 
@@ -56,13 +103,20 @@ class QueryRouter:
             retrieval_query is Danish when translation is enabled; otherwise the
             original query. detected_language is e.g. "English", "Danish".
         """
-        prompt = (
-            "Detect the language of the following text. "
-            "Reply with ONLY the language name in English (e.g. 'Danish', 'English', 'German'). "
-            "Nothing else.\n\n"
-            f"Text: {query}"
-        )
-        detected = str(self._generator.invoke(prompt)).strip().strip(".")
+        # Fast path: detect non-Latin scripts via Unicode
+        detected = self._detect_script(query)
+
+        if detected is None:
+            # Latin-script text — use LLM for detection
+            prompt = (
+                "Detect the language of the following text. "
+                "Reply with ONLY the language name in English "
+                "(e.g. 'Danish', 'English', 'German'). "
+                "Nothing else.\n\n"
+                f"Text: {query}"
+            )
+            detected = str(self._generator.invoke(prompt)).strip().strip(".")
+
         logger.info("Detected query language: %s", detected)
 
         if detected.lower() in ("danish", "dansk"):

src/ui/app.py

@@ -1,7 +1,7 @@
 """Streamlit frontend for Dokumentassistent.
 
 Calls the FastAPI backend at http://localhost:8000.
-Single-page document search interface styled after ku.dk design language.
+Single-page document search interface inspired by Danish university design.
 """
 
 import os
@@ -85,6 +85,23 @@ TEXTS: Dict[str, Dict[str, str]] = {
         "pipeline_rank": "#",
         "pipeline_no_results": "Ingen resultater",
         "pipeline_score_change": "Score-aendring",
+        "nav_home": "Forside",
+        "nav_docs": "Dokumenter",
+        "nav_search": "Soegning",
+        "nav_about": "Om systemet",
+        "breadcrumb_home": "Forside",
+        "breadcrumb_current": "Dokumentassistent",
+        "footer_contact": "Kontakt",
+        "footer_contact_text": "IT-support for administrativt personale",
+        "footer_services": "Services",
+        "footer_service_api": "API-dokumentation",
+        "footer_service_status": "Systemstatus",
+        "footer_service_guide": "Brugervejledning",
+        "footer_about": "Om",
+        "footer_about_privacy": "Privatlivspolitik",
+        "footer_about_data": "Databehandling",
+        "footer_about_access": "Tilgaengelighed",
+        "footer_copyright": "Dokumentassistent — RAG-prototype",
     },
     "en": {
         "page_title": "Document Assistant",
@@ -155,6 +172,23 @@ TEXTS: Dict[str, Dict[str, str]] = {
         "pipeline_rank": "#",
         "pipeline_no_results": "No results",
         "pipeline_score_change": "Score change",
+        "nav_home": "Home",
+        "nav_docs": "Documents",
+        "nav_search": "Search",
+        "nav_about": "About",
+        "breadcrumb_home": "Home",
+        "breadcrumb_current": "Document Assistant",
+        "footer_contact": "Contact",
+        "footer_contact_text": "IT support for administrative staff",
+        "footer_services": "Services",
+        "footer_service_api": "API Documentation",
+        "footer_service_status": "System Status",
+        "footer_service_guide": "User Guide",
+        "footer_about": "About",
+        "footer_about_privacy": "Privacy Policy",
+        "footer_about_data": "Data Processing",
+        "footer_about_access": "Accessibility",
+        "footer_copyright": "Document Assistant — RAG Prototype",
     },
 }
 
@@ -164,11 +198,11 @@ TEXTS: Dict[str, Dict[str, str]] = {
 st.set_page_config(
     page_title="Dokumentassistent",
     page_icon=None,
-    layout="centered",
+    layout="wide",
 )
 
 # ---------------------------------------------------------------------------
-# Custom CSS  --  KU visual identity
+# Custom CSS  --  University-inspired visual identity
 # ---------------------------------------------------------------------------
 st.markdown(
     """
@@ -180,104 +214,222 @@ st.markdown(
         background-color: #FFFFFF;
     }
 
-    /* Hide default Streamlit branding but keep the sidebar toggle */
+    /* Hide default Streamlit branding */
     #MainMenu, footer {visibility: hidden;}
-    header[data-testid="stHeader"] {background: transparent;}
+    header[data-testid="stHeader"] {background: transparent; height: 0;}
 
-    /* ---------- Forankringslinje ---------- */
-    .ku-line {
-        width: 100%;
-        height: 4px;
-        background-color: #901A1E;
-        margin-bottom: 1.5rem;
+    /* Force hide Streamlit header space */
+    .stApp > header {display: none;}
+    .block-container {
+        padding-top: 0 !important;
+        max-width: 1100px;
     }
 
-    /* ---------- Title ---------- */
-    .ku-title {
+    /* ---------- Top utility bar ---------- */
+    .top-utility-bar {
+        background-color: #2B2B2B;
+        color: #CCCCCC;
+        font-size: 0.78rem;
+        padding: 6px 0;
+        margin: -1rem -4rem 0 -4rem;
+        width: 100vw;
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .top-utility-inner {
+        max-width: 1100px;
+        margin: 0 auto;
+        padding: 0 2rem;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 1.5rem;
+    }
+    .top-utility-bar a {
+        color: #CCCCCC;
+        text-decoration: none;
+        transition: color 0.15s;
+    }
+    .top-utility-bar a:hover {
+        color: #FFFFFF;
+    }
+    .utility-lang-switch {
+        border-left: 1px solid #555;
+        padding-left: 1.5rem;
+    }
+
+    /* ---------- Main navigation bar ---------- */
+    .main-nav-bar {
+        background-color: #FFFFFF;
+        border-bottom: 3px solid #901A1E;
+        margin: 0 -4rem;
+        width: 100vw;
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .main-nav-inner {
+        max-width: 1100px;
+        margin: 0 auto;
+        padding: 0.9rem 2rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .nav-brand {
         font-family: Georgia, 'Times New Roman', serif;
-        font-size: 2.2rem;
+        font-size: 1.5rem;
         font-weight: 700;
         color: #901A1E;
-        margin: 0 0 0.4rem 0;
+        text-decoration: none;
         letter-spacing: -0.02em;
     }
-    .ku-subtitle {
+    .nav-links {
+        display: flex;
+        gap: 2rem;
+        align-items: center;
+    }
+    .nav-links a {
         font-family: Arial, Helvetica, sans-serif;
-        font-size: 1.05rem;
+        font-size: 0.92rem;
+        color: #333333;
+        text-decoration: none;
+        font-weight: 500;
+        padding: 0.3rem 0;
+        border-bottom: 2px solid transparent;
+        transition: border-color 0.15s, color 0.15s;
+    }
+    .nav-links a:hover, .nav-links a.active {
+        color: #901A1E;
+        border-bottom-color: #901A1E;
+    }
+
+    /* ---------- Breadcrumbs ---------- */
+    .breadcrumbs {
+        font-size: 0.82rem;
+        color: #888888;
+        padding: 0.7rem 0 0.4rem 0;
+        margin-bottom: 0.2rem;
+    }
+    .breadcrumbs a {
+        color: #901A1E;
+        text-decoration: none;
+    }
+    .breadcrumbs a:hover {
+        text-decoration: underline;
+    }
+    .breadcrumbs .separator {
+        color: #AAAAAA;
+        margin: 0 0.4rem;
+    }
+
+    /* ---------- Page title area ---------- */
+    .page-title-area {
+        border-bottom: 1px solid #E0E0E0;
+        padding-bottom: 1.2rem;
+        margin-bottom: 1.8rem;
+    }
+    .page-title {
+        font-family: Georgia, 'Times New Roman', serif;
+        font-size: 2rem;
+        font-weight: 700;
+        color: #2B2B2B;
+        margin: 0.4rem 0 0.5rem 0;
+        letter-spacing: -0.02em;
+        line-height: 1.2;
+    }
+    .page-subtitle {
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 1rem;
         color: #666666;
-        margin: 0 0 2rem 0;
+        margin: 0;
         line-height: 1.6;
     }
 
     /* ---------- Sidebar ---------- */
     section[data-testid="stSidebar"] {
-        background-color: #FAFAFA;
+        background-color: #F7F7F7;
         border-right: 1px solid #E0E0E0;
     }
-    section[data-testid="stSidebar"] .ku-sidebar-heading {
+    section[data-testid="stSidebar"] .sidebar-section-heading {
         font-family: Georgia, 'Times New Roman', serif;
-        font-size: 1.2rem;
+        font-size: 1.1rem;
         font-weight: 700;
-        color: #901A1E;
+        color: #2B2B2B;
         margin-bottom: 0.5rem;
+        padding-bottom: 0.35rem;
+        border-bottom: 2px solid #901A1E;
     }
     section[data-testid="stSidebar"] p,
     section[data-testid="stSidebar"] li {
-        font-size: 0.92rem;
+        font-size: 0.88rem;
         color: #555555;
         line-height: 1.55;
     }
 
     /* ---------- Source card ---------- */
     .source-card {
-        border: 1px solid #CCCCCC;
+        border-left: 3px solid #901A1E;
+        border-top: 1px solid #E0E0E0;
+        border-right: 1px solid #E0E0E0;
+        border-bottom: 1px solid #E0E0E0;
         padding: 1rem 1.2rem;
         margin-bottom: 0.75rem;
         background-color: #FAFAFA;
+        transition: box-shadow 0.15s;
+    }
+    .source-card:hover {
+        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
     }
     .source-card-title {
         font-weight: 600;
-        color: #333333;
+        color: #2B2B2B;
         font-size: 0.95rem;
         margin-bottom: 0.3rem;
     }
     .source-card-text {
-        font-size: 0.88rem;
+        font-size: 0.85rem;
         color: #555555;
         line-height: 1.55;
     }
     .source-card-meta {
-        font-size: 0.8rem;
+        font-size: 0.78rem;
         color: #888888;
         margin-top: 0.4rem;
     }
 
     /* ---------- Result metadata ---------- */
     .result-meta {
-        font-size: 0.88rem;
+        font-size: 0.85rem;
         color: #666666;
         margin-bottom: 1.2rem;
-        padding-bottom: 0.8rem;
-        border-bottom: 1px solid #E0E0E0;
+        padding: 0.6rem 0.9rem;
+        background-color: #F7F7F7;
+        border-left: 3px solid #901A1E;
     }
 
     /* ---------- Answer area ---------- */
     .answer-block {
-        font-size: 1.05rem;
+        font-size: 1.02rem;
         line-height: 1.7;
         color: #333333;
         margin-bottom: 1.5rem;
+        padding: 1.2rem;
+        background-color: #FFFFFF;
+        border: 1px solid #E0E0E0;
     }
 
     /* ---------- Inputs ---------- */
     .stTextInput > div > div > input {
         border-radius: 0 !important;
-        border: 1px solid #999999 !important;
+        border: 1px solid #BBBBBB !important;
         font-family: Arial, Helvetica, sans-serif !important;
+        padding: 0.6rem 0.8rem !important;
     }
     .stTextInput > div > div > input:focus {
         border-color: #901A1E !important;
-        box-shadow: none !important;
+        box-shadow: 0 0 0 1px #901A1E !important;
     }
 
     /* ---------- Button ---------- */
@@ -287,9 +439,11 @@ st.markdown(
         color: #FFFFFF !important;
         border: none !important;
         font-family: Arial, Helvetica, sans-serif !important;
-        font-size: 0.95rem !important;
-        padding: 0.5rem 2rem !important;
+        font-size: 0.92rem !important;
+        padding: 0.55rem 2.2rem !important;
         letter-spacing: 0.02em;
+        font-weight: 600 !important;
+        text-transform: uppercase;
     }
     .stButton > button:hover {
         background-color: #7A1619 !important;
@@ -308,38 +462,175 @@ st.markdown(
         border-radius: 0 !important;
     }
 
+    /* ---------- Pipeline tables ---------- */
+    [data-testid="stExpander"] table {
+        table-layout: fixed;
+        width: 100%;
+        word-break: break-all;
+        overflow-wrap: break-word;
+    }
+    [data-testid="stExpander"] table td,
+    [data-testid="stExpander"] table th {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 0;
+        font-size: 0.82rem;
+        padding: 0.3rem 0.5rem;
+    }
+    [data-testid="stExpander"] table td:first-child,
+    [data-testid="stExpander"] table th:first-child {
+        width: 2.5rem;
+    }
+    [data-testid="stExpander"] table td:last-child,
+    [data-testid="stExpander"] table th:last-child {
+        width: 5rem;
+    }
+
     /* ---------- Expander ---------- */
     .streamlit-expanderHeader {
         font-family: Arial, Helvetica, sans-serif !important;
-        font-size: 1rem !important;
+        font-size: 0.95rem !important;
         color: #333333 !important;
     }
+
+    /* ---------- Footer ---------- */
+    .site-footer {
+        background-color: #2B2B2B;
+        color: #CCCCCC;
+        margin: 3rem -4rem 0 -4rem;
+        width: 100vw;
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 2.5rem 0 1.5rem 0;
+    }
+    .footer-inner {
+        max-width: 1100px;
+        margin: 0 auto;
+        padding: 0 2rem;
+        display: grid;
+        grid-template-columns: 2fr 1fr 1fr 1fr;
+        gap: 2rem;
+    }
+    .footer-col h4 {
+        font-family: Georgia, 'Times New Roman', serif;
+        font-size: 0.95rem;
+        font-weight: 700;
+        color: #FFFFFF;
+        margin: 0 0 0.8rem 0;
+        padding-bottom: 0.4rem;
+        border-bottom: 2px solid #901A1E;
+        display: inline-block;
+    }
+    .footer-col p, .footer-col a {
+        font-size: 0.82rem;
+        color: #AAAAAA;
+        line-height: 1.7;
+        text-decoration: none;
+        display: block;
+    }
+    .footer-col a:hover {
+        color: #FFFFFF;
+    }
+    .footer-bottom {
+        max-width: 1100px;
+        margin: 1.5rem auto 0 auto;
+        padding: 1rem 2rem 0 2rem;
+        border-top: 1px solid #444444;
+        font-size: 0.78rem;
+        color: #888888;
+        text-align: center;
+    }
     </style>
     """,
     unsafe_allow_html=True,
 )
 
 # ---------------------------------------------------------------------------
-# Language selector  --  top-right corner via columns
+# Language state — use query param trick for the utility-bar lang switch
 # ---------------------------------------------------------------------------
-_col_spacer, _col_lang = st.columns([5, 1])
-with _col_lang:
+if "lang" not in st.session_state:
+    st.session_state.lang = "da"
+
+
+def _set_lang(code: str) -> None:
+    """Set the language in session state."""
+    st.session_state.lang = code
+
+
+# A hidden selectbox drives the actual state; the visual switch is in the bar
+_col_hidden_lang = st.columns([1])[0]
+with _col_hidden_lang:
     lang = st.selectbox(
-        "🌐",
+        "lang_sel",
         options=["da", "en"],
         format_func=lambda c: "Dansk" if c == "da" else "English",
-        index=0,
+        index=0 if st.session_state.lang == "da" else 1,
         label_visibility="collapsed",
+        key="lang_select",
     )
+    st.session_state.lang = lang
 
 t = TEXTS[lang]
 
+# ---------------------------------------------------------------------------
+# Top utility bar
+# ---------------------------------------------------------------------------
+st.markdown(
+    f"""
+    <div class="top-utility-bar">
+      <div class="top-utility-inner">
+        <span>{t["footer_service_status"]}</span>
+        <span>{t["footer_service_guide"]}</span>
+        <span class="utility-lang-switch">{"Dansk" if lang == "da" else "English"}</span>
+      </div>
+    </div>
+    """,
+    unsafe_allow_html=True,
+)
+
+# ---------------------------------------------------------------------------
+# Main navigation bar
+# ---------------------------------------------------------------------------
+st.markdown(
+    f"""
+    <div class="main-nav-bar">
+      <div class="main-nav-inner">
+        <span class="nav-brand">Dokumentassistent</span>
+        <div class="nav-links">
+          <a href="#" class="active">{t["nav_home"]}</a>
+          <a href="#">{t["nav_docs"]}</a>
+          <a href="#">{t["nav_search"]}</a>
+          <a href="#">{t["nav_about"]}</a>
+        </div>
+      </div>
+    </div>
+    """,
+    unsafe_allow_html=True,
+)
+
+# ---------------------------------------------------------------------------
+# Breadcrumbs
+# ---------------------------------------------------------------------------
+st.markdown(
+    f"""
+    <div class="breadcrumbs">
+      <a href="#">{t["breadcrumb_home"]}</a>
+      <span class="separator">&rsaquo;</span>
+      <a href="#">{t["nav_search"]}</a>
+      <span class="separator">&rsaquo;</span>
+      <span>{t["breadcrumb_current"]}</span>
+    </div>
+    """,
+    unsafe_allow_html=True,
+)
+
 # ---------------------------------------------------------------------------
 # Sidebar
 # ---------------------------------------------------------------------------
 with st.sidebar:
     st.markdown(
-        f'<div class="ku-sidebar-heading">{t["sidebar_heading"]}</div>',
+        f'<div class="sidebar-section-heading">{t["sidebar_heading"]}</div>',
         unsafe_allow_html=True,
     )
     st.markdown(t["sidebar_body"])
@@ -363,7 +654,6 @@ with st.sidebar:
 
     st.markdown("---")
 
-    # Fetch and display current model info from backend
     try:
         _health = requests.get(f"{API_BASE}/health", timeout=5).json()
         _llm = _health.get("llm_model", "")
@@ -371,7 +661,7 @@ with st.sidebar:
         _emb = _health.get("embedding_model", "")
         _emb_prov = _health.get("embedding_provider", "")
         st.markdown(
-            f'<div class="ku-sidebar-heading">{t["model_heading"]}</div>',
+            f'<div class="sidebar-section-heading">{t["model_heading"]}</div>',
             unsafe_allow_html=True,
         )
         st.markdown(
@@ -382,16 +672,15 @@ with st.sidebar:
         st.caption(t["model_unavailable"])
 
 # ---------------------------------------------------------------------------
-# Main content
+# Main content — page title area
 # ---------------------------------------------------------------------------
-
-# Forankringslinje
-st.markdown('<div class="ku-line"></div>', unsafe_allow_html=True)
-
-# Title block
-st.markdown(f'<div class="ku-title">{t["title"]}</div>', unsafe_allow_html=True)
 st.markdown(
-    f'<div class="ku-subtitle">{t["subtitle"]}</div>',
+    f"""
+    <div class="page-title-area">
+      <div class="page-title">{t["title"]}</div>
+      <p class="page-subtitle">{t["subtitle"]}</p>
+    </div>
+    """,
     unsafe_allow_html=True,
 )
 
@@ -496,6 +785,12 @@ if search_clicked and question.strip():
 
             st.markdown("---")
 
+            def _truncate_doc_id(doc_id: str, max_len: int = 40) -> str:
+                """Truncate long document IDs for table display."""
+                if len(doc_id) <= max_len:
+                    return doc_id
+                return doc_id[: max_len - 3] + "..."
+
             def _render_result_table(results: list[dict], label: str) -> None:
                 """Render a ranked results table."""
                 st.markdown(f"**{label}**")
@@ -504,7 +799,7 @@ if search_clicked and question.strip():
                     return
                 header = f'| {t["pipeline_rank"]} | {t["pipeline_doc"]} | {t["pipeline_score"]} |\n|---|---|---|'
                 rows = "\n".join(
-                    f'| {i + 1} | {r.get("document_id", "")} | {r.get("score", 0):.4f} |'
+                    f'| {i + 1} | {_truncate_doc_id(r.get("document_id", ""))} | {r.get("score", 0):.4f} |'
                     for i, r in enumerate(results)
                 )
                 st.markdown(f"{header}\n{rows}")
@@ -548,7 +843,7 @@ if search_clicked and question.strip():
                     else:
                         change = "-"
                     rows_list.append(
-                        f'| {i + 1} | {r.get("document_id", "")} | {new_score:.4f} | {change} |'
+                        f'| {i + 1} | {_truncate_doc_id(r.get("document_id", ""))} | {new_score:.4f} | {change} |'
                     )
                 st.markdown(f"{header}\n" + "\n".join(rows_list))
             else:
@@ -556,3 +851,41 @@ if search_clicked and question.strip():
 
 elif search_clicked:
     st.warning(t["empty_warning"])
+
+# ---------------------------------------------------------------------------
+# Footer
+# ---------------------------------------------------------------------------
+st.markdown(
+    f"""
+    <div class="site-footer">
+      <div class="footer-inner">
+        <div class="footer-col">
+          <h4>Dokumentassistent</h4>
+          <p>{t["footer_contact_text"]}</p>
+          <p style="margin-top:0.5rem; color:#888;">RAG-pipeline &middot; Hybrid Search &middot; LLM</p>
+        </div>
+        <div class="footer-col">
+          <h4>{t["footer_services"]}</h4>
+          <a href="#">{t["footer_service_api"]}</a>
+          <a href="#">{t["footer_service_status"]}</a>
+          <a href="#">{t["footer_service_guide"]}</a>
+        </div>
+        <div class="footer-col">
+          <h4>{t["footer_about"]}</h4>
+          <a href="#">{t["footer_about_privacy"]}</a>
+          <a href="#">{t["footer_about_data"]}</a>
+          <a href="#">{t["footer_about_access"]}</a>
+        </div>
+        <div class="footer-col">
+          <h4>{t["footer_contact"]}</h4>
+          <p>support@example.dk</p>
+          <p>+45 00 00 00 00</p>
+        </div>
+      </div>
+      <div class="footer-bottom">
+        {t["footer_copyright"]}
+      </div>
+    </div>
+    """,
+    unsafe_allow_html=True,
+)