@opentiny/next-sdk 0.4.2 → 0.4.3

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.
Files changed (88) hide show
  1. package/dist/{SimulatorMask-BHVXyogh-CARX3Rff.js → SimulatorMask-BHVXyogh-CKmEDsYG.js} +1 -1
  2. package/dist/{index-R_HIbfUX.js → index-CHMa2zG4.js} +1065 -1042
  3. package/dist/index.js +1 -1
  4. package/dist/page-tools/a11y/config.d.ts +6 -3
  5. package/dist/page-tools/a11y/constants.d.ts +20 -0
  6. package/dist/page-tools/a11y/utils.d.ts +14 -0
  7. package/dist/page-tools/constants.d.ts +4 -2
  8. package/dist/page-tools/context.d.ts +2 -0
  9. package/dist/page-tools/handlers/hover.d.ts +9 -0
  10. package/dist/page-tools/schema.d.ts +3 -3
  11. package/dist/page-tools/utils/dom.d.ts +8 -2
  12. package/dist/runtime.js +19 -172
  13. package/package.json +6 -1
  14. package/WebMcpClient.ts +0 -505
  15. package/WebMcpServer.ts +0 -447
  16. package/agent/AgentModelProvider.ts +0 -932
  17. package/agent/type.ts +0 -91
  18. package/agent/utils/generateReActPrompt.ts +0 -71
  19. package/agent/utils/getAISDKTools.ts +0 -34
  20. package/agent/utils/getBuiltinMcpTools.ts +0 -86
  21. package/agent/utils/parseReActAction.ts +0 -34
  22. package/core.ts +0 -26
  23. package/index.ts +0 -91
  24. package/page-tools/a11y/build.ts +0 -74
  25. package/page-tools/a11y/config.ts +0 -465
  26. package/page-tools/a11y/constants.ts +0 -131
  27. package/page-tools/a11y/search.ts +0 -127
  28. package/page-tools/a11y/types.ts +0 -105
  29. package/page-tools/a11y/utils.ts +0 -239
  30. package/page-tools/a11y/vnode.ts +0 -439
  31. package/page-tools/a11y-tree.ts +0 -14
  32. package/page-tools/bridge.ts +0 -722
  33. package/page-tools/configs/console-cloud.ts +0 -172
  34. package/page-tools/constants.ts +0 -12
  35. package/page-tools/context.ts +0 -50
  36. package/page-tools/effects.ts +0 -345
  37. package/page-tools/handlers/browserState.ts +0 -12
  38. package/page-tools/handlers/click.ts +0 -30
  39. package/page-tools/handlers/executeJavascript.ts +0 -22
  40. package/page-tools/handlers/fill.ts +0 -65
  41. package/page-tools/handlers/scroll.ts +0 -66
  42. package/page-tools/handlers/searchTree.ts +0 -27
  43. package/page-tools/handlers/select.ts +0 -39
  44. package/page-tools/initialize-builtin-WebMCP.ts +0 -20
  45. package/page-tools/page-agent-highlight/index.ts +0 -245
  46. package/page-tools/page-agent-mask/SimulatorMask.module.css +0 -14
  47. package/page-tools/page-agent-mask/SimulatorMask.ts +0 -299
  48. package/page-tools/page-agent-mask/checkDarkMode.ts +0 -181
  49. package/page-tools/page-agent-mask/cursor-border.svg +0 -3
  50. package/page-tools/page-agent-mask/cursor-fill.svg +0 -5
  51. package/page-tools/page-agent-mask/cursor.module.css +0 -70
  52. package/page-tools/page-agent-mask/hauwei.svg +0 -25
  53. package/page-tools/page-agent-prompt.md +0 -139
  54. package/page-tools/page-agent-tool-event.ts +0 -113
  55. package/page-tools/page-agent-tool.ts +0 -207
  56. package/page-tools/page-state-cache.ts +0 -78
  57. package/page-tools/schema.ts +0 -52
  58. package/page-tools/tool-config.ts +0 -100
  59. package/page-tools/utils/dom.ts +0 -158
  60. package/page-tools/utils/scroll.ts +0 -58
  61. package/remoter/QrCode.ts +0 -54
  62. package/remoter/createRemoter.ts +0 -957
  63. package/remoter/svgs/chat.svg +0 -43
  64. package/remoter/svgs/icon-copy.svg +0 -25
  65. package/remoter/svgs/link.svg +0 -28
  66. package/remoter/svgs/logo.svg +0 -45
  67. package/remoter/svgs/qrcode.svg +0 -35
  68. package/remoter/svgs/scan.svg +0 -21
  69. package/remoter/tooltips.ts +0 -260
  70. package/runtime.html +0 -39
  71. package/runtime.ts +0 -44
  72. package/script/utils.ts +0 -26
  73. package/skills/index.ts +0 -287
  74. package/test/page-tools/a11y/build.test.ts +0 -638
  75. package/test/page-tools/a11y/config.test.ts +0 -370
  76. package/test/page-tools/configs/console-cloud.test.ts +0 -168
  77. package/test/page-tools/page-agent-highlight.test.ts +0 -110
  78. package/test/page-tools/page-agent-tool-dispatch.test.ts +0 -208
  79. package/test/page-tools/page-agent-tool.test.ts +0 -102
  80. package/test/page-tools/tool-config.test.ts +0 -112
  81. package/test/page-tools/utils/dom.test.ts +0 -122
  82. package/tsconfig.json +0 -16
  83. package/utils/builtinProxy.ts +0 -144
  84. package/utils/env.ts +0 -13
  85. package/utils/uuid.ts +0 -10
  86. package/vite.config.runtime.ts +0 -22
  87. package/vite.config.ts +0 -63
  88. package/vitest.config.ts +0 -10
