LocalAI/core/http/react-ui/e2e/model-config.spec.js

import { test, expect } from './coverage-fixtures.js'

const MOCK_METADATA = {
  sections: [
    { id: 'general', label: 'General', icon: 'settings', order: 0 },
    { id: 'parameters', label: 'Parameters', icon: 'sliders', order: 20 },
  ],
  fields: [
    { path: 'name', yaml_key: 'name', go_type: 'string', ui_type: 'string', section: 'general', label: 'Model Name', description: 'Unique identifier for this model', component: 'input', order: 0 },
    { path: 'backend', yaml_key: 'backend', go_type: 'string', ui_type: 'string', section: 'general', label: 'Backend', description: 'Inference backend to use', component: 'select', autocomplete_provider: 'backends', order: 10 },
    { path: 'context_size', yaml_key: 'context_size', go_type: '*int', ui_type: 'int', section: 'general', label: 'Context Size', description: 'Maximum context window in tokens', component: 'number', vram_impact: true, order: 20 },
    { path: 'cuda', yaml_key: 'cuda', go_type: 'bool', ui_type: 'bool', section: 'general', label: 'CUDA', description: 'Enable CUDA GPU acceleration', component: 'toggle', order: 30 },
    { path: 'parameters.temperature', yaml_key: 'temperature', go_type: '*float64', ui_type: 'float', section: 'parameters', label: 'Temperature', description: 'Sampling temperature', component: 'slider', min: 0, max: 2, step: 0.1, order: 0 },
    { path: 'parameters.top_p', yaml_key: 'top_p', go_type: '*float64', ui_type: 'float', section: 'parameters', label: 'Top P', description: 'Nucleus sampling threshold', component: 'slider', min: 0, max: 1, step: 0.05, order: 10 },
  ],
}

// Mock raw YAML (what the edit endpoint returns) — only fields actually in the file
const MOCK_YAML = `name: mock-model
backend: mock-backend
parameters:
  model: mock-model.bin
`

const MOCK_AUTOCOMPLETE_BACKENDS = { values: ['mock-backend', 'llama-cpp', 'vllm'] }

