UI改进

client/src/ts/utils/modelManageDialog.ts

@@ -0,0 +1,271 @@
+/**
+ * Model Management 弹窗
+ */
+import * as d3 from 'd3';
+import { showDialog, showAlertDialog } from '../ui/dialog';
+import { tr } from '../lang/i18n-lite';
+import type { TextAnalysisAPI } from '../api/GLTR_API';
+
+export async function showModelManageDialog(api: TextAnalysisAPI): Promise<void> {
+    try {
+        const [availableModelsResp, currentModelResp] = await Promise.all([
+            api.getAvailableModels(),
+            api.getCurrentModel(),
+        ]);
+
+        if (!availableModelsResp.success || !currentModelResp.success) {
+            showAlertDialog(tr('Error'), 'Failed to load model management information');
+            return;
+        }
+
+        const models = availableModelsResp.models;
+        let currentModel = currentModelResp.model;
+        let deviceType = currentModelResp.device_type;
+        let currentUseInt8 = currentModelResp.use_int8;
+        let currentUseBfloat16 = currentModelResp.use_bfloat16;
+        let isLoading = currentModelResp.loading;
+
+        let pollId: number | null = null;
+        let setConfirmBtnState: (enabled: boolean, queuing?: boolean) => void = () => {};
+        showDialog({
+            title: 'Model Management',
+            loadingConfirmText: 'Applying...',
+            content: (dialog, setConfirmButtonState) => {
+                setConfirmBtnState = setConfirmButtonState ?? (() => {});
+                const container = dialog.append('div').attr('class', 'dialog-form-container');
+
+                const deviceInfo = container
+                    .append('div')
+                    .attr('class', 'device-info')
+                    .style('margin-bottom', '12px')
+                    .style('padding', '8px')
+                    .style('background-color', 'var(--panel-bg)')
+                    .style('border-radius', '4px')
+                    .style('font-size', '12px');
+
+                const titleRow = deviceInfo
+                    .append('div')
+                    .style('display', 'flex')
+                    .style('justify-content', 'space-between')
+                    .style('align-items', 'center')
+                    .style('margin-bottom', '6px');
+
+                const modelTitle = titleRow.append('div').style('font-weight', 'bold').style('color', 'var(--primary-color, #2196F3)');
+
+                const refreshBtn = titleRow.append('button').attr('class', 'refresh-btn').attr('title', 'Refresh').text('↻');
+
+                const hideDisplay = () => {
+                    deviceInfo.style('opacity', '0');
+                };
+
+                const updateDisplay = () => {
+                    modelTitle.text(`Current Model: ${currentModel}${isLoading ? ' (Loading...)' : ''}`);
+                    deviceInfo.select('.device-type').text(`Device Type: ${deviceType.toUpperCase()}`);
+                    const currentQuantization = currentUseInt8
+                        ? 'INT8'
+                        : currentUseBfloat16
+                          ? 'bfloat16'
+                          : deviceType === 'cpu'
+                            ? 'float32'
+                            : 'float16';
+                    deviceInfo.select('.quantization').text(`Current Quantization: ${currentQuantization}`);
+                    deviceInfo.style('opacity', '1');
+                };
+
+                deviceInfo.append('div').attr('class', 'device-type');
+                deviceInfo.append('div').attr('class', 'quantization');
+                updateDisplay();
+
+                const fetchAndUpdate = async () => {
+                    hideDisplay();
+                    try {
+                        const resp = await api.getCurrentModel();
+                        if (resp.success) {
+                            currentModel = resp.model;
+                            deviceType = resp.device_type;
+                            currentUseInt8 = resp.use_int8;
+                            currentUseBfloat16 = resp.use_bfloat16;
+                            isLoading = resp.loading;
+                            updateDisplay();
+                        }
+                    } catch {
+                        // 未收到或失败不恢复，保持隐藏
+                    }
+                };
+
+                refreshBtn.on('click', async () => {
+                    refreshBtn.property('disabled', true).text('…');
+                    await fetchAndUpdate();
+                    refreshBtn.property('disabled', false).text('↻');
+                });
+
+                const overlay = deviceInfo.node()?.closest('.dialog-overlay');
+                const pollMs = 2000;
+                pollId = window.setInterval(async () => {
+                    if (!overlay?.isConnected) {
+                        if (pollId != null) window.clearInterval(pollId);
+                        pollId = null;
+                        return;
+                    }
+                    await fetchAndUpdate();
+                }, pollMs);
+
+                container.append('label').attr('class', 'dialog-label').style('margin-top', '12px').text('Select model:');
+
+                const modelList = container
+                    .append('div')
+                    .attr('class', 'model-list')
+                    .style('max-height', '200px')
+                    .style('overflow-y', 'auto')
+                    .style('margin-top', '8px');
+
+                let selectedModel = currentModel;
+
+                models.forEach((model) => {
+                    const modelItem = modelList
+                        .append('div')
+                        .attr('class', 'model-item')
+                        .style('padding', '8px 12px')
+                        .style('margin', '4px 0')
+                        .style('border', '1px solid var(--border-color, #ddd)')
+                        .style('border-radius', '4px')
+                        .style('cursor', 'pointer')
+                        .style('transition', 'background-color 0.2s')
+                        .classed('current-model', model === currentModel);
+
+                    if (model === currentModel) {
+                        modelItem.style('background-color', 'var(--bg-hover, #f0f0f0)').style('font-weight', 'bold');
+                    }
+
+                    modelItem.append('span').text(model);
+
+                    modelItem.on('click', function () {
+                        selectedModel = model;
+                        modelList.selectAll('.model-item').style('background-color', null).style('font-weight', null);
+                        d3.select(this).style('background-color', 'var(--bg-hover, #f0f0f0)').style('font-weight', 'bold');
+                    });
+
+                    modelItem
+                        .on('mouseenter', function () {
+                            if (model !== selectedModel) {
+                                d3.select(this).style('background-color', 'var(--bg-hover-light, #f8f8f8)');
+                            }
+                        })
+                        .on('mouseleave', function () {
+                            if (model !== selectedModel) {
+                                d3.select(this).style('background-color', null);
+                            }
+                        });
+                });
+
+                container.append('label').attr('class', 'dialog-label').style('margin-top', '16px').text('Quantization Options:');
+
+                const quantizationOptions = container
+                    .append('div')
+                    .attr('class', 'quantization-options')
+                    .style('margin-top', '8px')
+                    .style('padding', '8px')
+                    .style('border', '1px solid var(--border-color, #ddd)')
+                    .style('border-radius', '4px');
+
+                const int8Option = quantizationOptions.append('div').style('margin-bottom', '8px');
+
+                const int8Checkbox = int8Option
+                    .append('input')
+                    .attr('type', 'checkbox')
+                    .attr('id', 'use_int8_checkbox')
+                    .property('checked', currentUseInt8)
+                    .property('disabled', deviceType === 'mps');
+
+                const int8LabelText =
+                    deviceType === 'mps' ? 'Use INT8 Quantization (not supported on MPS)' : 'Use INT8 Quantization';
+                int8Option
+                    .append('label')
+                    .attr('for', 'use_int8_checkbox')
+                    .style('margin-left', '6px')
+                    .style('cursor', deviceType === 'mps' ? 'not-allowed' : 'pointer')
+                    .style('color', deviceType === 'mps' ? 'var(--text-disabled, #999)' : null)
+                    .text(int8LabelText);
+
+                const bfloat16Option = quantizationOptions.append('div');
+
+                const bfloat16Checkbox = bfloat16Option
+                    .append('input')
+                    .attr('type', 'checkbox')
+                    .attr('id', 'use_bfloat16_checkbox')
+                    .property('checked', currentUseBfloat16)
+                    .property('disabled', deviceType !== 'cpu');
+
+                const bfloat16LabelText = deviceType !== 'cpu' ? 'Use bfloat16 (CPU only)' : 'Use bfloat16';
+                bfloat16Option
+                    .append('label')
+                    .attr('for', 'use_bfloat16_checkbox')
+                    .style('margin-left', '6px')
+                    .style('cursor', deviceType !== 'cpu' ? 'not-allowed' : 'pointer')
+                    .style('color', deviceType !== 'cpu' ? 'var(--text-disabled, #999)' : null)
+                    .text(bfloat16LabelText);
+
+                int8Checkbox.on('change', function () {
+                    if ((this as HTMLInputElement).checked) {
+                        bfloat16Checkbox.property('checked', false);
+                    }
+                });
+
+                bfloat16Checkbox.on('change', function () {
+                    if ((this as HTMLInputElement).checked) {
+                        int8Checkbox.property('checked', false);
+                    }
+                });
+
+                return {
+                    getValue: () => ({
+                        model: selectedModel,
+                        use_int8: (int8Checkbox.node() as HTMLInputElement)?.checked || false,
+                        use_bfloat16: (bfloat16Checkbox.node() as HTMLInputElement)?.checked || false,
+                    }),
+                    validate: () => {
+                        if (isLoading) return false;
+
+                        const useInt8 = (int8Checkbox.node() as HTMLInputElement)?.checked || false;
+                        const useBfloat16 = (bfloat16Checkbox.node() as HTMLInputElement)?.checked || false;
+                        return (
+                            selectedModel !== currentModel || useInt8 !== currentUseInt8 || useBfloat16 !== currentUseBfloat16
+                        );
+                    },
+                    focus: () => {},
+                };
+            },
+            onConfirm: async (params: { model: string; use_int8: boolean; use_bfloat16: boolean }) => {
+                setConfirmBtnState(false, true);
+                try {
+                    const result = await api.switchModel(params.model, params.use_int8, params.use_bfloat16);
+                    setConfirmBtnState(true, false);
+                    if (result.success) {
+                        showAlertDialog(
+                            tr('Success'),
+                            result.message || 'Model settings applied. The selected model will be used for the next analysis.'
+                        );
+                    } else {
+                        showAlertDialog(tr('Error'), result.message || 'Failed to apply model settings');
+                    }
+                } catch (error: any) {
+                    setConfirmBtnState(true, false);
+                    showAlertDialog(tr('Error'), 'Failed to apply model settings: ' + error.message);
+                }
+                return false;
+            },
+            onCancel: () => {
+                if (pollId != null) {
+                    window.clearInterval(pollId);
+                    pollId = null;
+                }
+            },
+            confirmText: 'Apply',
+            cancelText: tr('Exit'),
+            width: 'clamp(400px, 90vw, 500px)',
+        });
+    } catch (error) {
+        console.error('Failed to load models:', error);
+        showAlertDialog(tr('Error'), 'Failed to load model management information');
+    }
+}

