plum-e2e 2.4.13 → 2.5.0

package/frontend/src/routes/reports/[id]/+page.svelte

@@ -17,11 +17,27 @@
 
 <script>
 	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
-	import { slide } from 'svelte/transition';
+	import { onMount, onDestroy } from 'svelte';
+	import { slide, fade } from 'svelte/transition';
 	import { fetchReportDetail, screenshotUrl } from '$lib/api/reports';
-	import { isScheduled, triggerLabel, fmtDuration, stagger, featureFile } from '$lib/utils/format';
+	import {
+		isScheduled,
+		triggerLabel,
+		fmtDuration,
+		stagger,
+		featureFile,
+		groupedScenarios,
+		parseRunnerLogs,
+		featureSuiteTag,
+		scenarioHasScreenshots
+	} from '$lib/utils/format';
+	import { REPLAY_STEP_MS } from '$lib/constants';
 	import Badge from '$lib/components/ui/Badge.svelte';
+	import BackLink from '$lib/components/ui/BackLink.svelte';
+	import StatusDot from '$lib/components/ui/StatusDot.svelte';
+	import TagChip from '$lib/components/ui/TagChip.svelte';
+	import StepKeyword from '$lib/components/ui/StepKeyword.svelte';
+	import StepStatusIcon from '$lib/components/ui/StepStatusIcon.svelte';
 	import BrowserIcon from '$lib/components/icons/BrowserIcon.svelte';
 
 	const reportId = parseInt($page.params.id, 10);
@@ -30,89 +46,106 @@
 	let error = null;
 	let expandedScenarios = new Set();
 
