/* ===================================================================== Activus platform demo — Sarah Chen --------------------------------------------------------------------- STATIC re-skin of the redesigned profile template (app/src/app/[slug]/ _view.tsx, the "Claude Design handoff" editorial layout). This is an INDEPENDENT demo: a hand-mirrored static copy, hardcoded mock data, no DB/auth. It deliberately does NOT track future product changes. Flow: land in the AGENT view → open AGENTEVAL → flip to CLIENT view with the simple toggle in the demo bar. ===================================================================== */ const { useState, useMemo, useEffect, useRef } = React; /* ====================================================================== */ /* THEME (mirrors THEME_CSS in _view.tsx, scoped to .ai-page) */ /* ====================================================================== */ const THEME_CSS = ` .ai-page { --bg: #FDFCF8; --paper: #FFFDF8; --paper-2: #F3EEE5; --ink: #0F0E0C; --ink-2: #2E2A26; --ink-3: #5A554C; --mute: #8A8378; --line: #E2DBCC; --line-2: #C9C0AC; --hair: #0F0E0C; --accent: oklch(0.55 0.19 295); --accent-ink: oklch(0.40 0.18 295); --accent-tint: oklch(0.97 0.03 295); --accent-tint-2: oklch(0.93 0.06 295); --precon: oklch(0.55 0.19 295); --resale: oklch(0.50 0.13 240); --luxury: oklch(0.62 0.14 60); --investor: oklch(0.58 0.12 160); --coral: oklch(0.66 0.15 32); --teal: oklch(0.62 0.09 195); /* internal AgentEval signals — ahead / behind peers */ --good: oklch(0.52 0.13 158); --good-ink: oklch(0.42 0.12 158); --good-tint: oklch(0.95 0.04 158); --bad: oklch(0.58 0.16 32); --bad-ink: oklch(0.46 0.16 32); --bad-tint: oklch(0.95 0.04 32); background: var(--bg); color: var(--ink); font-family: "Prompt", system-ui, sans-serif; font-size: 15px; line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; } .ai-page .mono { font-family: "JetBrains Mono", ui-monospace, monospace; } .ai-page .news { font-family: "Newsreader", Georgia, serif; } .ai-page ::selection { background: var(--accent); color: var(--paper); } .ai-heat-cell { position: relative; transition: transform .13s ease, opacity .15s; transform-origin: center bottom; } .ai-heat-cell:hover { transform: scale(1.4); z-index: 3; } .ai-main { display: grid; grid-template-columns: minmax(208px, 290px) 1fr; column-gap: 36px; align-items: start; max-width: 1840px; margin: 0 auto; padding: 8px 16px 0; } @media (max-width: 900px) { .ai-main { grid-template-columns: 1fr !important; } .ai-sticky { position: static !important; } .ai-grid-shift { margin-left: 0 !important; } } `; /* ====================================================================== */ /* MOCK DATA (Fixture shape from _view.tsx, hardcoded for Sarah Chen) */ /* ====================================================================== */ const TYPE_LABEL = { precon: "Pre-construction", resale: "Re-sale", luxury: "Luxury", investor: "Investor" }; const SHORT_MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; function monthLabelsEndingAt(end) { const labels = []; const year = end.getFullYear(); const month = end.getMonth(); for (let i = 11; i >= 0; i--) { const target = new Date(year, month - i, 1); labels.push(SHORT_MONTH_NAMES[target.getMonth()]); } return labels; } const MONTHS = monthLabelsEndingAt(new Date()); function hashStr(s) { let h = 2166136261; for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); } return h >>> 0; } function seeded(seed) { let s = seed % 2147483647; if (s <= 0) s += 2147483646; return () => { s = (s * 16807) % 2147483647; return s / 2147483647; }; } // Deal lifecycle stage (1-6) per house. Front-loaded so the heatmap shows // plenty of early-stage deals (first contact / consultation), not just mature // ones. See the deal-evidence-chain in AgentEval for what each stage means. const STAGE_DIST = [22, 20, 16, 16, 14, 12]; function pickStage(rng) { const tot = STAGE_DIST.reduce((a, b) => a + b, 0); let x = rng() * tot; for (let i = 0; i < STAGE_DIST.length; i++) { x -= STAGE_DIST[i]; if (x <= 0) return i + 1; } return STAGE_DIST.length; } // 6-grade opacity ramp keyed to deal stage (1 = early lead → 6 = closed). The // house's shade IS its progress, so the graph legend reads as a stage gradient. const STAGE_SHADE = [0.3, 0.44, 0.58, 0.72, 0.86, 1.0]; const NINETY_DAYS = 90 * 24 * 3600 * 1000; // MLS-verification window for a closed deal // Fixed "today" so the demo reads like a frozen real dataset — the graph and the // 90-day verification window don't drift as wall-clock time passes. const DEMO_NOW_MS = Date.UTC(2026, 5, 5); // 2026-06-05 const DEMO_NOW = new Date(DEMO_NOW_MS); const SPECIALIZATION = [ { key: "precon", pct: 38, label: "Pre-construction" }, { key: "luxury", pct: 27, label: "Luxury" }, { key: "resale", pct: 25, label: "Re-sale" }, { key: "investor", pct: 10, label: "Investor" }, ]; // 12 months of grouped "houses" — buildHeatmap collapses these into the daily // production grid. Each house carries a deal type + an events (signal) count. const TIMELINE = (function () { const r = seeded(hashStr("sarahchen-timeline")); const pool = []; SPECIALIZATION.forEach((t) => { for (let i = 0; i < t.pct; i++) pool.push(t.key); }); const months = []; for (let m = 0; m < 12; m++) { const season = 0.5 + 0.4 * Math.sin((m / 12) * Math.PI * 2 - 0.6); const houseCount = 2 + Math.floor(r() * 3); const houses = []; for (let h = 0; h < houseCount; h++) { const type = pool[Math.floor(r() * pool.length)]; const events = Math.max(2, Math.round((4 + r() * 12) * (0.6 + season))); houses.push({ intensity: Math.min(4, Math.round(events / 4)), type, label: "", events, month: m, side: r() < 0.55 ? "seller" : "buyer" }); } months.push(houses); } return months; })(); const DATA = { generated_at: "2026-06-04T00:00:00.000Z", agent: { clerk_user_id: "demo", display_name: "Sarah Chen" }, identity: { slug: "sarahchen", avatar_url: null, bio: "Works across downtown Toronto and the western GTA — portfolio skewed toward pre-construction and luxury re-sale condos. Seven years in market, deep builder network, top-quartile repeat rate.", brokerage: "Brokerage member", years_active: 7, languages: [ { name: "English", primary: true }, { name: "Mandarin", primary: false }, { name: "Cantonese", primary: false }, ], }, profile_stats: { total_deals: 319, real_deals: 47, closed_deals: 10, active_deals: 31, multi_property_days: 167, listing_presentations: 22, counter_offer_rounds_total: 63, offer_prep_sessions_total: 73, misc_showings: 120, top_areas: [ { city: "Toronto", deal_count: 21 }, { city: "Mississauga", deal_count: 12 }, { city: "Oakville", deal_count: 8 }, { city: "Vaughan", deal_count: 6 }, ], client_retention: { repeat_rate: 0.68 }, // all-time · linked across years avg_days_to_close: 34, // all-time · trailing 2 years listing_close_rate: 92, // all-time rep_mix: { listing: 55, buyer: 45 }, avg_response_minutes: 108, // fallback; per-year value lives in byYear }, specialization: SPECIALIZATION, areas_served: ["Toronto · 21", "Mississauga · 12", "Oakville · 8", "Vaughan · 6"], // Major deals only ever shows CLOSED deals (public/MLS-verifiable), so these // carry a closed_at. Deals closed > 90 days ago are MLS-verified; ~within 90 // days are recently closed (no badge yet). A couple of active deals are kept // for the pipeline stat but never surface in Major deals. deals: [ { deal_key: "183-yorkville", address_display: "183 Yorkville Ave · Unit 1604", city: "Toronto", side: "seller", status: "closed", deal_type: "luxury", closed_at: "2025-09-12" }, { deal_key: "8-mercer", address_display: "8 Mercer St · Phase 1", city: "Toronto", side: "buyer", status: "closed", deal_type: "precon", closed_at: "2025-11-03" }, { deal_key: "42-helene", address_display: "42 Helene St N", city: "Mississauga", side: "seller", status: "closed", deal_type: "resale", closed_at: "2026-01-20" }, { deal_key: "70-temperance", address_display: "70 Temperance St · Unit 2208", city: "Toronto", side: "buyer", status: "closed", deal_type: "resale", closed_at: "2025-06-30" }, { deal_key: "1500-lakeshore", address_display: "1500 Lakeshore Rd E", city: "Mississauga", side: "seller", status: "closed", deal_type: "luxury", closed_at: "2026-03-28" }, { deal_key: "85-east-liberty", address_display: "85 East Liberty St · 3 units", city: "Toronto", side: "buyer", status: "active", deal_type: "investor" }, ], performance_by_year: { years: [2026, 2025, 2024], primarySide: "listing", // Trailing window (the default "last 12 months" view) — distinct from any one // calendar year because it straddles two. trailing: { closed: 10, active: 31, response_minutes: 108 }, // Per-calendar-year stats. Build-up: first year 2 deals, second year 5; 2026 // is only Jan–Jun so far (6 closed), so its numbers differ from the trailing // window. Active is 0 for past (completed) years. byYear: { "2026": { year: 2026, closed: 6, active: 31, response_minutes: 108, period: "2026" }, "2025": { year: 2025, closed: 5, active: 0, response_minutes: 132, period: "2025" }, "2024": { year: 2024, closed: 2, active: 0, response_minutes: 165, period: "2024" }, }, }, // Units kept proportionate to the precon share of actual closed deals (a // handful, not dozens). One project dropped vs. the earlier inflated list. precon_projects: [ { name: "M City 2", area: "Mississauga · Burnhamthorpe Rd W", units: 2, lat: 43.5905, lng: -79.6440 }, { name: "CentreCourt — Tower Series", area: "Toronto · downtown core", units: 2, lat: 43.6548, lng: -79.3805 }, { name: "LeftBank · Regent Park", area: "Toronto · Regent Park", units: 1, lat: 43.6595, lng: -79.3610 }, { name: "Pier House Towns", area: "Mississauga · Lakeshore Rd E", units: 1, lat: 43.5710, lng: -79.5610 }, ], timeline: TIMELINE, }; /* ====================================================================== */ /* PRIMITIVES */ /* ====================================================================== */ function Mark({ size = 22 }) { return ( ); } function Hairline({ vertical, color = "var(--hair)", opacity = 1, style }) { if (vertical) return
; return
; } function Eyebrow({ children, style }) { return (
{children}
); } function SectionRule({ label, right }) { return (
{label} {right &&
{right}
}
); } function InfoDot({ text, align = "left" }) { const [open, setOpen] = useState(false); return ( setOpen(true)} onMouseLeave={() => setOpen(false)}> {open && ( {text} )} ); } function HeroStat({ value, label, sub, accent, size = "md", style, info, infoAlign }) { const valueSize = size === "lg" ? 56 : size === "sm" ? 30 : 38; return (
{value}
{label} {info && }
{sub &&
{sub}
}
); } function VerifiedPill() { return ( Verified ); } function Photo({ w = 150, h = 178, src }) { const ticks = [ { top: 5, left: 5, borderTopWidth: 1, borderLeftWidth: 1 }, { top: 5, right: 5, borderTopWidth: 1, borderRightWidth: 1 }, { bottom: 5, left: 5, borderBottomWidth: 1, borderLeftWidth: 1 }, { bottom: 5, right: 5, borderBottomWidth: 1, borderRightWidth: 1 }, ]; return (
{src ? ( ) : ( )} {ticks.map((s, i) => (
))}
); } const DETAIL_ICONS = { pin: <>, clock: <>, star: <>, briefcase: <>, link: <>, }; function DetailRow({ icon, children, link }) { return (
{DETAIL_ICONS[icon]} {children}
); } function formatResponse(minutes) { if (minutes == null) return null; if (minutes < 90) return `${minutes}m`; return `${(minutes / 60).toFixed(1)}h`; } function formatRetention(stats) { if (!stats || stats.repeat_rate == null) return null; return `${Math.round(stats.repeat_rate * 100)}%`; } /* ====================================================================== */ /* LEFT RAIL — identity */ /* ====================================================================== */ function ProfileSidebar({ data, showOwnerView }) { const id = data.identity; const name = data.agent.display_name; const handle = id && id.slug ? id.slug : ""; const areas = (data.profile_stats.top_areas || []).slice(0, 3).map((a) => a.city); const url = handle ? `activusai.com/${handle}` : "activusai.com"; // Editable profile fields — local state seeded from data, temporary (resets on // full refresh). Ported from the design handoff agentprofile.jsx ProfileSidebar. const [brokerage, setBrokerage] = useState((id && id.brokerage) || ""); const [langs, setLangs] = useState((id && id.languages) || []); const [bio, setBio] = useState((id && id.bio) || ""); const [editing, setEditing] = useState(false); const [draftBrok, setDraftBrok] = useState(brokerage); const [draftLangs, setDraftLangs] = useState(langs); const [draftBio, setDraftBio] = useState(bio); const [newLang, setNewLang] = useState(""); const isEditing = editing && showOwnerView; const startEdit = () => { setDraftBrok(brokerage); setDraftLangs(langs.map((l) => ({ ...l }))); setDraftBio(bio); setNewLang(""); setEditing(true); }; const cancel = () => setEditing(false); const save = () => { setBrokerage(draftBrok.trim() || brokerage); setLangs(draftLangs); setBio(draftBio.trim()); setEditing(false); }; const addLang = () => { const v = newLang.trim(); if (!v) return; if (draftLangs.some((l) => l.name.toLowerCase() === v.toLowerCase())) { setNewLang(""); return; } setDraftLangs((ls) => [...ls, { name: v, primary: ls.length === 0 }]); setNewLang(""); }; const removeLang = (nm) => setDraftLangs((ls) => { const next = ls.filter((l) => l.name !== nm).map((l) => ({ ...l })); if (next.length && !next.some((l) => l.primary)) next[0].primary = true; return next; }); const setPrimary = (nm) => setDraftLangs((ls) => ls.map((l) => ({ ...l, primary: l.name === nm }))); const shownLangs = isEditing ? draftLangs : langs; return (