@agentunion/kite 1.3.2 → 1.5.0

package/extensions/services/evol/static/js/stats.js

@@ -0,0 +1,217 @@
+// Stats functions
+
+let currentPeriod = 'day';
+let currentDate = new Date().toISOString().split('T')[0];
+
+async function loadCreditsStats(period = 'day', date = null) {
+    const kiteToken = localStorage.getItem('evol_kite_token');
+    if (!kiteToken) {
+        document.getElementById('stats-content').innerHTML = '<p>请先登录</p>';
+        return;
+    }
+
+    currentPeriod = period;
+    if (date) {
+        currentDate = date;
+    }
+
+    try {
+        const response = await fetch('/api/get_credits_stats', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                kiteToken,
+                period,
+                date: currentDate
+            })
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+            renderStats(result.data);
+        } else {
+            document.getElementById('stats-content').innerHTML = `<p class="error">${result.msg}</p>`;
+        }
+    } catch (error) {
+        document.getElementById('stats-content').innerHTML = '<p class="error">加载失败</p>';
+    }
+}
+
+function renderStats(data) {
+    const consumed = data.consumed || 0;
+    const recovered = data.recovered || 0;
+    const netChange = recovered - consumed;
+    const changeText = netChange > 0 ? `+${netChange}` : netChange;
+
+    let html = `
+        <div class="panel">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+                <h3 class="panel-title" style="margin: 0;">${data.date}</h3>
+                <div style="display: flex; gap: 8px;">
+                    <button class="btn btn-sm ${currentPeriod === 'day' ? 'btn-primary' : 'btn-secondary'}" onclick="switchPeriod('day')">按天</button>
+                    <button class="btn btn-sm ${currentPeriod === 'week' ? 'btn-primary' : 'btn-secondary'}" onclick="switchPeriod('week')">按周</button>
+                    <button class="btn btn-sm ${currentPeriod === 'month' ? 'btn-primary' : 'btn-secondary'}" onclick="switchPeriod('month')">按月</button>
+                </div>
+            </div>
+
+            <div class="stats-row" style="margin-bottom: 20px;">
+                <div class="stat-card">
+                    <div class="stat-value">${data.startCredits}</div>
+                    <div class="stat-label">起始积分</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">${data.endCredits}</div>
+                    <div class="stat-label">结束积分</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value" style="color: var(--error)">${consumed}</div>
+                    <div class="stat-label">消耗</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value" style="color: var(--success)">${recovered}</div>
+                    <div class="stat-label">恢复</div>
+                </div>
+            </div>
+
+            <div style="background: var(--white); padding: 20px; border-radius: 8px; border: 1px solid var(--gray-200); margin-bottom: 16px;">
+                <canvas id="creditsChart" style="width: 100%; height: 300px;"></canvas>
+            </div>
+
+            <div style="display: flex; justify-content: center; gap: 10px;">
+                <button class="btn btn-secondary" onclick="prevDate()">← 上一${getPeriodName()}</button>
+                <button class="btn btn-primary" onclick="today()">今天</button>
+                <button class="btn btn-secondary" onclick="nextDate()">下一${getPeriodName()} →</button>
+            </div>
+        </div>
+    `;
+
+    document.getElementById('stats-content').innerHTML = html;
+
+    // Render chart
+    renderChart(data.dataPoints);
+}
+
+function renderChart(dataPoints) {
+    const canvas = document.getElementById('creditsChart');
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+
+    // Simple line chart implementation
+    if (dataPoints.length === 0) {
+        ctx.fillText('暂无数据', canvas.width / 2, canvas.height / 2);
+        return;
+    }
+
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Set canvas size
+    canvas.width = canvas.offsetWidth;
+    canvas.height = 300;
+
+    const padding = 40;
+    const width = canvas.width - padding * 2;
+    const height = canvas.height - padding * 2;
+
+    // Find min/max
+    const credits = dataPoints.map(p => p.credits);
+    const minCredits = Math.min(...credits);
+    const maxCredits = Math.max(...credits);
+    const range = maxCredits - minCredits || 1;
+
+    // Draw axes
+    ctx.strokeStyle = '#e0e0e0';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(padding, padding);
+    ctx.lineTo(padding, padding + height);
+    ctx.lineTo(padding + width, padding + height);
+    ctx.stroke();
+
+    // Draw line
+    ctx.strokeStyle = '#1890ff';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+
+    dataPoints.forEach((point, i) => {
+        const x = padding + (i / (dataPoints.length - 1 || 1)) * width;
+        const y = padding + height - ((point.credits - minCredits) / range) * height;
+
+        if (i === 0) {
+            ctx.moveTo(x, y);
+        } else {
+            ctx.lineTo(x, y);
+        }
+    });
+
+    ctx.stroke();
+
+    // Draw points
+    ctx.fillStyle = '#1890ff';
+    dataPoints.forEach((point, i) => {
+        const x = padding + (i / (dataPoints.length - 1 || 1)) * width;
+        const y = padding + height - ((point.credits - minCredits) / range) * height;
+
+        ctx.beginPath();
+        ctx.arc(x, y, 3, 0, Math.PI * 2);
+        ctx.fill();
+    });
+
+    // Draw labels
+    ctx.fillStyle = '#666';
+    ctx.font = '12px sans-serif';
+    ctx.textAlign = 'right';
+    ctx.fillText(maxCredits.toString(), padding - 5, padding + 5);
+    ctx.fillText(minCredits.toString(), padding - 5, padding + height + 5);
+}
+
+function switchPeriod(period) {
+    loadCreditsStats(period, currentDate);
+}
+
+function getPeriodName() {
+    return currentPeriod === 'day' ? '天' : currentPeriod === 'week' ? '周' : '月';
+}
+
+function prevDate() {
+    const date = new Date(currentDate);
+    if (currentPeriod === 'day') {
+        date.setDate(date.getDate() - 1);
+    } else if (currentPeriod === 'week') {
+        date.setDate(date.getDate() - 7);
+    } else {
+        date.setMonth(date.getMonth() - 1);
+    }
+    currentDate = date.toISOString().split('T')[0];
+    loadCreditsStats(currentPeriod, currentDate);
+}
+
+function nextDate() {
+    const date = new Date(currentDate);
+    if (currentPeriod === 'day') {
+        date.setDate(date.getDate() + 1);
+    } else if (currentPeriod === 'week') {
+        date.setDate(date.getDate() + 7);
+    } else {
+        date.setMonth(date.getMonth() + 1);
+    }
+    currentDate = date.toISOString().split('T')[0];
+    loadCreditsStats(currentPeriod, currentDate);
+}
+
+function today() {
+    currentDate = new Date().toISOString().split('T')[0];
+    loadCreditsStats(currentPeriod, currentDate);
+}
+
+// Auto load stats when switching to stats tab
+document.addEventListener('DOMContentLoaded', () => {
+    const statsTab = document.querySelector('[data-tab="stats"]');
+    if (statsTab) {
+        statsTab.addEventListener('click', () => {
+            setTimeout(() => loadCreditsStats(), 100);
+        });
+    }
+});

