Sync app.py from kosmonautical/openhands-index-paul

app.py

@@ -3,7 +3,7 @@ import logging
 import sys
 import os
 
-from constants import FONT_FAMILY_SHORT
+from constants import FONT_MONO_NAME, FONT_FAMILY_SHORT
 
 logging.basicConfig(level=logging.INFO, format='%(levelname)s: %(message)s')
 logger = logging.getLogger(__name__)
@@ -24,8 +24,9 @@ except Exception as e:
     logger.error(f"Error during data setup: {e}", exc_info=True)
     logger.warning("Continuing with app startup despite error")
 
-import gradio as gr
 import urllib.parse
+
+import gradio as gr
 from huggingface_hub import HfApi
 from config import LEADERBOARD_PATH, LOCAL_DEBUG
 from content import css
@@ -41,10 +42,16 @@ from about import build_page as build_about_page
 logger.info(f"All modules imported (LOCAL_DEBUG={LOCAL_DEBUG})")
 
 api = HfApi()
-LOGO_PATH = "assets/logo.svg"
 
 # PostHog analytics (client-side)
 POSTHOG_API_KEY = os.getenv("POSTHOG_API_KEY", "phc_ERBPfEE0gwNgkOBsxbHr1wh9mBsYcsw4zSLtvdA9RFg")
