@parhelia/core 0.1.12556 → 0.1.12560

package/dist/editor/settings/panels/ModelsPanel.js

@@ -1,62 +1,193 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useCallback } from "react";
 import { Button } from "../../../components/ui/button";
+import { Input } from "../../../components/ui/input";
+import { Select } from "../../../components/ui/select";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../../../components/ui/dialog";
 import { setupWizardService, } from "../../../setup/services/setupWizardService";
-import { CheckCircle, AlertCircle, RefreshCw, Upload, Plus, ArrowRight, Settings, Cloud, Trash2, } from "lucide-react";
+import { AlertCircle, RefreshCw, Upload, Plus, ArrowRight, Brain, Image, Settings, Cloud, Trash2, Copy, } from "lucide-react";
+import { useSearchParams } from "../../client/navigation";
 import { AddModelDialog } from "../../../setup/wizard/steps/AddModelDialog";
 import { ImportModelDialog } from "../../../setup/wizard/steps/ImportModelDialog";
 import { Splitter } from "../../ui/Splitter";
-import { ItemConfigPanel } from "./ItemConfigPanel";
+import { ModelConfigPanel } from "./ModelConfigPanel";
 import { useEditContext } from "../../client/editContext";
 import { FilterInput } from "../../../components/FilterInput";
