D2: remove source guard on retry buttons, show error in UI
Queue page:
- Remove && job.source?.startsWith('http') guard on retry button
- Move retry button outside .row-actions hover zone (always visible)
- Add job.error inline in meta line for failed/cancelled jobs
- data-status=failed attribute on failed rows
- Error tint on failed row title
Job detail page:
- Remove source guard from canRetry derived
- Enhanced error banner: warning icon, 'Transcription failed' title,
error message, inline Retry + Delete action buttons
- btn, btn.primary, btn.ghost CSS styles
Home page:
- Add job.error as third line in recent items for failed jobs
- recent-failed CSS class with error-text tint on meta
- recent-err-line styling
fixes #story-d2-retry-widen-upload--d1-d6-evised
This commit is contained in:
Giancarmine Salucci
@@ -264,11 +264,15 @@
|
||||
href="/jobs/{job.id}"
|
||||
class="recent-item"
|
||||
class:first={i === 0}
|
||||
class:recent-failed={job.status === 'failed'}
|
||||
>
|
||||
<SourceIcon kind={jobKind(job)} size={36} accent={ACCENT} />
|
||||
<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}
|
||||
</div>
|
||||
{#if job.status !== 'done' && job.status !== 'failed' && job.status !== 'cancelled'}
|
||||
<div class="recent-progress mono" style="color: {ACCENT}">
|
||||
@@ -560,6 +564,21 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.recent-item.recent-failed .recent-meta {
|
||||
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;
|
||||
|
||||
@@ -82,7 +82,7 @@
|
||||
{:else}
|
||||
<div class="job-list">
|
||||
{#each jobs as job}
|
||||
<a href="/jobs/{job.id}" class="glass job-row">
|
||||
<a href="/jobs/{job.id}" class="glass job-row" data-status={['failed', 'cancelled'].includes(job.status) ? 'failed' : ''}>
|
||||
<SourceIcon kind={jobKind(job)} size={36} accent={ACCENT} />
|
||||
|
||||
<div class="job-info">
|
||||
@@ -99,6 +99,10 @@
|
||||
<span>·</span>
|
||||
<span>{job.audioMode}</span>
|
||||
{/if}
|
||||
{#if ['failed', 'cancelled'].includes(job.status) && job.error}
|
||||
<span>·</span>
|
||||
<span class="job-err-inline" title={job.error}>{job.error}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -122,16 +126,20 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Row actions -->
|
||||
<div class="row-actions">
|
||||
{#if ['failed', 'cancelled'].includes(job.status) && job.source?.startsWith('http')}
|
||||
<!-- Retry slot (always visible) -->
|
||||
{#if ['failed', 'cancelled'].includes(job.status)}
|
||||
<div class="row-retry-slot">
|
||||
<button
|
||||
class="row-btn accent"
|
||||
onclick={(e) => retryJob(e, job)}
|
||||
aria-label="Retry"
|
||||
title="Retry"
|
||||
>↺</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Row actions (hover-revealed, delete only) -->
|
||||
<div class="row-actions">
|
||||
{#if isTerminalJobStatus(job.status)}
|
||||
<button
|
||||
class="row-btn danger"
|
||||
@@ -248,6 +256,25 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.row-retry-slot {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.job-err-inline {
|
||||
color: var(--error-text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
max-width: 160px;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.job-row[data-status="failed"] .job-name {
|
||||
color: var(--error-text);
|
||||
}
|
||||
|
||||
.row-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
@@ -135,8 +135,7 @@
|
||||
const isTerminal = $derived(job !== null && isTerminalJobStatus(job.status));
|
||||
const canRetry = $derived(
|
||||
job !== null &&
|
||||
['failed', 'cancelled'].includes(job.status) &&
|
||||
(job.source?.startsWith('http') ?? false)
|
||||
['failed', 'cancelled'].includes(job.status)
|
||||
);
|
||||
|
||||
async function cancelJob() {
|
||||
@@ -259,7 +258,23 @@
|
||||
|
||||
<!-- ── Error ─────────────────────────────────────────── -->
|
||||
{#if job.error}
|
||||
<div class="error-banner" role="alert">{job.error}</div>
|
||||
<div class="error-banner" role="alert">
|
||||
<div class="eb-icon" aria-hidden="true">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 3L2 21h20L12 3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<line x1="12" y1="10" x2="12" y2="15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="18" r="0.8" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="eb-body">
|
||||
<div class="eb-title">Transcription failed</div>
|
||||
<div class="eb-msg">{job.error}</div>
|
||||
</div>
|
||||
<div class="eb-actions">
|
||||
<button class="btn primary" onclick={retryJobAction} aria-label="Retry transcription">↺ Retry transcription</button>
|
||||
<button class="btn ghost danger-ghost" onclick={deleteJob}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- ── Two-column: pipeline + downloads/transcript ───── -->
|
||||
@@ -391,12 +406,111 @@
|
||||
}
|
||||
|
||||
.error-banner {
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: flex-start;
|
||||
padding: 16px 18px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 90, 90, 0.08);
|
||||
border: 1px solid rgba(255, 90, 90, 0.2);
|
||||
color: #ff8a8a;
|
||||
font-size: 13px;
|
||||
background: var(--error-bg);
|
||||
border: 1px solid var(--error-border);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.eb-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 9px;
|
||||
background: rgba(255,90,90,0.12);
|
||||
color: var(--error-text);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.eb-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.eb-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--error-text);
|
||||
}
|
||||
|
||||
.eb-msg {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: rgba(255,180,180,0.85);
|
||||
margin-top: 5px;
|
||||
overflow-wrap: anywhere;
|
||||
max-height: 96px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.eb-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 12.5px;
|
||||
font-weight: 550;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 7px 13px;
|
||||
border-radius: 9px;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--surface-hover);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background 140ms ease, border-color 140ms ease;
|
||||
}
|
||||
.btn:hover {
|
||||
background: rgba(255,255,255,0.07);
|
||||
border-color: rgba(255,255,255,0.18);
|
||||
}
|
||||
.btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 4px var(--accent-ring);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #10120a;
|
||||
font-weight: 600;
|
||||
padding: 10px 18px;
|
||||
font-size: 13.5px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 18px rgba(205,242,78,0.18);
|
||||
}
|
||||
.btn.primary:hover {
|
||||
background: #d9f566;
|
||||
border-color: #d9f566;
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.btn.ghost:hover {
|
||||
background: rgba(255,255,255,0.04);
|
||||
}
|
||||
|
||||
.btn.danger-ghost {
|
||||
color: var(--error-text);
|
||||
}
|
||||
.btn.danger-ghost:hover {
|
||||
background: rgba(255,90,90,0.08);
|
||||
border-color: var(--error-border);
|
||||
}
|
||||
|
||||
/* ── Breadcrumb ─────────────────────────────────────────── */
|
||||
|
||||
Reference in New Issue
Block a user