npm - a2acalling - Versions diffs - 0.6.75 → 0.6.76 - Mend

a2acalling 0.6.75 → 0.6.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1025) hide show

package/.claude/worktrees/agent-acefedbd/.claude/worktrees/agent-a1418bc4/src/dashboard/public/index.html ADDED Viewed

@@ -0,0 +1,386 @@
+<!doctype html>
+<html lang="en" class="sl-theme-dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>A2A Callbook</title>
+  <!-- A2A-47: Switch to Shoelace dark theme to match dark sidebar design -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19/cdn/themes/dark.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19/cdn/shoelace-autoloader.js"></script>
+  <!-- A2A-47: Material Symbols for sidebar nav icons -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" />
+  <!-- A2A-47: Inter font for modern UI typography -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" />
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body class="sl-theme-dark">
+  <!-- A2A-47: Fixed left sidebar navigation replacing sl-tab-group horizontal tabs -->
+  <aside class="sidebar">
+    <div class="sidebar-brand">
+      <span class="material-symbols-outlined brand-icon">phone_in_talk</span>
+      <span class="brand-text">A2A Callbook</span>
+    </div>
+    <nav class="sidebar-nav">
+      <a data-panel="contacts" class="nav-item active">
+        <span class="material-symbols-outlined nav-icon" style="color:#10B981;">contacts</span>
+        <span class="nav-label">Contacts</span>
+      </a>
+      <a data-panel="calls" class="nav-item">
+        <span class="material-symbols-outlined nav-icon" style="color:#3B82F6;">call</span>
+        <span class="nav-label">Calls</span>
+      </a>
+      <a data-panel="permissions" class="nav-item">
+        <span class="material-symbols-outlined nav-icon" style="color:#8B5CF6;">verified_user</span>
+        <span class="nav-label">Permissions</span>
+      </a>
+      <a data-panel="invites" class="nav-item">
+        <span class="material-symbols-outlined nav-icon" style="color:#F59E0B;">mail</span>
+        <span class="nav-label">Invites</span>
+      </a>
+      <a data-panel="logs" class="nav-item">
+        <span class="material-symbols-outlined nav-icon" style="color:#14B8A6;">history</span>
+        <span class="nav-label">Logs</span>
+      </a>
+      <a data-panel="health" class="nav-item">
+        <span class="material-symbols-outlined nav-icon" style="color:#EF4444;">monitor_heart</span>
+        <span class="nav-label">Health</span>
+      </a>
+      <!-- A2A-50: Settings nav item for relocated admin settings -->
+      <a data-panel="settings" class="nav-item">
+        <span class="material-symbols-outlined nav-icon" style="color:#6B7280;">settings</span>
+        <span class="nav-label">Settings</span>
+      </a>
+    </nav>
+  </aside>
+  <main class="main-content">
+    <!-- A2A-47: Decorative background orbs for depth -->
+    <div class="bg-orb bg-orb-blue"></div>
+    <div class="bg-orb bg-orb-purple"></div>
+    <header class="content-header">
+      <h1 id="section-title">Contacts</h1>
+    </header>
+    <div class="content-body">
+      <!-- A2A-47: Panel-based layout; only one panel visible at a time -->
+      <div id="panel-contacts" class="panel active">
+        <sl-details id="add-contact-details" summary="+ Add Contact">
+          <form id="add-contact-form">
+            <sl-input id="add-contact-url" label="Invite URL" placeholder="a2a://host/token" required></sl-input>
+            <sl-input id="add-contact-name" label="Agent name" placeholder="Agent name (optional)"></sl-input>
+            <sl-input id="add-contact-owner" label="Owner name" placeholder="Human owner (optional)"></sl-input>
+            <sl-checkbox id="add-contact-mine">Mark as mine (personal agent)</sl-checkbox>
+            <sl-input id="add-contact-server-name" label="Server name (my agents only)" placeholder="Server label (optional)"></sl-input>
+            <sl-input id="add-contact-tags" label="Tags" placeholder="comma,separated (optional)"></sl-input>
+            <sl-textarea id="add-contact-notes" label="Notes" rows="3" placeholder="Notes (optional)"></sl-textarea>
+            <sl-textarea id="add-contact-fields" label="Fields (JSON)" rows="4" placeholder='{"email":"...","company":"..."} (optional)'></sl-textarea>
+            <div class="row">
+              <sl-button type="submit" variant="primary">Add</sl-button>
+              <sl-button id="add-contact-cancel" variant="default">Cancel</sl-button>
+            </div>
+          </form>
+        </sl-details>
+        <div id="contacts-sections"></div>
+        <sl-card id="contact-detail"></sl-card>
+      </div>
+      <div id="panel-calls" class="panel">
+        <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>
+      </div>
+      <!-- A2A-48: Permissions tab redesign with tier cards, tool toggles, auto-save, and right sidebar -->
+      <div id="panel-permissions" class="panel">
+        <div class="perm-layout">
+          <div class="perm-main">
+            <!-- Active Tier cards -->
+            <section class="perm-section">
+              <div class="perm-section-header">
+                <h2>Active Tier</h2>
+                <button class="perm-add-btn" id="perm-new-tier-btn">
+                  <span class="material-symbols-outlined" style="font-size:18px;">add</span> New Tier
+                </button>
+              </div>
+              <div id="tier-cards" class="tier-cards-grid"></div>
+            </section>
+            <!-- Active Configuration (topics + goals) -->
+            <section class="perm-section">
+              <div class="perm-section-header">
+                <h2>Active Configuration</h2>
+                <span class="perm-hint">Drag items from sidebar to update permissions</span>
+              </div>
+              <div class="config-columns">
+                <div class="config-col">
+                  <div class="config-col-header config-col-header--teal">
+                    <span class="status-dot status-dot--teal"></span>
+                    Active Topics
+                    <span id="topic-count" class="count-badge count-badge--teal">0</span>
+                    <button class="col-header-add-btn" data-add-type="topic" title="Add topic"><span class="material-symbols-outlined" style="font-size:16px;">add</span></button>
+                  </div>
+                  <div id="active-topics-zone" class="perm-drop-zone"></div>
+                </div>
+                <div class="config-col">
+                  <div class="config-col-header config-col-header--yellow">
+                    <span class="status-dot status-dot--yellow"></span>
+                    Active Goals
+                    <span id="goal-count" class="count-badge count-badge--yellow">0</span>
+                    <button class="col-header-add-btn" data-add-type="goal" title="Add goal"><span class="material-symbols-outlined" style="font-size:16px;">add</span></button>
+                  </div>
+                  <div id="active-goals-zone" class="perm-drop-zone"></div>
+                </div>
+              </div>
+            </section>
+            <!-- Allowed Tools toggles -->
+            <section class="perm-section">
+              <h2>Allowed Tools</h2>
+              <div id="tool-toggles" class="tool-toggles-grid"></div>
+            </section>
+            <!-- Tier Warnings -->
+            <div id="tier-warnings" class="tier-warnings"></div>
+          </div>
+          <!-- Right sidebar: preview + topic/goal lists -->
+          <div class="perm-sidebar">
+            <div id="perm-preview" class="preview-card"></div>
+            <div id="sidebar-topics" class="sidebar-list"></div>
+            <div id="sidebar-goals" class="sidebar-list"></div>
+          </div>
+        </div>
+        <!-- A2A-48: Simplified Create New Item dialog (no icon selector per scope decision) -->
+        <sl-dialog id="create-item-dialog" label="Create New Item" style="--width: 440px;">
+          <sl-input id="create-item-title" label="Title" placeholder="e.g., Database Management" required></sl-input>
+          <sl-textarea id="create-item-desc" label="Description" rows="3" placeholder="Describe the scope..."></sl-textarea>
+          <div slot="footer" class="row">
+            <sl-button id="create-item-cancel" variant="default">Cancel</sl-button>
+            <sl-button id="create-item-submit" variant="primary">Create</sl-button>
+          </div>
+        </sl-dialog>
+        <!-- A2A-48: Full caller preview dialog (existing, kept for detail view) -->
+        <sl-dialog id="preview-dialog" label="Caller Preview" style="--width: 540px;">
+          <div id="preview-content"></div>
+          <sl-button slot="footer" variant="primary" id="preview-close-btn">Close</sl-button>
+        </sl-dialog>
+        <!-- A2A-50: Delete confirmation dialog for topics/goals -->
+        <sl-dialog id="delete-confirm-dialog" label="Confirm Removal" style="--width: 400px;">
+          <p id="delete-confirm-message">Remove this item from the tier?</p>
+          <div slot="footer" class="row">
+            <sl-button id="delete-confirm-no" variant="default">Cancel</sl-button>
+            <sl-button id="delete-confirm-yes" variant="danger">Remove</sl-button>
+          </div>
+        </sl-dialog>
+        <!-- A2A-50: New Tier dialog (glass-styled modal replacing inline form scroll) -->
+        <sl-dialog id="new-tier-dialog" label="Create New Tier" style="--width: 440px;">
+          <sl-input id="new-tier-dialog-id" label="Tier ID" placeholder="partners" required></sl-input>
+          <sl-input id="new-tier-dialog-name" label="Name" placeholder="Partners"></sl-input>
+          <label>Copy from
+            <sl-select id="new-tier-dialog-copy-from" size="small">
+              <sl-option value="">None</sl-option>
+            </sl-select>
+          </label>
+          <div slot="footer" class="row">
+            <sl-button id="new-tier-dialog-cancel" variant="default">Cancel</sl-button>
+            <sl-button id="new-tier-dialog-submit" variant="primary">Create Tier</sl-button>
+          </div>
+        </sl-dialog>
+      </div>
+      <div id="panel-invites" class="panel">
+        <sl-details id="generate-invite-details" summary="+ Generate Invite">
+          <form id="invite-form">
+            <sl-input id="invite-name" label="Name" required></sl-input>
+            <sl-input id="invite-owner" label="Owner"></sl-input>
+            <label>Tier <sl-select id="invite-tier" size="small"></sl-select></label>
+            <sl-input id="invite-expires" label="Expires" value="7d"></sl-input>
+            <sl-input id="invite-max-calls" label="Max Calls" type="number" min="1" value="100"></sl-input>
+            <sl-input id="invite-notify" label="Notify" value="all"></sl-input>
+            <div class="row">
+              <sl-button type="submit" variant="primary">Create Invite</sl-button>
+              <sl-button id="generate-invite-cancel" variant="default">Cancel</sl-button>
+            </div>
+          </form>
+        </sl-details>
+        <div id="invite-message-wrap" style="display:none;">
+          <label>Invite Message</label>
+          <sl-textarea id="invite-message" rows="8" readonly></sl-textarea>
+        </div>
+        <h3>Existing Invites</h3>
+        <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>
+      </div>
+      <div id="panel-logs" class="panel">
+        <div class="filters">
+          <label>Level
+            <sl-select id="logs-level" size="small" clearable>
+              <sl-option value="trace">trace</sl-option>
+              <sl-option value="debug">debug</sl-option>
+              <sl-option value="info">info</sl-option>
+              <sl-option value="warn">warn</sl-option>
+              <sl-option value="error">error</sl-option>
+            </sl-select>
+          </label>
+          <sl-input id="logs-component" label="Component" size="small" placeholder="a2a.routes"></sl-input>
+          <sl-input id="logs-event" label="Event" size="small" placeholder="invoke"></sl-input>
+          <sl-input id="logs-trace" label="Trace ID" size="small" placeholder="a2a_..."></sl-input>
+          <sl-input id="logs-conversation" label="Conversation ID" size="small" placeholder="conv_..."></sl-input>
+          <sl-input id="logs-token" label="Token ID" size="small" placeholder="tok_..."></sl-input>
+          <sl-input id="logs-search" label="Search" size="small" placeholder="text"></sl-input>
+          <sl-input id="logs-limit" label="Limit" type="number" size="small" min="1" max="1000" value="200"></sl-input>
+        </div>
+        <sl-card id="log-stats"></sl-card>
+        <table id="logs-table">
+          <thead>
+            <tr>
+              <th>Time</th>
+              <th>Level</th>
+              <th>Component</th>
+              <th>Event</th>
+              <th>Message</th>
+              <th>Trace</th>
+              <th>Conv</th>
+              <th>Tok</th>
+              <th>Code</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
+        <sl-card id="trace-detail"></sl-card>
+      </div>
+      <div id="panel-health" class="panel">
+        <sl-card id="health-latest">
+          <p>No test results available. Run <code>node test/e2e/orchestrate.js --persist</code> to generate results.</p>
+        </sl-card>
+        <h3>History</h3>
+        <table id="health-history-table">
+          <thead>
+            <tr>
+              <th>Status</th>
+              <th>Duration</th>
+              <th>Passed</th>
+              <th>Failed</th>
+              <th>Regression</th>
+              <th>Time</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
+      </div>
+      <!-- A2A-50: Settings panel — relocated from sl-details in panel-permissions -->
+      <div id="panel-settings" class="panel">
+        <h3>Defaults</h3>
+        <form id="defaults-form">
+          <sl-input id="defaults-expiration" label="Expiration" placeholder="7d"></sl-input>
+          <sl-input id="defaults-max-calls" label="Max Calls" type="number" min="1"></sl-input>
+          <div class="row">
+            <sl-button type="submit" variant="primary">Save Defaults</sl-button>
+          </div>
+        </form>
+        <h3>New Tier</h3>
+        <form id="new-tier-form">
+          <sl-input id="new-tier-id" label="Tier ID" placeholder="partners"></sl-input>
+          <sl-input id="new-tier-name" label="Name" placeholder="Partners"></sl-input>
+          <label>Copy from
+            <sl-select id="new-tier-copy-from" size="small">
+              <sl-option value="">None</sl-option>
+            </sl-select>
+          </label>
+          <div class="row">
+            <sl-button type="submit" variant="primary">Create Tier</sl-button>
+          </div>
+        </form>
+        <h3>Remote Callbook</h3>
+        <sl-card id="callbook-status"></sl-card>
+        <h3>Auto Update</h3>
+        <sl-card id="auto-update-status">Loading...</sl-card>
+        <div class="row">
+          <sl-button id="auto-update-check" size="small">Check now</sl-button>
+          <sl-button id="auto-update-now" size="small">Update now</sl-button>
+          <sl-button id="auto-update-toggle" size="small">Disable auto-update</sl-button>
+        </div>
+        <sl-card>
+          <form id="callbook-provision-form">
+            <div class="row">
+              <sl-button type="submit" variant="primary" size="small">Create Install Link (24h)</sl-button>
+              <sl-button id="callbook-logout" size="small" variant="default">Logout This Browser</sl-button>
+            </div>
+            <sl-input id="callbook-label" label="Device label" value="Callbook Remote"></sl-input>
+            <sl-textarea id="callbook-install-url" label="Install URL" rows="3" readonly></sl-textarea>
+            <div class="row">
+              <sl-button id="callbook-copy-url" size="small">Copy Link</sl-button>
+            </div>
+            <div id="callbook-warnings" class="mono"></div>
+          </form>
+        </sl-card>
+        <sl-card>
+          <div class="row">
+            <strong>Paired Devices</strong>
+          </div>
+          <table id="callbook-devices-table">
+            <thead>
+              <tr>
+                <th>Label</th>
+                <th>Created</th>
+                <th>Last Used</th>
+                <th>Sessions</th>
+                <th>Revoked</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody></tbody>
+          </table>
+        </sl-card>
+      </div>
+    </div>
+  </main>
+  <div id="notice"></div>
+  <script src="./app.js"></script>
+</body>
+</html>