+# OpenHands-Design typography (matches OpenHands-Design/index.html)
+DESIGN_FONTS_LINK = """
+<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@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+"""
+
 posthog_script = f"""
 <script>
     !function(t,e){{var o,n,p,r;e.__SV||(window.posthog && window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){{function g(t,e){{var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){{t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){{var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e}},u.people.toString=function(){{return u.toString(1)+".people (stub)"}},o="init ss us bi os hs es ns capture Bi calculateEventProperties cs register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey cancelPendingSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException startExceptionAutocapture stopExceptionAutocapture loadToolbar get_property getSessionProperty ps vs createPersonProfile gs Zr ys opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing ds debug O fs getPageViewId captureTraceFeedback captureTraceMetric Yr".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])}},e.__SV=1)}}(document,window.posthog||[]);
@@ -77,28 +84,196 @@ redirect_script = """
 </script>
 """
 
+# Gradio 5.30+ does not use .nav-holder — tag the real multipage links, then style via CSS
+# (see: OpenHands-Design index.html top nav)
+# IMPORTANT: do not strip all classes on every run — that unstyles the bar, changes layout, and
+# makes getBoundingClientRect() unstable (layout thrash / "jumping" nav).
+oh_top_nav_script = """
+<script>
+(function() {
+    const ROUTE_PATHS = new Set(['/home', '/issue-resolution', '/greenfield', '/frontend', '/testing', '/information-gathering', '/about', '/alternative-agents']);
+    var lastBar = null;
+    var lastLinks = null;
+    function pathKey(anchor) {
+        try {
+            var p = new URL(anchor.getAttribute('href') || '', window.location.origin).pathname.replace(/\\/$/, '') || '/';
+            if (p === '/' || p === '') p = '/home';
+            return p;
+        } catch (e) { return null; }
+    }
+    function routePath(anchor) {
+        var p = pathKey(anchor);
+        return p && ROUTE_PATHS.has(p) ? p : null;
+    }
+    function getTopRowRouteLinks() {
+        const g = document.querySelector('gradio-app');
+        if (!g) return [];
+        /* Only links inside the multipage <nav> — not intro/Markdown (avoids byPath picking a
+           body <a> first, and drops the #page-content-wrapper filter that could hide the bar). */
+        function routeLinksInNav(nav) {
+            if (!nav) return [];
+            return Array.from(nav.querySelectorAll('a[href]')).filter(function (a) { return routePath(a); });
+        }
+        /* Prefer the <nav> that contains the Home wordmark (avoids wrong <nav> + works if Svelte class hash changes). */
+        var bar = getRouteNav() || g.querySelector('nav.svelte-ti537g');
+        var candidates = routeLinksInNav(bar);
+        if (candidates.length < 1) {
+            const navs = g.querySelectorAll('nav');
+            for (var i = 0; i < navs.length; i++) {
+                const c = routeLinksInNav(navs[i]);
+                if (c.length > 0) { bar = navs[i]; candidates = c; break; }
+            }
+        }
+        if (candidates.length < 1) return [];
+        /* Single top-nav link: still tag nav so wordmark/oh-top-nav CSS runs (avoids “missing logo / links stuck left” until 2+ links exist) */
+        if (candidates.length === 1) {
+            const a = candidates[0];
+            const nav = a.closest("nav");
+            if (nav && g.contains(nav)) {
+                return [a];
+            }
+            return [];
+        }
+        const byPath = new Map();
+        for (const a of candidates) {
+            const p = pathKey(a);
+            if (!p || !ROUTE_PATHS.has(p)) continue;
+            if (!byPath.has(p)) {
+                byPath.set(p, a);
+            } else {
+                const cur = byPath.get(p);
+                const curP = new URL(cur.getAttribute('href') || '', window.location.origin).pathname;
+                const newP = new URL(a.getAttribute('href') || '', window.location.origin).pathname;
+                if (p === '/home' && (curP === '/' || curP === '') && newP === '/home') {
+                    byPath.set(p, a);
+                }
+            }
+        }
+        const unique = Array.from(byPath.values());
+        const tops = unique.map((x) => x.getBoundingClientRect().top);
+        const minTop = Math.min.apply(null, tops);
+        /* ~1 row; always keep /home (wordmark) even if y differs (e.g. from position:absolute layout) */
+        return unique.filter((a) => {
+            if (pathKey(a) === '/home') return true;
+            return Math.abs(a.getBoundingClientRect().top - minTop) < 22;
+        });
+    }
+    function lca(els) {
+        if (els.length < 2) return els[0] && els[0].parentElement;
+        const chain = (node) => { const a = []; for (let n = node; n; n = n.parentElement) a.push(n); return a; };
+        let c = chain(els[0]);
+        for (let i = 1; i < els.length; i++) {
+            const d = new Set(chain(els[i]));
+            c = c.filter((n) => d.has(n));
+        }
+        return c[0] || null;
+    }
+    function sameLinkSet(a, b) {
+        if (!a || !b || a.length !== b.length) return false;
+        const sb = new Set(b);
+        for (var i = 0; i < a.length; i++) { if (!sb.has(a[i])) return false; }
+        return true;
+    }
+    function isDetached(el) { return el && !document.body.contains(el); }
+    function clearBar() {
+        if (lastBar) { lastBar.classList.remove('oh-top-nav'); }
+        if (lastLinks) { lastLinks.forEach(function (a) { a.classList.remove('oh-nav-link'); }); }
+        lastBar = null;
+        lastLinks = null;
+    }
+    /**
+     * Multipage top bar: must NOT use the first <nav> in the app (there can be others).
+     * The wordmark (first /home) lives in the same <nav> as the route row — that is the bar.
+     * Svelte class hash can change, so do not rely only on nav.svelte-ti537g.
+     */
+    function getRouteNav() {
+        var g = document.querySelector('gradio-app');
+        if (!g) return null;
+        var h = g.querySelector('a[href*="/home"]');
+        if (h) {
+            var n = h.closest('nav');
+            if (n && g.contains(n)) { return n; }
+        }
+        n = g.querySelector('nav.oh-top-nav, nav.svelte-ti537g, .nav-holder nav, nav[role="navigation"]');
+        if (n) return n;
+        n = g.querySelector('nav');
+        return n || null;
+    }
+    function applyOhNav() {
+        if (lastLinks && (lastLinks.some(isDetached) || (lastBar && isDetached(lastBar)))) {
+            lastBar = null;
+            lastLinks = null;
+        }
+        const links = getTopRowRouteLinks();
+        if (links.length < 1) {
+            if (lastBar && lastLinks && !lastLinks.some(isDetached)) {
+                return;
+            }
+            if (lastBar) { clearBar(); }
+            return;
+        }
+        var row = lca(links);
+        if (!row || row === document.body || (row.tagName && row.tagName.toLowerCase() === 'gradio-app')) {
+            row = links[0].parentElement;
+        }
+        if (lastBar === row && lastLinks && sameLinkSet(lastLinks, links)) {
+            return;
+        }
+        if (lastBar && lastBar !== row) { lastBar.classList.remove('oh-top-nav'); }
+        if (lastLinks) { lastLinks.forEach(function (a) { a.classList.remove('oh-nav-link'); }); }
+        if (row) { row.classList.add('oh-top-nav'); }
+        links.forEach(function (a) {
+            a.classList.add('oh-nav-link');
+            if (pathKey(a) === '/home') {
+                a.classList.add('oh-nav-wordmark');
+                a.setAttribute('aria-label', 'OpenHands Home'); a.setAttribute('title', 'Home');
+            }
+        });
+        lastBar = row;
+        lastLinks = links.slice();
+    }
+    var deb;
+    function scheduleApply() {
+        if (deb) { clearTimeout(deb); }
+        deb = setTimeout(function () { requestAnimationFrame(applyOhNav); }, 50);
+    }
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function () { requestAnimationFrame(applyOhNav); });
+    } else { requestAnimationFrame(applyOhNav); }
+    requestAnimationFrame(function () { requestAnimationFrame(applyOhNav); });
+    window.addEventListener('resize', scheduleApply, { passive: true });
+    var obs = new MutationObserver(scheduleApply);
+    var ga = document.querySelector('gradio-app');
+    if (ga) { obs.observe(ga, { childList: true, subtree: true }); }
+    else { document.addEventListener('DOMContentLoaded', function () { var g = document.querySelector('gradio-app'); if (g) obs.observe(g, { childList: true, subtree: true }); }); }
+    try { if (typeof queueMicrotask === 'function') { queueMicrotask(applyOhNav); } } catch (e) {}
+    setTimeout(applyOhNav, 0);
+    setTimeout(applyOhNav, 50);
+    setTimeout(applyOhNav, 500);
+    setTimeout(applyOhNav, 2000);
+})();
+</script>
+"""
+
 # JavaScript to fix navigation links to use relative paths (avoids domain mismatch when behind proxy)
 fix_nav_links_script = """
 <script>
 (function() {
     function fixNavLinks() {
-        // Find all navigation links in the nav-holder
-        const navLinks = document.querySelectorAll('.nav-holder nav a');
+        const navLinks = document.querySelectorAll('gradio-app nav.oh-top-nav a[href], gradio-app nav.svelte-ti537g a[href]');
         navLinks.forEach(link => {
             const href = link.getAttribute('href');
             if (href) {
-                // Extract the pathname from the href (works with both relative and absolute URLs)
                 try {
                     const url = new URL(href, window.location.origin);
-                    // Only update if the pathname starts with /
-                    if (url.pathname.startsWith('/')) {
+                    if (url.pathname === '/' || url.pathname === '') {
+                        link.setAttribute('href', '/home');
+                    } else if (url.pathname.startsWith('/')) {
                         link.setAttribute('href', url.pathname);
                     }
                 } catch (e) {
-                    // If URL parsing fails, leave the href as-is
                 }
             }
-            // Remove target="_blank" from nav links to prevent opening in new tab
             link.removeAttribute('target');
         });
     }
@@ -191,8 +366,8 @@ function updateChartsForDarkMode() {
                 'paper_bgcolor': isDark ? '#1f1f1f' : 'white',
                 'plot_bgcolor': isDark ? '#1f1f1f' : 'white',
                 'font.color': isDark ? '#e0e0e0' : '#333',
-                'xaxis.gridcolor': isDark ? '#444' : '#eee',
-                'yaxis.gridcolor': isDark ? '#444' : '#eee'
+                'xaxis.gridcolor': isDark ? '#242424' : '#d4d4d4',
+                'yaxis.gridcolor': isDark ? '#242424' : '#d4d4d4',
             });
         }
     });