client/src/ts/utils/settingsMenuManager.ts

@@ -15,6 +15,8 @@ import { getDigitsMergeEnabled, setDigitsMergeEnabled } from './digitsMergeManag
 import { getForceNarrowScreen, setForceNarrowScreen, FORCE_NARROW_CHANGE_EVENT } from './responsive';
 import { getSemanticMatchThreshold } from './semanticThresholdManager';
 import { getInfoDensityRenderDisabled, setInfoDensityRenderDisabled } from './infoDensityRenderManager';
+import { showVisitStatsDialog } from './visitStatsDialog';
+import { showModelManageDialog } from './modelManageDialog';
 
 export type SettingsMenuCallbacks = {
     onMinimapToggle?: (enabled: boolean) => void;
@@ -172,14 +174,14 @@ export class SettingsMenuManager {
         if (this.modelManageBtn.node()) {
             this.modelManageBtn.on('click', () => {
                 this.closeMenu();
-                this.handleModelManageClick();
+                void showModelManageDialog(this.api);
             });
         }
 
         if (this.visitStatsBtn.node()) {
             this.visitStatsBtn.on('click', () => {
                 this.closeMenu();
-                this.handleVisitStatsClick();
+                void showVisitStatsDialog(this.api);
             });
         }
 
@@ -372,442 +374,4 @@ export class SettingsMenuManager {
             width: 'clamp(300px, 90vw, 420px)'
         });
     }
