Phase 6: Plan-Ansicht — solution list + weekly grid view

Frontend additions in studio-v2:
  - types.ts adds TimetableSolution, TimetableLesson, SolutionStatus,
    CreateTimetableSolution mirroring the Go models.
  - lib/stundenplan/api.ts adds solutionsApi with list/get/create/remove/
    lessons. Solve trigger is POST /timetable/solutions — school-service
    forwards to the solver-service over the Docker network.
  - _components/plan/SolutionList: table of past solves with status
    badges, hard/soft score, Anzeigen + Loeschen buttons, and a
    'Neuen Plan generieren' trigger. Auto-polls every 4 s while any
    solution is pending/running, clears the interval otherwise.
  - _components/plan/PlanView: Mo–Fr × period weekly grid. Three
    perspectives (Klasse / Lehrer / Raum) toggleable via test-id'd
    buttons; selector below lists every unique resource with at least
    one lesson. Cells colour-coded by tt_subject.color.
  - _components/plan/PlanHub orchestrates list + view; default tab in
    page.tsx switches from 'klassen' to 'plan'.

Tests:
  - mockSchoolApi helper extracted to e2e/_helpers.ts so the spec file
    stays under 500 LOC. Helper now also mocks /solutions GET/POST/DELETE
    and /solutions/:id/lessons; solutions kept in a closure so POST
    appears in the next GET.
  - 8 new tests across two suites: SolutionList empty state, list
    render, completed-vs-failed Anzeigen visibility, solve trigger;
    PlanView placeholder when no selection, grid render, perspective
    switching.
  - Existing Klassen CRUD tests now click the Klassen tab first
    (Plan is the new default landing tab).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

studio-v2/e2e/_helpers.ts

@@ -0,0 +1,131 @@
+import { Page } from '@playwright/test'
+
+/**
+ * Shared mock helper for the /stundenplan suite. Intercepts every endpoint
+ * the school-service proxy serves so tests stay hermetic.
+ */
+
+export const MOCK_TEACHER_ID = '11111111-1111-1111-1111-111111111111'
+export const MOCK_SUBJECT_ID = '22222222-2222-2222-2222-222222222222'
+export const MOCK_CLASS_ID = '33333333-3333-3333-3333-333333333333'
+
+export interface MockClass {
+  id: string
+  name: string
+  grade_level: number
+  student_count: number
+  notes?: string
+  created_by_user_id: string
+  created_at: string
+}
+
+export interface MockOpts {
+  classes?: MockClass[]
+  teachers?: unknown[]
+  subjects?: unknown[]
+  rooms?: unknown[]
+  periods?: unknown[]
+  curriculum?: unknown[]
+  assignments?: unknown[]
+  solutions?: unknown[]
+  lessons?: unknown[]
+}
+
+export async function mockSchoolApi(page: Page, opts: MockOpts = {}) {
+  const classes = opts.classes ?? []
+  const teachers = opts.teachers ?? []
+  const subjects = opts.subjects ?? []
+  const rooms = opts.rooms ?? []
+  const periods = opts.periods ?? []
+  const curriculum = opts.curriculum ?? []
+  const assignments = opts.assignments ?? []
+  const solutions = opts.solutions ?? []
+  const lessons = opts.lessons ?? []
+
+  await page.route('**/api/school/timetable/classes', async (route) => {
+    if (route.request().method() === 'GET') {
+      return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(classes) })
+    }
+    if (route.request().method() === 'POST') {
+      const body = JSON.parse(route.request().postData() || '{}')
+      const created: MockClass = {
+        id: 'new-class-id',
+        name: body.name,
+        grade_level: body.grade_level,
+        student_count: body.student_count ?? 0,
+        notes: body.notes,
+        created_by_user_id: 'test-user',
+        created_at: new Date().toISOString(),
+      }
+      classes.push(created)
+      return route.fulfill({ status: 201, contentType: 'application/json', body: JSON.stringify(created) })
+    }
+    return route.fulfill({ status: 405 })
+  })
+
+  const staticList = (path: string, data: unknown) =>
+    page.route(`**/api/school/timetable/${path}`, async (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(data) }))
+
+  await staticList('teachers', teachers)
+  await staticList('subjects', subjects)
+  await staticList('rooms', rooms)
+  await staticList('periods', periods)
+  await staticList('curriculum', curriculum)
+  await staticList('assignments', assignments)
+
+  for (const path of [
+    'constraints/teacher/unavailable-day',
+    'constraints/teacher/unavailable-window',
+    'constraints/teacher/max-hours-day',
+    'constraints/teacher/max-hours-week',
+    'constraints/teacher/excluded-subject',
+    'constraints/teacher/excluded-room',
+    'constraints/subject/max-consecutive',
+    'constraints/subject/preferred-period',
+    'constraints/subject/min-day-gap',
+    'constraints/subject/contiguous-when-repeated',
+    'constraints/subject/double-lesson',
+    'constraints/class/max-hours-day',
+    'constraints/class/no-gaps',
+    'constraints/room/requires-type',
+    'constraints/room/unavailable',
+  ]) {
+    await staticList(path, [])
+  }
+
+  await page.route('**/api/school/timetable/solutions', async (route) => {
+    if (route.request().method() === 'GET') {
+      return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(solutions) })
+    }
+    if (route.request().method() === 'POST') {
+      const body = JSON.parse(route.request().postData() || '{}')
+      const created = {
+        id: 'new-solution-id',
+        created_by_user_id: 'test-user',
+        name: body.name || 'Plan',
+        status: 'pending',
+        hard_score: null,
+        soft_score: null,
+        created_at: new Date().toISOString(),
+      }
+      ;(solutions as unknown[]).push(created)
+      return route.fulfill({ status: 201, contentType: 'application/json', body: JSON.stringify(created) })
+    }
+    return route.fulfill({ status: 405 })
+  })
+
+  await page.route(/\/api\/school\/timetable\/solutions\/[^/]+\/lessons$/, async (route) => {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(lessons) })
+  })
+  await page.route(/\/api\/school\/timetable\/solutions\/[^/]+$/, async (route) => {
+    if (route.request().method() === 'DELETE') {
+      return route.fulfill({ status: 200, contentType: 'application/json', body: '{"message":"deleted"}' })
+    }
+    const url = route.request().url()
+    const id = url.split('/').pop() ?? ''
+    const sol = (solutions as Array<{ id: string }>).find(s => s.id === id)
+    if (!sol) return route.fulfill({ status: 404 })
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(sol) })
+  })
+}

