feat(agent): paginated model catalog with pricing + redesigned Add AI panel

Backend:
- New GET /api/agents/models/catalog endpoint with page/per_page/search
  params, excludes deprecated models, returns pricing data via
  model→version→pricing join
- ModelWithPricingResponse includes input_price, output_price, currency
- ModelListResponse with pagination metadata (total, page, per_page)
- Batch-fetches default versions + latest pricing to avoid N+1

Frontend:
- RoomSettingsPanel: replace Dialog with inline two-step panel
  - Step 1: paginated model browser with search, shows context length,
    max output tokens, pricing per 1K tokens, capability/modality badges
  - Step 2: selected model info card + AI configuration form
- Removed Dialog import and related unused dependencies

libs/agent/model/model_entry.rs

@@ -5,6 +5,8 @@
 use chrono::Utc;
 use db::database::AppDatabase;
 use models::agents::model;
+use models::agents::model_pricing;
+use models::agents::model_version;
 use models::agents::{
     ModelCapability, ModelModality, ModelStatus,
     model::{Column as MColumn, Entity as MEntity},
@@ -88,6 +90,140 @@ pub async fn list_models(
     Ok(models.into_iter().map(ModelResponse::from).collect())
 }
 
+#[derive(Debug, Clone, serde::Serialize, utoipa::ToSchema)]
+pub struct ModelWithPricingResponse {
+    pub id: Uuid,
+    pub provider_id: Uuid,
+    pub name: String,
+    pub modality: String,
+    pub capability: String,
+    pub context_length: i64,
+    pub max_output_tokens: Option<i64>,
+    pub training_cutoff: Option<chrono::DateTime<Utc>>,
+    pub is_open_source: bool,
+    pub status: String,
+    pub input_price: Option<String>,
+    pub output_price: Option<String>,
+    pub currency: Option<String>,
+    pub created_at: chrono::DateTime<Utc>,
+    pub updated_at: chrono::DateTime<Utc>,
+}
+
+#[derive(Debug, Clone, serde::Serialize, utoipa::ToSchema)]
+pub struct ModelListResponse {
+    pub data: Vec<ModelWithPricingResponse>,
+    pub total: u64,
+    pub page: u64,
+    pub per_page: u64,
+}
+
+/// List models with pricing, pagination, search, and deprecation filter.
+pub async fn list_models_with_pricing(
+    db: &AppDatabase,
+    provider_id: Option<Uuid>,
+    search: Option<&str>,
+    page: u64,
+    per_page: u64,
+) -> Result<ModelListResponse, AgentError> {
+    let mut query = MEntity::find()
+        .filter(MColumn::Status.ne("deprecated"))
+        .order_by_asc(MColumn::Name);
+
+    if let Some(pid) = provider_id {
+        query = query.filter(MColumn::ProviderId.eq(pid));
+    }
+    if let Some(q) = search {
+        if !q.is_empty() {
+            query = query.filter(MColumn::Name.contains(q));
+        }
+    }
+
+    let total = query.clone().count(db).await? as u64;
+    let offset = (page.saturating_sub(1)) * per_page;
+    let models = query
+        .offset(offset)
+        .limit(per_page)
+        .all(db)
+        .await?;
+
+    // Batch-fetch default versions for these models
+    let model_ids: Vec<Uuid> = models.iter().map(|m| m.id).collect();
+    let versions = if model_ids.is_empty() {
+        vec![]
+    } else {
+        model_version::Entity::find()
+            .filter(model_version::Column::ModelId.is_in(model_ids))
+            .filter(model_version::Column::IsDefault.eq(true))
+            .all(db)
+            .await
+            .unwrap_or_default()
+    };
+
+    let version_ids: Vec<Uuid> = versions.iter().map(|v| v.id).collect();
+    let pricings = if version_ids.is_empty() {
+        vec![]
+    } else {
+        model_pricing::Entity::find()
+            .filter(model_pricing::Column::ModelVersionId.is_in(version_ids))
+            .all(db)
+            .await
+            .unwrap_or_default()
+    };
+
+    // Build lookup: model_id → latest pricing (by effective_from DESC)
+    let mut pricing_map: std::collections::HashMap<Uuid, &model_pricing::Model> = std::collections::HashMap::new();
+    let version_to_model: std::collections::HashMap<Uuid, Uuid> = versions
+        .iter()
+        .map(|v| (v.id, v.model_id))
+        .collect();
+
+    for p in &pricings {
+        if let Some(model_id) = version_to_model.get(&p.model_version_id) {
+            match pricing_map.get(model_id) {
+                Some(existing) => {
+                    if p.effective_from > existing.effective_from {
+                        pricing_map.insert(*model_id, p);
+                    }
+                }
+                None => {
+                    pricing_map.insert(*model_id, p);
+                }
+            }
+        }
+    }
+
+    let data = models
+        .into_iter()
+        .map(|m| {
+            let pricing = pricing_map.get(&m.id);
+            ModelWithPricingResponse {
+                id: m.id,
+                provider_id: m.provider_id,
+                name: m.name,
+                modality: m.modality,
+                capability: m.capability,
+                context_length: m.context_length,
+                max_output_tokens: m.max_output_tokens,
+                training_cutoff: m.training_cutoff,
+                is_open_source: m.is_open_source,
+                status: m.status,
+                input_price: pricing.map(|p| p.input_price_per_1k_tokens.clone()),
+                output_price: pricing.map(|p| p.output_price_per_1k_tokens.clone()),
+                currency: pricing.map(|p| p.currency.clone()),
+                created_at: m.created_at,
+                updated_at: m.updated_at,
+            }
+        })
+        .collect();
+
+    Ok(ModelListResponse {
+        data,
+        total,
+        page,
+        per_page,
+    })
+}
+
 /// Get a single model by ID.
 pub async fn get_model(db: &AppDatabase, id: Uuid) -> Result<ModelResponse, AgentError> {
     let model = MEntity::find_by_id(id)

libs/api/agent/mod.rs

@@ -37,6 +37,7 @@ pub fn init_agent_routes(cfg: &mut web::ServiceConfig) {
                 web::delete().to(provider::provider_delete),
             )
             .route("/models", web::get().to(model::model_list))
+            .route("/models/catalog", web::get().to(model::model_catalog))
             .route("/models/{id}", web::get().to(model::model_get))
             .route("/models", web::post().to(model::model_create))
             .route("/models/{id}", web::patch().to(model::model_update))

libs/api/agent/model.rs

@@ -10,6 +10,14 @@ pub struct ListQuery {
     pub provider_id: Option<String>,
 }
 
+#[derive(serde::Deserialize, utoipa::IntoParams)]
+pub struct CatalogQuery {
+    pub provider_id: Option<String>,
+    pub search: Option<String>,
+    pub page: Option<u64>,
+    pub per_page: Option<u64>,
+}
+
 #[utoipa::path(
     get,
     path = "/api/agents/models",
@@ -36,6 +44,36 @@ pub async fn model_list(
     Ok(ApiResponse::ok(resp).to_response())
 }
 
+#[utoipa::path(
+    get,
+    path = "/api/agents/models/catalog",
+    params(CatalogQuery),
+    responses(
+        (status = 200, body = service::agent::model::ModelListResponse),
+        (status = 401, description = "Unauthorized"),
+    ),
+    tag = "Agent"
+)]
+pub async fn model_catalog(
+    service: web::Data<AppService>,
+    session: Session,
+    query: web::Query<CatalogQuery>,
+) -> Result<HttpResponse, ApiError> {
+    let provider_id = if let Some(ref s) = query.provider_id {
+        Some(Uuid::parse_str(s).map_err(|_| {
+            service::error::AppError::BadRequest("Invalid provider UUID".to_string())
+        })?)
+    } else {
+        None
+    };
+    let page = query.page.unwrap_or(1).max(1);
+    let per_page = query.per_page.unwrap_or(20).clamp(1, 100);
+    let resp = service
+        .agent_model_list_with_pricing(provider_id, query.search.clone(), page, per_page, &session)
+        .await?;
+    Ok(ApiResponse::ok(resp).to_response())
+}
+
 #[utoipa::path(
     get,
     path = "/api/agents/models/{id}",

