fix: handle null timestamps in scenario details page

- Add optional chaining for run.timestamps?.createdAt
- Make timestamps.createdAt optional in interface
- Add null check for evaluator.reason
- Prevents TypeError when accessing undefined properties
This commit is contained in:
Ajax Davis 2026-01-20 05:40:33 +10:00
parent c1af7a2bde
commit 474e11fc13

View file

@ -28,7 +28,7 @@ interface ScenarioRun {
timestamps: { timestamps: {
startedAt: string | null; startedAt: string | null;
completedAt: string | null; completedAt: string | null;
createdAt: string; createdAt: string | null;
}; };
output?: string; output?: string;
errorLog?: string; errorLog?: string;
@ -131,7 +131,8 @@ function formatDuration(ms: number | null): string {
return `${(ms / 1000).toFixed(1)}s`; return `${(ms / 1000).toFixed(1)}s`;
} }
function formatDate(dateString: string): string { function formatDate(dateString: string | null): string {
if (!dateString) return '—';
return new Date(dateString).toLocaleDateString('en-US', { return new Date(dateString).toLocaleDateString('en-US', {
month: 'short', month: 'short',
day: 'numeric', day: 'numeric',
@ -358,7 +359,7 @@ export default function CollectionScenarioDetailPage(): React.ReactElement {
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<StatusBadge status={run.status} /> <StatusBadge status={run.status} />
<span className="text-sm text-foreground-secondary"> <span className="text-sm text-foreground-secondary">
{formatDate(run.timestamps.createdAt)} {formatDate(run.timestamps?.createdAt || null)}
</span> </span>
{run.usage.executionTimeMs && ( {run.usage.executionTimeMs && (
<span className="text-sm text-foreground-tertiary"> <span className="text-sm text-foreground-tertiary">
@ -395,7 +396,7 @@ export default function CollectionScenarioDetailPage(): React.ReactElement {
</Badge> </Badge>
)} )}
</div> </div>
{run.evaluator.reason && ( {run.evaluator?.reason && (
<p className="text-sm text-foreground-secondary"> <p className="text-sm text-foreground-secondary">
{run.evaluator.reason} {run.evaluator.reason}
</p> </p>