-
-    private async handleVisitStatsClick(): Promise<void> {
-        // backend/visit_stats.py：_STATS_PAGE_ORDER / _STATS_API_ORDER / _STATS_OS_ORDER
-        const PAGE_ORDER = [
-            'index.html',
-            'analysis.html',
-            'compare.html',
-            'chat.html',
-            'attribution.html',
-            'gen_attribute.html',
-        ] as const;
-        const API_ORDER = [
-            'analyze',
-            'analyze_semantic',
-            'chat',
-            'causal_flow',
-            'prediction_attribute',
-            'prediction_attribute__attribution.html',
-            'prediction_attribute__chat.html',
-            'prediction_attribute__analysis.html',
-        ] as const;
-        const OS_ORDER = ['ios', 'android', 'windows', 'macos', 'linux', 'unknown'] as const;
-
-        type VisitStatsRow = NonNullable<Awaited<ReturnType<TextAnalysisAPI['getVisitStats']>>>;
-        const orderedKeysGt0 = (primary: readonly string[], rec: Record<string, number>): string[] => {
-            const primarySet = new Set(primary);
-            const pos = Object.keys(rec).filter((k) => (rec[k] ?? 0) > 0);
-            const posSet = new Set(pos);
-            const head = primary.filter((k) => posSet.has(k));
-            const tail = pos.filter((k) => !primarySet.has(k)).sort();
-            return [...head, ...tail];
-        };
-        const visitStatsHtml = (data: VisitStatsRow): string => {
-            const GREEN = '#22c55e';
-            const g = (s: string) => `<span style="color:${GREEN}">${s}</span>`;
-            const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-            // 优先用 reset_base，否则回退到 startup_base
-            const sb = (Object.keys(data.reset_base ?? {}).length > 0 ? data.reset_base : data.startup_base) ?? {};
-
-            const deltaSuffix = (d: number) => d !== 0 ? ` ${g(`(${d > 0 ? '+' : ''}${d})`)}` : '';
-            const t = data.totals;
-            const pg = data.page_sec ?? {};
-            const ap = data.api ?? {};
-            const os = data.os ?? {};
-            // startup_base 为空说明历史总量未持久化，无从得知累计值；此时显示 unknown
-            const fmtTotal = (v: number) => Object.keys(sb).length > 0 ? String(v) : 'unknown';
-            const linesJoined = (keys: string[], cur: Record<string, number>, base: Record<string, number>): string[] => {
-                if (!keys.length) return ['(none)'];
-                return keys.map((k) => {
-                    const v = cur[k] ?? 0;
-                    return `${esc(k)}: ${fmtTotal(v)}${deltaSuffix(v - (base[k] ?? 0))}`;
-                });
-            };
-
-            return [
-                `Last delta reset: ${esc(data.reset_at ? new Date(data.reset_at).toLocaleString() : 'unknown')}`,
-                `Last persisted: ${esc(data.saved_at ? new Date(data.saved_at).toLocaleString() : 'unknown')}`,
-                '',
-                `[All-time (${g('+ delta since reset')})]`,
-                `Page loads: ${fmtTotal(t.page_loads)}${deltaSuffix(t.page_loads - (sb.page_loads ?? 0))}`,
-                `Active visits: ${fmtTotal(t.active_visits)}${deltaSuffix(t.active_visits - (sb.active_visits ?? 0))}`,
-                '',
-                '[OS]',
-                ...linesJoined(orderedKeysGt0(OS_ORDER, os), os, sb.os ?? {}),
-                '',
-                '[Page active time / s]',
-                ...linesJoined(orderedKeysGt0(PAGE_ORDER, pg), pg, sb.page_sec ?? {}),
-                '',
-                '[API]',
-                ...linesJoined(orderedKeysGt0(API_ORDER, ap), ap, sb.api ?? {}),
-            ].join('\n');
-        };
-
-        const fetchAndRender = async (container: d3.Selection<HTMLDivElement, unknown, HTMLElement, any>) => {
-            let block = container.select<HTMLDivElement>('div.visit-stats-body');
-            if (block.empty()) {
-                block = container
-                    .append('div')
-                    .attr('class', 'visit-stats-body')
-                    .style('margin', '0')
-                    .style('white-space', 'pre-wrap')
-                    .style('font', 'inherit')
-                    .style('font-size', '13px');
-            } else {
-                // 与 Model Management 一致：用透明度保留占位，避免清空 DOM 导致弹窗高度塌陷抖动
-                block.style('opacity', '0');
-            }
-            try {
-                const data = await this.api.getVisitStats();
-                if (!data?.success) throw new Error('bad');
-                block.html(visitStatsHtml(data));
-            } catch {
-                block.text('Failed to load stats.');
-            }
-            block.style('opacity', '1');
-        };
-
-        showDialog({
-            title: 'Visit Stats',
-            content: (dialog) => {
-                const wrap = dialog.append('div').attr('class', 'dialog-form-container');
-                const headerRow = wrap.append('div')
-                    .style('display', 'flex')
-                    .style('justify-content', 'flex-end')
-                    .style('align-items', 'center')
-                    .style('gap', '6px')
-                    .style('margin-bottom', '6px');
-                const body = wrap.append('div');
-                headerRow.append('button')
-                    .attr('type', 'button')
-                    .attr('class', 'refresh-btn')
-                    .style('font-size', '13px')
-                    .attr('title', 'Persist current increments then reset delta base')
-                    .text('Persist and reset delta')
-                    .on('click', async function () {
-                        const btn = d3.select(this);
-                        btn.property('disabled', true).text('…');
-                        try {
-                            const res = await this.api.resetVisitStats();
-                            if (!res?.success) throw new Error(res?.error ?? 'failed');
-                            await fetchAndRender(body);
-                        } catch (e) {
-                            alert(`Reset failed: ${e}`);
-                        }
-                        btn.property('disabled', false).text('Persist and reset delta');
-                    }.bind(this));
-                headerRow.append('button')
-                    .attr('type', 'button')
-                    .attr('class', 'refresh-btn')
-                    .attr('title', 'Refresh')
-                    .text('↻')
-                    .on('click', async function () {
-                        const btn = d3.select(this);
-                        btn.property('disabled', true).text('…');
-                        await fetchAndRender(body);
-                        btn.property('disabled', false).text('↻');
-                    });
-                fetchAndRender(body);
-                return { focus: () => {} };
-            },
-            cancelText: tr('Exit'),
-            confirmText: null,
-            width: 'clamp(340px, 90vw, 460px)',
-        });
-    }
-
-    private async handleModelManageClick(): Promise<void> {
-        try {
-            // 获取可用模型和当前模型
-            const [availableModelsResp, currentModelResp] = await Promise.all([
-                this.api.getAvailableModels(),
-                this.api.getCurrentModel()
-            ]);
-
-            if (!availableModelsResp.success || !currentModelResp.success) {
-                showAlertDialog(tr('Error'), 'Failed to load model management information');
-                return;
-            }
-
-            let models = availableModelsResp.models;
-            let currentModel = currentModelResp.model;
-            let deviceType = currentModelResp.device_type;
-            let currentUseInt8 = currentModelResp.use_int8;
-            let currentUseBfloat16 = currentModelResp.use_bfloat16;
-            let isLoading = currentModelResp.loading;
-
-            let pollId: number | null = null;
-            let setConfirmBtnState: (enabled: boolean, queuing?: boolean) => void = () => {};
-            // 显示模型管理弹窗
-            showDialog({
-                title: 'Model Management',
-                loadingConfirmText: 'Applying...',
-                content: (dialog, setConfirmButtonState) => {
-                    setConfirmBtnState = setConfirmButtonState ?? (() => {});
-                    const container = dialog.append('div').attr('class', 'dialog-form-container');
-                    
-                    // 显示当前模型和设备信息
-                    const deviceInfo = container.append('div')
-                        .attr('class', 'device-info')
-                        .style('margin-bottom', '12px')
-                        .style('padding', '8px')
-                        .style('background-color', 'var(--panel-bg)')
-                        .style('border-radius', '4px')
-                        .style('font-size', '12px');
-                    
-                    // 标题行：包含当前模型和刷新按钮
-                    const titleRow = deviceInfo.append('div')
-                        .style('display', 'flex')
-                        .style('justify-content', 'space-between')
-                        .style('align-items', 'center')
-                        .style('margin-bottom', '6px');
-                    
-                    const modelTitle = titleRow.append('div')
-                        .style('font-weight', 'bold')
-                        .style('color', 'var(--primary-color, #2196F3)');
-                    
-                    const refreshBtn = titleRow.append('button')
-                        .attr('class', 'refresh-btn')
-                        .attr('title', 'Refresh')
-                        .text('↻');
-                    
-                    // 请求发出时隐藏文字（用透明度保留占位，避免布局重排导致整窗闪）
-                    const hideDisplay = () => {
-                        deviceInfo.style('opacity', '0');
-                    };
-                    
-                    // 请求返回后重绘并显示
-                    const updateDisplay = () => {
-                        modelTitle.text(`Current Model: ${currentModel}${isLoading ? ' (Loading...)' : ''}`);
-                        deviceInfo.select('.device-type').text(`Device Type: ${deviceType.toUpperCase()}`);
-                        const currentQuantization = currentUseInt8 ? 'INT8' : 
-                                                  currentUseBfloat16 ? 'bfloat16' : 
-                                                  deviceType === 'cpu' ? 'float32' : 'float16';
-                        deviceInfo.select('.quantization').text(`Current Quantization: ${currentQuantization}`);
-                        deviceInfo.style('opacity', '1');
-                    };
-                    
-                    deviceInfo.append('div').attr('class', 'device-type');
-                    deviceInfo.append('div').attr('class', 'quantization');
-                    updateDisplay();
-                    
-                    // 拉取当前模型并更新显示（轮询与刷新共用）；只有收到成功响应才恢复文字
-                    const fetchAndUpdate = async () => {
-                        hideDisplay();
-                        try {
-                            const resp = await this.api.getCurrentModel();
-                            if (resp.success) {
-                                currentModel = resp.model;
-                                deviceType = resp.device_type;
-                                currentUseInt8 = resp.use_int8;
-                                currentUseBfloat16 = resp.use_bfloat16;
-                                isLoading = resp.loading;
-                                updateDisplay();
-                            }
-                        } catch {
-                            // 未收到或失败不恢复，保持隐藏
-                        }
-                    };
-                    
-                    // 刷新按钮点击事件
-                    refreshBtn.on('click', async () => {
-                        refreshBtn.property('disabled', true).text('…');
-                        await fetchAndUpdate();
-                        refreshBtn.property('disabled', false).text('↻');
-                    });
-                    
-                    // 2s 一次后台轮询，弹窗关闭后清除
-                    const overlay = deviceInfo.node()?.closest('.dialog-overlay');
-                    const pollMs = 2000;
-                    pollId = window.setInterval(async () => {
-                        if (!overlay?.isConnected) {
-                            if (pollId != null) window.clearInterval(pollId);
-                            pollId = null;
-                            return;
-                        }
-                        await fetchAndUpdate();
-                    }, pollMs);
-                    
-                    container.append('label')
-                        .attr('class', 'dialog-label')
-                        .style('margin-top', '12px')
-                        .text('Select model:');
-
-                    // 创建模型列表
-                    const modelList = container.append('div')
-                        .attr('class', 'model-list')
-                        .style('max-height', '200px')
-                        .style('overflow-y', 'auto')
-                        .style('margin-top', '8px');
-
-                    let selectedModel = currentModel;
-
-                    models.forEach(model => {
-                        const modelItem = modelList.append('div')
-                            .attr('class', 'model-item')
-                            .style('padding', '8px 12px')
-                            .style('margin', '4px 0')
-                            .style('border', '1px solid var(--border-color, #ddd)')
-                            .style('border-radius', '4px')
-                            .style('cursor', 'pointer')
-                            .style('transition', 'background-color 0.2s')
-                            .classed('current-model', model === currentModel);
-
-                        // 如果是当前模型，显示标记
-                        if (model === currentModel) {
-                            modelItem.style('background-color', 'var(--bg-hover, #f0f0f0)')
-                                .style('font-weight', 'bold');
-                        }
-
-                        modelItem.append('span').text(model);
-
-                        // 点击选择模型
-                        modelItem.on('click', function() {
-                            selectedModel = model;
-                            // 更新选中样式
-                            modelList.selectAll('.model-item')
-                                .style('background-color', null)
-                                .style('font-weight', null);
-                            d3.select(this)
-                                .style('background-color', 'var(--bg-hover, #f0f0f0)')
-                                .style('font-weight', 'bold');
-                        });
-
-                        // 鼠标悬停效果
-                        modelItem.on('mouseenter', function() {
-                            if (model !== selectedModel) {
-                                d3.select(this).style('background-color', 'var(--bg-hover-light, #f8f8f8)');
-                            }
-                        }).on('mouseleave', function() {
-                            if (model !== selectedModel) {
-                                d3.select(this).style('background-color', null);
-                            }
-                        });
-                    });
-
-                    // 量化选项
-                    container.append('label')
-                        .attr('class', 'dialog-label')
-                        .style('margin-top', '16px')
-                        .text('Quantization Options:');
-                    
-                    const quantizationOptions = container.append('div')
-                        .attr('class', 'quantization-options')
-                        .style('margin-top', '8px')
-                        .style('padding', '8px')
-                        .style('border', '1px solid var(--border-color, #ddd)')
-                        .style('border-radius', '4px');
-                    
-                    // INT8 选项
-                    const int8Option = quantizationOptions.append('div')
-                        .style('margin-bottom', '8px');
-                    
-                    const int8Checkbox = int8Option.append('input')
-                        .attr('type', 'checkbox')
-                        .attr('id', 'use_int8_checkbox')
-                        .property('checked', currentUseInt8)
-                        .property('disabled', deviceType === 'mps');
-                    
-                    const int8LabelText = deviceType === 'mps'
-                        ? 'Use INT8 Quantization (not supported on MPS)'
-                        : 'Use INT8 Quantization';
-                    int8Option.append('label')
-                        .attr('for', 'use_int8_checkbox')
-                        .style('margin-left', '6px')
-                        .style('cursor', deviceType === 'mps' ? 'not-allowed' : 'pointer')
-                        .style('color', deviceType === 'mps' ? 'var(--text-disabled, #999)' : null)
-                        .text(int8LabelText);
-                    
-                    // bfloat16 选项
-                    const bfloat16Option = quantizationOptions.append('div');
-                    
-                    const bfloat16Checkbox = bfloat16Option.append('input')
-                        .attr('type', 'checkbox')
-                        .attr('id', 'use_bfloat16_checkbox')
-                        .property('checked', currentUseBfloat16)
-                        .property('disabled', deviceType !== 'cpu');
-                    
-                    const bfloat16LabelText = deviceType !== 'cpu'
-                        ? 'Use bfloat16 (CPU only)'
-                        : 'Use bfloat16';
-                    bfloat16Option.append('label')
-                        .attr('for', 'use_bfloat16_checkbox')
-                        .style('margin-left', '6px')
-                        .style('cursor', deviceType !== 'cpu' ? 'not-allowed' : 'pointer')
-                        .style('color', deviceType !== 'cpu' ? 'var(--text-disabled, #999)' : null)
-                        .text(bfloat16LabelText);
-                    
-                    // 互斥逻辑
-                    int8Checkbox.on('change', function() {
-                        if ((this as HTMLInputElement).checked) {
-                            bfloat16Checkbox.property('checked', false);
-                        }
-                    });
-                    
-                    bfloat16Checkbox.on('change', function() {
-                        if ((this as HTMLInputElement).checked) {
-                            int8Checkbox.property('checked', false);
-                        }
-                    });
-
-                    return {
-                        getValue: () => ({
-                            model: selectedModel,
-                            use_int8: (int8Checkbox.node() as HTMLInputElement)?.checked || false,
-                            use_bfloat16: (bfloat16Checkbox.node() as HTMLInputElement)?.checked || false
-                        }),
-                        validate: () => {
-                            // 如果正在加载，禁用确认按钮
-                            if (isLoading) return false;
-                            
-                            const useInt8 = (int8Checkbox.node() as HTMLInputElement)?.checked || false;
-                            const useBfloat16 = (bfloat16Checkbox.node() as HTMLInputElement)?.checked || false;
-                            return selectedModel !== currentModel || 
-                                   useInt8 !== currentUseInt8 || 
-                                   useBfloat16 !== currentUseBfloat16;
-                        },
-                        focus: () => {}
-                    };
-                },
-                onConfirm: async (params: { model: string, use_int8: boolean, use_bfloat16: boolean }) => {
-                    setConfirmBtnState(false, true);
-                    try {
-                        const result = await this.api.switchModel(
-                            params.model,
-                            params.use_int8,
-                            params.use_bfloat16
-                        );
-                        setConfirmBtnState(true, false);
-                        if (result.success) {
-                            showAlertDialog(
-                                tr('Success'),
-                                result.message || 'Model settings applied. The selected model will be used for the next analysis.'
-                            );
-                        } else {
-                            showAlertDialog(tr('Error'), result.message || 'Failed to apply model settings');
-                        }
-                    } catch (error: any) {
-                        setConfirmBtnState(true, false);
-                        showAlertDialog(tr('Error'), 'Failed to apply model settings: ' + error.message);
-                    }
-                    return false; // 保持弹窗打开
-                },
-                onCancel: () => {
-                    if (pollId != null) {
-                        window.clearInterval(pollId);
-                        pollId = null;
-                    }
-                },
-                confirmText: 'Apply',
-                cancelText: tr('Exit'),
-                width: 'clamp(400px, 90vw, 500px)'
-            });
-
-        } catch (error) {
-            console.error('Failed to load models:', error);
-            showAlertDialog(tr('Error'), 'Failed to load model management information');
-        }
-    }
 }

