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 <mudler@localai.io>

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: <target>` 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 })
+  })
+})

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() {
                               <i className="fas fa-thumbtack" /> Pinned
                             </span>
                           )}
+                          {aliasTargets[model.id] && (
+                            <span className="badge badge-info" title={`Alias -> ${aliasTargets[model.id]}`}>
+                              <i className="fas fa-arrow-right-arrow-left" /> alias -&gt; {aliasTargets[model.id]}
+                            </span>
+                          )}
                         </div>
                       </td>
                       <td>

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(

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',

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',