// Brand Research — queue on the left, profile on the right.
// Profile shows all research fields, citations, sponsorship history, competitors.
// Status badges, low-confidence callouts, rejected/KIV stopped states.
// Assignee + country helpers come from ui.jsx (window.displayAssignee,
// window.extractCountry, window.ASSIGNEE_NAMES).
function BrandResearch({ brands, selectedBrandId, onSelectBrand, onNavigate, onUpdateBrand, onMoveToResearch, onToast, onResearchBrand, onRefreshBrandDetail, currentUser }) {
// Active + stopped buckets. Split on the pipeline's held/closed test rather
// than on `status` alone: rows can be status 'relevant' AND research 'rejected'
// at the same time (6 of them are), and those were showing up in the active
// queue as "rejected" — the reason this list looked like it was full of
// brands that had already been dealt with.
const activeBrands = brands.filter((b) => !pbIsHeldOrClosed(b));
const stoppedBrands = brands.filter((b) => pbIsHeldOrClosed(b));
// ─── Filters ────────────────────────────────────────────────────────────
// One shared filter set (see useBrandFilters in ui.jsx). Tier / category /
// assignee / country are the SAME state here, on Match, on Contacts and on
// Draft — set "my Tier 1 brands" once and it holds everywhere.
const f = useBrandFilters(activeBrands);
// This page exists to answer one question per brand: which property do we
// pitch? So it DEFAULTS to only the brands still owing that answer. A brand
// drops off the moment a property (or "No match") is confirmed — the filters
// are there for when you want to look back at ones already decided.
const [reviewFilter, setReviewFilter] = usePersistentState('filters.review', 'needs'); // needs | decided | all
const filtersActive = f.active || reviewFilter !== 'all';
// Decided is an explicit test (isDecided), not "everything that is not on the
// review list". The old subtraction counted brands nobody had researched yet
// as decided, so the Decided tab held 247 rows of which 17 had had no decision
// made about them at all.
const filteredActive = React.useMemo(
() => activeBrands.filter((b) => {
if (!f.matches(b)) return false;
if (reviewFilter === 'needs' && !needsPropertyDecision(b)) return false;
if (reviewFilter === 'decided' && !isDecided(b)) return false;
return true;
}),
[activeBrands, f.matches, reviewFilter]
);
const needsReviewCount = React.useMemo(() => activeBrands.filter(needsPropertyDecision).length, [activeBrands]);
const decidedCount = React.useMemo(() => activeBrands.filter(isDecided).length, [activeBrands]);
// The remainder: active, but not at this gate yet (never researched, or still
// researching). Named in the footer so All can exceed the other two tabs
// without the numbers looking broken.
const earlierCount = React.useMemo(() => activeBrands.filter(awaitingEarlierStage).length, [activeBrands]);
// Newest first. reviewDate alone is not enough: it is a business date (day
// granularity), so an entire scan batch shares one value and the order inside
// today's block came down to whatever order Postgres returned — a brand you
// just scanned could land anywhere in it. createdAt is a real timestamp, so it
// breaks those ties precisely and puts the newest arrival at the top.
const sortedActive = React.useMemo(
() => [...filteredActive].sort((a, b) =>
(b.reviewDate || '').localeCompare(a.reviewDate || '')
|| (b.createdAt || '').localeCompare(a.createdAt || '')
// Last resort so rows never swap places between refreshes when both
// dates match (imported brands share a createdAt).
|| String(a.id || '').localeCompare(String(b.id || ''))
),
[filteredActive]
);
const allBrands = [...sortedActive, ...stoppedBrands];
const selected = brands.find((b) => b.id === selectedBrandId) || sortedActive[0];
React.useEffect(() => {
if (!selectedBrandId && sortedActive[0]) onSelectBrand(sortedActive[0].id);
}, [selectedBrandId, sortedActive]);
const [showStopped, setShowStopped] = React.useState(false);
// ─── Bulk actions ───────────────────────────────────────────────────────
// Ticking rows and acting on the lot used to exist only on News Intake, so
// re-assigning or parking ten researched brands meant ten separate trips.
const bulk = useBulkSelect(sortedActive);
const applyBulk = (fn, label) => {
const ids = bulk.ids;
ids.forEach(fn);
bulk.clear();
onToast && onToast(`${ids.length} brand${ids.length === 1 ? '' : 's'} ${label}`);
};
const bulkActions = [
{
label: 'Mark reviewed', icon: 'check',
title: 'Sign these off as reviewed — they leave the review list without recording a property decision',
onClick: () => {
const by = displayNameFor(currentUser);
applyBulk((id) => onUpdateBrand(id, reviewPatch(true, by)), 'marked reviewed');
},
},
{
label: 'Re-research', icon: 'sparkle',
title: 'Regenerate the profile for each selected brand',
onClick: () => applyBulk((id) => {
onUpdateBrand(id, { researchStatus: 'researching', needsManualReview: false });
onResearchBrand && onResearchBrand(id);
}, 'sent back for research'),
},
{
label: 'KIV', icon: 'eye',
title: 'Keep in view — held out of the active flow',
onClick: () => applyBulk((id) => onUpdateBrand(id, {
status: 'maybe', priority: 'kiv', researchStatus: 'kiv',
needsManualReview: false, userOverride: true,
}), 'kept in view'),
},
{
label: 'Reject', icon: 'x', className: 'btn btn-sm btn-ghost', danger: true,
title: 'Stop these brands',
onClick: () => applyBulk((id) => onUpdateBrand(id, {
status: 'not-relevant', priority: 'no-action', researchStatus: 'rejected',
needsManualReview: false, userOverride: true,
}), 'rejected'),
},
];
return (
{ if (name) applyBulk((id) => onUpdateBrand(id, { assignee: name }), `assigned to ${name}`); }}
/>
Research queue
{reviewFilter === 'needs'
? `${filteredActive.length} to review · ${decidedCount} decided`
: `${filteredActive.length} of ${activeBrands.length} active · ${stoppedBrands.length} stopped or parked`}
{earlierCount ? ` · ${earlierCount} still waiting on News Intake` : ''}
{sortedActive.length > 0 ? (
) : null}
{/* Review axis, always visible — it is the first cut the meeting makes. */}
{f.open ? : null}
e.stopPropagation()}
onChange={() => bulk.toggle(b.id)}
title="Select for a bulk action"
/>
{b.brand}
{b.category}
{/* Has a person signed it off, and what the stage wants. */}
{/* Confirmed first; failing that, what the system suggested.
The meeting works down this list, and a suggestion that
only appeared inside the profile — below every panel of
evidence — was being missed on almost every brand. Shown
here it can be triaged without opening anything, and the
dimmer, arrow-less styling keeps "we decided this" and
"the system thinks this" from reading alike. */}
{b.confirmedProperties && b.confirmedProperties.length ? (
→ {b.confirmedProperties.map((p) => p === 'generic' ? 'Generic' : propLabel(p)).join(', ')}
) : (b.aiRecommendation && (b.aiRecommendation.properties || []).length) ? (
{b.aiRecommendation.properties.slice(0, 2).map(propLabel).join(', ')}
{b.aiRecommendation.properties.length > 2
? ` +${b.aiRecommendation.properties.length - 2}` : ''}
) : null}
{/* Sign-off on the row itself. The meeting works down this
list, so the tick has to be here — not only inside the
profile, which meant opening every brand to clear it. */}
e.stopPropagation()}>
);
})}
{sortedActive.length === 0 ? (
{reviewFilter === 'needs' && !f.active ? (
<>
You've reviewed this section.
Every researched brand has a property decision. Use Decided to look back over them.
) : filtersActive ? (
<>
No brands match these filters.
) : activeBrands.length === 0 ? (
<>
Nothing in research yet.
Send a brand here from News Intake, or run a scan to pull in new ones.
) : (
Nothing active — everything here has been stopped or parked.
{/* An empty "To review" list is the good outcome, not a filter
problem — say so rather than telling the user to clear
filters they never set. */}
{reviewFilter === 'needs' && !f.active ? (
<>
You've reviewed this section.
Every researched brand has a property decision. Contacts and drafts are generated
when a property is confirmed, so the next step is the Draft page.
) : (
<>
Nothing to read yet.
{f.active
? 'Your filters are hiding every brand in the queue. Clear them to pick one.'
: 'Send a brand into research from News Intake — tick it and choose Research, or run a scan to pull in new ones.'}
{filtersActive ? (
) : null}
)}
)}
);
}
function BrandProfile({ brand, onNavigate, onUpdateBrand, onMoveToResearch, onToast, onResearchBrand, onRefreshBrandDetail, currentUser }) {
const isKiv = brand.priority === 'kiv';
const isRejected = brand.status === 'not-relevant' || brand.status === 'duplicate';
const [editing, setEditing] = React.useState(false);
// Local form state mirrors editable fields
const [form, setForm] = React.useState(() => buildEditForm(brand));
React.useEffect(() => { setForm(buildEditForm(brand)); setEditing(false); }, [brand.id]);
// Research engine state
const hasResearch = !!(brand.description || '').trim();
const isResearchingNow = brand.researchStatus === 'researching' && !hasResearch;
const [researching, setResearching] = React.useState(false);
const handleResearch = async () => {
if (!onResearchBrand) return;
setResearching(true);
try { await onResearchBrand(brand.id); }
finally { setResearching(false); }
};
// Footprint-only refresh. Exposure and market focus come from their own
// research pass, so a thin country list can be fixed without re-running (and
// re-churning) the news, signals and property match.
const [refreshingMarkets, setRefreshingMarkets] = React.useState(false);
const handleRefreshMarkets = async () => {
setRefreshingMarkets(true);
try {
await window.IPSEM_API.refreshMarkets(brand.id);
onToast && onToast('Refreshing footprint — exposure and market focus update in about a minute.');
// The job writes markets/exposure/market_focus, which the brands LIST does
// not carry, and it never sets research_status='researching' — so no poll
// and no list refresh can bring the result back. Without this the panel
// showed the old footprint until a full page reload.
if (onRefreshBrandDetail) {
[20000, 45000, 90000].forEach((ms) => setTimeout(() => onRefreshBrandDetail(brand.id), ms));
}
} catch (err) {
onToast && onToast(err.message || 'Could not refresh the footprint.');
} finally {
setRefreshingMarkets(false);
}
};
// Prior research runs (for "Previous research" panel at bottom).
const [priorRuns, setPriorRuns] = React.useState([]);
React.useEffect(() => {
let alive = true;
window.IPSEM_API.getResearchRuns(brand.id)
.then((runs) => { if (alive) setPriorRuns(Array.isArray(runs) ? runs.filter(r => !r.isCurrent) : []); })
.catch(() => {});
return () => { alive = false; };
}, [brand.id, brand.researchStatus]);
const set = (k, v) => setForm((c) => ({ ...c, [k]: v }));
const handleSave = () => {
const patch = {
description: form.description,
coreValues: form.coreValues.split(',').map((s) => s.trim()).filter(Boolean),
hq: form.hq,
exposure: form.exposure,
marketFocus: form.marketFocus,
spending: form.spending,
competitors: form.competitors.split(',').map((s) => s.trim()).filter(Boolean),
};
// A hand-edited footprint has to win over the researched one, or saving an
// edit looks like it did nothing: the structured panel would keep rendering
// the country list and the edited prose would never appear. Flag the field
// instead of dropping brand.markets, so a Refresh footprint can still
// restore the researched version.
const m = brand.markets;
if (m && typeof m === 'object') {
const manual = {};
if (form.exposure !== (brand.exposure || '')) manual.manualExposure = true;
if (form.marketFocus !== (brand.marketFocus || '')) manual.manualMarketFocus = true;
if (Object.keys(manual).length) patch.markets = { ...m, ...manual };
}
onUpdateBrand(brand.id, patch);
setEditing(false);
onToast && onToast(`${brand.brand} updated`);
};
return (
Reviewed {formatDate(brand.reviewDate)}
{/* The other half of this brand. Flow carries the tasks against it,
who owns it, its history and the comment thread; the research
itself stays here. No lookup is needed either way — the id is
the same slug on both sides. Hidden unless flowUrl is set, so an
installation without Flow shows nothing rather than a dead link. */}
{window.IPSEM_CONFIG && window.IPSEM_CONFIG.flowUrl ? (
Open in IPSEM Flow
) : null}
{!isRejected && !isKiv ? (
{onResearchBrand ? (
) : null}
{/* The step out of this page. It used to live only inside the
"Suggested IPSEM properties" card, which is hidden when the
AI suggested nothing — so for those brands there was no
visible way to get to Property Match. */}
{needsPropertyDecision(brand) ? (
) : null}
) : null}
{isKiv ? (
Keep in View — monitor only.
{brand.manualReviewNote || 'No outreach yet. The system will reassess if new signals appear.'}
{brand.rejectReason || 'No contact research or draft will be generated.'}
{onMoveToResearch ? (
) : null}
) : null}
{/* Tier / status / relationship / outreach / assignee / actions — the
same strip on every stage, so nothing forces a trip back to Intake. */}
{/* Notes — kept directly under the header so nobody has to scroll to
read or add them. */}
{/* News card */}
{!hasResearch ? (
Run research to populate
) : (
)}
{(() => {
const gap = Not found in research;
const cvals = Array.isArray(brand.coreValues) ? brand.coreValues : (brand.coreValues ? [brand.coreValues] : []);
return (
<>
{brand.description ? {brand.description} : gap}
{/* Growth & investment sits second, right under the description:
it is the field the team reads to decide whether this outreach
is worth the time. */}
{hasGrowthIntel(brand) ? (
) : null}
{cvals.length ? (
{cvals.map((v, i) => {v})}
) : gap}
{/* Market focus sits above exposure deliberately: it is what the
property match is argued on, so it should be the first thing
read. Exposure is the supporting detail underneath it. */}
{hasMarketData(brand) && !brand.markets.manualMarketFocus
&& ((brand.markets.keyMarkets || []).length || (brand.markets.growthMarkets || []).length) ? (
) : brand.marketFocus ? (
{brand.marketFocus}
) : gap}
{hasMarketData(brand) && !brand.markets.manualExposure ? (
) : brand.exposure ? (
{brand.exposure}
) : gap}
{brand.spending ? (
{brand.spending}
) : gap}
{(brand.competitors && brand.competitors.length) ? (
) : null}
);
})()}
)}
{/* Sponsorships — stacked under Brand Intelligence, same width */}
{/* Sources rail. Sticky so citations stay to hand while you read the
profile, and its own scroll so a long citation list never stretches
the row. Source titles are often raw URLs — hence overflow-wrap. */}
{/* data-label drives the stacked-card transform below 560px (see
.tbl td[data-label]::before in index.html) — without it the
columns rendered as unlabelled values on a phone. */}
No sponsorships on record yet. Click "Add" to enter one, or re-research the brand.
) : (
// Percentage widths so the columns share whatever the card gives them
// instead of demanding a fixed 846px; .tbl-scroll is the safety net at
// tablet widths, where scrolling the table beats bleeding out of it.
Property / partner
Sport / segment
Scope
Years
Est. value
Status
{current.length ? Rows({ items: current }) : null}
{past.length ? Rows({ items: past }) : null}
)}
{confirmEl}
);
}
// NotesPanel now lives in ui.jsx so every screen can mount it (and so it can
// carry @mentions + notifications). See window.NotesPanel.
// ─── Growth intel (brand.growthIntel) ─────────────────────────────────────
// The go/no-go field. "Raised $45m, indicating expansion" is what this replaces:
// each row carries what the money buys, which market it lands in, and when — plus
// an honest against-list, because a brand two years into a rival's deal is a pass
// and the team should learn that here rather than on the call.
function hasGrowthIntel(brand) {
const g = brand.growthIntel;
if (!g || typeof g !== 'object') return false;
const sig = g.decisionSignals || {};
return !!(
(g.funding || []).length || (g.expansion || []).length || (g.investments || []).length
|| g.commercialMomentum
|| (sig.for || []).length || (sig.against || []).length || (sig.openQuestions || []).length
);
}
function GrowthIntel({ brand }) {
const g = brand.growthIntel || {};
const funding = g.funding || [];
const expansion = g.expansion || [];
const investments = g.investments || [];
const sig = g.decisionSignals || {};
const meta = (parts) => {
const kept = parts.filter(Boolean);
return kept.length ? · {kept.join(' · ')} : null;
};
const bullets = (items, label, tone) => (items || []).length ? (
) : null}
{bullets(sig.for, 'Reasons to pursue', 'positive')}
{bullets(sig.against, 'Reasons to hold off', 'pending')}
{bullets(sig.openQuestions, 'Ask on the call')}
);
}
// ─── Footprint (brand.markets) ────────────────────────────────────────────
// Written by the markets research pass. Exposure and market focus are still
// stored as prose too — these components render the structured version when it
// is there, and the prose is the fallback for brands researched before it
// existed (or hand-edited since).
//
// Every entry carries a `basis`: 'source' means a searched source supports it,
// 'knowledge' means it came from the model's own knowledge of the brand. The two
// are shown apart on purpose — a country list is only useful if the reader can
// see which half of it is checkable.
function hasMarketData(brand) {
const m = brand.markets;
return !!(m && typeof m === 'object' && ((m.countries || []).length || m.countryCount));
}
const COUNT_BASIS_LABEL = {
reported: 'Stated in sources',
counted: 'Counted from sources',
knowledge: 'Known brand footprint',
unknown: 'Not established',
};
// cap 60 matches ENUMERATE_COUNTRIES_UP_TO in researcher.py: below that the list
// is the answer and gets shown in full, above it the brand is near-global and the
// research pass deliberately returns a partial list of the markets that matter.
function MarketChips({ items, cap = 60 }) {
const [showAll, setShowAll] = React.useState(false);
const shown = showAll ? items : items.slice(0, cap);
return (
Announced, not yet open:
{planned.map((p) => p.name).join(', ')}
) : null}
{m.notes ?
{m.notes}
: null}
);
}
// The panel the team actually pitches against: which markets carry the brand's
// business, and which ones it has said it wants next. Core markets are numbered
// because rank carries meaning here — #1 is the market a property has to speak to.
function MarketFocus({ brand }) {
const m = brand.markets || {};
const key = m.keyMarkets || [];
const growth = m.growthMarkets || [];
const core = key.filter((k) => k.priority !== 'secondary');
const also = key.filter((k) => k.priority === 'secondary');
const row = (x, i, opts = {}) => (