// Recursive MLS — Screen 4: Market Insights. // Agent dials in focus areas + filters → a customizable chart dashboard, // an AI ask box, and a client-digest setup. Inspired by Homebot / // HouseCanary Instant Insights / Altos Research market reports. function MarketInsights() { const M = window.RC_MARKET; const CC = window.CHART_COLORS; const [areas, setAreas] = useState(M.areas); const [primary, setPrimary] = useState("a1"); const [tf, setTf] = useState("1Y"); const [ptype, setPtype] = useState("All types"); const [beds, setBeds] = useState("Any beds"); const [compare, setCompare] = useState(true); const [cmpPeriod, setCmpPeriod] = useState("month"); const [addOpen, setAddOpen] = useState(false); const [custOpen, setCustOpen] = useState(false); const [charts, setCharts] = useState({ price: true, supply: true, dom: true, dist: true, gauges: true, ppsf: false }); const active = areas.filter((a) => a.active); const months = M.timeframes.find((t) => t.id === tf).months; const data = M.build(primary, months); const area = areas.find((a) => a.id === primary) || active[0]; const b = data.base; const last = (arr) => arr[arr.length - 1]; const first = (arr) => arr[0]; const pct = (arr) => (((last(arr) - first(arr)) / first(arr)) * 100); const fmtMoney = (n) => "$" + Math.round(n).toLocaleString(); const toggleArea = (id) => setAreas(areas.map((a) => a.id === id ? { ...a, active: !a.active } : a)); const removeArea = (id) => { setAreas(areas.map((a) => a.id === id ? { ...a, active: false } : a)); if (primary === id) { const n = areas.find((a) => a.active && a.id !== id); if (n) setPrimary(n.id); } }; const kpis = [ { label: "Median sale price", val: fmtMoney(last(data.price)), series: data.price, delta: data.yoy.price, pos: true }, { label: "Median $ / sqft", val: "$" + Math.round(last(data.ppsf)), series: data.ppsf, delta: data.yoy.ppsf, pos: true }, { label: "Days on market", val: Math.round(last(data.dom)), series: data.dom, delta: data.yoy.dom, pos: false, lowerBetter: true }, { label: "Months of supply", val: b.moi.toFixed(1), series: data.moi, delta: data.yoy.moi, pos: false, lowerBetter: true, raw: b.moi.toFixed(1) }, { label: "Sale-to-list", val: last(data.stl).toFixed(1) + "%", series: data.stl, delta: data.yoy.stl, pos: true }, { label: "Active listings", val: b.active, series: data.newListings, delta: data.yoy.active, pos: true }, ]; const ChartCard = ({ id, title, sub, action, children, full }) => charts[id] ? (

{title}

{sub &&
{sub}
}
{action}
{children}
) : null; const Legend = ({ items }) => (
{items.map((it) => ( {it.label} ))}
); return (
{/* title row */}

Market Insights

Live market analytics for the areas you work — and beautiful updates your clients actually read.

{/* AREA SELECTOR */}
Focus areas {active.map((a) => { const on = primary === a.id; return ( ); })}
{addOpen && (
{areas.filter((a) => !a.active).map((a) => (
{ toggleArea(a.id); setPrimary(a.id); setAddOpen(false); }} className="rc-nav-item" style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 9px", borderRadius: 6, cursor: "pointer" }}>
{a.name}
{a.type} · {a.sub}
))}
)}
{area ? `${area.type} · ${area.sub}` : ""}
{/* FILTER BAR */}
{M.timeframes.map((t) => ( ))}
{compare && p.id === cmpPeriod).label} options={M.comparePeriods.map((p) => p.label)} onChange={(lab) => setCmpPeriod(M.comparePeriods.find((p) => p.label === lab).id)} />}
Updated today · Miami MLS
{/* MAIN: dashboard + right rail */}
{/* KPI ROW */}
{kpis.map((k) => { const good = k.lowerBetter ? k.delta < 0 : k.delta > 0; return (
{k.label}
{k.raw || k.val}
= 0 ? "arrow-up-right" : "arrow-down-right"} size={12} color={good ? "#1f8a5b" : "#c0612f"} /> {Math.abs(k.delta).toFixed(1)}% YoY
); })}
{/* CHARTS GRID */}
{fmtMoney(last(data.price))}}> {compare && } "$" + Math.round(v)} h={200} compare={compare ? { values: data.ppsfPrior } : null} /> {compare && } Math.round(v) + "d"} h={200} area={false} compare={compare ? { values: data.domPrior } : null} /> {compare && }
60 ? "#c0612f" : b.temp > 45 ? "#e0a020" : "#2a6f8a"} />
60 ? "#c0612f" : "#2a6f8a", marginTop: -6 }}>{b.temp > 60 ? "Seller's market" : b.temp > 45 ? "Balanced" : "Buyer's market"}
Homes selling near asking
{b.moi < 4 ? "Low inventory" : "Healthy inventory"}
{/* RIGHT RAIL */}
); } // ---- price quartiles (always 4 equal-count groups; drill into each) ---- function Quartiles({ data }) { const [sel, setSel] = useState(1); const qs = data.quartiles; const maxC = Math.max(...qs.map((q) => q.count)); const colors = ["#2a6f8a", "#1f8a5b", "#006747", "#c0612f"]; const q = qs[sel]; const stat = (label, val, sub) => (
{label}
{val}
{sub &&
{sub}
}
); return (
{/* bars */}
{qs.map((qq, i) => { const on = i === sel; const h = 34 + (qq.count / maxC) * 70; return ( ); })}
{/* drill-in for selected quartile */}
{q.q} · {q.band} · {q.count} sales
{stat("Median", "$" + (q.median / 1000000 >= 1 ? (q.median / 1000000).toFixed(2) + "M" : Math.round(q.median / 1000) + "K"))} {stat("$ / sqft", "$" + q.ppsf)} {stat("Days on mkt", q.dom + "d", (q.domYoY >= 0 ? "+" : "") + q.domYoY + "d YoY")} {stat("Sale-to-list", q.stl + "%")}
); } // ---- filter pill (popover select) ---- function FilterPill({ icon, value, options, onChange }) { const [open, setOpen] = useState(false); return (
{open && (
{options.map((o) => (
{ onChange(o); setOpen(false); }} className="rc-nav-item" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 10px", borderRadius: 6, cursor: "pointer", fontSize: 13, color: "#1d241f" }}> {o} {o === value && }
))}
)}
); } // ---- AI ask box ---- function AskBox({ area }) { const M = window.RC_MARKET; const [q, setQ] = useState(""); const [a, setA] = useState(null); const [loading, setLoading] = useState(false); const ask = async (question) => { const ques = (question || q).trim(); if (!ques) return; setQ(ques); setA(null); setLoading(true); const fallback = (M.aiSamples.find((s) => s.q === ques) || M.aiSamples[0]).a; try { if (window.claude && window.claude.complete) { const txt = await window.claude.complete(`You are a real-estate market analyst embedded in an MLS tool. The agent is looking at the ${area ? area.name : "selected"} market in Austin, TX. Answer in 2-3 concise sentences with specific, realistic numbers. Question: ${ques}`); setA(txt || fallback); } else { await new Promise((r) => setTimeout(r, 700)); setA(fallback); } } catch (e) { setA(fallback); } setLoading(false); }; return (

Ask about this market