@growth-labs/cms 0.5.8 → 0.5.10

package/src/ui/screens/ContentInsightsScreen.tsx

@@ -1,28 +1,58 @@
 // src/ui/screens/ContentInsightsScreen.tsx — Content Insights demand-intelligence board (bead-09).
-// Near-clone of TopicsScreen: desk groups (geographic theater) + a pinned Best Immediate Bets
-// ranking + a Trackers section; each card expands into the full editorial mini-brief; dismiss
-// persists and filters subsequent loads. Native reads from SITE_DB via /admin/api/content-insights.
-// beat is rendered as a secondary chip next to signal_type (Adaptation 3 — spec §desk-taxonomy).
-// Broadsheet idiom only; honest loading/empty/error/schema-not-ready/last-good-board states.
+// Lane-first editorial decision docket. Each card appears once in its Insight Engine action
+// lane and expands into its bounded evidence plus the full editorial mini-brief. Legacy rows
+// remain readable in an unclassified appendix; dismiss persists and filters subsequent loads.
 import { useCallback, useEffect, useReducer, useState } from 'react'
+import type { InsightDismissalReasonCode } from '../../schema/types.js'
 import { Icon } from '../icons.js'
 import {
-	audienceQuestionGroups,
-	bestBets,
-	competitorWatchGroups,
-	demandDeskGroups,
 	discoveryKindOf,
 	formatDemandEvidence,
 	type InsightCard,
 	initInsightsState,
 	insightsReducer,
-	trackers,
+	laneGroups,
+	shouldRenderInsightLanes,
 } from './content-insights-data.js'
 
