a2acalling 0.6.57 → 0.6.59

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.
@@ -4,6 +4,8 @@
4
4
  <meta charset="utf-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
6
  <title>A2A Dashboard</title>
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19/cdn/themes/light.css" />
8
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19/cdn/shoelace-autoloader.js"></script>
7
9
  <link rel="stylesheet" href="./style.css">
8
10
  </head>
9
11
  <body>
@@ -12,245 +14,247 @@
12
14
  <p>Contacts, calls, settings, and invites.</p>
13
15
  </header>
14
16
 
15
- <nav>
16
- <button class="tab is-active" data-tab="contacts">Contacts</button>
17
- <button class="tab" data-tab="calls">Calls</button>
18
- <button class="tab" data-tab="logs">Logs</button>
19
- <button class="tab" data-tab="settings">Settings</button>
20
- <button class="tab" data-tab="invites">Invites</button>
21
- </nav>
22
-
23
17
  <main>
24
- <section id="tab-contacts" class="panel is-active">
25
- <div class="row">
18
+ <sl-tab-group id="main-tabs">
19
+ <sl-tab slot="nav" panel="contacts" active>Contacts</sl-tab>
20
+ <sl-tab slot="nav" panel="calls">Calls</sl-tab>
21
+ <sl-tab slot="nav" panel="permissions">Permissions</sl-tab>
22
+ <sl-tab slot="nav" panel="invites">Invites</sl-tab>
23
+ <sl-tab slot="nav" panel="logs">Logs</sl-tab>
24
+
25
+ <sl-tab-panel name="contacts">
26
26
  <h2>Contacts</h2>
27
- <button id="refresh-contacts">Refresh</button>
28
- </div>
29
27
 
30
- <div class="card">
31
- <h3>Add Contact</h3>
32
- <form id="add-contact-form">
33
- <label>Invite URL <input id="add-contact-url" type="text" placeholder="a2a://host/token" required></label>
34
- <label>Agent name <input id="add-contact-name" type="text" placeholder="Agent name (optional)"></label>
35
- <label>Owner name <input id="add-contact-owner" type="text" placeholder="Human owner (optional)"></label>
36
- <label><input id="add-contact-mine" type="checkbox"> Mark as mine (personal agent)</label>
37
- <label>Server name (my agents only) <input id="add-contact-server-name" type="text" placeholder="Server label (optional)"></label>
38
- <label>Tags <input id="add-contact-tags" type="text" placeholder="comma,separated (optional)"></label>
39
- <label>Notes <textarea id="add-contact-notes" rows="3" placeholder="Notes (optional)"></textarea></label>
40
- <label>Fields (JSON) <textarea id="add-contact-fields" rows="4" placeholder='{"email":"...","company":"..."} (optional)'></textarea></label>
41
- <div class="row">
42
- <button type="submit">Add</button>
43
- </div>
44
- </form>
45
- </div>
28
+ <sl-details id="add-contact-details" summary="+ Add Contact">
29
+ <form id="add-contact-form">
30
+ <sl-input id="add-contact-url" label="Invite URL" placeholder="a2a://host/token" required></sl-input>
31
+ <sl-input id="add-contact-name" label="Agent name" placeholder="Agent name (optional)"></sl-input>
32
+ <sl-input id="add-contact-owner" label="Owner name" placeholder="Human owner (optional)"></sl-input>
33
+ <sl-checkbox id="add-contact-mine">Mark as mine (personal agent)</sl-checkbox>
34
+ <sl-input id="add-contact-server-name" label="Server name (my agents only)" placeholder="Server label (optional)"></sl-input>
35
+ <sl-input id="add-contact-tags" label="Tags" placeholder="comma,separated (optional)"></sl-input>
36
+ <sl-textarea id="add-contact-notes" label="Notes" rows="3" placeholder="Notes (optional)"></sl-textarea>
37
+ <sl-textarea id="add-contact-fields" label="Fields (JSON)" rows="4" placeholder='{"email":"...","company":"..."} (optional)'></sl-textarea>
38
+ <div class="row">
39
+ <sl-button type="submit" variant="primary">Add</sl-button>
40
+ <sl-button id="add-contact-cancel" variant="default">Cancel</sl-button>
41
+ </div>
42
+ </form>
43
+ </sl-details>
46
44
 
