Spaces:

build-small-hackathon
/

matchday

Running

App Files Files Community

mzidan000 commited on 20 days ago

Commit

5ad9595

verified ·

1 Parent(s): 50c1172

Upload folder using huggingface_hub

Browse files

Files changed (3) hide show

app.py +50 -3
index.html +250 -94
matchday/render.py +252 -127

app.py CHANGED Viewed

@@ -19,6 +19,7 @@ import json
 import logging
 import os
 import sys
 from datetime import date
 from pathlib import Path
@@ -75,6 +76,27 @@ def _ev(**payload) -> str:
     return json.dumps(payload, ensure_ascii=False)
 def _args_to_trip(a: BuildTripPackagesArgs) -> TripRequest:
     return TripRequest(
         origin_airport=a.origin_airport,
@@ -139,8 +161,15 @@ async def plan_trip(user_text: str) -> str:
     r1: dict = {"tool_calls": []}
     if agent is not None:
         yield _ev(type="commentary", text="🤖 Nemotron is choosing your best options…")
         try:
-            r1 = await agent.run([{"role": "user", "content": user_text}])
         except Exception as exc:
             logger.warning("agent round 1 failed (%s).", exc)
             r1 = {"tool_calls": []}
@@ -178,8 +207,15 @@ async def plan_trip(user_text: str) -> str:
         type="commentary",
         text="✈️ Scanning airlines · 🏨 Finding hotels near BC Place · 🌤️ Checking the match-day forecast…",
     )
     try:
-        result = await build_trip_packages(trip)
     except Exception as exc:
         yield _ev(type="error", text=f"⚠️ {exc}")
         return
@@ -187,7 +223,18 @@ async def plan_trip(user_text: str) -> str:
     yield _ev(type="commentary", text="🗺️ Scoring 3 packages — Nemotron is writing your comparison…")
     explanation = ""
     if agent is not None:
-        explanation = await _agent_explain(agent, user_text, trip, result)
     # Final: the full Layla-competitive render (status + cards + map + timeline).
     # leaflet_preloaded=True → the frontend already loaded Leaflet in <head>; the

 import logging
 import os
 import sys
+import time
 from datetime import date
 from pathlib import Path
     return json.dumps(payload, ensure_ascii=False)
+async def _pulse(coro, holder, message, interval: int = 9):
+    """Run ``coro`` to completion, yielding a commentary heartbeat every
+    ``interval`` seconds (carrying elapsed seconds) so the SSE stream is never
+    silent during a long Modal cold-start or SerpApi phase. Stashes the result
+    in ``holder['result']``; re-raises if ``coro`` raised. Usage::
+        h = {}
+        async for beat in _pulse(coro, h, msg):
+            yield beat
+        value = h["result"]
+    """
+    task = asyncio.ensure_future(coro)
+    start = time.monotonic()
+    while True:
+        done, _ = await asyncio.wait({task}, timeout=interval)
+        if task in done:
+            holder["result"] = task.result()
+            return
+        yield _ev(type="commentary", text=f"{message} ({int(time.monotonic() - start)}s)")
 def _args_to_trip(a: BuildTripPackagesArgs) -> TripRequest:
     return TripRequest(
         origin_airport=a.origin_airport,
     r1: dict = {"tool_calls": []}
     if agent is not None:
         yield _ev(type="commentary", text="🤖 Nemotron is choosing your best options…")
+        h1 = {}
         try:
+            async for beat in _pulse(
+                agent.run([{"role": "user", "content": user_text}]),
+                h1,
+                "🤖 Nemotron is choosing your best options…",
+            ):
+                yield beat
+            r1 = h1["result"]
         except Exception as exc:
             logger.warning("agent round 1 failed (%s).", exc)
             r1 = {"tool_calls": []}
         type="commentary",
         text="✈️ Scanning airlines · 🏨 Finding hotels near BC Place · 🌤️ Checking the match-day forecast…",
     )
+    hb = {}
     try:
+        async for beat in _pulse(
+            build_trip_packages(trip),
+            hb,
+            "✈️ Scanning airlines · 🏨 hotels near BC Place · 🌤️ weather",
+        ):
+            yield beat
+        result = hb["result"]
     except Exception as exc:
         yield _ev(type="error", text=f"⚠️ {exc}")
         return
     yield _ev(type="commentary", text="🗺️ Scoring 3 packages — Nemotron is writing your comparison…")
     explanation = ""
     if agent is not None:
+        he = {}
+        try:
+            async for beat in _pulse(
+                _agent_explain(agent, user_text, trip, result),
+                he,
+                "🗺️ Scoring 3 packages — Nemotron is writing your comparison…",
+            ):
+                yield beat
+            explanation = he["result"]
+        except Exception as exc:
+            logger.warning("explanation round failed (%s).", exc)
+            explanation = ""
     # Final: the full Layla-competitive render (status + cards + map + timeline).
     # leaflet_preloaded=True → the frontend already loaded Leaflet in <head>; the

index.html CHANGED Viewed

@@ -8,116 +8,174 @@
 <!-- Leaflet preloaded in <head> so the injected map's inline init runs instantly (N1). -->
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 <style>
   :root{
-    --violet:#7c3aed; --violet-d:#6d28d9; --emerald:#10b981; --amber:#f59e0b;
-    --ink:#111827; --ink2:#374151; --mut:#6b7280; --mut2:#9ca3af;
-    --line:#e5e7eb; --panel:#f9fafb; --gray:#f3f4f6;
   }
   *{box-sizing:border-box;}
   html,body{margin:0;height:100%;}
   body{
     font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
-    color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased;
   }
-  ::-webkit-scrollbar{width:9px;height:9px;}
-  ::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:6px;}
   /* ── Top bar ─────────────────────────────────────────── */
   .topbar{
-    display:flex;align-items:center;gap:14px;padding:12px 20px;
-    border-bottom:1px solid var(--line);
-    background:linear-gradient(100deg,#0f172a,#1e3a8a);color:#fff;position:relative;z-index:5;
   }
-  .topbar .logo{font-size:21px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;}
-  .topbar .tag{font-size:13px;opacity:.85;font-weight:500;}
   .topbar .sp{flex:1;}
-  .topbar .pill{font-size:11px;font-weight:600;background:rgba(255,255,255,.14);
-    padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.22);}
   .topbar .pill b{color:#c4b5fd;}
   /* ── 3-column layout ─────────────────────────────────── */
-  .app{display:grid;grid-template-columns:minmax(320px,35%) minmax(0,45%) minmax(180px,20%);
-       height:calc(100vh - 53px);}
   .col{display:flex;flex-direction:column;min-height:0;min-width:0;}
-  .chat{border-right:1px solid var(--line);}
   .sidebar{border-left:1px solid var(--line);background:var(--panel);overflow:auto;}
   /* ── Chat column ─────────────────────────────────────── */
-  #chat{flex:1;overflow-y:auto;padding:18px 18px 8px;display:flex;flex-direction:column;gap:14px;}
-  .hero{background:var(--gray);border:1px solid var(--line);border-radius:14px;padding:16px;}
-  .hero h2{margin:0 0 6px;font-size:15px;}
-  .hero p{margin:0;font-size:13px;color:var(--mut);line-height:1.5;}
-  .msg{display:flex;gap:10px;max-width:92%;animation:fade .25s ease;}
   .msg.user{align-self:flex-end;flex-direction:row-reverse;}
-  .a-avatar{width:30px;height:30px;border-radius:50%;background:#1e3a8a;color:#fff;
-    display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 30px;}
-  .a-body{background:var(--gray);border:1px solid var(--line);border-radius:14px;
-    padding:11px 14px;min-width:0;}
-  .msg.user .a-body{background:var(--violet);color:#fff;border-color:var(--violet-d);}
   .a-content{font-size:14px;line-height:1.5;}
   .a-beat{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink2);
-    font-weight:500;padding-top:2px;}
-  .spin{display:inline-block;animation:spin 1s linear infinite;color:var(--violet);}
   @keyframes spin{to{transform:rotate(360deg);}}
   @keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
-  .green{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:12px;
-    padding:10px 13px;font-size:14px;font-weight:600;}
-  .clarify{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;border-radius:12px;padding:12px 14px;font-size:14.5px;}
-  .err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:12px;padding:11px 13px;font-size:14px;}
-  .nemotron-note{font-size:11px;color:var(--mut2);margin-top:7px;font-weight:600;letter-spacing:.02em;}
-  .msg.user .nemotron-note,.msg.user .a-beat{color:rgba(255,255,255,.92);}
   /* input row */
-  .composer{border-top:1px solid var(--line);padding:12px 14px;background:#fff;}
-  .composer textarea{width:100%;border:1px solid #d1d5db;border-radius:12px;padding:11px 13px;
-    font:inherit;font-size:14px;resize:none;outline:none;min-height:48px;}
-  .composer textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.15);}
-  .composer .row{display:flex;align-items:center;gap:8px;margin-top:8px;}
-  .examples{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 10px;}
-  .chip{font-size:12px;background:#fff;border:1px solid var(--line);border-radius:999px;
-    padding:5px 11px;color:var(--ink2);cursor:pointer;transition:.15s;}
-  .chip:hover{border-color:var(--violet);color:var(--violet);}
-  button.primary{background:var(--violet);color:#fff;border:0;border-radius:10px;padding:9px 16px;
-    font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
-  button.primary:hover{background:var(--violet-d);}
-  button.primary:disabled{opacity:.55;cursor:not-allowed;}
-  .hint{font-size:12px;color:var(--mut);}
   /* ── Result column ───────────────────────────────────── */
-  .result{overflow-y:auto;}
-  #result{padding:16px 18px 24px;}
   .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
-    height:100%;text-align:center;color:var(--mut2);padding:30px;}
-  .empty .big{font-size:46px;margin-bottom:10px;}
-  .empty h3{margin:0 0 6px;font-size:16px;color:var(--ink2);}
-  .empty p{margin:0;font-size:13px;max-width:320px;line-height:1.5;}
   /* ── Sidebar ─────────────────────────────────────────── */
