# Phase 5: Frontend — Audio Processing Templates

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

## Objective
Build the frontend UI for managing Audio Processing Templates — list, create, edit, delete, with a filter editor and real-time preview.

## Tasks

- [ ] Task 1: Create TypeScript module `static/js/features/audio-processing-templates.ts`
  - Fetch/cache audio processing templates via DataCache
  - CRUD operations using fetchWithAuth
  - CardSection for template list with reconciliation
- [ ] Task 2: Create template editor modal
  - Name, description, tags fields
  - Ordered filter list with add/remove/reorder controls
  - Per-filter option controls (sliders, selects, toggles) driven by option schemas from `GET /api/v1/audio-filters`
  - Template composition support: `audio_filter_template` shows EntitySelect for sub-template
  - Dirty check via snapshotValues()
- [ ] Task 3: Add Audio Processing Templates section to the Streams tab
  - New sub-tab or section alongside existing Audio Sources
  - CardSection rendering with template name, filter count, description
  - Create/Edit/Delete actions per card
- [ ] Task 4: Real-time audio preview
  - "Test" button on template editor that opens a WebSocket connection
  - Shows spectrum visualization (reuse existing audio test pattern)
  - Applies template's filters to a selected source in real-time
  - Source picker (EntitySelect) for choosing input audio source
- [ ] Task 5: Add i18n keys for all new UI strings (en.json, ru.json, zh.json)
  - Template section labels, filter names, option labels, buttons, errors
- [ ] Task 6: Register module in `app.js` / global exports if needed for inline onclick handlers
- [ ] Task 7: Fetch and cache audio filter registry data (for building filter option UIs)

## Files to Modify/Create
- `static/js/features/audio-processing-templates.ts` — **create** — main module
- `static/js/features/audio-processing-template-modal.ts` — **create** — editor modal
- `static/css/dashboard.css` — **modify** — styles for template editor
- `static/js/app.js` — **modify** — register module, add window exports
- `templates/dashboard.html` (or relevant Jinja template) — **modify** — add section
- `static/js/core/i18n/en.json` — **modify** — new keys
- `static/js/core/i18n/ru.json` — **modify** — new keys
- `static/js/core/i18n/zh.json` — **modify** — new keys

## Acceptance Criteria
- Audio Processing Templates section visible in Streams tab
- Templates can be created, edited, deleted
- Filter editor shows all 11 available filters with correct option controls
- Template composition (audio_filter_template) works via EntitySelect
- Real-time preview shows filtered audio data
- All strings are internationalized

## Notes
- Follow existing patterns from postprocessing template UI
- Use IconSelect for filter type selection (if icon set supports it) or a custom filter picker
- NEVER use plain HTML `<select>` — use project custom selectors (CRITICAL project rule)
- NEVER use emoji — use SVG icons from `core/icons.ts`
- Use fetchWithAuth for ALL API calls (project rule)
- Call cache.invalidate() before load functions in save/delete handlers

## 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. -->