-	onMount(async () => {
-		try {
-			detail = await fetchReportDetail(reportId);
-		} catch {
-			error = 'Could not load report.';
-		}
+	// Replay state
+	let replayOpen = false;
+	let replayScenario = null;
+	let replayIdx = 0;
+	let replayPlaying = false;
+	let replayTimer = null;
+
+	$: replaySteps = replayScenario?.steps ?? [];
+	$: currentReplayStep = replaySteps[replayIdx] ?? null;
+
+	onDestroy(() => {
+		if (replayTimer) clearInterval(replayTimer);
 	});
 
-	function toggleScenario(id) {
-		if (expandedScenarios.has(id)) expandedScenarios.delete(id);
-		else expandedScenarios.add(id);
-		expandedScenarios = expandedScenarios;
+	function startPlayback() {
+		replayPlaying = true;
+		replayTimer = setInterval(() => {
+			if (replayIdx < (replayScenario?.steps?.length ?? 0) - 1) {
+				replayIdx++;
+			} else {
+				stopPlayback();
+			}
+		}, REPLAY_STEP_MS);
 	}
 
-	function keywordClass(kw) {
-		const k = kw.toLowerCase();
-		if (k === 'given') return 'kw-given';
-		if (k === 'when') return 'kw-when';
-		if (k === 'then') return 'kw-then';
-		return 'kw-and';
+	function stopPlayback() {
+		replayPlaying = false;
+		if (replayTimer) {
+			clearInterval(replayTimer);
+			replayTimer = null;
+		}
+	}
+
+	function openReplay(scenario) {
+		stopPlayback();
+		replayScenario = scenario;
+		replayIdx = 0;
+		replayOpen = true;
+		startPlayback();
 	}
 
-	function scenarioTestTag(scenario) {
-		return scenario.tags.find((tag) => /^@test[\w-]*/i.test(tag));
+	function closeReplay() {
+		stopPlayback();
+		replayOpen = false;
+		replayScenario = null;
 	}
 
-	function featureSuiteTag(feature) {
-		for (const scenario of feature.scenarios) {
-			const suiteTag = scenario.tags.find((tag) => /suite/i.test(tag));
-			if (suiteTag) return suiteTag;
+	function togglePlayback() {
+		if (replayPlaying) {
+			stopPlayback();
+		} else {
+			if (replayIdx >= replaySteps.length - 1) replayIdx = 0;
+			startPlayback();
 		}
-		return null;
 	}
 
-	function visibleTags(scenario) {
-		const testTag = scenarioTestTag(scenario);
-		if (testTag) return [testTag];
-		return scenario.tags.filter((tag) => !tag.includes('suite'));
+	function replayPrev() {
+		stopPlayback();
+		if (replayIdx > 0) replayIdx--;
 	}
 
-	function worstStatus(scenarios) {
-		const rank = { failed: 3, pending: 2, skipped: 1, passed: 0 };
-		return scenarios.reduce(
-			(status, scenario) =>
-				(rank[scenario.status] ?? 0) > (rank[status] ?? 0) ? scenario.status : status,
-			'passed'
-		);
+	function replayNext() {
+		stopPlayback();
+		if (replayIdx < replaySteps.length - 1) replayIdx++;
 	}
 
-	function groupedScenarios(scenarios) {
-		const groups = new Map();
-		for (const scenario of scenarios) {
-			const testTag = scenarioTestTag(scenario);
-			const key = testTag || `${scenario.keyword}:${scenario.name}`;
-			if (!groups.has(key)) {
-				groups.set(key, {
-					key,
-					name: scenario.name,
-					tags: visibleTags(scenario),
-					scenarios: [],
-					duration: 0,
-					status: scenario.status
-				});
-			}
-			const group = groups.get(key);
-			group.scenarios.push(scenario);
-			group.duration += scenario.duration;
-			group.status = worstStatus(group.scenarios);
+	function handleKeydown(e) {
+		if (!replayOpen) return;
+		if (e.key === 'ArrowRight') replayNext();
+		else if (e.key === 'ArrowLeft') replayPrev();
+		else if (e.key === ' ') {
+			e.preventDefault();
+			togglePlayback();
+		} else if (e.key === 'Escape') closeReplay();
+	}
+
+	onMount(async () => {
+		try {
+			detail = await fetchReportDetail(reportId);
+		} catch {
+			error = 'Could not load report.';
 		}
-		return Array.from(groups.values());
+	});
+
+	function toggleScenario(id) {
+		if (expandedScenarios.has(id)) expandedScenarios.delete(id);
+		else expandedScenarios.add(id);
+		expandedScenarios = expandedScenarios;
 	}
 
+	let activeLogTab = 0;
+	$: logSections = parseRunnerLogs(detail?.logs ?? null);
+	$: if (logSections) activeLogTab = 0;
+
 	$: overallPass = detail?.status === 'PASS';
-	$: passed =
-		detail?.features.flatMap((f) => f.scenarios).filter((s) => s.status === 'passed').length ?? 0;
-	$: failed =
-		detail?.features.flatMap((f) => f.scenarios).filter((s) => s.status === 'failed').length ?? 0;
-	$: skipped =
-		detail?.features
-			.flatMap((f) => f.scenarios)
-			.filter((s) => s.status === 'skipped' || s.status === 'pending').length ?? 0;
-	$: totalDuration =
-		detail?.features.flatMap((f) => f.scenarios).reduce((s, sc) => s + sc.duration, 0) ?? 0;
+	$: allScenarios = detail?.features.flatMap((f) => f.scenarios) ?? [];
+	$: passed = allScenarios.filter((s) => s.status === 'passed').length;
+	$: failed = allScenarios.filter((s) => s.status === 'failed').length;
+	$: skipped = allScenarios.filter((s) => s.status === 'skipped' || s.status === 'pending').length;
+	$: totalDuration = allScenarios.reduce((s, sc) => s + sc.duration, 0);
 	$: groupedFeatures =
 		detail?.features.map((feature) => ({
 			...feature,
@@ -120,25 +153,11 @@
 		})) ?? [];
 </script>
 
+<svelte:window on:keydown={handleKeydown} />
+
 <svelte:head><title>Report — Plum</title></svelte:head>
 
-<div class="back-row">
-	<a href="/reports" class="back-link">
-		<svg
-			width="14"
-			height="14"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-		>
-			<line x1="19" y1="12" x2="5" y2="12" />
-			<polyline points="12 19 5 12 12 5" />
-		</svg>
-		Reports
-	</a>
-</div>
+<BackLink href="/reports" label="Reports" />
 
 {#if error}
 	<div class="error-state">{error}</div>
@@ -302,6 +321,56 @@
 		</div>
 	</div>
 
+	{#if logSections.length > 0}
+		<details class="logs-section">
+			<summary class="logs-summary">
+				<svg
+					width="13"
+					height="13"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" />
+				</svg>
+				Run Logs
+				{#if logSections.length > 1}
+					<span class="log-runner-count">{logSections.length} runners</span>
+				{/if}
+			</summary>
+
+			{#if logSections.length > 1}
+				<div class="log-tabs">
+					{#each logSections as section, i}
+						<button
+							class="log-tab"
+							class:log-tab-active={activeLogTab === i}
+							on:click|stopPropagation={() => (activeLogTab = i)}
+						>
+							<svg
+								width="10"
+								height="10"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+							>
+								<rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8M12 17v4" />
+							</svg>
+							{section.name}
+						</button>
+					{/each}
+				</div>
+			{/if}
+
+			<pre class="logs-body">{logSections[activeLogTab]?.content ?? ''}</pre>
+		</details>
+	{/if}
+
 	{#each groupedFeatures as feature, fi}
 		<div
 			class="feature"
@@ -342,62 +411,85 @@
 				{#each feature.scenarioGroups as group, si}
 					{@const scenId = `${fi}-${group.key}`}
 					{@const open = expandedScenarios.has(scenId)}
+					{@const groupHasReplay = group.scenarios.some(scenarioHasScreenshots)}
 					<div
 						class="scenario"
 						class:scenario-fail={group.status === 'failed'}
 						style={stagger(fi * 5 + si, 40)}
 					>
-						<button class="scenario-header" on:click={() => toggleScenario(scenId)}>
-							<span
-								class="scenario-status-dot"
-								class:pass={group.status === 'passed'}
-								class:fail={group.status === 'failed'}
-								class:skip={group.status === 'skipped' || group.status === 'pending'}
-							></span>
-
-							<span class="scenario-name">
-								{group.name}
-								{#if group.scenarios.length > 1}
-									<span class="scenario-count">{group.scenarios.length} cases</span>
-								{/if}
-							</span>
-
-							<div class="scenario-tags">
-								{#each group.tags as tag}
-									<span class="tag-chip">{tag}</span>
-								{/each}
-							</div>
+						<div class="scenario-row">
+							<button class="scenario-header" on:click={() => toggleScenario(scenId)}>
+								<StatusDot status={group.status} />
 
-							<span class="scenario-duration">{fmtDuration(group.duration)}</span>
+								<span class="scenario-name">
+									{group.name}
+									{#if group.scenarios.length > 1}
+										<span class="scenario-count">{group.scenarios.length} cases</span>
+									{/if}
+								</span>
 
-							<svg
-								width="13"
-								height="13"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								class="chevron"
-								class:rotated={open}
-							>
-								<polyline points="9 18 15 12 9 6" />
-							</svg>
-						</button>
+								<div class="scenario-tags">
+									{#each group.tags as tag}
+										<TagChip {tag} />
+									{/each}
+								</div>
+
+								<span class="scenario-duration">{fmtDuration(group.duration)}</span>
+
+								<svg
+									width="13"
+									height="13"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									class="chevron"
+									class:rotated={open}
+								>
+									<polyline points="9 18 15 12 9 6" />
+								</svg>
+							</button>
+
+							{#if groupHasReplay && group.scenarios.length === 1}
+								<button
+									class="replay-btn"
+									title="Watch replay"
+									on:click={() => openReplay(group.scenarios[0])}
+								>
+									<svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" stroke="none">
+										<polygon points="5,3 19,12 5,21" />
+									</svg>
+									Replay
+								</button>
+							{/if}
+						</div>
 
 						{#if open}
 							<div class="steps" transition:slide={{ duration: 200 }}>
 								{#each group.scenarios as scenario, exampleIndex}
 									{#if group.scenarios.length > 1}
 										<div class="example-header">
-											<span
-												class="scenario-status-dot"
-												class:pass={scenario.status === 'passed'}
-												class:fail={scenario.status === 'failed'}
-												class:skip={scenario.status === 'skipped' || scenario.status === 'pending'}
-											></span>
+											<StatusDot status={scenario.status} />
 											<span>Case {exampleIndex + 1}</span>
 											<span class="scenario-duration">{fmtDuration(scenario.duration)}</span>
+											{#if scenarioHasScreenshots(scenario)}
+												<button
+													class="replay-btn replay-btn-sm"
+													on:click={() => openReplay(scenario)}
+												>
+													<svg
+														width="9"
+														height="9"
+														viewBox="0 0 24 24"
+														fill="currentColor"
+														stroke="none"
+													>
+														<polygon points="5,3 19,12 5,21" />
+													</svg>
+													Replay
+												</button>
+											{/if}
 										</div>
 									{/if}
 
@@ -408,10 +500,8 @@
 											class:step-skip={step.status === 'skipped' || step.status === 'pending'}
 										>
 											<div class="step-row">
-												<span class="step-status-icon">
-													{#if step.status === 'passed'}✓{:else if step.status === 'failed'}✗{:else}−{/if}
-												</span>
-												<span class="kw {keywordClass(step.keyword)}">{step.keyword}</span>
+												<StepStatusIcon status={step.status} />
+												<StepKeyword keyword={step.keyword} />
 												<span class="step-name">{step.name}</span>
 												<span class="step-duration">{fmtDuration(step.duration)}</span>
 											</div>
@@ -421,12 +511,12 @@
 											{/if}
 
 											{#if step.screenshot}
-												<details class="screenshot-wrap" open>
+												<details class="screenshot-wrap">
 													<summary class="screenshot-toggle">Screenshot</summary>
 													<img
 														class="screenshot"
 														src={screenshotUrl(step.screenshot)}
-														alt="Failure screenshot"
+														alt="Step screenshot"
 													/>
 												</details>
 											{/if}
@@ -442,25 +532,125 @@
 	{/each}
 {/if}
 
-<style>
-	.back-row {
-		margin-bottom: 1.5rem;
-	}
+{#if replayOpen && replayScenario}
+	<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+	<div class="replay-overlay" transition:fade={{ duration: 150 }} on:click={closeReplay}>
+		<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+		<div class="replay-modal" on:click|stopPropagation>
+			<div class="replay-modal-header">
+				<span class="replay-modal-title">{replayScenario.name}</span>
+				<button class="replay-close" on:click={closeReplay}>
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					>
+						<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+					</svg>
+				</button>
+			</div>
 
-	.back-link {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.35rem;
-		font-size: 0.8125rem;
-		color: var(--text-muted);
-		text-decoration: none;
-		transition: color var(--duration-fast);
-	}
+			<div class="replay-screenshot-area">
+				{#if currentReplayStep?.screenshot}
+					<img
+						class="replay-screenshot"
+						src={screenshotUrl(currentReplayStep.screenshot)}
+						alt="Step {replayIdx + 1} screenshot"
+					/>
+				{:else}
+					<div class="replay-no-screenshot">No screenshot captured for this step</div>
+				{/if}
+			</div>
 
-	.back-link:hover {
-		color: var(--text);
-	}
+			<div class="replay-timeline">
+				<input
+					type="range"
+					class="replay-slider"
+					min="0"
+					max={replaySteps.length - 1}
+					value={replayIdx}
+					style="--fill: {replaySteps.length > 1
+						? (replayIdx / (replaySteps.length - 1)) * 100
+						: 0}%"
+					on:input={(e) => {
+						stopPlayback();
+						replayIdx = Number(e.target.value);
+					}}
+				/>
+			</div>
+
+			<div class="replay-step-info">
+				<StepStatusIcon status={currentReplayStep?.status ?? 'skipped'} />
+				<StepKeyword keyword={currentReplayStep?.keyword ?? ''} />
+				<span class="replay-step-name">{currentReplayStep?.name}</span>
+			</div>
+
+			<div class="replay-nav">
+				<button class="replay-nav-btn" on:click={replayPrev} disabled={replayIdx === 0}>
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					>
+						<polyline points="15 18 9 12 15 6" />
+					</svg>
+				</button>
+
+				<button
+					class="replay-play-btn"
+					on:click={togglePlayback}
+					title={replayPlaying ? 'Pause' : 'Play'}
+				>
+					{#if replayPlaying}
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
+							<rect x="6" y="4" width="4" height="16" rx="1" /><rect
+								x="14"
+								y="4"
+								width="4"
+								height="16"
+								rx="1"
+							/>
+						</svg>
+					{:else}
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
+							<polygon points="5,3 19,12 5,21" />
+						</svg>
+					{/if}
+				</button>
+
+				<button
+					class="replay-nav-btn"
+					on:click={replayNext}
+					disabled={replayIdx === replaySteps.length - 1}
+				>
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					>
+						<polyline points="9 18 15 12 9 6" />
+					</svg>
+				</button>
 
+				<span class="replay-counter">{replayIdx + 1} / {replaySteps.length}</span>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
 	.report-header {
 		border-radius: var(--radius-lg);
 		border: 1px solid var(--border);
@@ -526,7 +716,7 @@
 		color: var(--accent);
 		background: var(--accent-soft);
 		border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
-		border-radius: 100px;
+		border-radius: var(--radius-pill);
 		padding: 0.25rem 0.7rem;
 		white-space: nowrap;
 		max-width: 240px;
@@ -567,7 +757,7 @@
 		font-weight: 500;
 		background: var(--bg-subtle);
 		border: 1px solid var(--border);
-		border-radius: 100px;
+		border-radius: var(--radius-pill);
 		padding: 0.1rem 0.45rem;
 	}
 
@@ -675,7 +865,7 @@
 		background: var(--accent-soft);
 		color: var(--accent);
 		padding: 0.1rem 0.4rem;
-		border-radius: 100px;
+		border-radius: var(--radius-pill);
 		font-weight: 500;
 	}
 
@@ -699,12 +889,18 @@
 		border-left-color: var(--fail);
 	}
 
+	.scenario-row {
+		display: flex;
+		align-items: stretch;
+	}
+
 	.scenario-header {
 		display: flex;
 		align-items: center;
 		gap: 0.75rem;
 		padding: 0.75rem 1rem;
-		width: 100%;
+		flex: 1;
+		min-width: 0;
 		background: transparent;
 		border: none;
 		cursor: pointer;
@@ -717,21 +913,34 @@
 		background: var(--bg-subtle);
 	}
 
-	.scenario-status-dot {
-		width: 8px;
-		height: 8px;
-		border-radius: 50%;
+	.replay-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0 0.875rem;
+		font-family: var(--font-body);
+		font-size: 0.72rem;
+		font-weight: 500;
+		color: var(--accent);
+		background: transparent;
+		border: none;
+		border-left: 1px solid var(--border);
+		cursor: pointer;
 		flex-shrink: 0;
+		transition: background var(--duration-fast);
+		white-space: nowrap;
 	}
 
-	.scenario-status-dot.pass {
-		background: var(--pass);
-	}
-	.scenario-status-dot.fail {
-		background: var(--fail);
+	.replay-btn:hover {
+		background: var(--accent-soft);
 	}
-	.scenario-status-dot.skip {
-		background: var(--text-muted);
+
+	.replay-btn-sm {
+		margin-left: auto;
+		padding: 0.15rem 0.5rem;
+		border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+		border-radius: var(--radius-sm);
+		font-size: 0.68rem;
 	}
 
 	.scenario-name {
@@ -754,7 +963,7 @@
 		color: var(--text-muted);
 		background: var(--bg-subtle);
 		border: 1px solid var(--border);
-		border-radius: 100px;
+		border-radius: var(--radius-pill);
 		padding: 0.05rem 0.4rem;
 		white-space: nowrap;
 	}
@@ -765,15 +974,6 @@
 		flex-shrink: 0;
 	}
 
-	.tag-chip {
-		font-size: 0.65rem;
-		font-family: 'JetBrains Mono', monospace;
-		background: var(--accent-soft);
-		color: var(--accent);
-		padding: 0.1rem 0.4rem;
-		border-radius: 100px;
-	}
-
 	.scenario-duration {
 		font-size: 0.75rem;
 		color: var(--text-muted);
@@ -834,49 +1034,6 @@
 		gap: 0.5rem;
 	}
 
-	.step-status-icon {
-		font-size: 0.75rem;
-		font-weight: 600;
-		width: 14px;
-		flex-shrink: 0;
-		color: var(--text-muted);
-	}
-
-	.step-fail .step-status-icon {
-		color: var(--fail);
-	}
-	.step:not(.step-fail):not(.step-skip) .step-status-icon {
-		color: var(--pass);
-	}
-
-	.kw {
-		font-size: 0.72rem;
-		font-weight: 500;
-		letter-spacing: 0.04em;
-		flex-shrink: 0;
-		padding: 0.05rem 0.4rem;
-		border-radius: 3px;
-		font-family: 'JetBrains Mono', monospace;
-	}
-
-	.kw-given {
-		background: var(--accent-soft);
-		color: var(--accent);
-	}
-	.kw-when {
-		background: var(--warn-soft);
-		color: var(--warn);
-	}
-	.kw-then {
-		background: var(--pass-soft);
-		color: var(--pass);
-	}
-	.kw-and {
-		background: var(--bg-elevated);
-		color: var(--text-muted);
-		border: 1px solid var(--border);
-	}
-
 	.step-name {
 		flex: 1;
 		font-size: 0.8125rem;
@@ -968,4 +1125,335 @@
 		text-align: center;
 		font-size: 0.9375rem;
 	}
+
+	/* ── Run Logs ── */
+	.logs-section {
+		margin-bottom: 1.25rem;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+		animation: fadeUp 0.35s var(--ease-out) both;
+	}
+
+	.logs-summary {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.875rem 1.25rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: var(--text);
+		cursor: pointer;
+		user-select: none;
+		list-style: none;
+	}
+
+	.logs-summary::-webkit-details-marker {
+		display: none;
+	}
+
+	.logs-summary:hover {
+		background: var(--bg-subtle);
+	}
+
+	.log-runner-count {
+		margin-left: auto;
+		font-size: 0.7rem;
+		font-weight: 500;
+		color: var(--text-muted);
+		background: var(--bg-subtle);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-pill);
+		padding: 0.1rem 0.5rem;
+	}
+
+	.log-tabs {
+		display: flex;
+		gap: 0;
+		border-bottom: 1px solid var(--border);
+		background: var(--bg-subtle);
+		overflow-x: auto;
+	}
+
+	.log-tab {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.5rem 1rem;
+		font-size: 0.78rem;
+		font-weight: 500;
+		font-family: var(--font-body);
+		color: var(--text-muted);
+		background: transparent;
+		border: none;
+		border-bottom: 2px solid transparent;
+		cursor: pointer;
+		white-space: nowrap;
+		transition: color var(--duration-fast);
+	}
+
+	.log-tab:hover {
+		color: var(--text);
+	}
+
+	.log-tab-active {
+		color: var(--text);
+		border-bottom-color: var(--accent);
+	}
+
+	.logs-body {
+		font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
+		font-size: 0.775rem;
+		line-height: 1.7;
+		background: var(--terminal-bg);
+		color: var(--terminal-text);
+		padding: 1rem 1.25rem;
+		max-height: 480px;
+		overflow-y: auto;
+		white-space: pre-wrap;
+		word-break: break-word;
+		margin: 0;
+		border-top: 1px solid var(--border);
+	}
+
+	.logs-body::-webkit-scrollbar {
+		width: 4px;
+	}
+	.logs-body::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.1);
+		border-radius: 2px;
+	}
+
+	/* ── Replay modal ── */
+	.replay-overlay {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.72);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 200;
+		padding: 1rem;
+	}
+
+	.replay-modal {
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-lg);
+		width: min(920px, 100%);
+		max-height: 90vh;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+	}
+
+	.replay-modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.875rem 1.25rem;
+		border-bottom: 1px solid var(--border);
+		gap: 1rem;
+		flex-shrink: 0;
+	}
+
+	.replay-modal-title {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: var(--text);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.replay-close {
+		background: transparent;
+		border: none;
+		color: var(--text-muted);
+		cursor: pointer;
+		padding: 0.25rem;
+		display: flex;
+		align-items: center;
+		border-radius: var(--radius-sm);
+		flex-shrink: 0;
+		transition: color var(--duration-fast);
+	}
+
+	.replay-close:hover {
+		color: var(--text);
+	}
+
+	.replay-screenshot-area {
+		flex: 1;
+		min-height: 0;
+		background: var(--bg-subtle);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		position: relative;
+	}
+
+	.replay-screenshot {
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: contain;
+		display: block;
+	}
+
+	.replay-no-screenshot {
+		color: var(--text-muted);
+		font-size: 0.8125rem;
+		font-family: 'JetBrains Mono', monospace;
+	}
+
+	.replay-step-info {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem 1.25rem;
+		border-top: 1px solid var(--border);
+		flex-shrink: 0;
+		min-width: 0;
+	}
+
+	.replay-step-name {
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.8125rem;
+		color: var(--text);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* ── Timeline slider ── */
+	.replay-timeline {
+		padding: 0.5rem 1.25rem;
+		border-top: 1px solid var(--border);
+		flex-shrink: 0;
+	}
+
+	.replay-slider {
+		display: block;
+		width: 100%;
+		height: 4px;
+		-webkit-appearance: none;
+		appearance: none;
+		background: transparent;
+		border-radius: 2px;
+		cursor: pointer;
+		outline: none;
+	}
+
+	.replay-slider::-webkit-slider-runnable-track {
+		height: 4px;
+		border-radius: 2px;
+		background: linear-gradient(
+			to right,
+			var(--accent) var(--fill, 0%),
+			var(--border) var(--fill, 0%)
+		);
+	}
+
+	.replay-slider::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		width: 14px;
+		height: 14px;
+		margin-top: -5px;
+		border-radius: 50%;
+		background: var(--accent);
+		cursor: pointer;
+		transition: transform 0.1s;
+	}
+
+	.replay-slider:hover::-webkit-slider-thumb {
+		transform: scale(1.25);
+	}
+
+	.replay-slider::-moz-range-track {
+		height: 4px;
+		border-radius: 2px;
+		background: var(--border);
+	}
+
+	.replay-slider::-moz-range-progress {
+		height: 4px;
+		border-radius: 2px;
+		background: var(--accent);
+	}
+
+	.replay-slider::-moz-range-thumb {
+		width: 14px;
+		height: 14px;
+		border-radius: 50%;
+		background: var(--accent);
+		border: none;
+		cursor: pointer;
+	}
+
+	/* ── Nav bar ── */
+	.replay-nav {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.75rem;
+		padding: 0.5rem 1.25rem 0.625rem;
+		border-top: 1px solid var(--border);
+		flex-shrink: 0;
+	}
+
+	.replay-nav-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 30px;
+		height: 30px;
+		background: var(--bg-subtle);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		color: var(--text);
+		cursor: pointer;
+		transition: background var(--duration-fast);
+	}
+
+	.replay-nav-btn:hover:not(:disabled) {
+		background: var(--bg-elevated);
+	}
+
+	.replay-nav-btn:disabled {
+		opacity: 0.35;
+		cursor: default;
+	}
+
+	.replay-play-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 38px;
+		height: 38px;
+		background: var(--accent);
+		border: none;
+		border-radius: 50%;
+		color: var(--white);
+		cursor: pointer;
+		transition:
+			opacity var(--duration-fast),
+			transform var(--duration-fast);
+	}
+
+	.replay-play-btn:hover {
+		opacity: 0.85;
+		transform: scale(1.05);
+	}
+
+	.replay-counter {
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.78rem;
+		color: var(--text-muted);
+		min-width: 5ch;
+		text-align: center;
+		margin-left: 0.25rem;
+	}
 </style>