a2acalling 0.1.7 → 0.1.9

package/src/dashboard/public/app.js

@@ -0,0 +1,341 @@
+const state = {
+  settings: null,
+  contacts: [],
+  calls: [],
+  invites: []
+};
+
+function showNotice(message) {
+  const el = document.getElementById('notice');
+  el.textContent = message;
+  el.style.display = 'block';
+  setTimeout(() => {
+    el.style.display = 'none';
+  }, 3500);
+}
+
+async function request(path, options = {}) {
+  const res = await fetch(`/api/a2a/dashboard${path}`, {
+    headers: { 'Content-Type': 'application/json', ...(options.headers || {}) },
+    ...options
+  });
+  const payload = await res.json().catch(() => ({}));
+  if (!res.ok || payload.success === false) {
+    throw new Error(payload.message || payload.error || `Request failed: ${res.status}`);
+  }
+  return payload;
+}
+
+function toLines(values) {
+  return (values || []).join('\n');
+}
+
+function fromLines(value) {
+  return value
+    .split('\n')
+    .map(v => v.trim())
+    .filter(Boolean);
+}
+
+function fmtDate(value) {
+  if (!value) return '-';
+  try {
+    return new Date(value).toLocaleString();
+  } catch (err) {
+    return String(value);
+  }
+}
+
+function bindTabs() {
+  document.querySelectorAll('.tab').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const tab = btn.dataset.tab;
+      document.querySelectorAll('.tab').forEach(b => b.classList.remove('is-active'));
+      document.querySelectorAll('.panel').forEach(p => p.classList.remove('is-active'));
+      btn.classList.add('is-active');
+      document.getElementById(`tab-${tab}`).classList.add('is-active');
+    });
+  });
+}
+
+function renderContacts() {
+  const tbody = document.querySelector('#contacts-table tbody');
+  tbody.innerHTML = '';
+  state.contacts.forEach(contact => {
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td>${contact.name || '-'}</td>
+      <td>${contact.owner || '-'}</td>
+      <td>${contact.status || '-'}</td>
+      <td>${contact.call_count || 0}</td>
+      <td>${(contact.last_summary || contact.last_owner_summary || '-').slice(0, 120)}</td>
+    `;
+    tr.addEventListener('click', () => loadCallsForContact(contact.id, contact.name));
+    tbody.appendChild(tr);
+  });
+}
+
+async function loadContacts() {
+  const payload = await request('/contacts');
+  state.contacts = payload.contacts || [];
+  renderContacts();
+}
+
+function renderCalls() {
+  const tbody = document.querySelector('#calls-table tbody');
+  tbody.innerHTML = '';
+  state.calls.forEach(call => {
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td>${call.id}</td>
+      <td>${call.contact?.name || call.contact_name || '-'}</td>
+      <td>${call.status || '-'}</td>
+      <td>${call.message_count || 0}</td>
+      <td>${fmtDate(call.last_message_at)}</td>
+      <td>${(call.summary || call.owner_summary || '-').slice(0, 120)}</td>
+    `;
+    tr.addEventListener('click', () => loadCallDetail(call.id));
+    tbody.appendChild(tr);
+  });
+}
+
+async function loadCalls() {
+  const payload = await request('/calls?limit=200');
+  state.calls = payload.calls || [];
+  renderCalls();
+}
+
+async function loadCallDetail(conversationId) {
+  const payload = await request(`/calls/${encodeURIComponent(conversationId)}?messages=40`);
+  const call = payload.call;
+  const el = document.getElementById('call-detail');
+  const messages = (call.recentMessages || [])
+    .map(msg => `[${fmtDate(msg.timestamp)}] ${msg.direction}: ${msg.content}`)
+    .join('\n\n');
+  el.innerHTML = `
+    <h3>Call Detail: ${call.id}</h3>
+    <p><strong>Contact:</strong> ${call.contact?.name || call.contact || '-'}</p>
+    <p><strong>Status:</strong> ${call.status || '-'}</p>
+    <p><strong>Summary:</strong> ${(call.summary || call.ownerContext?.summary || '-')}</p>
+    <pre class="summary">${messages || 'No messages recorded.'}</pre>
+  `;
+}
+
+async function loadCallsForContact(contactId, contactName) {
+  const payload = await request(`/contacts/${encodeURIComponent(contactId)}/calls?limit=100`);
+  const calls = payload.calls || [];
+  const el = document.getElementById('contact-calls');
+  const rows = calls.map(call => {
+    return `
+      <tr>
+        <td>${call.id}</td>
+        <td>${call.status || '-'}</td>
+        <td>${fmtDate(call.last_message_at)}</td>
+        <td>${(call.summary || call.owner_summary || '-').slice(0, 140)}</td>
+      </tr>
+    `;
+  }).join('');
+  el.innerHTML = `
+    <h3>Calls with ${contactName}</h3>
+    <table>
+      <thead><tr><th>ID</th><th>Status</th><th>Updated</th><th>Summary</th></tr></thead>
+      <tbody>${rows || '<tr><td colspan="4">No calls found.</td></tr>'}</tbody>
+    </table>
+  `;
+}
+
+function fillTierSelects() {
+  const tiers = (state.settings?.tiers || []).slice().sort((a, b) => a.id.localeCompare(b.id));
+  const tierSelect = document.getElementById('tier-select');
+  const copyFrom = document.getElementById('copy-from-tier');
+  const newTierCopy = document.getElementById('new-tier-copy-from');
+  const inviteTier = document.getElementById('invite-tier');
+
+  [tierSelect, copyFrom, inviteTier].forEach(el => { el.innerHTML = ''; });
+  newTierCopy.innerHTML = '<option value="">None</option>';
+
+  tiers.forEach(tier => {
+    const option = new Option(`${tier.id} (${tier.name || tier.id})`, tier.id);
+    tierSelect.add(option.cloneNode(true));
+    copyFrom.add(option.cloneNode(true));
+    inviteTier.add(option.cloneNode(true));
+    newTierCopy.add(option.cloneNode(true));
+  });
+
+  if (tiers.length > 0) {
+    tierSelect.value = tiers[0].id;
+    copyFrom.value = tiers[0].id;
+    inviteTier.value = tiers[0].id;
+    renderTierEditor(tiers[0].id);
+  }
+}
+
+function renderTierEditor(tierId) {
+  const tier = (state.settings?.tiers || []).find(t => t.id === tierId);
+  if (!tier) return;
+
+  document.getElementById('tier-id').value = tier.id;
+  document.getElementById('tier-name').value = tier.name || tier.id;
+  document.getElementById('tier-description').value = tier.description || '';
+  document.getElementById('tier-disclosure').value = tier.disclosure || 'minimal';
+  document.getElementById('tier-topics').value = toLines(tier.topics || []);
+  document.getElementById('tier-goals').value = toLines(tier.goals || []);
+}
+
+function bindSettingsActions() {
+  document.getElementById('tier-select').addEventListener('change', (e) => {
+    renderTierEditor(e.target.value);
+  });
+
+  document.getElementById('tier-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const tierId = document.getElementById('tier-id').value;
+    const body = {
+      name: document.getElementById('tier-name').value,
+      description: document.getElementById('tier-description').value,
+      disclosure: document.getElementById('tier-disclosure').value,
+      topics: fromLines(document.getElementById('tier-topics').value),
+      goals: fromLines(document.getElementById('tier-goals').value)
+    };
+    await request(`/settings/tiers/${encodeURIComponent(tierId)}`, {
+      method: 'PUT',
+      body: JSON.stringify(body)
+    });
+    showNotice(`Saved tier "${tierId}"`);
+    await loadSettings();
+  });
+
+  document.getElementById('copy-tier-btn').addEventListener('click', async () => {
+    const toTier = document.getElementById('tier-id').value;
+    const fromTier = document.getElementById('copy-from-tier').value;
+    if (!toTier || !fromTier || toTier === fromTier) return;
+    await request(`/settings/tiers/${encodeURIComponent(toTier)}/copy-from/${encodeURIComponent(fromTier)}`, {
+      method: 'POST'
+    });
+    showNotice(`Copied "${fromTier}" -> "${toTier}"`);
+    await loadSettings();
+    renderTierEditor(toTier);
+  });
+
+  document.getElementById('defaults-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    await request('/settings/defaults', {
+      method: 'PUT',
+      body: JSON.stringify({
+        expiration: document.getElementById('defaults-expiration').value,
+        maxCalls: Number.parseInt(document.getElementById('defaults-max-calls').value, 10) || 100
+      })
+    });
+    showNotice('Saved defaults');
+    await loadSettings();
+  });
+
+  document.getElementById('new-tier-btn').addEventListener('click', () => {
+    document.getElementById('new-tier-id').focus();
+  });
+
+  document.getElementById('new-tier-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const tierId = document.getElementById('new-tier-id').value.trim();
+    const name = document.getElementById('new-tier-name').value.trim();
+    const copyFrom = document.getElementById('new-tier-copy-from').value;
+    if (!tierId) return;
+    await request('/settings/tiers', {
+      method: 'POST',
+      body: JSON.stringify({
+        id: tierId,
+        name: name || tierId,
+        copy_from: copyFrom || undefined
+      })
+    });
+    showNotice(`Created tier "${tierId}"`);
+    document.getElementById('new-tier-form').reset();
+    await loadSettings();
+    document.getElementById('tier-select').value = tierId;
+    renderTierEditor(tierId);
+  });
+}
+
+async function loadSettings() {
+  const payload = await request('/settings');
+  state.settings = payload;
+  fillTierSelects();
+  document.getElementById('defaults-expiration').value = payload.defaults?.expiration || '7d';
+  document.getElementById('defaults-max-calls').value = payload.defaults?.maxCalls || 100;
+}
+
+function renderInvites() {
+  const tbody = document.querySelector('#invites-table tbody');
+  tbody.innerHTML = '';
+  state.invites.forEach(invite => {
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td>${invite.id}</td>
+      <td>${invite.name || '-'}</td>
+      <td>${invite.tier_label || invite.tier || '-'}</td>
+      <td>${invite.calls_made || 0}${invite.max_calls ? `/${invite.max_calls}` : ''}</td>
+      <td>${fmtDate(invite.expires_at)}</td>
+      <td>${invite.revoked ? 'revoked' : 'active'}</td>
+      <td><button data-revoke="${invite.id}" ${invite.revoked ? 'disabled' : ''}>Revoke</button></td>
+    `;
+    tbody.appendChild(tr);
+  });
+
+  tbody.querySelectorAll('button[data-revoke]').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      const tokenId = btn.dataset.revoke;
+      await request(`/invites/${encodeURIComponent(tokenId)}/revoke`, { method: 'POST' });
+      showNotice(`Revoked ${tokenId}`);
+      await loadInvites();
+    });
+  });
+}
+
+async function loadInvites() {
+  const payload = await request('/invites?include_revoked=true');
+  state.invites = payload.invites || [];
+  renderInvites();
+}
+
+function bindInviteActions() {
+  document.getElementById('invite-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const body = {
+      name: document.getElementById('invite-name').value,
+      owner: document.getElementById('invite-owner').value,
+      tier: document.getElementById('invite-tier').value,
+      expires: document.getElementById('invite-expires').value,
+      max_calls: Number.parseInt(document.getElementById('invite-max-calls').value, 10),
+      notify: document.getElementById('invite-notify').value
+    };
+    const result = await request('/invites', {
+      method: 'POST',
+      body: JSON.stringify(body)
+    });
+    document.getElementById('invite-message').value = result.invite_message || result.invite_url;
+    showNotice('Invite created');
+    await loadInvites();
+  });
+}
+
+function bindRefreshButtons() {
+  document.getElementById('refresh-contacts').addEventListener('click', () => loadContacts().catch(err => showNotice(err.message)));
+  document.getElementById('refresh-calls').addEventListener('click', () => loadCalls().catch(err => showNotice(err.message)));
+  document.getElementById('refresh-invites').addEventListener('click', () => loadInvites().catch(err => showNotice(err.message)));
+}
+
+async function bootstrap() {
+  bindTabs();
+  bindSettingsActions();
+  bindInviteActions();
+  bindRefreshButtons();
+
+  try {
+    await Promise.all([loadSettings(), loadContacts(), loadCalls(), loadInvites()]);
+    showNotice('Dashboard loaded');
+  } catch (err) {
+    showNotice(err.message);
+  }
+}
+
+bootstrap();

package/src/dashboard/public/index.html

@@ -0,0 +1,155 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>A2A Dashboard</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+  <header>
+    <h1>A2A Dashboard</h1>
+    <p>Contacts, calls, settings, and invites.</p>
+  </header>
+
+  <nav>
+    <button class="tab is-active" data-tab="contacts">Contacts</button>
+    <button class="tab" data-tab="calls">Calls</button>
+    <button class="tab" data-tab="settings">Settings</button>
+    <button class="tab" data-tab="invites">Invites</button>
+  </nav>
+
+  <main>
+    <section id="tab-contacts" class="panel is-active">
+      <div class="row">
+        <h2>Contacts</h2>
+        <button id="refresh-contacts">Refresh</button>
+      </div>
+      <table id="contacts-table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Owner</th>
+            <th>Status</th>
+            <th>Calls</th>
+            <th>Last Summary</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+      <div id="contact-calls"></div>
+    </section>
+
+    <section id="tab-calls" class="panel">
+      <div class="row">
+        <h2>Calls</h2>
+        <button id="refresh-calls">Refresh</button>
+      </div>
+      <table id="calls-table">
+        <thead>
+          <tr>
+            <th>Conversation</th>
+            <th>Contact</th>
+            <th>Status</th>
+            <th>Messages</th>
+            <th>Updated</th>
+            <th>Summary</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+      <div id="call-detail"></div>
+    </section>
+
+    <section id="tab-settings" class="panel">
+      <h2>Tier Settings</h2>
+      <div class="row">
+        <label for="tier-select">Tier</label>
+        <select id="tier-select"></select>
+        <button id="new-tier-btn">New Tier</button>
+      </div>
+
+      <form id="tier-form">
+        <label>Tier ID <input id="tier-id" type="text" readonly></label>
+        <label>Name <input id="tier-name" type="text"></label>
+        <label>Description <input id="tier-description" type="text"></label>
+        <label>Disclosure <input id="tier-disclosure" type="text" placeholder="minimal"></label>
+        <label>Topics (one per line)<textarea id="tier-topics" rows="6"></textarea></label>
+        <label>Goals (one per line)<textarea id="tier-goals" rows="6"></textarea></label>
+        <div class="row">
+          <button type="submit">Save Tier</button>
+        </div>
+      </form>
+
+      <div class="row">
+        <label for="copy-from-tier">Copy from</label>
+        <select id="copy-from-tier"></select>
+        <button id="copy-tier-btn">Copy Tier</button>
+      </div>
+
+      <h3>Defaults</h3>
+      <form id="defaults-form">
+        <label>Expiration <input id="defaults-expiration" type="text" placeholder="7d"></label>
+        <label>Max Calls <input id="defaults-max-calls" type="number" min="1"></label>
+        <div class="row">
+          <button type="submit">Save Defaults</button>
+        </div>
+      </form>
+
+      <h3>New Tier</h3>
+      <form id="new-tier-form">
+        <label>Tier ID <input id="new-tier-id" type="text" placeholder="partners"></label>
+        <label>Name <input id="new-tier-name" type="text" placeholder="Partners"></label>
+        <label>Copy from
+          <select id="new-tier-copy-from">
+            <option value="">None</option>
+          </select>
+        </label>
+        <div class="row">
+          <button type="submit">Create Tier</button>
+        </div>
+      </form>
+    </section>
+
+    <section id="tab-invites" class="panel">
+      <h2>Generate Invite</h2>
+      <form id="invite-form">
+        <label>Name <input id="invite-name" type="text" required></label>
+        <label>Owner <input id="invite-owner" type="text"></label>
+        <label>Tier <select id="invite-tier"></select></label>
+        <label>Expires <input id="invite-expires" type="text" value="7d"></label>
+        <label>Max Calls <input id="invite-max-calls" type="number" min="1" value="100"></label>
+        <label>Notify <input id="invite-notify" type="text" value="all"></label>
+        <div class="row">
+          <button type="submit">Create Invite</button>
+        </div>
+      </form>
+
+      <label>Invite Message<textarea id="invite-message" rows="8" readonly></textarea></label>
+
+      <div class="row">
+        <h3>Existing Invites</h3>
+        <button id="refresh-invites">Refresh</button>
+      </div>
+      <table id="invites-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Tier</th>
+            <th>Calls</th>
+            <th>Expires</th>
+            <th>Status</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </section>
+
+    <div id="notice"></div>
+  </main>
+
+  <script src="./app.js"></script>
+</body>
+</html>

package/src/dashboard/public/style.css

@@ -0,0 +1,166 @@
+:root {
+  --bg: #f4f6f8;
+  --panel: #ffffff;
+  --ink: #13233a;
+  --line: #d7dee6;
+  --accent: #1466c1;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+  color: var(--ink);
+  background: linear-gradient(180deg, #eef3f8 0%, var(--bg) 100%);
+}
+
+header {
+  padding: 1rem 1.5rem;
+  background: var(--panel);
+  border-bottom: 1px solid var(--line);
+}
+
+header h1 {
+  margin: 0;
+  font-size: 1.2rem;
+}
+
+header p {
+  margin: 0.25rem 0 0;
+  color: #4b5d73;
+  font-size: 0.9rem;
+}
+
+nav {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--line);
+  background: #f8fafc;
+}
+
+.tab {
+  border: 1px solid var(--line);
+  background: #fff;
+  color: var(--ink);
+  padding: 0.45rem 0.7rem;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.tab.is-active {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+main {
+  padding: 1rem;
+}
+
+.panel {
+  display: none;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 1rem;
+}
+
+.panel.is-active {
+  display: block;
+}
+
+h2,
+h3 {
+  margin-top: 0;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.8rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.6rem;
+  font-size: 0.9rem;
+}
+
+input,
+textarea,
+select,
+button {
+  font: inherit;
+}
+
+input,
+textarea,
+select {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.45rem 0.55rem;
+  background: #fff;
+}
+
+textarea {
+  resize: vertical;
+}
+
+button {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+  padding: 0.42rem 0.65rem;
+  cursor: pointer;
+}
+
+button:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+}
+
+th,
+td {
+  border: 1px solid var(--line);
+  padding: 0.45rem 0.5rem;
+  vertical-align: top;
+  text-align: left;
+  font-size: 0.85rem;
+}
+
+th {
+  background: #f8fafc;
+}
+
+.summary {
+  max-width: 500px;
+  white-space: pre-wrap;
+}
+
+#notice {
+  margin-top: 1rem;
+  padding: 0.7rem 0.8rem;
+  border-radius: 8px;
+  background: #edf5ff;
+  border: 1px solid #c9def8;
+  color: #204978;
+  display: none;
+}
+
+@media (max-width: 720px) {
+  nav {
+    overflow-x: auto;
+  }
+}

package/src/index.js

@@ -17,6 +17,7 @@
 const { TokenStore } = require('./lib/tokens');
 const { A2AClient, A2AError } = require('./lib/client');
 const { createRoutes } = require('./routes/a2a');
+const { createDashboardApiRouter, createDashboardUiRouter } = require('./routes/dashboard');
 
 // Lazy load optional dependencies
 let ConversationStore = null;
@@ -43,6 +44,10 @@ module.exports = {
   
   // Express routes for inbound calls
   createRoutes,
+
+  // Dashboard routes
+  createDashboardApiRouter,
+  createDashboardUiRouter,
   
   // Conversation storage (requires better-sqlite3)
   ConversationStore,