Release v2.12.0

- Add naming validation rules (provider name, model ID, displayName)
- Frontend real-time validation with error hints on Settings form
- Rename project to LLM API Bench
- Fix Playground history: show providerName/displayName, not raw ID
- Fix flash issues: Getting Started hint, provider/model selectors
- Adaptive QuickButtons sizing for many options

Author: idemerge

CHANGELOG.md

@@ -4,6 +4,28 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/), and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [2.12.0] - 2026-04-28
+
+### Added
+- Naming validation rules for Provider name, Model ID, and DisplayName (backend + frontend)
+  - Provider name: alphanumeric/dash/underscore, no spaces, 1-64 chars
+  - Model ID: alphanumeric/dash/underscore/dot/slash, 1-64 chars (LiteLLM compatible)
+  - DisplayName: alphanumeric/space/dash/underscore/dot, 1-64 chars
+- Frontend real-time validation with error hints on Settings provider form
+- Frontend validation unit tests (16 cases)
+- Backend validation boundary tests (4 cases)
+
+### Changed
+- Renamed project from LLM API Radar to **LLM API Bench** (repo, UI, docs, Docker image)
+- Playground history sidebar now shows `ProviderName/DisplayName` instead of raw model ID
+- Backend stores model displayName in playground history for friendly display
+- Adaptive QuickButtons sizing: auto-shrink when >7 options to prevent line wrapping
+
+### Fixed
+- Getting Started hint no longer flashes on page refresh (waits for data load)
+- Playground provider/model selectors no longer flash raw IDs before names load
+- Playground history correctly resolves model displayName from provider data
+
 ## [2.11.3] - 2026-04-28
 
 ### Changed

backend/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "llm-benchmark-backend",
-  "version": "2.11.3",
+  "version": "2.12.0",
   "description": "LLM API Bench - Backend",
   "main": "dist/index.js",
   "scripts": {

backend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "2.11.3",
+  "version": "2.12.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/package-lock.json

@@ -5,6 +5,7 @@ import { useProviders } from '../hooks/useProviders';
 import { Button, Input, InputNumber, Select, Checkbox, Popconfirm, Alert, Tag, Modal } from '../antdImports';
 import { PlusOutlined, ApiOutlined } from '@ant-design/icons';
 import { APP_VERSION } from '../constants';
+import { validateProviderName, validateModelId, validateDisplayName } from '../utils/validation';
 
 const FORMAT_OPTIONS: { value: ProviderFormat; label: string }[] = [
   { value: 'openai', label: 'OpenAI Compatible' },
@@ -165,12 +166,18 @@ export function SettingsPage() {
     }));
   };
 
+  const providerNameError = validateProviderName(form.name.trim());
+  const modelErrors = form.models.map((m) => ({
+    name: validateModelId(m.name.trim()),
+    displayName: validateDisplayName(m.displayName.trim()),
+  }));
+
   const isFormValid =
-    form.name.trim() &&
+    !providerNameError &&
     form.endpoint.trim() &&
     (editingId || form.apiKey.trim()) &&
     form.models.length > 0 &&
-    form.models.every((m) => m.name.trim());
+    modelErrors.every((e) => !e.name && !e.displayName);
 
   const isNameDuplicate =
     form.name.trim() &&
