Spaces:

PHhTTPS
/

ProxyCLI

Sleeping

File size: 11,889 Bytes

<!-- Build Trigger: 1 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CLIProxyAPI Status</title>
    <style>
        :root {
            --bg-primary: #0f1117;
            --bg-secondary: #1e212b;
            --text-primary: #e2e8f0;
            --text-secondary: #94a3b8;
            --accent: #3b82f6;
            --border: #334155;
            --success: #22c55e;
            --warning: #f59e0b;
            --error: #ef4444;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            margin: 0;
            padding: 20px;
            line-height: 1.5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        h1, h2 { color: var(--text-primary); }
        .card {
            background: var(--bg-secondary);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid var(--border);
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }
        th { color: var(--text-secondary); font-weight: 600; }
        .badge {
            padding: 4px 8px;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 600;
        }
        .badge-success { background: rgba(34, 197, 94, 0.1); color: var(--success); }
        .badge-warning { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
        .badge-error { background: rgba(239, 68, 68, 0.1); color: var(--error); }
        .btn {
            background: var(--accent);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
        }
        .btn:hover { opacity: 0.9; }
        .btn-secondary {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-secondary);
        }
        .btn-secondary:hover { border-color: var(--text-primary); color: var(--text-primary); }
        .flex-between {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        /* Login Modal - Visible by default for immediate auth */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 1;
            transition: opacity 0.3s ease-in-out;
        }
        .modal-overlay.hidden {
            opacity: 0;
            pointer-events: none;
            display: none;
        }
        .modal {
            background: var(--bg-secondary);
            padding: 30px;
            border-radius: 12px;
            width: 100%;
            max-width: 400px;
            border: 1px solid var(--border);
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        }
        .input-group {
            margin-bottom: 20px;
        }
        .input-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--text-secondary);
        }
        .input-group input {
            width: 100%;
            padding: 10px;
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-primary);
            box-sizing: border-box;
        }
        .error-msg {
            color: var(--error);
            font-size: 14px;
            margin-top: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <!-- Login Modal -->
    <div id="login-modal" class="modal-overlay">
        <div class="modal">
            <h2 style="margin-top: 0">Authentication Required</h2>
            <p style="color: var(--text-secondary)">Please enter your management secret key.</p>
            <form id="login-form">
                <div class="input-group">
                    <label for="mgmt-key">Management Key</label>
                    <input type="password" id="mgmt-key" placeholder="Enter key..." required autocomplete="current-password">
                </div>
                <div id="login-error" class="error-msg">Invalid key or connection failed</div>
                <button type="submit" class="btn" style="width: 100%">Connect</button>
            </form>
        </div>
    </div>

    <div class="container">
        <div class="flex-between">
            <h1>System Status</h1>
            <div style="display: flex; gap: 10px;">
                <button class="btn" onclick="fetchData()">Refresh</button>
                <button class="btn btn-secondary" onclick="handleLogout()">Logout</button>
            </div>
        </div>

        <div class="grid">
            <div class="card">
                <h2>System Info</h2>
                <div id="system-info">Loading...</div>
            </div>
            <div class="card">
                <h2>Usage Stats</h2>
                <div id="usage-stats">Loading...</div>
            </div>
        </div>

        <div class="card">
            <h2>API Keys & Providers</h2>
            <div id="providers-list">Loading...</div>
        </div>

        <div class="card">
            <h2>Recent Activity</h2>
            <div id="activity-log">Loading...</div>
        </div>
    </div>

    <script>
        // Serving from /v0/management/status.html
        const API_BASE = "/v0/management"; 

        function getKey() {
            return localStorage.getItem("managementKey");
        }

        function init() {
            const key = getKey();
            if (key) {
                document.getElementById('login-modal').classList.add('hidden');
                fetchData();
            }
        }

        document.getElementById('login-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            const keyInput = document.getElementById('mgmt-key');
            const key = keyInput.value.trim();
            if (!key) return;

            const btn = e.target.querySelector('button');
            const originalText = btn.innerText;
            btn.innerText = "Checking...";
            btn.disabled = true;

            try {
                const res = await fetch(API_BASE + "/config", {
                    headers: { "Authorization": "Bearer " + key }
                });
                
                if (res.ok) {
                    localStorage.setItem("managementKey", key);
                    localStorage.setItem("isLoggedIn", "true");
                    document.getElementById('login-modal').classList.add('hidden');
                    fetchData();
                } else {
                    showLoginError("Invalid key");
                }
            } catch (err) {
                console.error(err);
                showLoginError("Connection failed");
            } finally {
                btn.innerText = originalText;
                btn.disabled = false;
            }
        });

        function showLoginError(msg) {
            const el = document.getElementById('login-error');
            el.innerText = msg;
            el.style.display = 'block';
        }

        function handleLogout() {
            localStorage.removeItem("managementKey");
            localStorage.removeItem("isLoggedIn");
            location.reload();
        }

        async function fetchData() {
            const key = getKey();
            if (!key) return;

            const headers = { "Authorization": "Bearer " + key };

            try {
                const [configRes, usageRes] = await Promise.all([
                    fetch(API_BASE + "/config", { headers }),
                    fetch(API_BASE + "/usage", { headers })
                ]);

                if (configRes.status === 401 || usageRes.status === 401) {
                    handleLogout();
                    return;
                }

                const config = await configRes.json();
                const usage = await usageRes.json();

                renderSystemInfo(config);
                renderUsageStats(usage);
                renderProviders(config, usage);
                renderActivity(usage);
            } catch (error) {
                console.error("Error fetching data:", error);
                document.getElementById("system-info").innerHTML = `<div class="badge badge-error">Connection Error</div>`;
            }
        }

        function renderSystemInfo(config) {
            const html = `
                <p><strong>Proxy URL:</strong> ${config.proxyUrl || "Direct"}</p>
                <p><strong>Debug Mode:</strong> <span class="badge ${config.debug ? "badge-warning" : "badge-success"}">${config.debug ? "Enabled" : "Disabled"}</span></p>
                <p><strong>Routing:</strong> ${config.routingStrategy || "Round Robin"}</p>
                <p><strong>Free APIs:</strong> <span class="badge ${config.freeapis?.enabled ? "badge-success" : "badge-error"}">${config.freeapis?.enabled ? "Enabled" : "Disabled"}</span></p>
            `;
            document.getElementById("system-info").innerHTML = html;
        }

        function renderUsageStats(usage) {
            const totalRequests = usage.total_requests || 0;
            const totalTokens = usage.total_tokens || 0;
            
            const html = `
                <p><strong>Total Requests:</strong> ${totalRequests.toLocaleString()}</p>
                <p><strong>Total Tokens:</strong> ${totalTokens.toLocaleString()}</p>
            `;
            document.getElementById("usage-stats").innerHTML = html;
        }

        function renderProviders(config, usage) {
            let html = "<table><thead><tr><th>Provider / Model</th><th>Type</th><th>Key Configured</th></tr></thead><tbody>";
            
            if (config.openaiCompatibility) {
                config.openaiCompatibility.forEach(p => {
                    html += `<tr>
                        <td>${p.name}</td>
                        <td><span class="badge badge-success">OpenAI Compat</span></td>
                        <td>${p.apiKeyEntries?.length || 0} keys</td>
                    </tr>`;
                });
            }

            if (config.geminiApiKeys) {
                html += `<tr>
                    <td>Gemini (Google)</td>
                    <td><span class="badge badge-success">Native</span></td>
                    <td>${config.geminiApiKeys.length} keys</td>
                </tr>`;
            }

            if (config.freeapis && config.freeapis.enabled) {
                 html += `<tr>
                    <td>Free APIs (g4f/Cohere)</td>
                    <td><span class="badge badge-warning">Proxy</span></td>
                    <td>Automatic</td>
                </tr>`;
            }

            html += "</tbody></table>";
            document.getElementById("providers-list").innerHTML = html;
        }

        function renderActivity(usage) {
            document.getElementById("activity-log").innerHTML = "<p>Check logs for detailed activity.</p>";
        }

        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>