/* global React, Icon, Button, Avatar, AgentAvatar, Panel, SectionLabel, AgentNote, Segmented, TONES, NetworkMapGraph, SuperConnectorRail, RailHandle, MAP_COMPANIES, COMPANY_CLUSTERS, PERSON_CLUSTERS, MAP_CLUSTERS, MAP_CONNECTORS, MAP_UPDATED, MAP_STATS, PERSONA_DEFS, personasFor, primaryOf, makeDraft, INTRO_STEPS, DIRECT_STEPS, NET_THREADS, DetailPanel, ComposeModal, OutreachDrawer, UpsellModal, SyncOverlay */ // ============================================================ // Get introduced — ONE unified, filterable network map. Replaces the old // per-company / per-person split. You → introducers → targets, with company // clusters that expand in-graph, a super-connector ranking rail, type // filter, zoom, and a "last updated / refresh" affordance (it's a // precomputed aggregation, not a per-open spinner). No route changes. // ============================================================ const { useState: useNet, useEffect: useNetEff } = React; function ScrNetwork({ target, tier = "premium", strength = "strong", spotlight = false }) { const locked = tier === "free"; const weak = strength === "weak"; const [typeF, setTypeF] = useNet("both"); const [expanded, setExpanded] = useNet(null); const [sel, setSel] = useNet(null); // { persona, def } -> detail panel const [compose, setCompose] = useNet(null); const [drawer, setDrawer] = useNet(false); const [upsell, setUpsell] = useNet(false); const [focusId, setFocusId] = useNet(null); // rail-driven introducer focus const [zoom, setZoom] = useNet(1); const [pan, setPan] = useNet({ x: 0, y: 0 }); const [railOpen, setRailOpen] = useNet(true); const [threads, setThreads] = useNet(NET_THREADS); const [toast, setToast] = useNet(null); const [synced, setSynced] = useNet(true); const [resync, setResync] = useNet(false); const [updated, setUpdated] = useNet(MAP_UPDATED); const [refreshing, setRefreshing] = useNet(false); // Deep-link from a way-in badge / tracker Paths action: focus + open a cluster. useNetEff(() => { if (!target) return; const c = target.companyId && MAP_COMPANIES.find(x => x.id === target.companyId); if (c) { setTypeF("both"); setExpanded(c.id); setFocusId(c.via !== "direct" ? c.via : null); } }, [target]); const clusters = typeF === "people" ? PERSON_CLUSTERS : typeF === "companies" ? COMPANY_CLUSTERS : MAP_CLUSTERS; const visConnectors = MAP_CONNECTORS.filter(c => clusters.some(x => x.via === c.id)); const expandedId = typeF === "people" ? null : expanded; const replyWaiting = threads.some(t => t.next && t.next.toLowerCase().includes("reply")); const openPerson = (persona, def) => { if (locked) { setUpsell(true); return; } setSel({ persona, def }); }; const onCompose = (persona, def) => { setSel(null); setCompose({ persona, def }); }; const onApprove = (persona, def) => { const path = primaryOf(persona), direct = path.degree === 1 || !path.score; setThreads(ts => [{ id: "new-" + Date.now(), kind: direct ? "direct" : "intro", statusIndex: 0, target: path.target, introducer: path.introducer || { name: path.bridge || "a contact" }, job: path.target.co ? `Reaching ${path.target.co}` : "Reaching out", updated: "just now", next: direct ? "Sent, awaiting reply" : `Awaiting ${(path.introducer ? path.introducer.name : path.bridge || "intro").split(" ")[0]}`, steps: direct ? DIRECT_STEPS : INTRO_STEPS, score: path.score, timeline: [{ who: "agent", label: direct ? "Offerroom sent your message" : "Offerroom sent the intro request", time: "just now" }], }, ...ts]); setCompose(null); setToast({ name: path.target.name.split(" ")[0], direct }); setTimeout(() => setToast(null), 4000); }; const draftForConnector = (c) => { if (locked) { setUpsell(true); return; } if (c.people && c.people.length) { setCompose({ persona: c.people[0].person.path, def: null }); return; } const co = c.companies[0]; if (!co) return; setCompose({ persona: personasFor(co).hm, def: PERSONA_DEFS[0] }); }; const refresh = () => { if (refreshing) return; setRefreshing(true); setTimeout(() => { setRefreshing(false); setUpdated("just now"); }, 1300); }; const overlayOpen = sel || drawer; return (
{/* ---- Header: context + last-updated/refresh + filter + zoom + outreach ---- */}
The warmest way into all your targets
{MAP_STATS.companies} companies · {MAP_STATS.people} people
{ setTypeF(v); setFocusId(null); }} options={[{ value: "both", label: "Both" }, { value: "companies", label: "Companies" }, { value: "people", label: "People" }]}/>
setZoom(z => Math.max(0.55, +(z - 0.15).toFixed(2)))} mono="−"/> setZoom(z => Math.min(2.0, +(z + 0.15).toFixed(2)))}/>
{/* ---- Body: graph + super-connector rail ---- */}
{weak ? ( { setResync(false); setSynced(false); }}/> ) : ( )} {!weak && !railOpen && !overlayOpen && setRailOpen(true)} count={MAP_STATS.connectors}/>} {refreshing && } {sel && setSel(null)} onCompose={onCompose} onUpsell={() => { setSel(null); setUpsell(true); }}/>} {drawer && setDrawer(false)}/>} {toast && { setToast(null); setDrawer(true); }}/>}
{!weak && railOpen && ( setRailOpen(false)} locked={locked} onUpsell={() => setUpsell(true)}/> )}
{!synced && { setSynced(true); setResync(false); }}/>} {compose && setCompose(null)} onApprove={onApprove}/>} {upsell && setUpsell(false)}/>}
); } const ZoomBtn = ({ mono, label, onClick }) => ( ); // ---- Refresh / re-aggregation cue (not a per-open spinner) ---- const RefreshOverlay = () => (
Re-aggregating paths across your targets…
); // ---- Sparse / empty map (case H5): too few paths to be useful ---- const SparseMap = ({ onSync }) => (
Your map is still thin. I can reach a couple of your targets, but not enough to find a super-connector yet. Widen your network and I'll re-map it.
); const SparseCta = ({ icon, title, sub, cta, onClick }) => (
{title}
{sub}
); // ---- Outreach confirmation toast ---- function Toast({ toast, onView }) { return (
{toast.direct ? `Message to ${toast.name} sent.` : "Intro requested. Tracking it for you."}
); } window.ScrNetwork = ScrNetwork;