@@ -369,14 +376,17 @@ export function SettingsPage() {
               <div>
                 <label className="text-[11px] text-text-secondary mb-1 block">Provider Name</label>
                 <Input
-                  placeholder="e.g. My OpenAI"
+                  placeholder="e.g. My-OpenAI"
                   value={form.name}
-                  status={isNameDuplicate ? 'error' : undefined}
+                  status={isNameDuplicate || (form.name && providerNameError) ? 'error' : undefined}
                   onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
                 />
                 {isNameDuplicate && (
                   <span className="text-[10px] text-accent-rose mt-0.5 block">Provider name already exists</span>
                 )}
+                {!isNameDuplicate && form.name && providerNameError && (
+                  <span className="text-[10px] text-accent-rose mt-0.5 block">{providerNameError}</span>
+                )}
               </div>
               <div>
                 <label className="text-[11px] text-text-secondary mb-1 block">Format</label>
@@ -464,17 +474,27 @@ export function SettingsPage() {
                           size="small"
                           placeholder="e.g. gpt-4o"
                           value={model.name}
+                          status={model.name && modelErrors[idx]?.name ? 'error' : undefined}
                           onChange={(e) => updateModel(idx, 'name', e.target.value)}
                         />
+                        {model.name && modelErrors[idx]?.name && (
+                          <span className="text-[9px] text-accent-rose mt-0.5 block">{modelErrors[idx].name}</span>
+                        )}
                       </div>
                       <div>
                         <label className="text-[10px] text-text-tertiary mb-0.5 block">Display Name</label>
                         <Input
                           size="small"
                           placeholder="e.g. GPT-4o (optional)"
                           value={model.displayName}
+                          status={model.displayName && modelErrors[idx]?.displayName ? 'error' : undefined}
                           onChange={(e) => updateModel(idx, 'displayName', e.target.value)}
                         />
+                        {model.displayName && modelErrors[idx]?.displayName && (
+                          <span className="text-[9px] text-accent-rose mt-0.5 block">
+                            {modelErrors[idx].displayName}
+                          </span>
+                        )}
                       </div>
                     </div>
                     <div>

frontend/package.json

@@ -0,0 +1,87 @@
+import { describe, it, expect } from 'vitest';
+import { validateProviderName, validateModelId, validateDisplayName } from './validation';
+
+describe('validateProviderName', () => {
+  it('accepts valid names', () => {
+    expect(validateProviderName('OpenAI')).toBeNull();
+    expect(validateProviderName('ZAI-CN-OpenAI')).toBeNull();
+    expect(validateProviderName('my_provider')).toBeNull();
+    expect(validateProviderName('a')).toBeNull();
+    expect(validateProviderName('A'.repeat(64))).toBeNull();
+  });
+
+  it('rejects empty', () => {
+    expect(validateProviderName('')).not.toBeNull();
+  });
+
+  it('rejects spaces', () => {
+    expect(validateProviderName('My Provider')).not.toBeNull();
+  });
+
+  it('rejects dots', () => {
+    expect(validateProviderName('provider.name')).not.toBeNull();
+  });
+
+  it('rejects over 64 chars', () => {
+    expect(validateProviderName('A'.repeat(65))).not.toBeNull();
+  });
+
+  it('rejects starting with non-alphanumeric', () => {
+    expect(validateProviderName('-provider')).not.toBeNull();
+    expect(validateProviderName('_provider')).not.toBeNull();
+  });
+});
+
+describe('validateModelId', () => {
+  it('accepts valid IDs', () => {
+    expect(validateModelId('gpt-4o')).toBeNull();
+    expect(validateModelId('glm-5.1')).toBeNull();
+    expect(validateModelId('z-ai/glm-4.7')).toBeNull();
+    expect(validateModelId('claude-3.5-sonnet')).toBeNull();
+    expect(validateModelId('a'.repeat(64))).toBeNull();
+  });
+
+  it('rejects empty', () => {
+    expect(validateModelId('')).not.toBeNull();
+  });
+
+  it('rejects spaces', () => {
+    expect(validateModelId('gpt 4o')).not.toBeNull();
+  });
+
+  it('rejects over 64 chars', () => {
+    expect(validateModelId('a'.repeat(65))).not.toBeNull();
+  });
+
+  it('rejects starting with non-alphanumeric', () => {
+    expect(validateModelId('/vendor/model')).not.toBeNull();
+    expect(validateModelId('.hidden')).not.toBeNull();
+  });
+});
+
+describe('validateDisplayName', () => {
+  it('returns null for empty (optional)', () => {
+    expect(validateDisplayName('')).toBeNull();
+  });
+
+  it('accepts valid display names', () => {
+    expect(validateDisplayName('GLM 5.1')).toBeNull();
+    expect(validateDisplayName('Gemini 2.5 Flash-Lite')).toBeNull();
+    expect(validateDisplayName('DeepSeek-V3.2')).toBeNull();
+    expect(validateDisplayName('A'.repeat(64))).toBeNull();
+  });
+
+  it('rejects special characters', () => {
+    expect(validateDisplayName('name@test')).not.toBeNull();
+    expect(validateDisplayName('name<script>')).not.toBeNull();
+  });
+
+  it('rejects over 64 chars', () => {
+    expect(validateDisplayName('A'.repeat(65))).not.toBeNull();
+  });
+
+  it('rejects starting with non-alphanumeric', () => {
+    expect(validateDisplayName(' GLM 5')).not.toBeNull();
+    expect(validateDisplayName('-Model')).not.toBeNull();
+  });
+});

frontend/src/components/SettingsPage.tsx

@@ -0,0 +1,31 @@
+/**
+ * Shared naming validation rules — mirrors backend schemas.ts.
+ * Used for real-time input feedback in the UI.
+ */
+
+// Provider name: alphanumeric, dash, underscore, NO spaces, 1-64 chars
+const PROVIDER_NAME_RE = /^[a-zA-Z0-9][a-zA-Z0-9_-]{0,63}$/;
+
+// Model ID: alphanumeric, dash, underscore, dot, slash (LiteLLM vendor/model), 1-64 chars
+const MODEL_ID_RE = /^[a-zA-Z0-9][a-zA-Z0-9._/-]{0,63}$/;
+
+// Display name: alphanumeric, space, dash, underscore, dot, 1-64 chars
+const DISPLAY_NAME_RE = /^[a-zA-Z0-9][a-zA-Z0-9 ._-]{0,63}$/;
+
+export function validateProviderName(value: string): string | null {
+  if (!value) return 'Provider name is required';
+  if (!PROVIDER_NAME_RE.test(value)) return '1-64 chars: letters, digits, dash, underscore. No spaces.';
+  return null;
+}
+
+export function validateModelId(value: string): string | null {
+  if (!value) return 'Model ID is required';
+  if (!MODEL_ID_RE.test(value)) return '1-64 chars: letters, digits, dash, underscore, dot, slash.';
+  return null;
+}
+
+export function validateDisplayName(value: string): string | null {
+  if (!value) return null; // optional
+  if (!DISPLAY_NAME_RE.test(value)) return '1-64 chars: letters, digits, space, dash, underscore, dot.';
+  return null;
+}