-  .sidebar .sec{padding:16px 16px 14px;border-bottom:1px solid var(--line);}
-  .sidebar h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);}
   .brain{display:flex;gap:10px;align-items:flex-start;}
-  .brain .b{font-size:20px;}
-  .brain .t{font-size:12.5px;line-height:1.45;color:var(--ink2);}
   .brain .t b{color:var(--violet);}
-  .legend-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2);margin:5px 0;}
-  .dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
-  .dot.live{background:var(--emerald);}
   .dot.fallback{background:var(--amber);}
   .badges{display:flex;flex-wrap:wrap;gap:5px;}
-  .badge{font-size:10.5px;font-weight:600;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;
-    border-radius:6px;padding:3px 7px;}
-  .fact{font-size:12.5px;color:var(--ink2);line-height:1.5;margin:4px 0;}
   .fact b{color:var(--ink);}
   /* full-screen map */
   #matchday-map.fs{position:fixed!important;inset:0!important;z-index:99998!important;
     height:100vh!important;width:100vw!important;border-radius:0!important;}
   #md-fs-close{position:fixed;top:16px;right:18px;z-index:99999;background:#fff;color:var(--ink);
-    font-weight:700;border:0;border-radius:10px;padding:9px 15px;cursor:pointer;font-size:14px;
-    box-shadow:0 4px 14px rgba(0,0,0,.25);display:none;}
   #md-fs-close.show{display:block;}
   @media (max-width:980px){
@@ -130,10 +188,10 @@
 </head>
 <body>
   <header class="topbar">
-    <div class="logo">⚽ MatchDay</div>
     <div class="tag">Your AI trip planner for the <b>2026 FIFA World Cup · Vancouver</b></div>
     <div class="sp"></div>
-    <span class="pill">Brain <b>Nemotron-3-Nano-30B</b> · Hands <b>Python</b> · <b>gradio.Server</b></span>
   </header>
   <div class="app">
@@ -157,7 +215,7 @@
           aria-label="Describe your trip"></textarea>
         <div class="row">
           <button class="primary" id="send" onclick="runTrip()">🏈 Plan my trip</button>
-          <span class="hint">Enter to send · Enter+Shift for newline</span>
         </div>
       </div>
     </section>
@@ -168,7 +226,7 @@
         <div class="empty">
           <div class="big">🏟️</div>
           <h3>Your trip packages will appear here</h3>
-          <p>Once you send your request, Nemotron picks the tools and Python scores real flights, hotels, weather and nearby spots — ranked on an interactive map.</p>
         </div>
       </div>
     </section>
@@ -181,7 +239,7 @@
           <div class="b">🧠</div>
           <div class="t"><b>Brain:</b> Nemotron-3-Nano-30B (3B-active MoE) on Modal A100. It chooses the tools and writes the comparisons. It <b>never</b> calls an API or names a price.</div>
         </div>
-        <div class="brain" style="margin-top:10px;">
           <div class="b">🤲</div>
           <div class="t"><b>Hands:</b> deterministic Python calls SerpApi / Open-Meteo / OpenStreetMap, scores packages with a fixed formula, and tags every value with provenance.</div>
         </div>
@@ -219,11 +277,25 @@ const EXAMPLES = [
   "Take me from Ottawa to Vancouver for Canada vs Qatar on 2026-06-26, budget",
   "From Halifax, Canada vs Morocco June 18, couple, luxury",
 ];
-// Pre-fill the first example for instant demo.
 document.getElementById("prompt").value = EXAMPLES[0];
 let running = false;
-let resultHandled = false;   // the result event repeats on `complete` — render it once
 const chatEl = document.getElementById("chat");
 const resultEl = document.getElementById("result");
 const promptEl = document.getElementById("prompt");
@@ -245,16 +317,23 @@ function addAssistantBubble(){
     `<div class="a-avatar">🤖</div>
      <div class="a-body">
        <div class="a-content"></div>
-       <div class="a-beat"><span class="spin">◐</span><span class="beat-text">Reading your trip request…</span></div>
      </div>`;
   chatEl.appendChild(m); chatEl.scrollTop = chatEl.scrollHeight;
   return m;
 }
-function setBeat(bubble, text){
-  const beat = bubble.querySelector(".a-beat");
-  if (!beat) return;
-  beat.style.display = "flex";
-  beat.querySelector(".beat-text").textContent = text;
 }
 function hideBeat(bubble){
   const beat = bubble.querySelector(".a-beat");
@@ -262,26 +341,72 @@ function hideBeat(bubble){
 }
 function esc(s){ const d=document.createElement("div"); d.textContent=s==null?"":String(s); return d.innerHTML; }
-// ── Streaming via raw SSE (verified wire format) ───────
 function handleEvent(ev, bubble){
   if (!ev) return;
   if (ev.type === "commentary"){
-    setBeat(bubble, ev.text);
   } else if (ev.type === "greenlight"){
     bubble.querySelector(".a-content").innerHTML =
       `<div class="green">✅ Planning your trip: ${esc(ev.text)}</div>`;
   } else if (ev.type === "clarify"){
     bubble.querySelector(".a-content").innerHTML = `<div class="clarify">💬 ${esc(ev.text)}</div>`;
-    hideBeat(bubble);
   } else if (ev.type === "error"){
     bubble.querySelector(".a-content").innerHTML = `<div class="err">${esc(ev.text)}</div>`;
-    hideBeat(bubble);
   } else if (ev.type === "result"){
-    if (resultHandled) return;       // `complete` re-emits the final yield — render once
     resultHandled = true;
-    hideBeat(bubble);
     bubble.querySelector(".a-content").innerHTML =
-      `<div class="green">✅ Built 3 ranked packages → see them on the map</div>`;
     resultEl.innerHTML = ev.html;
     activateScripts(resultEl);           // re-init the injected Leaflet map
     if (ev.explanation && ev.explanation.trim()){
@@ -290,7 +415,7 @@ function handleEvent(ev, bubble){
       const safe = esc(ev.explanation).replace(/\n/g,"<br>");
       nb.innerHTML =
         `<div class="a-avatar">🤖</div><div class="a-body">
-           <div class="a-content"><b style="color:#1e3a8a">🤖 Nemotron compares your options</b><br>${safe}
              <div class="nemotron-note">written by Nemotron-3-Nano-30B · grounded in the scored data</div>
            </div></div>`;
       chatEl.appendChild(nb);
@@ -298,6 +423,12 @@ function handleEvent(ev, bubble){
     chatEl.scrollTop = chatEl.scrollHeight;
   }
 }
 function activateScripts(root){
   // innerHTML-inserted <script> tags don't auto-run — re-create them so the
@@ -309,38 +440,63 @@ function activateScripts(root){
   });
 }
 async function runTrip(forcedText){
   if (running) return;
   const text = (forcedText == null ? promptEl.value : forcedText).trim();
   if (!text) return;
-  running = true; sendBtn.disabled = true;
   addUserBubble(text);
   const bubble = addAssistantBubble();
   try{
     const resp = await fetch("/gradio_api/call/plan_trip", {
       method: "POST", headers: {"Content-Type":"application/json"},
       body: JSON.stringify({ data: [text] }),
     });
     const j = await resp.json();
     const eventId = j && j.event_id;
-    if (!eventId){ bubble.querySelector(".a-content").innerHTML = `<div class="err">No event id returned from the queue.</div>`; hideBeat(bubble); return; }
     const es = new EventSource("/gradio_api/call/plan_trip/" + eventId);
     es.addEventListener("generating", (e)=>{
-      try{ const arr = JSON.parse(e.data); handleEvent(JSON.parse(arr[0]), bubble); }catch(_){}
     });
     es.addEventListener("complete", (e)=>{
       try{ const arr = JSON.parse(e.data); handleEvent(arr && arr[0] ? JSON.parse(arr[0]) : null, bubble); }catch(_){}
       es.close(); finish();
     });
-    es.addEventListener("error", ()=>{ es.close(); finish(); });
   }catch(err){
-    bubble.querySelector(".a-content").innerHTML = `<div class="err">⚠️ ${esc(err.message)}</div>`;
-    hideBeat(bubble); finish();
   }
 }
-function finish(){ running = false; sendBtn.disabled = false; resultHandled = false; }
 // ── Full-screen map (Layla frame 24) ───────────────────
 function matchdayFullscreen(on){

 <!-- Leaflet preloaded in <head> so the injected map's inline init runs instantly (N1). -->
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<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;700;800;900&display=swap" rel="stylesheet">
 <style>
   :root{
+    --violet:#7c3aed; --violet-d:#6d28d9; --violet-l:#ede9fe;
+    --emerald:#10b981; --emerald-d:#047857;
+    --amber:#f59e0b;
+    --ink:#0f172a; --ink2:#374151; --mut:#6b7280; --mut2:#9ca3af;
+    --line:#e8eaee; --line2:#eef0f3; --panel:#f9fafb; --gray:#f3f4f6;
+    --bg:#f7f8fa; --surface:#ffffff;
+    --shadow-sm:0 1px 2px rgba(17,24,39,.04),0 2px 6px -2px rgba(17,24,39,.08);
+    --shadow-md:0 1px 2px rgba(17,24,39,.04),0 8px 22px -12px rgba(17,24,39,.16);
   }
   *{box-sizing:border-box;}
   html,body{margin:0;height:100%;}
   body{
     font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+    color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
+    text-rendering:optimizeLegibility;
   }
+  ::-webkit-scrollbar{width:10px;height:10px;}
+  ::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:8px;border:2px solid var(--bg);}
+  ::-webkit-scrollbar-thumb:hover{background:#b9c0c9;}
   /* ── Top bar ─────────────────────────────────────────── */
   .topbar{
+    display:flex;align-items:center;gap:14px;padding:13px 22px;
+    background:linear-gradient(100deg,#0f172a 0%,#1e293b 45%,#1e3a8a 100%);color:#fff;
+    position:relative;z-index:5;box-shadow:0 2px 14px rgba(15,23,42,.18);
   }
+  .topbar .logo{font-size:21px;font-weight:800;letter-spacing:-.025em;display:flex;align-items:center;gap:9px;}
+  .topbar .logo .ball{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));}
+  .topbar .tag{font-size:13px;opacity:.82;font-weight:500;}
+  .topbar .tag b{color:#c4b5fd;font-weight:600;}
   .topbar .sp{flex:1;}
+  .topbar .pill{font-size:11.5px;font-weight:600;background:rgba(255,255,255,.10);
+    padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
+    display:inline-flex;align-items:center;gap:8px;}
   .topbar .pill b{color:#c4b5fd;}
+  .topbar .live-dot{width:7px;height:7px;border-radius:50%;background:#34d399;
+    box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2s infinite;}
+  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5);}70%{box-shadow:0 0 0 7px rgba(52,211,153,0);}100%{box-shadow:0 0 0 0 rgba(52,211,153,0);}}
   /* ── 3-column layout ─────────────────────────────────── */
+  .app{display:grid;grid-template-columns:minmax(330px,35%) minmax(0,45%) minmax(190px,21%);
+       height:calc(100vh - 57px);}
   .col{display:flex;flex-direction:column;min-height:0;min-width:0;}
+  .chat{border-right:1px solid var(--line);background:var(--bg);}
   .sidebar{border-left:1px solid var(--line);background:var(--panel);overflow:auto;}
   /* ── Chat column ─────────────────────────────────────── */
+  #chat{flex:1;overflow-y:auto;padding:20px 18px 10px;display:flex;flex-direction:column;gap:15px;}
+  .hero{background:var(--surface);border:1px solid var(--line2);border-radius:16px;padding:17px 18px;
+    box-shadow:var(--shadow-sm);}
+  .hero h2{margin:0 0 7px;font-size:15.5px;font-weight:800;letter-spacing:-.01em;}
+  .hero p{margin:0;font-size:13px;color:var(--mut);line-height:1.55;}
+  .msg{display:flex;gap:10px;max-width:94%;animation:fade .3s ease;}
   .msg.user{align-self:flex-end;flex-direction:row-reverse;}
+  .a-avatar{width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,#1e3a8a,#312e81);
+    color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 31px;
+    box-shadow:var(--shadow-sm);}
+  .a-body{background:var(--surface);border:1px solid var(--line2);border-radius:16px;
+    padding:11px 14px;min-width:0;box-shadow:var(--shadow-sm);}
+  .msg.user .a-body{background:linear-gradient(135deg,var(--violet),var(--violet-d));color:#fff;border-color:transparent;box-shadow:0 6px 16px -6px rgba(124,58,237,.5);}
   .a-content{font-size:14px;line-height:1.5;}
   .a-beat{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink2);
+    font-weight:600;padding-top:3px;flex-wrap:wrap;}
+  .spin{display:inline-block;animation:spin 1s linear infinite;color:var(--violet);font-size:14px;}
   @keyframes spin{to{transform:rotate(360deg);}}
   @keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
+  .elapsed{font-size:12px;color:var(--violet);font-weight:700;font-variant-numeric:tabular-nums;
+    background:var(--violet-l);padding:1px 8px;border-radius:999px;}
+  .green{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:1px solid #a7f3d0;color:#065f46;
+    border-radius:12px;padding:10px 13px;font-size:14px;font-weight:700;}
+  .clarify{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.5;}
+  .err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:12px;padding:11px 13px;font-size:14px;line-height:1.5;}
+  .retry-btn{margin-top:9px;background:#fff;border:1px solid var(--violet);color:var(--violet);
+    border-radius:9px;padding:7px 14px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;
+    display:inline-flex;align-items:center;gap:6px;transition:.15s;}
+  .retry-btn:hover{background:var(--violet-l);}
+  .nemotron-note{font-size:11px;color:var(--mut2);margin-top:8px;font-weight:600;letter-spacing:.02em;}
   /* input row */
+  .composer{border-top:1px solid var(--line);padding:12px 16px 14px;background:var(--surface);}
+  .composer textarea{width:100%;border:1px solid #d6d9df;border-radius:13px;padding:12px 14px;
+    font:inherit;font-size:14px;resize:none;outline:none;min-height:50px;background:var(--bg);
+    transition:.15s;line-height:1.45;}
+  .composer textarea:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(124,58,237,.13);background:#fff;}
+  .composer .row{display:flex;align-items:center;gap:9px;margin-top:9px;}
+  .examples{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 8px;}
+  .chip{font-size:12px;background:var(--surface);border:1px solid var(--line2);border-radius:999px;
+    padding:6px 12px;color:var(--ink2);cursor:pointer;transition:.15s;box-shadow:var(--shadow-sm);}
+  .chip:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-1px);}
+  button.primary{background:linear-gradient(135deg,var(--violet),var(--violet-d));color:#fff;border:0;
+    border-radius:11px;padding:10px 17px;font:inherit;font-weight:700;cursor:pointer;
+    display:inline-flex;align-items:center;gap:7px;box-shadow:0 6px 16px -6px rgba(124,58,237,.55);
+    transition:.15s;}
+  button.primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px -6px rgba(124,58,237,.6);}
+  button.primary:disabled{opacity:.55;cursor:not-allowed;transform:none;}
+  .hint{font-size:11.5px;color:var(--mut2);}
   /* ── Result column ───────────────────────────────────── */
