@archon-claw/cli 0.5.0 → 0.6.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.
Files changed (28) hide show
  1. package/dist/public/assets/{chat-input-D-F2IIDK.js → chat-input-BNct1ILJ.js} +34 -34
  2. package/dist/public/assets/{embed-XPDwGdtM.js → embed-D4R7hpA_.js} +1 -1
  3. package/dist/public/assets/{main-DDb5hJ5F.js → main-C4meEBxF.js} +2 -2
  4. package/dist/public/embed.html +3 -3
  5. package/dist/public/index.html +3 -3
  6. package/dist/server.d.ts +5 -1
  7. package/dist/server.js +57 -12
  8. package/package.json +5 -3
  9. package/dist/scaffold.d.ts +0 -7
  10. package/dist/scaffold.js +0 -115
  11. package/dist/templates/agent/model.json +0 -6
  12. package/dist/templates/agent/system-prompt.md +0 -9
  13. package/dist/templates/agent/tool-impls/greeting.impl.js +0 -9
  14. package/dist/templates/agent/tools/greeting.json +0 -14
  15. package/dist/templates/workspace/.claude/skills/create-agent/SKILL.md +0 -90
  16. package/dist/templates/workspace/.claude/skills/create-dataset/SKILL.md +0 -57
  17. package/dist/templates/workspace/.claude/skills/create-eval-case/SKILL.md +0 -159
  18. package/dist/templates/workspace/.claude/skills/create-eval-judge/SKILL.md +0 -128
  19. package/dist/templates/workspace/.claude/skills/create-mcp-config/SKILL.md +0 -151
  20. package/dist/templates/workspace/.claude/skills/create-model-config/SKILL.md +0 -45
  21. package/dist/templates/workspace/.claude/skills/create-skill/SKILL.md +0 -63
  22. package/dist/templates/workspace/.claude/skills/create-system-prompt/SKILL.md +0 -168
  23. package/dist/templates/workspace/.claude/skills/create-tool/SKILL.md +0 -56
  24. package/dist/templates/workspace/.claude/skills/create-tool-impl/SKILL.md +0 -83
  25. package/dist/templates/workspace/.claude/skills/create-tool-test/SKILL.md +0 -117
  26. package/dist/templates/workspace/.claude/skills/create-tool-ui/SKILL.md +0 -218
  27. package/dist/templates/workspace/README.md +0 -13
  28. package/dist/templates/workspace/package.json +0 -19