+const SELECTED_MODEL_QUERY_PARAM = "modelId";
+/**
+ * True when a numeric price is present (including 0). Used for display and
+ * "missing pricing" detection; provider import leaves fields empty instead of "0".
+ */
+const hasDefinedPricingValue = (value) => value !== undefined && value !== null;
+const hasUsableImagePricing = (model) => hasDefinedPricingValue(model.pricing?.requestCost) ||
+    hasDefinedPricingValue(model.pricing?.imageCost) ||
+    hasDefinedPricingValue(model.pricing?.imageOutputCost) ||
+    hasDefinedPricingValue(model.pricing?.imageTokenCost) ||
+    hasDefinedPricingValue(model.pricing?.inputTextTokenCostPerMillion) ||
+    hasDefinedPricingValue(model.pricing?.inputImageTokenCostPerMillion) ||
+    hasDefinedPricingValue(model.pricing?.outputImageTokenCostPerMillion);
+/**
+ * True when the model row has nothing to show on the pricing line (no usable
+ * token/image figures). This is the same condition used to decide whether to
+ * show the warning — avoids blank rows when field-level "missing" logic drifts.
+ */
+const isPricingLineEmpty = (model) => !hasVisiblePricingSummary(model);
+const getPricingWarningMessage = (model) => {
+    const template = model.templateType || "Ai Chat Model";
+    if (template === "Ai Image Model") {
+        return "Pricing information is missing. Configure at least one image pricing field.";
+    }
+    if (template === "Ai Embeddings Model") {
+        return "Pricing information is missing. Set Input Cost Per Million Tokens.";
+    }
+    const missingFields = [];
+    if (!hasDefinedPricingValue(model.pricing?.inputCostPerMillionTokens)) {
+        missingFields.push("Input Cost Per Million Tokens");
+    }
+    if (!hasDefinedPricingValue(model.pricing?.outputCostPerMillionTokens)) {
+        missingFields.push("Output Cost Per Million Tokens");
+    }
+    if (missingFields.length === 0) {
+        return "Pricing information is missing.";
+    }
+    return `Pricing information is missing. Set ${missingFields.join(" and ")}.`;
+};
+const hasVisiblePricingSummary = (model) => {
+    if (!model.pricing) {
+        return false;
+    }
+    if (model.templateType === "Ai Image Model") {
+        return hasUsableImagePricing(model);
+    }
+    return (hasDefinedPricingValue(model.pricing.inputCostPerMillionTokens) ||
+        hasDefinedPricingValue(model.pricing.outputCostPerMillionTokens) ||
+        hasDefinedPricingValue(model.pricing.cachedInputCostPerMillionTokens));
+};
+/** Sitecore item name for lists and dialogs; falls back to API model id / key. */
+function getModelListLabel(model) {
+    return model.itemName?.trim() || model.name || model.key || "";
+}
+function normalizeModelId(id) {
+    return (id || "").replace(/[{}]/g, "").toLowerCase();
+}
+function getModelTypeLabel(templateType) {
+    switch (templateType) {
+        case "Ai Chat Model":
+            return "Chat";
+        case "Ai Embeddings Model":
+            return "Embeddings";
+        case "Ai Image Model":
+            return "Image";
+        default:
+            return templateType;
+    }
+}
 /**
  * Settings panel for AI Models configuration.
  * Install and configure AI models for chat and other tasks.
  */
 export function ModelsPanel() {
     const editContext = useEditContext();
+    const searchParams = useSearchParams();
     const [state, setState] = useState("loading");
     const [installedModels, setInstalledModels] = useState([]);
     const [providers, setProviders] = useState([]);
+    const [settingsExists, setSettingsExists] = useState(false);
+    const [defaultChatModelId, setDefaultChatModelId] = useState("");
+    const [defaultImageModelId, setDefaultImageModelId] = useState("");
+    const [savingDefaults, setSavingDefaults] = useState(false);
     const [error, setError] = useState(null);
     const [updating, setUpdating] = useState(null);
     // Dialog states
     const [showAddDialog, setShowAddDialog] = useState(false);
     const [showImportDialog, setShowImportDialog] = useState(false);
-    // Sidebar editor state
+    // URL-synced model selection
+    const [urlSelectedModelId, setUrlSelectedModelId] = useState(searchParams.get(SELECTED_MODEL_QUERY_PARAM) ||
+        (typeof window !== "undefined"
+            ? new URLSearchParams(window.location.search).get(SELECTED_MODEL_QUERY_PARAM)
+            : null));
     const [selectedModel, setSelectedModel] = useState(null);
     // Bulk pricing update state
     const [updatingAllPricing, setUpdatingAllPricing] = useState(false);
-    const [updatingModelPricing, setUpdatingModelPricing] = useState(null);
     // Delete state
     const [deleting, setDeleting] = useState(null);
+    // Duplicate state
+    const [duplicatingId, setDuplicatingId] = useState(null);
+    const [duplicateDialogModel, setDuplicateDialogModel] = useState(null);
+    const [duplicateItemName, setDuplicateItemName] = useState("");
     // Provider types (discovered from backend)
     const [providerTypes, setProviderTypes] = useState([]);
     // Filter state
     const [filterText, setFilterText] = useState("");
+    useEffect(() => {
+        const key = searchParams.get(SELECTED_MODEL_QUERY_PARAM) ||
+            (typeof window !== "undefined"
+                ? new URLSearchParams(window.location.search).get(SELECTED_MODEL_QUERY_PARAM)
+                : null);
+        setUrlSelectedModelId(key);
+    }, [searchParams]);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const handlePopState = () => {
+            setUrlSelectedModelId(new URLSearchParams(window.location.search).get(SELECTED_MODEL_QUERY_PARAM));
+        };
+        window.addEventListener("popstate", handlePopState);
+        return () => window.removeEventListener("popstate", handlePopState);
+    }, []);
+    useEffect(() => {
+        if (!urlSelectedModelId) {
+            if (selectedModel)
+                setSelectedModel(null);
+            return;
+        }
+        const match = installedModels.find((m) => m.id === urlSelectedModelId);
+        if (match && match !== selectedModel) {
+            setSelectedModel(match);
+        }
+    }, [installedModels, urlSelectedModelId, selectedModel]);
+    const updateSelectedModelUrl = useCallback((modelId) => {
+        editContext?.updateUrl({
+            [SELECTED_MODEL_QUERY_PARAM]: modelId || undefined,
+        });
+        setUrlSelectedModelId(modelId || null);
+    }, [editContext]);
     const handleOpenConfig = (model) => {
         setSelectedModel(model);
+        updateSelectedModelUrl(model.id);
     };
     const handleCloseConfig = () => {
         setSelectedModel(null);
+        updateSelectedModelUrl(null);
     };
     const loadData = async () => {
         try {
             setState("loading");
             setError(null);
-            const [installed, providersData, providerTypesData] = await Promise.all([
+            const [installed, providersData, providerTypesData, defaultModels, hasSettings,] = await Promise.all([
                 setupWizardService.getInstalledModels(),
                 setupWizardService.getProviders(),
                 setupWizardService.getProviderTypes(),
+                setupWizardService.getDefaultModels(),
+                setupWizardService.getSettingsExists(),
             ]);
             setInstalledModels(installed);
             setProviders(providersData);
             setProviderTypes(providerTypesData);
+            setSettingsExists(hasSettings);
+            const resolvedChatModel = installed.find((model) => normalizeModelId(model.id) ===
+                normalizeModelId(defaultModels.chatModelId));
+            const resolvedImageModel = installed.find((model) => normalizeModelId(model.id) ===
+                normalizeModelId(defaultModels.imageModelId));
+            setDefaultChatModelId(resolvedChatModel?.id || defaultModels.chatModelId || "");
+            setDefaultImageModelId(resolvedImageModel?.id || defaultModels.imageModelId || "");
             setState("success");
+            return installed;
         }
         catch (e) {
             setState("error");
             setError(e?.message || "Failed to load models");
+            return undefined;
         }
     };
     // Get providers that support model import (any provider with a registered provider type)
@@ -120,88 +251,131 @@ export function ModelsPanel() {
             setUpdatingAllPricing(false);
         }
     };
-    // Update pricing for a single model
-    const handleUpdateSingleModelPricing = async (model) => {
-        if (!model.providerId || !model.name) {
-            setError("Model provider or name is missing");
+    const handleUpdate = async (model) => {
+        if (!model.id || !model.key)
             return;
-        }
         try {
-            setUpdatingModelPricing(model.id);
+            setUpdating(model.id);
             setError(null);
-            const result = await setupWizardService.upsertProviderModels({
-                providerId: model.providerId,
-                selectedModelIds: [model.name],
-                mode: "updatePricing",
+            await setupWizardService.updateModel({
+                modelId: model.id,
+                sourceModelKey: model.key,
             });
             await loadData();
-            if (result.errors.length > 0) {
-                setError(`Errors: ${result.errors.join(", ")}`);
-            }
         }
         catch (e) {
-            setError(e?.message || "Failed to update pricing");
+            setError(e?.message || "Failed to update model");
         }
         finally {
-            setUpdatingModelPricing(null);
+            setUpdating(null);
         }
     };
-    const handleUpdate = async (model) => {
-        if (!model.id || !model.key)
+    const handleDefaultModelsChange = async (nextChatModelId, nextImageModelId) => {
+        if (!settingsExists) {
+            setError("Parhelia settings item not found");
             return;
+        }
+        const previousChatModelId = defaultChatModelId;
+        const previousImageModelId = defaultImageModelId;
+        setDefaultChatModelId(nextChatModelId);
+        setDefaultImageModelId(nextImageModelId);
         try {
-            setUpdating(model.id);
+            setSavingDefaults(true);
             setError(null);
-            await setupWizardService.updateModel({
-                modelId: model.id,
-                sourceModelKey: model.key,
+            await setupWizardService.setDefaultModels({
+                chatModelId: nextChatModelId,
+                imageModelId: nextImageModelId,
             });
-            await loadData();
         }
         catch (e) {
-            setError(e?.message || "Failed to update model");
+            setDefaultChatModelId(previousChatModelId);
+            setDefaultImageModelId(previousImageModelId);
+            setError(e?.message || "Failed to save default models");
         }
         finally {
-            setUpdating(null);
+            setSavingDefaults(false);
         }
     };
-    const handleDelete = (model) => {
+    const handleDelete = async (model) => {
         if (!editContext || !model.id)
             return;
-        editContext.confirm({
-            header: "Delete Model",
-            message: `Are you sure you want to delete "${model.name || model.key}"?`,
-            acceptLabel: "Delete",
-            showCancel: true,
-            accept: async () => {
-                try {
-                    setDeleting(model.id);
-                    setError(null);
-                    // If this model is currently selected, close the config panel
-                    if (selectedModel?.id === model.id) {
-                        setSelectedModel(null);
-                    }
-                    // Delete the model item
-                    await editContext.operations.deleteItems([
-                        {
-                            id: model.id,
-                            language: editContext.item?.language ??
-                                editContext.currentItemDescriptor?.language ??
-                                "en",
-                            version: 0,
-                        },
-                    ]);
-                    // Reload the models list
-                    await loadData();
-                }
-                catch (e) {
-                    setError(e?.message || "Failed to delete model");
+        try {
+            setDeleting(model.id);
+            setError(null);
+            const deleted = await editContext.operations.deleteItems([
+                {
+                    id: model.id,
+                    language: editContext.item?.language ??
+                        editContext.currentItemDescriptor?.language ??
+                        "en",
+                    version: 0,
+                },
+            ]);
+            if (deleted) {
+                if (selectedModel?.id === model.id) {
+                    setSelectedModel(null);
+                    updateSelectedModelUrl(null);
                 }
-                finally {
-                    setDeleting(null);
+                await loadData();
+            }
+        }
+        catch (e) {
+            setError(e?.message || "Failed to delete model");
+        }
+        finally {
+            setDeleting(null);
+        }
+    };
+    const openDuplicateDialog = (model) => {
+        const segment = model.itemName?.trim() ||
+            (model.key.includes("/") && model.key.split("/").length > 0
+                ? model.key.split("/").pop()
+                : model.name || model.key);
+        setDuplicateItemName(`Copy of ${segment}`);
+        setDuplicateDialogModel(model);
+    };
+    const handleConfirmDuplicate = async () => {
+        if (!editContext || !duplicateDialogModel?.id) {
+            return;
+        }
+        const parentId = duplicateDialogModel.parentId;
+        if (!parentId) {
+            return;
+        }
+        const name = duplicateItemName.trim();
+        if (!name) {
+            setError("Enter a name for the duplicate item");
+            return;
+        }
+        const model = duplicateDialogModel;
+        const lang = editContext.item?.language ??
+            editContext.currentItemDescriptor?.language ??
+            "en";
+        try {
+            setDuplicatingId(model.id);
+            setError(null);
+            const created = await editContext.operations.duplicateItem({ id: model.id, language: lang, version: 0 }, { id: parentId, language: lang, version: 0 }, name);
+            if (!created) {
+                setDuplicatingId(null);
+                return;
+            }
+            setDuplicateDialogModel(null);
+            const list = await loadData();
+            if (list) {
+                const createdId = String(created.id).replace(/[{}]/g, "").toLowerCase();
+                const next = list.find((m) => m.id.replace(/[{}]/g, "").toLowerCase() === createdId);
+                if (next) {
+                    setSelectedModel(next);
+                    updateSelectedModelUrl(next.id);
                 }
-            },
-        });
+            }
+        }
+        catch (e) {
+            setError(e?.message || "Failed to duplicate model");
+        }
+        finally {
+            setDuplicatingId(null);
+        }
     };
     useEffect(() => {
         loadData();
@@ -211,25 +385,50 @@ export function ModelsPanel() {
             window.location.hash = "#providers";
         }
     };
-    // Check if model uses an importable provider (OpenRouter or Novita)
-    const isImportableModel = (model) => {
-        if (!model.providerId)
-            return false;
-        return importableProviders.some((p) => p.id === model.providerId);
-    };
-    // Helper to get model type display label
-    const getModelTypeLabel = (templateType) => {
-        switch (templateType) {
-            case "Ai Chat Model":
-                return "Chat";
-            case "Ai Embeddings Model":
-                return "Embeddings";
-            case "Ai Image Model":
-                return "Image";
-            default:
-                return templateType;
+    const chatModels = useMemo(() => installedModels
+        .filter((model) => model.templateType === "Ai Chat Model")
+        .sort((a, b) => getModelListLabel(a).localeCompare(getModelListLabel(b))), [installedModels]);
+    const imageModels = useMemo(() => installedModels
+        .filter((model) => model.templateType === "Ai Image Model")
+        .sort((a, b) => getModelListLabel(a).localeCompare(getModelListLabel(b))), [installedModels]);
+    const chatDefaultConfiguredModel = useMemo(() => chatModels.find((model) => normalizeModelId(model.id) === normalizeModelId(defaultChatModelId)), [chatModels, defaultChatModelId]);
+    const imageDefaultConfiguredModel = useMemo(() => imageModels.find((model) => normalizeModelId(model.id) === normalizeModelId(defaultImageModelId)), [imageModels, defaultImageModelId]);
+    const chatModelOptions = useMemo(() => {
+        const options = [
+            { value: "", label: "Not set" },
+            ...chatModels.map((model) => ({
+                value: model.id,
+                label: getModelListLabel(model),
+                description: model.providerName || undefined,
+            })),
+        ];
+        if (defaultChatModelId && !chatDefaultConfiguredModel) {
+            options.push({
+                value: defaultChatModelId,
+                label: "Configured model not found",
+                description: defaultChatModelId,
+            });
         }
-    };
+        return options;
+    }, [chatModels, defaultChatModelId, chatDefaultConfiguredModel]);
+    const imageModelOptions = useMemo(() => {
+        const options = [
+            { value: "", label: "Not set" },
+            ...imageModels.map((model) => ({
+                value: model.id,
+                label: getModelListLabel(model),
+                description: model.providerName || undefined,
+            })),
+        ];
+        if (defaultImageModelId && !imageDefaultConfiguredModel) {
+            options.push({
+                value: defaultImageModelId,
+                label: "Configured model not found",
+                description: defaultImageModelId,
+            });
+        }
+        return options;
+    }, [imageModels, defaultImageModelId, imageDefaultConfiguredModel]);
     // Filter models based on filter text
     const filteredModels = useMemo(() => {
         if (!filterText.trim()) {
@@ -237,18 +436,20 @@ export function ModelsPanel() {
         }
         const searchTerm = filterText.toLowerCase().trim();
         return installedModels.filter((model) => {
+            const listLabel = getModelListLabel(model).toLowerCase();
             const modelName = (model.name || model.key || "").toLowerCase();
             const providerName = (model.providerName || "").toLowerCase();
             const templateType = (model.templateType || "").toLowerCase();
             const modelTypeLabel = getModelTypeLabel(model.templateType || "Ai Chat Model").toLowerCase();
-            return (modelName.includes(searchTerm) ||
+            return (listLabel.includes(searchTerm) ||
+                modelName.includes(searchTerm) ||
                 providerName.includes(searchTerm) ||
                 templateType.includes(searchTerm) ||
                 modelTypeLabel.includes(searchTerm));
         });
-    }, [installedModels, filterText, getModelTypeLabel]);
+    }, [installedModels, filterText]);
     // Group models by provider for display
-    const groupModelsByProvider = (models) => {
+    const groupModelsByProvider = useCallback((models) => {
         const groups = {};
         models.forEach((model) => {
             const providerId = model.providerId || "unknown";
@@ -265,42 +466,60 @@ export function ModelsPanel() {
                 const typeOrder = (a.templateType || "").localeCompare(b.templateType || "");
                 if (typeOrder !== 0)
                     return typeOrder;
-                return (a.name || a.key || "").localeCompare(b.name || b.key || "");
+                return getModelListLabel(a).localeCompare(getModelListLabel(b));
             });
         });
         return groups;
-    };
-    const modelsByProvider = useMemo(() => groupModelsByProvider(filteredModels), [filteredModels, providers]);
-    const statusIcon = (currentState) => {
-        if (currentState === "success")
-            return _jsx(CheckCircle, { className: "h-4 w-4 text-green-600", strokeWidth: 1 });
-        if (currentState === "error")
-            return _jsx(AlertCircle, { className: "h-4 w-4 text-red-600", strokeWidth: 1 });
-        return (_jsx(RefreshCw, { className: "h-4 w-4 animate-spin text-amber-600", strokeWidth: 1 }));
-    };
+    }, [providers]);
+    const modelsByProvider = useMemo(() => groupModelsByProvider(filteredModels), [filteredModels, groupModelsByProvider]);
+    const modelsMissingPricing = useMemo(() => {
+        return installedModels.filter((model) => isPricingLineEmpty(model));
+    }, [installedModels]);
     // Build the models list content
-    const modelsListContent = (_jsx("div", { className: "flex h-full flex-col p-4", children: _jsx("div", { className: "mx-auto flex w-full flex-1 flex-col overflow-hidden", children: _jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [_jsxs("div", { className: "shrink-0 space-y-4 pb-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [statusIcon(state), _jsxs("span", { className: "text-sm text-gray-700", children: [installedModels.length, " model", installedModels.length !== 1 ? "s" : "", " installed"] })] }), importableInstalledModels.length > 0 && (_jsxs(Button, { size: "sm", variant: "outline", onClick: handleUpdateAllPricing, disabled: updatingAllPricing, title: "Update pricing for all models from their provider APIs", children: [updatingAllPricing ? (_jsx(RefreshCw, { className: "mr-1 h-4 w-4 animate-spin" })) : (_jsx(RefreshCw, { className: "mr-1 h-4 w-4" })), "Update All Pricing"] }))] }), state !== "loading" && providers.length === 0 && (_jsx("div", { className: "rounded border border-yellow-200 bg-yellow-50 p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(AlertCircle, { className: "mt-0.5 h-5 w-5 shrink-0 text-yellow-600" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "mb-1 text-sm font-medium text-yellow-800", children: "No providers configured" }), _jsx("p", { className: "mb-3 text-xs text-yellow-700", children: "You need to configure at least one provider before you can add models." }), _jsxs(Button, { size: "sm", variant: "outline", onClick: handleNavigateToProviders, className: "text-xs", children: ["Go to Providers", _jsx(ArrowRight, { className: "ml-1 h-3 w-3" })] })] })] }) })), providers.length > 0 && (_jsxs("div", { className: "flex gap-2", children: [importableProviders.length > 0 && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
-                                            setShowImportDialog(true);
-                                            setError(null);
-                                        }, children: [_jsx(Cloud, { strokeWidth: 1, className: "mr-1 h-4 w-4" }), "Import from Provider"] })), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
-                                            setShowAddDialog(true);
-                                            setError(null);
-                                        }, children: [_jsx(Plus, { strokeWidth: 1, className: "mr-1 h-4 w-4" }), "Add Manually"] })] })), error && (_jsx("div", { className: "rounded border border-red-200 bg-red-50 p-2 text-xs whitespace-pre-wrap text-red-700", children: error })), _jsx(FilterInput, { value: filterText, onChange: setFilterText, placeholder: "Filter models by name, provider, or type...", className: "w-full" })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: filterText && filteredModels.length === 0 ? (_jsxs("div", { className: "flex items-center justify-center py-8 text-sm text-gray-500", children: ["No models found matching \"", filterText, "\""] })) : (_jsx("div", { className: "space-y-4", children: Object.entries(modelsByProvider).map(([providerId, { providerName, models }]) => {
+    const modelsListContent = (_jsx("div", { className: "flex h-full flex-col p-4", children: _jsx("div", { className: "mx-auto flex w-full flex-1 flex-col overflow-hidden", children: _jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [_jsxs("div", { className: "mt-1 shrink-0", children: [_jsxs("div", { className: "mb-2 rounded-t-lg bg-white p-4", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold text-gray-900", children: "Default models" }), _jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Choose the shared defaults used when a chat or image model is not configured elsewhere." })] }), savingDefaults && (_jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-500", children: [_jsx(RefreshCw, { className: "h-3.5 w-3.5 animate-spin" }), "Saving..."] }))] }), _jsxs("div", { className: "mt-4 grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium text-gray-700", children: [_jsx(Brain, { className: "h-4 w-4 text-purple-600", strokeWidth: 1.5 }), "Default chat model"] }), _jsx(Select, { value: defaultChatModelId, onValueChange: (value) => void handleDefaultModelsChange(value, defaultImageModelId), options: chatModelOptions, placeholder: "Select a chat model", disabled: savingDefaults || !settingsExists, searchable: true, searchPlaceholder: "Search chat models..." }), _jsx("p", { className: "text-xs text-gray-500", children: "Used by features that fall back to the settings-level chat model." })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium text-gray-700", children: [_jsx(Image, { className: "h-4 w-4 text-green-600", strokeWidth: 1.5 }), "Default image model"] }), _jsx(Select, { value: defaultImageModelId, onValueChange: (value) => void handleDefaultModelsChange(defaultChatModelId, value), options: imageModelOptions, placeholder: "Select an image model", disabled: savingDefaults || !settingsExists, searchable: true, searchPlaceholder: "Search image models..." }), _jsx("p", { className: "text-xs text-gray-500", children: "Used by image generation and editing features that rely on the shared default." })] })] }), !settingsExists && (_jsx("div", { className: "mt-4 rounded border border-yellow-200 bg-yellow-50 p-3 text-xs text-yellow-800", children: "Create the Parhelia settings item before saving default models." }))] }), _jsx("div", { className: "rounded-t-lg bg-white p-4", children: _jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsxs("h2", { className: "text-sm font-semibold text-gray-900", children: ["Installed models (", installedModels.length, ")"] }), _jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Browse, filter, and configure the models available in Parhelia." }), modelsMissingPricing.length > 0 && (_jsxs("div", { className: "mt-3 rounded border border-yellow-200 bg-yellow-50 p-3 text-xs text-yellow-800", children: [modelsMissingPricing.length, " installed model", modelsMissingPricing.length !== 1
+                                                            ? "s have"
+                                                            : " has", " ", "missing or incomplete pricing information. A warning is shown on each affected model below."] }))] }), _jsx("div", { className: "flex flex-wrap items-center gap-3", children: importableInstalledModels.length > 0 && (_jsxs(Button, { size: "sm", variant: "outline", onClick: handleUpdateAllPricing, disabled: updatingAllPricing, title: "Update pricing for all models from their provider APIs", children: [updatingAllPricing ? (_jsx(RefreshCw, { className: "mr-1 h-4 w-4 animate-spin" })) : (_jsx(RefreshCw, { className: "mr-1 h-4 w-4" })), "Update All Pricing"] })) })] }) }), _jsxs("div", { className: "bg-white px-4", children: [state !== "loading" && providers.length === 0 && (_jsx("div", { className: "rounded border border-yellow-200 bg-yellow-50 p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(AlertCircle, { className: "mt-0.5 h-5 w-5 shrink-0 text-yellow-600" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "mb-1 text-sm font-medium text-yellow-800", children: "No providers configured" }), _jsx("p", { className: "mb-3 text-xs text-yellow-700", children: "You need to configure at least one provider before you can add models." }), _jsxs(Button, { size: "sm", variant: "outline", onClick: handleNavigateToProviders, className: "text-xs", children: ["Go to Providers", _jsx(ArrowRight, { className: "ml-1 h-3 w-3" })] })] })] }) })), providers.length > 0 && (_jsxs("div", { className: "mb-4 flex gap-2", children: [importableProviders.length > 0 && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                                                    setShowImportDialog(true);
+                                                    setError(null);
+                                                }, children: [_jsx(Cloud, { strokeWidth: 1, className: "mr-1 h-4 w-4" }), "Import from Provider"] })), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                                                    setShowAddDialog(true);
+                                                    setError(null);
+                                                }, children: [_jsx(Plus, { strokeWidth: 1, className: "mr-1 h-4 w-4" }), "Add Manually"] })] })), error && (_jsx("div", { className: "rounded border border-red-200 bg-red-50 p-2 text-xs whitespace-pre-wrap text-red-700", children: error })), _jsx(FilterInput, { value: filterText, onChange: setFilterText, placeholder: "Filter models by name, provider, or type...", className: "mb-4 w-full" })] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto rounded-b-lg bg-white px-4 pb-4", children: filterText && filteredModels.length === 0 ? (_jsxs("div", { className: "flex items-center justify-center py-8 text-sm text-gray-500", children: ["No models found matching ", `"${filterText}"`] })) : (_jsx("div", { className: "space-y-4", children: Object.entries(modelsByProvider).map(([providerId, { providerName, models }]) => {
                                 if (models.length === 0)
                                     return null;
                                 return (_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "block text-sm font-medium text-gray-700", children: [providerName, _jsxs("span", { className: "ml-2 text-xs font-normal text-gray-500", children: ["(", models.length, " model", models.length !== 1 ? "s" : "", ")"] })] }), _jsx("div", { className: "space-y-2", children: models.map((model) => {
                                                 const status = model.status;
                                                 const isSelected = selectedModel?.id === model.id;
+                                                const showPricingLine = hasVisiblePricingSummary(model);
                                                 return (_jsxs("div", { className: `flex flex-wrap items-center gap-2 rounded border p-3 text-sm transition-shadow hover:shadow-sm ${isSelected
                                                         ? "border-blue-400 bg-blue-50"
-                                                        : "border-gray-200 bg-white"}`, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "truncate font-medium", children: model.name || model.key }), _jsx("span", { className: "shrink-0 rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600", children: getModelTypeLabel(model.templateType || "Ai Chat Model") }), status === "Outdated" && (_jsx("span", { className: "shrink-0 rounded bg-amber-100 px-1.5 py-0.5 text-xs text-amber-700", children: "Update available" }))] }), model.pricing && (_jsxs("div", { className: "mt-1 text-xs text-gray-500", children: ["Input: $", model.pricing.inputCostPerMillionTokens?.toFixed(2) || "0.00", "/M, Output: $", model.pricing.outputCostPerMillionTokens?.toFixed(2) || "0.00", "/M", model.pricing
-                                                                            .cachedInputCostPerMillionTokens && (_jsxs("span", { className: "ml-2", children: ["Cached: $", model.pricing.cachedInputCostPerMillionTokens.toFixed(2), "/M"] }))] })), (model.maxContextWindowTokens ||
+                                                        : "border-gray-200 bg-white"}`, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "truncate font-medium", children: getModelListLabel(model) }), _jsx("span", { className: "shrink-0 rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600", children: getModelTypeLabel(model.templateType || "Ai Chat Model") }), normalizeModelId(model.id) ===
+                                                                            normalizeModelId(defaultChatModelId) && (_jsx("span", { className: "shrink-0 rounded bg-purple-100 px-1.5 py-0.5 text-xs text-purple-700", children: "Default chat" })), normalizeModelId(model.id) ===
+                                                                            normalizeModelId(defaultImageModelId) && (_jsx("span", { className: "shrink-0 rounded bg-green-100 px-1.5 py-0.5 text-xs text-green-700", children: "Default image" })), status === "Outdated" && (_jsx("span", { className: "shrink-0 rounded bg-amber-100 px-1.5 py-0.5 text-xs text-amber-700", children: "Update available" })), !showPricingLine && (_jsx("span", { className: "shrink-0 rounded bg-yellow-100 px-1.5 py-0.5 text-xs text-yellow-800", children: "Pricing missing" }))] }), showPricingLine && model.pricing ? (_jsx("div", { className: "mt-1 text-xs text-gray-500", children: model.templateType ===
+                                                                        "Ai Image Model" &&
+                                                                        hasUsableImagePricing(model) ? (_jsxs(_Fragment, { children: [hasDefinedPricingValue(model.pricing.inputTextTokenCostPerMillion) && (_jsxs("span", { children: ["Input Text: $", model.pricing.inputTextTokenCostPerMillion.toFixed(2), "/M"] })), hasDefinedPricingValue(model.pricing.inputImageTokenCostPerMillion) && (_jsxs("span", { className: "ml-2", children: ["Input Image: $", model.pricing.inputImageTokenCostPerMillion.toFixed(2), "/M"] })), hasDefinedPricingValue(model.pricing.outputImageTokenCostPerMillion) && (_jsxs("span", { className: "ml-2", children: ["Output Image: $", model.pricing.outputImageTokenCostPerMillion.toFixed(2), "/M"] })), hasDefinedPricingValue(model.pricing.imageTokenCost) &&
+                                                                                !hasDefinedPricingValue(model.pricing.outputImageTokenCostPerMillion) && (_jsxs("span", { className: "ml-2", children: ["Image Tokens: $", model.pricing.imageTokenCost.toFixed(2), "/M"] }))] })) : (_jsxs(_Fragment, { children: [hasDefinedPricingValue(model.pricing
+                                                                                .inputCostPerMillionTokens) && (_jsxs("span", { children: ["Input: $", model.pricing.inputCostPerMillionTokens.toFixed(2), "/M"] })), hasDefinedPricingValue(model.pricing
+                                                                                .outputCostPerMillionTokens) && (_jsxs("span", { className: "ml-2", children: ["Output: $", model.pricing.outputCostPerMillionTokens.toFixed(2), "/M"] })), hasDefinedPricingValue(model.pricing
+                                                                                .cachedInputCostPerMillionTokens) && (_jsxs("span", { className: "ml-2", children: ["Cached: $", model.pricing.cachedInputCostPerMillionTokens.toFixed(2), "/M"] }))] })) })) : (_jsxs("div", { className: "mt-1 flex items-start gap-2 rounded border border-yellow-200 bg-yellow-50 px-2 py-1.5 text-xs text-yellow-800", children: [_jsx(AlertCircle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), _jsx("span", { children: getPricingWarningMessage(model) })] })), (model.maxContextWindowTokens ||
                                                                     model.maxResponseTokens) && (_jsxs("div", { className: "mt-1 text-xs text-gray-500", children: [model.maxContextWindowTokens && (_jsxs("span", { children: ["Context:", " ", model.maxContextWindowTokens.toLocaleString(), " ", "tokens"] })), model.maxContextWindowTokens &&
                                                                             model.maxResponseTokens &&
-                                                                            " • ", model.maxResponseTokens && (_jsxs("span", { children: ["Max Response:", " ", model.maxResponseTokens.toLocaleString(), " ", "tokens"] }))] }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [status === "Outdated" && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => handleUpdate(model), disabled: updating === model.id, title: "Update model", children: [updating === model.id ? (_jsx(RefreshCw, { strokeWidth: 1, className: "h-3 w-3 animate-spin" })) : (_jsx(Upload, { strokeWidth: 1, className: "h-3 w-3" })), _jsx("span", { className: "ml-1 hidden sm:inline", children: "Update" })] })), isImportableModel(model) && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => handleUpdateSingleModelPricing(model), disabled: updatingModelPricing === model.id ||
-                                                                        updatingAllPricing, title: "Update pricing from provider API", children: updatingModelPricing === model.id ? (_jsx(RefreshCw, { strokeWidth: 1, className: "h-3 w-3 animate-spin" })) : (_jsx(RefreshCw, { strokeWidth: 1, className: "h-3 w-3" })) })), _jsxs(Button, { size: "sm", variant: isSelected ? "default" : "ghost", onClick: () => handleOpenConfig(model), title: "Configure model", children: [_jsx(Settings, { className: "h-4 w-4", strokeWidth: 1.5 }), _jsx("span", { className: "ml-1 hidden sm:inline", children: "Configure" })] }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => handleDelete(model), disabled: deleting === model.id, title: "Delete model", className: "text-red-600 hover:bg-red-50 hover:text-red-700", children: deleting === model.id ? (_jsx(RefreshCw, { strokeWidth: 1, className: "h-3 w-3 animate-spin" })) : (_jsx(Trash2, { strokeWidth: 1, className: "h-3 w-3" })) })] })] }, model.id));
+                                                                            " • ", model.maxResponseTokens && (_jsxs("span", { children: ["Max Response:", " ", model.maxResponseTokens.toLocaleString(), " ", "tokens"] }))] }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [status === "Outdated" && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => handleUpdate(model), disabled: updating === model.id, title: "Update model", children: [updating === model.id ? (_jsx(RefreshCw, { strokeWidth: 1, className: "h-3 w-3 animate-spin" })) : (_jsx(Upload, { strokeWidth: 1, className: "h-3 w-3" })), _jsx("span", { className: "ml-1 hidden sm:inline", children: "Update" })] })), _jsxs(Button, { size: "sm", variant: isSelected ? "default" : "ghost", onClick: () => handleOpenConfig(model), title: "Configure model", children: [_jsx(Settings, { className: "h-4 w-4", strokeWidth: 1.5 }), _jsx("span", { className: "ml-1 hidden sm:inline", children: "Configure" })] }), _jsxs(Button, { size: "sm", variant: "ghost", onClick: () => openDuplicateDialog(model), disabled: !editContext ||
+                                                                        !model.parentId ||
+                                                                        duplicatingId === model.id, title: "Duplicate model", children: [duplicatingId === model.id ? (_jsx(RefreshCw, { strokeWidth: 1, className: "h-3 w-3 animate-spin" })) : (_jsx(Copy, { strokeWidth: 1, className: "h-3 w-3" })), _jsx("span", { className: "ml-1 hidden sm:inline", children: "Duplicate" })] }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => handleDelete(model), disabled: deleting === model.id, title: "Delete model", className: "text-red-600 hover:bg-red-50 hover:text-red-700", children: deleting === model.id ? (_jsx(RefreshCw, { strokeWidth: 1, className: "h-3 w-3 animate-spin" })) : (_jsx(Trash2, { strokeWidth: 1, className: "h-3 w-3" })) })] })] }, model.id));
                                             }) })] }, providerId));
-                            }) })) }), _jsx(AddModelDialog, { open: showAddDialog, onOpenChange: setShowAddDialog, onSuccess: loadData, providers: providers, installedModels: installedModels }), _jsx(ImportModelDialog, { open: showImportDialog, onOpenChange: setShowImportDialog, onSuccess: loadData, importableProviders: importableProviders, providerTypes: providerTypes })] }) }) }));
+                            }) })) }), _jsx(AddModelDialog, { open: showAddDialog, onOpenChange: setShowAddDialog, onSuccess: loadData, providers: providers, installedModels: installedModels }), _jsx(ImportModelDialog, { open: showImportDialog, onOpenChange: setShowImportDialog, onSuccess: loadData, importableProviders: importableProviders, providerTypes: providerTypes }), _jsx(Dialog, { open: duplicateDialogModel !== null, onOpenChange: (open) => {
+                            if (!open)
+                                setDuplicateDialogModel(null);
+                        }, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { className: "pr-14", children: [_jsx(DialogTitle, { children: "Duplicate model" }), _jsx(DialogDescription, { children: "New Sitecore item name. Field values (including model name and reasoning) are copied; adjust them in Configure after duplicating." })] }), _jsxs("div", { className: "space-y-2 px-8 pb-6", children: [_jsx("label", { htmlFor: "duplicate-model-item-name", className: "block text-sm font-medium text-gray-700", children: "Item name" }), _jsx(Input, { id: "duplicate-model-item-name", value: duplicateItemName, onChange: (e) => setDuplicateItemName(e.target.value), onKeyDown: (e) => {
+                                                if (e.key === "Enter") {
+                                                    e.preventDefault();
+                                                    void handleConfirmDuplicate();
+                                                }
+                                            }, autoFocus: true })] }), _jsxs(DialogFooter, { className: "border-t border-gray-100 pt-4", children: [_jsx(Button, { type: "button", variant: "outline", className: "min-h-9 min-w-22", onClick: () => setDuplicateDialogModel(null), children: "Cancel" }), _jsx(Button, { type: "button", className: "min-h-9 min-w-22", onClick: () => void handleConfirmDuplicate(), disabled: !duplicateItemName.trim() ||
+                                                (duplicateDialogModel != null &&
+                                                    duplicatingId === duplicateDialogModel.id), children: duplicateDialogModel != null &&
+                                                duplicatingId === duplicateDialogModel.id ? (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "mr-1 h-4 w-4 animate-spin" }), "Duplicating\u2026"] })) : ("Duplicate") })] })] }) })] }) }) }));
     // Build splitter panels - only show config panel when a model is selected
     const panels = selectedModel?.id
         ? [
@@ -313,7 +532,9 @@ export function ModelsPanel() {
             {
                 name: "model-config",
                 defaultSize: 400,
-                content: (_jsx(ItemConfigPanel, { itemId: selectedModel.id, title: `Configure: ${selectedModel.name || selectedModel.key || "Model"}`, onClose: handleCloseConfig }, selectedModel.id)),
+                content: (_jsx(ModelConfigPanel, { itemId: selectedModel.id, title: `Configure: ${getModelListLabel(selectedModel) || "Model"}`, onClose: handleCloseConfig, onModelRenamed: async () => {
+                        await loadData();
+                    } }, selectedModel.id)),
                 className: "overflow-hidden",
             },
         ]