brickwise 0.1.15 → 0.1.24

package/bin/brickwise.js

@@ -74,9 +74,38 @@ function openBrowser(url) {
     syncSources();
   }
 
-  if (!fs.existsSync(path.join(workdir, "node_modules", "next"))) {
-    step("Instalando dependencias (solo la primera vez, ~1 min)…");
+  // Reinstall deps on a fresh copy AND whenever the app version changed — an
+  // update can add dependencies (e.g. leaflet.heat), and node_modules is not
+  // copied over, so a stale install would be missing them. A version marker
+  // inside node_modules tells us what was last installed there.
+  const marker = path.join(workdir, "node_modules", ".brickwise-version");
+  const currentVer = (() => {
+    try {
+      return require(path.join(workdir, "package.json")).version || "";
+    } catch {
+      return "";
+    }
+  })();
+  const installedVer = (() => {
+    try {
+      return fs.readFileSync(marker, "utf8").trim();
+    } catch {
+      return null;
+    }
+  })();
+  const nextMissing = !fs.existsSync(path.join(workdir, "node_modules", "next"));
+  if (nextMissing || installedVer !== currentVer) {
+    step(
+      nextMissing
+        ? "Instalando dependencias (solo la primera vez, ~1 min)…"
+        : "Actualizando dependencias tras la actualización…"
+    );
     run(npm, ["install", "--include=dev", "--no-audit", "--no-fund"], workdir);
+    try {
+      fs.writeFileSync(marker, currentVer);
+    } catch {
+      /* non-fatal: worst case we reinstall next launch */
+    }
   }
 
   const port = await findFreePort(Number(process.env.PORT) || 3000);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brickwise",
-  "version": "0.1.15",
+  "version": "0.1.24",
   "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,30 @@
+import { NextRequest, NextResponse } from "next/server";
+import { annualLiquidityByTower, listFavorites } from "@/lib/store";
+
+/**
+ * Liquidity of each located favorite's tower = average annual DLD transactions of
+ * `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). Weight unit is transactions/year.
+ */
+export async function GET(req: NextRequest) {
+  try {
+    const kindParam = req.nextUrl.searchParams.get("kind");
+    const kind: "buy" | "rent" = kindParam === "buy" ? "buy" : "rent";
+    const rates = annualLiquidityByTower(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 ? rates.get(f.tower_slug) ?? 0 : 0,
+      }));
+
+    const max = points.reduce((m, p) => Math.max(m, p.weight), 0);
+    return NextResponse.json({ points, max, kind, unit: "year" });
+  } 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,10 @@ 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 [heatError, setHeatError] = useState<string | null>(null);
   const [showLayers, setShowLayers] = useState(false);
   const [sortBy, setSortBy] = useState<"yield" | "price">("yield");
   const [bedFilter, setBedFilter] = useState<number[]>([]);
@@ -145,6 +165,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);
@@ -181,6 +202,9 @@ export default function FavoritesMapPage() {
         zoomControl: true,
         scrollWheelZoom: false, // replaced by the trackpad handler below
         zoomSnap: 0, // allow fractional zoom for smooth pinch
+        // leaflet.heat ghosts (duplicate shifted blobs) during the animated-zoom
+        // transform; snap zoom so the heat canvas redraws cleanly at each zoom end.
+        zoomAnimation: false,
       });
       L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
         maxZoom: 19,
@@ -204,6 +228,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 +341,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 +499,63 @@ 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);
+    setHeatError(null);
+    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").catch(() => {
+        throw new Error("Falta la dependencia del mapa de calor. Cierra la app y vuelve a arrancarla para que se instale.");
+      }); // 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 (e) {
+      setHeatKind(null);
+      setHeatError((e as Error).message || "No se pudo cargar el mapa de calor.");
+    } finally {
+      setHeatLoading(null);
+    }
+  };
+
   // --- Resizable divider ---------------------------------------------------
   const startDrag = (e: React.MouseEvent) => {
     e.preventDefault();
@@ -628,6 +749,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 +759,28 @@ 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 media anual</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, media al año. Amarillo = poco líquido, morado = mucha actividad.
+                      </p>
+                    )}
+                    {heatError && (
+                      <p className="px-2 pb-1 pt-0.5 text-[10px] leading-tight text-red-600 dark:text-red-400">{heatError}</p>
+                    )}
                   </div>
                 )}
               </div>