@@ -1,168 +0,0 @@
1
- ---
2
- name: create-system-prompt
3
- description: 创建或修改系统提示词。当用户需要编写 system-prompt.md 时使用。
4
- ---
5
-
6
- 创建或修改 agent 的 `system-prompt.md` 系统提示词文件。
7
-
8
- ## 规范
9
-
10
- - 文件位于 agent 配置文件夹根目录
11
- - 内容不能为空
12
- - 支持 Liquid 模板语法引用 datasets/ 和 skills/ 中的数据
13
- - 模板语法会在启动时由 liquidjs 解析验证
14
-
15
- ## Liquid 模板变量
16
-
17
- ### datasets 变量
18
-
19
- datasets/ 中的文件名(去掉 `.json`)即为变量名:
20
-
21
- ```markdown
22
- {% for rule in rules %}
23
- - {{ rule }}
24
- {% endfor %}
25
- ```
26
-
27
- ### skills 变量
28
-
29
- skills/ 中的技能会自动注入为 `skills` 数组,每个元素包含 `name` 和 `description`:
30
-
31
- ```markdown
32
- {% for skill in skills %}
33
- - **{{ skill.name }}**:{{ skill.description }}
34
- {% endfor %}
35
- ```
36
-
37
- ### tools / tool 变量
38
-
39
- 所有工具(本地 + MCP)提供两种访问方式:
40
-
41
- - `tools` — 数组,用于遍历
42
- - `tool` — 对象(map),按名字直接访问
43
-
44
- ```markdown
45
- {# 数组遍历 #}
46
- {% for tool in tools %}
47
- - **{{ tool.name }}**:{{ tool.description }}
48
- {% endfor %}
49
-
50
- {# 按名字访问 #}
51
- {{ tool.search.description }}
52
- ```
53
-
54
- ### mcp 变量
55
-
56
- mcp.json 中配置的 MCP 服务器和工具,按服务器名称分组访问:
57
-
58
- 每个服务器也提供 `tools`(数组)和 `tool`(对象)两种形式:
59
-
60
- **遍历特定服务器的工具:**
61
-
62
- ```markdown
63
- {% for tool in mcp.playwright.tools %}
64
- - {{ tool.name }}:{{ tool.description }}
65
- {% endfor %}
66
- ```
67
-
68
- **按名字访问特定工具:**
69
-
70
- ```markdown
71
- {{ mcp.playwright.tool.playwright__browser_click.description }}
72
- ```
73
-
74
- **遍历所有服务器:**
75
-
76
- ```markdown
77
- {% for server in mcp.servers %}
78
- ### {{ server.name }}
79
- {% for tool in server.tools %}
80
- - {{ tool.name }}:{{ tool.description }}
81
- {% endfor %}
82
- {% endfor %}
83
- ```
84
-
85
- **访问服务器名称:**
86
-
87
- ```markdown
88
- {{ mcp.playwright.name }}
89
- ```
90
-
91
- > `mcp.{serverName}` 中的 serverName 对应 mcp.json 里 `mcpServers` 的 key。
92
-
93
- ## Liquid 模板语法
94
-
95
- ### 遍历对象数组
96
-
97
- ```markdown
98
- {% for item in examples %}
99
- ### 问:{{ item.input }}
100
- {{ item.output }}
101
- {% endfor %}
102
- ```
103
-
104
- ### 条件判断
105
-
106
- ```markdown
107
- {% if greeting %}
108
- {{ greeting }}
109
- {% endif %}
110
- ```
111
-
112
- ## 示例
113
-
114
- ```markdown
115
- 你是一个专业的编程助手。
116
-
117
- ## 规则
118
-
119
- {% for rule in rules %}
120
- - {{ rule }}
121
- {% endfor %}
122
-
123
- ## 可用技能
124
-
125
- {% for skill in skills %}
126
- - **{{ skill.name }}**:{{ skill.description }}
127
- {% endfor %}
128
-
129
- ## 可用工具
130
-
131
- {% for tool in tools %}
132
- - **{{ tool.name }}**:{{ tool.description }}
133
- {% endfor %}
134
-
135
- ## 浏览器工具
136
-
137
- {% for tool in mcp.playwright.tools %}
138
- - {{ tool.name }}:{{ tool.description }}
139
- {% endfor %}
140
-
141
- ## 示例
142
-
143
- {% for item in examples %}
144
- ### 问:{{ item.input }}
145
-
146
- {{ item.output }}
147
-
148
- {% endfor %}
149
- ```
150
-
151
- ## 写作建议
152
-
153
- 1. 开头明确 agent 的角色定位
154
- 2. 用 Markdown 标题组织结构(# 角色、## 规则、## 技能、## 示例)
155
- 3. 规则用列表形式,简洁明了
156
- 4. few-shot 示例放在 datasets/ 中通过模板引用,保持文件整洁
157
- 5. 避免在提示词中硬编码大量数据,用 datasets 管理
158
- 6. 用 `skills` 变量列出可用技能,让 agent 知道自己能做什么
159
- 7. 用 `tools` 变量列出所有工具,用 `mcp.{serverName}.tools` 按服务器分类展示 MCP 工具
160
-
161
- ## 注意
162
-
163
- - 不要使用 YAML frontmatter(system-prompt.md 不需要)
164
- - Liquid 标签必须正确闭合(`{% for %}...{% endfor %}`、`{% if %}...{% endif %}`)
165
- - datasets 模板变量名必须和 datasets/ 中的文件名一致
166
- - `skills`、`tools`、`tool`、`mcp` 是内置变量名,不要在 datasets/ 中创建同名文件
167
-
168
- 请根据用户需求创建或修改系统提示词。$ARGUMENTS
@@ -1,56 +0,0 @@
1
- ---
2
- name: create-tool
3
- description: 创建工具定义 JSON 文件。当用户需要新增一个 tool、定义工具 schema 时使用。
4
- argument-hint: "[tool_name]"
5
- ---
6
-
7
- 在 `agents/my-agent/tools/` 目录下创建一个新的工具定义 JSON 文件。
8
-
9
- ## 规范
10
-
11
- - 文件名与工具 `name` 一致,如 `send_email.json`
12
- - 必须通过 `src/schemas/tool.schema.json` 的校验
13
-
14
- ## 必填字段
15
-
16
- - `name`:工具名称,匹配 `^[a-z][a-z0-9_]*$`
17
- - `description`:工具用途描述,要让模型理解何时调用
18
- - `input_schema`:入参定义,JSON Schema object 子集
19
-
20
- ## input_schema 规范
21
-
22
- - `type` 必须为 `"object"`
23
- - `properties` 中每个参数必须有 `type`(string / number / boolean / array / object)
24
- - 建议每个参数写 `description`
25
- - 可选:`enum`、`items`(array 子项)、`required`(必填参数列表)
26
-
27
- ## 示例
28
-
29
- ```json
30
- {
31
- "name": "web_search",
32
- "description": "Search the web and return relevant results for a given query",
33
- "input_schema": {
34
- "type": "object",
35
- "properties": {
36
- "query": {
37
- "type": "string",
38
- "description": "The search query"
39
- },
40
- "limit": {
41
- "type": "number",
42
- "description": "Maximum number of results to return"
43
- }
44
- },
45
- "required": ["query"]
46
- }
47
- }
48
- ```
49
-
50
- ## 注意
51
-
52
- - 一个文件只定义一个工具
53
- - `required` 只列真正必须的参数
54
- - 不要添加 `name`、`description`、`input_schema` 以外的字段
55
-
56
- 请根据用户的需求创建工具定义文件。$ARGUMENTS
@@ -1,83 +0,0 @@
1
- ---
2
- name: create-tool-impl
3
- description: 创建工具实现文件。当用户需要为 tool 编写具体的实现代码时使用。
4
- argument-hint: "[tool_name]"
5
- ---
6
-
7
- 在 `agents/my-agent/tool-impls/` 目录下创建工具实现文件。
8
-
9
- ## 规范
10
-
11
- - 文件名格式:`<tool-name>.impl.js`,与 `tools/<tool-name>.json` 一一对应
12
- - ES6 模块语法,`export default async function`
13
- - 函数接收参数对象,参数与对应 tool JSON 的 `input_schema.properties` 一致
14
- - 返回 Promise<object>
15
-
16
- ## 文件结构
17
-
18
- ```
19
- tool-impls/
20
- └── <tool-name>.impl.js ← 与 tools/<tool-name>.json 对应
21
- ```
22
-
23
- ## 模板
24
-
25
- ```javascript
26
- /**
27
- * <Tool description>
28
- * @param {object} params
29
- * @param {<type>} params.<param_name> - <param description>
30
- * @returns {Promise<object>} <return description>
31
- */
32
- export default async ({ param1, param2 }) => {
33
- // 实现逻辑
34
- return { result: "..." };
35
- };
36
- ```
37
-
38
- ## 示例
39
-
40
- ### 搜索工具(对应 tools/search.json)
41
-
42
- ```javascript
43
- /**
44
- * Search tool implementation
45
- * @param {object} params
46
- * @param {string} params.query - Search query
47
- * @returns {Promise<object>} Search results
48
- */
49
- export default async ({ query }) => {
50
- // TODO: integrate with real search API
51
- return {
52
- results: [
53
- { title: `Result for: ${query}`, url: "https://example.com" },
54
- ],
55
- };
56
- };
57
- ```
58
-
59
- ### 计算器(对应 tools/calculator.json)
60
-
61
- ```javascript
62
- /**
63
- * Calculator tool implementation
64
- * @param {object} params
65
- * @param {string} params.expression - Mathematical expression
66
- * @returns {Promise<object>} Calculation result
67
- */
68
- export default async ({ expression }) => {
69
- const result = Function(`"use strict"; return (${expression})`)();
70
- return { expression, result };
71
- };
72
- ```
73
-
74
- ## 注意
75
-
76
- - 文件名必须是 `<tool-name>.impl.js`,其中 `<tool-name>` 与 tools/ 中的 JSON 文件名一致
77
- - 函数参数通过解构获取,参数名与 tool JSON 中 `input_schema.properties` 的 key 一致
78
- - 必须使用 `export default`,不能用 `module.exports`
79
- - 函数必须是 async 的,返回对象
80
- - 用 JSDoc 注释描述参数和返回值
81
- - 每个 tool 必须有且仅有一个对应的 impl 文件
82
-
83
- 请根据用户的需求创建工具实现文件。$ARGUMENTS
@@ -1,117 +0,0 @@
1
- ---
2
- name: create-tool-test
3
- description: 创建工具测试文件。当用户需要为 tool-impl 编写测试用例时使用。
4
- argument-hint: "[tool_name]"
5
- ---
6
-
7
- 在 `agents/my-agent/tests/` 目录下创建工具测试文件。
8
-
9
- ## 规范
10
-
11
- - 文件名格式:`<tool-name>.test.js`,与 `tool-impls/<tool-name>.impl.js` 一一对应
12
- - ES6 模块语法,`export default` 导出测试用例数组
13
- - 每个测试用例是一个对象,包含 `name`、`args`,以及可选的 `expected` 或 `validate`
14
- - 通过 `archon-claw test <agent-dir>` 命令运行
15
-
16
- ## 文件结构
17
-
18
- ```
19
- agents/<agent-name>/
20
- ├── tool-impls/
21
- │ └── <tool-name>.impl.js ← 工具实现
22
- └── tests/
23
- └── <tool-name>.test.js ← 对应的测试文件
24
- ```
25
-
26
- ## 测试用例字段
27
-
28
- | 字段 | 类型 | 必填 | 说明 |
29
- |------|------|------|------|
30
- | `name` | string | 是 | 测试名称,描述测试内容 |
31
- | `args` | object | 是 | 传给 impl 函数的参数 |
32
- | `expected` | any | 否 | 期望返回值,深度比较 |
33
- | `validate` | function | 否 | 自定义校验函数 |
34
-
35
- ### 三种断言方式
36
-
37
- 1. **`expected`** — 精确匹配返回值(深度比较)
38
- 2. **`validate(result)`** — 自定义校验,返回 `true` 表示通过,返回字符串表示失败原因
39
- 3. **都不写** — 只验证调用不抛异常
40
-
41
- ## 模板
42
-
43
- ```javascript
44
- export default [
45
- {
46
- name: "描述测试内容",
47
- args: { param1: "value1" },
48
- expected: { result: "expected_value" },
49
- },
50
- {
51
- name: "自定义校验",
52
- args: { param1: "value1" },
53
- validate: (result) =>
54
- result.field === "expected" || `expected "expected", got "${result.field}"`,
55
- },
56
- {
57
- name: "只要不抛异常就通过",
58
- args: { param1: "value1" },
59
- },
60
- ];
61
- ```
62
-
63
- ## 示例
64
-
65
- ### 计算器测试(对应 tool-impls/calculator.impl.js)
66
-
67
- ```javascript
68
- export default [
69
- {
70
- name: "addition: 1 + 2 = 3",
71
- args: { expression: "1 + 2" },
72
- expected: { expression: "1 + 2", result: 3 },
73
- },
74
- {
75
- name: "complex expression",
76
- args: { expression: "(10 + 5) * 2 - 4" },
77
- validate: (result) => result.result === 26 || `expected 26, got ${result.result}`,
78
- },
79
- ];
80
- ```
81
-
82
- ### 搜索测试(对应 tool-impls/search.impl.js)
83
-
84
- ```javascript
85
- export default [
86
- {
87
- name: "returns results array",
88
- args: { query: "hello" },
89
- validate: (result) =>
90
- Array.isArray(result.results) || "expected results to be an array",
91
- },
92
- {
93
- name: "result contains query in title",
94
- args: { query: "test query" },
95
- validate: (result) =>
96
- result.results[0]?.title.includes("test query") ||
97
- `expected title to contain "test query"`,
98
- },
99
- ];
100
- ```
101
-
102
- ## 运行测试
103
-
104
- ```bash
105
- archon-claw test agents/my-agent
106
- ```
107
-
108
- ## 注意
109
-
110
- - 测试文件放在 `tests/` 目录,与 `tool-impls/` 同级
111
- - 文件名必须是 `<tool-name>.test.js`,其中 `<tool-name>` 与 `tool-impls/` 中的 `.impl.js` 文件名一致
112
- - 必须使用 `export default`,导出数组
113
- - 每个用例必须有 `name` 和 `args`
114
- - `validate` 函数返回 `true` 或错误消息字符串
115
- - `expected` 和 `validate` 二选一,都不写则只检查不抛异常
116
-
117
- 请根据用户的需求创建工具测试文件。$ARGUMENTS
@@ -1,218 +0,0 @@
1
- ---
2
- name: create-tool-ui
3
- description: 创建工具自定义 UI 组件。当用户需要为工具定制 Chat UI 中的展示效果时使用。
4
- argument-hint: "[tool_name]"
5
- ---
6
-
7
- 在 `agents/<agent>/tool-uis/` 目录下创建工具自定义 UI 文件。
8
-
9
- ## 背景
10
-
11
- 默认情况下,所有工具在 Chat UI 中以可折叠的 JSON 面板展示(args + result)。通过自定义 UI,可以用 Web Component 替代默认展示,提供更直观的交互体验。
12
-
13
- ## 规范
14
-
15
- - 文件名格式:`<tool-name>.ui.js`,必须与 `tools/<tool-name>.json` 的 name 一致
16
- - 文件内定义一个 **Custom Element**(Web Component),使用 Shadow DOM 隔离样式
17
- - Custom Element 标签名必须是 `tool-ui-<tool-name>`
18
- - 数据通过 **JS property**(不是 HTML attribute)传入:
19
- - `args`:`Record<string, unknown>` — 工具调用参数
20
- - `result`:`unknown` — 工具返回结果(运行中时为 `undefined`)
21
- - `status`:`"running"` | `"done"` — 执行状态
22
- - 每次 property 被赋值时应触发重新渲染
23
-
24
- ## 文件结构
25
-
26
- ```
27
- agents/<agent>/
28
- ├── tools/search.json
29
- ├── tool-impls/search.impl.js
30
- └── tool-uis/search.ui.js ← 新增:自定义 UI
31
- ```
32
-
33
- ## 模板
34
-
35
- ```javascript
36
- class <ToolName>UI extends HTMLElement {
37
- constructor() {
38
- super();
39
- this.attachShadow({ mode: 'open' });
40
- this._args = {};
41
- this._result = undefined;
42
- this._status = 'running';
43
- }
44
-
45
- set args(v) { this._args = v; this.render(); }
46
- set result(v) { this._result = v; this.render(); }
47
- set status(v) { this._status = v; this.render(); }
48
- get args() { return this._args; }
49
- get result() { return this._result; }
50
- get status() { return this._status; }
51
-
52
- connectedCallback() { this.render(); }
53
-
54
- render() {
55
- const isRunning = this._status === 'running';
56
- this.shadowRoot.innerHTML = `
57
- <style>
58
- :host { display: block; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; font-family: system-ui, sans-serif; font-size: 14px; }
59
- .header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
60
- .name { font-weight: 500; color: #374151; }
61
- .status { color: #9ca3af; font-size: 12px; }
62
- .body { padding: 8px 12px; }
63
- </style>
64
- <div class="header">
65
- <span class="name"><tool-name></span>
66
- <span class="status">${isRunning ? 'Running...' : 'Done'}</span>
67
- </div>
68
- <div class="body">
69
- ${isRunning ? '<span class="status">Processing...</span>' : this.renderResult()}
70
- </div>
71
- `;
72
- }
73
-
74
- renderResult() {
75
- // 根据 this._result 的结构自定义渲染
76
- return `<pre style="margin:0;white-space:pre-wrap;font-size:12px;">${this.escapeHtml(JSON.stringify(this._result, null, 2))}</pre>`;
77
- }
78
-
79
- escapeHtml(str) {
80
- const d = document.createElement('div');
81
- d.textContent = String(str);
82
- return d.innerHTML;
83
- }
84
- }
85
-
86
- customElements.define('tool-ui-<tool-name>', <ToolName>UI);
87
- ```
88
-
89
- ## 示例
90
-
91
- ### 搜索工具(对应 tools/search.json)
92
-
93
- ```javascript
94
- class SearchUI extends HTMLElement {
95
- constructor() {
96
- super();
97
- this.attachShadow({ mode: 'open' });
98
- this._args = {};
99
- this._result = undefined;
100
- this._status = 'running';
101
- }
102
-
103
- set args(v) { this._args = v; this.render(); }
104
- set result(v) { this._result = v; this.render(); }
105
- set status(v) { this._status = v; this.render(); }
106
- get args() { return this._args; }
107
- get result() { return this._result; }
108
- get status() { return this._status; }
109
-
110
- connectedCallback() { this.render(); }
111
-
112
- render() {
113
- const query = this._args?.query || '';
114
- const isRunning = this._status === 'running';
115
- this.shadowRoot.innerHTML = `
116
- <style>
117
- :host { display: block; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; font-family: system-ui, sans-serif; font-size: 14px; }
118
- .header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fefce8; border-bottom: 1px solid #e5e7eb; }
119
- .query { font-weight: 500; color: #92400e; }
120
- .body { padding: 8px 12px; }
121
- .item { padding: 6px 0; border-bottom: 1px solid #f3f4f6; }
122
- .item:last-child { border-bottom: none; }
123
- .title { color: #1d4ed8; font-weight: 500; }
124
- .url { color: #16a34a; font-size: 11px; margin-top: 1px; }
125
- .status { color: #9ca3af; font-size: 12px; }
126
- </style>
127
- <div class="header">
128
- <span>🔍</span>
129
- <span class="query">${this.esc(query)}</span>
130
- <span class="status">${isRunning ? '⏳' : 'Done'}</span>
131
- </div>
132
- ${isRunning
133
- ? '<div class="body"><span class="status">Searching...</span></div>'
134
- : (this._result ? this.renderResult() : '')}
135
- `;
136
- }
137
-
138
- renderResult() {
139
- const r = this._result;
140
- const items = Array.isArray(r) ? r : (r && Array.isArray(r.results)) ? r.results : null;
141
- if (items) {
142
- return `<div class="body">${items.slice(0, 5).map(i => `
143
- <div class="item">
144
- <div class="title">${this.esc(i.title || '')}</div>
145
- ${i.url ? `<div class="url">${this.esc(i.url)}</div>` : ''}
146
- </div>`).join('')}</div>`;
147
- }
148
- return `<div class="body"><pre style="margin:0;white-space:pre-wrap;font-size:12px;">${this.esc(JSON.stringify(r, null, 2))}</pre></div>`;
149
- }
150
-
151
- esc(s) { const d = document.createElement('div'); d.textContent = String(s); return d.innerHTML; }
152
- }
153
-
154
- customElements.define('tool-ui-search', SearchUI);
155
- ```
156
-
157
- ### 计算器(对应 tools/calculator.json)
158
-
159
- ```javascript
160
- class CalculatorUI extends HTMLElement {
161
- constructor() {
162
- super();
163
- this.attachShadow({ mode: 'open' });
164
- this._args = {};
165
- this._result = undefined;
166
- this._status = 'running';
167
- }
168
-
169
- set args(v) { this._args = v; this.render(); }
170
- set result(v) { this._result = v; this.render(); }
171
- set status(v) { this._status = v; this.render(); }
172
- get args() { return this._args; }
173
- get result() { return this._result; }
174
- get status() { return this._status; }
175
-
176
- connectedCallback() { this.render(); }
177
-
178
- render() {
179
- const expr = this._args?.expression || '';
180
- const isRunning = this._status === 'running';
181
- const result = this._result;
182
- this.shadowRoot.innerHTML = `
183
- <style>
184
- :host { display: block; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; font-family: system-ui, sans-serif; font-size: 14px; }
185
- .calc { padding: 10px 14px; background: #f0fdf4; display: flex; align-items: center; gap: 8px; }
186
- .expr { font-family: monospace; color: #374151; }
187
- .eq { color: #9ca3af; }
188
- .val { font-family: monospace; font-weight: 600; color: #15803d; }
189
- .status { color: #9ca3af; font-size: 12px; }
190
- </style>
191
- <div class="calc">
192
- <span>🧮</span>
193
- <span class="expr">${this.esc(expr)}</span>
194
- ${isRunning
195
- ? '<span class="status">Computing...</span>'
196
- : `<span class="eq">=</span> <span class="val">${this.esc(result?.result ?? '')}</span>`}
197
- </div>
198
- `;
199
- }
200
-
201
- esc(s) { const d = document.createElement('div'); d.textContent = String(s); return d.innerHTML; }
202
- }
203
-
204
- customElements.define('tool-ui-calculator', CalculatorUI);
205
- ```
206
-
207
- ## 注意
208
-
209
- - 文件名必须是 `<tool-name>.ui.js`,且 `tools/<tool-name>.json` 必须存在,否则不会被加载
210
- - Custom Element 标签名必须是 `tool-ui-<tool-name>`,使用 `customElements.define()` 注册
211
- - 必须使用 `this.attachShadow({ mode: 'open' })` 创建 Shadow DOM,确保样式隔离
212
- - 数据通过 JS property setter 传入(不是 attribute),每个 setter 内应调用 `this.render()`
213
- - `result` 的类型取决于 tool-impl 的返回值,编写 `renderResult()` 时应处理多种可能的数据结构
214
- - 组件运行在浏览器环境,可以使用所有 Web API(DOM、fetch 等)
215
- - 不要依赖外部 CDN 资源,所有样式应内联在 Shadow DOM 的 `<style>` 中
216
- - 使用 `escapeHtml` 防止 XSS — 永远不要直接拼接用户输入到 innerHTML
217
-
218
- 请根据用户的需求创建工具 UI 组件文件。$ARGUMENTS
@@ -1,13 +0,0 @@
1
- # {{name}}
2
-
3
- Built with [archon-claw](https://github.com/anthropics/archon-claw).
4
-
5
- ## Getting Started
6
-
7
- ```bash
8
- # Start dev server
9
- npm run dev
10
-
11
- # Start production server
12
- npm run start
13
- ```
@@ -1,19 +0,0 @@
1
- {
2
- "name": "{{name}}",
3
- "version": "1.0.0",
4
- "description": "",
5
- "type": "module",
6
- "scripts": {
7
- "dev": "archon-claw dev --agents-dir agents",
8
- "start": "archon-claw start --agents-dir agents -p ${PORT:-5100}",
9
- "test": "archon-claw test agents/my-agent",
10
- "eval": "archon-claw eval agents/my-agent",
11
- "create:agent": "archon-claw create-agent",
12
- "export:skills": "archon-claw export-skills .claude/skills"
13
- },
14
- "keywords": [],
15
- "license": "ISC",
16
- "dependencies": {
17
- "@archon-claw/cli": "^{{cliVersion}}"
18
- }
19
- }