website refactor

apps/website/components/errors/ServerErrorPanel.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import React from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+
+interface ServerErrorPanelProps {
+  message?: string;
+  incidentId?: string;
+}
+
+/**
+ * ServerErrorPanel
+ * 
+ * Displays the primary error information in an "instrument-grade" style.
+ * Part of the 500 route redesign.
+ */
+export function ServerErrorPanel({ message, incidentId }: ServerErrorPanelProps) {
+  return (
+    <Stack gap={6} align="center" fullWidth>
+      {/* Status Indicator */}
+      <Box 
+        p={4} 
+        rounded="full" 
+        bg="bg-warning-amber" 
+        bgOpacity={0.1} 
+        border 
+        borderColor="border-warning-amber"
+      >
+        <Icon icon={AlertTriangle} size={8} color="var(--warning-amber)" />
+      </Box>
+
+      {/* Primary Message */}
+      <Stack gap={2} align="center">
+        <Heading level={1} weight="bold">
+          CRITICAL_SYSTEM_FAILURE
+        </Heading>
+        <Text color="text-gray-400" align="center" maxWidth="md">
+          The application engine encountered an unrecoverable state. 
+          Telemetry has been dispatched to engineering.
+        </Text>
+      </Stack>
+
+      {/* Technical Summary */}
+      <Surface 
+        variant="dark" 
+        rounded="md" 
+        padding={4} 
+        fullWidth 
+        border 
+        borderColor="border-white" 
+        bgOpacity={0.2}
+      >
+        <Stack gap={2}>
+          <Text font="mono" size="sm" color="text-warning-amber" block>
+            STATUS: 500_INTERNAL_SERVER_ERROR
+          </Text>
+          {message && (
+            <Text font="mono" size="xs" color="text-gray-400" block>
+              EXCEPTION: {message}
+            </Text>
+          )}
+          {incidentId && (
+            <Text font="mono" size="xs" color="text-gray-500" block>
+              INCIDENT_ID: {incidentId}
+            </Text>
+          )}
+        </Stack>
+      </Surface>
+    </Stack>
+  );
+}