768 lines
29 KiB
TypeScript
768 lines
29 KiB
TypeScript
/**
|
||
* TokenDashboard - Token 实时监控仪表盘
|
||
* 支持全局统计（跨会话累计）和当前会话统计双视图切换
|
||
*/
|
||
|
||
import { state, KEYS } from '../state/state.js';
|
||
import { formatTime } from '../utils/utils.js';
|
||
import { logError } from '../services/log-service.js';
|
||
import { getEffectiveNumCtx, getModelContextLength } from './model-bar.js';
|
||
import { estimateTokens } from '../services/context-manager.js';
|
||
import type { ChatSession, ChatMessage } from '../types.js';
|
||
|
||
let dashboardModalEl: HTMLElement;
|
||
let refreshTimer: ReturnType<typeof setInterval> | null = null;
|
||
let viewMode: 'global' | 'session' = 'global';
|
||
|
||
/** 全局统计缓存 */
|
||
interface SessionTokenStat {
|
||
session_id: string;
|
||
title: string;
|
||
model: string;
|
||
created_at: number;
|
||
total_input: number;
|
||
total_output: number;
|
||
total_duration: number;
|
||
round_count: number;
|
||
}
|
||
|
||
interface GlobalTokenTotals {
|
||
total_input: number;
|
||
total_output: number;
|
||
total_duration: number;
|
||
total_rounds: number;
|
||
session_count: number;
|
||
}
|
||
|
||
interface AllSessionsTokenStats {
|
||
sessions: SessionTokenStat[];
|
||
totals: GlobalTokenTotals;
|
||
}
|
||
|
||
/** P1 #5: HTML 转义，防止 XSS */
|
||
function escapeHtml(s: unknown): string {
|
||
if (s == null) return '';
|
||
return String(s)
|
||
.replace(/&/g, '&')
|
||
.replace(/</g, '<')
|
||
.replace(/>/g, '>')
|
||
.replace(/"/g, '"')
|
||
.replace(/'/g, ''');
|
||
}
|
||
|
||
/** 打开仪表盘 */
|
||
export function openTokenDashboard(): void {
|
||
if (!dashboardModalEl) return;
|
||
dashboardModalEl.style.display = '';
|
||
renderDashboard();
|
||
startAutoRefresh();
|
||
}
|
||
|
||
/** 关闭仪表盘 */
|
||
export function closeTokenDashboard(): void {
|
||
if (!dashboardModalEl) return;
|
||
dashboardModalEl.style.display = 'none';
|
||
stopAutoRefresh();
|
||
}
|
||
|
||
/** 初始化 */
|
||
export function initTokenDashboard(): void {
|
||
dashboardModalEl = document.querySelector('#tokenDashboardModal')!;
|
||
|
||
document.querySelector('#btnTokenDashboard')!.addEventListener('click', openTokenDashboard);
|
||
document.querySelector('#btnCloseTokenDashboard')!.addEventListener('click', closeTokenDashboard);
|
||
dashboardModalEl.addEventListener('click', (e) => {
|
||
if (e.target === dashboardModalEl) closeTokenDashboard();
|
||
});
|
||
|
||
// 视图切换按钮事件
|
||
const toggleEl = dashboardModalEl.querySelector('#tdViewToggle')!;
|
||
toggleEl.addEventListener('click', (e) => {
|
||
const target = e.target as HTMLElement;
|
||
if (!target.classList.contains('td-view-btn')) return;
|
||
const newView = target.dataset.view as 'global' | 'session';
|
||
if (newView && newView !== viewMode) {
|
||
viewMode = newView;
|
||
// 更新按钮 active 状态
|
||
toggleEl.querySelectorAll('.td-view-btn').forEach(btn => btn.classList.remove('active'));
|
||
target.classList.add('active');
|
||
// 切换时刷新
|
||
renderDashboard();
|
||
}
|
||
});
|
||
}
|
||
|
||
function startAutoRefresh(): void {
|
||
stopAutoRefresh();
|
||
refreshTimer = setInterval(() => renderDashboard(), 2000);
|
||
}
|
||
|
||
function stopAutoRefresh(): void {
|
||
if (refreshTimer) {
|
||
clearInterval(refreshTimer);
|
||
refreshTimer = null;
|
||
}
|
||
}
|
||
|
||
interface RoundData {
|
||
round: number;
|
||
role: string;
|
||
eval_count: number;
|
||
prompt_eval_count: number;
|
||
total_duration: number;
|
||
timestamp: number;
|
||
model?: string;
|
||
llmCallCount: number;
|
||
}
|
||
|
||
/**
|
||
* 收集轮次数据 — 按用户消息分组（一次用户消息 = 一轮）。
|
||
* Agent Loop 中一次用户交互可能触发多次 LLM 调用，
|
||
* 这些调用的 token 统计会被聚合到同一个轮次中。
|
||
*/
|
||
function collectRoundData(messages: ChatMessage[]): RoundData[] {
|
||
const rounds: RoundData[] = [];
|
||
let turnNum = 0;
|
||
let currentTurn: RoundData | null = null;
|
||
|
||
for (const msg of messages) {
|
||
if (msg.role === 'user') {
|
||
// 新轮次开始
|
||
if (currentTurn) rounds.push(currentTurn);
|
||
turnNum++;
|
||
currentTurn = {
|
||
round: turnNum,
|
||
role: 'assistant',
|
||
eval_count: 0,
|
||
prompt_eval_count: 0,
|
||
total_duration: 0,
|
||
timestamp: msg.timestamp,
|
||
llmCallCount: 0,
|
||
};
|
||
} else if (msg.role === 'assistant' && (msg.eval_count || msg.prompt_eval_count || msg.total_duration)) {
|
||
if (!currentTurn) {
|
||
// 边界情况：assistant 消息出现在任何 user 消息之前
|
||
turnNum++;
|
||
currentTurn = {
|
||
round: turnNum,
|
||
role: 'assistant',
|
||
eval_count: 0,
|
||
prompt_eval_count: 0,
|
||
total_duration: 0,
|
||
timestamp: msg.timestamp,
|
||
llmCallCount: 0,
|
||
};
|
||
}
|
||
currentTurn.eval_count += msg.eval_count || 0;
|
||
currentTurn.prompt_eval_count += msg.prompt_eval_count || 0;
|
||
currentTurn.total_duration += msg.total_duration || 0;
|
||
currentTurn.llmCallCount++;
|
||
currentTurn.model = msg.model || currentTurn.model;
|
||
currentTurn.timestamp = msg.timestamp;
|
||
}
|
||
}
|
||
if (currentTurn) rounds.push(currentTurn);
|
||
return rounds;
|
||
}
|
||
|
||
function formatDuration(ns: number): string {
|
||
if (!ns) return '-';
|
||
const ms = ns / 1_000_000;
|
||
if (ms < 1000) return `${Math.round(ms)}ms`;
|
||
const s = ms / 1000;
|
||
if (s < 60) return `${s.toFixed(1)}s`;
|
||
const m = Math.floor(s / 60);
|
||
const rem = (s % 60).toFixed(0);
|
||
return `${m}m${rem}s`;
|
||
}
|
||
|
||
function formatTokenCount(n: number): string {
|
||
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
|
||
if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
|
||
return String(n);
|
||
}
|
||
|
||
/** P1 #3: 上次成功获取的全局数据（用于刷新期间保持旧数据可见，避免闪烁） */
|
||
let lastSuccessfulStats: AllSessionsTokenStats | null = null;
|
||
let hasEverLoaded = false;
|
||
|
||
/** P1 #3: 获取全局统计数据 — 每次都重新查询，不做永久缓存 */
|
||
async function fetchGlobalStats(): Promise<AllSessionsTokenStats | null> {
|
||
try {
|
||
const desktop = window.metonaDesktop;
|
||
if (!desktop?.db?.getAllTokenStats) return null;
|
||
const result = await desktop.db.getAllTokenStats();
|
||
if (result) {
|
||
lastSuccessfulStats = result;
|
||
hasEverLoaded = true;
|
||
return result;
|
||
}
|
||
} catch (err) {
|
||
logError('Token Dashboard: 获取全局统计失败', String(err));
|
||
}
|
||
return null;
|
||
}
|
||
|
||
function renderDashboard(): void {
|
||
// 全局视图时隐藏上下文环形图区域（仅会话视图显示）
|
||
const ringSection = dashboardModalEl.querySelector('#tdCtxRingSection') as HTMLElement | null;
|
||
if (ringSection) ringSection.style.display = viewMode === 'session' ? '' : 'none';
|
||
|
||
if (viewMode === 'global') {
|
||
renderGlobalView();
|
||
} else {
|
||
renderSessionView();
|
||
}
|
||
}
|
||
|
||
/** P9: 全局刷新请求 ID，防止异步竞态 */
|
||
let globalFetchId = 0;
|
||
|
||
/** 重新计算全局汇总 */
|
||
function recalcTotals(sessions: SessionTokenStat[]): GlobalTokenTotals {
|
||
let totalInput = 0, totalOutput = 0, totalDuration = 0, totalRounds = 0;
|
||
for (const s of sessions) {
|
||
totalInput += s.total_input || 0;
|
||
totalOutput += s.total_output || 0;
|
||
totalDuration += s.total_duration || 0;
|
||
totalRounds += s.round_count || 0;
|
||
}
|
||
return {
|
||
total_input: totalInput,
|
||
total_output: totalOutput,
|
||
total_duration: totalDuration,
|
||
total_rounds: totalRounds,
|
||
session_count: sessions.length,
|
||
};
|
||
}
|
||
|
||
/** 渲染全局统计视图 */
|
||
function renderGlobalView(): void {
|
||
const myFetchId = ++globalFetchId;
|
||
fetchGlobalStats().then(stats => {
|
||
if (myFetchId !== globalFetchId) return; // P9: 过期响应，丢弃
|
||
if (!stats) {
|
||
// P1 #3/#9: 刷新失败时保留旧数据，仅在从未加载成功时显示错误
|
||
if (hasEverLoaded && lastSuccessfulStats) {
|
||
renderGlobalOverview(lastSuccessfulStats);
|
||
renderGlobalChart(lastSuccessfulStats);
|
||
renderGlobalTable(lastSuccessfulStats);
|
||
} else {
|
||
renderGlobalFallback(true);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// P2: 合并当前会话内存数据，确保实时性
|
||
const currentSession = state.get<ChatSession | null>(KEYS.CURRENT_SESSION);
|
||
if (currentSession && currentSession.messages.length > 0) {
|
||
const rounds = collectRoundData(currentSession.messages);
|
||
if (rounds.length > 0) {
|
||
const totalInput = rounds.reduce((sum, r) => sum + r.prompt_eval_count, 0);
|
||
const totalOutput = rounds.reduce((sum, r) => sum + r.eval_count, 0);
|
||
const totalDuration = rounds.reduce((sum, r) => sum + r.total_duration, 0);
|
||
const sessionStat: SessionTokenStat = {
|
||
session_id: currentSession.id,
|
||
title: currentSession.title,
|
||
model: currentSession.model,
|
||
created_at: currentSession.createdAt,
|
||
total_input: totalInput,
|
||
total_output: totalOutput,
|
||
total_duration: totalDuration,
|
||
round_count: rounds.length,
|
||
};
|
||
const idx = stats.sessions.findIndex(s => s.session_id === currentSession.id);
|
||
if (idx >= 0) {
|
||
stats.sessions[idx] = sessionStat;
|
||
} else {
|
||
stats.sessions.push(sessionStat);
|
||
}
|
||
stats.totals = recalcTotals(stats.sessions);
|
||
}
|
||
}
|
||
|
||
renderGlobalOverview(stats);
|
||
renderGlobalChart(stats);
|
||
renderGlobalTable(stats);
|
||
});
|
||
}
|
||
|
||
/** 全局统计获取失败时的降级处理 */
|
||
function renderGlobalFallback(isError = false): void {
|
||
const overviewEl = dashboardModalEl.querySelector('#tdOverview')!;
|
||
const msg = isError ? '全局统计加载失败，正在重试…' : '正在加载全局数据…';
|
||
overviewEl.innerHTML = `
|
||
<div class="td-stat-card">
|
||
<div class="td-stat-icon">🌍</div>
|
||
<div class="td-stat-value">-</div>
|
||
<div class="td-stat-label">${msg}</div>
|
||
</div>
|
||
`;
|
||
const chartEl = dashboardModalEl.querySelector('#tdChart')!;
|
||
chartEl.innerHTML = `<div class="td-empty">${msg}</div>`;
|
||
const tableEl = dashboardModalEl.querySelector('#tdTableBody')!;
|
||
tableEl.innerHTML = `<tr><td colspan="7" class="td-empty-row">${msg}</td></tr>`;
|
||
}
|
||
|
||
/** 渲染全局概览卡片 */
|
||
function renderGlobalOverview(stats: AllSessionsTokenStats): void {
|
||
const { totals } = stats;
|
||
const totalTokens = totals.total_input + totals.total_output;
|
||
const avgPerRound = totals.total_rounds > 0 ? Math.round(totalTokens / totals.total_rounds) : 0;
|
||
|
||
const overviewEl = dashboardModalEl.querySelector('#tdOverview')!;
|
||
overviewEl.innerHTML = `
|
||
<div class="td-stat-card">
|
||
<div class="td-stat-icon">🌍</div>
|
||
<div class="td-stat-value">${formatTokenCount(totalTokens)}</div>
|
||
<div class="td-stat-label">全局 Token 总计</div>
|
||
<div class="td-stat-detail">输入 ${formatTokenCount(totals.total_input)} / 输出 ${formatTokenCount(totals.total_output)}</div>
|
||
</div>
|
||
<div class="td-stat-card">
|
||
<div class="td-stat-icon">📂</div>
|
||
<div class="td-stat-value">${totals.session_count}</div>
|
||
<div class="td-stat-label">总会话数</div>
|
||
</div>
|
||
<div class="td-stat-card">
|
||
<div class="td-stat-icon">💬</div>
|
||
<div class="td-stat-value">${totals.total_rounds}</div>
|
||
<div class="td-stat-label">总轮次</div>
|
||
</div>
|
||
<div class="td-stat-card">
|
||
<div class="td-stat-icon">⏱️</div>
|
||
<div class="td-stat-value">${formatDuration(totals.total_duration)}</div>
|
||
<div class="td-stat-label">总推理耗时</div>
|
||
</div>
|
||
<div class="td-stat-card td-stat-card-small">
|
||
<div class="td-stat-icon">📊</div>
|
||
<div class="td-stat-value">${formatTokenCount(avgPerRound)}</div>
|
||
<div class="td-stat-label">平均 Token/轮</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
/** 渲染柱状图（通用，全局/会话复用） */
|
||
function renderBarChart(
|
||
chartEl: HTMLElement,
|
||
data: Array<{ label: string; input: number; output: number; tooltip: string }>,
|
||
note?: string,
|
||
savedScrollLeft?: number
|
||
): void {
|
||
if (data.length === 0) {
|
||
chartEl.innerHTML = '<div class="td-empty">暂无数据</div>';
|
||
return;
|
||
}
|
||
|
||
const maxTokens = Math.max(...data.map(d => d.input + d.output), 1);
|
||
|
||
// 网格线：5 条水平线（0%, 25%, 50%, 75%, 100%）
|
||
const gridLines = [0, 0.25, 0.5, 0.75, 1].map(ratio => {
|
||
const val = Math.round(maxTokens * ratio);
|
||
return `<div class="td-gridline" style="bottom:${ratio * 100}%">
|
||
<span class="td-gridline-label">${formatTokenCount(val)}</span>
|
||
</div>`;
|
||
}).join('');
|
||
|
||
const barsHtml = data.map(d => {
|
||
const total = d.input + d.output;
|
||
const heightPct = Math.max((total / maxTokens) * 100, 1.5);
|
||
const inputPct = total > 0 ? (d.input / total) * 100 : 0;
|
||
const outputPct = 100 - inputPct;
|
||
return `
|
||
<div class="td-bar-col" title="${escapeHtml(d.tooltip)}">
|
||
<div class="td-bar-area">
|
||
<div class="td-bar-stack" style="height:${heightPct}%;">
|
||
<div class="td-bar-segment td-bar-output" style="height:${outputPct}%;"></div>
|
||
<div class="td-bar-segment td-bar-input-seg" style="height:${inputPct}%;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="td-bar-labels">
|
||
<span class="td-val-input">${formatTokenCount(d.input)}</span>
|
||
<span class="td-val-output">${formatTokenCount(d.output)}</span>
|
||
</div>
|
||
<div class="td-bar-label">${escapeHtml(d.label)}</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
|
||
chartEl.innerHTML = `
|
||
<div class="td-chart-legend">
|
||
<span class="td-legend-item"><span class="td-legend-dot td-legend-output"></span>输出 Token</span>
|
||
<span class="td-legend-item"><span class="td-legend-dot td-legend-input"></span>输入 Token</span>
|
||
${note ? `<span class="td-legend-item td-legend-note">${escapeHtml(note)}</span>` : ''}
|
||
</div>
|
||
<div class="td-chart-grid">
|
||
${gridLines}
|
||
<div class="td-chart-bars">${barsHtml}</div>
|
||
</div>
|
||
`;
|
||
|
||
// 恢复滚动位置
|
||
if (savedScrollLeft && savedScrollLeft > 0) {
|
||
const newBarsEl = chartEl.querySelector('.td-chart-bars') as HTMLElement | null;
|
||
if (newBarsEl) newBarsEl.scrollLeft = savedScrollLeft;
|
||
}
|
||
}
|
||
|
||
/** 渲染全局柱状图（按会话） */
|
||
function renderGlobalChart(stats: AllSessionsTokenStats): void {
|
||
const chartEl = dashboardModalEl.querySelector('#tdChart') as HTMLElement;
|
||
const barsEl = chartEl.querySelector('.td-chart-bars') as HTMLElement | null;
|
||
const savedScrollLeft = barsEl?.scrollLeft ?? 0;
|
||
|
||
const chartTitleEl = dashboardModalEl.querySelector('#tdChartTitle');
|
||
if (chartTitleEl) chartTitleEl.textContent = '📈 Token 消耗趋势 — 按会话';
|
||
|
||
const sessions = stats.sessions;
|
||
if (sessions.length === 0) {
|
||
chartEl.innerHTML = '<div class="td-empty">暂无数据</div>';
|
||
return;
|
||
}
|
||
|
||
// P2 #10: 统一排序 — 按 created_at 正序（图表左→右为时间递增）
|
||
const sorted = [...sessions].sort((a, b) => a.created_at - b.created_at).slice(-30);
|
||
|
||
const chartData = sorted.map(s => ({
|
||
label: s.title.length > 10 ? s.title.slice(0, 10) + '…' : s.title,
|
||
input: s.total_input,
|
||
output: s.total_output,
|
||
tooltip: `${s.title} · 模型 ${s.model} · 输入 ${formatTokenCount(s.total_input)} + 输出 ${formatTokenCount(s.total_output)} = ${formatTokenCount(s.total_input + s.total_output)} tokens · ${s.round_count} 轮`,
|
||
}));
|
||
|
||
const noteText = sessions.length > sorted.length
|
||
? `最近 ${sorted.length} / 共 ${sessions.length} 个会话`
|
||
: `共 ${sorted.length} 个会话`;
|
||
renderBarChart(chartEl, chartData, noteText, savedScrollLeft);
|
||
}
|
||
|
||
/** 渲染全局明细表格 */
|
||
function renderGlobalTable(stats: AllSessionsTokenStats): void {
|
||
const tableTitleEl = dashboardModalEl.querySelector('#tdTableTitle') as HTMLElement | null;
|
||
if (tableTitleEl) tableTitleEl.textContent = '📋 会话汇总明细';
|
||
|
||
// 动态更新表头
|
||
updateTableHeader('global');
|
||
|
||
// P1 #4: 保存表格滚动位置
|
||
const tableWrapEl = dashboardModalEl.querySelector('.td-table-wrap') as HTMLElement | null;
|
||
const savedScrollTop = tableWrapEl?.scrollTop ?? 0;
|
||
|
||
const tableEl = dashboardModalEl.querySelector('#tdTableBody')!;
|
||
const sessions = stats.sessions;
|
||
|
||
if (sessions.length === 0) {
|
||
tableEl.innerHTML = '<tr><td colspan="7" class="td-empty-row">暂无数据</td></tr>';
|
||
return;
|
||
}
|
||
|
||
// P2 #10: 统一排序 — 按 created_at 倒序（最新创建的在前）
|
||
const sorted = [...sessions].sort((a, b) => b.created_at - a.created_at);
|
||
|
||
// P2 #8: 限制表格行数，避免大量数据导致 DOM 性能问题
|
||
const MAX_ROWS = 50;
|
||
const display = sorted.slice(0, MAX_ROWS);
|
||
|
||
// 如果有截断，在表格标题中标注
|
||
if (tableTitleEl && sorted.length > MAX_ROWS) {
|
||
tableTitleEl.textContent = `📋 会话汇总明细（最近 ${MAX_ROWS} 条 / 共 ${sorted.length} 条）`;
|
||
}
|
||
|
||
tableEl.innerHTML = display.map(s => {
|
||
const total = s.total_input + s.total_output;
|
||
return `
|
||
<tr>
|
||
<td title="${escapeHtml(s.title)}">${escapeHtml(s.title.length > 20 ? s.title.slice(0, 20) + '…' : s.title)}</td>
|
||
<td><span class="td-model-tag">${escapeHtml(s.model)}</span></td>
|
||
<td class="td-num">${formatTokenCount(s.total_input)}</td>
|
||
<td class="td-num">${formatTokenCount(s.total_output)}</td>
|
||
<td class="td-num td-num-total">${formatTokenCount(total)}</td>
|
||
<td class="td-num">${s.round_count}</td>
|
||
<td class="td-time">${s.created_at ? formatTime(s.created_at) : '-'}</td>
|
||
</tr>
|
||
`;
|
||
}).join('');
|
||
|
||
// P1 #4: 恢复表格滚动位置
|
||
if (savedScrollTop > 0) {
|
||
const newWrapEl = dashboardModalEl.querySelector('.td-table-wrap') as HTMLElement | null;
|
||
if (newWrapEl) newWrapEl.scrollTop = savedScrollTop;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 计算当前已用上下文 token 数。
|
||
* 优先使用最后一条 assistant 消息的 prompt_eval_count（Ollama 精确值），
|
||
* 再加上后续新增消息的估算 token（含 toolCalls/images 开销）。
|
||
* 无实际数据时回退到增强估算（全量消息内容 + toolCalls/images 开销）。
|
||
*/
|
||
function computeUsedContextTokens(messages: ChatMessage[]): { usedTokens: number; isActual: boolean } {
|
||
// 从末尾向前查找最后一条携带 prompt_eval_count 的 assistant 消息
|
||
let lastActualIdx = -1;
|
||
for (let i = messages.length - 1; i >= 0; i--) {
|
||
const m = messages[i];
|
||
if (m.role === 'assistant' && m.prompt_eval_count && m.prompt_eval_count > 0) {
|
||
lastActualIdx = i;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (lastActualIdx >= 0) {
|
||
const lastActual = messages[lastActualIdx];
|
||
// 基准：Ollama 返回的实际输入 token + 输出 token
|
||
let base = lastActual.prompt_eval_count! + (lastActual.eval_count || 0);
|
||
|
||
// 累加 lastActual 之后新增消息的估算 token
|
||
for (let i = lastActualIdx + 1; i < messages.length; i++) {
|
||
const m = messages[i];
|
||
base += estimateTokens(m.content || '');
|
||
if (m.toolCalls?.length) base += m.toolCalls.length * 50;
|
||
if (m.images?.length) base += m.images.length * 100;
|
||
}
|
||
return { usedTokens: base, isActual: true };
|
||
}
|
||
|
||
// 无实际数据：增强估算（含 toolCalls/images 开销）
|
||
let estimated = 0;
|
||
for (const m of messages) {
|
||
estimated += estimateTokens(m.content || '');
|
||
if (m.toolCalls?.length) estimated += m.toolCalls.length * 50;
|
||
if (m.images?.length) estimated += m.images.length * 100;
|
||
}
|
||
return { usedTokens: estimated, isActual: false };
|
||
}
|
||
|
||
/** 渲染上下文使用率环形图 */
|
||
function renderCtxRing(messages: ChatMessage[], isStreaming: boolean): void {
|
||
const ringSection = dashboardModalEl.querySelector('#tdCtxRingSection') as HTMLElement;
|
||
const ringEl = dashboardModalEl.querySelector('#tdCtxRing') as HTMLElement;
|
||
if (!ringSection || !ringEl) return;
|
||
|
||
ringSection.style.display = '';
|
||
|
||
const effectiveCtx = getEffectiveNumCtx();
|
||
const modelCtx = getModelContextLength();
|
||
const userCtx = state.get<number>(KEYS.NUM_CTX, 131072);
|
||
|
||
// ── 计算已用上下文 token ──
|
||
// 优先使用 Ollama 返回的实际 prompt_eval_count（精确值），
|
||
// 无实际数据时回退到增强估算（含 toolCalls/images 开销）
|
||
const { usedTokens, isActual } = computeUsedContextTokens(messages);
|
||
const remainTokens = Math.max(effectiveCtx - usedTokens, 0);
|
||
const usagePct = effectiveCtx > 0 ? Math.min((usedTokens / effectiveCtx) * 100, 100) : 0;
|
||
|
||
// SVG 环形图参数
|
||
const size = 140;
|
||
const strokeWidth = 12;
|
||
const radius = (size - strokeWidth) / 2;
|
||
const circumference = 2 * Math.PI * radius;
|
||
const dashOffset = circumference * (1 - usagePct / 100);
|
||
|
||
// 颜色根据使用率变化
|
||
let ringColor = '#9B7ED8'; // 紫色 - 正常
|
||
if (usagePct >= 90) ringColor = '#E8734A'; // 珊瑚红 - 危险
|
||
else if (usagePct >= 70) ringColor = '#F0A040'; // 橙色 - 警告
|
||
|
||
// 钳制说明文字
|
||
const clampNote = modelCtx > 0 && modelCtx < userCtx
|
||
? `模型限制 ${formatTokenCount(modelCtx)} < 设置值 ${formatTokenCount(userCtx)}，采用 ${formatTokenCount(effectiveCtx)}`
|
||
: `设置值 ${formatTokenCount(userCtx)}`;
|
||
|
||
ringEl.innerHTML = `
|
||
<div class="td-ctx-ring-container">
|
||
<svg class="td-ctx-ring-svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
|
||
<circle class="td-ctx-ring-bg" cx="${size/2}" cy="${size/2}" r="${radius}"
|
||
fill="none" stroke="var(--border-subtle)" stroke-width="${strokeWidth}"/>
|
||
<circle class="td-ctx-ring-fg" cx="${size/2}" cy="${size/2}" r="${radius}"
|
||
fill="none" stroke="${ringColor}" stroke-width="${strokeWidth}"
|
||
stroke-linecap="round"
|
||
stroke-dasharray="${circumference}"
|
||
stroke-dashoffset="${dashOffset}"
|
||
transform="rotate(-90 ${size/2} ${size/2})"
|
||
style="transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;"/>
|
||
<text class="td-ctx-ring-pct" x="${size/2}" y="${size/2 - 4}" text-anchor="middle"
|
||
fill="${ringColor}" font-size="22" font-weight="700" font-family="var(--font-mono)">
|
||
${usagePct.toFixed(0)}%
|
||
</text>
|
||
<text class="td-ctx-ring-label" x="${size/2}" y="${size/2 + 16}" text-anchor="middle"
|
||
fill="var(--text-tertiary)" font-size="10">
|
||
已用 / 总量
|
||
</text>
|
||
</svg>
|
||
<div class="td-ctx-ring-details">
|
||
<div class="td-ctx-ring-row">
|
||
<span class="td-ctx-ring-dot td-ctx-dot-used"></span>
|
||
<span class="td-ctx-ring-label-text">已用上下文</span>
|
||
<span class="td-ctx-ring-val">${formatTokenCount(usedTokens)}</span>
|
||
</div>
|
||
<div class="td-ctx-ring-row">
|
||
<span class="td-ctx-ring-dot td-ctx-dot-remain"></span>
|
||
<span class="td-ctx-ring-label-text">剩余上下文</span>
|
||
<span class="td-ctx-ring-val">${formatTokenCount(remainTokens)}</span>
|
||
</div>
|
||
<div class="td-ctx-ring-row td-ctx-ring-total">
|
||
<span class="td-ctx-ring-label-text">有效上下文窗口</span>
|
||
<span class="td-ctx-ring-val">${formatTokenCount(effectiveCtx)}</span>
|
||
</div>
|
||
<div class="td-ctx-ring-note">${escapeHtml(clampNote)}</div>
|
||
<div class="td-ctx-ring-source">${isActual ? '✅ 基于 Ollama 实际计数' : '⚙️ 基于估算（含工具/图片开销）'}</div>
|
||
${isStreaming ? '<div class="td-ctx-ring-streaming">⚡ 实时更新中…</div>' : ''}
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
/** 渲染当前会话视图 */
|
||
function renderSessionView(): void {
|
||
const session = state.get<ChatSession | null>(KEYS.CURRENT_SESSION);
|
||
const messages = session?.messages || [];
|
||
const isStreaming = state.get<boolean>(KEYS.IS_STREAMING, false);
|
||
|
||
const userMsgs = messages.filter(m => m.role === 'user');
|
||
const aiMsgs = messages.filter(m => m.role === 'assistant');
|
||
const rounds = collectRoundData(messages);
|
||
|
||
const totalOutputTokens = rounds.reduce((sum, r) => sum + r.eval_count, 0);
|
||
const totalInputTokens = rounds.reduce((sum, r) => sum + r.prompt_eval_count, 0);
|
||
const totalTokens = totalInputTokens + totalOutputTokens;
|
||
const totalDurationNs = rounds.reduce((sum, r) => sum + r.total_duration, 0);
|
||
const avgTokens = rounds.length > 0 ? Math.round(totalTokens / rounds.length) : 0;
|
||
|
||
// P3 #12: 从最后一条 assistant 消息获取实际使用的模型
|
||
const lastAssistantMsg = [...messages].reverse().find(m => m.role === 'assistant' && m.model);
|
||
const currentModel = lastAssistantMsg?.model || session?.model || '-';
|
||
|
||
// 渲染上下文使用率环形图
|
||
renderCtxRing(messages, isStreaming);
|
||
|
||
// 概览区域
|
||
const overviewEl = dashboardModalEl.querySelector('#tdOverview')!;
|
||
overviewEl.innerHTML = `
|
||
<div class="td-stat-card">
|
||
<div class="td-stat-icon">🔥</div>
|
||
<div class="td-stat-value">${formatTokenCount(totalTokens)}</div>
|
||
<div class="td-stat-label">会话 Token 消耗</div>
|
||
<div class="td-stat-detail">输入 ${formatTokenCount(totalInputTokens)} / 输出 ${formatTokenCount(totalOutputTokens)}</div>
|
||
</div>
|
||
<div class="td-stat-card">
|
||
<div class="td-stat-icon">💬</div>
|
||
<div class="td-stat-value">${userMsgs.length} / ${aiMsgs.length}</div>
|
||
<div class="td-stat-label">用户 / AI 消息</div>
|
||
</div>
|
||
<div class="td-stat-card">
|
||
<div class="td-stat-icon">📊</div>
|
||
<div class="td-stat-value">${formatTokenCount(avgTokens)}</div>
|
||
<div class="td-stat-label">平均 Token/轮</div>
|
||
</div>
|
||
<div class="td-stat-card">
|
||
<div class="td-stat-icon">⏱️</div>
|
||
<div class="td-stat-value">${formatDuration(totalDurationNs)}</div>
|
||
<div class="td-stat-label">总推理耗时</div>
|
||
</div>
|
||
<div class="td-stat-card td-stat-card-small">
|
||
<div class="td-stat-icon">🤖</div>
|
||
<div class="td-stat-value">${escapeHtml(currentModel)}</div>
|
||
<div class="td-stat-label">当前模型</div>
|
||
</div>
|
||
`;
|
||
|
||
// 柱状图
|
||
const chartEl = dashboardModalEl.querySelector('#tdChart') as HTMLElement;
|
||
const barsEl = chartEl.querySelector('.td-chart-bars') as HTMLElement | null;
|
||
const savedScrollLeft = barsEl?.scrollLeft ?? 0;
|
||
|
||
// P4: 限制图表柱子数量，避免长会话性能下降
|
||
const MAX_CHART_ROUNDS = 50;
|
||
const displayRounds = rounds.length > MAX_CHART_ROUNDS ? rounds.slice(-MAX_CHART_ROUNDS) : rounds;
|
||
|
||
const chartData = displayRounds.map(r => ({
|
||
label: `R${r.round}`,
|
||
input: r.prompt_eval_count,
|
||
output: r.eval_count,
|
||
tooltip: `第${r.round}轮${r.llmCallCount > 1 ? ` · ${r.llmCallCount}次调用` : ''} · 输入 ${formatTokenCount(r.prompt_eval_count)} + 输出 ${formatTokenCount(r.eval_count)} = ${formatTokenCount(r.eval_count + r.prompt_eval_count)} tokens · ${formatDuration(r.total_duration)}`,
|
||
}));
|
||
|
||
const chartTitleEl = dashboardModalEl.querySelector('#tdChartTitle');
|
||
if (chartTitleEl) chartTitleEl.textContent = '📈 Token 消耗趋势 — 按轮次';
|
||
|
||
// P4 #6/#7: 图表 note — 显示轮次总数 + 流式提示
|
||
const noteParts: string[] = [];
|
||
if (rounds.length > MAX_CHART_ROUNDS) noteParts.push(`最近 ${MAX_CHART_ROUNDS} / 共 ${rounds.length} 轮`);
|
||
else noteParts.push(`共 ${rounds.length} 轮`);
|
||
if (isStreaming) noteParts.push('⚡ AI 回复中…');
|
||
renderBarChart(chartEl, chartData, noteParts.join(' · '), savedScrollLeft);
|
||
|
||
// 表格标题
|
||
const tableTitleEl = dashboardModalEl.querySelector('#tdTableTitle') as HTMLElement | null;
|
||
// P1 #6: 流式输出期间显示提示
|
||
if (tableTitleEl) {
|
||
tableTitleEl.textContent = isStreaming
|
||
? '📋 轮次明细（按时间倒序）— ⚡ AI 回复中，数据实时更新…'
|
||
: '📋 轮次明细（按时间倒序）';
|
||
}
|
||
|
||
// 动态更新表头
|
||
updateTableHeader('session');
|
||
|
||
// P1 #4: 保存表格滚动位置
|
||
const tableWrapEl = dashboardModalEl.querySelector('.td-table-wrap') as HTMLElement | null;
|
||
const savedScrollTop = tableWrapEl?.scrollTop ?? 0;
|
||
|
||
// 明细表格
|
||
const tableEl = dashboardModalEl.querySelector('#tdTableBody')!;
|
||
if (rounds.length === 0) {
|
||
tableEl.innerHTML = isStreaming
|
||
? '<tr><td colspan="7" class="td-empty-row">⏳ AI 正在回复中，暂无统计数据…</td></tr>'
|
||
: '<tr><td colspan="7" class="td-empty-row">暂无数据</td></tr>';
|
||
} else {
|
||
const sorted = [...rounds].reverse();
|
||
tableEl.innerHTML = sorted.map(r => {
|
||
const total = r.eval_count + r.prompt_eval_count;
|
||
return `
|
||
<tr>
|
||
<td>R${r.round}</td>
|
||
<td>${r.llmCallCount > 1 ? `<span class="td-num">${r.llmCallCount}次</span>` : '<span class="td-num">1次</span>'}${r.model ? ` <span class="td-model-tag">${escapeHtml(r.model)}</span>` : ''}</td>
|
||
<td class="td-num">${formatTokenCount(r.prompt_eval_count)}</td>
|
||
<td class="td-num">${formatTokenCount(r.eval_count)}</td>
|
||
<td class="td-num td-num-total">${formatTokenCount(total)}</td>
|
||
<td class="td-num">${formatDuration(r.total_duration)}</td>
|
||
<td class="td-time">${r.timestamp ? formatTime(r.timestamp) : '-'}</td>
|
||
</tr>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
// P1 #4: 恢复表格滚动位置
|
||
if (savedScrollTop > 0) {
|
||
const newWrapEl = dashboardModalEl.querySelector('.td-table-wrap') as HTMLElement | null;
|
||
if (newWrapEl) newWrapEl.scrollTop = savedScrollTop;
|
||
}
|
||
}
|
||
|
||
/** 动态更新表头列 */
|
||
function updateTableHeader(mode: 'global' | 'session'): void {
|
||
const thead = dashboardModalEl.querySelector('.td-table thead tr');
|
||
if (!thead) return;
|
||
|
||
if (mode === 'global') {
|
||
thead.innerHTML = `
|
||
<th>会话</th>
|
||
<th>模型</th>
|
||
<th>输入</th>
|
||
<th>输出</th>
|
||
<th>合计</th>
|
||
<th>轮次</th>
|
||
<th>创建时间</th>
|
||
`;
|
||
} else {
|
||
thead.innerHTML = `
|
||
<th>轮次</th>
|
||
<th>调用</th>
|
||
<th>输入</th>
|
||
<th>输出</th>
|
||
<th>合计</th>
|
||
<th>耗时</th>
|
||
<th>时间</th>
|
||
`;
|
||
}
|
||
}
|