From c79cedea4920128c6fee4e7b4a56c5d753f3904b Mon Sep 17 00:00:00 2001
From: tbphp <tangb7420@gmail.com>
Date: Thu, 6 Aug 2026 23:55:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor(models):=20=E9=87=8D=E6=9E=84=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E9=A1=B5=E9=9D=A2=E5=88=97=E8=A1=A8=E4=B8=8E=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

把客户端模型改为单行账本列表，目录信息、价格范围与路由分组下沉到
可折叠详情，消除多套价格下重复渲染的模型元数据。

- 新增 ModelCollection / ModelDetailPanel / ModelCatalogFacts /
  ModelSummaryStrip 与 model-presenter，替换 ModelTree* 树状组件
- 目录元数据改为规格标签值加少量能力 chip，取代成排标签堆叠
- 上游层复用 catalog_summary 渲染一次目录信息，不再逐价格重复
- 概览改为指标卡片条，目录状态与未使用价格记录归入其中
- 价格单位说明由整块提示降级为页脚小字
---
 .../model-prices/ModelPriceDrawer.vue         |   4 +-
 web/src/features/models/ModelCatalogFacts.vue | 160 ++++++
 web/src/features/models/ModelCollection.vue   | 457 ++++++++++++++++
 web/src/features/models/ModelDetailPanel.vue  | 359 +++++++++++++
 web/src/features/models/ModelSummaryStrip.vue | 183 +++++++
 .../features/models/ModelTreeCollection.vue   | 372 -------------
 web/src/features/models/ModelTreePriceRow.vue | 501 ------------------
 web/src/features/models/ModelsView.vue        | 126 +----
 web/src/features/models/model-presenter.ts    | 116 ++++
 web/src/i18n/locales/en-US/models.ts          |  83 +--
 web/src/i18n/locales/ja-JP/models.ts          |  83 +--
 web/src/i18n/locales/zh-CN/models.ts          |  85 +--
 12 files changed, 1422 insertions(+), 1107 deletions(-)
 create mode 100644 web/src/features/models/ModelCatalogFacts.vue
 create mode 100644 web/src/features/models/ModelCollection.vue
 create mode 100644 web/src/features/models/ModelDetailPanel.vue
 create mode 100644 web/src/features/models/ModelSummaryStrip.vue
 delete mode 100644 web/src/features/models/ModelTreeCollection.vue
 delete mode 100644 web/src/features/models/ModelTreePriceRow.vue
 create mode 100644 web/src/features/models/model-presenter.ts

diff --git a/web/src/features/model-prices/ModelPriceDrawer.vue b/web/src/features/model-prices/ModelPriceDrawer.vue
index 8ddbe157..17b7d198 100644
--- a/web/src/features/model-prices/ModelPriceDrawer.vue
+++ b/web/src/features/model-prices/ModelPriceDrawer.vue
@@ -235,7 +235,9 @@ onBeforeUnmount(clearRequest)
           <li v-for="group in affectedGroups" :key="group.id">
             <strong>{{ group.name }}</strong>
             <span :data-enabled="group.enabled">
-              {{ group.enabled ? t('models.tree.groupEnabled') : t('models.tree.groupDisabled') }}
+              {{
+                group.enabled ? t('models.detail.groupEnabled') : t('models.detail.groupDisabled')
+              }}
             </span>
           </li>
         </ul>