package/extensions/services/evol/static/js/token-manager.js

@@ -0,0 +1,175 @@
+/**
+ * Token Management
+ * Handles token listing, revocation, and statistics via WebSocket RPC
+ */
+
+// Load tokens on page load
+async function loadTokens() {
+  console.log('[evol] loadTokens() called');
+
+  // 立即显示加载中
+  const tbody = document.getElementById('tokens-tbody');
+  tbody.innerHTML = `
+    <tr><td colspan="6" class="text-muted" style="text-align:center;padding:40px;">
+      加载中...
+    </td></tr>
+  `;
+
+  try {
+    // Use kernel client to call RPC
+    if (!kernelClient || !kernelClient.connected) {
+      console.error('[evol] kernelClient not ready:', { kernelClient, connected: kernelClient?.connected });
+      throw new Error('WebSocket 未连接');
+    }
+
+    console.log('[evol] Calling evol.list_tokens...');
+    const result = await kernelClient.call('evol.list_tokens', {});
+    console.log('[evol] Got result:', result);
+    renderTokens(result.tokens || []);
+  } catch (err) {
+    console.error('[evol] Failed to load tokens:', err);
+
+    // 根据错误类型显示不同的提示
+    let errorMsg = err.message;
+    if (errorMsg.includes('Permission denied')) {
+      errorMsg = '权限不足：当前用户没有查看 Token 的权限';
+    } else if (errorMsg.includes('not connected') || errorMsg.includes('未连接')) {
+      errorMsg = 'WebSocket 未连接，请刷新页面重试';
+    }
+
+    tbody.innerHTML = `
+      <tr><td colspan="6" class="text-danger" style="text-align:center;padding:40px;">
+        加载失败: ${errorMsg}
+      </td></tr>
+    `;
+  }
+}
+
+// Render tokens table
+function renderTokens(tokens) {
+  const tbody = document.getElementById('tokens-tbody');
+
+  if (tokens.length === 0) {
+    tbody.innerHTML = `
+      <tr><td colspan="6" class="text-muted" style="text-align:center;padding:40px;">
+        暂无 Token
+      </td></tr>
+    `;
+    return;
+  }
+
+  tbody.innerHTML = tokens.map(token => {
+    const isExpired = new Date(token.expires_at) < new Date();
+    const statusClass = isExpired ? 'text-danger' : 'text-success';
+    const statusText = isExpired ? '已过期' : '活跃';
+
+    // Mask token for security (show first 8 and last 4 chars)
+    const maskedToken = token.token.length > 12
+      ? `${token.token.substring(0, 8)}...${token.token.substring(token.token.length - 4)}`
+      : token.token;
+
+    return `
+      <tr>
+        <td style="font-family:monospace;font-size:12px;" title="${token.token}">${maskedToken}</td>
+        <td><span class="badge badge-${getRoleBadgeClass(token.role)}">${token.role}</span></td>
+        <td style="font-size:12px;">${formatDateTime(token.paired_at)}</td>
+        <td style="font-size:12px;">${formatDateTime(token.expires_at)}</td>
+        <td><span class="${statusClass}">${statusText}</span></td>
+        <td>
+          <button class="btn btn-sm btn-danger" onclick="revokeToken('${token.token}')" ${isExpired ? 'disabled' : ''}>
+            吊销
+          </button>
+        </td>
+      </tr>
+    `;
+  }).join('');
+}
+
+// Get role badge class
+function getRoleBadgeClass(role) {
+  const classes = {
+    'admin': 'primary',
+    'operator': 'warning',
+    'viewer': 'secondary'
+  };
+  return classes[role] || 'secondary';
+}
+
+// Format datetime
+function formatDateTime(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'
+  });
+}
+
+// Revoke token
+async function revokeToken(token) {
+  try {
+    if (!kernelClient || !kernelClient.connected) {
+      throw new Error('WebSocket 未连接');
+    }
+
+    // 立即变灰并禁用
+    const row = event.target.closest('tr');
+    if (row) {
+      row.style.opacity = '0.3';
+      row.style.pointerEvents = 'none';
+    }
+
+    // 后台调用 RPC 吊销
+    await kernelClient.call('evol.revoke_token', { token });
+
+  } catch (err) {
+    console.error('[evol] Failed to revoke token:', err);
+
+    // 失败后恢复该行
+    const row = event.target.closest('tr');
+    if (row) {
+      row.style.opacity = '1';
+      row.style.pointerEvents = 'auto';
+    }
+
+    // 显示错误提示
+    const errorMsg = err.message.includes('Permission denied')
+      ? '权限不足：无法吊销 Token'
+      : `吊销失败: ${err.message}`;
+
+    console.error('[evol]', errorMsg);
+  }
+}
+
+// Refresh tokens
+function refreshTokens() {
+  loadTokens();
+}
+
+// Auto-load tokens when modules page is shown
+document.addEventListener('DOMContentLoaded', () => {
+  // Load tokens when switching to modules page
+  const modulesNav = document.querySelector('[data-page="modules"]');
+  if (modulesNav) {
+    modulesNav.addEventListener('click', () => {
+      // Wait a bit for page switch, then load tokens
+      setTimeout(() => {
+        console.log('[evol] Modules page clicked, loading tokens...');
+        loadTokens();
+      }, 100);
+    });
+  }
+
+  // Wait for kernelClient to be ready before loading tokens
+  window.addEventListener('kernelClientReady', () => {
+    console.log('[evol] kernelClient ready');
+    // Load tokens if modules page is active on load
+    if (document.getElementById('page-modules').classList.contains('active')) {
+      console.log('[evol] Modules page is active, loading tokens...');
+      loadTokens();
+    }
+  });
+});

