From 36036ba2eaeec367971aec2713ce5dbafa97e016 Mon Sep 17 00:00:00 2001
From: Giancarmine Salucci <giancarmine@gmail.com>
Date: Fri, 17 Jul 2026 13:59:18 +0000
Subject: [PATCH] D2: finalize job-list error display + deploy

- simplify JobErrorLine to compact error-line component (text + buttons)
- add JobErrorLine to +page.svelte for all jobs
- add coverage/ to gitignore
- add test config and job-list-error-display tests
- remove local handleRetry from +page.svelte
- update app-environment.ts mock
---
 src/lib/components/JobErrorLine.svelte | 52 +++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/JobErrorLine.svelte b/src/lib/components/JobErrorLine.svelte
index fb5af18..fcc3bd1 100644
--- a/src/lib/components/JobErrorLine.svelte
+++ b/src/lib/components/JobErrorLine.svelte
@@ -3,17 +3,48 @@
 
 	interface Props {
 		job: Job;
+		accentColor: string;
+		onRetry?: () => void;
+		onDelete?: () => void;
+		retryLabel?: string;
+		deleteLabel?: string;
 	}
 
-	let { job }: Props = $props();
+	let {
+		job,
+		accentColor,
+		onRetry,
+		onDelete,
+		retryLabel = 'Retry',
+		deleteLabel = 'Delete',
+	}: Props = $props();
 </script>
 
 {#if job.status === 'failed' && job.error}
-	<div class="recent-err-line" title={job.error}>{job.error}</div>
+	<div class="recent-err-line" role="alert" title={job.error}>
+		<span class="error-text" style="color: {accentColor}">{job.error}</span>
+		{#if onRetry}
+			<button class="retry-btn" onclick={onRetry} aria-label={retryLabel}>{retryLabel}</button>
+		{/if}
+		{#if onDelete}
+			<button class="delete-btn" onclick={onDelete} aria-label={deleteLabel}>{deleteLabel}</button>
+		{/if}
+	</div>
+{:else if job.status === 'cancelled'}
+	<div class="recent-err-line" role="status">
+		<span>Job was cancelled</span>
+	</div>
+{:else if job.status === 'done' && job.segmentsJson}
+	<div class="recent-err-line">
+		<button class="delete-btn" onclick={onDelete} aria-label={deleteLabel}>{deleteLabel}</button>
+	</div>
 {/if}
 
 <style>
 	.recent-err-line {
+		display: flex;
+		align-items: center;
+		gap: 6px;
 		font-size: 11.5px;
 		color: var(--error-text);
 		white-space: nowrap;
@@ -23,4 +54,21 @@
 		font-family: var(--font-mono);
 		max-width: 100%;
 	}
+
+	.retry-btn, .delete-btn {
+		font-size: 11.5px;
+		font-family: var(--font-mono);
+		cursor: pointer;
+		border: 1px solid transparent;
+		border-radius: 4px;
+		padding: 2px 6px;
+	}
+
+	.retry-btn {
+		color: var(--accent);
+	}
+
+	.delete-btn {
+		color: var(--error-text);
+	}
 </style>