# @contraagent/ui 中文文档 规范地址：https://npmcn.com/package/%40contraagent/ui/ 版本：0\.10\.1 npm 元数据更新时间：2026-10-31T00:59:46.381Z 中文译文更新时间：2026-11-10T19:45:15.428Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40contraagent/ui 原文对照：https://npmcn.com/package/%40contraagent/ui/?lang=original 项目主页：https://t-tani.github.io/contraagent/ 源码仓库：https://github.com/t-tani/contraagent ## 关键信息（来自 npm 元数据） - 包体积（解压后）：3.3 MB，771 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：2 个 - peer 依赖：lit ^3\.3\.3，@lit/localize ^0\.12\.2 - 首次发布：2026-10-16T11:32:42.497Z - 最新版本发布：2026-10-31T00:59:46.056Z - 近 30 天下载量：3159（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：19（近 12 个月 19 个） ## 中文简介 反向显示器的网络组件:记录、任务表、日记、计划、合同。 无框架 (Lit), 由 @ contraagent/ api 键入 ## 安装 ```sh npm install @contraagent/ui ``` 也可以使用：`pnpm add @contraagent/ui`、`yarn add @contraagent/ui`、`bun add @contraagent/ui` ## README # @ contraagent/ ui (英语) 反向显示器及其作为网络组件的每一种视图(Lit): `` 是整个监视器,每个视图都是自己的一部分, 从记录到时间表 元素使您设定的数据 属性和报告读者要求的事件;它从不获取 除非它是少数 尾巴的活饲料之一。 他们的工作在任何一页或 框架。 数据来自 [`@contraagent/api`](https://npmcn.com/package/%40contraagent/api/README.md); 数据 通用部件由(设计符号、主题、原始、, `cae-*` 要素) [`@contraagent/elements`](https://npmcn.com/package/%40contraagent/elements/README.md),一个包 它自己的页面不需要相反的数据. 这里使用的单词(运行,任务,尝试,圆,元素,视图路径,.)是 反面剂,每个都有一个意义: `contraagent docs concepts` 在平顶山 软件包. ## 获得它 每个显示器都作为ES模块在 `/app.js`: 要素 登记自己,客户、商店和助手是其出口品。 开始 显示器 `--cors-origin` 指定您的页面来源. ```html ``` 从 npm 注册中安装软件包, 这将带来 `@contraagent/api` 财务报告和审定财务报表 `@contraagent/elements` 用它来: ``` npm install @contraagent/ui ``` 检查寄存器组装自己的版本( I)[用从一 离职](https://npmcn.com/package/%40contraagent/ui/#readme-use-it-from-a-checkout)) (中文(简体) ). 在一页中 一个构建步骤,导入软件包一次:每个元素都自行登记。 立特和 Lit localize 是同级依赖。 导入页面中没有任何其它更改 : 调用 `configureLocales()` 语文 `adoptThemes(document)` 联 合 国 主题,或让 `` 连接时拨打两者. ```ts import '@contraagent/ui'; import { configureLocales } from '@contraagent/ui/localize'; import { adoptThemes } from '@contraagent/elements/themes'; configureLocales(); adoptThemes(document); ``` 仅一种观点就是一种子路径;它记录了它的 `ca-*` 要素和 `cae-*` 而不是其他观点: ```ts import '@contraagent/ui/transcript'; // ``` 观点是: `monitor`, (中文(简体) ), `overview`, (中文(简体) ), `pipeline-graph`, (中文(简体) ), `task-view`, (中文(简体) ), `transcript`, (中文(简体) ), `task-table`, (中文(简体) ), `journal-table`, (中文(简体) ), `contracts`, (中文(简体) ), `definitions`, (中文(简体) ), `kpis`, (中文(简体) ), `timeline` 财务报告和审定财务报表 `procs`。 。 。 . `adapters`, (中文(简体) ), `words`, (中文(简体) ), `core` 财务报告和审定财务报表 `localize` 拥有职能和登记无任何记录. `@contraagent/ui/bundle` 是一个 页面自成一体、精密的模块(文本和翻译) 没有建设步骤. ## 意见 每张图都通过演示管道的运行, 在逆光的主题. 打开 [文档网站](https://t-tani.github.io/contraagent/node/ui/),每个视图均以原点代替 它的截图, 以同样的运行. ``,整个显示器(`monitor`:跑步头,其分页,并作综述. ![The monitor's overview of a finished run: 44 of 44 tasks done, no problems, all outputs passed, and the pipeline graph of a review loop](https://npmcn.com/package/%40contraagent/ui/docs/images/monitor.webp) `` (单位:千美元)`pipeline-graph`:按函数和回路来流动,每个任务一个标记. ![The pipeline graph of a review loop: prepare, summarize, a loop of score, review and revise, then write\_note, every task done](https://npmcn.com/package/%40contraagent/ui/docs/images/pipeline-graph.webp) `` (单位:千美元)`task-view`:一个任务的代理会话,笔录,输入,输出和定义. ![The task view of write\_note · alpha, done after 1 correction: the first agent session's transcript and the two checks its output failed](https://npmcn.com/package/%40contraagent/ui/docs/images/task-view.webp) `` (单位:千美元)`journal-table`:每一次尝试都有结果,编码代理,模型,符号,成本和时间. ![The history of the summarize tasks: 8 attempts, all done, one with 1 correction and one after a model switch](https://npmcn.com/package/%40contraagent/ui/docs/images/journal-table.webp) `` (单位:千美元)`task-table`: 每一个任务及其地位. ![The tasks of kind summarize: 8 tasks, all done](https://npmcn.com/package/%40contraagent/ui/docs/images/task-table.webp) `` (单位:千美元)`contracts`: 每一个已检查的文件及其结果. ![The outputs of a run: 44 checked files, all passed](https://npmcn.com/package/%40contraagent/ui/docs/images/contracts.webp) `` (单位:千美元)`definitions`:每种类型的接口及其插件的文件. ![The task definitions of a run: each kind with its role or Python, its tasks and attempts; for review, its plugin directory, output and role file](https://npmcn.com/package/%40contraagent/ui/docs/images/definitions.webp) `` (单位:千美元)`kpis`:跑跑的总和. 计算任务或尝试的瓷砖就是与它们的联系 `no-highest-cost` 将成本最高的那类从成本平板上划出, 用于显示成本的一页. ![The totals of a run: tasks, attempts, cost, tokens, failed attempts, not started, agent session time, retries, corrections and model switches](https://npmcn.com/package/%40contraagent/ui/docs/images/kpis.webp) `` (单位:千美元)`timeline`:每次尝试作为时间轴上的一个栏杆,每条车道. ![The timeline of a run: the attempts of each kind as bars over 23 seconds](https://npmcn.com/package/%40contraagent/ui/docs/images/timeline.webp) ## 借出时用 在仓库里 `web/` (节点22,pnpm通过) `corepack enable`: ``` pnpm install && pnpm tarballs ``` `pnpm tarballs` 正在建设 `@contraagent/api`, (中文(简体) ), `@contraagent/elements` 财务报告和审定财务报表 `@contraagent/ui` 写一个 `.tgz` 每个文件 `web/tarballs/`A级 柏油球用绝对的路径来命名它所依赖的其他人。 然后,进入 您的工程, 用 npm 或 pnpm 安装 3 : ``` npm install /web/tarballs/*.tgz pnpm add /web/tarballs/*.tgz ``` ## 文档 - [嵌入显示器](https://npmcn.com/package/%40contraagent/ui/docs/embed.md): 页面或应用程序中的整个显示器. - [实时数据](https://npmcn.com/package/%40contraagent/ui/docs/live-data.md):客户端提供的元素,活性饲料和商店. - [事件和取景路线](https://npmcn.com/package/%40contraagent/ui/docs/events.md):元素要求什么,以及显示器如何保持读者的位置. - [他们](https://npmcn.com/package/%40contraagent/ui/docs/theming.md): 颜色和字体为 `--ca-*` 自定义属性. - [语文](https://npmcn.com/package/%40contraagent/ui/docs/languages.md):英语和日语,如何添加一种语言. 每个元素的属性、属性和事件都在 `custom-elements.json`, (中文(简体) ), 与软件包一起生成源代码. A 类 `::code` 线条引用软件包的文件 [文档网站](https://t-tani.github.io/contraagent/) 显示已设置的引用行。 这些声明及其评论载于 `dist/**/*.d.ts`。 。 。 . ## 常见问题 ### @contraagent/ui 是什么？ 反向显示器的网络组件:记录、任务表、日记、计划、合同。 无框架 \(Lit\), 由 @ contraagent/ api 键入 ### 如何安装 @contraagent/ui？ 在项目目录运行 npm install @contraagent/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：lit（^3\.3\.3）、@lit/localize（^0\.12\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @contraagent/ui 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @contraagent/ui 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @contraagent/ui 可以商用吗？ @contraagent/ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @contraagent/ui 的下载量有多少？ 根据 npm 官方下载统计，@contraagent/ui 在 2026/10/11 – 2026/11/09 这 30 天内被下载 3,159 次，日均约 105 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @contraagent/ui 还在维护吗？ 最新版本 0\.10\.1 发布于 2026/10/31（10 天前）；至今共发布 19 个版本，其中过去 12 个月发布了 19 个；首次发布于 2026/10/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。