test.describe('Model Editor - Interactive Tab', () => {
  test.beforeEach(async ({ page }) => {
    // Mock config metadata
    await page.route('**/api/models/config-metadata*', (route) => {
      route.fulfill({
        contentType: 'application/json',
        body: JSON.stringify(MOCK_METADATA),
      })
    })

    // Mock raw YAML edit endpoint (GET for loading, POST for saving)
    await page.route('**/api/models/edit/mock-model', (route) => {
      if (route.request().method() === 'POST') {
        route.fulfill({
          contentType: 'application/json',
          body: JSON.stringify({ message: 'Configuration file saved' }),
        })
      } else {
        route.fulfill({
          contentType: 'application/json',
          body: JSON.stringify({ config: MOCK_YAML, name: 'mock-model' }),
        })
      }
    })

    // Mock PATCH config-json for interactive save
    await page.route('**/api/models/config-json/mock-model', (route) => {
      if (route.request().method() === 'PATCH') {
        route.fulfill({
          contentType: 'application/json',
          body: JSON.stringify({ success: true, message: "Model 'mock-model' updated successfully" }),
        })
      } else {
        route.fulfill({ contentType: 'application/json', body: '{}' })
      }
    })

    // Mock autocomplete for backends
    await page.route('**/api/models/config-metadata/autocomplete/backends', (route) => {
      route.fulfill({
        contentType: 'application/json',
        body: JSON.stringify(MOCK_AUTOCOMPLETE_BACKENDS),
      })
    })

    await page.goto('/app/model-editor/mock-model')
    // Wait for the page to load
    await expect(page.locator('h1', { hasText: 'Model Editor' })).toBeVisible({ timeout: 10_000 })
  })

  test('page loads and shows model name in header', async ({ page }) => {
    await expect(page.locator('text=mock-model')).toBeVisible()
    await expect(page.locator('h1', { hasText: 'Model Editor' })).toBeVisible()
  })

  test('interactive tab is active by default', async ({ page }) => {
    // The field browser should be visible (interactive tab content)
    await expect(page.locator('input[placeholder="Search fields to add..."]')).toBeVisible()
  })

  test('existing config fields from YAML are populated', async ({ page }) => {
    // The mock YAML has name and backend — they should be active fields
    await expect(page.locator('text=Model Name')).toBeVisible()
    await expect(page.locator('span', { hasText: /^Backend$/ }).first()).toBeVisible()
  })

  test('section sidebar shows sections with active fields', async ({ page }) => {
    const sidebar = page.locator('nav')
    await expect(sidebar.locator('text=General')).toBeVisible()
  })

  test('typing in field browser shows matching fields', async ({ page }) => {
    const searchInput = page.locator('input[placeholder="Search fields to add..."]')
    await searchInput.fill('Temperature')
    await expect(page.locator('text=Temperature').first()).toBeVisible()
  })

  test('clicking a field result adds it to the config', async ({ page }) => {
    const searchInput = page.locator('input[placeholder="Search fields to add..."]')
    await searchInput.fill('Temperature')
    const dropdown = searchInput.locator('..').locator('..')
    await dropdown.locator('div', { hasText: 'Temperature' }).first().click()
    await expect(page.locator('h3', { hasText: 'Parameters' })).toBeVisible()
  })

  test('toggle field renders a toggle switch', async ({ page }) => {
    const searchInput = page.locator('input[placeholder="Search fields to add..."]')
    await searchInput.fill('CUDA')
    const dropdown = searchInput.locator('..').locator('..')
    await dropdown.locator('div', { hasText: 'CUDA' }).first().click()
    await expect(page.locator('text=CUDA').first()).toBeVisible()
    const cudaSection = page.locator('div', { has: page.locator('span', { hasText: /^CUDA$/ }) }).first()
    await expect(cudaSection.locator('input[type="checkbox"]')).toHaveCount(1)
  })

  test('number field renders a numeric input', async ({ page }) => {
    const searchInput = page.locator('input[placeholder="Search fields to add..."]')
    await searchInput.fill('Context Size')
    const dropdown = searchInput.locator('..').locator('..')
    await dropdown.locator('div', { hasText: 'Context Size' }).first().click()
    await expect(page.locator('input[type="number"]')).toBeVisible()
  })

  test('changing a field value enables the Save button', async ({ page }) => {
    const searchInput = page.locator('input[placeholder="Search fields to add..."]')
    await searchInput.fill('Context Size')
    const dropdown = searchInput.locator('..').locator('..')
    await dropdown.locator('div', { hasText: 'Context Size' }).first().click()
    const numberInput = page.locator('input[type="number"]')
    await numberInput.fill('4096')
    await expect(page.locator('button', { hasText: 'Save Changes' })).toBeVisible()
  })

  test('removing a field with X button removes it from the form', async ({ page }) => {
    const searchInput = page.locator('input[placeholder="Search fields to add..."]')
    await searchInput.fill('Temperature')
    const dropdown = searchInput.locator('..').locator('..')
    await dropdown.locator('div', { hasText: 'Temperature' }).first().click()
    const paramsHeader = page.locator('h3', { hasText: 'Parameters' })
    await expect(paramsHeader).toBeVisible()
    const paramsSection = paramsHeader.locator('..')
    await paramsSection.locator('button[title="Remove field"]').first().click()
    await expect(paramsHeader).not.toBeVisible()
  })

  test('save sends PATCH and shows success toast', async ({ page }) => {
    const searchInput = page.locator('input[placeholder="Search fields to add..."]')
    await searchInput.fill('Context Size')
    const dropdown = searchInput.locator('..').locator('..')
    await dropdown.locator('div', { hasText: 'Context Size' }).first().click()
    const numberInput = page.locator('input[type="number"]')
    await numberInput.fill('8192')
    await page.locator('button', { hasText: 'Save Changes' }).click()
    await expect(page.locator('text=Configuration saved')).toBeVisible({ timeout: 5_000 })
  })

  test('added field is no longer shown in field browser results', async ({ page }) => {
    const searchInput = page.locator('input[placeholder="Search fields to add..."]')
    await searchInput.fill('Temperature')
    const dropdown = searchInput.locator('..').locator('..')
    await dropdown.locator('div', { hasText: 'Temperature' }).first().click()
    await searchInput.fill('Temperature')
    await page.waitForTimeout(200)
    const results = dropdown.locator('div[style*="cursor: pointer"]', { hasText: 'Temperature' })
    await expect(results).toHaveCount(0)
  })

  test('switching to YAML tab shows code editor', async ({ page }) => {
    await page.locator('button', { hasText: 'YAML' }).click()
    // The CodeMirror editor should be visible
    await expect(page.locator('.cm-editor').first()).toBeVisible()
    // The field browser should NOT be visible
    await expect(page.locator('input[placeholder="Search fields to add..."]')).not.toBeVisible()
  })

  test('switching back to Interactive tab restores fields', async ({ page }) => {
    // Go to YAML tab
    await page.locator('button', { hasText: 'YAML' }).click()
    await expect(page.locator('input[placeholder="Search fields to add..."]')).not.toBeVisible()
    // Go back to Interactive tab
    await page.locator('button', { hasText: 'Interactive' }).click()
    await expect(page.locator('input[placeholder="Search fields to add..."]')).toBeVisible()
    await expect(page.locator('text=Model Name')).toBeVisible()
  })

  test('shows the estimated VRAM annotation when the model has a context size', async ({ page }) => {
    // Regression: the editor reads the /api/models/vram-estimate response,
    // whose shape is snake_case (vram_display). The hook previously read
    // camelCase (vramDisplay) and silently showed nothing.
    await page.route('**/api/models/edit/mock-model', (route) => {
      route.fulfill({
        contentType: 'application/json',
        body: JSON.stringify({
          config: 'name: mock-model\nbackend: mock-backend\ncontext_size: 4096\nparameters:\n  model: mock-model.bin\n',
          name: 'mock-model',
        }),
      })
    })
    let estimateCalled = false
    await page.route('**/api/models/vram-estimate', (route) => {
      estimateCalled = true
      route.fulfill({
        contentType: 'application/json',
        body: JSON.stringify({
          size_bytes: 4294967296,
          size_display: '4 GiB',
          vram_bytes: 5583457484,
          vram_display: '5.2 GiB',
          context_length: 4096,
        }),
      })
    })

    await page.goto('/app/model-editor/mock-model')
    await expect(page.locator('h1', { hasText: 'Model Editor' })).toBeVisible({ timeout: 10_000 })

    await expect(page.getByText(/~\s*5\.2 GiB VRAM/)).toBeVisible({ timeout: 10_000 })
    expect(estimateCalled).toBe(true)
  })

  test('interactive tab scrolls at body height (no inner overflow pane) and tracks the active section', async ({ page }) => {
    // Regression: the form sections used to live inside an overflow:auto pane
    // with maxHeight: calc(100vh - 340px), which kept the global footer in
    // view on every screen and ate ~50px of editing room on short windows.
    // Pin two pieces of the fix:
    //  1. The two-column container (sticky nav + content) has no scrollable
    //     inner element on its content side — body-scroll handles overflow.
    //  2. The active-section tracker now listens to window scroll. Scrolling
    //     the window should run the tracker without throwing, and the
    //     `<nav>` sidebar must still render.
    const contentOverflowY = await page.evaluate(() => {
      const sidebar = document.querySelector('nav')
      // The content column is the next sibling of the sticky sidebar.
      const content = sidebar?.nextElementSibling
      return content ? getComputedStyle(content).overflowY : 'no-content'
    })
    expect(['visible', 'normal', 'auto', 'scroll', 'no-content']).toContain(contentOverflowY)
    expect(contentOverflowY).not.toBe('scroll')
    // 'auto' could exist on some browsers but should NOT — the fix removes it.
    // We assert the strong invariant separately.
    expect(['auto']).not.toContain(contentOverflowY)

    // Add a couple of fields to give the page a touch more height, then
    // force a window scroll. The tracker should run; the sidebar should
    // remain visible.
    const searchInput = page.locator('input[placeholder="Search fields to add..."]')
    await searchInput.fill('Temperature')
    const dropdown = searchInput.locator('..').locator('..')
    await dropdown.locator('div', { hasText: 'Temperature' }).first().click()
    await page.evaluate(() => window.scrollTo(0, 200))
    await page.waitForTimeout(50)
    await expect(page.locator('nav').first()).toBeVisible()
  })

})