From d0ba75b995f775bc4057724c6b8d8a2762c90ca8 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Sat, 2 May 2026 18:03:13 -0700
Subject: [PATCH] feat: extract CompareView at /eval/compare; remove Compare
 tab from BenchmarkView

---
 web/src/views/BenchmarkView.test.ts | 48 +++++++++++++++++++++++++++++
 web/src/views/BenchmarkView.vue     | 11 ++-----
 web/src/views/CompareView.test.ts   | 31 +++++++++++++++++++
 web/src/views/CompareView.vue       | 34 +++++++++++++++++---
 4 files changed, 111 insertions(+), 13 deletions(-)
 create mode 100644 web/src/views/BenchmarkView.test.ts
 create mode 100644 web/src/views/CompareView.test.ts

diff --git a/web/src/views/BenchmarkView.test.ts b/web/src/views/BenchmarkView.test.ts
new file mode 100644
index 0000000..32c7cff
--- /dev/null
+++ b/web/src/views/BenchmarkView.test.ts
@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import BenchmarkView from './BenchmarkView.vue'
+
+beforeEach(() => {
+  vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+    ok: true,
+    // Return a shape that satisfies all child tab API calls:
+    // - ClassifierTab expects { models: {}, ... } from /api/benchmark/results
+    // - ClassifierTab expects ModelCategoriesResponse from /api/benchmark/models
+    // - LlmEvalTab, StyleTab, CompareTab have their own calls but also use models/tasks
+    json: async () => ({ models: {}, categories: {}, tasks: [], types: [], results: [] }),
+    text: async () => '',
+  }))
+  vi.stubGlobal('EventSource', class {
+    onmessage = null
+    onerror = null
+    close() {}
+  })
+})
+
+describe('BenchmarkView', () => {
+  it('renders page title "Benchmark"', () => {
+    const w = mount(BenchmarkView)
+    expect(w.text()).toContain('Benchmark')
+  })
+
+  it('has mode buttons: Classifier, LLM Eval, Writing Style', () => {
+    const w = mount(BenchmarkView)
+    const text = w.text()
+    expect(text).toContain('Classifier')
+    expect(text).toContain('LLM Eval')
+    expect(text).toContain('Writing Style')
+  })
+
+  it('does NOT have a Compare mode button', () => {
+    const w = mount(BenchmarkView)
+    const buttons = w.findAll('.mode-btn')
+    const labels = buttons.map(b => b.text())
+    expect(labels.every(l => !l.includes('Compare'))).toBe(true)
+  })
+
+  it('shows Classifier tab by default', () => {
+    const w = mount(BenchmarkView)
+    // ClassifierTab has a .classifier-tab root
+    expect(w.find('.classifier-tab').exists()).toBe(true)
+  })
+})
diff --git a/web/src/views/BenchmarkView.vue b/web/src/views/BenchmarkView.vue
index 667cde1..a4ae4ea 100644
--- a/web/src/views/BenchmarkView.vue
+++ b/web/src/views/BenchmarkView.vue
@@ -16,11 +16,6 @@
         :class="{ active: benchMode === 'llm' }"
         @click="benchMode = 'llm'"
       >🤖 LLM Eval</button>
-      <button
-        class="mode-btn"
-        :class="{ active: benchMode === 'compare' }"
-        @click="benchMode = 'compare'"
-      >⚖️ Compare</button>
       <button
         class="mode-btn"
         :class="{ active: benchMode === 'style' }"
@@ -30,7 +25,6 @@
 
     <ClassifierTab v-if="benchMode === 'classifier'" />
     <LlmEvalTab   v-if="benchMode === 'llm'" />
-    <CompareTab   v-if="benchMode === 'compare'" />
     <StyleTab     v-if="benchMode === 'style'" />
   </div>
 </template>
@@ -39,10 +33,9 @@
 import { ref } from 'vue'
 import ClassifierTab from './ClassifierTab.vue'
 import LlmEvalTab   from './LlmEvalTab.vue'
-import CompareTab   from './CompareTab.vue'
 import StyleTab     from './StyleTab.vue'
 
-type BenchMode = 'classifier' | 'llm' | 'compare' | 'style'
+type BenchMode = 'classifier' | 'llm' | 'style'
 const benchMode = ref<BenchMode>('classifier')
 </script>
 
@@ -69,7 +62,7 @@ const benchMode = ref<BenchMode>('classifier')
   margin: 0;
 }
 
-/* ── Mode toggle (segmented control) ────────────────────── */
+/* ── Mode toggle (segmented control) ── */
 .mode-toggle {
   display: inline-flex;
   border: 1px solid var(--color-border, #d0d7e8);
diff --git a/web/src/views/CompareView.test.ts b/web/src/views/CompareView.test.ts
new file mode 100644
index 0000000..cff3487
--- /dev/null
+++ b/web/src/views/CompareView.test.ts
@@ -0,0 +1,31 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import CompareView from './CompareView.vue'
+
+beforeEach(() => {
+  vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+    ok: true,
+    json: async () => ({ tasks: [], types: [], models: [] }),
+    text: async () => '',
+  }))
+  vi.stubGlobal('EventSource', class {
+    onmessage = null
+    onerror = null
+    close() {}
+  })
+})
+
+describe('CompareView', () => {
+  it('renders page title "Compare"', async () => {
+    const w = mount(CompareView)
+    await flushPromises()
+    expect(w.find('h1.page-title').text()).toContain('Compare')
+  })
+
+  it('wraps CompareTab component', async () => {
+    const w = mount(CompareView)
+    await flushPromises()
+    // CompareTab renders a .compare-tab root div
+    expect(w.find('.compare-tab').exists()).toBe(true)
+  })
+})
diff --git a/web/src/views/CompareView.vue b/web/src/views/CompareView.vue
index 3e7acda..c0d6761 100644
--- a/web/src/views/CompareView.vue
+++ b/web/src/views/CompareView.vue
@@ -1,10 +1,36 @@
 <template>
-  <div class="view-placeholder">
-    <h2>CompareView</h2>
-    <p>Coming soon.</p>
+  <div class="compare-view">
+    <header class="compare-header">
+      <h1 class="page-title">🔍 Compare</h1>
+    </header>
+    <CompareTab />
   </div>
 </template>
 
 <script setup lang="ts">
-// Stub — will be implemented in a later task
+import CompareTab from './CompareTab.vue'
 </script>
+
+<style scoped>
+.compare-view {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 1.5rem 1rem 4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+}
+
+.compare-header {
+  display: flex;
+  align-items: center;
+}
+
+.page-title {
+  font-family: var(--font-display, var(--font-body, sans-serif));
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--app-primary, #2A6080);
+  margin: 0;
+}
+</style>