docs/REFERENCE_IMAGE_UI_ALIGNMENT.md

Reference Image UI Alignment

This pass aligns the automatic card-flow web app with the supplied reference screenshot.

Implemented

• Top application bar now follows the reference structure:
  • compact waveform logo
  • Sample Extractor title
  • beta pill
  • centered file picker/current filename
  • right-aligned export actions
• Main canvas is now split into:
  • large waveform area on the left
  • persistent settings panel on the right
  • grouped sample board below the waveform
  • compact bottom selection/action bar
• The waveform panel includes:
  • zoom controls
  • current file/progress status
  • time display
  • transport row
  • progress-tinted waveform rendering already provided by the previous real-progress pass
• Sample results now visually match the card/column model:
  • columns by detected type
  • per-column count and draw button
  • compact cards with mini-waveform, label, metadata, and small action strip
• Everyday controls are visible in the right panel, while expert pipeline controls are collapsed under Expert pipeline controls.
• Existing automatic behavior is preserved:
  • drop/upload starts processing immediately
  • browser-side waveform renders immediately
  • progressive sample cards appear while processing
  • dismiss, draw another, trim, extend, and save-edit actions remain available

Intentional differences from the reference

• The screenshot's exact icons are approximated with Unicode/text controls to avoid adding an icon dependency.
• Export Selected currently exports the generated pack because backend-level selected-card export is not yet implemented as a distinct artifact path.
• Selection is currently all visible cards by default; the next iteration should add true per-card checkboxes and export only selected representatives.
• The right panel remains visible by default because the reference shows it open.

Validation targets

• No document-level scrolling on desktop sizes.
• Waveform and sample board fill the viewport.
• Advanced controls are available but not part of the primary visual path.
• All previous backend APIs and semantic editing features remain reachable through the tools drawer.