+type DismissReasonSelection = InsightDismissalReasonCode | ''
+
+export interface DismissRequestBody {
+	intentKey: string
+	reasonCode: InsightDismissalReasonCode
+	note?: string
+}
+
+/** Build the exact bounded route body; route validation remains authoritative. */
+export function buildDismissRequest(
+	intentKey: string,
+	reasonCode: DismissReasonSelection,
+	note: string,
+): DismissRequestBody | null {
+	if (reasonCode === '') return null
+	const normalizedNote = note.trim()
+	if (normalizedNote.length > 500) return null
+	if (reasonCode === 'other' && normalizedNote.length < 3) return null
+	return {
+		intentKey,
+		reasonCode,
+		...(normalizedNote.length > 0 ? { note: normalizedNote } : {}),
+	}
+}
+
+/** A non-2xx response must leave the card and its editor intact for correction. */
+export function shouldRemoveDismissedCard(responseOk: boolean): boolean {
+	return responseOk
+}
+
 export function ContentInsightsScreen() {
 	const [s, dispatch] = useReducer(insightsReducer, undefined, initInsightsState)
 	const [expanded, setExpanded] = useState<string | null>(null)
 	const [dismissing, setDismissing] = useState<string | null>(null)
+	const [dismissEditorFor, setDismissEditorFor] = useState<string | null>(null)
+	const [dismissReasonCode, setDismissReasonCode] = useState<DismissReasonSelection>('')
+	const [dismissNote, setDismissNote] = useState('')
+	const [dismissError, setDismissError] = useState<string | null>(null)
 
 	const fetchBoard = useCallback(async () => {
 		dispatch({ type: 'fetch-start' })
@@ -47,27 +77,52 @@ export function ContentInsightsScreen() {
 		void fetchBoard()
 	}, [fetchBoard])
 
+	const openDismissEditor = (card: InsightCard) => {
+		setDismissEditorFor(card.intent_key)
+		setDismissReasonCode('')
+		setDismissNote('')
+		setDismissError(null)
+	}
+
+	const closeDismissEditor = () => {
+		setDismissEditorFor(null)
+		setDismissReasonCode('')
+		setDismissNote('')
+		setDismissError(null)
+	}
+
 	const dismiss = async (card: InsightCard) => {
+		const body = buildDismissRequest(card.intent_key, dismissReasonCode, dismissNote)
+		if (body == null) {
+			setDismissError(
+				dismissReasonCode === 'other'
+					? 'Other requires an editorial note of at least 3 characters.'
+					: 'Choose a dismissal reason before saving.',
+			)
+			return
+		}
 		setDismissing(card.intent_key)
+		setDismissError(null)
 		try {
 			const res = await fetch('/admin/api/content-insights/dismiss', {
 				method: 'POST',
 				headers: { 'content-type': 'application/json' },
-				body: JSON.stringify({ intentKey: card.intent_key }),
+				body: JSON.stringify(body),
 			})
-			if (res.ok) dispatch({ type: 'dismiss-ok', intentKey: card.intent_key })
+			if (shouldRemoveDismissedCard(res.ok)) {
+				dispatch({ type: 'dismiss-ok', intentKey: card.intent_key })
+				closeDismissEditor()
+			} else {
+				setDismissError(`Could not save dismissal — ${res.status} ${res.statusText}`)
+			}
+		} catch (error) {
+			setDismissError(`Could not save dismissal — ${String(error)}`)
 		} finally {
 			setDismissing(null)
 		}
 	}
 
-	// DEMAND board groups (GSC) — the two opportunity sub-kinds render in their own
-	// labelled sections (Competitor Watch + What Readers Are Asking) below.
-	const groups = demandDeskGroups(s.insights)
-	const competitorGroups = competitorWatchGroups(s.insights)
-	const audienceGroups = audienceQuestionGroups(s.insights)
-	const bets = bestBets(s.insights)
-	const trackerCards = trackers(s.insights)
+	const groups = laneGroups(s.insights)
 
 	return (
 		<div className="page page-wide content-insights-screen fade-in" style={{ maxWidth: 1340 }}>
@@ -106,181 +161,76 @@ export function ContentInsightsScreen() {
 				/>
 			)}
 
-			{s.loaded && !s.error && !s.schemaNotReady && s.insights.length === 0 && (
-				<EmptyPanel
-					icon="sparkle"
-					message="No insights yet — the daily research run hasn't landed a board."
-				/>
-			)}
-
-			{bets.length > 0 && (
-				<div className="panel" style={{ overflow: 'hidden', marginBottom: 'var(--gap)' }}>
-					<div style={{ padding: '15px 18px 12px' }}>
-						<div className="card-title">Best immediate bets</div>
-					</div>
-					<hr className="masthead-rule" style={{ margin: '0 18px' }} />
-					<div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: 18 }}>
-						{bets.map((c) => (
-							<InsightCardRow
-								key={c.intent_key}
-								card={c}
-								expanded={expanded === c.intent_key}
-								onToggle={() => setExpanded(expanded === c.intent_key ? null : c.intent_key)}
-								onDismiss={() => void dismiss(c)}
-								dismissing={dismissing === c.intent_key}
-							/>
-						))}
-					</div>
-				</div>
-			)}
-
-			{groups.map((g) => (
-				<div
-					key={g.desk}
-					className="panel"
-					style={{ overflow: 'hidden', marginBottom: 'var(--gap)' }}
-				>
-					<div
-						style={{
-							padding: '15px 18px 12px',
-							display: 'flex',
-							alignItems: 'baseline',
-							gap: 10,
-						}}
-					>
-						<div className="card-title" style={{ textTransform: 'capitalize' }}>
-							{g.desk}
-						</div>
-						<span className="kicker">{g.cards.length} ideas</span>
-					</div>
-					<hr className="masthead-rule" style={{ margin: '0 18px' }} />
-					<div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: 18 }}>
-						{g.cards.map((c) => (
-							<InsightCardRow
-								key={c.intent_key}
-								card={c}
-								expanded={expanded === c.intent_key}
-								onToggle={() => setExpanded(expanded === c.intent_key ? null : c.intent_key)}
-								onDismiss={() => void dismiss(c)}
-								dismissing={dismissing === c.intent_key}
-							/>
-						))}
-					</div>
-				</div>
-			))}
-
-			{competitorGroups.length > 0 && (
-				<OpportunitySection
-					title="Competitor Watch"
-					subtitle="What rivals are publishing that we're missing"
-					groups={competitorGroups}
-					expanded={expanded}
-					setExpanded={setExpanded}
-					dismiss={dismiss}
-					dismissing={dismissing}
-				/>
-			)}
-
-			{audienceGroups.length > 0 && (
-				<OpportunitySection
-					title="What Readers Are Asking"
-					subtitle="Real reader questions (Google People-Also-Ask) we don't yet answer"
-					groups={audienceGroups}
-					expanded={expanded}
-					setExpanded={setExpanded}
-					dismiss={dismiss}
-					dismissing={dismissing}
-				/>
-			)}
-
-			{trackerCards.length > 0 && (
-				<div className="panel" style={{ overflow: 'hidden' }}>
-					<div style={{ padding: '15px 18px 12px' }}>
-						<div className="card-title">Trackers</div>
-					</div>
-					<hr className="masthead-rule" style={{ margin: '0 18px' }} />
-					<div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: 18 }}>
-						{trackerCards.map((c) => (
-							<InsightCardRow
-								key={c.intent_key}
-								card={c}
-								expanded={expanded === c.intent_key}
-								onToggle={() => setExpanded(expanded === c.intent_key ? null : c.intent_key)}
-								onDismiss={() => void dismiss(c)}
-								dismissing={dismissing === c.intent_key}
-							/>
-						))}
-					</div>
-				</div>
+			{shouldRenderInsightLanes(s) && (
+				<section aria-label="Insight Engine decision lanes">
+					{groups.map((group) => (
+						<section
+							key={group.lane ?? 'legacy'}
+							className="panel"
+							aria-labelledby={`insight-lane-${group.lane ?? 'legacy'}`}
+							style={{
+								overflow: 'hidden',
+								marginBottom: 'var(--gap)',
+								borderLeft: `3px solid ${group.lane == null ? 'var(--hairline)' : 'var(--gold)'}`,
+							}}
+						>
+							<header
+								style={{
+									padding: '15px 18px 12px',
+									display: 'flex',
+									alignItems: 'baseline',
+									justifyContent: 'space-between',
+									gap: 12,
+								}}
+							>
+								<h2
+									id={`insight-lane-${group.lane ?? 'legacy'}`}
+									className="card-title serif"
+									style={{ margin: 0 }}
+								>
+									{group.label}
+								</h2>
+								<span className="kicker tnum">
+									{group.cards.length} {group.cards.length === 1 ? 'idea' : 'ideas'}
+								</span>
+							</header>
+							<hr className="masthead-rule" style={{ margin: '0 18px' }} />
+							<div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: 18 }}>
+								{group.cards.length === 0 ? (
+									<div className="kicker" style={{ padding: '10px 0', color: 'var(--ink-faint)' }}>
+										No ideas in this lane.
+									</div>
+								) : (
+									group.cards.map((card) => (
+										<InsightCardRow
+											key={card.intent_key}
+											card={card}
+											expanded={expanded === card.intent_key}
+											onToggle={() =>
+												setExpanded(expanded === card.intent_key ? null : card.intent_key)
+											}
+											dismissEditorOpen={dismissEditorFor === card.intent_key}
+											onOpenDismissEditor={() => openDismissEditor(card)}
+											onCancelDismissEditor={closeDismissEditor}
+											onSubmitDismiss={() => void dismiss(card)}
+											dismissReasonCode={dismissReasonCode}
+											dismissNote={dismissNote}
+											dismissError={dismissError}
+											onDismissReasonCodeChange={setDismissReasonCode}
+											onDismissNoteChange={setDismissNote}
+											dismissing={dismissing === card.intent_key}
+										/>
+									))
+								)}
+							</div>
+						</section>
+					))}
+				</section>
 			)}
 		</div>
 	)
 }
 
