Redesign admin workbench frontend

docs/project-worklog.md

@@ -46,6 +46,52 @@ Future acceptance:
 
 ## Timeline
 
+### 2026-07-09: Frontend Workbench Redesign
+
+Branch:
+
+```text
+feature/evaluation-frontend-workbench
+```
+
+What changed:
+
+- Reframed the admin area as a usable workbench instead of concept pages.
+- Preserved the existing visual style: calm canvas, fine borders, serif
+  headings, mono data labels, compact cards, and restrained status colors.
+- Replaced primary admin navigation with operational destinations:
+  Overview, Detections, Evaluations, Models, and Review.
+- Added evaluation frontend API bindings.
+- Added an evaluation page for creating manifest-based evaluations, running or
+  retrying them, inspecting metrics, and reviewing wrong samples.
+- Added detection history, model registry, and review queue pages backed by the
+  existing APIs.
+- Reworked the overview page to summarize detection history, evaluation runs,
+  model health, and review workload.
+
+Why:
+
+- The backend now has real evaluation execution, so the frontend needs to show
+  measurable model behavior rather than only demo-style concepts.
+- Job-search reviewers should quickly understand the system boundaries:
+  detection workflow, evaluation workflow, model registry, and human review.
+- The redesign intentionally improves usability and information architecture
+  without changing the recognizable visual identity of the project.
+
+Verification:
+
+```powershell
+npm run lint
+npm run build
+npx playwright screenshot --browser=chromium http://127.0.0.1:5174/admin/evaluations artifacts-admin-evaluations.png
+```
+
+Deferred:
+
+- Full charting and confusion matrix visualization.
+- Pagination and server-side filtering for large datasets.
+- Rich image preview for evaluation samples after dataset upload support exists.
+
 ### 2026-07-08: Evaluation Batch Execution Framework
 
 Branch:

docs/superpowers/plans/2026-07-09-frontend-workbench-redesign.md

@@ -0,0 +1,128 @@
+# Frontend Workbench Redesign Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Rework the admin frontend into a usable AI image authenticity workbench while preserving the current visual style.
+
+**Architecture:** Keep the existing React/Vite/CSS Modules frontend. Add evaluation API bindings and pages, rename admin information architecture, and reuse the current token-driven dark UI style instead of introducing a new design system.
+
+**Tech Stack:** React 18, React Router 7, TypeScript, Vite, CSS Modules, existing primitive components.
+
+## Global Constraints
+
+- Preserve the current visual style and UI atmosphere.
+- Do not redesign the public home, detection upload, or report page in this branch.
+- Do not download model weights or require backend changes.
+- Keep API calls centralized in `src/api/backend.ts`.
+- Prefer dense operational layouts over marketing-style cards.
+- Verify with `npm run lint` and `npm run build`.
+
+---
+
+### Task 1: Evaluation API Boundary
+
+**Files:**
+- Modify: `src/api/backend.ts`
+
+**Interfaces:**
+- Produces evaluation response types and API functions for create/list/detail/run/retry/sample filtering.
+
+- [ ] Add evaluation TypeScript types.
+- [ ] Add evaluation API functions.
+- [ ] Run `npm run build` and expect TypeScript success.
+
+### Task 2: Admin Navigation
+
+**Files:**
+- Modify: `src/layouts/AdminLayout.tsx`
+- Modify: `src/layouts/AdminLayout.module.css`
+- Modify: `src/App.tsx`
+
+**Interfaces:**
+- Produces routes for `/admin/detections`, `/admin/evaluations`, `/admin/models`, and `/admin/review`.
+
+- [ ] Rename navigation items to operational workbench destinations.
+- [ ] Keep the compact sidebar visual style.
+- [ ] Add lazy routes for new pages.
+- [ ] Run `npm run build` and expect missing page failures until Task 3 creates pages.
+
+### Task 3: Evaluation Page
+
+**Files:**
+- Create: `src/pages/AdminEvaluations/index.tsx`
+- Create: `src/pages/AdminEvaluations/AdminEvaluations.module.css`
+
+**Interfaces:**
+- Consumes evaluation API functions from `src/api/backend.ts`.
+
+- [ ] Build evaluation list and create form.
+- [ ] Add run/retry/refresh actions.
+- [ ] Add selected run detail and wrong-sample table.
+- [ ] Preserve current visual style.
+
+### Task 4: Detection History Page
+
+**Files:**
+- Create: `src/pages/AdminDetections/index.tsx`
+- Create: `src/pages/AdminDetections/AdminDetections.module.css`
+
+**Interfaces:**
+- Consumes `listDetections`.
+
+- [ ] Add status filter.
+- [ ] Add detection table and report links.
+- [ ] Add empty/error states.
+
+### Task 5: Models Page
+
+**Files:**
+- Create: `src/pages/AdminModels/index.tsx`
+- Create: `src/pages/AdminModels/AdminModels.module.css`
+- Modify or leave deprecated: `src/pages/AdminExperts/*`
+
+**Interfaces:**
+- Consumes `listModels` and `checkModelHealth`.
+
+- [ ] Move credible model registry behavior into a clearer Models page.
+- [ ] Remove mock expert-training from primary navigation.
+- [ ] Keep model health display.
+
+### Task 6: Review Page
+
+**Files:**
+- Create: `src/pages/AdminReview/index.tsx`
+- Create: `src/pages/AdminReview/AdminReview.module.css`
+
+**Interfaces:**
+- Consumes detection history and evaluation sample APIs.
+
+- [ ] Show failed detections.
+- [ ] Show failed evaluations and wrong samples when available.
+- [ ] Avoid claiming retraining or data generation.
+
+### Task 7: Overview Integration
+
+**Files:**
+- Modify: `src/pages/AdminOverview/index.tsx`
+- Modify: `src/pages/AdminOverview/AdminOverview.module.css`
+
+**Interfaces:**
+- Consumes detection, model, and evaluation API summaries.
+
+- [ ] Replace conceptual overview cards with operational status panels.
+- [ ] Link panels to new admin routes.
+- [ ] Keep the existing typography and card language.
+
+### Task 8: Documentation, Verification, Push
+
+**Files:**
+- Modify: `docs/project-worklog.md`
+
+**Interfaces:**
+- Records what changed and why the UI style was preserved.
+
+- [ ] Update worklog.
+- [ ] Run `npm run lint`.
+- [ ] Run `npm run build`.
+- [ ] Commit and push `feature/evaluation-frontend-workbench`.
+

