a2acalling 0.6.62 → 0.6.64
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.
- package/.a2a-manifest.json +2 -2
- package/.maestro/inbox/release-workflow-spam.md +25 -0
- package/docs/plans/2026-02-21-a2a-48-permissions-redesign.md +359 -0
- package/docs/plans/2026-02-21-a2a-49-remaining-tabs-polish.md +375 -0
- package/package.json +1 -1
- package/src/dashboard/public/app.js +564 -400
- package/src/dashboard/public/index.html +194 -125
- package/src/dashboard/public/style.css +919 -109
|
@@ -1,31 +1,65 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
2
|
+
<html lang="en" class="sl-theme-dark">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>A2A
|
|
7
|
-
|
|
6
|
+
<title>A2A Callbook</title>
|
|
7
|
+
<!-- A2A-47: Switch to Shoelace dark theme to match dark sidebar design -->
|
|
8
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19/cdn/themes/dark.css" />
|
|
8
9
|
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19/cdn/shoelace-autoloader.js"></script>
|
|
10
|
+
<!-- A2A-47: Material Symbols for sidebar nav icons -->
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" />
|
|
12
|
+
<!-- A2A-47: Inter font for modern UI typography -->
|
|
13
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" />
|
|
9
14
|
<link rel="stylesheet" href="./style.css">
|
|
10
15
|
</head>
|
|
11
|
-
<body>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
+
<body class="sl-theme-dark">
|
|
17
|
+
<!-- A2A-47: Fixed left sidebar navigation replacing sl-tab-group horizontal tabs -->
|
|
18
|
+
<aside class="sidebar">
|
|
19
|
+
<div class="sidebar-brand">
|
|
20
|
+
<span class="material-symbols-outlined brand-icon">phone_in_talk</span>
|
|
21
|
+
<span class="brand-text">A2A Callbook</span>
|
|
22
|
+
</div>
|
|
23
|
+
<nav class="sidebar-nav">
|
|
24
|
+
<a data-panel="contacts" class="nav-item active">
|
|
25
|
+
<span class="material-symbols-outlined nav-icon" style="color:#10B981;">contacts</span>
|
|
26
|
+
<span class="nav-label">Contacts</span>
|
|
27
|
+
</a>
|
|
28
|
+
<a data-panel="calls" class="nav-item">
|
|
29
|
+
<span class="material-symbols-outlined nav-icon" style="color:#3B82F6;">call</span>
|
|
30
|
+
<span class="nav-label">Calls</span>
|
|
31
|
+
</a>
|
|
32
|
+
<a data-panel="permissions" class="nav-item">
|
|
33
|
+
<span class="material-symbols-outlined nav-icon" style="color:#8B5CF6;">verified_user</span>
|
|
34
|
+
<span class="nav-label">Permissions</span>
|
|
35
|
+
</a>
|
|
36
|
+
<a data-panel="invites" class="nav-item">
|
|
37
|
+
<span class="material-symbols-outlined nav-icon" style="color:#F59E0B;">mail</span>
|
|
38
|
+
<span class="nav-label">Invites</span>
|
|
39
|
+
</a>
|
|
40
|
+
<a data-panel="logs" class="nav-item">
|
|
41
|
+
<span class="material-symbols-outlined nav-icon" style="color:#14B8A6;">history</span>
|
|
42
|
+
<span class="nav-label">Logs</span>
|
|
43
|
+
</a>
|
|
44
|
+
<a data-panel="health" class="nav-item">
|
|
45
|
+
<span class="material-symbols-outlined nav-icon" style="color:#EF4444;">monitor_heart</span>
|
|
46
|
+
<span class="nav-label">Health</span>
|
|
47
|
+
</a>
|
|
48
|
+
</nav>
|
|
49
|
+
</aside>
|
|
16
50
|
|
|
17
|
-
<main>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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
|
-
<sl-tab slot="nav" panel="health">Health</sl-tab>
|
|
51
|
+
<main class="main-content">
|
|
52
|
+
<!-- A2A-47: Decorative background orbs for depth -->
|
|
53
|
+
<div class="bg-orb bg-orb-blue"></div>
|
|
54
|
+
<div class="bg-orb bg-orb-purple"></div>
|
|
25
55
|
|
|
26
|
-
|
|
27
|
-
|
|
56
|
+
<header class="content-header">
|
|
57
|
+
<h1 id="section-title">Contacts</h1>
|
|
58
|
+
</header>
|
|
28
59
|
|
|
60
|
+
<div class="content-body">
|
|
61
|
+
<!-- A2A-47: Panel-based layout; only one panel visible at a time -->
|
|
62
|
+
<div id="panel-contacts" class="panel active">
|
|
29
63
|
<sl-details id="add-contact-details" summary="+ Add Contact">
|
|
30
64
|
<form id="add-contact-form">
|
|
31
65
|
<sl-input id="add-contact-url" label="Invite URL" placeholder="a2a://host/token" required></sl-input>
|
|
@@ -45,10 +79,9 @@
|
|
|
45
79
|
|
|
46
80
|
<div id="contacts-sections"></div>
|
|
47
81
|
<sl-card id="contact-detail"></sl-card>
|
|
48
|
-
</
|
|
82
|
+
</div>
|
|
49
83
|
|
|
50
|
-
<
|
|
51
|
-
<h2>Calls</h2>
|
|
84
|
+
<div id="panel-calls" class="panel">
|
|
52
85
|
<table id="calls-table">
|
|
53
86
|
<thead>
|
|
54
87
|
<tr>
|
|
@@ -63,117 +96,156 @@
|
|
|
63
96
|
<tbody></tbody>
|
|
64
97
|
</table>
|
|
65
98
|
<div id="call-detail"></div>
|
|
66
|
-
</
|
|
99
|
+
</div>
|
|
67
100
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
<div class="
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
101
|
+
<!-- A2A-48: Permissions tab redesign with tier cards, tool toggles, auto-save, and right sidebar -->
|
|
102
|
+
<div id="panel-permissions" class="panel">
|
|
103
|
+
<div class="perm-layout">
|
|
104
|
+
<div class="perm-main">
|
|
105
|
+
<!-- Active Tier cards -->
|
|
106
|
+
<section class="perm-section">
|
|
107
|
+
<div class="perm-section-header">
|
|
108
|
+
<h2>Active Tier</h2>
|
|
109
|
+
<button class="perm-add-btn" id="perm-new-tier-btn">
|
|
110
|
+
<span class="material-symbols-outlined" style="font-size:18px;">add</span> New Tier
|
|
111
|
+
</button>
|
|
112
|
+
</div>
|
|
113
|
+
<div id="tier-cards" class="tier-cards-grid"></div>
|
|
114
|
+
</section>
|
|
76
115
|
|
|
77
|
-
|
|
116
|
+
<!-- Active Configuration (topics + goals) -->
|
|
117
|
+
<section class="perm-section">
|
|
118
|
+
<div class="perm-section-header">
|
|
119
|
+
<h2>Active Configuration</h2>
|
|
120
|
+
<span class="perm-hint">Drag items from sidebar to update permissions</span>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="config-columns">
|
|
123
|
+
<div class="config-col">
|
|
124
|
+
<div class="config-col-header config-col-header--teal">
|
|
125
|
+
<span class="status-dot status-dot--teal"></span>
|
|
126
|
+
Active Topics
|
|
127
|
+
<span id="topic-count" class="count-badge count-badge--teal">0</span>
|
|
128
|
+
</div>
|
|
129
|
+
<div id="active-topics-zone" class="perm-drop-zone"></div>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="config-col">
|
|
132
|
+
<div class="config-col-header config-col-header--yellow">
|
|
133
|
+
<span class="status-dot status-dot--yellow"></span>
|
|
134
|
+
Active Goals
|
|
135
|
+
<span id="goal-count" class="count-badge count-badge--yellow">0</span>
|
|
136
|
+
</div>
|
|
137
|
+
<div id="active-goals-zone" class="perm-drop-zone"></div>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
</section>
|
|
78
141
|
|
|
79
|
-
|
|
80
|
-
|
|
142
|
+
<!-- Allowed Tools toggles -->
|
|
143
|
+
<section class="perm-section">
|
|
144
|
+
<h2>Allowed Tools</h2>
|
|
145
|
+
<div id="tool-toggles" class="tool-toggles-grid"></div>
|
|
146
|
+
</section>
|
|
81
147
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<sl-input id="tier-description" label="Description"></sl-input>
|
|
85
|
-
<label>Allowed Tools</label>
|
|
86
|
-
<div id="tier-tools-list" class="tools-checklist"></div>
|
|
87
|
-
<label>Topics</label>
|
|
88
|
-
<div id="tier-topics-list"></div>
|
|
89
|
-
<label>Goals</label>
|
|
90
|
-
<div id="tier-goals-list"></div>
|
|
91
|
-
<div class="row">
|
|
92
|
-
<sl-button type="submit" variant="primary">Save Tier</sl-button>
|
|
93
|
-
</div>
|
|
94
|
-
</form>
|
|
148
|
+
<!-- Tier Warnings -->
|
|
149
|
+
<div id="tier-warnings" class="tier-warnings"></div>
|
|
95
150
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
151
|
+
<!-- Settings & Administration (collapsed) -->
|
|
152
|
+
<sl-details summary="Settings & Administration">
|
|
153
|
+
<h3>Defaults</h3>
|
|
154
|
+
<form id="defaults-form">
|
|
155
|
+
<sl-input id="defaults-expiration" label="Expiration" placeholder="7d"></sl-input>
|
|
156
|
+
<sl-input id="defaults-max-calls" label="Max Calls" type="number" min="1"></sl-input>
|
|
157
|
+
<div class="row">
|
|
158
|
+
<sl-button type="submit" variant="primary">Save Defaults</sl-button>
|
|
159
|
+
</div>
|
|
160
|
+
</form>
|
|
101
161
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
162
|
+
<h3>New Tier</h3>
|
|
163
|
+
<form id="new-tier-form">
|
|
164
|
+
<sl-input id="new-tier-id" label="Tier ID" placeholder="partners"></sl-input>
|
|
165
|
+
<sl-input id="new-tier-name" label="Name" placeholder="Partners"></sl-input>
|
|
166
|
+
<label>Copy from
|
|
167
|
+
<sl-select id="new-tier-copy-from" size="small">
|
|
168
|
+
<sl-option value="">None</sl-option>
|
|
169
|
+
</sl-select>
|
|
170
|
+
</label>
|
|
171
|
+
<div class="row">
|
|
172
|
+
<sl-button type="submit" variant="primary">Create Tier</sl-button>
|
|
173
|
+
</div>
|
|
174
|
+
</form>
|
|
110
175
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
<sl-input id="new-tier-id" label="Tier ID" placeholder="partners"></sl-input>
|
|
114
|
-
<sl-input id="new-tier-name" label="Name" placeholder="Partners"></sl-input>
|
|
115
|
-
<label>Copy from
|
|
116
|
-
<sl-select id="new-tier-copy-from" size="small">
|
|
117
|
-
<sl-option value="">None</sl-option>
|
|
118
|
-
</sl-select>
|
|
119
|
-
</label>
|
|
120
|
-
<div class="row">
|
|
121
|
-
<sl-button type="submit" variant="primary">Create Tier</sl-button>
|
|
122
|
-
</div>
|
|
123
|
-
</form>
|
|
176
|
+
<h3>Remote Callbook</h3>
|
|
177
|
+
<sl-card id="callbook-status"></sl-card>
|
|
124
178
|
|
|
125
|
-
|
|
126
|
-
|
|
179
|
+
<h3>Auto Update</h3>
|
|
180
|
+
<sl-card id="auto-update-status">Loading...</sl-card>
|
|
181
|
+
<div class="row">
|
|
182
|
+
<sl-button id="auto-update-check" size="small">Check now</sl-button>
|
|
183
|
+
<sl-button id="auto-update-now" size="small">Update now</sl-button>
|
|
184
|
+
<sl-button id="auto-update-toggle" size="small">Disable auto-update</sl-button>
|
|
185
|
+
</div>
|
|
127
186
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
187
|
+
<sl-card>
|
|
188
|
+
<form id="callbook-provision-form">
|
|
189
|
+
<div class="row">
|
|
190
|
+
<sl-button type="submit" variant="primary" size="small">Create Install Link (24h)</sl-button>
|
|
191
|
+
<sl-button id="callbook-logout" size="small" variant="default">Logout This Browser</sl-button>
|
|
192
|
+
</div>
|
|
193
|
+
<sl-input id="callbook-label" label="Device label" value="Callbook Remote"></sl-input>
|
|
194
|
+
<sl-textarea id="callbook-install-url" label="Install URL" rows="3" readonly></sl-textarea>
|
|
195
|
+
<div class="row">
|
|
196
|
+
<sl-button id="callbook-copy-url" size="small">Copy Link</sl-button>
|
|
197
|
+
</div>
|
|
198
|
+
<div id="callbook-warnings" class="mono"></div>
|
|
199
|
+
</form>
|
|
200
|
+
</sl-card>
|
|
135
201
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
202
|
+
<sl-card>
|
|
203
|
+
<div class="row">
|
|
204
|
+
<strong>Paired Devices</strong>
|
|
205
|
+
</div>
|
|
206
|
+
<table id="callbook-devices-table">
|
|
207
|
+
<thead>
|
|
208
|
+
<tr>
|
|
209
|
+
<th>Label</th>
|
|
210
|
+
<th>Created</th>
|
|
211
|
+
<th>Last Used</th>
|
|
212
|
+
<th>Sessions</th>
|
|
213
|
+
<th>Revoked</th>
|
|
214
|
+
<th>Action</th>
|
|
215
|
+
</tr>
|
|
216
|
+
</thead>
|
|
217
|
+
<tbody></tbody>
|
|
218
|
+
</table>
|
|
219
|
+
</sl-card>
|
|
220
|
+
</sl-details>
|
|
221
|
+
</div>
|
|
150
222
|
|
|
151
|
-
|
|
152
|
-
<div class="
|
|
153
|
-
<
|
|
223
|
+
<!-- Right sidebar: preview + topic/goal lists -->
|
|
224
|
+
<div class="perm-sidebar">
|
|
225
|
+
<div id="perm-preview" class="preview-card"></div>
|
|
226
|
+
<div id="sidebar-topics" class="sidebar-list"></div>
|
|
227
|
+
<div id="sidebar-goals" class="sidebar-list"></div>
|
|
154
228
|
</div>
|
|
155
|
-
|
|
156
|
-
<thead>
|
|
157
|
-
<tr>
|
|
158
|
-
<th>Label</th>
|
|
159
|
-
<th>Created</th>
|
|
160
|
-
<th>Last Used</th>
|
|
161
|
-
<th>Sessions</th>
|
|
162
|
-
<th>Revoked</th>
|
|
163
|
-
<th>Action</th>
|
|
164
|
-
</tr>
|
|
165
|
-
</thead>
|
|
166
|
-
<tbody></tbody>
|
|
167
|
-
</table>
|
|
168
|
-
</sl-card>
|
|
229
|
+
</div>
|
|
169
230
|
|
|
231
|
+
<!-- A2A-48: Simplified Create New Item dialog (no icon selector per scope decision) -->
|
|
232
|
+
<sl-dialog id="create-item-dialog" label="Create New Item" style="--width: 440px;">
|
|
233
|
+
<sl-input id="create-item-title" label="Title" placeholder="e.g., Database Management" required></sl-input>
|
|
234
|
+
<sl-textarea id="create-item-desc" label="Description" rows="3" placeholder="Describe the scope..."></sl-textarea>
|
|
235
|
+
<div slot="footer" class="row">
|
|
236
|
+
<sl-button id="create-item-cancel" variant="default">Cancel</sl-button>
|
|
237
|
+
<sl-button id="create-item-submit" variant="primary">Create</sl-button>
|
|
238
|
+
</div>
|
|
239
|
+
</sl-dialog>
|
|
240
|
+
|
|
241
|
+
<!-- A2A-48: Full caller preview dialog (existing, kept for detail view) -->
|
|
170
242
|
<sl-dialog id="preview-dialog" label="Caller Preview" style="--width: 540px;">
|
|
171
243
|
<div id="preview-content"></div>
|
|
172
244
|
<sl-button slot="footer" variant="primary" id="preview-close-btn">Close</sl-button>
|
|
173
245
|
</sl-dialog>
|
|
174
|
-
</
|
|
246
|
+
</div>
|
|
175
247
|
|
|
176
|
-
<
|
|
248
|
+
<div id="panel-invites" class="panel">
|
|
177
249
|
<sl-details id="generate-invite-details" summary="+ Generate Invite">
|
|
178
250
|
<form id="invite-form">
|
|
179
251
|
<sl-input id="invite-name" label="Name" required></sl-input>
|
|
@@ -209,11 +281,9 @@
|
|
|
209
281
|
</thead>
|
|
210
282
|
<tbody></tbody>
|
|
211
283
|
</table>
|
|
212
|
-
</
|
|
213
|
-
|
|
214
|
-
<sl-tab-panel name="logs">
|
|
215
|
-
<h2>Logs</h2>
|
|
284
|
+
</div>
|
|
216
285
|
|
|
286
|
+
<div id="panel-logs" class="panel">
|
|
217
287
|
<div class="filters">
|
|
218
288
|
<label>Level
|
|
219
289
|
<sl-select id="logs-level" size="small" clearable>
|
|
@@ -254,10 +324,9 @@
|
|
|
254
324
|
</table>
|
|
255
325
|
|
|
256
326
|
<sl-card id="trace-detail"></sl-card>
|
|
257
|
-
</
|
|
327
|
+
</div>
|
|
258
328
|
|
|
259
|
-
<
|
|
260
|
-
<h2>E2E Health</h2>
|
|
329
|
+
<div id="panel-health" class="panel">
|
|
261
330
|
<sl-card id="health-latest">
|
|
262
331
|
<p>No test results available. Run <code>node test/e2e/orchestrate.js --persist</code> to generate results.</p>
|
|
263
332
|
</sl-card>
|
|
@@ -275,12 +344,12 @@
|
|
|
275
344
|
</thead>
|
|
276
345
|
<tbody></tbody>
|
|
277
346
|
</table>
|
|
278
|
-
</
|
|
279
|
-
</
|
|
280
|
-
|
|
281
|
-
<div id="notice"></div>
|
|
347
|
+
</div>
|
|
348
|
+
</div>
|
|
282
349
|
</main>
|
|
283
350
|
|
|
351
|
+
<div id="notice"></div>
|
|
352
|
+
|
|
284
353
|
<script src="./app.js"></script>
|
|
285
354
|
</body>
|
|
286
355
|
</html>
|