feat: onboarding UX for the TUI (#8513)

ui/text/src/components/ErrorScreen.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Box, Text, useInput, useStdout } from "ink";
+import { CRANBERRY, TEXT_PRIMARY, TEXT_DIM } from "../colors.js";
+
+interface ErrorScreenProps {
+  errorMsg: string;
+  onRetry: () => void;
+}
+
+export const ErrorScreen = React.memo(function ErrorScreen({ errorMsg, onRetry }: ErrorScreenProps) {
+  const { stdout } = useStdout();
+  const columns = stdout?.columns ?? 80;
+  
+  useInput((ch, key) => {
+    if (key.return || key.escape) {
+      onRetry();
+    }
+  });
+
+  const maxWidth = Math.min(columns - 4, 80);
+
+  return (
+    <Box flexDirection="column" paddingX={2} width={maxWidth}>
+      <Text color={CRANBERRY} bold>✗ Setup error</Text>
+      {errorMsg && (
+        <Box width={maxWidth - 4}>
+          <Text color={TEXT_PRIMARY} wrap="wrap">{errorMsg}</Text>
+        </Box>
+      )}
+      <Box marginTop={1}>
+        <Text color={TEXT_DIM}>press enter to retry</Text>
+      </Box>
+    </Box>
+  );
+});