docs/superpowers/specs/2026-07-09-frontend-workbench-redesign-design.md

@@ -0,0 +1,128 @@
+# Frontend Workbench Redesign Design
+
+## Goal
+
+Reshape the admin frontend from a concept demo into a usable AI image authenticity workbench while preserving the current visual language: dark calm canvas, fine rules, serif headings, restrained motion, compact cards, and professional forensic tone.
+
+## References
+
+- MLflow: experiment tracking, model registry, and evaluation are organized as lifecycle surfaces rather than unrelated pages.
+- Label Studio: model output review works best when uncertain samples become an explicit human-in-the-loop queue.
+- ClearML: experiment, model, dataset, and pipeline surfaces are connected through a dense operational dashboard.
+
+These references inform information architecture only. The project should not copy their visual style.
+
+## Current Problems
+
+- Admin navigation names are too conceptual: `Pipeline`, `Experts`, and `Anomaly` do not clearly communicate the job-search project story.
+- The backend now has evaluation execution APIs, but the frontend has no evaluation surface.
+- The admin overview shows useful detection status, but it does not connect detection, model health, evaluation, and review into one workflow.
+- Some existing pages rely on mock concepts such as expert training and anomaly pools. They look interesting but are less credible than model registry, evaluation metrics, and sample review.
+
+## Product Direction
+
+The admin area becomes the main workbench:
+
+- `Overview`: operational snapshot across detection, model health, evaluation, and review.
+- `Detections`: detection history and report navigation.
+- `Evaluations`: create/run/retry evaluations, inspect metrics, and review wrong samples.
+- `Models`: model registry and health checks.
+- `Review`: uncertain or failed samples needing human attention.
+
+The public detection flow and report page keep their current structure for this branch.
+
+## Visual Constraints
+
+- Preserve existing colors, tokens, typography, spacing rhythm, border style, and restrained animation.
+- Do not introduce a marketing hero, large gradients, decorative blobs, or a new design system.
+- Use dense but legible operational layouts: metric rows, tables, compact panels, status dots, and side-by-side detail panels.
+- Keep cards at the current radius and border treatment.
+- Keep Chinese/English mixed labels concise, but use clear operational English where existing Chinese encoding may be fragile.
+
+## Data And API Design
+
+Extend `src/api/backend.ts` with evaluation types and calls:
+
+- `EvaluationStatus = 'QUEUED' | 'RUNNING' | 'COMPLETED' | 'FAILED'`
+- `EvaluationRunResponse`
+- `EvaluationDetailResponse`
+- `EvaluationSampleResponse`
+- `createEvaluation`
+- `listEvaluations`
+- `getEvaluation`
+- `runEvaluation`
+- `retryEvaluation`
+- `listEvaluationSamples`
+
+The first frontend slice can create evaluations from a pasted CSV manifest, run queued evaluations, retry failed evaluations, list recent evaluations, and inspect wrong samples.
+
+## Page Design
+
+### Admin Layout
+
+Replace icon-only conceptual navigation with operational destinations while keeping the compact sidebar:
+
+- Overview
+- Detections
+- Evaluations
+- Models
+- Review
+
+The sidebar stays narrow on desktop and should remain usable on smaller screens.
+
+### Overview
+
+Use the existing page style but change the content:
+
+- API/system status from detection history load.
+- Recent detections with status and report links.
+- Evaluation snapshot: total runs, completed runs, latest accuracy/F1 if available.
+- Model health snapshot: enabled models and health check status.
+- Review queue snapshot: failed detections plus failed evaluations.
+
+### Evaluations
+
+Add a new page under `/admin/evaluations`:
+
+- Left/main area: evaluation run table with name, dataset, model, status, attempts, accuracy, precision, recall, F1.
+- Right/secondary area: selected evaluation detail with action buttons.
+- Create panel: name, dataset, model id, manifest textarea.
+- Actions: run, retry, refresh.
+- Wrong samples: filename, ground truth, prediction, score, latency, failure reason.
+
+### Detections
+
+Create a clearer admin detection history page using existing detection APIs:
+
+- Status filter.
+- Recent detection table.
+- Report link when a report exists.
+- Basic file metadata.
+
+### Models
+
+Keep the useful model registry and health functionality from `AdminExperts`, but rename and simplify the page. Mock expert-training panels are removed from the primary workflow.
+
+### Review
+
+Keep the spirit of `AdminAnomaly`, but make it credible:
+
+- Show failed detections and failed/incorrect evaluation samples.
+- Keep the visual sample-review affordance.
+- Do not claim retraining or data generation is actually happening.
+
+## Error Handling
+
+- Every page that calls an API shows a compact inline error message.
+- Loading states use existing subdued text and status dots.
+- Empty states should explain the next action: upload a detection, create an evaluation, or check model health.
+
+## Acceptance Criteria
+
+- `npm run lint` passes.
+- `npm run build` passes.
+- Admin navigation exposes Overview, Detections, Evaluations, Models, and Review.
+- Evaluation frontend calls the backend APIs added in the previous branch.
+- Existing visual style remains recognizable.
+- No model weights or backend changes are required.
+

