---
id: S04
parent: M007
milestone: M007
provides:
  - Cleaner AdminPipeline page with debug toggle, status filter, pruned UI, and review queue cross-links
requires:
  - slice: S02
    provides: Debug payload viewer and debug mode backend endpoints
affects:
  - S05
  - S06
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
  - Lifted debug mode state from DebugModeToggle to AdminPipeline parent so trigger button can show debug indicator
patterns_established:
  - Debug-mode-aware UI elements: pass debugMode state down from parent to child components that need to reflect the current mode
observability_surfaces:
  - none
drill_down_paths:
  - .gsd/milestones/M007/slices/S04/tasks/T01-SUMMARY.md
  - .gsd/milestones/M007/slices/S04/tasks/T02-SUMMARY.md
duration: ""
verification_result: passed
completed_at: 2026-03-30T19:37:50.191Z
blocker_discovered: false
---

# S04: Admin UX Audit — Prune, Streamline, and Polish

**Cleaned up AdminPipeline page with debug mode toggle, status filter pills, pruned dead UI, clearer labels, debug-aware trigger button, and review queue cross-links.**

## What Happened

Two tasks delivered eight discrete UX improvements to the AdminPipeline page.

T01 added two new interactive features: a DebugModeToggle component in the header (reads/writes via GET/PUT /admin/pipeline/debug-mode) and a StatusFilter pill bar that filters the video list client-side by processing_status. The status filter shows per-status counts and auto-hides when only one status exists. Both reuse existing CSS patterns (mode-toggle for the debug switch, filter-tab for the pills).

T02 pruned dead UI and improved workflow clarity: renamed the cryptic "Head"/"Tail" event log toggle to "Oldest first"/"Newest first"; removed the duplicate event-level refresh button (page-level refresh is sufficient); removed the truncated UUID from expanded video details (low-value noise); lifted debugMode state to the parent component so the trigger button shows "▶ Trigger (debug)" when debug mode is active; added a "→ Moments" cross-link on each video card linking to the review queue.

All changes are frontend-only (AdminPipeline.tsx, public-client.ts, App.css). The Docker build compiles TypeScript cleanly and produces the nginx image.

## Verification

Docker build of chrysopedia-web service succeeds with exit 0. TypeScript compiles cleanly, Vite bundles 48 modules, nginx image produced.

## Requirements Advanced

None.

## Requirements Validated

None.

## New Requirements Surfaced

None.

## Requirements Invalidated or Re-scoped

None.

## Deviations

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

## Known Limitations

Review queue cross-link navigates to /admin/review without video-specific filtering — the review queue doesn't yet support URL-based video filtering.

## Follow-ups

Add URL-based video filtering to the review queue so the → Moments cross-link can deep-link to a specific video's moments.

## Files Created/Modified

- `frontend/src/pages/AdminPipeline.tsx` — Added DebugModeToggle, StatusFilter, renamed view toggle labels, removed dead UI, added debug indicator on trigger button, added review queue cross-link
- `frontend/src/api/public-client.ts` — Added fetchDebugMode() and setDebugMode() API client functions
- `frontend/src/App.css` — Added debug-toggle and moments-link CSS styles
