YT-AI-Automation / frontend /src /components /RunErrorPanel.tsx
github-actions
Sync Docker Space
9b79a79
Raw
History Blame Contribute Delete
3.87 kB
import { AlertTriangle, Clipboard, ListOrdered, RefreshCw } from 'lucide-react'
import { useToast } from '../store/toast'
function likelyCause(message: string): string {
const m = message.toLowerCase()
if (m.includes('powerpoint') || m.includes('ppt')) return 'PowerPoint may be closed, busy, blocked by a dialog, or unavailable on this machine.'
if (m.includes('moviepy') || m.includes('ffmpeg')) return 'The video engine is missing or ffmpeg is not available.'
if (m.includes('api') || m.includes('key') || m.includes('model')) return 'The AI provider configuration may be missing or rejected.'
if (m.includes('youtube') || m.includes('sign in') || m.includes('cookies')) return 'YouTube may require cookies or the video/timestamps may be unavailable.'
if (m.includes('permission') || m.includes('access') || m.includes('write')) return 'The backend may not have permission to write into the output folder.'
return 'A backend step failed while processing this run.'
}
function nextAction(message: string): string {
const m = message.toLowerCase()
if (m.includes('powerpoint') || m.includes('ppt')) return 'Close PowerPoint windows, dismiss any dialogs, then retry the export.'
if (m.includes('moviepy') || m.includes('ffmpeg')) return 'Install MoviePy/ffmpeg or switch to screenshots/PPTX where available.'
if (m.includes('api') || m.includes('key') || m.includes('model')) return 'Open Settings, verify the API key, then run System Check again.'
if (m.includes('youtube') || m.includes('sign in') || m.includes('cookies')) return 'Export YouTube cookies to backend/config/cookies.txt, then retry.'
if (m.includes('permission') || m.includes('access') || m.includes('write')) return 'Check output folder permissions and disk space, then retry.'
return 'Open logs for technical details, then retry when the dependency is fixed.'
}
export default function RunErrorPanel({
title = 'Run failed',
message,
onRetry,
onOpenLogs,
}: {
title?: string
message: string
onRetry?: () => void
onOpenLogs?: () => void
}) {
const toast = useToast()
const copy = async () => {
try {
await navigator.clipboard.writeText(`${title}\n\n${message}`)
toast.push({ variant: 'success', message: 'Error report copied.' })
} catch {
toast.push({ variant: 'error', message: 'Could not copy error report.' })
}
}
return (
<div className="rounded-md border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900 dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-100">
<div className="flex items-start gap-3">
<AlertTriangle size={18} className="mt-0.5 shrink-0" />
<div className="min-w-0 flex-1 space-y-2">
<div className="font-semibold">{title}</div>
<div>
<span className="font-medium">What failed: </span>
{message || 'The backend did not return a detailed error.'}
</div>
<div>
<span className="font-medium">Likely reason: </span>
{likelyCause(message)}
</div>
<div>
<span className="font-medium">What to do: </span>
{nextAction(message)}
</div>
<div className="flex flex-wrap gap-2 pt-1">
{onRetry && (
<button type="button" className="btn-secondary btn-sm" onClick={onRetry}>
<RefreshCw size={12} /> Retry
</button>
)}
<button type="button" className="btn-secondary btn-sm" onClick={copy}>
<Clipboard size={12} /> Copy report
</button>
{onOpenLogs && (
<button type="button" className="btn-secondary btn-sm" onClick={onOpenLogs}>
<ListOrdered size={12} /> Open logs
</button>
)}
</div>
</div>
</div>
</div>
)
}