a2acalling 0.6.56 → 0.6.58

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,235 @@
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="settings">Settings</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
-
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>
46
-
47
- <div id="contacts-sections"></div>
48
- <div id="contact-detail" class="card"></div>
49
- </section>
50
27
 
51
- <section id="tab-calls" class="panel">
52
- <div class="row">
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>
44
+
45
+ <div id="contacts-sections"></div>
46
+ <sl-card id="contact-detail"></sl-card>
47
+ </sl-tab-panel>
48
+
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>
98
-
99
- <div id="log-stats" class="card"></div>
100
-
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>
118
-
119
- <div id="trace-detail" class="card"></div>
120
- </section>
121
-
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>
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>
129
66
 
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>
67
+ <sl-tab-panel name="settings">
68
+ <h2>Tier Settings</h2>
138
69
  <div class="row">
139
- <button type="submit">Save Tier</button>
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>
140
73
  </div>
141
- </form>
142
74
 
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>
75
+ <form id="tier-form">
76
+ <sl-input id="tier-id" label="Tier ID" readonly></sl-input>
77
+ <sl-input id="tier-name" label="Name"></sl-input>
78
+ <sl-input id="tier-description" label="Description"></sl-input>
79
+ <sl-input id="tier-disclosure" label="Disclosure" placeholder="minimal"></sl-input>
80
+ <sl-textarea id="tier-tools" label="Allowed Tools (one per line)" rows="5" placeholder="Read&#10;Grep&#10;Glob"></sl-textarea>
81
+ <sl-textarea id="tier-topics" label="Topics (one per line)" rows="6"></sl-textarea>
82
+ <sl-textarea id="tier-goals" label="Goals (one per line)" rows="6"></sl-textarea>
83
+ <div class="row">
84
+ <sl-button type="submit" variant="primary">Save Tier</sl-button>
85
+ </div>
86
+ </form>
148
87
 
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
88
  <div class="row">
154
- <button type="submit">Save Defaults</button>
89
+ <label for="copy-from-tier">Copy from</label>
90
+ <sl-select id="copy-from-tier" size="small" style="min-width:200px;"></sl-select>
91
+ <sl-button id="copy-tier-btn" size="small">Copy Tier</sl-button>
155
92
  </div>
156
- </form>
157
93
 
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>
167
- <div class="row">
168
- <button type="submit">Create Tier</button>
169
- </div>
170
- </form>
94
+ <h3>Defaults</h3>
95
+ <form id="defaults-form">
96
+ <sl-input id="defaults-expiration" label="Expiration" placeholder="7d"></sl-input>
97
+ <sl-input id="defaults-max-calls" label="Max Calls" type="number" min="1"></sl-input>
98
+ <div class="row">
99
+ <sl-button type="submit" variant="primary">Save Defaults</sl-button>
100
+ </div>
101
+ </form>
171
102
 
172
- <h3>Remote Callbook</h3>
173
- <div id="callbook-status" class="card"></div>
103
+ <h3>New Tier</h3>
104
+ <form id="new-tier-form">
105
+ <sl-input id="new-tier-id" label="Tier ID" placeholder="partners"></sl-input>
106
+ <sl-input id="new-tier-name" label="Name" placeholder="Partners"></sl-input>
107
+ <label>Copy from
108
+ <sl-select id="new-tier-copy-from" size="small">
109
+ <sl-option value="">None</sl-option>
110
+ </sl-select>
111
+ </label>
112
+ <div class="row">
113
+ <sl-button type="submit" variant="primary">Create Tier</sl-button>
114
+ </div>
115
+ </form>
174
116
 
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>
117
+ <h3>Remote Callbook</h3>
118
+ <sl-card id="callbook-status"></sl-card>
183
119
 
184
- <form id="callbook-provision-form" class="card">
120
+ <h3>Auto Update</h3>
121
+ <sl-card id="auto-update-status">Loading...</sl-card>
185
122
  <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>
123
+ <sl-button id="auto-update-check" size="small">Check now</sl-button>
124
+ <sl-button id="auto-update-now" size="small">Update now</sl-button>
125
+ <sl-button id="auto-update-toggle" size="small">Disable auto-update</sl-button>
189
126
  </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>
197
127
 
