diff --git a/src/tests/__mocks__/JobErrorDisplay.svelte b/src/lib/components/JobErrorLine.svelte
similarity index 52%
rename from src/tests/__mocks__/JobErrorDisplay.svelte
rename to src/lib/components/JobErrorLine.svelte
index 5b27ca9..fb5af18 100644
--- a/src/tests/__mocks__/JobErrorDisplay.svelte
+++ b/src/lib/components/JobErrorLine.svelte
@@ -11,3 +11,16 @@
 {#if job.status === 'failed' && job.error}
 	<div class="recent-err-line" title={job.error}>{job.error}</div>
 {/if}
+
+<style>
+	.recent-err-line {
+		font-size: 11.5px;
+		color: var(--error-text);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		margin-top: 3px;
+		font-family: var(--font-mono);
+		max-width: 100%;
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7361a92..15fb8a7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,6 +5,7 @@
 	import SourceIcon from '$lib/components/SourceIcon.svelte';
 	import Waveform from '$lib/components/Waveform.svelte';
 	import RecordButton from '$lib/components/RecordButton.svelte';
+	import JobErrorLine from '$lib/components/JobErrorLine.svelte';
 	import { accent } from '$lib/accent.js';
 
 	const ACCENT = $derived($accent.value);
@@ -270,9 +271,7 @@
 						<div class="recent-text">
 							<div class="recent-title">{job.title || job.source}</div>
 							<div class="recent-meta mono">{jobMeta(job)}</div>
-							{#if job.status === 'failed' && job.error}
-								<div class="recent-err-line" title={job.error}>{job.error}</div>
-							{/if}
+							<JobErrorLine {job} />
 						</div>
 						{#if job.status !== 'done' && job.status !== 'failed' && job.status !== 'cancelled'}
 							<div class="recent-progress mono" style="color: {ACCENT}">
@@ -568,17 +567,6 @@
 		color: var(--error-text);
 	}
 
-	.recent-err-line {
-		font-size: 11.5px;
-		color: var(--error-text);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		margin-top: 3px;
-		font-family: var(--font-mono);
-		max-width: 100%;
-	}
-
 	/* ── Utilities ─────────────────────────────────────────── */
 	.sr-only {
 		position: absolute;
diff --git a/src/tests/job-list-error-display.test.ts b/src/tests/job-list-error-display.test.ts
index 8fd12f5..dc3f369 100644
--- a/src/tests/job-list-error-display.test.ts
+++ b/src/tests/job-list-error-display.test.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { render } from 'svelte/server';
-import type { Job, AudioMode, JobStatus } from '$lib/types.js';
-import JobErrorDisplay from './__mocks__/JobErrorDisplay.svelte';
+import type { Job } from '$lib/types.js';
+import JobErrorLine from '$lib/components/JobErrorLine.svelte';
 
 // Factory: minimal Job shape needed by the error display logic
 function makeJob(overrides: Partial<Job> = {}): Job {
@@ -27,7 +27,7 @@ function makeJob(overrides: Partial<Job> = {}): Job {
 
 describe('Job list error display', () => {
 	it('renders error text for a failed job with error message', () => {
-		const result = render(JobErrorDisplay, {
+		const result = render(JobErrorLine, {
 			props: {
 				job: makeJob({ status: 'failed', error: 'simulated transcription failure' }),
 			},
@@ -38,7 +38,7 @@ describe('Job list error display', () => {
 	});
 
 	it('renders nothing when job status is done with null error', () => {
-		const result = render(JobErrorDisplay, {
+		const result = render(JobErrorLine, {
 			props: {
 				job: makeJob({ status: 'done', error: null }),
 			},
@@ -51,7 +51,7 @@ describe('Job list error display', () => {
 	});
 
 	it('renders nothing when job status is failed but error is null', () => {
-		const result = render(JobErrorDisplay, {
+		const result = render(JobErrorLine, {
 			props: {
 				job: makeJob({ status: 'failed', error: null }),
 			},
@@ -62,7 +62,7 @@ describe('Job list error display', () => {
 	});
 
 	it('renders nothing when job has error but status is not failed', () => {
-		const result = render(JobErrorDisplay, {
+		const result = render(JobErrorLine, {
 			props: {
 				job: makeJob({ status: 'pending', error: 'some error' }),
 			},
@@ -74,7 +74,7 @@ describe('Job list error display', () => {
 
 	it('sets title attribute on error element to full error text', () => {
 		const errMsg = 'detailed error description for tooltip';
-		const result = render(JobErrorDisplay, {
+		const result = render(JobErrorLine, {
 			props: {
 				job: makeJob({ status: 'failed', error: errMsg }),
 			},