src/App.tsx

@@ -1,5 +1,5 @@
 import { lazy, Suspense, useEffect } from 'react';
-import { BrowserRouter, Route, Routes, useLocation } from 'react-router-dom';
+import { BrowserRouter, Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import { ToastProvider } from '@/components/primitives/Toast/Toast';
 import { AdminLayout } from '@/layouts/AdminLayout';
@@ -10,11 +10,12 @@ const DetectImage = lazy(() => import('@/pages/DetectImage').then((module) => ({
 const DetectVideo = lazy(() => import('@/pages/DetectVideo').then((module) => ({ default: module.DetectVideo })));
 const Report = lazy(() => import('@/pages/Report').then((module) => ({ default: module.Report })));
 const AdminOverview = lazy(() => import('@/pages/AdminOverview').then((module) => ({ default: module.AdminOverview })));
-const AdminPipeline = lazy(() => import('@/pages/AdminPipeline').then((module) => ({ default: module.AdminPipeline })));
+const AdminDetections = lazy(() => import('@/pages/AdminDetections').then((module) => ({ default: module.AdminDetections })));
+const AdminEvaluations = lazy(() => import('@/pages/AdminEvaluations').then((module) => ({ default: module.AdminEvaluations })));
+const AdminModels = lazy(() => import('@/pages/AdminModels').then((module) => ({ default: module.AdminModels })));
+const AdminReview = lazy(() => import('@/pages/AdminReview').then((module) => ({ default: module.AdminReview })));
 const VideoShowcase = lazy(() => import('@/pages/AdminPipeline/VideoShowcase').then((module) => ({ default: module.VideoShowcase })));
 const ImageShowcase = lazy(() => import('@/pages/AdminPipeline/ImageShowcase').then((module) => ({ default: module.ImageShowcase })));
-const AdminExperts = lazy(() => import('@/pages/AdminExperts').then((module) => ({ default: module.AdminExperts })));
-const AdminAnomaly = lazy(() => import('@/pages/AdminAnomaly').then((module) => ({ default: module.AdminAnomaly })));
 const Dev = lazy(() => import('@/pages/Dev').then((module) => ({ default: module.Dev })));
 const NotFound = lazy(() => import('@/pages/NotFound/NotFound').then((module) => ({ default: module.NotFound })));
 
@@ -39,11 +40,15 @@ function AnimatedRoutes() {
             <Route path="/detect/report/:id" element={<Report />} />
             <Route path="/admin" element={<AdminLayout />}>
               <Route index element={<AdminOverview />} />
-              <Route path="pipeline" element={<AdminPipeline />} />
+              <Route path="detections" element={<AdminDetections />} />
+              <Route path="evaluations" element={<AdminEvaluations />} />
+              <Route path="models" element={<AdminModels />} />
+              <Route path="review" element={<AdminReview />} />
+              <Route path="pipeline" element={<Navigate to="/admin/detections" replace />} />
               <Route path="pipeline/showcase/video" element={<VideoShowcase />} />
               <Route path="pipeline/showcase/image" element={<ImageShowcase />} />
-              <Route path="experts" element={<AdminExperts />} />
-              <Route path="anomaly" element={<AdminAnomaly />} />
+              <Route path="experts" element={<Navigate to="/admin/models" replace />} />
+              <Route path="anomaly" element={<Navigate to="/admin/review" replace />} />
             </Route>
             <Route path="/dev" element={<Dev />} />
             <Route path="*" element={<NotFound />} />