logic855
/
letta-switchboard
mirror of https://github.com/cpfiffer/letta-switchboard.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657
							<!DOCTYPE html>
<html>
<head>
    <title>Switchboard Dashboard</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8f9fa;
            color: #1a1a1a;
            padding: 24px;
            line-height: 1.6;
        }
        .container { max-width: 1100px; margin: 0 auto; }

        /* Header */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 16px;
        }
        .header h1 {
            font-size: 24px;
            font-weight: 600;
        }
        .header-links {
            display: flex;
            gap: 16px;
        }
        .header-links a {
            color: #666;
            text-decoration: none;
            font-size: 14px;
        }
        .header-links a:hover {
            color: #1a1a1a;
        }

        h2 {
            font-size: 16px;
            font-weight: 600;
            margin: 24px 0 12px 0;
            color: #1a1a1a;
        }

        /* API Key Section */
        .card {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .card-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 12px;
            color: #666;
        }
        #api-key-section input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 14px;
            margin-bottom: 12px;
        }
        #api-key-section input:focus {
            outline: none;
            border-color: #1a1a1a;
        }
        .btn-group {
            display: flex;
            gap: 8px;
        }

        /* Buttons */
        button, .btn {
            background: #1a1a1a;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
        }
        button:hover { background: #333; }
        button.secondary {
            background: white;
            color: #1a1a1a;
            border: 1px solid #e0e0e0;
        }
        button.secondary:hover {
            background: #f5f5f5;
        }
        button.danger {
            background: white;
            color: #dc2626;
            border: 1px solid #fecaca;
        }
        button.danger:hover {
            background: #fef2f2;
        }
        button.sm {
            padding: 6px 12px;
            font-size: 13px;
        }

        /* Tabs */
        .tabs {
            display: flex;
            gap: 4px;
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 20px;
        }
        .tab {
            padding: 10px 20px;
            background: transparent;
            color: #666;
            border: none;
            border-bottom: 2px solid transparent;
            cursor: pointer;
            font-weight: 500;
            font-size: 14px;
            border-radius: 0;
            margin-bottom: -1px;
        }
        .tab:hover {
            color: #1a1a1a;
            background: transparent;
        }
        .tab.active {
            color: #1a1a1a;
            border-bottom-color: #1a1a1a;
            background: transparent;
        }

        /* Content */
        .content {
            display: none;
        }
        .content.active { display: block; }

        /* Tables */
        .table-container {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 16px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        th {
            background: #f8f9fa;
            font-weight: 600;
            font-size: 13px;
            color: #666;
        }
        tr:last-child td { border-bottom: none; }
        tr:hover td { background: #fafafa; }
        td { font-size: 14px; }

        /* Forms */
        .form-group {
            margin-bottom: 16px;
        }
        label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            font-size: 14px;
        }
        input[type="text"], input[type="datetime-local"], textarea, select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 14px;
            font-family: inherit;
        }
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: #1a1a1a;
        }
        textarea { min-height: 100px; resize: vertical; }
        .help-text { color: #666; font-size: 13px; margin-top: 4px; }

        /* Status badges */
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        .badge.success {
            background: #dcfce7;
            color: #166534;
        }
        .badge.failed {
            background: #fef2f2;
            color: #dc2626;
        }

        .hidden { display: none; }
        .error { color: #dc2626; margin-top: 8px; font-size: 14px; }
        .empty {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        /* Status indicator */
        .status-msg {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 0;
            font-size: 14px;
        }
        .status-msg.success { color: #166534; }
        .status-msg.error { color: #dc2626; }

        /* Loading spinner */
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
        .spinner {
            display: inline-block;
            width: 32px;
            height: 32px;
            border: 3px solid #e0e0e0;
            border-top-color: #1a1a1a;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-bottom: 8px;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .mono {
            font-family: 'SF Mono', Consolas, monospace;
            font-size: 13px;
        }

        @media (max-width: 768px) {
            body { padding: 16px; }
            th, td { padding: 10px 12px; }
            .header { flex-direction: column; align-items: flex-start; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Switchboard Dashboard</h1>
            <div class="header-links">
                <a href="/">Home</a>
                <a href="https://github.com/cpfiffer/letta-switchboard">Docs</a>
            </div>
        </div>

        <!-- API Key Input -->
        <div id="api-key-section" class="card">
            <div class="card-title">Authentication</div>
            <input type="password" id="api-key-input" placeholder="Enter your Letta API key (sk-let-...)">
            <div class="btn-group">
                <button onclick="saveApiKey()">Connect</button>
                <button onclick="clearApiKey()" class="secondary">Disconnect</button>
            </div>
            <div id="api-key-status"></div>
        </div>

        <div id="main-content" class="hidden">
            <!-- Tabs -->
            <div class="tabs">
                <button class="tab active" onclick="showTab('schedules')">Schedules</button>
                <button class="tab" onclick="showTab('create')">Create New</button>
                <button class="tab" onclick="showTab('results')">Results</button>
            </div>

            <!-- Schedules Tab -->
            <div id="schedules-tab" class="content active">
                <h2>One-Time Schedules</h2>
                <div class="table-container">
                    <table id="onetime-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Agent ID</th>
                                <th>Execute At</th>
                                <th>Message</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <h2>Recurring Schedules</h2>
                <div class="table-container">
                    <table id="recurring-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Agent ID</th>
                                <th>Cron</th>
                                <th>Timezone</th>
                                <th>Message</th>
                                <th>Last Run</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <button onclick="loadSchedules()" class="secondary">Refresh</button>
            </div>

            <!-- Create Tab -->
            <div id="create-tab" class="content">
                <div class="card">
                    <h2 style="margin-top: 0;">Create Schedule</h2>

                    <div class="form-group">
                        <label>Schedule Type</label>
                        <select id="schedule-type" onchange="toggleScheduleType()">
                            <option value="onetime">One-Time</option>
                            <option value="recurring">Recurring</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="agent-id">Agent ID</label>
                        <input type="text" id="agent-id" placeholder="agent-xxx">
                    </div>

                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea id="message" placeholder="Your message to the agent"></textarea>
                    </div>

                    <div id="onetime-fields">
                        <div class="form-group">
                            <label for="execute-at">Execute At</label>
                            <input type="datetime-local" id="execute-at">
                        </div>
                        <div class="form-group">
                            <label for="timezone">Timezone</label>
                            <select id="timezone">
                                <option value="local" selected>Local Browser Time</option>
                                <option value="UTC">UTC</option>
                                <option value="America/New_York">Eastern (US)</option>
                                <option value="America/Chicago">Central (US)</option>
                                <option value="America/Denver">Mountain (US)</option>
                                <option value="America/Los_Angeles">Pacific (US)</option>
                                <option value="Europe/London">London</option>
                                <option value="Europe/Paris">Paris</option>
                                <option value="Asia/Tokyo">Tokyo</option>
                            </select>
                            <div class="help-text">Time will be converted to UTC for storage</div>
                        </div>
                    </div>

                    <div id="recurring-fields" class="hidden">
                        <div class="form-group">
                            <label for="cron">Cron Expression</label>
                            <input type="text" id="cron" placeholder="0 9 * * 1-5">
                            <div class="help-text">Examples: "0 9 * * *" (daily at 9am), "*/5 * * * *" (every 5 min)</div>
                        </div>
                        <div class="form-group">
                            <label for="recurring-timezone">Timezone</label>
                            <select id="recurring-timezone">
                                <option value="UTC" selected>UTC</option>
                                <option value="America/New_York">Eastern (US)</option>
                                <option value="America/Chicago">Central (US)</option>
                                <option value="America/Denver">Mountain (US)</option>
                                <option value="America/Los_Angeles">Pacific (US)</option>
                                <option value="Europe/London">London</option>
                                <option value="Europe/Paris">Paris</option>
                                <option value="Asia/Tokyo">Tokyo</option>
                            </select>
                            <div class="help-text">Cron expression will be evaluated in this timezone</div>
                        </div>
                    </div>

                    <button onclick="createSchedule()">Create Schedule</button>
                    <div id="create-error" class="error"></div>
                </div>
            </div>

            <!-- Results Tab -->
            <div id="results-tab" class="content">
                <h2>Execution Results</h2>
                <div class="table-container">
                    <table id="results-table">
                        <thead>
                            <tr>
                                <th>Schedule ID</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Agent ID</th>
                                <th>Message</th>
                                <th>Run ID / Error</th>
                                <th>Executed At</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <button onclick="loadResults()" class="secondary">Refresh</button>
            </div>
        </div>
    </div>

    <script>
        const API_BASE = window.location.origin;
        let API_KEY = sessionStorage.getItem('letta_api_key') || '';

        // Initialize
        if (API_KEY) {
            document.getElementById('api-key-input').value = API_KEY;
            document.getElementById('main-content').classList.remove('hidden');
            loadSchedules();
            loadResults();
        }

        function saveApiKey() {
            API_KEY = document.getElementById('api-key-input').value.trim();
            if (!API_KEY) {
                showStatus('api-key-status', 'API key is required', 'error');
                return;
            }
            sessionStorage.setItem('letta_api_key', API_KEY);
            document.getElementById('main-content').classList.remove('hidden');
            showStatus('api-key-status', 'Connected successfully', 'success');
            loadSchedules();
            loadResults();
        }

        function clearApiKey() {
            sessionStorage.removeItem('letta_api_key');
            API_KEY = '';
            document.getElementById('api-key-input').value = '';
            document.getElementById('main-content').classList.add('hidden');
            showStatus('api-key-status', 'Disconnected', 'error');
        }

        function showStatus(elementId, message, type) {
            const el = document.getElementById(elementId);
            el.innerHTML = `<div class="status-msg ${type}">${message}</div>`;
        }

        function showTab(tab) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.content').forEach(c => c.classList.remove('active'));
            event.target.classList.add('active');
            document.getElementById(`${tab}-tab`).classList.add('active');
        }

        function toggleScheduleType() {
            const type = document.getElementById('schedule-type').value;
            document.getElementById('onetime-fields').classList.toggle('hidden', type !== 'onetime');
            document.getElementById('recurring-fields').classList.toggle('hidden', type !== 'recurring');
        }

        async function loadSchedules() {
            const onetimeBody = document.querySelector('#onetime-table tbody');
            const recurringBody = document.querySelector('#recurring-table tbody');

            onetimeBody.innerHTML = '<tr><td colspan="5" class="loading"><div class="spinner"></div><p>Loading...</p></td></tr>';
            recurringBody.innerHTML = '<tr><td colspan="7" class="loading"><div class="spinner"></div><p>Loading...</p></td></tr>';

            try {
                const [onetime, recurring] = await Promise.all([
                    fetch(`${API_BASE}/schedules/one-time`, {
                        headers: { 'Authorization': `Bearer ${API_KEY}` }
                    }).then(r => r.json()),
                    fetch(`${API_BASE}/schedules/recurring`, {
                        headers: { 'Authorization': `Bearer ${API_KEY}` }
                    }).then(r => r.json())
                ]);

                onetimeBody.innerHTML = onetime.length ? onetime.map(s => `
                    <tr>
                        <td class="mono">${s.id.substring(0, 8)}...</td>
                        <td class="mono">${s.agent_id}</td>
                        <td>${new Date(s.execute_at).toLocaleString()}</td>
                        <td>${truncate(s.message, 50)}</td>
                        <td><button class="danger sm" onclick="deleteSchedule('one-time', '${s.id}')">Delete</button></td>
                    </tr>
                `).join('') : '<tr><td colspan="5" class="empty">No one-time schedules</td></tr>';

                recurringBody.innerHTML = recurring.length ? recurring.map(s => `
                    <tr>
                        <td class="mono">${s.id.substring(0, 8)}...</td>
                        <td class="mono">${s.agent_id}</td>
                        <td class="mono">${s.cron}</td>
                        <td>${s.timezone || 'UTC'}</td>
                        <td>${truncate(s.message, 50)}</td>
                        <td>${s.last_run ? new Date(s.last_run).toLocaleString() : 'Never'}</td>
                        <td><button class="danger sm" onclick="deleteSchedule('recurring', '${s.id}')">Delete</button></td>
                    </tr>
                `).join('') : '<tr><td colspan="7" class="empty">No recurring schedules</td></tr>';
            } catch (error) {
                onetimeBody.innerHTML = `<tr><td colspan="5" class="empty">Error loading schedules</td></tr>`;
                recurringBody.innerHTML = `<tr><td colspan="7" class="empty">Error loading schedules</td></tr>`;
            }
        }

        async function loadResults() {
            const resultsBody = document.querySelector('#results-table tbody');

            resultsBody.innerHTML = '<tr><td colspan="7" class="loading"><div class="spinner"></div><p>Loading...</p></td></tr>';

            try {
                const results = await fetch(`${API_BASE}/results`, {
                    headers: { 'Authorization': `Bearer ${API_KEY}` }
                }).then(r => r.json());

                resultsBody.innerHTML = results.length ? results.map(r => `
                    <tr>
                        <td class="mono">${r.schedule_id.substring(0, 8)}...</td>
                        <td>${r.schedule_type}</td>
                        <td><span class="badge ${r.status}">${r.status}</span></td>
                        <td class="mono">${r.agent_id}</td>
                        <td>${truncate(r.message, 30)}</td>
                        <td class="mono">${r.run_id || r.error || '-'}</td>
                        <td>${new Date(r.executed_at).toLocaleString()}</td>
                    </tr>
                `).join('') : '<tr><td colspan="7" class="empty">No execution results</td></tr>';
            } catch (error) {
                resultsBody.innerHTML = `<tr><td colspan="7" class="empty">Error loading results</td></tr>`;
            }
        }

        async function createSchedule() {
            const type = document.getElementById('schedule-type').value;
            const agentId = document.getElementById('agent-id').value.trim();
            const message = document.getElementById('message').value.trim();
            const errorDiv = document.getElementById('create-error');

            errorDiv.textContent = '';

            if (!agentId || !message) {
                errorDiv.textContent = 'Please fill in all required fields';
                return;
            }

            try {
                const payload = {
                    agent_id: agentId,
                    message: message,
                    role: 'user'
                };

                if (type === 'onetime') {
                    const executeAt = document.getElementById('execute-at').value;
                    const timezone = document.getElementById('timezone').value;

                    if (!executeAt) {
                        errorDiv.textContent = 'Please specify execution time';
                        return;
                    }

                    let executeDate;
                    if (timezone === 'local') {
                        executeDate = new Date(executeAt);
                    } else if (timezone === 'UTC') {
                        executeDate = new Date(executeAt + 'Z');
                    } else {
                        executeDate = new Date(executeAt);
                    }

                    payload.execute_at = executeDate.toISOString();
                } else {
                    const cron = document.getElementById('cron').value.trim();
                    if (!cron) {
                        errorDiv.textContent = 'Please specify cron expression';
                        return;
                    }
                    payload.cron = cron;
                    payload.timezone = document.getElementById('recurring-timezone').value;
                }

                const endpoint = type === 'onetime' ? '/schedules/one-time' : '/schedules/recurring';
                const response = await fetch(`${API_BASE}${endpoint}`, {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${API_KEY}`,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(payload)
                });

                if (!response.ok) {
                    const error = await response.json();
                    throw new Error(error.detail || 'Failed to create schedule');
                }

                document.getElementById('agent-id').value = '';
                document.getElementById('message').value = '';
                document.getElementById('execute-at').value = '';
                document.getElementById('cron').value = '';
                document.getElementById('recurring-timezone').value = 'UTC';

                showTab('schedules');
                document.querySelector('.tab').click();
                loadSchedules();
            } catch (error) {
                errorDiv.textContent = error.message;
            }
        }

        async function deleteSchedule(type, id) {
            if (!confirm('Delete this schedule?')) return;

            try {
                const response = await fetch(`${API_BASE}/schedules/${type}/${id}`, {
                    method: 'DELETE',
                    headers: { 'Authorization': `Bearer ${API_KEY}` }
                });

                if (!response.ok) throw new Error('Failed to delete');

                loadSchedules();
            } catch (error) {
                alert('Error: ' + error.message);
            }
        }

        function truncate(str, len) {
            return str.length > len ? str.substring(0, len) + '...' : str;
        }
    </script>
</body>
</html>