diff --git a/web/src/features/models/ModelCatalogFacts.vue b/web/src/features/models/ModelCatalogFacts.vue
new file mode 100644
index 00000000..077c7f54
--- /dev/null
+++ b/web/src/features/models/ModelCatalogFacts.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ModelCatalogReferenceDto } from '@/app/resources/models'
+import { formatInteger } from '@/lib/format'
+
+const props = defineProps<{
+  reference: ModelCatalogReferenceDto
+}>()
+const { locale, t } = useI18n()
+
+interface CatalogSpec {
+  key: string
+  label: string
+  value: string
+}
+
+const metadata = computed(() => props.reference.model)
+
+const sourceLabel = computed(() =>
+  t(`models.detail.catalogReference.${props.reference.source}`, {
+    provider: props.reference.provider_name,
+  }),
+)
+
+const specs = computed<CatalogSpec[]>(() => {
+  const model = metadata.value
+  const entries: CatalogSpec[] = []
+  const push = (key: string, value: string): void => {
+    if (value) entries.push({ key, label: t(`models.detail.specs.${key}`), value })
+  }
+  push(
+    'context',
+    model.limits.context === null ? '' : formatInteger(model.limits.context, locale.value),
+  )
+  push(
+    'maxOutput',
+    model.limits.output === null ? '' : formatInteger(model.limits.output, locale.value),
+  )
+  push('modalities', formatModalities())
+  push('knowledge', model.knowledge)
+  push('released', model.release_date)
+  push('family', model.family)
+  return entries
+})
+
+const capabilities = computed(() =>
+  (['reasoning', 'tool_call', 'structured_output', 'attachment', 'temperature'] as const)
+    .filter((capability) => metadata.value.capabilities[capability] === true)
+    .map((capability) => t(`models.detail.capabilities.${capability}`))
+    .concat(metadata.value.open_weights === true ? [t('models.detail.openWeights')] : []),
+)
+
+function formatModalities(): string {
+  const { input, output } = metadata.value.modalities
+  if (input.length === 0 && output.length === 0) return ''
+  const arrow = output.length > 0 ? `→ ${output.join(' / ')}` : ''
+  return `${input.join(' / ')} ${arrow}`.trim()
+}
+</script>
+
+<template>
+  <div class="model-catalog">
+    <p class="model-catalog__source">
+      <span>{{ sourceLabel }}</span>
+      <strong>{{ metadata.name }}</strong>
+    </p>
+    <p v-if="metadata.description" class="model-catalog__description">
+      {{ metadata.description }}
+    </p>
+    <dl v-if="specs.length > 0" class="model-catalog__specs">
+      <div v-for="spec in specs" :key="spec.key">
+        <dt>{{ spec.label }}</dt>
+        <dd>{{ spec.value }}</dd>
+      </div>
+    </dl>
+    <ul v-if="capabilities.length > 0" class="model-catalog__capabilities">
+      <li v-for="capability in capabilities" :key="capability">{{ capability }}</li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.model-catalog {
+  display: grid;
+  min-width: 0;
+  gap: var(--space-2-5);
+}
+
+.model-catalog__source {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-2);
+  margin: 0;
+}
+
+.model-catalog__source span {
+  color: var(--color-text-faint);
+  font-size: var(--text-label-xs);
+}
+
+.model-catalog__source strong {
+  font-size: var(--text-meta);
+  font-weight: 600;
+}
+
+.model-catalog__description {
+  max-width: 92ch;
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  line-height: var(--line-normal);
+}
+
+.model-catalog__specs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(118px, max-content));
+  gap: var(--space-2) var(--space-6);
+  margin: 0;
+}
+
+.model-catalog__specs div {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.model-catalog__specs dt {
+  color: var(--color-text-faint);
+  font-size: var(--text-label-xs);
+}
+
+.model-catalog__specs dd {
+  margin: 0;
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-catalog__capabilities {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.model-catalog__capabilities li {
+  border-radius: var(--radius-tag);
+  background: var(--color-tag);
+  color: var(--color-text-muted);
+  padding: 2px 7px;
+  font-size: var(--text-label-xs);
+}
+</style>
diff --git a/web/src/features/models/ModelCollection.vue b/web/src/features/models/ModelCollection.vue
new file mode 100644
index 00000000..ae8e8172
--- /dev/null
+++ b/web/src/features/models/ModelCollection.vue
@@ -0,0 +1,457 @@
+<script setup lang="ts">
+import { ChevronDown, Pencil } from '@lucide/vue'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ClientModelDto, ModelPriceBranchDto } from '@/app/resources/models'
+import { groupDetailLocation } from '@/app/route-locations'
+import LedgerRecordList from '@/components/collection/LedgerRecordList.vue'
+import CopyButton from '@/components/ui/CopyButton.vue'
+import IconButton from '@/components/ui/IconButton.vue'
+import StatusBadge from '@/components/ui/StatusBadge.vue'
+
+import ModelDetailPanel from './ModelDetailPanel.vue'
+import {
+  presentClientModel,
+  type ClientModelPresentation,
+  type ModelPriceFieldSummary,
+} from './model-presenter'
+
+const visibleGroupCount = 3
+
+const props = defineProps<{
+  items: ClientModelDto[]
+}>()
+const emit = defineEmits<{
+  edit: [branch: ModelPriceBranchDto, trigger: HTMLElement]
+}>()
+const { t } = useI18n()
+
+const expanded = ref(new Set<string>())
+const presentations = computed<ClientModelPresentation[]>(() =>
+  props.items.map((model) => presentClientModel(model)),
+)
+
+watch(
+  () => props.items,
+  (items) => {
+    const available = new Set(items.map(({ client_model: model }) => model))
+    expanded.value = new Set([...expanded.value].filter((model) => available.has(model)))
+  },
+)
+
+function toggle(clientModel: string): void {
+  const next = new Set(expanded.value)
+  if (!next.delete(clientModel)) next.add(clientModel)
+  expanded.value = next
+}
+
+function upstreamCaption(presentation: ClientModelPresentation): string {
+  const { shape, modelID, count } = presentation.upstream
+  if (shape === 'multi') return t('models.collection.multiUpstream', { count })
+  if (shape === 'alias') return t('models.collection.alias', { model: modelID })
+  return t('models.collection.direct')
+}
+
+function priceText(summary: ModelPriceFieldSummary): string {
+  if (summary.state === 'unavailable') return t('modelPrices.values.unavailable')
+  if (summary.state === 'free') return t('modelPrices.values.free')
+  const value = t('modelPrices.values.configured', { value: summary.value })
+  if (summary.state === 'single') return value
+  return t('models.collection.priceRange', {
+    min: value,
+    max: t('modelPrices.values.configured', { value: summary.upper }),
+  })
+}
+
+function scopeCaption(presentation: ClientModelPresentation): string | null {
+  if (presentation.scopes.length < 2) return null
+  return presentation.pendingCount > 0
+    ? t('models.collection.pendingScopes', {
+        pending: presentation.pendingCount,
+        count: presentation.scopes.length,
+      })
+    : t('models.collection.scopeCount', { count: presentation.scopes.length })
+}
+
+function forwardEdit(branch: ModelPriceBranchDto, trigger: HTMLElement): void {
+  emit('edit', branch, trigger)
+}
+</script>
+
+<template>
+  <LedgerRecordList
+    :label="t('models.collection.label')"
+    grid-class="models-record-grid"
+    :scroll-hint="t('models.collection.scrollHint')"
+  >
+    <template #header>
+      <span role="columnheader">{{ t('models.collection.columns.model') }}</span>
+      <span role="columnheader">{{ t('models.collection.columns.routing') }}</span>
+      <span role="columnheader">{{ t('models.collection.columns.prices') }}</span>
+      <span role="columnheader">{{ t('models.collection.columns.status') }}</span>
+      <span role="columnheader">
+        <span class="sr-only">{{ t('models.collection.columns.actions') }}</span>
+      </span>
+    </template>
+
+    <template v-for="presentation in presentations" :key="presentation.model.client_model">
+      <article
+        class="ledger-record-list__record model-record"
+        :class="{ 'model-record--expanded': expanded.has(presentation.model.client_model) }"
+        role="row"
+      >
+        <div class="ledger-record-list__cell model-record__identity" role="cell">
+          <div class="model-record__name">
+            <strong>{{ presentation.model.client_model }}</strong>
+            <CopyButton
+              class="model-record__copy"
+              :value="presentation.model.client_model"
+              :label="t('models.collection.copy', { model: presentation.model.client_model })"
+              :success-label="t('models.collection.copySucceeded')"
+              :failure-label="t('models.collection.copyFailed')"
+            />
+          </div>
+          <span class="model-record__caption">{{ upstreamCaption(presentation) }}</span>
+        </div>
+
+        <div class="ledger-record-list__cell model-record__routing" role="cell">
+          <ul class="model-record__groups">
+            <li
+              v-for="group in presentation.routeGroups.slice(0, visibleGroupCount)"
+              :key="group.id"
+            >
+              <RouterLink :to="groupDetailLocation(group.id)">{{ group.name }}</RouterLink>
+            </li>
+            <li
+              v-if="presentation.routeGroups.length > visibleGroupCount"
+              class="model-record__groups-more"
+            >
+              {{
+                t('models.collection.moreGroups', {
+                  count: presentation.routeGroups.length - visibleGroupCount,
+                })
+              }}
+            </li>
+          </ul>
+          <ul class="model-record__protocols">
+            <li v-for="protocol in presentation.model.protocols" :key="protocol">
+              {{ t(`common.protocols.${protocol}`) }}
+            </li>
+          </ul>
+        </div>
+
+        <div class="ledger-record-list__cell model-record__prices" role="cell">
+          <div v-for="summary in [presentation.input, presentation.output]" :key="summary.field">
+            <span>{{ t(`modelPrices.fields.${summary.field}`) }}</span>
+            <strong :data-state="summary.state" :title="priceText(summary)">
+              {{ priceText(summary) }}
+            </strong>
+          </div>
+        </div>
+
+        <div class="ledger-record-list__cell model-record__status" role="cell">
+          <StatusBadge
+            size="compact"
+            :tone="presentation.status === 'configured' ? 'success' : 'warning'"
+          >
+            {{ t(`modelPrices.status.${presentation.status}`) }}
+          </StatusBadge>
+          <small v-if="scopeCaption(presentation)">{{ scopeCaption(presentation) }}</small>
+        </div>
+
+        <div class="ledger-record-list__cell model-record__actions" role="cell">
+          <IconButton
+            v-if="presentation.soleBranch"
+            variant="ghost"
+            tone="action"
+            size="compact"
+            :label="t('modelPrices.edit.open', { model: presentation.soleBranch.price.model_id })"
+            @click="forwardEdit(presentation.soleBranch, $event.currentTarget as HTMLElement)"
+          >
+            <Pencil :size="15" aria-hidden="true" />
+          </IconButton>
+          <IconButton
+            class="model-record__toggle"
+            variant="ghost"
+            size="compact"
+            :pressed="expanded.has(presentation.model.client_model)"
+            :label="
+              expanded.has(presentation.model.client_model)
+                ? t('models.collection.collapse', { model: presentation.model.client_model })
+                : t('models.collection.expand', { model: presentation.model.client_model })
+            "
+            @click="toggle(presentation.model.client_model)"
+          >
+            <ChevronDown :size="16" aria-hidden="true" />
+          </IconButton>
+        </div>
+      </article>
+
+      <div
+        v-if="expanded.has(presentation.model.client_model)"
+        class="model-record__detail"
+        role="row"
+      >
+        <div class="model-record__detail-cell" role="cell">
+          <ModelDetailPanel :presentation="presentation" @edit="forwardEdit" />
+        </div>
+      </div>
+    </template>
+  </LedgerRecordList>
+</template>
+
+<style scoped>
+.models-record-grid {
+  --ledger-record-list-grid: minmax(210px, 1.5fr) minmax(180px, 1.35fr) minmax(190px, 1.15fr)
+    minmax(112px, 132px) 84px;
+  --ledger-record-list-column-gap: var(--space-4);
+  --ledger-record-list-record-min-height: 64px;
+  --ledger-record-list-record-padding: var(--space-2-5) 0;
+}
+
+.model-record--expanded {
+  background: var(--color-surface-sunken);
+}
+
+.model-record__identity {
+  display: grid;
+  align-content: center;
+  gap: 2px;
+}
+
+.model-record__name {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.model-record__name strong {
+  min-width: 0;
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-record__copy {
+  flex: none;
+  opacity: 0;
+  transition: opacity var(--duration-fast) var(--easing-standard);
+}
+
+.model-record:hover .model-record__copy,
+.model-record__copy:focus-within {
+  opacity: 1;
+}
+
+.model-record__caption {
+  overflow: hidden;
+  color: var(--color-text-faint);
+  font-size: var(--text-label-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-record__routing {
+  display: grid;
+  align-content: center;
+  gap: var(--space-1);
+}
+
+.model-record__groups,
+.model-record__protocols {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 2px var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.model-record__groups {
+  font-size: var(--text-sm);
+}
+
+.model-record__groups a {
+  color: var(--color-action);
+  font-weight: 600;
+}
+
+.model-record__groups-more {
+  color: var(--color-text-faint);
+  font-size: var(--text-label-xs);
+}
+
+.model-record__protocols {
+  gap: 2px var(--space-1);
+}
+
+.model-record__protocols li {
+  border-radius: var(--radius-tag);
+  background: var(--color-tag);
+  color: var(--color-text-faint);
+  padding: 1px 6px;
+  font-size: var(--text-label-xs);
+  white-space: nowrap;
+}
+
+.model-record__prices {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-content: center;
+  gap: var(--space-2);
+}
+
+.model-record__prices > div {
+  min-width: 0;
+  border-left: 1px solid var(--color-border-subtle);
+  padding-left: var(--space-2-5);
+}
+
+.model-record__prices > div:first-child {
+  border-left: 0;
+  padding-left: 0;
+}
+
+.model-record__prices span {
+  display: block;
+  color: var(--color-text-faint);
+  font-size: var(--text-label-xs);
+}
+
+.model-record__prices strong {
+  display: block;
+  overflow: hidden;
+  margin-top: 1px;
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-record__prices strong[data-state='unavailable'] {
+  color: var(--color-text-faint);
+  font-family: var(--font-sans);
+  font-weight: 500;
+}
+
+.model-record__prices strong[data-state='free'] {
+  color: var(--color-success);
+}
+
+.model-record__status {
+  display: grid;
+  justify-items: start;
+  align-content: center;
+  gap: 3px;
+}
+
+.model-record__status small {
+  color: var(--color-text-faint);
+  font-size: var(--text-label-xs);
+}
+
+.model-record__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-0-5);
+}
+
+.model-record__toggle :deep(svg) {
+  transition: transform var(--duration-fast) var(--easing-standard);
+}
+
+.model-record__toggle[aria-pressed='true'] :deep(svg) {
+  transform: rotate(180deg);
+}
+
+.model-record__detail {
+  grid-column: 1 / -1;
+  background: var(--color-surface-sunken);
+}
+
+.model-record__detail-cell {
+  min-width: 0;
+  border-top: 1px dashed var(--color-border-control);
+  padding: var(--space-4) 0 var(--space-5);
+  animation: model-record-detail var(--duration-normal) var(--easing-data);
+}
+
+@keyframes model-record-detail {
+  from {
+    opacity: 0;
+    transform: translateY(-3px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .model-record__detail-cell {
+    animation: none;
+  }
+}
+
+@media (max-width: 1120px) {
+  .models-record-grid {
+    --ledger-record-list-grid: minmax(180px, 1.4fr) minmax(150px, 1.2fr) minmax(170px, 1.1fr)
+      minmax(104px, 120px) 76px;
+    --ledger-record-list-column-gap: var(--space-3);
+  }
+}
+
+@media (max-width: 860px) {
+  .models-record-grid {
+    --ledger-record-list-card-grid: minmax(0, 1fr) auto;
+  }
+
+  .model-record__identity {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .model-record__actions {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .model-record__copy {
+    opacity: 1;
+  }
+
+  .model-record__routing {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+
+  .model-record__prices {
+    grid-column: 1 / -1;
+    grid-row: 3;
+    border-top: 1px solid var(--color-border-subtle);
+    padding-top: var(--space-3);
+  }
+
+  .model-record__status {
+    grid-column: 1 / -1;
+    grid-row: 4;
+  }
+
+  .model-record__detail {
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-control);
+    padding: 0 var(--space-4);
+  }
+
+  .model-record__detail-cell {
+    border-top: 0;
+    padding-block: var(--space-4);
+  }
+}
+</style>
diff --git a/web/src/features/models/ModelDetailPanel.vue b/web/src/features/models/ModelDetailPanel.vue
new file mode 100644
index 00000000..b0ca775a
--- /dev/null
+++ b/web/src/features/models/ModelDetailPanel.vue
@@ -0,0 +1,359 @@
+<script setup lang="ts">
+import { Pencil } from '@lucide/vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ModelPriceBranchDto, ModelUpstreamDto } from '@/app/resources/models'
+import { groupDetailLocation } from '@/app/route-locations'
+import IconButton from '@/components/ui/IconButton.vue'
+import StatusBadge from '@/components/ui/StatusBadge.vue'
+import ModelPriceResetDialog from '@/features/model-prices/ModelPriceResetDialog.vue'
+import { presentModelPrice } from '@/features/model-prices/model-price-presenter'
+
+import ModelCatalogFacts from './ModelCatalogFacts.vue'
+import { hasWiderPriceImpact, type ClientModelPresentation } from './model-presenter'
+
+const props = defineProps<{
+  presentation: ClientModelPresentation
+}>()
+const emit = defineEmits<{
+  edit: [branch: ModelPriceBranchDto, trigger: HTMLElement]
+}>()
+const { t } = useI18n()
+
+function slots(branch: ModelPriceBranchDto) {
+  return presentModelPrice(branch.price, {
+    unavailable: t('modelPrices.values.unavailable'),
+    free: t('modelPrices.values.free'),
+    configured: (value) => t('modelPrices.values.configured', { value }),
+  }).slots
+}
+
+function methodLabel(branch: ModelPriceBranchDto): string {
+  const { method, matched_provider_id: provider } = branch.price
+  if (method === null) return t('modelPrices.method.pending')
+  if (method === 'auto_matched') return t('modelPrices.method.auto_matched', { provider })
+  return t(`modelPrices.method.${method}`)
+}
+
+function showUpstreamHeader(upstream: ModelUpstreamDto): boolean {
+  return props.presentation.upstream.shape !== 'direct' || upstream.alias_applied
+}
+
+function edit(branch: ModelPriceBranchDto, trigger: HTMLElement): void {
+  emit('edit', branch, trigger)
+}
+</script>
+
+<template>
+  <div class="model-detail">
+    <section
+      v-for="upstream in presentation.model.upstream_models"
+      :key="upstream.model_id"
+      class="model-detail__upstream"
+    >
+      <header v-if="showUpstreamHeader(upstream)" class="model-detail__upstream-head">
+        <span class="model-detail__eyebrow">{{ t('models.detail.upstreamModel') }}</span>
+        <strong>{{ upstream.model_id }}</strong>
+        <span class="model-detail__chip">
+          {{ upstream.alias_applied ? t('models.detail.aliasApplied') : t('models.detail.direct') }}
+        </span>
+      </header>
+
+      <ModelCatalogFacts v-if="upstream.catalog_summary" :reference="upstream.catalog_summary" />
+
+      <article v-for="branch in upstream.prices" :key="branch.price.id" class="model-detail__scope">
+        <div class="model-detail__scope-head">
+          <div class="model-detail__scope-identity">
+            <span class="model-detail__eyebrow">
+              {{ t(`models.detail.scope.${branch.price.scope.kind}`) }}
+            </span>
+            <strong>{{ branch.price.scope.label }}</strong>
+          </div>
+          <StatusBadge
+            size="compact"
+            :tone="branch.price.pricing_status === 'configured' ? 'success' : 'warning'"
+          >
+            {{ t(`modelPrices.status.${branch.price.pricing_status}`) }}
+          </StatusBadge>
+          <div class="model-detail__scope-actions">
+            <IconButton
+              variant="ghost"
+              tone="action"
+              size="compact"
+              :label="t('modelPrices.edit.open', { model: branch.price.model_id })"
+              @click="edit(branch, $event.currentTarget as HTMLElement)"
+            >
+              <Pencil :size="15" aria-hidden="true" />
+            </IconButton>
+            <ModelPriceResetDialog
+              v-if="branch.price.can_reset"
+              :row="branch.price"
+              action="reset"
+            />
+          </div>
+        </div>
+
+        <ModelCatalogFacts
+          v-if="!upstream.catalog_summary && branch.catalog_reference"
+          :reference="branch.catalog_reference"
+        />
+
+        <dl class="model-detail__slots">
+          <div v-for="slot in slots(branch)" :key="slot.field" :data-state="slot.state">
+            <dt>{{ t(`modelPrices.fields.${slot.field}`) }}</dt>
+            <dd>{{ slot.value }}</dd>
+          </div>
+        </dl>
+
+        <p class="model-detail__facts">
+          <span>{{ methodLabel(branch) }}</span>
+          <span>
+            {{
+              t('modelPrices.references', {
+                entries: branch.price.reference_count,
+                groups: branch.price.reference_group_count,
+              })
+            }}
+          </span>
+          <span v-if="branch.price.partial" class="model-detail__facts-warning">
+            {{ t('modelPrices.facts.partial') }}
+          </span>
+          <span v-if="branch.price.has_context_tiers">{{ t('modelPrices.facts.tiered') }}</span>
+        </p>
+
+        <div class="model-detail__groups">
+          <span class="model-detail__eyebrow">{{ t('models.detail.routeGroups') }}</span>
+          <ul>
+            <li v-for="group in branch.route_groups" :key="group.id">
+              <RouterLink :to="groupDetailLocation(group.id)">{{ group.name }}</RouterLink>
+              <span v-if="!group.enabled">{{ t('models.detail.groupDisabled') }}</span>
+            </li>
+          </ul>
+          <span v-if="hasWiderPriceImpact(branch)" class="model-detail__impact">
+            {{ t('models.detail.globalImpact', { count: branch.affected_groups.length }) }}
+          </span>
+        </div>
+      </article>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.model-detail {
+  display: grid;
+  min-width: 0;
+  gap: var(--space-4);
+}
+
+.model-detail__upstream {
+  display: grid;
+  min-width: 0;
+  gap: var(--space-3);
+}
+
+.model-detail__upstream-head {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-2);
+}
+
+.model-detail__upstream-head strong {
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  overflow-wrap: anywhere;
+}
+
+.model-detail__eyebrow {
+  color: var(--color-text-faint);
+  font-size: var(--text-label-xs);
+  letter-spacing: 0.04em;
+}
+
+.model-detail__chip {
+  border-radius: var(--radius-tag);
+  background: var(--color-tag);
+  color: var(--color-text-muted);
+  padding: 2px 7px;
+  font-size: var(--text-label-xs);
+}
+
+.model-detail__scope {
+  display: grid;
+  min-width: 0;
+  gap: var(--space-3);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-control);
+  background: var(--color-surface);
+  padding: var(--space-3-5) var(--space-4);
+}
+
+.model-detail__scope-head {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.model-detail__scope-identity {
+  display: grid;
+  min-width: 0;
+  gap: 1px;
+}
+
+.model-detail__scope-identity strong {
+  overflow: hidden;
+  font-size: var(--text-meta);
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-detail__scope-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-0-5);
+}
+
+.model-detail__slots {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--space-2);
+  margin: 0;
+  border-block: 1px solid var(--color-border-subtle);
+  padding-block: var(--space-2-5);
+}
+
+.model-detail__slots div {
+  min-width: 0;
+  border-left: 1px solid var(--color-border-subtle);
+  padding-left: var(--space-2-5);
+}
+
+.model-detail__slots div:first-child {
+  border-left: 0;
+  padding-left: 0;
+}
+
+.model-detail__slots dt {
+  overflow: hidden;
+  color: var(--color-text-faint);
+  font-size: var(--text-label-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-detail__slots dd {
+  margin: var(--space-0-5) 0 0;
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-detail__slots div[data-state='unavailable'] dd {
+  color: var(--color-text-faint);
+  font-family: var(--font-sans);
+  font-weight: 500;
+}
+
+.model-detail__slots div[data-state='free'] dd {
+  color: var(--color-success);
+}
+
+.model-detail__facts {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-2-5);
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.model-detail__facts span + span::before {
+  margin-right: var(--space-2-5);
+  color: var(--color-text-faint);
+  content: '·';
+}
+
+.model-detail__facts-warning {
+  color: var(--color-warning);
+}
+
+.model-detail__groups {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-2);
+  min-width: 0;
+}
+
+.model-detail__groups ul {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.model-detail__groups li {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--space-1);
+  font-size: var(--text-sm);
+}
+
+.model-detail__groups a {
+  color: var(--color-action);
+  font-weight: 600;
+}
+
+.model-detail__groups li span {
+  color: var(--color-text-faint);
+  font-size: var(--text-label-xs);
+}
+
+.model-detail__impact {
+  color: var(--color-warning);
+  font-size: var(--text-label-xs);
+  font-weight: 600;
+}
+
+@media (max-width: 720px) {
+  .model-detail__scope {
+    padding: var(--space-3) var(--space-3);
+  }
+
+  .model-detail__scope-head {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .model-detail__scope-actions {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .model-detail__scope-head :deep(.status-badge) {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    justify-self: start;
+  }
+
+  .model-detail__slots {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--space-2-5) var(--space-2);
+  }
+
+  .model-detail__slots div:nth-child(3) {
+    border-left: 0;
+    padding-left: 0;
+  }
+}
+</style>
diff --git a/web/src/features/models/ModelSummaryStrip.vue b/web/src/features/models/ModelSummaryStrip.vue
new file mode 100644
index 00000000..b2ff23ea
--- /dev/null
+++ b/web/src/features/models/ModelSummaryStrip.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ModelCollectionCatalogDto, ModelCollectionSummaryDto } from '@/app/resources/models'
+import { modelPricesLocation } from '@/app/route-locations'
+import AppDateTime from '@/components/ui/AppDateTime.vue'
+import StatusBadge from '@/components/ui/StatusBadge.vue'
+import { formatInteger } from '@/lib/format'
+
+const props = defineProps<{
+  summary: ModelCollectionSummaryDto
+  catalog: ModelCollectionCatalogDto
+}>()
+const { locale, t } = useI18n()
+
+const stats = computed(() => [
+  {
+    key: 'clientModels',
+    value: props.summary.client_model_count,
+    tone: 'accent' as const,
+  },
+  {
+    key: 'upstreamModels',
+    value: props.summary.upstream_model_count,
+    tone: 'plain' as const,
+  },
+  {
+    key: 'prices',
+    value: props.summary.price_count,
+    tone: 'plain' as const,
+  },
+  {
+    key: 'pendingPrices',
+    value: props.summary.pending_price_count,
+    tone: props.summary.pending_price_count > 0 ? ('warning' as const) : ('plain' as const),
+  },
+])
+
+const catalogTone = computed(() => {
+  if (!props.catalog.available) return 'neutral' as const
+  return props.catalog.error_code ? ('warning' as const) : ('success' as const)
+})
+
+const catalogLabel = computed(() => {
+  if (!props.catalog.available) return t('models.catalog.unavailable')
+  return props.catalog.error_code ? t('models.catalog.stale') : t('models.catalog.available')
+})
+</script>
+
+<template>
+  <section class="models-summary" :aria-label="t('models.summary.label')">
+    <dl class="models-summary__stats">
+      <div v-for="stat in stats" :key="stat.key" :data-tone="stat.tone">
+        <dt>{{ t(`models.summary.${stat.key}`) }}</dt>
+        <dd>{{ formatInteger(stat.value, locale) }}</dd>
+      </div>
+    </dl>
+
+    <div class="models-summary__catalog">
+      <StatusBadge size="compact" :tone="catalogTone">{{ catalogLabel }}</StatusBadge>
+      <p v-if="catalog.successful_fetch_at_ms > 0">
+        <span>{{ t('models.catalog.lastSuccess') }}</span>
+        <AppDateTime :instant="catalog.successful_fetch_at_ms" :locale="locale" />
+      </p>
+      <p v-if="catalog.error_code" class="models-summary__catalog-error">
+        <code>{{ catalog.error_code }}</code>
+        <template v-if="catalog.checked_at_ms > 0">
+          <span>{{ t('models.catalog.lastCheck') }}</span>
+          <AppDateTime :instant="catalog.checked_at_ms" :locale="locale" />
+        </template>
+      </p>
+      <RouterLink
+        v-if="summary.unreferenced_price_count > 0"
+        class="models-summary__unreferenced"
+        :to="modelPricesLocation()"
+      >
+        {{
+          t('models.summary.unreferencedPrices', {
+            count: formatInteger(summary.unreferenced_price_count, locale),
+          })
+        }}
+      </RouterLink>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.models-summary {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-4) var(--space-6);
+}
+
+.models-summary__stats {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  overflow: hidden;
+  gap: 1px;
+  margin: 0;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-card);
+  background: var(--color-border-subtle);
+}
+
+.models-summary__stats > div {
+  min-width: 0;
+  background: var(--color-surface);
+  padding: var(--space-3) var(--space-4);
+}
+
+.models-summary__stats dt {
+  overflow: hidden;
+  color: var(--color-text-faint);
+  font-size: var(--text-label-xs);
+  font-weight: 560;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.models-summary__stats dd {
+  margin: var(--space-1) 0 0;
+  font-family: var(--font-mono);
+  font-size: 22px;
+  font-weight: 580;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+}
+
+.models-summary__stats > div[data-tone='accent'] dd {
+  color: var(--color-action);
+}
+
+.models-summary__stats > div[data-tone='warning'] dd {
+  color: var(--color-warning);
+}
+
+.models-summary__catalog {
+  display: grid;
+  justify-items: end;
+  gap: var(--space-1);
+}
+
+.models-summary__catalog p {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-1);
+  margin: 0;
+  color: var(--color-text-faint);
+  font-size: var(--text-label-xs);
+}
+
+.models-summary__catalog-error code {
+  color: var(--color-warning);
+  font-size: var(--text-label-xs);
+}
+
+.models-summary__unreferenced {
+  color: var(--color-action);
+  font-size: var(--text-label-xs);
+  font-weight: 600;
+}
+
+@media (max-width: 980px) {
+  .models-summary {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .models-summary__catalog {
+    justify-items: start;
+  }
+}
+
+@media (max-width: 620px) {
+  .models-summary__stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+</style>
diff --git a/web/src/features/models/ModelTreeCollection.vue b/web/src/features/models/ModelTreeCollection.vue
deleted file mode 100644
index aa42a827..00000000
--- a/web/src/features/models/ModelTreeCollection.vue
+++ /dev/null
@@ -1,372 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import type { ClientModelDto, ModelPriceBranchDto, ModelUpstreamDto } from '@/app/resources/models'
-import CopyChip from '@/components/ui/CopyChip.vue'
-import StatusBadge from '@/components/ui/StatusBadge.vue'
-
-import ModelTreePriceRow from './ModelTreePriceRow.vue'
-
-const props = defineProps<{
-  items: ClientModelDto[]
-}>()
-const emit = defineEmits<{
-  edit: [scope: ModelPriceBranchDto, trigger: HTMLElement]
-}>()
-const { t } = useI18n()
-
-interface ClientModelPresentation {
-  model: ClientModelDto
-  scopes: ModelPriceBranchDto[]
-  pending: number
-  simpleScope: ModelPriceBranchDto | null
-  showUpstreamLayer: boolean
-}
-
-const presentations = computed<ClientModelPresentation[]>(() =>
-  props.items.map((model) => {
-    const scopes = model.upstream_models.flatMap(({ prices }) => prices)
-    const pending = scopes.filter(({ price }) => price.pricing_status === 'pending').length
-    const upstream = model.upstream_models[0]
-    const simpleScope =
-      model.upstream_models.length === 1 &&
-      upstream !== undefined &&
-      !upstream.alias_applied &&
-      upstream.prices.length === 1
-        ? (upstream.prices[0] ?? null)
-        : null
-    return {
-      model,
-      scopes,
-      pending,
-      simpleScope,
-      showUpstreamLayer:
-        model.upstream_models.length > 1 ||
-        model.upstream_models.some(({ alias_applied }) => alias_applied),
-    }
-  }),
-)
-
-function priceSummary(presentation: ClientModelPresentation): string {
-  return presentation.pending > 0
-    ? t('models.tree.pricesWithPending', {
-        count: presentation.scopes.length,
-        pending: presentation.pending,
-      })
-    : t('models.tree.prices', { count: presentation.scopes.length })
-}
-
-function upstreamSummary(upstream: ModelUpstreamDto): string {
-  const pending = upstream.prices.filter(({ price }) => price.pricing_status === 'pending').length
-  return pending > 0
-    ? t('models.tree.pricesWithPending', {
-        count: upstream.prices.length,
-        pending,
-      })
-    : t('models.tree.prices', { count: upstream.prices.length })
-}
-
-function forwardEdit(scope: ModelPriceBranchDto, trigger: HTMLElement): void {
-  emit('edit', scope, trigger)
-}
-</script>
-
-<template>
-  <section class="model-tree-collection" :aria-label="t('models.tree.label')">
-    <div class="model-tree-collection__header" aria-hidden="true">
-      <span>{{ t('models.tree.columns.structure') }}</span>
-      <span>{{ t('models.tree.columns.status') }}</span>
-      <span>{{ t('models.tree.columns.prices') }}</span>
-      <span>{{ t('models.tree.columns.facts') }}</span>
-    </div>
-
-    <article
-      v-for="presentation in presentations"
-      :key="presentation.model.client_model"
-      class="model-tree-client"
-    >
-      <ModelTreePriceRow
-        v-if="presentation.simpleScope"
-        :scope="presentation.simpleScope"
-        :client-model="presentation.model.client_model"
-        @edit="forwardEdit"
-      />
-
-      <template v-else>
-        <header class="model-tree-client__header">
-          <div class="model-tree-client__identity">
-            <span>{{ t('models.tree.clientModel') }}</span>
-            <CopyChip
-              :value="presentation.model.client_model"
-              :label="t('models.tree.copy', { model: presentation.model.client_model })"
-              :success-label="t('models.tree.copySucceeded')"
-              :failure-label="t('models.tree.copyFailed')"
-            />
-          </div>
-          <div class="model-tree-client__protocols">
-            <span v-for="protocol in presentation.model.protocols" :key="protocol">
-              {{ t(`common.protocols.${protocol}`) }}
-            </span>
-          </div>
-          <StatusBadge :tone="presentation.pending > 0 ? 'warning' : 'success'" size="compact">
-            {{ priceSummary(presentation) }}
-          </StatusBadge>
-        </header>
-
-        <div class="model-tree-client__body">
-          <section
-            v-for="upstream in presentation.model.upstream_models"
-            :key="upstream.model_id"
-            class="model-tree-upstream"
-            :class="{
-              'model-tree-upstream--visible': presentation.showUpstreamLayer,
-              'model-tree-upstream--direct': !presentation.showUpstreamLayer,
-            }"
-          >
-            <header v-if="presentation.showUpstreamLayer" class="model-tree-upstream__header">
-              <div>
-                <span>{{ t('models.tree.upstreamModel') }}</span>
-                <strong>{{ upstream.model_id }}</strong>
-                <small v-if="!upstream.alias_applied">{{ t('models.tree.directModel') }}</small>
-              </div>
-              <span>{{ upstreamSummary(upstream) }}</span>
-            </header>
-
-            <div class="model-tree-upstream__prices">
-              <ModelTreePriceRow
-                v-for="scope in upstream.prices"
-                :key="scope.price.id"
-                :scope="scope"
-                @edit="forwardEdit"
-              />
-            </div>
-          </section>
-        </div>
-      </template>
-    </article>
-  </section>
-</template>
-
-<style scoped>
-.model-tree-collection {
-  min-width: 0;
-  border-bottom: 1px solid var(--color-border-control);
-}
-
-.model-tree-collection__header {
-  display: grid;
-  min-height: 38px;
-  grid-template-columns:
-    minmax(300px, 1.45fr) minmax(92px, 0.38fr) minmax(300px, 1.2fr)
-    minmax(170px, 0.62fr);
-  align-items: center;
-  gap: var(--space-4);
-  border-bottom: 1px solid var(--color-border-control);
-  color: var(--color-text-faint);
-  padding-inline: var(--space-2);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  letter-spacing: 0.04em;
-}
-
-.model-tree-client {
-  min-width: 0;
-  border-bottom: 1px solid var(--color-border-control);
-}
-
-.model-tree-client:last-child {
-  border-bottom: 0;
-}
-
-.model-tree-client__header {
-  display: grid;
-  min-height: 58px;
-  grid-template-columns: minmax(220px, 1fr) minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--space-4);
-  background: var(--color-surface-sunken);
-  padding: var(--space-2-5) var(--space-2);
-}
-
-.model-tree-client__identity {
-  display: grid;
-  min-width: 0;
-  gap: 1px;
-}
-
-.model-tree-client__identity > span,
-.model-tree-upstream__header span,
-.model-tree-upstream__header small {
-  color: var(--color-text-faint);
-  font-size: var(--text-label-xs);
-}
-
-.model-tree-client__protocols {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--space-1);
-}
-
-.model-tree-client__protocols span {
-  border-radius: var(--radius-tag);
-  background: var(--color-tag);
-  color: var(--color-text-muted);
-  padding: 3px 7px;
-  font-size: var(--text-label-xs);
-}
-
-.model-tree-client__body {
-  padding-left: var(--space-4);
-}
-
-.model-tree-upstream {
-  position: relative;
-  min-width: 0;
-  border-left: 1px solid var(--color-border-control);
-}
-
-.model-tree-upstream + .model-tree-upstream {
-  border-top: 1px solid var(--color-border-control);
-}
-
-.model-tree-upstream--direct {
-  border-left: 0;
-}
-
-.model-tree-upstream__header {
-  position: relative;
-  display: flex;
-  min-height: 48px;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-4);
-  border-bottom: 1px solid var(--color-border-subtle);
-  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
-}
-
-.model-tree-upstream__header::before {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: var(--space-3);
-  border-top: 1px solid var(--color-border-control);
-  content: '';
-}
-
-.model-tree-upstream__header > div {
-  display: grid;
-  min-width: 0;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: baseline;
-  gap: var(--space-2);
-}
-
-.model-tree-upstream__header strong {
-  overflow: hidden;
-  font-family: var(--font-mono);
-  font-size: var(--text-meta);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.model-tree-upstream__header > span {
-  flex: none;
-}
-
-.model-tree-upstream__prices {
-  padding-left: var(--space-4);
-}
-
-.model-tree-upstream--direct .model-tree-upstream__prices {
-  padding-left: 0;
-}
-
-@media (max-width: 1120px) {
-  .model-tree-collection__header {
-    grid-template-columns:
-      minmax(260px, 1.3fr) minmax(88px, 0.35fr) minmax(270px, 1.1fr)
-      minmax(150px, 0.55fr);
-    gap: var(--space-2-5);
-  }
-}
-
-@media (max-width: 860px) {
-  .model-tree-collection {
-    display: grid;
-    gap: var(--space-3);
-    border-bottom: 0;
-  }
-
-  .model-tree-collection__header {
-    display: none;
-  }
-
-  .model-tree-client {
-    overflow: hidden;
-    border: 1px solid var(--color-border-subtle);
-    border-radius: var(--radius-control);
-    background: var(--color-surface);
-    padding: var(--space-4);
-  }
-
-  .model-tree-client:last-child {
-    border-bottom: 1px solid var(--color-border-subtle);
-  }
-
-  .model-tree-client__header {
-    min-height: 0;
-    grid-template-columns: minmax(0, 1fr) auto;
-    gap: var(--space-2) var(--space-3);
-    background: transparent;
-    padding: 0 0 var(--space-3);
-  }
-
-  .model-tree-client__protocols {
-    grid-column: 1 / -1;
-    grid-row: 2;
-  }
-
-  .model-tree-client__body {
-    padding-left: 0;
-  }
-
-  .model-tree-upstream,
-  .model-tree-upstream--direct {
-    border-left: 0;
-  }
-
-  .model-tree-upstream + .model-tree-upstream {
-    margin-top: var(--space-3);
-    padding-top: var(--space-3);
-  }
-
-  .model-tree-upstream__header {
-    min-height: 0;
-    align-items: flex-start;
-    flex-direction: column;
-    gap: var(--space-1);
-    padding: var(--space-2-5) 0;
-  }
-
-  .model-tree-upstream__header::before {
-    display: none;
-  }
-
-  .model-tree-upstream__header > div {
-    grid-template-columns: auto minmax(0, 1fr);
-  }
-
-  .model-tree-upstream__header small {
-    grid-column: 2;
-  }
-
-  .model-tree-upstream__prices,
-  .model-tree-upstream--direct .model-tree-upstream__prices {
-    padding-left: var(--space-3);
-    border-left: 1px solid var(--color-border-control);
-  }
-}
-</style>
diff --git a/web/src/features/models/ModelTreePriceRow.vue b/web/src/features/models/ModelTreePriceRow.vue
deleted file mode 100644
index 39c4080d..00000000
--- a/web/src/features/models/ModelTreePriceRow.vue
+++ /dev/null
@@ -1,501 +0,0 @@
-<script setup lang="ts">
-import { Pencil } from '@lucide/vue'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import type { ModelCatalogMetadataDto, ModelPriceBranchDto } from '@/app/resources/models'
-import { groupDetailLocation } from '@/app/route-locations'
-import CopyChip from '@/components/ui/CopyChip.vue'
-import IconButton from '@/components/ui/IconButton.vue'
-import StatusBadge from '@/components/ui/StatusBadge.vue'
-import ModelPriceResetDialog from '@/features/model-prices/ModelPriceResetDialog.vue'
-import { presentModelPrice } from '@/features/model-prices/model-price-presenter'
-
-const props = withDefaults(
-  defineProps<{
-    scope: ModelPriceBranchDto
-    clientModel?: string
-  }>(),
-  { clientModel: undefined },
-)
-const emit = defineEmits<{
-  edit: [scope: ModelPriceBranchDto, trigger: HTMLElement]
-}>()
-const { n, t } = useI18n()
-
-const presentation = computed(() =>
-  presentModelPrice(props.scope.price, {
-    unavailable: t('modelPrices.values.unavailable'),
-    free: t('modelPrices.values.free'),
-    configured: (value) => t('modelPrices.values.configured', { value }),
-  }),
-)
-const catalogMetadata = computed(() => props.scope.catalog_reference?.model ?? null)
-const hasDistinctGlobalImpact = computed(() => {
-  if (props.scope.route_groups.length !== props.scope.affected_groups.length) return true
-  const routeGroupIDs = new Set(props.scope.route_groups.map(({ id }) => id))
-  return props.scope.affected_groups.some(({ id }) => !routeGroupIDs.has(id))
-})
-
-function metadataFacts(metadata: ModelCatalogMetadataDto): string[] {
-  const result: string[] = []
-  if (metadata.family) result.push(t('models.tree.metadata.family', { value: metadata.family }))
-  if (metadata.status) result.push(t('models.tree.metadata.status', { value: metadata.status }))
-  if (metadata.limits.context !== null) {
-    result.push(t('models.tree.metadata.context', { value: n(metadata.limits.context) }))
-  }
-  if (metadata.limits.input !== null) {
-    result.push(t('models.tree.metadata.inputLimit', { value: n(metadata.limits.input) }))
-  }
-  if (metadata.limits.output !== null) {
-    result.push(t('models.tree.metadata.outputLimit', { value: n(metadata.limits.output) }))
-  }
-  if (metadata.modalities.input.length > 0) {
-    result.push(
-      t('models.tree.metadata.inputModalities', { value: metadata.modalities.input.join(', ') }),
-    )
-  }
-  if (metadata.modalities.output.length > 0) {
-    result.push(
-      t('models.tree.metadata.outputModalities', { value: metadata.modalities.output.join(', ') }),
-    )
-  }
-  if (metadata.release_date) {
-    result.push(t('models.tree.metadata.releaseDate', { value: metadata.release_date }))
-  }
-  if (metadata.last_updated) {
-    result.push(t('models.tree.metadata.lastUpdated', { value: metadata.last_updated }))
-  }
-  if (metadata.knowledge) {
-    result.push(t('models.tree.metadata.knowledge', { value: metadata.knowledge }))
-  }
-  if (metadata.open_weights === true) result.push(t('models.tree.metadata.openWeights'))
-  for (const capability of [
-    'attachment',
-    'reasoning',
-    'tool_call',
-    'structured_output',
-    'temperature',
-  ] as const) {
-    if (metadata.capabilities[capability] === true) {
-      result.push(t(`models.tree.metadata.capabilities.${capability}`))
-    }
-  }
-  return result
-}
-
-function methodLabel(): string {
-  const row = props.scope.price
-  if (row.method === null) return t('modelPrices.method.pending')
-  if (row.method === 'auto_matched') {
-    return t('modelPrices.method.auto_matched', { provider: row.matched_provider_id })
-  }
-  return t(`modelPrices.method.${row.method}`)
-}
-
-function edit(trigger: HTMLElement): void {
-  emit('edit', props.scope, trigger)
-}
-</script>
-
-<template>
-  <article class="model-tree-price-row" :class="{ 'model-tree-price-row--root': clientModel }">
-    <div class="model-tree-price-row__structure">
-      <div class="model-tree-price-row__identity">
-        <span class="model-tree-price-row__kind">
-          {{
-            clientModel
-              ? t('models.tree.clientModel')
-              : t(`models.tree.scope.${scope.price.scope.kind}`)
-          }}
-        </span>
-        <CopyChip
-          v-if="clientModel"
-          :value="clientModel"
-          :label="t('models.tree.copy', { model: clientModel })"
-          :success-label="t('models.tree.copySucceeded')"
-          :failure-label="t('models.tree.copyFailed')"
-        />
-        <strong v-else>{{ scope.price.scope.label }}</strong>
-        <small v-if="clientModel">
-          {{ t(`models.tree.scope.${scope.price.scope.kind}`) }} ·
-          {{ scope.price.scope.label }}
-        </small>
-      </div>
-
-      <div v-if="scope.catalog_reference && catalogMetadata" class="model-tree-price-row__catalog">
-        <span class="model-tree-price-row__catalog-source">
-          {{
-            t(`models.tree.catalogReference.${scope.catalog_reference.source}`, {
-              provider: scope.catalog_reference.provider_name,
-            })
-          }}
-          · {{ catalogMetadata.name }}
-        </span>
-        <p v-if="catalogMetadata.description">{{ catalogMetadata.description }}</p>
-        <div v-if="metadataFacts(catalogMetadata).length" class="model-tree-price-row__metadata">
-          <span v-for="fact in metadataFacts(catalogMetadata)" :key="fact">{{ fact }}</span>
-        </div>
-      </div>
-
-      <div class="model-tree-price-row__groups">
-        <span>
-          {{
-            hasDistinctGlobalImpact
-              ? t('models.tree.routeGroups')
-              : scope.route_groups.length > 1
-                ? t('models.tree.groupCount', { count: scope.route_groups.length })
-                : t('models.tree.groups')
-          }}
-        </span>
-        <ul
-          :class="{
-            'model-tree-price-row__group-list--shared': scope.route_groups.length > 1,
-          }"
-        >
-          <li v-for="group in scope.route_groups" :key="group.id">
-            <RouterLink :to="groupDetailLocation(group.id)">{{ group.name }}</RouterLink>
-            <small>{{ group.provider_id ?? t('models.tree.customProvider') }}</small>
-            <small>{{
-              group.protocols.map((value) => t(`common.protocols.${value}`)).join(' · ')
-            }}</small>
-            <span :data-enabled="group.enabled">
-              {{ group.enabled ? t('models.tree.groupEnabled') : t('models.tree.groupDisabled') }}
-            </span>
-          </li>
-        </ul>
-        <template v-if="hasDistinctGlobalImpact">
-          <span class="model-tree-price-row__global-impact">
-            {{ t('models.tree.globalImpact', { count: scope.affected_groups.length }) }}
-          </span>
-          <ul class="model-tree-price-row__group-list--shared">
-            <li v-for="group in scope.affected_groups" :key="group.id">
-              <RouterLink :to="groupDetailLocation(group.id)">{{ group.name }}</RouterLink>
-              <span :data-enabled="group.enabled">
-                {{ group.enabled ? t('models.tree.groupEnabled') : t('models.tree.groupDisabled') }}
-              </span>
-            </li>
-          </ul>
-        </template>
-      </div>
-    </div>
-
-    <div class="model-tree-price-row__status">
-      <span class="model-tree-price-row__mobile-label">{{ t('models.tree.columns.status') }}</span>
-      <StatusBadge
-        size="compact"
-        :tone="scope.price.pricing_status === 'configured' ? 'success' : 'warning'"
-      >
-        {{ t(`modelPrices.status.${scope.price.pricing_status}`) }}
-      </StatusBadge>
-      <small v-if="scope.price.partial">{{ t('modelPrices.facts.partial') }}</small>
-      <small v-if="scope.price.has_context_tiers">{{ t('modelPrices.facts.tiered') }}</small>
-    </div>
-
-    <div class="model-tree-price-row__prices">
-      <span class="model-tree-price-row__mobile-label">{{ t('models.tree.columns.prices') }}</span>
-      <div
-        v-for="slot in presentation.slots"
-        :key="slot.field"
-        class="model-tree-price-row__price-slot"
-        :data-state="slot.state"
-      >
-        <span>{{ t(`modelPrices.fields.${slot.field}`) }}</span>
-        <strong>{{ slot.value }}</strong>
-      </div>
-    </div>
-
-    <div class="model-tree-price-row__facts">
-      <span class="model-tree-price-row__mobile-label">{{ t('models.tree.columns.facts') }}</span>
-      <strong>{{ methodLabel() }}</strong>
-      <small v-if="scope.price.method === 'auto_sync'">
-        {{ t('modelPrices.reference', { provider: scope.price.matched_provider_id }) }}
-      </small>
-      <small>
-        {{
-          t('modelPrices.references', {
-            entries: scope.price.reference_count,
-            groups: scope.price.reference_group_count,
-          })
-        }}
-      </small>
-      <div class="model-tree-price-row__actions">
-        <IconButton
-          variant="ghost"
-          tone="action"
-          size="compact"
-          :label="t('modelPrices.edit.open', { model: scope.price.model_id })"
-          @click="edit($event.currentTarget as HTMLElement)"
-        >
-          <Pencil :size="15" aria-hidden="true" />
-        </IconButton>
-        <ModelPriceResetDialog v-if="scope.price.can_reset" :row="scope.price" action="reset" />
-      </div>
-    </div>
-  </article>
-</template>
-
-<style scoped>
-.model-tree-price-row {
-  display: grid;
-  min-width: 0;
-  grid-template-columns:
-    minmax(300px, 1.45fr) minmax(92px, 0.38fr) minmax(300px, 1.2fr)
-    minmax(170px, 0.62fr);
-  align-items: stretch;
-  gap: var(--space-4);
-  border-top: 1px solid var(--color-border-subtle);
-  padding: var(--space-3-5) var(--space-2);
-}
-
-.model-tree-price-row--root {
-  border-top: 0;
-  padding-block: var(--space-4);
-}
-
-.model-tree-price-row__structure,
-.model-tree-price-row__identity,
-.model-tree-price-row__catalog,
-.model-tree-price-row__groups,
-.model-tree-price-row__status,
-.model-tree-price-row__facts {
-  display: grid;
-  min-width: 0;
-  align-content: start;
-}
-
-.model-tree-price-row__structure {
-  gap: var(--space-2-5);
-}
-
-.model-tree-price-row__identity {
-  gap: 2px;
-}
-
-.model-tree-price-row__kind,
-.model-tree-price-row__catalog-source,
-.model-tree-price-row__groups > span,
-.model-tree-price-row__identity small,
-.model-tree-price-row__status small,
-.model-tree-price-row__facts small {
-  color: var(--color-text-faint);
-  font-size: var(--text-label-xs);
-}
-
-.model-tree-price-row__identity > strong {
-  overflow: hidden;
-  font-family: var(--font-mono);
-  font-size: var(--text-meta);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.model-tree-price-row__catalog {
-  gap: var(--space-1);
-}
-
-.model-tree-price-row__catalog p {
-  display: -webkit-box;
-  overflow: hidden;
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--text-sm);
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.model-tree-price-row__metadata {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 6px;
-}
-
-.model-tree-price-row__metadata span,
-.model-tree-price-row__groups li > span {
-  border-radius: var(--radius-tag);
-  background: var(--color-tag);
-  color: var(--color-text-muted);
-  padding: 2px 6px;
-  font-size: var(--text-label-xs);
-}
-
-.model-tree-price-row__groups {
-  gap: var(--space-1);
-}
-
-.model-tree-price-row__groups > .model-tree-price-row__global-impact {
-  margin-top: var(--space-1);
-  color: var(--color-warning);
-  font-weight: 600;
-}
-
-.model-tree-price-row__groups ul {
-  display: grid;
-  gap: var(--space-1);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.model-tree-price-row__groups li {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 4px 7px;
-  color: var(--color-text-muted);
-  font-size: var(--text-sm);
-}
-
-.model-tree-price-row__groups a {
-  color: var(--color-action);
-  font-weight: 600;
-}
-
-.model-tree-price-row__groups small {
-  color: var(--color-text-faint);
-}
-
-.model-tree-price-row__groups li > span[data-enabled='false'] {
-  color: var(--color-text-faint);
-}
-
-.model-tree-price-row__status,
-.model-tree-price-row__facts {
-  justify-items: start;
-  gap: var(--space-1);
-}
-
-.model-tree-price-row__prices {
-  display: grid;
-  min-width: 0;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  align-content: start;
-  gap: var(--space-2);
-}
-
-.model-tree-price-row__price-slot {
-  min-width: 0;
-  border-left: 1px solid var(--color-border-subtle);
-  padding-left: var(--space-2);
-}
-
-.model-tree-price-row__price-slot:first-of-type {
-  border-left: 0;
-  padding-left: 0;
-}
-
-.model-tree-price-row__price-slot > span,
-.model-tree-price-row__mobile-label {
-  display: block;
-  overflow: hidden;
-  color: var(--color-text-faint);
-  font-size: var(--text-label-xs);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.model-tree-price-row__price-slot strong {
-  display: block;
-  overflow: hidden;
-  margin-top: var(--space-0-5);
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.model-tree-price-row__price-slot[data-state='unavailable'] strong {
-  color: var(--color-text-faint);
-  font-family: var(--font-sans);
-  font-weight: 500;
-}
-
-.model-tree-price-row__price-slot[data-state='free'] strong {
-  color: var(--color-success);
-}
-
-.model-tree-price-row__facts > strong {
-  font-size: var(--text-sm);
-}
-
-.model-tree-price-row__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-0-5);
-  margin-top: var(--space-1);
-}
-
-.model-tree-price-row__mobile-label {
-  display: none;
-}
-
-@media (max-width: 1120px) {
-  .model-tree-price-row {
-    grid-template-columns:
-      minmax(260px, 1.3fr) minmax(88px, 0.35fr) minmax(270px, 1.1fr)
-      minmax(150px, 0.55fr);
-    gap: var(--space-2-5);
-  }
-}
-
-@media (max-width: 860px) {
-  .model-tree-price-row,
-  .model-tree-price-row--root {
-    grid-template-columns: minmax(0, 1fr) auto;
-    gap: var(--space-3) var(--space-4);
-    border-top: 1px solid var(--color-border-subtle);
-    padding: var(--space-4) 0 0;
-  }
-
-  .model-tree-price-row--root {
-    border-top: 0;
-    padding-top: 0;
-  }
-
-  .model-tree-price-row__structure {
-    grid-column: 1;
-    grid-row: 1;
-  }
-
-  .model-tree-price-row__status {
-    grid-column: 2;
-    grid-row: 1;
-    justify-self: end;
-  }
-
-  .model-tree-price-row__prices {
-    grid-column: 1 / -1;
-    grid-row: 2;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .model-tree-price-row__facts {
-    grid-column: 1 / -1;
-    grid-row: 3;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: center;
-    border-top: 1px solid var(--color-border-subtle);
-    padding-top: var(--space-2-5);
-  }
-
-  .model-tree-price-row__facts > strong,
-  .model-tree-price-row__facts > small {
-    grid-column: 1;
-  }
-
-  .model-tree-price-row__actions {
-    grid-column: 2;
-    grid-row: 1 / span 4;
-    margin-top: 0;
-  }
-
-  .model-tree-price-row__mobile-label {
-    display: block;
-  }
-
-  .model-tree-price-row__prices > .model-tree-price-row__mobile-label {
-    grid-column: 1 / -1;
-  }
-}
-</style>
diff --git a/web/src/features/models/ModelsView.vue b/web/src/features/models/ModelsView.vue
index 8ccc319d..1ce77379 100644
--- a/web/src/features/models/ModelsView.vue
+++ b/web/src/features/models/ModelsView.vue
@@ -21,7 +21,6 @@ import CollectionFilterBar from '@/components/collection/CollectionFilterBar.vue
 import LedgerSheet from '@/components/layout/LedgerSheet.vue'
 import PageFrame from '@/components/layout/PageFrame.vue'
 import AppButton from '@/components/ui/AppButton.vue'
-import AppDateTime from '@/components/ui/AppDateTime.vue'
 import AppSearchInput from '@/components/ui/AppSearchInput.vue'
 import AppSelect from '@/components/ui/AppSelect.vue'
 import EmptyState from '@/components/ui/EmptyState.vue'
@@ -29,13 +28,13 @@ import InlineFeedback from '@/components/ui/InlineFeedback.vue'
 import PageHeader from '@/components/ui/PageHeader.vue'
 import PaginationBar from '@/components/ui/PaginationBar.vue'
 import QueryFeedback from '@/components/ui/QueryFeedback.vue'
-import StatusBadge from '@/components/ui/StatusBadge.vue'
 import ModelPriceDrawer from '@/features/model-prices/ModelPriceDrawer.vue'
 
-import ModelTreeCollection from './ModelTreeCollection.vue'
+import ModelCollection from './ModelCollection.vue'
+import ModelSummaryStrip from './ModelSummaryStrip.vue'
 
 const client = useApiClient()
-const { locale, n, t } = useI18n()
+const { n, t } = useI18n()
 const searchDraft = ref('')
 const appliedSearch = ref<string | undefined>()
 const groupStatus = ref<ModelCollectionGroupStatus>('enabled')
@@ -81,14 +80,6 @@ const pricingStatusOptions = computed(() =>
     label: t(`models.filters.pricingStatus.${value}`),
   })),
 )
-const catalogTone = computed(() => {
-  if (!data.value?.catalog.available) return 'neutral' as const
-  return data.value.catalog.error_code ? ('warning' as const) : ('success' as const)
-})
-const catalogLabel = computed(() => {
-  if (!data.value?.catalog.available) return t('models.catalog.unavailable')
-  return data.value.catalog.error_code ? t('models.catalog.stale') : t('models.catalog.available')
-})
 
 watch(
   [() => data.value?.pagination.total_pages, page, () => modelsQuery.isPlaceholderData.value],
@@ -140,8 +131,8 @@ function resetConditions(): void {
   page.value = 1
 }
 
-function editScope(scope: ModelPriceBranchDto, trigger: HTMLElement): void {
-  selected.value = scope
+function editBranch(branch: ModelPriceBranchDto, trigger: HTMLElement): void {
+  selected.value = branch
   restoreFocus = trigger
   drawerOpen.value = true
 }
@@ -211,46 +202,7 @@ onBeforeUnmount(() => searchDebounce.cancel())
           @retry="modelsQuery.refetch()"
         />
 
-        <InlineFeedback appearance="ledger" tone="neutral">
-          {{ t('models.context') }}
-        </InlineFeedback>
-
-        <section class="models-page__overview" :aria-label="t('models.summary.label')">
-          <dl class="models-page__summary">
-            <div>
-              <dt>{{ t('models.summary.clientModels') }}</dt>
-              <dd>{{ n(data.summary.client_model_count) }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('models.summary.upstreamModels') }}</dt>
-              <dd>{{ n(data.summary.upstream_model_count) }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('models.summary.prices') }}</dt>
-              <dd>{{ n(data.summary.price_count) }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('models.summary.pendingPrices') }}</dt>
-              <dd>{{ n(data.summary.pending_price_count) }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('models.summary.unreferencedPrices') }}</dt>
-              <dd>{{ n(data.summary.unreferenced_price_count) }}</dd>
-            </div>
-          </dl>
-          <div class="models-page__catalog-status">
-            <StatusBadge size="compact" :tone="catalogTone">{{ catalogLabel }}</StatusBadge>
-            <span v-if="data.catalog.successful_fetch_at_ms > 0">
-              {{ t('models.catalog.lastSuccess') }}
-              <AppDateTime :instant="data.catalog.successful_fetch_at_ms" :locale="locale" />
-            </span>
-            <span v-if="data.catalog.checked_at_ms > 0">
-              {{ t('models.catalog.lastCheck') }}
-              <AppDateTime :instant="data.catalog.checked_at_ms" :locale="locale" />
-            </span>
-            <code v-if="data.catalog.error_code">{{ data.catalog.error_code }}</code>
-          </div>
-        </section>
+        <ModelSummaryStrip :summary="data.summary" :catalog="data.catalog" />
 
         <CollectionFilterBar
           class="models-page__filters"
@@ -279,9 +231,9 @@ onBeforeUnmount(() => searchDebounce.cancel())
             />
           </label>
           <label class="collection-filter-field">
-            <span class="collection-filter-label">{{
-              t('models.filters.pricingStatusLabel')
-            }}</span>
+            <span class="collection-filter-label">
+              {{ t('models.filters.pricingStatusLabel') }}
+            </span>
             <AppSelect
               size="compact"
               :label="t('models.filters.pricingStatusLabel')"
@@ -333,7 +285,7 @@ onBeforeUnmount(() => searchDebounce.cancel())
         </EmptyState>
 
         <template v-else>
-          <ModelTreeCollection :items="data.items" @edit="editScope" />
+          <ModelCollection :items="data.items" @edit="editBranch" />
           <PaginationBar
             :page="data.pagination.page"
             :page-size="data.pagination.page_size"
@@ -345,6 +297,8 @@ onBeforeUnmount(() => searchDebounce.cancel())
             @update:page-size="setPageSize"
           />
         </template>
+
+        <p class="models-page__footnote">{{ t('models.context') }}</p>
       </template>
 
       <ModelPriceDrawer
@@ -372,66 +326,18 @@ onBeforeUnmount(() => searchDebounce.cancel())
   font-size: var(--text-meta);
 }
 
-.models-page__overview {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--space-4);
-  border-block: 1px solid var(--color-border-subtle);
-  padding-block: var(--space-3);
-}
-
-.models-page__summary {
-  display: grid;
-  min-width: 0;
-  grid-template-columns: repeat(5, minmax(96px, 1fr));
-  gap: var(--space-3);
-  margin: 0;
-}
-
-.models-page__summary div {
-  display: grid;
-  gap: 2px;
-}
-
-.models-page__summary dt,
-.models-page__catalog-status span {
+.models-page__footnote {
+  margin: calc(var(--space-4-5) * -0.45) 0 0;
   color: var(--color-text-faint);
   font-size: var(--text-label-xs);
 }
 
-.models-page__summary dd {
-  margin: 0;
-  font-family: var(--font-mono);
-  font-size: var(--text-meta);
-  font-weight: 650;
-}
-
-.models-page__catalog-status {
-  display: grid;
-  justify-items: end;
-  gap: 3px;
-}
-
-.models-page__catalog-status code {
-  color: var(--color-warning);
-  font-size: var(--text-label-xs);
-}
-
 .models-page :deep(.models-page__filters.collection-filter-bar) {
   grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(142px, 0.42fr));
   padding-top: var(--space-1);
 }
 
 @media (max-width: 980px) {
-  .models-page__overview {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .models-page__catalog-status {
-    justify-items: start;
-  }
-
   .models-page :deep(.models-page__filters.collection-filter-bar) {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -442,10 +348,6 @@ onBeforeUnmount(() => searchDebounce.cancel())
 }
 
 @media (max-width: 680px) {
-  .models-page__summary {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
   .models-page :deep(.page-header__actions) {
     width: 100%;
   }
diff --git a/web/src/features/models/model-presenter.ts b/web/src/features/models/model-presenter.ts
new file mode 100644
index 00000000..f6e1a0c0
--- /dev/null
+++ b/web/src/features/models/model-presenter.ts
@@ -0,0 +1,116 @@
+import type { ModelPriceBranchDto, ModelRouteGroupDto } from '@/app/resources/models'
+import type { ClientModelDto, ModelUpstreamDto } from '@/app/resources/models'
+import type { ModelPriceSlotsDto } from '@/app/resources/model-prices'
+
+/** 列表中直接展示的两个价格槽位，其余槽位只在展开详情中出现。 */
+export type ModelSummaryField = Extract<keyof ModelPriceSlotsDto, 'input' | 'output'>
+
+export type ModelPriceSummaryState = 'unavailable' | 'free' | 'single' | 'range'
+
+export interface ModelPriceFieldSummary {
+  field: ModelSummaryField
+  state: ModelPriceSummaryState
+  /** 原始 decimal 字符串，保持后端精度；range 时为区间下界。 */
+  value: string | null
+  /** range 时的区间上界。 */
+  upper: string | null
+}
+
+export type ModelUpstreamShape = 'direct' | 'alias' | 'multi'
+
+export interface ModelUpstreamSummary {
+  shape: ModelUpstreamShape
+  /** shape 为 alias 时的上游模型 ID。 */
+  modelID: string | null
+  count: number
+}
+
+export interface ModelScopePresentation {
+  upstream: ModelUpstreamDto
+  branch: ModelPriceBranchDto
+}
+
+export interface ClientModelPresentation {
+  model: ClientModelDto
+  scopes: ModelScopePresentation[]
+  pendingCount: number
+  status: 'configured' | 'pending'
+  upstream: ModelUpstreamSummary
+  routeGroups: ModelRouteGroupDto[]
+  input: ModelPriceFieldSummary
+  output: ModelPriceFieldSummary
+  /** 仅有一套价格时可以从列表直接编辑。 */
+  soleBranch: ModelPriceBranchDto | null
+}
+
+function summarizeUpstream(model: ClientModelDto): ModelUpstreamSummary {
+  const count = model.upstream_models.length
+  if (count !== 1) return { shape: 'multi', modelID: null, count }
+  const upstream = model.upstream_models[0]
+  if (upstream === undefined) return { shape: 'multi', modelID: null, count }
+  return upstream.alias_applied
+    ? { shape: 'alias', modelID: upstream.model_id, count }
+    : { shape: 'direct', modelID: upstream.model_id, count }
+}
+
+function collectRouteGroups(scopes: ModelScopePresentation[]): ModelRouteGroupDto[] {
+  const groups = new Map<number, ModelRouteGroupDto>()
+  for (const { branch } of scopes) {
+    for (const group of branch.route_groups) {
+      if (!groups.has(group.id)) groups.set(group.id, group)
+    }
+  }
+  return [...groups.values()].sort((left, right) =>
+    left.name === right.name ? left.id - right.id : left.name.localeCompare(right.name),
+  )
+}
+
+function summarizeField(
+  scopes: ModelScopePresentation[],
+  field: ModelSummaryField,
+): ModelPriceFieldSummary {
+  const priced = scopes
+    .map(({ branch }) => branch.price.prices[field])
+    .filter((value): value is string => value !== null)
+  if (priced.length === 0) {
+    return { field, state: 'unavailable', value: null, upper: null }
+  }
+
+  let lower = priced[0] as string
+  let upper = priced[0] as string
+  for (const value of priced) {
+    if (Number(value) < Number(lower)) lower = value
+    if (Number(value) > Number(upper)) upper = value
+  }
+  if (Number(lower) !== Number(upper)) {
+    return { field, state: 'range', value: lower, upper }
+  }
+  return { field, state: Number(lower) === 0 ? 'free' : 'single', value: lower, upper: null }
+}
+
+export function presentClientModel(model: ClientModelDto): ClientModelPresentation {
+  const scopes = model.upstream_models.flatMap((upstream) =>
+    upstream.prices.map((branch) => ({ upstream, branch })),
+  )
+  const pendingCount = scopes.filter(
+    ({ branch }) => branch.price.pricing_status === 'pending',
+  ).length
+  return {
+    model,
+    scopes,
+    pendingCount,
+    status: pendingCount > 0 ? 'pending' : 'configured',
+    upstream: summarizeUpstream(model),
+    routeGroups: collectRouteGroups(scopes),
+    input: summarizeField(scopes, 'input'),
+    output: summarizeField(scopes, 'output'),
+    soleBranch: scopes.length === 1 ? ((scopes[0] as ModelScopePresentation).branch ?? null) : null,
+  }
+}
+
+/** 价格范围是否影响了当前路由分组之外的分组。 */
+export function hasWiderPriceImpact(branch: ModelPriceBranchDto): boolean {
+  if (branch.route_groups.length !== branch.affected_groups.length) return true
+  const routed = new Set(branch.route_groups.map(({ id }) => id))
+  return branch.affected_groups.some(({ id }) => !routed.has(id))
+}
diff --git a/web/src/i18n/locales/en-US/models.ts b/web/src/i18n/locales/en-US/models.ts
index 309b0858..ad71dd8b 100644
--- a/web/src/i18n/locales/en-US/models.ts
+++ b/web/src/i18n/locales/en-US/models.ts
@@ -23,13 +23,13 @@ export default {
       upstreamModels: 'Upstream models',
       prices: 'Price records',
       pendingPrices: 'Pending prices',
-      unreferencedPrices: 'Unused prices',
+      unreferencedPrices: '{count} unused price records',
     },
     catalog: {
       available: 'Models.dev catalog available',
       stale: 'Sync failed; using the last successful catalog',
       unavailable: 'Models.dev catalog unavailable',
-      lastSuccess: 'Last success',
+      lastSuccess: 'Last sync',
       lastCheck: 'Last check',
     },
     drawerImpact: {
@@ -60,58 +60,61 @@ export default {
       noResultsTitle: 'No matching models',
       noResultsDescription: 'Adjust the search, Group status, or pricing status and try again',
     },
-    tree: {
-      label: 'Client model catalog',
+    collection: {
+      label: 'Client model list',
+      scrollHint: 'Scroll horizontally for more columns',
       columns: {
-        structure: 'Model and route structure',
-        status: 'Status',
+        model: 'Client model',
+        routing: 'Route Groups / protocols',
         prices: 'Prices · USD / 1M',
-        facts: 'Source / actions',
+        status: 'Status',
+        actions: 'Actions',
       },
-      clientModel: 'Client model',
+      direct: 'Passed through by the same name',
+      alias: 'Mapped to {model}',
+      multiUpstream: '{count} upstream models',
+      moreGroups: '+{count}',
+      scopeCount: '{count} price scopes',
+      pendingScopes: '{count} price scopes · {pending} pending',
+      priceRange: '{min} – {max}',
+      expand: 'Expand details for {model}',
+      collapse: 'Collapse details for {model}',
+      copy: 'Copy client model {model}',
+      copySucceeded: 'Client model copied',
+      copyFailed: 'Unable to copy the client model',
+    },
+    detail: {
       upstreamModel: 'Upstream model',
-      directModel: 'Direct name',
-      prices: '{count} price scopes',
-      pricesWithPending: '{count} price scopes · {pending} pending',
+      direct: 'Same name',
+      aliasApplied: 'Alias',
       scope: {
         provider: 'Provider price',
         group: 'Group-specific price',
       },
-      groups: 'Route Groups',
-      routeGroups: 'Current route Groups',
-      globalImpact: 'Global impact · {count} Groups',
-      groupCount: '{count} Groups share this price',
+      routeGroups: 'Route Groups',
       groupEnabled: 'Enabled',
       groupDisabled: 'Disabled',
-      customProvider: 'Custom provider',
-      copy: 'Copy client model {model}',
-      copySucceeded: 'Client model copied',
-      copyFailed: 'Unable to copy the client model',
+      globalImpact: 'This price affects {count} Groups in total',
       catalogReference: {
-        actual_provider: 'Models.dev actual provider · {provider}',
+        actual_provider: 'Models.dev · {provider}',
         reference_provider: 'Models.dev reference provider · {provider}',
       },
-      catalogUnavailable: 'No Models.dev model information',
-      metadata: {
-        family: 'Family {value}',
-        status: 'Status {value}',
-        context: 'Context {value}',
-        inputLimit: 'Max input {value}',
-        outputLimit: 'Max output {value}',
-        inputModalities: 'Input {value}',
-        outputModalities: 'Output {value}',
-        releaseDate: 'Released {value}',
-        lastUpdated: 'Updated {value}',
-        knowledge: 'Knowledge cutoff {value}',
-        openWeights: 'Open weights',
-        capabilities: {
-          attachment: 'Attachments',
-          reasoning: 'Reasoning',
-          tool_call: 'Tool calls',
-          structured_output: 'Structured output',
-          temperature: 'Temperature',
-        },
+      specs: {
+        context: 'Context',
+        maxOutput: 'Max output',
+        modalities: 'Modalities',
+        knowledge: 'Knowledge cutoff',
+        released: 'Released',
+        family: 'Family',
       },
+      capabilities: {
+        attachment: 'Attachments',
+        reasoning: 'Reasoning',
+        tool_call: 'Tool calls',
+        structured_output: 'Structured output',
+        temperature: 'Temperature',
+      },
+      openWeights: 'Open weights',
     },
   },
 } as const
diff --git a/web/src/i18n/locales/ja-JP/models.ts b/web/src/i18n/locales/ja-JP/models.ts
index ddd1a5f4..ad4bae9f 100644
--- a/web/src/i18n/locales/ja-JP/models.ts
+++ b/web/src/i18n/locales/ja-JP/models.ts
@@ -23,13 +23,13 @@ export default {
       upstreamModels: '上流モデル',
       prices: '価格レコード',
       pendingPrices: '価格待ち',
-      unreferencedPrices: '未使用価格',
+      unreferencedPrices: '未使用の価格レコード {count} 件',
     },
     catalog: {
       available: 'Models.dev カタログ利用可能',
       stale: '同期失敗・前回成功したカタログを使用中',
       unavailable: 'Models.dev カタログ利用不可',
-      lastSuccess: '最終成功',
+      lastSuccess: '最終同期',
       lastCheck: '最終確認',
     },
     drawerImpact: {
@@ -60,58 +60,61 @@ export default {
       noResultsTitle: '条件に一致するモデルがありません',
       noResultsDescription: '検索、Group の状態、価格状態を変更して再度お試しください',
     },
-    tree: {
-      label: 'クライアントモデルカタログ',
+    collection: {
+      label: 'クライアントモデル一覧',
+      scrollHint: '横スクロールで他の列を表示できます',
       columns: {
-        structure: 'モデルとルート構造',
-        status: '状態',
+        model: 'クライアントモデル',
+        routing: 'ルート Group / プロトコル',
         prices: '価格 · USD / 1M',
-        facts: '参照元 / 操作',
+        status: '状態',
+        actions: '操作',
       },
-      clientModel: 'クライアントモデル',
+      direct: '同名で直接転送',
+      alias: '{model} にマッピング',
+      multiUpstream: '上流モデル {count} 件',
+      moreGroups: '+{count}',
+      scopeCount: '価格範囲 {count} 件',
+      pendingScopes: '価格範囲 {count} 件 · {pending} 件が価格待ち',
+      priceRange: '{min} – {max}',
+      expand: '{model} の詳細を開く',
+      collapse: '{model} の詳細を閉じる',
+      copy: 'クライアントモデル {model} をコピー',
+      copySucceeded: 'クライアントモデルをコピーしました',
+      copyFailed: 'クライアントモデルをコピーできません',
+    },
+    detail: {
       upstreamModel: '上流モデル',
-      directModel: '同名で直接転送',
-      prices: '{count} 件の価格範囲',
-      pricesWithPending: '{count} 件の価格範囲 · {pending} 件が価格待ち',
+      direct: '同名',
+      aliasApplied: 'エイリアス',
       scope: {
         provider: 'プロバイダー価格',
         group: 'Group 固有価格',
       },
-      groups: 'ルート Group',
-      routeGroups: '現在のルート Group',
-      globalImpact: '全体影響 · {count} Group',
-      groupCount: '{count} Group がこの価格を共有',
+      routeGroups: 'ルート Group',
       groupEnabled: '有効',
       groupDisabled: '無効',
-      customProvider: 'カスタムプロバイダー',
-      copy: 'クライアントモデル {model} をコピー',
-      copySucceeded: 'クライアントモデルをコピーしました',
-      copyFailed: 'クライアントモデルをコピーできません',
+      globalImpact: 'この価格は合計 {count} Group に影響します',
       catalogReference: {
-        actual_provider: 'Models.dev 実プロバイダー · {provider}',
+        actual_provider: 'Models.dev · {provider}',
         reference_provider: 'Models.dev 参照プロバイダー · {provider}',
       },
-      catalogUnavailable: 'Models.dev モデル情報はありません',
-      metadata: {
-        family: 'ファミリー {value}',
-        status: '状態 {value}',
-        context: 'コンテキスト {value}',
-        inputLimit: '最大入力 {value}',
-        outputLimit: '最大出力 {value}',
-        inputModalities: '入力 {value}',
-        outputModalities: '出力 {value}',
-        releaseDate: 'リリース {value}',
-        lastUpdated: '更新 {value}',
-        knowledge: '知識の期限 {value}',
-        openWeights: 'オープンウェイト',
-        capabilities: {
-          attachment: '添付',
-          reasoning: '推論',
-          tool_call: 'ツール呼び出し',
-          structured_output: '構造化出力',
-          temperature: 'Temperature',
-        },
+      specs: {
+        context: 'コンテキスト',
+        maxOutput: '最大出力',
+        modalities: 'モダリティ',
+        knowledge: '知識の期限',
+        released: 'リリース',
+        family: 'ファミリー',
       },
+      capabilities: {
+        attachment: '添付',
+        reasoning: '推論',
+        tool_call: 'ツール呼び出し',
+        structured_output: '構造化出力',
+        temperature: 'Temperature',
+      },
+      openWeights: 'オープンウェイト',
     },
   },
 } as const
diff --git a/web/src/i18n/locales/zh-CN/models.ts b/web/src/i18n/locales/zh-CN/models.ts
index 8f22b7e3..f4cb607b 100644
--- a/web/src/i18n/locales/zh-CN/models.ts
+++ b/web/src/i18n/locales/zh-CN/models.ts
@@ -21,13 +21,13 @@ export default {
       upstreamModels: '上游模型',
       prices: '价格记录',
       pendingPrices: '待定价',
-      unreferencedPrices: '未使用价格',
+      unreferencedPrices: '{count} 条未使用价格记录',
     },
     catalog: {
       available: 'Models.dev 目录可用',
       stale: '同步失败，使用上次成功目录',
       unavailable: 'Models.dev 目录不可用',
-      lastSuccess: '最近成功',
+      lastSuccess: '最近同步',
       lastCheck: '最近检查',
     },
     drawerImpact: {
@@ -58,58 +58,61 @@ export default {
       noResultsTitle: '没有符合条件的模型',
       noResultsDescription: '调整搜索、分组状态或价格状态后再试',
     },
-    tree: {
-      label: '客户端模型目录',
+    collection: {
+      label: '客户端模型列表',
+      scrollHint: '可横向滚动查看更多列',
       columns: {
-        structure: '模型与路由结构',
-        status: '状态',
+        model: '客户端模型',
+        routing: '路由分组 / 协议',
         prices: '价格 · USD / 1M',
-        facts: '来源 / 操作',
+        status: '状态',
+        actions: '操作',
       },
-      clientModel: '客户端模型',
+      direct: '同名直传上游',
+      alias: '映射到 {model}',
+      multiUpstream: '{count} 个上游模型',
+      moreGroups: '+{count}',
+      scopeCount: '{count} 套价格',
+      pendingScopes: '{count} 套价格 · {pending} 套待定',
+      priceRange: '{min} – {max}',
+      expand: '展开 {model} 的模型详情',
+      collapse: '收起 {model} 的模型详情',
+      copy: '复制客户端模型 {model}',
+      copySucceeded: '客户端模型已复制',
+      copyFailed: '无法复制客户端模型',
+    },
+    detail: {
       upstreamModel: '上游模型',
-      directModel: '同名直传',
-      prices: '{count} 套价格',
-      pricesWithPending: '{count} 套价格 · {pending} 套待定价',
+      direct: '同名直传',
+      aliasApplied: '别名映射',
       scope: {
         provider: '渠道价格',
         group: '分组独立价格',
       },
-      groups: '路由分组',
-      routeGroups: '当前路径分组',
-      globalImpact: '全局影响 · {count} 个分组',
-      groupCount: '{count} 个分组共享此价格',
+      routeGroups: '路由分组',
       groupEnabled: '启用',
-      groupDisabled: '停用',
-      customProvider: '自定义渠道',
-      copy: '复制客户端模型 {model}',
-      copySucceeded: '客户端模型已复制',
-      copyFailed: '无法复制客户端模型',
+      groupDisabled: '已停用',
+      globalImpact: '此价格共影响 {count} 个分组',
       catalogReference: {
-        actual_provider: 'Models.dev 实际渠道 · {provider}',
+        actual_provider: 'Models.dev · {provider}',
         reference_provider: 'Models.dev 参考渠道 · {provider}',
       },
-      catalogUnavailable: '暂无 Models.dev 模型信息',
-      metadata: {
-        family: '系列 {value}',
-        status: '状态 {value}',
-        context: '上下文 {value}',
-        inputLimit: '最大输入 {value}',
-        outputLimit: '最大输出 {value}',
-        inputModalities: '输入 {value}',
-        outputModalities: '输出 {value}',
-        releaseDate: '发布 {value}',
-        lastUpdated: '更新 {value}',
-        knowledge: '知识截止 {value}',
-        openWeights: '开放权重',
-        capabilities: {
-          attachment: '附件',
-          reasoning: '推理',
-          tool_call: '工具调用',
-          structured_output: '结构化输出',
-          temperature: '温度参数',
-        },
+      specs: {
+        context: '上下文',
+        maxOutput: '最大输出',
+        modalities: '模态',
+        knowledge: '知识截止',
+        released: '发布',
+        family: '系列',
       },
+      capabilities: {
+        attachment: '附件',
+        reasoning: '推理',
+        tool_call: '工具调用',
+        structured_output: '结构化输出',
+        temperature: '温度参数',
+      },
+      openWeights: '开放权重',
     },
   },
 } as const