fyp

app/integrations/guest_mcp.py

@@ -2,6 +2,7 @@
 
 from __future__ import annotations
 
+import base64
 import os
 import time
 from pathlib import Path
@@ -51,7 +52,21 @@ _WIDGET_PATH = (
     / "web"
     / "listing-cards.html"
 )
-_WIDGET_HTML = _WIDGET_PATH.read_text(encoding="utf-8")
+_WIDGET_LOGO_PATH = _WIDGET_PATH.with_name("lojiz-logo.png")
+_WIDGET_VERIFIED_PATH = _WIDGET_PATH.with_name("verified-badge.png")
+_WIDGET_LOGO_DATA_URI = (
+    "data:image/png;base64,"
+    + base64.b64encode(_WIDGET_LOGO_PATH.read_bytes()).decode("ascii")
+)
+_WIDGET_VERIFIED_DATA_URI = (
+    "data:image/png;base64,"
+    + base64.b64encode(_WIDGET_VERIFIED_PATH.read_bytes()).decode("ascii")
+)
+_WIDGET_HTML = (
+    _WIDGET_PATH.read_text(encoding="utf-8")
+    .replace("__LOJIZ_LOGO_DATA_URI__", _WIDGET_LOGO_DATA_URI)
+    .replace("__LOJIZ_VERIFIED_DATA_URI__", _WIDGET_VERIFIED_DATA_URI)
+)
 _RESOURCE_DOMAINS = [
     value.strip()
     for value in os.getenv(

app/schemas/guest_discovery.py

@@ -103,9 +103,10 @@ class GuestListingCard(BaseModel):
     video: Optional[str] = None
     rating: float = 0.0
     reviews_count: int = 0
+    host_name: str = "Lojiz host"
+    host_avatar: Optional[str] = None
     host_verified: bool = False
     availability: str = "available"
-    match_reason: str
     public_url: str
     action_label: str
 
@@ -115,6 +116,7 @@ class GuestDiscoveryResponse(BaseModel):
     guest_mode: bool = True
     powered_by: str = "AIDA on Lojiz"
     provider: str
+    language: str = "en"
     mode: Literal["search", "recommendation", "similar"]
     message: str
     listings: list[GuestListingCard]
@@ -133,6 +135,7 @@ class GuestComparisonResponse(BaseModel):
     guest_mode: bool = True
     powered_by: str = "AIDA on Lojiz"
     provider: str
+    language: str = "en"
     message: str
     recommended_public_id: Optional[str] = None
     items: list[GuestComparisonItem]

app/services/guest_discovery_service.py

@@ -38,14 +38,6 @@ _ACTION_LABELS = {
     "ar": "عرض على Lojiz",
 }
 
-_GENERIC_REASONS = {
-    "en": "AIDA ranked this as a strong match for your request.",
-    "fr": "AIDA a classé ce bien parmi les meilleures correspondances.",
-    "es": "AIDA clasificó esta propiedad entre las mejores coincidencias.",
-    "pt": "A AIDA classificou este imóvel entre as melhores opções.",
-    "ar": "صنفت AIDA هذا العقار ضمن أفضل النتائج لطلبك.",
-}
-
 _COMPARISON_FALLBACK = {
     "en": "AIDA compared these listings using their price, location, space, amenities, photos, and ratings.",
     "fr": "AIDA a comparé ces biens selon le prix, la localisation, l'espace, les équipements, les photos et les avis.",
@@ -125,65 +117,6 @@ def _with_attribution(public_url: str, provider: str) -> str:
     return urlunsplit((parsed.scheme, parsed.netloc, parsed.path, urlencode(query), parsed.fragment))
 
 
-def _match_reason(listing: dict[str, Any], params: dict[str, Any], language: str) -> str:
-    language = language if language in _GENERIC_REASONS else "en"
-    note = _summary(listing.get("_match_note"), max_length=240)
-    if note:
-        return note
-
-    details: list[str] = []
-    location = str(params.get("location") or "").strip()
-    if location and location.lower() in str(listing.get("location") or "").lower():
-        details.append({
-            "en": "the requested location",
-            "fr": "la zone recherchée",
-            "es": "la ubicación solicitada",
-            "pt": "a localização pedida",
-            "ar": "الموقع المطلوب",
-        }[language])
-    max_price = _safe_number(params.get("max_price"))
-    price = _safe_number(listing.get("price"))
-    if max_price and price and price <= max_price:
-        details.append({
-            "en": "your budget",
-            "fr": "votre budget",
-            "es": "tu presupuesto",
-            "pt": "o seu orçamento",
-            "ar": "ميزانيتك",
-        }[language])
-    requested_beds = int(_safe_number(params.get("bedrooms")))
-    if requested_beds and int(_safe_number(listing.get("bedrooms"))) >= requested_beds:
-        details.append({
-            "en": "the space you need",
-            "fr": "l'espace demandé",
-            "es": "el espacio que necesitas",
-            "pt": "o espaço de que precisa",
-            "ar": "المساحة التي تحتاجها",
-        }[language])
-    requested_amenities = {str(item).lower() for item in params.get("amenities") or []}
-    listing_amenities = {str(item).lower() for item in listing.get("amenities") or []}
-    if requested_amenities and requested_amenities.intersection(listing_amenities):
-        details.append({
-            "en": "requested amenities",
-            "fr": "les équipements souhaités",
-            "es": "los servicios solicitados",
-            "pt": "as comodidades pedidas",
-            "ar": "المرافق المطلوبة",
-        }[language])
-
-    if not details:
-        return _GENERIC_REASONS[language]
-    joined = ", ".join(details[:3])
-    templates = {
-        "en": f"AIDA ranked it highly for {joined}.",
-        "fr": f"AIDA l'a bien classé pour {joined}.",
-        "es": f"AIDA la clasificó muy bien por {joined}.",
-        "pt": f"A AIDA classificou-o bem por {joined}.",
-        "ar": f"صنفته AIDA جيداً بسبب {joined}.",
-    }
-    return templates[language]
-
-
 def _is_publicly_available(listing: dict[str, Any]) -> bool:
     if str(listing.get("status") or "").lower() != "active":
         return False
@@ -220,10 +153,8 @@ async def _authoritative_listing(raw: dict[str, Any]) -> Optional[dict[str, Any]
 async def listing_to_guest_card(
     raw: dict[str, Any],
     *,
-    params: dict[str, Any],
     language: str,
     provider: str,
-    fallback_reason: Optional[str] = None,
 ) -> Optional[GuestListingCard]:
     listing = await _authoritative_listing(raw)
     if not listing:
@@ -236,6 +167,7 @@ async def listing_to_guest_card(
 
     images = _public_media(listing.get("images") or [], limit=3)
     videos = _public_media(listing.get("videos") or [], limit=1)
+    host_avatars = _public_media([listing.get("owner_profile_picture")], limit=1)
     summary = _summary(listing.get("description")) or _summary(listing.get("title"))
     amenities = [
         _summary(value, max_length=50)
@@ -260,9 +192,10 @@ async def listing_to_guest_card(
         video=videos[0] if videos else None,
         rating=_safe_number(listing.get("rating")),
         reviews_count=int(_safe_number(listing.get("reviews_count"))),
+        host_name=_summary(listing.get("owner_name") or "Lojiz host", max_length=80),
+        host_avatar=host_avatars[0] if host_avatars else None,
         host_verified=bool(listing.get("owner_is_verified")),
         availability=str(listing.get("availability_status") or "available"),
-        match_reason=fallback_reason or _match_reason(listing, params, language),
         public_url=_with_attribution(public_url, provider),
         action_label=_ACTION_LABELS.get(language, _ACTION_LABELS["en"]),
     )
@@ -282,7 +215,6 @@ async def discovery_to_guest_response(
     for raw in discovery.listings:
         card = await listing_to_guest_card(
             raw,
-            params=discovery.search_params,
             language=language,
             provider=provider,
         )
@@ -294,6 +226,7 @@ async def discovery_to_guest_response(
 
     return GuestDiscoveryResponse(
         provider=provider,
+        language=language,
         mode=mode,
         message=_summary(discovery.message, max_length=900),
         listings=cards,
@@ -430,10 +363,8 @@ async def compare_guest_listings(
             continue
         card = await listing_to_guest_card(
             listing,
-            params={},
             language=language,
             provider=provider,
-            fallback_reason=_GENERIC_REASONS.get(language, _GENERIC_REASONS["en"]),
         )
         if card:
             cards.append(card)
@@ -500,6 +431,7 @@ Do not invent facts. Every strength must be supported by the supplied data.
     ]
     return GuestComparisonResponse(
         provider=provider,
+        language=language,
         message=message,
         recommended_public_id=cards[winner].public_id,
         items=items,

integrations/lojiz_guest_mcp/src/server.ts

@@ -29,8 +29,16 @@ const ALLOWED_HOSTS = new Set(
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const widgetPath = path.resolve(__dirname, "..", "web", "listing-cards.html");
-const widgetHtml = fs.readFileSync(widgetPath, "utf8");
-
+const widgetLogoPath = path.resolve(__dirname, "..", "web", "lojiz-logo.png");
+const widgetVerifiedPath = path.resolve(__dirname, "..", "web", "verified-badge.png");
+const widgetLogoDataUri =
+  "data:image/png;base64," + fs.readFileSync(widgetLogoPath).toString("base64");
+const widgetVerifiedDataUri =
+  "data:image/png;base64," + fs.readFileSync(widgetVerifiedPath).toString("base64");
+const widgetHtml = fs
+  .readFileSync(widgetPath, "utf8")
+  .replace("__LOJIZ_LOGO_DATA_URI__", widgetLogoDataUri)
+  .replace("__LOJIZ_VERIFIED_DATA_URI__", widgetVerifiedDataUri);
 const languageSchema = z.enum(["en", "fr", "es", "pt", "ar"]).default("en");
 const listingCardSchema = z.object({
   public_id: z.string(),
@@ -49,9 +57,10 @@ const listingCardSchema = z.object({
   video: z.string().url().nullable().optional(),
   rating: z.number(),
   reviews_count: z.number().int(),
+  host_name: z.string(),
+  host_avatar: z.string().url().nullable().optional(),
   host_verified: z.boolean(),
   availability: z.string(),
-  match_reason: z.string(),
   public_url: z.string().url(),
   action_label: z.string(),
 });
@@ -61,6 +70,7 @@ const discoveryOutputSchema = {
   guest_mode: z.boolean(),
   powered_by: z.string(),
   provider: z.string(),
+  language: z.string(),
   mode: z.enum(["search", "recommendation", "similar"]),
   message: z.string(),
   listings: z.array(listingCardSchema),
@@ -74,6 +84,7 @@ const comparisonOutputSchema = {
   guest_mode: z.boolean(),
   powered_by: z.string(),
   provider: z.string(),
+  language: z.string(),
   message: z.string(),
   recommended_public_id: z.string().nullable().optional(),
   items: z.array(z.object({ listing: listingCardSchema, strengths: z.array(z.string()) })),

integrations/lojiz_guest_mcp/web/listing-cards.html

@@ -6,167 +6,344 @@
   <style>
     :root {
       color-scheme: light dark;
-      --bg: #ffffff;
-      --surface: #f7f7fa;
-      --text: #17131f;
-      --muted: #6e6878;
-      --line: rgba(23, 19, 31, 0.11);
-      --purple: #8e44ad;
-      --pink: #ff2f68;
+      --canvas: #ffffff;
+      --surface: #ffffff;
+      --surface-soft: #f7f6f9;
+      --text: #1d1824;
+      --muted: #746e7d;
+      --line: rgba(29, 24, 36, 0.11);
+      --pink: #f52e62;
+      --magenta: #cc377e;
+      --purple: #8f489f;
+      --success: #17a66f;
       font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     }
     @media (prefers-color-scheme: dark) {
-      :root { --bg: #151219; --surface: #211d26; --text: #fbf8ff; --muted: #b8b0c0; --line: rgba(255,255,255,.12); }
+      :root {
+        --canvas: #121014;
+        --surface: #1b181e;
+        --surface-soft: #242028;
+        --text: #fbf8fd;
+        --muted: #b8b1bd;
+        --line: rgba(255, 255, 255, 0.12);
+      }
     }
     * { box-sizing: border-box; }
-    body { margin: 0; background: var(--bg); color: var(--text); }
-    .shell { padding: 12px; }
-    .header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
+    [hidden] { display: none !important; }
+    body { margin: 0; background: var(--canvas); color: var(--text); }
+    .shell { width: 100%; padding: 12px; }
+    .header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
     .brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
-    .mark { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; color: white; font-weight: 800; background: linear-gradient(135deg, var(--purple), var(--pink)); }
-    h1 { margin: 0; font-size: 15px; line-height: 1.2; letter-spacing: 0; }
-    .powered { margin-top: 3px; color: var(--muted); font-size: 11px; }
-    .count { flex: 0 0 auto; color: var(--muted); font-size: 11px; padding-top: 3px; }
-    .summary { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.45; }
-    .cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 78%); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1px 1px 7px; scrollbar-width: thin; }
-    .card { scroll-snap-align: start; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-width: 0; }
-    .media { position: relative; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--surface), var(--text) 7%); overflow: hidden; }
-    .media img { width: 100%; height: 100%; display: block; object-fit: cover; }
-    .media-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
-    .media img:not([src]), .media img[src=""] { display: none; }
-    .type { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px); padding: 4px 7px; border-radius: 6px; background: rgba(17, 13, 23, .78); color: white; font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .body { padding: 10px; }
-    .title { min-height: 38px; margin: 0; font-size: 14px; line-height: 1.35; font-weight: 750; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
-    .location { margin-top: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .price { margin-top: 9px; font-size: 14px; font-weight: 800; }
-    .period { margin-left: 3px; color: var(--muted); font-size: 10px; font-weight: 500; }
-    .facts { display: flex; flex-wrap: wrap; gap: 5px; min-height: 24px; margin-top: 8px; }
-    .fact { border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; color: var(--muted); font-size: 10px; }
-    .reason { margin: 9px 0 0; border-top: 1px solid var(--line); padding-top: 8px; color: var(--text); font-size: 11px; line-height: 1.4; }
-    .reason strong { color: var(--pink); }
-    .strengths { margin: 7px 0 0; padding-left: 17px; color: var(--muted); font-size: 10px; line-height: 1.45; }
-    .cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 38px; margin-top: 10px; border-radius: 7px; color: white; text-decoration: none; font-size: 12px; font-weight: 750; background: linear-gradient(100deg, var(--purple), var(--pink)); }
-    .empty { padding: 24px 14px; border: 1px solid var(--line); border-radius: 8px; text-align: center; color: var(--muted); font-size: 12px; }
-    @media (min-width: 680px) {
-      .cards { grid-auto-flow: initial; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
-    }
+    .logo { width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
+    .brand-copy { min-width: 0; }
+    h1 { margin: 0; font-size: 15px; line-height: 1.2; font-weight: 800; letter-spacing: 0; }
+    .powered { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.25; }
+    .count { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; color: var(--muted); font-size: 10px; font-weight: 700; }
+    .aida-note { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; margin-bottom: 12px; }
+    .aida-note[hidden] { display: none; }
+    .aida-note-logo { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: #fff; object-fit: contain; }
+    .summary { margin: 0; max-width: 780px; color: var(--text); font-size: 12px; line-height: 1.45; }
+    .cards-wrap { position: relative; }
+    .cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 82%); gap: 10px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; padding: 1px; scrollbar-width: none; }
+    .cards::-webkit-scrollbar { display: none; }
+    .cards-nav { position: absolute; top: 50%; z-index: 5; display: grid; place-items: center; width: 34px; height: 48px; margin-top: -24px; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; background: rgba(17,13,21,.76); backdrop-filter: blur(10px); color: #fff; cursor: pointer; opacity: 0; box-shadow: 0 7px 22px rgba(0,0,0,.24); transition: opacity 150ms ease, transform 150ms ease, background 150ms ease; }
+    .cards-wrap:hover .cards-nav:not(:disabled), .cards-nav:focus-visible { opacity: 1; }
+    .cards-nav:hover { background: rgba(17,13,21,.92); transform: translateY(-1px); }
+    .cards-nav:disabled { opacity: 0; pointer-events: none; }
+    .cards-nav.previous { left: 8px; }
+    .cards-nav.next { right: 8px; }
+    .cards-nav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
+    .card { scroll-snap-align: start; cursor: pointer; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; text-decoration: none; box-shadow: 0 8px 24px rgba(24, 18, 31, 0.08); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
+    .card:hover { transform: translateY(-2px); border-color: rgba(204, 55, 126, 0.42); box-shadow: 0 12px 28px rgba(24, 18, 31, 0.13); }
+    .card:focus-visible { outline: 3px solid rgba(245, 46, 98, 0.28); outline-offset: 2px; }
+    .media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-soft); }
+    .media-image { width: 100%; height: 100%; display: block; object-fit: cover; opacity: 1; transition: opacity 220ms ease, transform 240ms ease; }
+    .media-image.changing { opacity: .18; }
+    .card:hover .media-image { transform: scale(1.02); }
+    .media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,8,16,.35) 0%, rgba(12,8,16,0) 40%, rgba(12,8,16,.42) 100%); pointer-events: none; }
+    .media-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: var(--surface-soft); }
+    .fallback-content { display: grid; place-items: center; gap: 6px; color: var(--muted); opacity: .58; }
+    .fallback-mark { position: relative; display: grid; place-items: center; width: 66px; height: 52px; }
+    .fallback-image-icon { width: 54px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; opacity: .48; }
+    .fallback-logo { position: absolute; right: -2px; bottom: -4px; width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 6px; background: #fff; object-fit: contain; padding: 2px; }
+    .fallback-label { max-width: 130px; font-size: 9px; font-weight: 700; text-align: center; }
+
+    .type { position: absolute; top: 9px; left: 9px; max-width: calc(100% - 70px); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 5px 8px; background: rgba(16,12,21,.68); backdrop-filter: blur(8px); color: #fff; font-size: 9px; line-height: 1; font-weight: 800; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+    .carousel-button { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; background: rgba(16,12,21,.58); backdrop-filter: blur(10px); color: #fff; cursor: pointer; opacity: 0; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: opacity 140ms ease, background 140ms ease, transform 140ms ease; }
+    .carousel-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
+    .card:hover .carousel-button, .carousel-button:focus-visible { opacity: 1; }
+    .carousel-button:hover { background: rgba(16,12,21,.82); transform: scale(1.04); }
+    .carousel-button.previous { left: 8px; }
+    .carousel-button.next { right: 8px; }
+    .dots { position: absolute; left: 50%; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 6px; background: rgba(16,12,21,.46); transform: translateX(-50%); }
+    .dot { width: 5px; height: 5px; border: 0; border-radius: 50%; padding: 0; background: rgba(255,255,255,.52); cursor: pointer; transition: width 140ms ease, background 140ms ease; }
+    .dot.active { width: 13px; border-radius: 999px; background: #fff; }
+    @media (hover: none) { .carousel-button { display: none; } }
+    .content { padding: 11px; }
+    .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
+    .title { min-height: 36px; margin: 0; font-size: 13px; line-height: 1.35; font-weight: 820; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+    .rating { flex: 0 0 auto; display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: 999px; padding: 4px 6px; background: linear-gradient(var(--surface-soft), var(--surface-soft)) padding-box, linear-gradient(135deg, var(--purple), var(--magenta), var(--pink)) border-box; font-size: 10px; font-weight: 800; }
+    .rating-value { background: linear-gradient(135deg, var(--purple), var(--magenta), var(--pink)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
+
+    .location { display: flex; align-items: center; gap: 4px; min-width: 0; margin-top: 5px; color: var(--muted); font-size: 10.5px; }
+    .location-icon { width: 12px; height: 12px; flex: 0 0 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+    .location-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
+    .fact { border-radius: 5px; padding: 4px 6px; background: var(--surface-soft); color: var(--muted); font-size: 9.5px; font-weight: 650; }
+    .footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
+    .price-wrap { min-width: 0; }
+    .price-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
+    .price { overflow: hidden; color: var(--text); font-size: 14px; line-height: 1.1; font-weight: 880; text-overflow: ellipsis; white-space: nowrap; }
+    .period { margin-top: 3px; color: var(--muted); font-size: 9.5px; }
+    .verified-price { display: block; flex: 0 0 15px; width: 15px; height: 15px; object-fit: contain; }
+    .host { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--magenta), var(--pink)); padding: 2px; box-shadow: 0 4px 12px rgba(204,55,126,.22); }
+    .host-inner { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border: 2px solid var(--surface); border-radius: 50%; background: var(--surface-soft); color: var(--text); font-size: 9px; font-weight: 850; }
+    .host-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+
+    .empty { padding: 28px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); text-align: center; color: var(--muted); font-size: 12px; }
+    @media (max-width: 360px) { .cards { grid-auto-columns: 90%; } .summary { font-size: 11.5px; } }
+    @media (min-width: 760px) { .cards { grid-auto-flow: initial; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } .cards-nav { display: none; } }
+    @media (prefers-reduced-motion: reduce) { .card, .media-image { transition: none; } }
   </style>
 </head>
 <body>
   <main class="shell">
-    <div class="header">
-      <div class="brand">
-        <div class="mark" aria-hidden="true">L</div>
-        <div><h1 id="heading">Lojiz properties</h1><div class="powered" id="powered">Powered by AIDA on Lojiz</div></div>
-      </div>
-      <div class="count" id="count"></div>
+    <section class="aida-note" id="aidaNote">
+      <img class="aida-note-logo" src="__LOJIZ_LOGO_DATA_URI__" alt="AIDA on Lojiz" />
+      <p class="summary" id="summary"></p>
+    </section>
+    <div class="cards-wrap">
+      <button class="cards-nav previous" id="cardsPrevious" type="button"></button>
+      <section class="cards" id="cards" aria-live="polite"></section>
+      <button class="cards-nav next" id="cardsNext" type="button"></button>
     </div>
-    <p class="summary" id="summary"></p>
-    <section class="cards" id="cards" aria-live="polite"></section>
   </main>
   <script>
     (function () {
+      var logoDataUri = "__LOJIZ_LOGO_DATA_URI__";
+      var verifiedDataUri = "__LOJIZ_VERIFIED_DATA_URI__";
       var labels = {
-        en: { heading: "Properties selected for you", result: "result", results: "results", reason: "Why AIDA chose it", beds: "beds", baths: "baths", guests: "guests", empty: "No matching public listings are available right now." },
-        fr: { heading: "Des biens sélectionnés pour vous", result: "résultat", results: "résultats", reason: "Pourquoi AIDA le recommande", beds: "chambres", baths: "salles de bain", guests: "voyageurs", empty: "Aucun bien public correspondant n'est disponible pour le moment." },
-        es: { heading: "Propiedades elegidas para ti", result: "resultado", results: "resultados", reason: "Por qué AIDA la eligió", beds: "habitaciones", baths: "baños", guests: "huéspedes", empty: "No hay propiedades públicas coincidentes disponibles ahora." },
-        pt: { heading: "Imóveis escolhidos para si", result: "resultado", results: "resultados", reason: "Por que a AIDA escolheu", beds: "quartos", baths: "casas de banho", guests: "hóspedes", empty: "Não há imóveis públicos correspondentes disponíveis agora." },
-        ar: { heading: "عقارات مختارة لك", result: "نتيجة", results: "نتائج", reason: "لماذا اختارته AIDA", beds: "غرف", baths: "حمامات", guests: "ضيوف", empty: "لا توجد عقارات عامة مطابقة متاحة حالياً." }
+        en: { heading: "Properties selected for you", selected: "Selected by AIDA on Lojiz", result: "property", results: "properties", reason: "Why this fits", beds: "beds", baths: "baths", guests: "guests", photos: "photos", empty: "No matching public properties are available right now.", rent: "For rent", sale: "For sale", roommate: "Roommate", shortStay: "Short stay", month: "per month", night: "per night", year: "per year", verified: "Verified host", imageUnavailable: "Photo unavailable", previousPhoto: "Previous photo", nextPhoto: "Next photo", photo: "Photo", previousResults: "Previous properties", nextResults: "Next properties" },
+        fr: { heading: "Des biens sélectionnés pour vous", selected: "Sélectionnés par AIDA sur Lojiz", result: "bien", results: "biens", reason: "Pourquoi ce bien convient", beds: "chambres", baths: "salles de bain", guests: "voyageurs", photos: "photos", empty: "Aucun bien public correspondant n'est disponible pour le moment.", rent: "À louer", sale: "À vendre", roommate: "Colocation", shortStay: "Court séjour", month: "par mois", night: "par nuit", year: "par an", verified: "Hôte vérifié", imageUnavailable: "Photo indisponible", previousPhoto: "Photo précédente", nextPhoto: "Photo suivante", photo: "Photo", previousResults: "Biens précédents", nextResults: "Biens suivants" },
+        es: { heading: "Propiedades elegidas para ti", selected: "Seleccionadas por AIDA en Lojiz", result: "propiedad", results: "propiedades", reason: "Por qué encaja", beds: "habitaciones", baths: "baños", guests: "huéspedes", photos: "fotos", empty: "No hay propiedades públicas coincidentes disponibles ahora.", rent: "En alquiler", sale: "En venta", roommate: "Compañero de piso", shortStay: "Corta estancia", month: "al mes", night: "por noche", year: "al año", verified: "Anfitrión verificado", imageUnavailable: "Foto no disponible", previousPhoto: "Foto anterior", nextPhoto: "Foto siguiente", photo: "Foto", previousResults: "Propiedades anteriores", nextResults: "Propiedades siguientes" },
+        pt: { heading: "Imóveis escolhidos para si", selected: "Selecionados pela AIDA no Lojiz", result: "imóvel", results: "imóveis", reason: "Por que combina", beds: "quartos", baths: "casas de banho", guests: "hóspedes", photos: "fotos", empty: "Não há imóveis públicos correspondentes disponíveis agora.", rent: "Para alugar", sale: "À venda", roommate: "Colega de casa", shortStay: "Estadia curta", month: "por mês", night: "por noite", year: "por ano", verified: "Anfitrião verificado", imageUnavailable: "Foto indisponível", previousPhoto: "Foto anterior", nextPhoto: "Foto seguinte", photo: "Foto", previousResults: "Imóveis anteriores", nextResults: "Imóveis seguintes" },
+        ar: { heading: "عقارات مختارة لك", selected: "اختارتها AIDA على Lojiz", result: "عقار", results: "عقارات", reason: "لماذا يناسبك", beds: "غرف", baths: "حمامات", guests: "ضيوف", photos: "صور", empty: "لا توجد عقارات عامة مطابقة متاحة حالياً.", rent: "للإيجار", sale: "للبيع", roommate: "سكن مشترك", shortStay: "إقامة قصيرة", month: "شهرياً", night: "لليلة", year: "سنوياً", verified: "مضيف موثق", imageUnavailable: "الصورة غير متاحة", previousPhoto: "الصورة السابقة", nextPhoto: "الصورة التالية", photo: "الصورة", previousResults: "العقارات السابقة", nextResults: "العقارات التالية" }
       };
-      var locale = (document.documentElement.lang || "en").toLowerCase().split("-")[0];
-      if (!labels[locale]) locale = "en";
-      var t = labels[locale];
-      var heading = document.getElementById("heading");
-      var powered = document.getElementById("powered");
-      var count = document.getElementById("count");
+      var aidaNote = document.getElementById("aidaNote");
+      var cardsPrevious = document.getElementById("cardsPrevious");
+      var cardsNext = document.getElementById("cardsNext");
       var summary = document.getElementById("summary");
       var cards = document.getElementById("cards");
 
       function text(value) { return value == null ? "" : String(value); }
-      function element(tag, className, value) {
-        var node = document.createElement(tag);
-        if (className) node.className = className;
-        if (value !== undefined) node.textContent = text(value);
-        return node;
+      function element(tag, className, value) { var node = document.createElement(tag); if (className) node.className = className; if (value !== undefined) node.textContent = text(value); return node; }
+      function mapPinIcon() {
+        var namespace = "http://www.w3.org/2000/svg";
+        var icon = document.createElementNS(namespace, "svg");
+        icon.setAttribute("class", "location-icon lucide lucide-map-pin");
+        icon.setAttribute("viewBox", "0 0 24 24");
+        icon.setAttribute("aria-hidden", "true");
+        var path = document.createElementNS(namespace, "path");
+        path.setAttribute("d", "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0");
+        var circle = document.createElementNS(namespace, "circle");
+        circle.setAttribute("cx", "12"); circle.setAttribute("cy", "10"); circle.setAttribute("r", "3");
+        icon.appendChild(path); icon.appendChild(circle);
+        return icon;
       }
-      function price(card) {
-        try { return new Intl.NumberFormat(document.documentElement.lang || "en", { maximumFractionDigits: 0 }).format(Number(card.price || 0)) + " " + text(card.currency); }
-        catch (_) { return text(card.currency) + " " + text(card.price); }
+      function imagePlaceholderIcon() {
+        var namespace = "http://www.w3.org/2000/svg";
+        var icon = document.createElementNS(namespace, "svg");
+        icon.setAttribute("class", "fallback-image-icon lucide lucide-image"); icon.setAttribute("viewBox", "0 0 24 24"); icon.setAttribute("aria-hidden", "true");
+        var rect = document.createElementNS(namespace, "rect"); rect.setAttribute("width", "18"); rect.setAttribute("height", "18"); rect.setAttribute("x", "3"); rect.setAttribute("y", "3"); rect.setAttribute("rx", "2");
+        var circle = document.createElementNS(namespace, "circle"); circle.setAttribute("cx", "9"); circle.setAttribute("cy", "9"); circle.setAttribute("r", "2");
+        var path = document.createElementNS(namespace, "path"); path.setAttribute("d", "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21");
+        icon.appendChild(rect); icon.appendChild(circle); icon.appendChild(path); return icon;
       }
-      function period(value) {
-        var clean = text(value).replace(/_/g, " ").trim();
-        return clean ? "/ " + clean : "";
+      function chevronIcon(direction) {
+        var namespace = "http://www.w3.org/2000/svg";
+        var icon = document.createElementNS(namespace, "svg"); icon.setAttribute("class", "lucide lucide-chevron-" + direction); icon.setAttribute("viewBox", "0 0 24 24"); icon.setAttribute("aria-hidden", "true");
+        var path = document.createElementNS(namespace, "path"); path.setAttribute("d", direction === "left" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6"); icon.appendChild(path); return icon;
       }
-      function addFact(container, value, label) {
-        if (value === null || value === undefined || value === 0) return;
-        container.appendChild(element("span", "fact", text(value) + " " + label));
+      function normalizeLocale(value) { var code = text(value || navigator.language || "en").toLowerCase().split("-")[0]; return labels[code] ? code : "en"; }
+      function formatPrice(card, locale) { try { return new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(Number(card.price || 0)) + " " + text(card.currency).toUpperCase(); } catch (_) { return text(card.currency) + " " + text(card.price); } }
+      function typeLabel(value, t) { var clean = text(value).toLowerCase().replace(/[-_ ]/g, ""); if (clean === "sale") return t.sale; if (clean.indexOf("short") >= 0) return t.shortStay; if (clean.indexOf("room") >= 0) return t.roommate; return t.rent; }
+      function periodLabel(value, listingType, t) { var clean = text(value).toLowerCase(); var type = text(listingType).toLowerCase(); if (clean.indexOf("year") >= 0) return t.year; if (clean.indexOf("night") >= 0 || type.indexOf("short") >= 0) return t.night; if (type === "sale") return ""; return t.month; }
+      function initials(value) { var parts = text(value).trim().split(/s+/).filter(Boolean); if (!parts.length) return "LJ"; return parts.slice(0, 2).map(function (part) { return part.charAt(0); }).join("").toUpperCase(); }
+      function addFact(container, value, label) { if (value === null || value === undefined || Number(value) === 0) return; container.appendChild(element("span", "fact", text(value) + " " + label)); }
+      function openLink(url) {
+        if (window.openai && typeof window.openai.openExternal === "function") {
+          try { window.openai.openExternal({ href: url }); return; } catch (_) {}
+        }
+        window.open(url, "_blank", "noopener,noreferrer");
+      }
+
+      cardsPrevious.appendChild(chevronIcon("left"));
+      cardsNext.appendChild(chevronIcon("right"));
+      function updateCardsNav() {
+        var maxScroll = Math.max(0, cards.scrollWidth - cards.clientWidth);
+        cardsPrevious.disabled = cards.scrollLeft <= 4;
+        cardsNext.disabled = cards.scrollLeft >= maxScroll - 4 || maxScroll <= 4;
       }
-      function cardNode(card, strengths) {
+      function scrollCards(direction) {
+        cards.scrollBy({ left: direction * Math.max(250, cards.clientWidth * .82), behavior: "smooth" });
+      }
+      cardsPrevious.addEventListener("click", function () { scrollCards(-1); });
+      cardsNext.addEventListener("click", function () { scrollCards(1); });
+      cards.addEventListener("scroll", updateCardsNav, { passive: true });
+      window.addEventListener("resize", updateCardsNav, { passive: true });
+      function cardNode(card, t, locale) {
         var article = element("article", "card");
+        article.tabIndex = 0;
+        article.setAttribute("role", "link");
+        article.setAttribute("aria-label", text(card.title) + " — Lojiz");
+        function openCard() { if (card.public_url) openLink(text(card.public_url)); }
+        article.addEventListener("click", openCard);
+        article.addEventListener("keydown", function (event) { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); openCard(); } });
+
         var media = element("div", "media");
-        var fallback = element("div", "media-fallback", "Lojiz");
+        var fallback = element("div", "media-fallback");
+        var fallbackContent = element("div", "fallback-content");
+        var fallbackMark = element("div", "fallback-mark");
+        fallbackMark.appendChild(imagePlaceholderIcon());
+        var fallbackLogo = document.createElement("img");
+        fallbackLogo.className = "fallback-logo"; fallbackLogo.src = logoDataUri; fallbackLogo.alt = "";
+        fallbackMark.appendChild(fallbackLogo); fallbackContent.appendChild(fallbackMark);
+        fallbackContent.appendChild(element("span", "fallback-label", t.imageUnavailable)); fallback.appendChild(fallbackContent);
         media.appendChild(fallback);
+
+        var sources = Array.isArray(card.images) ? card.images.filter(Boolean) : [];
+        var imageIndex = 0;
         var image = document.createElement("img");
+        image.className = "media-image";
         image.alt = text(card.title);
         image.loading = "lazy";
         image.referrerPolicy = "no-referrer";
-        image.addEventListener("load", function () { fallback.hidden = true; });
-        image.addEventListener("error", function () { image.remove(); fallback.hidden = false; });
-        if (Array.isArray(card.images) && card.images[0]) image.src = text(card.images[0]);
+        image.addEventListener("load", function () { image.hidden = false; fallback.hidden = true; image.classList.remove("changing"); });
+        image.addEventListener("error", function () { image.hidden = true; fallback.hidden = false; });
         media.appendChild(image);
-        media.appendChild(element("span", "type", text(card.listing_type).replace(/[-_]/g, " ")));
+        media.appendChild(element("div", "media-shade"));
+        media.appendChild(element("span", "type", typeLabel(card.listing_type, t)));
+
+
+        var dots = null;
+        var autoplayTimer = null;
+        function stopAutoplay() { if (autoplayTimer) { window.clearInterval(autoplayTimer); autoplayTimer = null; } }
+        function startAutoplay() {
+          stopAutoplay();
+          if (sources.length < 2 || window.matchMedia("(prefers-reduced-motion: reduce)").matches || document.hidden) return;
+          autoplayTimer = window.setInterval(function () { showImage(imageIndex + 1); }, 4200);
+        }
+        function showImage(nextIndex) {
+          if (!sources.length) { image.hidden = true; fallback.hidden = false; return; }
+          imageIndex = (nextIndex + sources.length) % sources.length;
+          image.hidden = false;
+          fallback.hidden = true;
+          image.classList.add("changing");
+          image.src = text(sources[imageIndex]);
+          if (dots) Array.from(dots.children).forEach(function (dot, index) { dot.classList.toggle("active", index === imageIndex); });
+        }
+        if (sources.length > 1) {
+          var previous = element("button", "carousel-button previous");
+          previous.appendChild(chevronIcon("left"));
+          previous.type = "button";
+          previous.setAttribute("aria-label", t.previousPhoto);
+          previous.addEventListener("click", function (event) { event.preventDefault(); event.stopPropagation(); showImage(imageIndex - 1); startAutoplay(); });
+          media.appendChild(previous);
+          var next = element("button", "carousel-button next");
+          next.appendChild(chevronIcon("right"));
+          next.type = "button";
+          next.setAttribute("aria-label", t.nextPhoto);
+          next.addEventListener("click", function (event) { event.preventDefault(); event.stopPropagation(); showImage(imageIndex + 1); startAutoplay(); });
+          media.appendChild(next);
+          dots = element("div", "dots");
+          sources.forEach(function (_, index) {
+            var dot = element("button", "dot" + (index === 0 ? " active" : ""));
+            dot.type = "button";
+            dot.setAttribute("aria-label", t.photo + " " + (index + 1));
+            dot.addEventListener("click", function (event) { event.preventDefault(); event.stopPropagation(); showImage(index); startAutoplay(); });
+            dots.appendChild(dot);
+          });
+          media.appendChild(dots);
+        }
+        showImage(0);
+        var pointerStartX = null;
+        media.addEventListener("pointerdown", function (event) { pointerStartX = event.clientX; stopAutoplay(); });
+        media.addEventListener("pointerup", function (event) { if (pointerStartX !== null) { var distance = event.clientX - pointerStartX; if (Math.abs(distance) > 38) showImage(imageIndex + (distance < 0 ? 1 : -1)); } pointerStartX = null; startAutoplay(); });
+        media.addEventListener("pointercancel", function () { pointerStartX = null; startAutoplay(); });
+        article.addEventListener("mouseenter", stopAutoplay);
+        article.addEventListener("mouseleave", startAutoplay);
+        article.addEventListener("focusin", stopAutoplay);
+        article.addEventListener("focusout", startAutoplay);
+        document.addEventListener("visibilitychange", function () { if (document.hidden) stopAutoplay(); else startAutoplay(); });
+        startAutoplay();
         article.appendChild(media);
 
-        var body = element("div", "body");
-        body.appendChild(element("h2", "title", card.title));
-        body.appendChild(element("div", "location", card.location));
-        var priceLine = element("div", "price", price(card));
-        priceLine.appendChild(element("span", "period", period(card.price_type)));
-        body.appendChild(priceLine);
+        var content = element("div", "content");
+        var titleRow = element("div", "title-row");
+        titleRow.appendChild(element("h2", "title", card.title));
+        if (Number(card.rating || 0) > 0) { var rating = element("span", "rating"); rating.appendChild(element("span", "rating-value", "★ " + Number(card.rating).toFixed(1))); titleRow.appendChild(rating); }
+        content.appendChild(titleRow);
+        var location = element("div", "location");
+        location.appendChild(mapPinIcon());
+        location.appendChild(element("span", "location-label", card.location));
+        content.appendChild(location);
         var facts = element("div", "facts");
         addFact(facts, card.bedrooms, t.beds);
         addFact(facts, card.bathrooms, t.baths);
         addFact(facts, card.max_guests, t.guests);
-        body.appendChild(facts);
-        var reason = element("p", "reason");
-        reason.appendChild(element("strong", "", t.reason + ": "));
-        reason.appendChild(document.createTextNode(text(card.match_reason)));
-        body.appendChild(reason);
-        if (Array.isArray(strengths) && strengths.length) {
-          var list = element("ul", "strengths");
-          strengths.slice(0, 3).forEach(function (value) { var li = element("li", "", value); list.appendChild(li); });
-          body.appendChild(list);
+        if (facts.childNodes.length) content.appendChild(facts);
+
+        var footer = element("div", "footer");
+        var priceWrap = element("div", "price-wrap");
+        var priceLine = element("div", "price-line");
+        priceLine.appendChild(element("div", "price", formatPrice(card, locale)));
+        if (card.host_verified) {
+          var verifiedPrice = document.createElement("img");
+          verifiedPrice.className = "verified-price"; verifiedPrice.src = verifiedDataUri; verifiedPrice.alt = t.verified;
+          verifiedPrice.title = t.verified;
+          priceLine.appendChild(verifiedPrice);
         }
-        var link = element("a", "cta", card.action_label || "View on Lojiz");
-        link.href = text(card.public_url);
-        link.target = "_blank";
-        link.rel = "noopener noreferrer";
-        body.appendChild(link);
-        article.appendChild(body);
+        priceWrap.appendChild(priceLine);
+        priceWrap.appendChild(element("div", "period", periodLabel(card.price_type, card.listing_type, t)));
+        footer.appendChild(priceWrap);
+        var host = element("span", "host");
+        host.title = text(card.host_name || "Lojiz host");
+        host.setAttribute("aria-label", text(card.host_name || "Lojiz host"));
+        var hostInner = element("span", "host-inner", initials(card.host_name));
+        if (card.host_avatar) { var avatar = document.createElement("img"); avatar.className = "host-image"; avatar.src = text(card.host_avatar); avatar.alt = text(card.host_name || "Host"); avatar.loading = "lazy"; avatar.referrerPolicy = "no-referrer"; avatar.addEventListener("error", function () { avatar.remove(); }); hostInner.appendChild(avatar); }
+        host.appendChild(hostInner);
+
+        footer.appendChild(host);
+        content.appendChild(footer);
+        article.appendChild(content);
         return article;
       }
+
       function render(data) {
         data = data && typeof data === "object" ? data : {};
+        var locale = normalizeLocale(data.language);
+        var t = labels[locale];
+        document.documentElement.lang = locale;
+        document.documentElement.dir = locale === "ar" ? "rtl" : "ltr";
         var rows = Array.isArray(data.listings) ? data.listings.map(function (listing) { return { listing: listing, strengths: [] }; }) : [];
         if (!rows.length && Array.isArray(data.items)) rows = data.items;
-        heading.textContent = t.heading;
-        powered.textContent = data.powered_by ? "Powered by " + text(data.powered_by) : "Powered by AIDA on Lojiz";
-        count.textContent = rows.length + " " + (rows.length === 1 ? t.result : t.results);
-        summary.textContent = text(data.message);
+
+
+
+        var aidaMessage = text(data.message).trim();
+        summary.textContent = aidaMessage;
+        aidaNote.hidden = !aidaMessage;
+        cardsPrevious.setAttribute("aria-label", t.previousResults);
+        cardsNext.setAttribute("aria-label", t.nextResults);
         cards.replaceChildren();
-        if (!rows.length) { cards.appendChild(element("div", "empty", t.empty)); return; }
-        rows.forEach(function (row) { if (row && row.listing) cards.appendChild(cardNode(row.listing, row.strengths)); });
+        if (!rows.length) { cards.appendChild(element("div", "empty", t.empty)); updateCardsNav(); return; }
+        rows.forEach(function (row) { if (row && row.listing) cards.appendChild(cardNode(row.listing, t, locale)); });
+        window.setTimeout(updateCardsNav, 0);
       }
 
-      window.addEventListener("message", function (event) {
-        if (event.source !== window.parent) return;
-        var message = event.data;
-        if (!message || message.jsonrpc !== "2.0") return;
-        if (message.method === "ui/notifications/tool-result") render(message.params && message.params.structuredContent);
-      }, { passive: true });
-
-      if (window.openai && window.openai.toolOutput) render(window.openai.toolOutput);
-      else render(null);
+      window.addEventListener("message", function (event) { if (event.source !== window.parent) return; var message = event.data; if (!message || message.jsonrpc !== "2.0") return; if (message.method === "ui/notifications/tool-result") render(message.params && message.params.structuredContent); }, { passive: true });
+      if (window.openai && window.openai.toolOutput) render(window.openai.toolOutput); else render(null);
     })();
   </script>
 </body>

integrations/lojiz_guest_mcp/web/preview.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Lojiz MCP card preview</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; min-height: 100vh; background: #ecebf0; color: #201b27; font-family: Inter, system-ui, sans-serif; }
+    header { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1040px; margin: 0 auto; padding: 20px 18px 12px; }
+    h1 { margin: 0; font-size: 18px; }
+    p { margin: 4px 0 0; color: #706979; font-size: 12px; }
+    .badge { border-radius: 999px; padding: 7px 10px; background: #fff; color: #8f489f; font-size: 11px; font-weight: 800; box-shadow: 0 3px 10px rgba(0,0,0,.06); }
+    main { max-width: 1040px; margin: 0 auto; padding: 18px; }
+    .frame { overflow: hidden; border: 1px solid rgba(29,24,36,.11); border-radius: 8px; background: #fff; box-shadow: 0 18px 60px rgba(30,23,38,.12); }
+    iframe { display: block; width: 100%; height: 610px; border: 0; }
+    @media (max-width: 560px) { main { padding: 0; } .frame { border-radius: 0; border-inline: 0; } iframe { height: 650px; } }
+  </style>
+</head>
+<body>
+
+  <main><div class="frame"><iframe id="widget" title="Lojiz property results"></iframe></div></main>
+  <script>
+    var fixture = {
+      success: true,
+      guest_mode: true,
+      powered_by: "AIDA on Lojiz",
+      provider: "chatgpt",
+      language: "en",
+      mode: "recommendation",
+      message: "I found three available homes in Cotonou that match your search.",
+      total: 3,
+      session_id: "preview",
+      listings: [
+        { public_id: "5Q5RQDPK76", title: "Furnished studio in the heart of Cotonou", summary: "", listing_type: "rent", price: 25000, currency: "XOF", price_type: "monthly", location: "Cotonou, Benin", bedrooms: 0, bathrooms: 1, max_guests: null, amenities: ["Furnished"], images: ["https://images.unsplash.com/photo-1522708323590-d24dbb6b0267e?auto=format&fit=crop&w=900&q=80", "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&w=900&q=80"], rating: 4.8, reviews_count: 18, host_name: "Ebuka Destiny", host_avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=120&q=80", host_verified: true, availability: "available", public_url: "https://aida.lojiz.com/listing/studio-meuble-a-louer-a-cotonou-5Q5RQDPK76", action_label: "View on Lojiz" },
+        { public_id: "J8QWXPNXPF", title: "New one-bedroom furnished apartment", summary: "", listing_type: "rent", price: 80000, currency: "XOF", price_type: "monthly", location: "Cotonou, Benin", bedrooms: 1, bathrooms: 2, max_guests: null, amenities: ["Furnished"], images: ["https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?auto=format&fit=crop&w=900&q=80", "https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?auto=format&fit=crop&w=900&q=80", "https://images.unsplash.com/photo-1560185008-b033106af5c3?auto=format&fit=crop&w=900&q=80"], rating: 4.6, reviews_count: 9, host_name: "Yom Sagbo", host_avatar: null, host_verified: true, availability: "available", public_url: "https://aida.lojiz.com/listing/appartement-1-chambre-a-louer-a-cotonou-cotonou-J8QWXPNXPF", action_label: "View on Lojiz" },
+        { public_id: "8XFBC5VGN7", title: "Spacious two-bedroom apartment in Cotonou", summary: "", listing_type: "rent", price: 110000, currency: "XOF", price_type: "monthly", location: "Cotonou, Benin", bedrooms: 2, bathrooms: 2, max_guests: null, amenities: ["Parking"], images: ["https://images.unsplash.com/photo-1494526585095-c41746248156?auto=format&fit=crop&w=900&q=80"], rating: 0, reviews_count: 0, host_name: "John Dossou", host_avatar: null, host_verified: false, availability: "available", public_url: "https://aida.lojiz.com/listing/appartement-2-chambres-a-louer-a-cotonou-8XFBC5VGN7", action_label: "View on Lojiz" }
+      ], search_params: { location: "Cotonou" }
+    };
+    function blobToDataUri(blob) {
+      return new Promise(function (resolve) { var reader = new FileReader(); reader.onload = function () { resolve(reader.result); }; reader.readAsDataURL(blob); });
+    }
+    Promise.all([
+      fetch("listing-cards.html").then(function (response) { return response.text(); }),
+      fetch("lojiz-logo.png").then(function (response) { return response.blob(); }).then(blobToDataUri),
+      fetch("verified-badge.png").then(function (response) { return response.blob(); }).then(blobToDataUri)
+    ]).then(function (values) {
+      var frame = document.getElementById("widget");
+      frame.srcdoc = values[0]
+        .split("__LOJIZ_LOGO_DATA_URI__").join(values[1])
+        .split("__LOJIZ_VERIFIED_DATA_URI__").join(values[2]);
+      frame.onload = function () { frame.contentWindow.postMessage({ jsonrpc: "2.0", method: "ui/notifications/tool-result", params: { structuredContent: fixture } }, "*"); };
+    });  </script>
+</body>
+</html>

tests/test_guest_discovery_contract.py

@@ -28,8 +28,9 @@ def _card(**overrides) -> GuestListingCard:
         "images": ["https://cdn.example.com/one.jpg"],
         "rating": 4.5,
         "reviews_count": 12,
+        "host_name": "Ebuka Destiny",
+        "host_avatar": "https://cdn.example.com/host.jpg",
         "host_verified": True,
-        "match_reason": "AIDA ranked it for the requested location.",
         "public_url": "https://aida.lojiz.com/listing/two-bedroom-A7K92XQ4ZZ",
         "action_label": "View on Lojiz",
     }
@@ -50,6 +51,9 @@ def test_public_contract_ignores_private_listing_fields() -> None:
         claim_token="secret",
     )
     payload = card.model_dump()
+    assert payload["host_name"] == "Ebuka Destiny"
+    assert payload["host_avatar"] == "https://cdn.example.com/host.jpg"
+    assert "match_reason" not in payload
     assert "owner_whatsapp" not in payload
     assert "claim_token" not in payload
 

tests/test_guest_mcp_contract.py

@@ -38,7 +38,18 @@ async def test_guest_mcp_exposes_listing_card_resource():
 
     contents = list(await lojiz_guest_mcp.read_resource(TEMPLATE_URI))
     assert contents
-    assert "View on Lojiz" in str(contents[0].content)
+    html = str(contents[0].content)
+    assert 'class="aida-note-logo"' in html
+    assert ".host {" in html
+    assert 'element("span", "host")' in html
+    assert 'class="cta"' not in html
+    assert "carousel-button" in html
+    assert "match_reason" not in html
+    assert "__LOJIZ_LOGO_DATA_URI__" not in html
+    assert "__LOJIZ_VERIFIED_DATA_URI__" not in html
+    assert "photo-count" not in html
+    assert "lucide-map-pin" in html
+    assert "startAutoplay" in html
 
 @pytest.mark.asyncio
 async def test_guest_mcp_streamable_http_initializes():