story-ui-job-list-error: fix fake-green test — extract real JobErrorLine component

Reviewer flagged: tests rendered __mocks__/JobErrorDisplay.svelte (a test-only
duplicate), so removing lines 273-274 from +page.svelte left every test green.

Fix (option B): extract error block into src/lib/components/JobErrorLine.svelte,
import it from +page.svelte, move scoped CSS into the component, delete the mock,
and point the test at the real component.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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>

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;

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 }),
 			},