libs/service/agent/model.rs

@@ -5,7 +5,7 @@ use crate::error::AppError;
 use session::Session;
 use uuid::Uuid;
 
-pub use agent::model::model_entry::{CreateModelRequest, ModelResponse, UpdateModelRequest};
+pub use agent::model::model_entry::{CreateModelRequest, ModelListResponse, ModelResponse, UpdateModelRequest, ModelWithPricingResponse};
 
 impl AppService {
     pub async fn agent_model_list(
@@ -16,6 +16,23 @@ impl AppService {
         Ok(agent::model::model_entry::list_models(&self.db, provider_id).await?)
     }
 
+    pub async fn agent_model_list_with_pricing(
+        &self,
+        provider_id: Option<Uuid>,
+        search: Option<String>,
+        page: u64,
+        per_page: u64,
+        _ctx: &Session,
+    ) -> Result<agent::model::model_entry::ModelListResponse, AppError> {
+        Ok(agent::model::model_entry::list_models_with_pricing(
+            &self.db,
+            provider_id,
+            search.as_deref(),
+            page,
+            per_page,
+        ).await?)
+    }
+
     pub async fn agent_model_get(
         &self,
         id: Uuid,

src/components/room/RoomSettingsPanel.tsx

@@ -1,19 +1,33 @@
-import React, { memo, useState, useEffect, useCallback } from 'react';
+import React, { memo, useState, useEffect, useCallback, useRef } from 'react';
-import type { ModelResponse, RoomResponse, RoomAiResponse, RoomAiUpsertRequest } from '@/client';
+import type { RoomResponse, RoomAiResponse, RoomAiUpsertRequest } from '@/client';
-import { aiList, aiUpsert, aiDelete, modelList } from '@/client';
+import { aiList, aiUpsert, aiDelete } from '@/client';
+import { client } from '@/client/client.gen';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import {
-  Dialog,
+  Select,
-  DialogContent,
+  SelectContent,
-  DialogHeader,
+  SelectItem,
-  DialogTitle,
+  SelectTrigger,
-  DialogFooter,
+  SelectValue,
-} from '@/components/ui/dialog';
+} from '@/components/ui/select';
-import { Loader2, Plus, Trash2, Bot, ChevronDown, ChevronRight } from 'lucide-react';
+import {
+  Loader2,
+  Plus,
+  Trash2,
+  Bot,
+  ChevronDown,
+  ChevronRight,
+  Search,
+  ArrowLeft,
+  Cpu,
+  Lock,
+  DollarSign,
+  Zap,
+  BookOpen,
+} from 'lucide-react';
 import { toast } from 'sonner';
 
 interface RoomSettingsPanelProps {
@@ -23,6 +37,61 @@ interface RoomSettingsPanelProps {
   isPending: boolean;
 }
 
+interface CatalogModel {
+  id: string;
+  provider_id: string;
+  name: string;
+  modality: string;
+  capability: string;
+  context_length: number;
+  max_output_tokens?: number;
+  training_cutoff?: string;
+  is_open_source: boolean;
+  status: string;
+  input_price?: string;
+  output_price?: string;
+  currency?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+interface CatalogResponse {
+  data: CatalogModel[];
+  total: number;
+  page: number;
+  per_page: number;
+}
+
+function formatContextLength(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n % 1_000_000 === 0 ? 0 : 1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(n % 1_000 === 0 ? 0 : 1)}K`;
+  return String(n);
+}
+
+function formatPrice(price?: string): string {
+  if (!price) return 'N/A';
+  const n = parseFloat(price);
+  if (isNaN(n)) return price;
+  if (n === 0) return 'Free';
+  return `$${n.toFixed(2)}`;
+}
+
+const CAPABILITY_COLORS: Record<string, string> = {
+  chat: '#3b82f6',
+  code: '#8b5cf6',
+  completion: '#06b6d4',
+  embedding: '#f59e0b',
+  vision: '#ec4899',
+  reasoning: '#10b981',
+};
+
+const MODALITY_ICONS: Record<string, string> = {
+  text: 'T',
+  multimodal: 'M',
+  image: 'I',
+  audio: 'A',
+};
+
 export const RoomSettingsPanel = memo(function RoomSettingsPanel({
   room,
   onUpdate,
@@ -32,7 +101,6 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
   const [name, setName] = useState(room.room_name ?? '');
   const [isPublic, setIsPublic] = useState(!!room.public);
 
-  // Sync form when room prop changes (e.g., user switched to a different room)
   useEffect(() => {
     setName(room.room_name ?? '');
     setIsPublic(!!room.public);
@@ -41,13 +109,19 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
   // AI section state
   const [aiConfigs, setAiConfigs] = useState<RoomAiResponse[]>([]);
   const [aiConfigsLoading, setAiConfigsLoading] = useState(false);
-  const [showAiAddDialog, setShowAiAddDialog] = useState(false);
+  const [showAddPanel, setShowAddPanel] = useState(false);
-  const [showAdvanced, setShowAdvanced] = useState(false);
 
-  // Add AI form state
+  // Catalog state
-  const [availableModels, setAvailableModels] = useState<ModelResponse[]>([]);
+  const [catalogModels, setCatalogModels] = useState<CatalogModel[]>([]);
-  const [modelsLoading, setModelsLoading] = useState(false);
+  const [catalogLoading, setCatalogLoading] = useState(false);
-  const [selectedModelId, setSelectedModelId] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [catalogPage, setCatalogPage] = useState(1);
+  const [catalogTotal, setCatalogTotal] = useState(0);
+  const [catalogPerPage] = useState(20);
+  const searchTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  // Selected model + config form state
+  const [selectedModel, setSelectedModel] = useState<CatalogModel | null>(null);
   const [temperature, setTemperature] = useState('');
   const [maxTokens, setMaxTokens] = useState('');
   const [historyLimit, setHistoryLimit] = useState('');
@@ -56,6 +130,7 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
   const [think, setThink] = useState(false);
   const [stream, setStream] = useState(true);
   const [agentType, setAgentType] = useState('chat');
+  const [showAdvanced, setShowAdvanced] = useState(false);
   const [isAddingAi, setIsAddingAi] = useState(false);
 
   const handleSave = async () => {
@@ -83,27 +158,57 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
     }
   }, [room.id]);
 
-  // Load available models
+  useEffect(() => {
-  const loadModels = useCallback(async () => {
+    loadAiConfigs();
-    setModelsLoading(true);
+  }, [loadAiConfigs]);
+
+  // Load catalog models
+  const loadCatalog = useCallback(async (search: string, page: number) => {
+    setCatalogLoading(true);
     try {
-      const resp = await modelList({});
+      const params = new URLSearchParams();
-      const inner = resp.data as { data?: ModelResponse[] } | undefined;
+      params.set('page', String(page));
-      setAvailableModels(Array.isArray(inner?.data) ? inner.data : []);
+      params.set('per_page', String(catalogPerPage));
+      if (search) params.set('search', search);
+
+      const resp = await client.get({
+        url: `/api/agents/models/catalog?${params.toString()}`,
+      });
+      const data = (resp.data as { data?: CatalogResponse })?.data;
+      if (data) {
+        setCatalogModels(data.data ?? []);
+        setCatalogTotal(data.total ?? 0);
+      }
     } catch {
       toast.error('Failed to load models');
     } finally {
-      setModelsLoading(false);
+      setCatalogLoading(false);
     }
-  }, []);
+  }, [catalogPerPage]);
+
+  // Debounced search
+  useEffect(() => {
+    if (!showAddPanel) return;
+    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    searchTimerRef.current = setTimeout(() => {
+      setCatalogPage(1);
+      loadCatalog(searchQuery, 1);
+    }, 300);
+    return () => {
+      if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    };
+  }, [searchQuery, showAddPanel, loadCatalog]);
 
   useEffect(() => {
-    loadAiConfigs();
+    if (showAddPanel) {
-    loadModels();
+      loadCatalog(searchQuery, catalogPage);
-  }, [loadAiConfigs, loadModels]);
+    }
+  }, [catalogPage, showAddPanel]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const openAddDialog = () => {
+  const openAddPanel = () => {
-    setSelectedModelId('');
+    setSelectedModel(null);
+    setSearchQuery('');
+    setCatalogPage(1);
     setTemperature('');
     setMaxTokens('');
     setHistoryLimit('');
@@ -113,19 +218,15 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
     setStream(true);
     setAgentType('chat');
     setShowAdvanced(false);
-    setShowAiAddDialog(true);
+    setShowAddPanel(true);
-    loadModels();
   };
 
   const handleAddAi = async () => {
-    if (!selectedModelId) {
+    if (!selectedModel) return;
-      toast.error('Please select a model');
-      return;
-    }
     setIsAddingAi(true);
     try {
       const body: RoomAiUpsertRequest = {
-        model: selectedModelId,
+        model: selectedModel.id,
         temperature: temperature ? parseFloat(temperature) : undefined,
         max_tokens: maxTokens ? parseInt(maxTokens) : undefined,
         history_limit: historyLimit ? parseInt(historyLimit) : undefined,
@@ -135,12 +236,10 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
         stream,
         agent_type: agentType || undefined,
       };
-      await aiUpsert({
+      await aiUpsert({ path: { room_id: room.id }, body });
-        path: { room_id: room.id },
+      toast.success(`${selectedModel.name} added to room`);
-        body,
+      setShowAddPanel(false);
-      });
+      setSelectedModel(null);
-      toast.success('AI model added');
-      setShowAiAddDialog(false);
       loadAiConfigs();
     } catch {
       toast.error('Failed to add AI model');
@@ -159,6 +258,357 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
     }
   };
 
+  const totalPages = Math.max(1, Math.ceil(catalogTotal / catalogPerPage));
+
+  // ── Add Panel View ──
+  if (showAddPanel) {
+    return (
+      <aside
+        className="flex flex-col h-full"
+        style={{ background: 'var(--room-bg)', borderColor: 'var(--room-border)' }}
+      >
+        <header
+          className="flex h-12 items-center gap-2 border-b px-4 shrink-0"
+          style={{ borderColor: 'var(--room-border)' }}
+        >
+          <button
+            type="button"
+            onClick={() => { setShowAddPanel(false); setSelectedModel(null); }}
+            className="p-1 rounded hover:opacity-70"
+            style={{ color: 'var(--room-text)' }}
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </button>
+          <Bot className="h-4 w-4" style={{ color: 'var(--room-accent)' }} />
+          <p className="text-sm font-semibold" style={{ color: 'var(--room-text)' }}>
+            {selectedModel ? `Configure ${selectedModel.name}` : 'Add AI Model'}
+          </p>
+        </header>
+
+        <div className="flex-1 overflow-y-auto">
+          {!selectedModel ? (
+            /* ── Model Browser ── */
+            <div className="p-3 space-y-3">
+              {/* Search */}
+              <div className="relative">
+                <Search
+                  className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5"
+                  style={{ color: 'var(--room-text-muted)' }}
+                />
+                <Input
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Search models..."
+                  className="pl-8 h-8 text-sm"
+                  style={{
+                    background: 'var(--room-bg)',
+                    borderColor: 'var(--room-border)',
+                    color: 'var(--room-text)',
+                  }}
+                  autoFocus
+                />
+              </div>
+
+              {/* Model list */}
+              {catalogLoading ? (
+                <div className="flex justify-center py-8">
+                  <Loader2 className="h-5 w-5 animate-spin" style={{ color: 'var(--room-text-muted)' }} />
+                </div>
+              ) : catalogModels.length === 0 ? (
+                <p className="text-xs text-center py-8" style={{ color: 'var(--room-text-muted)' }}>
+                  No models found
+                </p>
+              ) : (
+                <div className="space-y-1.5">
+                  {catalogModels.map((model) => {
+                    const capColor = CAPABILITY_COLORS[model.capability] ?? '#6b7280';
+                    const alreadyAdded = aiConfigs.some((c) => c.model === model.id);
+                    return (
+                      <button
+                        key={model.id}
+                        type="button"
+                        disabled={alreadyAdded}
+                        className="w-full text-left rounded-lg p-2.5 transition-colors disabled:opacity-40"
+                        style={{
+                          border: `1px solid var(--room-border)`,
+                          background: 'var(--room-bg)',
+                        }}
+                        onClick={() => setSelectedModel(model)}
+                        onMouseEnter={(e) => {
+                          if (!alreadyAdded) (e.currentTarget as HTMLElement).style.background = 'var(--room-hover, rgba(255,255,255,0.03))';
+                        }}
+                        onMouseLeave={(e) => {
+                          (e.currentTarget as HTMLElement).style.background = 'var(--room-bg)';
+                        }}
+                      >
+                        {/* Row 1: Name + badges */}
+                        <div className="flex items-center gap-1.5 flex-wrap">
+                          <span className="text-sm font-medium truncate" style={{ color: 'var(--room-text)' }}>
+                            {model.name}
+                          </span>
+                          <span
+                            className="rounded px-1 py-0.5 text-[9px] font-medium uppercase"
+                            style={{ background: `${capColor}18`, color: capColor }}
+                          >
+                            {model.capability}
+                          </span>
+                          <span
+                            className="rounded px-1 py-0.5 text-[9px] font-medium"
+                            style={{ background: 'rgba(107,114,128,0.1)', color: '#9ca3af' }}
+                          >
+                            {MODALITY_ICONS[model.modality] ?? '·'} {model.modality}
+                          </span>
+                          {model.is_open_source && (
+                            <span
+                              className="rounded px-1 py-0.5 text-[9px]"
+                              style={{ background: 'rgba(16,185,129,0.1)', color: '#10b981' }}
+                            >
+                              OSS
+                            </span>
+                          )}
+                          {alreadyAdded && (
+                            <span
+                              className="rounded px-1 py-0.5 text-[9px] ml-auto"
+                              style={{ background: 'rgba(107,114,128,0.1)', color: '#9ca3af' }}
+                            >
+                              Added
+                            </span>
+                          )}
+                        </div>
+
+                        {/* Row 2: Stats */}
+                        <div className="flex items-center gap-3 mt-1.5 text-[11px]" style={{ color: 'var(--room-text-muted)' }}>
+                          <span className="flex items-center gap-0.5">
+                            <BookOpen className="h-3 w-3" />
+                            {formatContextLength(model.context_length)}
+                          </span>
+                          {model.max_output_tokens && (
+                            <span className="flex items-center gap-0.5">
+                              <Zap className="h-3 w-3" />
+                              {formatContextLength(model.max_output_tokens)} out
+                            </span>
+                          )}
+                          <span className="flex items-center gap-0.5">
+                            <DollarSign className="h-3 w-3" />
+                            {formatPrice(model.input_price)} / {formatPrice(model.output_price)}
+                            {model.currency && model.input_price && (
+                              <span className="opacity-60"> {model.currency}</span>
+                            )}
+                          </span>
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+
+              {/* Pagination */}
+              {totalPages > 1 && (
+                <div className="flex items-center justify-between pt-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 text-xs"
+                    disabled={catalogPage <= 1}
+                    onClick={() => setCatalogPage((p) => Math.max(1, p - 1))}
+                    style={{ color: 'var(--room-text-muted)' }}
+                  >
+                    Previous
+                  </Button>
+                  <span className="text-xs" style={{ color: 'var(--room-text-muted)' }}>
+                    {catalogPage} / {totalPages}
+                  </span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 text-xs"
+                    disabled={catalogPage >= totalPages}
+                    onClick={() => setCatalogPage((p) => Math.min(totalPages, p + 1))}
+                    style={{ color: 'var(--room-text-muted)' }}
+                  >
+                    Next
+                  </Button>
+                </div>
+              )}
+            </div>
+          ) : (
+            /* ── Selected Model: Config Form ── */
+            <div className="p-4 space-y-4">
+              {/* Model info card */}
+              <div
+                className="rounded-lg p-3 space-y-2"
+                style={{ border: '1px solid var(--room-border)', background: 'rgba(255,255,255,0.02)' }}
+              >
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-semibold" style={{ color: 'var(--room-text)' }}>
+                    {selectedModel.name}
+                  </span>
+                  {selectedModel.is_open_source && (
+                    <Lock className="h-3 w-3" style={{ color: '#10b981' }} />
+                  )}
+                </div>
+                <div className="flex flex-wrap gap-x-4 gap-y-1 text-[11px]" style={{ color: 'var(--room-text-muted)' }}>
+                  <span className="flex items-center gap-1">
+                    <Cpu className="h-3 w-3" />
+                    {selectedModel.capability} / {selectedModel.modality}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <BookOpen className="h-3 w-3" />
+                    {formatContextLength(selectedModel.context_length)} context
+                  </span>
+                  {selectedModel.max_output_tokens && (
+                    <span className="flex items-center gap-1">
+                      <Zap className="h-3 w-3" />
+                      {formatContextLength(selectedModel.max_output_tokens)} max output
+                    </span>
+                  )}
+                  <span className="flex items-center gap-1">
+                    <DollarSign className="h-3 w-3" />
+                    In: {formatPrice(selectedModel.input_price)} / Out: {formatPrice(selectedModel.output_price)}
+                    {selectedModel.currency && selectedModel.input_price && (
+                      <span className="opacity-60"> {selectedModel.currency}/1K tokens</span>
+                    )}
+                  </span>
+                  {selectedModel.training_cutoff && (
+                    <span>
+                      Trained: {new Date(selectedModel.training_cutoff).toLocaleDateString()}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              {/* Agent type */}
+              <div className="space-y-1.5">
+                <Label className="text-xs" style={{ color: 'var(--room-text)' }}>Agent Type</Label>
+                <Select value={agentType} onValueChange={(v) => { if (v !== null) setAgentType(v); }}>
+                  <SelectTrigger
+                    className="w-full h-8 text-sm"
+                    style={{ background: 'var(--room-bg)', borderColor: 'var(--room-border)', color: 'var(--room-text)' }}
+                  >
+                    <SelectValue>
+                      {agentType === 'react' ? 'ReAct (multi-step reasoning)' : 'Chat (simple)'}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent style={{ background: 'var(--room-bg)', border: '1px solid var(--room-border)' }}>
+                    <SelectItem value="chat">
+                      <span className="font-medium">Chat</span>
+                      <span className="text-xs ml-2" style={{ color: 'var(--room-text-muted)' }}>Simple response</span>
+                    </SelectItem>
+                    <SelectItem value="react">
+                      <span className="font-medium">ReAct</span>
+                      <span className="text-xs ml-2" style={{ color: 'var(--room-text-muted)' }}>Multi-step + tools</span>
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* System prompt */}
+              <div className="space-y-1.5">
+                <Label className="text-xs" style={{ color: 'var(--room-text)' }}>System Prompt</Label>
+                <textarea
+                  className="min-h-[70px] w-full rounded-md px-2.5 py-2 text-sm resize-none focus-visible:outline-none focus-visible:ring-1"
+                  style={{
+                    border: '1px solid var(--room-border)',
+                    background: 'var(--room-bg)',
+                    color: 'var(--room-text)',
+                  }}
+                  placeholder="Optional system prompt..."
+                  value={systemPrompt}
+                  onChange={(e) => setSystemPrompt(e.target.value)}
+                />
+              </div>
+
+              {/* Advanced */}
+              <button
+                type="button"
+                className="flex items-center gap-1 text-xs transition-colors"
+                style={{ color: 'var(--room-text-muted)' }}
+                onClick={() => setShowAdvanced((v) => !v)}
+              >
+                {showAdvanced ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+                Advanced options
+              </button>
+
+              {showAdvanced && (
+                <div className="space-y-2.5 pl-1">
+                  <div className="space-y-1">
+                    <Label className="text-xs" style={{ color: 'var(--room-text)' }}>Temperature</Label>
+                    <Input
+                      type="number" step="0.1" min="0" max="2"
+                      placeholder="0.7"
+                      value={temperature}
+                      onChange={(e) => setTemperature(e.target.value)}
+                      className="h-7 text-sm"
+                      style={{ background: 'var(--room-bg)', borderColor: 'var(--room-border)', color: 'var(--room-text)' }}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-xs" style={{ color: 'var(--room-text)' }}>Max Tokens</Label>
+                    <Input
+                      type="number"
+                      placeholder="4096"
+                      value={maxTokens}
+                      onChange={(e) => setMaxTokens(e.target.value)}
+                      className="h-7 text-sm"
+                      style={{ background: 'var(--room-bg)', borderColor: 'var(--room-border)', color: 'var(--room-text)' }}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-xs" style={{ color: 'var(--room-text)' }}>History Limit</Label>
+                    <Input
+                      type="number"
+                      placeholder="50"
+                      value={historyLimit}
+                      onChange={(e) => setHistoryLimit(e.target.value)}
+                      className="h-7 text-sm"
+                      style={{ background: 'var(--room-bg)', borderColor: 'var(--room-border)', color: 'var(--room-text)' }}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-xs" style={{ color: 'var(--room-text)' }}>Use Exact</Label>
+                      <Switch checked={useExact} onCheckedChange={setUseExact} size="sm" />
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <Label className="text-xs" style={{ color: 'var(--room-text)' }}>Think Mode</Label>
+                      <Switch checked={think} onCheckedChange={setThink} size="sm" />
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <Label className="text-xs" style={{ color: 'var(--room-text)' }}>Streaming</Label>
+                      <Switch checked={stream} onCheckedChange={setStream} size="sm" />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Action buttons */}
+              <div className="flex gap-2 pt-2">
+                <Button
+                  variant="outline"
+                  className="flex-1 h-8 text-xs"
+                  onClick={() => setSelectedModel(null)}
+                  style={{ borderColor: 'var(--room-border)', color: 'var(--room-text)' }}
+                >
+                  Back
+                </Button>
+                <Button
+                  className="flex-1 h-8 text-xs"
+                  disabled={isAddingAi}
+                  onClick={handleAddAi}
+                  style={{ background: 'var(--room-accent)', color: 'var(--accent-fg)', border: 'none' }}
+                >
+                  {isAddingAi ? <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" /> : <Plus className="mr-1.5 h-3.5 w-3.5" />}
+                  Add to Room
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </aside>
+    );
+  }
+
+  // ── Main Settings View ──
   return (
     <aside
       className="flex flex-col h-full"
@@ -215,9 +665,7 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
             className="w-full border-none"
             style={{ background: 'var(--room-accent)', color: 'var(--accent-fg)' }}
           >
-            {isPending ? (
+            {isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-            ) : null}
             Save Changes
           </Button>
         </section>
@@ -235,7 +683,7 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
               variant="ghost"
               size="sm"
               className="h-7 gap-1 px-2"
-              onClick={openAddDialog}
+              onClick={openAddPanel}
               style={{ color: 'var(--room-accent)' }}
             >
               <Plus className="h-3 w-3" />
@@ -260,7 +708,7 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
                   <div className="flex items-center gap-2 min-w-0">
                     <Bot className="h-4 w-4 shrink-0" style={{ color: 'var(--room-text-muted)' }} />
                     <span className="text-sm truncate" style={{ color: 'var(--room-text)' }}>
-                      {config.model_name ?? availableModels.find((m) => m.id === config.model)?.name ?? 'Unknown'}
+                      {config.model_name ?? 'Unknown'}
                     </span>
                     {config.stream && (
                       <span
@@ -302,194 +750,6 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
           )}
         </section>
       </div>
-
-      {/* Add AI Dialog */}
-      <Dialog open={showAiAddDialog} onOpenChange={setShowAiAddDialog}>
-        <DialogContent
-          className="sm:max-w-[440px]"
-          style={{
-            background: 'var(--room-bg)',
-            border: '1px solid var(--room-border)',
-            color: 'var(--room-text)',
-          }}
-        >
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2" style={{ color: 'var(--room-text)' }}>
-              <Bot className="h-4 w-4" style={{ color: 'var(--room-accent)' }} />
-              Add AI Model
-            </DialogTitle>
-          </DialogHeader>
-
-          <div className="space-y-4 py-2">
-            {/* Model selection */}
-            <div className="space-y-2">
-              <Label className="text-sm" style={{ color: 'var(--room-text)' }}>Model</Label>
-              {modelsLoading ? (
-                <div
-                  className="flex items-center gap-2 h-8 px-3 rounded-md text-sm"
-                  style={{ border: '1px solid var(--room-border)', color: 'var(--room-text-muted)' }}
-                >
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  Loading models...
-                </div>
-              ) : (
-                <Select value={selectedModelId} onValueChange={(v) => { if (v !== null) setSelectedModelId(v); }}>
-                  <SelectTrigger className="w-full" style={{ background: 'var(--room-bg)', borderColor: 'var(--room-border)', color: 'var(--room-text)' }}>
-                    <SelectValue placeholder="Select a model...">
-                      {selectedModelId
-                        ? availableModels.find((m) => m.id === selectedModelId)?.name ?? selectedModelId
-                        : null}
-                    </SelectValue>
-                  </SelectTrigger>
-                  <SelectContent style={{ background: 'var(--room-bg)', border: '1px solid var(--room-border)' }}>
-                    {availableModels.map((model) => (
-                      <SelectItem key={model.id} value={model.id}>
-                        <div className="flex flex-col items-start gap-0.5">
-                          <span className="font-medium">{model.name}</span>
-                          <span className="text-xs" style={{ color: 'var(--room-text-muted)' }}>
-                            {model.capability} · {model.modality}
-                          </span>
-                        </div>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              )}
-            </div>
-
-            {/* System prompt */}
-            <div className="space-y-2">
-              <Label className="text-sm" style={{ color: 'var(--room-text)' }}>System Prompt</Label>
-              <textarea
-                className="min-h-[80px] w-full rounded-md px-3 py-2 text-sm resize-none focus-visible:outline-none focus-visible:ring-1"
-                style={{
-                  border: '1px solid var(--room-border)',
-                  background: 'var(--room-bg)',
-                  color: 'var(--room-text)',
-                  '--ring-color': 'var(--room-accent)',
-                } as React.CSSProperties}
-                placeholder="Optional system prompt for this AI..."
-                value={systemPrompt}
-                onChange={(e) => setSystemPrompt(e.target.value)}
-              />
-            </div>
-
-            {/* Agent type */}
-            <div className="space-y-2">
-              <Label className="text-sm" style={{ color: 'var(--room-text)' }}>Agent Type</Label>
-              <Select value={agentType} onValueChange={(v) => { if (v !== null) setAgentType(v); }}>
-                <SelectTrigger className="w-full" style={{ background: 'var(--room-bg)', borderColor: 'var(--room-border)', color: 'var(--room-text)' }}>
-                  <SelectValue>
-                    {agentType === 'react' ? 'ReAct (multi-step reasoning)' : 'Chat (simple)'}
-                  </SelectValue>
-                </SelectTrigger>
-                <SelectContent style={{ background: 'var(--room-bg)', border: '1px solid var(--room-border)' }}>
-                  <SelectItem value="chat">
-                    <div className="flex flex-col items-start gap-0.5">
-                      <span className="font-medium">Chat</span>
-                      <span className="text-xs" style={{ color: 'var(--room-text-muted)' }}>Simple single-turn response</span>
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="react">
-                    <div className="flex flex-col items-start gap-0.5">
-                      <span className="font-medium">ReAct</span>
-                      <span className="text-xs" style={{ color: 'var(--room-text-muted)' }}>Multi-step reasoning with tool use</span>
-                    </div>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* Advanced settings toggle */}
-            <button
-              type="button"
-              className="flex items-center gap-1 text-xs transition-colors"
-              style={{ color: 'var(--room-text-muted)' }}
-              onClick={() => setShowAdvanced((v) => !v)}
-            >
-              {showAdvanced ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
-              Advanced options
-            </button>
-
-            {showAdvanced && (
-              <div className="space-y-3 pl-1">
-                {/* Temperature */}
-                <div className="space-y-1">
-                  <Label className="text-xs" style={{ color: 'var(--room-text)' }}>Temperature</Label>
-                  <Input
-                    type="number"
-                    step="0.1"
-                    min="0"
-                    max="2"
-                    placeholder="e.g. 0.7"
-                    value={temperature}
-                    onChange={(e) => setTemperature(e.target.value)}
-                    style={{ background: 'var(--room-bg)', borderColor: 'var(--room-border)', color: 'var(--room-text)' }}
-                  />
-                </div>
-
-                {/* Max tokens */}
-                <div className="space-y-1">
-                  <Label className="text-xs" style={{ color: 'var(--room-text)' }}>Max Tokens</Label>
-                  <Input
-                    type="number"
-                    placeholder="e.g. 4096"
-                    value={maxTokens}
-                    onChange={(e) => setMaxTokens(e.target.value)}
-                    style={{ background: 'var(--room-bg)', borderColor: 'var(--room-border)', color: 'var(--room-text)' }}
-                  />
-                </div>
-
-                {/* History limit */}
-                <div className="space-y-1">
-                  <Label className="text-xs" style={{ color: 'var(--room-text)' }}>History Limit (messages)</Label>
-                  <Input
-                    type="number"
-                    placeholder="e.g. 50"
-                    value={historyLimit}
-                    onChange={(e) => setHistoryLimit(e.target.value)}
-                    style={{ background: 'var(--room-bg)', borderColor: 'var(--room-border)', color: 'var(--room-text)' }}
-                  />
-                </div>
-
-                {/* Toggles */}
-                <div className="space-y-2">
-                  <div className="flex items-center justify-between">
-                    <Label className="text-xs" style={{ color: 'var(--room-text)' }}>Use Exact</Label>
-                    <Switch checked={useExact} onCheckedChange={setUseExact} size="sm" />
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <Label className="text-xs" style={{ color: 'var(--room-text)' }}>Think Mode</Label>
-                    <Switch checked={think} onCheckedChange={setThink} size="sm" />
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <Label className="text-xs" style={{ color: 'var(--room-text)' }}>Streaming</Label>
-                    <Switch checked={stream} onCheckedChange={setStream} size="sm" />
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setShowAiAddDialog(false)}
-              style={{ borderColor: 'var(--room-border)', color: 'var(--room-text)' }}
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={handleAddAi}
-              disabled={!selectedModelId || isAddingAi}
-              style={{ background: 'var(--room-accent)', color: 'var(--accent-fg)', border: 'none' }}
-            >
-              {isAddingAi ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              Add Model
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
     </aside>
   );
 });