# Phase 6: Frontend — Source Types

**Status:** ⬜ Not Started
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective
Update the audio source UI to support the new `ProcessedAudioSource` and `CaptureAudioSource` types, and remove the old `MonoAudioSource` and `BandExtractAudioSource` UI.

## Tasks

- [ ] Task 1: Update audio source TypeScript types/interfaces for new source types
  - Add `ProcessedAudioSource` type with `audio_source_id` + `audio_processing_template_id`
  - Rename `MultichannelAudioSource` type to `CaptureAudioSource` (source_type: "capture")
  - Remove `MonoAudioSource` and `BandExtractAudioSource` types
- [ ] Task 2: Create `ProcessedAudioSource` card component
  - EntitySelect for input audio source (any audio source)
  - EntitySelect for audio processing template
  - Show resolved chain info (which capture source at the end)
  - Create/Edit/Delete actions
- [ ] Task 3: Update `CaptureAudioSource` card (relabeled from Multichannel)
  - Same fields (device selector, loopback toggle, template selector)
  - Updated label/icon to say "Capture Audio Source"
- [ ] Task 4: Remove `MonoAudioSource` card component/rendering
- [ ] Task 5: Remove `BandExtractAudioSource` card component/rendering
- [ ] Task 6: Update audio source creation dialog/flow
  - Source type picker now shows: Capture, Processed (instead of Multichannel, Mono, Band Extract)
  - Type-specific form fields
- [ ] Task 7: Update EntitySelect dropdowns that list audio sources
  - Show type badges (Capture vs Processed) for clarity
  - Audio source selectors in CSS editor, value source editor, etc.
- [ ] Task 8: Update i18n keys for renamed/new source types
- [ ] Task 9: Update any inline onclick handlers or window exports in app.js

## Files to Modify/Create
- `static/js/features/audio-sources.ts` — **modify** — new types, remove old types
- `static/js/features/audio-source-modal.ts` (or equivalent) — **modify** — updated editor
- `static/css/dashboard.css` — **modify** — any style updates
- `static/js/app.js` — **modify** — update exports if needed
- `static/js/core/i18n/en.json` — **modify** — updated keys
- `static/js/core/i18n/ru.json` — **modify** — updated keys
- `static/js/core/i18n/zh.json` — **modify** — updated keys

## Acceptance Criteria
- ProcessedAudioSource can be created/edited/deleted from the UI
- CaptureAudioSource shows correctly with updated label
- MonoAudioSource and BandExtractAudioSource UI is completely removed
- EntitySelect for audio sources shows type badges
- Source type picker shows only Capture and Processed
- All strings are internationalized

## Notes
- NEVER use plain HTML `<select>` — use project custom selectors
- NEVER use emoji — use SVG icons
- Use fetchWithAuth for ALL API calls
- Call cache.invalidate() before load in save/delete handlers
- Check DOM ID conflicts when adding new card types (project checklist)

## Review Checklist
- [ ] All tasks completed
- [ ] Code follows project conventions
- [ ] No unintended side effects
- [ ] Build passes
- [ ] Tests pass (new + existing)

## Handoff to Next Phase
<!-- Filled in by the implementation agent after completing this phase. -->