+  .result{overflow-y:auto;background:var(--bg);}
+  #result{padding:18px 20px 28px;}
   .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
+    height:100%;text-align:center;color:var(--mut2);padding:40px 30px;}
+  .empty .big{font-size:50px;margin-bottom:14px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.08));}
+  .empty h3{margin:0 0 8px;font-size:17px;color:var(--ink2);font-weight:700;}
+  .empty p{margin:0;font-size:13.5px;max-width:340px;line-height:1.55;}
+  /* ── "Building your trip" skeleton state (premium wait UX) ── */
+  .building{padding:2px 0;}
+  .build-head{display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,#0f172a,#1e3a8a);
+    color:#fff;border-radius:16px;padding:14px 17px;margin-bottom:18px;box-shadow:var(--shadow-md);
+    flex-wrap:wrap;}
+  .build-head .spin{color:#a5b4fc;}
+  .build-text{font-size:14px;font-weight:700;flex:1;min-width:120px;}
+  .build-head .elapsed{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.18);}
+  .cold-hint{font-size:12.5px;color:#c7d2fe;background:rgba(255,255,255,.08);border-radius:10px;
+    padding:8px 12px;margin-top:8px;line-height:1.45;width:100%;border:1px solid rgba(255,255,255,.10);}
+  @keyframes shimmer{100%{transform:translateX(100%);}}
+  .sk{position:relative;overflow:hidden;background:#e9ecf2;border-radius:13px;}
+  .sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
+    background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.5s infinite;}
+  .sk-h{height:13px;margin-bottom:10px;}
+  .sk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:15px;margin-bottom:22px;}
+  .sk-card{background:var(--surface);border:1px solid var(--line2);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);overflow:hidden;}
+  .sk-card .sk{margin-bottom:9px;}
+  .sk-card .sk.big{height:30px;width:60%;margin-bottom:14px;}
+  .sk-card .sk.line{height:12px;}
+  .sk-card .sk.line.w80{width:80%;}
+  .sk-card .sk.line.w60{width:60%;}
+  .sk-map{height:300px;border-radius:18px;margin-bottom:22px;}
+  .sk-tlrow{background:var(--surface);border:1px solid var(--line2);border-radius:16px;padding:15px;
+    display:flex;gap:14px;align-items:center;margin-bottom:11px;box-shadow:var(--shadow-sm);overflow:hidden;}
+  .sk-tlrow .sq{width:32px;height:32px;border-radius:10px;flex:0 0 32px;}
+  .sk-tlrow .ln{flex:1;}
+  .sk-tlrow .ln .sk{height:12px;margin-bottom:7px;}
+  .sk-tlrow .ln .sk.w50{width:50%;}
   /* ── Sidebar ─────────────────────────────────────────── */
+  .sidebar .sec{padding:16px 16px 15px;border-bottom:1px solid var(--line);}
+  .sidebar h4{margin:0 0 9px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);font-weight:800;}
   .brain{display:flex;gap:10px;align-items:flex-start;}
+  .brain .b{font-size:20px;line-height:1.2;}
+  .brain .t{font-size:12.5px;line-height:1.5;color:var(--ink2);}
   .brain .t b{color:var(--violet);}
+  .legend-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink2);margin:6px 0;}
+  .dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 9px;}
+  .dot.live{background:var(--emerald);box-shadow:0 0 0 2px rgba(16,185,129,.2);}
   .dot.fallback{background:var(--amber);}
   .badges{display:flex;flex-wrap:wrap;gap:5px;}
