| 1 | <html> |
| 2 | |
| 3 | <head> |
| 4 | <title>Connection to A0 A2A Server</title> |
| 5 | </head> |
| 6 | |
| 7 | <body> |
| 8 | <div x-data> |
| 9 | <p>Agent Zero A2A Server enables FastA2A protocol communication with other agents.</p> |
| 10 | <p>Other agents can connect using the URL below (replace host if needed):</p> |
| 11 | |
| 12 | <!-- API Token Information --> |
| 13 | <div x-data> |
| 14 | <template x-if="$store.settings.settings"> |
| 15 | <div style="background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 6px; padding: 12px; margin: 16px 0;"> |
| 16 | <h4 style="margin: 0 0 8px 0; color: var(--color-text-primary);">API Token Information</h4> |
| 17 | <p style="margin: 0 0 8px 0; color: var(--color-text-secondary); font-size: 14px;"> |
| 18 | The token used in the URL is automatically generated from your username and password. |
| 19 | This same token is also used for external API endpoints. The token changes when you update your |
| 20 | credentials. |
| 21 | </p> |
| 22 | <div style="margin-top: 8px;"> |
| 23 | <label style="display: block; margin-bottom: 4px; color: var(--color-text-secondary); font-size: 12px; font-weight: 600;">Token:</label> |
| 24 | <input type="text" readonly x-model="$store.settings.settings.mcp_server_token" style="width: 100%; padding: 6px 8px; background-color: var(--color-bg-primary); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: 4px; font-family: monospace; font-size: 13px;" /> |
| 25 | </div> |
| 26 | </div> |
| 27 | </template> |
| 28 | </div> |
| 29 | |
| 30 | <h3>A2A Connection URL</h3> |
| 31 | |
| 32 | <!-- Project selector --> |
| 33 | <div style="margin: 16px 0;"> |
| 34 | <label for="a2a-project-select" style="display: block; margin-bottom: 8px; color: var(--color-text-primary);"> |
| 35 | Select Project (optional): |
| 36 | </label> |
| 37 | <select id="a2a-project-select" style="width: 100%; padding: 8px; background-color: var(--color-bg-secondary); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: 4px;"> |
| 38 | <option value="">No project</option> |
| 39 | </select> |
| 40 | </div> |
| 41 | |
| 42 | <div id="a2a-connection-example"></div> |
| 43 | |
| 44 | <script> |
| 45 | (async () => { |
| 46 | const API = await import("/js/api.js"); |
| 47 | const url = window.location.origin; |
| 48 | |
| 49 | // Fetch token from settings API - try a2a_token first, fallback to mcp_server_token |
| 50 | let token = ""; |
| 51 | try { |
| 52 | const response = await API.callJsonApi("settings_get", null); |
| 53 | token = response?.settings?.mcp_server_token || ""; |
| 54 | } catch (e) { |
| 55 | console.error("Failed to fetch token:", e); |
| 56 | } |
| 57 | |
| 58 | // Fetch and populate projects |
| 59 | const projectSelect = document.getElementById('a2a-project-select'); |
| 60 | try { |
| 61 | const response = await fetchApi('/projects', { |
| 62 | method: 'POST', |
| 63 | headers: { 'Content-Type': 'application/json' }, |
| 64 | body: JSON.stringify({ action: 'list' }) |
| 65 | }); |
| 66 | const data = await response.json(); |
| 67 | if (data.ok && data.data) { |
| 68 | data.data.forEach(project => { |
| 69 | const option = document.createElement('option'); |
| 70 | option.value = project.name; |
| 71 | option.textContent = project.title || project.name; |
| 72 | projectSelect.appendChild(option); |
| 73 | }); |
| 74 | } |
| 75 | } catch (e) { |
| 76 | console.error('Failed to load projects:', e); |
| 77 | } |
| 78 | |
| 79 | // Function to update URL based on selected project |
| 80 | function updateConnectionUrl() { |
| 81 | const selectedProject = projectSelect.value; |
| 82 | let connectionUrl = `${url}/a2a/t-${token}`; |
| 83 | if (selectedProject) { |
| 84 | connectionUrl += `/p-${selectedProject}`; |
| 85 | } |
| 86 | editor.setValue(connectionUrl); |
| 87 | editor.clearSelection(); |
| 88 | } |
| 89 | |
| 90 | // Initialize editor |
| 91 | const editor = ace.edit("a2a-connection-example"); |
| 92 | const dark = localStorage.getItem("darkMode"); |
| 93 | editor.setTheme(dark !== "false" ? "ace/theme/github_dark" : "ace/theme/tomorrow"); |
| 94 | editor.session.setMode("ace/mode/text"); |
| 95 | updateConnectionUrl(); |
| 96 | editor.setReadOnly(true); |
| 97 | |
| 98 | // Update URL when project selection changes |
| 99 | projectSelect.addEventListener('change', updateConnectionUrl); |
| 100 | })(); |
| 101 | </script> |
| 102 | </div> |
| 103 | |
| 104 | <style> |
| 105 | #a2a-connection-example { |
| 106 | width: 100%; |
| 107 | height: 3em; |
| 108 | } |
| 109 | </style> |
| 110 | |
| 111 | </body> |
| 112 | |
| 113 | </html> |