feat: add model management module with provider CRUD

- New /models page with provider list (built-in + custom)
- Add provider via preset selection or custom URL with auto-fetch models
- Delete provider removes from auth.json credential_pool + config.yaml custom_providers
- Auto-switch model on add, fallback switch on delete
- Sync sidebar ModelSelector on all provider changes
- Unified provider presets in shared/providers.ts (frontend + backend)
- Backend uses hardcoded catalog first, live probe as fallback

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/models/ProviderCard.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NButton, useMessage, useDialog } from 'naive-ui'
+import type { AvailableModelGroup } from '@/api/system'
+import { useModelsStore } from '@/stores/models'
+
+const props = defineProps<{ provider: AvailableModelGroup }>()
+
+const modelsStore = useModelsStore()
+const message = useMessage()
+const dialog = useDialog()
+
+const isCustom = computed(() => props.provider.provider.startsWith('custom:'))
+const displayName = computed(() => props.provider.label)
+
+async function handleDelete() {
+  dialog.warning({
+    title: 'Delete Provider',
+    content: `Are you sure you want to delete "${displayName.value}"?`,
+    positiveText: 'Delete',
+    negativeText: 'Cancel',
+    onPositiveClick: async () => {
+      try {
+        await modelsStore.removeProvider(props.provider.provider)
+        message.success('Provider deleted')
+      } catch (e: any) {
+        message.error(e.message)
+      }
+    },
+  })
+}
+</script>
+
+<template>
+  <div class="provider-card">
+    <div class="card-header">
+      <h3 class="provider-name">{{ displayName }}</h3>
+      <span class="type-badge" :class="isCustom ? 'custom' : 'builtin'">
+        {{ isCustom ? 'Custom' : 'Built-in' }}
+      </span>
+    </div>
+
+    <div class="card-body">
+      <div class="info-row">
+        <span class="info-label">Provider</span>
+        <code class="info-value mono">{{ provider.provider }}</code>
+      </div>
+      <div class="info-row">
+        <span class="info-label">Base URL</span>
+        <code class="info-value mono">{{ provider.base_url }}</code>
+      </div>
+    </div>
+
+    <div class="card-actions">
+      <NButton size="tiny" quaternary type="error" @click="handleDelete">Delete</NButton>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as *;
+
+.provider-card {
+  background-color: $bg-card;
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  padding: 16px;
+  transition: border-color $transition-fast;
+
+  &:hover {
+    border-color: rgba($accent-primary, 0.3);
+  }
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.provider-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: $text-primary;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 70%;
+}
+
+.type-badge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 500;
+
+  &.builtin {
+    background: rgba($accent-primary, 0.12);
+    color: $accent-primary;
+  }
+
+  &.custom {
+    background: rgba($success, 0.12);
+    color: $success;
+  }
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.info-label {
+  font-size: 12px;
+  color: $text-muted;
+}
+
+.info-value {
+  font-size: 12px;
+  color: $text-secondary;
+}
+
+.mono {
+  font-family: $font-code;
+  font-size: 12px;
+}
+
+.card-actions {
+  display: flex;
+  gap: 8px;
+  border-top: 1px solid $border-light;
+  padding-top: 10px;
+}
+</style>