-/** One labelled opportunity SECTION (Competitor Watch / What Readers Are Asking),
- *  grouped by desk inside. Reuses the desk-panel + InsightCardRow rendering so the
- *  two new sub-kinds match the rest of the board. */
-function OpportunitySection({
-	title,
-	subtitle,
-	groups,
-	expanded,
-	setExpanded,
-	dismiss,
-	dismissing,
-}: {
-	title: string
-	subtitle: string
-	groups: Array<{ desk: string; cards: InsightCard[] }>
-	expanded: string | null
-	setExpanded: (v: string | null) => void
-	dismiss: (c: InsightCard) => Promise<void>
-	dismissing: string | null
-}) {
-	return (
-		<div className="panel" style={{ overflow: 'hidden', marginBottom: 'var(--gap)' }}>
-			<div style={{ padding: '15px 18px 6px' }}>
-				<div className="card-title">{title}</div>
-				<div className="kicker" style={{ marginTop: 2 }}>
-					{subtitle}
-				</div>
-			</div>
-			<hr className="masthead-rule" style={{ margin: '0 18px' }} />
-			{groups.map((g) => (
-				<div key={g.desk}>
-					<div
-						style={{
-							padding: '12px 18px 6px',
-							display: 'flex',
-							alignItems: 'baseline',
-							gap: 10,
-						}}
-					>
-						<div className="card-title" style={{ textTransform: 'capitalize', fontSize: '0.95em' }}>
-							{g.desk}
-						</div>
-						<span className="kicker">{g.cards.length} ideas</span>
-					</div>
-					<div
-						style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '0 18px 14px' }}
-					>
-						{g.cards.map((c) => (
-							<InsightCardRow
-								key={c.intent_key}
-								card={c}
-								expanded={expanded === c.intent_key}
-								onToggle={() => setExpanded(expanded === c.intent_key ? null : c.intent_key)}
-								onDismiss={() => void dismiss(c)}
-								dismissing={dismissing === c.intent_key}
-							/>
-						))}
-					</div>
-				</div>
-			))}
-		</div>
-	)
-}
-
 function evidenceChip(card: InsightCard): string {
 	if ('query' in card.evidence) return formatDemandEvidence(card.evidence)
 	// Kind-aware opportunity chip: audience rows are grounded in reader questions,
@@ -292,19 +242,52 @@ function evidenceChip(card: InsightCard): string {
 	return `${card.evidence.basis} · ${card.evidence.source_count} sources`
 }
 
-function InsightCardRow({
+function formatPercent(value: number): string {
+	return `${(value * 100).toLocaleString('en-US', { maximumFractionDigits: 2 })}%`
+}
+
+function formatEvidenceNumber(value: number): string {
+	return value.toLocaleString('en-US', { maximumFractionDigits: 2 })
+}
+
+function formatSignedEvidenceNumber(value: number): string {
+	const formatted = formatEvidenceNumber(value)
+	return value > 0 ? `+${formatted}` : formatted
+}
+
+export function InsightCardRow({
 	card,
 	expanded,
 	onToggle,
-	onDismiss,
+	dismissEditorOpen,
+	onOpenDismissEditor,
+	onCancelDismissEditor,
+	onSubmitDismiss,
+	dismissReasonCode,
+	dismissNote,
+	dismissError,
+	onDismissReasonCodeChange,
+	onDismissNoteChange,
 	dismissing,
 }: {
 	card: InsightCard
 	expanded: boolean
 	onToggle: () => void
-	onDismiss: () => void
+	dismissEditorOpen: boolean
+	onOpenDismissEditor: () => void
+	onCancelDismissEditor: () => void
+	onSubmitDismiss: () => void
+	dismissReasonCode: DismissReasonSelection
+	dismissNote: string
+	dismissError: string | null
+	onDismissReasonCodeChange: (reasonCode: DismissReasonSelection) => void
+	onDismissNoteChange: (note: string) => void
 	dismissing: boolean
 }) {
+	const detailsId = `insight-details-${card.id}`
+	const dismissReasonId = `insight-dismiss-reason-${card.id}`
+	const dismissNoteId = `insight-dismiss-note-${card.id}`
+
 	return (
 		<div
 			style={{
@@ -325,6 +308,8 @@ function InsightCardRow({
 				<button
 					type="button"
 					onClick={onToggle}
+					aria-expanded={expanded}
+					aria-controls={detailsId}
 					style={{
 						textAlign: 'left',
 						background: 'none',
@@ -341,16 +326,120 @@ function InsightCardRow({
 						{evidenceChip(card)}
 					</div>
 				</button>
-				<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'flex-end',
+						flexWrap: 'wrap',
+						gap: 8,
+					}}
+				>
+					<span className="pill pdot">{card.desk}</span>
 					<span className="pill pdot">{card.signal_type}</span>
+					{(card.signal_type === 'opportunity' || card.brief.discoveryKind != null) && (
+						<span className="pill pdot">{discoveryKindOf(card)}</span>
+					)}
+					{card.suggestion_type === 'tracker' && <span className="pill pdot">tracker</span>}
 					{card.beat != null && <span className="pill pdot">{card.beat}</span>}
-					<button type="button" className="btn danger sm" onClick={onDismiss} disabled={dismissing}>
-						<Icon name="x" size={13} /> {dismissing ? 'Dismissing…' : 'Dismiss'}
+					{card.is_best_bet === 1 && (
+						<span className="pill pdot">
+							best bet{card.best_bet_rank != null ? ` #${card.best_bet_rank}` : ''}
+						</span>
+					)}
+					<button
+						type="button"
+						className="btn danger sm"
+						onClick={dismissEditorOpen ? onCancelDismissEditor : onOpenDismissEditor}
+						disabled={dismissing}
+					>
+						<Icon name="x" size={13} /> {dismissEditorOpen ? 'Cancel dismissal' : 'Dismiss'}
 					</button>
 				</div>
 			</div>
+			{dismissEditorOpen && (
+				<form
+					onSubmit={(event) => {
+						event.preventDefault()
+						onSubmitDismiss()
+					}}
+					style={{
+						marginTop: 12,
+						borderTop: '1px solid var(--border)',
+						paddingTop: 12,
+						display: 'grid',
+						gap: 10,
+					}}
+				>
+					<div>
+						<label htmlFor={dismissReasonId} className="kicker">
+							Dismiss reason <span aria-hidden="true">*</span>
+						</label>
+						<select
+							id={dismissReasonId}
+							className="selectbox"
+							value={dismissReasonCode}
+							onChange={(event) =>
+								onDismissReasonCodeChange(event.currentTarget.value as DismissReasonSelection)
+							}
+							required
+							aria-describedby={`${dismissReasonId}-help`}
+						>
+							<option value="" disabled>
+								Choose a reason
+							</option>
+							<option value="off_topic">Off topic</option>
+							<option value="already_covered">Already covered</option>
+							<option value="cant_win">Can’t win</option>
+							<option value="wrong_format">Wrong format</option>
+							<option value="not_now">Not now</option>
+							<option value="other">Other</option>
+						</select>
+						<div id={`${dismissReasonId}-help`} className="kicker" style={{ marginTop: 4 }}>
+							Reason is required.
+						</div>
+					</div>
+					<div>
+						<label htmlFor={dismissNoteId} className="kicker">
+							Editorial note {dismissReasonCode === 'other' && '(required)'}
+						</label>
+						<textarea
+							id={dismissNoteId}
+							className="textarea"
+							value={dismissNote}
+							onChange={(event) => onDismissNoteChange(event.currentTarget.value)}
+							maxLength={500}
+							required={dismissReasonCode === 'other'}
+							aria-describedby={`${dismissNoteId}-help`}
+						/>
+						<div id={`${dismissNoteId}-help`} className="kicker" style={{ marginTop: 4 }}>
+							500 characters maximum
+							{dismissReasonCode === 'other' && ' · Required for Other (at least 3 characters)'}
+						</div>
+					</div>
+					{dismissError != null && (
+						<div role="alert" style={{ color: 'var(--red)', fontSize: 13 }}>
+							{dismissError}
+						</div>
+					)}
+					<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+						<button
+							type="button"
+							className="btn sm"
+							onClick={onCancelDismissEditor}
+							disabled={dismissing}
+						>
+							Cancel
+						</button>
+						<button type="submit" className="btn danger sm" disabled={dismissing}>
+							<Icon name="x" size={13} /> {dismissing ? 'Saving…' : 'Save dismissal'}
+						</button>
+					</div>
+				</form>
+			)}
 			{expanded && (
 				<div
+					id={detailsId}
 					style={{
 						marginTop: 12,
 						borderTop: '1px solid var(--border)',
@@ -360,6 +449,114 @@ function InsightCardRow({
 						lineHeight: 1.6,
 					}}
 				>
+					{card.evidence.scoreBreakdown != null && (
+						<div
+							className="mono tnum"
+							style={{
+								display: 'flex',
+								flexWrap: 'wrap',
+								gap: '6px 18px',
+								padding: '9px 10px',
+								marginBottom: 12,
+								background: 'var(--accent-tint)',
+								borderLeft: '2px solid var(--accent)',
+								fontSize: 12,
+							}}
+						>
+							<span>
+								<strong>Actual CTR:</strong> {formatPercent(card.evidence.scoreBreakdown.actualCtr)}
+							</span>
+							<span>
+								<strong>Expected CTR:</strong>{' '}
+								{formatPercent(card.evidence.scoreBreakdown.expectedCtr)}
+							</span>
+							<span>
+								<strong>Expected click gain:</strong>{' '}
+								{formatEvidenceNumber(card.evidence.scoreBreakdown.expectedClicksGain)}
+							</span>
+							<span>
+								<strong>Lane weight:</strong>{' '}
+								{formatPercent(card.evidence.scoreBreakdown.laneWeight)}
+							</span>
+							<span>
+								<strong>Score:</strong> {formatEvidenceNumber(card.evidence.scoreBreakdown.score)}
+							</span>
+							<span>
+								<strong>Target position:</strong>{' '}
+								{formatEvidenceNumber(card.evidence.scoreBreakdown.targetPosition)}
+							</span>
+							<span>
+								<strong>Breakdown topical fit:</strong>{' '}
+								{formatPercent(card.evidence.scoreBreakdown.topicalFit)}
+							</span>
+							<span>
+								<strong>Winnability prior:</strong>{' '}
+								{formatPercent(card.evidence.scoreBreakdown.winnabilityPrior)}
+							</span>
+						</div>
+					)}
+					{'query' in card.evidence &&
+						(card.evidence.coveredBy != null || card.evidence.coverageSource != null) && (
+							<div style={{ marginBottom: 12 }}>
+								{card.evidence.coveredBy != null && (
+									<div>
+										<strong>Covered by:</strong>{' '}
+										<a href={card.evidence.coveredBy} target="_blank" rel="noreferrer">
+											{card.evidence.coveredBy}
+										</a>
+									</div>
+								)}
+								{card.evidence.coverageSource != null && (
+									<div>
+										<strong>Coverage source:</strong> {card.evidence.coverageSource}
+									</div>
+								)}
+							</div>
+						)}
+					{card.evidence.semantic != null && (
+						<div style={{ marginBottom: 12 }}>
+							<div className="kicker" style={{ marginBottom: 4 }}>
+								Semantic evidence
+							</div>
+							<div>
+								<strong>Topical fit:</strong> {formatPercent(card.evidence.semantic.topicalFit)} ·{' '}
+								<strong>Disposition:</strong> {card.evidence.semantic.disposition} ·{' '}
+								<strong>Coverage similarity:</strong>{' '}
+								{formatPercent(card.evidence.semantic.coverageSimilarity)} ·{' '}
+								{card.evidence.semantic.coverageAligned ? 'aligned' : 'not aligned'} ·{' '}
+								{card.evidence.semantic.sharedConcepts} shared concepts
+							</div>
+							{card.evidence.semantic.nearest.length > 0 && (
+								<ul style={{ margin: '4px 0 0', paddingLeft: 18 }}>
+									{card.evidence.semantic.nearest.map((entry) => (
+										<li key={`${entry.slug}-${entry.title}`}>
+											{entry.title} ({formatPercent(entry.similarity)})
+										</li>
+									))}
+								</ul>
+							)}
+						</div>
+					)}
+					{card.evidence.judge != null && (
+						<div style={{ marginBottom: 12 }}>
+							<div className="kicker" style={{ marginBottom: 4 }}>
+								Judge decision
+							</div>
+							<div>
+								<strong>Judge:</strong> {card.evidence.judge.verdict} ·{' '}
+								{card.evidence.judge.reason_code} · {formatPercent(card.evidence.judge.confidence)}{' '}
+								confidence
+							</div>
+							<div>{card.evidence.judge.intent_statement}</div>
+							{card.evidence.judge.winnability != null && (
+								<div style={{ marginTop: 4 }}>
+									<strong>Winnability:</strong> {card.evidence.judge.winnability.verdict} ·{' '}
+									{formatPercent(card.evidence.judge.winnability.confidence)} confidence —{' '}
+									{card.evidence.judge.winnability.serp_summary}
+								</div>
+							)}
+						</div>
+					)}
 					<div>
 						<strong>Angle:</strong> {card.brief.angle}
 					</div>
@@ -367,6 +564,30 @@ function InsightCardRow({
 						<strong>Cluster:</strong> {card.brief.cluster.canonical}
 						{card.brief.cluster.spokes.length > 0 && ` — ${card.brief.cluster.spokes.join(', ')}`}
 					</div>
+					{card.brief.format != null && (
+						<div style={{ marginTop: 8 }}>
+							<strong>Format:</strong> {card.brief.format}
+						</div>
+					)}
+					{card.brief.content_outline != null && card.brief.content_outline.length > 0 && (
+						<div style={{ marginTop: 8 }}>
+							<strong>Content outline:</strong>
+							<ol style={{ margin: '4px 0 0', paddingLeft: 20 }}>
+								{card.brief.content_outline.map((item) => (
+									<li key={item.question}>
+										{item.question}
+										{item.demand != null && (
+											<div className="mono" style={{ fontSize: 12, color: 'var(--ink-muted)' }}>
+												{item.demand.query} · pos {item.demand.position.toFixed(1)} ·{' '}
+												{item.demand.impressions.toLocaleString('en-US')} impr · trend{' '}
+												{formatSignedEvidenceNumber(item.demand.trend)}
+											</div>
+										)}
+									</li>
+								))}
+							</ol>
+						</div>
+					)}
 					{card.brief.sources.length > 0 && (
 						<div style={{ marginTop: 8 }}>
 							<strong>Sources:</strong>