121 lines
3.9 KiB
TypeScript
121 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { Card } from '@/ui/Card';
|
|
import { Glow } from '@/ui/Glow';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
|
|
import { AlertTriangle, Home, RefreshCw, Terminal } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
interface GlobalErrorScreenProps {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
onHome: () => void;
|
|
}
|
|
|
|
/**
|
|
* GlobalErrorScreen
|
|
*
|
|
* A strong, minimal "system fault" view for the root global error boundary.
|
|
* Instrument-grade UI following the "Precision Racing Minimal" theme.
|
|
*/
|
|
export function GlobalErrorScreen({ error, reset, onHome }: GlobalErrorScreenProps) {
|
|
return (
|
|
<ErrorPageContainer size="lg" variant="glass">
|
|
{/* Background Accents - Subtle telemetry vibe */}
|
|
<Glow color="primary" size="xl" position="center" opacity={0.03} />
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem', paddingBottom: '1rem', borderBottom: '1px solid var(--ui-color-border-default)' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
|
<Icon icon={AlertTriangle} size={5} intent="warning" />
|
|
<Heading level={2} weight="bold">
|
|
System Fault Detected
|
|
</Heading>
|
|
</div>
|
|
<Text font="mono" size="xs" variant="low" uppercase>
|
|
Status: Critical
|
|
</Text>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
|
|
{/* Fault Description */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
<Text variant="med" size="base" leading="relaxed">
|
|
The application kernel encountered an unrecoverable execution error.
|
|
Telemetry has been captured for diagnostic review.
|
|
</Text>
|
|
|
|
<SystemStatusPanel error={error} />
|
|
</div>
|
|
|
|
{/* Recovery Actions */}
|
|
<RecoveryActions onRetry={reset} onHome={onHome} />
|
|
</div>
|
|
|
|
{/* Footer / Metadata */}
|
|
<div style={{ marginTop: '2rem', paddingTop: '1rem', borderTop: '1px solid var(--ui-color-border-default)', textAlign: 'right' }}>
|
|
<Text font="mono" size="xs" variant="low">
|
|
GP-CORE-ERR-{error.digest?.substring(0, 8).toUpperCase() || 'UNKNOWN'}
|
|
</Text>
|
|
</div>
|
|
</ErrorPageContainer>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* SystemStatusPanel
|
|
*
|
|
* Displays technical fault details in an instrument-grade panel.
|
|
*/
|
|
function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
|
|
return (
|
|
<Card variant="outline">
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
|
<Icon icon={Terminal} size={3} intent="low" />
|
|
<Text font="mono" size="xs" variant="low" uppercase>
|
|
Fault Log
|
|
</Text>
|
|
</div>
|
|
<Text font="mono" size="sm" variant="warning" block>
|
|
{error.message || 'Unknown execution fault'}
|
|
</Text>
|
|
{error.digest && (
|
|
<Text font="mono" size="xs" variant="low" block>
|
|
Digest: {error.digest}
|
|
</Text>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* RecoveryActions
|
|
*
|
|
* Clear, instrument-grade recovery options.
|
|
*/
|
|
function RecoveryActions({ onRetry, onHome }: { onRetry: () => void; onHome: () => void }) {
|
|
return (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
|
|
<Button
|
|
variant="primary"
|
|
onClick={onRetry}
|
|
icon={<Icon icon={RefreshCw} size={4} />}
|
|
>
|
|
Reboot Session
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onHome}
|
|
icon={<Icon icon={Home} size={4} />}
|
|
>
|
|
Return to Pits
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|