Refactor: Share ErrorStep component across wizards

packages/tui/apps/status/app.tsx

@@ -1,5 +1,6 @@
 import { Box, Text, useApp, useInput } from "ink"
 import { useState } from "react"
+import { ErrorStep } from "../../src/components/error-step.js"
 
 type ExpertChoice = {
   name: string
@@ -404,14 +405,7 @@ export function StatusApp({ experts, onFetchVersions, onComplete, onCancel }: St
         />
       )
     case "error":
-      return (
-        <Box flexDirection="column">
-          <Text color="red">Error: {step.message}</Text>
-          <Box marginTop={1}>
-            <Text dimColor>Press any key to go back</Text>
-          </Box>
-        </Box>
-      )
+      return <ErrorStep message={step.message} onBack={handleBack} />
     default:
       return null
   }

packages/tui/apps/tag/app.tsx

@@ -1,5 +1,6 @@
 import { Box, Text, useApp, useInput } from "ink"
 import { useState } from "react"
+import { ErrorStep } from "../../src/components/error-step.js"
 
 type ExpertChoice = {
   name: string
@@ -379,14 +380,7 @@ export function TagApp({ experts, onFetchVersions, onComplete, onCancel }: TagAp
         />
       )
     case "error":
-      return (
-        <Box flexDirection="column">
-          <Text color="red">Error: {step.message}</Text>
-          <Box marginTop={1}>
-            <Text dimColor>Press any key to go back</Text>
-          </Box>
-        </Box>
-      )
+      return <ErrorStep message={step.message} onBack={handleBack} />
     default:
       return null
   }

packages/tui/apps/unpublish/app.tsx

@@ -1,5 +1,6 @@
 import { Box, Text, useApp, useInput } from "ink"
 import { useState } from "react"
+import { ErrorStep } from "../../src/components/error-step.js"
 
 type ExpertChoice = {
   name: string
@@ -267,14 +268,7 @@ export function UnpublishApp({
         />
       )
     case "error":
-      return (
-        <Box flexDirection="column">
-          <Text color="red">Error: {step.message}</Text>
-          <Box marginTop={1}>
-            <Text dimColor>Press any key to go back</Text>
-          </Box>
-        </Box>
-      )
+      return <ErrorStep message={step.message} onBack={handleBack} />
     default:
       return null
   }

packages/tui/src/components/error-step.tsx

@@ -0,0 +1,20 @@
+import { Box, Text, useInput } from "ink"
+
+type ErrorStepProps = {
+  message: string
+  onBack: () => void
+}
+
+export function ErrorStep({ message, onBack }: ErrorStepProps) {
+  useInput(() => onBack())
+  return (
+    <Box flexDirection="column">
+      <Text color="red">Error: {message}</Text>
+      <Box marginTop={1}>
+        <Text dimColor>Press any key to go back</Text>
+      </Box>
+    </Box>
+  )
+}
+
+export type { ErrorStepProps }

packages/tui/src/components/index.ts

@@ -1,5 +1,6 @@
 export { App } from "./app.js"
 export { BrowserRouter } from "./browser-router.js"
+export { ErrorStep, type ErrorStepProps } from "./error-step.js"
 export { ExpertList, type ExpertListProps } from "./expert-list.js"
 export { ExpertSelectorBase, type ExpertSelectorBaseProps } from "./expert-selector-base.js"
 export { ListBrowser, type ListBrowserProps } from "./list-browser.js"