47
- <div id="contacts-sections"></div>
48
- <div id="contact-detail" class="card"></div>
49
- </section>
45
+ <div id="contacts-sections"></div>
46
+ <sl-card id="contact-detail"></sl-card>
47
+ </sl-tab-panel>
50
48
 
51
- <section id="tab-calls" class="panel">
52
- <div class="row">
49
+ <sl-tab-panel name="calls">
53
50
  <h2>Calls</h2>
54
- <button id="refresh-calls">Refresh</button>
55
- </div>
56
- <table id="calls-table">
57
- <thead>
58
- <tr>
59
- <th>Conversation</th>
60
- <th>Contact</th>
61
- <th>Status</th>
62
- <th>Messages</th>
63
- <th>Updated</th>
64
- <th>Summary</th>
65
- </tr>
66
- </thead>
67
- <tbody></tbody>
68
- </table>
69
- <div id="call-detail"></div>
70
- </section>
71
-
72
- <section id="tab-logs" class="panel">
73
- <div class="row">
74
- <h2>Logs</h2>
75
- <button id="refresh-logs">Refresh</button>
76
- <button id="refresh-log-stats">Stats</button>
77
- </div>
78
-
79
- <div class="filters">
80
- <label>Level
81
- <select id="logs-level">
82
- <option value="">(any)</option>
83
- <option value="trace">trace</option>
84
- <option value="debug">debug</option>
85
- <option value="info">info</option>
86
- <option value="warn">warn</option>
87
- <option value="error">error</option>
88
- </select>
89
- </label>
90
- <label>Component <input id="logs-component" type="text" placeholder="a2a.routes"></label>
91
- <label>Event <input id="logs-event" type="text" placeholder="invoke"></label>
92
- <label>Trace ID <input id="logs-trace" type="text" placeholder="a2a_..."></label>
93
- <label>Conversation ID <input id="logs-conversation" type="text" placeholder="conv_..."></label>
94
- <label>Token ID <input id="logs-token" type="text" placeholder="tok_..."></label>
95
- <label>Search <input id="logs-search" type="text" placeholder="text"></label>
96
- <label>Limit <input id="logs-limit" type="number" min="1" max="1000" value="200"></label>
97
- </div>
51
+ <table id="calls-table">
52
+ <thead>
53
+ <tr>
54
+ <th>Conversation</th>
55
+ <th>Contact</th>
56
+ <th>Status</th>
57
+ <th>Messages</th>
58
+ <th>Updated</th>
59
+ <th>Summary</th>
60
+ </tr>
61
+ </thead>
62
+ <tbody></tbody>
63
+ </table>
64
+ <div id="call-detail"></div>
65
+ </sl-tab-panel>
98
66
 
99
- <div id="log-stats" class="card"></div>
67
+ <sl-tab-panel name="permissions">
68
+ <h2>Permission Tiers</h2>
69
+ <div class="row">
70
+ <label for="tier-select">Tier</label>
71
+ <sl-select id="tier-select" size="small" style="min-width:200px;"></sl-select>
72
+ <sl-button id="new-tier-btn" size="small">New Tier</sl-button>
73
+ <sl-button id="preview-caller-btn" size="small" variant="neutral">&NewLine;&#x1F441; Preview as Caller</sl-button>
74
+ </div>
100
75
 
101
- <table id="logs-table">
102
- <thead>
103
- <tr>
104
- <th>Time</th>
105
- <th>Level</th>
106
- <th>Component</th>
107
- <th>Event</th>
108
- <th>Message</th>
109
- <th>Trace</th>
110
- <th>Conv</th>
111
- <th>Tok</th>
112
- <th>Code</th>
113
- <th>Status</th>
114
- </tr>
115
- </thead>
116
- <tbody></tbody>
117
- </table>
76
+ <div id="tier-warnings" class="tier-warnings"></div>
118
77
 
119
- <div id="trace-detail" class="card"></div>
120
- </section>
78
+ <sl-checkbox id="show-drag-columns">Show all tiers side-by-side</sl-checkbox>
79
+ <div id="tier-columns" class="tier-columns"></div>
121
80
 
