@codingame/monaco-vscode-chat-service-override 31.0.1 → 32.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/chatStatus/chatStatusDashboard.js

@@ -5,7 +5,8 @@ import { Gesture, EventType as EventType$1 } from '@codingame/monaco-vscode-api/
 import { ActionBar } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/actionbar/actionbar';
 import { renderLabelWithIcons } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/iconLabel/iconLabels';
 import { Button } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/button/button';
-import { Checkbox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/toggle/toggle';
+import { SelectBox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/selectBox/selectBox';
+import { Checkbox, TriStateCheckbox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/toggle/toggle';
 import { toAction } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
 import { cancelOnDispose } from '@codingame/monaco-vscode-api/vscode/vs/base/common/cancellation';
 import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
@@ -17,11 +18,13 @@ import { language } from '@codingame/monaco-vscode-api/vscode/vs/base/common/pla
 import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
 import { isObject } from '@codingame/monaco-vscode-api/vscode/vs/base/common/types';
 import { URI } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uri';
+import { stripIcons } from '@codingame/monaco-vscode-api/vscode/vs/base/common/iconLabels';
 import { IInlineCompletionsService } from '@codingame/monaco-vscode-api/vscode/vs/editor/browser/services/inlineCompletionsService.service';
 import { ILanguageService } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/languages/language.service';
 import { ITextResourceConfigurationService } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/services/textResourceConfiguration.service';
 import { ILanguageFeaturesService } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/services/languageFeatures.service';
-import { IQuickInputService } from '@codingame/monaco-vscode-api/vscode/vs/platform/quickinput/common/quickInput.service';
+import { StorageScope, StorageTarget } from '@codingame/monaco-vscode-api/vscode/vs/platform/storage/common/storage';
+import { IStorageService } from '@codingame/monaco-vscode-api/vscode/vs/platform/storage/common/storage.service';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
 import { ICommandService } from '@codingame/monaco-vscode-api/vscode/vs/platform/commands/common/commands.service';
 import { IConfigurationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/configuration/common/configuration.service';
@@ -31,73 +34,30 @@ import { IMarkdownRendererService } from '@codingame/monaco-vscode-api/vscode/vs
 import { Link } from '@codingame/monaco-vscode-api/vscode/vs/platform/opener/browser/link';
 import { IOpenerService } from '@codingame/monaco-vscode-api/vscode/vs/platform/opener/common/opener.service';
 import { ITelemetryService } from '@codingame/monaco-vscode-api/vscode/vs/platform/telemetry/common/telemetry.service';
-import { defaultButtonStyles, defaultCheckboxStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
+import { defaultButtonStyles, defaultSelectBoxStyles, defaultCheckboxStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
 import { DomWidget } from '../../../../../platform/domWidget/browser/domWidget.js';
 import { EditorResourceAccessor, SideBySideEditor } from '@codingame/monaco-vscode-api/vscode/vs/workbench/common/editor';
 import { getChatPlanName, ChatEntitlement } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/chat/common/chatEntitlementService';
 import { IChatEntitlementService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/chat/common/chatEntitlementService.service';
 import { IEditorService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/editor/common/editorService.service';
+import { IContextViewService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextview/browser/contextView.service';
 import { isNewUser } from './chatStatus.js';
 import { IChatStatusItemService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/chatStatus/chatStatusItemService.service';
 import product from '@codingame/monaco-vscode-api/vscode/vs/platform/product/common/product';
-import { registerColor, transparent } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colorUtils';
-import { contrastBorder } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/baseColors';
-import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/chartsColors';
-import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/editorColors';
-import { inputValidationInfoBorder, inputValidationWarningBorder, inputValidationErrorBorder } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/inputColors';
-import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/listColors';
-import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/menuColors';
-import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/minimapColors';
-import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/miscColors';
-import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/quickpickColors';
-import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/searchColors';
-import { Color } from '@codingame/monaco-vscode-api/vscode/vs/base/common/color';
 import { isCompletionsEnabled } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/services/completionsEnablement';
 
+var ChatStatusDashboard_1;
 const defaultChat = product.defaultChatAgent;
-const gaugeForeground = registerColor("gauge.foreground", {
-    dark: inputValidationInfoBorder,
-    light: inputValidationInfoBorder,
-    hcDark: contrastBorder,
-    hcLight: contrastBorder
-}, ( localize(6379, "Gauge foreground color.")));
-registerColor("gauge.background", {
-    dark: ( transparent(gaugeForeground, 0.3)),
-    light: ( transparent(gaugeForeground, 0.3)),
-    hcDark: Color.white,
-    hcLight: Color.white
-}, ( localize(6380, "Gauge background color.")));
-registerColor("gauge.border", {
-    dark: null,
-    light: null,
-    hcDark: contrastBorder,
-    hcLight: contrastBorder
-}, ( localize(6381, "Gauge border color.")));
-const gaugeWarningForeground = registerColor("gauge.warningForeground", {
-    dark: inputValidationWarningBorder,
-    light: inputValidationWarningBorder,
-    hcDark: contrastBorder,
-    hcLight: contrastBorder
-}, ( localize(6382, "Gauge warning foreground color.")));
-registerColor("gauge.warningBackground", {
-    dark: ( transparent(gaugeWarningForeground, 0.3)),
-    light: ( transparent(gaugeWarningForeground, 0.3)),
-    hcDark: Color.white,
-    hcLight: Color.white
-}, ( localize(6383, "Gauge warning background color.")));
-const gaugeErrorForeground = registerColor("gauge.errorForeground", {
-    dark: inputValidationErrorBorder,
-    light: inputValidationErrorBorder,
-    hcDark: contrastBorder,
-    hcLight: contrastBorder
-}, ( localize(6384, "Gauge error foreground color.")));
-registerColor("gauge.errorBackground", {
-    dark: ( transparent(gaugeErrorForeground, 0.3)),
-    light: ( transparent(gaugeErrorForeground, 0.3)),
-    hcDark: Color.white,
-    hcLight: Color.white
-}, ( localize(6385, "Gauge error background color.")));
 let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
+    static {
+        ChatStatusDashboard_1 = this;
+    }
+    static {
+        this.QUICK_SETTINGS_COLLAPSED_KEY = "chatStatusDashboard.quickSettingsCollapsed";
+    }
+    static {
+        this.CONTRIBUTED_COLLAPSED_KEY_PREFIX = "chatStatusDashboard.contributedCollapsed.";
+    }
     constructor(
         options,
         chatEntitlementService,
@@ -113,7 +73,8 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
         inlineCompletionsService,
         markdownRendererService,
         languageFeaturesService,
-        quickInputService
+        contextViewService,
+        storageService
     ) {
         super();
         this.options = options;
@@ -130,7 +91,8 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
         this.inlineCompletionsService = inlineCompletionsService;
         this.markdownRendererService = markdownRendererService;
         this.languageFeaturesService = languageFeaturesService;
-        this.quickInputService = quickInputService;
+        this.contextViewService = contextViewService;
+        this.storageService = storageService;
         this.element = $("div.chat-status-bar-entry-tooltip");
         this.dateFormatter = safeIntl.DateTimeFormat(language, {
             month: "short",
@@ -141,10 +103,10 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
             minute: "numeric"
         });
         this.quotaPercentageFormatter = safeIntl.NumberFormat(undefined, {
-            maximumFractionDigits: 1,
+            maximumFractionDigits: 0,
             minimumFractionDigits: 0
         });
-        this.quotaOverageFormatter = safeIntl.NumberFormat(undefined, {
+        this.quotaCreditsFormatter = safeIntl.NumberFormat(language, {
             maximumFractionDigits: 2,
             minimumFractionDigits: 0
         });
@@ -160,167 +122,84 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
         const hasQuotas = !!(chat || premiumChat);
         const isAnonymousWithSentiment = this.chatEntitlementService.anonymous && this.chatEntitlementService.sentiment.completed;
         const hasUsageSection = hasQuotas || isAnonymousWithSentiment;
-        const hasVisibleUsageContent = !!(chat && !chat.unlimited && chat.total > 0) || !!(premiumChat && !premiumChat.unlimited && premiumChat.total > 0) || !!(completions && !completions.unlimited && completions.total > 0) || isAnonymousWithSentiment;
-        const hasInlineSuggestionsSection = !this.options?.disableInlineSuggestionsSettings || !this.options?.disableModelSelection || !this.options?.disableProviderOptions || !this.options?.disableCompletionsSnooze;
+        const hasVisibleUsageContent = chat?.unlimited === false || premiumChat?.unlimited === false || completions?.unlimited === false || isAnonymousWithSentiment;
+        const contributedEntries = [...this.chatStatusItemService.getEntries()];
+        const hasQuickSettingsContent = !this.options?.disableInlineSuggestionsSettings || !this.options?.disableModelSelection || !this.options?.disableProviderOptions || !this.options?.disableCompletionsSnooze;
+        let headerAdditionalSpendButton;
         if (hasUsageSection) {
             const planName = getChatPlanName(this.chatEntitlementService.entitlement);
-            this.renderHeader(this.element, this._store, planName, toAction({
+            const headerHost = this.options?.titleHeaderContainer ?? this.element;
+            const header = this.renderHeader(headerHost, this._store, planName, toAction({
                 id: "workbench.action.manageCopilot",
-                label: ( localize(6386, "Manage Chat")),
-                tooltip: ( localize(6387, "Manage Chat")),
+                label: ( localize(6614, "Manage Copilot Settings")),
+                tooltip: ( localize(6615, "Manage Copilot Settings")),
                 class: ThemeIcon.asClassName(Codicon.settings),
                 run: () => this.runCommandAndClose(() => this.openerService.open(( URI.parse(defaultChat.manageSettingsUrl))))
             }));
-        }
-        const updatePromise = this.chatEntitlementService.update(token);
-        if (hasVisibleUsageContent && hasInlineSuggestionsSection) {
-            const usageContent = $("div.tab-content.active");
-            usageContent.setAttribute("role", "tabpanel");
-            usageContent.id = "chat-status-usage-panel";
-            const inlineSuggestionsContent = $("div.tab-content");
-            inlineSuggestionsContent.setAttribute("role", "tabpanel");
-            inlineSuggestionsContent.id = "chat-status-inline-suggestions-panel";
-            inlineSuggestionsContent.inert = true;
-            const tabBar = this.element.appendChild($("div.tab-bar"));
-            tabBar.setAttribute("role", "tablist");
-            const usageTab = tabBar.appendChild($("button.tab.active"));
-            usageTab.textContent = ( localize(6388, "Usage"));
-            usageTab.setAttribute("role", "tab");
-            usageTab.setAttribute("aria-selected", "true");
-            usageTab.setAttribute("aria-controls", usageContent.id);
-            usageTab.setAttribute("tabindex", "0");
-            const quickSettingsTab = tabBar.appendChild($("button.tab"));
-            quickSettingsTab.textContent = ( localize(6389, "Quick Settings"));
-            quickSettingsTab.setAttribute("role", "tab");
-            quickSettingsTab.setAttribute("aria-selected", "false");
-            quickSettingsTab.setAttribute("aria-controls", inlineSuggestionsContent.id);
-            quickSettingsTab.setAttribute("tabindex", "-1");
-            const switchTab = (activeTab, inactiveTab, showContent, hideContent) => {
-                activeTab.classList.add("active");
-                activeTab.setAttribute("aria-selected", "true");
-                activeTab.setAttribute("tabindex", "0");
-                inactiveTab.classList.remove("active");
-                inactiveTab.setAttribute("aria-selected", "false");
-                inactiveTab.setAttribute("tabindex", "-1");
-                showContent.classList.add("active");
-                showContent.inert = false;
-                hideContent.classList.remove("active");
-                hideContent.inert = true;
-            };
-            this._store.add(addDisposableListener(
-                usageTab,
-                EventType.CLICK,
-                () => switchTab(usageTab, quickSettingsTab, usageContent, inlineSuggestionsContent)
-            ));
-            this._store.add(addDisposableListener(
-                quickSettingsTab,
-                EventType.CLICK,
-                () => switchTab(quickSettingsTab, usageTab, inlineSuggestionsContent, usageContent)
-            ));
-            this._store.add(addDisposableListener(tabBar, EventType.KEY_DOWN, e => {
-                if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
-                    e.preventDefault();
-                    if (usageTab.classList.contains("active")) {
-                        switchTab(quickSettingsTab, usageTab, inlineSuggestionsContent, usageContent);
-                        quickSettingsTab.focus();
-                    } else {
-                        switchTab(usageTab, quickSettingsTab, usageContent, inlineSuggestionsContent);
-                        usageTab.focus();
-                    }
-                }
-            }));
-            const tabContentContainer = this.element.appendChild($("div.tab-content-container"));
-            tabContentContainer.appendChild(usageContent);
-            tabContentContainer.appendChild(inlineSuggestionsContent);
-            this.renderUsageContent(usageContent, token, updatePromise);
-            this.renderInlineSuggestionsContent(inlineSuggestionsContent, token, updatePromise);
-        } else if (hasVisibleUsageContent) {
-            this.renderUsageContent(this.element, token, updatePromise);
-        } else if (hasInlineSuggestionsSection) {
-            this.renderInlineSuggestionsContent(this.element, token, updatePromise);
-        }
-        {
-            for (const item of this.chatStatusItemService.getEntries()) {
-                this.element.appendChild($("hr"));
-                const itemDisposables = this._store.add(( new MutableDisposable()));
-                let rendered = this.renderContributedChatStatusItem(item);
-                itemDisposables.value = rendered.disposables;
-                this.element.appendChild(rendered.element);
-                this._store.add(this.chatStatusItemService.onDidChange(e => {
-                    if (e.entry.id === item.id) {
-                        const previousElement = rendered.element;
-                        rendered = this.renderContributedChatStatusItem(e.entry);
-                        itemDisposables.value = rendered.disposables;
-                        previousElement.replaceWith(rendered.element);
-                    }
-                }));
-            }
-        }
-        {
-            const newUser = isNewUser(this.chatEntitlementService);
-            const anonymousUser = this.chatEntitlementService.anonymous;
-            const disabled = this.chatEntitlementService.sentiment.disabled || this.chatEntitlementService.sentiment.untrusted;
-            const signedOut = this.chatEntitlementService.entitlement === ChatEntitlement.Unknown;
-            if (newUser || signedOut || disabled) {
-                this.element.appendChild($("hr"));
-                let descriptionText;
-                let descriptionClass = ".description";
-                if (newUser && anonymousUser) {
-                    descriptionText = ( new MarkdownString(( localize(
-                        6390,
-                        "By continuing with {0} Copilot, you agree to {1}'s [Terms]({2}) and [Privacy Statement]({3})",
-                        defaultChat.provider.default.name,
-                        defaultChat.provider.default.name,
-                        defaultChat.termsStatementUrl,
-                        defaultChat.privacyStatementUrl
-                    )), {
-                        isTrusted: true
-                    }));
-                    descriptionClass = `${descriptionClass}.terms`;
-                } else if (newUser) {
-                    descriptionText = ( localize(6391, "Set up Copilot to use AI features."));
-                } else if (anonymousUser) {
-                    descriptionText = ( localize(6392, "Sign in to enable more Copilot AI features."));
-                } else if (disabled) {
-                    descriptionText = ( localize(6393, "Enable Copilot to use AI features."));
-                } else {
-                    descriptionText = ( localize(6394, "Sign in to use Copilot AI features."));
-                }
-                let buttonLabel;
-                if (newUser) {
-                    buttonLabel = ( localize(6395, "Use AI Features"));
-                } else if (anonymousUser) {
-                    buttonLabel = ( localize(6396, "Enable more AI Features"));
-                } else if (disabled) {
-                    buttonLabel = ( localize(6397, "Enable AI Features"));
-                } else {
-                    buttonLabel = ( localize(6398, "Sign in to use AI Features"));
-                }
-                let commandId;
-                if (newUser && anonymousUser) {
-                    commandId = "workbench.action.chat.triggerSetupAnonymousWithoutDialog";
+            const canConfigureAdditionalSpend = this.chatEntitlementService.entitlement === ChatEntitlement.EDU || this.chatEntitlementService.entitlement === ChatEntitlement.Pro || this.chatEntitlementService.entitlement === ChatEntitlement.ProPlus || this.chatEntitlementService.entitlement === ChatEntitlement.Max;
+            const showUpgrade = this.chatEntitlementService.entitlement !== ChatEntitlement.ProPlus && this.chatEntitlementService.entitlement !== ChatEntitlement.Max && this.chatEntitlementService.entitlement !== ChatEntitlement.Business && this.chatEntitlementService.entitlement !== ChatEntitlement.Enterprise;
+            const actionBarElement = header.lastElementChild;
+            const initialAdditionalUsageEnabled = this.chatEntitlementService.quotas.additionalUsageEnabled ?? false;
+            const initialIsUsageBasedBilling = this.chatEntitlementService.quotas.usageBasedBilling === true;
+            if (canConfigureAdditionalSpend) {
+                headerAdditionalSpendButton = this._store.add(( new Button(header, {
+                    ...defaultButtonStyles,
+                    hoverDelegate: nativeHoverDelegate,
+                    secondary: true
+                })));
+                headerAdditionalSpendButton.element.classList.add("header-cta-button");
+                if (initialIsUsageBasedBilling) {
+                    headerAdditionalSpendButton.label = initialAdditionalUsageEnabled ? ( localize(6616, "Manage Additional Spend")) : ( localize(6617, "Configure Additional Spend"));
                 } else {
-                    commandId = "workbench.action.chat.triggerSetup";
+                    headerAdditionalSpendButton.label = initialAdditionalUsageEnabled ? ( localize(6618, "Manage Budget")) : ( localize(6619, "Configure Budget"));
                 }
-                if (typeof descriptionText === "string") {
-                    this.element.appendChild($(`div${descriptionClass}`, undefined, descriptionText));
-                } else {
-                    this.element.appendChild($(
-                        `div${descriptionClass}`,
-                        undefined,
-                        this._store.add(this.markdownRendererService.render(descriptionText)).element
-                    ));
+                this._store.add(headerAdditionalSpendButton.onDidClick(() => {
+                    this.telemetryService.publicLog2("workbenchActionExecuted", {
+                        id: "workbench.action.chat.manageAdditionalSpend",
+                        from: "chat-status"
+                    });
+                    this.runCommandAndClose(() => this.openerService.open(( URI.parse(defaultChat.manageOverageUrl))));
+                }));
+                if (actionBarElement) {
+                    header.insertBefore(headerAdditionalSpendButton.element, actionBarElement);
                 }
-                const button = this._store.add(( new Button(this.element, {
+            }
+            if (showUpgrade) {
+                const upgradeButton = this._store.add(( new Button(header, {
                     ...defaultButtonStyles,
                     hoverDelegate: nativeHoverDelegate
                 })));
-                button.label = buttonLabel;
-                this._store.add(button.onDidClick(() => this.runCommandAndClose(commandId)));
+                upgradeButton.element.classList.add("header-cta-button");
+                upgradeButton.label = ( localize(6620, "Upgrade"));
+                this._store.add(
+                    upgradeButton.onDidClick(() => this.runCommandAndClose("workbench.action.chat.upgradePlan"))
+                );
+                if (actionBarElement) {
+                    header.insertBefore(upgradeButton.element, actionBarElement);
+                }
             }
         }
+        const updatePromise = this.chatEntitlementService.update(token);
+        if (hasVisibleUsageContent) {
+            this.renderUsageContent(this.element, token, headerAdditionalSpendButton, updatePromise);
+        }
+        const hasPremiumUnlimited = !!premiumChat?.unlimited;
+        if (hasPremiumUnlimited) {
+            const includedTitle = this.chatEntitlementService.quotas.usageBasedBilling ? ( localize(6621, "Credits")) : ( localize(6622, "Premium Requests"));
+            const includedContainer = this.element.appendChild($("div.quota-indicator.included"));
+            includedContainer.appendChild($("div.quota-title", undefined, includedTitle));
+            includedContainer.appendChild($("div.description", undefined, ( localize(6623, "Included with your organization's plan."))));
+        }
+        if (hasQuickSettingsContent) {
+            const hasContentAbove = hasUsageSection || hasVisibleUsageContent || hasPremiumUnlimited;
+            this.renderInlineSuggestionsSection(hasContentAbove);
+        }
+        if (contributedEntries.length > 0) {
+            this.renderContributedSections(contributedEntries);
+        }
+        this.renderSetupSection();
     }
-    renderUsageContent(container, token, updatePromise) {
+    renderUsageContent(container, token, headerAdditionalSpendButton, updatePromise) {
         const {
             chat: chatQuota,
             completions: completionsQuota,
@@ -330,48 +209,41 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
         } = this.chatEntitlementService.quotas;
         if (chatQuota || premiumChatQuota || completionsQuota) {
             const resetLabel = resetDate ? (resetDateHasTime ? ( localize(
-                6399,
+                6624,
                 "Resets {0} at {1}",
                 this.dateFormatter.value.format(( new Date(resetDate))),
                 this.timeFormatter.value.format(( new Date(resetDate)))
             )) : ( localize(
-                6400,
+                6625,
                 "Resets {0}",
                 this.dateFormatter.value.format(( new Date(resetDate)))
             ))) : undefined;
+            const globalCalloutUpdater = this.createGlobalQuotaCallout(container);
+            const {
+                calloutVisible: initialCalloutVisible
+            } = globalCalloutUpdater();
+            if (headerAdditionalSpendButton) {
+                headerAdditionalSpendButton.element.style.display = initialCalloutVisible ? "" : "none";
+            }
             let chatQuotaIndicator;
-            if (chatQuota && !chatQuota.unlimited && chatQuota.total > 0) {
-                chatQuotaIndicator = this.createQuotaIndicator(container, this._store, chatQuota, ( localize(6401, "Chat messages")), false, resetLabel);
+            if (chatQuota && !chatQuota.unlimited && (!this.chatEntitlementService.quotas.usageBasedBilling || this.chatEntitlementService.entitlement === ChatEntitlement.Free)) {
+                const chatLabel = this.chatEntitlementService.quotas.usageBasedBilling && this.chatEntitlementService.entitlement === ChatEntitlement.Free ? ( localize(6626, "Credits")) : ( localize(6627, "Chat messages"));
+                chatQuotaIndicator = this.createQuotaIndicator(container, chatQuota, chatLabel, resetLabel);
             }
             let premiumChatQuotaIndicator;
-            if (premiumChatQuota && !premiumChatQuota.unlimited && premiumChatQuota.total > 0) {
-                const premiumChatLabel = premiumChatQuota.overageEnabled ? ( localize(6402, "Included premium requests")) : ( localize(6403, "Premium requests"));
-                premiumChatQuotaIndicator = this.createQuotaIndicator(
-                    container,
-                    this._store,
-                    premiumChatQuota,
-                    premiumChatLabel,
-                    true,
-                    resetLabel
-                );
+            if (premiumChatQuota && !premiumChatQuota.unlimited && premiumChatQuota.percentRemaining >= 0) {
+                const isUBB = this.chatEntitlementService.quotas.usageBasedBilling;
+                const premiumChatLabel = isUBB ? ( localize(6626, "Credits")) : this.chatEntitlementService.quotas.additionalUsageEnabled ? ( localize(6628, "Included premium requests")) : ( localize(6629, "Premium requests"));
+                const premiumChatResetLabel = isUBB ? this.formatResetAtLabel(premiumChatQuota.resetAt) ?? resetLabel : resetLabel;
+                premiumChatQuotaIndicator = this.createQuotaIndicator(container, premiumChatQuota, premiumChatLabel, premiumChatResetLabel);
             }
             let completionsQuotaIndicator;
-            if (completionsQuota && !completionsQuota.unlimited && completionsQuota.total > 0) {
-                completionsQuotaIndicator = this.createQuotaIndicator(container, this._store, completionsQuota, ( localize(6404, "Inline Suggestions")), false, resetLabel);
-            }
-            if (this.chatEntitlementService.entitlement === ChatEntitlement.Free && (Number(chatQuota?.percentRemaining) <= 25 || Number(completionsQuota?.percentRemaining) <= 25)) {
-                const upgradeProButton = this._store.add(( new Button(container, {
-                    ...defaultButtonStyles,
-                    hoverDelegate: nativeHoverDelegate,
-                    secondary: this.canUseChat()
-                })));
-                upgradeProButton.label = ( localize(6405, "Upgrade to GitHub Copilot Pro"));
-                this._store.add(
-                    upgradeProButton.onDidClick(() => this.runCommandAndClose("workbench.action.chat.upgradePlan"))
-                );
+            const showCompletions = completionsQuota && !completionsQuota.unlimited && completionsQuota.percentRemaining >= 0 && (!this.chatEntitlementService.quotas.usageBasedBilling || this.chatEntitlementService.entitlement === ChatEntitlement.Free);
+            if (showCompletions) {
+                completionsQuotaIndicator = this.createQuotaIndicator(container, completionsQuota, ( localize(6630, "Inline Suggestions")), resetLabel);
             }
             (async () => {
-                await (updatePromise ?? this.chatEntitlementService.update(token));
+                await updatePromise;
                 if (token.isCancellationRequested) {
                     return;
                 }
@@ -389,15 +261,251 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
                 if (completionsQuota) {
                     completionsQuotaIndicator?.(completionsQuota);
                 }
+                const {
+                    calloutVisible,
+                    additionalUsageEnabled: isAdditionalUsageEnabled
+                } = globalCalloutUpdater();
+                if (headerAdditionalSpendButton) {
+                    headerAdditionalSpendButton.element.style.display = calloutVisible ? "" : "none";
+                    const isUBB = this.chatEntitlementService.quotas.usageBasedBilling === true;
+                    if (isUBB) {
+                        headerAdditionalSpendButton.label = isAdditionalUsageEnabled ? ( localize(6616, "Manage Additional Spend")) : ( localize(6617, "Configure Additional Spend"));
+                    } else {
+                        headerAdditionalSpendButton.label = isAdditionalUsageEnabled ? ( localize(6618, "Manage Budget")) : ( localize(6619, "Configure Budget"));
+                    }
+                }
             })();
         }
         else if (this.chatEntitlementService.anonymous && this.chatEntitlementService.sentiment.completed) {
-            this.createQuotaIndicator(container, this._store, ( localize(6406, "Limited")), ( localize(6401, "Chat messages")), false);
+            this.createQuotaIndicator(container, ( localize(6631, "Limited")), ( localize(6627, "Chat messages")));
         }
     }
-    renderInlineSuggestionsContent(container, _token, _updatePromise) {
+    renderInlineSuggestionsSection(hasContentAbove) {
+        const nonCollapsible = !!this.options?.disableQuickSettingsCollapsible;
+        const collapsed = !nonCollapsible && this.storageService.getBoolean(
+            ChatStatusDashboard_1.QUICK_SETTINGS_COLLAPSED_KEY,
+            StorageScope.PROFILE,
+            true
+        );
+        const activeLanguageId = this.editorService.activeTextEditorLanguageId;
+        const getStatusText = () => {
+            if (!this.canUseChat()) {
+                return localize(6632, "Disabled");
+            }
+            const enabled = activeLanguageId ? isCompletionsEnabled(this.configurationService, activeLanguageId) : isCompletionsEnabled(this.configurationService);
+            return enabled ? ( localize(6633, "Enabled")) : ( localize(6632, "Disabled"));
+        };
+        let disclosureHeader;
+        let chevron;
+        let statusEl;
+        if (!nonCollapsible) {
+            disclosureHeader = this.element.appendChild($("button.collapsible-header"));
+            if (!hasContentAbove) {
+                disclosureHeader.classList.add("no-border");
+            }
+            disclosureHeader.setAttribute("aria-expanded", String(!collapsed));
+            disclosureHeader.appendChild($("span.collapsible-label", undefined, ( localize(6634, "Inline Suggestions"))));
+            chevron = disclosureHeader.appendChild($("span.collapsible-chevron"));
+            chevron.classList.add(
+                ...ThemeIcon.asClassNameArray(collapsed ? Codicon.chevronRight : Codicon.chevronDown)
+            );
+            statusEl = disclosureHeader.appendChild($("span.collapsible-status", undefined, getStatusText()));
+        }
+        const collapsibleContent = this.element.appendChild($("div.collapsible-content"));
+        const collapsibleInner = collapsibleContent.appendChild($("div.collapsible-inner"));
+        if (collapsed) {
+            collapsibleContent.classList.add("collapsed");
+            collapsibleInner.inert = true;
+        }
+        if (disclosureHeader && chevron) {
+            const toggle = () => {
+                const isCollapsed = collapsibleContent.classList.toggle("collapsed");
+                collapsibleInner.inert = isCollapsed;
+                disclosureHeader.setAttribute("aria-expanded", String(!isCollapsed));
+                chevron.className = "collapsible-chevron";
+                chevron.classList.add(
+                    ...ThemeIcon.asClassNameArray(isCollapsed ? Codicon.chevronRight : Codicon.chevronDown)
+                );
+                this.storageService.store(
+                    ChatStatusDashboard_1.QUICK_SETTINGS_COLLAPSED_KEY,
+                    isCollapsed,
+                    StorageScope.PROFILE,
+                    StorageTarget.USER
+                );
+            };
+            this._store.add(addDisposableListener(disclosureHeader, EventType.CLICK, () => toggle()));
+        }
+        if (statusEl) {
+            this._store.add(this.configurationService.onDidChangeConfiguration(e => {
+                if (e.affectsConfiguration(defaultChat.completionsEnablementSetting)) {
+                    statusEl.textContent = getStatusText();
+                }
+            }));
+        }
+        this.renderInlineSuggestionsContent(collapsibleInner);
+    }
+    renderContributedSections(contributedEntries) {
+        const nonCollapsible = !!this.options?.disableContributedSectionsCollapsible;
+        for (const item of contributedEntries) {
+            const storageKey = ChatStatusDashboard_1.CONTRIBUTED_COLLAPSED_KEY_PREFIX + item.id;
+            const collapsed = !nonCollapsible && this.storageService.getBoolean(storageKey, StorageScope.PROFILE, true);
+            const headerLabel = typeof item.label === "string" ? item.label : item.label.label;
+            const headerLink = typeof item.label === "string" ? undefined : item.label.link;
+            const linkDescription = typeof item.label === "string" ? undefined : item.label.helpText;
+            const disclosureHeader = this.element.appendChild(
+                nonCollapsible ? $("div.collapsible-header.non-collapsible") : $("button.collapsible-header")
+            );
+            let chevron;
+            disclosureHeader.appendChild($("span.collapsible-label", undefined, headerLabel));
+            if (!nonCollapsible) {
+                disclosureHeader.setAttribute("aria-expanded", String(!collapsed));
+                chevron = disclosureHeader.appendChild($("span.collapsible-chevron"));
+                chevron.classList.add(
+                    ...ThemeIcon.asClassNameArray(collapsed ? Codicon.chevronRight : Codicon.chevronDown)
+                );
+            }
+            const statusEl = disclosureHeader.appendChild($("span.collapsible-status"));
+            statusEl.append(...renderLabelWithIcons(item.description));
+            statusEl.title = stripIcons(item.description).trim();
+            const collapsibleContent = this.element.appendChild($("div.collapsible-content"));
+            const collapsibleInner = collapsibleContent.appendChild($("div.collapsible-inner"));
+            if (collapsed) {
+                collapsibleContent.classList.add("collapsed");
+                collapsibleInner.inert = true;
+            }
+            if (!nonCollapsible) {
+                const toggle = () => {
+                    const isCollapsed = collapsibleContent.classList.toggle("collapsed");
+                    collapsibleInner.inert = isCollapsed;
+                    disclosureHeader.setAttribute("aria-expanded", String(!isCollapsed));
+                    chevron.className = "collapsible-chevron";
+                    chevron.classList.add(
+                        ...ThemeIcon.asClassNameArray(isCollapsed ? Codicon.chevronRight : Codicon.chevronDown)
+                    );
+                    this.storageService.store(storageKey, isCollapsed, StorageScope.PROFILE, StorageTarget.USER);
+                };
+                this._store.add(addDisposableListener(disclosureHeader, EventType.CLICK, () => toggle()));
+            }
+            const sectionDisposables = this._store.add(( new MutableDisposable()));
+            const sectionStore = ( new DisposableStore());
+            sectionDisposables.value = sectionStore;
+            let descriptionEl;
+            if (headerLink) {
+                descriptionEl = collapsibleInner.appendChild($("div.section-description"));
+                const descText = linkDescription ? `${linkDescription} [${( localize(6635, "Learn More"))}](${headerLink})` : `[${( localize(6635, "Learn More"))}](${headerLink})`;
+                this.renderTextPlus(descriptionEl, descText, sectionStore);
+            }
+            let detailEl;
+            if (item.detail) {
+                detailEl = collapsibleInner.appendChild($("div.section-detail"));
+                this.renderTextPlus(detailEl, item.detail, sectionStore);
+            }
+            this._store.add(this.chatStatusItemService.onDidChange(e => {
+                if (e.entry.id === item.id) {
+                    statusEl.textContent = "";
+                    statusEl.append(...renderLabelWithIcons(e.entry.description));
+                    statusEl.title = stripIcons(e.entry.description).trim();
+                    const newStore = ( new DisposableStore());
+                    sectionDisposables.value = newStore;
+                    if (detailEl) {
+                        if (e.entry.detail) {
+                            detailEl.textContent = "";
+                            this.renderTextPlus(detailEl, e.entry.detail, newStore);
+                        } else {
+                            detailEl.remove();
+                            detailEl = undefined;
+                        }
+                    } else if (e.entry.detail) {
+                        detailEl = collapsibleInner.appendChild($("div.section-detail"));
+                        this.renderTextPlus(detailEl, e.entry.detail, newStore);
+                    }
+                    const updatedLink = typeof e.entry.label === "string" ? undefined : e.entry.label.link;
+                    const updatedLinkDesc = typeof e.entry.label === "string" ? undefined : e.entry.label.helpText;
+                    if (descriptionEl) {
+                        if (updatedLink) {
+                            descriptionEl.textContent = "";
+                            const descText = updatedLinkDesc ? `${updatedLinkDesc} [${( localize(6635, "Learn More"))}](${updatedLink})` : `[${( localize(6635, "Learn More"))}](${updatedLink})`;
+                            this.renderTextPlus(descriptionEl, descText, newStore);
+                        } else {
+                            descriptionEl.remove();
+                            descriptionEl = undefined;
+                        }
+                    } else if (updatedLink) {
+                        descriptionEl = collapsibleInner.insertBefore($("div.section-description"), detailEl ?? null);
+                        const descText = updatedLinkDesc ? `${updatedLinkDesc} [${( localize(6635, "Learn More"))}](${updatedLink})` : `[${( localize(6635, "Learn More"))}](${updatedLink})`;
+                        this.renderTextPlus(descriptionEl, descText, newStore);
+                    }
+                }
+            }));
+        }
+    }
+    renderSetupSection() {
+        const newUser = isNewUser(this.chatEntitlementService);
+        const anonymousUser = this.chatEntitlementService.anonymous;
+        const disabled = this.chatEntitlementService.sentiment.disabled || this.chatEntitlementService.sentiment.untrusted;
+        const signedOut = this.chatEntitlementService.entitlement === ChatEntitlement.Unknown;
+        if (!(newUser || signedOut || disabled)) {
+            return;
+        }
+        this.element.appendChild($("hr"));
+        let descriptionText;
+        let descriptionClass = ".description";
+        if (newUser && anonymousUser) {
+            descriptionText = ( new MarkdownString(( localize(
+                6636,
+                "By continuing with {0} Copilot, you agree to {1}'s [Terms]({2}) and [Privacy Statement]({3})",
+                defaultChat.provider.default.name,
+                defaultChat.provider.default.name,
+                defaultChat.termsStatementUrl,
+                defaultChat.privacyStatementUrl
+            )), {
+                isTrusted: true
+            }));
+            descriptionClass = `${descriptionClass}.terms`;
+        } else if (newUser) {
+            descriptionText = ( localize(6637, "Set up Copilot to use AI features."));
+        } else if (anonymousUser) {
+            descriptionText = ( localize(6638, "Sign in to enable more Copilot AI features."));
+        } else if (disabled) {
+            descriptionText = ( localize(6639, "Enable Copilot to use AI features."));
+        } else {
+            descriptionText = ( localize(6640, "Sign in to use Copilot AI features."));
+        }
+        let buttonLabel;
+        if (newUser) {
+            buttonLabel = ( localize(6641, "Use AI Features"));
+        } else if (anonymousUser) {
+            buttonLabel = ( localize(6642, "Enable more AI Features"));
+        } else if (disabled) {
+            buttonLabel = ( localize(6643, "Enable AI Features"));
+        } else {
+            buttonLabel = ( localize(6644, "Sign in to use AI Features"));
+        }
+        let commandId;
+        if (newUser && anonymousUser) {
+            commandId = "workbench.action.chat.triggerSetupAnonymousWithoutDialog";
+        } else {
+            commandId = "workbench.action.chat.triggerSetup";
+        }
+        if (typeof descriptionText === "string") {
+            this.element.appendChild($(`div${descriptionClass}`, undefined, descriptionText));
+        } else {
+            this.element.appendChild($(
+                `div${descriptionClass}`,
+                undefined,
+                this._store.add(this.markdownRendererService.render(descriptionText)).element
+            ));
+        }
+        const button = this._store.add(( new Button(this.element, {
+            ...defaultButtonStyles,
+            hoverDelegate: nativeHoverDelegate
+        })));
+        button.label = buttonLabel;
+        this._store.add(button.onDidClick(() => this.runCommandAndClose(commandId)));
+    }
+    renderInlineSuggestionsContent(container) {
         if (!this.options?.disableInlineSuggestionsSettings) {
-            this.createSettings(container, this._store);
+            this.createSettings(container);
         }
         const providers = (!this.options?.disableModelSelection || !this.options?.disableProviderOptions) ? this.languageFeaturesService.inlineCompletionsProvider.allNoModel() : undefined;
         if (!this.options?.disableModelSelection && providers) {
@@ -407,23 +515,29 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
                 const currentModel = modelInfo.models.find(m => m.id === modelInfo.currentModelId);
                 if (currentModel) {
                     const modelContainer = container.appendChild($("div.model-selection"));
-                    modelContainer.appendChild($("span.model-text", undefined, ( localize(6407, "Model"))));
-                    const actionBar = modelContainer.appendChild($("div.model-action-bar"));
-                    const toolbar = this._store.add(( new ActionBar(actionBar, {
-                        hoverDelegate: nativeHoverDelegate
+                    modelContainer.appendChild($("span.model-text", undefined, ( localize(6645, "Model"))));
+                    const selectOptions = ( modelInfo.models.map(m => ({
+                        text: m.name
                     })));
-                    toolbar.push([toAction({
-                        id: "workbench.action.selectInlineCompletionsModel",
-                        label: currentModel.name,
-                        tooltip: ( localize(6408, "Select Model")),
-                        class: ThemeIcon.asClassName(Codicon.gear),
-                        run: async () => {
-                            await this.showModelPicker(provider);
+                    const selectedIndex = modelInfo.models.findIndex(m => m.id === modelInfo.currentModelId);
+                    const selectBox = this._store.add(( new SelectBox(
+                        selectOptions,
+                        Math.max(0, selectedIndex),
+                        this.contextViewService,
+                        defaultSelectBoxStyles,
+                        {
+                            ariaLabel: ( localize(6646, "Select Model")),
+                            optionsAsChildren: true
                         }
-                    })], {
-                        icon: false,
-                        label: true
-                    });
+                    )));
+                    const selectContainer = modelContainer.appendChild($("div.model-select-container"));
+                    selectBox.render(selectContainer);
+                    this._store.add(selectBox.onDidSelect(async e => {
+                        const selectedModel = modelInfo.models[e.index];
+                        if (selectedModel && selectedModel.id !== modelInfo.currentModelId && provider.setModelId) {
+                            await provider.setModelId(selectedModel.id);
+                        }
+                    }));
                 }
             }
         }
@@ -435,21 +549,28 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
                         if (currentValue) {
                             const optionContainer = container.appendChild($("div.suggest-option-selection"));
                             optionContainer.appendChild($("span.suggest-option-text", undefined, option.label));
-                            const actionBar = optionContainer.appendChild($("div.suggest-option-action-bar"));
-                            const toolbar = this._store.add(( new ActionBar(actionBar, {
-                                hoverDelegate: nativeHoverDelegate
+                            const selectOptions = ( option.values.map(v => ({
+                                text: v.label
                             })));
-                            toolbar.push([toAction({
-                                id: `workbench.action.selectProviderOption.${option.id}`,
-                                label: currentValue.label,
-                                tooltip: ( localize(6409, "Select {0}", option.label)),
-                                run: async () => {
-                                    await this.showProviderOptionPicker(provider, option);
+                            const selectedIndex = option.values.findIndex(v => v.id === option.currentValueId);
+                            const selectBox = this._store.add(( new SelectBox(
+                                selectOptions,
+                                Math.max(0, selectedIndex),
+                                this.contextViewService,
+                                defaultSelectBoxStyles,
+                                {
+                                    ariaLabel: ( localize(6647, "Select {0}", option.label)),
+                                    optionsAsChildren: true
+                                }
+                            )));
+                            const selectContainer = optionContainer.appendChild($("div.suggest-option-select-container"));
+                            selectBox.render(selectContainer);
+                            this._store.add(selectBox.onDidSelect(async e => {
+                                const selectedValue = option.values[e.index];
+                                if (selectedValue && selectedValue.id !== option.currentValueId && provider.setProviderOption) {
+                                    await provider.setProviderOption(option.id, selectedValue.id);
                                 }
-                            })], {
-                                icon: false,
-                                label: true
-                            });
+                            }));
                         }
                     }
                 }
@@ -457,7 +578,7 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
         }
         if (!this.options?.disableCompletionsSnooze && this.canUseChat()) {
             const snooze = append(container, $("div.snooze-completions"));
-            this.createCompletionsSnooze(snooze, ( localize(6410, "Snooze")), this._store);
+            this.createCompletionsSnooze(snooze, ( localize(6648, "Snooze")));
         }
     }
     canUseChat() {
@@ -473,7 +594,8 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
         return true;
     }
     renderHeader(container, disposables, label, action) {
-        const header = container.appendChild($("div.header", undefined, label ?? ""));
+        const header = container.appendChild($("div.header"));
+        header.appendChild($("span.header-label", undefined, label));
         if (action) {
             const toolbar = disposables.add(( new ActionBar(header, {
                 hoverDelegate: nativeHoverDelegate
@@ -483,32 +605,7 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
                 label: false
             });
         }
-    }
-    renderContributedChatStatusItem(item) {
-        const disposables = ( new DisposableStore());
-        const itemElement = $("div.contribution");
-        const headerLabel = typeof item.label === "string" ? item.label : item.label.label;
-        const headerLink = typeof item.label === "string" ? undefined : item.label.link;
-        this.renderHeader(itemElement, disposables, headerLabel, headerLink ? toAction({
-            id: "workbench.action.openChatStatusItemLink",
-            label: ( localize(6411, "Learn More")),
-            tooltip: ( localize(6411, "Learn More")),
-            class: ThemeIcon.asClassName(Codicon.linkExternal),
-            run: () => this.runCommandAndClose(() => this.openerService.open(( URI.parse(headerLink))))
-        }) : undefined);
-        const itemBody = itemElement.appendChild($("div.body"));
-        const description = itemBody.appendChild($("span.description"));
-        this.renderTextPlus(description, item.description, disposables);
-        if (item.detail) {
-            const separator = itemBody.appendChild($("span.separator"));
-            separator.textContent = "—";
-            const detail = itemBody.appendChild($("span.detail-item"));
-            this.renderTextPlus(detail, item.detail, disposables);
-        }
-        return {
-            element: itemElement,
-            disposables
-        };
+        return header;
     }
     renderTextPlus(target, text, store) {
         for (const node of parseLinkedText(text).nodes) {
@@ -532,7 +629,19 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
         }
         this.hoverService.hideHover(true);
     }
-    createQuotaIndicator(container, disposables, quota, label, supportsOverage, resetLabel) {
+    formatResetAtLabel(resetAt) {
+        if (!resetAt) {
+            return undefined;
+        }
+        const resetDate = ( new Date(resetAt * 1000));
+        return localize(
+            6624,
+            "Resets {0} at {1}",
+            this.dateFormatter.value.format(resetDate),
+            this.timeFormatter.value.format(resetDate)
+        );
+    }
+    createQuotaIndicator(container, quota, label, resetLabel) {
         const quotaValue = $("span.quota-value");
         const quotaValueSuffix = $("span.quota-value-suffix");
         const quotaBit = $("div.quota-bit");
@@ -540,120 +649,172 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
         if (resetLabel) {
             resetValue.textContent = resetLabel;
         }
-        const quotaIndicator = container.appendChild($(
+        const quotaPercentage = $("div.quota-percentage", undefined, quotaValue, quotaValueSuffix);
+        quotaPercentage.tabIndex = 0;
+        container.appendChild($(
             "div.quota-indicator",
             undefined,
             $("div.quota-title", undefined, label),
-            $(
-                "div.quota-details",
-                undefined,
-                $("div.quota-percentage", undefined, quotaValue, quotaValueSuffix),
-                resetValue
-            ),
+            $("div.quota-details", undefined, quotaPercentage, resetValue),
             $("div.quota-bar", undefined, quotaBit)
         ));
-        const calloutIcon = $("span.callout-icon");
-        const calloutText = $("span.callout-text");
-        const quotaCallout = container.appendChild($("div.quota-callout", undefined, calloutIcon, calloutText));
-        quotaCallout.style.display = "none";
-        if (supportsOverage && (this.chatEntitlementService.entitlement === ChatEntitlement.EDU || this.chatEntitlementService.entitlement === ChatEntitlement.Pro || this.chatEntitlementService.entitlement === ChatEntitlement.ProPlus)) {
-            const manageOverageButton = disposables.add(( new Button(container, {
-                ...defaultButtonStyles,
-                secondary: true,
-                hoverDelegate: nativeHoverDelegate
-            })));
-            manageOverageButton.label = ( localize(6412, "Manage paid premium requests"));
-            disposables.add(
-                manageOverageButton.onDidClick(() => this.runCommandAndClose(() => this.openerService.open(( URI.parse(defaultChat.manageOverageUrl)))))
-            );
-        }
-        const isEnterpriseUser = this.chatEntitlementService.entitlement === ChatEntitlement.Enterprise || this.chatEntitlementService.entitlement === ChatEntitlement.Business;
+        let currentQuota = quota;
+        let isHovered = false;
+        const showPercentage = () => {
+            if (typeof currentQuota === "string") {
+                quotaValue.textContent = currentQuota;
+                quotaValueSuffix.textContent = "";
+            } else {
+                const usedPercentage = Math.max(0, 100 - currentQuota.percentRemaining);
+                quotaValue.textContent = ( localize(
+                    6649,
+                    "{0}%",
+                    this.quotaPercentageFormatter.value.format(Math.floor(usedPercentage))
+                ));
+                quotaValueSuffix.textContent = ` ${( localize(6650, "used"))}`;
+            }
+        };
+        const showCredits = () => {
+            if (typeof currentQuota !== "string" && currentQuota.entitlement) {
+                const total = currentQuota.entitlement;
+                const used = total * (100 - currentQuota.percentRemaining) / 100;
+                const usedFormatted = this.quotaCreditsFormatter.value.format(used);
+                const totalFormatted = this.quotaCreditsFormatter.value.format(total);
+                quotaValue.textContent = ( localize(6651, "{0} / {1}", usedFormatted, totalFormatted));
+                quotaValueSuffix.textContent = ` ${( localize(6650, "used"))}`;
+            }
+        };
+        this._store.add(addDisposableListener(quotaPercentage, EventType.MOUSE_ENTER, () => {
+            isHovered = true;
+            showCredits();
+        }));
+        this._store.add(addDisposableListener(quotaPercentage, EventType.MOUSE_LEAVE, () => {
+            isHovered = false;
+            showPercentage();
+        }));
+        this._store.add(addDisposableListener(quotaPercentage, EventType.FOCUS, () => {
+            isHovered = true;
+            showCredits();
+        }));
+        this._store.add(addDisposableListener(quotaPercentage, EventType.BLUR, () => {
+            isHovered = false;
+            showPercentage();
+        }));
         const update = quota => {
-            quotaIndicator.classList.remove("error");
-            quotaIndicator.classList.remove("warning");
-            quotaIndicator.classList.remove("dimmed");
-            quotaIndicator.classList.remove("info");
+            currentQuota = quota;
             let usedPercentage;
             if (typeof quota === "string") {
                 usedPercentage = 0;
             } else {
                 usedPercentage = Math.max(0, 100 - quota.percentRemaining);
             }
-            if (typeof quota === "string") {
-                quotaValue.textContent = quota;
-                quotaValueSuffix.textContent = "";
-            } else if (quota.overageCount) {
-                quotaValue.textContent = `+${this.quotaOverageFormatter.value.format(quota.overageCount)}`;
-                quotaValueSuffix.textContent = ` ${( localize(6413, "requests"))}`;
+            if (isHovered) {
+                showCredits();
             } else {
-                quotaValue.textContent = ( localize(6414, "{0}%", this.quotaPercentageFormatter.value.format(usedPercentage)));
-                quotaValueSuffix.textContent = ` ${( localize(6415, "used"))}`;
+                showPercentage();
             }
             quotaBit.style.width = `${usedPercentage}%`;
-            const overageEnabled = supportsOverage && typeof quota !== "string" && quota?.overageEnabled;
-            if (usedPercentage >= 100 && overageEnabled) {
-                quotaIndicator.classList.add("dimmed");
+        };
+        update(quota);
+        return update;
+    }
+    createGlobalQuotaCallout(container) {
+        const calloutIcon = $("span.callout-icon");
+        const calloutText = $("span.callout-text");
+        const quotaCallout = container.appendChild($("div.quota-callout", undefined, calloutIcon, calloutText));
+        quotaCallout.style.display = "none";
+        const update = () => {
+            const quotas = this.chatEntitlementService.quotas;
+            const additionalUsageEnabled = quotas.additionalUsageEnabled ?? false;
+            const isEnterpriseUser = this.chatEntitlementService.entitlement === ChatEntitlement.Enterprise || this.chatEntitlementService.entitlement === ChatEntitlement.Business;
+            const isUsageBasedBilling = quotas.usageBasedBilling === true;
+            const allQuotas = [];
+            if (quotas.chat && !quotas.chat.unlimited) {
+                allQuotas.push(quotas.chat);
+            }
+            if (quotas.premiumChat && !quotas.premiumChat.unlimited) {
+                allQuotas.push(quotas.premiumChat);
+            }
+            if (quotas.completions && !quotas.completions.unlimited) {
+                allQuotas.push(quotas.completions);
+            }
+            const maxUsedPercentage = allQuotas.length > 0 ? Math.max(...( allQuotas.map(q => Math.max(0, 100 - q.percentRemaining)))) : 0;
+            if (maxUsedPercentage >= 100 && additionalUsageEnabled) {
                 quotaCallout.style.display = "";
                 quotaCallout.className = "quota-callout info";
                 calloutIcon.className = `callout-icon ${ThemeIcon.asClassName(Codicon.info)}`;
-                calloutText.textContent = ( localize(6416, "Using Overage Budget until limits reset."));
-            } else if (usedPercentage >= 75 && overageEnabled) {
-                quotaIndicator.classList.add("info");
+                calloutText.textContent = isUsageBasedBilling ? ( localize(
+                    6652,
+                    "Additional spend is configured. Usage will continue until limits reset."
+                )) : ( localize(
+                    6653,
+                    "Premium request budget is configured. Usage will continue until limits reset."
+                ));
+            } else if (maxUsedPercentage >= 75 && maxUsedPercentage < 100 && additionalUsageEnabled) {
                 quotaCallout.style.display = "";
                 quotaCallout.className = "quota-callout info";
                 calloutIcon.className = `callout-icon ${ThemeIcon.asClassName(Codicon.info)}`;
-                calloutText.textContent = ( localize(6417, "Once the limit is reached, your Overage Budget will be used."));
-            } else if (usedPercentage >= 100 && !overageEnabled) {
-                quotaIndicator.classList.add("dimmed");
+                calloutText.textContent = isUsageBasedBilling ? ( localize(6654, "Once the limit is reached, additional spend will be used.")) : ( localize(6655, "Once the limit is reached, premium request budget will be used."));
+            } else if (maxUsedPercentage >= 100 && !additionalUsageEnabled) {
                 quotaCallout.style.display = "";
-                quotaCallout.className = "quota-callout error";
-                calloutIcon.className = `callout-icon ${ThemeIcon.asClassName(Codicon.error)}`;
+                quotaCallout.className = "quota-callout info";
+                calloutIcon.className = `callout-icon ${ThemeIcon.asClassName(Codicon.info)}`;
                 calloutText.textContent = isEnterpriseUser ? ( localize(
-                    6418,
+                    6656,
                     "Copilot is paused until the limit resets. Contact your administrator for more information."
-                )) : ( localize(6419, "Copilot is paused until the limit resets."));
-            } else if (usedPercentage >= 75 && !overageEnabled) {
-                quotaIndicator.classList.add("warning");
+                )) : ( localize(6657, "Copilot is paused until the limit resets."));
+            } else if (maxUsedPercentage >= 75 && !additionalUsageEnabled) {
                 quotaCallout.style.display = "";
-                quotaCallout.className = "quota-callout warning";
-                calloutIcon.className = `callout-icon ${ThemeIcon.asClassName(Codicon.warning)}`;
+                quotaCallout.className = "quota-callout info";
+                calloutIcon.className = `callout-icon ${ThemeIcon.asClassName(Codicon.info)}`;
                 calloutText.textContent = isEnterpriseUser ? ( localize(
-                    6420,
+                    6658,
                     "Copilot will pause when the limit is reached. Contact your administrator for more information."
-                )) : ( localize(6421, "Copilot will pause when the limit is reached."));
+                )) : ( localize(6659, "Copilot will pause when the limit is reached."));
             } else {
                 quotaCallout.style.display = "none";
             }
+            return {
+                calloutVisible: quotaCallout.style.display !== "none",
+                additionalUsageEnabled
+            };
         };
-        update(quota);
+        update();
         return update;
     }
-    createSettings(container, disposables) {
+    createSettings(container) {
         const modeId = this.editorService.activeTextEditorLanguageId;
         const settings = container.appendChild($("div.settings"));
         {
             const globalSetting = append(settings, $("div.setting"));
-            this.createInlineSuggestionsSetting(globalSetting, ( localize(6422, "All files")), "*", disposables);
+            this.createInlineSuggestionsSetting(globalSetting, ( localize(6660, "Ghost text suggestions")), "*");
+            const overriddenHint = globalSetting.appendChild($("span.setting-overridden"));
+            const updateOverriddenHint = () => {
+                const obj = this.configurationService.getValue(defaultChat.completionsEnablementSetting);
+                const hasOverride = modeId && isObject(obj) && typeof obj[modeId] !== "undefined" && Boolean(obj[modeId]) !== Boolean(obj["*"]);
+                overriddenHint.textContent = hasOverride ? ( localize(6661, "(overridden)")) : "";
+            };
+            updateOverriddenHint();
             if (modeId) {
                 const languageSetting = append(settings, $("div.setting"));
-                this.createInlineSuggestionsSetting(languageSetting, ( localize(6423, "{0}", this.languageService.getLanguageName(modeId) ?? modeId)), modeId, disposables);
+                const languageName = this.languageService.getLanguageName(modeId) ?? modeId;
+                this.createTriStateLanguageSetting(languageSetting, ( localize(6662, "Ghost text suggestions for {0}", languageName)), modeId, updateOverriddenHint);
             }
         }
         {
             const setting = append(settings, $("div.setting"));
-            this.createNextEditSuggestionsSetting(setting, ( localize(6424, "Next edit suggestions")), this.getCompletionsSettingAccessor(modeId), disposables);
+            this.createNextEditSuggestionsSetting(setting, ( localize(6663, "Next edit suggestions")), this.getCompletionsSettingAccessor(modeId));
         }
-        return settings;
     }
-    createSetting(container, settingIdsToReEvaluate, label, accessor, disposables) {
-        const checkbox = disposables.add(( new Checkbox(label, Boolean(accessor.readSetting()), {
+    createSetting(container, settingIdsToReEvaluate, label, accessor) {
+        const checkbox = this._store.add(( new Checkbox(label, Boolean(accessor.readSetting()), {
             ...defaultCheckboxStyles
         })));
         container.appendChild(checkbox.domNode);
         const settingLabel = append(container, $("span.setting-label", undefined, label));
-        disposables.add(Gesture.addTarget(settingLabel));
+        this._store.add(Gesture.addTarget(settingLabel));
         [EventType.CLICK, EventType$1.Tap].forEach(eventType => {
-            disposables.add(addDisposableListener(settingLabel, eventType, e => {
+            this._store.add(addDisposableListener(settingLabel, eventType, e => {
                 if (checkbox?.enabled) {
                     EventHelper.stop(e, true);
                     checkbox.checked = !checkbox.checked;
@@ -662,10 +823,10 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
                 }
             }));
         });
-        disposables.add(checkbox.onChange(() => {
+        this._store.add(checkbox.onChange(() => {
             accessor.writeSetting(checkbox.checked);
         }));
-        disposables.add(this.configurationService.onDidChangeConfiguration(e => {
+        this._store.add(this.configurationService.onDidChangeConfiguration(e => {
             if (( settingIdsToReEvaluate.some(id => e.affectsConfiguration(id)))) {
                 checkbox.checked = Boolean(accessor.readSetting());
             }
@@ -677,15 +838,101 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
         }
         return checkbox;
     }
-    createInlineSuggestionsSetting(container, label, modeId, disposables) {
+    createInlineSuggestionsSetting(container, label, modeId) {
         this.createSetting(
             container,
             [defaultChat.completionsEnablementSetting],
             label,
-            this.getCompletionsSettingAccessor(modeId),
-            disposables
+            this.getCompletionsSettingAccessor(modeId)
         );
     }
+    createTriStateLanguageSetting(container, label, modeId, onStateChange) {
+        const settingId = defaultChat.completionsEnablementSetting;
+        const getState = () => {
+            const obj = this.configurationService.getValue(settingId);
+            if (!isObject(obj) || typeof obj[modeId] === "undefined") {
+                return "mixed";
+            }
+            return Boolean(obj[modeId]);
+        };
+        const checkbox = this._store.add(( new TriStateCheckbox(label, getState(), {
+            ...defaultCheckboxStyles
+        })));
+        container.appendChild(checkbox.domNode);
+        const settingLabel = append(container, $("span.setting-label", undefined, label));
+        this._store.add(Gesture.addTarget(settingLabel));
+        const cycleState = () => {
+            const current = checkbox.checked;
+            if (current === true) {
+                checkbox.checked = false;
+            } else if (current === false) {
+                checkbox.checked = "mixed";
+            } else {
+                checkbox.checked = true;
+            }
+        };
+        const writeState = state => {
+            let result = this.configurationService.getValue(settingId);
+            if (!isObject(result)) {
+                result = Object.create(null);
+            }
+            if (state === "mixed") {
+                const {
+                    [modeId]: _,
+                    ...rest
+                } = result;
+                const inheritedEnablement = typeof rest["*"] === "boolean" ? (rest["*"] ? "enabled" : "disabled") : "enabled";
+                this.telemetryService.publicLog2("chatStatus.settingChanged", {
+                    settingIdentifier: settingId,
+                    settingMode: modeId,
+                    settingEnablement: inheritedEnablement
+                });
+                this.configurationService.updateValue(settingId, rest);
+            } else {
+                this.telemetryService.publicLog2("chatStatus.settingChanged", {
+                    settingIdentifier: settingId,
+                    settingMode: modeId,
+                    settingEnablement: state ? "enabled" : "disabled"
+                });
+                this.configurationService.updateValue(settingId, {
+                    ...result,
+                    [modeId]: state
+                });
+            }
+            onStateChange();
+        };
+        let previousState = getState();
+        const cycleAndWrite = () => {
+            cycleState();
+            previousState = checkbox.checked;
+            writeState(checkbox.checked);
+        };
+        [EventType.CLICK, EventType$1.Tap].forEach(eventType => {
+            this._store.add(addDisposableListener(settingLabel, eventType, e => {
+                if (checkbox?.enabled) {
+                    EventHelper.stop(e, true);
+                    cycleAndWrite();
+                    checkbox.focus();
+                }
+            }));
+        });
+        this._store.add(checkbox.onChange(() => {
+            checkbox.checked = previousState;
+            cycleAndWrite();
+        }));
+        this._store.add(this.configurationService.onDidChangeConfiguration(e => {
+            if (e.affectsConfiguration(settingId)) {
+                checkbox.checked = getState();
+                previousState = checkbox.checked;
+                onStateChange();
+            }
+        }));
+        if (!this.canUseChat()) {
+            container.classList.add("disabled");
+            checkbox.disable();
+            checkbox.checked = false;
+        }
+    }
     getCompletionsSettingAccessor(modeId = "*") {
         const settingId = defaultChat.completionsEnablementSetting;
         return {
@@ -707,7 +954,7 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
             }
         };
     }
-    createNextEditSuggestionsSetting(container, label, completionsSettingAccessor, disposables) {
+    createNextEditSuggestionsSetting(container, label, completionsSettingAccessor) {
         const nesSettingId = defaultChat.nextEditSuggestionsSetting;
         const completionsSettingId = defaultChat.completionsEnablementSetting;
         const resource = EditorResourceAccessor.getOriginalUri(this.editorService.activeEditor, {
@@ -722,12 +969,12 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
                 });
                 return this.textResourceConfigurationService.updateValue(resource, nesSettingId, value);
             }
-        }, disposables);
+        });
         if (!completionsSettingAccessor.readSetting()) {
             container.classList.add("disabled");
             checkbox.disable();
         }
-        disposables.add(this.configurationService.onDidChangeConfiguration(e => {
+        this._store.add(this.configurationService.onDidChangeConfiguration(e => {
             if (e.affectsConfiguration(completionsSettingId)) {
                 if (completionsSettingAccessor.readSetting() && this.canUseChat()) {
                     checkbox.enable();
@@ -739,13 +986,13 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
             }
         }));
     }
-    createCompletionsSnooze(container, label, disposables) {
+    createCompletionsSnooze(container, label) {
         const isEnabled = () => {
             const completionsEnabled = isCompletionsEnabled(this.configurationService);
             const completionsEnabledActiveLanguage = isCompletionsEnabled(this.configurationService, this.editorService.activeTextEditorLanguageId);
             return completionsEnabled || completionsEnabledActiveLanguage;
         };
-        const button = disposables.add(( new Button(container, {
+        const button = this._store.add(( new Button(container, {
             disabled: !isEnabled(),
             ...defaultButtonStyles,
             hoverDelegate: nativeHoverDelegate,
@@ -753,12 +1000,12 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
         })));
         const timerDisplay = container.appendChild($("span.snooze-label"));
         const actionBar = container.appendChild($("div.snooze-action-bar"));
-        const toolbar = disposables.add(( new ActionBar(actionBar, {
+        const toolbar = this._store.add(( new ActionBar(actionBar, {
             hoverDelegate: nativeHoverDelegate
         })));
         const cancelAction = toAction({
             id: "workbench.action.cancelSnoozeStatusBarLink",
-            label: ( localize(6425, "Cancel Snooze")),
+            label: ( localize(6664, "Cancel Snooze")),
             run: () => this.inlineCompletionsService.cancelSnooze(),
             class: ThemeIcon.asClassName(Codicon.stopCircle)
         });
@@ -767,26 +1014,26 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
             toolbar.clear();
             const timeLeftMs = this.inlineCompletionsService.snoozeTimeLeft;
             if (!isEnabled || timeLeftMs <= 0) {
-                timerDisplay.textContent = ( localize(6426, "Hide suggestions for 5 min"));
+                timerDisplay.textContent = ( localize(6665, "Hide suggestions for 5 min"));
                 timerDisplay.title = "";
                 button.label = label;
-                button.setTitle(( localize(6427, "Hide inline suggestions for 5 min")));
+                button.setTitle(( localize(6666, "Hide inline suggestions for 5 min")));
                 return true;
             }
             const timeLeftSeconds = Math.ceil(timeLeftMs / 1000);
             const minutes = Math.floor(timeLeftSeconds / 60);
             const seconds = timeLeftSeconds % 60;
-            timerDisplay.textContent = `${minutes}:${seconds < 10 ? "0" : ""}${seconds} ${( localize(6428, "remaining"))}`;
-            timerDisplay.title = ( localize(6429, "Inline suggestions are hidden for the remaining duration"));
-            button.label = ( localize(6430, "+5 min"));
-            button.setTitle(( localize(6431, "Snooze additional 5 min")));
+            timerDisplay.textContent = `${minutes}:${seconds < 10 ? "0" : ""}${seconds} ${( localize(6667, "remaining"))}`;
+            timerDisplay.title = ( localize(6668, "Inline suggestions are hidden for the remaining duration"));
+            button.label = ( localize(6669, "+5 min"));
+            button.setTitle(( localize(6670, "Snooze additional 5 min")));
             toolbar.push([cancelAction], {
                 icon: true,
                 label: false
             });
             return false;
         };
-        const timerDisposables = disposables.add(( new DisposableStore()));
+        const timerDisposables = this._store.add(( new DisposableStore()));
         function updateIntervalTimer() {
             timerDisposables.clear();
             const enabled = isEnabled();
@@ -798,64 +1045,21 @@ let ChatStatusDashboard = class ChatStatusDashboard extends DomWidget {
             );
         }
         updateIntervalTimer();
-        disposables.add(button.onDidClick(() => {
+        this._store.add(button.onDidClick(() => {
             this.inlineCompletionsService.snooze();
             update(isEnabled());
         }));
-        disposables.add(this.configurationService.onDidChangeConfiguration(e => {
+        this._store.add(this.configurationService.onDidChangeConfiguration(e => {
             if (e.affectsConfiguration(defaultChat.completionsEnablementSetting)) {
                 button.enabled = isEnabled();
             }
             updateIntervalTimer();
         }));
-        disposables.add(this.inlineCompletionsService.onDidChangeIsSnoozing(e => {
+        this._store.add(this.inlineCompletionsService.onDidChangeIsSnoozing(() => {
             updateIntervalTimer();
         }));
     }
-    async showModelPicker(provider) {
-        if (!provider.modelInfo || !provider.setModelId) {
-            return;
-        }
-        const modelInfo = provider.modelInfo;
-        const items = ( modelInfo.models.map(model => ({
-            id: model.id,
-            label: model.name,
-            description: model.id === modelInfo.currentModelId ? ( localize(6432, "Currently selected")) : undefined,
-            picked: model.id === modelInfo.currentModelId
-        })));
-        const selected = await this.quickInputService.pick(items, {
-            placeHolder: ( localize(
-                6433,
-                "Select a model for {0}",
-                provider.displayName || "inline completions"
-            )),
-            canPickMany: false
-        });
-        if (selected && selected.id && selected.id !== modelInfo.currentModelId) {
-            await provider.setModelId(selected.id);
-        }
-        this.hoverService.hideHover(true);
-    }
-    async showProviderOptionPicker(provider, option) {
-        if (!provider.setProviderOption) {
-            return;
-        }
-        const items = ( option.values.map(value => ({
-            id: value.id,
-            label: value.label,
-            description: value.id === option.currentValueId ? ( localize(6434, "Currently selected")) : undefined,
-            picked: value.id === option.currentValueId
-        })));
-        const selected = await this.quickInputService.pick(items, {
-            placeHolder: ( localize(6435, "Select {0}", option.label)),
-            canPickMany: false
-        });
-        if (selected && selected.id && selected.id !== option.currentValueId) {
-            await provider.setProviderOption(option.id, selected.id);
-        }
-        this.hoverService.hideHover(true);
-    }
 };
-ChatStatusDashboard = ( __decorate([( __param(1, IChatEntitlementService)), ( __param(2, IChatStatusItemService)), ( __param(3, ICommandService)), ( __param(4, IConfigurationService)), ( __param(5, IEditorService)), ( __param(6, IHoverService)), ( __param(7, ILanguageService)), ( __param(8, IOpenerService)), ( __param(9, ITelemetryService)), ( __param(10, ITextResourceConfigurationService)), ( __param(11, IInlineCompletionsService)), ( __param(12, IMarkdownRendererService)), ( __param(13, ILanguageFeaturesService)), ( __param(14, IQuickInputService))], ChatStatusDashboard));
+ChatStatusDashboard = ChatStatusDashboard_1 = ( __decorate([( __param(1, IChatEntitlementService)), ( __param(2, IChatStatusItemService)), ( __param(3, ICommandService)), ( __param(4, IConfigurationService)), ( __param(5, IEditorService)), ( __param(6, IHoverService)), ( __param(7, ILanguageService)), ( __param(8, IOpenerService)), ( __param(9, ITelemetryService)), ( __param(10, ITextResourceConfigurationService)), ( __param(11, IInlineCompletionsService)), ( __param(12, IMarkdownRendererService)), ( __param(13, ILanguageFeaturesService)), ( __param(14, IContextViewService)), ( __param(15, IStorageService))], ChatStatusDashboard));
 
 export { ChatStatusDashboard };