agent-sessions-viewer/public/app.js

// 状态
let currentAgent = null;
let currentSession = null;
let currentMessage = null;
let currentView = 'conversations'; // 'conversations' or 'sessions'
let conversationsData = []; // 缓存对话汇总数据

// API 调用
async function fetchAPI(endpoint) {
    const response = await fetch(`/api${endpoint}`);
    if (!response.ok) {
        throw new Error(`API Error: ${response.status}`);
    }
    return response.json();
}

// 格式化时间
function formatTime(isoString) {
    if (!isoString) return '-';
    const date = new Date(isoString);
    return date.toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    });
}

function formatFullTime(isoString) {
    if (!isoString) return '-';
    const date = new Date(isoString);
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    });
}

// 格式化数字
function formatNumber(num) {
    if (!num) return '0';
    if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
    if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
    return num.toString();
}

// 截断文本
function truncate(text, maxLen = 50) {
    if (!text) return '';
    text = text.replace(/\n/g, ' ').trim();
    if (text.length <= maxLen) return text;
    return text.substring(0, maxLen) + '...';
}

// 加载智能体列表
async function loadAgents() {
    const container = document.getElementById('agents-list');
    container.innerHTML = '<div class="loading">加载中...</div>';
    
    try {
        const agents = await fetchAPI('/agents');
        
        if (agents.length === 0) {
            container.innerHTML = '<div class="placeholder">没有找到智能体</div>';
            return;
        }
        
        container.innerHTML = agents.map(agent => `
            <div class="agent-item ${currentAgent === agent.name ? 'active' : ''}" 
                 onclick="selectAgent('${agent.name}')">
                <div class="name">🤖 ${agent.name}</div>
                <div class="meta">
                    <span>💬 ${agent.sessionCount}</span>
                    <span>${formatTime(agent.lastActive)}</span>
                </div>
            </div>
        `).join('');
    } catch (error) {
        container.innerHTML = `<div class="placeholder">加载失败: ${error.message}</div>`;
    }
}

// 切换视图
function switchView(view) {
    currentView = view;
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.view === view);
    });
    document.querySelectorAll('.view-content').forEach(content => {
        content.classList.remove('active');
    });
    document.getElementById(`${view}-view`).classList.add('active');
}

// 选择智能体
async function selectAgent(agentName) {
    currentAgent = agentName;
    currentSession = null;
    currentMessage = null;
    
    // 更新UI
    document.querySelectorAll('.agent-item').forEach(el => el.classList.remove('active'));
    event.target.closest('.agent-item')?.classList.add('active');
    
    document.getElementById('agent-name-display').textContent = `🤖 ${agentName}`;
    document.getElementById('session-id-display').textContent = '';
    document.getElementById('messages-list').innerHTML = '<div class="placeholder">请选择一个会话</div>';
    document.getElementById('message-detail').innerHTML = '<div class="placeholder">请选择一条消息</div>';
    
    // 同时加载对话汇总和会话列表
    await Promise.all([
        loadConversations(agentName),
        loadSessions(agentName)
    ]);
}

// 加载会话列表
async function loadSessions(agentName) {
    const container = document.getElementById('sessions-list');
    container.innerHTML = '<div class="loading">加载中...</div>';
    
    try {
        const sessions = await fetchAPI(`/agents/${agentName}/sessions`);
        
        if (sessions.length === 0) {
            container.innerHTML = '<div class="placeholder">没有找到会话</div>';
            return;
        }
        
        container.innerHTML = sessions.map(session => `
            <div class="session-item ${currentSession === session.sessionId ? 'active' : ''}" 
                 onclick="selectSession('${agentName}', '${session.sessionId}')">
                <div class="session-header">
                    <span class="channel ${session.channel}">${session.channel}</span>
                    <span class="status ${session.status}">${session.status}</span>
                </div>
                <div class="meta">
                    <span class="model">${session.model}</span>
                    <span>${formatTime(session.updatedAt)}</span>
                </div>
                <div class="target">${truncate(session.target, 40)}</div>
                <div class="tokens">
                    📊 ${formatNumber(session.totalTokens)} tokens 
                    (${formatNumber(session.inputTokens)} in / ${formatNumber(session.outputTokens)} out)
                </div>
            </div>
        `).join('');
    } catch (error) {
        container.innerHTML = `<div class="placeholder">加载失败: ${error.message}</div>`;
    }
}

// 选择会话 - 显示消息概览列表
async function selectSession(agentName, sessionId) {
    currentSession = sessionId;
    currentMessage = null;
    
    // 更新UI
    document.querySelectorAll('.session-item').forEach(el => el.classList.remove('active'));
    event.target.closest('.session-item')?.classList.add('active');
    
    document.getElementById('session-id-display').textContent = `- ${sessionId.substring(0, 8)}...`;
    document.getElementById('message-detail').innerHTML = '<div class="placeholder">请选择一条消息查看详情</div>';
    
    // 加载消息概览列表
    await loadMessageSummaries(agentName, sessionId);
}

