From 6a5f7c3c0fdc7b78611f261e0b3520a54388788f Mon Sep 17 00:00:00 2001
From: HiranoMasaaki <lambda.groove@gmail.com>
Date: Thu, 4 Dec 2025 12:58:53 +0900
Subject: [PATCH] Refactor: Share ErrorStep component across wizards

---
 packages/tui/apps/status/app.tsx           | 10 ++--------
 packages/tui/apps/tag/app.tsx              | 10 ++--------
 packages/tui/apps/unpublish/app.tsx        | 10 ++--------
 packages/tui/src/components/error-step.tsx | 20 ++++++++++++++++++++
 packages/tui/src/components/index.ts       |  1 +
 5 files changed, 27 insertions(+), 24 deletions(-)
 create mode 100644 packages/tui/src/components/error-step.tsx

diff --git a/packages/tui/apps/status/app.tsx b/packages/tui/apps/status/app.tsx
index ab87633b..197e7d29 100644
--- a/packages/tui/apps/status/app.tsx
+++ b/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
   }
diff --git a/packages/tui/apps/tag/app.tsx b/packages/tui/apps/tag/app.tsx
index 7cc70d5c..e30fa0fa 100644
--- a/packages/tui/apps/tag/app.tsx
+++ b/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
   }
diff --git a/packages/tui/apps/unpublish/app.tsx b/packages/tui/apps/unpublish/app.tsx
index 4c785778..d6f4030f 100644
--- a/packages/tui/apps/unpublish/app.tsx
+++ b/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
   }
diff --git a/packages/tui/src/components/error-step.tsx b/packages/tui/src/components/error-step.tsx
new file mode 100644
index 00000000..da0c51f4
--- /dev/null
+++ b/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 }
diff --git a/packages/tui/src/components/index.ts b/packages/tui/src/components/index.ts
index a8dc475b..d5a90db8 100644
--- a/packages/tui/src/components/index.ts
+++ b/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"