+  .badge{font-size:10.5px;font-weight:700;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;
+    border-radius:7px;padding:3px 8px;}
+  .fact{font-size:12.5px;color:var(--ink2);line-height:1.5;margin:5px 0;}
   .fact b{color:var(--ink);}
   /* full-screen map */
   #matchday-map.fs{position:fixed!important;inset:0!important;z-index:99998!important;
     height:100vh!important;width:100vw!important;border-radius:0!important;}
   #md-fs-close{position:fixed;top:16px;right:18px;z-index:99999;background:#fff;color:var(--ink);
+    font-weight:700;border:0;border-radius:11px;padding:9px 15px;cursor:pointer;font-size:14px;
+    box-shadow:0 6px 18px rgba(0,0,0,.25);display:none;}
   #md-fs-close.show{display:block;}
   @media (max-width:980px){
 </head>
 <body>
   <header class="topbar">
+    <div class="logo"><span class="ball">⚽</span> MatchDay</div>
     <div class="tag">Your AI trip planner for the <b>2026 FIFA World Cup · Vancouver</b></div>
     <div class="sp"></div>
+    <span class="pill"><span class="live-dot"></span>Brain <b>Nemotron-3-Nano-30B</b> · Hands <b>Python</b> · <b>gradio.Server</b></span>
   </header>
   <div class="app">
           aria-label="Describe your trip"></textarea>
         <div class="row">
           <button class="primary" id="send" onclick="runTrip()">🏈 Plan my trip</button>
+          <span class="hint">Enter to send · Shift+Enter for a newline</span>
         </div>
       </div>
     </section>
         <div class="empty">
           <div class="big">🏟️</div>
           <h3>Your trip packages will appear here</h3>
+          <p>Send your request and Nemotron picks the tools while Python scores real flights, hotels, weather and nearby spots — ranked on an interactive map.</p>
         </div>
       </div>
     </section>
           <div class="b">🧠</div>
           <div class="t"><b>Brain:</b> Nemotron-3-Nano-30B (3B-active MoE) on Modal A100. It chooses the tools and writes the comparisons. It <b>never</b> calls an API or names a price.</div>
         </div>
+        <div class="brain" style="margin-top:11px;">
           <div class="b">🤲</div>
           <div class="t"><b>Hands:</b> deterministic Python calls SerpApi / Open-Meteo / OpenStreetMap, scores packages with a fixed formula, and tags every value with provenance.</div>
         </div>
   "Take me from Ottawa to Vancouver for Canada vs Qatar on 2026-06-26, budget",
   "From Halifax, Canada vs Morocco June 18, couple, luxury",
 ];
 document.getElementById("prompt").value = EXAMPLES[0];
+// Phased progress messages (frontend-driven, carry perceived progress while the
+// backend stream is silent during the Modal cold-start gap).
+const PHASES = [
+  {t:0,  m:"Reading your trip request…"},
+  {t:4,  m:"🤖 Nemotron is choosing the right tools…"},
+  {t:14, m:"✈️ Scanning airlines for the cheapest route…"},
+  {t:30, m:"🏨 Finding hotels closest to BC Place…"},
+  {t:48, m:"🌤️ Checking the match-day forecast…"},
+  {t:68, m:"🗺️ Scoring 3 packages & ranking them…"},
+  {t:95, m:"✍️ Nemotron is writing your comparison…"},
+];
 let running = false;
+let resultHandled = false;     // the result event repeats on `complete` — render once
+let elapsedTimer = null;
+let lastRealAt = 0;            // timestamp of last real stream event (ms)
+let lastRealMsg = "";
 const chatEl = document.getElementById("chat");
 const resultEl = document.getElementById("result");
 const promptEl = document.getElementById("prompt");
     `<div class="a-avatar">🤖</div>
      <div class="a-body">
        <div class="a-content"></div>
+       <div class="a-beat"><span class="spin">◐</span><span class="beat-text">Reading your trip request…</span><span class="elapsed" style="display:none">· 0:00</span></div>
      </div>`;
   chatEl.appendChild(m); chatEl.scrollTop = chatEl.scrollHeight;
   return m;
 }
+function setStatus(bubble, text){
+  const beat = bubble.querySelector(".beat-text");
+  if (beat) beat.textContent = text;
+  const bh = document.querySelector(".build-text");
+  if (bh) bh.textContent = text;
+}
+function setElapsed(bubble, secs){
+  const fmt = Math.floor(secs/60) + ":" + String(secs%60).padStart(2,"0");
+  const e = bubble.querySelector(".elapsed");
+  if (e){ e.textContent = "· " + fmt; e.style.display = "inline-block"; }
+  const be = document.querySelector(".build-head .elapsed");
+  if (be) be.textContent = "· " + fmt;
 }
 function hideBeat(bubble){
   const beat = bubble.querySelector(".a-beat");
 }
 function esc(s){ const d=document.createElement("div"); d.textContent=s==null?"":String(s); return d.innerHTML; }
+// ── Skeleton "building your trip" state ────────────────
+function showSkeleton(bubble){
+  resultEl.innerHTML =
+    `<div class="building">
+       <div class="build-head">
+         <span class="spin">◐</span>
+         <span class="build-text">Reading your trip request…</span>
+         <span class="elapsed">· 0:00</span>
+         <div class="cold-hint" style="display:none"></div>
+       </div>
+       <div class="sk-cards">
+         ${`<div class="sk-card"><div class="sk big"></div><div class="sk line w80"></div><div class="sk line w60"></div><div class="sk line"></div><div class="sk line w80"></div></div>`.repeat(3)}
+       </div>
+       <div class="sk sk-map"></div>
+       ${`<div class="sk-tlrow"><div class="sk sq"></div><div class="ln"><div class="sk w50"></div><div class="sk w80"></div></div></div>`.repeat(4)}
+     </div>`;
+}
+// ── Elapsed timer + phased progress + cold-start honesty ─
+function startTimer(bubble){
+  stopTimer();
+  const t0 = performance.now();
+  elapsedTimer = setInterval(()=>{
+    const secs = Math.floor((performance.now()-t0)/1000);
+    setElapsed(bubble, secs);
+    // phased fallback if no real event recently
+    if (performance.now() - lastRealAt > 6000){
+      let ph = PHASES[0].m;
+      for (const p of PHASES){ if (secs >= p.t) ph = p.m; }
+      setStatus(bubble, ph);
+    }
+    // cold-start honesty after ~20s
+    const hint = document.querySelector(".cold-hint");
+    if (hint && secs >= 20 && hint.dataset.shown !== "1"){
+      hint.dataset.shown = "1";
+      hint.style.display = "block";
+      hint.textContent = "⏳ Warming up Nemotron-3-Nano-30B on Modal — the first query after idle can take ~1–2 min. It's working; the packages will stream in as soon as they're scored.";
+    }
+  }, 1000);
+}
+function stopTimer(){ if (elapsedTimer){ clearInterval(elapsedTimer); elapsedTimer = null; } }
+// ── Streaming via raw SSE ───────────────────────────────
 function handleEvent(ev, bubble){
   if (!ev) return;
   if (ev.type === "commentary"){
+    lastRealAt = performance.now(); lastRealMsg = ev.text || "";
+    setStatus(bubble, lastRealMsg);
   } else if (ev.type === "greenlight"){
+    lastRealAt = performance.now();
     bubble.querySelector(".a-content").innerHTML =
       `<div class="green">✅ Planning your trip: ${esc(ev.text)}</div>`;
+    setStatus(bubble, "✈️ Scanning airlines · 🏨 hotels near BC Place · 🌤️ weather…");
   } else if (ev.type === "clarify"){
     bubble.querySelector(".a-content").innerHTML = `<div class="clarify">💬 ${esc(ev.text)}</div>`;
+    hideBeat(bubble); stopTimer(); clearSkeleton();
   } else if (ev.type === "error"){
     bubble.querySelector(".a-content").innerHTML = `<div class="err">${esc(ev.text)}</div>`;
+    hideBeat(bubble); stopTimer(); clearSkeleton();
   } else if (ev.type === "result"){
+    if (resultHandled) return;        // `complete` re-emits the final yield — render once
     resultHandled = true;
+    lastRealAt = performance.now();
+    hideBeat(bubble); stopTimer();
     bubble.querySelector(".a-content").innerHTML =
+      `<div class="green">✅ Built 3 ranked packages — see them on the map →</div>`;
     resultEl.innerHTML = ev.html;
     activateScripts(resultEl);           // re-init the injected Leaflet map
     if (ev.explanation && ev.explanation.trim()){
       const safe = esc(ev.explanation).replace(/\n/g,"<br>");
       nb.innerHTML =
         `<div class="a-avatar">🤖</div><div class="a-body">
+           <div class="a-content"><b style="color:#3730a3">🤖 Nemotron compares your options</b><br>${safe}
              <div class="nemotron-note">written by Nemotron-3-Nano-30B · grounded in the scored data</div>
            </div></div>`;
       chatEl.appendChild(nb);
     chatEl.scrollTop = chatEl.scrollHeight;
   }
 }
+function clearSkeleton(){
+  const b = resultEl.querySelector(".building");
+  if (b && !resultHandled){
+    resultEl.innerHTML = `<div class="empty"><div class="big">🏟️</div><h3>Your trip packages will appear here</h3><p>Send your request and Nemotron picks the tools while Python scores real flights, hotels, weather and nearby spots.</p></div>`;
+  }
+}
 function activateScripts(root){
   // innerHTML-inserted <script> tags don't auto-run — re-create them so the
   });
 }
