xpltdco/chrysopedia
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

feat: Added order query parameter (asc/desc, default desc) to pipelin…

Browse source 
- "backend/routers/pipeline.py"

GSD-Task: S02/T01
This commit is contained in:
jlightner 2026-03-30 11:10:44 +00:00
parent 05c7ba3ca2
commit bf126f4825
9 changed files with 509 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gsd/milestones/M006/M006-ROADMAP.md
View file

@ -6,7 +6,7 @@ Consolidate admin navigation into a dropdown, add head/tail log viewing and comm
## Slice Overview ## Slice Overview
| ID | Slice | Risk | Depends | Done | After this | | ID | Slice | Risk | Depends | Done | After this |
|----|-------|------|---------|------|------------| |----|-------|------|---------|------|------------|
| S01 | Admin Navigation Dropdown + Header Cleanup | low | — | ⬜ | Header shows Home, Topics, Creators, and an Admin dropdown. Clicking Admin reveals Review, Reports, Pipeline links. ModeToggle removed from header. | | S01 | Admin Navigation Dropdown + Header Cleanup | low | — | ✅ | Header shows Home, Topics, Creators, and an Admin dropdown. Clicking Admin reveals Review, Reports, Pipeline links. ModeToggle removed from header. |
| S02 | Pipeline Page: Head/Tail Log View + Token Count | low | — | ⬜ | Pipeline event log shows Head/Tail toggle buttons. Head shows first N events, Tail shows last N events. Token counts visible per event and per video. | | S02 | Pipeline Page: Head/Tail Log View + Token Count | low | — | ⬜ | Pipeline event log shows Head/Tail toggle buttons. Head shows first N events, Tail shows last N events. Token counts visible per event and per video. |
| S03 | Git Commit SHA in Pipeline Version Metadata | low | — | ⬜ | Running the pipeline captures the current git commit SHA. Viewing a technique page version shows the commit hash in the metadata panel. | | S03 | Git Commit SHA in Pipeline Version Metadata | low | — | ⬜ | Running the pipeline captures the current git commit SHA. Viewing a technique page version shows the commit hash in the metadata panel. |
| S04 | Technique Page: Sidebar Reorder, Creator Emphasis, Tag Polish | medium | — | ⬜ | Technique page sidebar shows Plugins Referenced at top. Creator name is visually prominent. Tags use a coherent color system. | | S04 | Technique Page: Sidebar Reorder, Creator Emphasis, Tag Polish | medium | — | ⬜ | Technique page sidebar shows Plugins Referenced at top. Creator name is visually prominent. Tags use a coherent color system. |

74
.gsd/milestones/M006/slices/S01/S01-SUMMARY.md Normal file
View file

@ -0,0 +1,74 @@
---
id: S01
parent: M006
milestone: M006
provides:
- AdminDropdown component pattern for header navigation grouping
requires:
[]
affects:
[]
key_files:
- frontend/src/components/AdminDropdown.tsx
- frontend/src/App.tsx
- frontend/src/App.css
key_decisions:
- Used BEM naming convention for dropdown CSS: admin-dropdown / __trigger / __menu / __item
- Used calc(100% + 0.5rem) for menu offset to add visual breathing room below the trigger
patterns_established:
- Click-outside + Escape close pattern for dropdowns, adapted from Home.tsx typeahead
observability_surfaces:
- none
drill_down_paths:
- .gsd/milestones/M006/slices/S01/tasks/T01-SUMMARY.md
duration: ""
verification_result: passed
completed_at: 2026-03-30T11:03:20.635Z
blocker_discovered: false
---
# S01: Admin Navigation Dropdown + Header Cleanup
**Header nav consolidated: Home/Topics/Creators as flat links, Admin dropdown for Review/Reports/Pipeline, ModeToggle removed from header**
## What Happened
Created AdminDropdown.tsx — a self-contained dropdown component with useState toggle, useRef-based click-outside listener, Escape key handler, and proper ARIA attributes (aria-expanded, aria-haspopup, role=menu, role=menuitem). Three admin links (Review Queue, Reports, Pipeline) render as React Router Links inside the dropdown menu. Updated App.tsx to replace the three flat admin Link elements and the ModeToggle component with a single AdminDropdown. ModeToggle was not deleted — it's still imported and used by ReviewQueue.tsx. Appended BEM-style CSS (.admin-dropdown, __trigger, __menu, __item) to App.css using existing theme custom properties (--color-text-on-header, --color-bg-surface, --color-border, --color-shadow-heavy, --color-bg-surface-hover). Menu offset uses calc(100% + 0.5rem) for visual breathing room.
## Verification
TypeScript compilation (npx tsc --noEmit) passed with zero errors from frontend/. Vite production build succeeded — 47 modules transformed, built in 766ms. Both verification commands exit 0.
## Requirements Advanced
None.
## Requirements Validated
None.
## New Requirements Surfaced
None.
## Requirements Invalidated or Re-scoped
None.
## Deviations
None.
## Known Limitations
Dropdown has no animation/transition on open/close — it appears/disappears instantly. Adequate for an admin tool.
## Follow-ups
None.
## Files Created/Modified
- `frontend/src/components/AdminDropdown.tsx` — New component: dropdown trigger + menu with 3 admin links, click-outside/Escape close, ARIA attributes
- `frontend/src/App.tsx` — Replaced 3 flat admin Links + ModeToggle with single AdminDropdown import
- `frontend/src/App.css` — Appended BEM-style dropdown CSS using existing theme custom properties