@@ -1,139 +0,0 @@
1
- ## 角色
2
-
3
- 你是浏览器页面的操作工具,你拥有识别网页内容,点击,填写,选择下拉框和滚动页面等功能。
4
-
5
- 在执行页面操作之前,你必须先调用`browserState`工具一次,根据最新的网页状态,再调用操作动作,比如 'click','fill','select' 等动作。
6
-
7
- <intro>
8
- 你擅长以下任务:
9
- 1. 导航复杂网站并提取精确信息
10
- 2. 自动化表单提交和交互式网页操作
11
- 3. 收集和保存信息
12
- 4. 在代理循环中有效运行
13
- 5. 高效执行多样化的网页任务
14
- </intro>
15
-
16
- <input>
17
- 在每一步,你的输入将包括:
18
- 1. <agent_history>:一个按时间顺序排列的事件流,包括你之前的操作及其结果。
19
- 2. <agent_state>:当前的 <user_request> 和 <step_info>。
20
- 3. <browser_state>:当前 URL、页面标题、可交互元素总数以及语义化 YAML 树。
21
- </input>
22
-
23
- <browser_state>
24
-
25
- 浏览器状态包含以下内容:
26
-
27
- - url: 当前查看页面的 URL。
28
- - title: 当前查看页面的标题。
29
- - 可交互元素总数:带有 `#N` 标记的元素数量。
30
- - YAML 树:页面的语义化结构,格式如下:
31
-
32
- ```yaml
33
- - region:
34
- - main:
35
- - button #9 [cursor=pointer] "产品文档"
36
- - button #47 [selected] [cursor=pointer] "40元/月 2核CPU 2GB内存"
37
- - radio #53 [checked] [cursor=pointer] "自动生成密码"
38
- - button #74 [cursor=pointer] "立即购买"
39
- - generic #6 [cf-uba="serviceList..Flexus云服务"] "Flexus云服务"
40
- ```
41
-
42
- 节点格式说明:
43
- - `- role #N [token1] [token2] "accessible name"`
44
- - `role`:ARIA 语义角色(如 button/link/radio/heading/listitem/generic 等)
45
- - `#N`:可交互元素的唯一操作索引,**只有带 `#N` 的节点才能被操作**,操作时将 N 作为 `index` 参数传入
46
- - `[token]`:可选 token,包括状态标记(如 `[checked]` `[selected]` `[pressed]` `[current]` `[expanded]` `[disabled]` `[readonly]` `[required]` `[invalid]` `[busy]` `[error]` `[warning]` `[cursor=pointer]`)和定制属性(如 `[cf-uba="..."]`)
47
- - `"accessible name"`:元素的语义化名称,**用双引号包裹**(通过 aria-label/aria-labelledby/innerText 等计算得出);无名称的节点此字段省略
48
- - 缩进表示父子关系
49
-
50
- </browser_state>
51
-
52
- <responseMode>
53
-
54
- `page-agent-tool` 支持 `responseMode` 参数,用于控制操作后返回的页面状态形式:
55
-
56
- - **`diff`**(默认):仅返回自上一次状态以来的增量 DOM 差异,极大节省 Token。
57
- - **`full`**:返回当前视口中完整的语义化 ARIA YAML 树。
58
- - **`both`**:同时返回全量树和增量差异。
59
-
60
- 执行 `click`、`fill`、`select`、`scroll` 操作后,工具默认自动以 `diff` 模式返回最新页面状态,无需再次手动调用 `browserState`。
61
-
62
- </responseMode>
63
-
64
- <browser_state_diff>
65
-
66
- 在交互过程中,为了提高效率和减少上下文占用,工具会生成页面的增量差异(Diff)信息。
67
- Diff 格式示例如下:
68
- ```diff
69
- - button #9: 产品文档
70
- + button #9: 产品文档 (已点击)
71
- ```
72
- 或者,当页面结构发生改变时,会展示新增或移除的节点差异。
73
-
74
- ### 页面状态获取四原则(重要,请严格遵守):
75
-
76
- > 与业界 AI 编辑器(Cursor / Windsurf)按需读取文件而非全量加载的理念完全一致——**先精准搜索,再按需拉取全量**,将发送给大模型的 token 降至最低。
77
-
78
- 1. **按关键词精准搜索(最高优先级)**:当你已知要找什么类型的元素(如按钮、输入框、特定名称的链接)时,**优先使用 `searchTree` 动作**,传入 role 名称、元素文本或状态关键词搜索。它只返回命中行和上下文,token 消耗比全量树减少 80%+。
79
- - 示例:查找所有按钮 → `{"action": "searchTree", "query": "button"}`
80
- - 示例:查找含"提交"文本的节点 → `{"action": "searchTree", "query": "提交"}`
81
- - 示例:查找已勾选的复选框 → `{"action": "searchTree", "query": "checked"}`
82
- - 示例:精确定位某个 ref → `{"action": "searchTree", "query": "#5"}`
83
- 2. **首次获取全量**:首次进入页面、页面发生重大刷新、或 `searchTree` 无法找到所需信息时,调用 `browserState` 并指定 `responseMode` 为 `full` 或 `both` 获取完整 A11y 树。
84
- 3. **增量优先**:执行 `click`、`fill`、`select`、`scroll` 操作后,工具默认自动返回 `diff` 增量信息。优先阅读这些 Diff,以便快速确认操作是否生效。
85
- 4. **按需拉取全量**:如果增量 Diff 不足以支持下一步操作,或需要寻找不在 Diff 中的 `#N` 节点,且 `searchTree` 也无法定位时,再显式调用 `browserState` 拉取完整树。
86
-
87
- </browser_state_diff>
88
-
89
-
90
-
91
- <browser_rules>
92
- 在使用浏览器和浏览网页时严格遵守以下规则:
93
-
94
- - 仅与分配有 `#N` 索引的元素进行交互,将 N 作为 `index` 参数传入。
95
- - 仅使用明确出现在树中的 `#N` 索引,切勿猜测或沿用过期索引。
96
- - 每次操作后 `#N` 索引会重新分配,不要使用旧的索引。
97
- - 如果页面在执行操作后发生变化(例如输入文本操作),分析是否需要与新元素进行交互,例如从列表中选择正确的选项。
98
- - 默认情况下,仅列出可见视口中的元素。如果你怀疑需要交互的相关内容在屏幕外,请使用滚动操作。仅在页面下方或上方还有更多像素时才滚动。
99
- - 你可以使用 num_pages 参数滚动特定页数(例如,0.5 表示半页,2.0 表示两页)。
100
- - 如果出现验证码,告诉用户你无法解决验证码。完成任务并请用户解决它。
101
- - 如果缺少预期元素,尝试滚动或导航回退。
102
- - 除非某些条件发生变化,否则不要重复同一操作超过 3 次。
103
- - 如果你向输入字段填充文本且操作序列被中断,通常意味着某些内容发生了变化,例如下拉建议弹出。
104
- - 如果 <user_request> 包含特定的页面信息,如产品类型、评分、价格、位置等,尝试应用过滤器以提高效率。
105
- - <user_request> 是最终目标。如果用户指定了明确的步骤,它们始终具有最高优先级。
106
- - 如果你向字段输入文本,可能需要按回车键、点击搜索按钮或从下拉列表中选择以完成操作。
107
- - **不要通过 executeJavascript 向页面插入 DOM 元素**(如创建 div 显示调试信息)。这会污染页面结构并影响后续操作。如需读取数据,使用 return 语句返回结果即可。
108
- - 如果操作返回中出现 `[校验提示]`,说明页面有表单校验错误未通过,请先根据提示修复错误后再继续操作。
109
- - 如果操作后页面没有发生预期变化,优先检查是否有 `[校验提示]` 或 `[error]` token 的错误信息,而非重复操作。
110
- - 如果不需要,不要登录页面。如果没有凭据,不要登录。
111
- - 有两种类型的任务,首先思考你正在处理哪种类型的请求:
112
-
113
- 1. 非常具体的逐步说明:
114
-
115
- - 非常精确地遵循它们,不要跳过步骤。尝试按要求完成所有内容。
116
-
117
- 2. 开放式任务。自己规划,在实现目标时保持创造性。
118
-
119
- - 如果在开放式任务中陷入困境(例如登录或验证码),可以重新评估任务并尝试替代方法,例如有时即使页面的某些部分可访问或通过 Web 搜索获取一些信息,也会意外弹出登录框。
120
- </browser_rules>
121
-
122
- <capability>
123
- - 你只能处理单页应用。不要跳出当前页面。
124
- - 如果链接将在新页面中打开(例如,<a target="_blank">),不要点击该链接。
125
- - 任务失败是可以接受的。
126
- - 用户可能是错的。如果用户的请求无法实现、不适当,或者你没有足够的信息或工具来实现它。告诉用户提出更好的请求。
127
- - 网页可能已损坏。所有网页或应用都有 bug。有些 bug 会使你的工作变得困难。鼓励你告诉用户当前页面的问题。你的反馈(包括失败)对用户很有价值。
128
- - 过于努力可能有害。来回重复某些操作或在知识有限的情况下推动复杂程序可能导致不良结果和有害副作用。用户宁愿你以失败告终完成任务。
129
- - 如果你对当前网页或任务没有相关知识。你必须要求用户提供具体说明和详细步骤。
130
- </capability>
131
-
132
- <task_completion_rules>
133
- 你必须在以下情况时结束任务:
134
-
135
- - 当你完全完成用户请求时。
136
- - 当你感到困惑或无法解决用户请求时。或者用户请求不清楚或包含不当内容。
137
- - 如果绝对不可能继续。
138
-
139
- </task_completion_rules>
@@ -1,113 +0,0 @@
1
- import { inputSchema, type PageAgentToolInput, type PageAgentToolRawInput } from './schema'
2
- import { PageController } from '@page-agent/page-controller'
3
-
4
- export const PAGE_AGENT_TOOL_CALL_EVENT = 'page-agent-tool-call'
5
- export const PAGE_AGENT_TOOL_RESULT_EVENT = 'page-agent-tool-result'
6
- export const PAGE_AGENT_CHAT_END_EVENT = 'page-agent-chat-end'
7
-
8
- export type PageAgentToolCallEventDetail = {
9
- data?: PageAgentToolRawInput
10
- requestId: string
11
- }
12
-
13
- export type PageAgentToolResultEventDetail = {
14
- data: {
15
- success: boolean
16
- result?: unknown
17
- error?: string
18
- }
19
- requestId: string
20
- }
21
-
22
- type ExecutePageAgentTool = (data: PageAgentToolInput) => Promise<unknown>
23
-
24
- function isPageAgentToolErrorResult(result: unknown): result is { isError: true; error: string } {
25
- return (
26
- typeof result === 'object' &&
27
- result !== null &&
28
- 'isError' in result &&
29
- result.isError === true &&
30
- 'error' in result &&
31
- typeof result.error === 'string'
32
- )
33
- }
34
-
35
- declare global {
36
- interface Window {
37
- __nextSdkPageAgentToolEventCleanup?: () => void
38
- }
39
- }
40
-
41
- function dispatchPageAgentToolResult(detail: PageAgentToolResultEventDetail) {
42
- window.dispatchEvent(new CustomEvent(PAGE_AGENT_TOOL_RESULT_EVENT, { detail }))
43
- }
44
-
45
- export function setupPageAgentToolEventBridge(
46
- executePageAgentTool: ExecutePageAgentTool,
47
- pageController: PageController
48
- ) {
49
- window.__nextSdkPageAgentToolEventCleanup?.()
50
-
51
- const handleToolCall = async (event: Event) => {
52
- const detail = (event as CustomEvent<PageAgentToolCallEventDetail>).detail
53
- const requestId = detail?.requestId
54
-
55
- if (!requestId) {
56
- dispatchPageAgentToolResult({
57
- requestId: '',
58
- data: {
59
- success: false,
60
- error: '缺少 requestId'
61
- }
62
- })
63
- return
64
- }
65
-
66
- try {
67
- const data = inputSchema.parse(detail.data)
68
- const result = await executePageAgentTool(data)
69
- if (isPageAgentToolErrorResult(result)) {
70
- dispatchPageAgentToolResult({
71
- requestId,
72
- data: {
73
- success: false,
74
- error: result.error,
75
- result
76
- }
77
- })
78
- return
79
- }
80
- dispatchPageAgentToolResult({
81
- requestId,
82
- data: {
83
- success: true,
84
- result
85
- }
86
- })
87
- } catch (error) {
88
- dispatchPageAgentToolResult({
89
- requestId,
90
- data: {
91
- success: false,
92
- error: error instanceof Error ? error.message : String(error)
93
- }
94
- })
95
- }
96
- }
97
-
98
- // 聊天结束事件,用于在聊天结束时移除遮罩
99
- const handleChatEnd = async () => {
100
- try {
101
- await pageController.hideMask()
102
- } catch (error) {}
103
- }
104
-
105
- window.addEventListener(PAGE_AGENT_TOOL_CALL_EVENT, handleToolCall)
106
- window.addEventListener(PAGE_AGENT_CHAT_END_EVENT, handleChatEnd)
107
-
108
- window.__nextSdkPageAgentToolEventCleanup = () => {
109
- window.removeEventListener(PAGE_AGENT_TOOL_CALL_EVENT, handleToolCall)
110
- window.removeEventListener(PAGE_AGENT_CHAT_END_EVENT, handleChatEnd)
111
- window.__nextSdkPageAgentToolEventCleanup = undefined
112
- }
113
- }
@@ -1,207 +0,0 @@
1
- import { initializeBuiltinWebMCP } from './initialize-builtin-WebMCP'
2
- import { zodToJsonSchema } from 'zod-to-json-schema'
3
- import pageAgentPrompt from './page-agent-prompt.md?raw'
4
- import { PageController } from '@page-agent/page-controller'
5
- import { buildA11yTree, type RefMap } from './a11y-tree'
6
- import { PageStateCache } from './page-state-cache'
7
- import { SimulatorMask } from './page-agent-mask/SimulatorMask'
8
- import { highlight, unhighlight, globalRemoveListener } from './page-agent-highlight'
9
- import { setupPageAgentToolEventBridge } from './page-agent-tool-event'
10
-
11
- import type { PageAgentToolOptions } from './constants'
12
- import { inputSchema, type PageAgentToolInput } from './schema'
13
- import { createActionErrorResult, type ActionContext } from './context'
14
- import { detectPageDialog, detectValidationErrors } from './utils/dom'
15
- import { getPageAgentToolConfig, setPageAgentToolConfig } from './tool-config'
16
-
17
- import { handleBrowserState } from './handlers/browserState'
18
- import { handleClick } from './handlers/click'
19
- import { handleFill } from './handlers/fill'
20
- import { handleSelect } from './handlers/select'
21
- import { handleScroll } from './handlers/scroll'
22
- import { handleExecuteJavascript } from './handlers/executeJavascript'
23
- import { handleSearchTree } from './handlers/searchTree'
24
-
25
- /** 在浏览器页面中注册 page-agent-tool, 用于页面的内容获取和操作,页面的动效 */
26
- export function registerPageAgentTool(options: PageAgentToolOptions = {}) {
27
- initializeBuiltinWebMCP()
28
-
29
- // 完整工具配置(顶层选项 enableHighlight + 统一无障碍配置 a11yConfig):与默认配置合并后
30
- // 得到运行期唯一生效的配置(存于 window.__webmcpcli_toolConfig),后续可通过
31
- // setPageAgentToolConfig 在运行期继续修改(追加式合并/函数式过滤/整体替换)
32
- setPageAgentToolConfig(options, { mode: 'replace' })
33
-
34
- window.__webmcpcli_beforeGetBrowserState = window.__webmcpcli_beforeGetBrowserState || null // 指定网站覆盖该函数,可在其中调用 setPageAgentToolConfig 动态调整当前页面的配置
35
-
36
- // 保留 PageController ,先关闭内置mask, 再手工绑定当前项目的mask类
37
- const pageController = new PageController({ enableMask: false })
38
-
39
- // @ts-ignore
40
- pageController.maskReady = (async () => {
41
- // @ts-ignore
42
- pageController.mask = new SimulatorMask()
43
- })()
44
-
45
- // ─── 状态 Diff 缓存
46
- const stateCache = new PageStateCache()
47
-
48
- // 当前 ref 索引 → HTMLElement 映射(每次 buildA11yTree 后更新)
49
- let currentRefMap: RefMap = new Map()
50
-
51
- // ─── 辅助:构建错误响应 ───────────────────────────────────────────────────
52
- async function errContent(msg: string) {
53
- return { content: [{ type: 'text' as const, text: msg }] }
54
- }
55
-
56
- async function actionError(msg: string) {
57
- const result = await createActionErrorResult(msg, buildBrowserStateResponse)
58
- options.removeMaskAfterToolCall && (await pageController.hideMask())
59
- return result
60
- }
61
-
62
- // AI 使用过期 ref 时,自动重建 A11y 树并返回全量状态,
63
- // 避免 AI 额外往返调用 browserState,减少操作轮次
64
- async function refreshOnStaleRef(action: string, index: number) {
65
- const refreshResult = await buildBrowserStateResponse('full')
66
- const warning = `⚠️ ${action}失败: ref 索引 ${index} 已失效(页面可能已刷新),已自动重新加载页面状态,请使用新的 ref 索引重试。\n`
67
- return {
68
- content: [{ type: 'text' as const, text: warning + refreshResult.content[0].text }]
69
- }
70
- }
71
-
72
- // ─── 核心:构建 browserState 响应(全量 or 增量 Diff)────────────────────
73
- async function buildBrowserStateResponse(
74
- responseMode: 'full' | 'diff' | 'both' = 'diff'
75
- ): Promise<{ content: Array<{ type: 'text'; text: string }> }> {
76
- const url = window.location.href
77
- const title = document.title
78
-
79
- // 生成语义化 ARIA YAML 树 + 刷新 refMap(统一读取运行期生效的配置,支持 setPageAgentToolConfig 动态修改)
80
- const { yaml, refMap } = buildA11yTree(document.body, getPageAgentToolConfig().a11yConfig)
81
- currentRefMap = refMap
82
-
83
- // 高亮交互元素,且增加全局移除高亮的监听(读取运行期生效的配置,支持 setPageAgentToolConfig 动态修改)
84
- if (getPageAgentToolConfig().enableHighlight) {
85
- highlight(refMap)
86
- globalRemoveListener()
87
- }
88
-
89
- // 计算 Diff
90
- const diff = stateCache.update(url, yaml)
91
-
92
- // 检测页面弹窗/遮罩层(确认框、提示框等),让 AI 优先处理
93
- const dialogAlert = detectPageDialog()
94
- // 检测表单校验错误,提醒 AI 优先修复
95
- const validationErrors = detectValidationErrors()
96
-
97
- // 根据 responseMode 组装 content
98
- let displayContent = ''
99
- if (responseMode === 'full') {
100
- displayContent = yaml
101
- } else if (responseMode === 'diff') {
102
- displayContent = diff.isFullRefresh ? yaml : diff.diffText
103
- } else if (responseMode === 'both') {
104
- displayContent = `【全量页面树】:\n${yaml}\n\n【增量差异】:\n${diff.isFullRefresh ? '(首次/刷新,无增量差异)' : diff.diffText}`
105
- }
106
-
107
- // 拼装 JSON 格式状态,与 webmcp-cli 的 state 提取逻辑对齐
108
- const stateObj = {
109
- url,
110
- title,
111
- content: displayContent
112
- }
113
- const text = `浏览器状态: ${JSON.stringify(stateObj)}${dialogAlert}${validationErrors}`
114
- return { content: [{ type: 'text', text }] }
115
- }
116
-
117
- // 组装上下文传递给 handlers
118
- const actionContext: ActionContext = {
119
- pageController,
120
- stateCache,
121
- getRefMap: () => currentRefMap,
122
- setRefMap: (map: RefMap) => {
123
- currentRefMap = map
124
- },
125
- buildBrowserStateResponse,
126
- refreshOnStaleRef,
127
- errContent,
128
- actionError
129
- }
130
-
131
- async function executePageAgentTool(args: PageAgentToolInput) {
132
- try {
133
- let ret: any
134
-
135
- switch (args.action) {
136
- case 'browserState':
137
- ret = await handleBrowserState(args, actionContext)
138
- break
139
- case 'click':
140
- await pageController.showMask()
141
- pageController.mask.borderElement(currentRefMap.get(args.index))
142
- ret = await handleClick(args, actionContext)
143
- pageController.mask.removeBorderElement()
144
- options.removeMaskAfterToolCall && (await pageController.hideMask())
145
- break
146
- case 'fill':
147
- await pageController.showMask()
148
- pageController.mask.borderElement(currentRefMap.get(args.index))
149
- ret = await handleFill(args, actionContext)
150
- pageController.mask.removeBorderElement()
151
- options.removeMaskAfterToolCall && (await pageController.hideMask())
152
- break
153
- case 'select':
154
- await pageController.showMask()
155
- pageController.mask.borderElement(currentRefMap.get(args.index))
156
- ret = await handleSelect(args, actionContext)
157
- pageController.mask.removeBorderElement()
158
- options.removeMaskAfterToolCall && (await pageController.hideMask())
159
- break
160
- case 'scroll':
161
- await pageController.showMask()
162
- ret = await handleScroll(args, actionContext)
163
- options.removeMaskAfterToolCall && (await pageController.hideMask())
164
- break
165
- case 'executeJavascript':
166
- ret = await handleExecuteJavascript(args, actionContext)
167
- break
168
- case 'searchTree':
169
- ret = await handleSearchTree(args, actionContext)
170
- break
171
- default:
172
- ret = { content: [{ type: 'text' as const, text: `未知操作: ${args.action}` }] }
173
- }
174
- return ret
175
- } catch (error) {
176
- const actionNames = {
177
- click: '点击',
178
- fill: '填写',
179
- select: '选择'
180
- } as const
181
- if (args.action in actionNames) {
182
- return actionError(
183
- `${actionNames[args.action as keyof typeof actionNames]}执行异常: ${error instanceof Error ? error.message : String(error)}`
184
- )
185
- }
186
- options.removeMaskAfterToolCall && (await pageController.hideMask())
187
- throw error
188
- }
189
- }
190
-
191
- // ─── 工具注册(名称与 inputSchema 与原版完全一致)────────────────────────
192
- ;(document as any).modelContext.registerTool({
193
- name: 'page-agent-tool',
194
- description: pageAgentPrompt,
195
- // @ts-ignore
196
- inputSchema: zodToJsonSchema(inputSchema) as any,
197
- async execute(args: PageAgentToolInput) {
198
- try {
199
- return executePageAgentTool(args)
200
- } catch (error) {
201
- return { content: [{ type: 'text' as const, text: `异常: ${String(error)}` }] }
202
- }
203
- }
204
- })
205
-
206
- setupPageAgentToolEventBridge(executePageAgentTool, pageController)
207
- }
@@ -1,78 +0,0 @@
1
- /**
2
- * page-state-cache.ts
3
- *
4
- * 页面状态 Diff 缓存模块
5
- * - 缓存上一次 buildA11yTree 生成的 YAML 文本
6
- * - 每次操作后计算 diff,只返回 +/- 变化行,大幅节省 Token
7
- */
8
-
9
- import { diffLines } from 'diff'
10
-
11
- export interface PageSnapshot {
12
- url: string
13
- yaml: string
14
- }
15
-
16
- export interface DiffResult {
17
- /** 是否为全量刷新(首次加载或 URL 变化) */
18
- isFullRefresh: boolean
19
- /** 上一次的 URL(用于拼接 URL 变化提示) */
20
- prevUrl: string
21
- /** 新增行数 */
22
- addedLines: number
23
- /** 删除行数 */
24
- removedLines: number
25
- /** 只含 +/- 行的 diff 文本(不含相同行,节省 Token) */
26
- diffText: string
27
- }
28
-
29
- export class PageStateCache {
30
- private prev: PageSnapshot | null = null
31
-
32
- /** URL 变化或首次调用时,需要全量输出 */
33
- isFullRefresh(currentUrl: string): boolean {
34
- return !this.prev || this.prev.url !== currentUrl
35
- }
36
-
37
- /**
38
- * 更新缓存并返回 diff 结果
39
- * @param url 当前页面 URL
40
- * @param yaml 当前 YAML 树文本
41
- */
42
- update(url: string, yaml: string): DiffResult {
43
- const isFullRefresh = this.isFullRefresh(url)
44
- const prevUrl = this.prev?.url ?? ''
45
-
46
- let addedLines = 0
47
- let removedLines = 0
48
- let diffText = ''
49
-
50
- if (!isFullRefresh && this.prev) {
51
- const changes = diffLines(this.prev.yaml, yaml)
52
- const buf: string[] = []
53
- changes.forEach(part => {
54
- // 跳过相同行,只保留变化行,大幅节省传给 AI 的 Token 数量
55
- if (!part.added && !part.removed) return
56
- const lines = part.value.split('\n').filter(Boolean)
57
- if (part.added) {
58
- addedLines += lines.length
59
- lines.forEach(l => buf.push(`+ ${l}`))
60
- } else {
61
- removedLines += lines.length
62
- lines.forEach(l => buf.push(`- ${l}`))
63
- }
64
- })
65
- diffText = buf.join('\n')
66
- }
67
-
68
- // 更新缓存
69
- this.prev = { url, yaml }
70
-
71
- return { isFullRefresh, prevUrl, addedLines, removedLines, diffText }
72
- }
73
-
74
- /** 强制清空缓存(页面刷新 / 手动重置场景) */
75
- invalidate(): void {
76
- this.prev = null
77
- }
78
- }
@@ -1,52 +0,0 @@
1
- import { z } from 'zod'
2
-
3
- export const inputSchema = z.object({
4
- action: z.enum(['browserState', 'click', 'fill', 'select', 'scroll', 'executeJavascript', 'searchTree'] as const)
5
- .describe(`执行的动作名称, 每一次执行 'click', 'fill', 'select'动作之前,**必须**要先调用 'browserState' 去获取页面的最新状态。
6
- browserState: '查询整个页面的浏览器状态;返回页面的标题、URL、YAML格式的语义化页面树',
7
- click: '根据元素索引点击;',
8
- fill: '根据元素索引填写文本;';
9
- select: '根据元素索引选择下拉框选项;';
10
- scroll: '滚动页面的动作,可以指定水平滚动还是上下滚动; 不带元素索引时:滚动整个文档。带元素索引时:滚动该索引处的容器(或其最近的可滚动祖先元素)'
11
- executeJavascript: '执行javascript代码'
12
- searchTree: '按关键词搜索无障碍树,返回带行号的匹配节点及上下文,无需获取全量树。适合快速定位特定元素(如所有按钮、特定名称的链接等),显著减少上下文消耗。必须提供 query 参数。'
13
- `),
14
- index: z
15
- .number()
16
- .min(0)
17
- .optional()
18
- .describe('执行动作 of the element index, 动作为 click,fill,select时,必须提供元素索引'),
19
- text: z.string().optional().describe('执行动作的文本内容, 动作为 fill,select 时,必须提供文本内容'),
20
- down: z.boolean().optional().describe('执行上下滚动时,必须提供down参数'),
21
- right: z.boolean().optional().describe('执行水平滚动方向, 必须提供right参数'),
22
- numPages: z
23
- .number()
24
- .optional()
25
- .describe('执行动作的滚动页数, 动作为 scroll时,可以提供滚动页数,建议每次滚动0.1页,该值不要大于5.'),
26
- pixels: z.number().int().min(0).optional().describe('执行动作的滚动像素数,动作为 scroll时,可以提供滚动像素数'),
27
- script: z.string().optional().describe('执行的javascript代码,动作为 executeJavascript时,必须提供script参数'),
28
- query: z
29
- .string()
30
- .optional()
31
- .describe(
32
- '搜索关键词,动作为 searchTree 时必须提供。支持按 role(如 button、link)、节点名称、状态(如 checked)或 ref 索引(如 #3)搜索'
33
- ),
34
- contextLines: z
35
- .number()
36
- .int()
37
- .min(0)
38
- .max(10)
39
- .default(2)
40
- .describe('searchTree 时每个命中行前后保留的上下文行数,默认 2'),
41
- maxMatches: z.number().int().min(1).max(50).default(20).describe('searchTree 时最大返回分组数,默认 20'),
42
- responseMode: z
43
- .enum(['full', 'diff', 'both'] as const)
44
- .optional()
45
- .default('diff')
46
- .describe(
47
- '返回浏览器状态的模式。full: 仅返回当前全量 A11y 树;diff: 仅返回与上一次状态的增量差异;both: 同时返回全量 A11y 树与增量差异。默认值为 diff。'
48
- )
49
- })
50
-
51
- export type PageAgentToolInput = z.infer<typeof inputSchema>
52
- export type PageAgentToolRawInput = z.input<typeof inputSchema>