diff --git a/web/src/assets/defaults/agent.png b/web/src/assets/defaults/agent.png
new file mode 100644
index 00000000..d21e957d
Binary files /dev/null and b/web/src/assets/defaults/agent.png differ
diff --git a/web/src/components/model-management/AgentManagePanel.vue b/web/src/components/model-management/AgentManagePanel.vue
new file mode 100644
index 00000000..3fe09f5b
--- /dev/null
+++ b/web/src/components/model-management/AgentManagePanel.vue
@@ -0,0 +1,1006 @@
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { message, Modal } from 'ant-design-vue'
+import {
+  Plus,
+  RefreshCw,
+  Trash2,
+  Edit3,
+  Bot,
+  Microscope,
+  MoreVertical,
+  Upload,
+  Info,
+  SlidersHorizontal,
+  Wrench,
+  MoreHorizontal
+} from 'lucide-vue-next'
+
+import { agentApi } from '@/apis/agent_api'
+import { userApi } from '@/apis/user_api'
+import AgentRuntimeConfigForm from '@/components/AgentRuntimeConfigForm.vue'
+import ShareConfigForm from '@/components/ShareConfigForm.vue'
+import { isBuiltinAgent, useAgentStore } from '@/stores/agent'
+import { useUserStore } from '@/stores/user'
+import PageShoulder from '@/components/shared/PageShoulder.vue'
+import InfoCard from '@/components/shared/InfoCard.vue'
+import ExtensionCardGrid from '@/components/extensions/ExtensionCardGrid.vue'
+import defaultAgentIcon from '@/assets/defaults/agent.png'
+import { MAX_IMAGE_UPLOAD_SIZE_BYTES, MAX_IMAGE_UPLOAD_SIZE_MB } from '@/utils/upload_limits'
+
+const userStore = useUserStore()
+const agentStore = useAgentStore()
+const agentLoading = ref(false)
+const saving = ref(false)
+const searchQuery = ref('')
+
+const agentBackendOptions = ref([])
+
+const showAgentModal = ref(false)
+const editingAgentId = ref(null)
+const agentModalActiveTab = ref('basic')
+const agentIconUploading = ref(false)
+const agentShareConfigFormRef = ref(null)
+const runtimeConfigFormRef = ref(null)
+const agentShareConfig = ref({ access_level: 'user', department_ids: [], user_uids: [] })
+const agentForm = reactive({
+  slug: '',
+  name: '',
+  backend_id: 'ChatbotAgent',
+  description: '',
+  icon: ''
+})
+
+const runtimeAgentModalTabs = ['model', 'tools', 'other']
+const agentModalMenuItems = computed(() => {
+  const items = [{ key: 'basic', label: '基本信息', icon: Info }]
+  if (editingAgentId.value) {
+    items.push(
+      { key: 'model', label: '模型配置', icon: SlidersHorizontal },
+      { key: 'tools', label: '工具配置', icon: Wrench },
+      { key: 'other', label: '其他配置', icon: MoreHorizontal }
+    )
+  }
+  return items
+})
+const runtimeConfigSegment = computed(() =>
+  runtimeAgentModalTabs.includes(agentModalActiveTab.value) ? agentModalActiveTab.value : 'model'
+)
+const isRuntimeAgentModalTab = (key) => runtimeAgentModalTabs.includes(key)
+
+const filteredAgents = computed(() => {
+  const keyword = searchQuery.value.trim().toLowerCase()
+  const list = agentStore.agents || []
+  const filtered = keyword
+    ? list.filter(
+        (agent) =>
+          String(agent.name || '').toLowerCase().includes(keyword) ||
+          String(agent.id || '').toLowerCase().includes(keyword) ||
+          String(agent.backend_id || '').toLowerCase().includes(keyword)
+      )
+    : list
+  return [...filtered].sort((a, b) => {
+    if (isBuiltinAgent(a) !== isBuiltinAgent(b)) return isBuiltinAgent(a) ? -1 : 1
+    return String(a.name || a.id).localeCompare(String(b.name || b.id), 'zh-CN')
+  })
+})
+
+const agentStats = computed(() => ({
+  total: agentStore.agents.length,
+  builtin: agentStore.agents.filter(isBuiltinAgent).length,
+  manageable: agentStore.agents.filter((agent) => agent.can_manage).length,
+  global: agentStore.agents.filter((agent) => agent.share_config?.access_level === 'global').length
+}))
+const getDefaultBackendId = () => agentBackendOptions.value[0]?.value || 'ChatbotAgent'
+
+const getInitialShareConfig = () => ({
+  access_level: userStore.isAdmin ? 'global' : 'user',
+  department_ids: [],
+  user_uids: userStore.uid ? [userStore.uid] : []
+})
+
+const normalizeShareConfigForPayload = () => {
+  if (isBuiltinAgent({ id: editingAgentId.value })) {
+    return { access_level: 'global', department_ids: [], user_uids: [] }
+  }
+  const config = agentShareConfig.value || getInitialShareConfig()
+  const accessLevel = userStore.isAdmin ? config.access_level : 'user'
+  return {
+    access_level: accessLevel,
+    department_ids: accessLevel === 'department' ? config.department_ids || [] : [],
+    user_uids: accessLevel === 'user' ? config.user_uids || [] : []
+  }
+}
+
+const isEditingBuiltinAgent = computed(() => isBuiltinAgent({ id: editingAgentId.value }))
+const canEditAgentShareConfig = computed(() => !isEditingBuiltinAgent.value)
+const getAgentShareAllowedLevels = () => {
+  if (isEditingBuiltinAgent.value) return ['global']
+  return userStore.isAdmin ? ['global', 'department', 'user'] : ['user']
+}
+
+const canManageAgent = (agent) => !!agent?.can_manage
+const agentModalTitle = computed(() => (editingAgentId.value ? '编辑智能体' : '新增智能体'))
+const getAgentIconSrc = (agent) => agent?.icon || defaultAgentIcon
+const agentPreviewIcon = computed(() => agentForm.icon?.trim() || defaultAgentIcon)
+const selectedBackendOption = computed(() =>
+  agentBackendOptions.value.find((backend) => backend.value === agentForm.backend_id)
+)
+const selectedBackendLabel = computed(() => selectedBackendOption.value?.label || agentForm.backend_id || '未选择')
+const selectedBackendIcon = computed(() => {
+  const backendText = `${agentForm.backend_id} ${selectedBackendLabel.value}`.toLowerCase()
+  return backendText.includes('deep') || backendText.includes('search') ? Microscope : Bot
+})
+
+// ============ Agent Operations ============
+const loadAgentBackends = async () => {
+  try {
+    const response = await agentApi.getAgentBackends()
+    agentBackendOptions.value = (response.backends || []).map((backend) => ({
+      label: backend.name || backend.backend_id,
+      value: backend.backend_id
+    }))
+  } catch (error) {
+    message.error(error.message || '加载智能体后端失败')
+  }
+}
+
+const loadAgents = async () => {
+  agentLoading.value = true
+  try {
+    await agentStore.fetchAgents()
+  } catch (error) {
+    message.error(error.message || '加载智能体失败')
+  } finally {
+    agentLoading.value = false
+  }
+}
+
+const resetAgentForm = () => {
+  Object.assign(agentForm, {
+    slug: '',
+    name: '',
+    backend_id: getDefaultBackendId(),
+    description: '',
+    icon: ''
+  })
+  agentShareConfig.value = getInitialShareConfig()
+}
+
+const openCreateAgentModal = () => {
+  editingAgentId.value = null
+  agentModalActiveTab.value = 'basic'
+  resetAgentForm()
+  agentStore.resetAgentConfig()
+  showAgentModal.value = true
+}
+
+const openEditAgentModal = async (agent) => {
+  if (!canManageAgent(agent)) return
+  const detail = await agentStore.fetchAgentDetail(agent.id, true)
+  editingAgentId.value = detail.id
+  agentModalActiveTab.value = 'basic'
+  Object.assign(agentForm, {
+    slug: detail.id || detail.slug || '',
+    name: detail.name || '',
+    backend_id: detail.backend_id || 'ChatbotAgent',
+    description: detail.description || '',
+    icon: detail.icon || ''
+  })
+  agentShareConfig.value = isBuiltinAgent(detail)
+    ? { access_level: 'global', department_ids: [], user_uids: [] }
+    : detail.share_config || getInitialShareConfig()
+  await agentStore.selectAgent(detail.id)
+  showAgentModal.value = true
+}
+
+const closeAgentModal = () => {
+  if (saving.value || agentIconUploading.value) return
+  showAgentModal.value = false
+}
+
+const beforeAgentIconUpload = (file) => {
+  if (!file.type.startsWith('image/')) {
+    message.error('只能上传图片文件')
+    return false
+  }
+
+  if (file.size > MAX_IMAGE_UPLOAD_SIZE_BYTES) {
+    message.error(`图片大小不能超过 ${MAX_IMAGE_UPLOAD_SIZE_MB}MB`)
+    return false
+  }
+
+  uploadAgentIcon(file)
+  return false
+}
+
+const uploadAgentIcon = async (file) => {
+  agentIconUploading.value = true
+  try {
+    const data = await userApi.uploadImage(file)
+    agentForm.icon = data.image_url || data.url || ''
+    message.success('图标上传成功')
+  } catch (error) {
+    message.error(error.message || '图标上传失败')
+  } finally {
+    agentIconUploading.value = false
+  }
+}
+
+const buildAgentPayload = () => {
+  const payload = {
+    name: agentForm.name.trim(),
+    description: agentForm.description.trim() || null,
+    icon: agentForm.icon.trim() || null,
+    share_config: normalizeShareConfigForPayload()
+  }
+
+  if (!editingAgentId.value) {
+    payload.slug = agentForm.slug.trim() || undefined
+    payload.backend_id = agentForm.backend_id
+  }
+
+  return payload
+}
+
+const saveAgent = async () => {
+  if (!agentForm.name.trim()) {
+    agentModalActiveTab.value = 'basic'
+    message.error('请填写智能体名称')
+    return
+  }
+
+  const validation = canEditAgentShareConfig.value ? agentShareConfigFormRef.value?.validate?.() : null
+  if (validation && !validation.valid) {
+    agentModalActiveTab.value = 'basic'
+    message.error(validation.message)
+    return
+  }
+
+  saving.value = true
+  try {
+    const payload = buildAgentPayload()
+    if (editingAgentId.value) {
+      const validatedConfig = runtimeConfigFormRef.value?.validateAndFilterConfig?.()
+      if (validatedConfig && JSON.stringify(validatedConfig) !== JSON.stringify(agentStore.agentConfig)) {
+        agentStore.updateAgentConfig(validatedConfig)
+      }
+      if (agentStore.hasConfigChanges) {
+        payload.config_json = { context: agentStore.agentConfig }
+      }
+      await agentStore.updateAgentProfile(editingAgentId.value, payload)
+      agentStore.originalAgentConfig = { ...agentStore.agentConfig }
+      message.success('智能体已保存')
+    } else {
+      await agentStore.createAgent(payload)
+      message.success('智能体已创建')
+    }
+    showAgentModal.value = false
+  } catch (error) {
+    message.error(error.message || '保存智能体失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+const deleteAgent = async (agent) => {
+  if (isBuiltinAgent(agent)) {
+    message.warning('内置智能体不能删除')
+    return
+  }
+  Modal.confirm({
+    title: `删除 ${agent.name}`,
+    content: '删除后不可恢复，已绑定该智能体的历史对话仍保留原始绑定信息。',
+    okText: '删除',
+    okType: 'danger',
+    cancelText: '取消',
+    async onOk() {
+      try {
+        await agentStore.deleteAgent(agent.id)
+        message.success('智能体已删除')
+      } catch (error) {
+        message.error(error.message || '删除智能体失败')
+      }
+    }
+  })
+}
+
+onMounted(async () => {
+  await Promise.all([loadAgentBackends(), loadAgents()])
+})
+
+defineExpose({
+  loading: agentLoading,
+  stats: agentStats,
+  refresh: loadAgents
+})
+</script>
+
+<template>
+  <div class="agent-manage-panel">
+        <PageShoulder v-model:search="searchQuery" search-placeholder="搜索智能体...">
+          <template #actions>
+            <a-button type="primary" class="lucide-icon-btn" @click="openCreateAgentModal">
+              <Plus :size="14" />
+              新增智能体
+            </a-button>
+            <a-button class="lucide-icon-btn" @click="loadAgents" :loading="agentLoading">
+              <RefreshCw :size="14" :class="{ spinning: agentLoading }" />
+            </a-button>
+          </template>
+        </PageShoulder>
+
+        <ExtensionCardGrid :min-width="320">
+          <InfoCard
+            v-for="agent in filteredAgents"
+            :key="agent.id"
+            :title="agent.name"
+            :subtitle="agent.slug || agent.id"
+            :description="agent.description || '暂无描述'"
+            :default-icon="Bot"
+            :tags="agent.backend_id ? [{ name: agent.backend_id, color: 'blue' }] : []"
+            class="config-card agent-card"
+            @click="canManageAgent(agent) && openEditAgentModal(agent)"
+          >
+            <template #icon>
+              <img
+                class="agent-card-icon-image"
+                :src="getAgentIconSrc(agent)"
+                :alt="`${agent.name || '智能体'}图标`"
+              />
+            </template>
+
+            <template #status>
+              <a-dropdown v-if="canManageAgent(agent)" :trigger="['click']" placement="bottomRight">
+                <template #overlay>
+                  <a-menu>
+                    <a-menu-item key="edit" @click.stop="openEditAgentModal(agent)">
+                      <span class="agent-card-menu-item">
+                        <Edit3 :size="14" />
+                        编辑智能体
+                      </span>
+                    </a-menu-item>
+                    <a-menu-item
+                      key="delete"
+                      :disabled="isBuiltinAgent(agent)"
+                      @click.stop="deleteAgent(agent)"
+                    >
+                      <span class="agent-card-menu-item" :class="{ danger: !isBuiltinAgent(agent) }">
+                        <Trash2 :size="14" />
+                        删除智能体
+                      </span>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+                <a-button
+                  type="text"
+                  size="small"
+                  class="agent-card-menu-trigger"
+                  aria-label="智能体操作"
+                  @click.stop
+                >
+                  <MoreVertical :size="16" />
+                </a-button>
+              </a-dropdown>
+            </template>
+          </InfoCard>
+        </ExtensionCardGrid>
+
+    <!-- Agent Edit Modal -->
+    <a-modal
+      v-model:open="showAgentModal"
+      class="agent-edit-modal"
+      :width="920"
+      :footer="null"
+      :closable="false"
+      @cancel="closeAgentModal"
+    >
+      <template #title>
+        <div class="agent-modal-titlebar">
+          <span class="agent-modal-title">{{ agentModalTitle }}</span>
+          <div class="agent-modal-actions">
+            <a-button :disabled="saving" @click="closeAgentModal">取消</a-button>
+            <a-button type="primary" :loading="saving" @click="saveAgent">保存</a-button>
+          </div>
+        </div>
+      </template>
+      <div class="agent-modal-content">
+        <aside class="agent-modal-sidebar" aria-label="智能体配置分组">
+          <button
+            v-for="item in agentModalMenuItems"
+            :key="item.key"
+            type="button"
+            class="agent-modal-nav-item"
+            :class="{ active: agentModalActiveTab === item.key }"
+            @click="agentModalActiveTab = item.key"
+          >
+            <span class="nav-item-main">
+              <component :is="item.icon" :size="16" />
+              <span>{{ item.label }}</span>
+            </span>
+            <span v-if="item.key === 'model' && agentStore.hasConfigChanges" class="nav-dirty-dot" />
+          </button>
+        </aside>
+
+        <div class="agent-modal-main">
+          <section v-show="agentModalActiveTab === 'basic'" class="agent-modal-section">
+            <div class="agent-profile-header">
+              <div class="agent-icon-preview" aria-label="智能体图标、名称与后端">
+                <div class="agent-profile-main">
+                  <a-upload
+                    :show-upload-list="false"
+                    :before-upload="beforeAgentIconUpload"
+                    :disabled="agentIconUploading"
+                    accept="image/*"
+                  >
+                    <div class="agent-icon-upload" :class="{ uploading: agentIconUploading }">
+                      <img :src="agentPreviewIcon" :alt="`${agentForm.name || '智能体'}图标`" />
+                      <div class="agent-icon-mask">
+                        <RefreshCw v-if="agentIconUploading" :size="14" class="spinning" />
+                        <Upload v-else :size="14" />
+                        <span>{{ agentForm.icon ? '更换' : '上传' }}</span>
+                      </div>
+                    </div>
+                  </a-upload>
+                  <div class="agent-icon-preview-text">
+                    <input
+                      v-model="agentForm.name"
+                      class="agent-inline-name-input"
+                      type="text"
+                      placeholder="点击输入智能体名称"
+                      aria-label="智能体名称"
+                    />
+                    <input
+                      v-if="!editingAgentId"
+                      v-model="agentForm.slug"
+                      class="agent-inline-slug-input"
+                      type="text"
+                      placeholder="标识可选，留空自动生成"
+                      aria-label="智能体标识"
+                    />
+                    <span v-else class="agent-inline-slug">{{ agentForm.slug || editingAgentId }}</span>
+                  </div>
+                </div>
+                <div class="agent-backend-summary" aria-label="智能体后端">
+                  <component :is="selectedBackendIcon" :size="16" />
+                  <div class="agent-backend-text">
+                    <span class="agent-backend-label">后端</span>
+                    <a-select
+                      v-if="!editingAgentId"
+                      v-model:value="agentForm.backend_id"
+                      class="agent-backend-select"
+                      size="small"
+                      :options="agentBackendOptions"
+                    />
+                    <span v-else class="agent-backend-name">{{ selectedBackendLabel }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="modal-form">
+              <label class="form-label full-width">
+                <span>描述</span>
+                <a-textarea v-model:value="agentForm.description" :rows="3" placeholder="可选" />
+              </label>
+            </div>
+
+            <div v-if="canEditAgentShareConfig" class="share-config-block">
+              <div class="section-heading">
+                <span>共享权限</span>
+              </div>
+              <ShareConfigForm
+                ref="agentShareConfigFormRef"
+                v-model="agentShareConfig"
+                :auto-select-user-dept="true"
+                :allowed-access-levels="getAgentShareAllowedLevels()"
+              />
+            </div>
+          </section>
+
+          <section
+            v-if="editingAgentId"
+            v-show="isRuntimeAgentModalTab(agentModalActiveTab)"
+            class="agent-modal-section runtime-section"
+          >
+            <div v-if="agentStore.hasConfigChanges" class="runtime-dirty-row">
+              <span class="dirty-hint">有未保存修改</span>
+            </div>
+            <AgentRuntimeConfigForm
+              ref="runtimeConfigFormRef"
+              :segment="runtimeConfigSegment"
+              :show-segmented="false"
+            />
+          </section>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+
+<style lang="less" scoped>
+.agent-manage-panel {
+  height: 100%;
+  min-height: 0;
+}
+
+.agent-card {
+  :deep(.info-card-icon) {
+    border-color: var(--main-100);
+    background:
+      radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.9), transparent 38%),
+      linear-gradient(145deg, var(--main-10), var(--gray-0));
+  }
+}
+
+.agent-card-icon-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.agent-card-menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  color: var(--gray-600);
+
+  &:hover,
+  &:focus {
+    color: var(--main-700);
+    background: var(--main-50);
+  }
+}
+
+.agent-card-menu-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+
+  &.danger {
+    color: var(--color-error-700);
+  }
+}
+
+.agent-modal-titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+}
+
+.agent-modal-title {
+  color: var(--gray-900);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.agent-modal-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+
+  :deep(.ant-btn) {
+    min-width: 64px;
+    border-radius: 8px;
+    font-weight: 500;
+  }
+
+  :deep(.ant-btn-primary) {
+    border-color: var(--main-700);
+    background: var(--main-700);
+
+    &:hover,
+    &:focus {
+      border-color: var(--main-800);
+      background: var(--main-800);
+    }
+  }
+}
+
+.agent-modal-content {
+  display: grid;
+  grid-template-columns: 164px minmax(0, 1fr);
+  height: min(72vh, 640px);
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid var(--gray-150);
+  border-radius: 12px;
+  background: var(--gray-0);
+}
+
+.agent-modal-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+  padding: 14px 10px;
+  overflow-y: auto;
+  border-right: 1px solid var(--gray-150);
+  background: linear-gradient(180deg, var(--gray-50), var(--main-10));
+}
+
+.agent-modal-nav-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 40px;
+  padding: 9px 10px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--gray-700);
+  font-size: 13px;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background 0.16s ease,
+    border-color 0.16s ease,
+    color 0.16s ease;
+
+  &:hover {
+    background: var(--gray-0);
+    color: var(--gray-900);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--main-100);
+    outline-offset: 1px;
+    border-color: var(--main-200);
+  }
+
+  &.active {
+    border-color: var(--main-100);
+    background: var(--gray-0);
+    color: var(--main-800);
+    font-weight: 600;
+  }
+}
+
+.nav-item-main {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 8px;
+
+  svg {
+    flex-shrink: 0;
+    color: var(--gray-500);
+  }
+}
+
+.agent-modal-nav-item.active .nav-item-main svg {
+  color: var(--main-700);
+}
+
+.nav-dirty-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--color-warning-600);
+}
+
+.agent-modal-main {
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 18px 20px 20px;
+}
+
+.agent-modal-section {
+  min-height: 0;
+  background: var(--gray-0);
+}
+
+.runtime-section {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+
+  :deep(.agent-runtime-config-form) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    background: transparent;
+  }
+
+  :deep(.runtime-config-content) {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    padding: 0;
+    overflow-y: auto;
+  }
+}
+
+.section-heading {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  color: var(--gray-900);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.agent-profile-header {
+  margin-bottom: 16px;
+}
+
+.agent-icon-preview {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 0;
+  gap: 16px;
+  padding: 10px 12px 10px 10px;
+  border: 1px solid var(--gray-150);
+  border-radius: 12px;
+  background: linear-gradient(135deg, var(--gray-0), var(--main-10));
+
+  :deep(.ant-upload) {
+    display: block;
+  }
+}
+
+.agent-profile-main {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 10px;
+}
+
+.agent-icon-upload {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  overflow: hidden;
+  border: 1px solid var(--gray-150);
+  border-radius: 8px;
+  background: var(--gray-0);
+  cursor: pointer;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  &:hover .agent-icon-mask,
+  &.uploading .agent-icon-mask {
+    opacity: 1;
+  }
+}
+
+.agent-icon-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  background: rgba(0, 0, 0, 0.48);
+  color: var(--gray-0);
+  font-size: 11px;
+  opacity: 0;
+  transition: opacity 0.16s ease;
+}
+
+.agent-icon-preview-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 4px;
+  line-height: 1.25;
+}
+
+.agent-inline-name-input {
+  width: 220px;
+  max-width: 100%;
+  padding: 2px 4px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--gray-900);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
+
+  &:hover,
+  &:focus {
+    border-color: var(--main-200);
+    background: var(--gray-0);
+    outline: none;
+  }
+}
+
+.agent-inline-slug,
+.agent-inline-slug-input {
+  width: 220px;
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--gray-500);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-inline-slug-input {
+  padding: 1px 4px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
+
+  &:hover,
+  &:focus {
+    border-color: var(--main-200);
+    background: var(--gray-0);
+    outline: none;
+  }
+}
+
+.agent-backend-summary {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 8px;
+  min-height: 40px;
+  padding: 7px 10px;
+  border: 1px solid var(--gray-150);
+  border-radius: 10px;
+  background: var(--gray-0);
+  color: var(--main-700);
+}
+
+.agent-backend-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  line-height: 1.2;
+}
+
+.agent-backend-label {
+  color: var(--gray-500);
+  font-size: 11px;
+}
+
+.agent-backend-name {
+  max-width: 180px;
+  overflow: hidden;
+  color: var(--gray-800);
+  font-size: 12px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-backend-select {
+  min-width: 160px;
+
+  :deep(.ant-select-selector) {
+    border-color: var(--gray-150) !important;
+    border-radius: 8px !important;
+  }
+}
+
+.share-config-block {
+  margin-top: 18px;
+  padding-top: 16px;
+  border-top: 1px solid var(--gray-150);
+}
+
+.runtime-dirty-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}
+
+.dirty-hint {
+  color: var(--color-warning-700);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.form-label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  > span {
+    color: var(--gray-700);
+    font-size: 12px;
+    font-weight: 500;
+  }
+}
+
+.full-width {
+  grid-column: 1 / -1;
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 768px) {
+  .agent-modal-content {
+    grid-template-columns: 1fr;
+    height: min(76vh, 640px);
+  }
+
+  .agent-modal-sidebar {
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    border-right: none;
+    border-bottom: 1px solid var(--gray-150);
+  }
+
+  .agent-modal-nav-item {
+    flex: 0 0 auto;
+    width: auto;
+    white-space: nowrap;
+  }
+
+  .agent-modal-titlebar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .agent-modal-actions {
+    align-self: flex-end;
+  }
+
+  .agent-icon-preview {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .agent-backend-summary {
+    width: 100%;
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/web/src/views/ModelConfigView.vue b/web/src/components/model-management/ModelProviderManagePanel.vue
similarity index 88%
rename from web/src/views/ModelConfigView.vue
rename to web/src/components/model-management/ModelProviderManagePanel.vue
index af3f225b..f2848e79 100644
--- a/web/src/views/ModelConfigView.vue
+++ b/web/src/components/model-management/ModelProviderManagePanel.vue
@@ -1,25 +1,14 @@
 <script setup>
 import { computed, onMounted, reactive, ref } from 'vue'
 import { message, Modal } from 'ant-design-vue'
-import {
-  Globe,
-  Plus,
-  RefreshCw,
-  Search,
-  Settings2,
-  Trash2,
-  CheckCircle2,
-  Edit3
-} from 'lucide-vue-next'
+import { Globe, Plus, RefreshCw, Search, Settings2, Trash2, CheckCircle2, Edit3 } from 'lucide-vue-next'
 
 import { modelProviderApi } from '@/apis/system_api'
 import { modelIcons } from '@/utils/modelIcon'
-import PageHeader from '@/components/shared/PageHeader.vue'
 import PageShoulder from '@/components/shared/PageShoulder.vue'
 import InfoCard from '@/components/shared/InfoCard.vue'
 import ExtensionCardGrid from '@/components/extensions/ExtensionCardGrid.vue'
 
-// ============ State ============
 const loading = ref(false)
 const remoteLoading = ref(false)
 const saving = ref(false)
@@ -78,8 +67,6 @@ const remoteModelsLoaded = ref({})
 // Remote model search state per provider
 const remoteModelSearch = ref({})
 const remoteModelTypeFilter = ref({})
-
-// ============ Computed ============
 const filteredProviders = computed(() => {
   const keyword = searchQuery.value.trim().toLowerCase()
   const filtered = keyword
@@ -234,8 +221,6 @@ const parseJsonObject = (text, label) => {
 }
 
 const formatJsonText = (value) => JSON.stringify(value || {}, null, 2)
-
-// ============ Provider Operations ============
 const loadProviders = async () => {
   loading.value = true
   try {
@@ -251,7 +236,7 @@ const loadProviders = async () => {
 function getProviderInfo(provider) {
   return [
     { label: 'Base URL', value: provider.base_url || '-' },
-    { label: '类型', value: provider.provider_type || 'openai' },
+    { label: '能力', value: provider.capabilities?.join(', ') || 'chat' },
     { label: '已启用', value: `${provider.enabled_models?.length || 0} 个模型` }
   ]
 }
@@ -564,76 +549,65 @@ const removeModel = async (providerId, modelId) => {
   })
 }
 
-// ============ Lifecycle ============
 onMounted(loadProviders)
+
+defineExpose({
+  loading,
+  stats: providerStats,
+  refresh: loadProviders
+})
 </script>
 
 <template>
-  <div class="model-config-view">
-    <!-- Page Header -->
-    <PageHeader title="模型配置" :show-border="true">
-      <template #info>
-        <div class="summary-strip">
-          <span>{{ providerStats.total }} 个供应商</span>
-          <span>{{ providerStats.enabled }} 个启用</span>
-          <span v-if="providerStats.warning > 0" class="warning-count"
-            >{{ providerStats.warning }} 个凭证缺失</span
-          >
-          <span>{{ providerStats.models }} 个模型</span>
-        </div>
-      </template>
-    </PageHeader>
-
-    <!-- Toolbar -->
-    <PageShoulder v-model:search="searchQuery" search-placeholder="搜索供应商...">
-      <template #actions>
-        <a-button type="primary" class="lucide-icon-btn" @click="openCreateProviderModal">
-          <Plus :size="14" />
-          新增供应商
-        </a-button>
-        <a-button class="lucide-icon-btn" @click="loadProviders" :loading="loading">
-          <RefreshCw :size="14" :class="{ spinning: loading }" />
-        </a-button>
-      </template>
-    </PageShoulder>
-
-    <!-- Provider Card Grid -->
-    <ExtensionCardGrid :min-width="320">
-      <InfoCard
-        v-for="provider in filteredProviders"
-        :key="provider.provider_id"
-        :title="provider.display_name"
-        :subtitle="provider.provider_id"
-        :disabled="!provider.is_enabled"
-        :default-icon="Globe"
-        :info="getProviderInfo(provider)"
-        :status="getProviderStatus(provider)"
-        @click="openEditProviderModal(provider)"
-      >
-        <template #icon>
-          <img
-            v-if="getProviderIcon(provider)"
-            :src="getIconUrl(getProviderIcon(provider))"
-            :alt="provider.display_name"
-          />
-        </template>
-        <template #footer>
-          <button class="view-models-btn" type="button" @click.stop="openModelsModal(provider)">
-            <Settings2 :size="14" />
-            管理模型
-          </button>
-          <a-tooltip title="编辑供应商">
-            <a-button
-              size="small"
-              class="lucide-icon-btn"
-              @click.stop="openEditProviderModal(provider)"
-            >
-              <Edit3 :size="14" />
+  <div class="model-provider-manage-panel">
+        <PageShoulder v-model:search="searchQuery" search-placeholder="搜索供应商...">
+          <template #actions>
+            <a-button type="primary" class="lucide-icon-btn" @click="openCreateProviderModal">
+              <Plus :size="14" />
+              新增供应商
             </a-button>
-          </a-tooltip>
-        </template>
-      </InfoCard>
-    </ExtensionCardGrid>
+            <a-button class="lucide-icon-btn" @click="loadProviders" :loading="loading">
+              <RefreshCw :size="14" :class="{ spinning: loading }" />
+            </a-button>
+          </template>
+        </PageShoulder>
+
+        <ExtensionCardGrid :min-width="320">
+          <InfoCard
+            v-for="provider in filteredProviders"
+            :key="provider.provider_id"
+            :title="provider.display_name"
+            :subtitle="provider.provider_id"
+            :disabled="!provider.is_enabled"
+            :default-icon="Globe"
+            :info="getProviderInfo(provider)"
+            :status="getProviderStatus(provider)"
+            @click="openEditProviderModal(provider)"
+          >
+            <template #icon>
+              <img
+                v-if="getProviderIcon(provider)"
+                :src="getIconUrl(getProviderIcon(provider))"
+                :alt="provider.display_name"
+              />
+            </template>
+            <template #footer>
+              <button class="view-models-btn" type="button" @click.stop="openModelsModal(provider)">
+                <Settings2 :size="14" />
+                管理模型
+              </button>
+              <a-tooltip title="编辑供应商">
+                <a-button
+                  size="small"
+                  class="lucide-icon-btn"
+                  @click.stop="openEditProviderModal(provider)"
+                >
+                  <Edit3 :size="14" />
+                </a-button>
+              </a-tooltip>
+            </template>
+          </InfoCard>
+        </ExtensionCardGrid>
 
     <!-- Provider Edit Modal -->
     <a-modal
@@ -791,7 +765,6 @@ onMounted(loadProviders)
         </a-collapse>
       </div>
     </a-modal>
-
     <!-- Models Management Modal -->
     <a-modal
       v-model:open="showModelsModal"
@@ -957,7 +930,6 @@ onMounted(loadProviders)
         </div>
       </div>
     </a-modal>
-
     <!-- Model Config Modal -->
     <a-modal
       v-model:open="showModelModal"
@@ -1022,38 +994,13 @@ onMounted(loadProviders)
   </div>
 </template>
 
+
 <style lang="less" scoped>
-.model-config-view {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  background: var(--gray-0);
-  color: var(--gray-1000);
+.model-provider-manage-panel {
+  height: 100%;
+  min-height: 0;
 }
 
-// ============ Provider Summary Strip ============
-.summary-strip {
-  display: flex;
-  gap: 8px;
-
-  span {
-    padding: 6px 10px;
-    border: 1px solid var(--gray-100);
-    border-radius: 7px;
-    background: var(--gray-10);
-    color: var(--gray-700);
-    font-size: 12px;
-    line-height: 18px;
-  }
-
-  .warning-count {
-    background: var(--color-warning-50);
-    border-color: var(--color-warning-100);
-    color: var(--color-warning-700);
-  }
-}
-
-// ============ Provider Card Footer ============
 .view-models-btn {
   display: inline-flex;
   align-items: center;
@@ -1086,33 +1033,12 @@ onMounted(loadProviders)
   }
 }
 
-.clickable {
-  color: var(--main-700);
-  cursor: pointer;
-  font-weight: 500;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.card-actions {
-  display: flex;
-  gap: 4px;
-}
-
-// ============ Models Modal ============
 .models-modal-content {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 
-.models-modal-actions {
-  display: flex;
-  gap: 8px;
-}
-
 .models-section {
   display: flex;
   flex-direction: column;
@@ -1126,12 +1052,6 @@ onMounted(loadProviders)
   color: var(--gray-700);
 }
 
-.models-actions {
-  display: flex;
-  gap: 8px;
-}
-
-// ============ Models Table ============
 .models-table {
   display: flex;
   flex-direction: column;
@@ -1140,10 +1060,15 @@ onMounted(loadProviders)
   overflow: hidden;
 }
 
-.table-head {
+.table-head,
+.table-row {
   display: grid;
   grid-template-columns: 1fr 80px 70px 60px 110px;
   gap: 8px;
+  align-items: center;
+}
+
+.table-head {
   padding: 10px 12px;
   background: var(--gray-50);
   font-size: 11px;
@@ -1154,13 +1079,9 @@ onMounted(loadProviders)
 }
 
 .table-row {
-  display: grid;
-  grid-template-columns: 1fr 80px 70px 60px 110px;
-  gap: 8px;
   padding: 10px 12px;
   border-top: 1px solid var(--gray-100);
   font-size: 13px;
-  align-items: center;
   transition: background 0.1s;
 
   &:hover {
@@ -1196,14 +1117,6 @@ onMounted(loadProviders)
   white-space: nowrap;
 }
 
-.col-id {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: monospace;
-  font-size: 12px;
-}
-
 .col-type {
   display: flex;
   align-items: center;
@@ -1215,18 +1128,12 @@ onMounted(loadProviders)
   font-size: 12px;
 }
 
-.col-status {
-  display: flex;
-  align-items: center;
-}
-
 .col-ops {
   display: flex;
   gap: 4px;
   justify-content: flex-end;
 }
 
-// ============ Type Tags ============
 .type-tag {
   display: inline-flex;
   align-items: center;
@@ -1260,53 +1167,6 @@ onMounted(loadProviders)
   }
 }
 
-// ============ Status Badges ============
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-
-  &.active {
-    color: var(--color-success-700);
-  }
-
-  &.stale {
-    color: var(--color-warning-700);
-  }
-}
-
-// ============ Remote Section ============
-.remote-section {
-  margin-top: 16px;
-  border: 1px solid var(--gray-150);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.remote-toggle {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 10px 12px;
-  border: none;
-  background: var(--gray-50);
-  color: var(--gray-700);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.1s;
-
-  &:hover {
-    background: var(--gray-100);
-  }
-}
-
-.remote-list {
-  border-top: 1px solid var(--gray-100);
-}
-
 .enabled-header {
   display: flex;
   align-items: center;
@@ -1345,6 +1205,10 @@ onMounted(loadProviders)
   flex-shrink: 0;
 }
 
+.remote-list {
+  border-top: 1px solid var(--gray-100);
+}
+
 .remote-row {
   display: flex;
   align-items: center;
@@ -1413,11 +1277,6 @@ onMounted(loadProviders)
   }
 }
 
-.models-empty {
-  padding: 24px;
-}
-
-// ============ Modal Form ============
 .modal-form {
   display: flex;
   flex-direction: column;
@@ -1466,6 +1325,7 @@ onMounted(loadProviders)
     flex-direction: column;
     gap: 14px;
   }
+
   :deep(.ant-collapse-header) {
     padding-inline: 0;
   }
@@ -1506,28 +1366,9 @@ onMounted(loadProviders)
   }
 }
 
-// ============ Responsive ============
 @media (max-width: 768px) {
-  .page-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-    padding: 20px 16px;
-  }
-
-  .toolbar {
-    padding: 12px 16px;
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .search-input {
-    width: 100%;
-  }
-
-  .provider-grid {
+  .form-row {
     grid-template-columns: 1fr;
-    padding: 16px;
   }
 
   .table-head,
diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue
index 62dd5fc5..1ae3407a 100644
--- a/web/src/layouts/AppLayout.vue
+++ b/web/src/layouts/AppLayout.vue
@@ -145,8 +145,8 @@ const mainList = computed(() => {
     })
 
     items.push({
-      name: '模型配置',
-      path: '/model-config',
+      name: '模型管理',
+      path: '/model-manage',
       icon: Box,
       activeIcon: Box
     })
diff --git a/web/src/router/index.js b/web/src/router/index.js
index 406bdccf..98a0892e 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -78,15 +78,15 @@ const router = createRouter({
       ]
     },
     {
-      path: '/model-config',
-      name: 'model-config',
+      path: '/model-manage',
+      name: 'model-manage',
       component: AppLayout,
       children: [
         {
           path: '',
-          name: 'ModelConfigComp',
-          component: () => import('../views/ModelConfigView.vue'),
-          meta: { keepAlive: false, requiresAuth: true, requiresAdmin: true }
+          name: 'ModelManageComp',
+          component: () => import('../views/ModelManageView.vue'),
+          meta: { keepAlive: false, requiresAuth: true }
         }
       ]
     },
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index 41a81adf..4714d8b3 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -131,7 +131,6 @@ import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { useInfoStore } from '@/stores/info'
-import { useAgentStore } from '@/stores/agent'
 import { healthApi } from '@/apis/system_api'
 import UserInfoComponent from '@/components/UserInfoComponent.vue'
 import {
@@ -149,7 +148,6 @@ import {
 const router = useRouter()
 const userStore = useUserStore()
 const infoStore = useInfoStore()
-const agentStore = useAgentStore()
 const repoUrl = 'https://github.com/xerrors/Yuxi'
 const faqUrl = 'https://xerrors.github.io/Yuxi/'
 
@@ -358,35 +356,13 @@ const retryLoad = () => {
 }
 
 const goToChat = async () => {
-  // 检查用户是否登录
   if (!userStore.isLoggedIn) {
-    // 登录后应该跳转到默认智能体而不是/agent
-    sessionStorage.setItem('redirect', '/') // 设置为首页，登录后会通过路由守卫处理重定向
+    sessionStorage.setItem('redirect', '/')
     router.push('/login')
     return
   }
 
-  // 根据用户角色进行跳转
-  if (userStore.isAdmin) {
-    // 管理员用户跳转到聊天页面
-    await agentStore.initialize()
-    router.push('/agent')
-    return
-  }
-
-  // 普通用户跳转到默认智能体
-  try {
-    // 获取默认智能体
-    const defaultAgent = agentStore.defaultAgent
-    if (defaultAgent?.id) {
-      router.push(`/agent/${defaultAgent.id}`)
-    } else {
-      router.push('/agent')
-    }
-  } catch (error) {
-    console.error('跳转到智能体页面失败:', error)
-    router.push('/')
-  }
+  router.push('/agent')
 }
 
 onMounted(() => {
diff --git a/web/src/views/ModelManageView.vue b/web/src/views/ModelManageView.vue
new file mode 100644
index 00000000..72f3c503
--- /dev/null
+++ b/web/src/views/ModelManageView.vue
@@ -0,0 +1,136 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import PageHeader from '@/components/shared/PageHeader.vue'
+import AgentManagePanel from '@/components/model-management/AgentManagePanel.vue'
+import ModelProviderManagePanel from '@/components/model-management/ModelProviderManagePanel.vue'
+import { useUserStore } from '@/stores/user'
+
+const route = useRoute()
+const router = useRouter()
+const userStore = useUserStore()
+
+const activeTab = ref('agents')
+const agentPanelRef = ref(null)
+const providerPanelRef = ref(null)
+
+const modelManageTabs = computed(() => {
+  const tabs = [{ key: 'agents', label: '智能体' }]
+  if (userStore.isAdmin) tabs.push({ key: 'providers', label: '模型供应商' })
+  return tabs
+})
+
+const activePanel = computed(() =>
+  activeTab.value === 'providers' ? providerPanelRef.value : agentPanelRef.value
+)
+
+const activeLoading = computed(() => activePanel.value?.loading || false)
+const activeStats = computed(() => activePanel.value?.stats || {})
+
+const normalizeTab = (tab) => {
+  if (tab === 'providers' && userStore.isAdmin) return 'providers'
+  return 'agents'
+}
+
+watch(
+  () => [route.query.tab, userStore.isAdmin],
+  ([tab]) => {
+    const nextTab = normalizeTab(tab)
+    if (activeTab.value !== nextTab) activeTab.value = nextTab
+  },
+  { immediate: true }
+)
+
+watch(activeTab, (tab) => {
+  const nextTab = normalizeTab(tab)
+  if (nextTab !== tab) {
+    activeTab.value = nextTab
+    return
+  }
+  if (route.query.tab === nextTab) return
+  router.replace({ query: { ...route.query, tab: nextTab } })
+})
+</script>
+
+<template>
+  <div class="model-manage-view">
+    <PageHeader
+      v-model:active-key="activeTab"
+      title="模型管理"
+      :tabs="modelManageTabs"
+      :loading="activeLoading"
+      :show-border="true"
+      aria-label="模型管理视图切换"
+    >
+      <template #info>
+        <div v-if="activeTab === 'agents'" class="summary-strip">
+          <span>{{ activeStats.total || 0 }} 个智能体</span>
+          <span>{{ activeStats.global || 0 }} 个全局</span>
+          <span v-if="activeStats.builtin">{{ activeStats.builtin }} 个内置</span>
+          <span>{{ activeStats.manageable || 0 }} 个可管理</span>
+        </div>
+        <div v-else class="summary-strip">
+          <span>{{ activeStats.total || 0 }} 个供应商</span>
+          <span>{{ activeStats.enabled || 0 }} 个启用</span>
+          <span v-if="activeStats.warning > 0" class="warning-count">
+            {{ activeStats.warning }} 个凭证缺失
+          </span>
+          <span>{{ activeStats.models || 0 }} 个模型</span>
+        </div>
+      </template>
+    </PageHeader>
+
+    <div class="model-manage-content">
+      <div v-show="activeTab === 'agents'" class="tab-panel">
+        <AgentManagePanel ref="agentPanelRef" />
+      </div>
+      <div v-if="userStore.isAdmin && activeTab === 'providers'" class="tab-panel">
+        <ModelProviderManagePanel ref="providerPanelRef" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.model-manage-view {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  background: var(--gray-0);
+  color: var(--gray-1000);
+}
+
+.model-manage-content {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+
+  .tab-panel {
+    height: 100%;
+    min-height: 0;
+    overflow-y: auto;
+  }
+}
+
+.summary-strip {
+  display: flex;
+  gap: 8px;
+
+  span {
+    padding: 6px 10px;
+    border: 1px solid var(--gray-100);
+    border-radius: 7px;
+    background: var(--gray-10);
+    color: var(--gray-700);
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  .warning-count {
+    background: var(--color-warning-50);
+    border-color: var(--color-warning-100);
+    color: var(--color-warning-700);
+  }
+}
+</style>