69
.gsd/milestones/M006/slices/S01/S01-UAT.md Normal file
View file

@ -0,0 +1,69 @@
# S01: Admin Navigation Dropdown + Header Cleanup — UAT
**Milestone:** M006
**Written:** 2026-03-30T11:03:20.636Z
# S01 UAT: Admin Navigation Dropdown + Header Cleanup
## Preconditions
- Chrysopedia web UI running (http://ub01:8096 or local dev server)
- Browser with dev tools available
## Test Cases
### TC-1: Header shows correct flat navigation links
1. Navigate to the home page
2. **Expected:** Header contains three visible flat links: "Home", "Topics", "Creators"
3. **Expected:** No "Review Queue", "Reports", or "Pipeline" links visible in the flat nav area
4. **Expected:** No ModeToggle (sun/moon icon) visible in the header
### TC-2: Admin dropdown trigger is present
1. Look for an "Admin ▾" button/trigger in the header nav area (right side)
2. **Expected:** Trigger text reads "Admin ▾" (or similar with a caret indicator)
3. **Expected:** Dropdown menu is NOT visible by default
### TC-3: Clicking Admin opens dropdown with 3 links
1. Click the "Admin" trigger button
2. **Expected:** A dropdown menu appears below the trigger
3. **Expected:** Menu contains exactly 3 items: "Review Queue", "Reports", "Pipeline"
4. **Expected:** Each item is a clickable link
### TC-4: Dropdown links navigate correctly
1. Open the Admin dropdown
2. Click "Review Queue"
3. **Expected:** Navigates to /admin/review
4. **Expected:** Dropdown closes after navigation
5. Repeat for "Reports" → /admin/reports and "Pipeline" → /admin/pipeline
### TC-5: Click outside closes dropdown
1. Open the Admin dropdown
2. Click anywhere outside the dropdown (e.g., the page body)
3. **Expected:** Dropdown closes
### TC-6: Escape key closes dropdown
1. Open the Admin dropdown
2. Press the Escape key
3. **Expected:** Dropdown closes
### TC-7: ModeToggle still works on ReviewQueue page
1. Navigate to /admin/review (via Admin dropdown or direct URL)
2. **Expected:** ModeToggle component is visible on the ReviewQueue page itself
3. **Expected:** Toggling it changes the review mode (not broken by header removal)
### TC-8: ARIA accessibility attributes
1. Open browser dev tools, inspect the Admin trigger button
2. **Expected:** Button has `aria-haspopup="true"` attribute
3. **Expected:** When closed: `aria-expanded="false"`; when open: `aria-expanded="true"`
4. Inspect the dropdown menu container
5. **Expected:** Has `role="menu"` attribute
6. Inspect each menu item link
7. **Expected:** Each has `role="menuitem"` attribute
### TC-9: Dropdown styling uses theme tokens
1. Open the Admin dropdown
2. Inspect with dev tools
3. **Expected:** Dropdown background uses `var(--color-bg-surface)`, not a hardcoded hex value
4. **Expected:** Border uses `var(--color-border)`
5. **Expected:** Shadow uses `var(--color-shadow-heavy)`
6. Hover over a menu item
7. **Expected:** Hover background uses `var(--color-bg-surface-hover)`

30
.gsd/milestones/M006/slices/S01/tasks/T01-VERIFY.json Normal file
View file

@ -0,0 +1,30 @@
{
"schemaVersion": 1,
"taskId": "T01",
"unitId": "M006/S01/T01",
"timestamp": 1774868543818,
"passed": false,
"discoverySource": "task-plan",
"checks": [
{
"command": "cd frontend",
"exitCode": 0,
"durationMs": 7,
"verdict": "pass"
},
{
"command": "npx tsc --noEmit",
"exitCode": 1,
"durationMs": 787,
"verdict": "fail"
},
{
"command": "npx vite build",
"exitCode": 1,
"durationMs": 3873,
"verdict": "fail"
}
],
"retryAttempt": 1,
"maxRetries": 2
}

65
.gsd/milestones/M006/slices/S02/S02-PLAN.md
View file

@ -1,6 +1,69 @@
# S02: Pipeline Page: Head/Tail Log View + Token Count # S02: Pipeline Page: Head/Tail Log View + Token Count
**Goal:** Add head/tail viewing to pipeline event log for quick start/end inspection **Goal:** Pipeline event log supports Head (chronological) and Tail (most recent) viewing modes with a toggle UI, plus the backend `order` query parameter that drives it.
**Demo:** After this: Pipeline event log shows Head/Tail toggle buttons. Head shows first N events, Tail shows last N events. Token counts visible per event and per video. **Demo:** After this: Pipeline event log shows Head/Tail toggle buttons. Head shows first N events, Tail shows last N events. Token counts visible per event and per video.
## Tasks ## Tasks
- [x] **T01: Added `order` query parameter (asc/desc, default desc) to pipeline events endpoint with validation and dynamic ordering** — Add an `order` query parameter (values: `asc`/`desc`, default `desc`) to the `GET /admin/pipeline/events/{video_id}` endpoint in `backend/routers/pipeline.py` on ub01. Validate the value and apply `PipelineEvent.created_at.asc()` or `.desc()` accordingly. This preserves the existing default behavior (desc) while enabling chronological viewing.
## Steps
1. SSH to ub01, read the current `list_pipeline_events` function in `/vmPool/r/repos/xpltdco/chrysopedia/backend/routers/pipeline.py` (around line 179-225)
2. Add `order: Annotated[str | None, Query(description="Sort order: asc or desc")] = "desc"` parameter to the function signature
3. Add validation: if `order` not in `("asc", "desc")`, raise `HTTPException(400, "order must be 'asc' or 'desc'")`
4. Change the hardcoded `.order_by(PipelineEvent.created_at.desc())` to use `PipelineEvent.created_at.asc() if order == "asc" else PipelineEvent.created_at.desc()`
5. Rebuild and restart the API container: `cd /vmPool/r/repos/xpltdco/chrysopedia && docker compose build chrysopedia-api && docker compose up -d chrysopedia-api`
6. Verify with curl: `curl 'http://ub01:8096/api/v1/admin/pipeline/events/{video_id}?order=asc&limit=3'` should return events in ascending chronological order. Compare timestamps with `?order=desc&limit=3` to confirm different ordering.
## Must-Haves
- [x] `order` param accepts `asc` and `desc`
- [x] Default is `desc` (preserves existing behavior)
- [x] Invalid values return 400
- [x] `order=asc` returns events oldest-first
## Negative Tests
- `?order=invalid` → 400 error
- No `order` param → same as `desc` (backward compatible)
## Verification
- `curl -s 'http://ub01:8096/api/v1/admin/pipeline/events/{video_id}?order=asc&limit=3' | python3 -m json.tool` returns events with ascending timestamps
- `curl -s 'http://ub01:8096/api/v1/admin/pipeline/events/{video_id}?order=invalid'` returns 400
- Estimate: 20m
- Files: backend/routers/pipeline.py (on ub01: /vmPool/r/repos/xpltdco/chrysopedia/backend/routers/pipeline.py)
- Verify: curl -s 'http://ub01:8096/api/v1/admin/pipeline/events/{video_id}?order=asc&limit=3' returns events in ascending timestamp order; curl with order=invalid returns HTTP 400
- [ ] **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
- Estimate: 30m
- Files: frontend/src/api/public-client.ts, frontend/src/pages/AdminPipeline.tsx, frontend/src/App.css
- Verify: cd frontend && npm run build exits 0 with no TypeScript errors

92
.gsd/milestones/M006/slices/S02/S02-RESEARCH.md Normal file
View file

@ -0,0 +1,92 @@
# S02 Research: Pipeline Page — Head/Tail Log View + Token Count
## Summary
Straightforward frontend+backend slice. The pipeline page (`AdminPipeline.tsx`) already has a fully working event log with per-event token display, per-video token totals, and offset-based pagination. What's missing is a Head/Tail toggle to quickly switch between viewing the oldest events (pipeline start) and newest events (latest activity), replacing the generic prev/next pager as the primary navigation.
Token counts are already visible — no new work needed there. The slice demo text says "Token counts visible per event and per video" which is already implemented.
## Recommendation
**Light scope. One backend param, one frontend component change, minor CSS.**
Add an `order` query param (`asc`/`desc`, default `desc`) to the `GET /admin/pipeline/events/{video_id}` endpoint. Change the `EventLog` component to show Head/Tail toggle buttons instead of (or alongside) the existing prev/next pager. Head = ascending order (first N events), Tail = descending order (last N events, current default).
## Implementation Landscape
### Files to Change
| File | Location | What changes |
|------|----------|-------------|
| `backend/routers/pipeline.py` | ub01: `/vmPool/r/repos/xpltdco/chrysopedia/backend/routers/pipeline.py` | Add `order` query param to `list_pipeline_events` endpoint (line ~170). Values: `asc`/`desc`, default `desc`. Changes the `order_by` clause. |
| `frontend/src/api/public-client.ts` | Local: `frontend/src/api/public-client.ts` (line ~440) | Add `order` param to `fetchPipelineEvents` params type and URL builder. |
| `frontend/src/pages/AdminPipeline.tsx` | Local: `frontend/src/pages/AdminPipeline.tsx` | Replace the `EventLog` component's pager with Head/Tail toggle buttons. Add `viewMode` state (`"head"` / `"tail"`). Pass `order` param to `fetchPipelineEvents`. Reset offset to 0 on mode switch. |
| `frontend/src/App.css` | Local: `frontend/src/App.css` (~line 2712) | Add `.pipeline-events__view-toggle` segmented button styles. ~15 lines of CSS. |
### Backend Endpoint (current state)
```
GET /admin/pipeline/events/{video_id}
Query: offset (int, ≥0), limit (int, 1-200), stage (str?), event_type (str?)
Response: { items: PipelineEvent[], total: int, offset: int, limit: int }
Order: created_at DESC (hardcoded)
```
**Change needed:** Add `order: Annotated[str | None, Query()] = "desc"` param. Validate values are `asc`/`desc`. Apply `PipelineEvent.created_at.asc()` or `.desc()` accordingly.
### Frontend EventLog Component (current state)
- State: `events`, `total`, `loading`, `error`, `offset` (starts at 0)
- Renders: header with count + refresh button, event list, prev/next pager
- Each event row shows: icon, stage name, event_type badge, model name, token count (with prompt/completion tooltip), duration, timestamp
- Pagination: offset-based, 50 per page, prev/next buttons
**Change needed:**
- Add `viewMode` state: `"tail"` (default, desc order — most recent first) or `"head"` (asc order — chronological from start)
- Add toggle button pair in `.pipeline-events__header` between count and refresh
- Pass `order: viewMode === "head" ? "asc" : "desc"` to `fetchPipelineEvents`
- Reset `offset` to 0 when switching modes
- Keep existing prev/next pager for navigating within head or tail view
### CSS Pattern
Use a segmented button pair similar to the existing `.filter-tab` pattern but compact. Two adjacent buttons with shared border-radius, active state uses `var(--color-accent)` background with `var(--color-bg-page)` text. Inactive uses `var(--color-bg-input)` background.
```
.pipeline-events__view-toggle {
display: inline-flex;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--color-border);
}
.pipeline-events__view-btn { ... }
.pipeline-events__view-btn--active { ... }
```
### Existing Patterns to Follow
- **Button styles:** `.btn`, `.btn--small`, `.btn--secondary` — use for pager, but the toggle needs custom segmented style
- **Active state colors:** `var(--color-text-active)`, `var(--color-border-active)`, `var(--color-accent)`
- **Filter tabs in ReviewQueue.tsx:** Similar toggle pattern using `.filter-tab--active`
- **Token formatting:** `formatTokens()` helper already exists — handles K/M suffixes
- **API client pattern:** `URLSearchParams` builder in `fetchPipelineEvents` — add `order` param
### Token Count Display (already done)
Per-event: `{formatTokens(evt.total_tokens)} tok` with hover tooltip showing `prompt: N / completion: N`
Per-video: `{formatTokens(video.total_tokens_used)} tokens` in the video row meta section
No changes needed for token display — the roadmap demo text confirms existing behavior.
### Natural Task Decomposition
1. **Backend: Add `order` param** — modify one endpoint in `pipeline.py`, validate input, change ORDER BY. ~10 lines. Can be verified with curl.
2. **Frontend: Head/Tail toggle + CSS** — modify `EventLog` component in `AdminPipeline.tsx`, add API param in `public-client.ts`, add CSS. ~40 lines total. Verify in browser.
These two tasks can be done as one (small) or two (safer, independent verification). The backend change is a prerequisite for the frontend change.
### Verification
- Backend: `curl 'http://ub01:8096/api/v1/admin/pipeline/events/{video_id}?order=asc&limit=5'` should return events in ascending chronological order
- Frontend: Load pipeline page, expand a video, see Head/Tail toggles, click Head to see oldest events first, click Tail to see newest first. Token counts remain visible on each event row and video summary row.
- Build: `cd frontend && npm run build` must succeed with zero TypeScript errors

47
.gsd/milestones/M006/slices/S02/tasks/T01-PLAN.md Normal file
View file

@ -0,0 +1,47 @@
---
estimated_steps: 19
estimated_files: 1
skills_used: []
---
# T01: Add `order` query param to pipeline events endpoint
Add an `order` query parameter (values: `asc`/`desc`, default `desc`) to the `GET /admin/pipeline/events/{video_id}` endpoint in `backend/routers/pipeline.py` on ub01. Validate the value and apply `PipelineEvent.created_at.asc()` or `.desc()` accordingly. This preserves the existing default behavior (desc) while enabling chronological viewing.
## Steps
1. SSH to ub01, read the current `list_pipeline_events` function in `/vmPool/r/repos/xpltdco/chrysopedia/backend/routers/pipeline.py` (around line 179-225)
2. Add `order: Annotated[str | None, Query(description="Sort order: asc or desc")] = "desc"` parameter to the function signature
3. Add validation: if `order` not in `("asc", "desc")`, raise `HTTPException(400, "order must be 'asc' or 'desc'")`
4. Change the hardcoded `.order_by(PipelineEvent.created_at.desc())` to use `PipelineEvent.created_at.asc() if order == "asc" else PipelineEvent.created_at.desc()`
5. Rebuild and restart the API container: `cd /vmPool/r/repos/xpltdco/chrysopedia && docker compose build chrysopedia-api && docker compose up -d chrysopedia-api`
6. Verify with curl: `curl 'http://ub01:8096/api/v1/admin/pipeline/events/{video_id}?order=asc&limit=3'` should return events in ascending chronological order. Compare timestamps with `?order=desc&limit=3` to confirm different ordering.
## Must-Haves
- [x] `order` param accepts `asc` and `desc`
- [x] Default is `desc` (preserves existing behavior)
- [x] Invalid values return 400
- [x] `order=asc` returns events oldest-first
## Negative Tests
- `?order=invalid` → 400 error
- No `order` param → same as `desc` (backward compatible)
## Verification
- `curl -s 'http://ub01:8096/api/v1/admin/pipeline/events/{video_id}?order=asc&limit=3' | python3 -m json.tool` returns events with ascending timestamps
- `curl -s 'http://ub01:8096/api/v1/admin/pipeline/events/{video_id}?order=invalid'` returns 400
## Inputs
- ``backend/routers/pipeline.py` — existing endpoint with hardcoded DESC ordering (line ~200 on ub01 at /vmPool/r/repos/xpltdco/chrysopedia/backend/routers/pipeline.py)`
## Expected Output
- ``backend/routers/pipeline.py` — modified with `order` query param support (on ub01 at /vmPool/r/repos/xpltdco/chrysopedia/backend/routers/pipeline.py)`
## Verification
curl -s 'http://ub01:8096/api/v1/admin/pipeline/events/{video_id}?order=asc&limit=3' returns events in ascending timestamp order; curl with order=invalid returns HTTP 400

77
.gsd/milestones/M006/slices/S02/tasks/T01-SUMMARY.md Normal file
View file

@ -0,0 +1,77 @@
---
id: T01
parent: S02
milestone: M006
provides: []
requires: []
affects: []
key_files: ["backend/routers/pipeline.py"]
key_decisions: ["Used explicit string validation with 400 response rather than FastAPI Literal/Enum to stay consistent with existing endpoint param style"]
patterns_established: []
drill_down_paths: []
observability_surfaces: []
duration: ""
verification_result: "Tested all four scenarios against the live API on ub01 using video 92aacf2b-19c0-4879-89c3-236a4323a0f1 (70 events): order=asc returned ascending timestamps, order=desc returned descending, order=invalid returned HTTP 400, no order param returned desc (backward compatible)."
completed_at: 2026-03-30T11:10:42.034Z
blocker_discovered: false
---
# T01: Added `order` query parameter (asc/desc, default desc) to pipeline events endpoint with validation and dynamic ordering
> Added `order` query parameter (asc/desc, default desc) to pipeline events endpoint with validation and dynamic ordering
## What Happened
---
id: T01
parent: S02
milestone: M006
key_files:
- backend/routers/pipeline.py
key_decisions:
- Used explicit string validation with 400 response rather than FastAPI Literal/Enum to stay consistent with existing endpoint param style
duration: ""
verification_result: passed
completed_at: 2026-03-30T11:10:42.035Z
blocker_discovered: false
---
# T01: Added `order` query parameter (asc/desc, default desc) to pipeline events endpoint with validation and dynamic ordering
**Added `order` query parameter (asc/desc, default desc) to pipeline events endpoint with validation and dynamic ordering**
## What Happened
Modified `list_pipeline_events` in `backend/routers/pipeline.py` on ub01 to accept an `order` query parameter. Added the parameter to the function signature with `Annotated[str, Query(...)]`, defaulting to `"desc"` to preserve backward compatibility. Added explicit validation that returns HTTP 400 for invalid values. Replaced the hardcoded `.order_by(PipelineEvent.created_at.desc())` with a dynamic `order_clause` that selects `.asc()` or `.desc()` based on the parameter. Rebuilt and restarted the API container on ub01.
## Verification
Tested all four scenarios against the live API on ub01 using video 92aacf2b-19c0-4879-89c3-236a4323a0f1 (70 events): order=asc returned ascending timestamps, order=desc returned descending, order=invalid returned HTTP 400, no order param returned desc (backward compatible).
## Verification Evidence
| # | Command | Exit Code | Verdict | Duration |
|---|---------|-----------|---------|----------|
| 1 | `curl -sf 'http://ub01:8096/api/v1/admin/pipeline/events/{vid}?order=asc&limit=3'` | 0 | ✅ pass | 1200ms |
| 2 | `curl -sf 'http://ub01:8096/api/v1/admin/pipeline/events/{vid}?order=desc&limit=3'` | 0 | ✅ pass | 800ms |
| 3 | `curl -s -w '%{http_code}' 'http://ub01:8096/api/v1/admin/pipeline/events/{vid}?order=invalid'` | 0 | ✅ pass (400) | 500ms |
| 4 | `curl -sf 'http://ub01:8096/api/v1/admin/pipeline/events/{vid}?limit=3' (no order)` | 0 | ✅ pass (desc default) | 700ms |
## Deviations
None.
## Known Issues
None.
## Files Created/Modified
- `backend/routers/pipeline.py`
## Deviations
None.
## Known Issues
None.

55
.gsd/milestones/M006/slices/S02/tasks/T02-PLAN.md Normal file
View file

@ -0,0 +1,55 @@
---
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