package/extensions/services/evol/static/pairing.html

@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kite 配对</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .container {
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            padding: 40px;
+            max-width: 400px;
+            width: 100%;
+        }
+
+        h1 {
+            font-size: 28px;
+            color: #333;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+
+        .subtitle {
+            color: #666;
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 14px;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        label {
+            display: block;
+            color: #555;
+            font-size: 14px;
+            margin-bottom: 8px;
+            font-weight: 500;
+        }
+
+        input {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: border-color 0.3s;
+        }
+
+        input:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        button {
+            width: 100%;
+            padding: 14px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+        }
+
+        button:active {
+            transform: translateY(0);
+        }
+
+        button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .message {
+            margin-top: 20px;
+            padding: 12px;
+            border-radius: 8px;
+            font-size: 14px;
+            text-align: center;
+        }
+
+        .message.error {
+            background: #fee;
+            color: #c33;
+            border: 1px solid #fcc;
+        }
+
+        .message.success {
+            background: #efe;
+            color: #3c3;
+            border: 1px solid #cfc;
+        }
+
+        .message.info {
+            background: #eef;
+            color: #33c;
+            border: 1px solid #ccf;
+        }
+
+        .hint {
+            margin-top: 20px;
+            padding: 12px;
+            background: #f5f5f5;
+            border-radius: 8px;
+            font-size: 13px;
+            color: #666;
+        }
+
+        .hint strong {
+            color: #333;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🚀 Kite 配对</h1>
+        <p class="subtitle">输入配对码以连接到 Kite 系统</p>
+
+        <div class="form-group">
+            <label for="code">配对码</label>
+            <input type="text" id="code" placeholder="输入 6 位配对码" maxlength="6" autocomplete="off">
+        </div>
+
+        <button id="pairBtn">配对</button>
+
+        <div id="message"></div>
+
+        <div class="hint">
+            <strong>如何获取配对码？</strong><br>
+            配对码会在 Kite 启动时自动生成并显示在控制台（绿色高亮）<br>
+            每个配对码只能使用一次，使用后会自动生成新的配对码
+        </div>
+    </div>
+
+    <script src="js/kernel-client.js"></script>
+    <script>
+        const codeInput = document.getElementById('code');
+        const pairBtn = document.getElementById('pairBtn');
+        const messageDiv = document.getElementById('message');
+
+        // 页面加载时请求配对码
+        window.addEventListener('DOMContentLoaded', async () => {
+            showMessage('正在生成配对码...', 'info');
+
+            try {
+                // 连接 WebSocket 请求配对码
+                const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+                const ws = new WebSocket(`${proto}//${location.host}/ws/relay`);
+
+                ws.onopen = () => {
+                    // 请求配对码
+                    ws.send(JSON.stringify({ type: 'request_code' }));
+                };
+
+                ws.onmessage = (event) => {
+                    const msg = JSON.parse(event.data);
+
+                    if (msg.type === 'code_generated') {
+                        showMessage(`配对码已生成，请查看控制台`, 'success');
+                        codeInput.focus();
+                    } else if (msg.type === 'error') {
+                        showMessage(`生成配对码失败: ${msg.message}`, 'error');
+                    }
+                };
+
+                ws.onerror = () => {
+                    showMessage('连接失败，请刷新页面重试', 'error');
+                };
+
+            } catch (err) {
+                showMessage(`生成配对码失败: ${err.message}`, 'error');
+            }
+        });
+
+        // 回车提交
+        codeInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                pairBtn.click();
+            }
+        });
+
+        // 配对
+        pairBtn.addEventListener('click', async () => {
+            const code = codeInput.value.trim();
+
+            if (!code) {
+                showMessage('请输入配对码', 'error');
+                return;
+            }
+
+            pairBtn.disabled = true;
+            showMessage('正在配对...', 'info');
+
+            try {
+                // 创建 Kernel 客户端
+                const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+                const client = new KernelClient(`${proto}//${location.host}/ws/relay`);
+
+                // 配对
+                const result = await client.pair(code);
+
+                showMessage(`配对成功！模块 ID: ${result.moduleId}`, 'success');
+
+                // 2 秒后跳转
+                setTimeout(() => {
+                    window.location.href = '/';
+                }, 2000);
+
+            } catch (err) {
+                showMessage(`配对失败: ${err.message}`, 'error');
+                pairBtn.disabled = false;
+            }
+        });
+
+        function showMessage(text, type) {
+            messageDiv.textContent = text;
+            messageDiv.className = `message ${type}`;
+        }
+    </script>
+</body>
+</html>