// PERSONA — Full entity detail page (mirrors CaseDetail pattern) const { useState: usePnEpState } = React; const Tpnep = window.ArbiterTokens; function PersonaEntityPage({ person: p, data, onBack }) { const pn = window.__pn; const [activeTab, setActiveTab] = usePnEpState('overview'); if (!p) return null; const tc = pn.typeColor(p.type); const rc = pn.riskColor(p.risk); const docs = data.documents.filter(d => d.personId === p.id); const assocs = data.associations.filter(a => a.source === p.id || a.target === p.id); const tabs = [ { id: 'overview', label: 'Overview' }, { id: 'psychometrics', label: 'Psychometrics' }, { id: 'network', label: 'Network' }, { id: 'documents', label: `Documents (${docs.length})` }, { id: 'strategy', label: 'Strategy' }, { id: 'prep', label: 'Prep Checklist' }, { id: 'audit', label: 'Audit Trail' }, ]; // ── Shared styles (mirrors cs from CaseDetail) ────────────────────────── const ep = { container: { flex: 1, overflow: 'auto', background: Tpnep.color.bg.primary }, hero: { padding: '20px 24px 16px', borderBottom: `1px solid ${Tpnep.color.border.light}`, background: Tpnep.color.bg.card }, tabs: { display: 'flex', borderBottom: `1px solid ${Tpnep.color.border.light}`, background: Tpnep.color.bg.card, padding: '0 24px' }, tab: { padding: '10px 16px', fontSize: '12px', fontWeight: 500, color: Tpnep.color.text.tertiary, cursor: 'pointer', border: 'none', background: 'none', borderBottom: '2px solid transparent', fontFamily: Tpnep.font.family, transition: 'all 0.15s', marginBottom: '-1px' }, tabActive: { color: pn.indigo, borderBottom: `2px solid ${pn.indigo}`, fontWeight: 600 }, body2col: { padding: '20px 24px', display: 'grid', gridTemplateColumns: '1fr 300px', gap: '20px' }, body1col: { padding: '20px 24px' }, sec: { background: Tpnep.color.bg.card, border: `1px solid ${Tpnep.color.border.light}`, borderRadius: Tpnep.radius.lg, overflow: 'hidden', marginBottom: '16px' }, secH: { padding: '10px 16px', borderBottom: `1px solid ${Tpnep.color.border.light}`, fontSize: '12px', fontWeight: 600, color: Tpnep.color.text.primary, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, tag: { display: 'inline-flex', alignItems: 'center', padding: '2px 8px', borderRadius: '10px', fontSize: '10px', fontWeight: 600 }, th: { fontSize: '10px', fontWeight: 600, color: Tpnep.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em', padding: '8px 12px', textAlign: 'left', background: Tpnep.color.bg.secondary, borderBottom: `1px solid ${Tpnep.color.border.light}` }, td: { fontSize: '12px', color: Tpnep.color.text.primary, padding: '10px 12px', borderBottom: `1px solid ${Tpnep.color.border.light}`, verticalAlign: 'middle' }, }; // ── Tab: Overview ─────────────────────────────────────────────────────── const renderOverview = () => (
{/* Intel summary */}
◆ Intelligence Summary
{p.notes}
{/* OCEAN snapshot if available */} {p.psych && (
O.C.E.A.N. Baseline {p.psych.assessedBy} · {p.psych.assessedDate}
{pn.oceanTraits.map(t => (
{t.label} {p.psych.ocean[t.key]}
))}
)} {/* Associations */} {assocs.length > 0 && (
Network Associations {assocs.length}
{assocs.map((a, i) => { const otherId = a.source === p.id ? a.target : a.source; const other = data.people.find(x => x.id === otherId); if (!other) return null; const otc = pn.typeColor(other.type); return (
{other.name}
{a.detail}
{other.type} {a.type}
); })}
)}
{/* Right sidebar */}
{/* Key facts */}
Profile Details
{[ { l: 'ID', v: p.id, mono: true, color: pn.indigo }, { l: 'Type', v: p.type }, { l: 'Status', v: p.status }, { l: 'Risk Level', v: p.risk }, { l: 'DOB', v: p.dob || '—' }, { l: 'Title', v: p.title || '—' }, { l: 'Organization', v: p.organization || '—' }, { l: 'Aliases', v: p.aliases.length > 0 ? p.aliases.join(', ') : '—' }, { l: 'Last Updated', v: p.lastUpdated }, ].map(r => (
{r.l} {r.v}
))}
{/* Matters */}
Associated Matters
{p.matters.map(m => (
{m}
))}
{/* Roles & Tags */}
Roles
{p.roles.map(r => {r})}
Tags
{p.tags.map(t => #{t})}
); // ── Tab: Psychometrics ───────────────────────────────────────────────── const renderPsych = () => { if (!p.psych) return (
Psychometric assessment has not been conducted for this subject.
); return (
{/* OCEAN */}
◆ O.C.E.A.N. Personality Baseline
{pn.oceanTraits.map(t => (
{t.label} {t.desc}
{p.psych.ocean[t.key]}
))}
{/* Vulnerabilities + Biases + Deception stacked */}
Psychological Vulnerabilities{p.psych.vulnerabilities.length}
{p.psych.vulnerabilities.map(v =>
⬡ {v}
)}
Cognitive Biases{p.psych.biases.length}
{p.psych.biases.map(b =>
◎ {b}
)}
Deception Indicators{p.psych.deception.length > 0 && {p.psych.deception.length} flagged}
{p.psych.deception.length > 0 ? p.psych.deception.map((d, i) => (
{d}
)) :
No baseline indicators established.
}
); }; // ── Tab: Strategy ────────────────────────────────────────────────────── const renderStrategy = () => (
{p.psych ? (
Examination & Interrogation Strategy
{p.psych.interrogation}
) : (
No strategic assessment available.
)}
); // ── Tab: Documents ──────────────────────────────────────────────────── const renderDocuments = () => (
Documents & Records
{docs.length === 0 ? (
No documents linked to this profile.
) : ( {docs.map(d => ( e.currentTarget.style.background = Tpnep.color.bg.secondary} onMouseOut={e => e.currentTarget.style.background = 'transparent'}> ))}
IDTitleTypeDate
{d.id} {d.title} {d.type} {d.date}
)}
); // ── Tab: Network ────────────────────────────────────────────────────── const renderNetwork = () => (
{assocs.length === 0 ? (
No associations indexed for this subject.
) : (
Association Matrix {assocs.length} edges
{assocs.map((a, i) => { const otherId = a.source === p.id ? a.target : a.source; const other = data.people.find(x => x.id === otherId); if (!other) return null; const otc = pn.typeColor(other.type); const dir = a.source === p.id ? '→' : '←'; return ( e.currentTarget.style.background = Tpnep.color.bg.secondary} onMouseOut={e => e.currentTarget.style.background = 'transparent'}> ); })}
SubjectRelationshipDetailType
{other.name}
{other.type}		 {dir} {a.type} {a.detail} {a.type}
)}
); const renderPrep = () => (
{window.PnPrepChecklist ? : null}
); const renderAudit = () => (
{window.PnAuditTimeline ? : null}
); const renderTab = () => { switch (activeTab) { case 'overview': return renderOverview(); case 'psychometrics': return renderPsych(); case 'strategy': return renderStrategy(); case 'documents': return renderDocuments(); case 'network': return renderNetwork(); case 'prep': return renderPrep(); case 'audit': return renderAudit(); default: return renderOverview(); } }; return (
{/* ── Hero header (mirrors CaseDetail hero) ── */}
{p.type === 'Defendant' ? '' : p.type === 'Witness' ? '' : p.type === 'Judge' ? '' : p.type === 'Agent' ? '' : ''}

{p.name}

{p.type} {p.risk} Risk {p.status} {p.psych && ◆ Psych Modeled}
{p.title && `${p.title} · `} {p.organization || 'Independent'} {p.aliases.length > 0 && · aka {p.aliases.join(', ')}}
{p.roles.join(' · ')} · {p.matters.join(' · ')}
{p.id}
Updated {p.lastUpdated}
{p.counsel && p.counsel.length > 0 &&
{p.counsel[0]}
} {window.PnRiskSparkline && (
Risk
)} {window.PnDossierButton && }
{/* ── Tab bar ── */}
{tabs.map(t => ( ))}
{/* ── Tab body ── */} {renderTab()}
); } window.PersonaEntityPage = PersonaEntityPage;