Clean up and fixes

src/tui/screens/action-wizard/steps/InfoStep.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { colors } from '../../../theme.js';
+import type { WizardStepProps } from '../types.js';
+
+type Props = Pick<
+  WizardStepProps,
+  'template' | 'actionIdentifier' | 'roleIdentifier' | 'actionName'
+>;
+
+export function InfoStep({
+  template,
+  actionIdentifier,
+  roleIdentifier,
+  actionName,
+}: Props): React.ReactElement {
+  const action = template?.actions?.[actionIdentifier];
+  const role = action?.roles?.[roleIdentifier];
+
+  return (
+    <Box flexDirection='column'>
+      <Text color={colors.primary} bold>
+        Action: {actionName}
+      </Text>
+      <Text color={colors.textMuted}>
+        {action?.description || 'No description'}
+      </Text>
+
+      <Box marginTop={1}>
+        <Text color={colors.text}>Your Role: </Text>
+        <Text color={colors.accent}>{roleIdentifier}</Text>
+      </Box>
+
+      {role?.requirements && (
+        <Box marginTop={1} flexDirection='column'>
+          <Text color={colors.text}>Requirements:</Text>
+          {role.requirements.variables?.map((v) => (
+            <Text key={v} color={colors.textMuted}>
+              {'  '}• Variable: {v}
+            </Text>
+          ))}
+          {role.requirements.slots && (
+            <Text color={colors.textMuted}>
+              {'  '}• Slots: {role.requirements.slots.min} min (UTXO selection
+              required)
+            </Text>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}