feat: implement dynamic chart line management with UI controls, internationalization, and enhanced data handling

app.js

@@ -524,6 +524,8 @@ class CLIProxyManager {
         const tokensDayBtn = document.getElementById('tokens-day-btn');
         const costHourBtn = document.getElementById('cost-hour-btn');
         const costDayBtn = document.getElementById('cost-day-btn');
+        const addChartLineBtn = document.getElementById('add-chart-line');
+        const removeChartLineBtn = document.getElementById('remove-chart-line');
         const chartLineSelects = document.querySelectorAll('.chart-line-select');
         const modelPriceForm = document.getElementById('model-price-form');
         const resetModelPricesBtn = document.getElementById('reset-model-prices');
@@ -550,6 +552,12 @@ class CLIProxyManager {
         if (costDayBtn) {
             costDayBtn.addEventListener('click', () => this.switchCostPeriod('day'));
         }
+        if (addChartLineBtn) {
+            addChartLineBtn.addEventListener('click', () => this.changeChartLineCount(1));
+        }
+        if (removeChartLineBtn) {
+            removeChartLineBtn.addEventListener('click', () => this.changeChartLineCount(-1));
+        }
         if (chartLineSelects.length) {
             chartLineSelects.forEach(select => {
                 select.addEventListener('change', (event) => {
@@ -558,6 +566,7 @@ class CLIProxyManager {
                 });
             });
         }
+        this.updateChartLineControlsUI();
         if (modelPriceForm) {
             modelPriceForm.addEventListener('submit', (event) => {
                 event.preventDefault();
@@ -661,12 +670,20 @@ class CLIProxyManager {
     tokensChart = null;
     costChart = null;
     currentUsageData = null;
-    chartLineSelections = ['none', 'none', 'none'];
-    chartLineSelectIds = ['chart-line-select-0', 'chart-line-select-1', 'chart-line-select-2'];
+    chartLineMaxCount = 9;
+    chartLineVisibleCount = 3;
+    chartLineSelections = Array(3).fill('none');
+    chartLineSelectIds = Array.from({ length: 9 }, (_, idx) => `chart-line-select-${idx}`);
     chartLineStyles = [
         { borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)' },
         { borderColor: '#a855f7', backgroundColor: 'rgba(168, 85, 247, 0.15)' },
-        { borderColor: '#10b981', backgroundColor: 'rgba(16, 185, 129, 0.15)' }
+        { borderColor: '#10b981', backgroundColor: 'rgba(16, 185, 129, 0.15)' },
+        { borderColor: '#f97316', backgroundColor: 'rgba(249, 115, 22, 0.15)' },
+        { borderColor: '#ec4899', backgroundColor: 'rgba(236, 72, 153, 0.15)' },
+        { borderColor: '#14b8a6', backgroundColor: 'rgba(20, 184, 166, 0.15)' },
+        { borderColor: '#8b5cf6', backgroundColor: 'rgba(139, 92, 246, 0.15)' },
+        { borderColor: '#f59e0b', backgroundColor: 'rgba(245, 158, 11, 0.15)' },
+        { borderColor: '#22c55e', backgroundColor: 'rgba(34, 197, 94, 0.15)' }
     ];
     modelPriceStorageKey = 'cli-proxy-model-prices-v2';
     modelPrices = {};

i18n.js

@@ -224,6 +224,9 @@ const i18n = {
             'ai_providers.openai_models_fetch_error': '获取模型失败',
             'ai_providers.openai_models_fetch_back': '返回编辑',
             'ai_providers.openai_models_fetch_apply': '添加所选模型',
+            'ai_providers.openai_models_search_label': '搜索模型',
+            'ai_providers.openai_models_search_placeholder': '按名称、别名或描述筛选',
+            'ai_providers.openai_models_search_empty': '没有匹配的模型，请更换关键字试试。',
             'ai_providers.openai_models_fetch_invalid_url': '请先填写有效的 Base URL',
             'ai_providers.openai_models_fetch_added': '已添加 {count} 个新模型',
             'ai_providers.openai_edit_modal_title': '编辑OpenAI兼容提供商',
@@ -460,7 +463,17 @@ const i18n = {
             'usage_stats.chart_line_label_1': '曲线 1',
             'usage_stats.chart_line_label_2': '曲线 2',
             'usage_stats.chart_line_label_3': '曲线 3',
+            'usage_stats.chart_line_label_4': '曲线 4',
+            'usage_stats.chart_line_label_5': '曲线 5',
+            'usage_stats.chart_line_label_6': '曲线 6',
+            'usage_stats.chart_line_label_7': '曲线 7',
+            'usage_stats.chart_line_label_8': '曲线 8',
+            'usage_stats.chart_line_label_9': '曲线 9',
             'usage_stats.chart_line_hidden': '不显示',
+            'usage_stats.chart_line_actions_label': '曲线数量',
+            'usage_stats.chart_line_add': '增加曲线',
+            'usage_stats.chart_line_remove': '减少曲线',
+            'usage_stats.chart_line_hint': '最多同时显示 9 条模型曲线',
             'usage_stats.no_data': '暂无数据',
             'usage_stats.loading_error': '加载失败',
             'usage_stats.api_endpoint': 'API端点',
@@ -843,6 +856,9 @@ const i18n = {
             'ai_providers.openai_models_fetch_error': 'Failed to fetch models',
             'ai_providers.openai_models_fetch_back': 'Back to edit',
             'ai_providers.openai_models_fetch_apply': 'Add selected models',
+            'ai_providers.openai_models_search_label': 'Search models',
+            'ai_providers.openai_models_search_placeholder': 'Filter by name, alias, or description',
+            'ai_providers.openai_models_search_empty': 'No models match your search. Try a different keyword.',
             'ai_providers.openai_models_fetch_invalid_url': 'Please enter a valid Base URL first',
             'ai_providers.openai_models_fetch_added': '{count} new models added',
             'ai_providers.openai_edit_modal_title': 'Edit OpenAI Compatible Provider',
@@ -1078,7 +1094,17 @@ const i18n = {
             'usage_stats.chart_line_label_1': 'Line 1',
             'usage_stats.chart_line_label_2': 'Line 2',
             'usage_stats.chart_line_label_3': 'Line 3',
+            'usage_stats.chart_line_label_4': 'Line 4',
+            'usage_stats.chart_line_label_5': 'Line 5',
+            'usage_stats.chart_line_label_6': 'Line 6',
+            'usage_stats.chart_line_label_7': 'Line 7',
+            'usage_stats.chart_line_label_8': 'Line 8',
+            'usage_stats.chart_line_label_9': 'Line 9',
             'usage_stats.chart_line_hidden': 'Hide',
+            'usage_stats.chart_line_actions_label': 'Lines to display',
+            'usage_stats.chart_line_add': 'Add line',
+            'usage_stats.chart_line_remove': 'Remove line',
+            'usage_stats.chart_line_hint': 'Show up to 9 model lines at once',
             'usage_stats.no_data': 'No Data Available',
             'usage_stats.loading_error': 'Loading Failed',
             'usage_stats.api_endpoint': 'API Endpoint',

index.html

@@ -958,25 +958,76 @@
                             </div>
 
                             <!-- 图表曲线选择 -->
-                            <div class="usage-filter-bar">
-                                <div class="usage-filter-group">
+                            <div class="usage-filter-bar" id="chart-line-bar">
+                                <div class="usage-filter-group usage-filter-actions">
+                                    <label data-i18n="usage_stats.chart_line_actions_label">曲线数量</label>
+                                    <div class="chart-line-actions">
+                                        <button type="button" class="btn btn-small" id="add-chart-line">
+                                            <i class="fas fa-plus"></i>
+                                            <span data-i18n="usage_stats.chart_line_add">增加曲线</span>
+                                        </button>
+                                        <button type="button" class="btn btn-small btn-secondary" id="remove-chart-line">
+                                            <i class="fas fa-minus"></i>
+                                            <span data-i18n="usage_stats.chart_line_remove">减少曲线</span>
+                                        </button>
+                                        <span class="chart-line-count" id="chart-line-count">3/9</span>
+                                    </div>
+                                    <div class="chart-line-hint" data-i18n="usage_stats.chart_line_hint">最多显示 9 条模型曲线</div>
+                                </div>
+                                <div class="usage-filter-group chart-line-group" data-line-index="0">
                                     <label for="chart-line-select-0" data-i18n="usage_stats.chart_line_label_1">曲线 1</label>
                                     <select id="chart-line-select-0" class="model-filter-select chart-line-select" data-line-index="0" disabled>
                                         <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
                                     </select>
                                 </div>
-                                <div class="usage-filter-group">
+                                <div class="usage-filter-group chart-line-group" data-line-index="1">
                                     <label for="chart-line-select-1" data-i18n="usage_stats.chart_line_label_2">曲线 2</label>
                                     <select id="chart-line-select-1" class="model-filter-select chart-line-select" data-line-index="1" disabled>
                                         <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
                                     </select>
                                 </div>
-                                <div class="usage-filter-group">
+                                <div class="usage-filter-group chart-line-group" data-line-index="2">
                                     <label for="chart-line-select-2" data-i18n="usage_stats.chart_line_label_3">曲线 3</label>
                                     <select id="chart-line-select-2" class="model-filter-select chart-line-select" data-line-index="2" disabled>
                                         <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
                                     </select>
                                 </div>
+                                <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="3">
+                                    <label for="chart-line-select-3" data-i18n="usage_stats.chart_line_label_4">曲线 4</label>
+                                    <select id="chart-line-select-3" class="model-filter-select chart-line-select" data-line-index="3" disabled>
+                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                    </select>
+                                </div>
+                                <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="4">
+                                    <label for="chart-line-select-4" data-i18n="usage_stats.chart_line_label_5">曲线 5</label>
+                                    <select id="chart-line-select-4" class="model-filter-select chart-line-select" data-line-index="4" disabled>
+                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                    </select>
+                                </div>
+                                <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="5">
+                                    <label for="chart-line-select-5" data-i18n="usage_stats.chart_line_label_6">曲线 6</label>
+                                    <select id="chart-line-select-5" class="model-filter-select chart-line-select" data-line-index="5" disabled>
+                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                    </select>
+                                </div>
+                                <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="6">
+                                    <label for="chart-line-select-6" data-i18n="usage_stats.chart_line_label_7">曲线 7</label>
+                                    <select id="chart-line-select-6" class="model-filter-select chart-line-select" data-line-index="6" disabled>
+                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                    </select>
+                                </div>
+                                <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="7">
+                                    <label for="chart-line-select-7" data-i18n="usage_stats.chart_line_label_8">曲线 8</label>
+                                    <select id="chart-line-select-7" class="model-filter-select chart-line-select" data-line-index="7" disabled>
+                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                    </select>
+                                </div>
+                                <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="8">
+                                    <label for="chart-line-select-8" data-i18n="usage_stats.chart_line_label_9">曲线 9</label>
+                                    <select id="chart-line-select-8" class="model-filter-select chart-line-select" data-line-index="8" disabled>
+                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                    </select>
+                                </div>
                             </div>
 
                             <!-- 图表区域 -->

src/modules/ai-providers.js

@@ -1152,6 +1152,10 @@ function ensureOpenAIModelDiscoveryCard(manager) {
                     <button type="button" class="btn btn-secondary" id="openai-model-discovery-refresh">${i18n.t('ai_providers.openai_models_fetch_refresh')}</button>
                 </div>
             </div>
+            <div class="form-group">
+                <label for="openai-model-discovery-search">${i18n.t('ai_providers.openai_models_search_label')}</label>
+                <input type="text" id="openai-model-discovery-search" placeholder="${i18n.t('ai_providers.openai_models_search_placeholder')}">
+            </div>
             <div id="openai-model-discovery-status" class="model-discovery-status"></div>
             <div id="openai-model-discovery-list" class="model-discovery-list"></div>
             <div class="modal-actions">
@@ -1174,6 +1178,13 @@ function ensureOpenAIModelDiscoveryCard(manager) {
     bind('openai-model-discovery-cancel', () => manager.closeOpenAIModelDiscovery());
     bind('openai-model-discovery-refresh', () => manager.refreshOpenAIModelDiscovery());
     bind('openai-model-discovery-apply', () => manager.applyOpenAIModelDiscoverySelection());
+    const searchInput = document.getElementById('openai-model-discovery-search');
+    if (searchInput) {
+        searchInput.addEventListener('input', (event) => {
+            const query = event?.target?.value || '';
+            manager.setOpenAIModelDiscoverySearch(query);
+        });
+    }
 
     return overlay;
 }
@@ -1185,10 +1196,30 @@ export function setOpenAIModelDiscoveryStatus(message = '', type = 'info') {
     status.className = `model-discovery-status ${type}`;
 }
 
+export function setOpenAIModelDiscoverySearch(query = '') {
+    if (!this.openAIModelDiscoveryContext) return;
+    const normalized = (query || '').trim();
+    this.openAIModelDiscoveryContext.modelSearchQuery = normalized;
+    const models = this.openAIModelDiscoveryContext.discoveredModels || [];
+    this.renderOpenAIModelDiscoveryList(models);
+}
+
 export function renderOpenAIModelDiscoveryList(models = []) {
     const list = document.getElementById('openai-model-discovery-list');
     if (!list) return;
 
+    const context = this.openAIModelDiscoveryContext || {};
+    const filter = (context.modelSearchQuery || '').trim().toLowerCase();
+    const filtered = models
+        .map((model, index) => ({ model, index }))
+        .filter(({ model }) => {
+            if (!filter) return true;
+            const name = (model?.name || '').toLowerCase();
+            const alias = (model?.alias || '').toLowerCase();
+            const desc = (model?.description || '').toLowerCase();
+            return name.includes(filter) || alias.includes(filter) || desc.includes(filter);
+        });
+
     if (!models.length) {
         list.innerHTML = `
             <div class="model-discovery-empty">
@@ -1199,10 +1230,20 @@ export function renderOpenAIModelDiscoveryList(models = []) {
         return;
     }
 
-    list.innerHTML = models.map((model, index) => {
-        const name = this.escapeHtml(model.name || '');
-        const alias = model.alias ? `<span class="model-discovery-alias">${this.escapeHtml(model.alias)}</span>` : '';
-        const desc = model.description ? `<div class="model-discovery-desc">${this.escapeHtml(model.description)}</div>` : '';
+    if (!filtered.length) {
+        list.innerHTML = `
+            <div class="model-discovery-empty">
+                <i class="fas fa-search"></i>
+                <span>${i18n.t('ai_providers.openai_models_search_empty')}</span>
+            </div>
+        `;
+        return;
+    }
+
+    list.innerHTML = filtered.map(({ model, index }) => {
+        const name = this.escapeHtml(model?.name || '');
+        const alias = model?.alias ? `<span class="model-discovery-alias">${this.escapeHtml(model.alias)}</span>` : '';
+        const desc = model?.description ? `<div class="model-discovery-desc">${this.escapeHtml(model.description)}</div>` : '';
         return `
             <label class="model-discovery-row">
                 <input type="checkbox" class="model-discovery-checkbox" data-model-index="${index}">
@@ -1244,13 +1285,18 @@ export function openOpenAIModelDiscovery(mode = 'new') {
         ...context,
         endpoint,
         headers,
-        discoveredModels: []
+        discoveredModels: [],
+        modelSearchQuery: ''
     };
 
     const urlInput = document.getElementById('openai-model-discovery-url');
     if (urlInput) {
         urlInput.value = endpoint;
     }
+    const searchInput = document.getElementById('openai-model-discovery-search');
+    if (searchInput) {
+        searchInput.value = '';
+    }
 
     this.renderOpenAIModelDiscoveryList([]);
     this.setOpenAIModelDiscoveryStatus(i18n.t('ai_providers.openai_models_fetch_loading'), 'info');
@@ -1688,6 +1734,7 @@ export const aiProvidersModule = {
     refreshOpenAIModelDiscovery,
     renderOpenAIModelDiscoveryList,
     setOpenAIModelDiscoveryStatus,
+    setOpenAIModelDiscoverySearch,
     applyOpenAIModelDiscoverySelection,
     closeOpenAIModelDiscovery,
     addModelField,

src/modules/auth-files.js

@@ -1049,6 +1049,50 @@ export const authFilesModule = {
         return normalized;
     },
 
+    resolveOauthExcludedFromConfig(config = null) {
+        const sources = [];
+        if (config && typeof config === 'object') {
+            sources.push(config);
+        }
+        if (this.configCache && typeof this.configCache === 'object') {
+            if (this.configCache['oauth-excluded-models'] !== undefined) {
+                sources.push({ 'oauth-excluded-models': this.configCache['oauth-excluded-models'] });
+            }
+            if (this.configCache['__full__']) {
+                sources.push(this.configCache['__full__']);
+            }
+        }
+
+        for (const source of sources) {
+            if (!source || typeof source !== 'object') continue;
+            if (Object.prototype.hasOwnProperty.call(source, 'oauth-excluded-models')) {
+                return {
+                    map: this.normalizeOauthExcludedMap(source),
+                    found: true
+                };
+            }
+        }
+
+        return { map: {}, found: false };
+    },
+
+    applyOauthExcludedFromConfig(config = null, options = {}) {
+        const { render = true } = options || {};
+        const { map, found } = this.resolveOauthExcludedFromConfig(config);
+        if (!found) {
+            return false;
+        }
+
+        this.oauthExcludedModels = map;
+        this._oauthExcludedLoading = false;
+        this.setOauthExcludedStatus('');
+        this.updateOauthExcludedButtonsState(false);
+        if (render) {
+            this.renderOauthExcludedModels();
+        }
+        return true;
+    },
+
     getFilteredOauthExcludedMap(filterType = this.currentAuthFileFilter) {
         const map = this.oauthExcludedModels || {};
         if (!map || typeof map !== 'object') {
@@ -1407,9 +1451,36 @@ export const authFilesModule = {
         this.renderOauthExcludedModels();
 
         try {
-            const data = await this.makeRequest('/oauth-excluded-models');
-            this.oauthExcludedModels = this.normalizeOauthExcludedMap(data);
-            this.refreshOauthProviderOptions();
+            let targetMap = {};
+            let hasData = false;
+
+            if (!forceRefresh) {
+                const { map, found } = this.resolveOauthExcludedFromConfig();
+                if (found) {
+                    targetMap = map;
+                    hasData = true;
+                }
+            }
+
+            if (!hasData) {
+                try {
+                    const configSection = await this.getConfig('oauth-excluded-models', forceRefresh);
+                    if (configSection !== undefined) {
+                        targetMap = this.normalizeOauthExcludedMap(configSection);
+                        hasData = true;
+                    }
+                } catch (configError) {
+                    console.warn('从配置获取 OAuth 排除列表失败，尝试回退接口:', configError);
+                }
+            }
+
+            if (!hasData) {
+                const data = await this.makeRequest('/oauth-excluded-models');
+                targetMap = this.normalizeOauthExcludedMap(data);
+                hasData = true;
+            }
+
+            this.oauthExcludedModels = targetMap;
             this.setOauthExcludedStatus('');
         } catch (error) {
             console.error('加载 OAuth 排除列表失败:', error);
@@ -1501,6 +1572,7 @@ export const authFilesModule = {
         }
         this.events.on('data:config-loaded', async (event) => {
             const detail = event?.detail || {};
+            const config = detail.config || {};
             const keyStats = detail.keyStats || null;
             try {
                 await this.loadAuthFiles(keyStats);
@@ -1508,7 +1580,10 @@ export const authFilesModule = {
                 console.error('加载认证文件失败:', error);
             }
             try {
-                await this.loadOauthExcludedModels(true);
+                const applied = this.applyOauthExcludedFromConfig(config, { render: true });
+                if (!applied) {
+                    await this.loadOauthExcludedModels(true);
+                }
             } catch (error) {
                 console.error('加载 OAuth 排除列表失败:', error);
             }
@@ -1518,7 +1593,9 @@ export const authFilesModule = {
             const detail = event?.detail || {};
             this.updateOauthExcludedButtonsState(false);
             if (detail.isConnected) {
-                this.loadOauthExcludedModels(true);
+                if (!this.applyOauthExcludedFromConfig(null, { render: true })) {
+                    this.renderOauthExcludedModels();
+                }
             } else {
                 this.renderOauthExcludedModels();
             }

src/modules/config-editor.js

@@ -32,7 +32,6 @@ export const configEditorModule = {
                 }
             });
 
-            editorInstance.setSize('100%', '100%');
             editorInstance.on('change', () => {
                 this.isConfigEditorDirty = true;
                 this.updateConfigEditorStatus('info', i18n.t('config_management.status_dirty'));

src/modules/usage.js

@@ -1,6 +1,8 @@
 const DEFAULT_MODEL_PRICE_STORAGE_KEY = 'cli-proxy-model-prices-v2';
 const LEGACY_MODEL_PRICE_STORAGE_KEY = 'cli-proxy-model-prices';
 const TOKENS_PER_PRICE_UNIT = 1_000_000;
+const DEFAULT_CHART_LINE_COUNT = 3;
+const MIN_CHART_LINE_COUNT = 1;
 
 // 获取API密钥的统计信息
 export async function getKeyStats(usageData = null) {
@@ -214,14 +216,101 @@ export function getModelNamesFromUsage(usage) {
     return Array.from(names).sort((a, b) => a.localeCompare(b));
 }
 
+export function getChartLineMaxCount() {
+    const idCount = Array.isArray(this.chartLineSelectIds) ? this.chartLineSelectIds.length : 0;
+    const configuredMax = Number(this.chartLineMaxCount);
+    const fallback = idCount || DEFAULT_CHART_LINE_COUNT;
+    const resolvedMax = Number.isFinite(configuredMax) ? configuredMax : fallback;
+    if (idCount > 0) {
+        return Math.max(MIN_CHART_LINE_COUNT, Math.min(resolvedMax, idCount));
+    }
+    return Math.max(MIN_CHART_LINE_COUNT, resolvedMax);
+}
+
+export function getVisibleChartLineCount() {
+    const maxCount = this.getChartLineMaxCount();
+    const stored = Number(this.chartLineVisibleCount);
+    const base = Number.isFinite(stored)
+        ? stored
+        : (Array.isArray(this.chartLineSelections) ? this.chartLineSelections.length : DEFAULT_CHART_LINE_COUNT);
+    const resolved = Math.min(Math.max(base, MIN_CHART_LINE_COUNT), maxCount);
+    this.chartLineVisibleCount = resolved;
+    return resolved;
+}
+
+export function ensureChartLineSelectionLength(targetLength = null) {
+    const maxCount = this.getChartLineMaxCount();
+    const desiredLength = Math.min(
+        Math.max(targetLength ?? this.getVisibleChartLineCount(), MIN_CHART_LINE_COUNT),
+        maxCount
+    );
+
+    if (!Array.isArray(this.chartLineSelections)) {
+        this.chartLineSelections = Array(desiredLength).fill('none');
+        return this.chartLineSelections;
+    }
+
+    const trimmed = this.chartLineSelections.slice(0, maxCount);
+    if (trimmed.length < desiredLength) {
+        this.chartLineSelections = [...trimmed, ...Array(desiredLength - trimmed.length).fill('none')];
+    } else if (trimmed.length > desiredLength) {
+        this.chartLineSelections = trimmed.slice(0, desiredLength);
+    } else {
+        this.chartLineSelections = trimmed;
+    }
+    return this.chartLineSelections;
+}
+
+export function updateChartLineControlsUI() {
+    const maxCount = this.getChartLineMaxCount();
+    const visibleCount = this.getVisibleChartLineCount();
+    const counter = document.getElementById('chart-line-count');
+    if (counter) {
+        counter.textContent = `${visibleCount}/${maxCount}`;
+    }
+    const addBtn = document.getElementById('add-chart-line');
+    const removeBtn = document.getElementById('remove-chart-line');
+    if (addBtn) {
+        addBtn.disabled = visibleCount >= maxCount;
+    }
+    if (removeBtn) {
+        removeBtn.disabled = visibleCount <= MIN_CHART_LINE_COUNT;
+    }
+}
+
+export function setChartLineVisibleCount(count) {
+    const maxCount = this.getChartLineMaxCount();
+    const nextCount = Math.min(Math.max(count, MIN_CHART_LINE_COUNT), maxCount);
+    const current = this.getVisibleChartLineCount();
+    if (nextCount === current) {
+        this.updateChartLineControlsUI();
+        return;
+    }
+    this.chartLineVisibleCount = nextCount;
+    this.ensureChartLineSelectionLength(nextCount);
+    this.updateChartLineSelectors(this.currentUsageData);
+    this.refreshChartsForSelections();
+}
+
+export function changeChartLineCount(delta = 0) {
+    const current = this.getVisibleChartLineCount();
+    this.setChartLineVisibleCount(current + delta);
+}
+
 export function updateChartLineSelectors(usage) {
     const modelNames = this.getModelNamesFromUsage(usage);
     const selectors = this.chartLineSelectIds
         .map(id => document.getElementById(id))
         .filter(Boolean);
 
+    const availableCount = selectors.length || this.getChartLineMaxCount();
+    const visibleCount = Math.min(this.getVisibleChartLineCount(), availableCount);
+    this.chartLineVisibleCount = visibleCount;
+    this.ensureChartLineSelectionLength(visibleCount);
+
     if (!selectors.length) {
-        this.chartLineSelections = ['none', 'none', 'none'];
+        this.chartLineSelections = Array(visibleCount).fill('none');
+        this.updateChartLineControlsUI();
         return;
     }
 
@@ -241,23 +330,34 @@ export function updateChartLineSelectors(usage) {
     };
 
     const hasModels = modelNames.length > 0;
-    selectors.forEach(select => {
+    selectors.forEach((select, index) => {
+        const group = select.closest('.chart-line-group');
+        const isVisible = index < visibleCount;
+        if (group) {
+            group.classList.toggle('chart-line-hidden', !isVisible);
+        }
         select.innerHTML = '';
         select.appendChild(optionsFragment());
-        select.disabled = !hasModels;
+        select.disabled = !hasModels || !isVisible;
+        if (!isVisible) {
+            select.value = 'none';
+        }
     });
 
     if (!hasModels) {
-        this.chartLineSelections = ['none', 'none', 'none'];
-        selectors.forEach(select => {
+        this.chartLineSelections = Array(visibleCount).fill('none');
+        selectors.forEach((select, index) => {
+            const group = select.closest('.chart-line-group');
+            if (group) {
+                group.classList.toggle('chart-line-hidden', index >= visibleCount);
+            }
             select.value = 'none';
         });
+        this.updateChartLineControlsUI();
         return;
     }
 
-    const nextSelections = Array.isArray(this.chartLineSelections)
-        ? [...this.chartLineSelections]
-        : ['none', 'none', 'none'];
+    const nextSelections = this.ensureChartLineSelectionLength(visibleCount).slice(0, visibleCount);
 
     const validNames = new Set(modelNames);
     let hasActiveSelection = false;
@@ -280,17 +380,17 @@ export function updateChartLineSelectors(usage) {
     this.chartLineSelections = nextSelections;
     selectors.forEach((select, index) => {
         const value = this.chartLineSelections[index] || 'none';
-        select.value = value;
+        select.value = index < visibleCount ? value : 'none';
     });
+    this.updateChartLineControlsUI();
 }
 
 export function handleChartLineSelectionChange(index, value) {
-    if (!Array.isArray(this.chartLineSelections)) {
-        this.chartLineSelections = ['none', 'none', 'none'];
-    }
-    if (index < 0 || index >= this.chartLineSelections.length) {
+    const visibleCount = this.getVisibleChartLineCount();
+    if (index < 0 || index >= visibleCount) {
         return;
     }
+    this.ensureChartLineSelectionLength(visibleCount);
     const normalized = value || 'none';
     if (this.chartLineSelections[index] === normalized) {
         return;
@@ -324,10 +424,9 @@ export function refreshChartsForSelections() {
 }
 
 export function getActiveChartLineSelections() {
-    if (!Array.isArray(this.chartLineSelections)) {
-        this.chartLineSelections = ['none', 'none', 'none'];
-    }
-    return this.chartLineSelections
+    const visibleCount = this.getVisibleChartLineCount();
+    const selections = this.ensureChartLineSelectionLength(visibleCount).slice(0, visibleCount);
+    return selections
         .map((value, index) => ({ model: value, index }))
         .filter(item => item.model && item.model !== 'none');
 }
@@ -763,7 +862,7 @@ export function buildChartDataForMetric(period = 'day', metric = 'requests') {
     const activeSelections = this.getActiveChartLineSelections();
     const datasets = activeSelections.map(selection => {
         const values = dataByModel.get(selection.model) || new Array(labels.length).fill(0);
-        const style = this.chartLineStyles[selection.index] || this.chartLineStyles[0];
+        const style = this.chartLineStyles[selection.index % this.chartLineStyles.length] || this.chartLineStyles[0];
         return {
             label: selection.model,
             data: values,
@@ -1361,6 +1460,12 @@ export const usageModule = {
     loadUsageStats,
     updateUsageOverview,
     getModelNamesFromUsage,
+    getChartLineMaxCount,
+    getVisibleChartLineCount,
+    ensureChartLineSelectionLength,
+    updateChartLineControlsUI,
+    setChartLineVisibleCount,
+    changeChartLineCount,
     updateChartLineSelectors,
     handleChartLineSelectionChange,
     refreshChartsForSelections,

styles.css

@@ -1404,8 +1404,6 @@ textarea::placeholder {
 
 .yaml-editor {
     width: 100%;
-    flex: 1;
-    min-height: 520px;
     border: 1px solid var(--border-primary);
     border-radius: 6px;
     padding: 12px 14px;
@@ -1417,10 +1415,12 @@ textarea::placeholder {
     resize: vertical;
 }
 
+#config-management .yaml-editor {
+    height: 520px;
+}
+
 #config-management .CodeMirror {
-    flex: 1;
-    min-height: 520px;
-    height: 100%;
+    height: 520px;
     font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
     font-size: 14px;
     line-height: 1.5;
@@ -1433,7 +1433,7 @@ textarea::placeholder {
 #config-management .CodeMirror-scroll {
     min-height: 0;
     height: 100%;
-    max-height: none;
+    max-height: 100%;
     overflow-y: auto;
     overscroll-behavior: contain;
 }
@@ -1484,9 +1484,9 @@ textarea::placeholder {
         min-height: 360px;
     }
 
-    .yaml-editor,
+    #config-management .yaml-editor,
     #config-management .CodeMirror {
-        min-height: 360px;
+        height: 360px;
     }
 }
 
@@ -3098,12 +3098,41 @@ input:checked+.slider:before {
     min-width: 220px;
 }
 
+.usage-filter-actions {
+    min-width: 260px;
+}
+
 .usage-filter-group label {
     font-weight: 600;
     color: var(--text-secondary);
     font-size: 14px;
 }
 
+.chart-line-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.chart-line-count {
+    padding: 6px 10px;
+    border-radius: 20px;
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+    font-size: 13px;
+    border: 1px solid var(--border-color);
+}
+
+.chart-line-hint {
+    color: var(--text-secondary);
+    font-size: 13px;
+}
+
+.chart-line-group.chart-line-hidden {
+    display: none;
+}
+
 .model-filter-select {
     border: 1px solid var(--border-color);
     border-radius: 10px;