+function showStreamError(bubble, text, retryText){
+  stopTimer();
+  hideBeat(bubble);
+  clearSkeleton();
+  const c = bubble.querySelector(".a-content");
+  c.innerHTML = `<div class="err">⚠️ ${esc(text||"Connection to the agent was interrupted.")}</div>
+    <button class="retry-btn" type="button">↻ Try again</button>`;
+  c.querySelector(".retry-btn").addEventListener("click", ()=>{ runTrip(retryText); });
+}
 async function runTrip(forcedText){
   if (running) return;
   const text = (forcedText == null ? promptEl.value : forcedText).trim();
   if (!text) return;
+  running = true; sendBtn.disabled = true; resultHandled = false;
+  lastRealAt = 0; lastRealMsg = "";
   addUserBubble(text);
   const bubble = addAssistantBubble();
+  showSkeleton(bubble);
+  startTimer(bubble);
+  let completed = false;
   try{
     const resp = await fetch("/gradio_api/call/plan_trip", {
       method: "POST", headers: {"Content-Type":"application/json"},
       body: JSON.stringify({ data: [text] }),
     });
+    if (!resp.ok){ throw new Error("Server returned HTTP " + resp.status); }
     const j = await resp.json();
     const eventId = j && j.event_id;
+    if (!eventId){ throw new Error("No event id returned from the queue."); }
     const es = new EventSource("/gradio_api/call/plan_trip/" + eventId);
     es.addEventListener("generating", (e)=>{
+      try{ const arr = JSON.parse(e.data); handleEvent(JSON.parse(arr[0]), bubble); }
+      catch(err){ console.warn("MatchDay: skipped a malformed stream chunk", err); }
     });
     es.addEventListener("complete", (e)=>{
+      completed = true;
       try{ const arr = JSON.parse(e.data); handleEvent(arr && arr[0] ? JSON.parse(arr[0]) : null, bubble); }catch(_){}
       es.close(); finish();
     });
+    // gradio keepalive (ignored) — just mark the stream alive
+    es.addEventListener("heartbeat", ()=>{ lastRealAt = performance.now(); });
+    es.addEventListener("error", ()=>{
+      es.close();
+      if (completed) return;                  // clean end — EventSource fires error on close
+      if (resultHandled) return;              // already rendered; nothing to do
+      showStreamError(bubble, "Connection to the agent dropped mid-stream.", text);
+      finish();
+    });
   }catch(err){
+    showStreamError(bubble, err && err.message ? err.message : "Request failed.", text);
+    finish();
   }
 }
