@archon-claw/cli 0.5.0 → 0.5.1

package/dist/templates/workspace/.claude/skills/create-tool-ui/SKILL.md

@@ -1,218 +0,0 @@
----
-name: create-tool-ui
-description: 创建工具自定义 UI 组件。当用户需要为工具定制 Chat UI 中的展示效果时使用。
-argument-hint: "[tool_name]"
----
-
-在 `agents/<agent>/tool-uis/` 目录下创建工具自定义 UI 文件。
-
-## 背景
-
-默认情况下，所有工具在 Chat UI 中以可折叠的 JSON 面板展示（args + result）。通过自定义 UI，可以用 Web Component 替代默认展示，提供更直观的交互体验。
-
-## 规范
-
-- 文件名格式：`<tool-name>.ui.js`，必须与 `tools/<tool-name>.json` 的 name 一致
-- 文件内定义一个 **Custom Element**（Web Component），使用 Shadow DOM 隔离样式
-- Custom Element 标签名必须是 `tool-ui-<tool-name>`
-- 数据通过 **JS property**（不是 HTML attribute）传入：
-  - `args`：`Record<string, unknown>` — 工具调用参数
-  - `result`：`unknown` — 工具返回结果（运行中时为 `undefined`）
-  - `status`：`"running"` | `"done"` — 执行状态
-- 每次 property 被赋值时应触发重新渲染
-
-## 文件结构
-
-```
-agents/<agent>/
-├── tools/search.json
-├── tool-impls/search.impl.js
-└── tool-uis/search.ui.js        ← 新增：自定义 UI
-```
-
-## 模板
-
-```javascript
-class <ToolName>UI extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this._args = {};
-    this._result = undefined;
-    this._status = 'running';
-  }
-
-  set args(v) { this._args = v; this.render(); }
-  set result(v) { this._result = v; this.render(); }
-  set status(v) { this._status = v; this.render(); }
-  get args() { return this._args; }
-  get result() { return this._result; }
-  get status() { return this._status; }
-
-  connectedCallback() { this.render(); }
-
-  render() {
-    const isRunning = this._status === 'running';
-    this.shadowRoot.innerHTML = `
-      <style>
-        :host { display: block; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; font-family: system-ui, sans-serif; font-size: 14px; }
-        .header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
-        .name { font-weight: 500; color: #374151; }
-        .status { color: #9ca3af; font-size: 12px; }
-        .body { padding: 8px 12px; }
-      </style>
-      <div class="header">
-        <span class="name"><tool-name></span>
-        <span class="status">${isRunning ? 'Running...' : 'Done'}</span>
-      </div>
-      <div class="body">
-        ${isRunning ? '<span class="status">Processing...</span>' : this.renderResult()}
-      </div>
-    `;
-  }
-
-  renderResult() {
-    // 根据 this._result 的结构自定义渲染
-    return `<pre style="margin:0;white-space:pre-wrap;font-size:12px;">${this.escapeHtml(JSON.stringify(this._result, null, 2))}</pre>`;
-  }
-
-  escapeHtml(str) {
-    const d = document.createElement('div');
-    d.textContent = String(str);
-    return d.innerHTML;
-  }
-}
-
-customElements.define('tool-ui-<tool-name>', <ToolName>UI);
-```
-
-## 示例
-
-### 搜索工具（对应 tools/search.json）
-
-```javascript
-class SearchUI extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this._args = {};
-    this._result = undefined;
-    this._status = 'running';
-  }
-
-  set args(v) { this._args = v; this.render(); }
-  set result(v) { this._result = v; this.render(); }
-  set status(v) { this._status = v; this.render(); }
-  get args() { return this._args; }
-  get result() { return this._result; }
-  get status() { return this._status; }
-
-  connectedCallback() { this.render(); }
-
-  render() {
-    const query = this._args?.query || '';
-    const isRunning = this._status === 'running';
-    this.shadowRoot.innerHTML = `
-      <style>
-        :host { display: block; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; font-family: system-ui, sans-serif; font-size: 14px; }
-        .header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fefce8; border-bottom: 1px solid #e5e7eb; }
-        .query { font-weight: 500; color: #92400e; }
-        .body { padding: 8px 12px; }
-        .item { padding: 6px 0; border-bottom: 1px solid #f3f4f6; }
-        .item:last-child { border-bottom: none; }
-        .title { color: #1d4ed8; font-weight: 500; }
-        .url { color: #16a34a; font-size: 11px; margin-top: 1px; }
-        .status { color: #9ca3af; font-size: 12px; }
-      </style>
-      <div class="header">
-        <span>🔍</span>
-        <span class="query">${this.esc(query)}</span>
-        <span class="status">${isRunning ? '⏳' : 'Done'}</span>
-      </div>
-      ${isRunning
-        ? '<div class="body"><span class="status">Searching...</span></div>'
-        : (this._result ? this.renderResult() : '')}
-    `;
-  }
-
-  renderResult() {
-    const r = this._result;
-    const items = Array.isArray(r) ? r : (r && Array.isArray(r.results)) ? r.results : null;
-    if (items) {
-      return `<div class="body">${items.slice(0, 5).map(i => `
-        <div class="item">
-          <div class="title">${this.esc(i.title || '')}</div>
-          ${i.url ? `<div class="url">${this.esc(i.url)}</div>` : ''}
-        </div>`).join('')}</div>`;
-    }
-    return `<div class="body"><pre style="margin:0;white-space:pre-wrap;font-size:12px;">${this.esc(JSON.stringify(r, null, 2))}</pre></div>`;
-  }
-
-  esc(s) { const d = document.createElement('div'); d.textContent = String(s); return d.innerHTML; }
-}
-
-customElements.define('tool-ui-search', SearchUI);
-```
-
-### 计算器（对应 tools/calculator.json）
-
-```javascript
-class CalculatorUI extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this._args = {};
-    this._result = undefined;
-    this._status = 'running';
-  }
-
-  set args(v) { this._args = v; this.render(); }
-  set result(v) { this._result = v; this.render(); }
-  set status(v) { this._status = v; this.render(); }
-  get args() { return this._args; }
-  get result() { return this._result; }
-  get status() { return this._status; }
-
-  connectedCallback() { this.render(); }
-
-  render() {
-    const expr = this._args?.expression || '';
-    const isRunning = this._status === 'running';
-    const result = this._result;
-    this.shadowRoot.innerHTML = `
-      <style>
-        :host { display: block; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; font-family: system-ui, sans-serif; font-size: 14px; }
-        .calc { padding: 10px 14px; background: #f0fdf4; display: flex; align-items: center; gap: 8px; }
-        .expr { font-family: monospace; color: #374151; }
-        .eq { color: #9ca3af; }
-        .val { font-family: monospace; font-weight: 600; color: #15803d; }
-        .status { color: #9ca3af; font-size: 12px; }
-      </style>
-      <div class="calc">
-        <span>🧮</span>
-        <span class="expr">${this.esc(expr)}</span>
-        ${isRunning
-          ? '<span class="status">Computing...</span>'
-          : `<span class="eq">=</span> <span class="val">${this.esc(result?.result ?? '')}</span>`}
-      </div>
-    `;
-  }
-
-  esc(s) { const d = document.createElement('div'); d.textContent = String(s); return d.innerHTML; }
-}
-
-customElements.define('tool-ui-calculator', CalculatorUI);
-```
-
-## 注意
-
-- 文件名必须是 `<tool-name>.ui.js`，且 `tools/<tool-name>.json` 必须存在，否则不会被加载
-- Custom Element 标签名必须是 `tool-ui-<tool-name>`，使用 `customElements.define()` 注册
-- 必须使用 `this.attachShadow({ mode: 'open' })` 创建 Shadow DOM，确保样式隔离
-- 数据通过 JS property setter 传入（不是 attribute），每个 setter 内应调用 `this.render()`
-- `result` 的类型取决于 tool-impl 的返回值，编写 `renderResult()` 时应处理多种可能的数据结构
-- 组件运行在浏览器环境，可以使用所有 Web API（DOM、fetch 等）
-- 不要依赖外部 CDN 资源，所有样式应内联在 Shadow DOM 的 `<style>` 中
-- 使用 `escapeHtml` 防止 XSS — 永远不要直接拼接用户输入到 innerHTML
-
-请根据用户的需求创建工具 UI 组件文件。$ARGUMENTS

package/dist/templates/workspace/README.md

@@ -1,13 +0,0 @@
-# {{name}}
-
-Built with [archon-claw](https://github.com/anthropics/archon-claw).
-
-## Getting Started
-
-```bash
-# Start dev server
-npm run dev
-
-# Start production server
-npm run start
-```

package/dist/templates/workspace/package.json

@@ -1,19 +0,0 @@
-{
-  "name": "{{name}}",
-  "version": "1.0.0",
-  "description": "",
-  "type": "module",
-  "scripts": {
-    "dev": "archon-claw dev --agents-dir agents",
-    "start": "archon-claw start --agents-dir agents -p ${PORT:-5100}",
-    "test": "archon-claw test agents/my-agent",
-    "eval": "archon-claw eval agents/my-agent",
-    "create:agent": "archon-claw create-agent",
-    "export:skills": "archon-claw export-skills .claude/skills"
-  },
-  "keywords": [],
-  "license": "ISC",
-  "dependencies": {
-    "@archon-claw/cli": "^{{cliVersion}}"
-  }
-}