122
- <section id="tab-settings" class="panel">
123
- <h2>Tier Settings</h2>
124
- <div class="row">
125
- <label for="tier-select">Tier</label>
126
- <select id="tier-select"></select>
127
- <button id="new-tier-btn">New Tier</button>
128
- </div>
81
+ <form id="tier-form">
82
+ <sl-input id="tier-name" label="Name"></sl-input>
83
+ <sl-input id="tier-description" label="Description"></sl-input>
84
+ <label>Allowed Tools</label>
85
+ <div id="tier-tools-list" class="tools-checklist"></div>
86
+ <label>Topics</label>
87
+ <div id="tier-topics-list"></div>
88
+ <label>Goals</label>
89
+ <div id="tier-goals-list"></div>
90
+ <div class="row">
91
+ <sl-button type="submit" variant="primary">Save Tier</sl-button>
92
+ </div>
93
+ </form>
129
94
 
130
- <form id="tier-form">
131
- <label>Tier ID <input id="tier-id" type="text" readonly></label>
132
- <label>Name <input id="tier-name" type="text"></label>
133
- <label>Description <input id="tier-description" type="text"></label>
134
- <label>Disclosure <input id="tier-disclosure" type="text" placeholder="minimal"></label>
135
- <label>Allowed Tools (one per line)<textarea id="tier-tools" rows="5" placeholder="Read&#10;Grep&#10;Glob"></textarea></label>
136
- <label>Topics (one per line)<textarea id="tier-topics" rows="6"></textarea></label>
137
- <label>Goals (one per line)<textarea id="tier-goals" rows="6"></textarea></label>
138
95
  <div class="row">
139
- <button type="submit">Save Tier</button>
96
+ <label for="copy-from-tier">Copy from</label>
97
+ <sl-select id="copy-from-tier" size="small" style="min-width:200px;"></sl-select>
98
+ <sl-button id="copy-tier-btn" size="small">Copy Tier</sl-button>
140
99
  </div>
141
- </form>
142
100
 
143
- <div class="row">
144
- <label for="copy-from-tier">Copy from</label>
145
- <select id="copy-from-tier"></select>
146
- <button id="copy-tier-btn">Copy Tier</button>
147
- </div>
101
+ <h3>Defaults</h3>
102
+ <form id="defaults-form">
103
+ <sl-input id="defaults-expiration" label="Expiration" placeholder="7d"></sl-input>
104
+ <sl-input id="defaults-max-calls" label="Max Calls" type="number" min="1"></sl-input>
105
+ <div class="row">
106
+ <sl-button type="submit" variant="primary">Save Defaults</sl-button>
107
+ </div>
108
+ </form>
148
109
 
149
- <h3>Defaults</h3>
150
- <form id="defaults-form">
151
- <label>Expiration <input id="defaults-expiration" type="text" placeholder="7d"></label>
152
- <label>Max Calls <input id="defaults-max-calls" type="number" min="1"></label>
153
- <div class="row">
154
- <button type="submit">Save Defaults</button>
155
- </div>
156
- </form>
110
+ <h3>New Tier</h3>
111
+ <form id="new-tier-form">
112
+ <sl-input id="new-tier-id" label="Tier ID" placeholder="partners"></sl-input>
113
+ <sl-input id="new-tier-name" label="Name" placeholder="Partners"></sl-input>
114
+ <label>Copy from
115
+ <sl-select id="new-tier-copy-from" size="small">
116
+ <sl-option value="">None</sl-option>
117
+ </sl-select>
118
+ </label>
119
+ <div class="row">
120
+ <sl-button type="submit" variant="primary">Create Tier</sl-button>
121
+ </div>
122
+ </form>
123
+
124
+ <h3>Remote Callbook</h3>
125
+ <sl-card id="callbook-status"></sl-card>
157
126
 
158
- <h3>New Tier</h3>
159
- <form id="new-tier-form">
160
- <label>Tier ID <input id="new-tier-id" type="text" placeholder="partners"></label>
161
- <label>Name <input id="new-tier-name" type="text" placeholder="Partners"></label>
162
- <label>Copy from
163
- <select id="new-tier-copy-from">
164
- <option value="">None</option>
165
- </select>
166
- </label>
127
+ <h3>Auto Update</h3>
128
+ <sl-card id="auto-update-status">Loading...</sl-card>
167
129
  <div class="row">
168
- <button type="submit">Create Tier</button>
130
+ <sl-button id="auto-update-check" size="small">Check now</sl-button>
131
+ <sl-button id="auto-update-now" size="small">Update now</sl-button>
132
+ <sl-button id="auto-update-toggle" size="small">Disable auto-update</sl-button>
169
133
  </div>
