browser-debugging-daemon 1.0.0
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/daemon.js +931 -0
- package/dashboard/app.js +1139 -0
- package/dashboard/index.html +277 -0
- package/dashboard/styles.css +774 -0
- package/index.js +223 -0
- package/mcp_server.js +999 -0
- package/orchestrator/RunTemplateStore.js +30 -0
- package/orchestrator/TaskRunStore.js +33 -0
- package/orchestrator/TaskRunner.js +803 -0
- package/package.json +66 -0
- package/runtime/ArtifactStore.js +202 -0
- package/runtime/BrowserRuntime.js +1706 -0
- package/shared.js +358 -0
- package/subagent/BrowserSubagent.js +689 -0
- package/subagent/OpenAIPlanner.js +382 -0
|
@@ -0,0 +1,277 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Browser Runs Dashboard</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
10
|
+
<link rel="stylesheet" href="/dashboard-assets/styles.css">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div class="shell">
|
|
14
|
+
<header class="topbar">
|
|
15
|
+
<div>
|
|
16
|
+
<p class="eyebrow">Browser Control Room</p>
|
|
17
|
+
<h1>Run Dashboard</h1>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="topbar-actions">
|
|
20
|
+
<button id="refreshButton" class="button secondary">Refresh</button>
|
|
21
|
+
<a class="button primary" href="#new-run">New Run</a>
|
|
22
|
+
</div>
|
|
23
|
+
</header>
|
|
24
|
+
|
|
25
|
+
<main class="layout">
|
|
26
|
+
<section class="panel list-panel">
|
|
27
|
+
<div class="panel-header">
|
|
28
|
+
<div>
|
|
29
|
+
<p class="panel-kicker">Queue</p>
|
|
30
|
+
<h2>Recent Runs</h2>
|
|
31
|
+
</div>
|
|
32
|
+
<span id="runCount" class="count-pill">0</span>
|
|
33
|
+
</div>
|
|
34
|
+
<div id="runList" class="run-list"></div>
|
|
35
|
+
</section>
|
|
36
|
+
|
|
37
|
+
<section class="panel detail-panel">
|
|
38
|
+
<div id="emptyState" class="empty-state">
|
|
39
|
+
<p class="eyebrow">No Run Selected</p>
|
|
40
|
+
<h2>Pick a run to inspect its artifacts.</h2>
|
|
41
|
+
<p>The dashboard will auto-refresh every few seconds while runs are active.</p>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div id="runDetail" class="run-detail hidden">
|
|
45
|
+
<div class="detail-header">
|
|
46
|
+
<div>
|
|
47
|
+
<p class="panel-kicker">Run Detail</p>
|
|
48
|
+
<h2 id="detailTitle">Run</h2>
|
|
49
|
+
</div>
|
|
50
|
+
<span id="detailStatus" class="status-chip"></span>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<div class="meta-grid">
|
|
54
|
+
<article class="meta-card">
|
|
55
|
+
<span class="meta-label">Summary</span>
|
|
56
|
+
<p id="detailSummary"></p>
|
|
57
|
+
</article>
|
|
58
|
+
<article class="meta-card">
|
|
59
|
+
<span class="meta-label">Task</span>
|
|
60
|
+
<p id="detailTask"></p>
|
|
61
|
+
</article>
|
|
62
|
+
<article class="meta-card">
|
|
63
|
+
<span class="meta-label">Timing</span>
|
|
64
|
+
<p id="detailTiming"></p>
|
|
65
|
+
</article>
|
|
66
|
+
<article class="meta-card">
|
|
67
|
+
<span class="meta-label">Artifacts</span>
|
|
68
|
+
<div id="detailLinks" class="link-grid"></div>
|
|
69
|
+
</article>
|
|
70
|
+
<article class="meta-card">
|
|
71
|
+
<span class="meta-label">Runtime</span>
|
|
72
|
+
<p id="detailRuntime"></p>
|
|
73
|
+
<p id="detailRuntimeNote" class="runtime-note"></p>
|
|
74
|
+
</article>
|
|
75
|
+
<article class="meta-card">
|
|
76
|
+
<span class="meta-label">Template</span>
|
|
77
|
+
<p id="detailTemplate"></p>
|
|
78
|
+
</article>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<div class="detail-columns">
|
|
82
|
+
<section class="detail-card screenshot-card">
|
|
83
|
+
<div class="section-header">
|
|
84
|
+
<h3>Visual Replay</h3>
|
|
85
|
+
<span id="detailStepFocus" class="focus-pill">Latest run view</span>
|
|
86
|
+
</div>
|
|
87
|
+
<div id="screenshotFrame" class="screenshot-frame">
|
|
88
|
+
<img id="detailScreenshot" alt="Run screenshot preview">
|
|
89
|
+
</div>
|
|
90
|
+
<div id="videoFrame" class="video-frame">
|
|
91
|
+
<video id="detailVideo" controls preload="metadata"></video>
|
|
92
|
+
</div>
|
|
93
|
+
</section>
|
|
94
|
+
|
|
95
|
+
<section class="detail-card walkthrough-card">
|
|
96
|
+
<div class="section-header">
|
|
97
|
+
<h3>Walkthrough</h3>
|
|
98
|
+
</div>
|
|
99
|
+
<pre id="detailWalkthrough" class="walkthrough"></pre>
|
|
100
|
+
</section>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<section class="detail-card history-card">
|
|
104
|
+
<div class="section-header">
|
|
105
|
+
<h3>Action Timeline</h3>
|
|
106
|
+
<button id="clearStepFocusButton" type="button" class="button secondary">Show Latest</button>
|
|
107
|
+
</div>
|
|
108
|
+
<div id="detailHistory" class="history-list"></div>
|
|
109
|
+
</section>
|
|
110
|
+
|
|
111
|
+
<section class="detail-card coordination-card">
|
|
112
|
+
<div class="section-header">
|
|
113
|
+
<h3>Coordination</h3>
|
|
114
|
+
</div>
|
|
115
|
+
<div id="coordinationEmpty" class="coordination-empty">No pending handoff. The subagent will surface guidance requests here.</div>
|
|
116
|
+
<div id="pendingInputPanel" class="pending-input hidden">
|
|
117
|
+
<p class="meta-label">Pending Question</p>
|
|
118
|
+
<h4 id="pendingInputQuestion"></h4>
|
|
119
|
+
<p id="pendingInputDetails" class="pending-input-details"></p>
|
|
120
|
+
<p id="pendingInputSuggestion" class="pending-input-suggestion"></p>
|
|
121
|
+
<form id="replyForm" class="reply-form">
|
|
122
|
+
<label>
|
|
123
|
+
<span>Reply</span>
|
|
124
|
+
<textarea id="replyInstruction" rows="4" placeholder="Tell the subagent how to proceed."></textarea>
|
|
125
|
+
</label>
|
|
126
|
+
<div class="reply-actions">
|
|
127
|
+
<button type="submit" class="button primary">Send Reply</button>
|
|
128
|
+
<button id="abortRunButton" type="button" class="button danger">Abort Run</button>
|
|
129
|
+
</div>
|
|
130
|
+
</form>
|
|
131
|
+
<p id="replyMessage" class="form-message"></p>
|
|
132
|
+
</div>
|
|
133
|
+
<div>
|
|
134
|
+
<div class="section-header">
|
|
135
|
+
<p class="meta-label">Operator Messages</p>
|
|
136
|
+
<label class="filter-control">
|
|
137
|
+
<span>Filter</span>
|
|
138
|
+
<select id="messageFilter">
|
|
139
|
+
<option value="all">All</option>
|
|
140
|
+
<option value="main_agent">Main Agent</option>
|
|
141
|
+
<option value="subagent">Subagent</option>
|
|
142
|
+
<option value="system">System</option>
|
|
143
|
+
</select>
|
|
144
|
+
</label>
|
|
145
|
+
</div>
|
|
146
|
+
<div id="operatorMessages" class="message-list"></div>
|
|
147
|
+
</div>
|
|
148
|
+
<div id="runControlBar" class="run-control-bar">
|
|
149
|
+
<button id="manualControlButton" type="button" class="button secondary">Enter Manual Control</button>
|
|
150
|
+
<button id="resumeRunButton" type="button" class="button secondary">Resume Run</button>
|
|
151
|
+
<button id="abortRunButtonSecondary" type="button" class="button danger ghost">Abort Active Run</button>
|
|
152
|
+
</div>
|
|
153
|
+
<p class="control-note">Manual control relaunches the session in a visible browser window when available. You can drive it with the daemon endpoints like <code>/observe</code>, <code>/click</code>, <code>/type</code>, and then resume the run.</p>
|
|
154
|
+
</section>
|
|
155
|
+
|
|
156
|
+
<div class="detail-columns diagnostics-columns">
|
|
157
|
+
<section class="detail-card log-card">
|
|
158
|
+
<div class="section-header">
|
|
159
|
+
<h3>Console</h3>
|
|
160
|
+
</div>
|
|
161
|
+
<div id="detailConsole" class="log-list"></div>
|
|
162
|
+
</section>
|
|
163
|
+
|
|
164
|
+
<section class="detail-card log-card">
|
|
165
|
+
<div class="section-header">
|
|
166
|
+
<h3>Network</h3>
|
|
167
|
+
</div>
|
|
168
|
+
<div id="detailNetwork" class="log-list"></div>
|
|
169
|
+
</section>
|
|
170
|
+
|
|
171
|
+
<section class="detail-card log-card">
|
|
172
|
+
<div class="section-header">
|
|
173
|
+
<h3>Page Errors</h3>
|
|
174
|
+
</div>
|
|
175
|
+
<div id="detailErrors" class="log-list"></div>
|
|
176
|
+
</section>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<section class="detail-card events-card">
|
|
180
|
+
<div class="section-header">
|
|
181
|
+
<h3>Event Timeline</h3>
|
|
182
|
+
<label class="filter-control">
|
|
183
|
+
<span>Filter</span>
|
|
184
|
+
<select id="eventFilter">
|
|
185
|
+
<option value="all">All</option>
|
|
186
|
+
<option value="subagent">Subagent</option>
|
|
187
|
+
<option value="browser">Browser Actions</option>
|
|
188
|
+
<option value="control">Run Control</option>
|
|
189
|
+
<option value="errors">Errors</option>
|
|
190
|
+
</select>
|
|
191
|
+
</label>
|
|
192
|
+
</div>
|
|
193
|
+
<div id="detailEvents" class="event-list"></div>
|
|
194
|
+
</section>
|
|
195
|
+
</div>
|
|
196
|
+
</section>
|
|
197
|
+
</main>
|
|
198
|
+
|
|
199
|
+
<section id="new-run" class="panel composer-panel">
|
|
200
|
+
<div class="panel-header">
|
|
201
|
+
<div>
|
|
202
|
+
<p class="panel-kicker">Launch</p>
|
|
203
|
+
<h2>Queue a Browser Run</h2>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
<form id="runForm" class="run-form">
|
|
207
|
+
<label>
|
|
208
|
+
<span>Task Instruction</span>
|
|
209
|
+
<textarea id="taskInstruction" rows="4" placeholder="Open example.com and summarize the hero section."></textarea>
|
|
210
|
+
</label>
|
|
211
|
+
<div class="template-toolbar">
|
|
212
|
+
<label>
|
|
213
|
+
<span>Run Template</span>
|
|
214
|
+
<select id="templateSelect">
|
|
215
|
+
<option value="">No Template</option>
|
|
216
|
+
</select>
|
|
217
|
+
</label>
|
|
218
|
+
<div class="template-actions">
|
|
219
|
+
<button id="templateRefreshButton" type="button" class="button secondary">Refresh Templates</button>
|
|
220
|
+
<button id="templateSaveButton" type="button" class="button secondary">Save As Template</button>
|
|
221
|
+
<button id="templateDeleteButton" type="button" class="button danger ghost">Delete Template</button>
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
<div class="run-config-grid">
|
|
225
|
+
<label>
|
|
226
|
+
<span>Browser Source</span>
|
|
227
|
+
<select id="browserSource">
|
|
228
|
+
<option value="auto" selected>Auto (Prefer Attached Chrome)</option>
|
|
229
|
+
<option value="managed">Managed Runtime</option>
|
|
230
|
+
<option value="attached">Attached Current Chrome</option>
|
|
231
|
+
</select>
|
|
232
|
+
</label>
|
|
233
|
+
<label>
|
|
234
|
+
<span>CDP Endpoint</span>
|
|
235
|
+
<input id="cdpEndpoint" type="text" placeholder="http://127.0.0.1:9222">
|
|
236
|
+
</label>
|
|
237
|
+
</div>
|
|
238
|
+
<div class="run-config-grid">
|
|
239
|
+
<label>
|
|
240
|
+
<span>Template Name</span>
|
|
241
|
+
<input id="templateName" type="text" placeholder="Google OAuth Smoke">
|
|
242
|
+
</label>
|
|
243
|
+
<label>
|
|
244
|
+
<span>Fixed Start URL</span>
|
|
245
|
+
<input id="templateStartUrl" type="text" placeholder="https://example.com/login">
|
|
246
|
+
</label>
|
|
247
|
+
</div>
|
|
248
|
+
<div class="run-config-grid template-rule-grid">
|
|
249
|
+
<label>
|
|
250
|
+
<span>Pre-login Checks (kind|expected|name)</span>
|
|
251
|
+
<textarea id="templateLoginChecks" rows="3" placeholder="url_includes|accounts.google.com|Google chooser"></textarea>
|
|
252
|
+
</label>
|
|
253
|
+
<label>
|
|
254
|
+
<span>Assertions (kind|expected|name)</span>
|
|
255
|
+
<textarea id="templateAssertions" rows="3" placeholder="title_includes|Dashboard|Landed on dashboard"></textarea>
|
|
256
|
+
</label>
|
|
257
|
+
</div>
|
|
258
|
+
<p class="control-note">Auto mode first tries to attach to your current Chrome (best for OAuth/login reuse) and falls back to a managed runtime if attach is unavailable.</p>
|
|
259
|
+
<div class="run-config-grid">
|
|
260
|
+
<label class="max-steps">
|
|
261
|
+
<span>Max Steps</span>
|
|
262
|
+
<input id="maxSteps" type="number" min="1" max="30" value="12">
|
|
263
|
+
</label>
|
|
264
|
+
<label class="max-steps">
|
|
265
|
+
<span>Handoff Timeout (sec)</span>
|
|
266
|
+
<input id="handoffTimeoutSeconds" type="number" min="5" max="3600" value="300">
|
|
267
|
+
</label>
|
|
268
|
+
</div>
|
|
269
|
+
<button type="submit" class="button primary">Queue Run</button>
|
|
270
|
+
</form>
|
|
271
|
+
<p id="formMessage" class="form-message"></p>
|
|
272
|
+
</section>
|
|
273
|
+
</div>
|
|
274
|
+
|
|
275
|
+
<script type="module" src="/dashboard-assets/app.js"></script>
|
|
276
|
+
</body>
|
|
277
|
+
</html>
|