studio-v2/e2e/stundenplan.spec.ts

@@ -1,101 +1,14 @@
 import { test, expect, Page } from '@playwright/test'
+import { mockSchoolApi, MOCK_TEACHER_ID, MOCK_SUBJECT_ID, MOCK_CLASS_ID } from './_helpers'
 
 /**
  * E2E tests for /stundenplan
  *
  * Backend calls go through /api/school/* (Next.js proxy → school-service).
- * For most tests we intercept those routes so the suite is hermetic and does
- * not depend on a populated database or a valid JWT.
+ * Tests intercept those routes via mockSchoolApi() from _helpers.ts so the
+ * suite stays hermetic.
  */
 
-const MOCK_TEACHER_ID = '11111111-1111-1111-1111-111111111111'
-const MOCK_SUBJECT_ID = '22222222-2222-2222-2222-222222222222'
-const MOCK_CLASS_ID = '33333333-3333-3333-3333-333333333333'
-
-interface MockClass {
-  id: string
-  name: string
-  grade_level: number
-  student_count: number
-  notes?: string
-  created_by_user_id: string
-  created_at: string
-}
-
-interface MockOpts {
-  classes?: MockClass[]
-  teachers?: unknown[]
-  subjects?: unknown[]
-  rooms?: unknown[]
-  periods?: unknown[]
-  curriculum?: unknown[]
-  assignments?: unknown[]
-}
-
-async function mockSchoolApi(page: Page, opts: MockOpts = {}) {
-  const classes = opts.classes ?? []
-  const teachers = opts.teachers ?? []
-  const subjects = opts.subjects ?? []
-  const rooms = opts.rooms ?? []
-  const periods = opts.periods ?? []
-  const curriculum = opts.curriculum ?? []
-  const assignments = opts.assignments ?? []
-
-  await page.route('**/api/school/timetable/classes', async (route) => {
-    if (route.request().method() === 'GET') {
-      return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(classes) })
-    }
-    if (route.request().method() === 'POST') {
-      const body = JSON.parse(route.request().postData() || '{}')
-      const created: MockClass = {
-        id: 'new-class-id',
-        name: body.name,
-        grade_level: body.grade_level,
-        student_count: body.student_count ?? 0,
-        notes: body.notes,
-        created_by_user_id: 'test-user',
-        created_at: new Date().toISOString(),
-      }
-      classes.push(created)
-      return route.fulfill({ status: 201, contentType: 'application/json', body: JSON.stringify(created) })
-    }
-    return route.fulfill({ status: 405 })
-  })
-
-  // Helper to mount a read-only endpoint with a static list.
-  const staticList = (path: string, data: unknown) =>
-    page.route(`**/api/school/timetable/${path}`, async (route) =>
-      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(data) }))
-
-  await staticList('teachers', teachers)
-  await staticList('subjects', subjects)
-  await staticList('rooms', rooms)
-  await staticList('periods', periods)
-  await staticList('curriculum', curriculum)
-  await staticList('assignments', assignments)
-
-  // Constraint endpoints — all empty by default.
-  for (const path of [
-    'constraints/teacher/unavailable-day',
-    'constraints/teacher/unavailable-window',
-    'constraints/teacher/max-hours-day',
-    'constraints/teacher/max-hours-week',
-    'constraints/teacher/excluded-subject',
-    'constraints/teacher/excluded-room',
-    'constraints/subject/max-consecutive',
-    'constraints/subject/preferred-period',
-    'constraints/subject/min-day-gap',
-    'constraints/subject/contiguous-when-repeated',
-    'constraints/subject/double-lesson',
-    'constraints/class/max-hours-day',
-    'constraints/class/no-gaps',
-    'constraints/room/requires-type',
-    'constraints/room/unavailable',
-  ]) {
-    await staticList(path, [])
-  }
-}
-
 test.describe('Stundenplan — Page Shell', () => {
   test.beforeEach(async ({ page }) => {
     await mockSchoolApi(page)
@@ -108,16 +21,16 @@ test.describe('Stundenplan — Page Shell', () => {
     await expect(page.getByText('Stammdaten und Regeln fuer den Solver')).toBeVisible()
   })
 
-  test('shows all 8 tabs', async ({ page }) => {
+  test('shows all 9 tabs', async ({ page }) => {
     // Sidebar entries collide with tab labels for 'Lehrer' — scope to <main nav>.
     const tabs = page.locator('main nav')
-    for (const label of ['Klassen', 'Lehrer', 'Faecher', 'Raeume', 'Zeitraster', 'Stundentafel', 'Lehrauftraege', 'Regeln (Constraints)']) {
+    for (const label of ['Plan', 'Klassen', 'Lehrer', 'Faecher', 'Raeume', 'Zeitraster', 'Stundentafel', 'Lehrauftraege', 'Regeln (Constraints)']) {
       await expect(tabs.getByRole('button', { name: label, exact: true })).toBeVisible()
     }
   })
 
-  test('Klassen tab is active by default', async ({ page }) => {
-    await expect(page.getByTestId('klassen-manager')).toBeVisible()
+  test('Plan tab is active by default', async ({ page }) => {
+    await expect(page.getByTestId('plan-hub')).toBeVisible()
   })
 
   test('JWT dev field exists and persists into localStorage', async ({ page }) => {
@@ -137,9 +50,10 @@ test.describe('Stundenplan — Tab navigation', () => {
     await page.waitForLoadState('networkidle')
   })
 
-  test('all 8 tabs render their manager', async ({ page }) => {
+  test('all 9 tabs render their manager', async ({ page }) => {
     const tabs = page.locator('main nav')
     const cases: { label: string; testId: string }[] = [
+      { label: 'Klassen', testId: 'klassen-manager' },
       { label: 'Lehrer', testId: 'lehrer-manager' },
       { label: 'Faecher', testId: 'faecher-manager' },
       { label: 'Raeume', testId: 'raeume-manager' },
@@ -147,6 +61,7 @@ test.describe('Stundenplan — Tab navigation', () => {
       { label: 'Stundentafel', testId: 'curriculum-manager' },
       { label: 'Lehrauftraege', testId: 'assignments-manager' },
       { label: 'Regeln (Constraints)', testId: 'regeln-hub' },
+      { label: 'Plan', testId: 'plan-hub' },
     ]
     for (const c of cases) {
       await tabs.getByRole('button', { name: c.label, exact: true }).click()
@@ -156,10 +71,16 @@ test.describe('Stundenplan — Tab navigation', () => {
 })
 
 test.describe('Stundenplan — Klassen CRUD', () => {
-  test('empty state shows when no classes', async ({ page }) => {
-    await mockSchoolApi(page, { classes: [] })
+  const gotoKlassen = async (page: Page) => {
     await page.goto('/stundenplan')
     await page.waitForLoadState('networkidle')
+    // Plan is now the default tab; switch to Klassen first.
+    await page.locator('main nav').getByRole('button', { name: 'Klassen', exact: true }).click()
+  }
+
+  test('empty state shows when no classes', async ({ page }) => {
+    await mockSchoolApi(page, { classes: [] })
+    await gotoKlassen(page)
     await expect(page.getByText('Noch keine Klassen angelegt.')).toBeVisible()
   })
 
@@ -170,8 +91,7 @@ test.describe('Stundenplan — Klassen CRUD', () => {
         { id: 'c2', name: '5b', grade_level: 5, student_count: 23, created_by_user_id: 'u', created_at: '2026-05-21T10:00:00Z' },
       ],
     })
-    await page.goto('/stundenplan')
-    await page.waitForLoadState('networkidle')
+    await gotoKlassen(page)
     await expect(page.getByText('Klassen (2)')).toBeVisible()
     await expect(page.getByRole('cell', { name: '5a' })).toBeVisible()
     await expect(page.getByRole('cell', { name: '5b' })).toBeVisible()
@@ -179,8 +99,7 @@ test.describe('Stundenplan — Klassen CRUD', () => {
 
   test('+ Neue Klasse toggles the form', async ({ page }) => {
     await mockSchoolApi(page)
-    await page.goto('/stundenplan')
-    await page.waitForLoadState('networkidle')
+    await gotoKlassen(page)
 
     await expect(page.getByPlaceholder('z.B. 5a')).toHaveCount(0)
     await page.getByRole('button', { name: '+ Neue Klasse' }).click()
@@ -191,8 +110,7 @@ test.describe('Stundenplan — Klassen CRUD', () => {
 
   test('form submission appends a new class to the list', async ({ page }) => {
     await mockSchoolApi(page, { classes: [] })
-    await page.goto('/stundenplan')
-    await page.waitForLoadState('networkidle')
+    await gotoKlassen(page)
 
     await page.getByRole('button', { name: '+ Neue Klasse' }).click()
     await page.getByPlaceholder('z.B. 5a').fill('7c')
@@ -368,3 +286,118 @@ test.describe('Stundenplan — Sidebar entry', () => {
     await expect(sidebar.getByText(/Stundenplan|Timetable/).first()).toBeVisible()
   })
 })
+
+// ==========================================================================
+// Phase 6 — Plan-Ansicht
+// ==========================================================================
+
+test.describe('Stundenplan — Plan tab + SolutionList', () => {
+  test('empty state when no solutions exist', async ({ page }) => {
+    await mockSchoolApi(page, { solutions: [] })
+    await page.goto('/stundenplan')
+    await page.waitForLoadState('networkidle')
+    await expect(page.getByText('Noch keine Plaene generiert.')).toBeVisible()
+    await expect(page.getByTestId('solve-trigger')).toBeEnabled()
+  })
+
+  test('renders solutions returned by the backend', async ({ page }) => {
+    await mockSchoolApi(page, {
+      solutions: [
+        { id: 's1', created_by_user_id: 'u', name: 'Plan A', status: 'completed', hard_score: 0, soft_score: -42, created_at: '2026-05-22T10:00:00Z' },
+        { id: 's2', created_by_user_id: 'u', name: 'Plan B', status: 'failed', error_message: 'no lessons', created_at: '2026-05-22T11:00:00Z' },
+      ],
+    })
+    await page.goto('/stundenplan')
+    await page.waitForLoadState('networkidle')
+    await expect(page.getByRole('cell', { name: 'Plan A' })).toBeVisible()
+    await expect(page.getByRole('cell', { name: 'Plan B' })).toBeVisible()
+    await expect(page.getByText('Fertig').first()).toBeVisible()
+    await expect(page.getByText('Fehler').first()).toBeVisible()
+    await expect(page.getByText('0H / -42S')).toBeVisible()
+  })
+
+  test('completed solutions expose an Anzeigen button; failed ones do not', async ({ page }) => {
+    await mockSchoolApi(page, {
+      solutions: [
+        { id: 's1', created_by_user_id: 'u', name: 'Plan A', status: 'completed', hard_score: 0, soft_score: 0, created_at: '2026-05-22T10:00:00Z' },
+        { id: 's2', created_by_user_id: 'u', name: 'Plan B', status: 'failed', created_at: '2026-05-22T11:00:00Z' },
+      ],
+    })
+    await page.goto('/stundenplan')
+    await page.waitForLoadState('networkidle')
+    const planA = page.getByRole('row', { name: /Plan A/ })
+    const planB = page.getByRole('row', { name: /Plan B/ })
+    await expect(planA.getByRole('button', { name: 'Anzeigen' })).toBeVisible()
+    await expect(planB.getByRole('button', { name: 'Anzeigen' })).toHaveCount(0)
+  })
+
+  test('triggering Solve calls POST /solutions and reloads the list', async ({ page }) => {
+    await mockSchoolApi(page, { solutions: [] })
+    await page.goto('/stundenplan')
+    await page.waitForLoadState('networkidle')
+
+    await page.getByTestId('solve-trigger').click()
+    await expect(page.getByText('Plan').first()).toBeVisible()
+  })
+})
+
+test.describe('Stundenplan — PlanView grid', () => {
+  test('shows placeholder hint until a solution is selected', async ({ page }) => {
+    await mockSchoolApi(page, {
+      solutions: [
+        { id: 's1', created_by_user_id: 'u', name: 'Plan A', status: 'completed', hard_score: 0, soft_score: 0, created_at: '2026-05-22T10:00:00Z' },
+      ],
+    })
+    await page.goto('/stundenplan')
+    await page.waitForLoadState('networkidle')
+    await expect(page.getByText('Waehle einen abgeschlossenen Plan oben')).toBeVisible()
+    await expect(page.getByTestId('plan-view')).toHaveCount(0)
+  })
+
+  test('clicking Anzeigen mounts the PlanView with mocked lessons', async ({ page }) => {
+    await mockSchoolApi(page, {
+      solutions: [
+        { id: 's1', created_by_user_id: 'u', name: 'Plan A', status: 'completed', hard_score: 0, soft_score: 0, created_at: '2026-05-22T10:00:00Z' },
+      ],
+      lessons: [
+        { id: 'l1', solution_id: 's1', class_id: 'c1', subject_id: 'sub1', teacher_id: 't1', room_id: 'r1', day_of_week: 1, period_index: 1, pinned: false, created_at: '', class_name: '5a', subject_name: 'Mathe', teacher_name: 'Schmidt, Anna', room_name: 'A101' },
+        { id: 'l2', solution_id: 's1', class_id: 'c1', subject_id: 'sub2', teacher_id: 't1', room_id: 'r1', day_of_week: 2, period_index: 1, pinned: false, created_at: '', class_name: '5a', subject_name: 'Deutsch', teacher_name: 'Schmidt, Anna', room_name: 'A101' },
+      ],
+      subjects: [
+        { id: 'sub1', name: 'Mathematik', short_code: 'M', color: '#3b82f6', is_main_subject: true, created_by_user_id: 'u', created_at: '' },
+        { id: 'sub2', name: 'Deutsch', short_code: 'D', color: '#ef4444', is_main_subject: true, created_by_user_id: 'u', created_at: '' },
+      ],
+    })
+    await page.goto('/stundenplan')
+    await page.waitForLoadState('networkidle')
+
+    await page.getByRole('button', { name: 'Anzeigen' }).click()
+    await expect(page.getByTestId('plan-view')).toBeVisible()
+    await expect(page.getByTestId('cell-1-1')).toBeVisible()
+    await expect(page.getByTestId('cell-2-1')).toBeVisible()
+  })
+
+  test('switching perspective updates the resource selector', async ({ page }) => {
+    await mockSchoolApi(page, {
+      solutions: [
+        { id: 's1', created_by_user_id: 'u', name: 'Plan A', status: 'completed', hard_score: 0, soft_score: 0, created_at: '2026-05-22T10:00:00Z' },
+      ],
+      lessons: [
+        { id: 'l1', solution_id: 's1', class_id: 'c1', subject_id: 'sub1', teacher_id: 't1', room_id: 'r1', day_of_week: 1, period_index: 1, pinned: false, created_at: '', class_name: '5a', subject_name: 'Mathe', teacher_name: 'Schmidt, Anna', room_name: 'A101' },
+      ],
+    })
+    await page.goto('/stundenplan')
+    await page.waitForLoadState('networkidle')
+    await page.getByRole('button', { name: 'Anzeigen' }).click()
+    await expect(page.getByTestId('plan-view')).toBeVisible()
+
+    // Default perspective is 'class' → selector shows '5a'.
+    await expect(page.locator('select').last()).toHaveValue('c1')
+
+    await page.getByTestId('perspective-teacher').click()
+    await expect(page.locator('select').last()).toHaveValue('t1')
+
+    await page.getByTestId('perspective-room').click()
+    await expect(page.locator('select').last()).toHaveValue('r1')
+  })
+})