198
- <div class="card">
199
- <div class="row">
200
- <strong>Paired Devices</strong>
201
- <button id="callbook-refresh-devices" type="button">Refresh Devices</button>
128
+ <sl-card>
129
+ <form id="callbook-provision-form">
130
+ <div class="row">
131
+ <sl-button type="submit" variant="primary" size="small">Create Install Link (24h)</sl-button>
132
+ <sl-button id="callbook-logout" size="small" variant="default">Logout This Browser</sl-button>
133
+ </div>
134
+ <sl-input id="callbook-label" label="Device label" value="Callbook Remote"></sl-input>
135
+ <sl-textarea id="callbook-install-url" label="Install URL" rows="3" readonly></sl-textarea>
136
+ <div class="row">
137
+ <sl-button id="callbook-copy-url" size="small">Copy Link</sl-button>
138
+ </div>
139
+ <div id="callbook-warnings" class="mono"></div>
140
+ </form>
141
+ </sl-card>
142
+
143
+ <sl-card>
144
+ <div class="row">
145
+ <strong>Paired Devices</strong>
146
+ </div>
147
+ <table id="callbook-devices-table">
148
+ <thead>
149
+ <tr>
150
+ <th>Label</th>
151
+ <th>Created</th>
152
+ <th>Last Used</th>
153
+ <th>Sessions</th>
154
+ <th>Revoked</th>
155
+ <th>Action</th>
156
+ </tr>
157
+ </thead>
158
+ <tbody></tbody>
159
+ </table>
160
+ </sl-card>
161
+ </sl-tab-panel>
162
+
163
+ <sl-tab-panel name="invites">
164
+ <sl-details id="generate-invite-details" summary="+ Generate Invite">
165
+ <form id="invite-form">
166
+ <sl-input id="invite-name" label="Name" required></sl-input>
167
+ <sl-input id="invite-owner" label="Owner"></sl-input>
168
+ <label>Tier <sl-select id="invite-tier" size="small"></sl-select></label>
169
+ <sl-input id="invite-expires" label="Expires" value="7d"></sl-input>
170
+ <sl-input id="invite-max-calls" label="Max Calls" type="number" min="1" value="100"></sl-input>
171
+ <sl-input id="invite-notify" label="Notify" value="all"></sl-input>
172
+ <div class="row">
173
+ <sl-button type="submit" variant="primary">Create Invite</sl-button>
174
+ <sl-button id="generate-invite-cancel" variant="default">Cancel</sl-button>
175
+ </div>
176
+ </form>
177
+ </sl-details>
178
+
179
+ <div id="invite-message-wrap" style="display:none;">
180
+ <label>Invite Message</label>
181
+ <sl-textarea id="invite-message" rows="8" readonly></sl-textarea>
202
182
  </div>
203
- <table id="callbook-devices-table">
183
+
184
+ <h3>Existing Invites</h3>
185
+ <table id="invites-table">
204
186
  <thead>
205
187
  <tr>
206
- <th>Label</th>
207
- <th>Created</th>
208
- <th>Last Used</th>
209
- <th>Sessions</th>
210
- <th>Revoked</th>
188
+ <th>ID</th>
189
+ <th>Name</th>
190
+ <th>Tier</th>
191
+ <th>Calls</th>
192
+ <th>Expires</th>
193
+ <th>Status</th>
211
194
  <th>Action</th>
212
195
  </tr>
213
196
  </thead>
214
197
  <tbody></tbody>
215
198
  </table>
216
- </div>
217
- </section>
199
+ </sl-tab-panel>
218
200
 
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>
201
+ <sl-tab-panel name="logs">
202
+ <h2>Logs</h2>
203
+
204
+ <div class="filters">
205
+ <label>Level
206
+ <sl-select id="logs-level" size="small" clearable>
207
+ <sl-option value="trace">trace</sl-option>
208
+ <sl-option value="debug">debug</sl-option>
209
+ <sl-option value="info">info</sl-option>
210
+ <sl-option value="warn">warn</sl-option>
211
+ <sl-option value="error">error</sl-option>
212
+ </sl-select>
213
+ </label>
214
+ <sl-input id="logs-component" label="Component" size="small" placeholder="a2a.routes"></sl-input>
215
+ <sl-input id="logs-event" label="Event" size="small" placeholder="invoke"></sl-input>
216
+ <sl-input id="logs-trace" label="Trace ID" size="small" placeholder="a2a_..."></sl-input>
217
+ <sl-input id="logs-conversation" label="Conversation ID" size="small" placeholder="conv_..."></sl-input>
218
+ <sl-input id="logs-token" label="Token ID" size="small" placeholder="tok_..."></sl-input>
219
+ <sl-input id="logs-search" label="Search" size="small" placeholder="text"></sl-input>
220
+ <sl-input id="logs-limit" label="Limit" type="number" size="small" min="1" max="1000" value="200"></sl-input>
230
221
  </div>
231
- </form>
232
222
 
233
- <label>Invite Message<textarea id="invite-message" rows="8" readonly></textarea></label>
223
+ <sl-card id="log-stats"></sl-card>
234
224
 
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>
225
+ <table id="logs-table">
226
+ <thead>
227
+ <tr>
228
+ <th>Time</th>
229
+ <th>Level</th>
230
+ <th>Component</th>
231
+ <th>Event</th>
232
+ <th>Message</th>
233
+ <th>Trace</th>
234
+ <th>Conv</th>
235
+ <th>Tok</th>
236
+ <th>Code</th>
237
+ <th>Status</th>
238
+ </tr>
239
+ </thead>
240
+ <tbody></tbody>
241
+ </table>
242
+
243
+ <sl-card id="trace-detail"></sl-card>
244
+ </sl-tab-panel>
245
+ </sl-tab-group>
254
246
 
255
247
  <div id="notice"></div>
256
248
  </main>