@ticktockbent/charlotte 0.1.3 → 0.3.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/CHANGELOG.md +35 -0
- package/README.md +154 -22
- package/dist/browser/page-manager.d.ts +8 -1
- package/dist/browser/page-manager.d.ts.map +1 -1
- package/dist/browser/page-manager.js +57 -0
- package/dist/browser/page-manager.js.map +1 -1
- package/dist/index.js +8 -3
- package/dist/index.js.map +1 -1
- package/dist/renderer/interactive-extractor.d.ts +2 -1
- package/dist/renderer/interactive-extractor.d.ts.map +1 -1
- package/dist/renderer/interactive-extractor.js +30 -24
- package/dist/renderer/interactive-extractor.js.map +1 -1
- package/dist/renderer/renderer-pipeline.d.ts +1 -0
- package/dist/renderer/renderer-pipeline.d.ts.map +1 -1
- package/dist/renderer/renderer-pipeline.js +37 -5
- package/dist/renderer/renderer-pipeline.js.map +1 -1
- package/dist/server.d.ts +2 -0
- package/dist/server.d.ts.map +1 -1
- package/dist/server.js +4 -1
- package/dist/server.js.map +1 -1
- package/dist/state/artifact-store.d.ts +52 -0
- package/dist/state/artifact-store.d.ts.map +1 -0
- package/dist/state/artifact-store.js +160 -0
- package/dist/state/artifact-store.js.map +1 -0
- package/dist/tools/dialog.d.ts +4 -0
- package/dist/tools/dialog.d.ts.map +1 -0
- package/dist/tools/dialog.js +68 -0
- package/dist/tools/dialog.js.map +1 -0
- package/dist/tools/interaction.d.ts.map +1 -1
- package/dist/tools/interaction.js +32 -3
- package/dist/tools/interaction.js.map +1 -1
- package/dist/tools/navigation.d.ts.map +1 -1
- package/dist/tools/navigation.js +25 -11
- package/dist/tools/navigation.js.map +1 -1
- package/dist/tools/observation.d.ts.map +1 -1
- package/dist/tools/observation.js +147 -10
- package/dist/tools/observation.js.map +1 -1
- package/dist/tools/session.d.ts.map +1 -1
- package/dist/tools/session.js +19 -2
- package/dist/tools/session.js.map +1 -1
- package/dist/tools/tool-helpers.d.ts +12 -0
- package/dist/tools/tool-helpers.d.ts.map +1 -1
- package/dist/tools/tool-helpers.js +79 -2
- package/dist/tools/tool-helpers.js.map +1 -1
- package/dist/types/config.d.ts +4 -0
- package/dist/types/config.d.ts.map +1 -1
- package/dist/types/config.js +1 -0
- package/dist/types/config.js.map +1 -1
- package/dist/types/page-representation.d.ts +16 -2
- package/dist/types/page-representation.d.ts.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,41 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to Charlotte will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## [0.3.0] - 2026-02-24
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- **`charlotte:dialog`** — Accept or dismiss JavaScript dialogs (`alert`, `confirm`, `prompt`, `beforeunload`). Dialogs are captured by PageManager and surfaced as `pending_dialog` in every tool response while blocking. Response includes `dialog_handled` metadata confirming what was resolved. Closes GAP-03 from the Playwright MCP gap analysis.
|
|
10
|
+
- **Dialog-aware action racing** — Interaction tools (`click`, `submit`) now race the action against dialog detection. Clicks that trigger dialogs return immediately with `pending_dialog` instead of hanging for 30s.
|
|
11
|
+
- **`dialog_auto_dismiss` configuration** — New parameter on `charlotte:configure` to auto-handle dialogs without explicit tool calls. Options: `"none"` (default, queue for manual handling), `"accept_alerts"`, `"accept_all"`, `"dismiss_all"`.
|
|
12
|
+
- **Dialog-blocking stub responses** — When a dialog is open, `renderActivePage` returns a minimal stub representation (since `page.title()` hangs while dialogs are blocking). The stub includes `pending_dialog` so agents always know a dialog needs handling.
|
|
13
|
+
|
|
14
|
+
### Changed
|
|
15
|
+
|
|
16
|
+
- `PageManager` now accepts `CharlotteConfig` in its constructor for dialog auto-dismiss configuration.
|
|
17
|
+
- Config initialization moved before `PageManager` creation in `src/index.ts`.
|
|
18
|
+
|
|
19
|
+
## [0.2.0] - 2026-02-22
|
|
20
|
+
|
|
21
|
+
### Changed
|
|
22
|
+
|
|
23
|
+
- **Compact response format** — Responses are now dramatically smaller, reducing context window consumption by 50-99% depending on the page. Charlotte's `navigate` returns 336 characters for Hacker News vs Playwright MCP's 61,230.
|
|
24
|
+
- **Interactive summary for minimal detail** — Navigation tools now return interactive element counts grouped by landmark region instead of listing every element individually. Wikipedia's minimal response dropped from 711K to 7.7K characters.
|
|
25
|
+
- **Default state stripping** — Interactive elements no longer include redundant default state fields (`enabled: true`, `visible: true`, `focused: false`). Only non-default values are serialized.
|
|
26
|
+
- **Compact JSON serialization** — All tool responses use compact JSON with empty fields stripped.
|
|
27
|
+
- **Navigation defaults to minimal** — `navigate`, `back`, `forward`, and `reload` now return minimal detail by default. Pass `detail: "summary"` or `detail: "full"` for more context.
|
|
28
|
+
- **Updated tool descriptions** — `navigate` and `observe` descriptions now guide agents through the minimal-then-find workflow.
|
|
29
|
+
|
|
30
|
+
### Removed
|
|
31
|
+
|
|
32
|
+
- Removed unused `alerts` field from page representation.
|
|
33
|
+
|
|
34
|
+
## [0.1.3] - 2026-02-22
|
|
35
|
+
|
|
36
|
+
### Added
|
|
37
|
+
|
|
38
|
+
- Benchmark suite for comparing Charlotte against Playwright MCP across real websites.
|
|
39
|
+
|
|
5
40
|
## [0.1.2] - 2026-02-22
|
|
6
41
|
|
|
7
42
|
### Changed
|
package/README.md
CHANGED
|
@@ -4,13 +4,47 @@
|
|
|
4
4
|
|
|
5
5
|
Charlotte is an MCP server that renders web pages into structured, agent-readable representations using headless Chromium. It exposes the browser's semantic understanding — accessibility tree, layout geometry, interactive elements — to AI agents via [Model Context Protocol](https://modelcontextprotocol.io/) tools, enabling navigation, observation, and interaction without vision models or brittle selectors.
|
|
6
6
|
|
|
7
|
+
## Why Charlotte?
|
|
8
|
+
|
|
9
|
+
Most browser MCP servers dump the entire accessibility tree on every call — a flat text blob that can exceed a million characters on content-heavy pages. Agents pay for all of it whether they need it or not.
|
|
10
|
+
|
|
11
|
+
Charlotte takes a different approach. It decomposes each page into a typed, structured representation — landmarks, headings, interactive elements, forms, content summaries — and lets agents control how much they receive with three detail levels. When an agent navigates to a new page, it gets a compact orientation (336 characters for Hacker News) instead of the full element dump (61,000+ characters). When it needs specifics, it asks for them.
|
|
12
|
+
|
|
13
|
+
### Benchmarks
|
|
14
|
+
|
|
15
|
+
Charlotte v0.3.0 vs Playwright MCP, measured by characters returned per tool call on real websites:
|
|
16
|
+
|
|
17
|
+
**Navigation** (first contact with a page):
|
|
18
|
+
|
|
19
|
+
| Site | Charlotte `navigate` | Playwright `browser_navigate` |
|
|
20
|
+
|:---|---:|---:|
|
|
21
|
+
| example.com | 612 | 817 |
|
|
22
|
+
| Wikipedia (AI article) | 7,667 | 1,040,636 |
|
|
23
|
+
| Hacker News | 336 | 61,230 |
|
|
24
|
+
| GitHub repo | 3,185 | 80,297 |
|
|
25
|
+
|
|
26
|
+
Charlotte's `navigate` returns minimal detail by default — landmarks, headings, and interactive element counts grouped by page region. Enough to orient, not enough to overwhelm. On Wikipedia, that's **135x smaller** than Playwright's response.
|
|
27
|
+
|
|
28
|
+
**Observation** (when the agent needs full detail):
|
|
29
|
+
|
|
30
|
+
| Site | Charlotte `observe` | Playwright `browser_snapshot` |
|
|
31
|
+
|:---|---:|---:|
|
|
32
|
+
| example.com | 612 | 498 |
|
|
33
|
+
| Wikipedia (AI article) | 521,127 | 1,040,878 |
|
|
34
|
+
| Hacker News | 30,781 | 61,143 |
|
|
35
|
+
| GitHub repo | 37,628 | 80,190 |
|
|
36
|
+
|
|
37
|
+
Even at full summary detail, Charlotte's structured format is **~2x smaller** than Playwright's raw accessibility dump — while providing typed metadata, form structures, and content summaries that a flat tree doesn't.
|
|
38
|
+
|
|
39
|
+
**The workflow difference:** Playwright agents receive 61K+ characters every time they look at Hacker News, whether they're reading headlines or looking for a login button. Charlotte agents get 336 characters on arrival, call `find({ type: "link", text: "login" })` to get exactly what they need, and never pay for the rest.
|
|
40
|
+
|
|
7
41
|
## How It Works
|
|
8
42
|
|
|
9
43
|
Charlotte maintains a persistent headless Chromium session and acts as a translation layer between the visual web and the agent's text-native reasoning. Every page is decomposed into a structured representation:
|
|
10
44
|
|
|
11
45
|
```
|
|
12
46
|
┌─────────────┐ MCP Protocol ┌──────────────────┐
|
|
13
|
-
│ AI Agent
|
|
47
|
+
│ AI Agent │<────────────────────>│ Charlotte │
|
|
14
48
|
└─────────────┘ │ │
|
|
15
49
|
│ ┌────────────┐ │
|
|
16
50
|
│ │ Renderer │ │
|
|
@@ -32,7 +66,7 @@ Agents receive landmarks, headings, interactive elements with typed metadata, bo
|
|
|
32
66
|
|
|
33
67
|
**Observation** — `observe` (3 detail levels), `find` (spatial + semantic search), `screenshot`, `diff` (structural comparison against snapshots)
|
|
34
68
|
|
|
35
|
-
**Interaction** — `click`, `type`, `select`, `toggle`, `submit`, `scroll`, `hover`, `key`, `wait_for` (async condition polling)
|
|
69
|
+
**Interaction** — `click`, `type`, `select`, `toggle`, `submit`, `scroll`, `hover`, `key`, `wait_for` (async condition polling), `dialog` (accept/dismiss JS dialogs)
|
|
36
70
|
|
|
37
71
|
**Session Management** — `tabs`, `tab_open`, `tab_switch`, `tab_close`, `viewport` (device presets), `network` (throttling, URL blocking), `set_cookies`, `get_cookies`, `clear_cookies`, `set_headers`, `configure`
|
|
38
72
|
|
|
@@ -49,12 +83,25 @@ Agents receive landmarks, headings, interactive elements with typed metadata, bo
|
|
|
49
83
|
|
|
50
84
|
### Installation
|
|
51
85
|
|
|
52
|
-
Charlotte is published on npm as [`@ticktockbent/charlotte`](https://www.npmjs.com/package/@ticktockbent/charlotte):
|
|
86
|
+
Charlotte is listed on the [MCP Registry](https://registry.modelcontextprotocol.io) as `io.github.TickTockBent/charlotte` and published on npm as [`@ticktockbent/charlotte`](https://www.npmjs.com/package/@ticktockbent/charlotte):
|
|
53
87
|
|
|
54
88
|
```bash
|
|
55
89
|
npm install -g @ticktockbent/charlotte
|
|
56
90
|
```
|
|
57
91
|
|
|
92
|
+
Docker images are available on [Docker Hub](https://hub.docker.com/r/ticktockbent/charlotte) and [GitHub Container Registry](https://github.com/ticktockbent/charlotte/pkgs/container/charlotte):
|
|
93
|
+
|
|
94
|
+
```bash
|
|
95
|
+
# Alpine (default, smaller)
|
|
96
|
+
docker pull ticktockbent/charlotte:alpine
|
|
97
|
+
|
|
98
|
+
# Debian (if you need glibc compatibility)
|
|
99
|
+
docker pull ticktockbent/charlotte:debian
|
|
100
|
+
|
|
101
|
+
# Or from GHCR
|
|
102
|
+
docker pull ghcr.io/ticktockbent/charlotte:latest
|
|
103
|
+
```
|
|
104
|
+
|
|
58
105
|
Or install from source:
|
|
59
106
|
|
|
60
107
|
```bash
|
|
@@ -116,15 +163,19 @@ Once connected, an agent can use Charlotte's tools:
|
|
|
116
163
|
|
|
117
164
|
```
|
|
118
165
|
navigate({ url: "https://example.com" })
|
|
119
|
-
|
|
120
|
-
|
|
166
|
+
// → 612 chars: landmarks, headings, interactive element counts
|
|
167
|
+
|
|
168
|
+
find({ type: "link", text: "More information" })
|
|
169
|
+
// → just the matching element with its ID
|
|
170
|
+
|
|
121
171
|
click({ element_id: "lnk-a3f1" })
|
|
122
172
|
```
|
|
123
173
|
|
|
124
174
|
### Fill out a form
|
|
125
175
|
|
|
126
176
|
```
|
|
127
|
-
|
|
177
|
+
navigate({ url: "https://httpbin.org/forms/post" })
|
|
178
|
+
find({ type: "text_input" })
|
|
128
179
|
type({ element_id: "inp-c7e2", text: "hello@example.com" })
|
|
129
180
|
select({ element_id: "sel-e8a3", value: "option-2" })
|
|
130
181
|
submit({ form_id: "frm-b1d4" })
|
|
@@ -141,22 +192,44 @@ dev_inject({ css: "body { font-size: 18px; }" })
|
|
|
141
192
|
|
|
142
193
|
## Page Representation
|
|
143
194
|
|
|
144
|
-
Charlotte returns structured representations
|
|
195
|
+
Charlotte returns structured representations with three detail levels that let agents control how much context they consume:
|
|
196
|
+
|
|
197
|
+
### Minimal (default for `navigate`)
|
|
198
|
+
|
|
199
|
+
Landmarks, headings, and interactive element counts grouped by page region. Designed for orientation — "what's on this page?" — without listing every element.
|
|
200
|
+
|
|
201
|
+
```json
|
|
202
|
+
{
|
|
203
|
+
"url": "https://news.ycombinator.com",
|
|
204
|
+
"title": "Hacker News",
|
|
205
|
+
"viewport": { "width": 1280, "height": 720 },
|
|
206
|
+
"structure": {
|
|
207
|
+
"headings": [{ "level": 1, "text": "Hacker News", "id": "h-a1b2" }]
|
|
208
|
+
},
|
|
209
|
+
"interactive_summary": {
|
|
210
|
+
"total": 93,
|
|
211
|
+
"by_landmark": {
|
|
212
|
+
"(page root)": { "link": 91, "text_input": 1, "button": 1 }
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
### Summary (default for `observe`)
|
|
219
|
+
|
|
220
|
+
Full interactive element list with typed metadata, form structures, and content summaries.
|
|
145
221
|
|
|
146
222
|
```json
|
|
147
223
|
{
|
|
148
224
|
"url": "https://example.com/dashboard",
|
|
149
225
|
"title": "Dashboard",
|
|
150
226
|
"viewport": { "width": 1280, "height": 720 },
|
|
151
|
-
"snapshot_id": 1,
|
|
152
227
|
"structure": {
|
|
153
228
|
"landmarks": [
|
|
154
229
|
{ "role": "banner", "label": "Site header", "bounds": { "x": 0, "y": 0, "w": 1280, "h": 64 } },
|
|
155
230
|
{ "role": "main", "label": "Content", "bounds": { "x": 240, "y": 64, "w": 1040, "h": 656 } }
|
|
156
231
|
],
|
|
157
|
-
"headings": [
|
|
158
|
-
{ "level": 1, "text": "Dashboard", "id": "h-1" }
|
|
159
|
-
],
|
|
232
|
+
"headings": [{ "level": 1, "text": "Dashboard", "id": "h-1a2b" }],
|
|
160
233
|
"content_summary": "main: 2 headings, 5 links, 1 form"
|
|
161
234
|
},
|
|
162
235
|
"interactive": [
|
|
@@ -165,19 +238,26 @@ Charlotte returns structured representations optimized for token efficiency:
|
|
|
165
238
|
"type": "button",
|
|
166
239
|
"label": "Create Project",
|
|
167
240
|
"bounds": { "x": 960, "y": 80, "w": 160, "h": 40 },
|
|
168
|
-
"state": {
|
|
241
|
+
"state": {}
|
|
169
242
|
}
|
|
170
243
|
],
|
|
171
|
-
"forms": []
|
|
172
|
-
"alerts": [],
|
|
173
|
-
"errors": { "console": [], "network": [] }
|
|
244
|
+
"forms": []
|
|
174
245
|
}
|
|
175
246
|
```
|
|
176
247
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
248
|
+
### Full
|
|
249
|
+
|
|
250
|
+
Everything in summary, plus all visible text content on the page.
|
|
251
|
+
|
|
252
|
+
## Detail Levels
|
|
253
|
+
|
|
254
|
+
| Level | Tokens | Use case |
|
|
255
|
+
|:---|:---|:---|
|
|
256
|
+
| `minimal` | ~50-200 | Orientation after navigation. What regions exist? How many interactive elements? |
|
|
257
|
+
| `summary` | ~500-5000 | Working with the page. Full element list, form structures, content summaries. |
|
|
258
|
+
| `full` | variable | Reading page content. All visible text included. |
|
|
259
|
+
|
|
260
|
+
Navigation tools default to `minimal`. The `observe` tool defaults to `summary`. Both accept an optional `detail` parameter to override.
|
|
181
261
|
|
|
182
262
|
## Element IDs
|
|
183
263
|
|
|
@@ -189,7 +269,7 @@ lnk-d4b9 (link) sel-e8a3 (select)
|
|
|
189
269
|
chk-f1a2 (checkbox) frm-b1d4 (form)
|
|
190
270
|
```
|
|
191
271
|
|
|
192
|
-
IDs survive unrelated DOM changes and element reordering within the same container.
|
|
272
|
+
IDs survive unrelated DOM changes and element reordering within the same container. When an agent navigates at minimal detail (no individual element IDs), it uses `find` to locate elements by text, type, or spatial proximity — the returned elements include IDs ready for interaction.
|
|
193
273
|
|
|
194
274
|
## Development
|
|
195
275
|
|
|
@@ -236,11 +316,11 @@ The **Renderer Pipeline** is the core — it calls extractors in order and assem
|
|
|
236
316
|
3. Landmark, heading, interactive element, and content extraction
|
|
237
317
|
4. Element ID generation (hash-based, stable across re-renders)
|
|
238
318
|
|
|
239
|
-
All tools go through `renderActivePage()` which handles snapshots, reload events, and response formatting.
|
|
319
|
+
All tools go through `renderActivePage()` which handles snapshots, reload events, dialog detection, and response formatting.
|
|
240
320
|
|
|
241
321
|
## Sandbox
|
|
242
322
|
|
|
243
|
-
Charlotte includes a test website in `tests/sandbox/` that exercises all
|
|
323
|
+
Charlotte includes a test website in `tests/sandbox/` that exercises all 33 tools without touching the public internet. Serve it locally with:
|
|
244
324
|
|
|
245
325
|
```
|
|
246
326
|
dev_serve({ path: "tests/sandbox" })
|
|
@@ -248,12 +328,64 @@ dev_serve({ path: "tests/sandbox" })
|
|
|
248
328
|
|
|
249
329
|
Four pages cover navigation, forms, interactive elements, delayed content, scroll containers, and more. See [docs/sandbox.md](docs/sandbox.md) for the full page reference and a tool-by-tool exercise checklist.
|
|
250
330
|
|
|
331
|
+
## Known Issues
|
|
332
|
+
|
|
333
|
+
**Tool naming convention** — Charlotte uses `:` as a namespace separator in tool names (e.g., `charlotte:navigate`, `charlotte:observe`). MCP SDK v1.26.0+ logs validation warnings for this character, as the emerging [SEP standard](https://github.com/modelcontextprotocol/modelcontextprotocol/issues/986) restricts tool names to `[A-Za-z0-9_.-]`. This does not affect functionality — all tools work correctly — but produces stderr warnings on server startup. Will be addressed in a future release to comply with the SEP standard.
|
|
334
|
+
|
|
335
|
+
**Iframe content not captured** — Charlotte reads the main frame's accessibility tree only. Content inside iframes (same-origin or cross-origin) is not included in the page representation. See the Roadmap for planned iframe support.
|
|
336
|
+
|
|
337
|
+
**Shadow DOM** — Open shadow DOM works transparently. Chromium's accessibility tree pierces open shadow boundaries, so web components (e.g., GitHub's `<relative-time>`, `<tool-tip>`) render their content into Charlotte's representation without special handling. Closed shadow roots are opaque to the accessibility tree and will not be captured.
|
|
338
|
+
|
|
339
|
+
**No file upload support** — Charlotte identifies `file_input` elements in the page representation but provides no tool to set file paths on them. Workflows that require file uploads cannot be completed.
|
|
340
|
+
|
|
341
|
+
**No drag-and-drop support** — There is no tool for drag-and-drop interactions. Kanban boards, sortable lists, slider handles, and file drop zones cannot be automated.
|
|
342
|
+
|
|
343
|
+
**Console and network monitoring are error-only** — Charlotte captures console errors and failed network requests in the page representation, but does not expose a dedicated tool for retrieving all console messages or all network requests. Agents debugging JavaScript or API issues have limited visibility.
|
|
344
|
+
|
|
251
345
|
## Roadmap
|
|
252
346
|
|
|
347
|
+
### Interaction Gaps
|
|
348
|
+
|
|
349
|
+
**File Upload** — Add a `charlotte:upload` tool to set file paths on `file_input` elements via Puppeteer's `elementHandle.uploadFile()`. Charlotte already identifies file inputs but cannot act on them.
|
|
350
|
+
|
|
351
|
+
**Drag and Drop** — Add a `charlotte:drag` tool for element-to-element drag-and-drop using Puppeteer mouse primitives. Covers kanban boards, sortable lists, sliders, and drop zones.
|
|
352
|
+
|
|
353
|
+
**Batch Form Fill** — Add a `charlotte:fill_form` tool that accepts an array of `{element_id, value}` pairs and fills an entire form in a single tool call, reducing N sequential `type`/`select`/`toggle` calls to one.
|
|
354
|
+
|
|
355
|
+
**Slow Typing** — Add a `slowly` or `character_delay` parameter to `charlotte:type` for character-by-character input. Required for sites with key-by-key event handlers (autocomplete, search-as-you-type, input validation).
|
|
356
|
+
|
|
357
|
+
**Click Modifiers** — Add a `modifiers` parameter (`ctrl`, `shift`, `alt`, `meta`) to `charlotte:click` for Ctrl+Click (open in new tab), Shift+Click (range select), and similar patterns.
|
|
358
|
+
|
|
359
|
+
### Monitoring
|
|
360
|
+
|
|
361
|
+
**Console Message Retrieval** — Add a `charlotte:console` tool to retrieve all console messages (not just errors) with level filtering. Charlotte already listens to console events internally but only surfaces errors in the page representation.
|
|
362
|
+
|
|
363
|
+
**Network Request Monitoring** — Add a `charlotte:requests` tool to retrieve all network requests (not just failures) with filtering options. Enables agents to debug API calls and resource loading.
|
|
364
|
+
|
|
365
|
+
### Session & Configuration
|
|
366
|
+
|
|
367
|
+
**Connect to Existing Browser** — Add a `--cdp-endpoint` CLI argument so Charlotte can attach to an already-running browser via `puppeteer.connect()` instead of always launching a new instance. Enables working with logged-in sessions and browser extensions.
|
|
368
|
+
|
|
369
|
+
**Persistent Init Scripts** — Add a `--init-script` CLI argument to inject JavaScript on every page load via `page.evaluateOnNewDocument()`. Charlotte's `dev_inject` currently applies CSS/JS once and does not persist across navigations.
|
|
370
|
+
|
|
371
|
+
**Configuration File** — Support a `--config` CLI argument to load settings from a JSON file, simplifying repeatable setups and CI/CD integration.
|
|
372
|
+
|
|
373
|
+
**File Output** — Add an optional `filename` parameter to `screenshot`, `observe`, and future monitoring tools so large responses can be written to disk instead of returned inline, reducing token consumption.
|
|
374
|
+
|
|
375
|
+
**Full Device Emulation** — Extend `charlotte:viewport` to accept named devices (e.g., "iPhone 15") and configure user agent, touch support, and device pixel ratio via CDP, not just viewport dimensions.
|
|
376
|
+
|
|
377
|
+
### Feature Roadmap
|
|
378
|
+
|
|
253
379
|
**Screenshot Artifacts** — Save screenshots as persistent file artifacts rather than only returning inline data, enabling agents to reference and manage captured images across sessions.
|
|
254
380
|
|
|
255
381
|
**Video Recording** — Record interactions as video, capturing the full sequence of agent-driven navigation and manipulation for debugging, documentation, and review.
|
|
256
382
|
|
|
383
|
+
**ARM64 Docker Images** — Add `linux/arm64` platform support to the Docker publish workflow for native performance on Apple Silicon Macs and ARM servers.
|
|
384
|
+
|
|
385
|
+
**Iframe Content Extraction** — Traverse child frames via CDP to include iframe content in the page representation. Currently, Charlotte only reads the main frame's accessibility tree; same-origin and cross-origin iframe content is invisible.
|
|
386
|
+
|
|
387
|
+
See [docs/playwright-mcp-gap-analysis.md](docs/playwright-mcp-gap-analysis.md) for the full gap analysis against Playwright MCP, including lower-priority items (vision tools, testing/verification, tracing, transport, security) and areas where Charlotte has advantages.
|
|
388
|
+
|
|
257
389
|
## Full Specification
|
|
258
390
|
|
|
259
391
|
See [docs/CHARLOTTE_SPEC.md](docs/CHARLOTTE_SPEC.md) for the complete specification including all tool parameters, the page representation format, element identity strategy, and architecture details.
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import type { Page } from "puppeteer";
|
|
1
|
+
import type { Page, Dialog } from "puppeteer";
|
|
2
2
|
import type { BrowserManager } from "./browser-manager.js";
|
|
3
|
+
import type { PendingDialog } from "../types/page-representation.js";
|
|
4
|
+
import type { CharlotteConfig } from "../types/config.js";
|
|
3
5
|
export interface TabInfo {
|
|
4
6
|
id: string;
|
|
5
7
|
url: string;
|
|
@@ -9,6 +11,8 @@ export interface TabInfo {
|
|
|
9
11
|
export declare class PageManager {
|
|
10
12
|
private pages;
|
|
11
13
|
private activeTabId;
|
|
14
|
+
private config;
|
|
15
|
+
constructor(config?: CharlotteConfig);
|
|
12
16
|
openTab(browserManager: BrowserManager, url?: string): Promise<string>;
|
|
13
17
|
switchTab(tabId: string): Promise<Page>;
|
|
14
18
|
closeTab(tabId: string): Promise<void>;
|
|
@@ -25,6 +29,9 @@ export declare class PageManager {
|
|
|
25
29
|
statusText: string;
|
|
26
30
|
}>;
|
|
27
31
|
clearErrors(): void;
|
|
32
|
+
getPendingDialogInfo(): PendingDialog | null;
|
|
33
|
+
getPendingDialog(): Dialog | null;
|
|
34
|
+
clearPendingDialog(): void;
|
|
28
35
|
hasPages(): boolean;
|
|
29
36
|
}
|
|
30
37
|
//# sourceMappingURL=page-manager.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-manager.d.ts","sourceRoot":"","sources":["../../src/browser/page-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"page-manager.d.ts","sourceRoot":"","sources":["../../src/browser/page-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAErE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAI1D,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;CACjB;AAiBD,qBAAa,WAAW;IACtB,OAAO,CAAC,KAAK,CAAkC;IAC/C,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,MAAM,CAAkB;gBAEpB,MAAM,CAAC,EAAE,eAAe;IAK9B,OAAO,CAAC,cAAc,EAAE,cAAc,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IA+EtE,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAcvC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAqBtC,QAAQ,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;IAapC,aAAa,IAAI,IAAI;IAmBrB,cAAc,IAAI,MAAM;IAUxB,gBAAgB,IAAI,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAM1D,gBAAgB,IAAI,KAAK,CAAC;QACxB,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IAMF,WAAW,IAAI,IAAI;IASnB,oBAAoB,IAAI,aAAa,GAAG,IAAI;IAM5C,gBAAgB,IAAI,MAAM,GAAG,IAAI;IAMjC,kBAAkB,IAAI,IAAI;IAS1B,QAAQ,IAAI,OAAO;CAGpB"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { createDefaultConfig } from "../types/config.js";
|
|
1
2
|
import { CharlotteError, CharlotteErrorCode } from "../types/errors.js";
|
|
2
3
|
import { logger } from "../utils/logger.js";
|
|
3
4
|
let nextTabIdCounter = 1;
|
|
@@ -7,6 +8,11 @@ function generateTabId() {
|
|
|
7
8
|
export class PageManager {
|
|
8
9
|
pages = new Map();
|
|
9
10
|
activeTabId = null;
|
|
11
|
+
config;
|
|
12
|
+
constructor(config) {
|
|
13
|
+
// Accept optional config; callers without config get a permissive default
|
|
14
|
+
this.config = config ?? createDefaultConfig();
|
|
15
|
+
}
|
|
10
16
|
async openTab(browserManager, url) {
|
|
11
17
|
const page = await browserManager.newPage();
|
|
12
18
|
const tabId = generateTabId();
|
|
@@ -15,6 +21,8 @@ export class PageManager {
|
|
|
15
21
|
page,
|
|
16
22
|
consoleErrors: [],
|
|
17
23
|
networkErrors: [],
|
|
24
|
+
pendingDialog: null,
|
|
25
|
+
pendingDialogInfo: null,
|
|
18
26
|
};
|
|
19
27
|
// Collect console errors
|
|
20
28
|
page.on("console", (msg) => {
|
|
@@ -36,6 +44,34 @@ export class PageManager {
|
|
|
36
44
|
});
|
|
37
45
|
}
|
|
38
46
|
});
|
|
47
|
+
// Handle JavaScript dialogs (alert, confirm, prompt, beforeunload)
|
|
48
|
+
page.on("dialog", async (dialog) => {
|
|
49
|
+
const dialogType = dialog.type();
|
|
50
|
+
const autoDismiss = this.config.dialogAutoDismiss;
|
|
51
|
+
logger.info("Dialog appeared", { tabId, type: dialogType, message: dialog.message() });
|
|
52
|
+
// Auto-dismiss logic
|
|
53
|
+
if (autoDismiss === "accept_all" || (autoDismiss === "accept_alerts" && dialogType === "alert")) {
|
|
54
|
+
await dialog.accept();
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
if (autoDismiss === "dismiss_all") {
|
|
58
|
+
await dialog.dismiss();
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
// Queue for manual handling
|
|
62
|
+
managedPage.pendingDialog = dialog;
|
|
63
|
+
managedPage.pendingDialogInfo = {
|
|
64
|
+
type: dialogType,
|
|
65
|
+
message: dialog.message(),
|
|
66
|
+
...(dialogType === "prompt" ? { default_value: dialog.defaultValue() } : {}),
|
|
67
|
+
timestamp: new Date().toISOString(),
|
|
68
|
+
};
|
|
69
|
+
});
|
|
70
|
+
// Clear stale dialog references on navigation
|
|
71
|
+
page.on("framenavigated", () => {
|
|
72
|
+
managedPage.pendingDialog = null;
|
|
73
|
+
managedPage.pendingDialogInfo = null;
|
|
74
|
+
});
|
|
39
75
|
this.pages.set(tabId, managedPage);
|
|
40
76
|
this.activeTabId = tabId;
|
|
41
77
|
if (url) {
|
|
@@ -116,6 +152,27 @@ export class PageManager {
|
|
|
116
152
|
managedPage.networkErrors = [];
|
|
117
153
|
}
|
|
118
154
|
}
|
|
155
|
+
getPendingDialogInfo() {
|
|
156
|
+
if (!this.activeTabId)
|
|
157
|
+
return null;
|
|
158
|
+
const managedPage = this.pages.get(this.activeTabId);
|
|
159
|
+
return managedPage?.pendingDialogInfo ?? null;
|
|
160
|
+
}
|
|
161
|
+
getPendingDialog() {
|
|
162
|
+
if (!this.activeTabId)
|
|
163
|
+
return null;
|
|
164
|
+
const managedPage = this.pages.get(this.activeTabId);
|
|
165
|
+
return managedPage?.pendingDialog ?? null;
|
|
166
|
+
}
|
|
167
|
+
clearPendingDialog() {
|
|
168
|
+
if (!this.activeTabId)
|
|
169
|
+
return;
|
|
170
|
+
const managedPage = this.pages.get(this.activeTabId);
|
|
171
|
+
if (managedPage) {
|
|
172
|
+
managedPage.pendingDialog = null;
|
|
173
|
+
managedPage.pendingDialogInfo = null;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
119
176
|
hasPages() {
|
|
120
177
|
return this.pages.size > 0;
|
|
121
178
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-manager.js","sourceRoot":"","sources":["../../src/browser/page-manager.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"page-manager.js","sourceRoot":"","sources":["../../src/browser/page-manager.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -6,26 +6,30 @@ import { CDPSessionManager } from "./browser/cdp-session.js";
|
|
|
6
6
|
import { RendererPipeline } from "./renderer/renderer-pipeline.js";
|
|
7
7
|
import { ElementIdGenerator } from "./renderer/element-id-generator.js";
|
|
8
8
|
import { SnapshotStore } from "./state/snapshot-store.js";
|
|
9
|
+
import { ArtifactStore } from "./state/artifact-store.js";
|
|
9
10
|
import { createDefaultConfig } from "./types/config.js";
|
|
10
11
|
import { createServer } from "./server.js";
|
|
11
12
|
import { DevModeState } from "./dev/dev-mode-state.js";
|
|
12
13
|
import { logger } from "./utils/logger.js";
|
|
13
14
|
async function main() {
|
|
14
15
|
logger.info("Charlotte starting");
|
|
16
|
+
// Initialize config first (needed by PageManager for dialog handling)
|
|
17
|
+
const config = createDefaultConfig();
|
|
15
18
|
// Initialize browser
|
|
16
19
|
const browserManager = new BrowserManager();
|
|
17
20
|
await browserManager.launch();
|
|
18
21
|
// Initialize page management
|
|
19
|
-
const pageManager = new PageManager();
|
|
22
|
+
const pageManager = new PageManager(config);
|
|
20
23
|
// Open a default tab
|
|
21
24
|
await pageManager.openTab(browserManager);
|
|
22
25
|
// Initialize renderer pipeline
|
|
23
26
|
const cdpSessionManager = new CDPSessionManager();
|
|
24
27
|
const elementIdGenerator = new ElementIdGenerator();
|
|
25
28
|
const rendererPipeline = new RendererPipeline(cdpSessionManager, elementIdGenerator);
|
|
26
|
-
// Initialize state management
|
|
27
|
-
const config = createDefaultConfig();
|
|
28
29
|
const snapshotStore = new SnapshotStore(config.snapshotDepth);
|
|
30
|
+
// Initialize screenshot artifact store
|
|
31
|
+
const artifactStore = new ArtifactStore(config.screenshotDir);
|
|
32
|
+
await artifactStore.initialize();
|
|
29
33
|
// Initialize dev mode state
|
|
30
34
|
const devModeState = new DevModeState();
|
|
31
35
|
// Create and configure MCP server
|
|
@@ -35,6 +39,7 @@ async function main() {
|
|
|
35
39
|
rendererPipeline,
|
|
36
40
|
elementIdGenerator,
|
|
37
41
|
snapshotStore,
|
|
42
|
+
artifactStore,
|
|
38
43
|
config,
|
|
39
44
|
devModeState,
|
|
40
45
|
});
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,KAAK,UAAU,IAAI;IACjB,MAAM,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAElC,qBAAqB;IACrB,MAAM,cAAc,GAAG,IAAI,cAAc,EAAE,CAAC;IAC5C,MAAM,cAAc,CAAC,MAAM,EAAE,CAAC;IAE9B,6BAA6B;IAC7B,MAAM,WAAW,GAAG,IAAI,WAAW,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { ParsedAXNode } from "./accessibility-extractor.js";
|
|
2
2
|
import type { ElementIdGenerator } from "./element-id-generator.js";
|
|
3
|
-
import type { Bounds, InteractiveElement, FormRepresentation } from "../types/page-representation.js";
|
|
3
|
+
import type { Bounds, InteractiveElement, InteractiveElementType, FormRepresentation } from "../types/page-representation.js";
|
|
4
|
+
export declare const ROLE_TO_ELEMENT_TYPE: Record<string, InteractiveElementType>;
|
|
4
5
|
interface ExtractionResult {
|
|
5
6
|
elements: InteractiveElement[];
|
|
6
7
|
forms: FormRepresentation[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interactive-extractor.d.ts","sourceRoot":"","sources":["../../src/renderer/interactive-extractor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAGpE,OAAO,KAAK,EACV,MAAM,EACN,kBAAkB,
|
|
1
|
+
{"version":3,"file":"interactive-extractor.d.ts","sourceRoot":"","sources":["../../src/renderer/interactive-extractor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAGpE,OAAO,KAAK,EACV,MAAM,EACN,kBAAkB,EAClB,sBAAsB,EAEtB,kBAAkB,EACnB,MAAM,iCAAiC,CAAC;AAEzC,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAiBvE,CAAC;AAsCF,UAAU,gBAAgB;IACxB,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,KAAK,EAAE,kBAAkB,EAAE,CAAC;CAC7B;AAED,qBAAa,oBAAoB;IAC/B,0BAA0B,CACxB,SAAS,EAAE,YAAY,EAAE,EACzB,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,WAAW,EAAE,kBAAkB,GAC9B,gBAAgB;IA8FnB,OAAO,CAAC,wBAAwB;CA8DjC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { isInteractiveRole } from "./accessibility-extractor.js";
|
|
2
2
|
import { computeDOMPathSignature } from "./dom-path.js";
|
|
3
|
-
|
|
4
|
-
const ROLE_TO_ELEMENT_TYPE = {
|
|
3
|
+
export const ROLE_TO_ELEMENT_TYPE = {
|
|
5
4
|
button: "button",
|
|
6
5
|
link: "link",
|
|
7
6
|
textbox: "text_input",
|
|
@@ -24,26 +23,32 @@ function mapRoleToElementType(role) {
|
|
|
24
23
|
}
|
|
25
24
|
function extractElementState(node) {
|
|
26
25
|
const props = node.properties;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
26
|
+
const state = {};
|
|
27
|
+
// Only include non-default values to reduce serialization size.
|
|
28
|
+
// Defaults: enabled=true (omit), visible=true (omit), focused=false (omit)
|
|
29
|
+
if (props["disabled"] === true) {
|
|
30
|
+
state.enabled = false;
|
|
31
|
+
}
|
|
32
|
+
// visible defaults to true; overridden to false by bounds check downstream
|
|
33
|
+
if (props["focused"] === true) {
|
|
34
|
+
state.focused = true;
|
|
35
|
+
}
|
|
36
|
+
if (props["checked"] === "true" || props["checked"] === true || props["checked"] === "mixed") {
|
|
37
|
+
state.checked = true;
|
|
38
|
+
}
|
|
39
|
+
if (props["expanded"] !== undefined) {
|
|
40
|
+
state.expanded = props["expanded"] === true;
|
|
41
|
+
}
|
|
42
|
+
if (props["selected"] !== undefined) {
|
|
43
|
+
state.selected = props["selected"] === true;
|
|
44
|
+
}
|
|
45
|
+
if (props["required"] === true) {
|
|
46
|
+
state.required = true;
|
|
47
|
+
}
|
|
48
|
+
if (props["invalid"] !== undefined && props["invalid"] !== "false") {
|
|
49
|
+
state.invalid = true;
|
|
50
|
+
}
|
|
51
|
+
return state;
|
|
47
52
|
}
|
|
48
53
|
export class InteractiveExtractor {
|
|
49
54
|
extractInteractiveElements(rootNodes, boundsMap, idGenerator) {
|
|
@@ -62,15 +67,16 @@ export class InteractiveExtractor {
|
|
|
62
67
|
bounds = boundsMap.get(node.backendDOMNodeId) ?? null;
|
|
63
68
|
}
|
|
64
69
|
const state = extractElementState(node);
|
|
65
|
-
// If no bounds available, mark as not visible
|
|
70
|
+
// If no bounds available or zero-sized, mark as not visible and null out bounds
|
|
66
71
|
if (!bounds || (bounds.w === 0 && bounds.h === 0)) {
|
|
67
72
|
state.visible = false;
|
|
73
|
+
bounds = null;
|
|
68
74
|
}
|
|
69
75
|
const element = {
|
|
70
76
|
id: elementId,
|
|
71
77
|
type: elementType,
|
|
72
78
|
label: node.name || node.description || "",
|
|
73
|
-
bounds
|
|
79
|
+
bounds,
|
|
74
80
|
state,
|
|
75
81
|
};
|
|
76
82
|
// Add type-specific fields
|