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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975
							<!DOCTYPE html>
<html>
<head>
    <title>Letta Scheduling 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;
        }
        
        /* Modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        .modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background: white;
            border-radius: 8px;
            padding: 24px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .modal-header h3 {
            font-size: 18px;
            font-weight: 600;
        }
        .modal-close {
            font-size: 24px;
            cursor: pointer;
            color: #666;
        }
        .modal-close:hover {
            color: #1a1a1a;
        }
        .modal-body {
            font-size: 14px;
            line-height: 1.6;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .modal-label {
            font-weight: 600;
            margin-top: 12px;
            margin-bottom: 4px;
            color: #666;
        }
        
        /* Migration Banner */
        .migration-banner {
            background: #fff3cd;
            border: 2px solid #ffc107;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 24px;
        }
        .migration-banner h3 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #856404;
        }
        .migration-banner p {
            font-size: 14px;
            color: #856404;
            margin-bottom: 8px;
        }
        .migration-banner a {
            color: #856404;
            font-weight: 600;
        }

        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.sm {
            padding: 4px 12px;
            font-size: 13px;
            margin-left: 4px;
        }
        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>Letta Scheduling Dashboard</h1>
            <div class="header-links">
                <a href="/">Home</a>
                <a href="https://docs.letta.com/guides/agents/scheduling/" target="_blank">Letta Docs</a>
                <a href="https://github.com/cpfiffer/letta-switchboard">GitHub</a>
                <button id="logout-btn" onclick="clearApiKey()" class="secondary" style="display: none;">Logout</button>
            </div>
        </div>
        
        <!-- Migration Notice -->
        <div id="migration-banner" class="migration-banner">
            <h3>✨ Now powered by Letta's native scheduling!</h3>
            <p>
                This dashboard now calls Letta's API directly. The old Switchboard backend has been deprecated.
                Read the <a href="https://docs.letta.com/guides/agents/scheduling/" target="_blank">full scheduling docs →</a>
            </p>
        </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">
                <div class="card" style="margin-bottom: 20px;">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label for="schedules-agent-id">Agent ID</label>
                        <div style="display: flex; gap: 8px;">
                            <input type="text" id="schedules-agent-id" placeholder="agent-xxx" style="flex: 1;">
                            <button onclick="loadSchedulesFromInput()" class="secondary">Load Schedules</button>
                        </div>
                    </div>
                </div>
                
                <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>
            </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>
            </div>
        </div>
    </div>

    <!-- Modal for viewing schedule details -->
    <div id="schedule-modal" class="modal" onclick="closeModal(event)">
        <div class="modal-content" onclick="event.stopPropagation()">
            <div class="modal-header">
                <h3>Schedule Details</h3>
                <span class="modal-close" onclick="closeModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="modal-label">Schedule ID</div>
                <div id="modal-id" class="mono"></div>
                
                <div class="modal-label">Agent ID</div>
                <div id="modal-agent-id" class="mono"></div>
                
                <div class="modal-label">Type</div>
                <div id="modal-type"></div>
                
                <div class="modal-label">Schedule</div>
                <div id="modal-schedule"></div>
                
                <div class="modal-label">Messages</div>
                <div id="modal-messages"></div>
            </div>
        </div>
    </div>

    <script>
        const LETTA_API = 'https://api.letta.com/v1';
        let API_KEY = sessionStorage.getItem('letta_api_key') || '';
        let DEFAULT_AGENT_ID = sessionStorage.getItem('default_agent_id') || '';
        let CURRENT_SCHEDULES = []; // Store schedules for modal viewing

        // Initialize
        if (API_KEY) {
            document.getElementById('api-key-input').value = API_KEY;
            showAuthenticatedState();
            if (DEFAULT_AGENT_ID) {
                document.getElementById('agent-id').value = DEFAULT_AGENT_ID;
                document.getElementById('schedules-agent-id').value = DEFAULT_AGENT_ID;
                loadSchedules();
            }
        }
        
        function showAuthenticatedState() {
            document.getElementById('main-content').classList.remove('hidden');
            document.getElementById('api-key-section').style.display = 'none';
            document.getElementById('migration-banner').style.display = 'none';
            document.getElementById('logout-btn').style.display = 'inline-block';
        }
        
        function showUnauthenticatedState() {
            document.getElementById('main-content').classList.add('hidden');
            document.getElementById('api-key-section').style.display = 'block';
            document.getElementById('migration-banner').style.display = 'block';
            document.getElementById('logout-btn').style.display = 'none';
        }
        
        function loadSchedulesFromInput() {
            const agentId = document.getElementById('schedules-agent-id').value.trim();
            if (agentId) {
                // Sync to create tab
                document.getElementById('agent-id').value = agentId;
                DEFAULT_AGENT_ID = agentId;
                sessionStorage.setItem('default_agent_id', agentId);
                loadSchedules();
            }
        }
        
        // Helper: Convert ISO timestamp to Unix milliseconds
        function toUnixMs(isoString) {
            return new Date(isoString).getTime();
        }
        
        // Helper: Convert Unix milliseconds to readable date
        function fromUnixMs(ms) {
            return new Date(ms).toLocaleString();
        }

        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);
            showStatus('api-key-status', 'Connected successfully', 'success');
            
            setTimeout(() => {
                showAuthenticatedState();
                // Pre-fill agent ID if saved
                if (DEFAULT_AGENT_ID) {
                    document.getElementById('schedules-agent-id').value = DEFAULT_AGENT_ID;
                    document.getElementById('agent-id').value = DEFAULT_AGENT_ID;
                    loadSchedules();
                }
            }, 500);
        }

        function clearApiKey() {
            sessionStorage.removeItem('letta_api_key');
            sessionStorage.removeItem('default_agent_id');
            API_KEY = '';
            DEFAULT_AGENT_ID = '';
            document.getElementById('api-key-input').value = '';
            document.getElementById('schedules-agent-id').value = '';
            document.getElementById('agent-id').value = '';
            showUnauthenticatedState();
        }

        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() {
            // Try schedules tab input first, then create tab input
            let agentId = document.getElementById('schedules-agent-id').value.trim();
            if (!agentId) {
                agentId = document.getElementById('agent-id').value.trim();
            }
            
            if (!agentId) {
                const onetimeBody = document.querySelector('#onetime-table tbody');
                const recurringBody = document.querySelector('#recurring-table tbody');
                onetimeBody.innerHTML = '<tr><td colspan="5" class="empty">Enter an Agent ID above and click Load Schedules</td></tr>';
                recurringBody.innerHTML = '<tr><td colspan="7" class="empty">Enter an Agent ID above and click Load Schedules</td></tr>';
                return;
            }
            
            // Sync both inputs
            document.getElementById('schedules-agent-id').value = agentId;
            document.getElementById('agent-id').value = agentId;
            
            // Save for next time
            sessionStorage.setItem('default_agent_id', agentId);
            DEFAULT_AGENT_ID = agentId;
            
            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 {
                // Letta API returns all schedules (one-time and recurring) in a single call
                const response = await fetch(`${LETTA_API}/agents/${agentId}/schedule`, {
                    headers: { 'Authorization': `Bearer ${API_KEY}` }
                });
                
                if (!response.ok) {
                    throw new Error(`Failed to load schedules: ${response.statusText}`);
                }
                
                const data = await response.json();
                console.log('Letta API response:', data); // Debug log
                const schedules = data.scheduled_messages || data.schedules || data || [];
                
                // Store for modal viewing
                CURRENT_SCHEDULES = schedules;
                
                // Debug: Log first schedule if available
                if (schedules.length > 0) {
                    console.log('First schedule:', schedules[0]);
                    console.log('First schedule messages:', schedules[0].messages);
                    console.log('Full schedule object:', JSON.stringify(schedules[0], null, 2));
                }
                
                // Split into one-time and recurring
                const onetime = schedules.filter(s => s.schedule?.type === 'one-time');
                const recurring = schedules.filter(s => s.schedule?.type === 'recurring');

                onetimeBody.innerHTML = onetime.length ? onetime.map((s, idx) => {
                    const globalIdx = CURRENT_SCHEDULES.indexOf(s);
                    return `
                    <tr>
                        <td class="mono">${s.id?.substring(0, 8) || 'N/A'}...</td>
                        <td class="mono">${s.agent_id || 'N/A'}</td>
                        <td>${s.next_scheduled_at ? fromUnixMs(s.next_scheduled_at) : 'N/A'}</td>
                        <td>${truncate(getMessageContent(s), 30)}</td>
                        <td>
                            <button class="secondary sm" onclick="viewSchedule(${globalIdx})">View</button>
                            <button class="danger sm" onclick="deleteSchedule('${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, idx) => {
                    const globalIdx = CURRENT_SCHEDULES.indexOf(s);
                    return `
                    <tr>
                        <td class="mono">${s.id?.substring(0, 8) || 'N/A'}...</td>
                        <td class="mono">${s.agent_id || 'N/A'}</td>
                        <td class="mono">${s.schedule?.cron_expression || 'N/A'}</td>
                        <td>UTC</td>
                        <td>${truncate(getMessageContent(s), 30)}</td>
                        <td>${s.next_scheduled_at ? fromUnixMs(s.next_scheduled_at) : 'Never'}</td>
                        <td>
                            <button class="secondary sm" onclick="viewSchedule(${globalIdx})">View</button>
                            <button class="danger sm" onclick="deleteSchedule('${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: ${error.message}</td></tr>`;
                recurringBody.innerHTML = `<tr><td colspan="7" class="empty">Error: ${error.message}</td></tr>`;
            }
        }

        async function loadResults() {
            const resultsBody = document.querySelector('#results-table tbody');
            resultsBody.innerHTML = '<tr><td colspan="7" class="empty">Results tracking not available yet. Check Letta Cloud dashboard for execution history.</td></tr>';
            
            // NOTE: Letta's scheduling API doesn't expose execution history yet
            // Users should check the Letta Cloud dashboard or use the runs API
        }

        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;
            }
            
            // Save agent ID for convenience
            sessionStorage.setItem('default_agent_id', agentId);
            DEFAULT_AGENT_ID = agentId;

            try {
                // Build Letta API format
                const payload = {
                    messages: [{
                        role: 'user',
                        content: message
                    }]
                };

                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);
                    }

                    // Convert to Unix milliseconds for Letta API
                    payload.schedule = {
                        type: 'one-time',
                        scheduled_at: executeDate.getTime()
                    };
                } else {
                    const cron = document.getElementById('cron').value.trim();
                    if (!cron) {
                        errorDiv.textContent = 'Please specify cron expression';
                        return;
                    }
                    
                    // Letta uses 5-field cron (no seconds)
                    payload.schedule = {
                        type: 'recurring',
                        cron_expression: cron
                    };
                }

                const response = await fetch(`${LETTA_API}/agents/${agentId}/schedule`, {
                    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 || error.message || 'Failed to create schedule');
                }

                // Clear form
                document.getElementById('message').value = '';
                document.getElementById('execute-at').value = '';
                document.getElementById('cron').value = '';
                document.getElementById('recurring-timezone').value = 'UTC';

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

        async function deleteSchedule(id) {
            if (!confirm('Delete this schedule?')) return;
            
            let agentId = document.getElementById('schedules-agent-id').value.trim();
            if (!agentId) {
                agentId = document.getElementById('agent-id').value.trim();
            }
            if (!agentId) {
                alert('Agent ID is required');
                return;
            }

            try {
                const response = await fetch(`${LETTA_API}/agents/${agentId}/schedule/${id}`, {
                    method: 'DELETE',
                    headers: { 'Authorization': `Bearer ${API_KEY}` }
                });

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

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

        function truncate(str, len) {
            if (!str) return '';
            if (typeof str === 'object') str = JSON.stringify(str);
            return str.length > len ? str.substring(0, len) + '...' : str;
        }
        
        function viewSchedule(scheduleIndex) {
            const schedule = CURRENT_SCHEDULES[scheduleIndex];
            if (!schedule) {
                alert('Schedule not found');
                return;
            }
            
            console.log('Viewing schedule:', schedule); // Debug
            
            document.getElementById('modal-id').textContent = schedule.id || 'N/A';
            document.getElementById('modal-agent-id').textContent = schedule.agent_id || 'N/A';
            document.getElementById('modal-type').textContent = schedule.schedule?.type || 'N/A';
            
            // Format schedule details
            if (schedule.schedule?.type === 'one-time') {
                const time = schedule.next_scheduled_at ? fromUnixMs(schedule.next_scheduled_at) : 'N/A';
                document.getElementById('modal-schedule').textContent = time;
            } else if (schedule.schedule?.type === 'recurring') {
                document.getElementById('modal-schedule').textContent = 
                    `Cron: ${schedule.schedule.cron_expression}\nNext run: ${schedule.next_scheduled_at ? fromUnixMs(schedule.next_scheduled_at) : 'Never'}`;
            }
            
            // Format messages - handle different formats
            const messagesEl = document.getElementById('modal-messages');
            
            // Check all possible message fields
            console.log('Messages field:', schedule.messages);
            console.log('Message field:', schedule.message);
            console.log('Raw schedule:', JSON.stringify(schedule, null, 2));
            
            if (schedule.messages && Array.isArray(schedule.messages) && schedule.messages.length > 0) {
                messagesEl.innerHTML = schedule.messages.map((msg, idx) => {
                    const content = typeof msg === 'string' ? msg : 
                                  (msg.content || msg.text || JSON.stringify(msg));
                    const role = typeof msg === 'object' ? (msg.role || 'user') : 'user';
                    return `
                    <div style="margin-bottom: 12px; padding: 12px; background: #f5f5f5; border-radius: 4px;">
                        <div style="font-weight: 600; margin-bottom: 4px;">Message ${idx + 1}</div>
                        <div><strong>Role:</strong> ${role}</div>
                        <div style="margin-top: 4px;"><strong>Content:</strong></div>
                        <div style="white-space: pre-wrap;">${typeof content === 'string' ? content : JSON.stringify(content, null, 2)}</div>
                    </div>
                    `;
                }).join('');
            } else if (schedule.message) {
                // Single message field
                const content = typeof schedule.message === 'string' ? schedule.message : JSON.stringify(schedule.message, null, 2);
                messagesEl.innerHTML = `<div style="white-space: pre-wrap;">${content}</div>`;
            } else {
                // Show raw data for debugging
                messagesEl.innerHTML = `<div style="white-space: pre-wrap; font-family: monospace; font-size: 12px;">${JSON.stringify(schedule, null, 2)}</div>`;
            }
            
            document.getElementById('schedule-modal').classList.add('active');
        }
        
        function closeModal(event) {
            if (!event || event.target.id === 'schedule-modal' || event.target.classList.contains('modal-close')) {
                document.getElementById('schedule-modal').classList.remove('active');
            }
        }
        
        function getMessageContent(schedule) {
            // Try different possible message formats
            if (schedule.messages && Array.isArray(schedule.messages) && schedule.messages.length > 0) {
                const msg = schedule.messages[0];
                if (typeof msg === 'string') return msg;
                if (msg.content) {
                    if (typeof msg.content === 'string') return msg.content;
                    if (typeof msg.content === 'object') return JSON.stringify(msg.content);
                }
                if (msg.text) return msg.text;
                return JSON.stringify(msg);
            }
            if (schedule.message) return schedule.message;
            return 'N/A';
        }
    </script>
</body>
</html>