@growth-labs/cms 0.1.0

package/src/ui/inspector/FoundryTab.tsx

@@ -0,0 +1,613 @@
+// src/ui/inspector/FoundryTab.tsx — Foundry inspector tab (bead-08).
+//
+// Only rendered for video/podcast content types (gated by visibleTabs).
+// Sections:
+//   - Pipeline status: ordered stage list from processingStages() with
+//     done/active/pending indicators + a "Dispatch to Foundry" / "Re-run" button.
+//   - Thumbnail / cover: preview block; "Pick best frame" is P4-disabled.
+//   - Transcript: read-only view of the auto-generated transcript (from the
+//     content payload) with an inline "Edit transcript" textarea that PATCHes
+//     the transcript field. Transcript *generation* is driven by the callback
+//     pipeline, NOT an AI button.
+//
+// Polling: while processing_state is mid-flight (working pill state), a
+// lightweight poll on GET /admin/api/content/:id re-fetches the processing
+// columns every POLL_INTERVAL_MS.
+//
+// Compile-gated (tsc, jsx: react-jsx). No vitest — pure helpers (processingStages,
+// foundryPillState) are tested in foundry-stages.test.ts.
+//
+// SCOPE GUARD (bead-08): the dispatch call goes to the injected FoundryDispatch
+// provider via POST /content/:id?action=dispatch-to-foundry. NO real Foundry
+// capability slug or media-compute infra in P3; that is the-foundry #558.
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { ProcessingState } from '../../engine/foundry-dispatch.js'
+import { Icon } from '../icons.js'
+import { foundryPillState, processingStages } from './foundry-stages.js'
+import { patchContent, runAction } from './inspector-data.js'
+import { Section } from './Section.js'
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+/** Polling interval while the pipeline is in a mid-flight state. */
+const POLL_INTERVAL_MS = 5_000
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface FoundryTabProps {
+	docId: string
+	/** Content type — must be 'video' or 'podcast' (enforced by visibleTabs). */
+	contentType: 'video' | 'podcast' | string
+	/** Called after a transcript edit or dispatch so the parent can refresh. */
+	onChanged?: () => void
+}
+
+// ---------------------------------------------------------------------------
+// Processing row shape (what we read from GET /admin/api/content/:id)
+// ---------------------------------------------------------------------------
+
+interface ProcessingFields {
+	processingState: ProcessingState
+	processingError: string | null
+	transcriptUrl: string | null
+	hlsPosterUrl: string | null
+}
+
+// ---------------------------------------------------------------------------
+// FoundryTab
+// ---------------------------------------------------------------------------
+
+export function FoundryTab({ docId, contentType, onChanged }: FoundryTabProps): React.ReactElement {
+	const [processing, setProcessing] = useState<ProcessingFields>({
+		processingState: 'pending',
+		processingError: null,
+		transcriptUrl: null,
+		hlsPosterUrl: null,
+	})
+	const [transcript, setTranscript] = useState<string | null>(null)
+	const [editingTranscript, setEditingTranscript] = useState(false)
+	const [transcriptDraft, setTranscriptDraft] = useState('')
+	const [savingTranscript, setSavingTranscript] = useState(false)
+	const [dispatching, setDispatching] = useState(false)
+	const [dispatchError, setDispatchError] = useState<string | null>(null)
+	const [loading, setLoading] = useState(true)
+	const pollRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+	// Fetch the current content item to read processing fields.
+	const fetchStatus = useCallback(async () => {
+		try {
+			const res = await fetch(`/admin/api/content/${docId}`)
+			if (!res.ok) return
+			const data = (await res.json()) as {
+				content?: {
+					processing_state?: string | null
+					processing_error?: string | null
+					transcript_url?: string | null
+					hls_poster_url?: string | null
+					transcript?: string | null
+					script?: string | null
+				} | null
+			}
+			const content = data.content ?? {}
+			setProcessing({
+				processingState: (content.processing_state ?? 'pending') as ProcessingState,
+				processingError: content.processing_error ?? null,
+				transcriptUrl: content.transcript_url ?? null,
+				hlsPosterUrl: content.hls_poster_url ?? null,
+			})
+			// Transcript lives in the content sub-table.
+			const tx = content?.transcript ?? content?.script ?? null
+			setTranscript(tx)
+			if (!editingTranscript) {
+				setTranscriptDraft(tx ?? '')
+			}
+		} catch {
+			// non-fatal
+		} finally {
+			setLoading(false)
+		}
+	}, [docId, editingTranscript])
+
+	// Initial fetch.
+	useEffect(() => {
+		void fetchStatus()
+	}, [fetchStatus])
+
+	// Polling while mid-flight.
+	useEffect(() => {
+		const pill = foundryPillState(processing.processingState)
+		if (pill === 'working' && processing.processingState !== 'pending') {
+			pollRef.current = setTimeout(() => void fetchStatus(), POLL_INTERVAL_MS)
+		}
+		return () => {
+			if (pollRef.current !== null) {
+				clearTimeout(pollRef.current)
+				pollRef.current = null
+			}
+		}
+	}, [processing.processingState, fetchStatus])
+
+	// Dispatch to Foundry.
+	const handleDispatch = useCallback(async () => {
+		setDispatching(true)
+		setDispatchError(null)
+		try {
+			await runAction(docId, 'dispatch-to-foundry')
+			await fetchStatus()
+			onChanged?.()
+		} catch (e) {
+			setDispatchError(e instanceof Error ? e.message : 'Dispatch failed')
+		} finally {
+			setDispatching(false)
+		}
+	}, [docId, fetchStatus, onChanged])
+
+	// Save edited transcript.
+	const handleSaveTranscript = useCallback(async () => {
+		setSavingTranscript(true)
+		try {
+			// PATCH the transcript field via the content update route.
+			// For video: the column is video_content.transcript (via PATCH { content: { transcript } }).
+			// For podcast: same via podcast_content.script or transcript field.
+			await patchContent(docId, { content: { transcript: transcriptDraft } })
+			setTranscript(transcriptDraft)
+			setEditingTranscript(false)
+			onChanged?.()
+		} catch {
+			// non-fatal
+		} finally {
+			setSavingTranscript(false)
+		}
+	}, [docId, transcriptDraft, onChanged])
+
+	// -------------------------------------------------------------------------
+	// Derived state
+	// -------------------------------------------------------------------------
+
+	const pillState = foundryPillState(processing.processingState)
+	const stages = processingStages(processing.processingState, contentType)
+	const isWorking = pillState === 'working' && processing.processingState !== 'pending'
+	const canDispatch = !dispatching && !isWorking
+	const dispatchLabel =
+		processing.processingState === 'pending' || processing.processingState === 'failed'
+			? processing.processingState === 'failed'
+				? 'Re-run pipeline'
+				: 'Dispatch to Foundry'
+			: pillState === 'ready'
+				? 'Re-run pipeline'
+				: 'Processing…'
+
+	// -------------------------------------------------------------------------
+	// Render
+	// -------------------------------------------------------------------------
+
+	if (loading) {
+		return (
+			<div style={placeholderWrap}>
+				<span style={mutedText}>Loading pipeline status…</span>
+			</div>
+		)
+	}
+
+	return (
+		<div>
+			{/* ---- Pipeline status ---- */}
+			<Section title="Pipeline" icon="bolt">
+				{/* Pill + dispatch button */}
+				<div style={headerRow}>
+					<StatusPill pill={pillState} state={processing.processingState} />
+					<button
+						type="button"
+						className="btn primary sm"
+						disabled={!canDispatch}
+						style={{ opacity: canDispatch ? 1 : 0.6 }}
+						onClick={() => void handleDispatch()}
+					>
+						{dispatching ? (
+							<span>Dispatching…</span>
+						) : (
+							<>
+								<Icon name="upload" size={14} />
+								{dispatchLabel}
+							</>
+						)}
+					</button>
+				</div>
+
+				{/* Dispatch error */}
+				{dispatchError && <p style={errorText}>{dispatchError}</p>}
+
+				{/* Stage list */}
+				<ul style={stageList}>
+					{stages.map((stage, idx) => (
+						// biome-ignore lint/suspicious/noArrayIndexKey: stable ordered pipeline stages
+						<li key={idx} style={stageItem}>
+							<StageIcon done={stage.done} active={stage.active} error={stage.error} />
+							<span
+								style={{
+									...stageLabel,
+									fontWeight: stage.active ? 700 : 400,
+									color: stage.active
+										? 'var(--ink)'
+										: stage.done
+											? 'var(--ink-muted)'
+											: 'var(--ink-faint)',
+								}}
+							>
+								{stage.label}
+							</span>
+							<span style={stageEstimate}>{stage.estimate}</span>
+							{stage.active && isWorking && <SpinnerDot />}
+						</li>
+					))}
+				</ul>
+
+				{/* Signature shimmer progress bar while the pipeline is mid-flight */}
+				{isWorking && (
+					<div style={progressTrack}>
+						<div className="skeleton-shimmer" style={progressFill} />
+					</div>
+				)}
+
+				{/* Processing error detail */}
+				{processing.processingError && (
+					<p style={errorText}>
+						<Icon name="x" size={12} style={{ verticalAlign: 'middle', marginRight: 4 }} />
+						{processing.processingError}
+					</p>
+				)}
+			</Section>
+
+			{/* ---- Thumbnail / cover ---- */}
+			<Section title="Thumbnail / cover" icon="image" defaultOpen={false}>
+				{processing.hlsPosterUrl ? (
+					<img src={processing.hlsPosterUrl} alt="Video poster" style={thumbnailImg} />
+				) : (
+					<div style={thumbnailEmpty}>
+						<Icon name="image" size={20} style={{ color: 'var(--ink-faint)' }} />
+						<span style={mutedText}>No thumbnail yet</span>
+					</div>
+				)}
+				{/* "Pick best frame" is P4 — render disabled with affordance */}
+				<button
+					type="button"
+					disabled
+					title="AI frame pick arrives in P4"
+					className="btn sm"
+					style={{ width: '100%', opacity: 0.55, cursor: 'not-allowed' }}
+				>
+					<Icon name="sparkle" size={14} />
+					Pick best frame
+					<span style={p4Badge}>P4</span>
+				</button>
+			</Section>
+
+			{/* ---- Transcript ---- */}
+			<Section
+				title="Transcript"
+				icon="history"
+				defaultOpen={processing.processingState === 'ready'}
+			>
+				{processing.processingState === 'pending' && (
+					<p style={mutedText}>Dispatch the pipeline to generate a transcript.</p>
+				)}
+				{processing.processingState !== 'pending' && !transcript && !editingTranscript && (
+					<p style={mutedText}>
+						{isWorking
+							? 'Transcript will appear here once the pipeline completes.'
+							: 'No transcript available.'}
+					</p>
+				)}
+
+				{/* Read-only transcript display */}
+				{transcript && !editingTranscript && (
+					<>
+						<div style={transcriptDisplay}>{transcript}</div>
+						<button
+							type="button"
+							className="btn sm"
+							style={{ width: '100%' }}
+							onClick={() => {
+								setTranscriptDraft(transcript)
+								setEditingTranscript(true)
+							}}
+						>
+							<Icon name="edit" size={14} />
+							Edit transcript
+						</button>
+					</>
+				)}
+
+				{/* Editable transcript textarea */}
+				{editingTranscript && (
+					<div style={editBlock}>
+						<textarea
+							className="textarea"
+							style={{ fontSize: 12, lineHeight: 1.6 }}
+							value={transcriptDraft}
+							onChange={(e) => setTranscriptDraft(e.currentTarget.value)}
+							rows={10}
+							aria-label="Transcript editor"
+						/>
+						<div style={editActions}>
+							<button
+								type="button"
+								className="btn primary sm"
+								disabled={savingTranscript}
+								onClick={() => void handleSaveTranscript()}
+							>
+								{savingTranscript ? 'Saving…' : 'Save transcript'}
+							</button>
+							<button
+								type="button"
+								className="btn ghost sm"
+								onClick={() => {
+									setEditingTranscript(false)
+									setTranscriptDraft(transcript ?? '')
+								}}
+							>
+								Cancel
+							</button>
+						</div>
+					</div>
+				)}
+			</Section>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// StatusPill — pill for working / ready / failed
+// ---------------------------------------------------------------------------
+
+function StatusPill({
+	pill,
+	state,
+}: {
+	pill: 'working' | 'ready' | 'failed'
+	state: ProcessingState
+}): React.ReactElement {
+	const label =
+		pill === 'ready'
+			? 'Ready'
+			: pill === 'failed'
+				? 'Failed'
+				: state === 'pending'
+					? 'Not dispatched'
+					: state === 'queued'
+						? 'Queued'
+						: state === 'fetching'
+							? 'Fetching source'
+							: state === 'transcribing'
+								? 'Transcribing'
+								: 'Transcoding'
+
+	// Map pipeline pill state onto the broadsheet status-pill vocabulary:
+	// ready→published (green), failed→review (amber/red idiom), working→processing.
+	const cls =
+		pill === 'ready' ? 'pill published' : pill === 'failed' ? 'pill review' : 'pill processing'
+
+	return (
+		<span className={cls}>
+			<span className="pdot" />
+			{label}
+		</span>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// StageIcon — checkmark / spinner / error indicator
+// ---------------------------------------------------------------------------
+
+function StageIcon({
+	done,
+	active,
+	error,
+}: {
+	done: boolean
+	active: boolean
+	error?: boolean
+}): React.ReactElement {
+	// Broadsheet idiom: a tinted status disc holding a check / refresh / x glyph.
+	if (error) {
+		return (
+			<span style={stageDisc('var(--red-tint)', 'var(--red)')}>
+				<Icon name="x" size={11} />
+			</span>
+		)
+	}
+	if (done) {
+		return (
+			<span style={stageDisc('var(--green-tint)', 'var(--green)')}>
+				<Icon name="check" size={11} />
+			</span>
+		)
+	}
+	if (active) {
+		return (
+			<span style={stageDisc('var(--amber-tint)', 'var(--amber)')}>
+				<Icon name="refresh" size={11} />
+			</span>
+		)
+	}
+	return <span style={pendingDot} />
+}
+
+// ---------------------------------------------------------------------------
+// SpinnerDot — animated inline "working" indicator
+// ---------------------------------------------------------------------------
+
+function SpinnerDot(): React.ReactElement {
+	return <span style={spinnerDot}>…</span>
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const placeholderWrap: React.CSSProperties = {
+	display: 'flex',
+	flexDirection: 'column',
+	alignItems: 'center',
+	justifyContent: 'center',
+	padding: 32,
+	textAlign: 'center',
+	gap: 8,
+	opacity: 0.75,
+}
+
+const mutedText: React.CSSProperties = {
+	fontSize: 12,
+	color: 'var(--ink-faint)',
+	marginBottom: 6,
+}
+
+const headerRow: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'space-between',
+	gap: 10,
+	marginBottom: 12,
+}
+
+function stageDisc(bg: string, fg: string): React.CSSProperties {
+	return {
+		width: 18,
+		height: 18,
+		borderRadius: '50%',
+		flex: 'none',
+		display: 'grid',
+		placeItems: 'center',
+		background: bg,
+		color: fg,
+	}
+}
+
+const progressTrack: React.CSSProperties = {
+	height: 5,
+	background: 'var(--hover)',
+	borderRadius: 3,
+	overflow: 'hidden',
+	marginTop: 8,
+}
+
+const progressFill: React.CSSProperties = {
+	width: '100%',
+	height: '100%',
+	background: 'var(--gold)',
+}
+
+const errorText: React.CSSProperties = {
+	fontSize: 11.5,
+	color: 'var(--red, #ef4444)',
+	marginTop: 6,
+	marginBottom: 0,
+}
+
+const stageList: React.CSSProperties = {
+	listStyle: 'none',
+	margin: 0,
+	padding: 0,
+	display: 'flex',
+	flexDirection: 'column',
+	gap: 6,
+}
+
+const stageItem: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 8,
+}
+
+const stageLabel: React.CSSProperties = {
+	fontSize: 12.5,
+	transition: 'color .15s',
+	flex: 1,
+	minWidth: 0,
+}
+
+const stageEstimate: React.CSSProperties = {
+	fontSize: 11,
+	color: 'var(--ink-faint)',
+	fontFamily: 'var(--mono)',
+	flex: 'none',
+}
+
+const pendingDot: React.CSSProperties = {
+	display: 'inline-block',
+	width: 18,
+	height: 18,
+	borderRadius: '50%',
+	background: 'var(--hover)',
+	border: '1px solid var(--border)',
+	flex: 'none',
+}
+
+const spinnerDot: React.CSSProperties = {
+	fontSize: 14,
+	color: 'var(--accent, #6366f1)',
+	letterSpacing: 2,
+	marginLeft: 2,
+}
+
+const thumbnailImg: React.CSSProperties = {
+	width: '100%',
+	aspectRatio: '16/9',
+	objectFit: 'cover',
+	borderRadius: 6,
+	marginBottom: 8,
+	background: 'var(--field, #f5f5f5)',
+}
+
+const thumbnailEmpty: React.CSSProperties = {
+	display: 'flex',
+	flexDirection: 'column',
+	alignItems: 'center',
+	justifyContent: 'center',
+	height: 80,
+	borderRadius: 6,
+	border: '1px dashed var(--border)',
+	marginBottom: 8,
+	gap: 6,
+}
+
+const p4Badge: React.CSSProperties = {
+	fontFamily: 'var(--mono)',
+	fontSize: 9,
+	fontWeight: 600,
+	background: 'var(--amber-tint)',
+	color: 'var(--amber)',
+	padding: '1px 4px',
+	borderRadius: 4,
+	marginLeft: 2,
+}
+
+const transcriptDisplay: React.CSSProperties = {
+	fontSize: 12,
+	lineHeight: 1.6,
+	color: 'var(--ink)',
+	background: 'var(--field, #f5f5f5)',
+	borderRadius: 6,
+	padding: '10px 12px',
+	maxHeight: 180,
+	overflowY: 'auto',
+	marginBottom: 8,
+	whiteSpace: 'pre-wrap',
+	wordBreak: 'break-word',
+}
+
+const editBlock: React.CSSProperties = {
+	display: 'flex',
+	flexDirection: 'column',
+	gap: 8,
+}
+
+const editActions: React.CSSProperties = {
+	display: 'flex',
+	gap: 6,
+}