+function finish(){ running = false; sendBtn.disabled = false; resultHandled = false; stopTimer(); }
 // ── Full-screen map (Layla frame 24) ───────────────────
 function matchdayFullscreen(on){

matchday/render.py CHANGED Viewed

@@ -1,10 +1,11 @@
-"""HTML rendering for MatchDay — Layla-competitive cards + Leaflet map.
-Pure functions: a ``TripPackageResult`` -> HTML strings for ``gr.HTML`` panels.
 Every price / hotel / weather reading carries a provenance badge (I4) so judges
 can verify nothing is hallucinated: "● live" (serpapi/openmeteo/osm) vs
-"example data" (fallback). The look is custom (Off-Brand spirit), not the
-default Gradio chrome.
 """
 from __future__ import annotations
@@ -17,10 +18,21 @@ from matchday.trip_tool import TripPackageResult
 BC_PLACE_LAT = 49.2827
 BC_PLACE_LON = -123.1207
 _LABEL_COLOR = {
     "Cheapest": "#16a34a",
     "Safest Arrival": "#2563eb",
-    "Closest to Stadium": "#9333ea",
 }
 # WMO weather code -> emoji (subset; unknown -> 🌡️).
@@ -31,45 +43,115 @@ _WMO_ICON: dict[int, str] = {
     95: "⛈️", 96: "⛈️", 99: "⛈️",
 }
 _CSS = """
 <style>
-.md-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#0f172a;}
-.md-status{padding:10px 14px;border-radius:10px;margin:8px 0;font-weight:600;}
-.md-status.complete{background:#dcfce7;color:#166534;}
-.md-status.partial{background:#fef9c3;color:#854d0e;}
-.md-status.failed{background:#fee2e2;color:#991b1b;}
-.md-cards{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0;}
-.md-card{flex:1 1 300px;min-width:280px;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);}
-.md-card-head{padding:12px 14px;color:#fff;}
-.md-card-head .lbl{font-size:13px;text-transform:uppercase;letter-spacing:.06em;opacity:.9;}
-.md-card-head .price{font-size:26px;font-weight:800;margin-top:2px;}
-.md-card-body{padding:12px 14px;display:grid;gap:8px;}
-.md-row{font-size:13px;line-height:1.35;}
-.md-row b{color:#334155;}
-.md-badge{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle;margin-left:4px;}
-.md-live{background:#dcfce7;color:#166534;}
-.md-example{background:#fef3c7;color:#92400e;}
-.md-sub{color:#64748b;font-size:11px;}
-#matchday-map{height:460px;border-radius:12px;border:1px solid #e2e8f0;margin-top:10px;}
-.md-map-bar{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
-.md-fs-btn{font-size:12px;font-weight:600;color:#1e3a8a;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:5px 12px;cursor:pointer;}
-.md-fs-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:9999;display:none;}
-.md-fs-overlay.on{display:block;}
-.md-fs-map{position:absolute;inset:18px;border-radius:12px;overflow:hidden;}
-.md-fs-close{position:absolute;top:24px;right:28px;z-index:10000;background:#fff;color:#0f172a;font-weight:700;border:none;border-radius:8px;padding:8px 14px;cursor:pointer;font-size:14px;}
-.md-progress{font-family:-apple-system,Roboto,sans-serif;padding:18px;background:linear-gradient(135deg,#0f172a,#1e3a8a);color:#fff;border-radius:14px;font-size:16px;font-weight:600;margin:10px 0;min-height:60px;display:flex;align-items:center;gap:12px;}
-.md-progress .spin{display:inline-block;animation:mdspin 1s linear infinite;}
-@keyframes mdspin{to{transform:rotate(360deg);}}
-.md-timeline{margin:14px 0;padding:0 4px;}
-.md-tl-row{display:flex;gap:14px;padding:10px 0;border-left:3px solid #e2e8f0;margin-left:14px;padding-left:18px;position:relative;}
-.md-tl-row.match{border-left-color:#16a34a;}
-.md-tl-dot{position:absolute;left:-15px;top:10px;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid #1e3a8a;display:flex;align-items:center;justify-content:center;font-size:15px;}
-.md-tl-row.match .md-tl-dot{border-color:#16a34a;background:#dcfce7;}
-.md-tl-title{font-weight:700;color:#0f172a;font-size:14px;}
-.md-tl-row.match .md-tl-title{color:#166534;}
-.md-tl-text{color:#475569;font-size:13px;margin-top:2px;line-height:1.4;}
-.md-tl-h{font-size:14px;font-weight:700;color:#1e3a8a;margin:14px 0 4px;}
 </style>
 """
@@ -81,107 +163,145 @@ def _e(x: Any) -> str:
 def _prov_badge(source: str | None) -> str:
     s = (source or "").lower()
     if s == "fallback":
-        return '<span class="md-badge md-example">example</span>'
     if s in ("serpapi", "openmeteo", "osm"):
-        return '<span class="md-badge md-live">● live</span>'
-    return f'<span class="md-badge">{_e(source)}</span>'
-def _weather_line(pkg: ScoredPackage) -> str:
     if not pkg.weather:
-        return '<div class="md-row">🌤️ <b>Weather:</b> forecast unavailable</div>'
     w = pkg.weather[0]
     icon = _WMO_ICON.get(w.weather_code, "🌡️")
     return (
-        f'<div class="md-row">{icon} <b>Match-day weather:</b> {_e(w.date)} · '
-        f'{w.temp_min_c:g}–{w.temp_max_c:g}°C · {w.precipitation_probability:g}% precip '
-        f'{_prov_badge(w.source)}</div>'
     )
-def render_card(pkg: ScoredPackage) -> str:
-    color = _LABEL_COLOR.get(pkg.label, "#475569")
     f = pkg.flight
     h = pkg.hotel
-    hotel_html = (
-        f'<div class="md-row">🏨 <b>{_e(h.name)}</b> · '
-        f"{(h.total_price_cad is not None) and ('$'+format(round(h.total_price_cad), ',')) or 'price n/a'} total · "
-        f'{(h.rating is not None) and (f"{h.rating:g}★") or ""} · '
-        f'{(h.distance_to_stadium_km is not None) and (f"{h.distance_to_stadium_km:g} km to BC Place") or ""} '
-        f"{_prov_badge(h.source)}</div>"
-    ) if h else '<div class="md-row">🏨 <b>No hotel found</b> — flight-only package</div>'
     buffer = pkg.arrival_buffer_hours
-    buf_txt = f"+{buffer:g}h before kickoff" if buffer >= 0 else f"{buffer:g}h (arrives after kickoff!)"
     return f"""
-    <div class="md-card">
-      <div class="md-card-head" style="background:{color}">
-        <div class="lbl">{_e(pkg.label)}</div>
-        <div class="price">${pkg.total_cost_cad:,.0f} <span style="font-size:13px;font-weight:500;opacity:.85">CAD total</span></div>
-      </div>
-      <div class="md-card-body">
-        <div class="md-row">✈️ <b>{_e(f.airline)} {_e(f.flight_number)}</b> · {_e(f.origin)}→{_e(f.destination)} ·
-          lands {f.arrival_time.strftime('%H:%M')} {_prov_badge(f.source)}</div>
-        {hotel_html}
-        {_weather_line(pkg)}
-        <div class="md-row">⏱️ <b>Arrival buffer:</b> {buf_txt}</div>
-        <div class="md-row">🚶 <b>Hotel→stadium:</b> {pkg.hotel_to_stadium_min} min walk · {len(pkg.amenities)} nearby spots</div>
       </div>
-    </div>
     """
 def render_cards(result: TripPackageResult) -> str:
     if not result.packages:
-        return '<div class="md-row">No packages could be formed from the available data.</div>'
-    cards = "".join(render_card(p) for p in result.packages)
-    return f'{_CSS}<div class="md-wrap"><div class="md-cards">{cards}</div></div>'
 def render_status_bar(result: TripPackageResult) -> str:
     cls = result.status
-    notices = " · ".join(result.degradation_notices) if result.degradation_notices else "all systems go"
     return (
-        f'{_CSS}<div class="md-wrap"><div class="md-status {cls}">'
-        f"{result.status.upper()} · {len(result.packages)} package(s) · {notices}"
-        f"</div></div>"
     )
 def _js_markers(result: TripPackageResult) -> str:
-    """Build Leaflet JS adding stadium + hotel + POI markers + hotel→stadium lines."""
     lines: list[str] = []
-    # BC Place stadium
     lines.append(
         f"L.marker([{BC_PLACE_LAT},{BC_PLACE_LON}],{{icon:stadiumIcon}})"
-        f".addTo(map).bindPopup('<b>BC Place Stadium</b><br>Match venue');"
     )
-    seen: set[tuple[float, float]] = set()
     for p in result.packages:
         h = p.hotel
         if h and h.latitude and h.longitude and (h.latitude, h.longitude) not in seen:
             seen.add((h.latitude, h.longitude))
             name = escape(h.name)
             lines.append(
-                f"L.marker([{h.latitude},{h.longitude}],{{icon:hotelIcon}})"
-                f".addTo(map).bindPopup('<b>🏨 {name}</b><br>{_e(p.label)}');"
             )
             lines.append(
                 f"L.polyline([[{h.latitude},{h.longitude}],[{BC_PLACE_LAT},{BC_PLACE_LON}]],"
-                f"{{color:'#2563eb',dashArray:'5,7',weight:2}}).addTo(map);"
             )
-    # POIs (from first package that has them)
     for p in result.packages:
-        for a in (p.amenities or [])[:15]:
             if a.latitude and a.longitude and (a.latitude, a.longitude) not in seen:
                 seen.add((a.latitude, a.longitude))
                 lines.append(
-                    f"L.marker([{a.latitude},{a.longitude}],{{icon:poiIcon}})"
                     f".addTo(map).bindPopup('{escape(a.category)} · {escape(a.name)}');"
                 )
         if p.amenities:
             break
     return "\n".join(lines)
@@ -195,23 +315,28 @@ def render_map(result: TripPackageResult, leaflet_preloaded: bool = False) -> st
     return f"""
 {_CSS}
 <div class="md-wrap">
-{_cdn}  <div class="md-map-bar">
-    <span class="md-sub">🏟️ BC Place · 🏨 hotels · 📍 nearby spots — drag &amp; zoom to explore</span>
     <button class="md-fs-btn" type="button" onclick="window.matchdayFullscreen&amp;&amp;matchdayFullscreen()">⛶ Full screen</button>
   </div>
-  <div id="matchday-map"></div>
   <script>
   (function(){{
     var el=document.getElementById('matchday-map');
     if(!el||window.L===undefined){{return;}}
     if(el._lmap){{el._lmap.remove();}}
-    var map=L.map('matchday-map').setView([{BC_PLACE_LAT},{BC_PLACE_LON}],15);
-    el._lmap=map;
-    window._matchdayMap=map;
-    L.tileLayer('https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png',{{maxZoom:19,attribution:'© OpenStreetMap'}}).addTo(map);
-    var stadiumIcon=L.divIcon({{html:'🏟️',iconSize:[26,26],iconAnchor:[13,13]}});
-    var hotelIcon=L.divIcon({{html:'🏨',iconSize:[22,22],iconAnchor:[11,11]}});
-    var poiIcon=L.divIcon({{html:'📍',iconSize:[16,16],iconAnchor:[8,8]}});
     {_js_markers(result)}
   }})();
   </script>
@@ -220,11 +345,7 @@ def render_map(result: TripPackageResult, leaflet_preloaded: bool = False) -> st
 def render_timeline(trip, result: TripPackageResult) -> str:
-    """Day-by-day vertical itinerary (A2): arrival → match day → explore.
-    Uses the top package's flight/hotel to anchor Day 1; the match day is the
-    highlighted centerpiece.
-    """
     from datetime import timedelta
     top = result.packages[0] if result.packages else None
@@ -235,46 +356,50 @@ def render_timeline(trip, result: TripPackageResult) -> str:
         idx += 1
         if d == trip.check_in and top:
             hotel = top.hotel.name if top.hotel else "your hotel"
-            icon, title, body, cls = (
-                "✈️", f"Day {idx} · {d:%a %b %d}",
-                f"Fly <b>{_e(top.flight.airline)} {_e(top.flight.flight_number)}</b> "
-                f"({_e(top.flight.origin)}→YVR, lands {top.flight.arrival_time:%H:%M}); "
-                f"check in to {_e(hotel)}.",
                 "",
             )
         elif d == trip.match_date:
-            icon, title, body, cls = (
-                "🏟️", f"Day {idx} · {d:%a %b %d} — MATCH DAY",
-                f"<b>{_e(trip.match_name)}</b> at BC Place Stadium, 7:00 PM PT kickoff. "
-                "Soak up the fan zone, then head in early.",
-                "match",
             )
         elif d < trip.match_date:
-            icon, title, body, cls = (
-                "🏙️", f"Day {idx} · {d:%a %b %d}",
-                "Arrive & settle — Stanley Park, Granville Island, the seawall.",
                 "",
             )
         else:
-            icon, title, body, cls = (
-                "🗺️", f"Day {idx} · {d:%a %b %d}",
-                "Day after the match: brunch, last sights, fly home.",
                 "",
             )
         items.append(
-            f'<div class="md-tl-row {cls}"><div class="md-tl-dot">{icon}</div>'
-            f'<div><div class="md-tl-title">{title}</div>'
-            f'<div class="md-tl-text">{body}</div></div></div>'
         )
         d += timedelta(days=1)
     return (
-        f'{_CSS}<div class="md-wrap"><div class="md-tl-h">📅 Day-by-day itinerary</div>'
-        f'<div class="md-timeline">{"".join(items)}</div></div>'
     )
 def render_full(result: TripPackageResult, trip=None, leaflet_preloaded: bool = False) -> str:
-    out = render_status_bar(result) + render_cards(result) + render_map(result, leaflet_preloaded=leaflet_preloaded)
     if trip is not None:
         out += render_timeline(trip, result)
     return out

+"""HTML rendering for MatchDay — premium, Layla-competitive cards + Leaflet map.
+Pure functions: a ``TripPackageResult`` -> HTML strings for the result panel.
 Every price / hotel / weather reading carries a provenance badge (I4) so judges
 can verify nothing is hallucinated: "● live" (serpapi/openmeteo/osm) vs
+"example" (fallback). The look is a refined travel-product aesthetic
+(Off-Brand spirit) — white surfaces, layered soft shadows, restrained accent
+pops, generous whitespace, a flat CARTO map — not stock Gradio chrome.
 """
 from __future__ import annotations
 BC_PLACE_LAT = 49.2827
 BC_PLACE_LON = -123.1207
+# Per-label accent + matching soft tint (avoids color-mix for max compatibility).
 _LABEL_COLOR = {
     "Cheapest": "#16a34a",
     "Safest Arrival": "#2563eb",
+    "Closest to Stadium": "#7c3aed",
+}
+_LABEL_TINT = {
+    "Cheapest": "#dcfce7",
+    "Safest Arrival": "#dbeafe",
+    "Closest to Stadium": "#ede9fe",
+}
+_LABEL_ICON = {
+    "Cheapest": "💰",
+    "Safest Arrival": "🛬",
+    "Closest to Stadium": "📍",
 }
 # WMO weather code -> emoji (subset; unknown -> 🌡️).
     95: "⛈️", 96: "⛈️", 99: "⛈️",
 }
 _CSS = """
 <style>
+.md-wrap{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#111827;-webkit-font-smoothing:antialiased;}
+/* ── Provenance pills (the "no hallucinated prices" differentiator) ── */
+.md-pv{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;padding:1px 7px 1px 5px;
+  border-radius:999px;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle;white-space:nowrap;}
+.md-pv::before{content:"";width:6px;height:6px;border-radius:50%;display:inline-block;}
+.md-pv-live{background:#ecfdf5;color:#047857;}
+.md-pv-live::before{background:#10b981;box-shadow:0 0 0 2px rgba(16,185,129,.2);}
+.md-pv-ex{background:#fffbeb;color:#b45309;}
+.md-pv-ex::before{background:#f59e0b;}
+.md-pv-other{background:#f3f4f6;color:#4b5563;}
+.md-pv-other::before{background:#9ca3af;}
+/* ── Section header ── */
+.md-sec-h{display:flex;align-items:center;gap:12px;margin:26px 2px 14px;}
+.md-sec-h .md-sec-t{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#6b7280;white-space:nowrap;}
+.md-sec-h .md-sec-line{flex:1;height:1px;background:linear-gradient(90deg,#eef0f3,transparent);}
+/* ── Status pill ── */
+.md-status{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;padding:7px 14px;
+  border-radius:999px;margin:2px 0 4px;}
+.md-status.complete{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;}
+.md-status.partial{background:#fffbeb;color:#b45309;border:1px solid #fde68a;}
+.md-status.failed{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;}
+.md-status .md-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(16,185,129,.15);}
+.md-status .md-status-sub{font-weight:500;opacity:.85;margin-left:2px;}
+/* ── Package cards ── */
+.md-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin:6px 0 2px;}
+.md-card{position:relative;background:#fff;border:1px solid #eef0f3;border-radius:18px;overflow:hidden;
+  box-shadow:0 1px 2px rgba(17,24,39,.04),0 8px 22px -12px rgba(17,24,39,.16);
+  display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease;}
+.md-card:hover{transform:translateY(-2px);box-shadow:0 2px 6px rgba(17,24,39,.06),0 16px 34px -14px rgba(17,24,39,.22);}
+.md-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent,#7c3aed);}
+.md-card.is-top{border-color:#ddd6fe;box-shadow:0 2px 6px rgba(124,58,237,.10),0 20px 42px -14px rgba(124,58,237,.32);}
+.md-topflag{position:absolute;top:15px;right:15px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;
+  font-size:10px;font-weight:800;letter-spacing:.04em;padding:4px 10px 4px 8px;border-radius:999px;
+  box-shadow:0 6px 14px -4px rgba(124,58,237,.5);display:inline-flex;align-items:center;gap:4px;}
+.md-card-top{display:flex;align-items:center;gap:9px;padding:17px 18px 0 22px;}
+.md-chip{display:inline-flex;align-items:center;gap:6px;background:var(--tint,#ede9fe);color:var(--accent,#7c3aed);
+  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;}
+.md-chip .md-chip-ico{font-size:13px;}
+.md-price{display:flex;align-items:baseline;gap:5px;margin:9px 0 0 22px;}
+.md-cur{font-size:15px;font-weight:700;color:#9ca3af;}
+.md-amount{font-size:33px;font-weight:800;letter-spacing:-.025em;color:#111827;line-height:1;}
+.md-price-sub{color:#9ca3af;font-size:11.5px;font-weight:600;margin:4px 0 0 22px;}
+.md-facts{list-style:none;margin:15px 0 0;padding:0 22px 18px;display:grid;gap:12px;}
+.md-facts li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.4;}
+.md-facts .md-fico{font-size:16px;flex:0 0 22px;text-align:center;margin-top:1px;line-height:1;}
+.md-facts .md-fbody{min-width:0;}
+.md-facts .md-fbody b{color:#111827;font-weight:700;display:block;}
+.md-facts .md-fbody .md-fdet{display:block;color:#6b7280;font-size:12.5px;margin-top:2px;}
+/* ── Map ── */
+.md-map-wrap{position:relative;border:1px solid #eef0f3;border-radius:18px;overflow:hidden;
+  box-shadow:0 1px 2px rgba(17,24,39,.04),0 8px 22px -12px rgba(17,24,39,.16);}
+#matchday-map{height:430px;background:#eef0f3;}
+.md-map-tag{position:absolute;top:12px;left:12px;z-index:500;background:#fff;border:1px solid #eef0f3;border-radius:999px;
+  padding:6px 13px;font-size:12px;font-weight:700;color:#374151;box-shadow:0 2px 10px rgba(17,24,39,.10);
+  display:inline-flex;align-items:center;gap:8px;}
+.md-mdot{width:9px;height:9px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(17,24,39,.18);}
+.md-fs-btn{position:absolute;top:12px;right:12px;z-index:500;background:#fff;border:1px solid #eef0f3;border-radius:10px;
+  padding:7px 12px;font:inherit;font-size:12px;font-weight:700;color:#374151;cursor:pointer;
+  box-shadow:0 2px 10px rgba(17,24,39,.10);display:inline-flex;align-items:center;gap:5px;}
+.md-fs-btn:hover{background:#f7f8fa;}
+.md-legend{display:flex;gap:18px;flex-wrap:wrap;margin:13px 3px 0;font-size:12px;color:#6b7280;}
+.md-legend span{display:inline-flex;align-items:center;gap:7px;}
+/* leaflet marker polish */
+.md-pin{width:18px;height:18px;border-radius:50%;background:var(--c,#7c3aed);border:3px solid #fff;
+  box-shadow:0 2px 6px rgba(17,24,39,.35);}
+.md-pin-stadium{width:30px;height:30px;background:#111827;border:4px solid #fff;display:flex;align-items:center;
+  justify-content:center;font-size:15px;}
+.leaflet-popup-content-wrapper{border-radius:12px;box-shadow:0 8px 24px -8px rgba(17,24,39,.25);}
+.leaflet-popup-content{margin:10px 13px;font-size:13px;font-family:Inter,sans-serif;}
+.leaflet-control-zoom a{border-radius:8px!important;}
+/* full-screen map (toggled from index.html) */
+#matchday-map.fs{position:fixed!important;inset:0!important;z-index:99998!important;height:100vh!important;
+  width:100vw!important;border-radius:0!important;}
+/* ── Day-by-day timeline ── */
+.md-tl{display:grid;gap:11px;margin-top:6px;}
+.md-day{position:relative;background:#fff;border:1px solid #eef0f3;border-radius:16px;padding:14px 16px 14px 60px;
+  box-shadow:0 1px 2px rgba(17,24,39,.04);transition:box-shadow .18s ease;}
+.md-day:hover{box-shadow:0 4px 14px -8px rgba(17,24,39,.18);}
+.md-day-ico{position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:10px;background:#f3f4f6;
+  display:flex;align-items:center;justify-content:center;font-size:16px;}
+.md-day-lbl{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9ca3af;}
+.md-day-title{font-size:15px;font-weight:700;color:#111827;margin:2px 0 4px;letter-spacing:-.01em;}
+.md-day-body{font-size:13px;color:#6b7280;line-height:1.5;}
+.md-day-body b{color:#374151;}
+.md-day.is-match{border-color:#bbf7d0;background:linear-gradient(180deg,#f0fdf4,#fff 60%);
+  box-shadow:0 2px 8px rgba(16,185,129,.12);}
+.md-day.is-match .md-day-ico{background:#dcfce7;}
+.md-day.is-match .md-day-lbl{color:#047857;}
+.md-day.is-match .md-day-title{color:#065f46;}
+/* ── Explanation (Nemotron's comparison) ── */
+.md-explain{background:linear-gradient(135deg,#eef2ff,#f5f3ff);border:1px solid #ddd6fe;border-radius:16px;
+  padding:16px 18px;margin-top:6px;color:#3730a3;font-size:13.5px;line-height:1.6;}
+.md-explain b{color:#4c1d95;}
+.md-explain-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.04em;
+  text-transform:uppercase;color:#6d28d9;margin-bottom:8px;}
 </style>
 """
 def _prov_badge(source: str | None) -> str:
     s = (source or "").lower()
     if s == "fallback":
+        return '<span class="md-pv md-pv-ex">example</span>'
     if s in ("serpapi", "openmeteo", "osm"):
+        return '<span class="md-pv md-pv-live">live</span>'
+    if not s:
+        return ""
+    return f'<span class="md-pv md-pv-other">{_e(source)}</span>'
+def _section(title: str) -> str:
+    return f'<div class="md-sec-h"><span class="md-sec-t">{_e(title)}</span><span class="md-sec-line"></span></div>'
+def _weather_fact(pkg: ScoredPackage) -> str:
     if not pkg.weather:
+        return (
+            '<li><span class="md-fico">🌤️</span><span class="md-fbody"><b>Forecast unavailable</b>'
+            '<span class="md-fdet">match-day weather could not be loaded</span></span></li>'
+        )
     w = pkg.weather[0]
     icon = _WMO_ICON.get(w.weather_code, "🌡️")
     return (
+        f'<li><span class="md-fico">{icon}</span><span class="md-fbody"><b>{w.temp_min_c:g}–{w.temp_max_c:g}°C</b>'
+        f'<span class="md-fdet">{_e(w.date)} · match day · {w.precipitation_probability:g}% rain '
+        f'{_prov_badge(w.source)}</span></span></li>'
     )
+def render_card(pkg: ScoredPackage, is_top: bool = False) -> str:
+    accent = _LABEL_COLOR.get(pkg.label, "#7c3aed")
+    tint = _LABEL_TINT.get(pkg.label, "#ede9fe")
+    icon = _LABEL_ICON.get(pkg.label, "✅")
     f = pkg.flight
     h = pkg.hotel
+    # Hotel fact
+    if h:
+        bits = []
+        if h.total_price_cad is not None:
+            bits.append(f"${format(round(h.total_price_cad), ',')} total")
+        if h.rating is not None:
+            bits.append(f"{h.rating:g}★")
+        if h.distance_to_stadium_km is not None:
+            bits.append(f"{h.distance_to_stadium_km:g} km to BC Place")
+        hotel_fact = (
+            f'<li><span class="md-fico">🏨</span><span class="md-fbody"><b>{_e(h.name)}</b>'
+            f'<span class="md-fdet">{" · ".join(bits)} {_prov_badge(h.source)}</span></span></li>'
+        )
+    else:
+        hotel_fact = (
+            '<li><span class="md-fico">🏨</span><span class="md-fbody"><b>Flight-only package</b>'
+            '<span class="md-fdet">no hotel bundled for this option</span></span></li>'
+        )
+    # Arrival buffer
     buffer = pkg.arrival_buffer_hours
+    if buffer >= 0:
+        buf_b, buf_d = f"+{buffer:g}h before kickoff", "arrival buffer"
+    else:
+        buf_b, buf_d = f"{buffer:g}h — lands AFTER kickoff", "⚠️ risky arrival"
+    topflag = '<span class="md-topflag">★ Best match</span>' if is_top else ""
     return f"""
+    <article class="md-card{' is-top' if is_top else ''}" style="--accent:{accent};--tint:{tint}">
+      {topflag}
+      <div class="md-card-top">
+        <span class="md-chip"><span class="md-chip-ico">{icon}</span>{_e(pkg.label)}</span>
       </div>
+      <div class="md-price"><span class="md-cur">CA$</span><span class="md-amount">{pkg.total_cost_cad:,.0f}</span></div>
+      <div class="md-price-sub">CAD · total for the trip</div>
+      <ul class="md-facts">
+        <li><span class="md-fico">✈️</span><span class="md-fbody"><b>{_e(f.airline)} {_e(f.flight_number)}</b>
+          <span class="md-fdet">{_e(f.origin)} → {_e(f.destination)} · lands {f.arrival_time:%H:%M} {_prov_badge(f.source)}</span></span></li>
+        {hotel_fact}
+        {_weather_fact(pkg)}
+        <li><span class="md-fico">⏱️</span><span class="md-fbody"><b>{buf_b}</b><span class="md-fdet">{buf_d}</span></span></li>
+        <li><span class="md-fico">🚶</span><span class="md-fbody"><b>{pkg.hotel_to_stadium_min} min walk</b>
+          <span class="md-fdet">hotel → BC Place · {len(pkg.amenities)} nearby spots</span></span></li>
+      </ul>
+    </article>
     """
 def render_cards(result: TripPackageResult) -> str:
     if not result.packages:
+        return '<div class="md-row" style="padding:14px;color:#6b7280">No packages could be formed from the available data.</div>'
+    cards = "".join(render_card(p, is_top=(i == 0)) for i, p in enumerate(result.packages))
+    return f'{_CSS}<div class="md-wrap">{_section("Your 3 ranked packages")}<div class="md-cards">{cards}</div></div>'
 def render_status_bar(result: TripPackageResult) -> str:
     cls = result.status
+    notices = " · ".join(result.degradation_notices) if result.degradation_notices else "all systems live"
+    label = {"complete": "Live data", "partial": "Partial data", "failed": "Degraded"}.get(cls, cls)
     return (
+        f'{_CSS}<div class="md-wrap"><span class="md-status {cls}"><span class="md-dot"></span>{_e(label)}'
+        f'<span class="md-status-sub">· {len(result.packages)} packages · {_e(notices)}</span></span></div>'
     )
 def _js_markers(result: TripPackageResult) -> str:
+    """Build Leaflet JS: stadium + hotel + POI markers + hotel→stadium lines."""
     lines: list[str] = []
     lines.append(
+        f"var bb=[[{BC_PLACE_LAT},{BC_PLACE_LON}]];"
         f"L.marker([{BC_PLACE_LAT},{BC_PLACE_LON}],{{icon:stadiumIcon}})"
+        f".addTo(map).bindPopup('<b>🏟️ BC Place Stadium</b><br>Match venue · 7:00 PM PT');"
     )
+    seen: set[tuple[float, float]] = {(BC_PLACE_LAT, BC_PLACE_LON)}
     for p in result.packages:
         h = p.hotel
         if h and h.latitude and h.longitude and (h.latitude, h.longitude) not in seen:
             seen.add((h.latitude, h.longitude))
+            accent = _LABEL_COLOR.get(p.label, "#7c3aed")
             name = escape(h.name)
             lines.append(
+                f"bb.push([{h.latitude},{h.longitude}]);"
+                f"L.marker([{h.latitude},{h.longitude}],{{icon:L.divIcon({{className:'',html:'<div class=\\\"md-pin\\\" style=\\\"--c:{accent}\\\"></div>',iconSize:[18,18],iconAnchor:[9,9],popupAnchor:[0,-8]}})}})"
+                f".addTo(map).bindPopup('<b>🏨 {name}</b><br>{escape(p.label)}');"
             )
             lines.append(
                 f"L.polyline([[{h.latitude},{h.longitude}],[{BC_PLACE_LAT},{BC_PLACE_LON}]],"
+                f"{{color:'{accent}',weight:2,opacity:.7,dashArray:'1 7',lineCap:'round'}}).addTo(map);"
             )
+    # POIs (first package that has them)
     for p in result.packages:
+        for a in (p.amenities or [])[:18]:
             if a.latitude and a.longitude and (a.latitude, a.longitude) not in seen:
                 seen.add((a.latitude, a.longitude))
                 lines.append(
+                    f"bb.push([{a.latitude},{a.longitude}]);"
+                    f"L.marker([{a.latitude},{a.longitude}],{{icon:L.divIcon({{className:'',html:'<div class=\\\"md-pin\\\" style=\\\"--c:#9ca3af;width:10px;height:10px;border-width:2px\\\"></div>',iconSize:[10,10],iconAnchor:[5,5],popupAnchor:[0,-6]}})}})"
                     f".addTo(map).bindPopup('{escape(a.category)} · {escape(a.name)}');"
                 )
         if p.amenities:
             break
+    lines.append(
+        "try{map.fitBounds(bb,{padding:[34,34],maxZoom:16});}catch(e){}"
+    )
     return "\n".join(lines)
     return f"""
 {_CSS}
 <div class="md-wrap">
+{_cdn}{_section("On the map")}
+  <div class="md-map-wrap">
+    <span class="md-map-tag"><span class="md-mdot" style="background:#111827"></span>BC Place</span>
     <button class="md-fs-btn" type="button" onclick="window.matchdayFullscreen&amp;&amp;matchdayFullscreen()">⛶ Full screen</button>
+    <div id="matchday-map"></div>
+  </div>
+  <div class="md-legend">
+    <span><span class="md-mdot" style="background:#111827"></span>BC Place Stadium</span>
+    <span><span class="md-mdot" style="background:#16a34a"></span>Cheapest hotel</span>
+    <span><span class="md-mdot" style="background:#2563eb"></span>Safest-arrival hotel</span>
+    <span><span class="md-mdot" style="background:#7c3aed"></span>Closest hotel</span>
+    <span><span class="md-mdot" style="background:#9ca3af"></span>Nearby spots</span>
   </div>
   <script>
   (function(){{
     var el=document.getElementById('matchday-map');
     if(!el||window.L===undefined){{return;}}
     if(el._lmap){{el._lmap.remove();}}
+    var map=L.map('matchday-map',{{scrollWheelZoom:true,zoomControl:true}}).setView([{BC_PLACE_LAT},{BC_PLACE_LON}],15);
+    el._lmap=map; window._matchdayMap=map;
+    L.tileLayer('https://{{s}}.basemaps.cartocdn.com/light_all/{{z}}/{{x}}/{{y}}.png',{{subdomains:'abcd',maxZoom:20,attribution:'&amp;copy; OpenStreetMap &amp;copy; CARTO'}}).addTo(map);
+    var stadiumIcon=L.divIcon({{className:'',html:'<div class="md-pin md-pin-stadium">🏟️</div>',iconSize:[30,30],iconAnchor:[15,15],popupAnchor:[0,-12]}});
     {_js_markers(result)}
   }})();
   </script>
 def render_timeline(trip, result: TripPackageResult) -> str:
+    """Day-by-day itinerary (A2): arrival → match day → explore."""
     from datetime import timedelta
     top = result.packages[0] if result.packages else None
         idx += 1
         if d == trip.check_in and top:
             hotel = top.hotel.name if top.hotel else "your hotel"
+            icon, lbl, title, body, cls = (
+                "✈️", "Arrival", f"Day {idx} · {d:%a %b %d}",
+                f"Land via <b>{_e(top.flight.airline)} {_e(top.flight.flight_number)}</b> "
+                f"({_e(top.flight.origin)} → YVR) and check in to <b>{_e(hotel)}</b>. Settle in, grab dinner downtown.",
                 "",
             )
         elif d == trip.match_date:
+            icon, lbl, title, body, cls = (
+                "🏟️", "Match day", f"Day {idx} · {d:%a %b %d} — MATCH DAY",
+                f"<b>{_e(trip.match_name)}</b> at BC Place, 7:00 PM PT. Hit the fan zone first, "
+                "then walk from your hotel — it's minutes away.",
+                "is-match",
             )
         elif d < trip.match_date:
+            icon, lbl, title, body, cls = (
+                "🏙️", "Explore", f"Day {idx} · {d:%a %b %d}",
+                "Stanley Park seawall, Granville Island, Gastown — Vancouver is built for walking.",
                 "",
             )
         else:
+            icon, lbl, title, body, cls = (
+                "🗺️", "Heading home", f"Day {idx} · {d:%a %b %d}",
+                "Brunch and last sights, then back to YVR. Safe flight home.",
                 "",
             )
         items.append(
+            f'<div class="md-day {cls}"><div class="md-day-ico">{icon}</div>'
+            f'<div class="md-day-lbl">{lbl}</div>'
+            f'<div class="md-day-title">{title}</div>'
+            f'<div class="md-day-body">{body}</div></div>'
         )
         d += timedelta(days=1)
     return (
+        f'{_CSS}<div class="md-wrap">{_section("Day-by-day itinerary")}'
+        f'<div class="md-tl">{"".join(items)}</div></div>'
     )
 def render_full(result: TripPackageResult, trip=None, leaflet_preloaded: bool = False) -> str:
+    out = (
+        render_status_bar(result)
+        + render_cards(result)
+        + render_map(result, leaflet_preloaded=leaflet_preloaded)
+    )
     if trip is not None:
         out += render_timeline(trip, result)
     return out