@@ -226,133 +401,317 @@ document.addEventListener('DOMContentLoaded', () => {
 </script>
 """
 # --- Theme Definition ---
-# Color scheme aligned with OpenHands brand (from openhands-ui/tokens.css)
-# Primary: Yellow (#FFE165), Neutral: Grey scale, Accents: Green (#BCFF8C), Red (#FF684E)
+# Aligned with OpenHands-Design (see OpenHands-Design/DESIGN.md, index.html)
+# Near-black canvas, white primary CTA, neutral grey scale
+_MUTED_GREEN = gr.themes.Color(
+    c50="#f0fdf4", c100="#dcfce7", c200="#bbf7d0", c300="#86efac", c400="#4ade80",
+    c500="#22c55e", c600="#16a34a", c700="#15803d", c800="#166534", c900="#14532d", c950="#052e16",
+)
 theme = gr.themes.Base(
-    # Primary hue - Yellow (OpenHands brand color)
     primary_hue=gr.themes.Color(
-        c50="#FFFCF0", c100="#FFF3C0", c200="#FFEEAA", c300="#FFEA92", c400="#FFE57B",
-        c500="#FFE165", c600="#DCC257", c700="#BBA54A", c800="#99873D", c900="#76682F", c950="#534921"
+        c50="#fafafa", c100="#f4f4f5", c200="#e4e4e7", c300="#d4d4d8", c400="#a1a1aa",
+        c500="#ffffff", c600="#f4f4f5", c700="#e4e4e7", c800="#d4d4d8", c900="#a1a1aa", c950="#71717a"
     ),
-    # Secondary hue - Green accent (from OpenHands palette)
-    secondary_hue=gr.themes.Color(
-        c50="#F8FFF4", c100="#E4FFD0", c200="#DAFFBF", c300="#CFFFAD", c400="#C6FF9D",
-        c500="#BCFF8C", c600="#A2DC79", c700="#8ABB67", c800="#719954", c900="#577641", c950="#3D532E"
-    ),
-    # Neutral hue - Grey scale (OpenHands dark mode colors)
+    secondary_hue=_MUTED_GREEN,
     neutral_hue=gr.themes.Color(
-        c50="#F7F8FB", c100="#EBEDF3", c200="#D4D8E7", c300="#B1B9D3", c400="#82889B",
-        c500="#525662", c600="#3A3C45", c700="#2F3137", c800="#222328", c900="#18191C", c950="#0D0D0F"
+        c50="#fafafa", c100="#f4f4f4", c200="#e5e5e5", c300="#d4d4d4", c400="#a3a3a3",
+        c500="#737373", c600="#525252", c700="#404040", c800="#262626", c900="#171717", c950="#0d0d0d"
     ),
-    font=[FONT_FAMILY_SHORT, 'sans-serif'],
-    font_mono=['monospace'],
+    font=[FONT_FAMILY_SHORT, "system-ui", "sans-serif"],
+    font_mono=[FONT_MONO_NAME, "ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
 ).set(
-    body_text_color='*neutral_950',
-    body_text_color_subdued='*neutral_700',
-    body_text_color_subdued_dark='*neutral_300',
-    body_text_color_dark='*neutral_50',
-    background_fill_primary='*neutral_50',
-    background_fill_primary_dark='*neutral_900',
-    background_fill_secondary='*neutral_100',
-    background_fill_secondary_dark='*neutral_800',
-    border_color_accent='*primary_500',
-    border_color_accent_subdued='*neutral_300',
-    border_color_accent_subdued_dark='*neutral_600',
-    color_accent='*primary_500',
-    color_accent_soft='*neutral_200',
-    color_accent_soft_dark='*neutral_800',
-    link_text_color='*neutral_700',
-    link_text_color_dark='*neutral_300',
-    link_text_color_active_dark='*primary_500',
-    link_text_color_hover_dark='*primary_400',
-    link_text_color_visited_dark='*neutral_400',
-    table_even_background_fill='*neutral_100',
-    table_even_background_fill_dark='*neutral_800',
-    button_primary_background_fill='*primary_500',
-    button_primary_background_fill_dark='*primary_500',
-    button_primary_background_fill_hover='*primary_400',
-    button_primary_background_fill_hover_dark='*primary_400',
-    button_secondary_background_fill='*secondary_500',
-    button_secondary_background_fill_dark='*secondary_600',
-    button_secondary_text_color='*neutral_900',
-    button_secondary_text_color_dark='*neutral_900',
-    block_title_text_color='*neutral_900',
-    button_primary_text_color='*neutral_900',
-    block_title_text_color_dark='*neutral_50',
-    button_primary_text_color_dark='*neutral_900',
-    block_border_color='*neutral_300',
-    block_border_color_dark='*neutral_700',
-    block_background_fill_dark='*neutral_900',
-    block_background_fill='*neutral_50',
-    checkbox_label_text_color='*neutral_900',
-    checkbox_label_background_fill='*neutral_200',
-    checkbox_label_background_fill_dark='*neutral_700',
-    checkbox_background_color_selected='*primary_500',
-    checkbox_background_color_selected_dark='*primary_500',
+    body_text_color="*neutral_950",
+    body_text_color_subdued="*neutral_600",
+    body_text_color_subdued_dark="*neutral_400",
+    body_text_color_dark="*neutral_50",
+    background_fill_primary="*neutral_50",
+    background_fill_primary_dark="*neutral_950",
+    background_fill_secondary="*neutral_100",
+    background_fill_secondary_dark="*neutral_900",
+    # Light: strokes match top nav (#e4e4e7); dark: DESIGN.md #242424 (--border / --input)
+    border_color_accent="#e4e4e7",
+    border_color_accent_subdued="#e4e4e7",
+    border_color_accent_subdued_dark="#242424",
+    # Primary border for inputs & dropdown chrome (maps to --border-color-primary in Gradio)
+    border_color_primary="#e4e4e7",
+    border_color_primary_dark="#242424",
+    color_accent="*primary_500",
+    color_accent_soft="*neutral_200",
+    color_accent_soft_dark="*neutral_800",
+    link_text_color="*neutral_700",
+    link_text_color_dark="*neutral_300",
+    link_text_color_active_dark="*primary_500",
+    link_text_color_hover_dark="*neutral_50",
+    link_text_color_visited_dark="*neutral_500",
+    table_even_background_fill="*neutral_100",
+    table_even_background_fill_dark="*neutral_900",
+    button_primary_background_fill="*primary_500",
+    button_primary_background_fill_dark="*primary_500",
+    button_primary_background_fill_hover="*primary_600",
+    button_primary_background_fill_hover_dark="*primary_600",
+    button_secondary_background_fill="*neutral_200",
+    button_secondary_background_fill_dark="*neutral_800",
+    button_secondary_text_color="*neutral_900",
+    button_secondary_text_color_dark="*neutral_50",
+    block_title_text_color="*neutral_950",
+    button_primary_text_color="*neutral_950",
+    block_title_text_color_dark="*neutral_50",
+    button_primary_text_color_dark="*neutral_950",
+    block_border_color="#e4e4e7",
+    block_border_color_dark="#242424",
+    block_background_fill_dark="*neutral_900",
+    block_background_fill="*neutral_50",
+    checkbox_label_text_color="*neutral_900",
+    checkbox_label_background_fill="*neutral_200",
+    checkbox_label_background_fill_dark="*neutral_700",
+    # Checkmark SVG is white; selected fill must not be white (this theme’s primary_500 = white → invisible)
+    checkbox_background_color_selected="*neutral_950",
+    checkbox_background_color_selected_dark="*neutral_600",
+    # OpenHands-Design §4 Inputs: rounded-md (4px), border-border, bg-muted/40, text-sm, focus ring #ccc + offset
+    input_radius="0.25rem",
+    input_border_width="1px",
+    input_border_color="*border_color_primary",
+    input_border_color_dark="#242424",
+    input_border_color_hover="*neutral_300",
+    input_border_color_hover_dark="#2e2e2e",
+    input_border_color_focus="#a1a1aa",
+    input_border_color_focus_dark="#525252",
+    input_background_fill="rgba(244, 244, 245, 0.75)",
+    input_background_fill_dark="rgba(31, 31, 31, 0.45)",
+    input_background_fill_hover="rgba(244, 244, 245, 0.9)",
+    input_background_fill_hover_dark="rgba(31, 31, 31, 0.55)",
+    input_background_fill_focus="rgba(229, 229, 234, 0.95)",
+    input_background_fill_focus_dark="rgba(31, 31, 31, 0.65)",
+    input_shadow="0 0 0 0 transparent",
+    input_shadow_dark="0 0 0 0 transparent",
+    input_shadow_focus="0 0 0 2px #fafafa, 0 0 0 3px #cccccc",
+    input_shadow_focus_dark="0 0 0 2px #0d0d0d, 0 0 0 3px #cccccc",
+    input_placeholder_color="*neutral_500",
+    input_placeholder_color_dark="#8c8c8c",
+    input_padding="8px 12px",
+    input_text_size="*text_sm",
+    input_text_weight="400",
+    # Form labels (BlockTitle): text-sm font-medium (colors set above)
+    block_title_text_size="*text_sm",
+    block_title_text_weight="500",
+    # Dropdown / popover elevation (§4 shadow-md)
+    shadow_drop="0 1px 2px 0 rgba(0, 0, 0, 0.12)",
+    shadow_drop_lg="0 4px 6px -1px rgba(0, 0, 0, 0.18), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    # Checkboxes: align border with inputs
+    checkbox_border_color="*neutral_300",
+    checkbox_border_color_dark="#242424",
+    checkbox_border_color_focus="#a1a1aa",
+    checkbox_border_color_focus_dark="#525252",
+    form_gap_width="12px",
 )
+# Top nav wordmark: on-light = black/dark ink (light bar, far left); on-dark = light ink (dark bar)
+NAV_LOGO_SVG_LIGHT = "assets/openhands-logotype-on-light.svg"
+NAV_LOGO_SVG_DARK = "assets/openhands-logotype-on-dark.svg"
 try:
-    with open(LOGO_PATH, "r") as f:
-        svg_content = f.read()
-    encoded_svg = urllib.parse.quote(svg_content)
-    home_icon_data_uri = f"data:image/svg+xml,{encoded_svg}"
-except FileNotFoundError:
-    logger.warning(f"Home icon file not found at {LOGO_PATH}")
-    home_icon_data_uri = "none"
-
-# Load dark mode logo (PNG)
-LOGO_DARK_PATH = "assets/logo-dark.png"
+    with open(NAV_LOGO_SVG_LIGHT, "r", encoding="utf-8") as _f:
+        _oh_nav_data_uri_light = f"data:image/svg+xml,{urllib.parse.quote(_f.read())}"
+except OSError:
+    _oh_nav_data_uri_light = "none"
 try:
-    import base64
-    with open(LOGO_DARK_PATH, "rb") as f:
-        dark_logo_content = f.read()
-    encoded_dark_logo = base64.b64encode(dark_logo_content).decode('utf-8')
-    home_icon_dark_data_uri = f"data:image/png;base64,{encoded_dark_logo}"
-except FileNotFoundError:
-    logger.warning(f"Dark mode logo file not found at {LOGO_DARK_PATH}")
-    home_icon_dark_data_uri = home_icon_data_uri  # Fallback to light logo
-
-# --- This is the final CSS ---
-final_css = css + f"""
-/* --- Find the "Home" button and replace its text with an icon --- */
-.nav-holder nav a[href$="/"] {{
-    display: none !important;
-}}
-.nav-holder nav a[href*="/home"] {{
-    grid-row: 1 !important;
-    grid-column: 1 !important;
-    justify-self: start !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
+    with open(NAV_LOGO_SVG_DARK, "r", encoding="utf-8") as _f:
+        _oh_nav_data_uri_dark = f"data:image/svg+xml,{urllib.parse.quote(_f.read())}"
+except OSError:
+    _oh_nav_data_uri_dark = "none"
+
+# Early decode to reduce first-paint logo flicker (data URI, no extra network)
+NAV_LOGO_PRELOAD = (
+    f'<span class="oh-nav-logotype-preload" aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden;clip:rect(0,0,0,0)">'
+    f'<img src="{_oh_nav_data_uri_light}" width="160" height="40" alt="" decoding="async" fetchpriority="high"/>'
+    f'<img src="{_oh_nav_data_uri_dark}" width="160" height="40" alt="" decoding="async" fetchpriority="low"/>'
+    f"</span>"
+)
 
-    /* 2. Hide the original "Home" text */
+# --- This is the final CSS --- (appended after content.css so it wins the cascade for Home)
+final_css = (
+    css
+    + f"""
+/* Multipage: trim duplicate /, hide unstyled duplicate Gradio <a> */
+gradio-app nav a[href$="/"] {{ display: none !important; }}
+gradio-app .nav-holder nav a[href="/home"]:not(.oh-nav-link) {{ display: none !important; }}
+/* Wordmark (Gradio /home): pinned top-left; no transition (reduces paint flicker) */
+gradio-app nav.svelte-ti537g a[href*="/home"],
+gradio-app .nav-holder nav a[href*="/home"],
+gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"] {{
+    position: absolute !important;
+    left: 20px !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    margin: auto 0 !important;
+    z-index: 2 !important;
+    display: inline-flex !important;
+    align-items: center !important;
     font-size: 0 !important;
+    line-height: 0 !important;
     text-indent: -9999px;
-
-    /* 3. Apply the icon as the background (light mode) */
-    background-image: url("{home_icon_data_uri}") !important;
+    color: transparent !important;
+    overflow: hidden !important;
+    width: min(133px, 42vw) !important;
+    min-width: 80px !important;
+    min-height: 22px !important;
+    max-width: 133px !important;
+    height: 22px !important;
+    max-height: 22px !important;
+    box-sizing: content-box !important;
+    padding: 6px 12px 6px 12px !important;
+    flex: 0 0 auto !important;
+    flex-shrink: 0 !important;
+    background-color: transparent !important;
+    background-image: url("{_oh_nav_data_uri_light}") !important;
     background-size: contain !important;
     background-repeat: no-repeat !important;
-    background-position: center !important;
-
-    width: 240px !important;    
-    height: 50px !important;   
-    padding: 0 !important;
+    background-position: left center !important;
     border: none !important;
-    outline: none !important;
+    box-shadow: none !important;
+    border-radius: 6px !important;
+    transition: none !important;
 }}
-
-/* Dark mode logo override */
-.dark .nav-holder nav a[href*="/home"] {{
-    background-image: url("{home_icon_dark_data_uri}") !important;
+/* Dark top bar: light-colored wordmark */
+html.dark gradio-app nav.svelte-ti537g a[href*="/home"],
+html.dark gradio-app .nav-holder nav a[href*="/home"],
+html.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"],
+body.dark gradio-app nav.svelte-ti537g a[href*="/home"],
+body.dark gradio-app .nav-holder nav a[href*="/home"],
+body.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"],
+html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g a[href*="/home"],
+html:has([class*="gradio-container-"].dark) gradio-app .nav-holder nav a[href*="/home"],
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"],
+.gradio-container.dark gradio-app nav.svelte-ti537g a[href*="/home"],
+.gradio-container.dark gradio-app .nav-holder nav a[href*="/home"],
+.gradio-container.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"],
+[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g a[href*="/home"],
+[class*="gradio-container-"].dark gradio-app .nav-holder nav a[href*="/home"],
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"] {{
+    background-image: url("{_oh_nav_data_uri_dark}") !important;
+}}
+/* Home wordmark: no grey hover/focus chip */
+gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:hover,
+gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:focus-visible,
+gradio-app nav.svelte-ti537g a[href*="/home"]:hover,
+html.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:hover,
+html.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:focus-visible,
+html.dark gradio-app nav.svelte-ti537g a[href*="/home"]:hover,
+body.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:hover,
+body.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:focus-visible,
+body.dark gradio-app nav.svelte-ti537g a[href*="/home"]:hover,
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:hover,
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:focus-visible,
+html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g a[href*="/home"]:hover,
+.gradio-container.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:hover,
+.gradio-container.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:focus-visible,
+.gradio-container.dark gradio-app nav.svelte-ti537g a[href*="/home"]:hover,
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:hover,
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:focus-visible,
+[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g a[href*="/home"]:hover {{
+    background-color: transparent !important;
+}}
+@media (max-width: 768px) {{
+  gradio-app nav.svelte-ti537g a[href*="/home"],
+  gradio-app .nav-holder nav a[href*="/home"],
+  gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"] {{
+    left: 20px !important;
+  }}
+  gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:hover,
+  gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:focus-visible,
+  gradio-app nav.svelte-ti537g a[href*="/home"]:hover {{
+    left: 20px !important;
+  }}
+}}
+/* Active Home (wordmark — route .active) */
+gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].active,
+gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].svelte-ti537g.active {{
+    color: transparent !important;
+    left: 20px !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    margin: auto 0 !important;
+    background-color: #e4e4e7 !important;
+    background-image: url("{_oh_nav_data_uri_light}") !important;
+    background-size: contain !important;
+    background-repeat: no-repeat !important;
+    background-position: left center !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+}}
+html.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].active,
+html.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].svelte-ti537g.active,
+body.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].active,
+body.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].svelte-ti537g.active,
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].active,
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].svelte-ti537g.active,
+.gradio-container.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].active,
+.gradio-container.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].svelte-ti537g.active,
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].active,
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].svelte-ti537g.active {{
+    background-color: hsl(0 0% 12% / 0.95) !important;
+    background-image: url("{_oh_nav_data_uri_dark}") !important;
+}}
+@media (max-width: 768px) {{
+  gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].active,
+  gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].svelte-ti537g.active {{
+    left: 20px !important;
+  }}
+}}
+/* Markdown `---` → <hr>. var(--oh-border) = light #e4e4e7 / dark #242424 (content.py). */
+gradio-app hr, .gradio-container hr, [class*="gradio-container-"] hr {{
+    box-sizing: border-box !important;
+    border: 0 !important;
+    border-top: 1px solid var(--oh-border) !important;
+    color: var(--oh-border) !important;
+    background: transparent !important;
+    background-color: transparent !important;
+    height: 0 !important;
+    opacity: 1 !important;
+}}
+/* Multipage route chips: Gradio 5.30 index bundle sets
+   a.active.svelte-ti537g {{ color: var(--body-text-color); background: var(--block-background-fill) }}.
+   This block is last in final_css; typography matches route chip rules in content.py (13px) for every tab including active. */
+gradio-app nav a.svelte-ti537g.active:not([href*="/home"]) {{
+    color: #fafafa !important;
+    background-color: #18181b !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+    transition: none !important;
+    font-size: 13px !important;
+    line-height: 1.4 !important;
+    font-weight: 400 !important;
+    font-family: var(--oh-font-sans) !important;
+}}
+html.dark gradio-app nav a.svelte-ti537g.active:not([href*="/home"]),
+body.dark gradio-app nav a.svelte-ti537g.active:not([href*="/home"]),
+html:has([class*="gradio-container-"].dark) gradio-app nav a.svelte-ti537g.active:not([href*="/home"]),
+.gradio-container.dark gradio-app nav a.svelte-ti537g.active:not([href*="/home"]),
+[class*="gradio-container-"].dark gradio-app nav a.svelte-ti537g.active:not([href*="/home"]) {{
+    color: #ffffff !important;
+    background-color: hsl(0 0% 12% / 0.95) !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+    transition: none !important;
+    font-size: 13px !important;
+    line-height: 1.4 !important;
+    font-weight: 400 !important;
+    font-family: var(--oh-font-sans) !important;
 }}
 """
+)
 # --- Gradio App Definition ---
 logger.info("Creating Gradio application")
 demo = gr.Blocks(
     theme=theme,
     css=final_css,
-    head=posthog_script + scroll_script + redirect_script + fix_nav_links_script + tooltip_script + dark_mode_script,
+    head=DESIGN_FONTS_LINK
+    + NAV_LOGO_PRELOAD
+    + posthog_script
+    + scroll_script
+    + redirect_script
+    + oh_top_nav_script
+    + fix_nav_links_script
+    + tooltip_script
+    + dark_mode_script,
     title="OpenHands Index",
 )
 
@@ -424,7 +783,16 @@ if __name__ == "__main__":
     # Respect platform port/host if provided (e.g., OpenHands runtime)
     port = int(os.environ.get("PORT", os.environ.get("GRADIO_SERVER_PORT", 7860)))
     host = os.environ.get("HOST", os.environ.get("GRADIO_SERVER_NAME", "0.0.0.0"))
-    logger.info(f"Launching app on {host}:{port}")
-    uvicorn.run(app, host=host, port=port)
+    # Auto-reload: set RELOAD=1 or UVICORN_RELOAD=1 to restart on .py changes (CSS in content.py, etc.)
+    _reload = os.environ.get("UVICORN_RELOAD", os.environ.get("RELOAD", "")).lower() in (
+        "1",
+        "true",
+        "yes",
+    )
+    logger.info(f"Launching app on {host}:{port}" + (" (auto-reload on .py changes)" if _reload else ""))
+    if _reload:
+        uvicorn.run("app:app", host=host, port=port, reload=True)
+    else:
+        uvicorn.run(app, host=host, port=port)
     logger.info("App launched successfully")