@@ -786,23 +923,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 media anual · {heatKind === "rent" ? "contratos" : "ventas"}/año
+            </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>{Math.round(heatMax / 2)}</span>}
+              {heatMax != null && <span>{Math.round(heatMax)}</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" : "Ventas"} en el DLD por edificio, media de operaciones por año.
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { use, useEffect, useState } from "react";
+import { use, useEffect, useMemo, useState } from "react";
 import YieldBadge from "@/components/YieldBadge";
 import TransactionsTable from "@/components/TransactionsTable";
 import PsqftChart from "@/components/PsqftChart";
@@ -8,6 +8,7 @@ import ReformScenario from "@/components/ReformScenario";
 import { fmtAED, fmtDist, fmtPct, fmtSqft } from "@/lib/format";
 import { AnalysisRow } from "@/lib/types";
 import { TxRow } from "@/lib/pf/transactions";
+import { discountVsTrend, psqftTrend } from "@/lib/trend";
 
 interface Detail {
   listing: {
@@ -56,6 +57,15 @@ export default function ListingPage({ params }: { params: Promise<{ id: string }
       .catch((e) => setError(e.message));
   }, [id]);
 
+  // Discount of the asking price vs the sale trend (same trend line as the chart).
+  const discount = useMemo(() => {
+    if (!data) return null;
+    const { listing, transactions } = data;
+    const trend = psqftTrend(transactions?.buy ?? [], listing.size_sqft, listing.bedrooms);
+    const askingPsqft = listing.size_sqft ? listing.price / listing.size_sqft : null;
+    return discountVsTrend(trend, askingPsqft);
+  }, [data]);
+
   if (error)
     return (
       <div className="mx-auto w-full max-w-7xl px-4 py-6">
@@ -79,10 +89,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 +149,77 @@ 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 flex-wrap items-baseline gap-x-2 gap-y-1">
+            <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}
+            {discount != null && (
+              <span
+                className="btn-font ml-1 self-center rounded px-2 py-0.5 text-[11px] font-bold text-white"
+                style={{ background: discount >= 0 ? "#059669" : "#dc2626" }}
+                title="Precio del anuncio frente a la tendencia de AED/sqft de ventas comparables del edificio"
+              >
+                {discount >= 0 ? "▼" : "▲"} {Math.abs(discount * 100).toFixed(0)}% {discount >= 0 ? "bajo tendencia" : "sobre tendencia"}
+              </span>
+            )}
+          </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 +270,61 @@ 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: "Descuento vs tendencia",
+    desc: "AED/sqft del anuncio frente a la línea de tendencia de ventas comparables (la misma del gráfico), evaluada en la fecha más reciente. Verde = por debajo de la tendencia (descuento); rojo = por encima (sobreprecio).",
+  },
+  {
+    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,31 @@ export function listFavorites(): FavoriteListing[] {
     .all() as FavoriteListing[];
 }
 
+/**
+ * Average annual liquidity per tower: DLD transactions of `kind` PER YEAR, over
+ * the full stored history (total count ÷ years spanned by min→max date). Scraping
+ * caps each tower at ~100 tx, so the *rate* — not the raw count — is what compares
+ * a busy tower to a quiet one: 100 sales across 1 year is far more liquid than 100
+ * across 4. Returned as tower_slug → transactions/year.
+ */
+const MS_PER_YEAR = 365.25 * 24 * 3600 * 1000;
+export function annualLiquidityByTower(kind: "buy" | "rent"): Map<string, number> {
+  const rows = getDb()
+    .prepare(
+      `SELECT tower_slug, COUNT(*) n, MIN(date) mn, MAX(date) mx
+       FROM transactions WHERE kind = ? GROUP BY tower_slug`
+    )
+    .all(kind) as { tower_slug: string; n: number; mn: string; mx: string }[];
+  const m = new Map<string, number>();
+  for (const r of rows) {
+    const spanY = (Date.parse(r.mx) - Date.parse(r.mn)) / MS_PER_YEAR;
+    // Floor the span so a burst of transactions in a short window can't explode the rate.
+    const years = Math.max(spanY, 0.5);
+    m.set(r.tower_slug, r.n / years);
+  }
+  return m;
+}
+
 export function listAnalyzed(): AnalyzedListing[] {
   return getDb()
     .prepare(

package/src/lib/trend.ts

@@ -0,0 +1,76 @@
+import { TxRow } from "./pf/transactions";
+
+// Same ±20% "comparable" window the yield sample and the AED/sqft chart use.
+const SIZE_TOLERANCE = 0.2;
+const YEAR_MS = 365.25 * 24 * 3600 * 1000;
+
+export interface TrendResult {
+  /** Trend value (AED/sqft) at the most recent transaction date — the current fair price. */
+  currentPsqft: number;
+  /** Annual drift of the trend, as a fraction (e.g. 0.08 = +8 %/yr). */
+  annualPct: number | null;
+  /** Number of comparable points the fit used. */
+  n: number;
+}
+
+/**
+ * Least-squares trend of AED/sqft over time for a building's transactions,
+ * fitted on comparable units (similar size ±20%, bedrooms fallback) — the exact
+ * line drawn by PsqftChart. `currentPsqft` is that line evaluated at the latest
+ * date, i.e. what a comparable unit is worth per sqft right now.
+ */
+export function psqftTrend(
+  rows: TxRow[],
+  listingSizeSqft: number | null,
+  listingBedrooms: number | null
+): TrendResult | null {
+  const pts = rows
+    .filter((r) => r.size_sqft && r.size_sqft > 0 && r.amount > 0 && r.date)
+    .map((r) => ({
+      t: Date.parse(r.date),
+      y: r.amount / (r.size_sqft as number),
+      comparable:
+        listingSizeSqft != null
+          ? Math.abs((r.size_sqft as number) - listingSizeSqft) / listingSizeSqft <= SIZE_TOLERANCE
+          : listingBedrooms != null && r.bedrooms === listingBedrooms,
+    }))
+    .filter((p) => Number.isFinite(p.t) && Number.isFinite(p.y))
+    .sort((a, b) => a.t - b.t);
+  if (!pts.length) return null;
+
+  const tMin = pts[0].t;
+  const tMax = pts[pts.length - 1].t;
+  const comp = pts.filter((p) => p.comparable);
+  const fitSet = comp.length >= 2 ? comp : pts;
+  if (fitSet.length < 2 || tMax <= tMin) return null;
+
+  const n = fitSet.length;
+  const mt = fitSet.reduce((s, p) => s + p.t, 0) / n;
+  const my = fitSet.reduce((s, p) => s + p.y, 0) / n;
+  let num = 0;
+  let den = 0;
+  for (const p of fitSet) {
+    num += (p.t - mt) * (p.y - my);
+    den += (p.t - mt) ** 2;
+  }
+  const slope = den ? num / den : 0; // AED/sqft per ms
+  const intercept = my - slope * mt;
+
+  return {
+    currentPsqft: intercept + slope * tMax,
+    annualPct: my ? (slope * YEAR_MS) / my : null,
+    n: comp.length >= 2 ? comp.length : pts.length,
+  };
+}
+
+/**
+ * Discount of the asking price vs the current trend, as a fraction: positive when
+ * the listing is cheaper than the trend (a discount), negative when it's above it.
+ */
+export function discountVsTrend(
+  trend: TrendResult | null,
+  askingPsqft: number | null
+): number | null {
+  if (!trend || askingPsqft == null || trend.currentPsqft <= 0) return null;
+  return (trend.currentPsqft - askingPsqft) / trend.currentPsqft;
+}