124 lines
3.6 KiB
TypeScript
124 lines
3.6 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 { Box } from '@/ui/Box';
|
|
import { Group } from '@/ui/Group';
|
|
import { Stack } from '@/ui/Stack';
|
|
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} />
|
|
|
|
<Box display="flex" alignItems="center" justifyContent="between" marginBottom={6} paddingBottom={4} borderBottom="1px solid var(--ui-color-border-default)">
|
|
<Group gap={3}>
|
|
<Icon icon={AlertTriangle} size={5} intent="warning" />
|
|
<Heading level={2} weight="bold">
|
|
System Fault Detected
|
|
</Heading>
|
|
</Group>
|
|
<Text font="mono" size="xs" variant="low" uppercase>
|
|
Status: Critical
|
|
</Text>
|
|
</Box>
|
|
|
|
<Stack gap={8}>
|
|
{/* Fault Description */}
|
|
<Stack gap={4}>
|
|
<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} />
|
|
</Stack>
|
|
|
|
{/* Recovery Actions */}
|
|
<RecoveryActions onRetry={reset} onHome={onHome} />
|
|
</Stack>
|
|
|
|
{/* Footer / Metadata */}
|
|
<Box marginTop={8} paddingTop={4} 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>
|
|
</Box>
|
|
</ErrorPageContainer>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* SystemStatusPanel
|
|
*
|
|
* Displays technical fault details in an instrument-grade panel.
|
|
*/
|
|
function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
|
|
return (
|
|
<Card variant="outline">
|
|
<Stack gap={3}>
|
|
<Group gap={2}>
|
|
<Icon icon={Terminal} size={3} intent="low" />
|
|
<Text font="mono" size="xs" variant="low" uppercase>
|
|
Fault Log
|
|
</Text>
|
|
</Group>
|
|
<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>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* RecoveryActions
|
|
*
|
|
* Clear, instrument-grade recovery options.
|
|
*/
|
|
function RecoveryActions({ onRetry, onHome }: { onRetry: () => void; onHome: () => void }) {
|
|
return (
|
|
<Group gap={4} 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>
|
|
</Group>
|
|
);
|
|
}
|