170
- </form>
171
134
 
172
- <h3>Remote Callbook</h3>
173
- <div id="callbook-status" class="card"></div>
135
+ <sl-card>
136
+ <form id="callbook-provision-form">
137
+ <div class="row">
138
+ <sl-button type="submit" variant="primary" size="small">Create Install Link (24h)</sl-button>
139
+ <sl-button id="callbook-logout" size="small" variant="default">Logout This Browser</sl-button>
140
+ </div>
141
+ <sl-input id="callbook-label" label="Device label" value="Callbook Remote"></sl-input>
142
+ <sl-textarea id="callbook-install-url" label="Install URL" rows="3" readonly></sl-textarea>
143
+ <div class="row">
144
+ <sl-button id="callbook-copy-url" size="small">Copy Link</sl-button>
145
+ </div>
146
+ <div id="callbook-warnings" class="mono"></div>
147
+ </form>
148
+ </sl-card>
174
149
 
175
- <h3>Auto Update</h3>
176
- <div id="auto-update-status" class="card">Loading…</div>
177
- <div class="row">
178
- <button id="auto-update-refresh" type="button">Refresh</button>
179
- <button id="auto-update-check" type="button">Check now</button>
180
- <button id="auto-update-now" type="button">Update now</button>
181
- <button id="auto-update-toggle" type="button">Disable auto-update</button>
182
- </div>
150
+ <sl-card>
151
+ <div class="row">
152
+ <strong>Paired Devices</strong>
153
+ </div>
154
+ <table id="callbook-devices-table">
155
+ <thead>
156
+ <tr>
157
+ <th>Label</th>
158
+ <th>Created</th>
159
+ <th>Last Used</th>
160
+ <th>Sessions</th>
161
+ <th>Revoked</th>
162
+ <th>Action</th>
163
+ </tr>
164
+ </thead>
165
+ <tbody></tbody>
166
+ </table>
167
+ </sl-card>
183
168
 
184
- <form id="callbook-provision-form" class="card">
185
- <div class="row">
186
- <button type="submit">Create Install Link (24h)</button>
187
- <button id="callbook-refresh" type="button">Refresh</button>
188
- <button id="callbook-logout" type="button">Logout This Browser</button>
189
- </div>
190
- <label>Device label <input id="callbook-label" type="text" value="Callbook Remote"></label>
191
- <label>Install URL<textarea id="callbook-install-url" rows="3" readonly></textarea></label>
192
- <div class="row">
193
- <button id="callbook-copy-url" type="button">Copy Link</button>
194
- </div>
195
- <div id="callbook-warnings" class="mono"></div>
196
- </form>
169
+ <sl-dialog id="preview-dialog" label="Caller Preview" style="--width: 540px;">
170
+ <div id="preview-content"></div>
171
+ <sl-button slot="footer" variant="primary" id="preview-close-btn">Close</sl-button>
172
+ </sl-dialog>
173
+ </sl-tab-panel>
197
174
 
198
- <div class="card">
199
- <div class="row">
200
- <strong>Paired Devices</strong>
201
- <button id="callbook-refresh-devices" type="button">Refresh Devices</button>
175
+ <sl-tab-panel name="invites">
176
+ <sl-details id="generate-invite-details" summary="+ Generate Invite">
177
+ <form id="invite-form">
178
+ <sl-input id="invite-name" label="Name" required></sl-input>
179
+ <sl-input id="invite-owner" label="Owner"></sl-input>
180
+ <label>Tier <sl-select id="invite-tier" size="small"></sl-select></label>
181
+ <sl-input id="invite-expires" label="Expires" value="7d"></sl-input>
182
+ <sl-input id="invite-max-calls" label="Max Calls" type="number" min="1" value="100"></sl-input>
183
+ <sl-input id="invite-notify" label="Notify" value="all"></sl-input>
184
+ <div class="row">
185
+ <sl-button type="submit" variant="primary">Create Invite</sl-button>
186
+ <sl-button id="generate-invite-cancel" variant="default">Cancel</sl-button>
187
+ </div>
188
+ </form>
189
+ </sl-details>
190
+
191
+ <div id="invite-message-wrap" style="display:none;">
192
+ <label>Invite Message</label>
193
+ <sl-textarea id="invite-message" rows="8" readonly></sl-textarea>
202
194
  </div>
