@codingame/monaco-vscode-katex-common 31.0.0 → 32.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/widget/input/chatModelPicker.js

@@ -1,13 +1,17 @@
 
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
-import { append, $, addDisposableListener, EventType, EventHelper, getActiveElement, isHTMLElement, isHTMLInputElement, reset } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { append, $, addDisposableGenericMouseDownListener, EventHelper, addDisposableListener, EventType, getActiveElement, isHTMLElement, isHTMLInputElement, reset } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { StandardKeyboardEvent } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/keyboardEvent';
-import { renderIcon, renderLabelWithIcons } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/iconLabel/iconLabels';
+import { renderMarkdown } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/markdownRenderer';
+import { renderIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/iconLabel/iconLabels';
+import { getBaseLayerHoverDelegate } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/hover/hoverDelegate2';
+import { getDefaultHoverDelegate } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/hover/hoverDelegateFactory';
+import { toAction } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
 import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
 import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
 import { MarkdownString } from '@codingame/monaco-vscode-api/vscode/vs/base/common/htmlContent';
 import { KeyCode } from '@codingame/monaco-vscode-api/vscode/vs/base/common/keyCodes';
-import { Disposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { Disposable, DisposableStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
 import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
 import { URI } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uri';
@@ -44,20 +48,20 @@ function getUpdateHoverContent(updateState) {
     switch (updateState) {
     case StateType.AvailableForDownload:
         hoverContent.appendMarkdown(( localize(
-            7168,
+            7457,
             "This model requires a newer version of VS Code. [Download Update](command:update.downloadUpdate) to access it."
         )));
         break;
     case StateType.Downloaded:
     case StateType.Ready:
         hoverContent.appendMarkdown(( localize(
-            7169,
+            7458,
             "This model requires a newer version of VS Code. [Restart to Update](command:update.restartToUpdate) to access it."
         )));
         break;
     default:
         hoverContent.appendMarkdown(( localize(
-            7170,
+            7459,
             "This model requires a newer version of VS Code. [Update VS Code](command:update.checkForUpdate) to access it."
         )));
         break;
@@ -67,24 +71,111 @@ function getUpdateHoverContent(updateState) {
 const ModelPickerSection = {
     Other: "other"
 };
-function createModelItem(action, model) {
+function getVendorDisplayName(languageModelsService, vendor) {
+    const descriptor = languageModelsService.getVendors().find(v => v.vendor === vendor);
+    if (descriptor?.displayName) {
+        return descriptor.displayName;
+    }
+    return vendor.charAt(0).toUpperCase() + vendor.slice(1);
+}
+function getProviderGroupKey(vendor, groupName) {
+    return `${vendor}\u0000${groupName}`;
+}
+function buildModelToProviderGroupMap(languageModelsService) {
+    const map = ( new Map());
+    for (const vendor of languageModelsService.getVendors()) {
+        const groups = languageModelsService.getLanguageModelGroups(vendor.vendor);
+        for (const group of groups) {
+            const groupName = group.group?.name ?? vendor.displayName;
+            for (const identifier of group.modelIdentifiers) {
+                map.set(identifier, {
+                    vendor: vendor.vendor,
+                    groupName
+                });
+            }
+        }
+    }
+    return map;
+}
+function getProviderGroupForModel(model, modelToGroup, languageModelsService) {
+    const info = modelToGroup.get(model.identifier);
+    if (info) {
+        return info;
+    }
+    return {
+        vendor: model.metadata.vendor,
+        groupName: getVendorDisplayName(languageModelsService, model.metadata.vendor)
+    };
+}
+function isMultiplierPricing(model) {
+    return model.metadata.multiplierNumeric !== undefined;
+}
+function createModelItem(action, model, descriptionOverride, openerService, vendorLabel, isUBB) {
+    const hover = model && openerService ? getModelHoverContent(model, openerService, isUBB) : undefined;
     return {
         item: action,
         kind: ActionListItemKind.Action,
         label: action.label,
-        description: action.description,
+        description: descriptionOverride ?? action.description,
         group: {
             title: "",
             icon: action.icon ?? ThemeIcon.fromId(action.checked ? Codicon.check.id : Codicon.blank.id)
         },
         hideIcon: false,
         section: action.section,
-        hover: model ? {
-            content: getModelHoverContent(model)
+        className: vendorLabel ? "chat-model-picker-inline-source" : undefined,
+        badge: vendorLabel,
+        hover: hover ? {
+            content: hover.element,
+            disposable: hover.disposable
         } : undefined,
-        submenuActions: action.toolbarActions
+        tooltip: action.tooltip,
+        submenuActions: action.toolbarActions?.length ? action.toolbarActions : undefined
     };
 }
+function resolveConfigProperty(model, group, languageModelsService) {
+    const schema = model.metadata.configurationSchema;
+    if (!schema?.properties) {
+        return undefined;
+    }
+    const currentConfig = languageModelsService.getModelConfiguration(model.identifier) ?? {};
+    for (const [key, propSchema] of Object.entries(schema.properties)) {
+        if (propSchema.group !== group) {
+            continue;
+        }
+        if (!propSchema.enum || propSchema.enum.length < 2) {
+            continue;
+        }
+        const value = currentConfig[key] ?? propSchema.default;
+        return {
+            key,
+            value,
+            schema: propSchema
+        };
+    }
+    return undefined;
+}
+function getPriceCategoryIndicator(priceCategory) {
+    let filled;
+    switch (priceCategory) {
+    case "low":
+        filled = 1;
+        break;
+    case "medium":
+        filled = 2;
+        break;
+    case "high":
+        filled = 3;
+        break;
+    case "very_high":
+        filled = 4;
+        break;
+    default:
+        return undefined;
+    }
+    const total = 4;
+    return "$(circle-filled)".repeat(filled) + "$(circle)".repeat(total - filled);
+}
 function getModelConfigurationDescription(model, languageModelsService) {
     const schema = model.metadata.configurationSchema;
     if (!schema?.properties) {
@@ -103,34 +194,60 @@ function getModelConfigurationDescription(model, languageModelsService) {
         if (value === undefined) {
             continue;
         }
-        const enumItemLabels = propSchema.enumItemLabels;
         const enumIndex = propSchema.enum?.indexOf(value) ?? -1;
-        const label = enumItemLabels?.[enumIndex] ?? String(value);
+        const label = propSchema.enumItemLabels?.[enumIndex] ?? String(value);
         parts.push(label);
     }
     return parts.length > 0 ? parts.join(", ") : undefined;
 }
-function createModelAction(model, selectedModelId, onSelect, languageModelsService, section) {
-    const toolbarActions = languageModelsService.getModelConfigurationActions(model.identifier);
-    const configDescription = getModelConfigurationDescription(model, languageModelsService);
-    const baseDescription = model.metadata.multiplier ?? model.metadata.detail;
-    const description = configDescription && baseDescription ? `${configDescription} · ${baseDescription}` : configDescription ?? baseDescription;
-    return {
+function createModelAction(
+    model,
+    selectedModelId,
+    onSelect,
+    languageModelsService,
+    section,
+    suppressVendorInDetail,
+    isUBB
+) {
+    const pricingForDescription = isMultiplierPricing(model) ? model.metadata.pricing : undefined;
+    const priceCategoryIndicator = isUBB ? getPriceCategoryIndicator(model.metadata.priceCategory) : undefined;
+    const configDescription = !isUBB ? getModelConfigurationDescription(model, languageModelsService) : undefined;
+    const detail = suppressVendorInDetail ? undefined : model.metadata.detail;
+    const textParts = [configDescription, detail, pricingForDescription].filter(Boolean);
+    const textDescription = textParts.length > 0 ? textParts.join(" · ") : undefined;
+    let descriptionOverride;
+    if (priceCategoryIndicator) {
+        const md = ( new MarkdownString("", {
+            isTrusted: false,
+            supportThemeIcons: true
+        }));
+        if (textDescription) {
+            md.appendText(textDescription + " · ");
+        }
+        md.appendMarkdown(priceCategoryIndicator);
+        descriptionOverride = md;
+    }
+    const toolbarActions = !isUBB ? languageModelsService.getModelConfigurationActions(model.identifier) : undefined;
+    const action = {
         id: model.identifier,
         enabled: true,
         icon: model.metadata.statusIcon,
         checked: model.identifier === selectedModelId,
         class: undefined,
-        description,
+        description: priceCategoryIndicator ? undefined : textDescription,
         tooltip: model.metadata.name,
         label: model.metadata.name,
         section,
         toolbarActions: toolbarActions && toolbarActions.length > 0 ? toolbarActions : undefined,
         run: () => onSelect(model)
     };
+    return {
+        action,
+        descriptionOverride
+    };
 }
 function shouldShowManageModelsAction(chatEntitlementService) {
-    return chatEntitlementService.entitlement === ChatEntitlement.Free || chatEntitlementService.entitlement === ChatEntitlement.EDU || chatEntitlementService.entitlement === ChatEntitlement.Pro || chatEntitlementService.entitlement === ChatEntitlement.ProPlus || chatEntitlementService.entitlement === ChatEntitlement.Business || chatEntitlementService.entitlement === ChatEntitlement.Enterprise || chatEntitlementService.isInternal;
+    return chatEntitlementService.entitlement === ChatEntitlement.Free || chatEntitlementService.entitlement === ChatEntitlement.EDU || chatEntitlementService.entitlement === ChatEntitlement.Pro || chatEntitlementService.entitlement === ChatEntitlement.ProPlus || chatEntitlementService.entitlement === ChatEntitlement.Max || chatEntitlementService.entitlement === ChatEntitlement.Business || chatEntitlementService.entitlement === ChatEntitlement.Enterprise || chatEntitlementService.isInternal;
 }
 function createManageModelsAction(commandService) {
     return {
@@ -138,8 +255,8 @@ function createManageModelsAction(commandService) {
         enabled: true,
         checked: false,
         class: ThemeIcon.asClassName(Codicon.gear),
-        tooltip: ( localize(7171, "Manage Language Models")),
-        label: ( localize(7172, "Manage Models...")),
+        tooltip: ( localize(7460, "Manage Language Models")),
+        label: ( localize(7461, "Manage Models...")),
         run: () => {
             commandService.executeCommand(MANAGE_CHAT_COMMAND_ID);
         }
@@ -159,7 +276,9 @@ function buildModelPickerItems(
     chatEntitlementService,
     showUnavailableFeatured,
     showFeatured,
-    languageModelsService
+    languageModelsService,
+    openerService,
+    isUBB
 ) {
     const items = [];
     if (models.length === 0) {
@@ -168,13 +287,14 @@ function buildModelPickerItems(
             enabled: true,
             checked: true,
             class: undefined,
-            tooltip: ( localize(7173, "Auto")),
-            label: ( localize(7173, "Auto")),
+            tooltip: ( localize(7462, "Auto")),
+            label: ( localize(7462, "Auto")),
             run: () => {}
         }));
     }
     if (useGroupedModelPicker) {
         let otherModels = [];
+        const modelToGroup = languageModelsService ? buildModelToProviderGroupMap(languageModelsService) : ( new Map());
         if (models.length) {
             const allModelsMap = ( new Map());
             const modelsByMetadataId = ( new Map());
@@ -200,13 +320,24 @@ function buildModelPickerItems(
                 }
                 return "admin";
             };
-            const autoModel = models.find(m => m.metadata.id === "auto" && m.metadata.vendor === "copilot");
+            const autoModel = models.find(m => isAutoModel(m));
             if (autoModel) {
                 markPlaced(autoModel.identifier, autoModel.metadata.id);
-                items.push(createModelItem(
-                    createModelAction(autoModel, selectedModelId, onSelect, languageModelsService),
-                    autoModel
-                ));
+                const {
+                    action: autoAction,
+                    descriptionOverride: autoDesc
+                } = createModelAction(
+                    autoModel,
+                    selectedModelId,
+                    onSelect,
+                    languageModelsService,
+                    undefined,
+                    undefined,
+                    isUBB
+                );
+                items.push(
+                    createModelItem(autoAction, autoModel, autoDesc, openerService, undefined, isUBB)
+                );
             }
             const promotedItems = [];
             const tryPlaceModel = id => {
@@ -301,88 +432,155 @@ function buildModelPickerItems(
                     const bName = b.kind === "available" ? b.model.metadata.name : b.entry.label;
                     return aName.localeCompare(bName);
                 });
+                const allGroupKeys = ( new Set(( models.map(m => {
+                    const info = getProviderGroupForModel(m, modelToGroup, languageModelsService);
+                    return getProviderGroupKey(info.vendor, info.groupName);
+                }))));
+                const showPromotedGroupLabel = allGroupKeys.size > 1;
                 for (const item of promotedItems) {
                     if (item.kind === "available") {
-                        items.push(createModelItem(
-                            createModelAction(item.model, selectedModelId, onSelect, languageModelsService),
-                            item.model
-                        ));
-                    } else {
+                        const groupLabel = showPromotedGroupLabel ? getProviderGroupForModel(item.model, modelToGroup, languageModelsService).groupName : undefined;
+                        const {
+                            action: promotedAction,
+                            descriptionOverride: promotedDesc
+                        } = createModelAction(
+                            item.model,
+                            selectedModelId,
+                            onSelect,
+                            languageModelsService,
+                            undefined,
+                            showPromotedGroupLabel,
+                            isUBB
+                        );
                         items.push(
-                            createUnavailableModelItem(item.id, item.entry, item.reason, manageSettingsUrl, updateStateType)
+                            createModelItem(promotedAction, item.model, promotedDesc, openerService, groupLabel, isUBB)
                         );
+                    } else {
+                        items.push(createUnavailableModelItem(
+                            item.id,
+                            item.entry,
+                            item.reason,
+                            manageSettingsUrl,
+                            updateStateType,
+                            chatEntitlementService
+                        ));
                     }
                 }
             }
-            otherModels = models.filter(m => !( placed.has(m.identifier)) && !( placed.has(m.metadata.id))).sort((a, b) => {
-                const aEntry = controlModels[a.metadata.id] ?? controlModels[a.identifier];
-                const bEntry = controlModels[b.metadata.id] ?? controlModels[b.identifier];
-                const aAvail = aEntry?.minVSCodeVersion && !isVersionAtLeast(currentVSCodeVersion, aEntry.minVSCodeVersion) ? 1 : 0;
-                const bAvail = bEntry?.minVSCodeVersion && !isVersionAtLeast(currentVSCodeVersion, bEntry.minVSCodeVersion) ? 1 : 0;
-                if (aAvail !== bAvail) {
-                    return aAvail - bAvail;
-                }
-                const aCopilot = a.metadata.vendor === "copilot" ? 0 : 1;
-                const bCopilot = b.metadata.vendor === "copilot" ? 0 : 1;
-                if (aCopilot !== bCopilot) {
-                    return aCopilot - bCopilot;
-                }
-                const vendorCmp = a.metadata.vendor.localeCompare(b.metadata.vendor);
-                return vendorCmp !== 0 ? vendorCmp : a.metadata.name.localeCompare(b.metadata.name);
-            });
+            otherModels = models.filter(m => !( placed.has(m.identifier)) && !( placed.has(m.metadata.id)));
             if (otherModels.length > 0) {
                 if (items.length > 0) {
                     items.push({
                         kind: ActionListItemKind.Separator
                     });
                 }
+                const otherModelsToolbar = manageModelsAction ? [toAction({
+                    id: manageModelsAction.id,
+                    label: manageModelsAction.tooltip ?? manageModelsAction.label,
+                    class: ThemeIcon.asClassName(Codicon.gear),
+                    run: () => manageModelsAction.run()
+                })] : undefined;
                 items.push({
                     item: {
                         id: "otherModels",
                         enabled: true,
                         checked: false,
                         class: undefined,
-                        tooltip: ( localize(7174, "Other Models")),
-                        label: ( localize(7174, "Other Models")),
+                        tooltip: ( localize(7463, "Other Models")),
+                        label: ( localize(7463, "Other Models")),
                         run: () => {}
                     },
                     kind: ActionListItemKind.Action,
-                    label: ( localize(7174, "Other Models")),
+                    label: ( localize(7463, "Other Models")),
                     group: {
                         title: "",
                         icon: Codicon.chevronDown
                     },
                     hideIcon: false,
                     section: ModelPickerSection.Other,
-                    isSectionToggle: true
+                    isSectionToggle: true,
+                    toolbarActions: otherModelsToolbar,
+                    className: "chat-model-picker-section-toggle"
                 });
+                const providerGroups = ( new Map());
                 for (const model of otherModels) {
-                    const entry = controlModels[model.metadata.id] ?? controlModels[model.identifier];
-                    if (entry?.minVSCodeVersion && !isVersionAtLeast(currentVSCodeVersion, entry.minVSCodeVersion)) {
-                        items.push(createUnavailableModelItem(
-                            model.metadata.id,
-                            entry,
-                            "update",
-                            manageSettingsUrl,
-                            updateStateType,
-                            ModelPickerSection.Other
-                        ));
-                    } else {
-                        items.push(createModelItem(createModelAction(
-                            model,
-                            selectedModelId,
-                            onSelect,
-                            languageModelsService,
-                            ModelPickerSection.Other
-                        ), model));
+                    const info = getProviderGroupForModel(model, modelToGroup, languageModelsService);
+                    const key = getProviderGroupKey(info.vendor, info.groupName);
+                    let bucket = providerGroups.get(key);
+                    if (!bucket) {
+                        bucket = {
+                            vendor: info.vendor,
+                            groupName: info.groupName,
+                            models: []
+                        };
+                        providerGroups.set(key, bucket);
+                    }
+                    bucket.models.push(model);
+                }
+                const sortedBuckets = [...( providerGroups.values())].sort((a, b) => {
+                    if (a.vendor === "copilot" && b.vendor !== "copilot") {
+                        return -1;
+                    }
+                    if (b.vendor === "copilot" && a.vendor !== "copilot") {
+                        return 1;
+                    }
+                    return a.groupName.localeCompare(b.groupName);
+                });
+                const showGroupHeaders = sortedBuckets.length > 1;
+                for (const bucket of sortedBuckets) {
+                    if (showGroupHeaders) {
+                        items.push({
+                            kind: ActionListItemKind.Separator,
+                            label: bucket.groupName,
+                            section: ModelPickerSection.Other
+                        });
+                    }
+                    const sortedBucketModels = [...bucket.models].sort((a, b) => {
+                        const aEntry = controlModels[a.metadata.id] ?? controlModels[a.identifier];
+                        const bEntry = controlModels[b.metadata.id] ?? controlModels[b.identifier];
+                        const aAvail = aEntry?.minVSCodeVersion && !isVersionAtLeast(currentVSCodeVersion, aEntry.minVSCodeVersion) ? 1 : 0;
+                        const bAvail = bEntry?.minVSCodeVersion && !isVersionAtLeast(currentVSCodeVersion, bEntry.minVSCodeVersion) ? 1 : 0;
+                        if (aAvail !== bAvail) {
+                            return aAvail - bAvail;
+                        }
+                        return a.metadata.name.localeCompare(b.metadata.name);
+                    });
+                    for (const model of sortedBucketModels) {
+                        const entry = controlModels[model.metadata.id] ?? controlModels[model.identifier];
+                        if (entry?.minVSCodeVersion && !isVersionAtLeast(currentVSCodeVersion, entry.minVSCodeVersion)) {
+                            items.push(createUnavailableModelItem(
+                                model.metadata.id,
+                                entry,
+                                "update",
+                                manageSettingsUrl,
+                                updateStateType,
+                                chatEntitlementService,
+                                ModelPickerSection.Other
+                            ));
+                        } else {
+                            const {
+                                action: bucketAction,
+                                descriptionOverride: bucketDesc
+                            } = createModelAction(
+                                model,
+                                selectedModelId,
+                                onSelect,
+                                languageModelsService,
+                                ModelPickerSection.Other,
+                                showGroupHeaders,
+                                isUBB
+                            );
+                            items.push(
+                                createModelItem(bucketAction, model, bucketDesc, openerService, undefined, isUBB)
+                            );
+                        }
                     }
                 }
             }
         }
-        if (manageModelsAction) {
+        if (manageModelsAction && !otherModels.length) {
             items.push({
-                kind: ActionListItemKind.Separator,
-                section: otherModels.length ? ModelPickerSection.Other : undefined
+                kind: ActionListItemKind.Separator
             });
             items.push({
                 item: manageModelsAction,
@@ -393,33 +591,61 @@ function buildModelPickerItems(
                     icon: Codicon.blank
                 },
                 hideIcon: false,
-                section: otherModels.length ? ModelPickerSection.Other : undefined,
                 showAlways: true
             });
         }
     } else {
-        const autoModel = models.find(m => m.metadata.id === "auto" && m.metadata.vendor === "copilot");
+        const autoModel = models.find(m => isAutoModel(m));
         if (autoModel) {
-            items.push(createModelItem(
-                createModelAction(autoModel, selectedModelId, onSelect, languageModelsService),
-                autoModel
-            ));
+            const {
+                action: flatAutoAction,
+                descriptionOverride: flatAutoDesc
+            } = createModelAction(
+                autoModel,
+                selectedModelId,
+                onSelect,
+                languageModelsService,
+                undefined,
+                undefined,
+                isUBB
+            );
+            items.push(
+                createModelItem(flatAutoAction, autoModel, flatAutoDesc, openerService, undefined, isUBB)
+            );
         }
         const sortedModels = models.filter(m => m !== autoModel).sort((a, b) => {
             const vendorCmp = a.metadata.vendor.localeCompare(b.metadata.vendor);
             return vendorCmp !== 0 ? vendorCmp : a.metadata.name.localeCompare(b.metadata.name);
         });
         for (const model of sortedModels) {
-            items.push(createModelItem(
-                createModelAction(model, selectedModelId, onSelect, languageModelsService),
-                model
-            ));
+            const {
+                action: flatAction,
+                descriptionOverride: flatDesc
+            } = createModelAction(
+                model,
+                selectedModelId,
+                onSelect,
+                languageModelsService,
+                undefined,
+                undefined,
+                isUBB
+            );
+            items.push(
+                createModelItem(flatAction, model, flatDesc, openerService, undefined, isUBB)
+            );
         }
     }
     return items;
 }
 function getModelPickerAccessibilityProvider() {
     return {
+        getAriaLabel(element) {
+            if (element.kind !== ActionListItemKind.Action) {
+                return null;
+            }
+            const description = typeof element.description === "string" ? element.description : element.description?.value;
+            return [element.label, element.badge, description].filter(part => !!part).join(", ");
+        },
         isChecked(element) {
             if (element.isSectionToggle) {
                 return undefined;
@@ -442,18 +668,26 @@ function getModelPickerAccessibilityProvider() {
         getWidgetRole: () => "menu"
     };
 }
-function createUnavailableModelItem(id, entry, reason, manageSettingsUrl, updateStateType, section) {
+function createUnavailableModelItem(
+    id,
+    entry,
+    reason,
+    manageSettingsUrl,
+    updateStateType,
+    chatEntitlementService,
+    section
+) {
     let description;
     if (reason === "upgrade") {
-        description = ( new MarkdownString(( localize(7175, "[Upgrade](command:workbench.action.chat.upgradePlan \" \")")), {
+        description = ( new MarkdownString(( localize(7464, "[Upgrade](command:workbench.action.chat.upgradePlan \" \")")), {
             isTrusted: true
         }));
     } else if (reason === "update") {
-        description = ( localize(7176, "Update VS Code"));
+        description = ( localize(7465, "Update VS Code"));
     } else {
-        description = manageSettingsUrl ? ( new MarkdownString(( localize(7177, "[Contact your admin]({0})", manageSettingsUrl)), {
+        description = manageSettingsUrl ? ( new MarkdownString(( localize(7466, "[Contact your admin]({0})", manageSettingsUrl)), {
             isTrusted: true
-        })) : ( localize(7178, "Contact your admin"));
+        })) : ( localize(7467, "Contact your admin"));
     }
     let hoverContent;
     if (reason === "upgrade") {
@@ -461,10 +695,17 @@ function createUnavailableModelItem(id, entry, reason, manageSettingsUrl, update
             isTrusted: true,
             supportThemeIcons: true
         }));
-        hoverContent.appendMarkdown(( localize(
-            7179,
-            "[Upgrade to GitHub Copilot Pro](command:workbench.action.chat.upgradePlan \" \") to use the best models."
-        )));
+        if (chatEntitlementService.entitlement === ChatEntitlement.Pro) {
+            hoverContent.appendMarkdown(( localize(
+                7468,
+                "[Upgrade to GitHub Copilot Pro+](command:workbench.action.chat.upgradePlan \" \") to use the best models."
+            )));
+        } else {
+            hoverContent.appendMarkdown(( localize(
+                7469,
+                "[Upgrade to GitHub Copilot Pro](command:workbench.action.chat.upgradePlan \" \") to use the best models."
+            )));
+        }
     } else if (reason === "update") {
         hoverContent = getUpdateHoverContent(updateStateType);
     } else {
@@ -473,7 +714,7 @@ function createUnavailableModelItem(id, entry, reason, manageSettingsUrl, update
             supportThemeIcons: true
         }));
         hoverContent.appendMarkdown(( localize(
-            7180,
+            7470,
             "This model is not available. Contact your administrator to enable it."
         )));
     }
@@ -511,6 +752,9 @@ let ModelPickerWidget = class ModelPickerWidget extends Disposable {
     get domNode() {
         return this._domNode;
     }
+    get nameButton() {
+        return this._nameButton;
+    }
     constructor(
         _delegate,
         _actionWidgetService,
@@ -539,6 +783,14 @@ let ModelPickerWidget = class ModelPickerWidget extends Disposable {
         this._register(this._languageModelsService.onDidChangeLanguageModels(() => {
             this._renderLabel();
         }));
+        let lastIsUBB = !!this._entitlementService.quotas.usageBasedBilling;
+        this._register(this._entitlementService.onDidChangeQuotaRemaining(() => {
+            const currentIsUBB = !!this._entitlementService.quotas.usageBasedBilling;
+            if (currentIsUBB !== lastIsUBB) {
+                lastIsUBB = currentIsUBB;
+                this._renderLabel();
+            }
+        }));
     }
     setHideChevrons(hideChevrons) {
         this._hideChevrons = hideChevrons;
@@ -565,29 +817,54 @@ let ModelPickerWidget = class ModelPickerWidget extends Disposable {
         this._updateBadge();
     }
     render(container) {
-        this._domNode = append(container, $("a.action-label"));
-        this._domNode.tabIndex = 0;
-        this._domNode.setAttribute("role", "button");
-        this._domNode.setAttribute("aria-haspopup", "true");
-        this._domNode.setAttribute("aria-expanded", "false");
+        this._domNode = append(container, $("div.action-label.model-picker-split"));
+        this._domNode.setAttribute("role", "group");
         if (this._hideChevrons?.get()) {
             this._domNode.classList.toggle("hide-chevrons", true);
         }
-        this._badgeIcon = append(this._domNode, $("span.model-picker-badge"));
+        this._nameButton = append(this._domNode, $("a.model-picker-section.model-picker-name"));
+        this._nameButton.tabIndex = 0;
+        this._nameButton.setAttribute("role", "button");
+        this._nameButton.setAttribute("aria-haspopup", "true");
+        this._nameButton.setAttribute("aria-expanded", "false");
+        this._effortButton = append(this._domNode, $("a.model-picker-section.model-picker-effort"));
+        this._effortButton.tabIndex = 0;
+        this._effortButton.setAttribute("role", "button");
+        this._effortButton.setAttribute("aria-haspopup", "true");
+        this._effortButton.setAttribute("aria-expanded", "false");
+        this._effortButton.style.display = "none";
+        this._tokensButton = append(this._domNode, $("a.model-picker-section.model-picker-tokens"));
+        this._tokensButton.tabIndex = 0;
+        this._tokensButton.setAttribute("role", "button");
+        this._tokensButton.setAttribute("aria-haspopup", "true");
+        this._tokensButton.setAttribute("aria-expanded", "false");
+        this._tokensButton.style.display = "none";
+        this._badgeIcon = $("span.model-picker-badge");
         this._updateBadge();
         this._renderLabel();
-        this._register(addDisposableListener(this._domNode, EventType.MOUSE_DOWN, e => {
+        this._registerButtonAction(this._nameButton, () => this.show());
+        this._registerButtonAction(this._effortButton, () => this._showEffortPicker());
+        this._registerButtonAction(this._tokensButton, () => this._showTokensPicker());
+        this._register(
+            getBaseLayerHoverDelegate().setupManagedHover(getDefaultHoverDelegate("mouse"), this._effortButton, ( localize(7471, "Set Thinking Effort")))
+        );
+        this._register(
+            getBaseLayerHoverDelegate().setupManagedHover(getDefaultHoverDelegate("mouse"), this._tokensButton, ( localize(7472, "Set Context Size")))
+        );
+    }
+    _registerButtonAction(element, action) {
+        this._register(addDisposableGenericMouseDownListener(element, e => {
             if (e.button !== 0) {
                 return;
             }
             EventHelper.stop(e, true);
-            this.show();
+            action();
         }));
-        this._register(addDisposableListener(this._domNode, EventType.KEY_DOWN, e => {
+        this._register(addDisposableListener(element, EventType.KEY_DOWN, e => {
             const event = ( new StandardKeyboardEvent(e));
             if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
                 EventHelper.stop(e, true);
-                this.show();
+                action();
             }
         }));
     }
@@ -607,8 +884,8 @@ let ModelPickerWidget = class ModelPickerWidget extends Disposable {
             this._onDidChangeSelection.fire(model);
         };
         const models = this._delegate.getModels();
-        const showFilter = models.length >= 10;
         const isPro = isProUser(this._entitlementService.entitlement);
+        const isUBB = !!this._entitlementService.quotas.usageBasedBilling;
         const manifest = this._languageModelsService.getModelsControlManifest();
         const controlModelsForTier = isPro ? manifest.paid : manifest.free;
         const canShowManageModelsAction = this._delegate.showManageModelsAction() && shouldShowManageModelsAction(this._entitlementService);
@@ -629,16 +906,20 @@ let ModelPickerWidget = class ModelPickerWidget extends Disposable {
             onSelect,
             manageSettingsUrl,
             this._delegate.useGroupedModelPicker(),
-            !showFilter ? manageModelsAction : undefined,
+            isUBB ? manageModelsAction : undefined,
             this._entitlementService,
             this._delegate.showUnavailableFeatured(),
             this._delegate.showFeatured(),
-            this._languageModelsService
+            this._languageModelsService,
+            this._openerService,
+            isUBB
         );
+        const hasPriceCategories = ( models.some(m => !!m.metadata.priceCategory));
         const listOptions = {
-            showFilter,
-            filterPlaceholder: ( localize(7181, "Search models")),
-            filterActions: showFilter && manageModelsAction ? [manageModelsAction] : undefined,
+            showFilter: true,
+            filterPlaceholder: ( localize(7473, "Search models")),
+            filterActions: !isUBB && manageModelsAction ? [manageModelsAction] : undefined,
+            secondaryHeading: isUBB && hasPriceCategories ? ( localize(7474, "Cost")) : undefined,
             focusFilterOnOpen: true,
             collapsedByDefault: ( new Set([ModelPickerSection.Other])),
             onDidToggleSection: (section, collapsed) => {
@@ -665,13 +946,13 @@ let ModelPickerWidget = class ModelPickerWidget extends Disposable {
                 action.run();
             },
             onHide: () => {
-                this._domNode?.setAttribute("aria-expanded", "false");
+                this._nameButton?.setAttribute("aria-expanded", "false");
                 if (isHTMLElement(previouslyFocusedElement)) {
                     previouslyFocusedElement.focus();
                 }
             }
         };
-        this._domNode?.setAttribute("aria-expanded", "true");
+        this._nameButton?.setAttribute("aria-expanded", "true");
         this._actionWidgetService.show(
             "ChatModelPicker",
             false,
@@ -702,60 +983,333 @@ let ModelPickerWidget = class ModelPickerWidget extends Disposable {
         }
     }
     _renderLabel() {
-        if (!this._domNode) {
+        if (!this._domNode || !this._nameButton) {
             return;
         }
         const {
             name,
             statusIcon
         } = this._selectedModel?.metadata || {};
-        const domChildren = [];
+        const nameChildren = [];
         if (statusIcon) {
-            const iconElement = renderIcon(statusIcon);
-            domChildren.push(iconElement);
+            nameChildren.push(renderIcon(statusIcon));
         }
-        const modelLabel = name ?? ( localize(7173, "Auto"));
-        const configDescription = this._selectedModel ? getModelConfigurationDescription(this._selectedModel, this._languageModelsService) : undefined;
+        const modelLabel = name ?? ( localize(7462, "Auto"));
+        const isUBB = !!this._entitlementService.quotas.usageBasedBilling;
+        const configDescription = !isUBB && this._selectedModel ? getModelConfigurationDescription(this._selectedModel, this._languageModelsService) : undefined;
         const fullLabel = configDescription ? `${modelLabel} · ${configDescription}` : modelLabel;
-        domChildren.push($("span.chat-input-picker-label", undefined, fullLabel));
+        nameChildren.push($("span.chat-input-picker-label", undefined, fullLabel));
         if (this._badgeIcon) {
-            domChildren.push(this._badgeIcon);
+            nameChildren.push(this._badgeIcon);
+        }
+        reset(this._nameButton, ...nameChildren);
+        const effortConfig = isUBB ? this._getConfigProperty("navigation") : undefined;
+        if (effortConfig && this._effortButton) {
+            const enumIndex = effortConfig.schema.enum?.indexOf(effortConfig.value) ?? -1;
+            const effortLabel = enumIndex >= 0 && effortConfig.schema.enumItemLabels?.[enumIndex] ? effortConfig.schema.enumItemLabels[enumIndex] : String(effortConfig.value);
+            reset(
+                this._effortButton,
+                $("span.chat-input-picker-label", undefined, effortLabel)
+            );
+            this._effortButton.style.display = "";
+            this._effortButton.ariaLabel = ( localize(7475, "Thinking Effort: {0}", effortLabel));
+        } else if (this._effortButton) {
+            this._effortButton.style.display = "none";
+        }
+        const tokensConfig = isUBB ? this._getConfigProperty("tokens") : undefined;
+        if (tokensConfig && this._tokensButton) {
+            const idx = tokensConfig.schema.enum?.indexOf(tokensConfig.value) ?? -1;
+            const tokensLabel = idx >= 0 && tokensConfig.schema.enumItemLabels?.[idx] ? tokensConfig.schema.enumItemLabels[idx] : formatTokenCount(Number(tokensConfig.value));
+            reset(
+                this._tokensButton,
+                $("span.chat-input-picker-label", undefined, tokensLabel)
+            );
+            this._tokensButton.style.display = "";
+            this._tokensButton.ariaLabel = ( localize(7476, "Context Size: {0}", tokensLabel));
+        } else if (this._tokensButton) {
+            this._tokensButton.style.display = "none";
+        }
+        this._domNode.ariaLabel = ( localize(7477, "Pick Model, {0}", fullLabel));
+    }
+    _getConfigProperty(group) {
+        if (!this._selectedModel) {
+            return undefined;
         }
-        domChildren.push(...renderLabelWithIcons(`$(chevron-down)`));
-        reset(this._domNode, ...domChildren);
-        this._domNode.ariaLabel = ( localize(7182, "Pick Model, {0}", fullLabel));
+        return resolveConfigProperty(this._selectedModel, group, this._languageModelsService);
+    }
+    _showEffortPicker() {
+        if (this._domNode?.classList.contains("disabled")) {
+            return;
+        }
+        const config = this._getConfigProperty("navigation");
+        if (!config || !this._effortButton || !this._selectedModel) {
+            return;
+        }
+        const modelIdentifier = this._selectedModel.identifier;
+        const enumValues = config.schema.enum ?? [];
+        const enumItemLabels = config.schema.enumItemLabels;
+        const items = [{
+            kind: ActionListItemKind.Header,
+            label: ( localize(7478, "Thinking Effort"))
+        }];
+        for (let index = 0; index < enumValues.length; index++) {
+            const value = enumValues[index];
+            const label = enumItemLabels?.[index] ?? String(value);
+            const isDefault = value === config.schema.default;
+            const displayLabel = isDefault ? ( localize(7479, "{0} (default)", label)) : label;
+            items.push({
+                item: {
+                    id: `effort.${value}`,
+                    enabled: true,
+                    checked: config.value === value,
+                    class: undefined,
+                    tooltip: config.schema.enumDescriptions?.[index] ?? "",
+                    label: displayLabel,
+                    run: () => {
+                        this._languageModelsService.setModelConfiguration(modelIdentifier, {
+                            [config.key]: value
+                        });
+                    }
+                },
+                kind: ActionListItemKind.Action,
+                label: displayLabel,
+                description: config.schema.enumDescriptions?.[index],
+                group: {
+                    title: "",
+                    icon: ThemeIcon.fromId(config.value === value ? Codicon.check.id : Codicon.blank.id)
+                },
+                hideIcon: false
+            });
+        }
+        const previouslyFocusedElement = getActiveElement();
+        const delegate = {
+            onSelect: action => {
+                this._actionWidgetService.hide();
+                action.run();
+            },
+            onHide: () => {
+                this._effortButton?.setAttribute("aria-expanded", "false");
+                if (isHTMLElement(previouslyFocusedElement)) {
+                    previouslyFocusedElement.focus();
+                }
+            }
+        };
+        this._effortButton.setAttribute("aria-expanded", "true");
+        this._actionWidgetService.show(
+            "ChatModelEffortPicker",
+            false,
+            items,
+            delegate,
+            this._effortButton,
+            undefined,
+            [],
+            {
+                isChecked(element) {
+                    return element.kind === ActionListItemKind.Action ? !!element?.item?.checked : undefined;
+                },
+                getRole: () => "menuitemradio",
+                getWidgetRole: () => "menu"
+            },
+            {
+                footerText: ( localize(7480, "Higher levels of thinking may increase costs"))
+            }
+        );
+    }
+    _showTokensPicker() {
+        if (this._domNode?.classList.contains("disabled")) {
+            return;
+        }
+        const config = this._getConfigProperty("tokens");
+        if (!config || !this._tokensButton || !this._selectedModel) {
+            return;
+        }
+        const modelIdentifier = this._selectedModel.identifier;
+        const enumValues = config.schema.enum ?? [];
+        const enumItemLabels = config.schema.enumItemLabels;
+        const items = [{
+            kind: ActionListItemKind.Header,
+            label: ( localize(7481, "Context Size"))
+        }];
+        for (let index = 0; index < enumValues.length; index++) {
+            const value = enumValues[index];
+            const label = enumItemLabels?.[index] ?? formatTokenCount(Number(value));
+            const isDefault = value === config.schema.default;
+            const displayLabel = isDefault ? ( localize(7482, "{0} (default)", label)) : label;
+            const description = config.schema.enumDescriptions?.[index];
+            items.push({
+                item: {
+                    id: `tokens.${value}`,
+                    enabled: true,
+                    checked: config.value === value,
+                    class: undefined,
+                    tooltip: description ?? "",
+                    label: displayLabel,
+                    run: () => {
+                        this._languageModelsService.setModelConfiguration(modelIdentifier, {
+                            [config.key]: value
+                        });
+                    }
+                },
+                kind: ActionListItemKind.Action,
+                label: displayLabel,
+                description,
+                group: {
+                    title: "",
+                    icon: ThemeIcon.fromId(config.value === value ? Codicon.check.id : Codicon.blank.id)
+                },
+                hideIcon: false
+            });
+        }
+        const previouslyFocusedElement = getActiveElement();
+        const delegate = {
+            onSelect: action => {
+                this._actionWidgetService.hide();
+                action.run();
+            },
+            onHide: () => {
+                this._tokensButton?.setAttribute("aria-expanded", "false");
+                if (isHTMLElement(previouslyFocusedElement)) {
+                    previouslyFocusedElement.focus();
+                }
+            }
+        };
+        this._tokensButton.setAttribute("aria-expanded", "true");
+        this._actionWidgetService.show(
+            "ChatModelTokensPicker",
+            false,
+            items,
+            delegate,
+            this._tokensButton,
+            undefined,
+            [],
+            {
+                isChecked(element) {
+                    return element.kind === ActionListItemKind.Action ? !!element?.item?.checked : undefined;
+                },
+                getRole: () => "menuitemradio",
+                getWidgetRole: () => "menu"
+            },
+            {
+                footerText: ( localize(7483, "Larger size may increase cost in longer sessions"))
+            }
+        );
     }
 };
 ModelPickerWidget = ( __decorate([( __param(1, IActionWidgetService)), ( __param(2, ICommandService)), ( __param(3, IOpenerService)), ( __param(4, ITelemetryService)), ( __param(5, ILanguageModelsService)), ( __param(6, IProductService)), ( __param(7, IChatEntitlementService)), ( __param(8, IUpdateService)), ( __param(9, IUriIdentityService))], ModelPickerWidget));
-function getModelHoverContent(model) {
-    const isAuto = model.metadata.id === "auto" && model.metadata.vendor === "copilot";
-    const markdown = ( new MarkdownString("", {
-        isTrusted: true,
-        supportThemeIcons: true
-    }));
-    markdown.appendMarkdown(`**${model.metadata.name}**`);
+function getModelHoverContent(model, openerService, isUBB) {
+    const isAuto = isAutoModel(model);
+    const container = $(".chat-model-hover");
+    const disposables = ( new DisposableStore());
+    container.appendChild($(".chat-model-hover-name", undefined, model.metadata.name));
     if (model.metadata.tooltip) {
-        markdown.appendMarkdown(`\n\n`);
+        container.appendChild($(".chat-model-hover-separator"));
+        const descriptionContainer = $(".chat-model-hover-description");
+        const md = ( new MarkdownString("", {
+            isTrusted: true,
+            supportThemeIcons: true
+        }));
         if (model.metadata.statusIcon) {
-            markdown.appendMarkdown(`$(${model.metadata.statusIcon.id})&nbsp;`);
+            md.appendMarkdown(`$(${model.metadata.statusIcon.id})&nbsp;`);
+        }
+        md.appendMarkdown(model.metadata.tooltip);
+        const rendered = renderMarkdown(md, {
+            actionHandler: url => {
+                openerService.open(( URI.parse(url)), {
+                    allowCommands: true
+                });
+            }
+        });
+        disposables.add(rendered);
+        descriptionContainer.appendChild(rendered.element);
+        container.appendChild(descriptionContainer);
+    }
+    if (!isAuto && isUBB) {
+        const costLines = [];
+        if (model.metadata.inputCost !== undefined) {
+            costLines.push({
+                label: ( localize(7484, "Input")),
+                value: model.metadata.inputCost === 1 ? ( localize(7485, "{0} credit", model.metadata.inputCost)) : ( localize(7486, "{0} credits", model.metadata.inputCost))
+            });
+        }
+        if (model.metadata.cacheCost !== undefined) {
+            costLines.push({
+                label: ( localize(7487, "Cached input")),
+                value: model.metadata.cacheCost === 1 ? ( localize(7485, "{0} credit", model.metadata.cacheCost)) : ( localize(7486, "{0} credits", model.metadata.cacheCost))
+            });
+        }
+        if (model.metadata.outputCost !== undefined) {
+            costLines.push({
+                label: ( localize(7488, "Output")),
+                value: model.metadata.outputCost === 1 ? ( localize(7485, "{0} credit", model.metadata.outputCost)) : ( localize(7486, "{0} credits", model.metadata.outputCost))
+            });
+        }
+        if (costLines.length > 0) {
+            const costSection = $(".chat-model-hover-cost");
+            costSection.appendChild($(".chat-model-hover-cost-title", undefined, ( localize(7489, "Cost (per 1M tokens)"))));
+            for (const line of costLines) {
+                costSection.appendChild($(
+                    ".chat-model-hover-cost-line",
+                    undefined,
+                    $("span.chat-model-hover-cost-line-label", undefined, `${line.label}: `),
+                    $("span", undefined, line.value)
+                ));
+            }
+            container.appendChild(costSection);
+        } else if (model.metadata.pricing && !isMultiplierPricing(model)) {
+            const costSection = $(".chat-model-hover-cost");
+            costSection.appendChild($("span", undefined, ( localize(7490, "Cost: {0}", model.metadata.pricing))));
+            container.appendChild(costSection);
         }
-        markdown.appendMarkdown(`${model.metadata.tooltip}`);
     }
     if (!isAuto && (model.metadata.maxInputTokens || model.metadata.maxOutputTokens)) {
-        markdown.appendMarkdown(`\n\n`);
         const totalTokens = (model.metadata.maxInputTokens ?? 0) + (model.metadata.maxOutputTokens ?? 0);
-        markdown.appendMarkdown(`${( localize(7183, "Context Size"))}: `);
-        markdown.appendMarkdown(`${formatTokenCount(totalTokens)}`);
+        const contextSection = $(".chat-model-hover-context");
+        contextSection.appendChild($(".chat-model-hover-context-label", undefined, ( localize(7491, "Max context"))));
+        contextSection.appendChild($(
+            ".chat-model-hover-context-value",
+            undefined,
+            formatTokenCount(totalTokens)
+        ));
+        container.appendChild(contextSection);
+    }
+    if (!isAuto && isUBB && model.metadata.configurationSchema?.properties) {
+        const configurableLabels = [];
+        for (const [, propSchema] of Object.entries(model.metadata.configurationSchema.properties)) {
+            if (propSchema.enum && propSchema.enum.length >= 2) {
+                const label = propSchema.title ?? propSchema.description;
+                if (label) {
+                    configurableLabels.push(label);
+                }
+            }
+        }
+        if (configurableLabels.length > 0) {
+            container.appendChild($(".chat-model-hover-separator"));
+            const configRow = $(".chat-model-hover-configurable");
+            configRow.appendChild(
+                $("span.chat-model-hover-configurable-label", undefined, ( localize(7492, "Configurable:")))
+            );
+            for (const label of configurableLabels) {
+                configRow.appendChild($("span.chat-model-hover-configurable-tag", undefined, label));
+            }
+            container.appendChild(configRow);
+        }
     }
-    return markdown;
+    return container.children.length > 0 ? {
+        element: container,
+        disposable: disposables
+    } : undefined;
 }
 function formatTokenCount(count) {
-    if (count >= 1000000) {
-        return `${(count / 1000000).toFixed(1)}M`;
+    if (count > 900_000) {
+        const value = Math.ceil(count / 1_000_000);
+        return `${value}M`;
     } else if (count >= 1000) {
-        return `${(count / 1000).toFixed(0)}K`;
+        return `${Math.round(count / 1000)}K`;
     }
     return ( count.toString());
 }
+function isAutoModel(model) {
+    return model.metadata.id === "auto" && (model.metadata.vendor === "copilot" || model.metadata.vendor === "copilotcli");
+}
 
-export { ModelPickerWidget, buildModelPickerItems, getModelPickerAccessibilityProvider };
+export { ModelPickerWidget, buildModelPickerItems, formatTokenCount, getModelPickerAccessibilityProvider };