loco-admin-web/specs/designs/11-models/list.md

Models List Page

Overview

Card grid list of all models (external + managed).

Follows the layout of specs/designs/10-layout/list.md, only the details are documented in this spec.

Page Name

"Models" for title and breadcrumb

Filters

Row	Mode	Values	Default	Extra
Mode	Single	All, External, Managed	All	shows count badge
Category	Multi	Language, Embedding, Reranker	None
Modalities	Multi	Text, Image, Video, Audio	None
Tags	Multi	the tags present across all models	None

Card Anatomy

Model icon sits at the left, a fixed 48 px square, vertically centered. All others are on the right side of the card vertically positioned.

The card is wider than it is tall, the width to height ratio should be at least 2:1.

The information on the card is essential.

┌─────────────────────────────────────────────────────────────┐
│ ┌────────┐  Model Name                          [status]    │
│ │        │  [Provider (external) or runtime (managed)]      │
│ │        │  base model id (when available)                  │
│ │  icon  │  [text icon], [image icon]                       │
│ │        │                                                  │
│ └────────┘  [reasoning] [tool call]                         │
└─────────────────────────────────────────────────────────────┘

Icon

When using providers' logo, use plain image. When using custom icon, add background color and border.

Header

• Large text for the model name
• Status badge (right, when status is set)

Second Line

• bordered box: provider name (external) / runtime name (managed)
• base model id (when set)

Body

• input modalities icons

Footer

• tags

Empty States

No models at all:

CpuIcon (muted)
"No models yet."
[New Model button]

No match:

CpuIcon (muted)
"No models match your filters."
[Clear filters link]