From 05b1930e04ac222d73ffb2f45c1b1febb69f893d Mon Sep 17 00:00:00 2001 From: Peter Stone Date: Wed, 28 Jan 2026 22:19:28 -1000 Subject: Add Agent Context API for external agent integration Phase 1: Authentication and read-only context - POST /agent/auth/request - request access with name + agent_id - GET /agent/auth/poll - poll for approval status - POST /agent/auth/approve|deny - user approval (browser auth required) - GET /agent/context - 7-day timeline context (agent session required) Phase 1.5: Browser-only agent endpoints (HTML pages) - GET /agent/web/request - request page with token - GET /agent/web/status - status page with polling - GET /agent/web/context - context page with timeline data WebSocket notifications: - GET /ws/notifications - push agent requests to browsers - Approval modal with trust indicators and countdown timer Database: - agents table for registered agent tracking - agent_sessions table for pending/active sessions Co-Authored-By: Claude Opus 4.5 --- web/static/js/app.js | 175 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 175 insertions(+) (limited to 'web/static') diff --git a/web/static/js/app.js b/web/static/js/app.js index f103ae8..380bb70 100644 --- a/web/static/js/app.js +++ b/web/static/js/app.js @@ -265,3 +265,178 @@ function toggleTask(taskId) { }, { passive: true }); }); })(); + +// Agent Access Request Notifications +(function() { + let wsConnection = null; + let reconnectAttempts = 0; + const MAX_RECONNECT_ATTEMPTS = 5; + const RECONNECT_DELAY_BASE = 1000; + + function connectWebSocket() { + const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; + const wsUrl = `${protocol}//${window.location.host}/ws/notifications`; + + try { + wsConnection = new WebSocket(wsUrl); + + wsConnection.onopen = function() { + console.log('WebSocket connected'); + reconnectAttempts = 0; + }; + + wsConnection.onmessage = function(event) { + try { + const msg = JSON.parse(event.data); + if (msg.type === 'agent_request') { + showAgentApprovalModal(msg.payload); + } + } catch (e) { + console.error('Failed to parse WebSocket message:', e); + } + }; + + wsConnection.onclose = function(event) { + console.log('WebSocket disconnected'); + if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) { + const delay = RECONNECT_DELAY_BASE * Math.pow(2, reconnectAttempts); + reconnectAttempts++; + console.log(`Reconnecting in ${delay}ms (attempt ${reconnectAttempts})`); + setTimeout(connectWebSocket, delay); + } + }; + + wsConnection.onerror = function(error) { + console.error('WebSocket error:', error); + }; + } catch (e) { + console.error('Failed to create WebSocket:', e); + } + } + + function showAgentApprovalModal(payload) { + // Remove any existing modal + const existingModal = document.getElementById('agent-approval-modal'); + if (existingModal) { + existingModal.remove(); + } + + // Truncate agent ID for display + const shortAgentId = payload.agent_id.substring(0, 8); + + // Determine trust indicator + let trustBadge = ''; + let trustClass = ''; + switch (payload.trust_level) { + case 'recognized': + trustBadge = 'Recognized'; + trustClass = 'bg-green-500'; + break; + case 'suspicious': + trustBadge = 'Warning: Different ID'; + trustClass = 'bg-yellow-500'; + break; + default: + trustBadge = 'New Agent'; + trustClass = 'bg-blue-500'; + } + + // Calculate time remaining + const expiresAt = new Date(payload.expires_at); + const timeRemaining = Math.max(0, Math.floor((expiresAt - new Date()) / 1000)); + + const modal = document.createElement('div'); + modal.id = 'agent-approval-modal'; + modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50'; + modal.innerHTML = ` +
+
+

Agent Access Request

+ ${trustBadge} +
+
+

Agent Name: ${escapeHtml(payload.agent_name)}

+

Agent ID: ${shortAgentId}...

+

Expires in ${timeRemaining}s

+
+
+ + +
+
+ `; + + document.body.appendChild(modal); + + // Countdown timer + const countdownEl = document.getElementById('agent-countdown'); + const countdownInterval = setInterval(() => { + const remaining = Math.max(0, Math.floor((expiresAt - new Date()) / 1000)); + countdownEl.textContent = remaining; + if (remaining <= 0) { + clearInterval(countdownInterval); + modal.remove(); + } + }, 1000); + + // Button handlers + document.getElementById('agent-approve-btn').addEventListener('click', async () => { + await handleAgentDecision(payload.request_token, 'approve'); + clearInterval(countdownInterval); + modal.remove(); + }); + + document.getElementById('agent-deny-btn').addEventListener('click', async () => { + await handleAgentDecision(payload.request_token, 'deny'); + clearInterval(countdownInterval); + modal.remove(); + }); + + // Click outside to dismiss (treat as no action) + modal.addEventListener('click', (e) => { + if (e.target === modal) { + clearInterval(countdownInterval); + modal.remove(); + } + }); + } + + async function handleAgentDecision(requestToken, decision) { + try { + const response = await fetch(`/agent/auth/${decision}`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'X-CSRF-Token': getCSRFToken() + }, + body: JSON.stringify({ request_token: requestToken }) + }); + + if (!response.ok) { + const error = await response.text(); + console.error(`Failed to ${decision} agent:`, error); + alert(`Failed to ${decision} agent request. Please try again.`); + } else { + console.log(`Agent request ${decision}d successfully`); + } + } catch (e) { + console.error(`Error during agent ${decision}:`, e); + alert(`Error processing request. Please try again.`); + } + } + + function escapeHtml(text) { + const div = document.createElement('div'); + div.textContent = text; + return div.innerHTML; + } + + // Initialize WebSocket on page load + document.addEventListener('DOMContentLoaded', function() { + connectWebSocket(); + }); +})(); -- cgit v1.2.3