feat: 实现会话管理功能

- 实现会话列表 API
- 实现会话详情 API
- 实现终止会话 API
- 添加会话管理页面 UI
- 添加会话管理样式
- 添加会话管理交互脚本

api/sessions.py

@@ -5,15 +5,88 @@
 作者：小白 🐶
 """
 
-from flask import jsonify
+import json
+import subprocess
+from flask import jsonify, request
 from . import api
 
 @api.route('/sessions')
 def get_sessions():
     """获取会话列表"""
-    # TODO: 实现 OpenClaw 会话查询
-    return jsonify({
-        'success': True,
-        'data': [],
-        'message': '会话管理功能开发中'
-    })
+    try:
+        # 调用 sessions_list 命令
+        result = subprocess.run(
+            ['sessions_list'],
+            capture_output=True,
+            text=True,
+            timeout=10
+        )
+        
+        if result.returncode == 0:
+            data = json.loads(result.stdout)
+            return jsonify({
+                'success': True,
+                'data': data
+            })
+        else:
+            return jsonify({
+                'success': False,
+                'error': result.stderr
+            })
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        })
+
+@api.route('/sessions/<session_key>')
+def get_session_detail(session_key):
+    """获取会话详情"""
+    try:
+        # 获取会话历史
+        result = subprocess.run(
+            ['sessions_history', '--session-key', session_key, '--limit', '20'],
+            capture_output=True,
+            text=True,
+            timeout=10
+        )
+        
+        if result.returncode == 0:
+            data = json.loads(result.stdout)
+            return jsonify({
+                'success': True,
+                'data': data
+            })
+        else:
+            return jsonify({
+                'success': False,
+                'error': result.stderr
+            })
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        })
+
+@api.route('/sessions/<session_key>/kill', methods=['POST'])
+def kill_session(session_key):
+    """终止会话"""
+    try:
+        # 调用 subagents kill 命令
+        result = subprocess.run(
+            ['subagents', 'kill', '--target', session_key],
+            capture_output=True,
+            text=True,
+            timeout=10
+        )
+        
+        return jsonify({
+            'success': result.returncode == 0,
+            'message': '会话已终止' if result.returncode == 0 else '终止失败',
+            'output': result.stdout or result.stderr
+        })
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        })

static/css/dashboard.css

@@ -436,6 +436,229 @@ body {
     color: var(--text-secondary);
 }
 
+/* 会话管理 */
+.section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.btn-refresh {
+    padding: 8px 16px;
+    background: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: opacity 0.3s;
+}
+
+.btn-refresh:hover {
+    opacity: 0.8;
+}
+
+.sessions-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.session-card {
+    background: var(--card-bg);
+    border-radius: 10px;
+    padding: 16px 20px;
+    border: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    transition: all 0.3s ease;
+}
+
+.session-card:hover {
+    transform: translateX(4px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.session-icon {
+    font-size: 28px;
+}
+
+.session-info {
+    flex: 1;
+}
+
+.session-name {
+    font-size: 15px;
+    font-weight: 500;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.session-meta {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.session-status {
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.session-status.active {
+    background: rgba(72, 187, 120, 0.2);
+    color: var(--success-color);
+}
+
+.session-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.btn-view, .btn-kill {
+    padding: 6px 12px;
+    border: none;
+    border-radius: 6px;
+    font-size: 13px;
+    cursor: pointer;
+    transition: opacity 0.3s;
+}
+
+.btn-view {
+    background: var(--primary-color);
+    color: white;
+}
+
+.btn-kill {
+    background: var(--danger-color);
+    color: white;
+}
+
+.btn-view:hover, .btn-kill:hover {
+    opacity: 0.8;
+}
+
+/* 模态框 */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal.show {
+    display: flex;
+}
+
+.modal-content {
+    background: var(--card-bg);
+    border-radius: 12px;
+    width: 90%;
+    max-width: 600px;
+    max-height: 80vh;
+    overflow: hidden;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.modal-header h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.modal-close {
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: var(--text-secondary);
+}
+
+.modal-body {
+    padding: 20px;
+    max-height: 50vh;
+    overflow-y: auto;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 16px 20px;
+    border-top: 1px solid var(--border-color);
+}
+
+.btn-danger, .btn-secondary {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: opacity 0.3s;
+}
+
+.btn-danger {
+    background: var(--danger-color);
+    color: white;
+}
+
+.btn-secondary {
+    background: var(--border-color);
+    color: var(--text-primary);
+}
+
+.btn-danger:hover, .btn-secondary:hover {
+    opacity: 0.8;
+}
+
+/* 详情列表 */
+.detail-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.detail-item {
+    display: flex;
+    padding: 10px 0;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.detail-item:last-child {
+    border-bottom: none;
+}
+
+.detail-label {
+    width: 120px;
+    color: var(--text-secondary);
+    font-size: 14px;
+}
+
+.detail-value {
+    flex: 1;
+    color: var(--text-primary);
+    font-size: 14px;
+    word-break: break-all;
+}
+
 /* 响应式 */
 @media (max-width: 768px) {
     .sidebar {

static/js/dashboard.js

@@ -3,6 +3,8 @@
  * 作者：小白 🐶
  */
 
+let currentSessionKey = null;
+
 // 页面切换
 document.querySelectorAll('.nav-item').forEach(item => {
     item.addEventListener('click', (e) => {
@@ -16,6 +18,11 @@ document.querySelectorAll('.nav-item').forEach(item => {
         item.classList.add('active');
         const pageId = 'page-' + item.dataset.page;
         document.getElementById(pageId).classList.add('active');
+        
+        // 如果是会话管理页面，加载数据
+        if (item.dataset.page === 'sessions') {
+            fetchSessions();
+        }
     });
 });
 
@@ -50,6 +57,174 @@ async function fetchStatus() {
     }
 }
 
+// 获取会话列表
+async function fetchSessions() {
+    const container = document.getElementById('sessions-list');
+    container.innerHTML = '<div class="loading">加载中...</div>';
+    
+    try {
+        const response = await fetch('/api/sessions');
+        const result = await response.json();
+        
+        if (result.success && result.data.sessions) {
+            if (result.data.sessions.length === 0) {
+                container.innerHTML = '<div class="empty-message">暂无活跃会话</div>';
+                return;
+            }
+            
+            container.innerHTML = '';
+            result.data.sessions.forEach(session => {
+                const card = createSessionCard(session);
+                container.appendChild(card);
+            });
+        } else {
+            container.innerHTML = '<div class="error-message">加载失败: ' + (result.error || '未知错误') + '</div>';
+        }
+    } catch (error) {
+        container.innerHTML = '<div class="error-message">加载失败: ' + error.message + '</div>';
+    }
+}
+
+// 创建会话卡片
+function createSessionCard(session) {
+    const card = document.createElement('div');
+    card.className = 'session-card';
+    
+    const updateTime = new Date(session.updatedAt).toLocaleString('zh-CN');
+    const isActive = Date.now() - session.updatedAt < 300000; // 5分钟内活跃
+    
+    card.innerHTML = `
+        <div class="session-header">
+            <span class="session-icon">${session.kind === 'qqbot' ? '💬' : '🌐'}</span>
+            <div class="session-info">
+                <div class="session-name">${session.displayName || session.key.split(':').pop()}</div>
+                <div class="session-meta">
+                    <span class="channel">${session.channel || 'unknown'}</span>
+                    <span class="model">${session.model || 'unknown'}</span>
+                </div>
+            </div>
+            <span class="session-status ${isActive ? 'active' : 'inactive'}">
+                ${isActive ? '活跃' : '离线'}
+            </span>
+        </div>
+        <div class="session-details">
+            <div class="detail-item">
+                <span class="label">Token 使用:</span>
+                <span class="value">${session.totalTokens || 0} / ${session.contextTokens || 0}</span>
+            </div>
+            <div class="detail-item">
+                <span class="label">最后活动:</span>
+                <span class="value">${updateTime}</span>
+            </div>
+        </div>
+        <div class="session-actions">
+            <button class="btn-view" onclick="viewSession('${session.key}')">📋 查看详情</button>
+            <button class="btn-kill" onclick="confirmKillSession('${session.key}')">🗑️ 终止</button>
+        </div>
+    `;
+    
+    return card;
+}
+
+// 查看会话详情
+async function viewSession(sessionKey) {
+    currentSessionKey = sessionKey;
+    const modal = document.getElementById('session-modal');
+    const detail = document.getElementById('session-detail');
+    
+    modal.classList.add('show');
+    detail.innerHTML = '<div class="loading">加载中...</div>';
+    
+    try {
+        const response = await fetch(`/api/sessions/${encodeURIComponent(sessionKey)}`);
+        const result = await response.json();
+        
+        if (result.success && result.data) {
+            detail.innerHTML = `
+                <div class="detail-section">
+                    <h4>基本信息</h4>
+                    <div class="detail-grid">
+                        <div class="detail-item">
+                            <span class="label">会话 Key:</span>
+                            <span class="value code">${sessionKey}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="label">渠道:</span>
+                            <span class="value">${result.data.channel || '-'}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="label">模型:</span>
+                            <span class="value">${result.data.model || '-'}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="detail-section">
+                    <h4>最近消息 (最近 ${result.data.messages?.length || 0} 条)</h4>
+                    <div class="message-list">
+                        ${(result.data.messages || []).map(msg => `
+                            <div class="message-item ${msg.role}">
+                                <span class="role">${msg.role === 'user' ? '👤 用户' : '🤖 助手'}</span>
+                                <div class="content">${escapeHtml(msg.content?.substring(0, 200) || '')}${msg.content?.length > 200 ? '...' : ''}</div>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+            `;
+        } else {
+            detail.innerHTML = '<div class="error-message">加载失败</div>';
+        }
+    } catch (error) {
+        detail.innerHTML = '<div class="error-message">加载失败: ' + error.message + '</div>';
+    }
+}
+
+// 确认终止会话
+function confirmKillSession(sessionKey) {
+    if (confirm('确定要终止这个会话吗？此操作不可撤销。')) {
+        killSession(sessionKey);
+    }
+}
+
+// 终止当前会话
+async function killCurrentSession() {
+    if (currentSessionKey) {
+        await killSession(currentSessionKey);
+        closeSessionModal();
+    }
+}
+
+// 终止会话
+async function killSession(sessionKey) {
+    try {
+        const response = await fetch(`/api/sessions/${encodeURIComponent(sessionKey)}/kill`, {
+            method: 'POST'
+        });
+        const result = await response.json();
+        
+        if (result.success) {
+            alert('会话已终止');
+            fetchSessions();
+        } else {
+            alert('终止失败: ' + (result.error || result.message));
+        }
+    } catch (error) {
+        alert('终止失败: ' + error.message);
+    }
+}
+
+// 关闭模态框
+function closeSessionModal() {
+    document.getElementById('session-modal').classList.remove('show');
+    currentSessionKey = null;
+}
+
+// HTML 转义
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
 // 刷新状态
 function refreshStatus() {
     fetchStatus();
@@ -61,4 +236,11 @@ document.addEventListener('DOMContentLoaded', () => {
     
     // 每 30 秒自动刷新
     setInterval(fetchStatus, 30000);
+    
+    // 点击模态框背景关闭
+    document.getElementById('session-modal').addEventListener('click', (e) => {
+        if (e.target.id === 'session-modal') {
+            closeSessionModal();
+        }
+    });
 });

templates/dashboard/index.html

@@ -107,12 +107,34 @@
             </div>
         </div>
         
-        <!-- 其他页面占位 -->
+        <!-- 会话管理页面 -->
         <div id="page-sessions" class="page">
             <h1 class="page-title">💬 会话管理</h1>
-            <div class="coming-soon">
-                <span class="icon">🚧</span>
-                <p>功能开发中...</p>
+            
+            <div class="section-header">
+                <h2 class="section-title">活跃会话列表</h2>
+                <button class="btn-refresh" onclick="fetchSessions()">🔄 刷新</button>
+            </div>
+            
+            <div class="sessions-list" id="sessions-list">
+                <div class="loading">加载中...</div>
+            </div>
+            
+            <!-- 会话详情模态框 -->
+            <div id="session-modal" class="modal">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h3>📋 会话详情</h3>
+                        <button class="modal-close" onclick="closeSessionModal()">&times;</button>
+                    </div>
+                    <div class="modal-body" id="session-detail">
+                        <!-- 动态填充 -->
+                    </div>
+                    <div class="modal-footer">
+                        <button class="btn-danger" onclick="killCurrentSession()">🗑️ 终止会话</button>
+                        <button class="btn-secondary" onclick="closeSessionModal()">关闭</button>
+                    </div>
+                </div>
             </div>
         </div>