From 00996ec27e3b115c027a5dcb0bd8adb4b86f79f6 Mon Sep 17 00:00:00 2001 From: Ettore Di Giacinto Date: Sat, 20 Jun 2026 10:25:22 +0000 Subject: [PATCH] feat(ui): add alias template card and Manage alias badge Add an 'Alias / Routing' template to the create-flow gallery that seeds a minimal name + alias config, and a read-only 'alias -> target' badge on the Manage Models tab. The capabilities row payload does not carry the alias field, so the badge resolves targets from GET /api/aliases looked up by name. Assisted-by: Claude:claude-opus-4 [Claude Code] Signed-off-by: Ettore Di Giacinto --- core/http/react-ui/e2e/alias-template.spec.js | 77 +++++++++++++++++++ core/http/react-ui/src/pages/Manage.jsx | 23 +++++- core/http/react-ui/src/utils/api.js | 1 + core/http/react-ui/src/utils/config.js | 1 + .../http/react-ui/src/utils/modelTemplates.js | 10 +++ 5 files changed, 111 insertions(+), 1 deletion(-) create mode 100644 core/http/react-ui/e2e/alias-template.spec.js diff --git a/core/http/react-ui/e2e/alias-template.spec.js b/core/http/react-ui/e2e/alias-template.spec.js new file mode 100644 index 000000000..f3b1a0ca0 --- /dev/null +++ b/core/http/react-ui/e2e/alias-template.spec.js @@ -0,0 +1,77 @@ +import { test, expect } from './coverage-fixtures.js' + +// Alias / Routing template + Manage alias badge regression tests. +// +// An alias is a model config with `alias: ` that redirects traffic to +// the target model. This covers the two discoverability surfaces: +// - the create-flow template gallery exposes an "Alias / Routing" card that +// seeds a minimal name + alias config +// - the Manage Models tab renders a read-only "alias -> target" badge on +// rows that resolve to an alias (looked up via GET /api/aliases, since the +// capabilities row payload doesn't carry the alias field) + +// Minimal metadata so the editor renders the alias field once the template +// loads. Mirrors the Task 7 config-meta registry, which surfaces `alias` as a +// model-select component. +const ALIAS_METADATA = { + sections: [ + { id: 'general', label: 'General', icon: 'settings', order: 0 }, + { id: 'other', label: 'Other', icon: 'more-horizontal', order: 100 }, + ], + fields: [ + { path: 'name', yaml_key: 'name', go_type: 'string', ui_type: 'string', + section: 'general', label: 'Model Name', component: 'input', order: 0 }, + { path: 'alias', yaml_key: 'alias', go_type: 'string', ui_type: 'string', + section: 'general', label: 'Alias', component: 'model-select', autocomplete_provider: 'models', + description: 'Redirect this model name to another configured model.', order: 1 }, + ], +} + +test.describe('Alias template - create flow', () => { + test.beforeEach(async ({ page }) => { + await page.route('**/api/auth/status', (route) => + route.fulfill({ contentType: 'application/json', body: JSON.stringify({ authEnabled: false, staticApiKeyRequired: false, providers: [] }) })) + await page.route('**/api/models/config-metadata*', (route) => + route.fulfill({ contentType: 'application/json', body: JSON.stringify(ALIAS_METADATA) })) + await page.route('**/api/models/config-metadata/autocomplete/**', (route) => + route.fulfill({ contentType: 'application/json', body: JSON.stringify({ values: [] }) })) + + page.on('pageerror', (err) => { + throw new Error(`uncaught page error: ${err.message}`) + }) + }) + + test('template gallery exposes the Alias / Routing card', async ({ page }) => { + await page.goto('/app/model-editor') + await expect(page.getByRole('button', { name: /Alias \/ Routing/i })).toBeVisible({ timeout: 10_000 }) + }) + + test('alias template loads the editor with the alias field', async ({ page }) => { + await page.goto('/app/model-editor?template=alias') + await expect(page.getByText(/Unexpected Application Error/i)).toHaveCount(0) + await expect(page.locator('h1.page-title')).toBeVisible({ timeout: 10_000 }) + await expect(page.getByText('Alias').first()).toBeVisible() + }) +}) + +test.describe('Manage - alias badge', () => { + test.beforeEach(async ({ page }) => { + await page.route('**/api/auth/status', (route) => + route.fulfill({ contentType: 'application/json', body: JSON.stringify({ authEnabled: false, staticApiKeyRequired: false, providers: [] }) })) + await page.route('**/api/models/capabilities', (route) => + route.fulfill({ contentType: 'application/json', body: JSON.stringify({ data: [ + { id: 'fast-llm', capabilities: ['chat'], backend: 'llama-cpp' }, + { id: 'gpt-4', capabilities: ['chat'], backend: 'llama-cpp' }, + ] }) })) + await page.route('**/api/aliases', (route) => + route.fulfill({ contentType: 'application/json', body: JSON.stringify([{ name: 'gpt-4', target: 'fast-llm' }]) })) + }) + + test('renders a read-only alias -> target badge on aliased rows', async ({ page }) => { + await page.goto('/app/manage') + await expect(page.locator('.table')).toBeVisible({ timeout: 10_000 }) + + // The aliased row shows the target; the plain model row does not. + await expect(page.getByText('alias -> fast-llm')).toBeVisible({ timeout: 10_000 }) + }) +}) diff --git a/core/http/react-ui/src/pages/Manage.jsx b/core/http/react-ui/src/pages/Manage.jsx index 48d18c33c..16d04f709 100644 --- a/core/http/react-ui/src/pages/Manage.jsx +++ b/core/http/react-ui/src/pages/Manage.jsx @@ -133,6 +133,10 @@ export default function Manage() { const { enrichModel, enrichBackend } = useGalleryEnrichment() const { operations } = useOperations() const [loadedModelIds, setLoadedModelIds] = useState(new Set()) + // Map of alias name -> target. The capabilities endpoint that feeds the row + // list doesn't carry the alias field, so we fetch it once and look rows up by + // name to render the read-only "alias -> target" badge. + const [aliasTargets, setAliasTargets] = useState({}) const [backends, setBackends] = useState([]) const [backendsLoading, setBackendsLoading] = useState(true) const [reloading, setReloading] = useState(false) @@ -228,12 +232,24 @@ export default function Manage() { } }, []) + const fetchAliases = useCallback(async () => { + try { + const data = await modelsApi.listAliases() + const map = {} + for (const a of Array.isArray(data) ? data : []) map[a.name] = a.target + setAliasTargets(map) + } catch { + setAliasTargets({}) + } + }, []) + useEffect(() => { fetchLoadedModels() fetchBackends() + fetchAliases() // Detect distributed mode (nodes API returns 503 when not enabled) nodesApi.list().then(() => setDistributedMode(true)).catch(() => {}) - }, [fetchLoadedModels, fetchBackends]) + }, [fetchLoadedModels, fetchBackends, fetchAliases]) // Auto-refresh the Models tab every 10s in distributed mode so ghost models // (loaded on a worker but absent from this frontend's in-memory cache) @@ -636,6 +652,11 @@ export default function Manage() { Pinned )} + {aliasTargets[model.id] && ( + ${aliasTargets[model.id]}`}> + alias -> {aliasTargets[model.id]} + + )} diff --git a/core/http/react-ui/src/utils/api.js b/core/http/react-ui/src/utils/api.js index a8ffa2f04..20bb90363 100644 --- a/core/http/react-ui/src/utils/api.js +++ b/core/http/react-ui/src/utils/api.js @@ -84,6 +84,7 @@ export const modelsApi = { list: (params) => fetchJSON(buildUrl(API_CONFIG.endpoints.models, params)), listV1: () => fetchJSON(API_CONFIG.endpoints.modelsList), listCapabilities: () => fetchJSON(API_CONFIG.endpoints.modelsCapabilities), + listAliases: () => fetchJSON(API_CONFIG.endpoints.modelsAliases), install: (id) => postJSON(API_CONFIG.endpoints.installModel(id), {}), delete: (id) => postJSON(API_CONFIG.endpoints.deleteModel(id), {}), estimate: (id, contexts) => fetchJSON( diff --git a/core/http/react-ui/src/utils/config.js b/core/http/react-ui/src/utils/config.js index cf83d590f..65797fe41 100644 --- a/core/http/react-ui/src/utils/config.js +++ b/core/http/react-ui/src/utils/config.js @@ -95,6 +95,7 @@ export const API_CONFIG = { modelsList: '/v1/models', modelsCapabilities: '/api/models/capabilities', + modelsAliases: '/api/aliases', // Realtime / WebRTC realtimeCalls: '/v1/realtime/calls', diff --git a/core/http/react-ui/src/utils/modelTemplates.js b/core/http/react-ui/src/utils/modelTemplates.js index 54d34aecc..c3675f9db 100644 --- a/core/http/react-ui/src/utils/modelTemplates.js +++ b/core/http/react-ui/src/utils/modelTemplates.js @@ -142,6 +142,16 @@ const MODEL_TEMPLATES = [ ], }, }, + { + id: 'alias', + label: 'Alias / Routing', + icon: 'fa-arrow-right-arrow-left', + description: 'Point a model name at another configured model. Clients keep calling the alias; you swap the target anytime.', + fields: { + 'name': '', + 'alias': '', + }, + }, { id: 'mitm', label: 'MITM Intercept',