---
estimated_steps: 22
estimated_files: 4
skills_used: []
---

# T04: Add output info bar, Use This flow, error states, and verify full integration

Complete the slice by adding the output info bar with color-coded stats, the 'Use This' button that advances to View 2, error/empty states, and a full-stack integration verification.

## Steps

1. Create `app/src/components/OutputInfoBar.tsx`:
   - Accepts `metadata: TraceMetadata | null`
   - When metadata is null: render nothing or a muted placeholder
   - Render stats: Path Count, Total Nodes, Open Paths, Processing Time
   - Color coding: green for normal values, yellow when node_count_total > 5000, red when open_paths > 0
   - Show warnings from metadata.warnings array if any
2. Add 'Use This' button to `ImportConvert.tsx`:
   - Disabled when no SVG output is available
   - On click: call `onUseThis(svgOutput, metadata)` prop, which App.tsx uses to transition view state to 'canvas'
   - Pass the SVG string forward (stored in App.tsx state for S02 to consume)
3. Add empty/error states throughout:
   - No file selected: show upload prompt in preview area
   - API error: show error message in preview area with status code
   - Loading: show spinner overlay on preview
4. Write `app/src/components/__tests__/OutputInfoBar.test.tsx` — test color coding logic:
   - Normal metadata → green indicators
   - High node count → yellow indicator
   - Open paths > 0 → red indicator
   - Null metadata → no crash, placeholder shown
5. Final verification: ensure `npx tsc --noEmit` passes with zero errors, `npx vitest run` passes all tests, and all components are wired together end-to-end.

## Inputs

- `app/src/views/ImportConvert.tsx`
- `app/src/App.tsx`
- `app/src/types/engine.ts`
- `app/src/hooks/useDebouncedTrace.ts`
- `app/src/components/SvgPreview.tsx`

## Expected Output

- `app/src/components/OutputInfoBar.tsx`
- `app/src/components/__tests__/OutputInfoBar.test.tsx`
- `app/src/views/ImportConvert.tsx`
- `app/src/App.tsx`

## Verification

cd app && npx vitest run --reporter=verbose 2>&1 | tail -20 && npx tsc --noEmit 2>&1 | tail -10
