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

# T02: Add Head/Tail toggle to EventLog component with API wiring and CSS

Add a Head/Tail segmented toggle to the EventLog component in AdminPipeline.tsx. Wire it to pass the `order` param through the API client. Add compact segmented-button CSS.

## Steps

1. Read `frontend/src/api/public-client.ts` around line 440. Add `order?: "asc" | "desc"` to the `fetchPipelineEvents` params type. Add `if (params.order) qs.set("order", params.order);` to the URL builder.
2. Read `frontend/src/pages/AdminPipeline.tsx`. In the `EventLog` component:
   - Add `viewMode` state: `const [viewMode, setViewMode] = useState<"head" | "tail">("tail");`
   - Pass `order: viewMode === "head" ? "asc" : "desc"` to `fetchPipelineEvents` in the `load` callback
   - Add `viewMode` to the `useCallback` dependency array
   - Add a mode-switch handler that sets viewMode and resets offset to 0
   - Insert the toggle buttons in `.pipeline-events__header` between the count and the refresh button
3. Read `frontend/src/App.css` around the `.pipeline-events__header` section (~line 2735). Add CSS for `.pipeline-events__view-toggle` (inline-flex container with shared border-radius) and `.pipeline-events__view-btn` / `.pipeline-events__view-btn--active` (segmented button pair using existing color variables).
4. Run `cd frontend && npm run build` to verify zero TypeScript errors.
5. Verify in browser at http://ub01:8096 — navigate to Admin > Pipeline, expand a video, confirm Head/Tail toggle appears and switches event ordering. Confirm token counts still display on each event row and video summary.

## Must-Haves

- [x] `viewMode` state with `head`/`tail` values, default `tail`
- [x] Toggle buttons render in event log header
- [x] Head mode passes `order=asc`, Tail passes `order=desc`
- [x] Switching modes resets offset to 0
- [x] Existing prev/next pager still works within each mode
- [x] Token counts per-event and per-video remain visible and unchanged
- [x] Segmented button CSS uses existing CSS custom properties

## Verification

- `cd frontend && npm run build` exits 0
- Browser: Head button shows oldest events first, Tail shows newest first
- Browser: Token counts visible on event rows and video summary rows

## Inputs

- ``frontend/src/api/public-client.ts` — existing fetchPipelineEvents function (line ~440)`
- ``frontend/src/pages/AdminPipeline.tsx` — existing EventLog component with offset-based pagination`
- ``frontend/src/App.css` — existing pipeline event styles (~line 2735)`
- ``backend/routers/pipeline.py` — T01 output: endpoint now accepts `order` param`

## Expected Output

- ``frontend/src/api/public-client.ts` — modified with `order` param in fetchPipelineEvents`
- ``frontend/src/pages/AdminPipeline.tsx` — modified with Head/Tail viewMode toggle in EventLog`
- ``frontend/src/App.css` — modified with .pipeline-events__view-toggle segmented button styles`

## Verification

cd frontend && npm run build exits 0 with no TypeScript errors