// 加载消息概览列表（不加载完整内容）
async function loadMessageSummaries(agentName, sessionId) {
    const container = document.getElementById('messages-list');
    container.innerHTML = '<div class="loading">加载中...</div>';
    
    try {
        const messages = await fetchAPI(`/agents/${agentName}/sessions/${sessionId}/messages`);
        
        if (messages.length === 0) {
            container.innerHTML = '<div class="placeholder">没有找到消息</div>';
            return;
        }
        
        container.innerHTML = messages.map((msg, index) => `
            <div class="message-summary ${msg.role} ${currentMessage === msg.id ? 'active' : ''}" 
                 onclick="selectMessage('${agentName}', '${sessionId}', '${msg.id}')">
                <div class="summary-header">
                    <span class="role-badge ${msg.role}">${msg.role === 'user' ? '👤' : '🤖'} ${msg.role}</span>
                    <span class="time">${formatTime(msg.timestamp)}</span>
                </div>
                <div class="summary-text">${escapeHtml(msg.summary)}${msg.hasMoreContent ? '...' : ''}</div>
                <div class="summary-meta">
                    ${msg.hasMoreContent ? `<span class="more-indicator">📝 ${formatNumber(msg.contentLength)} 字符</span>` : ''}
                </div>
            </div>
        `).join('');
    } catch (error) {
        container.innerHTML = `<div class="placeholder">加载失败: ${error.message}</div>`;
    }
}

// 选择消息 - 显示完整内容
async function selectMessage(agentName, sessionId, messageId) {
    currentMessage = messageId;
    
    // 更新UI
    document.querySelectorAll('.message-summary').forEach(el => el.classList.remove('active'));
    event.target.closest('.message-summary')?.classList.add('active');
    
    // 加载完整消息内容
    await loadMessageDetail(agentName, sessionId, messageId);
}

// 加载消息详情（完整内容）
async function loadMessageDetail(agentName, sessionId, messageId) {
    const container = document.getElementById('message-detail');
    container.innerHTML = '<div class="loading">加载中...</div>';
    
    try {
        const msg = await fetchAPI(`/agents/${agentName}/sessions/${sessionId}/messages/${messageId}`);
        
        container.innerHTML = `
            <div class="message-detail-content ${msg.role}">
                <div class="detail-header">
                    <span class="role-badge large ${msg.role}">${msg.role === 'user' ? '👤' : '🤖'} ${msg.role}</span>
                    <span class="time">${formatFullTime(msg.timestamp)}</span>
                </div>
                <div class="detail-body">
                    <pre class="content-text">${escapeHtml(msg.content)}</pre>
                </div>
            </div>
        `;
    } catch (error) {
        container.innerHTML = `<div class="placeholder">加载失败: ${error.message}</div>`;
    }
}

// HTML 转义
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// 键盘事件
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        // 可以添加关闭操作
    }
});

// 加载对话汇总
async function loadConversations(agentName) {
    const container = document.getElementById('conversations-list');
    container.innerHTML = '<div class="loading">加载中...</div>';
    
    try {
        const conversations = await fetchAPI(`/agents/${agentName}/conversations`);
        conversationsData = conversations;
        
        if (conversations.length === 0) {
            container.innerHTML = '<div class="placeholder">没有找到对话</div>';
            return;
        }
        
        container.innerHTML = conversations.map((conv, index) => `
            <div class="conversation-item" onclick="showConversationDetail(${index})">
                <div class="conv-header">
                    <span class="conv-title">
                        💬 对话 ${index + 1}
                        <span class="conv-badge">${conv.sessionCount} 个会话</span>
                    </span>
                </div>
                <div class="conv-stats">
                    <span class="stat">📨 消息: <span class="stat-value">${conv.totalMessages}</span></span>
                    <span class="stat">📊 Token: <span class="stat-value">${formatNumber(conv.totalTokens)}</span></span>
                    <span class="stat">🔄 压缩: <span class="stat-value">${conv.compactionCount}</span></span>
                    <span class="stat">⏱️ 时长: <span class="stat-value">${conv.durationHours || '?'}h</span></span>
                </div>
                <div class="conv-target">${conv.channel} · ${conv.chatType} · ${truncate(conv.target, 30)}</div>
                <div class="conv-time">${formatTime(conv.firstStartedAt)} → ${formatTime(conv.lastUpdatedAt)}</div>
            </div>
        `).join('');
    } catch (error) {
        container.innerHTML = `<div class="placeholder">加载失败: ${error.message}</div>`;
    }
}

// 显示对话详情（包含该对话下的所有 session）
function showConversationDetail(index) {
    const conv = conversationsData[index];
    if (!conv) return;
    
    // 高亮选中的对话
    document.querySelectorAll('.conversation-item').forEach((el, i) => {
        el.classList.toggle('active', i === index);
    });
    
    // 切换到会话视图并显示该对话下的 session
    switchView('sessions');
    
    const container = document.getElementById('sessions-list');
    container.innerHTML = `
        <div class="conv-sessions-header">
            <span class="back-btn" onclick="backToConversations()">← 返回</span>
            💬 ${conv.channel} · ${conv.chatType}
        </div>
        ${conv.sessions.map((session, sIndex) => `
            <div class="session-item" onclick="selectSession('${currentAgent}', '${session.sessionId}')">
                <div class="session-header">
                    <span class="channel ${conv.channel}">${conv.channel}</span>
                    <span class="status ${session.status}">${session.status}</span>
                    ${sIndex === 0 ? '<span class="conv-badge">原始</span>' : `<span class="conv-badge">压缩 #${sIndex}</span>`}
                </div>
                <div class="meta">
                    <span class="model">${session.model}</span>
                    <span>${formatTime(session.startedAt)}</span>
                </div>
                <div class="tokens">
                    📊 ${formatNumber(session.totalTokens)} tokens · 📨 ${session.messageCount} 条消息
                </div>
                <div class="conv-time">
                    ${formatTime(session.startedAt)} → ${formatTime(session.updatedAt)}
                </div>
            </div>
        `).join('')}
    `;
}

// 返回对话汇总
function backToConversations() {
    switchView('conversations');
    document.querySelectorAll('.conversation-item').forEach(el => el.classList.remove('active'));
}

// 初始化
loadAgents();