client/src/ts/utils/visitStatsDialog.ts

@@ -0,0 +1,189 @@
+/**
+ * Visit Stats 弹窗（backend/visit_stats.py：_STATS_PAGE_ORDER / _STATS_API_ORDER / _STATS_OS_ORDER）
+ */
+import * as d3 from 'd3';
+import { showDialog } from '../ui/dialog';
+import { tr } from '../lang/i18n-lite';
+import type { TextAnalysisAPI } from '../api/GLTR_API';
+
+const PAGE_ORDER = [
+    'index.html',
+    'analysis.html',
+    'compare.html',
+    'chat.html',
+    'attribution.html',
+    'gen_attribute.html',
+] as const;
+
+const API_ORDER = [
+    'analyze',
+    'analyze_semantic',
+    'chat',
+    'causal_flow',
+    'prediction_attribute',
+    'prediction_attribute__attribution.html',
+    'prediction_attribute__chat.html',
+    'prediction_attribute__analysis.html',
+] as const;
+
+const OS_ORDER = ['ios', 'android', 'windows', 'macos', 'linux', 'unknown'] as const;
+
+type VisitStatsRow = NonNullable<Awaited<ReturnType<TextAnalysisAPI['getVisitStats']>>>;
+
+function orderedKeysGt0(primary: readonly string[], rec: Record<string, number>): string[] {
+    const primarySet = new Set(primary);
+    const pos = Object.keys(rec).filter((k) => (rec[k] ?? 0) > 0);
+    const posSet = new Set(pos);
+    const head = primary.filter((k) => posSet.has(k));
+    const tail = pos.filter((k) => !primarySet.has(k)).sort();
+    return [...head, ...tail];
+}
+
+/** 秒 → `1d 2h 3m 4s`（省略为 0 的单位；全 0 为 `0s`；负数带负号） */
+function formatDurationSec(sec: number): string {
+    const sign = sec < 0 ? '-' : '';
+    let x = Math.abs(Math.floor(sec));
+    const days = Math.floor(x / 86400);
+    x %= 86400;
+    const h = Math.floor(x / 3600);
+    x %= 3600;
+    const m = Math.floor(x / 60);
+    const s = x % 60;
+    const parts: string[] = [];
+    if (days) parts.push(`${days}d`);
+    if (h) parts.push(`${h}h`);
+    if (m) parts.push(`${m}m`);
+    if (s || parts.length === 0) parts.push(`${s}s`);
+    return sign + parts.join(' ');
+}
+
+function visitStatsHtml(data: VisitStatsRow): string {
+    const GREEN = '#22c55e';
+    const g = (s: string) => `<span style="color:${GREEN}">${s}</span>`;
+    const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    const sb = (Object.keys(data.reset_base ?? {}).length > 0 ? data.reset_base : data.startup_base) ?? {};
+
+    const deltaSuffix = (d: number) => (d !== 0 ? ` ${g(`(${d > 0 ? '+' : ''}${d})`)}` : '');
+    const deltaSuffixDuration = (d: number) => {
+        if (d === 0) return '';
+        const body = formatDurationSec(d);
+        const inner = d > 0 ? `+${body}` : body;
+        return ` ${g(`(${inner})`)}`;
+    };
+    const t = data.totals;
+    const pg = data.page_sec ?? {};
+    const ap = data.api ?? {};
+    const os = data.os ?? {};
+    const fmtTotal = (v: number) => (Object.keys(sb).length > 0 ? String(v) : 'unknown');
+    const linesJoined = (keys: string[], cur: Record<string, number>, base: Record<string, number>): string[] => {
+        if (!keys.length) return ['(none)'];
+        return keys.map((k) => {
+            const v = cur[k] ?? 0;
+            return `${esc(k)}: ${fmtTotal(v)}${deltaSuffix(v - (base[k] ?? 0))}`;
+        });
+    };
+    const linesJoinedPageSec = (keys: string[], cur: Record<string, number>, base: Record<string, number>): string[] => {
+        if (!keys.length) return ['(none)'];
+        const hasBase = Object.keys(sb).length > 0;
+        return keys.map((k) => {
+            const v = cur[k] ?? 0;
+            const main = hasBase ? formatDurationSec(v) : 'unknown';
+            return `${esc(k)}: ${main}${deltaSuffixDuration(v - (base[k] ?? 0))}`;
+        });
+    };
+
+    return [
+        `Last delta reset: ${esc(data.reset_at ? new Date(data.reset_at).toLocaleString() : 'unknown')}`,
+        `Last persisted: ${esc(data.saved_at ? new Date(data.saved_at).toLocaleString() : 'unknown')}`,
+        '',
+        `[All-time (${g('+ delta since reset')})]`,
+        `Page loads: ${fmtTotal(t.page_loads)}${deltaSuffix(t.page_loads - (sb.page_loads ?? 0))}`,
+        `Active visits: ${fmtTotal(t.active_visits)}${deltaSuffix(t.active_visits - (sb.active_visits ?? 0))}`,
+        '',
+        '[OS]',
+        ...linesJoined(orderedKeysGt0(OS_ORDER, os), os, sb.os ?? {}),
+        '',
+        '[Page active time]',
+        ...linesJoinedPageSec(orderedKeysGt0(PAGE_ORDER, pg), pg, sb.page_sec ?? {}),
+        '',
+        '[API]',
+        ...linesJoined(orderedKeysGt0(API_ORDER, ap), ap, sb.api ?? {}),
+    ].join('\n');
+}
+
+export async function showVisitStatsDialog(api: TextAnalysisAPI): Promise<void> {
+    const fetchAndRender = async (container: d3.Selection<HTMLDivElement, unknown, HTMLElement, any>) => {
+        let block = container.select<HTMLDivElement>('div.visit-stats-body');
+        if (block.empty()) {
+            block = container
+                .append('div')
+                .attr('class', 'visit-stats-body')
+                .style('margin', '0')
+                .style('white-space', 'pre-wrap')
+                .style('font', 'inherit')
+                .style('font-size', '13px');
+        } else {
+            block.style('opacity', '0');
+        }
+        try {
+            const data = await api.getVisitStats();
+            if (!data?.success) throw new Error('bad');
+            block.html(visitStatsHtml(data));
+        } catch {
+            block.text('Failed to load stats.');
+        }
+        block.style('opacity', '1');
+    };
+
+    showDialog({
+        title: 'Visit Stats',
+        content: (dialog) => {
+            const wrap = dialog.append('div').attr('class', 'dialog-form-container');
+            const headerRow = wrap
+                .append('div')
+                .style('display', 'flex')
+                .style('justify-content', 'flex-end')
+                .style('align-items', 'center')
+                .style('gap', '6px')
+                .style('margin-bottom', '6px');
+            const body = wrap.append('div');
+            headerRow
+                .append('button')
+                .attr('type', 'button')
+                .attr('class', 'refresh-btn')
+                .style('font-size', '13px')
+                .attr('title', 'Persist current increments then reset delta base')
+                .text('Persist and reset delta')
+                .on('click', async function () {
+                    const btn = d3.select(this);
+                    btn.property('disabled', true).style('opacity', '0.4').text('…');
+                    try {
+                        const res = await api.resetVisitStats();
+                        if (!res?.success) throw new Error(res?.error ?? 'failed');
+                        await fetchAndRender(body);
+                    } catch (e) {
+                        alert(`Reset failed: ${e}`);
+                    } finally {
+                        btn.property('disabled', false).style('opacity', null).text('Persist and reset delta');
+                    }
+                });
+            headerRow
+                .append('button')
+                .attr('type', 'button')
+                .attr('class', 'refresh-btn')
+                .attr('title', 'Refresh')
+                .text('↻')
+                .on('click', async function () {
+                    const btn = d3.select(this);
+                    btn.property('disabled', true).text('…');
+                    await fetchAndRender(body);
+                    btn.property('disabled', false).text('↻');
+                });
+            fetchAndRender(body);
+            return { focus: () => {} };
+        },
+        cancelText: tr('Exit'),
+        confirmText: null,
+        width: 'clamp(340px, 90vw, 460px)',
+    });
+}