brickwise 0.1.15 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brickwise",
-  "version": "0.1.15",
+  "version": "0.1.21",
   "description": "App local para analizar la rentabilidad de alquiler de inmuebles de Property Finder UAE con el histórico real de transacciones DLD.",
   "license": "MIT",
   "author": "eljommys",
@@ -43,6 +43,7 @@
   "dependencies": {
     "better-sqlite3": "^12.11.1",
     "leaflet": "^1.9.4",
+    "leaflet.heat": "^0.2.0",
     "next": "16.2.10",
     "react": "19.2.4",
     "react-dom": "19.2.4"
@@ -51,6 +52,7 @@
     "@tailwindcss/postcss": "^4",
     "@types/better-sqlite3": "^7.6.13",
     "@types/leaflet": "^1.9.21",
+    "@types/leaflet.heat": "^0.2.5",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

package/src/app/api/liquidity/route.ts

@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from "next/server";
+import { listFavorites, txCountByTowerSince } from "@/lib/store";
+
+const MONTHS = 12;
+
+/**
+ * Liquidity of each located favorite's tower = DLD transactions registered in the
+ * last 12 months, split by kind via ?kind=buy|rent (defaults to rent). Feeds the
+ * heatmap: each favorite is a weighted point, so nearby towers blend into a
+ * "how active is this pocket" surface for that market (rentals vs sales).
+ */
+export async function GET(req: NextRequest) {
+  try {
+    const kindParam = req.nextUrl.searchParams.get("kind");
+    const kind: "buy" | "rent" = kindParam === "buy" ? "buy" : "rent";
+    const since = new Date();
+    since.setMonth(since.getMonth() - MONTHS);
+    const sinceISO = since.toISOString().slice(0, 10);
+    const counts = txCountByTowerSince(sinceISO, kind);
+
+    const points = listFavorites()
+      .filter((f) => f.lat != null && f.lon != null)
+      .map((f) => ({
+        id: f.id,
+        lat: f.lat as number,
+        lon: f.lon as number,
+        weight: f.tower_slug ? counts.get(f.tower_slug) ?? 0 : 0,
+      }));
+
+    const max = points.reduce((m, p) => Math.max(m, p.weight), 0);
+    return NextResponse.json({ points, max, months: MONTHS, kind });
+  } catch (e) {
+    return NextResponse.json({ error: (e as Error).message }, { status: 500 });
+  }
+}

package/src/app/favorites/page.tsx

@@ -77,6 +77,21 @@ const SAVED_URL = "https://www.propertyfinder.ae/en/user/saved-properties";
 // strips javascript: hrefs.
 const BOOKMARKLET = String.raw`javascript:(function(){var u=new Set();document.querySelectorAll('a[href]').forEach(function(a){var h=(a.href||'').split('?')[0];if(/\/plp\/.*-\d+\.html$/.test(h))u.add(h)});try{var n=document.getElementById('__NEXT_DATA__');if(n){(JSON.stringify(JSON.parse(n.textContent)).match(/https?:\/\/[^"']*\/plp\/[^"']*-\d+\.html/g)||[]).forEach(function(x){u.add(x.split('?')[0])})}}catch(e){}var l=[...u];if(!l.length){alert('No encontre pisos guardados aqui. Abre tu pagina de Guardados de Property Finder con la sesion iniciada.');return}var t=l.join('\n');if(navigator.clipboard){navigator.clipboard.writeText(t).then(function(){alert(l.length+' piso(s) copiados. Abre Brickwise y pulsa "Pegar de Property Finder".')},function(){prompt('Copia estos enlaces y pegalos en Brickwise:',t)})}else{prompt('Copia estos enlaces y pegalos en Brickwise:',t)}})();`;
 
+// leaflet.heat's radius is in screen pixels, so a fixed value shrinks in real-world
+// terms as you zoom in. Anchor the radius to a reference zoom and scale by 2^(Δzoom)
+// (each zoom level doubles pixels-per-meter) so the geographic influence stays constant.
+const HEAT_REF_ZOOM = 12;
+const HEAT_REF_RADIUS = 40;
+const HEAT_REF_BLUR = 22;
+function heatRadiusForZoom(zoom: number): { radius: number; blur: number } {
+  const scale = Math.pow(2, zoom - HEAT_REF_ZOOM);
+  const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+  return {
+    radius: clamp(HEAT_REF_RADIUS * scale, 6, 900),
+    blur: clamp(HEAT_REF_BLUR * scale, 4, 500),
+  };
+}
+
 function LayerToggle({
   label,
   color,
@@ -123,6 +138,7 @@ export default function FavoritesMapPage() {
   const [input, setInput] = useState("");
   const [queue, setQueue] = useState<string[]>([]);
   const [errors, setErrors] = useState<string[]>([]);
+  const [skippedMsg, setSkippedMsg] = useState<string | null>(null);
   const [sidebarW, setSidebarW] = useState(() => {
     if (typeof window === "undefined") return 440;
     const saved = Number(localStorage.getItem("bw-sidebar-w"));
@@ -135,6 +151,9 @@ export default function FavoritesMapPage() {
   const [cafesVisible, setCafesVisible] = useState(false);
   const [cafesLoading, setCafesLoading] = useState(false);
   const [cafeCount, setCafeCount] = useState<number | null>(null);
+  const [heatKind, setHeatKind] = useState<"rent" | "buy" | null>(null);
+  const [heatLoading, setHeatLoading] = useState<"rent" | "buy" | null>(null);
+  const [heatMax, setHeatMax] = useState<number | null>(null);
   const [showLayers, setShowLayers] = useState(false);
   const [sortBy, setSortBy] = useState<"yield" | "price">("yield");
   const [bedFilter, setBedFilter] = useState<number[]>([]);
@@ -145,6 +164,7 @@ export default function FavoritesMapPage() {
   const markersRef = useRef<Record<string, Marker>>({});
   const gymLayerRef = useRef<LayerGroup | null>(null);
   const cafeLayerRef = useRef<LayerGroup | null>(null);
+  const heatLayerRef = useRef<import("leaflet").Layer | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const didFitRef = useRef(false);
   const processing = useRef(false);
@@ -204,6 +224,16 @@ export default function FavoritesMapPage() {
       };
       el.addEventListener("wheel", onWheel, { passive: false });
       map.on("remove", () => el.removeEventListener("wheel", onWheel));
+
+      // Keep the heat influence constant in real-world size across zoom levels:
+      // rescale the pixel radius whenever the zoom settles.
+      map.on("zoomend", () => {
+        const layer = heatLayerRef.current as unknown as {
+          setOptions?: (o: Record<string, unknown>) => void;
+        } | null;
+        if (!layer?.setOptions) return;
+        layer.setOptions(heatRadiusForZoom(map.getZoom()));
+      });
       let tries = 0;
       const timer = setInterval(() => {
         tries++;
@@ -307,32 +337,62 @@ export default function FavoritesMapPage() {
       });
   }, [queue, load]);
 
-  const enqueueUrls = (raw: string): number => {
+  // Same id extraction the server does (parseListingUrl in the API route).
+  const listingIdOf = (u: string): string | null => {
+    try {
+      const p = new URL(u).pathname;
+      const m = p.match(/-(\d+)\.html$/) || p.match(/\/(\d+)(?:\/)?$/);
+      return m ? m[1] : null;
+    } catch {
+      return null;
+    }
+  };
+
+  const enqueueUrls = (raw: string): { added: number; skipped: number } => {
     const urls = raw
       .split(/[\n\s,]+/)
       .map((s) => s.trim())
       .filter((s) => s.startsWith("http") && /propertyfinder\.ae/.test(s));
-    if (urls.length) {
+    // Discard the ones already saved (and de-dupe the paste itself) so only new
+    // listings get analysed — no wasted scrape/round-trip on ones we already have.
+    const have = new Set((rows ?? []).map((r) => r.id));
+    const seen = new Set<string>();
+    const fresh: string[] = [];
+    let skipped = 0;
+    for (const u of urls) {
+      const id = listingIdOf(u);
+      if (id && (have.has(id) || seen.has(id))) {
+        skipped++;
+        continue;
+      }
+      if (id) seen.add(id);
+      fresh.push(u);
+    }
+    if (fresh.length) {
       setErrors([]);
-      setQueue((prev) => [...prev, ...urls]);
+      setQueue((prev) => [...prev, ...fresh]);
     }
-    return urls.length;
+    setSkippedMsg(skipped > 0 ? `${skipped} ya guardado${skipped === 1 ? "" : "s"}, descartado${skipped === 1 ? "" : "s"}.` : null);
+    return { added: fresh.length, skipped };
   };
 
   const submit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (enqueueUrls(input) > 0) setInput("");
+    const { added, skipped } = enqueueUrls(input);
+    if (added > 0 || skipped > 0) setInput("");
   };
 
   const pasteFromPf = async () => {
     setSyncMsg(null);
     try {
       const text = await navigator.clipboard.readText();
-      const n = enqueueUrls(text);
+      const { added, skipped } = enqueueUrls(text);
       setSyncMsg(
-        n > 0
-          ? `${n} piso${n === 1 ? "" : "s"} en cola — analizando y añadiendo…`
-          : "El portapapeles no tenía enlaces de Property Finder. Ejecuta el marcador en tu página de Guardados primero."
+        added > 0
+          ? `${added} piso${added === 1 ? "" : "s"} nuevo${added === 1 ? "" : "s"} en cola — analizando y añadiendo…${skipped > 0 ? ` (${skipped} ya guardado${skipped === 1 ? "" : "s"})` : ""}`
+          : skipped > 0
+            ? `Los ${skipped} piso${skipped === 1 ? "" : "s"} del portapapeles ya estaban guardados. Nada nuevo que analizar.`
+            : "El portapapeles no tenía enlaces de Property Finder. Ejecuta el marcador en tu página de Guardados primero."
       );
     } catch {
       setSyncMsg("No pude leer el portapapeles. Pega los enlaces manualmente en el cuadro de arriba.");
@@ -435,6 +495,59 @@ export default function FavoritesMapPage() {
       layerRef: cafeLayerRef, visible: cafesVisible, setVisible: setCafesVisible, setLoading: setCafesLoading, setCount: setCafeCount,
     });
 
+  // Liquidity heatmap: DLD transactions per tower (last 12 months) as a heat surface.
+  // Rent and sale are separate markets, so only one kind shows at a time.
+  const toggleLiquidity = async (kind: "rent" | "buy") => {
+    const map = mapRef.current;
+    if (!map || !leafletRef.current) return;
+    // Clicking the active kind turns it off.
+    if (heatKind === kind) {
+      if (heatLayerRef.current) map.removeLayer(heatLayerRef.current);
+      heatLayerRef.current = null;
+      setHeatKind(null);
+      return;
+    }
+    // Switching kinds: drop the current layer first.
+    if (heatLayerRef.current) {
+      map.removeLayer(heatLayerRef.current);
+      heatLayerRef.current = null;
+    }
+    setHeatLoading(kind);
+    try {
+      const res = await fetch(`/api/liquidity?kind=${kind}`);
+      const j = await res.json();
+      if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
+      await import("leaflet.heat"); // patches L.heatLayer
+      const max = j.max || 1;
+      setHeatMax(j.max ?? null);
+      // Each favorite blooms proportionally to its tower's recent activity; a small
+      // floor keeps even low-liquidity listings visible as a faint mark.
+      const pts = (j.points as { lat: number; lon: number; weight: number }[]).map(
+        (p) => [p.lat, p.lon, Math.max(0.15, p.weight / max)] as [number, number, number]
+      );
+      type HeatFn = (latlngs: [number, number, number][], opts?: Record<string, unknown>) => import("leaflet").Layer;
+      const Lmod = leafletRef.current as unknown as { heatLayer?: HeatFn; default?: { heatLayer?: HeatFn } };
+      const heatLayer = Lmod.heatLayer ?? Lmod.default?.heatLayer;
+      if (!heatLayer) throw new Error("plugin de calor no disponible");
+      const { radius, blur } = heatRadiusForZoom(map.getZoom());
+      const layer = heatLayer(pts, {
+        radius,
+        blur,
+        max: 1,
+        minOpacity: 0.55,
+        // Yellow (low) → purple (high).
+        gradient: { 0.15: "#fef08a", 0.4: "#fde047", 0.65: "#d946ef", 1.0: "#7c3aed" },
+      });
+      layer.addTo(map);
+      heatLayerRef.current = layer;
+      setHeatKind(kind);
+    } catch {
+      setHeatKind(null);
+    } finally {
+      setHeatLoading(null);
+    }
+  };
+
   // --- Resizable divider ---------------------------------------------------
   const startDrag = (e: React.MouseEvent) => {
     e.preventDefault();
@@ -628,6 +741,9 @@ export default function FavoritesMapPage() {
               >
                 {busy ? `Analizando ${queue.length}…` : "Añadir y analizar"}
               </button>
+              {skippedMsg && (
+                <p className="text-[11px] text-neutral-500 dark:text-neutral-400">{skippedMsg}</p>
+              )}
               <div className="relative">
                 <button
                   type="button"
@@ -635,15 +751,25 @@ export default function FavoritesMapPage() {
                   disabled={(rows?.length ?? 0) === 0}
                   className="flex w-full items-center justify-center gap-1 rounded-lg border border-neutral-300 py-2 text-xs font-semibold hover:bg-neutral-100 disabled:opacity-50 dark:border-neutral-700 dark:hover:bg-neutral-800"
                 >
-                  Puntos cercanos
+                  Capas del mapa
                   <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className={`transition-transform ${showLayers ? "rotate-180" : ""}`}>
                     <path d="M6 9l6 6 6-6" />
                   </svg>
                 </button>
                 {showLayers && (
                   <div className="absolute inset-x-0 top-full z-30 mt-1 rounded-lg border border-neutral-200 bg-white p-1 shadow-lg dark:border-neutral-800 dark:bg-neutral-900">
+                    <p className="px-2 pb-0.5 pt-1 text-[10px] uppercase tracking-wide text-neutral-400">Puntos cercanos</p>
                     <LayerToggle label="Gimnasios" color="#b84f30" loading={gymsLoading} visible={gymsVisible} count={gymCount} onToggle={toggleGyms} />
                     <LayerToggle label="Cafeterías" color="#6f4e37" loading={cafesLoading} visible={cafesVisible} count={cafeCount} onToggle={toggleCafes} />
+                    <div className="my-1 border-t border-neutral-200 dark:border-neutral-800" />
+                    <p className="px-2 pb-0.5 pt-0.5 text-[10px] uppercase tracking-wide text-neutral-400">Mapa de calor de liquidez (12m)</p>
+                    <LayerToggle label="Alquiler" color="#d946ef" loading={heatLoading === "rent"} visible={heatKind === "rent"} count={null} onToggle={() => toggleLiquidity("rent")} />
+                    <LayerToggle label="Venta" color="#7c3aed" loading={heatLoading === "buy"} visible={heatKind === "buy"} count={null} onToggle={() => toggleLiquidity("buy")} />
+                    {heatKind && (
+                      <p className="px-2 pb-1 pt-0.5 text-[10px] leading-tight text-neutral-500">
+                        {heatKind === "rent" ? "Contratos de alquiler" : "Ventas"} (DLD) por edificio, últimos 12 meses. Amarillo = poco líquido, morado = mucha actividad.
+                      </p>
+                    )}
                   </div>
                 )}
               </div>
@@ -786,23 +912,29 @@ export default function FavoritesMapPage() {
       {/* ------------------------------------------------ map */}
       <div className="relative min-h-0 min-w-0 flex-1">
         <div ref={containerRef} className="absolute inset-0" />
-        <div className="pointer-events-none absolute bottom-4 left-3 z-[500] rounded border border-black/10 bg-white/90 px-2.5 py-2 text-neutral-700 shadow-lg dark:border-white/10 dark:bg-neutral-900/90 dark:text-neutral-200">
-          <div className="btn-font mb-1 text-[9px] text-neutral-500">Rentabilidad anual</div>
-          <div
-            className="h-2 w-52 rounded-sm"
-            style={{ background: "linear-gradient(90deg, hsl(0,66%,44%), hsl(87,66%,44%), hsl(174,66%,44%))" }}
-          />
-          <div className="mt-1 flex w-52 justify-between text-[10px] font-semibold">
-            <span>Mediocre</span>
-            <span>Bueno</span>
-            <span>Espectacular</span>
-          </div>
-          <div className="flex w-52 justify-between text-[9px] text-neutral-500">
-            <span>≤6%</span>
-            <span>8–9%</span>
-            <span>10%+</span>
+        {heatKind && (
+          <div className="pointer-events-none absolute bottom-4 left-3 z-[500] rounded border border-black/10 bg-white/90 px-2.5 py-2 text-neutral-700 shadow-lg dark:border-white/10 dark:bg-neutral-900/90 dark:text-neutral-200">
+            <div className="btn-font mb-1 text-[9px] text-neutral-500">
+              Liquidez {heatKind === "rent" ? "alquiler" : "venta"} · {heatKind === "rent" ? "contratos" : "ventas"}/mes
+            </div>
+            <div
+              className="h-2 w-52 rounded-sm"
+              style={{ background: "linear-gradient(90deg, #fef08a, #fde047, #d946ef, #7c3aed)" }}
+            />
+            <div className="mt-1 flex w-52 justify-between text-[10px] font-semibold">
+              <span>0</span>
+              {heatMax != null && <span>{(heatMax / 24).toFixed(1)}</span>}
+              {heatMax != null && <span>{(heatMax / 12).toFixed(1)}</span>}
+            </div>
+            <div className="flex w-52 justify-between text-[9px] text-neutral-500">
+              <span>parado</span>
+              <span>activo</span>
+            </div>
+            <div className="mt-0.5 w-52 text-[9px] leading-tight text-neutral-400">
+              {heatKind === "rent" ? "Contratos de alquiler registrados" : "Ventas registradas"} en el DLD por edificio, últimos 12 meses.
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );

package/src/app/listing/[id]/page.tsx

@@ -79,10 +79,6 @@ export default function ListingPage({ params }: { params: Promise<{ id: string }
           <h1 className="text-2xl font-bold">{listing.title}</h1>
           <YieldBadge value={analysis.gross_yield} n={analysis.rent_n} />
         </div>
-        <p className="mt-1 text-sm text-neutral-500">
-          {listing.tower_name} · {listing.bedrooms === 0 ? "Studio" : `${listing.bedrooms ?? "?"} hab`} ·{" "}
-          {listing.bathrooms ?? "?"} baños · {fmtSqft(listing.size_sqft)} · {listing.property_type}
-        </p>
         <div className="mt-1 flex items-center gap-4">
           <a
             href={listing.url}
@@ -143,41 +139,68 @@ export default function ListingPage({ params }: { params: Promise<{ id: string }
         </div>
       )}
 
-      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-        <Stat
-          label="Rentabilidad anual de alquiler"
-          value={fmtPct(analysis.gross_yield)}
-          sub="renta anual mediana ÷ precio de venta mediana (unidades comparables del edificio)"
-          accent={analysis.gross_yield != null && analysis.gross_yield >= 0.06 ? "good" : undefined}
-        />
-        <Stat
-          label="Se alquila por (año, mediana)"
-          value={fmtAED(analysis.median_rent)}
-          sub={`${analysis.rent_n} alquiler${analysis.rent_n === 1 ? "" : "es"} de tamaño similar (±20%, 24 meses)${
-            analysis.rent_p25 != null && analysis.rent_p75 != null
-              ? ` · rango ${fmtAED(analysis.rent_p25)}–${fmtAED(analysis.rent_p75)}`
-              : ""
-          }`}
-        />
-        <Stat
-          label="Se vende por (mediana)"
-          value={fmtAED(analysis.median_sale_price)}
-          sub={`${analysis.buy_n} venta${analysis.buy_n === 1 ? "" : "s"} de tamaño similar (±20%, 24 meses)${
-            analysis.sale_p25 != null ? ` · objetivo compra p/ reformar ≈ ${fmtAED(analysis.sale_p25)} (P25)` : ""
-          }`}
-        />
-        <Stat
-          label="Rentabilidad sobre el precio del anuncio"
-          value={fmtPct(analysis.asking_yield)}
-          sub={`si lo compras por ${fmtAED(listing.price)}`}
-        />
-        <Stat
-          label="Gimnasio más cercano (OSM)"
-          value={fmtDist(analysis.gym_distance_m)}
-          sub={analysis.gym_name ?? undefined}
-        />
-        <Stat label="AED/sqft del anuncio" value={listing.size_sqft ? `${Math.round(listing.price / listing.size_sqft)} AED/sqft` : "—"} />
-      </div>
+      {/* -------- Datos básicos (raw property facts) ------------------------ */}
+      <section>
+        <h2 className="mb-2 text-sm font-bold uppercase tracking-wide text-neutral-500">Datos básicos</h2>
+        <div className="rounded-xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
+          <p className="flex items-baseline gap-2">
+            <span className="text-3xl font-bold" style={{ color: "var(--accent)" }}>{fmtAED(listing.price)}</span>
+            {listing.size_sqft ? (
+              <span className="text-sm text-neutral-500">· {Math.round(listing.price / listing.size_sqft)} AED/sqft</span>
+            ) : null}
+          </p>
+          <div className="mt-3 grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-3 lg:grid-cols-6">
+            <Fact label="Superficie" value={fmtSqft(listing.size_sqft)} />
+            <Fact label="Habitaciones" value={listing.bedrooms === 0 ? "Studio" : listing.bedrooms != null ? String(listing.bedrooms) : "—"} />
+            <Fact label="Baños" value={listing.bathrooms != null ? String(listing.bathrooms) : "—"} />
+            <Fact label="Tipo" value={listing.property_type || "—"} />
+            <Fact label="AED/sqft" value={listing.size_sqft ? `${Math.round(listing.price / listing.size_sqft)}` : "—"} />
+            <Fact label="Edificio" value={listing.tower_name || "—"} />
+          </div>
+        </div>
+      </section>
+
+      {/* -------- Análisis (computed metrics) ------------------------------- */}
+      <section>
+        <h2 className="mb-2 flex items-center text-sm font-bold uppercase tracking-wide text-neutral-500">
+          Análisis
+          <InfoList items={ANALYSIS_HELP} />
+        </h2>
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          <Stat
+            label="Rentabilidad anual de alquiler"
+            value={fmtPct(analysis.gross_yield)}
+            sub="renta anual mediana ÷ precio de venta mediana (unidades comparables del edificio)"
+            accent={analysis.gross_yield != null && analysis.gross_yield >= 0.06 ? "good" : undefined}
+          />
+          <Stat
+            label="Se alquila por (año, mediana)"
+            value={fmtAED(analysis.median_rent)}
+            sub={`${analysis.rent_n} alquiler${analysis.rent_n === 1 ? "" : "es"} de tamaño similar (±20%, 24 meses)${
+              analysis.rent_p25 != null && analysis.rent_p75 != null
+                ? ` · rango ${fmtAED(analysis.rent_p25)}–${fmtAED(analysis.rent_p75)}`
+                : ""
+            }`}
+          />
+          <Stat
+            label="Se vende por (mediana)"
+            value={fmtAED(analysis.median_sale_price)}
+            sub={`${analysis.buy_n} venta${analysis.buy_n === 1 ? "" : "s"} de tamaño similar (±20%, 24 meses)${
+              analysis.sale_p25 != null ? ` · objetivo compra p/ reformar ≈ ${fmtAED(analysis.sale_p25)} (P25)` : ""
+            }`}
+          />
+          <Stat
+            label="Rentabilidad sobre el precio del anuncio"
+            value={fmtPct(analysis.asking_yield)}
+            sub={`si lo compras por ${fmtAED(listing.price)}`}
+          />
+          <Stat
+            label="Gimnasio más cercano (OSM)"
+            value={fmtDist(analysis.gym_distance_m)}
+            sub={analysis.gym_name ?? undefined}
+          />
+        </div>
+      </section>
 
       {listing.amenities?.length > 0 && (
         <div className="flex flex-wrap gap-1.5">
@@ -228,6 +251,57 @@ export default function ListingPage({ params }: { params: Promise<{ id: string }
   );
 }
 
+const ANALYSIS_HELP: { term: string; desc: string }[] = [
+  {
+    term: "Rentabilidad anual de alquiler",
+    desc: "Renta anual mediana ÷ precio de venta mediana de unidades comparables (mismo edificio, tamaño ±20%, últimos 24 meses). Es la rentabilidad bruta que da el mercado, independiente del precio de este anuncio.",
+  },
+  {
+    term: "Se alquila por (año, mediana)",
+    desc: "Mediana de los contratos de alquiler anuales de unidades de tamaño similar (±20%) del edificio, últimos 24 meses. El rango es P25–P75: lo que pagan los pisos peor y mejor acondicionados.",
+  },
+  {
+    term: "Se vende por (mediana)",
+    desc: "Mediana de las ventas registradas en el DLD de tamaño similar (±20%), últimos 24 meses. El P25 es el tramo bajo del mercado ≈ precio objetivo de compra para reformar.",
+  },
+  {
+    term: "Rentabilidad sobre el precio del anuncio",
+    desc: "Renta anual mediana ÷ el precio que pide ESTE anuncio. Indica si este piso, a su precio, rinde por encima o por debajo de la mediana del edificio.",
+  },
+  {
+    term: "Gimnasio más cercano",
+    desc: "Distancia en línea recta al gimnasio más próximo según OpenStreetMap.",
+  },
+];
+
+function Fact({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <div className="text-[11px] font-semibold uppercase tracking-wide text-neutral-400">{label}</div>
+      <div className="mt-0.5 text-sm font-medium">{value}</div>
+    </div>
+  );
+}
+
+function InfoList({ items }: { items: { term: string; desc: string }[] }) {
+  return (
+    <span className="group relative ml-2 inline-flex align-middle normal-case">
+      <span className="flex h-4 w-4 cursor-help items-center justify-center rounded-full border border-neutral-400 text-[10px] font-bold text-neutral-500 dark:border-neutral-500">
+        ?
+      </span>
+      <span className="pointer-events-none absolute left-0 top-6 z-30 w-80 rounded-md border border-neutral-200 bg-white p-3 text-left opacity-0 shadow-lg transition-opacity group-hover:opacity-100 dark:border-neutral-700 dark:bg-neutral-800">
+        <span className="mb-1 block text-[11px] font-bold uppercase tracking-wide text-neutral-500">Cómo leer cada campo</span>
+        {items.map((it) => (
+          <span key={it.term} className="mb-2 block last:mb-0">
+            <span className="block text-[11px] font-semibold text-neutral-700 dark:text-neutral-200">{it.term}</span>
+            <span className="block text-[11px] font-normal leading-snug text-neutral-500 dark:text-neutral-400">{it.desc}</span>
+          </span>
+        ))}
+      </span>
+    </span>
+  );
+}
+
 function Stat({ label, value, sub, accent }: { label: string; value: string; sub?: string; accent?: "good" | "bad" }) {
   return (
     <div className="rounded-xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">

package/src/lib/store.ts

@@ -176,6 +176,24 @@ export function listFavorites(): FavoriteListing[] {
     .all() as FavoriteListing[];
 }
 
+/**
+ * Liquidity proxy: number of DLD transactions per tower registered on/after
+ * `sinceISO`, optionally restricted to one kind ('buy' | 'rent'). Raw totals are
+ * capped at ~100/kind by scraping, so recent activity — not the lifetime count —
+ * is what separates a liquid tower from a stale one. Returned as tower_slug → count.
+ */
+export function txCountByTowerSince(sinceISO: string, kind?: "buy" | "rent"): Map<string, number> {
+  const db = getDb();
+  const rows = (
+    kind
+      ? db.prepare(`SELECT tower_slug, COUNT(*) n FROM transactions WHERE date >= ? AND kind = ? GROUP BY tower_slug`).all(sinceISO, kind)
+      : db.prepare(`SELECT tower_slug, COUNT(*) n FROM transactions WHERE date >= ? GROUP BY tower_slug`).all(sinceISO)
+  ) as { tower_slug: string; n: number }[];
+  const m = new Map<string, number>();
+  for (const r of rows) m.set(r.tower_slug, r.n);
+  return m;
+}
+
 export function listAnalyzed(): AnalyzedListing[] {
   return getDb()
     .prepare(