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

## Summary

This is a **light research** slice — straightforward UX cleanup using established patterns in an already well-structured codebase. The admin pages (Pipeline, Reports, Review) are functional but have accumulated some gaps and could benefit from streamlining for the single-admin daily workflow.

## Recommendation

Three tasks: (1) Add debug mode toggle + video status filter to Pipeline page, (2) Cross-link admin pages and add workflow shortcuts, (3) CSS/UX polish pass. All tasks are independent and could run in parallel.

## Implementation Landscape

### Admin Pages Inventory (canonical on ub01)

| Page | File | Lines | Role |
|------|------|-------|------|
| Pipeline Management | `frontend/src/pages/AdminPipeline.tsx` | 535 | Video list, status, trigger/revoke, event log, worker status, debug payload viewer |
| Content Reports | `frontend/src/pages/AdminReports.tsx` | 246 | User-submitted issue reports, triage workflow |
| Review Queue | `frontend/src/pages/ReviewQueue.tsx` | 189 | Key moment review with stats, filters, pagination |
| Moment Detail | `frontend/src/pages/MomentDetail.tsx` | 454 | Single moment review with approve/reject/edit/split/merge |

### Supporting Components

| Component | File | Lines | Used By |
|-----------|------|-------|---------|
| AdminDropdown | `components/AdminDropdown.tsx` | 73 | App.tsx header nav |
| ModeToggle | `components/ModeToggle.tsx` | 59 | ReviewQueue.tsx |
| AppFooter | `components/AppFooter.tsx` | 47 | App.tsx |
| StatusBadge | `components/StatusBadge.tsx` | 19 | ReviewQueue, MomentDetail |
| ReportIssueModal | `components/ReportIssueModal.tsx` | 135 | TechniquePage.tsx only |

### API Clients

- `api/client.ts` — Review queue endpoints only (BASE = `/api/v1/review`)
- `api/public-client.ts` — Everything else: search, techniques, creators, topics, pipeline admin, reports

Both have independent `request<T>()` helpers with identical error-handling logic. This duplication is mild but noted.

### CSS

Single `App.css` at 3082 lines. Uses 77 CSS custom properties (D017). Admin-specific styles start around line 2265 (reports) and 2577 (pipeline). BEM naming throughout.

## Concrete Findings

### 1. Missing Debug Mode Toggle on Pipeline Page

Backend has `GET/PUT /admin/pipeline/debug-mode` endpoints (pipeline.py lines 244-278, using Redis key `chrysopedia:debug_mode`). **No frontend UI exposes this toggle.** The `ModeToggle` component on the Review Queue page is a good pattern to follow, but the debug mode toggle serves a different purpose (controls whether pipeline captures full LLM I/O per S01).

**Action:** Add a debug mode toggle to the Pipeline page header, next to WorkerStatus. Reuse the ModeToggle visual pattern. Add `fetchDebugMode` / `setDebugMode` functions to `public-client.ts`.

### 2. No Video Status Filter on Pipeline Page

The pipeline page shows all videos in a flat list. With growing content, the admin needs to filter by `processing_status` (pending, processing, extracted, completed, failed, etc.). The `statusBadgeClass()` function already maps all statuses to visual styles.

**Action:** Add a status filter pill bar (same pattern as ReviewQueue's FILTERS and AdminReports's STATUS_OPTIONS). Filter client-side — the video list is small enough (currently fetched all at once via `fetchPipelineVideos()`).

### 3. No Cross-Links Between Admin Pages

- Pipeline video → no link to its technique pages or review queue moments
- Review queue → no link back to pipeline for the source video
- No way to jump from a pipeline event to the related technique page

**Action:** Add subtle cross-link buttons/icons where natural. E.g., a "View moments" link on each pipeline video card that navigates to `/admin/review?video_id=...` (would need review queue to support URL-based filtering, or just use the video filename as visual context). Keep this simple — a link to review queue filtered to that video's moments is the most valuable.

### 4. Dead/Low-Value UI Elements

- **"Head/Tail" view toggle** on event log — the distinction is confusing for an admin ("head" means oldest-first, "tail" means newest-first). Consider renaming to "Oldest first" / "Newest first" or just defaulting to newest-first and removing the toggle.
- **Event ID display** in expanded video detail (`ID: {video.id.slice(0, 8)}…`) — not useful for the admin workflow. Created/Updated dates are marginally useful.
- **"↻ Refresh" button** appears twice on pipeline page — once in the header, once per event log. The header one is sufficient; auto-refresh on a timer (like WorkerStatus does every 15s) would be better.

### 5. Pipeline Page Doesn't Show Debug Mode State Visually

When debug mode is on, the admin should see a visual indicator so they know pipeline runs will be capturing full prompts. Without this, they might wonder why events have debug payloads or not.

### 6. Trigger Button Lacks Debug Mode Context

When triggering a pipeline run, there's no indication whether it will run in debug mode or not. A small "(debug)" label next to the trigger button when debug mode is active would clarify.

## Files That Will Change

| File | What Changes |
|------|-------------|
| `frontend/src/pages/AdminPipeline.tsx` | Add debug mode toggle, status filter, rename head/tail, prune low-value elements, add cross-links |
| `frontend/src/api/public-client.ts` | Add `fetchDebugMode()` / `setDebugMode()` API functions |
| `frontend/src/App.css` | Add debug-mode toggle styles, status filter styles, polish tweaks |

## Constraints

- **All changes on ub01** — canonical dev directory is `/vmPool/r/repos/xpltdco/chrysopedia`
- **Deploy via Docker Compose rebuild** — `docker compose build chrysopedia-web && docker compose up -d chrysopedia-web-8096`
- **Container name vs service name** — build target is `chrysopedia-web`, container is `chrysopedia-web-8096`
- **No backend changes needed** — all required API endpoints already exist
- **Frontend-only slice** — TypeScript + CSS changes only

## Verification Strategy

1. `docker compose build chrysopedia-web` succeeds (TypeScript compiles)
2. Container healthy: `curl -s http://localhost:8096/ | grep -q Chrysopedia`
3. Browser verification of pipeline page: debug toggle visible, status filter functional, head/tail renamed, cross-links present
4. Debug mode toggle: click toggle → API call succeeds → visual state updates
5. Status filter: click filter pill → video list filters correctly
