---
id: M006
title: "Admin Nav, Pipeline Log Views, Commit SHA, Tag Polish, Topics Redesign, Footer"
status: complete
completed_at: 2026-03-30T12:12:34.228Z
key_decisions:
  - D020: 3px colored left border + dot for category card visual differentiation — subtler than full colored header, maintains dark theme cohesion (M006/S05)
  - BEM naming convention for AdminDropdown CSS: admin-dropdown / __trigger / __menu / __item (S01)
  - 4-tier SHA resolution: .git-commit file → git rev-parse → env var → 'unknown' — ensures graceful fallback across local dev, Docker, and CI environments (S03)
  - Vite define + JSON.stringify for build-time constant injection with Docker ARG→ENV passthrough for production builds (S06)
  - Category slug derivation via toLowerCase().replace(/\s+/g, '-') for CSS class mapping — handles multi-word categories naturally (S04)
  - Hide 'unknown' commit SHA from UI — only display when a real hash was captured (S03)
key_files:
  - frontend/src/components/AdminDropdown.tsx
  - frontend/src/components/AppFooter.tsx
  - frontend/src/pages/AdminPipeline.tsx
  - frontend/src/pages/TechniquePage.tsx
  - frontend/src/pages/TopicsBrowse.tsx
  - frontend/src/App.tsx
  - frontend/src/App.css
  - frontend/vite.config.ts
  - frontend/src/vite-env.d.ts
  - frontend/src/api/public-client.ts
  - backend/routers/pipeline.py
  - backend/pipeline/stages.py
  - backend/config.py
  - docker/Dockerfile.api
  - docker/Dockerfile.web
  - docker-compose.yml
  - config/canonical_tags.yaml
lessons_learned:
  - Vite build-time constants via define require JSON.stringify wrapping — raw strings become undefined at runtime
  - Docker ARG→ENV pattern: ARG sets the build-time value, ENV persists it into the runtime layer. For Vite, the ENV must be set BEFORE npm run build in the Dockerfile
  - SPA class verification requires checking the JS bundle, not the HTML shell — grep against built assets for class names
  - Per-category color systems scale better when tied to CSS custom property pairs (bg+text) with a slug derivation convention — adding a new category is just 2 custom properties and 1 CSS class
---

# M006: Admin Nav, Pipeline Log Views, Commit SHA, Tag Polish, Topics Redesign, Footer

**Consolidated admin navigation into a dropdown, added head/tail pipeline log viewing with commit SHA tracking, polished technique page sidebar and tag colors, redesigned Topics browse page with 7 categories, and added a persistent app footer with build metadata.**

## What Happened

M006 was a UI refinement milestone delivering six independent slices — none depended on each other, so execution proceeded in sequence without cross-slice coordination.

**S01 (Admin Navigation Dropdown)** created AdminDropdown.tsx with click-outside/Escape close, consolidating Review, Reports, and Pipeline links behind a single Admin trigger in the header. ModeToggle removed from the header bar.

**S02 (Pipeline Head/Tail Log View)** added an `order` query parameter (asc/desc) to the pipeline events endpoint and wired a segmented Head/Tail toggle in the frontend EventLog component. Head shows events chronologically (oldest first), Tail shows most recent first. Token counts per-event and per-video were already present and preserved.

**S03 (Git Commit SHA)** implemented a 4-tier SHA resolution chain: Docker build-arg file → git rev-parse → env var → "unknown". The Dockerfile.api writes the SHA to `/app/.git-commit` at build time. TechniquePage.tsx conditionally displays the commit hash in the version metadata panel (hidden when "unknown").

**S04 (Sidebar Reorder + Tag Polish)** moved Plugins Referenced to the top of the technique page sidebar, extracted the creator name into a prominent dedicated block with genre pills, and implemented 6 per-category badge color pairs as CSS custom properties with dynamic class derivation.

**S05 (Topics Page Redesign)** was the highest-risk slice. Added Music Theory as the 7th canonical category with 8 sub-topics in canonical_tags.yaml. Rewrote TopicsBrowse.tsx from a vertical accordion to a responsive 2-column card grid with colored left borders, category descriptions, summary stats, and expand/collapse sub-topic lists. Added warm orange-gold badge colors for the new category.

**S06 (App Footer)** created AppFooter.tsx displaying version (from package.json), build date, commit SHA (linked to GitHub), and repo link. Vite's `define` config injects build-time constants. Docker ARG/ENV passthrough ensures production builds get the real SHA.

All changes were deployed to ub01 — backend via SSH, frontend via Docker Compose rebuild. Browser verification confirmed all features working at http://ub01:8096.

## Success Criteria Results

M006's roadmap uses "After this" per-slice as implicit success criteria (no separate section):

- ✅ **S01:** "Header shows Home, Topics, Creators, and an Admin dropdown. Clicking Admin reveals Review, Reports, Pipeline links. ModeToggle removed from header." — AdminDropdown.tsx with 3 links confirmed. ModeToggle import removed from App.tsx header.
- ✅ **S02:** "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." — Backend order param verified on ub01 (asc/desc), segmented toggle in AdminPipeline.tsx, token counts preserved.
- ✅ **S03:** "Running the pipeline captures the current git commit SHA. Viewing a technique page version shows the commit hash in the metadata panel." — `_get_git_commit_sha()` in stages.py with 4-tier fallback, conditional Commit row in TechniquePage.tsx.
- ✅ **S04:** "Technique page sidebar shows Plugins Referenced at top. Creator name is visually prominent. Tags use a coherent color system." — Plugins section at line 418 (first in sidebar), creator-block with accent styling, 6 per-category badge color pairs.
- ✅ **S05:** "Topics page shows 7 categories (including Music Theory) with an improved visual layout — category cards with descriptions, sub-topic counts, better structure." — API returns 7 categories, card grid layout with colored borders, descriptions, stats.
- ✅ **S06:** "Every page shows a subtle footer with app version, build date, and optional repo link." — AppFooter.tsx rendered in App.tsx, build-time constants via Vite define, deployed and visible.

## Definition of Done Results

- ✅ All 6 slices marked complete (✅) in roadmap
- ✅ All 6 slice summaries exist (S01-S06 SUMMARY.md files confirmed)
- ✅ No cross-slice integration issues — all slices were independent
- ✅ Code changes verified: 11 files changed locally (527 insertions, 124 deletions), plus backend/docker/config changes on ub01
- ✅ Frontend builds clean: TypeScript and Vite production build pass with zero errors across all slices
- ✅ Deployed and running on ub01:8096

## Requirement Outcomes

**R006 (Technique Page Display):** Remains `validated`. Advanced further — sidebar reordered for usability (plugins first), creator given visual prominence with dedicated block, category badges now color-coded per category. No status change needed.

**R008 (Topics Browse Page):** Remains `validated`. Enhanced from 6-category accordion to 7-category responsive card grid with descriptions, stats, colored cards, and Music Theory addition. No status change needed.

No requirements changed status during this milestone — both were already validated and received incremental improvements.

## Deviations

S06 files were synced to ub01 via SCP rather than git push (following the rule against outward-facing git actions without user confirmation). AdminDropdown.tsx from S01 also needed manual copy to ub01. Docker file changes on ub01 remain uncommitted working changes.

## Follow-ups

Consider adding GIT_COMMIT_SHA to a deploy script or CI so Docker builds automatically capture the commit SHA. Docker file changes on ub01 should be committed. Music Theory category has 0 techniques — content will populate as relevant videos are processed.
