---
id: T01
parent: S04
milestone: M007
provides: []
requires: []
affects: []
key_files: ["frontend/src/pages/AdminPipeline.tsx", "frontend/src/api/public-client.ts", "frontend/src/App.css"]
key_decisions: ["Reused mode-toggle CSS pattern for debug toggle", "StatusFilter shows counts in pill labels and hides when only 1 status exists"]
patterns_established: []
drill_down_paths: []
observability_surfaces: []
duration: ""
verification_result: "Docker build of chrysopedia-web service succeeded with exit 0. TypeScript compiled cleanly, Vite bundled 48 modules, nginx image produced."
completed_at: 2026-03-30T19:34:04.184Z
blocker_discovered: false
---

# T01: Added DebugModeToggle component and StatusFilter pill bar to AdminPipeline page with API client functions for debug mode GET/PUT endpoints

> Added DebugModeToggle component and StatusFilter pill bar to AdminPipeline page with API client functions for debug mode GET/PUT endpoints

## What Happened
---
id: T01
parent: S04
milestone: M007
key_files:
  - frontend/src/pages/AdminPipeline.tsx
  - frontend/src/api/public-client.ts
  - frontend/src/App.css
key_decisions:
  - Reused mode-toggle CSS pattern for debug toggle
  - StatusFilter shows counts in pill labels and hides when only 1 status exists
duration: ""
verification_result: passed
completed_at: 2026-03-30T19:34:04.184Z
blocker_discovered: false
---

# T01: Added DebugModeToggle component and StatusFilter pill bar to AdminPipeline page with API client functions for debug mode GET/PUT endpoints

**Added DebugModeToggle component and StatusFilter pill bar to AdminPipeline page with API client functions for debug mode GET/PUT endpoints**

## What Happened

Added fetchDebugMode() and setDebugMode() API client functions to public-client.ts for the existing backend debug-mode endpoints. Created DebugModeToggle component (fetch on mount, toggle switch with active state) placed in the header-right area next to WorkerStatus. Created StatusFilter component using the existing filter-tab CSS pattern, with per-status counts and an All pill. Videos are filtered client-side via activeFilter state. Added debug-toggle CSS matching the dark theme toggle pattern.

## Verification

Docker build of chrysopedia-web service succeeded with exit 0. TypeScript compiled cleanly, Vite bundled 48 modules, nginx image produced.

## Verification Evidence

| # | Command | Exit Code | Verdict | Duration |
|---|---------|-----------|---------|----------|
| 1 | `ssh ub01 "cd /vmPool/r/repos/xpltdco/chrysopedia && docker compose build chrysopedia-web"` | 0 | ✅ pass | 8100ms |


## Deviations

Docker service name is chrysopedia-web not chrysopedia-web-8096. Backend response uses debug_mode (snake_case) not enabled as task plan implied.

## Known Issues

None.

## Files Created/Modified

- `frontend/src/pages/AdminPipeline.tsx`
- `frontend/src/api/public-client.ts`
- `frontend/src/App.css`


## Deviations
Docker service name is chrysopedia-web not chrysopedia-web-8096. Backend response uses debug_mode (snake_case) not enabled as task plan implied.

## Known Issues
None.
