Let me look at where the state is managed and add a debug mode with mock data to allow testing all steps:

Now I understand the structure. I'll add a debug mode that pre-populates mock data and allows skipping steps. Let me add this:

Now let me add the debug UI panel. First, let me find where the page content starts to add the debug panel:

Let me find where the page header starts and add the debug panel after it:

I've added a debug panel to the import wizard that lets you test all steps. The debug panel includes:

1. "Load mock data for" buttons - Click "Secure Mode" or "Direct Mode" to populate all the mock data needed to navigate through the wizard (transport key selection, bundle metadata, parsed rows, config, etc.)
2. "Jump to step" buttons - After loading mock data, you can click any step number (1-6) to jump directly to that step and inspect its UI
3. Visual indicator - A badge shows when debug data is loaded

To use it: expand the "Debug Mode" collapsible at the top of the page, click either "Secure Mode" or "Direct Mode" to load mock data, then click the step numbers to jump to any step in the wizard.

The error is clear - in SchemaPreview component, row.fields is undefined. The mock data I created uses row.data (an object) but the component expects row.fields (an array). Let me fix the mock data structure:

Now I understand the expected interface. The ParsedRow expects rowNumber, imsi, and fields as an array of ParsedField. Let me fix the mock data in the debug loader:

Now I can see the issue clearly. The mock data structure doesn't match the ParsedRow interface. Let me fix it:

I've fixed the mock data structure to match the ParsedRow interface expected by the SchemaPreview component. The key changes were:

• Changed line to rowNumber
• Changed data object to fields array with { name, value } objects
• Removed errors/warnings arrays and replaced with warningMessage string
• Added proper imsi field at the top level