---
estimated_steps: 7
estimated_files: 3
skills_used: []
---

# T01: Add debug mode toggle and video status filter to Pipeline page

Add two new interactive features to AdminPipeline.tsx: (1) a debug mode toggle in the page header that reads/writes via GET/PUT /admin/pipeline/debug-mode, and (2) a status filter pill bar that filters the video list client-side by processing_status.

Steps:
1. Add `fetchDebugMode()` and `setDebugMode(enabled: boolean)` functions to `public-client.ts`. The backend endpoints are `GET /admin/pipeline/debug-mode` → `{enabled: boolean}` and `PUT /admin/pipeline/debug-mode` with body `{enabled: boolean}`.
2. In AdminPipeline.tsx, add state for `debugMode` (boolean) and `debugLoading` (boolean). Fetch debug mode on mount. Add a toggle switch in the header-right area next to WorkerStatus — use the same visual pattern as the ModeToggle component on ReviewQueue (a labeled toggle with on/off state). Clicking the toggle calls `setDebugMode(!debugMode)` then updates local state.
3. Add a status filter pill bar below the page header. Extract unique statuses from the `videos` array. Add `activeFilter` state (string | null, default null = show all). Render filter pills for each status plus an 'All' pill. Filter the `videos` array before rendering when `activeFilter` is set. Use the existing `filter-tab` / `filter-tab--active` CSS classes from ReviewQueue.
4. Add CSS for the debug mode toggle (`.debug-toggle`, `.debug-toggle__switch`, `.debug-toggle__label`) in App.css. Style it to match the dark theme using existing `var(--color-*)` custom properties.
5. Verify: Docker build succeeds, toggle visible and functional, filter pills render and filter correctly.

## Inputs

- ``frontend/src/api/public-client.ts` — existing API client, needs debug mode functions added`
- ``frontend/src/pages/AdminPipeline.tsx` — main pipeline page component (535 lines)`
- ``frontend/src/App.css` — global stylesheet with CSS custom properties`
- ``frontend/src/pages/ReviewQueue.tsx` — reference for filter pill pattern and ModeToggle visual pattern`

## Expected Output

- ``frontend/src/api/public-client.ts` — added fetchDebugMode() and setDebugMode() functions`
- ``frontend/src/pages/AdminPipeline.tsx` — added DebugModeToggle component and status filter pill bar with state management`
- ``frontend/src/App.css` — added debug-toggle and status-filter CSS styles`

## Verification

ssh ub01 "cd /vmPool/r/repos/xpltdco/chrysopedia && docker compose build chrysopedia-web" succeeds with exit 0