203
- <table id="callbook-devices-table">
195
+
196
+ <h3>Existing Invites</h3>
197
+ <table id="invites-table">
204
198
  <thead>
205
199
  <tr>
206
- <th>Label</th>
207
- <th>Created</th>
208
- <th>Last Used</th>
209
- <th>Sessions</th>
210
- <th>Revoked</th>
200
+ <th>ID</th>
201
+ <th>Name</th>
202
+ <th>Tier</th>
203
+ <th>Calls</th>
204
+ <th>Expires</th>
205
+ <th>Status</th>
211
206
  <th>Action</th>
212
207
  </tr>
213
208
  </thead>
214
209
  <tbody></tbody>
215
210
  </table>
216
- </div>
217
- </section>
211
+ </sl-tab-panel>
218
212
 
219
- <section id="tab-invites" class="panel">
220
- <h2>Generate Invite</h2>
221
- <form id="invite-form">
222
- <label>Name <input id="invite-name" type="text" required></label>
223
- <label>Owner <input id="invite-owner" type="text"></label>
224
- <label>Tier <select id="invite-tier"></select></label>
225
- <label>Expires <input id="invite-expires" type="text" value="7d"></label>
226
- <label>Max Calls <input id="invite-max-calls" type="number" min="1" value="100"></label>
227
- <label>Notify <input id="invite-notify" type="text" value="all"></label>
228
- <div class="row">
229
- <button type="submit">Create Invite</button>
213
+ <sl-tab-panel name="logs">
214
+ <h2>Logs</h2>
215
+
216
+ <div class="filters">
217
+ <label>Level
218
+ <sl-select id="logs-level" size="small" clearable>
219
+ <sl-option value="trace">trace</sl-option>
220
+ <sl-option value="debug">debug</sl-option>
221
+ <sl-option value="info">info</sl-option>
222
+ <sl-option value="warn">warn</sl-option>
223
+ <sl-option value="error">error</sl-option>
224
+ </sl-select>
225
+ </label>
226
+ <sl-input id="logs-component" label="Component" size="small" placeholder="a2a.routes"></sl-input>
227
+ <sl-input id="logs-event" label="Event" size="small" placeholder="invoke"></sl-input>
228
+ <sl-input id="logs-trace" label="Trace ID" size="small" placeholder="a2a_..."></sl-input>
229
+ <sl-input id="logs-conversation" label="Conversation ID" size="small" placeholder="conv_..."></sl-input>
230
+ <sl-input id="logs-token" label="Token ID" size="small" placeholder="tok_..."></sl-input>
231
+ <sl-input id="logs-search" label="Search" size="small" placeholder="text"></sl-input>
232
+ <sl-input id="logs-limit" label="Limit" type="number" size="small" min="1" max="1000" value="200"></sl-input>
230
233
  </div>
231
- </form>
232
234
 
233
- <label>Invite Message<textarea id="invite-message" rows="8" readonly></textarea></label>
235
+ <sl-card id="log-stats"></sl-card>
234
236
 
235
- <div class="row">
236
- <h3>Existing Invites</h3>
237
- <button id="refresh-invites">Refresh</button>
238
- </div>
239
- <table id="invites-table">
240
- <thead>
241
- <tr>
242
- <th>ID</th>
243
- <th>Name</th>
244
- <th>Tier</th>
245
- <th>Calls</th>
246
- <th>Expires</th>
247
- <th>Status</th>
248
- <th>Action</th>
249
- </tr>
250
- </thead>
251
- <tbody></tbody>
252
- </table>
253
- </section>
237
+ <table id="logs-table">
238
+ <thead>
239
+ <tr>
240
+ <th>Time</th>
241
+ <th>Level</th>
242
+ <th>Component</th>
243
+ <th>Event</th>
244
+ <th>Message</th>
245
+ <th>Trace</th>
246
+ <th>Conv</th>
247
+ <th>Tok</th>
248
+ <th>Code</th>
249
+ <th>Status</th>
250
+ </tr>
251
+ </thead>
252
+ <tbody></tbody>
253
+ </table>
254
+
255
+ <sl-card id="trace-detail"></sl-card>
256
+ </sl-tab-panel>
257
+ </sl-tab-group>
254
258
 
255
259
  <div id="notice"></div>
256
260
  </main>